inkbridge 0.1.0-beta.2 → 0.1.0-beta.21

package/src/design-system/ui-builder.ts

@@ -0,0 +1,2676 @@
+// External modules (one import per source).
+import {
+  parseColor,
+  pxFromSizeToken,
+  extractTextColorToken,
+  resolveTextColorFallback,
+  resolveTextColorValue,
+  type RGB,
+} from '../tokens';
+import {
+  applyTailwindStylesToFrame,
+  applyNodeTransforms,
+  getCompoundClasses,
+  getClassesForBreakpoint,
+  isElementLikeNode,
+  mergeClasses,
+  resolveNodeIR,
+  resolveMaxWidth,
+  splitClassName,
+  getBaseClass,
+  type JsxNode,
+  type JsxElement,
+  type JsxText,
+  type NodeIR,
+  type NodeIRElement,
+  type NodeIRHelpers,
+} from '../tailwind';
+import {
+  applyAbsoluteIfPossible,
+  applyAspectRatioIfPossible,
+  applyDeferredPercentPositioning,
+  applyBorderWidthUtilities,
+  applyClipBehavior,
+  applyDeferredBottomPositioning,
+  applyDeferredCenterYPositioning,
+  applyFullWidthIfPossible,
+  applyRingIfPossible,
+  applyGridColumnsWithReflow,
+  enforceFixedBoxSizingAfterLayout,
+  enforceGrowChildPrimaryFixed,
+  extractGridColumns,
+  getNodeLayoutComputed,
+  LayoutParser,
+  markAbsoluteNode,
+  markAspectRatio,
+  markFullHeightNode,
+  markFullWidthNode,
+  markSvgContentWrap,
+  maybeWrapMxAuto,
+  resolveGridWidthOverride,
+  resolveTextResizeWidth,
+  setFrameCrossAlign,
+  shouldClipContent,
+  shouldSkipFullWidthForClasses,
+  shouldStretchToParentWidth,
+  solveLayoutWidths,
+} from '../layout';
+import {
+  analyzeSymbolPolicy,
+  createCompoundComponent,
+  findExistingThemedComponentNode,
+  getComponentDefByName,
+  getInstantiableComponent,
+  tryCreateCvaComponentInstance as tryCreateCvaComponentInstanceShared,
+  tryCreateNonCvaComponentInstance as tryCreateNonCvaComponentInstanceShared,
+  type InstanceBackend,
+  type ComponentDef,
+  type ComponentInstance,
+  type CvaAnalysis,
+} from '../components';
+import {
+  TAG_TYPOGRAPHY,
+  createInlineTextNode,
+  createTextNode,
+  getLineHeightFromClasses,
+  getNodeTextStyle,
+  getTextAlignFromClasses,
+  isInlineTextNode,
+  maybeExpandTextLineComponent,
+  type CreateTextOptions,
+} from '../text';
+import {
+  buildDecorativeClipPathNode,
+  createIconFromSvg,
+  injectPortalPanelHeights,
+  injectPortalPanelWidths,
+  nodeIrToSvg,
+  parseClipPathFromStyle,
+  resizeSvgNodeTo,
+} from '../effects';
+import { getImageHash, getSvgString } from '../cache';
+
+// Sibling design-system modules.
+import { defaultGridWidth } from './story-layout';
+import { type StoryBuilderContext } from './story-builder-context';
+import {
+  createUIComponents as createUIComponentsFromStory,
+  pruneGeneratedComponentLibrary as pruneGeneratedComponentLibraryFromStory,
+  type CreateUIComponentsOptions,
+} from './story-builder';
+import { ensureCvaComponentSet as ensureCvaComponentSetFromStory } from './cva-master';
+import {
+  isAccordionRootTag,
+  isAccordionItemTag,
+  isAccordionContentTag,
+  isAccordionHeaderTag,
+  isRadioGroupRootTag,
+  isRadioGroupItemTag,
+  isRadioGroupIndicatorTag,
+  isTabsRootTag,
+  isTabsTriggerTag,
+  isTabsContentTag,
+  isSelectRootTag,
+  isSelectContentTag,
+  isSelectTriggerTag,
+  isSelectValueTag,
+  isSelectItemTag,
+  isSelectItemIndicatorTag,
+  isPortalArrowTag,
+  isSelectScrollButtonTag,
+} from './tag-predicates';
+import { isTruthyStateProp } from './state-utils';
+import {
+  hasTableCellSizeOverride,
+  getNumericColSpan,
+  isSemanticTableContainer,
+  clearTopBorder,
+  clearBottomBorder,
+} from './table-helpers';
+import {
+  constrainSingleHorizontalTextChild,
+  stabilizeHorizontalStretchChild,
+  reflowMxAutoChildren,
+  applyVerticalMarginSpacing,
+  enforceTabsChildSizing,
+} from './frame-stabilizers';
+import {
+  unwrapTransparentWrapper,
+  createPerChildRenderContext,
+  getRenderableChildren,
+  shouldMergeDefBaseClassesForTag,
+  pickPreservedWrapperBaseClasses,
+  normalizeComponentDef,
+} from './node-helpers';
+import {
+  normalizeSelectableValue,
+  normalizeAccordionDefaultValue,
+  resolveAccordionItemValue,
+  resolveRadioItemChecked,
+  resolveTabsNodeActive,
+  resolveSelectItemSelected,
+  findSelectedSelectLabel,
+  findFirstSelectItemValue,
+  prettySelectValueLabel,
+  collectTextContent,
+} from './selectable-state';
+import {
+  getFontStyleFromClasses,
+  getResolvedTextSizeFromClasses,
+  getResolvedBoldFromClasses,
+} from './typography';
+import { expandActiveConditionalVariants } from './node-variants';
+import {
+  resolveNodeResponsiveClasses,
+  promoteFocusVariants,
+  resolveBreakpointIndexForWidth,
+  resolveClassesForBreakpoint,
+} from './responsive-resolver';
+import {
+  resolveIconForegroundColor,
+  wrapSvgIcon,
+  renderRegistryIcon,
+  renderMappedIcon,
+} from './icon-rendering';
+import { inferCvaDefFromClasses, buildCvaInstanceProps } from './cva-inference';
+import { toFigmaVariantPropertyName, toFigmaVariantPropertyValue } from './master-shared';
+import { applyTextOverrideToInstance } from './symbol-fallback';
+import {
+  type RenderContext,
+  hasWidthHintInClasses,
+  propsContainWidthHint,
+  hasExplicitHeight,
+} from './render-context';
+import { setGeneratedSymbolDebugData } from './generated-node';
+
+/**
+ * Inline SVGs flow through the icon-rendering path which sizes them via
+ * `resolveIconSizeFromClasses` (defaults to 24×24 when no `size-*` / `w-*`
+ * / `h-*` numeric class is present). When the source SVG instead carries
+ * fill-parent classes — `h-full`, `w-full`, `inset-0`, `inset-x-0`,
+ * `inset-y-0`, or `aspect-{n}/{m}` — propagate those marks onto the wrapped
+ * frame so the existing layout pipeline (`applyFullWidthIfPossible`,
+ * `applyAspectRatioIfPossible`) resizes it like any other div would.
+ *
+ * The wrap originally contains a 24×24 SVG icon node. When the wrap is
+ * later resized to fill its parent (e.g. 720×432 for an `aspect-5/3`
+ * overlay), the inner SVG vectors don't auto-scale — `resize()` on the
+ * outer frame leaves them at 24×24. Register a resize hook so the layout
+ * pipeline rescales the inner SVG via `resizeSvgNodeTo` when it resizes
+ * the wrap. Required for both `<svg className="absolute inset-0 h-full
+ * w-full">` overlays AND `aspect-*` SVGs sized via aspect-ratio retry.
+ */
+function applySvgLayoutMarksFromClasses(
+  wrapped: SceneNode,
+  classes: string[] | undefined,
+  inner: SceneNode | null,
+  svgProps?: Record<string, unknown>
+): void {
+  let needsContentScale = false;
+  // SVG HTML attrs `width="100%"` / `height="100%"` (used by e.g. the
+  // Bridge SVG: `<svg width="100%" height="100%" ...>`) signal the same
+  // fill-parent intent as Tailwind `w-full` / `h-full`. The icon-size
+  // resolver now skips % values, so without this the wrap defaults to
+  // a 24×24 icon size and never grows.
+  if (svgProps) {
+    const w = svgProps.width;
+    const h = svgProps.height;
+    if (typeof w === 'string' && /%\s*$/.test(w.trim())) {
+      markFullWidthNode(wrapped);
+      needsContentScale = true;
+    }
+    if (typeof h === 'string' && /%\s*$/.test(h.trim())) {
+      markFullHeightNode(wrapped);
+      needsContentScale = true;
+    }
+  }
+  if (!classes || classes.length === 0) {
+    // No Tailwind fill-parent classes, but % props may still trigger
+    // content-scale + clipping below. Fall through.
+    if (!needsContentScale) return;
+    classes = [];
+  }
+  for (const cls of classes) {
+    if (cls === 'absolute') {
+      // The SVG branch in renderJsxTree bypasses the standard Tailwind
+      // class-application pass that would otherwise mark `absolute`.
+      // Without this, ABSOLUTE_NODES doesn't include the wrap and the
+      // layout pipeline's absolute-child branches (e.g. the direct-resize
+      // path for full-width/height absolute children) never fire.
+      markAbsoluteNode(wrapped);
+    }
+    if (cls === 'w-full' || cls === 'inset-0' || cls === 'inset-x-0') {
+      markFullWidthNode(wrapped);
+      needsContentScale = true;
+    }
+    if (cls === 'h-full' || cls === 'inset-0' || cls === 'inset-y-0') {
+      markFullHeightNode(wrapped);
+      needsContentScale = true;
+    }
+    if (cls === 'aspect-square') {
+      markAspectRatio(wrapped, 1);
+      needsContentScale = true;
+    } else if (cls === 'aspect-video') {
+      markAspectRatio(wrapped, 16 / 9);
+      needsContentScale = true;
+    } else {
+      const fraction = cls.match(/^aspect-(\d+(?:\.\d+)?)\/(\d+(?:\.\d+)?)$/);
+      if (fraction) {
+        const aw = parseFloat(fraction[1]);
+        const ah = parseFloat(fraction[2]);
+        if (aw > 0 && ah > 0) markAspectRatio(wrapped, aw / ah);
+        needsContentScale = true;
+      }
+    }
+  }
+  if (needsContentScale) {
+    // SVGs with fill-parent classes are render canvases, not glyphs.
+    // Browsers clip content to the SVG viewBox by default; Figma doesn't
+    // (`normalizeIconNode` explicitly disables `clipsContent` for icons).
+    // Re-enable clipping on both the wrap and the inner SVG node so paths
+    // that extend outside the viewBox (e.g. the round-trip arrow arcs
+    // that bulge above y=0) don't bleed over neighbouring content.
+    if ('clipsContent' in wrapped) {
+      try { (wrapped as FrameNode).clipsContent = true; } catch (_e) { /* ignore */ }
+    }
+    if (inner && 'clipsContent' in inner) {
+      try { (inner as FrameNode).clipsContent = true; } catch (_e) { /* ignore */ }
+    }
+  }
+  if (needsContentScale && inner) {
+    // Parse viewBox and preserveAspectRatio so the resize hook respects
+    // the SVG's intrinsic aspect ratio. The inner SVG node was pre-sized
+    // to a 24×24 icon by `wrapSvgIcon`, which clobbers the viewBox
+    // dimensions — uniform scaling against 24×24 squares the result.
+    let viewBoxW: number | null = null;
+    let viewBoxH: number | null = null;
+    if (svgProps && typeof svgProps.viewBox === 'string') {
+      const parts = svgProps.viewBox.trim().split(/[\s,]+/).map(parseFloat);
+      if (parts.length === 4 && parts.every(Number.isFinite)) {
+        viewBoxW = parts[2];
+        viewBoxH = parts[3];
+      }
+    }
+
+    const par = svgProps && typeof svgProps.preserveAspectRatio === 'string'
+      ? svgProps.preserveAspectRatio
+      : 'xMidYMid meet';
+    const parPieces = par.trim().split(/\s+/);
+    const align = parPieces[0] || 'xMidYMid';
+    const meetOrSlice = (parPieces[1] === 'slice' ? 'slice' : 'meet') as 'meet' | 'slice';
+    const alignX: 'min' | 'mid' | 'max' =
+      align.indexOf('xMin') === 0 ? 'min' : align.indexOf('xMax') === 0 ? 'max' : 'mid';
+    const alignY: 'min' | 'mid' | 'max' =
+      align.indexOf('YMin') > 0 ? 'min' : align.indexOf('YMax') > 0 ? 'max' : 'mid';
+
+    // Capture each VECTOR's original strokeWeight on first hook invocation.
+    // `resizeSvgNodeTo` scales positions and dimensions but does NOT touch
+    // stroke width — so a bridge with `stroke-width="20"` keeps that 20px
+    // stroke even when scaled 3.2× to fill its container, making the arch
+    // look way too thin. Re-apply `base * scale` each call (idempotent).
+    const baseStrokeWeights = new WeakMap<SceneNode, number>();
+    markSvgContentWrap(wrapped, (w, h) => {
+      // baseW/baseH must reflect the SVG's INTRINSIC aspect ratio, not the
+      // post-wrap 24×24 icon dimensions. Prefer the parsed viewBox; fall
+      // back to the inner node's current size only if viewBox is missing.
+      const innerFrame = inner as FrameNode;
+      const baseW = viewBoxW && viewBoxW > 0 ? viewBoxW : (innerFrame.width || 1);
+      const baseH = viewBoxH && viewBoxH > 0 ? viewBoxH : (innerFrame.height || 1);
+      const sx = w / baseW;
+      const sy = h / baseH;
+      // Uniform scale per `preserveAspectRatio`:
+      //   meet  → min(sx, sy) — fit inside, may leave empty space (centered or aligned)
+      //   slice → max(sx, sy) — fill, may crop overflow (wrap clipsContent)
+      const scale = meetOrSlice === 'slice' ? Math.max(sx, sy) : Math.min(sx, sy);
+      const targetW = baseW * scale;
+      const targetH = baseH * scale;
+      resizeSvgNodeTo(inner, targetW, targetH);
+      // Scale strokes uniformly to keep visual stroke proportions matching
+      // the browser (where strokes scale with the viewBox).
+      if ('findAll' in inner) {
+        const vectors = (inner as FrameNode).findAll(
+          (n: SceneNode) => n.type === 'VECTOR'
+        ) as VectorNode[];
+        for (const v of vectors) {
+          let base = baseStrokeWeights.get(v);
+          if (base == null) {
+            const sw = v.strokeWeight;
+            if (typeof sw === 'number' && sw > 0) {
+              base = sw;
+              baseStrokeWeights.set(v, sw);
+            }
+          }
+          if (base != null && Number.isFinite(scale) && scale > 0) {
+            try { v.strokeWeight = base * scale; } catch (_e) { /* ignore */ }
+          }
+        }
+      }
+      if ('x' in inner && 'width' in inner && 'x' in wrapped && 'width' in wrapped) {
+        try {
+          const ix =
+            alignX === 'min' ? 0
+            : alignX === 'max' ? (w - targetW)
+            : (w - targetW) / 2;
+          const iy =
+            alignY === 'min' ? 0
+            : alignY === 'max' ? (h - targetH)
+            : (h - targetH) / 2;
+          (inner as FrameNode).x = Math.round(ix);
+          (inner as FrameNode).y = Math.round(iy);
+        } catch (_e) {
+          // ignore
+        }
+      }
+    });
+  }
+}
+
+function nodeHasClipPathDescendant(node: NodeIR): boolean {
+  if (node.kind === 'text' || node.kind === 'divider') return false;
+  if (node.kind === 'ring') return nodeHasClipPathDescendant(node.child);
+  if (node.kind === 'fragment') {
+    for (let i = 0; i < node.children.length; i++) {
+      if (nodeHasClipPathDescendant(node.children[i])) return true;
+    }
+    return false;
+  }
+  if (node.kind === 'element') {
+    if (parseClipPathFromStyle(node.props.style)) return true;
+  }
+  for (let i = 0; i < node.children.length; i++) {
+    if (nodeHasClipPathDescendant(node.children[i])) return true;
+  }
+  return false;
+}
+
+/**
+ * Render a component using its internal jsxTree structure.
+ * This handles components with decorative elements (gradient backgrounds, blurred shapes, etc.)
+ * by rendering the component's actual DOM structure instead of a simple wrapper.
+ */
+function renderComponentWithJsxTree(
+  jsxTree: JsxNode,
+  actualChildren: NodeIR[],
+  instanceProps: Record<string, string> | undefined,
+  colorGroup: Record<string, string>,
+  radiusGroup: Record<string, string> | null,
+  theme: string,
+  depth: number,
+  context: RenderContext
+): SceneNode | null {
+  // Convert the component's jsxTree to NodeIR and render it
+  // When we encounter {children} text, substitute with actualChildren
+  const substitutedTree = substituteChildrenInJsxTree(jsxTree, actualChildren, instanceProps, true);
+  if (!substitutedTree) return null;
+
+  // Resolve and render the substituted tree
+  const resolved = resolveNodeIR(substitutedTree);
+  if (!resolved) return null;
+
+  const nodeHelpers: NodeIRHelpers = {
+    getComponentDefByName: getComponentDefByName,
+    normalizeComponentDef: normalizeComponentDef,
+    getCompoundClasses: getCompoundClasses,
+    mergeClasses: mergeClasses,
+  };
+  const transformed = applyNodeTransforms(resolved, colorGroup, nodeHelpers);
+  const responsiveResolved = resolveNodeResponsiveClasses(transformed, context.maxWidth);
+  // Portal panels (Select dropdown, Popover, etc.) with no explicit width need
+  // an intrinsic-content width injected so their children render correctly.
+  // This pre-pass is a no-op for trees without __fromPortal nodes.
+  const withPortalWidths = injectPortalPanelWidths(responsiveResolved);
+  // Drawer/sheet panels with `h-full` get a synthetic pixel height so
+  // descendant `flex-1` siblings have vertical space to claim without
+  // requiring every ancestor in the tree to carry a fixed height.
+  const withPortalHeights = injectPortalPanelHeights(withPortalWidths);
+  const solved = solveLayoutWidths(withPortalHeights, context.maxWidth);
+  return buildFigmaNode(solved, colorGroup, radiusGroup, theme, depth, context);
+}
+
+/**
+ * Recursively substitute {children} text nodes with actual children from the story.
+ */
+function substituteChildrenInJsxTree(
+  jsxNode: JsxNode,
+  actualChildren: NodeIR[],
+  instanceProps?: Record<string, string>,
+  isRoot: boolean = false
+): JsxNode | null {
+  if (jsxNode.type === 'text') {
+    const textNode = jsxNode as JsxText;
+    // Check if this is a {children} placeholder
+    if (textNode.content.trim() === '{children}') {
+      // Return a fragment-like structure - we'll handle this in element processing
+      return null; // Will be handled specially in element processing
+    }
+    return jsxNode;
+  }
+
+  const element = jsxNode as JsxElement;
+  const newChildren: JsxNode[] = [];
+
+  for (const child of element.children || []) {
+    if (child.type === 'text') {
+      const textChild = child as JsxText;
+      if (textChild.content.trim() === '{children}') {
+        // Convert NodeIR children back to JsxNode format for consistency
+        for (const actualChild of actualChildren) {
+          const jsxChild = nodeIRToJsxNode(actualChild);
+          if (jsxChild) {
+            newChildren.push(jsxChild);
+          }
+        }
+        continue;
+      }
+    }
+    const substituted = substituteChildrenInJsxTree(child, actualChildren, instanceProps, false);
+    if (substituted) {
+      newChildren.push(substituted);
+    }
+  }
+
+  const mergedProps: Record<string, string> = Object.assign({}, element.props || {});
+  if (isRoot && instanceProps) {
+    for (const key in instanceProps) {
+      if (key === 'children' || key === 'className') continue;
+      const value = instanceProps[key];
+      if (value === undefined) continue;
+      mergedProps[key] = value;
+    }
+    const baseClasses = splitClassName(mergedProps.className);
+    const extraClasses = splitClassName(instanceProps.className);
+    if (extraClasses.length > 0) {
+      mergedProps.className = mergeClasses(baseClasses, extraClasses).join(' ');
+    }
+  }
+
+  return {
+    type: 'element',
+    tagName: element.tagName,
+    isComponent: element.isComponent,
+    props: mergedProps,
+    children: newChildren,
+  } as JsxElement;
+}
+
+/**
+ * Check whether a component jsxTree explicitly exposes a {children} slot.
+ * If it does not, rendering the tree for an instance with children would drop
+ * those children, so callers should use the wrapper fallback instead.
+ */
+function jsxTreeHasChildrenSlot(jsxNode: JsxNode | null | undefined): boolean {
+  if (!jsxNode) return false;
+  if (jsxNode.type === 'text') {
+    const content = (jsxNode as JsxText).content.trim();
+    return /^\{\s*children\s*\}$/.test(content);
+  }
+  const element = jsxNode as JsxElement;
+  for (const child of element.children || []) {
+    if (jsxTreeHasChildrenSlot(child)) return true;
+  }
+  return false;
+}
+
+/**
+ * Convert a NodeIR node back to JsxNode format.
+ */
+function nodeIRToJsxNode(node: NodeIR): JsxNode | null {
+  if (node.kind === 'text') {
+    return { type: 'text', content: node.text } as JsxText;
+  }
+
+  if (node.kind === 'element' || node.kind === 'component') {
+    const children: JsxNode[] = [];
+    for (const child of node.children || []) {
+      const jsxChild = nodeIRToJsxNode(child);
+      if (jsxChild) {
+        children.push(jsxChild);
+      }
+    }
+    return {
+      type: 'element',
+      tagName: node.tagName,
+      isComponent: node.kind === 'component',
+      props: Object.assign({}, node.props, { className: node.classes.join(' ') }),
+      children,
+    } as JsxElement;
+  }
+
+  if (node.kind === 'fragment') {
+    // Wrap fragment children in a div
+    const children: JsxNode[] = [];
+    for (const child of node.children || []) {
+      const jsxChild = nodeIRToJsxNode(child);
+      if (jsxChild) {
+        children.push(jsxChild);
+      }
+    }
+    return {
+      type: 'element',
+      tagName: 'div',
+      isComponent: false,
+      props: {},
+      children,
+    } as JsxElement;
+  }
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// JSX Tree Rendering
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns true when any direct IR child carries `ml-auto` (or `mx-auto`)
+ * on its className. `ml-auto` on a flex child means "push me along the
+ * primary axis"; the Figma equivalent is `primaryAxisAlignItems =
+ * 'SPACE_BETWEEN'` on the parent. The parent-side detection is needed
+ * because inline-text children (e.g. a `<span className="ml-auto">`
+ * containing only text) render via `createInlineTextNode` and never get
+ * a frame to carry the per-child `SELF_ALIGNMENT_NODES` mark that
+ * `deferred-layout.applyFullWidthIfPossible` reads. DropdownMenuShortcut
+ * was the canonical case — the inline-text path swallowed `ml-auto`
+ * entirely, leaving the shortcut anchored to the start of the item.
+ */
+function hasAutoMarginChild(children: readonly NodeIR[] | undefined): boolean {
+  if (!Array.isArray(children)) return false;
+  for (const child of children) {
+    if (!child || typeof child !== 'object') continue;
+    if (child.kind !== 'element' && child.kind !== 'component') continue;
+    const cl = (child as { classes?: unknown }).classes;
+    if (!Array.isArray(cl)) continue;
+    for (const cls of cl) {
+      if (cls === 'ml-auto' || cls === 'mx-auto') return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Create a separator node for divide-y/divide-x
+ */
+function createDivideSeparator(
+  direction: 'HORIZONTAL' | 'VERTICAL',
+  color: RGB,
+  parentWidth: number
+): FrameNode {
+  const sep = figma.createFrame();
+  sep.name = 'divider';
+  applyClipBehavior(sep, []);
+
+  if (direction === 'HORIZONTAL') {
+    // Horizontal line (for divide-y in vertical list)
+    sep.resize(Math.max(parentWidth, 100), 1);
+    sep.layoutAlign = 'STRETCH';
+  } else {
+    // Vertical line (for divide-x in horizontal list)
+    sep.resize(1, 24); // Height will adjust
+    sep.layoutGrow = 0;
+    sep.layoutAlign = 'STRETCH';
+  }
+
+  sep.fills = [{ type: 'SOLID', color: { r: color.r, g: color.g, b: color.b }, opacity: 1 }];
+  return sep;
+}
+function resolveCornerRadiusFromClasses(
+  classes: string[],
+  radiusGroup: Record<string, string> | null
+): number | null {
+  if (classes.includes('rounded-full')) return 9999;
+  if (classes.includes('rounded-none')) return 0;
+
+  for (const cls of classes) {
+    const match = cls.match(/^rounded-\[(\d+(?:\.\d+)?)px\]$/);
+    if (match) return parseFloat(match[1]);
+  }
+
+  const tokenMap: Record<string, string> = {
+    'rounded-sm': 'sm',
+    'rounded': 'base',
+    'rounded-md': 'md',
+    'rounded-lg': 'lg',
+    'rounded-xl': 'xl',
+    'rounded-2xl': '2xl',
+    'rounded-3xl': '3xl',
+    'rounded-4xl': '4xl',
+  };
+  const fallbackMap: Record<string, number> = {
+    sm: 2,
+    base: 4,
+    md: 6,
+    lg: 8,
+    xl: 12,
+    '2xl': 16,
+    '3xl': 24,
+    '4xl': 32,
+  };
+
+  for (const cls of classes) {
+    const tokenKey = tokenMap[cls];
+    if (!tokenKey) continue;
+    if (radiusGroup && radiusGroup[tokenKey]) {
+      return pxFromSizeToken(radiusGroup[tokenKey]);
+    }
+    if (fallbackMap[tokenKey] != null) return fallbackMap[tokenKey];
+  }
+
+  return null;
+}
+
+/**
+ * Strict variant of state-utils' isTruthyStateProp: only matches the
+ * recognised true-tokens (true, 1, 'true', '1', 'checked', 'on'). Used by
+ * the master-rendering paths where we need to distinguish "explicitly true"
+ * from the looser HTML-attribute truthiness that isTruthyStateProp gives.
+ *
+ * Local to ui-builder for now; lift to a shared module if a third caller
+ * needs the strict semantics.
+ */
+function isExplicitlyTrueAttr(value: unknown): boolean {
+  if (value === true || value === 1) return true;
+  const normalized = String(value == null ? '' : value).trim().toLowerCase();
+  return normalized === 'true' || normalized === '1' || normalized === 'checked' || normalized === 'on';
+}
+
+function getUiStateVariantNames(def: ComponentDef): string[] {
+  const stateMap = def && def.states ? def.states : null;
+  if (!stateMap || typeof stateMap !== 'object') return ['default'];
+  const keys = Object.keys(stateMap).filter(function(key) { return key !== '__meta'; });
+  if (keys.length === 0) return ['default'];
+  keys.sort(function(a, b) {
+    if (a === 'default') return -1;
+    if (b === 'default') return 1;
+    return a.localeCompare(b);
+  });
+  return keys;
+}
+
+function getUiVisualStateVariantNames(def: ComponentDef): string[] {
+  const names = getUiStateVariantNames(def);
+  const out: string[] = [];
+  for (let i = 0; i < names.length; i++) {
+    if (names[i].toLowerCase() === 'checked') continue;
+    out.push(names[i]);
+  }
+  if (out.length === 0) out.push('default');
+  return out;
+}
+
+function resolveUiStateVariantName(def: ComponentDef, requested: unknown, includeChecked: boolean = true): string {
+  const requestedName = String(requested == null ? '' : requested).trim().toLowerCase();
+  const available = includeChecked ? getUiStateVariantNames(def) : getUiVisualStateVariantNames(def);
+  for (let i = 0; i < available.length; i++) {
+    if (available[i].toLowerCase() === requestedName) return available[i];
+  }
+  return 'default';
+}
+
+function getUiCvaSelectionFromInstance(def: ComponentDef, instance: ComponentInstance): Record<string, string> {
+  const props = instance && instance.props ? instance.props : {};
+  const selection: Record<string, string> = {};
+  const variants = (def && def.variants) || {};
+  const keys = Object.keys(variants);
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    const values = Array.isArray(variants[key]) ? variants[key] : [];
+    const raw = props[key] != null && String(props[key]).trim() !== ''
+      ? String(props[key])
+      : (def && def.defaultVariants && def.defaultVariants[key] != null ? String(def.defaultVariants[key]) : '');
+    let selected = raw;
+    if (!selected && values.length > 0) selected = String(values[0]);
+    if (selected) selection[key] = selected;
+  }
+  return selection;
+}
+
+function getUiStateVariantForInstance(def: ComponentDef, instance: ComponentInstance): string {
+  const props = instance && instance.props ? instance.props : {};
+  const explicitState = props['data-state'] != null ? props['data-state'] : props.state;
+  if (explicitState != null && String(explicitState).trim() !== '') {
+    return resolveUiStateVariantName(def, explicitState, false);
+  }
+  if (isExplicitlyTrueAttr(props.disabled) || isExplicitlyTrueAttr(props['aria-disabled'])) {
+    return resolveUiStateVariantName(def, 'disabled', false);
+  }
+  if (isExplicitlyTrueAttr(props['aria-invalid'])) {
+    return resolveUiStateVariantName(def, 'error', false);
+  }
+  return 'default';
+}
+
+function uiIsCheckedInstance(instance: ComponentInstance): boolean {
+  const props = instance && instance.props ? instance.props : {};
+  return isExplicitlyTrueAttr(props.checked)
+    || isExplicitlyTrueAttr(props.defaultChecked)
+    || isExplicitlyTrueAttr(props['aria-checked']);
+}
+
+function uiHasCheckedStateVariant(def: ComponentDef): boolean {
+  const names = getUiStateVariantNames(def);
+  for (let i = 0; i < names.length; i++) {
+    if (names[i].toLowerCase() === 'checked') return true;
+  }
+  return false;
+}
+
+function getInstanceTextOverride(def: ComponentDef, instance: ComponentInstance): string | null {
+  const props = instance && instance.props ? instance.props : {};
+  if (instance && instance.children != null && String(instance.children).trim() !== '') {
+    return String(instance.children);
+  }
+  if (props.children != null && String(props.children).trim() !== '') {
+    return String(props.children);
+  }
+  if (def && def.type === 'state') {
+    if (props.label != null && String(props.label).trim() !== '') return String(props.label);
+    if (props.placeholder != null && String(props.placeholder).trim() !== '') return String(props.placeholder);
+  }
+  return null;
+}
+
+function getExistingCvaComponentSet(def: ComponentDef, theme: string): SceneNode | null {
+  if (!def || !def.name) return null;
+  return findExistingThemedComponentNode(theme, String(def.name) + ' [' + String(theme || 'primary') + ']');
+}
+
+/**
+ * `uiInstanceBackend` is called from `buildFigmaNode`'s component branch when a
+ * CVA component (e.g. `<Badge variant="soft">`) appears INSIDE another story's
+ * jsxTree (e.g. `HowItWorksSection` referencing `<Badge>`). The earlier
+ * implementation only did a lookup via `findExistingThemedComponentNode` — if
+ * the referenced component hadn't been pre-warmed by `warmSymbolMasters`
+ * (which happens when the user selects a subset in the preflight, or renders
+ * a story before its dependency's master exists), the lookup returned null
+ * and the Badge fell back to a flat frame. Route through the full
+ * `ensureCvaComponentSet` so a master is created on demand. It internally
+ * reuses matching-hash masters, so this is a no-op when one already exists.
+ *
+ * Recursion guard: `ensureCvaComponentSetFromStory` builds the master by
+ * rendering the component's own story jsxTree, which has the component at
+ * its root — that render enters `buildFigmaNode`'s component branch and, if
+ * unguarded, calls back into this function, looping forever. Track the
+ * (def, theme) pairs currently being built so reentrant calls return the
+ * existing master or null (falling back to flat-frame rendering).
+ */
+const CVA_MASTERS_IN_FLIGHT = new Set<string>();
+
+function ensureCvaComponentSetForUi(def: ComponentDef, theme: string, ctx: StoryBuilderContext | null): SceneNode | null {
+  if (!def || !def.name) return null;
+  const key = String(def.name) + '|' + String(theme || 'primary');
+  if (CVA_MASTERS_IN_FLIGHT.has(key)) {
+    return getExistingCvaComponentSet(def, theme);
+  }
+  CVA_MASTERS_IN_FLIGHT.add(key);
+  try {
+    const effectiveCtx = (ctx || getStoryBuilderContext()) as StoryBuilderContext;
+    try {
+      return ensureCvaComponentSetFromStory(def, theme, effectiveCtx);
+    } catch (_err) {
+      return getExistingCvaComponentSet(def, theme);
+    }
+  } finally {
+    CVA_MASTERS_IN_FLIGHT.delete(key);
+  }
+}
+
+function getExistingStateComponentSet(def: ComponentDef, theme: string): SceneNode | null {
+  if (!def || !def.name) return null;
+  return findExistingThemedComponentNode(theme, String(def.name) + ' [' + String(theme || 'primary') + ']');
+}
+
+function getExistingNonCvaComponentMaster(def: ComponentDef, theme: string): SceneNode | null {
+  if (!def || !def.name) return null;
+  const node = findExistingThemedComponentNode(theme, String(def.name));
+  if (!node) return null;
+  if (node.type === 'COMPONENT' || node.type === 'COMPONENT_SET') return node;
+  return null;
+}
+
+const uiInstanceBackend: InstanceBackend = {
+  enableSymbolMasters: true,
+  splitClassName: splitClassName,
+  ensureCvaComponentSet: ensureCvaComponentSetForUi,
+  ensureStateComponentSet: getExistingStateComponentSet,
+  ensureNonCvaComponentMaster: getExistingNonCvaComponentMaster,
+  getInstantiableComponent: getInstantiableComponent,
+  getCvaSelectionFromInstance: getUiCvaSelectionFromInstance,
+  toFigmaVariantPropertyName: toFigmaVariantPropertyName,
+  toFigmaVariantPropertyValue: toFigmaVariantPropertyValue,
+  getStateVariantForInstance: getUiStateVariantForInstance,
+  isCheckedInstance: uiIsCheckedInstance,
+  hasCheckedStateVariant: uiHasCheckedStateVariant,
+  getInstanceTextOverride: getInstanceTextOverride,
+  applyTextOverrideToInstance: applyTextOverrideToInstance,
+  applyCompoundTextOverridesToInstance: function() {
+    return { bySlot: {}, bySubcomponent: {} };
+  },
+  analyzeSymbolPolicy: analyzeSymbolPolicy,
+  setGeneratedSymbolDebugData: setGeneratedSymbolDebugData,
+};
+
+function tryRenderSharedSymbolInstance(analysis: CvaAnalysis, instance: ComponentInstance, theme: string): SceneNode | null {
+  if (!analysis) return null;
+  if (analysis.type === 'cva') {
+    return tryCreateCvaComponentInstanceShared(analysis, instance, theme, null, uiInstanceBackend);
+  }
+  if (analysis.type === 'state' || analysis.type === 'simple' || analysis.type === 'compound') {
+    return tryCreateNonCvaComponentInstanceShared(analysis, instance, theme, null, uiInstanceBackend);
+  }
+  return null;
+}
+
+/**
+ * Renders a JSX tree from the scanner into Figma frames
+ */
+function getStoryBuilderContext(): StoryBuilderContext {
+  return {
+    getComponentDefByName: getComponentDefByName,
+    normalizeComponentDef: normalizeComponentDef,
+    applyClipBehavior: applyClipBehavior,
+    applyLayoutClasses: applyLayoutClasses,
+    hasExplicitHeight: hasExplicitHeight,
+    renderJsxTree: renderJsxTree,
+    applyAbsoluteIfAllowed: applyAbsoluteIfAllowed,
+    applyGridColumnsWithReflow: applyGridColumnsWithReflow,
+    hasWidthHintInClasses: hasWidthHintInClasses,
+    propsContainWidthHint: propsContainWidthHint,
+  };
+}
+
+
+export function renderJsxTree(
+  node: JsxNode,
+  colorGroup: Record<string, string>,
+  radiusGroup: Record<string, string> | null,
+  theme: string,
+  depth: number = 0,
+  context: RenderContext = {}
+): SceneNode | null {
+  const resolved = resolveNodeIR(node);
+  if (!resolved) return null;
+  const nodeHelpers: NodeIRHelpers = {
+    getComponentDefByName: getComponentDefByName,
+    normalizeComponentDef: normalizeComponentDef,
+    getCompoundClasses: getCompoundClasses,
+    mergeClasses: mergeClasses,
+  };
+  const transformed = applyNodeTransforms(resolved, colorGroup, nodeHelpers);
+  const responsiveResolved = resolveNodeResponsiveClasses(transformed, context.maxWidth);
+  // Portal panels (Select dropdown, Popover, etc.) with no explicit width need
+  // an intrinsic-content width injected so their children render correctly.
+  // This pre-pass is a no-op for trees without __fromPortal nodes.
+  const withPortalWidths = injectPortalPanelWidths(responsiveResolved);
+  // Drawer/sheet panels with `h-full` get a synthetic pixel height so
+  // descendant `flex-1` siblings have vertical space to claim without
+  // requiring every ancestor in the tree to carry a fixed height.
+  const withPortalHeights = injectPortalPanelHeights(withPortalWidths);
+  const solved = solveLayoutWidths(withPortalHeights, context.maxWidth);
+  return buildFigmaNode(solved, colorGroup, radiusGroup, theme, depth, context);
+}
+
+function buildFigmaNode(
+  node: NodeIR,
+  colorGroup: Record<string, string>,
+  radiusGroup: Record<string, string> | null,
+  theme: string,
+  depth: number,
+  context: RenderContext
+): SceneNode | null {
+  if (node.kind === 'text') {
+    const opts: CreateTextOptions & { theme: string } = { fontSize: context.textFontSize || 14, theme };
+    if (context.textFontStyle != null) {
+      opts.fontStyle = context.textFontStyle;
+    } else if (context.textBold != null) {
+      opts.bold = context.textBold;
+    }
+    if (context.textLineHeight != null) {
+      opts.lineHeight = context.textLineHeight;
+    }
+    if (context.textColor) {
+      opts.fill = context.textColor;
+    }
+    if (context.textAlign) {
+      opts.textAlignHorizontal = context.textAlign;
+    }
+    const textNode = createTextNode(node.text, opts);
+    if (context.textTruncate && context.maxWidth) {
+      try {
+        const maxLines = context.textMaxLines || 1;
+        const fontSize = context.textFontSize || 14;
+        const lineH = context.textLineHeight || Math.ceil(fontSize * 1.5);
+        textNode.textTruncation = 'ENDING';
+        textNode.maxLines = maxLines;
+        textNode.resize(context.maxWidth, Math.max(lineH, lineH * maxLines));
+      } catch (_err) {
+        // ignore — truncation not supported in all plugin contexts
+      }
+    } else if (context.maxWidth && context.parentLayout !== 'HORIZONTAL') {
+      try {
+        textNode.textAutoResize = 'HEIGHT';
+        textNode.resize(context.maxWidth, textNode.height);
+      } catch (_err) {
+        // ignore resize errors
+      }
+    }
+    return textNode;
+  }
+
+  if (node.kind === 'fragment') {
+    if (node.children.length === 0) return null;
+    const wrapper = figma.createFrame();
+    wrapper.name = 'Fragment';
+    wrapper.layoutMode = 'VERTICAL';
+    wrapper.primaryAxisSizingMode = 'AUTO';
+    wrapper.counterAxisSizingMode = 'AUTO';
+    wrapper.fills = [];
+    applyClipBehavior(wrapper, []);
+    // React `<>...</>` is invisible in CSS — children are laid out as siblings
+    // of the fragment's parent. In Figma we can't inline children into an
+    // existing parent frame, so we wrap them in a frame and mimic the same
+    // behavior: stretch the wrapper to the parent's cross axis (so width
+    // cascades down to nav/list/section children) and mark the wrapper as
+    // wanting STRETCH so its own children inherit via applyChildProperties.
+    if (context.parentLayout === 'VERTICAL') {
+      wrapper.layoutAlign = 'STRETCH';
+      setFrameCrossAlign(wrapper, 'STRETCH');
+    }
+    for (const rawChild of node.children) {
+      const child = unwrapTransparentWrapper(rawChild);
+      const childNode = buildFigmaNode(child, colorGroup, radiusGroup, theme, depth + 1, context);
+      if (childNode) {
+        wrapper.appendChild(childNode);
+        if (isElementLikeNode(child)) {
+          LayoutParser.applyChildProperties(childNode, child.classes, wrapper);
+        }
+        applyAbsoluteIfPossible(childNode, wrapper);
+        stabilizeHorizontalStretchChild(childNode, wrapper);
+        constrainSingleHorizontalTextChild(childNode);
+        applyFullWidthIfPossible(childNode, wrapper, context.maxWidth != null ? { widthOverride: context.maxWidth } : undefined);
+        applyRingIfPossible(childNode, wrapper);
+        applyAspectRatioIfPossible(childNode);
+        // The just-resolved aspect ratio / full-width may have given this
+        // child its final dimensions, so resolve any deferred percent
+        // positions on ITS children against those dimensions.
+        if ('layoutMode' in childNode) {
+          applyDeferredPercentPositioning(childNode as FrameNode);
+        }
+      }
+    }
+    applyDeferredBottomPositioning(wrapper);
+    applyDeferredCenterYPositioning(wrapper);
+    applyDeferredPercentPositioning(wrapper);
+    reflowMxAutoChildren(wrapper);
+    return wrapper;
+  }
+
+  if (node.kind === 'divider') {
+    const parentWidth = context.maxWidth || 200;
+    return createDivideSeparator(node.direction, node.color, parentWidth);
+  }
+
+  if (node.kind === 'ring') {
+    const ring = figma.createFrame();
+    ring.name = 'ring';
+    ring.layoutMode = 'HORIZONTAL';
+    ring.primaryAxisSizingMode = 'AUTO';
+    ring.counterAxisSizingMode = 'AUTO';
+    applyClipBehavior(ring, []);
+    // Apply positioning-only classes (absolute, top-*, right-*, opacity-*, z-*)
+    // to the ring frame so it can be correctly placed when wrapping an absolutely-
+    // positioned element. The child re-applies ALL classes, so passing visual/
+    // layout/sizing classes here doubles them (e.g. Card's `py-4` gets applied to
+    // both ring and child → 32px padding instead of 16px, with the ring's bg-card
+    // fill creating a visible gap between the ring stroke and the child's fill).
+    if (node.classes && node.classes.length > 0) {
+      const positioningClasses = node.classes.filter(cls => {
+        const base = cls.includes(':') ? (cls.split(':').pop() || cls) : cls;
+        return base === 'absolute' || base === 'fixed' || base === 'relative' || base === 'sticky'
+          || /^-?(top|bottom|left|right|inset)(-|$)/.test(base)
+          || /^z-/.test(base)
+          || /^opacity-/.test(base);
+      });
+      if (positioningClasses.length > 0) {
+        applyTailwindStylesToFrame(ring, positioningClasses, colorGroup, radiusGroup, theme);
+      }
+    }
+    // Render ring as a stroke (CSS box-shadow equivalent), not a fill.
+    // A fill-based ring bleeds through transparent child backgrounds; strokes match CSS behavior.
+    ring.fills = [];
+    ring.strokes = [{
+      type: 'SOLID',
+      color: { r: node.ringColor.r, g: node.ringColor.g, b: node.ringColor.b },
+      opacity: node.ringOpacity,
+    }];
+    ring.strokeWeight = node.ringWidth;
+    // CSS `ring-*` is a box-shadow outside the border, so draw the stroke
+    // outside the frame edge. INSIDE hid the stroke when the child filled
+    // the frame exactly (the bg-card fill painted over the 1px stroke band).
+    ring.strokeAlign = 'OUTSIDE';
+
+    let baseRadius: number | null = null;
+    if (isElementLikeNode(node.child)) {
+      baseRadius = resolveCornerRadiusFromClasses(node.child.classes, radiusGroup);
+    }
+    if (baseRadius == null && radiusGroup && radiusGroup.base) {
+      baseRadius = pxFromSizeToken(radiusGroup.base);
+    }
+    if (baseRadius == null) baseRadius = 0;
+    ring.cornerRadius = baseRadius + node.offsetWidth;
+
+    let innerParent: FrameNode = ring;
+    if (node.offsetWidth > 0) {
+      // ring-offset-N — even without an explicit ring-offset-COLOR class
+      // we still need the gap. CSS draws the offset as a transparent
+      // band (inheriting the page background) that separates the inner
+      // element's border from the outer ring stroke. Without this
+      // wrapper, the ring stroke sits flush against the border and the
+      // two visually merge into one thick line — the symptom: shadcn
+      // Select trigger / Input focus state showing a single fat green
+      // ring instead of "gray border + gap + green ring" like in the
+      // browser.
+      const offsetFrame = figma.createFrame();
+      offsetFrame.name = 'ring-offset';
+      offsetFrame.layoutMode = 'HORIZONTAL';
+      offsetFrame.primaryAxisSizingMode = 'AUTO';
+      offsetFrame.counterAxisSizingMode = 'AUTO';
+      applyClipBehavior(offsetFrame, []);
+      if (node.offsetColor) {
+        offsetFrame.fills = [{
+          type: 'SOLID',
+          color: { r: node.offsetColor.r, g: node.offsetColor.g, b: node.offsetColor.b },
+          opacity: 1,
+        }];
+      } else {
+        // Transparent gap — matches CSS's default offset behaviour when
+        // no `ring-offset-COLOR` was set.
+        offsetFrame.fills = [];
+      }
+      offsetFrame.strokes = [];
+      offsetFrame.paddingLeft = offsetFrame.paddingRight = offsetFrame.paddingTop = offsetFrame.paddingBottom = node.offsetWidth;
+      offsetFrame.cornerRadius = baseRadius + node.offsetWidth;
+      ring.appendChild(offsetFrame);
+      innerParent = offsetFrame;
+    }
+
+    // Strip absolute-positioning classes from the child — they've been applied to the
+    // ring frame above so the ring is correctly placed in the parent. If kept on the
+    // child, the child would be positioned absolutely inside the ring (with a negative x),
+    // pushing the icon outside the ring bounds.
+    const ringIsAbsolute = (node.classes || []).some((c: string) => {
+      const base = c.includes(':') ? (c.split(':').pop() || c) : c;
+      return base === 'absolute' || base === 'fixed';
+    });
+    const isPositioningClass = (c: string) => {
+      const base = c.includes(':') ? (c.split(':').pop() || c) : c;
+      return base === 'absolute' || base === 'fixed' || base === 'relative'
+        || /^-?(top|bottom|left|right|inset)(-|$)/.test(base);
+    };
+    const childForBuild = (ringIsAbsolute && isElementLikeNode(node.child))
+      ? Object.assign({}, node.child, { classes: node.child.classes.filter((c: string) => !isPositioningClass(c)) })
+      : node.child;
+    const childLayoutClasses = isElementLikeNode(childForBuild) ? (childForBuild.classes || []) : [];
+    // The ring frame is HORIZONTAL with hug sizing — override the inherited context
+    // so the child doesn't think it's inside the grandparent (e.g. a VERTICAL dialog
+    // content frame) and stretch to its maxWidth.
+    const ringChildContext: RenderContext = {
+      ...context,
+      parentLayout: 'HORIZONTAL',
+      maxWidth: undefined,
+    };
+    const childNode = buildFigmaNode(childForBuild, colorGroup, radiusGroup, theme, depth + 1, ringChildContext);
+    if (childNode) {
+      innerParent.appendChild(childNode);
+      if (childLayoutClasses.length > 0) {
+        LayoutParser.applyChildProperties(childNode, childLayoutClasses, innerParent);
+      }
+      applyAbsoluteIfPossible(childNode, innerParent);
+      stabilizeHorizontalStretchChild(childNode, innerParent);
+      constrainSingleHorizontalTextChild(childNode);
+      if (!ringIsAbsolute) {
+        applyFullWidthIfPossible(childNode, innerParent);
+      }
+      applyRingIfPossible(childNode, innerParent);
+      return maybeWrapMxAuto(ring, node.classes, context);
+    }
+
+    return null;
+  }
+
+  const tagLower = node.tagLower;
+  if ((node.kind === 'component' || node.kind === 'element') && isSelectScrollButtonTag(node.tagName)) {
+    // Radix mounts these controls only when scrolling is possible.
+    // Rendering them statically in Figma adds noisy chevrons for short lists.
+    return null;
+  }
+  if (isSelectItemIndicatorTag(node.tagName) && context.selectItemSelected === false) {
+    return null;
+  }
+  // Portal popper arrow decorations (Popover/Tooltip/DropdownMenu) only make
+  // visual sense pointing at a trigger. In Figma the panel renders in-flow, so
+  // the arrow has nothing to point at — and rendering it as an empty frame
+  // adds a ghost 100px tall block to the panel's HUG height.
+  if (isPortalArrowTag(node.tagName)) {
+    return null;
+  }
+  if (isSelectItemTag(node.tagName)) {
+    const selected = resolveSelectItemSelected(node as NodeIRElement, context);
+    if (selected != null) {
+      if (!node.props) {
+        node.props = {};
+      }
+      if (node.props!['data-state'] == null) {
+        node.props!['data-state'] = selected ? 'checked' : 'unchecked';
+      }
+      if (node.props!['aria-selected'] == null) {
+        node.props!['aria-selected'] = selected ? 'true' : 'false';
+      }
+      // Radix highlights the selected item by default when the menu opens, so
+      // render the selected row with `data-highlighted` set in Figma too.
+      if (selected && node.props!['data-highlighted'] == null) {
+        node.props!['data-highlighted'] = '';
+      }
+    }
+    // When the menu opens with no selection, Radix highlights the first item.
+    // Only set `data-highlighted` (no data-state / aria-selected) so the row
+    // picks up the highlight style without rendering the checkmark indicator.
+    if (
+      context.selectHighlightedValue != null
+      && node.props?.['data-highlighted'] == null
+      && normalizeSelectableValue(node.props?.value) === context.selectHighlightedValue
+    ) {
+      if (!node.props) node.props = {};
+      node.props!['data-highlighted'] = '';
+    }
+  }
+  if (isSelectTriggerTag(node.tagName) && context.selectIsOpen) {
+    if (!node.props) {
+      node.props = {};
+    }
+    if (node.props!['data-state'] == null) {
+      node.props!['data-state'] = 'open';
+    }
+    // Radix moves focus to the trigger when the menu opens. shadcn triggers
+    // show the focus ring only via `focus:ring-*` utilities, so promote those
+    // to active classes so the open trigger renders with its focus ring.
+    const promoted = promoteFocusVariants(node.classes);
+    if (promoted !== node.classes) {
+      node.classes = promoted;
+    }
+  }
+  if (isRadioGroupIndicatorTag(node.tagName) && context.radioItemChecked === false) {
+    return null;
+  }
+  if (isRadioGroupItemTag(node.tagName)) {
+    const derivedChecked = resolveRadioItemChecked(node as NodeIRElement, context);
+    if (derivedChecked === true) {
+      if (!node.props) {
+        node.props = {};
+      }
+      if (node.props!['data-checked'] == null) {
+        node.props!['data-checked'] = 'true';
+      }
+      if (node.props!.checked == null) {
+        node.props!.checked = 'true';
+      }
+    }
+  }
+  if (isTabsTriggerTag(node.tagName) || isTabsContentTag(node.tagName)) {
+    const active = resolveTabsNodeActive(node as NodeIRElement, context);
+    if (active != null) {
+      if (!node.props) {
+        node.props = {};
+      }
+      // Support both Radix-like data-[state=active] and Base UI data-[active] selectors.
+      if (node.props!['data-state'] == null) {
+        node.props!['data-state'] = active ? 'active' : 'inactive';
+      }
+      if (active) {
+        node.props!['data-active'] = 'true';
+      } else if (node.props!['data-active'] != null) {
+        delete node.props!['data-active'];
+      }
+      if (isTabsTriggerTag(node.tagName)) {
+        if (node.props!['aria-selected'] == null) {
+          node.props!['aria-selected'] = active ? 'true' : 'false';
+        }
+      }
+    }
+  }
+  // Use the story-level viewportWidth (constant through the tree) for
+  // responsive breakpoint resolution, NOT the element's local maxWidth
+  // (which is the container's content width and shrinks as we descend).
+  // CSS @media queries match the viewport — a `lg:size-16` icon should
+  // apply at the lg breakpoint regardless of how nested it is inside
+  // narrower containers.
+  const breakpointWidthInput = context.viewportWidth
+    ?? (context.maxWidth != null ? context.maxWidth : defaultGridWidth(3));
+  const breakpointIndex = resolveBreakpointIndexForWidth(breakpointWidthInput);
+  let classes = resolveClassesForBreakpoint(node.classes, breakpointIndex);
+  if (isAccordionHeaderTag(node.tagName) && !classes.includes('w-full')) {
+    classes = mergeClasses(classes, ['w-full']);
+  }
+  classes = expandActiveConditionalVariants(classes, node);
+  const layoutComputed = getNodeLayoutComputed(node);
+  const alignFromClasses = getTextAlignFromClasses(classes);
+  const textStyle = getNodeTextStyle(node, colorGroup);
+  const textToken = textStyle.textToken || extractTextColorToken(classes) || context.textColorToken || null;
+  const fallbackTextColor = resolveTextColorFallback(classes, colorGroup, theme);
+  const ownTextColor = resolveTextColorValue(
+    textStyle.text || fallbackTextColor,
+    textToken,
+    colorGroup,
+    theme
+  );
+  const ownTextFontSize = getResolvedTextSizeFromClasses(classes, context.textFontSize);
+  const ownTextBold = getResolvedBoldFromClasses(classes, context.textBold);
+  const ownTextFontStyle = getFontStyleFromClasses(classes, context.textFontStyle);
+  const ownTextLineHeight = ownTextFontSize != null
+    ? (getLineHeightFromClasses(classes, ownTextFontSize) ?? context.textLineHeight)
+    : context.textLineHeight;
+  const inheritedTextColor = resolveTextColorValue(
+    context.textColor,
+    context.textColorToken,
+    colorGroup,
+    theme
+  );
+  const resolvedTextColor = ownTextColor || inheritedTextColor;
+  let contextualMaxWidth = context.maxWidth;
+  if (layoutComputed.explicitWidth != null) {
+    contextualMaxWidth = layoutComputed.explicitWidth;
+  } else if (layoutComputed.maxWidth != null) {
+    contextualMaxWidth = context.maxWidth != null
+      ? Math.min(layoutComputed.maxWidth, context.maxWidth)
+      : layoutComputed.maxWidth;
+  }
+  // Detect text truncation from classes on this element; reset per-element (don't inherit)
+  let _truncate: boolean | undefined;
+  let _maxLines: number | undefined;
+  if (classes.includes('truncate')) {
+    _truncate = true; _maxLines = 1;
+  } else {
+    for (const cls of classes) {
+      const m = cls.match(/^line-clamp-(\d+)$/);
+      if (m) { _truncate = true; _maxLines = parseInt(m[1], 10); break; }
+    }
+  }
+  const nextContext: RenderContext = {
+    ...context,
+    textAlign: alignFromClasses || context.textAlign,
+    maxWidth: contextualMaxWidth,
+    textFontSize: ownTextFontSize,
+    textBold: ownTextBold,
+    textFontStyle: ownTextFontStyle,
+    textLineHeight: ownTextLineHeight,
+    textColor: resolvedTextColor,
+    textColorToken: textToken || context.textColorToken,
+    textTruncate: _truncate,
+    textMaxLines: _maxLines,
+  };
+
+  if (isAccordionRootTag(node.tagName)) {
+    nextContext.accordionOpenValue = normalizeAccordionDefaultValue(node.props?.defaultValue);
+    nextContext.accordionItemIndex = undefined;
+    nextContext.accordionItemValue = null;
+    nextContext.accordionItemIsOpen = false;
+  } else if (isAccordionItemTag(node.tagName)) {
+    const accordionItemValue = resolveAccordionItemValue(node.props?.value, context.accordionItemIndex);
+    nextContext.accordionItemValue = accordionItemValue;
+    nextContext.accordionItemIsOpen = !!accordionItemValue &&
+      !!nextContext.accordionOpenValue &&
+      accordionItemValue === nextContext.accordionOpenValue;
+  }
+
+  if (isTabsRootTag(node.tagName)) {
+    nextContext.tabsSelectedValue = normalizeSelectableValue(node.props?.value)
+      || normalizeSelectableValue(node.props?.defaultValue);
+  }
+
+  if (isSelectRootTag(node.tagName)) {
+    nextContext.selectSelectedValue = normalizeSelectableValue(node.props?.value)
+      || normalizeSelectableValue(node.props?.defaultValue);
+    nextContext.selectSelectedLabel = nextContext.selectSelectedValue
+      ? findSelectedSelectLabel(node, nextContext.selectSelectedValue)
+      : null;
+    nextContext.selectItemValue = null;
+    nextContext.selectItemSelected = undefined;
+    nextContext.selectIsOpen = isTruthyStateProp(node.props?.open)
+      || isTruthyStateProp(node.props?.defaultOpen);
+    // Radix highlights the first item when the menu opens with no selection.
+    nextContext.selectHighlightedValue = !nextContext.selectSelectedValue && nextContext.selectIsOpen
+      ? findFirstSelectItemValue(node)
+      : null;
+  } else if (isSelectContentTag(node.tagName)) {
+    // Select popovers should size to their content in Figma previews instead of inheriting
+    // the story wrapper max width (e.g. w-56), which causes label wrapping.
+    nextContext.maxWidth = undefined;
+  } else if (isSelectItemTag(node.tagName)) {
+    const itemValue = normalizeSelectableValue(node.props?.value);
+    const selected = resolveSelectItemSelected(node as NodeIRElement, context);
+    nextContext.selectItemValue = itemValue;
+    nextContext.selectItemSelected = selected === true;
+  }
+
+  if (isRadioGroupRootTag(node.tagName)) {
+    nextContext.radioGroupSelectedValue = normalizeSelectableValue(node.props?.value)
+      || normalizeSelectableValue(node.props?.defaultValue);
+    nextContext.radioItemValue = null;
+    nextContext.radioItemChecked = undefined;
+  } else if (isRadioGroupItemTag(node.tagName)) {
+    const itemValue = normalizeSelectableValue(node.props?.value);
+    const checked = resolveRadioItemChecked(node as NodeIRElement, context);
+    nextContext.radioItemValue = itemValue;
+    nextContext.radioItemChecked = checked === true;
+  }
+
+  if (isAccordionContentTag(node.tagName) && !context.accordionItemIsOpen) {
+    return null;
+  }
+  if (isTabsContentTag(node.tagName)) {
+    const forceMount = isTruthyStateProp(node.props?.forceMount);
+    const active = resolveTabsNodeActive(node as NodeIRElement, context);
+    if (!forceMount && active === false) {
+      return null;
+    }
+  }
+
+  // Check for hidden classes - skip rendering unless overridden by a display class
+  // In responsive contexts "hidden sm:flex" produces ["hidden","flex"]; the last display
+  // class wins (same semantics as CSS), so we must not skip when a display override follows.
+  if (classes.includes('hidden') || classes.includes('sr-only')) {
+    const DISPLAY_OVERRIDES = new Set(['flex','inline-flex','block','inline-block','inline','grid','inline-grid','table','table-cell','table-row','contents','flow-root','list-item']);
+    const hiddenIdx = Math.max(classes.lastIndexOf('hidden'), classes.lastIndexOf('sr-only'));
+    const overridden = classes.slice(hiddenIdx + 1).some(c => DISPLAY_OVERRIDES.has(c));
+    if (!overridden) {
+      return null;
+    }
+  }
+
+  if ((node.kind === 'component' || node.kind === 'element') && isSelectValueTag(node.tagName)) {
+    const selectedLabel = (context.selectSelectedLabel || '').trim();
+    const selectedValue = (context.selectSelectedValue || '').trim();
+    const placeholder = String((node.props && node.props.placeholder) || '').trim();
+    const resolvedText = selectedLabel
+      || (selectedValue ? prettySelectValueLabel(selectedValue) : '')
+      || placeholder;
+    if (!resolvedText) return null;
+
+    const textOpts: CreateTextOptions & { theme: string } = { fontSize: context.textFontSize || 14, theme };
+    if (context.textFontStyle != null) {
+      textOpts.fontStyle = context.textFontStyle;
+    } else if (context.textBold != null) {
+      textOpts.bold = context.textBold;
+    }
+    if (context.textLineHeight != null) {
+      textOpts.lineHeight = context.textLineHeight;
+    }
+    if (context.textColor) {
+      textOpts.fill = context.textColor;
+    } else if (!selectedLabel && !selectedValue && placeholder) {
+      textOpts.opacity = 0.4;
+    }
+    return createTextNode(resolvedText, textOpts);
+  }
+
+  if (node.kind === 'element' && tagLower === 'svg') {
+    const svgString = nodeIrToSvg(node);
+    if (svgString) {
+      const fgColor = resolveIconForegroundColor(nextContext, colorGroup, theme, node.props);
+      const icon = createIconFromSvg(svgString, fgColor);
+      if (icon) {
+        const wrapped = wrapSvgIcon(icon, classes, node.props, 'icon/svg');
+        // Inline SVGs that intend to fill their parent (e.g. an arrow-overlay
+        // <svg className="absolute inset-0 h-full w-full">) take a default
+        // 24×24 icon size from `resolveIconSizeFromClasses`. Propagate
+        // fill-parent marks so the existing layout pipeline resizes the
+        // wrapping frame to parent dimensions and applies any aspect ratio.
+        applySvgLayoutMarksFromClasses(wrapped, classes, icon, node.props);
+        return maybeWrapMxAuto(wrapped, classes, context);
+      }
+    }
+  }
+
+  // Image placeholder: `<img>`, Next.js `<Image>`, and any shadcn-style image
+  // primitive that takes a `src` prop and renders no children
+  // (`<AvatarImage>`, `<AvatarPrimitive.Image>`, ...). The latter get flattened
+  // by `flattenComponentNodes` to `kind: 'element', tagLower: 'div'` with
+  // `props.src` preserved — without this widened gate they'd fall into the
+  // generic frame branch and the image would never render.
+  const looksLikeImageSrc = typeof node.props?.src === 'string'
+    && node.props.src.length > 0
+    && (node.props.src.startsWith('/')
+      || node.props.src.startsWith('http://')
+      || node.props.src.startsWith('https://')
+      || node.props.src.startsWith('./')
+      || node.props.src.startsWith('../'));
+  // Both `kind: 'element'` (post-flatten) AND `kind: 'component'`
+  // (un-flattened, e.g. `<AvatarPrimitive.Image>` whose subComponent name
+  // doesn't normalize cleanly enough for `getCompoundClasses` to match the
+  // parent's registry) carry `props.src` identically. The image branch
+  // should fire for either — the alternative is a wrapper-frame default
+  // white frame and no SVG render at all.
+  const isLeafImageLike = looksLikeImageSrc
+    && (node.kind === 'element' || node.kind === 'component')
+    && (!('children' in node) || !node.children || node.children.length === 0);
+  if (tagLower === 'img' || node.tagName === 'Image' || isLeafImageLike) {
+    const ir = layoutComputed.layoutIR;
+    // FILL on either axis means the image should stretch to parent dimensions
+    // (Tailwind `w-full`, `h-full`, or `size-full` — the latter is normalized
+    // to `w-full h-full` at splitClassName time). When parent dimensions are
+    // unknown at build time, fall back to the 200×150 placeholder; the
+    // post-append `applyFullWidthIfPossible` pipeline (driven by the
+    // FULL_WIDTH_NODES / FULL_HEIGHT_NODES marks set inside
+    // `applyTailwindStylesToFrame`) will resize the frame to the parent.
+    const wantsFillWidth = ir.widthMode === 'FILL';
+    const wantsFillHeight = ir.heightMode === 'FILL';
+    const w = ir.fixedWidth
+      ?? (node.props.width != null ? parseFloat(String(node.props.width)) : null)
+      ?? (wantsFillWidth ? 40 : 200);
+    const h = ir.fixedHeight
+      ?? (node.props.height != null ? parseFloat(String(node.props.height)) : null)
+      ?? (wantsFillHeight ? 40 : 150);
+    const imgFrame = figma.createFrame();
+    imgFrame.name = node.props.alt ? String(node.props.alt) : 'image';
+    // layoutMode must stay NONE (fixed-size image frame); don't set sizing mode properties
+    imgFrame.layoutMode = 'NONE';
+    // Default-clear the fill so a transparent frame is the floor for every
+    // branch below. The raster path will replace fills with an IMAGE paint,
+    // the placeholder path with a gray SOLID; the SVG branch leaves fills
+    // empty and renders the vector as a child. Without this default, an SVG
+    // branch that short-circuits (fetch race, alt-only image, ...) leaks
+    // `createFrame()`'s default WHITE fill into the rendered output.
+    imgFrame.fills = [];
+    // Apply border radius / FULL_WIDTH/HEIGHT marks from Tailwind classes
+    applyTailwindStylesToFrame(imgFrame, classes, colorGroup, radiusGroup, theme);
+    // Resize after applyTailwindStylesToFrame in case it modifies the frame
+    imgFrame.resize(Math.max(1, w), Math.max(1, h));
+
+    const src = node.props.src ? String(node.props.src) : null;
+    const svgString = src ? getSvgString(src) : null;
+    const imageHash = src ? getImageHash(src) : null;
+
+    if (svgString) {
+      // SVG: embed the vector node INSIDE imgFrame so all the class-derived
+      // marks (`absolute`, `inset-0`, `w-full`, `h-full`, border radius, ...)
+      // accumulated on imgFrame by `applyTailwindStylesToFrame` apply to the
+      // rendered output. Returning the bare svgNode (the old approach)
+      // discarded every one of those marks and a `<AvatarImage
+      // className="absolute inset-0 size-full">` lost its positioning AND
+      // its parent-fill behaviour.
+      try {
+        const svgNode = figma.createNodeFromSvg(svgString);
+        svgNode.name = node.props.alt ? String(node.props.alt) : 'image';
+        const targetW = Math.max(1, w);
+        const targetH = Math.max(1, h);
+        const originalW = svgNode.width || targetW;
+        const originalH = svgNode.height || targetH;
+        svgNode.resize(targetW, targetH);
+        // Figma keeps stroke weights as absolute pixels across resize; in the browser
+        // SVG strokes scale with the viewBox. Scale vector strokes proportionally so a
+        // 262-unit logo with stroke-width=28 doesn't keep a 28px stroke at 22px render.
+        const scaleStrokes = (scale: number) => {
+          if (!Number.isFinite(scale) || scale <= 0 || scale === 1) return;
+          if (!('findAll' in svgNode)) return;
+          const vectors = svgNode.findAll((c: SceneNode) => c.type === 'VECTOR') as VectorNode[];
+          for (const v of vectors) {
+            const sw = v.strokeWeight;
+            if (typeof sw === 'number' && sw > 0) {
+              try { v.strokeWeight = sw * scale; } catch (_err) { /* ignore */ }
+            }
+          }
+        };
+        scaleStrokes(Math.min(targetW / originalW, targetH / originalH));
+        imgFrame.appendChild(svgNode);
+        // Register a hook so the deferred-layout pipeline keeps the SVG
+        // in sync when imgFrame is resized (e.g. via FULL_WIDTH/HEIGHT
+        // marks resolving against a size-14 / size-20 parent). Without
+        // this the SVG would stay at the build-time fallback (40×40)
+        // even when the surrounding Avatar is larger.
+        markSvgContentWrap(imgFrame, (newW: number, newH: number) => {
+          try {
+            const prevW = svgNode.width || newW;
+            const prevH = svgNode.height || newH;
+            svgNode.resize(Math.max(1, newW), Math.max(1, newH));
+            scaleStrokes(Math.min(newW / prevW, newH / prevH));
+          } catch (_err) { /* ignore */ }
+        });
+        return maybeWrapMxAuto(imgFrame, classes, context);
+      } catch (_e) { /* fall through to placeholder */ }
+    }
+
+    if (imageHash) {
+      imgFrame.fills = [{ type: 'IMAGE', scaleMode: 'FILL', imageHash } as ImagePaint];
+    } else {
+      imgFrame.fills = [{ type: 'SOLID', color: { r: 0.878, g: 0.894, b: 0.914 }, opacity: 1 }];
+      try {
+        const placeholderSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
+        const iconNode = figma.createNodeFromSvg(placeholderSvg);
+        if (iconNode) {
+          iconNode.x = Math.max(0, Math.round((w - 24) / 2));
+          iconNode.y = Math.max(0, Math.round((h - 24) / 2));
+          imgFrame.appendChild(iconNode);
+        }
+      } catch (_e) { /* createNodeFromSvg not available in all contexts */ }
+    }
+    return maybeWrapMxAuto(imgFrame, classes, context);
+  }
+
+  if (node.kind === 'element') {
+    const canTreatAsIcon = !node.children || node.children.length === 0;
+    if (canTreatAsIcon) {
+    const fgColor = resolveIconForegroundColor(nextContext, colorGroup, theme, node.props);
+    const registryIcon = renderRegistryIcon(node.tagName, classes, node.props, fgColor);
+    if (registryIcon) {
+      return maybeWrapMxAuto(registryIcon, classes, context);
+    }
+
+    const mappedIcon = renderMappedIcon(
+      node.tagName,
+      classes,
+      node.props,
+      fgColor,
+      !!nextContext.accordionItemIsOpen
+    );
+    if (mappedIcon) {
+      return maybeWrapMxAuto(mappedIcon, classes, context);
+    }
+    }
+  }
+
+  // Check for React component (uppercase) - try to find definition
+  if (node.kind === 'component') {
+    const expanded = maybeExpandTextLineComponent(node);
+    if (expanded) {
+      return buildFigmaNode(expanded, colorGroup, radiusGroup, theme, depth, context);
+    }
+    // Check if this is a React Icon we can render.
+    // Guard: if a component already has explicit children, preserve normal component layout.
+    // This prevents primitives like Close (with nested icon + sr-only label) from being
+    // collapsed into a single icon node.
+    const canTreatAsIcon = !node.children || node.children.length === 0;
+    if (canTreatAsIcon) {
+      const fgColor = resolveIconForegroundColor(nextContext, colorGroup, theme, node.props);
+      const registryIcon = renderRegistryIcon(node.tagName, classes, node.props, fgColor);
+      if (registryIcon) {
+        return maybeWrapMxAuto(registryIcon, classes, context);
+      }
+
+      const mappedIcon = renderMappedIcon(
+        node.tagName,
+        classes,
+        node.props,
+        fgColor,
+        !!nextContext.accordionItemIsOpen
+      );
+      if (mappedIcon) {
+        return maybeWrapMxAuto(mappedIcon, classes, context);
+      }
+    }
+
+    let compDef = getComponentDefByName(node.tagName);
+    const inferredCompDef = !compDef && node.tagName === 'Comp'
+      ? inferCvaDefFromClasses(classes)
+      : null;
+    if (!compDef && inferredCompDef) {
+      compDef = inferredCompDef;
+    }
+    if (compDef) {
+      const analysis = normalizeComponentDef(compDef);
+      // The scanner inlines shadcn primitives: <Button variant="x"> becomes
+      // <ButtonPrimitive className="<resolved classes>">, <Checkbox/> becomes
+      // <CheckboxPrimitive.Root className="<base+state classes>">. The baked
+      // className trips `analyzeSymbolPolicy`'s class_override check and
+      // forces tree fallback. When the lookup resolved via a non-exact name
+      // (tagName !== def.name), strip/rebuild instance props so the symbol
+      // path can succeed.
+      const resolvedViaPrimitive = analysis.name !== node.tagName
+        && typeof node.props?.className === 'string'
+        && String(node.props.className).trim().length > 0;
+      const shouldInferFromClasses = analysis.type === 'cva'
+        && (!!inferredCompDef || resolvedViaPrimitive);
+      let instanceProps: Record<string, string>;
+      if (shouldInferFromClasses) {
+        instanceProps = buildCvaInstanceProps(analysis, node.props, classes, true);
+      } else if (resolvedViaPrimitive && (analysis.type === 'state' || analysis.type === 'simple')) {
+        // For STATE / SIMPLE primitives: drop the scanner-resolved className
+        // so the symbol-instance policy doesn't reject it for class_override.
+        // The master already bakes the same base/state classes — the resolved
+        // className is redundant in that case.
+        //
+        // COMPOUND components are intentionally excluded: their consumers
+        // routinely customize the per-invocation className (`<Avatar
+        // className="size-8">`, `<Card className="bg-muted">`, ...). The
+        // master can only represent ONE baked-in size/style, so silently
+        // stripping the className routes every instance through the master
+        // and ignores the consumer's customization. Keep the className → the
+        // symbol-instance policy correctly returns class_override and the
+        // caller falls back to wrapper-frame rendering, where the consumer
+        // className is honoured per-invocation.
+        instanceProps = Object.assign({}, node.props);
+        delete instanceProps.className;
+      } else {
+        instanceProps = Object.assign({}, node.props);
+      }
+      // Propagate JSX-element children into the synthetic instance's props as
+      // `__jsxChildren` so `tryCreateCvaComponentInstance`'s
+      // `cvaInstanceHasOverridingJsxChildren` guard fires for nested CVA
+      // rendering too. Without this, only the story-ROOT scanner instance
+      // carried `__jsxChildren` (and our guard only fired for that path);
+      // every nested `<Toggle><Icon /></Toggle>` inside another component
+      // silently went through the symbol-master path and inherited the
+      // master's icon. See `cvaInstanceHasOverridingJsxChildren` docstring.
+      // node.children at this point is NodeIR[] (post resolveNodeIR), so the
+      // discriminator is `kind`, not `type`. NodeIR's 'element' / 'component'
+      // both represent a JSX-element child — text-only siblings use 'text'
+      // and don't count. Earlier this check used `c.type === 'element'`
+      // which never matched and silently broke the guard.
+      const nodeChildren = Array.isArray(node.children) ? node.children : [];
+      const hasElementChild = nodeChildren.some((c: unknown) => {
+        if (!c || typeof c !== 'object') return false;
+        const k = (c as { kind?: string }).kind;
+        return k === 'element' || k === 'component';
+      });
+      // The CVA fall-back guard in tryCreateCvaComponentInstance keys off
+      // `__jsxChildren` of element type. NodeIR's `kind` doesn't survive
+      // a round-trip into that helper, so synthesise a JSX-shape payload
+      // (`{ type: 'element' }`) the guard understands.
+      const syntheticJsxChildren = hasElementChild
+        ? nodeChildren.map((c: unknown) => {
+            if (!c || typeof c !== 'object') return c;
+            const k = (c as { kind?: string }).kind;
+            if (k === 'element' || k === 'component') {
+              return Object.assign({}, c, { type: 'element' });
+            }
+            return c;
+          })
+        : nodeChildren;
+      const instanceProps2 = hasElementChild
+        ? Object.assign({}, instanceProps, { __jsxChildren: syntheticJsxChildren })
+        : instanceProps;
+      const instance = {
+        props: instanceProps2,
+        children: collectTextContent(node),
+      };
+
+      const symbolInstance = tryRenderSharedSymbolInstance(analysis, instance, theme);
+      if (symbolInstance) {
+        return maybeWrapMxAuto(symbolInstance, classes, context);
+      }
+      if (!node.children || node.children.length === 0) {
+        // For simple components used inline in jsxTree (e.g. <Box className="h-4 w-48" />),
+        // render as a styled frame using the instance's className merged with base visual classes
+        if (analysis.type === 'simple' && node.props.className) {
+          const instanceClasses = node.classes.slice();
+          const compClasses = analysis.classes || [];
+          const baseVisualClasses = compClasses.filter((c: string) =>
+            c.startsWith('bg-') || (c.startsWith('rounded') && !c.includes('/'))
+          );
+          const allClasses = mergeClasses(baseVisualClasses, instanceClasses);
+
+          const simpleFrame = figma.createFrame();
+          simpleFrame.name = node.tagName;
+          simpleFrame.layoutMode = 'VERTICAL';
+          simpleFrame.primaryAxisSizingMode = 'FIXED';
+          simpleFrame.counterAxisSizingMode = 'FIXED';
+          simpleFrame.fills = [];
+          applyClipBehavior(simpleFrame, allClasses);
+          if (allClasses.length > 0) {
+            applyTailwindStylesToFrame(simpleFrame, allClasses, colorGroup, radiusGroup, theme);
+          }
+          return maybeWrapMxAuto(simpleFrame, allClasses, context);
+        }
+
+        // If the component has a jsxTree (from its own implementation), render it directly
+        // (e.g. <HeroSection /> inline with no children expands to the full component structure)
+        if (analysis.type === 'simple' && analysis.jsxTree) {
+          const result = renderComponentWithJsxTree(
+            analysis.jsxTree,
+            [],
+            node.props,
+            colorGroup,
+            radiusGroup,
+            theme,
+            depth,
+            nextContext
+          );
+          if (result) {
+            return maybeWrapMxAuto(result, classes, context);
+          }
+        }
+
+        const frame = figma.createFrame();
+        frame.name = node.tagName;
+        frame.layoutMode = 'VERTICAL';
+        frame.primaryAxisSizingMode = 'AUTO';
+        frame.counterAxisSizingMode = 'AUTO';
+        frame.fills = [];
+        applyClipBehavior(frame, classes);
+
+        const comp = createCompoundComponent(frame, analysis, theme);
+        if (comp) return maybeWrapMxAuto(comp, classes, context);
+      }
+    }
+
+    // If this component has children in the jsxTree, render them
+    // (wrapper components should show their content)
+    if (node.children && node.children.length > 0) {
+      // Transparent context-provider wrappers (e.g. PopoverPrimitive.Root,
+      // TooltipPrimitive.Provider, SelectPrimitive.Root) have no className and
+      // no component definition — they exist only to provide React context.
+      // Skip the wrapper and render the single visual child directly so it
+      // is not buried inside an unsized frame.
+      const isTriggerWrapper = node.tagName.toLowerCase().endsWith('trigger');
+      if (!compDef && classes.length === 0 && node.children.length === 1 && !isTriggerWrapper) {
+        return buildFigmaNode(node.children[0], colorGroup, radiusGroup, theme, depth, context);
+      }
+      // Get compound classes - try own definition first, then parent's subComponents
+      let compoundClasses: string[] = [];
+      let currentCompoundDef: ComponentDef | null = null;
+      if (compDef) {
+        const normalizedDef = normalizeComponentDef(compDef);
+        // Get subComponent classes if this is a compound component
+        compoundClasses = getCompoundClasses(normalizedDef, node.tagName);
+        if (normalizedDef.type === 'compound') {
+          currentCompoundDef = normalizedDef;
+        }
+        // Check if this component has a jsxTree structure (for components with decorative elements)
+        if (normalizedDef.type === 'simple' && normalizedDef.jsxTree) {
+          const hasInstanceChildren = (node.children?.length ?? 0) > 0;
+          const canRenderTree = !hasInstanceChildren || jsxTreeHasChildrenSlot(normalizedDef.jsxTree);
+          if (canRenderTree) {
+          // Render the component's internal structure from jsxTree
+          const result = renderComponentWithJsxTree(
+            normalizedDef.jsxTree,
+            node.children,
+            node.props,
+            colorGroup,
+            radiusGroup,
+            theme,
+            depth,
+            nextContext
+          );
+          if (result) {
+            return maybeWrapMxAuto(result, classes, context);
+          }
+          }
+        }
+        // Use only container-level classes from the definition
+        const defClasses = normalizedDef.baseClasses || normalizedDef.classes || [];
+        if (defClasses.length > 0 && shouldMergeDefBaseClassesForTag(normalizedDef, node.tagName)) {
+          // Keep wrapper/container semantic classes from base definitions.
+          // This preserves layout behavior (grid/flex/gap) for primitives like RadioGroup,
+          // while still avoiding most decorative implementation internals.
+          const containerClasses = pickPreservedWrapperBaseClasses(defClasses);
+          compoundClasses = mergeClasses(containerClasses, compoundClasses);
+        }
+      }
+      // If no classes found and we have a parent compound def, look up as subComponent
+      if (compoundClasses.length === 0 && context.parentCompoundDef) {
+        compoundClasses = getCompoundClasses(context.parentCompoundDef, node.tagName);
+      }
+
+      const mergedClasses = compoundClasses.length > 0
+        ? mergeClasses(compoundClasses, classes)
+        : classes;
+      const responsiveMergedClasses = mergedClasses === classes
+        ? classes
+        : resolveClassesForBreakpoint(mergedClasses, breakpointIndex);
+      const activeMergedClasses = expandActiveConditionalVariants(responsiveMergedClasses, node);
+
+      const wrapperFrame = figma.createFrame();
+      wrapperFrame.name = node.tagName;
+      wrapperFrame.fills = [];
+
+      // Apply layout using LayoutParser IR
+      const wrapperIR = activeMergedClasses === classes ? layoutComputed.layoutIR : LayoutParser.parseToIR(activeMergedClasses);
+      LayoutParser.applyToFrame(wrapperFrame, wrapperIR);
+
+      // Apply styles to the frame
+      if (activeMergedClasses.length > 0) {
+        applyTailwindStylesToFrame(wrapperFrame, activeMergedClasses, colorGroup, radiusGroup, theme);
+      }
+      applyClipBehavior(wrapperFrame, activeMergedClasses);
+      // Component wrappers that the scanner emits as Radix primitives
+      // (`<DropdownMenuPrimitive.Item>`, `<TabsPrimitive.Trigger>`, …) reach
+      // this branch with `kind: 'component'`. The `kind: 'element'` branch
+      // applies `shouldStretchToParentWidth` to stretch block-level children
+      // to a vertical parent's content width; without the same check here a
+      // DropdownMenuItem inside a `w-56` Content stays HUG-width. Treat the
+      // wrapper as a div — Radix/shadcn primitives render <div> by default
+      // unless `asChild` is used (handled separately) — so block-flow stretch
+      // applies. The `__fromPortal` guard below intentionally runs after so
+      // portal panels still tag themselves.
+      if (
+        context.parentLayout === 'VERTICAL'
+        && shouldStretchToParentWidth('div', activeMergedClasses)
+      ) {
+        try { wrapperFrame.layoutAlign = 'STRETCH'; } catch (_err) { /* ignore */ }
+        // Mirror the `kind: 'element'` branch's resize: layoutAlign alone may
+        // not grow the frame when the parent isn't sized yet, so when we know
+        // context.maxWidth, set the axis we'd otherwise hug to FIXED at that
+        // width. Without this the Item stays at its content width even after
+        // the STRETCH mark.
+        if (context.maxWidth && context.maxWidth > 0) {
+          try {
+            if (
+              wrapperFrame.layoutMode === 'HORIZONTAL'
+              && wrapperFrame.primaryAxisSizingMode !== 'FIXED'
+            ) {
+              wrapperFrame.resize(context.maxWidth, wrapperFrame.height);
+              wrapperFrame.primaryAxisSizingMode = 'FIXED';
+            } else if (
+              wrapperFrame.layoutMode === 'VERTICAL'
+              && wrapperFrame.counterAxisSizingMode !== 'FIXED'
+            ) {
+              wrapperFrame.resize(context.maxWidth, wrapperFrame.height);
+              wrapperFrame.counterAxisSizingMode = 'FIXED';
+            }
+          } catch (_err) { /* ignore resize errors */ }
+        }
+      }
+      // `ml-auto` on any direct child → parent uses SPACE_BETWEEN along the
+      // primary axis. See `hasAutoMarginChild` above for why the parent has
+      // to detect this itself (inline-text children never carry a frame
+      // mark). Only flip when the consumer hasn't already set a `justify-*`
+      // (the default Figma value is `MIN`, which is also what we get for a
+      // flex with no `justify-*`).
+      if (
+        wrapperFrame.layoutMode === 'HORIZONTAL'
+        && wrapperFrame.primaryAxisAlignItems === 'MIN'
+        && hasAutoMarginChild(node.children)
+      ) {
+        try { wrapperFrame.primaryAxisAlignItems = 'SPACE_BETWEEN'; } catch (_err) { /* ignore */ }
+      }
+      // Tag portal panels so story-builder can grow Story Layout past narrow wrapper
+      // classes (e.g. `w-56`) that would otherwise clip the panel. See portal-panel.ts.
+      if (node.props && node.props.__fromPortal) {
+        try { wrapperFrame.setPluginData('inkbridge:portal-panel', '1'); } catch { /* ignore */ }
+      }
+      // Calculate content width for children (accounting for padding)
+      // This is needed for justify-between to work in Figma SPACE_BETWEEN mode
+      const wrapperPadding = (wrapperFrame.paddingLeft || 0) + (wrapperFrame.paddingRight || 0);
+      const hasFixedWidth = wrapperFrame.layoutMode === 'HORIZONTAL'
+        ? wrapperFrame.primaryAxisSizingMode === 'FIXED'
+        : wrapperFrame.counterAxisSizingMode === 'FIXED';
+      const wrapperContentWidth = hasFixedWidth && wrapperFrame.width > 0
+        ? wrapperFrame.width - wrapperPadding
+        : undefined;
+      // Cap wrapperContentWidth by the parent context's max-width so that a story-level
+      // max-w constraint (e.g. max-w-md = 448px) overrides a wider component-level
+      // max-w (e.g. max-w-lg = 512px) that LayoutParser may have picked from the merged
+      // class list. Without this, children receive childCtx.maxWidth = 464 (from the
+      // component's max-w-lg frame width minus padding) instead of ~400 (from max-w-md).
+      const contextContentWidth = context.maxWidth != null && context.maxWidth > 0
+        ? Math.max(0, context.maxWidth - wrapperPadding)
+        : undefined;
+      const childMaxWidth = wrapperContentWidth != null && contextContentWidth != null
+        ? Math.min(wrapperContentWidth, contextContentWidth)
+        : (wrapperContentWidth ?? contextContentWidth);
+      const childCtx: RenderContext = Object.assign({}, nextContext, {
+        parentLayout: wrapperFrame.layoutMode === 'HORIZONTAL' ? 'HORIZONTAL' : 'VERTICAL',
+        textColor: nextContext.textColor,
+        textColorToken: nextContext.textColorToken,
+        maxWidth: childMaxWidth || context.maxWidth,
+        parentCompoundDef: currentCompoundDef || nextContext.parentCompoundDef,
+      });
+      const skipWrapperFullWidth = shouldSkipFullWidthForClasses(activeMergedClasses);
+      const accordionItemOrdinal = { value: 0 };
+      if (!isSemanticTableContainer(node)) {
+        applyVerticalMarginSpacing(wrapperFrame, node.children || []);
+      }
+
+      for (const rawChild of node.children) {
+        const child = unwrapTransparentWrapper(rawChild);
+        const perChildCtx = createPerChildRenderContext(childCtx, node, child, accordionItemOrdinal);
+        const childNode = buildFigmaNode(child, colorGroup, radiusGroup, theme, depth + 1, perChildCtx);
+        if (childNode) {
+          wrapperFrame.appendChild(childNode);
+
+          // Apply child-specific layout properties
+          if (isElementLikeNode(child)) {
+            LayoutParser.applyChildProperties(childNode, child.classes, wrapperFrame);
+          }
+          applyAbsoluteIfPossible(childNode, wrapperFrame);
+          stabilizeHorizontalStretchChild(childNode, wrapperFrame);
+          constrainSingleHorizontalTextChild(childNode);
+          const fullWidthOptions = (skipWrapperFullWidth || childCtx.maxWidth != null)
+            ? { skipFullWidth: skipWrapperFullWidth, widthOverride: childCtx.maxWidth }
+            : undefined;
+          applyFullWidthIfPossible(childNode, wrapperFrame, fullWidthOptions);
+          applyRingIfPossible(childNode, wrapperFrame);
+          applyAspectRatioIfPossible(childNode);
+          enforceTabsChildSizing(node, child, childNode, childCtx.maxWidth);
+          if (isElementLikeNode(child)) {
+            enforceFixedBoxSizingAfterLayout(childNode, child.classes);
+          }
+          // Aspect ratio / full width may have given this child its final
+          // dimensions; resolve any deferred percent positions on its children.
+          if ('layoutMode' in childNode) {
+            applyDeferredPercentPositioning(childNode as FrameNode);
+          }
+        }
+      }
+      applyDeferredBottomPositioning(wrapperFrame);
+      applyDeferredCenterYPositioning(wrapperFrame);
+      applyDeferredPercentPositioning(wrapperFrame);
+      reflowMxAutoChildren(wrapperFrame);
+      // Apply grid columns after all children are added
+      const wrapperGridWidth = resolveGridWidthOverride(wrapperFrame, childCtx.maxWidth);
+      applyGridColumnsWithReflow(wrapperFrame, wrapperGridWidth);
+
+      return maybeWrapMxAuto(wrapperFrame, activeMergedClasses, context);
+    }
+
+    // Components like SelectValue, Input etc. that expose a placeholder prop but have no
+    // renderable children — render the placeholder as muted text so triggers show content.
+    if ((!node.children || node.children.length === 0) && node.props && node.props.placeholder) {
+      const phOpts: CreateTextOptions & { theme: string; opacity: number } = { fontSize: context.textFontSize || 14, theme, opacity: 0.4 };
+      if (context.textFontStyle != null) phOpts.fontStyle = context.textFontStyle;
+      else if (context.textBold != null) phOpts.bold = context.textBold;
+      if (context.textColor) phOpts.fill = context.textColor;
+      return createTextNode(node.props.placeholder, phOpts);
+    }
+
+    // Unknown component without children - render styled frame
+    const compFrame = figma.createFrame();
+    compFrame.name = node.tagName;
+    compFrame.layoutMode = 'VERTICAL';
+    compFrame.primaryAxisSizingMode = 'AUTO';
+    compFrame.counterAxisSizingMode = 'AUTO';
+    compFrame.fills = [];
+    applyClipBehavior(compFrame, classes);
+    if (classes.length > 0) {
+      applyTailwindStylesToFrame(compFrame, classes, colorGroup, radiusGroup, theme);
+    }
+    // applyTailwindStylesToFrame may have flipped layoutMode based on flex/grid classes,
+    // so read it via a string-compare that doesn't narrow against the literal assignment.
+    const compIsHorizontal = String(compFrame.layoutMode) === 'HORIZONTAL';
+    const compChildCtx: RenderContext = Object.assign({}, nextContext, {
+      textColor: nextContext.textColor,
+      textColorToken: nextContext.textColorToken,
+      maxWidth: compIsHorizontal ? undefined : context.maxWidth,
+      parentLayout: compIsHorizontal ? 'HORIZONTAL' : 'VERTICAL',
+    });
+    const skipCompFullWidth = shouldSkipFullWidthForClasses(classes);
+    const accordionItemOrdinal = { value: 0 };
+    for (const rawChild of node.children || []) {
+      const child = unwrapTransparentWrapper(rawChild);
+      const perChildCtx = createPerChildRenderContext(compChildCtx, node, child, accordionItemOrdinal);
+      const childNode = buildFigmaNode(child, colorGroup, radiusGroup, theme, depth + 1, perChildCtx);
+      if (childNode) {
+        compFrame.appendChild(childNode);
+        // Apply child layout properties based on parent context
+        if (isElementLikeNode(child)) {
+          LayoutParser.applyChildProperties(childNode, child.classes, compFrame);
+        }
+        applyAbsoluteIfPossible(childNode, compFrame);
+        stabilizeHorizontalStretchChild(childNode, compFrame);
+        constrainSingleHorizontalTextChild(childNode);
+        const fullWidthOptions = (skipCompFullWidth || compChildCtx.maxWidth != null)
+          ? { skipFullWidth: skipCompFullWidth, widthOverride: compChildCtx.maxWidth }
+          : undefined;
+        applyFullWidthIfPossible(childNode, compFrame, fullWidthOptions);
+        applyRingIfPossible(childNode, compFrame);
+        applyAspectRatioIfPossible(childNode);
+        if (isElementLikeNode(child)) {
+          enforceFixedBoxSizingAfterLayout(childNode, child.classes);
+        }
+        if ('layoutMode' in childNode) {
+          applyDeferredPercentPositioning(childNode as FrameNode);
+        }
+      }
+    }
+    applyDeferredBottomPositioning(compFrame);
+    applyDeferredCenterYPositioning(compFrame);
+    applyDeferredPercentPositioning(compFrame);
+    reflowMxAutoChildren(compFrame);
+    // Apply grid columns after all children are added
+    applyGridColumnsWithReflow(compFrame);
+    return maybeWrapMxAuto(compFrame, classes, context);
+  }
+
+  // HTML elements - create frame or text
+  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'a', 'label', 'li', 'small'].includes(tagLower)) {
+    const hasElementChildren = (node.children || []).some(child => isElementLikeNode(child));
+    const hasLayoutClass = layoutComputed.hasLayoutClass;
+    const hasFlexChildClass = layoutComputed.hasFlexChildClass;
+    const hasExplicitSize = layoutComputed.hasExplicitSize;
+    const inlineOnlyChildren = hasElementChildren && (node.children || []).every(isInlineTextNode);
+    // Any solid background on a text-category element requires a frame to be visible
+    const hasBgClass = classes.some(cls => {
+      if (!cls.startsWith('bg-')) return false;
+      const rest = cls.slice(3);
+      return !rest.startsWith('gradient') && !rest.startsWith('linear') && !rest.startsWith('radial') && rest !== 'transparent';
+    });
+
+    if (inlineOnlyChildren && !hasLayoutClass && !hasFlexChildClass && !hasBgClass) {
+      const inlineText = createInlineTextNode(node as NodeIRElement, textStyle, nextContext, colorGroup, theme, layoutComputed);
+      if (inlineText) return maybeWrapMxAuto(inlineText, classes, context);
+    }
+
+    // Create a frame container for elements with layout, explicit sizing, flex child classes, or a background fill
+    if (hasElementChildren || hasLayoutClass || hasFlexChildClass || hasExplicitSize || hasBgClass) {
+      const frame = figma.createFrame();
+      frame.name = node.tagName;
+      frame.fills = [];
+
+      // Apply layout using LayoutParser IR
+      LayoutParser.applyToFrame(frame, layoutComputed.layoutIR);
+
+      // Apply visual styles
+      if (classes.length > 0) {
+        applyTailwindStylesToFrame(frame, classes, colorGroup, radiusGroup, theme);
+      }
+      applyClipBehavior(frame, classes);
+      // `ml-auto` on any direct child → flip parent to SPACE_BETWEEN. Mirror
+      // of the wrapper-branch detection above; needed here because inline
+      // text children (e.g. `<span className="ml-auto">`) render as text
+      // nodes and never carry a frame mark for deferred-layout to read.
+      if (
+        frame.layoutMode === 'HORIZONTAL'
+        && frame.primaryAxisAlignItems === 'MIN'
+        && hasAutoMarginChild(node.children)
+      ) {
+        try { frame.primaryAxisAlignItems = 'SPACE_BETWEEN'; } catch (_err) { /* ignore */ }
+      }
+      if (
+        context.parentLayout === 'VERTICAL'
+        && shouldStretchToParentWidth(tagLower, classes)
+      ) {
+        frame.layoutAlign = 'STRETCH';
+      } else if (context.parentLayout === 'VERTICAL') {
+        // Inline display elements (inline-flex, inline-block, etc.) must not stretch to parent width.
+        // Figma's default layoutAlign 'INHERIT' = STRETCH in a VERTICAL parent — override it.
+        const hasInlineDisplay = classes.some(c => {
+          const base = getBaseClass(c);
+          return base === 'inline' || base === 'inline-flex' || base === 'inline-block' || base === 'inline-grid';
+        });
+        if (hasInlineDisplay) {
+          try { frame.layoutSizingHorizontal = 'HUG'; } catch (_e) { /* ignore if frame has no auto-layout */ }
+        }
+      }
+      if (
+        frame.layoutMode === 'HORIZONTAL'
+        && context.maxWidth
+        && frame.layoutAlign === 'STRETCH'
+        && frame.primaryAxisSizingMode !== 'FIXED'
+      ) {
+        frame.resize(context.maxWidth, frame.height);
+        frame.primaryAxisSizingMode = 'FIXED';
+      } else if (
+        frame.layoutMode === 'VERTICAL'
+        && context.maxWidth
+        && frame.layoutAlign === 'STRETCH'
+        && frame.counterAxisSizingMode !== 'FIXED'
+      ) {
+        // Block-level vertical containers should fill the known parent content width.
+        // Without an explicit width here, nested mx-auto/max-w content can collapse
+        // the whole chain back to HUG width.
+        frame.resize(context.maxWidth, frame.height);
+        frame.counterAxisSizingMode = 'FIXED';
+      }
+      // Handle text content or children
+      if (hasElementChildren) {
+        const frameHasFixedWidth = frame.layoutMode === 'HORIZONTAL'
+          ? frame.primaryAxisSizingMode === 'FIXED'
+          : frame.counterAxisSizingMode === 'FIXED';
+        const resolvedMaxWidth = frameHasFixedWidth
+          ? (nextContext.maxWidth ? Math.min(nextContext.maxWidth, frame.width) : frame.width)
+          : nextContext.maxWidth;
+        const skipElementFullWidth = shouldSkipFullWidthForClasses(classes);
+        const contentWidth = resolvedMaxWidth
+          ? Math.max(0, resolvedMaxWidth - (frame.paddingLeft || 0) - (frame.paddingRight || 0))
+          : undefined;
+        const gridWidthOverride = resolveGridWidthOverride(frame, contentWidth);
+        const inheritedChildMaxWidth = frame.layoutMode === 'HORIZONTAL' ? undefined : contentWidth;
+        const childContext: RenderContext = {
+          ...nextContext,
+          textAlign: nextContext.textAlign,
+          maxWidth: inheritedChildMaxWidth,
+          parentLayout: frame.layoutMode === 'HORIZONTAL' ? 'HORIZONTAL' : 'VERTICAL',
+          textColor: nextContext.textColor,
+          textColorToken: nextContext.textColorToken,
+        };
+        const accordionItemOrdinal = { value: 0 };
+        for (const rawChild of node.children || []) {
+          const child = unwrapTransparentWrapper(rawChild);
+          const perChildCtx = createPerChildRenderContext(childContext, node, child, accordionItemOrdinal);
+          const childNode = buildFigmaNode(child, colorGroup, radiusGroup, theme, depth + 1, perChildCtx);
+          if (childNode) {
+            frame.appendChild(childNode);
+            // Apply child layout properties based on parent context
+            if (isElementLikeNode(child)) {
+              LayoutParser.applyChildProperties(childNode, child.classes, frame);
+            }
+            applyAbsoluteIfPossible(childNode, frame);
+            stabilizeHorizontalStretchChild(childNode, frame);
+            constrainSingleHorizontalTextChild(childNode);
+            const fullWidthOptions = (skipElementFullWidth || childContext.maxWidth != null)
+              ? { skipFullWidth: skipElementFullWidth, widthOverride: childContext.maxWidth }
+              : undefined;
+            applyFullWidthIfPossible(childNode, frame, fullWidthOptions);
+            applyRingIfPossible(childNode, frame);
+            applyAspectRatioIfPossible(childNode);
+            if (isElementLikeNode(child)) {
+              enforceFixedBoxSizingAfterLayout(childNode, child.classes);
+            }
+            if ('layoutMode' in childNode) {
+              applyDeferredPercentPositioning(childNode as FrameNode);
+            }
+          }
+        }
+        applyDeferredBottomPositioning(frame);
+        applyDeferredCenterYPositioning(frame);
+        applyDeferredPercentPositioning(frame);
+        reflowMxAutoChildren(frame);
+        constrainSingleHorizontalTextChild(frame);
+        // Apply grid columns after all children are added
+        applyGridColumnsWithReflow(frame, gridWidthOverride);
+      } else {
+        // Text-only element with sizing - create text node and append.
+        // Center the text on the frame's main axis so that when the frame
+        // ends up row-synced to a taller sibling (e.g. a `<label>` next to
+        // an `h-9` input in a grid with items-center), the text sits at
+        // vertical middle instead of top. Safe for the hug case too: with
+        // a single child, primaryAxisAlignItems has no visible effect when
+        // the frame hugs to content height.
+        try {
+          if (frame.layoutMode === 'VERTICAL' || frame.layoutMode === 'HORIZONTAL') {
+            if (frame.layoutMode === 'VERTICAL') {
+              frame.primaryAxisAlignItems = 'CENTER';
+            } else {
+              frame.counterAxisAlignItems = 'CENTER';
+            }
+          }
+        } catch (_err) { /* ignore */ }
+        const textContent = collectTextContent(node);
+        if (textContent.trim()) {
+          const typo = TAG_TYPOGRAPHY[tagLower] || { fontSize: 14 };
+          const isHeadingTag = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagLower);
+          const textOpts: CreateTextOptions & { theme: string } = {
+            fontSize: typo.fontSize,
+            bold: typo.bold,
+            lineHeight: typo.lineHeight,
+            theme,
+            fontRole: isHeadingTag ? 'heading' : 'sans',
+          };
+          if (textStyle.text) {
+            textOpts.fill = textStyle.text;
+          } else if (nextContext.textColor) {
+            textOpts.fill = nextContext.textColor;
+          }
+          const resolvedBold = getResolvedBoldFromClasses(classes, textOpts.bold);
+          if (resolvedBold != null) textOpts.bold = resolvedBold;
+          const resolvedFontStyle = getFontStyleFromClasses(classes, nextContext.textFontStyle);
+          if (resolvedFontStyle != null) textOpts.fontStyle = resolvedFontStyle;
+          const resolvedSize = getResolvedTextSizeFromClasses(classes, textOpts.fontSize);
+          if (resolvedSize != null) textOpts.fontSize = resolvedSize;
+          // Apply text alignment: element's own class wins, otherwise inherit
+          // from parent context (text-align is an inherited CSS property, and
+          // this frame branch is also reached for text-only elements that get
+          // a synthetic w-[Npx] via the width solver — without the fallback
+          // they silently drop their parent's `text-center`).
+          if (classes.includes('text-center')) {
+            textOpts.textAlignHorizontal = 'CENTER';
+          } else if (classes.includes('text-right')) {
+            textOpts.textAlignHorizontal = 'RIGHT';
+          } else if (classes.includes('text-left')) {
+            textOpts.textAlignHorizontal = 'LEFT';
+          } else if (nextContext.textAlign) {
+            textOpts.textAlignHorizontal = nextContext.textAlign;
+          }
+          const textNode = createTextNode(textContent, textOpts);
+          // Decision lives in `resolveTextResizeWidth` so the truth table is
+          // testable as a pure helper (site (c) of the recurring inline-flex
+          // pill bug — see tools/figma-plugin/.ai/troubleshooting.md). Skips
+          // HORIZONTAL+CENTER (numbered-circle case) and HORIZONTAL+HUG
+          // (inline-flex pill case); resizes otherwise.
+          const textContentWidth = resolveTextResizeWidth(frame, nextContext.maxWidth);
+          if (textContentWidth != null) {
+            try {
+              textNode.textAutoResize = 'HEIGHT';
+              textNode.resize(textContentWidth, textNode.height);
+            } catch (_err) {
+              // ignore resize errors
+            }
+          }
+          frame.appendChild(textNode);
+        }
+      }
+      return maybeWrapMxAuto(frame, classes, context);
+    }
+
+    // Text-like elements - gather all text content
+    const textContent = collectTextContent(node);
+    if (!textContent.trim()) return null;
+
+    const typo = TAG_TYPOGRAPHY[tagLower] || { fontSize: 14 };
+    const isHeadingTag = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagLower);
+    const textOpts: CreateTextOptions & { theme: string } = {
+      fontSize: typo.fontSize,
+      bold: typo.bold,
+      lineHeight: typo.lineHeight,
+      theme,
+      fontRole: isHeadingTag ? 'heading' : 'sans',
+    };
+
+    // Extract text color from classes
+    if (textStyle.text) {
+      textOpts.fill = textStyle.text;
+    } else if (nextContext.textColor) {
+      textOpts.fill = nextContext.textColor;
+    }
+
+    if (nextContext.textAlign) {
+      textOpts.textAlignHorizontal = nextContext.textAlign;
+    }
+
+    // Check for bold/font-weight class
+    const resolvedBold = getResolvedBoldFromClasses(classes, textOpts.bold);
+    if (resolvedBold != null) textOpts.bold = resolvedBold;
+    const resolvedFontStyle = getFontStyleFromClasses(classes, nextContext.textFontStyle);
+    if (resolvedFontStyle != null) textOpts.fontStyle = resolvedFontStyle;
+
+    // Extract font size from classes
+    const resolvedSize = getResolvedTextSizeFromClasses(classes, textOpts.fontSize);
+    if (resolvedSize != null) textOpts.fontSize = resolvedSize;
+
+    const lineHeight = getLineHeightFromClasses(classes, textOpts.fontSize || 14);
+    if (lineHeight) {
+      textOpts.lineHeight = lineHeight;
+    }
+
+    const textNode = createTextNode(textContent, textOpts);
+    const isBlockText = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(tagLower);
+    // When mx-auto is present, extract the element's own max-w-* constraint so the text
+    // node is constrained to that width even when the parent maxWidth is wider.
+    const hasMxAuto = classes.includes('mx-auto');
+    let ownMaxW: number | null = null;
+    if (hasMxAuto) {
+      for (const cls of classes) {
+        if (cls.startsWith('max-w-')) {
+          const v = resolveMaxWidth(cls);
+          if (v != null) { ownMaxW = v; break; }
+        }
+      }
+    }
+    const effectiveMaxWidth = ownMaxW != null
+      ? (nextContext.maxWidth != null ? Math.min(nextContext.maxWidth, ownMaxW) : ownMaxW)
+      : nextContext.maxWidth;
+    const shouldConstrain = effectiveMaxWidth
+      && nextContext.parentLayout !== 'HORIZONTAL'
+      && (isBlockText || classes.includes('block') || classes.includes('w-full'));
+    const hasTruncateClass = classes.includes('truncate');
+    let lineClampN: number | null = null;
+    for (const cls of classes) {
+      const m = cls.match(/^line-clamp-(\d+)$/);
+      if (m) { lineClampN = parseInt(m[1], 10); break; }
+    }
+    if ((hasTruncateClass || lineClampN != null) && effectiveMaxWidth) {
+      try {
+        const maxLines = lineClampN ?? 1;
+        const fs = textOpts.fontSize || 14;
+        const lh = textOpts.lineHeight || Math.ceil(fs * 1.5);
+        textNode.textTruncation = 'ENDING';
+        textNode.maxLines = maxLines;
+        textNode.resize(effectiveMaxWidth, Math.max(lh, lh * maxLines));
+      } catch (_err) { /* ignore */ }
+    } else if (shouldConstrain) {
+      try {
+        textNode.textAutoResize = 'HEIGHT';
+        textNode.resize(effectiveMaxWidth, textNode.height);
+      } catch (_err) {
+        // ignore resize errors
+      }
+    }
+    return maybeWrapMxAuto(textNode, classes, context);
+  }
+
+  // <hr> - horizontal rule / separator
+  if (tagLower === 'hr') {
+    const hr = figma.createFrame();
+    hr.name = 'hr';
+    hr.layoutMode = 'HORIZONTAL';
+    hr.resize(200, 1);
+    hr.primaryAxisSizingMode = 'FIXED';
+    hr.counterAxisSizingMode = 'FIXED';
+    const borderColor = colorGroup.border ? parseColor(colorGroup.border) : { r: 0.85, g: 0.85, b: 0.85 };
+    hr.fills = [{ type: 'SOLID', color: { r: borderColor.r, g: borderColor.g, b: borderColor.b } }];
+    if (classes.includes('w-full')) {
+      markFullWidthNode(hr);
+    }
+    return maybeWrapMxAuto(hr, classes, context);
+  }
+
+  // Container elements (div, nav, section, header, footer, ul, ol, etc.)
+
+  // Check for clip-path in style prop - create vector shape instead of frame
+  const clipPathPolygon = parseClipPathFromStyle(node.props.style);
+  if (clipPathPolygon && node.children.length === 0) {
+    const decorativeNode = buildDecorativeClipPathNode({
+      clipPathPolygon,
+      classes,
+      contextMaxWidth: context.maxWidth,
+      colorGroup,
+      radiusGroup,
+      theme,
+    });
+    if (decorativeNode) return maybeWrapMxAuto(decorativeNode, classes, context);
+  }
+
+  const frame = figma.createFrame();
+  frame.name = node.tagName;
+  frame.fills = [];
+
+  // Apply layout using LayoutParser IR (handles flex, grid, alignment, spacing, dimensions)
+  LayoutParser.applyToFrame(frame, layoutComputed.layoutIR);
+
+  // Apply visual styles (colors, borders, radius) from Tailwind classes
+  // Resolve sm: breakpoint overrides when container is >= 640px (matches CSS cascade)
+  const effectiveClasses = (context.maxWidth != null && context.maxWidth >= 640)
+    ? getClassesForBreakpoint(classes, 'sm')
+    : classes;
+  if (effectiveClasses.length > 0) {
+    applyTailwindStylesToFrame(frame, effectiveClasses, colorGroup, radiusGroup, theme);
+  }
+  applyClipBehavior(frame, effectiveClasses);
+  // Hero-like containers (`relative isolate`) with decorative clip-path blobs should
+  // clip to their own bounds so gradients never spill outside the component frame.
+  if (effectiveClasses.includes('relative') && effectiveClasses.includes('isolate') && nodeHasClipPathDescendant(node)) {
+    frame.clipsContent = true;
+  }
+
+  // NOTE: text-left/center/right only affects TEXT content in CSS, not block layout.
+  // Do NOT apply alignFromClasses to frame.counterAxisAlignItems here.
+  // The textAlign context is propagated to child text nodes instead.
+
+  // A depth=0 root with an explicit width class (size-N, w-N, w-[N], size-full,
+  // ...) must keep that intrinsic size — overriding it with the page-canvas
+  // width turns a 40×40 avatar into a 900-wide pill. The override is only meant
+  // for unsized page-level containers that act as a story root.
+  const shouldApplyContextWidth = depth === 0 && context.maxWidth && !layoutComputed.hasExplicitSize;
+  if (shouldApplyContextWidth || (nextContext.maxWidth && nextContext.maxWidth !== context.maxWidth)) {
+    const targetWidth = shouldApplyContextWidth ? context.maxWidth : nextContext.maxWidth;
+    if (targetWidth) {
+      if (frame.layoutMode === 'HORIZONTAL') {
+        frame.resize(targetWidth, frame.height);
+        frame.primaryAxisSizingMode = 'FIXED';
+      } else {
+        frame.resize(targetWidth, frame.height);
+        frame.counterAxisSizingMode = 'FIXED';
+      }
+    }
+    // Clip the story root frame so absolute-positioned children (e.g. gradient blobs)
+    // don't extend visually outside the component's bounds in Figma.
+    if (shouldApplyContextWidth) {
+      frame.clipsContent = true;
+    }
+  }
+
+  // Block-level elements in VERTICAL parents should stretch to fill width
+  // Note: We set layoutAlign even before the frame is appended - Figma will respect it when appended
+  if (
+    context.parentLayout === 'VERTICAL'
+    && shouldStretchToParentWidth(tagLower, classes)
+  ) {
+    frame.layoutAlign = 'STRETCH';
+  } else if (context.parentLayout === 'VERTICAL') {
+    const hasInlineDisplay = classes.some(c => {
+      const base = getBaseClass(c);
+      return base === 'inline' || base === 'inline-flex' || base === 'inline-block' || base === 'inline-grid';
+    });
+    if (hasInlineDisplay) {
+      try { frame.layoutSizingHorizontal = 'HUG'; } catch (_e) { /* ignore if frame has no auto-layout */ }
+    }
+  }
+
+  if (
+    frame.layoutMode === 'HORIZONTAL'
+    && context.maxWidth
+    && frame.layoutAlign === 'STRETCH'
+    && frame.primaryAxisSizingMode !== 'FIXED'
+  ) {
+    frame.resize(context.maxWidth, frame.height);
+    frame.primaryAxisSizingMode = 'FIXED';
+  }
+
+  const frameHasFixedWidth = frame.layoutMode === 'HORIZONTAL'
+    ? frame.primaryAxisSizingMode === 'FIXED'
+    : frame.counterAxisSizingMode === 'FIXED';
+  const resolvedMaxWidth = frameHasFixedWidth
+    ? (nextContext.maxWidth ? Math.min(nextContext.maxWidth, frame.width) : frame.width)
+    : nextContext.maxWidth;
+  const gridCols = extractGridColumns(classes, resolvedMaxWidth || context.maxWidth);
+  const hasMultiColumnGrid = typeof gridCols === 'number' && gridCols > 1;
+  const gridWidth = resolvedMaxWidth || context.maxWidth || (hasMultiColumnGrid ? defaultGridWidth(gridCols) : undefined);
+  const skipChildFullWidth = !!gridCols || classes.includes('grid') || classes.includes('inline-grid');
+  if (hasMultiColumnGrid && gridWidth && 'resize' in frame) {
+    try {
+      if (frame.layoutMode !== 'HORIZONTAL') frame.layoutMode = 'HORIZONTAL';
+      if (frame.layoutWrap !== undefined) {
+        frame.layoutWrap = 'WRAP';
+      }
+      frame.resize(gridWidth, frame.height);
+      frame.primaryAxisSizingMode = 'FIXED';
+      frame.counterAxisSizingMode = 'AUTO';
+    } catch (_err) {
+      // ignore resize errors
+    }
+  }
+
+  // Render children
+  const contentWidth = resolvedMaxWidth
+    ? Math.max(0, resolvedMaxWidth - (frame.paddingLeft || 0) - (frame.paddingRight || 0))
+    : undefined;
+  const inheritedChildMaxWidth = frame.layoutMode === 'HORIZONTAL' ? undefined : contentWidth;
+  const childContext: RenderContext = {
+    ...nextContext,
+    textAlign: nextContext.textAlign,
+    maxWidth: inheritedChildMaxWidth,
+    parentLayout: frame.layoutMode === 'HORIZONTAL' ? 'HORIZONTAL' : 'VERTICAL',
+    textColor: nextContext.textColor,
+    textColorToken: nextContext.textColorToken,
+  };
+  const renderChildren = getRenderableChildren(node, classes);
+  const accordionItemOrdinal = { value: 0 };
+
+  // Convert child mt-* margins to auto-layout spacing in vertical stacks.
+  if (!isSemanticTableContainer(node)) {
+    applyVerticalMarginSpacing(frame, renderChildren);
+  }
+
+  // Inline-only div: all children are text/span/a nodes (no block layout).
+  // Collapse into a single text node — like a CSS inline container (e.g. pill labels).
+  const hasOnlyInlineChildren = !layoutComputed.hasLayoutClass
+    && renderChildren.length > 0
+    && renderChildren.every(isInlineTextNode);
+  if (hasOnlyInlineChildren) {
+    const inlineText = createInlineTextNode(node as NodeIRElement, textStyle, nextContext, colorGroup, theme, layoutComputed);
+    if (inlineText) {
+      frame.appendChild(inlineText);
+      return maybeWrapMxAuto(frame, classes, context);
+    }
+  }
+
+  for (const rawChild of renderChildren) {
+    // Transparent wrappers (e.g. Radix `<SheetClose asChild>`) render as a
+    // passthrough to their single inner child. Unwrap here so that
+    // `applyChildProperties` / stretch / full-width apply the inner element's
+    // own classes (e.g. `w-[Npx]`, `self-*`, `flex-1`) to the Figma node that
+    // was actually built for it.
+    const child = unwrapTransparentWrapper(rawChild);
+    const perChildCtx = createPerChildRenderContext(childContext, node, child, accordionItemOrdinal);
+    const childNode = buildFigmaNode(child, colorGroup, radiusGroup, theme, depth + 1, perChildCtx);
+    if (childNode) {
+      frame.appendChild(childNode);
+
+      // Apply child-specific layout properties (flex-1, self-*, etc.)
+      if (isElementLikeNode(child)) {
+        LayoutParser.applyChildProperties(childNode, child.classes, frame);
+      }
+      applyAbsoluteIfPossible(childNode, frame);
+      stabilizeHorizontalStretchChild(childNode, frame);
+      constrainSingleHorizontalTextChild(childNode);
+      const fullWidthOptions = (skipChildFullWidth || contentWidth != null)
+        ? { skipFullWidth: skipChildFullWidth, widthOverride: contentWidth }
+        : undefined;
+      applyFullWidthIfPossible(childNode, frame, fullWidthOptions);
+      applyRingIfPossible(childNode, frame);
+      applyAspectRatioIfPossible(childNode);
+      enforceGrowChildPrimaryFixed(childNode, frame);
+      enforceTabsChildSizing(node, child, childNode, childContext.maxWidth);
+      if (isElementLikeNode(child)) {
+        enforceFixedBoxSizingAfterLayout(childNode, child.classes);
+      }
+      // Aspect-ratio / full-width may have given child its final dimensions;
+      // resolve any deferred percent positions on its children now.
+      if ('layoutMode' in childNode) {
+        applyDeferredPercentPositioning(childNode as FrameNode);
+      }
+      if (
+        node.kind === 'element'
+        && node.tagLower === 'table'
+        && child.kind === 'element'
+        && child.tagLower === 'tfoot'
+      ) {
+        // CSS table border-collapse merges adjacent borders to 1px.
+        // In Figma stacked frames accumulate strokes, so clear tfoot top stroke.
+        clearTopBorder(childNode);
+      }
+      if (
+        node.kind === 'element'
+        && node.tagLower === 'tfoot'
+        && child.kind === 'element'
+        && child.tagLower === 'tr'
+      ) {
+        // Matches [&>tr]:last:border-b-0 on TableFooter.
+        clearBottomBorder(childNode);
+      }
+      if (
+        node.kind === 'element'
+        && node.tagLower === 'tr'
+        && (child.kind === 'element' || child.kind === 'component')
+        && (child.tagLower === 'td' || child.tagLower === 'th')
+        && !hasTableCellSizeOverride(child.classes)
+      ) {
+        const colSpan = getNumericColSpan(child.props?.colSpan);
+        if ('layoutGrow' in childNode) {
+          try {
+            childNode.layoutGrow = colSpan;
+          } catch (_err) {
+            // ignore if node cannot grow in this parent
+          }
+        }
+      }
+    }
+  }
+
+  // Resolve any deferred percent positions on this frame's direct children
+  // now that all of them are appended and (most likely) sized.
+  if ('layoutMode' in frame) {
+    applyDeferredPercentPositioning(frame as FrameNode);
+  }
+
+  // For input/textarea elements with no children, render defaultValue or placeholder as text.
+  if ((tagLower === 'input' || tagLower === 'textarea') && (!node.children || node.children.length === 0)) {
+    const inputText = node.props.defaultValue || node.props.value;
+    const inputPlaceholder = node.props.placeholder;
+    if (inputText || inputPlaceholder) {
+      const inputTextOpts: CreateTextOptions & { theme: string } = { fontSize: context.textFontSize || 14, theme };
+      if (inputText) {
+        if (context.textColor) inputTextOpts.fill = context.textColor;
+      } else {
+        inputTextOpts.opacity = 0.4; // placeholder muted
+      }
+      const inputTextNode = createTextNode(inputText || inputPlaceholder, inputTextOpts);
+      const isTextarea = tagLower === 'textarea';
+      if (isTextarea) {
+        // Textareas wrap their text and grow vertically with content
+        // (subject to the `min-h-N` floor parsed upstream). The scanner
+        // emits `flex` in the class list, which leaves the frame as a
+        // HORIZONTAL row — that's wrong for a top-anchored multi-line
+        // text container. Switch to VERTICAL so the primary axis is
+        // height: AUTO mode now hugs the wrapped text, MIN align
+        // anchors content to the top edge (browsers do this).
+        try {
+          frame.layoutMode = 'VERTICAL';
+          frame.counterAxisSizingMode = 'FIXED';
+          frame.primaryAxisSizingMode = 'AUTO';
+          frame.primaryAxisAlignItems = 'MIN';
+          frame.counterAxisAlignItems = 'MIN';
+        } catch { /* ignore */ }
+        frame.appendChild(inputTextNode);
+        try {
+          const padX = (frame.paddingLeft || 0) + (frame.paddingRight || 0);
+          const contentWidth = Math.max(1, frame.width - padX);
+          inputTextNode.textAutoResize = 'HEIGHT';
+          inputTextNode.resize(contentWidth, inputTextNode.height);
+        } catch { /* ignore */ }
+      } else {
+        frame.appendChild(inputTextNode);
+        // Browsers render <input> text vertically centered by default. The
+        // scanner classes only carry `px-*`/`h-*`, no `items-center`, so without
+        // this the text sits at the top of the input box.
+        try {
+          if (frame.layoutMode === 'VERTICAL') {
+            frame.primaryAxisAlignItems = 'CENTER';
+          } else if (frame.layoutMode === 'HORIZONTAL') {
+            frame.counterAxisAlignItems = 'CENTER';
+          }
+        } catch { /* ignore */ }
+      }
+    }
+  }
+
+  applyDeferredBottomPositioning(frame);
+  applyDeferredCenterYPositioning(frame);
+  reflowMxAutoChildren(frame);
+  applyGridColumnsWithReflow(frame, gridWidth || frame.width, hasMultiColumnGrid ? gridCols : undefined);
+
+  // Re-apply clipping after children are added, in case Figma resets it during layout ops.
+  if (shouldClipContent(classes)) {
+    frame.clipsContent = true;
+  }
+  // Re-apply directional border widths after layout/resize passes; Figma may normalize
+  // stroke sides during downstream sizing operations.
+  if (Array.isArray(frame.strokes) && frame.strokes.length > 0) {
+    applyBorderWidthUtilities(frame, classes);
+  }
+
+  return maybeWrapMxAuto(frame, classes, context);
+}
+
+
+function applyLayoutClasses(
+  frame: FrameNode,
+  classes: string[] | undefined,
+  colorGroup: Record<string, string>,
+  radiusGroup: Record<string, string> | null,
+  theme: string
+): void {
+  const list = classes || [];
+  const layoutIR = LayoutParser.parseToIR(list);
+  LayoutParser.applyToFrame(frame, layoutIR);
+  frame.fills = frame.fills || [];
+  if (list.length > 0) {
+    applyTailwindStylesToFrame(frame, list, colorGroup, radiusGroup, theme);
+  }
+  applyClipBehavior(frame, list);
+
+  if (!frame.itemSpacing || frame.itemSpacing === 0) {
+    frame.itemSpacing = 12;
+  }
+}
+
+function applyAbsoluteIfAllowed(child: SceneNode, parent: FrameNode, allowAbsolute: boolean): void {
+  if (!allowAbsolute) return;
+  applyAbsoluteIfPossible(child, parent);
+}
+
+export function createUIComponents(parent: FrameNode | PageNode, opts?: CreateUIComponentsOptions): Promise<FrameNode> {
+  return createUIComponentsFromStory(parent, opts || {}, getStoryBuilderContext());
+}
+
+export function pruneGeneratedComponentLibrary(themeNames: string[]): void {
+  pruneGeneratedComponentLibraryFromStory(themeNames, getStoryBuilderContext());
+}