inkbridge 0.1.0-beta.1 → 0.1.0-beta.11

package/README.md

@@ -1,12 +1,14 @@
+<img src="https://inkbridge.ink/inkbridge-logo.png" alt="Inkbridge" width="80" />
+
 # Inkbridge
 
-Generates native Figma frames from your Tailwind React components and syncs design tokens back to your codebase via GitHub PRs.
+Generates native Figma frames and reusable Figma component instances from your Tailwind React components, and syncs design tokens back to your codebase via GitHub PRs.
 
 ## What it does
 
 | Feature | Description |
 |---|---|
-| **Generate Design System Page** | Scans your Storybook stories and builds a pixel-accurate Figma page from your Tailwind classes |
+| **Generate Design System Page** | Scans your Storybook stories and builds a pixel-accurate Figma page from your Tailwind classes, including reusable component instances for symbol candidates (CVA and non-CVA) |
 | **Push to Code** | Creates a GitHub PR from Figma token changes. Source can be CSS-first (`auto`/`css`) or DTCG (`dtcg`). |
 | **Detect & Sync Changes** | Detects class-level changes in Figma frames and proposes them as a GitHub PR |
 | **Dev Mode codegen** | Shows Tailwind class names for any selected node in Figma Dev Mode |
@@ -63,10 +65,18 @@ The plugin auto-discovers your server on ports `4000`, `3000`, and `5173`.
 1. Start dev server: `pnpm figma: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
+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
 
 Component data is always scanned live on every run — never stale. Re-run at any time to pick up changes.
 
+For symbol candidates, the generated page renders real Figma component instances instead of only flattened frames:
+
+- CVA components (for example `Button`) render as variant-aware instances.
+- Non-CVA reusable components (for example `Card` compounds) can render as instances too.
+- For compound instances, story text is applied by slot-aware overrides (for example title/description/content) when possible.
+
+When a story instance uses non-default style/behavior props (for example `className`, `disabled`, `aria-invalid`, or unknown props), rendering falls back to direct frames for visual correctness.
+
 ### Manual scan
 
 ```bash

package/bin/{inkhouse.mjs → inkbridge.mjs}

@@ -39,17 +39,17 @@ function detectStorybookPaths(root) {
 }
 
 // ---------------------------------------------------------------------------
-// postinstall — called automatically after `pnpm add -D inkhouse`
+// postinstall — called automatically after `pnpm add -D inkbridge`
 // ---------------------------------------------------------------------------
 async function postinstall() {
   const pkg = JSON.parse(await readFile(join(PACKAGE_DIR, "package.json"), "utf8"));
-  const manifestPath = join(PROJECT_ROOT, "node_modules/inkhouse/manifest.json");
+  const manifestPath = join(PROJECT_ROOT, "node_modules/inkbridge/manifest.json");
 
   console.log("");
-  console.log(`  ✓ inkhouse v${pkg.version} installed`);
+  console.log(`  ✓ inkbridge v${pkg.version} installed`);
   console.log("");
   console.log("  Next: run setup to wire up the scanner endpoint and scripts:");
-  console.log("    pnpm exec inkhouse setup");
+  console.log("    pnpm exec inkbridge setup");
   console.log("");
   console.log("  Then load the plugin in Figma Desktop:");
   console.log("    Plugins → Development → Import plugin from manifest");
@@ -67,10 +67,10 @@ async function setup() {
   const patchRouteSrc = join(PACKAGE_DIR, "templates/patch-tokens-route.ts");
   const pkgPath = join(PROJECT_ROOT, "package.json");
 
-  // 1. Create inkhouse.config.json
-  const inkhouseCfgPath = join(PROJECT_ROOT, "inkhouse.config.json");
-  if (existsSync(inkhouseCfgPath)) {
-    console.log("  ~ inkhouse.config.json already exists, skipping");
+  // 1. Create inkbridge.config.json
+  const inkbridgeCfgPath = join(PROJECT_ROOT, "inkbridge.config.json");
+  if (existsSync(inkbridgeCfgPath)) {
+    console.log("  ~ inkbridge.config.json already exists, skipping");
   } else {
     const detectedPaths = detectStorybookPaths(PROJECT_ROOT);
     const componentPaths = detectedPaths.length > 0 ? detectedPaths : ["src"];
@@ -79,11 +79,11 @@ async function setup() {
       exclude: [],
       onlyWithStories: true,
     };
-    await writeFile(inkhouseCfgPath, JSON.stringify(cfg, null, 2) + "\n", "utf8");
+    await writeFile(inkbridgeCfgPath, JSON.stringify(cfg, null, 2) + "\n", "utf8");
     if (detectedPaths.length > 0) {
-      console.log(`  ✓ created inkhouse.config.json (detected paths: ${detectedPaths.join(", ")})`);
+      console.log(`  ✓ created inkbridge.config.json (detected paths: ${detectedPaths.join(", ")})`);
     } else {
-      console.log("  ✓ created inkhouse.config.json (defaulting to src/ — edit to customise)");
+      console.log("  ✓ created inkbridge.config.json (defaulting to src/ — edit to customise)");
     }
   }
 
@@ -112,7 +112,7 @@ async function setup() {
     pkg.scripts = pkg.scripts || {};
     const toAdd = {
       "figma:dev": "next dev",
-      "figma:scan": "tsx node_modules/inkhouse/scanner/cli.ts",
+      "figma:scan": "tsx node_modules/inkbridge/scanner/cli.ts",
     };
     const added = [];
     for (const [k, v] of Object.entries(toAdd)) {
@@ -130,7 +130,7 @@ async function setup() {
   }
 
   // 5. Print manifest path
-  const manifestPath = resolve(PROJECT_ROOT, "node_modules/inkhouse/manifest.json");
+  const manifestPath = resolve(PROJECT_ROOT, "node_modules/inkbridge/manifest.json");
   console.log("");
   console.log("  Setup complete. Load the plugin in Figma Desktop:");
   console.log("    Plugins → Development → Import plugin from manifest");
@@ -146,7 +146,7 @@ async function setup() {
 // path — print manifest path (useful reference)
 // ---------------------------------------------------------------------------
 function printPath() {
-  const manifestPath = resolve(PROJECT_ROOT, "node_modules/inkhouse/manifest.json");
+  const manifestPath = resolve(PROJECT_ROOT, "node_modules/inkbridge/manifest.json");
   console.log(manifestPath);
 }
 
@@ -165,7 +165,7 @@ switch (command) {
     break;
   default:
     console.log("Usage:");
-    console.log("  inkhouse setup    Wire up scanner/token-patch routes + scripts (run once after install)");
-    console.log("  inkhouse path     Print the manifest.json path for Figma Desktop");
+    console.log("  inkbridge setup    Wire up scanner/token-patch routes + scripts (run once after install)");
+    console.log("  inkbridge path     Print the manifest.json path for Figma Desktop");
     break;
 }