likec4 1.27.0 → 1.27.1

package/__app__/src/main.js

@@ -21779,6 +21779,10 @@ function useReducedMotion() {
   const [shouldReduceMotion] = useState(prefersReducedMotion.current);
   return shouldReduceMotion;
 }
+function useReducedMotionConfig() {
+  const reducedMotionPreference = useReducedMotion(), { reducedMotion } = useContext(MotionConfigContext);
+  return reducedMotion === "never" ? !1 : reducedMotion === "always" ? !0 : reducedMotionPreference;
+}
 const wrap = (min2, max2, v) => {
   const rangeSize = max2 - min2;
   return ((v - min2) % rangeSize + rangeSize) % rangeSize + min2;
@@ -29050,6 +29054,9 @@ const { valueOf, toString: toString$1 } = Object.prototype, isEqual = (a2, b2) =
   }
   return a2 !== a2 && b2 !== b2;
 };
+function useDeepCompareEffect(callback, deps, effectHook = useEffect, ...effectHookRestArgs) {
+  useCustomCompareEffect(callback, deps, isEqual, effectHook, ...effectHookRestArgs);
+}
 function useFirstMountState() {
   const isFirstMount = useRef(!0);
   return useEffect(() => {
@@ -30821,7 +30828,7 @@ const ZIndexes$1 = {
 }, MinZoom = 0.05, MaxZoom = 2;
 var Base;
 ((Base2) => {
-  const _setDimmed = (v, dimmed) => v.data.dimmed === dimmed ? v : {
+  const _setDimmed = (v, dimmed) => (v.data.dimmed ?? !1) === dimmed ? v : {
     ...v,
     data: {
       ...v.data,
@@ -30832,7 +30839,7 @@ var Base;
     return arg2 !== void 0 ? _setDimmed(arg1, arg2) : (v) => _setDimmed(v, arg1);
   }
   Base2.setDimmed = setDimmed;
-  const _setHovered = (v, hovered) => v.data.hovered === hovered ? v : {
+  const _setHovered = (v, hovered) => (v.data.hovered ?? !1) === hovered ? v : {
     ...v,
     data: {
       ...v.data,
@@ -34862,7 +34869,7 @@ function CompoundNodeContainer({
         "data-compound-title-inverse": opacity < 0.5
       },
       ...isDimmed !== !1 && {
-        "likec4-dimmed": isDimmed
+        "data-likec4-dimmed": isDimmed
       },
       style: {
         ...style2,
@@ -35020,6 +35027,7 @@ const isSelected$1 = ".react-flow__edge.selected", edgeStroke = "--xy-edge-strok
     display: "none"
   }
 }), hideOnReducedGraphics = css(_hideOnReducedGraphics), edgePathBg = css(_hideOnReducedGraphics, {
+  fill: "[none]",
   strokeWidth: "calc(var(--xy-edge-stroke-width) + 2)",
   strokeOpacity: 0.08,
   transitionProperty: "stroke-width, stroke-opacity",
@@ -35041,6 +35049,7 @@ const isSelected$1 = ".react-flow__edge.selected", edgeStroke = "--xy-edge-strok
   fill: "[var(--xy-edge-stroke)]",
   stroke: "[var(--xy-edge-stroke)]"
 }), cssEdgePath = css({
+  fill: "[none]",
   strokeDashoffset: 10,
   _noReduceGraphics: {
     transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"
@@ -35184,7 +35193,7 @@ const translate = {
   },
   _noReduceGraphics: {
     mixBlendMode: {
-      base: "plus-lighter",
+      _dark: "plus-lighter",
       _light: "screen"
     }
   },
@@ -35193,9 +35202,6 @@ const translate = {
   },
   _reduceGraphicsOnPan: {
     display: "none"
-  },
-  _whenPanning: {
-    mixBlendMode: "normal"
   }
 }), labelsva = sva({
   slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
@@ -35298,7 +35304,7 @@ function EdgeLabel({
 }
 const toCssVarValue = (value) => {
   if (value !== void 0)
-    return e$2(value) ? `${value}px` : value;
+    return e$2(value) ? `${Math.round(value)}px` : value;
 };
 function EdgeLabelContainer({
   edgeProps: {
@@ -35627,9 +35633,6 @@ const EdgePath = forwardRef(({
             "react-flow__edge-path",
             "react-flow__edge-interaction",
             cssEdgePath
-            // css({
-            //   strokeDasharray: strokeDasharray,
-            // }),
           ),
           d: svgPath,
           style: style2,
@@ -35776,6 +35779,7 @@ const container$2 = css({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
+  pointerEvents: "none",
   _after: {
     content: '" "',
     position: "absolute",
@@ -35896,7 +35900,7 @@ const indicator = css({
   },
   stroke: "likec4.palette.loContrast",
   fill: "[none]",
-  strokeWidth: 6,
+  strokeWidth: 8,
   strokeOpacity: 0.8,
   visibility: "hidden",
   pointerEvents: "none",
@@ -35904,25 +35908,14 @@ const indicator = css({
     stroke: "[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]"
   },
   _whenFocused: {
-    strokeWidth: 12,
     visibility: "visible"
   },
   _groupFocusVisible: {
-    strokeWidth: 12,
     visibility: "visible"
   },
   _whenSelected: {
     animationStyle: "indicator",
     visibility: "visible"
-  },
-  _shapeQueue: {
-    strokeWidth: 8
-  },
-  _shapeCylinder: {
-    strokeWidth: 8
-  },
-  _shapeStorage: {
-    strokeWidth: 8
   }
 }), fillElementFill = css({
   fill: "likec4.palette.fill"
@@ -36183,7 +36176,7 @@ const iconSize$2 = "--icon-size", title$4 = css.raw({
     display: "none"
   },
   _smallZoom: {
-    visibility: "hidden"
+    display: "none"
   }
 }), technology = css.raw({
   flex: "0 0 auto",
@@ -36204,7 +36197,7 @@ const iconSize$2 = "--icon-size", title$4 = css.raw({
     display: "none"
   },
   _smallZoom: {
-    visibility: "hidden"
+    display: "none"
   }
 }), varIconSize = `var(${iconSize$2})`, elementIcon$2 = css({
   flex: `0 0 ${varIconSize}`,
@@ -36253,6 +36246,7 @@ const iconSize$2 = "--icon-size", title$4 = css.raw({
       paddingLeft: "calc(var(--likec4-spacing) + 8px)",
       paddingRight: "calc(var(--likec4-spacing) + 8px)",
       overflow: "hidden",
+      pointerEvents: "none",
       gap: "12px",
       _shapeQueue: {
         paddingLeft: "46px",
@@ -36647,7 +36641,7 @@ function Link({
   value,
   size: size2 = "md"
 }) {
-  const isNormalSize = size2 === "md", url = new URL(value.url, window.location.href).toString();
+  const isNormalSize = size2 === "md", url = value.url.includes("://") ? value.url : new window.URL(value.url, window.location.href).toString();
   return /* @__PURE__ */ jsx(CopyButton$1, { value: url, children: ({ copied, copy }) => /* @__PURE__ */ jsxs(
     Anchor,
     {
@@ -36979,7 +36973,7 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
     setLabelPos((current) => isSamePoint(current, point2) ? current : point2);
   }, [edgePath]), useDebouncedEffect(
     () => {
-      !labelBBox || labelBBox.x === labelPos.x && labelBBox.y === labelPos.y || xyflow2.updateEdgeData(id2, {
+      !labelBBox || labelBBox.x === labelPos.x && labelBBox.y === labelPos.y || diagram.updateEdgeData(id2, {
         labelXY: {
           x: labelPos.x,
           y: labelPos.y
@@ -37003,15 +36997,12 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
       };
       if (!isSamePoint(pointer2, clientPoint)) {
         setIsControlPointDragging(!0), hasMoved = !0, pointer2 = clientPoint;
-        const { x: x2, y: y2 } = xyflow2.screenToFlowPosition(pointer2, { snapToGrid: !1 });
-        xyflow2.updateEdgeData(id2, (xyedge) => {
-          const cp = (xyedge.data.controlPoints ?? controlPoints).slice();
-          return cp[index2] = {
-            x: Math.round(x2),
-            y: Math.round(y2)
-          }, {
-            controlPoints: cp
-          };
+        const { x: x2, y: y2 } = xyflow2.screenToFlowPosition(pointer2, { snapToGrid: !1 }), cp = controlPoints.slice();
+        cp[index2] = {
+          x: Math.round(x2),
+          y: Math.round(y2)
+        }, diagram.updateEdgeData(id2, {
+          controlPoints: cp
         });
       }
       e22.stopPropagation();
@@ -37032,10 +37023,8 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
     const onPointerUp = (e22) => {
       const newControlPoints = controlPoints.slice();
       newControlPoints.splice(index2, 1), e22.stopPropagation(), setTimeout(() => {
-        xyflow2.updateEdgeData(id2, { controlPoints: newControlPoints }), diagram.scheduleSaveManualLayout();
-      }, 10), domNode.removeEventListener("pointerup", onPointerUp, {
-        capture: !0
-      }), e22.stopPropagation();
+        diagram.updateEdgeData(id2, { controlPoints: newControlPoints }), diagram.scheduleSaveManualLayout();
+      }, 10);
     };
     domNode.addEventListener("pointerup", onPointerUp, {
       once: !0,
@@ -37054,25 +37043,25 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
       }
   }, onEdgePointerDown = (e2) => {
     const { domNode } = xyflowStore.getState();
-    !domNode || e2.pointerType !== "mouse" || e2.button === 2 && (xyflow2.updateEdgeData(id2, (edge) => {
-      const points2 = [
-        new VectorImpl(sourceX, sourceY),
-        ...controlPoints.map(vector) || [],
-        new VectorImpl(targetX, targetY)
-      ];
-      let pointer2 = { x: e2.clientX, y: e2.clientY };
-      const newPoint = vector(xyflow2.screenToFlowPosition(pointer2, { snapToGrid: !1 }));
-      let insertionIndex = 0, minDistance = 1 / 0;
-      for (let i2 = 0; i2 < points2.length - 1; i2++) {
-        const a2 = points2[i2], b2 = points2[i2 + 1], fromCurrentToNext = b2.sub(a2), fromCurrentToNew = newPoint.sub(a2), fromNextToNew = newPoint.sub(b2);
-        if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
-          const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs());
-          distanceToEdge < minDistance && (minDistance = distanceToEdge, insertionIndex = i2);
-        }
+    if (!domNode || e2.pointerType !== "mouse" || e2.button !== 2)
+      return;
+    const points2 = [
+      new VectorImpl(sourceX, sourceY),
+      ...controlPoints.map(vector) || [],
+      new VectorImpl(targetX, targetY)
+    ];
+    let pointer2 = { x: e2.clientX, y: e2.clientY };
+    const newPoint = vector(xyflow2.screenToFlowPosition(pointer2, { snapToGrid: !1 }));
+    let insertionIndex = 0, minDistance = 1 / 0;
+    for (let i2 = 0; i2 < points2.length - 1; i2++) {
+      const a2 = points2[i2], b2 = points2[i2 + 1], fromCurrentToNext = b2.sub(a2), fromCurrentToNew = newPoint.sub(a2), fromNextToNew = newPoint.sub(b2);
+      if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
+        const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs());
+        distanceToEdge < minDistance && (minDistance = distanceToEdge, insertionIndex = i2);
       }
-      const newControlPoints = edge.data.controlPoints?.slice() || [];
-      return newControlPoints.splice(insertionIndex, 0, newPoint), { controlPoints: newControlPoints };
-    }), diagram.scheduleSaveManualLayout(), e2.stopPropagation());
+    }
+    const newControlPoints = controlPoints.slice() || [];
+    newControlPoints.splice(insertionIndex, 0, newPoint), diagram.updateEdgeData(id2, { controlPoints: newControlPoints }), diagram.scheduleSaveManualLayout(), e2.stopPropagation();
   };
   let zIndex = ZIndexes$1.Edge;
   (hovered || active) && (zIndex = ZIndexes$1.Element + 1);
@@ -37114,7 +37103,7 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
         }
       )
     ] }),
-    enableEdgeEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+    enableEdgeEditing && controlPoints.length > 0 && (selected2 || hovered || isControlPointDragging) && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
       EdgeContainer,
       {
         component: "svg",
@@ -37432,10 +37421,15 @@ function OpacityOption({
   );
 }
 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"
 }), useSelectedNodesCount = () => useDiagramContext((s2) => s2.xynodes.filter((x2) => x2.selected).length);
 function Toolbar({ title: title2, children: children2, nodeProps, ...props }) {
   const selectedNodesCount = useSelectedNodesCount(), {
@@ -37469,7 +37463,7 @@ function Toolbar({ title: title2, children: children2, nodeProps, ...props }) {
           onDoubleClick: stopPropagation$1,
           withBorder: !0,
           children: /* @__PURE__ */ jsxs(Stack, { gap: "6px", children: [
-            /* @__PURE__ */ jsx(Box$1, { px: "4px", children: /* @__PURE__ */ jsx(Text, { c: "dimmed", className: toolbarTitle, children: title2 }) }),
+            /* @__PURE__ */ jsx(Box$1, { px: "4px", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title2 }) }),
             /* @__PURE__ */ jsx(Group, { gap: 4, children: children2 })
           ] })
         }
@@ -41278,8 +41272,8 @@ const ElementDetailsButtonWithHandler$1 = (props) => {
     ancestorsFqn(subjectId).reverse().forEach((id2) => {
       tree.expand(id2);
     }), tree.select(subjectId);
-  }, [subjectId]), /* @__PURE__ */ jsxs(Group, { ref: root2, gap: "xs", wrap: "nowrap", pos: "relative", children: [
-    enableSelectSubject && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  }, [subjectId]), /* @__PURE__ */ jsxs(Group, { ref: root2, gap: "xs", pos: "relative", children: [
+    enableSelectSubject && /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
       /* @__PURE__ */ jsx(
         Box$1,
         {
@@ -41383,7 +41377,7 @@ const ElementDetailsButtonWithHandler$1 = (props) => {
         }
       ) })
     ] }),
-    enableChangeScope && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    enableChangeScope && /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
       enableSelectSubject && /* @__PURE__ */ jsx(
         Box$1,
         {
@@ -42348,11 +42342,10 @@ function ElementDetails({
     }
   ) });
 }
-const backdropBlur = "--_blur", backdropOpacity = "--_opacity", borderRadius = "8px", dialog = css({
+const backdropBlur = "--_blur", backdropOpacity = "--_opacity", borderRadius = "--_border-radius", dialog = css({
   boxSizing: "border-box",
   margin: 0,
   position: "fixed",
-  inset: "3rem",
   width: "auto",
   height: "auto",
   maxWidth: "100vw",
@@ -42361,8 +42354,7 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", borderRadius = "
   shadow: "xl",
   border: "transparent",
   outline: "none",
-  borderRadius,
-  padding: "6px",
+  borderRadius: `var(${borderRadius})`,
   [backdropBlur]: "0px",
   [backdropOpacity]: "0%",
   _backdrop: {
@@ -42373,32 +42365,53 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", borderRadius = "
       _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)"
   }
 }), body = css({
   position: "relative",
   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)`
+  }
 }), Overlay = forwardRef(
   ({ children: children2, onClose, className, classes: classes2, ...rest }, ref) => {
-    const [opened, setOpened] = useState(!1), dialogRef = useRef(null), isClosingRef = useRef(!1), onCloseRef = useSyncedRef(onClose), close = useDebouncedCallback(
+    const [opened, setOpened] = useState(!1), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useSyncedRef(onClose), close = useDebouncedCallback(
       () => {
         isClosingRef.current || (isClosingRef.current = !0, onCloseRef.current());
       },
@@ -42421,33 +42434,35 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", borderRadius = "
       {
         ref: useMergedRef(dialogRef, ref),
         className: cx(RemoveScroll.classNames.fullWidth, dialog, classes2?.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: !0,
+        ...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: (e2) => {
           if (e2.stopPropagation(), e2.target?.nodeName?.toUpperCase() === "DIALOG") {
@@ -43753,7 +43768,7 @@ const sized = (height = Sizes$1.hodeHeight) => ({
 function nodeData(element, ctx) {
   let diagramNode = ctx.diagramNodes.get(element.id);
   const ancestor = diagramNode ?? C(
-    element.ancestors().toArray(),
+    [...element.ancestors()],
     m((ancestor2) => ctx.diagramNodes.get(ancestor2.id)),
     T(n$5),
     d()
@@ -44096,7 +44111,7 @@ const selector$3 = (state) => ({
   ),
   /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "nowrap", ml: "sm", children: /* @__PURE__ */ jsx(SelectEdge, { edge, view }) })
 ] }) }) }));
-function Fallback$1({ error, resetErrorBoundary }) {
+function Fallback$2({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";
   return /* @__PURE__ */ jsx(Box$1, { pos: "fixed", top: 0, left: 0, w: "100%", p: 0, style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
     Notification,
@@ -44141,7 +44156,7 @@ const selectOverlays = (s2) => s2.context.overlays.map((overlay) => {
 }).filter(l$2), compareSelectOverlays = (a2, b2) => a2.length === b2.length && a2.every((overlay, i2) => overlay.actorRef === b2[i2].actorRef), Overlays = memo$2(({ overlaysActorRef }) => {
   const xyflowDomNode = useXYStore((s2) => s2.domNode), xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector(".react-flow__renderer") ?? null, [
     xyflowDomNode
-  ]), overlays = xstateReact_cjsExports.useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays), isMotionReduced = useReducedMotion() ?? !1, isActiveOverlay = overlays.length > 0;
+  ]), overlays = xstateReact_cjsExports.useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays), isMotionReduced = useReducedMotionConfig() ?? !1, isActiveOverlay = overlays.length > 0;
   useEffect(() => {
     !xyflowRendererDom || isMotionReduced || animate(xyflowRendererDom, {
       opacity: isActiveOverlay ? 0.7 : 1,
@@ -44186,7 +44201,7 @@ const selectOverlays = (s2) => s2.context.overlays.map((overlay) => {
         nonexhaustive(overlay);
     }
   });
-  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: Fallback$1, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: Fallback$2, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
 });
 Overlays.displayName = "Overlays";
 const root$1 = css({
@@ -45477,10 +45492,17 @@ const autolayoutButton = css({
     closeDelay: 100,
     ...props,
     children: [
-      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsxs(ActionIcon, { c: "orange", children: [
-        /* @__PURE__ */ jsx(Overlay$1, { 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,
         {
@@ -51532,7 +51554,7 @@ class Rect {
     this.maxX = this.minX + Math.ceil(width), this.maxY = this.minY + Math.ceil(height), parent && parent.children.push(this);
   }
 }
-class Compound extends Rect {
+class CompoundRect extends Rect {
   constructor(xynode, parent = null) {
     super(xynode, parent), this.parent = parent;
   }
@@ -51552,39 +51574,39 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     return ancestors;
   }, ancestorsOfDraggingNodes = new Set(
     editingNodeIds.flatMap(ancestorsOf)
-  ), traverse = new Array();
-  for (const [, xynode] of nodeLookup)
-    n$1(xynode.parentId) && traverse.push({
-      xynode,
-      parent: null
-    });
+  ), traverse = [...nodeLookup.values()].flatMap(
+    (x2) => x2.parentId ? [] : { xynode: x2, parent: null }
+  );
   for (; traverse.length > 0; ) {
-    const { xynode, parent } = traverse.shift(), shouldTraverse = !editingNodeIds.includes(xynode.id) && (xynode.type === "compound-element" || xynode.type === "compound-deployment" || xynode.type === "view-group") && ancestorsOfDraggingNodes.has(xynode.id), rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent);
-    rects.set(xynode.id, rect), shouldTraverse && parentLookup.get(xynode.id)?.forEach((child) => {
-      traverse.push({
-        xynode: child,
-        parent: rect
+    const { xynode, parent } = traverse.shift();
+    if (!editingNodeIds.includes(xynode.id) && xynode.type !== "element" && xynode.type !== "deployment" && ancestorsOfDraggingNodes.has(xynode.id)) {
+      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()];
   applyConstraints2(rectsToUpdate);
   function applyConstraints2(targets) {
-    targets.filter((x2) => x2 instanceof Compound).forEach((r2) => {
+    for (const r2 of targets) {
+      if (!(r2 instanceof CompoundRect))
+        continue;
       applyConstraints2(r2.children);
-      const childrenBB = r2.children.reduce((acc, r22) => ({
-        minX: Math.min(acc.minX, r22.minX),
-        minY: Math.min(acc.minY, r22.minY),
-        maxX: Math.max(acc.maxX, r22.maxX),
-        maxY: Math.max(acc.maxY, r22.maxY)
-      }), {
+      const childrenBB = {
         minX: 1 / 0,
         minY: 1 / 0,
         maxX: -1 / 0,
         maxY: -1 / 0
-      });
+      };
+      for (const child of r2.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);
       r2.minX = childrenBB.minX - Rect.LeftPadding, r2.minY = childrenBB.minY - Rect.TopPadding, r2.maxX = childrenBB.maxX + Rect.RightPadding, r2.maxY = childrenBB.maxY + Rect.BottomPadding;
-    });
+    }
   }
   function updateXYFlowNodes() {
     applyConstraints2(rectsToUpdate), xyflowApi.getState().triggerNodeChanges(
@@ -51594,7 +51616,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
         dragging: !1,
         position: r2.position,
         positionAbsolute: r2.positionAbsolute
-      }), r2 instanceof Compound && acc.push({
+      }), r2 instanceof CompoundRect && acc.push({
         id: r2.id,
         type: "dimensions",
         setAttributes: !0,
@@ -51603,52 +51625,49 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     );
   }
   let animationFrameId = null;
-  function onMove(updater) {
+  function onMove() {
     rectsToUpdate.length !== 0 && (animationFrameId ??= requestAnimationFrame(() => {
-      animationFrameId = null, updater(
-        C(
-          editingNodeIds,
-          T((id2) => rects.has(id2) && nodeLookup.has(id2)),
-          m((id2) => ({
-            rect: nonNullable(rects.get(id2)),
-            node: nonNullable(nodeLookup.get(id2))
-          }))
-        )
-      ), updateXYFlowNodes();
+      animationFrameId = null;
+      const { nodeLookup: nodeLookup2 } = xyflowApi.getState();
+      for (const id2 of editingNodeIds) {
+        const rect = nonNullable(rects.get(id2)), node2 = nonNullable(nodeLookup2.get(id2));
+        rect.positionAbsolute = node2.internals.positionAbsolute;
+      }
+      updateXYFlowNodes();
     }));
   }
   return {
+    rects,
     updateXYFlowNodes,
     onMove
   };
 }
 function useLayoutConstraints() {
   const xystore = useXYStoreApi(), diagram = useDiagram(), solverRef = useRef(void 0);
-  return useMemo(() => ({
-    onNodeDragStart: (_event, xynode) => {
-      diagram.cancelSaveManualLayout();
-      const { nodeLookup } = xystore.getState(), draggingNodes = C(
-        Array.from(nodeLookup.values()),
-        T((n2) => n2.dragging === !0 || n2.id === xynode.id || n2.selected === !0),
-        T((n2) => n2.draggable !== !1),
-        m((x2) => x2.id)
-      );
-      i$9(draggingNodes, 1) && (solverRef.current = createLayoutConstraints(xystore, draggingNodes));
-    },
-    onNodeDrag: () => {
-      solverRef.current?.onMove((nodes) => {
-        nodes.forEach(({ rect, node: node2 }) => {
-          rect.positionAbsolute = node2.internals.positionAbsolute;
-        });
-      });
-    },
-    onNodeDragStop: () => {
-      solverRef.current?.updateXYFlowNodes(), diagram.scheduleSaveManualLayout(), solverRef.current = void 0;
-    }
-  }), [xystore, diagram]);
+  return useMemo(() => {
+    let wasPending = !1;
+    const initial = { x: 0, y: 0 };
+    let moved = !1;
+    return {
+      onNodeDragStart: (_event, xynode) => {
+        wasPending = diagram.cancelSaveManualLayout();
+        const { nodeLookup } = xystore.getState(), draggingNodes = C(
+          Array.from(nodeLookup.values()),
+          T((n2) => n2.draggable !== !1 && (n2.dragging === !0 || n2.id === xynode.id || n2.selected === !0))
+        );
+        i$9(draggingNodes, 1) && (solverRef.current = createLayoutConstraints(xystore, m(draggingNodes, (x2) => x2.id))), initial.x = _event.clientX, initial.y = _event.clientY, moved = !1;
+      },
+      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), (wasPending || moved) && diagram.scheduleSaveManualLayout(), solverRef.current = void 0;
+      }
+    };
+  }, [xystore, diagram]);
 }
 const selectXYProps = (ctx) => ({
-  initialized: ctx.initialized,
+  initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
   nodes: ctx.xynodes,
   edges: ctx.xyedges,
   pannable: ctx.pannable,
@@ -51685,14 +51704,14 @@ const selectXYProps = (ctx) => ({
     onEdgeClick,
     onCanvasClick,
     onCanvasDblClick
-  } = useDiagramEventHandlers(), notReadOnly = !enableReadOnly, layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
-    $isPanning.set(!0);
-  }, 160), notPanning = useTimeout(() => {
+  } = useDiagramEventHandlers(), notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
+    $isPanning.get() || $isPanning.set(!0);
+  }, isReducedGraphics ? 150 : 350), notPanning = useDebouncedCallback$1(() => {
     isPanning.clear(), $isPanning.get() && $isPanning.set(!1);
   }, 120), onMove = useCallbackRef((event) => {
-    event && ($isPanning.get() || isPanning.start(), notPanning.clear(), notPanning.start());
+    event && ($isPanning.get() || isPanning.start(), notPanning());
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    notPanning.start(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+    notPanning.flush(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   });
@@ -52567,8 +52586,8 @@ function updateActiveWalkthrough({ context: context2 }) {
       });
     }),
     xynodes: context2.xynodes.map((node2) => {
-      const active = step.source === node2.id || step.target === node2.id;
-      return Base.setDimmed(node2, !active);
+      const dimmed = step.source !== node2.id && step.target !== node2.id;
+      return Base.setDimmed(node2, dimmed);
     })
   };
 }
@@ -52753,6 +52772,7 @@ const diagramMachine = xstate_cjsExports.setup({
     overlaysActorLogic
   },
   guards: {
+    isReady: ({ context: context2 }) => context2.initialized.xydata && context2.initialized.xyflow,
     "enabled: FitView": ({ context: context2 }) => context2.features.enableFitView,
     "enabled: FocusMode": ({ context: context2 }) => context2.features.enableFocusMode,
     "enabled: Readonly": ({ context: context2 }) => context2.features.enableReadOnly,
@@ -52844,15 +52864,17 @@ const diagramMachine = xstate_cjsExports.setup({
         console.warn("At least 2 nodes must be selected to align");
         return;
       }
-      const constraints = createLayoutConstraints(xystore, nodesToAlign), aligner = getAligner(mode);
-      constraints.onMove((nodes) => {
-        aligner.computeLayout(nodes.map(({ node: node2 }) => toNodeRect(node2))), nodes.forEach(({ rect, node: node2 }) => {
-          rect.positionAbsolute = {
-            ...rect.positionAbsolute,
-            ...aligner.applyPosition(toNodeRect(node2))
-          };
-        });
-      });
+      const constraints = createLayoutConstraints(xystore, nodesToAlign), aligner = getAligner(mode), nodes = nodesToAlign.map((id2) => ({
+        node: nonNullable(nodeLookup.get(id2)),
+        rect: nonNullable(constraints.rects.get(id2))
+      }));
+      aligner.computeLayout(nodes.map(({ node: node2 }) => toNodeRect(node2)));
+      for (const { rect, node: node2 } of nodes)
+        rect.positionAbsolute = {
+          ...rect.positionAbsolute,
+          ...aligner.applyPosition(toNodeRect(node2))
+        };
+      constraints.updateXYFlowNodes();
     },
     updateFeatures: xstate_cjsExports.enqueueActions(({ enqueue, system, event }) => {
       xstate_cjsExports.assertEvent(event, "update.features");
@@ -52875,6 +52897,12 @@ const diagramMachine = xstate_cjsExports.setup({
         type: "close.all"
       }
     ),
+    startSyncLayout: xstate_cjsExports.assign(({ context: context2, spawn, self: self2 }) => ({
+      syncLayoutActorRef: spawn("syncManualLayoutActorLogic", {
+        id: "syncLayout",
+        input: { parent: self2, viewId: context2.view.id }
+      })
+    })),
     stopSyncLayout: xstate_cjsExports.enqueueActions(({ context: context2, enqueue }) => {
       enqueue.sendTo(context2.syncLayoutActorRef, { type: "stop" }), enqueue.stopChild(context2.syncLayoutActorRef), enqueue.assign({
         syncLayoutActorRef: null
@@ -52897,11 +52925,16 @@ const diagramMachine = xstate_cjsExports.setup({
   initial: "initializing",
   context: ({ input: input2, self: self2, spawn }) => ({
     ...input2,
+    xyedges: [],
+    xynodes: [],
     features: { ...AllDisabled },
     toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
       enableReadOnly: !0
     },
-    initialized: !1,
+    initialized: {
+      xydata: !1,
+      xyflow: !1
+    },
     viewportChangedManually: !1,
     lastOnNavigate: null,
     lastClickedNode: null,
@@ -52914,10 +52947,7 @@ const diagramMachine = xstate_cjsExports.setup({
     },
     viewport: { x: 0, y: 0, zoom: 1 },
     xyflow: null,
-    syncLayoutActorRef: spawn("syncManualLayoutActorLogic", {
-      id: "syncLayout",
-      input: { parent: self2, viewId: input2.view.id }
-    }),
+    syncLayoutActorRef: null,
     activeWalkthrough: null
   }),
   // entry: ({ spawn }) => spawn(layoutActor, { id: 'layout', input: { parent: self } }),
@@ -52925,30 +52955,54 @@ const diagramMachine = xstate_cjsExports.setup({
     initializing: {
       on: {
         "xyflow.init": {
-          actions: [
-            xstate_cjsExports.assign(({ context: context2, event }) => ({
-              initialized: !0,
-              xyflow: event.instance,
-              navigationHistory: {
-                currentIndex: 0,
-                history: [{
-                  viewId: context2.view.id,
-                  fromNode: null,
-                  viewport: { ...event.instance.getViewport() }
-                }]
-              }
-            })),
-            xstate_cjsExports.enqueueActions(({ enqueue, check }) => {
-              check("enabled: FitView") && enqueue({
-                type: "xyflow:fitDiagram",
-                params: { duration: 0 }
-              });
-            })
-          ],
-          target: "ready"
+          actions: xstate_cjsExports.assign(({ context: context2, event }) => ({
+            initialized: {
+              ...context2.initialized,
+              xyflow: !0
+            },
+            xyflow: event.instance
+          })),
+          target: "isReady"
+        },
+        "update.view": {
+          actions: xstate_cjsExports.assign(({ context: context2, event, spawn, self: self2 }) => ({
+            initialized: {
+              ...context2.initialized,
+              xydata: !0
+            },
+            view: event.view,
+            xynodes: event.xynodes,
+            xyedges: event.xyedges
+          })),
+          target: "isReady"
         }
       }
     },
+    isReady: {
+      always: [{
+        guard: "isReady",
+        actions: [
+          {
+            type: "xyflow:fitDiagram",
+            params: { duration: 0 }
+          },
+          "startSyncLayout",
+          xstate_cjsExports.assign(({ context: context2 }) => ({
+            navigationHistory: {
+              currentIndex: 0,
+              history: [{
+                viewId: context2.view.id,
+                fromNode: null,
+                viewport: { ...context2.xyflow.getViewport() }
+              }]
+            }
+          }))
+        ],
+        target: "ready"
+      }, {
+        target: "initializing"
+      }]
+    },
     ready: {
       initial: "idle",
       on: {
@@ -53282,14 +53336,6 @@ const diagramMachine = xstate_cjsExports.setup({
           })
         }
       ],
-      exit: xstate_cjsExports.assign({
-        syncLayoutActorRef: ({ self: self2, context: context2, spawn }) => spawn("syncManualLayoutActorLogic", {
-          id: "syncLayout",
-          systemId: "syncLayout",
-          input: { parent: self2, viewId: context2.view.id }
-        })
-        // lastOnNavigate: null,
-      }),
       on: {
         "update.view": {
           actions: xstate_cjsExports.enqueueActions(({ enqueue, context: context2, event }) => {
@@ -53306,9 +53352,10 @@ const diagramMachine = xstate_cjsExports.setup({
             }), enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 80 })) : (enqueue({
               type: "xyflow:setViewportCenter",
               params: getBBoxCenter(event.view.bounds)
-            }), enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 })), enqueue.assign(updateNavigationHistory), enqueue.assign(mergeXYNodesEdges), enqueue.assign({
+            }), enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 })), enqueue.assign(updateNavigationHistory), enqueue.assign({
+              ...mergeXYNodesEdges({ context: context2, event }),
               lastOnNavigate: null
-            });
+            }), enqueue("startSyncLayout");
           }),
           target: "#idle"
         }
@@ -53349,14 +53396,10 @@ const diagramMachine = xstate_cjsExports.setup({
       actions: [
         xstate_cjsExports.assign(updateNavigationHistory),
         xstate_cjsExports.enqueueActions(({ enqueue, event, check, context: context2 }) => {
-          if (check("is another view")) {
-            const viewId = event.view.id;
+          const isAnotherView = check("is another view");
+          if (isAnotherView) {
             enqueue("closeAllOverlays"), enqueue("stopSyncLayout"), enqueue.assign({
-              focusedNode: null,
-              syncLayoutActorRef: ({ self: self2, spawn }) => spawn("syncManualLayoutActorLogic", {
-                id: "syncLayout",
-                input: { parent: self2, viewId }
-              })
+              focusedNode: null
             });
             const { fromNode, toNode } = findCorrespondingNode(context2, event);
             fromNode && toNode ? (enqueue({
@@ -53372,11 +53415,11 @@ const diagramMachine = xstate_cjsExports.setup({
               type: "xyflow:setViewportCenter",
               params: getBBoxCenter(event.view.bounds)
             }), enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 }));
-          } else
-            enqueue.sendTo((c2) => c2.context.syncLayoutActorRef, { type: "synced" }), context2.viewportChangedManually || enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 });
-          enqueue.assign(mergeXYNodesEdges), enqueue.assign({
+          }
+          enqueue.assign({
+            ...mergeXYNodesEdges({ context: context2, event }),
             lastOnNavigate: null
-          });
+          }), isAnotherView ? enqueue("startSyncLayout") : (enqueue.sendTo((c2) => c2.context.syncLayoutActorRef, { type: "synced" }), context2.viewportChangedManually || enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 }));
         })
       ]
     },
@@ -53394,7 +53437,12 @@ const diagramMachine = xstate_cjsExports.setup({
     xstate_cjsExports.assign({
       xyflow: null,
       xystore: null,
-      initialized: !1,
+      xyedges: [],
+      xynodes: [],
+      initialized: {
+        xydata: !1,
+        xyflow: !1
+      },
       syncLayoutActorRef: null
     })
   ]
@@ -53403,62 +53451,64 @@ function findCorrespondingNode(context2, event) {
   const fromNodeId = context2.lastOnNavigate?.fromNode, fromNode = fromNodeId && context2.view.nodes.find((n2) => n2.id === fromNodeId), fromRef = fromNode && nodeRef(fromNode), toNode = fromRef && event.view.nodes.find((n2) => nodeRef(n2) === fromRef);
   return { fromNode, toNode };
 }
-function DiagramActorProvider({ input: input2, children: children2 }) {
-  const handlersRef = useDiagramEventHandlersRef(), xystore = useStoreApi(), logic = useMemo(() => diagramMachine.provide({
-    actions: {
-      "trigger:NavigateTo": (_, { viewId }) => {
-        handlersRef.current.onNavigateTo?.(viewId);
-      },
-      "trigger:OnChange": (_, params) => {
-        handlersRef.current.onChange?.(params);
+const selectToggledFeatures = (state) => state.context.toggledFeatures;
+function DiagramActorProvider({
+  input: {
+    view,
+    ...inputs
+  },
+  where,
+  children: children2
+}) {
+  const handlersRef = useDiagramEventHandlersRef(), xystore = useStoreApi(), actorRef = xstateReact_cjsExports.useActorRef(
+    diagramMachine.provide({
+      actions: {
+        "trigger:NavigateTo": (_, { viewId }) => {
+          handlersRef.current.onNavigateTo?.(viewId);
+        },
+        "trigger:OnChange": (_, params) => {
+          handlersRef.current.onChange?.(params);
+        },
+        "trigger:OpenSource": (_, params) => {
+          handlersRef.current.onOpenSource?.(params);
+        }
       },
-      "trigger:OpenSource": (_, params) => {
-        handlersRef.current.onOpenSource?.(params);
-      }
-    },
-    actors: {
-      syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
-        actions: {
-          "trigger:OnChange": (_, params) => {
-            handlersRef.current.onChange?.(params);
+      actors: {
+        syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
+          actions: {
+            "trigger:OnChange": (_, params) => {
+              handlersRef.current.onChange?.(params);
+            }
           }
-        }
-      })
-    }
-  }), [handlersRef]), actorRef = xstateReact_cjsExports.useActorRef(
-    logic,
+        })
+      }
+    }),
     {
-      id: `diagram:${input2.view.id}`,
+      id: `diagram:${view.id}`,
       systemId: "diagram",
       // ...inspector,
       input: {
         xystore,
-        ...input2
+        view,
+        ...inputs
       }
     }
-  );
-  return /* @__PURE__ */ jsxs(DiagramActorSafeContext, { value: actorRef, children: [
-    /* @__PURE__ */ jsx(SyncStore, { input: input2, actorRef }),
-    /* @__PURE__ */ jsx(DiagramActorToggledFeatures, { actorRef, children: children2 })
-  ] });
-}
-const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs }, actorRef }) => {
-  const features = useEnabledFeatures();
+  ), features = useEnabledFeatures();
   useUpdateEffect(() => {
     actorRef.send({ type: "update.inputs", inputs });
-  }, [actorRef, inputs]), useEffect(() => {
+  }, [inputs]), useEffect(() => {
     actorRef.send({ type: "update.features", features });
-  }, [actorRef, features]);
-  const frameReq = useRef(null);
-  return useUpdateEffect(() => (frameReq.current = requestAnimationFrame(() => {
-    frameReq.current = null, actorRef.send({ type: "update.view", view, xyedges, xynodes });
-  }), () => {
-    frameReq.current != null && cancelAnimationFrame(frameReq.current), frameReq.current = null;
-  }), [actorRef, view, xyedges, xynodes]), null;
-}, selectToggledFeatures = (state) => state.context.toggledFeatures;
-function DiagramActorToggledFeatures({ children: children2, actorRef }) {
+  }, [features]);
+  const { xyedges, xynodes } = useViewToNodesEdges({
+    view,
+    where,
+    nodesSelectable: inputs.nodesSelectable
+  });
+  useDeepCompareEffect(() => {
+    actorRef.send({ type: "update.view", view, xyedges, xynodes });
+  }, [view, xyedges, xynodes]);
   const toggledFeatures = xstateReact_cjsExports.useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: children2 });
+  return /* @__PURE__ */ jsx(DiagramActorSafeContext, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: children2 }) });
 }
 function LikeC4Diagram({
   onCanvasClick,
@@ -53502,11 +53552,7 @@ function LikeC4Diagram({
   reactFlowProps = {},
   children: children2
 }) {
-  const hasLikec4model = !!useLikeC4Model$1(), initialRef = useRef(null), xyNodesEdges = useViewToNodesEdges({
-    view,
-    where,
-    nodesSelectable
-  }), isDynamicView = view.__ === "dynamic";
+  const hasLikec4model = !!useLikeC4Model$1(), initialRef = useRef(null), isDynamicView = view.__ === "dynamic";
   initialRef.current == null && (initialRef.current = {
     defaultEdges: [],
     defaultNodes: [],
@@ -53569,8 +53615,8 @@ function LikeC4Diagram({
                           view,
                           pannable,
                           zoomable,
-                          fitViewPadding,
-                          ...xyNodesEdges
+                          nodesSelectable,
+                          fitViewPadding
                         },
                         children: /* @__PURE__ */ jsx(ControlsCustomLayoutProvider, { value: renderControls ?? null, children: /* @__PURE__ */ jsx(
                           LikeC4DiagramXYFlow,
@@ -53637,7 +53683,7 @@ function StaticLikeC4Diagram({
     }
   );
 }
-function Fallback({ error, resetErrorBoundary }) {
+function Fallback$1({ error, resetErrorBoundary }) {
   const router = useRouter();
   return isNotFound(error) ? /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", children: [
     /* @__PURE__ */ jsxs(Text, { c: "orange", fz: "md", children: [
@@ -53740,7 +53786,7 @@ const cssWebcomponentView = css({
 });
 function RouteComponent$2() {
   const { $likec4data, IconRenderer: IconRenderer2 } = Route$j.useLoaderData();
-  return /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4data: $likec4data, children: /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: Fallback, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer2, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
+  return /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4data: $likec4data, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer2, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
 }
 const Route$i = createFileRoute("/")({
   beforeLoad: () => {
@@ -53853,7 +53899,7 @@ const Route$g = createFileRoute("/project/$projectId")({
 });
 function RouteComponent() {
   const { $likec4data, IconRenderer: IconRenderer2 } = Route$g.useLoaderData();
-  return /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4data: $likec4data, children: /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: Fallback, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer2, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
+  return /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4data: $likec4data, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer2, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
 }
 const Route$f = createFileRoute("/project/$projectId/")({
   component: () => {
@@ -54565,8 +54611,42 @@ function ExportButton({ diagram }) {
   ] });
 }
 const Route$d = createFileRoute("/_single/view/$viewId")({
-  component: ViewLayout$2
+  component: ViewLayout$2,
+  errorComponent: ({ error, reset }) => /* @__PURE__ */ jsx(Fallback, { error, resetErrorBoundary: reset })
 });
+function Fallback({ error, resetErrorBoundary }) {
+  const router = useRouter(), { viewId } = Route$d.useParams();
+  return useUpdateEffect(() => {
+    resetErrorBoundary();
+  }, [viewId]), isNotFound(error) ? /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", children: [
+    /* @__PURE__ */ jsxs(Text, { c: "orange", fz: "md", children: [
+      "The diagram",
+      " ",
+      /* @__PURE__ */ jsx(Code, { color: "orange", children: viewId }),
+      " ",
+      "does not exist or contains errors"
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => {
+          resetErrorBoundary(), router.navigate({
+            to: "/",
+            search: !0
+          });
+        },
+        variant: "light",
+        color: "orange",
+        mt: "lg",
+        size: "xs",
+        children: "Go to overview"
+      }
+    )
+  ] }) }) : /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "filled", color: "red", title: "Something went wrong", children: [
+    /* @__PURE__ */ jsx(Code, { block: !0, color: "red", children: error.stack ?? error.message }),
+    /* @__PURE__ */ jsx(Button, { onClick: resetErrorBoundary, color: "red", variant: "white", mt: "lg", size: "xs", children: "Try again" })
+  ] }) });
+}
 function ViewLayout$2() {
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(Outlet, {}),