@likec4/diagram 1.57.0 → 1.59.0

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

@@ -1,11 +1,11 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { machine } from "./setup.js";
 import { typedSystem } from "../../likec4diagram/state/utils.js";
+import { cancelSync, clearQueue, deleteNodesAndEdges, makeSnapshot, pushToSyncQueue, redo, scheduleSync, undo } from "./actions.js";
 import { isViewChange } from "./types.js";
-import { makeSnapshot, pushToSyncQueue, reschedule, scheduleSync, undo } from "./actions.js";
-import { isNot } from "remeda";
+import { findLast } from "remeda";
 import { invariant } from "@likec4/core";
-import { assign, enqueueActions, sendTo } from "xstate";
+import { assign, enqueueActions, log, sendTo } from "xstate";
 //#region src/editor/actor/state.sync-queue.ts
 var to = {
 	idle: { target: "#queue-idle" },
@@ -24,6 +24,7 @@ var idle = machine.createStateConfig({
 		...to.pending
 	},
 	on: {
+		"delete.nodes-edges": { actions: deleteNodesAndEdges() },
 		"change.sync-snapshot": {
 			actions: pushToSyncQueue(),
 			...to.pending
@@ -32,11 +33,13 @@ var idle = machine.createStateConfig({
 			actions: pushToSyncQueue(),
 			...to.process
 		},
-		"undo": {
-			actions: undo(),
-			reenter: true,
+		"undo": { actions: undo() },
+		"redo": { actions: redo() },
+		"cancel": {
+			actions: cancelSync(),
 			...to.idle
-		}
+		},
+		"view.synched": { actions: log("in idle got view.synched") }
 	}
 });
 /**
@@ -54,21 +57,32 @@ var pending = machine.createStateConfig({
 			actions: pushToSyncQueue(),
 			...to.process
 		},
+		"delete.nodes-edges": {
+			actions: deleteNodesAndEdges(),
+			reenter: true,
+			...to.pending
+		},
 		"edit.move.start": { ...to.suspended },
 		"undo": {
+			reenter: true,
 			actions: undo(),
+			...to.pending
+		},
+		"redo": {
+			reenter: true,
+			actions: redo(),
+			...to.pending
+		},
+		"cancel": {
+			actions: clearQueue(),
 			...to.idle
 		},
-		"view.synched": {
-			guard: "has pending",
-			actions: () => {},
-			...to.process
-		}
+		"view.synched": { actions: log("in pending got view.synched") }
 	},
 	after: { "wait-after-edit": [{
 		guard: "has pending",
 		...to.process
-	}, { ...to.idle }] }
+	}, to.idle] }
 });
 /**
 * When editing starts, we suspend the queue
@@ -76,17 +90,14 @@ var pending = machine.createStateConfig({
 var suspended = machine.createStateConfig({
 	...idOf(to.suspended),
 	on: {
-		"undo": {
-			actions: undo(),
+		"edit.*": to.idle,
+		"cancel": {
+			actions: [clearQueue(), cancelSync()],
 			...to.idle
-		},
-		"edit.*": { ...to.pending },
-		"change.*": { actions: reschedule() },
-		"cancel": { ...to.idle }
+		}
 	}
 });
-var peekFromQueue = () => machine.assign(({ system, context: { syncQueue, processing } }) => {
-	if (processing) return {};
+var peekFromQueue = () => machine.assign(({ system, context: { syncQueue } }) => {
 	let [head, ...tail] = syncQueue;
 	if (head === "sync-snapshot") head = makeSnapshot(system).change;
 	return {
@@ -100,16 +111,12 @@ var clearProcessing = () => ({ processing: null });
 */
 var process = machine.createStateConfig({
 	...idOf(to.process),
-	initial: "enter",
+	initial: "peekFromQueue",
 	tags: ["busy"],
 	states: {
-		enter: {
+		peekFromQueue: {
 			entry: peekFromQueue(),
 			always: [
-				{
-					guard: ({ context: { processing } }) => !processing,
-					...to.idle
-				},
 				{
 					guard: ({ context: { processing } }) => processing === "apply-latest-to-manual",
 					target: "applyLatestToManual"
@@ -118,7 +125,19 @@ var process = machine.createStateConfig({
 					guard: ({ context: { processing } }) => processing === "apply-semantic-layout",
 					target: "applySemanticLayout"
 				},
-				{ target: "executeChanges" }
+				{
+					guard: ({ context: { processing } }) => isViewChange(processing),
+					target: "executeChanges"
+				},
+				{
+					guard: "has pending",
+					reenter: true,
+					...to.process
+				},
+				{
+					actions: clearQueue(),
+					...to.idle
+				}
 			]
 		},
 		/**
@@ -126,13 +145,15 @@ var process = machine.createStateConfig({
 		*/
 		applyLatestToManual: machine.createStateConfig({
 			initial: "call",
+			entry: assign(({ system }) => ({ processing: makeSnapshot(system).change })),
 			states: {
 				call: { invoke: {
 					src: "applyLatest",
 					input: ({ context }) => {
-						const current = context.history?.head.change.layout;
+						const current = context.processing;
+						invariant(isViewChange(current) && current.op === "save-view-snapshot");
 						return {
-							current: current?._layout === "manual" ? current : void 0,
+							current: current.layout,
 							viewId: context.viewId
 						};
 					},
@@ -140,20 +161,28 @@ var process = machine.createStateConfig({
 						actions: sendTo(typedSystem.diagramActor, ({ event }) => ({
 							type: "update.view",
 							view: event.output.updated
-						}), { delay: 10 }),
+						}), { delay: 20 }),
 						target: "wait"
 					},
 					onError: {
-						actions: [({ event }) => {
-							console.error(event.error);
-						}],
+						actions: assign(({ event }) => {
+							console.error("applyLatestToManual onError", { error: event.error });
+							return {
+								processing: null,
+								syncQueue: []
+							};
+						}),
 						...to.idle
 					}
 				} },
 				wait: {
-					entry: assign(clearProcessing),
+					on: { "*": { actions: log(({ event }) => `wait: ignoring event ${event.type}`) } },
 					after: { "500ms": {
-						actions: scheduleSync(),
+						actions: [
+							clearQueue(),
+							assign({ redo: null }),
+							scheduleSync()
+						],
 						...to.idle
 					} }
 				}
@@ -169,10 +198,10 @@ var process = machine.createStateConfig({
 				input: ({ context }) => ({ viewId: context.viewId }),
 				onDone: { target: "decideNext" },
 				onError: {
-					actions: [({ event }) => {
-						console.error(event.error);
-					}],
-					target: "decideNext"
+					actions: ({ event }) => {
+						console.error("applySemanticLayout onError", { error: event.error });
+					},
+					target: "failure"
 				}
 			}
 		}),
@@ -190,36 +219,44 @@ var process = machine.createStateConfig({
 			},
 			onDone: {
 				actions: enqueueActions(({ context, event, enqueue }) => {
+					const requested = event.output.requested;
 					enqueue.assign({
 						processing: null,
-						syncQueue: context.syncQueue.filter(isNot(isViewChange))
+						syncQueue: context.syncQueue.filter((change) => !isViewChange(change) || !requested.includes(change))
+					});
+					const lastSyncSnapshot = findLast(event.output.applied, (c) => c.op === "save-view-snapshot");
+					if (lastSyncSnapshot) enqueue.sendTo(typedSystem.diagramActor, {
+						type: "update.view-bounds",
+						bounds: lastSyncSnapshot.layout.bounds
 					});
 				}),
-				target: "decideNext"
+				target: "waitViewSynced"
 			},
 			onError: {
-				actions: assign(({ event }) => {
+				actions: ({ event }) => {
 					console.error("executeChanges onError", { error: event.error });
-					return {
-						processing: null,
-						syncQueue: []
-					};
-				}),
-				...to.idle
+				},
+				target: "failure"
 			}
 		} }),
+		waitViewSynced: {
+			on: { "view.synched": { target: "decideNext" } },
+			after: { 2e3: "decideNext" }
+		},
 		decideNext: {
 			entry: assign(clearProcessing),
 			always: [{
 				guard: "has pending",
-				target: "enter"
-			}, { ...to.idle }]
-		}
+				reenter: true,
+				...to.process
+			}, to.idle]
+		},
+		failure: { always: {
+			actions: clearQueue(),
+			...to.idle
+		} }
 	},
-	on: {
-		"change.*": { actions: reschedule() },
-		"view.synched": { actions: () => {} }
-	}
+	on: {}
 });
 var syncQueue = machine.createStateConfig({
 	initial: "idle",

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

@@ -10,6 +10,10 @@ export type EditorActorEvent = {
     type: 'change.latest-to-manual';
 } | {
     type: 'change.sync-snapshot';
+} | {
+    type: 'delete.nodes-edges';
+    nodeIds: t.NodeId[];
+    edgeIds: t.EdgeId[];
 } | {
     type: 'view.synched';
 } | {
@@ -36,10 +40,11 @@ export interface EditorActorInput {
     viewId: t.ViewId;
 }
 export type SyncOp = t.ViewChange | 'sync-snapshot' | 'apply-semantic-layout' | 'apply-latest-to-manual';
-export declare const isViewChange: (change: SyncOp) => change is t.ViewChange;
+export declare const isViewChange: (change: SyncOp | null) => change is t.ViewChange;
 export interface EditorActorContext {
     viewId: t.ViewId;
     history: LinkedSnapshot | null;
+    redo: LinkedSnapshot | null;
     editing: null | {
         /**
          * The subject of the edit

package/dist/editor/actor/types.js

@@ -1,5 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
 //#region src/editor/actor/types.ts
-var isViewChange = (change) => typeof change !== "string";
+var isViewChange = (change) => change !== null && typeof change !== "string";
 //#endregion
 export { isViewChange };

package/dist/editor/useEditorActorLogic.js

@@ -25,8 +25,20 @@ function useEditorActorLogic() {
 			console.error("No editor port available for executing change");
 			throw new Error("No editor port");
 		}
-		for (const change of input.changes) await promisify(() => port.handleChange(input.viewId, change));
-		return {};
+		const applied = [];
+		for (const change of input.changes) try {
+			await promisify(() => port.handleChange(input.viewId, change));
+			applied.push(change);
+		} catch (error) {
+			console.error("Failed to execute change", {
+				change,
+				error
+			});
+		}
+		return {
+			requested: input.changes,
+			applied
+		};
 	});
 	const applySemanticLayout = useCallbackRef(async ({ input }) => {
 		if (!port) {

package/dist/hooks/index.d.ts

@@ -11,4 +11,4 @@ export { useCurrentViewModel } from './useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model, } from './useLikeC4Model';
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';
 export { useLikeC4Styles } from './useLikeC4Styles';
-export * from './useDiagram';
+export { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramSelector, useOnDiagramEvent, } from './useDiagram';

package/dist/hooks/safeContext.d.ts

@@ -1,7 +1,160 @@
 import { Provider } from 'react';
+import { AnyActorRef, SnapshotFrom, MachineSnapshot, ActorRefFromLogic } from 'xstate';
 import { DiagramApi } from '../likec4diagram/state/diagram-api';
-import { DiagramActorRef } from '../likec4diagram/state/types';
-export declare const DiagramActorContextProvider: Provider<DiagramActorRef>;
+import { DiagramActorRef, DiagramContext } from '../likec4diagram/state/types';
+import { DiagramEvents } from '../custom';
+import { OverlaysActorRef, OverlaysActorLogic } from '../overlays/overlaysActor';
+import { SearchActorRef, SearchActorLogic } from '../search/searchActor';
+import { BaseEditorActorRef } from '../editor/actor/setup';
+import { NavigationPanelActorRef, NavigationPanelActorLogic } from '../navigationpanel/actor';
+import { HotkeyActorLogic } from '../likec4diagram/state/hotkeyActor';
+import { MediaPrintActorLogic } from '../likec4diagram/state/mediaPrintActor';
+import { EditorActorLogic } from '../editor';
 export declare const DiagramApiContextProvider: Provider<DiagramApi>;
-export declare function useDiagramActorRef(): DiagramActorRef;
 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
+];
+type SafeContextForActor<A extends AnyActorRef, Snapshot, Context> = {
+    /**
+     * The React context provider for this actor
+     */
+    ContextProvider: Provider<A>;
+    /**
+     * Hook to get the actor ref from context
+     */
+    useActorRef: () => A;
+    /**
+     * @param select - Function to extract a value from the actor's snapshot
+     * @param compare - Optional comparison function. If not provided, shallow equality is used.
+     *                  The comparison function receives the selected value from the previous snapshot ()
+     *                  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>;
+    /**
+     * @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>;
+    useActorSelector<T>(select: (state: Snapshot) => T): T;
+    useActorSelector<T>(selectorCompare: SelectAndCompare<Snapshot, T>): T;
+    useActorSelector<T>(...selectorCompare: SelectAndCompare<Snapshot, T>): T;
+};
+/**
+ * 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)
+ * ```
+ */
+export declare function createSafeContextForActor<A extends AnyActorRef, Snapshot = SnapshotFrom<A>, Context = Snapshot extends {
+    context: infer C;
+} ? C : never>(name: string): SafeContextForActor<A, Snapshot, Context>;
+export declare const DiagramActorContextProvider: Provider<DiagramActorRef>, selectDiagramSnapshot: <T>(select: (state: MachineSnapshot<DiagramContext, DiagramEvents, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+    hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+}, never, never, never, never>) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+    hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+    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, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+    hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+    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: {
+    <T>(select: (state: MachineSnapshot<DiagramContext, DiagramEvents, {
+        overlays: OverlaysActorRef | undefined;
+        search: SearchActorRef | undefined;
+        editor: BaseEditorActorRef | undefined;
+        navigationPanel: NavigationPanelActorRef | undefined;
+    } & Omit<{
+        hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+        overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+        search: ActorRefFromLogic<SearchActorLogic> | undefined;
+        mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+        editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+        navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+    }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+        ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+    }, never, never, never, never>) => T): T;
+    <T>(selectorCompare: SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
+        overlays: OverlaysActorRef | undefined;
+        search: SearchActorRef | undefined;
+        editor: BaseEditorActorRef | undefined;
+        navigationPanel: NavigationPanelActorRef | undefined;
+    } & Omit<{
+        hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+        overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+        search: ActorRefFromLogic<SearchActorLogic> | undefined;
+        mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+        editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+        navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+    }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+        ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+    }, never, never, never, never>, T>): T;
+    <T>(selector: (snapshot: MachineSnapshot<DiagramContext, DiagramEvents, {
+        overlays: OverlaysActorRef | undefined;
+        search: SearchActorRef | undefined;
+        editor: BaseEditorActorRef | undefined;
+        navigationPanel: NavigationPanelActorRef | undefined;
+    } & Omit<{
+        hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+        overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+        search: ActorRefFromLogic<SearchActorLogic> | undefined;
+        mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+        editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+        navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+    }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+        ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+    }, never, never, never, never>) => T, compare: (a: T, b: T) => boolean): T;
+}, useDiagramActorRef: () => DiagramActorRef;
+export {};

package/dist/hooks/safeContext.js

@@ -1,24 +1,72 @@
 import "../_virtual/_rolldown/runtime.js";
 import { createContext, 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
-/**
-* To improve experience with HMR, we move context to separate files and use as a boundary for hooks
-*/
-var DiagramActorSafeContext = createContext(null);
-DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
 var DiagramApiSafeContext = createContext(null);
 DiagramApiSafeContext.displayName = "DiagramApiSafeContext";
-var DiagramActorContextProvider = DiagramActorSafeContext.Provider;
 var DiagramApiContextProvider = DiagramApiSafeContext.Provider;
-function useDiagramActorRef() {
-	const ctx = useContext(DiagramActorSafeContext);
-	if (ctx === null) throw new Error("DiagramActorRef is not provided");
-	return ctx;
-}
 function useDiagram() {
 	const ctx = useContext(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
+	};
+}
+var { ContextProvider: DiagramActorContextProvider, selectSnapshot: selectDiagramSnapshot, selectContext: selectDiagramContext, useActorSelector: useDiagramSelector, useActorRef: useDiagramActorRef } = createSafeContextForActor("DiagramActor");
 //#endregion
-export { DiagramActorContextProvider, DiagramApiContextProvider, useDiagram, useDiagramActorRef };
+export { DiagramActorContextProvider, DiagramApiContextProvider, createSafeContextForActor, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector };

package/dist/hooks/useCurrentViewModel.js

@@ -13,4 +13,4 @@ function useCurrentViewModel() {
 	return vm;
 }
 //#endregion
-export { useCurrentViewModel };
+export { useCurrentViewModel, useOptionalCurrentViewModel };

package/dist/hooks/useDiagram.d.ts

@@ -6,15 +6,22 @@ export { useDiagram, useDiagramActorRef };
 export type { DiagramApi, DiagramContext };
 /**
  * Helper to create a selector for diagram actor snapshot
+ * @deprecated use {@link selectDiagramSnapshot}
  */
 export declare function selectDiagramActor<T = unknown>(selector: (state: DiagramActorSnapshot) => T): (state: DiagramActorSnapshot) => T;
+/**
+ * Read diagram actor snapshot
+ * @deprecated use {@link useDiagramSelector}
+ */
 export declare function useDiagramSnapshot<T = unknown>(selector: (state: DiagramActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 /**
  * Helper to create a selector for diagram actor snapshot
+ * @deprecated use {@link selectDiagramContext}
  */
 export declare function selectDiagramActorContext<T = unknown>(selector: (state: DiagramContext) => T): (state: DiagramActorSnapshot) => T;
 /**
  * Read diagram context
+ * @deprecated use {@link useDiagramSelector}
  */
 export declare function useDiagramContext<T = unknown>(selector: (context: DiagramContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
 type PickEmittedEvent<T> = T extends DiagramEmittedEvents['type'] ? DiagramEmittedEvents & {
@@ -32,3 +39,4 @@ type PickEmittedEvent<T> = T extends DiagramEmittedEvents['type'] ? DiagramEmitt
 export declare function useOnDiagramEvent<T extends DiagramEmittedEvents['type'] | '*'>(event: T, callback: (event: PickEmittedEvent<T>) => void, options?: {
     once?: boolean;
 }): void;
+export { selectDiagramContext, selectDiagramSnapshot, useDiagramSelector, } from './safeContext';

package/dist/hooks/useDiagram.js

@@ -1,27 +1,34 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useCallbackRef } from "./useCallbackRef.js";
-import { useDiagramActorRef } from "./safeContext.js";
+import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector } from "./safeContext.js";
 import { useCallback, useEffect, useRef } from "react";
 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) {
 	return useSelector(useDiagramActorRef(), 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}
 */
 function useDiagramContext(selector, compare = shallowEqual, deps = []) {
 	const actorRef = useDiagramActorRef();
@@ -67,4 +74,4 @@ function useOnDiagramEvent(event, callback, options) {
 	]);
 }
 //#endregion
-export { selectDiagramActor, selectDiagramActorContext, useDiagramContext, useDiagramSnapshot, useOnDiagramEvent };
+export { selectDiagramActor, selectDiagramActorContext, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramSelector, useDiagramSnapshot, useOnDiagramEvent };

package/dist/hooks/useEditorActor.d.ts

@@ -2,3 +2,8 @@ import { EditorActorRef } from '../editor/actor/machine';
 import { EditorActorStateTag } from '../editor/actor/types';
 export declare function useEditorActorRef(): EditorActorRef | null;
 export declare function useEditorActorStateHasTag(tag: EditorActorStateTag): boolean;
+/**
+ * Check if the editor actor is in the 'busy' state
+ * (i.e. syncing with the backend)
+ */
+export declare function useEditorIsBusy(): boolean;