@wire-dsl/engine 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -1696,7 +1696,8 @@ function validateSemanticDiagnostics(ast, sourceMap) {
       if (enumValues) {
         const normalizedValue = String(propValue);
         const isCustomVariantFromColors = propName === "variant" && !enumValues.includes(normalizedValue) && Object.prototype.hasOwnProperty.call(ast.colors || {}, normalizedValue);
-        if (!enumValues.includes(normalizedValue) && !isCustomVariantFromColors) {
+        const isPropReference = normalizedValue.startsWith("prop_");
+        if (!enumValues.includes(normalizedValue) && !isCustomVariantFromColors && !isPropReference) {
           emitWarning(
             `Invalid value "${normalizedValue}" for property "${propName}" in component "${componentType}".`,
             "COMPONENT_INVALID_PROPERTY_VALUE",
@@ -1806,7 +1807,7 @@ function validateSemanticDiagnostics(ast, sourceMap) {
         const enumValues = rules.enumParams?.[paramName];
         if (enumValues) {
           const normalizedValue = String(paramValue);
-          if (!enumValues.includes(normalizedValue)) {
+          if (!enumValues.includes(normalizedValue) && !normalizedValue.startsWith("prop_")) {
             emitWarning(
               `Invalid value "${normalizedValue}" for parameter "${paramName}" in layout "${layout.layoutType}".`,
               "LAYOUT_INVALID_PARAMETER_VALUE",
@@ -2689,6 +2690,20 @@ ${messages}`);
         key
       );
       if (resolvedValue !== void 0) {
+        const wasPropReference = typeof value === "string" && value.startsWith("prop_");
+        if (wasPropReference) {
+          const layoutMetadata = import_components2.LAYOUTS[layoutType];
+          const property = layoutMetadata?.properties?.[key];
+          if (property?.type === "enum" && Array.isArray(property.options)) {
+            const normalizedValue = String(resolvedValue);
+            if (!property.options.includes(normalizedValue)) {
+              this.warnings.push({
+                type: "invalid-bound-enum-value",
+                message: `Invalid value "${normalizedValue}" for parameter "${key}" in layout "${layoutType}". Expected one of: ${property.options.join(", ")}.`
+              });
+            }
+          }
+        }
         resolved[key] = resolvedValue;
       }
     }
@@ -2753,6 +2768,20 @@ ${messages}`);
         key
       );
       if (resolvedValue !== void 0) {
+        const wasPropReference = typeof value === "string" && value.startsWith("prop_");
+        if (wasPropReference) {
+          const metadata = import_components2.COMPONENTS[componentType];
+          const property = metadata?.properties?.[key];
+          if (property?.type === "enum" && Array.isArray(property.options)) {
+            const normalizedValue = String(resolvedValue);
+            if (!property.options.includes(normalizedValue)) {
+              this.warnings.push({
+                type: "invalid-bound-enum-value",
+                message: `Invalid value "${normalizedValue}" for property "${key}" in component "${componentType}". Expected one of: ${property.options.join(", ")}.`
+              });
+            }
+          }
+        }
         resolved[key] = resolvedValue;
       }
     }
@@ -4563,14 +4592,14 @@ var THEMES = {
     primaryLight: "#EFF6FF"
   },
   dark: {
-    bg: "#0F172A",
-    cardBg: "#1E293B",
-    border: "#334155",
-    text: "#FFFFFF",
-    textMuted: "#94A3B8",
+    bg: "#111111",
+    cardBg: "#1C1C1C",
+    border: "#303030",
+    text: "#F0F0F0",
+    textMuted: "#808080",
     primary: "#60A5FA",
     primaryHover: "#3B82F6",
-    primaryLight: "#1E3A8A"
+    primaryLight: "#1C2A3A"
   }
 };
 var SVGRenderer = class {
@@ -4811,6 +4840,8 @@ var SVGRenderer = class {
     const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
     const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
     const fullWidth = this.shouldButtonFillAvailableWidth(node);
+    const iconName = String(node.props.icon || "").trim();
+    const iconAlign = String(node.props.iconAlign || "left").toLowerCase();
     const radius = this.tokens.button.radius;
     const fontSize = this.tokens.button.fontSize;
     const fontWeight = this.tokens.button.fontWeight;
@@ -4818,30 +4849,62 @@ var SVGRenderer = class {
     const controlHeight = resolveActionControlHeight(size, density);
     const buttonY = pos.y + labelOffset;
     const buttonHeight = Math.max(16, Math.min(controlHeight, pos.height - labelOffset));
+    const iconSvg = iconName ? getIcon(iconName) : null;
+    const iconSize = iconSvg ? Math.round(fontSize * 1.1) : 0;
+    const iconGap = iconSvg ? 8 : 0;
+    const edgePad = 12;
+    const textPad = paddingX + extraPadding;
     const idealTextWidth = this.estimateTextWidth(text, fontSize);
-    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(Math.ceil(idealTextWidth + (paddingX + extraPadding) * 2), 60), pos.width);
-    const availableTextWidth = Math.max(0, buttonWidth - (paddingX + extraPadding) * 2);
+    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(Math.ceil(idealTextWidth + (iconSvg ? iconSize + iconGap : 0) + textPad * 2), 60), pos.width);
+    const availableTextWidth = Math.max(0, buttonWidth - textPad * 2 - (iconSvg ? iconSize + iconGap : 0));
     const visibleText = this.truncateTextToWidth(text, availableTextWidth, fontSize);
     const semanticBase = this.getSemanticVariantColor(variant);
     const hasExplicitVariantColor = semanticBase !== void 0 || this.colorResolver.hasColor(variant);
     const resolvedBase = this.resolveVariantColor(variant, this.renderTheme.primary);
-    const bgColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.85) : "rgba(226, 232, 240, 0.9)";
+    const isDarkMode = this.options.theme === "dark";
+    const bgColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.85) : isDarkMode ? "rgba(48, 48, 55, 0.9)" : "rgba(226, 232, 240, 0.9)";
     const textColor = hasExplicitVariantColor ? "#FFFFFF" : this.hexToRgba(this.resolveTextColor(), 0.85);
-    const borderColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.7) : "rgba(100, 116, 139, 0.4)";
-    return `<g${this.getDataNodeId(node)}>
+    const borderColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.7) : isDarkMode ? "rgba(75, 75, 88, 0.8)" : "rgba(100, 116, 139, 0.4)";
+    const iconOffsetY = buttonY + (buttonHeight - iconSize) / 2;
+    const iconX = iconAlign === "right" ? pos.x + buttonWidth - edgePad - iconSize : pos.x + edgePad;
+    const textAlign = String(node.props.align || "center").toLowerCase();
+    const sidePad = textPad + 4;
+    let textX;
+    let textAnchor;
+    if (textAlign === "left") {
+      textX = iconSvg && iconAlign === "left" ? pos.x + edgePad + iconSize + iconGap : pos.x + sidePad;
+      textAnchor = "start";
+    } else if (textAlign === "right") {
+      textX = iconSvg && iconAlign === "right" ? pos.x + buttonWidth - edgePad - iconSize - iconGap : pos.x + buttonWidth - sidePad;
+      textAnchor = "end";
+    } else {
+      textX = pos.x + buttonWidth / 2;
+      textAnchor = "middle";
+    }
+    let svg = `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${buttonY}"
           width="${buttonWidth}" height="${buttonHeight}"
           rx="${radius}"
           fill="${bgColor}"
           stroke="${borderColor}"
-          stroke-width="1"/>
-    <text x="${pos.x + buttonWidth / 2}" y="${buttonY + buttonHeight / 2 + fontSize * 0.35}"
+          stroke-width="1"/>`;
+    if (iconSvg) {
+      svg += `
+    <g transform="translate(${iconX}, ${iconOffsetY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${textColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconSvg)}
+      </svg>
+    </g>`;
+    }
+    svg += `
+    <text x="${textX}" y="${buttonY + buttonHeight / 2 + fontSize * 0.35}"
           font-family="Arial, Helvetica, sans-serif"
           font-size="${fontSize}"
           font-weight="${fontWeight}"
           fill="${textColor}"
-          text-anchor="middle">${this.escapeXml(visibleText)}</text>
+          text-anchor="${textAnchor}">${this.escapeXml(visibleText)}</text>
   </g>`;
+    return svg;
   }
   renderLink(node, pos) {
     const text = String(node.props.text || "Link");
@@ -4882,28 +4945,66 @@ var SVGRenderer = class {
   renderInput(node, pos) {
     const label = String(node.props.label || "");
     const placeholder = String(node.props.placeholder || "");
+    const iconLeftName = String(node.props.iconLeft || "").trim();
+    const iconRightName = String(node.props.iconRight || "").trim();
     const radius = this.tokens.input.radius;
     const fontSize = this.tokens.input.fontSize;
     const paddingX = this.tokens.input.paddingX;
     const labelOffset = this.getControlLabelOffset(label);
     const controlY = pos.y + labelOffset;
     const controlHeight = Math.max(16, pos.height - labelOffset);
-    return `<g${this.getDataNodeId(node)}>
-    ${label ? `<text x="${pos.x + paddingX}" y="${this.getControlLabelBaselineY(pos.y)}"
+    const iconSize = 16;
+    const iconPad = 12;
+    const iconInnerGap = 8;
+    const iconLeftSvg = iconLeftName ? getIcon(iconLeftName) : null;
+    const iconRightSvg = iconRightName ? getIcon(iconRightName) : null;
+    const leftOffset = iconLeftSvg ? iconPad + iconSize + iconInnerGap : 0;
+    const rightOffset = iconRightSvg ? iconPad + iconSize + iconInnerGap : 0;
+    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)}>`;
+    if (label) {
+      svg += `
+    <text x="${pos.x + paddingX}" y="${this.getControlLabelBaselineY(pos.y)}"
           font-family="Arial, Helvetica, sans-serif"
           font-size="12"
-          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>` : ""}
+          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>`;
+    }
+    svg += `
     <rect x="${pos.x}" y="${controlY}"
           width="${pos.width}" height="${controlHeight}"
           rx="${radius}"
           fill="${this.renderTheme.cardBg}"
           stroke="${this.renderTheme.border}"
-          stroke-width="1"/>
-    <text x="${pos.x + paddingX}" y="${controlY + controlHeight / 2 + 5}"
+          stroke-width="1"/>`;
+    if (iconLeftSvg) {
+      svg += `
+    <g transform="translate(${pos.x + iconPad}, ${iconCenterY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconLeftSvg)}
+      </svg>
+    </g>`;
+    }
+    if (iconRightSvg) {
+      svg += `
+    <g transform="translate(${pos.x + pos.width - iconPad - iconSize}, ${iconCenterY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconRightSvg)}
+      </svg>
+    </g>`;
+    }
+    if (placeholder) {
+      const availPlaceholderWidth = pos.width - (iconLeftSvg ? leftOffset : paddingX) - (iconRightSvg ? rightOffset : paddingX);
+      const visiblePlaceholder = this.truncateTextToWidth(placeholder, Math.max(0, availPlaceholderWidth), fontSize);
+      svg += `
+    <text x="${textX}" y="${controlY + controlHeight / 2 + 5}"
           font-family="Arial, Helvetica, sans-serif"
           font-size="${fontSize}"
-          fill="${this.renderTheme.textMuted}">${this.escapeXml(placeholder)}</text>
-  </g>`;
+          fill="${this.renderTheme.textMuted}">${this.escapeXml(visiblePlaceholder)}</text>`;
+    }
+    svg += "\n  </g>";
+    return svg;
   }
   renderTopbar(node, pos) {
     const title = String(node.props.title || "App");
@@ -5483,30 +5584,66 @@ var SVGRenderer = class {
   renderSelect(node, pos) {
     const label = String(node.props.label || "");
     const placeholder = String(node.props.placeholder || "Select...");
+    const iconLeftName = String(node.props.iconLeft || "").trim();
+    const iconRightName = String(node.props.iconRight || "").trim();
     const labelOffset = this.getControlLabelOffset(label);
     const controlY = pos.y + labelOffset;
     const controlHeight = Math.max(16, pos.height - labelOffset);
     const centerY = controlY + controlHeight / 2 + 5;
-    return `<g${this.getDataNodeId(node)}>
-    ${label ? `<text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}" 
-          font-family="Arial, Helvetica, sans-serif" 
-          font-size="12" 
-          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>` : ""}
-    <rect x="${pos.x}" y="${controlY}" 
-          width="${pos.width}" height="${controlHeight}" 
-          rx="6" 
-          fill="${this.renderTheme.cardBg}" 
-          stroke="${this.renderTheme.border}" 
-          stroke-width="1"/>
-    <text x="${pos.x + 12}" y="${centerY}" 
-          font-family="Arial, Helvetica, sans-serif" 
-          font-size="14" 
-          fill="${this.renderTheme.textMuted}">${this.escapeXml(placeholder)}</text>
-    <text x="${pos.x + pos.width - 20}" y="${centerY}" 
-          font-family="Arial, Helvetica, sans-serif" 
-          font-size="16" 
+    const iconSize = 16;
+    const iconPad = 12;
+    const iconInnerGap = 8;
+    const iconLeftSvg = iconLeftName ? getIcon(iconLeftName) : null;
+    const iconRightSvg = iconRightName ? getIcon(iconRightName) : null;
+    const leftOffset = iconLeftSvg ? iconPad + iconSize + iconInnerGap : 0;
+    const chevronWidth = 20;
+    const iconColor = this.hexToRgba(this.resolveMutedColor(), 0.8);
+    const iconCenterY = controlY + (controlHeight - iconSize) / 2;
+    let svg = `<g${this.getDataNodeId(node)}>`;
+    if (label) {
+      svg += `
+    <text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}"
+          font-family="Arial, Helvetica, sans-serif"
+          font-size="12"
+          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>`;
+    }
+    svg += `
+    <rect x="${pos.x}" y="${controlY}"
+          width="${pos.width}" height="${controlHeight}"
+          rx="6"
+          fill="${this.renderTheme.cardBg}"
+          stroke="${this.renderTheme.border}"
+          stroke-width="1"/>`;
+    if (iconLeftSvg) {
+      svg += `
+    <g transform="translate(${pos.x + iconPad}, ${iconCenterY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconLeftSvg)}
+      </svg>
+    </g>`;
+    }
+    if (iconRightSvg) {
+      svg += `
+    <g transform="translate(${pos.x + pos.width - chevronWidth - iconPad - iconSize}, ${iconCenterY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconRightSvg)}
+      </svg>
+    </g>`;
+    }
+    const textX = pos.x + (iconLeftSvg ? leftOffset : 12);
+    const availPlaceholderWidth = pos.width - (iconLeftSvg ? leftOffset : 12) - chevronWidth - (iconRightSvg ? iconPad + iconSize + iconInnerGap : 0);
+    const visiblePlaceholder = this.truncateTextToWidth(placeholder, Math.max(0, availPlaceholderWidth), 14);
+    svg += `
+    <text x="${textX}" y="${centerY}"
+          font-family="Arial, Helvetica, sans-serif"
+          font-size="14"
+          fill="${this.renderTheme.textMuted}">${this.escapeXml(visiblePlaceholder)}</text>
+    <text x="${pos.x + pos.width - 20}" y="${centerY}"
+          font-family="Arial, Helvetica, sans-serif"
+          font-size="16"
           fill="${this.renderTheme.textMuted}">\u25BC</text>
   </g>`;
+    return svg;
   }
   renderCheckbox(node, pos) {
     const label = String(node.props.label || "Checkbox");
@@ -5939,7 +6076,9 @@ var SVGRenderer = class {
   renderImage(node, pos) {
     const placeholder = String(node.props.placeholder || "landscape").toLowerCase();
     const placeholderIcon = String(node.props.icon || "").trim();
+    const variant = String(node.props.variant || "").trim();
     const placeholderIconSvg = placeholder === "icon" && placeholderIcon ? getIcon(placeholderIcon) : null;
+    const imageBg = this.options.theme === "dark" ? "#2A2A2A" : "#E8E8E8";
     const aspectRatios = {
       landscape: 16 / 9,
       portrait: 2 / 3,
@@ -5957,30 +6096,29 @@ var SVGRenderer = class {
     }
     const offsetX = pos.x + (pos.width - iconWidth) / 2;
     const offsetY = pos.y + (pos.height - iconHeight) / 2;
-    let svg = `<g${this.getDataNodeId(node)}>
-    <!-- Image Background -->
-    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="#E8E8E8"/>`;
     if (placeholder === "icon" && placeholderIconSvg) {
-      const badgeSize = Math.max(24, Math.min(iconWidth, iconHeight) * 0.78);
-      const badgeX = pos.x + (pos.width - badgeSize) / 2;
-      const badgeY = pos.y + (pos.height - badgeSize) / 2;
-      const iconSize = badgeSize * 0.62;
-      const iconOffsetX = badgeX + (badgeSize - iconSize) / 2;
-      const iconOffsetY = badgeY + (badgeSize - iconSize) / 2;
-      svg += `
-    <!-- Custom Icon Placeholder -->
-    <rect x="${badgeX}" y="${badgeY}"
-          width="${badgeSize}" height="${badgeSize}"
-          rx="${Math.max(4, badgeSize * 0.2)}"
-          fill="rgba(255, 255, 255, 0.6)"
-          stroke="#888"
-          stroke-width="1"/>
+      const semanticBase = variant ? this.getSemanticVariantColor(variant) : void 0;
+      const hasVariant = variant.length > 0 && (semanticBase !== void 0 || this.colorResolver.hasColor(variant));
+      const variantColor = hasVariant ? this.resolveVariantColor(variant, this.renderTheme.primary) : null;
+      const bgColor = hasVariant ? this.hexToRgba(variantColor, 0.12) : imageBg;
+      const iconColor = hasVariant ? variantColor : this.options.theme === "dark" ? "#888888" : "#666666";
+      const iconSize = Math.max(16, Math.min(pos.width, pos.height) * 0.6);
+      const iconOffsetX = pos.x + (pos.width - iconSize) / 2;
+      const iconOffsetY = pos.y + (pos.height - iconSize) / 2;
+      return `<g${this.getDataNodeId(node)}>
+    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="${bgColor}" rx="4"/>
     <g transform="translate(${iconOffsetX}, ${iconOffsetY})">
-      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         ${this.extractSvgContent(placeholderIconSvg)}
       </svg>
-    </g>`;
-    } else if (["landscape", "portrait", "square"].includes(placeholder)) {
+    </g>
+    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="none" stroke="${this.renderTheme.border}" stroke-width="1" rx="4"/>
+  </g>`;
+    }
+    let svg = `<g${this.getDataNodeId(node)}>
+    <!-- Image Background -->
+    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="${imageBg}"/>`;
+    if (["landscape", "portrait", "square"].includes(placeholder)) {
       const cameraCx = offsetX + iconWidth / 2;
       const cameraCy = offsetY + iconHeight / 2;
       const scale = Math.min(iconWidth, iconHeight) / 24;
@@ -6084,18 +6222,22 @@ var SVGRenderer = class {
     const fontSize = 14;
     const activeIndex = Number(node.props.active || 0);
     const accentColor = this.resolveAccentColor();
+    const variantProp = String(node.props.variant || "").trim();
+    const semanticVariant = variantProp ? this.getSemanticVariantColor(variantProp) : void 0;
+    const hasVariant = variantProp.length > 0 && (semanticVariant !== void 0 || this.colorResolver.hasColor(variantProp));
+    const activeColor = hasVariant ? this.resolveVariantColor(variantProp, accentColor) : accentColor;
     let svg = `<g${this.getDataNodeId(node)}>`;
     items.forEach((item, index) => {
       const itemY = pos.y + index * itemHeight;
       const isActive = index === activeIndex;
-      const bgColor = isActive ? this.hexToRgba(accentColor, 0.15) : "transparent";
-      const textColor = isActive ? this.hexToRgba(accentColor, 0.9) : this.hexToRgba(this.resolveTextColor(), 0.75);
+      const bgColor = isActive ? this.hexToRgba(activeColor, 0.15) : "transparent";
+      const textColor = isActive ? this.hexToRgba(activeColor, 0.9) : this.hexToRgba(this.resolveTextColor(), 0.75);
       const fontWeight = isActive ? "500" : "400";
       if (isActive) {
         svg += `
-    <rect x="${pos.x}" y="${itemY}" 
-          width="${pos.width}" height="${itemHeight}" 
-          rx="6" 
+    <rect x="${pos.x}" y="${itemY}"
+          width="${pos.width}" height="${itemHeight}"
+          rx="6"
           fill="${bgColor}"/>`;
       }
       let currentX = pos.x + 12;
@@ -6104,9 +6246,10 @@ var SVGRenderer = class {
         if (iconSvg) {
           const iconSize = 16;
           const iconY = itemY + (itemHeight - iconSize) / 2;
+          const iconColor = isActive ? this.hexToRgba(activeColor, 0.9) : this.hexToRgba(this.resolveMutedColor(), 0.9);
           svg += `
     <g transform="translate(${currentX}, ${iconY})">
-      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${this.hexToRgba(this.resolveMutedColor(), 0.9)}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         ${this.extractSvgContent(iconSvg)}
       </svg>
     </g>`;
@@ -6114,10 +6257,10 @@ var SVGRenderer = class {
         }
       }
       svg += `
-    <text x="${currentX}" y="${itemY + itemHeight / 2 + 5}" 
-          font-family="Arial, Helvetica, sans-serif" 
-          font-size="${fontSize}" 
-          font-weight="${fontWeight}" 
+    <text x="${currentX}" y="${itemY + itemHeight / 2 + 5}"
+          font-family="Arial, Helvetica, sans-serif"
+          font-size="${fontSize}"
+          font-weight="${fontWeight}"
           fill="${textColor}">${this.escapeXml(item)}</text>`;
     });
     svg += "\n  </g>";
@@ -6157,9 +6300,10 @@ var SVGRenderer = class {
     const semanticBase = this.getSemanticVariantColor(variant);
     const hasExplicitVariantColor = semanticBase !== void 0 || this.colorResolver.hasColor(variant);
     const resolvedBase = this.resolveVariantColor(variant, this.renderTheme.primary);
-    const bgColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.85) : "rgba(226, 232, 240, 0.9)";
+    const isDarkMode = this.options.theme === "dark";
+    const bgColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.85) : isDarkMode ? "rgba(48, 48, 55, 0.9)" : "rgba(226, 232, 240, 0.9)";
     const iconColor = hasExplicitVariantColor ? "#FFFFFF" : this.hexToRgba(this.resolveTextColor(), 0.75);
-    const borderColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.7) : "rgba(100, 116, 139, 0.4)";
+    const borderColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.7) : isDarkMode ? "rgba(75, 75, 88, 0.8)" : "rgba(100, 116, 139, 0.4)";
     const opacity = disabled ? "0.5" : "1";
     const iconSvg = getIcon(iconName);
     const buttonSize = Math.max(
@@ -6217,14 +6361,37 @@ var SVGRenderer = class {
     return this.colorResolver.resolveColor("muted", fallback);
   }
   getSemanticVariantColor(variant) {
-    const semantic = {
+    const isDark = this.options.theme === "dark";
+    const semantic = isDark ? {
+      // Muted mid-range — readable on #111111 without being neon
+      primary: this.renderTheme.primary,
+      // already theme-aware (#60A5FA)
+      secondary: "#7E8EA2",
+      // desaturated slate
+      success: "#22A06B",
+      // muted emerald
+      warning: "#B38010",
+      // deep amber
+      danger: "#CC4444",
+      // muted red
+      error: "#CC4444",
+      info: "#2485AF"
+      // muted sky
+    } : {
+      // Tailwind 500-level — works on white/light backgrounds
       primary: this.renderTheme.primary,
+      // #3B82F6
       secondary: "#64748B",
+      // Slate 500
       success: "#10B981",
+      // Emerald 500
       warning: "#F59E0B",
+      // Amber 500
       danger: "#EF4444",
+      // Red 500
       error: "#EF4444",
       info: "#0EA5E9"
+      // Sky 500
     };
     return semantic[variant];
   }
@@ -6685,6 +6852,19 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
   renderLabel(node, pos) {
     return this.renderTextBlock(node, pos, String(node.props.text || "Label"), 12, 1.2);
   }
+  /**
+   * 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).
+   */
+  renderImage(node, pos) {
+    return `<g${this.getDataNodeId(node)}>
+      <rect x="${pos.x}" y="${pos.y}"
+            width="${pos.width}" height="${pos.height}"
+            rx="4"
+            fill="${this.renderTheme.border}"/>
+    </g>`;
+  }
   /**
    * Render badge as shape only (no text)
    */
@@ -7359,6 +7539,8 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
     const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
     const fullWidth = this.shouldButtonFillAvailableWidth(node);
+    const iconName = String(node.props.icon || "").trim();
+    const iconAlign = String(node.props.iconAlign || "left").toLowerCase();
     const radius = this.tokens.button.radius;
     const fontSize = this.tokens.button.fontSize;
     const fontWeight = this.tokens.button.fontWeight;
@@ -7368,9 +7550,14 @@ var SketchSVGRenderer = class extends SVGRenderer {
       Math.min(resolveControlHeight(size, density), pos.height - labelOffset)
     );
     const buttonY = pos.y + labelOffset;
+    const iconSvg = iconName ? getIcon(iconName) : null;
+    const iconSize = iconSvg ? Math.round(fontSize * 1.1) : 0;
+    const iconGap = iconSvg ? 8 : 0;
+    const edgePad = 12;
+    const textPad = paddingX + extraPadding;
     const idealTextWidth = text.length * fontSize * 0.6;
-    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(idealTextWidth + (paddingX + extraPadding) * 2, 60), pos.width);
-    const availableTextWidth = Math.max(0, buttonWidth - (paddingX + extraPadding) * 2);
+    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(idealTextWidth + (iconSvg ? iconSize + iconGap : 0) + textPad * 2, 60), pos.width);
+    const availableTextWidth = Math.max(0, buttonWidth - textPad * 2 - (iconSvg ? iconSize + iconGap : 0));
     const visibleText = this.truncateTextToWidth(text, availableTextWidth, fontSize);
     const semanticBase = this.getSemanticVariantColor(variant);
     const hasExplicitVariantColor = semanticBase !== void 0 || this.colorResolver.hasColor(variant);
@@ -7378,21 +7565,47 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const borderColor = variantColor;
     const textColor = variantColor;
     const strokeWidth = 0.5;
-    return `<g${this.getDataNodeId(node)}>
+    const iconOffsetY = buttonY + (buttonHeight - iconSize) / 2;
+    const iconX = iconAlign === "right" ? pos.x + buttonWidth - edgePad - iconSize : pos.x + edgePad;
+    const textAlign = String(node.props.align || "center").toLowerCase();
+    const sidePad = textPad + 4;
+    let textX;
+    let textAnchor;
+    if (textAlign === "left") {
+      textX = iconSvg && iconAlign === "left" ? pos.x + edgePad + iconSize + iconGap : pos.x + sidePad;
+      textAnchor = "start";
+    } else if (textAlign === "right") {
+      textX = iconSvg && iconAlign === "right" ? pos.x + buttonWidth - edgePad - iconSize - iconGap : pos.x + buttonWidth - sidePad;
+      textAnchor = "end";
+    } else {
+      textX = pos.x + buttonWidth / 2;
+      textAnchor = "middle";
+    }
+    let svg = `<g${this.getDataNodeId(node)}>
       <rect x="${pos.x}" y="${buttonY}"
             width="${buttonWidth}" height="${buttonHeight}"
             rx="${radius}"
             fill="none"
             stroke="${borderColor}"
             stroke-width="${strokeWidth}"
-            filter="url(#sketch-rough)"/>
-      <text x="${pos.x + buttonWidth / 2}" y="${buttonY + buttonHeight / 2 + fontSize * 0.35}"
+            filter="url(#sketch-rough)"/>`;
+    if (iconSvg) {
+      svg += `
+      <g transform="translate(${iconX}, ${iconOffsetY})">
+        <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${textColor}" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round">
+          ${this.extractSvgContent(iconSvg)}
+        </svg>
+      </g>`;
+    }
+    svg += `
+      <text x="${textX}" y="${buttonY + buttonHeight / 2 + fontSize * 0.35}"
             font-family="${this.fontFamily}"
             font-size="${fontSize}"
             font-weight="${fontWeight}"
             fill="${textColor}"
-            text-anchor="middle">${this.escapeXml(visibleText)}</text>
+            text-anchor="${textAnchor}">${this.escapeXml(visibleText)}</text>
     </g>`;
+    return svg;
   }
   /**
    * Render badge with colored border instead of fill
@@ -7517,29 +7730,67 @@ var SketchSVGRenderer = class extends SVGRenderer {
   renderInput(node, pos) {
     const label = String(node.props.label || "");
     const placeholder = String(node.props.placeholder || "");
+    const iconLeftName = String(node.props.iconLeft || "").trim();
+    const iconRightName = String(node.props.iconRight || "").trim();
     const radius = this.tokens.input.radius;
     const fontSize = this.tokens.input.fontSize;
     const paddingX = this.tokens.input.paddingX;
     const labelOffset = this.getControlLabelOffset(label);
     const controlY = pos.y + labelOffset;
     const controlHeight = Math.max(16, pos.height - labelOffset);
-    return `<g${this.getDataNodeId(node)}>
-      ${label ? `<text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}"
+    const iconSize = 16;
+    const iconPad = 12;
+    const iconInnerGap = 8;
+    const iconLeftSvg = iconLeftName ? getIcon(iconLeftName) : null;
+    const iconRightSvg = iconRightName ? getIcon(iconRightName) : null;
+    const leftOffset = iconLeftSvg ? iconPad + iconSize + iconInnerGap : 0;
+    const rightOffset = iconRightSvg ? iconPad + iconSize + iconInnerGap : 0;
+    const textX = pos.x + (iconLeftSvg ? leftOffset : paddingX);
+    const iconColor = "#888888";
+    const iconCenterY = controlY + (controlHeight - iconSize) / 2;
+    let svg = `<g${this.getDataNodeId(node)}>`;
+    if (label) {
+      svg += `
+      <text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}"
             font-family="${this.fontFamily}"
             font-size="12"
-            fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>` : ""}
+            fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>`;
+    }
+    svg += `
       <rect x="${pos.x}" y="${controlY}"
             width="${pos.width}" height="${controlHeight}"
             rx="${radius}"
             fill="${this.renderTheme.cardBg}"
             stroke="#2D3748"
             stroke-width="0.5"
-            filter="url(#sketch-rough)"/>
-      ${placeholder ? `<text x="${pos.x + paddingX}" y="${controlY + controlHeight / 2 + 5}"
+            filter="url(#sketch-rough)"/>`;
+    if (iconLeftSvg) {
+      svg += `
+      <g transform="translate(${pos.x + iconPad}, ${iconCenterY})">
+        <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          ${this.extractSvgContent(iconLeftSvg)}
+        </svg>
+      </g>`;
+    }
+    if (iconRightSvg) {
+      svg += `
+      <g transform="translate(${pos.x + pos.width - iconPad - iconSize}, ${iconCenterY})">
+        <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          ${this.extractSvgContent(iconRightSvg)}
+        </svg>
+      </g>`;
+    }
+    if (placeholder) {
+      const availWidth = pos.width - (iconLeftSvg ? leftOffset : paddingX) - (iconRightSvg ? rightOffset : paddingX);
+      const visiblePh = this.truncateTextToWidth(placeholder, Math.max(0, availWidth), fontSize);
+      svg += `
+      <text x="${textX}" y="${controlY + controlHeight / 2 + 5}"
             font-family="${this.fontFamily}"
             font-size="${fontSize}"
-            fill="${this.renderTheme.textMuted}">${this.escapeXml(placeholder)}</text>` : ""}
-    </g>`;
+            fill="${this.renderTheme.textMuted}">${this.escapeXml(visiblePh)}</text>`;
+    }
+    svg += "\n    </g>";
+    return svg;
   }
   /**
    * Render textarea with thicker border
@@ -7793,31 +8044,67 @@ var SketchSVGRenderer = class extends SVGRenderer {
   renderSelect(node, pos) {
     const label = String(node.props.label || "");
     const placeholder = String(node.props.placeholder || "Select...");
+    const iconLeftName = String(node.props.iconLeft || "").trim();
+    const iconRightName = String(node.props.iconRight || "").trim();
     const labelOffset = this.getControlLabelOffset(label);
     const controlY = pos.y + labelOffset;
     const controlHeight = Math.max(16, pos.height - labelOffset);
     const centerY = controlY + controlHeight / 2 + 5;
-    return `<g${this.getDataNodeId(node)}>
-    ${label ? `<text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}"
+    const iconSize = 16;
+    const iconPad = 12;
+    const iconInnerGap = 8;
+    const iconLeftSvg = iconLeftName ? getIcon(iconLeftName) : null;
+    const iconRightSvg = iconRightName ? getIcon(iconRightName) : null;
+    const leftOffset = iconLeftSvg ? iconPad + iconSize + iconInnerGap : 0;
+    const chevronWidth = 20;
+    const iconColor = "#888888";
+    const iconCenterY = controlY + (controlHeight - iconSize) / 2;
+    let svg = `<g${this.getDataNodeId(node)}>`;
+    if (label) {
+      svg += `
+    <text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}"
           font-family="${this.fontFamily}"
           font-size="12"
-          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>` : ""}
+          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>`;
+    }
+    svg += `
     <rect x="${pos.x}" y="${controlY}"
           width="${pos.width}" height="${controlHeight}"
           rx="6"
           fill="${this.renderTheme.cardBg}"
           stroke="#2D3748"
           stroke-width="0.5"
-          filter="url(#sketch-rough)"/>
-    <text x="${pos.x + 12}" y="${centerY}"
+          filter="url(#sketch-rough)"/>`;
+    if (iconLeftSvg) {
+      svg += `
+    <g transform="translate(${pos.x + iconPad}, ${iconCenterY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconLeftSvg)}
+      </svg>
+    </g>`;
+    }
+    if (iconRightSvg) {
+      svg += `
+    <g transform="translate(${pos.x + pos.width - chevronWidth - iconPad - iconSize}, ${iconCenterY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconRightSvg)}
+      </svg>
+    </g>`;
+    }
+    const textX = pos.x + (iconLeftSvg ? leftOffset : 12);
+    const availWidth = pos.width - (iconLeftSvg ? leftOffset : 12) - chevronWidth - (iconRightSvg ? iconPad + iconSize + iconInnerGap : 0);
+    const visiblePh = this.truncateTextToWidth(placeholder, Math.max(0, availWidth), 14);
+    svg += `
+    <text x="${textX}" y="${centerY}"
           font-family="${this.fontFamily}"
           font-size="14"
-          fill="${this.renderTheme.textMuted}">${this.escapeXml(placeholder)}</text>
+          fill="${this.renderTheme.textMuted}">${this.escapeXml(visiblePh)}</text>
     <text x="${pos.x + pos.width - 20}" y="${centerY}"
           font-family="${this.fontFamily}"
           font-size="16"
           fill="${this.renderTheme.textMuted}">\u25BC</text>
   </g>`;
+    return svg;
   }
   /**
    * Render checkbox with sketch filter and Comic Sans
@@ -8216,44 +8503,43 @@ var SketchSVGRenderer = class extends SVGRenderer {
   renderImage(node, pos) {
     const placeholder = String(node.props.placeholder || "landscape").toLowerCase();
     const iconType = String(node.props.icon || "").trim();
+    const variant = String(node.props.variant || "").trim();
     const iconSvg = placeholder === "icon" && iconType.length > 0 ? getIcon(iconType) : null;
+    const imageBg = this.options.theme === "dark" ? "#2A2A2A" : "#E8E8E8";
     if (iconSvg) {
-      const badgeSize = Math.max(24, Math.min(pos.width, pos.height) * 0.6);
-      const badgeX = pos.x + (pos.width - badgeSize) / 2;
-      const badgeY = pos.y + (pos.height - badgeSize) / 2;
-      const iconSize = badgeSize * 0.62;
-      const iconOffsetX = badgeX + (badgeSize - iconSize) / 2;
-      const iconOffsetY = badgeY + (badgeSize - iconSize) / 2;
+      const semanticBase = variant ? this.getSemanticVariantColor(variant) : void 0;
+      const hasVariant = variant.length > 0 && (semanticBase !== void 0 || this.colorResolver.hasColor(variant));
+      const variantColor = hasVariant ? this.resolveVariantColor(variant, this.renderTheme.primary) : null;
+      const bgColor = hasVariant ? this.hexToRgba(variantColor, 0.12) : imageBg;
+      const iconColor = hasVariant ? variantColor : "#666666";
+      const iconSize = Math.max(16, Math.min(pos.width, pos.height) * 0.6);
+      const iconOffsetX = pos.x + (pos.width - iconSize) / 2;
+      const iconOffsetY = pos.y + (pos.height - iconSize) / 2;
       return `<g${this.getDataNodeId(node)}>
-    <!-- Image Background -->
     <rect x="${pos.x}" y="${pos.y}"
           width="${pos.width}" height="${pos.height}"
-          fill="#E8E8E8"
-          stroke="#2D3748"
-          stroke-width="0.5"
+          fill="${bgColor}"
           rx="4"
           filter="url(#sketch-rough)"/>
-
-    <!-- Custom Icon Placeholder -->
-    <rect x="${badgeX}" y="${badgeY}"
-          width="${badgeSize}" height="${badgeSize}"
-          rx="${Math.max(4, badgeSize * 0.2)}"
-          fill="none"
-          stroke="#2D3748"
-          stroke-width="0.5"
-          filter="url(#sketch-rough)"/>
     <g transform="translate(${iconOffsetX}, ${iconOffsetY})">
-      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="#2D3748" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
         ${this.extractSvgContent(iconSvg)}
       </svg>
     </g>
+    <rect x="${pos.x}" y="${pos.y}"
+          width="${pos.width}" height="${pos.height}"
+          fill="none"
+          stroke="#2D3748"
+          stroke-width="0.5"
+          rx="4"
+          filter="url(#sketch-rough)"/>
   </g>`;
     }
     return `<g${this.getDataNodeId(node)}>
     <!-- Image Background -->
     <rect x="${pos.x}" y="${pos.y}"
           width="${pos.width}" height="${pos.height}"
-          fill="#E8E8E8"
+          fill="${imageBg}"
           stroke="#2D3748"
           stroke-width="0.5"
           rx="4"
@@ -8308,17 +8594,23 @@ var SketchSVGRenderer = class extends SVGRenderer {
    */
   renderSidebarMenu(node, pos) {
     const itemsStr = String(node.props.items || "Item 1,Item 2,Item 3");
+    const iconsStr = String(node.props.icons || "");
     const items = itemsStr.split(",").map((s) => s.trim());
+    const icons = iconsStr ? iconsStr.split(",").map((s) => s.trim()) : [];
     const itemHeight = 40;
     const fontSize = 14;
     const activeIndex = Number(node.props.active || 0);
     const accentColor = this.resolveAccentColor();
+    const variantProp = String(node.props.variant || "").trim();
+    const semanticVariant = variantProp ? this.getSemanticVariantColor(variantProp) : void 0;
+    const hasVariant = variantProp.length > 0 && (semanticVariant !== void 0 || this.colorResolver.hasColor(variantProp));
+    const activeColor = hasVariant ? this.resolveVariantColor(variantProp, accentColor) : accentColor;
     let svg = `<g${this.getDataNodeId(node)}>`;
     items.forEach((item, index) => {
       const itemY = pos.y + index * itemHeight;
       const isActive = index === activeIndex;
-      const bgColor = isActive ? this.hexToRgba(accentColor, 0.15) : "transparent";
-      const textColor = isActive ? accentColor : this.resolveTextColor();
+      const bgColor = isActive ? this.hexToRgba(activeColor, 0.15) : "transparent";
+      const textColor = isActive ? activeColor : this.resolveTextColor();
       const fontWeight = isActive ? "500" : "400";
       if (isActive) {
         svg += `
@@ -8328,8 +8620,24 @@ var SketchSVGRenderer = class extends SVGRenderer {
           fill="${bgColor}"
           filter="url(#sketch-rough)"/>`;
       }
+      let currentX = pos.x + 12;
+      if (icons[index]) {
+        const iconSvg = getIcon(icons[index]);
+        if (iconSvg) {
+          const iconSize = 16;
+          const iconY = itemY + (itemHeight - iconSize) / 2;
+          const iconColor = isActive ? activeColor : this.resolveMutedColor();
+          svg += `
+    <g transform="translate(${currentX}, ${iconY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconSvg)}
+      </svg>
+    </g>`;
+          currentX += iconSize + 8;
+        }
+      }
       svg += `
-    <text x="${pos.x + 12}" y="${itemY + itemHeight / 2 + 5}"
+    <text x="${currentX}" y="${itemY + itemHeight / 2 + 5}"
           font-family="${this.fontFamily}"
           font-size="${fontSize}"
           font-weight="${fontWeight}"