@likec4/diagram 1.60.0 → 1.61.0

package/dist/likec4diagram/state/machine.state.ready.comparing.mjs

@@ -0,0 +1,63 @@
+import { assignLastClickedNode, beforeLayoutTypeChangeWhileComparing, cancelEditing, emitNodeClick, emitOnLayoutTypeChange, exitComparingLayouts, openNodeDetails, openSourceOfFocusedOrLastClickedNode, triggerChange, updateView } from "./machine.actions.mjs";
+import { ComparingTag, machine, targetState, to } from "./machine.setup.mjs";
+import { and, not, or } from "xstate/guards";
+import { assign } from "xstate/actions";
+
+// src/likec4diagram/state/machine.state.ready.comparing.ts
+/**
+* State when comparing manual layout with the latest auto layout.
+*
+* - Entered on `compare.start` (from `idle` or `focused`), if the view has layout drifts
+* - Left on `compare.end`, manual layout reset, printing or navigation,
+*   or automatically when drifts are gone or the feature is disabled
+* - On exit switches back to manual layout (if auto is active)
+* - Focus mode and walkthrough are not available
+* - Diagram is readonly while auto layout is active (see `isReadOnly` guard)
+*/
+const comparing = machine.createStateConfig({
+	id: targetState.comparing.slice(1),
+	tags: [ComparingTag],
+	always: {
+		guard: not("can compare layouts"),
+		...to.idle
+	},
+	exit: [exitComparingLayouts()],
+	on: {
+		"compare.end": { ...to.idle },
+		"emit.onLayoutTypeChange": { actions: [beforeLayoutTypeChangeWhileComparing(), emitOnLayoutTypeChange()] },
+		"update.view": [{
+			guard: "is another view",
+			...to.navigating
+		}, { actions: updateView({ restoreLayoutViewport: true }) }],
+		"layout.resetManualLayout": {
+			guard: "enabled: Editor",
+			...to.idle,
+			actions: [
+				cancelEditing(),
+				assign({ viewportChangedManually: false }),
+				triggerChange({ op: "reset-manual-layout" })
+			]
+		},
+		"walkthrough.start": {},
+		"xyflow.nodeClick": [{
+			guard: and([
+				"enabled: Readonly",
+				"enabled: ElementDetails",
+				"click: node has details",
+				or(["click: same node", "click: selected node"])
+			]),
+			actions: [
+				assignLastClickedNode(),
+				openSourceOfFocusedOrLastClickedNode(),
+				openNodeDetails(),
+				emitNodeClick()
+			]
+		}, { actions: [
+			assignLastClickedNode(),
+			openSourceOfFocusedOrLastClickedNode(),
+			emitNodeClick()
+		] }]
+	}
+});
+
+export { comparing };

package/dist/likec4diagram/state/machine.state.ready.focused.mjs

@@ -1,11 +1,11 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { machine, targetState, to } from "./machine.setup.mjs";
+import { assignFocusedNode, assignLastClickedNode, cancelAutoUnfocusTimer, emitNodeClick, emitPaneClick, focusOnNodesAndEdges, openNodeDetails, openSourceOfFocusedOrLastClickedNode, resetLastClickedNode, startAutoUnfocusTimer, startHotKeyActor, stopHotKeyActor, undimEverything } from "./machine.actions.mjs";
 import { assignViewportBefore, cancelFitDiagram, fitFocusedBounds, returnViewportBefore } from "./machine.actions.layout.mjs";
-import { assignFocusedNode, assignLastClickedNode, cancelAutoUnfocusTimer, emitNodeClick, emitPaneClick, focusOnNodesAndEdges, openElementDetails, openSourceOfFocusedOrLastClickedNode, resetLastClickedNode, startAutoUnfocusTimer, startHotKeyActor, stopHotKeyActor, undimEverything } from "./machine.actions.mjs";
-import { assign, raise } from "xstate/actions";
+import { machine, targetState, to } from "./machine.setup.mjs";
 import { and } from "xstate/guards";
+import { assign, raise } from "xstate/actions";
 
-//#region src/likec4diagram/state/machine.state.ready.focused.ts
+// src/likec4diagram/state/machine.state.ready.focused.ts
 const focused = machine.createStateConfig({
 	id: targetState.focused.slice(1),
 	entry: [
@@ -28,17 +28,21 @@ const focused = machine.createStateConfig({
 		})
 	],
 	on: {
+		"compare.start": {
+			guard: "can compare layouts",
+			...to.comparing
+		},
 		"focus.autoUnfocus": { ...to.idle },
 		"xyflow.nodeClick": [
 			{
 				guard: and([
 					"enabled: ElementDetails",
 					"click: focused node",
-					"click: node has modelFqn"
+					"click: node has details"
 				]),
 				actions: [
 					assignLastClickedNode(),
-					openElementDetails(),
+					openNodeDetails(),
 					emitNodeClick()
 				]
 			},
@@ -72,5 +76,4 @@ const focused = machine.createStateConfig({
 	}
 });
 
-//#endregion
 export { focused };

package/dist/likec4diagram/state/machine.state.ready.idle.mjs

@@ -1,15 +1,19 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { machine, targetState, to } from "./machine.setup.mjs";
+import { assignFocusedNode, assignLastClickedNode, emitEdgeClick, emitNodeClick, emitOpenSourceOfView, emitPaneClick, openNodeDetails, openSourceOfFocusedOrLastClickedNode, resetLastClickedNode, resetSelection } from "./machine.actions.mjs";
 import { raiseFitDiagram } from "./machine.actions.layout.mjs";
-import { assignFocusedNode, assignLastClickedNode, emitEdgeClick, emitNodeClick, emitOpenSourceOfView, emitPaneClick, openElementDetails, openSourceOfFocusedOrLastClickedNode, resetLastClickedNode, resetSelection } from "./machine.actions.mjs";
+import { machine, targetState, to } from "./machine.setup.mjs";
 import { dynamicViewFlow, invariant, isDynamicView } from "@likec4/core";
-import { raise } from "xstate/actions";
 import { and, not, or } from "xstate/guards";
+import { raise } from "xstate/actions";
 
-//#region src/likec4diagram/state/machine.state.ready.idle.ts
+// src/likec4diagram/state/machine.state.ready.idle.ts
 const idle = machine.createStateConfig({
 	id: targetState.idle.slice(1),
 	on: {
+		"compare.start": {
+			guard: "can compare layouts",
+			...to.comparing
+		},
 		"xyflow.nodeClick": [
 			{
 				description: "Handle sequence subflow click in sequence variant",
@@ -52,13 +56,13 @@ const idle = machine.createStateConfig({
 				guard: and([
 					"enabled: Readonly",
 					"enabled: ElementDetails",
-					"click: node has modelFqn",
+					"click: node has details",
 					or(["click: same node", "click: selected node"])
 				]),
 				actions: [
 					assignLastClickedNode(),
 					openSourceOfFocusedOrLastClickedNode(),
-					openElementDetails(),
+					openNodeDetails(),
 					emitNodeClick()
 				]
 			},
@@ -104,5 +108,4 @@ const idle = machine.createStateConfig({
 	}
 });
 
-//#endregion
 export { idle };

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

@@ -1,16 +1,17 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { typedSystem } from "./utils.mjs";
+import { assignLastClickedNode, assignToggledFeatures, cancelEditing, closeAllOverlays, collapseOrExpandSequenceFlow, emitEdgeClick, emitNodeClick, emitOpenSource, emitOpenSourceOfView, emitPaneClick, ensureAllActors, ensureEditorActor, ensureOverlaysActor, ensureSearchActor, handleNavigate, highlightNodeOrEdge, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openOverlay, resetEdgesControlPoints, resetLastClickedNode, startEditing, stopEditing, tagHighlight, triggerChange, undimEverything, updateFeatures, updateView } from "./machine.actions.mjs";
 import { machine, to } from "./machine.setup.mjs";
 import { cancelFitDiagram, centerOnNodeOrEdge, fitDiagram, raiseFitDiagram, setViewport } from "./machine.actions.layout.mjs";
-import { assignLastClickedNode, assignToggledFeatures, cancelEditing, closeAllOverlays, collapseOrExpandSequenceFlow, disableCompareWithLatest, emitEdgeClick, emitNodeClick, emitOpenSource, emitOpenSourceOfView, emitPaneClick, ensureAllActors, ensureEditorActor, ensureOverlaysActor, ensureSearchActor, handleNavigate, highlightNodeOrEdge, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openOverlay, resetEdgesControlPoints, resetLastClickedNode, startEditing, stopEditing, tagHighlight, triggerChange, undimEverything, updateFeatures, updateView } from "./machine.actions.mjs";
+import { comparing } from "./machine.state.ready.comparing.mjs";
 import { focused } from "./machine.state.ready.focused.mjs";
 import { idle } from "./machine.state.ready.idle.mjs";
 import { printing } from "./machine.state.ready.printing.mjs";
 import { walkthrough } from "./machine.state.ready.walkthrough.mjs";
-import { assign, sendTo, spawnChild, stopChild } from "xstate/actions";
+import { typedSystem } from "./utils.mjs";
 import { and } from "xstate/guards";
+import { assign, sendTo, spawnChild, stopChild } from "xstate/actions";
 
-//#region src/likec4diagram/state/machine.state.ready.ts
+// src/likec4diagram/state/machine.state.ready.ts
 const ready = machine.createStateConfig({
 	initial: "idle",
 	entry: [spawnChild("mediaPrint", { id: "mediaPrint" }), ensureAllActors()],
@@ -26,7 +27,8 @@ const ready = machine.createStateConfig({
 		idle,
 		focused,
 		walkthrough,
-		printing
+		printing,
+		comparing
 	},
 	on: {
 		"layout.align": {
@@ -49,7 +51,6 @@ const ready = machine.createStateConfig({
 			guard: "enabled: Editor",
 			actions: [
 				cancelEditing(),
-				disableCompareWithLatest(),
 				assign({ viewportChangedManually: false }),
 				triggerChange({ op: "reset-manual-layout" })
 			]
@@ -60,7 +61,7 @@ const ready = machine.createStateConfig({
 		"notations.unhighlight": { actions: undimEverything() },
 		"highlight.*": { actions: highlightNodeOrEdge() },
 		"unhighlight.all": { actions: undimEverything() },
-		"open.elementDetails": { actions: openOverlay() },
+		"open.nodeDetails": { actions: openOverlay() },
 		"open.relationshipDetails": { actions: openOverlay() },
 		"open.relationshipsBrowser": { actions: openOverlay() },
 		"open.search": {
@@ -150,5 +151,4 @@ const ready = machine.createStateConfig({
 	}
 });
 
-//#endregion
 export { ready };

package/dist/likec4diagram/state/machine.state.ready.printing.mjs

@@ -1,10 +1,10 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { viewBounds } from "./utils.mjs";
-import { machine, targetState, to } from "./machine.setup.mjs";
 import { assignViewportBefore, cancelFitDiagram, returnViewportBefore, setViewport } from "./machine.actions.layout.mjs";
+import { machine, targetState, to } from "./machine.setup.mjs";
+import { viewBounds } from "./utils.mjs";
 import { enqueueActions, log } from "xstate";
 
-//#region src/likec4diagram/state/machine.state.ready.printing.ts
+// src/likec4diagram/state/machine.state.ready.printing.ts
 /**
 * State when the diagram is being prepared for printing.
 * Adjusts the viewport to fit the entire diagram for optimal printing.
@@ -38,5 +38,4 @@ const printing = machine.createStateConfig({
 	}
 });
 
-//#endregion
 export { printing };

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

@@ -1,16 +1,16 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { roundDpr } from "../../utils/roundDpr.mjs";
 import { Base } from "../../base/Base.mjs";
-import { machine, targetState, to } from "./machine.setup.mjs";
-import { assignViewportBefore, cancelFitDiagram, fitFocusedBounds, returnViewportBefore } from "./machine.actions.layout.mjs";
+import { roundDpr } from "../../utils/roundDpr.mjs";
 import { assignLastClickedNode, cancelEditing, collapseOrExpandSequenceFlow, emitEdgeClick, emitPaneClick, resetLastClickedNode, resetSelection, startHotKeyActor, stopHotKeyActor, updateView } from "./machine.actions.mjs";
+import { assignViewportBefore, cancelFitDiagram, fitFocusedBounds, returnViewportBefore } from "./machine.actions.layout.mjs";
+import { machine, targetState, to } from "./machine.setup.mjs";
 import { clamp, find, firstBy, isNumber, map } from "remeda";
 import { invariant, nonNullable } from "@likec4/core";
-import { dynamicViewFlow as dynamicViewFlow$1, flowAncestors as flowAncestors$1, flowGuards, flowHelpers, isDynamicView as isDynamicView$1, isDynamicViewWithFlow as isDynamicViewWithFlow$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
+// src/likec4diagram/state/machine.state.ready.walkthrough.ts
 const byId = (id) => (e) => e.data.id === id && isNumber(e.data.stepnum);
 const outlinePanelWidth = ({ activeWalkthrough, xystore }) => {
 	if (activeWalkthrough) return activeWalkthrough.outlinePanelWidth;
@@ -258,5 +258,4 @@ const walkthrough = machine.createStateConfig({
 	}
 });
 
-//#endregion
 export { walkthrough };

package/dist/likec4diagram/state/mediaPrintActor.d.mts

@@ -1,10 +1,8 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from "xstate";
-//#region src/likec4diagram/state/mediaPrintActor.d.ts
 export type MediaPrintEvent = {
   type: 'media.print.on';
 } | {
   type: 'media.print.off';
 };
-export interface MediaPrintActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, MediaPrintEvent> {}
-//#endregion
+export interface MediaPrintActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, MediaPrintEvent> {}

package/dist/likec4diagram/state/mediaPrintActor.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { fromCallback } from "xstate";
 
-//#region src/likec4diagram/state/mediaPrintActor.ts
+// src/likec4diagram/state/mediaPrintActor.ts
 /**
 * Actor logic to listen for media print events.
 */
@@ -20,5 +20,4 @@ const mediaPrintActorLogic = fromCallback(({ sendBack }) => {
 	};
 });
 
-//#endregion
 export { mediaPrintActorLogic };

package/dist/likec4diagram/state/persistence.mjs

@@ -1,13 +1,21 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { isBoolean, pickBy } from "remeda";
+import { isBoolean } from "remeda";
 
-//#region src/likec4diagram/state/persistence.ts
+// src/likec4diagram/state/persistence.ts
 const key = `likec4:diagram:toggledFeatures`;
+/**
+* Picks only togglable features with boolean values
+* (ignores unknown keys, e.g. persisted by previous versions)
+*/
+function pickTogglable(value) {
+	if (typeof value !== "object" || value === null || !("enableReadOnly" in value)) return {};
+	return isBoolean(value.enableReadOnly) ? { enableReadOnly: value.enableReadOnly } : {};
+}
 const DiagramToggledFeaturesPersistence = {
 	read() {
 		try {
 			let fromStorage = sessionStorage.getItem(key);
-			if (fromStorage) return JSON.parse(fromStorage);
+			if (fromStorage) return pickTogglable(JSON.parse(fromStorage));
 			return null;
 		} catch (e) {
 			if (import.meta.env.MODE !== "test") console.error(`Error reading fromStorage ${key}:`, e);
@@ -15,10 +23,9 @@ const DiagramToggledFeaturesPersistence = {
 		}
 	},
 	write(toggledFeatures) {
-		sessionStorage.setItem(key, JSON.stringify(pickBy(toggledFeatures, isBoolean)));
+		sessionStorage.setItem(key, JSON.stringify(pickTogglable(toggledFeatures)));
 		return toggledFeatures;
 	}
 };
 
-//#endregion
 export { DiagramToggledFeaturesPersistence };

package/dist/likec4diagram/state/types.d.mts

@@ -3,10 +3,9 @@ import { BaseEditorActorRef } from "../../editor/actor/setup.mjs";
 import { NavigationPanelActorRef } from "../../navigationpanel/actor.mjs";
 import { OverlaysActorRef } from "../../overlays/overlaysActor.mjs";
 import { SearchActorRef } from "../../search/searchActor.mjs";
-import { Context, ElementViewDisplayVariant, EmittedEvents, Events } from "./machine.setup.mjs";
 import { DiagramMachineRef, DiagramMachineSnapshot } from "./machine.mjs";
+import { Context, ElementViewDisplayVariant, EmittedEvents, Events } from "./machine.setup.mjs";
 import { ActorSystem } from "xstate";
-//#region src/likec4diagram/state/types.d.ts
 export type System = ActorSystem<{
   actors: {
     diagram: DiagramMachineRef;
@@ -19,5 +18,4 @@ export type System = ActorSystem<{
 export interface DiagramActorRef extends DiagramMachineRef {
   system: System;
 }
-//#endregion
 export type { DiagramMachineSnapshot as DiagramActorSnapshot, Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents };

package/dist/likec4diagram/state/utils.mjs

@@ -1,11 +1,11 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { pickViewBounds } from "../../utils/view-bounds.mjs";
+import { getEdgePosition, getNodesBounds, getViewportForBounds } from "@xyflow/system";
 import { BBox } from "@likec4/core/geometry";
 import { invariant, nonNullable, nonexhaustive } from "@likec4/core/utils";
-import { getEdgePosition, getNodesBounds, getViewportForBounds } from "@xyflow/system";
 import { isDynamicView } from "@likec4/core/types";
 
-//#region src/likec4diagram/state/utils.ts
+// src/likec4diagram/state/utils.ts
 const findNodeByModelFqn = (xynodes, elementFqn) => {
 	const node = xynodes.find((n) => "modelFqn" in n.data && n.data["modelFqn"] === elementFqn);
 	return node ? node : null;
@@ -165,5 +165,4 @@ function calcViewportForBounds(context, bounds) {
 	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/types.d.mts

@@ -4,7 +4,6 @@ import { FunctionComponent } from "react";
 import { XYPosition } from "@xyflow/system";
 import { AutoLayoutDirection, BBox, DeploymentFqn, DiagramEdge, DiagramNode, DiagramNodeDriftReason, DynamicViewFlow, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, NonEmptyReadonlyArray, StepPath, ViewId } from "@likec4/core/types";
 import { Simplify } from "type-fest";
-//#region src/likec4diagram/types.d.ts
 export declare namespace Types {
   type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'notes' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
     /**
@@ -198,5 +197,4 @@ export declare namespace Types {
   type NodeRenderers = { [T in NodeType]: NodeRenderer<T>; };
   type EdgeRenderer<T extends EdgeType> = FunctionComponent<EdgeProps<T>>;
   type EdgeRenderers = { [T in EdgeType]: EdgeRenderer<T>; };
-}
-//#endregion
+}

package/dist/likec4diagram/ui/FloatingSequenceActors.mjs

@@ -1,23 +1,22 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { selectXYStore, useXYStore } from "../../hooks/useXYFlow.mjs";
-import { roundDpr } from "../../utils/roundDpr.mjs";
-import { useDiagram } from "../../hooks/safeContext.mjs";
 import { ElementData } from "../../base-primitives/element/ElementData.mjs";
 import { ElementShape as ElementShape$1 } from "../../base-primitives/element/ElementShape.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { selectXYStore, useXYStore } from "../../hooks/useXYFlow.mjs";
+import { roundDpr } from "../../utils/roundDpr.mjs";
 import { css, cx } from "@likec4/styles/css";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useNodesData } from "@xyflow/react";
-import { shallowEqual } from "fast-equals";
 import { clamp, omit, pipe } from "remeda";
 import { ensureSizes } from "@likec4/core";
-import { ifilter, imap, invariant as invariant$1, toArray } from "@likec4/core/utils";
 import { getNodeDimensions } from "@xyflow/system";
+import { ifilter, imap, invariant as invariant$1, toArray } from "@likec4/core/utils";
 import { AnimatePresence, LayoutGroup } from "motion/react";
 import * as m$1 from "motion/react-m";
 import { elementNode } from "@likec4/styles/recipes";
 
-//#region src/likec4diagram/ui/FloatingSequenceActors.tsx
+// src/likec4diagram/ui/FloatingSequenceActors.tsx
 /**
 * Returns actor nodes from the current XY node list.
 * Only re-runs when xynodes reference changes.
@@ -154,5 +153,4 @@ function SequenceActor({ id, top }) {
 	});
 }
 
-//#endregion
 export { FloatingSequenceActors };

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

@@ -1,6 +1,6 @@
 import { css } from "@likec4/styles/css";
 
-//#region src/likec4diagram/ui/notation/NotationPanel.css.ts
+// src/likec4diagram/ui/notation/NotationPanel.css.ts
 const container = css({
 	position: "absolute",
 	bottom: "0",
@@ -65,5 +65,4 @@ const shapeBadge = css({
 	["--badge-color"]: "var(--likec4-palette-hiContrast)"
 });
 
-//#endregion
 export { card, container, elementNotation, icon, shapeBadge, tabPanel };

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

@@ -1,10 +1,10 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import IconArrowDownRight from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.mjs";
-import IconHelpCircle from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.mjs";
-import { useXYStore } from "../../../hooks/useXYFlow.mjs";
+import IconArrowDownRight from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.mjs";
+import IconHelpCircle from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.mjs";
+import { ElementShape } from "../../../base-primitives/element/ElementShape.mjs";
 import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../../hooks/safeContext.mjs";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.mjs";
-import { ElementShape } from "../../../base-primitives/element/ElementShape.mjs";
+import { useXYStore } from "../../../hooks/useXYFlow.mjs";
 import { card, container, elementNotation, icon, shapeBadge, tabPanel } from "./NotationPanel.css.mjs";
 import { cx } from "@likec4/styles/css";
 import { memo, useState } from "react";
@@ -15,9 +15,9 @@ import { ActionIcon, Badge, Box, Card, Group, Paper, ScrollAreaAutosize, Stack,
 import { AnimatePresence, m } from "motion/react";
 import { useLocalStorage } from "@mantine/hooks";
 
-//#region src/likec4diagram/ui/notation/NotationPanel.tsx
+// src/likec4diagram/ui/notation/NotationPanel.tsx
 const ElementNotation = ({ value }) => {
-	const { title, color = "primary", shape = "rectangle" } = value;
+	const { title, color, shape } = value;
 	const [onlyKind, setOnlyKind] = useState(null);
 	const diagram = useDiagram();
 	const w = 300;
@@ -186,5 +186,4 @@ const NotationPanel = memo(() => {
 	}, id)] });
 });
 
-//#endregion
 export { NotationPanel };

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

@@ -1,5 +1,5 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import IconChevronRight from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import IconChevronRight from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
 import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { flowPresentation } from "./presentation.mjs";
 import { collectTrail, firstStepOf } from "./tree.mjs";
@@ -7,7 +7,7 @@ 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
+// 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.
@@ -79,5 +79,4 @@ const ActiveTrail = ({ ancestors, tree }) => {
 	});
 };
 
-//#endregion
 export { ActiveTrail };

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

@@ -1,13 +1,13 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import { flowPresentation } from "./presentation.mjs";
 import { recessed } from "./depth-of-field.mjs";
+import { flowPresentation } from "./presentation.mjs";
 import { css, cva } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { m } from "motion/react";
-import { HStack, styled } from "@likec4/styles/jsx";
+import { styled } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 
-//#region src/likec4diagram/ui/sequence-outline/FlowRow.tsx
+// src/likec4diagram/ui/sequence-outline/FlowRow.tsx
 /** Small pill tag for the sub-flow operator (`loop`, `par`, `try`, …). */
 const flowTagBase = cva({
 	base: {
@@ -68,5 +68,4 @@ const FlowRow = ({ node, recession, isCollapsed }) => {
 	});
 };
 
-//#endregion
 export { FlowRow, FlowTag };

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

@@ -1,20 +1,18 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import IconPlayerSkipBackFilled from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.mjs";
-import IconPlayerSkipForwardFilled from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.mjs";
+import IconPlayerSkipBackFilled from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.mjs";
+import IconPlayerSkipForwardFilled from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.mjs";
 import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { ActiveTrail } from "./ActiveTrail.mjs";
 import { recessionOf, shadedPanelBg } from "./depth-of-field.mjs";
-import { useSelectContext } from "./StoreProvider.mjs";
 import { OutlineNodes } from "./OutlineNodes.mjs";
+import { useSelectContext } from "./StoreProvider.mjs";
 import { css } from "@likec4/styles/css";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { pick } from "remeda";
-import { flowAncestors } from "@likec4/core";
 import { Button, ScrollArea } from "@mantine/core";
-import { LayoutGroup } from "motion/react";
 import { HStack, styled } from "@likec4/styles/jsx";
 
-//#region src/likec4diagram/ui/sequence-outline/OutlineBody.tsx
+// src/likec4diagram/ui/sequence-outline/OutlineBody.tsx
 /** Prev/next controls, the "you are here" trail, and the scrollable outline itself. */
 const OutlineBody = () => {
 	const { activeStep, next, prev, tree, ancestors } = useSelectContext((s) => ({
@@ -105,5 +103,4 @@ const OutlineBody = () => {
 	] });
 };
 
-//#endregion
 export { OutlineBody };

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

@@ -1,7 +1,7 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import IconDirectionSignFilled from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.mjs";
+import IconDirectionSignFilled from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.mjs";
+import { MarkdownWithRefs } from "../../../components/markdown/MarkdownWithRefs.mjs";
 import { useDiagram } from "../../../hooks/safeContext.mjs";
-import { Markdown } from "../../../base-primitives/Markdown.mjs";
 import { useSelectContext } from "./StoreProvider.mjs";
 import { css } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +9,7 @@ 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
+// src/likec4diagram/ui/sequence-outline/OutlineHeader.tsx
 /** View title, walkthrough progress and the (optional) view description. */
 const OutlineHeader = () => {
 	const diagram = useDiagram();
@@ -129,7 +129,7 @@ const OutlineHeader = () => {
 				children: "hide"
 			}),
 			maxHeight: 16,
-			children: /* @__PURE__ */ jsx(Markdown, {
+			children: /* @__PURE__ */ jsx(MarkdownWithRefs, {
 				value: RichText.from(description),
 				className: css({ color: "text.dimmed" }),
 				fontSize: "xxs"
@@ -138,5 +138,4 @@ const OutlineHeader = () => {
 	});
 };
 
-//#endregion
 export { OutlineHeader };

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

@@ -1,18 +1,17 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import { SEQ_FRAME_LAYOUT_ID, SEQ_TRANSITION } from "./motion.mjs";
-import { flowPresentation } from "./presentation.mjs";
-import { isOutlineFlowNode } from "./types.mjs";
 import { activeFrame, activeFrameBorder, levelBand, nestedBand, recessionOf } from "./depth-of-field.mjs";
 import { FlowRow } from "./FlowRow.mjs";
+import { SEQ_FRAME_LAYOUT_ID, SEQ_TRANSITION } from "./motion.mjs";
+import { flowPresentation } from "./presentation.mjs";
 import { StepRow } from "./StepRow.mjs";
 import { useIsCollapsed, useSelectContext } from "./StoreProvider.mjs";
+import { isOutlineFlowNode } from "./types.mjs";
 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 { Box } from "@likec4/styles/jsx";
 
-//#region src/likec4diagram/ui/sequence-outline/OutlineNodes.tsx
+// src/likec4diagram/ui/sequence-outline/OutlineNodes.tsx
 function renderNodes({ nodes, depth, activeStep, activeDepth }) {
 	const recession = recessionOf(depth, activeDepth);
 	return nodes.map((node) => {
@@ -81,5 +80,4 @@ function OutlineFlowNode({ node, depth, activeStep, activeDepth }) {
 	});
 }
 
-//#endregion
 export { OutlineNodes };

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

@@ -1,15 +1,15 @@
 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 { StoreProvider, useOutlinePanelWidth } from "./StoreProvider.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
+// 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.
@@ -62,5 +62,4 @@ const SequenceOutlinePanelShell = ({ children }) => {
 	});
 };
 
-//#endregion
 export { SequenceOutlinePanel };