@component-anatomy/storybook 0.0.2 → 0.1.0

package/src/preview.ts

@@ -1,13 +1,21 @@
 /**
  * Preview-side (iframe) entry. Registers a global decorator that mounts a
  * component-anatomy controller over the story canvas and syncs hover state
- * with the manager panel over the addon channel.
+ * with the manager panel — and with any `<Anatomy>` doc block on the same
+ * docs page — over the addon channel.
+ *
+ * The decorator runs in docs view too: the docs `Story` block renders each
+ * story through `renderStoryToElement`, which sets `context.canvasElement`
+ * exactly as it does in story view. That is what makes auto-discovery and
+ * hover sync work inside MDX.
  */
 import { addons, useEffect } from 'storybook/preview-api';
 import type { Renderer, PartialStoryFn, StoryContext } from 'storybook/internal/types';
 import { createAnatomy } from '@component-anatomy/core';
 
 import { EVENTS, PARAM_KEY } from './constants.js';
+import { matchesStory } from './channel.js';
+import type { HoverItemEvent, StoryScopedEvent } from './channel.js';
 import type { AnatomyParameters } from './types.js';
 
 export const withComponentAnatomy = (
@@ -23,6 +31,8 @@ export const withComponentAnatomy = (
     const canvas = context.canvasElement as unknown as HTMLElement;
     if (!canvas) return;
 
+    const storyId = context.id;
+
     const root = params.root
       ? canvas.querySelector<HTMLElement>(params.root) ?? canvas
       : canvas;
@@ -39,29 +49,42 @@ export const withComponentAnatomy = (
     });
 
     const announceParts = () =>
-      channel.emit(EVENTS.PARTS, { storyId: context.id, parts: controller.getParts() });
+      channel.emit(EVENTS.PARTS, { storyId, parts: controller.getParts() });
 
     announceParts();
 
     const offEnter = controller.on('part:enter', (partId) =>
-      channel.emit(EVENTS.PART_ENTER, { partId })
+      channel.emit(EVENTS.PART_ENTER, { storyId, partId })
     );
     const offLeave = controller.on('part:leave', () =>
-      channel.emit(EVENTS.PART_LEAVE, {})
+      channel.emit(EVENTS.PART_LEAVE, { storyId })
     );
 
-    const onHoverItem = ({ partId }: { partId: string }) => controller.highlight(partId);
-    const onLeaveItem = () => controller.unhighlight();
+    // A docs page mounts several stories at once, so every controller sees
+    // every panel/block event — only act on the ones addressed to this story.
+    const onHoverItem = (event: HoverItemEvent) => {
+      if (!matchesStory(event?.storyId, storyId)) return;
+      controller.highlight(event.partId);
+    };
+    const onLeaveItem = (event: StoryScopedEvent = {}) => {
+      if (!matchesStory(event?.storyId, storyId)) return;
+      controller.unhighlight();
+    };
+    const onPartsRequest = (event: StoryScopedEvent = {}) => {
+      if (!matchesStory(event?.storyId, storyId)) return;
+      announceParts();
+    };
 
     channel.on(EVENTS.HOVER_ITEM, onHoverItem);
     channel.on(EVENTS.LEAVE_ITEM, onLeaveItem);
-    // The panel may mount after the story rendered — let it ask for the list.
-    channel.on(EVENTS.PARTS_REQUEST, announceParts);
+    // The panel or block may mount after the story rendered — let it ask for
+    // the list rather than racing the first announcement.
+    channel.on(EVENTS.PARTS_REQUEST, onPartsRequest);
 
     return () => {
       channel.off(EVENTS.HOVER_ITEM, onHoverItem);
       channel.off(EVENTS.LEAVE_ITEM, onLeaveItem);
-      channel.off(EVENTS.PARTS_REQUEST, announceParts);
+      channel.off(EVENTS.PARTS_REQUEST, onPartsRequest);
       offEnter();
       offLeave();
       controller.destroy();