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

package/scanner/layout-sizing-regression.ts

@@ -0,0 +1,227 @@
+import assert from 'node:assert/strict';
+import { makeEmptyIR } from '../src/layout/parser/ir';
+import { parseSizing } from '../src/layout/parser/sizing';
+
+/**
+ * Locks in the Tailwind sizing → LayoutIR mapping that previously
+ * lived inside LayoutParser as a private static method. Phase 3 of
+ * the layout-parser split moved this logic into `parser/sizing.ts` —
+ * this fixture catches accidental behavioural regressions.
+ *
+ * Covers: w-* / h-* (scale, arbitrary, fractional), size-*, w-full,
+ * h-full / h-screen / min-h-screen, max-w-N, named max-w (xs..7xl,
+ * prose, screen-*).
+ */
+
+// ---------------------------------------------------------------------------
+// Fixed width / height — scale values
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  parseSizing(['w-20'], ir);
+  assert.equal(ir.widthMode, 'FIXED');
+  assert.equal(ir.fixedWidth, 80);
+  assert.equal(ir.heightMode, 'HUG');
+}
+{
+  const ir = makeEmptyIR();
+  parseSizing(['h-10'], ir);
+  assert.equal(ir.heightMode, 'FIXED');
+  assert.equal(ir.fixedHeight, 40);
+}
+
+// ---------------------------------------------------------------------------
+// Arbitrary values [Xpx], [Yrem], [Zem]
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  parseSizing(['w-[100px]', 'h-[1.5rem]'], ir);
+  assert.equal(ir.widthMode, 'FIXED');
+  assert.equal(ir.fixedWidth, 100);
+  assert.equal(ir.heightMode, 'FIXED');
+  assert.equal(ir.fixedHeight, 24); // 1.5rem * 16
+}
+
+// ---------------------------------------------------------------------------
+// Fractional widths (FILL with widthFraction)
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  parseSizing(['w-1/2'], ir);
+  assert.equal(ir.widthMode, 'FILL');
+  assert.equal(ir.widthFraction, 0.5);
+}
+{
+  const ir = makeEmptyIR();
+  parseSizing(['w-2/3'], ir);
+  assert.equal(ir.widthMode, 'FILL');
+  assert.ok(Math.abs((ir.widthFraction ?? 0) - 2 / 3) < 1e-9);
+}
+{
+  const ir = makeEmptyIR();
+  parseSizing(['h-3/4'], ir);
+  assert.equal(ir.heightMode, 'FILL');
+  assert.equal(ir.heightFraction, 0.75);
+}
+
+// ---------------------------------------------------------------------------
+// size-N → both axes FIXED at the same value
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  parseSizing(['size-12'], ir);
+  assert.equal(ir.widthMode, 'FIXED');
+  assert.equal(ir.heightMode, 'FIXED');
+  assert.equal(ir.fixedWidth, 48);
+  assert.equal(ir.fixedHeight, 48);
+}
+
+// ---------------------------------------------------------------------------
+// w-full / h-full / h-screen / min-h-screen → FILL
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  parseSizing(['w-full'], ir);
+  assert.equal(ir.widthMode, 'FILL');
+  assert.equal(ir.heightMode, 'HUG');
+}
+{
+  const ir = makeEmptyIR();
+  parseSizing(['h-full'], ir);
+  assert.equal(ir.heightMode, 'FILL');
+}
+{
+  const ir = makeEmptyIR();
+  parseSizing(['h-screen'], ir);
+  assert.equal(ir.heightMode, 'FILL');
+}
+{
+  const ir = makeEmptyIR();
+  parseSizing(['min-h-screen'], ir);
+  assert.equal(ir.heightMode, 'FILL');
+}
+
+// ---------------------------------------------------------------------------
+// max-w with scale value — collapses to fixed width
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  parseSizing(['max-w-96'], ir);
+  assert.equal(ir.widthMode, 'FIXED');
+  assert.equal(ir.fixedWidth, 384);
+}
+
+// ---------------------------------------------------------------------------
+// Named max-w tokens
+// ---------------------------------------------------------------------------
+{
+  const cases: Array<[string, number]> = [
+    ['max-w-xs', 320],
+    ['max-w-sm', 384],
+    ['max-w-md', 448],
+    ['max-w-lg', 512],
+    ['max-w-xl', 576],
+    ['max-w-2xl', 672],
+    ['max-w-3xl', 768],
+    ['max-w-4xl', 896],
+    ['max-w-5xl', 1024],
+    ['max-w-6xl', 1152],
+    ['max-w-7xl', 1280],
+    ['max-w-prose', 640],
+    ['max-w-screen-sm', 640],
+    ['max-w-screen-md', 768],
+    ['max-w-screen-lg', 1024],
+    ['max-w-screen-xl', 1280],
+    ['max-w-screen-2xl', 1536],
+  ];
+  for (const [cls, expected] of cases) {
+    const ir = makeEmptyIR();
+    parseSizing([cls], ir);
+    assert.equal(ir.widthMode, 'FIXED', cls);
+    assert.equal(ir.fixedWidth, expected, cls);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Combinations — w + h together
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  parseSizing(['w-full', 'max-w-7xl'], ir);
+  // max-w fires AFTER w-full in the loop and overrides to FIXED at 1280.
+  assert.equal(ir.widthMode, 'FIXED');
+  assert.equal(ir.fixedWidth, 1280);
+}
+
+// ---------------------------------------------------------------------------
+// Arbitrary percent widths / heights — w-[60%], h-[40%]
+// Used by the shadcn Progress adapter (indicator inside track) and by any
+// consumer who writes percent widths directly in className.
+// ---------------------------------------------------------------------------
+{
+  const cases: Array<[string, number]> = [
+    ['w-[0%]', 0],
+    ['w-[33%]', 0.33],
+    ['w-[60%]', 0.6],
+    ['w-[100%]', 1],
+    ['w-[50.5%]', 0.505],
+  ];
+  for (const [cls, expected] of cases) {
+    const ir = makeEmptyIR();
+    parseSizing([cls], ir);
+    assert.equal(ir.widthMode, 'FILL', cls);
+    assert.ok(
+      Math.abs((ir.widthFraction ?? -1) - expected) < 1e-9,
+      `${cls} → widthFraction ${expected} (got ${ir.widthFraction})`,
+    );
+  }
+}
+
+{
+  const ir = makeEmptyIR();
+  parseSizing(['h-[40%]'], ir);
+  assert.equal(ir.heightMode, 'FILL', 'h-[40%] → heightMode=FILL');
+  assert.ok(
+    Math.abs((ir.heightFraction ?? -1) - 0.4) < 1e-9,
+    'h-[40%] → heightFraction=0.4',
+  );
+}
+
+// Out-of-range percents clamp to [0, 1].
+{
+  const ir = makeEmptyIR();
+  parseSizing(['w-[250%]'], ir);
+  assert.equal(ir.widthFraction, 1, 'w-[250%] clamps to 1');
+}
+
+// ---------------------------------------------------------------------------
+// min-h-* / min-w-* — pixel floors. shadcn Textarea uses `min-h-20` to keep
+// a multi-line area visible even when empty; the renderer enforces this
+// via Figma's auto-layout minHeight property plus a resize floor.
+// ---------------------------------------------------------------------------
+{
+  const cases: Array<[string, 'minHeight' | 'minWidth', number]> = [
+    ['min-h-20', 'minHeight', 80],
+    ['min-h-10', 'minHeight', 40],
+    ['min-h-[120px]', 'minHeight', 120],
+    ['min-h-[8rem]', 'minHeight', 128],
+    ['min-w-32', 'minWidth', 128],
+    ['min-w-[8rem]', 'minWidth', 128],
+  ];
+  for (const [cls, key, expected] of cases) {
+    const ir = makeEmptyIR();
+    parseSizing([cls], ir);
+    assert.equal(ir[key], expected, `${cls} → ir.${key}=${expected}`);
+  }
+}
+
+// min-h-screen is already special-cased upstream (FILL mode); make sure the
+// new min-h-N matcher doesn't shadow it.
+{
+  const ir = makeEmptyIR();
+  parseSizing(['min-h-screen'], ir);
+  assert.equal(ir.heightMode, 'FILL', 'min-h-screen still maps to FILL');
+  assert.equal(ir.minHeight, undefined, 'min-h-screen does NOT set a pixel minHeight');
+}
+
+console.log('layout-sizing-regression: ok');

package/scanner/layout-spacing-regression.ts

@@ -0,0 +1,135 @@
+import assert from 'node:assert/strict';
+import { makeEmptyIR } from '../src/layout/parser/ir';
+import { resolveSpacing } from '../src/layout/parser/spacing-scale';
+import { parseGap, parsePadding } from '../src/layout/parser/spacing';
+
+/**
+ * Locks in the Tailwind spacing → LayoutIR mapping that previously
+ * lived inside LayoutParser as private static methods. Phase 2 of the
+ * layout-parser split moved this logic into `parser/spacing.ts` and
+ * `parser/spacing-scale.ts` — this fixture catches accidental
+ * behavioural regressions introduced by future edits to either file.
+ */
+
+// ---------------------------------------------------------------------------
+// resolveSpacing — pure value resolution
+// ---------------------------------------------------------------------------
+{
+  // Tailwind scale
+  assert.equal(resolveSpacing('0'), 0);
+  assert.equal(resolveSpacing('px'), 1);
+  assert.equal(resolveSpacing('0.5'), 2);
+  assert.equal(resolveSpacing('1'), 4);
+  assert.equal(resolveSpacing('4'), 16);
+  assert.equal(resolveSpacing('8'), 32);
+  assert.equal(resolveSpacing('96'), 384);
+
+  // Arbitrary values
+  assert.equal(resolveSpacing('[12px]'), 12);
+  assert.equal(resolveSpacing('[1rem]'), 16);
+  assert.equal(resolveSpacing('[1.5rem]'), 24);
+  assert.equal(resolveSpacing('[2em]'), 32);
+  assert.equal(resolveSpacing('[24]'), 24); // unitless arbitrary defaults to px
+
+  // Bare numbers off the scale → multiplied by 4
+  assert.equal(resolveSpacing('100'), 400);
+
+  // Unknown
+  assert.equal(resolveSpacing('???'), 0);
+}
+
+// ---------------------------------------------------------------------------
+// parseGap — gap-* / gap-x-* / gap-y-* / space-x-* / space-y-*
+// ---------------------------------------------------------------------------
+{
+  // gap-N sets all three
+  const ir = makeEmptyIR();
+  parseGap(['gap-4'], ir);
+  assert.equal(ir.gap, 16);
+  assert.equal(ir.gapX, 16);
+  assert.equal(ir.gapY, 16);
+}
+{
+  // gap-x in a HORIZONTAL layout becomes the primary `ir.gap`
+  const ir = makeEmptyIR();
+  ir.layoutMode = 'HORIZONTAL';
+  parseGap(['gap-x-2'], ir);
+  assert.equal(ir.gap, 8);
+  assert.equal(ir.gapX, 8);
+  assert.equal(ir.gapY, undefined);
+}
+{
+  // gap-x in a VERTICAL layout sets gapX but does NOT update primary gap
+  const ir = makeEmptyIR();
+  ir.layoutMode = 'VERTICAL';
+  parseGap(['gap-x-2'], ir);
+  assert.equal(ir.gap, 0);
+  assert.equal(ir.gapX, 8);
+}
+{
+  // gap-y in VERTICAL flow becomes primary gap
+  const ir = makeEmptyIR();
+  ir.layoutMode = 'VERTICAL';
+  parseGap(['gap-y-3'], ir);
+  assert.equal(ir.gap, 12);
+  assert.equal(ir.gapY, 12);
+}
+{
+  // space-x in HORIZONTAL becomes gap; space-y in HORIZONTAL is ignored
+  const ir = makeEmptyIR();
+  ir.layoutMode = 'HORIZONTAL';
+  parseGap(['space-x-4', 'space-y-8'], ir);
+  assert.equal(ir.gap, 16);
+}
+{
+  // Arbitrary value in gap
+  const ir = makeEmptyIR();
+  parseGap(['gap-[10px]'], ir);
+  assert.equal(ir.gap, 10);
+  assert.equal(ir.gapX, 10);
+  assert.equal(ir.gapY, 10);
+}
+
+// ---------------------------------------------------------------------------
+// parsePadding — p-* / px-* / py-* / pt/pr/pb/pl-*
+// ---------------------------------------------------------------------------
+{
+  // p-N sets all four
+  const ir = makeEmptyIR();
+  parsePadding(['p-6'], ir);
+  assert.equal(ir.paddingTop, 24);
+  assert.equal(ir.paddingRight, 24);
+  assert.equal(ir.paddingBottom, 24);
+  assert.equal(ir.paddingLeft, 24);
+}
+{
+  // px-N + py-N + per-side overrides
+  const ir = makeEmptyIR();
+  parsePadding(['px-4', 'py-2', 'pt-8'], ir);
+  // px-4 left + right
+  assert.equal(ir.paddingLeft, 16);
+  assert.equal(ir.paddingRight, 16);
+  // py-2 sets bottom; pt-8 overrides top
+  assert.equal(ir.paddingBottom, 8);
+  assert.equal(ir.paddingTop, 32);
+}
+{
+  // Arbitrary padding
+  const ir = makeEmptyIR();
+  parsePadding(['p-[20px]'], ir);
+  assert.equal(ir.paddingTop, 20);
+  assert.equal(ir.paddingRight, 20);
+  assert.equal(ir.paddingBottom, 20);
+  assert.equal(ir.paddingLeft, 20);
+}
+{
+  // pl/pr individual
+  const ir = makeEmptyIR();
+  parsePadding(['pl-3', 'pr-5'], ir);
+  assert.equal(ir.paddingLeft, 12);
+  assert.equal(ir.paddingRight, 20);
+  assert.equal(ir.paddingTop, 0);
+  assert.equal(ir.paddingBottom, 0);
+}
+
+console.log('layout-spacing-regression: ok');

package/scanner/local-const-className-regression.ts

@@ -0,0 +1,331 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: function-body-local `const` declarations whose initializer
+ * depends on a prop value must be resolved when the identifier is
+ * referenced in a child JSX `className`. Without this, the common pattern
+ *
+ *     const StatusPill = ({ sourceLabel }) => {
+ *       const dotClass =
+ *         sourceLabel === "db"   ? "bg-emerald-500"
+ *       : sourceLabel === "live" ? "bg-sky-400"
+ *                                : "bg-muted-foreground";
+ *       return <span className={cn("h-2 w-2 rounded-full", dotClass)} />;
+ *     };
+ *
+ * collapses to just `"h-2 w-2 rounded-full"` in the scanned output —
+ * the conditional color silently disappears.
+ *
+ * History: the inkbridge greenhouse-app `DataSourcesCard` shipped this
+ * pattern for its source-status pill. Stories passed `overallSourceLabel:
+ * "live"`, the runtime evaluated `dotClass = "bg-sky-400"`, but Figma
+ * rendered every pill with a black dot (the `bg-muted-foreground` fallback
+ * was being picked up incorrectly because the `cn(base, dotClass)` call
+ * lost the `dotClass` argument entirely).
+ *
+ * Root cause: `resolveExpressionValue` looked up identifiers in
+ * `propsContext` (function params), then fell back to
+ * `SourceFile.getVariableDeclaration` — which only searches MODULE-LEVEL
+ * declarations. Function-body `const`s were invisible.
+ *
+ * Fix: walk ancestor scopes (Block / CaseClause / DefaultClause) from the
+ * identifier site outward and resolve the matching `const`'s initializer
+ * against the current `propsContext`. This is the universal version of the
+ * pattern — applies to any local-const-derived className, not just pill
+ * colors.
+ */
+
+interface JsxNodeLike {
+  type: 'element' | 'text';
+  tagName?: string;
+  content?: string;
+  props?: Record<string, unknown>;
+  children?: JsxNodeLike[];
+}
+
+interface TestScannerView {
+  project: import('ts-morph').Project;
+  extractComponentJsxTree: (
+    sourceFile: import('ts-morph').SourceFile,
+    componentName: string,
+  ) => JsxNodeLike | null;
+}
+
+function makeScanner(): TestScannerView {
+  return new ComponentScanner({
+    componentPaths: [],
+    filePattern: '*.tsx',
+    exclude: [],
+  }) as unknown as TestScannerView;
+}
+
+function fixturePath(relative: string): string {
+  return path.resolve(process.cwd(), 'tools/figma-plugin/scanner/__fixtures__', relative);
+}
+
+function findElement(node: JsxNodeLike | null, tag: string): JsxNodeLike | null {
+  if (!node || node.type !== 'element') return null;
+  if (node.tagName === tag) return node;
+  for (const child of node.children || []) {
+    const found = findElement(child, tag);
+    if (found) return found;
+  }
+  return null;
+}
+
+function classList(node: JsxNodeLike | null): string[] {
+  const cls = node?.props?.className;
+  if (typeof cls !== 'string') return [];
+  return cls.split(/\s+/).filter(Boolean);
+}
+
+const scanner = makeScanner();
+
+// ---------------------------------------------------------------------------
+// Case 1: the canonical StatusPill shape. A wrapper component renders a
+// local-defined inner component with a literal prop value. The inner has a
+// local `const dotClass = sourceLabel === "..." ? "class" : ...` whose
+// resolved class must appear in the rendered `<span>`'s className.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-classname-status-pill.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      const StatusPill = ({ sourceLabel }: { sourceLabel: "db" | "live" | "inactive" }) => {
+        const dotClass =
+          sourceLabel === "db"
+            ? "bg-emerald-500"
+            : sourceLabel === "live"
+              ? "bg-sky-400"
+              : "bg-muted-foreground";
+        return <span data-slot="dot" className={cn("h-2 w-2 rounded-full", dotClass)} />;
+      };
+
+      export function Card() {
+        return <StatusPill sourceLabel="live" />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const dot = findElement(tree, 'span');
+  assert.ok(dot, 'must find the rendered <span>');
+  const classes = classList(dot);
+  assert.ok(
+    classes.includes('bg-sky-400'),
+    `dot must inherit bg-sky-400 from the "live" branch of the local-const ternary; got: ${classes.join(' ')}`,
+  );
+  assert.ok(classes.includes('h-2'), 'base utilities must survive cn() resolution');
+  assert.ok(classes.includes('rounded-full'), 'base utilities must survive cn() resolution');
+  // The non-chosen branches must NOT appear.
+  assert.ok(!classes.includes('bg-emerald-500'), 'losing branch "db" must not appear');
+  assert.ok(!classes.includes('bg-muted-foreground'), 'losing branch fallback must not appear');
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: literal pass-through with a different prop name. Verifies the
+// resolver picks the right branch when a wrapper forwards a literal value
+// (the StatusPill shape but a different name, to catch regressions tied to
+// hard-coded identifier matching).
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-classname-passthrough.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      const StatusPill = ({ tone }: { tone: "ok" | "warn" }) => {
+        const dotClass = tone === "warn" ? "bg-amber-500" : "bg-emerald-500";
+        return <span className={cn("dot", dotClass)} />;
+      };
+
+      export function Card() {
+        return <StatusPill tone="warn" />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const dot = findElement(tree, 'span');
+  assert.ok(dot, 'must find the rendered <span>');
+  const classes = classList(dot);
+  assert.ok(
+    classes.includes('bg-amber-500'),
+    `the "warn" branch must be selected; got: ${classes.join(' ')}`,
+  );
+  assert.ok(!classes.includes('bg-emerald-500'), 'the losing branch must not appear');
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: forward-reference TDZ. A const declared AFTER the JSX reference
+// site in the same scope MUST NOT be picked up — that would resolve a
+// real TDZ error as if it succeeded, masking bugs.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-classname-tdz.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      export function Card() {
+        // Reference comes BEFORE the declaration — JS would throw at runtime.
+        // The scanner must not silently "fix" it.
+        // @ts-ignore — intentional TDZ for the test.
+        const out = <span className={cn("base", lateClass)} />;
+        const lateClass = "should-not-appear";
+        return out;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const span = findElement(tree, 'span');
+  assert.ok(span, 'must find <span>');
+  const classes = classList(span);
+  assert.ok(
+    !classes.includes('should-not-appear'),
+    'forward-declared const must not be resolved (TDZ semantics)',
+  );
+  assert.ok(classes.includes('base'), 'literal class survives');
+}
+
+// ---------------------------------------------------------------------------
+// Case 4: cycle protection. `const A = B` and `const B = A` must not
+// infinite-loop — both should resolve to undefined and the className
+// should fall back to just the literal base.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-classname-cycle.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      export function Card() {
+        const A = B;
+        const B = A;
+        return <span className={cn("base", A)} />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const span = findElement(tree, 'span');
+  assert.ok(span, 'must find <span>');
+  const classes = classList(span);
+  assert.ok(classes.includes('base'), 'literal class survives cycle protection');
+  // A and B are mutually recursive — neither should resolve to a literal
+  // string. The cn() call should silently drop the unresolved arg.
+  assert.equal(classes.length, 1, `only the literal "base" should remain; got: ${classes.join(' ')}`);
+}
+
+// ---------------------------------------------------------------------------
+// Case 5: scope-locality. Two functions in the same file both have a local
+// `const colorClass = ...` with different values. The resolver must pick
+// the one in the enclosing scope, not bleed across functions.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-classname-scope.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      const Inner = () => {
+        const colorClass = "text-sky-500";
+        return <span data-which="inner" className={cn("a", colorClass)} />;
+      };
+
+      export function Card() {
+        const colorClass = "text-rose-500";
+        return (
+          <div>
+            <span data-which="outer" className={cn("b", colorClass)} />
+            <Inner />
+          </div>
+        );
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+
+  // Find the two <span>s by their data-which marker.
+  function findByMarker(node: JsxNodeLike | null, value: string): JsxNodeLike | null {
+    if (!node || node.type !== 'element') return null;
+    if (node.props?.['data-which'] === value) return node;
+    for (const child of node.children || []) {
+      const found = findByMarker(child, value);
+      if (found) return found;
+    }
+    return null;
+  }
+  const outer = findByMarker(tree, 'outer');
+  const inner = findByMarker(tree, 'inner');
+  assert.ok(outer, 'outer <span> must be present');
+  assert.ok(inner, 'inner <span> must be present');
+
+  const outerClasses = classList(outer);
+  const innerClasses = classList(inner);
+  assert.ok(outerClasses.includes('text-rose-500'), `outer scope wins for outer span; got: ${outerClasses.join(' ')}`);
+  assert.ok(!outerClasses.includes('text-sky-500'), 'inner-scope value must not bleed into outer span');
+  assert.ok(innerClasses.includes('text-sky-500'), `inner scope wins for inner span; got: ${innerClasses.join(' ')}`);
+  assert.ok(!innerClasses.includes('text-rose-500'), 'outer-scope value must not be picked when inner scope shadows');
+}
+
+// ---------------------------------------------------------------------------
+// Case 6: text-children expressions. `<span>{statusText}</span>` where
+// `statusText` is a local-const ternary must render the resolved text.
+// History: the original DataSourcesCard fix landed for className identifiers
+// but the main `buildJsxTree` flow had a separate, narrower lookup for JSX
+// text-children that only checked module-level vars — so the "Live - DB"
+// label inside the StatusPill was missing even after the dot color worked.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('local-const-text-children.tsx'),
+    `
+      const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+      const StatusPill = ({ sourceLabel }: { sourceLabel: "db" | "live" | "inactive" }) => {
+        const statusText =
+          sourceLabel === "db"
+            ? "Live - DB"
+            : sourceLabel === "live"
+              ? "Live - API"
+              : "Inactive";
+        return <span data-slot="label">{statusText}</span>;
+      };
+
+      export function Card() {
+        return <StatusPill sourceLabel="db" />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const span = findElement(tree, 'span');
+  assert.ok(span, 'must find <span>');
+  const textChildren = (span.children || []).filter((c) => c.type === 'text');
+  const combined = textChildren.map((c) => c.content ?? '').join('');
+  assert.ok(
+    combined.includes('Live - DB'),
+    `text child must resolve to "Live - DB" via local-const lookup; got: ${JSON.stringify(textChildren)}`,
+  );
+}
+
+console.log('local-const-className-regression: PASS (6 cases)');