@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/README.md +107 -34
- package/dist/codemirror/index.cjs +1223 -0
- package/dist/codemirror/index.cjs.map +1 -0
- package/dist/codemirror/index.d.cts +130 -0
- package/dist/codemirror/index.d.ts +130 -0
- package/dist/codemirror/index.js +1191 -0
- package/dist/codemirror/index.js.map +1 -0
- package/dist/index.cjs +390 -217
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +82 -7
- package/dist/index.d.ts +82 -7
- package/dist/index.js +382 -217
- package/dist/index.js.map +1 -1
- package/dist/monaco/index.cjs +1270 -0
- package/dist/monaco/index.cjs.map +1 -0
- package/dist/monaco/index.d.cts +143 -0
- package/dist/monaco/index.d.ts +143 -0
- package/dist/monaco/index.js +1233 -0
- package/dist/monaco/index.js.map +1 -0
- package/package.json +11 -1
|
@@ -0,0 +1,1223 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/codemirror/index.ts
|
|
21
|
+
var codemirror_exports = {};
|
|
22
|
+
__export(codemirror_exports, {
|
|
23
|
+
createCompletionSource: () => createCompletionSource,
|
|
24
|
+
createHoverTooltipSource: () => createHoverTooltipSource,
|
|
25
|
+
createLinter: () => createLinter,
|
|
26
|
+
createTokenizer: () => createTokenizer,
|
|
27
|
+
getLanguageConfig: () => getLanguageConfig,
|
|
28
|
+
validateCode: () => validateCode
|
|
29
|
+
});
|
|
30
|
+
module.exports = __toCommonJS(codemirror_exports);
|
|
31
|
+
|
|
32
|
+
// src/attributes.ts
|
|
33
|
+
var COMMON_ATTRIBUTES = [
|
|
34
|
+
// Spacing
|
|
35
|
+
"p",
|
|
36
|
+
"px",
|
|
37
|
+
"py",
|
|
38
|
+
"pt",
|
|
39
|
+
"pr",
|
|
40
|
+
"pb",
|
|
41
|
+
"pl",
|
|
42
|
+
"m",
|
|
43
|
+
"mx",
|
|
44
|
+
"my",
|
|
45
|
+
"mt",
|
|
46
|
+
"mr",
|
|
47
|
+
"mb",
|
|
48
|
+
"ml",
|
|
49
|
+
"gap",
|
|
50
|
+
// Size
|
|
51
|
+
"w",
|
|
52
|
+
"h",
|
|
53
|
+
"minW",
|
|
54
|
+
"maxW",
|
|
55
|
+
"minH",
|
|
56
|
+
"maxH",
|
|
57
|
+
// Flex
|
|
58
|
+
"flex",
|
|
59
|
+
"direction",
|
|
60
|
+
"justify",
|
|
61
|
+
"align",
|
|
62
|
+
"wrap",
|
|
63
|
+
// Grid
|
|
64
|
+
"span",
|
|
65
|
+
// Position
|
|
66
|
+
"x",
|
|
67
|
+
"y"
|
|
68
|
+
];
|
|
69
|
+
var ATTRIBUTES = [
|
|
70
|
+
// ============================================
|
|
71
|
+
// Spacing Attributes
|
|
72
|
+
// ============================================
|
|
73
|
+
{ name: "p", type: "number", description: "Padding (all sides)", example: "p=4" },
|
|
74
|
+
{ name: "px", type: "number", description: "Horizontal padding", example: "px=4" },
|
|
75
|
+
{ name: "py", type: "number", description: "Vertical padding", example: "py=4" },
|
|
76
|
+
{ name: "pt", type: "number", description: "Top padding", example: "pt=4" },
|
|
77
|
+
{ name: "pr", type: "number", description: "Right padding", example: "pr=4" },
|
|
78
|
+
{ name: "pb", type: "number", description: "Bottom padding", example: "pb=4" },
|
|
79
|
+
{ name: "pl", type: "number", description: "Left padding", example: "pl=4" },
|
|
80
|
+
{ name: "m", type: "number", description: "Margin (all sides)", example: "m=4" },
|
|
81
|
+
{ name: "mx", type: "string", description: 'Horizontal margin (number or "auto")', example: "mx=auto" },
|
|
82
|
+
{ name: "my", type: "number", description: "Vertical margin", example: "my=4" },
|
|
83
|
+
{ name: "mt", type: "number", description: "Top margin", example: "mt=4" },
|
|
84
|
+
{ name: "mr", type: "number", description: "Right margin", example: "mr=4" },
|
|
85
|
+
{ name: "mb", type: "number", description: "Bottom margin", example: "mb=4" },
|
|
86
|
+
{ name: "ml", type: "number", description: "Left margin", example: "ml=4" },
|
|
87
|
+
{ name: "gap", type: "number", description: "Gap between children", example: "gap=4" },
|
|
88
|
+
// ============================================
|
|
89
|
+
// Size Attributes
|
|
90
|
+
// ============================================
|
|
91
|
+
{ name: "w", type: "string", description: 'Width (number, "full", "auto", "screen", "fit")', example: "w=full" },
|
|
92
|
+
{ name: "h", type: "string", description: 'Height (number, "full", "auto", "screen")', example: "h=full" },
|
|
93
|
+
{ name: "width", type: "number", description: "Width in pixels (page only)", example: "width=400" },
|
|
94
|
+
{ name: "height", type: "number", description: "Height in pixels (page only)", example: "height=300" },
|
|
95
|
+
{ name: "minW", type: "number", description: "Minimum width", example: "minW=200" },
|
|
96
|
+
{ name: "maxW", type: "number", description: "Maximum width", example: "maxW=600" },
|
|
97
|
+
{ name: "minH", type: "number", description: "Minimum height", example: "minH=100" },
|
|
98
|
+
{ name: "maxH", type: "number", description: "Maximum height", example: "maxH=400" },
|
|
99
|
+
// ============================================
|
|
100
|
+
// Flex/Grid Layout Attributes
|
|
101
|
+
// ============================================
|
|
102
|
+
{ name: "flex", type: "boolean", description: "Enable flexbox", example: "flex" },
|
|
103
|
+
{ name: "direction", type: "enum", values: ["row", "column", "row-reverse", "column-reverse"], description: "Flex direction", example: "direction=column" },
|
|
104
|
+
{ name: "justify", type: "enum", values: ["start", "center", "end", "between", "around", "evenly"], description: "Main axis alignment", example: "justify=center" },
|
|
105
|
+
{ name: "align", type: "enum", values: ["start", "center", "end", "stretch", "baseline"], description: "Cross axis alignment", example: "align=center" },
|
|
106
|
+
{ name: "wrap", type: "boolean", description: "Enable flex wrap", example: "wrap" },
|
|
107
|
+
{ name: "span", type: "number", description: "Grid column span (1-12)", example: "span=6" },
|
|
108
|
+
{ name: "sm", type: "number", description: "Responsive span at 576px+", example: "sm=6" },
|
|
109
|
+
{ name: "md", type: "number", description: "Responsive span at 768px+", example: "md=4" },
|
|
110
|
+
{ name: "lg", type: "number", description: "Responsive span at 992px+", example: "lg=3" },
|
|
111
|
+
{ name: "xl", type: "number", description: "Responsive span at 1200px+", example: "xl=2" },
|
|
112
|
+
{ name: "order", type: "number", description: "Flex order", example: "order=1" },
|
|
113
|
+
// ============================================
|
|
114
|
+
// Position Attributes
|
|
115
|
+
// ============================================
|
|
116
|
+
{ name: "x", type: "number", description: "Horizontal position", example: "x=100" },
|
|
117
|
+
{ name: "y", type: "number", description: "Vertical position", example: "y=50" },
|
|
118
|
+
{ 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" },
|
|
119
|
+
// ============================================
|
|
120
|
+
// Visual Attributes
|
|
121
|
+
// ============================================
|
|
122
|
+
{ name: "border", type: "boolean", description: "Show border", example: "border" },
|
|
123
|
+
{ name: "rounded", type: "boolean", description: "Apply border radius", example: "rounded" },
|
|
124
|
+
{ name: "shadow", type: "enum", values: ["none", "sm", "md", "lg", "xl"], description: "Box shadow", example: "shadow=md" },
|
|
125
|
+
{ name: "bg", type: "enum", values: ["muted", "primary", "secondary"], description: "Background variant", example: "bg=muted" },
|
|
126
|
+
// ============================================
|
|
127
|
+
// Text Attributes
|
|
128
|
+
// ============================================
|
|
129
|
+
{ name: "size", type: "enum", values: ["xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl"], description: "Size preset", example: "size=lg" },
|
|
130
|
+
{ name: "weight", type: "enum", values: ["normal", "medium", "semibold", "bold"], description: "Font weight", example: "weight=bold" },
|
|
131
|
+
{ name: "level", type: "number", description: "Heading level (1-6)", example: "level=2" },
|
|
132
|
+
{ name: "muted", type: "boolean", description: "Muted/dimmed style", example: "muted" },
|
|
133
|
+
{ name: "bold", type: "boolean", description: "Bold text", example: "bold" },
|
|
134
|
+
// ============================================
|
|
135
|
+
// Button Variant Attributes
|
|
136
|
+
// ============================================
|
|
137
|
+
{ name: "primary", type: "boolean", description: "Primary style", example: "primary" },
|
|
138
|
+
{ name: "secondary", type: "boolean", description: "Secondary style", example: "secondary" },
|
|
139
|
+
{ name: "outline", type: "boolean", description: "Outline style", example: "outline" },
|
|
140
|
+
{ name: "ghost", type: "boolean", description: "Ghost/transparent style", example: "ghost" },
|
|
141
|
+
{ name: "danger", type: "boolean", description: "Danger/destructive style", example: "danger" },
|
|
142
|
+
// ============================================
|
|
143
|
+
// Status Variant Attributes
|
|
144
|
+
// ============================================
|
|
145
|
+
{ name: "variant", type: "enum", values: ["default", "primary", "secondary", "success", "warning", "danger", "info"], description: "Status variant", example: "variant=success" },
|
|
146
|
+
// ============================================
|
|
147
|
+
// Form Attributes
|
|
148
|
+
// ============================================
|
|
149
|
+
{ name: "inputType", type: "enum", values: ["text", "email", "password", "number", "tel", "url", "search", "date"], description: "Input field type", example: "inputType=email" },
|
|
150
|
+
{ name: "placeholder", type: "string", description: "Placeholder text", example: 'placeholder="Enter text"' },
|
|
151
|
+
{ name: "value", type: "string", description: "Default value", example: 'value="default"' },
|
|
152
|
+
{ name: "label", type: "string", description: "Field label", example: 'label="Name"' },
|
|
153
|
+
{ name: "name", type: "string", description: "Form field name", example: 'name="field"' },
|
|
154
|
+
{ name: "required", type: "boolean", description: "Required field", example: "required" },
|
|
155
|
+
{ name: "disabled", type: "boolean", description: "Disabled state", example: "disabled" },
|
|
156
|
+
{ name: "readonly", type: "boolean", description: "Read-only state", example: "readonly" },
|
|
157
|
+
{ name: "checked", type: "boolean", description: "Checked state", example: "checked" },
|
|
158
|
+
{ name: "loading", type: "boolean", description: "Loading state", example: "loading" },
|
|
159
|
+
{ name: "rows", type: "number", description: "Textarea rows", example: "rows=4" },
|
|
160
|
+
{ name: "min", type: "number", description: "Minimum value", example: "min=0" },
|
|
161
|
+
{ name: "max", type: "number", description: "Maximum value", example: "max=100" },
|
|
162
|
+
{ name: "step", type: "number", description: "Step increment", example: "step=1" },
|
|
163
|
+
// ============================================
|
|
164
|
+
// Content Attributes
|
|
165
|
+
// ============================================
|
|
166
|
+
{ name: "title", type: "string", description: "Title text", example: 'title="Title"' },
|
|
167
|
+
{ name: "src", type: "string", description: "Source URL", example: 'src="/image.png"' },
|
|
168
|
+
{ name: "alt", type: "string", description: "Alt text", example: 'alt="Image"' },
|
|
169
|
+
{ name: "href", type: "string", description: "Link URL", example: 'href="/path"' },
|
|
170
|
+
{ name: "icon", type: "string", description: "Icon name", example: 'icon="home"' },
|
|
171
|
+
{ name: "external", type: "boolean", description: "External link", example: "external" },
|
|
172
|
+
// ============================================
|
|
173
|
+
// State Attributes
|
|
174
|
+
// ============================================
|
|
175
|
+
{ name: "active", type: "number", description: "Active index", example: "active=0" },
|
|
176
|
+
{ name: "expanded", type: "boolean", description: "Expanded state", example: "expanded" },
|
|
177
|
+
{ name: "centered", type: "boolean", description: "Center content", example: "centered" },
|
|
178
|
+
{ name: "vertical", type: "boolean", description: "Vertical orientation", example: "vertical" },
|
|
179
|
+
{ name: "scroll", type: "boolean", description: "Enable scrolling", example: "scroll" },
|
|
180
|
+
// ============================================
|
|
181
|
+
// Feedback Attributes
|
|
182
|
+
// ============================================
|
|
183
|
+
{ name: "dismissible", type: "boolean", description: "Can be dismissed", example: "dismissible" },
|
|
184
|
+
{ name: "indeterminate", type: "boolean", description: "Indeterminate state", example: "indeterminate" },
|
|
185
|
+
{ name: "pill", type: "boolean", description: "Pill/rounded style", example: "pill" },
|
|
186
|
+
// ============================================
|
|
187
|
+
// Data Attributes
|
|
188
|
+
// ============================================
|
|
189
|
+
{ name: "striped", type: "boolean", description: "Striped rows", example: "striped" },
|
|
190
|
+
{ name: "bordered", type: "boolean", description: "Full borders", example: "bordered" },
|
|
191
|
+
{ name: "hover", type: "boolean", description: "Hover effect", example: "hover" },
|
|
192
|
+
{ name: "ordered", type: "boolean", description: "Ordered list", example: "ordered" },
|
|
193
|
+
{ name: "none", type: "boolean", description: "No list markers", example: "none" },
|
|
194
|
+
// ============================================
|
|
195
|
+
// Page/Viewport Attributes
|
|
196
|
+
// ============================================
|
|
197
|
+
{ name: "viewport", type: "string", description: 'Viewport size (e.g., "1440x900")', example: 'viewport="1440x900"' },
|
|
198
|
+
{ name: "device", type: "string", description: "Device preset", example: 'device="iphone14"' }
|
|
199
|
+
];
|
|
200
|
+
var ATTRIBUTE_MAP = new Map(
|
|
201
|
+
ATTRIBUTES.map((attr) => [attr.name, attr])
|
|
202
|
+
);
|
|
203
|
+
var VALID_ATTRIBUTE_NAMES = new Set(
|
|
204
|
+
ATTRIBUTES.map((attr) => attr.name)
|
|
205
|
+
);
|
|
206
|
+
|
|
207
|
+
// src/components.ts
|
|
208
|
+
var ALL_COMPONENTS = [
|
|
209
|
+
// ============================================
|
|
210
|
+
// Layout Components
|
|
211
|
+
// ============================================
|
|
212
|
+
{
|
|
213
|
+
name: "page",
|
|
214
|
+
nodeType: "Page",
|
|
215
|
+
category: "layout",
|
|
216
|
+
attributes: [...COMMON_ATTRIBUTES, "title", "width", "height", "viewport", "device", "centered"],
|
|
217
|
+
hasChildren: true,
|
|
218
|
+
description: "Root container for a wireframe page",
|
|
219
|
+
example: 'page "Dashboard" centered { ... }',
|
|
220
|
+
validChildren: ["header", "main", "footer", "sidebar", "section", "nav", "row", "col", "card"],
|
|
221
|
+
validParents: []
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
name: "header",
|
|
225
|
+
nodeType: "Header",
|
|
226
|
+
category: "layout",
|
|
227
|
+
attributes: [...COMMON_ATTRIBUTES, "border"],
|
|
228
|
+
hasChildren: true,
|
|
229
|
+
description: "Page header section",
|
|
230
|
+
example: "header h=56 border { ... }",
|
|
231
|
+
validParents: ["page"]
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
name: "main",
|
|
235
|
+
nodeType: "Main",
|
|
236
|
+
category: "layout",
|
|
237
|
+
attributes: [...COMMON_ATTRIBUTES, "scroll"],
|
|
238
|
+
hasChildren: true,
|
|
239
|
+
description: "Main content section",
|
|
240
|
+
example: "main p=6 scroll { ... }",
|
|
241
|
+
validParents: ["page"]
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
name: "footer",
|
|
245
|
+
nodeType: "Footer",
|
|
246
|
+
category: "layout",
|
|
247
|
+
attributes: [...COMMON_ATTRIBUTES, "border"],
|
|
248
|
+
hasChildren: true,
|
|
249
|
+
description: "Page footer section",
|
|
250
|
+
example: "footer h=48 border { ... }",
|
|
251
|
+
validParents: ["page"]
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
name: "sidebar",
|
|
255
|
+
nodeType: "Sidebar",
|
|
256
|
+
category: "layout",
|
|
257
|
+
attributes: [...COMMON_ATTRIBUTES, "position", "border", "bg"],
|
|
258
|
+
hasChildren: true,
|
|
259
|
+
description: "Side navigation or content area",
|
|
260
|
+
example: "sidebar w=240 border { ... }",
|
|
261
|
+
validParents: ["page"]
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
name: "section",
|
|
265
|
+
nodeType: "Section",
|
|
266
|
+
category: "layout",
|
|
267
|
+
attributes: [...COMMON_ATTRIBUTES, "title", "expanded"],
|
|
268
|
+
hasChildren: true,
|
|
269
|
+
description: "Grouped content section",
|
|
270
|
+
example: 'section "Settings" expanded { ... }'
|
|
271
|
+
},
|
|
272
|
+
// ============================================
|
|
273
|
+
// Grid Components
|
|
274
|
+
// ============================================
|
|
275
|
+
{
|
|
276
|
+
name: "row",
|
|
277
|
+
nodeType: "Row",
|
|
278
|
+
category: "grid",
|
|
279
|
+
attributes: [...COMMON_ATTRIBUTES, "border", "bg"],
|
|
280
|
+
hasChildren: true,
|
|
281
|
+
description: "Horizontal flex container",
|
|
282
|
+
example: "row flex gap=4 justify=between { ... }"
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
name: "col",
|
|
286
|
+
nodeType: "Col",
|
|
287
|
+
category: "grid",
|
|
288
|
+
attributes: [...COMMON_ATTRIBUTES, "sm", "md", "lg", "xl", "order", "border", "bg", "scroll"],
|
|
289
|
+
hasChildren: true,
|
|
290
|
+
description: "Vertical flex container or grid column",
|
|
291
|
+
example: "col span=6 md=4 { ... }"
|
|
292
|
+
},
|
|
293
|
+
// ============================================
|
|
294
|
+
// Container Components
|
|
295
|
+
// ============================================
|
|
296
|
+
{
|
|
297
|
+
name: "card",
|
|
298
|
+
nodeType: "Card",
|
|
299
|
+
category: "container",
|
|
300
|
+
attributes: [...COMMON_ATTRIBUTES, "title", "shadow", "border", "rounded"],
|
|
301
|
+
hasChildren: true,
|
|
302
|
+
description: "Card container with optional title",
|
|
303
|
+
example: 'card "Settings" p=4 shadow=md { ... }'
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
name: "modal",
|
|
307
|
+
nodeType: "Modal",
|
|
308
|
+
category: "container",
|
|
309
|
+
attributes: [...COMMON_ATTRIBUTES, "title"],
|
|
310
|
+
hasChildren: true,
|
|
311
|
+
description: "Modal dialog overlay",
|
|
312
|
+
example: 'modal "Confirm" w=400 { ... }'
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
name: "drawer",
|
|
316
|
+
nodeType: "Drawer",
|
|
317
|
+
category: "container",
|
|
318
|
+
attributes: [...COMMON_ATTRIBUTES, "title", "position"],
|
|
319
|
+
hasChildren: true,
|
|
320
|
+
description: "Slide-in drawer panel",
|
|
321
|
+
example: 'drawer "Menu" position=left { ... }'
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
name: "accordion",
|
|
325
|
+
nodeType: "Accordion",
|
|
326
|
+
category: "container",
|
|
327
|
+
attributes: [...COMMON_ATTRIBUTES, "title"],
|
|
328
|
+
hasChildren: true,
|
|
329
|
+
description: "Collapsible sections container",
|
|
330
|
+
example: 'accordion { section "FAQ 1" { ... } }'
|
|
331
|
+
},
|
|
332
|
+
// ============================================
|
|
333
|
+
// Text Components
|
|
334
|
+
// ============================================
|
|
335
|
+
{
|
|
336
|
+
name: "text",
|
|
337
|
+
nodeType: "Text",
|
|
338
|
+
category: "text",
|
|
339
|
+
attributes: [...COMMON_ATTRIBUTES, "size", "weight", "muted", "bold"],
|
|
340
|
+
hasChildren: false,
|
|
341
|
+
description: "Text content",
|
|
342
|
+
example: 'text "Hello World" size=lg weight=bold'
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
name: "title",
|
|
346
|
+
nodeType: "Title",
|
|
347
|
+
category: "text",
|
|
348
|
+
attributes: [...COMMON_ATTRIBUTES, "level", "size"],
|
|
349
|
+
hasChildren: false,
|
|
350
|
+
description: "Heading element (h1-h6)",
|
|
351
|
+
example: 'title "Welcome" level=2'
|
|
352
|
+
},
|
|
353
|
+
{
|
|
354
|
+
name: "link",
|
|
355
|
+
nodeType: "Link",
|
|
356
|
+
category: "text",
|
|
357
|
+
attributes: [...COMMON_ATTRIBUTES, "href", "external"],
|
|
358
|
+
hasChildren: false,
|
|
359
|
+
description: "Hyperlink text",
|
|
360
|
+
example: 'link "Learn more" href="/docs" external'
|
|
361
|
+
},
|
|
362
|
+
// ============================================
|
|
363
|
+
// Input Components
|
|
364
|
+
// ============================================
|
|
365
|
+
{
|
|
366
|
+
name: "input",
|
|
367
|
+
nodeType: "Input",
|
|
368
|
+
category: "input",
|
|
369
|
+
attributes: [...COMMON_ATTRIBUTES, "label", "inputType", "placeholder", "value", "disabled", "required", "readonly", "icon", "size", "rounded"],
|
|
370
|
+
hasChildren: false,
|
|
371
|
+
description: "Text input field",
|
|
372
|
+
example: 'input "Email" inputType=email placeholder="user@example.com" required'
|
|
373
|
+
},
|
|
374
|
+
{
|
|
375
|
+
name: "textarea",
|
|
376
|
+
nodeType: "Textarea",
|
|
377
|
+
category: "input",
|
|
378
|
+
attributes: [...COMMON_ATTRIBUTES, "label", "placeholder", "value", "rows", "disabled", "required"],
|
|
379
|
+
hasChildren: false,
|
|
380
|
+
description: "Multi-line text input",
|
|
381
|
+
example: 'textarea "Description" rows=4 placeholder="Enter description..."'
|
|
382
|
+
},
|
|
383
|
+
{
|
|
384
|
+
name: "select",
|
|
385
|
+
nodeType: "Select",
|
|
386
|
+
category: "input",
|
|
387
|
+
attributes: [...COMMON_ATTRIBUTES, "label", "placeholder", "value", "disabled", "required"],
|
|
388
|
+
hasChildren: false,
|
|
389
|
+
description: "Dropdown select",
|
|
390
|
+
example: 'select "Country" ["USA", "Canada", "UK"] placeholder="Select..."'
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
name: "checkbox",
|
|
394
|
+
nodeType: "Checkbox",
|
|
395
|
+
category: "input",
|
|
396
|
+
attributes: [...COMMON_ATTRIBUTES, "label", "checked", "disabled"],
|
|
397
|
+
hasChildren: false,
|
|
398
|
+
description: "Checkbox input",
|
|
399
|
+
example: 'checkbox "I agree to terms" checked'
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
name: "radio",
|
|
403
|
+
nodeType: "Radio",
|
|
404
|
+
category: "input",
|
|
405
|
+
attributes: [...COMMON_ATTRIBUTES, "label", "name", "checked", "disabled"],
|
|
406
|
+
hasChildren: false,
|
|
407
|
+
description: "Radio button input",
|
|
408
|
+
example: 'radio "Option A" name="choice" checked'
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
name: "switch",
|
|
412
|
+
nodeType: "Switch",
|
|
413
|
+
category: "input",
|
|
414
|
+
attributes: [...COMMON_ATTRIBUTES, "label", "checked", "disabled"],
|
|
415
|
+
hasChildren: false,
|
|
416
|
+
description: "Toggle switch",
|
|
417
|
+
example: 'switch "Dark mode" checked'
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
name: "slider",
|
|
421
|
+
nodeType: "Slider",
|
|
422
|
+
category: "input",
|
|
423
|
+
attributes: [...COMMON_ATTRIBUTES, "label", "min", "max", "value", "step", "disabled"],
|
|
424
|
+
hasChildren: false,
|
|
425
|
+
description: "Range slider",
|
|
426
|
+
example: 'slider "Volume" min=0 max=100 value=50'
|
|
427
|
+
},
|
|
428
|
+
{
|
|
429
|
+
name: "button",
|
|
430
|
+
nodeType: "Button",
|
|
431
|
+
category: "input",
|
|
432
|
+
attributes: [...COMMON_ATTRIBUTES, "primary", "secondary", "outline", "ghost", "danger", "size", "icon", "disabled", "loading"],
|
|
433
|
+
hasChildren: false,
|
|
434
|
+
description: "Clickable button",
|
|
435
|
+
example: 'button "Submit" primary icon=send'
|
|
436
|
+
},
|
|
437
|
+
// ============================================
|
|
438
|
+
// Display Components
|
|
439
|
+
// ============================================
|
|
440
|
+
{
|
|
441
|
+
name: "image",
|
|
442
|
+
nodeType: "Image",
|
|
443
|
+
category: "display",
|
|
444
|
+
attributes: [...COMMON_ATTRIBUTES, "src", "alt"],
|
|
445
|
+
hasChildren: false,
|
|
446
|
+
description: "Image placeholder",
|
|
447
|
+
example: "image w=200 h=150"
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
name: "placeholder",
|
|
451
|
+
nodeType: "Placeholder",
|
|
452
|
+
category: "display",
|
|
453
|
+
attributes: [...COMMON_ATTRIBUTES, "label"],
|
|
454
|
+
hasChildren: true,
|
|
455
|
+
description: "Generic placeholder",
|
|
456
|
+
example: 'placeholder "Banner Image" w=full h=200 { ... }'
|
|
457
|
+
},
|
|
458
|
+
{
|
|
459
|
+
name: "avatar",
|
|
460
|
+
nodeType: "Avatar",
|
|
461
|
+
category: "display",
|
|
462
|
+
attributes: [...COMMON_ATTRIBUTES, "name", "src", "size"],
|
|
463
|
+
hasChildren: false,
|
|
464
|
+
description: "User avatar",
|
|
465
|
+
example: 'avatar "John Doe" size=lg'
|
|
466
|
+
},
|
|
467
|
+
{
|
|
468
|
+
name: "badge",
|
|
469
|
+
nodeType: "Badge",
|
|
470
|
+
category: "display",
|
|
471
|
+
attributes: [...COMMON_ATTRIBUTES, "variant", "pill", "icon", "size"],
|
|
472
|
+
hasChildren: false,
|
|
473
|
+
description: "Status badge",
|
|
474
|
+
example: 'badge "New" variant=success pill'
|
|
475
|
+
},
|
|
476
|
+
{
|
|
477
|
+
name: "icon",
|
|
478
|
+
nodeType: "Icon",
|
|
479
|
+
category: "display",
|
|
480
|
+
attributes: [...COMMON_ATTRIBUTES, "size", "muted"],
|
|
481
|
+
hasChildren: false,
|
|
482
|
+
description: "Lucide icon",
|
|
483
|
+
example: 'icon "settings" size=lg'
|
|
484
|
+
},
|
|
485
|
+
// ============================================
|
|
486
|
+
// Data Components
|
|
487
|
+
// ============================================
|
|
488
|
+
{
|
|
489
|
+
name: "table",
|
|
490
|
+
nodeType: "Table",
|
|
491
|
+
category: "data",
|
|
492
|
+
attributes: [...COMMON_ATTRIBUTES, "striped", "bordered", "hover"],
|
|
493
|
+
hasChildren: false,
|
|
494
|
+
description: "Data table",
|
|
495
|
+
example: 'table striped bordered { columns ["Name", "Email"] row ["John", "john@example.com"] }'
|
|
496
|
+
},
|
|
497
|
+
{
|
|
498
|
+
name: "list",
|
|
499
|
+
nodeType: "List",
|
|
500
|
+
category: "data",
|
|
501
|
+
attributes: [...COMMON_ATTRIBUTES, "ordered", "none"],
|
|
502
|
+
hasChildren: false,
|
|
503
|
+
description: "List of items",
|
|
504
|
+
example: 'list ordered ["First", "Second", "Third"]'
|
|
505
|
+
},
|
|
506
|
+
// ============================================
|
|
507
|
+
// Feedback Components
|
|
508
|
+
// ============================================
|
|
509
|
+
{
|
|
510
|
+
name: "alert",
|
|
511
|
+
nodeType: "Alert",
|
|
512
|
+
category: "feedback",
|
|
513
|
+
attributes: [...COMMON_ATTRIBUTES, "variant", "dismissible", "icon"],
|
|
514
|
+
hasChildren: false,
|
|
515
|
+
description: "Alert message",
|
|
516
|
+
example: 'alert "Changes saved!" variant=success'
|
|
517
|
+
},
|
|
518
|
+
{
|
|
519
|
+
name: "toast",
|
|
520
|
+
nodeType: "Toast",
|
|
521
|
+
category: "feedback",
|
|
522
|
+
attributes: [...COMMON_ATTRIBUTES, "position", "variant"],
|
|
523
|
+
hasChildren: false,
|
|
524
|
+
description: "Toast notification",
|
|
525
|
+
example: 'toast "Item deleted" position=bottom-right variant=danger'
|
|
526
|
+
},
|
|
527
|
+
{
|
|
528
|
+
name: "progress",
|
|
529
|
+
nodeType: "Progress",
|
|
530
|
+
category: "feedback",
|
|
531
|
+
attributes: [...COMMON_ATTRIBUTES, "value", "max", "label", "indeterminate"],
|
|
532
|
+
hasChildren: false,
|
|
533
|
+
description: "Progress bar",
|
|
534
|
+
example: 'progress value=75 label="Uploading..."'
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
name: "spinner",
|
|
538
|
+
nodeType: "Spinner",
|
|
539
|
+
category: "feedback",
|
|
540
|
+
attributes: [...COMMON_ATTRIBUTES, "label", "size"],
|
|
541
|
+
hasChildren: false,
|
|
542
|
+
description: "Loading spinner",
|
|
543
|
+
example: "spinner size=lg"
|
|
544
|
+
},
|
|
545
|
+
// ============================================
|
|
546
|
+
// Overlay Components
|
|
547
|
+
// ============================================
|
|
548
|
+
{
|
|
549
|
+
name: "tooltip",
|
|
550
|
+
nodeType: "Tooltip",
|
|
551
|
+
category: "overlay",
|
|
552
|
+
attributes: [...COMMON_ATTRIBUTES, "position"],
|
|
553
|
+
hasChildren: false,
|
|
554
|
+
description: "Tooltip on hover",
|
|
555
|
+
example: 'tooltip "More info" position=top { icon "help-circle" }'
|
|
556
|
+
},
|
|
557
|
+
{
|
|
558
|
+
name: "popover",
|
|
559
|
+
nodeType: "Popover",
|
|
560
|
+
category: "overlay",
|
|
561
|
+
attributes: [...COMMON_ATTRIBUTES, "title"],
|
|
562
|
+
hasChildren: true,
|
|
563
|
+
description: "Popover panel",
|
|
564
|
+
example: 'popover "Details" { ... }'
|
|
565
|
+
},
|
|
566
|
+
{
|
|
567
|
+
name: "dropdown",
|
|
568
|
+
nodeType: "Dropdown",
|
|
569
|
+
category: "overlay",
|
|
570
|
+
attributes: [...COMMON_ATTRIBUTES],
|
|
571
|
+
hasChildren: false,
|
|
572
|
+
description: "Dropdown menu",
|
|
573
|
+
example: 'dropdown { item "Edit" icon=edit item "Delete" icon=trash danger }'
|
|
574
|
+
},
|
|
575
|
+
// ============================================
|
|
576
|
+
// Navigation Components
|
|
577
|
+
// ============================================
|
|
578
|
+
{
|
|
579
|
+
name: "nav",
|
|
580
|
+
nodeType: "Nav",
|
|
581
|
+
category: "navigation",
|
|
582
|
+
attributes: [...COMMON_ATTRIBUTES, "vertical"],
|
|
583
|
+
hasChildren: false,
|
|
584
|
+
description: "Navigation menu",
|
|
585
|
+
example: 'nav [{ label="Home" icon=home active }, { label="Settings" icon=settings }] vertical'
|
|
586
|
+
},
|
|
587
|
+
{
|
|
588
|
+
name: "tabs",
|
|
589
|
+
nodeType: "Tabs",
|
|
590
|
+
category: "navigation",
|
|
591
|
+
attributes: [...COMMON_ATTRIBUTES, "active"],
|
|
592
|
+
hasChildren: true,
|
|
593
|
+
description: "Tab navigation",
|
|
594
|
+
example: 'tabs { tab "General" active { ... } tab "Advanced" { ... } }'
|
|
595
|
+
},
|
|
596
|
+
{
|
|
597
|
+
name: "breadcrumb",
|
|
598
|
+
nodeType: "Breadcrumb",
|
|
599
|
+
category: "navigation",
|
|
600
|
+
attributes: [...COMMON_ATTRIBUTES],
|
|
601
|
+
hasChildren: false,
|
|
602
|
+
description: "Breadcrumb navigation",
|
|
603
|
+
example: 'breadcrumb [{ label="Home" href="/" }, { label="Products" }, { label="Details" }]'
|
|
604
|
+
},
|
|
605
|
+
// ============================================
|
|
606
|
+
// Divider Component
|
|
607
|
+
// ============================================
|
|
608
|
+
{
|
|
609
|
+
name: "divider",
|
|
610
|
+
nodeType: "Divider",
|
|
611
|
+
category: "layout",
|
|
612
|
+
attributes: [...COMMON_ATTRIBUTES, "vertical"],
|
|
613
|
+
hasChildren: false,
|
|
614
|
+
description: "Horizontal separator",
|
|
615
|
+
example: "divider my=4"
|
|
616
|
+
}
|
|
617
|
+
];
|
|
618
|
+
var COMPONENT_MAP = new Map(
|
|
619
|
+
ALL_COMPONENTS.map((comp) => [comp.name, comp])
|
|
620
|
+
);
|
|
621
|
+
var NODE_TYPE_MAP = new Map(
|
|
622
|
+
ALL_COMPONENTS.map((comp) => [comp.nodeType, comp])
|
|
623
|
+
);
|
|
624
|
+
var VALID_COMPONENT_NAMES = new Set(
|
|
625
|
+
ALL_COMPONENTS.map((comp) => comp.name)
|
|
626
|
+
);
|
|
627
|
+
|
|
628
|
+
// src/keywords.ts
|
|
629
|
+
var CATEGORY_LABELS = {
|
|
630
|
+
layout: "Layout",
|
|
631
|
+
container: "Container",
|
|
632
|
+
grid: "Grid",
|
|
633
|
+
text: "Text",
|
|
634
|
+
input: "Input",
|
|
635
|
+
display: "Display",
|
|
636
|
+
data: "Data",
|
|
637
|
+
feedback: "Feedback",
|
|
638
|
+
overlay: "Overlay",
|
|
639
|
+
navigation: "Navigation"
|
|
640
|
+
};
|
|
641
|
+
var VALUE_KEYWORDS = [
|
|
642
|
+
// Booleans
|
|
643
|
+
"true",
|
|
644
|
+
"false",
|
|
645
|
+
// Button variants
|
|
646
|
+
"primary",
|
|
647
|
+
"secondary",
|
|
648
|
+
"outline",
|
|
649
|
+
"ghost",
|
|
650
|
+
// Status variants
|
|
651
|
+
"success",
|
|
652
|
+
"danger",
|
|
653
|
+
"warning",
|
|
654
|
+
"info",
|
|
655
|
+
"default",
|
|
656
|
+
// Sizes
|
|
657
|
+
"xs",
|
|
658
|
+
"sm",
|
|
659
|
+
"md",
|
|
660
|
+
"lg",
|
|
661
|
+
"xl",
|
|
662
|
+
"base",
|
|
663
|
+
"2xl",
|
|
664
|
+
"3xl",
|
|
665
|
+
// Flex alignment
|
|
666
|
+
"start",
|
|
667
|
+
"center",
|
|
668
|
+
"end",
|
|
669
|
+
"between",
|
|
670
|
+
"around",
|
|
671
|
+
"evenly",
|
|
672
|
+
"stretch",
|
|
673
|
+
"baseline",
|
|
674
|
+
// Positions
|
|
675
|
+
"left",
|
|
676
|
+
"right",
|
|
677
|
+
"top",
|
|
678
|
+
"bottom",
|
|
679
|
+
"top-left",
|
|
680
|
+
"top-center",
|
|
681
|
+
"top-right",
|
|
682
|
+
"bottom-left",
|
|
683
|
+
"bottom-center",
|
|
684
|
+
"bottom-right",
|
|
685
|
+
// Sizing
|
|
686
|
+
"full",
|
|
687
|
+
"auto",
|
|
688
|
+
"screen",
|
|
689
|
+
"fit",
|
|
690
|
+
// Font weights
|
|
691
|
+
"normal",
|
|
692
|
+
"medium",
|
|
693
|
+
"semibold",
|
|
694
|
+
"bold",
|
|
695
|
+
// Input types
|
|
696
|
+
"text",
|
|
697
|
+
"email",
|
|
698
|
+
"password",
|
|
699
|
+
"number",
|
|
700
|
+
"tel",
|
|
701
|
+
"url",
|
|
702
|
+
"search",
|
|
703
|
+
"date",
|
|
704
|
+
// Flex direction
|
|
705
|
+
"row",
|
|
706
|
+
"column",
|
|
707
|
+
"row-reverse",
|
|
708
|
+
"column-reverse",
|
|
709
|
+
// List
|
|
710
|
+
"none",
|
|
711
|
+
"nowrap"
|
|
712
|
+
];
|
|
713
|
+
|
|
714
|
+
// src/utils.ts
|
|
715
|
+
function getComponent(name) {
|
|
716
|
+
return COMPONENT_MAP.get(name.toLowerCase());
|
|
717
|
+
}
|
|
718
|
+
function getAttribute(name) {
|
|
719
|
+
return ATTRIBUTE_MAP.get(name);
|
|
720
|
+
}
|
|
721
|
+
function getValidChildren(componentName) {
|
|
722
|
+
const component = getComponent(componentName);
|
|
723
|
+
if (!component || !component.hasChildren) return [];
|
|
724
|
+
if (component.validChildren === void 0) {
|
|
725
|
+
return ALL_COMPONENTS.filter((c) => c.name !== "page");
|
|
726
|
+
}
|
|
727
|
+
return component.validChildren.map((name) => getComponent(name)).filter((c) => c !== void 0);
|
|
728
|
+
}
|
|
729
|
+
function getComponentAttributes(componentName) {
|
|
730
|
+
const component = getComponent(componentName);
|
|
731
|
+
if (!component) return ATTRIBUTES;
|
|
732
|
+
return ATTRIBUTES.filter((attr) => component.attributes.includes(attr.name));
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
// src/codemirror/language.ts
|
|
736
|
+
var COMPONENT_NAMES = ALL_COMPONENTS.map((c) => c.name);
|
|
737
|
+
var ATTRIBUTE_NAMES = ATTRIBUTES.map((a) => a.name);
|
|
738
|
+
var VALUE_KEYWORDS2 = [
|
|
739
|
+
// Sizes
|
|
740
|
+
"xs",
|
|
741
|
+
"sm",
|
|
742
|
+
"md",
|
|
743
|
+
"lg",
|
|
744
|
+
"xl",
|
|
745
|
+
"2xl",
|
|
746
|
+
"3xl",
|
|
747
|
+
// Weights
|
|
748
|
+
"thin",
|
|
749
|
+
"light",
|
|
750
|
+
"normal",
|
|
751
|
+
"medium",
|
|
752
|
+
"semibold",
|
|
753
|
+
"bold",
|
|
754
|
+
"extrabold",
|
|
755
|
+
// Alignments
|
|
756
|
+
"left",
|
|
757
|
+
"center",
|
|
758
|
+
"right",
|
|
759
|
+
"start",
|
|
760
|
+
"end",
|
|
761
|
+
"top",
|
|
762
|
+
"middle",
|
|
763
|
+
"bottom",
|
|
764
|
+
"between",
|
|
765
|
+
"around",
|
|
766
|
+
"evenly",
|
|
767
|
+
"stretch",
|
|
768
|
+
// Directions
|
|
769
|
+
"horizontal",
|
|
770
|
+
"vertical",
|
|
771
|
+
// Variants
|
|
772
|
+
"primary",
|
|
773
|
+
"secondary",
|
|
774
|
+
"outline",
|
|
775
|
+
"ghost",
|
|
776
|
+
"link",
|
|
777
|
+
"danger",
|
|
778
|
+
"info",
|
|
779
|
+
"success",
|
|
780
|
+
"warning",
|
|
781
|
+
"error",
|
|
782
|
+
// Boolean
|
|
783
|
+
"true",
|
|
784
|
+
"false",
|
|
785
|
+
// Devices
|
|
786
|
+
"mobile",
|
|
787
|
+
"tablet",
|
|
788
|
+
"desktop",
|
|
789
|
+
// Input types
|
|
790
|
+
"text",
|
|
791
|
+
"email",
|
|
792
|
+
"password",
|
|
793
|
+
"number",
|
|
794
|
+
"tel",
|
|
795
|
+
"url",
|
|
796
|
+
"search",
|
|
797
|
+
"date"
|
|
798
|
+
];
|
|
799
|
+
function createTokenizer() {
|
|
800
|
+
return {
|
|
801
|
+
token(stream) {
|
|
802
|
+
if (stream.eatSpace()) return null;
|
|
803
|
+
if (stream.match("//")) {
|
|
804
|
+
stream.skipToEnd();
|
|
805
|
+
return "comment";
|
|
806
|
+
}
|
|
807
|
+
if (stream.match(/"[^"]*"/)) {
|
|
808
|
+
return "string";
|
|
809
|
+
}
|
|
810
|
+
if (stream.match(/\d+/)) {
|
|
811
|
+
return "number";
|
|
812
|
+
}
|
|
813
|
+
for (const kw of COMPONENT_NAMES) {
|
|
814
|
+
if (stream.match(new RegExp(`^${kw}\\b`))) {
|
|
815
|
+
return "keyword";
|
|
816
|
+
}
|
|
817
|
+
}
|
|
818
|
+
for (const attr of ATTRIBUTE_NAMES) {
|
|
819
|
+
if (stream.match(new RegExp(`^${attr}\\b`))) {
|
|
820
|
+
return "propertyName";
|
|
821
|
+
}
|
|
822
|
+
}
|
|
823
|
+
for (const val of VALUE_KEYWORDS2) {
|
|
824
|
+
if (stream.match(new RegExp(`^${val}\\b`))) {
|
|
825
|
+
return "atom";
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
if (stream.match(/[=]/)) {
|
|
829
|
+
return "operator";
|
|
830
|
+
}
|
|
831
|
+
if (stream.match(/[{}[\]()]/)) {
|
|
832
|
+
return "bracket";
|
|
833
|
+
}
|
|
834
|
+
stream.next();
|
|
835
|
+
return null;
|
|
836
|
+
}
|
|
837
|
+
};
|
|
838
|
+
}
|
|
839
|
+
function getLanguageConfig() {
|
|
840
|
+
return {
|
|
841
|
+
commentTokens: { line: "//" },
|
|
842
|
+
closeBrackets: { brackets: ["(", "[", "{", '"'] },
|
|
843
|
+
indentOnInput: /^\s*\}$/
|
|
844
|
+
};
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
// src/codemirror/completion.ts
|
|
848
|
+
function getCategoryLabel(category) {
|
|
849
|
+
return CATEGORY_LABELS[category] || category;
|
|
850
|
+
}
|
|
851
|
+
function findParentComponent(text, pos) {
|
|
852
|
+
let braceCount = 0;
|
|
853
|
+
for (let i = pos - 1; i >= 0; i--) {
|
|
854
|
+
if (text[i] === "}") braceCount++;
|
|
855
|
+
if (text[i] === "{") {
|
|
856
|
+
braceCount--;
|
|
857
|
+
if (braceCount < 0) {
|
|
858
|
+
const beforeBrace = text.substring(0, i);
|
|
859
|
+
const match = beforeBrace.match(/(\w+)(?:\s+"[^"]*")?\s*$/);
|
|
860
|
+
return match ? match[1] : null;
|
|
861
|
+
}
|
|
862
|
+
}
|
|
863
|
+
}
|
|
864
|
+
return null;
|
|
865
|
+
}
|
|
866
|
+
function createCompletionSource() {
|
|
867
|
+
return (context) => {
|
|
868
|
+
const { state, pos } = context;
|
|
869
|
+
const line = state.doc.lineAt(pos);
|
|
870
|
+
const textBefore = state.doc.sliceString(line.from, pos);
|
|
871
|
+
const fullText = state.doc.toString();
|
|
872
|
+
const wordMatch = textBefore.match(/(\w*)$/);
|
|
873
|
+
const word = wordMatch ? wordMatch[1] : "";
|
|
874
|
+
const from = pos - word.length;
|
|
875
|
+
const options = [];
|
|
876
|
+
const attrMatch = textBefore.match(/(\w+)\s*=\s*$/);
|
|
877
|
+
if (attrMatch) {
|
|
878
|
+
const attrName = attrMatch[1];
|
|
879
|
+
const attr = getAttribute(attrName);
|
|
880
|
+
if (attr && attr.type === "enum" && attr.values) {
|
|
881
|
+
attr.values.forEach((value) => {
|
|
882
|
+
options.push({
|
|
883
|
+
label: value,
|
|
884
|
+
type: "enum",
|
|
885
|
+
detail: `value for ${attrName}`
|
|
886
|
+
});
|
|
887
|
+
});
|
|
888
|
+
} else if (attr?.type === "number") {
|
|
889
|
+
[1, 2, 3, 4, 5, 6, 8, 10, 12, 16].forEach((n) => {
|
|
890
|
+
options.push({
|
|
891
|
+
label: String(n),
|
|
892
|
+
type: "constant",
|
|
893
|
+
detail: "number"
|
|
894
|
+
});
|
|
895
|
+
});
|
|
896
|
+
}
|
|
897
|
+
if (options.length > 0) {
|
|
898
|
+
return { from, options };
|
|
899
|
+
}
|
|
900
|
+
}
|
|
901
|
+
if (textBefore.match(/^\s*\w*$/) || textBefore.match(/\{\s*\w*$/)) {
|
|
902
|
+
const parentComponent = findParentComponent(fullText, pos);
|
|
903
|
+
const validChildren = parentComponent ? getValidChildren(parentComponent) : [];
|
|
904
|
+
const validChildNames = new Set(validChildren.map((c) => c.name));
|
|
905
|
+
const isRootLevel = !parentComponent;
|
|
906
|
+
ALL_COMPONENTS.forEach((comp) => {
|
|
907
|
+
const isValidInContext = isRootLevel ? comp.name === "page" : validChildNames.size === 0 || validChildNames.has(comp.name);
|
|
908
|
+
options.push({
|
|
909
|
+
label: comp.name,
|
|
910
|
+
type: isValidInContext ? "class" : "type",
|
|
911
|
+
detail: isValidInContext ? `${getCategoryLabel(comp.category)} (recommended)` : getCategoryLabel(comp.category),
|
|
912
|
+
info: comp.description,
|
|
913
|
+
boost: isValidInContext ? 10 : 0,
|
|
914
|
+
apply: comp.hasChildren ? `${comp.name} {
|
|
915
|
+
|
|
916
|
+
}` : comp.name
|
|
917
|
+
});
|
|
918
|
+
});
|
|
919
|
+
return { from, options };
|
|
920
|
+
}
|
|
921
|
+
const componentMatch = textBefore.match(/(\w+)(?:\s+"[^"]*")?\s+(\w*)$/);
|
|
922
|
+
if (componentMatch) {
|
|
923
|
+
const compName = componentMatch[1];
|
|
924
|
+
const component = getComponent(compName);
|
|
925
|
+
if (component) {
|
|
926
|
+
const attrs = getComponentAttributes(compName);
|
|
927
|
+
attrs.forEach((attr) => {
|
|
928
|
+
let apply = attr.name;
|
|
929
|
+
if (attr.type === "string") {
|
|
930
|
+
apply = `${attr.name}=""`;
|
|
931
|
+
} else if (attr.type === "number" || attr.type === "enum") {
|
|
932
|
+
apply = `${attr.name}=`;
|
|
933
|
+
}
|
|
934
|
+
options.push({
|
|
935
|
+
label: attr.name,
|
|
936
|
+
type: "property",
|
|
937
|
+
detail: attr.type,
|
|
938
|
+
info: attr.description,
|
|
939
|
+
apply
|
|
940
|
+
});
|
|
941
|
+
});
|
|
942
|
+
} else {
|
|
943
|
+
ATTRIBUTES.forEach((attr) => {
|
|
944
|
+
let apply = attr.name;
|
|
945
|
+
if (attr.type === "string") {
|
|
946
|
+
apply = `${attr.name}=""`;
|
|
947
|
+
} else if (attr.type === "number" || attr.type === "enum") {
|
|
948
|
+
apply = `${attr.name}=`;
|
|
949
|
+
}
|
|
950
|
+
options.push({
|
|
951
|
+
label: attr.name,
|
|
952
|
+
type: "property",
|
|
953
|
+
detail: attr.type,
|
|
954
|
+
info: attr.description,
|
|
955
|
+
apply
|
|
956
|
+
});
|
|
957
|
+
});
|
|
958
|
+
}
|
|
959
|
+
return { from, options };
|
|
960
|
+
}
|
|
961
|
+
ALL_COMPONENTS.forEach((comp) => {
|
|
962
|
+
options.push({
|
|
963
|
+
label: comp.name,
|
|
964
|
+
type: "class",
|
|
965
|
+
detail: getCategoryLabel(comp.category),
|
|
966
|
+
info: comp.description,
|
|
967
|
+
apply: comp.hasChildren ? `${comp.name} {
|
|
968
|
+
|
|
969
|
+
}` : comp.name
|
|
970
|
+
});
|
|
971
|
+
});
|
|
972
|
+
return { from, options };
|
|
973
|
+
};
|
|
974
|
+
}
|
|
975
|
+
|
|
976
|
+
// src/codemirror/hover.ts
|
|
977
|
+
function getCategoryLabel2(category) {
|
|
978
|
+
return CATEGORY_LABELS[category] || category;
|
|
979
|
+
}
|
|
980
|
+
function getWordAt(text, pos) {
|
|
981
|
+
let from = pos;
|
|
982
|
+
let to = pos;
|
|
983
|
+
while (from > 0 && /\w/.test(text[from - 1])) from--;
|
|
984
|
+
while (to < text.length && /\w/.test(text[to])) to++;
|
|
985
|
+
if (from === to) return null;
|
|
986
|
+
return {
|
|
987
|
+
word: text.slice(from, to),
|
|
988
|
+
from,
|
|
989
|
+
to
|
|
990
|
+
};
|
|
991
|
+
}
|
|
992
|
+
function createHoverTooltipSource() {
|
|
993
|
+
return (view, pos, _side) => {
|
|
994
|
+
const { state } = view;
|
|
995
|
+
const text = state.doc.toString();
|
|
996
|
+
const wordInfo = getWordAt(text, pos);
|
|
997
|
+
if (!wordInfo) return null;
|
|
998
|
+
const { word, from, to } = wordInfo;
|
|
999
|
+
const component = getComponent(word);
|
|
1000
|
+
if (component) {
|
|
1001
|
+
return {
|
|
1002
|
+
pos: from,
|
|
1003
|
+
end: to,
|
|
1004
|
+
above: true,
|
|
1005
|
+
create() {
|
|
1006
|
+
const dom = document.createElement("div");
|
|
1007
|
+
dom.className = "cm-tooltip-hover";
|
|
1008
|
+
dom.innerHTML = `
|
|
1009
|
+
<div style="padding: 8px 12px; max-width: 400px;">
|
|
1010
|
+
<div style="font-weight: bold; margin-bottom: 4px;">
|
|
1011
|
+
${component.name}
|
|
1012
|
+
<span style="opacity: 0.7; font-weight: normal; font-size: 0.9em;">
|
|
1013
|
+
(${getCategoryLabel2(component.category)})
|
|
1014
|
+
</span>
|
|
1015
|
+
</div>
|
|
1016
|
+
<div style="margin-bottom: 8px; opacity: 0.9;">${component.description}</div>
|
|
1017
|
+
${component.example ? `<code style="display: block; padding: 8px; background: rgba(0,0,0,0.1); border-radius: 4px; font-size: 0.85em; white-space: pre;">${component.example}</code>` : ""}
|
|
1018
|
+
<div style="margin-top: 8px; font-size: 0.85em; opacity: 0.7;">
|
|
1019
|
+
Attributes: ${component.attributes.join(", ")}
|
|
1020
|
+
</div>
|
|
1021
|
+
</div>
|
|
1022
|
+
`;
|
|
1023
|
+
return { dom };
|
|
1024
|
+
}
|
|
1025
|
+
};
|
|
1026
|
+
}
|
|
1027
|
+
const attribute = getAttribute(word);
|
|
1028
|
+
if (attribute) {
|
|
1029
|
+
let valueInfo = "";
|
|
1030
|
+
if (attribute.type === "number") {
|
|
1031
|
+
valueInfo = "Type: number";
|
|
1032
|
+
} else if (attribute.type === "string") {
|
|
1033
|
+
valueInfo = "Type: string";
|
|
1034
|
+
} else if (attribute.type === "boolean") {
|
|
1035
|
+
valueInfo = "Type: boolean";
|
|
1036
|
+
} else if (attribute.type === "enum" && attribute.values) {
|
|
1037
|
+
valueInfo = `Values: ${attribute.values.join(" | ")}`;
|
|
1038
|
+
}
|
|
1039
|
+
return {
|
|
1040
|
+
pos: from,
|
|
1041
|
+
end: to,
|
|
1042
|
+
above: true,
|
|
1043
|
+
create() {
|
|
1044
|
+
const dom = document.createElement("div");
|
|
1045
|
+
dom.className = "cm-tooltip-hover";
|
|
1046
|
+
dom.innerHTML = `
|
|
1047
|
+
<div style="padding: 8px 12px; max-width: 400px;">
|
|
1048
|
+
<div style="font-weight: bold; margin-bottom: 4px;">
|
|
1049
|
+
${attribute.name}
|
|
1050
|
+
<span style="opacity: 0.7; font-weight: normal; font-size: 0.9em;">(attribute)</span>
|
|
1051
|
+
</div>
|
|
1052
|
+
<div style="margin-bottom: 4px; opacity: 0.9;">${attribute.description}</div>
|
|
1053
|
+
${valueInfo ? `<div style="font-size: 0.85em; opacity: 0.8; font-family: monospace;">${valueInfo}</div>` : ""}
|
|
1054
|
+
${attribute.example ? `<div style="margin-top: 4px; font-size: 0.85em; opacity: 0.7;">Example: <code>${attribute.example}</code></div>` : ""}
|
|
1055
|
+
</div>
|
|
1056
|
+
`;
|
|
1057
|
+
return { dom };
|
|
1058
|
+
}
|
|
1059
|
+
};
|
|
1060
|
+
}
|
|
1061
|
+
if (VALUE_KEYWORDS.includes(word)) {
|
|
1062
|
+
const relatedAttrs = ATTRIBUTES.filter(
|
|
1063
|
+
(a) => a.type === "enum" && a.values?.includes(word)
|
|
1064
|
+
);
|
|
1065
|
+
if (relatedAttrs.length > 0) {
|
|
1066
|
+
return {
|
|
1067
|
+
pos: from,
|
|
1068
|
+
end: to,
|
|
1069
|
+
above: true,
|
|
1070
|
+
create() {
|
|
1071
|
+
const dom = document.createElement("div");
|
|
1072
|
+
dom.className = "cm-tooltip-hover";
|
|
1073
|
+
dom.innerHTML = `
|
|
1074
|
+
<div style="padding: 8px 12px; max-width: 300px;">
|
|
1075
|
+
<div style="font-weight: bold; margin-bottom: 4px;">
|
|
1076
|
+
${word}
|
|
1077
|
+
<span style="opacity: 0.7; font-weight: normal; font-size: 0.9em;">(value)</span>
|
|
1078
|
+
</div>
|
|
1079
|
+
<div style="font-size: 0.9em; opacity: 0.8;">
|
|
1080
|
+
Used in: ${relatedAttrs.map((a) => a.name).join(", ")}
|
|
1081
|
+
</div>
|
|
1082
|
+
</div>
|
|
1083
|
+
`;
|
|
1084
|
+
return { dom };
|
|
1085
|
+
}
|
|
1086
|
+
};
|
|
1087
|
+
}
|
|
1088
|
+
}
|
|
1089
|
+
return null;
|
|
1090
|
+
};
|
|
1091
|
+
}
|
|
1092
|
+
|
|
1093
|
+
// src/codemirror/linting.ts
|
|
1094
|
+
function validateCode(text) {
|
|
1095
|
+
const diagnostics = [];
|
|
1096
|
+
const lines = text.split("\n");
|
|
1097
|
+
let braceStack = [];
|
|
1098
|
+
let hasPage = false;
|
|
1099
|
+
let currentPos = 0;
|
|
1100
|
+
for (let lineNum = 0; lineNum < lines.length; lineNum++) {
|
|
1101
|
+
const line = lines[lineNum];
|
|
1102
|
+
const lineStart = currentPos;
|
|
1103
|
+
if (line.trim().startsWith("//")) {
|
|
1104
|
+
currentPos += line.length + 1;
|
|
1105
|
+
continue;
|
|
1106
|
+
}
|
|
1107
|
+
const pageMatch = line.match(/^\s*page\b/);
|
|
1108
|
+
if (pageMatch) {
|
|
1109
|
+
if (hasPage) {
|
|
1110
|
+
const matchStart = lineStart + line.indexOf("page");
|
|
1111
|
+
diagnostics.push({
|
|
1112
|
+
from: matchStart,
|
|
1113
|
+
to: matchStart + 4,
|
|
1114
|
+
severity: "error",
|
|
1115
|
+
message: "Only one page component is allowed."
|
|
1116
|
+
});
|
|
1117
|
+
}
|
|
1118
|
+
hasPage = true;
|
|
1119
|
+
}
|
|
1120
|
+
const componentMatch = line.match(/^\s*(\w+)(?:\s|{|")/);
|
|
1121
|
+
if (componentMatch) {
|
|
1122
|
+
const compName = componentMatch[1];
|
|
1123
|
+
if (!getComponent(compName) && !["true", "false"].includes(compName)) {
|
|
1124
|
+
const beforeMatch = line.substring(0, componentMatch.index);
|
|
1125
|
+
if (!beforeMatch.match(/=\s*$/)) {
|
|
1126
|
+
const matchStart = lineStart + (componentMatch.index || 0);
|
|
1127
|
+
diagnostics.push({
|
|
1128
|
+
from: matchStart,
|
|
1129
|
+
to: matchStart + compName.length,
|
|
1130
|
+
severity: "warning",
|
|
1131
|
+
message: `Unknown component: "${compName}"`
|
|
1132
|
+
});
|
|
1133
|
+
}
|
|
1134
|
+
}
|
|
1135
|
+
}
|
|
1136
|
+
const attrRegex = /\b(\w+)\s*=/g;
|
|
1137
|
+
let attrMatch;
|
|
1138
|
+
while ((attrMatch = attrRegex.exec(line)) !== null) {
|
|
1139
|
+
const attrName = attrMatch[1];
|
|
1140
|
+
if (!getAttribute(attrName) && !getComponent(attrName)) {
|
|
1141
|
+
const matchStart = lineStart + attrMatch.index;
|
|
1142
|
+
diagnostics.push({
|
|
1143
|
+
from: matchStart,
|
|
1144
|
+
to: matchStart + attrName.length,
|
|
1145
|
+
severity: "warning",
|
|
1146
|
+
message: `Unknown attribute: "${attrName}"`
|
|
1147
|
+
});
|
|
1148
|
+
}
|
|
1149
|
+
}
|
|
1150
|
+
for (let col = 0; col < line.length; col++) {
|
|
1151
|
+
if (line[col] === "{") {
|
|
1152
|
+
const beforeBrace = line.substring(0, col);
|
|
1153
|
+
const compMatch = beforeBrace.match(/(\w+)(?:\s+"[^"]*")?\s*$/);
|
|
1154
|
+
braceStack.push({
|
|
1155
|
+
line: lineNum,
|
|
1156
|
+
col,
|
|
1157
|
+
pos: lineStart + col,
|
|
1158
|
+
component: compMatch ? compMatch[1] : void 0
|
|
1159
|
+
});
|
|
1160
|
+
} else if (line[col] === "}") {
|
|
1161
|
+
if (braceStack.length === 0) {
|
|
1162
|
+
diagnostics.push({
|
|
1163
|
+
from: lineStart + col,
|
|
1164
|
+
to: lineStart + col + 1,
|
|
1165
|
+
severity: "error",
|
|
1166
|
+
message: "Unmatched closing brace"
|
|
1167
|
+
});
|
|
1168
|
+
} else {
|
|
1169
|
+
braceStack.pop();
|
|
1170
|
+
}
|
|
1171
|
+
}
|
|
1172
|
+
}
|
|
1173
|
+
const quotes = line.match(/"/g);
|
|
1174
|
+
if (quotes && quotes.length % 2 !== 0) {
|
|
1175
|
+
diagnostics.push({
|
|
1176
|
+
from: lineStart,
|
|
1177
|
+
to: lineStart + line.length,
|
|
1178
|
+
severity: "error",
|
|
1179
|
+
message: "Unclosed string"
|
|
1180
|
+
});
|
|
1181
|
+
}
|
|
1182
|
+
currentPos += line.length + 1;
|
|
1183
|
+
}
|
|
1184
|
+
for (const brace of braceStack) {
|
|
1185
|
+
diagnostics.push({
|
|
1186
|
+
from: brace.pos,
|
|
1187
|
+
to: brace.pos + 1,
|
|
1188
|
+
severity: "error",
|
|
1189
|
+
message: `Unclosed brace${brace.component ? ` (${brace.component})` : ""}`
|
|
1190
|
+
});
|
|
1191
|
+
}
|
|
1192
|
+
if (!hasPage && text.trim()) {
|
|
1193
|
+
diagnostics.push({
|
|
1194
|
+
from: 0,
|
|
1195
|
+
to: 0,
|
|
1196
|
+
severity: "info",
|
|
1197
|
+
message: "Consider starting with a page component."
|
|
1198
|
+
});
|
|
1199
|
+
}
|
|
1200
|
+
return diagnostics;
|
|
1201
|
+
}
|
|
1202
|
+
function createLinter() {
|
|
1203
|
+
return (view) => {
|
|
1204
|
+
const text = view.state.doc.toString();
|
|
1205
|
+
const diagnostics = validateCode(text);
|
|
1206
|
+
return diagnostics.map((d) => ({
|
|
1207
|
+
from: d.from,
|
|
1208
|
+
to: d.to,
|
|
1209
|
+
severity: d.severity,
|
|
1210
|
+
message: d.message
|
|
1211
|
+
}));
|
|
1212
|
+
};
|
|
1213
|
+
}
|
|
1214
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
1215
|
+
0 && (module.exports = {
|
|
1216
|
+
createCompletionSource,
|
|
1217
|
+
createHoverTooltipSource,
|
|
1218
|
+
createLinter,
|
|
1219
|
+
createTokenizer,
|
|
1220
|
+
getLanguageConfig,
|
|
1221
|
+
validateCode
|
|
1222
|
+
});
|
|
1223
|
+
//# sourceMappingURL=index.cjs.map
|