inkbridge 0.1.0-beta.21 → 0.1.0-beta.23

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

@@ -12,6 +12,7 @@ import {
   applyNodeTransforms,
   getCompoundClasses,
   getClassesForBreakpoint,
+  isEffectivelyHiddenOrSrOnly,
   isElementLikeNode,
   mergeClasses,
   resolveNodeIR,
@@ -70,12 +71,15 @@ import {
 } from '../components';
 import {
   TAG_TYPOGRAPHY,
+  applyTruncation,
   createInlineTextNode,
   createTextNode,
   getLineHeightFromClasses,
   getNodeTextStyle,
   getTextAlignFromClasses,
+  getTruncateFromClasses,
   isInlineTextNode,
+  markForTruncation,
   maybeExpandTextLineComponent,
   type CreateTextOptions,
 } from '../text';
@@ -112,6 +116,7 @@ import {
   isTabsContentTag,
   isSelectRootTag,
   isSelectContentTag,
+  isDialogContentTag,
   isSelectTriggerTag,
   isSelectValueTag,
   isSelectItemTag,
@@ -158,6 +163,7 @@ import {
   getFontStyleFromClasses,
   getResolvedTextSizeFromClasses,
   getResolvedBoldFromClasses,
+  getFontRoleFromClasses,
 } from './typography';
 import { expandActiveConditionalVariants } from './node-variants';
 import {
@@ -934,18 +940,17 @@ function buildFigmaNode(
       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
+    if (context.textTruncate) {
+      // Mark unconditionally — the deferred truncation pass picks up
+      // marked nodes once a definite parent width is known (e.g. table
+      // cells whose column-alignment runs in phase 3).
+      const maxLines = context.textMaxLines || 1;
+      markForTruncation(textNode, maxLines);
+      if (context.maxWidth) {
+        applyTruncation(textNode, context.maxWidth, maxLines, context.textLineHeight);
       }
-    } else if (context.maxWidth && context.parentLayout !== 'HORIZONTAL') {
+    }
+    if (!context.textTruncate && context.maxWidth && context.parentLayout !== 'HORIZONTAL') {
       try {
         textNode.textAutoResize = 'HEIGHT';
         textNode.resize(context.maxWidth, textNode.height);
@@ -1283,17 +1288,12 @@ function buildFigmaNode(
       ? 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; }
-    }
-  }
+  // Detect text truncation from classes on this element; reset per-
+  // element (don't inherit). Parsing is centralised in
+  // `getTruncateFromClasses` so all text-creation sites stay in sync.
+  const _truncateInfo = getTruncateFromClasses(classes);
+  const _truncate: boolean | undefined = _truncateInfo ? true : undefined;
+  const _maxLines: number | undefined = _truncateInfo ? _truncateInfo.maxLines : undefined;
   const nextContext: RenderContext = {
     ...context,
     textAlign: alignFromClasses || context.textAlign,
@@ -1340,10 +1340,35 @@ function buildFigmaNode(
     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 (isSelectTriggerTag(node.tagName) || isSelectContentTag(node.tagName)) {
+    // The scanner flattens transparent `<Select>` / `<SelectPrimitive.Root>`
+    // wrappers (`propagateSelectRootContext` in component-scanner.ts) and
+    // copies the wrapper's resolved context onto the hoisted Trigger and
+    // Content as `__selectRoot*` data props. Bridge them into the render
+    // context here so SelectValue / SelectItem children read the same
+    // selectSelectedValue / selectSelectedLabel / selectIsOpen that the
+    // explicit `isSelectRootTag` branch above would have set when the
+    // wrapper was still in the tree.
+    const annotatedSelectedValue = normalizeSelectableValue(node.props?.__selectRootSelectedValue);
+    if (annotatedSelectedValue && !nextContext.selectSelectedValue) {
+      nextContext.selectSelectedValue = annotatedSelectedValue;
+    }
+    const annotatedSelectedLabel = node.props?.__selectRootSelectedLabel;
+    if (annotatedSelectedLabel && !nextContext.selectSelectedLabel) {
+      nextContext.selectSelectedLabel = String(annotatedSelectedLabel);
+    }
+    if (!nextContext.selectIsOpen && isTruthyStateProp(node.props?.__selectRootIsOpen)) {
+      nextContext.selectIsOpen = true;
+    }
+    const annotatedHighlight = normalizeSelectableValue(node.props?.__selectRootHighlightedValue);
+    if (annotatedHighlight && !nextContext.selectHighlightedValue) {
+      nextContext.selectHighlightedValue = annotatedHighlight;
+    }
+    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);
@@ -1366,6 +1391,41 @@ function buildFigmaNode(
   if (isAccordionContentTag(node.tagName) && !context.accordionItemIsOpen) {
     return null;
   }
+  // SelectContent (the dropdown items popover) renders only when the
+  // Select is open. Without this gate, the items panel renders as a
+  // phantom frame below the trigger in every Figma preview, even though
+  // the Select is closed in the captured state. Matches the
+  // AccordionContent / TabsContent gating above.
+  //
+  // The inherited `context.selectIsOpen` is set by `isSelectRootTag` on the
+  // wrapper. After the scanner flattens the Select wrapper away, the open
+  // signal lives on the Content node's own `__selectRootIsOpen` data prop —
+  // check both so closed previews don't leak the dropdown either way.
+  if (
+    isSelectContentTag(node.tagName)
+    && !context.selectIsOpen
+    && !isTruthyStateProp(node.props?.__selectRootIsOpen)
+  ) {
+    return null;
+  }
+  // DialogContent visibility is gated by the wrapping `<Dialog>` /
+  // `<DialogPrimitive.Root>`'s `open` / `defaultOpen` prop. The scanner
+  // annotates every Content with `__dialogRootIsOpen` derived from its
+  // nearest Dialog Root (see `propagateDialogRootContext` in
+  // component-scanner.ts). Closed previews — typically a help-info
+  // Dialog nested inside another Dialog's header — would otherwise
+  // render their content inline as a sliver next to the parent's
+  // content (the "Open position / Overview" leak in
+  // IncreasePositionModal). Annotation absent → falls back to render
+  // (preserves behaviour for trees not yet covered by the scanner
+  // transform).
+  if (
+    isDialogContentTag(node.tagName)
+    && node.props?.__dialogRootIsOpen != null
+    && !isTruthyStateProp(node.props.__dialogRootIsOpen)
+  ) {
+    return null;
+  }
   if (isTabsContentTag(node.tagName)) {
     const forceMount = isTruthyStateProp(node.props?.forceMount);
     const active = resolveTabsNodeActive(node as NodeIRElement, context);
@@ -1374,16 +1434,14 @@ function buildFigmaNode(
     }
   }
 
-  // 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;
-    }
+  // Skip rendering when the resolved class list ends in `display: hidden`
+  // or `sr-only` (with no later override). Sole source of truth is
+  // `isEffectivelyHiddenOrSrOnly` — every other site that needs this
+  // gate (collectTextContent, the renderChildren filter, inline-tree
+  // collapse) routes through the same helper, so adding a new display
+  // utility (e.g. tailwind v4 additions) lights up everywhere.
+  if (isEffectivelyHiddenOrSrOnly(classes)) {
+    return null;
   }
 
   if ((node.kind === 'component' || node.kind === 'element') && isSelectValueTag(node.tagName)) {
@@ -2042,9 +2100,13 @@ function buildFigmaNode(
       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);
+      const visibleInlineChildren = (node.children || []).filter((child) => {
+        if (!('classes' in child) || !Array.isArray(child.classes)) return true;
+        const resolved = resolveClassesForBreakpoint(child.classes, breakpointIndex);
+        return !isEffectivelyHiddenOrSrOnly(resolved);
+      });
+      const inlineText = createInlineTextNode(node as NodeIRElement, textStyle, nextContext, colorGroup, theme, layoutComputed, visibleInlineChildren);
       if (inlineText) return maybeWrapMxAuto(inlineText, classes, context);
     }
 
@@ -2186,13 +2248,12 @@ function buildFigmaNode(
         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',
+            fontRole: getFontRoleFromClasses(classes, tagLower),
           };
           if (textStyle.text) {
             textOpts.fill = textStyle.text;
@@ -2226,7 +2287,19 @@ function buildFigmaNode(
           // HORIZONTAL+CENTER (numbered-circle case) and HORIZONTAL+HUG
           // (inline-flex pill case); resizes otherwise.
           const textContentWidth = resolveTextResizeWidth(frame, nextContext.maxWidth);
-          if (textContentWidth != null) {
+          // Text truncation: this frame-container path handles
+          // text-only elements with sizing classes — e.g.
+          // `<span block max-w-[9.5rem] truncate>`. Mark the text
+          // unconditionally so a later deferred pass can still act,
+          // and apply immediately if the element's own max-width gave
+          // us a concrete content width.
+          const truncateInfo = getTruncateFromClasses(classes);
+          if (truncateInfo) {
+            markForTruncation(textNode, truncateInfo.maxLines);
+            if (textContentWidth != null) {
+              applyTruncation(textNode, textContentWidth, truncateInfo.maxLines, textOpts.lineHeight);
+            }
+          } else if (textContentWidth != null) {
             try {
               textNode.textAutoResize = 'HEIGHT';
               textNode.resize(textContentWidth, textNode.height);
@@ -2245,13 +2318,12 @@ function buildFigmaNode(
     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',
+      fontRole: getFontRoleFromClasses(classes, tagLower),
     };
 
     // Extract text color from classes
@@ -2300,22 +2372,14 @@ function buildFigmaNode(
     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; }
+    const truncateInfo = getTruncateFromClasses(classes);
+    if (truncateInfo) {
+      markForTruncation(textNode, truncateInfo.maxLines);
+      if (effectiveMaxWidth) {
+        applyTruncation(textNode, effectiveMaxWidth, truncateInfo.maxLines, textOpts.lineHeight);
+      }
     }
-    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) {
+    if (!truncateInfo && shouldConstrain) {
       try {
         textNode.textAutoResize = 'HEIGHT';
         textNode.resize(effectiveMaxWidth, textNode.height);
@@ -2432,6 +2496,22 @@ function buildFigmaNode(
   ) {
     frame.resize(context.maxWidth, frame.height);
     frame.primaryAxisSizingMode = 'FIXED';
+  } else if (
+    frame.layoutMode === 'VERTICAL'
+    && context.maxWidth
+    && frame.layoutAlign === 'STRETCH'
+    && frame.counterAxisSizingMode !== 'FIXED'
+  ) {
+    // Same as the text-element path: a VERTICAL frame that's
+    // STRETCH-aligned into a known-width parent has a definite
+    // counter-axis width. Lock counterAxisSizingMode='FIXED' so the
+    // block-level children inside (e.g. a `<p>` description inside an
+    // inner wrapper div) recognise their parent as definite-width and
+    // get their own implicit STRETCH via `parentCounterFixed`. Without
+    // this, the cascade stops one level deep and longer block siblings
+    // get cropped to the wrapper's first non-stretch child's width.
+    frame.resize(context.maxWidth, frame.height);
+    frame.counterAxisSizingMode = 'FIXED';
   }
 
   const frameHasFixedWidth = frame.layoutMode === 'HORIZONTAL'
@@ -2471,7 +2551,22 @@ function buildFigmaNode(
     textColor: nextContext.textColor,
     textColorToken: nextContext.textColorToken,
   };
-  const renderChildren = getRenderableChildren(node, classes);
+  // Drop children whose resolved class list at the current breakpoint
+  // ends in `display: hidden`. The outer-element hidden gate at the top
+  // of buildFigmaNode handles whole-element skip when buildFigmaNode is
+  // recursively invoked, but the inline-text collapse path below
+  // (`createInlineTextNode`) and the inline-segment collector
+  // (`collectInlineSegments`) merge children's text content without
+  // calling buildFigmaNode per child — so a `<span sm:hidden>A</span>
+  // <span hidden sm:inline>B</span>` pair would both contribute text
+  // and render as "A B" concatenated regardless of breakpoint. Pre-
+  // filtering here ensures hidden children are dropped before either
+  // the inline-collapse path or the per-child render loop runs.
+  const renderChildren = getRenderableChildren(node, classes).filter((child) => {
+    if (!('classes' in child) || !Array.isArray(child.classes)) return true;
+    const resolved = resolveClassesForBreakpoint(child.classes, breakpointIndex);
+    return !isEffectivelyHiddenOrSrOnly(resolved);
+  });
   const accordionItemOrdinal = { value: 0 };
 
   // Convert child mt-* margins to auto-layout spacing in vertical stacks.
@@ -2485,7 +2580,7 @@ function buildFigmaNode(
     && renderChildren.length > 0
     && renderChildren.every(isInlineTextNode);
   if (hasOnlyInlineChildren) {
-    const inlineText = createInlineTextNode(node as NodeIRElement, textStyle, nextContext, colorGroup, theme, layoutComputed);
+    const inlineText = createInlineTextNode(node as NodeIRElement, textStyle, nextContext, colorGroup, theme, layoutComputed, renderChildren);
     if (inlineText) {
       frame.appendChild(inlineText);
       return maybeWrapMxAuto(frame, classes, context);
@@ -2561,10 +2656,43 @@ function buildFigmaNode(
             // ignore if node cannot grow in this parent
           }
         }
+        // Record the JSX `colSpan` on the rendered cell so the Phase-3
+        // table-column-alignment pass can skip multi-cell rows when
+        // computing per-column max width (an empty-state row with
+        // `colSpan={7}` shouldn't dominate column 0). Default colspan
+        // of 1 is recorded too, both for explicit-intent symmetry and
+        // so the alignment pass doesn't need a "default = 1" branch.
+        try {
+          (childNode as SceneNode).setPluginData('inkbridge:col-span', String(colSpan));
+        } catch (_err) {
+          // ignore — plugin data write is best-effort
+        }
       }
     }
   }
 
+  // Demote SPACE_BETWEEN → MIN when the frame ended up with fewer than 2
+  // in-flow children. Figma centers the lone child of a SPACE_BETWEEN
+  // frame ("Gap: Auto" in the inspector), which is not what CSS does
+  // (`justify-content: space-between` with one item anchors to start).
+  // Commonly hits patterns like
+  //   <header className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+  //     <div>{title + description}</div>
+  //     {actions ? <div>{actions}</div> : null}
+  //   </header>
+  // — at md+ the header flips HORIZONTAL with SPACE_BETWEEN. When the
+  // consumer doesn't pass `actions`, only the title-content div remains
+  // and Figma centers it horizontally. Demoting here restores the
+  // CSS-correct start-anchor.
+  if (
+    'primaryAxisAlignItems' in frame
+    && frame.primaryAxisAlignItems === 'SPACE_BETWEEN'
+    && Array.isArray(frame.children)
+    && frame.children.filter((c) => !('layoutPositioning' in c) || c.layoutPositioning !== 'ABSOLUTE').length < 2
+  ) {
+    try { frame.primaryAxisAlignItems = 'MIN'; } catch (_err) { /* ignore */ }
+  }
+
   // 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) {

package/src/effects/icon-builder.ts

@@ -747,6 +747,14 @@ export function flattenSvgNode(node: SceneNode): VectorNode | null {
 }
 
 function resizeNode(node: SceneNode, width: number, height: number): void {
+  // Figma VECTOR nodes reject 0-dim resize with
+  // "Cannot set width and height of vector node to zero". The outer
+  // `resizeSvgNodeTo` already guards function-level w/h, but the
+  // per-sub-vector loop computes `vector.width * sx` per child and can
+  // land on 0 when a sub-vector has zero base dimensions (e.g. an empty
+  // path, or a marker that didn't pick up bounds from `createNodeFromSvg`).
+  // Mirror the outer guard at the call site so any caller benefits.
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
   if ('resizeWithoutConstraints' in node) node.resizeWithoutConstraints(width, height);
   else if ('resize' in node) node.resize(width, height);
 }

package/src/framework-adapters/shadcn.ts

@@ -432,11 +432,124 @@ function flattenScrollAreaSubtree(node: NodeIR): NodeIR[] | null {
       changed = true;
       continue;
     }
+    // ScrollAreaPrimitive.Root wrapping a `<table>`: replace the
+    // component wrapper with a plain `<div>` that inherits Root's
+    // classes (including the consumer's `px-* sm:pl-* sm:pr-*` padding
+    // passed via ScrollArea's `className` prop). Two wins:
+    //   1. The synthetic `div` is `kind: 'element'`, which gets the
+    //      normal block-stretch-to-parent-width treatment in
+    //      ui-builder; `Root` was `kind: 'component'` and stayed
+    //      HUG-primary, leaving the table narrower than the card.
+    //   2. The padding the consumer wrote on `<ScrollArea>` is
+    //      preserved verbatim — `px-4` / `sm:pl-3 sm:pr-0` keep their
+    //      visual effect even though the scroll mechanism itself is
+    //      meaningless in static Figma renders.
+    // ScrollArea around non-table content is left untouched (case
+    // (i1) above) — only the table case re-shapes the wrapper.
+    if (tag === 'ScrollAreaPrimitive.Root' && subtreeContainsTable(child)) {
+      const inner = flattenScrollAreaSubtree(child)
+        ?? (('children' in child && Array.isArray(child.children)) ? child.children : []);
+      const rawRootClasses = ('classes' in child && Array.isArray((child as { classes?: string[] }).classes))
+        ? ((child as { classes: string[] }).classes)
+        : [];
+      // Normalise the consumer's scrollbar-gutter trick: `pl-N pr-0` is
+      // common shadcn shorthand for "leave room for the browser
+      // scrollbar on the right". Since Figma has no scrollbar (the
+      // ScrollArea wrapper is dropped above), that asymmetry just
+      // leaves table rows extending all the way to the card's right
+      // edge with no visual padding. Mirror `pr-0` to match the same
+      // breakpoint's `pl-N` so the rendered cell looks balanced.
+      const rootClasses = mirrorScrollbarGutterPadding(rawRootClasses);
+      const rootProps = ('props' in child && (child as { props?: Record<string, unknown> }).props)
+        ? ((child as { props: Record<string, unknown> }).props)
+        : {};
+      next.push({
+        kind: 'element',
+        tagName: 'div',
+        tagLower: 'div',
+        props: rootProps,
+        classes: rootClasses,
+        children: inner,
+      } as NodeIR);
+      changed = true;
+      continue;
+    }
     next.push(child);
   }
   return changed ? next : null;
 }
 
+/**
+ * Does this node's subtree contain a semantic `<table>` element? Gates
+ * the `ScrollAreaPrimitive.Root` → synthetic `<div>` swap above. A
+ * `ScrollArea` around non-table content keeps its Root wrapper so
+ * standalone `<ScrollArea>` stories don't lose their structural shape.
+ */
+/**
+ * Mirror the scrollbar-gutter trick when stripping a ScrollArea
+ * around a table. CSS pattern `pl-N pr-0` (with optional `<variant>:`
+ * prefix) typically means "give the browser scrollbar the right
+ * gutter visually". In Figma there's no scrollbar to consume the
+ * gap, so the row separators run flush to the card edge. We swap
+ * `pr-0` for `pr-N` (same N as the matching pl) at the same
+ * variant; pr-0 with no matching pl in that variant is left alone
+ * (could be a genuinely-edge-aligned design).
+ *
+ * Pure function on a class string array. Variant detection uses the
+ * standard `:` separator and the last segment as the utility.
+ */
+function mirrorScrollbarGutterPadding(classes: string[]): string[] {
+  if (!classes || classes.length === 0) return classes;
+
+  function splitVariant(cls: string): { variant: string; base: string } {
+    const idx = cls.lastIndexOf(':');
+    if (idx === -1) return { variant: '', base: cls };
+    return { variant: cls.slice(0, idx + 1), base: cls.slice(idx + 1) };
+  }
+
+  // Build a map: variant → pl-N value (string after `pl-`).
+  // Also handle `px-N` → contributes pl-N for the same variant.
+  const plByVariant: Record<string, string> = {};
+  for (let i = 0; i < classes.length; i++) {
+    const { variant, base } = splitVariant(classes[i]);
+    if (base.indexOf('pl-') === 0) {
+      plByVariant[variant] = base.slice(3);
+    } else if (base.indexOf('px-') === 0) {
+      // `px-N` only acts as a fallback pl source — if a more specific
+      // `pl-N` exists in the same variant, the later loop iteration
+      // wins. We don't overwrite px-derived entries with px-derived
+      // ones from a different ordering, but that's fine: px is
+      // symmetric, so order doesn't matter.
+      if (plByVariant[variant] == null) plByVariant[variant] = base.slice(3);
+    }
+  }
+
+  let mutated = false;
+  const out: string[] = [];
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    const { variant, base } = splitVariant(cls);
+    if (base === 'pr-0' && plByVariant[variant] != null) {
+      out.push(variant + 'pr-' + plByVariant[variant]);
+      mutated = true;
+    } else {
+      out.push(cls);
+    }
+  }
+  return mutated ? out : classes;
+}
+
+function subtreeContainsTable(node: NodeIR): boolean {
+  if (!isClassedElement(node)) return false;
+  const tag = (node as { tagName?: string }).tagName;
+  if (typeof tag === 'string' && tag.toLowerCase() === 'table') return true;
+  if (!('children' in node) || !Array.isArray(node.children)) return false;
+  for (const c of node.children) {
+    if (subtreeContainsTable(c)) return true;
+  }
+  return false;
+}
+
 /**
  * Recurse the IR, injecting registry classes for any element whose
  * `data-slot` matches a known shadcn pattern AND applying shadcn-specific

package/src/github/github.ts

@@ -178,7 +178,19 @@ function requireResponseString(value: unknown, context: string): string {
   throw new Error('GitHub API response missing ' + context);
 }
 
-function buildPatchEndpointCandidates(): string[] {
+function buildPatchEndpointCandidates(devServerPort?: string): string[] {
+  // When `devServerPort` is configured, collapse the candidate list to
+  // that single port — same pattern as the pack-fetch candidates. The
+  // value is already validated to a numeric 1-65535 by
+  // `normalizeDevServerPort` on the config layer, but we re-validate
+  // here defensively so callers can pass through unvalidated strings.
+  const trimmed = (devServerPort || '').trim();
+  if (trimmed) {
+    const n = parseInt(trimmed, 10);
+    if (Number.isFinite(n) && n >= 1 && n <= 65535) {
+      return ['http://localhost:' + n + PATCH_ENDPOINT_PATH];
+    }
+  }
   const out: string[] = [];
   for (let i = 0; i < PATCH_ENDPOINT_PORTS.length; i++) {
     out.push('http://localhost:' + PATCH_ENDPOINT_PORTS[i] + PATCH_ENDPOINT_PATH);
@@ -201,7 +213,8 @@ function serializeCssUpdates(updatesByTheme: Map<string, Map<string, string>>):
 async function patchCssViaDevServer(
   cssPath: string,
   cssText: string,
-  updatesByTheme: Map<string, Map<string, string>>
+  updatesByTheme: Map<string, Map<string, string>>,
+  devServerPort?: string
 ): Promise<string | null> {
   await waitForUIReady();
 
@@ -218,7 +231,7 @@ async function patchCssViaDevServer(
     figma.ui.postMessage({
       type: 'patch-css',
       requestId,
-      candidates: buildPatchEndpointCandidates(),
+      candidates: buildPatchEndpointCandidates(devServerPort),
       payload: {
         filePath: cssPath,
         cssText,
@@ -1039,7 +1052,12 @@ async function buildTokenCommitPlan(token: string): Promise<TokenCommitPlan> {
   const updates = buildCssVariableUpdates(variableTokenPatch || ({} as Tokens), tokensBeforeVariablePatch);
   const fullThemeUpdates = buildCssVariableUpdates(workingTokens, tokensBeforeVariablePatch);
   const activeThemeNames = getActiveThemeNames(workingTokens);
-  let patchedCss = await patchCssViaDevServer(cssFile.path, cssFile.content, updates);
+  let patchedCss = await patchCssViaDevServer(
+    cssFile.path,
+    cssFile.content,
+    updates,
+    GITHUB_CONFIG!.devServerPort,
+  );
   if (typeof patchedCss !== 'string') {
     // Dev server route unavailable or invalid response: fallback to in-plugin patcher.
     patchedCss = patchCssVariables(cssFile.content, updates, activeThemeNames, fullThemeUpdates);

package/src/layout/index.ts

@@ -18,6 +18,10 @@ export {
 export type { LayoutIR, SizingMode } from './parser';
 export * from './width-solver';
 export * from './deferred-layout';
+export * from './intrinsic-sizing';
+export * from './intrinsic-applier';
+export * from './table-layout';
+export * from './text-truncate-pass';
 export * from './layout-utils';
 export * from './size-utils';
 export * from './ring-utils';