@likec4/diagram 1.59.1 → 1.59.3

package/dist/hooks/useUpdateEffect.js

@@ -13,7 +13,8 @@ var depsShallowEqual = (d1, d2) => {
 	return true;
 };
 function useUpdateEffect$1(callback, deps, equalityFn, effectHook) {
-	useCustomCompareEffect(useFirstMountState() ? noop : callback, deps, equalityFn ?? depsShallowEqual, effectHook);
+	const isFirstMount = useFirstMountState();
+	useCustomCompareEffect(isFirstMount ? noop : callback, deps, equalityFn ?? depsShallowEqual, effectHook);
 }
 __name(useUpdateEffect$1, "useUpdateEffect");
 //#endregion

package/dist/index.d.ts

@@ -3,9 +3,10 @@ export { LikeC4Diagram, type LikeC4DiagramProps, } from './LikeC4Diagram';
 export type { ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, NodeRenderers, OnCanvasClick, OnEdgeClick, OnInitialized, OnNavigateTo, OnNodeClick, OnOpenSource, PaddingWithUnit, ViewPadding, ViewPaddings, WhereOperator, } from './LikeC4Diagram.props';
 export { LikeC4ModelProvider, type LikeC4ModelProviderProps, } from './LikeC4ModelProvider';
 export { LikeC4EditorProvider, type LikeC4EditorProviderProps, } from './editor/LikeC4EditorProvider';
-export { createLikeC4Editor, type LikeC4EditorCallbacks, } from './editor/LikeC4EditorCallbacks';
+export { createLikeC4Editor, type LikeC4EditorCallbacks, type LikeC4EditorChangeResult, } from './editor/LikeC4EditorCallbacks';
 export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './LikeC4ProjectsProvider';
 export { type DiagramApi, type DiagramContext, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramContext, useDiagramSelector, useOnDiagramEvent, } from './hooks/useDiagram';
+export { type DiagramCompareLayoutOps, type DiagramCompareLayoutState, useDiagramCompareLayout, } from './hooks/useDiagramCompareLayout';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './hooks/useLikeC4Model';
 export { type CurrentViewModel, useCurrentViewModel, useOptionalCurrentViewModel, } from './hooks/useCurrentViewModel';
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './hooks/useLikeC4Project';

package/dist/index.js

@@ -7,12 +7,13 @@ import { useDiagramContext, useOnDiagramEvent } from "./hooks/useDiagram.js";
 import { useCurrentView, useCurrentViewId } from "./hooks/useCurrentView.js";
 import { useOptionalCurrentViewModel } from "./context/LikeC4ModelContext.js";
 import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "./hooks/useLikeC4Model.js";
+import { useLikeC4Styles } from "./hooks/useLikeC4Styles.js";
 import { createLikeC4Editor } from "./editor/LikeC4EditorCallbacks.js";
 import { LikeC4EditorProvider } from "./editor/LikeC4EditorProvider.js";
 import { useCurrentViewModel } from "./hooks/useCurrentViewModel.js";
 import { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from "./hooks/useLikeC4Project.js";
-import { useLikeC4Styles } from "./hooks/useLikeC4Styles.js";
 import { pickViewBounds } from "./utils/view-bounds.js";
+import { useDiagramCompareLayout } from "./hooks/useDiagramCompareLayout.js";
 import { SearchContext, normalizeSearch, useSearchContext } from "./search/SearchContext.js";
 import { SearchPanelContent, bodyCss, dialogCss } from "./search/Search.js";
 import { LikeC4Diagram } from "./LikeC4Diagram.js";
@@ -23,4 +24,4 @@ import { LikeC4View } from "./LikeC4View.js";
 import { ReactLikeC4 } from "./ReactLikeC4.js";
 import { LikeC4ProjectsOverview } from "./LikeC4ProjectsOverview.js";
 import { SearchControl } from "./components/SearchControl.js";
-export { DefaultMantineProvider, FramerMotionConfig, IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, ReactLikeC4, SearchContext, SearchControl, SearchPanelContent, StaticLikeC4Diagram, createLikeC4Editor, normalizeSearch, pickViewBounds, bodyCss as searchBodyCss, dialogCss as searchDialogCss, selectDiagramContext, selectDiagramSnapshot, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramContext, useDiagramSelector, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useSearchContext, useUpdateEffect };
+export { DefaultMantineProvider, FramerMotionConfig, IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, ReactLikeC4, SearchContext, SearchControl, SearchPanelContent, StaticLikeC4Diagram, createLikeC4Editor, normalizeSearch, pickViewBounds, bodyCss as searchBodyCss, dialogCss as searchDialogCss, selectDiagramContext, selectDiagramSnapshot, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramCompareLayout, useDiagramContext, useDiagramSelector, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useSearchContext, useUpdateEffect };

package/dist/likec4diagram/DiagramUI.js

@@ -32,10 +32,11 @@ var LikeC4DiagramUI = memo(() => {
 	const { enableControls, enableNotations, enableSearch, enableRelationshipDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
 	const rerender = useRerender();
 	const { isSequenceView, isActiveWalkthrough, ...actors } = useDiagramSelector(selectChildren);
+	const handleReset = useCallback(() => {
+		rerender();
+	}, []);
 	return /* @__PURE__ */ jsxs(ErrorBoundary, {
-		onReset: useCallback(() => {
-			rerender();
-		}, []),
+		onReset: handleReset,
 		children: [
 			isSequenceView && /* @__PURE__ */ jsx(FloatingSequenceActors, { isActiveWalkthrough }),
 			isActiveWalkthrough && /* @__PURE__ */ jsx(SequenceOutlinePanel, {}),

package/dist/likec4diagram/DiagramXYFlow.d.ts

@@ -2,5 +2,6 @@ import { PropsWithChildren } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { Simplify } from 'type-fest';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
+export declare function resolveInteractionEnabled(enabled: boolean, override: boolean | undefined, isEditorBusy: boolean): boolean;
 export type LikeC4DiagramXYFlowProps = PropsWithChildren<Simplify<Pick<LikeC4DiagramProperties<any>, 'background' | 'reactFlowProps' | 'renderNodes'>>>;
 export declare function LikeC4DiagramXYFlow({ background, reactFlowProps, children, renderNodes, }: LikeC4DiagramXYFlowProps): JSX.Element;

package/dist/likec4diagram/DiagramXYFlow.js

@@ -8,6 +8,7 @@ import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
 import { selectDiagramSnapshot, useDiagram, useDiagramSelector } from "../hooks/safeContext.js";
 import { viewBounds } from "./state/utils.js";
 import { deriveToggledFeatures } from "./state/machine.setup.js";
+import { useEditorActorStateHasTag } from "../hooks/useEditorActor.js";
 import { BuiltinEdges, BuiltinNodes } from "./custom/index.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { cx } from "@likec4/styles/css";
@@ -54,12 +55,14 @@ var viewportToTopLeft = (ctx) => {
 		zoom: 1
 	};
 };
+function resolveInteractionEnabled(enabled, override, isEditorBusy) {
+	return (override ?? enabled) && !isEditorBusy;
+}
 var selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
 	const { enableReadOnly } = deriveToggledFeatures(ctx);
 	const editorSnapshot = enableReadOnly ? null : children.editor?.getSnapshot();
 	const isNotEditingEdge = enableReadOnly || editorSnapshot?.context.editing?.subject !== "edge";
-	const isEditorBusy = editorSnapshot?.hasTag("busy") ?? false;
-	let nodesDraggable = !enableReadOnly && ctx.nodesDraggable && !isEditorBusy;
+	let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
 	if (ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic") nodesDraggable = false;
 	return {
 		enableReadOnly,
@@ -69,7 +72,7 @@ var selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
 		pannable: ctx.pannable,
 		zoomable: ctx.zoomable,
 		nodesDraggable,
-		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge && !isEditorBusy,
+		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
 		fitViewPadding: ctx.fitViewPadding,
 		enableFitView: ctx.features.enableFitView,
 		enableControls: ctx.features.enableControls && ctx.features.enableFitView,
@@ -79,8 +82,12 @@ var selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
 	return shallowEqual(a, b) && shallowEqual(aNodes, bNodes) && shallowEqual(aEdges, bEdges);
 });
 function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, children, renderNodes }) {
+	const { nodesDraggable: nodesDraggableOverride, elementsSelectable: nodesSelectableOverride, ...safeReactFlowProps } = reactFlowProps;
 	const diagram = useDiagram();
 	let { enableReadOnly, initialized, nodes, edges, enableFitView, nodesDraggable, nodesSelectable, enableControls, ...props } = useDiagramSelector(selectXYProps);
+	const isEditorBusy = useEditorActorStateHasTag("busy");
+	nodesDraggable = resolveInteractionEnabled(nodesDraggable, nodesDraggableOverride, isEditorBusy);
+	nodesSelectable = resolveInteractionEnabled(nodesSelectable, nodesSelectableOverride, isEditorBusy);
 	const { onNodeContextMenu, onCanvasContextMenu, onEdgeContextMenu, onNodeClick, onEdgeClick, onCanvasClick, onCanvasDblClick } = useDiagramEventHandlers();
 	const { reducedGraphics, $panning } = useRootContainer();
 	const isReducedGraphics = reducedGraphics;
@@ -234,15 +241,15 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 		}),
 		...onCanvasContextMenu && { onPaneContextMenu: onCanvasContextMenu },
 		...enableFitView && { onViewportResize },
-		nodesDraggable,
-		nodesSelectable,
 		nodesFocusable: true,
 		edgesFocusable: true,
 		elevateEdgesOnSelect: !enableReadOnly,
 		zIndexMode: "manual",
 		...nodesDraggable && layoutConstraints,
 		...props,
-		...reactFlowProps,
+		...safeReactFlowProps,
+		nodesDraggable,
+		nodesSelectable,
 		children: [enableControls && /* @__PURE__ */ jsx(Controls$1, { padding: props.fitViewPadding }), children]
 	});
 }
@@ -257,4 +264,4 @@ var Controls$1 = /* @__PURE__ */ __name(({ padding }) => /* @__PURE__ */ jsx(Con
 	position: "bottom-left"
 }), "Controls");
 //#endregion
-export { LikeC4DiagramXYFlow };
+export { LikeC4DiagramXYFlow, resolveInteractionEnabled };

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -362,9 +362,7 @@ function ControlPoints({ isControlPointDragging, edgeProps, controlPoints, onMov
 				addSelectedEdges([edgeId]);
 				onLmbControlPointerDown(index, e, domNode);
 				break;
-			case 2:
-				onRmbControlPointerDown(index, e);
-				break;
+			case 2: onRmbControlPointerDown(index, e);
 		}
 	});
 	const onControlPointerDblClick = useCallbackRef((e) => {

package/dist/likec4diagram/custom/edges/SequenceStepEdge.js

@@ -37,9 +37,7 @@ function SequenceStepEdge(props) {
 		case isBack:
 			labelX = props.sourceX - LABEL_OFFSET;
 			break;
-		default:
-			labelX = props.sourceX + LABEL_OFFSET;
-			break;
+		default: labelX = props.sourceX + LABEL_OFFSET;
 	}
 	const { state, stepnum } = props.data;
 	return /* @__PURE__ */ jsxs(EdgeContainer, {

package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.js

@@ -38,7 +38,7 @@ function useRelationshipEdgePath({ props: { sourceX, sourceY, source, target, ta
 		height: targetNodeHeight
 	};
 	const nodeMargin = 6;
-	return nonNullable(curve(data.dir === "back" ? [
+	const points = data.dir === "back" ? [
 		targetCenterPos,
 		getNodeIntersectionFromCenterToPoint(targetNd, first(controlPoints) ?? sourceCenterPos, nodeMargin),
 		...controlPoints,
@@ -50,7 +50,8 @@ function useRelationshipEdgePath({ props: { sourceX, sourceY, source, target, ta
 		...controlPoints,
 		getNodeIntersectionFromCenterToPoint(targetNd, last(controlPoints) ?? sourceCenterPos, nodeMargin),
 		targetCenterPos
-	]));
+	];
+	return nonNullable(curve(points));
 }
 //#endregion
 export { useRelationshipEdgePath };

package/dist/likec4diagram/custom/nodes/nodes.js

@@ -116,8 +116,9 @@ var hasDrifts = (props) => {
 };
 function CompoundElementNode(props) {
 	const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+	const showDrifts = enableCompareWithLatest && hasDrifts(props);
 	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		className: enableCompareWithLatest && hasDrifts(props) ? compoundHasDrifts : void 0,
+		className: showDrifts ? compoundHasDrifts : void 0,
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
@@ -134,8 +135,9 @@ function CompoundElementNode(props) {
 }
 function CompoundDeploymentNode(props) {
 	const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+	const showDrifts = enableCompareWithLatest && hasDrifts(props);
 	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		className: enableCompareWithLatest && hasDrifts(props) ? compoundHasDrifts : void 0,
+		className: showDrifts ? compoundHasDrifts : void 0,
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
@@ -152,8 +154,9 @@ function CompoundDeploymentNode(props) {
 }
 function ViewGroupNode(props) {
 	const { enableCompareWithLatest } = useEnabledFeatures();
+	const showDrifts = enableCompareWithLatest && hasDrifts(props);
 	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		className: enableCompareWithLatest && hasDrifts(props) ? compoundHasDrifts : void 0,
+		className: showDrifts ? compoundHasDrifts : void 0,
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js

@@ -20,9 +20,10 @@ function Toolbar({ title, children, nodeProps, ...props }) {
 	const { selected = false, dragging = false, data: { hovered = false } } = nodeProps;
 	const _isToolbarVisible = hovered && selectedNodesCount === 0 || selected && selectedNodesCount === 1;
 	let delay = 150;
-	if (_isToolbarVisible) if (selected) delay = 100;
-	else delay = 1e3;
-	else if (selectedNodesCount > 0) delay = 50;
+	if (_isToolbarVisible) {
+		if (selected) delay = 100;
+		else delay = 1e3;
+	} else if (selectedNodesCount > 0) delay = 50;
 	const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, delay);
 	if (!isToolbarVisible) return null;
 	return /* @__PURE__ */ jsx(NodeToolbar, {

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -134,7 +134,6 @@ var RelationshipPopover = memo(() => {
 var getEdgeLabelElement = (edgeId, container) => {
 	return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.likec4-edge-middle-point[data-edge-id="${edgeId}"]`) ?? null;
 };
-var POPOVER_PADDING = 8;
 var RelationshipPopoverInternal = ({ viewId, diagramEdge, direct, nested, sourceNode, targetNode, onMouseEnter, onMouseLeave }) => {
 	const ref = useRef(null);
 	const { enableNavigateTo, enableVscode } = useEnabledFeatures();
@@ -180,7 +179,7 @@ var RelationshipPopoverInternal = ({ viewId, diagramEdge, direct, nested, source
 							})}px`
 						});
 					} }),
-					hide({ padding: POPOVER_PADDING * 2 })
+					hide({ padding: 16 })
 				]
 			}).then(({ x, y, middlewareData }) => {
 				if (wasCanceled) return;

package/dist/likec4diagram/state/assign.js

@@ -86,7 +86,7 @@ function resetEdgeControlPoints(nodeLookup, edge) {
 	if (source === target) {
 		const loopSize = 80;
 		const centerOfTopBoundary = vector(0, source.height || 0).multiply(-.5).add(sourceCenter);
-		return [centerOfTopBoundary.add(vector(-80 / 2.5, -80)).round().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -80)).round().toObject()];
+		return [centerOfTopBoundary.add(vector(-32, -80)).round().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -80)).round().toObject()];
 	}
 	const sourceToTargetVector = targetCenter.subtract(sourceCenter);
 	const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);

package/dist/likec4diagram/state/createViewChange.js

@@ -1,5 +1,4 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { bezierControlPoints, isSamePoint } from "../../utils/xyflow.js";
 import { calcViewBounds } from "../../utils/view-bounds.js";
 import { hasAtLeast, map } from "remeda";
 import { getNodeDimensions } from "@xyflow/system";
@@ -7,7 +6,6 @@ import { getNodeDimensions } from "@xyflow/system";
 function createViewChange(parentContext) {
 	const { view: { drifts: _1, _layout: _2, ...view }, xynodes, xystore } = parentContext;
 	const { nodeLookup, edgeLookup } = xystore.getState();
-	const movedNodes = /* @__PURE__ */ new Set();
 	const nodes = map(view.nodes, (node) => {
 		const internal = nodeLookup.get(node.id);
 		if (!internal) {
@@ -17,7 +15,6 @@ function createViewChange(parentContext) {
 		const xynodedata = xynodes.find((n) => n.data.id === node.id)?.data ?? internal.data;
 		const position = internal.internals.positionAbsolute;
 		const { width, height } = getNodeDimensions(internal);
-		if (!isSamePoint(position, node) || node.width !== width || node.height !== height) movedNodes.add(node.id);
 		return {
 			...node,
 			shape: xynodedata.shape,
@@ -36,9 +33,7 @@ function createViewChange(parentContext) {
 			return edge;
 		}
 		const data = xyedge.data;
-		let controlPoints = data.controlPoints ?? [];
-		const sourceOrTargetMoved = movedNodes.has(xyedge.source) || movedNodes.has(xyedge.target);
-		if (controlPoints.length === 0 && sourceOrTargetMoved) controlPoints = bezierControlPoints(data.points);
+		const controlPoints = data.controlPoints ?? [];
 		const _updated = {
 			...edge,
 			points: data.points

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

@@ -250,7 +250,8 @@ var layoutAlign = (params) => machine.createAction(({ context, event }) => {
 	}
 	const xystore = nonNullable(context.xystore, "xystore is not initialized");
 	const { nodeLookup, parentLookup } = xystore.getState();
-	const nodesToAlign = [...difference$1(new Set(nodeLookup.values().filter((n) => n.selected).map((n) => n.id)), new Set(parentLookup.keys()))];
+	const selectedNodes = new Set(nodeLookup.values().filter((n) => n.selected).map((n) => n.id));
+	const nodesToAlign = [...difference$1(selectedNodes, new Set(parentLookup.keys()))];
 	if (!hasAtLeast(nodesToAlign, 2)) {
 		console.warn("At least 2 nodes must be selected to align");
 		return;
@@ -737,7 +738,10 @@ var updateView = () => machine.enqueueActions(({ enqueue, event, context }) => {
 	let recenter = !context.viewportChangedManually && !context.focusedNode && !context.activeWalkthrough;
 	recenter = recenter || context.toggledFeatures.enableCompareWithLatest === true && !!nextView._layout && context.view._layout !== nextView._layout;
 	if (nextView._type === "dynamic" && context.view._type === "dynamic") {
-		if (nextView.variant === context.view.variant && nextView.variant !== context.dynamicViewVariant) enqueue(setViewportCenter(BBox$1.center(viewBounds(context, nextView))));
+		if (nextView.variant === context.view.variant && nextView.variant !== context.dynamicViewVariant) {
+			const nextCenter = BBox$1.center(viewBounds(context, nextView));
+			enqueue(setViewportCenter(nextCenter));
+		}
 	}
 	if (recenter) {
 		enqueue(cancelFitDiagram());

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

@@ -67,6 +67,14 @@ var isReadOnly = (context) => deriveToggledFeatures(context).enableReadOnly;
 function isActiveSequenceWalkthrough(context) {
 	return isDynamicView(context.view) && context.dynamicViewVariant === "sequence" && !!context.activeWalkthrough && hasProp(context.view, "flow");
 }
+var actors = defineActors({
+	hotkey: hotkeyActorLogic,
+	overlays: overlaysActorLogic,
+	search: searchActorLogic,
+	mediaPrint: mediaPrintActorLogic,
+	editor: editorActorLogic,
+	navigationPanel: navigationPanelActorLogic
+});
 var machine = setup({
 	types: {
 		context: {},
@@ -75,14 +83,7 @@ var machine = setup({
 		events: {},
 		emitted: {}
 	},
-	actors: defineActors({
-		hotkey: hotkeyActorLogic,
-		overlays: overlaysActorLogic,
-		search: searchActorLogic,
-		mediaPrint: mediaPrintActorLogic,
-		editor: editorActorLogic,
-		navigationPanel: navigationPanelActorLogic
-	}),
+	actors,
 	guards: {
 		"isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
 		"enabled: Editor": ({ context }) => context.features.enableEditor,

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

@@ -172,9 +172,9 @@ var walkthrough = machine.createStateConfig({
 			actions: [fitFocusedBounds(), emitEdgeClick()]
 		}, { actions: [
 			assign$1(({ event, context }) => {
-				invariant(event.edge.type === "seq-step", `Expected seq-step edge, but got "${event.edge.type}"`);
 				invariant(!!context.activeWalkthrough);
 				const stepId = event.edge.data.id;
+				invariant(isStepPath$1(stepId), `Expected step edge, but got "${stepId}"`);
 				return { activeWalkthrough: {
 					...context.activeWalkthrough,
 					stepId,

package/dist/likec4diagram/state/utils.js

@@ -56,7 +56,8 @@ function findDiagramEdge(ctx, xyedgeId) {
 * If {@link nextView} is provided, returns the bounds of the next view.
 */
 function viewBounds(ctx, nextView) {
-	return pickViewBounds(nextView ?? ctx.view, ctx.dynamicViewVariant);
+	const view = nextView ?? ctx.view;
+	return pickViewBounds(view, ctx.dynamicViewVariant);
 }
 function focusedBounds(params) {
 	const b = params.context.xynodes.reduce((acc, node) => {
@@ -107,7 +108,9 @@ function activeSequenceBounds(params) {
 			})
 		};
 	}
-	const actorsBounds = getNodesBounds([nonNullable(xystate.nodeLookup.get(stepEdge.source)), nonNullable(xystate.nodeLookup.get(stepEdge.target))], xystate);
+	const sourceNode = nonNullable(xystate.nodeLookup.get(stepEdge.source));
+	const targetNode = nonNullable(xystate.nodeLookup.get(stepEdge.target));
+	const actorsBounds = getNodesBounds([sourceNode, targetNode], xystate);
 	let stepBounds = edgeBounds ? BBox.merge(edgeBounds, actorsBounds) : actorsBounds;
 	return {
 		duration: 500,
@@ -157,7 +160,8 @@ function findCorrespondingNode(context, event) {
 }
 function calcViewportForBounds(context, bounds) {
 	let { width, height, transform } = context.xystore.getState();
-	return getViewportForBounds(bounds, width, height, MinZoom, Math.max(transform[2], 1), context.fitViewPadding);
+	const maxZoom = Math.max(transform[2], 1);
+	return getViewportForBounds(bounds, width, height, MinZoom, maxZoom, context.fitViewPadding);
 }
 //#endregion
 export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, getEdgeBounds, nodeRef, typedSystem, viewBounds };

package/dist/likec4diagram/ui/FloatingSequenceActors.js

@@ -39,9 +39,10 @@ var selectActorNodes = selectXYStore((state) => {
 * Shows sequence actors at the top of the diagram, if current viewport does not fit them
 */
 function FloatingSequenceActors({ isActiveWalkthrough }) {
+	const ids = useXYStore(selectActorNodes);
 	return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
 		anchorY: "top",
-		children: useXYStore(selectActorNodes).map((id) => /* @__PURE__ */ jsx(SequenceActor, {
+		children: ids.map((id) => /* @__PURE__ */ jsx(SequenceActor, {
 			id,
 			top: isActiveWalkthrough ? 24 : 64
 		}, id))

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

@@ -169,14 +169,16 @@ var leadingIcons = css.raw({
 	gap: "2",
 	height: rowLeadingHeight
 });
-var MultilineLabelSpan = styled("span", { base: css.raw({
+/** Multiline label: preserves explicit newlines, wraps long lines, first line aligned with the badge. */
+var multilineLabelText = css.raw({
 	flex: "1",
 	minWidth: "0",
 	fontSize: "xs",
 	lineHeight: rowLeadingHeight,
 	whiteSpace: "pre-line",
 	overflowWrap: "anywhere"
-}) });
+});
+var MultilineLabelSpan = styled("span", { base: multilineLabelText });
 var selectFlow = selectDiagramContext((s) => {
 	const title = extractViewTitleFromPath(s.view.title ?? "Untitled");
 	const description = s.view.description;

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,6 +1,6 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useXYStoreApi } from "../hooks/useXYFlow.js";
-import { bezierControlPoints, nodeToRect as nodeToRect$1 } from "../utils/xyflow.js";
+import { nodeToRect as nodeToRect$1 } from "../utils/xyflow.js";
 import { useDiagram } from "../hooks/safeContext.js";
 import { vector as vector$1 } from "../utils/index.js";
 import { useMemo, useRef } from "react";
@@ -139,7 +139,7 @@ function makeEdgeModifier(edge, anchor) {
 * Creates a modifier function that moves edge points when one of its nodes is moved.
 */
 function makeRelativeEdgeModifier(edge, movingRect, anchorNode, staticNode) {
-	const controlPoints = edge.data.controlPoints ?? bezierControlPoints(edge.data.points);
+	const controlPoints = edge.data.controlPoints;
 	const anchorV = vector$1(BBox$1.center(anchorNode));
 	const staticV = vector$1(BBox$1.center(staticNode));
 	const staticToAnchor = anchorV.subtract(staticV);
@@ -158,8 +158,13 @@ function makeRelativeEdgeModifier(edge, movingRect, anchorNode, staticNode) {
 		};
 		const d = vector$1(dx, dy);
 		const relativePoint = (pt) => {
+			if (staticToAnchorLength === 0) return {
+				x: pt.x,
+				y: pt.y
+			};
 			const point = vector$1(pt);
-			const coeff = clamp(point.subtract(staticV).dot(staticToAnchor) / staticToAnchorLength ** 2, {
+			const projLength = point.subtract(staticV).dot(staticToAnchor);
+			const coeff = clamp(projLength / staticToAnchorLength ** 2, {
 				min: -1,
 				max: 1
 			});
@@ -173,7 +178,17 @@ function makeRelativeEdgeModifier(edge, movingRect, anchorNode, staticNode) {
 			id: edge.id,
 			type: "replace",
 			item: produce(current, (draft) => {
-				draft.data.controlPoints = controlPoints.map(relativePoint);
+				if (controlPoints) draft.data.controlPoints = controlPoints.map(relativePoint);
+				else {
+					draft.data.points = map(edge.data.points, ([x, y]) => {
+						const point = relativePoint({
+							x,
+							y
+						});
+						return [point.x, point.y];
+					});
+					draft.data.controlPoints = controlPoints;
+				}
 				if (edge.data.labelBBox) {
 					draft.data.labelBBox ??= edge.data.labelBBox;
 					const { x, y } = relativePoint(edge.data.labelBBox);

package/dist/likec4diagram/xyflow-sequence/layouter.js

@@ -198,8 +198,10 @@ var SequenceViewLayouter = class {
 		target.maxRow = Math.max(target.maxRow, step.to.row);
 		const [left, right] = source.column <= target.column ? [source, target] : [target, source];
 		const width = (step.label?.width ?? 100) + 50;
-		if (Math.abs(target.column - source.column) <= 1) if (left !== right) this.constraint(left.centerX.plus(width), "<=", right.centerX);
-		else this.constraint(left.centerX.plus(width), "<=", left.offset.right);
+		if (Math.abs(target.column - source.column) <= 1) {
+			if (left !== right) this.constraint(left.centerX.plus(width), "<=", right.centerX);
+			else this.constraint(left.centerX.plus(width), "<=", left.offset.right);
+		}
 		let height = step.label?.height ? step.label.height + 50 + 24 : 100;
 		height = Math.max(height, 100) + step.offset;
 		this.ensureRow(step.from.row, height);
@@ -262,7 +264,6 @@ var SequenceViewLayouter = class {
 					this.put(offset.bottom).before(y2, PADDING);
 				}
 				this.put(y2).before(bottom);
-				break;
 		}
 		for (var col = from.column; col <= to.column; col++) {
 			const offset = this.actorBox(col).offset;
@@ -400,7 +401,8 @@ var SequenceViewLayouter = class {
 			}
 		};
 		const createSubflowArea = (subflow) => {
-			const rect = rectFromSteps(selectSteps(subflow.id));
+			const steps = selectSteps(subflow.id);
+			const rect = rectFromSteps(steps);
 			let space;
 			switch (true) {
 				case flowGuards.isAltOrTry(subflow):
@@ -420,9 +422,7 @@ var SequenceViewLayouter = class {
 						bottom: 0
 					};
 					break;
-				default:
-					space = spacing;
-					break;
+				default: space = spacing;
 			}
 			const area = {
 				...this.wrapAroundRect(rect, space),
@@ -507,9 +507,7 @@ var SequenceViewLayouter = class {
 				this.constraint(left, "==", right, Strength.weak);
 				break;
 			case "<= 0":
-			case ">= 0":
-				this.constraint(left, "== 0", void 0, Strength.weak);
-				break;
+			case ">= 0": this.constraint(left, "== 0", void 0, Strength.weak);
 		}
 		return constraint;
 	}

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -84,7 +84,8 @@ var compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR);
 var SearchResults = memo(() => {
 	const likec4model = useLikeC4Model();
 	const actor = useNavigationActor();
-	const deferredSearchQuery = useDeferredValue(useSelector(actor.actorRef, selectSearchQuery));
+	const searchQuery = useSelector(actor.actorRef, selectSearchQuery);
+	const deferredSearchQuery = useDeferredValue(searchQuery);
 	const isSearchByPath = deferredSearchQuery.includes(VIEW_FOLDERS_SEPARATOR);
 	const highlight = isSearchByPath ? deferredSearchQuery.split(VIEW_FOLDERS_SEPARATOR) : deferredSearchQuery;
 	const [found, setFound] = useState([]);

package/dist/navigationpanel/controls/DetailsControls.js

@@ -30,6 +30,7 @@ var selector = selectNavigationContext((context) => {
 var DetailsControls = (props) => {
 	const [opened, setOpened] = useState(false);
 	const data = useNavigationActorSelector(selector);
+	const portalProps = useMantinePortalProps();
 	return /* @__PURE__ */ jsxs(Popover, {
 		position: "bottom-end",
 		shadow: "xl",
@@ -41,7 +42,7 @@ var DetailsControls = (props) => {
 		offset: { mainAxis: 4 },
 		opened,
 		onChange: setOpened,
-		...useMantinePortalProps(),
+		...portalProps,
 		...props,
 		children: [/* @__PURE__ */ jsx(ViewDetailsCardTrigger, {
 			linksCount: data.links.length,

package/dist/navigationpanel/editorpanel/ApplySemanticLayout.js

@@ -9,10 +9,11 @@ import { jsx } from "react/jsx-runtime";
 //#region src/navigationpanel/editorpanel/ApplySemanticLayout.tsx
 var ApplySemanticLayout = memo(({ visible = true }) => {
 	const diagram = useDiagram();
+	const isBusy = useEditorActorStateHasTag("ai-semantic-layout");
 	return /* @__PURE__ */ jsx(Tooltip, {
 		label: "Semantic Layout with AI",
 		children: /* @__PURE__ */ jsx(PanelActionIcon, {
-			loading: useEditorActorStateHasTag("ai-semantic-layout"),
+			loading: isBusy,
 			initial: { display: visible ? "block" : "none" },
 			animate: {
 				display: visible ? "block" : "none",

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js

@@ -154,8 +154,9 @@ var SpacingSliders = forwardRef(({ isVertical, nodeSep, rankSep, onChange }, _re
 	let nodeSepValue = Math.round(value.x * MAX_SPACING);
 	let rankSepValue = Math.round(value.y * MAX_SPACING);
 	if (!isVertical) [nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue];
+	const mergedRef = useMergedRef(ref, _ref);
 	return /* @__PURE__ */ jsxs(Box, {
-		ref: useMergedRef(ref, _ref),
+		ref: mergedRef,
 		className: spacingSliderBody,
 		pt: "100%",
 		children: [/* @__PURE__ */ jsx(Box, {

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.d.ts

@@ -1,2 +1,4 @@
+import { TooltipProps } from '@mantine/core';
 import { MemoExoticComponent } from 'react';
+export declare function manualLayoutTooltipProps(isPopoverOpen: boolean): Pick<TooltipProps, 'opened'>;
 export declare const ManualLayoutToolsButton: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -5,7 +5,7 @@ import { PanelActionIcon } from "../_common.js";
 import { Tooltip as Tooltip$1 } from "./_common.js";
 import { css } from "@likec4/styles/css";
 import { IconLayoutAlignBottom, IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignMiddle, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutBoardSplit, IconLayoutCollage, IconRouteOff } from "@tabler/icons-react";
-import { memo } from "react";
+import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover, PopoverDropdown, PopoverTarget, TooltipGroup } from "@mantine/core";
 import { hstack } from "@likec4/styles/patterns";
@@ -26,15 +26,23 @@ var Action = ({ label, icon, onClick }) => /* @__PURE__ */ jsx(Tooltip$1, {
 		children: icon
 	})
 });
+function manualLayoutTooltipProps(isPopoverOpen) {
+	return isPopoverOpen ? { opened: false } : {};
+}
 var ManualLayoutToolsButton = memo(() => {
 	const diagram = useDiagram();
+	const portalProps = useMantinePortalProps();
+	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 	return /* @__PURE__ */ jsxs(Popover, {
+		opened: isPopoverOpen,
+		onChange: setIsPopoverOpen,
 		position: "right",
 		offset: { mainAxis: 12 },
 		clickOutsideEvents: ["pointerdown"],
-		...useMantinePortalProps(),
+		...portalProps,
 		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip$1, {
 			label: "Manual layouting tools",
+			...manualLayoutTooltipProps(isPopoverOpen),
 			children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) })
 		}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
 			className: hstack({
@@ -122,4 +130,4 @@ var ManualLayoutToolsButton = memo(() => {
 });
 ManualLayoutToolsButton.displayName = "ManualLayoutToolsButton";
 //#endregion
-export { ManualLayoutToolsButton };
+export { ManualLayoutToolsButton, manualLayoutTooltipProps };