@likec4/diagram 1.6.1 → 1.7.0

package/dist/index.mjs

@@ -2,26 +2,26 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useReactFlow, useStoreApi, useNodesData, useStore, getViewportForBounds, EdgeLabelRenderer, Handle, Position, useOnViewportChange, ReactFlow, useOnSelectionChange, Background, BackgroundVariant, Controls, ReactFlowProvider } from "@xyflow/react";
+import { useReactFlow, useStoreApi, useNodesData, useStore, applyNodeChanges, applyEdgeChanges, getViewportForBounds, EdgeLabelRenderer, Handle, Position, useOnViewportChange, ReactFlow, useOnSelectionChange, Background, BackgroundVariant, Controls, ReactFlowProvider } from "@xyflow/react";
 import clsx from "clsx";
 import { shallowEqual, deepEqual } from "fast-equals";
 import { m, AnimatePresence, LazyMotion, domAnimation } from "framer-motion";
-import { useContext, useState, useCallback, createContext, useRef, useEffect, useMemo, memo, useId } from "react";
+import { useContext, useState, useCallback, createContext, useRef, useEffect, memo, useMemo, useId } from "react";
 import { MantineContext, Box, ActionIcon, Text as Text$1, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Stack, Group, Anchor, CopyButton, Button, Card, CardSection, Spoiler, ButtonGroup, rem, Divider, Space, TooltipGroup, Flex, Tooltip, ColorSwatch, CheckIcon, Select, Slider, SegmentedControl } from "@mantine/core";
-import { isArray, entries, reduce, isEmpty, pickBy, isNonNullish, hasSubObject, hasAtLeast as hasAtLeast$1, omit, isTruthy, first, last, isNullish, clamp, isNumber, keys, takeWhile, isNonNull } from "remeda";
-import { invariant, hasAtLeast, StepEdgeId, nonexhaustive, extractStep, nonNullable, isAncestor, defaultTheme, ElementShapes } from "@likec4/core";
-import { getNodeDimensions, nodeToRect, getBoundsOfRects, getViewportForBounds as getViewportForBounds$1 } from "@xyflow/system";
+import { invariant, hasAtLeast, extractStep, nonNullable, StepEdgeId, getBBoxCenter, nonexhaustive, isAncestor, defaultTheme, ElementShapes } from "@likec4/core";
+import { getNodeDimensions, getBoundsOfRects, boxToRect, nodeToRect, getViewportForBounds as getViewportForBounds$1 } from "@xyflow/system";
 import { DEV } from "esm-env";
+import { isArray, hasAtLeast as hasAtLeast$1, isNullish, entries, reduce, isTruthy, first, last, clamp, isNumber, isNonNullish, keys, takeWhile } from "remeda";
 import { subscribeWithSelector, devtools } from "zustand/middleware";
 import { shallow } from "zustand/shallow";
 import { createWithEqualityFn, useStoreWithEqualityFn } from "zustand/traditional";
 import { Bezier } from "bezier-js";
-import { useFirstMountState, useCustomCompareEffect, useDebouncedEffect, useIsomorphicLayoutEffect } from "@react-hookz/web";
+import { useFirstMountState, useCustomCompareEffect, useDebouncedEffect } from "@react-hookz/web";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { line, curveCatmullRomOpen } from "d3-shape";
 import { Solver, Operator, Expression, Strength, Variable } from "@lume/kiwi";
 import { IconZoomScan, IconLink, IconChevronLeft, IconChevronRight, IconMenu, IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from "@tabler/icons-react";
-import { useStateHistory, useLocalStorage, useHotkeys } from "@mantine/hooks";
+import { useLocalStorage, useHotkeys } from "@mantine/hooks";
 var rootClassName = "likec4-diagram-root", cssReactFlow = "_2h8g8h0", cssDisablePan = "_2h8g8h1", cssTransparentBg = "_2h8g8h2", cssNoControls = "_2h8g8h3";
 function EnsureMantine({ children }) {
   if (!useContext(MantineContext))
@@ -42,13 +42,22 @@ function useSetState(initialState) {
   return [state, setState];
 }
 const noop = () => {
+}, depsShallowEqual = (d1, d2) => {
+  if (d1 === d2)
+    return !0;
+  if (d1.length !== d2.length)
+    return !1;
+  for (const [i, element] of d1.entries())
+    if (!shallowEqual(element, d2[i]))
+      return !1;
+  return !0;
 };
 function useUpdateEffect(callback, deps, equalityFn, effectHook) {
   const isFirstMount = useFirstMountState();
   useCustomCompareEffect(
     isFirstMount ? noop : callback,
     deps,
-    equalityFn ?? shallowEqual,
+    equalityFn ?? depsShallowEqual,
     effectHook
   );
 }
@@ -91,11 +100,79 @@ function isSamePoint$1(a, b) {
   const [ax, ay] = isArray(a) ? a : [a.x, a.y], [bx, by] = isArray(b) ? b : [b.x, b.y];
   return isClose(ax, bx) && isClose(ay, by);
 }
+function diagramViewToXYFlowData(view, opts) {
+  const isDynamicView = view.__ === "dynamic", xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map(), traverse = view.nodes.reduce(
+    (acc, node) => (nodeLookup.set(node.id, node), node.parent || acc.push({ node, parent: null }), acc),
+    new Array()
+  ), ns = "", nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
+  let next;
+  for (; next = traverse.shift(); ) {
+    const { node, parent } = next;
+    node.children.length > 0 && traverse.push(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
+    const isCompound = hasAtLeast$1(node.children, 1), position = {
+      x: node.position[0],
+      y: node.position[1]
+    };
+    parent && (position.x -= parent.position[0], position.y -= parent.position[1]);
+    const id = ns + node.id, draggable = opts.draggable && (!parent || parent.children.length > 1);
+    xynodes.push({
+      id,
+      type: isCompound ? "compound" : "element",
+      data: {
+        fqn: node.id,
+        element: node
+      },
+      draggable,
+      selectable: opts.selectable,
+      deletable: !1,
+      position,
+      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+      hidden: !1,
+      width: node.width,
+      height: node.height,
+      // parentId: parent ? ns + parent.id : null,
+      ...parent && {
+        parentId: ns + parent.id
+      },
+      ...isCompound && {
+        dragHandle: ".likec4-compound-title"
+      }
+    });
+  }
+  for (const edge of view.edges) {
+    const source = edge.source, target = edge.target, id = ns + edge.id;
+    invariant(hasAtLeast$1(edge.points, 2), "edge should have at least 2 points"), xyedges.push({
+      id,
+      type: "relationship",
+      source: ns + source,
+      target: ns + target,
+      zIndex: ZIndexes.Edge,
+      selectable: opts.selectable,
+      deletable: !1,
+      data: {
+        edge,
+        controlPoints: edge.controlPoints || null,
+        stepNum: isDynamicView ? extractStep(edge.id) : null,
+        label: edge.labelBBox ? {
+          bbox: edge.labelBBox,
+          text: edge.label ?? ""
+        } : null
+      },
+      interactionWidth: 20
+    });
+  }
+  return {
+    xynodes,
+    xyedges
+  };
+}
 const StringSet = Set, DEFAULT_PROPS = {
+  xyedges: [],
+  xynodes: [],
+  isDynamicView: !1,
   viewSyncDebounceTimeout: null,
   initialized: !1,
-  xyflowSynced: !1,
-  previousViews: [],
+  navigationHistoryIndex: 0,
   viewportChanged: !1,
   activeDynamicViewStep: null,
   focusedNodeId: null,
@@ -104,47 +181,63 @@ const StringSet = Set, DEFAULT_PROPS = {
   lastClickedNodeId: null,
   lastClickedEdgeId: null,
   dimmed: new StringSet(),
-  lastOnNavigate: null,
-  onChange: null,
-  onNavigateTo: null,
-  onNodeClick: null,
-  onNodeContextMenu: null,
-  onCanvasContextMenu: null,
-  onEdgeClick: null,
-  onEdgeContextMenu: null,
-  onCanvasClick: null,
-  onCanvasDblClick: null
+  lastOnNavigate: null
 }, noReplace = !1;
 let StoreDevId = 1;
 const EmptyStringSet = new StringSet();
 function createDiagramStore(props) {
-  const storeDevId = "DiagramStore" + String(StoreDevId++).padStart(2, "0");
+  const storeDevId = "DiagramStore" + String(StoreDevId++).padStart(2, "0"), {
+    xynodes,
+    xyedges
+  } = diagramViewToXYFlowData(props.view, {
+    draggable: props.nodesDraggable,
+    selectable: props.nodesSelectable
+  });
   return createWithEqualityFn(
     subscribeWithSelector(
       devtools(
         (set, get) => ({
-          storeDevId,
           ...DEFAULT_PROPS,
           ...props,
-          isDynamicView: () => {
-            var _a;
-            return ((_a = get().view) == null ? void 0 : _a.__) === "dynamic";
+          storeDevId,
+          isDynamicView: props.view.__ === "dynamic",
+          xynodes,
+          xyedges,
+          navigationHistory: [{
+            viewId: props.view.id,
+            nodeId: null
+          }],
+          navigationHistoryIndex: 0,
+          onNodesChange: (changes) => {
+            set({
+              xynodes: applyNodeChanges(changes, get().xynodes)
+            });
+          },
+          onEdgesChange: (changes) => {
+            set({
+              xyedges: applyEdgeChanges(changes, get().xyedges)
+            });
           },
           updateView: (nextView) => {
             let {
               viewSyncDebounceTimeout,
               xyflow,
+              xystore,
               dimmed: dimmed2,
-              xyflowSynced,
               view: current,
               lastOnNavigate,
-              previousViews,
+              navigationHistory,
+              navigationHistoryIndex,
               focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
               activeDynamicViewStep,
+              nodesDraggable,
+              nodesSelectable,
               hoveredEdgeId,
-              hoveredNodeId
+              hoveredNodeId,
+              xyedges: xyedges2,
+              xynodes: xynodes2
             } = get();
             if (shallowEqual(current, nextView)) {
               DEV && console.debug("store: skip updateView");
@@ -154,42 +247,90 @@ function createDiagramStore(props) {
             const isSameView = current.id === nextView.id;
             if (isSameView) {
               const nodeIds = new StringSet(nextView.nodes.map((n) => n.id)), edgeIds = new StringSet(nextView.edges.map((e) => e.id));
-              if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId) && (lastClickedNodeId = null), hoveredNodeId && !nodeIds.has(hoveredNodeId) && (hoveredNodeId = null), focusedNodeId && !nodeIds.has(focusedNodeId) && (focusedNodeId = null), lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !edgeIds.has(hoveredEdgeId) && (hoveredEdgeId = null), activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep)) && (activeDynamicViewStep = null), xyflowSynced = deepEqual([current.nodes, current.edges], [nextView.nodes, nextView.edges]), dimmed2.size > 0) {
+              if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId) && (lastClickedNodeId = null), hoveredNodeId && !nodeIds.has(hoveredNodeId) && (hoveredNodeId = null), focusedNodeId && !nodeIds.has(focusedNodeId) && (focusedNodeId = null), lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !edgeIds.has(hoveredEdgeId) && (hoveredEdgeId = null), activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep)) && (activeDynamicViewStep = null), dimmed2.size > 0) {
                 let nextDimmed = new StringSet([...dimmed2].filter((id) => nodeIds.has(id) || edgeIds.has(id)));
                 nextDimmed.size !== dimmed2.size && (dimmed2 = nextDimmed);
               }
             } else {
-              if (lastOnNavigate && lastOnNavigate.toView !== nextView.id && lastOnNavigate.fromView !== nextView.id && (lastOnNavigate = null), !lastOnNavigate) {
-                const zoom = xyflow.getZoom();
-                xyflow.setCenter(nextView.width / 2, nextView.height / 2, { zoom });
+              const stepCurrent = nonNullable(navigationHistory[navigationHistoryIndex]);
+              stepCurrent.viewId !== nextView.id ? (navigationHistory = [
+                ...navigationHistory.slice(0, navigationHistoryIndex + 1),
+                {
+                  viewId: nextView.id,
+                  nodeId: (lastOnNavigate == null ? void 0 : lastOnNavigate.fromNode) || null
+                }
+              ], navigationHistoryIndex = navigationHistory.length - 1) : stepCurrent.nodeId && (lastOnNavigate ?? (lastOnNavigate = {
+                fromView: current.id,
+                toView: nextView.id,
+                fromNode: stepCurrent.nodeId
+              })), lastOnNavigate && lastOnNavigate.toView !== nextView.id && (lastOnNavigate = null);
+              const elTo = lastOnNavigate && nextView.nodes.find((n) => n.id === (lastOnNavigate == null ? void 0 : lastOnNavigate.fromNode)), xynodeFrom = elTo && xyflow.getInternalNode(elTo.id);
+              if (!lastOnNavigate || isNullish(elTo) || isNullish(xynodeFrom)) {
+                const zoom = xyflow.getZoom(), { x, y } = getBBoxCenter(nextView.bounds);
+                xyflow.setCenter(x, y, { zoom }), lastOnNavigate = null;
+              }
+              if (lastOnNavigate && elTo && xynodeFrom) {
+                const fromPos = xyflow.flowToScreenPosition({
+                  x: xynodeFrom.internals.positionAbsolute.x,
+                  // + dimensions.width / 2,
+                  y: xynodeFrom.internals.positionAbsolute.y
+                  // + dimensions.height / 2
+                }), toPos = xyflow.flowToScreenPosition({
+                  x: elTo.position[0],
+                  // + elFrom.width / 2,
+                  y: elTo.position[1]
+                  // + elFrom.height / 2
+                }), diff = {
+                  x: toDomPrecision(fromPos.x - toPos.x),
+                  y: toDomPrecision(fromPos.y - toPos.y)
+                };
+                xystore.getState().panBy(diff), lastOnNavigate = null;
               }
-              lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, focusedNodeId = null, activeDynamicViewStep = null, dimmed2 = EmptyStringSet, previousViews = [
-                current,
-                ...previousViews.filter((v) => v.id !== nextView.id && v.id !== current.id)
-              ], xyflowSynced = !1;
+              lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, focusedNodeId = null, activeDynamicViewStep = null, dimmed2 = EmptyStringSet;
             }
+            const update = diagramViewToXYFlowData(nextView, {
+              draggable: nodesDraggable,
+              selectable: nodesSelectable
+            });
+            update.xynodes = update.xynodes.map((update2) => {
+              const existing = xynodes2.find((n) => n.id === update2.id);
+              return existing && existing.type === update2.type && deepEqual(existing.parentId ?? null, update2.parentId ?? null) ? deepEqual(existing.data.element, update2.data.element) ? existing : {
+                ...existing,
+                ...update2
+              } : update2;
+            }), isSameView && !nextView.hasLayoutDrift && (update.xyedges = update.xyedges.map((update2) => {
+              const existing = xyedges2.find((n) => n.id === update2.id);
+              return existing ? deepEqual(existing.data, update2.data) ? existing : {
+                ...existing,
+                ...update2
+              } : update2;
+            }));
+            const hasChanges = !isSameView || !shallowEqual(update.xynodes, xynodes2) || !shallowEqual(update.xyedges, xyedges2);
             set(
               {
+                isDynamicView: nextView.__ === "dynamic",
                 viewSyncDebounceTimeout,
                 view: nextView,
                 activeDynamicViewStep,
-                xyflowSynced,
                 lastOnNavigate,
-                previousViews,
                 lastClickedNodeId,
                 lastClickedEdgeId,
                 focusedNodeId,
                 hoveredEdgeId,
                 hoveredNodeId,
-                dimmed: dimmed2
+                navigationHistory,
+                navigationHistoryIndex,
+                dimmed: dimmed2,
+                xynodes: hasChanges ? update.xynodes : xynodes2,
+                xyedges: hasChanges ? update.xyedges : xyedges2
               },
               noReplace,
               isSameView ? "update-view [same]" : "update-view [another]"
             );
           },
           focusOnNode: (nodeId) => {
-            const { focusedNodeId, view } = get();
-            if (nodeId !== focusedNodeId) {
+            const { focusedNodeId, view, enableFocusMode } = get();
+            if (invariant(enableFocusMode, "focus mode is not enabled"), nodeId !== focusedNodeId) {
               const notDimmed = new StringSet([nodeId]), dimmed2 = new StringSet();
               for (const edge of view.edges)
                 edge.source === nodeId || edge.target === nodeId ? (notDimmed.add(edge.source), notDimmed.add(edge.target)) : dimmed2.add(edge.id);
@@ -294,87 +435,139 @@ function createDiagramStore(props) {
           },
           cancelSaveManualLayout: () => {
             let { viewSyncDebounceTimeout } = get();
-            viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), set({ viewSyncDebounceTimeout: null }));
+            return viewSyncDebounceTimeout !== null ? (clearTimeout(viewSyncDebounceTimeout), set({ viewSyncDebounceTimeout: null }), !0) : !1;
           },
           triggerSaveManualLayout: () => {
-            let { viewSyncDebounceTimeout: debounced, onChange } = get();
-            if (!onChange) {
+            const { xyflow, view, onChange, xystore, viewSyncDebounceTimeout } = get();
+            if (viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), set({ viewSyncDebounceTimeout: null })), !onChange) {
               DEV && console.debug("ignore triggerSaveManualLayout, as no onChange handler is set");
               return;
             }
-            debounced && clearTimeout(debounced), debounced = setTimeout(() => {
-              const { xyflow, onChange: onChange2, xystore } = get(), { nodeLookup } = xystore.getState();
-              set({ viewSyncDebounceTimeout: null });
-              const movedNodes = new StringSet(), nodes = reduce([...nodeLookup.values()], (acc, node) => {
-                const dimensions = getNodeDimensions(node);
-                return isSamePoint$1(node.internals.positionAbsolute, node.data.element.position) || movedNodes.add(node.id), acc[node.data.fqn] = {
-                  x: node.internals.positionAbsolute.x,
-                  y: node.internals.positionAbsolute.y,
-                  width: dimensions.width,
-                  height: dimensions.height
-                }, acc;
-              }, {}), edges = reduce(xyflow.getEdges(), (acc, { source, target, data }) => {
-                let controlPoints = data.controlPoints;
-                return !controlPoints && (movedNodes.has(source) || movedNodes.has(target)) && (controlPoints = bezierControlPoints(data.edge)), controlPoints && (acc[data.edge.id] = {
-                  controlPoints
-                }), acc;
-              }, {});
-              if (movedNodes.size === 0 && isEmpty(edges)) {
-                DEV && console.debug("ignore triggerSaveManualLayout, as no changes detected");
-                return;
-              }
-              const change = {
-                op: "save-manual-layout",
-                nodes,
-                edges
+            const { nodeLookup } = xystore.getState(), movedNodes = new StringSet();
+            let bounds = {
+              x: 0,
+              y: 0,
+              width: 1,
+              height: 1
+            };
+            const nodes = reduce([...nodeLookup.values()], (acc, node) => {
+              const dimensions = getNodeDimensions(node);
+              isSamePoint$1(node.internals.positionAbsolute, node.data.element.position) || movedNodes.add(node.id);
+              const rect = acc[node.data.fqn] = {
+                isCompound: node.data.element.children.length > 0,
+                x: Math.floor(node.internals.positionAbsolute.x),
+                y: Math.floor(node.internals.positionAbsolute.y),
+                width: Math.ceil(dimensions.width),
+                height: Math.ceil(dimensions.height)
+              };
+              return bounds = getBoundsOfRects(bounds, rect), acc;
+            }, {}), edges = reduce(xyflow.getEdges(), (acc, { source, target, data }) => {
+              var _a, _b;
+              let controlPoints = data.controlPoints;
+              const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target);
+              if ((!controlPoints || controlPoints.length === 0) && sourceOrTargetMoved && (controlPoints = bezierControlPoints(data.edge)), data.edge.points.length === 0 && (!controlPoints || controlPoints.length === 0))
+                return acc;
+              const _updated = acc[data.edge.id] = {
+                points: data.edge.points
               };
-              DEV && console.debug("triggerSaveManualLayout", change), onChange2 == null || onChange2({ change });
-            }, 2e3), set(
+              (_a = data.label) != null && _a.bbox && (_updated.labelBBox = (_b = data.label) == null ? void 0 : _b.bbox), data.edge.labelBBox && (_updated.labelBBox ?? (_updated.labelBBox = data.edge.labelBBox)), controlPoints && hasAtLeast$1(controlPoints, 1) && (_updated.controlPoints = controlPoints), !sourceOrTargetMoved && data.edge.dotpos && (_updated.dotpos = data.edge.dotpos);
+              const allX = [...data.edge.points.map((p) => p[0]), ...(controlPoints ?? []).map((p) => p.x)], allY = [...data.edge.points.map((p) => p[1]), ...(controlPoints ?? []).map((p) => p.y)], rect = boxToRect({
+                x: Math.floor(Math.min(...allX)),
+                y: Math.floor(Math.min(...allY)),
+                x2: Math.ceil(Math.max(...allX)),
+                y2: Math.ceil(Math.max(...allY))
+              });
+              return bounds = getBoundsOfRects(bounds, rect), acc;
+            }, {}), change = {
+              op: "save-manual-layout",
+              layout: {
+                hash: view.hash,
+                autoLayout: view.autoLayout,
+                nodes,
+                edges,
+                ...bounds
+              }
+            };
+            DEV && console.debug("triggerSaveManualLayout", change), onChange({ change });
+          },
+          scheduleSaveManualLayout: () => {
+            let { viewSyncDebounceTimeout, onChange } = get();
+            if (!onChange) {
+              DEV && console.debug("ignore triggerSaveManualLayout, as no onChange handler is set");
+              return;
+            }
+            viewSyncDebounceTimeout && clearTimeout(viewSyncDebounceTimeout), set(
               {
-                viewSyncDebounceTimeout: debounced
+                viewSyncDebounceTimeout: setTimeout(() => {
+                  get().triggerSaveManualLayout();
+                }, 1e3)
+                // explicit typecast to number to suppress TS error in astro build
               },
               noReplace,
               "debounce sync state"
             );
           },
           triggerOnNavigateTo: (xynodeId, event) => {
-            var _a, _b;
-            const { xyflow, view } = get(), xynode = xyflow.getInternalNode(xynodeId);
-            invariant(!!xynode, `node not found: ${xynodeId}`);
-            const element = xynode.data.element;
-            invariant(element.navigateTo, `node is not navigable: ${xynodeId}`), set(
+            const { view, xynodes: xynodes2, onNavigateTo } = get();
+            if (!onNavigateTo)
+              return;
+            const xynode = xynodes2.find(({ id }) => id === xynodeId);
+            invariant(xynode, `xynode not found: ${xynodeId}`);
+            const element = view.nodes.find(({ id }) => id === xynodeId);
+            invariant(element == null ? void 0 : element.navigateTo, `node is not navigable: ${xynodeId}`), set(
               {
                 lastClickedNodeId: xynodeId,
                 lastOnNavigate: {
                   fromView: view.id,
                   toView: element.navigateTo,
-                  element,
-                  elementScreenPosition: xyflow.flowToScreenPosition({
-                    x: xynode.internals.positionAbsolute.x,
-                    // + dimensions.width / 2,
-                    y: xynode.internals.positionAbsolute.y
-                    // + dimensions.height / 2
-                  }),
-                  positionCorrected: !1
+                  fromNode: element.id
                 }
               },
               noReplace,
               "triggerOnNavigateTo"
-            ), (_b = (_a = get()).onNavigateTo) == null || _b.call(
-              _a,
+            ), onNavigateTo(
               element.navigateTo,
               event,
               element,
-              xynode.internals.userNode
+              xynode
             );
           },
+          goBack: () => {
+            const { navigationHistory, navigationHistoryIndex, onNavigateTo } = get(), { viewId, nodeId } = nonNullable(navigationHistory[navigationHistoryIndex]), stepBack = navigationHistoryIndex > 0 && navigationHistory[navigationHistoryIndex - 1] || null;
+            stepBack && onNavigateTo && (set(
+              {
+                lastClickedEdgeId: null,
+                lastClickedNodeId: null,
+                navigationHistoryIndex: navigationHistoryIndex - 1,
+                lastOnNavigate: nodeId ? {
+                  fromView: viewId,
+                  toView: stepBack.viewId,
+                  fromNode: nodeId
+                } : null
+              },
+              noReplace,
+              "goBack"
+            ), onNavigateTo(stepBack.viewId));
+          },
+          goForward: () => {
+            const { navigationHistory, navigationHistoryIndex, onNavigateTo } = get(), { viewId } = nonNullable(navigationHistory[navigationHistoryIndex]), stepForward = navigationHistoryIndex < navigationHistory.length - 1 ? navigationHistory[navigationHistoryIndex + 1] : null;
+            stepForward && onNavigateTo && (set(
+              {
+                lastClickedEdgeId: null,
+                lastClickedNodeId: null,
+                navigationHistoryIndex: navigationHistoryIndex + 1,
+                lastOnNavigate: stepForward.nodeId ? {
+                  fromView: viewId,
+                  toView: stepForward.viewId,
+                  fromNode: stepForward.nodeId
+                } : null
+              },
+              noReplace,
+              "goForward"
+            ), onNavigateTo(stepForward.viewId));
+          },
           fitDiagram: (duration = 500) => {
-            const { fitViewPadding, view, focusedNodeId, activeDynamicViewStep, xystore } = get(), { width, height, panZoom, transform } = xystore.getState(), bounds = {
-              x: 0,
-              y: 0,
-              width: view.width,
-              height: view.height
-            }, maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, fitViewPadding);
+            const { fitViewPadding, view, focusedNodeId, activeDynamicViewStep, xystore } = get(), { width, height, panZoom, transform } = xystore.getState(), bounds = view.bounds, maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, fitViewPadding);
             panZoom == null || panZoom.setViewport(viewport, { duration }), (focusedNodeId ?? activeDynamicViewStep) !== null && set(
               {
                 activeDynamicViewStep: null,
@@ -386,11 +579,12 @@ function createDiagramStore(props) {
             );
           },
           nextDynamicStep: (increment = 1) => {
-            const { view, activeDynamicViewStep, xyflow, xystore, fitViewPadding } = get();
-            invariant(view.__ === "dynamic", "view is not dynamic");
-            const nextStep = (activeDynamicViewStep ?? 0) + increment;
-            if (nextStep <= 0 || nextStep > view.edges.length)
-              return;
+            const { activeDynamicViewStep, activateDynamicStep } = get(), nextStep = (activeDynamicViewStep ?? 0) + increment;
+            nextStep <= 0 || nextStep !== activeDynamicViewStep && activateDynamicStep(nextStep);
+          },
+          activateDynamicStep: (nextStep) => {
+            const { isDynamicView, xyflow, xystore, fitViewPadding } = get();
+            invariant(isDynamicView, "view is not dynamic");
             const edgeId = StepEdgeId(nextStep), dimmed2 = new StringSet();
             let edge = null;
             for (const e of xyflow.getEdges()) {
@@ -424,7 +618,7 @@ function createDiagramStore(props) {
                 dimmed: dimmed2
               },
               noReplace,
-              "nextDynamicStep"
+              "activateDynamicStep"
             );
           },
           stopDynamicView: () => {
@@ -437,6 +631,17 @@ function createDiagramStore(props) {
               noReplace,
               "stopDynamicView"
             ), get().fitDiagram());
+          },
+          onInit: (instance) => {
+            const { xyflow, initialized } = get();
+            (!initialized || xyflow !== instance) && set(
+              {
+                xyflow: instance,
+                initialized: !0
+              },
+              noReplace,
+              "onInit"
+            );
           }
         }),
         {
@@ -456,28 +661,31 @@ function DiagramContextProvider({
   keepAspectRatio,
   ...props
 }) {
-  const containerRef = useRef(null), xystore = useXYStoreApi(), xyflow = useXYFlow(), store = useRef();
+  const containerRef = useRef(null), xystore = useXYStoreApi(), xyflow = useXYFlow(), store = useRef(), getContainer = useCallback(() => containerRef.current, [containerRef]);
   return store.current || (store.current = createDiagramStore({
     xystore,
     xyflow,
     view,
-    getContainer: () => containerRef.current,
+    getContainer,
     ...props
-  })), useEffect(
+  })), useUpdateEffect(
+    () => {
+      var _a;
+      return (_a = store.current) == null ? void 0 : _a.setState({ xyflow, xystore, getContainer }, !1, "update xyflow and xystore");
+    },
+    [xyflow, xystore, getContainer]
+  ), useUpdateEffect(
     () => {
-      if (!store.current) return;
-      const state = store.current.getState();
-      (state.xyflow !== xyflow || state.xystore !== xystore) && store.current.setState({ xyflow, xystore }, !1, "update xyflow and xystore");
+      var _a;
+      return (_a = store.current) == null ? void 0 : _a.setState(props, !1, "update incoming props");
     },
-    [xyflow, xystore]
+    [props]
   ), useUpdateEffect(
     () => {
-      if (!store.current) return;
-      const state = store.current.getState(), newProps = pickBy(props, isNonNullish);
-      hasSubObject(state, newProps) || store.current.setState(newProps, !1, "update incoming props"), state.view !== view && state.updateView(view);
+      var _a;
+      (_a = store.current) == null || _a.getState().updateView(view);
     },
-    [view, props],
-    (prev, next) => shallowEqual(prev[0], next[0]) && shallowEqual(prev[1], next[1])
+    [view]
   ), /* @__PURE__ */ jsx(
     "div",
     {
@@ -485,8 +693,8 @@ function DiagramContextProvider({
       className,
       ...keepAspectRatio && {
         style: {
-          aspectRatio: `${Math.ceil(view.width)}/${Math.ceil(view.height)}`,
-          maxHeight: Math.ceil(view.height)
+          aspectRatio: `${Math.ceil(view.bounds.width)}/${Math.ceil(view.bounds.height)}`,
+          maxHeight: Math.ceil(view.bounds.height)
         }
       },
       children: /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children })
@@ -505,158 +713,48 @@ function useDiagramStoreApi() {
     throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
   return store;
 }
-function diagramViewToXYFlowData(view, opts) {
-  var _a, _b;
-  const isDynamicView = view.__ === "dynamic", editor = {
-    nodes: [],
-    edges: []
-  }, nodeLookup = /* @__PURE__ */ new Map(), traverse = view.nodes.reduce(
-    (acc, node) => (nodeLookup.set(node.id, node), node.parent || acc.push({ node, parent: null }), acc),
-    new Array()
-  ), ns = "", nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
-  let next;
-  for (; next = traverse.shift(); ) {
-    const { node, parent } = next;
-    node.children.length > 0 && traverse.push(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
-    const isCompound = hasAtLeast$1(node.children, 1), position = {
-      x: node.position[0],
-      y: node.position[1]
-    };
-    parent && (position.x -= parent.position[0], position.y -= parent.position[1]);
-    const id = ns + node.id, draggable = opts.draggable && (!parent || parent.children.length > 1);
-    editor.nodes.push({
-      id,
-      type: isCompound ? "compound" : "element",
-      data: {
-        fqn: node.id,
-        element: node
-      },
-      draggable,
-      selectable: opts.selectable,
-      deletable: !1,
-      position,
-      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      hidden: !1,
-      initialWidth: node.width,
-      initialHeight: node.height,
-      width: node.width,
-      height: node.height,
-      ...parent && {
-        parentId: ns + parent.id
-      },
-      ...isCompound && {
-        dragHandle: ".likec4-compound-title"
-      }
-    });
-  }
-  for (const edge of view.edges) {
-    const source = edge.source, target = edge.target, id = ns + edge.id;
-    invariant(hasAtLeast$1(edge.points, 2), "edge should have at least 2 points"), editor.edges.push({
-      id,
-      type: "relationship",
-      source: ns + source,
-      target: ns + target,
-      zIndex: ZIndexes.Edge,
-      selectable: opts.selectable,
-      deletable: !1,
-      data: {
-        edge,
-        type: "bezier",
-        controlPoints: ((_b = (_a = view.manualLayout) == null ? void 0 : _a.edges[edge.id]) == null ? void 0 : _b.controlPoints) || null,
-        stepNum: isDynamicView ? extractStep(edge.id) : null,
-        label: edge.labelBBox ? {
-          bbox: edge.labelBBox,
-          text: edge.label ?? ""
-        } : null
-      },
-      interactionWidth: 20
-    });
-  }
-  return editor;
-}
-function useNavigationHistory() {
-  const store = useDiagramStoreApi(), viewId = useDiagramState((s) => s.view.id), [historyViewId, historyOps, {
-    history,
-    current: historyIndex
-  }] = useStateHistory(viewId), hasBack = historyIndex > 0, hasForward = historyIndex < history.length - 1;
-  return useUpdateEffect(() => {
-    viewId !== historyViewId && historyOps.set(viewId);
-  }, [viewId]), useUpdateEffect(() => {
-    var _a, _b;
-    viewId !== historyViewId && ((_b = (_a = store.getState()).onNavigateTo) == null || _b.call(_a, historyViewId));
-  }, [historyViewId]), useMemo(() => ({
-    hasBack,
-    hasForward,
-    ops: historyOps
-  }), [
-    hasBack,
-    hasForward,
-    historyOps
-  ]);
-}
-function selectDimensions(state) {
+function selectXYFlowSize(state) {
   return `${Math.round(state.width)}:${Math.round(state.height)}`;
 }
-function FitViewOnViewportResize({ diagramApi, xyflowApi }) {
-  const dimensions = useXYStore(selectDimensions), prevDimensionsRef = useRef(dimensions);
+function selectDiagramsize({ view, fitViewPadding }) {
+  return [
+    view.bounds.x,
+    view.bounds.y,
+    view.bounds.width,
+    view.bounds.height,
+    fitViewPadding
+  ].map(Math.round).join(":");
+}
+function FitViewOnViewportResize({ diagramApi }) {
+  const xyflowsize = useXYStore(selectXYFlowSize), viewsize = useDiagramState(selectDiagramsize), dimensions = xyflowsize + viewsize, prevDimensionsRef = useRef(dimensions);
   return useDebouncedEffect(
     () => {
       const { focusedNodeId, fitDiagram } = diagramApi.getState();
-      focusedNodeId || prevDimensionsRef.current === dimensions || (fitDiagram(300), prevDimensionsRef.current = dimensions);
+      focusedNodeId || prevDimensionsRef.current === dimensions || (prevDimensionsRef.current = dimensions, fitDiagram(250));
     },
-    [dimensions, diagramApi, xyflowApi],
-    300,
+    [dimensions, diagramApi],
+    250,
     1e3
   ), null;
 }
-function selector$3({ view, xyflowSynced, viewportChanged, lastOnNavigate, ...s }) {
-  const viewId = view.id + "_" + view.autoLayout + "_" + s.fitViewPadding, waitCorrection = lastOnNavigate && lastOnNavigate.toView === view.id && lastOnNavigate.positionCorrected === !1, elTo = waitCorrection ? view.nodes.find((n) => n.id === lastOnNavigate.element.id) : void 0;
-  return waitCorrection && elTo ? {
-    viewId,
-    xyflowSynced,
-    viewportChanged,
-    waitCorrection: !0,
-    elFrom: lastOnNavigate.element,
-    elTo
-  } : {
-    viewId,
-    xyflowSynced,
-    viewportChanged,
-    waitCorrection: !1,
-    fromElement: null,
-    toElement: null
+function selector$3({ view, viewportChanged, fitViewPadding }) {
+  return {
+    layoutId: view.id + "_" + view.autoLayout + "_" + fitViewPadding,
+    viewportNotMoved: !viewportChanged
   };
 }
 function FitViewOnDiagramChange() {
-  const xyflowApi = useXYStoreApi(), {
-    viewId: pendingViewId,
-    xyflowSynced,
-    viewportChanged,
-    waitCorrection,
-    elFrom,
-    elTo
-  } = useDiagramState(selector$3, shallowEqual), diagramApi = useDiagramStoreApi(), processedRef = useRef(pendingViewId), durationRef = useRef(300);
-  return useEffect(() => {
-    if (!(!xyflowSynced || pendingViewId === processedRef.current)) {
-      if (waitCorrection) {
-        invariant(elTo, "elTo should be defined"), invariant(elFrom, "elFrom should be defined");
-        const { xyflow, lastOnNavigate } = diagramApi.getState();
-        invariant(lastOnNavigate, "lastOnNavigate should be defined");
-        const fromPos = lastOnNavigate.elementScreenPosition, toPos = xyflow.flowToScreenPosition({
-          x: elTo.position[0],
-          // + elFrom.width / 2,
-          y: elTo.position[1]
-          // + elFrom.height / 2
-        }), diff = {
-          x: toDomPrecision(fromPos.x - toPos.x),
-          y: toDomPrecision(fromPos.y - toPos.y)
-        };
-        xyflowApi.getState().panBy(diff), durationRef.current = 500, diagramApi.setState({ lastOnNavigate: null });
-        return;
-      }
-      processedRef.current = pendingViewId, diagramApi.getState().fitDiagram(durationRef.current), durationRef.current = 300;
-    }
-  }, [pendingViewId, xyflowSynced, waitCorrection]), !viewportChanged && xyflowSynced ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { xyflowApi, diagramApi }) : null;
+  const {
+    layoutId,
+    viewportNotMoved
+  } = useDiagramState(selector$3, shallowEqual), diagramApi = useDiagramStoreApi(), [currentLayoutId, setCurrent] = useState(layoutId), requiresFit = layoutId !== currentLayoutId;
+  return useDebouncedEffect(
+    () => {
+      layoutId !== currentLayoutId && (setCurrent(layoutId), diagramApi.getState().fitDiagram(450));
+    },
+    [requiresFit, diagramApi],
+    50
+  ), viewportNotMoved && !requiresFit ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { diagramApi }) : null;
 }
 function SelectEdgesOnNodeFocus() {
   const diagramStore = useDiagramStoreApi();
@@ -705,52 +803,6 @@ function SelectEdgesOnNodeFocus() {
     [diagramStore]
   ), null;
 }
-function SyncWithDiagram() {
-  const xyflowSynced = useDiagramState((s) => s.xyflowSynced), diagramStoreApi = useDiagramStoreApi();
-  return useEffect(() => {
-    if (xyflowSynced)
-      return;
-    const {
-      view,
-      nodesDraggable,
-      nodesSelectable,
-      focusedNodeId,
-      xystore
-    } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData(view, {
-      draggable: nodesDraggable,
-      selectable: nodesSelectable || focusedNodeId !== null
-    }), {
-      nodeLookup,
-      edgeLookup,
-      setNodes,
-      setEdges
-    } = xystore.getState();
-    setNodes(updates.nodes.map((update) => {
-      var _a;
-      const existing = (_a = nodeLookup.get(update.id)) == null ? void 0 : _a.internals.userNode;
-      return existing && existing.type === update.type && deepEqual(existing.parentId, update.parentId) ? deepEqual(existing.data.element, update.data.element) ? existing : {
-        ...existing,
-        ...update
-      } : update;
-    })), setEdges(updates.edges.map((update) => {
-      const existing = edgeLookup.get(update.id);
-      return existing ? deepEqual(existing.data.controlPoints, update.data.controlPoints) && deepEqual(existing.markerStart, update.markerStart) && deepEqual(existing.markerEnd, update.markerEnd) && deepEqual(existing.data.edge, update.data.edge) ? existing : {
-        ...omit(existing, ["data", "markerStart", "markerEnd"]),
-        ...update,
-        data: {
-          ...existing.data,
-          ...update.data
-        }
-      } : update;
-    })), diagramStoreApi.setState(
-      {
-        xyflowSynced: !0
-      },
-      !1,
-      "xyflowSynced"
-    );
-  }, [xyflowSynced, diagramStoreApi]), null;
-}
 const Open = (props) => /* @__PURE__ */ jsx(
   "marker",
   {
@@ -954,7 +1006,7 @@ function bezierPath(bezierSpline) {
 const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
   const [ax, ay] = isArray(a) ? a : [a.x, a.y], [bx, by] = isArray(b) ? b : [b.x, b.y];
   return isSame(ax, bx) && isSame(ay, by);
-}, sameControlPoints = (a, b) => a === b ? !0 : !a || !b || a.length !== b.length ? !1 : a.every((ap, i) => isSamePoint(ap, b[i])), isEqualProps$2 = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data.stepNum, next.data.stepNum) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y), RelationshipEdge = /* @__PURE__ */ memo(function({
+}, sameControlPoints = (a, b) => a === b ? !0 : !a || !b || a.length !== b.length ? !1 : a.every((ap, i) => isSamePoint(ap, b[i])), isEqualProps$2 = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data.stepNum, next.data.stepNum) && deepEqual(prev.data.label, next.data.label) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y), RelationshipEdge = /* @__PURE__ */ memo(function({
   id,
   data,
   selected,
@@ -967,18 +1019,18 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
   target,
   interactionWidth
 }) {
-  const [isControlPointDragging, setIsControlPointDragging] = useState(!1), diagramStore = useDiagramStoreApi(), xyflowStore = useXYStoreApi(), { isActive, isEditable, isEdgePathEditable, isHovered, isDimmed } = useDiagramState((s) => ({
-    isEditable: s.readonly !== !0,
+  const [isControlPointDragging, setIsControlPointDragging] = useState(!1), diagramStore = useDiagramStoreApi(), xyflowStore = useXYStoreApi(), { isActive, isEdgePathEditable, isHovered, isDimmed } = useDiagramState((s) => ({
     isEdgePathEditable: s.readonly !== !0 && s.experimentalEdgeEditing === !0,
     isActive: s.focusedNodeId === source || s.focusedNodeId === target || s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum,
     isHovered: s.hoveredEdgeId === id,
     isDimmed: s.dimmed.has(id)
-  })), { nodeLookup, edgeLookup } = xyflowStore.getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isModified = isEditable && (isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position)), {
+  })), { nodeLookup, edgeLookup } = xyflowStore.getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isModified = isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position), {
     label,
     edge: {
       points: diagramEdgePoints,
       line: line2 = "dashed",
       color = "gray",
+      labelBBox,
       ...diagramEdge
     }
   } = data;
@@ -986,10 +1038,10 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
   const isStepEdge = data.stepNum !== null, isDotted = line2 === "dotted", isDashed = isDotted || line2 === "dashed";
   let strokeDasharray;
   isDotted ? strokeDasharray = "1,8" : isDashed && (strokeDasharray = "8,10");
-  let labelX = (label == null ? void 0 : label.bbox.x) ?? 0, labelY = (label == null ? void 0 : label.bbox.y) ?? 0;
+  let labelX = (labelBBox == null ? void 0 : labelBBox.x) ?? 0, labelY = (labelBBox == null ? void 0 : labelBBox.y) ?? 0;
   const [labelPos, setLabelPosition] = useState({
-    x: labelX,
-    y: labelY
+    x: (label == null ? void 0 : label.bbox.x) ?? labelX,
+    y: (label == null ? void 0 : label.bbox.y) ?? labelY
   });
   let edgePath;
   if (isModified) {
@@ -1011,7 +1063,7 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
   } else
     edgePath = bezierPath(diagramEdgePoints);
   const svgPathRef = useRef(null);
-  useIsomorphicLayoutEffect(() => {
+  useEffect(() => {
     const path = svgPathRef.current;
     if (!path) return;
     const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5), point = {
@@ -1019,7 +1071,22 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
       y: Math.round(dompoint.y)
     };
     setLabelPosition((current) => isSamePoint(current, point) ? current : point);
-  }, [edgePath]);
+  }, [edgePath]), useDebouncedEffect(
+    () => {
+      !label || label.bbox.x === labelPos.x && label.bbox.y === labelPos.y || diagramStore.getState().xyflow.updateEdgeData(id, {
+        label: {
+          ...label,
+          bbox: {
+            ...label.bbox,
+            ...labelPos
+          }
+        }
+      });
+    },
+    [labelPos],
+    100,
+    300
+  );
   const onControlPointerDown = (index, e) => {
     const { domNode } = xyflowStore.getState();
     if (!domNode || e.pointerType !== "mouse")
@@ -1034,11 +1101,12 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
     }
     if (e.button !== 0)
       return;
+    const wasCanceled = diagramStore.getState().cancelSaveManualLayout();
     e.stopPropagation();
     let hasMoved = !1, pointer = { x: e.clientX, y: e.clientY };
     const onPointerMove = (e2) => {
       if (!isSamePoint(pointer, [e2.clientX, e2.clientY])) {
-        setIsControlPointDragging(!0), hasMoved || diagramStore.getState().cancelSaveManualLayout(), hasMoved = !0, pointer = { x: e2.clientX, y: e2.clientY };
+        setIsControlPointDragging(!0), hasMoved = !0, pointer = { x: e2.clientX, y: e2.clientY };
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: !1 }), newControlPoints = controlPoints.slice();
         newControlPoints[index] = {
           x: Math.round(x),
@@ -1046,21 +1114,21 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
         }, xyflow.updateEdgeData(id, { controlPoints: newControlPoints });
       }
     }, onPointerUp = () => {
-      setIsControlPointDragging(!1), domNode.removeEventListener("pointermove", onPointerMove), domNode.removeEventListener("pointerup", onPointerUp), hasMoved && diagramStore.getState().triggerSaveManualLayout();
+      domNode.removeEventListener("pointermove", onPointerMove), domNode.removeEventListener("pointerup", onPointerUp), (hasMoved || wasCanceled) && diagramStore.getState().scheduleSaveManualLayout(), setIsControlPointDragging(!1);
     };
     domNode.addEventListener("pointermove", onPointerMove), domNode.addEventListener("pointerup", onPointerUp, { once: !0 });
   };
   let markerStartName = toMarker(diagramEdge.tail), markerEndName = toMarker(diagramEdge.head ?? "normal");
   diagramEdge.dir === "back" && ([markerStartName, markerEndName] = [markerEndName, markerStartName]);
-  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null, MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null;
+  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null, MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null, labelZIndex = 1 + (isHovered ? ZIndexes.Element : edgeLookup.get(id).zIndex ?? ZIndexes.Edge);
   return /* @__PURE__ */ jsxs(
     "g",
     {
-      className: clsx([
+      className: clsx(
         container$4,
         isDimmed && dimmed$2,
         isControlPointDragging && controlDragging
-      ]),
+      ),
       "data-likec4-color": color,
       "data-edge-dir": diagramEdge.dir,
       "data-edge-active": isActive,
@@ -1135,7 +1203,7 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
             selected: selected ?? !1,
             stepNum: data.stepNum,
             label: data.label,
-            zIndex: (edgeLookup.get(id).zIndex ?? ZIndexes.Edge) + 1,
+            zIndex: labelZIndex,
             isHovered,
             isActive,
             isStepEdge
@@ -1240,22 +1308,22 @@ class Compound extends Rect {
       rect.minX,
       [-1, this.minX]
     ), { weak } = Strength;
-    this.solver.createConstraint(leftPadding, Operator.Ge, 40), this.solver.createConstraint(leftPadding, Operator.Eq, 40, weak);
+    this.solver.createConstraint(leftPadding, Operator.Ge, 40), this.solver.createConstraint(leftPadding, Operator.Eq, 41, weak);
     const topPadding = new Expression(
       rect.minY,
       [-1, this.minY]
     );
-    this.solver.createConstraint(topPadding, Operator.Ge, 60), this.solver.createConstraint(topPadding, Operator.Eq, 60, weak);
+    this.solver.createConstraint(topPadding, Operator.Ge, 54), this.solver.createConstraint(topPadding, Operator.Eq, 55, weak);
     const rightPadding = new Expression(
       this.maxX,
       [-1, rect.maxX]
     );
-    this.solver.createConstraint(rightPadding, Operator.Ge, 40), this.solver.createConstraint(rightPadding, Operator.Eq, 40, weak);
+    this.solver.createConstraint(rightPadding, Operator.Ge, 40), this.solver.createConstraint(rightPadding, Operator.Eq, 41, weak);
     const bottomPadding = new Expression(
       this.maxY,
       [-1, rect.maxY]
     );
-    this.solver.createConstraint(bottomPadding, Operator.Ge, 40), this.solver.createConstraint(bottomPadding, Operator.Eq, 40, weak);
+    this.solver.createConstraint(bottomPadding, Operator.Ge, 40), this.solver.createConstraint(bottomPadding, Operator.Eq, 41, weak);
   }
 }
 class Leaf extends Rect {
@@ -1272,7 +1340,7 @@ class Leaf extends Rect {
     parent && parent.addChild(this);
   }
 }
-function createLayoutConstraints(xyflow, xyflowApi, draggingNodeId) {
+function createLayoutConstraints(xyflowApi, draggingNodeId) {
   var _a;
   const { parentLookup, nodeLookup } = xyflowApi.getState(), solver = new Solver(), rects = /* @__PURE__ */ new Map(), traverse = new Array();
   for (const [, xynode] of nodeLookup)
@@ -1290,36 +1358,30 @@ function createLayoutConstraints(xyflow, xyflowApi, draggingNodeId) {
     }));
   }
   solver.updateVariables(), solver.maxIterations = 1e3;
+  const rectsToUpdate = [...rects.values()].filter((r) => r.id !== draggingNodeId);
   function updateXYFlowNodes() {
-    solver.updateVariables(), xyflow.setNodes(
-      (nodes) => nodes.map((n) => {
-        if (n.id === draggingNodeId || n.dragging === !0)
-          return n;
-        const rect = rects.get(n.id);
-        if (!rect)
-          return n;
-        const dimensions = rect.dimensions, newXY = rect.position;
-        return newXY.x !== n.position.x || newXY.y !== n.position.y ? {
-          ...n,
-          position: rect.position,
-          width: dimensions.width,
-          height: dimensions.height,
-          measured: dimensions
-        } : dimensions.width !== n.width || dimensions.height !== n.height ? {
-          ...n,
-          width: dimensions.width,
-          height: dimensions.height,
-          measured: dimensions
-        } : n;
-      })
+    solver.updateVariables(), xyflowApi.getState().triggerNodeChanges(
+      rectsToUpdate.reduce((acc, r) => (acc.push({
+        id: r.id,
+        type: "position",
+        dragging: !1,
+        position: r.position,
+        positionAbsolute: r.positionAbsolute
+      }), r instanceof Compound && acc.push({
+        id: r.id,
+        type: "dimensions",
+        setAttributes: !0,
+        dimensions: r.dimensions
+      }), acc), [])
     );
   }
   let animationFrameId = null;
   function onNodeDrag(xynode) {
-    const pos = nodeLookup.get(xynode.id).internals.positionAbsolute, rect = nonNullable(rects.get(xynode.id));
-    solver.suggestValue(rect.minX, Math.ceil(pos.x)), solver.suggestValue(rect.minY, Math.ceil(pos.y)), animationFrameId ?? (animationFrameId = requestAnimationFrame(() => {
-      updateXYFlowNodes(), animationFrameId = null;
-    }));
+    rectsToUpdate.length !== 0 && (animationFrameId ?? (animationFrameId = requestAnimationFrame(() => {
+      animationFrameId = null;
+      const pos = nodeLookup.get(xynode.id).internals.positionAbsolute, rect = nonNullable(rects.get(xynode.id));
+      solver.suggestValue(rect.minX, Math.ceil(pos.x)), solver.suggestValue(rect.minY, Math.ceil(pos.y)), updateXYFlowNodes();
+    })));
   }
   return {
     onNodeDrag,
@@ -1327,27 +1389,20 @@ function createLayoutConstraints(xyflow, xyflowApi, draggingNodeId) {
   };
 }
 function useLayoutConstraints() {
-  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), solverRef = useRef(), dragStartedAt = useRef({
-    x: 0,
-    y: 0
-  });
+  const diagramApi = useDiagramStoreApi(), solverRef = useRef();
   return useMemo(() => ({
-    onNodeDragStart: (event, xynode) => {
-      dragStartedAt.current = {
-        x: event.clientX,
-        y: event.clientY
-      };
-      const { xyflow, cancelSaveManualLayout } = diagramApi.getState();
-      cancelSaveManualLayout(), solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id);
+    onNodeDragStart: (_event, xynode) => {
+      const { cancelSaveManualLayout, xystore } = diagramApi.getState();
+      cancelSaveManualLayout(), solverRef.current = createLayoutConstraints(xystore, xynode.id);
     },
     onNodeDrag: (_event, xynode) => {
       var _a;
       invariant(solverRef.current, "solverRef.current should be defined"), (_a = solverRef.current) == null || _a.onNodeDrag(xynode);
     },
-    onNodeDragStop: (event, _xynode) => {
-      isSamePoint$1(dragStartedAt.current, { x: event.clientX, y: event.clientY }) || diagramApi.getState().triggerSaveManualLayout(), solverRef.current = void 0;
+    onNodeDragStop: (_event, _xynode) => {
+      diagramApi.getState().scheduleSaveManualLayout(), solverRef.current = void 0;
     }
-  }), [xyflowApi, diagramApi]);
+  }), [diagramApi]);
 }
 function NavigateToBtn({ xynodeId, className }) {
   const diagramApi = useDiagramStoreApi();
@@ -1931,18 +1986,17 @@ function useXYFlowEvents() {
       },
       onNodeClick: (event, xynode) => {
         const {
-          zoomable,
-          fitViewEnabled,
           focusedNodeId,
           fitDiagram,
           focusOnNode,
           onNodeClick,
+          enableFocusMode,
           lastClickedNodeId,
           setLastClickedNode
         } = diagramApi.getState();
         setLastClickedNode(xynode.id);
-        const focusPossible = zoomable && fitViewEnabled, shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id, clickedRecently = lastClickedNodeId === xynode.id && lastClickWasRecent();
-        if (focusPossible) {
+        const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id, clickedRecently = lastClickedNodeId === xynode.id && lastClickWasRecent();
+        if (enableFocusMode) {
           let stopPropagation = !1;
           switch (!0) {
             case (!focusedNodeId && clickedRecently):
@@ -1964,27 +2018,60 @@ function useXYFlowEvents() {
       onNodeDoubleClick: (event, xynode) => {
         const {
           focusedNodeId,
-          zoomable,
-          fitViewEnabled,
+          enableFocusMode,
           fitDiagram,
           focusOnNode,
           setLastClickedNode
         } = diagramApi.getState();
-        setLastClickedNode(xynode.id), lastClickTimestamp.current = Date.now(), (focusedNodeId || zoomable && fitViewEnabled) && (focusedNodeId === xynode.id ? fitDiagram() : focusOnNode(xynode.id), event.stopPropagation());
+        setLastClickedNode(xynode.id), lastClickTimestamp.current = Date.now(), (isNonNullish(focusedNodeId) || enableFocusMode) && (focusedNodeId === xynode.id ? fitDiagram() : focusOnNode(xynode.id), event.stopPropagation());
       },
       onEdgeClick: (event, xyedge) => {
-        diagramApi.getState().setLastClickedEdge(xyedge.id);
         const {
+          lastClickedEdgeId,
+          isDynamicView,
+          enableDynamicViewWalkthrough,
+          activateDynamicStep,
+          activeDynamicViewStep,
           focusedNodeId,
           focusOnNode,
-          onEdgeClick
+          onEdgeClick,
+          setLastClickedEdge
         } = diagramApi.getState();
-        focusedNodeId && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target) && (focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()), onEdgeClick == null || onEdgeClick({
+        lastClickedEdgeId !== xyedge.id && setLastClickedEdge(xyedge.id);
+        const isNotAFirstClick = lastClickedEdgeId === xyedge.id, isEdgeOfFocusedNode = isTruthy(focusedNodeId) && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target);
+        if (isDynamicView && enableDynamicViewWalkthrough && (isEdgeOfFocusedNode || isNotAFirstClick || isNonNullish(activeDynamicViewStep))) {
+          const nextStep = extractStep(xyedge.data.edge.id);
+          if (activeDynamicViewStep !== nextStep) {
+            activateDynamicStep(nextStep), event.stopPropagation();
+            return;
+          }
+        }
+        isEdgeOfFocusedNode && (focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()), onEdgeClick == null || onEdgeClick({
           edge: xyedge.data.edge,
           xyedge,
           event
         });
       },
+      onEdgeDoubleClick: (event, xyedge) => {
+        diagramApi.getState().setLastClickedEdge(xyedge.id);
+        const {
+          enableFocusMode,
+          isDynamicView,
+          enableDynamicViewWalkthrough,
+          focusOnNode,
+          activateDynamicStep,
+          activeDynamicViewStep
+        } = diagramApi.getState();
+        if (isDynamicView && enableDynamicViewWalkthrough) {
+          const nextStep = extractStep(xyedge.data.edge.id);
+          activeDynamicViewStep !== nextStep && (activateDynamicStep(extractStep(xyedge.data.edge.id)), event.stopPropagation());
+          return;
+        }
+        if (enableFocusMode) {
+          focusOnNode(xyedge.source), event.stopPropagation();
+          return;
+        }
+      },
       onMoveEnd: (event, _viewport) => {
         const viewportChanged = !!event;
         viewportChanged !== diagramApi.getState().viewportChanged && diagramApi.setState({ viewportChanged }, !1, `viewport-changed: ${viewportChanged}`);
@@ -2016,15 +2103,15 @@ const nodeTypes = {
 }, edgeTypes = {
   relationship: RelationshipEdge
 }, selector$1 = (s) => ({
+  nodes: s.xynodes,
+  edges: s.xyedges,
+  onInit: s.onInit,
+  onNodesChange: s.onNodesChange,
+  onEdgesChange: s.onEdgesChange,
   nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
-  fitViewOptions: {
-    minZoom: MinZoom,
-    maxZoom: 1,
-    padding: s.fitViewPadding,
-    includeHiddenNodes: !0
-  },
+  fitViewPadding: s.fitViewPadding,
   hasOnNavigateTo: !!s.onNavigateTo,
   hasOnNodeClick: !!s.onNodeClick,
   hasOnNodeContextMenu: !!s.onNodeContextMenu,
@@ -2032,21 +2119,28 @@ const nodeTypes = {
   hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
   hasOnEdgeClick: !!s.onEdgeClick,
   zoomable: s.zoomable,
-  pannable: s.pannable
+  pannable: s.pannable,
+  // If fitView is not enabled
+  // And diagram starts with a negative x or y - we need to translate viewprot
+  translateX: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.x, 0),
+  translateY: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.y, 0)
 });
 function XYFlow({
   colorMode = "system",
   className,
   children,
-  defaultNodes,
-  defaultEdges,
   style
 }) {
-  const xyflowApi = useXYStoreApi(), diagramApi = useDiagramStoreApi(), {
+  const xyflowApi = useXYStoreApi(), {
+    nodes,
+    edges,
+    onInit,
+    onNodesChange,
+    onEdgesChange,
     nodesSelectable,
     nodesDraggable,
     fitView,
-    fitViewOptions,
+    fitViewPadding,
     pannable,
     zoomable,
     hasOnNodeClick,
@@ -2054,15 +2148,13 @@ function XYFlow({
     hasOnNodeContextMenu,
     hasOnCanvasContextMenu,
     hasOnEdgeContextMenu,
-    hasOnEdgeClick
-  } = useDiagramState(selector$1, deepEqual), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
+    translateX,
+    translateY
+  } = useDiagramState(selector$1, shallowEqual), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
   return useOnViewportChange({
     onEnd: ({ x, y, zoom }) => {
-      const rounded = {
-        x: Math.round(x),
-        y: Math.round(y)
-      };
-      (x !== rounded.x || y !== rounded.y) && xyflowApi.setState({ transform: [rounded.x, rounded.y, zoom] });
+      const roundedX = Math.round(x), roundedY = Math.round(y);
+      (x !== roundedX || y !== roundedY) && xyflowApi.setState({ transform: [roundedX, roundedY, zoom] });
     }
   }), /* @__PURE__ */ jsx(
     ReactFlow,
@@ -2070,8 +2162,8 @@ function XYFlow({
       className,
       style,
       ...colorMode && { colorMode },
-      defaultNodes,
-      defaultEdges,
+      nodes,
+      edges,
       nodeTypes,
       edgeTypes,
       zoomOnPinch: zoomable,
@@ -2082,26 +2174,43 @@ function XYFlow({
       maxZoom: zoomable ? 1.9 : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView,
-      fitViewOptions,
+      fitViewOptions: useMemo(() => ({
+        minZoom: MinZoom,
+        maxZoom: 1,
+        padding: fitViewPadding,
+        includeHiddenNodes: !0
+      }), [fitViewPadding]),
+      ...!fitView && {
+        viewport: {
+          x: translateX,
+          y: translateY,
+          zoom: 1
+        }
+      },
       preventScrolling: zoomable || pannable,
       defaultMarkerColor: "var(--xy-edge-stroke)",
       noDragClassName: "nodrag",
       noPanClassName: "nopan",
       panOnScroll: pannable,
       panOnDrag: pannable,
+      ...!pannable && {
+        selectionKeyCode: null
+      },
       elementsSelectable: nodesSelectable,
       nodesFocusable: nodesDraggable || nodesSelectable || hasOnNodeClick || hasOnNavigateTo,
-      edgesFocusable: hasOnEdgeClick,
+      edgesFocusable: !1,
       nodesDraggable,
       ...nodesDraggable && {
         onNodeDragStart: layoutConstraints.onNodeDragStart,
         onNodeDrag: layoutConstraints.onNodeDrag,
         onNodeDragStop: layoutConstraints.onNodeDragStop
       },
+      nodeDragThreshold: 3,
       zoomOnDoubleClick: !1,
       elevateNodesOnSelect: !1,
       selectNodesOnDrag: !1,
-      selectionKeyCode: null,
+      onNodesChange,
+      onEdgesChange,
       onDoubleClick: handlers.onDoubleClick,
       onPaneClick: handlers.onPaneClick,
       onMoveEnd: handlers.onMoveEnd,
@@ -2112,9 +2221,8 @@ function XYFlow({
       onNodeClick: handlers.onNodeClick,
       onNodeDoubleClick: handlers.onNodeDoubleClick,
       onEdgeClick: handlers.onEdgeClick,
-      onInit: useCallback(() => {
-        diagramApi.setState({ initialized: !0 }, !1, "initialized");
-      }, [diagramApi]),
+      onEdgeDoubleClick: handlers.onEdgeDoubleClick,
+      onInit,
       ...hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       },
@@ -2129,8 +2237,19 @@ function XYFlow({
   );
 }
 var panel$1 = "_19mimxc0";
+const historySelector = (s) => ({
+  hasStepBack: s.navigationHistoryIndex > 0,
+  hasStepForward: s.navigationHistoryIndex < s.navigationHistory.length - 1,
+  goBack: s.goBack,
+  goForward: s.goForward
+});
 function BackwardForwardPanel() {
-  const { hasBack, hasForward, ops } = useNavigationHistory();
+  const {
+    hasStepBack,
+    hasStepForward,
+    goBack,
+    goForward
+  } = useDiagramState(historySelector);
   return /* @__PURE__ */ jsx(
     Group,
     {
@@ -2141,7 +2260,7 @@ function BackwardForwardPanel() {
       ),
       gap: "xs",
       children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-        hasBack && /* @__PURE__ */ jsx(
+        hasStepBack && /* @__PURE__ */ jsx(
           m.div,
           {
             layout: !0,
@@ -2156,14 +2275,16 @@ function BackwardForwardPanel() {
               {
                 variant: "light",
                 color: "gray",
-                onClick: () => ops.back(),
+                onClick: (e) => {
+                  e.stopPropagation(), goBack();
+                },
                 children: /* @__PURE__ */ jsx(IconChevronLeft, {})
               }
             )
           },
           "back"
         ),
-        hasForward && /* @__PURE__ */ jsx(
+        hasStepForward && /* @__PURE__ */ jsx(
           m.div,
           {
             layout: !0,
@@ -2178,7 +2299,9 @@ function BackwardForwardPanel() {
               {
                 variant: "light",
                 color: "gray",
-                onClick: () => ops.forward(),
+                onClick: (e) => {
+                  e.stopPropagation(), goForward();
+                },
                 children: /* @__PURE__ */ jsx(IconChevronRight, {})
               }
             )
@@ -2723,23 +2846,24 @@ const XYFlowInner = memo(function({
   background,
   controls,
   showDiagramTitle,
-  showNavigationButtons,
-  enableDynamicViewWalkthrough
+  showNavigationButtons
 }) {
   const {
     isDynamicView,
     isDynamicViewActive,
-    readonly
+    readonly,
+    enableDynamicViewWalkthrough
   } = useDiagramState((s) => ({
-    isDynamicView: s.isDynamicView(),
+    isDynamicView: s.isDynamicView,
     readonly: s.readonly,
-    isDynamicViewActive: isNonNull(s.activeDynamicViewStep)
+    enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
+    isDynamicViewActive: isNonNullish(s.activeDynamicViewStep)
   }));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     background !== "transparent" && background !== "solid" && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
     controls && /* @__PURE__ */ jsx(Controls, { position: "bottom-right" }),
     readonly === !1 && /* @__PURE__ */ jsx(OptionsPanel, {}),
-    !isDynamicViewActive && showDiagramTitle === !0 && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
+    showDiagramTitle === !0 && !isDynamicViewActive && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
     isDynamicView && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
     showNavigationButtons && /* @__PURE__ */ jsx(BackwardForwardPanel, {}),
     children
@@ -2761,7 +2885,8 @@ function LikeC4Diagram({
   showElementLinks = !0,
   showDiagramTitle = !0,
   showNavigationButtons = !1,
-  enableDynamicViewWalkthrough = !0,
+  enableDynamicViewWalkthrough = !1,
+  enableFocusMode = readonly,
   initialWidth,
   initialHeight,
   keepAspectRatio = !1,
@@ -2775,22 +2900,16 @@ function LikeC4Diagram({
   onNavigateTo,
   onNodeClick,
   onNodeContextMenu,
+  onEditorCommand,
   renderIcon
 }) {
-  const initialRef = useRef();
-  if (!initialRef.current) {
-    const initial = diagramViewToXYFlowData(view, {
-      selectable: nodesSelectable,
-      draggable: nodesDraggable
-    });
-    initialRef.current = {
-      defaultNodes: initial.nodes,
-      defaultEdges: initial.edges,
-      initialWidth: initialWidth ?? view.width,
-      initialHeight: initialHeight ?? view.height
-    };
-  }
-  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(
+  const initialRef = useRef({
+    defaultNodes: [],
+    defaultEdges: [],
+    initialWidth: initialWidth ?? view.bounds.width,
+    initialHeight: initialHeight ?? view.bounds.height
+  });
+  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, strict: !0, children: /* @__PURE__ */ jsx(
     ReactFlowProvider,
     {
       fitView,
@@ -2810,64 +2929,55 @@ function LikeC4Diagram({
           nodesDraggable,
           nodesSelectable,
           experimentalEdgeEditing,
+          enableDynamicViewWalkthrough,
+          enableFocusMode,
           renderIcon: renderIcon ?? null,
-          onCanvasClick,
-          onCanvasContextMenu,
-          onEdgeClick,
-          onEdgeContextMenu,
-          onNodeClick,
-          onNodeContextMenu,
-          onChange,
-          onNavigateTo,
-          onCanvasDblClick,
-          children: /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, strict: !0, children: /* @__PURE__ */ jsx(
+          onCanvasClick: onCanvasClick ?? null,
+          onCanvasContextMenu: onCanvasContextMenu ?? null,
+          onEdgeClick: onEdgeClick ?? null,
+          onEdgeContextMenu: onEdgeContextMenu ?? null,
+          onNodeClick: onNodeClick ?? null,
+          onNodeContextMenu: onNodeContextMenu ?? null,
+          onChange: onChange ?? null,
+          onNavigateTo: onNavigateTo ?? null,
+          onCanvasDblClick: onCanvasDblClick ?? null,
+          onEditorCommand: onEditorCommand ?? null,
+          children: /* @__PURE__ */ jsx(
             LikeC4DiagramInnerMemo,
             {
-              defaultNodes: initialRef.current.defaultNodes,
-              defaultEdges: initialRef.current.defaultEdges,
-              fitView,
-              zoomable,
-              background,
               controls,
-              pannable,
+              background,
               showDiagramTitle,
-              showNavigationButtons,
-              enableDynamicViewWalkthrough
+              showNavigationButtons
             }
-          ) })
+          )
         }
       )
     }
-  ) });
+  ) }) });
 }
 const LikeC4DiagramInnerMemo = memo(function({
   background,
-  fitView,
-  zoomable,
   controls,
-  pannable,
-  defaultNodes,
-  defaultEdges,
   showDiagramTitle,
-  showNavigationButtons,
-  enableDynamicViewWalkthrough
+  showNavigationButtons
 }) {
-  const diagramApi = useDiagramStoreApi(), [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized);
-  return useEffect(() => {
-    if (!isInitialized)
-      return diagramApi.subscribe(
-        (s) => s.initialized,
-        setIsInitialized,
-        {
-          fireImmediately: !0
-        }
-      );
-  }, [isInitialized]), /* @__PURE__ */ jsxs(Fragment, { children: [
+  const {
+    isInitialized,
+    pannable,
+    fitView,
+    enableFocusMode
+  } = useDiagramState((s) => ({
+    isInitialized: s.initialized,
+    zoomable: s.zoomable,
+    pannable: s.pannable,
+    fitView: s.fitViewEnabled,
+    enableFocusMode: s.enableFocusMode
+  }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       XYFlow,
       {
-        defaultNodes,
-        defaultEdges,
         className: clsx(
           "likec4-diagram",
           cssReactFlow,
@@ -2880,7 +2990,6 @@ const LikeC4DiagramInnerMemo = memo(function({
           {
             showNavigationButtons,
             showDiagramTitle,
-            enableDynamicViewWalkthrough,
             background,
             controls
           }
@@ -2888,9 +2997,8 @@ const LikeC4DiagramInnerMemo = memo(function({
       }
     ),
     isInitialized && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SyncWithDiagram, {}),
       fitView && /* @__PURE__ */ jsx(FitViewOnDiagramChange, {}),
-      fitView && zoomable && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {})
+      enableFocusMode && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {})
     ] })
   ] });
 }, shallowEqual);