@wire-dsl/engine 0.0.2

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.
Files changed (7) hide show
  1. package/LICENSE +36 -0
  2. package/README.md +102 -0
  3. package/dist/index.cjs +3042 -0
  4. package/dist/index.d.cts +312 -0
  5. package/dist/index.d.ts +312 -0
  6. package/dist/index.js +3005 -0
  7. package/package.json +58 -0
package/dist/index.d.cts ADDED
@@ -0,0 +1,312 @@
1
+ interface AST {
2
+ type: 'project';
3
+ name: string;
4
+ theme: Record<string, string>;
5
+ mocks: Record<string, string>;
6
+ colors: Record<string, string>;
7
+ definedComponents: ASTDefinedComponent[];
8
+ screens: ASTScreen[];
9
+ }
10
+ interface ASTDefinedComponent {
11
+ type: 'definedComponent';
12
+ name: string;
13
+ body: ASTLayout | ASTComponent;
14
+ }
15
+ interface ASTScreen {
16
+ type: 'screen';
17
+ name: string;
18
+ params: Record<string, string | number>;
19
+ layout: ASTLayout;
20
+ }
21
+ interface ASTLayout {
22
+ type: 'layout';
23
+ layoutType: string;
24
+ params: Record<string, string | number>;
25
+ children: (ASTComponent | ASTLayout | ASTCell)[];
26
+ }
27
+ interface ASTCell {
28
+ type: 'cell';
29
+ props: Record<string, string | number>;
30
+ children: (ASTComponent | ASTLayout)[];
31
+ }
32
+ interface ASTComponent {
33
+ type: 'component';
34
+ componentType: string;
35
+ props: Record<string, string | number>;
36
+ }
37
+ declare function parseWireDSL(input: string): AST;
38
+ interface ParsedWireframe {
39
+ name: string;
40
+ components: ParsedComponent[];
41
+ }
42
+ interface ParsedComponent {
43
+ type: string;
44
+ id: string;
45
+ children?: ParsedComponent[];
46
+ properties?: Record<string, unknown>;
47
+ }
48
+
49
+ /**
50
+ * Intermediate Representation (IR) Generator
51
+ *
52
+ * Transforms AST to normalized IR (JSON format)
53
+ * - Applies defaults from tokens
54
+ * - Generates unique IDs
55
+ * - Validates structure with Zod
56
+ */
57
+ interface IRContract {
58
+ irVersion: string;
59
+ project: IRProject;
60
+ }
61
+ interface IRProject {
62
+ id: string;
63
+ name: string;
64
+ theme: IRTheme;
65
+ mocks: Record<string, unknown>;
66
+ colors: Record<string, string>;
67
+ screens: IRScreen[];
68
+ nodes: Record<string, IRNode>;
69
+ }
70
+ interface IRTheme {
71
+ density: 'compact' | 'normal' | 'comfortable';
72
+ spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
73
+ radius: 'none' | 'sm' | 'md' | 'lg' | 'full';
74
+ stroke: 'thin' | 'normal' | 'thick';
75
+ font: 'sm' | 'base' | 'lg';
76
+ background?: string;
77
+ }
78
+ interface IRScreen {
79
+ id: string;
80
+ name: string;
81
+ viewport: {
82
+ width: number;
83
+ height: number;
84
+ };
85
+ background?: string;
86
+ root: {
87
+ ref: string;
88
+ };
89
+ }
90
+ type IRNode = IRContainerNode | IRComponentNode;
91
+ interface IRContainerNode {
92
+ id: string;
93
+ kind: 'container';
94
+ containerType: 'stack' | 'grid' | 'split' | 'panel' | 'card';
95
+ params: Record<string, string | number>;
96
+ children: Array<{
97
+ ref: string;
98
+ }>;
99
+ style: IRStyle;
100
+ meta: IRMeta;
101
+ }
102
+ interface IRComponentNode {
103
+ id: string;
104
+ kind: 'component';
105
+ componentType: string;
106
+ props: Record<string, string | number>;
107
+ style: IRStyle;
108
+ meta: IRMeta;
109
+ }
110
+ interface IRStyle {
111
+ padding?: string;
112
+ gap?: string;
113
+ align?: 'left' | 'center' | 'right' | 'justify';
114
+ justify?: 'start' | 'center' | 'end';
115
+ background?: string;
116
+ }
117
+ interface IRMeta {
118
+ source?: string;
119
+ }
120
+ declare class IRGenerator {
121
+ private idGen;
122
+ private nodes;
123
+ private definedComponents;
124
+ private definedComponentIndices;
125
+ private undefinedComponentsUsed;
126
+ private warnings;
127
+ private theme;
128
+ generate(ast: AST): IRContract;
129
+ private applyTheme;
130
+ private convertScreen;
131
+ /**
132
+ * Validates that component definitions appear before their first usage
133
+ * Generates warnings (not errors) to allow flexible code organization
134
+ */
135
+ private validateComponentOrder;
136
+ /**
137
+ * Recursively finds all component usages in a layout
138
+ */
139
+ private findComponentsInLayout;
140
+ /**
141
+ * Get all warnings generated during IR generation
142
+ */
143
+ getWarnings(): Array<{
144
+ message: string;
145
+ type: string;
146
+ }>;
147
+ private convertLayout;
148
+ private convertCell;
149
+ private convertComponent;
150
+ private expandDefinedComponent;
151
+ private cleanParams;
152
+ private sanitizeId;
153
+ }
154
+ declare function generateIR(ast: AST): IRContract;
155
+ interface IRWireframe {
156
+ id: string;
157
+ name: string;
158
+ components: IRComponent[];
159
+ layout: IRLayout;
160
+ metadata: IRMetadata;
161
+ }
162
+ interface IRComponent {
163
+ id: string;
164
+ type: string;
165
+ label?: string;
166
+ props?: Record<string, unknown>;
167
+ children?: IRComponent[];
168
+ }
169
+ interface IRLayout {
170
+ width: number;
171
+ height: number;
172
+ gridCols: number;
173
+ gridRows: number;
174
+ }
175
+ interface IRMetadata {
176
+ version: string;
177
+ created: string;
178
+ author?: string;
179
+ description?: string;
180
+ }
181
+
182
+ /**
183
+ * Layout Engine
184
+ *
185
+ * Calculates positions and dimensions for all nodes
186
+ * Supports: stack (vertical/horizontal), grid (12-column)
187
+ */
188
+ interface LayoutPosition {
189
+ x: number;
190
+ y: number;
191
+ width: number;
192
+ height: number;
193
+ }
194
+ interface LayoutResult {
195
+ [nodeId: string]: LayoutPosition;
196
+ }
197
+ declare class LayoutEngine {
198
+ private nodes;
199
+ private theme;
200
+ private result;
201
+ private viewport;
202
+ private ir;
203
+ private parentContainerTypes;
204
+ constructor(ir: IRContract);
205
+ calculate(): LayoutResult;
206
+ private calculateNode;
207
+ private calculateContainer;
208
+ private calculateStack;
209
+ private calculateContainerHeight;
210
+ private calculateGrid;
211
+ private calculateSplit;
212
+ private calculatePanel;
213
+ private calculateCard;
214
+ private calculateComponent;
215
+ private resolveSpacing;
216
+ private getComponentHeight;
217
+ private getIntrinsicComponentHeight;
218
+ private getIntrinsicComponentWidth;
219
+ private calculateChildHeight;
220
+ private calculateChildWidth;
221
+ private adjustNodeYPositions;
222
+ }
223
+ declare function calculateLayout(ir: IRContract): LayoutResult;
224
+ declare function resolveGridPosition(row: number, col: number, rowSpan?: number, colSpan?: number, gridWidth?: number, gridHeight?: number, gridCols?: number, gridRows?: number): LayoutPosition;
225
+
226
+ /**
227
+ * SVG Renderer
228
+ *
229
+ * Generates accessible, optimized SVG output from IR + Layout
230
+ */
231
+ interface SVGRenderOptions {
232
+ width?: number;
233
+ height?: number;
234
+ theme?: 'light' | 'dark';
235
+ includeLabels?: boolean;
236
+ screenName?: string;
237
+ }
238
+ interface SVGComponent {
239
+ tag: string;
240
+ attrs: Record<string, string | number>;
241
+ children?: SVGComponent[];
242
+ text?: string;
243
+ }
244
+ declare class SVGRenderer {
245
+ private ir;
246
+ private layout;
247
+ private options;
248
+ private renderTheme;
249
+ private selectedScreenName?;
250
+ private renderedNodeIds;
251
+ private colorResolver;
252
+ constructor(ir: IRContract, layout: LayoutResult, options?: SVGRenderOptions);
253
+ /**
254
+ * Get list of available screens in the project
255
+ */
256
+ getAvailableScreens(): Array<{
257
+ name: string;
258
+ id: string;
259
+ }>;
260
+ /**
261
+ * Get the currently selected or first screen
262
+ */
263
+ private getSelectedScreen;
264
+ render(): string;
265
+ private calculateContentHeight;
266
+ private renderNode;
267
+ private renderComponent;
268
+ private renderHeading;
269
+ private renderButton;
270
+ private renderInput;
271
+ private renderTopbar;
272
+ private renderPanelBorder;
273
+ private renderCardBorder;
274
+ private renderTable;
275
+ private renderChartPlaceholder;
276
+ private renderText;
277
+ private renderLabel;
278
+ private renderCode;
279
+ private renderTextarea;
280
+ private renderSelect;
281
+ private renderCheckbox;
282
+ private renderRadio;
283
+ private renderToggle;
284
+ private renderSidebar;
285
+ private renderTabs;
286
+ private renderDivider;
287
+ private renderAlert;
288
+ private renderBadge;
289
+ private renderModal;
290
+ private renderList;
291
+ private renderGenericComponent;
292
+ private renderStatCard;
293
+ private renderImage;
294
+ private renderBreadcrumbs;
295
+ private renderSidebarMenu;
296
+ private renderIcon;
297
+ private renderIconButton;
298
+ /**
299
+ * Extract SVG path/element content from a full SVG string
300
+ * Removes the outer <svg> tag but keeps the content
301
+ */
302
+ private extractSvgContent;
303
+ private resolveSpacing;
304
+ private escapeXml;
305
+ }
306
+ declare function renderToSVG(ir: IRContract, layout: LayoutResult, options?: SVGRenderOptions): string;
307
+ declare function createSVGElement(tag: string, attrs: Record<string, string | number>, children?: string[]): string;
308
+ declare function buildSVG(component: SVGComponent): string;
309
+
310
+ declare const version = "0.0.1";
311
+
312
+ export { type AST, type ASTCell, type ASTComponent, type ASTDefinedComponent, type ASTLayout, type ASTScreen, type IRComponent, type IRComponentNode, type IRContainerNode, type IRContract, IRGenerator, type IRLayout, type IRMeta, type IRMetadata, type IRNode, type IRProject, type IRScreen, type IRStyle, type IRTheme, type IRWireframe, LayoutEngine, type LayoutPosition, type LayoutResult, type ParsedComponent, type ParsedWireframe, type SVGComponent, type SVGRenderOptions, SVGRenderer, buildSVG, calculateLayout, createSVGElement, generateIR, parseWireDSL, renderToSVG, resolveGridPosition, version };
package/dist/index.d.ts ADDED
@@ -0,0 +1,312 @@
1
+ interface AST {
2
+ type: 'project';
3
+ name: string;
4
+ theme: Record<string, string>;
5
+ mocks: Record<string, string>;
6
+ colors: Record<string, string>;
7
+ definedComponents: ASTDefinedComponent[];
8
+ screens: ASTScreen[];
9
+ }
10
+ interface ASTDefinedComponent {
11
+ type: 'definedComponent';
12
+ name: string;
13
+ body: ASTLayout | ASTComponent;
14
+ }
15
+ interface ASTScreen {
16
+ type: 'screen';
17
+ name: string;
18
+ params: Record<string, string | number>;
19
+ layout: ASTLayout;
20
+ }
21
+ interface ASTLayout {
22
+ type: 'layout';
23
+ layoutType: string;
24
+ params: Record<string, string | number>;
25
+ children: (ASTComponent | ASTLayout | ASTCell)[];
26
+ }
27
+ interface ASTCell {
28
+ type: 'cell';
29
+ props: Record<string, string | number>;
30
+ children: (ASTComponent | ASTLayout)[];
31
+ }
32
+ interface ASTComponent {
33
+ type: 'component';
34
+ componentType: string;
35
+ props: Record<string, string | number>;
36
+ }
37
+ declare function parseWireDSL(input: string): AST;
38
+ interface ParsedWireframe {
39
+ name: string;
40
+ components: ParsedComponent[];
41
+ }
42
+ interface ParsedComponent {
43
+ type: string;
44
+ id: string;
45
+ children?: ParsedComponent[];
46
+ properties?: Record<string, unknown>;
47
+ }
48
+
49
+ /**
50
+ * Intermediate Representation (IR) Generator
51
+ *
52
+ * Transforms AST to normalized IR (JSON format)
53
+ * - Applies defaults from tokens
54
+ * - Generates unique IDs
55
+ * - Validates structure with Zod
56
+ */
57
+ interface IRContract {
58
+ irVersion: string;
59
+ project: IRProject;
60
+ }
61
+ interface IRProject {
62
+ id: string;
63
+ name: string;
64
+ theme: IRTheme;
65
+ mocks: Record<string, unknown>;
66
+ colors: Record<string, string>;
67
+ screens: IRScreen[];
68
+ nodes: Record<string, IRNode>;
69
+ }
70
+ interface IRTheme {
71
+ density: 'compact' | 'normal' | 'comfortable';
72
+ spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
73
+ radius: 'none' | 'sm' | 'md' | 'lg' | 'full';
74
+ stroke: 'thin' | 'normal' | 'thick';
75
+ font: 'sm' | 'base' | 'lg';
76
+ background?: string;
77
+ }
78
+ interface IRScreen {
79
+ id: string;
80
+ name: string;
81
+ viewport: {
82
+ width: number;
83
+ height: number;
84
+ };
85
+ background?: string;
86
+ root: {
87
+ ref: string;
88
+ };
89
+ }
90
+ type IRNode = IRContainerNode | IRComponentNode;
91
+ interface IRContainerNode {
92
+ id: string;
93
+ kind: 'container';
94
+ containerType: 'stack' | 'grid' | 'split' | 'panel' | 'card';
95
+ params: Record<string, string | number>;
96
+ children: Array<{
97
+ ref: string;
98
+ }>;
99
+ style: IRStyle;
100
+ meta: IRMeta;
101
+ }
102
+ interface IRComponentNode {
103
+ id: string;
104
+ kind: 'component';
105
+ componentType: string;
106
+ props: Record<string, string | number>;
107
+ style: IRStyle;
108
+ meta: IRMeta;
109
+ }
110
+ interface IRStyle {
111
+ padding?: string;
112
+ gap?: string;
113
+ align?: 'left' | 'center' | 'right' | 'justify';
114
+ justify?: 'start' | 'center' | 'end';
115
+ background?: string;
116
+ }
117
+ interface IRMeta {
118
+ source?: string;
119
+ }
120
+ declare class IRGenerator {
121
+ private idGen;
122
+ private nodes;
123
+ private definedComponents;
124
+ private definedComponentIndices;
125
+ private undefinedComponentsUsed;
126
+ private warnings;
127
+ private theme;
128
+ generate(ast: AST): IRContract;
129
+ private applyTheme;
130
+ private convertScreen;
131
+ /**
132
+ * Validates that component definitions appear before their first usage
133
+ * Generates warnings (not errors) to allow flexible code organization
134
+ */
135
+ private validateComponentOrder;
136
+ /**
137
+ * Recursively finds all component usages in a layout
138
+ */
139
+ private findComponentsInLayout;
140
+ /**
141
+ * Get all warnings generated during IR generation
142
+ */
143
+ getWarnings(): Array<{
144
+ message: string;
145
+ type: string;
146
+ }>;
147
+ private convertLayout;
148
+ private convertCell;
149
+ private convertComponent;
150
+ private expandDefinedComponent;
151
+ private cleanParams;
152
+ private sanitizeId;
153
+ }
154
+ declare function generateIR(ast: AST): IRContract;
155
+ interface IRWireframe {
156
+ id: string;
157
+ name: string;
158
+ components: IRComponent[];
159
+ layout: IRLayout;
160
+ metadata: IRMetadata;
161
+ }
162
+ interface IRComponent {
163
+ id: string;
164
+ type: string;
165
+ label?: string;
166
+ props?: Record<string, unknown>;
167
+ children?: IRComponent[];
168
+ }
169
+ interface IRLayout {
170
+ width: number;
171
+ height: number;
172
+ gridCols: number;
173
+ gridRows: number;
174
+ }
175
+ interface IRMetadata {
176
+ version: string;
177
+ created: string;
178
+ author?: string;
179
+ description?: string;
180
+ }
181
+
182
+ /**
183
+ * Layout Engine
184
+ *
185
+ * Calculates positions and dimensions for all nodes
186
+ * Supports: stack (vertical/horizontal), grid (12-column)
187
+ */
188
+ interface LayoutPosition {
189
+ x: number;
190
+ y: number;
191
+ width: number;
192
+ height: number;
193
+ }
194
+ interface LayoutResult {
195
+ [nodeId: string]: LayoutPosition;
196
+ }
197
+ declare class LayoutEngine {
198
+ private nodes;
199
+ private theme;
200
+ private result;
201
+ private viewport;
202
+ private ir;
203
+ private parentContainerTypes;
204
+ constructor(ir: IRContract);
205
+ calculate(): LayoutResult;
206
+ private calculateNode;
207
+ private calculateContainer;
208
+ private calculateStack;
209
+ private calculateContainerHeight;
210
+ private calculateGrid;
211
+ private calculateSplit;
212
+ private calculatePanel;
213
+ private calculateCard;
214
+ private calculateComponent;
215
+ private resolveSpacing;
216
+ private getComponentHeight;
217
+ private getIntrinsicComponentHeight;
218
+ private getIntrinsicComponentWidth;
219
+ private calculateChildHeight;
220
+ private calculateChildWidth;
221
+ private adjustNodeYPositions;
222
+ }
223
+ declare function calculateLayout(ir: IRContract): LayoutResult;
224
+ declare function resolveGridPosition(row: number, col: number, rowSpan?: number, colSpan?: number, gridWidth?: number, gridHeight?: number, gridCols?: number, gridRows?: number): LayoutPosition;
225
+
226
+ /**
227
+ * SVG Renderer
228
+ *
229
+ * Generates accessible, optimized SVG output from IR + Layout
230
+ */
231
+ interface SVGRenderOptions {
232
+ width?: number;
233
+ height?: number;
234
+ theme?: 'light' | 'dark';
235
+ includeLabels?: boolean;
236
+ screenName?: string;
237
+ }
238
+ interface SVGComponent {
239
+ tag: string;
240
+ attrs: Record<string, string | number>;
241
+ children?: SVGComponent[];
242
+ text?: string;
243
+ }
244
+ declare class SVGRenderer {
245
+ private ir;
246
+ private layout;
247
+ private options;
248
+ private renderTheme;
249
+ private selectedScreenName?;
250
+ private renderedNodeIds;
251
+ private colorResolver;
252
+ constructor(ir: IRContract, layout: LayoutResult, options?: SVGRenderOptions);
253
+ /**
254
+ * Get list of available screens in the project
255
+ */
256
+ getAvailableScreens(): Array<{
257
+ name: string;
258
+ id: string;
259
+ }>;
260
+ /**
261
+ * Get the currently selected or first screen
262
+ */
263
+ private getSelectedScreen;
264
+ render(): string;
265
+ private calculateContentHeight;
266
+ private renderNode;
267
+ private renderComponent;
268
+ private renderHeading;
269
+ private renderButton;
270
+ private renderInput;
271
+ private renderTopbar;
272
+ private renderPanelBorder;
273
+ private renderCardBorder;
274
+ private renderTable;
275
+ private renderChartPlaceholder;
276
+ private renderText;
277
+ private renderLabel;
278
+ private renderCode;
279
+ private renderTextarea;
280
+ private renderSelect;
281
+ private renderCheckbox;
282
+ private renderRadio;
283
+ private renderToggle;
284
+ private renderSidebar;
285
+ private renderTabs;
286
+ private renderDivider;
287
+ private renderAlert;
288
+ private renderBadge;
289
+ private renderModal;
290
+ private renderList;
291
+ private renderGenericComponent;
292
+ private renderStatCard;
293
+ private renderImage;
294
+ private renderBreadcrumbs;
295
+ private renderSidebarMenu;
296
+ private renderIcon;
297
+ private renderIconButton;
298
+ /**
299
+ * Extract SVG path/element content from a full SVG string
300
+ * Removes the outer <svg> tag but keeps the content
301
+ */
302
+ private extractSvgContent;
303
+ private resolveSpacing;
304
+ private escapeXml;
305
+ }
306
+ declare function renderToSVG(ir: IRContract, layout: LayoutResult, options?: SVGRenderOptions): string;
307
+ declare function createSVGElement(tag: string, attrs: Record<string, string | number>, children?: string[]): string;
308
+ declare function buildSVG(component: SVGComponent): string;
309
+
310
+ declare const version = "0.0.1";
311
+
312
+ export { type AST, type ASTCell, type ASTComponent, type ASTDefinedComponent, type ASTLayout, type ASTScreen, type IRComponent, type IRComponentNode, type IRContainerNode, type IRContract, IRGenerator, type IRLayout, type IRMeta, type IRMetadata, type IRNode, type IRProject, type IRScreen, type IRStyle, type IRTheme, type IRWireframe, LayoutEngine, type LayoutPosition, type LayoutResult, type ParsedComponent, type ParsedWireframe, type SVGComponent, type SVGRenderOptions, SVGRenderer, buildSVG, calculateLayout, createSVGElement, generateIR, parseWireDSL, renderToSVG, resolveGridPosition, version };