inkbridge 0.1.0-beta.21 → 0.1.0-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inkbridge",
-  "version": "0.1.0-beta.21",
+  "version": "0.1.0-beta.22",
   "description": "Generate a Figma design system from your Storybook stories — Tailwind React components rendered as native frames, design tokens, component states, and round-trip code sync.",
   "type": "module",
   "bin": {
@@ -95,8 +95,11 @@
     "test:input-range": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/input-range-regression.ts",
     "test:font-family-extract": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/font-family-extract-regression.ts",
     "test:local-const-className": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/local-const-className-regression.ts",
+    "test:imported-array-map": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/imported-array-map-regression.ts",
+    "test:story-args-resolution": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/story-args-resolution-regression.ts",
+    "test:intrinsic-sizing": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/intrinsic-sizing-regression.ts",
     "docs:audit": "node ./scripts/docs-audit.mjs",
-    "verify": "pnpm run scan && pnpm run test:blob && pnpm run test:tokens && pnpm run test:font && pnpm run test:radial && pnpm run test:transform && pnpm run test:csspatch && pnpm run test:state-classification && pnpm run test:component-sections && pnpm run test:block-cache && pnpm run test:story-dimensioning && pnpm run test:story-render-strategy && pnpm run test:render-prop-parser && pnpm run test:story-diagnostics && pnpm run test:instance-rendering && pnpm run test:layout-spacing && pnpm run test:layout-sizing && pnpm run test:layout-alignment && pnpm run test:layout-flex && pnpm run test:layout-mode && pnpm run test:svg-marker && pnpm run test:aspect-ratio && pnpm run test:percent-position && pnpm run test:svg-fill-parent && pnpm run test:inline-flex && pnpm run test:child-sizing-matrix && pnpm run test:full-width-matrix && pnpm run test:text-resize-matrix && pnpm run test:provider-flatten && pnpm run test:provider-cascade && pnpm run test:selection-pressed && pnpm run test:cva-jsx-child-fallback && pnpm run test:cva-master-icon && pnpm run test:data-attr-prop-alias && pnpm run test:jsx-prop-unresolved && pnpm run test:grid-cols-extraction && pnpm run test:explicit-size-root && pnpm run test:image-src-collector && pnpm run test:size-full-normalization && pnpm run test:stretch-to-parent-width && pnpm run test:framework-adapter-shadcn && pnpm run test:compound-classes-lookup && pnpm run test:sandbox-spread && pnpm run test:jsx-text && pnpm run test:aspect-percent && pnpm run test:svg-group-inherit && pnpm run test:svg-marker-inline && pnpm run test:ring-utility && pnpm run test:adapter-utils && pnpm run test:input-range && pnpm run test:font-family-extract && pnpm run test:local-const-className && pnpm run docs:audit && pnpm run build && pnpm run test:bundle-size",
+    "verify": "pnpm run scan && pnpm run test:blob && pnpm run test:tokens && pnpm run test:font && pnpm run test:radial && pnpm run test:transform && pnpm run test:csspatch && pnpm run test:state-classification && pnpm run test:component-sections && pnpm run test:block-cache && pnpm run test:story-dimensioning && pnpm run test:story-render-strategy && pnpm run test:render-prop-parser && pnpm run test:story-diagnostics && pnpm run test:instance-rendering && pnpm run test:layout-spacing && pnpm run test:layout-sizing && pnpm run test:layout-alignment && pnpm run test:layout-flex && pnpm run test:layout-mode && pnpm run test:svg-marker && pnpm run test:aspect-ratio && pnpm run test:percent-position && pnpm run test:svg-fill-parent && pnpm run test:inline-flex && pnpm run test:child-sizing-matrix && pnpm run test:full-width-matrix && pnpm run test:text-resize-matrix && pnpm run test:provider-flatten && pnpm run test:provider-cascade && pnpm run test:selection-pressed && pnpm run test:cva-jsx-child-fallback && pnpm run test:cva-master-icon && pnpm run test:data-attr-prop-alias && pnpm run test:jsx-prop-unresolved && pnpm run test:grid-cols-extraction && pnpm run test:explicit-size-root && pnpm run test:image-src-collector && pnpm run test:size-full-normalization && pnpm run test:stretch-to-parent-width && pnpm run test:framework-adapter-shadcn && pnpm run test:compound-classes-lookup && pnpm run test:sandbox-spread && pnpm run test:jsx-text && pnpm run test:aspect-percent && pnpm run test:svg-group-inherit && pnpm run test:svg-marker-inline && pnpm run test:ring-utility && pnpm run test:adapter-utils && pnpm run test:input-range && pnpm run test:font-family-extract && pnpm run test:local-const-className && pnpm run test:imported-array-map && pnpm run test:story-args-resolution && pnpm run test:intrinsic-sizing && pnpm run docs:audit && pnpm run build && pnpm run test:bundle-size",
     "release:beta": "pnpm publish --tag beta && npm dist-tag add inkbridge@$npm_package_version latest && npm view inkbridge dist-tags"
   }
 }

package/scanner/component-scanner.ts

@@ -934,13 +934,38 @@ export class ComponentScanner {
                 // this an args-based BlockTable story would see
                 // `blocks = "mockBlocks"` and the .map call inside the
                 // component couldn't resolve the iteration source.
+                //
+                // Handles both literal property assignments AND spread
+                // assignments (`...BASE_ARGS`). Without spread handling,
+                // shared-args patterns like
+                //   const BASE_ARGS = { marketSymbol: "SOL", ... };
+                //   export const WithLegend = { args: { ...BASE_ARGS, markers: [...] } };
+                // would silently drop every base arg, so the component
+                // body sees `marketSymbol = undefined` and renders blank.
                 for (const prop of argsInit.getProperties()) {
+                  if (Node.isSpreadAssignment(prop)) {
+                    const spreadResolved = this.resolveExpressionValue(prop.getExpression(), new Map());
+                    if (spreadResolved && typeof spreadResolved === 'object' && !Array.isArray(spreadResolved)) {
+                      for (const [k, v] of Object.entries(spreadResolved as Record<string, ResolvedExpressionValue>)) {
+                        if (v !== undefined && v !== null) argsContext.set(k, v);
+                      }
+                    }
+                    continue;
+                  }
                   if (!Node.isPropertyAssignment(prop)) continue;
                   const propInit = prop.getInitializer();
                   if (!propInit) continue;
                   const resolved = this.resolveExpressionValue(propInit, new Map());
-                  if (resolved !== undefined && resolved !== null) {
-                    argsContext.set(prop.getName(), resolved);
+                  // Fallback to parseLiteralValue for shapes resolveExpressionValue
+                  // doesn't cover (array literals, in particular — needed for
+                  // `markers: [...]` and similar inline-array story args).
+                  // `null` / `undefined` are deliberately skipped — they have
+                  // no propsContext-bearing value to thread through.
+                  const finalValue = resolved !== undefined
+                    ? resolved
+                    : this.parseLiteralValue(propInit);
+                  if (finalValue !== undefined && finalValue !== null) {
+                    argsContext.set(prop.getName(), finalValue);
                   }
                 }
                 const localCompBody = localComponents.get(metaComponentName);
@@ -2568,6 +2593,17 @@ export class ComponentScanner {
       return jsonImported;
     }
 
+    // Named import from a TypeScript / JavaScript file. Covers the common
+    // pattern `import { PRICE_CHART_TIMEFRAMES } from "~/domains/perps/constants"`
+    // followed by `PRICE_CHART_TIMEFRAMES.map(...)` in the JSX body. Without
+    // this branch, `.map()` falls through to the placeholder-iteration path
+    // (one synthetic item) and the rendered tree shows zero buttons.
+    const fromNamedImport = this.findArrayInNamedImports(arrayName, sourceFile);
+    if (fromNamedImport) {
+      this.arrayValueCache.set(cacheKey, fromNamedImport);
+      return fromNamedImport;
+    }
+
     // Look for default parameter value in function: function Comp({ features = defaultFeatures })
     for (const func of sourceFile.getFunctions()) {
       const params = func.getParameters();
@@ -2630,6 +2666,92 @@ export class ComponentScanner {
     return null;
   }
 
+  /**
+   * Resolve a named-imported array constant by following the import
+   * declaration to its source file and recursing into `findArrayValue`
+   * against that file. Covers patterns like:
+   *
+   *     import { PRICE_CHART_TIMEFRAMES } from "~/domains/perps/constants";
+   *     ...
+   *     {PRICE_CHART_TIMEFRAMES.map((option) => <Button>{option.label}</Button>)}
+   *
+   * Without this, `findArrayValue` only inspects the current source file's
+   * declarations, returns `null` for cross-file named imports, and the
+   * `.map()` falls through to the placeholder-iteration path (one synthetic
+   * item) — so consumer JSX renders zero buttons instead of N.
+   *
+   * Returns `null` for default imports (the JSON branch handles `import x from
+   * "./foo.json"` separately) and for any import whose target file can't be
+   * resolved to disk via `resolveImportedComponentPath`.
+   */
+  private findArrayInNamedImports(name: string, sourceFile: SourceFile): ResolvedExpressionValue[] | null {
+    const fileDir = path.dirname(sourceFile.getFilePath());
+    for (const imp of sourceFile.getImportDeclarations()) {
+      const named = imp.getNamedImports().find((n) => {
+        const localName = n.getAliasNode()?.getText() || n.getName();
+        return localName === name;
+      });
+      if (!named) continue;
+      const moduleSpec = imp.getModuleSpecifierValue();
+      const importedFile = this.openImportedSourceFile(fileDir, moduleSpec);
+      if (!importedFile) return null;
+      // Resolve under the IMPORTED source's name (the export may rename
+      // via `import { Foo as Bar }` — we follow the exported name).
+      const exportedName = named.getName();
+      return this.findArrayValue(exportedName, importedFile);
+    }
+    return null;
+  }
+
+  /**
+   * Try to load the source file the import declaration points at, against
+   * both the disk (production scan) and the in-memory ts-morph project
+   * (regression fixtures that don't touch the filesystem). Returns `null`
+   * for imports whose target can't be located in either place.
+   *
+   * Built on top of `resolveImportedComponentPath`'s extension-trying logic
+   * — we re-implement the same candidate list and probe the project's
+   * tracked files when `fs.existsSync` says "not on disk". Keeps the
+   * regression fixtures self-contained (no temp-dir writes) while staying
+   * correct for real consumer scans.
+   */
+  private openImportedSourceFile(baseDir: string, moduleSpec: string): SourceFile | null {
+    // Fast path: real files on disk.
+    const onDiskPath = this.resolveImportedComponentPath(baseDir, moduleSpec);
+    if (onDiskPath) {
+      try {
+        const fromDisk = this.project.addSourceFileAtPathIfExists(onDiskPath);
+        if (fromDisk) return fromDisk;
+      } catch (_e) {
+        /* fall through to in-memory probe */
+      }
+    }
+
+    // In-memory probe: build the same candidate list (with extension
+    // variants) and check the project's tracked files. Lets fixtures call
+    // `project.createSourceFile(path, content)` and have those files be
+    // findable through normal import resolution.
+    let basePath: string | null = null;
+    if (moduleSpec.startsWith('./') || moduleSpec.startsWith('../')) {
+      basePath = path.resolve(baseDir, moduleSpec);
+    } else if (moduleSpec.startsWith('~/') || moduleSpec.startsWith('@/')) {
+      basePath = path.resolve(process.cwd(), 'src', moduleSpec.slice(2));
+    }
+    if (!basePath) return null;
+    const candidates = [
+      basePath,
+      `${basePath}.tsx`,
+      `${basePath}.ts`,
+      path.join(basePath, 'index.tsx'),
+      path.join(basePath, 'index.ts'),
+    ];
+    for (const candidate of candidates) {
+      const inProject = this.project.getSourceFile(candidate);
+      if (inProject) return inProject;
+    }
+    return null;
+  }
+
   /**
    * Resolve an expression to an array of items. Handles:
    *
@@ -3884,6 +4006,14 @@ export class ComponentScanner {
     const text = val.getText();
     if (text === 'true') return true;
     if (text === 'false') return false;
+    // `null` / `undefined` keywords resolve to their JS values, not the
+    // strings "null" / "undefined". Previously they fell through to the
+    // `return text` branch and (since "null" is a non-empty truthy string)
+    // caused conditionals like `{error && <Banner>{error}</Banner>}` to
+    // render the banner with literal "null" text when stories passed
+    // `error: null`.
+    if (text === 'null') return null;
+    if (text === 'undefined') return undefined;
     if (Node.isArrayLiteralExpression(val)) {
       return val.getElements().map((el) => this.parseLiteralValue(el));
     }

package/scanner/imported-array-map-regression.ts

@@ -0,0 +1,195 @@
+import assert from 'node:assert/strict';
+import * as path from 'node:path';
+import { ComponentScanner } from './component-scanner';
+
+/**
+ * Regression: `.map()` over a NAMED imported array must expand into N
+ * JSX children, not fall through to the placeholder-iteration path.
+ *
+ * History: greenhouse-app's `MarketPriceCard` renders its timeframe row
+ * with
+ *
+ *     import { PRICE_CHART_TIMEFRAMES } from "~/domains/perps/constants";
+ *     ...
+ *     {PRICE_CHART_TIMEFRAMES.map((option) => (
+ *       <Button variant={timeframe === option.value ? "default" : "outline"}>
+ *         {option.label}
+ *       </Button>
+ *     ))}
+ *
+ * `findArrayValue` only inspected the current source file's variable
+ * declarations + default JSON imports. Named imports from a TypeScript
+ * file (`export const PRICE_CHART_TIMEFRAMES = [...]` in
+ * `~/domains/perps/constants.ts`) were invisible. The `.map()` fell
+ * through to the "no array found" branch and emitted ONE synthetic
+ * placeholder iteration — so Figma rendered zero buttons.
+ *
+ * Fix: `findArrayInNamedImports` follows named imports to the source
+ * file via `resolveImportedComponentPath`, opens the file, and recurses
+ * into `findArrayValue` against the imported source. Wired into
+ * `findArrayValue` after the JSON-import branch.
+ *
+ * Generalizes to ANY named-imported const array, not just chart
+ * timeframes — covers role lists, theme enums, navigation items, etc.
+ */
+
+interface JsxNodeLike {
+  type: 'element' | 'text';
+  tagName?: string;
+  content?: 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 findAllElements(node: JsxNodeLike | null, tag: string, out: JsxNodeLike[] = []): JsxNodeLike[] {
+  if (!node || node.type !== 'element') return out;
+  if (node.tagName === tag) out.push(node);
+  for (const child of node.children || []) findAllElements(child, tag, out);
+  return out;
+}
+
+const scanner = makeScanner();
+
+// ---------------------------------------------------------------------------
+// Case 1: relative-path named import (`./constants`). Asserts `.map()` over
+// the imported array expands into N JSX elements with the right label text.
+// ---------------------------------------------------------------------------
+{
+  scanner.project.createSourceFile(
+    fixturePath('imported-array/constants.ts'),
+    `
+      export const PRICE_CHART_TIMEFRAMES: Array<{ label: string; value: string }> = [
+        { label: "Tick", value: "tick" },
+        { label: "1h", value: "1h" },
+        { label: "1d", value: "1d" },
+      ];
+    `,
+    { overwrite: true },
+  );
+
+  const file = scanner.project.createSourceFile(
+    fixturePath('imported-array/Card.tsx'),
+    `
+      import { PRICE_CHART_TIMEFRAMES } from "./constants";
+      export function Card() {
+        return (
+          <div>
+            {PRICE_CHART_TIMEFRAMES.map((option) => (
+              <button data-key={option.value}>{option.label}</button>
+            ))}
+          </div>
+        );
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Card');
+  assert.ok(tree, 'Card must produce a tree');
+  const buttons = findAllElements(tree, 'button');
+  assert.equal(
+    buttons.length,
+    3,
+    `expected 3 buttons from the named-imported array .map(); got ${buttons.length}`,
+  );
+  const labels = buttons
+    .map((b) => (b.children || []).map((c) => c.content ?? '').join(''))
+    .join('|');
+  assert.ok(
+    labels.includes('Tick') && labels.includes('1h') && labels.includes('1d'),
+    `expected each button's text child to come from option.label; got "${labels}"`,
+  );
+  const keys = buttons.map((b) => b.props?.['data-key']).join(',');
+  assert.equal(
+    keys,
+    'tick,1h,1d',
+    `expected data-key props to come from option.value; got "${keys}"`,
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: aliased named import (`import { Foo as Bar } from "./x"`). The
+// scanner must follow the imported name even when locally renamed.
+// ---------------------------------------------------------------------------
+{
+  scanner.project.createSourceFile(
+    fixturePath('imported-array/aliased-constants.ts'),
+    `
+      export const ROLES = [
+        { id: "admin", label: "Admin" },
+        { id: "viewer", label: "Viewer" },
+      ];
+    `,
+    { overwrite: true },
+  );
+
+  const file = scanner.project.createSourceFile(
+    fixturePath('imported-array/Aliased.tsx'),
+    `
+      import { ROLES as RolesList } from "./aliased-constants";
+      export function Aliased() {
+        return (
+          <ul>
+            {RolesList.map((r) => <li data-id={r.id}>{r.label}</li>)}
+          </ul>
+        );
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Aliased');
+  assert.ok(tree, 'Aliased must produce a tree');
+  const items = findAllElements(tree, 'li');
+  assert.equal(items.length, 2, `expected 2 <li> from aliased import .map(); got ${items.length}`);
+  const ids = items.map((b) => b.props?.['data-id']).join(',');
+  assert.equal(ids, 'admin,viewer', `expected ids resolved through the alias; got "${ids}"`);
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: unresolvable import (path doesn't exist on disk) MUST NOT crash.
+// `.map()` falls through to the existing placeholder-iteration path. Lock the
+// graceful degradation so a future change can't turn this into a hard error.
+// ---------------------------------------------------------------------------
+{
+  const file = scanner.project.createSourceFile(
+    fixturePath('imported-array/Unresolvable.tsx'),
+    `
+      import { NOPE } from "./does-not-exist";
+      export function Unresolvable() {
+        return <div>{NOPE.map((x) => <span>{x.label}</span>)}</div>;
+      }
+    `,
+    { overwrite: true },
+  );
+
+  const tree = scanner.extractComponentJsxTree(file, 'Unresolvable');
+  assert.ok(tree, 'must not throw on an unresolvable import');
+  // Should produce the placeholder iteration (one synthetic <span>) — the
+  // existing fallback path. Just assert we got *something* without
+  // checking the placeholder shape, which is implementation-detail.
+  const spans = findAllElements(tree, 'span');
+  assert.ok(spans.length >= 0, 'should not throw');
+}
+
+console.log('imported-array-map-regression: PASS (3 cases)');