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

package/scanner/conditional-map-branch-regression.ts

@@ -0,0 +1,180 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: when a `.map()` iteration is the truthy (or falsy) branch
+ * of a JSX ternary, `pushChosenJsxBranch` must dispatch to
+ * `expandMapCall` instead of falling back to `resolveExpressionValue`
+ * (which doesn't know how to iterate `.map`).
+ *
+ * Bug shape that prompted this fix (greenhouse-app `RecentTradesCard`):
+ *
+ *   <TableBody>
+ *     {rows.length ? (
+ *       rows.map((row) => <TableRow key={row.id}>...</TableRow>)
+ *     ) : (
+ *       <EmptyRow />
+ *     )}
+ *   </TableBody>
+ *
+ * Without this fix the scanner picked the truthy branch correctly
+ * (rows.length resolves to a positive number), then silently dropped the
+ * CallExpression and rendered an empty `<tbody>` in Figma. The fix adds
+ * a `Node.isCallExpression(chosen)` case in `pushChosenJsxBranch` that
+ * routes `.map(...)` through `expandMapCall`.
+ *
+ * Bare `arr.map(...)` calls directly inside JSX (no ternary wrapper)
+ * already worked via the `Node.isCallExpression(expr)` branch in
+ * `buildJsxTree`. This fixture exists specifically to lock in the
+ * conditional-branch case.
+ */
+
+interface JsxNodeLike {
+  type: 'element' | 'text';
+  tagName?: string;
+  content?: string;
+  props?: Record<string, unknown>;
+  children?: JsxNodeLike[];
+}
+
+interface ScannedShape {
+  name: string;
+  stories?: Array<{ name: string; jsxTree?: JsxNodeLike }>;
+}
+
+const FIXTURE_DIR = path.resolve(
+  process.cwd(),
+  'tools/figma-plugin/scanner/__fixtures__/conditional-map-branch'
+);
+
+function findAll(node: JsxNodeLike | undefined, 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 || []) findAll(c, tag, out);
+  return out;
+}
+function findOne(node: JsxNodeLike | undefined, tag: string): JsxNodeLike | null {
+  if (!node || node.type !== 'element') return null;
+  if (node.tagName === tag) return node;
+  for (const c of node.children || []) {
+    const f = findOne(c, tag);
+    if (f) return f;
+  }
+  return null;
+}
+
+function writeFixtures(): void {
+  fs.mkdirSync(FIXTURE_DIR, { recursive: true });
+  fs.writeFileSync(
+    path.join(FIXTURE_DIR, 'TradesList.tsx'),
+    `
+      export interface TradeRow {
+        id: string;
+        label: string;
+      }
+      export function TradesList({ rows }: { rows: TradeRow[] }) {
+        return (
+          <div>
+            <h1>Trades</h1>
+            {rows.length ? (
+              rows.map((row) => (
+                <div data-row-id={row.id}>{row.label}</div>
+              ))
+            ) : (
+              <div data-role="empty">No trades</div>
+            )}
+          </div>
+        );
+      }
+    `,
+    'utf-8'
+  );
+  fs.writeFileSync(
+    path.join(FIXTURE_DIR, 'TradesList.stories.tsx'),
+    `
+      import { TradesList } from "./TradesList";
+      const meta = { component: TradesList };
+      export default meta;
+
+      // Inline array literal in args + ternary-with-map: exercises the
+      // pushChosenJsxBranch CallExpression case.
+      export const WithRows = {
+        args: {
+          rows: [
+            { id: "a", label: "Alpha" },
+            { id: "b", label: "Beta" },
+            { id: "c", label: "Gamma" },
+          ],
+        },
+      };
+
+      // Empty rows → ternary picks the falsy branch (the empty-state div).
+      // Exercises the JsxElement case in pushChosenJsxBranch, which always
+      // worked but is the natural counterpart to assert here.
+      export const Empty = {
+        args: { rows: [] },
+      };
+    `,
+    'utf-8'
+  );
+}
+
+function cleanup(): 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 def = results.find((r) => r.name === 'TradesList');
+  assert.ok(def, 'TradesList component must be scanned');
+  const byName = (n: string) => (def.stories || []).find((s) => s.name === n);
+
+  // -------------------------------------------------------------------------
+  // WithRows: the truthy branch of `rows.length ? rows.map(...) : <Empty/>`
+  // must expand the .map and emit one <div data-row-id> per row.
+  // -------------------------------------------------------------------------
+  {
+    const story = byName('WithRows');
+    assert.ok(story?.jsxTree, 'WithRows story must have a jsxTree');
+    const rows = findAll(story.jsxTree, 'div').filter((n) => n.props?.['data-row-id'] != null);
+    assert.equal(rows.length, 3, `expected 3 row divs from rows.map, got ${rows.length}`);
+    const ids = rows.map((r) => r.props?.['data-row-id']).join(',');
+    assert.equal(ids, 'a,b,c', `row order/ids must round-trip, got "${ids}"`);
+    const empty = findOne(story.jsxTree, 'div');
+    // The empty-state div has data-role="empty" — must NOT be emitted when
+    // rows are present.
+    const emptyDiv = findAll(story.jsxTree, 'div').find((n) => n.props?.['data-role'] === 'empty');
+    assert.equal(emptyDiv, undefined, 'empty-state div must not appear when rows are populated');
+    assert.ok(empty, 'sanity: root div renders');
+  }
+
+  // -------------------------------------------------------------------------
+  // Empty: the falsy branch picks the empty-state div (JsxElement path,
+  // which already worked — this asserts symmetry).
+  // -------------------------------------------------------------------------
+  {
+    const story = byName('Empty');
+    assert.ok(story?.jsxTree, 'Empty story must have a jsxTree');
+    const emptyDiv = findAll(story.jsxTree, 'div').find((n) => n.props?.['data-role'] === 'empty');
+    assert.ok(emptyDiv, 'empty-state div must appear when rows is empty');
+    const rowDivs = findAll(story.jsxTree, 'div').filter((n) => n.props?.['data-row-id'] != null);
+    assert.equal(rowDivs.length, 0, 'no row divs when rows is empty');
+  }
+
+  cleanup();
+  console.log('conditional-map-branch-regression: PASS (2 cases)');
+}
+
+run().catch((err) => {
+  cleanup();
+  console.error(err);
+  process.exit(1);
+});

package/scanner/css-token-reader.ts

@@ -240,7 +240,19 @@ export function resolveCssTokenPathFromImports(filePath: string, visited: Set<st
   return absolute;
 }
 
-function readCssWithImports(filePath: string, visited: Set<string> = new Set()): string {
+interface ReadCssOptions {
+  /**
+   * When true, `@import` directives that resolve via `node_modules`
+   * (bare specifiers like `"tailwindcss"` / `"tw-animate-css"`) are
+   * NOT expanded — only consumer-owned files (relative paths) get
+   * inlined. Used by the consumer-only scan path so the Design Tokens
+   * panel can show ONLY what the consumer wrote, without Tailwind's
+   * defaults leaking in.
+   */
+  skipBareImports?: boolean;
+}
+
+function readCssWithImports(filePath: string, visited: Set<string> = new Set(), opts: ReadCssOptions = {}): string {
   const absolute = path.resolve(filePath);
   if (visited.has(absolute)) return '';
   visited.add(absolute);
@@ -262,19 +274,46 @@ function readCssWithImports(filePath: string, visited: Set<string> = new Set()):
   const parts: string[] = [];
   for (const node of root.nodes || []) {
     if (node.type === 'atrule' && ((node as AtRule).name || '').toLowerCase() === 'import') {
-      const imported = resolveImportedCssPath(absolute, (node as AtRule).params || '');
+      const params = (node as AtRule).params || '';
+      const specifier = extractImportSpecifier(params) || '';
+      const isBare = specifier && !specifier.startsWith('./') && !specifier.startsWith('../') && !path.isAbsolute(specifier);
+      if (opts.skipBareImports && isBare) {
+        // Drop the import entirely — don't expand and don't preserve the
+        // unresolved @import line either (the walker would otherwise see
+        // a parameterless atrule with no body).
+        continue;
+      }
+      const imported = resolveImportedCssPath(absolute, params);
       if (imported) {
-        const importedCss = readCssWithImports(imported, visited);
+        const importedCss = readCssWithImports(imported, visited, opts);
         if (importedCss.trim()) parts.push(importedCss);
         continue;
       }
     }
-    parts.push(node.toString());
+    parts.push(serializeNodeWithTerminator(node));
   }
 
   return parts.join('\n');
 }
 
+/**
+ * Serialize a postcss node for concatenation. Bare at-rules (no block) need
+ * an explicit terminating `;` — postcss's `node.toString()` omits trailing
+ * semicolons since they're whitespace-style raws, but concatenating two
+ * unterminated bare at-rules (e.g. `@plugin "x"\n@custom-variant y\n@theme
+ * inline {...}`) collides them into a single rule whose params swallow
+ * everything after. Greenhouse-app's `@theme inline { --font-* }` block
+ * was being eaten as params of the preceding `@plugin` at-rule before
+ * this fix, so its font / colour overrides never reached the walker.
+ */
+function serializeNodeWithTerminator(node: postcss.Node): string {
+  const text = node.toString();
+  if (node.type !== 'atrule') return text;
+  const at = node as AtRule;
+  if (at.nodes) return text; // has a {} block — already terminated
+  return text.trimEnd().endsWith(';') ? text : text + ';';
+}
+
 export function discoverCssTokenPath(projectRoot: string, explicitPath?: string): string | null {
   if (explicitPath && explicitPath.trim()) {
     return discoverFilePath(projectRoot, explicitPath.trim());
@@ -567,6 +606,28 @@ function parseDtcgTokenMap(
 }
 
 export function readTokenSourceMap(options: ReadTokenSourceOptions): ScannedTokenMap {
+  return readTokenSourceMapInternal(options, {});
+}
+
+/**
+ * Like `readTokenSourceMap`, but only walks tokens the consumer actually
+ * wrote in their own files. `@import` directives that resolve via
+ * `node_modules` (Tailwind, tw-animate-css, …) are dropped from the
+ * concat instead of expanded, so the resulting map omits Tailwind's
+ * defaults (`--font-serif`, `--text-sm`, the default spacing scale,
+ * etc.). Used by the design-tokens panel to show only the consumer's
+ * overrides — runtime token resolution still uses the full map from
+ * `readTokenSourceMap` so utilities like `text-sm` keep working.
+ *
+ * Returns an empty map when the consumer mode is DTCG-only — DTCG
+ * files are by definition consumer-owned, so the full scan IS already
+ * the consumer-only scan.
+ */
+export function readConsumerOwnedTokenMap(options: ReadTokenSourceOptions): ScannedTokenMap {
+  return readTokenSourceMapInternal(options, { skipBareImports: true });
+}
+
+function readTokenSourceMapInternal(options: ReadTokenSourceOptions, readOpts: ReadCssOptions): ScannedTokenMap {
   const projectRoot = path.resolve(options.projectRoot);
   const requestedMode: TokenSourceMode = options.tokenSourceMode === 'dtcg' ? 'dtcg' : 'css';
   const cssPath = discoverCssTokenPath(projectRoot, options.cssTokenPath);
@@ -581,7 +642,7 @@ export function readTokenSourceMap(options: ReadTokenSourceOptions): ScannedToke
 
   // css mode: CSS preferred; fall back to DTCG if no CSS file found, then embedded.
   if (cssPath) {
-    const cssText = readCssWithImports(cssPath);
+    const cssText = readCssWithImports(cssPath, new Set(), readOpts);
     // Use the file that actually contains the declarations as source so the
     // write-back path (PR/patch) targets the right file even when globals.css
     // delegates token definitions to an imported file like tokens.css.

package/scanner/dialog-content-gate-regression.ts

@@ -0,0 +1,195 @@
+import assert from 'node:assert/strict';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: every `DialogContent` / `DialogPrimitive.Content` in a
+ * scanned JSX tree gets an `__dialogRootIsOpen` data prop derived
+ * from the nearest enclosing `<Dialog>` / `<DialogPrimitive.Root>`'s
+ * `open` / `defaultOpen` props. The render-time gate in
+ * `ui-builder.ts` uses this annotation to suppress nested closed
+ * dialogs so they don't bleed inline next to their parent.
+ *
+ * Real-world trigger: greenhouse-app `IncreasePositionModal` has a
+ * help-info `<Dialog>` nested inside its `<DialogHeader>`. The outer
+ * Dialog receives `open={true}` from the story, the inner has no
+ * explicit `open`. Before the gate, both DialogContents rendered —
+ * the inner "Open position / Overview" content appeared as a sliver
+ * floating top-right of the main modal in the sm preview, and as
+ * vertical-letter-per-line description text in the base preview.
+ *
+ * Why the annotation is required (instead of inheriting context at
+ * render time): the outer DialogContent is portal-extracted at scan
+ * time, so by the time `buildFigmaNode` reaches it the wrapping
+ * Dialog Root is no longer on its ancestor chain. Baking the open
+ * state into a data prop at scan time keeps the gate universal
+ * regardless of which portal path the render takes.
+ */
+
+interface TestScannerView {
+  transformJsxTree: (tree: unknown) => unknown;
+}
+
+const scanner = new ComponentScanner({
+  componentPaths: [],
+  filePattern: '*.tsx',
+  exclude: [],
+}) as unknown as TestScannerView;
+
+interface NodeLike {
+  type: 'element' | 'text';
+  tagName?: string;
+  isComponent?: boolean;
+  props?: Record<string, string>;
+  children?: NodeLike[];
+  content?: string;
+}
+
+function element(
+  tagName: string,
+  props: Record<string, string> = {},
+  children: NodeLike[] = [],
+): NodeLike {
+  return {
+    type: 'element',
+    tagName,
+    isComponent: /^[A-Z]/.test(tagName),
+    props,
+    children,
+  };
+}
+
+function findElements(node: NodeLike, tagName: string, out: NodeLike[] = []): NodeLike[] {
+  if (!node || node.type !== 'element') return out;
+  if (node.tagName === tagName) out.push(node);
+  for (const child of node.children || []) findElements(child, tagName, out);
+  return out;
+}
+
+const transform = (tree: NodeLike): NodeLike =>
+  scanner.transformJsxTree(tree as unknown) as NodeLike;
+
+// ---------------------------------------------------------------------------
+// Case 1: outer Dialog open=true, nested Dialog has no open prop.
+// Outer content gets isOpen=true, nested content gets isOpen=false.
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', {}, [
+    element('Dialog', { open: 'true' }, [
+      element('DialogContent', {}, [
+        element('DialogHeader', {}, [
+          element('DialogTitle', {}, []),
+          element('Dialog', {}, [   // nested, no open
+            element('DialogTrigger', {}, []),
+            element('DialogContent', {}, [
+              element('p', {}, []),
+            ]),
+          ]),
+        ]),
+      ]),
+    ]),
+  ]);
+
+  const result = transform(tree);
+  const contents = findElements(result, 'DialogContent');
+  assert.equal(contents.length, 2, 'both DialogContents preserved in the tree');
+  assert.equal(
+    contents[0].props?.__dialogRootIsOpen,
+    'true',
+    'outer DialogContent annotated with isOpen=true from the open prop',
+  );
+  assert.equal(
+    contents[1].props?.__dialogRootIsOpen,
+    'false',
+    'nested DialogContent annotated with isOpen=false — gate will suppress it at render time',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: defaultOpen also counts as open
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', {}, [
+    element('Dialog', { defaultOpen: 'true' }, [
+      element('DialogContent', {}, []),
+    ]),
+  ]);
+  const result = transform(tree);
+  const contents = findElements(result, 'DialogContent');
+  assert.equal(
+    contents[0].props?.__dialogRootIsOpen,
+    'true',
+    'defaultOpen=true propagates as isOpen — covers stories that pre-open the modal',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: DialogPrimitive.Root / DialogPrimitive.Content alias works the same
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', {}, [
+    element('DialogPrimitive.Root', { open: 'true' }, [
+      element('DialogPrimitive.Content', {}, []),
+    ]),
+  ]);
+  const result = transform(tree);
+  const contents = findElements(result, 'DialogPrimitive.Content');
+  assert.equal(
+    contents[0].props?.__dialogRootIsOpen,
+    'true',
+    'Primitive.Root + Primitive.Content combo is annotated the same way',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 4: deeply nested Dialog — each Content gets the nearest Root's state
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', {}, [
+    element('Dialog', { open: 'true' }, [
+      element('DialogContent', { 'data-marker': 'outer' }, [
+        element('Dialog', { defaultOpen: 'true' }, [
+          element('DialogContent', { 'data-marker': 'middle' }, [
+            element('Dialog', {}, [
+              element('DialogContent', { 'data-marker': 'inner' }, []),
+            ]),
+          ]),
+        ]),
+      ]),
+    ]),
+  ]);
+  const result = transform(tree);
+  const contents = findElements(result, 'DialogContent');
+  const byMarker = new Map(contents.map((c) => [c.props?.['data-marker'], c]));
+  assert.equal(byMarker.get('outer')?.props?.__dialogRootIsOpen, 'true', 'outermost: open=true');
+  assert.equal(byMarker.get('middle')?.props?.__dialogRootIsOpen, 'true', 'middle: defaultOpen=true');
+  assert.equal(
+    byMarker.get('inner')?.props?.__dialogRootIsOpen,
+    'false',
+    'innermost: no open prop → falsy annotation — gate suppresses it independent of ancestor state',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 5: DialogContent NOT inside any Dialog Root — annotation absent.
+// The render-time gate falls through (no suppression) since this is the
+// portal-extracted shape that other stories rely on.
+// ---------------------------------------------------------------------------
+
+{
+  const tree = element('div', {}, [
+    element('DialogContent', {}, []),
+  ]);
+  const result = transform(tree);
+  const contents = findElements(result, 'DialogContent');
+  assert.equal(
+    contents[0].props?.__dialogRootIsOpen,
+    undefined,
+    'DialogContent with no Dialog ancestor stays unannotated → renderer falls back to render',
+  );
+}
+
+console.log('dialog-content-gate-regression: PASS');