@wireweave/core 2.1.0 → 2.2.0-beta.0

package/dist/index.cjs

@@ -8242,15 +8242,28 @@ ${html}
 function buildClassString(classes) {
   return classes.filter(Boolean).join(" ");
 }
+function isValueWithUnit(value) {
+  return typeof value === "object" && value !== null && "value" in value && "unit" in value;
+}
 var SIZE_TOKENS = {
   icon: { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 },
   avatar: { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 },
-  spinner: { xs: 12, sm: 16, md: 24, lg: 32, xl: 48 }
+  spinner: { xs: 12, sm: 16, md: 24, lg: 32, xl: 48 },
+  button: { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 },
+  badge: { xs: 10, sm: 12, md: 14, lg: 16, xl: 18 }
 };
+var FONT_SIZED_COMPONENTS = ["button", "badge"];
 function resolveSizeValue(size, componentType, prefix) {
   if (size === void 0) {
     return {};
   }
+  if (isValueWithUnit(size)) {
+    const cssValue = `${size.value}${size.unit}`;
+    if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+      return { style: `font-size: ${cssValue}` };
+    }
+    return { style: `width: ${cssValue}; height: ${cssValue}` };
+  }
   if (typeof size === "string") {
     const tokens = SIZE_TOKENS[componentType];
     if (size in tokens) {
@@ -8258,12 +8271,18 @@ function resolveSizeValue(size, componentType, prefix) {
     }
     const parsed = parseInt(size, 10);
     if (!isNaN(parsed)) {
-      return { style: `width: ${parsed}px; height: ${parsed}px;` };
+      if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+        return { style: `font-size: ${parsed}px` };
+      }
+      return { style: `width: ${parsed}px; height: ${parsed}px` };
     }
     return {};
   }
   if (typeof size === "number") {
-    return { style: `width: ${size}px; height: ${size}px;` };
+    if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+      return { style: `font-size: ${size}px` };
+    }
+    return { style: `width: ${size}px; height: ${size}px` };
   }
   return {};
 }
@@ -8450,16 +8469,45 @@ ${children}
 }
 
 // src/renderer/html/renderers/text.ts
+function isValueWithUnit2(value) {
+  return typeof value === "object" && value !== null && "value" in value && "unit" in value;
+}
+function isCustomSize(size) {
+  if (size === void 0) return false;
+  return typeof size === "number" || isValueWithUnit2(size);
+}
+function resolveCustomFontSize(size) {
+  if (size === void 0) return void 0;
+  if (isValueWithUnit2(size)) {
+    return `${size.value}${size.unit}`;
+  }
+  if (typeof size === "number") {
+    return `${size}px`;
+  }
+  return void 0;
+}
+function getSizeClassName(size, prefix) {
+  if (size === void 0) return void 0;
+  if (isCustomSize(size)) {
+    return void 0;
+  }
+  return `${prefix}-text-${size}`;
+}
 function renderText(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-text`,
-    node.size ? `${ctx.prefix}-text-${node.size}` : void 0,
+    getSizeClassName(node.size, ctx.prefix),
     node.weight ? `${ctx.prefix}-text-${node.weight}` : void 0,
     node.align ? `${ctx.prefix}-text-${node.align}` : void 0,
     node.muted ? `${ctx.prefix}-text-muted` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
+  const stylesParts = [];
+  const commonStyles = ctx.buildCommonStyles(node);
+  if (commonStyles) stylesParts.push(commonStyles);
+  const customFontSize = resolveCustomFontSize(node.size);
+  if (customFontSize) stylesParts.push(`font-size: ${customFontSize}`);
+  const styles = stylesParts.join("; ");
   const styleAttr = styles ? ` style="${styles}"` : "";
   return `<p class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</p>`;
 }
@@ -8468,11 +8516,16 @@ function renderTitle(node, ctx) {
   const tag = `h${level}`;
   const classes = ctx.buildClassString([
     `${ctx.prefix}-title`,
-    node.size ? `${ctx.prefix}-text-${node.size}` : void 0,
+    getSizeClassName(node.size, ctx.prefix),
     node.align ? `${ctx.prefix}-text-${node.align}` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
+  const stylesParts = [];
+  const commonStyles = ctx.buildCommonStyles(node);
+  if (commonStyles) stylesParts.push(commonStyles);
+  const customFontSize = resolveCustomFontSize(node.size);
+  if (customFontSize) stylesParts.push(`font-size: ${customFontSize}`);
+  const styles = stylesParts.join("; ");
   const styleAttr = styles ? ` style="${styles}"` : "";
   return `<${tag} class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</${tag}>`;
 }
@@ -54901,6 +54954,7 @@ function renderIconSvg(data, _size = 24, strokeWidth = 2, className = "", styleA
 // src/renderer/html/renderers/button.ts
 function renderButton(node, ctx) {
   const isIconOnly = node.icon && (!node.content.trim() || node.content === "Button");
+  const sizeResolved = resolveSizeValue(node.size, "button", ctx.prefix);
   const classes = ctx.buildClassString([
     `${ctx.prefix}-button`,
     node.primary ? `${ctx.prefix}-button-primary` : void 0,
@@ -54908,14 +54962,16 @@ function renderButton(node, ctx) {
     node.outline ? `${ctx.prefix}-button-outline` : void 0,
     node.ghost ? `${ctx.prefix}-button-ghost` : void 0,
     node.danger ? `${ctx.prefix}-button-danger` : void 0,
-    node.size ? `${ctx.prefix}-button-${node.size}` : void 0,
+    sizeResolved.className,
     node.disabled ? `${ctx.prefix}-button-disabled` : void 0,
     node.loading ? `${ctx.prefix}-button-loading` : void 0,
     isIconOnly ? `${ctx.prefix}-button-icon-only` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
-  const styleAttr = styles ? ` style="${styles}"` : "";
+  const baseStyles = ctx.buildCommonStyles(node);
+  const sizeStyle = sizeResolved.style || "";
+  const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
+  const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   const attrs = {
     class: classes,
     disabled: node.disabled,
@@ -55237,16 +55293,19 @@ function renderAvatar(node, ctx) {
 function renderBadge(node, ctx) {
   const interactiveAttrs = buildInteractiveAttrs2(node);
   const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  const sizeResolved = resolveSizeValue(node.size, "badge", ctx.prefix);
   if (node.icon) {
     const iconData = getIconData(node.icon);
     const classes2 = ctx.buildClassString([
       `${ctx.prefix}-badge-icon`,
-      node.size ? `${ctx.prefix}-badge-icon-${node.size}` : void 0,
+      sizeResolved.className,
       node.variant ? `${ctx.prefix}-badge-icon-${node.variant}` : void 0,
       ...ctx.getCommonClasses(node)
     ]);
-    const styles2 = ctx.buildCommonStyles(node);
-    const styleAttr2 = styles2 ? ` style="${styles2}"` : "";
+    const baseStyles2 = ctx.buildCommonStyles(node);
+    const sizeStyle2 = sizeResolved.style || "";
+    const combinedStyles2 = baseStyles2 && sizeStyle2 ? `${baseStyles2}; ${sizeStyle2}` : baseStyles2 || sizeStyle2;
+    const styleAttr2 = combinedStyles2 ? ` style="${combinedStyles2}"` : "";
     if (iconData) {
       const svg = renderIconSvg(iconData, 24, 2, `${ctx.prefix}-icon`);
       return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
@@ -55257,12 +55316,15 @@ function renderBadge(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-badge`,
     isDot ? `${ctx.prefix}-badge-dot` : void 0,
+    sizeResolved.className,
     node.variant ? `${ctx.prefix}-badge-${node.variant}` : void 0,
     node.pill ? `${ctx.prefix}-badge-pill` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
-  const styleAttr = styles ? ` style="${styles}"` : "";
+  const baseStyles = ctx.buildCommonStyles(node);
+  const sizeStyle = sizeResolved.style || "";
+  const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
+  const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   return `<span class="${classes}"${styleAttr}${interactiveAttrStr}>${ctx.escapeHtml(node.content)}</span>`;
 }
 function renderIcon(node, ctx) {
@@ -55616,12 +55678,12 @@ function resolveSpacingValue(value) {
   }
   return void 0;
 }
-function isValueWithUnit(value) {
+function isValueWithUnit3(value) {
   return typeof value === "object" && value !== null && "value" in value && "unit" in value;
 }
 function resolveSizeValueToCss(value) {
   if (value === void 0) return void 0;
-  if (isValueWithUnit(value)) {
+  if (isValueWithUnit3(value)) {
     return `${value.value}${value.unit}`;
   }
   if (typeof value === "number") {

package/dist/index.d.cts

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

@@ -8102,15 +8102,28 @@ ${html}
 function buildClassString(classes) {
   return classes.filter(Boolean).join(" ");
 }
+function isValueWithUnit(value) {
+  return typeof value === "object" && value !== null && "value" in value && "unit" in value;
+}
 var SIZE_TOKENS = {
   icon: { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 },
   avatar: { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 },
-  spinner: { xs: 12, sm: 16, md: 24, lg: 32, xl: 48 }
+  spinner: { xs: 12, sm: 16, md: 24, lg: 32, xl: 48 },
+  button: { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 },
+  badge: { xs: 10, sm: 12, md: 14, lg: 16, xl: 18 }
 };
+var FONT_SIZED_COMPONENTS = ["button", "badge"];
 function resolveSizeValue(size, componentType, prefix) {
   if (size === void 0) {
     return {};
   }
+  if (isValueWithUnit(size)) {
+    const cssValue = `${size.value}${size.unit}`;
+    if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+      return { style: `font-size: ${cssValue}` };
+    }
+    return { style: `width: ${cssValue}; height: ${cssValue}` };
+  }
   if (typeof size === "string") {
     const tokens = SIZE_TOKENS[componentType];
     if (size in tokens) {
@@ -8118,12 +8131,18 @@ function resolveSizeValue(size, componentType, prefix) {
     }
     const parsed = parseInt(size, 10);
     if (!isNaN(parsed)) {
-      return { style: `width: ${parsed}px; height: ${parsed}px;` };
+      if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+        return { style: `font-size: ${parsed}px` };
+      }
+      return { style: `width: ${parsed}px; height: ${parsed}px` };
     }
     return {};
   }
   if (typeof size === "number") {
-    return { style: `width: ${size}px; height: ${size}px;` };
+    if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+      return { style: `font-size: ${size}px` };
+    }
+    return { style: `width: ${size}px; height: ${size}px` };
   }
   return {};
 }
@@ -8310,16 +8329,45 @@ ${children}
 }
 
 // src/renderer/html/renderers/text.ts
+function isValueWithUnit2(value) {
+  return typeof value === "object" && value !== null && "value" in value && "unit" in value;
+}
+function isCustomSize(size) {
+  if (size === void 0) return false;
+  return typeof size === "number" || isValueWithUnit2(size);
+}
+function resolveCustomFontSize(size) {
+  if (size === void 0) return void 0;
+  if (isValueWithUnit2(size)) {
+    return `${size.value}${size.unit}`;
+  }
+  if (typeof size === "number") {
+    return `${size}px`;
+  }
+  return void 0;
+}
+function getSizeClassName(size, prefix) {
+  if (size === void 0) return void 0;
+  if (isCustomSize(size)) {
+    return void 0;
+  }
+  return `${prefix}-text-${size}`;
+}
 function renderText(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-text`,
-    node.size ? `${ctx.prefix}-text-${node.size}` : void 0,
+    getSizeClassName(node.size, ctx.prefix),
     node.weight ? `${ctx.prefix}-text-${node.weight}` : void 0,
     node.align ? `${ctx.prefix}-text-${node.align}` : void 0,
     node.muted ? `${ctx.prefix}-text-muted` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
+  const stylesParts = [];
+  const commonStyles = ctx.buildCommonStyles(node);
+  if (commonStyles) stylesParts.push(commonStyles);
+  const customFontSize = resolveCustomFontSize(node.size);
+  if (customFontSize) stylesParts.push(`font-size: ${customFontSize}`);
+  const styles = stylesParts.join("; ");
   const styleAttr = styles ? ` style="${styles}"` : "";
   return `<p class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</p>`;
 }
@@ -8328,11 +8376,16 @@ function renderTitle(node, ctx) {
   const tag = `h${level}`;
   const classes = ctx.buildClassString([
     `${ctx.prefix}-title`,
-    node.size ? `${ctx.prefix}-text-${node.size}` : void 0,
+    getSizeClassName(node.size, ctx.prefix),
     node.align ? `${ctx.prefix}-text-${node.align}` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
+  const stylesParts = [];
+  const commonStyles = ctx.buildCommonStyles(node);
+  if (commonStyles) stylesParts.push(commonStyles);
+  const customFontSize = resolveCustomFontSize(node.size);
+  if (customFontSize) stylesParts.push(`font-size: ${customFontSize}`);
+  const styles = stylesParts.join("; ");
   const styleAttr = styles ? ` style="${styles}"` : "";
   return `<${tag} class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</${tag}>`;
 }
@@ -54761,6 +54814,7 @@ function renderIconSvg(data, _size = 24, strokeWidth = 2, className = "", styleA
 // src/renderer/html/renderers/button.ts
 function renderButton(node, ctx) {
   const isIconOnly = node.icon && (!node.content.trim() || node.content === "Button");
+  const sizeResolved = resolveSizeValue(node.size, "button", ctx.prefix);
   const classes = ctx.buildClassString([
     `${ctx.prefix}-button`,
     node.primary ? `${ctx.prefix}-button-primary` : void 0,
@@ -54768,14 +54822,16 @@ function renderButton(node, ctx) {
     node.outline ? `${ctx.prefix}-button-outline` : void 0,
     node.ghost ? `${ctx.prefix}-button-ghost` : void 0,
     node.danger ? `${ctx.prefix}-button-danger` : void 0,
-    node.size ? `${ctx.prefix}-button-${node.size}` : void 0,
+    sizeResolved.className,
     node.disabled ? `${ctx.prefix}-button-disabled` : void 0,
     node.loading ? `${ctx.prefix}-button-loading` : void 0,
     isIconOnly ? `${ctx.prefix}-button-icon-only` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
-  const styleAttr = styles ? ` style="${styles}"` : "";
+  const baseStyles = ctx.buildCommonStyles(node);
+  const sizeStyle = sizeResolved.style || "";
+  const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
+  const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   const attrs = {
     class: classes,
     disabled: node.disabled,
@@ -55097,16 +55153,19 @@ function renderAvatar(node, ctx) {
 function renderBadge(node, ctx) {
   const interactiveAttrs = buildInteractiveAttrs2(node);
   const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  const sizeResolved = resolveSizeValue(node.size, "badge", ctx.prefix);
   if (node.icon) {
     const iconData = getIconData(node.icon);
     const classes2 = ctx.buildClassString([
       `${ctx.prefix}-badge-icon`,
-      node.size ? `${ctx.prefix}-badge-icon-${node.size}` : void 0,
+      sizeResolved.className,
       node.variant ? `${ctx.prefix}-badge-icon-${node.variant}` : void 0,
       ...ctx.getCommonClasses(node)
     ]);
-    const styles2 = ctx.buildCommonStyles(node);
-    const styleAttr2 = styles2 ? ` style="${styles2}"` : "";
+    const baseStyles2 = ctx.buildCommonStyles(node);
+    const sizeStyle2 = sizeResolved.style || "";
+    const combinedStyles2 = baseStyles2 && sizeStyle2 ? `${baseStyles2}; ${sizeStyle2}` : baseStyles2 || sizeStyle2;
+    const styleAttr2 = combinedStyles2 ? ` style="${combinedStyles2}"` : "";
     if (iconData) {
       const svg = renderIconSvg(iconData, 24, 2, `${ctx.prefix}-icon`);
       return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
@@ -55117,12 +55176,15 @@ function renderBadge(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-badge`,
     isDot ? `${ctx.prefix}-badge-dot` : void 0,
+    sizeResolved.className,
     node.variant ? `${ctx.prefix}-badge-${node.variant}` : void 0,
     node.pill ? `${ctx.prefix}-badge-pill` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
-  const styleAttr = styles ? ` style="${styles}"` : "";
+  const baseStyles = ctx.buildCommonStyles(node);
+  const sizeStyle = sizeResolved.style || "";
+  const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
+  const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   return `<span class="${classes}"${styleAttr}${interactiveAttrStr}>${ctx.escapeHtml(node.content)}</span>`;
 }
 function renderIcon(node, ctx) {
@@ -55476,12 +55538,12 @@ function resolveSpacingValue(value) {
   }
   return void 0;
 }
-function isValueWithUnit(value) {
+function isValueWithUnit3(value) {
   return typeof value === "object" && value !== null && "value" in value && "unit" in value;
 }
 function resolveSizeValueToCss(value) {
   if (value === void 0) return void 0;
-  if (isValueWithUnit(value)) {
+  if (isValueWithUnit3(value)) {
     return `${value.value}${value.unit}`;
   }
   if (typeof value === "number") {

package/dist/parser.d.cts

@@ -1,4 +1,4 @@
-import { ay as SourceLocation, a1 as WireframeDocument } from './types--qrZlQMM.cjs';
+import { aC as SourceLocation, a1 as WireframeDocument } from './types-D0G2UKwM.cjs';
 
 /**
  * Parser module for wireweave

package/dist/parser.d.ts

@@ -1,4 +1,4 @@
-import { ay as SourceLocation, a1 as WireframeDocument } from './types--qrZlQMM.js';
+import { aC as SourceLocation, a1 as WireframeDocument } from './types-D0G2UKwM.js';
 
 /**
  * Parser module for wireweave

package/dist/renderer.cjs

@@ -1893,15 +1893,28 @@ function resolveViewport(viewport, device) {
 function buildClassString(classes) {
   return classes.filter(Boolean).join(" ");
 }
+function isValueWithUnit(value) {
+  return typeof value === "object" && value !== null && "value" in value && "unit" in value;
+}
 var SIZE_TOKENS = {
   icon: { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 },
   avatar: { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 },
-  spinner: { xs: 12, sm: 16, md: 24, lg: 32, xl: 48 }
+  spinner: { xs: 12, sm: 16, md: 24, lg: 32, xl: 48 },
+  button: { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 },
+  badge: { xs: 10, sm: 12, md: 14, lg: 16, xl: 18 }
 };
+var FONT_SIZED_COMPONENTS = ["button", "badge"];
 function resolveSizeValue(size, componentType, prefix) {
   if (size === void 0) {
     return {};
   }
+  if (isValueWithUnit(size)) {
+    const cssValue = `${size.value}${size.unit}`;
+    if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+      return { style: `font-size: ${cssValue}` };
+    }
+    return { style: `width: ${cssValue}; height: ${cssValue}` };
+  }
   if (typeof size === "string") {
     const tokens = SIZE_TOKENS[componentType];
     if (size in tokens) {
@@ -1909,12 +1922,18 @@ function resolveSizeValue(size, componentType, prefix) {
     }
     const parsed = parseInt(size, 10);
     if (!isNaN(parsed)) {
-      return { style: `width: ${parsed}px; height: ${parsed}px;` };
+      if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+        return { style: `font-size: ${parsed}px` };
+      }
+      return { style: `width: ${parsed}px; height: ${parsed}px` };
     }
     return {};
   }
   if (typeof size === "number") {
-    return { style: `width: ${size}px; height: ${size}px;` };
+    if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+      return { style: `font-size: ${size}px` };
+    }
+    return { style: `width: ${size}px; height: ${size}px` };
   }
   return {};
 }
@@ -2101,16 +2120,45 @@ ${children}
 }
 
 // src/renderer/html/renderers/text.ts
+function isValueWithUnit2(value) {
+  return typeof value === "object" && value !== null && "value" in value && "unit" in value;
+}
+function isCustomSize(size) {
+  if (size === void 0) return false;
+  return typeof size === "number" || isValueWithUnit2(size);
+}
+function resolveCustomFontSize(size) {
+  if (size === void 0) return void 0;
+  if (isValueWithUnit2(size)) {
+    return `${size.value}${size.unit}`;
+  }
+  if (typeof size === "number") {
+    return `${size}px`;
+  }
+  return void 0;
+}
+function getSizeClassName(size, prefix) {
+  if (size === void 0) return void 0;
+  if (isCustomSize(size)) {
+    return void 0;
+  }
+  return `${prefix}-text-${size}`;
+}
 function renderText(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-text`,
-    node.size ? `${ctx.prefix}-text-${node.size}` : void 0,
+    getSizeClassName(node.size, ctx.prefix),
     node.weight ? `${ctx.prefix}-text-${node.weight}` : void 0,
     node.align ? `${ctx.prefix}-text-${node.align}` : void 0,
     node.muted ? `${ctx.prefix}-text-muted` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
+  const stylesParts = [];
+  const commonStyles = ctx.buildCommonStyles(node);
+  if (commonStyles) stylesParts.push(commonStyles);
+  const customFontSize = resolveCustomFontSize(node.size);
+  if (customFontSize) stylesParts.push(`font-size: ${customFontSize}`);
+  const styles = stylesParts.join("; ");
   const styleAttr = styles ? ` style="${styles}"` : "";
   return `<p class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</p>`;
 }
@@ -2119,11 +2167,16 @@ function renderTitle(node, ctx) {
   const tag = `h${level}`;
   const classes = ctx.buildClassString([
     `${ctx.prefix}-title`,
-    node.size ? `${ctx.prefix}-text-${node.size}` : void 0,
+    getSizeClassName(node.size, ctx.prefix),
     node.align ? `${ctx.prefix}-text-${node.align}` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
+  const stylesParts = [];
+  const commonStyles = ctx.buildCommonStyles(node);
+  if (commonStyles) stylesParts.push(commonStyles);
+  const customFontSize = resolveCustomFontSize(node.size);
+  if (customFontSize) stylesParts.push(`font-size: ${customFontSize}`);
+  const styles = stylesParts.join("; ");
   const styleAttr = styles ? ` style="${styles}"` : "";
   return `<${tag} class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</${tag}>`;
 }
@@ -48552,6 +48605,7 @@ function renderIconSvg(data, _size = 24, strokeWidth = 2, className = "", styleA
 // src/renderer/html/renderers/button.ts
 function renderButton(node, ctx) {
   const isIconOnly = node.icon && (!node.content.trim() || node.content === "Button");
+  const sizeResolved = resolveSizeValue(node.size, "button", ctx.prefix);
   const classes = ctx.buildClassString([
     `${ctx.prefix}-button`,
     node.primary ? `${ctx.prefix}-button-primary` : void 0,
@@ -48559,14 +48613,16 @@ function renderButton(node, ctx) {
     node.outline ? `${ctx.prefix}-button-outline` : void 0,
     node.ghost ? `${ctx.prefix}-button-ghost` : void 0,
     node.danger ? `${ctx.prefix}-button-danger` : void 0,
-    node.size ? `${ctx.prefix}-button-${node.size}` : void 0,
+    sizeResolved.className,
     node.disabled ? `${ctx.prefix}-button-disabled` : void 0,
     node.loading ? `${ctx.prefix}-button-loading` : void 0,
     isIconOnly ? `${ctx.prefix}-button-icon-only` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
-  const styleAttr = styles ? ` style="${styles}"` : "";
+  const baseStyles = ctx.buildCommonStyles(node);
+  const sizeStyle = sizeResolved.style || "";
+  const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
+  const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   const attrs = {
     class: classes,
     disabled: node.disabled,
@@ -48888,16 +48944,19 @@ function renderAvatar(node, ctx) {
 function renderBadge(node, ctx) {
   const interactiveAttrs = buildInteractiveAttrs2(node);
   const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  const sizeResolved = resolveSizeValue(node.size, "badge", ctx.prefix);
   if (node.icon) {
     const iconData = getIconData(node.icon);
     const classes2 = ctx.buildClassString([
       `${ctx.prefix}-badge-icon`,
-      node.size ? `${ctx.prefix}-badge-icon-${node.size}` : void 0,
+      sizeResolved.className,
       node.variant ? `${ctx.prefix}-badge-icon-${node.variant}` : void 0,
       ...ctx.getCommonClasses(node)
     ]);
-    const styles2 = ctx.buildCommonStyles(node);
-    const styleAttr2 = styles2 ? ` style="${styles2}"` : "";
+    const baseStyles2 = ctx.buildCommonStyles(node);
+    const sizeStyle2 = sizeResolved.style || "";
+    const combinedStyles2 = baseStyles2 && sizeStyle2 ? `${baseStyles2}; ${sizeStyle2}` : baseStyles2 || sizeStyle2;
+    const styleAttr2 = combinedStyles2 ? ` style="${combinedStyles2}"` : "";
     if (iconData) {
       const svg = renderIconSvg(iconData, 24, 2, `${ctx.prefix}-icon`);
       return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
@@ -48908,12 +48967,15 @@ function renderBadge(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-badge`,
     isDot ? `${ctx.prefix}-badge-dot` : void 0,
+    sizeResolved.className,
     node.variant ? `${ctx.prefix}-badge-${node.variant}` : void 0,
     node.pill ? `${ctx.prefix}-badge-pill` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
-  const styleAttr = styles ? ` style="${styles}"` : "";
+  const baseStyles = ctx.buildCommonStyles(node);
+  const sizeStyle = sizeResolved.style || "";
+  const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
+  const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   return `<span class="${classes}"${styleAttr}${interactiveAttrStr}>${ctx.escapeHtml(node.content)}</span>`;
 }
 function renderIcon(node, ctx) {
@@ -49267,12 +49329,12 @@ function resolveSpacingValue(value) {
   }
   return void 0;
 }
-function isValueWithUnit(value) {
+function isValueWithUnit3(value) {
   return typeof value === "object" && value !== null && "value" in value && "unit" in value;
 }
 function resolveSizeValueToCss(value) {
   if (value === void 0) return void 0;
-  if (isValueWithUnit(value)) {
+  if (isValueWithUnit3(value)) {
     return `${value.value}${value.unit}`;
   }
   if (typeof value === "number") {

package/dist/renderer.d.cts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types--qrZlQMM.cjs';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-D0G2UKwM.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--qrZlQMM.js';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-D0G2UKwM.js';
 
 /**
  * Renderer type definitions for wireweave

package/dist/renderer.js

@@ -1855,15 +1855,28 @@ function resolveViewport(viewport, device) {
 function buildClassString(classes) {
   return classes.filter(Boolean).join(" ");
 }
+function isValueWithUnit(value) {
+  return typeof value === "object" && value !== null && "value" in value && "unit" in value;
+}
 var SIZE_TOKENS = {
   icon: { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 },
   avatar: { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 },
-  spinner: { xs: 12, sm: 16, md: 24, lg: 32, xl: 48 }
+  spinner: { xs: 12, sm: 16, md: 24, lg: 32, xl: 48 },
+  button: { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 },
+  badge: { xs: 10, sm: 12, md: 14, lg: 16, xl: 18 }
 };
+var FONT_SIZED_COMPONENTS = ["button", "badge"];
 function resolveSizeValue(size, componentType, prefix) {
   if (size === void 0) {
     return {};
   }
+  if (isValueWithUnit(size)) {
+    const cssValue = `${size.value}${size.unit}`;
+    if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+      return { style: `font-size: ${cssValue}` };
+    }
+    return { style: `width: ${cssValue}; height: ${cssValue}` };
+  }
   if (typeof size === "string") {
     const tokens = SIZE_TOKENS[componentType];
     if (size in tokens) {
@@ -1871,12 +1884,18 @@ function resolveSizeValue(size, componentType, prefix) {
     }
     const parsed = parseInt(size, 10);
     if (!isNaN(parsed)) {
-      return { style: `width: ${parsed}px; height: ${parsed}px;` };
+      if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+        return { style: `font-size: ${parsed}px` };
+      }
+      return { style: `width: ${parsed}px; height: ${parsed}px` };
     }
     return {};
   }
   if (typeof size === "number") {
-    return { style: `width: ${size}px; height: ${size}px;` };
+    if (FONT_SIZED_COMPONENTS.includes(componentType)) {
+      return { style: `font-size: ${size}px` };
+    }
+    return { style: `width: ${size}px; height: ${size}px` };
   }
   return {};
 }
@@ -2063,16 +2082,45 @@ ${children}
 }
 
 // src/renderer/html/renderers/text.ts
+function isValueWithUnit2(value) {
+  return typeof value === "object" && value !== null && "value" in value && "unit" in value;
+}
+function isCustomSize(size) {
+  if (size === void 0) return false;
+  return typeof size === "number" || isValueWithUnit2(size);
+}
+function resolveCustomFontSize(size) {
+  if (size === void 0) return void 0;
+  if (isValueWithUnit2(size)) {
+    return `${size.value}${size.unit}`;
+  }
+  if (typeof size === "number") {
+    return `${size}px`;
+  }
+  return void 0;
+}
+function getSizeClassName(size, prefix) {
+  if (size === void 0) return void 0;
+  if (isCustomSize(size)) {
+    return void 0;
+  }
+  return `${prefix}-text-${size}`;
+}
 function renderText(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-text`,
-    node.size ? `${ctx.prefix}-text-${node.size}` : void 0,
+    getSizeClassName(node.size, ctx.prefix),
     node.weight ? `${ctx.prefix}-text-${node.weight}` : void 0,
     node.align ? `${ctx.prefix}-text-${node.align}` : void 0,
     node.muted ? `${ctx.prefix}-text-muted` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
+  const stylesParts = [];
+  const commonStyles = ctx.buildCommonStyles(node);
+  if (commonStyles) stylesParts.push(commonStyles);
+  const customFontSize = resolveCustomFontSize(node.size);
+  if (customFontSize) stylesParts.push(`font-size: ${customFontSize}`);
+  const styles = stylesParts.join("; ");
   const styleAttr = styles ? ` style="${styles}"` : "";
   return `<p class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</p>`;
 }
@@ -2081,11 +2129,16 @@ function renderTitle(node, ctx) {
   const tag = `h${level}`;
   const classes = ctx.buildClassString([
     `${ctx.prefix}-title`,
-    node.size ? `${ctx.prefix}-text-${node.size}` : void 0,
+    getSizeClassName(node.size, ctx.prefix),
     node.align ? `${ctx.prefix}-text-${node.align}` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
+  const stylesParts = [];
+  const commonStyles = ctx.buildCommonStyles(node);
+  if (commonStyles) stylesParts.push(commonStyles);
+  const customFontSize = resolveCustomFontSize(node.size);
+  if (customFontSize) stylesParts.push(`font-size: ${customFontSize}`);
+  const styles = stylesParts.join("; ");
   const styleAttr = styles ? ` style="${styles}"` : "";
   return `<${tag} class="${classes}"${styleAttr}>${ctx.escapeHtml(node.content)}</${tag}>`;
 }
@@ -48514,6 +48567,7 @@ function renderIconSvg(data, _size = 24, strokeWidth = 2, className = "", styleA
 // src/renderer/html/renderers/button.ts
 function renderButton(node, ctx) {
   const isIconOnly = node.icon && (!node.content.trim() || node.content === "Button");
+  const sizeResolved = resolveSizeValue(node.size, "button", ctx.prefix);
   const classes = ctx.buildClassString([
     `${ctx.prefix}-button`,
     node.primary ? `${ctx.prefix}-button-primary` : void 0,
@@ -48521,14 +48575,16 @@ function renderButton(node, ctx) {
     node.outline ? `${ctx.prefix}-button-outline` : void 0,
     node.ghost ? `${ctx.prefix}-button-ghost` : void 0,
     node.danger ? `${ctx.prefix}-button-danger` : void 0,
-    node.size ? `${ctx.prefix}-button-${node.size}` : void 0,
+    sizeResolved.className,
     node.disabled ? `${ctx.prefix}-button-disabled` : void 0,
     node.loading ? `${ctx.prefix}-button-loading` : void 0,
     isIconOnly ? `${ctx.prefix}-button-icon-only` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
-  const styleAttr = styles ? ` style="${styles}"` : "";
+  const baseStyles = ctx.buildCommonStyles(node);
+  const sizeStyle = sizeResolved.style || "";
+  const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
+  const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   const attrs = {
     class: classes,
     disabled: node.disabled,
@@ -48850,16 +48906,19 @@ function renderAvatar(node, ctx) {
 function renderBadge(node, ctx) {
   const interactiveAttrs = buildInteractiveAttrs2(node);
   const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
+  const sizeResolved = resolveSizeValue(node.size, "badge", ctx.prefix);
   if (node.icon) {
     const iconData = getIconData(node.icon);
     const classes2 = ctx.buildClassString([
       `${ctx.prefix}-badge-icon`,
-      node.size ? `${ctx.prefix}-badge-icon-${node.size}` : void 0,
+      sizeResolved.className,
       node.variant ? `${ctx.prefix}-badge-icon-${node.variant}` : void 0,
       ...ctx.getCommonClasses(node)
     ]);
-    const styles2 = ctx.buildCommonStyles(node);
-    const styleAttr2 = styles2 ? ` style="${styles2}"` : "";
+    const baseStyles2 = ctx.buildCommonStyles(node);
+    const sizeStyle2 = sizeResolved.style || "";
+    const combinedStyles2 = baseStyles2 && sizeStyle2 ? `${baseStyles2}; ${sizeStyle2}` : baseStyles2 || sizeStyle2;
+    const styleAttr2 = combinedStyles2 ? ` style="${combinedStyles2}"` : "";
     if (iconData) {
       const svg = renderIconSvg(iconData, 24, 2, `${ctx.prefix}-icon`);
       return `<span class="${classes2}"${styleAttr2}${interactiveAttrStr} aria-label="${ctx.escapeHtml(node.icon)}">${svg}</span>`;
@@ -48870,12 +48929,15 @@ function renderBadge(node, ctx) {
   const classes = ctx.buildClassString([
     `${ctx.prefix}-badge`,
     isDot ? `${ctx.prefix}-badge-dot` : void 0,
+    sizeResolved.className,
     node.variant ? `${ctx.prefix}-badge-${node.variant}` : void 0,
     node.pill ? `${ctx.prefix}-badge-pill` : void 0,
     ...ctx.getCommonClasses(node)
   ]);
-  const styles = ctx.buildCommonStyles(node);
-  const styleAttr = styles ? ` style="${styles}"` : "";
+  const baseStyles = ctx.buildCommonStyles(node);
+  const sizeStyle = sizeResolved.style || "";
+  const combinedStyles = baseStyles && sizeStyle ? `${baseStyles}; ${sizeStyle}` : baseStyles || sizeStyle;
+  const styleAttr = combinedStyles ? ` style="${combinedStyles}"` : "";
   return `<span class="${classes}"${styleAttr}${interactiveAttrStr}>${ctx.escapeHtml(node.content)}</span>`;
 }
 function renderIcon(node, ctx) {
@@ -49229,12 +49291,12 @@ function resolveSpacingValue(value) {
   }
   return void 0;
 }
-function isValueWithUnit(value) {
+function isValueWithUnit3(value) {
   return typeof value === "object" && value !== null && "value" in value && "unit" in value;
 }
 function resolveSizeValueToCss(value) {
   if (value === void 0) return void 0;
-  if (isValueWithUnit(value)) {
+  if (isValueWithUnit3(value)) {
     return `${value.value}${value.unit}`;
   }
   if (typeof value === "number") {

package/dist/{types--qrZlQMM.d.cts → types-D0G2UKwM.d.cts}

@@ -278,7 +278,8 @@ interface SliderNode extends BaseNode, CommonProps {
     disabled?: boolean;
 }
 type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ButtonSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ButtonSize = ButtonSizeToken | number | ValueWithUnit;
 interface ButtonNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Button';
     content: string;
@@ -302,15 +303,17 @@ interface PlaceholderNode extends BaseNode, CommonProps {
     label?: string | null;
     children?: AnyNode[];
 }
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarSize = AvatarSizeToken | number | ValueWithUnit;
 interface AvatarNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Avatar';
     name?: string | null;
     src?: boolean;
-    size?: AvatarSize | number;
+    size?: AvatarSize;
 }
 type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
-type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type BadgeSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type BadgeSize = BadgeSizeToken | number | ValueWithUnit;
 interface BadgeNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Badge';
     content: string;
@@ -319,11 +322,12 @@ interface BadgeNode extends BaseNode, CommonProps, InteractiveProps {
     icon?: string;
     size?: BadgeSize;
 }
-type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type IconSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type IconSize = IconSizeToken | number | ValueWithUnit;
 interface IconNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Icon';
     name: string;
-    size?: IconSize | number;
+    size?: IconSize;
     muted?: boolean;
 }
 interface TableNode extends BaseNode, CommonProps {
@@ -367,11 +371,12 @@ interface ProgressNode extends BaseNode, CommonProps {
     label?: string;
     indeterminate?: boolean;
 }
-type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerSize = SpinnerSizeToken | number | ValueWithUnit;
 interface SpinnerNode extends BaseNode, CommonProps {
     type: 'Spinner';
     label?: string | null;
-    size?: SpinnerSize | number;
+    size?: SpinnerSize;
 }
 type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 interface TooltipNode extends BaseNode, CommonProps {
@@ -475,4 +480,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 { 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, AvatarSize as a4, BadgeSize as a5, BadgeVariant as a6, BaseNode as a7, BreadcrumbItem as a8, ButtonSize as a9, SpacingValue as aA, SpinnerSize as aB, TabNode as aC, TextAlign as aD, TextSize as aE, TextSizeToken as aF, TextWeight as aG, TitleLevel as aH, ToastPosition as aI, TooltipPosition as aJ, ValueWithUnit as aK, WidthValue as aL, ButtonVariant as aa, CommonProps as ab, DirectionValue as ac, DividerNode as ad, DrawerPosition as ae, DropdownItemNode as af, FlexProps as ag, GridProps as ah, HeightValue as ai, IconSize as aj, InputType as ak, InteractiveProps as al, JustifyValue as am, ListItemNode as an, NavBlockItem as ao, NavChild as ap, NavDivider as aq, NavGroupNode as ar, NavItem as as, Position as at, PositionProps as au, SelectOption as av, ShadowValue as aw, SizeProps as ax, SourceLocation as ay, SpacingProps 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, AvatarSize as a4, AvatarSizeToken as a5, BadgeSize as a6, BadgeSizeToken as a7, BadgeVariant as a8, BaseNode as a9, ShadowValue as aA, SizeProps as aB, SourceLocation as aC, SpacingProps as aD, SpacingValue as aE, SpinnerSize as aF, SpinnerSizeToken as aG, TabNode as aH, TextAlign as aI, TextSize as aJ, TextSizeToken as aK, TextWeight as aL, TitleLevel as aM, ToastPosition as aN, TooltipPosition as aO, ValueWithUnit as aP, WidthValue as aQ, BreadcrumbItem as aa, ButtonSize as ab, ButtonSizeToken as ac, ButtonVariant as ad, CommonProps as ae, DirectionValue as af, DividerNode as ag, DrawerPosition as ah, DropdownItemNode as ai, FlexProps as aj, GridProps as ak, HeightValue as al, IconSize as am, IconSizeToken as an, InputType as ao, InteractiveProps as ap, JustifyValue as aq, ListItemNode as ar, NavBlockItem as as, NavChild as at, NavDivider as au, NavGroupNode as av, NavItem as aw, Position as ax, PositionProps as ay, SelectOption 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--qrZlQMM.d.ts → types-D0G2UKwM.d.ts}

@@ -278,7 +278,8 @@ interface SliderNode extends BaseNode, CommonProps {
     disabled?: boolean;
 }
 type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ButtonSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ButtonSize = ButtonSizeToken | number | ValueWithUnit;
 interface ButtonNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Button';
     content: string;
@@ -302,15 +303,17 @@ interface PlaceholderNode extends BaseNode, CommonProps {
     label?: string | null;
     children?: AnyNode[];
 }
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarSize = AvatarSizeToken | number | ValueWithUnit;
 interface AvatarNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Avatar';
     name?: string | null;
     src?: boolean;
-    size?: AvatarSize | number;
+    size?: AvatarSize;
 }
 type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
-type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type BadgeSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type BadgeSize = BadgeSizeToken | number | ValueWithUnit;
 interface BadgeNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Badge';
     content: string;
@@ -319,11 +322,12 @@ interface BadgeNode extends BaseNode, CommonProps, InteractiveProps {
     icon?: string;
     size?: BadgeSize;
 }
-type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type IconSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type IconSize = IconSizeToken | number | ValueWithUnit;
 interface IconNode extends BaseNode, CommonProps, InteractiveProps {
     type: 'Icon';
     name: string;
-    size?: IconSize | number;
+    size?: IconSize;
     muted?: boolean;
 }
 interface TableNode extends BaseNode, CommonProps {
@@ -367,11 +371,12 @@ interface ProgressNode extends BaseNode, CommonProps {
     label?: string;
     indeterminate?: boolean;
 }
-type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerSize = SpinnerSizeToken | number | ValueWithUnit;
 interface SpinnerNode extends BaseNode, CommonProps {
     type: 'Spinner';
     label?: string | null;
-    size?: SpinnerSize | number;
+    size?: SpinnerSize;
 }
 type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 interface TooltipNode extends BaseNode, CommonProps {
@@ -475,4 +480,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 { 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, AvatarSize as a4, BadgeSize as a5, BadgeVariant as a6, BaseNode as a7, BreadcrumbItem as a8, ButtonSize as a9, SpacingValue as aA, SpinnerSize as aB, TabNode as aC, TextAlign as aD, TextSize as aE, TextSizeToken as aF, TextWeight as aG, TitleLevel as aH, ToastPosition as aI, TooltipPosition as aJ, ValueWithUnit as aK, WidthValue as aL, ButtonVariant as aa, CommonProps as ab, DirectionValue as ac, DividerNode as ad, DrawerPosition as ae, DropdownItemNode as af, FlexProps as ag, GridProps as ah, HeightValue as ai, IconSize as aj, InputType as ak, InteractiveProps as al, JustifyValue as am, ListItemNode as an, NavBlockItem as ao, NavChild as ap, NavDivider as aq, NavGroupNode as ar, NavItem as as, Position as at, PositionProps as au, SelectOption as av, ShadowValue as aw, SizeProps as ax, SourceLocation as ay, SpacingProps 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, AvatarSize as a4, AvatarSizeToken as a5, BadgeSize as a6, BadgeSizeToken as a7, BadgeVariant as a8, BaseNode as a9, ShadowValue as aA, SizeProps as aB, SourceLocation as aC, SpacingProps as aD, SpacingValue as aE, SpinnerSize as aF, SpinnerSizeToken as aG, TabNode as aH, TextAlign as aI, TextSize as aJ, TextSizeToken as aK, TextWeight as aL, TitleLevel as aM, ToastPosition as aN, TooltipPosition as aO, ValueWithUnit as aP, WidthValue as aQ, BreadcrumbItem as aa, ButtonSize as ab, ButtonSizeToken as ac, ButtonVariant as ad, CommonProps as ae, DirectionValue as af, DividerNode as ag, DrawerPosition as ah, DropdownItemNode as ai, FlexProps as aj, GridProps as ak, HeightValue as al, IconSize as am, IconSizeToken as an, InputType as ao, InteractiveProps as ap, JustifyValue as aq, ListItemNode as ar, NavBlockItem as as, NavChild as at, NavDivider as au, NavGroupNode as av, NavItem as aw, Position as ax, PositionProps as ay, SelectOption 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.1.0",
+  "version": "2.2.0-beta.0",
   "description": "Core parser and renderer for wireweave",
   "type": "module",
   "main": "dist/index.js",