@likec4/diagram 1.59.3 → 1.59.4

package/dist/likec4diagram/state/machine.state.ready.d.ts

@@ -1399,6 +1399,111 @@ export declare const ready: {
                 'key.arrow.down': {
                     actions: ActionFunction<Context, HotKeyEvent, Events, undefined, never, never, never, never, never>;
                 };
+                'sequence.flow.*': {
+                    actions: ActionFunction<Context, Events, Events, undefined, {
+                        src: "search";
+                        logic: SearchActorLogic;
+                        id: "search";
+                    } | {
+                        src: "hotkey";
+                        logic: HotkeyActorLogic;
+                        id: "hotkey";
+                    } | {
+                        src: "overlays";
+                        logic: OverlaysActorLogic;
+                        id: "overlays";
+                    } | {
+                        src: "mediaPrint";
+                        logic: MediaPrintActorLogic;
+                        id: "mediaPrint";
+                    } | {
+                        src: "editor";
+                        logic: EditorActorLogic;
+                        id: "editor";
+                    } | {
+                        src: "navigationPanel";
+                        logic: NavigationPanelActorLogic;
+                        id: "navigationPanel";
+                    }, never, {
+                        type: "isReady";
+                        params: unknown;
+                    } | {
+                        type: "enabled: Editor";
+                        params: unknown;
+                    } | {
+                        type: "enabled: FitView";
+                        params: unknown;
+                    } | {
+                        type: "enabled: FocusMode";
+                        params: unknown;
+                    } | {
+                        type: "enabled: Readonly";
+                        params: unknown;
+                    } | {
+                        type: "enabled: RelationshipDetails";
+                        params: unknown;
+                    } | {
+                        type: "enabled: Search";
+                        params: unknown;
+                    } | {
+                        type: "enabled: ElementDetails";
+                        params: unknown;
+                    } | {
+                        type: "enabled: OpenSource";
+                        params: unknown;
+                    } | {
+                        type: "enabled: DynamicViewWalkthrough";
+                        params: unknown;
+                    } | {
+                        type: "enabled: NavigationPanel";
+                        params: unknown;
+                    } | {
+                        type: "focus.node: autoUnfocus";
+                        params: unknown;
+                    } | {
+                        type: "enabled: Overlays";
+                        params: unknown;
+                    } | {
+                        type: "not readonly";
+                        params: unknown;
+                    } | {
+                        type: "is dynamic view";
+                        params: unknown;
+                    } | {
+                        type: "is dynamic view in sequence variant";
+                        params: unknown;
+                    } | {
+                        type: "is same view";
+                        params: unknown;
+                    } | {
+                        type: "is another view";
+                        params: unknown;
+                    } | {
+                        type: "click: node has modelFqn";
+                        params: unknown;
+                    } | {
+                        type: "click: selected node";
+                        params: unknown;
+                    } | {
+                        type: "click: same node";
+                        params: unknown;
+                    } | {
+                        type: "click: focused node";
+                        params: unknown;
+                    } | {
+                        type: "click: node.type = seq-subflow";
+                        params: unknown;
+                    } | {
+                        type: "click: node has connections";
+                        params: unknown;
+                    } | {
+                        type: "click: selected edge";
+                        params: unknown;
+                    } | {
+                        type: "click: active walkthrough step";
+                        params: unknown;
+                    }, never, EmittedEvents>[];
+                };
                 'walkthrough.step': {
                     actions: ActionFunction<Context, {
                         type: "walkthrough.step";
@@ -2460,8 +2565,8 @@ export declare const ready: {
             }, never, never, never, never>[];
         };
         'layout.resetManualLayout': {
-            guard: "not readonly";
-            actions: ActionFunction<Context, Events, Events, undefined, {
+            guard: "enabled: Editor";
+            actions: ( ActionFunction<Context, Events, Events, undefined, {
                 src: "search";
                 logic: SearchActorLogic;
                 id: "search";
@@ -2563,7 +2668,33 @@ export declare const ready: {
             } | {
                 type: "click: active walkthrough step";
                 params: unknown;
-            }, never, EmittedEvents>[];
+            }, never, EmittedEvents> | ActionFunction<Context, {
+                type: "layout.resetManualLayout";
+            }, Events, undefined, {
+                src: "search";
+                logic: SearchActorLogic;
+                id: "search";
+            } | {
+                src: "hotkey";
+                logic: HotkeyActorLogic;
+                id: "hotkey";
+            } | {
+                src: "overlays";
+                logic: OverlaysActorLogic;
+                id: "overlays";
+            } | {
+                src: "mediaPrint";
+                logic: MediaPrintActorLogic;
+                id: "mediaPrint";
+            } | {
+                src: "editor";
+                logic: EditorActorLogic;
+                id: "editor";
+            } | {
+                src: "navigationPanel";
+                logic: NavigationPanelActorLogic;
+                id: "navigationPanel";
+            }, never, never, never, never>)[];
         };
         'media.print.on': {
             target: string;

package/dist/likec4diagram/state/machine.state.ready.js

@@ -45,10 +45,11 @@ var ready = machine.createStateConfig({
 			]
 		},
 		"layout.resetManualLayout": {
-			guard: "not readonly",
+			guard: "enabled: Editor",
 			actions: [
 				cancelEditing(),
 				disableCompareWithLatest(),
+				assign({ viewportChangedManually: false }),
 				triggerChange({ op: "reset-manual-layout" })
 			]
 		},

package/dist/likec4diagram/state/machine.state.ready.walkthrough.d.ts

@@ -2,12 +2,12 @@ import { Types } from '../types';
 import { Context, Events, EmittedEvents } from './machine.setup';
 import { CancelAction, ActionFunction } from 'xstate';
 import { HotKeyEvent, HotkeyActorLogic } from './hotkeyActor';
-import { StepPath } from '@likec4/core';
 import { SearchActorLogic } from '../../search/searchActor';
 import { OverlaysActorLogic } from '../../overlays/overlaysActor';
 import { MediaPrintActorLogic } from './mediaPrintActor';
 import { EditorActorLogic } from '../../editor';
 import { NavigationPanelActorLogic } from '../../navigationpanel/actor';
+import { StepPath } from '@likec4/core';
 export declare const walkthrough: {
     id: string;
     entry: CancelAction<Context, Events, undefined, Events>[];
@@ -28,6 +28,111 @@ export declare const walkthrough: {
         'key.arrow.down': {
             actions: ActionFunction<Context, HotKeyEvent, Events, undefined, never, never, never, never, never>;
         };
+        'sequence.flow.*': {
+            actions: ActionFunction<Context, Events, Events, undefined, {
+                src: "search";
+                logic: SearchActorLogic;
+                id: "search";
+            } | {
+                src: "hotkey";
+                logic: HotkeyActorLogic;
+                id: "hotkey";
+            } | {
+                src: "overlays";
+                logic: OverlaysActorLogic;
+                id: "overlays";
+            } | {
+                src: "mediaPrint";
+                logic: MediaPrintActorLogic;
+                id: "mediaPrint";
+            } | {
+                src: "editor";
+                logic: EditorActorLogic;
+                id: "editor";
+            } | {
+                src: "navigationPanel";
+                logic: NavigationPanelActorLogic;
+                id: "navigationPanel";
+            }, never, {
+                type: "isReady";
+                params: unknown;
+            } | {
+                type: "enabled: Editor";
+                params: unknown;
+            } | {
+                type: "enabled: FitView";
+                params: unknown;
+            } | {
+                type: "enabled: FocusMode";
+                params: unknown;
+            } | {
+                type: "enabled: Readonly";
+                params: unknown;
+            } | {
+                type: "enabled: RelationshipDetails";
+                params: unknown;
+            } | {
+                type: "enabled: Search";
+                params: unknown;
+            } | {
+                type: "enabled: ElementDetails";
+                params: unknown;
+            } | {
+                type: "enabled: OpenSource";
+                params: unknown;
+            } | {
+                type: "enabled: DynamicViewWalkthrough";
+                params: unknown;
+            } | {
+                type: "enabled: NavigationPanel";
+                params: unknown;
+            } | {
+                type: "focus.node: autoUnfocus";
+                params: unknown;
+            } | {
+                type: "enabled: Overlays";
+                params: unknown;
+            } | {
+                type: "not readonly";
+                params: unknown;
+            } | {
+                type: "is dynamic view";
+                params: unknown;
+            } | {
+                type: "is dynamic view in sequence variant";
+                params: unknown;
+            } | {
+                type: "is same view";
+                params: unknown;
+            } | {
+                type: "is another view";
+                params: unknown;
+            } | {
+                type: "click: node has modelFqn";
+                params: unknown;
+            } | {
+                type: "click: selected node";
+                params: unknown;
+            } | {
+                type: "click: same node";
+                params: unknown;
+            } | {
+                type: "click: focused node";
+                params: unknown;
+            } | {
+                type: "click: node.type = seq-subflow";
+                params: unknown;
+            } | {
+                type: "click: node has connections";
+                params: unknown;
+            } | {
+                type: "click: selected edge";
+                params: unknown;
+            } | {
+                type: "click: active walkthrough step";
+                params: unknown;
+            }, never, EmittedEvents>[];
+        };
         'walkthrough.step': {
             actions: ActionFunction<Context, {
                 type: "walkthrough.step";

package/dist/likec4diagram/state/machine.state.ready.walkthrough.js

@@ -3,10 +3,10 @@ import { roundDpr } from "../../utils/roundDpr.js";
 import { Base } from "../../base/Base.js";
 import { machine, targetState, to } from "./machine.setup.js";
 import { assignViewportBefore, cancelFitDiagram, fitFocusedBounds, returnViewportBefore } from "./machine.actions.layout.js";
-import { assignLastClickedNode, cancelEditing, emitEdgeClick, emitPaneClick, resetLastClickedNode, resetSelection, startHotKeyActor, stopHotKeyActor, updateView } from "./machine.actions.js";
-import { clamp, firstBy, isNumber, map } from "remeda";
+import { assignLastClickedNode, cancelEditing, collapseOrExpandSequenceFlow, emitEdgeClick, emitPaneClick, resetLastClickedNode, resetSelection, startHotKeyActor, stopHotKeyActor, updateView } from "./machine.actions.js";
+import { clamp, find, firstBy, isNumber, map } from "remeda";
 import { invariant, nonNullable } from "@likec4/core";
-import { dynamicViewFlow as dynamicViewFlow$1, isDynamicView as isDynamicView$1, isStepPath as isStepPath$1, parentFlow } from "@likec4/core/types";
+import { dynamicViewFlow as dynamicViewFlow$1, flowAncestors as flowAncestors$1, flowHelpers, isDynamicView as isDynamicView$1, isDynamicViewWithFlow as isDynamicViewWithFlow$1, isStepPath as isStepPath$1, parentFlow } from "@likec4/core/types";
 import { assertEvent, enqueueActions } from "xstate";
 import { assign as assign$1, raise as raise$1 } from "xstate/actions";
 //#region src/likec4diagram/state/machine.state.ready.walkthrough.ts
@@ -15,10 +15,26 @@ var outlinePanelWidth = ({ activeWalkthrough, xystore }) => {
 	if (activeWalkthrough) return activeWalkthrough.outlinePanelWidth;
 	const { width } = xystore.getState();
 	return clamp(roundDpr(width * .3), {
-		min: 180,
-		max: 400
+		min: 240,
+		max: 500
 	});
 };
+var guardContext = (context) => {
+	const { activeWalkthrough, view } = context;
+	invariant(isDynamicViewWithFlow$1(view), "View must be a dynamic view with flows");
+	invariant(activeWalkthrough, "Active walkthrough must not be null");
+	return {
+		activeWalkthrough,
+		view
+	};
+};
+/**
+* Creates a predicate that checks if a step is collapsed based on the current state
+*/
+var isCollapsed = (context) => (step) => {
+	const path = flowHelpers.extractPath(step);
+	return context.collapsedSequenceFlows[path] ?? false;
+};
 var updateActiveWalkthroughState = () => machine.enqueueActions(({ context, enqueue }) => {
 	const { activeWalkthrough } = context;
 	if (!activeWalkthrough) {
@@ -86,6 +102,18 @@ var clearWalkthroughState = () => machine.assign(({ context }) => {
 		}))
 	};
 });
+var checkIfActiveStepCollapsed = () => machine.enqueueActions(({ context, enqueue }) => {
+	const { activeWalkthrough, view } = guardContext(context);
+	const checkIsCollapsed = isCollapsed(context);
+	if (!find(flowAncestors$1(activeWalkthrough.stepId), checkIsCollapsed)) return;
+	const { prev, next } = dynamicViewFlow$1(view).prevAndNext(activeWalkthrough.stepId, checkIsCollapsed);
+	const goToStep = prev ?? next;
+	if (!goToStep) return;
+	enqueue.raise({
+		type: "walkthrough.step",
+		stepId: goToStep
+	});
+});
 var emitWalkthroughStarted = () => machine.emit(({ context }) => {
 	return {
 		type: "walkthroughStarted",
@@ -147,13 +175,18 @@ var walkthrough = machine.createStateConfig({
 			type: "walkthrough.step",
 			direction: "next"
 		}) },
+		"sequence.flow.*": { actions: [
+			collapseOrExpandSequenceFlow(),
+			resetLastClickedNode(),
+			checkIfActiveStepCollapsed()
+		] },
 		"walkthrough.step": { actions: [enqueueActions(({ enqueue, context, event }) => {
 			let predicate;
 			const activeWalkthrough = nonNullable(context.activeWalkthrough, "walkthrough.step: activeWalkthrough is null");
 			if (event.direction) {
 				invariant(isDynamicView$1(context.view));
 				const { stepId } = activeWalkthrough;
-				const prevNext = dynamicViewFlow$1(context.view).prevAndNext(stepId, (flowId) => context.collapsedSequenceFlows[flowId] ?? false);
+				const prevNext = dynamicViewFlow$1(context.view).prevAndNext(stepId, isCollapsed(context));
 				predicate = (edge) => edge.data.id === prevNext[event.direction];
 			} else predicate = (edge) => edge.data.id === event.stepId;
 			const nextStepId = context.xyedges.find(predicate)?.data.id;

package/dist/likec4diagram/state/utils.d.ts

@@ -70,4 +70,4 @@ export declare function findCorrespondingNode(context: Pick<Context, 'lastOnNavi
     fromNode: Types.Node;
     toNode: Types.Node | null;
 };
-export declare function calcViewportForBounds(context: Pick<Context, 'xystore' | 'fitViewPadding'>, bounds: BBox): Viewport;
+export declare function calcViewportForBounds(context: Pick<Context, 'xystore' | 'fitViewPadding' | 'minZoom'>, bounds: BBox): Viewport;

package/dist/likec4diagram/state/utils.js

@@ -1,5 +1,4 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { MinZoom } from "../../base/const.js";
 import { pickViewBounds } from "../../utils/view-bounds.js";
 import { BBox } from "@likec4/core/geometry";
 import { invariant, nonNullable, nonexhaustive } from "@likec4/core/utils";
@@ -161,7 +160,7 @@ function findCorrespondingNode(context, event) {
 function calcViewportForBounds(context, bounds) {
 	let { width, height, transform } = context.xystore.getState();
 	const maxZoom = Math.max(transform[2], 1);
-	return getViewportForBounds(bounds, width, height, MinZoom, maxZoom, context.fitViewPadding);
+	return getViewportForBounds(bounds, width, height, context.minZoom, maxZoom, context.fitViewPadding);
 }
 //#endregion
 export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, getEdgeBounds, nodeRef, typedSystem, viewBounds };

package/dist/likec4diagram/ui/LayoutDriftFrame.js

@@ -1,17 +1,24 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
-import { css } from "@likec4/styles/css";
+import { css, cx } from "@likec4/styles/css";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { UnstyledButton } from "@mantine/core";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 //#region src/likec4diagram/ui/LayoutDriftFrame.tsx
+var borderColors = {
+	manual: css({ borderColor: "likec4.compare.manual" }),
+	auto: css({ borderColor: "likec4.compare.latest" })
+};
+var bgColors = {
+	manual: css({ backgroundColor: "likec4.compare.manual" }),
+	auto: css({ backgroundColor: "likec4.compare.latest" })
+};
 var LayoutDriftFrame = memo(() => {
-	const [{ layout, isActive }, { toggleCompare }] = useDiagramCompareLayout();
-	const bgColor = layout === "manual" ? "var(--mantine-color-orange-6)" : "var(--mantine-color-green-6)";
+	const [{ layout, state }, { toggleCompare }] = useDiagramCompareLayout();
 	return /* @__PURE__ */ jsx(Box$1, {
-		className: hstack({
+		className: cx(hstack({
 			position: "absolute",
 			top: "0",
 			left: "0",
@@ -22,14 +29,13 @@ var LayoutDriftFrame = memo(() => {
 			pointerEvents: "none",
 			alignItems: "flex-start",
 			justifyContent: "center"
-		}),
+		}), borderColors[layout]),
 		style: {
 			zIndex: "9999",
-			display: !isActive ? "none" : void 0,
-			borderColor: bgColor
+			display: state == "inactive" ? "none" : void 0
 		},
 		children: /* @__PURE__ */ jsx(Btn, {
-			style: { backgroundColor: bgColor },
+			className: bgColors[layout],
 			onClick: (e) => {
 				e.stopPropagation();
 				toggleCompare();
@@ -38,7 +44,7 @@ var LayoutDriftFrame = memo(() => {
 		})
 	});
 });
-var Btn = UnstyledButton.withProps({ className: css({
+var Btn = UnstyledButton.withProps({ classNames: { root: css({
 	fontSize: "xs",
 	fontWeight: "medium",
 	py: "1.5",
@@ -50,6 +56,6 @@ var Btn = UnstyledButton.withProps({ className: css({
 	color: "mantine.gray[9]",
 	pointerEvents: "all",
 	_active: { transform: "translateY(-3px)" }
-}) });
+}) } });
 //#endregion
 export { LayoutDriftFrame };

package/dist/likec4diagram/ui/index.d.ts

@@ -1,4 +1,4 @@
 export { FloatingSequenceActors } from './FloatingSequenceActors';
 export { LayoutDriftFrame } from './LayoutDriftFrame';
 export { NotationPanel } from './notation/NotationPanel';
-export { SequenceOutlinePanel } from './sequence-outline/SequenceOutlinePanel';
+export { SequenceOutlinePanel } from './sequence-outline';

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

@@ -17,37 +17,35 @@ var icon = css({
 var card = css({
 	cursor: "default",
 	userSelect: "none",
-	minWidth: 200,
-	maxWidth: "calc(100vw - 20px)",
+	minWidth: "[200px]",
+	maxWidth: "[calc(100vw - 20px)]",
 	backgroundColor: `surface.default/80`,
 	sm: {
-		minWidth: 300,
-		maxWidth: `65vw`
+		minWidth: "[300px]",
+		maxWidth: `[65vw]`
 	},
-	md: { maxWidth: `40vw` },
-	_dark: { backgroundColor: `mantine.dark[6]/80` }
+	md: { maxWidth: `[40vw]` }
 });
 var tabPanel = css({ padding: "xxs" });
 var elementNotation = css({
 	backgroundColor: "transparent",
-	transition: "all 100ms ease-in",
+	transition: "[all 100ms ease-in]",
 	_hover: {
-		transition: "all 120ms ease-out",
-		backgroundColor: `mantine.primary[2]/50`
-	},
-	_dark: { _hover: { backgroundColor: `mantine.dark[3]/40` } }
+		transition: "[all 120ms ease-out]",
+		backgroundColor: `surface.hover`
+	}
 });
 css({
 	fill: "var(--likec4-palette-fill)",
 	stroke: "var(--likec4-palette-stroke)",
-	strokeWidth: 1,
+	strokeWidth: "[1px]",
 	overflow: "visible",
 	width: "100%",
 	height: "auto",
-	filter: `
+	filter: `[
     drop-shadow(0 2px 3px rgb(0 0 0 / 22%))
     drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
-  `
+  ]`
 });
 var shapeBadge = css({
 	fontWeight: "medium",
@@ -55,7 +53,7 @@ var shapeBadge = css({
 	paddingTop: "0",
 	paddingBottom: "0",
 	textTransform: "lowercase",
-	transition: "all 150ms ease-in-out",
+	transition: "[all 150ms ease-in-out]",
 	cursor: "pointer",
 	["--badge-radius"]: "2px",
 	["--badge-fz"]: "9.5px",

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;