@wire-dsl/language-support 0.0.3 → 0.2.0

package/dist/components.js

@@ -1,267 +1,440 @@
 /**
  * Wire DSL Component Metadata
- * Used for autocompletion and hover documentation
+ * Used for autocompletion, validation, and code intelligence.
  *
- * SYNC SOURCES:
- * 1. Built-in components: Check packages/engine/src/renderer/index.ts renderComponent() method
- *    for latest component implementations. Update this file when new components are added.
- * 2. User-defined components: Syntax is `define Component "Name" { ... }`
- *    These are parsed and resolved before IR generation.
- *
- * Total components: 32 built-in + unlimited user-defined
- * Last synced: February 2, 2026
+ * Last synced: February 16, 2026
  */
+// Reusable Enum Definitions
+const sizeEnum = { name: 'size', type: 'enum', options: ['sm', 'md', 'lg'] };
+const spacingEnum = {
+    name: 'spacing',
+    type: 'enum',
+    options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+};
+const variantEnum = {
+    name: 'variant',
+    type: 'enum',
+    options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info'],
+};
+const variantWithDefaultEnum = {
+    name: 'variant',
+    type: 'enum',
+    options: ['default', 'primary', 'secondary', 'success', 'warning', 'danger', 'info'],
+};
+const headingLevelEnum = {
+    name: 'level',
+    type: 'enum',
+    options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+};
+const headingSpacingEnum = {
+    name: 'spacing',
+    type: 'enum',
+    options: spacingEnum.options,
+};
+const imagePlaceholderEnum = {
+    name: 'placeholder',
+    type: 'enum',
+    options: ['landscape', 'portrait', 'square', 'icon', 'avatar'],
+};
 export const COMPONENTS = {
-    // Text Components
     Heading: {
         name: 'Heading',
-        description: 'Large heading/title text',
-        properties: ['text'],
-        example: 'component Heading text: "Users"',
+        description: 'Large heading text with level-based typography.',
+        category: 'Text',
+        properties: {
+            text: { name: 'text', type: 'string' },
+            level: headingLevelEnum,
+            spacing: headingSpacingEnum,
+        },
+        example: 'component Heading text: "Users" level: h2 spacing: sm',
     },
     Text: {
         name: 'Text',
-        description: 'Regular paragraph text',
-        properties: ['content'],
-        example: 'component Text content: "Lorem ipsum dolor sit amet..."',
+        description: 'Body text content.',
+        category: 'Text',
+        properties: {
+            content: { name: 'content', type: 'string' },
+        },
+        example: 'component Text content: "Lorem ipsum dolor sit amet"',
     },
     Label: {
         name: 'Label',
-        description: 'Small label text',
-        properties: ['text'],
+        description: 'Small label text.',
+        category: 'Text',
+        properties: {
+            text: { name: 'text', type: 'string' },
+        },
         example: 'component Label text: "Field label"',
     },
-    Code: {
-        name: 'Code',
-        description: 'Code or monospace text',
-        properties: ['content'],
-        example: 'component Code content: "const x = 42;"',
+    Button: {
+        name: 'Button',
+        description: 'Clickable action button.',
+        category: 'Action',
+        properties: {
+            text: { name: 'text', type: 'string' },
+            variant: variantWithDefaultEnum,
+        },
+        example: 'component Button text: "Save" variant: primary',
+    },
+    Link: {
+        name: 'Link',
+        description: 'Underlined text action without button background.',
+        category: 'Action',
+        properties: {
+            text: { name: 'text', type: 'string' },
+            variant: variantEnum,
+        },
+        example: 'component Link text: "Learn more" variant: info',
     },
-    // Input Components
     Input: {
         name: 'Input',
-        description: 'Text input field',
-        properties: ['label', 'placeholder'],
-        example: 'component Input label: "Username" placeholder: "Enter name..."',
+        description: 'Single-line input field.',
+        category: 'Input',
+        properties: {
+            label: { name: 'label', type: 'string' },
+            placeholder: { name: 'placeholder', type: 'string' },
+        },
+        example: 'component Input label: "Email" placeholder: "you@example.com"',
     },
     Textarea: {
         name: 'Textarea',
-        description: 'Multi-line text input',
-        properties: ['label', 'placeholder', 'rows'],
-        example: 'component Textarea label: "Description" rows: 6',
+        description: 'Multi-line input field.',
+        category: 'Input',
+        properties: {
+            label: { name: 'label', type: 'string' },
+            placeholder: { name: 'placeholder', type: 'string' },
+            rows: { name: 'rows', type: 'number' },
+        },
+        example: 'component Textarea label: "Notes" rows: 4',
     },
     Select: {
         name: 'Select',
-        description: 'Dropdown selection list',
-        properties: ['label', 'options', 'placeholder'],
-        example: 'component Select label: "Role" options: ["Admin", "User", "Guest"]',
+        description: 'Select-style input control.',
+        category: 'Input',
+        properties: {
+            label: { name: 'label', type: 'string' },
+            placeholder: { name: 'placeholder', type: 'string' },
+            items: { name: 'items', type: 'string' },
+        },
+        example: 'component Select label: "Role" items: "Admin,User,Guest"',
     },
     Checkbox: {
         name: 'Checkbox',
-        description: 'Single checkbox input',
-        properties: ['label'],
-        example: 'component Checkbox label: "Remember me"',
+        description: 'Checkbox control.',
+        category: 'Input',
+        properties: {
+            label: { name: 'label', type: 'string' },
+            checked: { name: 'checked', type: 'boolean' },
+        },
+        example: 'component Checkbox label: "I agree" checked: true',
     },
     Radio: {
         name: 'Radio',
-        description: 'Single radio button',
-        properties: ['label'],
-        example: 'component Radio label: "Option"',
+        description: 'Radio control.',
+        category: 'Input',
+        properties: {
+            label: { name: 'label', type: 'string' },
+            checked: { name: 'checked', type: 'boolean' },
+        },
+        example: 'component Radio label: "Option A" checked: true',
     },
     Toggle: {
         name: 'Toggle',
-        description: 'Toggle switch input',
-        properties: ['label'],
-        example: 'component Toggle label: "Enable feature"',
-    },
-    // Button Components
-    Button: {
-        name: 'Button',
-        description: 'Clickable button element',
-        properties: ['text', 'variant'],
-        propertyValues: {
-            variant: ['primary', 'secondary', 'ghost'],
+        description: 'Toggle switch control.',
+        category: 'Input',
+        properties: {
+            label: { name: 'label', type: 'string' },
+            enabled: { name: 'enabled', type: 'boolean' },
         },
-        example: 'component Button text: "Save" variant: primary',
+        example: 'component Toggle label: "Dark mode" enabled: true',
     },
-    IconButton: {
-        name: 'IconButton',
-        description: 'Icon-only button element',
-        properties: ['icon', 'variant', 'size'],
-        propertyValues: {
-            variant: ['primary', 'secondary', 'ghost'],
-            size: ['xs', 'sm', 'md', 'lg', 'xl'],
+    Topbar: {
+        name: 'Topbar',
+        description: 'Top navigation/header bar.',
+        category: 'Navigation',
+        properties: {
+            title: { name: 'title', type: 'string' },
+            subtitle: { name: 'subtitle', type: 'string' },
+            icon: { name: 'icon', type: 'string' },
+            avatar: { name: 'avatar', type: 'boolean' },
+            actions: { name: 'actions', type: 'string' },
+            user: { name: 'user', type: 'string' },
         },
-        example: 'component IconButton icon: "plus" variant: "primary" size: "md"',
+        example: 'component Topbar title: "Dashboard" subtitle: "Overview" icon: "menu" user: "john_doe" avatar: true',
     },
-    // Navigation Components
     SidebarMenu: {
         name: 'SidebarMenu',
-        description: 'Vertical navigation menu',
-        properties: ['items'],
-        example: 'component SidebarMenu items: ["Users", "Roles", "Settings"]',
+        description: 'Vertical menu list.',
+        category: 'Navigation',
+        properties: {
+            items: { name: 'items', type: 'string' },
+            icons: { name: 'icons', type: 'string' },
+            active: { name: 'active', type: 'number' },
+        },
+        example: 'component SidebarMenu items: "Home,Users,Settings" active: 0',
     },
-    Topbar: {
-        name: 'Topbar',
-        description: 'Top navigation bar',
-        properties: ['title'],
-        example: 'component Topbar title: "Dashboard"',
+    Sidebar: {
+        name: 'Sidebar',
+        description: 'Sidebar panel with title and items.',
+        category: 'Navigation',
+        properties: {
+            title: { name: 'title', type: 'string' },
+            items: { name: 'items', type: 'string' },
+            active: { name: 'active', type: 'string' },
+            itemsMock: { name: 'itemsMock', type: 'number' },
+        },
+        example: 'component Sidebar title: "Menu" items: "Home,Reports,Settings"',
     },
     Breadcrumbs: {
         name: 'Breadcrumbs',
-        description: 'Breadcrumb navigation trail',
-        properties: ['items'],
-        example: 'component Breadcrumbs items: ["Home", "Users", "Detail"]',
+        description: 'Navigation path component.',
+        category: 'Navigation',
+        properties: {
+            items: { name: 'items', type: 'string' },
+            separator: { name: 'separator', type: 'string' },
+        },
+        example: 'component Breadcrumbs items: "Home,Users,Detail" separator: ">"',
     },
     Tabs: {
         name: 'Tabs',
-        description: 'Tabbed content switcher',
-        properties: ['items', 'activeIndex'],
-        example: 'component Tabs items: ["Profile", "Settings", "Logs"]',
+        description: 'Tabbed navigation component.',
+        category: 'Navigation',
+        properties: {
+            items: { name: 'items', type: 'string' },
+            active: { name: 'active', type: 'number' },
+        },
+        example: 'component Tabs items: "Overview,Details,Activity" active: 1',
     },
-    // Data Components
     Table: {
         name: 'Table',
-        description: 'Data table with rows and columns',
-        properties: ['columns', 'rowsMock', 'rowHeight'],
-        example: 'component Table columns: ["Name", "Email", "Status", "Role"] rowsMock: 8',
+        description: 'Tabular data placeholder.',
+        category: 'Data',
+        properties: {
+            title: { name: 'title', type: 'string' },
+            columns: { name: 'columns', type: 'string' },
+            rows: { name: 'rows', type: 'number' },
+            rowsMock: { name: 'rowsMock', type: 'number' },
+            mock: { name: 'mock', type: 'string' },
+            random: { name: 'random', type: 'boolean' },
+            pagination: { name: 'pagination', type: 'boolean' },
+            pages: { name: 'pages', type: 'number' },
+            paginationAlign: { name: 'paginationAlign', type: 'enum', options: ['left', 'center', 'right'] },
+        },
+        example: 'component Table columns: "User,City,Amount" rows: 8 mock: "name,city,amount"',
     },
     List: {
         name: 'List',
-        description: 'Vertical list of items',
-        properties: ['items'],
-        example: 'component List items: ["Item 1", "Item 2", "Item 3"]',
+        description: 'Vertical list component.',
+        category: 'Data',
+        properties: {
+            title: { name: 'title', type: 'string' },
+            items: { name: 'items', type: 'string' },
+            itemsMock: { name: 'itemsMock', type: 'number' },
+            mock: { name: 'mock', type: 'string' },
+            random: { name: 'random', type: 'boolean' },
+        },
+        example: 'component List title: "Cities" itemsMock: 6 mock: "city"',
     },
-    // Container Components
-    Badge: {
-        name: 'Badge',
-        description: 'Small badge/tag element',
-        properties: ['text', 'variant'],
-        propertyValues: {
-            variant: ['primary', 'secondary', 'success', 'warning', 'error', 'info'],
+    StatCard: {
+        name: 'StatCard',
+        description: 'Metric card with optional caption and icon.',
+        category: 'Data',
+        properties: {
+            title: { name: 'title', type: 'string' },
+            value: { name: 'value', type: 'string' },
+            caption: { name: 'caption', type: 'string' },
+            icon: { name: 'icon', type: 'string' },
         },
-        example: 'component Badge text: "New" variant: primary',
+        example: 'component StatCard title: "Users" value: "1,234" icon: "users"',
+    },
+    Card: {
+        name: 'Card',
+        description: 'Generic content card placeholder.',
+        category: 'Layout',
+        properties: {
+            title: { name: 'title', type: 'string' },
+            text: { name: 'text', type: 'string' },
+        },
+        example: 'component Card title: "Summary" text: "Card content"',
+    },
+    Chart: {
+        name: 'Chart',
+        description: 'Chart placeholder with deterministic trend data.',
+        category: 'Data',
+        properties: {
+            type: { name: 'type', type: 'enum', options: ['bar', 'line', 'pie', 'area'] },
+            height: { name: 'height', type: 'number' },
+        },
+        example: 'component Chart type: "line" height: 240',
     },
-    Alert: {
-        name: 'Alert',
-        description: 'Alert message box',
-        properties: ['text', 'variant'],
-        propertyValues: {
-            variant: ['primary', 'secondary', 'success', 'warning', 'error', 'info'],
+    ChartPlaceholder: {
+        name: 'ChartPlaceholder',
+        description: 'Backward-compatible alias of Chart.',
+        category: 'Data',
+        properties: {
+            type: { name: 'type', type: 'enum', options: ['bar', 'line', 'pie', 'area'] },
+            height: { name: 'height', type: 'number' },
         },
-        example: 'component Alert text: "Warning message" variant: warning',
+        example: 'component ChartPlaceholder type: "bar" height: 240',
+    },
+    Code: {
+        name: 'Code',
+        description: 'Code snippet display.',
+        category: 'Text',
+        properties: {
+            code: { name: 'code', type: 'string' },
+        },
+        example: 'component Code code: "const x = 42;"',
+    },
+    Image: {
+        name: 'Image',
+        description: 'Image placeholder block.',
+        category: 'Media',
+        properties: {
+            placeholder: imagePlaceholderEnum,
+            icon: { name: 'icon', type: 'string' },
+            height: { name: 'height', type: 'number' },
+        },
+        example: 'component Image placeholder: "icon" icon: "search" height: 220',
     },
-    // Visual Components
     Icon: {
         name: 'Icon',
-        description: 'Icon element (visual symbol)',
-        properties: ['type', 'size'],
-        propertyValues: {
-            size: ['xs', 'sm', 'md', 'lg', 'xl'],
+        description: 'Standalone icon component.',
+        category: 'Media',
+        properties: {
+            type: { name: 'type', type: 'string' },
+            size: sizeEnum,
+        },
+        example: 'component Icon type: "home" size: md',
+    },
+    IconButton: {
+        name: 'IconButton',
+        description: 'Button that renders an icon.',
+        category: 'Action',
+        properties: {
+            icon: { name: 'icon', type: 'string' },
+            size: sizeEnum,
+            variant: variantWithDefaultEnum,
+            disabled: { name: 'disabled', type: 'boolean' },
         },
-        example: 'component Icon type: "home" size: "md"',
+        example: 'component IconButton icon: "search" variant: default size: md',
     },
     Divider: {
         name: 'Divider',
-        description: 'Horizontal divider line',
-        properties: [],
+        description: 'Horizontal separator line.',
+        category: 'Layout',
+        properties: {},
         example: 'component Divider',
     },
-    Image: {
-        name: 'Image',
-        description: 'Image placeholder or actual image',
-        properties: ['src', 'alt', 'height', 'placeholder'],
-        propertyValues: {
-            placeholder: ['square', 'landscape', 'avatar', 'icon'],
+    Separate: {
+        name: 'Separate',
+        description: 'Invisible spacing separator.',
+        category: 'Layout',
+        properties: {
+            size: { name: 'size', type: 'enum', options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'] },
         },
-        example: 'component Image placeholder: "landscape" height: 300',
+        example: 'component Separate size: md',
     },
-    ChartPlaceholder: {
-        name: 'ChartPlaceholder',
-        description: 'Chart visualization placeholder',
-        properties: ['type', 'height'],
-        propertyValues: {
-            type: ['bar', 'line', 'pie'],
+    Badge: {
+        name: 'Badge',
+        description: 'Small status label.',
+        category: 'Feedback',
+        properties: {
+            text: { name: 'text', type: 'string' },
+            variant: variantWithDefaultEnum,
         },
-        example: 'component ChartPlaceholder type: "bar" height: 200',
+        example: 'component Badge text: "Active" variant: success',
     },
-    Sidebar: {
-        name: 'Sidebar',
-        description: 'Sidebar navigation panel',
-        properties: ['title', 'items'],
-        example: 'component Sidebar title: "Navigation" items: ["Dashboard", "Users"]',
+    Alert: {
+        name: 'Alert',
+        description: 'Alert/message box.',
+        category: 'Feedback',
+        properties: {
+            variant: variantEnum,
+            title: { name: 'title', type: 'string' },
+            text: { name: 'text', type: 'string' },
+        },
+        example: 'component Alert variant: warning title: "Warning" text: "Review this action"',
     },
-    // Feedback Components
     Modal: {
         name: 'Modal',
-        description: 'Modal dialog window',
-        properties: ['title', 'content'],
-        example: 'component Modal title: "Confirm?" content: "Are you sure?"',
-    },
-    StatCard: {
-        name: 'StatCard',
-        description: 'Statistic card showing metric value',
-        properties: ['title', 'value'],
-        example: 'component StatCard title: "Total Users" value: "1,234"',
-    },
-    Spinner: {
-        name: 'Spinner',
-        description: 'Loading spinner/indicator',
-        properties: [],
-        example: 'component Spinner',
+        description: 'Modal overlay container.',
+        category: 'Feedback',
+        properties: {
+            title: { name: 'title', type: 'string' },
+            visible: { name: 'visible', type: 'boolean', defaultValue: true },
+        },
+        example: 'component Modal title: "Confirm action" visible: false',
     },
 };
 export const LAYOUTS = {
     stack: {
         name: 'stack',
-        description: 'Stack layout - arranges items in a row or column',
-        properties: ['direction', 'gap', 'padding', 'align', 'justify'],
-        example: 'layout stack(direction: vertical, gap: md, padding: lg) { ... }',
-        requiredProperties: [],
+        description: 'Linear layout container.',
+        properties: {
+            direction: { name: 'direction', type: 'enum', options: ['horizontal', 'vertical'] },
+            align: { name: 'align', type: 'enum', options: ['justify', 'left', 'center', 'right'] },
+            gap: { name: 'gap', type: 'enum', options: spacingEnum.options },
+            padding: { name: 'padding', type: 'enum', options: spacingEnum.options },
+        },
+        example: 'layout stack(direction: vertical, gap: md, padding: md) { ... }',
     },
     grid: {
         name: 'grid',
-        description: 'Grid layout - 12-column grid system',
-        properties: ['columns', 'gap', 'align', 'padding'],
-        example: 'layout grid(columns: 12, gap: md) { cell span: 6 { ... } }',
-        requiredProperties: ['columns'],
+        description: 'Grid layout container.',
+        properties: {
+            columns: { name: 'columns', type: 'number' },
+            gap: { name: 'gap', type: 'enum', options: spacingEnum.options },
+            align: { name: 'align', type: 'enum', options: ['justify', 'left', 'center', 'right'] },
+            padding: { name: 'padding', type: 'enum', options: spacingEnum.options },
+        },
+        example: 'layout grid(columns: 12, gap: md) { ... }',
     },
     split: {
         name: 'split',
-        description: 'Split layout - sidebar + main content',
-        properties: ['sidebar', 'gap', 'padding'],
+        description: 'Two-column split layout.',
+        properties: {
+            sidebar: { name: 'sidebar', type: 'number' },
+            gap: { name: 'gap', type: 'enum', options: spacingEnum.options },
+            padding: { name: 'padding', type: 'enum', options: spacingEnum.options },
+        },
         example: 'layout split(sidebar: 260, gap: md) { ... }',
-        requiredProperties: ['sidebar'],
     },
     panel: {
         name: 'panel',
-        description: 'Panel layout - container with border and padding',
-        properties: ['padding', 'background', 'radius', 'border'],
-        example: 'layout panel(padding: md, background: white) { ... }',
-        requiredProperties: [],
+        description: 'Panel container with border/background support.',
+        properties: {
+            padding: { name: 'padding', type: 'enum', options: spacingEnum.options },
+            gap: { name: 'gap', type: 'enum', options: spacingEnum.options },
+            background: { name: 'background', type: 'string' },
+        },
+        example: 'layout panel(padding: md) { ... }',
     },
     card: {
         name: 'card',
-        description: 'Card layout - flexible vertical container',
-        properties: ['padding', 'gap', 'radius', 'border', 'background'],
-        example: 'layout card(padding: md, gap: md, radius: md) { ... }',
-        requiredProperties: [],
+        description: 'Card container with spacing/radius options.',
+        properties: {
+            padding: { name: 'padding', type: 'enum', options: spacingEnum.options },
+            gap: { name: 'gap', type: 'enum', options: spacingEnum.options },
+            radius: { name: 'radius', type: 'enum', options: ['none', 'sm', 'md', 'lg'] },
+            border: { name: 'border', type: 'boolean' },
+            background: { name: 'background', type: 'string' },
+        },
+        example: 'layout card(padding: md, gap: md, radius: md, border: true) { ... }',
     },
 };
-// Property values for specific properties (layout-related)
 export const PROPERTY_VALUES = {
-    direction: ['vertical', 'horizontal'],
-    gap: ['xs', 'sm', 'md', 'lg', 'xl'],
-    padding: ['xs', 'sm', 'md', 'lg', 'xl'],
-    align: ['start', 'center', 'end'],
-    justify: ['start', 'center', 'end', 'space-between', 'space-around'],
-    radius: ['xs', 'sm', 'md', 'lg', 'xl'],
-    density: ['compact', 'normal', 'comfortable'],
-    spacing: ['xs', 'sm', 'md', 'lg', 'xl'],
+    size: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+    variant: variantWithDefaultEnum.options,
+    align: ['justify', 'left', 'center', 'right'],
+    padding: spacingEnum.options,
+    gap: spacingEnum.options,
+    direction: ['horizontal', 'vertical'],
+    level: headingLevelEnum.options,
+    spacing: spacingEnum.options,
 };
-// Keywords
 export const KEYWORDS = {
-    topLevel: ['project', 'theme', 'colors', 'mocks', 'define'],
+    topLevel: ['project', 'style', 'colors', 'mocks', 'define'],
     screen: ['screen'],
     layout: ['layout'],
     component: ['component'],