@wire-dsl/engine 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -34,7 +34,7 @@ interface PropertySourceMap {
34
34
  /**
35
35
  * Types of nodes in Wire DSL
36
36
  */
37
- type SourceMapNodeType = 'project' | 'screen' | 'layout' | 'component' | 'component-definition' | 'cell' | 'theme' | 'mocks' | 'colors';
37
+ type SourceMapNodeType = 'project' | 'screen' | 'layout' | 'component' | 'component-definition' | 'cell' | 'style' | 'mocks' | 'colors';
38
38
  /**
39
39
  * Main SourceMap entry - represents one node in the AST
40
40
  */
@@ -97,7 +97,7 @@ interface CapturedTokens {
97
97
  interface AST {
98
98
  type: 'project';
99
99
  name: string;
100
- theme: Record<string, string>;
100
+ style: Record<string, string>;
101
101
  mocks: Record<string, string>;
102
102
  colors: Record<string, string>;
103
103
  definedComponents: ASTDefinedComponent[];
@@ -203,19 +203,21 @@ interface IRContract {
203
203
  interface IRProject {
204
204
  id: string;
205
205
  name: string;
206
- theme: IRTheme;
206
+ style: IRStyle;
207
207
  mocks: Record<string, unknown>;
208
208
  colors: Record<string, string>;
209
209
  screens: IRScreen[];
210
210
  nodes: Record<string, IRNode>;
211
211
  }
212
- interface IRTheme {
212
+ interface IRStyle {
213
213
  density: 'compact' | 'normal' | 'comfortable';
214
214
  spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
215
215
  radius: 'none' | 'sm' | 'md' | 'lg' | 'full';
216
216
  stroke: 'thin' | 'normal' | 'thick';
217
217
  font: 'sm' | 'base' | 'lg';
218
218
  background?: string;
219
+ theme?: string;
220
+ device?: string;
219
221
  }
220
222
  interface IRScreen {
221
223
  id: string;
@@ -238,7 +240,7 @@ interface IRContainerNode {
238
240
  children: Array<{
239
241
  ref: string;
240
242
  }>;
241
- style: IRStyle;
243
+ style: IRNodeStyle;
242
244
  meta: IRMeta;
243
245
  }
244
246
  interface IRComponentNode {
@@ -246,10 +248,10 @@ interface IRComponentNode {
246
248
  kind: 'component';
247
249
  componentType: string;
248
250
  props: Record<string, string | number>;
249
- style: IRStyle;
251
+ style: IRNodeStyle;
250
252
  meta: IRMeta;
251
253
  }
252
- interface IRStyle {
254
+ interface IRNodeStyle {
253
255
  padding?: string;
254
256
  gap?: string;
255
257
  align?: 'left' | 'center' | 'right' | 'justify';
@@ -267,9 +269,9 @@ declare class IRGenerator {
267
269
  private definedComponentIndices;
268
270
  private undefinedComponentsUsed;
269
271
  private warnings;
270
- private theme;
272
+ private style;
271
273
  generate(ast: AST): IRContract;
272
- private applyTheme;
274
+ private applyStyle;
273
275
  private convertScreen;
274
276
  /**
275
277
  * Validates that component definitions appear before their first usage
@@ -322,6 +324,44 @@ interface IRMetadata {
322
324
  description?: string;
323
325
  }
324
326
 
327
+ /**
328
+ * Device viewport presets for multi-device wireframe rendering
329
+ *
330
+ * Defines standard viewport widths and minimum heights for different device
331
+ * categories. Final render height remains dynamic and grows with content.
332
+ */
333
+ interface DevicePreset {
334
+ name: string;
335
+ width: number;
336
+ minHeight: number;
337
+ category: 'mobile' | 'desktop' | 'tablet' | 'print';
338
+ description: string;
339
+ }
340
+ /**
341
+ * Standard device viewport presets
342
+ *
343
+ * `minHeight` is used as the baseline viewport height. Renderers still
344
+ * expand dynamically when content exceeds this value.
345
+ */
346
+ declare const DEVICE_PRESETS: Record<string, DevicePreset>;
347
+ /**
348
+ * Resolve device preset name to viewport dimensions
349
+ *
350
+ * @param device - Device preset name (case-insensitive)
351
+ * @returns Viewport width and minimum height in pixels
352
+ */
353
+ declare function resolveDevicePreset(device: string): {
354
+ width: number;
355
+ minHeight: number;
356
+ };
357
+ /**
358
+ * Check if a device preset name is valid
359
+ *
360
+ * @param device - Device preset name to validate
361
+ * @returns True if device preset exists
362
+ */
363
+ declare function isValidDevice(device: string): boolean;
364
+
325
365
  /**
326
366
  * Layout Engine
327
367
  *
@@ -339,7 +379,7 @@ interface LayoutResult {
339
379
  }
340
380
  declare class LayoutEngine {
341
381
  private nodes;
342
- private theme;
382
+ private style;
343
383
  private result;
344
384
  private viewport;
345
385
  private ir;
@@ -356,16 +396,120 @@ declare class LayoutEngine {
356
396
  private calculateCard;
357
397
  private calculateComponent;
358
398
  private resolveSpacing;
399
+ private getSeparateSize;
359
400
  private getComponentHeight;
401
+ private getTextMetricsForDensity;
402
+ private getButtonMetricsForDensity;
403
+ private getHeadingMetricsForDensity;
404
+ private wrapTextToLines;
360
405
  private getIntrinsicComponentHeight;
406
+ private getControlLabelOffset;
361
407
  private getIntrinsicComponentWidth;
362
408
  private calculateChildHeight;
363
409
  private calculateChildWidth;
410
+ private estimateTextWidth;
411
+ private parseBooleanProp;
364
412
  private adjustNodeYPositions;
365
413
  }
366
414
  declare function calculateLayout(ir: IRContract): LayoutResult;
367
415
  declare function resolveGridPosition(row: number, col: number, rowSpan?: number, colSpan?: number, gridWidth?: number, gridHeight?: number, gridCols?: number, gridRows?: number): LayoutPosition;
368
416
 
417
+ /**
418
+ * Color Resolver
419
+ *
420
+ * Resolves color references from project colors, named colors, or hex values
421
+ */
422
+ declare class ColorResolver {
423
+ private customColors;
424
+ private namedColors;
425
+ /**
426
+ * Set custom colors from project definition
427
+ */
428
+ setCustomColors(colors: Record<string, string>): void;
429
+ /**
430
+ * Check if a color key/reference is resolvable.
431
+ */
432
+ hasColor(colorRef: string): boolean;
433
+ /**
434
+ * Resolve a color reference to a hex value
435
+ * Priority: custom colors > named colors > hex validation > default
436
+ */
437
+ resolveColor(colorRef: string, defaultColor?: string): string;
438
+ private resolveColorInternal;
439
+ /**
440
+ * Validate hex color (6-character hex code)
441
+ */
442
+ private isValidHex;
443
+ /**
444
+ * Validate and return hex, or undefined if invalid
445
+ */
446
+ private validateHex;
447
+ }
448
+
449
+ /**
450
+ * Design Tokens System
451
+ *
452
+ * Visual properties organized by density levels.
453
+ * These tokens are read from ir.project.style (density, spacing, radius, stroke, font)
454
+ * and used by all renderers to maintain consistent visual styling.
455
+ */
456
+ interface DesignTokens {
457
+ spacing: {
458
+ xs: number;
459
+ sm: number;
460
+ md: number;
461
+ lg: number;
462
+ xl: number;
463
+ };
464
+ button: {
465
+ paddingX: number;
466
+ paddingY: number;
467
+ radius: number;
468
+ fontSize: number;
469
+ fontWeight: number;
470
+ };
471
+ input: {
472
+ paddingX: number;
473
+ paddingY: number;
474
+ radius: number;
475
+ fontSize: number;
476
+ };
477
+ card: {
478
+ padding: number;
479
+ radius: number;
480
+ strokeWidth: number;
481
+ };
482
+ heading: {
483
+ fontSize: number;
484
+ fontWeight: number;
485
+ marginBottom: number;
486
+ };
487
+ text: {
488
+ fontSize: number;
489
+ lineHeight: number;
490
+ };
491
+ badge: {
492
+ paddingX: number;
493
+ paddingY: number;
494
+ radius: number | 'pill';
495
+ fontSize: number;
496
+ };
497
+ table: {
498
+ cellPaddingX: number;
499
+ cellPaddingY: number;
500
+ headerFontWeight: number;
501
+ borderWidth: number;
502
+ };
503
+ }
504
+ /**
505
+ * Token sets for each density level
506
+ */
507
+ declare const DENSITY_TOKENS: Record<'compact' | 'normal' | 'comfortable', DesignTokens>;
508
+ /**
509
+ * Resolve design tokens based on IRStyle
510
+ */
511
+ declare function resolveTokens(style: any): DesignTokens;
512
+
369
513
  /**
370
514
  * SVG Renderer
371
515
  *
@@ -384,14 +528,41 @@ interface SVGComponent {
384
528
  children?: SVGComponent[];
385
529
  text?: string;
386
530
  }
531
+ declare const THEMES: {
532
+ light: {
533
+ bg: string;
534
+ cardBg: string;
535
+ border: string;
536
+ text: string;
537
+ textMuted: string;
538
+ primary: string;
539
+ primaryHover: string;
540
+ primaryLight: string;
541
+ };
542
+ dark: {
543
+ bg: string;
544
+ cardBg: string;
545
+ border: string;
546
+ text: string;
547
+ textMuted: string;
548
+ primary: string;
549
+ primaryHover: string;
550
+ primaryLight: string;
551
+ };
552
+ };
387
553
  declare class SVGRenderer {
388
554
  private ir;
389
555
  private layout;
390
- private options;
391
- private renderTheme;
556
+ protected options: Required<Omit<SVGRenderOptions, 'screenName'>> & {
557
+ screenName?: string;
558
+ };
559
+ protected renderTheme: typeof THEMES.light;
560
+ protected tokens: DesignTokens;
392
561
  private selectedScreenName?;
393
- private renderedNodeIds;
394
- private colorResolver;
562
+ protected renderedNodeIds: Set<string>;
563
+ protected colorResolver: ColorResolver;
564
+ protected fontFamily: string;
565
+ private parentContainerByChildId;
395
566
  constructor(ir: IRContract, layout: LayoutResult, options?: SVGRenderOptions);
396
567
  /**
397
568
  * Get list of available screens in the project
@@ -403,58 +574,391 @@ declare class SVGRenderer {
403
574
  /**
404
575
  * Get the currently selected or first screen
405
576
  */
406
- private getSelectedScreen;
577
+ protected getSelectedScreen(): {
578
+ screen: any;
579
+ name: string;
580
+ };
407
581
  render(): string;
408
- private calculateContentHeight;
409
- private renderNode;
410
- private renderComponent;
411
- private renderHeading;
412
- private renderButton;
413
- private renderInput;
414
- private renderTopbar;
415
- private renderPanelBorder;
416
- private renderCardBorder;
417
- private renderTable;
418
- private renderChartPlaceholder;
419
- private renderText;
420
- private renderLabel;
421
- private renderCode;
422
- private renderTextarea;
423
- private renderSelect;
424
- private renderCheckbox;
425
- private renderRadio;
426
- private renderToggle;
427
- private renderSidebar;
428
- private renderTabs;
429
- private renderDivider;
430
- private renderAlert;
431
- private renderBadge;
432
- private renderModal;
433
- private renderList;
434
- private renderGenericComponent;
435
- private renderStatCard;
436
- private renderImage;
437
- private renderBreadcrumbs;
438
- private renderSidebarMenu;
439
- private renderIcon;
440
- private renderIconButton;
582
+ protected calculateContentHeight(): number;
583
+ protected renderNode(nodeId: string, output: string[]): void;
584
+ protected renderComponent(node: IRComponentNode, pos: {
585
+ x: number;
586
+ y: number;
587
+ width: number;
588
+ height: number;
589
+ }): string;
590
+ protected renderHeading(node: IRComponentNode, pos: any): string;
591
+ protected renderButton(node: IRComponentNode, pos: any): string;
592
+ protected renderLink(node: IRComponentNode, pos: any): string;
593
+ protected renderInput(node: IRComponentNode, pos: any): string;
594
+ protected renderTopbar(node: IRComponentNode, pos: any): string;
595
+ protected renderPanelBorder(node: IRNode, pos: any, output: string[]): void;
596
+ protected renderCardBorder(node: IRNode, pos: any, output: string[]): void;
597
+ protected renderTable(node: IRComponentNode, pos: any): string;
598
+ protected renderChartPlaceholder(node: IRComponentNode, pos: any): string;
599
+ protected renderText(node: IRComponentNode, pos: any): string;
600
+ protected renderLabel(node: IRComponentNode, pos: any): string;
601
+ protected renderCode(node: IRComponentNode, pos: any): string;
602
+ protected renderTextarea(node: IRComponentNode, pos: any): string;
603
+ protected renderSelect(node: IRComponentNode, pos: any): string;
604
+ protected renderCheckbox(node: IRComponentNode, pos: any): string;
605
+ protected renderRadio(node: IRComponentNode, pos: any): string;
606
+ protected renderToggle(node: IRComponentNode, pos: any): string;
607
+ protected renderSidebar(node: IRComponentNode, pos: any): string;
608
+ protected renderTabs(node: IRComponentNode, pos: any): string;
609
+ protected renderDivider(node: IRComponentNode, pos: any): string;
610
+ protected renderSeparate(node: IRComponentNode, _pos: any): string;
611
+ protected renderAlert(node: IRComponentNode, pos: any): string;
612
+ protected renderBadge(node: IRComponentNode, pos: any): string;
613
+ protected renderModal(node: IRComponentNode, pos: any): string;
614
+ protected renderList(node: IRComponentNode, pos: any): string;
615
+ protected renderGenericComponent(node: IRComponentNode, pos: any): string;
616
+ protected renderStatCard(node: IRComponentNode, pos: any): string;
617
+ protected renderImage(node: IRComponentNode, pos: any): string;
618
+ protected renderBreadcrumbs(node: IRComponentNode, pos: any): string;
619
+ protected renderSidebarMenu(node: IRComponentNode, pos: any): string;
620
+ protected renderIcon(node: IRComponentNode, pos: any): string;
621
+ protected renderIconButton(node: IRComponentNode, pos: any): string;
441
622
  /**
442
623
  * Extract SVG path/element content from a full SVG string
443
624
  * Removes the outer <svg> tag but keeps the content
444
625
  */
445
- private extractSvgContent;
446
- private resolveSpacing;
447
- private escapeXml;
626
+ protected extractSvgContent(svgString: string): string;
627
+ protected resolveVariantColor(variant: string, fallback: string): string;
628
+ protected resolveAccentColor(): string;
629
+ protected resolveControlColor(): string;
630
+ protected resolveChartColor(): string;
631
+ protected getSemanticVariantColor(variant: string): string | undefined;
632
+ protected hexToRgba(hex: string, alpha: number): string;
633
+ protected getIconSize(size?: string): number;
634
+ protected getIconButtonSize(size?: string): number;
635
+ protected resolveSpacing(spacing?: string): number;
636
+ protected wrapTextToLines(text: string, maxWidth: number, fontSize: number): string[];
637
+ protected clampControlWidth(idealWidth: number, availableWidth: number): number;
638
+ protected truncateTextToWidth(text: string, maxWidth: number, fontSize: number): string;
639
+ protected estimateTextWidth(text: string, fontSize: number): number;
640
+ protected generateUpwardTrendValues(count: number, start: number, end: number): number[];
641
+ protected getControlLabelOffset(label: string): number;
642
+ protected getControlLabelBaselineY(y: number): number;
643
+ protected getHeadingTypography(node: IRComponentNode): {
644
+ fontSize: number;
645
+ fontWeight: number;
646
+ lineHeight: number;
647
+ };
648
+ protected getHeadingFirstLineY(node: IRComponentNode, pos: {
649
+ y: number;
650
+ height: number;
651
+ }, fontSize: number, lineHeightPx: number, lineCount: number): number;
652
+ protected calculateTopbarLayout(node: IRComponentNode, pos: {
653
+ x: number;
654
+ y: number;
655
+ width: number;
656
+ height: number;
657
+ }, title: string, subtitle: string, actions: string, user: string): {
658
+ hasSubtitle: boolean;
659
+ titleY: number;
660
+ subtitleY: number;
661
+ textX: number;
662
+ titleMaxWidth: number;
663
+ visibleTitle: string;
664
+ visibleSubtitle: string;
665
+ leftIcon: null | {
666
+ badgeX: number;
667
+ badgeY: number;
668
+ badgeSize: number;
669
+ badgeRadius: number;
670
+ iconX: number;
671
+ iconY: number;
672
+ iconSize: number;
673
+ iconSvg: string;
674
+ };
675
+ actions: Array<{
676
+ x: number;
677
+ y: number;
678
+ width: number;
679
+ height: number;
680
+ label: string;
681
+ }>;
682
+ userBadge: null | {
683
+ x: number;
684
+ y: number;
685
+ width: number;
686
+ height: number;
687
+ label: string;
688
+ };
689
+ avatar: null | {
690
+ cx: number;
691
+ cy: number;
692
+ r: number;
693
+ };
694
+ };
695
+ protected parseBooleanProp(value: unknown, fallback?: boolean): boolean;
696
+ protected shouldButtonFillAvailableWidth(node: IRComponentNode): boolean;
697
+ private buildParentContainerIndex;
698
+ protected escapeXml(text: string): string;
448
699
  /**
449
700
  * Get data-node-id attribute string for SVG elements
450
701
  * Enables bidirectional selection between code and canvas
451
702
  */
452
- private getDataNodeId;
703
+ protected getDataNodeId(node: IRComponentNode | IRContainerNode): string;
453
704
  }
454
705
  declare function renderToSVG(ir: IRContract, layout: LayoutResult, options?: SVGRenderOptions): string;
455
706
  declare function createSVGElement(tag: string, attrs: Record<string, string | number>, children?: string[]): string;
456
707
  declare function buildSVG(component: SVGComponent): string;
457
708
 
709
+ /**
710
+ * Skeleton SVG Renderer
711
+ *
712
+ * Renders wireframes in a skeleton/loading state style:
713
+ * - Text/Heading: Gray rectangular blocks instead of text
714
+ * - Buttons: Shape outline only (no text, no fill)
715
+ * - Icons: Hidden completely
716
+ * - All text content: Gray blocks instead of actual text
717
+ *
718
+ * Used for:
719
+ * - Loading states
720
+ * - Content placeholders
721
+ * - Wireframe presentations without actual content
722
+ */
723
+
724
+ declare class SkeletonSVGRenderer extends SVGRenderer {
725
+ /**
726
+ * Render button with same appearance as standard but without text
727
+ */
728
+ protected renderButton(node: IRComponentNode, pos: any): string;
729
+ /**
730
+ * Render link as placeholder block + underline (no text)
731
+ */
732
+ protected renderLink(node: IRComponentNode, pos: any): string;
733
+ /**
734
+ * Render heading as gray block
735
+ */
736
+ protected renderHeading(node: IRComponentNode, pos: any): string;
737
+ /**
738
+ * Render text as gray block
739
+ */
740
+ protected renderText(node: IRComponentNode, pos: any): string;
741
+ /**
742
+ * Render label as gray block
743
+ */
744
+ protected renderLabel(node: IRComponentNode, pos: any): string;
745
+ /**
746
+ * Render badge as shape only (no text)
747
+ */
748
+ protected renderBadge(node: IRComponentNode, pos: any): string;
749
+ /**
750
+ * Render alert as shape with gray block instead of message
751
+ */
752
+ protected renderAlert(node: IRComponentNode, pos: any): string;
753
+ /**
754
+ * Render input with gray block for placeholder text
755
+ */
756
+ protected renderInput(node: IRComponentNode, pos: any): string;
757
+ /**
758
+ * Render textarea with gray block for placeholder text
759
+ */
760
+ protected renderTextarea(node: IRComponentNode, pos: any): string;
761
+ /**
762
+ * Render select as shape only (no placeholder text)
763
+ */
764
+ protected renderSelect(node: IRComponentNode, pos: any): string;
765
+ /**
766
+ * Render checkbox as shape only (no label text)
767
+ */
768
+ protected renderCheckbox(node: IRComponentNode, pos: any): string;
769
+ /**
770
+ * Render radio as shape only (no label text)
771
+ */
772
+ protected renderRadio(node: IRComponentNode, pos: any): string;
773
+ /**
774
+ * Render toggle as shape only (no label text)
775
+ */
776
+ protected renderToggle(node: IRComponentNode, pos: any): string;
777
+ /**
778
+ * Render code as shape with gray block instead of code text
779
+ */
780
+ protected renderCode(node: IRComponentNode, pos: any): string;
781
+ /**
782
+ * Render table with gray blocks instead of text
783
+ */
784
+ protected renderTable(node: IRComponentNode, pos: any): string;
785
+ /**
786
+ * Render topbar with gray blocks instead of text
787
+ */
788
+ protected renderTopbar(node: IRComponentNode, pos: any): string;
789
+ /**
790
+ * Render StatCard with gray blocks instead of values
791
+ */
792
+ protected renderStatCard(node: IRComponentNode, pos: any): string;
793
+ /**
794
+ * Render icon as gray square instead of hiding it
795
+ */
796
+ protected renderIcon(node: IRComponentNode, pos: any): string;
797
+ /**
798
+ * Render IconButton with same appearance as standard but without icon
799
+ */
800
+ protected renderIconButton(node: IRComponentNode, pos: any): string;
801
+ /**
802
+ * Render Sidebar with gray blocks instead of text
803
+ */
804
+ protected renderSidebar(node: IRComponentNode, pos: any): string;
805
+ /**
806
+ * Render SidebarMenu with gray blocks instead of text and no icons
807
+ */
808
+ protected renderSidebarMenu(node: IRComponentNode, pos: any): string;
809
+ /**
810
+ * Private helper: Render text as gray block
811
+ */
812
+ private renderTextBlock;
813
+ private renderWrappedLineBlocks;
814
+ }
815
+
816
+ /**
817
+ * Sketch SVG Renderer
818
+ *
819
+ * Renders wireframes in a hand-drawn/sketch style:
820
+ * - Thicker borders with sketch appearance
821
+ * - For variant elements (Button, Badge): colored border instead of fill
822
+ * - Keeps text and icons visible
823
+ * - Traditional wireframe look
824
+ *
825
+ * Used for:
826
+ * - Low-fidelity wireframes
827
+ * - Traditional hand-drawn wireframe presentations
828
+ * - Early design mockups
829
+ */
830
+
831
+ declare class SketchSVGRenderer extends SVGRenderer {
832
+ /**
833
+ * Override render to add sketch filter definitions
834
+ */
835
+ render(): string;
836
+ /**
837
+ * Render button with colored border instead of fill
838
+ */
839
+ protected renderButton(node: IRComponentNode, pos: any): string;
840
+ /**
841
+ * Render badge with colored border instead of fill
842
+ */
843
+ protected renderBadge(node: IRComponentNode, pos: any): string;
844
+ /**
845
+ * Render IconButton with colored border instead of fill
846
+ */
847
+ protected renderIconButton(node: IRComponentNode, pos: any): string;
848
+ /**
849
+ * Render alert with colored border
850
+ */
851
+ protected renderAlert(node: IRComponentNode, pos: any): string;
852
+ /**
853
+ * Render input with thicker border
854
+ */
855
+ protected renderInput(node: IRComponentNode, pos: any): string;
856
+ /**
857
+ * Render textarea with thicker border
858
+ */
859
+ protected renderTextarea(node: IRComponentNode, pos: any): string;
860
+ /**
861
+ * Render card with thicker border and sketch filter
862
+ */
863
+ protected renderCard(node: IRComponentNode, pos: any): string;
864
+ /**
865
+ * Render panel with thicker border and sketch filter
866
+ */
867
+ protected renderPanel(node: IRComponentNode, pos: any): string;
868
+ /**
869
+ * Render heading with sketch filter and Comic Sans
870
+ */
871
+ protected renderHeading(node: IRComponentNode, pos: any): string;
872
+ /**
873
+ * Render topbar with sketch filter and Comic Sans
874
+ */
875
+ protected renderTopbar(node: IRComponentNode, pos: any): string;
876
+ /**
877
+ * Render table with sketch filter and Comic Sans
878
+ */
879
+ protected renderTable(node: IRComponentNode, pos: any): string;
880
+ /**
881
+ * Render text with Comic Sans
882
+ */
883
+ protected renderText(node: IRComponentNode, pos: any): string;
884
+ /**
885
+ * Render label with Comic Sans
886
+ */
887
+ protected renderLabel(node: IRComponentNode, pos: any): string;
888
+ /**
889
+ * Render code with sketch filter and Comic Sans
890
+ */
891
+ protected renderCode(node: IRComponentNode, pos: any): string;
892
+ /**
893
+ * Render select with sketch filter and Comic Sans
894
+ */
895
+ protected renderSelect(node: IRComponentNode, pos: any): string;
896
+ /**
897
+ * Render checkbox with sketch filter and Comic Sans
898
+ */
899
+ protected renderCheckbox(node: IRComponentNode, pos: any): string;
900
+ /**
901
+ * Render radio with sketch filter and Comic Sans
902
+ */
903
+ protected renderRadio(node: IRComponentNode, pos: any): string;
904
+ /**
905
+ * Render toggle with sketch filter and Comic Sans
906
+ */
907
+ protected renderToggle(node: IRComponentNode, pos: any): string;
908
+ /**
909
+ * Render sidebar with sketch filter and Comic Sans
910
+ */
911
+ protected renderSidebar(node: IRComponentNode, pos: any): string;
912
+ /**
913
+ * Render tabs with sketch filter and Comic Sans
914
+ */
915
+ protected renderTabs(node: IRComponentNode, pos: any): string;
916
+ /**
917
+ * Render divider with sketch filter
918
+ */
919
+ protected renderDivider(node: IRComponentNode, pos: any): string;
920
+ /**
921
+ * Render modal with sketch filter and Comic Sans
922
+ */
923
+ protected renderModal(node: IRComponentNode, pos: any): string;
924
+ /**
925
+ * Render list with sketch filter and Comic Sans
926
+ */
927
+ protected renderList(node: IRComponentNode, pos: any): string;
928
+ /**
929
+ * Render generic component with sketch filter and Comic Sans
930
+ */
931
+ protected renderGenericComponent(node: IRComponentNode, pos: any): string;
932
+ /**
933
+ * Render stat card with sketch filter and Comic Sans
934
+ */
935
+ protected renderStatCard(node: IRComponentNode, pos: any): string;
936
+ /**
937
+ * Render image with sketch filter
938
+ */
939
+ protected renderImage(node: IRComponentNode, pos: any): string;
940
+ /**
941
+ * Render breadcrumbs with Comic Sans
942
+ */
943
+ protected renderBreadcrumbs(node: IRComponentNode, pos: any): string;
944
+ /**
945
+ * Render sidebar menu with sketch filter and Comic Sans
946
+ */
947
+ protected renderSidebarMenu(node: IRComponentNode, pos: any): string;
948
+ /**
949
+ * Render icon (same as base, icons don't need filter)
950
+ */
951
+ protected renderIcon(node: IRComponentNode, pos: any): string;
952
+ /**
953
+ * Render chart placeholder with sketch filter and Comic Sans
954
+ */
955
+ protected renderChartPlaceholder(node: IRComponentNode, pos: any): string;
956
+ /**
957
+ * Helper method to get icon SVG
958
+ */
959
+ private getIconSvg;
960
+ }
961
+
458
962
  /**
459
963
  * Content-based hash generation for stable NodeIds
460
964
  *
@@ -783,4 +1287,4 @@ declare class SourceMapResolver {
783
1287
 
784
1288
  declare const version = "0.0.1";
785
1289
 
786
- export { type AST, type ASTCell, type ASTComponent, type ASTDefinedComponent, type ASTLayout, type ASTScreen, type CapturedTokens, type CodeRange, 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, type InsertionPoint, LayoutEngine, type LayoutPosition, type LayoutResult, type ParseError, type ParseResult, type ParsedComponent, type ParsedWireframe, type Position, type PositionQueryResult, type PropertySourceMap, type SVGComponent, type SVGRenderOptions, SVGRenderer, SourceMapBuilder, type SourceMapEntry, type SourceMapNodeType, SourceMapResolver, buildSVG, calculateLayout, createSVGElement, generateIR, generateStableNodeId, getTypeFromNodeId, isValidNodeId, parseWireDSL, parseWireDSLWithSourceMap, renderToSVG, resolveGridPosition, version };
1290
+ export { type AST, type ASTCell, type ASTComponent, type ASTDefinedComponent, type ASTLayout, type ASTScreen, type CapturedTokens, type CodeRange, DENSITY_TOKENS, DEVICE_PRESETS, type DesignTokens, type DevicePreset, type IRComponent, type IRComponentNode, type IRContainerNode, type IRContract, IRGenerator, type IRLayout, type IRMeta, type IRMetadata, type IRNode, type IRNodeStyle, type IRProject, type IRScreen, type IRStyle, type IRWireframe, type InsertionPoint, LayoutEngine, type LayoutPosition, type LayoutResult, type ParseError, type ParseResult, type ParsedComponent, type ParsedWireframe, type Position, type PositionQueryResult, type PropertySourceMap, type SVGComponent, type SVGRenderOptions, SVGRenderer, SkeletonSVGRenderer, SketchSVGRenderer, SourceMapBuilder, type SourceMapEntry, type SourceMapNodeType, SourceMapResolver, buildSVG, calculateLayout, createSVGElement, generateIR, generateStableNodeId, getTypeFromNodeId, isValidDevice, isValidNodeId, parseWireDSL, parseWireDSLWithSourceMap, renderToSVG, resolveDevicePreset, resolveGridPosition, resolveTokens, version };