@likec4/diagram 1.59.2 → 1.59.4

package/dist/hooks/useDiagramCompareLayout.d.ts

@@ -1,23 +1,29 @@
 import { DiagramActorSnapshot } from '../likec4diagram/state/types';
 import type * as t from '@likec4/core/types';
-declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
+export declare function selectCompareLayoutState({ context }: DiagramActorSnapshot): {
     isEnabled: false;
-    hasEditor: false;
+    hasEditor: boolean;
     isEditable: false;
-    isActive: false;
-    drifts: never;
+    state: 'inactive';
+    drifts: null;
     canApplyLatest: boolean;
     layout: t.LayoutType;
 } | {
     isEnabled: true;
     hasEditor: boolean;
     isEditable: boolean;
-    isActive: boolean;
+    state: 'comparing' | 'inactive';
     drifts: readonly [t.LayoutedViewDriftReason, ...t.LayoutedViewDriftReason[]];
     canApplyLatest: boolean;
     layout: t.LayoutType;
 };
+/**
+ * Current manual-layout comparison state exposed by {@link useDiagramCompareLayout}.
+ */
 export type DiagramCompareLayoutState = ReturnType<typeof selectCompareLayoutState>;
+/**
+ * Manual-layout actions exposed by {@link useDiagramCompareLayout}.
+ */
 export type DiagramCompareLayoutOps = {
     /**
      * Toggles the compare mode on or off.
@@ -36,8 +42,12 @@ export type DiagramCompareLayoutOps = {
      */
     resetManualLayout: () => void;
 };
+/**
+ * Controls LikeC4's manual-layout comparison from custom diagram children.
+ *
+ * The hook must be called by a component rendered inside {@link LikeC4Diagram}.
+ */
 export declare function useDiagramCompareLayout(): [
     DiagramCompareLayoutState,
     DiagramCompareLayoutOps
 ];
-export {};

package/dist/hooks/useDiagramCompareLayout.js

@@ -1,33 +1,40 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useCallbackRef } from "./useCallbackRef.js";
 import { useDiagramActorRef } from "./safeContext.js";
+import { typedSystem } from "../likec4diagram/state/utils.js";
 import { deriveToggledFeatures } from "../likec4diagram/state/machine.setup.js";
 import { shallowEqual } from "fast-equals";
 import { nonNullable } from "@likec4/core";
 import { useSelector } from "@xstate/react";
 //#region src/hooks/useDiagramCompareLayout.ts
-var selectCompareLayoutState = ({ context }) => {
+function selectCompareLayoutState({ context }) {
+	const hasEditor = context.features.enableEditor;
 	const drifts = context.view.drifts ?? null;
 	if (!context.features.enableCompareWithLatest || !drifts || drifts.length === 0) return {
-		hasEditor: false,
+		hasEditor,
 		isEnabled: false,
 		isEditable: false,
-		isActive: false,
+		state: "inactive",
 		drifts: null,
 		canApplyLatest: false,
 		layout: context.view._layout ?? "auto"
 	};
 	const { enableCompareWithLatest, enableReadOnly } = deriveToggledFeatures(context);
 	return {
-		hasEditor: context.features.enableEditor,
+		hasEditor,
 		isEnabled: true,
-		isEditable: !enableReadOnly,
-		isActive: enableCompareWithLatest === true,
+		isEditable: !enableReadOnly && hasEditor,
+		state: enableCompareWithLatest === true ? "comparing" : "inactive",
 		drifts,
-		canApplyLatest: !drifts.includes("type-changed"),
+		canApplyLatest: hasEditor && !drifts.includes("type-changed"),
 		layout: context.view._layout ?? "auto"
 	};
-};
+}
+/**
+* Controls LikeC4's manual-layout comparison from custom diagram children.
+*
+* The hook must be called by a component rendered inside {@link LikeC4Diagram}.
+*/
 function useDiagramCompareLayout() {
 	const actorRef = useDiagramActorRef();
 	const state = useSelector(actorRef, selectCompareLayoutState, shallowEqual);
@@ -47,8 +54,8 @@ function useDiagramCompareLayout() {
 				console.warn("Compare with latest feature is not enabled");
 				return;
 			}
-			const nextIsActive = force ? force === "on" : !state.isActive;
-			if (state.isActive && !nextIsActive && state.layout === "auto") switchLayout("manual");
+			const nextIsActive = force ? force === "on" : state.state === "inactive";
+			if (state.state === "comparing" && !nextIsActive && state.layout === "auto") switchLayout("manual");
 			actorRef.send({
 				type: "toggle.feature",
 				feature: "CompareWithLatest",
@@ -57,10 +64,6 @@ function useDiagramCompareLayout() {
 		}),
 		switchLayout,
 		resetManualLayout: useCallbackRef(() => {
-			if (!state.isEnabled) {
-				console.warn("Compare with latest feature is not enabled");
-				return;
-			}
 			actorRef.send({ type: "layout.resetManualLayout" });
 		}),
 		applyLatestToManual: useCallbackRef(() => {
@@ -68,8 +71,8 @@ function useDiagramCompareLayout() {
 				console.warn("Compare with latest feature is not enabled");
 				return;
 			}
-			nonNullable(actorRef.system?.get("editor"), "editor actor not found").send({ type: "change.latest-to-manual" });
-			if (state.isActive) actorRef.send({
+			nonNullable(typedSystem(actorRef.system).editorActorRef, "editor actor not found").send({ type: "change.latest-to-manual" });
+			if (state.state === "comparing") actorRef.send({
 				type: "toggle.feature",
 				feature: "CompareWithLatest",
 				forceValue: false
@@ -78,4 +81,4 @@ function useDiagramCompareLayout() {
 	}];
 }
 //#endregion
-export { useDiagramCompareLayout };
+export { selectCompareLayoutState, useDiagramCompareLayout };

package/dist/hooks/useEditorActor.js

@@ -1,13 +1,11 @@
 import "../_virtual/_rolldown/runtime.js";
-import { selectDiagramActor, useDiagramSnapshot } from "./useDiagram.js";
+import { selectDiagramSnapshot, useDiagramSelector } from "./safeContext.js";
 import { useEffect, useState } from "react";
 import "@mantine/hooks";
 //#region src/hooks/useEditorActor.ts
-var select = selectDiagramActor((s) => {
-	return s.children.editor ?? null;
-});
+var select = selectDiagramSnapshot((s) => s.children.editor ?? null, Object.is);
 function useEditorActorRef() {
-	return useDiagramSnapshot(select, Object.is);
+	return useDiagramSelector(select);
 }
 function useEditorActorStateHasTag(tag) {
 	const editorActor = useEditorActorRef();

package/dist/hooks/useLikeC4Model.js

@@ -16,10 +16,15 @@ function useLikeC4ViewModel(viewId) {
 	return useLikeC4Model().view(viewId);
 }
 function useLikeC4Specification() {
-	const _specification = useLikeC4Model().specification;
-	const [specification, setSpecification] = useState(_specification);
+	const _specification = useOptionalLikeC4Model()?.specification ?? null;
+	const [specification, setSpecification] = useState(() => _specification ?? {
+		elements: {},
+		deployments: {},
+		relationships: {},
+		tags: {}
+	});
 	useEffect(() => {
-		setSpecification((current) => deepEqual(current, _specification) ? current : _specification);
+		if (_specification) setSpecification((current) => deepEqual(current, _specification) ? current : _specification);
 	}, [_specification]);
 	return specification;
 }

package/dist/hooks/useLikeC4Project.d.ts

@@ -1,10 +1,11 @@
-import { LikeC4Project, ProjectId } from '@likec4/core/types';
+import { ProjectId } from '@likec4/core/types';
 import { LikeC4ProjectsContext } from '../context/LikeC4ProjectsContext';
+import { LikeC4ProjectData } from '../LikeC4ProjectsProvider';
 export declare function useLikeC4ProjectsContext(): LikeC4ProjectsContext;
 /**
  * @returns The list of available projects, or empty array if no projects are available.
  */
-export declare function useLikeC4Projects(): ReadonlyArray<LikeC4Project>;
+export declare function useLikeC4Projects(): ReadonlyArray<LikeC4ProjectData>;
 /**
  * @returns The callback to change current project, or a no-op if no LikeC4ProjectsProvider is found.
  */
@@ -22,4 +23,4 @@ export declare function useLikeC4ProjectId(): ProjectId;
  * Requires LikeC4ModelProvider in the tree.
  * Falls back to model's project if LikeC4ProjectsProvider is not available.
  */
-export declare function useLikeC4Project(): LikeC4Project;
+export declare function useLikeC4Project(): LikeC4ProjectData;

package/dist/hooks/useOverlaysActor.d.ts

@@ -1,2 +1,2 @@
 import { OverlaysActorRef } from '../overlays/overlaysActor';
-export declare function useOverlaysActorRef(): OverlaysActorRef;
+export declare function useOverlaysActorRef(): OverlaysActorRef | null;

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

@@ -1,12 +1,14 @@
-export { IconRendererProvider } from './context/IconRenderer';
+export { DefaultIconRenderer, IconRendererProvider } from './context/IconRenderer';
+export { MaxZoom, MinZoom } from './base/const';
 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 { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './hooks/useLikeC4Model';
+export { type DiagramCompareLayoutOps, type DiagramCompareLayoutState, useDiagramCompareLayout, } from './hooks/useDiagramCompareLayout';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model, } from './hooks/useLikeC4Model';
 export { type CurrentViewModel, useCurrentViewModel, useOptionalCurrentViewModel, } from './hooks/useCurrentViewModel';
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './hooks/useLikeC4Project';
 export { useLikeC4Styles } from './hooks/useLikeC4Styles';
@@ -22,5 +24,5 @@ export { LikeC4ProjectsOverview, type LikeC4ProjectsOverviewProps, } from './Lik
 export { normalizeSearch, SearchContext, type SearchContextValue, useSearchContext, } from './search/SearchContext';
 export { bodyCss as searchBodyCss, dialogCss as searchDialogCss, SearchPanelContent, } from './search/Search';
 export { SearchControl } from './components/SearchControl';
-export { DefaultMantineProvider } from './context/DefaultMantineProvider';
+export { DefaultMantineProvider, LikeC4MantineProvider } from './LikeC4MantineProvider';
 export { FramerMotionConfig } from './context/FramerMotionConfig';

package/dist/index.js

@@ -1,18 +1,20 @@
-import { IconRendererProvider } from "./context/IconRenderer.js";
+import { DefaultIconRenderer, IconRendererProvider } from "./context/IconRenderer.js";
+import { MaxZoom, MinZoom } from "./base/const.js";
 import { useUpdateEffect } from "./hooks/useUpdateEffect.js";
-import { DefaultMantineProvider } from "./context/DefaultMantineProvider.js";
+import { DefaultMantineProvider, LikeC4MantineProvider } from "./LikeC4MantineProvider.js";
 import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
 import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramSelector } from "./hooks/safeContext.js";
 import { useDiagramContext, useOnDiagramEvent } from "./hooks/useDiagram.js";
 import { useCurrentView, useCurrentViewId } from "./hooks/useCurrentView.js";
-import { useOptionalCurrentViewModel } from "./context/LikeC4ModelContext.js";
+import { useOptionalCurrentViewModel, useOptionalLikeC4Model } 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 { pickViewBounds } from "./utils/view-bounds.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 +25,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 { DefaultIconRenderer, DefaultMantineProvider, FramerMotionConfig, IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4MantineProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, MaxZoom, MinZoom, 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, useOptionalLikeC4Model, 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

@@ -1,6 +1,12 @@
+import { Viewport } from '@xyflow/system';
 import { PropsWithChildren } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { Simplify } from 'type-fest';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
+export declare function resolveControlledViewport(enableFitView: boolean, initialZoom: number | undefined, bounds: {
+    x: number;
+    y: number;
+}): Viewport | undefined;
+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

@@ -1,13 +1,14 @@
 import { __name } from "../_virtual/_rolldown/runtime.js";
+import { IS_SERVER } from "../base/const.js";
 import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
 import { depsShallowEqual, useUpdateEffect as useUpdateEffect$1 } from "../hooks/useUpdateEffect.js";
-import { MinZoom } from "../base/const.js";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { useRootContainer } from "../context/RootContainerContext.js";
 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";
@@ -46,41 +47,50 @@ function prepareNodeTypes(nodeTypes) {
 		"seq-subflow": nodeTypes.seqSubflow ?? builtinNodes["seq-subflow"]
 	};
 }
-var viewportToTopLeft = (ctx) => {
-	const bounds = viewBounds(ctx);
+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;
+}
 var selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
 	const { enableReadOnly } = deriveToggledFeatures(ctx);
+	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";
-	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,
-		initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
+		initialized: IS_SERVER || ctx.initialized.xydata && ctx.initialized.xyflow,
 		nodes: ctx.xynodes,
 		edges: ctx.xyedges,
 		pannable: ctx.pannable,
 		zoomable: ctx.zoomable,
+		minZoom: ctx.minZoom,
+		maxZoom: ctx.maxZoom,
 		nodesDraggable,
-		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge && !isEditorBusy,
+		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
 		fitViewPadding: ctx.fitViewPadding,
 		enableFitView: ctx.features.enableFitView,
-		enableControls: ctx.features.enableControls && ctx.features.enableFitView,
-		...!ctx.features.enableFitView && { viewport: viewportToTopLeft(ctx) }
+		enableControls: ctx.features.enableControls,
+		...controlledViewport && { viewport: controlledViewport }
 	};
 }, ({ nodes: aNodes, edges: aEdges, ...a }, { nodes: bNodes, edges: bEdges, ...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, 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,27 +244,31 @@ 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,
-		children: [enableControls && /* @__PURE__ */ jsx(Controls$1, { padding: props.fitViewPadding }), children]
+		...safeReactFlowProps,
+		nodesDraggable,
+		nodesSelectable,
+		children: [enableControls && /* @__PURE__ */ jsx(Controls$1, {
+			fitViewPadding: props.fitViewPadding,
+			minZoom: props.minZoom,
+			maxZoom: props.maxZoom
+		}), children]
 	});
 }
-var Controls$1 = /* @__PURE__ */ __name(({ padding }) => /* @__PURE__ */ jsx(Controls, {
+var Controls$1 = /* @__PURE__ */ __name(({ fitViewPadding, minZoom, maxZoom }) => /* @__PURE__ */ jsx(Controls, {
 	showInteractive: false,
 	fitViewOptions: {
-		padding,
-		minZoom: MinZoom,
-		maxZoom: 1,
+		padding: fitViewPadding,
+		minZoom,
+		maxZoom: Math.min(maxZoom, 1),
 		duration: 350
 	},
 	position: "bottom-left"
 }), "Controls");
 //#endregion
-export { LikeC4DiagramXYFlow };
+export { LikeC4DiagramXYFlow, resolveControlledViewport, resolveInteractionEnabled };

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

@@ -8,13 +8,13 @@ function EdgeDrifts({ edgeProps: { data }, svgPath }) {
 	return /* @__PURE__ */ jsx("path", {
 		className: cx("react-flow__edge-path", css({
 			pointerEvents: "none",
-			stroke: "likec4.compare.manual.outline",
+			stroke: "likec4.compare.outline",
 			fill: "none",
 			strokeWidth: {
-				base: "8px",
-				_whenHovered: "12px"
+				base: "[8px]",
+				_whenHovered: "[12px]"
 			},
-			strokeOpacity: .5
+			strokeOpacity: "0.5"
 		})),
 		d: svgPath,
 		strokeLinecap: "round"

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

@@ -240,7 +240,7 @@ var RelationshipEdge = memoEdge((props) => {
 	} : void 0;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(EdgeContainer, {
 		...props,
-		className: css({ "& .react-flow__edge-interaction": { cursor: enabledEditing && selected ? "copy" : void 0 } }),
+		className: css({ "& .react-flow__edge-interaction": { cursor: enabledEditing && selected ? "[copy]" : "inherit" } }),
 		children: [
 			/* @__PURE__ */ jsx(EdgePath, {
 				edgeProps: props,
@@ -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/edges.css.js

@@ -19,28 +19,28 @@ var labelDraggable = css({
 var controlPoint = css({
 	fill: `[var(--xy-edge-stroke)]`,
 	stroke: `transparent`,
-	fillOpacity: .5,
-	strokeWidth: 10,
-	r: 4,
+	fillOpacity: "0.5",
+	strokeWidth: "[10]",
+	r: "[4]",
 	cursor: "grab",
 	pointerEvents: "all",
 	visibility: "hidden",
-	transitionDuration: "120ms",
-	transitionProperty: "visibility, fill, fill-opacity, r",
+	transitionDuration: "fast",
+	transitionProperty: "[visibility, fill, fill-opacity, r]",
 	transitionTimingFunction: "inOut",
-	transitionDelay: "20ms",
+	transitionDelay: "[20ms]",
 	[`:where([data-likec4-selected='true'], [data-likec4-hovered='true']) &`]: {
 		visibility: "visible",
-		fillOpacity: 1,
+		fillOpacity: "1",
 		transitionTimingFunction: "out",
-		transitionDelay: "0ms"
+		transitionDelay: "0"
 	},
-	[`:where([data-likec4-selected='true']) &`]: { r: 6 },
-	[`:is([data-likec4-hovered='true']) &`]: { r: 8 },
+	[`:where([data-likec4-selected='true']) &`]: { r: "[6]" },
+	[`:is([data-likec4-hovered='true']) &`]: { r: "[8]" },
 	_hover: {
-		fill: "mantine.primary.filledHover",
-		r: 10,
-		transitionDuration: "100ms"
+		fill: "primary.body.hover",
+		r: "[10]",
+		transitionDuration: "fastest"
 	},
 	_groupActive: { cursor: "grabbing" }
 });

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/NodeDrifts.js

@@ -10,8 +10,8 @@ function NodeDrifts({ nodeProps: { data } }) {
 		css: {
 			display: "contents",
 			"& + .likec4-element-shape": {
-				outlineColor: "likec4.compare.manual.outline",
-				outlineWidth: "4px",
+				outlineColor: "likec4.compare.outline",
+				outlineWidth: "[4px]",
 				outlineStyle: "dashed",
 				outlineOffset: "1.5"
 			}

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

@@ -71,7 +71,7 @@ function NodeNotesInternal({ data }) {
 		layoutId: id,
 		className: css({
 			position: "absolute",
-			zIndex: 300,
+			zIndex: "[300]",
 			top: "0",
 			left: "0",
 			display: "flex",
@@ -84,8 +84,8 @@ function NodeNotesInternal({ data }) {
 			overflow: "hidden",
 			width: "fit-content",
 			height: "fit-content",
-			maxHeight: "70cqh",
-			maxWidth: "50cqw"
+			maxHeight: "[70cqh]",
+			maxWidth: "[50cqw]"
 		}),
 		"data-likec4-notes": id,
 		style: {
@@ -204,7 +204,7 @@ function Catch({ data, onCatchClick }) {
 		css: {
 			display: "block",
 			position: "absolute",
-			zIndex: 200,
+			zIndex: "[200]",
 			pointerEvents: "all",
 			left: "0",
 			top: "0",

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

@@ -86,7 +86,7 @@ function SequenceActorNode(props) {
 				transition: "fast",
 				translateX: "-1/2",
 				translate: "auto",
-				zIndex: "z-0"
+				zIndex: "base"
 			}),
 			style: {
 				backgroundColor: "var(--likec4-palette-stroke)",
@@ -141,7 +141,7 @@ function SequenceParallelArea(props) {
 			paddingTop: "0.5",
 			fontSize: "xs",
 			fontWeight: "bold",
-			letterSpacing: ".75px",
+			letterSpacing: "[0.75px]",
 			color: "[var(--_color)/75]"
 		},
 		children: "PARALLEL"

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

@@ -2,7 +2,6 @@ import "../../../_virtual/_rolldown/runtime.js";
 import { useDiagram } from "../../../hooks/safeContext.js";
 import { css, cx, sva } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "@likec4/core";
 import { hstack } from "@likec4/styles/patterns";
 //#region src/likec4diagram/custom/nodes/SequenceSubFlow.tsx
 var labelStyle = css.raw({
@@ -13,13 +12,17 @@ var labelStyle = css.raw({
 	letterSpacing: "tight",
 	textTransform: "uppercase"
 });
-var withBorder = css.raw({ border: "{borderWidths.2} solid {colors.colorPalette.border}" });
+var withBorder = css.raw({
+	borderWidth: "strong",
+	borderStyle: "solid",
+	borderColor: "colorPalette.border"
+});
 var withBackground = css.raw({
 	background: "colorPalette",
 	["&[data-state=\"hovered\"]"]: {
 		background: "colorPalette.hovered",
-		transition: "faster",
-		transitionDelay: "faster",
+		transition: "fastest",
+		transitionDelay: "fastest",
 		transitionTimingFunction: "out",
 		transitionProperty: "background"
 	},
@@ -48,7 +51,7 @@ var recipe = sva({
 			flex: "1",
 			color: `[oklch(from {colors.colorPalette.text} l calc(c - 0.15) h)]`,
 			fontSize: "xs",
-			lineHeight: "xxs",
+			lineHeight: "xs",
 			fontWeight: "medium",
 			truncate: true
 		})