flowfig 0.10.0 → 0.12.0

package/dist/index.js

@@ -1,12 +1,13 @@
 'use client';
+import { createElement as _createElement } from "react";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { arcRoom, avoidOf, markSide, route } from './geometry.js';
 import { foldedLabel, groupBox, layoutRail, railState, RAIL } from './rail.js';
 import { textWidth } from './text.js';
 import { checkScene, checkSpec, checkTheme } from './check.js';
 import { autoLayout, rowBreaks } from './auto.js';
-import { ASYNC_TAG_W, BASE_RATE, CARD_LINE, CARD_PAD, EDGE_OFF, EDGE_ON, LIGHT, TONES, ON_ACCENT, toneFill, toneTint, decisions, edgeId, groupGap, isGroup, isRows, lanePlan as planLanes, laneEnd, laneBlock, STUB_ROOM, labelPillW, str, altText, LANE_BLOCK_GAP, LANE_PAD, LANE_ROW_GAP, isLanesLayout, nodes, timelineBeats, timelineLayout, TL_AXIS_H, TL_AXIS_W, TL_BAR_H, TL_ROW_GAP, toBeat, diamondLines, diamondRoom, tightCopies, nodeWidth, labelLines, fitCap, LABEL_LINE, beatMs, STEP_HOLD_MS, playheadItem, loopStartItem, dateLabelRaised, edgeTip, fitScale, specKey, nextWide, } from './model.js';
+import { ASYNC_TAG_W, BASE_RATE, CARD_LINE, CARD_PAD, EDGE_OFF, EDGE_ON, LIGHT, TONES, ON_ACCENT, toneFill, toneTint, decisions, edgeId, groupGap, isGroup, isRows, lanePlan as planLanes, laneEnd, laneBlock, STUB_ROOM, labelPillW, str, altText, LANE_BLOCK_GAP, LANE_PAD, LANE_ROW_GAP, isLanesLayout, nodes, timelineBeats, timelineLayout, TL_AXIS_H, TL_AXIS_W, TL_BAR_H, TL_ROW_GAP, toBeat, diamondLines, diamondRoom, tightCopies, nodeWidth, labelLines, fitCap, LABEL_LINE, beatMs, STEP_HOLD_MS, playheadItem, loopStartItem, dateLabelRaised, edgeTip, fitScale, shownFont, textFloor, specKey, nextWide, scenes, insideStep, flowOrder, readMs, portLabel, OPEN_MS, } from './model.js';
 export { LIGHT, DARK } from './model.js';
 const DEFAULTS = { ...LIGHT, font: 'inherit' };
 const v = (k) => `var(--fig-${k}, ${DEFAULTS[k]})`;
@@ -56,21 +57,75 @@ const HIDDEN = {
  * Use `toSvg` from `flowfig/svg` for a static animated SVG.
  */
 export function Flow(props) {
-    const { layout, edges, steps, lanes, timeline } = props;
+    const all = useMemo(() => scenes(props), [props.layout, props.edges, props.steps, props.lanes, props.timeline, props.rail, props.theme, props.speed]);
+    const [path, setPath] = useState([]);
+    const [full, setFull] = useState(false);
+    const [start, setStart] = useState();
+    const memo = useRef({});
+    const at = path.join('>');
+    const s = all.find((x) => x.path.join('>') === at) ?? all[0];
+    const { layout, edges, steps, lanes, timeline } = s.props;
     const key = useMemo(() => specKey(layout, edges, steps), [layout, edges, steps]);
     const [narrow, setNarrow] = useState({ wide: 0, key: '' });
     const fold = !lanes && !timeline && props.rail !== 'only';
     const wide = fold && narrow.key === key ? narrow.wide : 0;
     const setWide = useCallback((w) => setNarrow({ wide: w, key }), [key]);
-    const placed = useMemo(() => autoLayout({ layout: wide ? { ...layout, auto: true, direction: 'column' } : layout, edges, steps, lanes, timeline }), [wide, layout, edges, steps, lanes, timeline]);
-    return (_jsx(FlowBody, { ...props, layout: placed.layout, edges: placed.edges, written: props, wide: wide, setWide: fold ? setWide : undefined }));
+    const placed = useMemo(() => autoLayout({ layout: wide > 0 ? { ...layout, auto: true, direction: 'column' } : layout, edges, steps, lanes, timeline }), [wide, layout, edges, steps, lanes, timeline]);
+    const level = all.length > 1
+        ? {
+            scene: s,
+            owners: new Map(all.filter((x) => x.path.slice(0, -1).join('>') === at && x.path.length > s.path.length).map((x) => [x.path.at(-1), x.parts])),
+            path: s.path.map((id, i) => ({ id, name: all.find((x) => x.path.join('>') === s.path.slice(0, i + 1).join('>')).name })),
+            onOpen: (id, from) => {
+                memo.current[at] = from;
+                const child = all.find((x) => x.path.join('>') === [...s.path, id].join('>'));
+                setStart({
+                    step: child.props.steps?.length ? insideStep(child, from.port) : null,
+                    beat: 0,
+                    playing: from.playing,
+                    rect: from.rect,
+                });
+                setPath([...s.path, id]);
+            },
+            onUp: (depth) => {
+                const to = s.path.slice(0, depth);
+                const { step, beat, playing } = memo.current[to.join('>')];
+                const beats = step == null ? 1 : (all.find((x) => x.path.join('>') === to.join('>')).props.steps?.[step].flow.length ?? 1);
+                setStart({ step, beat: Math.min(beat + 1, beats - 1), playing, box: s.path[depth] });
+                setPath(to);
+            },
+        }
+        : undefined;
+    const figure = useRef(null);
+    const descId = useId();
+    const alt = useMemo(() => altText({ layout: placed.layout, edges: placed.edges, steps }), [placed, steps]);
+    return (_jsxs("figure", { ref: figure, className: "flowfig", "data-inside": level ? '' : undefined, "aria-label": alt.title, "aria-describedby": descId, style: {
+            ...Object.fromEntries(Object.entries(props.theme ?? {}).map(([k, val]) => [`--fig-${k}`, val])),
+            position: full ? 'fixed' : 'relative',
+            inset: full ? 0 : undefined,
+            zIndex: full ? 1000 : undefined,
+            overflow: full ? 'auto' : undefined,
+            margin: full ? 0 : '24px 0',
+            padding: full ? '48px 24px 24px' : '20px 16px 16px',
+            border: full ? 'none' : `1px solid ${v('border')}`,
+            borderRadius: full ? 0 : 16,
+            background: v('bg'),
+            fontFamily: v('font'),
+            color: v('fg'),
+        }, children: [_jsx("div", { id: descId, style: HIDDEN, children: alt.desc }), _createElement(FlowBody, { ...props, ...s.props, key: at, layout: placed.layout, edges: placed.edges, written: s.props, wide: wide, setWide: fold ? setWide : undefined, full: full, setFull: setFull, level: level, start: start, figure: figure })] }));
 }
-// The ASYNC tag is 9 px; phone text needs 11 px.
-const RAIL_ZOOM = 11 / 9;
-function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, autoplay = true, check = false, rail: withRail = false, lanes, timeline, today, written, wide, setWide, }) {
+const reduced = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+// The ASYNC tag is 9 px.
+const RAIL_TEXT = 9;
+// offsetWidth is rounded, so a rect ratio reads scale 1 as 0.999.
+const shownScale = (el) => {
+    let k = 1;
+    for (let n = el; n; n = n.parentElement)
+        k *= new DOMMatrix(getComputedStyle(n).transform).a;
+    return k;
+};
+function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, autoplay = true, check = false, rail: withRail = false, lanes, timeline, today, written, wide, setWide, full, setFull, level, start, figure, }) {
     const tl = timeline && isLanesLayout(layout);
-    const alt = useMemo(() => altText({ layout, edges, steps: stepsIn }), [layout, edges, stepsIn]);
-    const descId = useId();
     const tabsId = useId();
     const synthetic = tl && !stepsIn.length;
     const steps = useMemo(() => (synthetic ? timelineBeats({ layout, edges, timeline, today }) : stepsIn), [synthetic, layout, edges, timeline, today, stepsIn]);
@@ -78,31 +133,77 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
     const area = useRef(null);
     const root = useRef(null);
     const outer = useRef(null);
-    const [fit, setFit] = useState({ scale: 1, height: 0 });
-    const [full, setFull] = useState(false);
+    const [fit, setFit] = useState({ scale: 1, height: 0, scroll: false });
+    const backBtn = useRef(null);
+    const ghost = useRef(null);
+    const place = (n) => {
+        const f = figure.current, a = f.getBoundingClientRect(), r = n.getBoundingClientRect();
+        return { x: r.left - a.left - f.clientLeft + f.scrollLeft, y: r.top - a.top - f.clientTop + f.scrollTop, w: r.width, h: r.height };
+    };
+    const showGhost = (r) => {
+        Object.assign(ghost.current.style, { display: 'block', left: `${r.x}px`, top: `${r.y}px`, width: `${r.w}px`, height: `${r.h}px` });
+        return ghost.current;
+    };
+    const toward = (from, to) => `translate(${from.x - to.x}px, ${from.y - to.y}px) scale(${from.w / to.w}, ${from.h / to.h})`;
+    const moving = useRef(false);
+    const goUp = (depth) => {
+        const map = root.current, r = start?.rect;
+        if (moving.current)
+            return;
+        if (reduced() || !map || !r)
+            return level.onUp(depth);
+        moving.current = true;
+        map.animate([{ opacity: 1 }, { opacity: 0 }], { duration: OPEN_MS.hide, fill: 'forwards' });
+        const to = place(map);
+        showGhost(to).animate([{ transform: 'none' }, { transform: toward(r, to) }], {
+            duration: OPEN_MS.shrink,
+            delay: OPEN_MS.hide,
+            easing: 'cubic-bezier(0.4, 0, 1, 1)',
+            fill: 'forwards',
+        }).onfinish = () => level.onUp(depth);
+    };
+    const up = level?.path.length ? () => goUp(level.path.length - 1) : undefined;
     useEffect(() => {
-        if (!full)
+        if (!full && !up)
             return;
-        const onKey = (e) => e.key === 'Escape' && setFull(false);
+        const onKey = (e) => {
+            const at = document.activeElement;
+            const inside = !!at && !!figure.current?.contains(at);
+            if (e.key === 'Escape' && up && (inside || full))
+                up();
+            else if (e.key === 'Escape')
+                setFull(false);
+            else if (e.key === 'Backspace' && up && inside && !at.closest('input,textarea,[contenteditable]')) {
+                e.preventDefault();
+                up();
+            }
+        };
         addEventListener('keydown', onKey);
         return () => removeEventListener('keydown', onKey);
-    }, [full]);
+    }, [full, up]);
+    useEffect(() => {
+        if (start?.box)
+            figure.current?.querySelector(`[data-fig="${CSS.escape(start.box)}"]`)?.focus();
+        else if (level?.path.length)
+            backBtn.current?.focus();
+    }, []);
     const dots = useRef([]);
     const chips = useRef([]);
     const bar = useRef(null);
-    const [beat, setBeat] = useState(0);
+    const [beat, setBeat] = useState(start?.beat ?? 0);
     const [holding, setHolding] = useState(false);
     const [returning, setReturning] = useState(false);
     const firstLabel = useRef('');
     const paths = useRef({});
     const [routed, setRouted] = useState([]);
+    const routedOn = useRef(new WeakMap());
     const markSides = new Set(nodes(layout).flatMap((n) => (n.mark ? [markSide(n.id, n.mark, routed)] : [])));
     const [extraTall, setExtraTall] = useState(new Set());
     const lanePlan = useMemo(() => lanes && !tl && isLanesLayout(layout)
         ? planLanes({ layout, edges, steps, lanes }, { floor: withRail ? (layoutRail({ layout, edges, steps, rail: true }, 560)?.width ?? 0) : 0 })
         : null, [lanes, tl, layout, edges, steps, withRail]);
-    const [active, setActive] = useState(steps.length ? 0 : null);
-    const [playing, setPlaying] = useState(autoplay);
+    const [active, setActive] = useState(start ? start.step : steps.length ? 0 : null);
+    const [playing, setPlaying] = useState(start ? start.playing : autoplay);
     const playingRef = useRef(playing);
     playingRef.current = playing;
     const [rate, setRate] = useState(1);
@@ -139,17 +240,45 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
         beats.slice(0, beat + 1).forEach((b, i) => Object.keys(b.show ?? {}).forEach((k) => (at[k] = i)));
         return at;
     }, [beats, beat]);
-    const figure = useRef(null);
     const [mapW, setMapW] = useState(0);
     const railOnly = withRail === 'only';
     const rail = useMemo(() => (withRail ? layoutRail({ layout, edges, steps, rail: true }, railOnly ? 560 : mapW) : null), [withRail, railOnly, layout, edges, steps, mapW]);
     const noMap = railOnly && rail != null;
     const railPane = useRef(null);
+    const [railBox, setRailBox] = useState(0);
+    const zoom = wide ? 11 / RAIL_TEXT : noMap && railBox ? textFloor(railBox) / RAIL_TEXT : 0;
     const follow = useRef(true);
     const user = useRef(false);
     const left = useRef(0);
     const busy = useRef(0);
-    const jump = useRef(null);
+    const jump = useRef(start?.beat ?? null);
+    const wait = useRef(start?.rect && start.playing
+        ? OPEN_MS.grow +
+            OPEN_MS.stagger * (nodes(layout).length - 1) +
+            readMs([level.scene.line, ...level.scene.ports.map(portLabel)].join(' '))
+        : 0);
+    useLayoutEffect(() => {
+        const map = root.current;
+        if (!map || reduced())
+            return;
+        if (start?.box)
+            return void map.animate([{ opacity: 0 }, { opacity: 1 }], { duration: OPEN_MS.fade });
+        if (!start?.rect)
+            return;
+        const to = place(map);
+        showGhost(to).animate([{ transform: toward(start.rect, to) }, { transform: 'none' }], {
+            duration: OPEN_MS.grow,
+            easing: 'cubic-bezier(0.2, 0, 0, 1)',
+        });
+        for (const e of map.querySelectorAll(':scope > svg'))
+            e.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 1, delay: OPEN_MS.grow, fill: 'backwards' });
+        const shows = flowOrder(level.scene).map((id, k) => map.querySelector(`[data-fig="${CSS.escape(id)}"]`)?.animate([{ opacity: 0 }, { opacity: 1 }], {
+            duration: OPEN_MS.fade,
+            delay: OPEN_MS.grow + OPEN_MS.stagger * k,
+            fill: 'backwards',
+        }));
+        shows.at(-1)?.finished.then(() => ghost.current && (ghost.current.style.display = 'none'));
+    }, []);
     const [hoverEdge, setHoverEdge] = useState(null);
     const [still, setStill] = useState(false);
     useEffect(() => setStill(window.matchMedia('(prefers-reduced-motion: reduce)').matches), []);
@@ -176,13 +305,12 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
             if (setWide && goal !== wide)
                 return setWide(goal);
             const scale = fitScale(wide, box.clientWidth, el.offsetWidth);
-            setFit({ scale, height: el.offsetHeight * scale });
+            setFit({ scale, height: el.offsetHeight * scale, scroll: scale > box.clientWidth / el.offsetWidth });
             setMapW(el.offsetWidth);
             if (area.current)
                 setAxisW(area.current.offsetWidth);
             const base = el.getBoundingClientRect();
-            // Rects are measured unscaled: k is the scale on screen.
-            const k = base.width / el.offsetWidth;
+            const k = shownScale(el);
             const rects = {};
             el.querySelectorAll('[data-fig]').forEach((n) => {
                 const r = n.getBoundingClientRect();
@@ -246,6 +374,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                 }),
                 ...(!tl && e.label != null && { labelW: labelPillW(str(e.label)) }),
             })), rects, tips, avoid, pillArea, lanePlan ? { bands: Object.values(laneBands), boxes: nodes(layout).flatMap((n) => (rects[n.id] ? [rects[n.id]] : [])) } : undefined);
+            routedOn.current.set(next, rects);
             setRouted(next);
             if (lanePlan) {
                 const more = [...tightCopies(layout.children, lanePlan.ends, edges, next)].filter((k) => !lanePlan.tall.has(k) && !extraTall.has(k));
@@ -263,7 +392,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
     useEffect(() => {
         const pane = railPane.current;
         const n = rail?.rows.flatMap((r) => (r.kind === 'message' && r.step === active && r.beat === beat ? [r.n] : []))[0];
-        const now = wide && follow.current && n != null ? pane?.querySelector(`[data-rail-row="${n}"] path`) : null;
+        const now = zoom && follow.current && n != null ? pane?.querySelector(`[data-rail-row="${n}"] path`) : null;
         if (!pane || !now)
             return;
         const [p, r] = [pane.getBoundingClientRect(), now.getBoundingClientRect()];
@@ -271,25 +400,28 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
         // Some browsers fire no scrollend event.
         busy.current = performance.now() + 1000;
         pane.scrollTo({ left: pane.scrollLeft + (r.left + r.right) / 2 - p.left - pane.clientWidth / 2, behavior: still ? 'auto' : 'smooth' });
-    }, [wide, active, beat, still, rail]);
+    }, [zoom, active, beat, still, rail]);
     useEffect(() => {
         const pane = railPane.current;
         if (!pane)
             return;
         const end = () => (busy.current = 0);
         pane.addEventListener('scrollend', end);
-        return () => pane.removeEventListener('scrollend', end);
-    }, [rail]);
+        const ro = new ResizeObserver(() => setRailBox(pane.clientWidth));
+        if (noMap)
+            ro.observe(pane);
+        return () => (pane.removeEventListener('scrollend', end), ro.disconnect());
+    }, [rail, noMap]);
     const reported = useRef(new Set());
     useEffect(() => {
         const el = root.current, box = outer.current;
         const fig = figure.current;
-        if (!check || !fig || (!noMap && (!el || !box || !el.offsetWidth)))
+        if (!check || !fig || (noMap ? !railBox : !el || !box || !el.offsetWidth))
             return;
         if (setWide && el && box && nextWide(wide, box.clientWidth, el.offsetWidth) !== wide)
             return;
         const base = (el ?? fig).getBoundingClientRect();
-        const k = el ? base.width / el.offsetWidth : 1;
+        const k = el ? shownScale(el) : 1;
         const rel = (n) => {
             const r = n.getBoundingClientRect();
             return { x: (r.left - base.left) / k, y: (r.top - base.top) / k, w: r.width / k, h: r.height / k };
@@ -306,7 +438,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                     .filter((t) => !t.children.length && t.textContent?.trim() && t.clientWidth > 0 && !t.closest('[aria-hidden]'))
                     .map((t) => {
                     const fontSize = parseFloat(getComputedStyle(t).fontSize);
-                    if (!n.dataset.diamond)
+                    if (!n.dataset.diamond || t.closest('[data-fig-outside]'))
                         return { text: t.textContent, fontSize, room: t.clientWidth, need: t.scrollWidth };
                     const [r, range] = [rel(t), document.createRange()];
                     range.selectNodeContents(t);
@@ -320,6 +452,12 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                 }),
             };
         });
+        const moved = (b) => {
+            const r = routedOn.current.get(routed)?.[b.id];
+            return !r || Math.abs(r.x - b.rect.x) > 1 || Math.abs(r.y - b.rect.y) > 1;
+        };
+        if (el && boxes.some(moved))
+            return;
         const fonts = [...fig.querySelectorAll('*')]
             .filter((t) => !t.children.length &&
             t.textContent?.trim() &&
@@ -328,8 +466,9 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
             !t.closest('[data-fig-tag],[aria-hidden]'))
             .map((t) => {
             const svg = railPane.current?.firstElementChild;
-            const at = el?.contains(t) ? k : svg?.contains(t) && rail ? svg.getBoundingClientRect().width / rail.width : 1;
-            return parseFloat(getComputedStyle(t).fontSize) * at;
+            const place = el?.contains(t) ? 'map' : svg?.contains(t) && rail ? 'rail' : 'plain';
+            const railScale = svg && rail ? svg.getBoundingClientRect().width / rail.width : 1;
+            return shownFont(parseFloat(getComputedStyle(t).fontSize), place, { map: k, rail: railScale });
         });
         const labels = Object.fromEntries([...fig.querySelectorAll('[data-fig-label]')].map((n) => [n.dataset.figLabel, rel(n)]));
         const lanesIn = el ? [...el.querySelectorAll('[data-fig-band]')] : [];
@@ -378,7 +517,11 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
             ],
             minFont: Math.min(...fonts),
         };
-        for (const f of [...checkSpec(written), ...checkScene(scene, { width: (box ?? fig).clientWidth }), ...checkTheme(theme)]) {
+        for (const f of [
+            ...checkSpec(written),
+            ...checkScene(scene, { width: (box ?? fig).clientWidth, minText: textFloor((box ?? fig).clientWidth), auto: written.layout.auto }),
+            ...checkTheme(theme),
+        ]) {
             const key = f.rule + ':' + f.ids.join() + ':' + f.message;
             if (reported.current.has(key))
                 continue;
@@ -386,13 +529,14 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
             // oxlint-disable-next-line no-console
             console.warn(`flowfig check: ${f.severity} ${f.rule}: ${f.message}`);
         }
-    }, [check, routed, written, layout, edges, steps, ids, theme, rail, noMap, lanePlan, wide, setWide]);
+    }, [check, routed, written, layout, edges, steps, ids, theme, rail, noMap, railBox, lanePlan, wide, setWide]);
     useEffect(() => {
         const gs = dots.current, cs = chips.current, edgeOf = Object.fromEntries(edges.map((e, i) => [ids[i], e]));
         if (clock.current.beats !== beats) {
             const j = jump.current ?? 0;
             jump.current = null;
-            clock.current = { beats, elapsed: beats.slice(0, j).reduce((t, b) => t + beatMs(b, speed), 0) };
+            clock.current = { beats, elapsed: beats.slice(0, j).reduce((t, b) => t + beatMs(b, speed), 0) - wait.current * BASE_RATE };
+            wait.current = 0;
             setBeat(j);
         }
         if (!beats.length || (!noMap && !routed.length && !(tl && !edges.length)))
@@ -414,7 +558,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                     return setActive((a) => ((a ?? 0) + 1) % steps.length);
                 clock.current.elapsed = 0;
             }
-            const t = clock.current.elapsed;
+            const t = Math.max(0, clock.current.elapsed);
             if (bar.current)
                 bar.current.style.transform = `scaleX(${Math.min(1, t / total)})`;
             const next = ends.findIndex((e) => t < e);
@@ -518,7 +662,6 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
         }
     };
     const focus = hover != null || hoverEdge != null || step != null;
-    const vars = Object.fromEntries(Object.entries(theme ?? {}).map(([k, val]) => [`--fig-${k}`, val]));
     const timelineFig = useMemo(() => (tl ? timelineLayout({ layout, edges, timeline, today }, axisW) : null), [tl, layout, edges, timeline, today, axisW]);
     const renderBar = (n, it) => {
         const lit = litNodes.has(n.id);
@@ -712,9 +855,36 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
         const card = carded.has(item.id);
         const dl = diamond && !card ? diamondLines(item, nodeWidth(item, false) + 70) : null;
         const w = diamond || card || item.width != null || str(item.label) ? nodeWidth(item, card, cap) + (diamond ? 70 : 0) : undefined;
-        const lines = w != null && !diamond && str(item.label) ? labelLines(item, w) : null;
         const bt = item.tone && TONES[item.tone];
-        return (_jsxs("div", { "data-fig": item.id, title: item.source, "data-diamond": diamond || undefined, onMouseEnter: () => setHover(item.id), onMouseLeave: () => setHover(null), style: {
+        const parts = level?.owners.get(item.id);
+        const port = level?.scene.ports.some((p) => p.id === item.id);
+        const lines = w != null && str(item.label) ? labelLines(item, w) : null;
+        const open = () => {
+            const hop = cur?.hops.find((h) => (h.back ? edges[ids.indexOf(h.edge)]?.from : edges[ids.indexOf(h.edge)]?.to) === item.id);
+            const e = hop && edges[ids.indexOf(hop.edge)];
+            const at = { step: active, beat, playing, port: e ? (hop.back ? e.to : e.from) : undefined };
+            const map = root.current, n = map?.querySelector(`[data-fig="${CSS.escape(item.id)}"]`);
+            if (moving.current)
+                return;
+            if (reduced() || !map || !n)
+                return level.onOpen(item.id, at);
+            moving.current = true;
+            const rect = place(n);
+            showGhost(rect);
+            map.animate([{ opacity: 1 }, { opacity: 0 }], { duration: OPEN_MS.fade, fill: 'forwards' }).onfinish = () => level.onOpen(item.id, { ...at, rect });
+        };
+        return (_jsxs("div", { "data-fig": item.id, title: item.source, "data-diamond": diamond || undefined, onMouseEnter: () => setHover(item.id), onMouseLeave: () => setHover(null), ...(parts != null && {
+                role: 'button',
+                tabIndex: 0,
+                'aria-label': `Open ${str(item.label) || item.id}, ${parts} parts`,
+                onClick: open,
+                onKeyDown: (e) => {
+                    if (e.key !== 'Enter' && e.key !== ' ')
+                        return;
+                    e.preventDefault();
+                    open();
+                },
+            }), style: {
                 position: 'relative',
                 isolation: 'isolate',
                 minWidth: 100,
@@ -727,19 +897,23 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                 justifyContent: 'center',
                 padding: diamond
                     ? '22px 34px'
-                    : `calc(${store ? 24 : 10}px - var(--ff-b, 0px)) calc(${card ? 10 : 16}px - var(--ff-b, 0px)) calc(10px - var(--ff-b, 0px))`,
+                    : `calc(${store ? 23 : 9}px - var(--ff-b, 0px)) calc(${card ? 10 : 16}px - var(--ff-b, 0px)) calc(9px - var(--ff-b, 0px))`,
                 textAlign: 'center',
                 background: diamond ? undefined : bt ? toneTint(bt, v('bg')) : v('bg'),
-                color: v('fg'),
-                border: diamond ? undefined : `1px solid ${bt ?? (lit ? v('accent') : v('border'))}`,
+                color: port ? v('muted') : v('fg'),
+                border: diamond ? undefined : `1px ${port ? 'dashed' : 'solid'} ${bt ?? (lit ? v('accent') : v('border'))}`,
                 ...(bt && { '--ff-box': bt }),
-                boxShadow: diamond ? undefined : '0 1px 2px rgba(0,0,0,.06)',
+                boxShadow: diamond
+                    ? undefined
+                    : parts != null
+                        ? `3px 3px 0 -1px ${v('bg')}, 3px 3px 0 0 ${v('border')}`
+                        : '0 1px 2px rgba(0,0,0,.06)',
                 opacity: focus && !lit ? 0.7 : 1,
                 borderRadius: store ? '50% / 12px' : 10,
                 fontSize: 14,
                 fontWeight: 500,
                 transition: 'border-color .4s, background .4s, box-shadow .4s, border-width .4s, padding .4s, opacity .25s',
-                cursor: 'default',
+                cursor: parts != null ? 'pointer' : 'default',
             }, children: [diamond && (_jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", style: {
                         position: 'absolute',
                         inset: 0,
@@ -770,7 +944,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                                 border: `1.5px solid ${bt ?? v('accent')}`,
                                 background: `radial-gradient(circle, ${bt ?? v('accent')} 0 4px, transparent 4.5px)`,
                             }),
-                    } })), lines ? (lines.map((l, i) => (_jsx("div", { style: { whiteSpace: 'nowrap', lineHeight: `${LABEL_LINE}px` }, children: l }, i)))) : (_jsx("div", { style: { lineHeight: `${LABEL_LINE}px` }, children: item.label })), dl
+                    } })), lines && port ? (_jsx("div", { style: { lineHeight: `${LABEL_LINE}px`, width: 'min-content', margin: '0 auto' }, children: lines.map((l, i) => (_jsxs(Fragment, { children: [i > 0 && ' ', _jsx("span", { style: { whiteSpace: 'nowrap' }, children: l })] }, i))) })) : lines ? (lines.map((l, i) => (_jsx("div", { style: { whiteSpace: 'nowrap', lineHeight: `${LABEL_LINE}px` }, children: l }, i)))) : (_jsx("div", { style: { lineHeight: `${LABEL_LINE}px` }, children: item.label })), dl
                     ? dl.subs.map((l, i) => (_jsx("div", { style: { fontSize: 12, fontWeight: 400, color: v('muted'), lineHeight: '15px', whiteSpace: 'nowrap' }, children: l.text }, i)))
                     : item.sub != null && _jsx("div", { style: { fontSize: 12, fontWeight: 400, color: v('muted'), marginTop: 2 }, children: item.sub }), card && (_jsxs("div", { style: {
                         marginTop: 8,
@@ -803,20 +977,7 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
         background: v('bg'),
         color: v('muted'),
     };
-    return (_jsxs("figure", { ref: figure, className: "flowfig", "aria-label": alt.title, "aria-describedby": descId, style: {
-            ...vars,
-            position: full ? 'fixed' : 'relative',
-            inset: full ? 0 : undefined,
-            zIndex: full ? 1000 : undefined,
-            overflow: full ? 'auto' : undefined,
-            margin: full ? 0 : '24px 0',
-            padding: full ? '48px 24px 24px' : '20px 16px 16px',
-            border: full ? 'none' : `1px solid ${v('border')}`,
-            borderRadius: full ? 0 : 16,
-            background: v('bg'),
-            fontFamily: v('font'),
-            color: v('fg'),
-        }, children: [_jsx("div", { id: descId, style: HIDDEN, children: alt.desc }), _jsx("button", { type: "button", "aria-label": full ? 'Close full screen' : 'Full screen', title: full ? 'Close (Esc)' : 'Full screen', onClick: () => setFull((f) => !f), style: {
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": full ? 'Close full screen' : 'Full screen', title: full ? 'Close (Esc)' : 'Full screen', onClick: () => setFull(!full), style: {
                     ...iconBtn,
                     position: 'absolute',
                     top: 10,
@@ -827,113 +988,128 @@ function FlowBody({ layout, edges, steps: stepsIn = NONE, theme, speed = 900, au
                 }, children: _jsx(Icon, { d: full ? 'M4 4l8 8M12 4l-8 8' : 'M9 3h4v4M7 13H3V9M13 3L9 7M3 13l4-4' }) }), _jsx("style", { children: '@keyframes flowfig-label{from{opacity:0}to{opacity:0}}@keyframes flowfig-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}' +
                     // The 2 px active border takes 1 px of padding, so the box size stays.
                     `.${ACTIVE}:not([data-diamond]){--ff-b:1px;border-width:2px!important;background:color-mix(in srgb, ${hue} 10%, ${v('surface')})!important;box-shadow:${glow}!important;border-color:${hue}!important}` +
-                    `.${ACTIVE} polygon{fill:color-mix(in srgb, ${hue} 10%, ${v('surface')});stroke:${hue};stroke-width:2px}` }), !noMap && (_jsx(_Fragment, { children: _jsx("div", { style: {
+                    `.${ACTIVE} polygon{fill:color-mix(in srgb, ${hue} 10%, ${v('surface')});stroke:${hue};stroke-width:2px}` +
+                    (level
+                        ? '@media (prefers-reduced-motion: reduce){.flowfig[data-inside] *{transition:none!important;animation:none!important}}'
+                        : '') }), level && (_jsx("div", { ref: ghost, style: {
+                    display: 'none',
+                    position: 'absolute',
+                    zIndex: 4,
+                    boxSizing: 'border-box',
+                    border: `1.5px solid ${v('accent')}`,
+                    borderRadius: 10,
+                    transformOrigin: '0 0',
+                    pointerEvents: 'none',
+                } })), !noMap && (_jsx(_Fragment, { children: _jsxs("div", { style: {
                         margin: full ? '-48px -24px 0' : '-20px -16px 0',
                         padding: full ? '48px 24px 24px' : '24px 16px',
                         borderRadius: full ? 0 : '16px 16px 0 0',
                         borderBottom: `1px solid ${v('border')}`,
                         backgroundImage: `radial-gradient(color-mix(in srgb, ${v('fg')} 16%, transparent) 1px, transparent 1.2px)`,
                         backgroundSize: '14px 14px',
-                    }, children: _jsx("div", { ref: outer, role: "tabpanel", id: `${tabsId}-panel`, "aria-labelledby": `${tabsId}-tab-${active ?? 0}`, style: {
-                            overflow: wide || fit.scale <= 0.5 ? 'auto' : 'hidden',
-                            height: fit.scale < 1 ? fit.height : undefined,
-                        }, children: _jsxs("div", { ref: root, style: {
-                                position: 'relative',
-                                width: 'max-content',
-                                margin: '0 auto',
-                                transform: fit.scale < 1 ? `scale(${fit.scale})` : undefined,
-                                transformOrigin: 'top left',
-                                paddingTop: arcRoom(routed, 'above') || (markSides.has('t') ? 20 : 4),
-                                paddingBottom: arcRoom(routed, 'below') || (markSides.has('b') ? 20 : 4),
-                                paddingLeft: arcRoom(routed, 'left') || 4,
-                                paddingRight: arcRoom(routed, 'right') || 4,
-                            }, children: [renderItem(layout, 0), _jsxs("svg", { style: {
-                                        position: 'absolute',
-                                        inset: 0,
-                                        width: '100%',
-                                        height: '100%',
-                                        overflow: 'visible',
-                                        pointerEvents: 'none',
-                                        zIndex: tl ? 0 : undefined,
-                                    }, children: [_jsx("defs", { children: ['off', 'on'].map((k) => (_jsx("marker", { id: `fig-arrow-${k}`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 1 L 9 5 L 0 9 z", fill: "context-stroke" }) }, k))) }), routed.map((r) => {
-                                            const on = litEdges.has(r.id);
-                                            const tone = hopTone(r.id);
-                                            const hidden = !on && edges[ids.indexOf(r.id)].quiet;
-                                            const tip = edgeTip(r.id, edges[ids.indexOf(r.id)].source, allBeats);
-                                            const look = (d, key, guides = false) => (_jsx("path", { ref: guides
-                                                    ? (p) => {
+                    }, children: [up && (_jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center', marginBottom: 12, fontSize: 13, color: v('muted') }, children: [_jsx("button", { ref: backBtn, type: "button", onClick: up, style: { ...iconBtn, width: 'auto', padding: '0 12px', font: 'inherit' }, children: "Back" }), level.path.map((p, i) => i < level.path.length - 1 ? (_jsxs(Fragment, { children: [_jsx("button", { type: "button", onClick: () => goUp(i + 1), style: { border: 0, padding: 0, background: 'none', font: 'inherit', color: v('accent'), cursor: 'pointer' }, children: p.name }), ' > '] }, p.id)) : (_jsx("span", { style: { color: v('fg') }, children: p.name }, p.id))), _jsx("div", { "aria-live": "polite", style: HIDDEN, children: `${level.scene.line}: ${level.scene.parts} parts.` +
+                                        level.scene.ports
+                                            .map((p) => p.way === 'in' ? ` In from ${p.name}.` : p.way === 'out' ? ` Out to ${p.name}.` : ` In and out: ${p.name}.`)
+                                            .join('') })] })), _jsx("div", { ref: outer, role: "tabpanel", id: `${tabsId}-panel`, "aria-labelledby": `${tabsId}-tab-${active ?? 0}`, style: {
+                                overflow: wide || fit.scroll ? 'auto' : 'hidden',
+                                height: fit.scale < 1 ? fit.height : undefined,
+                            }, children: _jsxs("div", { ref: root, style: {
+                                    position: 'relative',
+                                    width: 'max-content',
+                                    margin: '0 auto',
+                                    transform: fit.scale < 1 ? `scale(${fit.scale})` : undefined,
+                                    transformOrigin: 'top left',
+                                    paddingTop: arcRoom(routed, 'above') || (markSides.has('t') ? 20 : 4),
+                                    paddingBottom: arcRoom(routed, 'below') || (markSides.has('b') ? 20 : 4),
+                                    paddingLeft: arcRoom(routed, 'left') || 4,
+                                    paddingRight: arcRoom(routed, 'right') || 4,
+                                }, children: [renderItem(layout, 0), _jsxs("svg", { style: {
+                                            position: 'absolute',
+                                            inset: 0,
+                                            width: '100%',
+                                            height: '100%',
+                                            overflow: 'visible',
+                                            pointerEvents: 'none',
+                                            zIndex: tl ? 0 : undefined,
+                                        }, children: [_jsx("defs", { children: ['off', 'on'].map((k) => (_jsx("marker", { id: `fig-arrow-${k}`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 1 L 9 5 L 0 9 z", fill: "context-stroke" }) }, k))) }), routed.map((r) => {
+                                                const on = litEdges.has(r.id);
+                                                const tone = hopTone(r.id);
+                                                const hidden = !on && edges[ids.indexOf(r.id)].quiet;
+                                                const tip = edgeTip(r.id, edges[ids.indexOf(r.id)].source, allBeats);
+                                                const look = (d, key, guides = false) => (_jsx("path", { ref: guides
+                                                        ? (p) => {
+                                                            paths.current[r.id] = p;
+                                                        }
+                                                        : undefined, d: d, fill: "none", stroke: on ? (tone ?? v('accent')) : v('muted'), strokeWidth: on ? EDGE_ON : EDGE_OFF, strokeOpacity: hidden ? 0 : focus && !on ? 0.35 : 1, markerEnd: hidden ? undefined : `url(#fig-arrow-${on ? 'on' : 'off'})`, style: { transition: 'stroke .25s, stroke-opacity .25s', pointerEvents: tip ? 'stroke' : undefined }, children: tip && _jsx("title", { children: tip }) }, key));
+                                                const guide = (_jsx("path", { ref: (p) => {
                                                         paths.current[r.id] = p;
-                                                    }
-                                                    : undefined, d: d, fill: "none", stroke: on ? (tone ?? v('accent')) : v('muted'), strokeWidth: on ? EDGE_ON : EDGE_OFF, strokeOpacity: hidden ? 0 : focus && !on ? 0.35 : 1, markerEnd: hidden ? undefined : `url(#fig-arrow-${on ? 'on' : 'off'})`, style: { transition: 'stroke .25s, stroke-opacity .25s', pointerEvents: tip ? 'stroke' : undefined }, children: tip && _jsx("title", { children: tip }) }, key));
-                                            const guide = (_jsx("path", { ref: (p) => {
-                                                    paths.current[r.id] = p;
-                                                }, d: r.d, fill: "none", stroke: "none" }, r.id));
-                                            if (r.stub)
-                                                return [...r.stub.parts.map((d, j) => look(d, `${r.id}:${j}`)), guide];
-                                            return look(r.d, r.id, true);
-                                        }), Array.from({ length: Math.max(1, ...beats.map((b) => b.hops.length)) }, (_, j) => (_jsxs("g", { ref: (g) => {
-                                                dots.current[j] = g;
-                                            }, style: { opacity: 0, color: v('accent') }, children: [_jsx("circle", { r: 10, fill: "currentColor", opacity: 0.2 }), _jsx("circle", { r: 4.5, fill: "currentColor" })] }, j)))] }), Array.from({ length: Math.max(1, ...beats.map((b) => b.hops.length)) }, (_, j) => (_jsx("div", { ref: (c) => {
-                                        chips.current[j] = c;
-                                    }, style: {
-                                        position: 'absolute',
-                                        left: 0,
-                                        top: 0,
-                                        zIndex: 2,
-                                        opacity: 0,
-                                        maxWidth: 220,
-                                        width: 'max-content',
-                                        padding: '4px 9px',
-                                        borderRadius: 8,
-                                        fontSize: 11.5,
-                                        lineHeight: '15px',
-                                        pointerEvents: 'none',
-                                        background: v('accent'),
-                                        color: ON_ACCENT,
-                                        boxShadow: '0 4px 14px rgba(0,0,0,.18)',
-                                        transition: 'opacity .2s',
-                                    }, children: cur?.hops[j]?.data }, j))), routed.flatMap((r) => {
-                                    const e = edges[ids.indexOf(r.id)];
-                                    const texts = r.stub && lanePlan?.stubs.get(r.id);
-                                    if (!texts && (e.label == null || tl))
-                                        return [];
-                                    const on = litEdges.has(r.id);
-                                    const tone = hopTone(r.id);
-                                    const pills = texts
-                                        ? r.stub.pills.map((p, j) => ({
-                                            key: `${r.id}:${j}`,
-                                            x: p.x + p.w / 2,
-                                            y: p.y + p.h / 2,
-                                            text: (j === 0 && r.stub.short ? texts[2] : texts[j]),
-                                        }))
-                                        : [{ key: r.id, x: r.mid.x, y: r.mid.y, text: e.label }];
-                                    return pills.map((p) => (_jsx("div", { "data-fig-label": p.key, style: {
+                                                    }, d: r.d, fill: "none", stroke: "none" }, r.id));
+                                                if (r.stub)
+                                                    return [...r.stub.parts.map((d, j) => look(d, `${r.id}:${j}`)), guide];
+                                                return look(r.d, r.id, true);
+                                            }), Array.from({ length: Math.max(1, ...beats.map((b) => b.hops.length)) }, (_, j) => (_jsxs("g", { ref: (g) => {
+                                                    dots.current[j] = g;
+                                                }, style: { opacity: 0, color: v('accent') }, children: [_jsx("circle", { r: 10, fill: "currentColor", opacity: 0.2 }), _jsx("circle", { r: 4.5, fill: "currentColor" })] }, j)))] }), Array.from({ length: Math.max(1, ...beats.map((b) => b.hops.length)) }, (_, j) => (_jsx("div", { ref: (c) => {
+                                            chips.current[j] = c;
+                                        }, style: {
                                             position: 'absolute',
-                                            left: p.x,
-                                            top: p.y,
-                                            transform: 'translate(-50%, -50%)',
-                                            fontSize: 11,
-                                            lineHeight: '16px',
-                                            padding: '0 7px',
-                                            borderRadius: 999,
-                                            whiteSpace: 'nowrap',
+                                            left: 0,
+                                            top: 0,
+                                            zIndex: 2,
+                                            opacity: 0,
+                                            maxWidth: 220,
+                                            width: 'max-content',
+                                            padding: '4px 9px',
+                                            borderRadius: 8,
+                                            fontSize: 11.5,
+                                            lineHeight: '15px',
                                             pointerEvents: 'none',
-                                            background: on ? (tone ? toneFill(tone) : v('accent')) : v('bg'),
-                                            color: on ? ON_ACCENT : v('muted'),
-                                            border: `1px solid ${on ? (tone ?? v('accent')) : v('border')}`,
-                                            opacity: !on && e.quiet ? 0 : focus && !on ? 0.6 : 1,
-                                            fontFamily: MONO,
-                                            transition: 'background .25s, color .25s, opacity .25s',
-                                        }, children: p.text }, p.key)));
-                                })] }) }) }) })), rail && (_jsx("div", { ref: railPane, onWheel: () => (user.current = true), onPointerDown: () => (user.current = true), onTouchStart: () => (user.current = true), onScroll: (e) => {
+                                            background: v('accent'),
+                                            color: ON_ACCENT,
+                                            boxShadow: '0 4px 14px rgba(0,0,0,.18)',
+                                            transition: 'opacity .2s',
+                                        }, children: cur?.hops[j]?.data }, j))), routed.flatMap((r) => {
+                                        const e = edges[ids.indexOf(r.id)];
+                                        const texts = r.stub && lanePlan?.stubs.get(r.id);
+                                        if (!texts && (e.label == null || tl))
+                                            return [];
+                                        const on = litEdges.has(r.id);
+                                        const tone = hopTone(r.id);
+                                        const pills = texts
+                                            ? r.stub.pills.map((p, j) => ({
+                                                key: `${r.id}:${j}`,
+                                                x: p.x + p.w / 2,
+                                                y: p.y + p.h / 2,
+                                                text: (j === 0 && r.stub.short ? texts[2] : texts[j]),
+                                            }))
+                                            : [{ key: r.id, x: r.mid.x, y: r.mid.y, text: e.label }];
+                                        return pills.map((p) => (_jsx("div", { "data-fig-label": p.key, style: {
+                                                position: 'absolute',
+                                                left: p.x,
+                                                top: p.y,
+                                                transform: 'translate(-50%, -50%)',
+                                                fontSize: 11,
+                                                lineHeight: '16px',
+                                                padding: '0 7px',
+                                                borderRadius: 999,
+                                                whiteSpace: 'nowrap',
+                                                pointerEvents: 'none',
+                                                background: on ? (tone ? toneFill(tone) : v('accent')) : v('bg'),
+                                                color: on ? ON_ACCENT : v('muted'),
+                                                border: `1px solid ${on ? (tone ?? v('accent')) : v('border')}`,
+                                                opacity: !on && e.quiet ? 0 : focus && !on ? 0.6 : 1,
+                                                fontFamily: MONO,
+                                                transition: 'background .25s, color .25s, opacity .25s',
+                                            }, children: p.text }, p.key)));
+                                    })] }) })] }) })), rail && (_jsx("div", { ref: railPane, onWheel: () => (user.current = true), onPointerDown: () => (user.current = true), onTouchStart: () => (user.current = true), onScroll: (e) => {
                     const x = e.currentTarget.scrollLeft;
                     if (user.current && x !== left.current && performance.now() > busy.current)
                         follow.current = false;
                     left.current = x;
-                }, style: { overflowX: wide ? 'auto' : undefined }, children: _jsxs("svg", { viewBox: `0 0 ${rail.width} ${rail.height}`, style: {
+                }, style: { overflowX: zoom ? 'auto' : undefined }, children: _jsxs("svg", { viewBox: `0 0 ${rail.width} ${rail.height}`, style: {
                         display: 'block',
-                        width: wide ? rail.width * RAIL_ZOOM : '100%',
-                        maxWidth: wide ? undefined : rail.width,
+                        width: zoom ? rail.width * zoom : '100%',
+                        maxWidth: zoom ? undefined : rail.width,
                         height: 'auto',
                         margin: `${noMap ? 0 : RAIL.gap}px auto 0`,
                         overflow: 'visible',