@wireweave/core 2.3.1 → 2.4.0

package/dist/renderer.cjs

@@ -1446,11 +1446,36 @@ function generateGridClasses(_theme, prefix) {
 }
 
 /* When explicit width is set, don't flex-grow */
-.${prefix}-row[style*="width:"],
-.${prefix}-col[style*="width:"] {
+.${prefix}-row[style*="width"],
+.${prefix}-col[style*="width"] {
   flex: 0 0 auto;
 }
 
+/* Stack - vertical content grouping (does not fill available space) */
+.${prefix}-stack {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+}
+
+/* Relative - container for absolute positioning children */
+.${prefix}-relative {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Anchor positioning for relative container children */
+.${prefix}-anchor-top-left { position: absolute; top: -4px; left: -4px; }
+.${prefix}-anchor-top-center { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); }
+.${prefix}-anchor-top-right { position: absolute; top: -4px; right: -4px; }
+.${prefix}-anchor-center-left { position: absolute; top: 50%; left: -4px; transform: translateY(-50%); }
+.${prefix}-anchor-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+.${prefix}-anchor-center-right { position: absolute; top: 50%; right: -4px; transform: translateY(-50%); }
+.${prefix}-anchor-bottom-left { position: absolute; bottom: -4px; left: -4px; }
+.${prefix}-anchor-bottom-center { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); }
+.${prefix}-anchor-bottom-right { position: absolute; bottom: -4px; right: -4px; }
+
 `;
   for (let i = 1; i <= 12; i++) {
     css += `.${prefix}-col-${i} { flex: ${i} 0 0%; min-width: 0; }
@@ -2044,6 +2069,30 @@ function renderCol(node, ctx) {
 ${children}
 </div>`;
 }
+function renderStack(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-stack`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${children}
+</div>`;
+}
+function renderRelative(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-relative`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${children}
+</div>`;
+}
 
 // src/renderer/html/renderers/container.ts
 function buildInteractiveAttrs(node) {
@@ -12879,6 +12928,28 @@ var lucideIcons = {
       }
     ]
   ],
+  "circle-help": [
+    [
+      "circle",
+      {
+        "cx": "12",
+        "cy": "12",
+        "r": "10"
+      }
+    ],
+    [
+      "path",
+      {
+        "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+      }
+    ],
+    [
+      "path",
+      {
+        "d": "M12 17h.01"
+      }
+    ]
+  ],
   "circle-minus": [
     [
       "circle",
@@ -48941,10 +49012,20 @@ function renderAvatar(node, ctx) {
   const sizeStyle = sizeResolved.style || "";
   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) : "?";
+  let content;
+  if (node.name) {
+    content = node.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  } else {
+    const iconData = getIconData("user");
+    if (iconData) {
+      content = renderIconSvg(iconData, 16, 2, `${ctx.prefix}-icon`);
+    } else {
+      content = "?";
+    }
+  }
   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>`;
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${content}</div>`;
 }
 function renderBadge(node, ctx) {
   const interactiveAttrs = buildInteractiveAttrs2(node);
@@ -48956,6 +49037,7 @@ function renderBadge(node, ctx) {
       `${ctx.prefix}-badge-icon`,
       sizeResolved.className,
       node.variant ? `${ctx.prefix}-badge-icon-${node.variant}` : void 0,
+      node.anchor ? `${ctx.prefix}-anchor-${node.anchor}` : void 0,
       ...ctx.getCommonClasses(node)
     ]);
     const baseStyles2 = ctx.buildCommonStyles(node);
@@ -48975,6 +49057,7 @@ function renderBadge(node, ctx) {
     sizeResolved.className,
     node.variant ? `${ctx.prefix}-badge-${node.variant}` : void 0,
     node.pill ? `${ctx.prefix}-badge-pill` : void 0,
+    node.anchor ? `${ctx.prefix}-anchor-${node.anchor}` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
   const baseStyles = ctx.buildCommonStyles(node);
@@ -49395,6 +49478,8 @@ var HtmlRenderer = class extends BaseRenderer {
       // Grid nodes
       Row: (node) => this.renderRow(node),
       Col: (node) => this.renderCol(node),
+      Stack: (node) => this.renderStack(node),
+      Relative: (node) => this.renderRelative(node),
       // Container nodes
       Card: (node) => this.renderCard(node),
       Modal: (node) => this.renderModal(node),
@@ -49554,6 +49639,12 @@ ${title}${children}
   renderCol(node) {
     return renderCol(node, this.getGridRenderContext());
   }
+  renderStack(node) {
+    return renderStack(node, this.getRenderContext());
+  }
+  renderRelative(node) {
+    return renderRelative(node, this.getRenderContext());
+  }
   /**
    * Build common inline styles for all values
    *
@@ -49716,6 +49807,9 @@ ${title}${children}
     if (commonStyles) {
       styles.push(commonStyles);
     }
+    if (node.w !== void 0 && node.flex === void 0) {
+      styles.push("flex: none");
+    }
     if (node.order !== void 0) {
       styles.push(`order: ${node.order}`);
     }

package/dist/renderer.d.cts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-D0t4JRY3.cjs';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-D_1QkAXo.cjs';
 
 /**
  * Renderer type definitions for wireweave
@@ -234,6 +234,8 @@ declare class HtmlRenderer extends BaseRenderer {
     private renderSection;
     private renderRow;
     private renderCol;
+    private renderStack;
+    private renderRelative;
     /**
      * Build common inline styles for all values
      *

package/dist/renderer.d.ts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-D0t4JRY3.js';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-D_1QkAXo.js';
 
 /**
  * Renderer type definitions for wireweave
@@ -234,6 +234,8 @@ declare class HtmlRenderer extends BaseRenderer {
     private renderSection;
     private renderRow;
     private renderCol;
+    private renderStack;
+    private renderRelative;
     /**
      * Build common inline styles for all values
      *

package/dist/renderer.js

@@ -1408,11 +1408,36 @@ function generateGridClasses(_theme, prefix) {
 }
 
 /* When explicit width is set, don't flex-grow */
-.${prefix}-row[style*="width:"],
-.${prefix}-col[style*="width:"] {
+.${prefix}-row[style*="width"],
+.${prefix}-col[style*="width"] {
   flex: 0 0 auto;
 }
 
+/* Stack - vertical content grouping (does not fill available space) */
+.${prefix}-stack {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+}
+
+/* Relative - container for absolute positioning children */
+.${prefix}-relative {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Anchor positioning for relative container children */
+.${prefix}-anchor-top-left { position: absolute; top: -4px; left: -4px; }
+.${prefix}-anchor-top-center { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); }
+.${prefix}-anchor-top-right { position: absolute; top: -4px; right: -4px; }
+.${prefix}-anchor-center-left { position: absolute; top: 50%; left: -4px; transform: translateY(-50%); }
+.${prefix}-anchor-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+.${prefix}-anchor-center-right { position: absolute; top: 50%; right: -4px; transform: translateY(-50%); }
+.${prefix}-anchor-bottom-left { position: absolute; bottom: -4px; left: -4px; }
+.${prefix}-anchor-bottom-center { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); }
+.${prefix}-anchor-bottom-right { position: absolute; bottom: -4px; right: -4px; }
+
 `;
   for (let i = 1; i <= 12; i++) {
     css += `.${prefix}-col-${i} { flex: ${i} 0 0%; min-width: 0; }
@@ -2006,6 +2031,30 @@ function renderCol(node, ctx) {
 ${children}
 </div>`;
 }
+function renderStack(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-stack`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${children}
+</div>`;
+}
+function renderRelative(node, ctx) {
+  const classes = ctx.buildClassString([
+    `${ctx.prefix}-relative`,
+    ...ctx.getCommonClasses(node)
+  ]);
+  const styles = ctx.buildCommonStyles(node);
+  const styleAttr = styles ? ` style="${styles}"` : "";
+  const children = ctx.renderChildren(node.children);
+  return `<div class="${classes}"${styleAttr}>
+${children}
+</div>`;
+}
 
 // src/renderer/html/renderers/container.ts
 function buildInteractiveAttrs(node) {
@@ -12841,6 +12890,28 @@ var lucideIcons = {
       }
     ]
   ],
+  "circle-help": [
+    [
+      "circle",
+      {
+        "cx": "12",
+        "cy": "12",
+        "r": "10"
+      }
+    ],
+    [
+      "path",
+      {
+        "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+      }
+    ],
+    [
+      "path",
+      {
+        "d": "M12 17h.01"
+      }
+    ]
+  ],
   "circle-minus": [
     [
       "circle",
@@ -48903,10 +48974,20 @@ function renderAvatar(node, ctx) {
   const sizeStyle = sizeResolved.style || "";
   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) : "?";
+  let content;
+  if (node.name) {
+    content = node.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  } else {
+    const iconData = getIconData("user");
+    if (iconData) {
+      content = renderIconSvg(iconData, 16, 2, `${ctx.prefix}-icon`);
+    } else {
+      content = "?";
+    }
+  }
   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>`;
+  return `<div class="${classes}"${styleAttr}${interactiveAttrStr} role="img" aria-label="${ctx.escapeHtml(node.name || "Avatar")}">${content}</div>`;
 }
 function renderBadge(node, ctx) {
   const interactiveAttrs = buildInteractiveAttrs2(node);
@@ -48918,6 +48999,7 @@ function renderBadge(node, ctx) {
       `${ctx.prefix}-badge-icon`,
       sizeResolved.className,
       node.variant ? `${ctx.prefix}-badge-icon-${node.variant}` : void 0,
+      node.anchor ? `${ctx.prefix}-anchor-${node.anchor}` : void 0,
       ...ctx.getCommonClasses(node)
     ]);
     const baseStyles2 = ctx.buildCommonStyles(node);
@@ -48937,6 +49019,7 @@ function renderBadge(node, ctx) {
     sizeResolved.className,
     node.variant ? `${ctx.prefix}-badge-${node.variant}` : void 0,
     node.pill ? `${ctx.prefix}-badge-pill` : void 0,
+    node.anchor ? `${ctx.prefix}-anchor-${node.anchor}` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
   const baseStyles = ctx.buildCommonStyles(node);
@@ -49357,6 +49440,8 @@ var HtmlRenderer = class extends BaseRenderer {
       // Grid nodes
       Row: (node) => this.renderRow(node),
       Col: (node) => this.renderCol(node),
+      Stack: (node) => this.renderStack(node),
+      Relative: (node) => this.renderRelative(node),
       // Container nodes
       Card: (node) => this.renderCard(node),
       Modal: (node) => this.renderModal(node),
@@ -49516,6 +49601,12 @@ ${title}${children}
   renderCol(node) {
     return renderCol(node, this.getGridRenderContext());
   }
+  renderStack(node) {
+    return renderStack(node, this.getRenderContext());
+  }
+  renderRelative(node) {
+    return renderRelative(node, this.getRenderContext());
+  }
   /**
    * Build common inline styles for all values
    *
@@ -49678,6 +49769,9 @@ ${title}${children}
     if (commonStyles) {
       styles.push(commonStyles);
     }
+    if (node.w !== void 0 && node.flex === void 0) {
+      styles.push("flex: none");
+    }
     if (node.order !== void 0) {
       styles.push(`order: ${node.order}`);
     }

package/dist/{types-D0t4JRY3.d.cts → types-D_1QkAXo.d.cts}

@@ -169,6 +169,36 @@ interface ColNode extends BaseNode, CommonProps {
     scroll?: boolean;
     children: AnyNode[];
 }
+/**
+ * Stack - Vertical content grouping container
+ *
+ * Unlike Col which fills available space (flex: 1),
+ * Stack only takes up the space needed by its content (flex: 0 0 auto).
+ *
+ * Use cases:
+ * - Grouping form fields vertically
+ * - Card content layout
+ * - Centering content with justify/align
+ */
+interface StackNode extends BaseNode, CommonProps {
+    type: 'Stack';
+    children: AnyNode[];
+}
+/**
+ * Relative - Position children with absolute positioning
+ *
+ * Creates a position: relative container.
+ * First child is the base element, subsequent children are overlaid on top.
+ * Child elements can use `anchor` attribute to specify position:
+ * - top-left, top-center, top-right
+ * - center-left, center, center-right
+ * - bottom-left, bottom-center, bottom-right
+ */
+interface RelativeNode extends BaseNode, CommonProps {
+    type: 'Relative';
+    children: AnyNode[];
+}
+type AnchorPosition = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 type ShadowValue = 'none' | 'sm' | 'md' | 'lg' | 'xl';
 interface CardNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Card';
@@ -330,6 +360,8 @@ interface BadgeNode extends BaseNode, CommonProps, InteractiveProps {
     pill?: boolean;
     icon?: string;
     size?: BadgeSize;
+    /** Anchor position when inside an overlay container */
+    anchor?: AnchorPosition;
 }
 type IconSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type IconSize = IconSizeToken | number | ValueWithUnit;
@@ -475,7 +507,7 @@ interface DividerComponentNode extends BaseNode, CommonProps {
     type: 'Divider';
 }
 type LayoutNode = PageNode | HeaderNode | MainNode | FooterNode | SidebarNode | SectionNode;
-type GridNode = RowNode | ColNode;
+type GridNode = RowNode | ColNode | StackNode | RelativeNode;
 type ContainerComponentNode = CardNode | ModalNode | DrawerNode | AccordionNode;
 type TextContentNode = TextNode | TitleNode | LinkNode;
 type InputComponentNode = InputNode | TextareaNode | SelectNode | CheckboxNode | RadioNode | SwitchNode | SliderNode;
@@ -487,6 +519,6 @@ type NavigationNode = NavNode | TabsNode | BreadcrumbNode;
 type ContainerNode = LayoutNode | GridNode | ContainerComponentNode | PopoverNode | TooltipNode;
 type LeafNode = TextContentNode | InputComponentNode | ButtonNode | DisplayNode | DataNode | FeedbackNode | DropdownNode | NavigationNode | DividerComponentNode;
 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';
+type NodeType = 'Document' | 'Page' | 'Header' | 'Main' | 'Footer' | 'Sidebar' | 'Section' | 'Row' | 'Col' | 'Stack' | 'Relative' | '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 { ToastNode as $, AnyNode as A, BadgeNode as B, CardNode as C, DataNode as D, RowNode as E, FeedbackNode as F, GridNode as G, HeaderNode as H, IconNode as I, SelectNode as J, SidebarNode as K, LayoutNode as L, MainNode as M, NavNode as N, OverlayNode as O, PageNode as P, SliderNode as Q, RadioNode as R, SectionNode as S, SpinnerNode as T, SwitchNode as U, TableNode as V, TabsNode as W, TextContentNode as X, TextNode as Y, TextareaNode as Z, TitleNode as _, AccordionNode as a, TooltipNode as a0, WireframeDocument as a1, AlertVariant as a2, AlignValue as a3, AppearanceProps as a4, AvatarSize as a5, AvatarSizeToken as a6, BadgeSize as a7, BadgeSizeToken as a8, BadgeVariant as a9, SelectOption as aA, ShadowValue as aB, SizeProps as aC, SourceLocation as aD, SpacingProps as aE, SpacingValue as aF, SpinnerSize as aG, SpinnerSizeToken as aH, TabNode as aI, TextAlign as aJ, TextSize as aK, TextSizeToken as aL, TextWeight as aM, TitleLevel as aN, ToastPosition as aO, TooltipPosition as aP, ValueWithUnit as aQ, WidthValue as aR, BaseNode as aa, BreadcrumbItem as ab, ButtonSize as ac, ButtonSizeToken as ad, ButtonVariant as ae, CommonProps as af, DirectionValue as ag, DividerNode as ah, DrawerPosition as ai, DropdownItemNode as aj, FlexProps as ak, GridProps as al, HeightValue as am, IconSize as an, IconSizeToken as ao, InputType as ap, InteractiveProps as aq, JustifyValue as ar, ListItemNode as as, NavBlockItem as at, NavChild as au, NavDivider as av, NavGroupNode as aw, NavItem as ax, Position as ay, PositionProps as az, AlertNode as b, AvatarNode as c, BreadcrumbNode as d, ButtonNode as e, CheckboxNode as f, ColNode as g, ContainerComponentNode as h, ContainerNode as i, DisplayNode as j, DividerComponentNode as k, DrawerNode as l, DropdownNode as m, FooterNode as n, ImageNode as o, InputComponentNode as p, InputNode as q, LeafNode as r, LinkNode as s, ListNode as t, ModalNode as u, NavigationNode as v, NodeType as w, PlaceholderNode as x, PopoverNode as y, ProgressNode as z };
+export type { ToastNode as $, AnyNode as A, BadgeNode as B, CardNode as C, DataNode as D, RowNode as E, FeedbackNode as F, GridNode as G, HeaderNode as H, IconNode as I, SelectNode as J, SidebarNode as K, LayoutNode as L, MainNode as M, NavNode as N, OverlayNode as O, PageNode as P, SliderNode as Q, RadioNode as R, SectionNode as S, SpinnerNode as T, SwitchNode as U, TableNode as V, TabsNode as W, TextContentNode as X, TextNode as Y, TextareaNode as Z, TitleNode as _, AccordionNode as a, TooltipNode as a0, WireframeDocument as a1, AlertVariant as a2, AlignValue as a3, AnchorPosition as a4, AppearanceProps as a5, AvatarSize as a6, AvatarSizeToken as a7, BadgeSize as a8, BadgeSizeToken as a9, PositionProps as aA, RelativeNode as aB, SelectOption as aC, ShadowValue as aD, SizeProps as aE, SourceLocation as aF, SpacingProps as aG, SpacingValue as aH, SpinnerSize as aI, SpinnerSizeToken as aJ, StackNode as aK, TabNode as aL, TextAlign as aM, TextSize as aN, TextSizeToken as aO, TextWeight as aP, TitleLevel as aQ, ToastPosition as aR, TooltipPosition as aS, ValueWithUnit as aT, WidthValue as aU, BadgeVariant as aa, BaseNode as ab, BreadcrumbItem as ac, ButtonSize as ad, ButtonSizeToken as ae, ButtonVariant as af, CommonProps as ag, DirectionValue as ah, DividerNode as ai, DrawerPosition as aj, DropdownItemNode as ak, FlexProps as al, GridProps as am, HeightValue as an, IconSize as ao, IconSizeToken as ap, InputType as aq, InteractiveProps as ar, JustifyValue as as, ListItemNode as at, NavBlockItem as au, NavChild as av, NavDivider as aw, NavGroupNode as ax, NavItem as ay, Position as az, AlertNode as b, AvatarNode as c, BreadcrumbNode as d, ButtonNode as e, CheckboxNode as f, ColNode as g, ContainerComponentNode as h, ContainerNode as i, DisplayNode as j, DividerComponentNode as k, DrawerNode as l, DropdownNode as m, FooterNode as n, ImageNode as o, InputComponentNode as p, InputNode as q, LeafNode as r, LinkNode as s, ListNode as t, ModalNode as u, NavigationNode as v, NodeType as w, PlaceholderNode as x, PopoverNode as y, ProgressNode as z };

package/dist/{types-D0t4JRY3.d.ts → types-D_1QkAXo.d.ts}

@@ -169,6 +169,36 @@ interface ColNode extends BaseNode, CommonProps {
     scroll?: boolean;
     children: AnyNode[];
 }
+/**
+ * Stack - Vertical content grouping container
+ *
+ * Unlike Col which fills available space (flex: 1),
+ * Stack only takes up the space needed by its content (flex: 0 0 auto).
+ *
+ * Use cases:
+ * - Grouping form fields vertically
+ * - Card content layout
+ * - Centering content with justify/align
+ */
+interface StackNode extends BaseNode, CommonProps {
+    type: 'Stack';
+    children: AnyNode[];
+}
+/**
+ * Relative - Position children with absolute positioning
+ *
+ * Creates a position: relative container.
+ * First child is the base element, subsequent children are overlaid on top.
+ * Child elements can use `anchor` attribute to specify position:
+ * - top-left, top-center, top-right
+ * - center-left, center, center-right
+ * - bottom-left, bottom-center, bottom-right
+ */
+interface RelativeNode extends BaseNode, CommonProps {
+    type: 'Relative';
+    children: AnyNode[];
+}
+type AnchorPosition = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 type ShadowValue = 'none' | 'sm' | 'md' | 'lg' | 'xl';
 interface CardNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Card';
@@ -330,6 +360,8 @@ interface BadgeNode extends BaseNode, CommonProps, InteractiveProps {
     pill?: boolean;
     icon?: string;
     size?: BadgeSize;
+    /** Anchor position when inside an overlay container */
+    anchor?: AnchorPosition;
 }
 type IconSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type IconSize = IconSizeToken | number | ValueWithUnit;
@@ -475,7 +507,7 @@ interface DividerComponentNode extends BaseNode, CommonProps {
     type: 'Divider';
 }
 type LayoutNode = PageNode | HeaderNode | MainNode | FooterNode | SidebarNode | SectionNode;
-type GridNode = RowNode | ColNode;
+type GridNode = RowNode | ColNode | StackNode | RelativeNode;
 type ContainerComponentNode = CardNode | ModalNode | DrawerNode | AccordionNode;
 type TextContentNode = TextNode | TitleNode | LinkNode;
 type InputComponentNode = InputNode | TextareaNode | SelectNode | CheckboxNode | RadioNode | SwitchNode | SliderNode;
@@ -487,6 +519,6 @@ type NavigationNode = NavNode | TabsNode | BreadcrumbNode;
 type ContainerNode = LayoutNode | GridNode | ContainerComponentNode | PopoverNode | TooltipNode;
 type LeafNode = TextContentNode | InputComponentNode | ButtonNode | DisplayNode | DataNode | FeedbackNode | DropdownNode | NavigationNode | DividerComponentNode;
 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';
+type NodeType = 'Document' | 'Page' | 'Header' | 'Main' | 'Footer' | 'Sidebar' | 'Section' | 'Row' | 'Col' | 'Stack' | 'Relative' | '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 { ToastNode as $, AnyNode as A, BadgeNode as B, CardNode as C, DataNode as D, RowNode as E, FeedbackNode as F, GridNode as G, HeaderNode as H, IconNode as I, SelectNode as J, SidebarNode as K, LayoutNode as L, MainNode as M, NavNode as N, OverlayNode as O, PageNode as P, SliderNode as Q, RadioNode as R, SectionNode as S, SpinnerNode as T, SwitchNode as U, TableNode as V, TabsNode as W, TextContentNode as X, TextNode as Y, TextareaNode as Z, TitleNode as _, AccordionNode as a, TooltipNode as a0, WireframeDocument as a1, AlertVariant as a2, AlignValue as a3, AppearanceProps as a4, AvatarSize as a5, AvatarSizeToken as a6, BadgeSize as a7, BadgeSizeToken as a8, BadgeVariant as a9, SelectOption as aA, ShadowValue as aB, SizeProps as aC, SourceLocation as aD, SpacingProps as aE, SpacingValue as aF, SpinnerSize as aG, SpinnerSizeToken as aH, TabNode as aI, TextAlign as aJ, TextSize as aK, TextSizeToken as aL, TextWeight as aM, TitleLevel as aN, ToastPosition as aO, TooltipPosition as aP, ValueWithUnit as aQ, WidthValue as aR, BaseNode as aa, BreadcrumbItem as ab, ButtonSize as ac, ButtonSizeToken as ad, ButtonVariant as ae, CommonProps as af, DirectionValue as ag, DividerNode as ah, DrawerPosition as ai, DropdownItemNode as aj, FlexProps as ak, GridProps as al, HeightValue as am, IconSize as an, IconSizeToken as ao, InputType as ap, InteractiveProps as aq, JustifyValue as ar, ListItemNode as as, NavBlockItem as at, NavChild as au, NavDivider as av, NavGroupNode as aw, NavItem as ax, Position as ay, PositionProps as az, AlertNode as b, AvatarNode as c, BreadcrumbNode as d, ButtonNode as e, CheckboxNode as f, ColNode as g, ContainerComponentNode as h, ContainerNode as i, DisplayNode as j, DividerComponentNode as k, DrawerNode as l, DropdownNode as m, FooterNode as n, ImageNode as o, InputComponentNode as p, InputNode as q, LeafNode as r, LinkNode as s, ListNode as t, ModalNode as u, NavigationNode as v, NodeType as w, PlaceholderNode as x, PopoverNode as y, ProgressNode as z };
+export type { ToastNode as $, AnyNode as A, BadgeNode as B, CardNode as C, DataNode as D, RowNode as E, FeedbackNode as F, GridNode as G, HeaderNode as H, IconNode as I, SelectNode as J, SidebarNode as K, LayoutNode as L, MainNode as M, NavNode as N, OverlayNode as O, PageNode as P, SliderNode as Q, RadioNode as R, SectionNode as S, SpinnerNode as T, SwitchNode as U, TableNode as V, TabsNode as W, TextContentNode as X, TextNode as Y, TextareaNode as Z, TitleNode as _, AccordionNode as a, TooltipNode as a0, WireframeDocument as a1, AlertVariant as a2, AlignValue as a3, AnchorPosition as a4, AppearanceProps as a5, AvatarSize as a6, AvatarSizeToken as a7, BadgeSize as a8, BadgeSizeToken as a9, PositionProps as aA, RelativeNode as aB, SelectOption as aC, ShadowValue as aD, SizeProps as aE, SourceLocation as aF, SpacingProps as aG, SpacingValue as aH, SpinnerSize as aI, SpinnerSizeToken as aJ, StackNode as aK, TabNode as aL, TextAlign as aM, TextSize as aN, TextSizeToken as aO, TextWeight as aP, TitleLevel as aQ, ToastPosition as aR, TooltipPosition as aS, ValueWithUnit as aT, WidthValue as aU, BadgeVariant as aa, BaseNode as ab, BreadcrumbItem as ac, ButtonSize as ad, ButtonSizeToken as ae, ButtonVariant as af, CommonProps as ag, DirectionValue as ah, DividerNode as ai, DrawerPosition as aj, DropdownItemNode as ak, FlexProps as al, GridProps as am, HeightValue as an, IconSize as ao, IconSizeToken as ap, InputType as aq, InteractiveProps as ar, JustifyValue as as, ListItemNode as at, NavBlockItem as au, NavChild as av, NavDivider as aw, NavGroupNode as ax, NavItem as ay, Position as az, AlertNode as b, AvatarNode as c, BreadcrumbNode as d, ButtonNode as e, CheckboxNode as f, ColNode as g, ContainerComponentNode as h, ContainerNode as i, DisplayNode as j, DividerComponentNode as k, DrawerNode as l, DropdownNode as m, FooterNode as n, ImageNode as o, InputComponentNode as p, InputNode as q, LeafNode as r, LinkNode as s, ListNode as t, ModalNode as u, NavigationNode as v, NodeType as w, PlaceholderNode as x, PopoverNode as y, ProgressNode as z };

package/package.json

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