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

package/scanner/jsx-prop-unresolved-regression.ts

@@ -0,0 +1,178 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: when a JSX attribute reads an unresolved identifier (e.g. a
+ * function parameter with no default), the scanner must OMIT the prop
+ * rather than serialise the identifier's source text as the value.
+ *
+ * History: DropdownMenuItem's body has
+ *
+ *     <DropdownMenuPrimitive.Item data-inset={inset} ... />
+ *
+ * where `inset?: boolean` is destructured from props with no default. In
+ * the Default story the consumer never passes `inset`, so its runtime
+ * value is `undefined` — React would render NO `data-inset` attribute.
+ *
+ * The scanner used to fall back to `expr.getText()` when an expression
+ * couldn't be resolved, which serialised the identifier name `"inset"`
+ * as the attribute value. The plugin's variant engine then treated
+ * `props["data-inset"] === "inset"` as "data-inset is present", which
+ * activated every `data-[inset]:` utility. The visible symptom: every
+ * DropdownMenuItem got `data-[inset]:pl-8` (32px left padding) even when
+ * no item was `inset`, leaving them indented like checkbox/radio items.
+ *
+ * The fix: omit the prop when the expression doesn't resolve. Matches
+ * React's runtime behaviour for `data-x={undefined}` — no attribute is
+ * emitted, so no variant predicate matches.
+ *
+ * This file locks the contract at the boundary the variant engine reads
+ * from — the props object on the JSX node.
+ */
+
+interface JsxNodeLike {
+  type: 'element' | 'text';
+  tagName?: 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;
+}
+
+const scanner = makeScanner();
+
+// ---------------------------------------------------------------------------
+// Case 1: unresolved boolean-prop identifier — the DropdownMenuItem pattern.
+// `inset` is a destructured parameter with no default. The data-attribute
+// expression `data-inset={inset}` MUST be omitted, not serialised as
+// "inset".
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('unresolved-data-attr.tsx'),
+    `
+      // The className would normally include "data-[inset]:pl-8" — omitted
+      // from this fixture because the regression asserts on the props map,
+      // not on class extraction, and inlining the class string trips the
+      // workspace lint (suggestCanonicalClasses) for what is intentionally
+      // a verbatim shadcn-shaped fixture.
+      export function DropdownMenuItem({ inset }: { inset?: boolean }) {
+        return (
+          <div
+            data-slot="dropdown-menu-item"
+            data-inset={inset}
+            data-variant="default"
+          />
+        );
+      }
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'DropdownMenuItem');
+  assert.ok(tree, 'DropdownMenuItem must produce a tree');
+  const root = findElement(tree, 'div');
+  assert.ok(root, 'must find the root <div>');
+
+  // Literal data-* attrs survive.
+  assert.equal(root.props?.['data-slot'], 'dropdown-menu-item', 'literal data-slot preserved');
+  assert.equal(root.props?.['data-variant'], 'default', 'literal data-variant preserved');
+
+  // The unresolved expression must NOT have been serialised as the
+  // identifier name. Either the key is absent, or the value is some
+  // explicit "absent" sentinel — never the identifier text "inset".
+  const insetValue = root.props?.['data-inset'];
+  assert.notEqual(
+    insetValue,
+    'inset',
+    "data-inset must NOT serialise to the unresolved identifier's source text"
+  );
+  // Stronger contract: the key should be absent. React renders no
+  // attribute for `data-x={undefined}`, and that's what the variant
+  // engine needs to see for the predicate to NOT match.
+  assert.ok(
+    !Object.prototype.hasOwnProperty.call(root.props || {}, 'data-inset'),
+    'data-inset key must be omitted when the value expression is unresolved'
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: unresolved string-prop identifier — same rule, different shape.
+// `<input placeholder={placeholder}>` where `placeholder` is unresolved
+// shouldn't end up with `placeholder="placeholder"` (the identifier name)
+// in the rendered tree.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('unresolved-string-attr.tsx'),
+    `
+      export function Field({ placeholder }: { placeholder?: string }) {
+        return <input placeholder={placeholder} />;
+      }
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Field');
+  assert.ok(tree, 'Field must produce a tree');
+  const input = findElement(tree, 'input');
+  assert.ok(input, 'must find <input>');
+  assert.ok(
+    !Object.prototype.hasOwnProperty.call(input.props || {}, 'placeholder'),
+    'placeholder key must be omitted when the value identifier is unresolved'
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: literal string attribute survives — sanity check that this fix
+// only suppresses *unresolved* expressions, not the literal-attr path.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('literal-attr.tsx'),
+    `
+      export function LiteralAttr() {
+        return <div data-variant="primary" data-slot="root" />;
+      }
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'LiteralAttr');
+  assert.ok(tree, 'LiteralAttr must produce a tree');
+  const div = findElement(tree, 'div');
+  assert.ok(div, 'must find <div>');
+  assert.equal(div.props?.['data-variant'], 'primary', 'literal data-variant survives');
+  assert.equal(div.props?.['data-slot'], 'root', 'literal data-slot survives');
+}
+
+console.log('jsx-prop-unresolved-regression: PASS (3 cases)');

package/scanner/jsx-text-regression.ts

@@ -0,0 +1,178 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: JsxText whitespace must be normalized like Babel/React's
+ * transform — newlines and indentation between source lines collapse to a
+ * single space, and boundary whitespace adjacent to sibling JSX elements
+ * is preserved so that `Your <span>foo</span> bar` stays spaced.
+ *
+ * History: HeroSection's `<h1>` and `<p>` wrap across multiple source
+ * lines (`design\n  system`). Prior `child.getText().trim()` left the
+ * embedded newline + indent in the rendered Figma text, producing
+ * "design[whitespace]system" instead of "design system". A first fix
+ * patched only ONE of the four JsxText sites in component-scanner.ts;
+ * the buildJsxTree paths (lines ~1345 + ~1688) still had the bug, which
+ * is the path the hero h1 actually flows through. This test locks down
+ * all sites that emit structured text children.
+ */
+
+interface JsxTextNode { type: 'text'; content: string }
+interface JsxElementNode { type: 'element'; tagName?: string; children?: JsxNodeLike[] }
+type JsxNodeLike = JsxTextNode | JsxElementNode;
+
+interface TestScannerView {
+  project: import('ts-morph').Project;
+  extractComponentJsxTree: (
+    sourceFile: import('ts-morph').SourceFile,
+    componentName: string
+  ) => JsxNodeLike | null;
+}
+
+function makeScanner(): TestScannerView {
+  const scanner = new ComponentScanner({
+    componentPaths: [],
+    filePattern: '*.tsx',
+    exclude: [],
+  });
+  return scanner as unknown as TestScannerView;
+}
+
+function fixturePath(relative: string): string {
+  return path.resolve(process.cwd(), 'tools/figma-plugin/scanner/__fixtures__', relative);
+}
+
+function collectTextNodes(node: JsxNodeLike | null | undefined, out: string[]): void {
+  if (!node) return;
+  if (node.type === 'text') {
+    out.push(node.content);
+    return;
+  }
+  if (node.type === 'element' && node.children) {
+    for (const child of node.children) collectTextNodes(child, out);
+  }
+}
+
+const scanner = makeScanner();
+
+// ---------------------------------------------------------------------------
+// Case 1: a hero-style <h1> whose text wraps across two source lines, with
+// an inline <span> sibling. Pre-fix this rendered with a literal newline
+// + indent embedded in "design\n              system".
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('hero-h1.tsx'),
+    `
+      export function HeroH1() {
+        return (
+          <h1 className="text-4xl font-bold">
+            Your <span className="text-primary">stories</span> are the design
+            system. Figma renders them on demand.
+          </h1>
+        );
+      }
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'HeroH1');
+  assert.ok(tree && tree.type === 'element', 'HeroH1 must produce an element tree');
+
+  const texts: string[] = [];
+  collectTextNodes(tree, texts);
+
+  // Expected: ["Your ", "stories", " are the design system. Figma renders them on demand."]
+  for (const t of texts) {
+    assert.ok(
+      !/[\n\r]/.test(t),
+      `JsxText must not contain a literal newline. Got: ${JSON.stringify(t)}`
+    );
+    assert.ok(
+      !/  /.test(t),
+      `JsxText must not contain consecutive spaces (collapsed indent). Got: ${JSON.stringify(t)}`
+    );
+  }
+
+  const joined = texts.join('');
+  assert.ok(
+    joined.includes('Your stories are the design system.'),
+    `Expected joined text to read 'Your stories are the design system.' Got: ${JSON.stringify(joined)}`
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: boundary whitespace between sibling JSX must be preserved, even
+// though internal whitespace collapses. Naive `.replace(/\s+/g, ' ').trim()`
+// would drop the leading/trailing space, producing "Yourfoobar".
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('inline-spans.tsx'),
+    `
+      export function InlineSpans() {
+        return (
+          <p>
+            Your <span>foo</span> bar
+          </p>
+        );
+      }
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'InlineSpans');
+  assert.ok(tree && tree.type === 'element');
+
+  const texts: string[] = [];
+  collectTextNodes(tree, texts);
+  const joined = texts.join('');
+
+  assert.ok(
+    joined.includes('Your foo bar'),
+    `Boundary whitespace must be preserved between sibling text and elements. Got: ${JSON.stringify(joined)}`
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: fragment-rooted component with multi-line text inside a child
+// element — exercises the OTHER buildJsxTree branch (line ~1688) which had
+// the same `.trim()` bug.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('fragment-text.tsx'),
+    `
+      export function FragmentText() {
+        return (
+          <>
+            <p>
+              First line
+              and second line.
+            </p>
+          </>
+        );
+      }
+    `,
+    { overwrite: true }
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'FragmentText');
+  assert.ok(tree && tree.type === 'element');
+
+  const texts: string[] = [];
+  collectTextNodes(tree, texts);
+  const joined = texts.join('');
+
+  assert.ok(
+    !/[\n\r]/.test(joined),
+    `Fragment-rooted multi-line JsxText must not retain newlines. Got: ${JSON.stringify(joined)}`
+  );
+  assert.ok(
+    joined.includes('First line and second line.'),
+    `Expected 'First line and second line.' Got: ${JSON.stringify(joined)}`
+  );
+}
+
+console.log('jsx-text-regression: ok');

package/scanner/layout-alignment-regression.ts

@@ -0,0 +1,108 @@
+import assert from 'node:assert/strict';
+import { makeEmptyIR } from '../src/layout/parser/ir';
+import { parseAlignment } from '../src/layout/parser/alignment';
+
+/**
+ * Locks in the Tailwind alignment → LayoutIR mapping that previously
+ * lived inside LayoutParser as part of `parseAlignment` and the self-*
+ * portion of `parseChildProperties`. Phase 4 of the layout-parser
+ * split moved both into `parser/alignment.ts` — this fixture catches
+ * accidental behavioural regressions.
+ *
+ * Covers:
+ *   - justify-start / center / end / between → mainAlign
+ *   - items-start / center / end / stretch / baseline → crossAlign
+ *   - self-start / center / end / stretch / auto → selfAlign
+ *   - the implicit STRETCH crossAlign default applied when layoutMode
+ *     is HORIZONTAL or VERTICAL (CSS flex default)
+ */
+
+// ---------------------------------------------------------------------------
+// Implicit crossAlign default — STRETCH when a flex/grid layoutMode is set
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  ir.layoutMode = 'HORIZONTAL';
+  parseAlignment([], ir);
+  assert.equal(ir.crossAlign, 'STRETCH', 'HORIZONTAL with no items-* defaults to STRETCH');
+}
+{
+  const ir = makeEmptyIR();
+  ir.layoutMode = 'VERTICAL';
+  parseAlignment([], ir);
+  assert.equal(ir.crossAlign, 'STRETCH', 'VERTICAL with no items-* defaults to STRETCH');
+}
+{
+  const ir = makeEmptyIR();
+  // layoutMode = NONE (default) — no implicit STRETCH applied
+  parseAlignment([], ir);
+  assert.equal(ir.crossAlign, 'MIN', 'NONE keeps crossAlign at MIN');
+}
+
+// ---------------------------------------------------------------------------
+// justify-* → mainAlign
+// ---------------------------------------------------------------------------
+{
+  const cases: Array<[string, 'MIN' | 'CENTER' | 'MAX' | 'SPACE_BETWEEN']> = [
+    ['justify-start', 'MIN'],
+    ['justify-center', 'CENTER'],
+    ['justify-end', 'MAX'],
+    ['justify-between', 'SPACE_BETWEEN'],
+  ];
+  for (const [cls, expected] of cases) {
+    const ir = makeEmptyIR();
+    parseAlignment([cls], ir);
+    assert.equal(ir.mainAlign, expected, cls);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// items-* → crossAlign (overrides the implicit STRETCH default)
+// ---------------------------------------------------------------------------
+{
+  const cases: Array<[string, 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'BASELINE']> = [
+    ['items-start', 'MIN'],
+    ['items-center', 'CENTER'],
+    ['items-end', 'MAX'],
+    ['items-stretch', 'STRETCH'],
+    ['items-baseline', 'BASELINE'],
+  ];
+  for (const [cls, expected] of cases) {
+    const ir = makeEmptyIR();
+    ir.layoutMode = 'HORIZONTAL';
+    parseAlignment([cls], ir);
+    assert.equal(ir.crossAlign, expected, cls);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// self-* → selfAlign
+// ---------------------------------------------------------------------------
+{
+  const cases: Array<[string, 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | undefined]> = [
+    ['self-start', 'MIN'],
+    ['self-center', 'CENTER'],
+    ['self-end', 'MAX'],
+    ['self-stretch', 'STRETCH'],
+    ['self-auto', undefined],
+  ];
+  for (const [cls, expected] of cases) {
+    const ir = makeEmptyIR();
+    parseAlignment([cls], ir);
+    assert.equal(ir.selfAlign, expected, cls);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Combinations — justify + items + self in one class list
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  ir.layoutMode = 'HORIZONTAL';
+  parseAlignment(['justify-center', 'items-end', 'self-stretch'], ir);
+  assert.equal(ir.mainAlign, 'CENTER');
+  assert.equal(ir.crossAlign, 'MAX');
+  assert.equal(ir.selfAlign, 'STRETCH');
+}
+
+console.log('layout-alignment-regression: ok');

package/scanner/layout-flex-regression.ts

@@ -0,0 +1,90 @@
+import assert from 'node:assert/strict';
+import { makeEmptyIR } from '../src/layout/parser/ir';
+import { parseFlexChildren, parseWrap } from '../src/layout/parser/flex';
+
+/**
+ * Locks in Tailwind flex-child + flex-wrap → LayoutIR mapping that
+ * previously lived inside LayoutParser as `parseChildProperties` and
+ * `parseWrap`. Phase 5 of the layout-parser split moved them into
+ * `parser/flex.ts` — this fixture catches accidental behavioural
+ * regressions.
+ *
+ * Covers:
+ *   - flex-1 / flex-grow / grow → grow = 1
+ *   - flex-grow-0 / grow-0 → grow = 0
+ *   - shrink-0 / flex-shrink-0 → shrinkZero = true
+ *   - flex-wrap / flex-wrap-reverse → wrap = true
+ */
+
+// ---------------------------------------------------------------------------
+// Grow aliases — flex-1 / flex-grow / grow all set ir.grow = 1
+// ---------------------------------------------------------------------------
+{
+  for (const cls of ['flex-1', 'flex-grow', 'grow']) {
+    const ir = makeEmptyIR();
+    parseFlexChildren([cls], ir);
+    assert.equal(ir.grow, 1, cls);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// flex-grow-0 / grow-0 → grow = 0
+// ---------------------------------------------------------------------------
+{
+  for (const cls of ['flex-grow-0', 'grow-0']) {
+    const ir = makeEmptyIR();
+    parseFlexChildren([cls], ir);
+    assert.equal(ir.grow, 0, cls);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// shrink-0 / flex-shrink-0 → shrinkZero = true
+// ---------------------------------------------------------------------------
+{
+  for (const cls of ['shrink-0', 'flex-shrink-0']) {
+    const ir = makeEmptyIR();
+    parseFlexChildren([cls], ir);
+    assert.equal(ir.shrinkZero, true, cls);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Combination — grow=1 AND shrink-0 (rare but valid)
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  parseFlexChildren(['flex-1', 'shrink-0'], ir);
+  assert.equal(ir.grow, 1);
+  assert.equal(ir.shrinkZero, true);
+}
+
+// ---------------------------------------------------------------------------
+// flex-wrap / flex-wrap-reverse → wrap = true (reverse collapses to wrap)
+// ---------------------------------------------------------------------------
+{
+  for (const cls of ['flex-wrap', 'flex-wrap-reverse']) {
+    const ir = makeEmptyIR();
+    parseWrap([cls], ir);
+    assert.equal(ir.wrap, true, cls);
+  }
+}
+
+{
+  // No wrap class → wrap stays false
+  const ir = makeEmptyIR();
+  parseWrap(['flex', 'flex-row', 'gap-4'], ir);
+  assert.equal(ir.wrap, false);
+}
+
+// ---------------------------------------------------------------------------
+// Unknown classes are ignored (don't crash, don't mutate)
+// ---------------------------------------------------------------------------
+{
+  const ir = makeEmptyIR();
+  parseFlexChildren(['some-other-class', 'p-4', 'text-lg'], ir);
+  assert.equal(ir.grow, 0);
+  assert.equal(ir.shrinkZero, undefined);
+}
+
+console.log('layout-flex-regression: ok');

package/scanner/layout-mode-regression.ts

@@ -0,0 +1,71 @@
+import assert from 'node:assert/strict';
+import { parseLayoutMode } from '../src/layout/parser/layout-mode';
+
+/**
+ * Locks in Tailwind display + direction → IR layoutMode mapping that
+ * previously lived inside LayoutParser as `parseLayoutMode`. Phase 6
+ * of the layout-parser split moved it into `parser/layout-mode.ts` —
+ * this fixture catches accidental behavioural regressions.
+ *
+ * Covers: flex / inline-flex / flex-row / flex-col (+ -reverse), grid
+ * / inline-grid, grid-cols-N detection, the trailing-`flex` no-direction-
+ * reset rule, and the responsive-strip class-order semantics.
+ */
+
+// ---------------------------------------------------------------------------
+// flex variants — default direction is HORIZONTAL
+// ---------------------------------------------------------------------------
+assert.equal(parseLayoutMode(['flex']), 'HORIZONTAL');
+assert.equal(parseLayoutMode(['inline-flex']), 'HORIZONTAL');
+
+// ---------------------------------------------------------------------------
+// flex-col / flex-row → explicit direction
+// ---------------------------------------------------------------------------
+assert.equal(parseLayoutMode(['flex', 'flex-col']), 'VERTICAL');
+assert.equal(parseLayoutMode(['flex', 'flex-col-reverse']), 'VERTICAL');
+assert.equal(parseLayoutMode(['flex', 'flex-row']), 'HORIZONTAL');
+assert.equal(parseLayoutMode(['flex', 'flex-row-reverse']), 'HORIZONTAL');
+
+// ---------------------------------------------------------------------------
+// Trailing `flex` after `flex-col` does NOT reset direction
+// ---------------------------------------------------------------------------
+assert.equal(
+  parseLayoutMode(['flex-col', 'flex']),
+  'VERTICAL',
+  'trailing `flex` must not reset flex-direction once explicitly set'
+);
+
+// ---------------------------------------------------------------------------
+// Class-order semantics — later utility wins (responsive strip pattern)
+// ---------------------------------------------------------------------------
+assert.equal(
+  parseLayoutMode(['flex', 'flex-col', 'flex-row']),
+  'HORIZONTAL',
+  'later flex-row should override earlier flex-col (responsive sm: pattern)'
+);
+assert.equal(
+  parseLayoutMode(['flex', 'flex-row', 'flex-col']),
+  'VERTICAL',
+  'later flex-col should override earlier flex-row'
+);
+
+// ---------------------------------------------------------------------------
+// grid / inline-grid — VERTICAL by default, HORIZONTAL when grid-cols-N present
+// ---------------------------------------------------------------------------
+assert.equal(parseLayoutMode(['grid']), 'VERTICAL');
+assert.equal(parseLayoutMode(['inline-grid']), 'VERTICAL');
+assert.equal(parseLayoutMode(['grid', 'grid-cols-2']), 'HORIZONTAL');
+assert.equal(parseLayoutMode(['grid', 'grid-cols-12']), 'HORIZONTAL');
+
+// ---------------------------------------------------------------------------
+// No flex / grid utilities → NONE
+// ---------------------------------------------------------------------------
+assert.equal(parseLayoutMode([]), 'NONE');
+assert.equal(parseLayoutMode(['p-4', 'rounded-lg', 'bg-white']), 'NONE');
+
+// ---------------------------------------------------------------------------
+// Mixed classes — flex on, then unrelated, still HORIZONTAL
+// ---------------------------------------------------------------------------
+assert.equal(parseLayoutMode(['flex', 'p-4', 'gap-2']), 'HORIZONTAL');
+
+console.log('layout-mode-regression: ok');