@likec4/diagram 1.59.3 → 1.60.0

package/dist/hooks/safeContext.d.mts

@@ -0,0 +1,128 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { BaseEditorActorRef } from "../editor/actor/setup.mjs";
+import { NavigationPanelActorLogic, NavigationPanelActorRef } from "../navigationpanel/actor.mjs";
+import { OverlaysActorLogic, OverlaysActorRef } from "../overlays/overlaysActor.mjs";
+import { SearchActorLogic, SearchActorRef } from "../search/searchActor.mjs";
+import { HotkeyActorLogic } from "../likec4diagram/state/hotkeyActor.mjs";
+import { MediaPrintActorLogic } from "../likec4diagram/state/mediaPrintActor.mjs";
+import { EditorActorLogic } from "../editor/actor/machine.mjs";
+import "../editor/index.mjs";
+import { DiagramApi } from "../likec4diagram/state/diagram-api.mjs";
+import { Context, Events } from "../likec4diagram/state/machine.setup.mjs";
+import { DiagramActorRef } from "../likec4diagram/state/types.mjs";
+import "../custom/index.mjs";
+import { Provider } from "react";
+import { SnapshotFrom } from "xstate";
+//#region src/hooks/safeContext.d.ts
+export declare function useDiagram(): DiagramApi;
+/**
+ * Tuple type for selector and compare function pair
+ */
+type SelectAndCompare<A, B> = [selector: (snapshot: A) => B, compare: (a: B, b: B) => boolean];
+declare const DiagramActorContextProvider: Provider<DiagramActorRef>, selectDiagramSnapshot: <T>(select: (state: import("xstate").MachineSnapshot<Context, Events, {
+  overlays: OverlaysActorRef | undefined;
+  search: SearchActorRef | undefined;
+  editor: BaseEditorActorRef | undefined;
+  navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+  hotkey: import("xstate").ActorRefFromLogic<HotkeyActorLogic> | undefined;
+  overlays: import("xstate").ActorRefFromLogic<OverlaysActorLogic> | undefined;
+  search: import("xstate").ActorRefFromLogic<SearchActorLogic> | undefined;
+  mediaPrint: import("xstate").ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+  editor: import("xstate").ActorRefFromLogic<EditorActorLogic> | undefined;
+  navigationPanel: import("xstate").ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "initializing" | "ready" | "navigating" | {
+  isReady?: never;
+} | {
+  ready?: never;
+}, never, never, never, never>) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare<import("xstate").MachineSnapshot<Context, Events, {
+  overlays: OverlaysActorRef | undefined;
+  search: SearchActorRef | undefined;
+  editor: BaseEditorActorRef | undefined;
+  navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+  hotkey: import("xstate").ActorRefFromLogic<HotkeyActorLogic> | undefined;
+  overlays: import("xstate").ActorRefFromLogic<OverlaysActorLogic> | undefined;
+  search: import("xstate").ActorRefFromLogic<SearchActorLogic> | undefined;
+  mediaPrint: import("xstate").ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+  editor: import("xstate").ActorRefFromLogic<EditorActorLogic> | undefined;
+  navigationPanel: import("xstate").ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "initializing" | "ready" | "navigating" | {
+  isReady?: never;
+} | {
+  ready?: never;
+}, never, never, never, never>, T> & {
+  Out: T;
+}, selectDiagramContext: <T>(select: (state: Context) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare<import("xstate").MachineSnapshot<Context, Events, {
+  overlays: OverlaysActorRef | undefined;
+  search: SearchActorRef | undefined;
+  editor: BaseEditorActorRef | undefined;
+  navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+  hotkey: import("xstate").ActorRefFromLogic<HotkeyActorLogic> | undefined;
+  overlays: import("xstate").ActorRefFromLogic<OverlaysActorLogic> | undefined;
+  search: import("xstate").ActorRefFromLogic<SearchActorLogic> | undefined;
+  mediaPrint: import("xstate").ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+  editor: import("xstate").ActorRefFromLogic<EditorActorLogic> | undefined;
+  navigationPanel: import("xstate").ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "initializing" | "ready" | "navigating" | {
+  isReady?: never;
+} | {
+  ready?: never;
+}, never, never, never, never>, T> & {
+  Out: T;
+}, useDiagramSelector: {
+  <T>(select: (state: import("xstate").MachineSnapshot<Context, Events, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+  } & Omit<{
+    hotkey: import("xstate").ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: import("xstate").ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: import("xstate").ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: import("xstate").ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: import("xstate").ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: import("xstate").ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+  }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "initializing" | "ready" | "navigating" | {
+    isReady?: never;
+  } | {
+    ready?: never;
+  }, never, never, never, never>) => T): T;
+  <T>(selectorCompare: SelectAndCompare<import("xstate").MachineSnapshot<Context, Events, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+  } & Omit<{
+    hotkey: import("xstate").ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: import("xstate").ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: import("xstate").ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: import("xstate").ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: import("xstate").ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: import("xstate").ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+  }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "initializing" | "ready" | "navigating" | {
+    isReady?: never;
+  } | {
+    ready?: never;
+  }, never, never, never, never>, T>): T;
+  <T>(selector: (snapshot: import("xstate").MachineSnapshot<Context, Events, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+  } & Omit<{
+    hotkey: import("xstate").ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: import("xstate").ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: import("xstate").ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: import("xstate").ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: import("xstate").ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: import("xstate").ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+  }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "initializing" | "ready" | "navigating" | {
+    isReady?: never;
+  } | {
+    ready?: never;
+  }, never, never, never, never>) => T, compare: (a: T, b: T) => boolean): T;
+}, useDiagramActorRef: () => DiagramActorRef;
+//#endregion
+export { selectDiagramContext, selectDiagramSnapshot, useDiagramActorRef, useDiagramSelector };

package/dist/hooks/safeContext.mjs

@@ -0,0 +1,74 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { createContext, use, useContext } from "react";
+import { shallowEqual } from "fast-equals";
+import { isFunction } from "remeda";
+import { useSelector } from "@xstate/react";
+import { invariant } from "motion";
+
+//#region src/hooks/safeContext.tsx
+const DiagramApiSafeContext = createContext(null);
+DiagramApiSafeContext.displayName = "DiagramApiSafeContext";
+const DiagramApiContextProvider = DiagramApiSafeContext.Provider;
+function useDiagram() {
+	const ctx = use(DiagramApiSafeContext);
+	if (ctx === null) throw new Error("DiagramApi is not provided");
+	return ctx;
+}
+/**
+* Helper to create a safe context for an actor
+* @example
+* ```tsx
+* const {
+*   ContextProvider: MyActorContext,
+*   useActorRef,
+*   selectSnapshot,
+*   useActorSelector
+* } = createSafeContextForActor<MyActorRef>()
+*
+* const select = selectSnapshot(
+*   s => ....,
+*   (a, b) => a === b
+* )
+*
+* // Later in component:
+* const value = useActorSelector(select)
+* ```
+*/
+function createSafeContextForActor(name) {
+	const Ctx = createContext(null);
+	function selectSnapshot(selector, compare) {
+		return [selector, compare ?? shallowEqual];
+	}
+	function selectContext(selector, compare) {
+		return [(snapshot) => selector(snapshot.context), compare ?? shallowEqual];
+	}
+	function useActorRef() {
+		const actorRef = useContext(Ctx);
+		if (actorRef === null) throw new Error(`${name}SafeContext is not provided `);
+		return actorRef;
+	}
+	function useActorSelector(arg1, arg2) {
+		let selector;
+		let compare;
+		if (arg2 !== void 0) [selector, compare] = [arg1, arg2];
+		else if (Array.isArray(arg1)) [selector, compare] = arg1;
+		else {
+			selector = arg1;
+			compare = shallowEqual;
+		}
+		compare ??= shallowEqual;
+		invariant(isFunction(selector), "selector must be a function");
+		return useSelector(useActorRef(), selector, compare);
+	}
+	return {
+		ContextProvider: Ctx.Provider,
+		selectSnapshot,
+		selectContext,
+		useActorSelector,
+		useActorRef
+	};
+}
+const { ContextProvider: DiagramActorContextProvider, selectSnapshot: selectDiagramSnapshot, selectContext: selectDiagramContext, useActorSelector: useDiagramSelector, useActorRef: useDiagramActorRef } = createSafeContextForActor("DiagramActor");
+
+//#endregion
+export { DiagramActorContextProvider, DiagramApiContextProvider, createSafeContextForActor, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector };

package/dist/hooks/useCallbackRef.mjs

@@ -0,0 +1,23 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useMemo, useRef } from "react";
+
+//#region src/hooks/useCallbackRef.ts
+/**
+* Memoizes a callback function so that it will not be recreated on every render.
+* The returned function is guaranteed to be the same reference across renders.
+* @param callback the callback function to memoize
+* @returns the memoized callback function
+*/
+function useCallbackRef(callback) {
+	const ref = useRef(callback);
+	ref.current = callback;
+	return useMemo(() => {
+		function callbackRef(...args) {
+			return ref.current?.(...args);
+		}
+		return callbackRef;
+	}, []);
+}
+
+//#endregion
+export { useCallbackRef };

package/dist/hooks/useCurrentView.d.mts

@@ -0,0 +1,14 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { LayoutedView, ViewId } from "@likec4/core/types";
+//#region src/hooks/useCurrentView.d.ts
+/**
+ * Returns current view id
+ * Should be used only inside LikeC4Diagram
+ */
+export declare function useCurrentViewId(): ViewId;
+/**
+ * Returns current view
+ * Should be used only inside LikeC4Diagram
+ */
+export declare function useCurrentView(): LayoutedView;
+//#endregion

package/dist/hooks/useCurrentView.mjs

@@ -0,0 +1,32 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { viewRouting } from "../utils/view-routing.mjs";
+import { selectDiagramContext, useDiagramSelector } from "./safeContext.mjs";
+
+//#region src/hooks/useCurrentView.ts
+const selectViewId = selectDiagramContext((s) => s.view.id);
+/**
+* Returns current view id
+* Should be used only inside LikeC4Diagram
+*/
+function useCurrentViewId() {
+	return useDiagramSelector(selectViewId);
+}
+const selectView = selectDiagramContext((s) => s.view);
+/**
+* Returns current view
+* Should be used only inside LikeC4Diagram
+*/
+function useCurrentView() {
+	return useDiagramSelector(selectView);
+}
+const selectViewRouting = selectDiagramContext((s) => viewRouting(s.view));
+/**
+* Returns current view routing (`spline` when not set)
+* Should be used only inside LikeC4Diagram
+*/
+function useCurrentViewRouting() {
+	return useDiagramSelector(selectViewRouting);
+}
+
+//#endregion
+export { useCurrentView, useCurrentViewId, useCurrentViewRouting };

package/dist/hooks/useCurrentViewModel.d.mts

@@ -0,0 +1,12 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { CurrentViewModel, useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.mjs";
+//#region src/hooks/useCurrentViewModel.d.ts
+/**
+ * Hook to get the current view model from the context.
+ * Throws an error if no view model is found in the context.
+ *
+ * @see useOptionalCurrentViewModel
+ */
+export declare function useCurrentViewModel(): CurrentViewModel;
+//#endregion
+export { type CurrentViewModel, useOptionalCurrentViewModel };

package/dist/hooks/useCurrentViewModel.mjs

@@ -0,0 +1,18 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.mjs";
+
+//#region src/hooks/useCurrentViewModel.ts
+/**
+* Hook to get the current view model from the context.
+* Throws an error if no view model is found in the context.
+*
+* @see useOptionalCurrentViewModel
+*/
+function useCurrentViewModel() {
+	const vm = useOptionalCurrentViewModel();
+	if (!vm) throw new Error("No CurrentViewModelContext found");
+	return vm;
+}
+
+//#endregion
+export { useCurrentViewModel, useOptionalCurrentViewModel };

package/dist/hooks/useDiagram.d.mts

@@ -0,0 +1,29 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { DiagramApi } from "../likec4diagram/state/diagram-api.mjs";
+import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector } from "./safeContext.mjs";
+import { Context, EmittedEvents } from "../likec4diagram/state/machine.setup.mjs";
+import "../likec4diagram/state/types.mjs";
+import { DependencyList } from "react";
+//#region src/hooks/useDiagram.d.ts
+/**
+ * Read diagram context
+ * @deprecated use {@link useDiagramSelector}
+ */
+export declare function useDiagramContext<T = unknown>(selector: (context: Context) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
+type PickEmittedEvent<T> = T extends EmittedEvents['type'] ? EmittedEvents & {
+  type: T;
+} : unknown;
+/**
+ * Subscribe to diagram emitted events
+ * @example
+ * ```tsx
+ * useOnDiagramEvent('navigateTo', ({viewId}) => {
+ *   console.log('Navigating to view', viewId)
+ * })
+ * ```
+ */
+export declare function useOnDiagramEvent<T extends EmittedEvents['type'] | '*'>(event: T, callback: (event: PickEmittedEvent<T>) => void, options?: {
+  once?: boolean;
+}): void;
+//#endregion
+export { type DiagramApi, type Context as DiagramContext, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector };

package/dist/hooks/useDiagram.mjs

@@ -0,0 +1,59 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "./useCallbackRef.mjs";
+import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector } from "./safeContext.mjs";
+import { useCallback, useEffect, useRef } from "react";
+import { shallowEqual } from "fast-equals";
+import { useSelector } from "@xstate/react";
+
+//#region src/hooks/useDiagram.ts
+/**
+* Read diagram context
+* @deprecated use {@link useDiagramSelector}
+*/
+function useDiagramContext(selector, compare = shallowEqual, deps = []) {
+	const actorRef = useDiagramActorRef();
+	const selectorRef = useCallbackRef(selector);
+	const select = useCallback((s) => selectorRef(s.context), deps);
+	return useSelector(actorRef, select, compare);
+}
+/**
+* Subscribe to diagram emitted events
+* @example
+* ```tsx
+* useOnDiagramEvent('navigateTo', ({viewId}) => {
+*   console.log('Navigating to view', viewId)
+* })
+* ```
+*/
+function useOnDiagramEvent(event, callback, options) {
+	const actorRef = useDiagramActorRef();
+	const callbackRef = useCallbackRef(callback);
+	const wasCalled = useRef(false);
+	const once = options?.once ?? false;
+	useEffect(() => {
+		if (once && wasCalled.current) return;
+		let subscription = actorRef.on(event, (payload) => {
+			if (!once || !wasCalled.current) try {
+				callbackRef(payload);
+			} catch (error) {
+				console.error(error);
+			}
+			wasCalled.current = true;
+			if (once) {
+				subscription?.unsubscribe();
+				subscription = null;
+			}
+		});
+		return () => {
+			subscription?.unsubscribe();
+		};
+	}, [
+		callbackRef,
+		actorRef,
+		event,
+		once
+	]);
+}
+
+//#endregion
+export { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramSelector, useOnDiagramEvent };

package/dist/hooks/useDiagramCompareLayout.d.mts

@@ -0,0 +1,54 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { DiagramMachineSnapshot } from "../likec4diagram/state/machine.mjs";
+import "../likec4diagram/state/types.mjs";
+import * as t from "@likec4/core/types";
+//#region src/hooks/useDiagramCompareLayout.d.ts
+export declare function selectCompareLayoutState({ context }: DiagramMachineSnapshot): {
+  isEnabled: false;
+  hasEditor: boolean;
+  isEditable: false;
+  state: 'inactive';
+  drifts: null;
+  canApplyLatest: boolean;
+  layout: t.LayoutType;
+} | {
+  isEnabled: true;
+  hasEditor: boolean;
+  isEditable: 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.
+   */
+  toggleCompare: (force?: 'on' | 'off') => void;
+  /**
+   * Switches the layout type between 'auto' and 'manual'.
+   */
+  switchLayout: (layoutType: t.LayoutType) => void;
+  /**
+   * Merges the latest layout into the manual layout.
+   */
+  applyLatestToManual: () => void;
+  /**
+   * Resets the manual layout to its default state.
+   */
+  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];
+//#endregion

package/dist/hooks/useDiagramCompareLayout.mjs

@@ -0,0 +1,86 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "./useCallbackRef.mjs";
+import { useDiagramActorRef } from "./safeContext.mjs";
+import { typedSystem } from "../likec4diagram/state/utils.mjs";
+import { deriveToggledFeatures } from "../likec4diagram/state/machine.setup.mjs";
+import { shallowEqual } from "fast-equals";
+import { nonNullable } from "@likec4/core";
+import { useSelector } from "@xstate/react";
+
+//#region src/hooks/useDiagramCompareLayout.ts
+function selectCompareLayoutState({ context }) {
+	const hasEditor = context.features.enableEditor;
+	const drifts = context.view.drifts ?? null;
+	if (!context.features.enableCompareWithLatest || !drifts || drifts.length === 0) return {
+		hasEditor,
+		isEnabled: false,
+		isEditable: false,
+		state: "inactive",
+		drifts: null,
+		canApplyLatest: false,
+		layout: context.view._layout ?? "auto"
+	};
+	const { enableCompareWithLatest, enableReadOnly } = deriveToggledFeatures(context);
+	return {
+		hasEditor,
+		isEnabled: true,
+		isEditable: !enableReadOnly && hasEditor,
+		state: enableCompareWithLatest === true ? "comparing" : "inactive",
+		drifts,
+		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);
+	const switchLayout = useCallbackRef((layoutType) => {
+		if (!state.isEnabled) {
+			console.warn("Compare with latest feature is not enabled");
+			return;
+		}
+		actorRef.send({
+			type: "emit.onLayoutTypeChange",
+			layoutType
+		});
+	});
+	return [state, {
+		toggleCompare: useCallbackRef((force) => {
+			if (!state.isEnabled) {
+				console.warn("Compare with latest feature is not enabled");
+				return;
+			}
+			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",
+				forceValue: nextIsActive
+			});
+		}),
+		switchLayout,
+		resetManualLayout: useCallbackRef(() => {
+			actorRef.send({ type: "layout.resetManualLayout" });
+		}),
+		applyLatestToManual: useCallbackRef(() => {
+			if (!state.isEnabled) {
+				console.warn("Compare with latest feature is not enabled");
+				return;
+			}
+			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
+			});
+		})
+	}];
+}
+
+//#endregion
+export { selectCompareLayoutState, useDiagramCompareLayout };

package/dist/hooks/useEdgeTracks.mjs

@@ -0,0 +1,91 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useXYStore } from "./useXYFlow.mjs";
+import { edgeEndFromNode } from "../utils/edge-endpoints.mjs";
+import { drawnFromRoute, editedEdgePath, editedEdgeRoute, layoutedEdgeRoute } from "../utils/edge-path.mjs";
+import { keepOwnTrack } from "../utils/edge-tracks.mjs";
+import { polylineToSegments } from "@likec4/core/geometry";
+
+//#region src/hooks/useEdgeTracks.ts
+const none = /* @__PURE__ */ new Map();
+const cache = /* @__PURE__ */ new WeakMap();
+/**
+* Relationship routes by edge id before track separation: edited routes may move, unedited ones keep
+* their Graphviz position. Cached per store `edges` and `nodes`.
+*/
+function selectTrackRoutes(state) {
+	const cached = cache.get(state.edges);
+	if (cached && cached.nodes === state.nodes) return cached.routes;
+	const routes = /* @__PURE__ */ new Map();
+	for (const edge of state.edges) {
+		if (edge.type !== "relationship") continue;
+		const source = edgeEndFromNode(state.nodeLookup.get(edge.source), "source");
+		const target = edgeEndFromNode(state.nodeLookup.get(edge.target), "target");
+		if (!source || !target) continue;
+		const endpoints = {
+			source,
+			target,
+			dir: edge.data.dir
+		};
+		const controlPoints = edge.data.controlPoints;
+		if (controlPoints) {
+			const route = editedEdgeRoute({
+				...endpoints,
+				controlPoints
+			});
+			if (route) routes.set(edge.id, {
+				id: edge.id,
+				movable: true,
+				...route
+			});
+		} else routes.set(edge.id, {
+			id: edge.id,
+			points: layoutedEdgeRoute({
+				...endpoints,
+				points: edge.data.points
+			}),
+			movable: false
+		});
+	}
+	cache.set(state.edges, {
+		nodes: state.nodes,
+		routes
+	});
+	return routes;
+}
+/** Visible orthogonal routes and labels after track separation, including edited self-loops. */
+function selectLabelRoutes(state) {
+	const trackRoutes = selectTrackRoutes(state);
+	const others = [...trackRoutes.values()];
+	return state.edges.flatMap((edge) => {
+		if (edge.type !== "relationship" || edge.hidden) return [];
+		const route = trackRoutes.get(edge.id);
+		let segments;
+		if (route) segments = route.movable ? drawnFromRoute(keepOwnTrack(route, others)).segments : polylineToSegments(route.points);
+		else {
+			const source = edgeEndFromNode(state.nodeLookup.get(edge.source), "source");
+			const target = edgeEndFromNode(state.nodeLookup.get(edge.target), "target");
+			if (!source || !target || !edge.data.controlPoints) return [];
+			segments = editedEdgePath({
+				source,
+				target,
+				dir: edge.data.dir,
+				controlPoints: edge.data.controlPoints,
+				routing: "ortho"
+			}).segments;
+		}
+		return [{
+			id: edge.id,
+			segments,
+			labelBBox: edge.data.labelBBox ?? null,
+			fixed: !!edge.data.isLabelCustomized
+		}];
+	});
+}
+const selectNone = () => none;
+/** Track routes for ortho routing when enabled; otherwise an empty map without subscribing. */
+function useTrackRoutes(routing, enabled) {
+	return useXYStore(enabled && routing === "ortho" ? selectTrackRoutes : selectNone);
+}
+
+//#endregion
+export { selectLabelRoutes, selectTrackRoutes, useTrackRoutes };

package/dist/hooks/useEditorActor.mjs

@@ -0,0 +1,27 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { selectDiagramSnapshot, useDiagramSelector } from "./safeContext.mjs";
+import { useEffect, useState } from "react";
+import { useDebouncedState } from "@mantine/hooks";
+
+//#region src/hooks/useEditorActor.ts
+const select = selectDiagramSnapshot((s) => s.children.editor ?? null, Object.is);
+function useEditorActorRef() {
+	return useDiagramSelector(select);
+}
+function useEditorActorStateHasTag(tag) {
+	const editorActor = useEditorActorRef();
+	const [hasTag, setHasTag] = useState(() => editorActor?.getSnapshot().hasTag(tag) ?? false);
+	useEffect(() => {
+		const subscription = editorActor?.select((s) => s.hasTag(tag)).subscribe((hasTag) => {
+			setHasTag(hasTag);
+		});
+		return () => {
+			subscription?.unsubscribe();
+			setHasTag(false);
+		};
+	}, [editorActor, tag]);
+	return hasTag;
+}
+
+//#endregion
+export { useEditorActorRef, useEditorActorStateHasTag };

package/dist/hooks/useId.mjs

@@ -0,0 +1,11 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useId } from "@mantine/hooks";
+
+//#region src/hooks/useId.ts
+function useId$1() {
+	return useId().replace("mantine-", "likec4-");
+}
+__name(useId$1, "useId");
+
+//#endregion
+export { useId$1 as useId };