@wire-dsl/engine 0.2.4 → 0.4.0

package/dist/index.d.cts

@@ -34,7 +34,7 @@ interface PropertySourceMap {
 /**
  * Types of nodes in Wire DSL
  */
-type SourceMapNodeType = 'project' | 'screen' | 'layout' | 'component' | 'component-definition' | 'cell' | 'style' | 'mocks' | 'colors';
+type SourceMapNodeType = 'project' | 'screen' | 'layout' | 'component' | 'component-definition' | 'layout-definition' | 'cell' | 'style' | 'mocks' | 'colors';
 /**
  * Main SourceMap entry - represents one node in the AST
  */
@@ -121,6 +121,7 @@ interface AST {
     mocks: Record<string, string>;
     colors: Record<string, string>;
     definedComponents: ASTDefinedComponent[];
+    definedLayouts: ASTDefinedLayout[];
     screens: ASTScreen[];
     _meta?: {
         nodeId: string;
@@ -172,6 +173,14 @@ interface ParseWireDSLWithSourceMapOptions {
     throwOnError?: boolean;
     includeSemanticWarnings?: boolean;
 }
+interface ASTDefinedLayout {
+    type: 'definedLayout';
+    name: string;
+    body: ASTLayout;
+    _meta?: {
+        nodeId: string;
+    };
+}
 declare function parseWireDSL(input: string): AST;
 /**
  * Parse Wire DSL with SourceMap generation
@@ -293,9 +302,11 @@ declare class IRGenerator {
     private idGen;
     private nodes;
     private definedComponents;
+    private definedLayouts;
     private definedComponentIndices;
     private undefinedComponentsUsed;
     private warnings;
+    private errors;
     private style;
     generate(ast: AST): IRContract;
     private applyStyle;
@@ -320,6 +331,15 @@ declare class IRGenerator {
     private convertCell;
     private convertComponent;
     private expandDefinedComponent;
+    private expandDefinedLayout;
+    private resolveChildrenSlot;
+    private convertASTNode;
+    private resolveLayoutParams;
+    private normalizeSplitParams;
+    private resolveComponentProps;
+    private resolveBindingValue;
+    private isBindingTargetRequired;
+    private reportUnusedArguments;
     private cleanParams;
     private sanitizeId;
 }
@@ -578,7 +598,7 @@ declare const THEMES: {
     };
 };
 declare class SVGRenderer {
-    private ir;
+    protected ir: IRContract;
     private layout;
     protected options: Required<Omit<SVGRenderOptions, 'screenName'>> & {
         screenName?: string;
@@ -621,6 +641,7 @@ declare class SVGRenderer {
     protected renderTopbar(node: IRComponentNode, pos: any): string;
     protected renderPanelBorder(node: IRNode, pos: any, output: string[]): void;
     protected renderCardBorder(node: IRNode, pos: any, output: string[]): void;
+    protected renderSplitDecoration(node: IRNode, pos: any, output: string[]): void;
     protected renderTable(node: IRComponentNode, pos: any): string;
     protected renderChartPlaceholder(node: IRComponentNode, pos: any): string;
     protected renderText(node: IRComponentNode, pos: any): string;
@@ -655,6 +676,8 @@ declare class SVGRenderer {
     protected resolveAccentColor(): string;
     protected resolveControlColor(): string;
     protected resolveChartColor(): string;
+    protected resolveTextColor(): string;
+    protected resolveMutedColor(): string;
     protected getSemanticVariantColor(variant: string): string | undefined;
     protected hexToRgba(hex: string, alpha: number): string;
     protected getIconSize(size?: string): number;
@@ -757,6 +780,10 @@ declare class SkeletonSVGRenderer extends SVGRenderer {
      * Render link as placeholder block + underline (no text)
      */
     protected renderLink(node: IRComponentNode, pos: any): string;
+    /**
+     * Render breadcrumbs as skeleton blocks: <rect> / <rect> / <rect accent>
+     */
+    protected renderBreadcrumbs(node: IRComponentNode, pos: any): string;
     /**
      * Render heading as gray block
      */
@@ -769,6 +796,12 @@ declare class SkeletonSVGRenderer extends SVGRenderer {
      * Render label as gray block
      */
     protected renderLabel(node: IRComponentNode, pos: any): string;
+    /**
+     * Render image as a plain skeleton rectangle — no icon, no placeholder label,
+     * just a filled block with the correct dimensions (aspect-ratio is preserved
+     * by the layout engine, so pos already has the right size).
+     */
+    protected renderImage(node: IRComponentNode, pos: any): string;
     /**
      * Render badge as shape only (no text)
      */
@@ -1108,8 +1141,9 @@ declare class SourceMapBuilder {
      * - screen → "screen-0", "screen-1"
      * - component Button → "component-button-0", "component-button-1"
      * - layout stack → "layout-stack-0", "layout-stack-1"
-     * - cell → "cell-0", "cell-1"
-     * - component-definition → "define-MyButton"
+   * - cell → "cell-0", "cell-1"
+   * - component-definition → "define-MyButton"
+   * - layout-definition → "define-layout-MyShell"
      */
     private generateNodeId;
     /**
@@ -1146,7 +1180,7 @@ declare class SourceMapBuilder {
     build(): SourceMapEntry[];
     /**
      * Calculate insertionPoints for all container nodes
-     * Container nodes: project, screen, layout, cell, component-definition
+     * Container nodes: project, screen, layout, cell, component-definition, layout-definition
      */
     private calculateAllInsertionPoints;
     /**
@@ -1314,4 +1348,4 @@ declare class SourceMapResolver {
 
 declare const version = "0.0.1";
 
-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 ParseDiagnosticsResult, type ParseError, type ParseResult, type ParseWireDSLWithSourceMapOptions, 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 };
+export { type AST, type ASTCell, type ASTComponent, type ASTDefinedComponent, type ASTDefinedLayout, 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 ParseDiagnosticsResult, type ParseError, type ParseResult, type ParseWireDSLWithSourceMapOptions, 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 };

package/dist/index.d.ts

@@ -34,7 +34,7 @@ interface PropertySourceMap {
 /**
  * Types of nodes in Wire DSL
  */
-type SourceMapNodeType = 'project' | 'screen' | 'layout' | 'component' | 'component-definition' | 'cell' | 'style' | 'mocks' | 'colors';
+type SourceMapNodeType = 'project' | 'screen' | 'layout' | 'component' | 'component-definition' | 'layout-definition' | 'cell' | 'style' | 'mocks' | 'colors';
 /**
  * Main SourceMap entry - represents one node in the AST
  */
@@ -121,6 +121,7 @@ interface AST {
     mocks: Record<string, string>;
     colors: Record<string, string>;
     definedComponents: ASTDefinedComponent[];
+    definedLayouts: ASTDefinedLayout[];
     screens: ASTScreen[];
     _meta?: {
         nodeId: string;
@@ -172,6 +173,14 @@ interface ParseWireDSLWithSourceMapOptions {
     throwOnError?: boolean;
     includeSemanticWarnings?: boolean;
 }
+interface ASTDefinedLayout {
+    type: 'definedLayout';
+    name: string;
+    body: ASTLayout;
+    _meta?: {
+        nodeId: string;
+    };
+}
 declare function parseWireDSL(input: string): AST;
 /**
  * Parse Wire DSL with SourceMap generation
@@ -293,9 +302,11 @@ declare class IRGenerator {
     private idGen;
     private nodes;
     private definedComponents;
+    private definedLayouts;
     private definedComponentIndices;
     private undefinedComponentsUsed;
     private warnings;
+    private errors;
     private style;
     generate(ast: AST): IRContract;
     private applyStyle;
@@ -320,6 +331,15 @@ declare class IRGenerator {
     private convertCell;
     private convertComponent;
     private expandDefinedComponent;
+    private expandDefinedLayout;
+    private resolveChildrenSlot;
+    private convertASTNode;
+    private resolveLayoutParams;
+    private normalizeSplitParams;
+    private resolveComponentProps;
+    private resolveBindingValue;
+    private isBindingTargetRequired;
+    private reportUnusedArguments;
     private cleanParams;
     private sanitizeId;
 }
@@ -578,7 +598,7 @@ declare const THEMES: {
     };
 };
 declare class SVGRenderer {
-    private ir;
+    protected ir: IRContract;
     private layout;
     protected options: Required<Omit<SVGRenderOptions, 'screenName'>> & {
         screenName?: string;
@@ -621,6 +641,7 @@ declare class SVGRenderer {
     protected renderTopbar(node: IRComponentNode, pos: any): string;
     protected renderPanelBorder(node: IRNode, pos: any, output: string[]): void;
     protected renderCardBorder(node: IRNode, pos: any, output: string[]): void;
+    protected renderSplitDecoration(node: IRNode, pos: any, output: string[]): void;
     protected renderTable(node: IRComponentNode, pos: any): string;
     protected renderChartPlaceholder(node: IRComponentNode, pos: any): string;
     protected renderText(node: IRComponentNode, pos: any): string;
@@ -655,6 +676,8 @@ declare class SVGRenderer {
     protected resolveAccentColor(): string;
     protected resolveControlColor(): string;
     protected resolveChartColor(): string;
+    protected resolveTextColor(): string;
+    protected resolveMutedColor(): string;
     protected getSemanticVariantColor(variant: string): string | undefined;
     protected hexToRgba(hex: string, alpha: number): string;
     protected getIconSize(size?: string): number;
@@ -757,6 +780,10 @@ declare class SkeletonSVGRenderer extends SVGRenderer {
      * Render link as placeholder block + underline (no text)
      */
     protected renderLink(node: IRComponentNode, pos: any): string;
+    /**
+     * Render breadcrumbs as skeleton blocks: <rect> / <rect> / <rect accent>
+     */
+    protected renderBreadcrumbs(node: IRComponentNode, pos: any): string;
     /**
      * Render heading as gray block
      */
@@ -769,6 +796,12 @@ declare class SkeletonSVGRenderer extends SVGRenderer {
      * Render label as gray block
      */
     protected renderLabel(node: IRComponentNode, pos: any): string;
+    /**
+     * Render image as a plain skeleton rectangle — no icon, no placeholder label,
+     * just a filled block with the correct dimensions (aspect-ratio is preserved
+     * by the layout engine, so pos already has the right size).
+     */
+    protected renderImage(node: IRComponentNode, pos: any): string;
     /**
      * Render badge as shape only (no text)
      */
@@ -1108,8 +1141,9 @@ declare class SourceMapBuilder {
      * - screen → "screen-0", "screen-1"
      * - component Button → "component-button-0", "component-button-1"
      * - layout stack → "layout-stack-0", "layout-stack-1"
-     * - cell → "cell-0", "cell-1"
-     * - component-definition → "define-MyButton"
+   * - cell → "cell-0", "cell-1"
+   * - component-definition → "define-MyButton"
+   * - layout-definition → "define-layout-MyShell"
      */
     private generateNodeId;
     /**
@@ -1146,7 +1180,7 @@ declare class SourceMapBuilder {
     build(): SourceMapEntry[];
     /**
      * Calculate insertionPoints for all container nodes
-     * Container nodes: project, screen, layout, cell, component-definition
+     * Container nodes: project, screen, layout, cell, component-definition, layout-definition
      */
     private calculateAllInsertionPoints;
     /**
@@ -1314,4 +1348,4 @@ declare class SourceMapResolver {
 
 declare const version = "0.0.1";
 
-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 ParseDiagnosticsResult, type ParseError, type ParseResult, type ParseWireDSLWithSourceMapOptions, 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 };
+export { type AST, type ASTCell, type ASTComponent, type ASTDefinedComponent, type ASTDefinedLayout, 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 ParseDiagnosticsResult, type ParseError, type ParseResult, type ParseWireDSLWithSourceMapOptions, 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 };