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

package/scanner/intrinsic-sizing-regression.ts

@@ -0,0 +1,333 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+import { hasDefiniteWidth, isUnanchoredStretchChild } from '../src/layout/intrinsic-sizing';
+import { breakHugStretchDeadlocks } from '../src/layout/intrinsic-applier';
+
+/**
+ * Locks in the intrinsic-sizing predicates + applier.
+ *
+ * Canonical real-world repro: greenhouse-app `MarketPriceCard` timeframe
+ * row at lg / xl. The wrap row sits at the bottom of a chain like:
+ *
+ *   Story Layout   VERTICAL  counter=FIXED w=1024   ← anchored (authored)
+ *   └── Card root  VERTICAL  layoutAlign=STRETCH    ← propagated
+ *       └── CardHdr HORIZONTAL primary=FIXED        ← authored FIXED width
+ *           └── R-grp VERTICAL layoutGrow=0 hug      ← chain BREAKS
+ *               └── mid VERTICAL layoutAlign=STRETCH ← would-be propagated, but R-grp is HUG
+ *                   └── wrap HORIZONTAL+WRAP layoutAlign=STRETCH
+ *
+ * Everything from R-grp down is unanchored. `mid` and `wrap` each carry
+ * `layoutAlign=STRETCH` but their parents' width chain is HUG-of-children.
+ * Figma resolves the deadlock by stamping the frame-creation default
+ * (~100px) at the topmost HUG and cascading STRETCH down to it.
+ *
+ * The applier flips each unanchored-STRETCH child's `layoutAlign` to
+ * `INHERIT` and resets its horizontal sizing axis to AUTO so the chain
+ * resolves to natural HUG widths from the bottom up — the same result
+ * CSS computes via max-content.
+ */
+
+// ---------------------------------------------------------------------------
+// Stub-frame harness — minimal FrameNode mock with parent links.
+// ---------------------------------------------------------------------------
+
+interface StubFrame {
+  type: 'FRAME';
+  name: string;
+  layoutMode: 'NONE' | 'HORIZONTAL' | 'VERTICAL';
+  layoutPositioning: 'AUTO' | 'ABSOLUTE';
+  primaryAxisSizingMode: 'AUTO' | 'FIXED';
+  counterAxisSizingMode: 'AUTO' | 'FIXED';
+  primaryAxisAlignItems: string;
+  counterAxisAlignItems: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'BASELINE';
+  layoutAlign: 'INHERIT' | 'STRETCH' | 'MIN' | 'CENTER' | 'MAX';
+  layoutGrow: number;
+  width: number;
+  height: number;
+  parent: StubFrame | null;
+  children: StubFrame[];
+  appendChild(child: StubFrame): void;
+}
+
+function mkFrame(name: string): StubFrame {
+  return {
+    type: 'FRAME',
+    name,
+    layoutMode: 'NONE',
+    layoutPositioning: 'AUTO',
+    primaryAxisSizingMode: 'AUTO',
+    counterAxisSizingMode: 'AUTO',
+    primaryAxisAlignItems: 'MIN',
+    counterAxisAlignItems: 'MIN',
+    layoutAlign: 'INHERIT',
+    layoutGrow: 0,
+    width: 100,
+    height: 100,
+    parent: null,
+    children: [],
+    appendChild(child) {
+      child.parent = this;
+      this.children.push(child);
+    },
+  };
+}
+
+interface FrameInit {
+  name: string;
+  mode?: 'NONE' | 'HORIZONTAL' | 'VERTICAL';
+  primaryFixed?: boolean;
+  counterFixed?: boolean;
+  layoutAlign?: 'INHERIT' | 'STRETCH' | 'MIN' | 'CENTER' | 'MAX';
+  layoutGrow?: number;
+  width?: number;
+  height?: number;
+}
+
+function newFrame(init: FrameInit): StubFrame {
+  const f = mkFrame(init.name);
+  if (init.mode) f.layoutMode = init.mode;
+  if (init.primaryFixed) f.primaryAxisSizingMode = 'FIXED';
+  if (init.counterFixed) f.counterAxisSizingMode = 'FIXED';
+  if (init.layoutAlign) f.layoutAlign = init.layoutAlign;
+  if (init.layoutGrow != null) f.layoutGrow = init.layoutGrow;
+  if (init.width != null) f.width = init.width;
+  if (init.height != null) f.height = init.height;
+  return f;
+}
+
+const asNode = (f: StubFrame) => f as unknown as SceneNode;
+
+// ---------------------------------------------------------------------------
+// hasDefiniteWidth — propagation
+// ---------------------------------------------------------------------------
+
+// Authored root: any orphaned frame is treated as definite.
+{
+  const root = newFrame({ name: 'root', mode: 'VERTICAL', counterFixed: true, width: 1024 });
+  assert.equal(hasDefiniteWidth(asNode(root)), true, 'orphan root = definite');
+}
+
+// STRETCH child of VERTICAL parent that's definite → propagated.
+{
+  const root = newFrame({ name: 'root', mode: 'VERTICAL', counterFixed: true, width: 1024 });
+  const child = newFrame({ name: 'child', mode: 'VERTICAL', layoutAlign: 'STRETCH' });
+  root.appendChild(child);
+  assert.equal(
+    hasDefiniteWidth(asNode(child)), true,
+    'STRETCH child of definite VERTICAL parent = definite',
+  );
+}
+
+// INHERIT VERTICAL child of VERTICAL parent without authored FIXED width
+// → HUG counter, NOT propagated.
+{
+  const root = newFrame({ name: 'root', mode: 'VERTICAL', counterFixed: true, width: 1024 });
+  const child = newFrame({ name: 'child', mode: 'VERTICAL' });
+  root.appendChild(child);
+  assert.equal(
+    hasDefiniteWidth(asNode(child)), false,
+    'INHERIT HUG-counter VERTICAL child of VERTICAL parent = not propagated',
+  );
+}
+
+// GROW child of HORIZONTAL parent that's definite → propagated.
+{
+  const root = newFrame({ name: 'root', mode: 'HORIZONTAL', primaryFixed: true, width: 1024 });
+  const child = newFrame({ name: 'child', mode: 'HORIZONTAL', layoutGrow: 1 });
+  root.appendChild(child);
+  assert.equal(
+    hasDefiniteWidth(asNode(child)), true,
+    'GROW child of definite HORIZONTAL parent = definite',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// hasDefiniteWidth — explicit-FIXED short-circuit
+// ---------------------------------------------------------------------------
+
+// HORIZONTAL frame with primary=FIXED width=400 and layoutAlign=INHERIT is
+// authored — even if its parent's chain isn't definite, the frame's own
+// width is authored. CardHeader-shape: nested under a HUG-primary ancestor
+// but explicitly sized by applyFullWidthIfPossible / w-[Npx].
+{
+  const unknownParent = newFrame({ name: 'parent', mode: 'VERTICAL' });
+  const fixed = newFrame({
+    name: 'fixed', mode: 'HORIZONTAL', primaryFixed: true, width: 400,
+  });
+  unknownParent.appendChild(fixed);
+  assert.equal(
+    hasDefiniteWidth(asNode(fixed)), true,
+    'HORIZONTAL primary=FIXED + align!=STRETCH = authored definite',
+  );
+}
+
+// HORIZONTAL frame with primary=FIXED but layoutAlign=STRETCH is NOT
+// authored — the FIXED is a Figma side-effect of STRETCH. Must fall
+// through to parent propagation.
+{
+  const unknownParent = newFrame({ name: 'parent', mode: 'VERTICAL' });
+  const sideEffect = newFrame({
+    name: 'side', mode: 'HORIZONTAL', primaryFixed: true, width: 100,
+    layoutAlign: 'STRETCH',
+  });
+  unknownParent.appendChild(sideEffect);
+  // Parent is orphan = root = definite. STRETCH child of VERTICAL parent
+  // propagates from parent → definite.
+  assert.equal(
+    hasDefiniteWidth(asNode(sideEffect)), true,
+    'STRETCH of definite VERTICAL parent propagates regardless of own FIXED side-effect',
+  );
+}
+
+// Same shape but inside a non-definite chain → the STRETCH side-effect FIXED
+// must not trick the predicate into definite.
+{
+  const horizParent = newFrame({ name: 'hp', mode: 'HORIZONTAL' });
+  const vertHug = newFrame({ name: 'v', mode: 'VERTICAL' });
+  horizParent.appendChild(vertHug);
+  const sideEffect = newFrame({
+    name: 'side', mode: 'HORIZONTAL', primaryFixed: true, width: 100,
+    layoutAlign: 'STRETCH',
+  });
+  vertHug.appendChild(sideEffect);
+  // horizParent is root-orphan = definite. But vertHug is layoutGrow=0 in
+  // HORIZONTAL parent → not propagated → vertHug is NOT definite.
+  // Therefore STRETCH child of vertHug is also NOT definite.
+  assert.equal(
+    hasDefiniteWidth(asNode(vertHug)), false,
+    'HUG-primary child of HORIZONTAL parent breaks chain (per the bug shape)',
+  );
+  assert.equal(
+    hasDefiniteWidth(asNode(sideEffect)), false,
+    'STRETCH-of-unanchored-parent + FIXED side-effect = still NOT definite',
+  );
+}
+
+// VERTICAL frame with counter=FIXED + align=INHERIT = authored definite.
+{
+  const wrapper = newFrame({ name: 'w', mode: 'VERTICAL' });
+  const fixed = newFrame({
+    name: 'fixed', mode: 'VERTICAL', counterFixed: true, width: 400,
+  });
+  wrapper.appendChild(fixed);
+  assert.equal(hasDefiniteWidth(asNode(fixed)), true, 'VERTICAL counter=FIXED + align=INHERIT authored');
+}
+
+// ---------------------------------------------------------------------------
+// isUnanchoredStretchChild — the canonical bug shape
+// ---------------------------------------------------------------------------
+
+// MarketPriceCard chain: chain breaks at the right-group (HUG primary
+// inside HORIZONTAL parent). Everything below is unanchored STRETCH.
+{
+  const story = newFrame({ name: 'story', mode: 'VERTICAL', counterFixed: true, width: 1024 });
+  const card = newFrame({ name: 'card', mode: 'VERTICAL', layoutAlign: 'STRETCH' });
+  const hdr = newFrame({
+    name: 'hdr', mode: 'HORIZONTAL', primaryFixed: true, width: 952, layoutAlign: 'STRETCH',
+  });
+  const rgrp = newFrame({ name: 'rgrp', mode: 'VERTICAL', layoutGrow: 0 });
+  const mid = newFrame({
+    name: 'mid', mode: 'VERTICAL', layoutAlign: 'STRETCH', primaryFixed: true, width: 100,
+  });
+  const wrap = newFrame({
+    name: 'wrap', mode: 'HORIZONTAL', layoutAlign: 'STRETCH', primaryFixed: true, width: 100,
+  });
+  story.appendChild(card);
+  card.appendChild(hdr);
+  hdr.appendChild(rgrp);
+  rgrp.appendChild(mid);
+  mid.appendChild(wrap);
+
+  assert.equal(hasDefiniteWidth(asNode(rgrp)), false, 'rgrp breaks chain (HUG primary in HORIZONTAL hdr)');
+  assert.equal(hasDefiniteWidth(asNode(mid)), false, 'mid: STRETCH of unanchored parent');
+  assert.equal(hasDefiniteWidth(asNode(wrap)), false, 'wrap: STRETCH of unanchored parent');
+
+  assert.equal(isUnanchoredStretchChild(asNode(card)), false, 'card: STRETCH of definite parent — anchored');
+  assert.equal(isUnanchoredStretchChild(asNode(hdr)), false, 'hdr: STRETCH of definite parent (card) — anchored');
+  assert.equal(isUnanchoredStretchChild(asNode(rgrp)), false, 'rgrp: layoutAlign=INHERIT, not a stretch child');
+  assert.equal(isUnanchoredStretchChild(asNode(mid)), true, 'mid: unanchored stretch — flag');
+  assert.equal(isUnanchoredStretchChild(asNode(wrap)), true, 'wrap: unanchored stretch — flag');
+}
+
+// Restricted to VERTICAL parents only — STRETCH children of HORIZONTAL
+// parents are a height-deadlock concern, not a width-deadlock concern.
+{
+  const horiz = newFrame({ name: 'h', mode: 'HORIZONTAL' });
+  const child = newFrame({ name: 'c', layoutAlign: 'STRETCH' });
+  horiz.appendChild(child);
+  assert.equal(
+    isUnanchoredStretchChild(asNode(child)), false,
+    'STRETCH child of HORIZONTAL parent is OUT of scope (height-axis)',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// breakHugStretchDeadlocks — end-to-end flip on MarketPriceCard chain
+// ---------------------------------------------------------------------------
+
+{
+  const story = newFrame({ name: 'story', mode: 'VERTICAL', counterFixed: true, width: 1024 });
+  const card = newFrame({ name: 'card', mode: 'VERTICAL', layoutAlign: 'STRETCH' });
+  const hdr = newFrame({
+    name: 'hdr', mode: 'HORIZONTAL', primaryFixed: true, width: 952, layoutAlign: 'STRETCH',
+  });
+  const rgrp = newFrame({ name: 'rgrp', mode: 'VERTICAL', layoutGrow: 0 });
+  const mid = newFrame({
+    name: 'mid', mode: 'VERTICAL', layoutAlign: 'STRETCH',
+    primaryFixed: true, counterFixed: true, width: 100,
+  });
+  const wrap = newFrame({
+    name: 'wrap', mode: 'HORIZONTAL', layoutAlign: 'STRETCH',
+    primaryFixed: true, width: 100,
+  });
+  story.appendChild(card);
+  card.appendChild(hdr);
+  hdr.appendChild(rgrp);
+  rgrp.appendChild(mid);
+  mid.appendChild(wrap);
+
+  const stats = breakHugStretchDeadlocks(asNode(story));
+
+  // Anchored frames untouched.
+  assert.equal(card.layoutAlign, 'STRETCH', 'card untouched (anchored)');
+  assert.equal(hdr.layoutAlign, 'STRETCH', 'hdr untouched (anchored)');
+  // Unanchored stretch children flipped.
+  assert.equal(mid.layoutAlign, 'INHERIT', 'mid flipped to INHERIT');
+  assert.equal(wrap.layoutAlign, 'INHERIT', 'wrap flipped to INHERIT');
+  // Sizing axes reset to AUTO so children hug naturally.
+  assert.equal(mid.counterAxisSizingMode, 'AUTO', 'mid VERTICAL: counter reset to AUTO');
+  assert.equal(wrap.primaryAxisSizingMode, 'AUTO', 'wrap HORIZONTAL: primary reset to AUTO');
+
+  assert.equal(stats.alignmentFlips, 2, 'flip count = 2 (mid + wrap)');
+  assert.equal(stats.nodesWalked, 6, 'walked entire chain (story+card+hdr+rgrp+mid+wrap)');
+}
+
+// Pure-anchored tree: no flips at all.
+{
+  const story = newFrame({ name: 'story', mode: 'VERTICAL', counterFixed: true, width: 1024 });
+  const a = newFrame({ name: 'a', mode: 'VERTICAL', layoutAlign: 'STRETCH' });
+  const b = newFrame({ name: 'b', mode: 'VERTICAL', layoutAlign: 'STRETCH' });
+  story.appendChild(a);
+  a.appendChild(b);
+
+  const stats = breakHugStretchDeadlocks(asNode(story));
+
+  assert.equal(stats.alignmentFlips, 0, 'fully-anchored tree: no flips');
+  assert.equal(a.layoutAlign, 'STRETCH', 'a untouched');
+  assert.equal(b.layoutAlign, 'STRETCH', 'b untouched');
+}
+
+// Empty tree: walker doesn't crash on leaf nodes.
+{
+  const leaf = newFrame({ name: 'leaf', mode: 'NONE' });
+  const stats = breakHugStretchDeadlocks(asNode(leaf));
+  assert.equal(stats.alignmentFlips, 0);
+  assert.equal(stats.nodesWalked, 1);
+}
+
+console.log('intrinsic-sizing-regression: ok');

package/scanner/portal-class-strip-regression.ts

@@ -0,0 +1,109 @@
+import assert from 'node:assert/strict';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: `stripPortalPositioningClasses` must KEEP responsive
+ * `max-w-*` variants. shadcn DialogContent declares its intended
+ * dialog width via `sm:max-w-lg` on the portal-rooted content node.
+ * If the scanner strips it, the renderer falls back to the generic
+ * 900px Story Layout default and the dialog preview is twice as wide
+ * as it would render in the browser.
+ *
+ * Earlier the strip rule was `/^(?:sm|md|lg|xl|2xl):max-w-/` —
+ * justified at the time by "the story's explicit max-w is
+ * authoritative." That principle only works for layouts where the
+ * consumer overrides; for components that publish their intended max
+ * width via responsive variants (every shadcn modal does), it
+ * silently destroys the width signal.
+ *
+ * The strip still removes legitimately Figma-irrelevant classes:
+ * fixed/absolute positioning, transforms, z-index, state-variant
+ * animations, transition durations, and uncomputable arbitrary
+ * `max-w-[calc(...)]` values.
+ *
+ * Real-world trigger: greenhouse-app DecreasePositionModal Default
+ * story renders at 900px instead of the 512px that
+ * `sm:max-w-lg` would produce.
+ */
+
+interface TestScannerView {
+  stripPortalPositioningClasses: (className: string) => string;
+}
+
+const scanner = new ComponentScanner({
+  componentPaths: [],
+  filePattern: '*.tsx',
+  exclude: [],
+}) as unknown as TestScannerView;
+
+function strip(className: string): string {
+  return scanner.stripPortalPositioningClasses(className);
+}
+
+function tokens(className: string): string[] {
+  return className.split(/\s+/).filter(Boolean);
+}
+
+// ---------------------------------------------------------------------------
+// KEEP: responsive max-w-* (the bug fix)
+// ---------------------------------------------------------------------------
+
+{
+  const out = tokens(strip('grid w-full sm:max-w-lg p-6'));
+  assert.ok(out.indexOf('sm:max-w-lg') !== -1, 'sm:max-w-lg must survive — it is the dialog width signal');
+}
+
+{
+  // All breakpoint variants of max-w must survive.
+  for (const bp of ['sm', 'md', 'lg', 'xl', '2xl']) {
+    const cls = `${bp}:max-w-md`;
+    const out = tokens(strip(cls));
+    assert.ok(out.indexOf(cls) !== -1, `${cls} must survive — responsive max-w is a width hint, not noise`);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// STRIP: things that are still meaningless in Figma
+// ---------------------------------------------------------------------------
+
+{
+  const out = tokens(strip('fixed top-[50%] left-[50%] z-50 grid w-full sm:max-w-lg'));
+  assert.equal(out.indexOf('fixed'), -1, 'fixed positioning is stripped');
+  assert.equal(out.indexOf('top-[50%]'), -1, 'top offset is stripped');
+  assert.equal(out.indexOf('left-[50%]'), -1, 'left offset is stripped');
+  assert.equal(out.indexOf('z-50'), -1, 'z-index is stripped');
+  assert.ok(out.indexOf('grid') !== -1, 'layout classes survive');
+  assert.ok(out.indexOf('w-full') !== -1, 'w-full survives');
+  assert.ok(out.indexOf('sm:max-w-lg') !== -1, 'sm:max-w-lg survives alongside the strip');
+}
+
+{
+  const out = tokens(strip('translate-x-[-50%] -translate-y-[50%] duration-200 ease-out'));
+  assert.equal(out.indexOf('translate-x-[-50%]'), -1, 'translate is stripped');
+  assert.equal(out.indexOf('-translate-y-[50%]'), -1, 'negative translate is stripped');
+  assert.equal(out.indexOf('duration-200'), -1, 'transition duration is stripped');
+  assert.equal(out.indexOf('ease-out'), -1, 'transition easing is stripped');
+}
+
+{
+  const out = tokens(strip('data-[state=open]:animate-in data-[state=closed]:fade-out-0 grid'));
+  assert.equal(out.indexOf('data-[state=open]:animate-in'), -1, 'state-variant animations are stripped');
+  assert.equal(out.indexOf('data-[state=closed]:fade-out-0'), -1, 'state-variant fade is stripped');
+  assert.ok(out.indexOf('grid') !== -1, 'layout class survives');
+}
+
+{
+  // Uncomputable max-w values still go.
+  const out = tokens(strip('max-w-[calc(100%-2rem)] sm:max-w-lg grid'));
+  assert.equal(out.indexOf('max-w-[calc(100%-2rem)]'), -1, 'calc-based max-w stripped (no px value)');
+  assert.ok(out.indexOf('sm:max-w-lg') !== -1, 'responsive max-w survives the same pass');
+}
+
+// ---------------------------------------------------------------------------
+// Edge cases
+// ---------------------------------------------------------------------------
+
+assert.equal(strip(''), '', 'empty string round-trips');
+assert.equal(strip('   '), '', 'whitespace-only collapses to empty');
+
+console.log('portal-class-strip-regression: PASS');

package/scanner/responsive-hidden-inline-regression.ts

@@ -0,0 +1,226 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+import {
+  isEffectivelyHidden,
+  getClassesForBreakpoint,
+} from '../src/tailwind/responsive-analyzer';
+import { collectTextContent } from '../src/design-system/selectable-state';
+import type { NodeIR } from '../src/tailwind';
+
+/**
+ * Locks in the responsive-hidden semantics for inline-text children.
+ *
+ * Bug class: a pair like
+ *   <span sm:hidden>Collat Δ</span>
+ *   <span hidden sm:inline>Collateral Δ</span>
+ * inside a `<th>` previously rendered both labels concatenated. The
+ * inline-collapse path (`createInlineTextNode` →
+ * `collectInlineSegments`) walked `node.children` directly, bypassing
+ * the per-child renderer (which already drops children with
+ * `display: hidden`). Both spans contributed text and the result was
+ * "Collat Δ Collateral Δ".
+ *
+ * Two pieces protect against regression:
+ *  - `isEffectivelyHidden` applies last-wins display-utility resolution
+ *    on an already-cascaded class list.
+ *  - `getClassesForBreakpoint` is the cascade used to feed
+ *    `isEffectivelyHidden` from a raw class list.
+ *
+ * Together they let the ui-builder filter hidden children before the
+ * inline-collapse path sees them.
+ */
+
+function run(): void {
+  // ---------------------------------------------------------------------
+  // isEffectivelyHidden — last-wins across display utilities
+  // ---------------------------------------------------------------------
+  assert.equal(isEffectivelyHidden([]), false, 'empty class list → not hidden');
+  assert.equal(isEffectivelyHidden(['flex']), false, 'flex → not hidden');
+  assert.equal(isEffectivelyHidden(['hidden']), true, 'hidden → hidden');
+  assert.equal(
+    isEffectivelyHidden(['hidden', 'inline']),
+    false,
+    'hidden then inline → inline wins (not hidden)',
+  );
+  assert.equal(
+    isEffectivelyHidden(['inline', 'hidden']),
+    true,
+    'inline then hidden → hidden wins',
+  );
+  assert.equal(
+    isEffectivelyHidden(['hidden', 'text-sm', 'font-medium']),
+    true,
+    'non-display utilities do not flip the hidden state',
+  );
+  assert.equal(
+    isEffectivelyHidden(['!hidden']),
+    true,
+    'important hidden still counted as the hidden display',
+  );
+
+  // ---------------------------------------------------------------------
+  // getClassesForBreakpoint — cascade producing the input above
+  // ---------------------------------------------------------------------
+  // Span 1: base `sm:hidden`. Hidden once we reach the sm breakpoint.
+  assert.deepEqual(
+    getClassesForBreakpoint(['sm:hidden'], 'base'),
+    [],
+    'sm:hidden at base → empty (visible)',
+  );
+  assert.deepEqual(
+    getClassesForBreakpoint(['sm:hidden'], 'sm'),
+    ['hidden'],
+    'sm:hidden at sm → [hidden]',
+  );
+  assert.deepEqual(
+    getClassesForBreakpoint(['sm:hidden'], 'md'),
+    ['hidden'],
+    'sm:hidden at md → [hidden] (cascades up)',
+  );
+
+  // Span 2: base `hidden`, opt back in at sm with `sm:inline`.
+  assert.deepEqual(
+    getClassesForBreakpoint(['hidden', 'sm:inline'], 'base'),
+    ['hidden'],
+    'hidden + sm:inline at base → [hidden] (visible-at-base = false)',
+  );
+  assert.deepEqual(
+    getClassesForBreakpoint(['hidden', 'sm:inline'], 'sm'),
+    ['hidden', 'inline'],
+    'hidden + sm:inline at sm → [hidden, inline] (inline wins)',
+  );
+  assert.deepEqual(
+    getClassesForBreakpoint(['hidden', 'sm:inline'], 'md'),
+    ['hidden', 'inline'],
+    'hidden + sm:inline at md → [hidden, inline] (cascades)',
+  );
+
+  // ---------------------------------------------------------------------
+  // End-to-end: feed cascade into isEffectivelyHidden — this is the
+  // exact check the ui-builder renderChildren filter performs.
+  // ---------------------------------------------------------------------
+  const span1Classes = ['sm:hidden'];
+  const span2Classes = ['hidden', 'sm:inline'];
+  const breakpoints = ['base', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+  // Span 1: visible at base, hidden at sm+.
+  for (const bp of breakpoints) {
+    const resolved = getClassesForBreakpoint(span1Classes, bp);
+    const hidden = isEffectivelyHidden(resolved);
+    if (bp === 'base') {
+      assert.equal(hidden, false, `span1 at ${bp}: should be visible`);
+    } else {
+      assert.equal(hidden, true, `span1 at ${bp}: should be hidden`);
+    }
+  }
+
+  // Span 2: hidden at base, visible at sm+.
+  for (const bp of breakpoints) {
+    const resolved = getClassesForBreakpoint(span2Classes, bp);
+    const hidden = isEffectivelyHidden(resolved);
+    if (bp === 'base') {
+      assert.equal(hidden, true, `span2 at ${bp}: should be hidden`);
+    } else {
+      assert.equal(hidden, false, `span2 at ${bp}: should be visible`);
+    }
+  }
+
+  // Exactly one of the pair must be visible at every breakpoint —
+  // otherwise we'd either lose the label or render both concatenated.
+  for (const bp of breakpoints) {
+    const span1Hidden = isEffectivelyHidden(getClassesForBreakpoint(span1Classes, bp));
+    const span2Hidden = isEffectivelyHidden(getClassesForBreakpoint(span2Classes, bp));
+    assert.equal(
+      span1Hidden !== span2Hidden,
+      true,
+      `at ${bp}: exactly one of (span1, span2) must be visible`,
+    );
+  }
+
+  // ---------------------------------------------------------------------
+  // collectTextContent must honor last-display-wins too.
+  //
+  // PerpsHeader real-world repro:
+  //   <p className="hidden text-muted-foreground sm:block">
+  //     Trade SOL, ETH, and BTC perpetual futures…
+  //   </p>
+  //
+  // Resolved at sm+: classes = ['hidden', 'text-muted-foreground', 'block'].
+  // `block` is the last display utility → element is visible. But an older
+  // `collectTextContent` checked `classes.includes('hidden')` directly and
+  // returned `''`, causing the text-element fallthrough in `buildFigmaNode`
+  // to bail on `if (!textContent.trim()) return null` — the entire `<p>`
+  // disappeared at every responsive tile even though the outer hidden
+  // gate correctly let it through.
+  // ---------------------------------------------------------------------
+  function pNode(classes: string[], text: string): NodeIR {
+    return {
+      kind: 'element',
+      tagName: 'p',
+      tagLower: 'p',
+      classes,
+      props: {},
+      children: [{ kind: 'text', text }],
+    } as NodeIR;
+  }
+
+  // Resolved at sm+: hidden + block → block wins → visible → text collected.
+  assert.equal(
+    collectTextContent(pNode(['hidden', 'text-muted-foreground', 'block'], 'Trade SOL')),
+    'Trade SOL',
+    'collectTextContent must collect text when display cascade ends in `block` (last-wins, not includes-hidden)',
+  );
+
+  // Resolved at base: hidden alone → hidden → empty.
+  assert.equal(
+    collectTextContent(pNode(['hidden', 'text-muted-foreground'], 'Trade SOL')),
+    '',
+    'collectTextContent must skip text when display cascade ends in `hidden`',
+  );
+
+  // sr-only still skipped (separate code path).
+  assert.equal(
+    collectTextContent(pNode(['sr-only'], 'Screen-reader only')),
+    '',
+    'collectTextContent skips sr-only nodes',
+  );
+
+  // Nested: parent visible, deep text node behind a `hidden` block child → that child skipped, sibling collected.
+  const nested: NodeIR = {
+    kind: 'element',
+    tagName: 'div',
+    tagLower: 'div',
+    classes: [],
+    props: {},
+    children: [
+      {
+        kind: 'element',
+        tagName: 'span',
+        tagLower: 'span',
+        classes: ['hidden'],
+        props: {},
+        children: [{ kind: 'text', text: 'invisible' }],
+      } as NodeIR,
+      { kind: 'text', text: 'visible' },
+    ],
+  } as NodeIR;
+  assert.equal(
+    collectTextContent(nested),
+    'visible',
+    'collectTextContent skips hidden children inside a visible parent',
+  );
+
+  console.log('responsive-hidden-inline-regression: PASS');
+}
+
+try {
+  run();
+} catch (err) {
+  console.error(err);
+  process.exit(1);
+}