@wireweave/language-data 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -22,16 +22,24 @@ var index_exports = {};
22
22
  __export(index_exports, {
23
23
  ALL_COMPONENTS: () => ALL_COMPONENTS,
24
24
  ATTRIBUTES: () => ATTRIBUTES,
25
+ ATTRIBUTE_MAP: () => ATTRIBUTE_MAP,
25
26
  CATEGORY_LABELS: () => CATEGORY_LABELS,
27
+ COMMON_ATTRIBUTES: () => COMMON_ATTRIBUTES,
26
28
  COMMON_NUMBERS: () => COMMON_NUMBERS,
29
+ COMPONENT_MAP: () => COMPONENT_MAP,
30
+ NODE_TYPE_MAP: () => NODE_TYPE_MAP,
27
31
  SPACING_SCALE: () => SPACING_SCALE,
32
+ VALID_ATTRIBUTE_NAMES: () => VALID_ATTRIBUTE_NAMES,
33
+ VALID_COMPONENT_NAMES: () => VALID_COMPONENT_NAMES,
28
34
  VALUE_KEYWORDS: () => VALUE_KEYWORDS,
29
35
  formatAttributeValues: () => formatAttributeValues,
30
36
  getAttribute: () => getAttribute,
31
37
  getAttributeNames: () => getAttributeNames,
32
38
  getAttributeTypeLabel: () => getAttributeTypeLabel,
39
+ getCategories: () => getCategories,
33
40
  getComponent: () => getComponent,
34
41
  getComponentAttributes: () => getComponentAttributes,
42
+ getComponentByNodeType: () => getComponentByNodeType,
35
43
  getComponentNames: () => getComponentNames,
36
44
  getComponentsByCategory: () => getComponentsByCategory,
37
45
  getValidChildren: () => getValidChildren,
@@ -41,450 +49,601 @@ __export(index_exports, {
41
49
  });
42
50
  module.exports = __toCommonJS(index_exports);
43
51
 
52
+ // src/attributes.ts
53
+ var COMMON_ATTRIBUTES = [
54
+ // Spacing
55
+ "p",
56
+ "px",
57
+ "py",
58
+ "pt",
59
+ "pr",
60
+ "pb",
61
+ "pl",
62
+ "m",
63
+ "mx",
64
+ "my",
65
+ "mt",
66
+ "mr",
67
+ "mb",
68
+ "ml",
69
+ "gap",
70
+ // Size
71
+ "w",
72
+ "h",
73
+ "minW",
74
+ "maxW",
75
+ "minH",
76
+ "maxH",
77
+ // Flex
78
+ "flex",
79
+ "direction",
80
+ "justify",
81
+ "align",
82
+ "wrap",
83
+ // Grid
84
+ "span",
85
+ // Position
86
+ "x",
87
+ "y"
88
+ ];
89
+ var ATTRIBUTES = [
90
+ // ============================================
91
+ // Spacing Attributes
92
+ // ============================================
93
+ { name: "p", type: "number", description: "Padding (all sides)", example: "p=4" },
94
+ { name: "px", type: "number", description: "Horizontal padding", example: "px=4" },
95
+ { name: "py", type: "number", description: "Vertical padding", example: "py=4" },
96
+ { name: "pt", type: "number", description: "Top padding", example: "pt=4" },
97
+ { name: "pr", type: "number", description: "Right padding", example: "pr=4" },
98
+ { name: "pb", type: "number", description: "Bottom padding", example: "pb=4" },
99
+ { name: "pl", type: "number", description: "Left padding", example: "pl=4" },
100
+ { name: "m", type: "number", description: "Margin (all sides)", example: "m=4" },
101
+ { name: "mx", type: "string", description: 'Horizontal margin (number or "auto")', example: "mx=auto" },
102
+ { name: "my", type: "number", description: "Vertical margin", example: "my=4" },
103
+ { name: "mt", type: "number", description: "Top margin", example: "mt=4" },
104
+ { name: "mr", type: "number", description: "Right margin", example: "mr=4" },
105
+ { name: "mb", type: "number", description: "Bottom margin", example: "mb=4" },
106
+ { name: "ml", type: "number", description: "Left margin", example: "ml=4" },
107
+ { name: "gap", type: "number", description: "Gap between children", example: "gap=4" },
108
+ // ============================================
109
+ // Size Attributes
110
+ // ============================================
111
+ { name: "w", type: "string", description: 'Width (number, "full", "auto", "screen", "fit")', example: "w=full" },
112
+ { name: "h", type: "string", description: 'Height (number, "full", "auto", "screen")', example: "h=full" },
113
+ { name: "width", type: "number", description: "Width in pixels (page only)", example: "width=400" },
114
+ { name: "height", type: "number", description: "Height in pixels (page only)", example: "height=300" },
115
+ { name: "minW", type: "number", description: "Minimum width", example: "minW=200" },
116
+ { name: "maxW", type: "number", description: "Maximum width", example: "maxW=600" },
117
+ { name: "minH", type: "number", description: "Minimum height", example: "minH=100" },
118
+ { name: "maxH", type: "number", description: "Maximum height", example: "maxH=400" },
119
+ // ============================================
120
+ // Flex/Grid Layout Attributes
121
+ // ============================================
122
+ { name: "flex", type: "boolean", description: "Enable flexbox", example: "flex" },
123
+ { name: "direction", type: "enum", values: ["row", "column", "row-reverse", "column-reverse"], description: "Flex direction", example: "direction=column" },
124
+ { name: "justify", type: "enum", values: ["start", "center", "end", "between", "around", "evenly"], description: "Main axis alignment", example: "justify=center" },
125
+ { name: "align", type: "enum", values: ["start", "center", "end", "stretch", "baseline"], description: "Cross axis alignment", example: "align=center" },
126
+ { name: "wrap", type: "boolean", description: "Enable flex wrap", example: "wrap" },
127
+ { name: "span", type: "number", description: "Grid column span (1-12)", example: "span=6" },
128
+ { name: "sm", type: "number", description: "Responsive span at 576px+", example: "sm=6" },
129
+ { name: "md", type: "number", description: "Responsive span at 768px+", example: "md=4" },
130
+ { name: "lg", type: "number", description: "Responsive span at 992px+", example: "lg=3" },
131
+ { name: "xl", type: "number", description: "Responsive span at 1200px+", example: "xl=2" },
132
+ { name: "order", type: "number", description: "Flex order", example: "order=1" },
133
+ // ============================================
134
+ // Position Attributes
135
+ // ============================================
136
+ { name: "x", type: "number", description: "Horizontal position", example: "x=100" },
137
+ { name: "y", type: "number", description: "Vertical position", example: "y=50" },
138
+ { 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" },
139
+ // ============================================
140
+ // Visual Attributes
141
+ // ============================================
142
+ { name: "border", type: "boolean", description: "Show border", example: "border" },
143
+ { name: "rounded", type: "boolean", description: "Apply border radius", example: "rounded" },
144
+ { name: "shadow", type: "enum", values: ["none", "sm", "md", "lg", "xl"], description: "Box shadow", example: "shadow=md" },
145
+ { name: "bg", type: "enum", values: ["muted", "primary", "secondary"], description: "Background variant", example: "bg=muted" },
146
+ // ============================================
147
+ // Text Attributes
148
+ // ============================================
149
+ { name: "size", type: "enum", values: ["xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl"], description: "Size preset", example: "size=lg" },
150
+ { name: "weight", type: "enum", values: ["normal", "medium", "semibold", "bold"], description: "Font weight", example: "weight=bold" },
151
+ { name: "level", type: "number", description: "Heading level (1-6)", example: "level=2" },
152
+ { name: "muted", type: "boolean", description: "Muted/dimmed style", example: "muted" },
153
+ { name: "bold", type: "boolean", description: "Bold text", example: "bold" },
154
+ // ============================================
155
+ // Button Variant Attributes
156
+ // ============================================
157
+ { name: "primary", type: "boolean", description: "Primary style", example: "primary" },
158
+ { name: "secondary", type: "boolean", description: "Secondary style", example: "secondary" },
159
+ { name: "outline", type: "boolean", description: "Outline style", example: "outline" },
160
+ { name: "ghost", type: "boolean", description: "Ghost/transparent style", example: "ghost" },
161
+ { name: "danger", type: "boolean", description: "Danger/destructive style", example: "danger" },
162
+ // ============================================
163
+ // Status Variant Attributes
164
+ // ============================================
165
+ { name: "variant", type: "enum", values: ["default", "primary", "secondary", "success", "warning", "danger", "info"], description: "Status variant", example: "variant=success" },
166
+ // ============================================
167
+ // Form Attributes
168
+ // ============================================
169
+ { name: "inputType", type: "enum", values: ["text", "email", "password", "number", "tel", "url", "search", "date"], description: "Input field type", example: "inputType=email" },
170
+ { name: "placeholder", type: "string", description: "Placeholder text", example: 'placeholder="Enter text"' },
171
+ { name: "value", type: "string", description: "Default value", example: 'value="default"' },
172
+ { name: "label", type: "string", description: "Field label", example: 'label="Name"' },
173
+ { name: "name", type: "string", description: "Form field name", example: 'name="field"' },
174
+ { name: "required", type: "boolean", description: "Required field", example: "required" },
175
+ { name: "disabled", type: "boolean", description: "Disabled state", example: "disabled" },
176
+ { name: "readonly", type: "boolean", description: "Read-only state", example: "readonly" },
177
+ { name: "checked", type: "boolean", description: "Checked state", example: "checked" },
178
+ { name: "loading", type: "boolean", description: "Loading state", example: "loading" },
179
+ { name: "rows", type: "number", description: "Textarea rows", example: "rows=4" },
180
+ { name: "min", type: "number", description: "Minimum value", example: "min=0" },
181
+ { name: "max", type: "number", description: "Maximum value", example: "max=100" },
182
+ { name: "step", type: "number", description: "Step increment", example: "step=1" },
183
+ // ============================================
184
+ // Content Attributes
185
+ // ============================================
186
+ { name: "title", type: "string", description: "Title text", example: 'title="Title"' },
187
+ { name: "src", type: "string", description: "Source URL", example: 'src="/image.png"' },
188
+ { name: "alt", type: "string", description: "Alt text", example: 'alt="Image"' },
189
+ { name: "href", type: "string", description: "Link URL", example: 'href="/path"' },
190
+ { name: "icon", type: "string", description: "Icon name", example: 'icon="home"' },
191
+ { name: "external", type: "boolean", description: "External link", example: "external" },
192
+ // ============================================
193
+ // State Attributes
194
+ // ============================================
195
+ { name: "active", type: "number", description: "Active index", example: "active=0" },
196
+ { name: "expanded", type: "boolean", description: "Expanded state", example: "expanded" },
197
+ { name: "centered", type: "boolean", description: "Center content", example: "centered" },
198
+ { name: "vertical", type: "boolean", description: "Vertical orientation", example: "vertical" },
199
+ { name: "scroll", type: "boolean", description: "Enable scrolling", example: "scroll" },
200
+ // ============================================
201
+ // Feedback Attributes
202
+ // ============================================
203
+ { name: "dismissible", type: "boolean", description: "Can be dismissed", example: "dismissible" },
204
+ { name: "indeterminate", type: "boolean", description: "Indeterminate state", example: "indeterminate" },
205
+ { name: "pill", type: "boolean", description: "Pill/rounded style", example: "pill" },
206
+ // ============================================
207
+ // Data Attributes
208
+ // ============================================
209
+ { name: "striped", type: "boolean", description: "Striped rows", example: "striped" },
210
+ { name: "bordered", type: "boolean", description: "Full borders", example: "bordered" },
211
+ { name: "hover", type: "boolean", description: "Hover effect", example: "hover" },
212
+ { name: "ordered", type: "boolean", description: "Ordered list", example: "ordered" },
213
+ { name: "none", type: "boolean", description: "No list markers", example: "none" },
214
+ // ============================================
215
+ // Page/Viewport Attributes
216
+ // ============================================
217
+ { name: "viewport", type: "string", description: 'Viewport size (e.g., "1440x900")', example: 'viewport="1440x900"' },
218
+ { name: "device", type: "string", description: "Device preset", example: 'device="iphone14"' }
219
+ ];
220
+ var ATTRIBUTE_MAP = new Map(
221
+ ATTRIBUTES.map((attr) => [attr.name, attr])
222
+ );
223
+ var VALID_ATTRIBUTE_NAMES = new Set(
224
+ ATTRIBUTES.map((attr) => attr.name)
225
+ );
226
+
44
227
  // src/components.ts
45
228
  var ALL_COMPONENTS = [
46
- // Layout
229
+ // ============================================
230
+ // Layout Components
231
+ // ============================================
47
232
  {
48
233
  name: "page",
49
- description: "Page root container. Starting point for the entire layout.",
234
+ nodeType: "Page",
50
235
  category: "layout",
51
- attributes: ["title", "width", "height", "viewport", "device", "centered", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "gap"],
236
+ attributes: [...COMMON_ATTRIBUTES, "title", "width", "height", "viewport", "device", "centered"],
52
237
  hasChildren: true,
238
+ description: "Root container for a wireframe page",
239
+ example: 'page "Dashboard" centered { ... }',
53
240
  validChildren: ["header", "main", "footer", "sidebar", "section", "nav", "row", "col", "card"],
54
- validParents: [],
55
- example: 'page "Dashboard" centered { ... }'
241
+ validParents: []
56
242
  },
57
243
  {
58
244
  name: "header",
59
- description: "Page header area. Place navigation, logo, etc.",
245
+ nodeType: "Header",
60
246
  category: "layout",
61
- attributes: ["p", "px", "py", "border", "gap", "justify", "align"],
247
+ attributes: [...COMMON_ATTRIBUTES, "border"],
62
248
  hasChildren: true,
63
- validParents: ["page"],
64
- example: "header p=4 border { ... }"
249
+ description: "Page header section",
250
+ example: "header h=56 border { ... }",
251
+ validParents: ["page"]
65
252
  },
66
253
  {
67
254
  name: "main",
68
- description: "Main content area. Place primary content here.",
255
+ nodeType: "Main",
69
256
  category: "layout",
70
- attributes: ["p", "px", "py", "gap"],
257
+ attributes: [...COMMON_ATTRIBUTES, "scroll"],
71
258
  hasChildren: true,
72
- validParents: ["page"],
73
- example: "main p=6 { ... }"
259
+ description: "Main content section",
260
+ example: "main p=6 scroll { ... }",
261
+ validParents: ["page"]
74
262
  },
75
263
  {
76
264
  name: "footer",
77
- description: "Page footer area. Place copyright, links, etc.",
265
+ nodeType: "Footer",
78
266
  category: "layout",
79
- attributes: ["p", "px", "py", "border", "gap"],
267
+ attributes: [...COMMON_ATTRIBUTES, "border"],
80
268
  hasChildren: true,
81
- validParents: ["page"],
82
- example: "footer p=4 border { ... }"
269
+ description: "Page footer section",
270
+ example: "footer h=48 border { ... }",
271
+ validParents: ["page"]
83
272
  },
84
273
  {
85
274
  name: "sidebar",
86
- description: "Sidebar area. Place auxiliary navigation or information.",
275
+ nodeType: "Sidebar",
87
276
  category: "layout",
88
- attributes: ["position", "w", "p", "px", "py", "gap"],
277
+ attributes: [...COMMON_ATTRIBUTES, "position", "border", "bg"],
89
278
  hasChildren: true,
90
- validParents: ["page"],
91
- example: "sidebar w=240 { ... }"
279
+ description: "Side navigation or content area",
280
+ example: "sidebar w=240 border { ... }",
281
+ validParents: ["page"]
92
282
  },
93
283
  {
94
284
  name: "section",
95
- description: "Section area. Logically group content.",
285
+ nodeType: "Section",
96
286
  category: "layout",
97
- attributes: ["title", "expanded", "p", "px", "py", "gap"],
287
+ attributes: [...COMMON_ATTRIBUTES, "title", "expanded"],
98
288
  hasChildren: true,
289
+ description: "Grouped content section",
99
290
  example: 'section "Settings" expanded { ... }'
100
291
  },
101
- // Grid
292
+ // ============================================
293
+ // Grid Components
294
+ // ============================================
102
295
  {
103
296
  name: "row",
104
- description: "Horizontal flex container. Arrange children horizontally.",
297
+ nodeType: "Row",
105
298
  category: "grid",
106
- attributes: ["gap", "justify", "align", "wrap", "direction", "flex", "p", "m", "mt", "mb"],
299
+ attributes: [...COMMON_ATTRIBUTES, "border", "bg"],
107
300
  hasChildren: true,
301
+ description: "Horizontal flex container",
108
302
  example: "row flex gap=4 justify=between { ... }"
109
303
  },
110
304
  {
111
305
  name: "col",
112
- description: "Vertical flex container or grid column.",
306
+ nodeType: "Col",
113
307
  category: "grid",
114
- attributes: ["span", "sm", "md", "lg", "xl", "order", "gap", "justify", "align", "p", "m", "w"],
308
+ attributes: [...COMMON_ATTRIBUTES, "sm", "md", "lg", "xl", "order", "border", "bg", "scroll"],
115
309
  hasChildren: true,
310
+ description: "Vertical flex container or grid column",
116
311
  example: "col span=6 md=4 { ... }"
117
312
  },
118
- // Container
313
+ // ============================================
314
+ // Container Components
315
+ // ============================================
119
316
  {
120
317
  name: "card",
121
- description: "Card component. Group and display content.",
318
+ nodeType: "Card",
122
319
  category: "container",
123
- attributes: ["title", "p", "shadow", "border", "gap"],
320
+ attributes: [...COMMON_ATTRIBUTES, "title", "shadow", "border", "rounded"],
124
321
  hasChildren: true,
322
+ description: "Card container with optional title",
125
323
  example: 'card "Settings" p=4 shadow=md { ... }'
126
324
  },
127
325
  {
128
326
  name: "modal",
129
- description: "Modal dialog. Display content on an overlay.",
327
+ nodeType: "Modal",
130
328
  category: "container",
131
- attributes: ["title", "w", "h", "p"],
329
+ attributes: [...COMMON_ATTRIBUTES, "title"],
132
330
  hasChildren: true,
331
+ description: "Modal dialog overlay",
133
332
  example: 'modal "Confirm" w=400 { ... }'
134
333
  },
135
334
  {
136
335
  name: "drawer",
137
- description: "Drawer panel. Slides in from the edge of the screen.",
336
+ nodeType: "Drawer",
138
337
  category: "container",
139
- attributes: ["title", "position", "p"],
338
+ attributes: [...COMMON_ATTRIBUTES, "title", "position"],
140
339
  hasChildren: true,
340
+ description: "Slide-in drawer panel",
141
341
  example: 'drawer "Menu" position=left { ... }'
142
342
  },
143
343
  {
144
344
  name: "accordion",
145
- description: "Accordion. Collapsible content panel.",
345
+ nodeType: "Accordion",
146
346
  category: "container",
147
- attributes: ["title", "p"],
347
+ attributes: [...COMMON_ATTRIBUTES, "title"],
148
348
  hasChildren: true,
349
+ description: "Collapsible sections container",
149
350
  example: 'accordion { section "FAQ 1" { ... } }'
150
351
  },
151
- // Text
352
+ // ============================================
353
+ // Text Components
354
+ // ============================================
152
355
  {
153
356
  name: "text",
154
- description: "Text element. Display plain text.",
357
+ nodeType: "Text",
155
358
  category: "text",
156
- attributes: ["size", "weight", "align", "muted", "m", "mt", "mb"],
359
+ attributes: [...COMMON_ATTRIBUTES, "size", "weight", "muted", "bold"],
157
360
  hasChildren: false,
361
+ description: "Text content",
158
362
  example: 'text "Hello World" size=lg weight=bold'
159
363
  },
160
364
  {
161
365
  name: "title",
162
- description: "Title element. Display h1-h6 headings.",
366
+ nodeType: "Title",
163
367
  category: "text",
164
- attributes: ["level", "size", "align", "m", "mt", "mb"],
368
+ attributes: [...COMMON_ATTRIBUTES, "level", "size"],
165
369
  hasChildren: false,
370
+ description: "Heading element (h1-h6)",
166
371
  example: 'title "Welcome" level=2'
167
372
  },
168
373
  {
169
374
  name: "link",
170
- description: "Link element. Display clickable hyperlink.",
375
+ nodeType: "Link",
171
376
  category: "text",
172
- attributes: ["href", "external"],
377
+ attributes: [...COMMON_ATTRIBUTES, "href", "external"],
173
378
  hasChildren: false,
379
+ description: "Hyperlink text",
174
380
  example: 'link "Learn more" href="/docs" external'
175
381
  },
176
- // Input
382
+ // ============================================
383
+ // Input Components
384
+ // ============================================
177
385
  {
178
386
  name: "input",
179
- description: "Input field. Accept text, email, password, etc.",
387
+ nodeType: "Input",
180
388
  category: "input",
181
- attributes: ["label", "inputType", "placeholder", "value", "disabled", "required", "readonly", "icon", "m", "mb"],
389
+ attributes: [...COMMON_ATTRIBUTES, "label", "inputType", "placeholder", "value", "disabled", "required", "readonly", "icon", "size", "rounded"],
182
390
  hasChildren: false,
391
+ description: "Text input field",
183
392
  example: 'input "Email" inputType=email placeholder="user@example.com" required'
184
393
  },
185
394
  {
186
395
  name: "textarea",
187
- description: "Multi-line input field. Accept long text.",
396
+ nodeType: "Textarea",
188
397
  category: "input",
189
- attributes: ["label", "placeholder", "value", "rows", "disabled", "required", "m", "mb"],
398
+ attributes: [...COMMON_ATTRIBUTES, "label", "placeholder", "value", "rows", "disabled", "required"],
190
399
  hasChildren: false,
400
+ description: "Multi-line text input",
191
401
  example: 'textarea "Description" rows=4 placeholder="Enter description..."'
192
402
  },
193
403
  {
194
404
  name: "select",
195
- description: "Dropdown select. Choose one from multiple options.",
405
+ nodeType: "Select",
196
406
  category: "input",
197
- attributes: ["label", "placeholder", "value", "disabled", "required", "m", "mb"],
407
+ attributes: [...COMMON_ATTRIBUTES, "label", "placeholder", "value", "disabled", "required"],
198
408
  hasChildren: false,
409
+ description: "Dropdown select",
199
410
  example: 'select "Country" ["USA", "Canada", "UK"] placeholder="Select..."'
200
411
  },
201
412
  {
202
413
  name: "checkbox",
203
- description: "Checkbox. Select true/false value.",
414
+ nodeType: "Checkbox",
204
415
  category: "input",
205
- attributes: ["label", "checked", "disabled", "m", "mb"],
416
+ attributes: [...COMMON_ATTRIBUTES, "label", "checked", "disabled"],
206
417
  hasChildren: false,
418
+ description: "Checkbox input",
207
419
  example: 'checkbox "I agree to terms" checked'
208
420
  },
209
421
  {
210
422
  name: "radio",
211
- description: "Radio button. Select one within a group.",
423
+ nodeType: "Radio",
212
424
  category: "input",
213
- attributes: ["label", "name", "checked", "disabled", "m", "mb"],
425
+ attributes: [...COMMON_ATTRIBUTES, "label", "name", "checked", "disabled"],
214
426
  hasChildren: false,
427
+ description: "Radio button input",
215
428
  example: 'radio "Option A" name="choice" checked'
216
429
  },
217
430
  {
218
431
  name: "switch",
219
- description: "Toggle switch. Switch on/off state.",
432
+ nodeType: "Switch",
220
433
  category: "input",
221
- attributes: ["label", "checked", "disabled", "m", "mb"],
434
+ attributes: [...COMMON_ATTRIBUTES, "label", "checked", "disabled"],
222
435
  hasChildren: false,
436
+ description: "Toggle switch",
223
437
  example: 'switch "Dark mode" checked'
224
438
  },
225
439
  {
226
440
  name: "slider",
227
- description: "Slider. Select a value within a range.",
441
+ nodeType: "Slider",
228
442
  category: "input",
229
- attributes: ["label", "min", "max", "value", "step", "disabled", "m", "mb"],
443
+ attributes: [...COMMON_ATTRIBUTES, "label", "min", "max", "value", "step", "disabled"],
230
444
  hasChildren: false,
445
+ description: "Range slider",
231
446
  example: 'slider "Volume" min=0 max=100 value=50'
232
447
  },
233
- // Button
234
448
  {
235
449
  name: "button",
236
- description: "Button element. Display clickable button.",
450
+ nodeType: "Button",
237
451
  category: "input",
238
- attributes: ["primary", "secondary", "outline", "ghost", "danger", "size", "icon", "disabled", "loading", "w"],
452
+ attributes: [...COMMON_ATTRIBUTES, "primary", "secondary", "outline", "ghost", "danger", "size", "icon", "disabled", "loading"],
239
453
  hasChildren: false,
454
+ description: "Clickable button",
240
455
  example: 'button "Submit" primary icon=send'
241
456
  },
242
- // Display
457
+ // ============================================
458
+ // Display Components
459
+ // ============================================
243
460
  {
244
461
  name: "image",
245
- description: "Image element. Display an image.",
462
+ nodeType: "Image",
246
463
  category: "display",
247
- attributes: ["src", "alt", "w", "h"],
464
+ attributes: [...COMMON_ATTRIBUTES, "src", "alt"],
248
465
  hasChildren: false,
466
+ description: "Image placeholder",
249
467
  example: "image w=200 h=150"
250
468
  },
251
469
  {
252
470
  name: "placeholder",
253
- description: "Placeholder. Image or content placeholder.",
471
+ nodeType: "Placeholder",
254
472
  category: "display",
255
- attributes: ["label", "w", "h"],
256
- hasChildren: false,
257
- example: 'placeholder "Banner Image" w=full h=200'
473
+ attributes: [...COMMON_ATTRIBUTES, "label"],
474
+ hasChildren: true,
475
+ description: "Generic placeholder",
476
+ example: 'placeholder "Banner Image" w=full h=200 { ... }'
258
477
  },
259
478
  {
260
479
  name: "avatar",
261
- description: "Avatar element. Display user profile image.",
480
+ nodeType: "Avatar",
262
481
  category: "display",
263
- attributes: ["name", "src", "size"],
482
+ attributes: [...COMMON_ATTRIBUTES, "name", "src", "size"],
264
483
  hasChildren: false,
484
+ description: "User avatar",
265
485
  example: 'avatar "John Doe" size=lg'
266
486
  },
267
487
  {
268
488
  name: "badge",
269
- description: "Badge element. Display status or count as a small label.",
489
+ nodeType: "Badge",
270
490
  category: "display",
271
- attributes: ["variant", "pill", "icon", "size"],
491
+ attributes: [...COMMON_ATTRIBUTES, "variant", "pill", "icon", "size"],
272
492
  hasChildren: false,
493
+ description: "Status badge",
273
494
  example: 'badge "New" variant=success pill'
274
495
  },
275
496
  {
276
497
  name: "icon",
277
- description: "Icon element. Display a Lucide icon.",
498
+ nodeType: "Icon",
278
499
  category: "display",
279
- attributes: ["name", "size", "muted"],
500
+ attributes: [...COMMON_ATTRIBUTES, "size", "muted"],
280
501
  hasChildren: false,
502
+ description: "Lucide icon",
281
503
  example: 'icon "settings" size=lg'
282
504
  },
283
- // Data
505
+ // ============================================
506
+ // Data Components
507
+ // ============================================
284
508
  {
285
509
  name: "table",
286
- description: "Table component. Display data in tabular format.",
510
+ nodeType: "Table",
287
511
  category: "data",
288
- attributes: ["striped", "bordered", "hover"],
512
+ attributes: [...COMMON_ATTRIBUTES, "striped", "bordered", "hover"],
289
513
  hasChildren: false,
514
+ description: "Data table",
290
515
  example: 'table striped bordered { columns ["Name", "Email"] row ["John", "john@example.com"] }'
291
516
  },
292
517
  {
293
518
  name: "list",
294
- description: "List component. Display items as a list.",
519
+ nodeType: "List",
295
520
  category: "data",
296
- attributes: ["ordered", "none", "gap"],
521
+ attributes: [...COMMON_ATTRIBUTES, "ordered", "none"],
297
522
  hasChildren: false,
523
+ description: "List of items",
298
524
  example: 'list ordered ["First", "Second", "Third"]'
299
525
  },
300
- // Feedback
526
+ // ============================================
527
+ // Feedback Components
528
+ // ============================================
301
529
  {
302
530
  name: "alert",
303
- description: "Alert element. Display a message to the user.",
531
+ nodeType: "Alert",
304
532
  category: "feedback",
305
- attributes: ["variant", "dismissible", "icon"],
533
+ attributes: [...COMMON_ATTRIBUTES, "variant", "dismissible", "icon"],
306
534
  hasChildren: false,
535
+ description: "Alert message",
307
536
  example: 'alert "Changes saved!" variant=success'
308
537
  },
309
538
  {
310
539
  name: "toast",
311
- description: "Toast notification. Display a temporary message.",
540
+ nodeType: "Toast",
312
541
  category: "feedback",
313
- attributes: ["position", "variant"],
542
+ attributes: [...COMMON_ATTRIBUTES, "position", "variant"],
314
543
  hasChildren: false,
544
+ description: "Toast notification",
315
545
  example: 'toast "Item deleted" position=bottom-right variant=danger'
316
546
  },
317
547
  {
318
548
  name: "progress",
319
- description: "Progress bar. Display progress status.",
549
+ nodeType: "Progress",
320
550
  category: "feedback",
321
- attributes: ["value", "max", "label", "indeterminate"],
551
+ attributes: [...COMMON_ATTRIBUTES, "value", "max", "label", "indeterminate"],
322
552
  hasChildren: false,
553
+ description: "Progress bar",
323
554
  example: 'progress value=75 label="Uploading..."'
324
555
  },
325
556
  {
326
557
  name: "spinner",
327
- description: "Loading spinner. Display loading status.",
558
+ nodeType: "Spinner",
328
559
  category: "feedback",
329
- attributes: ["label", "size"],
560
+ attributes: [...COMMON_ATTRIBUTES, "label", "size"],
330
561
  hasChildren: false,
562
+ description: "Loading spinner",
331
563
  example: "spinner size=lg"
332
564
  },
333
- // Overlay
565
+ // ============================================
566
+ // Overlay Components
567
+ // ============================================
334
568
  {
335
569
  name: "tooltip",
336
- description: "Tooltip element. Show additional info on hover.",
570
+ nodeType: "Tooltip",
337
571
  category: "overlay",
338
- attributes: ["position"],
339
- hasChildren: true,
572
+ attributes: [...COMMON_ATTRIBUTES, "position"],
573
+ hasChildren: false,
574
+ description: "Tooltip on hover",
340
575
  example: 'tooltip "More info" position=top { icon "help-circle" }'
341
576
  },
342
577
  {
343
578
  name: "popover",
344
- description: "Popover. Show additional content on click.",
579
+ nodeType: "Popover",
345
580
  category: "overlay",
346
- attributes: ["title"],
581
+ attributes: [...COMMON_ATTRIBUTES, "title"],
347
582
  hasChildren: true,
583
+ description: "Popover panel",
348
584
  example: 'popover "Details" { ... }'
349
585
  },
350
586
  {
351
587
  name: "dropdown",
352
- description: "Dropdown menu. Expand menu on click.",
588
+ nodeType: "Dropdown",
353
589
  category: "overlay",
354
- attributes: [],
590
+ attributes: [...COMMON_ATTRIBUTES],
355
591
  hasChildren: false,
592
+ description: "Dropdown menu",
356
593
  example: 'dropdown { item "Edit" icon=edit item "Delete" icon=trash danger }'
357
594
  },
358
- // Navigation
595
+ // ============================================
596
+ // Navigation Components
597
+ // ============================================
359
598
  {
360
599
  name: "nav",
361
- description: "Navigation area. Place menu items.",
600
+ nodeType: "Nav",
362
601
  category: "navigation",
363
- attributes: ["vertical", "gap"],
602
+ attributes: [...COMMON_ATTRIBUTES, "vertical"],
364
603
  hasChildren: false,
604
+ description: "Navigation menu",
365
605
  example: 'nav [{ label="Home" icon=home active }, { label="Settings" icon=settings }] vertical'
366
606
  },
367
607
  {
368
608
  name: "tabs",
369
- description: "Tabs component. Switch between multiple panels.",
609
+ nodeType: "Tabs",
370
610
  category: "navigation",
371
- attributes: ["active"],
611
+ attributes: [...COMMON_ATTRIBUTES, "active"],
372
612
  hasChildren: true,
613
+ description: "Tab navigation",
373
614
  example: 'tabs { tab "General" active { ... } tab "Advanced" { ... } }'
374
615
  },
375
616
  {
376
617
  name: "breadcrumb",
377
- description: "Breadcrumb. Display current location as a path.",
618
+ nodeType: "Breadcrumb",
378
619
  category: "navigation",
379
- attributes: [],
620
+ attributes: [...COMMON_ATTRIBUTES],
380
621
  hasChildren: false,
622
+ description: "Breadcrumb navigation",
381
623
  example: 'breadcrumb [{ label="Home" href="/" }, { label="Products" }, { label="Details" }]'
382
624
  },
383
- // Divider
625
+ // ============================================
626
+ // Divider Component
627
+ // ============================================
384
628
  {
385
629
  name: "divider",
386
- description: "Divider element. Visually separate content.",
387
- category: "display",
388
- attributes: ["m", "my", "mx"],
630
+ nodeType: "Divider",
631
+ category: "layout",
632
+ attributes: [...COMMON_ATTRIBUTES, "vertical"],
389
633
  hasChildren: false,
634
+ description: "Horizontal separator",
390
635
  example: "divider my=4"
391
636
  }
392
637
  ];
393
-
394
- // src/attributes.ts
395
- var ATTRIBUTES = [
396
- // Spacing
397
- { name: "p", description: "Padding. Set inner spacing.", values: "number", example: "p=4" },
398
- { name: "px", description: "Horizontal padding.", values: "number", example: "px=4" },
399
- { name: "py", description: "Vertical padding.", values: "number", example: "py=4" },
400
- { name: "pt", description: "Top padding.", values: "number", example: "pt=4" },
401
- { name: "pr", description: "Right padding.", values: "number", example: "pr=4" },
402
- { name: "pb", description: "Bottom padding.", values: "number", example: "pb=4" },
403
- { name: "pl", description: "Left padding.", values: "number", example: "pl=4" },
404
- { name: "m", description: "Margin. Set outer spacing.", values: "number", example: "m=4" },
405
- { name: "mx", description: 'Horizontal margin. Can be "auto" for centering.', values: "number", example: "mx=auto" },
406
- { name: "my", description: "Vertical margin.", values: "number", example: "my=4" },
407
- { name: "mt", description: "Top margin.", values: "number", example: "mt=4" },
408
- { name: "mr", description: "Right margin.", values: "number", example: "mr=4" },
409
- { name: "mb", description: "Bottom margin.", values: "number", example: "mb=4" },
410
- { name: "ml", description: "Left margin.", values: "number", example: "ml=4" },
411
- { name: "gap", description: "Gap between child elements.", values: "number", example: "gap=4" },
412
- // Grid Layout
413
- { name: "span", description: "Grid column width (1-12).", values: "number", example: "span=6" },
414
- { name: "sm", description: "Column width at 576px and above.", values: "number", example: "sm=6" },
415
- { name: "md", description: "Column width at 768px and above.", values: "number", example: "md=4" },
416
- { name: "lg", description: "Column width at 992px and above.", values: "number", example: "lg=3" },
417
- { name: "xl", description: "Column width at 1200px and above.", values: "number", example: "xl=2" },
418
- { name: "order", description: "Order within flex container.", values: "number", example: "order=1" },
419
- // Flex Layout
420
- { name: "flex", description: "Enable flexbox layout.", values: "boolean", example: "flex" },
421
- { name: "direction", description: "Flex direction.", values: ["row", "column", "row-reverse", "column-reverse"], example: "direction=column" },
422
- { name: "justify", description: "Main axis alignment.", values: ["start", "center", "end", "between", "around", "evenly"], example: "justify=center" },
423
- { name: "align", description: "Cross axis alignment.", values: ["start", "center", "end", "stretch", "baseline"], example: "align=center" },
424
- { name: "wrap", description: "Allow child elements to wrap.", values: "boolean", example: "wrap" },
425
- // Size
426
- { name: "width", description: "Width in pixels.", values: "number", example: "width=400" },
427
- { name: "height", description: "Height in pixels.", values: "number", example: "height=300" },
428
- { name: "w", description: "Width (full, auto, screen, fit, or number).", values: ["full", "auto", "screen", "fit"], example: "w=full" },
429
- { name: "h", description: "Height (full, auto, screen, or number).", values: ["full", "auto", "screen"], example: "h=full" },
430
- { name: "minW", description: "Minimum width.", values: "number", example: "minW=200" },
431
- { name: "maxW", description: "Maximum width.", values: "number", example: "maxW=600" },
432
- { name: "minH", description: "Minimum height.", values: "number", example: "minH=100" },
433
- { name: "maxH", description: "Maximum height.", values: "number", example: "maxH=400" },
434
- { name: "size", description: "Size preset.", values: ["xs", "sm", "md", "lg", "xl"], example: "size=lg" },
435
- { name: "viewport", description: 'Viewport size (e.g., "1440x900").', values: "string", example: 'viewport="1440x900"' },
436
- { name: "device", description: "Device preset.", values: ["iphone14", "iphone14pro", "desktop", "tablet"], example: 'device="iphone14"' },
437
- // Visual
438
- { name: "border", description: "Show border.", values: "boolean", example: "border" },
439
- { name: "shadow", description: "Box shadow.", values: ["none", "sm", "md", "lg", "xl"], example: "shadow=md" },
440
- { 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" },
441
- // Text
442
- { name: "level", description: "Heading level (1-6).", values: "number", example: "level=2" },
443
- { name: "weight", description: "Font weight.", values: ["normal", "medium", "semibold", "bold"], example: "weight=bold" },
444
- { name: "muted", description: "Muted style.", values: "boolean", example: "muted" },
445
- // Button variants
446
- { name: "primary", description: "Primary emphasis style.", values: "boolean", example: "primary" },
447
- { name: "secondary", description: "Secondary style.", values: "boolean", example: "secondary" },
448
- { name: "outline", description: "Outline style.", values: "boolean", example: "outline" },
449
- { name: "ghost", description: "Ghost/transparent style.", values: "boolean", example: "ghost" },
450
- { name: "danger", description: "Danger/delete style.", values: "boolean", example: "danger" },
451
- // Status variants
452
- { name: "variant", description: "Variant style.", values: ["default", "primary", "secondary", "success", "warning", "danger", "info"], example: "variant=success" },
453
- // Form
454
- { name: "inputType", description: "Input field type.", values: ["text", "email", "password", "number", "tel", "url", "search", "date"], example: "inputType=email" },
455
- { name: "placeholder", description: "Placeholder text.", values: "string", example: 'placeholder="Enter text"' },
456
- { name: "value", description: "Default value.", values: "string", example: 'value="default"' },
457
- { name: "label", description: "Label text.", values: "string", example: 'label="Name"' },
458
- { name: "required", description: "Required field.", values: "boolean", example: "required" },
459
- { name: "disabled", description: "Disabled state.", values: "boolean", example: "disabled" },
460
- { name: "readonly", description: "Read-only.", values: "boolean", example: "readonly" },
461
- { name: "checked", description: "Checked state.", values: "boolean", example: "checked" },
462
- { name: "loading", description: "Loading state.", values: "boolean", example: "loading" },
463
- { name: "name", description: "Form element name attribute.", values: "string", example: 'name="field"' },
464
- { name: "rows", description: "Number of textarea rows.", values: "number", example: "rows=4" },
465
- { name: "min", description: "Minimum value.", values: "number", example: "min=0" },
466
- { name: "max", description: "Maximum value.", values: "number", example: "max=100" },
467
- { name: "step", description: "Step increment.", values: "number", example: "step=1" },
468
- // Other
469
- { name: "title", description: "Title text.", values: "string", example: 'title="Title"' },
470
- { name: "centered", description: "Center alignment.", values: "boolean", example: "centered" },
471
- { name: "vertical", description: "Vertical orientation.", values: "boolean", example: "vertical" },
472
- { name: "expanded", description: "Expanded state.", values: "boolean", example: "expanded" },
473
- { name: "active", description: "Active state/index.", values: "number", example: "active=0" },
474
- { name: "href", description: "Link URL.", values: "string", example: 'href="/path"' },
475
- { name: "external", description: "External link.", values: "boolean", example: "external" },
476
- { name: "src", description: "Image source URL.", values: "string", example: 'src="/image.png"' },
477
- { name: "alt", description: "Alternative text.", values: "string", example: 'alt="Image"' },
478
- { name: "icon", description: "Icon name (Lucide icons).", values: "string", example: 'icon="home"' },
479
- { name: "pill", description: "Rounded pill badge.", values: "boolean", example: "pill" },
480
- { name: "dismissible", description: "Can be dismissed.", values: "boolean", example: "dismissible" },
481
- { name: "indeterminate", description: "Indeterminate state.", values: "boolean", example: "indeterminate" },
482
- { name: "striped", description: "Striped style.", values: "boolean", example: "striped" },
483
- { name: "bordered", description: "Bordered style.", values: "boolean", example: "bordered" },
484
- { name: "hover", description: "Hover effect.", values: "boolean", example: "hover" },
485
- { name: "ordered", description: "Ordered list.", values: "boolean", example: "ordered" },
486
- { name: "none", description: "No list style.", values: "boolean", example: "none" }
487
- ];
638
+ var COMPONENT_MAP = new Map(
639
+ ALL_COMPONENTS.map((comp) => [comp.name, comp])
640
+ );
641
+ var NODE_TYPE_MAP = new Map(
642
+ ALL_COMPONENTS.map((comp) => [comp.nodeType, comp])
643
+ );
644
+ var VALID_COMPONENT_NAMES = new Set(
645
+ ALL_COMPONENTS.map((comp) => comp.name)
646
+ );
488
647
 
489
648
  // src/keywords.ts
490
649
  var CATEGORY_LABELS = {
@@ -590,10 +749,13 @@ var SPACING_SCALE = {
590
749
 
591
750
  // src/utils.ts
592
751
  function getComponent(name) {
593
- return ALL_COMPONENTS.find((c) => c.name === name.toLowerCase());
752
+ return COMPONENT_MAP.get(name.toLowerCase());
753
+ }
754
+ function getComponentByNodeType(nodeType) {
755
+ return NODE_TYPE_MAP.get(nodeType);
594
756
  }
595
757
  function getAttribute(name) {
596
- return ATTRIBUTES.find((a) => a.name === name);
758
+ return ATTRIBUTE_MAP.get(name);
597
759
  }
598
760
  function getValidChildren(componentName) {
599
761
  const component = getComponent(componentName);
@@ -618,29 +780,29 @@ function getComponentsByCategory(category) {
618
780
  return ALL_COMPONENTS.filter((c) => c.category === category);
619
781
  }
620
782
  function getAttributeTypeLabel(attr) {
621
- if (attr.values === "number") return "number";
622
- if (attr.values === "string") return "string";
623
- if (attr.values === "boolean") return "boolean";
624
- if (Array.isArray(attr.values)) {
783
+ if (attr.type === "boolean") return "boolean";
784
+ if (attr.type === "number") return "number";
785
+ if (attr.type === "string" || attr.type === "string[]") return "string";
786
+ if (attr.type === "enum" && attr.values) {
625
787
  const preview = attr.values.slice(0, 3).join(" | ");
626
788
  return attr.values.length > 3 ? `${preview}...` : preview;
627
789
  }
628
- return "";
790
+ return attr.type;
629
791
  }
630
792
  function formatAttributeValues(attr) {
631
- if (attr.values === "number") return "Type: number";
632
- if (attr.values === "string") return "Type: string";
633
- if (attr.values === "boolean") return "Type: boolean (can be omitted)";
634
- if (Array.isArray(attr.values)) {
793
+ if (attr.type === "number") return "Type: number";
794
+ if (attr.type === "string") return "Type: string";
795
+ if (attr.type === "boolean") return "Type: boolean (can be omitted)";
796
+ if (attr.type === "enum" && attr.values) {
635
797
  return `Values: ${attr.values.join(" | ")}`;
636
798
  }
637
- return "";
799
+ return `Type: ${attr.type}`;
638
800
  }
639
801
  function isComponent(word) {
640
- return ALL_COMPONENTS.some((c) => c.name === word.toLowerCase());
802
+ return COMPONENT_MAP.has(word.toLowerCase());
641
803
  }
642
804
  function isAttribute(word) {
643
- return ATTRIBUTES.some((a) => a.name === word);
805
+ return ATTRIBUTE_MAP.has(word);
644
806
  }
645
807
  function getComponentNames() {
646
808
  return ALL_COMPONENTS.map((c) => c.name);
@@ -648,20 +810,31 @@ function getComponentNames() {
648
810
  function getAttributeNames() {
649
811
  return ATTRIBUTES.map((a) => a.name);
650
812
  }
813
+ function getCategories() {
814
+ return [...new Set(ALL_COMPONENTS.map((c) => c.category))];
815
+ }
651
816
  // Annotate the CommonJS export names for ESM import in node:
652
817
  0 && (module.exports = {
653
818
  ALL_COMPONENTS,
654
819
  ATTRIBUTES,
820
+ ATTRIBUTE_MAP,
655
821
  CATEGORY_LABELS,
822
+ COMMON_ATTRIBUTES,
656
823
  COMMON_NUMBERS,
824
+ COMPONENT_MAP,
825
+ NODE_TYPE_MAP,
657
826
  SPACING_SCALE,
827
+ VALID_ATTRIBUTE_NAMES,
828
+ VALID_COMPONENT_NAMES,
658
829
  VALUE_KEYWORDS,
659
830
  formatAttributeValues,
660
831
  getAttribute,
661
832
  getAttributeNames,
662
833
  getAttributeTypeLabel,
834
+ getCategories,
663
835
  getComponent,
664
836
  getComponentAttributes,
837
+ getComponentByNodeType,
665
838
  getComponentNames,
666
839
  getComponentsByCategory,
667
840
  getValidChildren,