@wire-dsl/engine 0.9.0 → 0.10.0

package/dist/index.cjs

@@ -24,11 +24,13 @@ __export(index_exports, {
   DEVICE_PRESETS: () => DEVICE_PRESETS,
   IRGenerator: () => IRGenerator,
   LayoutEngine: () => LayoutEngine,
+  SELF_TARGET: () => SELF_TARGET,
   SVGRenderer: () => SVGRenderer,
   SkeletonSVGRenderer: () => SkeletonSVGRenderer,
   SketchSVGRenderer: () => SketchSVGRenderer,
   SourceMapBuilder: () => SourceMapBuilder,
   SourceMapResolver: () => SourceMapResolver,
+  applyStateChange: () => applyStateChange,
   buildSVG: () => buildSVG,
   calculateLayout: () => calculateLayout,
   createSVGElement: () => createSVGElement,
@@ -142,6 +144,21 @@ var SourceMapBuilder = class {
         this.counters.set("cell", idx + 1);
         return `cell-${idx}`;
       }
+      case "tab": {
+        const idx = this.counters.get("tab") || 0;
+        this.counters.set("tab", idx + 1);
+        return `tab-${idx}`;
+      }
+      case "modal-body": {
+        const idx = this.counters.get("modal-body") || 0;
+        this.counters.set("modal-body", idx + 1);
+        return `modal-body-${idx}`;
+      }
+      case "modal-footer": {
+        const idx = this.counters.get("modal-footer") || 0;
+        this.counters.set("modal-footer", idx + 1);
+        return `modal-footer-${idx}`;
+      }
       case "component-definition":
         return `define-${metadata?.name || "unknown"}`;
       case "layout-definition":
@@ -204,6 +221,49 @@ var SourceMapBuilder = class {
     entry.properties[propertyName] = propertySourceMap;
     return propertySourceMap;
   }
+  /**
+   * Add an event handler to an existing node in the SourceMap
+   * Events have action expressions as values (e.g., "show(modal) & navigate(Home)")
+   *
+   * @param nodeId - ID of the node that owns this event
+   * @param eventName - Name of the event (e.g., "onClick", "onClose")
+   * @param tokens - Captured tokens: name token for event key, CST node for actionChain
+   * @returns The EventSourceMap entry created
+   */
+  addEvent(nodeId, eventName, tokens) {
+    const entry = this.entries.find((e) => e.nodeId === nodeId);
+    if (!entry) {
+      throw new Error(`Cannot add event to non-existent node: ${nodeId}`);
+    }
+    if (!entry.events) {
+      entry.events = {};
+    }
+    const nameRange = {
+      start: this.getTokenStart(tokens.name),
+      end: this.getTokenEnd(tokens.name)
+    };
+    const valueRange = {
+      start: this.getTokenStart(tokens.value),
+      end: this.getTokenEnd(tokens.value)
+    };
+    const fullRange = {
+      start: nameRange.start,
+      end: valueRange.end
+    };
+    let rawValue = "";
+    if (this.sourceCode && valueRange.start.offset !== void 0 && valueRange.end.offset !== void 0) {
+      rawValue = this.sourceCode.slice(valueRange.start.offset, valueRange.end.offset + 1);
+    }
+    const eventSourceMap = {
+      name: eventName,
+      value: rawValue,
+      range: fullRange,
+      nameRange,
+      valueRange
+    };
+    entry.events[eventName] = eventSourceMap;
+    return eventSourceMap;
+  }
   /**
    * Push a parent onto the stack (when entering a container node)
    */
@@ -239,6 +299,9 @@ var SourceMapBuilder = class {
       "screen",
       "layout",
       "cell",
+      "tab",
+      "modal-body",
+      "modal-footer",
       "component-definition",
       "layout-definition"
     ];
@@ -483,12 +546,26 @@ var Style = (0, import_chevrotain.createToken)({ name: "Style", pattern: /style\
 var Mocks = (0, import_chevrotain.createToken)({ name: "Mocks", pattern: /mocks\b/ });
 var Colors = (0, import_chevrotain.createToken)({ name: "Colors", pattern: /colors(?=\s*\{)/ });
 var Cell = (0, import_chevrotain.createToken)({ name: "Cell", pattern: /cell\b/ });
+var Tab = (0, import_chevrotain.createToken)({ name: "Tab", pattern: /tab\b/ });
+var Body = (0, import_chevrotain.createToken)({ name: "Body", pattern: /body\b/ });
+var Footer = (0, import_chevrotain.createToken)({ name: "Footer", pattern: /footer\b/ });
+var Navigate = (0, import_chevrotain.createToken)({ name: "Navigate", pattern: /navigate\b/ });
+var Show = (0, import_chevrotain.createToken)({ name: "Show", pattern: /show\b/ });
+var Hide = (0, import_chevrotain.createToken)({ name: "Hide", pattern: /hide\b/ });
+var ToggleAction = (0, import_chevrotain.createToken)({ name: "ToggleAction", pattern: /toggle\b/ });
+var EnableAction = (0, import_chevrotain.createToken)({ name: "EnableAction", pattern: /enable\b/ });
+var DisableAction = (0, import_chevrotain.createToken)({ name: "DisableAction", pattern: /disable\b/ });
+var SetTab = (0, import_chevrotain.createToken)({ name: "SetTab", pattern: /setTab\b/ });
+var Self = (0, import_chevrotain.createToken)({ name: "Self", pattern: /self\b/ });
 var LCurly = (0, import_chevrotain.createToken)({ name: "LCurly", pattern: /{/ });
 var RCurly = (0, import_chevrotain.createToken)({ name: "RCurly", pattern: /}/ });
 var LParen = (0, import_chevrotain.createToken)({ name: "LParen", pattern: /\(/ });
 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 Ampersand = (0, import_chevrotain.createToken)({ name: "Ampersand", pattern: /&/ });
+var LBracket = (0, import_chevrotain.createToken)({ name: "LBracket", pattern: /\[/ });
+var RBracket = (0, import_chevrotain.createToken)({ name: "RBracket", pattern: /\]/ });
 var StringLiteral = (0, import_chevrotain.createToken)({
   name: "StringLiteral",
   pattern: /"(?:[^"\\]|\\.)*"/
@@ -537,6 +614,18 @@ var allTokens = [
   Mocks,
   Colors,
   Cell,
+  Tab,
+  Body,
+  Footer,
+  // Event action keywords (must come before Identifier)
+  Navigate,
+  Show,
+  Hide,
+  ToggleAction,
+  EnableAction,
+  DisableAction,
+  SetTab,
+  Self,
   // Punctuation
   LCurly,
   RCurly,
@@ -544,6 +633,9 @@ var allTokens = [
   RParen,
   Colon,
   Comma,
+  Ampersand,
+  LBracket,
+  RBracket,
   // Literals
   StringLiteral,
   NumberLiteral,
@@ -651,6 +743,90 @@ var WireDSLParser = class extends import_chevrotain.CstParser {
       this.SUBRULE(this.layout);
       this.CONSUME(RCurly);
     });
+    // singleAction: navigate(Screen) | show(id|self) | hide(id|self) | toggle(id|self) | setTab(tabsId, index)
+    this.singleAction = this.RULE("singleAction", () => {
+      this.OR([
+        {
+          ALT: () => {
+            this.CONSUME(Navigate, { LABEL: "navigate" });
+            this.CONSUME(LParen);
+            this.CONSUME(Identifier, { LABEL: "targetScreen" });
+            this.CONSUME(RParen);
+          }
+        },
+        {
+          ALT: () => {
+            this.OR2([
+              { ALT: () => this.CONSUME(Show, { LABEL: "sht" }) },
+              { ALT: () => this.CONSUME(Hide, { LABEL: "sht" }) },
+              { ALT: () => this.CONSUME(ToggleAction, { LABEL: "sht" }) },
+              { ALT: () => this.CONSUME(EnableAction, { LABEL: "sht" }) },
+              { ALT: () => this.CONSUME(DisableAction, { LABEL: "sht" }) }
+            ]);
+            this.CONSUME2(LParen);
+            this.OR3([
+              { ALT: () => this.CONSUME(Self, { LABEL: "targetId" }) },
+              { ALT: () => this.CONSUME2(Identifier, { LABEL: "targetId" }) }
+            ]);
+            this.CONSUME2(RParen);
+          }
+        },
+        {
+          ALT: () => {
+            this.CONSUME(SetTab, { LABEL: "setTab" });
+            this.CONSUME3(LParen);
+            this.CONSUME3(Identifier, { LABEL: "tabsId" });
+            this.CONSUME(Comma);
+            this.CONSUME(NumberLiteral, { LABEL: "tabIndex" });
+            this.CONSUME3(RParen);
+          }
+        }
+      ]);
+    });
+    // actionChain: singleAction (& singleAction)*
+    this.actionChain = this.RULE("actionChain", () => {
+      this.SUBRULE(this.singleAction);
+      this.MANY(() => {
+        this.CONSUME(Ampersand);
+        this.SUBRULE2(this.singleAction);
+      });
+    });
+    // tab { ... } — children block inside layout tabs
+    this.tab = this.RULE("tab", () => {
+      this.CONSUME(Tab);
+      this.CONSUME(LCurly);
+      this.MANY(() => {
+        this.OR([
+          { ALT: () => this.SUBRULE(this.component) },
+          { ALT: () => this.SUBRULE(this.layout) }
+        ]);
+      });
+      this.CONSUME(RCurly);
+    });
+    // body { ... } — content section inside layout modal
+    this.body = this.RULE("body", () => {
+      this.CONSUME(Body);
+      this.CONSUME(LCurly);
+      this.MANY(() => {
+        this.OR([
+          { ALT: () => this.SUBRULE(this.component) },
+          { ALT: () => this.SUBRULE(this.layout) }
+        ]);
+      });
+      this.CONSUME(RCurly);
+    });
+    // footer { ... } — footer section inside layout modal
+    this.footer = this.RULE("footer", () => {
+      this.CONSUME(Footer);
+      this.CONSUME(LCurly);
+      this.MANY(() => {
+        this.OR([
+          { ALT: () => this.SUBRULE(this.component) },
+          { ALT: () => this.SUBRULE(this.layout) }
+        ]);
+      });
+      this.CONSUME(RCurly);
+    });
     // layout stack(...) { ... }
     this.layout = this.RULE("layout", () => {
       this.CONSUME(Layout);
@@ -663,7 +839,10 @@ var WireDSLParser = class extends import_chevrotain.CstParser {
         this.OR([
           { ALT: () => this.SUBRULE(this.component) },
           { ALT: () => this.SUBRULE2(this.layout) },
-          { ALT: () => this.SUBRULE(this.cell) }
+          { ALT: () => this.SUBRULE(this.cell) },
+          { ALT: () => this.SUBRULE(this.tab) },
+          { ALT: () => this.SUBRULE(this.body) },
+          { ALT: () => this.SUBRULE(this.footer) }
         ]);
       });
       this.CONSUME(RCurly);
@@ -691,16 +870,27 @@ var WireDSLParser = class extends import_chevrotain.CstParser {
         this.SUBRULE(this.property);
       });
     });
-    // property: key: value
+    // property: key: value  (value can be string, number, identifier, or action chain)
     this.property = this.RULE("property", () => {
       this.CONSUME(Identifier, { LABEL: "propKey" });
       this.CONSUME(Colon);
       this.OR([
+        { ALT: () => this.SUBRULE(this.actionChain) },
+        { ALT: () => this.SUBRULE(this.arrayLiteral) },
         { ALT: () => this.CONSUME(StringLiteral, { LABEL: "propValue" }) },
         { ALT: () => this.CONSUME(NumberLiteral, { LABEL: "propValue" }) },
         { ALT: () => this.CONSUME2(Identifier, { LABEL: "propValue" }) }
       ]);
     });
+    // ["item1", "item2", "item3"]
+    this.arrayLiteral = this.RULE("arrayLiteral", () => {
+      this.CONSUME(LBracket);
+      this.MANY_SEP({
+        SEP: Comma,
+        DEF: () => this.CONSUME(StringLiteral, { LABEL: "arrayItem" })
+      });
+      this.CONSUME(RBracket);
+    });
     // (param1: value1, param2: value2)
     this.paramList = this.RULE("paramList", () => {
       this.CONSUME(LParen);
@@ -839,7 +1029,7 @@ var WireDSLVisitor = class extends BaseCstVisitor {
     };
   }
   screen(ctx) {
-    const params = ctx.paramList ? this.visit(ctx.paramList[0]) : {};
+    const { params } = ctx.paramList ? this.visit(ctx.paramList[0]) : { params: {} };
     return {
       type: "screen",
       name: ctx.screenName[0].image,
@@ -850,10 +1040,12 @@ var WireDSLVisitor = class extends BaseCstVisitor {
   layout(ctx) {
     const layoutType = ctx.layoutType[0].image;
     const params = {};
+    const events = [];
     const children = [];
     if (ctx.paramList) {
       const paramResult = this.visit(ctx.paramList);
-      Object.assign(params, paramResult);
+      Object.assign(params, paramResult.params);
+      events.push(...paramResult.events);
     }
     const childNodes = [];
     if (ctx.component) {
@@ -874,20 +1066,33 @@ var WireDSLVisitor = class extends BaseCstVisitor {
         childNodes.push({ type: "cell", node: cell, index: startToken.startOffset });
       });
     }
+    if (ctx.tab) {
+      ctx.tab.forEach((tab) => {
+        const startToken = tab.children?.Tab?.[0];
+        childNodes.push({ type: "tab", node: tab, index: startToken.startOffset });
+      });
+    }
+    if (ctx.body) {
+      ctx.body.forEach((body) => {
+        const startToken = body.children?.Body?.[0];
+        childNodes.push({ type: "body", node: body, index: startToken.startOffset });
+      });
+    }
+    if (ctx.footer) {
+      ctx.footer.forEach((footer) => {
+        const startToken = footer.children?.Footer?.[0];
+        childNodes.push({ type: "footer", node: footer, 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));
-      }
+      children.push(this.visit(item.node));
     });
     return {
       type: "layout",
       layoutType,
       params,
+      events,
       children
     };
   }
@@ -927,23 +1132,137 @@ var WireDSLVisitor = class extends BaseCstVisitor {
       children
     };
   }
+  singleAction(ctx) {
+    if (ctx.navigate) {
+      return { type: "navigate", screen: ctx.targetScreen[0].image };
+    }
+    if (ctx.sht) {
+      const tokenName = ctx.sht[0].tokenType.name;
+      const typeMap = {
+        Show: "show",
+        Hide: "hide",
+        ToggleAction: "toggle",
+        EnableAction: "enable",
+        DisableAction: "disable"
+      };
+      const type = typeMap[tokenName] ?? "show";
+      const targetToken = ctx.targetId[0];
+      const isSelf = targetToken.tokenType.name === "Self";
+      const targetId = isSelf ? "_self" : targetToken.image;
+      return { type, targetId };
+    }
+    if (ctx.setTab) {
+      return {
+        type: "setTab",
+        tabsId: ctx.tabsId[0].image,
+        index: Number(ctx.tabIndex[0].image)
+      };
+    }
+    throw new Error("Unknown action type in singleAction visitor");
+  }
+  actionChain(ctx) {
+    const actions = [];
+    if (ctx.singleAction) {
+      ctx.singleAction.forEach((action) => {
+        actions.push(this.visit(action));
+      });
+    }
+    return actions;
+  }
+  tab(ctx) {
+    const children = [];
+    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) => {
+      children.push(this.visit(item.node));
+    });
+    return { type: "tab", children };
+  }
+  body(ctx) {
+    const children = [];
+    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) => {
+      children.push(this.visit(item.node));
+    });
+    return { type: "modal-body", children };
+  }
+  footer(ctx) {
+    const children = [];
+    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) => {
+      children.push(this.visit(item.node));
+    });
+    return { type: "modal-footer", children };
+  }
   component(ctx) {
     const componentType = ctx.componentType[0].image;
     const props = {};
+    const events = [];
     if (ctx.property) {
       ctx.property.forEach((prop) => {
         const result = this.visit(prop);
-        props[result.key] = result.value;
+        if (result.isEvent) {
+          events.push({ event: result.key, actions: result.actions });
+        } else {
+          props[result.key] = result.value;
+        }
       });
     }
     return {
       type: "component",
       componentType,
-      props
+      props,
+      events
     };
   }
   property(ctx) {
     const key = ctx.propKey[0].image;
+    if (ctx.actionChain && ctx.actionChain.length > 0) {
+      const actions = this.visit(ctx.actionChain[0]);
+      return { key, isEvent: true, actions };
+    }
+    if (ctx.arrayLiteral && ctx.arrayLiteral.length > 0) {
+      const items = this.visit(ctx.arrayLiteral[0]);
+      return { key, value: items };
+    }
     const rawValue = ctx.propValue[0].image;
     let value = rawValue;
     if (typeof rawValue === "string" && rawValue.startsWith('"')) {
@@ -953,15 +1272,27 @@ var WireDSLVisitor = class extends BaseCstVisitor {
     }
     return { key, value };
   }
+  arrayLiteral(ctx) {
+    if (!ctx.arrayItem) return [];
+    return ctx.arrayItem.map((token) => {
+      const raw = token.image;
+      return raw.startsWith('"') ? raw.slice(1, -1) : raw;
+    });
+  }
   paramList(ctx) {
     const params = {};
+    const events = [];
     if (ctx.property) {
       ctx.property.forEach((prop) => {
         const result = this.visit(prop);
-        params[result.key] = result.value;
+        if (result.isEvent) {
+          events.push({ event: result.key, actions: result.actions });
+        } else {
+          params[result.key] = result.value;
+        }
       });
     }
-    return params;
+    return { params, events };
   }
 };
 var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
@@ -1036,7 +1367,7 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
     return ast;
   }
   screen(ctx) {
-    const params = ctx.paramList ? this.visit(ctx.paramList[0]) : {};
+    const { params } = ctx.paramList ? this.visit(ctx.paramList[0]) : { params: {} };
     const screenName = ctx.screenName[0].image;
     const tokens = {
       keyword: ctx.Screen[0],
@@ -1069,9 +1400,11 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
   layout(ctx) {
     const layoutType = ctx.layoutType[0].image;
     const params = {};
+    const events = [];
     if (ctx.paramList) {
       const paramResult = this.visit(ctx.paramList);
-      Object.assign(params, paramResult);
+      Object.assign(params, paramResult.params);
+      events.push(...paramResult.events);
     }
     const tokens = {
       keyword: ctx.Layout[0],
@@ -1083,6 +1416,7 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
       type: "layout",
       layoutType,
       params,
+      events,
       children: []
       // Will be filled after push
     };
@@ -1096,13 +1430,21 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
       if (ctx.paramList && ctx.paramList[0]?.children?.property) {
         ctx.paramList[0].children.property.forEach((propCtx) => {
           const propResult = this.visit(propCtx);
+          if (propResult.isEvent) {
+            this.sourceMapBuilder.addEvent(nodeId, propResult.key, {
+              name: propCtx.children.propKey[0],
+              value: propCtx.children.actionChain[0]
+            });
+            return;
+          }
+          const valueToken = propCtx.children.propValue?.[0] ?? propCtx.children.arrayLiteral?.[0];
           this.sourceMapBuilder.addProperty(
             nodeId,
             propResult.key,
             propResult.value,
             {
               name: propCtx.children.propKey[0],
-              value: propCtx.children.propValue[0]
+              value: valueToken
             }
           );
         });
@@ -1128,6 +1470,24 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
         childNodes.push({ type: "cell", node: cell, index: startToken.startOffset });
       });
     }
+    if (ctx.tab) {
+      ctx.tab.forEach((tab) => {
+        const startToken = tab.children?.Tab?.[0];
+        childNodes.push({ type: "tab", node: tab, index: startToken.startOffset });
+      });
+    }
+    if (ctx.body) {
+      ctx.body.forEach((body) => {
+        const startToken = body.children?.Body?.[0];
+        childNodes.push({ type: "body", node: body, index: startToken.startOffset });
+      });
+    }
+    if (ctx.footer) {
+      ctx.footer.forEach((footer) => {
+        const startToken = footer.children?.Footer?.[0];
+        childNodes.push({ type: "footer", node: footer, index: startToken.startOffset });
+      });
+    }
     childNodes.sort((a, b) => a.index - b.index);
     childNodes.forEach((item) => {
       ast.children.push(this.visit(item.node));
@@ -1165,13 +1525,21 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
       if (ctx.property) {
         ctx.property.forEach((propCtx) => {
           const propResult = this.visit(propCtx);
+          if (propResult.isEvent) {
+            this.sourceMapBuilder.addEvent(nodeId, propResult.key, {
+              name: propCtx.children.propKey[0],
+              value: propCtx.children.actionChain[0]
+            });
+            return;
+          }
+          const valueToken = propCtx.children.propValue?.[0] ?? propCtx.children.arrayLiteral?.[0];
           this.sourceMapBuilder.addProperty(
             nodeId,
             propResult.key,
             propResult.value,
             {
               name: propCtx.children.propKey[0],
-              value: propCtx.children.propValue[0]
+              value: valueToken
             }
           );
         });
@@ -1200,6 +1568,114 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
     }
     return ast;
   }
+  body(ctx) {
+    const tokens = {
+      keyword: ctx.Body[0],
+      body: ctx.RCurly[0]
+    };
+    const ast = {
+      type: "modal-body",
+      children: []
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode("modal-body", tokens);
+      ast._meta = { nodeId };
+      this.sourceMapBuilder.pushParent(nodeId);
+    }
+    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) => {
+      ast.children.push(this.visit(item.node));
+    });
+    if (this.sourceMapBuilder) {
+      this.sourceMapBuilder.popParent();
+    }
+    return ast;
+  }
+  tab(ctx) {
+    const tokens = {
+      keyword: ctx.Tab[0],
+      body: ctx.RCurly[0]
+    };
+    const ast = {
+      type: "tab",
+      children: []
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode("tab", tokens);
+      ast._meta = { nodeId };
+      this.sourceMapBuilder.pushParent(nodeId);
+    }
+    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) => {
+      ast.children.push(this.visit(item.node));
+    });
+    if (this.sourceMapBuilder) {
+      this.sourceMapBuilder.popParent();
+    }
+    return ast;
+  }
+  footer(ctx) {
+    const tokens = {
+      keyword: ctx.Footer[0],
+      body: ctx.RCurly[0]
+    };
+    const ast = {
+      type: "modal-footer",
+      children: []
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode("modal-footer", tokens);
+      ast._meta = { nodeId };
+      this.sourceMapBuilder.pushParent(nodeId);
+    }
+    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) => {
+      ast.children.push(this.visit(item.node));
+    });
+    if (this.sourceMapBuilder) {
+      this.sourceMapBuilder.popParent();
+    }
+    return ast;
+  }
   component(ctx) {
     const tokens = {
       keyword: ctx.Component[0],
@@ -1221,13 +1697,21 @@ var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
       if (ctx.property) {
         ctx.property.forEach((propCtx) => {
           const propResult = this.visit(propCtx);
+          if (propResult.isEvent) {
+            this.sourceMapBuilder.addEvent(nodeId, propResult.key, {
+              name: propCtx.children.propKey[0],
+              value: propCtx.children.actionChain[0]
+            });
+            return;
+          }
+          const valueToken = propCtx.children.propValue?.[0] ?? propCtx.children.arrayLiteral?.[0];
           this.sourceMapBuilder.addProperty(
             nodeId,
             propResult.key,
             propResult.value,
             {
               name: propCtx.children.propKey[0],
-              value: propCtx.children.propValue[0]
+              value: valueToken
             }
           );
         });
@@ -1574,11 +2058,13 @@ function createParserDiagnostic(error) {
   };
 }
 function isBooleanLike(value) {
+  if (Array.isArray(value)) return false;
   if (typeof value === "number") return value === 0 || value === 1;
   const normalized = String(value).trim().toLowerCase();
   return normalized === "true" || normalized === "false";
 }
 function parseBooleanLike(value, fallback = false) {
+  if (Array.isArray(value)) return fallback;
   if (typeof value === "number") {
     if (value === 1) return true;
     if (value === 0) return false;
@@ -1635,6 +2121,14 @@ function validateSemanticDiagnostics(ast, sourceMap) {
             count += countChildrenSlots(cellChild);
           }
         }
+      } else if (child.type === "tab") {
+        for (const tabChild of child.children) {
+          if (tabChild.type === "component") {
+            if (tabChild.componentType === "Children") count += 1;
+          } else if (tabChild.type === "layout") {
+            count += countChildrenSlots(tabChild);
+          }
+        }
       }
     }
     return count;
@@ -1881,6 +2375,11 @@ function validateSemanticDiagnostics(ast, sourceMap) {
         checkLayout(child, insideDefinedLayout);
       } else if (child.type === "cell") {
         checkCell(child, insideDefinedLayout);
+      } else if (child.type === "tab") {
+        for (const tabChild of child.children) {
+          if (tabChild.type === "component") checkComponent(tabChild, insideDefinedLayout);
+          if (tabChild.type === "layout") checkLayout(tabChild, insideDefinedLayout);
+        }
       }
     }
   };
@@ -2058,6 +2557,16 @@ function validateDefinitionCycles(ast) {
             collectLayoutDependencies(cellChild, deps);
           }
         }
+      } else if (child.type === "tab") {
+        for (const tabChild of child.children) {
+          if (tabChild.type === "component") {
+            if (shouldTrackComponentDependency(tabChild.componentType)) {
+              deps.add(makeComponentKey(tabChild.componentType));
+            }
+          } else if (tabChild.type === "layout") {
+            collectLayoutDependencies(tabChild, deps);
+          }
+        }
       }
     }
   };
@@ -2122,6 +2631,13 @@ Components and layouts cannot reference each other in a cycle.`
 var import_zod = require("zod");
 var import_components2 = require("@wire-dsl/language-support/components");
 
+// src/shared/list-utils.ts
+function toStringArray(value) {
+  if (Array.isArray(value)) return value;
+  if (value === void 0 || value === "") return [];
+  return String(value).split(",").map((s) => s.trim()).filter(Boolean);
+}
+
 // src/ir/device-presets.ts
 var DEVICE_PRESETS = {
   mobile: {
@@ -2207,6 +2723,7 @@ function isValidDevice(device) {
 }
 
 // src/ir/index.ts
+var SELF_TARGET = "_self";
 var IRStyleSchema = import_zod.z.object({
   density: import_zod.z.enum(["compact", "normal", "comfortable"]),
   spacing: import_zod.z.enum(["xs", "sm", "md", "lg", "xl"]),
@@ -2228,12 +2745,27 @@ var IRMetaSchema = import_zod.z.object({
   source: import_zod.z.string().optional(),
   nodeId: import_zod.z.string().optional()
 });
+var IREventActionSchema = import_zod.z.union([
+  import_zod.z.object({ type: import_zod.z.literal("navigate"), screen: import_zod.z.string() }),
+  import_zod.z.object({ type: import_zod.z.literal("show"), targetId: import_zod.z.string() }),
+  import_zod.z.object({ type: import_zod.z.literal("hide"), targetId: import_zod.z.string() }),
+  import_zod.z.object({ type: import_zod.z.literal("toggle"), targetId: import_zod.z.string() }),
+  import_zod.z.object({ type: import_zod.z.literal("enable"), targetId: import_zod.z.string() }),
+  import_zod.z.object({ type: import_zod.z.literal("disable"), targetId: import_zod.z.string() }),
+  import_zod.z.object({ type: import_zod.z.literal("setTab"), tabsId: import_zod.z.string(), index: import_zod.z.number().int().min(0) }),
+  import_zod.z.object({ type: import_zod.z.literal("navigateItems"), screens: import_zod.z.array(import_zod.z.string()) })
+]);
+var IREventHandlerSchema = import_zod.z.object({
+  event: import_zod.z.enum(["onClick", "onChange", "onActive", "onInactive", "onItemsClick", "onItemClick", "onRowClick", "onClose"]),
+  actions: import_zod.z.array(IREventActionSchema)
+});
 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()])),
+  containerType: import_zod.z.enum(["stack", "grid", "split", "panel", "card", "tabs", "tab", "modal", "modal-body", "modal-footer"]),
+  params: import_zod.z.record(import_zod.z.string(), import_zod.z.union([import_zod.z.string(), import_zod.z.number(), import_zod.z.array(import_zod.z.string())])),
   children: import_zod.z.array(import_zod.z.object({ ref: import_zod.z.string() })),
+  events: import_zod.z.array(IREventHandlerSchema).optional(),
   style: IRNodeStyleSchema,
   meta: IRMetaSchema
 });
@@ -2241,7 +2773,9 @@ 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()])),
+  props: import_zod.z.record(import_zod.z.string(), import_zod.z.union([import_zod.z.string(), import_zod.z.number(), import_zod.z.array(import_zod.z.string())])),
+  userDefinedId: import_zod.z.string().regex(/^[a-zA-Z_][a-zA-Z0-9_]*$/, "ID must match [a-zA-Z_][a-zA-Z0-9_]*").optional(),
+  events: import_zod.z.array(IREventHandlerSchema).optional(),
   style: IRNodeStyleSchema,
   meta: IRMetaSchema
 });
@@ -2250,7 +2784,7 @@ var IRInstanceNodeSchema = import_zod.z.object({
   kind: import_zod.z.literal("instance"),
   definitionName: import_zod.z.string(),
   definitionKind: import_zod.z.enum(["component", "layout"]),
-  invocationProps: import_zod.z.record(import_zod.z.string(), import_zod.z.union([import_zod.z.string(), import_zod.z.number()])),
+  invocationProps: import_zod.z.record(import_zod.z.string(), import_zod.z.union([import_zod.z.string(), import_zod.z.number(), import_zod.z.array(import_zod.z.string())])),
   expandedRoot: import_zod.z.object({ ref: import_zod.z.string() }),
   style: IRNodeStyleSchema,
   meta: IRMetaSchema
@@ -2444,25 +2978,29 @@ ${messages}`);
     if (layout.children && layout.children.length > 0) {
       layout.children.forEach((child) => {
         if (child.type === "component") {
-          found.push({
-            componentType: child.componentType,
-            location: "layout"
-          });
+          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"
-                });
+                found.push({ componentType: cellChild.componentType, location: "cell" });
               } else if (cellChild.type === "layout") {
                 this.findComponentsInLayout(cellChild, found);
               }
             });
           }
+        } else if (child.type === "tab") {
+          if (child.children) {
+            child.children.forEach((tabChild) => {
+              if (tabChild.type === "component") {
+                found.push({ componentType: tabChild.componentType, location: "tab" });
+              } else if (tabChild.type === "layout") {
+                this.findComponentsInLayout(tabChild, found);
+              }
+            });
+          }
         }
       });
     }
@@ -2479,53 +3017,179 @@ ${messages}`);
     if (layout.layoutType === "split") {
       layoutParams = this.normalizeSplitParams(layoutParams);
     }
-    const layoutChildren = layout.children;
+    const nonTabChildren = layout.children.filter((c) => c.type !== "tab");
     const layoutDefinition = this.definedLayouts.get(layout.layoutType);
     if (layoutDefinition) {
-      return this.expandDefinedLayout(layoutDefinition, layoutParams, layoutChildren, context, layout._meta?.nodeId);
+      return this.expandDefinedLayout(layoutDefinition, layoutParams, nonTabChildren, context, layout._meta?.nodeId);
+    }
+    const nodeId = this.idGen.generate("node");
+    const childRefs = [];
+    if (layout.layoutType === "modal") {
+      const bodyChildren = layout.children.filter((c) => c.type === "modal-body");
+      const footerChildren = layout.children.filter((c) => c.type === "modal-footer");
+      const normalChildren = layout.children.filter((c) => c.type !== "modal-body" && c.type !== "modal-footer");
+      if (bodyChildren.length > 1 || footerChildren.length > 1) {
+        if (bodyChildren.length > 1) {
+          this.warnings.push({
+            type: "modal-003-duplicate-body",
+            message: "MODAL-003: A modal can only have one body section."
+          });
+        }
+        if (footerChildren.length > 1) {
+          this.warnings.push({
+            type: "modal-004-duplicate-footer",
+            message: "MODAL-004: A modal can only have one footer section."
+          });
+        }
+      }
+      if ((bodyChildren.length > 0 || footerChildren.length > 0) && normalChildren.length > 0) {
+        this.warnings.push({
+          type: "modal-002-mixed-children",
+          message: "MODAL-002: Cannot mix body/footer sections with direct children in a modal. Use either body/footer sections or direct children, not both."
+        });
+      }
+    }
+    for (const child of layout.children) {
+      if (child.type === "modal-body" || child.type === "modal-footer") {
+        if (layout.layoutType !== "modal") {
+          this.warnings.push({
+            type: "modal-001-invalid-context",
+            message: `MODAL-001: "${child.type}" sections are only valid inside layout modal.`
+          });
+          continue;
+        }
+        const childId = child.type === "modal-body" ? this.convertModalBody(child, context) : this.convertModalFooter(child, context);
+        if (childId) childRefs.push({ ref: childId });
+      } else if (child.type === "layout") {
+        const childId = this.convertLayout(child, context);
+        if (childId) childRefs.push({ ref: childId });
+      } else if (child.type === "component") {
+        const childId = this.convertComponent(child, context);
+        if (childId) childRefs.push({ ref: childId });
+      } else if (child.type === "cell") {
+        const childId = this.convertCell(child, context);
+        if (childId) childRefs.push({ ref: childId });
+      } else if (child.type === "tab") {
+        const childId = this.convertTab(child, context);
+        if (childId) childRefs.push({ ref: childId });
+      }
+    }
+    const style = {};
+    if (layoutParams.padding !== void 0) {
+      style.padding = String(layoutParams.padding);
+    } else {
+      style.padding = "none";
+    }
+    if (layoutParams.gap !== void 0) {
+      style.gap = String(layoutParams.gap);
+    }
+    if (layoutParams.justify !== void 0) {
+      style.justify = layoutParams.justify;
+    }
+    if (layoutParams.align !== void 0) {
+      style.align = layoutParams.align;
+    }
+    if (layoutParams.background !== void 0) {
+      style.background = String(layoutParams.background);
+    }
+    if (layoutParams.id !== void 0) {
+      const layoutId = String(layoutParams.id);
+      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(layoutId)) {
+        this.errors.push({
+          type: "evt-009-invalid-id",
+          message: `EVT-009: id "${layoutId}" is not a valid identifier. Must match [a-zA-Z_][a-zA-Z0-9_]* (cannot start with a digit or contain hyphens).`
+        });
+      }
     }
+    const irEvents = this.convertASTEvents(layout.events || []);
+    const containerNode = {
+      id: nodeId,
+      kind: "container",
+      containerType: layout.layoutType,
+      params: this.cleanParams(layoutParams),
+      children: childRefs,
+      ...irEvents.length > 0 ? { events: irEvents } : {},
+      style,
+      meta: {
+        nodeId: context?.instanceScope ? `${layout._meta?.nodeId}@${context.instanceScope}` : layout._meta?.nodeId
+      }
+    };
+    this.nodes[nodeId] = containerNode;
+    return nodeId;
+  }
+  convertTab(tab, context) {
+    const nodeId = this.idGen.generate("node");
+    const childRefs = [];
+    for (const child of tab.children) {
+      if (child.type === "layout") {
+        const childId = this.convertLayout(child, context);
+        if (childId) childRefs.push({ ref: childId });
+      } else if (child.type === "component") {
+        const childId = this.convertComponent(child, context);
+        if (childId) childRefs.push({ ref: childId });
+      }
+    }
+    const containerNode = {
+      id: nodeId,
+      kind: "container",
+      containerType: "tab",
+      params: {},
+      children: childRefs,
+      style: { padding: "none" },
+      meta: {
+        nodeId: context?.instanceScope ? `${tab._meta?.nodeId}@${context.instanceScope}` : tab._meta?.nodeId
+      }
+    };
+    this.nodes[nodeId] = containerNode;
+    return nodeId;
+  }
+  convertModalBody(body, context) {
     const nodeId = this.idGen.generate("node");
     const childRefs = [];
-    for (const child of layoutChildren) {
+    for (const child of body.children) {
       if (child.type === "layout") {
         const childId = this.convertLayout(child, context);
         if (childId) childRefs.push({ ref: childId });
       } else if (child.type === "component") {
         const childId = this.convertComponent(child, context);
         if (childId) childRefs.push({ ref: childId });
-      } else if (child.type === "cell") {
-        const childId = this.convertCell(child, context);
-        if (childId) childRefs.push({ ref: childId });
       }
     }
-    const style = {};
-    if (layoutParams.padding !== void 0) {
-      style.padding = String(layoutParams.padding);
-    } else {
-      style.padding = "none";
-    }
-    if (layoutParams.gap !== void 0) {
-      style.gap = String(layoutParams.gap);
-    }
-    if (layoutParams.justify !== void 0) {
-      style.justify = layoutParams.justify;
-    }
-    if (layoutParams.align !== void 0) {
-      style.align = layoutParams.align;
-    }
-    if (layoutParams.background !== void 0) {
-      style.background = String(layoutParams.background);
+    const containerNode = {
+      id: nodeId,
+      kind: "container",
+      containerType: "modal-body",
+      params: { direction: "vertical" },
+      children: childRefs,
+      style: { padding: "md", gap: "md" },
+      meta: {
+        nodeId: context?.instanceScope ? `${body._meta?.nodeId}@${context.instanceScope}` : body._meta?.nodeId
+      }
+    };
+    this.nodes[nodeId] = containerNode;
+    return nodeId;
+  }
+  convertModalFooter(footer, context) {
+    const nodeId = this.idGen.generate("node");
+    const childRefs = [];
+    for (const child of footer.children) {
+      if (child.type === "layout") {
+        const childId = this.convertLayout(child, context);
+        if (childId) childRefs.push({ ref: childId });
+      } else if (child.type === "component") {
+        const childId = this.convertComponent(child, context);
+        if (childId) childRefs.push({ ref: childId });
+      }
     }
     const containerNode = {
       id: nodeId,
       kind: "container",
-      containerType: layout.layoutType,
-      params: this.cleanParams(layoutParams),
+      containerType: "modal-footer",
+      params: { direction: "horizontal" },
       children: childRefs,
-      style,
+      style: { padding: "md", justify: "spaceBetween" },
       meta: {
-        // Scope nodeId per instance so each expansion gets a unique identifier
-        nodeId: context?.instanceScope ? `${layout._meta?.nodeId}@${context.instanceScope}` : layout._meta?.nodeId
+        nodeId: context?.instanceScope ? `${footer._meta?.nodeId}@${context.instanceScope}` : footer._meta?.nodeId
       }
     };
     this.nodes[nodeId] = containerNode;
@@ -2608,7 +3272,6 @@ ${messages}`);
       "IconButton",
       "Alert",
       "Badge",
-      "Modal",
       "List",
       "Sidebar",
       "Tabs",
@@ -2620,20 +3283,70 @@ ${messages}`);
       this.undefinedComponentsUsed.add(component.componentType);
     }
     const nodeId = this.idGen.generate("node");
+    const rawId = resolvedProps.id !== void 0 ? String(resolvedProps.id) : void 0;
+    if (rawId !== void 0 && !/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(rawId)) {
+      this.errors.push({
+        type: "evt-009-invalid-id",
+        message: `EVT-009: id "${rawId}" is not a valid identifier. Must match [a-zA-Z_][a-zA-Z0-9_]* (cannot start with a digit or contain hyphens).`
+      });
+    }
+    const userDefinedId = rawId;
+    const propsWithoutId = { ...resolvedProps };
+    delete propsWithoutId.id;
+    const irEvents = this.convertASTEvents(component.events || []);
+    const onItemsClickEvent = this.extractOnItemsClickEvent(propsWithoutId);
+    if (onItemsClickEvent) {
+      irEvents.push(onItemsClickEvent);
+      delete propsWithoutId.onItemsClick;
+    }
     const componentNode = {
       id: nodeId,
       kind: "component",
       componentType: component.componentType,
-      props: resolvedProps,
+      props: propsWithoutId,
+      ...userDefinedId ? { userDefinedId } : {},
+      ...irEvents.length > 0 ? { events: irEvents } : {},
       style: {},
       meta: {
-        // Scope nodeId per instance so each expansion gets a unique identifier
         nodeId: context?.instanceScope ? `${component._meta?.nodeId}@${context.instanceScope}` : component._meta?.nodeId
       }
     };
     this.nodes[nodeId] = componentNode;
     return nodeId;
   }
+  convertASTEventAction(action) {
+    switch (action.type) {
+      case "navigate":
+        return { type: "navigate", screen: action.screen };
+      case "show":
+        return { type: "show", targetId: action.targetId };
+      case "hide":
+        return { type: "hide", targetId: action.targetId };
+      case "toggle":
+        return { type: "toggle", targetId: action.targetId };
+      case "enable":
+        return { type: "enable", targetId: action.targetId };
+      case "disable":
+        return { type: "disable", targetId: action.targetId };
+      case "setTab":
+        return { type: "setTab", tabsId: action.tabsId, index: action.index };
+    }
+  }
+  convertASTEvents(events) {
+    return events.map((handler) => ({
+      event: handler.event,
+      actions: handler.actions.map((a) => this.convertASTEventAction(a))
+    }));
+  }
+  extractOnItemsClickEvent(props) {
+    const value = props.onItemsClick;
+    if (!value) return null;
+    const screens = toStringArray(value);
+    return {
+      event: "onItemsClick",
+      actions: [{ type: "navigateItems", screens }]
+    };
+  }
   expandDefinedComponent(definition, invocationArgs, callSiteNodeId, parentContext) {
     const context = {
       args: invocationArgs,
@@ -2813,21 +3526,23 @@ ${messages}`);
         key
       );
       if (resolvedValue !== void 0) {
+        const metadata = import_components2.COMPONENTS[componentType];
+        const propMeta = metadata?.properties?.[key];
         const wasPropReference = typeof value === "string" && value.startsWith("prop_");
-        if (wasPropReference) {
-          const metadata = import_components2.COMPONENTS[componentType];
-          const property = metadata?.properties?.[key];
-          if (property?.type === "enum" && Array.isArray(property.options)) {
-            const normalizedValue = String(resolvedValue);
-            if (!property.options.includes(normalizedValue)) {
-              this.warnings.push({
-                type: "invalid-bound-enum-value",
-                message: `Invalid value "${normalizedValue}" for property "${key}" in component "${componentType}". Expected one of: ${property.options.join(", ")}.`
-              });
-            }
+        if (wasPropReference && propMeta?.type === "enum" && Array.isArray(propMeta.options)) {
+          const normalizedValue = String(resolvedValue);
+          if (!propMeta.options.includes(normalizedValue)) {
+            this.warnings.push({
+              type: "invalid-bound-enum-value",
+              message: `Invalid value "${normalizedValue}" for property "${key}" in component "${componentType}". Expected one of: ${propMeta.options.join(", ")}.`
+            });
           }
         }
-        resolved[key] = resolvedValue;
+        if (propMeta?.type === "list" && !Array.isArray(resolvedValue)) {
+          resolved[key] = toStringArray(resolvedValue);
+        } else {
+          resolved[key] = resolvedValue;
+        }
       }
     }
     return resolved;
@@ -2899,6 +3614,195 @@ function generateIR(ast) {
   return generator.generate(ast);
 }
 
+// src/state.ts
+function applyStateChange(ir, change, originNodeId) {
+  switch (change.type) {
+    case "setVisible":
+      return applySetVisible(ir, change.targetId, change.visible, originNodeId);
+    case "toggleVisible":
+      return applyToggleVisible(ir, change.targetId, originNodeId);
+    case "setActiveTab":
+      return applySetActiveTab(ir, change.tabsId, change.index);
+    case "setChecked":
+      return applySetBooleanProp(ir, change.targetId, "checked", change.checked, originNodeId);
+    case "toggleChecked":
+      return applyToggleBooleanProp(ir, change.targetId, "checked", originNodeId);
+    case "setEnabled":
+      return applySetBooleanProp(ir, change.targetId, "enabled", change.enabled, originNodeId);
+    case "toggleEnabled":
+      return applyToggleBooleanProp(ir, change.targetId, "enabled", originNodeId);
+    case "setDisabled":
+      return applySetBooleanProp(ir, change.targetId, "disabled", change.disabled, originNodeId);
+    case "navigateTo":
+      return applyNavigateTo(ir, change.screen);
+  }
+}
+function applySetVisible(ir, targetId, visible, originNodeId) {
+  const resolvedId = resolveTargetId(ir, targetId, originNodeId);
+  if (!resolvedId) return ir;
+  const nodes = mutateNodeVisible(ir.project.nodes, resolvedId, visible);
+  return { ...ir, project: { ...ir.project, nodes } };
+}
+function applyToggleVisible(ir, targetId, originNodeId) {
+  const resolvedId = resolveTargetId(ir, targetId, originNodeId);
+  if (!resolvedId) return ir;
+  const targetNodeEntry = findNodeByUserDefinedId(ir.project.nodes, resolvedId) || (resolvedId === originNodeId ? findNodeByMetaNodeId(ir.project.nodes, resolvedId) : null);
+  const targetContainerEntry = !targetNodeEntry ? Object.values(ir.project.nodes).find(
+    (n) => n.kind === "container" && (String(n.params.id) === resolvedId || n.meta.nodeId === resolvedId)
+  ) : void 0;
+  let currentVisible = true;
+  if (targetNodeEntry?.kind === "component") {
+    currentVisible = targetNodeEntry.props?.visible !== "false";
+  } else if (targetContainerEntry?.kind === "container") {
+    currentVisible = String(targetContainerEntry.params.visible) !== "false";
+  }
+  const nodes = mutateNodeVisible(ir.project.nodes, resolvedId, !currentVisible);
+  return { ...ir, project: { ...ir.project, nodes } };
+}
+function applySetActiveTab(ir, tabsId, index) {
+  let found = false;
+  const nodes = {};
+  for (const [nodeKey, node] of Object.entries(ir.project.nodes)) {
+    if (node.kind === "container" && node.containerType === "tabs" && node.params.id === tabsId) {
+      nodes[nodeKey] = {
+        ...node,
+        params: { ...node.params, active: index }
+      };
+      found = true;
+    } else if (node.kind === "component" && node.componentType === "Tabs" && node.props.tabsId === tabsId) {
+      nodes[nodeKey] = {
+        ...node,
+        props: { ...node.props, active: index }
+      };
+      found = true;
+    } else {
+      nodes[nodeKey] = node;
+    }
+  }
+  if (!found) {
+    console.warn(`[applyStateChange] setActiveTab: no layout tabs found with id "${tabsId}"`);
+    return ir;
+  }
+  return { ...ir, project: { ...ir.project, nodes } };
+}
+function applySetBooleanProp(ir, targetId, propName, value, originNodeId) {
+  const resolvedId = resolveTargetId(ir, targetId, originNodeId);
+  if (!resolvedId) return ir;
+  const target = findTargetComponentNode(ir.project.nodes, resolvedId);
+  if (!target) {
+    console.warn(`[applyStateChange] ${propName}: no node found with id "${resolvedId}"`);
+    return ir;
+  }
+  const nodes = mutateNodeBooleanProp(ir.project.nodes, resolvedId, propName, value);
+  return { ...ir, project: { ...ir.project, nodes } };
+}
+function applyToggleBooleanProp(ir, targetId, propName, originNodeId) {
+  const resolvedId = resolveTargetId(ir, targetId, originNodeId);
+  if (!resolvedId) return ir;
+  const targetNodeEntry = findTargetComponentNode(ir.project.nodes, resolvedId);
+  const currentValue = targetNodeEntry ? String(targetNodeEntry.props[propName] || "false").toLowerCase() === "true" : false;
+  const nodes = mutateNodeBooleanProp(ir.project.nodes, resolvedId, propName, !currentValue);
+  return { ...ir, project: { ...ir.project, nodes } };
+}
+function applyNavigateTo(ir, screenName) {
+  const updatedProject = {
+    ...ir.project,
+    activeScreen: screenName
+  };
+  return { ...ir, project: updatedProject };
+}
+function resolveTargetId(ir, targetId, originNodeId) {
+  if (targetId === SELF_TARGET) {
+    if (!originNodeId) {
+      console.warn("[applyStateChange] targetId is _self but no originNodeId was provided");
+      return null;
+    }
+    return originNodeId;
+  }
+  return targetId;
+}
+function findNodeByUserDefinedId(nodes, userDefinedId) {
+  for (const node of Object.values(nodes)) {
+    if (node.kind === "component" && node.userDefinedId === userDefinedId) {
+      return node;
+    }
+  }
+  return null;
+}
+function findNodeByMetaNodeId(nodes, metaNodeId) {
+  for (const node of Object.values(nodes)) {
+    if (node.kind === "component" && node.meta.nodeId === metaNodeId) {
+      return node;
+    }
+  }
+  return null;
+}
+function findTargetComponentNode(nodes, targetId) {
+  return findNodeByUserDefinedId(nodes, targetId) || findNodeByMetaNodeId(nodes, targetId);
+}
+function mutateNodeVisible(nodes, targetId, visible) {
+  let found = false;
+  const result = {};
+  for (const [key, node] of Object.entries(nodes)) {
+    if (node.kind === "component") {
+      const matchByUserDefined = node.userDefinedId === targetId;
+      const matchByMetaNodeId = node.meta.nodeId === targetId;
+      if (matchByUserDefined || matchByMetaNodeId) {
+        result[key] = {
+          ...node,
+          props: { ...node.props, visible: visible ? "true" : "false" }
+        };
+        found = true;
+      } else {
+        result[key] = node;
+      }
+    } else if (node.kind === "container") {
+      const matchByParamsId = node.params.id !== void 0 && String(node.params.id) === targetId;
+      const matchByMetaNodeId = node.meta.nodeId === targetId;
+      if (matchByParamsId || matchByMetaNodeId) {
+        result[key] = {
+          ...node,
+          params: { ...node.params, visible: visible ? "true" : "false" }
+        };
+        found = true;
+      } else {
+        result[key] = node;
+      }
+    } else {
+      result[key] = node;
+    }
+  }
+  if (!found) {
+    console.warn(`[applyStateChange] setVisible: no node found with id "${targetId}"`);
+  }
+  return result;
+}
+function mutateNodeBooleanProp(nodes, targetId, propName, value) {
+  let found = false;
+  const result = {};
+  for (const [key, node] of Object.entries(nodes)) {
+    if (node.kind === "component") {
+      const matchByUserDefined = node.userDefinedId === targetId;
+      const matchByMetaNodeId = node.meta.nodeId === targetId;
+      if (matchByUserDefined || matchByMetaNodeId) {
+        result[key] = {
+          ...node,
+          props: { ...node.props, [propName]: value ? "true" : "false" }
+        };
+        found = true;
+      } else {
+        result[key] = node;
+      }
+    } else {
+      result[key] = node;
+    }
+  }
+  if (!found) {
+    console.warn(`[applyStateChange] ${propName}: no node found with id "${targetId}"`);
+  }
+  return result;
+}
+
 // src/shared/spacing.ts
 var SPACING_VALUES = {
   none: 0,
@@ -3078,6 +3982,10 @@ var LayoutEngine = class {
   }
   calculateContainer(node, nodeId, x, y, width, height) {
     if (node.kind !== "container") return;
+    if (node.containerType === "modal") {
+      this.calculateModal(node, nodeId, x, y, width, height);
+      return;
+    }
     const usesOuterPadding = node.containerType !== "card";
     const padding = usesOuterPadding ? this.resolveSpacing(node.style.padding) : 0;
     const innerX = x + padding;
@@ -3089,6 +3997,11 @@ var LayoutEngine = class {
     this.result[nodeId] = { x, y, width, height };
     switch (node.containerType) {
       case "stack":
+      case "tab":
+      case "modal-body":
+        this.calculateStack(node, innerX, innerY, innerWidth, innerHeight);
+        break;
+      case "modal-footer":
         this.calculateStack(node, innerX, innerY, innerWidth, innerHeight);
         break;
       case "grid":
@@ -3103,8 +4016,12 @@ var LayoutEngine = class {
       case "card":
         this.calculateCard(node, innerX, innerY, innerWidth, innerHeight);
         break;
+      case "tabs":
+        this.calculateTabs(node, innerX, innerY, innerWidth);
+        break;
     }
-    if ((isVerticalStack || node.containerType === "card") && node.children.length > 0) {
+    const isHorizontalStack = node.containerType === "stack" && !isVerticalStack;
+    if ((isVerticalStack || isHorizontalStack || node.containerType === "card" || node.containerType === "tabs" || node.containerType === "tab" || node.containerType === "modal-body" || node.containerType === "modal-footer") && node.children.length > 0) {
       let containerMaxY = y;
       node.children.forEach((childRef) => {
         const childPos = this.result[childRef.ref];
@@ -3124,8 +4041,22 @@ var LayoutEngine = class {
     const children = node.children;
     if (direction === "vertical") {
       let currentY = y;
-      children.forEach((childRef, index) => {
+      const flowChildren = children.filter((cr) => {
+        const n = this.nodes[cr.ref];
+        if (n?.kind === "container" && n.containerType === "modal") return false;
+        return this.isNodeVisible(cr.ref);
+      });
+      let flowCount = 0;
+      children.forEach((childRef) => {
         const childNode = this.nodes[childRef.ref];
+        if (childNode?.kind === "container" && childNode.containerType === "modal") {
+          this.calculateNode(childRef.ref, x, currentY, width, 0, "stack");
+          return;
+        }
+        if (!this.isNodeVisible(childRef.ref)) {
+          this.calculateNode(childRef.ref, x, currentY, width, 0, "stack");
+          return;
+        }
         let childHeight = this.getComponentHeight();
         if (childNode?.kind === "component" && childNode.props.height) {
           childHeight = Number(childNode.props.height);
@@ -3136,12 +4067,17 @@ var LayoutEngine = class {
         }
         this.calculateNode(childRef.ref, x, currentY, width, childHeight, "stack");
         currentY += childHeight;
-        if (index < children.length - 1) {
+        flowCount++;
+        if (flowCount < flowChildren.length) {
           currentY += gap;
         }
       });
       let adjustedY = y;
-      children.forEach((childRef, index) => {
+      let adjustedCount = 0;
+      children.forEach((childRef) => {
+        const childNode = this.nodes[childRef.ref];
+        if (childNode?.kind === "container" && childNode.containerType === "modal") return;
+        if (!this.isNodeVisible(childRef.ref)) return;
         const childPos = this.result[childRef.ref];
         if (childPos) {
           const deltaY = adjustedY - childPos.y;
@@ -3150,7 +4086,8 @@ var LayoutEngine = class {
             this.adjustNodeYPositions(childRef.ref, deltaY);
           }
           adjustedY += childPos.height;
-          if (index < children.length - 1) {
+          adjustedCount++;
+          if (adjustedCount < flowChildren.length) {
             adjustedY += gap;
           }
         }
@@ -3160,9 +4097,10 @@ var LayoutEngine = class {
       const crossAlign = node.style.align || "start";
       if (justify === "stretch") {
         let currentX = x;
-        const childWidth = this.calculateChildWidth(children.length, width, gap);
+        const visibleChildren = children.filter((cr) => this.isNodeVisible(cr.ref));
+        const childWidth = this.calculateChildWidth(visibleChildren.length, width, gap);
         let stackHeight = 0;
-        children.forEach((childRef) => {
+        visibleChildren.forEach((childRef) => {
           const childNode = this.nodes[childRef.ref];
           let childHeight = this.getComponentHeight();
           if (childNode?.kind === "component" && childNode.props.height) {
@@ -3175,6 +4113,10 @@ var LayoutEngine = class {
           stackHeight = Math.max(stackHeight, childHeight);
         });
         children.forEach((childRef) => {
+          if (!this.isNodeVisible(childRef.ref)) {
+            this.calculateNode(childRef.ref, currentX, y, 0, 0, "stack");
+            return;
+          }
           this.calculateNode(childRef.ref, currentX, y, childWidth, stackHeight, "stack");
           currentX += childWidth + gap;
         });
@@ -3183,9 +4125,18 @@ var LayoutEngine = class {
         const childHeights = [];
         const explicitHeightFlags = [];
         const flexIndices = /* @__PURE__ */ new Set();
+        const visibleFlags = [];
         let stackHeight = 0;
         children.forEach((childRef, index) => {
           const childNode = this.nodes[childRef.ref];
+          const visible = this.isNodeVisible(childRef.ref);
+          visibleFlags.push(visible);
+          if (!visible) {
+            childWidths.push(0);
+            childHeights.push(0);
+            explicitHeightFlags.push(false);
+            return;
+          }
           const hasExplicitHeight = childNode?.kind === "component" && !!childNode.props.height;
           const hasExplicitWidth = childNode?.kind === "component" && !!childNode.props.width;
           const isBlockButton = childNode?.kind === "component" && childNode.componentType === "Button" && !hasExplicitWidth && this.parseBooleanProp(childNode.props.block, false);
@@ -3203,7 +4154,8 @@ var LayoutEngine = class {
           childHeights.push(this.getComponentHeight());
           explicitHeightFlags.push(hasExplicitHeight);
         });
-        const totalGapWidth = gap * Math.max(0, children.length - 1);
+        const visibleCount = visibleFlags.filter(Boolean).length;
+        const totalGapWidth = gap * Math.max(0, visibleCount - 1);
         if (flexIndices.size > 0) {
           const fixedWidth = childWidths.reduce((sum, w, idx) => {
             return flexIndices.has(idx) ? sum : sum + w;
@@ -3215,6 +4167,7 @@ var LayoutEngine = class {
           });
         }
         children.forEach((childRef, index) => {
+          if (!visibleFlags[index]) return;
           const childNode = this.nodes[childRef.ref];
           const childWidth = childWidths[index];
           let childHeight = this.getComponentHeight();
@@ -3238,14 +4191,18 @@ var LayoutEngine = class {
           startX = x + width - totalContentWidth;
         } else if (justify === "spaceBetween") {
           startX = x;
-          dynamicGap = children.length > 1 ? (width - totalChildWidth) / (children.length - 1) : 0;
+          dynamicGap = visibleCount > 1 ? (width - totalChildWidth) / (visibleCount - 1) : 0;
         } else if (justify === "spaceAround") {
-          const spacing = children.length > 0 ? (width - totalChildWidth) / children.length : 0;
+          const spacing = visibleCount > 0 ? (width - totalChildWidth) / visibleCount : 0;
           startX = x + spacing / 2;
           dynamicGap = spacing;
         }
         let currentX = startX;
         children.forEach((childRef, index) => {
+          if (!visibleFlags[index]) {
+            this.calculateNode(childRef.ref, currentX, y, 0, 0, "stack");
+            return;
+          }
           const childWidth = childWidths[index];
           const childHeight = childHeights[index];
           let childY = y;
@@ -3277,6 +4234,7 @@ var LayoutEngine = class {
       let currentRowMaxHeight = 0;
       const rowHeights = [0];
       node.children.forEach((childRef) => {
+        if (!this.isNodeVisible(childRef.ref)) return;
         const child = this.nodes[childRef.ref];
         let span = 1;
         let childHeight = this.getComponentHeight();
@@ -3311,6 +4269,18 @@ var LayoutEngine = class {
       }
       return totalHeight;
     }
+    if (node.containerType === "tabs") {
+      const activeIndex = Number(node.params.active) || 0;
+      const activeChildRef = node.children[activeIndex] ?? node.children[0];
+      if (!activeChildRef) return totalHeight;
+      const activeChild = this.nodes[activeChildRef.ref];
+      if (activeChild?.kind === "container") {
+        totalHeight += this.calculateContainerHeight(activeChild, availableWidth);
+      } else if (activeChild?.kind === "component") {
+        totalHeight += this.getIntrinsicComponentHeight(activeChild, availableWidth);
+      }
+      return totalHeight;
+    }
     if (node.containerType === "split") {
       const splitGap = this.resolveSpacing(node.style.gap);
       const leftParam = node.params.left;
@@ -3323,6 +4293,7 @@ var LayoutEngine = class {
       const rightWidth = Number.isFinite(rightWidthRaw) && rightWidthRaw > 0 ? rightWidthRaw : availableWidth / 2;
       let maxHeight = 0;
       node.children.forEach((childRef, index) => {
+        if (!this.isNodeVisible(childRef.ref)) return;
         const child = this.nodes[childRef.ref];
         let childHeight = this.getComponentHeight();
         const isFirst = index === 0;
@@ -3350,6 +4321,7 @@ var LayoutEngine = class {
     if (node.containerType === "stack" && direction === "horizontal") {
       let maxHeight = 0;
       node.children.forEach((childRef) => {
+        if (!this.isNodeVisible(childRef.ref)) return;
         const child = this.nodes[childRef.ref];
         let childHeight = this.getComponentHeight();
         if (child?.kind === "component") {
@@ -3366,7 +4338,10 @@ var LayoutEngine = class {
       totalHeight += maxHeight;
       return totalHeight;
     }
-    node.children.forEach((childRef, index) => {
+    const visibleLinear = node.children.filter((cr) => this.isNodeVisible(cr.ref));
+    let linearIndex = 0;
+    node.children.forEach((childRef) => {
+      if (!this.isNodeVisible(childRef.ref)) return;
       const child = this.nodes[childRef.ref];
       let childHeight = this.getComponentHeight();
       if (child?.kind === "component") {
@@ -3379,7 +4354,8 @@ var LayoutEngine = class {
         childHeight = this.calculateContainerHeight(child, availableWidth);
       }
       totalHeight += childHeight;
-      if (index < node.children.length - 1) {
+      linearIndex++;
+      if (linearIndex < visibleLinear.length) {
         totalHeight += gap;
       }
     });
@@ -3392,6 +4368,10 @@ var LayoutEngine = class {
     const colWidth = (width - gap * (columns - 1)) / columns;
     const cellHeights = {};
     node.children.forEach((childRef, cellIndex) => {
+      if (!this.isNodeVisible(childRef.ref)) {
+        cellHeights[cellIndex] = 0;
+        return;
+      }
       const child = this.nodes[childRef.ref];
       let cellHeight = this.getComponentHeight();
       let span = 1;
@@ -3416,6 +4396,11 @@ var LayoutEngine = class {
     const rowHeights = [0];
     const cellPositions = [];
     node.children.forEach((childRef, cellIndex) => {
+      const visible = this.isNodeVisible(childRef.ref);
+      if (!visible) {
+        cellPositions.push({ row: currentRow, col: currentCol, span: 0, visible: false });
+        return;
+      }
       const child = this.nodes[childRef.ref];
       let span = 1;
       if (child?.kind === "container" && child.meta?.source === "cell") {
@@ -3427,13 +4412,17 @@ var LayoutEngine = class {
         currentCol = 0;
         currentRowMaxHeight = 0;
       }
-      cellPositions.push({ row: currentRow, col: currentCol, span });
+      cellPositions.push({ row: currentRow, col: currentCol, span, visible: true });
       currentRowMaxHeight = Math.max(currentRowMaxHeight, cellHeights[cellIndex]);
       currentCol += span;
     });
     rowHeights[currentRow] = currentRowMaxHeight;
     node.children.forEach((childRef, cellIndex) => {
-      const { row, col, span } = cellPositions[cellIndex];
+      const { row, col, span, visible } = cellPositions[cellIndex];
+      if (!visible) {
+        this.calculateNode(childRef.ref, x, y, 0, 0, "grid");
+        return;
+      }
       const cellHeight = rowHeights[row];
       let cellY = y;
       for (let r = 0; r < row; r++) {
@@ -3504,8 +4493,14 @@ var LayoutEngine = class {
     const innerCardWidth = width - cardPadding * 2;
     const children = node.children;
     let currentY = y + cardPadding;
-    children.forEach((childRef, index) => {
+    const flowChildren = children.filter((cr) => this.isNodeVisible(cr.ref));
+    let flowCount = 0;
+    children.forEach((childRef) => {
       const childNode = this.nodes[childRef.ref];
+      if (!this.isNodeVisible(childRef.ref)) {
+        this.calculateNode(childRef.ref, x + cardPadding, currentY, innerCardWidth, 0, "card");
+        return;
+      }
       let childHeight = this.getComponentHeight();
       if (childNode?.kind === "component" && childNode.props.height) {
         childHeight = Number(childNode.props.height);
@@ -3516,11 +4511,63 @@ var LayoutEngine = class {
       }
       this.calculateNode(childRef.ref, x + cardPadding, currentY, innerCardWidth, childHeight, "card");
       currentY += childHeight;
-      if (index < children.length - 1) {
+      flowCount++;
+      if (flowCount < flowChildren.length) {
         currentY += gap;
       }
     });
   }
+  calculateTabs(node, x, y, width) {
+    if (node.kind !== "container") return;
+    const activeIndex = Number(node.params.active) || 0;
+    node.children.forEach((childRef, index) => {
+      if (index === activeIndex) {
+        const tabNode = this.nodes[childRef.ref];
+        let tabHeight = 40;
+        if (tabNode?.kind === "container") {
+          tabHeight = this.calculateContainerHeight(tabNode, width);
+        } else if (tabNode?.kind === "component") {
+          tabHeight = this.getIntrinsicComponentHeight(tabNode, width);
+        }
+        this.calculateNode(childRef.ref, x, y, width, tabHeight, "tabs");
+      }
+    });
+  }
+  calculateModal(node, nodeId, _canvasX, _canvasY, _canvasWidth, _canvasHeight) {
+    if (node.kind !== "container") return;
+    const viewportWidth = this.viewport.width;
+    const size = String(node.params.size || "md");
+    const modalWidths = { sm: 380, md: 520, lg: 720 };
+    const modalWidth = Math.min(modalWidths[size] ?? 520, viewportWidth - 32);
+    const modalX = Math.round((viewportWidth - modalWidth) / 2);
+    const modalY = 64;
+    const hasHeader = node.params.title !== void 0 && node.params.title !== "";
+    const headerHeight = hasHeader ? 48 : 0;
+    let childrenHeight = 0;
+    const innerWidth = modalWidth;
+    let currentY = modalY + headerHeight;
+    node.children.forEach((childRef, index) => {
+      const childNode = this.nodes[childRef.ref];
+      let childHeight = 0;
+      if (childNode?.kind === "container") {
+        childHeight = this.calculateContainerHeight(childNode, innerWidth);
+      } else if (childNode?.kind === "component") {
+        childHeight = this.getIntrinsicComponentHeight(childNode, innerWidth);
+      } else {
+        childHeight = this.getComponentHeight();
+      }
+      this.calculateNode(childRef.ref, modalX, currentY, innerWidth, childHeight, "modal");
+      const resolvedChildHeight = this.result[childRef.ref]?.height ?? childHeight;
+      currentY += resolvedChildHeight;
+      childrenHeight += resolvedChildHeight;
+      if (index < node.children.length - 1) {
+        currentY += 8;
+        childrenHeight += 8;
+      }
+    });
+    const modalHeight = headerHeight + childrenHeight;
+    this.result[nodeId] = { x: modalX, y: modalY, width: modalWidth, height: modalHeight };
+  }
   /**
    * Calculate layout for an instance node.
    * The instance is a transparent wrapper — its bounding box equals the
@@ -3751,8 +4798,7 @@ var LayoutEngine = class {
       return Math.max(this.getComponentHeight(), wrappedHeight);
     }
     if (node.componentType === "SidebarMenu") {
-      const itemsStr = String(node.props.items || "Item 1,Item 2,Item 3");
-      const items = itemsStr.split(",").map((s) => s.trim()).filter(Boolean);
+      const items = toStringArray(node.props.items);
       const itemCount = items.length > 0 ? items.length : 3;
       const itemHeight = 40;
       return Math.max(this.getComponentHeight(), itemCount * itemHeight);
@@ -3763,7 +4809,7 @@ var LayoutEngine = class {
     if (node.componentType === "Stat") return 120;
     if (node.componentType === "Chart") return 250;
     if (node.componentType === "List") {
-      const itemsFromProps = String(node.props.items || "").split(",").map((item) => item.trim()).filter(Boolean);
+      const itemsFromProps = toStringArray(node.props.items);
       const parsedItemsMock = Number(node.props.itemsMock ?? 4);
       const fallbackCount = Number.isFinite(parsedItemsMock) ? Math.max(0, Math.floor(parsedItemsMock)) : 4;
       const itemCount = itemsFromProps.length > 0 ? itemsFromProps.length : fallbackCount;
@@ -3941,6 +4987,17 @@ var LayoutEngine = class {
     }
     return width;
   }
+  /**
+   * Returns false only when the node has an explicit `visible: 'false'` param/prop.
+   * Missing or any other value is treated as visible.
+   */
+  isNodeVisible(nodeId) {
+    const node = this.nodes[nodeId];
+    if (!node) return true;
+    if (node.kind === "component") return String(node.props.visible) !== "false";
+    if (node.kind === "container") return String(node.params.visible) !== "false";
+    return true;
+  }
   parseBooleanProp(value, fallback = false) {
     if (typeof value === "boolean") return value;
     if (typeof value === "string") {
@@ -4031,7 +5088,7 @@ var MockDataGenerator = class {
     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);
+        values = toStringArray(rawValues);
       } else if (Array.isArray(rawValues)) {
         values = rawValues.map((v) => typeof v === "string" ? v.trim() : "").filter((v) => v.length > 0);
       }
@@ -4123,7 +5180,7 @@ var MockDataGenerator = class {
    * columns: "id,name,status,amount"
    */
   static generateMockRow(columns, rowIndex, random = false) {
-    const columnNames = columns.split(",").map((c) => c.trim());
+    const columnNames = toStringArray(columns);
     const row = {};
     columnNames.forEach((col) => {
       const mockType = this.inferMockTypeFromColumn(col);
@@ -5175,6 +6232,9 @@ var SVGRenderer = class {
     if (!node || !pos) return;
     this.renderedNodeIds.add(nodeId);
     if (node.kind === "container") {
+      if (String(node.params.visible) === "false") {
+        return;
+      }
       const containerGroup = [];
       const hasNodeId = node.meta?.nodeId;
       if (hasNodeId) {
@@ -5195,6 +6255,12 @@ var SVGRenderer = class {
       if (node.containerType === "split") {
         this.renderSplitDecoration(node, pos, containerGroup);
       }
+      if (node.containerType === "modal") {
+        this.renderModalDecoration(node, pos, containerGroup);
+      }
+      if (node.containerType === "modal-footer") {
+        this.renderModalFooterDecoration(pos, containerGroup);
+      }
       const isCellContainer = node.meta?.source === "cell";
       if (node.children.length === 0 && this.options.showDiagnostics && !isCellContainer) {
         containerGroup.push(this.renderEmptyContainerDiagnostic(pos, node.containerType));
@@ -5221,6 +6287,9 @@ var SVGRenderer = class {
       }
       output.push(...instanceGroup);
     } else if (node.kind === "component") {
+      if (String(node.props.visible) === "false") {
+        return;
+      }
       const componentSvg = this.renderComponent(node, pos);
       if (componentSvg) {
         output.push(componentSvg);
@@ -5282,8 +6351,6 @@ var SVGRenderer = class {
         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 "Stat":
@@ -5726,8 +6793,8 @@ var SVGRenderer = class {
   }
   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()).filter(Boolean);
+    const parsedColumns = toStringArray(node.props.columns);
+    const columns = parsedColumns.length > 0 ? parsedColumns : ["Col1", "Col2", "Col3"];
     const rowCount = Number(node.props.rows || node.props.rowsMock || 5);
     const mockStr = String(node.props.mock || "");
     const random = this.parseBooleanProp(node.props.random, false);
@@ -5735,7 +6802,7 @@ var SVGRenderer = class {
     const parsedPageCount = Number(node.props.pages || 5);
     const pageCount = Number.isFinite(parsedPageCount) && parsedPageCount > 0 ? Math.floor(parsedPageCount) : 5;
     const paginationAlign = String(node.props.paginationAlign || "right");
-    const actions = String(node.props.actions || "").split(",").map((value) => value.trim()).filter(Boolean);
+    const actions = toStringArray(node.props.actions);
     const hasActions = actions.length > 0;
     const caption = String(node.props.caption || "").trim();
     const hasCaption = caption.length > 0;
@@ -5748,7 +6815,7 @@ var SVGRenderer = class {
     const rawCaptionAlign = String(node.props.captionAlign || "");
     const captionAlign = rawCaptionAlign === "left" || rawCaptionAlign === "center" || rawCaptionAlign === "right" ? rawCaptionAlign : paginationAlign === "left" ? "right" : "left";
     const sameFooterAlign = hasCaption && pagination && captionAlign === paginationAlign;
-    const mockTypes = mockStr ? mockStr.split(",").map((m) => m.trim()).filter(Boolean) : [];
+    const mockTypes = toStringArray(mockStr);
     const safeColumns = columns.length > 0 ? columns : ["Column"];
     while (mockTypes.length < safeColumns.length) {
       const inferred = MockDataGenerator.inferMockTypeFromColumn(safeColumns[mockTypes.length] || "item");
@@ -5848,6 +6915,13 @@ var SVGRenderer = class {
           currentX += buttonSize + buttonGap;
         });
       }
+      const rowEventAttrs = this.getScopedEventAttrs(node, "onRowClick", { index: rowIdx });
+      if (rowEventAttrs) {
+        svg += `
+    <rect x="${pos.x}" y="${rowY}"
+          width="${pos.width}" height="${rowHeight}"
+          fill="transparent" stroke="none" pointer-events="all"${rowEventAttrs}/>`;
+      }
     });
     const footerTop = headerY + headerHeight + mockRows.length * rowHeight + 16;
     if (pagination) {
@@ -6237,14 +7311,15 @@ var SVGRenderer = class {
     const label = String(node.props.label || "Checkbox");
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
     const disabled = this.parseBooleanProp(node.props.disabled, false);
+    const clickable = String(node.props.clickable ?? "true") !== "false";
     const controlColor = this.resolveControlColor();
     const checkboxSize = 18;
     const checkboxY = pos.y + pos.height / 2 - checkboxSize / 2;
-    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
-    <rect x="${pos.x}" y="${checkboxY}" 
-          width="${checkboxSize}" height="${checkboxSize}" 
-          rx="4" 
-          fill="${checked ? controlColor : this.renderTheme.cardBg}" 
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}${!clickable ? ' data-clickable="false"' : ""}>
+    <rect x="${pos.x}" y="${checkboxY}"
+          width="${checkboxSize}" height="${checkboxSize}"
+          rx="4"
+          fill="${checked ? controlColor : this.renderTheme.cardBg}"
           stroke="${this.renderTheme.border}" 
           stroke-width="1"/>
     ${checked ? `<text x="${pos.x + checkboxSize / 2}" y="${checkboxY + 14}" 
@@ -6262,13 +7337,14 @@ var SVGRenderer = class {
     const label = String(node.props.label || "Radio");
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
     const disabled = this.parseBooleanProp(node.props.disabled, false);
+    const clickable = String(node.props.clickable ?? "true") !== "false";
     const controlColor = this.resolveControlColor();
     const radioSize = 16;
     const radioY = pos.y + pos.height / 2 - radioSize / 2;
-    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
-    <circle cx="${pos.x + radioSize / 2}" cy="${radioY + radioSize / 2}" 
-            r="${radioSize / 2}" 
-            fill="${this.renderTheme.cardBg}" 
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}${!clickable ? ' data-clickable="false"' : ""}>
+    <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}" 
@@ -6284,12 +7360,13 @@ var SVGRenderer = class {
     const label = String(node.props.label || "Toggle");
     const enabled = String(node.props.enabled || "false").toLowerCase() === "true";
     const disabled = this.parseBooleanProp(node.props.disabled, false);
+    const clickable = String(node.props.clickable ?? "true") !== "false";
     const controlColor = this.resolveControlColor();
     const toggleWidth = 40;
     const toggleHeight = 20;
     const toggleY = pos.y + pos.height / 2 - toggleHeight / 2;
-    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}>
-    <rect x="${pos.x}" y="${toggleY}" 
+    return `<g${this.getDataNodeId(node)}${disabled ? ' opacity="0.45"' : ""}${!clickable ? ' data-clickable="false"' : ""}>
+    <rect x="${pos.x}" y="${toggleY}"
           width="${toggleWidth}" height="${toggleHeight}" 
           rx="10" 
           fill="${enabled ? controlColor : this.renderTheme.border}" 
@@ -6308,12 +7385,9 @@ var SVGRenderer = class {
   // ============================================================================
   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 {
+    let items = toStringArray(node.props.items);
+    if (items.length === 0) {
       const itemCount = Number(node.props.itemsMock || 6);
       items = MockDataGenerator.generateMockList("name", itemCount);
     }
@@ -6352,9 +7426,9 @@ var SVGRenderer = class {
     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 activeProp = node.props.active ?? 0;
+    const parsedTabs = toStringArray(node.props.items);
+    const tabs = parsedTabs.length > 0 ? parsedTabs : ["Tab 1", "Tab 2", "Tab 3"];
+    const activeProp = node.props.active ?? node.props.initialActive ?? 0;
     const activeIndex = Number.isFinite(Number(activeProp)) ? Math.max(0, Math.floor(Number(activeProp))) : 0;
     const variant = String(node.props.variant || "default");
     const accentColor = variant === "default" ? this.resolveAccentColor() : this.resolveVariantColor(variant, this.resolveAccentColor());
@@ -6364,8 +7438,7 @@ var SVGRenderer = class {
     const tabHeight = pos.height > 0 ? pos.height : sizeMap[String(node.props.size || "md")] ?? 44;
     const fontSize = 13;
     const textY = pos.y + Math.round(tabHeight / 2) + Math.round(fontSize * 0.4);
-    const iconsStr = String(node.props.icons || "");
-    const iconList = iconsStr ? iconsStr.split(",").map((s) => s.trim()) : [];
+    const iconList = toStringArray(node.props.icons);
     const isFlat = this.parseBooleanProp(node.props.flat, false);
     const showBorder = this.parseBooleanProp(node.props.border, true);
     const tabWidth = pos.width / tabs.length;
@@ -6469,6 +7542,13 @@ var SVGRenderer = class {
           text-anchor="middle">${this.escapeXml(tab)}</text>`;
         }
       }
+      const tabsTriggerAttrs = this.getTabsTriggerAttrs(node, i);
+      if (tabsTriggerAttrs) {
+        svg += `
+    <rect x="${tabX}" y="${pos.y}"
+          width="${tabWidth}" height="${tabHeight}"
+          fill="transparent" stroke="none" pointer-events="all"${tabsTriggerAttrs}/>`;
+      }
     });
     const contentY = pos.y + tabHeight;
     const contentH = pos.height - tabHeight;
@@ -6582,66 +7662,51 @@ var SVGRenderer = class {
           text-anchor="middle">${this.escapeXml(text)}</text>
   </g>`;
   }
-  renderModal(node, pos) {
-    const visible = this.parseBooleanProp(node.props.visible, true);
-    if (!visible) {
-      return "";
-    }
-    const title = String(node.props.title || "Modal");
+  renderModalDecoration(node, pos, output) {
+    if (node.kind !== "container") return;
+    const canvasWidth = this.options.width;
+    const canvasHeight = Math.max(this.options.height, this.calculateContentHeight());
     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${this.getDataNodeId(node)}>
-    <!-- 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="Arial, Helvetica, sans-serif" 
-          font-size="16" 
-          font-weight="600" 
-          fill="${this.renderTheme.text}">${this.escapeXml(title)}</text>
-    
-    <!-- Close button -->
-      <text x="${modalX + pos.width - 16}" y="${modalY + padding + 12}" 
-          font-family="Arial, Helvetica, sans-serif" 
-          font-size="18" 
-          fill="${this.renderTheme.textMuted}">\u2715</text>
-    
-    <!-- Content placeholder -->
-      <text x="${modalX + pos.width / 2}" y="${modalY + headerHeight + (pos.height - headerHeight) / 2}" 
-          font-family="Arial, Helvetica, sans-serif" 
-          font-size="13" 
-          fill="${this.renderTheme.textMuted}" 
-          text-anchor="middle">Modal content</text>
-  </g>`;
+    const hasTitle = node.params.title !== void 0 && node.params.title !== "";
+    const closable = node.params.closable !== "false" && node.params.closable !== 0;
+    const title = hasTitle ? String(node.params.title) : "";
+    output.push(
+      `<rect x="0" y="0" width="${canvasWidth}" height="${canvasHeight}" fill="black" opacity="0.28" pointer-events="none"/>`
+    );
+    output.push(
+      `<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 (hasTitle) {
+      output.push(
+        `<line x1="${pos.x}" y1="${pos.y + headerHeight}" x2="${pos.x + pos.width}" y2="${pos.y + headerHeight}" stroke="${this.renderTheme.border}" stroke-width="1"/>`
+      );
+      output.push(
+        `<text x="${pos.x + padding}" y="${pos.y + padding + 15}" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="600" fill="${this.renderTheme.text}">${this.escapeXml(title)}</text>`
+      );
+      if (closable) {
+        const events = node.events?.find((e) => e.event === "onClose");
+        const closeEventAttr = events ? this.serializeEventHandler(events) : "";
+        const closeX = pos.x + pos.width - padding - 14;
+        const closeY = pos.y + padding + 14;
+        output.push(
+          `<rect x="${closeX - 12}" y="${closeY - 12}" width="24" height="24" rx="4" fill="transparent" stroke="none" pointer-events="all"${closeEventAttr}/>`,
+          `<text x="${closeX}" y="${closeY}" font-family="Arial, Helvetica, sans-serif" font-size="16" fill="${this.renderTheme.textMuted}" text-anchor="middle" dominant-baseline="central" pointer-events="none">\u2715</text>`
+        );
+      }
+    }
+  }
+  renderModalFooterDecoration(pos, output) {
+    output.push(
+      `<line x1="${pos.x}" y1="${pos.y}" x2="${pos.x + pos.width}" y2="${pos.y}" stroke="${this.renderTheme.border}" stroke-width="1"/>`
+    );
   }
   renderList(node, pos) {
     const title = String(node.props.title || "");
-    const itemsStr = String(node.props.items || "");
     const mockType = String(node.props.mock || "").trim();
     const random = this.parseBooleanProp(node.props.random, false);
-    let items = [];
-    if (itemsStr) {
-      items = itemsStr.split(",").map((i) => i.trim()).filter(Boolean);
-    } else {
+    let items = toStringArray(node.props.items);
+    if (items.length === 0) {
       const parsedItemsMock = Number(node.props.itemsMock ?? 4);
       const itemCount = Number.isFinite(parsedItemsMock) ? Math.max(0, Math.floor(parsedItemsMock)) : 4;
       const resolvedMockType = mockType || "name";
@@ -6670,6 +7735,7 @@ var SVGRenderer = class {
     items.forEach((item, i) => {
       const itemY = pos.y + titleHeight + i * itemHeight;
       if (itemY + itemHeight <= pos.y + pos.height) {
+        const itemEventAttrs = this.getScopedEventAttrs(node, "onItemClick", { index: i });
         svg += `
     <line x1="${pos.x}" y1="${itemY + itemHeight}" 
           x2="${pos.x + pos.width}" y2="${itemY + itemHeight}" 
@@ -6678,7 +7744,10 @@ var SVGRenderer = class {
     <text x="${pos.x + padding}" y="${itemY + 24}" 
           font-family="Arial, Helvetica, sans-serif" 
           font-size="13" 
-          fill="${this.renderTheme.text}">${this.escapeXml(item)}</text>`;
+          fill="${this.renderTheme.text}">${this.escapeXml(item)}</text>
+    ${itemEventAttrs ? `<rect x="${pos.x}" y="${itemY}"
+          width="${pos.width}" height="${itemHeight}"
+          fill="transparent" stroke="none" pointer-events="all"${itemEventAttrs}/>` : ""}`;
       }
     });
     svg += "\n  </g>";
@@ -6912,8 +7981,8 @@ var SVGRenderer = class {
     return svg;
   }
   renderBreadcrumbs(node, pos) {
-    const itemsStr = String(node.props.items || "Home");
-    const items = itemsStr.split(",").map((s) => s.trim());
+    const parsedBreadcrumbs = toStringArray(node.props.items);
+    const items = parsedBreadcrumbs.length > 0 ? parsedBreadcrumbs : ["Home"];
     const separator = String(node.props.separator || "/");
     const fontSize = 12;
     const separatorWidth = 20;
@@ -6945,10 +8014,9 @@ var SVGRenderer = class {
     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 parsedMenuItems = toStringArray(node.props.items);
+    const items = parsedMenuItems.length > 0 ? parsedMenuItems : ["Item 1", "Item 2", "Item 3"];
+    const icons = toStringArray(node.props.icons);
     const itemHeight = 40;
     const fontSize = 14;
     const activeIndex = Number(node.props.active || 0);
@@ -6993,6 +8061,13 @@ var SVGRenderer = class {
           font-size="${fontSize}"
           font-weight="${fontWeight}"
           fill="${textColor}">${this.escapeXml(item)}</text>`;
+      const itemEventAttrs = this.getScopedEventAttrs(node, "onItemsClick", { index });
+      if (itemEventAttrs) {
+        svg += `
+    <rect x="${pos.x}" y="${itemY}"
+          width="${pos.width}" height="${itemHeight}"
+          fill="transparent" stroke="none" pointer-events="all"${itemEventAttrs}/>`;
+      }
     });
     svg += "\n  </g>";
     return svg;
@@ -7343,7 +8418,7 @@ var SVGRenderer = class {
       userBadge = { x, y, width, height, label: userLabel };
       rightCursor = x - 8;
     }
-    const actionLabels = actions.split(",").map((a) => a.trim()).filter(Boolean);
+    const actionLabels = toStringArray(actions);
     const actionHeight = 32;
     const actionY = pos.y + (pos.height - actionHeight) / 2;
     const actionGap = 8;
@@ -7429,11 +8504,99 @@ var SVGRenderer = class {
     return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
   }
   /**
-   * Get data-node-id attribute string for SVG elements
-   * Enables bidirectional selection between code and canvas
+   * Get data-node-id and event data attributes for SVG elements.
+   * Enables bidirectional selection between code and canvas (data-node-id)
+   * and play test interactivity (data-event-*, data-user-id, data-tabs-id).
    */
   getDataNodeId(node) {
-    return node.meta.nodeId ? ` data-node-id="${node.meta.nodeId}"` : "";
+    let attrs = "";
+    if (node.meta.nodeId) {
+      attrs += ` data-node-id="${node.meta.nodeId}"`;
+    }
+    if (node.kind === "component") {
+      if (node.userDefinedId) {
+        attrs += ` data-user-id="${node.userDefinedId}"`;
+      }
+      if (node.events && node.events.length > 0) {
+        for (const handler of node.events) {
+          if (!this.isScopedEvent(handler.event)) {
+            attrs += this.serializeEventHandler(handler);
+          }
+        }
+      }
+    }
+    if (node.kind === "container") {
+      if (node.containerType === "tabs" && node.params.id) {
+        attrs += ` data-tabs-id="${node.params.id}"`;
+        if (node.params.active !== void 0) {
+          attrs += ` data-tabs-active="${node.params.active}"`;
+        }
+      }
+      if (node.events && node.events.length > 0) {
+        for (const handler of node.events) {
+          if (node.containerType === "modal" && handler.event === "onClose") continue;
+          attrs += this.serializeEventHandler(handler);
+        }
+      }
+    }
+    return attrs;
+  }
+  isScopedEvent(event) {
+    return event === "onClose" || event === "onItemClick" || event === "onRowClick" || event === "onItemsClick";
+  }
+  getScopedEventAttrs(node, eventName, options = {}) {
+    const handler = node.events?.find((event) => event.event === eventName);
+    if (!handler) return "";
+    let attrs = "";
+    if (node.meta.nodeId) {
+      attrs += ` data-node-id="${node.meta.nodeId}"`;
+    }
+    if (node.userDefinedId) {
+      attrs += ` data-user-id="${node.userDefinedId}"`;
+    }
+    attrs += this.serializeEventHandler(handler);
+    if (options.index !== void 0) {
+      attrs += ` data-event-index="${options.index}"`;
+    }
+    return attrs;
+  }
+  getTabsTriggerAttrs(node, index) {
+    const tabsId = String(node.props.tabsId || "").trim();
+    if (!tabsId) return "";
+    let attrs = "";
+    if (node.meta.nodeId) {
+      attrs += ` data-node-id="${node.meta.nodeId}"`;
+    }
+    attrs += ` data-tabs-id="${tabsId}" data-tabs-trigger-index="${index}"`;
+    return attrs;
+  }
+  serializeEventHandler(handler) {
+    const attrName = this.eventNameToDataAttr(handler.event);
+    const value = handler.actions.map((a) => this.serializeEventAction(a)).join("|");
+    return ` data-event-${attrName}="${value}"`;
+  }
+  eventNameToDataAttr(event) {
+    return event.replace(/^on/, "").toLowerCase();
+  }
+  serializeEventAction(action) {
+    switch (action.type) {
+      case "navigate":
+        return `navigate:${action.screen}`;
+      case "show":
+        return `show:${action.targetId}`;
+      case "hide":
+        return `hide:${action.targetId}`;
+      case "toggle":
+        return `toggle:${action.targetId}`;
+      case "enable":
+        return `enable:${action.targetId}`;
+      case "disable":
+        return `disable:${action.targetId}`;
+      case "setTab":
+        return `setTab:${action.tabsId}:${action.index}`;
+      case "navigateItems":
+        return action.screens.map((s) => `navigate:${s}`).join(",");
+    }
   }
 };
 function renderToSVG(ir, layout, options) {
@@ -7523,8 +8686,7 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
    * Render breadcrumbs as skeleton blocks: <rect> / <rect> / <rect accent>
    */
   renderBreadcrumbs(node, pos) {
-    const itemsStr = String(node.props.items || "Home");
-    const items = itemsStr.split(",").map((s) => s.trim()).filter(Boolean);
+    const items = toStringArray(node.props.items || "Home");
     const separator = String(node.props.separator || "/");
     const blockColor = this.renderTheme.border;
     const charWidth = 6.2;
@@ -7845,10 +9007,9 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
    */
   renderTable(node, pos) {
     const title = String(node.props.title || "");
-    const columnsStr = String(node.props.columns || "Col1,Col2,Col3");
-    const columns = columnsStr.split(",").map((c) => c.trim()).filter(Boolean);
+    const columns = toStringArray(node.props.columns || "Col1,Col2,Col3");
     const rowCount = Number(node.props.rows || node.props.rowsMock || 5);
-    const actions = String(node.props.actions || "").split(",").map((value) => value.trim()).filter(Boolean);
+    const actions = toStringArray(node.props.actions);
     const hasActions = actions.length > 0;
     const pagination = this.parseBooleanProp(node.props.pagination, false);
     const parsedPageCount = Number(node.props.pages || 5);
@@ -8134,7 +9295,7 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
     const itemsStr = String(node.props.items || "");
     let items = [];
     if (itemsStr) {
-      items = itemsStr.split(",").map((i) => i.trim());
+      items = toStringArray(itemsStr);
     } else {
       const itemCount = Number(node.props.itemsMock || 6);
       items = Array(itemCount).fill("Item");
@@ -8171,8 +9332,7 @@ var SkeletonSVGRenderer = class extends SVGRenderer {
    * Render SidebarMenu with gray blocks instead of text and no icons
    */
   renderSidebarMenu(node, pos) {
-    const itemsStr = String(node.props.items || "Item 1,Item 2,Item 3");
-    const items = itemsStr.split(",").map((s) => s.trim());
+    const items = toStringArray(node.props.items || "Item 1,Item 2,Item 3");
     const itemHeight = 40;
     const activeIndex = Number(node.props.active || 0);
     const accentColor = this.resolveAccentColor();
@@ -9020,7 +10180,8 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const title = String(node.props.title || "Sidebar");
     const itemsStr = String(node.props.items || "");
     const activeItem = String(node.props.active || "");
-    const items = itemsStr ? itemsStr.split(",").map((i) => i.trim()) : ["Item 1", "Item 2", "Item 3"];
+    const parsed = toStringArray(itemsStr);
+    const items = parsed.length ? parsed : ["Item 1", "Item 2", "Item 3"];
     const itemHeight = 40;
     const padding = 16;
     const titleHeight = 40;
@@ -9063,7 +10224,8 @@ var SketchSVGRenderer = class extends SVGRenderer {
    */
   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 parsedTabs = toStringArray(itemsStr);
+    const tabs = parsedTabs.length ? parsedTabs : ["Tab 1", "Tab 2", "Tab 3"];
     const activeProp = node.props.active ?? 0;
     const activeIndex = Number.isFinite(Number(activeProp)) ? Math.max(0, Math.floor(Number(activeProp))) : 0;
     const variant = String(node.props.variant || "default");
@@ -9075,7 +10237,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const fontSize = 13;
     const textY = pos.y + Math.round(tabHeight / 2) + Math.round(fontSize * 0.4);
     const iconsStr = String(node.props.icons || "");
-    const iconList = iconsStr ? iconsStr.split(",").map((s) => s.trim()) : [];
+    const iconList = toStringArray(iconsStr);
     const isFlat = this.parseBooleanProp(node.props.flat, false);
     const showBorder = this.parseBooleanProp(node.props.border, true);
     const tabWidth = pos.width / tabs.length;
@@ -9240,7 +10402,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
     <!-- Modal backdrop -->
       <rect x="0" y="0"
         width="${this.options.width}" height="${overlayHeight}"
-        fill="black" opacity="0.28"/>
+        fill="black" opacity="0.28" pointer-events="none"/>
 
     <!-- Modal box -->
       <rect x="${modalX}" y="${modalY}"
@@ -9268,7 +10430,8 @@ var SketchSVGRenderer = class extends SVGRenderer {
       <text x="${modalX + pos.width - 16}" y="${modalY + padding + 12}"
           font-family="${this.fontFamily}"
           font-size="18"
-          fill="${this.renderTheme.textMuted}">\u2715</text>
+          fill="${this.renderTheme.textMuted}"
+          pointer-events="none">\u2715</text>
 
     <!-- Content placeholder -->
       <text x="${modalX + pos.width / 2}" y="${modalY + headerHeight + (pos.height - headerHeight) / 2}"
@@ -9286,10 +10449,8 @@ var SketchSVGRenderer = class extends SVGRenderer {
     const itemsStr = String(node.props.items || "");
     const mockType = String(node.props.mock || "").trim();
     const random = this.parseBooleanProp(node.props.random, false);
-    let items = [];
-    if (itemsStr) {
-      items = itemsStr.split(",").map((i) => i.trim()).filter(Boolean);
-    } else {
+    let items = toStringArray(itemsStr);
+    if (!items.length) {
       const parsedItemsMock = Number(node.props.itemsMock ?? 4);
       const itemCount = Number.isFinite(parsedItemsMock) ? Math.max(0, Math.floor(parsedItemsMock)) : 4;
       const resolvedMockType = mockType || "name";
@@ -9503,7 +10664,7 @@ var SketchSVGRenderer = class extends SVGRenderer {
    */
   renderBreadcrumbs(node, pos) {
     const itemsStr = String(node.props.items || "Home");
-    const items = itemsStr.split(",").map((s) => s.trim());
+    const items = toStringArray(itemsStr);
     const separator = String(node.props.separator || "/");
     const fontSize = 12;
     const separatorWidth = 20;
@@ -9540,8 +10701,8 @@ var SketchSVGRenderer = class extends SVGRenderer {
   renderSidebarMenu(node, pos) {
     const itemsStr = String(node.props.items || "Item 1,Item 2,Item 3");
     const iconsStr = String(node.props.icons || "");
-    const items = itemsStr.split(",").map((s) => s.trim());
-    const icons = iconsStr ? iconsStr.split(",").map((s) => s.trim()) : [];
+    const items = toStringArray(itemsStr);
+    const icons = toStringArray(iconsStr);
     const itemHeight = 40;
     const fontSize = 14;
     const activeIndex = Number(node.props.active || 0);
@@ -9862,11 +11023,13 @@ var version = "0.0.1";
   DEVICE_PRESETS,
   IRGenerator,
   LayoutEngine,
+  SELF_TARGET,
   SVGRenderer,
   SkeletonSVGRenderer,
   SketchSVGRenderer,
   SourceMapBuilder,
   SourceMapResolver,
+  applyStateChange,
   buildSVG,
   calculateLayout,
   createSVGElement,