@principal-ai/subsystems-react 0.44.0 → 0.44.1

package/dist/subsystem/SubsystemModelTransition.d.ts

@@ -22,17 +22,28 @@ export interface SubsystemTransitionStep {
     showEdgeLabels?: boolean;
     /** Explicit boundary frame colors (region key → hex); host override. */
     boundaryColors?: Record<string, string>;
+    /**
+     * Cycle this step's walkthrough hops: focus each step (dim non-participants,
+     * number the labels, frame the step). Typically only the walkthrough layer.
+     */
+    autoPlayWalkthroughs?: boolean;
+    /** Show the focused walkthrough's title chip (with step ticks). */
+    showWalkthroughTitle?: boolean;
 }
 export interface SubsystemModelTransitionProps {
     steps: SubsystemTransitionStep[];
     /** Which step is shown. Controlled by the host (its nav / timer). */
     activeIndex: number;
-    /** Tween duration, ms. @default 750 */
+    /** Tween duration, ms. @default 950 */
     durationMs?: number;
     /** fitView padding for the viewport refit. @default 0.18 */
     fitPadding?: number;
     /** Called when a node is clicked. */
     onSelect?: (componentAlias: string) => void;
+    /** How an autoplayed walkthrough step reads. @default 'focus' */
+    walkthroughStepMode?: 'focus' | 'dim';
+    /** Dwell per walkthrough step while autoplaying, ms. @default 4000 */
+    walkthroughAutoPlayIntervalMs?: number;
     className?: string;
     style?: CSSProperties;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SubsystemModelTransition.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemModelTransition.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAA4D,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAarG,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAML,KAAK,sBAAsB,EAC5B,MAAM,SAAS,CAAC;AAiBjB,uEAAuE;AACvE,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,sBAAsB,CAAC;IAC9B,oEAAoE;IACpE,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,qEAAqE;IACrE,WAAW,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAmTD,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,+BAM5E"}
+{"version":3,"file":"SubsystemModelTransition.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemModelTransition.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAA4D,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAarG,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAOL,KAAK,sBAAsB,EAE5B,MAAM,SAAS,CAAC;AAiBjB,uEAAuE;AACvE,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,sBAAsB,CAAC;IAC9B,oEAAoE;IACpE,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mEAAmE;IACnE,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,qEAAqE;IACrE,WAAW,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACtC,sEAAsE;IACtE,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAugBD,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,+BAM5E"}

package/dist/subsystem/SubsystemModelTransition.js

@@ -15,7 +15,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { Background, EdgeLabelRenderer, ReactFlow, ReactFlowProvider, useReactFlow, } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { useTheme } from '@principal-ade/industry-theme';
-import { buildSubsystemGraph, edgeColor, MECHANISM_DESCRIPTIONS, } from './model';
+import { buildSubsystemGraph, edgeColor, MECHANISM_DESCRIPTIONS, walkthroughStepGraphEdgeId, } from './model';
 import { hexWithAlpha, SubsystemCallbacksProvider, SubsystemComponentNode, SubsystemEdge, SubsystemGroupNode, } from './nodes';
 import { GRAPH_CANVAS_CLASS, GRAPH_NAV_PROPS, GraphChrome } from './graphChrome';
 import { EDGE_LABEL_CLOUD_EXTRA_TOP, EDGE_LABEL_CLOUD_PATH, EDGE_LABEL_FONT_SIZE, EDGE_LABEL_HEIGHT, EDGE_LABEL_WIDTH, } from '../utils/edgeLabel';
@@ -25,6 +25,9 @@ function TransitionEdge(props) {
     const data = props.data;
     const mechanism = data?.mechanism ?? 'uses';
     const color = edgeColor({ mechanism, provenance: data?.provenance });
+    const text = data?.stepNos?.length
+        ? `${data.stepNos.map((n) => `${n}:`).join(' ')} ${mechanism}`
+        : mechanism;
     const verifiable = data?.provenance === 'graphify' ||
         MECHANISM_DESCRIPTIONS.find(([m]) => m === mechanism)?.[2] !== false;
     const labelBg = theme.colors.backgroundSecondary ?? theme.colors.background;
@@ -40,6 +43,7 @@ function TransitionEdge(props) {
                         boxSizing: 'border-box',
                         padding: '7px 8px',
                         pointerEvents: 'none',
+                        opacity: data?.dimmed ? 0.15 : 1,
                     }, children: [verifiable ? (_jsx("span", { "aria-hidden": true, style: {
                                 position: 'absolute',
                                 inset: 0,
@@ -58,7 +62,7 @@ function TransitionEdge(props) {
                                 fontFamily: theme.fonts.monospace,
                                 fontWeight: 500,
                                 color,
-                            }, children: mechanism })] }) }))] }));
+                            }, children: text })] }) }))] }));
 }
 const nodeTypes = {
     'subsystem-component': SubsystemComponentNode,
@@ -93,15 +97,33 @@ function flatten(result, boundaryColors) {
     }
     return { rects, meta, order, edges: result.edges };
 }
-function TransitionInner({ steps, activeIndex, durationMs = 750, fitPadding = 0.18, onSelect, className, style, }) {
+function TransitionInner({ steps, activeIndex, durationMs = 950, fitPadding = 0.18, onSelect, walkthroughStepMode = 'focus', walkthroughAutoPlayIntervalMs = 4000, className, style, }) {
     const { theme } = useTheme();
     const { fitBounds } = useReactFlow();
     const [layouts, setLayouts] = useState(null);
     const [display, setDisplay] = useState(new Map());
     const [settled, setSettled] = useState(false);
+    // React Flow can't fit until its pane has a real size; the first mount often
+    // reports 0, which clamped the initial fit (right-hand nodes cut off).
+    const [sized, setSized] = useState(false);
+    const wrapRef = useRef(null);
     const displayRef = useRef(display);
     displayRef.current = display;
     const rafRef = useRef(null);
+    useEffect(() => {
+        const el = wrapRef.current;
+        if (!el)
+            return;
+        const measure = () => {
+            const r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0)
+                setSized(true);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
     // Lay out every step whenever the steps prop changes (identity-keyed).
     useEffect(() => {
         let alive = true;
@@ -130,14 +152,6 @@ function TransitionInner({ steps, activeIndex, durationMs = 750, fitPadding = 0.
         if (!step)
             return;
         setSettled(false);
-        const rects = [...step.rects.values()];
-        if (rects.length > 0) {
-            const minX = Math.min(...rects.map((r) => r.x));
-            const minY = Math.min(...rects.map((r) => r.y));
-            const maxX = Math.max(...rects.map((r) => r.x + r.w));
-            const maxY = Math.max(...rects.map((r) => r.y + r.h));
-            fitBounds({ x: minX, y: minY, width: maxX - minX, height: maxY - minY }, { padding: fitPadding, duration: durationMs });
-        }
         const start = new Map(displayRef.current);
         const ids = new Set([...start.keys(), ...step.rects.keys()]);
         const t0 = performance.now();
@@ -175,7 +189,24 @@ function TransitionInner({ steps, activeIndex, durationMs = 750, fitPadding = 0.
             if (rafRef.current != null)
                 cancelAnimationFrame(rafRef.current);
         };
-    }, [layouts, activeIndex, durationMs, fitPadding, fitBounds]);
+    }, [layouts, activeIndex, durationMs]);
+    // Refit the viewport to the active step — once the pane is sized, and on every
+    // step change. Kept separate so the initial fit waits for a real pane size.
+    useEffect(() => {
+        if (!sized || !layouts)
+            return;
+        const step = layouts[activeIndex];
+        if (!step)
+            return;
+        const rects = [...step.rects.values()];
+        if (rects.length === 0)
+            return;
+        const minX = Math.min(...rects.map((r) => r.x));
+        const minY = Math.min(...rects.map((r) => r.y));
+        const maxX = Math.max(...rects.map((r) => r.x + r.w));
+        const maxY = Math.max(...rects.map((r) => r.y + r.h));
+        fitBounds({ x: minX, y: minY, width: maxX - minX, height: maxY - minY }, { padding: fitPadding, duration: durationMs });
+    }, [sized, layouts, activeIndex, fitPadding, durationMs, fitBounds]);
     const unionMeta = useMemo(() => {
         const m = new Map();
         for (const s of layouts ?? [])
@@ -185,6 +216,52 @@ function TransitionInner({ steps, activeIndex, durationMs = 750, fitPadding = 0.
         return m;
     }, [layouts]);
     const activeLayout = layouts?.[activeIndex];
+    // Walkthrough step focus: cycle the active step's hops, dim non-participants,
+    // number the labels, and (in `focus` mode) frame the step.
+    const activeStepDef = steps[activeIndex];
+    const activeWalkthroughs = activeStepDef?.model.walkthroughs;
+    const autoPlaySteps = activeStepDef?.autoPlayWalkthroughs === true && (activeWalkthroughs?.length ?? 0) > 0;
+    const hopList = useMemo(() => {
+        const out = [];
+        for (const wt of (activeWalkthroughs ?? [])) {
+            wt.steps.forEach((s, i) => {
+                out.push({
+                    edgeId: walkthroughStepGraphEdgeId(s),
+                    from: s.from,
+                    to: s.to,
+                    stepNo: i + 1,
+                    total: wt.steps.length,
+                    walkthroughId: wt.id,
+                    walkthroughTitle: wt.title,
+                });
+            });
+        }
+        return out;
+    }, [activeWalkthroughs]);
+    const [stepPointer, setStepPointer] = useState(0);
+    useEffect(() => {
+        setStepPointer(0);
+    }, [activeIndex, hopList.length]);
+    useEffect(() => {
+        if (!autoPlaySteps || hopList.length === 0)
+            return;
+        // Pointer 0 = whole flow (no step focus); 1..N = each hop, then wraps.
+        const t = window.setInterval(() => setStepPointer((p) => (p + 1) % (hopList.length + 1)), Math.max(600, walkthroughAutoPlayIntervalMs));
+        return () => window.clearInterval(t);
+    }, [autoPlaySteps, hopList.length, walkthroughAutoPlayIntervalMs]);
+    const focusedHop = autoPlaySteps && hopList.length > 0 && stepPointer > 0
+        ? hopList[(stepPointer - 1) % hopList.length]
+        : undefined;
+    const stepNoByEdge = useMemo(() => {
+        const m = new Map();
+        for (const h of hopList) {
+            const arr = m.get(h.edgeId) ?? [];
+            arr.push(h.stepNo);
+            m.set(h.edgeId, arr);
+        }
+        return m;
+    }, [hopList]);
+    const focusParticipants = useMemo(() => (focusedHop ? new Set([focusedHop.from, focusedHop.to]) : null), [focusedHop]);
     const nodes = useMemo(() => {
         const activeOrder = new Set(activeLayout?.order ?? []);
         const ids = [...display.entries()]
@@ -210,21 +287,116 @@ function TransitionInner({ steps, activeIndex, durationMs = 750, fitPadding = 0.
                 data: meta.data,
                 draggable: false,
                 selectable: false,
-                style: { opacity: rect.o },
+                style: {
+                    opacity: rect.o * (focusParticipants && !focusParticipants.has(id) ? 0.18 : 1),
+                },
             });
         }
         return out;
-    }, [display, activeLayout, unionMeta]);
-    const edges = useMemo(() => (settled ? activeLayout?.edges ?? [] : []), [settled, activeLayout]);
+    }, [display, activeLayout, unionMeta, focusParticipants]);
+    // Real graph edges once settled; step focus adds hop numbers and dims the
+    // non-focused hops.
+    const edges = useMemo(() => {
+        if (!settled)
+            return [];
+        const list = activeLayout?.edges ?? [];
+        const numbering = autoPlaySteps && hopList.length > 0;
+        if (!numbering && !focusedHop)
+            return list;
+        return list.map((e) => {
+            // Number every hop while autoplaying (whole view included); dim only the
+            // hops other than the focused one.
+            const stepNos = numbering ? stepNoByEdge.get(e.id) : undefined;
+            const dimmed = focusedHop ? e.id !== focusedHop.edgeId : false;
+            if (!stepNos && !dimmed)
+                return e;
+            return {
+                ...e,
+                data: { ...e.data, stepNos, dimmed },
+            };
+        });
+    }, [settled, activeLayout, focusedHop, stepNoByEdge, autoPlaySteps, hopList.length]);
+    // Camera: frame a focused hop's endpoints, or the whole graph during the
+    // "whole flow" phase.
+    useEffect(() => {
+        if (walkthroughStepMode !== 'focus' || !settled || !sized || !autoPlaySteps)
+            return;
+        if (!activeLayout)
+            return;
+        const rects = focusedHop
+            ? [focusedHop.from, focusedHop.to]
+                .map((id) => activeLayout.rects.get(id))
+                .filter((r) => !!r)
+            : [...activeLayout.rects.values()];
+        if (rects.length === 0)
+            return;
+        const minX = Math.min(...rects.map((r) => r.x));
+        const minY = Math.min(...rects.map((r) => r.y));
+        const maxX = Math.max(...rects.map((r) => r.x + r.w));
+        const maxY = Math.max(...rects.map((r) => r.y + r.h));
+        fitBounds({ x: minX, y: minY, width: maxX - minX, height: maxY - minY }, { padding: focusedHop ? 0.3 : fitPadding, duration: durationMs });
+    }, [
+        walkthroughStepMode,
+        focusedHop,
+        settled,
+        sized,
+        activeLayout,
+        durationMs,
+        fitBounds,
+        autoPlaySteps,
+        fitPadding,
+    ]);
     const callbacks = useMemo(() => (onSelect ? { onSelect } : {}), [onSelect]);
-    return (_jsx("div", { className: className, style: {
+    return (_jsxs("div", { ref: wrapRef, className: className, style: {
             position: 'relative',
             width: '100%',
             height: '100%',
             minHeight: 0,
             background: theme.colors.background,
             ...style,
-        }, children: !layouts ? null : (_jsx(SubsystemCallbacksProvider, { value: callbacks, children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, className: GRAPH_CANVAS_CLASS, ...GRAPH_NAV_PROPS, proOptions: { hideAttribution: true }, nodesDraggable: false, nodesConnectable: false, style: { width: '100%', height: '100%', background: theme.colors.background }, children: [_jsx(Background, {}), _jsx(GraphChrome, {})] }) })) }));
+        }, children: [!layouts ? null : (_jsx(SubsystemCallbacksProvider, { value: callbacks, children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, className: GRAPH_CANVAS_CLASS, ...GRAPH_NAV_PROPS, proOptions: { hideAttribution: true }, nodesDraggable: false, nodesConnectable: false, style: { width: '100%', height: '100%', background: theme.colors.background }, children: [_jsx(Background, {}), _jsx(GraphChrome, {})] }) })), activeStepDef?.showWalkthroughTitle && focusedHop && (_jsxs("div", { "aria-label": `${focusedHop.walkthroughTitle}, step ${focusedHop.stepNo} of ${focusedHop.total}`, style: {
+                    position: 'absolute',
+                    top: 12,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    minWidth: 160,
+                    maxWidth: '60%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                    border: `1px solid ${theme.colors.border}`,
+                    borderRadius: 6,
+                    boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+                    overflow: 'hidden',
+                    opacity: 0.95,
+                    pointerEvents: 'none',
+                    zIndex: 10,
+                }, children: [_jsx("div", { style: {
+                            padding: '5px 14px',
+                            fontSize: theme.fontSizes[2] ?? theme.fontSizes[1],
+                            fontWeight: 600,
+                            fontFamily: theme.fonts.monospace,
+                            color: theme.colors.text,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            textAlign: 'center',
+                        }, children: focusedHop.walkthroughTitle }), focusedHop.total > 0 && (_jsx("div", { style: { display: 'flex', gap: 3, padding: '0 6px 5px' }, "aria-hidden": "true", children: Array.from({ length: focusedHop.total }, (_, i) => {
+                            const n = i + 1;
+                            const active = n === focusedHop.stepNo;
+                            const done = n < focusedHop.stepNo;
+                            return (_jsx("span", { style: {
+                                    flex: 1,
+                                    height: 2,
+                                    borderRadius: 1,
+                                    background: active
+                                        ? (theme.colors.accent ?? theme.colors.primary ?? theme.colors.text)
+                                        : done
+                                            ? (theme.colors.textSecondary ?? theme.colors.text)
+                                            : (theme.colors.border ?? 'rgba(127,127,127,0.45)'),
+                                    opacity: active ? 1 : done ? 0.75 : 0.4,
+                                } }, n));
+                        }) }))] }))] }));
 }
 export function SubsystemModelTransition(props) {
     return (_jsx(ReactFlowProvider, { children: _jsx(TransitionInner, { ...props }) }));

package/dist/subsystem/SubsystemModelTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubsystemModelTransition.js","sourceRoot":"","sources":["../../src/subsystem/SubsystemModelTransition.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SubsystemModelTransition.js","sourceRoot":"","sources":["../../src/subsystem/SubsystemModelTransition.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAA0C,MAAM,OAAO,CAAC;AACrG,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,YAAY,GAMb,MAAM,eAAe,CAAC;AACvB,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EACL,mBAAmB,EACnB,SAAS,EACT,sBAAsB,EACtB,0BAA0B,GAK3B,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,YAAY,EACZ,0BAA0B,EAC1B,sBAAsB,EACtB,aAAa,EACb,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EACL,0BAA0B,EAC1B,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAsC5B,gFAAgF;AAChF,SAAS,cAAc,CAAC,KAAgB;IACtC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IASN,CAAC;IACd,MAAM,SAAS,GAAG,IAAI,EAAE,SAAS,IAAI,MAAM,CAAC;IAC5C,MAAM,KAAK,GAAG,SAAS,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACrE,MAAM,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM;QAChC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,EAAE;QAC9D,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,UAAU,GACd,IAAI,EAAE,UAAU,KAAK,UAAU;QAC/B,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC;IACvE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,mBAAmB,IAAI,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;IAC5E,MAAM,SAAS,GAAG,IAAI,EAAE,MAAM,IAAI,IAAI,IAAI,IAAI,EAAE,MAAM,IAAI,IAAI,CAAC;IAC/D,OAAO,CACL,8BACE,KAAC,YAAY,OAAK,KAAK,GAAI,EAC1B,SAAS,IAAI,CACZ,KAAC,iBAAiB,cAChB,eACE,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,SAAS,EAAE,mCAAmC,IAAK,CAAC,MAAM,OAAO,IAAK,CAAC,MAAM,KAAK;wBAClF,OAAO,EAAE,MAAM;wBACf,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;wBACxB,KAAK,EAAE,gBAAgB;wBACvB,MAAM,EAAE,iBAAiB;wBACzB,SAAS,EAAE,YAAY;wBACvB,OAAO,EAAE,SAAS;wBAClB,aAAa,EAAE,MAAM;wBACrB,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;qBACjC,aAEA,UAAU,CAAC,CAAC,CAAC,CACZ,oCAEE,KAAK,EAAE;gCACL,QAAQ,EAAE,UAAU;gCACpB,KAAK,EAAE,CAAC;gCACR,YAAY,EAAE,CAAC;gCACf,MAAM,EAAE,eAAe,KAAK,EAAE;gCAC9B,UAAU,EAAE,OAAO;6BACpB,GACD,CACH,CAAC,CAAC,CAAC,CACF,mCAEE,KAAK,EAAE,gBAAgB,EACvB,MAAM,EAAE,iBAAiB,GAAG,0BAA0B,EACtD,OAAO,EAAE,OAAO,gBAAgB,IAAI,iBAAiB,GAAG,0BAA0B,EAAE,EACpF,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,0BAA0B,EAAE,YAE1E,eACE,CAAC,EAAE,qBAAqB,EACxB,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,EACjC,WAAW,EAAE,GAAG,EAChB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,EACD,eACE,KAAK,EAAE;gCACL,QAAQ,EAAE,UAAU;gCACpB,OAAO,EAAE,OAAO;gCAChB,QAAQ,EAAE,MAAM;gCAChB,QAAQ,EAAE,QAAQ;gCAClB,YAAY,EAAE,UAAU;gCACxB,UAAU,EAAE,QAAQ;gCACpB,QAAQ,EAAE,oBAAoB;gCAC9B,UAAU,EAAE,CAAC;gCACb,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS;gCACjC,UAAU,EAAE,GAAG;gCACf,KAAK;6BACN,YAEA,IAAI,GACA,IACH,GACY,CACrB,IACA,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAc;IAC3B,qBAAqB,EAAE,sBAAsB;IAC7C,iBAAiB,EAAE,kBAAkB;CACtC,CAAC;AACF,MAAM,SAAS,GAAc,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAElE,+EAA+E;AAC/E,MAAM,YAAY,GAAG,aAAoD,CAAC;AAY1E,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAChD,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAElE,SAAS,OAAO,CACd,MAAuD,EACvD,cAAuC;IAEvC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAgB,CAAC;IACtC,MAAM,IAAI,GAAG,IAAI,GAAG,EAAoB,CAAC;IACzC,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAyB;QAClC,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,iBAAiB,CAAC;QAC3D,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,iBAAiB,CAAC;KAC5D,CAAC;IACF,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE;QACrB,MAAM,CAAC,GAAG,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACzC,IAAI,CAAC,CAAC;YAAE,SAAS;QACjB,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QAC7D,MAAM,IAAI,GAAG,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAA6B,EAAE,CAAC;QAChE,IAAI,CAAC,CAAC,IAAI,KAAK,iBAAiB,IAAI,cAAc,EAAE;YAClD,MAAM,GAAG,GAAI,IAAsC,CAAC,MAAM,EAAE,GAAG,CAAC;YAChE,IAAI,GAAG,IAAI,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI;gBAAE,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;SAC1E;QACD,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,IAAwB,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3D,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KAClB;IACD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAA0B,EAAE,CAAC;AAC1E,CAAC;AAED,SAAS,eAAe,CAAC,EACvB,KAAK,EACL,WAAW,EACX,UAAU,GAAG,GAAG,EAChB,UAAU,GAAG,IAAI,EACjB,QAAQ,EACR,mBAAmB,GAAG,OAAO,EAC7B,6BAA6B,GAAG,IAAI,EACpC,SAAS,EACT,KAAK,GACyB;IAC9B,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,CAAC;IACrC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAClE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAoB,IAAI,GAAG,EAAE,CAAC,CAAC;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,6EAA6E;IAC7E,uEAAuE;IACvE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAC7B,MAAM,MAAM,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;YACrC,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC;gBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAClD,CAAC,CAAC;QACF,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;QACvC,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACf,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uEAAuE;IACvE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,GAAG,IAAI,CAAC;QACjB,KAAK,CAAC,KAAK,IAAI,EAAE;YACf,MAAM,IAAI,GAAiB,EAAE,CAAC;YAC9B,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE;gBACrB,MAAM,MAAM,GAAG,MAAM,mBAAmB,CAAC,CAAC,CAAC,KAAK,EAAE;oBAChD,mBAAmB,EAAE,IAAI;oBACzB,aAAa,EAAE,CAAC,CAAC,aAAa;oBAC9B,cAAc,EAAE,CAAC,CAAC,cAAc,IAAI,IAAI;iBACzC,CAAC,CAAC;gBACH,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;aAC9C;YACD,IAAI,KAAK;gBAAE,UAAU,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC,CAAC,EAAE,CAAC;QACL,OAAO,GAAG,EAAE;YACV,KAAK,GAAG,KAAK,CAAC;QAChB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,6DAA6D;IAC7D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QAClC,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,UAAU,CAAC,KAAK,CAAC,CAAC;QAElB,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1C,MAAM,GAAG,GAAG,IAAI,GAAG,CAAS,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QACrE,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;QAC7B,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE;YAC3B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,UAAU,CAAC,CAAC;YAC/C,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YAClB,MAAM,IAAI,GAAG,IAAI,GAAG,EAAgB,CAAC;YACrC,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE;gBACpB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAC/B,IAAI,GAAG,EAAE;oBACP,MAAM,IAAI,GAAG,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;oBACrC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE;wBACX,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;wBACzB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;wBACzB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;wBACzB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;wBACzB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;qBAC3B,CAAC,CAAC;iBACJ;qBAAM,IAAI,GAAG,EAAE;oBACd,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,GAAG,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;iBAChD;aACF;YACD,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,IAAI,CAAC,GAAG,CAAC,EAAE;gBACT,MAAM,CAAC,OAAO,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;aAC9C;iBAAM;gBACL,UAAU,CAAC,IAAI,CAAC,CAAC;aAClB;QACH,CAAC,CAAC;QACF,MAAM,CAAC,OAAO,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC7C,OAAO,GAAG,EAAE;YACV,IAAI,MAAM,CAAC,OAAO,IAAI,IAAI;gBAAE,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACnE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,+EAA+E;IAC/E,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO;YAAE,OAAO;QAC/B,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QAClC,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;QACvC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,SAAS,CACP,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,EAC7D,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAC9C,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAErE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,CAAC,GAAG,IAAI,GAAG,EAAoB,CAAC;QACtC,KAAK,MAAM,CAAC,IAAI,OAAO,IAAI,EAAE;YAAE,KAAK,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI;gBAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;oBAAE,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QAChG,OAAO,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,EAAE,CAAC,WAAW,CAAC,CAAC;IAE5C,8EAA8E;IAC9E,2DAA2D;IAC3D,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,kBAAkB,GAAG,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7D,MAAM,aAAa,GACjB,aAAa,EAAE,oBAAoB,KAAK,IAAI,IAAI,CAAC,kBAAkB,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACxF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,MAAM,GAAG,GAQJ,EAAE,CAAC;QACR,KAAK,MAAM,EAAE,IAAI,CAAC,kBAAkB,IAAI,EAAE,CAA2B,EAAE;YACrE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACxB,GAAG,CAAC,IAAI,CAAC;oBACP,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC;oBACrC,IAAI,EAAE,CAAC,CAAC,IAAI;oBACZ,EAAE,EAAE,CAAC,CAAC,EAAE;oBACR,MAAM,EAAE,CAAC,GAAG,CAAC;oBACb,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM;oBACtB,aAAa,EAAE,EAAE,CAAC,EAAE;oBACpB,gBAAgB,EAAE,EAAE,CAAC,KAAK;iBAC3B,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACzB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAClC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,aAAa,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACnD,uEAAuE;QACvE,MAAM,CAAC,GAAG,MAAM,CAAC,WAAW,CAC1B,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAC3D,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,6BAA6B,CAAC,CAC7C,CAAC;QACF,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,MAAM,EAAE,6BAA6B,CAAC,CAAC,CAAC;IACnE,MAAM,UAAU,GACd,aAAa,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW,GAAG,CAAC;QACpD,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;QAC7C,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,MAAM,CAAC,GAAG,IAAI,GAAG,EAAoB,CAAC;QACtC,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE;YACvB,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YAClC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACnB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;SACtB;QACD,OAAO,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EACrE,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,KAAK,GAAW,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;QACvD,MAAM,GAAG,GAAG,CAAC,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;aAC/B,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;aACtD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;QACrB,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAChB,MAAM,EAAE,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAChE,MAAM,EAAE,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAChE,OAAO,EAAE,GAAG,EAAE,CAAC;QACjB,CAAC,CAAC,CAAC;QACH,MAAM,GAAG,GAAW,EAAE,CAAC;QACvB,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE;YACpB,MAAM,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAC/B,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAC7B,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI;gBAAE,SAAS;YAC7B,GAAG,CAAC,IAAI,CAAC;gBACP,EAAE;gBACF,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE;gBAClC,KAAK,EAAE,IAAI,CAAC,CAAC;gBACb,MAAM,EAAE,IAAI,CAAC,CAAC;gBACd,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,SAAS,EAAE,KAAK;gBAChB,UAAU,EAAE,KAAK;gBACjB,KAAK,EAAE;oBACL,OAAO,EACL,IAAI,CAAC,CAAC,GAAG,CAAC,iBAAiB,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;iBACxE;aACM,CAAC,CAAC;SACZ;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE1D,0EAA0E;IAC1E,oBAAoB;IACpB,MAAM,KAAK,GAAW,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,OAAO;YAAE,OAAO,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,YAAY,EAAE,KAAK,IAAI,EAAE,CAAC;QACvC,MAAM,SAAS,GAAG,aAAa,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;QACtD,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAC;QAC3C,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACpB,yEAAyE;YACzE,mCAAmC;YACnC,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAC/D,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/D,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM;gBAAE,OAAO,CAAC,CAAC;YAClC,OAAO;gBACL,GAAG,CAAC;gBACJ,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,IAAe,EAAE,OAAO,EAAE,MAAM,EAAE;aACzC,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAErF,yEAAyE;IACzE,sBAAsB;IACtB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,mBAAmB,KAAK,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa;YAAE,OAAO;QACpF,IAAI,CAAC,YAAY;YAAE,OAAO;QAC1B,MAAM,KAAK,GAAG,UAAU;YACtB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE,CAAC;iBAC7B,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;iBACvC,MAAM,CAAC,CAAC,CAAC,EAAa,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YAClC,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;QACrC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,SAAS,CACP,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,EAC7D,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CACjE,CAAC;IACJ,CAAC,EAAE;QACD,mBAAmB;QACnB,UAAU;QACV,OAAO;QACP,KAAK;QACL,YAAY;QACZ,UAAU;QACV,SAAS;QACT,aAAa;QACb,UAAU;KACX,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5E,OAAO,CACL,eACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;YACnC,GAAG,KAAK;SACT,aAEA,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,KAAC,0BAA0B,IAAC,KAAK,EAAE,SAAS,YAC1C,MAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,kBAAkB,KACzB,eAAe,EACnB,UAAU,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,EACrC,cAAc,EAAE,KAAK,EACrB,gBAAgB,EAAE,KAAK,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,aAE7E,KAAC,UAAU,KAAG,EACd,KAAC,WAAW,KAAG,IACL,GACe,CAC9B,EACA,aAAa,EAAE,oBAAoB,IAAI,UAAU,IAAI,CACpD,6BACc,GAAG,UAAU,CAAC,gBAAgB,UAAU,UAAU,CAAC,MAAM,OAAO,UAAU,CAAC,KAAK,EAAE,EAC9F,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,EAAE;oBACP,IAAI,EAAE,KAAK;oBACX,SAAS,EAAE,kBAAkB;oBAC7B,QAAQ,EAAE,GAAG;oBACb,QAAQ,EAAE,KAAK;oBACf,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,mBAAmB,IAAI,KAAK,CAAC,MAAM,CAAC,UAAU;oBACvE,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;oBAC1C,YAAY,EAAE,CAAC;oBACf,SAAS,EAAE,4BAA4B;oBACvC,QAAQ,EAAE,QAAQ;oBAClB,OAAO,EAAE,IAAI;oBACb,aAAa,EAAE,MAAM;oBACrB,MAAM,EAAE,EAAE;iBACX,aAED,cACE,KAAK,EAAE;4BACL,OAAO,EAAE,UAAU;4BACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;4BAClD,UAAU,EAAE,GAAG;4BACf,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS;4BACjC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;4BACxB,QAAQ,EAAE,QAAQ;4BAClB,YAAY,EAAE,UAAU;4BACxB,UAAU,EAAE,QAAQ;4BACpB,SAAS,EAAE,QAAQ;yBACpB,YAEA,UAAU,CAAC,gBAAgB,GACxB,EACL,UAAU,CAAC,KAAK,GAAG,CAAC,IAAI,CACvB,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,iBAAc,MAAM,YAC9E,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;4BACjD,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;4BAChB,MAAM,MAAM,GAAG,CAAC,KAAK,UAAU,CAAC,MAAM,CAAC;4BACvC,MAAM,IAAI,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC;4BACnC,OAAO,CACL,eAEE,KAAK,EAAE;oCACL,IAAI,EAAE,CAAC;oCACP,MAAM,EAAE,CAAC;oCACT,YAAY,EAAE,CAAC;oCACf,UAAU,EAAE,MAAM;wCAChB,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;wCACpE,CAAC,CAAC,IAAI;4CACJ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;4CACnD,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,IAAI,wBAAwB,CAAC;oCACvD,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;iCACxC,IAXI,CAAC,CAYN,CACH,CAAC;wBACJ,CAAC,CAAC,GACE,CACP,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,KAAoC;IAC3E,OAAO,CACL,KAAC,iBAAiB,cAChB,KAAC,eAAe,OAAK,KAAK,GAAI,GACZ,CACrB,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/subsystems-react",
-  "version": "0.44.0",
+  "version": "0.44.1",
   "description": "React UI for Subsystem Models — graph, Pierre code views, and session-event feeds",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/stories/Subsystem/ComponentGraph/AnimatedProgression.stories.tsx

@@ -67,27 +67,50 @@ const STEPS: SubsystemTransitionStep[] = [
     moduleNesting: 'path',
   },
   {
-    model: { title: 'Booking', components, walkthroughs },
+    // Dynamic topology = process framing only (no runtime edges).
+    model: { title: 'Booking', components },
     moduleNesting: 'path',
   },
   {
     model: { title: 'Booking', components, walkthroughs },
     moduleNesting: 'path',
+    autoPlayWalkthroughs: true,
+    showWalkthroughTitle: true,
   },
 ];
 
+const STEP_MS = 4000;
+
+/** Dwell long enough for an autoplaying step to cycle all its hops. */
+function dwellFor(index: number): number {
+  const step = STEPS[index];
+  if (step?.autoPlayWalkthroughs) {
+    const hops = step.model.walkthroughs?.reduce((n, w) => n + w.steps.length, 0) ?? 0;
+    // Whole-flow phase + one tick per hop.
+    if (hops > 0) return (hops + 1) * STEP_MS;
+  }
+  return 3200;
+}
+
 function Harness() {
   const [active, setActive] = useState(0);
   const steps = useMemo(() => STEPS, []);
 
   useEffect(() => {
-    const t = window.setInterval(() => setActive((i) => (i + 1) % STEPS.length), 3600);
-    return () => window.clearInterval(t);
-  }, []);
+    const t = window.setTimeout(
+      () => setActive((i) => (i + 1) % STEPS.length),
+      dwellFor(active),
+    );
+    return () => window.clearTimeout(t);
+  }, [active]);
 
   return (
     <div style={{ position: 'relative', width: '100%', height: '100vh', background: defaultEditorTheme.colors.background }}>
-      <SubsystemModelTransition steps={steps} activeIndex={active} />
+      <SubsystemModelTransition
+        steps={steps}
+        activeIndex={active}
+        walkthroughAutoPlayIntervalMs={STEP_MS}
+      />
       <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', gap: 8, zIndex: 10 }}>
         {LABELS.map((label, i) => (
           <button

package/src/subsystem/SubsystemModelTransition.tsx

@@ -30,9 +30,11 @@ import {
   buildSubsystemGraph,
   edgeColor,
   MECHANISM_DESCRIPTIONS,
+  walkthroughStepGraphEdgeId,
   type SubsystemEdgeProvenance,
   type SubsystemGraphNode,
   type SubsystemModelDocument,
+  type SubsystemWalkthrough,
 } from './model';
 import {
   hexWithAlpha,
@@ -59,18 +61,29 @@ export interface SubsystemTransitionStep {
   showEdgeLabels?: boolean;
   /** Explicit boundary frame colors (region key → hex); host override. */
   boundaryColors?: Record<string, string>;
+  /**
+   * Cycle this step's walkthrough hops: focus each step (dim non-participants,
+   * number the labels, frame the step). Typically only the walkthrough layer.
+   */
+  autoPlayWalkthroughs?: boolean;
+  /** Show the focused walkthrough's title chip (with step ticks). */
+  showWalkthroughTitle?: boolean;
 }
 
 export interface SubsystemModelTransitionProps {
   steps: SubsystemTransitionStep[];
   /** Which step is shown. Controlled by the host (its nav / timer). */
   activeIndex: number;
-  /** Tween duration, ms. @default 750 */
+  /** Tween duration, ms. @default 950 */
   durationMs?: number;
   /** fitView padding for the viewport refit. @default 0.18 */
   fitPadding?: number;
   /** Called when a node is clicked. */
   onSelect?: (componentAlias: string) => void;
+  /** How an autoplayed walkthrough step reads. @default 'focus' */
+  walkthroughStepMode?: 'focus' | 'dim';
+  /** Dwell per walkthrough step while autoplaying, ms. @default 4000 */
+  walkthroughAutoPlayIntervalMs?: number;
   className?: string;
   style?: CSSProperties;
 }
@@ -79,10 +92,20 @@ export interface SubsystemModelTransitionProps {
 function TransitionEdge(props: EdgeProps) {
   const { theme } = useTheme();
   const data = props.data as
-    | { mechanism?: string; provenance?: SubsystemEdgeProvenance; labelX?: number; labelY?: number }
+    | {
+        mechanism?: string;
+        provenance?: SubsystemEdgeProvenance;
+        labelX?: number;
+        labelY?: number;
+        stepNos?: number[];
+        dimmed?: boolean;
+      }
     | undefined;
   const mechanism = data?.mechanism ?? 'uses';
   const color = edgeColor({ mechanism, provenance: data?.provenance });
+  const text = data?.stepNos?.length
+    ? `${data.stepNos.map((n) => `${n}:`).join(' ')} ${mechanism}`
+    : mechanism;
   const verifiable =
     data?.provenance === 'graphify' ||
     MECHANISM_DESCRIPTIONS.find(([m]) => m === mechanism)?.[2] !== false;
@@ -105,6 +128,7 @@ function TransitionEdge(props: EdgeProps) {
               boxSizing: 'border-box',
               padding: '7px 8px',
               pointerEvents: 'none',
+              opacity: data?.dimmed ? 0.15 : 1,
             }}
           >
             {verifiable ? (
@@ -150,7 +174,7 @@ function TransitionEdge(props: EdgeProps) {
                 color,
               }}
             >
-              {mechanism}
+              {text}
             </span>
           </div>
         </EdgeLabelRenderer>
@@ -210,9 +234,11 @@ function flatten(
 function TransitionInner({
   steps,
   activeIndex,
-  durationMs = 750,
+  durationMs = 950,
   fitPadding = 0.18,
   onSelect,
+  walkthroughStepMode = 'focus',
+  walkthroughAutoPlayIntervalMs = 4000,
   className,
   style,
 }: SubsystemModelTransitionProps) {
@@ -221,10 +247,27 @@ function TransitionInner({
   const [layouts, setLayouts] = useState<StepLayout[] | null>(null);
   const [display, setDisplay] = useState<Map<string, Live>>(new Map());
   const [settled, setSettled] = useState(false);
+  // React Flow can't fit until its pane has a real size; the first mount often
+  // reports 0, which clamped the initial fit (right-hand nodes cut off).
+  const [sized, setSized] = useState(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
   const displayRef = useRef(display);
   displayRef.current = display;
   const rafRef = useRef<number | null>(null);
 
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      if (r.width > 0 && r.height > 0) setSized(true);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
   // Lay out every step whenever the steps prop changes (identity-keyed).
   useEffect(() => {
     let alive = true;
@@ -252,18 +295,6 @@ function TransitionInner({
     if (!step) return;
     setSettled(false);
 
-    const rects = [...step.rects.values()];
-    if (rects.length > 0) {
-      const minX = Math.min(...rects.map((r) => r.x));
-      const minY = Math.min(...rects.map((r) => r.y));
-      const maxX = Math.max(...rects.map((r) => r.x + r.w));
-      const maxY = Math.max(...rects.map((r) => r.y + r.h));
-      fitBounds(
-        { x: minX, y: minY, width: maxX - minX, height: maxY - minY },
-        { padding: fitPadding, duration: durationMs },
-      );
-    }
-
     const start = new Map(displayRef.current);
     const ids = new Set<string>([...start.keys(), ...step.rects.keys()]);
     const t0 = performance.now();
@@ -298,7 +329,25 @@ function TransitionInner({
     return () => {
       if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
     };
-  }, [layouts, activeIndex, durationMs, fitPadding, fitBounds]);
+  }, [layouts, activeIndex, durationMs]);
+
+  // Refit the viewport to the active step — once the pane is sized, and on every
+  // step change. Kept separate so the initial fit waits for a real pane size.
+  useEffect(() => {
+    if (!sized || !layouts) return;
+    const step = layouts[activeIndex];
+    if (!step) return;
+    const rects = [...step.rects.values()];
+    if (rects.length === 0) return;
+    const minX = Math.min(...rects.map((r) => r.x));
+    const minY = Math.min(...rects.map((r) => r.y));
+    const maxX = Math.max(...rects.map((r) => r.x + r.w));
+    const maxY = Math.max(...rects.map((r) => r.y + r.h));
+    fitBounds(
+      { x: minX, y: minY, width: maxX - minX, height: maxY - minY },
+      { padding: fitPadding, duration: durationMs },
+    );
+  }, [sized, layouts, activeIndex, fitPadding, durationMs, fitBounds]);
 
   const unionMeta = useMemo(() => {
     const m = new Map<string, StepMeta>();
@@ -308,6 +357,68 @@ function TransitionInner({
 
   const activeLayout = layouts?.[activeIndex];
 
+  // Walkthrough step focus: cycle the active step's hops, dim non-participants,
+  // number the labels, and (in `focus` mode) frame the step.
+  const activeStepDef = steps[activeIndex];
+  const activeWalkthroughs = activeStepDef?.model.walkthroughs;
+  const autoPlaySteps =
+    activeStepDef?.autoPlayWalkthroughs === true && (activeWalkthroughs?.length ?? 0) > 0;
+  const hopList = useMemo(() => {
+    const out: Array<{
+      edgeId: string;
+      from: string;
+      to: string;
+      stepNo: number;
+      total: number;
+      walkthroughId: string;
+      walkthroughTitle: string;
+    }> = [];
+    for (const wt of (activeWalkthroughs ?? []) as SubsystemWalkthrough[]) {
+      wt.steps.forEach((s, i) => {
+        out.push({
+          edgeId: walkthroughStepGraphEdgeId(s),
+          from: s.from,
+          to: s.to,
+          stepNo: i + 1,
+          total: wt.steps.length,
+          walkthroughId: wt.id,
+          walkthroughTitle: wt.title,
+        });
+      });
+    }
+    return out;
+  }, [activeWalkthroughs]);
+  const [stepPointer, setStepPointer] = useState(0);
+  useEffect(() => {
+    setStepPointer(0);
+  }, [activeIndex, hopList.length]);
+  useEffect(() => {
+    if (!autoPlaySteps || hopList.length === 0) return;
+    // Pointer 0 = whole flow (no step focus); 1..N = each hop, then wraps.
+    const t = window.setInterval(
+      () => setStepPointer((p) => (p + 1) % (hopList.length + 1)),
+      Math.max(600, walkthroughAutoPlayIntervalMs),
+    );
+    return () => window.clearInterval(t);
+  }, [autoPlaySteps, hopList.length, walkthroughAutoPlayIntervalMs]);
+  const focusedHop =
+    autoPlaySteps && hopList.length > 0 && stepPointer > 0
+      ? hopList[(stepPointer - 1) % hopList.length]
+      : undefined;
+  const stepNoByEdge = useMemo(() => {
+    const m = new Map<string, number[]>();
+    for (const h of hopList) {
+      const arr = m.get(h.edgeId) ?? [];
+      arr.push(h.stepNo);
+      m.set(h.edgeId, arr);
+    }
+    return m;
+  }, [hopList]);
+  const focusParticipants = useMemo(
+    () => (focusedHop ? new Set([focusedHop.from, focusedHop.to]) : null),
+    [focusedHop],
+  );
+
   const nodes: Node[] = useMemo(() => {
     const activeOrder = new Set(activeLayout?.order ?? []);
     const ids = [...display.entries()]
@@ -332,21 +443,71 @@ function TransitionInner({
         data: meta.data,
         draggable: false,
         selectable: false,
-        style: { opacity: rect.o },
+        style: {
+          opacity:
+            rect.o * (focusParticipants && !focusParticipants.has(id) ? 0.18 : 1),
+        },
       } as Node);
     }
     return out;
-  }, [display, activeLayout, unionMeta]);
+  }, [display, activeLayout, unionMeta, focusParticipants]);
 
-  const edges: Edge[] = useMemo(
-    () => (settled ? activeLayout?.edges ?? [] : []),
-    [settled, activeLayout],
-  );
+  // Real graph edges once settled; step focus adds hop numbers and dims the
+  // non-focused hops.
+  const edges: Edge[] = useMemo(() => {
+    if (!settled) return [];
+    const list = activeLayout?.edges ?? [];
+    const numbering = autoPlaySteps && hopList.length > 0;
+    if (!numbering && !focusedHop) return list;
+    return list.map((e) => {
+      // Number every hop while autoplaying (whole view included); dim only the
+      // hops other than the focused one.
+      const stepNos = numbering ? stepNoByEdge.get(e.id) : undefined;
+      const dimmed = focusedHop ? e.id !== focusedHop.edgeId : false;
+      if (!stepNos && !dimmed) return e;
+      return {
+        ...e,
+        data: { ...(e.data as object), stepNos, dimmed },
+      } as Edge;
+    });
+  }, [settled, activeLayout, focusedHop, stepNoByEdge, autoPlaySteps, hopList.length]);
+
+  // Camera: frame a focused hop's endpoints, or the whole graph during the
+  // "whole flow" phase.
+  useEffect(() => {
+    if (walkthroughStepMode !== 'focus' || !settled || !sized || !autoPlaySteps) return;
+    if (!activeLayout) return;
+    const rects = focusedHop
+      ? [focusedHop.from, focusedHop.to]
+          .map((id) => activeLayout.rects.get(id))
+          .filter((r): r is Rect => !!r)
+      : [...activeLayout.rects.values()];
+    if (rects.length === 0) return;
+    const minX = Math.min(...rects.map((r) => r.x));
+    const minY = Math.min(...rects.map((r) => r.y));
+    const maxX = Math.max(...rects.map((r) => r.x + r.w));
+    const maxY = Math.max(...rects.map((r) => r.y + r.h));
+    fitBounds(
+      { x: minX, y: minY, width: maxX - minX, height: maxY - minY },
+      { padding: focusedHop ? 0.3 : fitPadding, duration: durationMs },
+    );
+  }, [
+    walkthroughStepMode,
+    focusedHop,
+    settled,
+    sized,
+    activeLayout,
+    durationMs,
+    fitBounds,
+    autoPlaySteps,
+    fitPadding,
+  ]);
 
   const callbacks = useMemo(() => (onSelect ? { onSelect } : {}), [onSelect]);
 
   return (
     <div
+      ref={wrapRef}
       className={className}
       style={{
         position: 'relative',
@@ -376,6 +537,70 @@ function TransitionInner({
           </ReactFlow>
         </SubsystemCallbacksProvider>
       )}
+      {activeStepDef?.showWalkthroughTitle && focusedHop && (
+        <div
+          aria-label={`${focusedHop.walkthroughTitle}, step ${focusedHop.stepNo} of ${focusedHop.total}`}
+          style={{
+            position: 'absolute',
+            top: 12,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            minWidth: 160,
+            maxWidth: '60%',
+            display: 'flex',
+            flexDirection: 'column',
+            background: theme.colors.backgroundSecondary ?? theme.colors.background,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: 6,
+            boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+            overflow: 'hidden',
+            opacity: 0.95,
+            pointerEvents: 'none',
+            zIndex: 10,
+          }}
+        >
+          <div
+            style={{
+              padding: '5px 14px',
+              fontSize: theme.fontSizes[2] ?? theme.fontSizes[1],
+              fontWeight: 600,
+              fontFamily: theme.fonts.monospace,
+              color: theme.colors.text,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              textAlign: 'center',
+            }}
+          >
+            {focusedHop.walkthroughTitle}
+          </div>
+          {focusedHop.total > 0 && (
+            <div style={{ display: 'flex', gap: 3, padding: '0 6px 5px' }} aria-hidden="true">
+              {Array.from({ length: focusedHop.total }, (_, i) => {
+                const n = i + 1;
+                const active = n === focusedHop.stepNo;
+                const done = n < focusedHop.stepNo;
+                return (
+                  <span
+                    key={n}
+                    style={{
+                      flex: 1,
+                      height: 2,
+                      borderRadius: 1,
+                      background: active
+                        ? (theme.colors.accent ?? theme.colors.primary ?? theme.colors.text)
+                        : done
+                          ? (theme.colors.textSecondary ?? theme.colors.text)
+                          : (theme.colors.border ?? 'rgba(127,127,127,0.45)'),
+                      opacity: active ? 1 : done ? 0.75 : 0.4,
+                    }}
+                  />
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }