@likec4/diagram 1.27.0 → 1.27.1

package/dist/likec4diagram/DiagramXYFlow.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
-import { useTimeout, useCallbackRef } from '@mantine/hooks';
+import { useTimeout, useDebouncedCallback, useCallbackRef } from '@mantine/hooks';
 import { deepEqual, shallowEqual } from 'fast-equals';
 import { memo } from 'react';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
-import { usePanningAtom } from '../context/ReduceGraphics.js';
+import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics.js';
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
 import { edgeTypes, nodeTypes } from './custom/index.js';
 import { DiagramUI } from './DiagramUI.js';
@@ -13,7 +13,7 @@ import { useLayoutConstraints } from './useLayoutConstraints.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 
 const selectXYProps = (ctx) => ({
-  initialized: ctx.initialized,
+  initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
   nodes: ctx.xynodes,
   edges: ctx.xyedges,
   pannable: ctx.pannable,
@@ -56,9 +56,11 @@ const LikeC4DiagramXYFlow = memo(({
     onCanvasClick,
     onCanvasDblClick
   } = useDiagramEventHandlers();
-  const notReadOnly = !enableReadOnly, layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
-    $isPanning.set(true);
-  }, 160), notPanning = useTimeout(() => {
+  const notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
+    if (!$isPanning.get()) {
+      $isPanning.set(true);
+    }
+  }, isReducedGraphics ? 150 : 350), notPanning = useDebouncedCallback(() => {
     isPanning.clear();
     if ($isPanning.get()) {
       $isPanning.set(false);
@@ -70,10 +72,9 @@ const LikeC4DiagramXYFlow = memo(({
     if (!$isPanning.get()) {
       isPanning.start();
     }
-    notPanning.clear();
-    notPanning.start();
+    notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    notPanning.start();
+    notPanning.flush();
     diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -103,7 +103,7 @@ const RelationshipEdge = customEdge((props) => {
       if (!labelBBox || labelBBox.x === labelPos.x && labelBBox.y === labelPos.y) {
         return;
       }
-      xyflow.updateEdgeData(id, {
+      diagram.updateEdgeData(id, {
         labelXY: {
           x: labelPos.x,
           y: labelPos.y
@@ -135,15 +135,13 @@ const RelationshipEdge = customEdge((props) => {
         hasMoved = true;
         pointer = clientPoint;
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false });
-        xyflow.updateEdgeData(id, (xyedge) => {
-          const cp = (xyedge.data.controlPoints ?? controlPoints).slice();
-          cp[index] = {
-            x: Math.round(x),
-            y: Math.round(y)
-          };
-          return {
-            controlPoints: cp
-          };
+        const cp = controlPoints.slice();
+        cp[index] = {
+          x: Math.round(x),
+          y: Math.round(y)
+        };
+        diagram.updateEdgeData(id, {
+          controlPoints: cp
         });
       }
       e2.stopPropagation();
@@ -177,13 +175,9 @@ const RelationshipEdge = customEdge((props) => {
       newControlPoints.splice(index, 1);
       e2.stopPropagation();
       setTimeout(() => {
-        xyflow.updateEdgeData(id, { controlPoints: newControlPoints });
+        diagram.updateEdgeData(id, { controlPoints: newControlPoints });
         diagram.scheduleSaveManualLayout();
       }, 10);
-      domNode.removeEventListener("pointerup", onPointerUp, {
-        capture: true
-      });
-      e2.stopPropagation();
     };
     domNode.addEventListener("pointerup", onPointerUp, {
       once: true,
@@ -213,33 +207,28 @@ const RelationshipEdge = customEdge((props) => {
     if (e.button !== 2) {
       return;
     }
-    xyflow.updateEdgeData(id, (edge) => {
-      const points2 = [
-        new VectorImpl(sourceX, sourceY),
-        ...controlPoints.map(vector) || [],
-        new VectorImpl(targetX, targetY)
-      ];
-      let pointer = { x: e.clientX, y: e.clientY };
-      const newPoint = vector(xyflow.screenToFlowPosition(pointer, { snapToGrid: false }));
-      let insertionIndex = 0;
-      let minDistance = Infinity;
-      for (let i = 0; i < points2.length - 1; i++) {
-        const a = points2[i], b = points2[i + 1];
-        const fromCurrentToNext = b.sub(a);
-        const fromCurrentToNew = newPoint.sub(a);
-        const fromNextToNew = newPoint.sub(b);
-        if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
-          const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs());
-          if (distanceToEdge < minDistance) {
-            minDistance = distanceToEdge;
-            insertionIndex = i;
-          }
+    const points2 = [
+      new VectorImpl(sourceX, sourceY),
+      ...controlPoints.map(vector) || [],
+      new VectorImpl(targetX, targetY)
+    ];
+    let pointer = { x: e.clientX, y: e.clientY };
+    const newPoint = vector(xyflow.screenToFlowPosition(pointer, { snapToGrid: false }));
+    let insertionIndex = 0;
+    let minDistance = Infinity;
+    for (let i = 0; i < points2.length - 1; i++) {
+      const a = points2[i], b = points2[i + 1], fromCurrentToNext = b.sub(a), fromCurrentToNew = newPoint.sub(a), fromNextToNew = newPoint.sub(b);
+      if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
+        const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs());
+        if (distanceToEdge < minDistance) {
+          minDistance = distanceToEdge;
+          insertionIndex = i;
         }
       }
-      const newControlPoints = edge.data.controlPoints?.slice() || [];
-      newControlPoints.splice(insertionIndex, 0, newPoint);
-      return { controlPoints: newControlPoints };
-    });
+    }
+    const newControlPoints = controlPoints.slice() || [];
+    newControlPoints.splice(insertionIndex, 0, newPoint);
+    diagram.updateEdgeData(id, { controlPoints: newControlPoints });
     diagram.scheduleSaveManualLayout();
     e.stopPropagation();
   };
@@ -290,7 +279,7 @@ const RelationshipEdge = customEdge((props) => {
         }
       )
     ] }),
-    enableEdgeEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+    enableEdgeEditing && controlPoints.length > 0 && (selected || hovered || isControlPointDragging) && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
       EdgeContainer,
       {
         component: "svg",

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js

@@ -57,7 +57,7 @@ function Toolbar({ title, children, nodeProps, ...props }) {
           onDoubleClick: stopPropagation,
           withBorder: true,
           children: /* @__PURE__ */ jsxs(Stack, { gap: "6px", children: [
-            /* @__PURE__ */ jsx(Box, { px: "4px", children: /* @__PURE__ */ jsx(Text, { c: "dimmed", className: toolbarTitle, children: title }) }),
+            /* @__PURE__ */ jsx(Box, { px: "4px", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title }) }),
             /* @__PURE__ */ jsx(Group, { gap: 4, children })
           ] })
         }

package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js

@@ -1,10 +1,15 @@
 import { css } from '@likec4/styles/css';
 
 const toolbarTitle = css({
+  color: "mantine.colors.dimmed",
   fontSize: "10px",
   fontWeight: 600,
+  maxWidth: "220px",
   cursor: "default",
-  userSelect: "all"
+  userSelect: "all",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap"
 });
 
 export { toolbarTitle };

package/dist/likec4diagram/ui/controls/LayoutDriftNotification.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { HoverCard, HoverCardTarget, Overlay, HoverCardDropdown, Notification, Text, Code } from '@mantine/core';
+import { HoverCard, HoverCardTarget, HoverCardDropdown, Notification, Text, Code } from '@mantine/core';
 import { IconAlertTriangle } from '@tabler/icons-react';
+import { css } from '@likec4/styles/css';
 import { ActionIcon } from './_shared.js';
 
 const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
@@ -11,10 +12,17 @@ const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
     closeDelay: 100,
     ...props,
     children: [
-      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsxs(ActionIcon, { c: "orange", children: [
-        /* @__PURE__ */ jsx(Overlay, { color: "orange.lightHover", backgroundOpacity: 1 }),
-        /* @__PURE__ */ jsx(IconAlertTriangle, {})
-      ] }) }),
+      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          color: "orange",
+          c: "orange",
+          className: css({
+            bg: "mantine.colors.orange.light"
+          }),
+          children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
+        }
+      ) }),
       /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
         Notification,
         {

package/dist/likec4diagram/useLayoutConstraints.d.ts

@@ -20,21 +20,22 @@ declare abstract class Rect {
         height: number;
     };
     get position(): XYPosition;
-    protected abstract parent: Compound | null;
-    constructor(xynode: InternalNode, parent?: Compound | null);
+    protected abstract parent: CompoundRect | null;
+    constructor(xynode: InternalNode, parent?: CompoundRect | null);
 }
-declare class Compound extends Rect {
-    readonly parent: Compound | null;
+declare class CompoundRect extends Rect {
+    readonly parent: CompoundRect | null;
     readonly children: Rect[];
-    constructor(xynode: InternalNode, parent?: Compound | null);
+    constructor(xynode: InternalNode, parent?: CompoundRect | null);
+}
+declare class Leaf extends Rect {
+    readonly parent: CompoundRect | null;
+    constructor(xynode: InternalNode, parent?: CompoundRect | null);
 }
-type NodePositionUpdater = (nodes: Array<{
-    rect: Rect | Compound;
-    node: InternalNode;
-}>) => void;
 export declare function createLayoutConstraints(xyflowApi: XYStoreApi, editingNodeIds: NonEmptyArray<string>): {
+    rects: ReadonlyMap<string, Leaf | CompoundRect>;
     updateXYFlowNodes: () => void;
-    onMove: (updater: NodePositionUpdater) => void;
+    onMove: () => void;
 };
 type LayoutConstraints = {
     onNodeDragStart: OnNodeDrag<Types.Node>;

package/dist/likec4diagram/useLayoutConstraints.js

@@ -2,7 +2,7 @@ import { nonNullable } from '@likec4/core';
 import '@xyflow/react';
 import { getNodeDimensions } from '@xyflow/system';
 import { useRef, useMemo } from 'react';
-import { pipe, filter, map, hasAtLeast, isNullish } from 'remeda';
+import { pipe, filter, hasAtLeast, map } from 'remeda';
 import { useDiagram } from '../hooks/useDiagram.js';
 import { useXYStoreApi } from '../hooks/useXYFlow.js';
 
@@ -62,7 +62,7 @@ class Rect {
     }
   }
 }
-class Compound extends Rect {
+class CompoundRect extends Rect {
   constructor(xynode, parent = null) {
     super(xynode, parent);
     this.parent = parent;
@@ -92,51 +92,51 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   const ancestorsOfDraggingNodes = new Set(
     editingNodeIds.flatMap(ancestorsOf)
   );
-  const traverse = new Array();
-  for (const [, xynode] of nodeLookup) {
-    if (isNullish(xynode.parentId)) {
-      traverse.push({
-        xynode,
-        parent: null
-      });
-    }
-  }
+  const traverse = [...nodeLookup.values()].flatMap(
+    (x) => !x.parentId ? { xynode: x, parent: null } : []
+  );
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift();
     const isEditing = editingNodeIds.includes(xynode.id);
-    const shouldTraverse = !isEditing && (xynode.type === "compound-element" || xynode.type === "compound-deployment" || xynode.type === "view-group") && ancestorsOfDraggingNodes.has(xynode.id);
-    const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent);
-    rects.set(xynode.id, rect);
+    const shouldTraverse = !isEditing && xynode.type !== "element" && xynode.type !== "deployment" && ancestorsOfDraggingNodes.has(xynode.id);
     if (shouldTraverse) {
+      const rect = new CompoundRect(xynode, parent);
+      rects.set(xynode.id, rect);
       parentLookup.get(xynode.id)?.forEach((child) => {
         traverse.push({
           xynode: child,
           parent: rect
         });
       });
+    } else {
+      rects.set(xynode.id, new Leaf(xynode, parent));
     }
   }
   const rectsToUpdate = [...rects.values()];
   applyConstraints(rectsToUpdate);
   function applyConstraints(targets) {
-    targets.filter((x) => x instanceof Compound).forEach((r) => {
+    for (const r of targets) {
+      if (!(r instanceof CompoundRect)) {
+        continue;
+      }
       applyConstraints(r.children);
-      const childrenBB = r.children.reduce((acc, r2) => ({
-        minX: Math.min(acc.minX, r2.minX),
-        minY: Math.min(acc.minY, r2.minY),
-        maxX: Math.max(acc.maxX, r2.maxX),
-        maxY: Math.max(acc.maxY, r2.maxY)
-      }), {
+      const childrenBB = {
         minX: Infinity,
         minY: Infinity,
         maxX: -Infinity,
         maxY: -Infinity
-      });
+      };
+      for (const child of r.children) {
+        childrenBB.minX = Math.min(childrenBB.minX, child.minX);
+        childrenBB.minY = Math.min(childrenBB.minY, child.minY);
+        childrenBB.maxX = Math.max(childrenBB.maxX, child.maxX);
+        childrenBB.maxY = Math.max(childrenBB.maxY, child.maxY);
+      }
       r.minX = childrenBB.minX - Rect.LeftPadding;
       r.minY = childrenBB.minY - Rect.TopPadding;
       r.maxX = childrenBB.maxX + Rect.RightPadding;
       r.maxY = childrenBB.maxY + Rect.BottomPadding;
-    });
+    }
   }
   function updateXYFlowNodes() {
     applyConstraints(rectsToUpdate);
@@ -149,7 +149,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
           position: r.position,
           positionAbsolute: r.positionAbsolute
         });
-        if (r instanceof Compound) {
+        if (r instanceof CompoundRect) {
           acc.push({
             id: r.id,
             type: "dimensions",
@@ -162,26 +162,23 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     );
   }
   let animationFrameId = null;
-  function onMove(updater) {
+  function onMove() {
     if (rectsToUpdate.length === 0) {
       return;
     }
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null;
-      updater(
-        pipe(
-          editingNodeIds,
-          filter((id) => rects.has(id) && nodeLookup.has(id)),
-          map((id) => ({
-            rect: nonNullable(rects.get(id)),
-            node: nonNullable(nodeLookup.get(id))
-          }))
-        )
-      );
+      const { nodeLookup: nodeLookup2 } = xyflowApi.getState();
+      for (const id of editingNodeIds) {
+        const rect = nonNullable(rects.get(id));
+        const node = nonNullable(nodeLookup2.get(id));
+        rect.positionAbsolute = node.internals.positionAbsolute;
+      }
       updateXYFlowNodes();
     });
   }
   return {
+    rects,
     updateXYFlowNodes,
     onMove
   };
@@ -190,33 +187,39 @@ function useLayoutConstraints() {
   const xystore = useXYStoreApi();
   const diagram = useDiagram();
   const solverRef = useRef(void 0);
-  return useMemo(() => ({
-    onNodeDragStart: (_event, xynode) => {
-      diagram.cancelSaveManualLayout();
-      const { nodeLookup } = xystore.getState();
-      const draggingNodes = pipe(
-        Array.from(nodeLookup.values()),
-        filter((n) => n.dragging === true || n.id === xynode.id || n.selected === true),
-        filter((n) => n.draggable !== false),
-        map((x) => x.id)
-      );
-      if (hasAtLeast(draggingNodes, 1)) {
-        solverRef.current = createLayoutConstraints(xystore, draggingNodes);
+  return useMemo(() => {
+    let wasPending = false;
+    const initial = { x: 0, y: 0 };
+    let moved = false;
+    return {
+      onNodeDragStart: (_event, xynode) => {
+        wasPending = diagram.cancelSaveManualLayout();
+        const { nodeLookup } = xystore.getState();
+        const draggingNodes = pipe(
+          Array.from(nodeLookup.values()),
+          filter((n) => n.draggable !== false && (n.dragging === true || n.id === xynode.id || n.selected === true))
+        );
+        if (hasAtLeast(draggingNodes, 1)) {
+          solverRef.current = createLayoutConstraints(xystore, map(draggingNodes, (x) => x.id));
+        }
+        initial.x = _event.clientX;
+        initial.y = _event.clientY;
+        moved = false;
+      },
+      onNodeDrag: (_event) => {
+        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
+        solverRef.current?.onMove();
+      },
+      onNodeDragStop: (_event) => {
+        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
+        console.log("moved", moved);
+        if (wasPending || moved) {
+          diagram.scheduleSaveManualLayout();
+        }
+        solverRef.current = void 0;
       }
-    },
-    onNodeDrag: () => {
-      solverRef.current?.onMove((nodes) => {
-        nodes.forEach(({ rect, node }) => {
-          rect.positionAbsolute = node.internals.positionAbsolute;
-        });
-      });
-    },
-    onNodeDragStop: () => {
-      solverRef.current?.updateXYFlowNodes();
-      diagram.scheduleSaveManualLayout();
-      solverRef.current = void 0;
-    }
-  }), [xystore, diagram]);
+    };
+  }, [xystore, diagram]);
 }
 
 export { createLayoutConstraints, useLayoutConstraints };

package/dist/overlays/Overlays.js

@@ -3,7 +3,7 @@ import { nonexhaustive } from '@likec4/core';
 import { Box, Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
 import { IconX } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
-import { useReducedMotion, LayoutGroup, AnimatePresence } from 'framer-motion';
+import { useReducedMotionConfig, LayoutGroup, AnimatePresence } from 'framer-motion';
 import { animate } from 'framer-motion/dom';
 import { memo, useMemo, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -71,7 +71,7 @@ const Overlays = memo(({ overlaysActorRef }) => {
     xyflowDomNode
   ]);
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
-  const isMotionReduced = useReducedMotion() ?? false;
+  const isMotionReduced = useReducedMotionConfig() ?? false;
   const isActiveOverlay = overlays.length > 0;
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return;

package/dist/overlays/overlay/Overlay.css.js

@@ -2,12 +2,11 @@ import { css } from '@likec4/styles/css';
 
 const backdropBlur = "--_blur";
 const backdropOpacity = "--_opacity";
-const borderRadius = "8px";
+const borderRadius = "--_border-radius";
 const dialog = css({
   boxSizing: "border-box",
   margin: 0,
   position: "fixed",
-  inset: "3rem",
   width: "auto",
   height: "auto",
   maxWidth: "100vw",
@@ -16,8 +15,7 @@ const dialog = css({
   shadow: "xl",
   border: "transparent",
   outline: "none",
-  borderRadius,
-  padding: "6px",
+  borderRadius: `var(${borderRadius})`,
   [backdropBlur]: "0px",
   [backdropOpacity]: "0%",
   _backdrop: {
@@ -28,18 +26,37 @@ const dialog = css({
       _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`
     }
   },
-  mdDown: {
-    borderRadius: "sm",
-    inset: "2rem",
-    width: "calc(100vw - 4rem)",
-    height: "calc(100vh - 4rem)"
-  },
   smDown: {
+    [borderRadius]: "0px",
     border: "none",
     inset: 0,
     padding: 0,
     width: "100vw",
     height: "100vh"
+  },
+  sm: {
+    [borderRadius]: "6px",
+    padding: "6px",
+    inset: "1rem",
+    width: "calc(100vw - 2rem)",
+    height: "calc(100vh - 2rem)"
+  },
+  md: {
+    inset: "2rem",
+    width: "calc(100vw - 4rem)",
+    height: "calc(100vh - 4rem)"
+  },
+  lg: {
+    inset: "4rem",
+    width: "calc(100vw - 8rem)",
+    height: "calc(100vh - 8rem)"
+  },
+  xl: {
+    [borderRadius]: "8px",
+    padding: "8px",
+    inset: "5rem",
+    width: "calc(100vw - 10rem)",
+    height: "calc(100vh - 10rem)"
   }
 });
 const body = css({
@@ -47,11 +64,13 @@ const body = css({
   containerName: "overlay-dialog",
   containerType: "size",
   border: `0 solid transparent`,
-  borderRadius: `calc(${borderRadius} - 2px)`,
   background: "mantine.colors.body",
   overflow: "hidden",
   width: "100%",
-  height: "100%"
+  height: "100%",
+  sm: {
+    borderRadius: `calc(var(${borderRadius}) - 2px)`
+  }
 });
 
 export { backdropBlur, backdropOpacity, body, dialog };

package/dist/overlays/overlay/Overlay.js

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { RemoveScroll, Box } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
-import { m } from 'framer-motion';
+import { useReducedMotionConfig, m } from 'framer-motion';
 import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
 import { body, backdropOpacity, backdropBlur, dialog } from './Overlay.css.js';
 import { stopPropagation } from '../../utils/xyflow.js';
@@ -13,6 +13,7 @@ const Overlay = forwardRef(
     const [opened, setOpened] = useState(false);
     const dialogRef = useRef(null);
     const isClosingRef = useRef(false);
+    const motionNotReduced = useReducedMotionConfig() !== true;
     const onCloseRef = useSyncedRef(onClose);
     const close = useDebouncedCallback(
       () => {
@@ -46,33 +47,35 @@ const Overlay = forwardRef(
       {
         ref: useMergedRef(dialogRef, ref),
         className: cx(RemoveScroll.classNames.fullWidth, dialog, classes?.dialog, className),
-        initial: {
-          [backdropBlur]: "0px",
-          [backdropOpacity]: "0%",
-          scale: 1.075,
-          opacity: 0.2
-          // originY: 0.45,
-          // translateY: '-10px',
-        },
-        animate: {
-          [backdropBlur]: "8px",
-          [backdropOpacity]: "60%",
-          scale: 1,
-          opacity: 1,
-          // translateY: '0px',
-          transition: {
-            delay: 0.06
-            // duration: 0.2,
+        layout: true,
+        ...motionNotReduced ? {
+          initial: {
+            [backdropBlur]: "0px",
+            [backdropOpacity]: "0%",
+            scale: 1.075,
+            opacity: 0
+          },
+          animate: {
+            [backdropBlur]: "8px",
+            [backdropOpacity]: "60%",
+            scale: 1,
+            opacity: 1,
+            transition: {
+              delay: 0.075
+            }
+          },
+          exit: {
+            scale: 1.3,
+            opacity: 0,
+            translateY: -10,
+            [backdropBlur]: "0px",
+            [backdropOpacity]: "0%"
+          }
+        } : {
+          initial: {
+            [backdropBlur]: "8px",
+            [backdropOpacity]: "60%"
           }
-        },
-        exit: {
-          scale: 1.3,
-          opacity: 0,
-          [backdropBlur]: "0px",
-          [backdropOpacity]: "0%"
-          // transition: {
-          //   duration: 0.2,
-          // },
         },
         onClick: (e) => {
           e.stopPropagation();

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

@@ -50,7 +50,7 @@ const graphId = (node) => ({
 function nodeData(element, ctx) {
   let diagramNode = ctx.diagramNodes.get(element.id);
   const ancestor = diagramNode ?? pipe(
-    element.ancestors().toArray(),
+    [...element.ancestors()],
     map((ancestor2) => ctx.diagramNodes.get(ancestor2.id)),
     filter(isTruthy),
     first()