@likec4/diagram 1.58.0 → 1.59.0

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

@@ -0,0 +1,519 @@
+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 { 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.
+*/
+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 });
+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
+			})
+		})
+	}) });
+});
+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)),
+		children: [
+			/* @__PURE__ */ jsx(StepNum, { children: stepnum }),
+			/* @__PURE__ */ jsx(IconArrowRight, {
+				size: 13,
+				className: css({
+					flex: "none",
+					color: "text.dimmed"
+				})
+			}),
+			label ? /* @__PURE__ */ jsx(LabelSpan, { children: label }) : /* @__PURE__ */ jsxs(HStack, {
+				css: {
+					gap: "1",
+					minWidth: "0",
+					flex: "1"
+				},
+				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",
+			cursor: "default",
+			marginBlockStart: "1",
+			marginBlockEnd: "2",
+			paddingInline: "4",
+			paddingBlock: "2"
+		}),
+		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 })
+		]
+	});
+};
+//#endregion
+export { SequenceOutlinePanel };

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

@@ -0,0 +1,36 @@
+import { DynamicViewFlow, scalar, StepPath } from '@likec4/core';
+import { TreeNodeData } from '@mantine/core';
+import { DiagramContext } from '../../state/types';
+export interface OutlineTreeNodeStep extends TreeNodeData {
+    readonly value: StepPath;
+    readonly nodeProps: Readonly<{
+        readonly type: 'step';
+        /** Global step number (1-based) across all flows */
+        readonly stepnum: number;
+        /** Title of the source actor */
+        readonly source: string;
+        /** Title of the target actor */
+        readonly target: string;
+        /** Relationship label, if any */
+        readonly label: string | null;
+        readonly notes: scalar.MarkdownOrString | null;
+    }>;
+}
+export interface OutlineTreeNodeFlow extends TreeNodeData {
+    readonly value: StepPath;
+    readonly nodeProps: Readonly<{
+        readonly type: DynamicViewFlow.SubFlowType;
+        /** Friendly title of the sub-flow, if defined */
+        readonly title: string | undefined;
+    }>;
+    children: OutlineTreeNodeData[];
+}
+export type OutlineTreeNodeData = OutlineTreeNodeStep | OutlineTreeNodeFlow;
+export type OutlineTreeNodes = OutlineTreeNodeData[];
+/**
+ * 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.)
+ */
+export declare function isOutlineFlowNode(node: OutlineTreeNodeData): node is OutlineTreeNodeFlow;
+export declare function useTreeData(flow: DynamicViewFlow, collapsed: DiagramContext['collapsedSequenceFlows']): OutlineTreeNodes;

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

@@ -0,0 +1,55 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { useMemo } from "react";
+import "@likec4/core";
+//#region src/likec4diagram/ui/sequence-outline/state.ts
+function buildTree(flow, collapsedFlows) {
+	const tree = [];
+	let currentFlow = tree;
+	let isCollapsed = false;
+	flow.walk({
+		step: ({ step, stepnum, source, target, edge }) => {
+			if (isCollapsed) return;
+			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
+				}
+			});
+		},
+		subflow: ({ subflow }) => {
+			if (collapsedFlows[subflow.id]) {
+				isCollapsed = true;
+				return () => {
+					isCollapsed = false;
+				};
+			}
+			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;
+}
+function useTreeData(flow, collapsed) {
+	return useMemo(() => buildTree(flow, collapsed), [flow, collapsed]);
+}
+//#endregion
+export { useTreeData };

package/dist/likec4diagram/xyflow-diagram/diagram-view.d.ts

@@ -9,7 +9,7 @@ import { Types } from '../types';
  * @returns An object containing an array of XY flow nodes and an array of XY flow edges.
  */
 export declare function diagramToXY(opts: {
-    view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '_type' | 'autoLayout'>;
+    view: Pick<DiagramView, 'id' | 'nodes' | 'bounds' | 'edges' | '_type' | 'autoLayout'>;
     currentViewId: ViewId | undefined;
     where: WhereOperator | null;
 }): {