@wire-dsl/engine 0.3.0 → 0.4.1

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",
@@ -2244,7 +2245,21 @@ var IRComponentNodeSchema = import_zod.z.object({
   style: IRNodeStyleSchema,
   meta: IRMetaSchema
 });
-var IRNodeSchema = import_zod.z.union([IRContainerNodeSchema, IRComponentNodeSchema]);
+var IRInstanceNodeSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  kind: import_zod.z.literal("instance"),
+  definitionName: import_zod.z.string(),
+  definitionKind: import_zod.z.enum(["component", "layout"]),
+  invocationProps: import_zod.z.record(import_zod.z.string(), import_zod.z.union([import_zod.z.string(), import_zod.z.number()])),
+  expandedRoot: import_zod.z.object({ ref: import_zod.z.string() }),
+  style: IRNodeStyleSchema,
+  meta: IRMetaSchema
+});
+var IRNodeSchema = import_zod.z.discriminatedUnion("kind", [
+  IRContainerNodeSchema,
+  IRComponentNodeSchema,
+  IRInstanceNodeSchema
+]);
 var IRScreenSchema = import_zod.z.object({
   id: import_zod.z.string(),
   name: import_zod.z.string(),
@@ -2467,7 +2482,7 @@ ${messages}`);
     const layoutChildren = layout.children;
     const layoutDefinition = this.definedLayouts.get(layout.layoutType);
     if (layoutDefinition) {
-      return this.expandDefinedLayout(layoutDefinition, layoutParams, layoutChildren, context);
+      return this.expandDefinedLayout(layoutDefinition, layoutParams, layoutChildren, context, layout._meta?.nodeId);
     }
     const nodeId = this.idGen.generate("node");
     const childRefs = [];
@@ -2506,8 +2521,8 @@ ${messages}`);
       children: childRefs,
       style,
       meta: {
-        nodeId: layout._meta?.nodeId
-        // Pass SourceMap nodeId from AST
+        // Scope nodeId per instance so each expansion gets a unique identifier
+        nodeId: context?.instanceScope ? `${layout._meta?.nodeId}@${context.instanceScope}` : layout._meta?.nodeId
       }
     };
     this.nodes[nodeId] = containerNode;
@@ -2536,8 +2551,7 @@ ${messages}`);
       // Cells have no padding by default - grid gap handles spacing
       meta: {
         source: "cell",
-        nodeId: cell._meta?.nodeId
-        // Pass SourceMap nodeId from AST
+        nodeId: context?.instanceScope ? `${cell._meta?.nodeId}@${context.instanceScope}` : cell._meta?.nodeId
       }
     };
     this.nodes[nodeId] = containerNode;
@@ -2564,7 +2578,7 @@ ${messages}`);
     const resolvedProps = this.resolveComponentProps(component.componentType, component.props, context);
     const definition = this.definedComponents.get(component.componentType);
     if (definition) {
-      return this.expandDefinedComponent(definition, resolvedProps, context);
+      return this.expandDefinedComponent(definition, resolvedProps, component._meta?.nodeId, context);
     }
     const builtInComponents = /* @__PURE__ */ new Set([
       "Button",
@@ -2610,35 +2624,49 @@ ${messages}`);
       props: resolvedProps,
       style: {},
       meta: {
-        nodeId: component._meta?.nodeId
-        // Pass SourceMap nodeId from AST
+        // Scope nodeId per instance so each expansion gets a unique identifier
+        nodeId: context?.instanceScope ? `${component._meta?.nodeId}@${context.instanceScope}` : component._meta?.nodeId
       }
     };
     this.nodes[nodeId] = componentNode;
     return nodeId;
   }
-  expandDefinedComponent(definition, invocationArgs, parentContext) {
+  expandDefinedComponent(definition, invocationArgs, callSiteNodeId, parentContext) {
     const context = {
       args: invocationArgs,
       providedArgNames: new Set(Object.keys(invocationArgs)),
       usedArgNames: /* @__PURE__ */ new Set(),
       definitionName: definition.name,
       definitionKind: "component",
-      allowChildrenSlot: false
+      allowChildrenSlot: false,
+      // Scope internal nodeIds using the call-site nodeId
+      instanceScope: callSiteNodeId
     };
+    let expandedRootId = null;
     if (definition.body.type === "layout") {
-      const result = this.convertLayout(definition.body, context);
-      this.reportUnusedArguments(context);
-      return result;
+      expandedRootId = this.convertLayout(definition.body, context);
     } else if (definition.body.type === "component") {
-      const result = this.convertComponent(definition.body, context);
-      this.reportUnusedArguments(context);
-      return result;
+      expandedRootId = this.convertComponent(definition.body, context);
     } else {
       throw new Error(`Invalid defined component body type for "${definition.name}"`);
     }
+    this.reportUnusedArguments(context);
+    if (!expandedRootId) return null;
+    const instanceNodeId = this.idGen.generate("node");
+    const instanceNode = {
+      id: instanceNodeId,
+      kind: "instance",
+      definitionName: definition.name,
+      definitionKind: "component",
+      invocationProps: invocationArgs,
+      expandedRoot: { ref: expandedRootId },
+      style: {},
+      meta: { nodeId: callSiteNodeId }
+    };
+    this.nodes[instanceNodeId] = instanceNode;
+    return instanceNodeId;
   }
-  expandDefinedLayout(definition, invocationParams, invocationChildren, parentContext) {
+  expandDefinedLayout(definition, invocationParams, invocationChildren, parentContext, callSiteNodeId) {
     if (invocationChildren.length !== 1) {
       this.errors.push({
         type: "layout-children-arity",
@@ -2654,11 +2682,26 @@ ${messages}`);
       definitionName: definition.name,
       definitionKind: "layout",
       allowChildrenSlot: true,
-      childrenSlot: resolvedSlot
+      childrenSlot: resolvedSlot,
+      // Scope internal nodeIds using the call-site nodeId
+      instanceScope: callSiteNodeId
     };
-    const nodeId = this.convertLayout(definition.body, context);
+    const expandedRootId = this.convertLayout(definition.body, context);
     this.reportUnusedArguments(context);
-    return nodeId;
+    if (!callSiteNodeId) return expandedRootId;
+    const instanceNodeId = this.idGen.generate("node");
+    const instanceNode = {
+      id: instanceNodeId,
+      kind: "instance",
+      definitionName: definition.name,
+      definitionKind: "layout",
+      invocationProps: invocationParams,
+      expandedRoot: { ref: expandedRootId },
+      style: {},
+      meta: { nodeId: callSiteNodeId }
+    };
+    this.nodes[instanceNodeId] = instanceNode;
+    return instanceNodeId;
   }
   resolveChildrenSlot(slot, parentContext) {
     if (slot.type === "component" && slot.componentType === "Children") {
@@ -2689,6 +2732,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 +2810,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;
       }
     }
@@ -2996,6 +3067,8 @@ var LayoutEngine = class {
     }
     if (node.kind === "container") {
       this.calculateContainer(node, nodeId, x, y, width, height);
+    } else if (node.kind === "instance") {
+      this.calculateInstance(node, nodeId, x, y, width, height, parentContainerType);
     } else {
       this.calculateComponent(node, nodeId, x, y, width, height);
     }
@@ -3028,7 +3101,7 @@ var LayoutEngine = class {
         this.calculateCard(node, innerX, innerY, innerWidth, innerHeight);
         break;
     }
-    if (isVerticalStack || node.containerType === "card") {
+    if ((isVerticalStack || node.containerType === "card") && node.children.length > 0) {
       let containerMaxY = y;
       node.children.forEach((childRef) => {
         const childPos = this.result[childRef.ref];
@@ -3171,6 +3244,10 @@ var LayoutEngine = class {
     const gap = this.resolveSpacing(node.style.gap);
     const padding = this.resolveSpacing(node.style.padding);
     let totalHeight = padding * 2;
+    const EMPTY_CONTAINER_MIN_HEIGHT = 40;
+    if (node.children.length === 0) {
+      return Math.max(totalHeight, EMPTY_CONTAINER_MIN_HEIGHT);
+    }
     if (node.containerType === "grid") {
       const columns = Number(node.params.columns) || 12;
       const colWidth = (availableWidth - gap * (columns - 1)) / columns;
@@ -3423,6 +3500,20 @@ var LayoutEngine = class {
       }
     });
   }
+  /**
+   * Calculate layout for an instance node.
+   * The instance is a transparent wrapper — its bounding box equals the
+   * expanded root's bounding box. We calculate the expanded root first and
+   * then copy its position to the instance nodeId so the renderer can use it.
+   */
+  calculateInstance(node, nodeId, x, y, width, height, parentContainerType) {
+    const expandedRootId = node.expandedRoot.ref;
+    this.calculateNode(expandedRootId, x, y, width, height, parentContainerType);
+    const expandedPos = this.result[expandedRootId];
+    if (expandedPos) {
+      this.result[nodeId] = { ...expandedPos };
+    }
+  }
   calculateComponent(node, nodeId, x, y, width, height) {
     if (node.kind !== "component") return;
     const componentWidth = Number(node.props.width) || width;
@@ -4563,14 +4654,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 {
@@ -4588,7 +4679,8 @@ var SVGRenderer = class {
       height: options?.height || 720,
       theme: colorScheme,
       includeLabels: options?.includeLabels ?? true,
-      screenName: options?.screenName
+      screenName: options?.screenName,
+      showDiagnostics: options?.showDiagnostics ?? false
     };
     this.colorResolver = new ColorResolver();
     this.buildParentContainerIndex();
@@ -4688,13 +4780,30 @@ var SVGRenderer = class {
       if (node.containerType === "split") {
         this.renderSplitDecoration(node, pos, containerGroup);
       }
-      node.children.forEach((childRef) => {
-        this.renderNode(childRef.ref, containerGroup);
-      });
+      if (node.children.length === 0 && this.options.showDiagnostics) {
+        containerGroup.push(this.renderEmptyContainerDiagnostic(pos, node.containerType));
+      } else {
+        node.children.forEach((childRef) => {
+          this.renderNode(childRef.ref, containerGroup);
+        });
+      }
       if (hasNodeId) {
         containerGroup.push("</g>");
       }
       output.push(...containerGroup);
+    } else if (node.kind === "instance") {
+      const instanceGroup = [];
+      if (node.meta.nodeId) {
+        instanceGroup.push(`<g data-node-id="${node.meta.nodeId}">`);
+      }
+      instanceGroup.push(
+        `<rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="transparent" stroke="none" pointer-events="all"/>`
+      );
+      this.renderNode(node.expandedRoot.ref, instanceGroup);
+      if (node.meta.nodeId) {
+        instanceGroup.push("</g>");
+      }
+      output.push(...instanceGroup);
     } else if (node.kind === "component") {
       const componentSvg = this.renderComponent(node, pos);
       if (componentSvg) {
@@ -4811,6 +4920,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 +4929,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 +5025,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");
@@ -4913,7 +5094,7 @@ var SVGRenderer = class {
     const variant = String(node.props.variant || "default");
     const accentColor = variant === "default" ? this.resolveAccentColor() : this.resolveVariantColor(variant, this.resolveAccentColor());
     const showBorder = this.parseBooleanProp(node.props.border, false);
-    const showBackground = this.parseBooleanProp(node.props.background ?? node.props.backround, false);
+    const showBackground = this.parseBooleanProp(node.props.background, false);
     const radiusMap = {
       none: 0,
       sm: 4,
@@ -5052,6 +5233,21 @@ var SVGRenderer = class {
     </g>`;
     output.push(svg);
   }
+  /**
+   * Renders a yellow warning placeholder for containers with no children.
+   * Only shown when `showDiagnostics` is enabled (editor/canvas mode).
+   */
+  renderEmptyContainerDiagnostic(pos, containerType) {
+    const diagColor = "#F59E0B";
+    const diagBg = "#FFFBEB";
+    const diagText = "#92400E";
+    const minHeight = 40;
+    const h = Math.max(pos.height, minHeight);
+    const cx = pos.x + pos.width / 2;
+    const cy = pos.y + h / 2;
+    const label = containerType ? `Empty ${containerType}` : "Empty layout";
+    return `<g><rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${h}" rx="4" fill="${diagBg}" stroke="${diagColor}" stroke-width="1" stroke-dasharray="6 3"/><text x="${cx}" y="${cy}" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="${diagText}" text-anchor="middle" dominant-baseline="middle">${label}</text></g>`;
+  }
   renderSplitDecoration(node, pos, output) {
     if (node.kind !== "container") return;
     const gap = this.resolveSpacing(node.style.gap);
@@ -5100,7 +5296,7 @@ var SVGRenderer = class {
     const hasCaption = caption.length > 0;
     const showOuterBorder = this.parseBooleanProp(node.props.border, false);
     const showOuterBackground = this.parseBooleanProp(
-      node.props.background ?? node.props.backround,
+      node.props.background,
       false
     );
     const showInnerBorder = this.parseBooleanProp(node.props.innerBorder, true);
@@ -5483,30 +5679,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 +6171,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 +6191,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 +6317,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 +6341,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 +6352,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 +6395,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 +6456,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];
   }
@@ -6501,10 +6763,11 @@ var SVGRenderer = class {
   buildParentContainerIndex() {
     this.parentContainerByChildId.clear();
     Object.values(this.ir.project.nodes).forEach((node) => {
-      if (node.kind !== "container") return;
-      node.children.forEach((childRef) => {
-        this.parentContainerByChildId.set(childRef.ref, node);
-      });
+      if (node.kind === "container") {
+        node.children.forEach((childRef) => {
+          this.parentContainerByChildId.set(childRef.ref, node);
+        });
+      }
     });
   }
   escapeXml(text) {
@@ -6685,6 +6948,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)
    */
@@ -6926,7 +7202,7 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
     const hasCaption = String(node.props.caption || "").trim().length > 0;
     const showOuterBorder = this.parseBooleanProp(node.props.border, false);
     const showOuterBackground = this.parseBooleanProp(
-      node.props.background ?? node.props.backround,
+      node.props.background,
       false
     );
     const showInnerBorder = this.parseBooleanProp(node.props.innerBorder, true);
@@ -7041,7 +7317,7 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
     const variant = String(node.props.variant || "default");
     const accentBlock = variant === "default" ? this.renderTheme.border : this.hexToRgba(this.resolveVariantColor(variant, this.resolveAccentColor()), 0.35);
     const showBorder = this.parseBooleanProp(node.props.border, false);
-    const showBackground = this.parseBooleanProp(node.props.background ?? node.props.backround, false);
+    const showBackground = this.parseBooleanProp(node.props.background, false);
     const radiusMap = {
       none: 0,
       sm: 4,
@@ -7359,6 +7635,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 +7646,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 +7661,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 +7826,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 +8140,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 +8599,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 +8690,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 +8716,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}"