@likec4/diagram 1.7.2 → 1.7.4

package/dist/index.mjs

@@ -6,41 +6,23 @@ import { useReactFlow, useStoreApi, useNodesData, useStore, applyNodeChanges, ap
 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, 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 { 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 { createContext, useRef, useCallback, useContext, useState, memo, useEffect, useId, useMemo } from "react";
+import { createWithEqualityFn, useStoreWithEqualityFn } from "zustand/traditional";
+import { invariant, hasAtLeast, whereOperatorAsPredicate, extractStep, nonNullable, StepEdgeId, getBBoxCenter, nonexhaustive, isAncestor, defaultTheme, ElementShapes } from "@likec4/core";
+import { useFirstMountState, useCustomCompareEffect, useDebouncedEffect } from "@react-hookz/web";
+import { getNodeDimensions, getBoundsOfRects, boxToRect, 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 } from "@react-hookz/web";
+import { MantineContext, Box, ActionIcon as ActionIcon$2, Text as Text$1, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Stack, Group, Anchor, CopyButton, Button, Card, CardSection, Spoiler, ButtonGroup, rem, Divider, Space, TooltipGroup, Flex, Tooltip as Tooltip$2, ColorSwatch, CheckIcon, Select, Slider, SegmentedControl, Popover, PopoverTarget, PopoverDropdown, FloatingIndicator, Notification, Code } from "@mantine/core";
+import { useHotkeys, useLocalStorage } from "@mantine/hooks";
 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 { useLocalStorage, useHotkeys } from "@mantine/hooks";
-var rootClassName = "likec4-diagram-root", cssReactFlow = "_2h8g8h0", cssDisablePan = "_2h8g8h1", cssTransparentBg = "_2h8g8h2", cssNoControls = "_2h8g8h3";
-function EnsureMantine({ children }) {
-  if (!useContext(MantineContext))
-    throw new Error("LikeC4Diagram must be a child of MantineProvider");
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
-function useSetState(initialState) {
-  const [state, _setState] = useState(initialState), setState = useCallback(
-    (statePartial) => _setState((current) => {
-      const next = {
-        ...current,
-        ...typeof statePartial == "function" ? statePartial(current) : statePartial
-      };
-      return shallowEqual(current, next) ? current : next;
-    }),
-    []
-  );
-  return [state, setState];
-}
+import { IconZoomScan, IconLink, IconMenu, IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled, IconFileSymlink, IconLayoutDashboard, IconArrowBigDownLines, IconFocusCentered, IconMenu2, IconChevronLeft, IconChevronRight, IconAlertTriangle } from "@tabler/icons-react";
+var rootClassName = "likec4-diagram-root";
 const noop = () => {
 }, depsShallowEqual = (d1, d2) => {
   if (d1 === d2)
@@ -73,10 +55,16 @@ const useXYStoreApi = useStoreApi, ZIndexes = {
   Compound: 2,
   Edge: 4,
   Element: 6
-}, MinZoom = 0.1;
+}, MinZoom = 0.1, MaxZoom = 2;
 function toDomPrecision(v) {
   return v === null ? 0.01 : Math.round(v * 100) / 100;
 }
+const nodeToRect = (nd) => ({
+  x: nd.internals.positionAbsolute.x,
+  y: nd.internals.positionAbsolute.y,
+  width: nd.width ?? nd.data.element.width,
+  height: nd.height ?? nd.data.element.height
+}), isInside = (test, target) => test.x >= target.x && test.y >= target.y && test.x + test.width <= target.x + target.width && test.y + test.height <= target.y + target.height;
 function bezierControlPoints(diagramEdge) {
   let [start, ...bezierPoints] = diagramEdge.points;
   invariant(start, "start should be defined");
@@ -104,7 +92,15 @@ 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 visiblePredicate = (_nodeOrEdge) => !0;
+  if (opts.where)
+    try {
+      visiblePredicate = whereOperatorAsPredicate(opts.where);
+    } catch (e) {
+      console.error("Error in where filter:", e);
+    }
+  const ns = "", nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
   let next;
   for (; next = traverse.shift(); ) {
     const { node, parent } = next;
@@ -127,9 +123,9 @@ function diagramViewToXYFlowData(view, opts) {
       deletable: !1,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      hidden: !1,
       width: node.width,
       height: node.height,
+      hidden: !visiblePredicate(node),
       // parentId: parent ? ns + parent.id : null,
       ...parent && {
         parentId: ns + parent.id
@@ -148,6 +144,7 @@ function diagramViewToXYFlowData(view, opts) {
       target: ns + target,
       zIndex: ZIndexes.Edge,
       selectable: opts.selectable,
+      hidden: !visiblePredicate(edge),
       deletable: !1,
       data: {
         edge,
@@ -190,6 +187,7 @@ function createDiagramStore(props) {
     xynodes,
     xyedges
   } = diagramViewToXYFlowData(props.view, {
+    where: props.whereFilter,
     draggable: props.nodesDraggable,
     selectable: props.nodesSelectable
   });
@@ -224,6 +222,7 @@ function createDiagramStore(props) {
               xyflow,
               xystore,
               dimmed: dimmed2,
+              whereFilter,
               view: current,
               lastOnNavigate,
               navigationHistory,
@@ -239,10 +238,6 @@ function createDiagramStore(props) {
               xyedges: xyedges2,
               xynodes: xynodes2
             } = get();
-            if (shallowEqual(current, nextView)) {
-              DEV && console.debug("store: skip updateView");
-              return;
-            }
             viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), viewSyncDebounceTimeout = null);
             const isSameView = current.id === nextView.id;
             if (isSameView) {
@@ -289,24 +284,27 @@ function createDiagramStore(props) {
               lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, focusedNodeId = null, activeDynamicViewStep = null, dimmed2 = EmptyStringSet;
             }
             const update = diagramViewToXYFlowData(nextView, {
+              where: whereFilter,
               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 : {
+              return existing && existing.type === update2.type && deepEqual(existing.parentId ?? null, update2.parentId ?? null) ? existing.hidden === update2.hidden && existing.width === update2.width && existing.height === update2.height && deepEqual(existing.position, update2.position) && 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 : {
+              return existing ? existing.hidden === update2.hidden && deepEqual(existing.data.label, update2.data.label) && deepEqual(existing.data.controlPoints, update2.data.controlPoints) && deepEqual(existing.data.edge, update2.data.edge) ? existing : {
                 ...existing,
-                ...update2
+                ...update2,
+                data: {
+                  ...existing.data,
+                  ...update2.data
+                }
               } : update2;
-            }));
-            const hasChanges = !isSameView || !shallowEqual(update.xynodes, xynodes2) || !shallowEqual(update.xyedges, xyedges2);
-            set(
+            })), set(
               {
                 isDynamicView: nextView.__ === "dynamic",
                 viewSyncDebounceTimeout,
@@ -321,8 +319,8 @@ function createDiagramStore(props) {
                 navigationHistory,
                 navigationHistoryIndex,
                 dimmed: dimmed2,
-                xynodes: hasChanges ? update.xynodes : xynodes2,
-                xyedges: hasChanges ? update.xyedges : xyedges2
+                xynodes: !isSameView || !shallowEqual(update.xynodes, xynodes2) ? update.xynodes : xynodes2,
+                xyedges: !isSameView || !shallowEqual(update.xyedges, xyedges2) ? update.xyedges : xyedges2
               },
               noReplace,
               isSameView ? "update-view [same]" : "update-view [another]"
@@ -439,10 +437,7 @@ function createDiagramStore(props) {
           },
           triggerSaveManualLayout: () => {
             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;
-            }
+            viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), set({ viewSyncDebounceTimeout: null }));
             const { nodeLookup } = xystore.getState(), movedNodes = new StringSet();
             let bounds = {
               x: 0,
@@ -471,7 +466,15 @@ function createDiagramStore(props) {
                 points: data.edge.points
               };
               (_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({
+              const allX = [
+                ...data.edge.points.map((p) => p[0]),
+                ...(controlPoints ?? []).map((p) => p.x),
+                ..._updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : []
+              ], allY = [
+                ...data.edge.points.map((p) => p[1]),
+                ...(controlPoints ?? []).map((p) => p.y),
+                ..._updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : []
+              ], rect = boxToRect({
                 x: Math.floor(Math.min(...allX)),
                 y: Math.floor(Math.min(...allY)),
                 x2: Math.ceil(Math.max(...allX)),
@@ -488,14 +491,19 @@ function createDiagramStore(props) {
                 ...bounds
               }
             };
-            DEV && console.debug("triggerSaveManualLayout", change), onChange({ change });
+            DEV && console.debug("triggerSaveManualLayout", change), isInside(bounds, view.bounds) || set(
+              {
+                view: {
+                  ...view,
+                  bounds
+                }
+              },
+              noReplace,
+              "update view bounds"
+            ), onChange == null || onChange({ change });
           },
           scheduleSaveManualLayout: () => {
-            let { viewSyncDebounceTimeout, onChange } = get();
-            if (!onChange) {
-              DEV && console.debug("ignore triggerSaveManualLayout, as no onChange handler is set");
-              return;
-            }
+            let { viewSyncDebounceTimeout } = get();
             viewSyncDebounceTimeout && clearTimeout(viewSyncDebounceTimeout), set(
               {
                 viewSyncDebounceTimeout: setTimeout(() => {
@@ -508,13 +516,13 @@ function createDiagramStore(props) {
             );
           },
           triggerOnNavigateTo: (xynodeId, event) => {
-            const { view, xynodes: xynodes2, onNavigateTo } = get();
+            const { view, xynodes: xynodes2, onNavigateTo, cancelSaveManualLayout } = 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(
+            invariant(element == null ? void 0 : element.navigateTo, `node is not navigable: ${xynodeId}`), cancelSaveManualLayout(), set(
               {
                 lastClickedNodeId: xynodeId,
                 lastOnNavigate: {
@@ -659,6 +667,7 @@ function DiagramContextProvider({
   view,
   className,
   keepAspectRatio,
+  whereFilter,
   ...props
 }) {
   const containerRef = useRef(null), xystore = useXYStoreApi(), xyflow = useXYFlow(), store = useRef(), getContainer = useCallback(() => containerRef.current, [containerRef]);
@@ -667,6 +676,7 @@ function DiagramContextProvider({
     xyflow,
     view,
     getContainer,
+    whereFilter: structuredClone(whereFilter),
     ...props
   })), useUpdateEffect(
     () => {
@@ -682,10 +692,11 @@ function DiagramContextProvider({
     [props]
   ), useUpdateEffect(
     () => {
-      var _a;
-      (_a = store.current) == null || _a.getState().updateView(view);
+      const current = store.current;
+      invariant(current, "DiagramContext.store.current is not defined"), deepEqual(whereFilter, current.getState().whereFilter) || current.setState({ whereFilter: structuredClone(whereFilter) }, !1, "update where filter"), current.getState().updateView(view);
     },
-    [view]
+    [view, whereFilter],
+    (a, b) => shallowEqual(a[0], b[0]) && deepEqual(a[1], b[1])
   ), /* @__PURE__ */ jsx(
     "div",
     {
@@ -713,6 +724,12 @@ function useDiagramStoreApi() {
     throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
   return store;
 }
+var cssReactFlow = "_2h8g8h0", cssDisablePan = "_2h8g8h1", cssTransparentBg = "_2h8g8h2", cssNoControls = "_2h8g8h3";
+function EnsureMantine({ children }) {
+  if (!useContext(MantineContext))
+    throw new Error("LikeC4Diagram must be a child of MantineProvider");
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
 function selectXYFlowSize(state) {
   return `${Math.round(state.width)}:${Math.round(state.height)}`;
 }
@@ -756,51 +773,84 @@ function FitViewOnDiagramChange() {
     50
   ), viewportNotMoved && !requiresFit ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { diagramApi }) : null;
 }
+function useSetState(initialState) {
+  const [state, _setState] = useState(initialState), setState = useCallback(
+    (statePartial) => _setState((current) => {
+      const next = {
+        ...current,
+        ...typeof statePartial == "function" ? statePartial(current) : statePartial
+      };
+      return shallowEqual(current, next) ? current : next;
+    }),
+    []
+  );
+  return [state, setState];
+}
 function SelectEdgesOnNodeFocus() {
-  const diagramStore = useDiagramStoreApi();
-  return useEffect(
-    () => diagramStore.subscribe((s) => s.focusedNodeId, (focusedNodeId) => {
-      if (!focusedNodeId)
-        return;
-      const edgeChanges = [], nodeChanges = [], {
-        edgeLookup,
-        nodeLookup,
-        width,
-        height,
-        panZoom,
-        transform,
-        triggerNodeChanges,
-        triggerEdgeChanges
-      } = diagramStore.getState().xystore.getState();
-      let focusBounds = nodeToRect(nonNullable(nodeLookup.get(focusedNodeId)));
-      for (const [, edge] of edgeLookup) {
-        if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
-          const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source, nd = nodeToRect(nonNullable(nodeLookup.get(anotherNodeId)));
-          focusBounds = getBoundsOfRects(focusBounds, nd);
-        }
-        edge.selected && edgeChanges.push({
-          id: edge.id,
-          type: "select",
-          selected: !1
-        });
+  const diagramStore = useDiagramStoreApi(), focusedNodeId = useDiagramState((s) => s.focusedNodeId);
+  return useUpdateEffect(() => {
+    if (!focusedNodeId) {
+      diagramStore.getState().xystore.getState().resetSelectedElements();
+      return;
+    }
+    const container2 = diagramStore.getState().getContainer();
+    if (!container2)
+      return;
+    const { width, height } = container2.getBoundingClientRect(), edgeChanges = [], nodeChanges = [], {
+      edgeLookup,
+      nodeLookup,
+      panZoom,
+      transform,
+      triggerNodeChanges,
+      triggerEdgeChanges
+    } = diagramStore.getState().xystore.getState();
+    let focusBounds = nodeToRect(nonNullable(nodeLookup.get(focusedNodeId)));
+    for (const [, edge] of edgeLookup) {
+      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+        const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source, nd = nonNullable(nodeLookup.get(anotherNodeId));
+        focusBounds = getBoundsOfRects(focusBounds, nodeToRect(nd));
       }
-      for (const [, node] of nodeLookup)
-        node.selected && node.id !== focusedNodeId && nodeChanges.push({
-          id: node.id,
-          type: "select",
-          selected: !1
-        });
-      nodeChanges.push({
-        id: focusedNodeId,
+      edge.selected && edgeChanges.push({
+        id: edge.id,
         type: "select",
-        selected: !0
-      }), edgeChanges.length > 0 && triggerEdgeChanges(edgeChanges), triggerNodeChanges(nodeChanges);
-      const maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds$1(focusBounds, width, height, MinZoom, maxZoom, 0.2);
-      panZoom == null || panZoom.setViewport(viewport, {
-        duration: 350
+        selected: !1
       });
-    }),
-    [diagramStore]
+    }
+    for (const [, node] of nodeLookup)
+      node.selected && node.id !== focusedNodeId && nodeChanges.push({
+        id: node.id,
+        type: "select",
+        selected: !1
+      });
+    nodeChanges.push({
+      id: focusedNodeId,
+      type: "select",
+      selected: !0
+    }), edgeChanges.length > 0 && triggerEdgeChanges(edgeChanges), triggerNodeChanges(nodeChanges);
+    const maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds$1(
+      {
+        x: focusBounds.x - 16,
+        y: focusBounds.y - 16,
+        width: focusBounds.width + 32,
+        height: focusBounds.height + 32
+      },
+      width,
+      height,
+      0.1,
+      maxZoom,
+      0
+    );
+    panZoom == null || panZoom.setViewport(viewport, {
+      duration: 350
+    });
+  }, [focusedNodeId]), useHotkeys(
+    focusedNodeId !== null ? [
+      ["Escape", (e) => {
+        e.stopImmediatePropagation();
+        const { xystore, fitDiagram } = diagramStore.getState();
+        fitDiagram(), xystore.getState().resetSelectedElements();
+      }, { preventDefault: !0 }]
+    ] : []
   ), null;
 }
 const Open = (props) => /* @__PURE__ */ jsx(
@@ -962,7 +1012,7 @@ const Open = (props) => /* @__PURE__ */ jsx(
   Dot,
   ODot
 };
-var container$4 = "bexn7q1", dimmed$2 = "bexn7q2", edgePathBg = "bexn7q3", markerContext = "bexn7q4", controlPoint = "bexn7q5", controlDragging = "bexn7q6", cssEdgePath = "bexn7q8", varLabelX = "var(--bexn7q9)", varLabelY = "var(--bexn7qa)", edgeLabel = "bexn7qc", stepEdgeNumber = "bexn7qd", edgeLabelText = "bexn7qe";
+var container$4 = "bexn7q1", dimmed$2 = "bexn7q2", edgePathBg = "bexn7q3", markerContext = "bexn7q4", controlPoint = "bexn7q5", controlDragging = "bexn7q6", cssEdgePath = "bexn7q8", stepEdgeNumber = "bexn7q9", varLabelX = "var(--bexn7qa)", varLabelY = "var(--bexn7qb)", edgeLabel = "bexn7qd", edgeLabelText = "bexn7qe";
 function getNodeIntersectionFromCenterToPoint(intersectionNode, { x: x1, y: y1 }) {
   const {
     width: intersectionNodeWidth,
@@ -1003,7 +1053,7 @@ function bezierPath(bezierSpline) {
   }
   return invariant(points.length === 0, "all points should be consumed"), path;
 }
-const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
+const isSame = (a, b) => Math.abs(a - b) < 2.5, 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) && 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({
@@ -1019,11 +1069,12 @@ 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, isEdgePathEditable, isHovered, isDimmed } = useDiagramState((s) => ({
-    isEdgePathEditable: s.readonly !== !0 && s.experimentalEdgeEditing === !0,
+  const [isControlPointDragging, setIsControlPointDragging] = useState(!1), diagramStore = useDiagramStoreApi(), xyflowStore = useXYStoreApi(), { isActive, isEdgePathEditable, isHovered, isDimmed, hasOpenSourceRelation } = useDiagramState((s) => ({
+    isEdgePathEditable: s.readonly !== !0 && s.experimentalEdgeEditing === !0 && s.focusedNodeId === null && s.activeDynamicViewStep === null,
     isActive: s.focusedNodeId === source || s.focusedNodeId === target || s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum,
     isHovered: s.hoveredEdgeId === id,
-    isDimmed: s.dimmed.has(id)
+    isDimmed: s.dimmed.has(id),
+    hasOpenSourceRelation: !!s.onOpenSourceRelation
   })), { 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: {
@@ -1045,7 +1096,6 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
   });
   let edgePath;
   if (isModified) {
-    labelX = labelPos.x, labelY = labelPos.y;
     const sourceCenterPos = { x: sourceX, y: sourceY }, targetCenterPos = { x: targetX, y: targetY }, points = diagramEdge.dir === "back" ? [
       targetCenterPos,
       getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos),
@@ -1084,9 +1134,9 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
       });
     },
     [labelPos],
-    100,
+    50,
     300
-  );
+  ), (isModified || isControlPointDragging) && (labelX = labelPos.x, labelY = labelPos.y);
   const onControlPointerDown = (index, e) => {
     const { domNode } = xyflowStore.getState();
     if (!domNode || e.pointerType !== "mouse")
@@ -1105,22 +1155,35 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
     e.stopPropagation();
     let hasMoved = !1, pointer = { x: e.clientX, y: e.clientY };
     const onPointerMove = (e2) => {
-      if (!isSamePoint(pointer, [e2.clientX, e2.clientY])) {
+      if (hasMoved || !isSamePoint(pointer, [e2.clientX, 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),
-          y: Math.round(y)
-        }, xyflow.updateEdgeData(id, { controlPoints: newControlPoints });
+        const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: !1 });
+        xyflow.updateEdgeData(id, (xyedge) => {
+          const cp = (xyedge.data.controlPoints ?? controlPoints).slice();
+          return cp[index] = {
+            x: Math.round(x),
+            y: Math.round(y)
+          }, {
+            controlPoints: cp
+          };
+        });
       }
-    }, onPointerUp = () => {
-      domNode.removeEventListener("pointermove", onPointerMove), domNode.removeEventListener("pointerup", onPointerUp), (hasMoved || wasCanceled) && diagramStore.getState().scheduleSaveManualLayout(), setIsControlPointDragging(!1);
+      e2.stopPropagation();
+    }, onPointerUp = (e2) => {
+      domNode.removeEventListener("pointermove", onPointerMove, {
+        capture: !0
+      }), hasMoved && e2.stopPropagation(), (hasMoved || wasCanceled) && diagramStore.getState().scheduleSaveManualLayout(), setIsControlPointDragging(!1);
     };
-    domNode.addEventListener("pointermove", onPointerMove), domNode.addEventListener("pointerup", onPointerUp, { once: !0 });
+    domNode.addEventListener("pointermove", onPointerMove, {
+      capture: !0
+    }), domNode.addEventListener("pointerup", onPointerUp, {
+      once: !0,
+      capture: !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, labelZIndex = 1 + (isHovered ? ZIndexes.Element : edgeLookup.get(id).zIndex ?? ZIndexes.Edge);
+  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null, MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null, labelZIndex = 1 + (isHovered ? ZIndexes.Element : edgeLookup.get(id).zIndex ?? ZIndexes.Edge), relationId = first(data.edge.relations), showOpenSourceRelation = hasOpenSourceRelation && relationId !== void 0;
   return /* @__PURE__ */ jsxs(
     "g",
     {
@@ -1206,13 +1269,17 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
             zIndex: labelZIndex,
             isHovered,
             isActive,
-            isStepEdge
+            isStepEdge,
+            onClick: showOpenSourceRelation && ((e) => {
+              var _a, _b;
+              e.stopPropagation(), (_b = (_a = diagramStore.getState()).onOpenSourceRelation) == null || _b.call(_a, relationId);
+            })
           }
         )
       ]
     }
   );
-}, isEqualProps$2), EdgeLabel = memo(({
+}, isEqualProps$2), EdgeLabel = ({
   isDimmed,
   color,
   isModified,
@@ -1224,7 +1291,8 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
   stepNum,
   isHovered,
   isActive,
-  zIndex
+  zIndex,
+  onClick
 }) => /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
   Box,
   {
@@ -1252,162 +1320,17 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
       "data-edge-hovered": isHovered,
       "data-edge-active": isActive
     },
+    onClick: onClick || void 0,
     children: [
       stepNum !== null && /* @__PURE__ */ jsx(Box, { className: stepEdgeNumber, children: stepNum }),
       isTruthy(label == null ? void 0 : label.text) && /* @__PURE__ */ jsx(Box, { className: edgeLabelText, children: label.text })
     ]
   }
-) }), deepEqual);
-class Rect {
-  constructor() {
-    __publicField(this, "id");
-    __publicField(this, "minX", new Variable());
-    __publicField(this, "minY", new Variable());
-    __publicField(this, "maxX", new Variable());
-    __publicField(this, "maxY", new Variable());
-  }
-  get x() {
-    return this.minX;
-  }
-  get y() {
-    return this.minY;
-  }
-  get positionAbsolute() {
-    return {
-      x: this.x.value(),
-      y: this.y.value()
-    };
-  }
-  get dimensions() {
-    return {
-      width: this.maxX.value() - this.minX.value(),
-      height: this.maxY.value() - this.minY.value()
-    };
-  }
-  // Position relative to parent
-  get position() {
-    const positionAbsolute = this.positionAbsolute;
-    if (!this.parent)
-      return positionAbsolute;
-    const parentPosition = this.parent.positionAbsolute;
-    return {
-      x: positionAbsolute.x - parentPosition.x,
-      y: positionAbsolute.y - parentPosition.y
-    };
-  }
-}
-class Compound extends Rect {
-  constructor(solver, xynode, parent = null) {
-    super();
-    __publicField(this, "children", []);
-    this.solver = solver, this.parent = parent, this.id = xynode.id, solver.createConstraint(this.maxX, Operator.Ge, this.minX), solver.createConstraint(this.maxY, Operator.Ge, this.minY), parent && parent.addChild(this);
-  }
-  addChild(rect) {
-    this.children.push(rect);
-    const leftPadding = new Expression(
-      rect.minX,
-      [-1, this.minX]
-    ), { weak } = Strength;
-    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, 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, 41, weak);
-    const bottomPadding = new Expression(
-      this.maxY,
-      [-1, rect.maxY]
-    );
-    this.solver.createConstraint(bottomPadding, Operator.Ge, 40), this.solver.createConstraint(bottomPadding, Operator.Eq, 41, weak);
-  }
-}
-class Leaf extends Rect {
-  constructor(solver, xynode, parent = null, isEditing = !1) {
-    super(), this.parent = parent, this.isEditing = isEditing, this.id = xynode.id;
-    const x = Math.ceil(xynode.internals.positionAbsolute.x), y = Math.ceil(xynode.internals.positionAbsolute.y), { width, height } = getNodeDimensions(xynode);
-    if (this.maxX = new Expression(this.minX, Math.ceil(width)), this.maxY = new Expression(this.minY, Math.ceil(height)), isEditing) {
-      const superStrong = Strength.create(100, 0, 0);
-      solver.addEditVariable(this.minX, superStrong), solver.addEditVariable(this.minY, superStrong), solver.suggestValue(this.minX, x), solver.suggestValue(this.minY, y);
-    } else {
-      const halfMedium = Strength.create(0, 1, 0, 0.5);
-      solver.createConstraint(this.minX, Operator.Eq, x, halfMedium), solver.createConstraint(this.minY, Operator.Eq, y, halfMedium);
-    }
-    parent && parent.addChild(this);
-  }
-}
-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)
-    isNullish(xynode.parentId) && traverse.push({
-      xynode,
-      parent: null
-    });
-  for (; traverse.length > 0; ) {
-    const { xynode, parent } = traverse.shift(), isDragging = xynode.dragging === !0 || xynode.id === draggingNodeId, shouldTraverse = !isDragging && xynode.type === "compound" && isAncestor(xynode.id, draggingNodeId), rect = shouldTraverse ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging);
-    rects.set(xynode.id, rect), shouldTraverse && ((_a = parentLookup.get(xynode.id)) == null || _a.forEach((child) => {
-      traverse.push({
-        xynode: child,
-        parent: rect
-      });
-    }));
-  }
-  solver.updateVariables(), solver.maxIterations = 1e3;
-  const rectsToUpdate = [...rects.values()].filter((r) => r.id !== draggingNodeId);
-  function updateXYFlowNodes() {
-    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) {
-    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,
-    updateXYFlowNodes
-  };
-}
-function useLayoutConstraints() {
-  const diagramApi = useDiagramStoreApi(), solverRef = useRef();
-  return useMemo(() => ({
-    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) => {
-      diagramApi.getState().scheduleSaveManualLayout(), solverRef.current = void 0;
-    }
-  }), [diagramApi]);
-}
+) });
 function NavigateToBtn({ xynodeId, className }) {
   const diagramApi = useDiagramStoreApi();
   return /* @__PURE__ */ jsx(
-    ActionIcon,
+    ActionIcon$2,
     {
       className: clsx("nodrag nopan", className),
       radius: "md",
@@ -1797,12 +1720,13 @@ const Text = Text$1.withProps({
   width,
   height
 }) {
-  const store = useDiagramStoreApi(), { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s) => ({
+  const store = useDiagramStoreApi(), { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive, hasGoToSource } = useDiagramState((s) => ({
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
     isInteractive: s.nodesDraggable || s.nodesSelectable || !!s.onNavigateTo,
     isHovercards: s.showElementLinks,
-    hasOnNavigateTo: !!s.onNavigateTo
+    hasOnNavigateTo: !!s.onNavigateTo,
+    hasGoToSource: !!s.onOpenSourceElement
   })), isNavigable = hasOnNavigateTo && !!element.navigateTo, w = toDomPrecision(width ?? element.width), h = toDomPrecision(height ?? element.height);
   let animate = "idle";
   switch (!0) {
@@ -1936,33 +1860,182 @@ const Text = Text$1.withProps({
   const RenderIcon = store.getState().renderIcon, icon = RenderIcon ? /* @__PURE__ */ jsx(RenderIcon, { node }) : null;
   return icon ? /* @__PURE__ */ jsx("div", { className: clsx(elementIcon, "likec4-element-icon"), children: icon }) : null;
 };
-function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi(), lastClickTimestamp = useRef(), dblclickTimeout = useRef(), hoveredNodeFromOnEdgeEnterRef = useRef("");
-  return useMemo(() => {
-    const dbclickLock = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
-      dblclickTimeout.current = void 0;
-    }, 250), !1), lastClickWasRecent = (ms = 1500) => lastClickTimestamp.current && Date.now() - lastClickTimestamp.current < ms;
+class Rect {
+  constructor() {
+    __publicField(this, "id");
+    __publicField(this, "minX", new Variable());
+    __publicField(this, "minY", new Variable());
+    __publicField(this, "maxX", new Variable());
+    __publicField(this, "maxY", new Variable());
+  }
+  get x() {
+    return this.minX;
+  }
+  get y() {
+    return this.minY;
+  }
+  get positionAbsolute() {
     return {
-      onDoubleClick: (event) => {
-        const {
-          fitViewEnabled,
-          onCanvasDblClick,
-          resetLastClicked,
-          fitDiagram
-        } = diagramApi.getState();
-        fitViewEnabled && (fitDiagram(), onCanvasDblClick || event.stopPropagation()), resetLastClicked(), onCanvasDblClick == null || onCanvasDblClick(event);
-      },
-      onPaneClick: (event) => {
-        if (dbclickLock())
-          return;
-        const {
-          focusedNodeId,
+      x: this.x.value(),
+      y: this.y.value()
+    };
+  }
+  get dimensions() {
+    return {
+      width: this.maxX.value() - this.minX.value(),
+      height: this.maxY.value() - this.minY.value()
+    };
+  }
+  // Position relative to parent
+  get position() {
+    const positionAbsolute = this.positionAbsolute;
+    if (!this.parent)
+      return positionAbsolute;
+    const parentPosition = this.parent.positionAbsolute;
+    return {
+      x: positionAbsolute.x - parentPosition.x,
+      y: positionAbsolute.y - parentPosition.y
+    };
+  }
+}
+class Compound extends Rect {
+  constructor(solver, xynode, parent = null) {
+    super();
+    __publicField(this, "children", []);
+    this.solver = solver, this.parent = parent, this.id = xynode.id, solver.createConstraint(this.maxX, Operator.Ge, this.minX), solver.createConstraint(this.maxY, Operator.Ge, this.minY), parent && parent.addChild(this);
+  }
+  addChild(rect) {
+    this.children.push(rect);
+    const leftPadding = new Expression(
+      rect.minX,
+      [-1, this.minX]
+    ), { weak } = Strength;
+    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, 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, 41, weak);
+    const bottomPadding = new Expression(
+      this.maxY,
+      [-1, rect.maxY]
+    );
+    this.solver.createConstraint(bottomPadding, Operator.Ge, 40), this.solver.createConstraint(bottomPadding, Operator.Eq, 41, weak);
+  }
+}
+class Leaf extends Rect {
+  constructor(solver, xynode, parent = null, isEditing = !1) {
+    super(), this.parent = parent, this.isEditing = isEditing, this.id = xynode.id;
+    const x = Math.ceil(xynode.internals.positionAbsolute.x), y = Math.ceil(xynode.internals.positionAbsolute.y), { width, height } = getNodeDimensions(xynode);
+    if (this.maxX = new Expression(this.minX, Math.ceil(width)), this.maxY = new Expression(this.minY, Math.ceil(height)), isEditing) {
+      const superStrong = Strength.create(100, 0, 0);
+      solver.addEditVariable(this.minX, superStrong), solver.addEditVariable(this.minY, superStrong), solver.suggestValue(this.minX, x), solver.suggestValue(this.minY, y);
+    } else {
+      const halfMedium = Strength.create(0, 1, 0, 0.5);
+      solver.createConstraint(this.minX, Operator.Eq, x, halfMedium), solver.createConstraint(this.minY, Operator.Eq, y, halfMedium);
+    }
+    parent && parent.addChild(this);
+  }
+}
+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)
+    isNullish(xynode.parentId) && traverse.push({
+      xynode,
+      parent: null
+    });
+  for (; traverse.length > 0; ) {
+    const { xynode, parent } = traverse.shift(), isDragging = xynode.dragging === !0 || xynode.id === draggingNodeId, shouldTraverse = !isDragging && xynode.type === "compound" && isAncestor(xynode.id, draggingNodeId), rect = shouldTraverse ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging);
+    rects.set(xynode.id, rect), shouldTraverse && ((_a = parentLookup.get(xynode.id)) == null || _a.forEach((child) => {
+      traverse.push({
+        xynode: child,
+        parent: rect
+      });
+    }));
+  }
+  solver.updateVariables(), solver.maxIterations = 1e3;
+  const rectsToUpdate = [...rects.values()].filter((r) => r.id !== draggingNodeId);
+  function updateXYFlowNodes() {
+    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) {
+    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,
+    updateXYFlowNodes
+  };
+}
+function useLayoutConstraints() {
+  const diagramApi = useDiagramStoreApi(), solverRef = useRef();
+  return useMemo(() => ({
+    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) => {
+      diagramApi.getState().scheduleSaveManualLayout(), solverRef.current = void 0;
+    }
+  }), [diagramApi]);
+}
+function useXYFlowEvents() {
+  const diagramApi = useDiagramStoreApi(), lastClickTimestamp = useRef(), dblclickTimeout = useRef(), hoveredNodeFromOnEdgeEnterRef = useRef("");
+  return useMemo(() => {
+    const dbclickLock = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
+      dblclickTimeout.current = void 0;
+    }, 250), !1), lastClickWasRecent = (ms = 1500) => lastClickTimestamp.current && Date.now() - lastClickTimestamp.current < ms;
+    return {
+      onDoubleClick: (event) => {
+        const {
+          onCanvasDblClick,
+          zoomable,
+          xystore,
+          viewportChanged,
+          fitDiagram,
+          resetLastClicked
+        } = diagramApi.getState();
+        resetLastClicked(), xystore.getState().resetSelectedElements(), onCanvasDblClick || event.stopPropagation(), zoomable && viewportChanged && fitDiagram(), onCanvasDblClick == null || onCanvasDblClick(event);
+      },
+      onPaneClick: (event) => {
+        if (dbclickLock())
+          return;
+        const {
+          focusedNodeId,
           activeDynamicViewStep,
           fitDiagram,
           onCanvasClick,
+          xystore,
           resetLastClicked
         } = diagramApi.getState();
-        (focusedNodeId ?? activeDynamicViewStep) !== null && (fitDiagram(), onCanvasClick || event.stopPropagation()), resetLastClicked(), onCanvasClick == null || onCanvasClick(event);
+        (focusedNodeId ?? activeDynamicViewStep) !== null && (fitDiagram(), onCanvasClick || event.stopPropagation()), resetLastClicked(), xystore.getState().resetSelectedElements(), onCanvasClick == null || onCanvasClick(event);
       },
       onNodeContextMenu: (event, xynode) => {
         var _a, _b;
@@ -1990,22 +2063,33 @@ function useXYFlowEvents() {
           fitDiagram,
           focusOnNode,
           onNodeClick,
+          xystore,
           enableFocusMode,
           lastClickedNodeId,
-          setLastClickedNode
+          nodesSelectable,
+          setLastClickedNode,
+          onOpenSourceElement
         } = diagramApi.getState();
         setLastClickedNode(xynode.id);
         const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id, clickedRecently = lastClickedNodeId === xynode.id && lastClickWasRecent();
-        if (enableFocusMode) {
-          let stopPropagation = !1;
+        if (clickedRecently && onOpenSourceElement && onOpenSourceElement(xynode.data.element.id), enableFocusMode || nodesSelectable) {
+          let stopPropagation = !0;
           switch (!0) {
-            case (!focusedNodeId && clickedRecently):
-            case shallChangeFocus:
-              stopPropagation = !0, focusOnNode(xynode.id);
+            case (enableFocusMode && !focusedNodeId && clickedRecently):
+            case (enableFocusMode && shallChangeFocus): {
+              focusOnNode(xynode.id);
               break;
-            case (focusedNodeId === xynode.id && clickedRecently):
-              stopPropagation = !0, fitDiagram();
+            }
+            case (enableFocusMode && focusedNodeId === xynode.id && clickedRecently): {
+              fitDiagram();
+              break;
+            }
+            case nodesSelectable: {
+              xystore.getState().addSelectedNodes([xynode.id]);
               break;
+            }
+            default:
+              stopPropagation = !1;
           }
           !onNodeClick && stopPropagation && event.stopPropagation();
         }
@@ -2033,6 +2117,8 @@ function useXYFlowEvents() {
           activateDynamicStep,
           activeDynamicViewStep,
           focusedNodeId,
+          xystore,
+          nodesSelectable,
           focusOnNode,
           onEdgeClick,
           setLastClickedEdge
@@ -2046,7 +2132,7 @@ function useXYFlowEvents() {
             return;
           }
         }
-        isEdgeOfFocusedNode && (focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()), onEdgeClick == null || onEdgeClick({
+        isEdgeOfFocusedNode ? (focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()) : nodesSelectable && (xystore.getState().addSelectedEdges([xyedge.id]), onEdgeClick || event.stopPropagation()), onEdgeClick == null || onEdgeClick({
           edge: xyedge.data.edge,
           xyedge,
           event
@@ -2150,11 +2236,11 @@ function XYFlow({
     hasOnEdgeContextMenu,
     translateX,
     translateY
-  } = useDiagramState(selector$1, shallowEqual), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
+  } = useDiagramState(selector$1, shallowEqual), [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
   return useOnViewportChange({
     onEnd: ({ x, y, zoom }) => {
       const roundedX = Math.round(x), roundedY = Math.round(y);
-      (x !== roundedX || y !== roundedY) && xyflowApi.setState({ transform: [roundedX, roundedY, zoom] });
+      (x !== roundedX || y !== roundedY) && xyflowApi.setState({ transform: [roundedX, roundedY, zoom] }), setZoomOnDoubleClick(zoomable && zoom < 1.1);
     }
   }), /* @__PURE__ */ jsx(
     ReactFlow,
@@ -2171,7 +2257,7 @@ function XYFlow({
       ...!zoomable && {
         zoomActivationKeyCode: null
       },
-      maxZoom: zoomable ? 1.9 : 1,
+      maxZoom: zoomable ? MaxZoom : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView,
       fitViewOptions: useMemo(() => ({
@@ -2206,7 +2292,7 @@ function XYFlow({
         onNodeDragStop: layoutConstraints.onNodeDragStop
       },
       nodeDragThreshold: 3,
-      zoomOnDoubleClick: !1,
+      zoomOnDoubleClick,
       elevateNodesOnSelect: !1,
       selectNodesOnDrag: !1,
       onNodesChange,
@@ -2236,82 +2322,6 @@ 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 {
-    hasStepBack,
-    hasStepForward,
-    goBack,
-    goForward
-  } = useDiagramState(historySelector);
-  return /* @__PURE__ */ jsx(
-    Group,
-    {
-      className: clsx(
-        "react-flow__panel",
-        panel$1,
-        "likec4-navigation-panel"
-      ),
-      gap: "xs",
-      children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-        hasStepBack && /* @__PURE__ */ jsx(
-          m.div,
-          {
-            layout: !0,
-            initial: { opacity: 0.05, transform: "translateX(-10px)" },
-            animate: { opacity: 1, transform: "translateX(0)" },
-            exit: {
-              opacity: 0.05,
-              transform: "translateX(-10px)"
-            },
-            children: /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                variant: "light",
-                color: "gray",
-                onClick: (e) => {
-                  e.stopPropagation(), goBack();
-                },
-                children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-              }
-            )
-          },
-          "back"
-        ),
-        hasStepForward && /* @__PURE__ */ jsx(
-          m.div,
-          {
-            layout: !0,
-            initial: { opacity: 0.05, transform: "translateX(10px)" },
-            animate: { opacity: 1, transform: "translateX(0)" },
-            exit: {
-              opacity: 0,
-              transform: "translateX(10px)"
-            },
-            children: /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                variant: "light",
-                color: "gray",
-                onClick: (e) => {
-                  e.stopPropagation(), goForward();
-                },
-                children: /* @__PURE__ */ jsx(IconChevronRight, {})
-              }
-            )
-          },
-          "forward"
-        )
-      ] })
-    }
-  );
-}
 var container$1 = "hbkbtj0", card = "hbkbtj1", title = "hbkbtj2", description = "hbkbtj3";
 const selector = (s) => ({
   id: s.view.id,
@@ -2343,62 +2353,75 @@ function DiagramTitlePanel() {
           radius: "sm",
           className: card,
           withBorder: !0,
-          p: "md",
-          pb: isCollapsed ? "sm" : "md",
+          p: isCollapsed ? "sm" : "md",
           onDoubleClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx(CardSection, { mb: isCollapsed ? 10 : "sm", children: /* @__PURE__ */ jsx(
+            isCollapsed && /* @__PURE__ */ jsx(CardSection, { children: /* @__PURE__ */ jsx(
               Button,
               {
                 fullWidth: !0,
-                size: "xs",
-                h: "sm",
+                justify: "stretch",
+                size: "sm",
                 py: 2,
                 radius: "0",
-                variant: isCollapsed ? "light" : "subtle",
-                color: "gray",
+                variant: "subtle",
+                color: "dark",
                 onClick: toggle,
-                children: /* @__PURE__ */ jsx(IconMenu, { size: 11, opacity: 0.7 })
+                children: /* @__PURE__ */ jsx(Text$1, { inline: !0, fw: 500, fz: "xs", c: "gray", children: title$12 })
               }
             ) }),
-            /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: isCollapsed ? 0 : "sm", children: [
-              /* @__PURE__ */ jsx(
-                Text$1,
-                {
-                  component: "div",
-                  flex: "1",
-                  size: isCollapsed ? "sm" : "lg",
-                  fw: 500,
-                  lh: 1.1,
-                  className: title,
-                  children: title$12
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Text$1,
+            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(CardSection, { mb: "sm", children: /* @__PURE__ */ jsx(
+                Button,
                 {
-                  hidden: isCollapsed,
-                  component: "div",
-                  flex: "0 0 auto",
-                  inline: !0,
+                  fullWidth: !0,
                   size: "xs",
-                  fz: 9,
-                  fw: 500,
-                  c: "dimmed",
-                  style: {
-                    userSelect: "all"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
-                      "id:",
-                      " "
-                    ] }),
-                    id
-                  ]
+                  h: "sm",
+                  py: 2,
+                  radius: "0",
+                  variant: "subtle",
+                  color: "gray",
+                  onClick: toggle,
+                  children: /* @__PURE__ */ jsx(IconMenu, { size: 11, opacity: 0.7 })
                 }
-              )
-            ] }),
-            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              ) }),
+              /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: "sm", children: [
+                /* @__PURE__ */ jsx(
+                  Text$1,
+                  {
+                    component: "div",
+                    flex: "1",
+                    size: "md",
+                    fw: 500,
+                    lh: 1.1,
+                    className: title,
+                    children: title$12
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Text$1,
+                  {
+                    hidden: isCollapsed,
+                    component: "div",
+                    flex: "0 0 auto",
+                    inline: !0,
+                    size: "xs",
+                    fz: 9,
+                    fw: 500,
+                    c: "dimmed",
+                    style: {
+                      userSelect: "all"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
+                        "id:",
+                        " "
+                      ] }),
+                      id
+                    ]
+                  }
+                )
+              ] }),
               description$12 && /* @__PURE__ */ jsx(
                 Spoiler,
                 {
@@ -2573,7 +2596,7 @@ const {
     return null;
   if (nodes.length !== selectedNodeIds.length)
     throw new Error("NodeOptions: nodes and props.nodes should have the same length");
-  const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes, showOpacityOption = firstNode.type === "compound" && (rest.length === 0 || rest.every((node) => node.type === "compound")), triggerChange = (style) => {
+  const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes, showGoToSource = rest.length === 0 && diagramApi.getState().onOpenSourceElement, showOpacityOption = firstNode.type === "compound" && (rest.length === 0 || rest.every((node) => node.type === "compound")), triggerChange = (style) => {
     const targets = nodes.map((node) => node.data.element.id);
     invariant(hasAtLeast$1(targets, 1), "At least one target is required"), diagramApi.getState().triggerChangeElementStyle({
       op: "change-element-style",
@@ -2582,12 +2605,36 @@ const {
     });
   };
   return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(Text$1, { fz: rem(9), fw: "500", c: "dimmed", children: [
-        "ELEMENT",
-        rest.length > 0 ? "S" : ""
+    /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", align: "flex-start", children: [
+      /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
+        /* @__PURE__ */ jsxs(Text$1, { fz: rem(9), fw: "500", c: "dimmed", children: [
+          "ELEMENT",
+          rest.length > 0 ? "S" : ""
+        ] }),
+        /* @__PURE__ */ jsx(Text$1, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: !0, children: rest.length === 0 ? firstNode.data.element.title : "[ multiple ]" })
       ] }),
-      /* @__PURE__ */ jsx(Text$1, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: !0, children: rest.length === 0 ? firstNode.data.element.title : "[ multiple ]" })
+      showGoToSource && /* @__PURE__ */ jsx(Box, { flex: 0, children: /* @__PURE__ */ jsx(
+        ActionIcon$2,
+        {
+          size: "sm",
+          variant: "light",
+          color: "gray",
+          onClick: (e) => {
+            var _a, _b;
+            e.stopPropagation(), (_b = (_a = diagramApi.getState()).onOpenSourceElement) == null || _b.call(_a, firstNode.data.element.id);
+          },
+          children: /* @__PURE__ */ jsx(
+            IconFileSymlink,
+            {
+              stroke: 1.2,
+              style: {
+                width: "70%",
+                height: "70%"
+              }
+            }
+          )
+        }
+      ) })
     ] }),
     showShapeOption && /* @__PURE__ */ jsx(
       ShapeOption,
@@ -2645,7 +2692,7 @@ function Colors({
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 400, closeDelay: 300, children: [
     /* @__PURE__ */ jsx(Divider, { label: "color", labelPosition: "left" }),
     /* @__PURE__ */ jsx(Flex, { mt: "xs", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: themedColors.map(({ key, value }) => /* @__PURE__ */ jsx(
-      Tooltip,
+      Tooltip$2,
       {
         label: key,
         fz: "xs",
@@ -2667,7 +2714,7 @@ function Colors({
       key
     )) }),
     /* @__PURE__ */ jsx(Flex, { mt: "sm", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: colors.map(({ key, value }) => /* @__PURE__ */ jsx(
-      Tooltip,
+      Tooltip$2,
       {
         label: key,
         fz: "xs",
@@ -2784,7 +2831,7 @@ function BorderStyleOption({
     }
   ) });
 }
-var panel = "_1lmzt1h0";
+var panel$1 = "_1lmzt1h0";
 function OptionsPanel() {
   const { isFocused, viewId } = useDiagramState((s) => ({
     viewId: s.view.id,
@@ -2813,7 +2860,7 @@ function OptionsPanel() {
         scale: 0.85
       },
       transition: { duration: 0.14 },
-      className: clsx("react-flow__panel", panel),
+      className: clsx("react-flow__panel", panel$1),
       style: {
         transformOrigin: "center right",
         maxWidth: "320px"
@@ -2823,6 +2870,323 @@ function OptionsPanel() {
     viewId
   ) });
 }
+const Tooltip$1 = Tooltip$2.withProps({
+  color: "gray",
+  fz: "xs",
+  position: "right",
+  openDelay: 400,
+  closeDelay: 100,
+  label: "",
+  children: null,
+  offset: 8,
+  transitionProps: { transition: "fade-right", duration: 200 }
+}), ActionIcon$1 = ActionIcon$2.withProps({
+  className: "action-icon",
+  variant: "light",
+  color: "gray"
+});
+var panel = "_1snasyb0", autolayoutIcon = "_1snasyb1", autolayoutIndicator = "_1snasyb2";
+const ActionIcon = ActionIcon$2.withProps({
+  size: "md",
+  variant: "subtle",
+  color: "gray"
+}), Tooltip = Tooltip$2.withProps({
+  color: "gray",
+  fz: "xs",
+  position: "right",
+  openDelay: 300,
+  label: "",
+  children: null,
+  offset: 5,
+  transitionProps: { transition: "fade", duration: 200 }
+}), ChangeAutoLayoutButton = (props) => {
+  const store = useDiagramStoreApi(), [rootRef, setRootRef] = useState(null), [controlsRefs, setControlsRefs] = useState({}), autoLayout = useDiagramState((s) => s.view.autoLayout), setControlRef = (name) => (node) => {
+    controlsRefs[name] = node, setControlsRefs(controlsRefs);
+  }, setAutoLayout = (layout) => (event) => {
+    var _a, _b;
+    event.stopPropagation(), (_b = (_a = store.getState()).onChange) == null || _b.call(_a, {
+      change: {
+        op: "change-autolayout",
+        layout
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "right-start",
+      clickOutsideEvents: [
+        "pointerdown"
+      ],
+      radius: "xs",
+      shadow: "lg",
+      offset: {
+        mainAxis: 10
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(
+          ActionIcon$2,
+          {
+            className: "action-icon",
+            variant: "light",
+            color: "gray",
+            children: /* @__PURE__ */ jsx(IconLayoutDashboard, { stroke: 1.3 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverDropdown, { className: "likec4-top-left-panel", p: 8, pt: 4, children: /* @__PURE__ */ jsxs(Box, { pos: "relative", ref: setRootRef, children: [
+          /* @__PURE__ */ jsx(
+            FloatingIndicator,
+            {
+              target: controlsRefs[autoLayout],
+              parent: rootRef,
+              className: autolayoutIndicator
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { mb: 10, children: /* @__PURE__ */ jsx(Text$1, { inline: !0, fz: "xs", c: "dimmed", fw: 500, children: "Auto layout:" }) }),
+          /* @__PURE__ */ jsx(TooltipGroup, { openDelay: 100, children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: 1, children: [
+            /* @__PURE__ */ jsx(Tooltip, { label: "Top to Bottom", children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                className: autolayoutIcon,
+                ref: setControlRef("TB"),
+                onClick: setAutoLayout("TB"),
+                children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(Group, { gap: 30, children: [
+              /* @__PURE__ */ jsx(Tooltip, { label: "Left to Right", children: /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  className: autolayoutIcon,
+                  ref: setControlRef("LR"),
+                  onClick: setAutoLayout("LR"),
+                  children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3, style: { rotate: "270deg" } })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Tooltip, { label: "Right to Left", children: /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  className: autolayoutIcon,
+                  ref: setControlRef("RL"),
+                  onClick: setAutoLayout("RL"),
+                  children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3, style: { rotate: "90deg" } })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(Tooltip, { label: "Bottom to Top", children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                className: autolayoutIcon,
+                ref: setControlRef("BT"),
+                onClick: setAutoLayout("BT"),
+                children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3, style: { rotate: "180deg" } })
+              }
+            ) })
+          ] }) })
+        ] }) })
+      ]
+    }
+  );
+}, historySelector = (s) => ({
+  showBurgerMenu: !!s.onBurgerMenuClick,
+  hasStepBack: s.navigationHistoryIndex > 0,
+  hasStepForward: s.navigationHistoryIndex < s.navigationHistory.length - 1
+}), BackwardForwardButtons = () => {
+  const store = useDiagramStoreApi(), {
+    showBurgerMenu,
+    hasStepBack,
+    hasStepForward
+  } = useDiagramState(historySelector);
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      className: "likec4-navigation-panel",
+      gap: "xs",
+      children: [
+        showBurgerMenu && /* @__PURE__ */ jsx(
+          ActionIcon$1,
+          {
+            onClick: (e) => {
+              var _a, _b;
+              e.stopPropagation(), (_b = (_a = store.getState()).onBurgerMenuClick) == null || _b.call(_a);
+            },
+            children: /* @__PURE__ */ jsx(IconMenu2, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+          hasStepBack && /* @__PURE__ */ jsx(
+            m.div,
+            {
+              layout: !0,
+              initial: { opacity: 0.05, transform: "translateX(-10px)" },
+              animate: { opacity: 1, transform: "translateX(0)" },
+              exit: {
+                opacity: 0.05,
+                transform: "translateX(-10px)"
+              },
+              children: /* @__PURE__ */ jsx(
+                ActionIcon$1,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation(), store.getState().goBack();
+                  },
+                  children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+                }
+              )
+            },
+            "back"
+          ),
+          hasStepForward && /* @__PURE__ */ jsx(
+            m.div,
+            {
+              layout: !0,
+              initial: { opacity: 0.05, transform: "translateX(10px)" },
+              animate: { opacity: 1, transform: "translateX(0)" },
+              exit: {
+                opacity: 0,
+                transform: "translateX(10px)"
+              },
+              children: /* @__PURE__ */ jsx(
+                ActionIcon$1,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation(), store.getState().goForward();
+                  },
+                  children: /* @__PURE__ */ jsx(IconChevronRight, {})
+                }
+              )
+            },
+            "forward"
+          )
+        ] })
+      ]
+    }
+  );
+}, LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
+  HoverCard,
+  {
+    position: "right-start",
+    openDelay: 200,
+    closeDelay: 100,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsx(
+        ActionIcon$1,
+        {
+          className: "action-icon",
+          variant: "light",
+          color: "orange",
+          children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
+        Notification,
+        {
+          color: "orange",
+          withBorder: !1,
+          withCloseButton: !1,
+          title: "Manual layout issues",
+          children: [
+            /* @__PURE__ */ jsxs(Text$1, { mt: 2, size: "sm", lh: "xs", children: [
+              "View contains new elements or their sizes have changed,",
+              /* @__PURE__ */ jsx("br", {}),
+              "last manual layout can not be applied."
+            ] }),
+            /* @__PURE__ */ jsxs(Text$1, { mt: "xs", size: "sm", lh: "xs", children: [
+              "Update view predicates or remove ",
+              /* @__PURE__ */ jsx(Code, { children: "@likec4-generated" })
+            ] })
+          ]
+        }
+      ) })
+    ]
+  }
+), TopLeftPanel = () => {
+  const store = useDiagramStoreApi(), {
+    showNavigationButtons,
+    showFitDiagram,
+    showLayoutDriftWarning,
+    showChangeAutoLayout,
+    portalProps: _portalProps,
+    showGoToSource
+  } = useDiagramState((s) => {
+    const isNotActive = s.activeDynamicViewStep === null && s.focusedNodeId === null, target = s.getContainer();
+    return {
+      showNavigationButtons: !!s.onBurgerMenuClick || s.showNavigationButtons && !!s.onNavigateTo,
+      showFitDiagram: s.fitViewEnabled && s.zoomable && s.viewportChanged,
+      showLayoutDriftWarning: s.readonly !== !0 && s.view.hasLayoutDrift === !0 && isNotActive,
+      showChangeAutoLayout: s.readonly !== !0 && !!s.onChange && isNotActive,
+      showGoToSource: !!s.onOpenSourceView,
+      portalProps: target ? { target } : void 0
+    };
+  }), portalProps = _portalProps ? { portalProps: _portalProps } : void 0;
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: clsx(
+        "react-flow__panel",
+        panel,
+        "likec4-top-left-panel"
+      ),
+      onClick: (e) => e.stopPropagation(),
+      gap: "xs",
+      children: [
+        showNavigationButtons && /* @__PURE__ */ jsx(BackwardForwardButtons, {}),
+        showGoToSource && /* @__PURE__ */ jsx(Tooltip$1, { label: "Go to source", ...portalProps, children: /* @__PURE__ */ jsx(
+          ActionIcon$1,
+          {
+            className: "action-icon",
+            onClick: (e) => {
+              var _a, _b;
+              e.stopPropagation(), (_b = (_a = store.getState()).onOpenSourceView) == null || _b.call(_a);
+            },
+            children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
+          }
+        ) }),
+        showChangeAutoLayout && /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
+        /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+          showLayoutDriftWarning && /* @__PURE__ */ jsx(
+            m.div,
+            {
+              initial: { opacity: 0.05, transform: "translateX(-40%)" },
+              animate: { opacity: 1, transform: "translateX(0)" },
+              exit: {
+                opacity: 0,
+                transform: "translateX(-40%)"
+              },
+              children: /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps })
+            },
+            "layout"
+          ),
+          showFitDiagram && /* @__PURE__ */ jsx(
+            m.div,
+            {
+              initial: { opacity: 0.05, transform: "translateX(-20%)" },
+              animate: { opacity: 1, transform: "translateX(0)" },
+              exit: {
+                opacity: 0,
+                transform: "translateX(-30%)"
+              },
+              children: /* @__PURE__ */ jsx(Tooltip$1, { label: "Center diagram", ...portalProps, children: /* @__PURE__ */ jsx(
+                ActionIcon$1,
+                {
+                  className: "action-icon",
+                  onClick: (e) => {
+                    e.stopPropagation(), store.getState().fitDiagram();
+                  },
+                  children: /* @__PURE__ */ jsx(IconFocusCentered, {})
+                }
+              ) })
+            },
+            "fit-view"
+          )
+        ] })
+      ]
+    }
+  );
+};
+TopLeftPanel.displayName = "TopLeftPanel";
 function literalToEnum(value) {
   switch (value) {
     case "dots":
@@ -2845,8 +3209,7 @@ const XYFlowInner = memo(function({
   children,
   background,
   controls,
-  showDiagramTitle,
-  showNavigationButtons
+  showDiagramTitle
 }) {
   const {
     isDynamicView,
@@ -2862,10 +3225,10 @@ const XYFlowInner = memo(function({
   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, {}),
+    /* @__PURE__ */ jsx(TopLeftPanel, {}),
+    readonly !== !0 && /* @__PURE__ */ jsx(OptionsPanel, {}),
     showDiagramTitle === !0 && !isDynamicViewActive && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
     isDynamicView && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
-    showNavigationButtons && /* @__PURE__ */ jsx(BackwardForwardPanel, {}),
     children
   ] });
 }, shallowEqual);
@@ -2884,9 +3247,8 @@ function LikeC4Diagram({
   controls = !1,
   showElementLinks = !0,
   showDiagramTitle = !0,
-  showNavigationButtons = !1,
   enableDynamicViewWalkthrough = !1,
-  enableFocusMode = readonly,
+  enableFocusMode = !1,
   initialWidth,
   initialHeight,
   keepAspectRatio = !1,
@@ -2900,8 +3262,13 @@ function LikeC4Diagram({
   onNavigateTo,
   onNodeClick,
   onNodeContextMenu,
-  onEditorCommand,
-  renderIcon
+  onOpenSourceElement,
+  onOpenSourceView,
+  onOpenSourceRelation,
+  onBurgerMenuClick,
+  renderIcon,
+  where,
+  showNavigationButtons = !!onNavigateTo
 }) {
   const initialRef = useRef({
     defaultNodes: [],
@@ -2909,7 +3276,7 @@ function LikeC4Diagram({
     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(
+  return readonly !== !0 && where && console.warn("where filter is only supported in readonly mode"), /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, strict: !0, children: /* @__PURE__ */ jsx(
     ReactFlowProvider,
     {
       fitView,
@@ -2926,11 +3293,13 @@ function LikeC4Diagram({
           fitViewEnabled: fitView,
           fitViewPadding,
           showElementLinks,
+          showNavigationButtons,
           nodesDraggable,
           nodesSelectable,
           experimentalEdgeEditing,
           enableDynamicViewWalkthrough,
           enableFocusMode,
+          whereFilter: where ?? null,
           renderIcon: renderIcon ?? null,
           onCanvasClick: onCanvasClick ?? null,
           onCanvasContextMenu: onCanvasContextMenu ?? null,
@@ -2941,14 +3310,16 @@ function LikeC4Diagram({
           onChange: onChange ?? null,
           onNavigateTo: onNavigateTo ?? null,
           onCanvasDblClick: onCanvasDblClick ?? null,
-          onEditorCommand: onEditorCommand ?? null,
+          onOpenSourceView: onOpenSourceView ?? null,
+          onOpenSourceElement: onOpenSourceElement ?? null,
+          onOpenSourceRelation: onOpenSourceRelation ?? null,
+          onBurgerMenuClick: onBurgerMenuClick ?? null,
           children: /* @__PURE__ */ jsx(
             LikeC4DiagramInnerMemo,
             {
               controls,
               background,
-              showDiagramTitle,
-              showNavigationButtons
+              showDiagramTitle
             }
           )
         }
@@ -2959,8 +3330,7 @@ function LikeC4Diagram({
 const LikeC4DiagramInnerMemo = memo(function({
   background,
   controls,
-  showDiagramTitle,
-  showNavigationButtons
+  showDiagramTitle
 }) {
   const {
     isInitialized,
@@ -2988,7 +3358,6 @@ const LikeC4DiagramInnerMemo = memo(function({
         children: /* @__PURE__ */ jsx(
           XYFlowInner,
           {
-            showNavigationButtons,
             showDiagramTitle,
             background,
             controls
@@ -3023,6 +3392,7 @@ function StaticLikeC4Diagram({
       showElementLinks: !0,
       showDiagramTitle: !1,
       enableDynamicViewWalkthrough: !1,
+      enableFocusMode: !1,
       nodesSelectable: !1,
       nodesDraggable: !1,
       ...rest