@likec4/diagram 1.47.0 → 1.48.0

package/dist/context/EnsureMantine.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { MantineContext, MantineProvider } from '@mantine/core';
+import { MantineContext } from '@mantine/core';
 import { useContext, useEffect } from 'react';
-import { DefaultTheme } from '../shadowroot/styles.css.js';
+import { DefaultMantineProvider } from './DefaultMantineProvider.js';
 
 function EnsureMantine({ children }) {
   const mantineCtx = useContext(MantineContext);
@@ -11,10 +11,9 @@ function EnsureMantine({ children }) {
     }
   }, []);
   if (!mantineCtx) {
-    return /* @__PURE__ */ jsx(MantineProvider, { defaultColorScheme: "auto", theme: DefaultTheme, children });
+    return /* @__PURE__ */ jsx(DefaultMantineProvider, { children });
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
-EnsureMantine.displayName = "EnsureMantine";
 
 export { EnsureMantine };

package/dist/context/IconRenderer.d.ts

@@ -1,6 +1,20 @@
 import { ElementShape } from '@likec4/core';
 import { CSSProperties, PropsWithChildren } from 'react';
 import { ElementIconRenderer } from '../LikeC4Diagram.props';
+/**
+ * Provider for custom element icon renderers
+ *
+ * @example
+ * ```tsx
+ * const MyIconRenderer: ElementIconRenderer = ({ node }) => {
+ *   return <div>{node.title}</div>
+ * }
+ *
+ * <IconRendererProvider value={MyIconRenderer}>
+ *   <LikeC4Diagram />
+ * </IconRendererProvider>
+ * ```
+ */
 export declare function IconRendererProvider({ value, children, }: PropsWithChildren<{
     value: ElementIconRenderer | null;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/context/IconRenderer.js

@@ -1,13 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { createContext, useContext } from 'react';
-import IconFileText from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js';
-import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
-import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
-import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
-import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
-import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
-import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
+import IconFileText from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js';
+import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
+import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
+import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
+import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
+import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
+import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({
@@ -30,7 +30,7 @@ function IconRenderer({
     return null;
   }
   let icon;
-  if (element.icon.startsWith("http://") || element.icon.startsWith("https://")) {
+  if (element.icon.startsWith("http://") || element.icon.startsWith("https://") || element.icon.startsWith("data:image")) {
     icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
   } else if (RenderIcon) {
     icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });

package/dist/context/TagStylesContext.js

@@ -46,15 +46,23 @@ function generateStylesheet(tags, rootSelector) {
 }
 function TagStylesProvider({ children, rootSelector }) {
   const tags = useLikeC4Specification().tags;
+  const nonce = useMantineStyleNonce()?.();
   const stylesheet = generateStylesheet(tags, rootSelector);
   return /* @__PURE__ */ jsxs(TagStylesContext.Provider, { value: tags, children: [
-    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { stylesheet }),
+    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { nonce, stylesheet }),
     children
   ] });
 }
-const TagStylesheet = memo(({ stylesheet }) => {
-  const nonce = useMantineStyleNonce()?.();
-  return /* @__PURE__ */ jsx("style", { "data-likec4-tags": true, type: "text/css", dangerouslySetInnerHTML: { __html: stylesheet }, nonce });
+const TagStylesheet = memo(({ stylesheet, nonce }) => {
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      "data-likec4-tags": true,
+      type: "text/css",
+      dangerouslySetInnerHTML: { __html: stylesheet },
+      nonce
+    }
+  );
 });
 function useTagSpecification(tag) {
   const specs = useContext(TagStylesContext);

package/dist/custom/hooks.d.ts

@@ -3,8 +3,8 @@ export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
 export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../context/DiagramFeatures';
 export { useCurrentView, useCurrentViewId, } from '../hooks/useCurrentView';
 export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, useOnDiagramEvent, } from '../hooks/useDiagram';
-export { useCurrentViewModel, } from '../hooks/useCurrentViewModel';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../hooks/useLikeC4Model';
+export { type CurrentViewModel, useCurrentViewModel, useOptionalCurrentViewModel, } from '../hooks/useCurrentViewModel';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model, } from '../hooks/useLikeC4Model';
 export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../hooks/useLikeC4Project';
 export { useLikeC4Styles, } from '../hooks/useLikeC4Styles';
 export { useSetState } from '../hooks/useSetState';

package/dist/custom/index.d.ts

@@ -3,7 +3,7 @@ export * from './customNodes';
 export * from './hooks';
 export * from './primitives';
 export type { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseEdgePropsWithData, BaseNode, BaseNodeData, BaseNodeProps, BaseNodePropsWithData, } from '../base/types';
-export type { ChangeEvent, DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, ViewPadding, WhereOperator, } from '../LikeC4Diagram.props';
+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 { Types } from '../likec4diagram/types';
 export { type EnabledFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures, } from '../context/DiagramFeatures';

package/dist/custom/index.js

@@ -16,8 +16,8 @@ export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 export { useCurrentView, useCurrentViewId } from '../hooks/useCurrentView.js';
 export { useDiagram, useDiagramActorRef } from '../hooks/safeContext.js';
 export { useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
-export { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
+export { useCurrentViewModel, useOptionalCurrentViewModel } from '../hooks/useCurrentViewModel.js';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model } from '../hooks/useLikeC4Model.js';
 export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
 export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
 export { useSetState } from '../hooks/useSetState.js';

package/dist/editor/LikeC4EditorCallbacks.d.ts

@@ -0,0 +1,18 @@
+import type * as t from '@likec4/core/types';
+/**
+ * Callbacks from LikeC4 Editor.
+ */
+export interface LikeC4EditorCallbacks {
+    /**
+     * Fetch a view by its ID and layout type.
+     *
+     * @param viewId - The ID of the view to fetch.
+     * @param layout - The layout type to use when fetching the view.
+     */
+    fetchView(viewId: t.ViewId, layout?: t.LayoutType): t.LayoutedView | Promise<t.LayoutedView>;
+    /**
+     * Callback invoked when the view changes.
+     */
+    handleChange(viewId: t.ViewId, change: t.ViewChange): void | Promise<void>;
+}
+export declare function createLikeC4Editor(callbacks: LikeC4EditorCallbacks): LikeC4EditorCallbacks;

package/dist/editor/LikeC4EditorCallbacks.js

@@ -0,0 +1,5 @@
+function createLikeC4Editor(callbacks) {
+  return callbacks;
+}
+
+export { createLikeC4Editor };

package/dist/editor/LikeC4EditorProvider.d.ts

@@ -1,22 +1,34 @@
-import { PropsWithChildren, Context } from 'react';
-import type * as t from '@likec4/core/types';
-export type LikeC4EditorPort = {
-    /**
-     * Fetch a view by its ID and layout type.
-     *
-     * @param viewId - The ID of the view to fetch.
-     * @param layout - The layout type to use when fetching the view.
-     */
-    fetchView(viewId: t.ViewId, layout?: t.LayoutType): t.LayoutedView | Promise<t.LayoutedView>;
-    /**
-     * Callback invoked when the view changes.
-     */
-    handleChange(viewId: t.ViewId, change: t.ViewChange): void | Promise<void>;
-};
+import { PropsWithChildren } from 'react';
+import { LikeC4EditorCallbacks } from './LikeC4EditorCallbacks';
 export type LikeC4EditorProviderProps = PropsWithChildren<{
-    editor: LikeC4EditorPort;
+    editor: LikeC4EditorCallbacks;
 }>;
-export declare const LikeC4EditorReactContext: Context<LikeC4EditorPort | null>;
+/**
+ * Provider for the LikeC4 Editor.
+ * @example
+ * ```tsx
+ *
+ * // Not required to use memo for editor callbacks
+ * const editor = createLikeC4Editor({
+ *   fetchView: async (viewId, layout) => {
+ *     // fetch view logic
+ *   },
+ *   handleChange: (viewId, change) => {
+ *     // handle change logic
+ *   }
+ * })
+ *
+ * <LikeC4EditorProvider
+ *  editor={editor}>
+ *   <App />
+ * </LikeC4EditorProvider>
+ * ```
+ */
 export declare function LikeC4EditorProvider({ children, editor }: LikeC4EditorProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Component that ensures the editor context is available.
+ *
+ * @param children - The children to render.
+ */
 export declare function EnsureEditorContext({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
-export declare function useOptionalLikeC4EditorPort(): LikeC4EditorPort | null;
+export declare function useOptionalLikeC4Editor(): LikeC4EditorCallbacks | null;

package/dist/editor/LikeC4EditorProvider.js

@@ -5,8 +5,8 @@ const LikeC4EditorReactContext = createContext(null);
 function LikeC4EditorProvider({ children, editor }) {
   return /* @__PURE__ */ jsx(LikeC4EditorReactContext.Provider, { value: editor, children });
 }
-function useOptionalLikeC4EditorPort() {
+function useOptionalLikeC4Editor() {
   return useContext(LikeC4EditorReactContext);
 }
 
-export { LikeC4EditorProvider, LikeC4EditorReactContext, useOptionalLikeC4EditorPort };
+export { LikeC4EditorProvider, useOptionalLikeC4Editor };

package/dist/editor/applyChangesToManualLayout.js

@@ -144,6 +144,7 @@ function makeAsStraightLine(edge, sourceNode, targetNode) {
   const controlPoints = edgeControlPoints(sourceNode, targetNode);
   const labelPos = controlPoints[0];
   return produce(edge, (draft) => {
+    draft.points = controlPoints.map((p) => [p.x, p.y]);
     draft.controlPoints = controlPoints;
     if (edge.labelBBox) {
       draft.labelBBox.x = labelPos.x;

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

@@ -1,10 +1,10 @@
 import { ViewChange } from '@likec4/core/types';
 import { ActionFunction, CancelAction, Values, PromiseActorLogic, EventObject, NonReducibleUnknown, StopAction } from 'xstate';
-import { EditorActorContext, EditorActorEvent, EditorActorEmitedEvent } from './editorActor';
+import { EditorActorContext, EditorActorEvent, EditorActorEmitedEvent } from './editorActor.setup';
 import { HotkeyActorLogic } from './hotkeyActor';
-export declare const raiseSync: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, never, never, never, "350ms" | "waitBeforeSync", never>;
+export declare const raiseSync: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, never, never, never, "500ms" | "waitBeforeSync", never>;
 export declare const cancelSync: () => CancelAction<EditorActorContext, EditorActorEvent, undefined, EditorActorEvent>;
-export declare const reschedule: (delay?: number) => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, never, never, never, "350ms" | "waitBeforeSync", never>;
+export declare const reschedule: (delay?: number) => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, never, never, never, "500ms" | "waitBeforeSync", never>;
 type LayoutChanges = ViewChange.ResetManualLayout | ViewChange.SaveViewSnapshot;
 export declare const isLayoutChange: (change: ViewChange) => change is LayoutChanges;
 export declare const withoutSnapshotChanges: (data: ViewChange[]) => (ViewChange.ChangeElementStyle | ViewChange.ChangeAutoLayout)[];
@@ -16,12 +16,12 @@ export declare const saveStateBeforeEdit: () => ActionFunction<EditorActorContex
     };
     applyLatest: {
         src: "applyLatest";
-        logic: PromiseActorLogic<import("./editorActor").EditorCalls.ApplyLatestToManual.Output, import("./editorActor").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+        logic: PromiseActorLogic<import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Output, import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
         id: string | undefined;
     };
     executeChange: {
         src: "executeChange";
-        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor").EditorCalls.ExecuteChange.Input, EventObject>;
+        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor.setup").EditorCalls.ExecuteChange.Input, EventObject>;
         id: string | undefined;
     };
 }>, never, never, never, never>;
@@ -33,12 +33,12 @@ export declare const startEditing: () => ActionFunction<EditorActorContext, Edit
     };
     applyLatest: {
         src: "applyLatest";
-        logic: PromiseActorLogic<import("./editorActor").EditorCalls.ApplyLatestToManual.Output, import("./editorActor").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+        logic: PromiseActorLogic<import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Output, import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
         id: string | undefined;
     };
     executeChange: {
         src: "executeChange";
-        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor").EditorCalls.ExecuteChange.Input, EventObject>;
+        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor.setup").EditorCalls.ExecuteChange.Input, EventObject>;
         id: string | undefined;
     };
 }>, never, Values<{
@@ -50,7 +50,7 @@ export declare const startEditing: () => ActionFunction<EditorActorContext, Edit
         type: "can undo";
         params: unknown;
     };
-}>, "350ms" | "waitBeforeSync", EditorActorEmitedEvent>;
+}>, "500ms" | "waitBeforeSync", EditorActorEmitedEvent>;
 export declare const stopHotkey: () => StopAction<EditorActorContext, EditorActorEvent, undefined, EditorActorEvent>;
 export declare const ensureHotKey: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, Values<{
     hotkey: {
@@ -60,12 +60,12 @@ export declare const ensureHotKey: () => ActionFunction<EditorActorContext, Edit
     };
     applyLatest: {
         src: "applyLatest";
-        logic: PromiseActorLogic<import("./editorActor").EditorCalls.ApplyLatestToManual.Output, import("./editorActor").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+        logic: PromiseActorLogic<import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Output, import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
         id: string | undefined;
     };
     executeChange: {
         src: "executeChange";
-        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor").EditorCalls.ExecuteChange.Input, EventObject>;
+        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor.setup").EditorCalls.ExecuteChange.Input, EventObject>;
         id: string | undefined;
     };
 }>, never, Values<{
@@ -77,7 +77,7 @@ export declare const ensureHotKey: () => ActionFunction<EditorActorContext, Edit
         type: "can undo";
         params: unknown;
     };
-}>, "350ms" | "waitBeforeSync", EditorActorEmitedEvent>;
+}>, "500ms" | "waitBeforeSync", EditorActorEmitedEvent>;
 export declare const pushHistory: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, Values<{
     hotkey: {
         src: "hotkey";
@@ -86,12 +86,12 @@ export declare const pushHistory: () => ActionFunction<EditorActorContext, Edito
     };
     applyLatest: {
         src: "applyLatest";
-        logic: PromiseActorLogic<import("./editorActor").EditorCalls.ApplyLatestToManual.Output, import("./editorActor").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+        logic: PromiseActorLogic<import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Output, import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
         id: string | undefined;
     };
     executeChange: {
         src: "executeChange";
-        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor").EditorCalls.ExecuteChange.Input, EventObject>;
+        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor.setup").EditorCalls.ExecuteChange.Input, EventObject>;
         id: string | undefined;
     };
 }>, never, never, never, never>;
@@ -103,12 +103,12 @@ export declare const stopEditing: () => ActionFunction<EditorActorContext, Edito
     };
     applyLatest: {
         src: "applyLatest";
-        logic: PromiseActorLogic<import("./editorActor").EditorCalls.ApplyLatestToManual.Output, import("./editorActor").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+        logic: PromiseActorLogic<import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Output, import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
         id: string | undefined;
     };
     executeChange: {
         src: "executeChange";
-        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor").EditorCalls.ExecuteChange.Input, EventObject>;
+        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor.setup").EditorCalls.ExecuteChange.Input, EventObject>;
         id: string | undefined;
     };
 }>, never, Values<{
@@ -120,7 +120,7 @@ export declare const stopEditing: () => ActionFunction<EditorActorContext, Edito
         type: "can undo";
         params: unknown;
     };
-}>, "350ms" | "waitBeforeSync", EditorActorEmitedEvent>;
+}>, "500ms" | "waitBeforeSync", EditorActorEmitedEvent>;
 export declare const markHistoryAsSynched: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, Values<{
     hotkey: {
         src: "hotkey";
@@ -129,12 +129,12 @@ export declare const markHistoryAsSynched: () => ActionFunction<EditorActorConte
     };
     applyLatest: {
         src: "applyLatest";
-        logic: PromiseActorLogic<import("./editorActor").EditorCalls.ApplyLatestToManual.Output, import("./editorActor").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+        logic: PromiseActorLogic<import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Output, import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
         id: string | undefined;
     };
     executeChange: {
         src: "executeChange";
-        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor").EditorCalls.ExecuteChange.Input, EventObject>;
+        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor.setup").EditorCalls.ExecuteChange.Input, EventObject>;
         id: string | undefined;
     };
 }>, never, never, never, never>;
@@ -146,12 +146,12 @@ export declare const popHistory: () => ActionFunction<EditorActorContext, Editor
     };
     applyLatest: {
         src: "applyLatest";
-        logic: PromiseActorLogic<import("./editorActor").EditorCalls.ApplyLatestToManual.Output, import("./editorActor").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+        logic: PromiseActorLogic<import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Output, import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
         id: string | undefined;
     };
     executeChange: {
         src: "executeChange";
-        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor").EditorCalls.ExecuteChange.Input, EventObject>;
+        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor.setup").EditorCalls.ExecuteChange.Input, EventObject>;
         id: string | undefined;
     };
 }>, never, never, never, never>;
@@ -163,12 +163,12 @@ export declare const undo: () => ActionFunction<EditorActorContext, EditorActorE
     };
     applyLatest: {
         src: "applyLatest";
-        logic: PromiseActorLogic<import("./editorActor").EditorCalls.ApplyLatestToManual.Output, import("./editorActor").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+        logic: PromiseActorLogic<import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Output, import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
         id: string | undefined;
     };
     executeChange: {
         src: "executeChange";
-        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor").EditorCalls.ExecuteChange.Input, EventObject>;
+        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor.setup").EditorCalls.ExecuteChange.Input, EventObject>;
         id: string | undefined;
     };
 }>, never, Values<{
@@ -180,7 +180,7 @@ export declare const undo: () => ActionFunction<EditorActorContext, EditorActorE
         type: "can undo";
         params: unknown;
     };
-}>, "350ms" | "waitBeforeSync", EditorActorEmitedEvent>;
+}>, "500ms" | "waitBeforeSync", EditorActorEmitedEvent>;
 export declare const addSnapshotToPendingChanges: () => ActionFunction<EditorActorContext, EditorActorEvent, EditorActorEvent, undefined, Values<{
     hotkey: {
         src: "hotkey";
@@ -189,12 +189,12 @@ export declare const addSnapshotToPendingChanges: () => ActionFunction<EditorAct
     };
     applyLatest: {
         src: "applyLatest";
-        logic: PromiseActorLogic<import("./editorActor").EditorCalls.ApplyLatestToManual.Output, import("./editorActor").EditorCalls.ApplyLatestToManual.Input, EventObject>;
+        logic: PromiseActorLogic<import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Output, import("./editorActor.setup").EditorCalls.ApplyLatestToManual.Input, EventObject>;
         id: string | undefined;
     };
     executeChange: {
         src: "executeChange";
-        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor").EditorCalls.ExecuteChange.Input, EventObject>;
+        logic: PromiseActorLogic<NonReducibleUnknown, import("./editorActor.setup").EditorCalls.ExecuteChange.Input, EventObject>;
         id: string | undefined;
     };
 }>, never, never, never, never>;

package/dist/editor/editorActor.actions.js

@@ -1,6 +1,6 @@
 import { last, filter, isNot, omit } from 'remeda';
 import { createViewChange } from '../likec4diagram/state/createViewChange.js';
-import { machine } from './editorActor.js';
+import { machine } from './editorActor.setup.js';
 
 const diagramActorRef = function(system) {
   return system.get("diagram");
@@ -10,7 +10,7 @@ const getDiagramContext = function(system) {
 };
 const raiseSync = () => machine.raise({ type: "sync" }, { delay: 200, id: "sync" });
 const cancelSync = () => machine.cancel("sync");
-const reschedule = (delay = 50) => machine.raise(({ event }) => event, { delay });
+const reschedule = (delay = 350) => machine.raise(({ event }) => event, { delay });
 const isLayoutChange = (change) => change.op === "reset-manual-layout" || change.op === "save-view-snapshot";
 const withoutSnapshotChanges = filter(isNot(isLayoutChange));
 const saveStateBeforeEdit = () => machine.assign(({ system }) => {

package/dist/editor/editorActor.setup.d.ts

@@ -0,0 +1,84 @@
+import { NonReducibleUnknown, SetupReturn, PromiseActorLogic, EventObject, MetaObject } from 'xstate';
+import { Types } from '../likec4diagram/types';
+import { HotKeyEvent, HotkeyActorLogic } from './hotkeyActor';
+import type * as t from '@likec4/core/types';
+export declare namespace EditorCalls {
+    type ApplyLatestToManual = (params: {
+        input: ApplyLatestToManual.Input;
+    }) => Promise<ApplyLatestToManual.Output>;
+    namespace ApplyLatestToManual {
+        type Input = {
+            viewId: t.ViewId;
+            current: t.LayoutedView | undefined;
+        };
+        type Output = {
+            updated: t.LayoutedView;
+        };
+    }
+    type ExecuteChange = (params: {
+        input: ExecuteChange.Input;
+    }) => Promise<ExecuteChange.Output>;
+    namespace ExecuteChange {
+        type Input = {
+            viewId: t.ViewId;
+            changes: t.ViewChange[];
+        };
+        type Output = NonReducibleUnknown;
+    }
+}
+export type EditorActorEvent = {
+    type: 'sync';
+} | {
+    type: 'change';
+    change: t.ViewChange;
+} | {
+    type: 'edit.start';
+    subject: 'node' | 'edge';
+} | {
+    type: 'edit.finish';
+    wasChanged?: boolean;
+} | {
+    type: 'applyLatestToManual';
+} | {
+    type: 'synced';
+} | {
+    type: 'cancel';
+} | {
+    type: 'reset';
+} | HotKeyEvent;
+export type HistorySnapshot = {
+    view: t.LayoutedView;
+    change: t.ViewChange.SaveViewSnapshot;
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+    synched: boolean;
+};
+export interface EditorActorInput {
+    viewId: t.ViewId;
+}
+export interface EditorActorContext {
+    viewId: t.ViewId;
+    pendingChanges: t.ViewChange[];
+    history: ReadonlyArray<HistorySnapshot>;
+    /**
+     * The state before editing started
+     */
+    beforeEditing: HistorySnapshot | null;
+    /**
+     * The subject of the edit
+     */
+    editing: 'node' | 'edge' | null;
+}
+export type EditorActorEmitedEvent = {
+    type: 'idle';
+};
+export declare const machine: SetupReturn<EditorActorContext, EditorActorEvent, {
+    applyLatest: PromiseActorLogic<EditorCalls.ApplyLatestToManual.Output, EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    executeChange: PromiseActorLogic<NonReducibleUnknown, EditorCalls.ExecuteChange.Input, EventObject>;
+    hotkey: HotkeyActorLogic;
+}, {
+    hotkey: "hotkey";
+}, {}, {
+    'has pending': unknown;
+    'can undo': unknown;
+}, "500ms" | "waitBeforeSync", "pending", EditorActorInput, NonReducibleUnknown, EditorActorEmitedEvent, MetaObject>;

package/dist/editor/editorActor.setup.js

@@ -0,0 +1,38 @@
+import { setup, fromPromise } from 'xstate';
+import { hotkeyActorLogic } from './hotkeyActor.js';
+
+const applyLatest = fromPromise(
+  () => {
+    throw new Error("Not implemented");
+  }
+);
+const executeChange = fromPromise(
+  () => {
+    throw new Error("Not implemented");
+  }
+);
+const machine = setup({
+  types: {
+    context: {},
+    events: {},
+    emitted: {},
+    input: {},
+    children: {},
+    tags: {}
+  },
+  delays: {
+    "500ms": 500,
+    "waitBeforeSync": 2e3
+  },
+  actors: {
+    applyLatest,
+    executeChange,
+    hotkey: hotkeyActorLogic
+  },
+  guards: {
+    "has pending": ({ context }) => context.pendingChanges.length > 0,
+    "can undo": ({ context }) => context.history.length > 0
+  }
+});
+
+export { machine };

package/dist/editor/editorActor.states.d.ts

@@ -0,0 +1,9 @@
+import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
+import { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput } from './editorActor.setup';
+export type { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, } from './editorActor.setup';
+export interface EditorActorLogic extends StateMachine<EditorActorContext, EditorActorEvent, any, any, any, any, any, 'idle' | 'editing' | 'pending' | 'afterEdit' | 'applyLatestToManual' | 'executeChanges', any, EditorActorInput, any, EditorActorEmitedEvent, any, any> {
+}
+export declare const editorActorLogic: EditorActorLogic;
+export type EditorActorSnapshot = SnapshotFrom<EditorActorLogic>;
+export interface EditorActorRef extends ActorRef<EditorActorSnapshot, EditorActorEvent, EditorActorEmitedEvent> {
+}