@likec4/diagram 1.56.0 → 1.58.0

package/dist/likec4diagram/DiagramXYFlow.js

@@ -2,13 +2,12 @@ import "../_virtual/_rolldown/runtime.js";
 import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
 import { depsShallowEqual, useUpdateEffect as useUpdateEffect$1 } from "../hooks/useUpdateEffect.js";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
-import { useIsReducedGraphics, usePanningAtom } from "../context/RootContainerContext.js";
+import { useRootContainer } from "../context/RootContainerContext.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
 import { useDiagram } from "../hooks/safeContext.js";
 import { selectDiagramActor, useDiagramSnapshot } from "../hooks/useDiagram.js";
 import { viewBounds } from "./state/utils.js";
 import { deriveToggledFeatures } from "./state/machine.setup.js";
-import { memoNode } from "../base-primitives/memoNode.js";
 import { BuiltinEdges, BuiltinNodes } from "./custom/index.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { cx } from "@likec4/styles/css";
@@ -23,13 +22,13 @@ var edgeTypes = {
 	"seq-step": BuiltinEdges.SequenceStepEdge
 };
 var builtinNodes = {
-	element: memoNode(BuiltinNodes.ElementNode),
-	deployment: memoNode(BuiltinNodes.DeploymentNode),
-	"compound-element": memoNode(BuiltinNodes.CompoundElementNode),
-	"compound-deployment": memoNode(BuiltinNodes.CompoundDeploymentNode),
-	"view-group": memoNode(BuiltinNodes.ViewGroupNode),
-	"seq-actor": memoNode(BuiltinNodes.SequenceActorNode),
-	"seq-parallel": memoNode(BuiltinNodes.SequenceParallelArea)
+	element: BuiltinNodes.ElementNode,
+	deployment: BuiltinNodes.DeploymentNode,
+	"compound-element": BuiltinNodes.CompoundElementNode,
+	"compound-deployment": BuiltinNodes.CompoundDeploymentNode,
+	"view-group": BuiltinNodes.ViewGroupNode,
+	"seq-actor": BuiltinNodes.SequenceActorNode,
+	"seq-parallel": BuiltinNodes.SequenceParallelArea
 };
 function prepareNodeTypes(nodeTypes) {
 	if (!nodeTypes || isEmpty(nodeTypes)) return builtinNodes;
@@ -53,8 +52,10 @@ var viewportToTopLeft = (ctx) => {
 };
 var selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
 	const { enableReadOnly } = deriveToggledFeatures(ctx);
-	const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing !== "edge";
-	let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
+	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;
 	if (ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic") nodesDraggable = false;
 	return {
 		enableReadOnly,
@@ -64,7 +65,7 @@ var selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
 		pannable: ctx.pannable,
 		zoomable: ctx.zoomable,
 		nodesDraggable,
-		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
+		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge && !isEditorBusy,
 		fitViewPadding: ctx.fitViewPadding,
 		enableFitView: ctx.features.enableFitView,
 		...!ctx.features.enableFitView && { viewport: viewportToTopLeft(ctx) }
@@ -74,9 +75,10 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 	const diagram = useDiagram();
 	let { enableReadOnly, initialized, nodes, edges, enableFitView, nodesDraggable, nodesSelectable, ...props } = useDiagramSnapshot(selectXYProps);
 	const { onNodeContextMenu, onCanvasContextMenu, onEdgeContextMenu, onNodeClick, onEdgeClick, onCanvasClick, onCanvasDblClick } = useDiagramEventHandlers();
-	const isReducedGraphics = useIsReducedGraphics();
+	const { reducedGraphics, $panning } = useRootContainer();
+	const isReducedGraphics = reducedGraphics;
 	const layoutConstraints = useLayoutConstraints();
-	const $isPanning = usePanningAtom();
+	const $isPanning = $panning;
 	const isPanning = useTimeout(() => {
 		$isPanning.set(true);
 	}, isReducedGraphics ? 200 : 800);
@@ -128,6 +130,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 		background: initialized ? background : "transparent",
 		fitView: false,
 		onNodeClick: useCallbackRef$1((e, node) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			diagram.send({
 				type: "xyflow.nodeClick",
@@ -136,6 +139,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			onNodeClick?.(diagram.findDiagramNode(node.id), e);
 		}),
 		onEdgeClick: useCallbackRef$1((e, edge) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			diagram.send({
 				type: "xyflow.edgeClick",
@@ -144,12 +148,20 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
 		}),
 		onEdgeDoubleClick: useCallbackRef$1((e, edge) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			diagram.send({
 				type: "xyflow.edgeDoubleClick",
 				edge
 			});
 		}),
+		onDelete: useCallbackRef$1(({ nodes, edges }) => {
+			diagram.editorActor().send({
+				type: "delete.nodes-edges",
+				nodeIds: nodes.map((node) => node.data.id),
+				edgeIds: edges.map((edge) => edge.data.id)
+			});
+		}),
 		onPaneClick: useCallbackRef$1((e) => {
 			e.stopPropagation();
 			diagram.send({ type: "xyflow.paneClick" });

package/dist/likec4diagram/custom/edges/EdgeDrifts.d.ts

@@ -3,4 +3,4 @@ export type EdgeDriftsProps = {
     edgeProps: Types.EdgeProps;
     svgPath: string;
 };
-export declare function EdgeDrifts({ edgeProps: { data }, svgPath, }: EdgeDriftsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function EdgeDrifts({ edgeProps: { data }, svgPath, }: EdgeDriftsProps): import("react").JSX.Element | null;

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

@@ -13,7 +13,7 @@ import { EdgeLabelContainer } from "../../../base-primitives/edge/EdgeLabelConta
 import { EdgePath } from "../../../base-primitives/edge/EdgePath.js";
 import { memoEdge } from "../../../base-primitives/memoEdge.js";
 import { EdgeDrifts } from "./EdgeDrifts.js";
-import { controlPoint, controlPointsContainer } from "./edges.css.js";
+import { controlPoint, controlPointsContainer, labelDraggable } from "./edges.css.js";
 import { useControlPoints } from "./useControlPoints.js";
 import { useRelationshipEdgePath } from "./useRelationshipEdgePath.js";
 import { css, cx } from "@likec4/styles/css";
@@ -33,7 +33,11 @@ var RelationshipEdge = memoEdge((props) => {
 	const [isControlPointDragging, setIsControlPointDragging] = useState(false);
 	const isControlPointDraggingRef = useRef(isControlPointDragging);
 	isControlPointDraggingRef.current = isControlPointDragging;
+	const [isLabelDragging, setIsLabelDragging] = useState(false);
+	const isLabelDraggingRef = useRef(isLabelDragging);
+	isLabelDraggingRef.current = isLabelDragging;
 	const xyflow = useXYFlow();
+	const xyflowStore = useXYStoreApi();
 	const diagram = useDiagram();
 	const { enableNavigateTo, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
 	const enabledEditing = !enableReadOnly;
@@ -52,32 +56,58 @@ var RelationshipEdge = memoEdge((props) => {
 		y: labelXY?.y ?? labelY
 	}, isSamePoint);
 	useUpdateEffect$1(() => {
-		if (isControlPointDraggingRef.current) return;
+		if (isControlPointDraggingRef.current || isLabelDraggingRef.current) return;
 		setLabelPos({
 			x: labelX,
 			y: labelY
 		});
 	}, [labelX, labelY]);
 	const svgPathRef = useRef(null);
+	const labelOffsetRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const captureLabelOffset = useCallbackRef(() => {
+		const path = svgPathRef.current;
+		if (data.isLabelCustomized && path && labelBBox) {
+			const center = getEdgeCenter(path);
+			labelOffsetRef.current = {
+				x: labelBBox.x - center.x,
+				y: labelBBox.y - center.y
+			};
+		} else labelOffsetRef.current = {
+			x: 0,
+			y: 0
+		};
+	});
 	useRafEffect(() => {
 		const path = svgPathRef.current;
 		if (!path || !isControlPointDragging) return;
-		setLabelPos(getEdgeCenter(path));
+		const center = getEdgeCenter(path);
+		const offset = labelOffsetRef.current;
+		setLabelPos({
+			x: center.x + offset.x,
+			y: center.y + offset.y
+		});
 	}, [edgePath, isControlPointDragging]);
 	const updateEdgeData = useCallbackRef((controlPoints) => {
-		const point = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
-		if (point) diagram.updateEdgeData(id, {
-			controlPoints,
-			labelBBox: {
-				...labelBBox,
-				...point
-			}
-		});
-		else diagram.updateEdgeData(id, { controlPoints });
+		const center = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
+		if (center) {
+			const offset = labelOffsetRef.current;
+			diagram.updateEdgeData(id, {
+				controlPoints,
+				labelBBox: {
+					...labelBBox,
+					x: center.x + offset.x,
+					y: center.y + offset.y
+				}
+			});
+		} else diagram.updateEdgeData(id, { controlPoints });
 		diagram.stopEditing(true);
 		setIsControlPointDragging(false);
 	});
 	const onControlPointerStartMove = useCallbackRef(() => {
+		captureLabelOffset();
 		diagram.startEditing("edge");
 		setIsControlPointDragging(true);
 	});
@@ -92,6 +122,7 @@ var RelationshipEdge = memoEdge((props) => {
 		});
 	});
 	const onControlPointerDelete = useCallbackRef((points) => {
+		captureLabelOffset();
 		diagram.startEditing("edge");
 		setIsControlPointDragging(true);
 		setControlPoints(points);
@@ -115,6 +146,86 @@ var RelationshipEdge = memoEdge((props) => {
 		diagram.updateEdgeData(id, { controlPoints: newControlPoints });
 		diagram.stopEditing(true);
 	});
+	const updateLabelPosition = useCallbackRef((pos) => {
+		if (labelBBox) diagram.updateEdgeData(id, {
+			labelBBox: {
+				...labelBBox,
+				x: pos.x,
+				y: pos.y
+			},
+			isLabelCustomized: true
+		});
+		diagram.stopEditing(true);
+		setIsLabelDragging(false);
+	});
+	/**
+	* Handle pointer down on the edge label to drag it to a custom position.
+	* Mirrors the control-point LMB drag.
+	*/
+	const onLabelPointerDown = useCallbackRef((e) => {
+		if (e.pointerType !== "mouse" || e.button !== 0 || !labelBBox || isControlPointDraggingRef.current) return;
+		const { domNode, edges, addSelectedEdges, unselectNodesAndEdges } = xyflowStore.getState();
+		if (!domNode) return;
+		e.stopPropagation();
+		if (!selected) {
+			unselectNodesAndEdges({ edges: edges.filter((ed) => ed.selected && ed.id !== id) });
+			addSelectedEdges([id]);
+		}
+		let hasMoved = false;
+		const initialPoint = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		const clientPoint = { ...initialPoint };
+		const flowStart = xyflow.screenToFlowPosition(initialPoint, { snapToGrid: false });
+		const grab = {
+			x: flowStart.x - labelBBox.x,
+			y: flowStart.y - labelBBox.y
+		};
+		let pos = {
+			x: labelBBox.x,
+			y: labelBBox.y
+		};
+		let animationFrameId = null;
+		const onPointerMove = (ev) => {
+			clientPoint.x = ev.clientX;
+			clientPoint.y = ev.clientY;
+			if (!isSamePoint(initialPoint, clientPoint)) {
+				if (!hasMoved) {
+					hasMoved = true;
+					diagram.startEditing("edge");
+					setIsLabelDragging(true);
+				}
+				animationFrameId ??= requestAnimationFrame(() => {
+					animationFrameId = null;
+					const { x, y } = xyflow.screenToFlowPosition(clientPoint, { snapToGrid: false });
+					pos = {
+						x: Math.round(x - grab.x),
+						y: Math.round(y - grab.y)
+					};
+					setLabelPos(pos);
+				});
+			}
+			ev.stopPropagation();
+		};
+		const onPointerUp = (ev) => {
+			ev.stopPropagation();
+			domNode.removeEventListener("pointermove", onPointerMove, { capture: true });
+			if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+			if (hasMoved) {
+				domNode.addEventListener("click", stopAndPrevent, {
+					capture: true,
+					once: true
+				});
+				updateLabelPosition(pos);
+			}
+		};
+		domNode.addEventListener("pointermove", onPointerMove, { capture: true });
+		domNode.addEventListener("pointerup", onPointerUp, {
+			once: true,
+			capture: true
+		});
+	});
 	if (isControlPointDragging && !props.data.hovered) props = {
 		...props,
 		data: {
@@ -139,12 +250,14 @@ var RelationshipEdge = memoEdge((props) => {
 			}),
 			labelBBox && /* @__PURE__ */ jsx(EdgeLabelContainer, {
 				edgeProps: props,
-				labelPosition: isControlPointDragging ? labelPos : {
+				labelPosition: isControlPointDragging || isLabelDragging ? labelPos : {
 					x: labelX,
 					y: labelY
 				},
+				...enabledEditing && { onPointerDown: onLabelPointerDown },
 				children: /* @__PURE__ */ jsx(EdgeLabel, {
-					pointerEvents: enabledEditing ? "none" : "all",
+					pointerEvents: "all",
+					className: enabledEditing ? labelDraggable : void 0,
 					edgeProps: props,
 					children: navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, { onClick: (e) => {
 						e.stopPropagation();

package/dist/likec4diagram/custom/edges/SequenceStepEdge.d.ts

@@ -1,2 +1,2 @@
 import { Types } from '../../types';
-export declare function SequenceStepEdge(props: Types.EdgeProps<'seq-step'>): import("react/jsx-runtime").JSX.Element;
+export declare function SequenceStepEdge(props: Types.EdgeProps<'seq-step'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/edges/edges.css.d.ts

@@ -1,2 +1,3 @@
 export declare const controlPointsContainer: string;
+export declare const labelDraggable: string;
 export declare const controlPoint: string;

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

@@ -12,6 +12,10 @@ var controlPointsContainer = css({
 	},
 	zIndex: "[100]"
 });
+var labelDraggable = css({
+	cursor: "grab!",
+	_active: { cursor: "grabbing!" }
+});
 var controlPoint = css({
 	fill: `[var(--xy-edge-stroke)]`,
 	stroke: `transparent`,
@@ -41,4 +45,4 @@ var controlPoint = css({
 	_groupActive: { cursor: "grabbing" }
 });
 //#endregion
-export { controlPoint, controlPointsContainer };
+export { controlPoint, controlPointsContainer, labelDraggable };

package/dist/likec4diagram/custom/nodes/CompoundActions.d.ts

@@ -1,4 +1,4 @@
 import { Types } from '../../types';
 type CompoundActionsProps = Types.NodeProps<'compound-deployment' | 'compound-element'>;
-export declare const CompoundActions: (props: CompoundActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CompoundActions: (props: CompoundActionsProps) => import("react").JSX.Element | null;
 export {};

package/dist/likec4diagram/custom/nodes/ElementActions.d.ts

@@ -53,7 +53,7 @@ export type ElementActionsProps = SimplifyDeep<{
  * />
  * ```
  */
-export declare function ElementActions({ extraButtons, ...props }: ElementActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementActions({ extraButtons, ...props }: ElementActionsProps): import("react").JSX.Element;
 export type DeploymentElementActionsProps = SimplifyDeep<{
     selected?: boolean;
     data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;
@@ -83,5 +83,5 @@ export type DeploymentElementActionsProps = SimplifyDeep<{
  * />
  * ```
  */
-export declare const DeploymentElementActions: ({ extraButtons, ...props }: DeploymentElementActionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DeploymentElementActions: ({ extraButtons, ...props }: DeploymentElementActionsProps) => import("react").JSX.Element;
 export {};

package/dist/likec4diagram/custom/nodes/NodeDrifts.d.ts

@@ -2,4 +2,4 @@ import { Types } from '../../types';
 export type NodeDriftsProps = {
     nodeProps: Types.NodeProps;
 };
-export declare function NodeDrifts({ nodeProps: { data }, }: NodeDriftsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NodeDrifts({ nodeProps: { data }, }: NodeDriftsProps): import("react").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/NodeNotes.d.ts

@@ -2,5 +2,5 @@ import { BaseNodePropsWithData } from '../../../base/types';
 import { Types } from '../../types';
 type RequiredData = Pick<Types.NodeData, 'id' | 'notes' | 'width' | 'height' | 'x' | 'y'>;
 export type NodeNotesProps = BaseNodePropsWithData<RequiredData>;
-export declare function NodeNotes({ data }: NodeNotesProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NodeNotes({ data }: NodeNotesProps): import("react").JSX.Element | null;
 export {};

package/dist/likec4diagram/custom/nodes/SequenceActorNode.d.ts

@@ -1,3 +1,3 @@
 import { Types } from '../../types';
-export declare function SequenceActorNode(props: Types.NodeProps<'seq-actor'>): import("react/jsx-runtime").JSX.Element;
-export declare function SequenceParallelArea(props: Types.NodeProps<'seq-parallel'>): import("react/jsx-runtime").JSX.Element;
+export declare function SequenceActorNode(props: Types.NodeProps<'seq-actor'>): import("react").JSX.Element;
+export declare function SequenceParallelArea(props: Types.NodeProps<'seq-parallel'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/nodes.d.ts

@@ -7,13 +7,13 @@ export declare function ElementDetailsButtonWithHandler(props: {
     data: BaseNodeData & {
         modelFqn?: Fqn | null | undefined;
     };
-}): import("react/jsx-runtime").JSX.Element | null;
-export declare function CompoundDetailsButtonWithHandler(props: Types.NodeProps<'compound-deployment' | 'compound-element'>): import("react/jsx-runtime").JSX.Element | null;
+}): import("react").JSX.Element | null;
+export declare function CompoundDetailsButtonWithHandler(props: Types.NodeProps<'compound-deployment' | 'compound-element'>): import("react").JSX.Element | null;
 /**
  * Renders an element node.
  */
-export declare function ElementNode(props: Types.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
-export declare function DeploymentNode(props: Types.NodeProps<'deployment'>): import("react/jsx-runtime").JSX.Element;
-export declare function CompoundElementNode(props: Types.NodeProps<'compound-element'>): import("react/jsx-runtime").JSX.Element;
-export declare function CompoundDeploymentNode(props: Types.NodeProps<'compound-deployment'>): import("react/jsx-runtime").JSX.Element;
-export declare function ViewGroupNode(props: Types.NodeProps<'view-group'>): import("react/jsx-runtime").JSX.Element;
+export declare function ElementNode(props: Types.NodeProps<'element'>): import("react").JSX.Element;
+export declare function DeploymentNode(props: Types.NodeProps<'deployment'>): import("react").JSX.Element;
+export declare function CompoundElementNode(props: Types.NodeProps<'compound-element'>): import("react").JSX.Element;
+export declare function CompoundDeploymentNode(props: Types.NodeProps<'compound-deployment'>): import("react").JSX.Element;
+export declare function ViewGroupNode(props: Types.NodeProps<'view-group'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.d.ts

@@ -8,15 +8,15 @@ type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
     onColorPreview: (color: ThemeColor | null) => void;
     onChange: OnStyleChange;
 };
-export declare function ColorButton({ elementColor, elementOpacity, onColorPreview, isOpacityEditable, onChange, ...props }: ColorButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorButton({ elementColor, elementOpacity, onColorPreview, isOpacityEditable, onChange, ...props }: ColorButtonProps): import("react").JSX.Element;
 export declare function ColorSwatches({ theme, elementColor, onColorPreview, onChange, }: {
     theme: LikeC4Theme;
     elementColor: ThemeColor;
     onColorPreview: (color: ThemeColor | null) => void;
     onChange: (color: ThemeColor) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function OpacityOption({ elementOpacity, onOpacityChange, }: {
     elementOpacity: number | undefined;
     onOpacityChange: (opacity: number) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export {};

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.d.ts

@@ -1,3 +1,3 @@
 import { Types } from '../../../types';
-export declare function CompoundElementToolbar(props: Types.NodeProps<'compound-element'>): import("react/jsx-runtime").JSX.Element;
-export declare function CompoundDeploymentToolbar(props: Types.NodeProps<'compound-deployment'>): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundElementToolbar(props: Types.NodeProps<'compound-element'>): import("react").JSX.Element;
+export declare function CompoundDeploymentToolbar(props: Types.NodeProps<'compound-deployment'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.ts

@@ -4,5 +4,5 @@ export declare function ElementToolbar(props: Types.NodeProps<'element' | 'seq-a
     data: {
         modelFqn: Fqn;
     };
-}): import("react/jsx-runtime").JSX.Element;
-export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
+export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts

@@ -5,4 +5,4 @@ export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
     nodeProps: BaseNodeProps;
     title: ReactNode;
 };
-export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts

@@ -6,13 +6,13 @@ import { TooltipProps, PlaceholderPolymorphicProps } from '@mantine/core';
 export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
 export declare function BrowseRelationshipsButton({ fqn }: {
     fqn: Fqn;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function GoToSourceButton(props: MergeExclusive<{
     elementId: Fqn;
 }, {
     deploymentId: DeploymentFqn;
-}>): import("react/jsx-runtime").JSX.Element | null;
+}>): import("react").JSX.Element | null;
 export declare function BorderStyleOption({ elementBorderStyle, onChange, }: {
     elementBorderStyle: BorderStyle | undefined;
     onChange: OnStyleChange;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/likec4diagram/relationship-popover/RelationshipPopover.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const RelationshipPopover: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;
+export declare const RelationshipPopover: MemoExoticComponent<() => import("react").JSX.Element | null>;

package/dist/likec4diagram/relationship-popover/components.d.ts

@@ -1,7 +1,7 @@
 import { Color } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { StyledComponent } from '@likec4/styles';
+import { StyledComponent } from '../../../styled-system';
 export declare const Endpoint: ({ children, likec4color }: PropsWithChildren<{
     likec4color: Color;
-}>) => import("react/jsx-runtime").JSX.Element;
+}>) => import("react").JSX.Element;
 export declare const RelationshipTitle: StyledComponent<"div", {}>;

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

@@ -11,4 +11,4 @@ export declare function DiagramActorProvider({ id, view, zoomable, pannable, nod
     fitViewPadding: ViewPaddings;
     where?: WhereOperator | null;
     dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/likec4diagram/state/aligners.js

@@ -5,6 +5,9 @@ import { getNodeDimensions } from "@xyflow/system";
 //#region src/likec4diagram/state/aligners.ts
 var Aligner = class {};
 var LinearAligner = class extends Aligner {
+	getEdgePosition;
+	computePosition;
+	propertyToEdit;
 	alignTo;
 	constructor(getEdgePosition, computePosition, propertyToEdit) {
 		super();

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(-loopSize / 2.5, -loopSize)).round().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -loopSize)).round().toObject()];
+		return [centerOfTopBoundary.add(vector(-80 / 2.5, -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

@@ -50,6 +50,7 @@ function createViewChange(parentContext) {
 			height: Math.round(data.labelBBox.height)
 		};
 		else _updated.labelBBox = null;
+		if (data.isLabelCustomized !== void 0) _updated.isLabelCustomized = data.isLabelCustomized;
 		if (hasAtLeast(controlPoints, 1)) _updated.controlPoints = map(controlPoints, (v) => ({
 			x: Math.round(v.x),
 			y: Math.round(v.y)

package/dist/likec4diagram/state/diagram-api.d.ts

@@ -2,8 +2,10 @@ import { DynamicViewDisplayVariant, NodeNotation as ElementNotation, ViewChange
 import { RefObject } from 'react';
 import { PartialDeep } from 'type-fest';
 import { FeatureName } from '../../context/DiagramFeatures';
+import { EditorActorRef } from '../../editor/actor/machine';
 import { OpenSourceParams } from '../../LikeC4Diagram.props';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
+import { SearchActorRef } from '../../search/searchActor';
 import { Types } from '../types';
 import { AlignmentMode } from './aligners';
 import { DiagramActorRef, DiagramContext, DiagramEvents } from './types';
@@ -27,7 +29,21 @@ export interface DiagramApi<A extends Any = Unknown> {
      * @warning Do not use in render phase
      */
     readonly currentView: t.DiagramView<A>;
+    /**
+     * Editor actor reference
+     * @warning Do not use in render phase
+     */
+    editorActor(): EditorActorRef;
+    /**
+     * Overlays actor reference
+     * @warning Do not use in render phase
+     */
     overlays(): OverlaysActorRef;
+    /**
+     * Search actor reference
+     * @warning Do not use in render phase
+     */
+    searchActor(): SearchActorRef;
     /**
      * Send event to diagram actor
      */

package/dist/likec4diagram/state/diagram-api.js

@@ -8,8 +8,17 @@ function makeDiagramApi(actorRef) {
 		get actor() {
 			return actorRef.current;
 		},
+		editorActor() {
+			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
+			return nonNullable(editorActor, "Editor actor not found in actor system");
+		},
 		overlays() {
-			return nonNullable(actorRef.current.getSnapshot().children.overlays, "Overlays actor not found");
+			const overlaysActor = typedSystem(actorRef.current.system).overlaysActorRef;
+			return nonNullable(overlaysActor, "Overlays actor not found in actor system");
+		},
+		searchActor() {
+			const searchActor = typedSystem(actorRef.current.system).searchActorRef;
+			return nonNullable(searchActor, "Search actor not found in actor system");
 		},
 		send: (event) => actorRef.current.send(event),
 		navigateTo: (viewId, fromNode, focusOnElement) => {
@@ -79,22 +88,19 @@ function makeDiagramApi(actorRef) {
 			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
 			invariant(editorActor, "No editor actor found in diagram actor system");
 			editorActor.send({
-				type: "edit.start",
+				type: "edit.move.start",
 				subject
 			});
 		},
 		stopEditing: (wasChanged = false) => {
 			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
 			invariant(editorActor, "No editor actor found in diagram actor system");
-			editorActor.send({
-				type: "edit.finish",
-				wasChanged
-			});
+			editorActor.send({ type: wasChanged ? "edit.move.end" : "edit.move.cancel" });
 		},
 		undoEditing: () => {
 			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
 			invariant(editorActor, "No editor actor found in diagram actor system");
-			const hasUndo = editorActor.getSnapshot().context.history.length > 0;
+			const hasUndo = editorActor.getSnapshot().context.history !== null;
 			if (hasUndo) editorActor.send({ type: "undo" });
 			return hasUndo;
 		},