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

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

@@ -0,0 +1,480 @@
+import assert from 'node:assert/strict';
+
+import { applyShadcnAdapter, getShadcnSlotInjections } from '../src/framework-adapters/shadcn';
+import type { NodeIR } from '../src/tailwind/node-ir';
+
+/**
+ * Regression: `src/framework-adapters/shadcn.ts` is the single source of
+ * truth for class-list patches that translate shadcn / base-ui runtime
+ * CSS into Tailwind classes the plugin can see — patches the consumer's
+ * JSX *should* have had if those frameworks didn't use a stylesheet to
+ * do half the layout.
+ *
+ * This file locks the contract:
+ *   1. The registry has the slots we expect (so a casual edit can't
+ *      silently delete `avatar-image`'s `absolute inset-0` patch).
+ *   2. `applyShadcnAdapter` actually injects them onto the matching node.
+ *   3. Non-matching nodes are returned by reference (cache-friendly).
+ *   4. Recursion reaches into nested children.
+ *   5. Existing classes are preserved; duplicates are de-duped.
+ *
+ * Adding a new slot? Add an entry here AND in
+ * `src/framework-adapters/shadcn.ts:SLOT_CLASS_INJECTIONS` AND a brief
+ * note in `tools/figma-plugin/.ai/framework-adapters.md`. All three
+ * together — registry, test, doc — keep this from drifting.
+ *
+ * Adding a whole new framework adapter (MUI, Headless UI, ...) is a new
+ * file under `src/framework-adapters/`, one line in the dispatcher
+ * `index.ts`, and a sibling regression file mirroring this one.
+ */
+
+function el(props: Record<string, string>, classes: string[] = [], children: NodeIR[] = []): NodeIR {
+  return {
+    kind: 'element',
+    tagName: 'div',
+    tagLower: 'div',
+    props,
+    classes,
+    children,
+  } as unknown as NodeIR;
+}
+
+// ---------------------------------------------------------------------------
+// Registry contents
+// ---------------------------------------------------------------------------
+
+// avatar-image: base-ui pins `position: absolute; inset: 0` via stylesheet.
+// We can't see CSS, so we re-add the equivalent Tailwind classes here.
+{
+  const extras = getShadcnSlotInjections('avatar-image');
+  assert.ok(extras, 'avatar-image slot must be registered');
+  assert.deepEqual(
+    [...(extras as readonly string[])],
+    ['absolute', 'inset-0'],
+    'avatar-image injection must be ["absolute", "inset-0"]',
+  );
+}
+
+// Unknown slots: null (so the recursion is a no-op).
+assert.equal(getShadcnSlotInjections('not-a-real-slot'), null, 'unknown slot returns null');
+assert.equal(getShadcnSlotInjections(''), null, 'empty slot returns null');
+
+// ---------------------------------------------------------------------------
+// applyShadcnAdapter — class injection on the matching node
+// ---------------------------------------------------------------------------
+
+// (a) Matching slot: classes get the registered patches appended.
+{
+  const before = el({ 'data-slot': 'avatar-image', src: '/x.svg' }, ['aspect-square', 'size-full']);
+  const after = applyShadcnAdapter(before);
+  assert.notEqual(after, before, 'matching slot returns a new node (immutable update)');
+  const afterEl = after as Extract<NodeIR, { kind: 'element' }>;
+  assert.deepEqual(
+    afterEl.classes,
+    ['aspect-square', 'size-full', 'absolute', 'inset-0'],
+    'existing classes preserved; injection appended in order',
+  );
+}
+
+// (b) Already has the classes: no duplication, same-reference return.
+{
+  const before = el(
+    { 'data-slot': 'avatar-image', src: '/x.svg' },
+    ['absolute', 'inset-0', 'size-full'],
+  );
+  const after = applyShadcnAdapter(before);
+  assert.equal(
+    after,
+    before,
+    'when all injection classes are already present, return same reference (cache-friendly)',
+  );
+}
+
+// (c) Element without data-slot: untouched.
+{
+  const before = el({}, ['flex', 'gap-4']);
+  const after = applyShadcnAdapter(before);
+  assert.equal(after, before, 'no data-slot → same reference');
+}
+
+// (d) Element with unknown data-slot: untouched.
+{
+  const before = el({ 'data-slot': 'unknown-slot' }, ['flex']);
+  const after = applyShadcnAdapter(before);
+  assert.equal(after, before, 'unrecognised slot → same reference');
+}
+
+// ---------------------------------------------------------------------------
+// Recursion — reaches into children, returns same ref when nothing changes
+// ---------------------------------------------------------------------------
+
+// (e) Avatar tree with a real image src: Image gets the injection, Fallback is
+// DROPPED (shadcn's runtime hides Fallback when Image loads — we can't observe
+// load state but we can observe "there is a real-looking src").
+{
+  const image = el({ 'data-slot': 'avatar-image', src: '/x.svg' }, ['aspect-square', 'size-full']);
+  const fallback = el({ 'data-slot': 'avatar-fallback' }, ['flex', 'size-full']);
+  const root = el(
+    { 'data-slot': 'avatar' },
+    ['relative', 'flex', 'size-10', 'rounded-full'],
+    [image, fallback],
+  );
+
+  const next = applyShadcnAdapter(root);
+  assert.notEqual(next, root, 'tree with a child injection / fallback drop produces a new root');
+
+  const nextRoot = next as Extract<NodeIR, { kind: 'element' }>;
+  const rootEl = root as Extract<NodeIR, { kind: 'element' }>;
+  // Root's own classes unchanged (avatar slot itself has no injection).
+  assert.deepEqual(
+    nextRoot.classes,
+    rootEl.classes,
+    'avatar-root classes unchanged (no slot registration for it)',
+  );
+
+  // Fallback dropped — only the image remains.
+  assert.equal(
+    nextRoot.children.length,
+    1,
+    'avatar-fallback dropped when avatar-image has a real src — only image remains',
+  );
+
+  // Image child has injection.
+  const nextImage = nextRoot.children[0] as Extract<NodeIR, { kind: 'element' }>;
+  assert.deepEqual(
+    nextImage.classes,
+    ['aspect-square', 'size-full', 'absolute', 'inset-0'],
+    'avatar-image child receives [absolute, inset-0] injection',
+  );
+}
+
+// (e2) Avatar tree WITHOUT an image (or image without src): Fallback survives.
+{
+  const fallback = el({ 'data-slot': 'avatar-fallback' }, ['flex', 'size-full']);
+  const root = el(
+    { 'data-slot': 'avatar' },
+    ['relative', 'flex', 'size-10', 'rounded-full'],
+    [fallback],
+  );
+
+  const next = applyShadcnAdapter(root);
+  assert.equal(next, root, 'no avatar-image → fallback kept, tree returned by reference');
+}
+
+// (e3) Avatar tree with an image whose src is just a placeholder string: Fallback survives.
+// This guards against false-positive drops when the consumer JSX has
+// `src={undefined}` (some bundlers emit the literal "src" token) or
+// `src=""`. The looksLikeImageSrc predicate must agree with the renderer's.
+{
+  const image = el({ 'data-slot': 'avatar-image', src: '' }, ['aspect-square', 'size-full']);
+  const fallback = el({ 'data-slot': 'avatar-fallback' }, ['flex', 'size-full']);
+  const root = el(
+    { 'data-slot': 'avatar' },
+    ['relative', 'flex', 'size-10', 'rounded-full'],
+    [image, fallback],
+  );
+
+  const next = applyShadcnAdapter(root);
+  const nextRoot = next as Extract<NodeIR, { kind: 'element' }>;
+  // Image still gets its class injection.
+  // Fallback survives because the image src isn't a fetchable path.
+  assert.equal(nextRoot.children.length, 2, 'empty src → fallback survives');
+}
+
+// (f) Tree with no matching slots anywhere: same reference all the way down.
+{
+  const root = el({}, ['flex'], [el({}, ['gap-4']), el({}, ['p-4'])]);
+  const next = applyShadcnAdapter(root);
+  assert.equal(next, root, 'tree with no matches → same reference (no allocation)');
+}
+
+// ---------------------------------------------------------------------------
+// Progress: indicator width derived from Root's `value` prop
+// ---------------------------------------------------------------------------
+
+function findIndicator(root: NodeIR): Extract<NodeIR, { kind: 'element' }> | null {
+  const elNode = root as Extract<NodeIR, { kind: 'element' }>;
+  if (elNode.props && elNode.props['data-slot'] === 'progress-indicator') {
+    return elNode;
+  }
+  if (!('children' in elNode) || !Array.isArray(elNode.children)) return null;
+  for (const c of elNode.children) {
+    const r = findIndicator(c);
+    if (r) return r;
+  }
+  return null;
+}
+
+function progressTree(value: string | undefined): NodeIR {
+  const props: Record<string, string> = { 'data-slot': 'progress' };
+  if (value !== undefined) props.value = value;
+  const indicator = el(
+    { 'data-slot': 'progress-indicator' },
+    ['h-full', 'bg-primary', 'transition-all'],
+  );
+  const track = el(
+    { 'data-slot': 'progress-track' },
+    ['relative', 'h-2', 'w-full', 'overflow-hidden', 'rounded-full', 'bg-primary/20'],
+    [indicator],
+  );
+  return el(props, ['flex', 'w-full', 'flex-col', 'gap-2'], [track]);
+}
+
+// (g) value="60" → indicator gets w-[60%]
+{
+  const root = progressTree('60');
+  const next = applyShadcnAdapter(root);
+  const indicator = findIndicator(next);
+  assert.ok(indicator, 'progress-indicator must still exist after adapter');
+  assert.ok(
+    indicator!.classes.includes('w-[60%]'),
+    'value="60" → w-[60%] injected on progress-indicator',
+  );
+}
+
+// (g2) value="100" → w-[100%]
+{
+  const root = progressTree('100');
+  const indicator = findIndicator(applyShadcnAdapter(root));
+  assert.ok(
+    indicator!.classes.includes('w-[100%]'),
+    'value="100" → w-[100%] (Complete state)',
+  );
+}
+
+// (g3) value="0" → w-[0%]
+{
+  const root = progressTree('0');
+  const indicator = findIndicator(applyShadcnAdapter(root));
+  assert.ok(
+    indicator!.classes.includes('w-[0%]'),
+    'value="0" → w-[0%] (Empty state)',
+  );
+}
+
+// (g4) value undefined / null → indeterminate 33%
+{
+  const root = progressTree(undefined);
+  const indicator = findIndicator(applyShadcnAdapter(root));
+  assert.ok(
+    indicator!.classes.includes('w-[33%]'),
+    'missing value → w-[33%] (Indeterminate static representation)',
+  );
+}
+
+// (g5) value out of range → clamped
+{
+  const indicator250 = findIndicator(applyShadcnAdapter(progressTree('250')));
+  assert.ok(
+    indicator250!.classes.includes('w-[100%]'),
+    'value="250" clamped to 100%',
+  );
+  const indicatorNeg = findIndicator(applyShadcnAdapter(progressTree('-10')));
+  assert.ok(
+    indicatorNeg!.classes.includes('w-[0%]'),
+    'value="-10" clamped to 0%',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Slider: defaultValue (number | number[]) → indicator + thumb positioning
+// ---------------------------------------------------------------------------
+
+function elTyped<P extends Record<string, unknown> = Record<string, string>>(
+  props: P,
+  classes: string[] = [],
+  children: NodeIR[] = [],
+): NodeIR {
+  return {
+    kind: 'element',
+    tagName: 'div',
+    tagLower: 'div',
+    props,
+    classes,
+    children,
+  } as unknown as NodeIR;
+}
+
+function sliderTree(rootProps: Record<string, unknown>): NodeIR {
+  const indicator = el({ 'data-slot': 'slider-indicator' }, ['absolute', 'h-full', 'bg-primary']);
+  const track = el(
+    { 'data-slot': 'slider-track' },
+    ['relative', 'h-1.5', 'w-full', 'overflow-hidden'],
+    [indicator],
+  );
+  const thumb = el(
+    { 'data-slot': 'slider-thumb' },
+    ['block', 'size-4', 'shrink-0', 'rounded-full'],
+  );
+  const control = el(
+    { 'data-slot': 'slider-control' },
+    ['relative', 'flex', 'h-5', 'w-full', 'grow', 'items-center'],
+    [track, thumb],
+  );
+  return elTyped(
+    Object.assign({ 'data-slot': 'slider' }, rootProps),
+    ['relative', 'flex', 'w-full', 'items-center'],
+    [control],
+  );
+}
+
+function findBySlot(root: NodeIR, slot: string): Array<Extract<NodeIR, { kind: 'element' }>> {
+  const out: Array<Extract<NodeIR, { kind: 'element' }>> = [];
+  const walk = (n: NodeIR) => {
+    const el = n as Extract<NodeIR, { kind: 'element' }>;
+    if (el.props && el.props['data-slot'] === slot) out.push(el);
+    if ('children' in el && Array.isArray(el.children)) {
+      for (const c of el.children) walk(c);
+    }
+  };
+  walk(root);
+  return out;
+}
+
+// (h) Single value (number, max=100) → indicator [0, 50%], one thumb @ 50%
+{
+  const root = sliderTree({ defaultValue: 50, max: 100 });
+  const next = applyShadcnAdapter(root);
+  const ind = findBySlot(next, 'slider-indicator')[0];
+  assert.ok(ind.classes.includes('left-[0%]'), 'single value → indicator left-[0%]');
+  assert.ok(ind.classes.includes('w-[50%]'), 'single value → indicator w-[50%]');
+  const thumbs = findBySlot(next, 'slider-thumb');
+  assert.equal(thumbs.length, 1, 'single value → one thumb');
+  assert.ok(thumbs[0].classes.includes('left-[50%]'), 'thumb at 50%');
+  assert.ok(thumbs[0].classes.includes('-translate-x-1/2'), 'thumb gets centering translate');
+  assert.ok(thumbs[0].classes.includes('absolute'), 'thumb gets absolute');
+}
+
+// (h2) Range value [25, 75] → indicator [25%, 50% wide], two thumbs @ 25 and 75
+{
+  const root = sliderTree({ defaultValue: [25, 75], max: 100 });
+  const next = applyShadcnAdapter(root);
+  const ind = findBySlot(next, 'slider-indicator')[0];
+  assert.ok(ind.classes.includes('left-[25%]'), 'range → indicator left at min%');
+  assert.ok(ind.classes.includes('w-[50%]'), 'range → indicator width = (max-min)%');
+  const thumbs = findBySlot(next, 'slider-thumb');
+  assert.equal(thumbs.length, 2, 'range → thumb template cloned to 2 instances');
+  assert.ok(thumbs[0].classes.includes('left-[25%]'), 'first thumb at min%');
+  assert.ok(thumbs[1].classes.includes('left-[75%]'), 'second thumb at max%');
+}
+
+// (h3) max=200 → percent scales correctly: defaultValue=100 → 50%
+{
+  const root = sliderTree({ defaultValue: 100, max: 200 });
+  const next = applyShadcnAdapter(root);
+  const thumb = findBySlot(next, 'slider-thumb')[0];
+  assert.ok(thumb.classes.includes('left-[50%]'), 'value=100, max=200 → thumb at 50%');
+}
+
+// (h4) Stringified array "[25, 75]" — safety net for older scanner emit forms
+{
+  const root = sliderTree({ defaultValue: '[25, 75]', max: 100 });
+  const next = applyShadcnAdapter(root);
+  assert.equal(findBySlot(next, 'slider-thumb').length, 2, 'stringified array also clones');
+}
+
+// (h5) No value, no defaultValue → default to single thumb @ 0%
+{
+  const root = sliderTree({});
+  const next = applyShadcnAdapter(root);
+  const thumbs = findBySlot(next, 'slider-thumb');
+  assert.equal(thumbs.length, 1, 'no value → one thumb');
+  assert.ok(thumbs[0].classes.includes('left-[0%]'), 'no value → thumb at 0%');
+}
+
+// ---------------------------------------------------------------------------
+// (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)');