@likec4/diagram 1.56.0 → 1.58.0

package/dist/context/FramerMotionConfig.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useMantineStyleNonce } from "@mantine/core";
 import { LazyMotion, MotionConfig, domMax } from "motion/react";
 //#region src/context/FramerMotionConfig.tsx
-var FramerMotionConfig = ({ reducedMotion = "user", children }) => {
+function FramerMotionConfig({ reducedMotion = "user", children }) {
 	const nonce = useMantineStyleNonce()?.();
 	return /* @__PURE__ */ jsx(LazyMotion, {
 		features: domMax,
@@ -14,6 +14,6 @@ var FramerMotionConfig = ({ reducedMotion = "user", children }) => {
 			children
 		})
 	});
-};
+}
 //#endregion
 export { FramerMotionConfig };

package/dist/context/IconRenderer.d.ts

@@ -17,7 +17,7 @@ import { ElementIconRenderer } from '../LikeC4Diagram.props';
  */
 export declare function IconRendererProvider({ value, children, }: PropsWithChildren<{
     value: ElementIconRenderer | null;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
 export declare function IconRenderer({ element, className, style, }: {
     element?: {
         id: string;
@@ -36,4 +36,4 @@ export declare function IconOrShapeRenderer({ element, className, style, }: {
     };
     className?: string;
     style?: CSSProperties | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/context/IconRenderer.js

@@ -1,7 +1,7 @@
 import "../_virtual/_rolldown/runtime.js";
 import { cx } from "@likec4/styles/css";
 import { IconBrowser, IconCylinder, IconDeviceMobile, IconFileText, IconRectangularPrism, IconReorder, IconUser } from "@tabler/icons-react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/context/IconRenderer.tsx
 var IconRendererContext = createContext(null);
@@ -47,17 +47,28 @@ function IconRenderer({ element, className, style }) {
 	const RenderIcon = useContext(IconRendererContext);
 	if (!element || !element.icon || element.icon === "none") return null;
 	let icon;
-	if (element.icon.startsWith("http://") || element.icon.startsWith("https://") || element.icon.startsWith("data:image")) {
-		const svgContent = element.icon.startsWith("data:image/svg+xml") ? decodeSvgDataUrl(element.icon) : null;
-		if (svgContent) icon = /* @__PURE__ */ jsx("span", {
-			style: { display: "contents" },
-			dangerouslySetInnerHTML: { __html: svgContent }
-		});
-		else icon = /* @__PURE__ */ jsx("img", {
-			src: element.icon,
-			alt: element.title
-		});
-	} else if (RenderIcon) icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
+	switch (true) {
+		case element.icon.startsWith("data:image/svg+xml"):
+			icon = /* @__PURE__ */ jsx(SvgDataUrlIcon, {
+				dataUrl: element.icon,
+				alt: element.title
+			});
+			break;
+		case element.icon.startsWith("http://"):
+		case element.icon.startsWith("https://"):
+		case element.icon.startsWith("data:image"):
+			icon = /* @__PURE__ */ jsx("img", {
+				src: element.icon,
+				alt: element.title
+			});
+			break;
+		case !!RenderIcon:
+			icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
+			break;
+		default:
+			icon = null;
+			break;
+	}
 	if (!icon) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: cx(className, "likec4-element-icon"),
@@ -93,5 +104,14 @@ function IconOrShapeRenderer({ element, className, style }) {
 		style
 	});
 }
+function SvgDataUrlIcon({ dataUrl, ...props }) {
+	const svgContent = useMemo(() => decodeSvgDataUrl(dataUrl), [dataUrl]);
+	if (!svgContent) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		style: { display: "contents" },
+		dangerouslySetInnerHTML: { __html: svgContent }
+	});
+}
 //#endregion
 export { IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/LikeC4ModelContext.d.ts

@@ -6,7 +6,7 @@ type UnknownLayouted = t.aux.UnknownLayouted;
 export declare const LikeC4ModelContextProvider: Provider<LikeC4Model<any> | null>;
 export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted, LayoutedView<UnknownLayouted>>;
 export declare const CurrentViewModelContext: Provider<CurrentViewModel | null>;
-export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react").JSX.Element | null;
 /**
  * @returns The LikeC4Model from context, or null if no LikeC4ModelProvider is found.
  */

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/context/ShadowRootContext.d.ts

@@ -0,0 +1,3 @@
+import { Context } from 'react';
+export declare const ShadowRootContext: Context<ShadowRoot | null>;
+export declare function useShadowRoot(): ShadowRoot;

package/dist/context/ShadowRootContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/context/ShadowRootContext.tsx
+var ShadowRootContext = createContext(null);
+//#endregion
+export { ShadowRootContext };

package/dist/context/TagStylesContext.d.ts

@@ -1,7 +1,8 @@
 import { TagSpecification } from '@likec4/core';
 import { PropsWithChildren } from 'react';
+export declare const generateColorVars: (spec: TagSpecification) => string;
 export declare function TagStylesProvider({ children, rootSelector }: PropsWithChildren<{
     rootSelector: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
 export declare function useTagSpecifications(): Record<string, TagSpecification>;
 export declare function useTagSpecification(tag: string): TagSpecification;

package/dist/context/TagStylesContext.js

@@ -1,19 +1,20 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useLikeC4Specification } from "../hooks/useLikeC4Model.js";
-import { createContext, memo, useContext } from "react";
+import { createContext, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { entries, flatMap, isEmpty, join, pipe } from "remeda";
 import { isTagColorSpecified } from "@likec4/core";
 import { useMantineStyleNonce } from "@mantine/core";
-import { DefaultTagColors } from "@likec4/core/styles";
+import { DefaultTagColors, getContrastedColorsAPCA, isValidColor } from "@likec4/core/styles";
 //#region src/context/TagStylesContext.tsx
 var TagStylesContext = createContext({});
 var radixColors = DefaultTagColors;
 var generateColorVars = (spec) => {
 	const color = spec.color;
-	if (isTagColorSpecified(spec)) return `
+	if (isTagColorSpecified(spec) && isValidColor(color)) return `
       --colors-likec4-tag-bg: ${color};
       --colors-likec4-tag-bg-hover: color-mix(in oklab, ${color}, var(--colors-likec4-mix-color) 20%);
+      --colors-likec4-tag-text: ${getContrastedColorsAPCA(color).hiContrast};
     `;
 	if (!radixColors.includes(color)) return "";
 	let textcolor = "12";
@@ -59,8 +60,5 @@ var TagStylesheet = memo(({ stylesheet, nonce }) => {
 		nonce
 	});
 });
-function useTagSpecification(tag) {
-	return useContext(TagStylesContext)[tag] ?? { color: "tomato" };
-}
 //#endregion
-export { TagStylesProvider, useTagSpecification };
+export { TagStylesProvider };

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/LikeC4EditorProvider.d.ts

@@ -24,11 +24,11 @@ export type LikeC4EditorProviderProps = PropsWithChildren<{
  * </LikeC4EditorProvider>
  * ```
  */
-export declare function LikeC4EditorProvider({ children, editor }: LikeC4EditorProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4EditorProvider({ children, editor }: LikeC4EditorProviderProps): import("react").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 EnsureEditorContext({ children }: PropsWithChildren): import("react").JSX.Element | null;
 export declare function useOptionalLikeC4Editor(): LikeC4EditorCallbacks | null;

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

@@ -0,0 +1,174 @@
+import { ActorSystem, ActionFunction, CancelAction, PromiseActorLogic, EventObject } from 'xstate';
+import { Snapshot, SyncOp, EditorActorContext, EditorActorEvent, EditorActorEmitedEvent } from './types';
+import { HotkeyActorLogic } from './hotkey';
+import type * as t from '@likec4/core/types';
+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 isLayoutChangeOp: <T extends SyncOp>(op: T) => op is Extract<T, string | 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<import("./setup").EditorCalls.ExecuteChange.Output, 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<import("./setup").EditorCalls.ExecuteChange.Output, 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;
+} | {
+    type: "can redo";
+    params: unknown;
+}, "500ms" | "wait-after-edit", EditorActorEmitedEvent>;
+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<import("./setup").EditorCalls.ExecuteChange.Output, 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;
+} | {
+    type: "can redo";
+    params: unknown;
+}, "500ms" | "wait-after-edit", EditorActorEmitedEvent>;
+export declare const redo: () => 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<import("./setup").EditorCalls.ExecuteChange.Output, 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;
+} | {
+    type: "can redo";
+    params: unknown;
+}, "500ms" | "wait-after-edit", EditorActorEmitedEvent>;
+export declare const deleteNodesAndEdges: () => 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<import("./setup").EditorCalls.ExecuteChange.Output, 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;
+} | {
+    type: "can redo";
+    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<import("./setup").EditorCalls.ExecuteChange.Output, 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<import("./setup").EditorCalls.ExecuteChange.Output, 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,188 @@
+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 { 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";
+var isLayoutChangeOp = (op) => op === "apply-latest-to-manual" || op === "apply-semantic-layout" || op === "sync-snapshot" || isLayoutChange(op);
+filter(isNot(isLayoutChange));
+var scheduleSync = (delay = 50) => {
+	return machine.raise({ type: "change.sync-snapshot" }, delay ? {
+		delay,
+		id: "sync-snapshot"
+	} : void 0);
+};
+var cancelSync = () => {
+	return machine.cancel("sync-snapshot");
+};
+/**
+* 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.enqueueActions(({ context, enqueue }) => {
+	const editing = context.editing;
+	if (editing) {
+		enqueue.assign({
+			editing: null,
+			history: {
+				head: editing.before,
+				tail: context.history
+			},
+			redo: null
+		});
+		enqueue(scheduleSync());
+	}
+});
+var undo = () => machine.enqueueActions(({ context: { history, redo }, system, enqueue }) => {
+	if (!history) return;
+	const last = history.head;
+	enqueue.assign({
+		history: history.tail,
+		redo: {
+			head: makeSnapshot(system),
+			tail: redo
+		}
+	});
+	enqueue(cancelSync());
+	enqueue(scheduleSync(100));
+	enqueue.sendTo(typedSystem.diagramActor, {
+		type: "update.view",
+		view: last.view,
+		xyedges: last.xyedges,
+		xynodes: last.xynodes,
+		source: "editor"
+	});
+});
+var redo = () => machine.enqueueActions(({ context: { history, redo }, system, enqueue }) => {
+	if (!redo) return;
+	const last = redo.head;
+	enqueue.assign({
+		history: {
+			head: makeSnapshot(system),
+			tail: history
+		},
+		redo: redo.tail
+	});
+	enqueue(cancelSync());
+	enqueue(scheduleSync(100));
+	enqueue.sendTo(typedSystem.diagramActor, {
+		type: "update.view",
+		view: last.view,
+		xyedges: last.xyedges,
+		xynodes: last.xynodes,
+		source: "editor"
+	});
+});
+var deleteNodesAndEdges = () => machine.enqueueActions(({ context, system, event, enqueue }) => {
+	assertEvent(event, "delete.nodes-edges");
+	const deletedNodeIds = new Set(event.nodeIds);
+	const willNotBeDeletedNode = (node) => !deletedNodeIds.has(typeof node === "string" ? node : node.id);
+	const snapshot = makeSnapshot(system);
+	const deletedEdgeIds = new Set(event.edgeIds);
+	for (const edge of snapshot.view.edges) if (deletedNodeIds.has(edge.source) || deletedNodeIds.has(edge.target)) deletedEdgeIds.add(edge.id);
+	const willNotBeDeletedEdge = (edge) => !deletedEdgeIds.has(typeof edge === "string" ? edge : edge.id);
+	enqueue.assign({
+		history: {
+			head: snapshot,
+			tail: context.history
+		},
+		redo: null
+	});
+	const cleanupNode = (node) => {
+		if (node.children.every(willNotBeDeletedNode) && node.inEdges.every(willNotBeDeletedEdge) && node.outEdges.every(willNotBeDeletedEdge)) return node;
+		return {
+			...node,
+			children: node.children.filter(willNotBeDeletedNode),
+			inEdges: node.inEdges.filter(willNotBeDeletedEdge),
+			outEdges: node.outEdges.filter(willNotBeDeletedEdge)
+		};
+	};
+	enqueue(cancelSync());
+	enqueue(scheduleSync());
+	enqueue.sendTo(typedSystem.diagramActor, {
+		type: "update.view",
+		view: {
+			...snapshot.view,
+			nodes: snapshot.view.nodes.filter(willNotBeDeletedNode).map(cleanupNode),
+			edges: snapshot.view.edges.filter(willNotBeDeletedEdge)
+		},
+		source: "editor"
+	});
+});
+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-latest-to-manual";
+			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] };
+	if (syncQueue.length === 1 && syncQueue[0] === nextOp) return {};
+	const isNextLayoutChange = isLayoutChangeOp(nextOp);
+	let pending = syncQueue.filter((existingOp) => {
+		if (existingOp === nextOp) return false;
+		if (isNextLayoutChange && isLayoutChangeOp(existingOp)) return false;
+		return true;
+	});
+	return { syncQueue: pending.length > 0 ? [...pending, nextOp] : [nextOp] };
+});
+var clearQueue = () => machine.assign({
+	syncQueue: [],
+	processing: null
+});
+//#endregion
+export { cancelSync, clearQueue, deleteNodesAndEdges, makeSnapshot, pushHistory, pushToSyncQueue, redo, saveBeforeEditing, scheduleSync, undo };

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

@@ -1,7 +1,7 @@
 import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from 'xstate';
 export type HotKeyEvent = {
-    type: 'undo';
+    type: 'undo' | 'redo';
 };
 export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {
 }
-export declare const hotkeyActorLogic: HotkeyActorLogic;
+export declare const hotkey: HotkeyActorLogic;