@likec4/diagram 1.22.1 → 1.23.0

package/dist/overlays/relationships-browser/actor.js

@@ -1,8 +1,8 @@
-import { nonNullable, delay, invariant } from "@likec4/core";
+import { invariant, nonNullable, delay } from "@likec4/core";
 import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { getViewportForBounds, getNodeDimensions } from "@xyflow/system";
-import { omit, prop, isNullish } from "remeda";
-import { setup, fromPromise, assign, stopChild, cancel, raise, enqueueActions } from "xstate";
+import { prop, omit, isNullish } from "remeda";
+import { setup, assign, fromPromise, assertEvent, cancel, raise, enqueueActions } from "xstate";
 import { MinZoom, ZIndexes } from "../../base/const.js";
 import { updateEdges } from "../../base/updateEdges.js";
 import { updateNodes } from "../../base/updateNodes.js";
@@ -13,14 +13,138 @@ import { Base } from "../../base/types.js";
 const findRootSubject = (nodes) => nodes.find(
   (n) => n.data.column === "subjects" && isNullish(n.parentId)
 );
-const relationshipsBrowserActor = setup({
+const layouter = fromPromise(async ({ input, self, signal }) => {
+  const {
+    subjectId,
+    navigateFromNode,
+    xyflow,
+    xystore,
+    update
+  } = input;
+  let {
+    nodes: currentNodes,
+    width,
+    height
+  } = xystore.getState();
+  const next = viewToNodesEdge(update);
+  const updateXYData = () => {
+    const { nodes, edges } = xystore.getState();
+    return {
+      xynodes: updateNodes(nodes, next.xynodes),
+      xyedges: updateEdges(edges, next.xyedges)
+    };
+  };
+  const parent = nonNullable(self._parent);
+  let zoom = xyflow.getZoom();
+  const maxZoom = Math.max(zoom, 1);
+  const nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
+  const nextSubjectNode = next.xynodes.find(
+    (n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId
+  ) ?? findRootSubject(next.xynodes);
+  const currentSubjectNode = findRootSubject(currentNodes);
+  const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
+  if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
+    await xyflow.setViewport(nextviewport);
+    return updateXYData();
+  }
+  const nextSubjectCenter = {
+    x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
+    y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
+  };
+  const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
+  const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode);
+  const existingInternalNode = xyflow.getInternalNode(existingNode.id);
+  const existingDimensions = getNodeDimensions(existingInternalNode);
+  const nested = /* @__PURE__ */ new Set();
+  currentNodes.forEach((n) => {
+    if (n.id === existingNode.id) {
+      return;
+    }
+    if (n.data.column === "subjects") {
+      nested.add(n.id);
+      return;
+    }
+    if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) {
+      nested.add(n.id);
+    }
+  });
+  currentNodes = updateNodes(
+    currentNodes,
+    currentNodes.flatMap((n) => {
+      if (nested.has(n.id)) {
+        return [];
+      }
+      if (n.id !== existingNode.id) {
+        return {
+          ...n,
+          data: {
+            ...n.data,
+            dimmed: n.data.column === "subjects" ? "immediate" : true
+          }
+        };
+      }
+      return {
+        ...omit(n, ["parentId"]),
+        position: {
+          x: currentSubjectCenter.x - existingDimensions.width / 2,
+          y: currentSubjectCenter.y - existingDimensions.height / 2
+        },
+        zIndex: ZIndexes.Max,
+        hidden: false,
+        data: {
+          ...n.data,
+          dimmed: false
+        }
+      };
+    })
+  );
+  parent.send({
+    type: "update.xydata",
+    xynodes: currentNodes,
+    xyedges: []
+  });
+  zoom = Math.min(
+    zoom,
+    nextviewport.zoom
+  );
+  await delay(175);
+  next.xynodes = next.xynodes.map(Base.setDimmed(false));
+  if (signal.aborted) {
+    return updateXYData();
+  }
+  await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 });
+  await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
+  return updateXYData();
+});
+const relationshipsBrowserLogic = setup({
   types: {
     context: {},
     tags: "",
+    children: {},
     input: {},
     events: {}
   },
+  actors: {
+    layouter
+  },
+  guards: {
+    isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null
+  },
   actions: {
+    "xyflow.init": assign(({ event }) => {
+      assertEvent(event, "xyflow.init");
+      return {
+        xyflow: event.instance,
+        xystore: event.store
+      };
+    }),
+    "update.view": assign(({ event }) => {
+      assertEvent(event, "update.view");
+      return {
+        layouted: event.layouted,
+        ...viewToNodesEdge(event.layouted)
+      };
+    }),
     "xyflow:updateNodeInternals": ({ context }) => {
       invariant(context.xystore, "xystore is not initialized");
       const { domNode, updateNodeInternals } = context.xystore.getState();
@@ -63,122 +187,13 @@ const relationshipsBrowserActor = setup({
         );
       }
     }
-  },
-  guards: {
-    "enable: navigate.to": () => true
-  },
-  actors: {
-    layouter: fromPromise(async ({ input, self, signal }) => {
-      const {
-        subjectId,
-        navigateFromNode,
-        xyflow,
-        xystore,
-        update
-      } = input;
-      let {
-        nodes: currentNodes,
-        width,
-        height
-      } = xystore.getState();
-      const next = viewToNodesEdge(update);
-      const updateXYData = () => {
-        const { nodes, edges } = xystore.getState();
-        return {
-          xynodes: updateNodes(nodes, next.xynodes),
-          xyedges: updateEdges(edges, next.xyedges)
-        };
-      };
-      const parent = nonNullable(self._parent);
-      let zoom = xyflow.getZoom();
-      const maxZoom = Math.max(zoom, 1);
-      const nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
-      const nextSubjectNode = next.xynodes.find(
-        (n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId
-      ) ?? findRootSubject(next.xynodes);
-      const currentSubjectNode = findRootSubject(currentNodes);
-      const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
-      if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
-        await xyflow.setViewport(nextviewport);
-        return updateXYData();
-      }
-      const nextSubjectCenter = {
-        x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
-        y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
-      };
-      const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
-      const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode);
-      const existingInternalNode = xyflow.getInternalNode(existingNode.id);
-      const existingDimensions = getNodeDimensions(existingInternalNode);
-      const nested = /* @__PURE__ */ new Set();
-      currentNodes.forEach((n) => {
-        if (n.id === existingNode.id) {
-          return;
-        }
-        if (n.data.column === "subjects") {
-          nested.add(n.id);
-          return;
-        }
-        if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) {
-          nested.add(n.id);
-        }
-      });
-      currentNodes = updateNodes(
-        currentNodes,
-        currentNodes.flatMap((n) => {
-          if (nested.has(n.id)) {
-            return [];
-          }
-          if (n.id !== existingNode.id) {
-            return {
-              ...n,
-              data: {
-                ...n.data,
-                dimmed: n.data.column === "subjects" ? "immediate" : true
-              }
-            };
-          }
-          return {
-            ...omit(n, ["parentId"]),
-            position: {
-              x: currentSubjectCenter.x - existingDimensions.width / 2,
-              y: currentSubjectCenter.y - existingDimensions.height / 2
-            },
-            zIndex: ZIndexes.Max,
-            hidden: false,
-            data: {
-              ...n.data,
-              dimmed: false
-            }
-          };
-        })
-      );
-      parent.send({
-        type: "update.xydata",
-        xynodes: currentNodes,
-        xyedges: []
-      });
-      zoom = Math.min(
-        zoom,
-        nextviewport.zoom
-      );
-      await delay(175);
-      next.xynodes = next.xynodes.map(Base.setDimmed(false));
-      if (signal.aborted) {
-        return updateXYData();
-      }
-      await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 });
-      await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
-      return updateXYData();
-    })
   }
 }).createMachine({
-  initial: "initializing",
+  id: "relationships-browser",
   context: ({ input }) => ({
     ...input,
     closeable: input.closeable ?? true,
     enableNavigationMenu: input.enableNavigationMenu ?? true,
-    initialized: false,
     xyflow: null,
     xystore: null,
     layouted: null,
@@ -186,40 +201,47 @@ const relationshipsBrowserActor = setup({
     xynodes: [],
     xyedges: []
   }),
+  initial: "initializing",
+  on: {
+    "xyflow.applyNodeChanges": {
+      actions: assign({
+        xynodes: ({ context, event }) => {
+          return applyNodeChanges(event.changes, context.xynodes);
+        }
+      })
+    },
+    "xyflow.applyEdgeChanges": {
+      actions: assign({
+        xyedges: ({ context, event }) => {
+          return applyEdgeChanges(event.changes, context.xyedges);
+        }
+      })
+    }
+  },
   states: {
-    "initializing": {
+    initializing: {
       on: {
         "xyflow.init": {
-          actions: [
-            assign({
-              initialized: true,
-              xyflow: ({ event }) => event.instance,
-              xystore: ({ event }) => event.store
-            })
-          ],
-          target: "waiting-data"
+          actions: "xyflow.init",
+          target: "isReady"
         },
-        "close": {
-          target: "closed"
-        }
-      }
-    },
-    "waiting-data": {
-      on: {
         "update.view": {
-          actions: [
-            assign(({ event }) => {
-              return {
-                layouted: event.layouted,
-                ...viewToNodesEdge(event.layouted)
-              };
-            }),
-            raise({ type: "fitDiagram", duration: 0 })
-          ],
-          target: "active"
-        }
+          actions: "update.view",
+          target: "isReady"
+        },
+        "stop": "closed",
+        "close": "closed"
       }
     },
+    "isReady": {
+      always: [{
+        guard: "isReady",
+        actions: raise({ type: "fitDiagram", duration: 0 }),
+        target: "active"
+      }, {
+        target: "initializing"
+      }]
+    },
     "active": {
       initial: "idle",
       tags: ["active"],
@@ -271,7 +293,6 @@ const relationshipsBrowserActor = setup({
       },
       on: {
         "xyflow.nodeClick": {
-          guard: "enable: navigate.to",
           actions: enqueueActions(({ event, enqueue }) => {
             if ("fqn" in event.node.data) {
               const fqn = event.node.data.fqn;
@@ -284,7 +305,6 @@ const relationshipsBrowserActor = setup({
           })
         },
         "navigate.to": {
-          guard: "enable: navigate.to",
           actions: [
             assign({
               subject: ({ event }) => event.subject,
@@ -316,41 +336,29 @@ const relationshipsBrowserActor = setup({
             raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 300 })
           ]
         },
-        "close": {
-          target: "closed"
-        }
+        "xyflow.init": {
+          actions: "xyflow.init"
+        },
+        "xyflow.unmount": {
+          target: "initializing"
+        },
+        "close": "closed"
       }
     },
-    "closed": {
+    closed: {
       id: "closed",
-      type: "final",
-      entry: [
-        stopChild("layouter"),
-        assign({
-          initialized: false,
-          xyflow: null,
-          xystore: null
-        })
-      ]
+      type: "final"
     }
   },
-  on: {
-    "xyflow.applyNodeChanges": {
-      actions: assign({
-        xynodes: ({ context, event }) => {
-          return applyNodeChanges(event.changes, context.xynodes);
-        }
-      })
-    },
-    "xyflow.applyEdgeChanges": {
-      actions: assign({
-        xyedges: ({ context, event }) => {
-          return applyEdgeChanges(event.changes, context.xyedges);
-        }
-      })
-    }
-  }
+  exit: assign({
+    xyflow: null,
+    layouted: null,
+    xystore: null,
+    xyedges: [],
+    xynodes: []
+  })
 });
 export {
-  relationshipsBrowserActor
+  layouter,
+  relationshipsBrowserLogic
 };

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -2,12 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { IconZoomScan, IconTransform, IconFileSymlink } from "@tabler/icons-react";
 import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
 import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useRelationshipsBrowser } from "../hooks.js";
+import { useRelationshipsBrowser, useRelationshipsBrowserState } from "../hooks.js";
 import { ElementActionButtons } from "../../../base/primitives/element/ElementActionButtons.js";
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeature("NavigateTo", "Vscode");
   const diagram = useDiagram();
   const browser = useRelationshipsBrowser();
+  const subject = useRelationshipsBrowserState((s) => s.context.subject);
   const buttons = [];
   const { navigateTo, fqn } = props.data;
   if (navigateTo && enableNavigateTo) {
@@ -20,7 +21,7 @@ const ElementActions = (props) => {
       }
     });
   }
-  if (fqn !== browser.getState().subject) {
+  if (fqn !== subject) {
     buttons.push({
       key: "relationships",
       icon: /* @__PURE__ */ jsx(IconTransform, {}),

package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts

@@ -7,9 +7,9 @@ export declare const edgeTypes: {
         target: string;
         style?: CSSProperties;
         id: string;
+        selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
-        selected?: boolean;
         animated?: boolean;
         sourceX: number;
         sourceY: number;

package/dist/overlays/relationships-browser/custom/nodeTypes.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Handle } from "@xyflow/react";
 import { Position } from "@xyflow/system";
 import { m } from "framer-motion";
+import { useDiagram } from "../../../hooks/useDiagram.js";
 import { ElementActions } from "./ElementActions.js";
 import { EmptyNode } from "./EmptyNode.js";
 import { customNode } from "../../../base/primitives/customNode.js";
@@ -10,17 +11,33 @@ import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.j
 import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
 import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
 import { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
+import { ElementDetailsButton } from "../../../base/primitives/element/ElementDetailsButton.js";
+const ElementDetailsButtonWithHandler = (props) => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(
+    ElementDetailsButton,
+    {
+      ...props,
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openElementDetails(props.data.fqn);
+      }
+    }
+  );
+};
 const nodeTypes = {
   element: customNode((props) => {
     return /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
       /* @__PURE__ */ jsx(ElementShape, { ...props }),
       /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+      /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
       /* @__PURE__ */ jsx(ElementActions, { ...props }),
       /* @__PURE__ */ jsx(ElementPorts, { ...props })
     ] }, props.id);
   }),
   compound: customNode((props) => {
     return /* @__PURE__ */ jsxs(CompoundNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
+      /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
       /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
       /* @__PURE__ */ jsx(CompoundPorts, { ...props })
     ] }, props.id);

package/dist/overlays/relationships-browser/hooks.d.ts

@@ -8,6 +8,7 @@ export declare const RelationshipsBrowserActorContext: Context<RelationshipsBrow
 export declare function useRelationshipsBrowserActor(): RelationshipsBrowserActorRef;
 export declare function useRelationshipsBrowserState<T>(selector: (state: RelationshipsBrowserSnapshot) => T, compare?: (a: T, b: T) => boolean): T;
 export declare function useRelationshipsBrowser(): {
+    actor: RelationshipsBrowserActorRef;
     getState: () => Readonly< Input & {
         closeable: boolean;
         enableNavigationMenu: boolean;
@@ -52,7 +53,6 @@ export declare function useRelationshipsBrowser(): {
             viewportInitialized: boolean;
         }) | null;
         xystore: XYStoreApi | null;
-        initialized: boolean;
         layouted: LayoutRelationshipsViewResult | null;
         navigateFromNode: string | null;
         xynodes: import("./_types").RelationshipsBrowserTypes.Node[];

package/dist/overlays/relationships-browser/hooks.js

@@ -1,7 +1,6 @@
 import { nonNullable } from "@likec4/core";
 import { useCallbackRef } from "@mantine/hooks";
 import { useSelector } from "@xstate/react";
-import "@xyflow/react";
 import { shallowEqual } from "fast-equals";
 import { createContext, useTransition, useMemo, useContext } from "react";
 const RelationshipsBrowserActorContext = createContext(null);
@@ -9,14 +8,14 @@ function useRelationshipsBrowserActor() {
   return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
 }
 function useRelationshipsBrowserState(selector, compare = shallowEqual) {
-  const select = useCallbackRef(selector);
   const actor = useRelationshipsBrowserActor();
-  return useSelector(actor, select, compare);
+  return useSelector(actor, useCallbackRef(selector), compare);
 }
 function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor();
   const [, startTransition] = useTransition();
   return useMemo(() => ({
+    actor,
     getState: () => actor.getSnapshot().context,
     send: actor.send,
     navigateTo: (subject, fromNode) => {
@@ -34,9 +33,12 @@ function useRelationshipsBrowser() {
       });
     },
     close: () => {
-      startTransition(() => {
+      var _a;
+      if (actor._parent) {
+        (_a = actor._parent) == null ? void 0 : _a.send({ type: "close", actorId: actor.id });
+      } else {
         actor.send({ type: "close" });
-      });
+      }
     }
   }), [actor]);
 }

package/dist/overlays/types.d.ts

@@ -0,0 +1,29 @@
+import { ActorRefFrom } from 'xstate';
+import { ElementDetailsLogic, Events as ElementDetailsEvents, Input as ElementDetailsInput } from './element-details/actor';
+import { Events as RelationshipDetailsEvents, Input as RelationshipDetailsInput, RelationshipDetailsLogic } from './relationship-details/actor';
+import { Events as RelationshipsBrowserEvents, Input as RelationshipsBrowserInput, RelationshipsBrowserLogic } from './relationships-browser/actor';
+export declare namespace Overlays {
+    namespace ElementDetails {
+        type Events = ElementDetailsEvents;
+        type Input = ElementDetailsInput;
+        type Logic = ElementDetailsLogic;
+        interface ActorRef extends ActorRefFrom<ElementDetailsLogic> {
+        }
+    }
+    namespace RelationshipDetails {
+        type Events = RelationshipDetailsEvents;
+        type Input = RelationshipDetailsInput;
+        interface Logic extends RelationshipDetailsLogic {
+        }
+        interface ActorRef extends ActorRefFrom<RelationshipDetailsLogic> {
+        }
+    }
+    namespace RelationshipsBrowser {
+        type Events = RelationshipsBrowserEvents;
+        type Input = RelationshipsBrowserInput;
+        interface Logic extends RelationshipsBrowserLogic {
+        }
+        interface ActorRef extends ActorRefFrom<RelationshipsBrowserLogic> {
+        }
+    }
+}

package/dist/{likec4diagram/DiagramActor.d.ts → state/DiagramActorProvider.d.ts}

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-import { Input } from './state/machine';
+import { Input } from './diagram-machine';
 type ActorContextInput = Omit<Input, 'xystore' | 'features'>;
-export declare function DiagramActor({ input, children }: PropsWithChildren<{
+export declare function DiagramActorProvider({ input, children }: PropsWithChildren<{
     input: ActorContextInput;
 }>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/state/DiagramActorProvider.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallbackRef } from "@mantine/hooks";
+import { useActorRef, useSelector } from "@xstate/react";
+import { useStoreApi } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+import { useEffect } from "react";
+import { useDiagramEventHandlersRef } from "../context/DiagramEventHandlers.js";
+import { useEnabledFeatures, DiagramFeatures } from "../context/DiagramFeatures.js";
+import { DiagramActorSafeContext } from "../hooks/safeContext.js";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
+import { diagramMachine } from "./diagram-machine.js";
+import { syncManualLayoutActorLogic } from "./syncManualLayoutActor.js";
+function DiagramActorProvider({ input, children }) {
+  const handlersRef = useDiagramEventHandlersRef();
+  const xystore = useStoreApi();
+  const actorRef = useActorRef(
+    diagramMachine.provide({
+      actions: {
+        "trigger:NavigateTo": (_, { viewId }) => {
+          var _a, _b;
+          (_b = (_a = handlersRef.current).onNavigateTo) == null ? void 0 : _b.call(_a, viewId);
+        },
+        "trigger:OnChange": (_, params) => {
+          var _a, _b;
+          (_b = (_a = handlersRef.current).onChange) == null ? void 0 : _b.call(_a, params);
+        },
+        "trigger:OpenSource": (_, params) => {
+          var _a, _b;
+          (_b = (_a = handlersRef.current).onOpenSource) == null ? void 0 : _b.call(_a, params);
+        }
+      },
+      actors: {
+        syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
+          actions: {
+            "trigger:OnChange": (_, params) => {
+              var _a, _b;
+              (_b = (_a = handlersRef.current).onChange) == null ? void 0 : _b.call(_a, params);
+            }
+          }
+        })
+      }
+    }),
+    {
+      id: `diagram:${input.view.id}`,
+      systemId: "diagram",
+      // ...inspector,
+      input: {
+        xystore,
+        ...input
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs(DiagramActorSafeContext, { value: actorRef, children: [
+    /* @__PURE__ */ jsx(SyncStore, { input, actorRef }),
+    /* @__PURE__ */ jsx(DiagramActorToggledFeatures, { actorRef, children })
+  ] });
+}
+const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs }, actorRef }) => {
+  const features = useEnabledFeatures();
+  useUpdateEffect(() => {
+    actorRef.send({ type: "update.inputs", inputs });
+  }, [actorRef, inputs]);
+  useEffect(() => {
+    actorRef.send({ type: "update.features", features });
+  }, [actorRef, features]);
+  useUpdateEffect(() => {
+    actorRef.send({ type: "update.view", view, xyedges, xynodes });
+  }, [actorRef, view, xyedges, xynodes]);
+  return null;
+};
+function DiagramActorToggledFeatures({ children, actorRef }) {
+  const toggledFeatures = useSelector(actorRef, useCallbackRef((s) => s.context.toggledFeatures), shallowEqual);
+  return /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children });
+}
+export {
+  DiagramActorProvider
+};

package/dist/{likec4diagram/state → state}/assign.d.ts

@@ -1,5 +1,5 @@
-import { Types } from '../types';
-import { ActionArg, DiagramContext } from './machine';
+import { Types } from '../likec4diagram/types';
+import { ActionArg, Context as DiagramContext } from './diagram-machine';
 export declare function lastClickedNode(params: {
     context: DiagramContext;
     event: {