@wire-dsl/engine 0.2.4 → 0.4.0

package/dist/index.cjs

@@ -94,20 +94,21 @@ var SourceMapBuilder = class {
     return nodeId;
   }
   /**
-   * Generate semantic node ID based on type and subtype
-   * Format: {type}-{subtype}-{counter} or {type}-{counter}
-   * 
-   * Examples:
-   * - project → "project"
-   * - theme → "theme"
-   * - mocks → "mocks"
-   * - colors → "colors"
-   * - screen → "screen-0", "screen-1"
-   * - component Button → "component-button-0", "component-button-1"
-   * - layout stack → "layout-stack-0", "layout-stack-1"
-   * - cell → "cell-0", "cell-1"
-   * - component-definition → "define-MyButton"
-   */
+    * Generate semantic node ID based on type and subtype
+    * Format: {type}-{subtype}-{counter} or {type}-{counter}
+    * 
+    * Examples:
+    * - project → "project"
+    * - theme → "theme"
+    * - mocks → "mocks"
+    * - colors → "colors"
+    * - screen → "screen-0", "screen-1"
+    * - component Button → "component-button-0", "component-button-1"
+    * - layout stack → "layout-stack-0", "layout-stack-1"
+  * - cell → "cell-0", "cell-1"
+  * - component-definition → "define-MyButton"
+  * - layout-definition → "define-layout-MyShell"
+    */
   generateNodeId(type, metadata) {
     switch (type) {
       case "project":
@@ -143,6 +144,8 @@ var SourceMapBuilder = class {
       }
       case "component-definition":
         return `define-${metadata?.name || "unknown"}`;
+      case "layout-definition":
+        return `define-layout-${metadata?.name || "unknown"}`;
       default:
         return `${type}-0`;
     }
@@ -228,7 +231,7 @@ var SourceMapBuilder = class {
   }
   /**
    * Calculate insertionPoints for all container nodes
-   * Container nodes: project, screen, layout, cell, component-definition
+   * Container nodes: project, screen, layout, cell, component-definition, layout-definition
    */
   calculateAllInsertionPoints() {
     const containerTypes = [
@@ -236,7 +239,8 @@ var SourceMapBuilder = class {
       "screen",
       "layout",
       "cell",
-      "component-definition"
+      "component-definition",
+      "layout-definition"
     ];
     for (const entry of this.entries) {
       if (containerTypes.includes(entry.type)) {
@@ -462,19 +466,23 @@ var SourceMapBuilder = class {
 };
 
 // src/parser/index.ts
-var Project = (0, import_chevrotain.createToken)({ name: "Project", pattern: /project/ });
-var Screen = (0, import_chevrotain.createToken)({ name: "Screen", pattern: /screen/ });
-var Layout = (0, import_chevrotain.createToken)({ name: "Layout", pattern: /layout/ });
-var Component = (0, import_chevrotain.createToken)({ name: "Component", pattern: /component/ });
+var Project = (0, import_chevrotain.createToken)({ name: "Project", pattern: /project\b/ });
+var Screen = (0, import_chevrotain.createToken)({ name: "Screen", pattern: /screen\b/ });
+var Layout = (0, import_chevrotain.createToken)({ name: "Layout", pattern: /layout\b/ });
+var Component = (0, import_chevrotain.createToken)({ name: "Component", pattern: /component\b/ });
 var ComponentKeyword = (0, import_chevrotain.createToken)({
   name: "ComponentKeyword",
   pattern: /Component\b/
 });
-var Define = (0, import_chevrotain.createToken)({ name: "Define", pattern: /define/ });
-var Style = (0, import_chevrotain.createToken)({ name: "Style", pattern: /style/ });
-var Mocks = (0, import_chevrotain.createToken)({ name: "Mocks", pattern: /mocks/ });
+var LayoutKeyword = (0, import_chevrotain.createToken)({
+  name: "LayoutKeyword",
+  pattern: /Layout\b/
+});
+var Define = (0, import_chevrotain.createToken)({ name: "Define", pattern: /define\b/ });
+var Style = (0, import_chevrotain.createToken)({ name: "Style", pattern: /style\b/ });
+var Mocks = (0, import_chevrotain.createToken)({ name: "Mocks", pattern: /mocks\b/ });
 var Colors = (0, import_chevrotain.createToken)({ name: "Colors", pattern: /colors(?=\s*\{)/ });
-var Cell = (0, import_chevrotain.createToken)({ name: "Cell", pattern: /cell/ });
+var Cell = (0, import_chevrotain.createToken)({ name: "Cell", pattern: /cell\b/ });
 var LCurly = (0, import_chevrotain.createToken)({ name: "LCurly", pattern: /{/ });
 var RCurly = (0, import_chevrotain.createToken)({ name: "RCurly", pattern: /}/ });
 var LParen = (0, import_chevrotain.createToken)({ name: "LParen", pattern: /\(/ });
@@ -521,6 +529,7 @@ var allTokens = [
   Project,
   Screen,
   Layout,
+  LayoutKeyword,
   ComponentKeyword,
   Component,
   Define,
@@ -553,6 +562,7 @@ var WireDSLParser = class extends import_chevrotain.CstParser {
       this.MANY(() => {
         this.OR([
           { ALT: () => this.SUBRULE(this.definedComponent) },
+          { ALT: () => this.SUBRULE(this.definedLayout) },
           { ALT: () => this.SUBRULE(this.styleDecl) },
           { ALT: () => this.SUBRULE(this.mocksDecl) },
           { ALT: () => this.SUBRULE(this.colorsDecl) },
@@ -621,6 +631,15 @@ var WireDSLParser = class extends import_chevrotain.CstParser {
       ]);
       this.CONSUME(RCurly);
     });
+    // define Layout "ScreenShell" { layout split { ... } }
+    this.definedLayout = this.RULE("definedLayout", () => {
+      this.CONSUME(Define);
+      this.CONSUME(LayoutKeyword, { LABEL: "layoutKeyword" });
+      this.CONSUME(StringLiteral, { LABEL: "layoutName" });
+      this.CONSUME(LCurly);
+      this.SUBRULE(this.layout);
+      this.CONSUME(RCurly);
+    });
     // screen Main(background: white) { ... }
     this.screen = this.RULE("screen", () => {
       this.CONSUME(Screen);
@@ -709,6 +728,7 @@ var WireDSLVisitor = class extends BaseCstVisitor {
     const mocks = {};
     const colors = {};
     const definedComponents = [];
+    const definedLayouts = [];
     const screens = [];
     if (ctx.styleDecl && ctx.styleDecl.length > 0) {
       const styleBlock = this.visit(ctx.styleDecl[0]);
@@ -727,6 +747,11 @@ var WireDSLVisitor = class extends BaseCstVisitor {
         definedComponents.push(this.visit(comp));
       });
     }
+    if (ctx.definedLayout) {
+      ctx.definedLayout.forEach((layoutDef) => {
+        definedLayouts.push(this.visit(layoutDef));
+      });
+    }
     if (ctx.screen) {
       ctx.screen.forEach((screen) => {
         screens.push(this.visit(screen));
@@ -739,6 +764,7 @@ var WireDSLVisitor = class extends BaseCstVisitor {
       mocks,
       colors,
       definedComponents,
+      definedLayouts,
       screens
     };
   }
@@ -803,6 +829,15 @@ var WireDSLVisitor = class extends BaseCstVisitor {
       body
     };
   }
+  definedLayout(ctx) {
+    const name = ctx.layoutName[0].image.slice(1, -1);
+    const body = this.visit(ctx.layout[0]);
+    return {
+      type: "definedLayout",
+      name,
+      body
+    };
+  }
   screen(ctx) {
     const params = ctx.paramList ? this.visit(ctx.paramList[0]) : {};
     return {
@@ -933,6 +968,7 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
   constructor(sourceMapBuilder) {
     super();
     this.definedComponentNames = /* @__PURE__ */ new Set();
+    this.definedLayoutNames = /* @__PURE__ */ new Set();
     this.sourceMapBuilder = sourceMapBuilder;
   }
   project(ctx) {
@@ -941,6 +977,7 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
     const mocks = {};
     const colors = {};
     const definedComponents = [];
+    const definedLayouts = [];
     const screens = [];
     const tokens = {
       keyword: ctx.Project[0],
@@ -955,6 +992,8 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
       colors: {},
       definedComponents: [],
       // Will be filled after push
+      definedLayouts: [],
+      // Will be filled after push
       screens: []
       // Will be filled after push
     };
@@ -984,6 +1023,11 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
         ast.definedComponents.push(this.visit(comp));
       });
     }
+    if (ctx.definedLayout) {
+      ctx.definedLayout.forEach((layoutDef) => {
+        ast.definedLayouts.push(this.visit(layoutDef));
+      });
+    }
     if (ctx.screen) {
       ctx.screen.forEach((screen) => {
         ast.screens.push(this.visit(screen));
@@ -1228,6 +1272,35 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
     }
     return ast;
   }
+  definedLayout(ctx) {
+    const name = ctx.layoutName[0].image.slice(1, -1);
+    this.definedLayoutNames.add(name);
+    const tokens = {
+      keyword: ctx.Define[0],
+      name: ctx.layoutName[0],
+      body: ctx.RCurly[0]
+    };
+    const ast = {
+      type: "definedLayout",
+      name,
+      body: {}
+      // Will be filled after push
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode(
+        "layout-definition",
+        tokens,
+        { name }
+      );
+      ast._meta = { nodeId };
+      this.sourceMapBuilder.pushParent(nodeId);
+    }
+    ast.body = this.visit(ctx.layout[0]);
+    if (this.sourceMapBuilder) {
+      this.sourceMapBuilder.popParent();
+    }
+    return ast;
+  }
   // Override styleDecl to capture style block in SourceMap
   styleDecl(ctx) {
     const style = {};
@@ -1407,6 +1480,13 @@ function buildLayoutRulesFromMetadata() {
 var BUILT_IN_COMPONENTS = new Set(Object.keys(import_components.COMPONENTS));
 var COMPONENT_RULES = buildComponentRulesFromMetadata();
 var LAYOUT_RULES = buildLayoutRulesFromMetadata();
+var BUILT_IN_LAYOUTS = new Set(Object.keys(import_components.LAYOUTS));
+function isPascalCaseIdentifier(name) {
+  return /^[A-Z][A-Za-z0-9]*$/.test(name);
+}
+function isValidDefinedLayoutName(name) {
+  return /^[a-z][a-z0-9_]*$/.test(name);
+}
 function toFallbackRange() {
   return {
     start: { line: 1, column: 0 },
@@ -1498,6 +1578,17 @@ function isBooleanLike(value) {
   const normalized = String(value).trim().toLowerCase();
   return normalized === "true" || normalized === "false";
 }
+function parseBooleanLike(value, fallback = false) {
+  if (typeof value === "number") {
+    if (value === 1) return true;
+    if (value === 0) return false;
+    return fallback;
+  }
+  const normalized = String(value).trim().toLowerCase();
+  if (normalized === "true") return true;
+  if (normalized === "false") return false;
+  return fallback;
+}
 function getPropertyRange(entry, propertyName, mode = "full") {
   const prop = entry?.properties?.[propertyName];
   if (!prop) return entry?.range || toFallbackRange();
@@ -1515,21 +1606,55 @@ function validateSemanticDiagnostics(ast, sourceMap) {
   const diagnostics = [];
   const sourceMapByNodeId = new Map(sourceMap.map((entry) => [entry.nodeId, entry]));
   const definedComponents = new Set(ast.definedComponents.map((dc) => dc.name));
-  const emitWarning = (message, code, range, nodeId, suggestion) => {
+  const definedLayouts = new Set(ast.definedLayouts.map((dl) => dl.name));
+  const emitDiagnostic = (severity, message, code, range, nodeId, suggestion) => {
     diagnostics.push({
       message,
       code,
-      severity: "warning",
+      severity,
       phase: "semantic",
       range,
       nodeId,
       suggestion
     });
   };
-  const checkComponent = (component) => {
+  const emitWarning = (message, code, range, nodeId, suggestion) => emitDiagnostic("warning", message, code, range, nodeId, suggestion);
+  const emitError = (message, code, range, nodeId, suggestion) => emitDiagnostic("error", message, code, range, nodeId, suggestion);
+  const countChildrenSlots = (layout) => {
+    let count = 0;
+    for (const child of layout.children) {
+      if (child.type === "component") {
+        if (child.componentType === "Children") count += 1;
+      } else if (child.type === "layout") {
+        count += countChildrenSlots(child);
+      } else if (child.type === "cell") {
+        for (const cellChild of child.children) {
+          if (cellChild.type === "component") {
+            if (cellChild.componentType === "Children") count += 1;
+          } else if (cellChild.type === "layout") {
+            count += countChildrenSlots(cellChild);
+          }
+        }
+      }
+    }
+    return count;
+  };
+  const checkComponent = (component, insideDefinedLayout) => {
     const nodeId = component._meta?.nodeId;
     const entry = nodeId ? sourceMapByNodeId.get(nodeId) : void 0;
     const componentType = component.componentType;
+    if (componentType === "Children") {
+      if (!insideDefinedLayout) {
+        emitError(
+          'Component "Children" can only be used inside a define Layout body.',
+          "CHILDREN_SLOT_OUTSIDE_LAYOUT_DEFINITION",
+          entry?.nameRange || entry?.range || toFallbackRange(),
+          nodeId,
+          "Move this placeholder into a define Layout block."
+        );
+      }
+      return;
+    }
     if (!BUILT_IN_COMPONENTS.has(componentType) && !definedComponents.has(componentType)) {
       emitWarning(
         `Component "${componentType}" is not a built-in component and has no local definition.`,
@@ -1570,7 +1695,9 @@ function validateSemanticDiagnostics(ast, sourceMap) {
       const enumValues = rules.enumProps?.[propName];
       if (enumValues) {
         const normalizedValue = String(propValue);
-        if (!enumValues.includes(normalizedValue)) {
+        const isCustomVariantFromColors = propName === "variant" && !enumValues.includes(normalizedValue) && Object.prototype.hasOwnProperty.call(ast.colors || {}, normalizedValue);
+        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",
@@ -1590,11 +1717,40 @@ function validateSemanticDiagnostics(ast, sourceMap) {
         );
       }
     }
+    if (componentType === "Table") {
+      const hasCaption = String(component.props.caption || "").trim().length > 0;
+      const hasPagination = parseBooleanLike(component.props.pagination ?? "false", false);
+      if (hasCaption && hasPagination) {
+        const rawPaginationAlign = String(component.props.paginationAlign || "right");
+        const paginationAlign = rawPaginationAlign === "left" || rawPaginationAlign === "center" || rawPaginationAlign === "right" ? rawPaginationAlign : "right";
+        const rawCaptionAlign = String(component.props.captionAlign || "");
+        const captionAlign = rawCaptionAlign === "left" || rawCaptionAlign === "center" || rawCaptionAlign === "right" ? rawCaptionAlign : paginationAlign === "left" ? "right" : "left";
+        if (captionAlign === paginationAlign) {
+          emitWarning(
+            `Table footer collision: "captionAlign" and "paginationAlign" both resolve to "${captionAlign}".`,
+            "TABLE_FOOTER_ALIGNMENT_COLLISION",
+            entry?.range || toFallbackRange(),
+            nodeId,
+            "Use different alignments to avoid visual overlap."
+          );
+        }
+      }
+    }
   };
-  const checkLayout = (layout) => {
+  const checkLayout = (layout, insideDefinedLayout) => {
     const nodeId = layout._meta?.nodeId;
     const entry = nodeId ? sourceMapByNodeId.get(nodeId) : void 0;
     const rules = LAYOUT_RULES[layout.layoutType];
+    const isDefinedLayoutUsage = definedLayouts.has(layout.layoutType);
+    if (isDefinedLayoutUsage && layout.children.length !== 1) {
+      emitError(
+        `Layout "${layout.layoutType}" expects exactly one child for its Children slot.`,
+        "LAYOUT_DEFINITION_CHILDREN_ARITY",
+        entry?.bodyRange || entry?.range || toFallbackRange(),
+        nodeId,
+        "Provide exactly one nested child block when using this layout."
+      );
+    }
     if (layout.children.length === 0) {
       emitWarning(
         `Layout "${layout.layoutType}" is empty.`,
@@ -1604,7 +1760,7 @@ function validateSemanticDiagnostics(ast, sourceMap) {
         "Add at least one child: component, layout, or cell."
       );
     }
-    if (!rules) {
+    if (!rules && !isDefinedLayoutUsage) {
       emitWarning(
         `Layout type "${layout.layoutType}" is not recognized by semantic validation rules.`,
         "LAYOUT_UNKNOWN_TYPE",
@@ -1612,7 +1768,7 @@ function validateSemanticDiagnostics(ast, sourceMap) {
         nodeId,
         `Use one of: ${Object.keys(LAYOUT_RULES).join(", ")}.`
       );
-    } else {
+    } else if (rules) {
       const missingRequiredParams = getMissingRequiredNames(rules.requiredParams, layout.params);
       if (missingRequiredParams.length > 0) {
         emitWarning(
@@ -1625,6 +1781,16 @@ function validateSemanticDiagnostics(ast, sourceMap) {
       }
       const allowed = new Set(rules.allowedParams);
       for (const [paramName, paramValue] of Object.entries(layout.params)) {
+        if (layout.layoutType === "split" && paramName === "sidebar") {
+          emitError(
+            'Split parameter "sidebar" was removed. Use "left" or "right" instead.',
+            "LAYOUT_SPLIT_SIDEBAR_DEPRECATED",
+            getPropertyRange(entry, paramName, "name"),
+            nodeId,
+            "Example: layout split(left: 260) { ... }"
+          );
+          continue;
+        }
         if (!allowed.has(paramName)) {
           emitWarning(
             `Parameter "${paramName}" is not recognized for layout "${layout.layoutType}".`,
@@ -1641,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",
@@ -1663,31 +1829,62 @@ function validateSemanticDiagnostics(ast, sourceMap) {
             );
           }
         }
-        if (layout.layoutType === "split" && paramName === "sidebar") {
-          const sidebar = Number(paramValue);
-          if (!Number.isFinite(sidebar) || sidebar <= 0) {
+        if (layout.layoutType === "split" && (paramName === "left" || paramName === "right")) {
+          const splitSize = Number(paramValue);
+          if (!Number.isFinite(splitSize) || splitSize <= 0) {
             emitWarning(
-              'Split "sidebar" must be a positive number.',
-              "LAYOUT_SPLIT_SIDEBAR_INVALID",
+              `Split "${paramName}" must be a positive number. Falling back to 250.`,
+              "LAYOUT_SPLIT_WIDTH_INVALID",
               getPropertyRange(entry, paramName, "value"),
               nodeId,
-              "Use a value like sidebar: 240."
+              `Use a value like ${paramName}: 260.`
             );
           }
         }
       }
+      if (layout.layoutType === "split") {
+        const hasLeft = layout.params.left !== void 0;
+        const hasRight = layout.params.right !== void 0;
+        if (!hasLeft && !hasRight) {
+          emitError(
+            'Split layout requires exactly one fixed side width: "left" or "right".',
+            "LAYOUT_SPLIT_SIDE_REQUIRED",
+            entry?.nameRange || entry?.range || toFallbackRange(),
+            nodeId,
+            "Add either left: <number> or right: <number>."
+          );
+        }
+        if (hasLeft && hasRight) {
+          emitError(
+            'Split layout accepts only one fixed side width: use either "left" or "right", not both.',
+            "LAYOUT_SPLIT_SIDE_CONFLICT",
+            entry?.nameRange || entry?.range || toFallbackRange(),
+            nodeId,
+            "Remove one of the two parameters."
+          );
+        }
+        if (layout.children.length !== 2) {
+          emitError(
+            `Split layout requires exactly 2 children, received ${layout.children.length}.`,
+            "LAYOUT_SPLIT_CHILDREN_ARITY",
+            entry?.bodyRange || entry?.range || toFallbackRange(),
+            nodeId,
+            "Provide exactly two child blocks (left/right content)."
+          );
+        }
+      }
     }
     for (const child of layout.children) {
       if (child.type === "component") {
-        checkComponent(child);
+        checkComponent(child, insideDefinedLayout);
       } else if (child.type === "layout") {
-        checkLayout(child);
+        checkLayout(child, insideDefinedLayout);
       } else if (child.type === "cell") {
-        checkCell(child);
+        checkCell(child, insideDefinedLayout);
       }
     }
   };
-  const checkCell = (cell) => {
+  const checkCell = (cell, insideDefinedLayout) => {
     const nodeId = cell._meta?.nodeId;
     const entry = nodeId ? sourceMapByNodeId.get(nodeId) : void 0;
     if (cell.props.span !== void 0) {
@@ -1703,12 +1900,54 @@ function validateSemanticDiagnostics(ast, sourceMap) {
       }
     }
     for (const child of cell.children) {
-      if (child.type === "component") checkComponent(child);
-      if (child.type === "layout") checkLayout(child);
+      if (child.type === "component") checkComponent(child, insideDefinedLayout);
+      if (child.type === "layout") checkLayout(child, insideDefinedLayout);
     }
   };
+  for (const componentDef of ast.definedComponents) {
+    const nodeId = componentDef._meta?.nodeId;
+    const entry = nodeId ? sourceMapByNodeId.get(nodeId) : void 0;
+    if (!isPascalCaseIdentifier(componentDef.name)) {
+      emitWarning(
+        `Defined component "${componentDef.name}" should use PascalCase naming.`,
+        "COMPONENT_DEFINITION_NAME_STYLE",
+        entry?.nameRange || entry?.range || toFallbackRange(),
+        nodeId,
+        'Use a name like "MyComponent".'
+      );
+    }
+    if (componentDef.body.type === "component") {
+      checkComponent(componentDef.body, false);
+    } else {
+      checkLayout(componentDef.body, false);
+    }
+  }
+  for (const layoutDef of ast.definedLayouts) {
+    const nodeId = layoutDef._meta?.nodeId;
+    const entry = nodeId ? sourceMapByNodeId.get(nodeId) : void 0;
+    if (!isValidDefinedLayoutName(layoutDef.name)) {
+      emitError(
+        `Defined layout "${layoutDef.name}" must match /^[a-z][a-z0-9_]*$/.`,
+        "LAYOUT_DEFINITION_INVALID_NAME",
+        entry?.nameRange || entry?.range || toFallbackRange(),
+        nodeId,
+        'Use names like "screen_default" or "appShell".'
+      );
+    }
+    const childrenSlotCount = countChildrenSlots(layoutDef.body);
+    if (childrenSlotCount !== 1) {
+      emitError(
+        `Defined layout "${layoutDef.name}" must contain exactly one "component Children" placeholder.`,
+        "LAYOUT_DEFINITION_CHILDREN_SLOT_COUNT",
+        entry?.bodyRange || entry?.range || toFallbackRange(),
+        nodeId,
+        'Add exactly one "component Children" in the layout body.'
+      );
+    }
+    checkLayout(layoutDef.body, true);
+  }
   ast.screens.forEach((screen) => {
-    checkLayout(screen.layout);
+    checkLayout(screen.layout, false);
   });
   return diagnostics;
 }
@@ -1725,7 +1964,7 @@ ${lexResult.errors.map((e) => e.message).join("\n")}`);
 ${parserInstance.errors.map((e) => e.message).join("\n")}`);
   }
   const ast = visitor.visit(cst);
-  validateComponentDefinitionCycles(ast);
+  validateDefinitionCycles(ast);
   return ast;
 }
 function parseWireDSLWithSourceMap(input, filePath = "<input>", options) {
@@ -1756,7 +1995,7 @@ ${parserInstance.errors.map((e) => e.message).join("\n")}`);
   const ast = visitorWithSourceMap.visit(cst);
   const sourceMap = sourceMapBuilder.build();
   try {
-    validateComponentDefinitionCycles(ast);
+    validateDefinitionCycles(ast);
   } catch (error) {
     const projectEntry = sourceMap.find((entry) => entry.type === "project");
     diagnostics.push({
@@ -1779,83 +2018,101 @@ ${parserInstance.errors.map((e) => e.message).join("\n")}`);
   }
   return buildParseResult(ast, sourceMap, diagnostics);
 }
-function validateComponentDefinitionCycles(ast) {
-  if (!ast.definedComponents || ast.definedComponents.length === 0) {
+function validateDefinitionCycles(ast) {
+  if ((!ast.definedComponents || ast.definedComponents.length === 0) && (!ast.definedLayouts || ast.definedLayouts.length === 0)) {
     return;
   }
   const components = /* @__PURE__ */ new Map();
+  const layouts = /* @__PURE__ */ new Map();
   ast.definedComponents.forEach((comp) => {
     components.set(comp.name, comp);
   });
+  ast.definedLayouts.forEach((layoutDef) => {
+    layouts.set(layoutDef.name, layoutDef);
+  });
+  const makeComponentKey = (name) => `component:${name}`;
+  const makeLayoutKey = (name) => `layout:${name}`;
+  const displayKey = (key) => key.split(":")[1];
+  const shouldTrackComponentDependency = (name) => components.has(name) && !BUILT_IN_COMPONENTS.has(name);
+  const shouldTrackLayoutDependency = (name) => layouts.has(name) && !BUILT_IN_LAYOUTS.has(name);
   const visited = /* @__PURE__ */ new Set();
   const recursionStack = /* @__PURE__ */ new Set();
-  function getComponentDependencies(node) {
-    const deps = /* @__PURE__ */ new Set();
-    if (node.type === "layout") {
-      const layout = node;
-      if (layout.children) {
-        layout.children.forEach((child) => {
-          if (child.type === "component") {
-            const component = child;
-            deps.add(component.componentType);
-          } else if (child.type === "layout") {
-            const nested = getComponentDependencies(child);
-            nested.forEach((d) => deps.add(d));
-          } else if (child.type === "cell") {
-            const cell = child;
-            if (cell.children) {
-              cell.children.forEach((cellChild) => {
-                if (cellChild.type === "component") {
-                  deps.add(cellChild.componentType);
-                } else if (cellChild.type === "layout") {
-                  const nested = getComponentDependencies(cellChild);
-                  nested.forEach((d) => deps.add(d));
-                }
-              });
+  const collectLayoutDependencies = (layout, deps) => {
+    if (shouldTrackLayoutDependency(layout.layoutType)) {
+      deps.add(makeLayoutKey(layout.layoutType));
+    }
+    for (const child of layout.children) {
+      if (child.type === "component") {
+        if (shouldTrackComponentDependency(child.componentType)) {
+          deps.add(makeComponentKey(child.componentType));
+        }
+      } else if (child.type === "layout") {
+        collectLayoutDependencies(child, deps);
+      } else if (child.type === "cell") {
+        for (const cellChild of child.children) {
+          if (cellChild.type === "component") {
+            if (shouldTrackComponentDependency(cellChild.componentType)) {
+              deps.add(makeComponentKey(cellChild.componentType));
             }
+          } else if (cellChild.type === "layout") {
+            collectLayoutDependencies(cellChild, deps);
           }
-        });
+        }
       }
     }
-    return deps;
-  }
-  function hasCycle(componentName, path = []) {
-    if (recursionStack.has(componentName)) {
-      const cycleStart = path.indexOf(componentName);
-      const cycle = path.slice(cycleStart).concat(componentName);
-      return cycle;
+  };
+  const getDependencies = (key) => {
+    const deps = /* @__PURE__ */ new Set();
+    if (key.startsWith("component:")) {
+      const name2 = key.slice("component:".length);
+      const def2 = components.get(name2);
+      if (!def2) return deps;
+      if (def2.body.type === "component") {
+        if (shouldTrackComponentDependency(def2.body.componentType)) {
+          deps.add(makeComponentKey(def2.body.componentType));
+        }
+      } else {
+        collectLayoutDependencies(def2.body, deps);
+      }
+      return deps;
     }
-    if (visited.has(componentName)) {
-      return null;
+    const name = key.slice("layout:".length);
+    const def = layouts.get(name);
+    if (!def) return deps;
+    collectLayoutDependencies(def.body, deps);
+    return deps;
+  };
+  const findCycle = (key, path = []) => {
+    if (recursionStack.has(key)) {
+      const cycleStart = path.indexOf(key);
+      return path.slice(cycleStart).concat(key);
     }
-    const component = components.get(componentName);
-    if (!component) {
+    if (visited.has(key)) {
       return null;
     }
-    recursionStack.add(componentName);
-    const currentPath = [...path, componentName];
-    const dependencies = getComponentDependencies(component.body);
+    recursionStack.add(key);
+    const currentPath = [...path, key];
+    const dependencies = getDependencies(key);
     for (const dep of dependencies) {
-      const definedDep = components.has(dep);
-      if (definedDep) {
-        const cycle = hasCycle(dep, currentPath);
-        if (cycle) {
-          return cycle;
-        }
-      }
+      const cycle = findCycle(dep, currentPath);
+      if (cycle) return cycle;
     }
-    recursionStack.delete(componentName);
-    visited.add(componentName);
+    recursionStack.delete(key);
+    visited.add(key);
     return null;
-  }
-  for (const [componentName] of components) {
+  };
+  const allDefinitions = [
+    ...Array.from(components.keys()).map(makeComponentKey),
+    ...Array.from(layouts.keys()).map(makeLayoutKey)
+  ];
+  for (const key of allDefinitions) {
     visited.clear();
     recursionStack.clear();
-    const cycle = hasCycle(componentName);
+    const cycle = findCycle(key);
     if (cycle) {
       throw new Error(
-        `Circular component definition detected: ${cycle.join(" \u2192 ")}
-Components cannot reference each other in a cycle.`
+        `Circular component definition detected: ${cycle.map(displayKey).join(" \u2192 ")}
+Components and layouts cannot reference each other in a cycle.`
       );
     }
   }
@@ -1863,6 +2120,7 @@ Components cannot reference each other in a cycle.`
 
 // src/ir/index.ts
 var import_zod = require("zod");
+var import_components2 = require("@wire-dsl/language-support/components");
 
 // src/ir/device-presets.ts
 var DEVICE_PRESETS = {
@@ -2027,9 +2285,11 @@ var IRGenerator = class {
     this.idGen = new IDGenerator();
     this.nodes = {};
     this.definedComponents = /* @__PURE__ */ new Map();
+    this.definedLayouts = /* @__PURE__ */ new Map();
     this.definedComponentIndices = /* @__PURE__ */ new Map();
     this.undefinedComponentsUsed = /* @__PURE__ */ new Set();
     this.warnings = [];
+    this.errors = [];
     this.style = {
       density: "normal",
       spacing: "md",
@@ -2042,15 +2302,22 @@ var IRGenerator = class {
     this.idGen.reset();
     this.nodes = {};
     this.definedComponents.clear();
+    this.definedLayouts.clear();
     this.definedComponentIndices.clear();
     this.undefinedComponentsUsed.clear();
     this.warnings = [];
+    this.errors = [];
     if (ast.definedComponents && ast.definedComponents.length > 0) {
       ast.definedComponents.forEach((def, index) => {
         this.definedComponents.set(def.name, def);
         this.definedComponentIndices.set(def.name, index);
       });
     }
+    if (ast.definedLayouts && ast.definedLayouts.length > 0) {
+      ast.definedLayouts.forEach((def) => {
+        this.definedLayouts.set(def.name, def);
+      });
+    }
     this.applyStyle(ast.style);
     const screens = ast.screens.map(
       (screen, screenIndex) => this.convertScreen(screen, screenIndex)
@@ -2062,6 +2329,11 @@ var IRGenerator = class {
 Define these components with: define Component "Name" { ... }`
       );
     }
+    if (this.errors.length > 0) {
+      const messages = this.errors.map((e) => `- [${e.type}] ${e.message}`).join("\n");
+      throw new Error(`IR generation failed with semantic errors:
+${messages}`);
+    }
     const project = {
       id: this.sanitizeId(ast.name),
       name: ast.name,
@@ -2188,41 +2460,50 @@ Define these components with: define Component "Name" { ... }`
   getWarnings() {
     return this.warnings;
   }
-  convertLayout(layout) {
+  convertLayout(layout, context) {
+    let layoutParams = this.resolveLayoutParams(layout.layoutType, layout.params, context);
+    if (layout.layoutType === "split") {
+      layoutParams = this.normalizeSplitParams(layoutParams);
+    }
+    const layoutChildren = layout.children;
+    const layoutDefinition = this.definedLayouts.get(layout.layoutType);
+    if (layoutDefinition) {
+      return this.expandDefinedLayout(layoutDefinition, layoutParams, layoutChildren, context);
+    }
     const nodeId = this.idGen.generate("node");
     const childRefs = [];
-    for (const child of layout.children) {
+    for (const child of layoutChildren) {
       if (child.type === "layout") {
-        const childId = this.convertLayout(child);
-        childRefs.push({ ref: childId });
+        const childId = this.convertLayout(child, context);
+        if (childId) childRefs.push({ ref: childId });
       } else if (child.type === "component") {
-        const childId = this.convertComponent(child);
-        childRefs.push({ ref: childId });
+        const childId = this.convertComponent(child, context);
+        if (childId) childRefs.push({ ref: childId });
       } else if (child.type === "cell") {
-        const childId = this.convertCell(child);
-        childRefs.push({ ref: childId });
+        const childId = this.convertCell(child, context);
+        if (childId) childRefs.push({ ref: childId });
       }
     }
     const style = {};
-    if (layout.params.padding) {
-      style.padding = String(layout.params.padding);
+    if (layoutParams.padding !== void 0) {
+      style.padding = String(layoutParams.padding);
     } else {
       style.padding = "none";
     }
-    if (layout.params.gap) {
-      style.gap = String(layout.params.gap);
+    if (layoutParams.gap !== void 0) {
+      style.gap = String(layoutParams.gap);
     }
-    if (layout.params.align) {
-      style.align = layout.params.align;
+    if (layoutParams.align !== void 0) {
+      style.align = layoutParams.align;
     }
-    if (layout.params.background) {
-      style.background = String(layout.params.background);
+    if (layoutParams.background !== void 0) {
+      style.background = String(layoutParams.background);
     }
     const containerNode = {
       id: nodeId,
       kind: "container",
       containerType: layout.layoutType,
-      params: this.cleanParams(layout.params),
+      params: this.cleanParams(layoutParams),
       children: childRefs,
       style,
       meta: {
@@ -2233,16 +2514,16 @@ Define these components with: define Component "Name" { ... }`
     this.nodes[nodeId] = containerNode;
     return nodeId;
   }
-  convertCell(cell) {
+  convertCell(cell, context) {
     const nodeId = this.idGen.generate("node");
     const childRefs = [];
     for (const child of cell.children) {
       if (child.type === "layout") {
-        const childId = this.convertLayout(child);
-        childRefs.push({ ref: childId });
+        const childId = this.convertLayout(child, context);
+        if (childId) childRefs.push({ ref: childId });
       } else if (child.type === "component") {
-        const childId = this.convertComponent(child);
-        childRefs.push({ ref: childId });
+        const childId = this.convertComponent(child, context);
+        if (childId) childRefs.push({ ref: childId });
       }
     }
     const containerNode = {
@@ -2263,10 +2544,28 @@ Define these components with: define Component "Name" { ... }`
     this.nodes[nodeId] = containerNode;
     return nodeId;
   }
-  convertComponent(component) {
+  convertComponent(component, context) {
+    if (component.componentType === "Children") {
+      if (!context?.allowChildrenSlot) {
+        this.errors.push({
+          type: "children-slot-outside-layout-definition",
+          message: '"Children" placeholder can only be used inside a define Layout body.'
+        });
+        return null;
+      }
+      if (!context.childrenSlot) {
+        this.errors.push({
+          type: "children-slot-missing-child",
+          message: `Layout "${context.definitionName}" requires exactly one child for "Children".`
+        });
+        return null;
+      }
+      return this.convertASTNode(context.childrenSlot, context);
+    }
+    const resolvedProps = this.resolveComponentProps(component.componentType, component.props, context);
     const definition = this.definedComponents.get(component.componentType);
     if (definition) {
-      return this.expandDefinedComponent(definition);
+      return this.expandDefinedComponent(definition, resolvedProps, context);
     }
     const builtInComponents = /* @__PURE__ */ new Set([
       "Button",
@@ -2309,7 +2608,7 @@ Define these components with: define Component "Name" { ... }`
       id: nodeId,
       kind: "component",
       componentType: component.componentType,
-      props: component.props,
+      props: resolvedProps,
       style: {},
       meta: {
         nodeId: component._meta?.nodeId
@@ -2319,15 +2618,224 @@ Define these components with: define Component "Name" { ... }`
     this.nodes[nodeId] = componentNode;
     return nodeId;
   }
-  expandDefinedComponent(definition) {
+  expandDefinedComponent(definition, invocationArgs, parentContext) {
+    const context = {
+      args: invocationArgs,
+      providedArgNames: new Set(Object.keys(invocationArgs)),
+      usedArgNames: /* @__PURE__ */ new Set(),
+      definitionName: definition.name,
+      definitionKind: "component",
+      allowChildrenSlot: false
+    };
     if (definition.body.type === "layout") {
-      return this.convertLayout(definition.body);
+      const result = this.convertLayout(definition.body, context);
+      this.reportUnusedArguments(context);
+      return result;
     } else if (definition.body.type === "component") {
-      return this.convertComponent(definition.body);
+      const result = this.convertComponent(definition.body, context);
+      this.reportUnusedArguments(context);
+      return result;
     } else {
       throw new Error(`Invalid defined component body type for "${definition.name}"`);
     }
   }
+  expandDefinedLayout(definition, invocationParams, invocationChildren, parentContext) {
+    if (invocationChildren.length !== 1) {
+      this.errors.push({
+        type: "layout-children-arity",
+        message: `Layout "${definition.name}" expects exactly one child, received ${invocationChildren.length}.`
+      });
+    }
+    const rawSlot = invocationChildren[0];
+    const resolvedSlot = rawSlot ? this.resolveChildrenSlot(rawSlot, parentContext) : void 0;
+    const context = {
+      args: invocationParams,
+      providedArgNames: new Set(Object.keys(invocationParams)),
+      usedArgNames: /* @__PURE__ */ new Set(),
+      definitionName: definition.name,
+      definitionKind: "layout",
+      allowChildrenSlot: true,
+      childrenSlot: resolvedSlot
+    };
+    const nodeId = this.convertLayout(definition.body, context);
+    this.reportUnusedArguments(context);
+    return nodeId;
+  }
+  resolveChildrenSlot(slot, parentContext) {
+    if (slot.type === "component" && slot.componentType === "Children") {
+      if (parentContext?.allowChildrenSlot) {
+        return parentContext.childrenSlot;
+      }
+      this.errors.push({
+        type: "children-slot-outside-layout-definition",
+        message: '"Children" placeholder forwarding is only valid inside define Layout bodies.'
+      });
+      return void 0;
+    }
+    return slot;
+  }
+  convertASTNode(node, context) {
+    if (node.type === "layout") return this.convertLayout(node, context);
+    if (node.type === "component") return this.convertComponent(node, context);
+    return this.convertCell(node, context);
+  }
+  resolveLayoutParams(layoutType, params, context) {
+    const resolved = {};
+    for (const [key, value] of Object.entries(params)) {
+      const resolvedValue = this.resolveBindingValue(
+        value,
+        context,
+        "layout-parameter",
+        layoutType,
+        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;
+      }
+    }
+    return resolved;
+  }
+  normalizeSplitParams(params) {
+    const normalized = { ...params };
+    if (normalized.sidebar !== void 0 && normalized.left === void 0 && normalized.right === void 0) {
+      normalized.left = normalized.sidebar;
+      this.warnings.push({
+        type: "split-sidebar-deprecated",
+        message: 'Split parameter "sidebar" is deprecated. Use "left" or "right".'
+      });
+    }
+    delete normalized.sidebar;
+    const hasLeft = normalized.left !== void 0;
+    const hasRight = normalized.right !== void 0;
+    if (hasLeft && hasRight) {
+      delete normalized.right;
+      this.warnings.push({
+        type: "split-side-conflict",
+        message: 'Split layout received both "left" and "right"; keeping "left".'
+      });
+    }
+    if (!hasLeft && !hasRight) {
+      normalized.left = 250;
+      this.warnings.push({
+        type: "split-side-missing",
+        message: 'Split layout missing both "left" and "right"; defaulting to left: 250.'
+      });
+    }
+    if (normalized.left !== void 0) {
+      const leftWidth = Number(normalized.left);
+      if (!Number.isFinite(leftWidth) || leftWidth <= 0) {
+        normalized.left = 250;
+        this.warnings.push({
+          type: "split-left-invalid",
+          message: 'Split "left" must be a positive number. Falling back to 250.'
+        });
+      }
+    }
+    if (normalized.right !== void 0) {
+      const rightWidth = Number(normalized.right);
+      if (!Number.isFinite(rightWidth) || rightWidth <= 0) {
+        normalized.right = 250;
+        this.warnings.push({
+          type: "split-right-invalid",
+          message: 'Split "right" must be a positive number. Falling back to 250.'
+        });
+      }
+    }
+    return normalized;
+  }
+  resolveComponentProps(componentType, props, context) {
+    const resolved = {};
+    for (const [key, value] of Object.entries(props)) {
+      const resolvedValue = this.resolveBindingValue(
+        value,
+        context,
+        "component-property",
+        componentType,
+        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;
+      }
+    }
+    return resolved;
+  }
+  resolveBindingValue(value, context, kind, targetType, targetName) {
+    if (typeof value !== "string" || !value.startsWith("prop_")) {
+      return value;
+    }
+    const argName = value.slice("prop_".length);
+    if (!context) {
+      return value;
+    }
+    if (Object.prototype.hasOwnProperty.call(context.args, argName)) {
+      context.usedArgNames.add(argName);
+      return context.args[argName];
+    }
+    const required = this.isBindingTargetRequired(kind, targetType, targetName);
+    const descriptor = kind === "component-property" ? "property" : "parameter";
+    const message = `Missing required bound ${descriptor} "${targetName}" for ${kind === "component-property" ? "component" : "layout"} "${targetType}" in ${context.definitionKind} "${context.definitionName}" (expected arg "${argName}").`;
+    if (required) {
+      this.errors.push({ type: "missing-required-bound-value", message });
+    } else {
+      this.warnings.push({
+        type: "missing-bound-value",
+        message: `Optional ${descriptor} "${targetName}" in ${kind === "component-property" ? "component" : "layout"} "${targetType}" was omitted because arg "${argName}" was not provided while expanding ${context.definitionKind} "${context.definitionName}".`
+      });
+    }
+    return void 0;
+  }
+  isBindingTargetRequired(kind, targetType, targetName) {
+    if (kind === "component-property") {
+      const metadata = import_components2.COMPONENTS[targetType];
+      const property2 = metadata?.properties?.[targetName];
+      if (!property2) return false;
+      return property2.required === true && property2.defaultValue === void 0;
+    }
+    const layoutMetadata = import_components2.LAYOUTS[targetType];
+    if (!layoutMetadata) return false;
+    const property = layoutMetadata.properties?.[targetName];
+    const requiredFromProperty = property?.required === true && property.defaultValue === void 0;
+    const requiredFromLayout = (layoutMetadata.requiredProperties || []).includes(targetName);
+    return requiredFromProperty || requiredFromLayout;
+  }
+  reportUnusedArguments(context) {
+    for (const arg of context.providedArgNames) {
+      if (!context.usedArgNames.has(arg)) {
+        this.warnings.push({
+          type: "unused-definition-argument",
+          message: `Argument "${arg}" is not used by ${context.definitionKind} "${context.definitionName}".`
+        });
+      }
+    }
+  }
   cleanParams(params) {
     const cleaned = {};
     for (const [key, value] of Object.entries(params)) {
@@ -2377,9 +2885,24 @@ var ICON_SIZES_BY_DENSITY = {
   comfortable: { xs: 14, sm: 16, md: 20, lg: 28, xl: 36 }
 };
 var ICON_BUTTON_SIZES_BY_DENSITY = {
-  compact: { sm: 24, md: 28, lg: 32 },
-  normal: { sm: 28, md: 32, lg: 40 },
-  comfortable: { sm: 32, md: 40, lg: 48 }
+  compact: { sm: 20, md: 24, lg: 32 },
+  normal: { sm: 24, md: 32, lg: 40 },
+  comfortable: { sm: 28, md: 40, lg: 48 }
+};
+var CONTROL_HEIGHTS_BY_DENSITY = {
+  compact: { sm: 28, md: 32, lg: 36 },
+  normal: { sm: 36, md: 40, lg: 48 },
+  comfortable: { sm: 40, md: 48, lg: 56 }
+};
+var ACTION_CONTROL_HEIGHTS_BY_DENSITY = {
+  compact: { sm: 20, md: 24, lg: 32 },
+  normal: { sm: 24, md: 32, lg: 40 },
+  comfortable: { sm: 28, md: 40, lg: 48 }
+};
+var CONTROL_PADDING_BY_DENSITY = {
+  compact: { none: 0, xs: 4, sm: 8, md: 10, lg: 14, xl: 18 },
+  normal: { none: 0, xs: 6, sm: 10, md: 14, lg: 18, xl: 24 },
+  comfortable: { none: 0, xs: 8, sm: 12, md: 16, lg: 22, xl: 28 }
 };
 function resolveIconSize(size, density = "normal") {
   const map = ICON_SIZES_BY_DENSITY[density] || ICON_SIZES_BY_DENSITY.normal;
@@ -2389,6 +2912,18 @@ function resolveIconButtonSize(size, density = "normal") {
   const map = ICON_BUTTON_SIZES_BY_DENSITY[density] || ICON_BUTTON_SIZES_BY_DENSITY.normal;
   return map[size || "md"] || map.md;
 }
+function resolveControlHeight(size, density = "normal") {
+  const map = CONTROL_HEIGHTS_BY_DENSITY[density] || CONTROL_HEIGHTS_BY_DENSITY.normal;
+  return map[size || "md"] || map.md;
+}
+function resolveActionControlHeight(size, density = "normal") {
+  const map = ACTION_CONTROL_HEIGHTS_BY_DENSITY[density] || ACTION_CONTROL_HEIGHTS_BY_DENSITY.normal;
+  return map[size || "md"] || map.md;
+}
+function resolveControlHorizontalPadding(padding, density = "normal") {
+  const map = CONTROL_PADDING_BY_DENSITY[density] || CONTROL_PADDING_BY_DENSITY.normal;
+  return map[padding || "md"] ?? map.md;
+}
 
 // src/shared/heading-levels.ts
 var DEFAULT_LEVEL = "h2";
@@ -2707,6 +3242,41 @@ var LayoutEngine = class {
       }
       return totalHeight;
     }
+    if (node.containerType === "split") {
+      const splitGap = this.resolveSpacing(node.style.gap);
+      const leftParam = node.params.left;
+      const rightParam = node.params.right;
+      const leftWidthRaw = Number(leftParam);
+      const rightWidthRaw = Number(rightParam);
+      const hasLeft = leftParam !== void 0;
+      const hasRight = rightParam !== void 0;
+      const leftWidth = Number.isFinite(leftWidthRaw) && leftWidthRaw > 0 ? leftWidthRaw : availableWidth / 2;
+      const rightWidth = Number.isFinite(rightWidthRaw) && rightWidthRaw > 0 ? rightWidthRaw : availableWidth / 2;
+      let maxHeight = 0;
+      node.children.forEach((childRef, index) => {
+        const child = this.nodes[childRef.ref];
+        let childHeight = this.getComponentHeight();
+        const isFirst = index === 0;
+        let childWidth;
+        if (node.children.length >= 2) {
+          if (hasRight && !hasLeft) {
+            childWidth = isFirst ? Math.max(1, availableWidth - rightWidth - splitGap) : rightWidth;
+          } else {
+            childWidth = isFirst ? leftWidth : Math.max(1, availableWidth - leftWidth - splitGap);
+          }
+        } else {
+          childWidth = availableWidth;
+        }
+        if (child?.kind === "component") {
+          childHeight = child.props.height ? Number(child.props.height) : this.getIntrinsicComponentHeight(child, childWidth);
+        } else if (child?.kind === "container") {
+          childHeight = this.calculateContainerHeight(child, childWidth);
+        }
+        maxHeight = Math.max(maxHeight, childHeight);
+      });
+      totalHeight += maxHeight;
+      return totalHeight;
+    }
     const direction = node.params.direction || "vertical";
     if (node.containerType === "stack" && direction === "horizontal") {
       let maxHeight = 0;
@@ -2829,14 +3399,28 @@ var LayoutEngine = class {
   calculateSplit(node, x, y, width, height) {
     if (node.kind !== "container") return;
     const gap = this.resolveSpacing(node.style.gap);
-    const sidebarWidth = Number(node.params.sidebar) || 260;
+    const leftParam = node.params.left;
+    const rightParam = node.params.right;
+    const leftWidthRaw = Number(leftParam);
+    const rightWidthRaw = Number(rightParam);
+    const hasLeft = leftParam !== void 0;
+    const hasRight = rightParam !== void 0;
+    const leftWidth = Number.isFinite(leftWidthRaw) && leftWidthRaw > 0 ? leftWidthRaw : 250;
+    const rightWidth = Number.isFinite(rightWidthRaw) && rightWidthRaw > 0 ? rightWidthRaw : 250;
     if (node.children.length === 1) {
       this.calculateNode(node.children[0].ref, x, y, width, height, "split");
     } else if (node.children.length >= 2) {
-      this.calculateNode(node.children[0].ref, x, y, sidebarWidth, height, "split");
-      const contentX = x + sidebarWidth + gap;
-      const contentWidth = width - sidebarWidth - gap;
-      this.calculateNode(node.children[1].ref, contentX, y, contentWidth, height, "split");
+      if (hasRight && !hasLeft) {
+        const flexibleLeftWidth = Math.max(1, width - rightWidth - gap);
+        const rightX = x + flexibleLeftWidth + gap;
+        this.calculateNode(node.children[0].ref, x, y, flexibleLeftWidth, height, "split");
+        this.calculateNode(node.children[1].ref, rightX, y, rightWidth, height, "split");
+      } else {
+        const flexibleRightWidth = Math.max(1, width - leftWidth - gap);
+        const rightX = x + leftWidth + gap;
+        this.calculateNode(node.children[0].ref, x, y, leftWidth, height, "split");
+        this.calculateNode(node.children[1].ref, rightX, y, flexibleRightWidth, height, "split");
+      }
     }
   }
   calculatePanel(node, x, y, width, height) {
@@ -2985,7 +3569,11 @@ var LayoutEngine = class {
   }
   getIntrinsicComponentHeight(node, availableWidth) {
     if (node.kind !== "component") return this.getComponentHeight();
-    const controlLabelOffset = node.componentType === "Input" || node.componentType === "Textarea" || node.componentType === "Select" ? this.getControlLabelOffset(String(node.props.label || "")) : 0;
+    const controlSize = String(node.props.size || "md");
+    const density = this.style.density || "normal";
+    const inputControlHeight = resolveControlHeight(controlSize, density);
+    const actionControlHeight = resolveActionControlHeight(controlSize, density);
+    const controlLabelOffset = node.componentType === "Input" || node.componentType === "Textarea" || node.componentType === "Select" ? this.getControlLabelOffset(String(node.props.label || "")) : (node.componentType === "Button" || node.componentType === "IconButton") && this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
     if (node.componentType === "Image") {
       const placeholder = String(node.props.placeholder || "landscape");
       const aspectRatios = {
@@ -3012,12 +3600,26 @@ var LayoutEngine = class {
       }
       const rowCount = Number(node.props.rows || node.props.rowsMock || 5);
       const hasTitle = !!node.props.title;
-      const hasPagination = String(node.props.pagination) === "true";
+      const hasPagination = this.parseBooleanProp(node.props.pagination, false);
+      const hasCaption = String(node.props.caption || "").trim().length > 0;
+      const paginationAlign = String(node.props.paginationAlign || "right");
+      const captionAlign = String(node.props.captionAlign || "");
+      const effectiveCaptionAlign = captionAlign === "left" || captionAlign === "center" || captionAlign === "right" ? captionAlign : paginationAlign === "left" ? "right" : "left";
+      const sameFooterAlign = hasCaption && hasPagination && effectiveCaptionAlign === paginationAlign;
       const headerHeight = 44;
       const rowHeight = 36;
       const titleHeight = hasTitle ? 32 : 0;
-      const paginationHeight = hasPagination ? 64 : 0;
-      return titleHeight + headerHeight + rowCount * rowHeight + paginationHeight;
+      let footerHeight = 0;
+      if (hasPagination || hasCaption) {
+        const footerBottomPadding = 12;
+        footerHeight += 16;
+        footerHeight += hasPagination ? 32 : 18;
+        if (sameFooterAlign) {
+          footerHeight += 8 + 18;
+        }
+        footerHeight += footerBottomPadding;
+      }
+      return titleHeight + headerHeight + rowCount * rowHeight + footerHeight;
     }
     if (node.componentType === "Heading") {
       const text = String(node.props.text || "Heading");
@@ -3026,15 +3628,15 @@ var LayoutEngine = class {
       const maxWidth = availableWidth && availableWidth > 0 ? availableWidth : 200;
       const lines = this.wrapTextToLines(text, maxWidth, fontSize);
       const wrappedHeight = Math.max(1, lines.length) * lineHeightPx;
-      const density = this.style.density || "normal";
-      const verticalPadding = resolveHeadingVerticalPadding(node.props.spacing, density);
+      const density2 = this.style.density || "normal";
+      const verticalPadding = resolveHeadingVerticalPadding(node.props.spacing, density2);
       if (verticalPadding === null) {
         return Math.max(this.getComponentHeight(), wrappedHeight);
       }
       return Math.max(1, Math.ceil(wrappedHeight + verticalPadding * 2));
     }
     if (node.componentType === "Text") {
-      const content = String(node.props.content || "");
+      const content = String(node.props.text || "");
       const { fontSize, lineHeight } = this.getTextMetricsForDensity();
       const lineHeightPx = Math.ceil(fontSize * lineHeight);
       const maxWidth = availableWidth && availableWidth > 0 ? availableWidth : 200;
@@ -3083,7 +3685,10 @@ var LayoutEngine = class {
     if (node.componentType === "Divider") return 1;
     if (node.componentType === "Separate") return this.getSeparateSize(node);
     if (node.componentType === "Input" || node.componentType === "Select") {
-      return this.getComponentHeight() + controlLabelOffset;
+      return inputControlHeight + controlLabelOffset;
+    }
+    if (node.componentType === "Button" || node.componentType === "IconButton" || node.componentType === "Link") {
+      return actionControlHeight + controlLabelOffset;
     }
     return this.getComponentHeight();
   }
@@ -3100,7 +3705,10 @@ var LayoutEngine = class {
     }
     if (node.componentType === "IconButton") {
       const size = String(node.props.size || "md");
-      return resolveIconButtonSize(size, this.style.density || "normal");
+      const density = this.style.density || "normal";
+      const baseSize = resolveIconButtonSize(size, density);
+      const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
+      return baseSize + extraPadding * 2;
     }
     if (node.componentType === "Checkbox" || node.componentType === "Radio") {
       return 24;
@@ -3109,11 +3717,13 @@ var LayoutEngine = class {
     if (node.componentType === "Button" || node.componentType === "Link") {
       const text = String(node.props.text || "");
       const { fontSize, paddingX } = this.getButtonMetricsForDensity();
+      const density = this.style.density || "normal";
+      const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
       const textWidth = this.estimateTextWidth(text, fontSize);
-      return Math.max(60, Math.ceil(textWidth + paddingX * 2));
+      return Math.max(60, Math.ceil(textWidth + (paddingX + extraPadding) * 2));
     }
     if (node.componentType === "Label" || node.componentType === "Text") {
-      const text = String(node.props.content || node.props.text || "");
+      const text = String(node.props.text || "");
       return Math.max(60, text.length * 8 + 16);
     }
     if (node.componentType === "Heading") {
@@ -3975,27 +4585,27 @@ var THEMES = {
     bg: "#F8FAFC",
     cardBg: "#FFFFFF",
     border: "#E2E8F0",
-    text: "#1E293B",
+    text: "#000000",
     textMuted: "#64748B",
     primary: "#3B82F6",
     primaryHover: "#2563EB",
     primaryLight: "#EFF6FF"
   },
   dark: {
-    bg: "#0F172A",
-    cardBg: "#1E293B",
-    border: "#334155",
-    text: "#F1F5F9",
-    textMuted: "#94A3B8",
+    bg: "#111111",
+    cardBg: "#1C1C1C",
+    border: "#303030",
+    text: "#F0F0F0",
+    textMuted: "#808080",
     primary: "#60A5FA",
     primaryHover: "#3B82F6",
-    primaryLight: "#1E3A8A"
+    primaryLight: "#1C2A3A"
   }
 };
 var SVGRenderer = class {
   constructor(ir, layout, options) {
     this.renderedNodeIds = /* @__PURE__ */ new Set();
-    this.fontFamily = "system-ui, -apple-system, sans-serif";
+    this.fontFamily = "Arial, Helvetica, sans-serif";
     this.parentContainerByChildId = /* @__PURE__ */ new Map();
     this.ir = ir;
     this.layout = layout;
@@ -4009,7 +4619,6 @@ var SVGRenderer = class {
       includeLabels: options?.includeLabels ?? true,
       screenName: options?.screenName
     };
-    this.renderTheme = THEMES[this.options.theme];
     this.colorResolver = new ColorResolver();
     this.buildParentContainerIndex();
     if (ir.project.mocks && Object.keys(ir.project.mocks).length > 0) {
@@ -4018,6 +4627,12 @@ var SVGRenderer = class {
     if (ir.project.colors && Object.keys(ir.project.colors).length > 0) {
       this.colorResolver.setCustomColors(ir.project.colors);
     }
+    const themeDefaults = THEMES[this.options.theme];
+    this.renderTheme = {
+      ...themeDefaults,
+      text: this.resolveTextColor(),
+      textMuted: this.resolveMutedColor()
+    };
   }
   /**
    * Get list of available screens in the project
@@ -4099,6 +4714,9 @@ var SVGRenderer = class {
       if (node.containerType === "card") {
         this.renderCardBorder(node, pos, containerGroup);
       }
+      if (node.containerType === "split") {
+        this.renderSplitDecoration(node, pos, containerGroup);
+      }
       node.children.forEach((childRef) => {
         this.renderNode(childRef.ref, containerGroup);
       });
@@ -4186,6 +4804,8 @@ var SVGRenderer = class {
   }
   renderHeading(node, pos) {
     const text = String(node.props.text || "Heading");
+    const variant = String(node.props.variant || "default");
+    const headingColor = variant === "default" ? this.resolveTextColor() : this.resolveVariantColor(variant, this.resolveTextColor());
     const headingTypography = this.getHeadingTypography(node);
     const fontSize = headingTypography.fontSize;
     const fontWeight = headingTypography.fontWeight;
@@ -4195,10 +4815,10 @@ var SVGRenderer = class {
     if (lines.length <= 1) {
       return `<g${this.getDataNodeId(node)}>
     <text x="${pos.x}" y="${firstLineY}"
-          font-family="system-ui, -apple-system, sans-serif"
+          font-family="Arial, Helvetica, sans-serif"
           font-size="${fontSize}"
           font-weight="${fontWeight}"
-          fill="${this.renderTheme.text}">${this.escapeXml(text)}</text>
+          fill="${headingColor}">${this.escapeXml(text)}</text>
   </g>`;
     }
     const tspans = lines.map(
@@ -4206,61 +4826,101 @@ var SVGRenderer = class {
     ).join("");
     return `<g${this.getDataNodeId(node)}>
     <text x="${pos.x}" y="${firstLineY}"
-          font-family="system-ui, -apple-system, sans-serif"
+          font-family="Arial, Helvetica, sans-serif"
           font-size="${fontSize}"
           font-weight="${fontWeight}"
-          fill="${this.renderTheme.text}">${tspans}</text>
+          fill="${headingColor}">${tspans}</text>
   </g>`;
   }
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
+    const size = String(node.props.size || "md");
+    const density = this.ir.project.style.density || "normal";
+    const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
+    const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
     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;
     const paddingX = this.tokens.button.paddingX;
-    const paddingY = this.tokens.button.paddingY;
+    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 * 2), 60), pos.width);
-    const buttonHeight = fontSize + paddingY * 2;
-    const availableTextWidth = Math.max(0, buttonWidth - paddingX * 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 textColor = hasExplicitVariantColor ? "#FFFFFF" : "rgba(30, 41, 59, 0.85)";
-    const borderColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.7) : "rgba(100, 116, 139, 0.4)";
-    return `<g${this.getDataNodeId(node)}>
-    <rect x="${pos.x}" y="${pos.y}"
+    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) : 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="${pos.y + buttonHeight / 2 + fontSize * 0.35}"
-          font-family="system-ui, -apple-system, sans-serif"
+          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");
     const variant = String(node.props.variant || "primary");
+    const size = String(node.props.size || "md");
+    const density = this.ir.project.style.density || "normal";
     const fontSize = this.tokens.button.fontSize;
     const fontWeight = this.tokens.button.fontWeight;
     const paddingX = this.tokens.button.paddingX;
-    const paddingY = this.tokens.button.paddingY;
     const linkColor = this.resolveVariantColor(variant, this.renderTheme.primary);
     const idealTextWidth = this.estimateTextWidth(text, fontSize);
     const linkWidth = this.clampControlWidth(
       Math.max(Math.ceil(idealTextWidth + paddingX * 2), 60),
       pos.width
     );
-    const linkHeight = fontSize + paddingY * 2;
+    const linkHeight = Math.max(16, Math.min(resolveActionControlHeight(size, density), pos.height));
     const availableTextWidth = Math.max(0, linkWidth - paddingX * 2);
     const visibleText = this.truncateTextToWidth(text, availableTextWidth, fontSize);
     const visibleTextWidth = Math.min(
@@ -4271,7 +4931,7 @@ var SVGRenderer = class {
     const underlineY = centerY + 3;
     return `<g${this.getDataNodeId(node)}>
     <text x="${pos.x + linkWidth / 2}" y="${centerY}"
-          font-family="system-ui, -apple-system, sans-serif"
+          font-family="Arial, Helvetica, sans-serif"
           font-size="${fontSize}"
           font-weight="${fontWeight}"
           fill="${linkColor}"
@@ -4285,53 +4945,108 @@ 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)}"
-          font-family="system-ui, -apple-system, sans-serif"
-          font-size="12"
-          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>` : ""}
+    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>`;
+    }
+    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}"
-          font-family="system-ui, -apple-system, sans-serif"
+          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");
     const subtitle = String(node.props.subtitle || "");
     const actions = String(node.props.actions || "");
     const user = String(node.props.user || "");
-    const accentColor = this.resolveAccentColor();
+    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 radiusMap = {
+      none: 0,
+      sm: 4,
+      md: this.tokens.card.radius,
+      lg: 12,
+      xl: 16
+    };
+    const topbarRadius = radiusMap[String(node.props.radius || "md")] ?? this.tokens.card.radius;
     const topbar = this.calculateTopbarLayout(node, pos, title, subtitle, actions, user);
-    let svg = `<g${this.getDataNodeId(node)}>
+    let svg = `<g${this.getDataNodeId(node)}>`;
+    if (showBorder || showBackground) {
+      const bg = showBackground ? this.renderTheme.cardBg : "none";
+      const stroke = showBorder ? this.renderTheme.border : "none";
+      svg += `
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
-          fill="${this.renderTheme.cardBg}" 
-          stroke="${this.renderTheme.border}" 
-          stroke-width="1"/>
-    
+          rx="${topbarRadius}"
+          fill="${bg}" 
+          stroke="${stroke}" 
+          stroke-width="1"/>`;
+    }
+    svg += `
     <!-- Title -->
     <text x="${topbar.textX}" y="${topbar.titleY}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="18" 
           font-weight="600" 
           fill="${this.renderTheme.text}">${this.escapeXml(topbar.visibleTitle)}</text>`;
     if (topbar.hasSubtitle) {
       svg += `
     <text x="${topbar.textX}" y="${topbar.subtitleY}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="13" 
           fill="${this.renderTheme.textMuted}">${this.escapeXml(topbar.visibleSubtitle)}</text>`;
     }
@@ -4359,7 +5074,7 @@ var SVGRenderer = class {
           fill="${accentColor}" 
           stroke="none"/>
     <text x="${action.x + action.width / 2}" y="${action.y + action.height / 2 + 4}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="12" 
           font-weight="600" 
           fill="white" 
@@ -4375,7 +5090,7 @@ var SVGRenderer = class {
           stroke="${this.renderTheme.border}" 
           stroke-width="1"/>
     <text x="${topbar.userBadge.x + topbar.userBadge.width / 2}" y="${topbar.userBadge.y + topbar.userBadge.height / 2 + 4}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="12" 
           fill="${this.renderTheme.text}" 
           text-anchor="middle">${this.escapeXml(topbar.userBadge.label)}</text>`;
@@ -4438,77 +5153,165 @@ var SVGRenderer = class {
     </g>`;
     output.push(svg);
   }
+  renderSplitDecoration(node, pos, output) {
+    if (node.kind !== "container") return;
+    const gap = this.resolveSpacing(node.style.gap);
+    const leftParam = Number(node.params.left);
+    const rightParam = Number(node.params.right);
+    const hasLeft = node.params.left !== void 0;
+    const hasRight = node.params.right !== void 0 && node.params.left === void 0;
+    const fixedLeftWidth = Number.isFinite(leftParam) && leftParam > 0 ? leftParam : 250;
+    const fixedRightWidth = Number.isFinite(rightParam) && rightParam > 0 ? rightParam : 250;
+    const backgroundKey = String(node.style.background || "").trim();
+    const showBorder = this.parseBooleanProp(node.params.border, false);
+    if (backgroundKey) {
+      const fill = this.colorResolver.resolveColor(backgroundKey, this.renderTheme.cardBg);
+      if (hasRight) {
+        const panelX = pos.x + Math.max(0, pos.width - fixedRightWidth);
+        output.push(`<g>
+    <rect x="${panelX}" y="${pos.y}" width="${Math.max(1, fixedRightWidth)}" height="${pos.height}" fill="${fill}" stroke="none"/>
+    </g>`);
+      } else if (hasLeft || !hasRight) {
+        output.push(`<g>
+    <rect x="${pos.x}" y="${pos.y}" width="${Math.max(1, fixedLeftWidth)}" height="${pos.height}" fill="${fill}" stroke="none"/>
+    </g>`);
+      }
+    }
+    if (showBorder) {
+      const dividerX = hasRight ? pos.x + Math.max(0, pos.width - fixedRightWidth - gap / 2) : pos.x + Math.max(0, fixedLeftWidth + gap / 2);
+      output.push(`<g>
+    <line x1="${dividerX}" y1="${pos.y}" x2="${dividerX}" y2="${pos.y + pos.height}" stroke="${this.renderTheme.border}" stroke-width="1"/>
+    </g>`);
+    }
+  }
   renderTable(node, pos) {
     const title = String(node.props.title || "");
     const columnsStr = String(node.props.columns || "Col1,Col2,Col3");
-    const columns = columnsStr.split(",").map((c) => c.trim());
+    const columns = columnsStr.split(",").map((c) => c.trim()).filter(Boolean);
     const rowCount = Number(node.props.rows || node.props.rowsMock || 5);
     const mockStr = String(node.props.mock || "");
     const random = this.parseBooleanProp(node.props.random, false);
-    const paginationValue = String(node.props.pagination || "false");
-    const pagination = paginationValue === "true";
-    const pageCount = Number(node.props.pages || 5);
+    const pagination = this.parseBooleanProp(node.props.pagination, false);
+    const parsedPageCount = Number(node.props.pages || 5);
+    const pageCount = Number.isFinite(parsedPageCount) && parsedPageCount > 0 ? Math.floor(parsedPageCount) : 5;
     const paginationAlign = String(node.props.paginationAlign || "right");
+    const actions = String(node.props.actions || "").split(",").map((value) => value.trim()).filter(Boolean);
+    const hasActions = actions.length > 0;
+    const caption = String(node.props.caption || "").trim();
+    const hasCaption = caption.length > 0;
+    const showOuterBorder = this.parseBooleanProp(node.props.border, false);
+    const showOuterBackground = this.parseBooleanProp(
+      node.props.background ?? node.props.backround,
+      false
+    );
+    const showInnerBorder = this.parseBooleanProp(node.props.innerBorder, true);
+    const rawCaptionAlign = String(node.props.captionAlign || "");
+    const captionAlign = rawCaptionAlign === "left" || rawCaptionAlign === "center" || rawCaptionAlign === "right" ? rawCaptionAlign : paginationAlign === "left" ? "right" : "left";
+    const sameFooterAlign = hasCaption && pagination && captionAlign === paginationAlign;
     const mockTypes = mockStr ? mockStr.split(",").map((m) => m.trim()).filter(Boolean) : [];
-    while (mockTypes.length < columns.length) {
-      const inferred = MockDataGenerator.inferMockTypeFromColumn(columns[mockTypes.length] || "item");
+    const safeColumns = columns.length > 0 ? columns : ["Column"];
+    while (mockTypes.length < safeColumns.length) {
+      const inferred = MockDataGenerator.inferMockTypeFromColumn(safeColumns[mockTypes.length] || "item");
       mockTypes.push(inferred);
     }
     const headerHeight = 44;
     const rowHeight = 36;
-    const colWidth = pos.width / columns.length;
+    const actionColumnWidth = hasActions ? Math.max(96, Math.min(180, actions.length * 26 + 28)) : 0;
+    const dataWidth = Math.max(20, pos.width - actionColumnWidth);
+    const dataColWidth = dataWidth / safeColumns.length;
     const mockRows = [];
     for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
       const row = {};
-      columns.forEach((col, colIdx) => {
+      safeColumns.forEach((col, colIdx) => {
         const mockType = mockTypes[colIdx] || MockDataGenerator.inferMockTypeFromColumn(col) || "item";
         row[col] = MockDataGenerator.getMockValue(mockType, rowIdx, random);
       });
       mockRows.push(row);
     }
-    let svg = `<g${this.getDataNodeId(node)}>
+    let svg = `<g${this.getDataNodeId(node)}>`;
+    if (showOuterBorder || showOuterBackground) {
+      const outerFill = showOuterBackground ? this.renderTheme.cardBg : "none";
+      const outerStroke = showOuterBorder ? this.renderTheme.border : "none";
+      svg += `
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="8" 
-          fill="${this.renderTheme.cardBg}" 
-          stroke="${this.renderTheme.border}" 
+          fill="${outerFill}" 
+          stroke="${outerStroke}" 
           stroke-width="1"/>`;
+    }
     if (title) {
       svg += `
     <text x="${pos.x + 16}" y="${pos.y + 24}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="13" 
           font-weight="600" 
           fill="${this.renderTheme.text}">${this.escapeXml(title)}</text>`;
     }
     const headerY = pos.y + (title ? 32 : 0);
-    svg += `
+    if (showInnerBorder) {
+      svg += `
     <line x1="${pos.x}" y1="${headerY + headerHeight}" x2="${pos.x + pos.width}" y2="${headerY + headerHeight}" 
           stroke="${this.renderTheme.border}" stroke-width="1"/>`;
-    columns.forEach((col, i) => {
+    }
+    safeColumns.forEach((col, i) => {
       svg += `
-    <text x="${pos.x + i * colWidth + 12}" y="${headerY + 26}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+    <text x="${pos.x + i * dataColWidth + 12}" y="${headerY + 26}" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="11" 
           font-weight="600" 
           fill="${this.renderTheme.textMuted}">${this.escapeXml(col)}</text>`;
     });
+    if (hasActions && showInnerBorder) {
+      const dividerX = pos.x + dataWidth;
+      svg += `
+    <line x1="${dividerX}" y1="${headerY + headerHeight}" x2="${dividerX}" y2="${headerY + headerHeight + mockRows.length * rowHeight}"
+          stroke="${this.renderTheme.border}" stroke-width="1"/>`;
+    }
     mockRows.forEach((row, rowIdx) => {
       const rowY = headerY + headerHeight + rowIdx * rowHeight;
-      svg += `
+      if (showInnerBorder) {
+        svg += `
     <line x1="${pos.x}" y1="${rowY + rowHeight}" x2="${pos.x + pos.width}" y2="${rowY + rowHeight}" 
           stroke="${this.renderTheme.border}" stroke-width="0.5"/>`;
-      columns.forEach((col, colIdx) => {
+      }
+      safeColumns.forEach((col, colIdx) => {
         const cellValue = row[col] || "";
         svg += `
-    <text x="${pos.x + colIdx * colWidth + 12}" y="${rowY + 22}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+    <text x="${pos.x + colIdx * dataColWidth + 12}" y="${rowY + 22}" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="12" 
           fill="${this.renderTheme.text}">${this.escapeXml(cellValue)}</text>`;
       });
+      if (hasActions) {
+        const iconSize = 14;
+        const buttonSize = 22;
+        const buttonGap = 6;
+        const actionsWidth = actions.length * buttonSize + Math.max(0, actions.length - 1) * buttonGap;
+        let currentX = pos.x + pos.width - 12 - actionsWidth;
+        const buttonY = rowY + (rowHeight - buttonSize) / 2;
+        actions.forEach((actionIcon) => {
+          const iconSvg = getIcon(actionIcon);
+          const iconX = currentX + (buttonSize - iconSize) / 2;
+          const iconY = buttonY + (buttonSize - iconSize) / 2;
+          svg += `
+    <rect x="${currentX}" y="${buttonY}" width="${buttonSize}" height="${buttonSize}" rx="4"
+          fill="${this.renderTheme.cardBg}" stroke="${showInnerBorder ? this.renderTheme.border : "none"}" stroke-width="1"/>`;
+          if (iconSvg) {
+            svg += `
+    <g transform="translate(${iconX}, ${iconY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${this.hexToRgba(this.resolveTextColor(), 0.75)}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(iconSvg)}
+      </svg>
+    </g>`;
+          }
+          currentX += buttonSize + buttonGap;
+        });
+      }
     });
+    const footerTop = headerY + headerHeight + mockRows.length * rowHeight + 16;
     if (pagination) {
-      const paginationY = headerY + headerHeight + mockRows.length * rowHeight + 16;
+      const paginationY = sameFooterAlign ? footerTop + 18 + 8 : footerTop;
       const buttonWidth = 40;
       const buttonHeight = 32;
       const gap = 8;
@@ -4521,18 +5324,25 @@ var SVGRenderer = class {
       } else {
         startX = pos.x + pos.width - totalWidth - 16;
       }
+      const previousIcon = getIcon("chevron-left");
       svg += `
     <rect x="${startX}" y="${paginationY}" 
           width="${buttonWidth}" height="${buttonHeight}" 
           rx="4" 
           fill="${this.renderTheme.cardBg}" 
           stroke="${this.renderTheme.border}" 
-          stroke-width="1"/>
-    <text x="${startX + buttonWidth / 2}" y="${paginationY + buttonHeight / 2 + 4}" 
-          font-family="system-ui, -apple-system, sans-serif" 
-          font-size="14" 
-          fill="${this.renderTheme.text}" 
-          text-anchor="middle">&lt;</text>`;
+          stroke-width="1"/>`;
+      if (previousIcon) {
+        const iconSize = 14;
+        const iconX = startX + (buttonWidth - iconSize) / 2;
+        const iconY = paginationY + (buttonHeight - iconSize) / 2;
+        svg += `
+    <g transform="translate(${iconX}, ${iconY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${this.resolveTextColor()}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(previousIcon)}
+      </svg>
+    </g>`;
+      }
       for (let i = 1; i <= pageCount; i++) {
         const btnX = startX + (buttonWidth + gap) * i;
         const isActive = i === 1;
@@ -4546,24 +5356,49 @@ var SVGRenderer = class {
           stroke="${this.renderTheme.border}" 
           stroke-width="1"/>
     <text x="${btnX + buttonWidth / 2}" y="${paginationY + buttonHeight / 2 + 4}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="14" 
           fill="${textColor}" 
           text-anchor="middle">${i}</text>`;
       }
       const nextX = startX + (buttonWidth + gap) * (pageCount + 1);
+      const nextIcon = getIcon("chevron-right");
       svg += `
     <rect x="${nextX}" y="${paginationY}" 
           width="${buttonWidth}" height="${buttonHeight}" 
           rx="4" 
           fill="${this.renderTheme.cardBg}" 
           stroke="${this.renderTheme.border}" 
-          stroke-width="1"/>
-    <text x="${nextX + buttonWidth / 2}" y="${paginationY + buttonHeight / 2 + 4}" 
-          font-family="system-ui, -apple-system, sans-serif" 
-          font-size="14" 
-          fill="${this.renderTheme.text}" 
-          text-anchor="middle">&gt;</text>`;
+          stroke-width="1"/>`;
+      if (nextIcon) {
+        const iconSize = 14;
+        const iconX = nextX + (buttonWidth - iconSize) / 2;
+        const iconY = paginationY + (buttonHeight - iconSize) / 2;
+        svg += `
+    <g transform="translate(${iconX}, ${iconY})">
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${this.resolveTextColor()}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        ${this.extractSvgContent(nextIcon)}
+      </svg>
+    </g>`;
+      }
+    }
+    if (hasCaption) {
+      const captionY = sameFooterAlign ? footerTop + 12 : footerTop + (pagination ? 21 : 12);
+      let captionX = pos.x + 16;
+      let textAnchor = "start";
+      if (captionAlign === "center") {
+        captionX = pos.x + pos.width / 2;
+        textAnchor = "middle";
+      } else if (captionAlign === "right") {
+        captionX = pos.x + pos.width - 16;
+        textAnchor = "end";
+      }
+      svg += `
+    <text x="${captionX}" y="${captionY}" 
+          font-family="Arial, Helvetica, sans-serif" 
+          font-size="12" 
+          fill="${this.hexToRgba(this.resolveTextColor(), 0.75)}"
+          text-anchor="${textAnchor}">${this.escapeXml(caption)}</text>`;
     }
     svg += "\n  </g>";
     return svg;
@@ -4678,7 +5513,7 @@ var SVGRenderer = class {
   // TEXT/CONTENT COMPONENTS
   // ============================================================================
   renderText(node, pos) {
-    const text = String(node.props.content || "Text content");
+    const text = String(node.props.text || "Text content");
     const fontSize = this.tokens.text.fontSize;
     const lineHeightPx = Math.ceil(fontSize * this.tokens.text.lineHeight);
     const lines = this.wrapTextToLines(text, pos.width, fontSize);
@@ -4688,7 +5523,7 @@ var SVGRenderer = class {
     ).join("");
     return `<g${this.getDataNodeId(node)}>
     <text x="${pos.x}" y="${firstLineY}"
-          font-family="system-ui, -apple-system, sans-serif"
+          font-family="Arial, Helvetica, sans-serif"
           font-size="${fontSize}"
           fill="${this.renderTheme.text}">${tspans}</text>
   </g>`;
@@ -4697,7 +5532,7 @@ var SVGRenderer = class {
     const text = String(node.props.text || "Label");
     return `<g${this.getDataNodeId(node)}>
     <text x="${pos.x}" y="${pos.y + 12}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="12" 
           fill="${this.renderTheme.textMuted}">${this.escapeXml(text)}</text>
   </g>`;
@@ -4731,7 +5566,7 @@ var SVGRenderer = class {
     const placeholderY = controlY + fontSize + 6;
     return `<g${this.getDataNodeId(node)}>
     ${label ? `<text x="${pos.x}" y="${this.getControlLabelBaselineY(pos.y)}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="12" 
           fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>` : ""}
     <rect x="${pos.x}" y="${controlY}" 
@@ -4741,7 +5576,7 @@ var SVGRenderer = class {
           stroke="${this.renderTheme.border}" 
           stroke-width="1"/>
     <text x="${pos.x + paddingX}" y="${placeholderY}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="${fontSize}" 
           fill="${this.renderTheme.textMuted}">${this.escapeXml(placeholder)}</text>
   </g>`;
@@ -4749,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="system-ui, -apple-system, 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="system-ui, -apple-system, sans-serif" 
-          font-size="14" 
-          fill="${this.renderTheme.textMuted}">${this.escapeXml(placeholder)}</text>
-    <text x="${pos.x + pos.width - 20}" y="${centerY}" 
-          font-family="system-ui, -apple-system, 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");
@@ -4788,12 +5659,12 @@ var SVGRenderer = class {
           stroke="${this.renderTheme.border}" 
           stroke-width="1"/>
     ${checked ? `<text x="${pos.x + checkboxSize / 2}" y="${checkboxY + 14}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="12" 
           fill="white" 
           text-anchor="middle">\u2713</text>` : ""}
     <text x="${pos.x + checkboxSize + 12}" y="${pos.y + pos.height / 2 + 5}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="14" 
           fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>
   </g>`;
@@ -4814,7 +5685,7 @@ var SVGRenderer = class {
             r="${radioSize / 3.5}" 
             fill="${controlColor}"/>` : ""}
     <text x="${pos.x + radioSize + 12}" y="${pos.y + pos.height / 2 + 5}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="14" 
           fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>
   </g>`;
@@ -4836,7 +5707,7 @@ var SVGRenderer = class {
             r="8" 
             fill="white"/>
     <text x="${pos.x + toggleWidth + 12}" y="${pos.y + pos.height / 2 + 5}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="14" 
           fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>
   </g>`;
@@ -4866,7 +5737,7 @@ var SVGRenderer = class {
           stroke-width="1"/>
     <!-- Title -->
     <text x="${pos.x + padding}" y="${pos.y + padding + 8}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="14" 
           font-weight="600" 
           fill="${this.renderTheme.text}">${this.escapeXml(title)}</text>
@@ -4882,7 +5753,7 @@ var SVGRenderer = class {
           fill="${isActive ? this.renderTheme.primary : "transparent"}" 
           stroke="none"/>
     <text x="${pos.x + 16}" y="${itemY + 22}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="13" 
           fill="${isActive ? "white" : this.renderTheme.textMuted}">${this.escapeXml(item)}</text>`;
     });
@@ -4908,7 +5779,7 @@ var SVGRenderer = class {
           stroke="${isActive ? "none" : this.renderTheme.border}" 
           stroke-width="1"/>
     <text x="${tabX + tabWidth / 2}" y="${pos.y + 28}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="13" 
           font-weight="${isActive ? "600" : "500"}" 
           fill="${isActive ? "white" : this.renderTheme.text}" 
@@ -4971,12 +5842,12 @@ var SVGRenderer = class {
           rx="6" 
           fill="${bgColor}"/>
     ${hasTitle ? `<text x="${contentX}" y="${titleStartY}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="${fontSize}" 
           font-weight="700"
           fill="${bgColor}">${titleTspans}</text>` : ""}
     <text x="${contentX}" y="${textStartY}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="${fontSize}" 
           fill="${bgColor}">${textTspans}</text>
   </g>`;
@@ -4997,7 +5868,7 @@ var SVGRenderer = class {
           fill="${bgColor}"
           stroke="none"/>
     <text x="${pos.x + pos.width / 2}" y="${pos.y + pos.height / 2 + 4}"
-          font-family="system-ui, -apple-system, sans-serif"
+          font-family="Arial, Helvetica, sans-serif"
           font-size="${fontSize}"
           font-weight="600"
           fill="${textColor}"
@@ -5036,20 +5907,20 @@ var SVGRenderer = class {
           stroke-width="1"/>
     
       <text x="${modalX + padding}" y="${modalY + padding + 16}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="16" 
           font-weight="600" 
           fill="${this.renderTheme.text}">${this.escapeXml(title)}</text>
     
     <!-- Close button -->
       <text x="${modalX + pos.width - 16}" y="${modalY + padding + 12}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="18" 
           fill="${this.renderTheme.textMuted}">\u2715</text>
     
     <!-- Content placeholder -->
       <text x="${modalX + pos.width / 2}" y="${modalY + headerHeight + (pos.height - headerHeight) / 2}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="13" 
           fill="${this.renderTheme.textMuted}" 
           text-anchor="middle">Modal content</text>
@@ -5082,7 +5953,7 @@ var SVGRenderer = class {
     if (title) {
       svg += `
     <text x="${pos.x + padding}" y="${pos.y + 26}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="13" 
           font-weight="600" 
           fill="${this.renderTheme.text}">${this.escapeXml(title)}</text>
@@ -5098,7 +5969,7 @@ var SVGRenderer = class {
           stroke="${this.renderTheme.border}" 
           stroke-width="0.5"/>
     <text x="${pos.x + padding}" y="${itemY + 24}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="13" 
           fill="${this.renderTheme.text}">${this.escapeXml(item)}</text>`;
       }
@@ -5116,7 +5987,7 @@ var SVGRenderer = class {
           stroke-width="1" 
           stroke-dasharray="4 4"/>
     <text x="${pos.x + pos.width / 2}" y="${pos.y + pos.height / 2}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="12" 
           fill="${this.renderTheme.textMuted}" 
           text-anchor="middle">${node.componentType}</text>
@@ -5164,14 +6035,14 @@ var SVGRenderer = class {
     
     <!-- Title -->
     <text x="${innerX}" y="${titleY}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="${titleSize}" 
           font-weight="500" 
           fill="${this.renderTheme.textMuted}">${this.escapeXml(visibleTitle)}</text>
     
     <!-- Value (Large) -->
     <text x="${innerX}" y="${valueY}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="${valueSize}" 
           font-weight="700" 
           fill="${accentColor}">${this.escapeXml(value)}</text>`;
@@ -5194,7 +6065,7 @@ var SVGRenderer = class {
       svg += `
     <!-- Caption -->
     <text x="${innerX}" y="${captionY}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="${captionSize}" 
           fill="${this.renderTheme.textMuted}">${this.escapeXml(visibleCaption)}</text>`;
     }
@@ -5205,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,
@@ -5223,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;
@@ -5323,7 +6195,7 @@ var SVGRenderer = class {
       const fontWeight = isLast ? "500" : "400";
       svg += `
     <text x="${currentX}" y="${pos.y + pos.height / 2 + 4}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="${fontSize}" 
           font-weight="${fontWeight}" 
           fill="${textColor}">${this.escapeXml(item)}</text>`;
@@ -5332,7 +6204,7 @@ var SVGRenderer = class {
       if (!isLast) {
         svg += `
     <text x="${currentX + 4}" y="${pos.y + pos.height / 2 + 4}" 
-          font-family="system-ui, -apple-system, sans-serif" 
+          font-family="Arial, Helvetica, sans-serif" 
           font-size="${fontSize}" 
           fill="${this.renderTheme.textMuted}">${this.escapeXml(separator)}</text>`;
         currentX += separatorWidth;
@@ -5350,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) : "rgba(30, 41, 59, 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;
@@ -5370,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="rgba(30, 41, 59, 0.6)" 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>`;
@@ -5380,28 +6257,29 @@ var SVGRenderer = class {
         }
       }
       svg += `
-    <text x="${currentX}" y="${itemY + itemHeight / 2 + 5}" 
-          font-family="system-ui, -apple-system, 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>";
     return svg;
   }
   renderIcon(node, pos) {
-    const iconType = String(node.props.type || "help-circle");
+    const iconType = String(node.props.icon || "help-circle");
     const size = String(node.props.size || "md");
+    const variant = String(node.props.variant || "default");
     const iconSvg = getIcon(iconType);
+    const iconColor = variant === "default" ? this.hexToRgba(this.resolveTextColor(), 0.75) : this.resolveVariantColor(variant, this.resolveTextColor());
     if (!iconSvg) {
       return `<g${this.getDataNodeId(node)}>
     <!-- Icon not found: ${iconType} -->
-    <circle cx="${pos.x + pos.width / 2}" cy="${pos.y + pos.height / 2}" r="${Math.min(pos.width, pos.height) / 2 - 2}" fill="none" stroke="rgba(100, 116, 139, 0.4)" stroke-width="1"/>
-    <text x="${pos.x + pos.width / 2}" y="${pos.y + pos.height / 2 + 4}" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="rgba(100, 116, 139, 0.6)" text-anchor="middle">?</text>
+    <circle cx="${pos.x + pos.width / 2}" cy="${pos.y + pos.height / 2}" r="${Math.min(pos.width, pos.height) / 2 - 2}" fill="none" stroke="${this.hexToRgba(this.resolveMutedColor(), 0.4)}" stroke-width="1"/>
+    <text x="${pos.x + pos.width / 2}" y="${pos.y + pos.height / 2 + 4}" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="${this.hexToRgba(this.resolveMutedColor(), 0.7)}" text-anchor="middle">?</text>
   </g>`;
     }
     const iconSize = this.getIconSize(size);
-    const iconColor = "rgba(30, 41, 59, 0.75)";
     const offsetX = pos.x + (pos.width - iconSize) / 2;
     const offsetY = pos.y + (pos.height - iconSize) / 2;
     const wrappedSvg = `<g${this.getDataNodeId(node)} transform="translate(${offsetX}, ${offsetY})">
@@ -5416,23 +6294,32 @@ var SVGRenderer = class {
     const variant = String(node.props.variant || "default");
     const size = String(node.props.size || "md");
     const disabled = String(node.props.disabled || "false") === "true";
+    const density = this.ir.project.style.density || "normal";
+    const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
+    const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
     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 iconColor = hasExplicitVariantColor ? "#FFFFFF" : "rgba(30, 41, 59, 0.75)";
-    const borderColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.7) : "rgba(100, 116, 139, 0.4)";
+    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) : 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 = this.getIconButtonSize(size);
+    const buttonSize = Math.max(
+      16,
+      Math.min(resolveActionControlHeight(size, density), pos.height - labelOffset)
+    );
+    const buttonWidth = buttonSize + extraPadding * 2;
     const radius = 6;
+    const buttonY = pos.y + labelOffset;
     let svg = `<g${this.getDataNodeId(node)} opacity="${opacity}">
     <!-- IconButton background -->
-    <rect x="${pos.x}" y="${pos.y}" width="${buttonSize}" height="${buttonSize}" rx="${radius}" fill="${bgColor}" stroke="${borderColor}" stroke-width="1"/>`;
+    <rect x="${pos.x}" y="${buttonY}" width="${buttonWidth}" height="${buttonSize}" rx="${radius}" fill="${bgColor}" stroke="${borderColor}" stroke-width="1"/>`;
     if (iconSvg) {
       const iconSize = buttonSize * 0.6;
-      const offsetX = pos.x + (buttonSize - iconSize) / 2;
-      const offsetY = pos.y + (buttonSize - iconSize) / 2;
+      const offsetX = pos.x + (buttonWidth - iconSize) / 2;
+      const offsetY = buttonY + (buttonSize - iconSize) / 2;
       svg += `
     <!-- Icon -->
     <g transform="translate(${offsetX}, ${offsetY})">
@@ -5465,15 +6352,46 @@ var SVGRenderer = class {
   resolveChartColor() {
     return this.colorResolver.resolveColor("chart", this.renderTheme.primary);
   }
+  resolveTextColor() {
+    const fallback = this.options.theme === "dark" ? "#FFFFFF" : "#000000";
+    return this.colorResolver.resolveColor("text", fallback);
+  }
+  resolveMutedColor() {
+    const fallback = this.options.theme === "dark" ? "#94A3B8" : "#64748B";
+    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];
   }
@@ -5791,21 +6709,28 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
+    const size = String(node.props.size || "md");
+    const density = this.ir.project.style.density || "normal";
+    const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
+    const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
     const fullWidth = this.shouldButtonFillAvailableWidth(node);
     const radius = this.tokens.button.radius;
     const fontSize = this.tokens.button.fontSize;
     const paddingX = this.tokens.button.paddingX;
-    const paddingY = this.tokens.button.paddingY;
+    const buttonHeight = Math.max(
+      16,
+      Math.min(resolveActionControlHeight(size, density), pos.height - labelOffset)
+    );
+    const buttonY = pos.y + labelOffset;
     const textWidth = text.length * fontSize * 0.6;
-    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(textWidth + paddingX * 2, 60), pos.width);
-    const buttonHeight = fontSize + paddingY * 2;
+    const buttonWidth = fullWidth ? Math.max(1, pos.width) : this.clampControlWidth(Math.max(textWidth + (paddingX + extraPadding) * 2, 60), pos.width);
     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 borderColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.7) : "rgba(100, 116, 139, 0.4)";
     return `<g${this.getDataNodeId(node)}>
-      <rect x="${pos.x}" y="${pos.y}"
+      <rect x="${pos.x}" y="${buttonY}"
             width="${buttonWidth}" height="${buttonHeight}"
             rx="${radius}"
             fill="${bgColor}"
@@ -5819,13 +6744,14 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
   renderLink(node, pos) {
     const text = String(node.props.text || "Link");
     const variant = String(node.props.variant || "primary");
+    const size = String(node.props.size || "md");
+    const density = this.ir.project.style.density || "normal";
     const fontSize = this.tokens.button.fontSize;
     const paddingX = this.tokens.button.paddingX;
-    const paddingY = this.tokens.button.paddingY;
     const linkColor = this.resolveVariantColor(variant, this.renderTheme.primary);
     const textWidth = this.estimateTextWidth(text, fontSize);
     const linkWidth = this.clampControlWidth(Math.max(textWidth + paddingX * 2, 60), pos.width);
-    const linkHeight = fontSize + paddingY * 2;
+    const linkHeight = Math.max(16, Math.min(resolveActionControlHeight(size, density), pos.height));
     const blockHeight = Math.max(8, Math.round(fontSize * 0.75));
     const blockWidth = Math.max(28, Math.min(textWidth, linkWidth - paddingX * 2));
     const blockX = pos.x + (linkWidth - blockWidth) / 2;
@@ -5842,17 +6768,70 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
             stroke-width="1"/>
     </g>`;
   }
+  /**
+   * Render breadcrumbs as skeleton blocks: <rect> / <rect> / <rect accent>
+   */
+  renderBreadcrumbs(node, pos) {
+    const itemsStr = String(node.props.items || "Home");
+    const items = itemsStr.split(",").map((s) => s.trim()).filter(Boolean);
+    const separator = String(node.props.separator || "/");
+    const blockColor = this.renderTheme.border;
+    const charWidth = 6.2;
+    const minBlockWidth = 28;
+    const maxBlockWidth = Math.max(minBlockWidth, Math.floor(pos.width * 0.4));
+    const blockHeight = 12;
+    const blockY = pos.y + (pos.height - blockHeight) / 2;
+    const blockRadius = 4;
+    const blockPaddingX = 10;
+    const itemSpacing = 8;
+    const separatorWidth = 12;
+    const contentRight = pos.x + pos.width;
+    let currentX = pos.x;
+    let svg = `<g${this.getDataNodeId(node)}>`;
+    items.forEach((item, index) => {
+      if (currentX >= contentRight) return;
+      const isLast = index === items.length - 1;
+      const estimatedTextWidth = item.length * charWidth;
+      let blockWidth = Math.max(
+        minBlockWidth,
+        Math.min(maxBlockWidth, Math.ceil(estimatedTextWidth + blockPaddingX * 2))
+      );
+      blockWidth = Math.min(blockWidth, Math.max(0, contentRight - currentX));
+      if (blockWidth < minBlockWidth) return;
+      const fillColor = blockColor;
+      svg += `
+      <rect x="${currentX}" y="${blockY}"
+            width="${blockWidth}" height="${blockHeight}"
+            rx="${blockRadius}"
+            fill="${fillColor}"
+            stroke="none"/>`;
+      currentX += blockWidth + itemSpacing;
+      if (!isLast && currentX + separatorWidth <= contentRight) {
+        svg += `
+      <text x="${currentX + 2}" y="${pos.y + pos.height / 2 + 4}"
+            font-family="Arial, Helvetica, sans-serif"
+            font-size="12"
+            fill="${blockColor}">${this.escapeXml(separator)}</text>`;
+        currentX += separatorWidth;
+      }
+    });
+    svg += "\n    </g>";
+    return svg;
+  }
   /**
    * Render heading as gray block
    */
   renderHeading(node, pos) {
     const headingTypography = this.getHeadingTypography(node);
+    const variant = String(node.props.variant || "default");
+    const blockColor = variant === "default" ? this.renderTheme.border : this.hexToRgba(this.resolveVariantColor(variant, this.resolveTextColor()), 0.35);
     return this.renderTextBlock(
       node,
       pos,
       String(node.props.text || "Heading"),
       headingTypography.fontSize,
-      headingTypography.lineHeight
+      headingTypography.lineHeight,
+      blockColor
     );
   }
   /**
@@ -5862,7 +6841,7 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
     return this.renderTextBlock(
       node,
       pos,
-      String(node.props.content || "Text content"),
+      String(node.props.text || "Text content"),
       this.tokens.text.fontSize,
       this.tokens.text.lineHeight
     );
@@ -5873,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)
    */
@@ -6103,18 +7095,42 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
   renderTable(node, pos) {
     const title = String(node.props.title || "");
     const columnsStr = String(node.props.columns || "Col1,Col2,Col3");
-    const columns = columnsStr.split(",").map((c) => c.trim());
+    const columns = columnsStr.split(",").map((c) => c.trim()).filter(Boolean);
     const rowCount = Number(node.props.rows || node.props.rowsMock || 5);
+    const actions = String(node.props.actions || "").split(",").map((value) => value.trim()).filter(Boolean);
+    const hasActions = actions.length > 0;
+    const pagination = this.parseBooleanProp(node.props.pagination, false);
+    const parsedPageCount = Number(node.props.pages || 5);
+    const pageCount = Number.isFinite(parsedPageCount) && parsedPageCount > 0 ? Math.floor(parsedPageCount) : 5;
+    const paginationAlign = String(node.props.paginationAlign || "right");
+    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,
+      false
+    );
+    const showInnerBorder = this.parseBooleanProp(node.props.innerBorder, true);
+    const rawCaptionAlign = String(node.props.captionAlign || "");
+    const captionAlign = rawCaptionAlign === "left" || rawCaptionAlign === "center" || rawCaptionAlign === "right" ? rawCaptionAlign : paginationAlign === "left" ? "right" : "left";
+    const sameFooterAlign = hasCaption && pagination && captionAlign === paginationAlign;
+    const safeColumns = columns.length > 0 ? columns : ["Column"];
     const headerHeight = 44;
     const rowHeight = 36;
-    const colWidth = pos.width / columns.length;
-    let svg = `<g${this.getDataNodeId(node)}>
+    const actionColumnWidth = hasActions ? Math.max(96, Math.min(180, actions.length * 26 + 28)) : 0;
+    const dataWidth = Math.max(20, pos.width - actionColumnWidth);
+    const colWidth = dataWidth / safeColumns.length;
+    let svg = `<g${this.getDataNodeId(node)}>`;
+    if (showOuterBorder || showOuterBackground) {
+      const outerFill = showOuterBackground ? this.renderTheme.cardBg : "none";
+      const outerStroke = showOuterBorder ? this.renderTheme.border : "none";
+      svg += `
       <rect x="${pos.x}" y="${pos.y}"
             width="${pos.width}" height="${pos.height}"
             rx="8"
-            fill="${this.renderTheme.cardBg}"
-            stroke="${this.renderTheme.border}"
+            fill="${outerFill}"
+            stroke="${outerStroke}"
             stroke-width="1"/>`;
+    }
     if (title) {
       svg += `<rect x="${pos.x + 16}" y="${pos.y + 12}"
                 width="100" height="12"
@@ -6122,19 +7138,28 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
                 fill="${this.renderTheme.border}"/>`;
     }
     const headerY = pos.y + (title ? 32 : 0);
-    svg += `<line x1="${pos.x}" y1="${headerY + headerHeight}" x2="${pos.x + pos.width}" y2="${headerY + headerHeight}"
+    if (showInnerBorder) {
+      svg += `<line x1="${pos.x}" y1="${headerY + headerHeight}" x2="${pos.x + pos.width}" y2="${headerY + headerHeight}"
                   stroke="${this.renderTheme.border}" stroke-width="1"/>`;
-    columns.forEach((_, i) => {
+    }
+    safeColumns.forEach((_, i) => {
       svg += `<rect x="${pos.x + i * colWidth + 12}" y="${headerY + 16}"
                     width="50" height="10"
                     rx="4"
                     fill="${this.renderTheme.border}"/>`;
     });
+    if (hasActions && showInnerBorder) {
+      const dividerX = pos.x + dataWidth;
+      svg += `<line x1="${dividerX}" y1="${headerY + headerHeight}" x2="${dividerX}" y2="${headerY + headerHeight + rowCount * rowHeight}"
+                    stroke="${this.renderTheme.border}" stroke-width="1"/>`;
+    }
     for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
       const rowY = headerY + headerHeight + rowIdx * rowHeight;
-      svg += `<line x1="${pos.x}" y1="${rowY + rowHeight}" x2="${pos.x + pos.width}" y2="${rowY + rowHeight}"
+      if (showInnerBorder) {
+        svg += `<line x1="${pos.x}" y1="${rowY + rowHeight}" x2="${pos.x + pos.width}" y2="${rowY + rowHeight}"
                     stroke="${this.renderTheme.border}" stroke-width="0.5"/>`;
-      columns.forEach((_, colIdx) => {
+      }
+      safeColumns.forEach((_, colIdx) => {
         const variance = (rowIdx * 17 + colIdx * 11) % 5 * 10;
         const blockWidth = Math.min(colWidth - 24, 60 + variance);
         svg += `<rect x="${pos.x + colIdx * colWidth + 12}" y="${rowY + 12}"
@@ -6142,6 +7167,45 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
                       rx="4"
                       fill="${this.renderTheme.border}"/>`;
       });
+      if (hasActions) {
+        const iconSize = 14;
+        const iconGap = 8;
+        const actionsWidth = actions.length * iconSize + Math.max(0, actions.length - 1) * iconGap;
+        let currentX = pos.x + pos.width - 12 - actionsWidth;
+        const iconY = rowY + (rowHeight - iconSize) / 2;
+        actions.forEach(() => {
+          svg += `<rect x="${currentX}" y="${iconY}" width="${iconSize}" height="${iconSize}" rx="3" fill="${this.renderTheme.border}"/>`;
+          currentX += iconSize + iconGap;
+        });
+      }
+    }
+    const footerTop = headerY + headerHeight + rowCount * rowHeight + 16;
+    if (hasCaption) {
+      const captionY = sameFooterAlign ? footerTop : footerTop + (pagination ? 10 : 0);
+      const captionWidth = Math.min(220, Math.max(90, pos.width * 0.34));
+      let captionX = pos.x + 16;
+      if (captionAlign === "center") {
+        captionX = pos.x + (pos.width - captionWidth) / 2;
+      } else if (captionAlign === "right") {
+        captionX = pos.x + pos.width - 16 - captionWidth;
+      }
+      svg += `<rect x="${captionX}" y="${captionY}" width="${captionWidth}" height="10" rx="4" fill="${this.renderTheme.border}"/>`;
+    }
+    if (pagination) {
+      const buttonWidth = 28;
+      const buttonHeight = 24;
+      const buttonGap = 8;
+      const totalWidth = (pageCount + 2) * buttonWidth + (pageCount + 1) * buttonGap;
+      const paginationY = sameFooterAlign ? footerTop + 18 : footerTop;
+      let startX = pos.x + pos.width - totalWidth - 16;
+      if (paginationAlign === "left") {
+        startX = pos.x + 16;
+      } else if (paginationAlign === "center") {
+        startX = pos.x + (pos.width - totalWidth) / 2;
+      }
+      for (let i = 0; i < pageCount + 2; i++) {
+        svg += `<rect x="${startX + i * (buttonWidth + buttonGap)}" y="${paginationY}" width="${buttonWidth}" height="${buttonHeight}" rx="4" fill="${this.renderTheme.border}"/>`;
+      }
     }
     svg += "</g>";
     return svg;
@@ -6154,21 +7218,39 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
     const subtitle = String(node.props.subtitle || "");
     const actions = String(node.props.actions || "");
     const user = String(node.props.user || "");
+    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 radiusMap = {
+      none: 0,
+      sm: 4,
+      md: this.tokens.card.radius,
+      lg: 12,
+      xl: 16
+    };
+    const topbarRadius = radiusMap[String(node.props.radius || "md")] ?? this.tokens.card.radius;
     const topbar = this.calculateTopbarLayout(node, pos, title, subtitle, actions, user);
     const titleWidth = Math.max(56, Math.min(topbar.titleMaxWidth * 0.55, topbar.titleMaxWidth));
     const subtitleWidth = Math.max(48, Math.min(topbar.titleMaxWidth * 0.4, topbar.titleMaxWidth));
-    let svg = `<g${this.getDataNodeId(node)}>
+    let svg = `<g${this.getDataNodeId(node)}>`;
+    if (showBorder || showBackground) {
+      const bg = showBackground ? this.renderTheme.cardBg : "none";
+      const stroke = showBorder ? this.renderTheme.border : "none";
+      svg += `
       <rect x="${pos.x}" y="${pos.y}"
             width="${pos.width}" height="${pos.height}"
-            fill="${this.renderTheme.cardBg}"
-            stroke="${this.renderTheme.border}"
-            stroke-width="0 0 1 0"/>`;
+            rx="${topbarRadius}"
+            fill="${bg}"
+            stroke="${stroke}"
+            stroke-width="1"/>`;
+    }
     if (topbar.leftIcon) {
       svg += `
       <rect x="${topbar.leftIcon.badgeX}" y="${topbar.leftIcon.badgeY}"
             width="${topbar.leftIcon.badgeSize}" height="${topbar.leftIcon.badgeSize}"
             rx="${topbar.leftIcon.badgeRadius}"
-            fill="${this.renderTheme.border}"/>`;
+            fill="${accentBlock}"/>`;
     }
     svg += `
       <rect x="${topbar.textX}" y="${topbar.titleY - 12}"
@@ -6187,7 +7269,7 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
       <rect x="${action.x}" y="${action.y}"
             width="${action.width}" height="${action.height}"
             rx="6"
-            fill="${this.renderTheme.border}"/>`;
+            fill="${accentBlock}"/>`;
     });
     if (topbar.userBadge) {
       svg += `
@@ -6255,12 +7337,14 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
    */
   renderIcon(node, pos) {
     const size = String(node.props.size || "md");
+    const variant = String(node.props.variant || "default");
     const iconSize = this.getIconSize(size);
+    const blockColor = variant === "default" ? this.renderTheme.border : this.hexToRgba(this.resolveVariantColor(variant, this.resolveTextColor()), 0.35);
     return `<g${this.getDataNodeId(node)}>
       <rect x="${pos.x}" y="${pos.y + (pos.height - iconSize) / 2}"
             width="${iconSize}" height="${iconSize}"
             rx="2"
-            fill="${this.renderTheme.border}"/>
+            fill="${blockColor}"/>
     </g>`;
   }
   /**
@@ -6269,15 +7353,23 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
   renderIconButton(node, pos) {
     const variant = String(node.props.variant || "default");
     const size = String(node.props.size || "md");
+    const density = this.ir.project.style.density || "normal";
+    const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
+    const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
     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 borderColor = hasExplicitVariantColor ? this.hexToRgba(resolvedBase, 0.7) : "rgba(100, 116, 139, 0.4)";
-    const buttonSize = this.getIconButtonSize(size);
+    const buttonSize = Math.max(
+      16,
+      Math.min(resolveActionControlHeight(size, density), pos.height - labelOffset)
+    );
+    const buttonWidth = buttonSize + extraPadding * 2;
+    const buttonY = pos.y + labelOffset;
     return `<g${this.getDataNodeId(node)}>
-      <rect x="${pos.x}" y="${pos.y}"
-            width="${buttonSize}" height="${buttonSize}"
+      <rect x="${pos.x}" y="${buttonY}"
+            width="${buttonWidth}" height="${buttonSize}"
             rx="6"
             fill="${bgColor}"
             stroke="${borderColor}"
@@ -6357,10 +7449,10 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
   /**
    * Private helper: Render text as gray block
    */
-  renderTextBlock(node, pos, text, fontSize, lineHeightMultiplier) {
+  renderTextBlock(node, pos, text, fontSize, lineHeightMultiplier, color) {
     const lineHeight = Math.ceil(fontSize * lineHeightMultiplier);
     const blockHeight = Math.max(8, Math.round(fontSize * 0.75));
-    const blockColor = this.renderTheme.border;
+    const blockColor = color || this.renderTheme.border;
     const lines = this.wrapTextToLines(text, pos.width, fontSize);
     const contentHeight = lines.length * lineHeight;
     const startY = pos.y + Math.max(0, (pos.height - contentHeight) / 2);
@@ -6442,38 +7534,78 @@ var SketchSVGRenderer = class extends SVGRenderer {
   renderButton(node, pos) {
     const text = String(node.props.text || "Button");
     const variant = String(node.props.variant || "default");
+    const size = String(node.props.size || "md");
+    const density = this.ir.project.style.density || "normal";
+    const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
+    const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
     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;
     const paddingX = this.tokens.button.paddingX;
-    const paddingY = this.tokens.button.paddingY;
+    const buttonHeight = Math.max(
+      16,
+      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 * 2, 60), pos.width);
-    const buttonHeight = fontSize + paddingY * 2;
-    const availableTextWidth = Math.max(0, buttonWidth - paddingX * 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);
-    const variantColor = hasExplicitVariantColor ? this.resolveVariantColor(variant, this.renderTheme.primary) : "#2D3748";
+    const variantColor = hasExplicitVariantColor ? this.resolveVariantColor(variant, this.renderTheme.primary) : this.resolveTextColor();
     const borderColor = variantColor;
     const textColor = variantColor;
     const strokeWidth = 0.5;
-    return `<g${this.getDataNodeId(node)}>
-      <rect x="${pos.x}" y="${pos.y}"
+    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="${pos.y + 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
@@ -6483,7 +7615,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const variant = String(node.props.variant || "default");
     const semanticBase = this.getSemanticVariantColor(variant);
     const hasExplicitVariantColor = semanticBase !== void 0 || this.colorResolver.hasColor(variant);
-    const variantColor = hasExplicitVariantColor ? this.resolveVariantColor(variant, this.renderTheme.primary) : "#2D3748";
+    const variantColor = hasExplicitVariantColor ? this.resolveVariantColor(variant, this.renderTheme.primary) : this.resolveTextColor();
     const borderColor = variantColor;
     const textColor = variantColor;
     const badgeRadius = this.tokens.badge.radius === "pill" ? pos.height / 2 : this.tokens.badge.radius;
@@ -6510,17 +7642,22 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const iconName = String(node.props.icon || "help-circle");
     const variant = String(node.props.variant || "default");
     const size = String(node.props.size || "md");
+    const density = this.ir.project.style.density || "normal";
+    const labelOffset = this.parseBooleanProp(node.props.labelSpace, false) ? 18 : 0;
+    const extraPadding = resolveControlHorizontalPadding(String(node.props.padding || "none"), density);
     const semanticBase = this.getSemanticVariantColor(variant);
     const hasExplicitVariantColor = semanticBase !== void 0 || this.colorResolver.hasColor(variant);
-    const variantColor = hasExplicitVariantColor ? this.resolveVariantColor(variant, this.renderTheme.primary) : "#2D3748";
+    const variantColor = hasExplicitVariantColor ? this.resolveVariantColor(variant, this.renderTheme.primary) : this.resolveTextColor();
     const borderColor = variantColor;
     const iconColor = variantColor;
-    const buttonSize = this.getIconButtonSize(size);
+    const buttonSize = Math.max(16, Math.min(resolveControlHeight(size, density), pos.height - labelOffset));
+    const buttonWidth = buttonSize + extraPadding * 2;
     const radius = 6;
+    const buttonY = pos.y + labelOffset;
     const iconSvg = this.getIconSvg(iconName);
     let svg = `<g${this.getDataNodeId(node)}>
-      <rect x="${pos.x}" y="${pos.y}"
-            width="${buttonSize}" height="${buttonSize}"
+      <rect x="${pos.x}" y="${buttonY}"
+            width="${buttonWidth}" height="${buttonSize}"
             rx="${radius}"
             fill="none"
             stroke="${borderColor}"
@@ -6528,8 +7665,8 @@ var SketchSVGRenderer = class extends SVGRenderer {
             filter="url(#sketch-rough)"/>`;
     if (iconSvg) {
       const iconSize = buttonSize * 0.6;
-      const offsetX = pos.x + (buttonSize - iconSize) / 2;
-      const offsetY = pos.y + (buttonSize - iconSize) / 2;
+      const offsetX = pos.x + (buttonWidth - iconSize) / 2;
+      const offsetY = buttonY + (buttonSize - iconSize) / 2;
       svg += `
       <g transform="translate(${offsetX}, ${offsetY})">
         <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round">
@@ -6593,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
@@ -6680,6 +7855,8 @@ var SketchSVGRenderer = class extends SVGRenderer {
    */
   renderHeading(node, pos) {
     const text = String(node.props.text || "Heading");
+    const variant = String(node.props.variant || "default");
+    const headingColor = variant === "default" ? this.resolveTextColor() : this.resolveVariantColor(variant, this.resolveTextColor());
     const headingTypography = this.getHeadingTypography(node);
     const fontSize = headingTypography.fontSize;
     const fontWeight = headingTypography.fontWeight;
@@ -6692,7 +7869,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
           font-family="${this.fontFamily}"
           font-size="${fontSize}"
           font-weight="${fontWeight}"
-          fill="${this.renderTheme.text}">${this.escapeXml(text)}</text>
+          fill="${headingColor}">${this.escapeXml(text)}</text>
   </g>`;
     }
     const tspans = lines.map(
@@ -6703,7 +7880,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
           font-family="${this.fontFamily}"
           font-size="${fontSize}"
           font-weight="${fontWeight}"
-          fill="${this.renderTheme.text}">${tspans}</text>
+          fill="${headingColor}">${tspans}</text>
   </g>`;
   }
   /**
@@ -6714,7 +7891,8 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const subtitle = String(node.props.subtitle || "");
     const actions = String(node.props.actions || "");
     const user = String(node.props.user || "");
-    const accentColor = this.resolveAccentColor();
+    const variant = String(node.props.variant || "default");
+    const accentColor = variant === "default" ? this.resolveAccentColor() : this.resolveVariantColor(variant, this.resolveAccentColor());
     const topbar = this.calculateTopbarLayout(node, pos, title, subtitle, actions, user);
     let svg = `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}"
@@ -6807,79 +7985,14 @@ var SketchSVGRenderer = class extends SVGRenderer {
    * Render table with sketch filter and Comic Sans
    */
   renderTable(node, pos) {
-    const title = String(node.props.title || "");
-    const columnsStr = String(node.props.columns || "Col1,Col2,Col3");
-    const columns = columnsStr.split(",").map((c) => c.trim());
-    const rowCount = Number(node.props.rows || node.props.rowsMock || 5);
-    const mockStr = String(node.props.mock || "");
-    const random = this.parseBooleanProp(node.props.random, false);
-    const mockTypes = mockStr ? mockStr.split(",").map((m) => m.trim()).filter(Boolean) : [];
-    while (mockTypes.length < columns.length) {
-      const inferred = MockDataGenerator.inferMockTypeFromColumn(columns[mockTypes.length] || "item");
-      mockTypes.push(inferred);
-    }
-    const headerHeight = 44;
-    const rowHeight = 36;
-    const colWidth = pos.width / columns.length;
-    const mockRows = [];
-    for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
-      const row = {};
-      columns.forEach((col, colIdx) => {
-        const mockType = mockTypes[colIdx] || MockDataGenerator.inferMockTypeFromColumn(col) || "item";
-        row[col] = MockDataGenerator.getMockValue(mockType, rowIdx, random);
-      });
-      mockRows.push(row);
-    }
-    let svg = `<g${this.getDataNodeId(node)}>
-    <rect x="${pos.x}" y="${pos.y}"
-          width="${pos.width}" height="${pos.height}"
-          rx="8"
-          fill="${this.renderTheme.cardBg}"
-          stroke="#2D3748"
-          stroke-width="0.5"
-          filter="url(#sketch-rough)"/>`;
-    if (title) {
-      svg += `
-    <text x="${pos.x + 16}" y="${pos.y + 24}"
-          font-family="${this.fontFamily}"
-          font-size="13"
-          font-weight="600"
-          fill="${this.renderTheme.text}">${this.escapeXml(title)}</text>`;
-    }
-    const headerY = pos.y + (title ? 32 : 0);
-    svg += `
-    <line x1="${pos.x}" y1="${headerY + headerHeight}" x2="${pos.x + pos.width}" y2="${headerY + headerHeight}"
-          stroke="#2D3748" stroke-width="0.5" filter="url(#sketch-rough)"/>`;
-    columns.forEach((col, i) => {
-      svg += `
-    <text x="${pos.x + i * colWidth + 12}" y="${headerY + 26}"
-          font-family="${this.fontFamily}"
-          font-size="11"
-          font-weight="600"
-          fill="${this.renderTheme.textMuted}">${this.escapeXml(col)}</text>`;
-    });
-    mockRows.forEach((row, rowIdx) => {
-      const rowY = headerY + headerHeight + rowIdx * rowHeight;
-      svg += `
-    <line x1="${pos.x}" y1="${rowY + rowHeight}" x2="${pos.x + pos.width}" y2="${rowY + rowHeight}"
-          stroke="#2D3748" stroke-width="0.5" filter="url(#sketch-rough)"/>`;
-      columns.forEach((col, colIdx) => {
-        const cellValue = row[col] || "";
-        svg += `
-    <text x="${pos.x + colIdx * colWidth + 12}" y="${rowY + 22}"
-          font-family="${this.fontFamily}"
-          font-size="12"
-          fill="${this.renderTheme.text}">${this.escapeXml(cellValue)}</text>`;
-      });
-    });
-    svg += "\n  </g>";
-    return svg;
+    const standard = super.renderTable(node, pos);
+    return standard.replace("<g", '<g filter="url(#sketch-rough)"');
   }
   /**
    * Render text with Comic Sans
    */
   renderText(node, pos) {
-    const text = String(node.props.content || "Text content");
+    const text = String(node.props.text || "Text content");
     const fontSize = this.tokens.text.fontSize;
     const lineHeightPx = Math.ceil(fontSize * this.tokens.text.lineHeight);
     const lines = this.wrapTextToLines(text, pos.width, fontSize);
@@ -6931,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
@@ -7354,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"
@@ -7446,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 : "#2D3748";
+      const bgColor = isActive ? this.hexToRgba(activeColor, 0.15) : "transparent";
+      const textColor = isActive ? activeColor : this.resolveTextColor();
       const fontWeight = isActive ? "500" : "400";
       if (isActive) {
         svg += `
@@ -7466,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}"
@@ -7480,22 +8650,23 @@ var SketchSVGRenderer = class extends SVGRenderer {
    * Render icon (same as base, icons don't need filter)
    */
   renderIcon(node, pos) {
-    const iconType = String(node.props.type || "help-circle");
+    const iconType = String(node.props.icon || "help-circle");
     const size = String(node.props.size || "md");
+    const variant = String(node.props.variant || "default");
     const iconSvg = getIcon(iconType);
     if (!iconSvg) {
       return `<g${this.getDataNodeId(node)}>
     <circle cx="${pos.x + pos.width / 2}" cy="${pos.y + pos.height / 2}"
             r="${Math.min(pos.width, pos.height) / 2 - 2}"
-            fill="none" stroke="#2D3748" stroke-width="0.5"
+            fill="none" stroke="${this.resolveMutedColor()}" stroke-width="0.5"
             filter="url(#sketch-rough)"/>
     <text x="${pos.x + pos.width / 2}" y="${pos.y + pos.height / 2 + 4}"
           font-family="${this.fontFamily}"
-          font-size="12" fill="#2D3748" text-anchor="middle">?</text>
+          font-size="12" fill="${this.resolveMutedColor()}" text-anchor="middle">?</text>
   </g>`;
     }
     const iconSize = this.getIconSize(size);
-    const iconColor = "#2D3748";
+    const iconColor = variant === "default" ? this.resolveTextColor() : this.resolveVariantColor(variant, this.resolveTextColor());
     const offsetX = pos.x + (pos.width - iconSize) / 2;
     const offsetY = pos.y + (pos.height - iconSize) / 2;
     return `<g${this.getDataNodeId(node)} transform="translate(${offsetX}, ${offsetY})">