@likec4/diagram 1.60.0 → 1.61.0

package/dist/index.mjs

@@ -1,30 +1,32 @@
 import { DefaultIconRenderer, IconRendererProvider } from "./context/IconRenderer.mjs";
 import { MaxZoom, MinZoom } from "./base/const.mjs";
-import { useUpdateEffect } from "./hooks/useUpdateEffect.mjs";
-import { DefaultMantineProvider, LikeC4MantineProvider } from "./LikeC4MantineProvider.mjs";
-import { FramerMotionConfig } from "./context/FramerMotionConfig.mjs";
-import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramSelector } from "./hooks/safeContext.mjs";
-import { useOnDiagramEvent } from "./hooks/useDiagram.mjs";
-import { useCurrentView, useCurrentViewId } from "./hooks/useCurrentView.mjs";
+import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
+import { LikeC4ModelProvider } from "./LikeC4ModelProvider.mjs";
+import { LikeC4EditorProvider } from "./editor/LikeC4EditorProvider.mjs";
+import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector } from "./hooks/safeContext.mjs";
+import { createLikeC4Editor } from "./editor/LikeC4EditorCallbacks.mjs";
+import { LikeC4ProjectsProvider } from "./LikeC4ProjectsProvider.mjs";
 import { useOptionalCurrentViewModel, useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
+import { useOnDiagramEvent } from "./hooks/useDiagram.mjs";
+import { useDiagramCompareLayout } from "./hooks/useDiagramCompareLayout.mjs";
 import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "./hooks/useLikeC4Model.mjs";
-import { useLikeC4Styles } from "./hooks/useLikeC4Styles.mjs";
-import { createLikeC4Editor } from "./editor/LikeC4EditorCallbacks.mjs";
-import { LikeC4EditorProvider } from "./editor/LikeC4EditorProvider.mjs";
-import { pickViewBounds } from "./utils/view-bounds.mjs";
 import { useCurrentViewModel } from "./hooks/useCurrentViewModel.mjs";
 import { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from "./hooks/useLikeC4Project.mjs";
-import { useDiagramCompareLayout } from "./hooks/useDiagramCompareLayout.mjs";
-import { Logo, LogoIcon } from "./components/Logo.mjs";
-import { SearchContext, normalizeSearch, useSearchContext } from "./search/SearchContext.mjs";
-import { SearchPanelContent, bodyCss, dialogCss } from "./search/Search.mjs";
-import { LikeC4Diagram } from "./LikeC4Diagram.mjs";
-import { LikeC4ModelProvider } from "./LikeC4ModelProvider.mjs";
-import { LikeC4ProjectsProvider } from "./LikeC4ProjectsProvider.mjs";
+import { useLikeC4Styles } from "./hooks/useLikeC4Styles.mjs";
+import { filterProjects, projectSearchHighlights } from "./utils/filterProjects.mjs";
+import { useUpdateEffect } from "./hooks/useUpdateEffect.mjs";
 import { StaticLikeC4Diagram } from "./StaticLikeC4Diagram.mjs";
 import { LikeC4View } from "./LikeC4View.mjs";
 import { ReactLikeC4 } from "./ReactLikeC4.mjs";
+import { useCurrentView, useCurrentViewId } from "./hooks/useCurrentView.mjs";
+import { pickViewBounds } from "./utils/view-bounds.mjs";
 import { LikeC4ProjectsOverview } from "./LikeC4ProjectsOverview.mjs";
+import { SearchContext, normalizeSearch, useSearchContext } from "./search/SearchContext.mjs";
+import { SearchPanelContent, bodyCss, dialogCss } from "./search/Search.mjs";
 import { SearchControl } from "./components/SearchControl.mjs";
+import { DefaultMantineProvider, LikeC4MantineProvider } from "./LikeC4MantineProvider.mjs";
+import { FramerMotionConfig } from "./context/FramerMotionConfig.mjs";
+import { Logo, LogoIcon } from "./components/Logo.mjs";
+import { defineLikeC4Webcomponent } from "./webcomponent/defineWebcomponent.mjs";
 
-export { DefaultIconRenderer, DefaultMantineProvider, FramerMotionConfig, IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4MantineProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, Logo, LogoIcon, MaxZoom, MinZoom, ReactLikeC4, SearchContext, SearchControl, SearchPanelContent, StaticLikeC4Diagram, createLikeC4Editor, normalizeSearch, pickViewBounds, bodyCss as searchBodyCss, dialogCss as searchDialogCss, selectDiagramContext, selectDiagramSnapshot, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramCompareLayout, useDiagramSelector, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSearchContext, useUpdateEffect };
+export { DefaultIconRenderer, DefaultMantineProvider, FramerMotionConfig, IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4MantineProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, Logo, LogoIcon, MaxZoom, MinZoom, ReactLikeC4, SearchContext, SearchControl, SearchPanelContent, StaticLikeC4Diagram, createLikeC4Editor, defineLikeC4Webcomponent, filterProjects, normalizeSearch, pickViewBounds, projectSearchHighlights, bodyCss as searchBodyCss, dialogCss as searchDialogCss, selectDiagramContext, selectDiagramSnapshot, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramCompareLayout, useDiagramSelector, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSearchContext, useUpdateEffect };

package/dist/likec4diagram/DiagramUI.mjs

@@ -1,13 +1,13 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ErrorBoundary } from "../components/ErrorFallback.mjs";
 import { useEnabledFeatures } from "../context/DiagramFeatures.mjs";
 import { selectDiagramSnapshot, useDiagramSelector } from "../hooks/safeContext.mjs";
-import { ErrorBoundary } from "../components/ErrorFallback.mjs";
 import { NavigationPanel } from "../navigationpanel/NavigationPanel.mjs";
 import { Overlays } from "../overlays/Overlays.mjs";
 import { Search } from "../search/Search.mjs";
 import { RelationshipPopover } from "./relationship-popover/RelationshipPopover.mjs";
+import { isComparingLayouts } from "./state/machine.setup.mjs";
 import { FloatingSequenceActors } from "./ui/FloatingSequenceActors.mjs";
-import { LayoutDriftFrame } from "./ui/LayoutDriftFrame.mjs";
 import { NotationPanel } from "./ui/notation/NotationPanel.mjs";
 import { SequenceOutlinePanel } from "./ui/sequence-outline/SequenceOutlinePanel.mjs";
 import { memo, useCallback } from "react";
@@ -15,11 +15,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRerender } from "@react-hookz/web";
 import { hasProp, isDynamicView } from "@likec4/core";
 
-//#region src/likec4diagram/DiagramUI.tsx
+// src/likec4diagram/DiagramUI.tsx
 const selectChildren = selectDiagramSnapshot((s) => ({
 	overlays: s.children.overlays ?? null,
 	search: s.children.search ?? null,
 	navigation: s.children.navigationPanel ?? null,
+	isComparing: isComparingLayouts(s),
 	...isDynamicView(s.context.view) ? {
 		isSequenceView: s.context.dynamicViewVariant === "sequence",
 		isActiveWalkthrough: s.context.dynamicViewVariant === "sequence" && !!s.context.activeWalkthrough && hasProp(s.context.view, "flow")
@@ -29,10 +30,10 @@ const selectChildren = selectDiagramSnapshot((s) => ({
 		isActiveWalkthrough: false
 	}
 }));
-function LikeC4DiagramUI() {
-	const { enableControls, enableNotations, enableSearch, enableRelationshipDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+const LikeC4DiagramUI = memo(() => {
+	const { enableControls, enableNotations, enableSearch, enableRelationshipDetails, enableReadOnly } = useEnabledFeatures();
 	const rerender = useRerender();
-	const { isSequenceView, isActiveWalkthrough, ...actors } = useDiagramSelector(selectChildren);
+	const { isSequenceView, isActiveWalkthrough, isComparing, ...actors } = useDiagramSelector(selectChildren);
 	const handleReset = useCallback(() => {
 		if (import.meta.env.DEV) console.warn("DiagramUI: resetting error boundary and rerendering...");
 		rerender();
@@ -42,15 +43,17 @@ function LikeC4DiagramUI() {
 		children: [
 			isSequenceView && /* @__PURE__ */ jsx(FloatingSequenceActors, { isActiveWalkthrough }),
 			isActiveWalkthrough && /* @__PURE__ */ jsx(SequenceOutlinePanel, {}),
-			enableControls && actors.navigation && !isActiveWalkthrough && /* @__PURE__ */ jsx(NavigationPanel, { actorRef: actors.navigation }),
+			enableControls && actors.navigation && !isActiveWalkthrough && /* @__PURE__ */ jsx(NavigationPanel, {
+				actorRef: actors.navigation,
+				isComparing
+			}),
 			actors.overlays && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef: actors.overlays }),
 			enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
 			enableSearch && actors.search && /* @__PURE__ */ jsx(Search, { searchActorRef: actors.search }),
-			enableRelationshipDetails && enableReadOnly && /* @__PURE__ */ jsx(RelationshipPopover, {}),
-			enableCompareWithLatest && /* @__PURE__ */ jsx(LayoutDriftFrame, {})
+			enableRelationshipDetails && enableReadOnly && /* @__PURE__ */ jsx(RelationshipPopover, {})
 		]
 	});
-}
+});
+LikeC4DiagramUI.displayName = "LikeC4DiagramUI";
 
-//#endregion
 export { LikeC4DiagramUI };

package/dist/likec4diagram/DiagramXYFlow.mjs

@@ -1,17 +1,19 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { IS_SERVER } from "../base/const.mjs";
-import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.mjs";
-import { depsShallowEqual, useUpdateEffect as useUpdateEffect$1 } from "../hooks/useUpdateEffect.mjs";
 import { BaseXYFlow } from "../base/BaseXYFlow.mjs";
-import { useRootContainer } from "../context/RootContainerContext.mjs";
+import { IS_SERVER } from "../base/const.mjs";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.mjs";
+import { useRootContainer } from "../context/RootContainerContext.mjs";
 import { selectDiagramSnapshot, useDiagram, useDiagramSelector } from "../hooks/safeContext.mjs";
-import { viewBounds } from "./state/utils.mjs";
-import { deriveToggledFeatures } from "./state/machine.setup.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.mjs";
+import { depsShallowEqual, useUpdateEffect as useUpdateEffect$1 } from "../hooks/useUpdateEffect.mjs";
 import { useEditorActorStateHasTag } from "../hooks/useEditorActor.mjs";
+import { viewRouting } from "../utils/view-routing.mjs";
 import { BuiltinEdges, BuiltinNodes } from "./custom/index.mjs";
-import { useLayoutConstraints } from "./useLayoutConstraints.mjs";
-import { useGraphForceSimulation } from "./xyflow-graph/useGraphForceSimulation.mjs";
+import { deriveToggledFeatures } from "./state/machine.setup.mjs";
+import { viewBounds } from "./state/utils.mjs";
+import { useNodeDragHandlers } from "./useNodeDragHandlers.mjs";
+import { selectGraphTopology } from "./xyflow-graph/useGraphForceSimulation.mjs";
+import { resolveControlledViewport, resolveInteractionEnabled } from "./xyflow-props.mjs";
 import { cx } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCustomCompareMemo } from "@react-hookz/web";
@@ -21,7 +23,7 @@ import { isEmpty } from "remeda";
 import { nonNullable } from "@likec4/core";
 import { useDebouncedCallback as useDebouncedCallback$1, useTimeout } from "@mantine/hooks";
 
-//#region src/likec4diagram/DiagramXYFlow.tsx
+// src/likec4diagram/DiagramXYFlow.tsx
 const edgeTypes = {
 	relationship: BuiltinEdges.RelationshipEdge,
 	"seq-step": BuiltinEdges.SequenceStepEdge
@@ -51,19 +53,9 @@ function prepareNodeTypes(nodeTypes) {
 		"graph-element": nodeTypes.graphElement ?? builtinNodes["graph-element"]
 	};
 }
-function resolveControlledViewport(enableFitView, initialZoom, bounds) {
-	if (enableFitView || initialZoom !== void 0) return;
-	return {
-		x: -bounds.x,
-		y: -bounds.y,
-		zoom: 1
-	};
-}
-function resolveInteractionEnabled(enabled, override, isEditorBusy) {
-	return (override ?? enabled) && !isEditorBusy;
-}
-const selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
-	const { enableReadOnly } = deriveToggledFeatures(ctx);
+const selectXYProps = selectDiagramSnapshot((snapshot) => {
+	const { context: ctx, children } = snapshot;
+	const { enableReadOnly } = deriveToggledFeatures(snapshot);
 	const controlledViewport = resolveControlledViewport(ctx.features.enableFitView, ctx.initialZoom, viewBounds(ctx));
 	const editorSnapshot = enableReadOnly ? null : children.editor?.getSnapshot();
 	const isNotEditingEdge = enableReadOnly || editorSnapshot?.context.editing?.subject !== "edge";
@@ -74,6 +66,8 @@ const selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
 	return {
 		enableReadOnly,
 		isGraphVariant,
+		graphTopology: isGraphVariant ? selectGraphTopology(ctx.xynodes, ctx.xyedges) : null,
+		viewRouting: viewRouting(ctx.view),
 		initialized: IS_SERVER || ctx.initialized.xydata && ctx.initialized.xyflow,
 		nodes: ctx.xynodes,
 		edges: ctx.xyedges,
@@ -88,24 +82,25 @@ const selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
 		enableControls: ctx.features.enableControls,
 		...controlledViewport && { viewport: controlledViewport }
 	};
-}, ({ nodes: aNodes, edges: aEdges, ...a }, { nodes: bNodes, edges: bEdges, ...b }) => {
+}, ({ nodes: aNodes, edges: aEdges, graphTopology: _aTopology, ...a }, { nodes: bNodes, edges: bEdges, graphTopology: _bTopology, ...b }) => {
 	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, isGraphVariant, initialized, nodes, edges, enableFitView, nodesDraggable, nodesSelectable, enableControls, ...props } = useDiagramSelector(selectXYProps);
+	let { enableReadOnly, isGraphVariant, graphTopology, initialized, nodes, edges, enableFitView, nodesDraggable, nodesSelectable, viewRouting, 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;
-	const layoutConstraints = useLayoutConstraints();
-	const graphForceHandlers = useGraphForceSimulation({
-		enabled: isGraphVariant,
-		nodes,
-		edges
+	const nodeDragHandlers = useNodeDragHandlers({
+		nodesDraggable,
+		viewRouting,
+		isGraphVariant,
+		graphTopology,
+		diagram
 	});
 	const $isPanning = $panning;
 	const isPanning = useTimeout(() => {
@@ -170,7 +165,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 				type: "xyflow.nodeClick",
 				node
 			});
-			onNodeClick?.(diagram.findDiagramNode(node.id), e);
+			onNodeClick?.(diagram.findDiagramNode(node.data.id), e);
 		}),
 		onEdgeClick: useCallbackRef$1((e, edge) => {
 			if (e.isPropagationStopped()) return;
@@ -179,7 +174,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 				type: "xyflow.edgeClick",
 				edge
 			});
-			onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
+			onEdgeClick?.(diagram.findDiagramEdge(edge.data.id), e);
 		}),
 		onEdgeDoubleClick: useCallbackRef$1((e, edge) => {
 			if (e.isPropagationStopped()) return;
@@ -198,17 +193,20 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			});
 		}),
 		onPaneClick: useCallbackRef$1((e) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			diagram.send({ type: "xyflow.paneClick" });
 			onCanvasClick?.(e);
 		}),
 		onDoubleClick: useCallbackRef$1((e) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			e.preventDefault();
 			diagram.send({ type: "xyflow.paneDblClick" });
 			onCanvasDblClick?.(e);
 		}),
 		onNodeMouseEnter: useCallbackRef$1((event, node) => {
+			if (event.isPropagationStopped()) return;
 			event.stopPropagation();
 			diagram.send({
 				type: "xyflow.nodeMouseEnter",
@@ -216,6 +214,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			});
 		}),
 		onNodeMouseLeave: useCallbackRef$1((event, node) => {
+			if (event.isPropagationStopped()) return;
 			event.stopPropagation();
 			diagram.send({
 				type: "xyflow.nodeMouseLeave",
@@ -223,6 +222,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			});
 		}),
 		onEdgeMouseEnter: useCallbackRef$1((event, edge) => {
+			if (event.isPropagationStopped()) return;
 			event.stopPropagation();
 			diagram.send({
 				type: "xyflow.edgeMouseEnter",
@@ -231,6 +231,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			});
 		}),
 		onEdgeMouseLeave: useCallbackRef$1((event, edge) => {
+			if (event.isPropagationStopped()) return;
 			event.stopPropagation();
 			diagram.send({
 				type: "xyflow.edgeMouseLeave",
@@ -260,7 +261,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 		edgesFocusable: true,
 		elevateEdgesOnSelect: !enableReadOnly,
 		zIndexMode: "manual",
-		...nodesDraggable && (isGraphVariant ? graphForceHandlers : layoutConstraints),
+		...nodeDragHandlers,
 		...props,
 		...safeReactFlowProps,
 		nodesDraggable,
@@ -283,5 +284,4 @@ const Controls$1 = /* @__PURE__ */ __name(({ fitViewPadding, minZoom, maxZoom })
 	position: "bottom-left"
 }), "Controls");
 
-//#endregion
-export { LikeC4DiagramXYFlow, resolveControlledViewport, resolveInteractionEnabled };
+export { LikeC4DiagramXYFlow };

package/dist/likec4diagram/convert-to-xyflow.mjs

@@ -3,7 +3,7 @@ import { diagramToXY } from "./xyflow-diagram/diagram-view.mjs";
 import { graphViewToXY } from "./xyflow-graph/graph-view-to-xy.mjs";
 import { sequenceLayoutToXY } from "./xyflow-sequence/sequence-view-to-xy.mjs";
 
-//#region src/likec4diagram/convert-to-xyflow.ts
+// src/likec4diagram/convert-to-xyflow.ts
 function convertToXYFlow({ dynamicViewVariant, elementViewVariant, ...params }) {
 	const view = params.view;
 	const isDynamic = view._type === "dynamic";
@@ -25,7 +25,7 @@ function convertToXYFlow({ dynamicViewVariant, elementViewVariant, ...params })
 			currentViewId: params.currentViewId,
 			collapsedFlows: params.collapsedSequenceFlows
 		});
-		return {
+		if (layout !== view.sequenceLayout || view.variant !== dynamicViewVariant) return {
 			view: {
 				...view,
 				sequenceLayout: layout,
@@ -34,6 +34,11 @@ function convertToXYFlow({ dynamicViewVariant, elementViewVariant, ...params })
 			xynodes,
 			xyedges
 		};
+		return {
+			view,
+			xynodes,
+			xyedges
+		};
 	}
 	if (isElement && elementViewVariant === "graph") {
 		const { xynodes, xyedges } = graphViewToXY(params);
@@ -51,5 +56,4 @@ function convertToXYFlow({ dynamicViewVariant, elementViewVariant, ...params })
 	};
 }
 
-//#endregion
 export { convertToXYFlow };

package/dist/likec4diagram/custom/edges/EdgeDrifts.mjs

@@ -1,11 +1,13 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { useIsComparingLayouts } from "../../../context/ComparingLayoutsContext.mjs";
 import { css, cx } from "@likec4/styles/css";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/likec4diagram/custom/edges/EdgeDrifts.tsx
+// src/likec4diagram/custom/edges/EdgeDrifts.tsx
 function EdgeDrifts({ edgeProps: { data }, svgPath }) {
+	const isComparing = useIsComparingLayouts();
 	const drifts = data.drifts;
-	if (!drifts || drifts.length === 0) return null;
+	if (!isComparing || !drifts || drifts.length === 0) return null;
 	return /* @__PURE__ */ jsx("path", {
 		className: cx("react-flow__edge-path", css({
 			pointerEvents: "none",
@@ -22,5 +24,4 @@ function EdgeDrifts({ edgeProps: { data }, svgPath }) {
 	});
 }
 
-//#endregion
 export { EdgeDrifts };

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

@@ -1,24 +1,23 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import { useCallbackRef } from "../../../hooks/useCallbackRef.mjs";
-import { useUpdateEffect as useUpdateEffect$1 } from "../../../hooks/useUpdateEffect.mjs";
-import { useXYFlow, useXYStoreApi } from "../../../hooks/useXYFlow.mjs";
-import { isSamePoint, leafNodeRects } from "../../../utils/xyflow.mjs";
-import { useSetState } from "../../../hooks/useSetState.mjs";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
-import { useDiagram } from "../../../hooks/safeContext.mjs";
-import { useCurrentViewRouting } from "../../../hooks/useCurrentView.mjs";
 import { EdgeActionButton } from "../../../base-primitives/edge/EdgeActionButton.mjs";
 import { EdgeContainer } from "../../../base-primitives/edge/EdgeContainer.mjs";
 import { EdgeLabel } from "../../../base-primitives/edge/EdgeLabel.mjs";
 import { EdgeLabelContainer } from "../../../base-primitives/edge/EdgeLabelContainer.mjs";
 import { EdgePath } from "../../../base-primitives/edge/EdgePath.mjs";
 import { memoEdge } from "../../../base-primitives/memoEdge.mjs";
-import { edgeEndCenters } from "../../../utils/edge-endpoints.mjs";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
+import { useCallbackRef } from "../../../hooks/useCallbackRef.mjs";
+import { useCurrentViewRouting } from "../../../hooks/useCurrentView.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { selectLabelRoutes } from "../../../hooks/useEdgeTracks.mjs";
+import { useSetState } from "../../../hooks/useSetState.mjs";
+import { useUpdateEffect as useUpdateEffect$1 } from "../../../hooks/useUpdateEffect.mjs";
+import { useXYFlow, useXYStoreApi } from "../../../hooks/useXYFlow.mjs";
 import { snapCorner } from "../../../utils/edge-corners.mjs";
+import { edgeEndCenters } from "../../../utils/edge-endpoints.mjs";
 import { edgeLabelPosition } from "../../../utils/edge-label.mjs";
+import { isSamePoint, leafNodeRects } from "../../../utils/xyflow.mjs";
 import { EdgeDrifts } from "./EdgeDrifts.mjs";
-import { controlPoint, controlPointsContainer, labelDraggable } from "./edges.css.mjs";
 import { useControlPoints } from "./useControlPoints.mjs";
 import { useRelationshipEdgePath } from "./useRelationshipEdgePath.mjs";
 import { css, cx } from "@likec4/styles/css";
@@ -27,8 +26,13 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRafEffect } from "@react-hookz/web";
 import { EdgeLabelRenderer } from "@xyflow/react";
 import { isNumber } from "remeda";
+import { edgeControlPoints } from "@likec4/styles/recipes";
 
-//#region src/likec4diagram/custom/edges/RelationshipEdge.tsx
+// src/likec4diagram/custom/edges/RelationshipEdge.tsx
+const labelDraggable = css({
+	cursor: "grab!",
+	_active: { cursor: "grabbing!" }
+});
 const RelationshipEdge = memoEdge((props) => {
 	const [isControlPointDragging, setIsControlPointDragging] = useState(false);
 	const isControlPointDraggingRef = useRef(isControlPointDragging);
@@ -324,6 +328,7 @@ const RelationshipEdge = memoEdge((props) => {
 	})] });
 });
 RelationshipEdge.displayName = "RelationshipEdge";
+const controlPointsClasses = edgeControlPoints();
 function ControlPoints({ isControlPointDragging, edgeProps, routing, controlPoints, onMove, onStartMove, onCancelMove, onFinishMove, onDelete }) {
 	const xyflowStore = useXYStoreApi();
 	const xyflow = useXYFlow();
@@ -420,7 +425,7 @@ function ControlPoints({ isControlPointDragging, edgeProps, routing, controlPoin
 	});
 	return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(EdgeContainer, {
 		component: "svg",
-		className: controlPointsContainer,
+		className: controlPointsClasses.container,
 		...edgeProps,
 		children: /* @__PURE__ */ jsx("g", {
 			"data-active": isControlPointDragging ? true : void 0,
@@ -430,7 +435,7 @@ function ControlPoints({ isControlPointDragging, edgeProps, routing, controlPoin
 				"data-control-point-index": i,
 				onPointerDownCapture: onControlPointerDown,
 				onDoubleClick: onControlPointerDblClick,
-				className: cx("nodrag nopan", controlPoint),
+				className: cx("nodrag nopan", controlPointsClasses.point),
 				cx: p.x,
 				cy: p.y
 			}, "controlPoints" + edgeId + "#" + i))
@@ -442,5 +447,4 @@ const stopAndPrevent = (e) => {
 	e.preventDefault();
 };
 
-//#endregion
 export { RelationshipEdge };

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

@@ -1,16 +1,16 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
-import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { EdgeActionButton } from "../../../base-primitives/edge/EdgeActionButton.mjs";
 import { EdgeContainer } from "../../../base-primitives/edge/EdgeContainer.mjs";
 import { EdgeLabel } from "../../../base-primitives/edge/EdgeLabel.mjs";
 import { EdgeLabelContainer } from "../../../base-primitives/edge/EdgeLabelContainer.mjs";
 import { EdgePath } from "../../../base-primitives/edge/EdgePath.mjs";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { EdgeDrifts } from "./EdgeDrifts.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getSmoothStepPath } from "@xyflow/system";
 
-//#region src/likec4diagram/custom/edges/SequenceStepEdge.tsx
+// src/likec4diagram/custom/edges/SequenceStepEdge.tsx
 const LABEL_OFFSET = 16;
 function SequenceStepEdge(props) {
 	const { enableNavigateTo, enableCompareWithLatest } = useEnabledFeatures();
@@ -77,5 +77,4 @@ function SequenceStepEdge(props) {
 	});
 }
 
-//#endregion
 export { SequenceStepEdge };

package/dist/likec4diagram/custom/edges/useControlPoints.mjs

@@ -2,12 +2,12 @@ import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
 import { useCallbackRef } from "../../../hooks/useCallbackRef.mjs";
 import { useUpdateEffect } from "../../../hooks/useUpdateEffect.mjs";
 import { useXYStoreApi } from "../../../hooks/useXYFlow.mjs";
-import { edgeEndCenters } from "../../../utils/edge-endpoints.mjs";
 import { initialControlPoints, insertCorner } from "../../../utils/edge-corners.mjs";
+import { edgeEndCenters } from "../../../utils/edge-endpoints.mjs";
 import { useState } from "react";
 import { deepEqual } from "fast-equals";
 
-//#region src/likec4diagram/custom/edges/useControlPoints.ts
+// src/likec4diagram/custom/edges/useControlPoints.ts
 function useControlPoints(props, routing) {
 	const { data } = props;
 	const xyflowStore = useXYStoreApi();
@@ -37,5 +37,4 @@ function useControlPoints(props, routing) {
 	};
 }
 
-//#endregion
 export { useControlPoints };

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

@@ -1,15 +1,15 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { useTrackRoutes } from "../../../hooks/useEdgeTracks.mjs";
 import { useXYStore } from "../../../hooks/useXYFlow.mjs";
 import { edgeEndFromNode } from "../../../utils/edge-endpoints.mjs";
 import { layoutedEdgePath } from "../../../utils/edge-path.mjs";
 import { trackedEdgePath } from "../../../utils/edge-tracks.mjs";
-import { useTrackRoutes } from "../../../hooks/useEdgeTracks.mjs";
 import { useCallback } from "react";
 import { deepEqual } from "fast-equals";
 import { isTruthy } from "remeda";
 import { nonNullable } from "@likec4/core/utils";
 
-//#region src/likec4diagram/custom/edges/useRelationshipEdgePath.ts
+// src/likec4diagram/custom/edges/useRelationshipEdgePath.ts
 /**
 * @returns The SVG path data and, for orthogonal routing, straight segments for label placement.
 */
@@ -37,5 +37,4 @@ function useRelationshipEdgePath({ props: { id, source, target, data }, controlP
 	});
 }
 
-//#endregion
 export { useRelationshipEdgePath };

package/dist/likec4diagram/custom/index.mjs

@@ -1,11 +1,11 @@
-import { GraphElementNode } from "./nodes/GraphElementNode.mjs";
+import { RelationshipEdge } from "./edges/RelationshipEdge.mjs";
+import { SequenceStepEdge } from "./edges/SequenceStepEdge.mjs";
 import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, ViewGroupNode } from "./nodes/nodes.mjs";
+import { GraphElementNode } from "./nodes/GraphElementNode.mjs";
 import { SequenceActorNode, SequenceParallelArea } from "./nodes/SequenceActorNode.mjs";
 import { SequenceSubflowArea } from "./nodes/SequenceSubFlow.mjs";
-import { RelationshipEdge } from "./edges/RelationshipEdge.mjs";
-import { SequenceStepEdge } from "./edges/SequenceStepEdge.mjs";
 
-//#region src/likec4diagram/custom/index.tsx
+// src/likec4diagram/custom/index.tsx
 const BuiltinNodes = {
 	ElementNode,
 	DeploymentNode,
@@ -22,5 +22,4 @@ const BuiltinEdges = {
 	SequenceStepEdge
 };
 
-//#endregion
 export { BuiltinEdges, BuiltinNodes };

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

@@ -1,6 +1,5 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
 import { Types } from "../../types.mjs";
-//#region src/likec4diagram/custom/nodes/CompoundActions.d.ts
 type CompoundActionsProps = Types.NodeProps<'compound-deployment' | 'compound-element'>;
 export declare const CompoundActions: (props: CompoundActionsProps) => import("react").JSX.Element | null;
-//#endregion
+export {};

package/dist/likec4diagram/custom/nodes/CompoundActions.mjs

@@ -1,10 +1,10 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { CompoundActionButton } from "../../../base-primitives/compound/CompoundActionButton.mjs";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
 import { useDiagram } from "../../../hooks/safeContext.mjs";
-import { CompoundActionButton } from "../../../base-primitives/compound/CompoundActionButton.mjs";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/likec4diagram/custom/nodes/CompoundActions.tsx
+// src/likec4diagram/custom/nodes/CompoundActions.tsx
 const CompoundActions = (props) => {
 	const { enableNavigateTo } = useEnabledFeatures();
 	const diagram = useDiagram();
@@ -20,5 +20,4 @@ const CompoundActions = (props) => {
 	return null;
 };
 
-//#endregion
 export { CompoundActions };

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

@@ -1,10 +1,9 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import "../../../base-primitives/index.mjs";
 import { BaseNodeData } from "../../../base/types.mjs";
-import { Types } from "../../types.mjs";
 import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.mjs";
-import "../../../base-primitives/index.mjs";
+import { Types } from "../../types.mjs";
 import { SimplifyDeep } from "type-fest";
-//#region src/likec4diagram/custom/nodes/ElementActions.d.ts
 type WithExtraButtons = {
   /**
    * Add extra action buttons
@@ -87,4 +86,4 @@ export type DeploymentElementActionsProps = SimplifyDeep<{
  * ```
  */
 export declare const DeploymentElementActions: ({ extraButtons, ...props }: DeploymentElementActionsProps) => import("react").JSX.Element;
-//#endregion
+export {};

package/dist/likec4diagram/custom/nodes/ElementActions.mjs

@@ -1,15 +1,15 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import IconTransform from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.mjs";
-import IconZoomScan from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import IconTransform from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.mjs";
+import IconZoomScan from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.mjs";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
 import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { readableText } from "../../../utils/readableText.mjs";
-import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { hasAtLeast } from "remeda";
 
-//#region src/likec4diagram/custom/nodes/ElementActions.tsx
+// src/likec4diagram/custom/nodes/ElementActions.tsx
 /**
 * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
 * Intended to be used with model elements.
@@ -143,5 +143,4 @@ const DeploymentElementActions = ({ extraButtons, ...props }) => {
 	});
 };
 
-//#endregion
 export { DeploymentElementActions, ElementActions };

package/dist/likec4diagram/custom/nodes/GraphElementNode.d.mts

@@ -1 +1,6 @@
-import "../../types.mjs";
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { Types } from "../../types.mjs";
+/**
+ * Renders an element as a compact circle, used in the "graph" display variant of element views.
+ */
+export declare function GraphElementNode(props: Types.NodeProps<'graph-element'>): import("react").JSX.Element;