@component-anatomy/storybook 0.1.0 → 0.3.0

package/README.md

@@ -48,6 +48,8 @@ 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
@@ -58,34 +60,56 @@ renders MDX), which stays an optional peer dependency — the panel above works
 without it.
 
 ```mdx
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { 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.
+`<Anatomy>` renders the canvas and the table together, tightened into one
+pairing, with the canvas's show-code button dropped by default (chrome that
+mostly restates what the table already documents). 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. |
+| `sourceState` | `'hidden' \| 'shown' \| 'none'` | Passed to the underlying `<Canvas>`. Default `'none'` — set it to keep the show-code button. |
+
+For a hand-placed canvas — a custom layout, or one that keeps its source panel
+some other way — use `<AnatomyTable>` next to your own `<Canvas>` instead. It
+takes the same `of`, `parts` and `sync` props, minus `sourceState`, which is
+`<Canvas>`'s concern:
+
+```mdx
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { AnatomyTable } from '@component-anatomy/storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+<Canvas of={ButtonStories.Anatomy} />
+<AnatomyTable of={ButtonStories.Anatomy} />
+```
 
-Two things worth knowing:
+Two things worth knowing, for either block:
 
-- **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.
+- **Auto-discovery needs the story's canvas 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 on the same page — `<Anatomy>` brings its own,
+  `<AnatomyTable>` needs a `<Canvas of={…} />` (or `<Story of={…} />`) next to
+  it. 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.
+  `parts` explicitly, and use `<AnatomyTable>` rather than `<Anatomy>` since
+  there is no story to draw a canvas from.
 
 Several blocks can share one page; each talks only to the story it names.
 

package/dist/AnatomyTable.d.ts

@@ -8,9 +8,7 @@
  * data acquisition differs between the two; the markup must not.
  */
 import React from 'react';
-import type { AnatomyPartDefinition } from '@component-anatomy/core';
-/** Fallback accent when the story sets no `anatomy.theme.accent`. */
-export declare const ACCENT_FALLBACK = "#4f46e5";
+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
@@ -28,8 +26,10 @@ export type AnatomyTableProps = {
     parts: AnatomyPartDefinition[];
     /** Id of the part currently highlighted in the canvas, if any. */
     activeId?: string | null;
-    /** Accent color for the active state. Defaults to {@link ACCENT_FALLBACK}. */
-    accent?: string;
+    /** 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. */

package/dist/AnatomyTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnatomyTable.d.ts","sourceRoot":"","sources":["../src/AnatomyTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE,qEAAqE;AACrE,eAAO,MAAM,eAAe,YAAY,CAAC;AA4GzC;;;;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,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,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,CAsDpD,CAAC"}
+{"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;AAUnD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAkEzB,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

@@ -1,5 +1,6 @@
 /**
- * Docs blocks entry — the `<Anatomy>` block for MDX pages.
+ * Docs blocks entry — the `<Anatomy>` and `<AnatomyTable>` blocks 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
@@ -8,21 +9,37 @@
  * mounted the story talk to each other directly, in-frame, with no extra
  * plumbing.
  *
+ * `<Anatomy>` is the batteries-included block — canvas and table together,
+ * laid out for that pairing specifically ([#13](https://github.com/julien-deramond/component-anatomy/issues/13#issuecomment-5475936860)):
+ *
  * ```mdx
- * import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+ * import { 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} />
  * ```
+ *
+ * `<AnatomyTable>` is the table alone, for a hand-placed `<Canvas>` or a
+ * custom layout:
+ *
+ * ```mdx
+ * import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+ * import { AnatomyTable } from '@component-anatomy/storybook/blocks';
+ * import * as ButtonStories from './Button.stories';
+ *
+ * <Meta of={ButtonStories} />
+ *
+ * <Canvas of={ButtonStories.Anatomy} />
+ * <AnatomyTable 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 = {
+export type AnatomyTableProps = {
     /**
      * The CSF export to document — a story export, or the whole module export
      * of a CSF file to read the meta's parameters.
@@ -44,5 +61,22 @@ export type AnatomyBlockProps = {
      */
     sync?: boolean;
 };
-export declare const Anatomy: React.FC<AnatomyBlockProps>;
+export declare const AnatomyTable: React.FC<AnatomyTableProps>;
+export type AnatomyProps = AnatomyTableProps & {
+    /**
+     * Passed straight to the underlying `<Canvas>`. `'none'` (the default)
+     * drops the show-code button along with the panel it opens — chrome that
+     * mostly restates what the anatomy table already documents. Set explicitly
+     * to keep it, e.g. for a consumer relying on that source elsewhere.
+     */
+    sourceState?: 'hidden' | 'shown' | 'none';
+};
+/**
+ * The canvas and its anatomy table, paired and tightened for that specific
+ * combination ([#13](https://github.com/julien-deramond/component-anatomy/issues/13#issuecomment-5475936860)).
+ * For a hand-placed `<Canvas>` — a custom layout, or a source panel this
+ * block would otherwise hide — use `<AnatomyTable>` next to your own
+ * `<Canvas>` instead.
+ */
+export declare const Anatomy: React.FC<AnatomyProps>;
 //# sourceMappingURL=blocks.d.ts.map

package/dist/blocks.d.ts.map

@@ -1 +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,CAoH/C,CAAC"}
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;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,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6HpD,CAAC;AAwBF,MAAM,MAAM,YAAY,GAAG,iBAAiB,GAAG;IAC7C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;CAC3C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAa1C,CAAC"}

package/dist/blocks.js

@@ -1,7 +1,7 @@
 // src/blocks.tsx
 import React2, { useEffect, useState } from "react";
 import { addons } from "storybook/preview-api";
-import { Unstyled, useOf } from "@storybook/addon-docs/blocks";
+import { Canvas, Unstyled, useOf } from "@storybook/addon-docs/blocks";
 
 // src/constants.ts
 var ADDON_ID = "component-anatomy";
@@ -28,7 +28,7 @@ var matchesStory = (eventStoryId, storyId) => !eventStoryId || !storyId || event
 // src/AnatomyTable.tsx
 import React from "react";
 import { useTheme } from "storybook/theming";
-var ACCENT_FALLBACK = "#4f46e5";
+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() {
@@ -38,10 +38,18 @@ function usePalette() {
     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",
@@ -121,12 +129,14 @@ var AnatomyMessage = ({ children }) => {
 var AnatomyTable = ({
   parts,
   activeId = null,
-  accent = ACCENT_FALLBACK,
+  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(
@@ -170,7 +180,7 @@ function getChannelSafely() {
     return null;
   }
 }
-var Anatomy = ({ of, parts: partsProp, sync = true }) => {
+var AnatomyTable2 = ({ 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;
@@ -207,7 +217,6 @@ var Anatomy = ({ of, parts: partsProp, sync = true }) => {
     };
   }, [wired, storyId]);
   const parts = staticParts ?? discovered;
-  const accent = params?.theme?.accent ?? ACCENT_FALLBACK;
   const emitHover = (partId) => {
     if (!wired) return;
     getChannelSafely()?.emit(EVENTS.HOVER_ITEM, { storyId, partId });
@@ -223,20 +232,42 @@ var Anatomy = ({ of, parts: partsProp, sync = true }) => {
     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" ? "No parts found. A meta has no canvas to discover parts from \u2014 pass a story to `of`, or list `parts` explicitly." : "No parts found. Auto-discovery reads the rendered story, so make sure it is on this page (e.g. with a `<Canvas of={\u2026} />` block above), or list `parts` explicitly."));
+    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,
-      accent,
+      preset: params?.preset,
+      theme: params?.theme,
       onItemEnter: emitHover,
       onItemLeave: emitLeave
     }
   ));
 };
+var canvasGapStyleInjected = false;
+function useCanvasGapStyle() {
+  useEffect(() => {
+    if (canvasGapStyleInjected || typeof document === "undefined") return;
+    canvasGapStyleInjected = true;
+    const style = document.createElement("style");
+    style.dataset.componentAnatomy = "anatomy-block";
+    style.textContent = ".ca-anatomy .sbdocs-preview { margin-bottom: 8px; }";
+    document.head.appendChild(style);
+  }, []);
+}
+var Anatomy = ({
+  of,
+  parts,
+  sync,
+  sourceState = "none"
+}) => {
+  useCanvasGapStyle();
+  return /* @__PURE__ */ React2.createElement("div", { className: "ca-anatomy" }, /* @__PURE__ */ React2.createElement(Canvas, { of, sourceState }), /* @__PURE__ */ React2.createElement(AnatomyTable2, { of, parts, sync }));
+};
 export {
-  Anatomy
+  Anatomy,
+  AnatomyTable2 as AnatomyTable
 };
 //# sourceMappingURL=blocks.js.map

package/dist/blocks.js.map

@@ -1,7 +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 { ACCENT_FALLBACK, 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  const accent = params?.theme?.accent ?? ACCENT_FALLBACK;\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            ? 'No parts found. A meta has no canvas to discover parts from \u2014 pass a story to `of`, or list `parts` explicitly.'\n            : 'No parts found. Auto-discovery reads the rendered story, so make sure it is on this page (e.g. with a `<Canvas of={\u2026} />` block above), or list `parts` explicitly.'}\n        </AnatomyMessage>\n      </Unstyled>\n    );\n  }\n\n  return (\n    <Unstyled>\n      <AnatomyTable\n        parts={parts}\n        activeId={activeId}\n        accent={accent}\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 type { AnatomyPartDefinition } from '@component-anatomy/core';\n\n/** Fallback accent when the story sets no `anatomy.theme.accent`. */\nexport const ACCENT_FALLBACK = '#4f46e5';\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?: { 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. The accent is intentionally not theme-derived \u2014 it is the\n * addon's identity color and stays stable unless a story overrides it.\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    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\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  /** Accent color for the active state. Defaults to {@link ACCENT_FALLBACK}. */\n  accent?: string;\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  accent = ACCENT_FALLBACK,\n  onItemEnter,\n  onItemLeave,\n}) => {\n  const palette = usePalette();\n  const styles = makeStyles(palette);\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"]
+  "sourcesContent": ["/**\n * Docs blocks entry \u2014 the `<Anatomy>` and `<AnatomyTable>` blocks for MDX\n * 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 * `<Anatomy>` is the batteries-included block \u2014 canvas and table together,\n * laid out for that pairing specifically ([#13](https://github.com/julien-deramond/component-anatomy/issues/13#issuecomment-5475936860)):\n *\n * ```mdx\n * import { Meta } 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 * <Anatomy of={ButtonStories.Anatomy} />\n * ```\n *\n * `<AnatomyTable>` is the table alone, for a hand-placed `<Canvas>` or a\n * custom layout:\n *\n * ```mdx\n * import { Canvas, Meta } from '@storybook/addon-docs/blocks';\n * import { AnatomyTable } from '@component-anatomy/storybook/blocks';\n * import * as ButtonStories from './Button.stories';\n *\n * <Meta of={ButtonStories} />\n *\n * <Canvas of={ButtonStories.Anatomy} />\n * <AnatomyTable of={ButtonStories.Anatomy} />\n * ```\n */\nimport React, { useEffect, useState } from 'react';\nimport { addons } from 'storybook/preview-api';\nimport { Canvas, 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 as AnatomyTablePrimitive } from './AnatomyTable.js';\nimport type { AnatomyParameters } from './types.js';\n\nexport type AnatomyTableProps = {\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 AnatomyTable: React.FC<AnatomyTableProps> = ({ 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      <AnatomyTablePrimitive\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\n/**\n * Injects the rule that tightens `<Anatomy>`'s canvas-to-table gap, once per\n * page \u2014 a module-level flag rather than `useState`, so mounting a second\n * `<Anatomy>` block doesn't append the rule again. Scoped under\n * `.ca-anatomy` so it never touches a bare `<Canvas>` placed by the consumer.\n *\n * Self-injected rather than asked of the consumer's `preview-head.html`: the\n * block owns both elements it is bridging, so the gap between them is its\n * concern, not config the consumer should have to wire up.\n */\nlet canvasGapStyleInjected = false;\nfunction useCanvasGapStyle() {\n  useEffect(() => {\n    if (canvasGapStyleInjected || typeof document === 'undefined') return;\n    canvasGapStyleInjected = true;\n    const style = document.createElement('style');\n    style.dataset.componentAnatomy = 'anatomy-block';\n    style.textContent = '.ca-anatomy .sbdocs-preview { margin-bottom: 8px; }';\n    document.head.appendChild(style);\n  }, []);\n}\n\nexport type AnatomyProps = AnatomyTableProps & {\n  /**\n   * Passed straight to the underlying `<Canvas>`. `'none'` (the default)\n   * drops the show-code button along with the panel it opens \u2014 chrome that\n   * mostly restates what the anatomy table already documents. Set explicitly\n   * to keep it, e.g. for a consumer relying on that source elsewhere.\n   */\n  sourceState?: 'hidden' | 'shown' | 'none';\n};\n\n/**\n * The canvas and its anatomy table, paired and tightened for that specific\n * combination ([#13](https://github.com/julien-deramond/component-anatomy/issues/13#issuecomment-5475936860)).\n * For a hand-placed `<Canvas>` \u2014 a custom layout, or a source panel this\n * block would otherwise hide \u2014 use `<AnatomyTable>` next to your own\n * `<Canvas>` instead.\n */\nexport const Anatomy: React.FC<AnatomyProps> = ({\n  of,\n  parts,\n  sync,\n  sourceState = 'none',\n}) => {\n  useCanvasGapStyle();\n  return (\n    <div className=\"ca-anatomy\">\n      <Canvas of={of} sourceState={sourceState} />\n      <AnatomyTable of={of} parts={parts} sync={sync} />\n    </div>\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", "AnatomyTable", "React"]
 }

package/dist/manager.js

@@ -32,7 +32,7 @@ var matchesStory = (eventStoryId, storyId) => !eventStoryId || !storyId || event
 // src/AnatomyTable.tsx
 import React from "react";
 import { useTheme } from "storybook/theming";
-var ACCENT_FALLBACK = "#4f46e5";
+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() {
@@ -42,10 +42,18 @@ function usePalette() {
     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",
@@ -125,12 +133,14 @@ var AnatomyMessage = ({ children }) => {
 var AnatomyTable = ({
   parts,
   activeId = null,
-  accent = ACCENT_FALLBACK,
+  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(
@@ -196,10 +206,12 @@ var Panel = () => {
     emit(EVENTS.PARTS_REQUEST, { storyId });
   }, [storyId]);
   const parts = params?.parts ?? discovered;
-  const accent = params?.theme?.accent ?? ACCENT_FALLBACK;
-  if (!params || params.disable) {
+  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"), ".");
   }
@@ -208,7 +220,8 @@ var Panel = () => {
     {
       parts,
       activeId,
-      accent,
+      preset: params.preset,
+      theme: params.theme,
       onItemEnter: (partId) => emit(EVENTS.HOVER_ITEM, { storyId, partId }),
       onItemLeave: () => emit(EVENTS.LEAVE_ITEM, { storyId })
     }

package/dist/manager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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 { ACCENT_FALLBACK, 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  const accent = params?.theme?.accent ?? ACCENT_FALLBACK;\n\n  if (!params || params.disable) {\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  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      accent={accent}\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 type { AnatomyPartDefinition } from '@component-anatomy/core';\n\n/** Fallback accent when the story sets no `anatomy.theme.accent`. */\nexport const ACCENT_FALLBACK = '#4f46e5';\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?: { 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. The accent is intentionally not theme-derived \u2014 it is the\n * addon's identity color and stays stable unless a story overrides it.\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    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\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  /** Accent color for the active state. Defaults to {@link ACCENT_FALLBACK}. */\n  accent?: string;\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  accent = ACCENT_FALLBACK,\n  onItemEnter,\n  onItemLeave,\n}) => {\n  const palette = usePalette();\n  const styles = makeStyles(palette);\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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",
+  "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@component-anatomy/storybook",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Storybook addon — interactive component anatomy panel synced with the story canvas",
   "license": "MIT",
   "author": "Julien Déramond",
@@ -60,12 +60,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@component-anatomy/core": "^0.0.1"
+    "@component-anatomy/core": "^0.1.0"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^10.5.2",
     "@types/react": "^19.2.18",
-    "esbuild": "^0.28.1",
+    "esbuild": "^0.28.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "storybook": "^10.5.10",

package/src/AnatomyTable.tsx

@@ -9,10 +9,12 @@
  */
 import React from 'react';
 import { useTheme } from 'storybook/theming';
-import type { AnatomyPartDefinition } from '@component-anatomy/core';
-
-/** Fallback accent when the story sets no `anatomy.theme.accent`. */
-export const ACCENT_FALLBACK = '#4f46e5';
+import { resolvePanelAccent } from '@component-anatomy/core';
+import type {
+  AnatomyPartDefinition,
+  AnatomyPresetName,
+  AnatomyTheme,
+} from '@component-anatomy/core';
 
 /**
  * The subset of Storybook's theme this table reads. Typed loosely on purpose:
@@ -22,7 +24,7 @@ export const ACCENT_FALLBACK = '#4f46e5';
  */
 type PartialStorybookTheme = {
   fgColor?: { default?: string; muted?: string };
-  bgColor?: { muted?: string };
+  bgColor?: { default?: string; muted?: string };
   borderColor?: { default?: string };
   typography?: { fonts?: { base?: string; mono?: string } };
 };
@@ -34,8 +36,12 @@ const FONT_MONO_FALLBACK = 'ui-monospace, "Cascadia Code", "Fira Mono", monospac
 /**
  * Resolves the table's chrome colors from Storybook's theme so the same
  * markup reads correctly in the manager panel *and* in a docs page under a
- * dark theme. The accent is intentionally not theme-derived — it is the
- * addon's identity color and stays stable unless a story overrides it.
+ * dark theme.
+ *
+ * `surfaceBg`/`surfaceFg` are not painted anywhere — they are what the accent
+ * is measured against in {@link useAccent}. They carry Storybook's own light
+ * defaults as fallbacks so the measurement stays meaningful outside a
+ * ThemeProvider, where `useTheme()` returns `{}`.
  */
 function usePalette() {
   const theme = useTheme() as PartialStorybookTheme;
@@ -44,6 +50,8 @@ function usePalette() {
     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,
   };
@@ -51,6 +59,22 @@ function usePalette() {
 
 type Palette = ReturnType<typeof usePalette>;
 
+/**
+ * The accent for the active row — the story's own `{ preset, theme }`, so the
+ * table agrees with the overlays it describes, lifted to WCAG AA against the
+ * surface it is painted on when the two disagree.
+ *
+ * The check is not optional polish: `preset: 'contrast'` is black on yellow
+ * and the Storybook manager is dark by default, so the preset that exists for
+ * users who need contrast is exactly the one that would land at 1.3:1 here.
+ */
+function useAccent(palette: Palette, preset?: AnatomyPresetName, theme?: AnatomyTheme): string {
+  return resolvePanelAccent(preset, theme, {
+    background: palette.surfaceBg,
+    foreground: palette.surfaceFg,
+  });
+}
+
 const makeStyles = (p: Palette): Record<string, React.CSSProperties> => ({
   container: {
     padding: '12px 16px',
@@ -145,8 +169,10 @@ export type AnatomyTableProps = {
   parts: AnatomyPartDefinition[];
   /** Id of the part currently highlighted in the canvas, if any. */
   activeId?: string | null;
-  /** Accent color for the active state. Defaults to {@link ACCENT_FALLBACK}. */
-  accent?: string;
+  /** 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. */
@@ -156,12 +182,14 @@ export type AnatomyTableProps = {
 export const AnatomyTable: React.FC<AnatomyTableProps> = ({
   parts,
   activeId = null,
-  accent = ACCENT_FALLBACK,
+  preset,
+  theme,
   onItemEnter,
   onItemLeave,
 }) => {
   const palette = usePalette();
   const styles = makeStyles(palette);
+  const accent = useAccent(palette, preset, theme);
 
   return (
     <div style={styles.container}>

package/src/Panel.tsx

@@ -5,7 +5,7 @@ import type { AnatomyPartDefinition } from '@component-anatomy/core';
 import { EVENTS, PARAM_KEY } from './constants.js';
 import { matchesStory } from './channel.js';
 import type { PartEnterEvent, PartsEvent, StoryScopedEvent } from './channel.js';
-import { ACCENT_FALLBACK, AnatomyCode, AnatomyMessage, AnatomyTable } from './AnatomyTable.js';
+import { AnatomyCode, AnatomyMessage, AnatomyTable } from './AnatomyTable.js';
 import type { AnatomyParameters } from './types.js';
 
 export const Panel: React.FC = () => {
@@ -44,9 +44,8 @@ export const Panel: React.FC = () => {
   }, [storyId]);
 
   const parts = params?.parts ?? discovered;
-  const accent = params?.theme?.accent ?? ACCENT_FALLBACK;
 
-  if (!params || params.disable) {
+  if (!params) {
     return (
       <AnatomyMessage>
         No anatomy configured for this story. Add <AnatomyCode>parameters.anatomy</AnatomyCode> and
@@ -55,6 +54,18 @@ export const Panel: React.FC = () => {
     );
   }
 
+  // Defence in depth: Storybook removes a panel from the tab bar entirely when
+  // `parameters[paramKey].disable` is set, so this normally never renders. If
+  // it ever does, say the right thing — a disabled story *has* an anatomy, and
+  // telling its author to add one sends them the wrong way.
+  if (params.disable) {
+    return (
+      <AnatomyMessage>
+        Anatomy is disabled for this story (<AnatomyCode>anatomy.disable</AnatomyCode>).
+      </AnatomyMessage>
+    );
+  }
+
   if (parts.length === 0) {
     return (
       <AnatomyMessage>
@@ -69,7 +80,8 @@ export const Panel: React.FC = () => {
     <AnatomyTable
       parts={parts}
       activeId={activeId}
-      accent={accent}
+      preset={params.preset}
+      theme={params.theme}
       onItemEnter={(partId) => emit(EVENTS.HOVER_ITEM, { storyId, partId })}
       onItemLeave={() => emit(EVENTS.LEAVE_ITEM, { storyId })}
     />

package/src/blocks.tsx

@@ -1,5 +1,6 @@
 /**
- * Docs blocks entry — the `<Anatomy>` block for MDX pages.
+ * Docs blocks entry — the `<Anatomy>` and `<AnatomyTable>` blocks 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
@@ -8,30 +9,46 @@
  * mounted the story talk to each other directly, in-frame, with no extra
  * plumbing.
  *
+ * `<Anatomy>` is the batteries-included block — canvas and table together,
+ * laid out for that pairing specifically ([#13](https://github.com/julien-deramond/component-anatomy/issues/13#issuecomment-5475936860)):
+ *
  * ```mdx
- * import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+ * import { 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} />
  * ```
+ *
+ * `<AnatomyTable>` is the table alone, for a hand-placed `<Canvas>` or a
+ * custom layout:
+ *
+ * ```mdx
+ * import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+ * import { AnatomyTable } from '@component-anatomy/storybook/blocks';
+ * import * as ButtonStories from './Button.stories';
+ *
+ * <Meta of={ButtonStories} />
+ *
+ * <Canvas of={ButtonStories.Anatomy} />
+ * <AnatomyTable of={ButtonStories.Anatomy} />
+ * ```
  */
 import React, { useEffect, useState } from 'react';
 import { addons } from 'storybook/preview-api';
-import { Unstyled, useOf } from '@storybook/addon-docs/blocks';
+import { Canvas, Unstyled, useOf } from '@storybook/addon-docs/blocks';
 import type { Of } from '@storybook/addon-docs/blocks';
 import type { AnatomyPartDefinition } from '@component-anatomy/core';
 
 import { EVENTS, PARAM_KEY } from './constants.js';
 import { matchesStory } from './channel.js';
 import type { PartEnterEvent, PartsEvent, StoryScopedEvent } from './channel.js';
-import { ACCENT_FALLBACK, AnatomyCode, AnatomyMessage, AnatomyTable } from './AnatomyTable.js';
+import { AnatomyCode, AnatomyMessage, AnatomyTable as AnatomyTablePrimitive } from './AnatomyTable.js';
 import type { AnatomyParameters } from './types.js';
 
-export type AnatomyBlockProps = {
+export type AnatomyTableProps = {
   /**
    * The CSF export to document — a story export, or the whole module export
    * of a CSF file to read the meta's parameters.
@@ -68,7 +85,7 @@ function getChannelSafely() {
   }
 }
 
-export const Anatomy: React.FC<AnatomyBlockProps> = ({ of, parts: partsProp, sync = true }) => {
+export const AnatomyTable: React.FC<AnatomyTableProps> = ({ of, parts: partsProp, sync = true }) => {
   const resolved = useOf(of ?? 'story', ['story', 'meta']);
 
   const params = (
@@ -126,7 +143,6 @@ export const Anatomy: React.FC<AnatomyBlockProps> = ({ of, parts: partsProp, syn
   }, [wired, storyId]);
 
   const parts = staticParts ?? discovered;
-  const accent = params?.theme?.accent ?? ACCENT_FALLBACK;
 
   const emitHover = (partId: string) => {
     if (!wired) return;
@@ -165,9 +181,18 @@ export const Anatomy: React.FC<AnatomyBlockProps> = ({ of, parts: partsProp, syn
     return (
       <Unstyled>
         <AnatomyMessage>
-          {resolved.type === 'meta'
-            ? 'No parts found. A meta has no canvas to discover parts from — pass a story to `of`, or list `parts` explicitly.'
-            : 'No parts found. Auto-discovery reads the rendered story, so make sure it is on this page (e.g. with a `<Canvas of={…} />` block above), or list `parts` explicitly.'}
+          {resolved.type === 'meta' ? (
+            <>
+              No parts found. A meta has no canvas to discover parts from — pass a story to{' '}
+              <AnatomyCode>of</AnatomyCode>, or list <AnatomyCode>parts</AnatomyCode> explicitly.
+            </>
+          ) : (
+            <>
+              No parts found. Auto-discovery reads the rendered story, so make sure it is on this
+              page (e.g. with a <AnatomyCode>{'<Canvas of={…} />'}</AnatomyCode> block above), or
+              list <AnatomyCode>parts</AnatomyCode> explicitly.
+            </>
+          )}
         </AnatomyMessage>
       </Unstyled>
     );
@@ -175,13 +200,68 @@ export const Anatomy: React.FC<AnatomyBlockProps> = ({ of, parts: partsProp, syn
 
   return (
     <Unstyled>
-      <AnatomyTable
+      <AnatomyTablePrimitive
         parts={parts}
         activeId={activeId}
-        accent={accent}
+        preset={params?.preset}
+        theme={params?.theme}
         onItemEnter={emitHover}
         onItemLeave={emitLeave}
       />
     </Unstyled>
   );
 };
+
+/**
+ * Injects the rule that tightens `<Anatomy>`'s canvas-to-table gap, once per
+ * page — a module-level flag rather than `useState`, so mounting a second
+ * `<Anatomy>` block doesn't append the rule again. Scoped under
+ * `.ca-anatomy` so it never touches a bare `<Canvas>` placed by the consumer.
+ *
+ * Self-injected rather than asked of the consumer's `preview-head.html`: the
+ * block owns both elements it is bridging, so the gap between them is its
+ * concern, not config the consumer should have to wire up.
+ */
+let canvasGapStyleInjected = false;
+function useCanvasGapStyle() {
+  useEffect(() => {
+    if (canvasGapStyleInjected || typeof document === 'undefined') return;
+    canvasGapStyleInjected = true;
+    const style = document.createElement('style');
+    style.dataset.componentAnatomy = 'anatomy-block';
+    style.textContent = '.ca-anatomy .sbdocs-preview { margin-bottom: 8px; }';
+    document.head.appendChild(style);
+  }, []);
+}
+
+export type AnatomyProps = AnatomyTableProps & {
+  /**
+   * Passed straight to the underlying `<Canvas>`. `'none'` (the default)
+   * drops the show-code button along with the panel it opens — chrome that
+   * mostly restates what the anatomy table already documents. Set explicitly
+   * to keep it, e.g. for a consumer relying on that source elsewhere.
+   */
+  sourceState?: 'hidden' | 'shown' | 'none';
+};
+
+/**
+ * The canvas and its anatomy table, paired and tightened for that specific
+ * combination ([#13](https://github.com/julien-deramond/component-anatomy/issues/13#issuecomment-5475936860)).
+ * For a hand-placed `<Canvas>` — a custom layout, or a source panel this
+ * block would otherwise hide — use `<AnatomyTable>` next to your own
+ * `<Canvas>` instead.
+ */
+export const Anatomy: React.FC<AnatomyProps> = ({
+  of,
+  parts,
+  sync,
+  sourceState = 'none',
+}) => {
+  useCanvasGapStyle();
+  return (
+    <div className="ca-anatomy">
+      <Canvas of={of} sourceState={sourceState} />
+      <AnatomyTable of={of} parts={parts} sync={sync} />
+    </div>
+  );
+};