inkbridge 0.1.0-beta.11 → 0.1.0-beta.13

package/README.md

@@ -34,9 +34,9 @@ pnpm exec inkbridge setup
 
 `setup` does three things automatically:
 - Creates `inkbridge.config.json` in your project root (auto-detects component paths from `.storybook/main.ts`)
-- Creates the scanner API route at `src/app/api/figma/scan-components/route.ts`
-- Creates the token patch API route at `src/app/api/figma/patch-tokens/route.ts`
-- Adds `figma:dev` and `figma:scan` scripts to your `package.json`
+- Creates the scanner API route at `src/app/api/inkbridge/scan-components/route.ts`
+- Creates the token patch API route at `src/app/api/inkbridge/patch-tokens/route.ts`
+- Adds `inkbridge:dev` and `inkbridge:scan` scripts to your `package.json`
 
 ### 2. Load the plugin in Figma Desktop
 
@@ -49,7 +49,7 @@ Figma remembers this path — you only do this once.
 ### 3. Start your dev server
 
 ```bash
-pnpm figma:dev
+pnpm inkbridge:dev
 ```
 
 The plugin auto-discovers your server on ports `4000`, `3000`, and `5173`.
@@ -62,7 +62,7 @@ The plugin auto-discovers your server on ports `4000`, `3000`, and `5173`.
 
 ### Generate Design System Page
 
-1. Start dev server: `pnpm figma:dev`
+1. Start dev server: `pnpm inkbridge:dev`
 2. Open any Figma file
 3. **Plugins → Development → Inkbridge → Generate Design System Page**
 4. The plugin scans your Storybook stories and builds a "Design System" page with token tables, themed columns, grouped component sections, and responsive/state preview blocks where relevant
@@ -80,7 +80,7 @@ When a story instance uses non-default style/behavior props (for example `classN
 ### Manual scan
 
 ```bash
-pnpm figma:scan
+pnpm inkbridge:scan
 ```
 
 Writes `.inkbridge/component-definitions.json`. Useful for debugging scanner output.
@@ -137,19 +137,19 @@ The scanner re-reads this file on every scan — no server restart needed.
 
 The plugin cannot connect to `localhost:4000`, `:3000`, or `:5173`.
 
-- Make sure `pnpm figma:dev` is running
+- Make sure `pnpm inkbridge:dev` is running
 - Check the terminal for errors in the Next.js server
 - Make sure you're using **Figma Desktop** — the browser version blocks localhost
 
 ### "Create Pull Request" does nothing / no PR opens
 
-- Restart your dev server (`pnpm figma:dev`) so `/api/figma/patch-tokens` is available
+- Restart your dev server (`pnpm inkbridge:dev`) so `/api/inkbridge/patch-tokens` is available
 - Re-import the plugin from `node_modules/inkbridge/manifest.json` after updating
 - Re-open the plugin and retry **Push Tokens to Code**
 
 ### Theme rename/new theme only commits one changed token
 
-- Ensure your project route `src/app/api/figma/patch-tokens/route.ts` is up to date:
+- Ensure your project route `src/app/api/inkbridge/patch-tokens/route.ts` is up to date:
 
 ```bash
 pnpm exec inkbridge setup
@@ -197,8 +197,8 @@ Figma plugin (sandboxed)
     └── code.js            Main logic — cannot make network requests directly
     └── ui.html            Hidden iframe — relays all network requests to code.js
 
-code.js  →  ui.html  →  localhost:4000/api/figma/scan-components
-                     →  localhost:4000/api/figma/patch-tokens
+code.js  →  ui.html  →  localhost:4000/api/inkbridge/scan-components
+                     →  localhost:4000/api/inkbridge/patch-tokens
                      →  https://api.github.com
 ```
 

package/bin/inkbridge.mjs

@@ -38,6 +38,67 @@ function detectStorybookPaths(root) {
   return [];
 }
 
+// ---------------------------------------------------------------------------
+// Patch next.config.* to allow the Figma plugin UI (null origin) to fetch
+// assets from the dev server. Without this, <Image> srcs, SVGs, etc. fail CORS.
+// ---------------------------------------------------------------------------
+async function patchNextConfig(root) {
+  const candidates = ["next.config.ts", "next.config.js", "next.config.mjs", "next.config.cjs"];
+  let configPath = null;
+  for (const candidate of candidates) {
+    const full = join(root, candidate);
+    if (existsSync(full)) { configPath = full; break; }
+  }
+  if (!configPath) {
+    console.log("  ~ next.config not found — skipping CORS headers patch");
+    return;
+  }
+
+  const source = await readFile(configPath, "utf8");
+  if (source.includes("Access-Control-Allow-Origin")) {
+    console.log("  ~ next.config already exposes CORS headers, skipping");
+    return;
+  }
+
+  const headersBlock = `
+  // Allow Figma plugin UI iframe (null origin) to fetch static assets
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: "Access-Control-Allow-Methods", value: "GET" },
+        ],
+      },
+    ];
+  },`;
+
+  // Inject right after the opening `{` of the config object. Matches either
+  // `const nextConfig: NextConfig = {` or `const nextConfig = {` or `module.exports = {`.
+  const patterns = [
+    /(const\s+\w+\s*(?::\s*\w+\s*)?=\s*)\{/,
+    /(module\.exports\s*=\s*)\{/,
+    /(export\s+default\s*)\{/,
+  ];
+  let patched = null;
+  for (const re of patterns) {
+    const match = source.match(re);
+    if (!match) continue;
+    const idx = match.index + match[0].length;
+    patched = source.slice(0, idx) + headersBlock + source.slice(idx);
+    break;
+  }
+
+  if (!patched) {
+    console.log("  ! could not locate config object in " + configPath + " — add CORS headers manually");
+    return;
+  }
+
+  await writeFile(configPath, patched, "utf8");
+  console.log("  ✓ patched " + configPath.replace(root + "/", "") + " with CORS headers");
+}
+
 // ---------------------------------------------------------------------------
 // postinstall — called automatically after `pnpm add -D inkbridge`
 // ---------------------------------------------------------------------------
@@ -61,9 +122,9 @@ async function postinstall() {
 // setup — patches package.json + creates scanner route
 // ---------------------------------------------------------------------------
 async function setup() {
-  const scanRouteDest = join(PROJECT_ROOT, "src/app/api/figma/scan-components/route.ts");
+  const scanRouteDest = join(PROJECT_ROOT, "src/app/api/inkbridge/scan-components/route.ts");
   const scanRouteSrc = join(PACKAGE_DIR, "templates/scan-components-route.ts");
-  const patchRouteDest = join(PROJECT_ROOT, "src/app/api/figma/patch-tokens/route.ts");
+  const patchRouteDest = join(PROJECT_ROOT, "src/app/api/inkbridge/patch-tokens/route.ts");
   const patchRouteSrc = join(PACKAGE_DIR, "templates/patch-tokens-route.ts");
   const pkgPath = join(PROJECT_ROOT, "package.json");
 
@@ -89,19 +150,19 @@ async function setup() {
 
   // 3. Copy scanner route
   if (existsSync(scanRouteDest)) {
-    console.log("  ~ scanner route already exists, skipping: src/app/api/figma/scan-components/route.ts");
+    console.log("  ~ scanner route already exists, skipping: src/app/api/inkbridge/scan-components/route.ts");
   } else {
     await mkdir(dirname(scanRouteDest), { recursive: true });
     await copyFile(scanRouteSrc, scanRouteDest);
-    console.log("  ✓ created src/app/api/figma/scan-components/route.ts");
+    console.log("  ✓ created src/app/api/inkbridge/scan-components/route.ts");
   }
 
   if (existsSync(patchRouteDest)) {
-    console.log("  ~ token patch route already exists, skipping: src/app/api/figma/patch-tokens/route.ts");
+    console.log("  ~ token patch route already exists, skipping: src/app/api/inkbridge/patch-tokens/route.ts");
   } else {
     await mkdir(dirname(patchRouteDest), { recursive: true });
     await copyFile(patchRouteSrc, patchRouteDest);
-    console.log("  ✓ created src/app/api/figma/patch-tokens/route.ts");
+    console.log("  ✓ created src/app/api/inkbridge/patch-tokens/route.ts");
   }
 
   // 4. Patch package.json scripts
@@ -111,8 +172,8 @@ async function setup() {
     const pkg = JSON.parse(await readFile(pkgPath, "utf8"));
     pkg.scripts = pkg.scripts || {};
     const toAdd = {
-      "figma:dev": "next dev",
-      "figma:scan": "tsx node_modules/inkbridge/scanner/cli.ts",
+      "inkbridge:dev": "next dev",
+      "inkbridge:scan": "tsx node_modules/inkbridge/scanner/cli.ts",
     };
     const added = [];
     for (const [k, v] of Object.entries(toAdd)) {
@@ -129,7 +190,10 @@ async function setup() {
     }
   }
 
-  // 5. Print manifest path
+  // 5. Patch next.config to expose CORS headers for the Figma plugin iframe
+  await patchNextConfig(PROJECT_ROOT);
+
+  // 6. Print manifest path
   const manifestPath = resolve(PROJECT_ROOT, "node_modules/inkbridge/manifest.json");
   console.log("");
   console.log("  Setup complete. Load the plugin in Figma Desktop:");
@@ -137,8 +201,8 @@ async function setup() {
   console.log(`    ${manifestPath}`);
   console.log("");
   console.log("  Start developing:");
-  console.log("    pnpm figma:dev    (starts Next.js dev server for scan + token patch routes)");
-  console.log("    pnpm figma:scan   (manually re-scan components)");
+  console.log("    pnpm inkbridge:dev    (starts Next.js dev server for scan + token patch routes)");
+  console.log("    pnpm inkbridge:scan   (manually re-scan components)");
   console.log("");
 }