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

package/manifest.json

@@ -25,7 +25,6 @@
     { "name": "Settings", "command": "settings" },
     { "separator": true },
     { "name": "Generate Design System Page", "command": "generate" },
-    { "name": "Clean Generated Artifacts", "command": "clean-generated" },
-    { "name": "Debug Selection (Console)", "command": "debug-selection" }
+    { "name": "Clean Generated Artifacts", "command": "clean-generated" }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inkbridge",
-  "version": "0.1.0-beta.21",
+  "version": "0.1.0-beta.23",
   "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": {
@@ -19,25 +19,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "keywords": [
-    "figma",
-    "plugin",
-    "tailwind",
-    "design-tokens",
-    "storybook"
-  ],
-  "license": "MIT",
-  "homepage": "https://inkbridge.ink",
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "tailwindcss": ">=4",
-    "postcss": ">=8"
-  },
-  "dependencies": {
-    "tailwind-merge": "^3.4.0",
-    "ts-morph": "^27.0.0"
-  },
   "scripts": {
     "build": "node build.mjs",
     "watch": "node build.mjs --watch",
@@ -95,8 +76,45 @@
     "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",
+    "test:responsive-opt-in": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/responsive-opt-in-regression.ts",
+    "test:conditional-map-branch": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/conditional-map-branch-regression.ts",
+    "test:table-column-alignment": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/table-column-alignment-regression.ts",
+    "test:responsive-hidden-inline": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/responsive-hidden-inline-regression.ts",
+    "test:text-truncate": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/text-truncate-regression.ts",
+    "test:space-between-single-child": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/space-between-single-child-regression.ts",
+    "test:hidden-check-drift": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/hidden-check-drift-regression.ts",
+    "test:expression-evaluator": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/expression-evaluator-regression.ts",
+    "test:portal-class-strip": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/portal-class-strip-regression.ts",
+    "test:select-root-flatten": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/select-root-flatten-regression.ts",
+    "test:horizontal-text-shrink": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/horizontal-text-shrink-regression.ts",
+    "test:dialog-content-gate": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/dialog-content-gate-regression.ts",
+    "test:ternary-fragment-branch": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/ternary-fragment-branch-regression.ts",
+    "test:border-dash-pattern": "cd ../.. && ./node_modules/.bin/tsx tools/figma-plugin/scanner/border-dash-pattern-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 test:responsive-opt-in && pnpm run test:conditional-map-branch && pnpm run test:table-column-alignment && pnpm run test:responsive-hidden-inline && pnpm run test:text-truncate && pnpm run test:space-between-single-child && pnpm run test:hidden-check-drift && pnpm run test:expression-evaluator && pnpm run test:portal-class-strip && pnpm run test:select-root-flatten && pnpm run test:horizontal-text-shrink && pnpm run test:dialog-content-gate && pnpm run test:ternary-fragment-branch && pnpm run test:border-dash-pattern && pnpm run docs:audit && pnpm run build && pnpm run test:bundle-size",
+    "prepublishOnly": "node build.mjs",
     "release:beta": "pnpm publish --tag beta && npm dist-tag add inkbridge@$npm_package_version latest && npm view inkbridge dist-tags"
+  },
+  "keywords": [
+    "figma",
+    "plugin",
+    "tailwind",
+    "design-tokens",
+    "storybook"
+  ],
+  "license": "MIT",
+  "homepage": "https://inkbridge.ink",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4",
+    "postcss": ">=8"
+  },
+  "dependencies": {
+    "tailwind-merge": "^3.4.0",
+    "ts-morph": "^27.0.0"
   }
-}
+}

package/scanner/border-dash-pattern-regression.ts

@@ -0,0 +1,163 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+  variables: {
+    getLocalVariableCollections: () => [],
+    getLocalVariables: () => [],
+  },
+};
+
+/**
+ * Regression: Tailwind's `border-dashed` / `border-dotted` / `border-solid`
+ * must map to Figma's `dashPattern` array. The plugin previously had no
+ * handling for these style modifiers — every border rendered solid even
+ * when the consumer asked for dashed.
+ *
+ * Real-world trigger: greenhouse-app `IncreasePositionModal`'s Position
+ * impact card uses
+ *   `<div className="my-1 h-px border-t border-dashed
+ *      border-muted-foreground/30" />`
+ * as the visual separator between the side badge and the metrics grid.
+ * Without dashPattern the line rendered solid, breaking the visual
+ * hierarchy users see in the browser.
+ *
+ * Dash patterns picked to match typical browser-default dashed / dotted
+ * (Chrome / Safari): dashed = [4, 4], dotted = [1, 2]. solid /
+ * border-none = [] (default; reset to solid).
+ */
+
+import { applyTailwindStylesToFrame } from '../src/tailwind';
+
+interface StubFrame {
+  type: 'FRAME';
+  width: number;
+  height: number;
+  fills: unknown[];
+  strokes: unknown[];
+  strokeWeight: number;
+  strokeTopWeight?: number;
+  strokeRightWeight?: number;
+  strokeBottomWeight?: number;
+  strokeLeftWeight?: number;
+  dashPattern?: number[];
+  layoutMode?: string;
+  primaryAxisSizingMode?: string;
+  counterAxisSizingMode?: string;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  cornerRadius?: number;
+  topLeftRadius?: number;
+  topRightRadius?: number;
+  bottomLeftRadius?: number;
+  bottomRightRadius?: number;
+  itemSpacing?: number;
+  resize?: (w: number, h: number) => void;
+  children?: unknown[];
+}
+
+function frame(): StubFrame {
+  return {
+    type: 'FRAME',
+    width: 100,
+    height: 1,
+    fills: [],
+    strokes: [],
+    strokeWeight: 0,
+    dashPattern: [],
+    children: [],
+    resize() {},
+  };
+}
+
+const colorGroup: Record<string, string> = {
+  'muted-foreground': '#888888',
+  'primary': '#16a34a',
+};
+
+const apply = (cls: string[], f: StubFrame): void => {
+  applyTailwindStylesToFrame(
+    f as unknown as FrameNode,
+    cls,
+    colorGroup,
+    null,
+    'primary',
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Case 1: border-dashed + border-t + border color → dashPattern [4, 4]
+// ---------------------------------------------------------------------------
+
+{
+  const f = frame();
+  apply(['h-px', 'border-t', 'border-dashed', 'border-muted-foreground/30'], f);
+  assert.deepEqual(
+    f.dashPattern,
+    [4, 4],
+    'border-dashed sets dashPattern to [4, 4] — the Position impact separator',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: border-dotted → dashPattern [1, 2]
+// ---------------------------------------------------------------------------
+
+{
+  const f = frame();
+  apply(['border', 'border-dotted', 'border-primary'], f);
+  assert.deepEqual(
+    f.dashPattern,
+    [1, 2],
+    'border-dotted sets a tighter dash pattern that reads as dots',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: border-solid resets to []
+// ---------------------------------------------------------------------------
+
+{
+  const f = frame();
+  f.dashPattern = [4, 4];
+  apply(['border', 'border-solid', 'border-primary'], f);
+  assert.deepEqual(
+    f.dashPattern,
+    [],
+    'border-solid resets dashPattern to [] — covers consumers that explicitly opt out',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 4: no border-style class → dashPattern untouched
+// ---------------------------------------------------------------------------
+
+{
+  const f = frame();
+  f.dashPattern = [4, 4];  // pretend a previous pass set it
+  apply(['border', 'border-primary'], f);
+  assert.deepEqual(
+    f.dashPattern,
+    [4, 4],
+    'absent border-style class leaves dashPattern alone — don\'t clobber prior intent',
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 5: last-wins between conflicting style classes
+// ---------------------------------------------------------------------------
+
+{
+  const f = frame();
+  apply(['border', 'border-dashed', 'border-solid', 'border-primary'], f);
+  assert.deepEqual(
+    f.dashPattern,
+    [],
+    'when both dashed and solid appear, the last in the class list wins (CSS cascade semantics)',
+  );
+}
+
+console.log('border-dash-pattern-regression: PASS');

package/scanner/child-sizing-matrix-regression.ts

@@ -110,16 +110,25 @@ type ParentKind =
 
 function makeParent(kind: ParentKind): FrameNode {
   const parent = makeStubFrame();
+  // FIXED-width parents represent the production "Card / section with a
+  // known story width" case. Implicit stretch in applyChildProperties
+  // now requires `parent.counterAxisSizingMode === 'FIXED'` so the
+  // child's "fill the parent's width" intent is only honoured when the
+  // parent's width is actually definite — without this guard a HUG
+  // parent collapses to its first non-stretch child's width, and any
+  // STRETCH siblings get visually clipped.
   if (kind === 'horizontal-row') {
     parent.layoutMode = 'HORIZONTAL';
     parent.width = 600;
     parent.primaryAxisSizingMode = 'FIXED';
+    parent.counterAxisSizingMode = 'FIXED';
     setFrameCrossAlign(parent as unknown as FrameNode, 'MIN');
     setFrameFromBlockFlow(parent as unknown as FrameNode, false);
   } else {
     parent.layoutMode = 'VERTICAL';
     parent.width = 600;
     parent.primaryAxisSizingMode = 'FIXED';
+    parent.counterAxisSizingMode = 'FIXED';
     if (kind === 'flex-col-stretch') {
       setFrameCrossAlign(parent as unknown as FrameNode, 'STRETCH');
       setFrameFromBlockFlow(parent as unknown as FrameNode, false);

package/scanner/cli.ts

@@ -21,7 +21,7 @@ import { ComponentScanner } from './component-scanner';
 import { extractColorTokens, extractPaletteTokens, TAILWIND_SPACING, inferLayout, groupClassesByBreakpoint, groupClassesByColorScheme } from './tailwind-parser';
 import { collectAllClasses } from './class-collector';
 import { buildStyleMap } from './style-map';
-import { readTokenSourceMap } from './css-token-reader';
+import { readTokenSourceMap, readConsumerOwnedTokenMap } from './css-token-reader';
 import type { ComponentDefinitions, ScannerConfig, ResponsiveInfo, IconImportSpec, IconRegistryEntry, ComponentAnalysis, JsxNode, AtomicKind } from './types';
 import type { TokenSourceMode } from '../src/tokens/token-source';
 import { inferSafeTextOverridePropKeys } from '../src/components/symbol-instance-policy';
@@ -129,15 +129,31 @@ async function main() {
       styleMap,
     };
 
-    // Optionally include token map when called with --include-tokens
-    const finalOutput: typeof output & { tokens?: ReturnType<typeof readTokenSourceMap> } = output;
+    // Optionally include token map when called with --include-tokens.
+    //
+    // `tokens` = full scan, including Tailwind / tw-animate-css defaults
+    // pulled in via `@import "tailwindcss"` etc. Used by the runtime
+    // token resolver so utilities like `text-sm` keep resolving even
+    // when the consumer didn't override them.
+    //
+    // `consumerTokens` = consumer-only scan (bare `@import`s skipped).
+    // Used by the Design Tokens panel to show ONLY what the consumer
+    // wrote in their own files — no leaked Tailwind defaults like
+    // `serif: ui-serif, Georgia, Cambria, …` or the lone Tailwind
+    // `spacing: 0.25rem` baseline value.
+    const finalOutput: typeof output & {
+      tokens?: ReturnType<typeof readTokenSourceMap>;
+      consumerTokens?: ReturnType<typeof readConsumerOwnedTokenMap>;
+    } = output;
     if (CLI_INCLUDE_TOKENS) {
-      finalOutput.tokens = readTokenSourceMap({
+      const baseOpts = {
         projectRoot: process.cwd(),
         tokenSourceMode: CLI_TOKEN_MODE,
         cssTokenPath: CLI_CSS_TOKEN_PATH,
         dtcgTokenPath: CLI_DTCG_TOKEN_PATH,
-      });
+      };
+      finalOutput.tokens = readTokenSourceMap(baseOpts);
+      finalOutput.consumerTokens = readConsumerOwnedTokenMap(baseOpts);
     }
 
     // Write to JSON file. Default matches the consumer-side path used by