npm install mdxui

import {
  // Loading functions
  loadComponentTypes,
  getComponentType,
 
  // Filtering functions
  getTypesByCategory,
  getTypeCategories,
 
  // Parsing functions
  parseComponentType,
  parseFrontmatter,
  parsePropDef,
  parsePartDef,
  parseCSSVariableDef,
 
  // Code generation
  generateTypeScriptInterface,
 
  // Types
  type ComponentType,
  type PropDef,
  type PartDef,
  type CSSVariableDef,
  type JSONLDMapping,
} from 'mdxui'

interface ComponentType {
  /** Component name */
  name: string
  /** Schema type URI */
  $type: string
  /** Schema ID URI */
  $id: string
  /** Component category */
  category: string
  /** Description */
  description: string
  /** Semantic HTML element */
  semanticElement?: string
  /** Output formats supported */
  outputs: string[]
  /** Related component names */
  related: string[]
  /** Prop definitions */
  props: PropDef[]
  /** CSS part definitions */
  parts: PartDef[]
  /** CSS variable definitions */
  cssVariables: CSSVariableDef[]
  /** JSON-LD mapping (for Thing components) */
  jsonld?: JSONLDMapping
  /** Raw frontmatter */
  frontmatter: Record<string, unknown>
  /** Markdown content (after frontmatter) */
  content: string
}

interface PropDef {
  /** Property name */
  name: string
  /** Type expression (e.g., 'string', 'Media?', "'grid' | 'list'") */
  type: string
  /** Whether the prop is required */
  required: boolean
  /** Default value if specified */
  default?: string
  /** Whether this is an array type */
  isArray: boolean
  /** Base type without modifiers */
  baseType: string
}

interface PartDef {
  /** Part name (CSS class/selector) */
  name: string
  /** Semantic HTML element */
  element: string
  /** Whether this part is optional */
  optional: boolean
}

interface CSSVariableDef {
  /** Variable name (e.g., '--hero-padding') */
  name: string
  /** Default value */
  value: string
}

interface JSONLDMapping {
  /** Schema.org type (e.g., 'schema:Article') */
  $type?: string
  /** Field mappings (prop name -> schema.org property) */
  [key: string]: string | undefined
}

function loadComponentTypes(typesDir: string): ComponentType[]

import { loadComponentTypes } from 'mdxui'
 
const types = loadComponentTypes('./types')
console.log(`Loaded ${types.length} component types`)
 
for (const type of types) {
  console.log(`${type.name}: ${type.description}`)
}

function getComponentType(typesDir: string, name: string): ComponentType | undefined

import { getComponentType } from 'mdxui'
 
const hero = getComponentType('./types', 'Hero')
if (hero) {
  console.log(hero.name)        // 'Hero'
  console.log(hero.category)    // 'landing'
  console.log(hero.props)       // PropDef[]
}

function getTypesByCategory(types: ComponentType[], category: string): ComponentType[]

import { loadComponentTypes, getTypesByCategory } from 'mdxui'
 
const types = loadComponentTypes('./types')
 
const landingTypes = getTypesByCategory(types, 'landing')
// [Hero, Features, Pricing, CTA, LandingPage, ...]
 
const layoutTypes = getTypesByCategory(types, 'layout')
// [App, Site, Page, Section, Layout, Header, Footer, Sidebar]

function getTypeCategories(types: ComponentType[]): string[]

import { loadComponentTypes, getTypeCategories } from 'mdxui'
 
const types = loadComponentTypes('./types')
const categories = getTypeCategories(types)
// ['app', 'component', 'content', 'landing', 'layout', 'media', 'thing']

function parseComponentType(content: string, filename?: string): ComponentType

import { parseComponentType } from 'mdxui'
 
const mdx = `---
name: MyComponent
category: component
description: A custom component
 
# Props
title: string
active: boolean = false
---
 
# MyComponent
 
Documentation here.
`
 
const type = parseComponentType(mdx, 'MyComponent.mdx')
console.log(type.props[0])  // { name: 'title', type: 'string', required: true, ... }

function parseFrontmatter(content: string): {
  frontmatter: Record<string, unknown>
  body: string
}

import { parseFrontmatter } from 'mdxui'
 
const { frontmatter, body } = parseFrontmatter(mdxContent)
console.log(frontmatter.name)  // Component name
console.log(body)              // Markdown content

function parsePropDef(line: string): PropDef | null

import { parsePropDef } from 'mdxui'
 
parsePropDef('title: string')
// { name: 'title', type: 'string', required: true, isArray: false, baseType: 'string' }
 
parsePropDef('items: Feature[]?')
// { name: 'items', type: 'Feature[]', required: false, isArray: true, baseType: 'Feature' }
 
parsePropDef("layout: 'grid' | 'list' = 'grid'")
// { name: 'layout', type: "'grid' | 'list'", required: false, default: "'grid'", ... }

function parsePartDef(line: string): PartDef | null

import { parsePartDef } from 'mdxui'
 
parsePartDef('root: section')
// { name: 'root', element: 'section', optional: false }
 
parsePartDef('sidebar: aside?')
// { name: 'sidebar', element: 'aside', optional: true }

function parseCSSVariableDef(line: string): CSSVariableDef | null

import { parseCSSVariableDef } from 'mdxui'
 
parseCSSVariableDef('--hero-padding: 4rem')
// { name: '--hero-padding', value: '4rem' }
 
parseCSSVariableDef('--card-bg: var(--color-surface)')
// { name: '--card-bg', value: 'var(--color-surface)' }

function generateTypeScriptInterface(componentType: ComponentType): string

import { getComponentType, generateTypeScriptInterface } from 'mdxui'
 
const hero = getComponentType('./types', 'Hero')
const ts = generateTypeScriptInterface(hero)
 
console.log(ts)
// /**
//  * Hero section with headline, subtitle, CTAs, and optional media
//  * @semanticElement header
//  */
// export interface HeroProps {
//   /** title */
//   title: string
//   /** subtitle */
//   subtitle?: string
//   ...
// }

import { loadComponentTypes } from 'mdxui'
import { writeFileSync } from 'fs'
 
const types = loadComponentTypes('./types')
 
let docs = '# Component Reference\n\n'
 
for (const type of types) {
  docs += `## ${type.name}\n\n`
  docs += `${type.description}\n\n`
  docs += `**Category:** ${type.category}\n\n`
 
  if (type.props.length > 0) {
    docs += `### Props\n\n`
    docs += `| Name | Type | Required | Default |\n`
    docs += `|------|------|----------|---------||\n`
    for (const prop of type.props) {
      docs += `| ${prop.name} | \`${prop.type}\` | ${prop.required ? 'Yes' : 'No'} | ${prop.default || '-'} |\n`
    }
    docs += '\n'
  }
}
 
writeFileSync('COMPONENTS.md', docs)

import { getComponentType } from 'mdxui'
 
function validateProps(componentName: string, props: Record<string, unknown>) {
  const type = getComponentType('./types', componentName)
  if (!type) throw new Error(`Unknown component: ${componentName}`)
 
  const errors: string[] = []
 
  for (const propDef of type.props) {
    if (propDef.required && !(propDef.name in props)) {
      errors.push(`Missing required prop: ${propDef.name}`)
    }
  }
 
  return errors
}
 
validateProps('Hero', { subtitle: 'Hello' })
// ['Missing required prop: title']

import { loadComponentTypes } from 'mdxui'
 
const types = loadComponentTypes('./types')
 
let css = ':root {\n'
for (const type of types) {
  if (type.cssVariables.length > 0) {
    css += `  /* ${type.name} */\n`
    for (const v of type.cssVariables) {
      css += `  ${v.name}: ${v.value};\n`
    }
  }
}
css += '}\n'
 
console.log(css)