likec4 1.17.0 → 1.17.1

package/dist/__app__/src/chunks/{main-Beyl8kQ7.js → main-E2hyQKFO.js}

@@ -2,11 +2,11 @@ import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext as createContext$1, useContext as useContext$1, useId as useId$1, useEffect as useEffect$1, useCallback as useCallback$1, Component, useLayoutEffect as useLayoutEffect$1, useRef as useRef$1, useInsertionEffect, useMemo as useMemo$1, forwardRef as forwardRef$1, Fragment, createElement as createElement$1, Children, isValidElement, useState as useState$1, memo as memo$1, Suspense, lazy, useSyncExternalStore, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { L as Link, c as createRootRouteWithContext, S as ScrollRestoration, O as Outlet, a as createFileRoute, u as useRouter, b as useParams, d as useRouterState, i as isNotFound, n as notFound, R as RouterProvider, e as createRouter$1, f as createHashHistory, g as createBrowserHistory } from "./tanstack-router-DJI32bwX.js";
-import { e as Container, f as Title, a as Text$6, G as Group, g as Button, h as useReducedMotion, i as useMergedRef, B as Box, t as themeToVars, j as useMantineStyleNonce, k as useComputedColorScheme, l as Popover, m as PopoverTarget, T as ThemeIcon, n as PopoverDropdown, S as ScrollAreaAutosize, c as clsx, A as ActionIcon$1, o as Stack$1, p as useTree, q as Tree, r as Tooltip$5, s as useId$2, v as SegmentedControl, P as Paper, w as Alert, x as Anchor, y as Pill, D as Divider$1, z as useViewportSize, R as RemoveScroll, C as Card, F as FocusTrap, E as FocusTrapInitialFocus, H as CloseButton, J as Badge, K as Flex, L as ActionIconGroup, M as Tabs, N as TabsList, O as TabsTab, Q as TabsPanel, U as ScrollArea, V as UnstyledButton, W as CopyButton$1, X as Code, Y as useLocalStorage, Z as useStateHistory, _ as Space, $ as useHotkeys, a0 as MantineContext, a1 as Menu, a2 as MenuTarget, a3 as MenuDropdown, a4 as MenuLabel, a5 as MenuDivider, a6 as TooltipGroup, a7 as MenuItem, a8 as keys$1, a9 as ColorSwatch, aa as CheckIcon, ab as rem, ac as Slider, ad as useDebouncedValue, b as CardSection, ae as Spoiler, af as ButtonGroup, ag as useHover, ah as FloatingIndicator, ai as useUncontrolled, aj as clampUseMovePosition, ak as useMove, al as HoverCard, am as HoverCardTarget, an as Overlay, ao as HoverCardDropdown, ap as Notification, aq as createTheme, ar as MantineProvider, as as useInViewport, at as SimpleGrid, u as useMantineColorScheme, au as Drawer, av as Select, aw as ModalRoot, ax as ModalOverlay, ay as ModalContent, az as ModalBody, aA as useMantineTheme, aB as useMediaQuery, aC as useDisclosure, aD as LoadingOverlay, aE as useCallbackRef, aF as Burger, aG as Loader } from "./mantine-CdYQpHSU.js";
+import { L as Link, c as createRootRouteWithContext, S as ScrollRestoration, O as Outlet, a as createFileRoute, u as useRouter, b as useParams, d as useRouterState, i as isNotFound, n as notFound, R as RouterProvider, e as createRouter$1, f as createHashHistory, g as createBrowserHistory } from "./tanstack-router-CF1kJvtP.js";
+import { e as Container, f as Title, a as Text$6, G as Group, g as Button, h as useReducedMotion, i as useMergedRef, B as Box, t as themeToVars, j as useMantineStyleNonce, S as Spotlight, k as SpotlightActionsGroup, d as Center, H as Highlight, l as useComputedColorScheme, m as Popover, n as PopoverTarget, T as ThemeIcon, o as PopoverDropdown, p as ScrollAreaAutosize, c as clsx, A as ActionIcon$1, q as Stack$1, r as useTree, s as Tree, v as Tooltip$5, w as useId$2, x as SegmentedControl, P as Paper, y as Alert, z as Anchor, D as Pill, E as Divider$1, F as useViewportSize, R as RemoveScroll, C as Card, J as FocusTrap, K as FocusTrapInitialFocus, L as CloseButton, M as Badge, N as Flex, O as ActionIconGroup, Q as Tabs, U as TabsList, V as TabsTab, W as TabsPanel, X as ScrollArea, Y as UnstyledButton, Z as CopyButton$1, _ as Code, $ as useLocalStorage, a0 as useStateHistory, a1 as Space, a2 as useHotkeys, a3 as MantineContext, a4 as Menu, a5 as MenuTarget, a6 as MenuDropdown, a7 as MenuLabel, a8 as MenuDivider, a9 as TooltipGroup, aa as MenuItem, ab as keys$1, ac as ColorSwatch, ad as CheckIcon, ae as rem, af as Slider, ag as useDebouncedValue, b as CardSection, ah as Spoiler, ai as ButtonGroup, aj as useHover, ak as FloatingIndicator, al as useUncontrolled, am as clampUseMovePosition, an as useMove, ao as openSpotlight, ap as HoverCard, aq as HoverCardTarget, ar as Overlay, as as HoverCardDropdown, at as Notification, au as createTheme, av as MantineProvider, aw as useInViewport, ax as SimpleGrid, u as useMantineColorScheme, ay as Drawer, az as Select, aA as ModalRoot, aB as ModalOverlay, aC as ModalContent, aD as ModalBody, aE as useMantineTheme, aF as useMediaQuery, aG as useDisclosure, aH as LoadingOverlay, aI as useCallbackRef, aJ as Burger, aK as Loader } from "./mantine-BzD51ZKm.js";
 import { withOverviewGraph, ComponentName, isDevelopment, krokiD2SvgUrl, basepath, useHashHistory } from "../const.js";
 import { useLikeC4ModelAtom } from "virtual:likec4/model";
-import { g as getDefaultExportFromCjs, d as useReactFlow, e as useStoreApi, f as useStore$1, h as useNodesData, j as getNodeDimensions, k as createWithEqualityFn, l as applyNodeChanges, m as applyEdgeChanges, n as getViewportForBounds, o as getBoundsOfRects, s as shallow$1, p as boxToRect, q as useStoreWithEqualityFn, M as MarkerType, H as Handle, P as Position, r as getBezierPath, B as BaseEdge, E as EdgeLabelRenderer, i as index, t as Panel$1, V as ViewportPortal, R as ReactFlowProvider, v as useOnViewportChange, x as useInternalNode, N as NodeToolbar, b as Background, c as BackgroundVariant } from "./likec4-CLNXvKhh.js";
+import { g as getDefaultExportFromCjs, d as useReactFlow, e as useStoreApi, f as useStore$1, h as useNodesData, j as getNodeDimensions, k as createWithEqualityFn, l as applyNodeChanges, m as applyEdgeChanges, n as getViewportForBounds, o as getBoundsOfRects, s as shallow$1, p as boxToRect, q as useStoreWithEqualityFn, M as MarkerType, H as Handle, P as Position, r as getBezierPath, B as BaseEdge, E as EdgeLabelRenderer, i as index, t as Panel$1, V as ViewportPortal, R as ReactFlowProvider, v as useOnViewportChange, x as useInternalNode, N as NodeToolbar, b as Background, c as BackgroundVariant } from "./likec4-DF_Jsv_p.js";
 import { RenderIcon } from "../icons.js";
 import { usePreviewUrl } from "virtual:likec4/previews";
 var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root = "_1u4wf803", description$2 = "_1u4wf804", title$5 = "_1u4wf805";
@@ -257,9 +257,12 @@ function u$9(r2, n2, a2) {
   if (o2 === 1) return u$a(r2, n2, a2);
   throw new Error("Wrong number of arguments");
 }
+function r$6(...t2) {
+  return u$9(Object.values, t2);
+}
 var s$3 = { done: !1, hasNext: !1 };
 function x$1(t2, ...o2) {
-  let n2 = t2, u2 = o2.map((e2) => "lazy" in e2 ? f$4(e2) : void 0), p2 = 0;
+  let n2 = t2, u2 = o2.map((e2) => "lazy" in e2 ? f$3(e2) : void 0), p2 = 0;
   for (; p2 < o2.length; ) {
     if (u2[p2] === void 0 || !B(n2)) {
       let i2 = o2[p2];
@@ -295,14 +298,14 @@ function A(t2, o2, n2) {
   }
   return p2.hasNext && o2.push(u2), e2;
 }
-function f$4(t2) {
+function f$3(t2) {
   let { lazy: o2, lazyArgs: n2 } = t2, u2 = o2(...n2);
   return Object.assign(u2, { isSingle: o2.single ?? !1, index: 0, items: [] });
 }
 function B(t2) {
   return typeof t2 == "string" || typeof t2 == "object" && t2 !== null && Symbol.iterator in t2;
 }
-function f$3(t2, i2) {
+function f$2(t2, i2) {
   let o2 = i2.length - t2.length;
   if (o2 === 1) {
     let [n2, ...r2] = i2;
@@ -314,23 +317,20 @@ function f$3(t2, i2) {
   }
   throw new Error("Wrong number of arguments");
 }
-function i$8(...e2) {
-  return f$3(o$9, e2);
+function i$9(...e2) {
+  return f$2(o$a, e2);
 }
-function o$9() {
+function o$a() {
   let e2 = /* @__PURE__ */ new Set();
   return (t2) => e2.has(t2) ? s$3 : (e2.add(t2), { done: !1, hasNext: !0, next: t2 });
 }
-function r$6(...n2) {
-  return u$9(Object.values, n2);
-}
-function i$7(...e2) {
+function i$8(...e2) {
   return u$9(r$5, e2);
 }
 var r$5 = (e2, t2) => e2.length >= t2, T$1 = { asc: (r2, n2) => r2 > n2, desc: (r2, n2) => r2 < n2 };
-function m$3(r2, n2) {
+function s$2(r2, n2) {
   let [e2, ...o2] = n2;
-  if (!s$2(e2)) {
+  if (!m$3(e2)) {
     let t2 = u$8(...o2);
     return r2(e2, t2);
   }
@@ -340,11 +340,11 @@ function m$3(r2, n2) {
 function u$8(r2, n2, ...e2) {
   let o2 = typeof r2 == "function" ? r2 : r2[0], a2 = typeof r2 == "function" ? "asc" : r2[1], { [a2]: t2 } = T$1, i2 = n2 === void 0 ? void 0 : u$8(n2, ...e2);
   return (y2, c) => {
-    let l2 = o2(y2), p2 = o2(c);
-    return t2(l2, p2) ? 1 : t2(p2, l2) ? -1 : i2?.(y2, c) ?? 0;
+    let p2 = o2(y2), l2 = o2(c);
+    return t2(p2, l2) ? 1 : t2(l2, p2) ? -1 : i2?.(y2, c) ?? 0;
   };
 }
-function s$2(r2) {
+function m$3(r2) {
   if (d$3(r2)) return !0;
   if (typeof r2 != "object" || !Array.isArray(r2)) return !1;
   let [n2, e2, ...o2] = r2;
@@ -352,9 +352,9 @@ function s$2(r2) {
 }
 var d$3 = (r2) => typeof r2 == "function" && r2.length === 1;
 function u$7(...e2) {
-  return u$9(i$6, e2);
+  return u$9(i$7, e2);
 }
-function i$6(e2, a2) {
+function i$7(e2, a2) {
   let n2 = [];
   for (let [o2, r2] of e2.entries()) {
     if (!a2(r2, o2, e2)) break;
@@ -363,9 +363,9 @@ function i$6(e2, a2) {
   return n2;
 }
 function r$4(...n2) {
-  return u$9(e$4, n2);
+  return u$9(e$3, n2);
 }
-function e$4(n2, o2) {
+function e$3(n2, o2) {
   return o2(n2), n2;
 }
 function b(t2) {
@@ -392,17 +392,17 @@ function r$3(e2, u2, t2) {
   return { ...y2, [n2]: r$3(T2, a2, t2) };
 }
 function m$2(...r2) {
-  return u$9(o$8, r2);
+  return u$9(o$9, r2);
 }
-function o$8(r2, t2) {
+function o$9(r2, t2) {
   let e2 = [...r2];
   return e2.sort(t2), e2;
 }
 function a$3(...r2) {
-  return m$3(o$7, r2);
+  return s$2(n$6, r2);
 }
-var o$7 = (r2, n2) => [...r2].sort(n2);
-function o$6(r2, n2) {
+var n$6 = (r2, t2) => [...r2].sort(t2);
+function o$8(r2, n2) {
   let e2 = Math.ceil(r2), t2 = Math.floor(n2);
   if (t2 < e2) throw new RangeError(`randomInteger: The range [${r2.toString()},${n2.toString()}] contains no integer`);
   return Math.floor(Math.random() * (t2 - e2 + 1) + e2);
@@ -417,24 +417,24 @@ function t$7(...e2) {
 function r$2(e2) {
   return [...e2].reverse();
 }
-function i$5(...e2) {
-  return u$9(y$5, e2);
+function i$6(...e2) {
+  return u$9(o$7, e2);
 }
-function y$5(e2, r2) {
-  let o2 = {};
-  for (let n2 of r2) n2 in e2 && (o2[n2] = e2[n2]);
-  return o2;
+function o$7(e2, n2) {
+  let t2 = {};
+  for (let r2 of n2) r2 in e2 && (t2[r2] = e2[r2]);
+  return t2;
 }
 function p$3(...n2) {
   return u$9(t$6, n2);
 }
 var t$6 = (n2, e2) => n2[e2];
 function y$4(...t2) {
-  return u$9(f$2, t2);
+  return u$9(f$1, t2);
 }
-function f$2(t2, e2) {
-  if (!i$7(e2, 1)) return { ...t2 };
-  if (!i$7(e2, 2)) {
+function f$1(t2, e2) {
+  if (!i$8(e2, 1)) return { ...t2 };
+  if (!i$8(e2, 2)) {
     let { [e2[0]]: r2, ...m2 } = t2;
     return m2;
   }
@@ -443,13 +443,13 @@ function f$2(t2, e2) {
   return o2;
 }
 function t$5(...n2) {
-  return u$9(o$5, n2);
+  return u$9(o$6, n2);
 }
-var o$5 = (n2) => n2.length === 1 ? n2[0] : void 0;
+var o$6 = (n2) => n2.length === 1 ? n2[0] : void 0;
 function d$2(...r2) {
-  return u$9(i$4, r2);
+  return u$9(i$5, r2);
 }
-var i$4 = (r2, t2) => {
+var i$5 = (r2, t2) => {
   let a2 = [[], []];
   for (let [o2, e2] of r2.entries()) t2(e2, o2, r2) ? a2[0].push(e2) : a2[1].push(e2);
   return a2;
@@ -462,9 +462,9 @@ function a$2(...e2) {
 }
 var n$5 = (e2) => e2.at(-1);
 function m$1(...a2) {
-  return u$9(o$4, a2, p$2);
+  return u$9(o$5, a2, p$2);
 }
-var o$4 = (a2, e2) => a2.map(e2), p$2 = (a2) => (e2, r2, t2) => ({ done: !1, hasNext: !0, next: a2(e2, r2, t2) });
+var o$5 = (a2, e2) => a2.map(e2), p$2 = (a2) => (e2, t2, r2) => ({ done: !1, hasNext: !0, next: a2(e2, t2, r2) });
 function l$3(...n2) {
   return u$9(d$1, n2);
 }
@@ -488,16 +488,16 @@ function n$3(l2) {
 function l$2(n2) {
   return n2 != null;
 }
-function o$3(a2) {
+function o$4(a2) {
   return (t2) => !a2(t2);
 }
-function e$3(n2) {
-  return n2 == null;
+function n$2(e2) {
+  return e2 == null;
 }
 function e$2(r2) {
   return typeof r2 == "number" && !Number.isNaN(r2);
 }
-function n$2(r2) {
+function o$3(r2) {
   return Array.isArray(r2);
 }
 function n$1(e2) {
@@ -514,17 +514,17 @@ var o$2 = (a2, r2) => a2.flatMap(r2), l$1 = (a2) => (r2, t2, y2) => {
   return Array.isArray(n2) ? { done: !1, hasNext: !0, hasMany: !0, next: n2 } : { done: !1, hasNext: !0, next: n2 };
 };
 function u$4(...e2) {
-  return u$9(o$1, e2, i$3);
+  return u$9(o$1, e2, i$4);
 }
 function o$1(e2, r2) {
   return e2.forEach(r2), e2;
 }
-var i$3 = (e2) => (r2, n2, t2) => (e2(r2, n2, t2), { done: !1, hasNext: !0, next: r2 });
-function f$1(...e2) {
+var i$4 = (e2) => (r2, n2, t2) => (e2(r2, n2, t2), { done: !1, hasNext: !0, next: r2 });
+function i$3(...e2) {
   return u$9(a$1, e2);
 }
 function a$1(e2, r2) {
-  for (let [o2, t2] of Object.entries(e2)) r2(t2, o2, e2);
+  for (let [t2, o2] of Object.entries(e2)) r2(o2, t2, e2);
   return e2;
 }
 function i$2(...e2) {
@@ -563,7 +563,7 @@ function u$2(n2, t2 = [], r2 = []) {
   if (typeof n2 == "function") return n2;
   if (typeof n2 != "object" || n2 === null || n2 instanceof Date || n2 instanceof RegExp) return structuredClone(n2);
   let o2 = t2.indexOf(n2);
-  return o2 >= 0 ? r2[o2] : (t2.push(n2), Array.isArray(n2) ? y$2(n2, t2, r2) : s(n2, t2, r2));
+  return o2 !== -1 ? r2[o2] : (t2.push(n2), Array.isArray(n2) ? y$2(n2, t2, r2) : s(n2, t2, r2));
 }
 function s(n2, t2, r2) {
   let o2 = {};
@@ -633,11 +633,11 @@ function whereOperatorAsPredicate(operator) {
         return (value) => value.kind === kind2;
       }
       const kind = operator.kind.neq;
-      return (value) => e$3(value.kind) || value.kind !== kind;
+      return (value) => n$2(value.kind) || value.kind !== kind;
     }
     case isNotOperator(operator): {
       const predicate = whereOperatorAsPredicate(operator.not);
-      return o$3(predicate);
+      return o$4(predicate);
     }
     case isAndOperator(operator): {
       const predicates = operator.and.map(whereOperatorAsPredicate);
@@ -904,7 +904,7 @@ const blue$1 = {
 }, DELAY = "LIKEC4_DELAY";
 function delay$1(...args) {
   let ms = 100;
-  return args.length === 2 ? ms = o$6(args[0], args[1]) : args.length === 1 && (ms = args[0]), new Promise((resolve) => {
+  return args.length === 2 ? ms = o$8(args[0], args[1]) : args.length === 1 && (ms = args[0]), new Promise((resolve) => {
     setTimeout(() => {
       resolve(DELAY);
     }, ms ?? 100);
@@ -1637,6 +1637,9 @@ class BaseAnimation {
   then(resolve, reject) {
     return this.currentFinishedPromise.then(resolve, reject);
   }
+  flatten() {
+    this.options.type = "keyframes", this.options.ease = "linear";
+  }
   updateFinishedPromise() {
     this.currentFinishedPromise = new Promise((resolve) => {
       this.resolveFinishedPromise = resolve;
@@ -1995,6 +1998,9 @@ class MainThreadAnimation extends BaseAnimation {
     const { name, motionValue: motionValue2, element, keyframes: keyframes2 } = this.options, KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver, onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
     this.resolver = new KeyframeResolver$1(keyframes2, onResolved, name, motionValue2, element), this.resolver.scheduleResolve();
   }
+  flatten() {
+    super.flatten(), this._resolved && Object.assign(this._resolved, this.initPlayback(this._resolved.keyframes));
+  }
   initPlayback(keyframes$1) {
     const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0 } = this.options, generatorFactory = isGenerator(type) ? type : generators[type] || keyframes;
     let mapPercentToKeyframes, mirroredGenerator;
@@ -2158,7 +2164,7 @@ function mapEasingToNativeEasing(easing, duration) {
   if (easing)
     return typeof easing == "function" && supportsLinearEasing() ? generateLinearEasing(easing, duration) : isBezierDefinition(easing) ? cubicBezierAsString(easing) : Array.isArray(easing) ? easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) || supportedWaapiEasing.easeOut) : supportedWaapiEasing[easing];
 }
-function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2, times } = {}) {
+function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2 = "easeInOut", times } = {}) {
   const keyframeOptions = { [valueName]: keyframes2 };
   times && (keyframeOptions.offset = times);
   const easing = mapEasingToNativeEasing(ease2, duration);
@@ -2407,6 +2413,9 @@ class GroupPlaybackControls {
   runAll(methodName) {
     this.animations.forEach((controls) => controls[methodName]());
   }
+  flatten() {
+    this.runAll("flatten");
+  }
   play() {
     this.runAll("play");
   }
@@ -2500,7 +2509,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.11.11", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
+    this.version = "11.11.17", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
       const currentTime = time$1.now();
       this.updatedAt !== currentTime && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(v), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), render && this.events.renderRequest && this.events.renderRequest.notify(this.current);
     }, this.hasAnimated = !1, this.setCurrent(init), this.owner = options.owner;
@@ -6432,7 +6441,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     editingNodeIds.flatMap(ancestorsOf)
   ), traverse = new Array();
   for (const [, xynode] of nodeLookup)
-    e$3(xynode.parentId) && traverse.push({
+    n$2(xynode.parentId) && traverse.push({
       xynode,
       parent: null
     });
@@ -6512,7 +6521,7 @@ function useLayoutConstraints() {
         T((n2) => n2.draggable !== !1),
         m$1((x2) => x2.id)
       );
-      i$7(draggingNodes, 1) && (solverRef.current = createLayoutConstraints(xystore, draggingNodes));
+      i$8(draggingNodes, 1) && (solverRef.current = createLayoutConstraints(xystore, draggingNodes));
     },
     onNodeDrag: () => {
       solverRef.current?.onMove((nodes) => {
@@ -7474,7 +7483,7 @@ function bezierControlPoints(diagramEdge) {
   const handles = [
     // start
   ];
-  for (; i$7(bezierPoints, 3); ) {
+  for (; i$8(bezierPoints, 3); ) {
     const [cp1, cp2, end, ...rest] = bezierPoints, bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]), inflections = bezier.inflections();
     inflections.length === 0 && inflections.push(0.5), inflections.forEach((t2) => {
       const { x: x2, y: y2 } = bezier.get(t2);
@@ -7488,7 +7497,7 @@ function bezierControlPoints(diagramEdge) {
 }
 const isClose = (a2, b2) => Math.abs(a2 - b2) < 3.1;
 function isSamePoint$1(a2, b2) {
-  const [ax, ay] = n$2(a2) ? a2 : [a2.x, a2.y], [bx, by] = n$2(b2) ? b2 : [b2.x, b2.y];
+  const [ax, ay] = o$3(a2) ? a2 : [a2.x, a2.y], [bx, by] = o$3(b2) ? b2 : [b2.x, b2.y];
   return isClose(ax, bx) && isClose(ay, by);
 }
 function stopPropagation$1(e2) {
@@ -7517,7 +7526,7 @@ function diagramViewToXYFlowData(view, opts) {
   const ns = "", nodeById = (id2) => nonNullable(nodeLookup.get(id2), `Node not found: ${id2}`);
   let next;
   for (; next = traverse.shift(); ) {
-    const { node: node2, parent } = next, isCompound = i$7(node2.children, 1) || node2.kind == ElementKind.Group;
+    const { node: node2, parent } = next, isCompound = i$8(node2.children, 1) || node2.kind == ElementKind.Group;
     isCompound && traverse.push(...node2.children.map((child) => ({ node: nodeById(child), parent: node2 })));
     const position2 = {
       x: node2.position[0],
@@ -7561,7 +7570,7 @@ function diagramViewToXYFlowData(view, opts) {
   }
   for (const edge of view.edges) {
     const source = edge.source, target = edge.target, id2 = ns + edge.id;
-    if (!i$7(edge.points, 2)) {
+    if (!i$8(edge.points, 2)) {
       console.error("edge should have at least 2 points", edge);
       continue;
     }
@@ -7590,6 +7599,329 @@ function diagramViewToXYFlowData(view, opts) {
     xyedges
   };
 }
+class Aligner {
+}
+class LinearAligner extends Aligner {
+  constructor(getEdgePosition, computePosition, propertyToEdit) {
+    super(), this.getEdgePosition = getEdgePosition, this.computePosition = computePosition, this.propertyToEdit = propertyToEdit;
+  }
+  alignTo;
+  computeLayout(nodes) {
+    this.alignTo = this.getEdgePosition(nodes);
+  }
+  applyPosition(node2) {
+    return {
+      [this.propertyToEdit]: this.computePosition(this.alignTo, node2)
+    };
+  }
+}
+class GridAligner extends Aligner {
+  layout = /* @__PURE__ */ new Map();
+  axisPreset;
+  get primaryAxisCoord() {
+    return this.axisPreset.primaryAxisCoord;
+  }
+  get secondaryAxisCoord() {
+    return this.axisPreset.secondaryAxisCoord;
+  }
+  get primaryAxisDimension() {
+    return this.axisPreset.primaryAxisDimension;
+  }
+  get secondaryAxisDimension() {
+    return this.axisPreset.secondaryAxisDimension;
+  }
+  constructor(alignmentMode) {
+    super(), this.axisPreset = alignmentMode === "Column" ? {
+      primaryAxisDimension: "width",
+      secondaryAxisDimension: "height",
+      primaryAxisCoord: "x",
+      secondaryAxisCoord: "y"
+    } : {
+      primaryAxisDimension: "height",
+      secondaryAxisDimension: "width",
+      primaryAxisCoord: "y",
+      secondaryAxisCoord: "x"
+    };
+  }
+  applyPosition(node2) {
+    return this.layout?.get(node2.id) ?? {};
+  }
+  computeLayout(nodes) {
+    const sortedNodeRects = x$1(
+      nodes,
+      a$3((r2) => r2[this.primaryAxisCoord])
+    ), layoutRect = this.getLayoutRect(sortedNodeRects), layers = this.getLayers(sortedNodeRects);
+    this.layout = this.buildLayout(layers, layoutRect, sortedNodeRects);
+  }
+  getLayoutRect(nodeRects) {
+    const x2 = Math.min(...nodeRects.map((n2) => n2.x)), y2 = Math.min(...nodeRects.map((n2) => n2.y)), right = Math.max(...nodeRects.map((n2) => n2.x + n2.width)), bottom = Math.max(...nodeRects.map((n2) => n2.y + n2.height));
+    return {
+      x: x2,
+      y: y2,
+      width: right - x2,
+      height: bottom - y2
+    };
+  }
+  getLayers(sortedNodeRects) {
+    const layers = [];
+    let layerEnd = 0, layer = null;
+    for (let node2 of sortedNodeRects)
+      if (layer && node2[this.primaryAxisCoord] < layerEnd)
+        layer.nodes.push(node2), layer.primaryAxisSize = Math.max(layer.primaryAxisSize, node2[this.primaryAxisDimension]), layer.occupiedSpace += node2[this.secondaryAxisDimension], layerEnd = Math.max(
+          node2[this.primaryAxisCoord] + node2[this.primaryAxisDimension],
+          layerEnd
+        );
+      else {
+        layer = {
+          primaryAxisSize: node2[this.primaryAxisDimension],
+          nodes: [node2],
+          occupiedSpace: node2[this.secondaryAxisDimension],
+          layout: null
+        }, layers.push(layer), layerEnd = node2[this.primaryAxisCoord] + node2[this.primaryAxisDimension];
+        continue;
+      }
+    return layers.forEach(
+      (l2) => l2.nodes.sort((a2, b2) => a2[this.secondaryAxisCoord] - b2[this.secondaryAxisCoord])
+    ), layers;
+  }
+  buildLayout(layers, layoutRect, nodeRects) {
+    const nodeMap = new Map(nodeRects.map((n2) => [n2.id, n2])), layout2 = [], occupiedSpace = layers.reduce((a2, b2) => a2 + b2.primaryAxisSize, 0), rowMargin = layers.length > 1 ? (layoutRect[this.primaryAxisDimension] - occupiedSpace) / (layers.length - 1) : 0, baseLayerIndex = layers.reduce(
+      (widestLayerIndex, layer, i2) => layers[widestLayerIndex].occupiedSpace < layer.occupiedSpace ? i2 : widestLayerIndex,
+      0
+    ), baseLayer = layers[baseLayerIndex], baseLayerPosition = layers.slice(0, baseLayerIndex).reduce(
+      (a2, layer) => a2 + layer.primaryAxisSize + rowMargin,
+      layoutRect[this.primaryAxisCoord]
+    ), baseLayerLayout = this.buildLayerLayout(
+      baseLayer,
+      layoutRect,
+      baseLayerPosition,
+      nodeMap,
+      null
+    );
+    baseLayer.layout = baseLayerLayout, layout2.push(...baseLayerLayout.nodePositions);
+    let placeNextLayerAt = baseLayerPosition + baseLayer.primaryAxisSize + rowMargin, refLayer = baseLayer;
+    for (let i2 = baseLayerIndex + 1; i2 < layers.length; i2++) {
+      const layer = layers[i2];
+      layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer), layout2.push(...layer.layout.nodePositions), refLayer = layer.layout.refLayer ?? layer, placeNextLayerAt += layer.primaryAxisSize + rowMargin;
+    }
+    placeNextLayerAt = baseLayerPosition, refLayer = baseLayer;
+    for (let i2 = baseLayerIndex - 1; i2 >= 0; i2--) {
+      const layer = layers[i2];
+      placeNextLayerAt -= layer.primaryAxisSize + rowMargin, layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer), layout2.push(...layer.layout.nodePositions), refLayer = layer.layout.refLayer ?? layer;
+    }
+    return new Map(layout2);
+  }
+  buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer) {
+    let bestLayerLayout = this.scoreLayout(
+      this.spaceAround(layer, layoutRect, placeNextLayerAt),
+      nodeMap
+    );
+    if (layer.nodes.length != 1) {
+      const currentlayerLayout = this.scoreLayout(
+        this.spaceBetween(layer, layoutRect, placeNextLayerAt),
+        nodeMap
+      );
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout;
+    }
+    if (refLayer && refLayer.nodes.length - 1 >= layer.nodes.length) {
+      const currentlayerLayout = this.scoreLayout(
+        this.placeInGaps(layer, placeNextLayerAt, refLayer),
+        nodeMap
+      );
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout;
+    }
+    if (refLayer && refLayer.nodes.length >= layer.nodes.length) {
+      const currentlayerLayout = this.scoreLayout(
+        this.placeInCells(layer, placeNextLayerAt, refLayer),
+        nodeMap
+      );
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout;
+    }
+    return bestLayerLayout[1];
+  }
+  spaceBetween(layer, layoutRect, placeNextLayerAt) {
+    const margin = (layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace) / (layer.nodes.length - 1);
+    let placeNextNodeAt = layoutRect[this.secondaryAxisCoord];
+    const result = /* @__PURE__ */ new Map();
+    for (let node2 of layer.nodes)
+      result.set(node2.id, {
+        [this.secondaryAxisCoord]: placeNextNodeAt,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      }), placeNextNodeAt += node2[this.secondaryAxisDimension] + margin;
+    return { nodePositions: result, refLayer: null };
+  }
+  spaceAround(layer, layoutRect, placeNextLayerAt) {
+    const margin = (layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace) / (layer.nodes.length + 1);
+    let placeNextNodeAt = layoutRect[this.secondaryAxisCoord] + margin;
+    const result = /* @__PURE__ */ new Map();
+    for (let node2 of a$3(layer.nodes, (n2) => n2[this.secondaryAxisCoord]))
+      result.set(node2.id, {
+        [this.secondaryAxisCoord]: placeNextNodeAt,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      }), placeNextNodeAt += node2[this.secondaryAxisDimension] + margin;
+    return { nodePositions: result, refLayer: null };
+  }
+  placeInGaps(layer, placeNextLayerAt, refLayer) {
+    const result = /* @__PURE__ */ new Map(), nodes = layer.nodes, placementOptions = this.getGapsPositions(refLayer);
+    let optionIndex = 0;
+    for (let i2 = 0, node2 = nodes[i2]; i2 < nodes.length; i2++, node2 = nodes[i2]) {
+      const nodeCenter = node2[this.secondaryAxisCoord] + node2[this.secondaryAxisDimension] / 2;
+      let bestOffset = 1 / 0;
+      for (; optionIndex - i2 <= placementOptions.length - nodes.length; ) {
+        const offset = placementOptions[optionIndex] - nodeCenter;
+        if (Math.abs(offset) < Math.abs(bestOffset))
+          bestOffset = offset, optionIndex++;
+        else
+          break;
+      }
+      result.set(node2.id, {
+        [this.secondaryAxisCoord]: node2[this.secondaryAxisCoord] + bestOffset,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      });
+    }
+    return { nodePositions: result, refLayer };
+  }
+  placeInCells(layer, placeNextLayerAt, refLayer) {
+    const result = /* @__PURE__ */ new Map(), nodes = layer.nodes, placementOptions = this.getNodePositions(refLayer);
+    let optionIndex = 0;
+    for (let i2 = 0, node2 = nodes[i2]; i2 < nodes.length; i2++, node2 = nodes[i2]) {
+      const nodeCenter = node2[this.secondaryAxisCoord] + node2[this.secondaryAxisDimension] / 2;
+      let bestOffset = 1 / 0;
+      for (; optionIndex - i2 <= placementOptions.length - nodes.length; ) {
+        const offset = placementOptions[optionIndex] - nodeCenter;
+        if (Math.abs(offset) < Math.abs(bestOffset))
+          bestOffset = offset, optionIndex++;
+        else
+          break;
+      }
+      result.set(node2.id, {
+        [this.secondaryAxisCoord]: node2[this.secondaryAxisCoord] + bestOffset,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      });
+    }
+    return { nodePositions: result, refLayer };
+  }
+  scoreLayout(layout2, originalRects) {
+    return [
+      x$1(
+        Array.from(layout2.nodePositions),
+        m$1(([id2, position2]) => {
+          const originalRect = originalRects.get(id2);
+          return invariant$1(originalRect, `Could not find original rect for node ${id2}`), [i$6(originalRect, ["x", "y"]), position2];
+        }),
+        m$1(
+          ([original, suggested]) => Math.abs(original[this.secondaryAxisCoord] - suggested[this.secondaryAxisCoord])
+        ),
+        l$4((a2, b2) => a2 + b2, 0)
+      ),
+      layout2
+    ];
+  }
+  getGapsPositions(layer) {
+    const result = [], { layout: layout2, nodes } = layer;
+    invariant$1(layout2, "Layout of the layer must be computed before calling getGapsPositions");
+    for (let i2 = 1; i2 < nodes.length; i2++) {
+      const previousNode = nodes[i2 - 1], currentNode = nodes[i2], previousNodePosition = layout2.nodePositions.get(previousNode.id), currentNodePosition = layout2.nodePositions.get(currentNode.id);
+      result.push(
+        (currentNodePosition[this.secondaryAxisCoord] + previousNodePosition[this.secondaryAxisCoord] + previousNode[this.secondaryAxisDimension]) / 2
+      );
+    }
+    return result;
+  }
+  getNodePositions(layer) {
+    const result = [], { layout: layout2, nodes } = layer;
+    invariant$1(layout2, "Layout of the layer must be computed before calling getGapsPositions");
+    for (let i2 = 0; i2 < nodes.length; i2++) {
+      const node2 = nodes[i2], nodePosition = layout2.nodePositions.get(node2.id);
+      result.push(
+        nodePosition[this.secondaryAxisCoord] + node2[this.secondaryAxisDimension] / 2
+      );
+    }
+    return result;
+  }
+}
+function getLinearAligner(mode) {
+  switch (mode) {
+    case "Left":
+      return new LinearAligner(
+        (nodes) => Math.min(...nodes.map((n2) => n2.x)),
+        (alignTo, _) => Math.floor(alignTo),
+        "x"
+      );
+    case "Top":
+      return new LinearAligner(
+        (nodes) => Math.min(...nodes.map((n2) => n2.y)),
+        (alignTo, _) => Math.floor(alignTo),
+        "y"
+      );
+    case "Right":
+      return new LinearAligner(
+        (nodes) => Math.max(...nodes.map((n2) => n2.x + n2.width)),
+        (alignTo, node2) => Math.floor(alignTo - node2.width),
+        "x"
+      );
+    case "Bottom":
+      return new LinearAligner(
+        (nodes) => Math.max(...nodes.map((n2) => n2.y + n2.height)),
+        (alignTo, node2) => Math.floor(alignTo - node2.height),
+        "y"
+      );
+    case "Center":
+      return new LinearAligner(
+        (nodes) => Math.min(...nodes.map((n2) => n2.x + n2.width / 2)),
+        (alignTo, node2) => Math.floor(alignTo - node2.width / 2),
+        "x"
+      );
+    case "Middle":
+      return new LinearAligner(
+        (nodes) => Math.min(...nodes.map((n2) => n2.y + n2.height / 2)),
+        (alignTo, node2) => Math.floor(alignTo - node2.height / 2),
+        "y"
+      );
+  }
+}
+function align(get) {
+  return (mode) => {
+    const { scheduleSaveManualLayout, xystore } = get(), { nodeLookup, parentLookup } = xystore.getState(), nodesToAlign = [...new Set(nodeLookup.values().filter((n2) => n2.selected).map((n2) => n2.id)).difference(new Set(parentLookup.keys()))];
+    if (!i$8(nodesToAlign, 2)) {
+      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))
+        };
+      });
+    }), scheduleSaveManualLayout();
+  };
+}
+function toNodeRect(node2) {
+  return {
+    ...node2.internals.positionAbsolute,
+    id: node2.id,
+    width: getNodeDimensions(node2).width,
+    height: getNodeDimensions(node2).height
+  };
+}
+function getAligner(mode) {
+  switch (mode) {
+    case "Left":
+    case "Right":
+    case "Top":
+    case "Bottom":
+    case "Center":
+    case "Middle":
+      return getLinearAligner(mode);
+    case "Column":
+    case "Row":
+      return new GridAligner(mode);
+    default:
+      nonexhaustive(mode);
+  }
+}
 const StringSet = Set, DEFAULT_PROPS = {
   xyedges: [],
   xynodes: [],
@@ -7689,7 +8021,7 @@ function createDiagramStore(props2) {
                 fromNode: stepCurrent.nodeId
               }), lastOnNavigate && lastOnNavigate.toView !== nextView.id && (lastOnNavigate = null);
               const elTo = lastOnNavigate && nextView.nodes.find((n2) => n2.id === lastOnNavigate?.fromNode), xynodeFrom = elTo && xyflow2.getInternalNode(elTo.id);
-              if (!lastOnNavigate || e$3(elTo) || e$3(xynodeFrom)) {
+              if (!lastOnNavigate || n$2(elTo) || n$2(xynodeFrom)) {
                 const zoom = xyflow2.getZoom(), { x: x2, y: y2 } = getBBoxCenter(nextView.bounds);
                 xyflow2.setCenter(x2, y2, { zoom }), lastOnNavigate = null;
               }
@@ -7905,7 +8237,7 @@ function createDiagramStore(props2) {
               const _updated = acc[data.edge.id] = {
                 points: data.edge.points
               };
-              data.label?.bbox && (_updated.labelBBox = data.label.bbox), data.edge.labelBBox && (_updated.labelBBox ??= data.edge.labelBBox), i$7(controlPoints, 1) && (_updated.controlPoints = controlPoints), !sourceOrTargetMoved && data.edge.dotpos && (_updated.dotpos = data.edge.dotpos);
+              data.label?.bbox && (_updated.labelBBox = data.label.bbox), data.edge.labelBBox && (_updated.labelBBox ??= data.edge.labelBBox), i$8(controlPoints, 1) && (_updated.controlPoints = controlPoints), !sourceOrTargetMoved && data.edge.dotpos && (_updated.dotpos = data.edge.dotpos);
               const allX = [
                 ...data.edge.points.map((p2) => p2[0]),
                 ...controlPoints.map((p2) => p2.x),
@@ -8162,41 +8494,7 @@ function createDiagramStore(props2) {
               return vector(v).mul(scale2).add(nodeCenter);
             }
           },
-          align: (mode) => {
-            const { scheduleSaveManualLayout, xystore } = get(), { nodeLookup, parentLookup } = xystore.getState(), nodesToAlign = [...new Set(nodeLookup.values().filter((n2) => n2.selected).map((n2) => n2.id)).difference(new Set(parentLookup.keys()))];
-            if (!i$7(nodesToAlign, 2)) {
-              console.warn("At least 2 nodes must be selected to align");
-              return;
-            }
-            const constraints = createLayoutConstraints(xystore, nodesToAlign);
-            let getEdgePosition, getPosition, propertyToEdit;
-            switch (mode) {
-              case "Left":
-                getEdgePosition = (nodes) => Math.min(...nodes.map((n2) => n2.internals.positionAbsolute.x)), propertyToEdit = "x", getPosition = (alignTo, _) => Math.floor(alignTo);
-                break;
-              case "Top":
-                getEdgePosition = (nodes) => Math.min(...nodes.map((n2) => n2.internals.positionAbsolute.y)), propertyToEdit = "y", getPosition = (alignTo, _) => Math.floor(alignTo);
-                break;
-              case "Right":
-                getEdgePosition = (nodes) => Math.max(...nodes.map((n2) => n2.internals.positionAbsolute.x + getNodeDimensions(n2).width)), propertyToEdit = "x", getPosition = (alignTo, node2) => Math.floor(alignTo - node2.width);
-                break;
-              case "Bottom":
-                getEdgePosition = (nodes) => Math.max(...nodes.map((n2) => n2.internals.positionAbsolute.y + getNodeDimensions(n2).height)), propertyToEdit = "y", getPosition = (alignTo, node2) => Math.floor(alignTo - node2.height);
-                break;
-              case "Center":
-                getEdgePosition = (nodes) => Math.max(...nodes.map((n2) => n2.internals.positionAbsolute.x + getNodeDimensions(n2).width / 2)), propertyToEdit = "x", getPosition = (alignTo, node2) => Math.floor(alignTo - getNodeDimensions(node2).width / 2);
-                break;
-              case "Middle":
-                getEdgePosition = (nodes) => Math.max(...nodes.map((n2) => n2.internals.positionAbsolute.y + getNodeDimensions(n2).height / 2)), propertyToEdit = "y", getPosition = (alignTo, node2) => Math.floor(alignTo - getNodeDimensions(node2).height / 2);
-                break;
-            }
-            constraints.onMove((nodes) => {
-              const alignTo = getEdgePosition(nodes.map(({ node: node2 }) => node2));
-              nodes.forEach(({ rect, node: node2 }) => {
-                rect.positionAbsolute = { ...rect.positionAbsolute, [propertyToEdit]: getPosition(alignTo, node2) };
-              });
-            }), scheduleSaveManualLayout();
-          }
+          align: align(get)
         }),
         {
           name: `${storeDevId} - ${props2.view.id}`,
@@ -10143,8 +10441,8 @@ class Stylesheet {
     if (this.localClassNamesMap.has(transformedSelector))
       return this.transformClassname(transformedSelector);
     for (var results = this.localClassNamesSearch.search(transformedSelector), lastReplaceIndex = transformedSelector.length, i2 = results.length - 1; i2 >= 0; i2--) {
-      var [endIndex, [firstMatch]] = results[i2], startIndex = endIndex - firstMatch.length + 1;
-      startIndex >= lastReplaceIndex || (lastReplaceIndex = startIndex, transformedSelector[startIndex - 1] !== "." && (transformedSelector = replaceBetweenIndexes(transformedSelector, startIndex, endIndex + 1, this.transformClassname(firstMatch))));
+      var [endIndex, [firstMatch]] = results[i2], startIndex = endIndex - firstMatch.length + 1, skipReplacement = lastReplaceIndex <= endIndex;
+      skipReplacement || (lastReplaceIndex = startIndex, transformedSelector[startIndex - 1] !== "." && (transformedSelector = replaceBetweenIndexes(transformedSelector, startIndex, endIndex + 1, this.transformClassname(firstMatch))));
     }
     return transformedSelector;
   }
@@ -11693,6 +11991,13 @@ var IconLayoutAlignRight = createReactComponent("outline", "layout-align-right",
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLayoutAlignTop = createReactComponent("outline", "layout-align-top", "IconLayoutAlignTop", [["path", { d: "M4 4l16 0", key: "svg-0" }], ["path", { d: "M9 8m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z", key: "svg-1" }]]);
+/**
+ * @license @tabler/icons-react v3.17.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconLayoutBoardSplit = createReactComponent("outline", "layout-board-split", "IconLayoutBoardSplit", [["path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", key: "svg-0" }], ["path", { d: "M4 12h8", key: "svg-1" }], ["path", { d: "M12 15h8", key: "svg-2" }], ["path", { d: "M12 9h8", key: "svg-3" }], ["path", { d: "M12 4v16", key: "svg-4" }]]);
 /**
  * @license @tabler/icons-react v3.17.0 - MIT
  *
@@ -11728,6 +12033,13 @@ var IconMenu = createReactComponent("outline", "menu", "IconMenu", [["path", { d
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMoonStars = createReactComponent("outline", "moon-stars", "IconMoonStars", [["path", { d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z", key: "svg-0" }], ["path", { d: "M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2", key: "svg-1" }], ["path", { d: "M19 11h2m-1 -1v2", key: "svg-2" }]]);
+/**
+ * @license @tabler/icons-react v3.17.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconRectangularPrism = createReactComponent("outline", "rectangular-prism", "IconRectangularPrism", [["path", { d: "M21 14.008v-5.018a1.98 1.98 0 0 0 -1 -1.717l-4 -2.008a2.016 2.016 0 0 0 -2 0l-10 5.008c-.619 .355 -1 1.01 -1 1.718v5.018c0 .709 .381 1.363 1 1.717l4 2.008a2.016 2.016 0 0 0 2 0l10 -5.008c.619 -.355 1 -1.01 1 -1.718z", key: "svg-0" }], ["path", { d: "M9 21v-7.5", key: "svg-1" }], ["path", { d: "M9 13.5l11.5 -5.5", key: "svg-2" }], ["path", { d: "M3.5 11l5.5 2.5", key: "svg-3" }]]);
 /**
  * @license @tabler/icons-react v3.17.0 - MIT
  *
@@ -11735,6 +12047,13 @@ var IconMoonStars = createReactComponent("outline", "moon-stars", "IconMoonStars
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconRouteOff = createReactComponent("outline", "route-off", "IconRouteOff", [["path", { d: "M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-0" }], ["path", { d: "M18 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-1" }], ["path", { d: "M12 19h4.5c.71 0 1.372 -.212 1.924 -.576m1.545 -2.459a3.5 3.5 0 0 0 -3.469 -3.965h-.499m-4 0h-3.501a3.5 3.5 0 0 1 -2.477 -5.972m2.477 -1.028h3.5", key: "svg-2" }], ["path", { d: "M3 3l18 18", key: "svg-3" }]]);
+/**
+ * @license @tabler/icons-react v3.17.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconSearch = createReactComponent("outline", "search", "IconSearch", [["path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M21 21l-6 -6", key: "svg-1" }]]);
 /**
  * @license @tabler/icons-react v3.17.0 - MIT
  *
@@ -11749,6 +12068,13 @@ var IconSelector = createReactComponent("outline", "selector", "IconSelector", [
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconShare = createReactComponent("outline", "share", "IconShare", [["path", { d: "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-0" }], ["path", { d: "M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-1" }], ["path", { d: "M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-2" }], ["path", { d: "M8.7 10.7l6.6 -3.4", key: "svg-3" }], ["path", { d: "M8.7 13.3l6.6 3.4", key: "svg-4" }]]);
+/**
+ * @license @tabler/icons-react v3.17.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconSitemap = createReactComponent("outline", "sitemap", "IconSitemap", [["path", { d: "M3 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z", key: "svg-0" }], ["path", { d: "M15 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z", key: "svg-1" }], ["path", { d: "M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z", key: "svg-2" }], ["path", { d: "M6 15v-1a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v1", key: "svg-3" }], ["path", { d: "M12 9l0 3", key: "svg-4" }]]);
 /**
  * @license @tabler/icons-react v3.17.0 - MIT
  *
@@ -11826,7 +12152,114 @@ var IconPlayerStopFilled = createReactComponent("filled", "player-stop-filled",
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconStarFilled = createReactComponent("filled", "star-filled", "IconStarFilled", [["path", { d: "M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z", key: "svg-0" }]]);
-const OverlayContext = createContext$1({});
+function filterAction(actionData, query) {
+  const queryLower = query.toLowerCase(), keywordMatch = (Array.isArray(actionData.keywords) ? actionData.keywords : []).map((keyword) => {
+    const index2 = keyword.toLowerCase().indexOf(queryLower);
+    return index2 !== -1 ? {
+      keyword,
+      match: keyword.substring(index2, index2 + query.length)
+    } : null;
+  }).find((match) => !!match);
+  return keywordMatch ? {
+    data: actionData,
+    keyword: keywordMatch.keyword,
+    match: keywordMatch.match
+  } : void 0;
+}
+function buildFilteredActions(actionsData, query) {
+  return x$1(
+    actionsData,
+    m$1((a2) => filterAction(a2, query)),
+    T((qm) => !!qm),
+    m$1((qm) => buildSpotlightAction(qm))
+  );
+}
+function highlightMatch(match) {
+  return /* @__PURE__ */ jsx(Highlight, { highlight: match.match, children: match.keyword });
+}
+function buildSpotlightAction(matchedAction) {
+  const isMatchInLabel = matchedAction.keyword == matchedAction.data.label;
+  return /* @__PURE__ */ jsxs(Spotlight.Action, { onClick: matchedAction.data.onClick, children: [
+    /* @__PURE__ */ jsx(Center, { style: { marginRight: "8px " }, children: matchedAction.data.leftSection }),
+    /* @__PURE__ */ jsx(Group, { wrap: "nowrap", w: "100%", children: /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+      /* @__PURE__ */ jsx(Text$6, { children: isMatchInLabel ? highlightMatch(matchedAction) : matchedAction.data.label }),
+      !isMatchInLabel && /* @__PURE__ */ jsx(Text$6, { opacity: 0.6, size: "xs", children: highlightMatch(matchedAction) })
+    ] }) })
+  ] });
+}
+const LikeC4Search = memo$1(() => {
+  const view = useDiagramState((s2) => s2.view), model = useLikeC4Model(!0), store = useDiagramStoreApi(), [query, setQuery] = useState$1(""), getNodeActionsData = () => {
+    const { focusOnNode } = store.getState();
+    return x$1(
+      view.nodes,
+      T((n2) => !!n2.title),
+      m$1((n2) => ({
+        id: n2.id,
+        label: n2.title,
+        keywords: [
+          n2.title,
+          ...(n2.tags ?? []).map((t2) => `#${t2}`),
+          ...n2.description ? [n2.description] : []
+        ].filter((k) => k.toLowerCase()),
+        onClick: () => focusOnNode(n2.id),
+        leftSection: /* @__PURE__ */ jsx(IconRectangularPrism, {})
+      }))
+    );
+  }, getViewActionsData = () => {
+    const { onNavigateTo } = store.getState(), views = model.views();
+    return m$1(views, (v) => ({
+      id: v.id,
+      label: v.title ?? v.id,
+      keywords: [
+        v.title ?? v.id,
+        ...v.tags ?? [],
+        ...v.view.description ? [v.view.description] : []
+      ],
+      onClick: () => {
+        store.setState({
+          hoveredNodeId: null,
+          lastOnNavigate: {
+            fromView: view.id,
+            toView: v.id,
+            fromNode: null
+          }
+        }), onNavigateTo?.(v.id);
+      },
+      leftSection: /* @__PURE__ */ jsx(IconSitemap, {})
+    }));
+  }, { nodeActions, viewActions } = useMemo$1(
+    () => ({
+      nodeActions: buildFilteredActions(getNodeActionsData(), query),
+      viewActions: buildFilteredActions(getViewActionsData(), query)
+    }),
+    [model, store, view, query]
+  ), portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsxs(
+    Spotlight.Root,
+    {
+      ...portalProps,
+      shortcut: ["mod + f", "mod + k"],
+      query,
+      onQueryChange: setQuery,
+      scrollable: !0,
+      maxHeight: "calc(100vh - 100px)",
+      children: [
+        /* @__PURE__ */ jsx(
+          Spotlight.Search,
+          {
+            placeholder: "Search elements in current view and other views...",
+            leftSection: /* @__PURE__ */ jsx(IconSearch, { stroke: 1.5 })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Spotlight.ActionsList, { children: [
+          nodeActions.length > 0 && /* @__PURE__ */ jsx(SpotlightActionsGroup, { label: "Elements", children: nodeActions }),
+          viewActions.length > 0 && /* @__PURE__ */ jsx(SpotlightActionsGroup, { label: "Views", children: viewActions }),
+          nodeActions.length == 0 && viewActions.length == 0 && /* @__PURE__ */ jsx(Spotlight.Empty, { children: "Nothing found..." })
+        ] })
+      ]
+    }
+  );
+}), OverlayContext = createContext$1({});
 function useOverlayDialog() {
   return useContext$1(OverlayContext);
 }
@@ -13595,10 +14028,10 @@ function hasConflict(conflicts, v, w) {
   return !!conflicts[v] && Object.hasOwn(conflicts[v], w);
 }
 function verticalAlignment(g, layering, conflicts, neighborFn) {
-  let root2 = {}, align = {}, pos = {};
+  let root2 = {}, align2 = {}, pos = {};
   return layering.forEach((layer) => {
     layer.forEach((v, order2) => {
-      root2[v] = v, align[v] = v, pos[v] = order2;
+      root2[v] = v, align2[v] = v, pos[v] = order2;
     });
   }), layering.forEach((layer) => {
     let prevIdx = -1;
@@ -13609,13 +14042,13 @@ function verticalAlignment(g, layering, conflicts, neighborFn) {
         let mp = (ws.length - 1) / 2;
         for (let i2 = Math.floor(mp), il = Math.ceil(mp); i2 <= il; ++i2) {
           let w = ws[i2];
-          align[v] === v && prevIdx < pos[w] && !hasConflict(conflicts, v, w) && (align[w] = v, align[v] = root2[v] = root2[w], prevIdx = pos[w]);
+          align2[v] === v && prevIdx < pos[w] && !hasConflict(conflicts, v, w) && (align2[w] = v, align2[v] = root2[v] = root2[w], prevIdx = pos[w]);
         }
       }
     });
-  }), { root: root2, align };
+  }), { root: root2, align: align2 };
 }
-function horizontalCompaction(g, layering, root2, align, reverseSep) {
+function horizontalCompaction(g, layering, root2, align2, reverseSep) {
   let xs = {}, blockG = buildBlockGraph(g, layering, root2, reverseSep), borderType = reverseSep ? "borderLeft" : "borderRight";
   function iterate(setXsFunc, nextNodesFunc) {
     let stack = blockG.nodes(), elem = stack.pop(), visited = {};
@@ -13629,7 +14062,7 @@ function horizontalCompaction(g, layering, root2, align, reverseSep) {
     let min2 = blockG.outEdges(elem).reduce((acc, e2) => Math.min(acc, xs[e2.w] - blockG.edge(e2)), Number.POSITIVE_INFINITY), node2 = g.node(elem);
     min2 !== Number.POSITIVE_INFINITY && node2.borderType !== borderType && (xs[elem] = Math.max(xs[elem], min2));
   }
-  return iterate(pass1, blockG.predecessors.bind(blockG)), iterate(pass2, blockG.successors.bind(blockG)), Object.keys(align).forEach((v) => xs[v] = xs[root2[v]]), xs;
+  return iterate(pass1, blockG.predecessors.bind(blockG)), iterate(pass2, blockG.successors.bind(blockG)), Object.keys(align2).forEach((v) => xs[v] = xs[root2[v]]), xs;
 }
 function buildBlockGraph(g, layering, root2, reverseSep) {
   let blockGraph = new Graph$2(), graphLabel = g.graph(), sepFn = sep(graphLabel.nodesep, graphLabel.edgesep, reverseSep);
@@ -13667,10 +14100,10 @@ function alignCoordinates(xss, alignTo) {
     });
   });
 }
-function balance(xss, align) {
+function balance(xss, align2) {
   return util$3.mapValues(xss.ul, (num, v) => {
-    if (align)
-      return xss[align.toLowerCase()][v];
+    if (align2)
+      return xss[align2.toLowerCase()][v];
     {
       let xs = Object.values(xss).map((xs2) => xs2[v]).sort((a2, b2) => a2 - b2);
       return (xs[1] + xs[2]) / 2;
@@ -13685,11 +14118,11 @@ function positionX$1(g) {
   ["u", "d"].forEach((vert) => {
     adjustedLayering = vert === "u" ? layering : Object.values(layering).reverse(), ["l", "r"].forEach((horiz) => {
       horiz === "r" && (adjustedLayering = adjustedLayering.map((inner2) => Object.values(inner2).reverse()));
-      let neighborFn = (vert === "u" ? g.predecessors : g.successors).bind(g), align = verticalAlignment(g, adjustedLayering, conflicts, neighborFn), xs = horizontalCompaction(
+      let neighborFn = (vert === "u" ? g.predecessors : g.successors).bind(g), align2 = verticalAlignment(g, adjustedLayering, conflicts, neighborFn), xs = horizontalCompaction(
         g,
         adjustedLayering,
-        align.root,
-        align.align,
+        align2.root,
+        align2.align,
         horiz === "r"
       );
       horiz === "r" && (xs = util$3.mapValues(xs, (x2) => -x2)), xss[vert + horiz] = xs;
@@ -14155,7 +14588,7 @@ function useLayoutedEdgeDetails(edgeId) {
     layout$1
   ]);
 }
-var elementNode$1 = "xsefl30", elementNodeContent$1 = "xsefl31", elementNodeTitle$1 = "xsefl32", elementNodeDescription$1 = "xsefl33", compoundNodeBody$1 = "xsefl34", compoundNodeTitle$1 = "xsefl35", cssShapeSvg$1 = "xsefl36", edgeContainer$1 = "xsefl37", edgeLabel$2 = "xsefl38 xsefl37", edgeLabelText$2 = "xsefl39", edgeLabelTechnology$1 = "xsefl3a", navigateBtnBox$1 = "xsefl3b", navigateBtn$3 = "xsefl3c";
+var elementNode$1 = "xsefl30", elementNodeContent$1 = "xsefl31", elementNodeTitle$1 = "xsefl32", elementNodeDescription$1 = "xsefl33", compoundNodeBody$1 = "xsefl34", compoundNodeTitle$1 = "xsefl35", cssShapeSvg$1 = "xsefl36", edgeContainer$1 = "xsefl37", edgeLabel$2 = "xsefl38 xsefl37", edgeLabelText$2 = "xsefl39", edgeLabelTechnology$1 = "xsefl3a", navigateBtnBox$2 = "xsefl3b", navigateBtn$3 = "xsefl3c";
 const Text$5 = Text$6.withProps({
   component: "div"
 });
@@ -14226,7 +14659,7 @@ function CompoundNode$1({
     ))
   ] });
 }
-var container$6 = "_14ylloj1", handleCenter = "_14ylloj2", containerAnimated = "_14ylloj3", dimmed$2 = "_14ylloj4", indicator$1 = "_14ylloj7", fillElementFill = "_14ylloj8", fillMixStroke = "_14ylloja", hasIcon = "_14yllojb", title$4 = "_14ylloje", description$1 = "_14yllojf", technology = "_14yllojg", elementDataContainer = "_14yllojh", elementTextData = "_14ylloji", elementIcon$2 = "_14yllojj", shapeSvg$1 = "_14yllojm", navigateBtn$2 = "_14yllojo _14yllojn", detailsBtn$1 = "_14yllojp _14yllojn";
+var container$6 = "_14ylloj1", handleCenter = "_14ylloj2", containerAnimated = "_14ylloj3", dimmed$2 = "_14ylloj4", indicator$1 = "_14ylloj7", fillElementFill = "_14ylloj8", fillMixStroke = "_14ylloja", hasIcon = "_14yllojb", title$4 = "_14ylloje", description$1 = "_14yllojf", technology = "_14yllojg", elementDataContainer = "_14yllojh", elementTextData = "_14ylloji", elementIcon$2 = "_14yllojj", shapeSvg$1 = "_14yllojm", navigateBtnBox$1 = "_14yllojo", navigateBtn$2 = "_14yllojp _14yllojn", detailsBtn$1 = "_14yllojq _14yllojn";
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
   const radius = Math.round(diameter / 2), rx = radius, ry = toDomPrecision(tilt * radius), tiltAdjustedHeight = height - 2 * ry;
   return {
@@ -14455,7 +14888,7 @@ function ElementNode$1({
             /* @__PURE__ */ jsx(Text$4, { className: elementNodeTitle$1, lineClamp: 2, children: element.title }),
             element.description && /* @__PURE__ */ jsx(Text$4, { className: elementNodeDescription$1, lineClamp: 4, children: element.description })
           ] }),
-          /* @__PURE__ */ jsxs(Group, { className: navigateBtnBox$1, children: [
+          /* @__PURE__ */ jsxs(Group, { className: navigateBtnBox$2, children: [
             navigateTo && onNavigateTo && navigateTo !== currentViewId && /* @__PURE__ */ jsx(
               Action$2,
               {
@@ -15116,7 +15549,7 @@ function layout(subjectId, view, likec4model, scope) {
     T(l$2),
     // Group relations with saame source and target - make them one edge
     i$2(p$3("id")),
-    f$1((grouped) => {
+    i$3((grouped) => {
       const { source, target } = grouped[0], relations = m$1(grouped, (g2) => g2.relation);
       source.data.ports.right.push({
         id: target.id,
@@ -15632,7 +16065,7 @@ const nodeTypes$1 = {
   empty: EmptyNode
 }, edgeTypes$1 = {
   relation: RelationshipEdge$1
-}, findRootSubject = (nodes) => nodes.find((n2) => n2.data.column === "subjects" && e$3(n2.parentId)), resetDimmedAndHovered = (xyflow2) => {
+}, findRootSubject = (nodes) => nodes.find((n2) => n2.data.column === "subjects" && n$2(n2.parentId)), resetDimmedAndHovered = (xyflow2) => {
   xyflow2.setEdges(
     (edges) => edges.map((edge) => ({
       ...edge,
@@ -15845,7 +16278,7 @@ function TabPanelRelationships({
   currentView,
   element
 }) {
-  const layoutId = useId$2(), enableRelationshipBrowser = useDiagramState((s2) => s2.enableRelationshipBrowser), overlay = useOverlayDialog(), [scope, setScope] = useState$1("view"), node2 = nonNullable(currentView.nodes.find((n2) => n2.id === element.id)), incoming = element.incoming().map((r2) => r2.id), outgoing = element.outgoing().map((r2) => r2.id), findRelationIds = (edgeId) => currentView.edges.find((edge) => edge.id === edgeId)?.relations ?? [], incomingInView = i$8(node2.inEdges.flatMap(findRelationIds)), outgoingInView = i$8(node2.outEdges.flatMap(findRelationIds)), notIncludedRelations = [
+  const layoutId = useId$2(), enableRelationshipBrowser = useDiagramState((s2) => s2.enableRelationshipBrowser), overlay = useOverlayDialog(), [scope, setScope] = useState$1("view"), node2 = nonNullable(currentView.nodes.find((n2) => n2.id === element.id)), incoming = element.incoming().map((r2) => r2.id), outgoing = element.outgoing().map((r2) => r2.id), findRelationIds = (edgeId) => currentView.edges.find((edge) => edge.id === edgeId)?.relations ?? [], incomingInView = i$9(node2.inEdges.flatMap(findRelationIds)), outgoingInView = i$9(node2.outEdges.flatMap(findRelationIds)), notIncludedRelations = [
     ...incoming,
     ...outgoing
   ].filter((r2) => !incomingInView.includes(r2) && !outgoingInView.includes(r2)).length, {
@@ -16078,13 +16511,13 @@ function ElementDetailsCard({ fqn: fqn2 }) {
     renderIcon,
     onNavigateTo,
     onOpenSourceElement: onOpenSource
-  } = useDiagramState(i$5(["view", "renderIcon", "onNavigateTo", "onOpenSourceElement"])), element = currentView.nodes.find((n2) => n2.id === fqn2);
+  } = useDiagramState(i$6(["view", "renderIcon", "onNavigateTo", "onOpenSourceElement"])), element = currentView.nodes.find((n2) => n2.id === fqn2);
   invariant$1(element, `DiagramNode with fqn ${fqn2} not found`);
   const likec4Model = useLikeC4Model(!0), elementModel = likec4Model.element(fqn2), viewId = currentView.id, elementIcon2 = ElementIcon$1({
     element,
     viewId,
     renderIcon
-  }), incoming = elementModel.incoming().map((r2) => r2.id), outgoing = elementModel.outgoing().map((r2) => r2.id), findRelationIds = (edgeId) => currentView.edges.find((edge) => edge.id === edgeId)?.relations ?? [], incomingInView = i$8(element.inEdges.flatMap(findRelationIds)), outgoingInView = i$8(element.outEdges.flatMap(findRelationIds));
+  }), incoming = elementModel.incoming().map((r2) => r2.id), outgoing = elementModel.outgoing().map((r2) => r2.id), findRelationIds = (edgeId) => currentView.edges.find((edge) => edge.id === edgeId)?.relations ?? [], incomingInView = i$9(element.inEdges.flatMap(findRelationIds)), outgoingInView = i$9(element.outEdges.flatMap(findRelationIds));
   [
     ...incoming,
     ...outgoing
@@ -16189,8 +16622,8 @@ function ElementDetailsCard({ fqn: fqn2 }) {
                 className: cardHeader,
                 onPointerDown: (e2) => controls.start(e2),
                 children: [
-                  /* @__PURE__ */ jsxs(Group, { align: "start", justify: "space-between", gap: "sm", mb: "sm", children: [
-                    /* @__PURE__ */ jsxs(Group, { align: "start", gap: "sm", style: { cursor: "default" }, children: [
+                  /* @__PURE__ */ jsxs(Group, { align: "start", justify: "space-between", gap: "sm", mb: "sm", wrap: "nowrap", children: [
+                    /* @__PURE__ */ jsxs(Group, { align: "start", gap: "sm", style: { cursor: "default" }, wrap: "nowrap", children: [
                       elementIcon2,
                       /* @__PURE__ */ jsxs(Box, { children: [
                         /* @__PURE__ */ jsx(
@@ -16216,7 +16649,7 @@ function ElementDetailsCard({ fqn: fqn2 }) {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs(Group, { align: "baseline", gap: "sm", children: [
+                  /* @__PURE__ */ jsxs(Group, { align: "baseline", gap: "sm", wrap: "nowrap", children: [
                     /* @__PURE__ */ jsxs(Box, { children: [
                       /* @__PURE__ */ jsx(SmallLabel, { children: "kind" }),
                       /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: element.kind })
@@ -16400,7 +16833,7 @@ function ElementProperty({
       Text$6,
       {
         component: "div",
-        ...e$3(children) && { c: "dimmed" },
+        ...n$2(children) && { c: "dimmed" },
         fz: "md",
         style: {
           whiteSpace: "preserve-breaks",
@@ -16628,7 +17061,7 @@ const RelationshipsOverlay = memo$1(function({ subjectId }) {
     ] : []
   ), /* @__PURE__ */ jsxs(OverlayContext.Provider, { value: ctxValue, children: [
     /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, onExitComplete, children: activeOverlay?.elementDetails && /* @__PURE__ */ jsx(ElementDetailsCard, { fqn: activeOverlay.elementDetails }, "details card") }, viewId),
-    /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, onExitComplete, children: activeOverlay && e$3(activeOverlay.elementDetails) && /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: !0, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, onExitComplete, children: activeOverlay && n$2(activeOverlay.elementDetails) && /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: !0, children: /* @__PURE__ */ jsx(
       Box,
       {
         component: m.div,
@@ -17375,7 +17808,7 @@ function RelationshipsDropdownMenu({
   const {
     openOverlay,
     enableRelationshipBrowser
-  } = useDiagramState(i$5(["openOverlay", "enableRelationshipBrowser"])), portalProps = useMantinePortalProps(), [sourceXYNode, targetXYNode] = useXYNodesData([edge.source, edge.target]);
+  } = useDiagramState(i$6(["openOverlay", "enableRelationshipBrowser"])), portalProps = useMantinePortalProps(), [sourceXYNode, targetXYNode] = useXYNodesData([edge.source, edge.target]);
   invariant$1(sourceXYNode, `Source XYNode ${edge.source} not found for edge ${edge.id}`), invariant$1(targetXYNode, `Target XYNode ${edge.target} not found for edge ${edge.id}`);
   const [direct, nested] = x$1(
     edge.relations,
@@ -17664,13 +18097,13 @@ function bezierPath(bezierSpline) {
   let [start, ...points] = bezierSpline;
   invariant$1(start, "start should be defined");
   let path = `M ${start[0]},${start[1]}`;
-  for (; i$7(points, 3); ) {
+  for (; i$8(points, 3); ) {
     const [cp1, cp2, end, ...rest] = points;
     path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
   }
   return invariant$1(points.length === 0, "all points should be consumed"), path;
 }
-const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => isSame(n$2(a2) ? a2[0] : a2.x, n$2(b2) ? b2[0] : b2.x) && isSame(n$2(a2) ? a2[1] : a2.y, n$2(b2) ? b2[1] : b2.y), sameControlPoints = (a2, b2) => a2 === b2 ? !0 : !a2 || !b2 || a2.length !== b2.length ? !1 : a2.every((ap, i2) => isSamePoint(ap, b2[i2])), 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.label, next.data.label) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y), RelationshipEdge = memo$1(function({
+const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => isSame(o$3(a2) ? a2[0] : a2.x, o$3(b2) ? b2[0] : b2.x) && isSame(o$3(a2) ? a2[1] : a2.y, o$3(b2) ? b2[1] : b2.y), sameControlPoints = (a2, b2) => a2 === b2 ? !0 : !a2 || !b2 || a2.length !== b2.length ? !1 : a2.every((ap, i2) => isSamePoint(ap, b2[i2])), 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.label, next.data.label) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y), RelationshipEdge = memo$1(function({
   id: id2,
   data,
   sourceX,
@@ -18695,30 +19128,38 @@ const CompoundNodeMemo = /* @__PURE__ */ memo$1(({
   tap: {
     scale: 0.975
   }
-}, VariantsNavigate = {
+}, VariantsNavigateBtn = {
   idle: {
     "--ai-bg": "var(--ai-bg-idle)",
     scale: 1,
     opacity: 0.5,
-    translateX: "-50%",
-    originY: 0.2
+    originY: 0.5
   },
   selected: {},
   hovered: {
     "--ai-bg": "var(--ai-bg-hover)",
-    translateX: "-50%",
     scale: 1.35,
     opacity: 1
-  },
+  }
+};
+VariantsNavigateBtn.selected = VariantsNavigateBtn.hovered;
+const VariantsNavigate = {
+  ...VariantsNavigateBtn,
   "hovered:navigate": {
     scale: 1.42
   },
   "tap:navigate": {
     scale: 1.15
   }
-};
-VariantsNavigate.selected = VariantsNavigate.hovered;
-const VariantsDetailsBtn = {
+}, VariantRealationships = {
+  ...VariantsNavigateBtn,
+  "hovered:relationships": {
+    scale: 1.42
+  },
+  "tap:relationships": {
+    scale: 1.15
+  }
+}, VariantsDetailsBtn = {
   idle: {
     "--ai-bg": "var(--ai-bg-idle)",
     scale: 1,
@@ -18756,6 +19197,7 @@ const isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selec
     isNavigable,
     isInteractive,
     enableElementDetails,
+    enableRelationshipBrowser,
     triggerOnNavigateTo,
     openOverlay,
     isInActiveOverlay,
@@ -18765,9 +19207,10 @@ const isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selec
     isEditable: s2.readonly !== !0,
     isHovered: s2.hoveredNodeId === id2,
     isDimmed: s2.dimmed.has(id2),
-    isInteractive: s2.nodesDraggable || s2.nodesSelectable || s2.enableElementDetails || !!s2.onNavigateTo && !!element.navigateTo,
+    isInteractive: s2.nodesDraggable || s2.nodesSelectable || s2.enableElementDetails || s2.enableRelationshipBrowser || !!s2.onNavigateTo && !!element.navigateTo,
     isNavigable: !!s2.onNavigateTo && !!element.navigateTo,
     enableElementDetails: s2.enableElementDetails,
+    enableRelationshipBrowser: s2.enableRelationshipBrowser,
     triggerOnNavigateTo: s2.triggerOnNavigateTo,
     openOverlay: s2.openOverlay,
     isInActiveOverlay: (s2.activeOverlay?.elementDetails ?? s2.activeOverlay?.relationshipsOf) === id2,
@@ -18802,6 +19245,8 @@ const isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selec
     e2.stopPropagation(), triggerOnNavigateTo(id2, e2);
   }, [triggerOnNavigateTo, id2]), onOpenDetails = useCallback$1((e2) => {
     e2.stopPropagation(), openOverlay({ elementDetails: element.id });
+  }, [openOverlay, element.id]), onOpenRelationships = useCallback$1((e2) => {
+    e2.stopPropagation(), openOverlay({ relationshipsOf: element.id });
   }, [openOverlay, element.id]);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     isToolbarVisible && /* @__PURE__ */ jsx(
@@ -18875,22 +19320,38 @@ const isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selec
               ]
             }
           ),
-          isNavigable && /* @__PURE__ */ jsx(
-            ActionIcon$1,
-            {
-              component: m.div,
-              variants: VariantsNavigate,
-              "data-animate-target": "navigate",
-              className: clsx("nodrag nopan", navigateBtn$2),
-              radius: "md",
-              style: { zIndex: 100 },
-              role: "button",
-              onClick: onNavigateTo,
-              onDoubleClick: stopPropagation$1,
-              ...isInteractive && animateHandlers,
-              children: /* @__PURE__ */ jsx(IconZoomScan, { style: { width: "75%" } })
-            }
-          ),
+          (enableRelationshipBrowser || isNavigable) && /* @__PURE__ */ jsxs(Group, { className: navigateBtnBox$1, align: "center", children: [
+            enableRelationshipBrowser && /* @__PURE__ */ jsx(
+              ActionIcon$1,
+              {
+                component: m.div,
+                variants: VariantRealationships,
+                "data-animate-target": "relationships",
+                className: clsx("nodrag nopan", navigateBtn$2),
+                radius: "md",
+                role: "button",
+                onClick: onOpenRelationships,
+                onDoubleClick: stopPropagation$1,
+                ...isInteractive && animateHandlers,
+                children: /* @__PURE__ */ jsx(IconTransform, { style: { width: "75%" } })
+              }
+            ),
+            isNavigable && /* @__PURE__ */ jsx(
+              ActionIcon$1,
+              {
+                component: m.div,
+                variants: VariantsNavigate,
+                "data-animate-target": "navigate",
+                className: clsx("nodrag nopan", navigateBtn$2),
+                radius: "md",
+                role: "button",
+                onClick: onNavigateTo,
+                onDoubleClick: stopPropagation$1,
+                ...isInteractive && animateHandlers,
+                children: /* @__PURE__ */ jsx(IconZoomScan, { style: { width: "75%" } })
+              }
+            )
+          ] }),
           enableElementDetails && /* @__PURE__ */ jsx(
             Tooltip$5,
             {
@@ -19636,7 +20097,7 @@ const ElementNotation = ({ value }) => {
 }, selector$1 = (s2) => ({
   id: s2.view.id,
   notations: s2.view.notation?.elements ?? [],
-  isVisible: e$3(s2.focusedNodeId ?? s2.activeWalkthrough)
+  isVisible: n$2(s2.focusedNodeId ?? s2.activeWalkthrough)
 });
 function NotationPanel() {
   const height = useXYStore((s2) => s2.height), {
@@ -19918,6 +20379,16 @@ const selector = (state) => ({
         /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Manual layouting tools", withinPortal: !1, position: "top-end", children: /* @__PURE__ */ jsx(ActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) }) }) }),
         /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
           /* @__PURE__ */ jsxs(ActionIconGroup, { pos: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Action,
+              {
+                label: "Align in columns",
+                icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, {}),
+                onClick: (e2) => {
+                  e2.stopPropagation(), store.getState().align("Column");
+                }
+              }
+            ),
             /* @__PURE__ */ jsx(
               Action,
               {
@@ -19948,6 +20419,16 @@ const selector = (state) => ({
                 }
               }
             ),
+            /* @__PURE__ */ jsx(
+              Action,
+              {
+                label: "Align in rows",
+                icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { style: { transform: "rotate(90deg)" } }),
+                onClick: (e2) => {
+                  e2.stopPropagation(), store.getState().align("Row");
+                }
+              }
+            ),
             /* @__PURE__ */ jsx(
               Action,
               {
@@ -20104,6 +20585,7 @@ const selector = (state) => ({
   }
 ), TopLeftPanel = () => {
   const store = useDiagramStoreApi(), {
+    enableSearch,
     showNavigationButtons,
     showFitDiagram,
     showLayoutDriftWarning,
@@ -20112,8 +20594,9 @@ const selector = (state) => ({
     viewportChanged,
     showManualLayoutTools
   } = useDiagramState((s2) => {
-    const isNotWalkthrough = e$3(s2.activeWalkthrough), isNotFocused = e$3(s2.focusedNodeId), isNotActive = isNotWalkthrough && isNotFocused;
+    const isNotWalkthrough = n$2(s2.activeWalkthrough), isNotFocused = n$2(s2.focusedNodeId), isNotActive = isNotWalkthrough && isNotFocused;
     return {
+      enableSearch: s2.enableSearch,
       showNavigationButtons: !!s2.onBurgerMenuClick || s2.showNavigationButtons && !!s2.onNavigateTo,
       showFitDiagram: s2.controls && s2.fitViewEnabled && s2.zoomable && isNotWalkthrough,
       showLayoutDriftWarning: s2.controls && !s2.readonly && s2.view.hasLayoutDrift === !0 && isNotActive,
@@ -20137,6 +20620,13 @@ const selector = (state) => ({
       children: [
         showNavigationButtons && /* @__PURE__ */ jsx(BackwardForwardButtons, {}),
         /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
+          enableSearch && /* @__PURE__ */ jsx(Tooltip, { label: "Search", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              onClick: () => openSpotlight(),
+              children: /* @__PURE__ */ jsx(IconSearch, {})
+            }
+          ) }),
           showGoToSource && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
             ActionIcon,
             {
@@ -20227,6 +20717,7 @@ function LikeC4Diagram({
   enableElementDetails = !1,
   enableRelationshipDetails = enableElementDetails,
   enableRelationshipBrowser = enableRelationshipDetails,
+  enableSearch = !0,
   initialWidth,
   initialHeight,
   keepAspectRatio = !1,
@@ -20284,6 +20775,7 @@ function LikeC4Diagram({
             showNotations,
             enableFocusMode,
             enableRelationshipDetails: enableRelationshipDetails && hasLikec4model,
+            enableSearch: hasLikec4model && enableSearch,
             enableElementDetails: enableElementDetails && hasLikec4model,
             enableDynamicViewWalkthrough,
             enableRelationshipBrowser: enableRelationshipBrowser && hasLikec4model,
@@ -20306,7 +20798,8 @@ function LikeC4Diagram({
               LikeC4DiagramInnerMemo,
               {
                 background,
-                showDiagramTitle
+                showDiagramTitle,
+                enableSearch: hasLikec4model && enableSearch
               }
             )
           }
@@ -20318,7 +20811,8 @@ function LikeC4Diagram({
 LikeC4Diagram.displayName = "LikeC4Diagram";
 const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo$1(function({
   background,
-  showDiagramTitle
+  showDiagramTitle,
+  enableSearch
 }) {
   const {
     isInitialized,
@@ -20355,6 +20849,7 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo$1(function({
       }
     ),
     enableOverlays && /* @__PURE__ */ jsx(Overlays, {}),
+    enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}),
     isInitialized && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       fitView && /* @__PURE__ */ jsx(FitViewOnDiagramChange, {}),
       enableFocusMode && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {})
@@ -20399,6 +20894,7 @@ function StaticLikeC4Diagram({
       enableFocusMode: !1,
       nodesSelectable: !1,
       nodesDraggable: !1,
+      enableSearch: !1,
       ...rest
     }
   );
@@ -20510,7 +21006,7 @@ function DiagramPreview$1({ diagram }) {
     }
   ) });
 }
-const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-DNT3FQkn.js"));
+const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-DrCqsLHx.js"));
 function WithOverviewGraph() {
   return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(OverviewGraph, {}) });
 }
@@ -21426,6 +21922,7 @@ function ExportPage() {
             nodesSelectable: !1,
             nodesDraggable: !1,
             enableFocusMode: !1,
+            enableSearch: !1,
             renderIcon: RenderIcon,
             initialWidth: diagram.bounds.width,
             initialHeight: diagram.bounds.height
@@ -21862,7 +22359,7 @@ function recalculateIntersectingHandles({
 }) {
   intersectingHandles.splice(0);
   let targetElement = null;
-  target instanceof HTMLElement && (targetElement = target), registeredResizeHandlers.forEach((data) => {
+  (target instanceof HTMLElement || target instanceof SVGElement) && (targetElement = target), registeredResizeHandlers.forEach((data) => {
     const {
       element: dragHandleElement,
       hitAreaMargins
@@ -23342,9 +23839,9 @@ createRoot(document.getElementById("like4-root")).render(
 );
 export {
   IconFolderFilled as I,
+  nonexhaustive as a,
   createReactComponent as c,
-  e$3 as e,
-  i$5 as i,
-  nonexhaustive as n,
+  i$6 as i,
+  n$2 as n,
   useUpdateEffect as u
 };