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