@likec4/diagram 1.56.0 → 1.58.0

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

@@ -0,0 +1,272 @@
+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 { findLast } from "remeda";
+import { invariant } from "@likec4/core";
+import { assign, enqueueActions, log, sendTo } from "xstate";
+//#region src/editor/actor/state.sync-queue.ts
+var to = {
+	idle: { target: "#queue-idle" },
+	pending: { target: "#queue-pending" },
+	suspended: { target: "#queue-suspended" },
+	process: { target: "#queue-process" }
+};
+var idOf = (t) => ({ id: t.target.substring(1) });
+/**
+* Idle state, no pending operations
+*/
+var idle = machine.createStateConfig({
+	...idOf(to.idle),
+	always: {
+		guard: "has pending",
+		...to.pending
+	},
+	on: {
+		"delete.nodes-edges": { actions: deleteNodesAndEdges() },
+		"change.sync-snapshot": {
+			actions: pushToSyncQueue(),
+			...to.pending
+		},
+		"change.*": {
+			actions: pushToSyncQueue(),
+			...to.process
+		},
+		"undo": { actions: undo() },
+		"redo": { actions: redo() },
+		"cancel": {
+			actions: cancelSync(),
+			...to.idle
+		},
+		"view.synched": { actions: log("in idle got view.synched") }
+	}
+});
+/**
+* Has pending operations
+*/
+var pending = machine.createStateConfig({
+	...idOf(to.pending),
+	on: {
+		"change.sync-snapshot": {
+			reenter: true,
+			actions: pushToSyncQueue(),
+			...to.pending
+		},
+		"change.*": {
+			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": { actions: log("in pending got view.synched") }
+	},
+	after: { "wait-after-edit": [{
+		guard: "has pending",
+		...to.process
+	}, to.idle] }
+});
+/**
+* When editing starts, we suspend the queue
+*/
+var suspended = machine.createStateConfig({
+	...idOf(to.suspended),
+	on: {
+		"edit.*": to.idle,
+		"cancel": {
+			actions: [clearQueue(), cancelSync()],
+			...to.idle
+		}
+	}
+});
+var peekFromQueue = () => machine.assign(({ system, context: { syncQueue } }) => {
+	let [head, ...tail] = syncQueue;
+	if (head === "sync-snapshot") head = makeSnapshot(system).change;
+	return {
+		processing: head ?? null,
+		syncQueue: tail
+	};
+});
+var clearProcessing = () => ({ processing: null });
+/**
+* Processing pending operation
+*/
+var process = machine.createStateConfig({
+	...idOf(to.process),
+	initial: "peekFromQueue",
+	tags: ["busy"],
+	states: {
+		peekFromQueue: {
+			entry: peekFromQueue(),
+			always: [
+				{
+					guard: ({ context: { processing } }) => processing === "apply-latest-to-manual",
+					target: "applyLatestToManual"
+				},
+				{
+					guard: ({ context: { processing } }) => processing === "apply-semantic-layout",
+					target: "applySemanticLayout"
+				},
+				{
+					guard: ({ context: { processing } }) => isViewChange(processing),
+					target: "executeChanges"
+				},
+				{
+					guard: "has pending",
+					reenter: true,
+					...to.process
+				},
+				{
+					actions: clearQueue(),
+					...to.idle
+				}
+			]
+		},
+		/**
+		* Syncing state, some edits are not yet synced
+		*/
+		applyLatestToManual: machine.createStateConfig({
+			initial: "call",
+			entry: assign(({ system }) => ({ processing: makeSnapshot(system).change })),
+			states: {
+				call: { invoke: {
+					src: "applyLatest",
+					input: ({ context }) => {
+						const current = context.processing;
+						invariant(isViewChange(current) && current.op === "save-view-snapshot");
+						return {
+							current: current.layout,
+							viewId: context.viewId
+						};
+					},
+					onDone: {
+						actions: sendTo(typedSystem.diagramActor, ({ event }) => ({
+							type: "update.view",
+							view: event.output.updated
+						}), { delay: 20 }),
+						target: "wait"
+					},
+					onError: {
+						actions: assign(({ event }) => {
+							console.error("applyLatestToManual onError", { error: event.error });
+							return {
+								processing: null,
+								syncQueue: []
+							};
+						}),
+						...to.idle
+					}
+				} },
+				wait: {
+					on: { "*": { actions: log(({ event }) => `wait: ignoring event ${event.type}`) } },
+					after: { "500ms": {
+						actions: [
+							clearQueue(),
+							assign({ redo: null }),
+							scheduleSync()
+						],
+						...to.idle
+					} }
+				}
+			}
+		}),
+		/**
+		* User requested semantic layout, we will call the AI
+		*/
+		applySemanticLayout: machine.createStateConfig({
+			tags: ["ai-semantic-layout"],
+			invoke: {
+				src: "applySemanticLayout",
+				input: ({ context }) => ({ viewId: context.viewId }),
+				onDone: { target: "decideNext" },
+				onError: {
+					actions: ({ event }) => {
+						console.error("applySemanticLayout onError", { error: event.error });
+					},
+					target: "failure"
+				}
+			}
+		}),
+		/**
+		* Calls `executeChange` to save the snapshot
+		*/
+		executeChanges: machine.createStateConfig({ invoke: {
+			src: "executeChange",
+			input: ({ context: { processing, syncQueue, viewId } }) => {
+				invariant(processing && isViewChange(processing));
+				return {
+					changes: [processing, ...syncQueue.filter(isViewChange)],
+					viewId
+				};
+			},
+			onDone: {
+				actions: enqueueActions(({ context, event, enqueue }) => {
+					const requested = event.output.requested;
+					enqueue.assign({
+						processing: null,
+						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: "waitViewSynced"
+			},
+			onError: {
+				actions: ({ event }) => {
+					console.error("executeChanges onError", { error: event.error });
+				},
+				target: "failure"
+			}
+		} }),
+		waitViewSynced: {
+			on: { "view.synched": { target: "decideNext" } },
+			after: { 2e3: "decideNext" }
+		},
+		decideNext: {
+			entry: assign(clearProcessing),
+			always: [{
+				guard: "has pending",
+				reenter: true,
+				...to.process
+			}, to.idle]
+		},
+		failure: { always: {
+			actions: clearQueue(),
+			...to.idle
+		} }
+	},
+	on: {}
+});
+var syncQueue = machine.createStateConfig({
+	initial: "idle",
+	states: {
+		idle,
+		pending,
+		suspended,
+		process
+	},
+	on: {}
+});
+//#endregion
+export { syncQueue };

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

@@ -0,0 +1,64 @@
+import { Types } from '../../likec4diagram/types';
+import { HotKeyEvent } from './hotkey';
+import type * as t from '@likec4/core/types';
+export type EditorActorEvent = {
+    type: 'change.view';
+    change: t.ViewChange;
+} | {
+    type: 'change.semantic-layout';
+} | {
+    type: 'change.latest-to-manual';
+} | {
+    type: 'change.sync-snapshot';
+} | {
+    type: 'delete.nodes-edges';
+    nodeIds: t.NodeId[];
+    edgeIds: t.EdgeId[];
+} | {
+    type: 'view.synched';
+} | {
+    type: 'cancel';
+} | {
+    type: 'edit.move.start';
+    subject: 'node' | 'edge';
+} | {
+    type: 'edit.move.end';
+} | {
+    type: 'edit.move.cancel';
+} | HotKeyEvent;
+export type Snapshot = {
+    view: t.LayoutedView;
+    change: t.ViewChange.SaveViewSnapshot;
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+};
+export type LinkedSnapshot = {
+    head: Snapshot;
+    tail: LinkedSnapshot | null;
+};
+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 | null) => change is t.ViewChange;
+export interface EditorActorContext {
+    viewId: t.ViewId;
+    history: LinkedSnapshot | null;
+    redo: LinkedSnapshot | null;
+    editing: null | {
+        /**
+         * The subject of the edit
+         */
+        subject: 'node' | 'edge';
+        /**
+         * The state before editing started
+         */
+        before: Snapshot;
+    };
+    syncQueue: Array<SyncOp>;
+    processing: Exclude<SyncOp, 'sync-snapshot'> | null;
+}
+export type EditorActorEmitedEvent = {
+    type: 'idle';
+};
+export type EditorActorStateTag = 'pending' | 'busy' | 'ai-semantic-layout';

package/dist/editor/actor/types.js

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

package/dist/editor/applyChangesToManualLayout.js

@@ -153,7 +153,7 @@ function edgeControlPoints(source, target) {
 	if (source === target) {
 		const loopSize = 80;
 		const centerOfTopBoundary = vector(0, source.height || 0).multiply(-.5).add(sourceCenter);
-		return [centerOfTopBoundary.add(vector(-loopSize / 2.5, -loopSize)).trunc().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -loopSize)).trunc().toObject()];
+		return [centerOfTopBoundary.add(vector(-80 / 2.5, -80)).trunc().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -80)).trunc().toObject()];
 	}
 	const sourceToTargetVector = targetCenter.subtract(sourceCenter);
 	const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);

package/dist/editor/index.d.ts

@@ -1,4 +1,5 @@
-export type * from './editorActor.states';
+export type * from './actor/machine';
+export type * from './actor/types';
 export { createLikeC4Editor } from './LikeC4EditorCallbacks';
 export type { LikeC4EditorCallbacks } from './LikeC4EditorCallbacks';
 export { EnsureEditorContext, LikeC4EditorProvider, useOptionalLikeC4Editor, } from './LikeC4EditorProvider';

package/dist/editor/useEditorActorLogic.d.ts

@@ -1,2 +1,8 @@
-import { EditorActorLogic } from './editorActor.states';
-export declare function useEditorActorLogic(): EditorActorLogic;
+import { EditorActorLogic } from './actor/machine';
+export declare function useEditorActorLogic(): EditorActorLogic & {
+    /**
+     * True if the editor is running in stub mode (no actual editor port available)
+     * This happens when the diagram is rendered outside of vscode extension / vite- plugin
+     */
+    readonly isStub: boolean;
+};

package/dist/editor/useEditorActorLogic.js

@@ -1,9 +1,10 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useCallbackRef } from "../hooks/useCallbackRef.js";
 import { useOptionalLikeC4Editor } from "./LikeC4EditorProvider.js";
-import { editorActorLogic } from "./editorActor.states.js";
+import { editorActorLogic } from "./actor/machine.js";
 import { applyChangesToManualLayout } from "./applyChangesToManualLayout.js";
 import { useMemo } from "react";
+import { isNullish } from "remeda";
 import { fromPromise } from "xstate";
 //#region src/editor/useEditorActorLogic.ts
 var promisify = (fn) => {
@@ -11,25 +12,56 @@ var promisify = (fn) => {
 };
 function useEditorActorLogic() {
 	const port = useOptionalLikeC4Editor();
+	const isStub = isNullish(port);
 	const applyLatest = useCallbackRef(async ({ input: { viewId, current } }) => {
 		if (!port) {
 			console.error("No editor port available for applying latest to manual layout");
-			return Promise.reject(/* @__PURE__ */ new Error("No editor port"));
+			throw new Error("No editor port");
 		}
 		return { updated: applyChangesToManualLayout(await promisify(() => current ?? port.fetchView(viewId, "manual")), await promisify(() => port.fetchView(viewId, "auto"))) };
 	});
 	const executeChange = useCallbackRef(async ({ input }) => {
 		if (!port) {
 			console.error("No editor port available for executing change");
-			return Promise.reject(/* @__PURE__ */ new Error("No editor port"));
+			throw new Error("No editor port");
 		}
-		for (const change of input.changes) await promisify(() => port.handleChange(input.viewId, change));
+		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) {
+			console.error("No editor port available for applying semantic layout");
+			throw new Error("No editor port");
+		}
+		if (!port.applySemanticLayout) {
+			console.error("No applySemanticLayout method available on editor port");
+			throw new Error("No applySemanticLayout method");
+		}
+		await port.applySemanticLayout(input.viewId);
 		return {};
 	});
-	return useMemo(() => editorActorLogic.provide({ actors: {
+	return useMemo(() => Object.assign(editorActorLogic.provide({ actors: {
 		applyLatest: fromPromise(applyLatest),
-		executeChange: fromPromise(executeChange)
-	} }), [applyLatest, executeChange]);
+		executeChange: fromPromise(executeChange),
+		applySemanticLayout: fromPromise(applySemanticLayout)
+	} }), { isStub }), [
+		applyLatest,
+		executeChange,
+		applySemanticLayout,
+		isStub
+	]);
 }
 //#endregion
 export { useEditorActorLogic };

package/dist/hooks/useDiagram.js

@@ -45,7 +45,11 @@ function useOnDiagramEvent(event, callback, options) {
 	useEffect(() => {
 		if (once && wasCalled.current) return;
 		let subscription = actorRef.on(event, (payload) => {
-			callbackRef(payload);
+			if (!once || !wasCalled.current) try {
+				callbackRef(payload);
+			} catch (error) {
+				console.error(error);
+			}
 			wasCalled.current = true;
 			if (once) {
 				subscription?.unsubscribe();
@@ -56,6 +60,7 @@ function useOnDiagramEvent(event, callback, options) {
 			subscription?.unsubscribe();
 		};
 	}, [
+		callbackRef,
 		actorRef,
 		event,
 		once

package/dist/hooks/useDiagramCompareLayout.js

@@ -68,7 +68,7 @@ function useDiagramCompareLayout() {
 				console.warn("Compare with latest feature is not enabled");
 				return;
 			}
-			nonNullable(actorRef.system?.get("editor"), "editor actor not found").send({ type: "applyLatestToManual" });
+			nonNullable(actorRef.system?.get("editor"), "editor actor not found").send({ type: "change.latest-to-manual" });
 			if (state.isActive) actorRef.send({
 				type: "toggle.feature",
 				feature: "CompareWithLatest",

package/dist/hooks/useEditorActor.d.ts

@@ -0,0 +1,9 @@
+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;

package/dist/hooks/useEditorActor.js

@@ -0,0 +1,27 @@
+import "../_virtual/_rolldown/runtime.js";
+import { selectDiagramActor, useDiagramSnapshot } from "./useDiagram.js";
+import { useEffect, useState } from "react";
+import "@mantine/hooks";
+//#region src/hooks/useEditorActor.ts
+var select = selectDiagramActor((s) => {
+	return s.children.editor ?? null;
+});
+function useEditorActorRef() {
+	return useDiagramSnapshot(select, Object.is);
+}
+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 { useEditorActorStateHasTag };

package/dist/hooks/useLikeC4ElementsTree.d.ts

@@ -1,8 +1,10 @@
 import { Fqn, ViewId } from '@likec4/core/types';
-interface LikeC4ModelTreeNodeData {
+import { TreeNodeData } from '@mantine/core';
+export interface LikeC4ModelTreeNodeData extends TreeNodeData {
     label: string;
     value: Fqn;
     children: LikeC4ModelTreeNodeData[];
+    hasChildren: boolean;
 }
 export declare const sortByLabel: (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTreeNodeData) => number;
 /**
@@ -10,4 +12,3 @@ export declare const sortByLabel: (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTre
  * If `viewId` is provided, returns the tree of elements in the view.
  */
 export declare function useLikeC4ElementsTree(viewId?: ViewId): LikeC4ModelTreeNodeData[];
-export {};

package/dist/hooks/useLikeC4ElementsTree.js

@@ -5,10 +5,12 @@ import { compareNatural } from "@likec4/core/utils";
 //#region src/hooks/useLikeC4ElementsTree.ts
 var sortByLabel = (a, b) => compareNatural(a.label, b.label);
 function buildNode(element) {
+	const children = [...element.children()].map(buildNode).sort(sortByLabel);
 	return {
 		label: element.title || element.id,
 		value: element.id,
-		children: [...element.children()].map(buildNode).sort(sortByLabel)
+		children,
+		hasChildren: children.length > 0
 	};
 }
 /**

package/dist/index.d.ts

@@ -22,3 +22,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 { FramerMotionConfig } from './context/FramerMotionConfig';

package/dist/index.js

@@ -1,5 +1,7 @@
 import { IconRendererProvider } from "./context/IconRenderer.js";
 import { useUpdateEffect } from "./hooks/useUpdateEffect.js";
+import { DefaultMantineProvider } from "./context/DefaultMantineProvider.js";
+import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
 import { useDiagram } from "./hooks/safeContext.js";
 import { useDiagramContext, useOnDiagramEvent } from "./hooks/useDiagram.js";
 import { useCurrentView, useCurrentViewId } from "./hooks/useCurrentView.js";
@@ -21,4 +23,4 @@ import { LikeC4View } from "./LikeC4View.js";
 import { ReactLikeC4 } from "./ReactLikeC4.js";
 import { LikeC4ProjectsOverview } from "./LikeC4ProjectsOverview.js";
 import { SearchControl } from "./components/SearchControl.js";
-export { IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, ReactLikeC4, SearchContext, SearchControl, SearchPanelContent, StaticLikeC4Diagram, createLikeC4Editor, normalizeSearch, pickViewBounds, bodyCss as searchBodyCss, dialogCss as searchDialogCss, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramContext, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useSearchContext, useUpdateEffect };
+export { DefaultMantineProvider, FramerMotionConfig, IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, ReactLikeC4, SearchContext, SearchControl, SearchPanelContent, StaticLikeC4Diagram, createLikeC4Editor, normalizeSearch, pickViewBounds, bodyCss as searchBodyCss, dialogCss as searchDialogCss, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramContext, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useSearchContext, useUpdateEffect };

package/dist/likec4diagram/DiagramUI.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const LikeC4DiagramUI: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const LikeC4DiagramUI: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/likec4diagram/DiagramUI.js

@@ -1,7 +1,7 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useEnabledFeatures } from "../context/DiagramFeatures.js";
+import { selectDiagramActor, useDiagramSnapshot } from "../hooks/useDiagram.js";
 import { ErrorBoundary } from "../components/ErrorFallback.js";
-import { useOverlaysActorRef } from "../hooks/useOverlaysActor.js";
 import { NavigationPanel } from "../navigationpanel/NavigationPanel.js";
 import { Overlays } from "../overlays/Overlays.js";
 import { Search } from "../search/Search.js";
@@ -12,10 +12,14 @@ import { memo, useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRerender } from "@react-hookz/web";
 //#region src/likec4diagram/DiagramUI.tsx
+var selectChildren = selectDiagramActor((s) => ({
+	overlays: s.children.overlays ?? null,
+	search: s.children.search ?? null
+}));
 var LikeC4DiagramUI = memo(() => {
 	const { enableControls, enableNotations, enableSearch, enableRelationshipDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
 	const rerender = useRerender();
-	const overlaysActorRef = useOverlaysActorRef();
+	const actors = useDiagramSnapshot(selectChildren);
 	return /* @__PURE__ */ jsxs(ErrorBoundary, {
 		onReset: useCallback(() => {
 			console.warn("DiagramUI: resetting error boundary and rerendering...");
@@ -23,9 +27,9 @@ var LikeC4DiagramUI = memo(() => {
 		}, []),
 		children: [
 			enableControls && /* @__PURE__ */ jsx(NavigationPanel, {}),
-			overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
+			actors.overlays && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef: actors.overlays }),
 			enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
-			enableSearch && /* @__PURE__ */ jsx(Search, {}),
+			enableSearch && actors.search && /* @__PURE__ */ jsx(Search, { searchActorRef: actors.search }),
 			enableRelationshipDetails && enableReadOnly && /* @__PURE__ */ jsx(RelationshipPopover, {}),
 			enableCompareWithLatest && /* @__PURE__ */ jsx(LayoutDriftFrame, {})
 		]