@wire-dsl/engine 0.4.1 → 0.5.0

package/README.md

@@ -92,7 +92,7 @@ validateIR(ir); // Throws if invalid
 
 **Display**: Divider, Badge, Link, Alert
 
-**Info**: StatCard, Code, ChartPlaceholder
+**Info**: Stat, Code, ChartPlaceholder
 
 **Feedback**: Modal, Spinner
 

package/dist/index.cjs

@@ -2588,7 +2588,7 @@ ${messages}`);
       "Label",
       "Image",
       "Card",
-      "StatCard",
+      "Stat",
       "Topbar",
       "Table",
       "Chart",
@@ -3731,7 +3731,7 @@ var LayoutEngine = class {
     if (node.componentType === "Textarea") return 100 + controlLabelOffset;
     if (node.componentType === "Modal") return 300;
     if (node.componentType === "Card") return 120;
-    if (node.componentType === "StatCard") return 120;
+    if (node.componentType === "Stat") return 120;
     if (node.componentType === "Chart" || node.componentType === "ChartPlaceholder") return 250;
     if (node.componentType === "List") {
       const itemsFromProps = String(node.props.items || "").split(",").map((item) => item.trim()).filter(Boolean);
@@ -3782,7 +3782,10 @@ var LayoutEngine = class {
       const density = this.style.density || "normal";
       const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
       const textWidth = this.estimateTextWidth(text, fontSize);
-      return Math.max(60, Math.ceil(textWidth + (paddingX + extraPadding) * 2));
+      const iconName = String(node.props.icon || "").trim();
+      const iconSize = iconName ? Math.round(fontSize * 1.1) : 0;
+      const iconGap = iconName ? 8 : 0;
+      return Math.max(60, Math.ceil(textWidth + iconSize + iconGap + (paddingX + extraPadding) * 2));
     }
     if (node.componentType === "Label" || node.componentType === "Text") {
       const text = String(node.props.text || "");
@@ -3813,7 +3816,7 @@ var LayoutEngine = class {
     if (node.componentType === "Table") {
       return 400;
     }
-    if (node.componentType === "StatCard" || node.componentType === "Card") {
+    if (node.componentType === "Stat" || node.componentType === "Card") {
       return 280;
     }
     if (node.componentType === "SidebarMenu") {
@@ -4869,8 +4872,8 @@ var SVGRenderer = class {
         return this.renderModal(node, pos);
       case "List":
         return this.renderList(node, pos);
-      case "StatCard":
-        return this.renderStatCard(node, pos);
+      case "Stat":
+        return this.renderStat(node, pos);
       case "Image":
         return this.renderImage(node, pos);
       // Icon components
@@ -4916,6 +4919,7 @@ var SVGRenderer = class {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
     const size = String(node.props.size || "md");
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const density = this.ir.project.style.density || "normal";
     const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
     const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
@@ -4961,7 +4965,7 @@ var SVGRenderer = class {
       textX = pos.x + buttonWidth / 2;
       textAnchor = "middle";
     }
-    let svg = `<g${this.getDataNodeId(node)}>
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${buttonY}"
           width="${buttonWidth}" height="${buttonHeight}"
           rx="${radius}"
@@ -5027,6 +5031,7 @@ var SVGRenderer = class {
     const placeholder = String(node.props.placeholder || "");
     const iconLeftName = String(node.props.iconLeft || "").trim();
     const iconRightName = String(node.props.iconRight || "").trim();
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const radius = this.tokens.input.radius;
     const fontSize = this.tokens.input.fontSize;
     const paddingX = this.tokens.input.paddingX;
@@ -5043,7 +5048,7 @@ var SVGRenderer = class {
     const textX = pos.x + (iconLeftSvg ? leftOffset : paddingX);
     const iconColor = this.hexToRgba(this.resolveMutedColor(), 0.8);
     const iconCenterY = controlY + (controlHeight - iconSize) / 2;
-    let svg = `<g${this.getDataNodeId(node)}>`;
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>`;
     if (label) {
       svg += `
     <text x="${pos.x + paddingX}" y="${this.getControlLabelBaselineY(pos.y)}"
@@ -5681,6 +5686,7 @@ var SVGRenderer = class {
     const placeholder = String(node.props.placeholder || "Select...");
     const iconLeftName = String(node.props.iconLeft || "").trim();
     const iconRightName = String(node.props.iconRight || "").trim();
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const labelOffset = this.getControlLabelOffset(label);
     const controlY = pos.y + labelOffset;
     const controlHeight = Math.max(16, pos.height - labelOffset);
@@ -5694,7 +5700,7 @@ var SVGRenderer = class {
     const chevronWidth = 20;
     const iconColor = this.hexToRgba(this.resolveMutedColor(), 0.8);
     const iconCenterY = controlY + (controlHeight - iconSize) / 2;
-    let svg = `<g${this.getDataNodeId(node)}>`;
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>`;
     if (label) {
       svg += `
     <text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}"
@@ -5743,10 +5749,11 @@ var SVGRenderer = class {
   renderCheckbox(node, pos) {
     const label = String(node.props.label || "Checkbox");
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const checkboxSize = 18;
     const checkboxY = pos.y + pos.height / 2 - checkboxSize / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${checkboxY}" 
           width="${checkboxSize}" height="${checkboxSize}" 
           rx="4" 
@@ -5767,10 +5774,11 @@ var SVGRenderer = class {
   renderRadio(node, pos) {
     const label = String(node.props.label || "Radio");
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const radioSize = 16;
     const radioY = pos.y + pos.height / 2 - radioSize / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <circle cx="${pos.x + radioSize / 2}" cy="${radioY + radioSize / 2}" 
             r="${radioSize / 2}" 
             fill="${this.renderTheme.cardBg}" 
@@ -5788,11 +5796,12 @@ var SVGRenderer = class {
   renderToggle(node, pos) {
     const label = String(node.props.label || "Toggle");
     const enabled = String(node.props.enabled || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const toggleWidth = 40;
     const toggleHeight = 20;
     const toggleY = pos.y + pos.height / 2 - toggleHeight / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${toggleY}" 
           width="${toggleWidth}" height="${toggleHeight}" 
           rx="10" 
@@ -6088,7 +6097,7 @@ var SVGRenderer = class {
           text-anchor="middle">${node.componentType}</text>
   </g>`;
   }
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const title = String(node.props.title || "Metric");
     const value = String(node.props.value || "0");
     const rawCaption = String(node.props.caption || "");
@@ -6096,7 +6105,9 @@ var SVGRenderer = class {
     const hasCaption = caption.trim().length > 0;
     const iconName = String(node.props.icon || "").trim();
     const iconSvg = iconName ? getIcon(iconName) : null;
-    const accentColor = this.resolveAccentColor();
+    const variant = String(node.props.variant || "default");
+    const baseAccent = this.resolveAccentColor();
+    const accentColor = variant !== "default" ? this.resolveVariantColor(variant, baseAccent) : baseAccent;
     const padding = this.resolveSpacing(node.style.padding) || 16;
     const innerX = pos.x + padding;
     const innerY = pos.y + padding;
@@ -6120,7 +6131,7 @@ var SVGRenderer = class {
     const visibleTitle = this.truncateTextToWidth(title, titleMaxWidth, titleSize);
     const visibleCaption = hasCaption ? this.truncateTextToWidth(caption, Math.max(20, innerWidth), captionSize) : "";
     let svg = `<g${this.getDataNodeId(node)}>
-    <!-- StatCard Background -->
+    <!-- Stat Background -->
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="8" 
@@ -7383,9 +7394,9 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
     return svg;
   }
   /**
-   * Render StatCard with gray blocks instead of values
+   * Render Stat with gray blocks instead of values
    */
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const hasIcon = String(node.props.icon || "").trim().length > 0;
     const hasCaption = String(node.props.caption || "").trim().length > 0;
     const iconSize = 20;
@@ -8512,7 +8523,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
   /**
    * Render stat card with sketch filter and Comic Sans
    */
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const title = String(node.props.title || "Metric");
     const value = String(node.props.value || "0");
     const rawCaption = String(node.props.caption || "");
@@ -8520,7 +8531,9 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const hasCaption = caption.trim().length > 0;
     const iconName = String(node.props.icon || "").trim();
     const iconSvg = iconName ? getIcon(iconName) : null;
-    const accentColor = this.resolveAccentColor();
+    const variant = String(node.props.variant || "default");
+    const baseAccent = this.resolveAccentColor();
+    const accentColor = variant !== "default" ? this.resolveVariantColor(variant, baseAccent) : baseAccent;
     const padding = this.resolveSpacing(node.style.padding);
     const innerX = pos.x + padding;
     const innerY = pos.y + padding;
@@ -8543,7 +8556,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const visibleTitle = this.truncateTextToWidth(title, titleMaxWidth, titleSize);
     const visibleCaption = hasCaption ? this.truncateTextToWidth(caption, Math.max(20, pos.width - padding * 2), captionSize) : "";
     let svg = `<g${this.getDataNodeId(node)}>
-    <!-- StatCard Background -->
+    <!-- Stat Background -->
     <rect x="${pos.x}" y="${pos.y}"
           width="${pos.width}" height="${pos.height}"
           rx="8"

package/dist/index.d.cts

@@ -706,7 +706,7 @@ declare class SVGRenderer {
     protected renderModal(node: IRComponentNode, pos: any): string;
     protected renderList(node: IRComponentNode, pos: any): string;
     protected renderGenericComponent(node: IRComponentNode, pos: any): string;
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     protected renderImage(node: IRComponentNode, pos: any): string;
     protected renderBreadcrumbs(node: IRComponentNode, pos: any): string;
     protected renderSidebarMenu(node: IRComponentNode, pos: any): string;
@@ -892,9 +892,9 @@ declare class SkeletonSVGRenderer extends SVGRenderer {
      */
     protected renderTopbar(node: IRComponentNode, pos: any): string;
     /**
-     * Render StatCard with gray blocks instead of values
+     * Render Stat with gray blocks instead of values
      */
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     /**
      * Render icon as gray square instead of hiding it
      */
@@ -1037,7 +1037,7 @@ declare class SketchSVGRenderer extends SVGRenderer {
     /**
      * Render stat card with sketch filter and Comic Sans
      */
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     /**
      * Render image with sketch filter
      */

package/dist/index.d.ts

@@ -706,7 +706,7 @@ declare class SVGRenderer {
     protected renderModal(node: IRComponentNode, pos: any): string;
     protected renderList(node: IRComponentNode, pos: any): string;
     protected renderGenericComponent(node: IRComponentNode, pos: any): string;
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     protected renderImage(node: IRComponentNode, pos: any): string;
     protected renderBreadcrumbs(node: IRComponentNode, pos: any): string;
     protected renderSidebarMenu(node: IRComponentNode, pos: any): string;
@@ -892,9 +892,9 @@ declare class SkeletonSVGRenderer extends SVGRenderer {
      */
     protected renderTopbar(node: IRComponentNode, pos: any): string;
     /**
-     * Render StatCard with gray blocks instead of values
+     * Render Stat with gray blocks instead of values
      */
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     /**
      * Render icon as gray square instead of hiding it
      */
@@ -1037,7 +1037,7 @@ declare class SketchSVGRenderer extends SVGRenderer {
     /**
      * Render stat card with sketch filter and Comic Sans
      */
-    protected renderStatCard(node: IRComponentNode, pos: any): string;
+    protected renderStat(node: IRComponentNode, pos: any): string;
     /**
      * Render image with sketch filter
      */

package/dist/index.js

@@ -2542,7 +2542,7 @@ ${messages}`);
       "Label",
       "Image",
       "Card",
-      "StatCard",
+      "Stat",
       "Topbar",
       "Table",
       "Chart",
@@ -3685,7 +3685,7 @@ var LayoutEngine = class {
     if (node.componentType === "Textarea") return 100 + controlLabelOffset;
     if (node.componentType === "Modal") return 300;
     if (node.componentType === "Card") return 120;
-    if (node.componentType === "StatCard") return 120;
+    if (node.componentType === "Stat") return 120;
     if (node.componentType === "Chart" || node.componentType === "ChartPlaceholder") return 250;
     if (node.componentType === "List") {
       const itemsFromProps = String(node.props.items || "").split(",").map((item) => item.trim()).filter(Boolean);
@@ -3736,7 +3736,10 @@ var LayoutEngine = class {
       const density = this.style.density || "normal";
       const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
       const textWidth = this.estimateTextWidth(text, fontSize);
-      return Math.max(60, Math.ceil(textWidth + (paddingX + extraPadding) * 2));
+      const iconName = String(node.props.icon || "").trim();
+      const iconSize = iconName ? Math.round(fontSize * 1.1) : 0;
+      const iconGap = iconName ? 8 : 0;
+      return Math.max(60, Math.ceil(textWidth + iconSize + iconGap + (paddingX + extraPadding) * 2));
     }
     if (node.componentType === "Label" || node.componentType === "Text") {
       const text = String(node.props.text || "");
@@ -3767,7 +3770,7 @@ var LayoutEngine = class {
     if (node.componentType === "Table") {
       return 400;
     }
-    if (node.componentType === "StatCard" || node.componentType === "Card") {
+    if (node.componentType === "Stat" || node.componentType === "Card") {
       return 280;
     }
     if (node.componentType === "SidebarMenu") {
@@ -4823,8 +4826,8 @@ var SVGRenderer = class {
         return this.renderModal(node, pos);
       case "List":
         return this.renderList(node, pos);
-      case "StatCard":
-        return this.renderStatCard(node, pos);
+      case "Stat":
+        return this.renderStat(node, pos);
       case "Image":
         return this.renderImage(node, pos);
       // Icon components
@@ -4870,6 +4873,7 @@ var SVGRenderer = class {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
     const size = String(node.props.size || "md");
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const density = this.ir.project.style.density || "normal";
     const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
     const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
@@ -4915,7 +4919,7 @@ var SVGRenderer = class {
       textX = pos.x + buttonWidth / 2;
       textAnchor = "middle";
     }
-    let svg = `<g${this.getDataNodeId(node)}>
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${buttonY}"
           width="${buttonWidth}" height="${buttonHeight}"
           rx="${radius}"
@@ -4981,6 +4985,7 @@ var SVGRenderer = class {
     const placeholder = String(node.props.placeholder || "");
     const iconLeftName = String(node.props.iconLeft || "").trim();
     const iconRightName = String(node.props.iconRight || "").trim();
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const radius = this.tokens.input.radius;
     const fontSize = this.tokens.input.fontSize;
     const paddingX = this.tokens.input.paddingX;
@@ -4997,7 +5002,7 @@ var SVGRenderer = class {
     const textX = pos.x + (iconLeftSvg ? leftOffset : paddingX);
     const iconColor = this.hexToRgba(this.resolveMutedColor(), 0.8);
     const iconCenterY = controlY + (controlHeight - iconSize) / 2;
-    let svg = `<g${this.getDataNodeId(node)}>`;
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>`;
     if (label) {
       svg += `
     <text x="${pos.x + paddingX}" y="${this.getControlLabelBaselineY(pos.y)}"
@@ -5635,6 +5640,7 @@ var SVGRenderer = class {
     const placeholder = String(node.props.placeholder || "Select...");
     const iconLeftName = String(node.props.iconLeft || "").trim();
     const iconRightName = String(node.props.iconRight || "").trim();
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const labelOffset = this.getControlLabelOffset(label);
     const controlY = pos.y + labelOffset;
     const controlHeight = Math.max(16, pos.height - labelOffset);
@@ -5648,7 +5654,7 @@ var SVGRenderer = class {
     const chevronWidth = 20;
     const iconColor = this.hexToRgba(this.resolveMutedColor(), 0.8);
     const iconCenterY = controlY + (controlHeight - iconSize) / 2;
-    let svg = `<g${this.getDataNodeId(node)}>`;
+    let svg = `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>`;
     if (label) {
       svg += `
     <text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}"
@@ -5697,10 +5703,11 @@ var SVGRenderer = class {
   renderCheckbox(node, pos) {
     const label = String(node.props.label || "Checkbox");
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const checkboxSize = 18;
     const checkboxY = pos.y + pos.height / 2 - checkboxSize / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${checkboxY}" 
           width="${checkboxSize}" height="${checkboxSize}" 
           rx="4" 
@@ -5721,10 +5728,11 @@ var SVGRenderer = class {
   renderRadio(node, pos) {
     const label = String(node.props.label || "Radio");
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const radioSize = 16;
     const radioY = pos.y + pos.height / 2 - radioSize / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <circle cx="${pos.x + radioSize / 2}" cy="${radioY + radioSize / 2}" 
             r="${radioSize / 2}" 
             fill="${this.renderTheme.cardBg}" 
@@ -5742,11 +5750,12 @@ var SVGRenderer = class {
   renderToggle(node, pos) {
     const label = String(node.props.label || "Toggle");
     const enabled = String(node.props.enabled || "false").toLowerCase() === "true";
+    const disabled = this.parseBooleanProp(node.props.disabled, false);
     const controlColor = this.resolveControlColor();
     const toggleWidth = 40;
     const toggleHeight = 20;
     const toggleY = pos.y + pos.height / 2 - toggleHeight / 2;
-    return `<g${this.getDataNodeId(node)}>
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
     <rect x="${pos.x}" y="${toggleY}" 
           width="${toggleWidth}" height="${toggleHeight}" 
           rx="10" 
@@ -6042,7 +6051,7 @@ var SVGRenderer = class {
           text-anchor="middle">${node.componentType}</text>
   </g>`;
   }
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const title = String(node.props.title || "Metric");
     const value = String(node.props.value || "0");
     const rawCaption = String(node.props.caption || "");
@@ -6050,7 +6059,9 @@ var SVGRenderer = class {
     const hasCaption = caption.trim().length > 0;
     const iconName = String(node.props.icon || "").trim();
     const iconSvg = iconName ? getIcon(iconName) : null;
-    const accentColor = this.resolveAccentColor();
+    const variant = String(node.props.variant || "default");
+    const baseAccent = this.resolveAccentColor();
+    const accentColor = variant !== "default" ? this.resolveVariantColor(variant, baseAccent) : baseAccent;
     const padding = this.resolveSpacing(node.style.padding) || 16;
     const innerX = pos.x + padding;
     const innerY = pos.y + padding;
@@ -6074,7 +6085,7 @@ var SVGRenderer = class {
     const visibleTitle = this.truncateTextToWidth(title, titleMaxWidth, titleSize);
     const visibleCaption = hasCaption ? this.truncateTextToWidth(caption, Math.max(20, innerWidth), captionSize) : "";
     let svg = `<g${this.getDataNodeId(node)}>
-    <!-- StatCard Background -->
+    <!-- Stat Background -->
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="8" 
@@ -7337,9 +7348,9 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
     return svg;
   }
   /**
-   * Render StatCard with gray blocks instead of values
+   * Render Stat with gray blocks instead of values
    */
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const hasIcon = String(node.props.icon || "").trim().length > 0;
     const hasCaption = String(node.props.caption || "").trim().length > 0;
     const iconSize = 20;
@@ -8466,7 +8477,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
   /**
    * Render stat card with sketch filter and Comic Sans
    */
-  renderStatCard(node, pos) {
+  renderStat(node, pos) {
     const title = String(node.props.title || "Metric");
     const value = String(node.props.value || "0");
     const rawCaption = String(node.props.caption || "");
@@ -8474,7 +8485,9 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const hasCaption = caption.trim().length > 0;
     const iconName = String(node.props.icon || "").trim();
     const iconSvg = iconName ? getIcon(iconName) : null;
-    const accentColor = this.resolveAccentColor();
+    const variant = String(node.props.variant || "default");
+    const baseAccent = this.resolveAccentColor();
+    const accentColor = variant !== "default" ? this.resolveVariantColor(variant, baseAccent) : baseAccent;
     const padding = this.resolveSpacing(node.style.padding);
     const innerX = pos.x + padding;
     const innerY = pos.y + padding;
@@ -8497,7 +8510,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const visibleTitle = this.truncateTextToWidth(title, titleMaxWidth, titleSize);
     const visibleCaption = hasCaption ? this.truncateTextToWidth(caption, Math.max(20, pos.width - padding * 2), captionSize) : "";
     let svg = `<g${this.getDataNodeId(node)}>
-    <!-- StatCard Background -->
+    <!-- Stat Background -->
     <rect x="${pos.x}" y="${pos.y}"
           width="${pos.width}" height="${pos.height}"
           rx="8"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wire-dsl/engine",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "WireDSL engine - Parser, IR generator, layout engine, and SVG renderer (browser-safe, pure JS/TS)",
   "type": "module",
   "exports": {
@@ -32,7 +32,7 @@
   "dependencies": {
     "chevrotain": "11.1.1",
     "zod": "4.3.6",
-    "@wire-dsl/language-support": "0.4.0"
+    "@wire-dsl/language-support": "0.5.0"
   },
   "devDependencies": {
     "@types/node": "25.2.0",