@sxl-studio/storybook-addon 1.0.0

package/README.md

@@ -0,0 +1,146 @@
+# @sxl-studio/storybook-addon
+
+Storybook addon for [SXL Studio](https://sxl-studio.com) — displays Figma Embed, component info, and design token status for components linked via the SXL Studio Figma plugin.
+
+## Features
+
+- **Figma Embed** — live Figma design iframe centered in the addon panel
+- **Component info** — name, description, node ID, direct Figma link
+- **Contract** — component properties and variant count
+- **Statuses** — token assignment and design readiness badges
+
+## Installation
+
+```bash
+npm install @sxl-studio/storybook-addon --save-dev
+```
+
+## Setup
+
+### 1. Register the addon
+
+`.storybook/main.ts`:
+
+```ts
+export default {
+  addons: [
+    '@sxl-studio/storybook-addon',
+    // ...other addons
+  ],
+};
+```
+
+### 2. Import the registry
+
+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:
+
+**Option A** — using `sxl-codeconnect.json` (exported from plugin):
+
+`.storybook/preview.ts`:
+
+```ts
+import registry from '../sxl-codeconnect.json';
+
+export default {
+  parameters: {
+    sxl: { registry },
+  },
+};
+```
+
+**Option B** — using the existing `diff-code-connect` file:
+
+```ts
+import raw from '../diff-code-connect.abc123.json';
+import { fromDiffCodeConnect } from '@sxl-studio/storybook-addon';
+
+export default {
+  parameters: {
+    sxl: { registry: fromDiffCodeConnect(raw) },
+  },
+};
+```
+
+### 3. Match stories to Figma components
+
+Per-story matching:
+
+```ts
+export const Default = {
+  parameters: {
+    sxl: { component: 'WButton' },
+  },
+};
+```
+
+Or by Figma node ID:
+
+```ts
+export const Default = {
+  parameters: {
+    sxl: { figmaNodeId: '1:23' },
+  },
+};
+```
+
+You can also pass data directly without a registry:
+
+```ts
+export const Default = {
+  parameters: {
+    sxl: {
+      figmaUrl: 'https://www.figma.com/design/abc123?node-id=1-23',
+      description: 'Primary action button',
+      tokenStatus: 'assigned',
+      readiness: 'ready-for-dev',
+    },
+  },
+};
+```
+
+## Registry format (`sxl-codeconnect.json`)
+
+```json
+{
+  "version": 1,
+  "figmaFileKey": "abc123",
+  "figmaFileName": "Design System",
+  "entries": [
+    {
+      "nodeId": "1:23",
+      "displayName": "WButton",
+      "description": "Primary action button",
+      "figmaUrl": "https://www.figma.com/design/abc123?node-id=1-23",
+      "designEmbed": true,
+      "metadata": true,
+      "meta": {
+        "variantCount": 12,
+        "componentProperties": ["size", "variant", "disabled"],
+        "tokenStatus": "assigned",
+        "readiness": "ready-for-dev"
+      }
+    }
+  ]
+}
+```
+
+## Parameters reference
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `sxl.registry` | `SxlRegistry` | Global registry object (set once in preview.ts) |
+| `sxl.component` | `string` | Match entry by `displayName` |
+| `sxl.figmaNodeId` | `string` | Match entry by Figma node ID |
+| `sxl.figmaUrl` | `string` | Direct Figma URL (no registry needed) |
+| `sxl.description` | `string` | Override description |
+| `sxl.tokenStatus` | `"assigned" \| "partial" \| "none"` | Override token status |
+| `sxl.readiness` | `"complete" \| "ready-for-dev" \| "in-progress" \| "backlog"` | Override readiness |
+
+## Requirements
+
+- Storybook 8+
+- React 18+ or 19+
+
+## License
+
+MIT

package/dist/components/SxlPanel.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const SxlPanel: React.FC;
+//# sourceMappingURL=SxlPanel.d.ts.map

package/dist/components/SxlPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SxlPanel.d.ts","sourceRoot":"","sources":["../../src/components/SxlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuI1B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EA0G5B,CAAC"}

package/dist/components/SxlPanel.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useParameter } from "storybook/internal/manager-api";
+import { PARAM_KEY } from "../constants";
+import * as S from "./styles";
+// ── Lookup helpers ──────────────────────────────────────────────
+const TOKEN_STATUS_MAP = {
+    assigned: { label: "Assigned", color: "#1bc47d" },
+    partial: { label: "Partial", color: "#f5a623" },
+    none: { label: "None", color: "#b0b0b0" },
+};
+const READINESS_MAP = {
+    "complete": { label: "Complete", color: "#1bc47d" },
+    "ready-for-dev": { label: "Ready for Dev", color: "#18a0fb" },
+    "in-progress": { label: "In Progress", color: "#f5a623" },
+    "backlog": { label: "Backlog", color: "#b0b0b0" },
+};
+// ── Entry resolution ────────────────────────────────────────────
+function resolveEntry(params) {
+    if (!params)
+        return null;
+    const registry = params.registry;
+    if (params.figmaUrl || params.description) {
+        return {
+            nodeId: params.figmaNodeId ?? "",
+            displayName: params.component ?? "",
+            description: params.description,
+            figmaUrl: params.figmaUrl,
+            designEmbed: !!params.figmaUrl,
+            metadata: !!params.description,
+            meta: {
+                tokenStatus: params.tokenStatus,
+                readiness: params.readiness,
+            },
+        };
+    }
+    if (!registry?.entries?.length)
+        return null;
+    let found;
+    if (params.figmaNodeId) {
+        found = registry.entries.find((e) => e.nodeId === params.figmaNodeId);
+    }
+    if (!found && params.component) {
+        const name = params.component.toLowerCase();
+        found = registry.entries.find((e) => e.displayName.toLowerCase() === name);
+    }
+    if (!found)
+        return null;
+    return {
+        ...found,
+        meta: {
+            ...found.meta,
+            tokenStatus: params.tokenStatus ?? found.meta?.tokenStatus,
+            readiness: params.readiness ?? found.meta?.readiness,
+        },
+        description: params.description ?? found.description,
+    };
+}
+function buildEmbedUrl(figmaUrl) {
+    if (figmaUrl.includes("figma.com/embed"))
+        return figmaUrl;
+    return `https://www.figma.com/embed?embed_host=storybook&url=${encodeURIComponent(figmaUrl)}`;
+}
+function buildDesignUrl(figmaUrl) {
+    if (figmaUrl.includes("figma.com/embed")) {
+        try {
+            const u = new URL(figmaUrl);
+            return u.searchParams.get("url") ?? figmaUrl;
+        }
+        catch {
+            return figmaUrl;
+        }
+    }
+    return figmaUrl;
+}
+// ── Sub-components ──────────────────────────────────────────────
+const EmptyState = () => (_jsx("div", { style: S.container, children: _jsxs("div", { style: S.emptyState, children: [_jsx("p", { style: S.emptyTitle, children: "No SXL data for this story" }), _jsxs("p", { style: S.emptyHint, children: ["Import the registry in\u00A0", _jsx("code", { style: S.code, children: ".storybook/preview.ts" }), ":"] }), _jsx("pre", { style: S.codeBlock, children: `import registry from '../sxl-codeconnect.json';
+
+export default {
+  parameters: {
+    sxl: { registry },
+  },
+};` }), _jsx("p", { style: S.emptyHint, children: "Then match a story to a Figma component:" }), _jsx("pre", { style: S.codeBlock, children: `export const Default = {
+  parameters: {
+    sxl: { component: 'ButtonPrimary' },
+  },
+};` })] }) }));
+const StatusRow = ({ label, status, color, }) => (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: label }), _jsxs("span", { style: S.statusBadge, children: [_jsx("span", { style: { ...S.statusDot, backgroundColor: color } }), status] })] }));
+// ── Main panel ──────────────────────────────────────────────────
+export const SxlPanel = () => {
+    const params = useParameter(PARAM_KEY);
+    const entry = resolveEntry(params);
+    if (!entry)
+        return _jsx(EmptyState, {});
+    const tokenStatus = entry.meta?.tokenStatus;
+    const readiness = entry.meta?.readiness;
+    const tokenInfo = tokenStatus ? TOKEN_STATUS_MAP[tokenStatus] : null;
+    const readinessInfo = readiness ? READINESS_MAP[readiness] : null;
+    const hasProps = !!entry.meta?.componentProperties?.length;
+    const hasStatus = !!(tokenInfo || readinessInfo);
+    return (_jsxs("div", { style: S.container, children: [entry.figmaUrl && entry.designEmbed !== false && (_jsx("div", { style: S.embedSection, children: _jsx("iframe", { title: "Figma Design", src: buildEmbedUrl(entry.figmaUrl), style: S.iframe, allowFullScreen: true }) })), (entry.displayName || entry.description || entry.nodeId) && (_jsxs("div", { style: S.section, children: [_jsx("div", { style: S.sectionTitle, children: "Component" }), entry.displayName && (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Name" }), _jsx("span", { style: S.infoValue, children: entry.displayName })] })), entry.description && (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Description" }), _jsx("span", { style: S.infoValue, children: entry.description })] })), entry.nodeId && (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Node ID" }), _jsx("span", { style: { ...S.infoValue, ...S.mono }, children: entry.nodeId })] })), entry.figmaUrl && (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Figma" }), _jsx("a", { href: buildDesignUrl(entry.figmaUrl), target: "_blank", rel: "noopener noreferrer", style: S.figmaLink, children: "Open in Figma \u2197" })] }))] })), hasProps && (_jsxs("div", { style: S.section, children: [_jsx("div", { style: S.sectionTitle, children: "Contract" }), _jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Properties" }), _jsx("span", { style: S.propsList, children: entry.meta.componentProperties.map((p) => (_jsx("span", { style: S.propBadge, children: p }, p))) })] }), entry.meta.variantCount != null && (_jsxs("div", { style: S.infoRow, children: [_jsx("span", { style: S.infoLabel, children: "Variants" }), _jsx("span", { style: S.infoValue, children: entry.meta.variantCount })] }))] })), hasStatus && (_jsxs("div", { style: S.section, children: [_jsx("div", { style: S.sectionTitle, children: "Status" }), tokenInfo && (_jsx(StatusRow, { label: "Tokens", status: tokenInfo.label, color: tokenInfo.color })), readinessInfo && (_jsx(StatusRow, { label: "Readiness", status: readinessInfo.label, color: readinessInfo.color }))] }))] }));
+};
+//# sourceMappingURL=SxlPanel.js.map

package/dist/components/SxlPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SxlPanel.js","sourceRoot":"","sources":["../../src/components/SxlPanel.tsx"],"names":[],"mappings":"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"}

package/dist/components/styles.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties } from "react";
+export declare const container: CSSProperties;
+export declare const embedSection: CSSProperties;
+export declare const iframe: CSSProperties;
+export declare const section: CSSProperties;
+export declare const sectionTitle: CSSProperties;
+export declare const infoRow: CSSProperties;
+export declare const infoLabel: CSSProperties;
+export declare const infoValue: CSSProperties;
+export declare const mono: CSSProperties;
+export declare const statusBadge: CSSProperties;
+export declare const statusDot: CSSProperties;
+export declare const propsList: CSSProperties;
+export declare const propBadge: CSSProperties;
+export declare const emptyState: CSSProperties;
+export declare const emptyTitle: CSSProperties;
+export declare const emptyHint: CSSProperties;
+export declare const code: CSSProperties;
+export declare const codeBlock: CSSProperties;
+export declare const figmaLink: CSSProperties;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/components/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C,eAAO,MAAM,SAAS,EAAE,aAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,aAO1B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,aAIpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,aAMrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,aAO1B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,aAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAMvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,aAGlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,aAMzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAMvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAOvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,aAGxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,aAMxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,aAMlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAYvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC"}

package/dist/components/styles.js

@@ -0,0 +1,130 @@
+const FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+const MONO_STACK = "'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace";
+export const container = {
+    padding: "16px",
+    fontFamily: FONT_STACK,
+    fontSize: "13px",
+    lineHeight: 1.5,
+    color: "var(--sxl-text, #333)",
+    overflow: "auto",
+    height: "100%",
+};
+export const embedSection = {
+    marginBottom: "16px",
+    borderRadius: "8px",
+    overflow: "hidden",
+    border: "1px solid var(--sxl-border, #e6e6e6)",
+    display: "flex",
+    justifyContent: "center",
+};
+export const iframe = {
+    width: "100%",
+    height: "420px",
+    border: "none",
+};
+export const section = {
+    marginBottom: "12px",
+    padding: "12px",
+    borderRadius: "6px",
+    backgroundColor: "var(--sxl-section-bg, #fafafa)",
+    border: "1px solid var(--sxl-border, #eee)",
+};
+export const sectionTitle = {
+    fontSize: "11px",
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+    color: "var(--sxl-muted, #999)",
+    marginBottom: "8px",
+};
+export const infoRow = {
+    display: "flex",
+    alignItems: "baseline",
+    gap: "8px",
+    marginBottom: "4px",
+};
+export const infoLabel = {
+    fontSize: "12px",
+    fontWeight: 500,
+    color: "var(--sxl-label, #666)",
+    minWidth: "90px",
+    flexShrink: 0,
+};
+export const infoValue = {
+    fontSize: "13px",
+    color: "var(--sxl-text, #333)",
+    wordBreak: "break-word",
+};
+export const mono = {
+    fontFamily: MONO_STACK,
+    fontSize: "12px",
+};
+export const statusBadge = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    fontSize: "12px",
+    fontWeight: 500,
+};
+export const statusDot = {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    display: "inline-block",
+    flexShrink: 0,
+};
+export const propsList = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "4px",
+};
+export const propBadge = {
+    fontSize: "11px",
+    fontFamily: MONO_STACK,
+    backgroundColor: "var(--sxl-badge-bg, #eef)",
+    color: "var(--sxl-badge-text, #336)",
+    padding: "2px 6px",
+    borderRadius: "4px",
+};
+export const emptyState = {
+    textAlign: "center",
+    padding: "32px 16px",
+};
+export const emptyTitle = {
+    fontSize: "14px",
+    fontWeight: 600,
+    color: "var(--sxl-muted, #666)",
+    marginBottom: "16px",
+    marginTop: 0,
+};
+export const emptyHint = {
+    fontSize: "12px",
+    color: "var(--sxl-muted, #999)",
+    marginBottom: "8px",
+};
+export const code = {
+    fontFamily: MONO_STACK,
+    fontSize: "11px",
+    backgroundColor: "var(--sxl-code-bg, #f0f0f0)",
+    padding: "1px 4px",
+    borderRadius: "3px",
+};
+export const codeBlock = {
+    fontFamily: MONO_STACK,
+    fontSize: "11px",
+    backgroundColor: "var(--sxl-code-bg, #f5f5f5)",
+    border: "1px solid var(--sxl-border, #e6e6e6)",
+    borderRadius: "6px",
+    padding: "12px",
+    textAlign: "left",
+    overflow: "auto",
+    marginBottom: "12px",
+    lineHeight: 1.6,
+    whiteSpace: "pre",
+};
+export const figmaLink = {
+    fontSize: "11px",
+    color: "var(--sxl-link, #18a0fb)",
+    textDecoration: "none",
+};
+//# sourceMappingURL=styles.js.map

package/dist/components/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/components/styles.ts"],"names":[],"mappings":"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"}

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const ADDON_ID: "sxl-studio";
+export declare const PANEL_ID: "sxl-studio/panel";
+export declare const PARAM_KEY: "sxl";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,EAAG,YAAqB,CAAC;AAC9C,eAAO,MAAM,QAAQ,oBAA+B,CAAC;AACrD,eAAO,MAAM,SAAS,EAAG,KAAc,CAAC"}

package/dist/constants.js

@@ -0,0 +1,4 @@
+export const ADDON_ID = "sxl-studio";
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const PARAM_KEY = "sxl";
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAqB,CAAC;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,QAAQ,QAAiB,CAAC;AACrD,MAAM,CAAC,MAAM,SAAS,GAAG,KAAc,CAAC"}

package/dist/convert.d.ts

@@ -0,0 +1,16 @@
+import type { SxlRegistry } from "./types";
+/**
+ * Converts the plugin's `diff-code-connect.<fileKey>.json` to the addon registry format.
+ *
+ * Usage in `.storybook/preview.ts`:
+ * ```ts
+ * import raw from '../diff-code-connect.abc123.json';
+ * import { fromDiffCodeConnect } from '@sxl-studio/storybook-addon';
+ *
+ * export default {
+ *   parameters: { sxl: { registry: fromDiffCodeConnect(raw) } },
+ * };
+ * ```
+ */
+export declare function fromDiffCodeConnect(data: unknown): SxlRegistry;
+//# sourceMappingURL=convert.d.ts.map

package/dist/convert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"convert.d.ts","sourceRoot":"","sources":["../src/convert.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,MAAM,SAAS,CAAC;AAE7D;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,OAAO,GAAG,WAAW,CA0C9D"}

package/dist/convert.js

@@ -0,0 +1,53 @@
+/**
+ * Converts the plugin's `diff-code-connect.<fileKey>.json` to the addon registry format.
+ *
+ * Usage in `.storybook/preview.ts`:
+ * ```ts
+ * import raw from '../diff-code-connect.abc123.json';
+ * import { fromDiffCodeConnect } from '@sxl-studio/storybook-addon';
+ *
+ * export default {
+ *   parameters: { sxl: { registry: fromDiffCodeConnect(raw) } },
+ * };
+ * ```
+ */
+export function fromDiffCodeConnect(data) {
+    if (!data || typeof data !== "object") {
+        return { version: 1, figmaFileKey: "", entries: [] };
+    }
+    const d = data;
+    const fileKey = typeof d.$figmaFileKey === "string" ? d.$figmaFileKey : "";
+    const fileName = typeof d.$figmaFileName === "string" ? d.$figmaFileName : undefined;
+    const rawEntries = Array.isArray(d.entries) ? d.entries : [];
+    const entries = rawEntries
+        .filter((e) => {
+        if (!e || typeof e !== "object")
+            return false;
+        const o = e;
+        return o.linked === true && !!o.binding;
+    })
+        .map((e) => {
+        const b = e.binding;
+        const sb = (b.storybook ?? {});
+        const nodeId = String(e.nodeId ?? "");
+        const figmaUrl = fileKey
+            ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}`
+            : undefined;
+        return {
+            nodeId,
+            displayName: String(b.displayName ?? e.nodeName ?? ""),
+            description: sb.description ? String(sb.description) : undefined,
+            figmaUrl,
+            designEmbed: sb.designEmbed === true,
+            compositionJson: sb.compositionJson === true,
+            metadata: sb.metadata === true,
+        };
+    });
+    return {
+        version: 1,
+        figmaFileKey: fileKey,
+        figmaFileName: fileName,
+        entries,
+    };
+}
+//# sourceMappingURL=convert.js.map

package/dist/convert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"convert.js","sourceRoot":"","sources":["../src/convert.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAAa;IAC/C,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QACtC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;IACvD,CAAC;IAED,MAAM,CAAC,GAAG,IAA+B,CAAC;IAC1C,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3E,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,cAAc,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAErF,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAE7D,MAAM,OAAO,GAAuB,UAAU;SAC3C,MAAM,CAAC,CAAC,CAAU,EAAkB,EAAE;QACrC,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ;YAAE,OAAO,KAAK,CAAC;QAC9C,MAAM,CAAC,GAAG,CAA4B,CAAC;QACvC,OAAO,CAAC,CAAC,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1C,CAAC,CAAC;SACD,GAAG,CAAC,CAAC,CAAY,EAAE,EAAE;QACpB,MAAM,CAAC,GAAG,CAAC,CAAC,OAAkC,CAAC;QAC/C,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAA4B,CAAC;QAC1D,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC;QACtC,MAAM,QAAQ,GAAG,OAAO;YACtB,CAAC,CAAC,gCAAgC,OAAO,YAAY,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE;YAC/E,CAAC,CAAC,SAAS,CAAC;QAEd,OAAO;YACL,MAAM;YACN,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,QAAQ,IAAI,EAAE,CAAC;YACtD,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS;YAChE,QAAQ;YACR,WAAW,EAAE,EAAE,CAAC,WAAW,KAAK,IAAI;YACpC,eAAe,EAAE,EAAE,CAAC,eAAe,KAAK,IAAI;YAC5C,QAAQ,EAAE,EAAE,CAAC,QAAQ,KAAK,IAAI;SAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEL,OAAO;QACL,OAAO,EAAE,CAAC;QACV,YAAY,EAAE,OAAO;QACrB,aAAa,EAAE,QAAQ;QACvB,OAAO;KACR,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ADDON_ID, PANEL_ID, PARAM_KEY } from "./constants";
+export type { SxlRegistry, SxlRegistryEntry, SxlRegistryMeta, SxlStoryParameters, SxlTokenStatus, SxlReadiness, } from "./types";
+export { fromDiffCodeConnect } from "./convert";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE5D,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,YAAY,GACb,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { ADDON_ID, PANEL_ID, PARAM_KEY } from "./constants";
+export { fromDiffCodeConnect } from "./convert";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAW5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC"}

package/dist/manager.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=manager.d.ts.map

package/dist/manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../src/manager.tsx"],"names":[],"mappings":""}

package/dist/manager.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { addons, types } from "storybook/internal/manager-api";
+import { AddonPanel } from "storybook/internal/components";
+import { ADDON_ID, PANEL_ID } from "./constants";
+import { SxlPanel } from "./components/SxlPanel";
+addons.register(ADDON_ID, () => {
+    addons.add(PANEL_ID, {
+        type: types.PANEL,
+        title: "SXL Studio",
+        render: ({ active }) => (_jsx(AddonPanel, { active: active ?? false, children: _jsx(SxlPanel, {}) })),
+    });
+});
+//# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"manager.js","sourceRoot":"","sources":["../src/manager.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IAC7B,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE;QACnB,IAAI,EAAE,KAAK,CAAC,KAAK;QACjB,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACtB,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,IAAI,KAAK,YACjC,KAAC,QAAQ,KAAG,GACD,CACd;KACF,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/preset.d.ts

@@ -0,0 +1,2 @@
+export declare function managerEntries(entry?: string[]): string[];
+//# sourceMappingURL=preset.d.ts.map

package/dist/preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,CAAC,KAAK,GAAE,MAAM,EAAO,GAAG,MAAM,EAAE,CAE7D"}

package/dist/preset.js

@@ -0,0 +1,7 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+const dir = dirname(fileURLToPath(import.meta.url));
+export function managerEntries(entry = []) {
+    return [...entry, join(dir, "manager.js")];
+}
+//# sourceMappingURL=preset.js.map

package/dist/preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.js","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAEpD,MAAM,UAAU,cAAc,CAAC,QAAkB,EAAE;IACjD,OAAO,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;AAC7C,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,55 @@
+/** Token assignment status on the Figma component. */
+export type SxlTokenStatus = "assigned" | "partial" | "none";
+/** Design readiness stage. */
+export type SxlReadiness = "complete" | "ready-for-dev" | "in-progress" | "backlog";
+/** Extended metadata for a single Figma component (exported by the plugin). */
+export type SxlRegistryMeta = {
+    variantCount?: number;
+    componentProperties?: string[];
+    tokenStatus?: SxlTokenStatus;
+    readiness?: SxlReadiness;
+};
+/** One component entry inside the registry. */
+export type SxlRegistryEntry = {
+    nodeId: string;
+    displayName: string;
+    description?: string;
+    /** Direct Figma design URL (not embed). */
+    figmaUrl?: string;
+    designEmbed?: boolean;
+    compositionJson?: boolean;
+    metadata?: boolean;
+    meta?: SxlRegistryMeta;
+};
+/**
+ * Root registry object — typically imported from `sxl-codeconnect.json`
+ * or generated via `fromDiffCodeConnect()`.
+ */
+export type SxlRegistry = {
+    version: number;
+    figmaFileKey: string;
+    figmaFileName?: string;
+    updatedAt?: string;
+    entries: SxlRegistryEntry[];
+};
+/**
+ * Shape of `parameters.sxl` that the addon reads from each story.
+ * Can be set globally in `preview.ts` or per-story.
+ */
+export type SxlStoryParameters = {
+    /** Explicit match by display name from the registry. */
+    component?: string;
+    /** Explicit match by Figma node ID. */
+    figmaNodeId?: string;
+    /** Direct Figma design URL (overrides registry lookup). */
+    figmaUrl?: string;
+    /** Direct description (overrides registry). */
+    description?: string;
+    /** Override token status per-story. */
+    tokenStatus?: SxlTokenStatus;
+    /** Override readiness per-story. */
+    readiness?: SxlReadiness;
+    /** Registry data (typically set globally in preview.ts). */
+    registry?: SxlRegistry;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAE7D,8BAA8B;AAC9B,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,eAAe,GAAG,aAAa,GAAG,SAAS,CAAC;AAEpF,+EAA+E;AAC/E,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,CAAC;AAEF,+CAA+C;AAC/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,oCAAoC;IACpC,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,WAAW,CAAC;CACxB,CAAC"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@sxl-studio/storybook-addon",
+  "version": "1.0.0",
+  "description": "Storybook addon for SXL Studio — displays Figma Embed, component info and design token status for linked components",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./manager": "./dist/manager.js",
+    "./preset": "./dist/preset.js"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "storybook",
+    "storybook-addon",
+    "figma",
+    "design-tokens",
+    "sxl-studio",
+    "design-system",
+    "code-connect"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "storybook": "^8.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.19.17",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "storybook": "^8.0.0",
+    "typescript": "^5.7.0"
+  },
+  "storybook": {
+    "supportedFrameworks": [
+      "react",
+      "vue",
+      "angular",
+      "web-components",
+      "svelte"
+    ],
+    "addons": true
+  }
+}