@component-anatomy/storybook 0.0.2 → 0.2.0

package/README.md

@@ -4,6 +4,7 @@ Storybook addon that adds an **Anatomy** panel — an interactive part list sync
 
 - Hover a part in the panel → the element is highlighted in the canvas
 - Hover a `data-part` element in the canvas → the panel entry activates
+- The same table renders **inside MDX** via `@component-anatomy/storybook/blocks`
 - Works with **Storybook 9 and 10**, any renderer (React, Vue, HTML, Web Components…)
 
 ## Install
@@ -47,11 +48,53 @@ export const Anatomy: Story = {
 
 Omit `parts` (pass `{}`) and the panel lists parts auto-discovered from `data-part` attributes, with names derived from the ids.
 
+`preset` and `theme` reach the panel and the `<Anatomy>` block too, not just the canvas overlays: the active row is accented with the same color the overlay paints. Where that color would be illegible on Storybook's own panel — `contrast` is black, the manager is dark by default — the table falls back to the most colorful alternative that meets WCAG AA, so `contrast` accents with its yellow on a dark panel and with black on a light one.
+
 Parameters follow Storybook's normal inheritance — project-wide defaults in `.storybook/preview.ts`, per-component in `meta.parameters`, per-story overrides in `story.parameters`.
 
+## In MDX
+
+The panel's table also renders inline in a docs page, so anatomy can sit in the
+prose next to the preview. Requires `@storybook/addon-docs` (the addon that
+renders MDX), which stays an optional peer dependency — the panel above works
+without it.
+
+```mdx
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Anatomy } from '@component-anatomy/storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+<Canvas of={ButtonStories.Anatomy} />
+<Anatomy of={ButtonStories.Anatomy} />
+```
+
+Hover sync works both ways, exactly as in the panel.
+
+| Prop | Type | Description |
+|---|---|---|
+| `of` | CSF export | The story to document, or a whole CSF module to read the meta's parameters. Omit on an attached docs page (one with `<Meta of={…} />`) to fall back to the page's current story. |
+| `parts` | `AnatomyPartDefinition[]` | Curated list, overriding both `parameters.anatomy.parts` and auto-discovery. |
+| `sync` | `boolean` | Two-way hover sync with the rendered story. Default `true`. `false` gives a purely static table. |
+
+Two things worth knowing:
+
+- **Auto-discovery needs the story on the page.** Parts are read from the story's
+  `data-part` attributes as it renders, so a block that relies on discovery needs
+  a `<Canvas of={…} />` (or `<Story of={…} />`) on the same page. A block with an
+  explicit `parts` list stands on its own.
+- **A meta has no canvas.** `of={ButtonStories}` reads `meta.parameters.anatomy`,
+  but there is nothing to discover parts from or to sync hover with — give it
+  `parts` explicitly.
+
+Several blocks can share one page; each talks only to the story it names.
+
 ## Example
 
-A complete Storybook 10 setup with Button/Slider/Tabs stories lives in [`examples/storybook`](https://github.com/julien-deramond/component-anatomy/tree/main/examples/storybook), deployed at https://julien-deramond.github.io/component-anatomy/storybook/.
+A complete Storybook 10 setup with Button/Slider/Tabs stories — and two MDX
+pages using the `<Anatomy>` block — lives in [`examples/storybook`](https://github.com/julien-deramond/component-anatomy/tree/main/examples/storybook), deployed at https://julien-deramond.github.io/component-anatomy/storybook/.
 
 ## Docs
 

package/dist/AnatomyTable.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The anatomy part table — pure presentation, no Storybook imports.
+ *
+ * This module is deliberately free of `storybook/manager-api` and
+ * `storybook/preview-api`: it is bundled into *both* the manager entry (the
+ * addon panel) and the blocks entry (the `<Anatomy>` MDX doc block), which
+ * run in different runtimes and cannot share either of those APIs. Only the
+ * data acquisition differs between the two; the markup must not.
+ */
+import React from 'react';
+import type { AnatomyPartDefinition, AnatomyPresetName, AnatomyTheme } from '@component-anatomy/core';
+/**
+ * An inline `<code>` styled for the surrounding message text. Exported so
+ * both runtimes can compose their own empty-state copy without duplicating
+ * the style object.
+ */
+export declare const AnatomyCode: React.FC<{
+    children: React.ReactNode;
+}>;
+/** A padded, muted paragraph — used for every "nothing to show" state. */
+export declare const AnatomyMessage: React.FC<{
+    children: React.ReactNode;
+}>;
+export type AnatomyTableProps = {
+    /** Parts to list, in the order they should be shown. */
+    parts: AnatomyPartDefinition[];
+    /** Id of the part currently highlighted in the canvas, if any. */
+    activeId?: string | null;
+    /** The story's `anatomy.preset` — the active row follows it. */
+    preset?: AnatomyPresetName;
+    /** The story's `anatomy.theme` — token overrides on top of the preset. */
+    theme?: AnatomyTheme;
+    /** Called when the user hovers or focuses an entry. */
+    onItemEnter?: (partId: string) => void;
+    /** Called when the user leaves or blurs an entry. */
+    onItemLeave?: () => void;
+};
+export declare const AnatomyTable: React.FC<AnatomyTableProps>;
+//# sourceMappingURL=AnatomyTable.d.ts.map

package/dist/AnatomyTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnatomyTable.d.ts","sourceRoot":"","sources":["../src/AnatomyTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EACV,qBAAqB,EACrB,iBAAiB,EACjB,YAAY,EACb,MAAM,yBAAyB,CAAC;AAkIjC;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAG/D,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAOlE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wDAAwD;IACxD,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gEAAgE;IAChE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uDAAuD;IACvD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwDpD,CAAC"}

package/dist/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA6EnD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EA0FzB,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAUnD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EA8EzB,CAAC"}

package/dist/blocks.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Docs blocks entry — the `<Anatomy>` block for MDX pages.
+ *
+ * Unlike the addon panel, this runs in the **preview iframe**, where
+ * `storybook/manager-api` does not exist. It reaches the story's controller
+ * over the addon channel instead: `Channel.emit` dispatches to local
+ * listeners as well as across transports, so a block and the decorator that
+ * mounted the story talk to each other directly, in-frame, with no extra
+ * plumbing.
+ *
+ * ```mdx
+ * import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+ * import { Anatomy } from '@component-anatomy/storybook/blocks';
+ * import * as ButtonStories from './Button.stories';
+ *
+ * <Meta of={ButtonStories} />
+ *
+ * <Canvas of={ButtonStories.Anatomy} />
+ * <Anatomy of={ButtonStories.Anatomy} />
+ * ```
+ */
+import React from 'react';
+import type { Of } from '@storybook/addon-docs/blocks';
+import type { AnatomyPartDefinition } from '@component-anatomy/core';
+export type AnatomyBlockProps = {
+    /**
+     * The CSF export to document — a story export, or the whole module export
+     * of a CSF file to read the meta's parameters.
+     *
+     * Omit it on an attached docs page (one with `<Meta of={...} />`, or an
+     * autodocs page) to fall back to the page's current story, mirroring how
+     * the other docs blocks resolve `of`.
+     */
+    of?: Of;
+    /**
+     * Part list override. Skips both `parameters.anatomy.parts` and
+     * auto-discovery — useful for a hand-curated subset in prose.
+     */
+    parts?: AnatomyPartDefinition[];
+    /**
+     * Two-way hover sync with the rendered story. Default: `true`. Set to
+     * `false` for a purely static table (also skips auto-discovery, since that
+     * arrives over the channel).
+     */
+    sync?: boolean;
+};
+export declare const Anatomy: React.FC<AnatomyBlockProps>;
+//# sourceMappingURL=blocks.d.ts.map

package/dist/blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAQrE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,EAAE,CAAC;IACR;;;OAGG;IACH,KAAK,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAgBF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6H/C,CAAC"}

package/dist/blocks.js

@@ -0,0 +1,252 @@
+// src/blocks.tsx
+import React2, { useEffect, useState } from "react";
+import { addons } from "storybook/preview-api";
+import { Unstyled, useOf } from "@storybook/addon-docs/blocks";
+
+// src/constants.ts
+var ADDON_ID = "component-anatomy";
+var PANEL_ID = `${ADDON_ID}/panel`;
+var PARAM_KEY = "anatomy";
+var EVENTS = {
+  /** preview → consumers: a part became active in the canvas (hover/programmatic). */
+  PART_ENTER: `${ADDON_ID}/part-enter`,
+  /** preview → consumers: no part is active anymore. */
+  PART_LEAVE: `${ADDON_ID}/part-leave`,
+  /** preview → consumers: resolved part list for a story. */
+  PARTS: `${ADDON_ID}/parts`,
+  /** consumers → preview: the user hovers/focuses a panel entry. */
+  HOVER_ITEM: `${ADDON_ID}/hover-item`,
+  /** consumers → preview: the user left a panel entry. */
+  LEAVE_ITEM: `${ADDON_ID}/leave-item`,
+  /** 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/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: p.fontBase,
+    fontSize: 13,
+    lineHeight: 1.5,
+    color: p.text
+  },
+  empty: {
+    color: p.muted,
+    margin: 0
+  },
+  code: {
+    fontFamily: p.fontMono,
+    fontSize: "0.85em",
+    background: p.mutedBg,
+    borderRadius: 3,
+    padding: "1px 5px"
+  },
+  list: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    margin: 0,
+    padding: 0,
+    listStyle: "none"
+  },
+  entry: {
+    padding: "8px 10px",
+    borderRadius: 6,
+    border: "1px solid transparent",
+    cursor: "default",
+    outline: "none",
+    transition: "background 120ms ease, border-color 120ms ease"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    border: `2px solid ${p.border}`,
+    flexShrink: 0,
+    transition: "background 120ms ease, border-color 120ms ease"
+  },
+  name: {
+    fontWeight: 700,
+    flex: 1
+  },
+  id: {
+    fontFamily: p.fontMono,
+    fontSize: 10,
+    padding: "1px 6px",
+    borderRadius: 4,
+    background: p.mutedBg,
+    border: `1px solid ${p.border}`,
+    color: p.muted,
+    flexShrink: 0
+  },
+  description: {
+    margin: "4px 0 0",
+    paddingLeft: 16,
+    color: p.muted
+  }
+});
+var AnatomyCode = ({ children }) => {
+  const styles = makeStyles(usePalette());
+  return /* @__PURE__ */ React.createElement("code", { style: styles.code }, children);
+};
+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(
+      "li",
+      {
+        key: part.id,
+        role: "listitem",
+        tabIndex: 0,
+        "aria-label": part.name,
+        style: {
+          ...styles.entry,
+          background: active ? `color-mix(in srgb, ${accent} 7%, transparent)` : void 0,
+          borderColor: active ? `color-mix(in srgb, ${accent} 20%, transparent)` : "transparent"
+        },
+        onMouseEnter: () => onItemEnter?.(part.id),
+        onMouseLeave: () => onItemLeave?.(),
+        onFocus: () => onItemEnter?.(part.id),
+        onBlur: () => onItemLeave?.()
+      },
+      /* @__PURE__ */ React.createElement("div", { style: styles.header }, /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": "true",
+          style: {
+            ...styles.indicator,
+            background: active ? accent : void 0,
+            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)),
+      part.description && /* @__PURE__ */ React.createElement("p", { style: styles.description }, part.description)
+    );
+  })));
+};
+
+// src/blocks.tsx
+function getChannelSafely() {
+  try {
+    return addons.getChannel();
+  } catch {
+    return null;
+  }
+}
+var Anatomy = ({ of, parts: partsProp, sync = true }) => {
+  const resolved = useOf(of ?? "story", ["story", "meta"]);
+  const params = resolved.type === "meta" ? resolved.preparedMeta.parameters?.[PARAM_KEY] : resolved.story.parameters?.[PARAM_KEY];
+  const storyId = resolved.type === "story" ? resolved.story.id : void 0;
+  const [discovered, setDiscovered] = useState([]);
+  const [activeId, setActiveId] = useState(null);
+  const staticParts = partsProp ?? params?.parts;
+  const wired = sync && !!storyId;
+  useEffect(() => {
+    setDiscovered([]);
+    setActiveId(null);
+    if (!wired) return;
+    const channel = getChannelSafely();
+    if (!channel) return;
+    const onParts = (event) => {
+      if (!matchesStory(event?.storyId, storyId)) return;
+      setDiscovered(event.parts);
+    };
+    const onEnter = (event) => {
+      if (!matchesStory(event?.storyId, storyId)) return;
+      setActiveId(event.partId);
+    };
+    const onLeave = (event = {}) => {
+      if (!matchesStory(event?.storyId, storyId)) return;
+      setActiveId(null);
+    };
+    channel.on(EVENTS.PARTS, onParts);
+    channel.on(EVENTS.PART_ENTER, onEnter);
+    channel.on(EVENTS.PART_LEAVE, onLeave);
+    channel.emit(EVENTS.PARTS_REQUEST, { storyId });
+    return () => {
+      channel.off(EVENTS.PARTS, onParts);
+      channel.off(EVENTS.PART_ENTER, onEnter);
+      channel.off(EVENTS.PART_LEAVE, onLeave);
+    };
+  }, [wired, storyId]);
+  const parts = staticParts ?? discovered;
+  const emitHover = (partId) => {
+    if (!wired) return;
+    getChannelSafely()?.emit(EVENTS.HOVER_ITEM, { storyId, partId });
+  };
+  const emitLeave = () => {
+    if (!wired) return;
+    getChannelSafely()?.emit(EVENTS.LEAVE_ITEM, { storyId });
+  };
+  if (!params && !partsProp) {
+    return /* @__PURE__ */ React2.createElement(Unstyled, null, /* @__PURE__ */ React2.createElement(AnatomyMessage, null, "No anatomy configured. Add ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, "parameters.anatomy"), " to the story you pass to ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, "of"), ", or pass a", " ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, "parts"), " list to this block."));
+  }
+  if (params?.disable && !partsProp) {
+    return /* @__PURE__ */ React2.createElement(Unstyled, null, /* @__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(Unstyled, null, /* @__PURE__ */ React2.createElement(AnatomyMessage, null, resolved.type === "meta" ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, "No parts found. A meta has no canvas to discover parts from \u2014 pass a story to", " ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, "of"), ", or list ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, "parts"), " explicitly.") : /* @__PURE__ */ React2.createElement(React2.Fragment, null, "No parts found. Auto-discovery reads the rendered story, so make sure it is on this page (e.g. with a ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, "<Canvas of={\u2026} />"), " block above), or list ", /* @__PURE__ */ React2.createElement(AnatomyCode, null, "parts"), " explicitly.")));
+  }
+  return /* @__PURE__ */ React2.createElement(Unstyled, null, /* @__PURE__ */ React2.createElement(
+    AnatomyTable,
+    {
+      parts,
+      activeId,
+      preset: params?.preset,
+      theme: params?.theme,
+      onItemEnter: emitHover,
+      onItemLeave: emitLeave
+    }
+  ));
+};
+export {
+  Anatomy
+};
+//# sourceMappingURL=blocks.js.map

package/dist/blocks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/blocks.tsx", "../src/constants.ts", "../src/channel.ts", "../src/AnatomyTable.tsx"],
+  "sourcesContent": ["/**\n * Docs blocks entry \u2014 the `<Anatomy>` block for MDX pages.\n *\n * Unlike the addon panel, this runs in the **preview iframe**, where\n * `storybook/manager-api` does not exist. It reaches the story's controller\n * over the addon channel instead: `Channel.emit` dispatches to local\n * listeners as well as across transports, so a block and the decorator that\n * mounted the story talk to each other directly, in-frame, with no extra\n * plumbing.\n *\n * ```mdx\n * import { Meta, Canvas } from '@storybook/addon-docs/blocks';\n * import { Anatomy } from '@component-anatomy/storybook/blocks';\n * import * as ButtonStories from './Button.stories';\n *\n * <Meta of={ButtonStories} />\n *\n * <Canvas of={ButtonStories.Anatomy} />\n * <Anatomy of={ButtonStories.Anatomy} />\n * ```\n */\nimport React, { useEffect, useState } from 'react';\nimport { addons } from 'storybook/preview-api';\nimport { Unstyled, useOf } from '@storybook/addon-docs/blocks';\nimport type { Of } from '@storybook/addon-docs/blocks';\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 type AnatomyBlockProps = {\n  /**\n   * The CSF export to document \u2014 a story export, or the whole module export\n   * of a CSF file to read the meta's parameters.\n   *\n   * Omit it on an attached docs page (one with `<Meta of={...} />`, or an\n   * autodocs page) to fall back to the page's current story, mirroring how\n   * the other docs blocks resolve `of`.\n   */\n  of?: Of;\n  /**\n   * Part list override. Skips both `parameters.anatomy.parts` and\n   * auto-discovery \u2014 useful for a hand-curated subset in prose.\n   */\n  parts?: AnatomyPartDefinition[];\n  /**\n   * Two-way hover sync with the rendered story. Default: `true`. Set to\n   * `false` for a purely static table (also skips auto-discovery, since that\n   * arrives over the channel).\n   */\n  sync?: boolean;\n};\n\n/**\n * `addons.getChannel()` throws when no channel is installed. That should not\n * happen inside a rendered docs page, but an MDX page is user-authored\n * content and a throw here would blank the whole page \u2014 degrade to a static\n * table instead.\n */\nfunction getChannelSafely() {\n  try {\n    return addons.getChannel();\n  } catch {\n    return null;\n  }\n}\n\nexport const Anatomy: React.FC<AnatomyBlockProps> = ({ of, parts: partsProp, sync = true }) => {\n  const resolved = useOf(of ?? 'story', ['story', 'meta']);\n\n  const params = (\n    resolved.type === 'meta'\n      ? resolved.preparedMeta.parameters?.[PARAM_KEY]\n      : resolved.story.parameters?.[PARAM_KEY]\n  ) as AnatomyParameters | undefined;\n\n  // Only a story has a canvas to sync with. `of={SomeStories}` (a meta)\n  // documents the component as a whole and can render static parts only.\n  const storyId = resolved.type === 'story' ? resolved.story.id : undefined;\n\n  const [discovered, setDiscovered] = useState<AnatomyPartDefinition[]>([]);\n  const [activeId, setActiveId] = useState<string | null>(null);\n\n  const staticParts = partsProp ?? params?.parts;\n  // Hover sync is wired even when the parts are static \u2014 an explicit list\n  // still wants the canvas to light up. Only discovery depends on the channel.\n  const wired = sync && !!storyId;\n\n  useEffect(() => {\n    setDiscovered([]);\n    setActiveId(null);\n    if (!wired) return;\n\n    const channel = getChannelSafely();\n    if (!channel) return;\n\n    const onParts = (event: PartsEvent) => {\n      if (!matchesStory(event?.storyId, storyId)) return;\n      setDiscovered(event.parts);\n    };\n    const onEnter = (event: PartEnterEvent) => {\n      if (!matchesStory(event?.storyId, storyId)) return;\n      setActiveId(event.partId);\n    };\n    const onLeave = (event: StoryScopedEvent = {}) => {\n      if (!matchesStory(event?.storyId, storyId)) return;\n      setActiveId(null);\n    };\n\n    channel.on(EVENTS.PARTS, onParts);\n    channel.on(EVENTS.PART_ENTER, onEnter);\n    channel.on(EVENTS.PART_LEAVE, onLeave);\n\n    // The block usually mounts before the story below it finishes rendering;\n    // the request covers the other order.\n    channel.emit(EVENTS.PARTS_REQUEST, { storyId } satisfies StoryScopedEvent);\n\n    return () => {\n      channel.off(EVENTS.PARTS, onParts);\n      channel.off(EVENTS.PART_ENTER, onEnter);\n      channel.off(EVENTS.PART_LEAVE, onLeave);\n    };\n  }, [wired, storyId]);\n\n  const parts = staticParts ?? discovered;\n\n  const emitHover = (partId: string) => {\n    if (!wired) return;\n    getChannelSafely()?.emit(EVENTS.HOVER_ITEM, { storyId, partId });\n  };\n  const emitLeave = () => {\n    if (!wired) return;\n    getChannelSafely()?.emit(EVENTS.LEAVE_ITEM, { storyId } satisfies StoryScopedEvent);\n  };\n\n  // `Unstyled` keeps the docs page's prose CSS (`.sbdocs` restyles ul/li/p/\n  // code) from reaching the table.\n  if (!params && !partsProp) {\n    return (\n      <Unstyled>\n        <AnatomyMessage>\n          No anatomy configured. Add <AnatomyCode>parameters.anatomy</AnatomyCode> to the story you\n          pass to <AnatomyCode>of</AnatomyCode>, or pass a{' '}\n          <AnatomyCode>parts</AnatomyCode> list to this block.\n        </AnatomyMessage>\n      </Unstyled>\n    );\n  }\n\n  if (params?.disable && !partsProp) {\n    return (\n      <Unstyled>\n        <AnatomyMessage>\n          Anatomy is disabled for this story (<AnatomyCode>anatomy.disable</AnatomyCode>).\n        </AnatomyMessage>\n      </Unstyled>\n    );\n  }\n\n  if (parts.length === 0) {\n    return (\n      <Unstyled>\n        <AnatomyMessage>\n          {resolved.type === 'meta' ? (\n            <>\n              No parts found. A meta has no canvas to discover parts from \u2014 pass a story to{' '}\n              <AnatomyCode>of</AnatomyCode>, or list <AnatomyCode>parts</AnatomyCode> explicitly.\n            </>\n          ) : (\n            <>\n              No parts found. Auto-discovery reads the rendered story, so make sure it is on this\n              page (e.g. with a <AnatomyCode>{'<Canvas of={\u2026} />'}</AnatomyCode> block above), or\n              list <AnatomyCode>parts</AnatomyCode> explicitly.\n            </>\n          )}\n        </AnatomyMessage>\n      </Unstyled>\n    );\n  }\n\n  return (\n    <Unstyled>\n      <AnatomyTable\n        parts={parts}\n        activeId={activeId}\n        preset={params?.preset}\n        theme={params?.theme}\n        onItemEnter={emitHover}\n        onItemLeave={emitLeave}\n      />\n    </Unstyled>\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", "/**\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"]
+}

package/dist/channel.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Shared channel payload contract between the preview decorator, the manager
+ * panel, and the MDX doc block.
+ *
+ * Every payload carries the `storyId` it refers to. In story view this is
+ * redundant — only one story is mounted — but a docs page mounts *many*
+ * stories at once, each with its own controller, and each `<Anatomy>` block
+ * must talk to exactly one of them. Without addressing, hovering a part in
+ * one block highlights the matching part in every other story on the page.
+ */
+import type { AnatomyPartDefinition } from '@component-anatomy/core';
+/** preview → consumers: the resolved part list for one story. */
+export type PartsEvent = {
+    storyId?: string;
+    parts: AnatomyPartDefinition[];
+};
+/** preview → consumers: a part became active in that story's canvas. */
+export type PartEnterEvent = {
+    storyId?: string;
+    partId: string;
+};
+/** consumer → preview: highlight this part in that story's canvas. */
+export type HoverItemEvent = {
+    storyId?: string;
+    partId: string;
+};
+/** Payload for the events that only need to name a story. */
+export type StoryScopedEvent = {
+    storyId?: string;
+};
+/**
+ * Whether an event addressed to `eventStoryId` concerns `storyId`.
+ *
+ * A missing id on *either* side matches everything. That keeps the protocol
+ * backward compatible: a manager panel from a newer build still understands
+ * an older preview bundle that emits unaddressed events, and vice versa.
+ */
+export declare const matchesStory: (eventStoryId: string | undefined, storyId: string | undefined) => boolean;
+//# sourceMappingURL=channel.d.ts.map

package/dist/channel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"channel.d.ts","sourceRoot":"","sources":["../src/channel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,qBAAqB,EAAE,CAAA;CAAE,CAAC;AAE9E,wEAAwE;AACxE,MAAM,MAAM,cAAc,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAElE,sEAAsE;AACtE,MAAM,MAAM,cAAc,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAElE,6DAA6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,iBACT,MAAM,GAAG,SAAS,WACvB,MAAM,GAAG,SAAS,KAC1B,OAAgE,CAAC"}

package/dist/constants.d.ts

@@ -2,19 +2,25 @@ export declare const ADDON_ID = "component-anatomy";
 export declare const PANEL_ID = "component-anatomy/panel";
 /** Story parameter key: `parameters.anatomy = { ... }` */
 export declare const PARAM_KEY = "anatomy";
-/** Channel events used to sync the manager panel with the preview iframe. */
+/**
+ * Channel events used to sync the manager panel — and the `<Anatomy>` MDX doc
+ * block, which runs in the preview iframe — with the story canvas.
+ *
+ * Every payload carries the `storyId` it concerns; see `channel.ts` for the
+ * payload types and the `matchesStory` filter each listener applies.
+ */
 export declare const EVENTS: {
-    /** preview → manager: a part became active in the canvas (hover/programmatic). */
+    /** preview → consumers: a part became active in the canvas (hover/programmatic). */
     readonly PART_ENTER: "component-anatomy/part-enter";
-    /** preview → manager: no part is active anymore. */
+    /** preview → consumers: no part is active anymore. */
     readonly PART_LEAVE: "component-anatomy/part-leave";
-    /** preview → manager: resolved part list for the current story. */
+    /** preview → consumers: resolved part list for a story. */
     readonly PARTS: "component-anatomy/parts";
-    /** manager → preview: the user hovers/focuses a panel entry. */
+    /** consumers → preview: the user hovers/focuses a panel entry. */
     readonly HOVER_ITEM: "component-anatomy/hover-item";
-    /** manager → preview: the user left a panel entry. */
+    /** consumers → preview: the user left a panel entry. */
     readonly LEAVE_ITEM: "component-anatomy/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. */
     readonly PARTS_REQUEST: "component-anatomy/parts-request";
 };
 //# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,sBAAsB,CAAC;AAC5C,eAAO,MAAM,QAAQ,4BAAsB,CAAC;AAE5C,0DAA0D;AAC1D,eAAO,MAAM,SAAS,YAAY,CAAC;AAEnC,6EAA6E;AAC7E,eAAO,MAAM,MAAM;IACjB,kFAAkF;aAClF,UAAU;IACV,oDAAoD;aACpD,UAAU;IACV,mEAAmE;aACnE,KAAK;IACL,gEAAgE;aAChE,UAAU;IACV,sDAAsD;aACtD,UAAU;IACV,4EAA4E;aAC5E,aAAa;CACL,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,sBAAsB,CAAC;AAC5C,eAAO,MAAM,QAAQ,4BAAsB,CAAC;AAE5C,0DAA0D;AAC1D,eAAO,MAAM,SAAS,YAAY,CAAC;AAEnC;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;IACjB,oFAAoF;aACpF,UAAU;IACV,sDAAsD;aACtD,UAAU;IACV,2DAA2D;aAC3D,KAAK;IACL,kEAAkE;aAClE,UAAU;IACV,wDAAwD;aACxD,UAAU;IACV,kFAAkF;aAClF,aAAa;CACL,CAAC"}

package/dist/index.cjs

@@ -32,17 +32,17 @@ 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`
 };
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts", "../src/constants.ts"],
-  "sourcesContent": ["export { ADDON_ID, PANEL_ID, PARAM_KEY, EVENTS } from './constants.js';\nexport type { AnatomyParameters } from './types.js';\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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,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 { ADDON_ID, PANEL_ID, PARAM_KEY, EVENTS } from './constants.js';\nexport type { AnatomyParameters } from './types.js';\n\n// The `<Anatomy>` doc block lives in the `./blocks` subpath, not here: this\n// entry is loaded at config time by `.storybook/main.ts` (and built to CJS),\n// while the block needs React and `@storybook/addon-docs`, both optional\n// peers that must not become load-bearing for `addons: ['...']` to work.\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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,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/index.js

@@ -3,17 +3,17 @@ 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`
 };
 export {