@likec4/diagram 1.59.4 → 1.60.0

package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.mjs

@@ -0,0 +1,66 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { PortalToContainer } from "../../../components/PortalToContainer.mjs";
+import { SEQ_TRANSITION } from "./motion.mjs";
+import { StoreProvider, useOutlinePanelWidth } from "./StoreProvider.mjs";
+import { OutlineBody } from "./OutlineBody.mjs";
+import { OutlineHeader } from "./OutlineHeader.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, LayoutGroup, MotionConfig, m } from "motion/react";
+import { vstack } from "@likec4/styles/patterns";
+
+//#region src/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.tsx
+/**
+* Side panel shown while a dynamic view walkthrough is running: the view title and progress,
+* the trail of fragments the current step sits in, and the outline of every step.
+*/
+const SequenceOutlinePanel = memo(() => {
+	return /* @__PURE__ */ jsx(StoreProvider, { children: /* @__PURE__ */ jsx(PortalToContainer, { children: /* @__PURE__ */ jsx(MotionConfig, {
+		transition: SEQ_TRANSITION,
+		children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+			propagate: true,
+			mode: "popLayout",
+			anchorY: "top",
+			children: /* @__PURE__ */ jsxs(SequenceOutlinePanelShell, { children: [/* @__PURE__ */ jsx(OutlineHeader, {}), /* @__PURE__ */ jsx(OutlineBody, {})] })
+		}) })
+	}) }) });
+});
+SequenceOutlinePanel.displayName = "SequenceOutlinePanel";
+const SequenceOutlinePanelShell = ({ children }) => {
+	const outlinePanelWidth = useOutlinePanelWidth();
+	return /* @__PURE__ */ jsx(m.div, {
+		layout: "position",
+		className: vstack({
+			position: "absolute",
+			top: "0",
+			left: "0",
+			layerStyle: "likec4.panel",
+			rounded: "0",
+			gap: "0",
+			padding: "0",
+			pointerEvents: "all",
+			maxWidth: "[85cqw]",
+			height: "100cqh",
+			maxHeight: "100cqh",
+			cursor: "default",
+			overflow: "hidden"
+		}),
+		style: { width: outlinePanelWidth },
+		initial: {
+			opacity: .5,
+			translateX: -40
+		},
+		animate: {
+			opacity: 1,
+			translateX: 0
+		},
+		exit: {
+			opacity: 0,
+			translateX: -40
+		},
+		children
+	});
+};
+
+//#endregion
+export { SequenceOutlinePanel };

package/dist/likec4diagram/ui/sequence-outline/StepBadge.mjs

@@ -0,0 +1,54 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { SEQ_BADGE_LAYOUT_ID, SEQ_TRANSITION } from "./motion.mjs";
+import { css } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { m } from "motion/react";
+import { Box } from "@likec4/styles/jsx";
+
+//#region src/likec4diagram/ui/sequence-outline/StepBadge.tsx
+const stepBadgeBase = css.raw({
+	flex: "none",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	minWidth: "[20px]",
+	height: "[18px]",
+	paddingInline: "1",
+	rounded: "sm",
+	bg: "surface.sunken",
+	color: "text.dimmed",
+	fontSize: "[10px]",
+	fontWeight: "bold",
+	fontVariantNumeric: "tabular-nums",
+	userSelect: "none"
+});
+const stepBadgeActive = css.raw(stepBadgeBase, {
+	minWidth: "[22px]",
+	height: "[20px]",
+	background: "[linear-gradient(var(--seq-badge-bg), var(--seq-badge-bg)), {colors.likec4.panel.bg}]",
+	color: "[var(--seq-badge-fg)]",
+	fontSize: "[11px]"
+});
+/** The step number pill. The active one carries the shared `layoutId`, so it travels between steps. */
+const StepBadge = ({ children, active }) => active ? /* @__PURE__ */ jsx(m.div, {
+	layoutId: SEQ_BADGE_LAYOUT_ID,
+	layout: "position",
+	transition: SEQ_TRANSITION,
+	className: css(stepBadgeActive),
+	children
+}) : /* @__PURE__ */ jsx("div", {
+	className: css(stepBadgeBase),
+	children
+});
+/** Marks a step that carries notes, without letting the note reflow the list. */
+const NotesDot = () => /* @__PURE__ */ jsx(Box, { css: {
+	flex: "none",
+	alignSelf: "flex-start",
+	boxSize: "[5px]",
+	marginTop: "[7px]",
+	rounded: "pill",
+	bg: "text.dimmed"
+} });
+
+//#endregion
+export { NotesDot, StepBadge };

package/dist/likec4diagram/ui/sequence-outline/StepRow.mjs

@@ -0,0 +1,192 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import IconArrowRight from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { Markdown } from "../../../base-primitives/Markdown.mjs";
+import { SEQ_CARD_LAYOUT_ID, SEQ_TRANSITION } from "./motion.mjs";
+import { recessed } from "./depth-of-field.mjs";
+import { NotesDot, StepBadge } from "./StepBadge.mjs";
+import { css } from "@likec4/styles/css";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RichText } from "@likec4/core";
+import { m } from "motion/react";
+import { HStack, styled } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+
+//#region src/likec4diagram/ui/sequence-outline/StepRow.tsx
+/** A step the walkthrough is not on: one line, clickable, recessed with its level. */
+function StepRow({ node, recession, active }) {
+	const diagram = useDiagram();
+	if (active) return /* @__PURE__ */ jsx(ActiveStepCard, { node });
+	const { stepnum, source, target, label, notes } = node.nodeProps;
+	return /* @__PURE__ */ jsxs(m.div, {
+		layout: true,
+		className: hstack(css.raw(recessed, {
+			alignItems: "baseline",
+			gap: "2",
+			width: "100%",
+			paddingInline: "1.5",
+			paddingBlock: "1.5",
+			rounded: "sm",
+			cursor: "pointer",
+			color: "text",
+			userSelect: "none",
+			_hover: { background: "[var(--colors-color-palette-hovered, {colors.surface.sunken})]" }
+		})),
+		style: { ["--seq-r"]: recession },
+		onClick: () => diagram.walkthroughStep({ step: node.value }),
+		children: [
+			/* @__PURE__ */ jsx(StepBadge, { children: stepnum }),
+			/* @__PURE__ */ jsx(styled.span, {
+				css: {
+					flex: "1",
+					minWidth: "0",
+					fontSize: "xs",
+					lineHeight: "[18px]",
+					whiteSpace: "pre-line",
+					overflowWrap: "anywhere"
+				},
+				children: label ?? `${source} → ${target}`
+			}),
+			notes && /* @__PURE__ */ jsx(NotesDot, {})
+		]
+	});
+}
+/** The step you are on: lifted onto its own surface, with room for its notes. */
+const ActiveStepCard = ({ node }) => {
+	const ref = useRef(null);
+	const { stepnum, source, target, label, notes } = node.nodeProps;
+	return /* @__PURE__ */ jsxs(m.div, {
+		ref,
+		layoutId: SEQ_CARD_LAYOUT_ID,
+		layout: "position",
+		layoutAnchor: false,
+		layoutCrossfade: false,
+		transition: {
+			...SEQ_TRANSITION,
+			when: "beforeChildren"
+		},
+		onLayoutAnimationComplete: () => {
+			ref.current?.scrollIntoView({ block: "nearest" });
+		},
+		className: css({
+			marginBlock: "2",
+			paddingInline: "3",
+			paddingBlock: "2.5",
+			rounded: "md",
+			background: "[var(--colors-color-palette-label, {colors.surface.sunken})]",
+			boxShadow: "md",
+			cursor: "default",
+			scrollMarginTop: "10",
+			scrollMarginBottom: "16"
+		}),
+		children: [
+			/* @__PURE__ */ jsxs(m.div, {
+				layout: "position",
+				className: hstack({
+					alignItems: "baseline",
+					gap: "2",
+					width: "100%"
+				}),
+				children: [/* @__PURE__ */ jsx(StepBadge, {
+					active: true,
+					children: stepnum
+				}), /* @__PURE__ */ jsx(styled.span, {
+					as: m.div,
+					css: {
+						flex: "1",
+						minWidth: "0",
+						fontSize: "md",
+						fontWeight: "medium",
+						lineHeight: "[20px]",
+						color: "text",
+						whiteSpace: "pre-line",
+						overflowWrap: "anywhere",
+						textWrap: "balance"
+					},
+					children: label ?? `${source} → ${target}`
+				})]
+			}),
+			label && /* @__PURE__ */ jsxs(m.div, {
+				layout: "y",
+				initial: {
+					visibility: "hidden",
+					overflow: "hidden",
+					height: 0
+				},
+				animate: {
+					visibility: "visible",
+					overflow: "visible",
+					height: "auto"
+				},
+				exit: {
+					visibility: "hidden",
+					overflow: "hidden",
+					height: 0
+				},
+				transition: SEQ_TRANSITION,
+				className: css({
+					marginTop: "1",
+					marginLeft: "[30px]",
+					textStyle: "dimmed.xxs",
+					fontSize: "[8px]",
+					color: "[color-mix(in srgb, {colors.text}, transparent 20%)]",
+					fontWeight: "medium",
+					letterSpacing: "caps.sm",
+					textTransform: "uppercase",
+					userSelect: "none"
+				}),
+				children: [
+					source,
+					/* @__PURE__ */ jsx(IconArrowRight, {
+						size: 10,
+						className: css({
+							display: "inline",
+							verticalAlign: "[-0.15em]",
+							marginInline: "1"
+						})
+					}),
+					target
+				]
+			}, "label"),
+			notes && /* @__PURE__ */ jsx(m.div, {
+				layout: true,
+				initial: {
+					visibility: "hidden",
+					overflow: "hidden",
+					height: 10
+				},
+				animate: {
+					visibility: "visible",
+					overflow: "visible",
+					height: "auto"
+				},
+				exit: {
+					visibility: "hidden",
+					overflow: "hidden",
+					height: 10
+				},
+				transition: SEQ_TRANSITION,
+				children: /* @__PURE__ */ jsx(Markdown, {
+					value: RichText.from(notes),
+					fontSize: "md",
+					textScale: .95,
+					className: css({
+						marginTop: "2.5",
+						paddingTop: "2.5",
+						paddingBottom: "2",
+						borderTop: "subtle",
+						color: "text"
+					}),
+					style: {
+						borderTopColor: "oklch(from var(--_border-color) l c h / 25%)",
+						["--_border-color"]: "var(--colors-color-palette-border, var(--colors-border-subtle))"
+					}
+				})
+			}, "Markdown")
+		]
+	});
+};
+
+//#endregion
+export { StepRow };

package/dist/likec4diagram/ui/sequence-outline/StoreProvider.mjs

@@ -0,0 +1,96 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { roundDpr } from "../../../utils/roundDpr.mjs";
+import { selectDiagramContext, useDiagramSelector } from "../../../hooks/safeContext.mjs";
+import { buildTree } from "./tree.mjs";
+import { createContext, use, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { shallowEqual } from "fast-equals";
+import { dynamicViewFlow, flowAncestors, invariant, isDynamicViewWithFlow } from "@likec4/core";
+import { extractViewTitleFromPath } from "@likec4/core/model";
+import { createStoreLogic, useSelector, useStore } from "@xstate/store-react";
+
+//#region src/likec4diagram/ui/sequence-outline/StoreProvider.tsx
+const selectFlow = selectDiagramContext((s) => {
+	const title = extractViewTitleFromPath(s.view.title ?? "Untitled");
+	const description = s.view.description;
+	const activeStep = s.activeWalkthrough?.stepId ?? null;
+	if (activeStep) {
+		invariant(isDynamicViewWithFlow(s.view), "View is not a dynamic view with flow");
+		const flow = dynamicViewFlow(s.view);
+		const { prev, next } = flow.prevAndNext(activeStep, ({ id }) => s.collapsedSequenceFlows[id] ?? false);
+		return {
+			flow,
+			activeStep,
+			stepNum: s.xyedges.find((e) => e.data.id === activeStep)?.data.stepnum ?? 1,
+			title,
+			description,
+			outlinePanelWidth: s.activeWalkthrough?.outlinePanelWidth ?? 0,
+			collapsed: s.collapsedSequenceFlows,
+			prev,
+			next
+		};
+	}
+	return {
+		flow: null,
+		activeStep: null,
+		title,
+		description
+	};
+});
+const logic = createStoreLogic({
+	context: ({ input }) => ({
+		...input,
+		ancestors: flowAncestors(input.activeStep),
+		outlineTree: buildTree(input.flow)
+	}),
+	on: { updateInput: (context, { input }) => ({
+		...input,
+		ancestors: input.activeStep == context.activeStep ? context.ancestors : flowAncestors(input.activeStep),
+		outlineTree: input.flow === context.flow ? context.outlineTree : buildTree(input.flow)
+	}) },
+	selectors: {
+		outlinePanelWidth: (context) => roundDpr(context.outlinePanelWidth),
+		activeDepth: (context) => context.ancestors.length,
+		collapsed: (context) => context.collapsed,
+		outlineTree: (context) => context.outlineTree
+	}
+});
+function StoreProvider({ children }) {
+	const input = useDiagramSelector(selectFlow);
+	if (!input.flow) return null;
+	return /* @__PURE__ */ jsx(StoreGuard, {
+		input,
+		children
+	});
+}
+const Context = createContext({});
+function StoreGuard({ children, input }) {
+	const store = useStore(logic, { input });
+	useEffect(() => {
+		store.trigger.updateInput({ input });
+	}, [input]);
+	useEffect(() => {
+		return store.inspect((event) => {
+			console.log("event", event);
+		}).unsubscribe;
+	}, [store]);
+	return /* @__PURE__ */ jsx(Context, {
+		value: store,
+		children
+	});
+}
+function useSelectContext(selector) {
+	const store = use(Context);
+	return useSelector(store, (s) => selector(s.context), shallowEqual);
+}
+function useIsCollapsed(step) {
+	const store = use(Context);
+	return useSelector(store.selectors.collapsed, (collapsed) => collapsed[step] ?? false);
+}
+function useOutlinePanelWidth() {
+	const store = use(Context);
+	return useSelector(store.selectors.outlinePanelWidth);
+}
+
+//#endregion
+export { StoreProvider, useIsCollapsed, useOutlinePanelWidth, useSelectContext };

package/dist/likec4diagram/ui/sequence-outline/depth-of-field.mjs

@@ -0,0 +1,79 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { css } from "@likec4/styles/css";
+
+//#region src/likec4diagram/ui/sequence-outline/depth-of-field.ts
+/**
+* The outline reads as a stack of planes: the nesting level the walkthrough is standing on
+* renders at full strength, and every level *above* it steps back in contrast, saturation
+* and surface tone. `--seq-r` is that distance (0 = you are here, capped at {@link MAX_RECESSION}).
+*
+* The recession is relative, not absolute — it is recomputed as the walkthrough enters and
+* leaves a fragment, so stepping back out to the root flattens the panel again.
+*/
+const MAX_RECESSION = 3;
+/** Distance, in nesting levels, between a level and the one the walkthrough stands on. */
+const recessionOf = (depth, activeDepth) => Math.min(MAX_RECESSION, Math.max(0, activeDepth - depth));
+/** Per-level falloff, applied once per step of `--seq-r`. */
+const OPACITY_STEP = .26;
+const SATURATION_STEP = .286;
+/**
+* Depth is mixed toward black rather than toward the canvas token: in dark mode canvas is
+* darker than the panel, but in light mode the two are both white, so only a neutral shade
+* recedes in both schemes.
+*/
+const SHADE_STEP = "4.55%";
+/** Panel surface, shaded by the current `--seq-r`. */
+const shadedPanelBg = css.raw({ background: `[color-mix(in srgb, {colors.likec4.panel.bg}, #000 calc(var(--seq-r, 0) * ${SHADE_STEP}))]` });
+/** A row that has stepped back: lower contrast and saturation, restored on hover. */
+const recessed = css.raw({
+	opacity: `[calc(1 - var(--seq-r, 0) * ${OPACITY_STEP})]`,
+	filter: `[saturate(calc(1 - var(--seq-r, 0) * ${SATURATION_STEP}))]`,
+	_hover: {
+		opacity: "1",
+		filter: "[none]"
+	}
+});
+/** A nesting level, as a full-bleed tonal band. Tone only — no border, no radius, no card. */
+const levelBand = css.raw(shadedPanelBg, {
+	position: "relative",
+	marginInline: "-2",
+	paddingInline: "2",
+	marginBlock: "0.5",
+	transitionProperty: "background",
+	transition: "slow"
+});
+/**
+* A fragment nested *below* the level you are standing on: structure, not colour.
+*
+* Fills do not survive nesting — five levels of translucent fragment tint compound into mud,
+* and a fragment you are not inside has no claim on the eye. Depth is carried by an indent and
+* a hairline in the fragment's own colour; the tag pill and icon already say which kind it is.
+*/
+const nestedBand = css.raw({
+	background: "transparent",
+	marginInline: "0",
+	marginBlock: "0.5",
+	paddingInline: "0",
+	paddingLeft: "2",
+	borderLeft: "default",
+	borderLeftColor: "colorPalette.border",
+	rounded: "0"
+});
+/** The fragment you are standing inside, framed the way the canvas frames it. */
+const activeFrame = css.raw({
+	background: "[linear-gradient(var(--seq-frame-bg), var(--seq-frame-bg)), {colors.likec4.panel.bg}]",
+	paddingInline: "3",
+	paddingBlock: "1.5",
+	marginBlock: "0"
+});
+/** Hairline drawn around the fragment you are standing inside. */
+const activeFrameBorder = css({
+	position: "absolute",
+	inset: "[0 10px 0 4px]",
+	border: "[1px solid {colors.colorPalette.border}]",
+	rounded: "md",
+	pointerEvents: "none"
+});
+
+//#endregion
+export { activeFrame, activeFrameBorder, levelBand, nestedBand, recessed, recessionOf, shadedPanelBg };

package/dist/likec4diagram/ui/sequence-outline/motion.mjs

@@ -0,0 +1,22 @@
+//#region src/likec4diagram/ui/sequence-outline/motion.ts
+/**
+* Shared-layout transitions. The frame, the card and the badge each carry a `layoutId`, so
+* walking a step moves one element rather than swapping two — the frame travels to the branch
+* you entered and the card slides to the step you landed on. House easing, one exponential
+* ease-out; `MotionConfig` already drops these under reduced motion and reduced graphics.
+*/
+const SEQ_TRANSITION = {
+	duration: .24,
+	ease: [
+		.2,
+		.8,
+		.2,
+		1
+	]
+};
+const SEQ_FRAME_LAYOUT_ID = "likec4-seq-active-frame";
+const SEQ_CARD_LAYOUT_ID = "likec4-seq-active-card";
+const SEQ_BADGE_LAYOUT_ID = "likec4-seq-active-badge";
+
+//#endregion
+export { SEQ_BADGE_LAYOUT_ID, SEQ_CARD_LAYOUT_ID, SEQ_FRAME_LAYOUT_ID, SEQ_TRANSITION };

package/dist/likec4diagram/ui/sequence-outline/presentation.mjs

@@ -0,0 +1,87 @@
+import IconAlertTriangle from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.mjs";
+import IconArrowFork from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowFork.mjs";
+import IconArrowGuide from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowGuide.mjs";
+import IconCornerDownRight from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCornerDownRight.mjs";
+import IconPlayerStop from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStop.mjs";
+import IconRepeat from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRepeat.mjs";
+import { css } from "@likec4/styles/css";
+
+//#region src/likec4diagram/ui/sequence-outline/presentation.ts
+/**
+* PandaCSS `colorPalette` classes for each sub-flow palette.
+* Declared as literals so the static analyzer can extract them.
+*/
+const palette = {
+	loop: css({ colorPalette: "subflow.loop" }),
+	opt: css({ colorPalette: "subflow.opt" }),
+	par: css({ colorPalette: "subflow.par" }),
+	break: css({ colorPalette: "subflow.break" }),
+	alt: css({ colorPalette: "subflow.alt" }),
+	try: css({ colorPalette: "subflow.try" })
+};
+/** How each sub-flow operator is labelled and coloured in the outline. */
+const flowPresentation = {
+	loop: {
+		paletteClass: palette.loop,
+		tag: "loop",
+		Icon: IconRepeat
+	},
+	opt: {
+		paletteClass: palette.opt,
+		tag: "opt",
+		Icon: IconArrowGuide
+	},
+	par: {
+		paletteClass: palette.par,
+		tag: "par",
+		Icon: IconArrowFork
+	},
+	break: {
+		paletteClass: palette.break,
+		tag: "break",
+		Icon: IconPlayerStop
+	},
+	alt: {
+		paletteClass: palette.alt,
+		tag: "alt",
+		Icon: IconArrowFork
+	},
+	"alt-when": {
+		paletteClass: palette.alt,
+		tag: "when",
+		Icon: IconCornerDownRight
+	},
+	"alt-else": {
+		paletteClass: palette.alt,
+		tag: "else",
+		Icon: IconCornerDownRight
+	},
+	"alt-if": {
+		paletteClass: palette.alt,
+		tag: "if",
+		Icon: IconCornerDownRight
+	},
+	try: {
+		paletteClass: palette.try,
+		tag: "try",
+		Icon: IconAlertTriangle
+	},
+	"try-block": {
+		paletteClass: palette.try,
+		tag: "block",
+		Icon: IconCornerDownRight
+	},
+	"try-catch": {
+		paletteClass: palette.break,
+		tag: "catch",
+		Icon: IconCornerDownRight
+	},
+	"try-finally": {
+		paletteClass: palette.break,
+		tag: "finally",
+		Icon: IconCornerDownRight
+	}
+};
+
+//#endregion
+export { flowPresentation };

package/dist/likec4diagram/ui/sequence-outline/tree.mjs

@@ -0,0 +1,69 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { isOutlineFlowNode } from "./types.mjs";
+import { useMemo } from "react";
+
+//#region src/likec4diagram/ui/sequence-outline/tree.ts
+/** Flattens the walkthrough flow into the nested step/sub-flow tree the outline renders. */
+function buildTree(flow) {
+	const tree = [];
+	let currentFlow = tree;
+	flow.walk({
+		step: ({ step, stepnum, source, target, edge }) => {
+			currentFlow.push({
+				label: edge.label ?? `${source.title} → ${target.title}`,
+				value: step,
+				nodeProps: {
+					type: "step",
+					stepnum: stepnum.global,
+					source: source.title,
+					target: target.title,
+					label: edge.label,
+					notes: edge.notes ?? null,
+					edge
+				}
+			});
+		},
+		subflow: ({ subflow }) => {
+			const node = {
+				label: subflow.title ?? subflow._type,
+				value: subflow.id,
+				nodeProps: {
+					type: subflow._type,
+					title: subflow.title
+				},
+				children: []
+			};
+			const parent = currentFlow;
+			parent.push(node);
+			currentFlow = node.children;
+			return () => {
+				currentFlow = parent;
+			};
+		}
+	});
+	return tree;
+}
+/** The first step inside a fragment — where the breadcrumb jumps to. */
+function firstStepOf(nodes) {
+	for (const node of nodes) if (isOutlineFlowNode(node)) {
+		const found = firstStepOf(node.children);
+		if (found) return found;
+	} else return node.value;
+	return null;
+}
+/** The chain of sub-flows the active step is nested inside, outermost first. */
+function collectTrail(nodes, ancestors) {
+	const trail = [];
+	const walk = (list) => {
+		for (const node of list) if (isOutlineFlowNode(node) && ancestors.includes(node.value)) {
+			trail.push(node);
+			walk(node.children);
+			return;
+		}
+	};
+	walk(nodes);
+	return trail;
+}
+
+//#endregion
+export { buildTree, collectTrail, firstStepOf };

package/dist/likec4diagram/ui/sequence-outline/types.mjs

@@ -0,0 +1,14 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+
+//#region src/likec4diagram/ui/sequence-outline/types.ts
+/**
+* Type guard narrowing a tree node to a sub-flow node.
+* (The discriminant lives on the nested `nodeProps.type`, so an explicit guard
+* is needed for reliable narrowing.)
+*/
+function isOutlineFlowNode(node) {
+	return node.nodeProps.type !== "step";
+}
+
+//#endregion
+export { isOutlineFlowNode };