@principal-ai/subsystems-react 0.37.10 → 0.37.12

package/dist/subsystem/FileDrawer.d.ts

@@ -13,7 +13,7 @@ export declare const FILE_DRAWER_HEIGHT_MS = 200;
  *  footprint so the canvas shrinks while open (nothing covered). Stays mounted
  *  so open/close/maximize animate. The header's maximize button (or a
  *  double-click) grows it over the whole graph column for whole-file reading. */
-export declare function FileDrawer({ title, onClose, fillHeight, suppressEscape, children, }: {
+export declare function FileDrawer({ title, onClose, fillHeight, suppressEscape, hidden, children, }: {
     /** Drawer chrome title; `null` closes the drawer. */
     title: string | null;
     onClose: () => void;
@@ -21,6 +21,8 @@ export declare function FileDrawer({ title, onClose, fillHeight, suppressEscape,
     fillHeight?: boolean;
     /** Skip Escape handling (e.g. while a full-file overlay is on top). */
     suppressEscape?: boolean;
+    /** Suppress the drawer entirely — no spacer, no panel (embeds). */
+    hidden?: boolean;
     children?: ReactNode;
 }): import("react").JSX.Element;
 //# sourceMappingURL=FileDrawer.d.ts.map

package/dist/subsystem/FileDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrawer.d.ts","sourceRoot":"","sources":["../../src/subsystem/FileDrawer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;2EAC2E;AAC3E,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;;iFAIiF;AACjF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,cAAsB,EACtB,QAAQ,GACT,EAAE;IACD,qDAAqD;IACrD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uEAAuE;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAiJA"}
+{"version":3,"file":"FileDrawer.d.ts","sourceRoot":"","sources":["../../src/subsystem/FileDrawer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;2EAC2E;AAC3E,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;;iFAIiF;AACjF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,cAAsB,EACtB,MAAc,EACd,QAAQ,GACT,EAAE;IACD,qDAAqD;IACrD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uEAAuE;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAiJA"}

package/dist/subsystem/FileDrawer.js

@@ -16,10 +16,10 @@ export const FILE_DRAWER_HEIGHT_MS = 200;
  *  footprint so the canvas shrinks while open (nothing covered). Stays mounted
  *  so open/close/maximize animate. The header's maximize button (or a
  *  double-click) grows it over the whole graph column for whole-file reading. */
-export function FileDrawer({ title, onClose, fillHeight = false, suppressEscape = false, children, }) {
+export function FileDrawer({ title, onClose, fillHeight = false, suppressEscape = false, hidden = false, children, }) {
     const { theme } = useTheme();
     const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
-    const open = title !== null;
+    const open = title !== null && !hidden;
     const [closeHover, setCloseHover] = useState(false);
     const [maxHover, setMaxHover] = useState(false);
     // Full-height mode: the maximize button or double-clicking the header.

package/dist/subsystem/FileDrawer.js.map

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

package/dist/subsystem/SubsystemComponentGraph.d.ts

@@ -129,6 +129,12 @@ export interface SubsystemComponentGraphProps {
      * @default true
      */
     zoomOnWalkthroughFocus?: boolean;
+    /**
+     * Duration (ms) of the camera pan/zoom when a walkthrough step or flow is
+     * focused. Higher = a slower, more legible flight between steps.
+     * @default 300
+     */
+    walkthroughFocusDurationMs?: number;
     /**
      * Subsystem title rendered as a non-interactive overlay chip on the graph
      * canvas (top-center). Does not trigger the sidebar — for graph-only
@@ -197,6 +203,13 @@ export interface SubsystemComponentGraphProps {
      * updates it as the focused step changes.
      */
     renderWalkthroughViewer?: (ctx: WalkthroughViewerContext) => ReactNode;
+    /**
+     * Suppress the bottom file/walkthrough drawer entirely. Focusing a step then
+     * only frames it on the canvas (and dims the rest) without dropping a snippet
+     * panel below — for embeds that want the camera to tell the story. Defaults
+     * to false.
+     */
+    hideDrawer?: boolean;
     /**
      * Legacy component-keyed variant, kept for backward compatibility. When
      * `renderFileViewer` is absent, drawer content resolves via the first

package/dist/subsystem/SubsystemComponentGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubsystemComponentGraph.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemComponentGraph.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SubsystemComponentGraph.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemComponentGraph.tsx"],"names":[],"mappings":"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"}

package/dist/subsystem/SubsystemComponentGraph.js

@@ -120,9 +120,9 @@ const WalkthroughDrawerContent = memo(function WalkthroughDrawerContent({ render
             onSymbolClick,
         }) }));
 });
-function Inner({ components, relations, walkthroughs, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, persistKey }) {
+function Inner({ components, relations, walkthroughs, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, walkthroughFocusDurationMs = 300, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey }) {
     const { theme } = useTheme();
-    const { fitView } = useReactFlow();
+    const { fitView, fitBounds } = useReactFlow();
     const viewport = useViewport();
     // Restored once per mount from `localStorage` (see `readViewState`). Each
     // graph is its own tab/mount, so `persistKey` is stable for a mount.
@@ -131,6 +131,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
     const [built, setBuilt] = useState({
         nodes: [],
         edges: [],
+        absoluteRects: new Map(),
     });
     const [layoutReady, setLayoutReady] = useState(false);
     const [selected, setSelected] = useState(null);
@@ -262,15 +263,24 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
             return null;
         return walkthroughs.find((t) => t.id === drawerTarget.walkthroughId) ?? null;
     }, [drawerTarget, walkthroughs]);
+    // Autoplay focus: a sidebar-less embed has no expanded flow to "open", so
+    // branding every step as a selection would hide all other nodes. Instead the
+    // autoplay sets this (flow id + step) to frame the hop and dim the rest —
+    // same treatment as hover — without hiding anything. Declared before the
+    // overlay memos, which read it to title the canvas chip + step bar.
+    const [autoPlayFocus, setAutoPlayFocus] = useState(null);
     // Ref mirror of the drawer's walkthrough id so the symbol resolver stays
     // stable across graph re-renders (the drawer is memoized on callback identity).
     const drawerWalkthroughIdRef = useRef(null);
     drawerWalkthroughIdRef.current = focusedWalkthrough?.id ?? null;
-    // Walkthrough shown on the canvas title chip (focus or hover/autoplay highlight).
+    // Walkthrough shown on the canvas title chip (focus, hover highlight, or
+    // autoplay focus).
     const overlayWalkthroughTitle = useMemo(() => {
         if (!showWalkthroughTitle || !walkthroughs?.length)
             return null;
-        const id = focusedWalkthroughId ?? hoveredWalkthroughStep?.walkthroughId;
+        const id = focusedWalkthroughId ??
+            autoPlayFocus?.walkthroughId ??
+            hoveredWalkthroughStep?.walkthroughId;
         if (!id)
             return null;
         return walkthroughs.find((t) => t.id === id)?.title ?? null;
@@ -278,17 +288,24 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
         showWalkthroughTitle,
         walkthroughs,
         focusedWalkthroughId,
+        autoPlayFocus,
         hoveredWalkthroughStep,
     ]);
     // Active step for the bottom-of-title progress + annotation chip.
     const overlayWalkthroughStep = useMemo(() => {
         if (!showWalkthroughTitle || !walkthroughs?.length)
             return null;
-        const tlId = focusedWalkthroughId ?? hoveredWalkthroughStep?.walkthroughId ?? null;
+        const tlId = focusedWalkthroughId ??
+            autoPlayFocus?.walkthroughId ??
+            hoveredWalkthroughStep?.walkthroughId ??
+            null;
         let stepIndex = null;
         if (focusedWalkthroughId != null) {
             stepIndex = focusedStepIndex;
         }
+        else if (autoPlayFocus != null) {
+            stepIndex = autoPlayFocus.stepIndex;
+        }
         else if (hoveredWalkthroughStep != null) {
             stepIndex = hoveredWalkthroughStep.stepIndex;
         }
@@ -308,6 +325,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
         walkthroughs,
         focusedWalkthroughId,
         focusedStepIndex,
+        autoPlayFocus,
         hoveredWalkthroughStep,
     ]);
     const drawerTitle = useMemo(() => {
@@ -369,7 +387,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
             showEdgeLabels,
             showSingletonFrames,
         })
-            .then(({ nodes, edges: e }) => {
+            .then(({ nodes, edges: e, absoluteRects }) => {
             if (!alive)
                 return;
             // Prune dims for removed leaves; keep measurements for stable ids so a
@@ -379,7 +397,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
                 if (!leafIds.has(id))
                     measuredDimsRef.current.delete(id);
             }
-            setBuilt({ nodes, edges: e });
+            setBuilt({ nodes, edges: e, absoluteRects });
             setLayoutReady(false);
         })
             .catch((err) => {
@@ -387,7 +405,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
             if (!alive)
                 return;
             // Reveal the cover even on failure so the UI is not stuck forever.
-            setBuilt({ nodes: [], edges: [] });
+            setBuilt({ nodes: [], edges: [], absoluteRects: new Map() });
             setLayoutReady(true);
         });
         return () => { alive = false; };
@@ -419,10 +437,10 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
         const measuredHeights = new Map(leafNodes.map((n) => [n.id, dims.get(n.id).height]));
         const gen = ++pass2GenRef.current;
         void buildSubsystemGraph({ components, relations, walkthroughs }, { maxNodeWidth, showEdgeLabels, measuredWidths, measuredHeights, showSingletonFrames })
-            .then(({ nodes, edges: e }) => {
+            .then(({ nodes, edges: e, absoluteRects }) => {
             if (gen !== pass2GenRef.current)
                 return;
-            setBuilt({ nodes, edges: e });
+            setBuilt({ nodes, edges: e, absoluteRects });
             setLayoutReady(true);
         })
             .catch((err) => {
@@ -519,6 +537,11 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
     // Edge ids in walkthrough focus (an active flow's edge set, or a single
     // step's edge). Used to frame the camera. `null` = no walkthrough focus.
     const focusEdgeIds = useMemo(() => {
+        if (autoPlayFocus) {
+            const tl = walkthroughs?.find((t) => t.id === autoPlayFocus.walkthroughId);
+            const step = tl?.steps[autoPlayFocus.stepIndex];
+            return step ? new Set([walkthroughStepGraphEdgeId(step)]) : null;
+        }
         if (focusedWalkthroughId == null || !walkthroughs)
             return null;
         const tl = walkthroughs.find((t) => t.id === focusedWalkthroughId);
@@ -529,7 +552,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
             return step ? new Set([walkthroughStepGraphEdgeId(step)]) : null;
         }
         return new Set(tl.steps.map((s) => walkthroughStepGraphEdgeId(s)));
-    }, [walkthroughs, focusedWalkthroughId, focusedStepIndex]);
+    }, [walkthroughs, focusedWalkthroughId, focusedStepIndex, autoPlayFocus]);
     // 1-based step numbers per edge of the active flow (focused or
     // hover/autoplay-highlighted). An edge can appear in more than one step.
     const selectedFlowStepNos = useMemo(() => {
@@ -589,15 +612,21 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
     // selected + hovered participants. Whole-flow focus (or no focus) keeps
     // the old hover-replace preview so a step hover still dims the rest.
     const previewEdgeIds = useMemo(() => {
+        // Autoplay drives focus without a hover, so its hop is the preview set.
+        if (autoPlayFocus)
+            return focusEdgeIds;
         if (!hoverEdgeIds)
             return null;
+        // While hovering with a *step* already selected, brighten the union of
+        // selected + hovered participants; whole-flow focus keeps the old
+        // hover-replace preview so a step hover still dims the rest.
         if (focusedStepIndex == null || !focusEdgeIds)
             return hoverEdgeIds;
         const ids = new Set(hoverEdgeIds);
         for (const id of focusEdgeIds)
             ids.add(id);
         return ids;
-    }, [hoverEdgeIds, focusEdgeIds, focusedStepIndex]);
+    }, [hoverEdgeIds, focusEdgeIds, focusedStepIndex, autoPlayFocus]);
     const previewNodeIds = useMemo(() => endpointsOf(previewEdgeIds), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [baseEdges, previewEdgeIds]);
@@ -633,22 +662,26 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
         // While a step/flow is hovered, selected + hovered participants stay
         // bright; everything else among the currently-visible (opened-walkthrough)
         // nodes is dimmed. Nodes outside the opened-walkthrough set stay hidden.
+        // Exception: with no expanded flow at all (a sidebar-less embed), there is
+        // nothing to hide toward — everything shows, and focus/hover only dims.
+        const noOpenedFlow = openedEdgeIds == null;
         return xyflowNodesBase.map((n) => {
             // Boundary frames follow their members: hidden when no member is
             // visible, dimmed when members are dimmed. Never selectable.
             if (n.type === 'subsystem-group') {
                 const region = n.data?.region;
                 const memberAliases = region?.memberAliases ?? [];
+                // Hover/autoplay dim-only: never hide a frame (see the node branch).
                 const vis = flowElementVisibility({
                     inOpened: memberAliases.some((alias) => openedNodeIds?.has(alias) === true),
                     inSelected: memberAliases.some((alias) => brightNodeIds?.has(alias) === true),
                     anyOpened: openedNodeIds != null,
-                    anySelected: brightNodeIds != null,
+                    anySelected: brightNodeIds != null || previewNodeIds != null,
                 });
                 const dimmed = previewNodeIds
                     ? vis.hidden || !memberAliases.some((alias) => previewNodeIds.has(alias))
                     : vis.dimmed;
-                const hidden = vis.hidden;
+                const hidden = noOpenedFlow ? false : vis.hidden;
                 // Host override wins over the library's derived frame color.
                 const color = region?.key != null ? boundaryColors?.[region.key] : undefined;
                 return {
@@ -664,15 +697,19 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
             }
             const comp = n.data?.component;
             const fileMatch = fileMatchForNode(comp?.file, openFile, focusNodeIds?.has(n.id) === true);
+            // Hover/autoplay is a dim-only signal: never hide non-participants (there
+            // may be no "opened" flow to reveal them, e.g. a sidebar-less autoplay
+            // embed), only dim them. Bases selection on the focused step, not the
+            // hover preview, so hovering doesn't strip the frame's `isSelected`.
             const isSelected = selected?.alias !== undefined && comp?.alias === selected.alias;
             const vis = flowElementVisibility({
                 inOpened: openedNodeIds?.has(n.id) === true,
                 inSelected: brightNodeIds?.has(n.id) === true,
                 anyOpened: openedNodeIds != null,
-                anySelected: brightNodeIds != null,
+                anySelected: brightNodeIds != null || previewNodeIds != null,
             });
             const dimmed = previewNodeIds ? (vis.hidden || !previewNodeIds.has(n.id)) : vis.dimmed;
-            const hidden = vis.hidden;
+            const hidden = noOpenedFlow ? false : vis.hidden;
             if (fileMatch === undefined && !isSelected && !dimmed) {
                 const { fileMatch: _f, isSelected: _s, dimmed: _d, ...rest } = n.data;
                 return { ...n, hidden, data: rest };
@@ -911,28 +948,73 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
     }, [fileOverlayOpen, closeFileOverlay]);
-    // Camera helper shared by the walkthrough interactions: frames the focused
-    // edges' endpoint nodes via `fitView({ nodes })`, which uses the store's
-    // live positions + measured dims — so the frame always includes BOTH
-    // components the edge attaches to (and therefore the edge line between them).
+    // Camera helper shared by the walkthrough interactions. Fits the union of
+    // the focused edges' endpoint rects AND their routed waypoints — the edge
+    // carries its full polyline (`elkPathPoints`, absolute flow coords), so the
+    // frame is the line the hop actually traces. That keeps a hop whose route
+    // bulges out around intervening nodes from being clipped at the viewport
+    // edge, and it is the edge's own geometry doing the guiding, not fudge
+    // padding.
     const fitFocusBounds = useCallback((ids) => {
         if (!zoomOnWalkthroughFocus)
             return;
         const nodeIds = new Set();
+        const points = [];
         for (const e of baseEdges) {
             if (!ids.has(e.id))
                 continue;
             nodeIds.add(e.source);
             nodeIds.add(e.target);
+            const pts = e.data
+                ?.elkPathPoints;
+            if (pts?.length)
+                points.push(...pts);
         }
         if (nodeIds.size === 0)
             return;
-        fitView({
-            nodes: [...nodeIds].map((id) => ({ id })),
-            padding: 0.25,
-            duration: 300,
+        // Box the focused edge(s): endpoint node rects UNION the routed line's
+        // waypoints. Both come from the layout in absolute flow coords, so no
+        // coordinate-space mixing (React Flow's grouped child `position`s are
+        // parent-relative and would skew the box).
+        const rects = built.absoluteRects;
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const id of nodeIds) {
+            const r = rects.get(id);
+            if (!r)
+                continue;
+            minX = Math.min(minX, r.x);
+            minY = Math.min(minY, r.y);
+            maxX = Math.max(maxX, r.x + r.width);
+            maxY = Math.max(maxY, r.y + r.height);
+        }
+        for (const p of points) {
+            minX = Math.min(minX, p.x);
+            minY = Math.min(minY, p.y);
+            maxX = Math.max(maxX, p.x);
+            maxY = Math.max(maxY, p.y);
+        }
+        if (!Number.isFinite(minX) || !Number.isFinite(minY))
+            return;
+        const bounds = {
+            x: minX,
+            y: minY,
+            width: Math.max(1, maxX - minX),
+            height: Math.max(1, maxY - minY),
+        };
+        fitBounds(bounds, {
+            padding: 0.15,
+            duration: walkthroughFocusDurationMs,
         });
-    }, [baseEdges, fitView, zoomOnWalkthroughFocus]);
+    }, [
+        baseEdges,
+        built.absoluteRects,
+        fitBounds,
+        zoomOnWalkthroughFocus,
+        walkthroughFocusDurationMs,
+    ]);
     // Zoom back out to the full diagram after the last expanded walkthrough
     // closes (visibility restores non-flow nodes that were hidden).
     const fitOverview = useCallback(() => {
@@ -1097,9 +1179,11 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
         prevPreviewEdgeIdsRef.current = previewEdgeIds;
         if (!zoomOnWalkthroughFocus || walkthroughStepMode === 'dim')
             return;
-        // Camera follows hover only when a specific step is already focused.
-        if (focusedWalkthroughId == null || focusedStepIndex == null)
+        // Camera follows hover only when a specific step is already focused (or
+        // autoplay is driving an auto-focus).
+        if (!autoPlayFocus && (focusedWalkthroughId == null || focusedStepIndex == null)) {
             return;
+        }
         if (previewEdgeIds) {
             fitFocusBounds(previewEdgeIds);
             return;
@@ -1112,46 +1196,93 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
         focusEdgeIds,
         focusedWalkthroughId,
         focusedStepIndex,
+        autoPlayFocus,
         fitFocusBounds,
         zoomOnWalkthroughFocus,
         walkthroughStepMode,
     ]);
-    // Graph-only embeds: cycle walkthrough steps with hover-style dimming.
+    // Graph-only embeds: cycle walkthrough steps. In `focus` mode each step is
+    // selected (camera frames it via fitFocusBounds) and, when a walkthrough
+    // viewer is supplied, its snippet drawer opens; in `dim` mode it only
+    // dim-highlights the step (hover-style) with no camera move.
     useEffect(() => {
-        if (!autoPlayWalkthroughs || !walkthroughs?.length || !layoutReady)
+        if (!autoPlayWalkthroughs || walkthroughs == null || walkthroughs.length === 0)
+            return;
+        if (!layoutReady)
             return;
         const playable = walkthroughs.filter((tl) => tl.steps.length > 0);
         if (playable.length === 0)
             return;
+        // Only run the cycles that can actually be shown in the current edge view.
+        const inView = playable.filter((tl) => tl.steps.some((s) => resolvedEdgeView === 'relations'
+            ? isRelationMechanism(s.mechanism)
+            : isWalkthroughMechanism(s.mechanism)));
+        if (inView.length === 0)
+            return;
+        const cyc = inView;
         let cancelled = false;
         let tlIdx = 0;
         let stepIdx = 0;
         let timer = null;
         const interval = Math.max(400, walkthroughAutoPlayIntervalMs);
+        const focusMode = walkthroughStepMode !== 'dim';
+        let cleanup = () => { };
         const tick = () => {
             if (cancelled)
                 return;
-            const tl = playable[tlIdx];
+            const tl = cyc[tlIdx];
             setSelected(null);
             setSelectedEdgeId(null);
-            setFocusedWalkthroughId(null);
-            setFocusedStepIndex(null);
-            setHoveredWalkthroughStep({ walkthroughId: tl.id, stepIndex: stepIdx });
+            if (focusMode) {
+                setHoveredWalkthroughStep(null);
+                setFocusedWalkthroughId(null);
+                setFocusedStepIndex(null);
+                setAutoPlayFocus({ walkthroughId: tl.id, stepIndex: stepIdx });
+                if (!hideDrawer) {
+                    const step = tl.steps[stepIdx];
+                    if (step) {
+                        if (renderWalkthroughViewer) {
+                            setDrawerTarget({ kind: 'walkthrough', walkthroughId: tl.id, stepIndex: stepIdx });
+                        }
+                        else {
+                            setDrawerTarget({ kind: 'file', file: step.file, startLine: step.line });
+                        }
+                    }
+                }
+            }
+            else {
+                setAutoPlayFocus(null);
+                setFocusedWalkthroughId(null);
+                setFocusedStepIndex(null);
+                setHoveredWalkthroughStep({ walkthroughId: tl.id, stepIndex: stepIdx });
+            }
             stepIdx += 1;
             if (stepIdx >= tl.steps.length) {
                 stepIdx = 0;
-                tlIdx = (tlIdx + 1) % playable.length;
+                tlIdx = (tlIdx + 1) % cyc.length;
             }
             timer = window.setTimeout(tick, interval);
         };
         tick();
-        return () => {
+        cleanup = () => {
             cancelled = true;
             if (timer != null)
                 window.clearTimeout(timer);
             setHoveredWalkthroughStep(null);
+            setFocusedWalkthroughId(null);
+            setFocusedStepIndex(null);
+            setAutoPlayFocus(null);
         };
-    }, [autoPlayWalkthroughs, walkthroughs, walkthroughAutoPlayIntervalMs, layoutReady]);
+        return cleanup;
+    }, [
+        autoPlayWalkthroughs,
+        walkthroughs,
+        walkthroughAutoPlayIntervalMs,
+        layoutReady,
+        walkthroughStepMode,
+        renderWalkthroughViewer,
+        hideDrawer,
+    ]);
     // Arrow keys step through the focused walkthrough once a step is active
     // (sidebar click or drawer open). Ignores typing targets and chords.
     useEffect(() => {
@@ -1606,7 +1737,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
                                         drawerTarget.startLine != null &&
                                         !!selected.file &&
                                         selected.file === drawerTarget.file &&
-                                        selected.declarationRef?.startLine === drawerTarget.startLine }) }))] }), _jsx(FileDrawer, { title: drawerTitle, onClose: closeDrawer, fillHeight: drawerFillHeight, suppressEscape: fileOverlayOpen, children: drawerTarget?.kind === 'walkthrough' &&
+                                        selected.declarationRef?.startLine === drawerTarget.startLine }) }))] }), _jsx(FileDrawer, { title: drawerTitle, onClose: closeDrawer, fillHeight: drawerFillHeight, suppressEscape: fileOverlayOpen, hidden: hideDrawer, children: drawerTarget?.kind === 'walkthrough' &&
                             focusedWalkthrough &&
                             renderWalkthroughViewer ? (_jsx(WalkthroughDrawerContent, { render: renderWalkthroughDrawerContent, walkthrough: focusedWalkthrough, stepIndex: drawerTarget.stepIndex, onOpenFile: onOpenFileFromWalkthrough, proposedAliases: proposedAliases, resolveSymbol: resolveWalkthroughSymbol, onSymbolClick: openConstructDeclaration })) : drawerTarget?.kind === 'file' ? (_jsx(FileDrawerContent, { render: renderDrawerContent, file: drawerTarget.file, startLine: drawerTarget.startLine })) : null }), fileOverlay && (_jsxs("div", { style: {
                             position: 'absolute',