@likec4/diagram 1.59.2 → 1.59.4

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,7 +1,6 @@
 import "../../../_virtual/_rolldown/runtime.js";
 import { useXYStore } from "../../../hooks/useXYFlow.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { useDiagramContext } from "../../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../../hooks/safeContext.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
 import { ElementShape } from "../../../base-primitives/element/ElementShape.js";
 import { card, container, elementNotation, icon, shapeBadge, tabPanel } from "./NotationPanel.css.js";
@@ -9,6 +8,7 @@ import { cx } from "@likec4/styles/css";
 import { IconArrowDownRight, IconHelpCircle } from "@tabler/icons-react";
 import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { deepEqual } from "fast-equals";
 import { ceil, isNonNullish } from "remeda";
 import { ActionIcon, Badge, Box, Card, Group, Paper, ScrollAreaAutosize, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, Tooltip } from "@mantine/core";
 import { AnimatePresence, m } from "motion/react";
@@ -81,13 +81,13 @@ var ElementNotation = ({ value }) => {
 		})
 	});
 };
-var selector = (s) => ({
+var selector = selectDiagramContext((s) => ({
 	id: s.view.id,
 	notations: s.view.notation?.nodes ?? []
-});
+}), deepEqual);
 var NotationPanel = memo(() => {
 	const height = useXYStore((s) => s.height);
-	const { id, notations } = useDiagramContext(selector);
+	const { id, notations } = useDiagramSelector(selector);
 	const [isCollapsed, setCollapsed] = useLocalStorage({
 		key: "notation-webview-collapsed",
 		defaultValue: true
@@ -111,13 +111,10 @@ var NotationPanel = memo(() => {
 		className: container,
 		children: /* @__PURE__ */ jsx(Tooltip, {
 			label: "Show notation",
-			color: "dark",
-			fz: "xs",
 			...portalProps,
 			children: /* @__PURE__ */ jsx(ActionIcon, {
 				size: "lg",
 				variant: "default",
-				color: "gray",
 				className: icon,
 				onClick: () => setCollapsed(false),
 				children: /* @__PURE__ */ jsx(IconHelpCircle, { stroke: 1.5 })
@@ -152,7 +149,10 @@ var NotationPanel = memo(() => {
 						variant: "subtle",
 						color: "gray",
 						ml: 2,
-						style: { alignSelf: "center" },
+						style: {
+							alignSelf: "center",
+							opacity: .7
+						},
 						onClick: () => setCollapsed(true),
 						children: /* @__PURE__ */ jsx(IconArrowDownRight, { stroke: 2 })
 					}),

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

@@ -0,0 +1,9 @@
+import { OutlineTreeNodes } from './types';
+/**
+ * Sticky "you are here" trail: the fragments the active step is nested inside.
+ * Each segment jumps the walkthrough to the first step of that fragment.
+ */
+export declare const ActiveTrail: ({ ancestors, tree }: {
+    ancestors: readonly string[];
+    tree: OutlineTreeNodes;
+}) => import("react").JSX.Element | null;

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

@@ -0,0 +1,81 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { flowPresentation } from "./presentation.js";
+import { collectTrail, firstStepOf } from "./tree.js";
+import { IconChevronRight } from "@tabler/icons-react";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HStack, styled } from "@likec4/styles/jsx";
+//#region src/likec4diagram/ui/sequence-outline/ActiveTrail.tsx
+/**
+* Sticky "you are here" trail: the fragments the active step is nested inside.
+* Each segment jumps the walkthrough to the first step of that fragment.
+*/
+var ActiveTrail = ({ ancestors, tree }) => {
+	const diagram = useDiagram();
+	const trail = collectTrail(tree, ancestors);
+	if (trail.length === 0) return null;
+	return /* @__PURE__ */ jsx(HStack, {
+		css: {
+			gap: "1",
+			flexWrap: "wrap",
+			marginBottom: "1.5",
+			paddingInline: "2.5",
+			paddingBlock: "1.5",
+			bg: "likec4.panel.bg",
+			borderBottom: "panel",
+			textStyle: "dimmed.xxs",
+			fontWeight: "semibold",
+			letterSpacing: "caps.sm",
+			textTransform: "uppercase",
+			userSelect: "none",
+			"& svg": {
+				flex: "none",
+				opacity: "[0.5]"
+			}
+		},
+		children: trail.map((node, i) => {
+			const { paletteClass, tag } = flowPresentation[node.nodeProps.type];
+			const label = node.nodeProps.title ? `${tag} ${node.nodeProps.title}` : tag;
+			const last = i === trail.length - 1;
+			const firstStep = firstStepOf(node.children);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(IconChevronRight, { size: 10 }), /* @__PURE__ */ jsx(styled.button, {
+				type: "button",
+				className: last ? paletteClass : void 0,
+				title: `Jump to the first step of ${label}`,
+				disabled: !firstStep,
+				onClick: () => firstStep && diagram.walkthroughStep({ step: firstStep }),
+				css: {
+					appearance: "none",
+					border: "none",
+					background: "transparent",
+					padding: "0",
+					font: "inherit",
+					letterSpacing: "[inherit]",
+					textTransform: "inherit",
+					cursor: "pointer",
+					rounded: "sm",
+					transitionProperty: "colors",
+					transition: "fast",
+					maxWidth: "[200px]",
+					truncate: true,
+					...last ? {
+						fontWeight: "extrabold",
+						color: "colorPalette.text"
+					} : {
+						color: "inherit",
+						_hover: { color: "text" }
+					},
+					_disabled: { cursor: "default" },
+					_focusVisible: {
+						outline: "[2px solid {colors.primary.border}]",
+						outlineOffset: "[2px]"
+					}
+				},
+				children: label
+			})] }, node.value);
+		})
+	});
+};
+//#endregion
+export { ActiveTrail };

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

@@ -0,0 +1,11 @@
+import { OutlineTreeNodeFlow } from './types';
+import { StyledComponent } from '@likec4/styles/types';
+export declare const FlowTag: StyledComponent<"div", {
+    dimmed?: boolean | undefined;
+}>;
+/** The header line of a sub-flow: its icon, title and operator tag. */
+export declare const FlowRow: ({ node, recession, isCollapsed }: {
+    node: OutlineTreeNodeFlow;
+    recession: number;
+    isCollapsed?: boolean;
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,70 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { flowPresentation } from "./presentation.js";
+import { recessed } from "./depth-of-field.js";
+import { css, cva } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { m } from "motion/react";
+import { styled } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+//#region src/likec4diagram/ui/sequence-outline/FlowRow.tsx
+/** Small pill tag for the sub-flow operator (`loop`, `par`, `try`, …). */
+var flowTagBase = cva({
+	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"
+	},
+	variants: { dimmed: { true: { opacity: "0.7" } } }
+});
+var FlowTag = styled("div", flowTagBase);
+/** The header line of a sub-flow: its icon, title and operator tag. */
+var FlowRow = ({ node, recession, isCollapsed }) => {
+	const { tag, Icon } = flowPresentation[node.nodeProps.type];
+	return /* @__PURE__ */ jsxs(m.div, {
+		layout: true,
+		className: hstack(css.raw(recessed, {
+			alignItems: "center",
+			gap: "1.5",
+			marginTop: "2",
+			marginBottom: "0.5",
+			paddingInline: "1.5",
+			paddingBlock: "0.5",
+			color: "text",
+			userSelect: "none"
+		}, isCollapsed ? { bg: "colorPalette.label" } : void 0)),
+		style: { ["--seq-r"]: recession },
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				size: 13,
+				className: css({
+					flex: "none",
+					color: "colorPalette.text"
+				})
+			}),
+			/* @__PURE__ */ jsx(styled.span, {
+				css: {
+					flex: "1",
+					minWidth: "0",
+					fontSize: "xs",
+					fontWeight: "medium",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				children: node.nodeProps.title ?? tag
+			}),
+			/* @__PURE__ */ jsx(FlowTag, { children: tag })
+		]
+	});
+};
+//#endregion
+export { FlowRow, FlowTag };

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

@@ -0,0 +1,2 @@
+/** Prev/next controls, the "you are here" trail, and the scrollable outline itself. */
+export declare const OutlineBody: () => import("react").JSX.Element;

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

@@ -0,0 +1,106 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { ActiveTrail } from "./ActiveTrail.js";
+import { recessionOf, shadedPanelBg } from "./depth-of-field.js";
+import { useSelectContext } from "./StoreProvider.js";
+import { OutlineNodes } from "./OutlineNodes.js";
+import { css } from "@likec4/styles/css";
+import { IconPlayerSkipBackFilled, IconPlayerSkipForwardFilled } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "remeda";
+import "@likec4/core";
+import { Button, ScrollArea } from "@mantine/core";
+import "motion/react";
+import { HStack, styled } from "@likec4/styles/jsx";
+//#region src/likec4diagram/ui/sequence-outline/OutlineBody.tsx
+/** Prev/next controls, the "you are here" trail, and the scrollable outline itself. */
+var OutlineBody = () => {
+	const { activeStep, next, prev, tree, ancestors } = useSelectContext((s) => ({
+		activeStep: s.activeStep,
+		prev: s.prev,
+		next: s.next,
+		tree: s.outlineTree,
+		ancestors: s.ancestors
+	}));
+	const diagram = useDiagram();
+	const activeDepth = ancestors.length;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(HStack, {
+			css: {
+				justifyContent: "space-between",
+				alignItems: "center",
+				width: "100%",
+				paddingInline: "2.5",
+				paddingTop: "2",
+				paddingBottom: "1"
+			},
+			children: [
+				/* @__PURE__ */ jsx(styled.div, {
+					css: {
+						flex: "1",
+						textStyle: "dimmed.xs",
+						fontWeight: "semibold",
+						letterSpacing: "caps.sm",
+						textTransform: "uppercase",
+						userSelect: "none"
+					},
+					children: "Outline"
+				}),
+				/* @__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(ActiveTrail, {
+			ancestors,
+			tree
+		}),
+		/* @__PURE__ */ jsx(ScrollArea, {
+			type: "auto",
+			overscrollBehavior: "contain",
+			scrollbars: "y",
+			offsetScrollbars: "present",
+			className: css({
+				flex: "1",
+				width: "100%",
+				minHeight: "0"
+			}),
+			classNames: { viewport: css(shadedPanelBg, {
+				paddingInline: "2",
+				paddingBottom: "4",
+				transitionProperty: "background",
+				transition: "slow"
+			}) },
+			style: {
+				["--seq-r"]: recessionOf(0, activeDepth),
+				["--seq-badge-bg"]: "var(--colors-primary-body)",
+				["--seq-badge-fg"]: "var(--colors-primary-text)"
+			},
+			children: /* @__PURE__ */ jsx(OutlineNodes, {
+				nodes: tree,
+				depth: 0,
+				activeStep,
+				activeDepth
+			})
+		})
+	] });
+};
+//#endregion
+export { OutlineBody };

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

@@ -0,0 +1,2 @@
+/** View title, walkthrough progress and the (optional) view description. */
+export declare const OutlineHeader: () => import("react").JSX.Element;

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

@@ -0,0 +1,140 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { Markdown } from "../../../base-primitives/Markdown.js";
+import { useSelectContext } from "./StoreProvider.js";
+import { css } from "@likec4/styles/css";
+import { IconDirectionSignFilled } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RichText } from "@likec4/core";
+import { CloseButton, Spoiler } from "@mantine/core";
+import { Box as Box$1, HStack, Txt, VStack, styled } from "@likec4/styles/jsx";
+//#region src/likec4diagram/ui/sequence-outline/OutlineHeader.tsx
+/** View title, walkthrough progress and the (optional) view description. */
+var OutlineHeader = () => {
+	const diagram = useDiagram();
+	const { title, description, stepnum, stepCount } = useSelectContext((s) => ({
+		title: s.title,
+		description: s.description,
+		stepnum: s.stepNum,
+		stepCount: s.flow.steps.length
+	}));
+	const pad = String(stepCount).length;
+	return /* @__PURE__ */ jsxs(VStack, {
+		css: {
+			gap: "2.5",
+			width: "100%",
+			paddingInline: "2.5",
+			paddingBlock: "2",
+			borderBottom: "panel"
+		},
+		children: [/* @__PURE__ */ jsxs(HStack, {
+			css: {
+				gap: "2.5",
+				alignItems: "flex-start",
+				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(styled.div, {
+							css: {
+								marginTop: "0.5",
+								textStyle: "dimmed.xxs",
+								fontWeight: "medium",
+								letterSpacing: "caps.sm",
+								textTransform: "uppercase",
+								fontVariantNumeric: "tabular-nums",
+								userSelect: "none"
+							},
+							children: [
+								"Step ",
+								String(stepnum).padStart(pad, "0"),
+								" / ",
+								stepCount
+							]
+						}),
+						/* @__PURE__ */ jsx(Box$1, {
+							css: {
+								height: "[2px]",
+								marginTop: "1.5",
+								rounded: "xs",
+								bg: "border.subtle",
+								overflow: "hidden"
+							},
+							children: /* @__PURE__ */ jsx(styled.div, {
+								css: {
+									height: "100%",
+									rounded: "xs",
+									bg: "primary.body",
+									transitionProperty: "[width]",
+									transition: "slow"
+								},
+								style: { width: `${stepnum / stepCount * 100}%` }
+							})
+						})
+					]
+				}),
+				/* @__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"
+			})
+		})]
+	});
+};
+//#endregion
+export { OutlineHeader };

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

@@ -0,0 +1,17 @@
+import { StepPath } from '@likec4/core';
+import { OutlineTreeNodes } from './types';
+export type OutlineNodesProps = {
+    nodes: OutlineTreeNodes;
+    /** Nesting level of `nodes`, 0 at the root of the outline. */
+    depth: number;
+    activeStep: StepPath;
+    /** Nesting level the walkthrough currently stands on. */
+    activeDepth: number;
+};
+/**
+ * Renders one nesting level of the outline, recursing into sub-flows.
+ *
+ * A fragment on the path to the active step is framed and tinted; every other level is
+ * pushed back by {@link recessionOf}.
+ */
+export declare function OutlineNodes(props: OutlineNodesProps): import("react").JSX.Element;

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

@@ -0,0 +1,83 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { SEQ_TRANSITION } from "./motion.js";
+import { flowPresentation } from "./presentation.js";
+import { isOutlineFlowNode } from "./types.js";
+import { activeFrame, activeFrameBorder, levelBand, nestedBand, recessionOf } from "./depth-of-field.js";
+import { FlowRow } from "./FlowRow.js";
+import { StepRow } from "./StepRow.js";
+import { useIsCollapsed, useSelectContext } from "./StoreProvider.js";
+import { css, cx } from "@likec4/styles/css";
+import { Activity } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { m } from "motion/react";
+import "@likec4/styles/jsx";
+//#region src/likec4diagram/ui/sequence-outline/OutlineNodes.tsx
+function renderNodes({ nodes, depth, activeStep, activeDepth }) {
+	const recession = recessionOf(depth, activeDepth);
+	return nodes.map((node) => {
+		if (!isOutlineFlowNode(node)) return /* @__PURE__ */ jsx(StepRow, {
+			node,
+			recession,
+			active: node.value === activeStep
+		}, node.value);
+		return /* @__PURE__ */ jsx(OutlineFlowNode, {
+			node,
+			depth,
+			activeStep,
+			activeDepth
+		}, node.value);
+	});
+}
+/**
+* Renders one nesting level of the outline, recursing into sub-flows.
+*
+* A fragment on the path to the active step is framed and tinted; every other level is
+* pushed back by {@link recessionOf}.
+*/
+function OutlineNodes(props) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: renderNodes(props) });
+}
+function OutlineFlowNode({ node, depth, activeStep, activeDepth }) {
+	const recession = recessionOf(depth, activeDepth);
+	const isCollapsed = useIsCollapsed(node.value);
+	const ancestorIndex = useSelectContext((s) => s.ancestors.indexOf(node.value));
+	const onPath = ancestorIndex >= 0;
+	const myDepth = onPath ? ancestorIndex + 1 : depth;
+	const isCurrentLevel = activeDepth === myDepth;
+	const { paletteClass } = flowPresentation[node.nodeProps.type];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(paletteClass, css(levelBand, isCurrentLevel && !onPath && nestedBand, isCurrentLevel && onPath && activeFrame)),
+		style: {
+			["--seq-r"]: recessionOf(myDepth, activeDepth),
+			["--seq-frame-bg"]: "var(--colors-color-palette)",
+			["--seq-badge-bg"]: "var(--colors-color-palette-text)",
+			["--seq-badge-fg"]: "var(--colors-likec4-panel-bg)"
+		},
+		children: [
+			isCurrentLevel && onPath && /* @__PURE__ */ jsx(m.div, {
+				layoutId: "likec4-seq-active-frame",
+				layout: "position",
+				layoutAnchor: false,
+				layoutCrossfade: false,
+				className: activeFrameBorder,
+				transition: SEQ_TRANSITION
+			}),
+			/* @__PURE__ */ jsx(FlowRow, {
+				node,
+				isCollapsed,
+				recession
+			}),
+			/* @__PURE__ */ jsx(Activity, {
+				mode: isCollapsed ? "hidden" : "visible",
+				children: /* @__PURE__ */ jsx(OutlineNodes, {
+					nodes: node.children,
+					depth: myDepth,
+					activeStep,
+					activeDepth
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { OutlineNodes };

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

@@ -1,2 +1,6 @@
 import { MemoExoticComponent } from 'react';
+/**
+ * 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.
+ */
 export declare const SequenceOutlinePanel: MemoExoticComponent<() => import("react").JSX.Element>;