@likec4/diagram 1.59.2 → 1.59.4

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

@@ -1,539 +1,63 @@
 import "../../../_virtual/_rolldown/runtime.js";
-import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../../hooks/safeContext.js";
-import { useOnDiagramEvent } from "../../../hooks/useDiagram.js";
-import { Markdown } from "../../../base-primitives/Markdown.js";
 import { PortalToContainer } from "../../../components/PortalToContainer.js";
-import { useTreeData } from "./state.js";
-import { css, cx } from "@likec4/styles/css";
-import { IconAlertTriangle, IconArrowFork, IconArrowGuide, IconArrowRight, IconChevronRight, IconCornerDownRight, IconDirectionSignFilled, IconListTree, IconPlayerSkipBackFilled, IconPlayerSkipForwardFilled, IconPlayerStop, IconRepeat } from "@tabler/icons-react";
-import { memo, useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { mapToObj, only } from "remeda";
-import { RichText, dynamicViewFlow, flowAncestors, hasProp, isDynamicView } from "@likec4/core";
-import { ActionIcon, Button, CloseButton, ScrollArea, Spoiler, Tooltip, Tree, useTree } from "@mantine/core";
-import { AnimatePresence, m } from "motion/react";
-import { Box as Box$1, HStack, Txt, VStack, styled } from "@likec4/styles/jsx";
+import { SEQ_TRANSITION } from "./motion.js";
+import { StoreProvider, useOutlinePanelWidth } from "./StoreProvider.js";
+import { OutlineBody } from "./OutlineBody.js";
+import { OutlineHeader } from "./OutlineHeader.js";
+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";
-import { extractViewTitleFromPath } from "@likec4/core/model";
 //#region src/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.tsx
 /**
-* PandaCSS `colorPalette` classes for each sub-flow palette.
-* Declared as literals so the static analyzer can extract them.
+* 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.
 */
-var 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" })
-};
-var 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
-	}
-};
-var SectionLabel = styled("div", { base: {
-	textStyle: "dimmed.xs",
-	fontWeight: "semibold",
-	letterSpacing: "wider",
-	textTransform: "uppercase",
-	userSelect: "none"
-} });
-/** Numeric step badge (e.g. `12`). */
-var StepNum = styled("div", { base: {
-	flex: "none",
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "center",
-	minWidth: "22px",
-	height: "18px",
-	paddingInline: "1",
-	rounded: "sm",
-	bg: "surface.sunken",
-	color: "text.dimmed",
-	fontSize: "[10px]",
-	fontWeight: "bold",
-	fontVariantNumeric: "tabular-nums",
-	userSelect: "none"
-} });
-/** Small pill tag for the sub-flow operator (`loop`, `par`, `try`, …). */
-var FlowTag = styled("div", { base: {
-	flex: "none",
-	paddingInline: "1.5",
-	paddingBlock: "0.5",
-	rounded: "sm",
-	bg: "colorPalette.label",
-	color: "colorPalette.text",
-	fontSize: "[9px]",
-	fontWeight: "bold",
-	lineHeight: "xs",
-	letterSpacing: "tight",
-	textTransform: "uppercase",
-	userSelect: "none"
-} });
-var rowBase = css.raw({
-	display: "flex",
-	alignItems: "center",
-	gap: "2",
-	width: "100%",
-	paddingInline: "1.5",
-	paddingBlock: "1",
-	rounded: "md",
-	cursor: "pointer",
-	color: "text",
-	userSelect: "none",
-	transition: "background-color 120ms ease",
-	_hover: { bg: "surface.sunken/60" },
-	"&[data-selected=\"true\"]": {
-		bg: "mantine.primary.light",
-		color: "mantine.primary.lightColor"
-	}
-});
-var labelText = css.raw({
-	flex: "1",
-	minWidth: "0",
-	fontSize: "xs",
-	whiteSpace: "nowrap",
-	overflow: "hidden",
-	textOverflow: "ellipsis"
-});
-var LabelSpan = styled("span", { base: labelText });
-/**
-* Height of the leading step badge; also the line-height of the first label line
-* so that a multiline label keeps its first line aligned with the badge/arrow.
-*/
-var rowLeadingHeight = "18px";
-/** Groups the step badge and arrow so they stay centered against the first label line. */
-var leadingIcons = css.raw({
-	flex: "none",
-	display: "flex",
-	alignItems: "center",
-	gap: "2",
-	height: rowLeadingHeight
-});
-var MultilineLabelSpan = styled("span", { base: css.raw({
-	flex: "1",
-	minWidth: "0",
-	fontSize: "xs",
-	lineHeight: rowLeadingHeight,
-	whiteSpace: "pre-line",
-	overflowWrap: "anywhere"
-}) });
-var selectFlow = selectDiagramContext((s) => {
-	const title = extractViewTitleFromPath(s.view.title ?? "Untitled");
-	const description = s.view.description;
-	const activeStep = s.activeWalkthrough?.stepId ?? null;
-	if (activeStep) return {
-		flow: isDynamicView(s.view) && hasProp(s.view, "flow") ? dynamicViewFlow(s.view) : null,
-		activeStep,
-		title,
-		description,
-		outlinePanelWidth: s.activeWalkthrough?.outlinePanelWidth ?? 0,
-		collapsed: s.collapsedSequenceFlows
-	};
-	return {
-		flow: null,
-		activeStep: null,
-		title,
-		description
-	};
-});
 var SequenceOutlinePanel = memo(() => {
-	const props = useDiagramSelector(selectFlow);
-	return /* @__PURE__ */ jsx(PortalToContainer, { children: /* @__PURE__ */ jsx(AnimatePresence, {
-		propagate: true,
-		children: props.activeStep && props.flow && /* @__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: props.outlinePanelWidth },
-			initial: {
-				opacity: .5,
-				translateX: -40
-			},
-			animate: {
-				opacity: 1,
-				translateX: 0
-			},
-			exit: {
-				opacity: 0,
-				translateX: -props.outlinePanelWidth
-			},
-			children: /* @__PURE__ */ jsx(SequenceOutlinePanelBody, {
-				title: props.title,
-				description: props.description,
-				activeStep: props.activeStep,
-				flow: props.flow,
-				collapsed: props.collapsed
-			})
-		})
-	}) });
+	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";
-function SequenceOutlinePanelBody(props) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OutlineHeader, {
-		title: props.title,
-		flow: props.flow,
-		description: props.description
-	}), /* @__PURE__ */ jsx(OutlineBody, {
-		activeStep: props.activeStep,
-		flow: props.flow,
-		collapsed: props.collapsed
-	})] });
-}
-var OutlineHeader = ({ title, flow, description }) => {
-	const diagram = useDiagram();
-	const stepCount = flow.stepsCount;
-	return /* @__PURE__ */ jsxs(VStack, {
-		css: {
-			gap: "2.5",
-			width: "100%",
-			paddingInline: "2.5",
-			paddingBlock: "2",
-			borderBottom: "1px solid {colors.likec4.panel.border}"
-		},
-		children: [/* @__PURE__ */ jsxs(HStack, {
-			css: {
-				gap: "2.5",
-				alignItems: "center",
-				width: "100%",
-				padding: "0"
-			},
-			children: [
-				/* @__PURE__ */ jsx(Box$1, {
-					css: {
-						flex: "none",
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						boxSize: "20px",
-						rounded: "sm",
-						colorPalette: "subflow.loop",
-						bg: "colorPalette.label",
-						color: "colorPalette.text"
-					},
-					children: /* @__PURE__ */ jsx(IconDirectionSignFilled, { size: 14 })
-				}),
-				/* @__PURE__ */ jsxs(VStack, {
-					css: {
-						gap: "0",
-						alignItems: "stretch",
-						flex: "1",
-						minWidth: "0"
-					},
-					children: [/* @__PURE__ */ jsx(styled.div, {
-						css: {
-							fontSize: "sm",
-							fontWeight: "semibold",
-							color: "text",
-							whiteSpace: "nowrap",
-							overflow: "hidden",
-							textOverflow: "ellipsis"
-						},
-						children: title ?? "Sequence"
-					}), /* @__PURE__ */ jsxs(Txt, {
-						size: "xxs",
-						dimmed: true,
-						noUserSelect: true,
-						children: [
-							stepCount,
-							" ",
-							stepCount === 1 ? "step" : "steps"
-						]
-					})]
-				}),
-				/* @__PURE__ */ jsx(Box$1, {
-					css: {
-						flex: "none",
-						alignItems: "center",
-						justifyContent: "center"
-					},
-					children: /* @__PURE__ */ jsx(CloseButton, {
-						size: "sm",
-						onClick: () => diagram.stopWalkthrough()
-					})
-				})
-			]
-		}), description && /* @__PURE__ */ jsx(Spoiler, {
-			showLabel: /* @__PURE__ */ jsx(Txt, {
-				size: "xxs",
-				children: "show description"
-			}),
-			hideLabel: /* @__PURE__ */ jsx(Txt, {
-				size: "xxs",
-				children: "hide"
-			}),
-			maxHeight: 16,
-			children: /* @__PURE__ */ jsx(Markdown, {
-				value: RichText.from(description),
-				className: css({ color: "text.dimmed" }),
-				fontSize: "xxs"
-			})
-		})]
-	});
-};
-var OutlineBody = ({ activeStep, flow, collapsed }) => {
-	const diagram = useDiagram();
-	const treeData = useTreeData(flow, collapsed);
-	const initialExpandedState = useMemo(() => mapToObj(flowAncestors(activeStep), (id) => [id, true]), []);
-	const tree = useTree({
-		initialSelectedState: [activeStep],
-		initialExpandedState,
-		multiple: false,
-		onSelectedStateChange(selected) {
-			const step = only(selected);
-			if (step && flow.isStep(step)) diagram.walkthroughStep({ step });
-		}
-	});
-	useOnDiagramEvent("walkthroughStep", ({ stepId }) => {
-		if (!tree.selectedState.includes(stepId)) {
-			const ancestors = flowAncestors(stepId);
-			if (ancestors.length > 0) {
-				const expanded = { ...tree.expandedState };
-				for (const parent of ancestors) expanded[parent] = true;
-				tree.setExpandedState(expanded);
-			}
-			tree.setSelectedState([stepId]);
-		}
-	});
-	const allCollapsed = useMemo(() => Object.values(tree.expandedState).every((v) => !v), [tree.expandedState]);
-	const { prev, next } = flow.prevAndNext(activeStep, (flowId) => collapsed[flowId] ?? false);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(HStack, {
-		css: {
-			justifyContent: "space-between",
-			alignItems: "center",
-			width: "100%",
-			paddingInline: "2.5",
-			paddingTop: "2",
-			paddingBottom: "1"
-		},
-		children: [
-			/* @__PURE__ */ jsx(SectionLabel, {
-				flex: "1",
-				children: "Outline"
-			}),
-			/* @__PURE__ */ jsx(Tooltip, {
-				label: allCollapsed ? "Expand all" : "Collapse all",
-				fz: "xs",
-				openDelay: 500,
-				withinPortal: false,
-				children: /* @__PURE__ */ jsx(ActionIcon, {
-					tabIndex: -1,
-					variant: "subtle",
-					size: "sm",
-					onClick: () => allCollapsed ? tree.expandAllNodes() : tree.collapseAllNodes(),
-					children: /* @__PURE__ */ jsx(IconListTree, { size: 14 })
-				})
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				tabIndex: -1,
-				size: "compact-xs",
-				variant: "light",
-				className: css({ fontSize: "xxs" }),
-				leftSection: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, { size: 10 }),
-				onClick: () => prev && diagram.walkthroughStep({ step: prev }),
-				disabled: !prev,
-				children: "Back"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				tabIndex: -1,
-				size: "compact-xs",
-				variant: "light",
-				className: css({ fontSize: "xxs" }),
-				rightSection: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, { size: 10 }),
-				onClick: () => next && diagram.walkthroughStep({ step: next }),
-				disabled: !next,
-				children: "Next"
-			})
-		]
-	}), /* @__PURE__ */ jsx(ScrollArea, {
-		type: "auto",
-		overscrollBehavior: "contain",
-		className: css({
-			flex: "1",
-			width: "100%",
-			minHeight: "0"
-		}),
-		children: /* @__PURE__ */ jsx(Tree, {
-			levelOffset: "var(--spacing-2\\.5)",
-			data: treeData,
-			tree,
-			selectOnClick: true,
-			classNames: { root: css({
-				paddingInline: "2",
-				paddingBottom: "3"
-			}) },
-			styles: { node: { paddingInlineStart: "var(--label-offset)" } },
-			renderNode: renderTreeNode
-		})
-	})] });
-};
-var renderTreeNode = ((payload) => {
-	return payload.node.nodeProps.type === "step" ? /* @__PURE__ */ jsx(StepRow, { ...payload }) : /* @__PURE__ */ jsx(FlowRow, { ...payload });
-});
-var StepRow = ({ node, elementProps, selected }) => {
-	const { stepnum, source, target, label, notes } = node.nodeProps;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Box$1, {
-		...elementProps,
-		className: cx(elementProps.className, css(rowBase, { alignItems: "flex-start" })),
-		children: [/* @__PURE__ */ jsxs(Box$1, {
-			className: css(leadingIcons),
-			children: [/* @__PURE__ */ jsx(StepNum, { children: stepnum }), /* @__PURE__ */ jsx(IconArrowRight, {
-				size: 13,
-				className: css({
-					flex: "none",
-					color: "text.dimmed"
-				})
-			})]
-		}), label ? /* @__PURE__ */ jsx(MultilineLabelSpan, { children: label }) : /* @__PURE__ */ jsxs(HStack, {
-			css: {
-				gap: "1",
-				minWidth: "0",
-				flex: "1",
-				minHeight: rowLeadingHeight
-			},
-			children: [
-				/* @__PURE__ */ jsx(LabelSpan, {
-					css: {
-						flex: "none",
-						color: "text.dimmed"
-					},
-					children: source
-				}),
-				/* @__PURE__ */ jsx(IconArrowRight, {
-					size: 11,
-					className: css({
-						flex: "none",
-						color: "text.dimmed"
-					})
-				}),
-				/* @__PURE__ */ jsx(LabelSpan, { children: target })
-			]
-		})]
-	}), notes && /* @__PURE__ */ jsx(Markdown, {
-		value: RichText.from(notes),
-		fontSize: "sm",
-		textScale: .9,
-		className: css({
-			background: "surface.sunken",
-			border: "1px solid {colors.surface.sunken.border}",
-			rounded: "md",
+var 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",
-			marginBlockStart: "1",
-			marginBlockEnd: "2",
-			paddingInline: "4",
-			paddingBlock: "2"
+			overflow: "hidden"
 		}),
-		style: {
-			marginInlineStart: "calc(-1 * var(--label-offset))",
-			display: selected ? "block" : "none"
-		}
-	})] });
-};
-var FlowRow = ({ node, expanded, elementProps }) => {
-	const { type, title } = node.nodeProps;
-	const { paletteClass, tag, Icon } = flowPresentation[type];
-	return /* @__PURE__ */ jsxs(Box$1, {
-		...elementProps,
-		className: cx(elementProps.className, paletteClass, css(rowBase)),
-		children: [
-			/* @__PURE__ */ jsx(IconChevronRight, {
-				size: 14,
-				className: css({
-					flex: "none",
-					color: "text.dimmed",
-					transition: "transform 150ms ease",
-					"&[data-expanded=\"true\"]": { transform: "rotate(90deg)" }
-				}),
-				"data-expanded": expanded
-			}),
-			/* @__PURE__ */ jsx(Icon, {
-				size: 14,
-				className: css({
-					flex: "none",
-					color: "colorPalette.text"
-				})
-			}),
-			/* @__PURE__ */ jsx(styled.span, {
-				css: {
-					...labelText,
-					fontWeight: "medium"
-				},
-				children: title ?? tag
-			}),
-			/* @__PURE__ */ jsx(FlowTag, { children: tag })
-		]
+		style: { width: outlinePanelWidth },
+		initial: {
+			opacity: .5,
+			translateX: -40
+		},
+		animate: {
+			opacity: 1,
+			translateX: 0
+		},
+		exit: {
+			opacity: 0,
+			translateX: -40
+		},
+		children
 	});
 };
 //#endregion

package/dist/likec4diagram/ui/sequence-outline/StepBadge.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+/** The step number pill. The active one carries the shared `layoutId`, so it travels between steps. */
+export declare const StepBadge: ({ children, active }: {
+    children: ReactNode;
+    active?: boolean;
+}) => import("react").JSX.Element;
+/** Marks a step that carries notes, without letting the note reflow the list. */
+export declare const NotesDot: () => import("react").JSX.Element;

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

@@ -0,0 +1,52 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { SEQ_BADGE_LAYOUT_ID, SEQ_TRANSITION } from "./motion.js";
+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
+var 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"
+});
+var 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. */
+var 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. */
+var 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.d.ts

@@ -0,0 +1,7 @@
+import { OutlineTreeNodeStep } from './types';
+/** A step the walkthrough is not on: one line, clickable, recessed with its level. */
+export declare function StepRow({ node, recession, active }: {
+    active: boolean;
+    node: OutlineTreeNodeStep;
+    recession: number;
+}): import("react").JSX.Element;