@likec4/diagram 1.24.1 → 1.25.0

package/dist/overlays/overlay/Overlay.js

@@ -4,8 +4,11 @@ import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from "@react-hoo
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { useState, useRef, useLayoutEffect } from "react";
-import { body, dialog } from "./Overlay.css.js";
+import { getVarName } from "../../utils/css.js";
+import { body, dialog, backdropBlur as backdropBlur$1, backdropOpacity as backdropOpacity$1 } from "./Overlay.css.js";
 import { stopPropagation } from "../../utils/xyflow.js";
+const backdropBlur = getVarName(backdropBlur$1);
+const backdropOpacity = getVarName(backdropOpacity$1);
 function Overlay({ children, onClose, className, classes, ...rest }) {
   const [opened, setOpened] = useState(false);
   const dialogRef = useRef(null);
@@ -45,15 +48,15 @@ function Overlay({ children, onClose, className, classes, ...rest }) {
       ref: dialogRef,
       className: clsx(dialog, classes == null ? void 0 : classes.dialog, className, RemoveScroll.classNames.fullWidth),
       initial: {
-        "--backdrop-blur": "0px",
-        "--backdrop-opacity": "5%",
+        [backdropBlur]: "0px",
+        [backdropOpacity]: "5%",
         opacity: 0.85,
         translateY: 12
         // opacity: 02.8,
       },
       animate: {
-        "--backdrop-blur": "6px",
-        "--backdrop-opacity": "60%",
+        [backdropBlur]: "6px",
+        // [backdropOpacity]: '60%',
         translateY: 0,
         opacity: 1
         // transition: {
@@ -63,8 +66,8 @@ function Overlay({ children, onClose, className, classes, ...rest }) {
       exit: {
         opacity: 0,
         translateY: -10,
-        "--backdrop-blur": "0px",
-        "--backdrop-opacity": "0%",
+        [backdropBlur]: "0px",
+        [backdropOpacity]: "0%",
         transition: {
           duration: 0.1
         }

package/dist/overlays/relationship-details/useLayoutedDetails.js

@@ -19,9 +19,10 @@ const Sizes = {
   compoundLabelHeight: 5
 };
 const ZIndexes = {
-  compound: 2,
-  edge: 3,
-  element: 4,
+  compound: 0,
+  // keep edges and elements in the same layer
+  edge: 2,
+  element: 2,
   max: 5
 };
 function createGraph() {

package/dist/state/assign.js

@@ -136,7 +136,21 @@ function updateNavigationHistory({ context, event }) {
     lastOnNavigate,
     viewport
   } = context;
-  const stepCurrent = nonNullable(history[currentIndex]);
+  const stepCurrent = history[currentIndex];
+  if (!stepCurrent) {
+    return {
+      navigationHistory: {
+        currentIndex: 0,
+        history: [
+          {
+            viewId: event.view.id,
+            fromNode: null,
+            viewport: { ...viewport }
+          }
+        ]
+      }
+    };
+  }
   if (stepCurrent.viewId !== event.view.id) {
     if (!lastOnNavigate) {
       const stepBack = currentIndex > 0 ? nonNullable(history[currentIndex - 1]) : null;