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

package/src/layout/ring-utils.ts

@@ -0,0 +1,120 @@
+import { parseColor } from '../tokens';
+import { extractArbitraryValue, parseLength } from '../tailwind';
+
+export type RingInfo = { width: number; color: { r: number; g: number; b: number; a?: number } };
+
+/**
+ * Parse a ring-width utility (e.g. "ring", "ring-2", "ring-[3px]") to pixels.
+ * Returns null for non-width ring utilities (color, inset, offset).
+ */
+export function parseRingWidth(utility: string): number | null {
+  if (utility === 'ring') return 3;
+  if (!utility.startsWith('ring-')) return null;
+  const token = utility.substring(5);
+  if (token === 'inset' || token.startsWith('offset-')) return null;
+  if (token.startsWith('[')) {
+    const arbitrary = extractArbitraryValue(utility);
+    if (!arbitrary) return null;
+    return parseLength(arbitrary);
+  }
+  const num = parseFloat(token);
+  if (!Number.isNaN(num) && String(num) === token) return num;
+  return null;
+}
+
+/**
+ * Parse a ring-color utility (e.g. "ring-primary", "ring-primary/50") to RGB.
+ * Returns null for non-color ring utilities.
+ */
+export function parseRingColor(
+  utility: string,
+  colorGroup: Record<string, string>
+): { r: number; g: number; b: number; a?: number } | null {
+  if (!utility.startsWith('ring-')) return null;
+  const token = utility.substring(5);
+  if (token === 'inset' || token.startsWith('offset-')) return null;
+  if (token.startsWith('[')) return null;
+  const num = parseFloat(token);
+  if (!Number.isNaN(num) && String(num) === token) return null;
+  let colorToken = token;
+  let opacityMultiplier: number | null = null;
+  const slashIndex = token.lastIndexOf('/');
+  if (slashIndex > 0 && slashIndex < token.length - 1) {
+    colorToken = token.substring(0, slashIndex);
+    const opacityRaw = token.substring(slashIndex + 1).trim();
+    const opacityNum = parseFloat(opacityRaw);
+    if (!Number.isNaN(opacityNum)) {
+      opacityMultiplier = Math.max(0, Math.min(1, opacityNum / 100));
+    }
+  }
+  const resolved = colorGroup[colorToken];
+  if (!resolved) return null;
+  const parsed = parseColor(resolved);
+  if (opacityMultiplier == null) return parsed;
+  const baseAlpha = parsed.a == null ? 1 : parsed.a;
+  return {
+    r: parsed.r,
+    g: parsed.g,
+    b: parsed.b,
+    a: Math.max(0, Math.min(1, baseAlpha * opacityMultiplier)),
+  };
+}
+
+/**
+ * Derive a RingInfo from a list of Tailwind classes.
+ * Returns null when no ring is declared OR when only a ring colour is
+ * present without an accompanying width utility.
+ *
+ * CSS subtlety: in Tailwind, `ring-COLOR` (e.g. `ring-destructive`)
+ * sets the ring's color via `--tw-ring-color` but does NOT make the
+ * ring visible — that requires a width utility (`ring`, `ring-2`,
+ * `ring-[3px]`, …). shadcn's invalid-input pattern relies on this:
+ *
+ *   `aria-invalid:ring-destructive/20 focus-visible:ring-[3px]`
+ *
+ * "When invalid, the ring is destructive-tinted; when focused, the
+ *  ring becomes 3px visible." Without focus, ring width = 0, so the
+ * invalid-but-unfocused input renders with just the red border, no
+ * ring. Previously this function defaulted width to 3 whenever a
+ * color was present — so the State Matrix `error` variant rendered
+ * with a doubled red ring outside the destructive border, instead of
+ * just the border. Now: no width → no ring.
+ */
+export function getRingInfoFromClasses(
+  classes: string[],
+  colorGroup: Record<string, string>
+): RingInfo | null {
+  let width: number | null = null;
+  let color: { r: number; g: number; b: number; a?: number } | null = null;
+
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    const nextWidth = parseRingWidth(cls);
+    if (nextWidth != null) width = nextWidth;
+    const nextColor = parseRingColor(cls, colorGroup);
+    if (nextColor) color = nextColor;
+  }
+
+  if (width == null) return null;
+  if (!color) {
+    const fallback = colorGroup.ring || colorGroup.primary;
+    if (!fallback) return null;
+    color = parseColor(fallback);
+  }
+  if (!width || width <= 0) return null;
+  return { width: width, color: color };
+}
+
+// Ring rendering — the OVERLAY-FRAME implementation, the FIXED-toggle
+// invariant, and the post-pass scheduling all live in
+// `src/layout/deferred-layout.ts` (`markRingNode` / `applyRingIfPossible`).
+// This file owns the *parsing* contract only:
+//
+//   parseRingWidth / parseRingColor / getRingInfoFromClasses
+//
+// Callers in the parser path (`tailwind.ts`) and the imperative frame
+// builders (`component-gen.ts`, `cva-master.ts`, `preview-builder.ts`,
+// `state-master.ts`) all funnel through that single deferred entry point.
+// See `.ai/troubleshooting.md` "DO NOT use Figma DROP_SHADOW spread" and
+// "State Matrix focus/error variants render TALLER/WIDER" for the
+// architectural rationale.

package/src/layout/size-utils.ts

@@ -0,0 +1,143 @@
+import { parseUtilityClass } from '../tailwind';
+
+/**
+ * Parse a Tailwind size token (e.g. "4", "px", "[1.5rem]") to pixels.
+ * This is the canonical implementation — handles px, rem, em, and Tailwind
+ * scale multiplier (×4). story-builder and ui-builder both import from here.
+ */
+export function parseSquareSizeToken(token: string): number | null {
+  const normalized = String(token || '').trim();
+  if (!normalized) return null;
+  if (normalized === 'px') return 1;
+  if (normalized.startsWith('[') && normalized.endsWith(']')) {
+    const arbitrary = normalized.slice(1, -1).trim();
+    if (!arbitrary) return null;
+    if (arbitrary.endsWith('px')) {
+      const px = parseFloat(arbitrary.slice(0, -2));
+      return Number.isFinite(px) ? px : null;
+    }
+    if (arbitrary.endsWith('rem') || arbitrary.endsWith('em')) {
+      const rem = parseFloat(arbitrary.slice(0, -3));
+      return Number.isFinite(rem) ? rem * 16 : null;
+    }
+    const raw = parseFloat(arbitrary);
+    return Number.isFinite(raw) ? raw : null;
+  }
+  const numeric = parseFloat(normalized);
+  if (!Number.isNaN(numeric)) return numeric * 4;
+  return null;
+}
+
+/**
+ * Resolve fixed dimensions from variantless Tailwind sizing utilities.
+ *
+ * Supports `size-*`, `w-*`, and `h-*` so all fixed-size controls use the same
+ * sizing rule regardless of which builder renders them.
+ */
+export function resolveFixedBoxSizeFromClasses(classes: string[]): { width: number | null; height: number | null } {
+  let width: number | null = null;
+  let height: number | null = null;
+
+  for (let i = 0; i < classes.length; i++) {
+    const atom = parseUtilityClass(classes[i]);
+    if (!atom || !atom.utility) continue;
+    if (Array.isArray(atom.variants) && atom.variants.length > 0) continue;
+    const utility = atom.utility || '';
+
+    const sizeMatch = utility.match(/^size-(.+)$/);
+    if (sizeMatch) {
+      const resolved = parseSquareSizeToken(sizeMatch[1]);
+      if (resolved != null && resolved > 0) {
+        width = resolved;
+        height = resolved;
+      }
+      continue;
+    }
+
+    const widthMatch = utility.match(/^w-(.+)$/);
+    if (widthMatch) {
+      const token = widthMatch[1];
+      // Skip fractional widths (`w-1/2`, `w-2/3`, …); they're parent-relative
+      // and resolved via markFractionWidthNode, not as a fixed size.
+      // Without this guard, parseSquareSizeToken("2/3") → parseFloat("2/3") → 2
+      // → 8px, clobbering the correctly-resolved fractional width.
+      if (
+        token !== 'full' && token !== 'screen' && token !== 'auto'
+        && token !== 'fit' && token !== 'min' && token !== 'max'
+        && !token.includes('/')
+      ) {
+        const resolved = parseSquareSizeToken(token);
+        if (resolved != null && resolved > 0) width = resolved;
+      }
+      continue;
+    }
+
+    const heightMatch = utility.match(/^h-(.+)$/);
+    if (heightMatch) {
+      const token = heightMatch[1];
+      if (
+        token !== 'full' && token !== 'screen' && token !== 'auto'
+        && token !== 'fit' && token !== 'min' && token !== 'max'
+        && !token.includes('/')
+      ) {
+        const resolved = parseSquareSizeToken(token);
+        if (resolved != null && resolved > 0) height = resolved;
+      }
+    }
+  }
+
+  return { width, height };
+}
+
+/**
+ * Return the resolved pixel size from a variantless `size-*` utility, or null.
+ */
+export function getSquareSizeFromClasses(classes: string[]): number | null {
+  const fixed = resolveFixedBoxSizeFromClasses(classes);
+  if (fixed.width != null && fixed.height != null && fixed.width === fixed.height) {
+    return fixed.width;
+  }
+  return null;
+}
+
+/**
+ * After auto-layout is applied, re-enforce fixed dimensions declared by
+ * `size-*`, `w-*`, and `h-*` utilities so Figma's layout engine cannot
+ * stretch or squeeze the node.
+ */
+export function enforceFixedBoxSizingAfterLayout(node: SceneNode, classes: string[]): void {
+  const fixed = resolveFixedBoxSizeFromClasses(classes);
+  if (fixed.width == null && fixed.height == null) return;
+  if (!node || !('resize' in node)) return;
+
+  const currentWidth = 'width' in node && typeof node.width === 'number' ? node.width : 1;
+  const currentHeight = 'height' in node && typeof node.height === 'number' ? node.height : 1;
+  const targetWidth = fixed.width != null ? fixed.width : currentWidth;
+  const targetHeight = fixed.height != null ? fixed.height : currentHeight;
+
+  try {
+    node.resize(Math.max(1, targetWidth), Math.max(1, targetHeight));
+    if ('layoutGrow' in node) node.layoutGrow = 0;
+
+    const mode = 'layoutMode' in node ? String(node.layoutMode || '') : '';
+    if ('layoutSizingHorizontal' in node && fixed.width != null) node.layoutSizingHorizontal = 'FIXED';
+    if ('layoutSizingVertical' in node && fixed.height != null) node.layoutSizingVertical = 'FIXED';
+
+    if (mode === 'HORIZONTAL') {
+      if (fixed.width != null && 'primaryAxisSizingMode' in node) node.primaryAxisSizingMode = 'FIXED';
+      if (fixed.height != null && 'counterAxisSizingMode' in node) node.counterAxisSizingMode = 'FIXED';
+    } else if (mode === 'VERTICAL') {
+      if (fixed.height != null && 'primaryAxisSizingMode' in node) node.primaryAxisSizingMode = 'FIXED';
+      if (fixed.width != null && 'counterAxisSizingMode' in node) node.counterAxisSizingMode = 'FIXED';
+    } else {
+      if (fixed.height != null && 'primaryAxisSizingMode' in node) node.primaryAxisSizingMode = 'FIXED';
+      if (fixed.width != null && 'counterAxisSizingMode' in node) node.counterAxisSizingMode = 'FIXED';
+    }
+  } catch (_err) {
+    // ignore
+  }
+}
+
+export function enforceSquareSizingAfterLayout(node: SceneNode, classes: string[]): void {
+  enforceFixedBoxSizingAfterLayout(node, classes);
+}

package/src/layout/text-resize-decision.ts

@@ -0,0 +1,51 @@
+/**
+ * Decision helper for the "resize text node to parent's content width" step
+ * inside `buildFigmaNode`'s frame-with-text branch.
+ *
+ * Extracted into a pure function because the decision has historically been
+ * brittle — site (c) of the recurring inline-flex pill bug lives in this
+ * branch (see `tools/figma-plugin/.ai/troubleshooting.md`). Keeping it pure
+ * makes the truth table testable without stubbing `buildFigmaNode`'s whole
+ * dependency surface.
+ *
+ * Returns the target width (positive number) if the text node should be
+ * resized, or `undefined` if no resize should occur — including when the
+ * computed width would be 0 or negative after padding subtraction.
+ */
+export interface TextResizeFrameInput {
+  // Match Figma's FrameNode['layoutMode'] which includes 'GRID'.
+  layoutMode: 'NONE' | 'HORIZONTAL' | 'VERTICAL' | 'GRID';
+  primaryAxisAlignItems: string;
+  primaryAxisSizingMode: 'AUTO' | 'FIXED';
+  paddingLeft: number;
+  paddingRight: number;
+}
+
+export function resolveTextResizeWidth(
+  frame: TextResizeFrameInput,
+  contextMaxWidth: number | undefined | null,
+): number | undefined {
+  if (contextMaxWidth == null || !Number.isFinite(contextMaxWidth) || contextMaxWidth <= 0) {
+    return undefined;
+  }
+
+  // In a HORIZONTAL frame with CENTER alignment, don't force the text node
+  // to a fixed width — let it stay HUG-sized so the frame's CENTER alignment
+  // can position it (e.g. a numbered circle with justify-center).
+  const isHorizontalCentered =
+    frame.layoutMode === 'HORIZONTAL' && frame.primaryAxisAlignItems === 'CENTER';
+
+  // Skip the resize for HORIZONTAL frames that hug their content width
+  // (inline-flex pills / chips / badges). Their natural width IS the text
+  // width — if we resize the text to the parent's maxWidth, the hug-frame
+  // inherits that width and stretches across the whole card. This is the
+  // recurring inline-flex pill bug — site (c).
+  const isHorizontalHugging =
+    frame.layoutMode === 'HORIZONTAL' && frame.primaryAxisSizingMode === 'AUTO';
+
+  if (isHorizontalCentered || isHorizontalHugging) return undefined;
+
+  const padding = (frame.paddingLeft || 0) + (frame.paddingRight || 0);
+  const target = contextMaxWidth - padding;
+  return target > 0 ? target : undefined;
+}

package/src/{width-solver.ts → layout/width-solver.ts}

@@ -1,5 +1,5 @@
 import { LayoutParser } from './layout-parser';
-import { type NodeIR, isElementLikeNode } from './node-ir';
+import { type NodeIR, isElementLikeNode, getBaseClass } from '../tailwind';
 
 export type NodeLayoutComputed = {
   layoutIR: ReturnType<typeof LayoutParser.parseToIR>;
@@ -30,6 +30,18 @@ const BLOCK_TAGS = new Set([
   'tbody',
   'tfoot',
   'tr',
+  // Heading and paragraph tags are block-level in CSS and stretch to fill a
+  // flex-col parent, giving text-center/text-right meaningful visual effect.
+  // Note: shouldStretchToParentWidth guards against mx-auto (which signals
+  // explicit HUG+centering intent) and w-*/max-w-* (explicit width constraints).
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p',
+  // `a`, `button`, and `label` are inline by CSS default, but become block-level
+  // when given `display: flex|grid|block` via classes. The frame-creation branch
+  // in ui-builder only reaches this check when the element has layout classes /
+  // children / background, i.e. after it has been promoted to block-level, so
+  // including them here is safe. Plain inline usage goes through the inline-text
+  // path and never hits shouldStretchToParentWidth.
+  'a', 'button', 'label',
 ]);
 
 const GRID_BREAKPOINTS: Record<string, number> = {
@@ -40,10 +52,101 @@ const GRID_BREAKPOINTS: Record<string, number> = {
   '2xl': 1536,
 };
 
-export function getBaseClass(value: string): string | null {
-  if (!value) return null;
-  if (value.indexOf(':') !== -1) return null;
-  return value;
+const DISPLAY_UTILITIES = new Set([
+  'block',
+  'inline-block',
+  'inline',
+  'flex',
+  'inline-flex',
+  'grid',
+  'inline-grid',
+  'contents',
+  'table',
+  'table-row',
+  'table-cell',
+  'flow-root',
+  'list-item',
+]);
+
+function resolveActiveDisplayUtility(classes: string[] | undefined, availableWidth?: number): string | null {
+  if (!classes || classes.length === 0) return null;
+  type DisplayCandidate = { minWidth: number; utility: string; order: number };
+  const candidates: DisplayCandidate[] = [];
+
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    const parts = cls.split(':');
+    const tail = parts[parts.length - 1];
+    if (!DISPLAY_UTILITIES.has(tail)) continue;
+    const prefixes = parts.slice(0, -1);
+
+    let minWidth = 0;
+    let unsupported = false;
+    for (let j = 0; j < prefixes.length; j++) {
+      const bp = GRID_BREAKPOINTS[prefixes[j]];
+      if (!bp && bp !== 0) {
+        unsupported = true;
+        break;
+      }
+      if (bp > minWidth) minWidth = bp;
+    }
+    if (unsupported) continue;
+    candidates.push({ minWidth: minWidth, utility: tail, order: i });
+  }
+
+  if (candidates.length === 0) return null;
+
+  if (availableWidth != null && Number.isFinite(availableWidth)) {
+    let chosen: DisplayCandidate | null = null;
+    for (let i = 0; i < candidates.length; i++) {
+      const candidate = candidates[i];
+      if (availableWidth < candidate.minWidth) continue;
+      if (
+        !chosen ||
+        candidate.minWidth > chosen.minWidth ||
+        (candidate.minWidth === chosen.minWidth && candidate.order > chosen.order)
+      ) {
+        chosen = candidate;
+      }
+    }
+    return chosen ? chosen.utility : null;
+  }
+
+  let chosen: DisplayCandidate | null = null;
+  for (let i = 0; i < candidates.length; i++) {
+    const candidate = candidates[i];
+    if (
+      !chosen ||
+      candidate.minWidth > chosen.minWidth ||
+      (candidate.minWidth === chosen.minWidth && candidate.order > chosen.order)
+    ) {
+      chosen = candidate;
+    }
+  }
+  return chosen ? chosen.utility : null;
+}
+
+function stripVariantPrefix(value: string): string {
+  if (!value) return value;
+  const idx = value.lastIndexOf(':');
+  return idx === -1 ? value : value.slice(idx + 1);
+}
+
+function hasOutOfFlowPositioning(classes: string[] | undefined): boolean {
+  if (!classes || classes.length === 0) return false;
+  for (const cls of classes) {
+    const base = stripVariantPrefix(cls);
+    if (base === 'absolute' || base === 'fixed' || base === 'sticky') {
+      return true;
+    }
+  }
+  return false;
+}
+
+function nodeHasOutOfFlowPositioning(node: NodeIR): boolean {
+  if (node.kind === 'ring') return hasOutOfFlowPositioning(node.classes);
+  if (isElementLikeNode(node)) return hasOutOfFlowPositioning(node.classes);
+  return false;
 }
 
 export function extractFixedWidth(classes: string[] | undefined): number | null {
@@ -86,17 +189,15 @@ export function extractMaxWidth(classes: string[] | undefined): number | null {
 
 export function extractGridColumns(classes: string[] | undefined, availableWidth?: number): number | null {
   if (!classes) return null;
+  const activeDisplay = resolveActiveDisplayUtility(classes, availableWidth);
+  const displayIsGrid = activeDisplay === 'grid' || activeDisplay === 'inline-grid';
   const responsivePrefixes = new Set(Object.keys(GRID_BREAKPOINTS));
   let baseCols: number | null = null;
   let best: { bp: number; cols: number } | null = null;
-  let hasBaseGrid = false;
   for (const cls of classes) {
     const parts = cls.split(':');
     const tail = parts[parts.length - 1];
     const prefixes = parts.slice(0, -1);
-    if ((tail === 'grid' || tail === 'inline-grid') && prefixes.length === 0) {
-      hasBaseGrid = true;
-    }
     const match = tail.match(/^grid-cols-(\d+)$/);
     if (!match) continue;
     const cols = parseInt(match[1], 10);
@@ -117,19 +218,21 @@ export function extractGridColumns(classes: string[] | undefined, availableWidth
     }
   }
 
-  if (!hasBaseGrid && baseCols == null && !best) return null;
+  if (!displayIsGrid && baseCols == null && !best) return null;
 
   if (availableWidth != null && Number.isFinite(availableWidth)) {
+    if (!displayIsGrid) return null;
     if (best && availableWidth >= best.bp) return best.cols;
     if (baseCols != null) return baseCols;
     // Tailwind defaults to one implicit column for grid containers until a responsive override applies.
-    if (hasBaseGrid) return 1;
+    if (displayIsGrid) return 1;
     return best ? best.cols : null;
   }
 
+  if (!displayIsGrid && baseCols == null && !best) return null;
   if (baseCols != null) return baseCols;
   if (best) return best.cols;
-  if (hasBaseGrid) return 1;
+  if (displayIsGrid) return 1;
   return null;
 }
 
@@ -150,15 +253,28 @@ export function extractGridBreakpointWidth(classes: string[] | undefined): numbe
 
 export function shouldStretchToParentWidth(tag: string, classes: string[]): boolean {
   if (!BLOCK_TAGS.has(tag)) return false;
+  if (hasOutOfFlowPositioning(classes)) return false;
   for (const cls of classes) {
     const base = getBaseClass(cls);
     if (!base) continue;
+    // Out-of-flow positioned nodes should not inherit vertical stretch behavior.
+    // These nodes are anchored by top/right/bottom/left (e.g. dialog close button).
+    if (base === 'absolute' || base === 'fixed' || base === 'sticky') {
+      return false;
+    }
     if (base === 'inline' || base === 'inline-block' || base === 'inline-flex' || base === 'inline-grid') {
       return false;
     }
     if (base.startsWith('w-') || base.startsWith('max-w-') || base.startsWith('min-w-')) {
       return false;
     }
+    // `size-N` (Tailwind's both-axis shorthand) pins the width, so the element
+    // should NOT stretch to parent width — same intent as `w-N`. Numeric and
+    // arbitrary forms only; `size-full` was already normalized into `w-full`
+    // by `splitClassName`, so it never appears here as a separate token.
+    if (base.startsWith('size-')) {
+      return false;
+    }
     if (base.startsWith('self-')) {
       return false;
     }
@@ -182,13 +298,13 @@ export function resolveExplicitWidthFromClasses(classes: string[]): number | nul
 }
 
 export function getNodeLayoutComputed(node: NodeIR): NodeLayoutComputed {
-  const cached = NODE_LAYOUT_CACHE.get(node as any);
+  const cached = NODE_LAYOUT_CACHE.get(node);
   if (cached) return cached;
 
   const classes = isElementLikeNode(node) ? node.classes : [];
   const semanticLayoutClasses = getSemanticLayoutClasses(node);
   const layoutClasses = semanticLayoutClasses.length > 0
-    ? [...semanticLayoutClasses, ...classes]
+    ? semanticLayoutClasses.concat(classes)
     : classes;
   const layoutIR = LayoutParser.parseToIR(layoutClasses);
   const maxWidth = extractMaxWidth(classes);
@@ -208,7 +324,8 @@ export function getNodeLayoutComputed(node: NodeIR): NodeLayoutComputed {
   );
   const hasExplicitSize = classes.some(c =>
     /^w-\d+$/.test(c) || /^w-\[/.test(c) || /^h-\d+$/.test(c) || /^h-\[/.test(c) ||
-    c === 'w-full' || c === 'h-full' || /^w-\d+\/\d+$/.test(c)
+    c === 'w-full' || c === 'h-full' || /^w-\d+\/\d+$/.test(c) ||
+    /^size-\d+(?:\.\d+)?$/.test(c) || /^size-\[/.test(c) || c === 'size-full'
   );
 
   const computed: NodeLayoutComputed = {
@@ -220,7 +337,7 @@ export function getNodeLayoutComputed(node: NodeIR): NodeLayoutComputed {
     hasFlexChildClass: hasFlexChildClass,
     hasExplicitSize: hasExplicitSize,
   };
-  NODE_LAYOUT_CACHE.set(node as any, computed);
+  NODE_LAYOUT_CACHE.set(node, computed);
   return computed;
 }
 
@@ -253,7 +370,8 @@ export function solveLayoutWidths(node: NodeIR, availableWidth?: number): NodeIR
   }
 
   if (node.kind === 'ring') {
-    let childWidth: number | undefined = availableWidth;
+    const ringIsOutOfFlow = hasOutOfFlowPositioning(node.classes);
+    let childWidth: number | undefined = ringIsOutOfFlow ? undefined : availableWidth;
     if (childWidth != null) {
       childWidth = Math.max(0, childWidth - (node.ringWidth + node.offsetWidth) * 2);
     }
@@ -283,8 +401,12 @@ export function solveLayoutWidths(node: NodeIR, availableWidth?: number): NodeIR
   }
   // Component wrappers (Card, CardHeader, etc.) are not in BLOCK_TAGS but should
   // still inherit the parent's available width when they have no explicit width of their own.
+  // Restrict this to components that actually wrap children. Leaf components include
+  // icon components (XIcon, ChevronDown, etc.) and forcing full width on them causes
+  // dialog close buttons and similar absolute controls to misplace.
   if (widthOverride == null && availableWidth != null && node.kind === 'component') {
-    if (!hasNonFullWidthClass(classes)) {
+    const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+    if (hasChildren && !hasNonFullWidthClass(classes) && !hasOutOfFlowPositioning(classes)) {
       widthOverride = availableWidth;
     }
   }
@@ -321,12 +443,18 @@ export function solveLayoutWidths(node: NodeIR, availableWidth?: number): NodeIR
   let remainingChildWidth: number | null = null;
   if (layoutIR.layoutMode === 'HORIZONTAL' && contentWidth != null && node.children && node.children.length > 0) {
     const gap = layoutIR.gapX != null ? layoutIR.gapX : layoutIR.gap;
-    const totalGap = gap * Math.max(0, node.children.length - 1);
+    // CSS flex: absolute/fixed children are out-of-flow and don't consume space
+    // in the row. Excluding them prevents their width from shrinking siblings
+    // (e.g. an absolute check-indicator in a Select item would otherwise steal
+    // 14px from the label text's allocation and force wrapping).
+    const inFlowChildren = node.children
+      .filter(isElementLikeNode)
+      .filter((child) => !nodeHasOutOfFlowPositioning(child));
+    const totalGap = gap * Math.max(0, inFlowChildren.length - 1);
     let fixedTotal = 0;
     let growCount = 0;
     let variableCount = 0;
-    for (const child of node.children) {
-      if (!isElementLikeNode(child)) continue;
+    for (const child of inFlowChildren) {
       const explicitChildWidth = resolveExplicitWidthFromChild(child);
       if (explicitChildWidth != null) {
         fixedTotal += explicitChildWidth;
@@ -351,22 +479,25 @@ export function solveLayoutWidths(node: NodeIR, availableWidth?: number): NodeIR
   const nextChildren: NodeIR[] = [];
   for (const child of node.children) {
     let nextChild = child;
-    let nextWidth = childWidth;
-    if (gridChildWidth != null) {
-      nextChild = enforceFixedWidthOnGridChild(child, gridChildWidth);
-      nextWidth = gridChildWidth;
-    } else if (layoutIR.layoutMode === 'HORIZONTAL' && contentWidth != null) {
-      const explicitChildWidth = resolveExplicitWidthFromChild(child);
-      if (explicitChildWidth != null) {
-        nextWidth = explicitChildWidth;
-      } else if (flexChildWidth != null && isElementLikeNode(child) && hasGrowClass(child.classes)) {
-        nextChild = enforceFixedWidthOnFlexChild(child, flexChildWidth);
-        nextWidth = flexChildWidth;
-      } else if (remainingChildWidth != null && isElementLikeNode(child)) {
-        nextChild = enforceFixedWidthOnGridChild(child, remainingChildWidth);
-        nextWidth = remainingChildWidth;
-      } else {
-        nextWidth = undefined;
+    const childIsOutOfFlow = nodeHasOutOfFlowPositioning(child);
+    let nextWidth = childIsOutOfFlow ? undefined : childWidth;
+    if (!childIsOutOfFlow) {
+      if (gridChildWidth != null) {
+        nextChild = enforceFixedWidthOnGridChild(child, gridChildWidth);
+        nextWidth = gridChildWidth;
+      } else if (layoutIR.layoutMode === 'HORIZONTAL' && contentWidth != null) {
+        const explicitChildWidth = resolveExplicitWidthFromChild(child);
+        if (explicitChildWidth != null) {
+          nextWidth = explicitChildWidth;
+        } else if (flexChildWidth != null && isElementLikeNode(child) && hasGrowClass(child.classes)) {
+          nextChild = enforceFixedWidthOnFlexChild(child, flexChildWidth);
+          nextWidth = flexChildWidth;
+        } else if (remainingChildWidth != null && isElementLikeNode(child)) {
+          nextChild = enforceFixedWidthOnGridChild(child, remainingChildWidth);
+          nextWidth = remainingChildWidth;
+        } else {
+          nextWidth = undefined;
+        }
       }
     }
     nextChildren.push(solveLayoutWidths(nextChild, nextWidth));