@likec4/diagram 1.59.3 → 1.59.4

package/dist/editor/applyChangesToManualLayout.js

@@ -56,7 +56,7 @@ function _applyChangesToManualLayout(manualView, latestView) {
 			manual
 		});
 		if (isBetweenNewLeafNodes(latest)) return removeDrift(latest);
-		return makeAsStraightLine(latest, nodesMap.get(latest.source), nodesMap.get(latest.target));
+		return makeAsStraightLine(latest, nonNullable(nodesMap.get(latest.source), `Source node ${latest.source} not found in processed nodes`), nonNullable(nodesMap.get(latest.target), `Target node ${latest.target} not found in processed nodes`));
 	});
 	const bounds = BBox$1.merge(...nodes.filter(isRootNode));
 	return produce(latestView, (draft) => {
@@ -117,6 +117,8 @@ function applyFromManualEdge(edges) {
 			draft.labelBBox.x = manual.labelBBox.x;
 			draft.labelBBox.y = manual.labelBBox.y;
 		}
+		if (manual.isLabelCustomized === true) draft.isLabelCustomized = true;
+		else delete draft.isLabelCustomized;
 		draft.drifts = null;
 	});
 }
@@ -137,6 +139,7 @@ function makeAsStraightLine(edge, sourceNode, targetNode) {
 		if (edge.labelBBox) {
 			draft.labelBBox.x = labelPos.x;
 			draft.labelBBox.y = labelPos.y;
+			if (edge.isLabelCustomized === true) delete draft.isLabelCustomized;
 		}
 		delete draft.drifts;
 	});

package/dist/hooks/safeContext.d.ts

@@ -35,12 +35,16 @@ type SafeContextForActor<A extends AnyActorRef, Snapshot, Context> = {
      *                  and the selected value from the current snapshot. If the comparison returns true,
      *                  the component will not re-render.
      */
-    selectSnapshot<T>(select: (state: Snapshot) => T, compare?: (old: NoInfer<T>, next: NoInfer<T>) => boolean): SelectAndCompare<Snapshot, T>;
+    selectSnapshot<T>(select: (state: Snapshot) => T, compare?: (old: NoInfer<T>, next: NoInfer<T>) => boolean): SelectAndCompare<Snapshot, T> & {
+        Out: T;
+    };
     /**
      * @param select - Function to extract a value from the actor's context
      * @param compare - Optional comparison function. If not provided, shallow equality is used.
      */
-    selectContext<T>(select: (state: Context) => T, compare?: (old: NoInfer<T>, next: NoInfer<T>) => boolean): SelectAndCompare<Snapshot, T>;
+    selectContext<T>(select: (state: Context) => T, compare?: (old: NoInfer<T>, next: NoInfer<T>) => boolean): SelectAndCompare<Snapshot, T> & {
+        Out: T;
+    };
     useActorSelector<T>(select: (state: Snapshot) => T): T;
     useActorSelector<T>(selectorCompare: SelectAndCompare<Snapshot, T>): T;
     useActorSelector<T>(...selectorCompare: SelectAndCompare<Snapshot, T>): T;
@@ -96,7 +100,9 @@ export declare const DiagramActorContextProvider: Provider<DiagramActorRef>, sel
     navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
 }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
     ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
-}, never, never, never, never>, T>, selectDiagramContext: <T>(select: (state: DiagramContext) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
+}, never, never, never, never>, T> & {
+    Out: T;
+}, selectDiagramContext: <T>(select: (state: DiagramContext) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
     overlays: OverlaysActorRef | undefined;
     search: SearchActorRef | undefined;
     editor: BaseEditorActorRef | undefined;
@@ -110,7 +116,9 @@ export declare const DiagramActorContextProvider: Provider<DiagramActorRef>, sel
     navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
 }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
     ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
-}, never, never, never, never>, T>, useDiagramSelector: {
+}, never, never, never, never>, T> & {
+    Out: T;
+}, useDiagramSelector: {
     <T>(select: (state: MachineSnapshot<DiagramContext, DiagramEvents, {
         overlays: OverlaysActorRef | undefined;
         search: SearchActorRef | undefined;

package/dist/hooks/safeContext.js

@@ -1,5 +1,5 @@
 import "../_virtual/_rolldown/runtime.js";
-import { createContext, useContext } from "react";
+import { createContext, use, useContext } from "react";
 import { shallowEqual } from "fast-equals";
 import { isFunction } from "remeda";
 import { useSelector } from "@xstate/react";
@@ -9,7 +9,7 @@ var DiagramApiSafeContext = createContext(null);
 DiagramApiSafeContext.displayName = "DiagramApiSafeContext";
 var DiagramApiContextProvider = DiagramApiSafeContext.Provider;
 function useDiagram() {
-	const ctx = useContext(DiagramApiSafeContext);
+	const ctx = use(DiagramApiSafeContext);
 	if (ctx === null) throw new Error("DiagramApi is not provided");
 	return ctx;
 }

package/dist/hooks/useCurrentView.js

@@ -1,21 +1,21 @@
 import "../_virtual/_rolldown/runtime.js";
-import { selectDiagramActor, useDiagramSnapshot } from "./useDiagram.js";
+import { selectDiagramContext, useDiagramSelector } from "./safeContext.js";
 //#region src/hooks/useCurrentView.ts
-var selectViewId = selectDiagramActor((s) => s.context.view.id);
+var selectViewId = selectDiagramContext((s) => s.view.id);
 /**
 * Returns current view id
 * Should be used only inside LikeC4Diagram
 */
 function useCurrentViewId() {
-	return useDiagramSnapshot(selectViewId);
+	return useDiagramSelector(selectViewId);
 }
-var selectView = selectDiagramActor((s) => s.context.view);
+var selectView = selectDiagramContext((s) => s.view);
 /**
 * Returns current view
 * Should be used only inside LikeC4Diagram
 */
 function useCurrentView() {
-	return useDiagramSnapshot(selectView);
+	return useDiagramSelector(selectView);
 }
 //#endregion
 export { useCurrentView, useCurrentViewId };

package/dist/hooks/useDiagram.js

@@ -6,28 +6,6 @@ import { shallowEqual } from "fast-equals";
 import { useSelector } from "@xstate/react";
 //#region src/hooks/useDiagram.ts
 /**
-* Helper to create a selector for diagram actor snapshot
-* @deprecated use {@link selectDiagramSnapshot}
-*/
-function selectDiagramActor(selector) {
-	return selector;
-}
-/**
-* Read diagram actor snapshot
-* @deprecated use {@link useDiagramSelector}
-*/
-function useDiagramSnapshot(selector, compare = shallowEqual) {
-	const actorRef = useDiagramActorRef();
-	return useSelector(actorRef, selector, compare);
-}
-/**
-* Helper to create a selector for diagram actor snapshot
-* @deprecated use {@link selectDiagramContext}
-*/
-function selectDiagramActorContext(selector) {
-	return (state) => selector(state.context);
-}
-/**
 * Read diagram context
 * @deprecated use {@link useDiagramSelector}
 */
@@ -76,4 +54,4 @@ function useOnDiagramEvent(event, callback, options) {
 	]);
 }
 //#endregion
-export { selectDiagramActor, selectDiagramActorContext, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramSelector, useDiagramSnapshot, useOnDiagramEvent };
+export { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramSelector, useOnDiagramEvent };

package/dist/hooks/useDiagramCompareLayout.d.ts

@@ -1,10 +1,10 @@
 import { DiagramActorSnapshot } from '../likec4diagram/state/types';
 import type * as t from '@likec4/core/types';
-export declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
+export declare function selectCompareLayoutState({ context }: DiagramActorSnapshot): {
     isEnabled: false;
-    hasEditor: false;
+    hasEditor: boolean;
     isEditable: false;
-    isActive: false;
+    state: 'inactive';
     drifts: null;
     canApplyLatest: boolean;
     layout: t.LayoutType;
@@ -12,7 +12,7 @@ export declare const selectCompareLayoutState: ({ context }: DiagramActorSnapsho
     isEnabled: true;
     hasEditor: boolean;
     isEditable: boolean;
-    isActive: boolean;
+    state: 'comparing' | 'inactive';
     drifts: readonly [t.LayoutedViewDriftReason, ...t.LayoutedViewDriftReason[]];
     canApplyLatest: boolean;
     layout: t.LayoutType;

package/dist/hooks/useDiagramCompareLayout.js

@@ -1,33 +1,35 @@
 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.
 *
@@ -52,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",
@@ -62,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(() => {
@@ -73,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

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/index.d.ts

@@ -1,4 +1,5 @@
-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';
@@ -7,7 +8,7 @@ export { createLikeC4Editor, type LikeC4EditorCallbacks, type LikeC4EditorChange
 export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './LikeC4ProjectsProvider';
 export { type DiagramApi, type DiagramContext, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramContext, useDiagramSelector, useOnDiagramEvent, } from './hooks/useDiagram';
 export { type DiagramCompareLayoutOps, type DiagramCompareLayoutState, useDiagramCompareLayout, } from './hooks/useDiagramCompareLayout';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './hooks/useLikeC4Model';
+export { 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';
@@ -23,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,19 @@
-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 { 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";
@@ -24,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, useDiagramCompareLayout, 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/DiagramXYFlow.d.ts

@@ -1,7 +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,7 +1,7 @@
 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";
@@ -47,36 +47,39 @@ 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";
 	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,
 		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);
@@ -250,18 +253,22 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 		...safeReactFlowProps,
 		nodesDraggable,
 		nodesSelectable,
-		children: [enableControls && /* @__PURE__ */ jsx(Controls$1, { padding: props.fitViewPadding }), children]
+		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, resolveInteractionEnabled };
+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,

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/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
 		})