@sxl-studio/storybook-addon 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.1.1
+
+- **Registry matching:** removed the behavior where a **single** registry entry was applied to **every** story. Matching now always uses the same story-context heuristic (or explicit `sxl.component` / `sxl.figmaNodeId`). Unrelated stories show the “no Figma integration” state.
+
 ## 1.1.0
 
 - **Preset (zero-config):** merges Content-Security-Policy so the Figma embed iframe can load (`frame-src` includes `https://www.figma.com`).

package/README.md

@@ -4,7 +4,7 @@ Storybook addon for [SXL Studio](https://sxl-studio.com) — displays Figma Embe
 
 ## Changelog
 
-See [CHANGELOG.md](./CHANGELOG.md) (e.g. **1.1.0**: preset CSP, `/sxl-tokens` for local composition, optional legacy registry filename alias, quieter logs).
+See [CHANGELOG.md](./CHANGELOG.md) (e.g. **1.1.1** registry matching fix; **1.1.0** preset CSP, `/sxl-tokens`, legacy filename alias, quieter logs).
 
 ## Features
 
@@ -21,9 +21,11 @@ npm install @sxl-studio/storybook-addon --save-dev
 
 ## Setup
 
-### 1. Register the addon
+### 1. Register the addon (`main`)
 
-`.storybook/main.ts`:
+List **`@sxl-studio/storybook-addon`** in **`addons`**. The preset ships with the package and is applied when Storybook loads the addon (no separate preset import in `main` unless your setup requires the explicit `@sxl-studio/storybook-addon/preset` entry — see troubleshooting in docs).
+
+**Minimal `main.ts`:**
 
 ```ts
 export default {
@@ -34,21 +36,35 @@ export default {
 };
 ```
 
-### 2. Import the registry
+**With a shared Storybook config** (internal design-system package, monorepo): **append** to the shared addons array — do not drop existing entries.
+
+```ts
+import sharedMain from '@your-org/storybook-vue/main';
+
+const config = {
+  ...sharedMain,
+  addons: [...(sharedMain.addons ?? []), '@sxl-studio/storybook-addon'],
+};
+
+export default config;
+```
+
+### 2. Import the registry (`preview`)
 
-The SXL Studio Figma plugin generates a `sxl-codeconnect.json` (or `diff-code-connect.<fileKey>.json`) file that maps Figma components to your codebase. Import it in your Storybook preview config.
+The SXL Studio Figma plugin generates **`diff-code-connect.<figmaFileKey>.json`** (or an exported `sxl-codeconnect.json`). Put it in **`parameters.sxl.registry`**. The **relative import path is up to your repo** (e.g. `../../tokens/tokens/diff-code-connect.xxx.json`).
 
-**Preset (automatic):** when the addon preset is loaded (default if the package is listed under `addons`), it:
+- **`fromDiffCodeConnect(raw)`** — explicit normalization; use if you prefer one code path.
+- **Raw `import registry from '...json'`** — often enough for current plugin output.
 
-- Serves the sibling folder `tokens/tokens` (if present next to the Storybook app or two levels above `.storybook`) at **`/sxl-tokens/…`**, so composition JSON paths from the registry resolve in dev and via `staticDirs` in `storybook build`.
-- If `diff-code-connect.SXL-Components.json` is **missing** but another `diff-code-connect.*.json` exists in that folder, Vite gets a **`resolve.alias`** from the legacy path to the first matching file (sorted by name). You can keep a stable import path in preview while the plugin emits `diff-code-connect.<figmaFileKey>.json`.
+**Preset (automatic):** when the addon preset runs, it:
 
-**Option A** — using `sxl-codeconnect.json` (exported from plugin):
+- Serves a nearby **`tokens/tokens`** folder at **`/sxl-tokens/…`** (dev + `storybook build` via `staticDirs`) so `compositionFilePath` in the registry resolves without extra Vite config.
+- Can **`resolve.alias`** a stable filename like `diff-code-connect.SXL-Components.json` to the real `diff-code-connect.*.json` when only one candidate exists in that folder (see CHANGELOG).
 
-`.storybook/preview.ts`:
+**Minimal `preview.ts`:**
 
 ```ts
-import registry from '../sxl-codeconnect.json';
+import registry from '../path/to/diff-code-connect.<fileKey>.json';
 
 export default {
   parameters: {
@@ -57,10 +73,25 @@ export default {
 };
 ```
 
-**Option B** — using the existing `diff-code-connect` file:
+**With a shared `preview`** — merge **`parameters`** so shared decorators/globals stay intact:
 
 ```ts
-import raw from '../diff-code-connect.abc123.json';
+import sharedPreview from '@your-org/storybook-vue/preview';
+import registry from '../../tokens/tokens/diff-code-connect.<fileKey>.json';
+
+export default {
+  ...sharedPreview,
+  parameters: {
+    ...sharedPreview.parameters,
+    sxl: { registry },
+  },
+};
+```
+
+**Alternative — converter:**
+
+```ts
+import raw from '../diff-code-connect.<fileKey>.json';
 import { fromDiffCodeConnect } from '@sxl-studio/storybook-addon';
 
 export default {
@@ -72,6 +103,8 @@ export default {
 
 ### 3. Match stories to Figma components
 
+Stories are matched to registry entries by explicit `sxl.component` / `sxl.figmaNodeId`, or by a **heuristic** on story title and file path. **A registry with a single component is not shown on every story** — unrelated stories show a “no integration” state until the story context matches or you set parameters manually.
+
 Per-story matching:
 
 ```ts

package/dist/manager.js

@@ -3706,10 +3706,7 @@ function resolveEntry(params, ctx) {
       found = registry.entries.find((e) => e.displayName.toLowerCase() === name);
     }
   }
-  if (!found && registry.entries.length === 1) {
-    found = registry.entries[0];
-  }
-  if (!found && registry.entries.length > 1) {
+  if (!found) {
     found = matchByStoryContext(registry.entries, ctx);
   }
   if (!found) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sxl-studio/storybook-addon",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Storybook addon for SXL Studio — displays Figma Embed, component info and design token status for linked components",
   "type": "module",
   "main": "dist/index.js",
@@ -26,7 +26,8 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "lint": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "push": "npm run build && npm publish"
   },
   "keywords": [
     "storybook",