inkbridge 0.1.0-beta.24 → 0.1.0-beta.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -7
- package/bin/inkbridge.mjs +46 -10
- package/code.js +11 -11
- package/mcp/README.md +95 -0
- package/mcp/server.mjs +21313 -0
- package/package.json +3 -2
- package/scanner/cli.ts +6 -7
- package/scanner/types.ts +17 -0
- package/src/main.ts +7 -71
- package/src/render-engine-version.ts +1 -1
- package/templates/patch-tokens-route.ts +12 -0
- package/templates/scan-components-route.ts +12 -0
- package/ui.html +2 -16
package/README.md
CHANGED
|
@@ -41,10 +41,17 @@ pnpm exec inkbridge setup
|
|
|
41
41
|
- Creates `inkbridge.config.json` in your project root (auto-detects component paths from `.storybook/main.*`)
|
|
42
42
|
- Creates the scanner API route at `src/app/api/inkbridge/scan-components/route.ts`
|
|
43
43
|
- Creates the token patch API route at `src/app/api/inkbridge/patch-tokens/route.ts`
|
|
44
|
-
- Adds `inkbridge:dev` and `inkbridge:scan` scripts to your `package.json`
|
|
45
44
|
- Adds `headers()` to your `next.config.*` exposing CORS on `/api/inkbridge/:path*` so the Figma plugin iframe can reach those routes (scoped — your other routes are untouched)
|
|
46
45
|
- Appends `.inkbridge/` to your `.gitignore` so the scanner-output JSON doesn't show up in every diff
|
|
47
46
|
|
|
47
|
+
No `package.json` scripts are added by default — the plugin works through the API routes via your normal `pnpm dev`. If you're developing the plugin source itself and want the maintainer local-link scripts, pass `--dev`:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
pnpm exec inkbridge setup --dev
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
That adds five maintainer scripts to `package.json`: `inkbridge:plugin:which`, `inkbridge:plugin:use-beta`, `inkbridge:plugin:use-local`, `inkbridge:dev:local`, `inkbridge:scan:local`.
|
|
54
|
+
|
|
48
55
|
Inkbridge does not modify your ESLint config or any other tooling. The recommended `react/forbid-dom-props` rule for inline styles is suggested in "Recommended lint rules" below, but never written by setup.
|
|
49
56
|
|
|
50
57
|
### 2. Load the plugin in Figma Desktop
|
|
@@ -58,7 +65,7 @@ Figma remembers this path — you only do this once.
|
|
|
58
65
|
### 3. Start your dev server
|
|
59
66
|
|
|
60
67
|
```bash
|
|
61
|
-
pnpm
|
|
68
|
+
pnpm dev
|
|
62
69
|
```
|
|
63
70
|
|
|
64
71
|
The plugin auto-discovers your server on ports `4000`, `3000`, and `5173`.
|
|
@@ -71,7 +78,7 @@ The plugin auto-discovers your server on ports `4000`, `3000`, and `5173`.
|
|
|
71
78
|
|
|
72
79
|
### Generate Design System Page
|
|
73
80
|
|
|
74
|
-
1. Start dev server: `pnpm
|
|
81
|
+
1. Start dev server: `pnpm dev`
|
|
75
82
|
2. Open any Figma file
|
|
76
83
|
3. **Plugins → Development → Inkbridge → Generate Design System Page**
|
|
77
84
|
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
|
|
@@ -88,11 +95,15 @@ When a story instance uses non-default style/behavior props (for example `classN
|
|
|
88
95
|
|
|
89
96
|
### Manual scan
|
|
90
97
|
|
|
98
|
+
Scans happen automatically every time you click **Generate Design System Page** — the plugin calls `GET /api/inkbridge/scan-components` on your dev server and reads the response live. There is no manual step in the normal workflow.
|
|
99
|
+
|
|
100
|
+
For debugging scanner output, you can invoke the scanner CLI directly:
|
|
101
|
+
|
|
91
102
|
```bash
|
|
92
|
-
pnpm inkbridge
|
|
103
|
+
pnpm tsx node_modules/inkbridge/scanner/cli.ts
|
|
93
104
|
```
|
|
94
105
|
|
|
95
|
-
|
|
106
|
+
That writes `.inkbridge/component-definitions.json` to disk. (If you ran `inkbridge setup --dev`, the `inkbridge:scan:local` script gives you the sibling-repo variant.)
|
|
96
107
|
|
|
97
108
|
### Push to Code
|
|
98
109
|
|
|
@@ -238,13 +249,13 @@ Full reference at [inkbridge.ink/docs/responsive-previews](https://inkbridge.ink
|
|
|
238
249
|
|
|
239
250
|
The plugin cannot connect to `localhost:4000`, `:3000`, or `:5173`.
|
|
240
251
|
|
|
241
|
-
- Make sure `pnpm
|
|
252
|
+
- Make sure `pnpm dev` is running
|
|
242
253
|
- Check the terminal for errors in the Next.js server
|
|
243
254
|
- Make sure you're using **Figma Desktop** — the browser version blocks localhost
|
|
244
255
|
|
|
245
256
|
### "Create Pull Request" does nothing / no PR opens
|
|
246
257
|
|
|
247
|
-
- Restart your dev server (`pnpm
|
|
258
|
+
- Restart your dev server (`pnpm dev`) so `/api/inkbridge/patch-tokens` is available
|
|
248
259
|
- Re-import the plugin from `node_modules/inkbridge/manifest.json` after updating
|
|
249
260
|
- Re-open the plugin and retry **Push Tokens to Code**
|
|
250
261
|
|
package/bin/inkbridge.mjs
CHANGED
|
@@ -165,6 +165,13 @@ async function setup() {
|
|
|
165
165
|
// next.config — those are partial-edit territory and force-rewriting
|
|
166
166
|
// them would clobber consumer state.
|
|
167
167
|
const force = process.argv.includes("--force");
|
|
168
|
+
// `--dev` opts the consumer into maintainer/dev-loop scripts (local-link
|
|
169
|
+
// mode, version probes, `:use-beta` / `:use-local` switches). The default
|
|
170
|
+
// setup writes no package.json scripts at all — the plugin works
|
|
171
|
+
// end-to-end via the scan + patch API routes alone. Use `--dev` only when
|
|
172
|
+
// you're working on the plugin source itself (sibling `../inkbridge/`
|
|
173
|
+
// checkout) and need the local-link toggle.
|
|
174
|
+
const devMode = process.argv.includes("--dev");
|
|
168
175
|
const scanRouteDest = join(PROJECT_ROOT, "src/app/api/inkbridge/scan-components/route.ts");
|
|
169
176
|
const scanRouteSrc = join(PACKAGE_DIR, "templates/scan-components-route.ts");
|
|
170
177
|
const patchRouteDest = join(PROJECT_ROOT, "src/app/api/inkbridge/patch-tokens/route.ts");
|
|
@@ -173,7 +180,7 @@ async function setup() {
|
|
|
173
180
|
const inkbridgeCfgPath = join(PROJECT_ROOT, "inkbridge.config.json");
|
|
174
181
|
|
|
175
182
|
console.log("");
|
|
176
|
-
console.log(` inkbridge setup${dryRun ? " — dry run (no files will be written)" : ""}${force ? " — force (overwrite existing inkbridge files)" : ""}`);
|
|
183
|
+
console.log(` inkbridge setup${dryRun ? " — dry run (no files will be written)" : ""}${force ? " — force (overwrite existing inkbridge files)" : ""}${devMode ? " — dev (install maintainer scripts)" : ""}`);
|
|
177
184
|
console.log("");
|
|
178
185
|
|
|
179
186
|
const env = detectEnvironment(PROJECT_ROOT);
|
|
@@ -208,10 +215,21 @@ async function setup() {
|
|
|
208
215
|
if (existsSync(pkgPath)) {
|
|
209
216
|
try { pkg = JSON.parse(readFileSync(pkgPath, "utf8")); } catch (_e) {}
|
|
210
217
|
}
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
218
|
+
// Default consumer setup writes no package.json scripts — the plugin
|
|
219
|
+
// works via the scan + patch API routes alone. `--dev` adds the
|
|
220
|
+
// maintainer-only loop (local-link toggle, version probe, `:use-beta` /
|
|
221
|
+
// `:use-local` switches). Anyone working on the plugin source itself
|
|
222
|
+
// (sibling `../inkbridge/` checkout) wants these; ordinary consumers
|
|
223
|
+
// should not see them in their package.json.
|
|
224
|
+
const scriptsToAdd = devMode
|
|
225
|
+
? {
|
|
226
|
+
"inkbridge:dev:local": "INKBRIDGE_LOCAL=1 next dev",
|
|
227
|
+
"inkbridge:scan:local": "tsx ../inkbridge/tools/figma-plugin/scanner/cli.ts",
|
|
228
|
+
"inkbridge:plugin:which": "node -e \"const p=require('./package.json'); console.log('inkbridge =>', (p.devDependencies&&p.devDependencies.inkbridge)||(p.dependencies&&p.dependencies.inkbridge)||'not-set')\"",
|
|
229
|
+
"inkbridge:plugin:use-beta": "pnpm add -D inkbridge@beta",
|
|
230
|
+
"inkbridge:plugin:use-local": "pnpm add -D inkbridge@file:../inkbridge/tools/figma-plugin",
|
|
231
|
+
}
|
|
232
|
+
: {};
|
|
215
233
|
const pkgScriptAdditions = pkg
|
|
216
234
|
? Object.entries(scriptsToAdd).filter(([k]) => !(pkg.scripts && pkg.scripts[k]))
|
|
217
235
|
: [];
|
|
@@ -338,8 +356,16 @@ function printPostSetupHint() {
|
|
|
338
356
|
console.log(` ${manifestPath}`);
|
|
339
357
|
console.log("");
|
|
340
358
|
console.log(" Start developing:");
|
|
341
|
-
console.log(" pnpm
|
|
342
|
-
|
|
359
|
+
console.log(" pnpm dev (your project's Next.js dev server — also serves the scan + token patch routes)");
|
|
360
|
+
if (devMode) {
|
|
361
|
+
console.log("");
|
|
362
|
+
console.log(" Maintainer scripts installed (--dev):");
|
|
363
|
+
console.log(" pnpm inkbridge:plugin:which Print the installed inkbridge version");
|
|
364
|
+
console.log(" pnpm inkbridge:plugin:use-beta Switch back to the npm beta tag");
|
|
365
|
+
console.log(" pnpm inkbridge:plugin:use-local Switch to file:../inkbridge/tools/figma-plugin");
|
|
366
|
+
console.log(" pnpm inkbridge:dev:local Next.js dev with INKBRIDGE_LOCAL=1 (sibling repo scanner)");
|
|
367
|
+
console.log(" pnpm inkbridge:scan:local Manually re-scan via sibling repo's scanner");
|
|
368
|
+
}
|
|
343
369
|
console.log("");
|
|
344
370
|
}
|
|
345
371
|
|
|
@@ -433,10 +459,20 @@ switch (command) {
|
|
|
433
459
|
}
|
|
434
460
|
break;
|
|
435
461
|
}
|
|
462
|
+
case "mcp":
|
|
463
|
+
// The MCP server speaks JSON-RPC over stdio — stdout is the protocol
|
|
464
|
+
// channel, so this case must never write to stdout. Hand off to the
|
|
465
|
+
// prebuilt server bundle (built by build.mjs; SDK + zod inlined).
|
|
466
|
+
await import("../mcp/server.mjs");
|
|
467
|
+
break;
|
|
436
468
|
default:
|
|
437
469
|
console.log("Usage:");
|
|
438
|
-
console.log(" inkbridge setup
|
|
439
|
-
console.log("
|
|
440
|
-
console.log("
|
|
470
|
+
console.log(" inkbridge setup Wire up scanner/token-patch routes (run once after install)");
|
|
471
|
+
console.log(" --dev Also install maintainer-only scripts (local-link, version probe, use-beta/use-local)");
|
|
472
|
+
console.log(" --force Overwrite the route templates + inkbridge.config.json from this plugin version");
|
|
473
|
+
console.log(" --dry-run Print the plan without writing files");
|
|
474
|
+
console.log(" inkbridge path Print the manifest.json path for Figma Desktop");
|
|
475
|
+
console.log(" inkbridge skill install Install the AI development skill (maintainers only)");
|
|
476
|
+
console.log(" inkbridge mcp Start the design-system MCP server over stdio (for AI agents)");
|
|
441
477
|
break;
|
|
442
478
|
}
|