@wireweave/core 1.4.1 → 1.5.0

package/dist/index.cjs

@@ -8352,6 +8352,14 @@ ${children}
 }
 
 // src/renderer/html/renderers/container.ts
+function buildInteractiveAttrs(node) {
+  return {
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
+  };
+}
 function renderCard(node, ctx) {
   const hasExplicitWidth = node.w !== void 0;
   const classes = ctx.buildClassString([
@@ -8362,10 +8370,12 @@ function renderCard(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const interactiveAttrs = buildInteractiveAttrs(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   const title = node.title ? `<h3 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h3>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<div class="${classes}"${styleAttr}>
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr}>
 ${title}${children}
 </div>`;
 }
@@ -8376,10 +8386,11 @@ function renderModal(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const idAttr = node.id ? ` id="${ctx.escapeHtml(node.id)}"` : "";
   const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<div class="${ctx.prefix}-modal-backdrop">
+  return `<div class="${ctx.prefix}-modal-backdrop"${idAttr}>
   <div class="${classes}"${styleAttr} role="dialog" aria-modal="true">
 ${title}${children}
   </div>
@@ -8394,10 +8405,11 @@ function renderDrawer(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const idAttr = node.id ? ` id="${ctx.escapeHtml(node.id)}"` : "";
   const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<aside class="${classes}"${styleAttr}>
+  return `<aside class="${classes}"${styleAttr}${idAttr}>
 ${title}${children}
 </aside>`;
 }
@@ -8454,7 +8466,12 @@ function renderLink(node, ctx) {
   const styleAttr = styles ? ` style="${styles}"` : "";
   const attrs = {
     class: classes,
-    href: node.href || "#"
+    href: node.href || node.navigate || "#",
+    // Interactive attributes
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
   };
   if (node.external) {
     attrs.target = "_blank";
@@ -54882,7 +54899,12 @@ function renderButton(node, ctx) {
   const styleAttr = styles ? ` style="${styles}"` : "";
   const attrs = {
     class: classes,
-    disabled: node.disabled
+    disabled: node.disabled,
+    // Interactive attributes
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
   };
   let icon = "";
   if (node.icon) {
@@ -55124,6 +55146,14 @@ ${slider}`;
 }
 
 // src/renderer/html/renderers/display.ts
+function buildInteractiveAttrs2(node) {
+  return {
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
+  };
+}
 function renderImage(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-image`,
@@ -55135,14 +55165,17 @@ function renderImage(node, ctx) {
     const attrs = {
       class: classes,
       src: node.src,
-      alt: node.alt || "Image"
+      alt: node.alt || "Image",
+      ...buildInteractiveAttrs2(node)
     };
     const imgStyleAttr = styles ? `; ${styles}` : "";
     return `<img${ctx.buildAttrsString(attrs)}${imgStyleAttr ? ` style="${imgStyleAttr.slice(2)}"` : ""} />`;
   }
   const label = node.alt || "Image";
   const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
-  return `<div class="${classes}"${styleAttr} role="img" aria-label="${ctx.escapeHtml(label)}">${icon}<span>${ctx.escapeHtml(label)}</span></div>`;
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(label)}">${icon}<span>${ctx.escapeHtml(label)}</span></div>`;
 }
 function renderPlaceholder(node, ctx) {
   const classes = ctx.buildClassString([
@@ -55174,9 +55207,13 @@ function renderAvatar(node, ctx) {
   const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
   const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   const initials = node.name ? node.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
-  return `<div class="${classes}"${styleAttr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
 }
 function renderBadge(node, ctx) {
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   if (node.icon) {
     const iconData = getIconData(node.icon);
     const classes2 = ctx.buildClassString([
@@ -55189,9 +55226,9 @@ function renderBadge(node, ctx) {
     const styleAttr2 = styles2 ? ` style="${styles2}"` : "";
     if (iconData) {
       const svg = renderIconSvg(iconData, 24, 2, `${ctx.prefix}-icon`);
-      return `<span class="${classes2}"${styleAttr2} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
+      return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
     }
-    return `<span class="${classes2}"${styleAttr2} aria-label="unknown icon">?</span>`;
+    return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="unknown icon">?</span>`;
   }
   const isDot = !node.content || node.content.trim() === "";
   const classes = ctx.buildClassString([
@@ -55203,10 +55240,12 @@ function renderBadge(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
-  return `<span class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</span>`;
+  return `<span class="${classes}"${styleAttr}${interactiveAttrStr}>${ctx.escapeHtml(node.content)}</span>`;
 }
 function renderIcon(node, ctx) {
   const iconData = getIconData(node.name);
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   const sizeResolved = resolveSizeValue(node.size, "icon", ctx.prefix);
   const wrapperClasses = ctx.buildClassString([
     `${ctx.prefix}-icon-wrapper`,
@@ -55222,7 +55261,7 @@ function renderIcon(node, ctx) {
     const svgStyleAttr = sizeResolved.style ? ` style="${sizeResolved.style}"` : "";
     const svg = renderIconSvg(iconData, 24, 2, iconClasses, svgStyleAttr);
     const wrapperStyleAttr2 = baseStyles ? ` style="${baseStyles}"` : "";
-    return `<span class="${wrapperClasses}"${wrapperStyleAttr2} aria-hidden="true">${svg}</span>`;
+    return `<span class="${wrapperClasses}"${wrapperStyleAttr2}${interactiveAttrStr} aria-hidden="true">${svg}</span>`;
   }
   const size = sizeResolved.style?.match(/(\d+)px/)?.[1] || "24";
   const sizeNum = parseInt(size, 10);
@@ -55231,7 +55270,7 @@ function renderIcon(node, ctx) {
       <text x="12" y="16" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.7">?</text>
     </svg>`;
   const wrapperStyleAttr = baseStyles ? ` style="${baseStyles}"` : "";
-  return `<span class="${wrapperClasses}"${wrapperStyleAttr} aria-hidden="true" title="Unknown icon: ${ctx.escapeHtml(node.name)}">${placeholderSvg}</span>`;
+  return `<span class="${wrapperClasses}"${wrapperStyleAttr}${interactiveAttrStr} aria-hidden="true" title="Unknown icon: ${ctx.escapeHtml(node.name)}">${placeholderSvg}</span>`;
 }
 
 // src/renderer/html/renderers/overlay.ts
@@ -55282,7 +55321,20 @@ function renderDropdown(node, ctx) {
       dropdownItem.danger ? `${ctx.prefix}-dropdown-item-danger` : void 0,
       dropdownItem.disabled ? `${ctx.prefix}-dropdown-item-disabled` : void 0
     ]);
-    return `<button class="${itemClasses}"${dropdownItem.disabled ? ' disabled="disabled"' : ""}>${ctx.escapeHtml(dropdownItem.label)}</button>`;
+    const interactiveAttrs = {
+      "data-navigate": dropdownItem.navigate,
+      "data-opens": dropdownItem.opens,
+      "data-toggles": dropdownItem.toggles,
+      "data-action": dropdownItem.action
+    };
+    const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+    const hrefAttr = dropdownItem.href ? ` href="${ctx.escapeHtml(dropdownItem.href)}"` : "";
+    const disabledAttr = dropdownItem.disabled ? ' disabled="disabled"' : "";
+    if (dropdownItem.href || dropdownItem.navigate) {
+      const href = dropdownItem.href || dropdownItem.navigate || "#";
+      return `<a class="${itemClasses}" href="${ctx.escapeHtml(href)}"${interactiveAttrStr}>${ctx.escapeHtml(dropdownItem.label)}</a>`;
+    }
+    return `<button class="${itemClasses}"${disabledAttr}${interactiveAttrStr}>${ctx.escapeHtml(dropdownItem.label)}</button>`;
   }).join("\n");
   return `<div class="${classes}"${styleAttr}>
 ${items}

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { A as AnyNode, C as ContainerNode, L as LeafNode, a as LayoutNode, P as PageNode, H as HeaderNode, M as MainNode, F as FooterNode, S as SidebarNode, b as SectionNode, G as GridNode, R as RowNode, c as ColNode, d as ContainerComponentNode, e as CardNode, f as ModalNode, D as DrawerNode, g as AccordionNode, T as TextContentNode, h as TextNode, i as TitleNode, j as LinkNode, I as InputComponentNode, k as InputNode, l as TextareaNode, m as SelectNode, n as CheckboxNode, o as RadioNode, p as SwitchNode, q as SliderNode, B as ButtonNode, r as DisplayNode, s as ImageNode, t as PlaceholderNode, u as AvatarNode, v as BadgeNode, w as IconNode, x as DataNode, y as TableNode, z as ListNode, E as FeedbackNode, J as AlertNode, K as ToastNode, N as ProgressNode, O as SpinnerNode, Q as OverlayNode, U as TooltipNode, V as PopoverNode, W as DropdownNode, X as NavigationNode, Y as NavNode, Z as TabsNode, _ as BreadcrumbNode, $ as DividerComponentNode, a0 as NodeType, a1 as WireframeDocument } from './types-lcJzPcR0.cjs';
-export { ay as AlertVariant, ac as AlignValue, at as AvatarSize, av as BadgeSize, au as BadgeVariant, a4 as BaseNode, aK as BreadcrumbItem, as as ButtonSize, ar as ButtonVariant, ah as CommonProps, ad as DirectionValue, aD as DividerNode, aj as DrawerPosition, aC as DropdownItemNode, ae as FlexProps, af as GridProps, a9 as HeightValue, aw as IconSize, ap as InputType, ab as JustifyValue, ax as ListItemNode, aF as NavBlockItem, aI as NavChild, aH as NavDivider, aG as NavGroupNode, aE as NavItem, a2 as Position, ag as PositionProps, aq as SelectOption, ai as ShadowValue, aa as SizeProps, a3 as SourceLocation, a7 as SpacingProps, a6 as SpacingValue, aA as SpinnerSize, aJ as TabNode, an as TextAlign, al as TextSize, ak as TextSizeToken, am as TextWeight, ao as TitleLevel, az as ToastPosition, aB as TooltipPosition, a5 as ValueWithUnit, a8 as WidthValue } from './types-lcJzPcR0.cjs';
+import { A as AnyNode, C as ContainerNode, L as LeafNode, a as LayoutNode, P as PageNode, H as HeaderNode, M as MainNode, F as FooterNode, S as SidebarNode, b as SectionNode, G as GridNode, R as RowNode, c as ColNode, d as ContainerComponentNode, e as CardNode, f as ModalNode, D as DrawerNode, g as AccordionNode, T as TextContentNode, h as TextNode, i as TitleNode, j as LinkNode, I as InputComponentNode, k as InputNode, l as TextareaNode, m as SelectNode, n as CheckboxNode, o as RadioNode, p as SwitchNode, q as SliderNode, B as ButtonNode, r as DisplayNode, s as ImageNode, t as PlaceholderNode, u as AvatarNode, v as BadgeNode, w as IconNode, x as DataNode, y as TableNode, z as ListNode, E as FeedbackNode, J as AlertNode, K as ToastNode, N as ProgressNode, O as SpinnerNode, Q as OverlayNode, U as TooltipNode, V as PopoverNode, W as DropdownNode, X as NavigationNode, Y as NavNode, Z as TabsNode, _ as BreadcrumbNode, $ as DividerComponentNode, a0 as NodeType, a1 as WireframeDocument } from './types-CRocJqKS.cjs';
+export { az as AlertVariant, ac as AlignValue, au as AvatarSize, aw as BadgeSize, av as BadgeVariant, a4 as BaseNode, aL as BreadcrumbItem, at as ButtonSize, as as ButtonVariant, ah as CommonProps, ad as DirectionValue, aE as DividerNode, ak as DrawerPosition, aD as DropdownItemNode, ae as FlexProps, af as GridProps, a9 as HeightValue, ax as IconSize, aq as InputType, ai as InteractiveProps, ab as JustifyValue, ay as ListItemNode, aG as NavBlockItem, aJ as NavChild, aI as NavDivider, aH as NavGroupNode, aF as NavItem, a2 as Position, ag as PositionProps, ar as SelectOption, aj as ShadowValue, aa as SizeProps, a3 as SourceLocation, a7 as SpacingProps, a6 as SpacingValue, aB as SpinnerSize, aK as TabNode, ao as TextAlign, am as TextSize, al as TextSizeToken, an as TextWeight, ap as TitleLevel, aA as ToastPosition, aC as TooltipPosition, a5 as ValueWithUnit, a8 as WidthValue } from './types-CRocJqKS.cjs';
 export { ExpectedToken, ParseError, ParseErrorInfo, ParseOptions, ParseResult, getErrors, isValid, parse, tryParse } from './parser.cjs';
 export { HtmlRenderer, IconData, IconElement, RenderContext, RenderOptions, RenderResult, SvgRenderOptions, SvgRenderResult, ThemeColors, ThemeConfig, createHtmlRenderer, darkTheme, defaultTheme, generateComponentStyles, generateStyles, getIconData, getTheme, lucideIcons, render, renderIconSvg, renderToHtml, renderToSvg } from './renderer.cjs';
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { A as AnyNode, C as ContainerNode, L as LeafNode, a as LayoutNode, P as PageNode, H as HeaderNode, M as MainNode, F as FooterNode, S as SidebarNode, b as SectionNode, G as GridNode, R as RowNode, c as ColNode, d as ContainerComponentNode, e as CardNode, f as ModalNode, D as DrawerNode, g as AccordionNode, T as TextContentNode, h as TextNode, i as TitleNode, j as LinkNode, I as InputComponentNode, k as InputNode, l as TextareaNode, m as SelectNode, n as CheckboxNode, o as RadioNode, p as SwitchNode, q as SliderNode, B as ButtonNode, r as DisplayNode, s as ImageNode, t as PlaceholderNode, u as AvatarNode, v as BadgeNode, w as IconNode, x as DataNode, y as TableNode, z as ListNode, E as FeedbackNode, J as AlertNode, K as ToastNode, N as ProgressNode, O as SpinnerNode, Q as OverlayNode, U as TooltipNode, V as PopoverNode, W as DropdownNode, X as NavigationNode, Y as NavNode, Z as TabsNode, _ as BreadcrumbNode, $ as DividerComponentNode, a0 as NodeType, a1 as WireframeDocument } from './types-lcJzPcR0.js';
-export { ay as AlertVariant, ac as AlignValue, at as AvatarSize, av as BadgeSize, au as BadgeVariant, a4 as BaseNode, aK as BreadcrumbItem, as as ButtonSize, ar as ButtonVariant, ah as CommonProps, ad as DirectionValue, aD as DividerNode, aj as DrawerPosition, aC as DropdownItemNode, ae as FlexProps, af as GridProps, a9 as HeightValue, aw as IconSize, ap as InputType, ab as JustifyValue, ax as ListItemNode, aF as NavBlockItem, aI as NavChild, aH as NavDivider, aG as NavGroupNode, aE as NavItem, a2 as Position, ag as PositionProps, aq as SelectOption, ai as ShadowValue, aa as SizeProps, a3 as SourceLocation, a7 as SpacingProps, a6 as SpacingValue, aA as SpinnerSize, aJ as TabNode, an as TextAlign, al as TextSize, ak as TextSizeToken, am as TextWeight, ao as TitleLevel, az as ToastPosition, aB as TooltipPosition, a5 as ValueWithUnit, a8 as WidthValue } from './types-lcJzPcR0.js';
+import { A as AnyNode, C as ContainerNode, L as LeafNode, a as LayoutNode, P as PageNode, H as HeaderNode, M as MainNode, F as FooterNode, S as SidebarNode, b as SectionNode, G as GridNode, R as RowNode, c as ColNode, d as ContainerComponentNode, e as CardNode, f as ModalNode, D as DrawerNode, g as AccordionNode, T as TextContentNode, h as TextNode, i as TitleNode, j as LinkNode, I as InputComponentNode, k as InputNode, l as TextareaNode, m as SelectNode, n as CheckboxNode, o as RadioNode, p as SwitchNode, q as SliderNode, B as ButtonNode, r as DisplayNode, s as ImageNode, t as PlaceholderNode, u as AvatarNode, v as BadgeNode, w as IconNode, x as DataNode, y as TableNode, z as ListNode, E as FeedbackNode, J as AlertNode, K as ToastNode, N as ProgressNode, O as SpinnerNode, Q as OverlayNode, U as TooltipNode, V as PopoverNode, W as DropdownNode, X as NavigationNode, Y as NavNode, Z as TabsNode, _ as BreadcrumbNode, $ as DividerComponentNode, a0 as NodeType, a1 as WireframeDocument } from './types-CRocJqKS.js';
+export { az as AlertVariant, ac as AlignValue, au as AvatarSize, aw as BadgeSize, av as BadgeVariant, a4 as BaseNode, aL as BreadcrumbItem, at as ButtonSize, as as ButtonVariant, ah as CommonProps, ad as DirectionValue, aE as DividerNode, ak as DrawerPosition, aD as DropdownItemNode, ae as FlexProps, af as GridProps, a9 as HeightValue, ax as IconSize, aq as InputType, ai as InteractiveProps, ab as JustifyValue, ay as ListItemNode, aG as NavBlockItem, aJ as NavChild, aI as NavDivider, aH as NavGroupNode, aF as NavItem, a2 as Position, ag as PositionProps, ar as SelectOption, aj as ShadowValue, aa as SizeProps, a3 as SourceLocation, a7 as SpacingProps, a6 as SpacingValue, aB as SpinnerSize, aK as TabNode, ao as TextAlign, am as TextSize, al as TextSizeToken, an as TextWeight, ap as TitleLevel, aA as ToastPosition, aC as TooltipPosition, a5 as ValueWithUnit, a8 as WidthValue } from './types-CRocJqKS.js';
 export { ExpectedToken, ParseError, ParseErrorInfo, ParseOptions, ParseResult, getErrors, isValid, parse, tryParse } from './parser.js';
 export { HtmlRenderer, IconData, IconElement, RenderContext, RenderOptions, RenderResult, SvgRenderOptions, SvgRenderResult, ThemeColors, ThemeConfig, createHtmlRenderer, darkTheme, defaultTheme, generateComponentStyles, generateStyles, getIconData, getTheme, lucideIcons, render, renderIconSvg, renderToHtml, renderToSvg } from './renderer.js';
 

package/dist/index.js

@@ -8212,6 +8212,14 @@ ${children}
 }
 
 // src/renderer/html/renderers/container.ts
+function buildInteractiveAttrs(node) {
+  return {
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
+  };
+}
 function renderCard(node, ctx) {
   const hasExplicitWidth = node.w !== void 0;
   const classes = ctx.buildClassString([
@@ -8222,10 +8230,12 @@ function renderCard(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const interactiveAttrs = buildInteractiveAttrs(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   const title = node.title ? `<h3 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h3>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<div class="${classes}"${styleAttr}>
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr}>
 ${title}${children}
 </div>`;
 }
@@ -8236,10 +8246,11 @@ function renderModal(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const idAttr = node.id ? ` id="${ctx.escapeHtml(node.id)}"` : "";
   const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<div class="${ctx.prefix}-modal-backdrop">
+  return `<div class="${ctx.prefix}-modal-backdrop"${idAttr}>
   <div class="${classes}"${styleAttr} role="dialog" aria-modal="true">
 ${title}${children}
   </div>
@@ -8254,10 +8265,11 @@ function renderDrawer(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const idAttr = node.id ? ` id="${ctx.escapeHtml(node.id)}"` : "";
   const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<aside class="${classes}"${styleAttr}>
+  return `<aside class="${classes}"${styleAttr}${idAttr}>
 ${title}${children}
 </aside>`;
 }
@@ -8314,7 +8326,12 @@ function renderLink(node, ctx) {
   const styleAttr = styles ? ` style="${styles}"` : "";
   const attrs = {
     class: classes,
-    href: node.href || "#"
+    href: node.href || node.navigate || "#",
+    // Interactive attributes
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
   };
   if (node.external) {
     attrs.target = "_blank";
@@ -54742,7 +54759,12 @@ function renderButton(node, ctx) {
   const styleAttr = styles ? ` style="${styles}"` : "";
   const attrs = {
     class: classes,
-    disabled: node.disabled
+    disabled: node.disabled,
+    // Interactive attributes
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
   };
   let icon = "";
   if (node.icon) {
@@ -54984,6 +55006,14 @@ ${slider}`;
 }
 
 // src/renderer/html/renderers/display.ts
+function buildInteractiveAttrs2(node) {
+  return {
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
+  };
+}
 function renderImage(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-image`,
@@ -54995,14 +55025,17 @@ function renderImage(node, ctx) {
     const attrs = {
       class: classes,
       src: node.src,
-      alt: node.alt || "Image"
+      alt: node.alt || "Image",
+      ...buildInteractiveAttrs2(node)
     };
     const imgStyleAttr = styles ? `; ${styles}` : "";
     return `<img${ctx.buildAttrsString(attrs)}${imgStyleAttr ? ` style="${imgStyleAttr.slice(2)}"` : ""} />`;
   }
   const label = node.alt || "Image";
   const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
-  return `<div class="${classes}"${styleAttr} role="img" aria-label="${ctx.escapeHtml(label)}">${icon}<span>${ctx.escapeHtml(label)}</span></div>`;
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(label)}">${icon}<span>${ctx.escapeHtml(label)}</span></div>`;
 }
 function renderPlaceholder(node, ctx) {
   const classes = ctx.buildClassString([
@@ -55034,9 +55067,13 @@ function renderAvatar(node, ctx) {
   const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
   const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   const initials = node.name ? node.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
-  return `<div class="${classes}"${styleAttr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
 }
 function renderBadge(node, ctx) {
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   if (node.icon) {
     const iconData = getIconData(node.icon);
     const classes2 = ctx.buildClassString([
@@ -55049,9 +55086,9 @@ function renderBadge(node, ctx) {
     const styleAttr2 = styles2 ? ` style="${styles2}"` : "";
     if (iconData) {
       const svg = renderIconSvg(iconData, 24, 2, `${ctx.prefix}-icon`);
-      return `<span class="${classes2}"${styleAttr2} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
+      return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
     }
-    return `<span class="${classes2}"${styleAttr2} aria-label="unknown icon">?</span>`;
+    return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="unknown icon">?</span>`;
   }
   const isDot = !node.content || node.content.trim() === "";
   const classes = ctx.buildClassString([
@@ -55063,10 +55100,12 @@ function renderBadge(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
-  return `<span class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</span>`;
+  return `<span class="${classes}"${styleAttr}${interactiveAttrStr}>${ctx.escapeHtml(node.content)}</span>`;
 }
 function renderIcon(node, ctx) {
   const iconData = getIconData(node.name);
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   const sizeResolved = resolveSizeValue(node.size, "icon", ctx.prefix);
   const wrapperClasses = ctx.buildClassString([
     `${ctx.prefix}-icon-wrapper`,
@@ -55082,7 +55121,7 @@ function renderIcon(node, ctx) {
     const svgStyleAttr = sizeResolved.style ? ` style="${sizeResolved.style}"` : "";
     const svg = renderIconSvg(iconData, 24, 2, iconClasses, svgStyleAttr);
     const wrapperStyleAttr2 = baseStyles ? ` style="${baseStyles}"` : "";
-    return `<span class="${wrapperClasses}"${wrapperStyleAttr2} aria-hidden="true">${svg}</span>`;
+    return `<span class="${wrapperClasses}"${wrapperStyleAttr2}${interactiveAttrStr} aria-hidden="true">${svg}</span>`;
   }
   const size = sizeResolved.style?.match(/(\d+)px/)?.[1] || "24";
   const sizeNum = parseInt(size, 10);
@@ -55091,7 +55130,7 @@ function renderIcon(node, ctx) {
       <text x="12" y="16" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.7">?</text>
     </svg>`;
   const wrapperStyleAttr = baseStyles ? ` style="${baseStyles}"` : "";
-  return `<span class="${wrapperClasses}"${wrapperStyleAttr} aria-hidden="true" title="Unknown icon: ${ctx.escapeHtml(node.name)}">${placeholderSvg}</span>`;
+  return `<span class="${wrapperClasses}"${wrapperStyleAttr}${interactiveAttrStr} aria-hidden="true" title="Unknown icon: ${ctx.escapeHtml(node.name)}">${placeholderSvg}</span>`;
 }
 
 // src/renderer/html/renderers/overlay.ts
@@ -55142,7 +55181,20 @@ function renderDropdown(node, ctx) {
       dropdownItem.danger ? `${ctx.prefix}-dropdown-item-danger` : void 0,
       dropdownItem.disabled ? `${ctx.prefix}-dropdown-item-disabled` : void 0
     ]);
-    return `<button class="${itemClasses}"${dropdownItem.disabled ? ' disabled="disabled"' : ""}>${ctx.escapeHtml(dropdownItem.label)}</button>`;
+    const interactiveAttrs = {
+      "data-navigate": dropdownItem.navigate,
+      "data-opens": dropdownItem.opens,
+      "data-toggles": dropdownItem.toggles,
+      "data-action": dropdownItem.action
+    };
+    const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+    const hrefAttr = dropdownItem.href ? ` href="${ctx.escapeHtml(dropdownItem.href)}"` : "";
+    const disabledAttr = dropdownItem.disabled ? ' disabled="disabled"' : "";
+    if (dropdownItem.href || dropdownItem.navigate) {
+      const href = dropdownItem.href || dropdownItem.navigate || "#";
+      return `<a class="${itemClasses}" href="${ctx.escapeHtml(href)}"${interactiveAttrStr}>${ctx.escapeHtml(dropdownItem.label)}</a>`;
+    }
+    return `<button class="${itemClasses}"${disabledAttr}${interactiveAttrStr}>${ctx.escapeHtml(dropdownItem.label)}</button>`;
   }).join("\n");
   return `<div class="${classes}"${styleAttr}>
 ${items}

package/dist/parser.d.cts

@@ -1,4 +1,4 @@
-import { a3 as SourceLocation, a1 as WireframeDocument } from './types-lcJzPcR0.cjs';
+import { a3 as SourceLocation, a1 as WireframeDocument } from './types-CRocJqKS.cjs';
 
 /**
  * Parser module for wireweave

package/dist/parser.d.ts

@@ -1,4 +1,4 @@
-import { a3 as SourceLocation, a1 as WireframeDocument } from './types-lcJzPcR0.js';
+import { a3 as SourceLocation, a1 as WireframeDocument } from './types-CRocJqKS.js';
 
 /**
  * Parser module for wireweave

package/dist/renderer.cjs

@@ -2003,6 +2003,14 @@ ${children}
 }
 
 // src/renderer/html/renderers/container.ts
+function buildInteractiveAttrs(node) {
+  return {
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
+  };
+}
 function renderCard(node, ctx) {
   const hasExplicitWidth = node.w !== void 0;
   const classes = ctx.buildClassString([
@@ -2013,10 +2021,12 @@ function renderCard(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const interactiveAttrs = buildInteractiveAttrs(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   const title = node.title ? `<h3 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h3>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<div class="${classes}"${styleAttr}>
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr}>
 ${title}${children}
 </div>`;
 }
@@ -2027,10 +2037,11 @@ function renderModal(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const idAttr = node.id ? ` id="${ctx.escapeHtml(node.id)}"` : "";
   const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<div class="${ctx.prefix}-modal-backdrop">
+  return `<div class="${ctx.prefix}-modal-backdrop"${idAttr}>
   <div class="${classes}"${styleAttr} role="dialog" aria-modal="true">
 ${title}${children}
   </div>
@@ -2045,10 +2056,11 @@ function renderDrawer(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const idAttr = node.id ? ` id="${ctx.escapeHtml(node.id)}"` : "";
   const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<aside class="${classes}"${styleAttr}>
+  return `<aside class="${classes}"${styleAttr}${idAttr}>
 ${title}${children}
 </aside>`;
 }
@@ -2105,7 +2117,12 @@ function renderLink(node, ctx) {
   const styleAttr = styles ? ` style="${styles}"` : "";
   const attrs = {
     class: classes,
-    href: node.href || "#"
+    href: node.href || node.navigate || "#",
+    // Interactive attributes
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
   };
   if (node.external) {
     attrs.target = "_blank";
@@ -48533,7 +48550,12 @@ function renderButton(node, ctx) {
   const styleAttr = styles ? ` style="${styles}"` : "";
   const attrs = {
     class: classes,
-    disabled: node.disabled
+    disabled: node.disabled,
+    // Interactive attributes
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
   };
   let icon = "";
   if (node.icon) {
@@ -48775,6 +48797,14 @@ ${slider}`;
 }
 
 // src/renderer/html/renderers/display.ts
+function buildInteractiveAttrs2(node) {
+  return {
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
+  };
+}
 function renderImage(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-image`,
@@ -48786,14 +48816,17 @@ function renderImage(node, ctx) {
     const attrs = {
       class: classes,
       src: node.src,
-      alt: node.alt || "Image"
+      alt: node.alt || "Image",
+      ...buildInteractiveAttrs2(node)
     };
     const imgStyleAttr = styles ? `; ${styles}` : "";
     return `<img${ctx.buildAttrsString(attrs)}${imgStyleAttr ? ` style="${imgStyleAttr.slice(2)}"` : ""} />`;
   }
   const label = node.alt || "Image";
   const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
-  return `<div class="${classes}"${styleAttr} role="img" aria-label="${ctx.escapeHtml(label)}">${icon}<span>${ctx.escapeHtml(label)}</span></div>`;
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(label)}">${icon}<span>${ctx.escapeHtml(label)}</span></div>`;
 }
 function renderPlaceholder(node, ctx) {
   const classes = ctx.buildClassString([
@@ -48825,9 +48858,13 @@ function renderAvatar(node, ctx) {
   const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
   const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   const initials = node.name ? node.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
-  return `<div class="${classes}"${styleAttr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
 }
 function renderBadge(node, ctx) {
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   if (node.icon) {
     const iconData = getIconData(node.icon);
     const classes2 = ctx.buildClassString([
@@ -48840,9 +48877,9 @@ function renderBadge(node, ctx) {
     const styleAttr2 = styles2 ? ` style="${styles2}"` : "";
     if (iconData) {
       const svg = renderIconSvg(iconData, 24, 2, `${ctx.prefix}-icon`);
-      return `<span class="${classes2}"${styleAttr2} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
+      return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
     }
-    return `<span class="${classes2}"${styleAttr2} aria-label="unknown icon">?</span>`;
+    return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="unknown icon">?</span>`;
   }
   const isDot = !node.content || node.content.trim() === "";
   const classes = ctx.buildClassString([
@@ -48854,10 +48891,12 @@ function renderBadge(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
-  return `<span class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</span>`;
+  return `<span class="${classes}"${styleAttr}${interactiveAttrStr}>${ctx.escapeHtml(node.content)}</span>`;
 }
 function renderIcon(node, ctx) {
   const iconData = getIconData(node.name);
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   const sizeResolved = resolveSizeValue(node.size, "icon", ctx.prefix);
   const wrapperClasses = ctx.buildClassString([
     `${ctx.prefix}-icon-wrapper`,
@@ -48873,7 +48912,7 @@ function renderIcon(node, ctx) {
     const svgStyleAttr = sizeResolved.style ? ` style="${sizeResolved.style}"` : "";
     const svg = renderIconSvg(iconData, 24, 2, iconClasses, svgStyleAttr);
     const wrapperStyleAttr2 = baseStyles ? ` style="${baseStyles}"` : "";
-    return `<span class="${wrapperClasses}"${wrapperStyleAttr2} aria-hidden="true">${svg}</span>`;
+    return `<span class="${wrapperClasses}"${wrapperStyleAttr2}${interactiveAttrStr} aria-hidden="true">${svg}</span>`;
   }
   const size = sizeResolved.style?.match(/(\d+)px/)?.[1] || "24";
   const sizeNum = parseInt(size, 10);
@@ -48882,7 +48921,7 @@ function renderIcon(node, ctx) {
       <text x="12" y="16" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.7">?</text>
     </svg>`;
   const wrapperStyleAttr = baseStyles ? ` style="${baseStyles}"` : "";
-  return `<span class="${wrapperClasses}"${wrapperStyleAttr} aria-hidden="true" title="Unknown icon: ${ctx.escapeHtml(node.name)}">${placeholderSvg}</span>`;
+  return `<span class="${wrapperClasses}"${wrapperStyleAttr}${interactiveAttrStr} aria-hidden="true" title="Unknown icon: ${ctx.escapeHtml(node.name)}">${placeholderSvg}</span>`;
 }
 
 // src/renderer/html/renderers/overlay.ts
@@ -48933,7 +48972,20 @@ function renderDropdown(node, ctx) {
       dropdownItem.danger ? `${ctx.prefix}-dropdown-item-danger` : void 0,
       dropdownItem.disabled ? `${ctx.prefix}-dropdown-item-disabled` : void 0
     ]);
-    return `<button class="${itemClasses}"${dropdownItem.disabled ? ' disabled="disabled"' : ""}>${ctx.escapeHtml(dropdownItem.label)}</button>`;
+    const interactiveAttrs = {
+      "data-navigate": dropdownItem.navigate,
+      "data-opens": dropdownItem.opens,
+      "data-toggles": dropdownItem.toggles,
+      "data-action": dropdownItem.action
+    };
+    const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+    const hrefAttr = dropdownItem.href ? ` href="${ctx.escapeHtml(dropdownItem.href)}"` : "";
+    const disabledAttr = dropdownItem.disabled ? ' disabled="disabled"' : "";
+    if (dropdownItem.href || dropdownItem.navigate) {
+      const href = dropdownItem.href || dropdownItem.navigate || "#";
+      return `<a class="${itemClasses}" href="${ctx.escapeHtml(href)}"${interactiveAttrStr}>${ctx.escapeHtml(dropdownItem.label)}</a>`;
+    }
+    return `<button class="${itemClasses}"${disabledAttr}${interactiveAttrStr}>${ctx.escapeHtml(dropdownItem.label)}</button>`;
   }).join("\n");
   return `<div class="${classes}"${styleAttr}>
 ${items}

package/dist/renderer.d.cts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-lcJzPcR0.cjs';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-CRocJqKS.cjs';
 
 /**
  * Renderer type definitions for wireweave

package/dist/renderer.d.ts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-lcJzPcR0.js';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-CRocJqKS.js';
 
 /**
  * Renderer type definitions for wireweave

package/dist/renderer.js

@@ -1965,6 +1965,14 @@ ${children}
 }
 
 // src/renderer/html/renderers/container.ts
+function buildInteractiveAttrs(node) {
+  return {
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
+  };
+}
 function renderCard(node, ctx) {
   const hasExplicitWidth = node.w !== void 0;
   const classes = ctx.buildClassString([
@@ -1975,10 +1983,12 @@ function renderCard(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const interactiveAttrs = buildInteractiveAttrs(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   const title = node.title ? `<h3 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h3>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<div class="${classes}"${styleAttr}>
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr}>
 ${title}${children}
 </div>`;
 }
@@ -1989,10 +1999,11 @@ function renderModal(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const idAttr = node.id ? ` id="${ctx.escapeHtml(node.id)}"` : "";
   const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<div class="${ctx.prefix}-modal-backdrop">
+  return `<div class="${ctx.prefix}-modal-backdrop"${idAttr}>
   <div class="${classes}"${styleAttr} role="dialog" aria-modal="true">
 ${title}${children}
   </div>
@@ -2007,10 +2018,11 @@ function renderDrawer(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const idAttr = node.id ? ` id="${ctx.escapeHtml(node.id)}"` : "";
   const title = node.title ? `<h2 class="${ctx.prefix}-title">${ctx.escapeHtml(node.title)}</h2>
 ` : "";
   const children = ctx.renderChildren(node.children);
-  return `<aside class="${classes}"${styleAttr}>
+  return `<aside class="${classes}"${styleAttr}${idAttr}>
 ${title}${children}
 </aside>`;
 }
@@ -2067,7 +2079,12 @@ function renderLink(node, ctx) {
   const styleAttr = styles ? ` style="${styles}"` : "";
   const attrs = {
     class: classes,
-    href: node.href || "#"
+    href: node.href || node.navigate || "#",
+    // Interactive attributes
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
   };
   if (node.external) {
     attrs.target = "_blank";
@@ -48495,7 +48512,12 @@ function renderButton(node, ctx) {
   const styleAttr = styles ? ` style="${styles}"` : "";
   const attrs = {
     class: classes,
-    disabled: node.disabled
+    disabled: node.disabled,
+    // Interactive attributes
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
   };
   let icon = "";
   if (node.icon) {
@@ -48737,6 +48759,14 @@ ${slider}`;
 }
 
 // src/renderer/html/renderers/display.ts
+function buildInteractiveAttrs2(node) {
+  return {
+    "data-navigate": node.navigate,
+    "data-opens": node.opens,
+    "data-toggles": node.toggles,
+    "data-action": node.action
+  };
+}
 function renderImage(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-image`,
@@ -48748,14 +48778,17 @@ function renderImage(node, ctx) {
     const attrs = {
       class: classes,
       src: node.src,
-      alt: node.alt || "Image"
+      alt: node.alt || "Image",
+      ...buildInteractiveAttrs2(node)
     };
     const imgStyleAttr = styles ? `; ${styles}` : "";
     return `<img${ctx.buildAttrsString(attrs)}${imgStyleAttr ? ` style="${imgStyleAttr.slice(2)}"` : ""} />`;
   }
   const label = node.alt || "Image";
   const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
-  return `<div class="${classes}"${styleAttr} role="img" aria-label="${ctx.escapeHtml(label)}">${icon}<span>${ctx.escapeHtml(label)}</span></div>`;
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(label)}">${icon}<span>${ctx.escapeHtml(label)}</span></div>`;
 }
 function renderPlaceholder(node, ctx) {
   const classes = ctx.buildClassString([
@@ -48787,9 +48820,13 @@ function renderAvatar(node, ctx) {
   const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
   const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   const initials = node.name ? node.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
-  return `<div class="${classes}"${styleAttr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${initials}</div>`;
 }
 function renderBadge(node, ctx) {
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   if (node.icon) {
     const iconData = getIconData(node.icon);
     const classes2 = ctx.buildClassString([
@@ -48802,9 +48839,9 @@ function renderBadge(node, ctx) {
     const styleAttr2 = styles2 ? ` style="${styles2}"` : "";
     if (iconData) {
       const svg = renderIconSvg(iconData, 24, 2, `${ctx.prefix}-icon`);
-      return `<span class="${classes2}"${styleAttr2} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
+      return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
     }
-    return `<span class="${classes2}"${styleAttr2} aria-label="unknown icon">?</span>`;
+    return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="unknown icon">?</span>`;
   }
   const isDot = !node.content || node.content.trim() === "";
   const classes = ctx.buildClassString([
@@ -48816,10 +48853,12 @@ function renderBadge(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
-  return `<span class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</span>`;
+  return `<span class="${classes}"${styleAttr}${interactiveAttrStr}>${ctx.escapeHtml(node.content)}</span>`;
 }
 function renderIcon(node, ctx) {
   const iconData = getIconData(node.name);
+  const interactiveAttrs = buildInteractiveAttrs2(node);
+  const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
   const sizeResolved = resolveSizeValue(node.size, "icon", ctx.prefix);
   const wrapperClasses = ctx.buildClassString([
     `${ctx.prefix}-icon-wrapper`,
@@ -48835,7 +48874,7 @@ function renderIcon(node, ctx) {
     const svgStyleAttr = sizeResolved.style ? ` style="${sizeResolved.style}"` : "";
     const svg = renderIconSvg(iconData, 24, 2, iconClasses, svgStyleAttr);
     const wrapperStyleAttr2 = baseStyles ? ` style="${baseStyles}"` : "";
-    return `<span class="${wrapperClasses}"${wrapperStyleAttr2} aria-hidden="true">${svg}</span>`;
+    return `<span class="${wrapperClasses}"${wrapperStyleAttr2}${interactiveAttrStr} aria-hidden="true">${svg}</span>`;
   }
   const size = sizeResolved.style?.match(/(\d+)px/)?.[1] || "24";
   const sizeNum = parseInt(size, 10);
@@ -48844,7 +48883,7 @@ function renderIcon(node, ctx) {
       <text x="12" y="16" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.7">?</text>
     </svg>`;
   const wrapperStyleAttr = baseStyles ? ` style="${baseStyles}"` : "";
-  return `<span class="${wrapperClasses}"${wrapperStyleAttr} aria-hidden="true" title="Unknown icon: ${ctx.escapeHtml(node.name)}">${placeholderSvg}</span>`;
+  return `<span class="${wrapperClasses}"${wrapperStyleAttr}${interactiveAttrStr} aria-hidden="true" title="Unknown icon: ${ctx.escapeHtml(node.name)}">${placeholderSvg}</span>`;
 }
 
 // src/renderer/html/renderers/overlay.ts
@@ -48895,7 +48934,20 @@ function renderDropdown(node, ctx) {
       dropdownItem.danger ? `${ctx.prefix}-dropdown-item-danger` : void 0,
       dropdownItem.disabled ? `${ctx.prefix}-dropdown-item-disabled` : void 0
     ]);
-    return `<button class="${itemClasses}"${dropdownItem.disabled ? ' disabled="disabled"' : ""}>${ctx.escapeHtml(dropdownItem.label)}</button>`;
+    const interactiveAttrs = {
+      "data-navigate": dropdownItem.navigate,
+      "data-opens": dropdownItem.opens,
+      "data-toggles": dropdownItem.toggles,
+      "data-action": dropdownItem.action
+    };
+    const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+    const hrefAttr = dropdownItem.href ? ` href="${ctx.escapeHtml(dropdownItem.href)}"` : "";
+    const disabledAttr = dropdownItem.disabled ? ' disabled="disabled"' : "";
+    if (dropdownItem.href || dropdownItem.navigate) {
+      const href = dropdownItem.href || dropdownItem.navigate || "#";
+      return `<a class="${itemClasses}" href="${ctx.escapeHtml(href)}"${interactiveAttrStr}>${ctx.escapeHtml(dropdownItem.label)}</a>`;
+    }
+    return `<button class="${itemClasses}"${disabledAttr}${interactiveAttrStr}>${ctx.escapeHtml(dropdownItem.label)}</button>`;
   }).join("\n");
   return `<div class="${classes}"${styleAttr}>
 ${items}

package/dist/{types-lcJzPcR0.d.cts → types-CRocJqKS.d.cts}

@@ -87,6 +87,20 @@ interface PositionProps {
 }
 interface CommonProps extends SpacingProps, SizeProps, FlexProps, GridProps, PositionProps {
 }
+/**
+ * Interactive properties for components that can trigger actions.
+ * Used for buttons, links, avatars, icons, and other clickable elements.
+ */
+interface InteractiveProps {
+    /** Navigate to another page or URL */
+    navigate?: string;
+    /** Opens a modal, drawer, or other overlay element by id */
+    opens?: string;
+    /** Toggles visibility or state of an element by id */
+    toggles?: string;
+    /** Custom action identifier (e.g., "submit", "logout", "delete") */
+    action?: string;
+}
 interface WireframeDocument extends BaseNode {
     type: 'Document';
     children: PageNode[];
@@ -145,7 +159,7 @@ interface ColNode extends BaseNode, CommonProps {
     children: AnyNode[];
 }
 type ShadowValue = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-interface CardNode extends BaseNode, CommonProps {
+interface CardNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Card';
     title?: string | null;
     shadow?: ShadowValue;
@@ -155,12 +169,16 @@ interface CardNode extends BaseNode, CommonProps {
 interface ModalNode extends BaseNode, CommonProps {
     type: 'Modal';
     title?: string | null;
+    /** Unique identifier for targeting with opens/toggles */
+    id?: string;
     children: AnyNode[];
 }
 type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
 interface DrawerNode extends BaseNode, CommonProps {
     type: 'Drawer';
     title?: string | null;
+    /** Unique identifier for targeting with opens/toggles */
+    id?: string;
     position?: DrawerPosition;
     children: AnyNode[];
 }
@@ -189,7 +207,7 @@ interface TitleNode extends BaseNode, Omit<CommonProps, 'align'> {
     size?: TextSize;
     align?: TextAlign;
 }
-interface LinkNode extends BaseNode, CommonProps {
+interface LinkNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Link';
     content: string;
     href?: string;
@@ -259,7 +277,7 @@ interface SliderNode extends BaseNode, CommonProps {
 }
 type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface ButtonNode extends BaseNode, CommonProps {
+interface ButtonNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Button';
     content: string;
     primary?: boolean;
@@ -272,7 +290,7 @@ interface ButtonNode extends BaseNode, CommonProps {
     disabled?: boolean;
     loading?: boolean;
 }
-interface ImageNode extends BaseNode, CommonProps {
+interface ImageNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Image';
     src?: string | null;
     alt?: string;
@@ -283,7 +301,7 @@ interface PlaceholderNode extends BaseNode, CommonProps {
     children?: AnyNode[];
 }
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface AvatarNode extends BaseNode, CommonProps {
+interface AvatarNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Avatar';
     name?: string | null;
     src?: boolean;
@@ -291,7 +309,7 @@ interface AvatarNode extends BaseNode, CommonProps {
 }
 type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
 type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface BadgeNode extends BaseNode, CommonProps {
+interface BadgeNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Badge';
     content: string;
     variant?: BadgeVariant;
@@ -300,7 +318,7 @@ interface BadgeNode extends BaseNode, CommonProps {
     size?: BadgeSize;
 }
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface IconNode extends BaseNode, CommonProps {
+interface IconNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Icon';
     name: string;
     size?: IconSize | number;
@@ -365,9 +383,10 @@ interface PopoverNode extends BaseNode, CommonProps {
     title?: string | null;
     children: AnyNode[];
 }
-interface DropdownItemNode {
+interface DropdownItemNode extends InteractiveProps {
     label: string;
     icon?: string;
+    href?: string;
     danger?: boolean;
     disabled?: boolean;
 }
@@ -379,7 +398,7 @@ interface DropdownNode extends BaseNode, CommonProps {
     items: (DropdownItemNode | DividerNode)[];
 }
 /** Nav item for array syntax: nav ["a", "b"] */
-interface NavItem {
+interface NavItem extends InteractiveProps {
     label: string;
     icon?: string;
     href?: string;
@@ -387,7 +406,7 @@ interface NavItem {
     disabled?: boolean;
 }
 /** Nav item for block syntax: item "label" icon="x" active */
-interface NavBlockItem {
+interface NavBlockItem extends InteractiveProps {
     type: 'item';
     label: string;
     icon?: string;
@@ -428,7 +447,7 @@ interface TabsNode extends BaseNode, CommonProps {
     active?: number;
     children: TabNode[];
 }
-interface BreadcrumbItem {
+interface BreadcrumbItem extends InteractiveProps {
     label: string;
     href?: string;
 }
@@ -454,4 +473,4 @@ type LeafNode = TextContentNode | InputComponentNode | ButtonNode | DisplayNode
 type AnyNode = ContainerNode | LeafNode;
 type NodeType = 'Document' | 'Page' | 'Header' | 'Main' | 'Footer' | 'Sidebar' | 'Section' | 'Row' | 'Col' | 'Card' | 'Modal' | 'Drawer' | 'Accordion' | 'Text' | 'Title' | 'Link' | 'Input' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'Button' | 'Image' | 'Placeholder' | 'Avatar' | 'Badge' | 'Icon' | 'Table' | 'List' | 'Alert' | 'Toast' | 'Progress' | 'Spinner' | 'Tooltip' | 'Popover' | 'Dropdown' | 'Nav' | 'Tabs' | 'Breadcrumb' | 'Divider';
 
-export type { DividerComponentNode as $, AnyNode as A, ButtonNode as B, ContainerNode as C, DrawerNode as D, FeedbackNode as E, FooterNode as F, GridNode as G, HeaderNode as H, InputComponentNode as I, AlertNode as J, ToastNode as K, LeafNode as L, MainNode as M, ProgressNode as N, SpinnerNode as O, PageNode as P, OverlayNode as Q, RowNode as R, SidebarNode as S, TextContentNode as T, TooltipNode as U, PopoverNode as V, DropdownNode as W, NavigationNode as X, NavNode as Y, TabsNode as Z, BreadcrumbNode as _, LayoutNode as a, NodeType as a0, WireframeDocument as a1, Position as a2, SourceLocation as a3, BaseNode as a4, ValueWithUnit as a5, SpacingValue as a6, SpacingProps as a7, WidthValue as a8, HeightValue as a9, SpinnerSize as aA, TooltipPosition as aB, DropdownItemNode as aC, DividerNode as aD, NavItem as aE, NavBlockItem as aF, NavGroupNode as aG, NavDivider as aH, NavChild as aI, TabNode as aJ, BreadcrumbItem as aK, SizeProps as aa, JustifyValue as ab, AlignValue as ac, DirectionValue as ad, FlexProps as ae, GridProps as af, PositionProps as ag, CommonProps as ah, ShadowValue as ai, DrawerPosition as aj, TextSizeToken as ak, TextSize as al, TextWeight as am, TextAlign as an, TitleLevel as ao, InputType as ap, SelectOption as aq, ButtonVariant as ar, ButtonSize as as, AvatarSize as at, BadgeVariant as au, BadgeSize as av, IconSize as aw, ListItemNode as ax, AlertVariant as ay, ToastPosition as az, SectionNode as b, ColNode as c, ContainerComponentNode as d, CardNode as e, ModalNode as f, AccordionNode as g, TextNode as h, TitleNode as i, LinkNode as j, InputNode as k, TextareaNode as l, SelectNode as m, CheckboxNode as n, RadioNode as o, SwitchNode as p, SliderNode as q, DisplayNode as r, ImageNode as s, PlaceholderNode as t, AvatarNode as u, BadgeNode as v, IconNode as w, DataNode as x, TableNode as y, ListNode as z };
+export type { DividerComponentNode as $, AnyNode as A, ButtonNode as B, ContainerNode as C, DrawerNode as D, FeedbackNode as E, FooterNode as F, GridNode as G, HeaderNode as H, InputComponentNode as I, AlertNode as J, ToastNode as K, LeafNode as L, MainNode as M, ProgressNode as N, SpinnerNode as O, PageNode as P, OverlayNode as Q, RowNode as R, SidebarNode as S, TextContentNode as T, TooltipNode as U, PopoverNode as V, DropdownNode as W, NavigationNode as X, NavNode as Y, TabsNode as Z, BreadcrumbNode as _, LayoutNode as a, NodeType as a0, WireframeDocument as a1, Position as a2, SourceLocation as a3, BaseNode as a4, ValueWithUnit as a5, SpacingValue as a6, SpacingProps as a7, WidthValue as a8, HeightValue as a9, ToastPosition as aA, SpinnerSize as aB, TooltipPosition as aC, DropdownItemNode as aD, DividerNode as aE, NavItem as aF, NavBlockItem as aG, NavGroupNode as aH, NavDivider as aI, NavChild as aJ, TabNode as aK, BreadcrumbItem as aL, SizeProps as aa, JustifyValue as ab, AlignValue as ac, DirectionValue as ad, FlexProps as ae, GridProps as af, PositionProps as ag, CommonProps as ah, InteractiveProps as ai, ShadowValue as aj, DrawerPosition as ak, TextSizeToken as al, TextSize as am, TextWeight as an, TextAlign as ao, TitleLevel as ap, InputType as aq, SelectOption as ar, ButtonVariant as as, ButtonSize as at, AvatarSize as au, BadgeVariant as av, BadgeSize as aw, IconSize as ax, ListItemNode as ay, AlertVariant as az, SectionNode as b, ColNode as c, ContainerComponentNode as d, CardNode as e, ModalNode as f, AccordionNode as g, TextNode as h, TitleNode as i, LinkNode as j, InputNode as k, TextareaNode as l, SelectNode as m, CheckboxNode as n, RadioNode as o, SwitchNode as p, SliderNode as q, DisplayNode as r, ImageNode as s, PlaceholderNode as t, AvatarNode as u, BadgeNode as v, IconNode as w, DataNode as x, TableNode as y, ListNode as z };

package/dist/{types-lcJzPcR0.d.ts → types-CRocJqKS.d.ts}

@@ -87,6 +87,20 @@ interface PositionProps {
 }
 interface CommonProps extends SpacingProps, SizeProps, FlexProps, GridProps, PositionProps {
 }
+/**
+ * Interactive properties for components that can trigger actions.
+ * Used for buttons, links, avatars, icons, and other clickable elements.
+ */
+interface InteractiveProps {
+    /** Navigate to another page or URL */
+    navigate?: string;
+    /** Opens a modal, drawer, or other overlay element by id */
+    opens?: string;
+    /** Toggles visibility or state of an element by id */
+    toggles?: string;
+    /** Custom action identifier (e.g., "submit", "logout", "delete") */
+    action?: string;
+}
 interface WireframeDocument extends BaseNode {
     type: 'Document';
     children: PageNode[];
@@ -145,7 +159,7 @@ interface ColNode extends BaseNode, CommonProps {
     children: AnyNode[];
 }
 type ShadowValue = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-interface CardNode extends BaseNode, CommonProps {
+interface CardNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Card';
     title?: string | null;
     shadow?: ShadowValue;
@@ -155,12 +169,16 @@ interface CardNode extends BaseNode, CommonProps {
 interface ModalNode extends BaseNode, CommonProps {
     type: 'Modal';
     title?: string | null;
+    /** Unique identifier for targeting with opens/toggles */
+    id?: string;
     children: AnyNode[];
 }
 type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
 interface DrawerNode extends BaseNode, CommonProps {
     type: 'Drawer';
     title?: string | null;
+    /** Unique identifier for targeting with opens/toggles */
+    id?: string;
     position?: DrawerPosition;
     children: AnyNode[];
 }
@@ -189,7 +207,7 @@ interface TitleNode extends BaseNode, Omit<CommonProps, 'align'> {
     size?: TextSize;
     align?: TextAlign;
 }
-interface LinkNode extends BaseNode, CommonProps {
+interface LinkNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Link';
     content: string;
     href?: string;
@@ -259,7 +277,7 @@ interface SliderNode extends BaseNode, CommonProps {
 }
 type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface ButtonNode extends BaseNode, CommonProps {
+interface ButtonNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Button';
     content: string;
     primary?: boolean;
@@ -272,7 +290,7 @@ interface ButtonNode extends BaseNode, CommonProps {
     disabled?: boolean;
     loading?: boolean;
 }
-interface ImageNode extends BaseNode, CommonProps {
+interface ImageNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Image';
     src?: string | null;
     alt?: string;
@@ -283,7 +301,7 @@ interface PlaceholderNode extends BaseNode, CommonProps {
     children?: AnyNode[];
 }
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface AvatarNode extends BaseNode, CommonProps {
+interface AvatarNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Avatar';
     name?: string | null;
     src?: boolean;
@@ -291,7 +309,7 @@ interface AvatarNode extends BaseNode, CommonProps {
 }
 type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
 type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface BadgeNode extends BaseNode, CommonProps {
+interface BadgeNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Badge';
     content: string;
     variant?: BadgeVariant;
@@ -300,7 +318,7 @@ interface BadgeNode extends BaseNode, CommonProps {
     size?: BadgeSize;
 }
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface IconNode extends BaseNode, CommonProps {
+interface IconNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Icon';
     name: string;
     size?: IconSize | number;
@@ -365,9 +383,10 @@ interface PopoverNode extends BaseNode, CommonProps {
     title?: string | null;
     children: AnyNode[];
 }
-interface DropdownItemNode {
+interface DropdownItemNode extends InteractiveProps {
     label: string;
     icon?: string;
+    href?: string;
     danger?: boolean;
     disabled?: boolean;
 }
@@ -379,7 +398,7 @@ interface DropdownNode extends BaseNode, CommonProps {
     items: (DropdownItemNode | DividerNode)[];
 }
 /** Nav item for array syntax: nav ["a", "b"] */
-interface NavItem {
+interface NavItem extends InteractiveProps {
     label: string;
     icon?: string;
     href?: string;
@@ -387,7 +406,7 @@ interface NavItem {
     disabled?: boolean;
 }
 /** Nav item for block syntax: item "label" icon="x" active */
-interface NavBlockItem {
+interface NavBlockItem extends InteractiveProps {
     type: 'item';
     label: string;
     icon?: string;
@@ -428,7 +447,7 @@ interface TabsNode extends BaseNode, CommonProps {
     active?: number;
     children: TabNode[];
 }
-interface BreadcrumbItem {
+interface BreadcrumbItem extends InteractiveProps {
     label: string;
     href?: string;
 }
@@ -454,4 +473,4 @@ type LeafNode = TextContentNode | InputComponentNode | ButtonNode | DisplayNode
 type AnyNode = ContainerNode | LeafNode;
 type NodeType = 'Document' | 'Page' | 'Header' | 'Main' | 'Footer' | 'Sidebar' | 'Section' | 'Row' | 'Col' | 'Card' | 'Modal' | 'Drawer' | 'Accordion' | 'Text' | 'Title' | 'Link' | 'Input' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'Button' | 'Image' | 'Placeholder' | 'Avatar' | 'Badge' | 'Icon' | 'Table' | 'List' | 'Alert' | 'Toast' | 'Progress' | 'Spinner' | 'Tooltip' | 'Popover' | 'Dropdown' | 'Nav' | 'Tabs' | 'Breadcrumb' | 'Divider';
 
-export type { DividerComponentNode as $, AnyNode as A, ButtonNode as B, ContainerNode as C, DrawerNode as D, FeedbackNode as E, FooterNode as F, GridNode as G, HeaderNode as H, InputComponentNode as I, AlertNode as J, ToastNode as K, LeafNode as L, MainNode as M, ProgressNode as N, SpinnerNode as O, PageNode as P, OverlayNode as Q, RowNode as R, SidebarNode as S, TextContentNode as T, TooltipNode as U, PopoverNode as V, DropdownNode as W, NavigationNode as X, NavNode as Y, TabsNode as Z, BreadcrumbNode as _, LayoutNode as a, NodeType as a0, WireframeDocument as a1, Position as a2, SourceLocation as a3, BaseNode as a4, ValueWithUnit as a5, SpacingValue as a6, SpacingProps as a7, WidthValue as a8, HeightValue as a9, SpinnerSize as aA, TooltipPosition as aB, DropdownItemNode as aC, DividerNode as aD, NavItem as aE, NavBlockItem as aF, NavGroupNode as aG, NavDivider as aH, NavChild as aI, TabNode as aJ, BreadcrumbItem as aK, SizeProps as aa, JustifyValue as ab, AlignValue as ac, DirectionValue as ad, FlexProps as ae, GridProps as af, PositionProps as ag, CommonProps as ah, ShadowValue as ai, DrawerPosition as aj, TextSizeToken as ak, TextSize as al, TextWeight as am, TextAlign as an, TitleLevel as ao, InputType as ap, SelectOption as aq, ButtonVariant as ar, ButtonSize as as, AvatarSize as at, BadgeVariant as au, BadgeSize as av, IconSize as aw, ListItemNode as ax, AlertVariant as ay, ToastPosition as az, SectionNode as b, ColNode as c, ContainerComponentNode as d, CardNode as e, ModalNode as f, AccordionNode as g, TextNode as h, TitleNode as i, LinkNode as j, InputNode as k, TextareaNode as l, SelectNode as m, CheckboxNode as n, RadioNode as o, SwitchNode as p, SliderNode as q, DisplayNode as r, ImageNode as s, PlaceholderNode as t, AvatarNode as u, BadgeNode as v, IconNode as w, DataNode as x, TableNode as y, ListNode as z };
+export type { DividerComponentNode as $, AnyNode as A, ButtonNode as B, ContainerNode as C, DrawerNode as D, FeedbackNode as E, FooterNode as F, GridNode as G, HeaderNode as H, InputComponentNode as I, AlertNode as J, ToastNode as K, LeafNode as L, MainNode as M, ProgressNode as N, SpinnerNode as O, PageNode as P, OverlayNode as Q, RowNode as R, SidebarNode as S, TextContentNode as T, TooltipNode as U, PopoverNode as V, DropdownNode as W, NavigationNode as X, NavNode as Y, TabsNode as Z, BreadcrumbNode as _, LayoutNode as a, NodeType as a0, WireframeDocument as a1, Position as a2, SourceLocation as a3, BaseNode as a4, ValueWithUnit as a5, SpacingValue as a6, SpacingProps as a7, WidthValue as a8, HeightValue as a9, ToastPosition as aA, SpinnerSize as aB, TooltipPosition as aC, DropdownItemNode as aD, DividerNode as aE, NavItem as aF, NavBlockItem as aG, NavGroupNode as aH, NavDivider as aI, NavChild as aJ, TabNode as aK, BreadcrumbItem as aL, SizeProps as aa, JustifyValue as ab, AlignValue as ac, DirectionValue as ad, FlexProps as ae, GridProps as af, PositionProps as ag, CommonProps as ah, InteractiveProps as ai, ShadowValue as aj, DrawerPosition as ak, TextSizeToken as al, TextSize as am, TextWeight as an, TextAlign as ao, TitleLevel as ap, InputType as aq, SelectOption as ar, ButtonVariant as as, ButtonSize as at, AvatarSize as au, BadgeVariant as av, BadgeSize as aw, IconSize as ax, ListItemNode as ay, AlertVariant as az, SectionNode as b, ColNode as c, ContainerComponentNode as d, CardNode as e, ModalNode as f, AccordionNode as g, TextNode as h, TitleNode as i, LinkNode as j, InputNode as k, TextareaNode as l, SelectNode as m, CheckboxNode as n, RadioNode as o, SwitchNode as p, SliderNode as q, DisplayNode as r, ImageNode as s, PlaceholderNode as t, AvatarNode as u, BadgeNode as v, IconNode as w, DataNode as x, TableNode as y, ListNode as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wireweave/core",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Core parser and renderer for wireweave",
   "type": "module",
   "main": "dist/index.js",