@component-anatomy/storybook 0.0.2 → 0.2.0

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/constants.ts"],
-  "sourcesContent": ["export const ADDON_ID = 'component-anatomy';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\n\n/** Story parameter key: `parameters.anatomy = { ... }` */\nexport const PARAM_KEY = 'anatomy';\n\n/** Channel events used to sync the manager panel with the preview iframe. */\nexport const EVENTS = {\n  /** preview \u2192 manager: a part became active in the canvas (hover/programmatic). */\n  PART_ENTER: `${ADDON_ID}/part-enter`,\n  /** preview \u2192 manager: no part is active anymore. */\n  PART_LEAVE: `${ADDON_ID}/part-leave`,\n  /** preview \u2192 manager: resolved part list for the current story. */\n  PARTS: `${ADDON_ID}/parts`,\n  /** manager \u2192 preview: the user hovers/focuses a panel entry. */\n  HOVER_ITEM: `${ADDON_ID}/hover-item`,\n  /** manager \u2192 preview: the user left a panel entry. */\n  LEAVE_ITEM: `${ADDON_ID}/leave-item`,\n  /** manager \u2192 preview: the panel mounted and wants the current part list. */\n  PARTS_REQUEST: `${ADDON_ID}/parts-request`,\n} as const;\n"],
-  "mappings": ";AAAO,IAAM,WAAW;AACjB,IAAM,WAAW,GAAG,QAAQ;AAG5B,IAAM,YAAY;AAGlB,IAAM,SAAS;AAAA;AAAA,EAEpB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,OAAO,GAAG,QAAQ;AAAA;AAAA,EAElB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,eAAe,GAAG,QAAQ;AAC5B;",
+  "sourcesContent": ["export const ADDON_ID = 'component-anatomy';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\n\n/** Story parameter key: `parameters.anatomy = { ... }` */\nexport const PARAM_KEY = 'anatomy';\n\n/**\n * Channel events used to sync the manager panel \u2014 and the `<Anatomy>` MDX doc\n * block, which runs in the preview iframe \u2014 with the story canvas.\n *\n * Every payload carries the `storyId` it concerns; see `channel.ts` for the\n * payload types and the `matchesStory` filter each listener applies.\n */\nexport const EVENTS = {\n  /** preview \u2192 consumers: a part became active in the canvas (hover/programmatic). */\n  PART_ENTER: `${ADDON_ID}/part-enter`,\n  /** preview \u2192 consumers: no part is active anymore. */\n  PART_LEAVE: `${ADDON_ID}/part-leave`,\n  /** preview \u2192 consumers: resolved part list for a story. */\n  PARTS: `${ADDON_ID}/parts`,\n  /** consumers \u2192 preview: the user hovers/focuses a panel entry. */\n  HOVER_ITEM: `${ADDON_ID}/hover-item`,\n  /** consumers \u2192 preview: the user left a panel entry. */\n  LEAVE_ITEM: `${ADDON_ID}/leave-item`,\n  /** consumers \u2192 preview: a panel/block mounted and wants the current part list. */\n  PARTS_REQUEST: `${ADDON_ID}/parts-request`,\n} as const;\n"],
+  "mappings": ";AAAO,IAAM,WAAW;AACjB,IAAM,WAAW,GAAG,QAAQ;AAG5B,IAAM,YAAY;AASlB,IAAM,SAAS;AAAA;AAAA,EAEpB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,OAAO,GAAG,QAAQ;AAAA;AAAA,EAElB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,eAAe,GAAG,QAAQ;AAC5B;",
   "names": []
 }

package/dist/manager.js

@@ -1,5 +1,5 @@
 // src/manager.tsx
-import React2 from "react";
+import React3 from "react";
 import { addons, types } from "storybook/manager-api";
 import { AddonPanel } from "storybook/internal/components";
 
@@ -8,38 +8,68 @@ var ADDON_ID = "component-anatomy";
 var PANEL_ID = `${ADDON_ID}/panel`;
 var PARAM_KEY = "anatomy";
 var EVENTS = {
-  /** preview → manager: a part became active in the canvas (hover/programmatic). */
+  /** preview → consumers: a part became active in the canvas (hover/programmatic). */
   PART_ENTER: `${ADDON_ID}/part-enter`,
-  /** preview → manager: no part is active anymore. */
+  /** preview → consumers: no part is active anymore. */
   PART_LEAVE: `${ADDON_ID}/part-leave`,
-  /** preview → manager: resolved part list for the current story. */
+  /** preview → consumers: resolved part list for a story. */
   PARTS: `${ADDON_ID}/parts`,
-  /** manager → preview: the user hovers/focuses a panel entry. */
+  /** consumers → preview: the user hovers/focuses a panel entry. */
   HOVER_ITEM: `${ADDON_ID}/hover-item`,
-  /** manager → preview: the user left a panel entry. */
+  /** consumers → preview: the user left a panel entry. */
   LEAVE_ITEM: `${ADDON_ID}/leave-item`,
-  /** manager → preview: the panel mounted and wants the current part list. */
+  /** consumers → preview: a panel/block mounted and wants the current part list. */
   PARTS_REQUEST: `${ADDON_ID}/parts-request`
 };
 
 // src/Panel.tsx
-import React, { useEffect, useState } from "react";
+import React2, { useEffect, useState } from "react";
 import { useChannel, useParameter, useStorybookApi } from "storybook/manager-api";
-var ACCENT_FALLBACK = "#4f46e5";
-var styles = {
+
+// src/channel.ts
+var matchesStory = (eventStoryId, storyId) => !eventStoryId || !storyId || eventStoryId === storyId;
+
+// src/AnatomyTable.tsx
+import React from "react";
+import { useTheme } from "storybook/theming";
+import { resolvePanelAccent } from "@component-anatomy/core";
+var FONT_BASE_FALLBACK = '"Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif';
+var FONT_MONO_FALLBACK = 'ui-monospace, "Cascadia Code", "Fira Mono", monospace';
+function usePalette() {
+  const theme = useTheme();
+  return {
+    text: theme.fgColor?.default,
+    muted: theme.fgColor?.muted ?? "#6b7280",
+    mutedBg: theme.bgColor?.muted ?? "rgba(0,0,0,0.06)",
+    border: theme.borderColor?.default ?? "rgba(0,0,0,0.08)",
+    surfaceBg: theme.bgColor?.default ?? "#ffffff",
+    surfaceFg: theme.fgColor?.default ?? "#2e3438",
+    fontBase: theme.typography?.fonts?.base ?? FONT_BASE_FALLBACK,
+    fontMono: theme.typography?.fonts?.mono ?? FONT_MONO_FALLBACK
+  };
+}
+function useAccent(palette, preset, theme) {
+  return resolvePanelAccent(preset, theme, {
+    background: palette.surfaceBg,
+    foreground: palette.surfaceFg
+  });
+}
+var makeStyles = (p) => ({
   container: {
     padding: "12px 16px",
-    fontFamily: '"Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif',
+    fontFamily: p.fontBase,
     fontSize: 13,
-    lineHeight: 1.5
+    lineHeight: 1.5,
+    color: p.text
   },
   empty: {
-    color: "#6b7280"
+    color: p.muted,
+    margin: 0
   },
   code: {
-    fontFamily: 'ui-monospace, "Cascadia Code", "Fira Mono", monospace',
+    fontFamily: p.fontMono,
     fontSize: "0.85em",
-    background: "rgba(0,0,0,0.06)",
+    background: p.mutedBg,
     borderRadius: 3,
     padding: "1px 5px"
   },
@@ -68,7 +98,7 @@ var styles = {
     width: 8,
     height: 8,
     borderRadius: "50%",
-    border: "2px solid #d1d5db",
+    border: `2px solid ${p.border}`,
     flexShrink: 0,
     transition: "background 120ms ease, border-color 120ms ease"
   },
@@ -77,45 +107,40 @@ var styles = {
     flex: 1
   },
   id: {
-    fontFamily: 'ui-monospace, "Cascadia Code", "Fira Mono", monospace',
+    fontFamily: p.fontMono,
     fontSize: 10,
     padding: "1px 6px",
     borderRadius: 4,
-    background: "rgba(0,0,0,0.05)",
-    border: "1px solid rgba(0,0,0,0.08)",
-    color: "#6b7280",
+    background: p.mutedBg,
+    border: `1px solid ${p.border}`,
+    color: p.muted,
     flexShrink: 0
   },
   description: {
     margin: "4px 0 0",
     paddingLeft: 16,
-    color: "#6b7280"
+    color: p.muted
   }
+});
+var AnatomyCode = ({ children }) => {
+  const styles = makeStyles(usePalette());
+  return /* @__PURE__ */ React.createElement("code", { style: styles.code }, children);
 };
-var Panel = () => {
-  const params = useParameter(PARAM_KEY, void 0);
-  const api = useStorybookApi();
-  const storyId = api.getUrlState().storyId;
-  const [discovered, setDiscovered] = useState([]);
-  const [activeId, setActiveId] = useState(null);
-  const emit = useChannel({
-    [EVENTS.PARTS]: ({ parts: parts2 }) => setDiscovered(parts2),
-    [EVENTS.PART_ENTER]: ({ partId }) => setActiveId(partId),
-    [EVENTS.PART_LEAVE]: () => setActiveId(null)
-  });
-  useEffect(() => {
-    setDiscovered([]);
-    setActiveId(null);
-    emit(EVENTS.PARTS_REQUEST);
-  }, [storyId]);
-  const parts = params?.parts ?? discovered;
-  const accent = params?.theme?.accent ?? ACCENT_FALLBACK;
-  if (!params || params.disable) {
-    return /* @__PURE__ */ React.createElement("div", { style: styles.container }, /* @__PURE__ */ React.createElement("p", { style: styles.empty }, "No anatomy configured for this story. Add", " ", /* @__PURE__ */ React.createElement("code", { style: styles.code }, "parameters.anatomy"), " and annotate elements with", " ", /* @__PURE__ */ React.createElement("code", { style: styles.code }, 'data-part="name"'), "."));
-  }
-  if (parts.length === 0) {
-    return /* @__PURE__ */ React.createElement("div", { style: styles.container }, /* @__PURE__ */ React.createElement("p", { style: styles.empty }, "No parts found. Annotate elements in your story with", " ", /* @__PURE__ */ React.createElement("code", { style: styles.code }, 'data-part="name"'), " or pass", " ", /* @__PURE__ */ React.createElement("code", { style: styles.code }, "parameters.anatomy.parts"), "."));
-  }
+var AnatomyMessage = ({ children }) => {
+  const styles = makeStyles(usePalette());
+  return /* @__PURE__ */ React.createElement("div", { style: styles.container }, /* @__PURE__ */ React.createElement("p", { style: styles.empty }, children));
+};
+var AnatomyTable = ({
+  parts,
+  activeId = null,
+  preset,
+  theme,
+  onItemEnter,
+  onItemLeave
+}) => {
+  const palette = usePalette();
+  const styles = makeStyles(palette);
+  const accent = useAccent(palette, preset, theme);
   return /* @__PURE__ */ React.createElement("div", { style: styles.container }, /* @__PURE__ */ React.createElement("ul", { style: styles.list, role: "list", "aria-label": "Anatomy parts" }, parts.map((part) => {
     const active = activeId === part.id;
     return /* @__PURE__ */ React.createElement(
@@ -130,10 +155,10 @@ var Panel = () => {
           background: active ? `color-mix(in srgb, ${accent} 7%, transparent)` : void 0,
           borderColor: active ? `color-mix(in srgb, ${accent} 20%, transparent)` : "transparent"
         },
-        onMouseEnter: () => emit(EVENTS.HOVER_ITEM, { partId: part.id }),
-        onMouseLeave: () => emit(EVENTS.LEAVE_ITEM),
-        onFocus: () => emit(EVENTS.HOVER_ITEM, { partId: part.id }),
-        onBlur: () => emit(EVENTS.LEAVE_ITEM)
+        onMouseEnter: () => onItemEnter?.(part.id),
+        onMouseLeave: () => onItemLeave?.(),
+        onFocus: () => onItemEnter?.(part.id),
+        onBlur: () => onItemLeave?.()
       },
       /* @__PURE__ */ React.createElement("div", { style: styles.header }, /* @__PURE__ */ React.createElement(
         "span",
@@ -142,7 +167,7 @@ var Panel = () => {
           style: {
             ...styles.indicator,
             background: active ? accent : void 0,
-            borderColor: active ? accent : "#d1d5db"
+            borderColor: active ? accent : palette.border
           }
         }
       ), /* @__PURE__ */ React.createElement("span", { style: { ...styles.name, color: active ? accent : void 0 } }, part.name), /* @__PURE__ */ React.createElement("code", { style: styles.id }, part.id)),
@@ -151,6 +176,58 @@ var Panel = () => {
   })));
 };
 
+// src/Panel.tsx
+var Panel = () => {
+  const params = useParameter(PARAM_KEY, void 0);
+  const api = useStorybookApi();
+  const storyId = api.getUrlState().storyId;
+  const [discovered, setDiscovered] = useState([]);
+  const [activeId, setActiveId] = useState(null);
+  const emit = useChannel(
+    {
+      [EVENTS.PARTS]: (event) => {
+        if (!matchesStory(event?.storyId, storyId)) return;
+        setDiscovered(event.parts);
+      },
+      [EVENTS.PART_ENTER]: (event) => {
+        if (!matchesStory(event?.storyId, storyId)) return;
+        setActiveId(event.partId);
+      },
+      [EVENTS.PART_LEAVE]: (event = {}) => {
+        if (!matchesStory(event?.storyId, storyId)) return;
+        setActiveId(null);
+      }
+    },
+    [storyId]
+  );
+  useEffect(() => {
+    setDiscovered([]);
+    setActiveId(null);
+    emit(EVENTS.PARTS_REQUEST, { storyId });
+  }, [storyId]);
+  const parts = params?.parts ?? discovered;
+  if (!params) {
+    return /* @__PURE__ */ React2.createElement(AnatomyMessage, null, "No anatomy configured for this story. Add ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, "parameters.anatomy"), " and annotate elements with ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, 'data-part="name"'), ".");
+  }
+  if (params.disable) {
+    return /* @__PURE__ */ React2.createElement(AnatomyMessage, null, "Anatomy is disabled for this story (", /* @__PURE__ */ React2.createElement(AnatomyCode, null, "anatomy.disable"), ").");
+  }
+  if (parts.length === 0) {
+    return /* @__PURE__ */ React2.createElement(AnatomyMessage, null, "No parts found. Annotate elements in your story with", " ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, 'data-part="name"'), " or pass", " ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, "parameters.anatomy.parts"), ".");
+  }
+  return /* @__PURE__ */ React2.createElement(
+    AnatomyTable,
+    {
+      parts,
+      activeId,
+      preset: params.preset,
+      theme: params.theme,
+      onItemEnter: (partId) => emit(EVENTS.HOVER_ITEM, { storyId, partId }),
+      onItemLeave: () => emit(EVENTS.LEAVE_ITEM, { storyId })
+    }
+  );
+};
+
 // src/manager.tsx
 addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
@@ -158,7 +235,7 @@ addons.register(ADDON_ID, () => {
     title: "Anatomy",
     paramKey: PARAM_KEY,
     match: ({ viewMode }) => viewMode === "story",
-    render: ({ active }) => /* @__PURE__ */ React2.createElement(AddonPanel, { active: !!active }, /* @__PURE__ */ React2.createElement(Panel, null))
+    render: ({ active }) => /* @__PURE__ */ React3.createElement(AddonPanel, { active: !!active }, /* @__PURE__ */ React3.createElement(Panel, null))
   });
 });
 //# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/manager.tsx", "../src/constants.ts", "../src/Panel.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { addons, types } from 'storybook/manager-api';\nimport { AddonPanel } from 'storybook/internal/components';\n\nimport { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants.js';\nimport { Panel } from './Panel.js';\n\naddons.register(ADDON_ID, () => {\n  addons.add(PANEL_ID, {\n    type: types.PANEL,\n    title: 'Anatomy',\n    paramKey: PARAM_KEY,\n    match: ({ viewMode }) => viewMode === 'story',\n    render: ({ active }) => (\n      <AddonPanel active={!!active}>\n        <Panel />\n      </AddonPanel>\n    ),\n  });\n});\n", "export const ADDON_ID = 'component-anatomy';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\n\n/** Story parameter key: `parameters.anatomy = { ... }` */\nexport const PARAM_KEY = 'anatomy';\n\n/** Channel events used to sync the manager panel with the preview iframe. */\nexport const EVENTS = {\n  /** preview \u2192 manager: a part became active in the canvas (hover/programmatic). */\n  PART_ENTER: `${ADDON_ID}/part-enter`,\n  /** preview \u2192 manager: no part is active anymore. */\n  PART_LEAVE: `${ADDON_ID}/part-leave`,\n  /** preview \u2192 manager: resolved part list for the current story. */\n  PARTS: `${ADDON_ID}/parts`,\n  /** manager \u2192 preview: the user hovers/focuses a panel entry. */\n  HOVER_ITEM: `${ADDON_ID}/hover-item`,\n  /** manager \u2192 preview: the user left a panel entry. */\n  LEAVE_ITEM: `${ADDON_ID}/leave-item`,\n  /** manager \u2192 preview: the panel mounted and wants the current part list. */\n  PARTS_REQUEST: `${ADDON_ID}/parts-request`,\n} as const;\n", "import React, { useEffect, useState } from 'react';\nimport { useChannel, useParameter, useStorybookApi } from 'storybook/manager-api';\nimport type { AnatomyPartDefinition } from '@component-anatomy/core';\n\nimport { EVENTS, PARAM_KEY } from './constants.js';\nimport type { AnatomyParameters } from './types.js';\n\nconst ACCENT_FALLBACK = '#4f46e5';\n\nconst styles: Record<string, React.CSSProperties> = {\n  container: {\n    padding: '12px 16px',\n    fontFamily:\n      '\"Nunito Sans\", -apple-system, \".SFNSText-Regular\", \"San Francisco\", BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n    fontSize: 13,\n    lineHeight: 1.5,\n  },\n  empty: {\n    color: '#6b7280',\n  },\n  code: {\n    fontFamily: 'ui-monospace, \"Cascadia Code\", \"Fira Mono\", monospace',\n    fontSize: '0.85em',\n    background: 'rgba(0,0,0,0.06)',\n    borderRadius: 3,\n    padding: '1px 5px',\n  },\n  list: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  entry: {\n    padding: '8px 10px',\n    borderRadius: 6,\n    border: '1px solid transparent',\n    cursor: 'default',\n    outline: 'none',\n    transition: 'background 120ms ease, border-color 120ms ease',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n  },\n  indicator: {\n    width: 8,\n    height: 8,\n    borderRadius: '50%',\n    border: '2px solid #d1d5db',\n    flexShrink: 0,\n    transition: 'background 120ms ease, border-color 120ms ease',\n  },\n  name: {\n    fontWeight: 700,\n    flex: 1,\n  },\n  id: {\n    fontFamily: 'ui-monospace, \"Cascadia Code\", \"Fira Mono\", monospace',\n    fontSize: 10,\n    padding: '1px 6px',\n    borderRadius: 4,\n    background: 'rgba(0,0,0,0.05)',\n    border: '1px solid rgba(0,0,0,0.08)',\n    color: '#6b7280',\n    flexShrink: 0,\n  },\n  description: {\n    margin: '4px 0 0',\n    paddingLeft: 16,\n    color: '#6b7280',\n  },\n};\n\nexport const Panel: React.FC = () => {\n  const params = useParameter<AnatomyParameters | undefined>(PARAM_KEY, undefined);\n  const api = useStorybookApi();\n  const storyId = api.getUrlState().storyId;\n\n  const [discovered, setDiscovered] = useState<AnatomyPartDefinition[]>([]);\n  const [activeId, setActiveId] = useState<string | null>(null);\n\n  const emit = useChannel({\n    [EVENTS.PARTS]: ({ parts }: { parts: AnatomyPartDefinition[] }) => setDiscovered(parts),\n    [EVENTS.PART_ENTER]: ({ partId }: { partId: string }) => setActiveId(partId),\n    [EVENTS.PART_LEAVE]: () => setActiveId(null),\n  });\n\n  // Ask the preview for the current part list on mount / story change.\n  useEffect(() => {\n    setDiscovered([]);\n    setActiveId(null);\n    emit(EVENTS.PARTS_REQUEST);\n  }, [storyId]);\n\n  const parts = params?.parts ?? discovered;\n  const accent = params?.theme?.accent ?? ACCENT_FALLBACK;\n\n  if (!params || params.disable) {\n    return (\n      <div style={styles.container}>\n        <p style={styles.empty}>\n          No anatomy configured for this story. Add{' '}\n          <code style={styles.code}>parameters.anatomy</code> and annotate elements with{' '}\n          <code style={styles.code}>data-part=\"name\"</code>.\n        </p>\n      </div>\n    );\n  }\n\n  if (parts.length === 0) {\n    return (\n      <div style={styles.container}>\n        <p style={styles.empty}>\n          No parts found. Annotate elements in your story with{' '}\n          <code style={styles.code}>data-part=\"name\"</code> or pass{' '}\n          <code style={styles.code}>parameters.anatomy.parts</code>.\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div style={styles.container}>\n      <ul style={styles.list} role=\"list\" aria-label=\"Anatomy parts\">\n        {parts.map((part) => {\n          const active = activeId === part.id;\n          return (\n            <li\n              key={part.id}\n              role=\"listitem\"\n              tabIndex={0}\n              aria-label={part.name}\n              style={{\n                ...styles.entry,\n                background: active ? `color-mix(in srgb, ${accent} 7%, transparent)` : undefined,\n                borderColor: active ? `color-mix(in srgb, ${accent} 20%, transparent)` : 'transparent',\n              }}\n              onMouseEnter={() => emit(EVENTS.HOVER_ITEM, { partId: part.id })}\n              onMouseLeave={() => emit(EVENTS.LEAVE_ITEM)}\n              onFocus={() => emit(EVENTS.HOVER_ITEM, { partId: part.id })}\n              onBlur={() => emit(EVENTS.LEAVE_ITEM)}\n            >\n              <div style={styles.header}>\n                <span\n                  aria-hidden=\"true\"\n                  style={{\n                    ...styles.indicator,\n                    background: active ? accent : undefined,\n                    borderColor: active ? accent : '#d1d5db',\n                  }}\n                />\n                <span style={{ ...styles.name, color: active ? accent : undefined }}>\n                  {part.name}\n                </span>\n                <code style={styles.id}>{part.id}</code>\n              </div>\n              {part.description && <p style={styles.description}>{part.description}</p>}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["React", "parts", "React"]
+  "sources": ["../src/manager.tsx", "../src/constants.ts", "../src/Panel.tsx", "../src/channel.ts", "../src/AnatomyTable.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { addons, types } from 'storybook/manager-api';\nimport { AddonPanel } from 'storybook/internal/components';\n\nimport { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants.js';\nimport { Panel } from './Panel.js';\n\naddons.register(ADDON_ID, () => {\n  addons.add(PANEL_ID, {\n    type: types.PANEL,\n    title: 'Anatomy',\n    paramKey: PARAM_KEY,\n    match: ({ viewMode }) => viewMode === 'story',\n    render: ({ active }) => (\n      <AddonPanel active={!!active}>\n        <Panel />\n      </AddonPanel>\n    ),\n  });\n});\n", "export const ADDON_ID = 'component-anatomy';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\n\n/** Story parameter key: `parameters.anatomy = { ... }` */\nexport const PARAM_KEY = 'anatomy';\n\n/**\n * Channel events used to sync the manager panel \u2014 and the `<Anatomy>` MDX doc\n * block, which runs in the preview iframe \u2014 with the story canvas.\n *\n * Every payload carries the `storyId` it concerns; see `channel.ts` for the\n * payload types and the `matchesStory` filter each listener applies.\n */\nexport const EVENTS = {\n  /** preview \u2192 consumers: a part became active in the canvas (hover/programmatic). */\n  PART_ENTER: `${ADDON_ID}/part-enter`,\n  /** preview \u2192 consumers: no part is active anymore. */\n  PART_LEAVE: `${ADDON_ID}/part-leave`,\n  /** preview \u2192 consumers: resolved part list for a story. */\n  PARTS: `${ADDON_ID}/parts`,\n  /** consumers \u2192 preview: the user hovers/focuses a panel entry. */\n  HOVER_ITEM: `${ADDON_ID}/hover-item`,\n  /** consumers \u2192 preview: the user left a panel entry. */\n  LEAVE_ITEM: `${ADDON_ID}/leave-item`,\n  /** consumers \u2192 preview: a panel/block mounted and wants the current part list. */\n  PARTS_REQUEST: `${ADDON_ID}/parts-request`,\n} as const;\n", "import React, { useEffect, useState } from 'react';\nimport { useChannel, useParameter, useStorybookApi } from 'storybook/manager-api';\nimport type { AnatomyPartDefinition } from '@component-anatomy/core';\n\nimport { EVENTS, PARAM_KEY } from './constants.js';\nimport { matchesStory } from './channel.js';\nimport type { PartEnterEvent, PartsEvent, StoryScopedEvent } from './channel.js';\nimport { AnatomyCode, AnatomyMessage, AnatomyTable } from './AnatomyTable.js';\nimport type { AnatomyParameters } from './types.js';\n\nexport const Panel: React.FC = () => {\n  const params = useParameter<AnatomyParameters | undefined>(PARAM_KEY, undefined);\n  const api = useStorybookApi();\n  const storyId = api.getUrlState().storyId;\n\n  const [discovered, setDiscovered] = useState<AnatomyPartDefinition[]>([]);\n  const [activeId, setActiveId] = useState<string | null>(null);\n\n  // `useChannel` captures its handlers on the given deps \u2014 `storyId` has to be\n  // listed or the filters below would close over a stale story.\n  const emit = useChannel(\n    {\n      [EVENTS.PARTS]: (event: PartsEvent) => {\n        if (!matchesStory(event?.storyId, storyId)) return;\n        setDiscovered(event.parts);\n      },\n      [EVENTS.PART_ENTER]: (event: PartEnterEvent) => {\n        if (!matchesStory(event?.storyId, storyId)) return;\n        setActiveId(event.partId);\n      },\n      [EVENTS.PART_LEAVE]: (event: StoryScopedEvent = {}) => {\n        if (!matchesStory(event?.storyId, storyId)) return;\n        setActiveId(null);\n      },\n    },\n    [storyId]\n  );\n\n  // Ask the preview for the current part list on mount / story change.\n  useEffect(() => {\n    setDiscovered([]);\n    setActiveId(null);\n    emit(EVENTS.PARTS_REQUEST, { storyId } satisfies StoryScopedEvent);\n  }, [storyId]);\n\n  const parts = params?.parts ?? discovered;\n\n  if (!params) {\n    return (\n      <AnatomyMessage>\n        No anatomy configured for this story. Add <AnatomyCode>parameters.anatomy</AnatomyCode> and\n        annotate elements with <AnatomyCode>data-part=\"name\"</AnatomyCode>.\n      </AnatomyMessage>\n    );\n  }\n\n  // Defence in depth: Storybook removes a panel from the tab bar entirely when\n  // `parameters[paramKey].disable` is set, so this normally never renders. If\n  // it ever does, say the right thing \u2014 a disabled story *has* an anatomy, and\n  // telling its author to add one sends them the wrong way.\n  if (params.disable) {\n    return (\n      <AnatomyMessage>\n        Anatomy is disabled for this story (<AnatomyCode>anatomy.disable</AnatomyCode>).\n      </AnatomyMessage>\n    );\n  }\n\n  if (parts.length === 0) {\n    return (\n      <AnatomyMessage>\n        No parts found. Annotate elements in your story with{' '}\n        <AnatomyCode>data-part=\"name\"</AnatomyCode> or pass{' '}\n        <AnatomyCode>parameters.anatomy.parts</AnatomyCode>.\n      </AnatomyMessage>\n    );\n  }\n\n  return (\n    <AnatomyTable\n      parts={parts}\n      activeId={activeId}\n      preset={params.preset}\n      theme={params.theme}\n      onItemEnter={(partId) => emit(EVENTS.HOVER_ITEM, { storyId, partId })}\n      onItemLeave={() => emit(EVENTS.LEAVE_ITEM, { storyId })}\n    />\n  );\n};\n", "/**\n * Shared channel payload contract between the preview decorator, the manager\n * panel, and the MDX doc block.\n *\n * Every payload carries the `storyId` it refers to. In story view this is\n * redundant \u2014 only one story is mounted \u2014 but a docs page mounts *many*\n * stories at once, each with its own controller, and each `<Anatomy>` block\n * must talk to exactly one of them. Without addressing, hovering a part in\n * one block highlights the matching part in every other story on the page.\n */\nimport type { AnatomyPartDefinition } from '@component-anatomy/core';\n\n/** preview \u2192 consumers: the resolved part list for one story. */\nexport type PartsEvent = { storyId?: string; parts: AnatomyPartDefinition[] };\n\n/** preview \u2192 consumers: a part became active in that story's canvas. */\nexport type PartEnterEvent = { storyId?: string; partId: string };\n\n/** consumer \u2192 preview: highlight this part in that story's canvas. */\nexport type HoverItemEvent = { storyId?: string; partId: string };\n\n/** Payload for the events that only need to name a story. */\nexport type StoryScopedEvent = { storyId?: string };\n\n/**\n * Whether an event addressed to `eventStoryId` concerns `storyId`.\n *\n * A missing id on *either* side matches everything. That keeps the protocol\n * backward compatible: a manager panel from a newer build still understands\n * an older preview bundle that emits unaddressed events, and vice versa.\n */\nexport const matchesStory = (\n  eventStoryId: string | undefined,\n  storyId: string | undefined\n): boolean => !eventStoryId || !storyId || eventStoryId === storyId;\n", "/**\n * The anatomy part table \u2014 pure presentation, no Storybook imports.\n *\n * This module is deliberately free of `storybook/manager-api` and\n * `storybook/preview-api`: it is bundled into *both* the manager entry (the\n * addon panel) and the blocks entry (the `<Anatomy>` MDX doc block), which\n * run in different runtimes and cannot share either of those APIs. Only the\n * data acquisition differs between the two; the markup must not.\n */\nimport React from 'react';\nimport { useTheme } from 'storybook/theming';\nimport { resolvePanelAccent } from '@component-anatomy/core';\nimport type {\n  AnatomyPartDefinition,\n  AnatomyPresetName,\n  AnatomyTheme,\n} from '@component-anatomy/core';\n\n/**\n * The subset of Storybook's theme this table reads. Typed loosely on purpose:\n * `useTheme()` resolves to an empty `Theme` interface (Emotion augmentation),\n * and outside a ThemeProvider it returns `{}` \u2014 so every read is optional and\n * every value has a literal fallback below.\n */\ntype PartialStorybookTheme = {\n  fgColor?: { default?: string; muted?: string };\n  bgColor?: { default?: string; muted?: string };\n  borderColor?: { default?: string };\n  typography?: { fonts?: { base?: string; mono?: string } };\n};\n\nconst FONT_BASE_FALLBACK =\n  '\"Nunito Sans\", -apple-system, \".SFNSText-Regular\", \"San Francisco\", BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif';\nconst FONT_MONO_FALLBACK = 'ui-monospace, \"Cascadia Code\", \"Fira Mono\", monospace';\n\n/**\n * Resolves the table's chrome colors from Storybook's theme so the same\n * markup reads correctly in the manager panel *and* in a docs page under a\n * dark theme.\n *\n * `surfaceBg`/`surfaceFg` are not painted anywhere \u2014 they are what the accent\n * is measured against in {@link useAccent}. They carry Storybook's own light\n * defaults as fallbacks so the measurement stays meaningful outside a\n * ThemeProvider, where `useTheme()` returns `{}`.\n */\nfunction usePalette() {\n  const theme = useTheme() as PartialStorybookTheme;\n  return {\n    text: theme.fgColor?.default,\n    muted: theme.fgColor?.muted ?? '#6b7280',\n    mutedBg: theme.bgColor?.muted ?? 'rgba(0,0,0,0.06)',\n    border: theme.borderColor?.default ?? 'rgba(0,0,0,0.08)',\n    surfaceBg: theme.bgColor?.default ?? '#ffffff',\n    surfaceFg: theme.fgColor?.default ?? '#2e3438',\n    fontBase: theme.typography?.fonts?.base ?? FONT_BASE_FALLBACK,\n    fontMono: theme.typography?.fonts?.mono ?? FONT_MONO_FALLBACK,\n  };\n}\n\ntype Palette = ReturnType<typeof usePalette>;\n\n/**\n * The accent for the active row \u2014 the story's own `{ preset, theme }`, so the\n * table agrees with the overlays it describes, lifted to WCAG AA against the\n * surface it is painted on when the two disagree.\n *\n * The check is not optional polish: `preset: 'contrast'` is black on yellow\n * and the Storybook manager is dark by default, so the preset that exists for\n * users who need contrast is exactly the one that would land at 1.3:1 here.\n */\nfunction useAccent(palette: Palette, preset?: AnatomyPresetName, theme?: AnatomyTheme): string {\n  return resolvePanelAccent(preset, theme, {\n    background: palette.surfaceBg,\n    foreground: palette.surfaceFg,\n  });\n}\n\nconst makeStyles = (p: Palette): Record<string, React.CSSProperties> => ({\n  container: {\n    padding: '12px 16px',\n    fontFamily: p.fontBase,\n    fontSize: 13,\n    lineHeight: 1.5,\n    color: p.text,\n  },\n  empty: {\n    color: p.muted,\n    margin: 0,\n  },\n  code: {\n    fontFamily: p.fontMono,\n    fontSize: '0.85em',\n    background: p.mutedBg,\n    borderRadius: 3,\n    padding: '1px 5px',\n  },\n  list: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  entry: {\n    padding: '8px 10px',\n    borderRadius: 6,\n    border: '1px solid transparent',\n    cursor: 'default',\n    outline: 'none',\n    transition: 'background 120ms ease, border-color 120ms ease',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n  },\n  indicator: {\n    width: 8,\n    height: 8,\n    borderRadius: '50%',\n    border: `2px solid ${p.border}`,\n    flexShrink: 0,\n    transition: 'background 120ms ease, border-color 120ms ease',\n  },\n  name: {\n    fontWeight: 700,\n    flex: 1,\n  },\n  id: {\n    fontFamily: p.fontMono,\n    fontSize: 10,\n    padding: '1px 6px',\n    borderRadius: 4,\n    background: p.mutedBg,\n    border: `1px solid ${p.border}`,\n    color: p.muted,\n    flexShrink: 0,\n  },\n  description: {\n    margin: '4px 0 0',\n    paddingLeft: 16,\n    color: p.muted,\n  },\n});\n\n/**\n * An inline `<code>` styled for the surrounding message text. Exported so\n * both runtimes can compose their own empty-state copy without duplicating\n * the style object.\n */\nexport const AnatomyCode: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const styles = makeStyles(usePalette());\n  return <code style={styles.code}>{children}</code>;\n};\n\n/** A padded, muted paragraph \u2014 used for every \"nothing to show\" state. */\nexport const AnatomyMessage: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const styles = makeStyles(usePalette());\n  return (\n    <div style={styles.container}>\n      <p style={styles.empty}>{children}</p>\n    </div>\n  );\n};\n\nexport type AnatomyTableProps = {\n  /** Parts to list, in the order they should be shown. */\n  parts: AnatomyPartDefinition[];\n  /** Id of the part currently highlighted in the canvas, if any. */\n  activeId?: string | null;\n  /** The story's `anatomy.preset` \u2014 the active row follows it. */\n  preset?: AnatomyPresetName;\n  /** The story's `anatomy.theme` \u2014 token overrides on top of the preset. */\n  theme?: AnatomyTheme;\n  /** Called when the user hovers or focuses an entry. */\n  onItemEnter?: (partId: string) => void;\n  /** Called when the user leaves or blurs an entry. */\n  onItemLeave?: () => void;\n};\n\nexport const AnatomyTable: React.FC<AnatomyTableProps> = ({\n  parts,\n  activeId = null,\n  preset,\n  theme,\n  onItemEnter,\n  onItemLeave,\n}) => {\n  const palette = usePalette();\n  const styles = makeStyles(palette);\n  const accent = useAccent(palette, preset, theme);\n\n  return (\n    <div style={styles.container}>\n      <ul style={styles.list} role=\"list\" aria-label=\"Anatomy parts\">\n        {parts.map((part) => {\n          const active = activeId === part.id;\n          return (\n            <li\n              key={part.id}\n              role=\"listitem\"\n              tabIndex={0}\n              aria-label={part.name}\n              style={{\n                ...styles.entry,\n                background: active ? `color-mix(in srgb, ${accent} 7%, transparent)` : undefined,\n                borderColor: active\n                  ? `color-mix(in srgb, ${accent} 20%, transparent)`\n                  : 'transparent',\n              }}\n              onMouseEnter={() => onItemEnter?.(part.id)}\n              onMouseLeave={() => onItemLeave?.()}\n              onFocus={() => onItemEnter?.(part.id)}\n              onBlur={() => onItemLeave?.()}\n            >\n              <div style={styles.header}>\n                <span\n                  aria-hidden=\"true\"\n                  style={{\n                    ...styles.indicator,\n                    background: active ? accent : undefined,\n                    borderColor: active ? accent : palette.border,\n                  }}\n                />\n                <span style={{ ...styles.name, color: active ? accent : undefined }}>\n                  {part.name}\n                </span>\n                <code style={styles.id}>{part.id}</code>\n              </div>\n              {part.description && <p style={styles.description}>{part.description}</p>}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React", "React", "React", "React"]
 }

package/dist/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../src/preview.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAMvF,eAAO,MAAM,oBAAoB,YACtB,cAAc,CAAC,QAAQ,CAAC,WACxB,YAAY,CAAC,QAAQ,CAAC,QAyDhC,CAAC;AAEF,eAAO,MAAM,UAAU,iCAAyB,CAAC"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../src/preview.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQvF,eAAO,MAAM,oBAAoB,YACtB,cAAc,CAAC,QAAQ,CAAC,WACxB,YAAY,CAAC,QAAQ,CAAC,QAwEhC,CAAC;AAEF,eAAO,MAAM,UAAU,iCAAyB,CAAC"}

package/dist/preview.js

@@ -7,20 +7,23 @@ var ADDON_ID = "component-anatomy";
 var PANEL_ID = `${ADDON_ID}/panel`;
 var PARAM_KEY = "anatomy";
 var EVENTS = {
-  /** preview → manager: a part became active in the canvas (hover/programmatic). */
+  /** preview → consumers: a part became active in the canvas (hover/programmatic). */
   PART_ENTER: `${ADDON_ID}/part-enter`,
-  /** preview → manager: no part is active anymore. */
+  /** preview → consumers: no part is active anymore. */
   PART_LEAVE: `${ADDON_ID}/part-leave`,
-  /** preview → manager: resolved part list for the current story. */
+  /** preview → consumers: resolved part list for a story. */
   PARTS: `${ADDON_ID}/parts`,
-  /** manager → preview: the user hovers/focuses a panel entry. */
+  /** consumers → preview: the user hovers/focuses a panel entry. */
   HOVER_ITEM: `${ADDON_ID}/hover-item`,
-  /** manager → preview: the user left a panel entry. */
+  /** consumers → preview: the user left a panel entry. */
   LEAVE_ITEM: `${ADDON_ID}/leave-item`,
-  /** manager → preview: the panel mounted and wants the current part list. */
+  /** consumers → preview: a panel/block mounted and wants the current part list. */
   PARTS_REQUEST: `${ADDON_ID}/parts-request`
 };
 
+// src/channel.ts
+var matchesStory = (eventStoryId, storyId) => !eventStoryId || !storyId || eventStoryId === storyId;
+
 // src/preview.ts
 var withComponentAnatomy = (storyFn, context) => {
   const params = context.parameters?.[PARAM_KEY];
@@ -29,6 +32,7 @@ var withComponentAnatomy = (storyFn, context) => {
     const channel = addons.getChannel();
     const canvas = context.canvasElement;
     if (!canvas) return;
+    const storyId = context.id;
     const root = params.root ? canvas.querySelector(params.root) ?? canvas : canvas;
     const controller = createAnatomy({
       root,
@@ -40,25 +44,35 @@ var withComponentAnatomy = (storyFn, context) => {
         padding: params.overlayPadding
       }
     });
-    const announceParts = () => channel.emit(EVENTS.PARTS, { storyId: context.id, parts: controller.getParts() });
+    const announceParts = () => channel.emit(EVENTS.PARTS, { storyId, parts: controller.getParts() });
     announceParts();
     const offEnter = controller.on(
       "part:enter",
-      (partId) => channel.emit(EVENTS.PART_ENTER, { partId })
+      (partId) => channel.emit(EVENTS.PART_ENTER, { storyId, partId })
     );
     const offLeave = controller.on(
       "part:leave",
-      () => channel.emit(EVENTS.PART_LEAVE, {})
+      () => channel.emit(EVENTS.PART_LEAVE, { storyId })
     );
-    const onHoverItem = ({ partId }) => controller.highlight(partId);
-    const onLeaveItem = () => controller.unhighlight();
+    const onHoverItem = (event) => {
+      if (!matchesStory(event?.storyId, storyId)) return;
+      controller.highlight(event.partId);
+    };
+    const onLeaveItem = (event = {}) => {
+      if (!matchesStory(event?.storyId, storyId)) return;
+      controller.unhighlight();
+    };
+    const onPartsRequest = (event = {}) => {
+      if (!matchesStory(event?.storyId, storyId)) return;
+      announceParts();
+    };
     channel.on(EVENTS.HOVER_ITEM, onHoverItem);
     channel.on(EVENTS.LEAVE_ITEM, onLeaveItem);
-    channel.on(EVENTS.PARTS_REQUEST, announceParts);
+    channel.on(EVENTS.PARTS_REQUEST, onPartsRequest);
     return () => {
       channel.off(EVENTS.HOVER_ITEM, onHoverItem);
       channel.off(EVENTS.LEAVE_ITEM, onLeaveItem);
-      channel.off(EVENTS.PARTS_REQUEST, announceParts);
+      channel.off(EVENTS.PARTS_REQUEST, onPartsRequest);
       offEnter();
       offLeave();
       controller.destroy();

package/dist/preview.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/preview.ts", "../src/constants.ts"],
-  "sourcesContent": ["/**\n * Preview-side (iframe) entry. Registers a global decorator that mounts a\n * component-anatomy controller over the story canvas and syncs hover state\n * with the manager panel over the addon channel.\n */\nimport { addons, useEffect } from 'storybook/preview-api';\nimport type { Renderer, PartialStoryFn, StoryContext } from 'storybook/internal/types';\nimport { createAnatomy } from '@component-anatomy/core';\n\nimport { EVENTS, PARAM_KEY } from './constants.js';\nimport type { AnatomyParameters } from './types.js';\n\nexport const withComponentAnatomy = (\n  storyFn: PartialStoryFn<Renderer>,\n  context: StoryContext<Renderer>\n) => {\n  const params = context.parameters?.[PARAM_KEY] as AnatomyParameters | undefined;\n\n  useEffect(() => {\n    if (!params || params.disable) return;\n\n    const channel = addons.getChannel();\n    const canvas = context.canvasElement as unknown as HTMLElement;\n    if (!canvas) return;\n\n    const root = params.root\n      ? canvas.querySelector<HTMLElement>(params.root) ?? canvas\n      : canvas;\n\n    const controller = createAnatomy({\n      root,\n      parts: params.parts,\n      preset: params.preset,\n      theme: params.theme,\n      overlay: {\n        label: params.overlayLabel !== false,\n        padding: params.overlayPadding,\n      },\n    });\n\n    const announceParts = () =>\n      channel.emit(EVENTS.PARTS, { storyId: context.id, parts: controller.getParts() });\n\n    announceParts();\n\n    const offEnter = controller.on('part:enter', (partId) =>\n      channel.emit(EVENTS.PART_ENTER, { partId })\n    );\n    const offLeave = controller.on('part:leave', () =>\n      channel.emit(EVENTS.PART_LEAVE, {})\n    );\n\n    const onHoverItem = ({ partId }: { partId: string }) => controller.highlight(partId);\n    const onLeaveItem = () => controller.unhighlight();\n\n    channel.on(EVENTS.HOVER_ITEM, onHoverItem);\n    channel.on(EVENTS.LEAVE_ITEM, onLeaveItem);\n    // The panel may mount after the story rendered \u2014 let it ask for the list.\n    channel.on(EVENTS.PARTS_REQUEST, announceParts);\n\n    return () => {\n      channel.off(EVENTS.HOVER_ITEM, onHoverItem);\n      channel.off(EVENTS.LEAVE_ITEM, onLeaveItem);\n      channel.off(EVENTS.PARTS_REQUEST, announceParts);\n      offEnter();\n      offLeave();\n      controller.destroy();\n    };\n  }, [context.id]);\n\n  return storyFn();\n};\n\nexport const decorators = [withComponentAnatomy];\n", "export const ADDON_ID = 'component-anatomy';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\n\n/** Story parameter key: `parameters.anatomy = { ... }` */\nexport const PARAM_KEY = 'anatomy';\n\n/** Channel events used to sync the manager panel with the preview iframe. */\nexport const EVENTS = {\n  /** preview \u2192 manager: a part became active in the canvas (hover/programmatic). */\n  PART_ENTER: `${ADDON_ID}/part-enter`,\n  /** preview \u2192 manager: no part is active anymore. */\n  PART_LEAVE: `${ADDON_ID}/part-leave`,\n  /** preview \u2192 manager: resolved part list for the current story. */\n  PARTS: `${ADDON_ID}/parts`,\n  /** manager \u2192 preview: the user hovers/focuses a panel entry. */\n  HOVER_ITEM: `${ADDON_ID}/hover-item`,\n  /** manager \u2192 preview: the user left a panel entry. */\n  LEAVE_ITEM: `${ADDON_ID}/leave-item`,\n  /** manager \u2192 preview: the panel mounted and wants the current part list. */\n  PARTS_REQUEST: `${ADDON_ID}/parts-request`,\n} as const;\n"],
-  "mappings": ";AAKA,SAAS,QAAQ,iBAAiB;AAElC,SAAS,qBAAqB;;;ACPvB,IAAM,WAAW;AACjB,IAAM,WAAW,GAAG,QAAQ;AAG5B,IAAM,YAAY;AAGlB,IAAM,SAAS;AAAA;AAAA,EAEpB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,OAAO,GAAG,QAAQ;AAAA;AAAA,EAElB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,eAAe,GAAG,QAAQ;AAC5B;;;ADRO,IAAM,uBAAuB,CAClC,SACA,YACG;AACH,QAAM,SAAS,QAAQ,aAAa,SAAS;AAE7C,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,OAAO,QAAS;AAE/B,UAAM,UAAU,OAAO,WAAW;AAClC,UAAM,SAAS,QAAQ;AACvB,QAAI,CAAC,OAAQ;AAEb,UAAM,OAAO,OAAO,OAChB,OAAO,cAA2B,OAAO,IAAI,KAAK,SAClD;AAEJ,UAAM,aAAa,cAAc;AAAA,MAC/B;AAAA,MACA,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,OAAO,OAAO;AAAA,MACd,SAAS;AAAA,QACP,OAAO,OAAO,iBAAiB;AAAA,QAC/B,SAAS,OAAO;AAAA,MAClB;AAAA,IACF,CAAC;AAED,UAAM,gBAAgB,MACpB,QAAQ,KAAK,OAAO,OAAO,EAAE,SAAS,QAAQ,IAAI,OAAO,WAAW,SAAS,EAAE,CAAC;AAElF,kBAAc;AAEd,UAAM,WAAW,WAAW;AAAA,MAAG;AAAA,MAAc,CAAC,WAC5C,QAAQ,KAAK,OAAO,YAAY,EAAE,OAAO,CAAC;AAAA,IAC5C;AACA,UAAM,WAAW,WAAW;AAAA,MAAG;AAAA,MAAc,MAC3C,QAAQ,KAAK,OAAO,YAAY,CAAC,CAAC;AAAA,IACpC;AAEA,UAAM,cAAc,CAAC,EAAE,OAAO,MAA0B,WAAW,UAAU,MAAM;AACnF,UAAM,cAAc,MAAM,WAAW,YAAY;AAEjD,YAAQ,GAAG,OAAO,YAAY,WAAW;AACzC,YAAQ,GAAG,OAAO,YAAY,WAAW;AAEzC,YAAQ,GAAG,OAAO,eAAe,aAAa;AAE9C,WAAO,MAAM;AACX,cAAQ,IAAI,OAAO,YAAY,WAAW;AAC1C,cAAQ,IAAI,OAAO,YAAY,WAAW;AAC1C,cAAQ,IAAI,OAAO,eAAe,aAAa;AAC/C,eAAS;AACT,eAAS;AACT,iBAAW,QAAQ;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEf,SAAO,QAAQ;AACjB;AAEO,IAAM,aAAa,CAAC,oBAAoB;",
+  "sources": ["../src/preview.ts", "../src/constants.ts", "../src/channel.ts"],
+  "sourcesContent": ["/**\n * Preview-side (iframe) entry. Registers a global decorator that mounts a\n * component-anatomy controller over the story canvas and syncs hover state\n * with the manager panel \u2014 and with any `<Anatomy>` doc block on the same\n * docs page \u2014 over the addon channel.\n *\n * The decorator runs in docs view too: the docs `Story` block renders each\n * story through `renderStoryToElement`, which sets `context.canvasElement`\n * exactly as it does in story view. That is what makes auto-discovery and\n * hover sync work inside MDX.\n */\nimport { addons, useEffect } from 'storybook/preview-api';\nimport type { Renderer, PartialStoryFn, StoryContext } from 'storybook/internal/types';\nimport { createAnatomy } from '@component-anatomy/core';\n\nimport { EVENTS, PARAM_KEY } from './constants.js';\nimport { matchesStory } from './channel.js';\nimport type { HoverItemEvent, StoryScopedEvent } from './channel.js';\nimport type { AnatomyParameters } from './types.js';\n\nexport const withComponentAnatomy = (\n  storyFn: PartialStoryFn<Renderer>,\n  context: StoryContext<Renderer>\n) => {\n  const params = context.parameters?.[PARAM_KEY] as AnatomyParameters | undefined;\n\n  useEffect(() => {\n    if (!params || params.disable) return;\n\n    const channel = addons.getChannel();\n    const canvas = context.canvasElement as unknown as HTMLElement;\n    if (!canvas) return;\n\n    const storyId = context.id;\n\n    const root = params.root\n      ? canvas.querySelector<HTMLElement>(params.root) ?? canvas\n      : canvas;\n\n    const controller = createAnatomy({\n      root,\n      parts: params.parts,\n      preset: params.preset,\n      theme: params.theme,\n      overlay: {\n        label: params.overlayLabel !== false,\n        padding: params.overlayPadding,\n      },\n    });\n\n    const announceParts = () =>\n      channel.emit(EVENTS.PARTS, { storyId, parts: controller.getParts() });\n\n    announceParts();\n\n    const offEnter = controller.on('part:enter', (partId) =>\n      channel.emit(EVENTS.PART_ENTER, { storyId, partId })\n    );\n    const offLeave = controller.on('part:leave', () =>\n      channel.emit(EVENTS.PART_LEAVE, { storyId })\n    );\n\n    // A docs page mounts several stories at once, so every controller sees\n    // every panel/block event \u2014 only act on the ones addressed to this story.\n    const onHoverItem = (event: HoverItemEvent) => {\n      if (!matchesStory(event?.storyId, storyId)) return;\n      controller.highlight(event.partId);\n    };\n    const onLeaveItem = (event: StoryScopedEvent = {}) => {\n      if (!matchesStory(event?.storyId, storyId)) return;\n      controller.unhighlight();\n    };\n    const onPartsRequest = (event: StoryScopedEvent = {}) => {\n      if (!matchesStory(event?.storyId, storyId)) return;\n      announceParts();\n    };\n\n    channel.on(EVENTS.HOVER_ITEM, onHoverItem);\n    channel.on(EVENTS.LEAVE_ITEM, onLeaveItem);\n    // The panel or block may mount after the story rendered \u2014 let it ask for\n    // the list rather than racing the first announcement.\n    channel.on(EVENTS.PARTS_REQUEST, onPartsRequest);\n\n    return () => {\n      channel.off(EVENTS.HOVER_ITEM, onHoverItem);\n      channel.off(EVENTS.LEAVE_ITEM, onLeaveItem);\n      channel.off(EVENTS.PARTS_REQUEST, onPartsRequest);\n      offEnter();\n      offLeave();\n      controller.destroy();\n    };\n  }, [context.id]);\n\n  return storyFn();\n};\n\nexport const decorators = [withComponentAnatomy];\n", "export const ADDON_ID = 'component-anatomy';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\n\n/** Story parameter key: `parameters.anatomy = { ... }` */\nexport const PARAM_KEY = 'anatomy';\n\n/**\n * Channel events used to sync the manager panel \u2014 and the `<Anatomy>` MDX doc\n * block, which runs in the preview iframe \u2014 with the story canvas.\n *\n * Every payload carries the `storyId` it concerns; see `channel.ts` for the\n * payload types and the `matchesStory` filter each listener applies.\n */\nexport const EVENTS = {\n  /** preview \u2192 consumers: a part became active in the canvas (hover/programmatic). */\n  PART_ENTER: `${ADDON_ID}/part-enter`,\n  /** preview \u2192 consumers: no part is active anymore. */\n  PART_LEAVE: `${ADDON_ID}/part-leave`,\n  /** preview \u2192 consumers: resolved part list for a story. */\n  PARTS: `${ADDON_ID}/parts`,\n  /** consumers \u2192 preview: the user hovers/focuses a panel entry. */\n  HOVER_ITEM: `${ADDON_ID}/hover-item`,\n  /** consumers \u2192 preview: the user left a panel entry. */\n  LEAVE_ITEM: `${ADDON_ID}/leave-item`,\n  /** consumers \u2192 preview: a panel/block mounted and wants the current part list. */\n  PARTS_REQUEST: `${ADDON_ID}/parts-request`,\n} as const;\n", "/**\n * Shared channel payload contract between the preview decorator, the manager\n * panel, and the MDX doc block.\n *\n * Every payload carries the `storyId` it refers to. In story view this is\n * redundant \u2014 only one story is mounted \u2014 but a docs page mounts *many*\n * stories at once, each with its own controller, and each `<Anatomy>` block\n * must talk to exactly one of them. Without addressing, hovering a part in\n * one block highlights the matching part in every other story on the page.\n */\nimport type { AnatomyPartDefinition } from '@component-anatomy/core';\n\n/** preview \u2192 consumers: the resolved part list for one story. */\nexport type PartsEvent = { storyId?: string; parts: AnatomyPartDefinition[] };\n\n/** preview \u2192 consumers: a part became active in that story's canvas. */\nexport type PartEnterEvent = { storyId?: string; partId: string };\n\n/** consumer \u2192 preview: highlight this part in that story's canvas. */\nexport type HoverItemEvent = { storyId?: string; partId: string };\n\n/** Payload for the events that only need to name a story. */\nexport type StoryScopedEvent = { storyId?: string };\n\n/**\n * Whether an event addressed to `eventStoryId` concerns `storyId`.\n *\n * A missing id on *either* side matches everything. That keeps the protocol\n * backward compatible: a manager panel from a newer build still understands\n * an older preview bundle that emits unaddressed events, and vice versa.\n */\nexport const matchesStory = (\n  eventStoryId: string | undefined,\n  storyId: string | undefined\n): boolean => !eventStoryId || !storyId || eventStoryId === storyId;\n"],
+  "mappings": ";AAWA,SAAS,QAAQ,iBAAiB;AAElC,SAAS,qBAAqB;;;ACbvB,IAAM,WAAW;AACjB,IAAM,WAAW,GAAG,QAAQ;AAG5B,IAAM,YAAY;AASlB,IAAM,SAAS;AAAA;AAAA,EAEpB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,OAAO,GAAG,QAAQ;AAAA;AAAA,EAElB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,YAAY,GAAG,QAAQ;AAAA;AAAA,EAEvB,eAAe,GAAG,QAAQ;AAC5B;;;ACKO,IAAM,eAAe,CAC1B,cACA,YACY,CAAC,gBAAgB,CAAC,WAAW,iBAAiB;;;AFdrD,IAAM,uBAAuB,CAClC,SACA,YACG;AACH,QAAM,SAAS,QAAQ,aAAa,SAAS;AAE7C,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,OAAO,QAAS;AAE/B,UAAM,UAAU,OAAO,WAAW;AAClC,UAAM,SAAS,QAAQ;AACvB,QAAI,CAAC,OAAQ;AAEb,UAAM,UAAU,QAAQ;AAExB,UAAM,OAAO,OAAO,OAChB,OAAO,cAA2B,OAAO,IAAI,KAAK,SAClD;AAEJ,UAAM,aAAa,cAAc;AAAA,MAC/B;AAAA,MACA,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,OAAO,OAAO;AAAA,MACd,SAAS;AAAA,QACP,OAAO,OAAO,iBAAiB;AAAA,QAC/B,SAAS,OAAO;AAAA,MAClB;AAAA,IACF,CAAC;AAED,UAAM,gBAAgB,MACpB,QAAQ,KAAK,OAAO,OAAO,EAAE,SAAS,OAAO,WAAW,SAAS,EAAE,CAAC;AAEtE,kBAAc;AAEd,UAAM,WAAW,WAAW;AAAA,MAAG;AAAA,MAAc,CAAC,WAC5C,QAAQ,KAAK,OAAO,YAAY,EAAE,SAAS,OAAO,CAAC;AAAA,IACrD;AACA,UAAM,WAAW,WAAW;AAAA,MAAG;AAAA,MAAc,MAC3C,QAAQ,KAAK,OAAO,YAAY,EAAE,QAAQ,CAAC;AAAA,IAC7C;AAIA,UAAM,cAAc,CAAC,UAA0B;AAC7C,UAAI,CAAC,aAAa,OAAO,SAAS,OAAO,EAAG;AAC5C,iBAAW,UAAU,MAAM,MAAM;AAAA,IACnC;AACA,UAAM,cAAc,CAAC,QAA0B,CAAC,MAAM;AACpD,UAAI,CAAC,aAAa,OAAO,SAAS,OAAO,EAAG;AAC5C,iBAAW,YAAY;AAAA,IACzB;AACA,UAAM,iBAAiB,CAAC,QAA0B,CAAC,MAAM;AACvD,UAAI,CAAC,aAAa,OAAO,SAAS,OAAO,EAAG;AAC5C,oBAAc;AAAA,IAChB;AAEA,YAAQ,GAAG,OAAO,YAAY,WAAW;AACzC,YAAQ,GAAG,OAAO,YAAY,WAAW;AAGzC,YAAQ,GAAG,OAAO,eAAe,cAAc;AAE/C,WAAO,MAAM;AACX,cAAQ,IAAI,OAAO,YAAY,WAAW;AAC1C,cAAQ,IAAI,OAAO,YAAY,WAAW;AAC1C,cAAQ,IAAI,OAAO,eAAe,cAAc;AAChD,eAAS;AACT,eAAS;AACT,iBAAW,QAAQ;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEf,SAAO,QAAQ;AACjB;AAEO,IAAM,aAAa,CAAC,oBAAoB;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@component-anatomy/storybook",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "description": "Storybook addon — interactive component anatomy panel synced with the story canvas",
   "license": "MIT",
   "author": "Julien Déramond",
@@ -19,7 +19,9 @@
     "design-system",
     "documentation",
     "anatomy",
-    "appearance"
+    "appearance",
+    "mdx",
+    "storybook-docs"
   ],
   "storybook": {
     "displayName": "Component Anatomy",
@@ -38,6 +40,10 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./blocks": {
+      "types": "./dist/blocks.d.ts",
+      "import": "./dist/blocks.js"
+    },
     "./manager": "./dist/manager.js",
     "./preview": "./dist/preview.js",
     "./package.json": "./package.json"
@@ -54,24 +60,36 @@
     "access": "public"
   },
   "dependencies": {
-    "@component-anatomy/core": "^0.0.1"
+    "@component-anatomy/core": "^0.1.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.17",
-    "esbuild": "^0.28.1",
-    "react": "^19.2.7",
-    "storybook": "^10.0.0",
+    "@storybook/addon-docs": "^10.5.2",
+    "@types/react": "^19.2.18",
+    "esbuild": "^0.28.2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "storybook": "^10.5.10",
     "typescript": "^7.0.2"
   },
   "peerDependencies": {
+    "@storybook/addon-docs": ">=9.0.0",
+    "react": ">=18",
     "storybook": ">=9.0.0"
   },
+  "peerDependenciesMeta": {
+    "@storybook/addon-docs": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=22.12.0"
   },
   "scripts": {
     "build": "node build.mjs",
     "typecheck": "tsc --noEmit",
-    "test": "node build.mjs && node ../../scripts/typecheck-fixture.mjs test/consumer-types.ts"
+    "test": "node build.mjs && node ../../scripts/typecheck-fixture.mjs test/consumer-types.ts && node ../../scripts/typecheck-fixture.mjs test/consumer-blocks-types.tsx"
   }
 }