@likec4/diagram 1.56.0 → 1.57.0

package/dist/LikeC4Diagram.js

@@ -36,7 +36,8 @@ function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, o
 	const optionalLikeC4Model = useOptionalLikeC4Model();
 	enableCompareWithLatest = enableCompareWithLatest && !!onLayoutTypeChange && !!optionalLikeC4Model && !isEmptyish(optionalLikeC4Model.$data.manualLayouts);
 	const hasLikeC4Model = !!optionalLikeC4Model;
-	const hasEditor = !!useOptionalLikeC4Editor();
+	const editor = useOptionalLikeC4Editor();
+	const hasEditor = !!editor;
 	const readonly = !hasEditor;
 	nodesSelectable ??= hasEditor || enableFocusMode || !!onNavigateTo || !!onNodeClick;
 	const bounds = pickViewBounds(view, dynamicViewVariant);
@@ -66,6 +67,7 @@ function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, o
 					features: {
 						enableFitView: fitView,
 						enableEditor: hasEditor,
+						enableAISemanticLayout: hasEditor && !!editor.applySemanticLayout,
 						enableReadOnly: readonly,
 						enableFocusMode,
 						enableNavigateTo: !!onNavigateTo,

package/dist/LikeC4View.js

@@ -1,5 +1,4 @@
 import "./_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "./hooks/useCallbackRef.js";
 import { stopPropagation } from "./utils/xyflow.js";
 import { FitViewPaddings } from "./base/const.js";
 import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.js";
@@ -10,11 +9,10 @@ import { ErrorMessage } from "./components/ViewNotFound.js";
 import { ShadowRoot } from "./shadowroot/ShadowRoot.js";
 import { css, cx } from "@likec4/styles/css";
 import { IconX } from "@tabler/icons-react";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isBoolean } from "remeda";
 import { ActionIcon } from "@mantine/core";
-import { AnimatePresence } from "motion/react";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 //#region src/LikeC4View.tsx
 var cssInteractive = css({
@@ -31,20 +29,19 @@ var cssInteractive = css({
 * Component is wrapped in ShadowRoot to isolate styles.
 */
 function LikeC4View({ viewId, className, pannable = false, zoomable = false, keepAspectRatio = true, colorScheme, injectFontCss = true, controls = false, layoutType: initialLayoutType = "manual", background = "transparent", browser = true, showNavigationButtons = false, enableNotations, enableFocusMode = false, enableDynamicViewWalkthrough = false, enableElementDetails = false, enableRelationshipDetails = false, enableRelationshipBrowser = enableRelationshipDetails, enableNotes = false, reduceGraphics = "auto", mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }) {
-	const rootRef = useRef(null);
 	const likec4model = useOptionalLikeC4Model();
 	const [layoutType, setLayoutType] = useState(initialLayoutType);
 	const [browserViewId, _onNavigateTo] = useState(null);
-	const onNavigateTo = useCallbackRef((viewId) => {
+	const onNavigateTo = (viewId) => {
 		if (viewId && viewId !== browserViewId) setLayoutType(initialLayoutType);
 		_onNavigateTo(viewId);
-	});
-	const onNavigateToThisView = useCallbackRef(() => {
+	};
+	const onNavigateToThisView = () => {
 		onNavigateTo(viewId);
-	});
-	const closeBrowser = useCallbackRef(() => {
+	};
+	const closeBrowser = () => {
 		onNavigateTo(null);
-	});
+	};
 	if (!likec4model) return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider in the component tree." });
 	const viewModel = likec4model.findView(viewId);
 	if (!viewModel) return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
@@ -70,9 +67,7 @@ function LikeC4View({ viewId, className, pannable = false, zoomable = false, kee
 	const isBrowserEnabled = browser !== false;
 	const browserProps = isBoolean(browser) ? {} : browser;
 	const bounds = pickViewBounds(view, props.dynamicViewVariant);
-	const root = rootRef.current ? { root: rootRef.current } : void 0;
 	return /* @__PURE__ */ jsxs(ShadowRoot, {
-		ref: rootRef,
 		injectFontCss,
 		theme: mantineTheme,
 		colorScheme,
@@ -109,49 +104,46 @@ function LikeC4View({ viewId, className, pannable = false, zoomable = false, kee
 			renderNodes,
 			...props,
 			children
-		}), /* @__PURE__ */ jsx(AnimatePresence, {
-			...root,
-			children: browserView && /* @__PURE__ */ jsxs(Overlay, {
-				openDelay: 0,
-				onClose: closeBrowser,
-				children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
-					view: browserView,
-					pannable: true,
-					zoomable: true,
-					background: "dots",
-					onNavigateTo,
-					showNavigationButtons: true,
-					enableDynamicViewWalkthrough: true,
-					enableFocusMode: true,
-					enableRelationshipBrowser: true,
-					enableElementDetails: true,
-					enableRelationshipDetails: true,
-					enableSearch: true,
-					enableElementTags: true,
-					enableNotes: true,
-					enableCompareWithLatest: true,
-					controls: true,
-					fitView: true,
-					...props,
-					fitViewPadding: FitViewPaddings.withControls,
-					...browserProps,
-					enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
-					renderNodes,
-					onLayoutTypeChange: setLayoutType
-				}), /* @__PURE__ */ jsx(Box$1, {
-					pos: "absolute",
-					top: "4",
-					right: "4",
-					zIndex: "999",
-					onClick: stopPropagation,
-					children: /* @__PURE__ */ jsx(ActionIcon, {
-						variant: "default",
-						color: "gray",
-						onClick: closeBrowser,
-						children: /* @__PURE__ */ jsx(IconX, {})
-					})
-				})]
-			})
+		}), browserView && /* @__PURE__ */ jsxs(Overlay, {
+			openDelay: 0,
+			onClose: closeBrowser,
+			children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
+				view: browserView,
+				pannable: true,
+				zoomable: true,
+				background: "dots",
+				onNavigateTo,
+				showNavigationButtons: true,
+				enableDynamicViewWalkthrough: true,
+				enableFocusMode: true,
+				enableRelationshipBrowser: true,
+				enableElementDetails: true,
+				enableRelationshipDetails: true,
+				enableSearch: true,
+				enableElementTags: true,
+				enableNotes: true,
+				enableCompareWithLatest: true,
+				controls: true,
+				fitView: true,
+				...props,
+				fitViewPadding: FitViewPaddings.withControls,
+				...browserProps,
+				enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
+				renderNodes,
+				onLayoutTypeChange: setLayoutType
+			}), /* @__PURE__ */ jsx(Box$1, {
+				pos: "absolute",
+				top: "4",
+				right: "4",
+				zIndex: "999",
+				onClick: stopPropagation,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "default",
+					color: "gray",
+					onClick: closeBrowser,
+					children: /* @__PURE__ */ jsx(IconX, {})
+				})
+			})]
 		})]
 	});
 }

package/dist/adhoc-editor/ElementsTree.js

@@ -39,12 +39,8 @@ var ElementsTree = memo(() => {
 					}
 					break;
 				}
-				case "ArrowUp":
-					console.log("ArrowUp", { selected: api.selectedValue });
-					break;
-				default:
-					console.log(e.key);
-					return;
+				case "ArrowUp": break;
+				default: return;
 			}
 		} }),
 		children: /* @__PURE__ */ jsxs(Tree$1.Root, {

package/dist/components/RootContainer.js

@@ -1,5 +1,5 @@
 import "../_virtual/_rolldown/runtime.js";
-import { PanningAtomSafeCtx, ReduceGraphicsModeProvider, RootContainerContextProvider } from "../context/RootContainerContext.js";
+import { RootContainerContextProvider } from "../context/RootContainerContext.js";
 import { cx } from "@likec4/styles/css";
 import { useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -13,23 +13,24 @@ function RootContainer({ id, className, reduceGraphics = false, children }) {
 	const ctx = useMemo(() => ({
 		id,
 		ref,
-		selector: `#${id}`
-	}), [id, ref]);
-	return /* @__PURE__ */ jsx(ReduceGraphicsModeProvider, {
-		value: reduceGraphics,
-		children: /* @__PURE__ */ jsx(PanningAtomSafeCtx, {
-			value: $isPanning,
-			children: /* @__PURE__ */ jsx("div", {
-				id,
-				className: cx("likec4-root", className),
-				ref,
-				"data-likec4-diagram-panning": isPanning,
-				...reduceGraphics && { ["data-likec4-reduced-graphics"]: true },
-				children: /* @__PURE__ */ jsx(RootContainerContextProvider, {
-					value: ctx,
-					children
-				})
-			})
+		selector: `#${id}`,
+		reducedGraphics: reduceGraphics,
+		$panning: $isPanning
+	}), [
+		id,
+		ref,
+		reduceGraphics,
+		$isPanning
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cx("likec4-root", className),
+		ref,
+		"data-likec4-diagram-panning": isPanning,
+		...reduceGraphics && { ["data-likec4-reduced-graphics"]: true },
+		children: /* @__PURE__ */ jsx(RootContainerContextProvider, {
+			value: ctx,
+			children
 		})
 	});
 }

package/dist/context/DiagramFeatures.d.ts

@@ -1,7 +1,7 @@
 import { ExclusiveUnion } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 import { JSX } from 'react/jsx-runtime';
-declare const FeatureNames: readonly ["Controls", "Editor", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Notes", "Vscode", "ElementTags"];
+declare const FeatureNames: readonly ["Controls", "Editor", "AISemanticLayout", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Notes", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
 export type TogglableFeature = ('ReadOnly' | 'CompareWithLatest') & FeatureName;
 export type EnabledFeatures = {

package/dist/context/DiagramFeatures.js

@@ -6,6 +6,10 @@ import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/context/DiagramFeatures.tsx
 var DefaultFeatures = {
 	enableEditor: false,
+	/**
+	* Enabled if editor has `applySemanticLayout` method
+	*/
+	enableAISemanticLayout: false,
 	enableReadOnly: true,
 	enableCompareWithLatest: false,
 	enableControls: false,
@@ -51,6 +55,7 @@ function DiagramFeatures({ children, features, overrides }) {
 var overridesForOverlays = {
 	enableControls: false,
 	enableReadOnly: true,
+	enableAISemanticLayout: false,
 	enableCompareWithLatest: false
 };
 DiagramFeatures.Overlays = ({ children }) => {

package/dist/context/RootContainerContext.d.ts

@@ -1,26 +1,19 @@
 import { WritableAtom } from 'nanostores';
-import { RefObject, Provider, Context } from 'react';
-export declare const RootContainerContextProvider: Provider<{
-    id: string;
-    selector: string;
-    ref: RefObject<HTMLDivElement | null>;
-} | null>;
-export declare function useRootContainerContext(): {
-    id: string;
-    selector: string;
-    ref: RefObject<HTMLDivElement | null>;
-} | null;
-export declare function useRootContainer(): {
-    id: string;
-    selector: string;
-    ref: RefObject<HTMLDivElement | null>;
+import { RefObject, Provider } from 'react';
+export type RootContainerContextType = {
+    readonly id: string;
+    readonly selector: string;
+    readonly ref: RefObject<HTMLDivElement | null>;
+    readonly $panning: WritableAtom<boolean>;
+    readonly reducedGraphics: boolean;
 };
+export declare const RootContainerContextProvider: Provider<RootContainerContextType | null>;
+export declare function useRootContainerContext(): RootContainerContextType | null;
+export declare function useRootContainer(): RootContainerContextType;
 export declare function useRootContainerRef(): RefObject<HTMLDivElement | null>;
 export declare function useRootContainerElement(): HTMLDivElement | null;
-export declare const ReduceGraphicsModeProvider: Provider<boolean | null>;
 /**
  * Hook to determine if reduced graphics mode is enabled.
  */
 export declare function useIsReducedGraphics(): boolean;
-export declare const PanningAtomSafeCtx: Context<WritableAtom<boolean> | null>, usePanningAtom: () => WritableAtom<boolean>;
 export declare function useIsPanning(): boolean;

package/dist/context/RootContainerContext.js

@@ -1,6 +1,5 @@
 import "../_virtual/_rolldown/runtime.js";
 import { createContext, useContext } from "react";
-import { createSafeContext } from "@mantine/core";
 import "@nanostores/react";
 //#region src/context/RootContainerContext.tsx
 var RootContainerContext = createContext(null);
@@ -19,16 +18,5 @@ function useRootContainerRef() {
 function useRootContainerElement() {
 	return useRootContainer().ref.current;
 }
-var ReduceGraphicsModeCtx = createContext(null);
-var ReduceGraphicsModeProvider = ReduceGraphicsModeCtx.Provider;
-/**
-* Hook to determine if reduced graphics mode is enabled.
-*/
-function useIsReducedGraphics() {
-	const isReduced = useContext(ReduceGraphicsModeCtx);
-	if (isReduced === null) console.warn("ReduceGraphicsMode is not provided");
-	return isReduced ?? false;
-}
-var [PanningAtomSafeCtx, usePanningAtom] = createSafeContext("PanningAtomSafeCtx is not provided");
 //#endregion
-export { PanningAtomSafeCtx, ReduceGraphicsModeProvider, RootContainerContextProvider, useIsReducedGraphics, usePanningAtom, useRootContainerContext, useRootContainerElement, useRootContainerRef };
+export { RootContainerContextProvider, useRootContainer, useRootContainerContext, useRootContainerElement, useRootContainerRef };

package/dist/custom/index.d.ts

@@ -5,11 +5,11 @@ export * from './primitives';
 export type { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseEdgePropsWithData, BaseNode, BaseNodeData, BaseNodeProps, BaseNodePropsWithData, } from '../base/types';
 export type { DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, NodeRenderers, OnCanvasClick, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, ViewPadding, WhereOperator, } from '../LikeC4Diagram.props';
 export { Base } from '../base/Base';
+export type { XYStoreState } from '../hooks/useXYFlow';
 export type { Types } from '../likec4diagram/types';
 export { type EnabledFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures, } from '../context/DiagramFeatures';
 export { Overlay } from '../overlays/overlay/Overlay';
 export type { OverlayProps } from '../overlays/overlay/Overlay';
 export { PortalToContainer } from '../components/PortalToContainer';
-export { ShadowRoot } from '../shadowroot/ShadowRoot';
 export { FramerMotionConfig } from '../context/FramerMotionConfig';
 export { NavigationPanel } from '../components/NavigationPanel';

package/dist/custom/index.js

@@ -35,7 +35,6 @@ import { CompoundDeploymentToolbar, CompoundElementToolbar } from "../likec4diag
 import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custom/nodes/toolbar/ElementToolbar.js";
 import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.js";
 import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.js";
-import { ShadowRoot } from "../shadowroot/ShadowRoot.js";
 import { NavigationPanel } from "../components/NavigationPanel.js";
 import { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from "./customNodes.js";
-export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, Markdown, NavigationPanel, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, ShadowRoot, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, memoEdge, memoNode, sequenceActorNode, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramEventHandlers, useEnabledFeatures, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSetState, useUpdateEffect, viewGroupNode };
+export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, Markdown, NavigationPanel, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, memoEdge, memoNode, sequenceActorNode, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramEventHandlers, useEnabledFeatures, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSetState, useUpdateEffect, viewGroupNode };

package/dist/editor/LikeC4EditorCallbacks.d.ts

@@ -3,6 +3,11 @@ import type * as t from '@likec4/core/types';
  * Callbacks from LikeC4 Editor.
  */
 export interface LikeC4EditorCallbacks {
+    /**
+     * Apply semantic layout to a view (if AI is available)
+     * See vite-plugin settings for more details
+     */
+    applySemanticLayout?: undefined | ((viewId: t.ViewId) => Promise<void>);
     /**
      * Fetch a view by its ID and layout type.
      *

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

@@ -0,0 +1,115 @@
+import { ActorSystem, ActionFunction, CancelAction, PromiseActorLogic, EventObject, NonReducibleUnknown } from 'xstate';
+import { DiagramMachineRef } from '../../likec4diagram/state/machine';
+import { Snapshot, EditorActorContext, EditorActorEvent, EditorActorEmitedEvent } from './types';
+import { HotkeyActorLogic } from './hotkey';
+import type * as t from '@likec4/core/types';
+/**
+ * Actually this is DiagramActorRef
+ * But we can't use it here due to circular type inference
+ */
+export declare const diagramActorRef: (system: ActorSystem<any>) => DiagramMachineRef;
+export declare function makeSnapshot(system: ActorSystem<any>): Snapshot;
+type LayoutChanges = t.ViewChange.ResetManualLayout | t.ViewChange.SaveViewSnapshot;
+export declare const isLayoutChange: (change: t.ViewChange) => change is LayoutChanges;
+export declare const withoutSnapshotChanges: (data: t.ViewChange[]) => (t.ViewChange.ChangeElementStyle | t.ViewChange.ChangeAutoLayout | t.ViewChange.ChangeProperty)[];
+export declare const scheduleSync: (delay?: number) => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, never, never, never, "500ms" | "wait-after-edit", never>;
+export declare const cancelSync: () => CancelAction<EditorActorContext, EditorActorEvent, undefined, EditorActorEvent>;
+/**
+ * Save the state before editing starts
+ */
+export declare const saveBeforeEditing: ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "applyLatest";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "executeChange";
+    logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "applySemanticLayout";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+    id: string | undefined;
+}, never, never, never, never>;
+/**
+ * When editing finishes, push the "beforeEditing" state to the history stack
+ */
+export declare const pushHistory: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "applyLatest";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "executeChange";
+    logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "applySemanticLayout";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+    id: string | undefined;
+}, never, never, never, never>;
+export declare const reschedule: (delay?: number) => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, never, never, never, "500ms" | "wait-after-edit", never>;
+export declare const undo: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "applyLatest";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "executeChange";
+    logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "applySemanticLayout";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+    id: string | undefined;
+}, never, {
+    type: "has pending";
+    params: unknown;
+} | {
+    type: "can undo";
+    params: unknown;
+}, "500ms" | "wait-after-edit", EditorActorEmitedEvent>;
+export declare const pushToSyncQueue: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "applyLatest";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "executeChange";
+    logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "applySemanticLayout";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+    id: string | undefined;
+}, never, never, never, never>;
+export declare const clearQueue: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "applyLatest";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplyLatestToManual.Output, import("./setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "executeChange";
+    logic: PromiseActorLogic<NonReducibleUnknown, import("./setup").EditorCalls.ExecuteChange.Input, EventObject>;
+    id: string | undefined;
+} | {
+    src: "applySemanticLayout";
+    logic: PromiseActorLogic<import("./setup").EditorCalls.ApplySemanticLayout.Output, import("./setup").EditorCalls.ApplySemanticLayout.Input, EventObject>;
+    id: string | undefined;
+}, never, never, never, never>;
+export {};

package/dist/editor/actor/actions.js

@@ -0,0 +1,122 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { machine } from "./setup.js";
+import { createViewChange } from "../../likec4diagram/state/createViewChange.js";
+import { typedSystem } from "../../likec4diagram/state/utils.js";
+import { isViewChange } from "./types.js";
+import { filter, isNot, omit } from "remeda";
+import { assertEvent } from "xstate";
+//#region src/editor/actor/actions.ts
+/**
+* Actually this is DiagramActorRef
+* But we can't use it here due to circular type inference
+*/
+var getDiagramContext = function(system) {
+	return system.get("diagram").getSnapshot().context;
+};
+function makeSnapshot(system) {
+	const parentContext = getDiagramContext(system);
+	return {
+		xynodes: parentContext.xynodes.map(({ measured, data, ...n }) => ({
+			...omit(n, [
+				"selected",
+				"dragging",
+				"resizing"
+			]),
+			data: omit(data, ["dimmed", "hovered"]),
+			measured,
+			initialWidth: measured?.width ?? n.width ?? n.initialWidth,
+			initialHeight: measured?.height ?? n.height ?? n.initialHeight
+		})),
+		xyedges: parentContext.xyedges.map(({ data, ...e }) => ({
+			...omit(e, ["selected"]),
+			data: omit(data, [
+				"active",
+				"dimmed",
+				"hovered"
+			])
+		})),
+		change: createViewChange(parentContext),
+		view: parentContext.view
+	};
+}
+var isLayoutChange = (change) => change.op === "reset-manual-layout" || change.op === "save-view-snapshot";
+filter(isNot(isLayoutChange));
+var scheduleSync = (delay = 50) => {
+	return machine.raise({ type: "change.sync-snapshot" }, delay ? {
+		delay,
+		id: "sync-snapshot"
+	} : void 0);
+};
+/**
+* Save the state before editing starts
+*/
+var saveBeforeEditing = machine.assign(({ system, event }) => {
+	assertEvent(event, "edit.move.start");
+	return { editing: {
+		subject: event.subject,
+		before: makeSnapshot(system)
+	} };
+});
+/**
+* When editing finishes, push the "beforeEditing" state to the history stack
+*/
+var pushHistory = () => machine.assign(({ context }) => {
+	const editing = context.editing;
+	if (editing) return {
+		editing: null,
+		history: {
+			head: editing.before,
+			tail: context.history
+		}
+	};
+	return {};
+});
+var reschedule = (delay = 300) => machine.raise(({ event }) => ({ ...event }), { delay });
+var undo = () => machine.enqueueActions(({ context: { history }, enqueue }) => {
+	if (!history) return;
+	const last = history.head;
+	enqueue.assign({ history: history.tail });
+	enqueue.sendTo(typedSystem.diagramActor, {
+		type: "update.view",
+		view: last.view,
+		xyedges: last.xyedges,
+		xynodes: last.xynodes,
+		source: "editor"
+	});
+	enqueue.cancel("undo-view");
+	enqueue.raise({
+		type: "change.view",
+		change: last.change
+	}, {
+		delay: 200,
+		id: "undo-view"
+	});
+});
+var pushToSyncQueue = () => machine.assign(({ context: { syncQueue }, event }) => {
+	let nextOp;
+	switch (event.type) {
+		case "change.view":
+			nextOp = event.change;
+			break;
+		case "change.semantic-layout":
+			nextOp = "apply-semantic-layout";
+			break;
+		case "change.latest-to-manual":
+			nextOp = "apply-semantic-layout";
+			break;
+		case "change.sync-snapshot":
+			nextOp = "sync-snapshot";
+			break;
+		default: throw new Error(`Invalid event type: ${event.type}`);
+	}
+	if (syncQueue.length === 0) return { syncQueue: [nextOp] };
+	const isNextLayoutChange = isViewChange(nextOp) && isLayoutChange(nextOp);
+	let pending = syncQueue.filter((existingOp) => {
+		if (existingOp === nextOp) return false;
+		if (isNextLayoutChange && isViewChange(existingOp) && isLayoutChange(existingOp)) return false;
+		return true;
+	});
+	return { syncQueue: pending.length > 0 ? [...pending, nextOp] : [nextOp] };
+});
+//#endregion
+export { makeSnapshot, pushHistory, pushToSyncQueue, reschedule, saveBeforeEditing, scheduleSync, undo };

package/dist/editor/{hotkeyActor.d.ts → actor/hotkey.d.ts}

@@ -4,4 +4,4 @@ export type HotKeyEvent = {
 };
 export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {
 }
-export declare const hotkeyActorLogic: HotkeyActorLogic;
+export declare const hotkey: HotkeyActorLogic;

package/dist/editor/{hotkeyActor.js → actor/hotkey.js}

@@ -1,8 +1,8 @@
-import "../_virtual/_rolldown/runtime.js";
+import "../../_virtual/_rolldown/runtime.js";
 import { getHotkeyHandler } from "@mantine/hooks";
 import { fromCallback } from "xstate";
-//#region src/editor/hotkeyActor.ts
-var hotkeyActorLogic = fromCallback(({ sendBack }) => {
+//#region src/editor/actor/hotkey.ts
+var hotkey = fromCallback(({ sendBack }) => {
 	const ctrlZHandler = getHotkeyHandler([[
 		"mod + z",
 		(event) => {
@@ -17,4 +17,4 @@ var hotkeyActorLogic = fromCallback(({ sendBack }) => {
 	};
 });
 //#endregion
-export { hotkeyActorLogic };
+export { hotkey };

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

@@ -0,0 +1,11 @@
+import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
+import { EditorActorEvent, EditorActorContext, EditorActorEmitedEvent, EditorActorInput, EditorActorStateTag } from './types';
+export interface EditorActorLogic extends StateMachine<EditorActorContext, EditorActorEvent, any, any, any, any, any, {
+    editor: 'idle' | 'moving';
+    syncQueue: 'idle' | 'pending' | 'suspended' | 'process';
+}, EditorActorStateTag, EditorActorInput, any, EditorActorEmitedEvent, any, any> {
+}
+export declare const editorActorLogic: EditorActorLogic;
+export type EditorActorSnapshot = SnapshotFrom<EditorActorLogic>;
+export interface EditorActorRef extends ActorRef<EditorActorSnapshot, EditorActorEvent, EditorActorEmitedEvent> {
+}