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

package/scanner/expression-evaluator-regression.ts

@@ -0,0 +1,432 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: the expression evaluator in `ComponentScanner.resolveExpressionValue`
+ * must handle three families of JSX expressions that previously rendered
+ * as raw arg values (or empty) in Figma. Each family corresponds to a
+ * phase in the rollout:
+ *
+ *   P1. Built-in method calls and global conversions —
+ *       `trade.txHash.slice(0, 6)`, `Number(value)`, `"x".padStart(...)`,
+ *       `Math.abs(...)`, `Number.isFinite(...)`.
+ *
+ *   P2. Pure-instance constructors at module scope —
+ *       `const fmt = new Intl.NumberFormat("en-US", { ... });`
+ *       followed by `fmt.format(N)` in the JSX body. The evaluator
+ *       resolves the identifier to the live JS instance and calls
+ *       `.format()` at scan time. Also covers `new Date(x).toISOString()`.
+ *
+ *   P3. User-defined function evaluation — `formatUsd(trade.price)`
+ *       where `formatUsd` is a pure arrow function in the same file or
+ *       in an imported module (mirrors the perps utils pattern).
+ *
+ * Background: before this lands, the scanner returned the raw first
+ * argument for any user-function call and dropped method-chain results
+ * entirely. Figma rendered `172800000000` instead of `$172,800,000,000.00`
+ * and tx-hash cells collapsed to just the em-dash separator. Fix: make
+ * the evaluator a small AST interpreter that handles pure JS constructs
+ * found in real consumer code. Adding a new evaluator path? Add a case
+ * here too — silent drift between scanner reality and consumer
+ * expectations is the recurring bug class this fixture exists to prevent.
+ */
+
+interface JsxNodeLike {
+  type: 'element' | 'text';
+  tagName?: string;
+  content?: string;
+  props?: Record<string, unknown>;
+  children?: JsxNodeLike[];
+}
+
+interface StoryShape {
+  name: string;
+  jsxTree?: JsxNodeLike;
+}
+
+interface ScannedShape {
+  name: string;
+  stories?: StoryShape[];
+}
+
+function findElementByRole(node: JsxNodeLike | undefined | null, role: string): JsxNodeLike | null {
+  if (!node || node.type !== 'element') return null;
+  if (node.props?.['data-role'] === role) return node;
+  for (const child of node.children || []) {
+    const found = findElementByRole(child, role);
+    if (found) return found;
+  }
+  return null;
+}
+
+function collectText(node: JsxNodeLike | undefined | null, out: string[] = []): string[] {
+  if (!node) return out;
+  if (node.type === 'text') {
+    if (typeof node.content === 'string') out.push(node.content);
+    return out;
+  }
+  for (const child of node.children || []) collectText(child, out);
+  return out;
+}
+
+const FIXTURE_DIR = path.resolve(
+  process.cwd(),
+  'tools/figma-plugin/scanner/__fixtures__/expression-evaluator'
+);
+
+function writeFixtures(): void {
+  fs.mkdirSync(FIXTURE_DIR, { recursive: true });
+
+  // Shared constants module — exercises the imported-object-literal /
+  // imported-array-literal resolution path (P5). Without this, the
+  // perps TOKEN_METADATA[mint]?.symbol lookup returned undefined and
+  // the symbol display fell back to a 4-char mint slice.
+  fs.writeFileSync(
+    path.join(FIXTURE_DIR, 'constants.ts'),
+    `
+      export const TOKEN_LABELS = {
+        "So11111111111111111111111111111111111111112": { symbol: "SOL", name: "Solana" },
+        "7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs": { symbol: "ETH", name: "Ether" },
+      } as const;
+
+      export const SUPPORTED_MINTS: string[] = [
+        "So11111111111111111111111111111111111111112",
+        "7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs",
+      ];
+    `,
+    'utf-8'
+  );
+
+  // Shared utils module — the user-function evaluator must follow the
+  // import and walk this file's function bodies. Mirrors the perps
+  // `~/domains/perps/utils` layout.
+  fs.writeFileSync(
+    path.join(FIXTURE_DIR, 'utils.ts'),
+    `
+      export const usdFormatter = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      });
+
+      export const baseUnitsToNumber = (value?: string | null, decimals = 6) => {
+        if (value === undefined || value === null) return null;
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric)) return null;
+        return numeric / 10 ** decimals;
+      };
+
+      export const formatUsd = (value?: string | null, fallback = "-") => {
+        if (!value && value !== "0") return fallback;
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric)) return fallback;
+        return usdFormatter.format(numeric);
+      };
+
+      export const formatUsdFromBase = (value?: string | null) => {
+        const num = baseUnitsToNumber(value, 6);
+        return num === null ? "-" : usdFormatter.format(num);
+      };
+    `,
+    'utf-8'
+  );
+
+  fs.writeFileSync(
+    path.join(FIXTURE_DIR, 'Receipt.tsx'),
+    `
+      import { formatUsd, formatUsdFromBase } from "./utils";
+      import { TOKEN_LABELS, SUPPORTED_MINTS } from "./constants";
+
+      export interface Trade {
+        txHash: string;
+        priceRaw: string;
+        feeBaseUnits: string;
+        countBig: number;
+        mint: string;
+      }
+
+      export interface ReceiptProps {
+        trade: Trade;
+        // Optional list — when undefined, the component must still treat
+        // the visibility gate as falsy and pick the DEFAULT branch.
+        activeGroups?: Array<"price" | "market">;
+      }
+
+      const DEFAULT_ACTIVE: Array<"price" | "market"> = ["price", "market"];
+
+      // Module-level Intl instance — P2 must follow the identifier back to
+      // the constructor and dispatch \`.format()\` against a live instance.
+      const inlineUsdFmt = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      });
+
+      export function Receipt({ trade, activeGroups }: ReceiptProps) {
+        // P4: optional-prop guard + Set + Set.has — the DataSourceDetailsDialog
+        // visibility-gate pattern. \`activeGroups\` is missing in args, so the
+        // \`&&\` must short-circuit to false and the ternary must pick
+        // DEFAULT_ACTIVE. \`new Set(...)\` constructs at scan time. \`.has(...)\`
+        // dispatches against the live Set prototype.
+        const active = new Set(activeGroups && activeGroups.length ? activeGroups : DEFAULT_ACTIVE);
+        return (
+          <div>
+            {/* P1: String.prototype.slice with positive + negative indices */}
+            <span data-role="hash-short">
+              {trade.txHash.slice(0, 6)}…{trade.txHash.slice(-4)}
+            </span>
+            {/* P1: Number global + Number method */}
+            <span data-role="count-padded">{Number(trade.countBig).toString().padStart(8, "0")}</span>
+            {/* P1: Math global */}
+            <span data-role="abs-of-neg">{Math.abs(-42)}</span>
+            {/* P2: Intl.NumberFormat instance + .format() chain */}
+            <span data-role="price-inline">{inlineUsdFmt.format(Number(trade.priceRaw))}</span>
+            {/* P3: user-function evaluation, single arg */}
+            <span data-role="price-user-fn">{formatUsd(trade.priceRaw)}</span>
+            {/* P3: chained user-function evaluation (formatUsdFromBase ->
+                  baseUnitsToNumber -> usdFormatter.format) */}
+            <span data-role="fee-from-base">{formatUsdFromBase(trade.feeBaseUnits)}</span>
+            {/* P3: user-function with default-param fallback path */}
+            <span data-role="missing-fallback">{formatUsd(null)}</span>
+            {/* P3: IIFE — inline arrow invoked immediately to scope a few
+                statements inside a single JSX expression. Real-world case:
+                perps RecentTradeDetailsDialog Collateral Delta cell. Tests
+                if-return, local const binding, template literal, and a
+                chained user-fn + Intl call inside an anonymous arrow. */}
+            <span data-role="delta-iife">
+              {(() => {
+                const delta = formatUsdFromBase(trade.priceRaw);
+                if (delta === "-") return "-";
+                const label = trade.countBig > 0 ? "up" : "down";
+                return label + " " + delta;
+              })()}
+            </span>
+            {/* P4: Set membership gate. Both branches must render when the
+                Set was built from DEFAULT_ACTIVE (active.has returns true). */}
+            {active.has("price") ? <span data-role="set-price-section">price-on</span> : null}
+            {active.has("market") ? <span data-role="set-market-section">market-on</span> : null}
+            {/* P4: Set negative case — missing key must return false and
+                hide the section, not undefined (which would drop on
+                JSX-walker fall-through). */}
+            {active.has("nonexistent") ? <span data-role="set-missing-section">should-not-render</span> : <span data-role="set-missing-fallback">missing-off</span>}
+            {/* P5: simple imported-object lookup (no cast) */}
+            <span data-role="symbol-direct">{TOKEN_LABELS[trade.mint]?.symbol ?? "unknown"}</span>
+            {/* P5: AsExpression unwrap — \`(trade as any).mint\` must
+                evaluate through the cast so the imported-object lookup
+                below can read .symbol. Mirrors the perps pattern
+                \`TOKEN_METADATA[(position as any).marketMint]?.symbol\`. */}
+            <span data-role="symbol-via-cast">{TOKEN_LABELS[(trade as any).mint]?.symbol ?? "unknown"}</span>
+            {/* P5: Imported array literal — SUPPORTED_MINTS comes from
+                ./constants. \`.includes(trade.mint)\` must dispatch
+                against the resolved array (not undefined). */}
+            <span data-role="mint-supported">{SUPPORTED_MINTS.includes(trade.mint) ? "supported" : "unsupported"}</span>
+          </div>
+        );
+      }
+    `,
+    'utf-8'
+  );
+
+  fs.writeFileSync(
+    path.join(FIXTURE_DIR, 'Receipt.stories.tsx'),
+    `
+      import { Receipt } from "./Receipt";
+      const meta = { component: Receipt };
+      export default meta;
+
+      export const Default = {
+        args: {
+          trade: {
+            txHash: "5xKx8mP3qN7vYbR2tF6gH4nDcWeZL9aJpKmU8oXyB1sErT3hQ",
+            priceRaw: "172800",
+            feeBaseUnits: "2500000",
+            countBig: 7,
+            mint: "So11111111111111111111111111111111111111112",
+          },
+        },
+      };
+    `,
+    'utf-8'
+  );
+}
+
+function cleanupFixtures(): void {
+  try {
+    fs.rmSync(FIXTURE_DIR, { recursive: true, force: true });
+  } catch {
+    /* ignore */
+  }
+}
+
+async function run(): Promise<void> {
+  writeFixtures();
+
+  const scanner = new ComponentScanner({
+    componentPaths: [FIXTURE_DIR],
+    filePattern: '*.tsx',
+    exclude: [],
+  });
+
+  const results = (await scanner.scanAll()) as unknown as ScannedShape[];
+  const receipt = results.find((r) => r.name === 'Receipt');
+  assert.ok(receipt, `must find Receipt; got: ${results.map((r) => r.name).join(', ')}`);
+  const story = (receipt.stories || []).find((s) => s.name === 'Default');
+  assert.ok(story?.jsxTree, 'Default story must produce a jsxTree');
+
+  const textForRole = (role: string): string => {
+    const el = findElementByRole(story.jsxTree, role);
+    assert.ok(el, `expected element with data-role="${role}" in story tree`);
+    return collectText(el).join('');
+  };
+
+  // ---------------------------------------------------------------------------
+  // P1: built-in string/number method calls + global conversions
+  // ---------------------------------------------------------------------------
+  {
+    const hashShort = textForRole('hash-short');
+    assert.equal(
+      hashShort,
+      '5xKx8m…T3hQ',
+      `P1 string.slice(start)/slice(-n) must evaluate to the truncated hash; got "${hashShort}"`,
+    );
+  }
+  {
+    const countPadded = textForRole('count-padded');
+    assert.equal(
+      countPadded,
+      '00000007',
+      `P1 Number(...).toString().padStart(...) chain must evaluate; got "${countPadded}"`,
+    );
+  }
+  {
+    const abs = textForRole('abs-of-neg');
+    assert.equal(abs, '42', `P1 Math.abs(-42) must evaluate to "42"; got "${abs}"`);
+  }
+
+  // ---------------------------------------------------------------------------
+  // P2: Intl.NumberFormat module instance + .format()
+  // ---------------------------------------------------------------------------
+  {
+    const priceInline = textForRole('price-inline');
+    assert.equal(
+      priceInline,
+      '$172,800.00',
+      `P2 inline Intl.NumberFormat instance must format numeric arg; got "${priceInline}"`,
+    );
+  }
+
+  // ---------------------------------------------------------------------------
+  // P3: user-function evaluation (single arg, chained, default-param)
+  // ---------------------------------------------------------------------------
+  {
+    const priceUserFn = textForRole('price-user-fn');
+    assert.equal(
+      priceUserFn,
+      '$172,800.00',
+      `P3 formatUsd(priceRaw) must evaluate via the imported arrow function and Intl chain; got "${priceUserFn}"`,
+    );
+  }
+  {
+    const feeFromBase = textForRole('fee-from-base');
+    assert.equal(
+      feeFromBase,
+      '$2.50',
+      `P3 formatUsdFromBase -> baseUnitsToNumber chain ($2500000 / 10^6 = 2.5) must format to "$2.50"; got "${feeFromBase}"`,
+    );
+  }
+  {
+    const missingFallback = textForRole('missing-fallback');
+    assert.equal(
+      missingFallback,
+      '-',
+      `P3 user-fn must honour the default-param fallback path when arg is null; got "${missingFallback}"`,
+    );
+  }
+  {
+    const deltaIife = textForRole('delta-iife');
+    // 172800 / 10**6 (USD_DECIMALS in baseUnitsToNumber) = 0.1728 → "$0.17"
+    // Prefixed with "up " by the IIFE's binary-op + ternary path.
+    assert.equal(
+      deltaIife,
+      'up $0.17',
+      `P3 IIFE must interpret inline arrow body (if-return + ternary + string concat + chained user-fn / Intl); got "${deltaIife}"`,
+    );
+  }
+
+  // ---------------------------------------------------------------------------
+  // P4: Set construction + .has() membership gate, plus optional-prop short
+  //     circuit (activeGroups undefined → ternary picks DEFAULT_ACTIVE).
+  //
+  // Real-world trigger: perps DataSourceDetailsDialog renders nothing past
+  // the header when activeGroups is omitted because the scanner couldn't
+  // resolve `new Set(...)` / `.has(...)` and every section's
+  // `isXActive ? <Section/> : null` evaluated to undefined.
+  // ---------------------------------------------------------------------------
+  {
+    const priceSection = textForRole('set-price-section');
+    assert.equal(
+      priceSection,
+      'price-on',
+      `P4 Set.has("price") (from DEFAULT_ACTIVE) must return true → section renders; got "${priceSection}"`,
+    );
+  }
+  {
+    const marketSection = textForRole('set-market-section');
+    assert.equal(
+      marketSection,
+      'market-on',
+      `P4 Set.has("market") (from DEFAULT_ACTIVE) must return true → section renders; got "${marketSection}"`,
+    );
+  }
+  {
+    const missingFallbackSection = textForRole('set-missing-fallback');
+    assert.equal(
+      missingFallbackSection,
+      'missing-off',
+      `P4 Set.has("nonexistent") must return false → ternary picks the fallback span; got "${missingFallbackSection}"`,
+    );
+  }
+
+  // ---------------------------------------------------------------------------
+  // P5: AsExpression unwrap + imported object/array literal resolution.
+  // Real-world trigger: perps StopLossModal renders `LONG So11` (4-char
+  // mint slice fallback) instead of `LONG SOL` because `TOKEN_METADATA[
+  // (position as any).marketMint]?.symbol` couldn't resolve through the
+  // type assertion and the imported lookup table.
+  // ---------------------------------------------------------------------------
+  {
+    const symbolDirect = textForRole('symbol-direct');
+    assert.equal(
+      symbolDirect,
+      'SOL',
+      `P5 imported-object lookup (no cast) must resolve TOKEN_LABELS[trade.mint].symbol; got "${symbolDirect}"`,
+    );
+  }
+  {
+    const symbolViaCast = textForRole('symbol-via-cast');
+    assert.equal(
+      symbolViaCast,
+      'SOL',
+      `P5 (trade as any).mint must unwrap through AsExpression AND TOKEN_LABELS imported object lookup must resolve; got "${symbolViaCast}"`,
+    );
+  }
+  {
+    const mintSupported = textForRole('mint-supported');
+    assert.equal(
+      mintSupported,
+      'supported',
+      `P5 imported array (SUPPORTED_MINTS).includes(trade.mint) must dispatch against the resolved array; got "${mintSupported}"`,
+    );
+  }
+
+  console.log('expression-evaluator-regression: PASS (13 cases — P1 + P2 + P3 + IIFE + P4 Set + P5 cast/imports)');
+}
+
+run()
+  .catch((err) => {
+    cleanupFixtures();
+    throw err;
+  })
+  .then(cleanupFixtures);

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

@@ -477,4 +477,160 @@ function scrollAreaTree(extraScrollbarClasses: string[] = []): NodeIR {
   );
 }
 
-console.log('framework-adapter-shadcn-regression: PASS (3 registry + 4 leaf + 4 avatar + 5 progress + 5 slider + 2 scroll-area cases)');
+// (i3) When the ScrollArea wraps a `<table>`, replace
+// ScrollAreaPrimitive.Root with a plain `<div>` that inherits Root's
+// classes (the consumer's padding from the `className` prop). The
+// synthetic div is `kind: 'element'` so it gets the normal block-
+// stretch-to-parent-width treatment instead of staying HUG-primary
+// like the original `kind: 'component'` Root.
+{
+  const tableInsideScrollArea = el({}, [], [
+    {
+      kind: 'element',
+      tagName: 'ScrollAreaPrimitive.Root',
+      tagLower: 'div',
+      props: {},
+      classes: ['relative', 'overflow-hidden', 'px-4', 'sm:pl-3', 'sm:pr-0'],
+      children: [
+        {
+          kind: 'element',
+          tagName: 'ScrollAreaPrimitive.Viewport',
+          tagLower: 'div',
+          props: {},
+          classes: ['h-full', 'w-full'],
+          children: [{
+            kind: 'element',
+            tagName: 'table',
+            tagLower: 'table',
+            props: {},
+            classes: ['min-w-full'],
+            children: [],
+          }],
+        },
+        {
+          kind: 'element',
+          tagName: 'ScrollAreaPrimitive.Scrollbar',
+          tagLower: 'div',
+          props: {},
+          classes: [],
+          children: [],
+        },
+      ],
+    } as unknown as NodeIR,
+  ]);
+  const next = applyShadcnAdapter(tableInsideScrollArea);
+  const top = (next as { children: NodeIR[] }).children;
+  assert.equal(top.length, 1, 'after rewrite the wrapper still has a single direct child');
+  const wrapper = top[0] as { tagName?: string; classes?: string[]; children?: NodeIR[] };
+  assert.equal(wrapper.tagName, 'div', 'Root is replaced by a plain <div>');
+  // The scrollbar-gutter mirror: `sm:pr-0` was paired with `sm:pl-3`,
+  // so the strip swaps it for `sm:pr-3`. Other classes are preserved.
+  // (Without this, row separators inside the table run flush to the
+  // card's right edge because Figma has no scrollbar to absorb the
+  // gap that the `pr-0` was reserving in CSS.)
+  assert.deepEqual(
+    wrapper.classes,
+    ['relative', 'overflow-hidden', 'px-4', 'sm:pl-3', 'sm:pr-3'],
+    "scrollbar-gutter sm:pr-0 mirrored to sm:pr-3 (matching sm:pl-3)",
+  );
+  assert.equal(wrapper.children?.length, 1, 'Scrollbar dropped, Viewport flattened — only the table survives inside');
+  assert.equal(
+    (wrapper.children?.[0] as { tagName?: string }).tagName,
+    'table',
+    'the table sits directly inside the synthetic div',
+  );
+}
+
+// (i4) ScrollArea wrapping non-table content keeps the Root wrapper.
+// Standalone `<ScrollArea>` stories rely on the wrapper for their
+// visual shape; only the table case gets the structural rewrite.
+{
+  const nonTableScrollArea = el({}, [], [
+    {
+      kind: 'element',
+      tagName: 'ScrollAreaPrimitive.Root',
+      tagLower: 'div',
+      props: {},
+      classes: ['relative'],
+      children: [
+        {
+          kind: 'element',
+          tagName: 'ScrollAreaPrimitive.Viewport',
+          tagLower: 'div',
+          props: {},
+          classes: [],
+          children: [el({}, ['p-3'], [])],
+        },
+      ],
+    } as unknown as NodeIR,
+  ]);
+  const next = applyShadcnAdapter(nonTableScrollArea);
+  const top = (next as { children: NodeIR[] }).children;
+  assert.equal(top.length, 1, 'non-table ScrollArea keeps its Root');
+  assert.equal(
+    (top[0] as { tagName?: string }).tagName,
+    'ScrollAreaPrimitive.Root',
+    'Root must survive when its subtree does NOT contain a table',
+  );
+}
+
+// (i5) Scrollbar-gutter mirror edge cases.
+// - `pr-0` with no matching `pl-N` in the same variant is left alone
+//   (could be a genuine edge-aligned design).
+// - `px-N` shorthand counts as a same-breakpoint `pl-N` source, so
+//   `px-4 sm:pr-0` mirrors to `px-4 sm:pr-4`.
+{
+  // Edge A: only sm:pr-0, no sm:pl. Leave alone.
+  const onlyPrZero = el({}, [], [
+    {
+      kind: 'element',
+      tagName: 'ScrollAreaPrimitive.Root',
+      tagLower: 'div',
+      props: {},
+      classes: ['sm:pr-0'],
+      children: [{
+        kind: 'element',
+        tagName: 'table',
+        tagLower: 'table',
+        props: {},
+        classes: [],
+        children: [],
+      }],
+    } as unknown as NodeIR,
+  ]);
+  const out = applyShadcnAdapter(onlyPrZero);
+  const wrapper = (out as { children: NodeIR[] }).children[0] as { classes?: string[] };
+  assert.deepEqual(wrapper.classes, ['sm:pr-0'], 'lone sm:pr-0 (no matching pl) is preserved');
+
+  // Edge B: px-4 counts as pl source — sm:pr-0 mirrors to sm:pr-0… or 4?
+  // Note: px-4 has no variant, so it provides the base ('') pl source,
+  // not the sm: source. sm:pr-0 doesn't match because no sm:pl.
+  // Result: sm:pr-0 left alone, but a *base* `pr-0` (if present) would
+  // mirror against px-4.
+  const pxWithPrZero = el({}, [], [
+    {
+      kind: 'element',
+      tagName: 'ScrollAreaPrimitive.Root',
+      tagLower: 'div',
+      props: {},
+      classes: ['px-4', 'pr-0'],
+      children: [{
+        kind: 'element',
+        tagName: 'table',
+        tagLower: 'table',
+        props: {},
+        classes: [],
+        children: [],
+      }],
+    } as unknown as NodeIR,
+  ]);
+  const out2 = applyShadcnAdapter(pxWithPrZero);
+  const wrapper2 = (out2 as { children: NodeIR[] }).children[0] as { classes?: string[] };
+  assert.deepEqual(
+    wrapper2.classes,
+    ['px-4', 'pr-4'],
+    'base pr-0 mirrors against base px-4 (px contributes pl in same variant)',
+  );
+}
+
+console.log('framework-adapter-shadcn-regression: PASS (3 registry + 4 leaf + 4 avatar + 5 progress + 5 slider + 5 scroll-area cases)');