@likec4/diagram 1.56.0 → 1.57.0

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

@@ -0,0 +1,59 @@
+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: '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) => change is t.ViewChange;
+export interface EditorActorContext {
+    viewId: t.ViewId;
+    history: 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) => 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,44 @@ 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));
 		return {};
 	});
-	return useMemo(() => editorActorLogic.provide({ actors: {
+	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(() => 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,4 @@
+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;

package/dist/hooks/useEditorActor.js

@@ -0,0 +1,26 @@
+import "../_virtual/_rolldown/runtime.js";
+import { selectDiagramActor, useDiagramSnapshot } from "./useDiagram.js";
+import { useEffect, useState } from "react";
+//#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?.subscribe((snapshot) => {
+			setHasTag(snapshot.hasTag(tag));
+		});
+		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/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, {})
 		]

package/dist/likec4diagram/DiagramXYFlow.js

@@ -2,13 +2,12 @@ import "../_virtual/_rolldown/runtime.js";
 import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
 import { depsShallowEqual, useUpdateEffect as useUpdateEffect$1 } from "../hooks/useUpdateEffect.js";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
-import { useIsReducedGraphics, usePanningAtom } from "../context/RootContainerContext.js";
+import { useRootContainer } from "../context/RootContainerContext.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
 import { useDiagram } from "../hooks/safeContext.js";
 import { selectDiagramActor, useDiagramSnapshot } from "../hooks/useDiagram.js";
 import { viewBounds } from "./state/utils.js";
 import { deriveToggledFeatures } from "./state/machine.setup.js";
-import { memoNode } from "../base-primitives/memoNode.js";
 import { BuiltinEdges, BuiltinNodes } from "./custom/index.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { cx } from "@likec4/styles/css";
@@ -23,13 +22,13 @@ var edgeTypes = {
 	"seq-step": BuiltinEdges.SequenceStepEdge
 };
 var builtinNodes = {
-	element: memoNode(BuiltinNodes.ElementNode),
-	deployment: memoNode(BuiltinNodes.DeploymentNode),
-	"compound-element": memoNode(BuiltinNodes.CompoundElementNode),
-	"compound-deployment": memoNode(BuiltinNodes.CompoundDeploymentNode),
-	"view-group": memoNode(BuiltinNodes.ViewGroupNode),
-	"seq-actor": memoNode(BuiltinNodes.SequenceActorNode),
-	"seq-parallel": memoNode(BuiltinNodes.SequenceParallelArea)
+	element: BuiltinNodes.ElementNode,
+	deployment: BuiltinNodes.DeploymentNode,
+	"compound-element": BuiltinNodes.CompoundElementNode,
+	"compound-deployment": BuiltinNodes.CompoundDeploymentNode,
+	"view-group": BuiltinNodes.ViewGroupNode,
+	"seq-actor": BuiltinNodes.SequenceActorNode,
+	"seq-parallel": BuiltinNodes.SequenceParallelArea
 };
 function prepareNodeTypes(nodeTypes) {
 	if (!nodeTypes || isEmpty(nodeTypes)) return builtinNodes;
@@ -53,7 +52,7 @@ var viewportToTopLeft = (ctx) => {
 };
 var selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
 	const { enableReadOnly } = deriveToggledFeatures(ctx);
-	const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing !== "edge";
+	const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing?.subject !== "edge";
 	let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
 	if (ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic") nodesDraggable = false;
 	return {
@@ -74,9 +73,10 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 	const diagram = useDiagram();
 	let { enableReadOnly, initialized, nodes, edges, enableFitView, nodesDraggable, nodesSelectable, ...props } = useDiagramSnapshot(selectXYProps);
 	const { onNodeContextMenu, onCanvasContextMenu, onEdgeContextMenu, onNodeClick, onEdgeClick, onCanvasClick, onCanvasDblClick } = useDiagramEventHandlers();
-	const isReducedGraphics = useIsReducedGraphics();
+	const { reducedGraphics, $panning } = useRootContainer();
+	const isReducedGraphics = reducedGraphics;
 	const layoutConstraints = useLayoutConstraints();
-	const $isPanning = usePanningAtom();
+	const $isPanning = $panning;
 	const isPanning = useTimeout(() => {
 		$isPanning.set(true);
 	}, isReducedGraphics ? 200 : 800);

package/dist/likec4diagram/state/aligners.js

@@ -5,6 +5,9 @@ import { getNodeDimensions } from "@xyflow/system";
 //#region src/likec4diagram/state/aligners.ts
 var Aligner = class {};
 var LinearAligner = class extends Aligner {
+	getEdgePosition;
+	computePosition;
+	propertyToEdit;
 	alignTo;
 	constructor(getEdgePosition, computePosition, propertyToEdit) {
 		super();

package/dist/likec4diagram/state/assign.js

@@ -86,7 +86,7 @@ function resetEdgeControlPoints(nodeLookup, edge) {
 	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)).round().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -loopSize)).round().toObject()];
+		return [centerOfTopBoundary.add(vector(-80 / 2.5, -80)).round().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -80)).round().toObject()];
 	}
 	const sourceToTargetVector = targetCenter.subtract(sourceCenter);
 	const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);

package/dist/likec4diagram/state/diagram-api.d.ts

@@ -2,8 +2,10 @@ import { DynamicViewDisplayVariant, NodeNotation as ElementNotation, ViewChange
 import { RefObject } from 'react';
 import { PartialDeep } from 'type-fest';
 import { FeatureName } from '../../context/DiagramFeatures';
+import { EditorActorRef } from '../../editor/actor/machine';
 import { OpenSourceParams } from '../../LikeC4Diagram.props';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
+import { SearchActorRef } from '../../search/searchActor';
 import { Types } from '../types';
 import { AlignmentMode } from './aligners';
 import { DiagramActorRef, DiagramContext, DiagramEvents } from './types';
@@ -27,7 +29,21 @@ export interface DiagramApi<A extends Any = Unknown> {
      * @warning Do not use in render phase
      */
     readonly currentView: t.DiagramView<A>;
+    /**
+     * Editor actor reference
+     * @warning Do not use in render phase
+     */
+    editorActor(): EditorActorRef;
+    /**
+     * Overlays actor reference
+     * @warning Do not use in render phase
+     */
     overlays(): OverlaysActorRef;
+    /**
+     * Search actor reference
+     * @warning Do not use in render phase
+     */
+    searchActor(): SearchActorRef;
     /**
      * Send event to diagram actor
      */

package/dist/likec4diagram/state/diagram-api.js

@@ -8,8 +8,17 @@ function makeDiagramApi(actorRef) {
 		get actor() {
 			return actorRef.current;
 		},
+		editorActor() {
+			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
+			return nonNullable(editorActor, "Editor actor not found in actor system");
+		},
 		overlays() {
-			return nonNullable(actorRef.current.getSnapshot().children.overlays, "Overlays actor not found");
+			const overlaysActor = typedSystem(actorRef.current.system).overlaysActorRef;
+			return nonNullable(overlaysActor, "Overlays actor not found in actor system");
+		},
+		searchActor() {
+			const searchActor = typedSystem(actorRef.current.system).searchActorRef;
+			return nonNullable(searchActor, "Search actor not found in actor system");
 		},
 		send: (event) => actorRef.current.send(event),
 		navigateTo: (viewId, fromNode, focusOnElement) => {
@@ -79,22 +88,19 @@ function makeDiagramApi(actorRef) {
 			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
 			invariant(editorActor, "No editor actor found in diagram actor system");
 			editorActor.send({
-				type: "edit.start",
+				type: "edit.move.start",
 				subject
 			});
 		},
 		stopEditing: (wasChanged = false) => {
 			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
 			invariant(editorActor, "No editor actor found in diagram actor system");
-			editorActor.send({
-				type: "edit.finish",
-				wasChanged
-			});
+			editorActor.send({ type: wasChanged ? "edit.move.end" : "edit.move.cancel" });
 		},
 		undoEditing: () => {
 			const editorActor = typedSystem(actorRef.current.system).editorActorRef;
 			invariant(editorActor, "No editor actor found in diagram actor system");
-			const hasUndo = editorActor.getSnapshot().context.history.length > 0;
+			const hasUndo = editorActor.getSnapshot().context.history !== null;
 			if (hasUndo) editorActor.send({ type: "undo" });
 			return hasUndo;
 		},

package/dist/likec4diagram/state/machine.actions.js

@@ -214,7 +214,7 @@ var triggerChange = (viewChange) => machine.enqueueActions(({ event, enqueue })
 	}
 	enqueue.assign({ viewportChangedManually: true });
 	enqueue.sendTo(typedSystem.editorActor, {
-		type: "change",
+		type: "change.view",
 		change
 	});
 });
@@ -388,14 +388,13 @@ var ensureEditorActor = () => machine.enqueueActions(({ enqueue, context, system
 	});
 });
 var startEditing = (subject = "node") => machine.sendTo(typedSystem.editorActor, {
-	type: "edit.start",
+	type: "edit.move.start",
 	subject
 });
-var sendSynced = () => machine.sendTo(typedSystem.editorActor, { type: "synced" });
-var stopEditing = (wasChanged = false) => machine.sendTo(typedSystem.editorActor, {
-	type: "edit.finish",
-	wasChanged
-});
+var sendSynced = () => {
+	return machine.sendTo(typedSystem.editorActor, { type: "view.synched" });
+};
+var stopEditing = (wasChanged = false) => machine.sendTo(typedSystem.editorActor, { type: wasChanged ? "edit.move.end" : "edit.move.cancel" });
 var cancelEditing = () => machine.sendTo(typedSystem.editorActor, { type: "cancel" });
 var hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
 var openElementDetails = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
@@ -591,7 +590,7 @@ var stopHotKeyActor = () => machine.stopChild("hotkey");
 */
 var AUTO_UNFOCUS_DELAY = 3e3;
 var startAutoUnfocusTimer = () => machine.enqueueActions(({ context, enqueue }) => {
-	if (context.autoUnfocusTimer && AUTO_UNFOCUS_DELAY > 0) enqueue.raise({ type: "focus.autoUnfocus" }, {
+	if (context.autoUnfocusTimer && true) enqueue.raise({ type: "focus.autoUnfocus" }, {
 		delay: AUTO_UNFOCUS_DELAY,
 		id: "autoUnfocusTimer"
 	});

package/dist/likec4diagram/state/machine.d.ts

@@ -1,5 +1,5 @@
 import { ActorRef, MachineSnapshot, StateMachine } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor.states';
+import { EditorActorRef } from '../../editor/actor/machine';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents, Input } from './machine.setup';

package/dist/likec4diagram/state/machine.setup.js

@@ -1,5 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { editorActorLogic } from "../../editor/editorActor.states.js";
+import { editorActorLogic } from "../../editor/actor/machine.js";
 import { overlaysActorLogic } from "../../overlays/overlaysActor.js";
 import { searchActorLogic } from "../../search/searchActor.js";
 import { hotkeyActorLogic } from "./hotkeyActor.js";

package/dist/likec4diagram/state/types.d.ts

@@ -1,5 +1,5 @@
 import { ActorSystem } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor.states';
+import { EditorActorRef } from '../../editor/actor/machine';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { DiagramMachineRef } from './machine';

package/dist/likec4diagram/state/utils.d.ts

@@ -2,7 +2,7 @@ import { BBox } from '@likec4/core/geometry';
 import { DeploymentFqn, DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core/types';
 import { Viewport } from '@xyflow/system';
 import { ActorSystem } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor.states';
+import { EditorActorRef } from '../../editor/actor/machine';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { Types } from '../types';

package/dist/likec4diagram/useLayoutConstraints.js

@@ -85,6 +85,7 @@ var Rect = class {
 	}
 };
 var CompoundRect = class extends Rect {
+	parent;
 	children = [];
 	constructor(xynode, parent = null) {
 		super(xynode, parent);
@@ -92,6 +93,7 @@ var CompoundRect = class extends Rect {
 	}
 };
 var Leaf = class extends Rect {
+	parent;
 	constructor(xynode, parent = null) {
 		super(xynode, parent);
 		this.parent = parent;

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -14,10 +14,12 @@ import * as m$1 from "motion/react-m";
 var selector = (ctx) => {
 	const comparingLatest = deriveToggledFeatures(ctx).enableCompareWithLatest && !!ctx.view.drifts && ctx.view._layout === "auto";
 	const noActiveWalkthrough = !isTruthy(ctx.activeWalkthrough);
+	const hasEditor = ctx.features.enableEditor;
+	const isReadOnly = ctx.toggledFeatures.enableReadOnly ?? false;
 	return {
-		visible: ctx.features.enableEditor && noActiveWalkthrough,
+		visible: hasEditor && noActiveWalkthrough,
 		disabled: comparingLatest,
-		isReadOnly: ctx.toggledFeatures.enableReadOnly ?? false
+		isReadOnly
 	};
 };
 var ToggleReadonly = () => {

package/dist/navigationpanel/editorpanel/ApplySemanticLayout.d.ts

@@ -0,0 +1,4 @@
+import { NamedExoticComponent } from 'react';
+export declare const ApplySemanticLayout: NamedExoticComponent<{
+    visible?: boolean;
+}>;

package/dist/navigationpanel/editorpanel/ApplySemanticLayout.js

@@ -0,0 +1,36 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { PanelActionIcon } from "../_common.js";
+import { useEditorActorStateHasTag } from "../../hooks/useEditorActor.js";
+import { Tooltip } from "./_common.js";
+import { IconSparkles } from "@tabler/icons-react";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/navigationpanel/editorpanel/ApplySemanticLayout.tsx
+var ApplySemanticLayout = memo(({ visible = true }) => {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: "Semantic Layout with AI",
+		children: /* @__PURE__ */ jsx(PanelActionIcon, {
+			loading: useEditorActorStateHasTag("ai-semantic-layout"),
+			initial: { display: visible ? "block" : "none" },
+			animate: {
+				display: visible ? "block" : "none",
+				opacity: visible ? 1 : .2,
+				x: visible ? 0 : -5,
+				y: visible ? 0 : -8
+			},
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.editorActor().send({ type: "change.semantic-layout" });
+			},
+			children: /* @__PURE__ */ jsx(IconSparkles, {
+				size: 14,
+				stroke: 2
+			})
+		})
+	});
+});
+ApplySemanticLayout.displayName = "ApplySemanticLayout";
+//#endregion
+export { ApplySemanticLayout };