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

package/scanner/table-column-alignment-regression.ts

@@ -0,0 +1,355 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+import { applyTableColumnAlignment } from '../src/layout/table-layout';
+
+/**
+ * Regression: HTML `<table>` columns must align across rows when
+ * rendered to Figma. Without the post-pass, each `<tr>` is an
+ * independent HORIZONTAL frame and cells size to their own content,
+ * so the table looks ragged. The pass walks the built tree, finds
+ * each `<table>`, takes per-column max-content width across all
+ * rows (incl. thead/tbody/tfoot), and resizes every cell at that
+ * column to the column's max.
+ *
+ * Real-world repro: greenhouse-app `RecentTradesCard` — rendering as
+ * "$172,800,00$2,500.00" because price (175,200,000,000) was wider
+ * than price (3,245,000,000) on another row, so the Size column
+ * started at a different X-offset per row and visually overlapped
+ * the longer Price.
+ */
+
+// ---------------------------------------------------------------------------
+// Stub-frame harness — minimal FrameNode mock with parent links + names.
+// ---------------------------------------------------------------------------
+
+interface StubFrame {
+  type: 'FRAME';
+  name: string;
+  layoutMode: 'NONE' | 'HORIZONTAL' | 'VERTICAL';
+  layoutPositioning: 'AUTO' | 'ABSOLUTE';
+  primaryAxisSizingMode: 'AUTO' | 'FIXED';
+  counterAxisSizingMode: 'AUTO' | 'FIXED';
+  layoutGrow: number;
+  width: number;
+  height: number;
+  parent: StubFrame | null;
+  children: StubFrame[];
+  pluginData: Record<string, string>;
+  appendChild(child: StubFrame): void;
+  resize(w: number, h: number): void;
+  setPluginData(key: string, value: string): void;
+  getPluginData(key: string): string;
+}
+
+function mkFrame(name: string): StubFrame {
+  const data: Record<string, string> = {};
+  const f: StubFrame = {
+    type: 'FRAME',
+    name,
+    layoutMode: 'NONE',
+    layoutPositioning: 'AUTO',
+    primaryAxisSizingMode: 'AUTO',
+    counterAxisSizingMode: 'AUTO',
+    layoutGrow: 0,
+    width: 0,
+    height: 0,
+    parent: null,
+    children: [],
+    pluginData: data,
+    appendChild(child) {
+      child.parent = this;
+      this.children.push(child);
+    },
+    resize(w, h) {
+      this.width = w;
+      this.height = h;
+    },
+    setPluginData(key, value) {
+      data[key] = value;
+    },
+    getPluginData(key) {
+      return data[key] || '';
+    },
+  };
+  return f;
+}
+
+interface CellInit {
+  width: number;
+  colSpan?: number;
+  layoutGrow?: number;
+  /** Override the cell tag — defaults to `td`. */
+  tag?: 'td' | 'th';
+}
+
+function cell(init: CellInit): StubFrame {
+  const c = mkFrame(init.tag || 'td');
+  c.layoutMode = 'HORIZONTAL';
+  c.width = init.width;
+  c.height = 24;
+  c.layoutGrow = init.layoutGrow ?? 1;
+  if (init.colSpan && init.colSpan > 1) {
+    c.setPluginData('inkbridge:col-span', String(init.colSpan));
+  } else {
+    c.setPluginData('inkbridge:col-span', '1');
+  }
+  return c;
+}
+
+function row(cells: StubFrame[]): StubFrame {
+  const r = mkFrame('tr');
+  r.layoutMode = 'HORIZONTAL';
+  for (const c of cells) r.appendChild(c);
+  return r;
+}
+
+function rowGroup(tag: 'thead' | 'tbody' | 'tfoot', rows: StubFrame[]): StubFrame {
+  const g = mkFrame(tag);
+  g.layoutMode = 'VERTICAL';
+  for (const r of rows) g.appendChild(r);
+  return g;
+}
+
+function table(rowGroups: StubFrame[]): StubFrame {
+  const t = mkFrame('table');
+  t.layoutMode = 'VERTICAL';
+  for (const g of rowGroups) t.appendChild(g);
+  return t;
+}
+
+const asNode = (f: StubFrame) => f as unknown as SceneNode;
+
+// ---------------------------------------------------------------------------
+// Cell 1 — RecentTradesCard shape: 3 rows with different column widths.
+// All columns must converge to per-column max-content.
+// ---------------------------------------------------------------------------
+{
+  const t = table([
+    rowGroup('thead', [row([
+      cell({ width: 50, tag: 'th' }),    // Action
+      cell({ width: 30, tag: 'th' }),    // Side
+      cell({ width: 40, tag: 'th' }),    // Price
+      cell({ width: 30, tag: 'th' }),    // Size
+    ])]),
+    rowGroup('tbody', [
+      row([
+        cell({ width: 60 }),  // Increase
+        cell({ width: 30 }),  // long
+        cell({ width: 180 }), // $172,800,000,000.00 — widest
+        cell({ width: 50 }),  // $2,500.00
+      ]),
+      row([
+        cell({ width: 60 }),  // Decrease
+        cell({ width: 30 }),  // long
+        cell({ width: 180 }), // $175,200,000,000.00
+        cell({ width: 50 }),  // $1,250.00
+      ]),
+      row([
+        cell({ width: 60 }),  // Increase
+        cell({ width: 40 }),  // short — widest
+        cell({ width: 130 }), // $3,245,000,000.00
+        cell({ width: 60 }),  // $1,500.00 — widest
+      ]),
+    ]),
+  ]);
+
+  const stats = applyTableColumnAlignment(asNode(t));
+
+  assert.equal(stats.tablesProcessed, 1, 'one table found');
+
+  // Walk every row, every cell — assert they match expected per-column max.
+  const expected = [60, 40, 180, 60];
+  const allRows: StubFrame[] = [];
+  for (const group of t.children) {
+    for (const r of group.children) allRows.push(r);
+  }
+  assert.equal(allRows.length, 4, '4 rows total (1 thead + 3 tbody)');
+  for (let r = 0; r < allRows.length; r++) {
+    const cells = allRows[r].children;
+    for (let c = 0; c < cells.length; c++) {
+      assert.equal(
+        cells[c].width,
+        expected[c],
+        `row ${r} col ${c}: expected ${expected[c]} got ${cells[c].width}`,
+      );
+      assert.equal(cells[c].layoutGrow, 0, `row ${r} col ${c}: layoutGrow should be reset to 0`);
+      assert.equal(cells[c].primaryAxisSizingMode, 'FIXED', `row ${r} col ${c}: primary FIXED`);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Cell 2 — Single-row table: no alignment needed.
+// ---------------------------------------------------------------------------
+{
+  const t = table([
+    rowGroup('tbody', [
+      row([
+        cell({ width: 80 }),
+        cell({ width: 120 }),
+      ]),
+    ]),
+  ]);
+  const original = [t.children[0].children[0].children[0].width, t.children[0].children[0].children[1].width];
+  const stats = applyTableColumnAlignment(asNode(t));
+  assert.equal(stats.cellsResized, 0, 'no resizes for single-row table');
+  assert.equal(t.children[0].children[0].children[0].width, original[0], 'untouched');
+  assert.equal(t.children[0].children[0].children[1].width, original[1], 'untouched');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 3 — Empty-state row with colspan=N must NOT influence per-column max.
+// ---------------------------------------------------------------------------
+{
+  const t = table([
+    rowGroup('thead', [row([
+      cell({ width: 40, tag: 'th' }),
+      cell({ width: 60, tag: 'th' }),
+    ])]),
+    rowGroup('tbody', [
+      row([
+        cell({ width: 50 }),
+        cell({ width: 90 }),
+      ]),
+      row([
+        cell({ width: 999, colSpan: 2 }),  // empty-state span — must NOT push column 0 to 999
+      ]),
+    ]),
+  ]);
+  const stats = applyTableColumnAlignment(asNode(t));
+  assert.equal(stats.tablesProcessed, 1);
+  // Column 0 max = max(40, 50) = 50; column 1 max = max(60, 90) = 90.
+  // The colspan=2 cell is excluded from both column maxes.
+  assert.equal(t.children[0].children[0].children[0].width, 50, 'col 0: max is 50, not 999');
+  assert.equal(t.children[0].children[0].children[1].width, 90, 'col 1: max is 90');
+  assert.equal(t.children[1].children[0].children[0].width, 50, 'tbody row 0 col 0: 50');
+  assert.equal(t.children[1].children[0].children[1].width, 90, 'tbody row 0 col 1: 90');
+  // The colspan cell itself stays at its natural width — skipped by the pass.
+  assert.equal(t.children[1].children[1].children[0].width, 999, 'colspan cell untouched');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 4 — Cells already at correct width: no-op resize, no stats bump.
+// ---------------------------------------------------------------------------
+{
+  const t = table([
+    rowGroup('tbody', [
+      row([cell({ width: 100 }), cell({ width: 80 })]),
+      row([cell({ width: 100 }), cell({ width: 80 })]),
+    ]),
+  ]);
+  const stats = applyTableColumnAlignment(asNode(t));
+  assert.equal(stats.tablesProcessed, 1);
+  assert.equal(stats.cellsResized, 0, 'cells already aligned: zero resizes');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 5 — Table nested in non-table parent: pass walks past wrappers.
+// ---------------------------------------------------------------------------
+{
+  const wrapper = mkFrame('div');
+  const t = table([
+    rowGroup('tbody', [
+      row([cell({ width: 30 }), cell({ width: 40 })]),
+      row([cell({ width: 50 }), cell({ width: 60 })]),
+    ]),
+  ]);
+  wrapper.appendChild(t);
+  const stats = applyTableColumnAlignment(asNode(wrapper));
+  assert.equal(stats.tablesProcessed, 1, 'table found inside wrapper');
+  assert.equal(t.children[0].children[0].children[0].width, 50, 'col 0 unified');
+  assert.equal(t.children[0].children[1].children[1].width, 60, 'col 1 unified');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 6 — Columns sum exceeds the table's available width: scale down
+// proportionally to fit. Mirrors `table-fixed` + `min-w-full` browser
+// behaviour. Without this the table overflows its parent card right-edge
+// in Figma (no scrollbar to mask it as in the browser).
+// ---------------------------------------------------------------------------
+{
+  // Parent card with FIXED width = 400; table sits inside.
+  const card = mkFrame('div');
+  card.layoutMode = 'VERTICAL';
+  card.counterAxisSizingMode = 'FIXED';
+  card.width = 400;
+  card.height = 200;
+
+  const t = table([
+    rowGroup('tbody', [
+      row([cell({ width: 200 }), cell({ width: 200 }), cell({ width: 200 })]),  // sum = 600
+      row([cell({ width: 200 }), cell({ width: 200 }), cell({ width: 200 })]),
+    ]),
+  ]);
+  card.appendChild(t);
+
+  applyTableColumnAlignment(asNode(card));
+
+  // Sum of per-column max = 600, available = 400 → scale = 2/3.
+  // Each 200 → floor(200 * 2/3) = 133.
+  for (const tr of t.children[0].children) {
+    for (const c of tr.children) {
+      assert.equal(c.width, 133, `scaled-down cell width: expected 133 got ${c.width}`);
+    }
+  }
+  const tableTotal = t.children[0].children[0].children.reduce((acc, c) => acc + c.width, 0);
+  assert.ok(tableTotal <= 400, `scaled total ${tableTotal} must fit available 400`);
+}
+
+// ---------------------------------------------------------------------------
+// Cell 7 — Columns sum is smaller than available: expand UP to fill the
+// table width. Browser parity with `min-w-full table-fixed` — the table
+// fills its parent, columns distribute the extra. Without this the
+// row separator borders stop mid-card in Figma.
+// ---------------------------------------------------------------------------
+{
+  const card = mkFrame('div');
+  card.layoutMode = 'VERTICAL';
+  card.counterAxisSizingMode = 'FIXED';
+  card.width = 800;
+
+  const t = table([
+    rowGroup('tbody', [
+      row([cell({ width: 100 }), cell({ width: 80 })]),  // sum = 180
+      row([cell({ width: 100 }), cell({ width: 80 })]),
+    ]),
+  ]);
+  card.appendChild(t);
+
+  applyTableColumnAlignment(asNode(card));
+
+  // Sum = 180, available = 800 → scale = 800/180 ≈ 4.444.
+  // 100 * 4.444 = 444 (floor), 80 * 4.444 = 355 (floor). 444+355=799 (~800).
+  assert.equal(t.children[0].children[0].children[0].width, 444, 'expand: col 0 grows from 100 to 444');
+  assert.equal(t.children[0].children[0].children[1].width, 355, 'expand: col 1 grows from 80 to 355');
+  const total = t.children[0].children[0].children.reduce((acc, c) => acc + c.width, 0);
+  assert.ok(total <= 800, `expanded total ${total} stays within 800`);
+  // Both rows mirror each other so alignment is preserved.
+  assert.equal(t.children[0].children[1].children[0].width, 444, 'row 1 col 0 matches row 0');
+  assert.equal(t.children[0].children[1].children[1].width, 355, 'row 1 col 1 matches row 0');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 8 — No definite-width ancestor: leave columns at natural widths.
+// (Pass cannot infer "fill what" without an anchor.)
+// ---------------------------------------------------------------------------
+{
+  const t = table([
+    rowGroup('tbody', [
+      row([cell({ width: 50 }), cell({ width: 80 })]),
+      row([cell({ width: 60 }), cell({ width: 80 })]),
+    ]),
+  ]);
+  // Orphan table — no parent with FIXED width.
+  applyTableColumnAlignment(asNode(t));
+  // No expansion / no shrink — just per-column max.
+  assert.equal(t.children[0].children[0].children[0].width, 60, 'orphan: col 0 = max(50, 60) = 60');
+  assert.equal(t.children[0].children[0].children[1].width, 80, 'orphan: col 1 = max(80, 80) = 80');
+}
+
+console.log('table-column-alignment-regression: ok (8 cells)');

package/scanner/ternary-fragment-branch-regression.ts

@@ -0,0 +1,196 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: ternaries inside JSX expression containers must expand
+ * both `<>…</>` (Fragment) branches AND nested `cond ? a : b` ternary
+ * branches. The previous `pushChosenJsxBranch` only handled
+ * `JsxElement` / `JsxSelfClosingElement`; fragments and nested
+ * ternaries silently fell through to `resolveExpressionValue` (which
+ * returns undefined for JSX) and the entire branch was dropped from
+ * the scan tree.
+ *
+ * Two real-world cases this fix lights up at once:
+ *
+ *   1. Submit button body — `isLongSide ? <><svg/>Long / Buy</> :
+ *      <><svg/>Short / Sell</>`. Both branches are Fragments. Without
+ *      Fragment support the Button rendered as a frame with no
+ *      children (no icon, no label) in IncreasePositionModal.
+ *
+ *   2. Multi-state status card — `previewLoading ? <skel/> :
+ *      previewMetrics ? <metrics/> : <empty/>`. The outer-false
+ *      branch is itself a ConditionalExpression. Without nested
+ *      ternary handling the Position impact card showed only its
+ *      header and the entire metrics block was missing.
+ */
+
+interface TestScannerView {
+  project: import('ts-morph').Project;
+  extractComponentJsxTree: (
+    sourceFile: import('ts-morph').SourceFile,
+    componentName: string,
+  ) => unknown;
+}
+
+interface JsxNodeLike {
+  type: 'element' | 'text';
+  tagName?: string;
+  content?: string;
+  props?: Record<string, string>;
+  children?: JsxNodeLike[];
+}
+
+function fixturePath(rel: string): string {
+  return path.resolve(process.cwd(), 'tools/figma-plugin/scanner/__fixtures__', rel);
+}
+
+function findAllTexts(node: JsxNodeLike | null, out: string[] = []): string[] {
+  if (!node) return out;
+  if (node.type === 'text' && typeof node.content === 'string') {
+    const t = node.content.trim();
+    if (t.length > 0) out.push(t);
+  }
+  for (const c of node.children || []) findAllTexts(c, out);
+  return out;
+}
+
+function findElements(node: JsxNodeLike | null, tag: string, out: JsxNodeLike[] = []): JsxNodeLike[] {
+  if (!node || node.type !== 'element') return out;
+  if (node.tagName === tag) out.push(node);
+  for (const c of node.children || []) findElements(c, tag, out);
+  return out;
+}
+
+const scanner = new ComponentScanner({
+  componentPaths: [],
+  filePattern: '*.tsx',
+  exclude: [],
+}) as unknown as TestScannerView;
+
+// ---------------------------------------------------------------------------
+// Case 1: Fragment branch — `isLong ? <><svg/>Long</> : <><svg/>Short</>`
+// ---------------------------------------------------------------------------
+
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('ternary-fragment/SubmitButton.tsx'),
+    `
+      export function SubmitButton({ isLong }: { isLong: boolean }) {
+        return (
+          <button>
+            {isLong ? (
+              <>
+                <svg data-marker="long-arrow" viewBox="0 0 24 24"><path d="M0 0" /></svg>
+                Long / Buy
+              </>
+            ) : (
+              <>
+                <svg data-marker="short-arrow" viewBox="0 0 24 24"><path d="M0 0" /></svg>
+                Short / Sell
+              </>
+            )}
+          </button>
+        );
+      }
+      export function Story() {
+        return <SubmitButton isLong={true} />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Story') as JsxNodeLike;
+  const button = findElements(tree, 'button')[0];
+  assert.ok(button, 'button element survives the expansion');
+  const svgs = findElements(button, 'svg');
+  assert.equal(svgs.length, 1, 'fragment children flattened into the button — exactly one svg from the chosen branch');
+  assert.equal(
+    svgs[0].props?.['data-marker'],
+    'long-arrow',
+    'isLong=true picked the truthy fragment, not the short one',
+  );
+  const texts = findAllTexts(button);
+  assert.ok(texts.includes('Long / Buy'), 'fragment text child surfaces as a direct text node of the button');
+  assert.ok(!texts.includes('Short / Sell'), 'falsy branch is NOT emitted alongside the truthy one');
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: Nested ternary — `a ? <X/> : b ? <Y/> : <Z/>` with b truthy
+// ---------------------------------------------------------------------------
+
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('ternary-fragment/StatusCard.tsx'),
+    `
+      interface Metrics { value: string; }
+      export function StatusCard({ loading, metrics }: { loading: boolean; metrics: Metrics | null }) {
+        return (
+          <section>
+            {loading ? (
+              <div data-marker="loading-skeleton" />
+            ) : metrics ? (
+              <div data-marker="metrics-body">
+                <p data-marker="metric-row">Entry $172.41</p>
+              </div>
+            ) : (
+              <p data-marker="empty-state">No data</p>
+            )}
+          </section>
+        );
+      }
+      export function Story() {
+        return <StatusCard loading={false} metrics={{ value: "anything" }} />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Story') as JsxNodeLike;
+  // Section must have exactly one direct meaningful child — the metrics body.
+  const skeletons = findElements(tree, 'div').filter((d) => d.props?.['data-marker'] === 'loading-skeleton');
+  const metricsBody = findElements(tree, 'div').filter((d) => d.props?.['data-marker'] === 'metrics-body');
+  const emptyState = findElements(tree, 'p').filter((p) => p.props?.['data-marker'] === 'empty-state');
+  assert.equal(skeletons.length, 0, 'loading=false → skeleton branch NOT emitted');
+  assert.equal(metricsBody.length, 1, 'metrics truthy → metrics body emitted (nested ternary unpacked)');
+  assert.equal(emptyState.length, 0, 'metrics truthy → empty-state NOT emitted');
+  const metricRow = findElements(metricsBody[0], 'p').find((p) => p.props?.['data-marker'] === 'metric-row');
+  assert.ok(metricRow, 'children inside the chosen nested branch render normally');
+  const texts = findAllTexts(metricRow!);
+  assert.ok(texts.includes('Entry $172.41'), 'static text inside the chosen nested branch survives');
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: Nested ternary where the deepest false branch wins
+// ---------------------------------------------------------------------------
+
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('ternary-fragment/EmptyState.tsx'),
+    `
+      export function StatusCard({ loading, metrics }: { loading: boolean; metrics: unknown }) {
+        return (
+          <section>
+            {loading ? (
+              <div data-marker="loading-skeleton" />
+            ) : metrics ? (
+              <div data-marker="metrics-body" />
+            ) : (
+              <p data-marker="empty-state">No data</p>
+            )}
+          </section>
+        );
+      }
+      export function Story() {
+        return <StatusCard loading={false} metrics={null} />;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Story') as JsxNodeLike;
+  const empty = findElements(tree, 'p').filter((p) => p.props?.['data-marker'] === 'empty-state');
+  assert.equal(empty.length, 1, 'metrics=null falls through the inner ternary to the empty-state branch');
+}
+
+console.log('ternary-fragment-branch-regression: PASS');