@wireweave/language-data 1.0.2 → 1.1.0

package/dist/index.js

@@ -1,447 +1,598 @@
+// src/attributes.ts
+var COMMON_ATTRIBUTES = [
+  // Spacing
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "gap",
+  // Size
+  "w",
+  "h",
+  "minW",
+  "maxW",
+  "minH",
+  "maxH",
+  // Flex
+  "flex",
+  "direction",
+  "justify",
+  "align",
+  "wrap",
+  // Grid
+  "span",
+  // Position
+  "x",
+  "y"
+];
+var ATTRIBUTES = [
+  // ============================================
+  // Spacing Attributes
+  // ============================================
+  { name: "p", type: "number", description: "Padding (all sides)", example: "p=4" },
+  { name: "px", type: "number", description: "Horizontal padding", example: "px=4" },
+  { name: "py", type: "number", description: "Vertical padding", example: "py=4" },
+  { name: "pt", type: "number", description: "Top padding", example: "pt=4" },
+  { name: "pr", type: "number", description: "Right padding", example: "pr=4" },
+  { name: "pb", type: "number", description: "Bottom padding", example: "pb=4" },
+  { name: "pl", type: "number", description: "Left padding", example: "pl=4" },
+  { name: "m", type: "number", description: "Margin (all sides)", example: "m=4" },
+  { name: "mx", type: "string", description: 'Horizontal margin (number or "auto")', example: "mx=auto" },
+  { name: "my", type: "number", description: "Vertical margin", example: "my=4" },
+  { name: "mt", type: "number", description: "Top margin", example: "mt=4" },
+  { name: "mr", type: "number", description: "Right margin", example: "mr=4" },
+  { name: "mb", type: "number", description: "Bottom margin", example: "mb=4" },
+  { name: "ml", type: "number", description: "Left margin", example: "ml=4" },
+  { name: "gap", type: "number", description: "Gap between children", example: "gap=4" },
+  // ============================================
+  // Size Attributes
+  // ============================================
+  { name: "w", type: "string", description: 'Width (number, "full", "auto", "screen", "fit")', example: "w=full" },
+  { name: "h", type: "string", description: 'Height (number, "full", "auto", "screen")', example: "h=full" },
+  { name: "width", type: "number", description: "Width in pixels (page only)", example: "width=400" },
+  { name: "height", type: "number", description: "Height in pixels (page only)", example: "height=300" },
+  { name: "minW", type: "number", description: "Minimum width", example: "minW=200" },
+  { name: "maxW", type: "number", description: "Maximum width", example: "maxW=600" },
+  { name: "minH", type: "number", description: "Minimum height", example: "minH=100" },
+  { name: "maxH", type: "number", description: "Maximum height", example: "maxH=400" },
+  // ============================================
+  // Flex/Grid Layout Attributes
+  // ============================================
+  { name: "flex", type: "boolean", description: "Enable flexbox", example: "flex" },
+  { name: "direction", type: "enum", values: ["row", "column", "row-reverse", "column-reverse"], description: "Flex direction", example: "direction=column" },
+  { name: "justify", type: "enum", values: ["start", "center", "end", "between", "around", "evenly"], description: "Main axis alignment", example: "justify=center" },
+  { name: "align", type: "enum", values: ["start", "center", "end", "stretch", "baseline"], description: "Cross axis alignment", example: "align=center" },
+  { name: "wrap", type: "boolean", description: "Enable flex wrap", example: "wrap" },
+  { name: "span", type: "number", description: "Grid column span (1-12)", example: "span=6" },
+  { name: "sm", type: "number", description: "Responsive span at 576px+", example: "sm=6" },
+  { name: "md", type: "number", description: "Responsive span at 768px+", example: "md=4" },
+  { name: "lg", type: "number", description: "Responsive span at 992px+", example: "lg=3" },
+  { name: "xl", type: "number", description: "Responsive span at 1200px+", example: "xl=2" },
+  { name: "order", type: "number", description: "Flex order", example: "order=1" },
+  // ============================================
+  // Position Attributes
+  // ============================================
+  { name: "x", type: "number", description: "Horizontal position", example: "x=100" },
+  { name: "y", type: "number", description: "Vertical position", example: "y=50" },
+  { name: "position", type: "enum", values: ["left", "right", "top", "bottom", "top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"], description: "Position preset", example: "position=left" },
+  // ============================================
+  // Visual Attributes
+  // ============================================
+  { name: "border", type: "boolean", description: "Show border", example: "border" },
+  { name: "rounded", type: "boolean", description: "Apply border radius", example: "rounded" },
+  { name: "shadow", type: "enum", values: ["none", "sm", "md", "lg", "xl"], description: "Box shadow", example: "shadow=md" },
+  { name: "bg", type: "enum", values: ["muted", "primary", "secondary"], description: "Background variant", example: "bg=muted" },
+  // ============================================
+  // Text Attributes
+  // ============================================
+  { name: "size", type: "enum", values: ["xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl"], description: "Size preset", example: "size=lg" },
+  { name: "weight", type: "enum", values: ["normal", "medium", "semibold", "bold"], description: "Font weight", example: "weight=bold" },
+  { name: "level", type: "number", description: "Heading level (1-6)", example: "level=2" },
+  { name: "muted", type: "boolean", description: "Muted/dimmed style", example: "muted" },
+  { name: "bold", type: "boolean", description: "Bold text", example: "bold" },
+  // ============================================
+  // Button Variant Attributes
+  // ============================================
+  { name: "primary", type: "boolean", description: "Primary style", example: "primary" },
+  { name: "secondary", type: "boolean", description: "Secondary style", example: "secondary" },
+  { name: "outline", type: "boolean", description: "Outline style", example: "outline" },
+  { name: "ghost", type: "boolean", description: "Ghost/transparent style", example: "ghost" },
+  { name: "danger", type: "boolean", description: "Danger/destructive style", example: "danger" },
+  // ============================================
+  // Status Variant Attributes
+  // ============================================
+  { name: "variant", type: "enum", values: ["default", "primary", "secondary", "success", "warning", "danger", "info"], description: "Status variant", example: "variant=success" },
+  // ============================================
+  // Form Attributes
+  // ============================================
+  { name: "inputType", type: "enum", values: ["text", "email", "password", "number", "tel", "url", "search", "date"], description: "Input field type", example: "inputType=email" },
+  { name: "placeholder", type: "string", description: "Placeholder text", example: 'placeholder="Enter text"' },
+  { name: "value", type: "string", description: "Default value", example: 'value="default"' },
+  { name: "label", type: "string", description: "Field label", example: 'label="Name"' },
+  { name: "name", type: "string", description: "Form field name", example: 'name="field"' },
+  { name: "required", type: "boolean", description: "Required field", example: "required" },
+  { name: "disabled", type: "boolean", description: "Disabled state", example: "disabled" },
+  { name: "readonly", type: "boolean", description: "Read-only state", example: "readonly" },
+  { name: "checked", type: "boolean", description: "Checked state", example: "checked" },
+  { name: "loading", type: "boolean", description: "Loading state", example: "loading" },
+  { name: "rows", type: "number", description: "Textarea rows", example: "rows=4" },
+  { name: "min", type: "number", description: "Minimum value", example: "min=0" },
+  { name: "max", type: "number", description: "Maximum value", example: "max=100" },
+  { name: "step", type: "number", description: "Step increment", example: "step=1" },
+  // ============================================
+  // Content Attributes
+  // ============================================
+  { name: "title", type: "string", description: "Title text", example: 'title="Title"' },
+  { name: "src", type: "string", description: "Source URL", example: 'src="/image.png"' },
+  { name: "alt", type: "string", description: "Alt text", example: 'alt="Image"' },
+  { name: "href", type: "string", description: "Link URL", example: 'href="/path"' },
+  { name: "icon", type: "string", description: "Icon name", example: 'icon="home"' },
+  { name: "external", type: "boolean", description: "External link", example: "external" },
+  // ============================================
+  // State Attributes
+  // ============================================
+  { name: "active", type: "number", description: "Active index", example: "active=0" },
+  { name: "expanded", type: "boolean", description: "Expanded state", example: "expanded" },
+  { name: "centered", type: "boolean", description: "Center content", example: "centered" },
+  { name: "vertical", type: "boolean", description: "Vertical orientation", example: "vertical" },
+  { name: "scroll", type: "boolean", description: "Enable scrolling", example: "scroll" },
+  // ============================================
+  // Feedback Attributes
+  // ============================================
+  { name: "dismissible", type: "boolean", description: "Can be dismissed", example: "dismissible" },
+  { name: "indeterminate", type: "boolean", description: "Indeterminate state", example: "indeterminate" },
+  { name: "pill", type: "boolean", description: "Pill/rounded style", example: "pill" },
+  // ============================================
+  // Data Attributes
+  // ============================================
+  { name: "striped", type: "boolean", description: "Striped rows", example: "striped" },
+  { name: "bordered", type: "boolean", description: "Full borders", example: "bordered" },
+  { name: "hover", type: "boolean", description: "Hover effect", example: "hover" },
+  { name: "ordered", type: "boolean", description: "Ordered list", example: "ordered" },
+  { name: "none", type: "boolean", description: "No list markers", example: "none" },
+  // ============================================
+  // Page/Viewport Attributes
+  // ============================================
+  { name: "viewport", type: "string", description: 'Viewport size (e.g., "1440x900")', example: 'viewport="1440x900"' },
+  { name: "device", type: "string", description: "Device preset", example: 'device="iphone14"' }
+];
+var ATTRIBUTE_MAP = new Map(
+  ATTRIBUTES.map((attr) => [attr.name, attr])
+);
+var VALID_ATTRIBUTE_NAMES = new Set(
+  ATTRIBUTES.map((attr) => attr.name)
+);
+
 // src/components.ts
 var ALL_COMPONENTS = [
-  // Layout
+  // ============================================
+  // Layout Components
+  // ============================================
   {
     name: "page",
-    description: "Page root container. Starting point for the entire layout.",
+    nodeType: "Page",
     category: "layout",
-    attributes: ["title", "width", "height", "viewport", "device", "centered", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "gap"],
+    attributes: [...COMMON_ATTRIBUTES, "title", "width", "height", "viewport", "device", "centered"],
     hasChildren: true,
+    description: "Root container for a wireframe page",
+    example: 'page "Dashboard" centered { ... }',
     validChildren: ["header", "main", "footer", "sidebar", "section", "nav", "row", "col", "card"],
-    validParents: [],
-    example: 'page "Dashboard" centered { ... }'
+    validParents: []
   },
   {
     name: "header",
-    description: "Page header area. Place navigation, logo, etc.",
+    nodeType: "Header",
     category: "layout",
-    attributes: ["p", "px", "py", "border", "gap", "justify", "align"],
+    attributes: [...COMMON_ATTRIBUTES, "border"],
     hasChildren: true,
-    validParents: ["page"],
-    example: "header p=4 border { ... }"
+    description: "Page header section",
+    example: "header h=56 border { ... }",
+    validParents: ["page"]
   },
   {
     name: "main",
-    description: "Main content area. Place primary content here.",
+    nodeType: "Main",
     category: "layout",
-    attributes: ["p", "px", "py", "gap"],
+    attributes: [...COMMON_ATTRIBUTES, "scroll"],
     hasChildren: true,
-    validParents: ["page"],
-    example: "main p=6 { ... }"
+    description: "Main content section",
+    example: "main p=6 scroll { ... }",
+    validParents: ["page"]
   },
   {
     name: "footer",
-    description: "Page footer area. Place copyright, links, etc.",
+    nodeType: "Footer",
     category: "layout",
-    attributes: ["p", "px", "py", "border", "gap"],
+    attributes: [...COMMON_ATTRIBUTES, "border"],
     hasChildren: true,
-    validParents: ["page"],
-    example: "footer p=4 border { ... }"
+    description: "Page footer section",
+    example: "footer h=48 border { ... }",
+    validParents: ["page"]
   },
   {
     name: "sidebar",
-    description: "Sidebar area. Place auxiliary navigation or information.",
+    nodeType: "Sidebar",
     category: "layout",
-    attributes: ["position", "w", "p", "px", "py", "gap"],
+    attributes: [...COMMON_ATTRIBUTES, "position", "border", "bg"],
     hasChildren: true,
-    validParents: ["page"],
-    example: "sidebar w=240 { ... }"
+    description: "Side navigation or content area",
+    example: "sidebar w=240 border { ... }",
+    validParents: ["page"]
   },
   {
     name: "section",
-    description: "Section area. Logically group content.",
+    nodeType: "Section",
     category: "layout",
-    attributes: ["title", "expanded", "p", "px", "py", "gap"],
+    attributes: [...COMMON_ATTRIBUTES, "title", "expanded"],
     hasChildren: true,
+    description: "Grouped content section",
     example: 'section "Settings" expanded { ... }'
   },
-  // Grid
+  // ============================================
+  // Grid Components
+  // ============================================
   {
     name: "row",
-    description: "Horizontal flex container. Arrange children horizontally.",
+    nodeType: "Row",
     category: "grid",
-    attributes: ["gap", "justify", "align", "wrap", "direction", "flex", "p", "m", "mt", "mb"],
+    attributes: [...COMMON_ATTRIBUTES, "border", "bg"],
     hasChildren: true,
+    description: "Horizontal flex container",
     example: "row flex gap=4 justify=between { ... }"
   },
   {
     name: "col",
-    description: "Vertical flex container or grid column.",
+    nodeType: "Col",
     category: "grid",
-    attributes: ["span", "sm", "md", "lg", "xl", "order", "gap", "justify", "align", "p", "m", "w"],
+    attributes: [...COMMON_ATTRIBUTES, "sm", "md", "lg", "xl", "order", "border", "bg", "scroll"],
     hasChildren: true,
+    description: "Vertical flex container or grid column",
     example: "col span=6 md=4 { ... }"
   },
-  // Container
+  // ============================================
+  // Container Components
+  // ============================================
   {
     name: "card",
-    description: "Card component. Group and display content.",
+    nodeType: "Card",
     category: "container",
-    attributes: ["title", "p", "shadow", "border", "gap"],
+    attributes: [...COMMON_ATTRIBUTES, "title", "shadow", "border", "rounded"],
     hasChildren: true,
+    description: "Card container with optional title",
     example: 'card "Settings" p=4 shadow=md { ... }'
   },
   {
     name: "modal",
-    description: "Modal dialog. Display content on an overlay.",
+    nodeType: "Modal",
     category: "container",
-    attributes: ["title", "w", "h", "p"],
+    attributes: [...COMMON_ATTRIBUTES, "title"],
     hasChildren: true,
+    description: "Modal dialog overlay",
     example: 'modal "Confirm" w=400 { ... }'
   },
   {
     name: "drawer",
-    description: "Drawer panel. Slides in from the edge of the screen.",
+    nodeType: "Drawer",
     category: "container",
-    attributes: ["title", "position", "p"],
+    attributes: [...COMMON_ATTRIBUTES, "title", "position"],
     hasChildren: true,
+    description: "Slide-in drawer panel",
     example: 'drawer "Menu" position=left { ... }'
   },
   {
     name: "accordion",
-    description: "Accordion. Collapsible content panel.",
+    nodeType: "Accordion",
     category: "container",
-    attributes: ["title", "p"],
+    attributes: [...COMMON_ATTRIBUTES, "title"],
     hasChildren: true,
+    description: "Collapsible sections container",
     example: 'accordion { section "FAQ 1" { ... } }'
   },
-  // Text
+  // ============================================
+  // Text Components
+  // ============================================
   {
     name: "text",
-    description: "Text element. Display plain text.",
+    nodeType: "Text",
     category: "text",
-    attributes: ["size", "weight", "align", "muted", "m", "mt", "mb"],
+    attributes: [...COMMON_ATTRIBUTES, "size", "weight", "muted", "bold"],
     hasChildren: false,
+    description: "Text content",
     example: 'text "Hello World" size=lg weight=bold'
   },
   {
     name: "title",
-    description: "Title element. Display h1-h6 headings.",
+    nodeType: "Title",
     category: "text",
-    attributes: ["level", "size", "align", "m", "mt", "mb"],
+    attributes: [...COMMON_ATTRIBUTES, "level", "size"],
     hasChildren: false,
+    description: "Heading element (h1-h6)",
     example: 'title "Welcome" level=2'
   },
   {
     name: "link",
-    description: "Link element. Display clickable hyperlink.",
+    nodeType: "Link",
     category: "text",
-    attributes: ["href", "external"],
+    attributes: [...COMMON_ATTRIBUTES, "href", "external"],
     hasChildren: false,
+    description: "Hyperlink text",
     example: 'link "Learn more" href="/docs" external'
   },
-  // Input
+  // ============================================
+  // Input Components
+  // ============================================
   {
     name: "input",
-    description: "Input field. Accept text, email, password, etc.",
+    nodeType: "Input",
     category: "input",
-    attributes: ["label", "inputType", "placeholder", "value", "disabled", "required", "readonly", "icon", "m", "mb"],
+    attributes: [...COMMON_ATTRIBUTES, "label", "inputType", "placeholder", "value", "disabled", "required", "readonly", "icon", "size", "rounded"],
     hasChildren: false,
+    description: "Text input field",
     example: 'input "Email" inputType=email placeholder="user@example.com" required'
   },
   {
     name: "textarea",
-    description: "Multi-line input field. Accept long text.",
+    nodeType: "Textarea",
     category: "input",
-    attributes: ["label", "placeholder", "value", "rows", "disabled", "required", "m", "mb"],
+    attributes: [...COMMON_ATTRIBUTES, "label", "placeholder", "value", "rows", "disabled", "required"],
     hasChildren: false,
+    description: "Multi-line text input",
     example: 'textarea "Description" rows=4 placeholder="Enter description..."'
   },
   {
     name: "select",
-    description: "Dropdown select. Choose one from multiple options.",
+    nodeType: "Select",
     category: "input",
-    attributes: ["label", "placeholder", "value", "disabled", "required", "m", "mb"],
+    attributes: [...COMMON_ATTRIBUTES, "label", "placeholder", "value", "disabled", "required"],
     hasChildren: false,
+    description: "Dropdown select",
     example: 'select "Country" ["USA", "Canada", "UK"] placeholder="Select..."'
   },
   {
     name: "checkbox",
-    description: "Checkbox. Select true/false value.",
+    nodeType: "Checkbox",
     category: "input",
-    attributes: ["label", "checked", "disabled", "m", "mb"],
+    attributes: [...COMMON_ATTRIBUTES, "label", "checked", "disabled"],
     hasChildren: false,
+    description: "Checkbox input",
     example: 'checkbox "I agree to terms" checked'
   },
   {
     name: "radio",
-    description: "Radio button. Select one within a group.",
+    nodeType: "Radio",
     category: "input",
-    attributes: ["label", "name", "checked", "disabled", "m", "mb"],
+    attributes: [...COMMON_ATTRIBUTES, "label", "name", "checked", "disabled"],
     hasChildren: false,
+    description: "Radio button input",
     example: 'radio "Option A" name="choice" checked'
   },
   {
     name: "switch",
-    description: "Toggle switch. Switch on/off state.",
+    nodeType: "Switch",
     category: "input",
-    attributes: ["label", "checked", "disabled", "m", "mb"],
+    attributes: [...COMMON_ATTRIBUTES, "label", "checked", "disabled"],
     hasChildren: false,
+    description: "Toggle switch",
     example: 'switch "Dark mode" checked'
   },
   {
     name: "slider",
-    description: "Slider. Select a value within a range.",
+    nodeType: "Slider",
     category: "input",
-    attributes: ["label", "min", "max", "value", "step", "disabled", "m", "mb"],
+    attributes: [...COMMON_ATTRIBUTES, "label", "min", "max", "value", "step", "disabled"],
     hasChildren: false,
+    description: "Range slider",
     example: 'slider "Volume" min=0 max=100 value=50'
   },
-  // Button
   {
     name: "button",
-    description: "Button element. Display clickable button.",
+    nodeType: "Button",
     category: "input",
-    attributes: ["primary", "secondary", "outline", "ghost", "danger", "size", "icon", "disabled", "loading", "w"],
+    attributes: [...COMMON_ATTRIBUTES, "primary", "secondary", "outline", "ghost", "danger", "size", "icon", "disabled", "loading"],
     hasChildren: false,
+    description: "Clickable button",
     example: 'button "Submit" primary icon=send'
   },
-  // Display
+  // ============================================
+  // Display Components
+  // ============================================
   {
     name: "image",
-    description: "Image element. Display an image.",
+    nodeType: "Image",
     category: "display",
-    attributes: ["src", "alt", "w", "h"],
+    attributes: [...COMMON_ATTRIBUTES, "src", "alt"],
     hasChildren: false,
+    description: "Image placeholder",
     example: "image w=200 h=150"
   },
   {
     name: "placeholder",
-    description: "Placeholder. Image or content placeholder.",
+    nodeType: "Placeholder",
     category: "display",
-    attributes: ["label", "w", "h"],
-    hasChildren: false,
-    example: 'placeholder "Banner Image" w=full h=200'
+    attributes: [...COMMON_ATTRIBUTES, "label"],
+    hasChildren: true,
+    description: "Generic placeholder",
+    example: 'placeholder "Banner Image" w=full h=200 { ... }'
   },
   {
     name: "avatar",
-    description: "Avatar element. Display user profile image.",
+    nodeType: "Avatar",
     category: "display",
-    attributes: ["name", "src", "size"],
+    attributes: [...COMMON_ATTRIBUTES, "name", "src", "size"],
     hasChildren: false,
+    description: "User avatar",
     example: 'avatar "John Doe" size=lg'
   },
   {
     name: "badge",
-    description: "Badge element. Display status or count as a small label.",
+    nodeType: "Badge",
     category: "display",
-    attributes: ["variant", "pill", "icon", "size"],
+    attributes: [...COMMON_ATTRIBUTES, "variant", "pill", "icon", "size"],
     hasChildren: false,
+    description: "Status badge",
     example: 'badge "New" variant=success pill'
   },
   {
     name: "icon",
-    description: "Icon element. Display a Lucide icon.",
+    nodeType: "Icon",
     category: "display",
-    attributes: ["name", "size", "muted"],
+    attributes: [...COMMON_ATTRIBUTES, "size", "muted"],
     hasChildren: false,
+    description: "Lucide icon",
     example: 'icon "settings" size=lg'
   },
-  // Data
+  // ============================================
+  // Data Components
+  // ============================================
   {
     name: "table",
-    description: "Table component. Display data in tabular format.",
+    nodeType: "Table",
     category: "data",
-    attributes: ["striped", "bordered", "hover"],
+    attributes: [...COMMON_ATTRIBUTES, "striped", "bordered", "hover"],
     hasChildren: false,
+    description: "Data table",
     example: 'table striped bordered { columns ["Name", "Email"] row ["John", "john@example.com"] }'
   },
   {
     name: "list",
-    description: "List component. Display items as a list.",
+    nodeType: "List",
     category: "data",
-    attributes: ["ordered", "none", "gap"],
+    attributes: [...COMMON_ATTRIBUTES, "ordered", "none"],
     hasChildren: false,
+    description: "List of items",
     example: 'list ordered ["First", "Second", "Third"]'
   },
-  // Feedback
+  // ============================================
+  // Feedback Components
+  // ============================================
   {
     name: "alert",
-    description: "Alert element. Display a message to the user.",
+    nodeType: "Alert",
     category: "feedback",
-    attributes: ["variant", "dismissible", "icon"],
+    attributes: [...COMMON_ATTRIBUTES, "variant", "dismissible", "icon"],
     hasChildren: false,
+    description: "Alert message",
     example: 'alert "Changes saved!" variant=success'
   },
   {
     name: "toast",
-    description: "Toast notification. Display a temporary message.",
+    nodeType: "Toast",
     category: "feedback",
-    attributes: ["position", "variant"],
+    attributes: [...COMMON_ATTRIBUTES, "position", "variant"],
     hasChildren: false,
+    description: "Toast notification",
     example: 'toast "Item deleted" position=bottom-right variant=danger'
   },
   {
     name: "progress",
-    description: "Progress bar. Display progress status.",
+    nodeType: "Progress",
     category: "feedback",
-    attributes: ["value", "max", "label", "indeterminate"],
+    attributes: [...COMMON_ATTRIBUTES, "value", "max", "label", "indeterminate"],
     hasChildren: false,
+    description: "Progress bar",
     example: 'progress value=75 label="Uploading..."'
   },
   {
     name: "spinner",
-    description: "Loading spinner. Display loading status.",
+    nodeType: "Spinner",
     category: "feedback",
-    attributes: ["label", "size"],
+    attributes: [...COMMON_ATTRIBUTES, "label", "size"],
     hasChildren: false,
+    description: "Loading spinner",
     example: "spinner size=lg"
   },
-  // Overlay
+  // ============================================
+  // Overlay Components
+  // ============================================
   {
     name: "tooltip",
-    description: "Tooltip element. Show additional info on hover.",
+    nodeType: "Tooltip",
     category: "overlay",
-    attributes: ["position"],
-    hasChildren: true,
+    attributes: [...COMMON_ATTRIBUTES, "position"],
+    hasChildren: false,
+    description: "Tooltip on hover",
     example: 'tooltip "More info" position=top { icon "help-circle" }'
   },
   {
     name: "popover",
-    description: "Popover. Show additional content on click.",
+    nodeType: "Popover",
     category: "overlay",
-    attributes: ["title"],
+    attributes: [...COMMON_ATTRIBUTES, "title"],
     hasChildren: true,
+    description: "Popover panel",
     example: 'popover "Details" { ... }'
   },
   {
     name: "dropdown",
-    description: "Dropdown menu. Expand menu on click.",
+    nodeType: "Dropdown",
     category: "overlay",
-    attributes: [],
+    attributes: [...COMMON_ATTRIBUTES],
     hasChildren: false,
+    description: "Dropdown menu",
     example: 'dropdown { item "Edit" icon=edit item "Delete" icon=trash danger }'
   },
-  // Navigation
+  // ============================================
+  // Navigation Components
+  // ============================================
   {
     name: "nav",
-    description: "Navigation area. Place menu items.",
+    nodeType: "Nav",
     category: "navigation",
-    attributes: ["vertical", "gap"],
+    attributes: [...COMMON_ATTRIBUTES, "vertical"],
     hasChildren: false,
+    description: "Navigation menu",
     example: 'nav [{ label="Home" icon=home active }, { label="Settings" icon=settings }] vertical'
   },
   {
     name: "tabs",
-    description: "Tabs component. Switch between multiple panels.",
+    nodeType: "Tabs",
     category: "navigation",
-    attributes: ["active"],
+    attributes: [...COMMON_ATTRIBUTES, "active"],
     hasChildren: true,
+    description: "Tab navigation",
     example: 'tabs { tab "General" active { ... } tab "Advanced" { ... } }'
   },
   {
     name: "breadcrumb",
-    description: "Breadcrumb. Display current location as a path.",
+    nodeType: "Breadcrumb",
     category: "navigation",
-    attributes: [],
+    attributes: [...COMMON_ATTRIBUTES],
     hasChildren: false,
+    description: "Breadcrumb navigation",
     example: 'breadcrumb [{ label="Home" href="/" }, { label="Products" }, { label="Details" }]'
   },
-  // Divider
+  // ============================================
+  // Divider Component
+  // ============================================
   {
     name: "divider",
-    description: "Divider element. Visually separate content.",
-    category: "display",
-    attributes: ["m", "my", "mx"],
+    nodeType: "Divider",
+    category: "layout",
+    attributes: [...COMMON_ATTRIBUTES, "vertical"],
     hasChildren: false,
+    description: "Horizontal separator",
     example: "divider my=4"
   }
 ];
-
-// src/attributes.ts
-var ATTRIBUTES = [
-  // Spacing
-  { name: "p", description: "Padding. Set inner spacing.", values: "number", example: "p=4" },
-  { name: "px", description: "Horizontal padding.", values: "number", example: "px=4" },
-  { name: "py", description: "Vertical padding.", values: "number", example: "py=4" },
-  { name: "pt", description: "Top padding.", values: "number", example: "pt=4" },
-  { name: "pr", description: "Right padding.", values: "number", example: "pr=4" },
-  { name: "pb", description: "Bottom padding.", values: "number", example: "pb=4" },
-  { name: "pl", description: "Left padding.", values: "number", example: "pl=4" },
-  { name: "m", description: "Margin. Set outer spacing.", values: "number", example: "m=4" },
-  { name: "mx", description: 'Horizontal margin. Can be "auto" for centering.', values: "number", example: "mx=auto" },
-  { name: "my", description: "Vertical margin.", values: "number", example: "my=4" },
-  { name: "mt", description: "Top margin.", values: "number", example: "mt=4" },
-  { name: "mr", description: "Right margin.", values: "number", example: "mr=4" },
-  { name: "mb", description: "Bottom margin.", values: "number", example: "mb=4" },
-  { name: "ml", description: "Left margin.", values: "number", example: "ml=4" },
-  { name: "gap", description: "Gap between child elements.", values: "number", example: "gap=4" },
-  // Grid Layout
-  { name: "span", description: "Grid column width (1-12).", values: "number", example: "span=6" },
-  { name: "sm", description: "Column width at 576px and above.", values: "number", example: "sm=6" },
-  { name: "md", description: "Column width at 768px and above.", values: "number", example: "md=4" },
-  { name: "lg", description: "Column width at 992px and above.", values: "number", example: "lg=3" },
-  { name: "xl", description: "Column width at 1200px and above.", values: "number", example: "xl=2" },
-  { name: "order", description: "Order within flex container.", values: "number", example: "order=1" },
-  // Flex Layout
-  { name: "flex", description: "Enable flexbox layout.", values: "boolean", example: "flex" },
-  { name: "direction", description: "Flex direction.", values: ["row", "column", "row-reverse", "column-reverse"], example: "direction=column" },
-  { name: "justify", description: "Main axis alignment.", values: ["start", "center", "end", "between", "around", "evenly"], example: "justify=center" },
-  { name: "align", description: "Cross axis alignment.", values: ["start", "center", "end", "stretch", "baseline"], example: "align=center" },
-  { name: "wrap", description: "Allow child elements to wrap.", values: "boolean", example: "wrap" },
-  // Size
-  { name: "width", description: "Width in pixels.", values: "number", example: "width=400" },
-  { name: "height", description: "Height in pixels.", values: "number", example: "height=300" },
-  { name: "w", description: "Width (full, auto, screen, fit, or number).", values: ["full", "auto", "screen", "fit"], example: "w=full" },
-  { name: "h", description: "Height (full, auto, screen, or number).", values: ["full", "auto", "screen"], example: "h=full" },
-  { name: "minW", description: "Minimum width.", values: "number", example: "minW=200" },
-  { name: "maxW", description: "Maximum width.", values: "number", example: "maxW=600" },
-  { name: "minH", description: "Minimum height.", values: "number", example: "minH=100" },
-  { name: "maxH", description: "Maximum height.", values: "number", example: "maxH=400" },
-  { name: "size", description: "Size preset.", values: ["xs", "sm", "md", "lg", "xl"], example: "size=lg" },
-  { name: "viewport", description: 'Viewport size (e.g., "1440x900").', values: "string", example: 'viewport="1440x900"' },
-  { name: "device", description: "Device preset.", values: ["iphone14", "iphone14pro", "desktop", "tablet"], example: 'device="iphone14"' },
-  // Visual
-  { name: "border", description: "Show border.", values: "boolean", example: "border" },
-  { name: "shadow", description: "Box shadow.", values: ["none", "sm", "md", "lg", "xl"], example: "shadow=md" },
-  { name: "position", description: "Position setting.", values: ["left", "right", "top", "bottom", "top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"], example: "position=left" },
-  // Text
-  { name: "level", description: "Heading level (1-6).", values: "number", example: "level=2" },
-  { name: "weight", description: "Font weight.", values: ["normal", "medium", "semibold", "bold"], example: "weight=bold" },
-  { name: "muted", description: "Muted style.", values: "boolean", example: "muted" },
-  // Button variants
-  { name: "primary", description: "Primary emphasis style.", values: "boolean", example: "primary" },
-  { name: "secondary", description: "Secondary style.", values: "boolean", example: "secondary" },
-  { name: "outline", description: "Outline style.", values: "boolean", example: "outline" },
-  { name: "ghost", description: "Ghost/transparent style.", values: "boolean", example: "ghost" },
-  { name: "danger", description: "Danger/delete style.", values: "boolean", example: "danger" },
-  // Status variants
-  { name: "variant", description: "Variant style.", values: ["default", "primary", "secondary", "success", "warning", "danger", "info"], example: "variant=success" },
-  // Form
-  { name: "inputType", description: "Input field type.", values: ["text", "email", "password", "number", "tel", "url", "search", "date"], example: "inputType=email" },
-  { name: "placeholder", description: "Placeholder text.", values: "string", example: 'placeholder="Enter text"' },
-  { name: "value", description: "Default value.", values: "string", example: 'value="default"' },
-  { name: "label", description: "Label text.", values: "string", example: 'label="Name"' },
-  { name: "required", description: "Required field.", values: "boolean", example: "required" },
-  { name: "disabled", description: "Disabled state.", values: "boolean", example: "disabled" },
-  { name: "readonly", description: "Read-only.", values: "boolean", example: "readonly" },
-  { name: "checked", description: "Checked state.", values: "boolean", example: "checked" },
-  { name: "loading", description: "Loading state.", values: "boolean", example: "loading" },
-  { name: "name", description: "Form element name attribute.", values: "string", example: 'name="field"' },
-  { name: "rows", description: "Number of textarea rows.", values: "number", example: "rows=4" },
-  { name: "min", description: "Minimum value.", values: "number", example: "min=0" },
-  { name: "max", description: "Maximum value.", values: "number", example: "max=100" },
-  { name: "step", description: "Step increment.", values: "number", example: "step=1" },
-  // Other
-  { name: "title", description: "Title text.", values: "string", example: 'title="Title"' },
-  { name: "centered", description: "Center alignment.", values: "boolean", example: "centered" },
-  { name: "vertical", description: "Vertical orientation.", values: "boolean", example: "vertical" },
-  { name: "expanded", description: "Expanded state.", values: "boolean", example: "expanded" },
-  { name: "active", description: "Active state/index.", values: "number", example: "active=0" },
-  { name: "href", description: "Link URL.", values: "string", example: 'href="/path"' },
-  { name: "external", description: "External link.", values: "boolean", example: "external" },
-  { name: "src", description: "Image source URL.", values: "string", example: 'src="/image.png"' },
-  { name: "alt", description: "Alternative text.", values: "string", example: 'alt="Image"' },
-  { name: "icon", description: "Icon name (Lucide icons).", values: "string", example: 'icon="home"' },
-  { name: "pill", description: "Rounded pill badge.", values: "boolean", example: "pill" },
-  { name: "dismissible", description: "Can be dismissed.", values: "boolean", example: "dismissible" },
-  { name: "indeterminate", description: "Indeterminate state.", values: "boolean", example: "indeterminate" },
-  { name: "striped", description: "Striped style.", values: "boolean", example: "striped" },
-  { name: "bordered", description: "Bordered style.", values: "boolean", example: "bordered" },
-  { name: "hover", description: "Hover effect.", values: "boolean", example: "hover" },
-  { name: "ordered", description: "Ordered list.", values: "boolean", example: "ordered" },
-  { name: "none", description: "No list style.", values: "boolean", example: "none" }
-];
+var COMPONENT_MAP = new Map(
+  ALL_COMPONENTS.map((comp) => [comp.name, comp])
+);
+var NODE_TYPE_MAP = new Map(
+  ALL_COMPONENTS.map((comp) => [comp.nodeType, comp])
+);
+var VALID_COMPONENT_NAMES = new Set(
+  ALL_COMPONENTS.map((comp) => comp.name)
+);
 
 // src/keywords.ts
 var CATEGORY_LABELS = {
@@ -547,10 +698,13 @@ var SPACING_SCALE = {
 
 // src/utils.ts
 function getComponent(name) {
-  return ALL_COMPONENTS.find((c) => c.name === name.toLowerCase());
+  return COMPONENT_MAP.get(name.toLowerCase());
+}
+function getComponentByNodeType(nodeType) {
+  return NODE_TYPE_MAP.get(nodeType);
 }
 function getAttribute(name) {
-  return ATTRIBUTES.find((a) => a.name === name);
+  return ATTRIBUTE_MAP.get(name);
 }
 function getValidChildren(componentName) {
   const component = getComponent(componentName);
@@ -575,29 +729,29 @@ function getComponentsByCategory(category) {
   return ALL_COMPONENTS.filter((c) => c.category === category);
 }
 function getAttributeTypeLabel(attr) {
-  if (attr.values === "number") return "number";
-  if (attr.values === "string") return "string";
-  if (attr.values === "boolean") return "boolean";
-  if (Array.isArray(attr.values)) {
+  if (attr.type === "boolean") return "boolean";
+  if (attr.type === "number") return "number";
+  if (attr.type === "string" || attr.type === "string[]") return "string";
+  if (attr.type === "enum" && attr.values) {
     const preview = attr.values.slice(0, 3).join(" | ");
     return attr.values.length > 3 ? `${preview}...` : preview;
   }
-  return "";
+  return attr.type;
 }
 function formatAttributeValues(attr) {
-  if (attr.values === "number") return "Type: number";
-  if (attr.values === "string") return "Type: string";
-  if (attr.values === "boolean") return "Type: boolean (can be omitted)";
-  if (Array.isArray(attr.values)) {
+  if (attr.type === "number") return "Type: number";
+  if (attr.type === "string") return "Type: string";
+  if (attr.type === "boolean") return "Type: boolean (can be omitted)";
+  if (attr.type === "enum" && attr.values) {
     return `Values: ${attr.values.join(" | ")}`;
   }
-  return "";
+  return `Type: ${attr.type}`;
 }
 function isComponent(word) {
-  return ALL_COMPONENTS.some((c) => c.name === word.toLowerCase());
+  return COMPONENT_MAP.has(word.toLowerCase());
 }
 function isAttribute(word) {
-  return ATTRIBUTES.some((a) => a.name === word);
+  return ATTRIBUTE_MAP.has(word);
 }
 function getComponentNames() {
   return ALL_COMPONENTS.map((c) => c.name);
@@ -605,19 +759,30 @@ function getComponentNames() {
 function getAttributeNames() {
   return ATTRIBUTES.map((a) => a.name);
 }
+function getCategories() {
+  return [...new Set(ALL_COMPONENTS.map((c) => c.category))];
+}
 export {
   ALL_COMPONENTS,
   ATTRIBUTES,
+  ATTRIBUTE_MAP,
   CATEGORY_LABELS,
+  COMMON_ATTRIBUTES,
   COMMON_NUMBERS,
+  COMPONENT_MAP,
+  NODE_TYPE_MAP,
   SPACING_SCALE,
+  VALID_ATTRIBUTE_NAMES,
+  VALID_COMPONENT_NAMES,
   VALUE_KEYWORDS,
   formatAttributeValues,
   getAttribute,
   getAttributeNames,
   getAttributeTypeLabel,
+  getCategories,
   getComponent,
   getComponentAttributes,
+  getComponentByNodeType,
   getComponentNames,
   getComponentsByCategory,
   getValidChildren,