inkbridge 0.1.0-beta.20 → 0.1.0-beta.21

package/scanner/font-family-extract-regression.ts

@@ -0,0 +1,113 @@
+import assert from 'node:assert/strict';
+
+import { extractFontName } from '../src/tokens/tokens';
+
+/**
+ * Regression: `extractFontName` in `src/tokens/tokens.ts` walks a
+ * comma-separated font stack and returns the first entry that ISN'T a
+ * system keyword / generic family / web-safe fallback / emoji-fallback
+ * font. The returned name is what's passed to `figma.loadFontAsync` —
+ * a wrong pick (e.g. "Apple Color Emoji" from Tailwind's default sans
+ * stack, or "ui-sans-serif" from a stack with no quoted font) throws
+ * "couldn't load font" inside the Figma sandbox.
+ *
+ * Bug that motivated this fixture: Tailwind's default sans-serif
+ * value is `ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+ * 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`. The original
+ * keyword set didn't include the emoji-fallback entries, so the resolver
+ * skipped past the three generic-family entries and picked "Apple Color
+ * Emoji" as the body font. The fix adds the four emoji fallbacks to
+ * SYSTEM_FONT_KEYWORDS.
+ */
+
+// ---------------------------------------------------------------------------
+// Quoted intended font in a Tailwind-style stack
+// ---------------------------------------------------------------------------
+
+assert.equal(
+  extractFontName('"Open Sans", ui-sans-serif, system-ui, sans-serif'),
+  'Open Sans',
+  'quoted family wins over generic-family fallbacks',
+);
+
+assert.equal(
+  extractFontName("'Inter', system-ui, sans-serif"),
+  'Inter',
+  'single-quoted name is unwrapped',
+);
+
+// ---------------------------------------------------------------------------
+// Tailwind default sans stack — the canonical "emoji bug" case
+// ---------------------------------------------------------------------------
+
+const tailwindDefaultSans =
+  "ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'";
+
+assert.equal(
+  extractFontName(tailwindDefaultSans),
+  null,
+  'stack of only generic-families + emoji-fallbacks returns null so the caller falls back',
+);
+
+// Variants of the same emoji-fallback names with/without quotes
+assert.equal(extractFontName('Apple Color Emoji'), null);
+assert.equal(extractFontName('"Apple Color Emoji"'), null);
+assert.equal(extractFontName("'Segoe UI Emoji'"), null);
+assert.equal(extractFontName('Noto Color Emoji'), null);
+assert.equal(extractFontName('Segoe UI Symbol'), null);
+
+// Case-insensitive: extractFontName lowercases before comparing
+assert.equal(extractFontName('APPLE COLOR EMOJI'), null);
+
+// Real-world: intended font wins even with the emoji fallbacks appended
+assert.equal(
+  extractFontName(`"Open Sans", ${tailwindDefaultSans}`),
+  'Open Sans',
+  'quoted intended font wins over the full Tailwind default tail',
+);
+
+// ---------------------------------------------------------------------------
+// Generic-family / system keywords are skipped
+// ---------------------------------------------------------------------------
+
+assert.equal(extractFontName('ui-sans-serif'), null);
+assert.equal(extractFontName('system-ui'), null);
+assert.equal(extractFontName('sans-serif'), null);
+assert.equal(extractFontName('-apple-system'), null);
+assert.equal(
+  extractFontName('Arial, Helvetica, sans-serif'),
+  null,
+  'web-safe-only stacks return null — the consumer hadn\'t picked a design font',
+);
+
+// ---------------------------------------------------------------------------
+// CSS variable references — return the derived name if no intended font
+// is present, but a real font name still wins
+// ---------------------------------------------------------------------------
+
+assert.equal(
+  extractFontName('var(--font-open-sans), ui-sans-serif, sans-serif'),
+  'Open Sans',
+  'var(--font-foo) derives a font name when nothing else matches',
+);
+
+assert.equal(
+  extractFontName('var(--font-geist-mono), monospace'),
+  'Geist Mono',
+);
+
+assert.equal(
+  extractFontName('"Inter", var(--font-fallback), sans-serif'),
+  'Inter',
+  'real quoted font beats var() fallback',
+);
+
+// ---------------------------------------------------------------------------
+// Edge cases
+// ---------------------------------------------------------------------------
+
+assert.equal(extractFontName(''), null);
+assert.equal(extractFontName(undefined), null);
+assert.equal(extractFontName(null), null);
+
+console.log('font-family-extract-regression: ok');

package/scanner/framework-adapter-shadcn-regression.ts

@@ -382,4 +382,99 @@ function findBySlot(root: NodeIR, slot: string): Array<Extract<NodeIR, { kind: '
   assert.ok(thumbs[0].classes.includes('left-[0%]'), 'no value → thumb at 0%');
 }
 
-console.log('framework-adapter-shadcn-regression: PASS (3 registry + 4 leaf + 4 avatar + 5 progress + 5 slider cases)');
+// ---------------------------------------------------------------------------
+// (i) Radix ScrollArea — strip runtime control children
+// ---------------------------------------------------------------------------
+//
+// `<ScrollAreaPrimitive.Root>` wraps a viewport + a scrollbar + thumb +
+// corner. The scrollbar/thumb/corner only render at runtime in response
+// to scroll position; in a static design-system render they show up as
+// visible content blobs (a dark capsule over the viewport's content
+// area, which is what greenhouse-app's ScrollArea story exposed). The
+// adapter drops them so only the Viewport survives.
+
+function scrollAreaTree(extraScrollbarClasses: string[] = []): NodeIR {
+  return el({}, [], [
+    {
+      kind: 'element',
+      tagName: 'ScrollAreaPrimitive.Root',
+      tagLower: 'div',
+      props: {},
+      classes: ['relative', 'overflow-hidden'],
+      children: [
+        {
+          kind: 'element',
+          tagName: 'ScrollAreaPrimitive.Viewport',
+          tagLower: 'div',
+          props: {},
+          classes: ['h-full', 'w-full'],
+          children: [el({}, ['p-3'], [])],
+        },
+        {
+          kind: 'element',
+          tagName: 'ScrollAreaPrimitive.Scrollbar',
+          tagLower: 'div',
+          props: { orientation: 'vertical' },
+          classes: ['flex', 'p-0.5', 'sm:bg-black/60', ...extraScrollbarClasses],
+          children: [{
+            kind: 'element',
+            tagName: 'ScrollAreaPrimitive.Thumb',
+            tagLower: 'div',
+            props: {},
+            classes: ['flex-1', 'rounded-full', 'bg-muted-foreground/40'],
+            children: [],
+          }],
+        },
+        {
+          kind: 'element',
+          tagName: 'ScrollAreaPrimitive.Corner',
+          tagLower: 'div',
+          props: {},
+          classes: [],
+          children: [],
+        },
+      ],
+    } as unknown as NodeIR,
+  ]);
+}
+
+// (i1) Scrollbar + Thumb + Corner are removed; Viewport is flattened
+// (its children become Root's direct children).
+{
+  const tree = scrollAreaTree();
+  const next = applyShadcnAdapter(tree);
+  const root = (next as { children: NodeIR[] }).children[0] as { children: NodeIR[] };
+  assert.equal(
+    root.children.length,
+    1,
+    'Root should have one child after Viewport flatten (the Viewport content was a single styled div)',
+  );
+  // The surviving child is the *content of* the Viewport, not the
+  // Viewport wrapper itself. The Viewport carried no visual styling
+  // worth keeping and Figma was painting it as a ghost-bordered
+  // duplicate of Root.
+  assert.notEqual(
+    (root.children[0] as { tagName?: string }).tagName,
+    'ScrollAreaPrimitive.Viewport',
+    'Viewport wrapper must be flattened — its children move up to Root',
+  );
+  assert.equal(
+    (root.children[0] as { tagName?: string }).tagName,
+    'div',
+    'the surviving child is the original Viewport content (a styled <div>)',
+  );
+}
+
+// (i2) Viewport content's own children are preserved unchanged.
+{
+  const tree = scrollAreaTree();
+  const next = applyShadcnAdapter(tree);
+  const root = (next as { children: NodeIR[] }).children[0] as { children: { classes: string[] }[] };
+  assert.deepEqual(
+    root.children[0].classes,
+    ['p-3'],
+    "the inner content's class list should be preserved verbatim after flatten",
+  );
+}
+
+console.log('framework-adapter-shadcn-regression: PASS (3 registry + 4 leaf + 4 avatar + 5 progress + 5 slider + 2 scroll-area cases)');

package/scanner/grid-cols-extraction-regression.ts

@@ -0,0 +1,110 @@
+import assert from 'node:assert/strict';
+
+import { extractGridColumns } from '../src/layout';
+
+/**
+ * Regression: `extractGridColumns` is the single source of truth for
+ * "how many columns does this Tailwind class list specify?" — consumed
+ * by both the story-bench and preview-builder reflow pipelines.
+ *
+ * The function intentionally returns `1` for plain `grid` (no explicit
+ * `grid-cols-N`) because Tailwind's default for `display: grid` is
+ * single-column flow, and the value is useful for responsive previews
+ * (so `sm:grid-cols-3` can flip the layout at a breakpoint). The
+ * downstream hazard: `applyGridColumnsIfPossible` would
+ * unconditionally flip the frame to `HORIZONTAL` + `WRAP` +
+ * `counterAxisSizingMode = AUTO`. A "1-column" reflow on a VERTICAL
+ * bench produces a single Hug row of children laid side-by-side
+ * instead of stacked.
+ *
+ * History: this bug class recurred at multiple call sites — every
+ * place that forwarded a `cols` value to `applyGridColumnsWithReflow`
+ * had to remember the `> 1` guard. preview-builder.ts:668 had the
+ * guard; story-builder.ts:491 didn't, so every `<div className="grid
+ * w-[Npx] gap-N">` story root rendered as a horizontal Hug-width row.
+ * The guard now lives inside `applyGridColumnsIfPossible` itself, so
+ * the contract is "forward whatever cols you extracted, the helper
+ * decides".
+ *
+ * This file locks the function's return values so the helper's
+ * `cols <= 1` early-return keeps its meaning. Drift in either
+ * direction (returning `null` for plain grid, or returning `> 1` for a
+ * single-column source) would either silently break responsive
+ * previews or re-introduce the horizontal-bench bug.
+ */
+
+// Plain `grid` with no explicit columns → implicit single-column flow.
+// Call sites MUST guard with `> 1` before applying a column reflow.
+assert.equal(
+  extractGridColumns(['grid']),
+  1,
+  'plain `grid` → 1 (Tailwind default single-column flow)',
+);
+assert.equal(
+  extractGridColumns(['grid', 'gap-2']),
+  1,
+  '`grid gap-N` → 1',
+);
+assert.equal(
+  extractGridColumns(['grid', 'w-[360px]', 'gap-2']),
+  1,
+  '`grid w-[N] gap-N` → 1 (the FormField story shape)',
+);
+assert.equal(
+  extractGridColumns(['inline-grid']),
+  1,
+  'plain `inline-grid` → 1',
+);
+
+// Explicit `grid-cols-N` → that number, and downstream reflow IS
+// expected to fire.
+assert.equal(
+  extractGridColumns(['grid', 'grid-cols-2']),
+  2,
+  '`grid grid-cols-2` → 2',
+);
+assert.equal(
+  extractGridColumns(['grid', 'grid-cols-3', 'gap-4']),
+  3,
+  '`grid grid-cols-3 gap-N` → 3',
+);
+assert.equal(
+  extractGridColumns(['grid', 'grid-cols-12']),
+  12,
+  'multi-digit column count parsed',
+);
+
+// No grid at all → null. Call sites short-circuit without ambiguity.
+assert.equal(
+  extractGridColumns(['flex', 'flex-col', 'gap-2']),
+  null,
+  'flex layouts → null',
+);
+assert.equal(
+  extractGridColumns(['p-4', 'rounded-md']),
+  null,
+  'no display utility → null',
+);
+assert.equal(
+  extractGridColumns([]),
+  null,
+  'empty class list → null',
+);
+assert.equal(
+  extractGridColumns(undefined),
+  null,
+  'undefined input → null',
+);
+
+// Responsive `sm:grid-cols-N` without a base `grid-cols-N` — the function
+// reports the responsive column count when the BASE already has `grid`.
+// (The bench renders at `base` width by default, so without an
+// `availableWidth` hint, the function returns the responsive value as
+// the prevailing column count.)
+assert.equal(
+  extractGridColumns(['grid', 'sm:grid-cols-3']),
+  3,
+  'responsive grid-cols (no base cols) → responsive value',
+);
+
+console.log('grid-cols-extraction-regression: PASS (11 cases)');

package/scanner/input-range-regression.ts

@@ -0,0 +1,217 @@
+import assert from 'node:assert/strict';
+
+import { transformInputNodes } from '../src/tailwind/node-ir';
+import type { NodeIR } from '../src/tailwind/node-ir';
+
+/**
+ * Regression: `<input type="range">` is rewritten by `transformInputNodes`
+ * in `src/tailwind/node-ir.ts` into a synthetic 3-child tree (track +
+ * filled indicator + thumb). Locks:
+ *
+ *   1. The rewrite fires only for `type="range"` (other input types pass
+ *      through untouched).
+ *   2. Geometry is `((value - min) / (max - min)) * 100`.
+ *   3. `defaultValue` is honored when `value` is missing.
+ *   4. `disabled` adds `opacity-50` to the wrapper.
+ *   5. Sizing classes from the consumer (`w-full`, paddings) survive on
+ *      the wrapper.
+ *
+ * Why this fixture exists: a previous version of the plugin had no
+ * rendering path for `type="range"`. The default input branch in
+ * `ui-builder.ts` reads `value/defaultValue/placeholder` as text — for
+ * range that meant either a tiny "5" text node or, more often, an
+ * infinite hang as downstream layout deferred-pass solvers stalled on a
+ * 0-content frame with `w-full accent-primary`. The transform produces
+ * a real visual structure the existing pipeline renders cleanly.
+ */
+
+// Minimal helpers (props are always stringified by the scanner — mirror
+// that here so assertions match real-world IR input).
+
+function inputEl(props: Record<string, string>, classes: string[] = []): NodeIR {
+  return {
+    kind: 'element',
+    tagName: 'input',
+    tagLower: 'input',
+    props,
+    classes,
+    children: [],
+  };
+}
+
+function rewrite(node: NodeIR): NodeIR {
+  return transformInputNodes(node);
+}
+
+function expectElement(node: NodeIR): Extract<NodeIR, { kind: 'element' }> {
+  assert.equal(node.kind, 'element', 'expected element node');
+  return node as Extract<NodeIR, { kind: 'element' }>;
+}
+
+// ---------------------------------------------------------------------------
+// (1) Bare `<input type="range">` with value/min/max → track + filled + thumb
+// ---------------------------------------------------------------------------
+
+{
+  const input = inputEl(
+    { type: 'range', min: '0', max: '100', value: '25' },
+    ['w-full', 'accent-primary'],
+  );
+  const out = rewrite(input);
+  const wrap = expectElement(out);
+
+  assert.equal(wrap.tagLower, 'div', 'rewrite produces a div wrapper');
+  // Structure mirrors shadcn Slider: track (flow child, contains filled),
+  // thumb (absolute sibling). Two top-level children, NOT three.
+  assert.equal(wrap.children.length, 2, 'wrapper has track + thumb');
+
+  // Consumer's sizing classes preserved on the wrapper; layout classes added.
+  assert.ok(wrap.classes.includes('w-full'), 'preserves consumer w-full');
+  assert.ok(wrap.classes.includes('relative'), 'wrapper is relative');
+  assert.ok(wrap.classes.includes('flex'), 'wrapper is flex');
+  assert.ok(wrap.classes.includes('items-center'), 'wrapper items-center');
+  assert.ok(wrap.classes.includes('h-4'), 'wrapper height set');
+
+  const [track, thumb] = wrap.children.map(expectElement);
+
+  // Track is a FLOW child (not absolute) — that's what gives the wrapper
+  // content to size against. Without this, all-absolute siblings collapse
+  // the auto-layout into a 0-content stall.
+  assert.ok(!track.classes.includes('absolute'), 'track is flow, not absolute');
+  assert.ok(track.classes.includes('w-full'), 'track full-width');
+  assert.ok(track.classes.includes('overflow-hidden'), 'track clips its fill');
+  assert.ok(track.classes.includes('bg-secondary'), 'track background neutral');
+
+  // Filled portion is a flow child of the track (not a sibling of it).
+  // No absolute positioning — sits at the left edge by natural flow.
+  assert.equal(track.children.length, 1, 'track has one filled child');
+  const filled = expectElement(track.children[0]);
+  assert.ok(!filled.classes.includes('absolute'), 'filled is flow inside track');
+  assert.ok(filled.classes.includes('w-[25%]'), 'filled width matches value');
+  assert.ok(filled.classes.includes('bg-primary'), 'filled paints accent');
+
+  // Thumb: absolute sibling positioned at 25% with -translate-x-1/2.
+  // No top-N — wrapper's h-4 + flex items-center centers via static position.
+  assert.ok(thumb.classes.includes('absolute'), 'thumb is absolute');
+  assert.ok(thumb.classes.includes('left-[25%]'), 'thumb at 25%');
+  assert.ok(thumb.classes.includes('-translate-x-1/2'), 'thumb centered on point');
+  assert.ok(thumb.classes.includes('rounded-full'), 'thumb circular');
+  assert.ok(!thumb.classes.some((c) => c.startsWith('top-')),
+    'thumb has no top-N — flex items-center on wrapper handles vertical centering');
+}
+
+// ---------------------------------------------------------------------------
+// (2) Non-zero min — the case from greenhouse-app LeverageSlider
+// ---------------------------------------------------------------------------
+
+{
+  // ((5 - 1.1) / (100 - 1.1)) * 100 ≈ 3.9434...
+  const input = inputEl({ type: 'range', min: '1.1', max: '100', value: '5' });
+  const out = rewrite(input);
+  const wrap = expectElement(out);
+  const track = expectElement(wrap.children[0]);
+  const filled = expectElement(track.children[0]);
+  const thumb = expectElement(wrap.children[1]);
+
+  // Match the value the transform actually emits (two-decimal precision,
+  // trailing-zero strip). Locking exact percentage prevents silent
+  // rounding drift.
+  const widthClass = filled.classes.find((c) => c.startsWith('w-['));
+  assert.equal(widthClass, 'w-[3.94%]', `got ${widthClass}`);
+
+  const leftClass = thumb.classes.find((c) => c.startsWith('left-['));
+  assert.equal(leftClass, 'left-[3.94%]', `got ${leftClass}`);
+}
+
+// ---------------------------------------------------------------------------
+// (3) `defaultValue` honored when `value` missing
+// ---------------------------------------------------------------------------
+
+{
+  const input = inputEl({ type: 'range', min: '0', max: '100', defaultValue: '75' });
+  const out = rewrite(input);
+  const wrap = expectElement(out);
+  const track = expectElement(wrap.children[0]);
+  const filled = expectElement(track.children[0]);
+
+  assert.ok(filled.classes.includes('w-[75%]'), 'defaultValue drives width');
+}
+
+// ---------------------------------------------------------------------------
+// (4) `disabled` adds opacity-50 to wrapper
+// ---------------------------------------------------------------------------
+
+{
+  const input = inputEl({ type: 'range', min: '0', max: '100', value: '50', disabled: 'true' });
+  const out = rewrite(input);
+  const wrap = expectElement(out);
+
+  assert.ok(wrap.classes.includes('opacity-50'), 'disabled adds opacity-50');
+}
+
+{
+  // disabled="false" should NOT trigger (some libs serialize false this way).
+  const input = inputEl({ type: 'range', min: '0', max: '100', value: '50', disabled: 'false' });
+  const out = rewrite(input);
+  const wrap = expectElement(out);
+
+  assert.ok(!wrap.classes.includes('opacity-50'), 'disabled=false does not dim');
+}
+
+// ---------------------------------------------------------------------------
+// (5) Non-range inputs pass through untouched
+// ---------------------------------------------------------------------------
+
+{
+  const before = inputEl({ type: 'text', placeholder: 'Name' }, ['h-10']);
+  const after = rewrite(before);
+  // Identity is preserved for non-range inputs (cache-friendly).
+  assert.equal(after, before, 'type=text returned by reference');
+}
+
+{
+  const before = inputEl({ type: 'number', value: '5' }, ['h-10']);
+  const after = rewrite(before);
+  assert.equal(after, before, 'type=number returned by reference');
+}
+
+// ---------------------------------------------------------------------------
+// (6) Missing value defaults to 0%
+// ---------------------------------------------------------------------------
+
+{
+  const input = inputEl({ type: 'range', min: '0', max: '100' });
+  const out = rewrite(input);
+  const wrap = expectElement(out);
+  const track = expectElement(wrap.children[0]);
+  const filled = expectElement(track.children[0]);
+
+  assert.ok(filled.classes.includes('w-[0%]'), 'missing value → 0% fill');
+}
+
+// ---------------------------------------------------------------------------
+// (7) Range inside a larger tree gets rewritten in place
+// ---------------------------------------------------------------------------
+
+{
+  const tree: NodeIR = {
+    kind: 'element',
+    tagName: 'div',
+    tagLower: 'div',
+    props: {},
+    classes: ['p-4'],
+    children: [
+      inputEl({ type: 'range', min: '0', max: '100', value: '40' }, ['w-full']),
+    ],
+  };
+  const out = rewrite(tree);
+  const outer = expectElement(out);
+  assert.equal(outer.children.length, 1);
+  const slider = expectElement(outer.children[0]);
+  assert.equal(slider.children.length, 2, 'nested range rewritten (track + thumb)');
+  const track = expectElement(slider.children[0]);
+  const filled = expectElement(track.children[0]);
+  assert.ok(filled.classes.includes('w-[40%]'), 'nested range geometry correct');
+}
+
+console.log('input-range-regression: ok');