@wire-dsl/engine 0.0.2

package/dist/index.cjs

@@ -0,0 +1,3042 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  IRGenerator: () => IRGenerator,
+  LayoutEngine: () => LayoutEngine,
+  SVGRenderer: () => SVGRenderer,
+  buildSVG: () => buildSVG,
+  calculateLayout: () => calculateLayout,
+  createSVGElement: () => createSVGElement,
+  generateIR: () => generateIR,
+  parseWireDSL: () => parseWireDSL,
+  renderToSVG: () => renderToSVG,
+  resolveGridPosition: () => resolveGridPosition,
+  version: () => version
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/parser/index.ts
+var import_chevrotain = require("chevrotain");
+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 ComponentKeyword = (0, import_chevrotain.createToken)({
+  name: "ComponentKeyword",
+  pattern: /Component\b/
+});
+var Define = (0, import_chevrotain.createToken)({ name: "Define", pattern: /define/ });
+var Theme = (0, import_chevrotain.createToken)({ name: "Theme", pattern: /theme/ });
+var Mocks = (0, import_chevrotain.createToken)({ name: "Mocks", pattern: /mocks/ });
+var Colors = (0, import_chevrotain.createToken)({ name: "Colors", pattern: /colors/ });
+var Cell = (0, import_chevrotain.createToken)({ name: "Cell", pattern: /cell/ });
+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: /\(/ });
+var RParen = (0, import_chevrotain.createToken)({ name: "RParen", pattern: /\)/ });
+var Colon = (0, import_chevrotain.createToken)({ name: "Colon", pattern: /:/ });
+var Comma = (0, import_chevrotain.createToken)({ name: "Comma", pattern: /,/ });
+var StringLiteral = (0, import_chevrotain.createToken)({
+  name: "StringLiteral",
+  pattern: /"(?:[^"\\]|\\.)*"/
+});
+var NumberLiteral = (0, import_chevrotain.createToken)({
+  name: "NumberLiteral",
+  pattern: /\d+(\.\d+)?/
+});
+var HexColor = (0, import_chevrotain.createToken)({
+  name: "HexColor",
+  pattern: /#[0-9A-Fa-f]{6}/
+});
+var Identifier = (0, import_chevrotain.createToken)({
+  name: "Identifier",
+  pattern: /[a-zA-Z_][a-zA-Z0-9_]*/
+});
+var WhiteSpace = (0, import_chevrotain.createToken)({
+  name: "WhiteSpace",
+  pattern: /\s+/,
+  group: import_chevrotain.Lexer.SKIPPED
+});
+var LineComment = (0, import_chevrotain.createToken)({
+  name: "LineComment",
+  pattern: /\/\/[^\n]*/,
+  group: import_chevrotain.Lexer.SKIPPED
+});
+var BlockComment = (0, import_chevrotain.createToken)({
+  name: "BlockComment",
+  pattern: /\/\*[\s\S]*?\*\//,
+  group: import_chevrotain.Lexer.SKIPPED
+});
+var allTokens = [
+  WhiteSpace,
+  BlockComment,
+  // Must come before LineComment to avoid conflicts
+  LineComment,
+  // Keywords (must come before Identifier)
+  Project,
+  Screen,
+  Layout,
+  ComponentKeyword,
+  Component,
+  Define,
+  Theme,
+  Mocks,
+  Colors,
+  Cell,
+  // Punctuation
+  LCurly,
+  RCurly,
+  LParen,
+  RParen,
+  Colon,
+  Comma,
+  // Literals
+  StringLiteral,
+  NumberLiteral,
+  HexColor,
+  Identifier
+];
+var WireDSLLexer = new import_chevrotain.Lexer(allTokens);
+var WireDSLParser = class extends import_chevrotain.CstParser {
+  constructor() {
+    super(allTokens);
+    // Root rule: project definition
+    this.project = this.RULE("project", () => {
+      this.CONSUME(Project);
+      this.CONSUME(StringLiteral, { LABEL: "projectName" });
+      this.CONSUME(LCurly);
+      this.MANY(() => {
+        this.OR([
+          { ALT: () => this.SUBRULE(this.definedComponent) },
+          { ALT: () => this.SUBRULE(this.themeDecl) },
+          { ALT: () => this.SUBRULE(this.mocksDecl) },
+          { ALT: () => this.SUBRULE(this.colorsDecl) },
+          { ALT: () => this.SUBRULE(this.screen) }
+        ]);
+      });
+      this.CONSUME(RCurly);
+    });
+    // theme { density: "normal" }
+    this.themeDecl = this.RULE("themeDecl", () => {
+      this.CONSUME(Theme);
+      this.CONSUME(LCurly);
+      this.MANY(() => {
+        this.SUBRULE(this.themeProperty);
+      });
+      this.CONSUME(RCurly);
+    });
+    // density: "normal"
+    this.themeProperty = this.RULE("themeProperty", () => {
+      this.CONSUME(Identifier, { LABEL: "themeKey" });
+      this.CONSUME(Colon);
+      this.CONSUME(StringLiteral, { LABEL: "themeValue" });
+    });
+    // mocks { status: "A,B,C" ... }
+    this.mocksDecl = this.RULE("mocksDecl", () => {
+      this.CONSUME(Mocks);
+      this.CONSUME(LCurly);
+      this.MANY(() => {
+        this.SUBRULE(this.mockEntry);
+      });
+      this.CONSUME(RCurly);
+    });
+    // status: "A,B,C"
+    this.mockEntry = this.RULE("mockEntry", () => {
+      this.CONSUME(Identifier, { LABEL: "mockKey" });
+      this.CONSUME(Colon);
+      this.CONSUME(StringLiteral, { LABEL: "mockValue" });
+    });
+    // colors { primary: #3B82F6, ... }
+    this.colorsDecl = this.RULE("colorsDecl", () => {
+      this.CONSUME(Colors);
+      this.CONSUME(LCurly);
+      this.MANY(() => {
+        this.SUBRULE(this.colorEntry);
+      });
+      this.CONSUME(RCurly);
+    });
+    // primary: #3B82F6 or primary: lightBlue
+    this.colorEntry = this.RULE("colorEntry", () => {
+      this.CONSUME(Identifier, { LABEL: "colorKey" });
+      this.CONSUME(Colon);
+      this.OR([
+        { ALT: () => this.CONSUME(HexColor, { LABEL: "colorValue" }) },
+        { ALT: () => this.CONSUME2(Identifier, { LABEL: "colorValue" }) }
+      ]);
+    });
+    // define Component "ButtonGroup" { layout stack { ... } }
+    this.definedComponent = this.RULE("definedComponent", () => {
+      this.CONSUME(Define);
+      this.CONSUME(ComponentKeyword, { LABEL: "componentKeyword" });
+      this.CONSUME(StringLiteral, { LABEL: "componentName" });
+      this.CONSUME(LCurly);
+      this.OR([
+        { ALT: () => this.SUBRULE(this.layout) },
+        { ALT: () => this.SUBRULE(this.component) }
+      ]);
+      this.CONSUME(RCurly);
+    });
+    // screen Main(background: white) { ... }
+    this.screen = this.RULE("screen", () => {
+      this.CONSUME(Screen);
+      this.CONSUME(Identifier, { LABEL: "screenName" });
+      this.OPTION(() => {
+        this.SUBRULE(this.paramList);
+      });
+      this.CONSUME(LCurly);
+      this.SUBRULE(this.layout);
+      this.CONSUME(RCurly);
+    });
+    // layout stack(...) { ... }
+    this.layout = this.RULE("layout", () => {
+      this.CONSUME(Layout);
+      this.CONSUME(Identifier, { LABEL: "layoutType" });
+      this.OPTION(() => {
+        this.SUBRULE(this.paramList);
+      });
+      this.CONSUME(LCurly);
+      this.MANY(() => {
+        this.OR([
+          { ALT: () => this.SUBRULE(this.component) },
+          { ALT: () => this.SUBRULE2(this.layout) },
+          { ALT: () => this.SUBRULE(this.cell) }
+        ]);
+      });
+      this.CONSUME(RCurly);
+    });
+    // cell span: 4 { ... }
+    this.cell = this.RULE("cell", () => {
+      this.CONSUME(Cell);
+      this.MANY(() => {
+        this.SUBRULE(this.property);
+      });
+      this.CONSUME(LCurly);
+      this.MANY2(() => {
+        this.OR([
+          { ALT: () => this.SUBRULE(this.component) },
+          { ALT: () => this.SUBRULE(this.layout) }
+        ]);
+      });
+      this.CONSUME(RCurly);
+    });
+    // component Heading text: "Hello"
+    this.component = this.RULE("component", () => {
+      this.CONSUME(Component);
+      this.CONSUME(Identifier, { LABEL: "componentType" });
+      this.MANY(() => {
+        this.SUBRULE(this.property);
+      });
+    });
+    // property: key: value
+    this.property = this.RULE("property", () => {
+      this.CONSUME(Identifier, { LABEL: "propKey" });
+      this.CONSUME(Colon);
+      this.OR([
+        { ALT: () => this.CONSUME(StringLiteral, { LABEL: "propValue" }) },
+        { ALT: () => this.CONSUME(NumberLiteral, { LABEL: "propValue" }) },
+        { ALT: () => this.CONSUME2(Identifier, { LABEL: "propValue" }) }
+      ]);
+    });
+    // (param1: value1, param2: value2)
+    this.paramList = this.RULE("paramList", () => {
+      this.CONSUME(LParen);
+      this.MANY_SEP({
+        SEP: Comma,
+        DEF: () => {
+          this.SUBRULE(this.property);
+        }
+      });
+      this.CONSUME(RParen);
+    });
+    this.performSelfAnalysis();
+  }
+};
+var parserInstance = new WireDSLParser();
+var BaseCstVisitor = parserInstance.getBaseCstVisitorConstructor();
+var WireDSLVisitor = class extends BaseCstVisitor {
+  constructor() {
+    super();
+    this.validateVisitor();
+  }
+  project(ctx) {
+    const projectName = ctx.projectName[0].image.slice(1, -1);
+    const theme = {};
+    const mocks = {};
+    const colors = {};
+    const definedComponents = [];
+    const screens = [];
+    if (ctx.themeDecl && ctx.themeDecl.length > 0) {
+      const themeBlock = this.visit(ctx.themeDecl[0]);
+      Object.assign(theme, themeBlock);
+    }
+    if (ctx.mocksDecl && ctx.mocksDecl.length > 0) {
+      const mocksBlock = this.visit(ctx.mocksDecl[0]);
+      Object.assign(mocks, mocksBlock);
+    }
+    if (ctx.colorsDecl && ctx.colorsDecl.length > 0) {
+      const colorsBlock = this.visit(ctx.colorsDecl[0]);
+      Object.assign(colors, colorsBlock);
+    }
+    if (ctx.definedComponent) {
+      ctx.definedComponent.forEach((comp) => {
+        definedComponents.push(this.visit(comp));
+      });
+    }
+    if (ctx.screen) {
+      ctx.screen.forEach((screen) => {
+        screens.push(this.visit(screen));
+      });
+    }
+    return {
+      type: "project",
+      name: projectName,
+      theme,
+      mocks,
+      colors,
+      definedComponents,
+      screens
+    };
+  }
+  themeDecl(ctx) {
+    const theme = {};
+    if (ctx.themeProperty) {
+      ctx.themeProperty.forEach((prop) => {
+        const { key, value } = this.visit(prop);
+        theme[key] = value;
+      });
+    }
+    return theme;
+  }
+  themeProperty(ctx) {
+    const key = ctx.themeKey[0].image;
+    const value = ctx.themeValue[0].image.slice(1, -1);
+    return { key, value };
+  }
+  mocksDecl(ctx) {
+    const mocks = {};
+    if (ctx.mockEntry) {
+      ctx.mockEntry.forEach((entry) => {
+        const { key, value } = this.visit(entry);
+        mocks[key] = value;
+      });
+    }
+    return mocks;
+  }
+  mockEntry(ctx) {
+    const key = ctx.mockKey[0].image;
+    const value = ctx.mockValue[0].image.slice(1, -1);
+    return { key, value };
+  }
+  colorsDecl(ctx) {
+    const colors = {};
+    if (ctx.colorEntry) {
+      ctx.colorEntry.forEach((entry) => {
+        const { key, value } = this.visit(entry);
+        colors[key] = value;
+      });
+    }
+    return colors;
+  }
+  colorEntry(ctx) {
+    const key = ctx.colorKey[0].image;
+    const value = ctx.colorValue[0].image;
+    return { key, value };
+  }
+  definedComponent(ctx) {
+    const name = ctx.componentName[0].image.slice(1, -1);
+    let body;
+    if (ctx.layout && ctx.layout.length > 0) {
+      body = this.visit(ctx.layout[0]);
+    } else if (ctx.component && ctx.component.length > 0) {
+      body = this.visit(ctx.component[0]);
+    } else {
+      throw new Error(`Defined component "${name}" must contain either a layout or component`);
+    }
+    return {
+      type: "definedComponent",
+      name,
+      body
+    };
+  }
+  screen(ctx) {
+    const params = ctx.paramList ? this.visit(ctx.paramList[0]) : {};
+    return {
+      type: "screen",
+      name: ctx.screenName[0].image,
+      params,
+      layout: this.visit(ctx.layout[0])
+    };
+  }
+  layout(ctx) {
+    const layoutType = ctx.layoutType[0].image;
+    const params = {};
+    const children = [];
+    if (ctx.paramList) {
+      const paramResult = this.visit(ctx.paramList);
+      Object.assign(params, paramResult);
+    }
+    const childNodes = [];
+    if (ctx.component) {
+      ctx.component.forEach((comp) => {
+        const startToken = comp.children?.Component?.[0] || comp.children?.componentType?.[0];
+        childNodes.push({ type: "component", node: comp, index: startToken.startOffset });
+      });
+    }
+    if (ctx.layout) {
+      ctx.layout.forEach((layout) => {
+        const startToken = layout.children?.Layout?.[0] || layout.children?.layoutType?.[0];
+        childNodes.push({ type: "layout", node: layout, index: startToken.startOffset });
+      });
+    }
+    if (ctx.cell) {
+      ctx.cell.forEach((cell) => {
+        const startToken = cell.children?.Cell?.[0];
+        childNodes.push({ type: "cell", node: cell, index: startToken.startOffset });
+      });
+    }
+    childNodes.sort((a, b) => a.index - b.index);
+    childNodes.forEach((item) => {
+      if (item.type === "component") {
+        children.push(this.visit(item.node));
+      } else if (item.type === "layout") {
+        children.push(this.visit(item.node));
+      } else if (item.type === "cell") {
+        children.push(this.visit(item.node));
+      }
+    });
+    return {
+      type: "layout",
+      layoutType,
+      params,
+      children
+    };
+  }
+  cell(ctx) {
+    const props = {};
+    const children = [];
+    if (ctx.property) {
+      ctx.property.forEach((prop) => {
+        const result = this.visit(prop);
+        props[result.key] = result.value;
+      });
+    }
+    const childNodes = [];
+    if (ctx.component) {
+      ctx.component.forEach((comp) => {
+        const startToken = comp.children?.Component?.[0] || comp.children?.componentType?.[0];
+        childNodes.push({ type: "component", node: comp, index: startToken.startOffset });
+      });
+    }
+    if (ctx.layout) {
+      ctx.layout.forEach((layout) => {
+        const startToken = layout.children?.Layout?.[0] || layout.children?.layoutType?.[0];
+        childNodes.push({ type: "layout", node: layout, index: startToken.startOffset });
+      });
+    }
+    childNodes.sort((a, b) => a.index - b.index);
+    childNodes.forEach((item) => {
+      if (item.type === "component") {
+        children.push(this.visit(item.node));
+      } else if (item.type === "layout") {
+        children.push(this.visit(item.node));
+      }
+    });
+    return {
+      type: "cell",
+      props,
+      children
+    };
+  }
+  component(ctx) {
+    const componentType = ctx.componentType[0].image;
+    const props = {};
+    if (ctx.property) {
+      ctx.property.forEach((prop) => {
+        const result = this.visit(prop);
+        props[result.key] = result.value;
+      });
+    }
+    return {
+      type: "component",
+      componentType,
+      props
+    };
+  }
+  property(ctx) {
+    const key = ctx.propKey[0].image;
+    const rawValue = ctx.propValue[0].image;
+    let value = rawValue;
+    if (typeof rawValue === "string" && rawValue.startsWith('"')) {
+      value = rawValue.slice(1, -1);
+    } else if (!isNaN(Number(rawValue))) {
+      value = Number(rawValue);
+    }
+    return { key, value };
+  }
+  paramList(ctx) {
+    const params = {};
+    if (ctx.property) {
+      ctx.property.forEach((prop) => {
+        const result = this.visit(prop);
+        params[result.key] = result.value;
+      });
+    }
+    return params;
+  }
+};
+var visitor = new WireDSLVisitor();
+function parseWireDSL(input) {
+  const lexResult = WireDSLLexer.tokenize(input);
+  if (lexResult.errors.length > 0) {
+    throw new Error(`Lexer errors:
+${lexResult.errors.map((e) => e.message).join("\n")}`);
+  }
+  parserInstance.input = lexResult.tokens;
+  const cst = parserInstance.project();
+  if (parserInstance.errors.length > 0) {
+    throw new Error(`Parser errors:
+${parserInstance.errors.map((e) => e.message).join("\n")}`);
+  }
+  const ast = visitor.visit(cst);
+  validateComponentDefinitionCycles(ast);
+  return ast;
+}
+function validateComponentDefinitionCycles(ast) {
+  if (!ast.definedComponents || ast.definedComponents.length === 0) {
+    return;
+  }
+  const components = /* @__PURE__ */ new Map();
+  ast.definedComponents.forEach((comp) => {
+    components.set(comp.name, comp);
+  });
+  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));
+                }
+              });
+            }
+          }
+        });
+      }
+    }
+    return deps;
+  }
+  function hasCycle(componentName, path = []) {
+    if (recursionStack.has(componentName)) {
+      const cycleStart = path.indexOf(componentName);
+      const cycle = path.slice(cycleStart).concat(componentName);
+      return cycle;
+    }
+    if (visited.has(componentName)) {
+      return null;
+    }
+    const component = components.get(componentName);
+    if (!component) {
+      return null;
+    }
+    recursionStack.add(componentName);
+    const currentPath = [...path, componentName];
+    const dependencies = getComponentDependencies(component.body);
+    for (const dep of dependencies) {
+      const definedDep = components.has(dep);
+      if (definedDep) {
+        const cycle = hasCycle(dep, currentPath);
+        if (cycle) {
+          return cycle;
+        }
+      }
+    }
+    recursionStack.delete(componentName);
+    visited.add(componentName);
+    return null;
+  }
+  for (const [componentName] of components) {
+    visited.clear();
+    recursionStack.clear();
+    const cycle = hasCycle(componentName);
+    if (cycle) {
+      throw new Error(
+        `Circular component definition detected: ${cycle.join(" \u2192 ")}
+Components cannot reference each other in a cycle.`
+      );
+    }
+  }
+}
+
+// src/ir/index.ts
+var import_zod = require("zod");
+var IRThemeSchema = import_zod.z.object({
+  density: import_zod.z.enum(["compact", "normal", "comfortable"]),
+  spacing: import_zod.z.enum(["xs", "sm", "md", "lg", "xl"]),
+  radius: import_zod.z.enum(["none", "sm", "md", "lg", "full"]),
+  stroke: import_zod.z.enum(["thin", "normal", "thick"]),
+  font: import_zod.z.enum(["sm", "base", "lg"]),
+  background: import_zod.z.string().optional()
+});
+var IRStyleSchema = import_zod.z.object({
+  padding: import_zod.z.string().optional(),
+  gap: import_zod.z.string().optional(),
+  align: import_zod.z.enum(["left", "center", "right", "justify"]).optional(),
+  justify: import_zod.z.enum(["start", "center", "end"]).optional(),
+  background: import_zod.z.string().optional()
+});
+var IRMetaSchema = import_zod.z.object({
+  source: import_zod.z.string().optional()
+});
+var IRContainerNodeSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  kind: import_zod.z.literal("container"),
+  containerType: import_zod.z.enum(["stack", "grid", "split", "panel", "card"]),
+  params: import_zod.z.record(import_zod.z.string(), import_zod.z.union([import_zod.z.string(), import_zod.z.number()])),
+  children: import_zod.z.array(import_zod.z.object({ ref: import_zod.z.string() })),
+  style: IRStyleSchema,
+  meta: IRMetaSchema
+});
+var IRComponentNodeSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  kind: import_zod.z.literal("component"),
+  componentType: import_zod.z.string(),
+  props: import_zod.z.record(import_zod.z.string(), import_zod.z.union([import_zod.z.string(), import_zod.z.number()])),
+  style: IRStyleSchema,
+  meta: IRMetaSchema
+});
+var IRNodeSchema = import_zod.z.union([IRContainerNodeSchema, IRComponentNodeSchema]);
+var IRScreenSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  name: import_zod.z.string(),
+  viewport: import_zod.z.object({ width: import_zod.z.number(), height: import_zod.z.number() }),
+  background: import_zod.z.string().optional(),
+  root: import_zod.z.object({ ref: import_zod.z.string() })
+});
+var IRProjectSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  name: import_zod.z.string(),
+  theme: IRThemeSchema,
+  mocks: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()),
+  colors: import_zod.z.record(import_zod.z.string(), import_zod.z.string()),
+  screens: import_zod.z.array(IRScreenSchema),
+  nodes: import_zod.z.record(import_zod.z.string(), IRNodeSchema)
+});
+var IRContractSchema = import_zod.z.object({
+  irVersion: import_zod.z.string(),
+  project: IRProjectSchema
+});
+var IDGenerator = class {
+  constructor() {
+    this.counters = /* @__PURE__ */ new Map();
+  }
+  generate(prefix) {
+    const current = this.counters.get(prefix) || 0;
+    const next = current + 1;
+    this.counters.set(prefix, next);
+    return `${prefix}_${next}`;
+  }
+  reset() {
+    this.counters.clear();
+  }
+};
+var IRGenerator = class {
+  constructor() {
+    this.idGen = new IDGenerator();
+    this.nodes = {};
+    this.definedComponents = /* @__PURE__ */ new Map();
+    this.definedComponentIndices = /* @__PURE__ */ new Map();
+    this.undefinedComponentsUsed = /* @__PURE__ */ new Set();
+    this.warnings = [];
+    this.theme = {
+      density: "normal",
+      spacing: "md",
+      radius: "md",
+      stroke: "normal",
+      font: "base"
+    };
+  }
+  generate(ast) {
+    this.idGen.reset();
+    this.nodes = {};
+    this.definedComponents.clear();
+    this.definedComponentIndices.clear();
+    this.undefinedComponentsUsed.clear();
+    this.warnings = [];
+    if (ast.definedComponents && ast.definedComponents.length > 0) {
+      ast.definedComponents.forEach((def, index) => {
+        this.definedComponents.set(def.name, def);
+        this.definedComponentIndices.set(def.name, index);
+      });
+    }
+    this.applyTheme(ast.theme);
+    const screens = ast.screens.map(
+      (screen, screenIndex) => this.convertScreen(screen, screenIndex)
+    );
+    if (this.undefinedComponentsUsed.size > 0) {
+      const undefinedList = Array.from(this.undefinedComponentsUsed).sort();
+      throw new Error(
+        `Components used but not defined: ${undefinedList.join(", ")}
+Define these components with: define Component "Name" { ... }`
+      );
+    }
+    const project = {
+      id: this.sanitizeId(ast.name),
+      name: ast.name,
+      theme: this.theme,
+      mocks: ast.mocks || {},
+      colors: ast.colors || {},
+      screens,
+      nodes: this.nodes
+    };
+    const ir = {
+      irVersion: "1.0",
+      project
+    };
+    return IRContractSchema.parse(ir);
+  }
+  applyTheme(astTheme) {
+    if (astTheme.density) {
+      this.theme.density = astTheme.density;
+    }
+    if (astTheme.spacing) {
+      this.theme.spacing = astTheme.spacing;
+    }
+    if (astTheme.radius) {
+      this.theme.radius = astTheme.radius;
+    }
+    if (astTheme.stroke) {
+      this.theme.stroke = astTheme.stroke;
+    }
+    if (astTheme.font) {
+      this.theme.font = astTheme.font;
+    }
+    if (astTheme.background) {
+      this.theme.background = astTheme.background;
+    }
+  }
+  convertScreen(screen, screenIndex) {
+    const rootNodeId = this.convertLayout(screen.layout);
+    const irScreen = {
+      id: this.sanitizeId(screen.name),
+      name: screen.name,
+      viewport: { width: 1280, height: 720 },
+      root: { ref: rootNodeId }
+    };
+    if (screen.params.background) {
+      irScreen.background = String(screen.params.background);
+    } else if (this.theme.background) {
+      irScreen.background = this.theme.background;
+    }
+    return irScreen;
+  }
+  /**
+   * Validates that component definitions appear before their first usage
+   * Generates warnings (not errors) to allow flexible code organization
+   */
+  validateComponentOrder(ast) {
+    if (!ast.definedComponents || ast.definedComponents.length === 0) {
+      return;
+    }
+    const definedComponentNames = new Set(ast.definedComponents.map((d) => d.name));
+    ast.screens.forEach((screen) => {
+      const usedComponents = this.findComponentsInLayout(screen.layout);
+      usedComponents.forEach(({ componentType }) => {
+        if (definedComponentNames.has(componentType)) {
+          const defIdx = this.definedComponentIndices.get(componentType) ?? -1;
+          const screenIdx = ast.screens.indexOf(screen);
+          this.warnings.push({
+            type: "component-order",
+            message: `Component "${componentType}" is used in screen "${screen.name}". Consider defining "${componentType}" before this screen for better code clarity.`
+          });
+        }
+      });
+    });
+    if (this.warnings.length > 0) {
+      this.warnings.forEach((w) => {
+        console.warn(`\u26A0\uFE0F  [${w.type.toUpperCase()}] ${w.message}`);
+      });
+    }
+  }
+  /**
+   * Recursively finds all component usages in a layout
+   */
+  findComponentsInLayout(layout, found = []) {
+    if (layout.children && layout.children.length > 0) {
+      layout.children.forEach((child) => {
+        if (child.type === "component") {
+          found.push({
+            componentType: child.componentType,
+            location: "layout"
+          });
+        } else if (child.type === "layout") {
+          this.findComponentsInLayout(child, found);
+        } else if (child.type === "cell") {
+          if (child.children) {
+            child.children.forEach((cellChild) => {
+              if (cellChild.type === "component") {
+                found.push({
+                  componentType: cellChild.componentType,
+                  location: "cell"
+                });
+              } else if (cellChild.type === "layout") {
+                this.findComponentsInLayout(cellChild, found);
+              }
+            });
+          }
+        }
+      });
+    }
+    return found;
+  }
+  /**
+   * Get all warnings generated during IR generation
+   */
+  getWarnings() {
+    return this.warnings;
+  }
+  convertLayout(layout) {
+    const nodeId = this.idGen.generate("node");
+    const childRefs = [];
+    for (const child of layout.children) {
+      if (child.type === "layout") {
+        const childId = this.convertLayout(child);
+        childRefs.push({ ref: childId });
+      } else if (child.type === "component") {
+        const childId = this.convertComponent(child);
+        childRefs.push({ ref: childId });
+      } else if (child.type === "cell") {
+        const childId = this.convertCell(child);
+        childRefs.push({ ref: childId });
+      }
+    }
+    const style = {};
+    if (layout.params.padding) {
+      style.padding = String(layout.params.padding);
+    } else {
+      style.padding = "none";
+    }
+    if (layout.params.gap) {
+      style.gap = String(layout.params.gap);
+    }
+    if (layout.params.align) {
+      style.align = layout.params.align;
+    }
+    if (layout.params.background) {
+      style.background = String(layout.params.background);
+    }
+    const containerNode = {
+      id: nodeId,
+      kind: "container",
+      containerType: layout.layoutType,
+      params: this.cleanParams(layout.params),
+      children: childRefs,
+      style,
+      meta: {}
+    };
+    this.nodes[nodeId] = containerNode;
+    return nodeId;
+  }
+  convertCell(cell) {
+    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 });
+      } else if (child.type === "component") {
+        const childId = this.convertComponent(child);
+        childRefs.push({ ref: childId });
+      }
+    }
+    const containerNode = {
+      id: nodeId,
+      kind: "container",
+      containerType: "stack",
+      // Cells contain content in a stack by default
+      params: cell.props,
+      children: childRefs,
+      style: { padding: "none" },
+      // Cells have no padding by default - grid gap handles spacing
+      meta: { source: "cell" }
+    };
+    this.nodes[nodeId] = containerNode;
+    return nodeId;
+  }
+  convertComponent(component) {
+    const definition = this.definedComponents.get(component.componentType);
+    if (definition) {
+      return this.expandDefinedComponent(definition);
+    }
+    const builtInComponents = /* @__PURE__ */ new Set([
+      "Button",
+      "Input",
+      "Heading",
+      "Text",
+      "Label",
+      "Image",
+      "Card",
+      "StatCard",
+      "Topbar",
+      "Table",
+      "Chart",
+      "ChartPlaceholder",
+      "Textarea",
+      "Select",
+      "Checkbox",
+      "Toggle",
+      "Divider",
+      "Breadcrumbs",
+      "SidebarMenu",
+      "Radio",
+      "Icon",
+      "IconButton",
+      "Alert",
+      "Badge",
+      "Modal",
+      "List",
+      "Sidebar",
+      "Tabs",
+      "Code",
+      "Paragraph"
+    ]);
+    if (!builtInComponents.has(component.componentType)) {
+      this.undefinedComponentsUsed.add(component.componentType);
+    }
+    const nodeId = this.idGen.generate("node");
+    const componentNode = {
+      id: nodeId,
+      kind: "component",
+      componentType: component.componentType,
+      props: component.props,
+      style: {},
+      meta: {}
+    };
+    this.nodes[nodeId] = componentNode;
+    return nodeId;
+  }
+  expandDefinedComponent(definition) {
+    if (definition.body.type === "layout") {
+      return this.convertLayout(definition.body);
+    } else if (definition.body.type === "component") {
+      return this.convertComponent(definition.body);
+    } else {
+      throw new Error(`Invalid defined component body type for "${definition.name}"`);
+    }
+  }
+  cleanParams(params) {
+    const cleaned = {};
+    for (const [key, value] of Object.entries(params)) {
+      if (!["padding", "gap", "align", "justify"].includes(key)) {
+        cleaned[key] = value;
+      }
+    }
+    return cleaned;
+  }
+  sanitizeId(name) {
+    return name.toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, "");
+  }
+};
+function generateIR(ast) {
+  const generator = new IRGenerator();
+  return generator.generate(ast);
+}
+
+// src/layout/index.ts
+var SPACING_VALUES = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32
+};
+var DENSITY_HEIGHTS = {
+  compact: 32,
+  normal: 40,
+  comfortable: 48
+};
+var LayoutEngine = class {
+  // Track parent container types
+  constructor(ir) {
+    this.result = {};
+    this.parentContainerTypes = /* @__PURE__ */ new Map();
+    this.ir = ir;
+    this.nodes = ir.project.nodes;
+    this.theme = ir.project.theme;
+    this.viewport = ir.project.screens[0]?.viewport || { width: 1280, height: 720 };
+  }
+  calculate() {
+    this.result = {};
+    for (const screen of this.ir.project.screens) {
+      const rootId = screen.root.ref;
+      if (rootId) {
+        this.calculateNode(rootId, 0, 0, this.viewport.width, this.viewport.height);
+      }
+    }
+    return this.result;
+  }
+  calculateNode(nodeId, x, y, width, height, parentContainerType) {
+    const node = this.nodes[nodeId];
+    if (!node) return;
+    if (parentContainerType && node.kind === "container") {
+      this.parentContainerTypes.set(nodeId, parentContainerType);
+    }
+    if (node.kind === "container") {
+      this.calculateContainer(node, nodeId, x, y, width, height);
+    } else {
+      this.calculateComponent(node, nodeId, x, y, width, height);
+    }
+  }
+  calculateContainer(node, nodeId, x, y, width, height) {
+    if (node.kind !== "container") return;
+    const padding = this.resolveSpacing(node.style.padding);
+    const innerX = x + padding;
+    const innerY = y + padding;
+    const innerWidth = width - padding * 2;
+    const direction = node.params.direction || "vertical";
+    const isVerticalStack = node.containerType === "stack" && direction === "vertical";
+    const innerHeight = isVerticalStack ? height : height - padding * 2;
+    this.result[nodeId] = { x, y, width, height };
+    switch (node.containerType) {
+      case "stack":
+        this.calculateStack(node, innerX, innerY, innerWidth, innerHeight);
+        break;
+      case "grid":
+        this.calculateGrid(node, innerX, innerY, innerWidth, innerHeight);
+        break;
+      case "split":
+        this.calculateSplit(node, innerX, innerY, innerWidth, innerHeight);
+        break;
+      case "panel":
+        this.calculatePanel(node, innerX, innerY, innerWidth, innerHeight);
+        break;
+      case "card":
+        this.calculateCard(node, innerX, innerY, innerWidth, innerHeight);
+        break;
+    }
+    if (isVerticalStack || node.containerType === "card") {
+      let containerMaxY = y;
+      node.children.forEach((childRef) => {
+        const childPos = this.result[childRef.ref];
+        if (childPos) {
+          containerMaxY = Math.max(containerMaxY, childPos.y + childPos.height);
+        }
+      });
+      const cardPadding = node.containerType === "card" ? this.resolveSpacing(node.style.padding) : padding;
+      const calculatedHeight = containerMaxY - y + cardPadding;
+      this.result[nodeId].height = calculatedHeight;
+    }
+  }
+  calculateStack(node, x, y, width, height) {
+    if (node.kind !== "container") return;
+    const direction = node.params.direction || "vertical";
+    const gap = this.resolveSpacing(node.style.gap);
+    const children = node.children;
+    if (direction === "vertical") {
+      let currentY = y;
+      children.forEach((childRef, index) => {
+        const childNode = this.nodes[childRef.ref];
+        let childHeight = this.getComponentHeight();
+        if (childNode?.kind === "component" && childNode.props.height) {
+          childHeight = Number(childNode.props.height);
+        } else if (childNode?.kind === "container") {
+          childHeight = this.calculateContainerHeight(childNode, width);
+        } else if (childNode?.kind === "component") {
+          childHeight = this.getIntrinsicComponentHeight(childNode, width);
+        }
+        this.calculateNode(childRef.ref, x, currentY, width, childHeight, "stack");
+        currentY += childHeight;
+        if (index < children.length - 1) {
+          currentY += gap;
+        }
+      });
+      let adjustedY = y;
+      children.forEach((childRef, index) => {
+        const childPos = this.result[childRef.ref];
+        if (childPos) {
+          const deltaY = adjustedY - childPos.y;
+          childPos.y = adjustedY;
+          if (deltaY !== 0) {
+            this.adjustNodeYPositions(childRef.ref, deltaY);
+          }
+          adjustedY += childPos.height;
+          if (index < children.length - 1) {
+            adjustedY += gap;
+          }
+        }
+      });
+    } else {
+      const align = node.style.align || "justify";
+      if (align === "justify") {
+        let currentX = x;
+        const childWidth = this.calculateChildWidth(children.length, width, gap);
+        let stackHeight = 0;
+        children.forEach((childRef) => {
+          const childNode = this.nodes[childRef.ref];
+          let childHeight = this.getComponentHeight();
+          if (childNode?.kind === "component" && childNode.props.height) {
+            childHeight = Number(childNode.props.height);
+          } else if (childNode?.kind === "container") {
+            childHeight = this.calculateContainerHeight(childNode, childWidth);
+          } else if (childNode?.kind === "component") {
+            childHeight = this.getIntrinsicComponentHeight(childNode);
+          }
+          stackHeight = Math.max(stackHeight, childHeight);
+        });
+        children.forEach((childRef) => {
+          this.calculateNode(childRef.ref, currentX, y, childWidth, stackHeight, "stack");
+          currentX += childWidth + gap;
+        });
+      } else {
+        const childWidths = [];
+        let stackHeight = 0;
+        children.forEach((childRef) => {
+          const childNode = this.nodes[childRef.ref];
+          let childWidth = this.getIntrinsicComponentWidth(childNode);
+          let childHeight = this.getComponentHeight();
+          if (childNode?.kind === "component" && childNode.props.height) {
+            childHeight = Number(childNode.props.height);
+          } else if (childNode?.kind === "component" && childNode.props.width) {
+            childWidth = Number(childNode.props.width);
+          } else if (childNode?.kind === "container") {
+            childHeight = this.calculateContainerHeight(childNode, childWidth);
+          } else if (childNode?.kind === "component") {
+            childHeight = this.getIntrinsicComponentHeight(childNode);
+          }
+          childWidths.push(childWidth);
+          stackHeight = Math.max(stackHeight, childHeight);
+        });
+        const totalChildWidth = childWidths.reduce((sum, w) => sum + w, 0);
+        const totalGapWidth = gap * Math.max(0, children.length - 1);
+        const totalContentWidth = totalChildWidth + totalGapWidth;
+        let startX = x;
+        if (align === "center") {
+          startX = x + (width - totalContentWidth) / 2;
+        } else if (align === "right") {
+          startX = x + width - totalContentWidth;
+        }
+        let currentX = startX;
+        children.forEach((childRef, index) => {
+          const childWidth = childWidths[index];
+          this.calculateNode(childRef.ref, currentX, y, childWidth, stackHeight, "stack");
+          currentX += childWidth + gap;
+        });
+      }
+    }
+  }
+  calculateContainerHeight(node, availableWidth) {
+    if (node.kind !== "container") return this.getComponentHeight();
+    const gap = this.resolveSpacing(node.style.gap);
+    const padding = this.resolveSpacing(node.style.padding);
+    let totalHeight = padding * 2;
+    if (node.containerType === "grid") {
+      const columns = Number(node.params.columns) || 12;
+      const colWidth = availableWidth / columns;
+      let currentRow = 0;
+      let currentCol = 0;
+      let currentRowMaxHeight = 0;
+      const rowHeights = [0];
+      node.children.forEach((childRef) => {
+        const child = this.nodes[childRef.ref];
+        let span = 1;
+        let childHeight = this.getComponentHeight();
+        if (child?.kind === "container" && child.meta?.source === "cell") {
+          span = Number(child.params.span) || 1;
+        }
+        if (child?.kind === "component") {
+          if (child.props.height) {
+            childHeight = Number(child.props.height);
+          } else {
+            childHeight = this.getIntrinsicComponentHeight(child);
+          }
+        } else if (child?.kind === "container") {
+          childHeight = this.calculateContainerHeight(child, colWidth * span);
+        }
+        if (currentCol + span > columns) {
+          rowHeights[currentRow] = currentRowMaxHeight;
+          currentRow++;
+          currentCol = 0;
+          currentRowMaxHeight = 0;
+        }
+        currentRowMaxHeight = Math.max(currentRowMaxHeight, childHeight);
+        currentCol += span;
+      });
+      rowHeights[currentRow] = currentRowMaxHeight;
+      for (let r = 0; r <= currentRow; r++) {
+        totalHeight += rowHeights[r];
+        if (r < currentRow) {
+          totalHeight += gap;
+        }
+      }
+      return totalHeight;
+    }
+    const direction = node.params.direction || "vertical";
+    if (node.containerType === "stack" && direction === "horizontal") {
+      let maxHeight = 0;
+      node.children.forEach((childRef) => {
+        const child = this.nodes[childRef.ref];
+        let childHeight = this.getComponentHeight();
+        if (child?.kind === "component") {
+          if (child.props.height) {
+            childHeight = Number(child.props.height);
+          } else {
+            childHeight = this.getIntrinsicComponentHeight(child);
+          }
+        } else if (child?.kind === "container") {
+          childHeight = this.calculateContainerHeight(child, availableWidth);
+        }
+        maxHeight = Math.max(maxHeight, childHeight);
+      });
+      totalHeight += maxHeight;
+      return totalHeight;
+    }
+    node.children.forEach((childRef, index) => {
+      const child = this.nodes[childRef.ref];
+      let childHeight = this.getComponentHeight();
+      if (child?.kind === "component") {
+        if (child.props.height) {
+          childHeight = Number(child.props.height);
+        } else {
+          childHeight = this.getIntrinsicComponentHeight(child);
+        }
+      } else if (child?.kind === "container") {
+        childHeight = this.calculateContainerHeight(child, availableWidth);
+      }
+      totalHeight += childHeight;
+      if (index < node.children.length - 1) {
+        totalHeight += gap;
+      }
+    });
+    return totalHeight;
+  }
+  calculateGrid(node, x, y, width, height) {
+    if (node.kind !== "container") return;
+    const columns = Number(node.params.columns) || 12;
+    const gap = this.resolveSpacing(node.style.gap);
+    const colWidth = (width - gap * (columns - 1)) / columns;
+    const cellHeights = {};
+    node.children.forEach((childRef, cellIndex) => {
+      const child = this.nodes[childRef.ref];
+      let cellHeight = this.getComponentHeight();
+      if (child?.kind === "container") {
+        cellHeight = this.calculateContainerHeight(child, colWidth);
+      } else if (child?.kind === "component") {
+        if (child.props.height) {
+          cellHeight = Number(child.props.height);
+        } else {
+          cellHeight = this.getIntrinsicComponentHeight(child);
+        }
+      }
+      cellHeights[cellIndex] = cellHeight;
+    });
+    let currentRow = 0;
+    let currentCol = 0;
+    let currentRowMaxHeight = 0;
+    const rowHeights = [0];
+    const cellPositions = [];
+    node.children.forEach((childRef, cellIndex) => {
+      const child = this.nodes[childRef.ref];
+      let span = 1;
+      if (child?.kind === "container" && child.meta?.source === "cell") {
+        span = Number(child.params.span) || 1;
+      }
+      if (currentCol + span > columns) {
+        rowHeights[currentRow] = currentRowMaxHeight;
+        currentRow++;
+        currentCol = 0;
+        currentRowMaxHeight = 0;
+      }
+      cellPositions.push({ row: currentRow, col: currentCol, span });
+      currentRowMaxHeight = Math.max(currentRowMaxHeight, cellHeights[cellIndex]);
+      currentCol += span;
+    });
+    rowHeights[currentRow] = currentRowMaxHeight;
+    node.children.forEach((childRef, cellIndex) => {
+      const { row, col, span } = cellPositions[cellIndex];
+      const cellHeight = rowHeights[row];
+      let cellY = y;
+      for (let r = 0; r < row; r++) {
+        cellY += rowHeights[r] + gap;
+      }
+      const cellWidth = colWidth * span + gap * (span - 1);
+      const cellX = x + col * (colWidth + gap);
+      this.calculateNode(childRef.ref, cellX, cellY, cellWidth, cellHeight, "grid");
+    });
+  }
+  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;
+    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");
+    }
+  }
+  calculatePanel(node, x, y, width, height) {
+    if (node.kind !== "container" || node.children.length === 0) return;
+    const childRef = node.children[0];
+    this.calculateNode(childRef.ref, x, y, width, height, "panel");
+  }
+  calculateCard(node, x, y, width, height) {
+    if (node.kind !== "container" || node.children.length === 0) return;
+    const cardPadding = this.resolveSpacing(node.style.padding);
+    const gap = this.resolveSpacing(node.style.gap);
+    const innerCardWidth = width - cardPadding * 2;
+    const children = node.children;
+    let currentY = y + cardPadding;
+    children.forEach((childRef, index) => {
+      const childNode = this.nodes[childRef.ref];
+      let childHeight = this.getComponentHeight();
+      if (childNode?.kind === "component" && childNode.props.height) {
+        childHeight = Number(childNode.props.height);
+      } else if (childNode?.kind === "container") {
+        childHeight = this.calculateContainerHeight(childNode, innerCardWidth);
+      } else if (childNode?.kind === "component") {
+        childHeight = this.getIntrinsicComponentHeight(childNode, innerCardWidth);
+      }
+      this.calculateNode(childRef.ref, x + cardPadding, currentY, innerCardWidth, childHeight, "card");
+      currentY += childHeight;
+      if (index < children.length - 1) {
+        currentY += gap;
+      }
+    });
+  }
+  calculateComponent(node, nodeId, x, y, width, height) {
+    if (node.kind !== "component") return;
+    const componentWidth = Number(node.props.width) || width;
+    const componentHeight = Number(node.props.height) || this.getIntrinsicComponentHeight(node, componentWidth);
+    this.result[nodeId] = {
+      x,
+      y,
+      width: componentWidth,
+      height: componentHeight
+    };
+  }
+  resolveSpacing(spacing) {
+    if (!spacing) return SPACING_VALUES[this.theme.spacing];
+    const value = SPACING_VALUES[spacing];
+    return value !== void 0 ? value : SPACING_VALUES.md;
+  }
+  getComponentHeight() {
+    return DENSITY_HEIGHTS[this.theme.density] || DENSITY_HEIGHTS.normal;
+  }
+  getIntrinsicComponentHeight(node, availableWidth) {
+    if (node.kind !== "component") return this.getComponentHeight();
+    if (node.componentType === "Image") {
+      const placeholder = String(node.props.placeholder || "landscape");
+      const aspectRatios = {
+        landscape: 16 / 9,
+        portrait: 2 / 3,
+        square: 1,
+        icon: 1,
+        avatar: 1
+      };
+      const ratio = aspectRatios[placeholder] || 16 / 9;
+      const explicitHeight = Number(node.props.height);
+      if (!isNaN(explicitHeight) && explicitHeight > 0) {
+        return explicitHeight;
+      }
+      if (availableWidth && availableWidth > 0) {
+        return availableWidth / ratio;
+      }
+      return 200;
+    }
+    if (node.componentType === "Table") {
+      const explicitHeight = Number(node.props.height);
+      if (!isNaN(explicitHeight) && explicitHeight > 0) {
+        return explicitHeight;
+      }
+      const rowCount = Number(node.props.rows || 5);
+      const hasTitle = !!node.props.title;
+      const hasPagination = String(node.props.pagination) === "true";
+      const headerHeight = 44;
+      const rowHeight = 36;
+      const titleHeight = hasTitle ? 32 : 0;
+      const paginationHeight = hasPagination ? 64 : 0;
+      return titleHeight + headerHeight + rowCount * rowHeight + paginationHeight;
+    }
+    if (node.componentType === "Textarea") return 100;
+    if (node.componentType === "Modal") return 300;
+    if (node.componentType === "Card") return 120;
+    if (node.componentType === "StatCard") return 120;
+    if (node.componentType === "ChartPlaceholder") return 250;
+    if (node.componentType === "List") return 180;
+    if (node.componentType === "Topbar") return 56;
+    if (node.componentType === "Divider") return 1;
+    return this.getComponentHeight();
+  }
+  getIntrinsicComponentWidth(node) {
+    if (!node || node.kind !== "component") {
+      return 120;
+    }
+    if (node.componentType === "Icon") {
+      const size = String(node.props.size || "md");
+      const sizes = {
+        sm: 16,
+        md: 24,
+        lg: 32,
+        xl: 40
+      };
+      return sizes[size] || 24;
+    }
+    if (node.componentType === "IconButton") {
+      return 40;
+    }
+    if (node.componentType === "Checkbox" || node.componentType === "Radio") {
+      return 24;
+    }
+    if (node.componentType === "Button") {
+      const text = String(node.props.text || "");
+      return Math.max(80, text.length * 8 + 32);
+    }
+    if (node.componentType === "Label" || node.componentType === "Text") {
+      const text = String(node.props.content || node.props.text || "");
+      return Math.max(60, text.length * 8 + 16);
+    }
+    if (node.componentType === "Heading") {
+      const text = String(node.props.text || "");
+      return Math.max(80, text.length * 12 + 16);
+    }
+    if (node.componentType === "Input" || node.componentType === "Select") {
+      return 200;
+    }
+    if (node.componentType === "Textarea") {
+      return 200;
+    }
+    if (node.componentType === "Image") {
+      const placeholder = String(node.props.placeholder || "landscape");
+      const widths = {
+        landscape: 300,
+        portrait: 200,
+        square: 200,
+        icon: 64,
+        avatar: 64
+      };
+      return widths[placeholder] || 300;
+    }
+    if (node.componentType === "Table") {
+      return 400;
+    }
+    if (node.componentType === "StatCard" || node.componentType === "Card") {
+      return 280;
+    }
+    if (node.componentType === "Avatar") {
+      const size = String(node.props.size || "md");
+      const sizes = {
+        sm: 32,
+        md: 40,
+        lg: 56,
+        xl: 72
+      };
+      return sizes[size] || 40;
+    }
+    if (node.componentType === "SidebarMenu") {
+      return 260;
+    }
+    if (node.componentType === "Badge" || node.componentType === "Chip") {
+      const text = String(node.props.text || "");
+      return Math.max(50, text.length * 7 + 16);
+    }
+    return 120;
+  }
+  calculateChildHeight(count, totalHeight, gap) {
+    if (count === 0) return 0;
+    const totalGap = gap * (count - 1);
+    return (totalHeight - totalGap) / count;
+  }
+  calculateChildWidth(count, totalWidth, gap) {
+    if (count === 0) return 0;
+    const totalGap = gap * (count - 1);
+    return (totalWidth - totalGap) / count;
+  }
+  adjustNodeYPositions(nodeId, deltaY) {
+    const node = this.nodes[nodeId];
+    if (!node) return;
+    if (node.kind === "container" && node.children) {
+      node.children.forEach((childRef) => {
+        const childPos = this.result[childRef.ref];
+        if (childPos) {
+          childPos.y += deltaY;
+          this.adjustNodeYPositions(childRef.ref, deltaY);
+        }
+      });
+    }
+  }
+};
+function calculateLayout(ir) {
+  const engine = new LayoutEngine(ir);
+  return engine.calculate();
+}
+function resolveGridPosition(row, col, rowSpan = 1, colSpan = 1, gridWidth = 1200, gridHeight = 800, gridCols = 12, gridRows = 8) {
+  const colWidth = gridWidth / gridCols;
+  const rowHeight = gridHeight / gridRows;
+  return {
+    x: col * colWidth,
+    y: row * rowHeight,
+    width: colSpan * colWidth,
+    height: rowSpan * rowHeight
+  };
+}
+
+// src/renderer/mock-data.ts
+var MOCK_NAMES = ["Juan", "Mar\xEDa", "Carlos", "Sofia", "Alex", "Luna", "Diego", "Emma"];
+var MOCK_LAST_NAMES = [
+  "Garc\xEDa",
+  "L\xF3pez",
+  "Rodr\xEDguez",
+  "Mart\xEDnez",
+  "P\xE9rez",
+  "S\xE1nchez",
+  "Torres",
+  "Flores"
+];
+var MOCK_STATUSES = ["Active", "Pending", "Completed", "On Hold", "Review", "Approved"];
+var MOCK_STAGES = ["Lead", "Qualified", "Proposal", "Negotiation", "Won", "Lost"];
+var MOCK_EMAILS = [
+  "juan@example.com",
+  "maria@example.com",
+  "carlos@example.com",
+  "sofia@example.com",
+  "alex@example.com",
+  "luna@example.com"
+];
+var MockDataGenerator = class {
+  /**
+   * Set custom mocks from project metadata
+   * Accepts string (comma-separated) or string[] values; ignores others.
+   * Format: { "status": "Active,Pending,Completed", "stage": ["Lead","Won","Lost"] }
+   */
+  static setCustomMocks(mocks) {
+    this.customMocks = {};
+    for (const [key, rawValues] of Object.entries(mocks)) {
+      let values = [];
+      if (typeof rawValues === "string") {
+        values = rawValues.split(",").map((v) => v.trim()).filter((v) => v.length > 0);
+      } else if (Array.isArray(rawValues)) {
+        values = rawValues.map((v) => typeof v === "string" ? v.trim() : "").filter((v) => v.length > 0);
+      }
+      if (values.length > 0) {
+        this.customMocks[key.toLowerCase()] = values;
+      }
+    }
+  }
+  /**
+   * Get deterministic mock data by type and index
+   */
+  static getMockValue(type, index) {
+    const normalizedType = type.toLowerCase().trim();
+    if (this.customMocks[normalizedType]) {
+      return this.customMocks[normalizedType][index % this.customMocks[normalizedType].length];
+    }
+    switch (normalizedType) {
+      case "id":
+        return (index + 1).toString();
+      case "name":
+      case "owner":
+      case "contact":
+      case "requester":
+      case "user":
+        return MOCK_NAMES[index % MOCK_NAMES.length];
+      case "last_name":
+        return MOCK_LAST_NAMES[index % MOCK_LAST_NAMES.length];
+      case "full_name":
+      case "fullname":
+        return `${MOCK_NAMES[index % MOCK_NAMES.length]} ${MOCK_LAST_NAMES[index % MOCK_LAST_NAMES.length]}`;
+      case "email":
+        return MOCK_EMAILS[index % MOCK_EMAILS.length];
+      case "status":
+        return MOCK_STATUSES[index % MOCK_STATUSES.length];
+      case "stage":
+        return MOCK_STAGES[index % MOCK_STAGES.length];
+      case "price":
+      case "cost":
+        return `$${((index + 1) * 99.99).toFixed(2)}`;
+      case "amount":
+        return `$${((index + 1) * 5e3).toLocaleString()}`;
+      case "account":
+      case "company":
+        return `Company ${index + 1}`;
+      case "country":
+      case "region":
+        return ["USA", "EU", "APAC", "LATAM"][index % 4];
+      case "device":
+        return ["Desktop", "Mobile", "Tablet"][index % 3];
+      case "time":
+      case "updated":
+        return `${2 + index % 20}h ago`;
+      case "priority":
+        return ["High", "Medium", "Low"][index % 3];
+      default:
+        if (normalizedType.startsWith("literal:")) {
+          return type.substring(8);
+        }
+        return `Item ${index + 1}`;
+    }
+  }
+  /**
+   * Parse mock string and return list of values
+   * Formats:
+   *   "name" → ["Juan", "María", "Carlos", ...]
+   *   "id" → ["1", "2", "3", ...]
+   *   "literal:No data" → ["No data", "No data", ...]
+   */
+  static generateMockList(mockType, count) {
+    const result = [];
+    for (let i = 0; i < count; i++) {
+      result.push(this.getMockValue(mockType, i));
+    }
+    return result;
+  }
+  /**
+   * Generate a row of mock data for a table given column types
+   * columns: "id,name,status,amount"
+   */
+  static generateMockRow(columns, rowIndex) {
+    const columnNames = columns.split(",").map((c) => c.trim());
+    const row = {};
+    columnNames.forEach((col) => {
+      row[col] = this.getMockValue(col, rowIndex);
+    });
+    return row;
+  }
+  /**
+   * Generate multiple mock rows for a table
+   */
+  static generateMockRows(columns, rowCount) {
+    const rows = [];
+    for (let i = 0; i < rowCount; i++) {
+      rows.push(this.generateMockRow(columns, i));
+    }
+    return rows;
+  }
+};
+MockDataGenerator.customMocks = {};
+
+// src/renderer/colors.ts
+var ColorResolver = class {
+  constructor() {
+    this.customColors = {};
+    // Named colors palette
+    this.namedColors = {
+      // Grayscale
+      white: "#FFFFFF",
+      black: "#000000",
+      gray: "#6B7280",
+      slate: "#64748B",
+      zinc: "#71717A",
+      // Colors
+      red: "#EF4444",
+      orange: "#F97316",
+      yellow: "#EAB308",
+      lime: "#84CC16",
+      green: "#22C55E",
+      emerald: "#10B981",
+      teal: "#14B8A6",
+      cyan: "#06B6D4",
+      blue: "#3B82F6",
+      indigo: "#6366F1",
+      violet: "#8B5CF6",
+      purple: "#A855F7",
+      fuchsia: "#D946EF",
+      pink: "#EC4899",
+      rose: "#F43F5E",
+      // Light variants
+      "red-light": "#FEE2E2",
+      "blue-light": "#DBEAFE",
+      "green-light": "#DCFCE7"
+    };
+  }
+  /**
+   * Set custom colors from project definition
+   */
+  setCustomColors(colors) {
+    this.customColors = colors || {};
+  }
+  /**
+   * Resolve a color reference to a hex value
+   * Priority: custom colors > named colors > hex validation > default
+   */
+  resolveColor(colorRef, defaultColor = "#000000") {
+    if (!colorRef) return defaultColor;
+    if (this.customColors[colorRef]) {
+      return this.validateHex(this.customColors[colorRef]) || defaultColor;
+    }
+    if (this.namedColors[colorRef]) {
+      return this.namedColors[colorRef];
+    }
+    if (this.isValidHex(colorRef)) {
+      return colorRef;
+    }
+    return defaultColor;
+  }
+  /**
+   * Validate hex color (6-character hex code)
+   */
+  isValidHex(color) {
+    return /^#[0-9A-Fa-f]{6}$/.test(color);
+  }
+  /**
+   * Validate and return hex, or undefined if invalid
+   */
+  validateHex(color) {
+    return this.isValidHex(color) ? color : void 0;
+  }
+};
+
+// src/renderer/icons/iconLibrary.ts
+var ICON_LIBRARY = {
+  // UI Navigation
+  home: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>`,
+  menu: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>`,
+  x: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
+  "chevron-right": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
+  "chevron-left": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
+  "chevron-down": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`,
+  "chevron-up": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>`,
+  "arrow-right": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>`,
+  "arrow-left": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>`,
+  "arrow-down": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>`,
+  "arrow-up": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>`,
+  // Search & Input
+  search: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>`,
+  filter: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>`,
+  // Edit & Actions
+  edit: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>`,
+  "edit-2": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>`,
+  trash: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>`,
+  "trash-2": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>`,
+  copy: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>`,
+  download: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
+  upload: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>`,
+  plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
+  minus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
+  check: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
+  // Notifications & Status
+  bell: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>`,
+  "alert-circle": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`,
+  "alert-triangle": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3.05h16.94a2 2 0 0 0 1.71-3.05L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
+  info: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`,
+  // User & Account
+  user: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`,
+  "user-check": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg>`,
+  "user-x": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="18" y1="8" x2="23" y2="13"></line><line x1="23" y1="8" x2="18" y2="13"></line></svg>`,
+  settings: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m5.08 5.08l4.24 4.24M1 12h6m6 0h6M4.22 19.78l4.24-4.24m5.08-5.08l4.24-4.24"></path></svg>`,
+  "log-out": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>`,
+  "log-in": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>`,
+  // Communication
+  mail: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>`,
+  phone: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>`,
+  share: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>`,
+  "share-2": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>`,
+  // Data & Info
+  calendar: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`,
+  clock: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`,
+  "map-pin": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>`,
+  wifi: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"></path><path d="M1.42 9a16 16 0 0 1 21.16 0"></path><path d="M9 20.55a4 4 0 0 1 6 0"></path><circle cx="12" cy="20" r="1"></circle></svg>`,
+  "wifi-off": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path><path d="M10.88 16.92a6 6 0 0 1 2.24 0"></path><circle cx="12" cy="20" r="1"></circle></svg>`,
+  // Media & Visuals
+  eye: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>`,
+  "eye-off": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>`,
+  image: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>`,
+  // Feedback & Social
+  heart: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`,
+  star: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 10.26 24 10.35 17.18 16.54 19.34 24.76 12 19.77 4.66 24.76 6.82 16.54 0 10.35 8.91 10.26 12 2"></polygon></svg>`,
+  // Loading & Misc
+  loader: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.22" y1="4.22" x2="7.07" y2="7.07"></line><line x1="16.93" y1="16.93" x2="19.78" y2="19.78"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.22" y1="19.78" x2="7.07" y2="16.93"></line><line x1="16.93" y1="7.07" x2="19.78" y2="4.22"></line></svg>`,
+  "help-circle": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4M12 8h.01"></path></svg>`,
+  lock: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>`
+};
+function getIcon(name) {
+  return ICON_LIBRARY[name] || null;
+}
+
+// src/renderer/index.ts
+var THEMES = {
+  light: {
+    bg: "#F8FAFC",
+    cardBg: "#FFFFFF",
+    border: "#E2E8F0",
+    text: "#1E293B",
+    textMuted: "#64748B",
+    primary: "#3B82F6",
+    primaryHover: "#2563EB",
+    primaryLight: "#EFF6FF"
+  },
+  dark: {
+    bg: "#0F172A",
+    cardBg: "#1E293B",
+    border: "#334155",
+    text: "#F1F5F9",
+    textMuted: "#94A3B8",
+    primary: "#60A5FA",
+    primaryHover: "#3B82F6",
+    primaryLight: "#1E3A8A"
+  }
+};
+var SVGRenderer = class {
+  constructor(ir, layout, options) {
+    this.renderedNodeIds = /* @__PURE__ */ new Set();
+    this.ir = ir;
+    this.layout = layout;
+    this.selectedScreenName = options?.screenName;
+    this.options = {
+      width: options?.width || 1280,
+      height: options?.height || 720,
+      theme: options?.theme || "light",
+      includeLabels: options?.includeLabels ?? true,
+      screenName: options?.screenName
+    };
+    this.renderTheme = THEMES[this.options.theme];
+    this.colorResolver = new ColorResolver();
+    if (ir.project.mocks && Object.keys(ir.project.mocks).length > 0) {
+      MockDataGenerator.setCustomMocks(ir.project.mocks);
+    }
+    if (ir.project.colors && Object.keys(ir.project.colors).length > 0) {
+      this.colorResolver.setCustomColors(ir.project.colors);
+    }
+  }
+  /**
+   * Get list of available screens in the project
+   */
+  getAvailableScreens() {
+    return this.ir.project.screens.map((screen) => ({
+      name: screen.name,
+      id: screen.id
+    }));
+  }
+  /**
+   * Get the currently selected or first screen
+   */
+  getSelectedScreen() {
+    let screen = this.ir.project.screens[0];
+    let screenName = screen?.name || "Unknown";
+    if (this.selectedScreenName) {
+      const found = this.ir.project.screens.find(
+        (s) => s.name.toLowerCase() === this.selectedScreenName.toLowerCase()
+      );
+      if (found) {
+        screen = found;
+        screenName = found.name;
+      }
+    }
+    return { screen, name: screenName };
+  }
+  render() {
+    const { screen } = this.getSelectedScreen();
+    if (!screen) return "<svg></svg>";
+    const rootId = screen.root.ref;
+    const children = [];
+    this.renderedNodeIds.clear();
+    this.renderNode(rootId, children);
+    const actualHeight = this.calculateContentHeight();
+    const svgHeight = Math.max(this.options.height, actualHeight);
+    let backgroundColor = this.renderTheme.bg;
+    if (screen.background) {
+      backgroundColor = this.colorResolver.resolveColor(screen.background, this.renderTheme.bg);
+    }
+    return `<svg width="${this.options.width}" height="${svgHeight}" viewBox="0 0 ${this.options.width} ${svgHeight}" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="${backgroundColor}"/>
+  ${children.join("\n  ")}
+</svg>`;
+  }
+  calculateContentHeight() {
+    let maxY = 0;
+    for (const nodeId of this.renderedNodeIds) {
+      const pos = this.layout[nodeId];
+      if (pos) {
+        const bottom = pos.y + pos.height;
+        if (bottom > maxY) {
+          maxY = bottom;
+        }
+      }
+    }
+    return Math.max(maxY + 40, this.options.height);
+  }
+  renderNode(nodeId, output) {
+    const node = this.ir.project.nodes[nodeId];
+    const pos = this.layout[nodeId];
+    if (!node || !pos) return;
+    this.renderedNodeIds.add(nodeId);
+    if (node.kind === "container") {
+      if (node.containerType === "panel") {
+        this.renderPanelBorder(node, pos, output);
+      }
+      if (node.containerType === "card") {
+        this.renderCardBorder(node, pos, output);
+      }
+      node.children.forEach((childRef) => {
+        this.renderNode(childRef.ref, output);
+      });
+    } else if (node.kind === "component") {
+      const componentSvg = this.renderComponent(node, pos);
+      if (componentSvg) {
+        output.push(componentSvg);
+      }
+    }
+  }
+  renderComponent(node, pos) {
+    switch (node.componentType) {
+      // Existing components
+      case "Heading":
+        return this.renderHeading(node, pos);
+      case "Button":
+        return this.renderButton(node, pos);
+      case "Input":
+        return this.renderInput(node, pos);
+      case "Topbar":
+        return this.renderTopbar(node, pos);
+      case "Table":
+        return this.renderTable(node, pos);
+      case "ChartPlaceholder":
+        return this.renderChartPlaceholder(node, pos);
+      case "Breadcrumbs":
+        return this.renderBreadcrumbs(node, pos);
+      case "SidebarMenu":
+        return this.renderSidebarMenu(node, pos);
+      // Text/Content components
+      case "Text":
+        return this.renderText(node, pos);
+      case "Label":
+        return this.renderLabel(node, pos);
+      case "Code":
+        return this.renderCode(node, pos);
+      // Form components
+      case "Textarea":
+        return this.renderTextarea(node, pos);
+      case "Select":
+        return this.renderSelect(node, pos);
+      case "Checkbox":
+        return this.renderCheckbox(node, pos);
+      case "Radio":
+        return this.renderRadio(node, pos);
+      case "Toggle":
+        return this.renderToggle(node, pos);
+      // Layout/Structure components
+      case "Sidebar":
+        return this.renderSidebar(node, pos);
+      case "Tabs":
+        return this.renderTabs(node, pos);
+      case "Divider":
+        return this.renderDivider(node, pos);
+      // Feedback/Alert components
+      case "Alert":
+        return this.renderAlert(node, pos);
+      case "Badge":
+        return this.renderBadge(node, pos);
+      case "Modal":
+        return this.renderModal(node, pos);
+      case "List":
+        return this.renderList(node, pos);
+      case "StatCard":
+        return this.renderStatCard(node, pos);
+      case "Image":
+        return this.renderImage(node, pos);
+      // Icon components
+      case "Icon":
+        return this.renderIcon(node, pos);
+      case "IconButton":
+        return this.renderIconButton(node, pos);
+      default:
+        return this.renderGenericComponent(node, pos);
+    }
+  }
+  renderHeading(node, pos) {
+    const text = String(node.props.text || "Heading");
+    const fontSize = 20;
+    return `<g>
+    <text x="${pos.x}" y="${pos.y + pos.height / 2 + 6}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="${fontSize}" 
+          font-weight="600" 
+          fill="${this.renderTheme.text}">${this.escapeXml(text)}</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 bgColor = variant === "primary" ? "rgba(59, 130, 246, 0.85)" : "rgba(226, 232, 240, 0.9)";
+    const textColor = variant === "primary" ? "#FFFFFF" : "rgba(30, 41, 59, 0.85)";
+    const borderColor = variant === "primary" ? "rgba(59, 130, 246, 0.7)" : "rgba(100, 116, 139, 0.4)";
+    const fontSizeMap = { "sm": 12, "md": 14, "lg": 16 };
+    const fontSize = fontSizeMap[size] || 14;
+    const buttonWidth = Math.max(pos.width, 60);
+    return `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${buttonWidth}" height="${pos.height}" 
+          rx="6" 
+          fill="${bgColor}" 
+          stroke="${borderColor}" 
+          stroke-width="1"/>
+    <text x="${pos.x + buttonWidth / 2}" y="${pos.y + pos.height / 2 + 5}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="${fontSize}" 
+          font-weight="500" 
+          fill="${textColor}" 
+          text-anchor="middle">${this.escapeXml(text)}</text>
+  </g>`;
+  }
+  renderInput(node, pos) {
+    const label = String(node.props.label || "");
+    const placeholder = String(node.props.placeholder || "");
+    return `<g>
+    ${label ? `<text x="${pos.x + 8}" y="${pos.y - 6}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="12" 
+          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>` : ""}
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="6" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    <text x="${pos.x + 12}" y="${pos.y + pos.height / 2 + 5}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="14" 
+          fill="${this.renderTheme.textMuted}">${this.escapeXml(placeholder)}</text>
+  </g>`;
+  }
+  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 titleLineHeight = 18;
+    const paddingTop = 24;
+    let titleY;
+    let subtitleY = 0;
+    if (subtitle) {
+      titleY = pos.y + paddingTop;
+      subtitleY = titleY + 20;
+    } else {
+      titleY = pos.y + pos.height / 2 + titleLineHeight / 2 - 4;
+    }
+    let svg = `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    
+    <!-- Title -->
+    <text x="${pos.x + 16}" y="${titleY}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="18" 
+          font-weight="600" 
+          fill="${this.renderTheme.text}">${this.escapeXml(title)}</text>`;
+    if (subtitle) {
+      svg += `
+    <text x="${pos.x + 16}" y="${subtitleY}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="13" 
+          fill="${this.renderTheme.textMuted}">${this.escapeXml(subtitle)}</text>`;
+    }
+    if (user) {
+      const badgeHeight = 28;
+      const badgePaddingX = 12;
+      const badgeX = pos.x + pos.width - 16 - badgePaddingX * 2 - user.length * 7.5;
+      const badgeY = pos.y + 12;
+      svg += `
+    <!-- User badge -->
+    <rect x="${badgeX}" y="${badgeY}" 
+          width="${badgePaddingX * 2 + user.length * 7.5}" height="${badgeHeight}" 
+          rx="4" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    <text x="${badgeX + badgePaddingX + user.length * 3.75}" y="${badgeY + badgeHeight / 2 + 4}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="12" 
+          fill="${this.renderTheme.text}" 
+          text-anchor="middle">${this.escapeXml(user)}</text>`;
+    }
+    if (actions) {
+      const actionList = actions.split(",").map((a) => a.trim()).filter(Boolean);
+      const buttonWidth = 100;
+      const buttonHeight = 32;
+      const buttonStartX = pos.x + pos.width - 16 - actionList.length * (buttonWidth + 8);
+      const buttonY = pos.y + (pos.height - buttonHeight) / 2;
+      actionList.forEach((action, idx) => {
+        const bx = buttonStartX + idx * (buttonWidth + 8);
+        svg += `
+    <!-- Action button: ${action} -->
+    <rect x="${bx}" y="${buttonY}" 
+          width="${buttonWidth}" height="${buttonHeight}" 
+          rx="6" 
+          fill="${this.renderTheme.primary}" 
+          stroke="none"/>
+    <text x="${bx + buttonWidth / 2}" y="${buttonY + buttonHeight / 2 + 4}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="12" 
+          font-weight="600" 
+          fill="white" 
+          text-anchor="middle">${this.escapeXml(action)}</text>`;
+      });
+    }
+    svg += "\n  </g>";
+    return svg;
+  }
+  renderPanelBorder(node, pos, output) {
+    if (node.kind !== "container") return;
+    let fillColor = this.renderTheme.cardBg;
+    if (node.style.background) {
+      fillColor = this.colorResolver.resolveColor(node.style.background, this.renderTheme.cardBg);
+    }
+    const svg = `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="8" 
+          fill="${fillColor}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    </g>`;
+    output.push(svg);
+  }
+  renderCardBorder(node, pos, output) {
+    if (node.kind !== "container") return;
+    const radiusMap = {
+      none: 0,
+      sm: 4,
+      md: 8,
+      lg: 12
+    };
+    const radius = radiusMap[String(node.params.radius) || "md"] || 8;
+    let fillColor = this.renderTheme.cardBg;
+    if (node.style.background) {
+      fillColor = this.colorResolver.resolveColor(node.style.background, this.renderTheme.cardBg);
+    }
+    const borderParam = String(node.params.border || "true");
+    const showBorder = borderParam !== "false";
+    const strokeWidth = showBorder ? "1" : "0";
+    const svg = `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="${radius}" 
+          fill="${fillColor}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="${strokeWidth}"/>
+    </g>`;
+    output.push(svg);
+  }
+  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 || 5);
+    const mockStr = String(node.props.mock || "");
+    const paginationValue = String(node.props.pagination || "false");
+    const pagination = paginationValue === "true";
+    const pageCount = Number(node.props.pages || 5);
+    const paginationAlign = String(node.props.paginationAlign || "right");
+    const mockTypes = mockStr ? mockStr.split(",").map((m) => m.trim()) : columns.map(() => "item");
+    while (mockTypes.length < columns.length) {
+      mockTypes.push("item");
+    }
+    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] || "item";
+        row[col] = MockDataGenerator.getMockValue(mockType, rowIdx);
+      });
+      mockRows.push(row);
+    }
+    let svg = `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="8" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>`;
+    if (title) {
+      svg += `
+    <text x="${pos.x + 16}" y="${pos.y + 24}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          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="${this.renderTheme.border}" stroke-width="1"/>`;
+    columns.forEach((col, i) => {
+      svg += `
+    <text x="${pos.x + i * colWidth + 12}" y="${headerY + 26}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          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="${this.renderTheme.border}" stroke-width="0.5"/>`;
+      columns.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" 
+          font-size="12" 
+          fill="${this.renderTheme.text}">${this.escapeXml(cellValue)}</text>`;
+      });
+    });
+    if (pagination) {
+      const paginationY = headerY + headerHeight + mockRows.length * rowHeight + 16;
+      const buttonWidth = 40;
+      const buttonHeight = 32;
+      const gap = 8;
+      const totalWidth = (pageCount + 2) * (buttonWidth + gap) - gap;
+      let startX;
+      if (paginationAlign === "left") {
+        startX = pos.x + 16;
+      } else if (paginationAlign === "center") {
+        startX = pos.x + (pos.width - totalWidth) / 2;
+      } else {
+        startX = pos.x + pos.width - totalWidth - 16;
+      }
+      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>`;
+      for (let i = 1; i <= pageCount; i++) {
+        const btnX = startX + (buttonWidth + gap) * i;
+        const isActive = i === 1;
+        const bgColor = isActive ? this.renderTheme.primary : this.renderTheme.cardBg;
+        const textColor = isActive ? "#FFFFFF" : this.renderTheme.text;
+        svg += `
+    <rect x="${btnX}" y="${paginationY}" 
+          width="${buttonWidth}" height="${buttonHeight}" 
+          rx="4" 
+          fill="${bgColor}" 
+          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-size="14" 
+          fill="${textColor}" 
+          text-anchor="middle">${i}</text>`;
+      }
+      const nextX = startX + (buttonWidth + gap) * (pageCount + 1);
+      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>`;
+    }
+    svg += "\n  </g>";
+    return svg;
+  }
+  renderChartPlaceholder(node, pos) {
+    const type = String(node.props.type || "bar");
+    return `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="8" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    <text x="${pos.x + pos.width / 2}" y="${pos.y + pos.height / 2}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="14" 
+          fill="${this.renderTheme.textMuted}" 
+          text-anchor="middle">[${this.escapeXml(type.toUpperCase())} CHART]</text>
+  </g>`;
+  }
+  // ============================================================================
+  // TEXT/CONTENT COMPONENTS
+  // ============================================================================
+  renderText(node, pos) {
+    const text = String(node.props.content || "Text content");
+    const fontSize = 14;
+    return `<g>
+    <text x="${pos.x}" y="${pos.y + 16}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="${fontSize}" 
+          fill="${this.renderTheme.text}">${this.escapeXml(text)}</text>
+  </g>`;
+  }
+  renderLabel(node, pos) {
+    const text = String(node.props.text || "Label");
+    return `<g>
+    <text x="${pos.x}" y="${pos.y + 12}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="12" 
+          fill="${this.renderTheme.textMuted}">${this.escapeXml(text)}</text>
+  </g>`;
+  }
+  renderCode(node, pos) {
+    const code = String(node.props.code || "const x = 42;");
+    return `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="4" 
+          fill="${this.renderTheme.bg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    <text x="${pos.x + 8}" y="${pos.y + 18}" 
+          font-family="monospace" 
+          font-size="11" 
+          fill="${this.renderTheme.text}">${this.escapeXml(code.substring(0, 30))}</text>
+  </g>`;
+  }
+  // ============================================================================
+  // FORM COMPONENTS
+  // ============================================================================
+  renderTextarea(node, pos) {
+    const label = String(node.props.label || "");
+    const placeholder = String(node.props.placeholder || "Enter text...");
+    return `<g>
+    ${label ? `<text x="${pos.x}" y="${pos.y - 6}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="12" 
+          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>` : ""}
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="6" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    <text x="${pos.x + 12}" y="${pos.y + 20}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="13" 
+          fill="${this.renderTheme.textMuted}">${this.escapeXml(placeholder)}</text>
+  </g>`;
+  }
+  renderSelect(node, pos) {
+    const label = String(node.props.label || "");
+    const placeholder = String(node.props.placeholder || "Select...");
+    return `<g>
+    ${label ? `<text x="${pos.x}" y="${pos.y - 6}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="12" 
+          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>` : ""}
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="6" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    <text x="${pos.x + 12}" y="${pos.y + pos.height / 2 + 5}" 
+          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="${pos.y + pos.height / 2 + 5}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="16" 
+          fill="${this.renderTheme.textMuted}">\u25BC</text>
+  </g>`;
+  }
+  renderCheckbox(node, pos) {
+    const label = String(node.props.label || "Checkbox");
+    const checked = String(node.props.checked || "false").toLowerCase() === "true";
+    const checkboxSize = 18;
+    const checkboxY = pos.y + pos.height / 2 - checkboxSize / 2;
+    return `<g>
+    <rect x="${pos.x}" y="${checkboxY}" 
+          width="${checkboxSize}" height="${checkboxSize}" 
+          rx="4" 
+          fill="${checked ? this.renderTheme.primary : this.renderTheme.cardBg}" 
+          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-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-size="14" 
+          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>
+  </g>`;
+  }
+  renderRadio(node, pos) {
+    const label = String(node.props.label || "Radio");
+    const checked = String(node.props.checked || "false").toLowerCase() === "true";
+    const radioSize = 16;
+    const radioY = pos.y + pos.height / 2 - radioSize / 2;
+    return `<g>
+    <circle cx="${pos.x + radioSize / 2}" cy="${radioY + radioSize / 2}" 
+            r="${radioSize / 2}" 
+            fill="${this.renderTheme.cardBg}" 
+            stroke="${this.renderTheme.border}" 
+            stroke-width="1"/>
+    ${checked ? `<circle cx="${pos.x + radioSize / 2}" cy="${radioY + radioSize / 2}" 
+            r="${radioSize / 3.5}" 
+            fill="${this.renderTheme.primary}"/>` : ""}
+    <text x="${pos.x + radioSize + 12}" y="${pos.y + pos.height / 2 + 5}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="14" 
+          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>
+  </g>`;
+  }
+  renderToggle(node, pos) {
+    const label = String(node.props.label || "Toggle");
+    const enabled = String(node.props.enabled || "false").toLowerCase() === "true";
+    const toggleWidth = 40;
+    const toggleHeight = 20;
+    const toggleY = pos.y + pos.height / 2 - toggleHeight / 2;
+    return `<g>
+    <rect x="${pos.x}" y="${toggleY}" 
+          width="${toggleWidth}" height="${toggleHeight}" 
+          rx="10" 
+          fill="${enabled ? this.renderTheme.primary : this.renderTheme.border}" 
+          stroke="none"/>
+    <circle cx="${pos.x + (enabled ? toggleWidth - 10 : 10)}" cy="${toggleY + toggleHeight / 2}" 
+            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-size="14" 
+          fill="${this.renderTheme.text}">${this.escapeXml(label)}</text>
+  </g>`;
+  }
+  // ============================================================================
+  // LAYOUT/STRUCTURE COMPONENTS
+  // ============================================================================
+  renderSidebar(node, pos) {
+    const title = String(node.props.title || "Sidebar");
+    const itemsStr = String(node.props.items || "");
+    const activeItem = String(node.props.active || "");
+    let items = [];
+    if (itemsStr) {
+      items = itemsStr.split(",").map((i) => i.trim());
+    } else {
+      const itemCount = Number(node.props.itemsMock || 6);
+      items = MockDataGenerator.generateMockList("name", itemCount);
+    }
+    const itemHeight = 40;
+    const padding = 16;
+    const titleHeight = 40;
+    let svg = `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    <!-- Title -->
+    <text x="${pos.x + padding}" y="${pos.y + padding + 8}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="14" 
+          font-weight="600" 
+          fill="${this.renderTheme.text}">${this.escapeXml(title)}</text>
+    <line x1="${pos.x}" y1="${pos.y + titleHeight}" x2="${pos.x + pos.width}" y2="${pos.y + titleHeight}" 
+          stroke="${this.renderTheme.border}" stroke-width="1"/>`;
+    items.forEach((item, i) => {
+      const itemY = pos.y + titleHeight + padding + i * itemHeight;
+      const isActive = item === activeItem;
+      svg += `
+    <rect x="${pos.x + 8}" y="${itemY}" 
+          width="${pos.width - 16}" height="36" 
+          rx="4" 
+          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-size="13" 
+          fill="${isActive ? "white" : this.renderTheme.textMuted}">${this.escapeXml(item)}</text>`;
+    });
+    svg += "\n  </g>";
+    return svg;
+  }
+  renderTabs(node, pos) {
+    const itemsStr = String(node.props.items || "");
+    const tabs = itemsStr ? itemsStr.split(",").map((t) => t.trim()) : ["Tab 1", "Tab 2", "Tab 3"];
+    const tabWidth = pos.width / tabs.length;
+    let svg = `<g>
+    <!-- Tab headers -->`;
+    tabs.forEach((tab, i) => {
+      const tabX = pos.x + i * tabWidth;
+      const isActive = i === 0;
+      svg += `
+    <rect x="${tabX}" y="${pos.y}" 
+          width="${tabWidth}" height="44" 
+          fill="${isActive ? this.renderTheme.primary : "transparent"}" 
+          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-size="13" 
+          font-weight="${isActive ? "600" : "500"}" 
+          fill="${isActive ? "white" : this.renderTheme.text}" 
+          text-anchor="middle">${this.escapeXml(tab)}</text>`;
+    });
+    svg += `
+    <!-- Tab content area -->
+    <rect x="${pos.x}" y="${pos.y + 44}" 
+          width="${pos.width}" height="${pos.height - 44}" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+  </g>`;
+    return svg;
+  }
+  renderDivider(node, pos) {
+    return `<g>
+    <line x1="${pos.x}" y1="${pos.y + pos.height / 2}" 
+          x2="${pos.x + pos.width}" y2="${pos.y + pos.height / 2}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+  </g>`;
+  }
+  // ============================================================================
+  // FEEDBACK/ALERT COMPONENTS
+  // ============================================================================
+  renderAlert(node, pos) {
+    const type = String(node.props.type || "info");
+    const message = String(node.props.message || "Alert message");
+    const typeColors = {
+      info: "#3B82F6",
+      warning: "#F59E0B",
+      error: "#EF4444",
+      success: "#10B981"
+    };
+    const bgColor = typeColors[type] || typeColors.info;
+    return `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="6" 
+          fill="${bgColor}15" 
+          stroke="${bgColor}" 
+          stroke-width="1"/>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="4" height="${pos.height}" 
+          rx="6" 
+          fill="${bgColor}"/>
+    <text x="${pos.x + 16}" y="${pos.y + pos.height / 2 + 5}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="13" 
+          fill="${bgColor}">${this.escapeXml(message)}</text>
+  </g>`;
+  }
+  renderBadge(node, pos) {
+    const text = String(node.props.text || "Badge");
+    const variant = String(node.props.variant || "default");
+    const bgColor = variant === "primary" ? this.renderTheme.primary : this.renderTheme.border;
+    const textColor = variant === "primary" ? "white" : this.renderTheme.text;
+    return `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="${pos.height / 2}" 
+          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-size="12" 
+          font-weight="600" 
+          fill="${textColor}" 
+          text-anchor="middle">${this.escapeXml(text)}</text>
+  </g>`;
+  }
+  renderModal(node, pos) {
+    const title = String(node.props.title || "Modal");
+    const padding = 16;
+    const headerHeight = 48;
+    const overlayHeight = Math.max(this.options.height, this.calculateContentHeight());
+    const modalX = (this.options.width - pos.width) / 2;
+    const modalY = Math.max(40, (overlayHeight - pos.height) / 2);
+    return `<g>
+    <!-- Modal backdrop -->
+      <rect x="0" y="0" 
+        width="${this.options.width}" height="${overlayHeight}" 
+        fill="black" opacity="0.28"/>
+    
+    <!-- Modal box -->
+      <rect x="${modalX}" y="${modalY}" 
+        width="${pos.width}" height="${pos.height}" 
+          rx="8" 
+          fill="${this.renderTheme.cardBg}" 
+        stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    
+    <!-- Header -->
+      <line x1="${modalX}" y1="${modalY + headerHeight}" 
+        x2="${modalX + pos.width}" y2="${modalY + headerHeight}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    
+      <text x="${modalX + padding}" y="${modalY + padding + 16}" 
+          font-family="system-ui, -apple-system, 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-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-size="13" 
+          fill="${this.renderTheme.textMuted}" 
+          text-anchor="middle">Modal content</text>
+  </g>`;
+  }
+  renderList(node, pos) {
+    const title = String(node.props.title || "");
+    const itemsStr = String(node.props.items || "");
+    let items = [];
+    if (itemsStr) {
+      items = itemsStr.split(",").map((i) => i.trim());
+    } else {
+      const itemCount = Number(node.props.itemsMock || 4);
+      items = MockDataGenerator.generateMockList("name", itemCount);
+    }
+    const padding = 12;
+    const itemHeight = 36;
+    const titleHeight = title ? 40 : 0;
+    let svg = `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="8" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>`;
+    if (title) {
+      svg += `
+    <text x="${pos.x + padding}" y="${pos.y + 26}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="13" 
+          font-weight="600" 
+          fill="${this.renderTheme.text}">${this.escapeXml(title)}</text>
+    <line x1="${pos.x}" y1="${pos.y + titleHeight}" x2="${pos.x + pos.width}" y2="${pos.y + titleHeight}" 
+          stroke="${this.renderTheme.border}" stroke-width="1"/>`;
+    }
+    items.forEach((item, i) => {
+      const itemY = pos.y + titleHeight + i * itemHeight;
+      if (itemY + itemHeight < pos.y + pos.height) {
+        svg += `
+    <line x1="${pos.x}" y1="${itemY + itemHeight}" 
+          x2="${pos.x + pos.width}" y2="${itemY + itemHeight}" 
+          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-size="13" 
+          fill="${this.renderTheme.text}">${this.escapeXml(item)}</text>`;
+      }
+    });
+    svg += "\n  </g>";
+    return svg;
+  }
+  renderGenericComponent(node, pos) {
+    return `<g>
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="4" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          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-size="12" 
+          fill="${this.renderTheme.textMuted}" 
+          text-anchor="middle">${node.componentType}</text>
+  </g>`;
+  }
+  renderStatCard(node, pos) {
+    const title = String(node.props.title || "Metric");
+    const value = String(node.props.value || "0");
+    const caption = String(node.props.caption || "");
+    const padding = this.resolveSpacing(node.style.padding) || 16;
+    const innerX = pos.x + padding;
+    const innerY = pos.y + padding;
+    const innerWidth = pos.width - padding * 2;
+    const innerHeight = pos.height - padding * 2;
+    const valueSize = 32;
+    const titleSize = 14;
+    const captionSize = 12;
+    const lineHeight = 18;
+    const topGap = 8;
+    const valueGap = 12;
+    const captionGap = 12;
+    const titleY = innerY + topGap + titleSize;
+    const valueY = titleY + valueGap + valueSize;
+    const captionY = valueY + captionGap + captionSize;
+    let svg = `<g>
+    <!-- StatCard Background -->
+    <rect x="${pos.x}" y="${pos.y}" 
+          width="${pos.width}" height="${pos.height}" 
+          rx="8" 
+          fill="${this.renderTheme.cardBg}" 
+          stroke="${this.renderTheme.border}" 
+          stroke-width="1"/>
+    
+    <!-- Title -->
+    <text x="${innerX}" y="${titleY}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="${titleSize}" 
+          font-weight="500" 
+          fill="${this.renderTheme.textMuted}">${this.escapeXml(title)}</text>
+    
+    <!-- Value (Large) -->
+    <text x="${innerX}" y="${valueY}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="${valueSize}" 
+          font-weight="700" 
+          fill="${this.renderTheme.primary}">${this.escapeXml(value)}</text>`;
+    if (caption) {
+      svg += `
+    <!-- Caption -->
+    <text x="${innerX}" y="${captionY}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="${captionSize}" 
+          fill="${this.renderTheme.textMuted}">${this.escapeXml(caption)}</text>`;
+    }
+    svg += `
+  </g>`;
+    return svg;
+  }
+  renderImage(node, pos) {
+    const placeholder = String(node.props.placeholder || "landscape");
+    const aspectRatios = {
+      landscape: 16 / 9,
+      portrait: 2 / 3,
+      square: 1,
+      icon: 1,
+      avatar: 1
+    };
+    const ratio = aspectRatios[placeholder] || 16 / 9;
+    const maxSize = Math.min(pos.width, pos.height) * 0.8;
+    let iconWidth = maxSize;
+    let iconHeight = maxSize / ratio;
+    if (iconHeight > pos.height * 0.8) {
+      iconHeight = pos.height * 0.8;
+      iconWidth = iconHeight * ratio;
+    }
+    const offsetX = pos.x + (pos.width - iconWidth) / 2;
+    const offsetY = pos.y + (pos.height - iconHeight) / 2;
+    let svgContent = "";
+    let svg = `<g>
+    <!-- Image Background -->
+    <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="#E8E8E8"/>`;
+    if (["landscape", "portrait", "square"].includes(placeholder)) {
+      const cameraCx = offsetX + iconWidth / 2;
+      const cameraCy = offsetY + iconHeight / 2;
+      const scale = Math.min(iconWidth, iconHeight) / 24;
+      const scaledX = cameraCx - 24 / 2 * scale;
+      const scaledY = cameraCy - 24 / 2 * scale;
+      const bodyLeft = scaledX + 2 * scale;
+      const bodyTop = scaledY + 5 * scale;
+      const bodyWidth = 20 * scale;
+      const bodyHeight = 16 * scale;
+      const bodyRadius = 2 * scale;
+      const lensCx = cameraCx;
+      const lensCy = cameraCy + 0.5 * scale;
+      const lensRadius = 4 * scale;
+      svg += `
+    <!-- Camera Icon - Modern Digital Design -->
+    <!-- Camera body (rounded rectangle with fill) -->
+    <g>
+      <!-- Body with fill -->
+      <path d="M ${bodyLeft + bodyRadius} ${bodyTop} 
+               L ${bodyLeft + bodyWidth - bodyRadius} ${bodyTop}
+               Q ${bodyLeft + bodyWidth} ${bodyTop} ${bodyLeft + bodyWidth} ${bodyTop + bodyRadius}
+               L ${bodyLeft + bodyWidth} ${bodyTop + bodyHeight - bodyRadius}
+               Q ${bodyLeft + bodyWidth} ${bodyTop + bodyHeight} ${bodyLeft + bodyWidth - bodyRadius} ${bodyTop + bodyHeight}
+               L ${bodyLeft + bodyRadius} ${bodyTop + bodyHeight}
+               Q ${bodyLeft} ${bodyTop + bodyHeight} ${bodyLeft} ${bodyTop + bodyHeight - bodyRadius}
+               L ${bodyLeft} ${bodyTop + bodyRadius}
+               Q ${bodyLeft} ${bodyTop} ${bodyLeft + bodyRadius} ${bodyTop}"
+            fill="#666" stroke="#666" stroke-width="${1.5 * scale}" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <!-- Main lens circle (prominent) -->
+    <circle cx="${lensCx}" cy="${lensCy}" r="${lensRadius}" 
+            fill="none" stroke="#333" stroke-width="${2 * scale}" stroke-linecap="round" stroke-linejoin="round"/>
+    <!-- Lens inner circle (glass effect) -->
+    <circle cx="${lensCx}" cy="${lensCy}" r="${lensRadius * 0.7}" 
+            fill="#C0C0C0" stroke="#999" stroke-width="${0.8 * scale}"/>
+    <!-- Lens highlight (reflection) -->
+    <circle cx="${lensCx - lensRadius * 0.25}" cy="${lensCy - lensRadius * 0.25}" 
+            r="${lensRadius * 0.25}" 
+            fill="#E0E0E0" opacity="0.6"/>`;
+    } else if (["avatar", "icon"].includes(placeholder)) {
+      const personWidth = iconWidth * 0.5;
+      const personHeight = iconHeight * 0.7;
+      const personCx = offsetX + iconWidth / 2;
+      const personCy = offsetY + iconHeight / 2 - iconHeight * 0.1;
+      svg += `
+    <!-- Person Silhouette -->
+    <!-- Head -->
+    <circle cx="${personCx}" cy="${personCy - personHeight * 0.25}" 
+            r="${personWidth * 0.25}" fill="#666"/>
+    <!-- Body -->
+    <rect x="${personCx - personWidth * 0.3}" y="${personCy - personHeight * 0.05}" 
+          width="${personWidth * 0.6}" height="${personHeight * 0.5}" 
+          fill="#666" rx="3"/>`;
+    }
+    svg += `
+    <!-- Border -->
+    <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>`;
+    return svg;
+  }
+  renderBreadcrumbs(node, pos) {
+    const itemsStr = String(node.props.items || "Home");
+    const items = itemsStr.split(",").map((s) => s.trim());
+    const separator = String(node.props.separator || "/");
+    const fontSize = 12;
+    const separatorWidth = 20;
+    const itemSpacing = 8;
+    let currentX = pos.x;
+    let svg = "<g>";
+    items.forEach((item, index) => {
+      const isLast = index === items.length - 1;
+      const textColor = isLast ? this.renderTheme.text : this.renderTheme.textMuted;
+      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-size="${fontSize}" 
+          font-weight="${fontWeight}" 
+          fill="${textColor}">${this.escapeXml(item)}</text>`;
+      const textWidth = item.length * 6.5;
+      currentX += textWidth + itemSpacing;
+      if (!isLast) {
+        svg += `
+    <text x="${currentX + 4}" y="${pos.y + pos.height / 2 + 4}" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="${fontSize}" 
+          fill="${this.renderTheme.textMuted}">${this.escapeXml(separator)}</text>`;
+        currentX += separatorWidth;
+      }
+    });
+    svg += "\n  </g>";
+    return svg;
+  }
+  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);
+    let svg = "<g>";
+    items.forEach((item, index) => {
+      const itemY = pos.y + index * itemHeight;
+      const isActive = index === activeIndex;
+      const bgColor = isActive ? "rgba(59, 130, 246, 0.15)" : "transparent";
+      const textColor = isActive ? "rgba(59, 130, 246, 0.9)" : "rgba(30, 41, 59, 0.75)";
+      const fontWeight = isActive ? "500" : "400";
+      if (isActive) {
+        svg += `
+    <rect x="${pos.x}" y="${itemY}" 
+          width="${pos.width}" height="${itemHeight}" 
+          rx="6" 
+          fill="${bgColor}"/>`;
+      }
+      let currentX = pos.x + 12;
+      if (icons[index]) {
+        const iconSvg = getIcon(icons[index]);
+        if (iconSvg) {
+          const iconSize = 16;
+          const iconY = itemY + (itemHeight - iconSize) / 2;
+          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">
+        ${this.extractSvgContent(iconSvg)}
+      </svg>
+    </g>`;
+          currentX += iconSize + 8;
+        }
+      }
+      svg += `
+    <text x="${currentX}" y="${itemY + itemHeight / 2 + 5}" 
+          font-family="system-ui, -apple-system, 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 size = String(node.props.size || "md");
+    const iconSvg = getIcon(iconType);
+    if (!iconSvg) {
+      return `<g>
+    <!-- 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>
+  </g>`;
+    }
+    const sizeMap = { "sm": 14, "md": 18, "lg": 24 };
+    const iconSize = sizeMap[size] || 18;
+    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 transform="translate(${offsetX}, ${offsetY})">
+    <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>`;
+    return wrappedSvg;
+  }
+  renderIconButton(node, pos) {
+    const iconName = String(node.props.icon || "help-circle");
+    const variant = String(node.props.variant || "default");
+    const size = String(node.props.size || "md");
+    const disabled = String(node.props.disabled || "false") === "true";
+    const bgColorMap = {
+      "primary": "rgba(59, 130, 246, 0.85)",
+      "danger": "rgba(239, 68, 68, 0.85)",
+      "default": "rgba(226, 232, 240, 0.9)"
+    };
+    const bgColor = bgColorMap[variant] || bgColorMap["default"];
+    const iconColorMap = {
+      "primary": "#FFFFFF",
+      "danger": "#FFFFFF",
+      "default": "rgba(30, 41, 59, 0.75)"
+    };
+    const iconColor = iconColorMap[variant] || iconColorMap["default"];
+    const borderColorMap = {
+      "primary": "rgba(59, 130, 246, 0.7)",
+      "danger": "rgba(239, 68, 68, 0.7)",
+      "default": "rgba(100, 116, 139, 0.4)"
+    };
+    const borderColor = borderColorMap[variant] || borderColorMap["default"];
+    const opacity = disabled ? "0.5" : "1";
+    const iconSvg = getIcon(iconName);
+    const sizeMap = { "sm": 28, "md": 32, "lg": 40 };
+    const buttonSize = sizeMap[size] || 32;
+    const radius = 6;
+    let svg = `<g opacity="${opacity}">
+    <!-- IconButton background -->
+    <rect x="${pos.x}" y="${pos.y}" width="${buttonSize}" 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;
+      svg += `
+    <!-- Icon -->
+    <g transform="translate(${offsetX}, ${offsetY})">
+      <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>`;
+    }
+    svg += "\n  </g>";
+    return svg;
+  }
+  /**
+   * Extract SVG path/element content from a full SVG string
+   * Removes the outer <svg> tag but keeps the content
+   */
+  extractSvgContent(svgString) {
+    const match = svgString.match(/<svg[^>]*>([\s\S]*?)<\/svg>/);
+    return match ? match[1] : svgString;
+  }
+  resolveSpacing(spacing) {
+    const spacingMap = {
+      none: 0,
+      xs: 4,
+      sm: 8,
+      md: 16,
+      lg: 24,
+      xl: 32
+    };
+    if (!spacing) return spacingMap[this.ir.project.theme.spacing] || 16;
+    const value = spacingMap[spacing];
+    return value !== void 0 ? value : spacingMap.md;
+  }
+  escapeXml(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+  }
+};
+function renderToSVG(ir, layout, options) {
+  const renderer = new SVGRenderer(ir, layout, options);
+  return renderer.render();
+}
+function createSVGElement(tag, attrs, children = []) {
+  const attrStr = Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
+  return `<${tag} ${attrStr}>${children.join("")}</${tag}>`;
+}
+function buildSVG(component) {
+  const children = component.children?.map(buildSVG) ?? [];
+  if (component.text) {
+    children.push(component.text);
+  }
+  return createSVGElement(component.tag, component.attrs, children);
+}
+
+// src/index.ts
+var version = "0.0.1";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IRGenerator,
+  LayoutEngine,
+  SVGRenderer,
+  buildSVG,
+  calculateLayout,
+  createSVGElement,
+  generateIR,
+  parseWireDSL,
+  renderToSVG,
+  resolveGridPosition,
+  version
+});