@likec4/diagram 1.60.0 → 1.61.0

package/dist/customization/CustomizationContext.mjs

@@ -0,0 +1,64 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { applyStableCustomComponents } from "./stableComponents.mjs";
+import { createContext, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+// src/customization/CustomizationContext.tsx
+const CustomizationContext = createContext(null);
+CustomizationContext.displayName = "CustomizationContext";
+/**
+* Provides UI slot overrides for registered customizable components
+* (`LikeC4Diagram`, logos, …).
+*
+* Place this above the diagram tree (`LikeC4Diagram` / `ReactLikeC4` / `LikeC4View`).
+* Ordering relative to `LikeC4ModelProvider` does not matter.
+*
+* Overrides support two modes:
+* - **replace** — pass a component that receives the original props
+* - **wrap** — use `wrap` from {@link defineCustomComponents}; receives `{ Original, ...props }`
+*
+* @experimental
+*
+* @example
+* ```tsx
+* import {
+*   CustomizationProvider,
+*   defineCustomComponents,
+* } from 'likec4/react'
+*
+* const components = defineCustomComponents(({ wrap }) => ({
+*   LogoSvg: () => <span>Brand</span>,
+*   LikeC4Diagram: wrap(({ Original, ...props }) => (
+*     <Original {...props} pannable={false} />
+*   )),
+* }))
+*
+* function App() {
+*   return (
+*     <CustomizationProvider components={components}>
+*       <LikeC4ModelProvider likec4model={model}>
+*         <LikeC4View viewId="index" />
+*       </LikeC4ModelProvider>
+*     </CustomizationProvider>
+*   )
+* }
+* ```
+*/
+function CustomizationProvider({ components, children }) {
+	const stable = useStableComponents(components);
+	return /* @__PURE__ */ jsx(CustomizationContext.Provider, {
+		value: useMemo(() => stable ? { components: stable } : null, [stable]),
+		children
+	});
+}
+/**
+* Keeps a stable function identity per slot while swapping the underlying
+* implementation. That makes override maps HMR-friendly: dependents keep the
+* same component reference while the latest replace/wrap body is used.
+*/
+function useStableComponents(input) {
+	const instancesRef = useRef({});
+	return useMemo(() => applyStableCustomComponents(instancesRef.current, input), [input]);
+}
+
+export { CustomizationContext, CustomizationProvider };

package/dist/customization/customizable.d.mts

@@ -0,0 +1,32 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { CustomComponents, Customizables, Wrapper } from "./customization-types.mjs";
+import { FC } from "react";
+/**
+ * Marks a component as a wrap override. The registered shell injects `Original`
+ * (the built-in implementation) into the props.
+ *
+ * @experimental
+ */
+declare function wrapOriginal<P>(wrapper: Wrapper<P>): (props: P) => any;
+/**
+ * Defines overrides for registered customizable slots.
+ *
+ * Prefer keeping the returned object referentially stable (module scope) so
+ * HMR and re-renders keep override identities stable via {@link CustomizationProvider}.
+ *
+ * @example
+ * ```tsx
+ * const components = defineCustomComponents(({ wrap }) => ({
+ *   LogoSvg: () => <span>My logo</span>, // replace
+ *   LogoIconSvg: wrap(({ Original, ...props }) => (
+ *     <Original {...props} onClick={() => console.log('logo')} />
+ *   )),
+ * }))
+ * ```
+ *
+ * @experimental
+ */
+export declare function defineCustomComponents(value: Partial<Customizables> | ((ctx: {
+  wrap: typeof wrapOriginal;
+}) => Partial<Customizables>)): CustomComponents;
+export {};

package/dist/customization/customizable.mjs

@@ -0,0 +1,75 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { WrappedMarker } from "./customization-types.mjs";
+import { CustomizationContext } from "./CustomizationContext.mjs";
+import { use } from "react";
+import { jsx } from "react/jsx-runtime";
+
+// src/customization/customizable.tsx
+/**
+* Marks a component as a wrap override. The registered shell injects `Original`
+* (the built-in implementation) into the props.
+*
+* @experimental
+*/
+function wrapOriginal(wrapper) {
+	return Object.assign(wrapper, { [WrappedMarker]: true });
+}
+/**
+* Defines overrides for registered customizable slots.
+*
+* Prefer keeping the returned object referentially stable (module scope) so
+* HMR and re-renders keep override identities stable via {@link CustomizationProvider}.
+*
+* @example
+* ```tsx
+* const components = defineCustomComponents(({ wrap }) => ({
+*   LogoSvg: () => <span>My logo</span>, // replace
+*   LogoIconSvg: wrap(({ Original, ...props }) => (
+*     <Original {...props} onClick={() => console.log('logo')} />
+*   )),
+* }))
+* ```
+*
+* @experimental
+*/
+function defineCustomComponents(value) {
+	if (typeof value === "function") return value({ wrap: wrapOriginal });
+	return value;
+}
+function useCustomization(name) {
+	return use(CustomizationContext)?.components?.[name];
+}
+const registry = /* @__PURE__ */ new Map();
+function register(displayName, original) {
+	const name = displayName;
+	const existing = registry.get(name);
+	if (existing) {
+		existing.Original = original;
+		return existing.HMRBoundary;
+	}
+	const ref = {
+		Original: original,
+		HMRBoundary: ((props) => {
+			const Cmp = useCustomization(name);
+			if (!Cmp) return /* @__PURE__ */ jsx(ref.Original, { ...props });
+			if (Cmp[WrappedMarker]) return /* @__PURE__ */ jsx(Cmp, {
+				Original: ref.Original,
+				...props
+			});
+			return /* @__PURE__ */ jsx(Cmp, { ...props });
+		})
+	};
+	ref.HMRBoundary.displayName = displayName;
+	registry.set(name, ref);
+	return ref.HMRBoundary;
+}
+/**
+* Registers a LikeC4 UI slot that consumers can override via {@link CustomizationProvider}.
+*
+* @internal Prefer not to call from user code — slot names are owned by LikeC4.
+*/
+function customizable(displayName) {
+	return (Component) => register(displayName, Component);
+}
+
+export { customizable, defineCustomComponents };

package/dist/customization/customization-types.d.mts

@@ -0,0 +1,40 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ElementShape } from "../base-primitives/element/ElementShape.mjs";
+import { Logo, LogoIcon } from "../components/Logo.mjs";
+import { LikeC4Diagram } from "../LikeC4Diagram.mjs";
+import { LikeC4View } from "../LikeC4View.mjs";
+import { ReactLikeC4 } from "../ReactLikeC4.mjs";
+import { FC } from "react";
+import { JSX as JSX$1 } from "react/jsx-runtime";
+type RegisteredCustomizables = typeof LikeC4Diagram | typeof LikeC4View | typeof ReactLikeC4 | typeof Logo | typeof LogoIcon | typeof ElementShape;
+export type Customizable<TComponent extends FC<any>, Name extends string> = TComponent & {
+  readonly displayName: Name;
+};
+export type CustomizableName = RegisteredCustomizables['displayName'];
+export type Customizables = { [K in CustomizableName]: Extract<RegisteredCustomizables, {
+  displayName: K;
+}> extends Customizable<infer Component, K> ? Component : never; };
+export type PropsOf<FC> = FC extends ((props: infer P) => any) ? P : never;
+export type Wrapper<P> = (props: P & {
+  Original: FC<P>;
+}) => JSX$1.Element;
+/**
+ * Marker copied onto wrap overrides so the registered shell can inject `Original`.
+ * @internal
+ */
+export declare const WrappedMarker: unique symbol;
+/**
+ * A replacement or wrap override for a registered slot.
+ */
+export type CustomComponent<Original extends FC<any>> = Original & {
+  [WrappedMarker]?: never;
+} | Wrapper<PropsOf<Original>> & {
+  [WrappedMarker]: true;
+};
+/**
+ * Partial map of slot overrides for {@link CustomizationProvider}.
+ *
+ * @experimental
+ */
+export type CustomComponents = { [K in CustomizableName]?: CustomComponent<Customizables[K]>; };
+export {};

package/dist/customization/customization-types.mjs

@@ -0,0 +1,8 @@
+// src/customization/customization-types.ts
+/**
+* Marker copied onto wrap overrides so the registered shell can inject `Original`.
+* @internal
+*/
+const WrappedMarker = Symbol.for("likec4.customizable.wrapped");
+
+export { WrappedMarker };

package/dist/customization/stableComponents.mjs

@@ -0,0 +1,35 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { WrappedMarker } from "./customization-types.mjs";
+import { isEmptyish } from "remeda";
+
+// src/customization/stableComponents.ts
+/**
+* Builds a components map with stable function identities per slot.
+* Mutates `instances` so later calls with new override bodies reuse the same shells.
+*
+* @internal
+*/
+function applyStableCustomComponents(instances, input) {
+	if (input === void 0) return;
+	const next = {};
+	for (const [key, value] of Object.entries(input)) {
+		if (value == null) continue;
+		let ref = instances[key];
+		if (!ref) {
+			const entry = {
+				component: value,
+				instance: ((props) => entry.component(props))
+			};
+			ref = entry;
+			instances[key] = entry;
+		}
+		ref.component = value;
+		if (value[WrappedMarker]) ref.instance[WrappedMarker] = true;
+		else delete ref.instance[WrappedMarker];
+		next[key] = ref.instance;
+	}
+	if (isEmptyish(next)) return;
+	return next;
+}
+
+export { applyStableCustomComponents };

package/dist/editor/LikeC4EditorCallbacks.d.mts

@@ -1,6 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import * as t from "@likec4/core/types";
-//#region src/editor/LikeC4EditorCallbacks.d.ts
 /**
  * Result of applying a change from the LikeC4 Editor.
  */
@@ -40,5 +39,4 @@ export interface LikeC4EditorCallbacks {
    */
   handleChange(viewId: t.ViewId, change: t.ViewChange): void | LikeC4EditorChangeResult | Promise<void | LikeC4EditorChangeResult>;
 }
-export declare function createLikeC4Editor(callbacks: LikeC4EditorCallbacks): LikeC4EditorCallbacks;
-//#endregion
+export declare function createLikeC4Editor(callbacks: LikeC4EditorCallbacks): LikeC4EditorCallbacks;

package/dist/editor/LikeC4EditorCallbacks.mjs

@@ -1,6 +1,6 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 
-//#region src/editor/LikeC4EditorCallbacks.tsx
+// src/editor/LikeC4EditorCallbacks.tsx
 function shouldWaitForViewSync(result) {
 	return result?.waitForViewSync ?? true;
 }
@@ -8,5 +8,4 @@ function createLikeC4Editor(callbacks) {
 	return callbacks;
 }
 
-//#endregion
 export { createLikeC4Editor, shouldWaitForViewSync };

package/dist/editor/LikeC4EditorProvider.d.mts

@@ -1,7 +1,6 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { LikeC4EditorCallbacks } from "./LikeC4EditorCallbacks.mjs";
 import { PropsWithChildren } from "react";
-//#region src/editor/LikeC4EditorProvider.d.ts
 export type LikeC4EditorProviderProps = PropsWithChildren<{
   editor: LikeC4EditorCallbacks;
 }>;
@@ -26,5 +25,4 @@ export type LikeC4EditorProviderProps = PropsWithChildren<{
  * </LikeC4EditorProvider>
  * ```
  */
-export declare function LikeC4EditorProvider({ children, editor }: LikeC4EditorProviderProps): import("react").JSX.Element;
-//#endregion
+export declare function LikeC4EditorProvider({ children, editor }: LikeC4EditorProviderProps): import("react").JSX.Element;

package/dist/editor/LikeC4EditorProvider.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 
-//#region src/editor/LikeC4EditorProvider.tsx
+// src/editor/LikeC4EditorProvider.tsx
 const LikeC4EditorReactContext = createContext(null);
 /**
 * Provider for the LikeC4 Editor.
@@ -35,5 +35,4 @@ function useOptionalLikeC4Editor() {
 	return useContext(LikeC4EditorReactContext);
 }
 
-//#endregion
 export { LikeC4EditorProvider, useOptionalLikeC4Editor };

package/dist/editor/actor/actions.mjs

@@ -1,11 +1,11 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { machine } from "./setup.mjs";
 import { createViewChange } from "../../likec4diagram/state/createViewChange.mjs";
 import { typedSystem } from "../../likec4diagram/state/utils.mjs";
+import { machine } from "./setup.mjs";
 import { filter, isNot, omit } from "remeda";
 import { assertEvent } from "xstate";
 
-//#region src/editor/actor/actions.ts
+// src/editor/actor/actions.ts
 /**
 * Actually this is DiagramActorRef
 * But we can't use it here due to circular type inference
@@ -204,5 +204,4 @@ const clearQueue = () => machine.assign({
 	processing: null
 });
 
-//#endregion
 export { cancelSync, clearQueue, deleteNodesAndEdges, isLayoutChange, isLayoutChangeOp, makeSnapshot, pushHistory, pushToSyncQueue, redo, saveBeforeEditing, scheduleSync, undo };

package/dist/editor/actor/hotkey.d.mts

@@ -1,8 +1,6 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from "xstate";
-//#region src/editor/actor/hotkey.d.ts
 export type HotKeyEvent = {
   type: 'undo' | 'redo';
 };
-export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {}
-//#endregion
+export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {}

package/dist/editor/actor/hotkey.mjs

@@ -2,7 +2,7 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { getHotkeyHandler } from "@mantine/hooks";
 import { fromCallback } from "xstate";
 
-//#region src/editor/actor/hotkey.ts
+// src/editor/actor/hotkey.ts
 const hotkey = fromCallback(({ sendBack }) => {
 	const ctrlZHandler = getHotkeyHandler([[
 		"mod + z",
@@ -25,5 +25,4 @@ const hotkey = fromCallback(({ sendBack }) => {
 	};
 });
 
-//#endregion
 export { hotkey };

package/dist/editor/actor/machine.d.mts

@@ -1,9 +1,7 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { EditorActorEmitedEvent, EditorActorEvent } from "./types.mjs";
 import { BaseEditorActorLogic } from "./setup.mjs";
+import { EditorActorEmitedEvent, EditorActorEvent } from "./types.mjs";
 import { ActorRef, SnapshotFrom } from "xstate";
-//#region src/editor/actor/machine.d.ts
 export interface EditorActorLogic extends BaseEditorActorLogic {}
 export type EditorActorSnapshot = SnapshotFrom<EditorActorLogic>;
-export interface EditorActorRef extends ActorRef<EditorActorSnapshot, EditorActorEvent, EditorActorEmitedEvent> {}
-//#endregion
+export interface EditorActorRef extends ActorRef<EditorActorSnapshot, EditorActorEvent, EditorActorEmitedEvent> {}

package/dist/editor/actor/machine.mjs

@@ -3,7 +3,7 @@ import { machine } from "./setup.mjs";
 import { editor } from "./state.editor.mjs";
 import { syncQueue } from "./state.sync-queue.mjs";
 
-//#region src/editor/actor/machine.ts
+// src/editor/actor/machine.ts
 const _editorActorLogic = machine.createMachine({
 	id: "editor",
 	context: ({ input }) => ({
@@ -23,5 +23,4 @@ const _editorActorLogic = machine.createMachine({
 });
 const editorActorLogic = _editorActorLogic;
 
-//#endregion
 export { editorActorLogic };

package/dist/editor/actor/setup.d.mts

@@ -4,7 +4,6 @@ import { inferChildrenRef, inferProvidedActor } from "../../utils/defineActors.m
 import { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, EditorActorStateTag } from "./types.mjs";
 import * as t from "@likec4/core/types";
 import { ActorRefFromLogic, StateMachine, StateValue } from "xstate";
-//#region src/editor/actor/setup.d.ts
 export declare namespace EditorCalls {
   type ApplyLatestToManual = (params: {
     input: ApplyLatestToManual.Input;
@@ -56,4 +55,4 @@ declare const actors: {
  */
 export interface BaseEditorActorLogic<State extends StateValue = any> extends StateMachine<EditorActorContext, EditorActorEvent, inferChildrenRef<typeof actors>, inferProvidedActor<typeof actors>, never, never, never, State, EditorActorStateTag, EditorActorInput, never, EditorActorEmitedEvent, never, never> {}
 export type BaseEditorActorRef = ActorRefFromLogic<BaseEditorActorLogic>;
-//#endregion
+export {};

package/dist/editor/actor/setup.mjs

@@ -3,7 +3,7 @@ import { defineActors } from "../../utils/defineActors.mjs";
 import { hotkey } from "./hotkey.mjs";
 import { fromPromise, setup } from "xstate";
 
-//#region src/editor/actor/setup.ts
+// src/editor/actor/setup.ts
 const applyLatest = fromPromise(() => {
 	throw new Error("Not implemented");
 });
@@ -40,5 +40,4 @@ const machine = setup({
 	}
 });
 
-//#endregion
 export { machine };

package/dist/editor/actor/state.editor.mjs

@@ -1,8 +1,8 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { machine } from "./setup.mjs";
 import { pushHistory, saveBeforeEditing } from "./actions.mjs";
+import { machine } from "./setup.mjs";
 
-//#region src/editor/actor/state.editor.ts
+// src/editor/actor/state.editor.ts
 const to = {
 	idle: { target: "#idle" },
 	moving: { target: "#moving" }
@@ -54,5 +54,4 @@ const editor = machine.createStateConfig({
 	on: { "*": { actions: ensureHotKey() } }
 });
 
-//#endregion
 export { editor };

package/dist/editor/actor/state.sync-queue.mjs

@@ -1,13 +1,13 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { machine } from "./setup.mjs";
 import { typedSystem } from "../../likec4diagram/state/utils.mjs";
 import { cancelSync, clearQueue, deleteNodesAndEdges, makeSnapshot, pushToSyncQueue, redo, scheduleSync, undo } from "./actions.mjs";
+import { machine } from "./setup.mjs";
 import { isViewChange } from "./types.mjs";
 import { findLast } from "remeda";
 import { invariant } from "@likec4/core";
 import { assign, enqueueActions, log, sendTo } from "xstate";
 
-//#region src/editor/actor/state.sync-queue.ts
+// src/editor/actor/state.sync-queue.ts
 const to = {
 	idle: { target: "#queue-idle" },
 	pending: { target: "#queue-pending" },
@@ -272,5 +272,4 @@ const syncQueue = machine.createStateConfig({
 	on: {}
 });
 
-//#endregion
 export { syncQueue };

package/dist/editor/actor/types.d.mts

@@ -2,7 +2,6 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { Types } from "../../likec4diagram/types.mjs";
 import { HotKeyEvent } from "./hotkey.mjs";
 import * as t from "@likec4/core/types";
-//#region src/editor/actor/types.d.ts
 export type EditorActorEvent = {
   type: 'change.view';
   change: t.ViewChange;
@@ -62,5 +61,4 @@ export interface EditorActorContext {
 export type EditorActorEmitedEvent = {
   type: 'idle';
 };
-export type EditorActorStateTag = 'pending' | 'busy' | 'ai-semantic-layout';
-//#endregion
+export type EditorActorStateTag = 'pending' | 'busy' | 'ai-semantic-layout';

package/dist/editor/actor/types.mjs

@@ -1,7 +1,6 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 
-//#region src/editor/actor/types.ts
+// src/editor/actor/types.ts
 const isViewChange = (change) => change !== null && typeof change !== "string";
 
-//#endregion
 export { isViewChange };

package/dist/editor/applyChangesToManualLayout.mjs

@@ -5,7 +5,7 @@ import { BBox as BBox$1, convertPoint, vector } from "@likec4/core/geometry";
 import "@likec4/core/types";
 import { castDraft, produce, setAutoFreeze } from "immer";
 
-//#region src/editor/applyChangesToManualLayout.ts
+// src/editor/applyChangesToManualLayout.ts
 /**
 * Applies changes to a manual layout.
 *
@@ -165,5 +165,4 @@ function edgeControlPoints(source, target) {
 	return [sourceBorderPoint.add(sourceToTarget.multiply(.4)).trunc().toObject(), sourceBorderPoint.add(sourceToTarget.multiply(.6)).trunc().toObject()];
 }
 
-//#endregion
 export { applyChangesToManualLayout };

package/dist/editor/index.d.mts

@@ -1,5 +1,5 @@
-import { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, EditorActorStateTag, LinkedSnapshot, Snapshot, SyncOp } from "./actor/types.mjs";
 import { EditorActorLogic, EditorActorRef, EditorActorSnapshot } from "./actor/machine.mjs";
+import { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, EditorActorStateTag, LinkedSnapshot, Snapshot, SyncOp } from "./actor/types.mjs";
 import { LikeC4EditorCallbacks, LikeC4EditorChangeResult, createLikeC4Editor } from "./LikeC4EditorCallbacks.mjs";
 import { LikeC4EditorProvider } from "./LikeC4EditorProvider.mjs";
 export type { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, EditorActorLogic, EditorActorRef, EditorActorSnapshot, EditorActorStateTag, LinkedSnapshot, Snapshot, SyncOp };

package/dist/editor/useEditorActorLogic.mjs

@@ -1,14 +1,14 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useCallbackRef } from "../hooks/useCallbackRef.mjs";
-import { shouldWaitForViewSync } from "./LikeC4EditorCallbacks.mjs";
-import { useOptionalLikeC4Editor } from "./LikeC4EditorProvider.mjs";
 import { editorActorLogic } from "./actor/machine.mjs";
 import { applyChangesToManualLayout } from "./applyChangesToManualLayout.mjs";
+import { shouldWaitForViewSync } from "./LikeC4EditorCallbacks.mjs";
+import { useOptionalLikeC4Editor } from "./LikeC4EditorProvider.mjs";
 import { useMemo } from "react";
 import { isNullish } from "remeda";
 import { fromPromise } from "xstate";
 
-//#region src/editor/useEditorActorLogic.ts
+// src/editor/useEditorActorLogic.ts
 const promisify = (fn) => {
 	return Promise.resolve().then(() => fn());
 };
@@ -75,5 +75,4 @@ function useEditorActorLogic() {
 	]);
 }
 
-//#endregion
 export { useEditorActorLogic };

package/dist/hooks/safeContext.d.mts

@@ -1,24 +1,18 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { BaseEditorActorRef } from "../editor/actor/setup.mjs";
-import { NavigationPanelActorLogic, NavigationPanelActorRef } from "../navigationpanel/actor.mjs";
+import { Context, Events } from "../likec4diagram/state/machine.setup.mjs";
+import { EditorActorLogic } from "../editor/actor/machine.mjs";
 import { OverlaysActorLogic, OverlaysActorRef } from "../overlays/overlaysActor.mjs";
 import { SearchActorLogic, SearchActorRef } from "../search/searchActor.mjs";
+import { BaseEditorActorRef } from "../editor/actor/setup.mjs";
+import { NavigationPanelActorLogic, NavigationPanelActorRef } from "../navigationpanel/actor.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;
@@ -32,10 +26,8 @@ declare const DiagramActorContextProvider: Provider<DiagramActorRef>, selectDiag
   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, {
+  ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing" | "comparing">;
+}, never, never, never, never>) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => [selector: (snapshot: import("xstate").MachineSnapshot<Context, Events, {
   overlays: OverlaysActorRef | undefined;
   search: SearchActorRef | undefined;
   editor: BaseEditorActorRef | undefined;
@@ -48,12 +40,10 @@ declare const DiagramActorContextProvider: Provider<DiagramActorRef>, selectDiag
   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> & {
+  ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing" | "comparing">;
+}, never, never, never, never>) => T, compare: (a: T, b: T) => boolean] & {
   Out: T;
-}, selectDiagramContext: <T>(select: (state: Context) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare<import("xstate").MachineSnapshot<Context, Events, {
+}, selectDiagramContext: <T>(select: (state: Context) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => [selector: (snapshot: import("xstate").MachineSnapshot<Context, Events, {
   overlays: OverlaysActorRef | undefined;
   search: SearchActorRef | undefined;
   editor: BaseEditorActorRef | undefined;
@@ -66,10 +56,8 @@ declare const DiagramActorContextProvider: Provider<DiagramActorRef>, selectDiag
   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> & {
+  ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing" | "comparing">;
+}, never, never, never, never>) => T, compare: (a: T, b: T) => boolean] & {
   Out: T;
 }, useDiagramSelector: {
   <T>(select: (state: import("xstate").MachineSnapshot<Context, Events, {
@@ -85,11 +73,9 @@ declare const DiagramActorContextProvider: Provider<DiagramActorRef>, selectDiag
     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;
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing" | "comparing">;
   }, never, never, never, never>) => T): T;
-  <T>(selectorCompare: SelectAndCompare<import("xstate").MachineSnapshot<Context, Events, {
+  <T>(selectorCompare: [selector: (snapshot: import("xstate").MachineSnapshot<Context, Events, {
     overlays: OverlaysActorRef | undefined;
     search: SearchActorRef | undefined;
     editor: BaseEditorActorRef | undefined;
@@ -102,10 +88,8 @@ declare const DiagramActorContextProvider: Provider<DiagramActorRef>, selectDiag
     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;
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing" | "comparing">;
+  }, never, never, never, never>) => T, compare: (a: T, b: T) => boolean]): T;
   <T>(selector: (snapshot: import("xstate").MachineSnapshot<Context, Events, {
     overlays: OverlaysActorRef | undefined;
     search: SearchActorRef | undefined;
@@ -119,10 +103,7 @@ declare const DiagramActorContextProvider: Provider<DiagramActorRef>, selectDiag
     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;
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing" | "comparing">;
   }, never, never, never, never>) => T, compare: (a: T, b: T) => boolean): T;
 }, useDiagramActorRef: () => DiagramActorRef;
-//#endregion
 export { selectDiagramContext, selectDiagramSnapshot, useDiagramActorRef, useDiagramSelector };