@likec4/diagram 1.22.1 → 1.23.0

package/dist/{likec4diagram/state/machine.js → state/diagram-machine.js}

@@ -1,29 +1,17 @@
-import { nonNullable, invariant, nonexhaustive, getBBoxCenter, getParallelStepsPrefix, DiagramNode } from "@likec4/core";
+import { nonNullable, invariant, nonexhaustive, DiagramNode, getBBoxCenter, getParallelStepsPrefix } from "@likec4/core";
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { nodeToRect } from "@xyflow/system";
 import { hasAtLeast, prop, clamp, first } from "remeda";
-import { setup, assign, assertEvent, stopChild, cancel, raise, enqueueActions, spawnChild, sendTo, and, or } from "xstate";
-import { MinZoom } from "../../base/const.js";
-import { AllDisabled } from "../../context/DiagramFeatures.js";
-import { relationshipDetailsActor } from "../../overlays/relationship-details/actor.js";
-import { relationshipsBrowserActor } from "../../overlays/relationships-browser/actor.js";
-import { createLayoutConstraints } from "../useLayoutConstraints.js";
+import { setup, enqueueActions, assertEvent, stopChild, assign, sendTo, cancel, raise, spawnChild, and, or } from "xstate";
+import { MinZoom } from "../base/const.js";
+import { AllDisabled } from "../context/DiagramFeatures.js";
+import { createLayoutConstraints } from "../likec4diagram/useLayoutConstraints.js";
+import { overlaysActorLogic } from "../overlays/overlaysActor.js";
 import { getAligner, toNodeRect } from "./aligners.js";
 import { resetEdgeControlPoints, updateEdgeData, updateNodeData, updateNavigationHistory, mergeXYNodesEdges, navigateForward, navigateBack, unfocusNodesEdges, updateActiveWalkthrough, focusNodesEdges, lastClickedNode } from "./assign.js";
-import { hotkeyActor } from "./hotkeyActor.js";
-import { syncManualLayoutActor } from "./syncManualLayoutActor.js";
-import { focusedBounds } from "./utils.js";
-var DiagramContext;
-((DiagramContext2) => {
-  function findDiagramNode(ctx, xynodeId) {
-    return ctx.view.nodes.find((n) => n.id === xynodeId) ?? null;
-  }
-  DiagramContext2.findDiagramNode = findDiagramNode;
-  function findDiagramEdge(ctx, xyedgeId) {
-    return ctx.view.edges.find((e) => e.id === xyedgeId) ?? null;
-  }
-  DiagramContext2.findDiagramEdge = findDiagramEdge;
-})(DiagramContext || (DiagramContext = {}));
+import { hotkeyActorLogic } from "./hotkeyActor.js";
+import { syncManualLayoutActorLogic } from "./syncManualLayoutActor.js";
+import { typedSystem, focusedBounds } from "./utils.js";
 const diagramMachine = setup({
   types: {
     context: {},
@@ -32,10 +20,9 @@ const diagramMachine = setup({
     events: {}
   },
   actors: {
-    hotkeyActor,
-    syncManualLayoutActor,
-    relationshipsBrowserActor,
-    relationshipDetailsActor
+    syncManualLayoutActorLogic,
+    hotkeyActorLogic,
+    overlaysActorLogic
   },
   guards: {
     "enabled: FitView": ({ context }) => context.features.enableFitView,
@@ -144,13 +131,34 @@ const diagramMachine = setup({
         });
       });
     },
-    "updateFeatures": assign(({ event }) => {
+    "updateFeatures": enqueueActions(({ enqueue, system, event }) => {
       assertEvent(event, "update.features");
-      return {
-        features: {
-          ...event.features
-        }
-      };
+      const { features } = event;
+      enqueue.assign({
+        features: { ...features }
+      });
+      const enableOverlays = features.enableElementDetails || features.enableRelationshipDetails || features.enableRelationshipBrowser;
+      const hasRunning = typedSystem(system).overlaysActorRef;
+      if (enableOverlays && !hasRunning) {
+        enqueue.spawnChild("overlaysActorLogic", { id: "overlays", systemId: "overlays" });
+        return;
+      }
+      if (!enableOverlays && hasRunning) {
+        enqueue.stopChild("overlays");
+      }
+    }),
+    "closeAllOverlays": enqueueActions(({ system, enqueue }) => {
+      const overlays = typedSystem(system).overlaysActorRef;
+      if (overlays) {
+        enqueue.sendTo(overlays, { type: "close.all" });
+      }
+    }),
+    "stopSyncLayout": enqueueActions(({ context, enqueue }) => {
+      enqueue.sendTo(context.syncLayoutActorRef, { type: "stop" });
+      enqueue.stopChild(context.syncLayoutActorRef);
+      enqueue.assign({
+        syncLayoutActorRef: null
+      });
     })
   }
 }).createMachine({
@@ -174,7 +182,7 @@ const diagramMachine = setup({
     },
     viewport: { x: 0, y: 0, zoom: 1 },
     xyflow: null,
-    syncLayoutActorRef: spawn("syncManualLayoutActor", {
+    syncLayoutActorRef: spawn("syncManualLayoutActorLogic", {
       id: "syncLayout",
       input: { parent: self, viewId: input.view.id }
     }),
@@ -276,12 +284,25 @@ const diagramMachine = setup({
           ...focusNodesEdges(s),
           viewportBeforeFocus: { ...s.context.viewport }
         })),
-        spawnChild("hotkeyActor", { id: "hotkey" }),
+        spawnChild("hotkeyActorLogic", { id: "hotkey" }),
         {
           type: "xyflow:fitDiagram",
           params: focusedBounds
         }
       ],
+      exit: enqueueActions(({ enqueue, context }) => {
+        enqueue.stopChild("hotkey");
+        if (context.viewportBeforeFocus) {
+          enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
+        } else {
+          enqueue({ type: "xyflow:fitDiagram" });
+        }
+        enqueue.assign((s) => ({
+          ...unfocusNodesEdges(s),
+          viewportBeforeFocus: null,
+          focusedNode: null
+        }));
+      }),
       on: {
         "xyflow.nodeClick": [
           {
@@ -335,145 +356,7 @@ const diagramMachine = setup({
             nonexhaustive(event);
           })
         }
-      },
-      exit: [
-        stopChild("hotkey"),
-        enqueueActions(({ enqueue, context }) => {
-          if (context.viewportBeforeFocus) {
-            enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
-          } else {
-            enqueue({ type: "xyflow:fitDiagram" });
-          }
-          enqueue.assign((s) => ({
-            ...unfocusNodesEdges(s),
-            viewportBeforeFocus: null,
-            focusedNode: null
-          }));
-        })
-      ]
-    },
-    overlay: {
-      entry: spawnChild("hotkeyActor", { id: "hotkey" }),
-      initial: "hole",
-      states: {
-        hole: {
-          target: "#idle"
-        },
-        elementDetails: {
-          guard: ({ context }) => context.activeElementDetails !== null,
-          entry: assign({
-            activeElementDetails: ({ context }) => {
-              const fqn = context.activeElementDetails.fqn;
-              const fromNode = context.activeElementDetails.fromNode;
-              if (fromNode) {
-                const internalNode = nonNullable(
-                  context.xystore.getState().nodeLookup.get(fromNode),
-                  "XY Internal Node not found"
-                );
-                const nodeRect = nodeToRect(internalNode);
-                const zoom = context.xyflow.getZoom();
-                const nodeRectScreen = {
-                  ...context.xyflow.flowToScreenPosition(nodeRect),
-                  width: nodeRect.width * zoom,
-                  height: nodeRect.height * zoom
-                };
-                return { fqn, fromNode, nodeRect, nodeRectScreen };
-              } else {
-                return { fqn, fromNode };
-              }
-            }
-          }),
-          on: {
-            // Catch event and do nothing
-            "open.elementDetails": {
-              actions: assign({
-                activeElementDetails: ({ event, context }) => {
-                  var _a;
-                  return {
-                    ...context.activeElementDetails,
-                    fqn: event.fqn,
-                    fromNode: ((_a = context.activeElementDetails) == null ? void 0 : _a.fromNode) ?? null
-                  };
-                }
-              })
-            },
-            "close.overlay": {
-              target: "#idle"
-            },
-            "key.esc": {
-              target: "#idle"
-            }
-          },
-          exit: assign({
-            activeElementDetails: null
-          })
-        },
-        relationshipsBrowser: {
-          invoke: {
-            id: "relationshipsBrowser",
-            src: "relationshipsBrowserActor",
-            input: ({ context, event }) => {
-              assertEvent(event, "open.relationshipsBrowser");
-              return {
-                subject: event.fqn,
-                scope: context.view
-              };
-            },
-            onDone: {
-              target: "#idle"
-            }
-          },
-          on: {
-            "open.relationshipsBrowser": {
-              actions: sendTo("relationshipsBrowser", ({ event }) => ({
-                type: "navigate.to",
-                subject: event.fqn
-              }))
-            },
-            "close.overlay": {
-              actions: sendTo("relationshipsBrowser", { type: "close" })
-            },
-            "key.esc": {
-              actions: sendTo("relationshipsBrowser", { type: "close" })
-            }
-          }
-        },
-        relationshipDetails: {
-          invoke: {
-            id: "relationshipDetails",
-            src: "relationshipDetailsActor",
-            input: ({ event, context }) => {
-              assertEvent(event, "open.relationshipDetails");
-              return {
-                edgeId: event.edgeId,
-                view: context.view
-              };
-            },
-            onDone: {
-              target: "#idle"
-            }
-          },
-          on: {
-            "close.overlay": {
-              actions: sendTo("relationshipDetails", { type: "close" })
-            },
-            "key.esc": {
-              actions: sendTo("relationshipDetails", { type: "close" })
-            }
-          }
-        }
-      },
-      on: {
-        // We received another view, close overlay and process event again
-        "update.view": {
-          guard: "is another view",
-          actions: raise(({ event }) => event, { delay: 50 }),
-          target: "#idle"
-        }
-      },
-      exit: [
-        stopChild("hotkey")
-      ]
+      }
     },
     // Navigating to another view (after `navigateTo` event)
     navigating: {
@@ -482,8 +365,8 @@ const diagramMachine = setup({
       states: {
         pending: {
           entry: enqueueActions(({ enqueue }) => {
-            enqueue.sendTo((c) => c.context.syncLayoutActorRef, { type: "stop" });
-            enqueue.stopChild("syncLayout");
+            enqueue("closeAllOverlays");
+            enqueue("stopSyncLayout");
             enqueue({
               type: "trigger:NavigateTo",
               params: ({ context }) => ({
@@ -529,13 +412,17 @@ const diagramMachine = setup({
         target: "idle"
       },
       exit: assign({
-        syncLayoutActorRef: ({ self, context, spawn }) => spawn("syncManualLayoutActor", { id: "syncLayout", input: { parent: self, viewId: context.view.id } }),
+        syncLayoutActorRef: ({ self, context, spawn }) => spawn("syncManualLayoutActorLogic", {
+          id: "syncLayout",
+          systemId: "syncLayout",
+          input: { parent: self, viewId: context.view.id }
+        }),
         lastOnNavigate: null
       })
     },
     walkthrough: {
       entry: [
-        spawnChild("hotkeyActor", { id: "hotkey" }),
+        // spawnChild('hotkeyActor', { id: 'hotkey' }),
         assign({
           viewportBeforeFocus: ({ context }) => context.viewport,
           activeWalkthrough: ({ context, event }) => {
@@ -667,11 +554,14 @@ const diagramMachine = setup({
           const isAnotherView = check("is another view");
           if (isAnotherView) {
             const viewId = event.view.id;
-            enqueue.sendTo((c) => c.context.syncLayoutActorRef, { type: "stop" });
-            enqueue.stopChild("layout");
+            enqueue("closeAllOverlays");
+            enqueue("stopSyncLayout");
             enqueue.assign({
               focusedNode: null,
-              syncLayoutActorRef: ({ self, spawn }) => spawn("syncManualLayoutActor", { id: "syncLayout", input: { parent: self, viewId } })
+              syncLayoutActorRef: ({ self, spawn }) => spawn("syncManualLayoutActorLogic", {
+                id: "syncLayout",
+                input: { parent: self, viewId }
+              })
             });
             const { fromNode, toNode } = findCorrespondingNode(context, event);
             if (fromNode && toNode) {
@@ -740,23 +630,45 @@ const diagramMachine = setup({
       ]
     },
     "open.elementDetails": {
-      actions: assign({
-        activeElementDetails: ({ event, context }) => {
-          var _a;
-          return {
-            fqn: event.fqn,
-            fromNode: event.fromNode ?? ((_a = context.lastClickedNode) == null ? void 0 : _a.id) ?? null,
-            fromNodeScreenPosition: null
+      actions: enqueueActions(({ context, enqueue, system, event }) => {
+        var _a;
+        let initiatedFrom = null;
+        const fromNodeId = event.fromNode ?? ((_a = context.view.nodes.find((n) => DiagramNode.modelRef(n) === event.fqn)) == null ? void 0 : _a.id);
+        const internalNode = fromNodeId ? context.xystore.getState().nodeLookup.get(fromNodeId) : null;
+        if (fromNodeId && internalNode) {
+          const nodeRect = nodeToRect(internalNode);
+          const zoom = context.xyflow.getZoom();
+          const clientRect = {
+            ...context.xyflow.flowToScreenPosition(nodeRect),
+            width: nodeRect.width * zoom,
+            height: nodeRect.height * zoom
+          };
+          initiatedFrom = {
+            node: fromNodeId,
+            clientRect
           };
         }
-      }),
-      target: ".overlay.elementDetails"
-    },
-    "open.relationshipDetails": {
-      target: ".overlay.relationshipDetails"
+        enqueue.sendTo(typedSystem(system).overlaysActorRef, {
+          type: "open.elementDetails",
+          subject: event.fqn,
+          currentView: context.view,
+          ...initiatedFrom && { initiatedFrom }
+        });
+      })
     },
     "open.relationshipsBrowser": {
-      target: ".overlay.relationshipsBrowser"
+      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => ({
+        type: "open.relationshipsBrowser",
+        subject: event.fqn,
+        scope: context.view
+      }))
+    },
+    "open.relationshipDetails": {
+      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => ({
+        type: "open.relationshipDetails",
+        view: context.view,
+        edgeId: event.edgeId
+      }))
     },
     "open.source": {
       actions: {
@@ -778,7 +690,7 @@ const diagramMachine = setup({
     }
   },
   exit: [
-    stopChild("layout"),
+    "stopSyncLayout",
     stopChild("hotkey"),
     assign({
       xyflow: null,
@@ -798,6 +710,5 @@ function findCorrespondingNode(context, event) {
   return { fromNode, toNode };
 }
 export {
-  DiagramContext,
   diagramMachine
 };

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

@@ -2,4 +2,4 @@ import { AnyEventObject, NonReducibleUnknown, CallbackActorLogic } from 'xstate'
 export type HotKeyEvent = {
     type: 'key.esc' | `key.arrow.${'left' | 'right'}`;
 };
-export declare const hotkeyActor: CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent>;
+export declare const hotkeyActorLogic: CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent>;

package/dist/state/hotkeyActor.js

@@ -0,0 +1,26 @@
+import { getHotkeyHandler } from "@mantine/hooks";
+import { fromCallback } from "xstate";
+const hotkeyActorLogic = fromCallback(({ sendBack }) => {
+  const escHandler = getHotkeyHandler([
+    ["Escape", () => sendBack({ type: "key.esc" }), {
+      preventDefault: true
+    }]
+  ]);
+  const arrowshandler = getHotkeyHandler([
+    ["ArrowLeft", () => sendBack({ type: "key.arrow.left" }), {
+      preventDefault: true
+    }],
+    ["ArrowRight", () => sendBack({ type: "key.arrow.right" }), {
+      preventDefault: true
+    }]
+  ]);
+  document.body.addEventListener("keydown", escHandler);
+  document.body.addEventListener("keydown", arrowshandler, { capture: true });
+  return () => {
+    document.body.removeEventListener("keydown", escHandler);
+    document.body.removeEventListener("keydown", arrowshandler, { capture: true });
+  };
+});
+export {
+  hotkeyActorLogic
+};

package/dist/state/inspector.d.ts

@@ -0,0 +1,4 @@
+import { Observer, InspectionEvent } from 'xstate';
+export declare const inspector: {
+    inspect: Observer<InspectionEvent>;
+};

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

@@ -1,8 +1,8 @@
 import { ViewChange, ViewId } from '@likec4/core';
-import { ActorRef, ActorRefFromLogic, MachineSnapshot, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
-import type * as Machine from './machine';
+import { ActorLogicFrom, ActorRef, MachineSnapshot, StateMachine, NonReducibleUnknown, EventObject, MetaObject, ActorRefFromLogic, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
+import { Context as DiagramContext, Events as DiagramEvents } from './diagram-machine';
 export type Input = {
-    parent: ActorRef<MachineSnapshot<Machine.DiagramContext, Machine.Events, any, any, any, any, any, any>, Machine.Events, any>;
+    parent: ActorRef<MachineSnapshot<DiagramContext, DiagramEvents, any, any, any, any, any, any>, DiagramEvents, any>;
     viewId: ViewId;
 };
 export type Context = Readonly<Input & {}>;
@@ -15,7 +15,7 @@ export type Events = {
 } | {
     type: 'stop';
 };
-export declare const syncManualLayoutActor: StateMachine<Readonly<Input>, Events, {}, never, {
+export declare const syncManualLayoutActorLogic: StateMachine<Readonly<Input>, Events, {}, never, {
     type: "trigger:OnChange";
     params: {
         change: ViewChange;
@@ -23,7 +23,7 @@ export declare const syncManualLayoutActor: StateMachine<Readonly<Input>, Events
 }, {
     type: "same view";
     params: unknown;
-}, "timeout", "stopped" | "synced" | "pending" | "idle" | "paused", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
+}, "timeout", "paused" | "stopped" | "idle" | "synced" | "pending", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
     readonly initial: "idle";
     readonly context: ({ input }: {
         spawn: {
@@ -38,7 +38,7 @@ export declare const syncManualLayoutActor: StateMachine<Readonly<Input>, Events
         input: Input;
         self: ActorRef<MachineSnapshot<Readonly<Input>, Events, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
     }) => {
-        parent: ActorRef<MachineSnapshot<Machine.DiagramContext, Machine.Events, any, any, any, any, any, any>, Machine.Events, any>;
+        parent: ActorRef<MachineSnapshot<DiagramContext, DiagramEvents, any, any, any, any, any, any>, DiagramEvents, any>;
         viewId: ViewId;
     };
     readonly states: {
@@ -109,5 +109,4 @@ export declare const syncManualLayoutActor: StateMachine<Readonly<Input>, Events
         };
     };
 }>;
-export type SyncLayoutActorRef = ActorRefFromLogic<typeof syncManualLayoutActor>;
-export type SyncLayoutActorSnapshot = SnapshotFrom<typeof syncManualLayoutActor>;
+export type SyncLayoutActorLogic = ActorLogicFrom<typeof syncManualLayoutActorLogic>;

package/dist/{likec4diagram/state → state}/syncManualLayoutActor.js

@@ -1,8 +1,8 @@
 import { getNodeDimensions, getBoundsOfRects, boxToRect } from "@xyflow/system";
 import { reduce, hasAtLeast } from "remeda";
 import { setup, assign } from "xstate";
-import { isSamePoint, bezierControlPoints } from "../../utils/xyflow.js";
-const syncManualLayoutActor = setup({
+import { isSamePoint, bezierControlPoints } from "../utils/xyflow.js";
+const syncManualLayoutActorLogic = setup({
   types: {
     context: {},
     input: {},
@@ -23,8 +23,6 @@ const syncManualLayoutActor = setup({
   initial: "idle",
   context: ({ input }) => ({
     ...input
-    // parent: input.parent,
-    // viewId: input.parent.getSnapshot().context.view.id,
   }),
   states: {
     idle: {
@@ -170,5 +168,5 @@ function createViewChange(parentContext) {
   };
 }
 export {
-  syncManualLayoutActor
+  syncManualLayoutActorLogic
 };

package/dist/state/types.d.ts

@@ -0,0 +1,19 @@
+import { ActorRefFromLogic, ActorSystem, SnapshotFrom } from 'xstate';
+import { OverlaysActorRef } from '../overlays/overlaysActor';
+import { DiagramMachineLogic } from './diagram-machine';
+import { SyncLayoutActorLogic } from './syncManualLayoutActor';
+export type System = ActorSystem<{
+    actors: {
+        diagram: DiagramActorRef;
+        overlays: OverlaysActorRef;
+    };
+}>;
+export type DiagramActorRef = Omit<ActorRefFromLogic<DiagramMachineLogic>, 'system'> & {
+    system: System;
+};
+export type DiagramActorSnapshot = SnapshotFrom<DiagramMachineLogic>;
+export type { Context as DiagramContext } from './diagram-machine';
+export type SyncLayoutActorRef = Omit<ActorRefFromLogic<SyncLayoutActorLogic>, 'system'> & {
+    system: System;
+};
+export type SyncLayoutActorSnapshot = SnapshotFrom<SyncLayoutActorLogic>;

package/dist/state/utils.d.ts

@@ -0,0 +1,17 @@
+import { BBox, DiagramNode, DiagramEdge } from '@likec4/core';
+import { ActorSystem } from 'xstate';
+import { OverlaysActorRef } from '../overlays/overlaysActor';
+import { Context } from './diagram-machine';
+import { DiagramActorRef } from './types';
+export declare function typedSystem(system: ActorSystem<any>): {
+    readonly overlaysActorRef: OverlaysActorRef | null;
+    readonly diagramActorRef: DiagramActorRef | null;
+};
+export declare function findDiagramNode(ctx: Context, xynodeId: string): DiagramNode | null;
+export declare function findDiagramEdge(ctx: Context, xyedgeId: string): DiagramEdge | null;
+export declare function focusedBounds(params: {
+    context: Context;
+}): {
+    bounds: BBox;
+    duration?: number;
+};

package/dist/{likec4diagram/state → state}/utils.js

@@ -1,3 +1,19 @@
+function typedSystem(system) {
+  return {
+    get overlaysActorRef() {
+      return system.get("overlays") ?? null;
+    },
+    get diagramActorRef() {
+      return system.get("diagram") ?? null;
+    }
+  };
+}
+function findDiagramNode(ctx, xynodeId) {
+  return ctx.view.nodes.find((n) => n.id === xynodeId) ?? null;
+}
+function findDiagramEdge(ctx, xyedgeId) {
+  return ctx.view.edges.find((e) => e.id === xyedgeId) ?? null;
+}
 function focusedBounds(params) {
   const knownAbsolutes = /* @__PURE__ */ new Map();
   const b = params.context.xynodes.reduce((acc, node) => {
@@ -44,5 +60,8 @@ function focusedBounds(params) {
   };
 }
 export {
-  focusedBounds
+  findDiagramEdge,
+  findDiagramNode,
+  focusedBounds,
+  typedSystem
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.22.1",
+  "version": "1.23.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -29,18 +29,9 @@
     },
     "./style.css": "./dist/style.css"
   },
-  "packageManager": "yarn@4.6.0",
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "build": "vite build",
-    "lint": "run -T eslint src/ --fix",
-    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
-    "test": "vitest run --no-isolate"
-  },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@likec4/core": "1.22.1",
-    "@mantine/vanilla-extract": "7.16.3",
+    "@mantine/vanilla-extract": "7.17.0",
     "@nanostores/react": "0.8.4",
     "@react-hookz/web": "^25.0.1",
     "@tabler/icons-react": "3.29.0",
@@ -59,18 +50,16 @@
     "react-error-boundary": "^5.0.0",
     "remeda": "^2.20.1",
     "type-fest": "4.34.1",
-    "xstate": "^5.19.2"
+    "xstate": "^5.19.2",
+    "@likec4/core": "1.23.0"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.16.3",
-    "@mantine/hooks": "^7.16.3",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "@mantine/core": "7.17.0",
+    "@mantine/hooks": "7.17.0",
+    "react": "~19.0.0",
+    "react-dom": "~19.0.0"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.22.1",
-    "@mantine/core": "7.16.3",
-    "@mantine/hooks": "7.16.3",
     "@statelyai/inspect": "^0.4.0",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.7",
@@ -78,12 +67,19 @@
     "@types/react-dom": "~19.0.3",
     "@vanilla-extract/css": "^1.17.1",
     "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/vite-plugin": "^5.0.1",
     "@vitejs/plugin-react": "4.3.4",
-    "react": "~19.0.0",
-    "react-dom": "~19.0.0",
-    "typescript": "^5.7.3",
-    "vite": "5.4.14",
+    "typescript": "5.7.3",
+    "vite": "6.1.0",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.0.4"
+    "vitest": "^3.0.4",
+    "@likec4/tsconfig": "1.23.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
+    "lint": "run -T eslint src/ --fix",
+    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
+    "test": "vitest run --no-isolate"
   }
 }