likec4 1.32.2 → 1.34.0

package/__app__/src/main.js

@@ -4,12 +4,11 @@ import React__default, { useState, Fragment, createContext, useContext, useRef,
 import { createRoot } from "react-dom/client";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal, flushSync } from "react-dom";
-import { ComponentName, useHashHistory, withOverviewGraph, krokiPumlSvgUrl, isDevelopment, krokiD2SvgUrl, basepath } from "./const.js";
+import { pageTitle, ComponentName, useHashHistory, withOverviewGraph, krokiPumlSvgUrl, isDevelopment, krokiD2SvgUrl, basepath } from "./const.js";
 import { projects, isSingleProject } from "likec4:projects";
 import { $likec4model, $likec4data, IconRenderer as IconRenderer$1, projectId } from "likec4:single-project";
-import { nano } from "likec4/react";
-import { isTagColorSpecified, invariant as invariant$2, hasAtLeast, nonexhaustive, isStepEdgeId, extractStep, nameFromFqn, nonNullable, defaultTheme, ElementShapes, toArray, ifind, DefaultMap, ancestorsFqn, isAncestor, sortParentsFirst, ifilter, Queue, whereOperatorAsPredicate, GroupElementKind, delay as delay$1, BBox, getParallelStepsPrefix, isDeploymentView, compareNatural as compareNatural$1, isDescendantOf } from "@likec4/core";
-import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from "@likec4/core/types";
+import { isTagColorSpecified, invariant as invariant$2, hasAtLeast, nonexhaustive, isStepEdgeId, extractStep, nameFromFqn, nonNullable, defaultTheme, ElementShapes, toArray, RichText, ifind, DefaultMap, ancestorsFqn, isAncestor, sortParentsFirst, ifilter, Queue, whereOperatorAsPredicate, GroupElementKind, delay as delay$1, BBox, getParallelStepsPrefix, isDeploymentView, compareNatural as compareNatural$1, isDescendantOf } from "@likec4/core";
+import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize, RichText as RichText$1 } from "@likec4/core/types";
 import { computeRelationshipsView, treeFromElements as treeFromElements$1 } from "@likec4/core/compute-view/relationships";
 import { compareNatural, ifind as ifind$1, DefaultMap as DefaultMap$1 } from "@likec4/core/utils";
 import { modelConnection } from "@likec4/core/model";
@@ -743,26 +742,34 @@ function useCallbackRef(callback) {
   }), useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useDebouncedCallback$1(callback, options) {
-  const delay2 = typeof options == "number" ? options : options.delay, flushOnUnmount = typeof options == "number" ? !1 : options.flushOnUnmount, leading = typeof options == "number" ? !1 : options.leading, handleCallback = useCallbackRef(callback), debounceTimerRef = useRef(0), flushRef = useRef(() => {
-  }), leadingRef = useRef(leading), lastCallback = Object.assign(
-    useCallback(
+  const { delay: delay2, flushOnUnmount, leading } = typeof options == "number" ? { delay: options, flushOnUnmount: !1, leading: !1 } : options, handleCallback = useCallbackRef(callback), debounceTimerRef = useRef(0), lastCallback = useMemo(() => {
+    const currentCallback = Object.assign(
       (...args) => {
-        if (window.clearTimeout(debounceTimerRef.current), leading && leadingRef.current) {
-          leadingRef.current = !1, handleCallback(...args);
+        window.clearTimeout(debounceTimerRef.current);
+        const isFirstCall = currentCallback._isFirstCall;
+        if (currentCallback._isFirstCall = !1, leading && isFirstCall) {
+          handleCallback(...args);
           return;
         }
+        function clearTimeoutAndLeadingRef() {
+          window.clearTimeout(debounceTimerRef.current), debounceTimerRef.current = 0, currentCallback._isFirstCall = !0;
+        }
         const flush = () => {
-          debounceTimerRef.current !== 0 && (debounceTimerRef.current = 0, leadingRef.current = !0, handleCallback(...args));
+          debounceTimerRef.current !== 0 && (clearTimeoutAndLeadingRef(), handleCallback(...args));
+        }, cancel = () => {
+          clearTimeoutAndLeadingRef();
         };
-        flushRef.current = flush, lastCallback.flush = flush, debounceTimerRef.current = window.setTimeout(flush, delay2), leadingRef.current = !1;
+        currentCallback.flush = flush, currentCallback.cancel = cancel, debounceTimerRef.current = window.setTimeout(flush, delay2);
       },
-      [handleCallback, delay2, leading]
-    ),
-    { flush: flushRef.current }
-  );
+      { flush: () => {
+      }, cancel: () => {
+      }, _isFirstCall: !0 }
+    );
+    return currentCallback;
+  }, [handleCallback, delay2, leading]);
   return useEffect(
     () => () => {
-      window.clearTimeout(debounceTimerRef.current), flushOnUnmount && lastCallback.flush();
+      flushOnUnmount ? lastCallback.flush() : lastCallback.cancel();
     },
     [lastCallback, flushOnUnmount]
   ), lastCallback;
@@ -817,6 +824,19 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 function useColorScheme(initialValue, options) {
   return useMediaQuery("(prefers-color-scheme: dark)", initialValue === "dark", options) ? "dark" : "light";
 }
+function useDebouncedState(defaultValue, wait, options = { leading: !1 }) {
+  const [value, setValue] = useState(defaultValue), timeoutRef = useRef(null), leadingRef = useRef(!0), clearTimeout2 = () => window.clearTimeout(timeoutRef.current);
+  useEffect(() => clearTimeout2, []);
+  const debouncedSetValue = useCallback(
+    (newValue) => {
+      clearTimeout2(), leadingRef.current && options.leading ? setValue(newValue) : timeoutRef.current = window.setTimeout(() => {
+        leadingRef.current = !0, setValue(newValue);
+      }, wait), leadingRef.current = !1;
+    },
+    [options.leading]
+  );
+  return [value, debouncedSetValue];
+}
 function useDebouncedValue(value, wait, options = { leading: !1 }) {
   const [_value, setValue] = useState(value), mountedRef = useRef(!1), timeoutRef = useRef(null), cooldownRef = useRef(!1), cancel = () => window.clearTimeout(timeoutRef.current);
   return useEffect(() => {
@@ -1214,8 +1234,9 @@ const keyNameMap = {
   ArrowRight: "arrowright",
   ArrowUp: "arrowup",
   ArrowDown: "arrowdown",
-  Escape: "esc",
-  Esc: "esc",
+  Escape: "escape",
+  Esc: "escape",
+  esc: "escape",
   Enter: "enter",
   Tab: "tab",
   Backspace: "backspace",
@@ -1361,14 +1382,6 @@ function usePrevious$1(value) {
     ref.current = value;
   }, [value]), ref.current;
 }
-function useInViewport() {
-  const observer = useRef(null), [inViewport, setInViewport] = useState(!1);
-  return { ref: useCallback((node2) => {
-    typeof IntersectionObserver < "u" && (node2 && !observer.current ? observer.current = new IntersectionObserver(
-      (entries) => setInViewport(entries.some((entry) => entry.isIntersecting))
-    ) : observer.current?.disconnect(), node2 ? observer.current?.observe(node2) : setInViewport(!1));
-  }, []), inViewport };
-}
 function useMutationObserver(callback, options, target) {
   const observer = useRef(null), ref = useRef(null);
   return useEffect(() => {
@@ -2860,6 +2873,7 @@ function extractStyleProps(others) {
     pe,
     ps,
     bd,
+    bdrs,
     bg,
     c: c2,
     opacity,
@@ -2947,6 +2961,7 @@ function extractStyleProps(others) {
     inset: inset2,
     display,
     flex,
+    bdrs,
     hiddenFrom,
     visibleFrom,
     lightHidden,
@@ -6838,7 +6853,7 @@ function getDefaultMiddlewares$1(middlewares) {
 }
 function getPopoverMiddlewares(options, getFloating, env) {
   const middlewaresOptions = getDefaultMiddlewares$1(options.middlewares), middlewares = [offset$1(options.offset), hide()];
-  return options.dropdownVisible && env !== "test" && (middlewaresOptions.flip = !1, middlewaresOptions.shift = !1), middlewaresOptions.shift && middlewares.push(
+  return options.dropdownVisible && env !== "test" && options.preventPositionChangeWhenVisible && (middlewaresOptions.flip = !1, middlewaresOptions.shift = !1), middlewaresOptions.shift && middlewares.push(
     shift(
       typeof middlewaresOptions.shift == "boolean" ? { limiter: limitShift(), padding: 5 } : { limiter: limitShift(), padding: 5, ...middlewaresOptions.shift }
     )
@@ -6869,13 +6884,30 @@ function usePopover(options) {
     onChange: options.onChange
   }), previouslyOpened = useRef(_opened), onClose = () => {
     _opened && !options.disabled && setOpened(!1);
-  }, onToggle = () => !options.disabled && setOpened(!_opened), floating = useFloating({
+  }, onToggle = () => {
+    options.disabled || setOpened(!_opened);
+  }, floating = useFloating({
     strategy: options.strategy,
-    placement: options.positionRef.current,
+    placement: options.preventPositionChangeWhenVisible ? options.positionRef.current : options.position,
     middleware: getPopoverMiddlewares(options, () => floating, env),
-    whileElementsMounted: autoUpdate
+    // Only use whileElementsMounted when elements are conditionally rendered (not keepMounted)
+    // When keepMounted=true, elements are hidden with CSS and we need manual autoUpdate control
+    whileElementsMounted: options.keepMounted ? void 0 : autoUpdate
   });
-  return useDidUpdate(() => {
+  return useEffect(() => {
+    if (!(!options.keepMounted || !floating.refs.reference.current || !floating.refs.floating.current) && _opened)
+      return autoUpdate(
+        floating.refs.reference.current,
+        floating.refs.floating.current,
+        floating.update
+      );
+  }, [
+    options.keepMounted,
+    _opened,
+    floating.refs.reference,
+    floating.refs.floating,
+    floating.update
+  ]), useDidUpdate(() => {
     options.onPositionChange?.(floating.placement), options.positionRef.current = floating.placement;
   }, [floating.placement]), useDidUpdate(() => {
     _opened !== previouslyOpened.current && (_opened ? options.onOpen?.() : options.onClose?.()), previouslyOpened.current = _opened;
@@ -6969,6 +7001,7 @@ function Popover(_props) {
     withOverlay,
     overlayProps,
     hideDetached,
+    preventPositionChangeWhenVisible,
     ...others
   } = props2, getStyles2 = useStyles({
     name: __staticSelector,
@@ -6999,7 +7032,9 @@ function Popover(_props) {
     dropdownVisible,
     setDropdownVisible,
     positionRef,
-    disabled
+    disabled,
+    preventPositionChangeWhenVisible,
+    keepMounted
   });
   useClickOutside(
     () => {
@@ -9323,6 +9358,7 @@ function Combobox(_props) {
         Popover,
         {
           opened: store.dropdownOpened,
+          preventPositionChangeWhenVisible: !0,
           ...others,
           onChange: (_opened) => !_opened && onDropdownClose(),
           withRoles: !1,
@@ -13192,7 +13228,7 @@ function TreeNode({
           hasChildren: Array.isArray(node2.children) && node2.children.length > 0,
           elementProps
         }) : /* @__PURE__ */ jsx("div", { ...elementProps, children: node2.label }),
-        controller.expandedState[node2.value] && nested.length > 0 && /* @__PURE__ */ jsx("ul", { role: "group", ...getStyles2("subtree"), "data-level": level2, children: nested })
+        controller.expandedState[node2.value] && nested.length > 0 && /* @__PURE__ */ jsx(Box$1, { component: "ul", role: "group", ...getStyles2("subtree"), "data-level": level2, children: nested })
       ]
     }
   );
@@ -15647,6 +15683,20 @@ class BaseRootRoute extends BaseRoute {
     super(options);
   }
 }
+function stripSearchParams(input2) {
+  return ({ search, next }) => {
+    if (input2 === !0)
+      return {};
+    const result = next(search);
+    return Array.isArray(input2) ? input2.forEach((key2) => {
+      delete result[key2];
+    }) : Object.entries(input2).forEach(
+      ([key2, value]) => {
+        deepEqual$1(result[key2], value) && delete result[key2];
+      }
+    ), result;
+  };
+}
 function CatchBoundary(props2) {
   const errorComponent = props2.errorComponent ?? ErrorComponent;
   return /* @__PURE__ */ jsx(
@@ -16779,8 +16829,7 @@ function Fallback$1({ error, resetErrorBoundary }) {
       {
         onClick: () => {
           resetErrorBoundary(), router.navigate({
-            to: "/",
-            search: !0
+            to: "/"
           });
         },
         variant: "light",
@@ -17159,10 +17208,9 @@ function NotFound() {
 }
 const asTheme = (v) => {
   if (typeof v != "string")
-    return;
+    return "auto";
   const vlower = v.toLowerCase();
-  if (vlower === "light" || vlower === "dark")
-    return vlower;
+  return vlower === "light" || vlower === "dark" ? vlower : "auto";
 }, asPadding = (v) => {
   switch (!0) {
     case typeof v == "number":
@@ -17170,17 +17218,38 @@ const asTheme = (v) => {
     case typeof v == "string":
       return Math.round(parseFloat(v));
   }
+  return 20;
 }, Route$m = createRootRouteWithContext()({
-  // component: RootComponent,
+  component: RootComponent,
   validateSearch: (search) => ({
     padding: asPadding(search.padding),
     theme: asTheme(search.theme)
-  })
-}), Route$l = createFileRoute("/projects")({
+  }),
+  search: {
+    middlewares: [
+      stripSearchParams({
+        padding: 20,
+        theme: "auto"
+      })
+    ]
+  }
+});
+function RootComponent() {
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(Outlet, {}),
+    /* @__PURE__ */ jsx(ThemeSync, {})
+  ] });
+}
+const ThemeSync = () => {
+  const { theme: theme2 } = Route$m.useSearch(), mantineColorScheme = useMantineColorScheme();
+  return useEffect(() => {
+    theme2 && theme2 !== mantineColorScheme.colorScheme && mantineColorScheme.setColorScheme(theme2);
+  }, [theme2]), null;
+}, Route$l = createFileRoute("/projects")({
   component: RouteComponent$3
 });
 function RouteComponent$3() {
-  return useDocumentTitle("LikeC4 Projects"), /* @__PURE__ */ jsx(Container, { size: "xs", py: "lg", children: /* @__PURE__ */ jsxs(Stack, { children: [
+  return useDocumentTitle(`Projects - ${pageTitle}`), /* @__PURE__ */ jsx(Container, { size: "xs", py: "lg", children: /* @__PURE__ */ jsxs(Stack, { children: [
     /* @__PURE__ */ jsx(Text, { fz: "lg", children: "Select a project" }),
     projects.map((v) => /* @__PURE__ */ jsx(
       Button,
@@ -22920,13 +22989,13 @@ function creator(name) {
 }
 function none() {
 }
-function selector$p(selector3) {
+function selector$q(selector3) {
   return selector3 == null ? none : function() {
     return this.querySelector(selector3);
   };
 }
 function selection_select(select2) {
-  typeof select2 != "function" && (select2 = selector$p(select2));
+  typeof select2 != "function" && (select2 = selector$q(select2));
   for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j2 = 0; j2 < m2; ++j2)
     for (var group = groups[j2], n2 = group.length, subgroup = subgroups[j2] = new Array(n2), node2, subnode, i2 = 0; i2 < n2; ++i2)
       (node2 = group[i2]) && (subnode = select2.call(node2, node2.__data__, i2, group)) && ("__data__" in node2 && (subnode.__data__ = node2.__data__), subgroup[i2] = subnode);
@@ -23317,7 +23386,7 @@ function constantNull() {
   return null;
 }
 function selection_insert(name, before) {
-  var create2 = typeof name == "function" ? name : creator(name), select2 = before == null ? constantNull : typeof before == "function" ? before : selector$p(before);
+  var create2 = typeof name == "function" ? name : creator(name), select2 = before == null ? constantNull : typeof before == "function" ? before : selector$q(before);
   return this.select(function() {
     return this.insertBefore(create2.apply(this, arguments), select2.apply(this, arguments) || null);
   });
@@ -24471,7 +24540,7 @@ function transition_remove() {
 }
 function transition_select(select2) {
   var name = this._name, id2 = this._id;
-  typeof select2 != "function" && (select2 = selector$p(select2));
+  typeof select2 != "function" && (select2 = selector$q(select2));
   for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j2 = 0; j2 < m2; ++j2)
     for (var group = groups[j2], n2 = group.length, subgroup = subgroups[j2] = new Array(n2), node2, subnode, i2 = 0; i2 < n2; ++i2)
       (node2 = group[i2]) && (subnode = select2.call(node2, node2.__data__, i2, group)) && ("__data__" in node2 && (subnode.__data__ = node2.__data__), subgroup[i2] = subnode, schedule(subgroup[i2], name, id2, i2, subgroup, get(node2, id2)));
@@ -28830,9 +28899,9 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
   return jsx("div", { className: cc(["react-flow__resize-control", "nodrag", ...positionClassNames, variant, className]), ref: resizeControlRef, style: controlStyle, children: children2 });
 }
 memo$2(ResizeControl);
-const selector$5 = (state) => state.domNode?.querySelector(".react-flow__renderer");
+const selector$p = (state) => state.domNode?.querySelector(".react-flow__renderer");
 function NodeToolbarPortal({ children: children2 }) {
-  const wrapperRef = useStore$1(selector$5);
+  const wrapperRef = useStore$1(selector$p);
   return wrapperRef ? createPortal(children2, wrapperRef) : null;
 }
 const nodeEqualityFn = (a2, b2) => a2?.internals.positionAbsolute.x !== b2?.internals.positionAbsolute.x || a2?.internals.positionAbsolute.y !== b2?.internals.positionAbsolute.y || a2?.measured.width !== b2?.measured.width || a2?.measured.height !== b2?.measured.height || a2?.selected !== b2?.selected || a2?.internals.z !== b2?.internals.z, nodesEqualityFn = (a2, b2) => {
@@ -28920,7 +28989,7 @@ function useCustomCompareEffect(callback, deps, comparator = basicDepsComparator
 function useDebouncedEffect(callback, deps, delay2, maxWait = 0) {
   useEffect(useDebouncedCallback(callback, deps, delay2, maxWait), deps);
 }
-const { valueOf, toString: toString$1 } = Object.prototype, isEqual = (a2, b2) => {
+const { valueOf, toString } = Object.prototype, isEqual = (a2, b2) => {
   const visited = /* @__PURE__ */ new WeakMap(), inner2 = (a3, b3) => {
     if (a3 === b3)
       return !0;
@@ -28969,7 +29038,7 @@ const { valueOf, toString: toString$1 } = Object.prototype, isEqual = (a2, b2) =
     }
     if (a3.valueOf !== valueOf && typeof a3.valueOf == "function" && typeof b3.valueOf == "function")
       return a3.valueOf() === b3.valueOf();
-    if (a3.toString !== toString$1 && typeof a3.toString == "function" && typeof b3.toString == "function")
+    if (a3.toString !== toString && typeof a3.toString == "function" && typeof b3.toString == "function")
       return a3.toString() === b3.toString();
     const aKeys = Object.keys(a3);
     let key2;
@@ -31354,7 +31423,7 @@ const cssTransparentBg = css({
   const square = useStore$1(selectDimensions);
   return useUpdateEffect(onViewportResize, [square]), null;
 };
-var xstateReact_cjs = {}, xstate_cjs = {}, xstateActors_cjs = {}, raiseCbaedcda_cjs = {}, xstateDev_cjs = {}, hasRequiredXstateDev_cjs;
+var xstateReact_cjs = {}, xstate_cjs = {}, xstateActors_cjs = {}, raise5872b9e8_cjs = {}, xstateDev_cjs = {}, hasRequiredXstateDev_cjs;
 function requireXstateDev_cjs() {
   if (hasRequiredXstateDev_cjs) return xstateDev_cjs;
   hasRequiredXstateDev_cjs = 1, Object.defineProperty(xstateDev_cjs, "__esModule", { value: !0 });
@@ -31387,10 +31456,10 @@ function requireXstateDev_cjs() {
   };
   return xstateDev_cjs.devToolsAdapter = devToolsAdapter, xstateDev_cjs.getGlobal = getGlobal, xstateDev_cjs.registerService = registerService, xstateDev_cjs;
 }
-var hasRequiredRaiseCbaedcda_cjs;
-function requireRaiseCbaedcda_cjs() {
-  if (hasRequiredRaiseCbaedcda_cjs) return raiseCbaedcda_cjs;
-  hasRequiredRaiseCbaedcda_cjs = 1;
+var hasRequiredRaise5872b9e8_cjs;
+function requireRaise5872b9e8_cjs() {
+  if (hasRequiredRaise5872b9e8_cjs) return raise5872b9e8_cjs;
+  hasRequiredRaise5872b9e8_cjs = 1;
   var dev_dist_xstateDev = requireXstateDev_cjs();
   class Mailbox {
     constructor(_process) {
@@ -33063,13 +33132,13 @@ ${err.message}`);
     }
     return raise3.type = "xstate.raise", raise3.event = eventOrExpr, raise3.id = options?.id, raise3.delay = options?.delay, raise3.resolve = resolveRaise, raise3.execute = executeRaise, raise3;
   }
-  return raiseCbaedcda_cjs.$$ACTOR_TYPE = $$ACTOR_TYPE, raiseCbaedcda_cjs.Actor = Actor, raiseCbaedcda_cjs.NULL_EVENT = NULL_EVENT, raiseCbaedcda_cjs.ProcessingStatus = ProcessingStatus, raiseCbaedcda_cjs.STATE_DELIMITER = STATE_DELIMITER, raiseCbaedcda_cjs.XSTATE_ERROR = XSTATE_ERROR, raiseCbaedcda_cjs.XSTATE_STOP = XSTATE_STOP, raiseCbaedcda_cjs.and = and, raiseCbaedcda_cjs.cancel = cancel, raiseCbaedcda_cjs.cloneMachineSnapshot = cloneMachineSnapshot, raiseCbaedcda_cjs.createActor = createActor, raiseCbaedcda_cjs.createErrorActorEvent = createErrorActorEvent, raiseCbaedcda_cjs.createInitEvent = createInitEvent, raiseCbaedcda_cjs.createInvokeId = createInvokeId, raiseCbaedcda_cjs.createMachineSnapshot = createMachineSnapshot, raiseCbaedcda_cjs.evaluateGuard = evaluateGuard, raiseCbaedcda_cjs.formatInitialTransition = formatInitialTransition, raiseCbaedcda_cjs.formatTransition = formatTransition, raiseCbaedcda_cjs.formatTransitions = formatTransitions, raiseCbaedcda_cjs.getAllOwnEventDescriptors = getAllOwnEventDescriptors, raiseCbaedcda_cjs.getAllStateNodes = getAllStateNodes, raiseCbaedcda_cjs.getCandidates = getCandidates, raiseCbaedcda_cjs.getDelayedTransitions = getDelayedTransitions, raiseCbaedcda_cjs.getInitialStateNodes = getInitialStateNodes, raiseCbaedcda_cjs.getPersistedSnapshot = getPersistedSnapshot, raiseCbaedcda_cjs.getStateNodeByPath = getStateNodeByPath, raiseCbaedcda_cjs.getStateNodes = getStateNodes, raiseCbaedcda_cjs.interpret = interpret, raiseCbaedcda_cjs.isInFinalState = isInFinalState, raiseCbaedcda_cjs.isMachineSnapshot = isMachineSnapshot, raiseCbaedcda_cjs.isStateId = isStateId, raiseCbaedcda_cjs.macrostep = macrostep, raiseCbaedcda_cjs.mapValues = mapValues, raiseCbaedcda_cjs.matchesState = matchesState, raiseCbaedcda_cjs.microstep = microstep, raiseCbaedcda_cjs.not = not, raiseCbaedcda_cjs.or = or, raiseCbaedcda_cjs.pathToStateValue = pathToStateValue, raiseCbaedcda_cjs.raise = raise2, raiseCbaedcda_cjs.resolveActionsAndContext = resolveActionsAndContext, raiseCbaedcda_cjs.resolveReferencedActor = resolveReferencedActor, raiseCbaedcda_cjs.resolveStateValue = resolveStateValue, raiseCbaedcda_cjs.spawnChild = spawnChild, raiseCbaedcda_cjs.stateIn = stateIn, raiseCbaedcda_cjs.stop = stop, raiseCbaedcda_cjs.stopChild = stopChild, raiseCbaedcda_cjs.toArray = toArray2, raiseCbaedcda_cjs.toObserver = toObserver, raiseCbaedcda_cjs.toStatePath = toStatePath, raiseCbaedcda_cjs.toTransitionConfigArray = toTransitionConfigArray, raiseCbaedcda_cjs.transitionNode = transitionNode, raiseCbaedcda_cjs;
+  return raise5872b9e8_cjs.$$ACTOR_TYPE = $$ACTOR_TYPE, raise5872b9e8_cjs.Actor = Actor, raise5872b9e8_cjs.NULL_EVENT = NULL_EVENT, raise5872b9e8_cjs.ProcessingStatus = ProcessingStatus, raise5872b9e8_cjs.STATE_DELIMITER = STATE_DELIMITER, raise5872b9e8_cjs.XSTATE_ERROR = XSTATE_ERROR, raise5872b9e8_cjs.XSTATE_STOP = XSTATE_STOP, raise5872b9e8_cjs.and = and, raise5872b9e8_cjs.cancel = cancel, raise5872b9e8_cjs.cloneMachineSnapshot = cloneMachineSnapshot, raise5872b9e8_cjs.createActor = createActor, raise5872b9e8_cjs.createErrorActorEvent = createErrorActorEvent, raise5872b9e8_cjs.createInitEvent = createInitEvent, raise5872b9e8_cjs.createInvokeId = createInvokeId, raise5872b9e8_cjs.createMachineSnapshot = createMachineSnapshot, raise5872b9e8_cjs.evaluateGuard = evaluateGuard, raise5872b9e8_cjs.formatInitialTransition = formatInitialTransition, raise5872b9e8_cjs.formatTransition = formatTransition, raise5872b9e8_cjs.formatTransitions = formatTransitions, raise5872b9e8_cjs.getAllOwnEventDescriptors = getAllOwnEventDescriptors, raise5872b9e8_cjs.getAllStateNodes = getAllStateNodes, raise5872b9e8_cjs.getCandidates = getCandidates, raise5872b9e8_cjs.getDelayedTransitions = getDelayedTransitions, raise5872b9e8_cjs.getInitialStateNodes = getInitialStateNodes, raise5872b9e8_cjs.getPersistedSnapshot = getPersistedSnapshot, raise5872b9e8_cjs.getStateNodeByPath = getStateNodeByPath, raise5872b9e8_cjs.getStateNodes = getStateNodes, raise5872b9e8_cjs.interpret = interpret, raise5872b9e8_cjs.isInFinalState = isInFinalState, raise5872b9e8_cjs.isMachineSnapshot = isMachineSnapshot, raise5872b9e8_cjs.isStateId = isStateId, raise5872b9e8_cjs.macrostep = macrostep, raise5872b9e8_cjs.mapValues = mapValues, raise5872b9e8_cjs.matchesState = matchesState, raise5872b9e8_cjs.microstep = microstep, raise5872b9e8_cjs.not = not, raise5872b9e8_cjs.or = or, raise5872b9e8_cjs.pathToStateValue = pathToStateValue, raise5872b9e8_cjs.raise = raise2, raise5872b9e8_cjs.resolveActionsAndContext = resolveActionsAndContext, raise5872b9e8_cjs.resolveReferencedActor = resolveReferencedActor, raise5872b9e8_cjs.resolveStateValue = resolveStateValue, raise5872b9e8_cjs.spawnChild = spawnChild, raise5872b9e8_cjs.stateIn = stateIn, raise5872b9e8_cjs.stop = stop, raise5872b9e8_cjs.stopChild = stopChild, raise5872b9e8_cjs.toArray = toArray2, raise5872b9e8_cjs.toObserver = toObserver, raise5872b9e8_cjs.toStatePath = toStatePath, raise5872b9e8_cjs.toTransitionConfigArray = toTransitionConfigArray, raise5872b9e8_cjs.transitionNode = transitionNode, raise5872b9e8_cjs;
 }
 var hasRequiredXstateActors_cjs;
 function requireXstateActors_cjs() {
   if (hasRequiredXstateActors_cjs) return xstateActors_cjs;
   hasRequiredXstateActors_cjs = 1, Object.defineProperty(xstateActors_cjs, "__esModule", { value: !0 });
-  var guards_dist_xstateGuards = /* @__PURE__ */ requireRaiseCbaedcda_cjs();
+  var guards_dist_xstateGuards = /* @__PURE__ */ requireRaise5872b9e8_cjs();
   requireXstateDev_cjs();
   function fromTransition(transition, initialContext) {
     return {
@@ -33376,11 +33445,11 @@ function requireXstateActors_cjs() {
   }
   return xstateActors_cjs.createEmptyActor = createEmptyActor, xstateActors_cjs.fromCallback = fromCallback, xstateActors_cjs.fromEventObservable = fromEventObservable, xstateActors_cjs.fromObservable = fromObservable, xstateActors_cjs.fromPromise = fromPromise, xstateActors_cjs.fromTransition = fromTransition, xstateActors_cjs;
 }
-var log179b5431_cjs = {}, hasRequiredLog179b5431_cjs;
-function requireLog179b5431_cjs() {
-  if (hasRequiredLog179b5431_cjs) return log179b5431_cjs;
-  hasRequiredLog179b5431_cjs = 1;
-  var guards_dist_xstateGuards = /* @__PURE__ */ requireRaiseCbaedcda_cjs();
+var StateMachine1cda96d3_cjs = {}, assignE9c344ea_cjs = {}, hasRequiredAssignE9c344ea_cjs;
+function requireAssignE9c344ea_cjs() {
+  if (hasRequiredAssignE9c344ea_cjs) return assignE9c344ea_cjs;
+  hasRequiredAssignE9c344ea_cjs = 1;
+  var guards_dist_xstateGuards = /* @__PURE__ */ requireRaise5872b9e8_cjs();
   function createSpawner(actorScope, {
     machine,
     context: context2
@@ -33454,177 +33523,13 @@ function requireLog179b5431_cjs() {
     }
     return assign3.type = "xstate.assign", assign3.assignment = assignment, assign3.resolve = resolveAssign, assign3;
   }
-  function resolveEmit(_, snapshot, args, actionParams, {
-    event: eventOrExpr
-  }) {
-    const resolvedEvent = typeof eventOrExpr == "function" ? eventOrExpr(args, actionParams) : eventOrExpr;
-    return [snapshot, {
-      event: resolvedEvent
-    }, void 0];
-  }
-  function executeEmit(actorScope, {
-    event
-  }) {
-    actorScope.defer(() => actorScope.emit(event));
-  }
-  function emit2(eventOrExpr) {
-    function emit3(_args, _params) {
-    }
-    return emit3.type = "xstate.emit", emit3.event = eventOrExpr, emit3.resolve = resolveEmit, emit3.execute = executeEmit, emit3;
-  }
-  let SpecialTargets = /* @__PURE__ */ function(SpecialTargets2) {
-    return SpecialTargets2.Parent = "#_parent", SpecialTargets2.Internal = "#_internal", SpecialTargets2;
-  }({});
-  function resolveSendTo(actorScope, snapshot, args, actionParams, {
-    to,
-    event: eventOrExpr,
-    id: id2,
-    delay: delay2
-  }, extra) {
-    const delaysMap = snapshot.machine.implementations.delays;
-    if (typeof eventOrExpr == "string")
-      throw new Error(
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        `Only event objects may be used with sendTo; use sendTo({ type: "${eventOrExpr}" }) instead`
-      );
-    const resolvedEvent = typeof eventOrExpr == "function" ? eventOrExpr(args, actionParams) : eventOrExpr;
-    let resolvedDelay;
-    if (typeof delay2 == "string") {
-      const configDelay = delaysMap && delaysMap[delay2];
-      resolvedDelay = typeof configDelay == "function" ? configDelay(args, actionParams) : configDelay;
-    } else
-      resolvedDelay = typeof delay2 == "function" ? delay2(args, actionParams) : delay2;
-    const resolvedTarget = typeof to == "function" ? to(args, actionParams) : to;
-    let targetActorRef;
-    if (typeof resolvedTarget == "string") {
-      if (resolvedTarget === SpecialTargets.Parent ? targetActorRef = actorScope.self._parent : resolvedTarget === SpecialTargets.Internal ? targetActorRef = actorScope.self : resolvedTarget.startsWith("#_") ? targetActorRef = snapshot.children[resolvedTarget.slice(2)] : targetActorRef = extra.deferredActorIds?.includes(resolvedTarget) ? resolvedTarget : snapshot.children[resolvedTarget], !targetActorRef)
-        throw new Error(`Unable to send event to actor '${resolvedTarget}' from machine '${snapshot.machine.id}'.`);
-    } else
-      targetActorRef = resolvedTarget || actorScope.self;
-    return [snapshot, {
-      to: targetActorRef,
-      targetId: typeof resolvedTarget == "string" ? resolvedTarget : void 0,
-      event: resolvedEvent,
-      id: id2,
-      delay: resolvedDelay
-    }, void 0];
-  }
-  function retryResolveSendTo(_, snapshot, params) {
-    typeof params.to == "string" && (params.to = snapshot.children[params.to]);
-  }
-  function executeSendTo(actorScope, params) {
-    actorScope.defer(() => {
-      const {
-        to,
-        event,
-        delay: delay2,
-        id: id2
-      } = params;
-      if (typeof delay2 == "number") {
-        actorScope.system.scheduler.schedule(actorScope.self, to, event, delay2, id2);
-        return;
-      }
-      actorScope.system._relay(
-        actorScope.self,
-        // at this point, in a deferred task, it should already be mutated by retryResolveSendTo
-        // if it initially started as a string
-        to,
-        event.type === guards_dist_xstateGuards.XSTATE_ERROR ? guards_dist_xstateGuards.createErrorActorEvent(actorScope.self.id, event.data) : event
-      );
-    });
-  }
-  function sendTo(to, eventOrExpr, options) {
-    function sendTo2(_args, _params) {
-    }
-    return sendTo2.type = "xstate.sendTo", sendTo2.to = to, sendTo2.event = eventOrExpr, sendTo2.id = options?.id, sendTo2.delay = options?.delay, sendTo2.resolve = resolveSendTo, sendTo2.retryResolve = retryResolveSendTo, sendTo2.execute = executeSendTo, sendTo2;
-  }
-  function sendParent(event, options) {
-    return sendTo(SpecialTargets.Parent, event, options);
-  }
-  function forwardTo(target, options) {
-    return sendTo(target, ({
-      event
-    }) => event, options);
-  }
-  function resolveEnqueueActions(actorScope, snapshot, args, actionParams, {
-    collect
-  }) {
-    const actions = [], enqueue = function(action) {
-      actions.push(action);
-    };
-    return enqueue.assign = (...args2) => {
-      actions.push(assign2(...args2));
-    }, enqueue.cancel = (...args2) => {
-      actions.push(guards_dist_xstateGuards.cancel(...args2));
-    }, enqueue.raise = (...args2) => {
-      actions.push(guards_dist_xstateGuards.raise(...args2));
-    }, enqueue.sendTo = (...args2) => {
-      actions.push(sendTo(...args2));
-    }, enqueue.sendParent = (...args2) => {
-      actions.push(sendParent(...args2));
-    }, enqueue.spawnChild = (...args2) => {
-      actions.push(guards_dist_xstateGuards.spawnChild(...args2));
-    }, enqueue.stopChild = (...args2) => {
-      actions.push(guards_dist_xstateGuards.stopChild(...args2));
-    }, enqueue.emit = (...args2) => {
-      actions.push(emit2(...args2));
-    }, collect({
-      context: args.context,
-      event: args.event,
-      enqueue,
-      check: (guard) => guards_dist_xstateGuards.evaluateGuard(guard, snapshot.context, args.event, snapshot),
-      self: actorScope.self,
-      system: actorScope.system
-    }, actionParams), [snapshot, void 0, actions];
-  }
-  function enqueueActions(collect) {
-    function enqueueActions2(_args, _params) {
-    }
-    return enqueueActions2.type = "xstate.enqueueActions", enqueueActions2.collect = collect, enqueueActions2.resolve = resolveEnqueueActions, enqueueActions2;
-  }
-  function resolveLog(_, snapshot, actionArgs, actionParams, {
-    value,
-    label: label2
-  }) {
-    return [snapshot, {
-      value: typeof value == "function" ? value(actionArgs, actionParams) : value,
-      label: label2
-    }, void 0];
-  }
-  function executeLog({
-    logger
-  }, {
-    value,
-    label: label2
-  }) {
-    label2 ? logger(label2, value) : logger(value);
-  }
-  function log(value = ({
-    context: context2,
-    event
-  }) => ({
-    context: context2,
-    event
-  }), label2) {
-    function log2(_args, _params) {
-    }
-    return log2.type = "xstate.log", log2.value = value, log2.label = label2, log2.resolve = resolveLog, log2.execute = executeLog, log2;
-  }
-  return log179b5431_cjs.SpecialTargets = SpecialTargets, log179b5431_cjs.assign = assign2, log179b5431_cjs.emit = emit2, log179b5431_cjs.enqueueActions = enqueueActions, log179b5431_cjs.forwardTo = forwardTo, log179b5431_cjs.log = log, log179b5431_cjs.sendParent = sendParent, log179b5431_cjs.sendTo = sendTo, log179b5431_cjs;
+  return assignE9c344ea_cjs.assign = assign2, assignE9c344ea_cjs;
 }
-var hasRequiredXstate_cjs;
-function requireXstate_cjs() {
-  if (hasRequiredXstate_cjs) return xstate_cjs;
-  hasRequiredXstate_cjs = 1, Object.defineProperty(xstate_cjs, "__esModule", { value: !0 });
-  var actors_dist_xstateActors = requireXstateActors_cjs(), guards_dist_xstateGuards = /* @__PURE__ */ requireRaiseCbaedcda_cjs(), log = /* @__PURE__ */ requireLog179b5431_cjs();
-  requireXstateDev_cjs();
-  function assertEvent(event, type) {
-    const types = guards_dist_xstateGuards.toArray(type);
-    if (!types.includes(event.type)) {
-      const typesText = types.length === 1 ? `type "${types[0]}"` : `one of types "${types.join('", "')}"`;
-      throw new Error(`Expected event ${JSON.stringify(event)} to have ${typesText}`);
-    }
-  }
+var hasRequiredStateMachine1cda96d3_cjs;
+function requireStateMachine1cda96d3_cjs() {
+  if (hasRequiredStateMachine1cda96d3_cjs) return StateMachine1cda96d3_cjs;
+  hasRequiredStateMachine1cda96d3_cjs = 1;
+  var guards_dist_xstateGuards = /* @__PURE__ */ requireRaise5872b9e8_cjs(), assign2 = /* @__PURE__ */ requireAssignE9c344ea_cjs();
   const cache = /* @__PURE__ */ new WeakMap();
   function memo2(object, key2, fn) {
     let memoizedData = cache.get(object);
@@ -33726,7 +33631,7 @@ function requireXstate_cjs() {
     }
     /** The mapping of events to transitions. */
     get on() {
-      return memo2(this, "on", () => [...this.transitions].flatMap(([descriptor, t2]) => t2.map((t3) => [descriptor, t3])).reduce((map, [descriptor, transition2]) => (map[descriptor] = map[descriptor] || [], map[descriptor].push(transition2), map), {}));
+      return memo2(this, "on", () => [...this.transitions].flatMap(([descriptor, t2]) => t2.map((t3) => [descriptor, t3])).reduce((map, [descriptor, transition]) => (map[descriptor] = map[descriptor] || [], map[descriptor].push(transition), map), {}));
     }
     get after() {
       return memo2(this, "delayedTransitions", () => guards_dist_xstateGuards.getDelayedTransitions(this));
@@ -33780,7 +33685,7 @@ ${err.message}`);
      * Excludes any inert events.
      */
     get ownEvents() {
-      const events = new Set([...this.transitions.keys()].filter((descriptor) => this.transitions.get(descriptor).some((transition2) => !(!transition2.target && !transition2.actions.length && !transition2.reenter))));
+      const events = new Set([...this.transitions.keys()].filter((descriptor) => this.transitions.get(descriptor).some((transition) => !(!transition.target && !transition.actions.length && !transition.reenter))));
       return Array.from(events);
     }
   }
@@ -33798,11 +33703,10 @@ ${err.message}`);
       }), this.root._initialize(), this.states = this.root.states, this.events = this.root.events;
     }
     /**
-     * Clones this state machine with the provided implementations and merges the
-     * `context` (if provided).
+     * Clones this state machine with the provided implementations.
      *
-     * @param implementations Options (`actions`, `guards`, `actors`, `delays`,
-     *   `context`) to recursively merge with the existing options.
+     * @param implementations Options (`actions`, `guards`, `actors`, `delays`) to
+     *   recursively merge with the existing options.
      * @returns A new `StateMachine` instance with the provided implementations.
      */
     provide(implementations) {
@@ -33889,7 +33793,7 @@ ${err.message}`);
           input: event.input,
           self: self2
         });
-        return guards_dist_xstateGuards.resolveActionsAndContext(preInitial, initEvent, actorScope, [log.assign(assignment)], internalQueue, void 0);
+        return guards_dist_xstateGuards.resolveActionsAndContext(preInitial, initEvent, actorScope, [assign2.assign(assignment)], internalQueue, void 0);
       }
       return preInitial;
     }
@@ -33947,33 +33851,28 @@ ${err.message}`);
         });
         children2[actorId] = actorRef;
       });
-      function resolveStateNodeFromIdOrPath(idOrPath, root2) {
+      function resolveHistoryReferencedState(root2, referenced) {
+        if (referenced instanceof StateNode)
+          return referenced;
         try {
-          return root2.machine.getStateNodeById(idOrPath);
+          return root2.machine.getStateNodeById(referenced.id);
         } catch {
-          try {
-            return guards_dist_xstateGuards.getStateNodeByPath(root2, idOrPath.split("."));
-          } catch {
-            return idOrPath;
-          }
         }
       }
-      function reviveHistoryValue(historyValue, root2) {
-        if (!historyValue || typeof historyValue != "object") return {};
+      function reviveHistoryValue(root2, historyValue) {
+        if (!historyValue || typeof historyValue != "object")
+          return {};
         const revived = {};
         for (const key2 in historyValue) {
           const arr = historyValue[key2];
-          revived[key2] = arr.map((item) => {
-            if (item instanceof StateNode) return item;
-            if (typeof item == "object" && "id" in item && typeof item.id == "string") {
-              const resolved = resolveStateNodeFromIdOrPath(item.id, root2);
-              if (resolved instanceof StateNode) return resolved;
-            }
-          }).filter((item) => item !== void 0), revived[key2].length === 0 && delete revived[key2];
+          for (const item of arr) {
+            const resolved = resolveHistoryReferencedState(root2, item);
+            resolved && (revived[key2] ??= [], revived[key2].push(resolved));
+          }
         }
         return revived;
       }
-      const revivedHistoryValue = reviveHistoryValue(snapshot.historyValue, this.root), restoredSnapshot = guards_dist_xstateGuards.createMachineSnapshot({
+      const revivedHistoryValue = reviveHistoryValue(this.root, snapshot.historyValue), restoredSnapshot = guards_dist_xstateGuards.createMachineSnapshot({
         ...snapshot,
         children: children2,
         _nodes: Array.from(guards_dist_xstateGuards.getAllStateNodes(guards_dist_xstateGuards.getStateNodes(this.root, snapshot.value))),
@@ -33997,8 +33896,186 @@ ${err.message}`);
       return reviveContext(restoredSnapshot.context, children2), restoredSnapshot;
     }
   }
+  return StateMachine1cda96d3_cjs.StateMachine = StateMachine, StateMachine1cda96d3_cjs.StateNode = StateNode, StateMachine1cda96d3_cjs;
+}
+var log215998b6_cjs = {}, hasRequiredLog215998b6_cjs;
+function requireLog215998b6_cjs() {
+  if (hasRequiredLog215998b6_cjs) return log215998b6_cjs;
+  hasRequiredLog215998b6_cjs = 1;
+  var guards_dist_xstateGuards = /* @__PURE__ */ requireRaise5872b9e8_cjs(), assign2 = /* @__PURE__ */ requireAssignE9c344ea_cjs();
+  function resolveEmit(_, snapshot, args, actionParams, {
+    event: eventOrExpr
+  }) {
+    const resolvedEvent = typeof eventOrExpr == "function" ? eventOrExpr(args, actionParams) : eventOrExpr;
+    return [snapshot, {
+      event: resolvedEvent
+    }, void 0];
+  }
+  function executeEmit(actorScope, {
+    event
+  }) {
+    actorScope.defer(() => actorScope.emit(event));
+  }
+  function emit2(eventOrExpr) {
+    function emit3(_args, _params) {
+    }
+    return emit3.type = "xstate.emit", emit3.event = eventOrExpr, emit3.resolve = resolveEmit, emit3.execute = executeEmit, emit3;
+  }
+  let SpecialTargets = /* @__PURE__ */ function(SpecialTargets2) {
+    return SpecialTargets2.Parent = "#_parent", SpecialTargets2.Internal = "#_internal", SpecialTargets2;
+  }({});
+  function resolveSendTo(actorScope, snapshot, args, actionParams, {
+    to,
+    event: eventOrExpr,
+    id: id2,
+    delay: delay2
+  }, extra) {
+    const delaysMap = snapshot.machine.implementations.delays;
+    if (typeof eventOrExpr == "string")
+      throw new Error(
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        `Only event objects may be used with sendTo; use sendTo({ type: "${eventOrExpr}" }) instead`
+      );
+    const resolvedEvent = typeof eventOrExpr == "function" ? eventOrExpr(args, actionParams) : eventOrExpr;
+    let resolvedDelay;
+    if (typeof delay2 == "string") {
+      const configDelay = delaysMap && delaysMap[delay2];
+      resolvedDelay = typeof configDelay == "function" ? configDelay(args, actionParams) : configDelay;
+    } else
+      resolvedDelay = typeof delay2 == "function" ? delay2(args, actionParams) : delay2;
+    const resolvedTarget = typeof to == "function" ? to(args, actionParams) : to;
+    let targetActorRef;
+    if (typeof resolvedTarget == "string") {
+      if (resolvedTarget === SpecialTargets.Parent ? targetActorRef = actorScope.self._parent : resolvedTarget === SpecialTargets.Internal ? targetActorRef = actorScope.self : resolvedTarget.startsWith("#_") ? targetActorRef = snapshot.children[resolvedTarget.slice(2)] : targetActorRef = extra.deferredActorIds?.includes(resolvedTarget) ? resolvedTarget : snapshot.children[resolvedTarget], !targetActorRef)
+        throw new Error(`Unable to send event to actor '${resolvedTarget}' from machine '${snapshot.machine.id}'.`);
+    } else
+      targetActorRef = resolvedTarget || actorScope.self;
+    return [snapshot, {
+      to: targetActorRef,
+      targetId: typeof resolvedTarget == "string" ? resolvedTarget : void 0,
+      event: resolvedEvent,
+      id: id2,
+      delay: resolvedDelay
+    }, void 0];
+  }
+  function retryResolveSendTo(_, snapshot, params) {
+    typeof params.to == "string" && (params.to = snapshot.children[params.to]);
+  }
+  function executeSendTo(actorScope, params) {
+    actorScope.defer(() => {
+      const {
+        to,
+        event,
+        delay: delay2,
+        id: id2
+      } = params;
+      if (typeof delay2 == "number") {
+        actorScope.system.scheduler.schedule(actorScope.self, to, event, delay2, id2);
+        return;
+      }
+      actorScope.system._relay(
+        actorScope.self,
+        // at this point, in a deferred task, it should already be mutated by retryResolveSendTo
+        // if it initially started as a string
+        to,
+        event.type === guards_dist_xstateGuards.XSTATE_ERROR ? guards_dist_xstateGuards.createErrorActorEvent(actorScope.self.id, event.data) : event
+      );
+    });
+  }
+  function sendTo(to, eventOrExpr, options) {
+    function sendTo2(_args, _params) {
+    }
+    return sendTo2.type = "xstate.sendTo", sendTo2.to = to, sendTo2.event = eventOrExpr, sendTo2.id = options?.id, sendTo2.delay = options?.delay, sendTo2.resolve = resolveSendTo, sendTo2.retryResolve = retryResolveSendTo, sendTo2.execute = executeSendTo, sendTo2;
+  }
+  function sendParent(event, options) {
+    return sendTo(SpecialTargets.Parent, event, options);
+  }
+  function forwardTo(target, options) {
+    return sendTo(target, ({
+      event
+    }) => event, options);
+  }
+  function resolveEnqueueActions(actorScope, snapshot, args, actionParams, {
+    collect
+  }) {
+    const actions = [], enqueue = function(action) {
+      actions.push(action);
+    };
+    return enqueue.assign = (...args2) => {
+      actions.push(assign2.assign(...args2));
+    }, enqueue.cancel = (...args2) => {
+      actions.push(guards_dist_xstateGuards.cancel(...args2));
+    }, enqueue.raise = (...args2) => {
+      actions.push(guards_dist_xstateGuards.raise(...args2));
+    }, enqueue.sendTo = (...args2) => {
+      actions.push(sendTo(...args2));
+    }, enqueue.sendParent = (...args2) => {
+      actions.push(sendParent(...args2));
+    }, enqueue.spawnChild = (...args2) => {
+      actions.push(guards_dist_xstateGuards.spawnChild(...args2));
+    }, enqueue.stopChild = (...args2) => {
+      actions.push(guards_dist_xstateGuards.stopChild(...args2));
+    }, enqueue.emit = (...args2) => {
+      actions.push(emit2(...args2));
+    }, collect({
+      context: args.context,
+      event: args.event,
+      enqueue,
+      check: (guard) => guards_dist_xstateGuards.evaluateGuard(guard, snapshot.context, args.event, snapshot),
+      self: actorScope.self,
+      system: actorScope.system
+    }, actionParams), [snapshot, void 0, actions];
+  }
+  function enqueueActions(collect) {
+    function enqueueActions2(_args, _params) {
+    }
+    return enqueueActions2.type = "xstate.enqueueActions", enqueueActions2.collect = collect, enqueueActions2.resolve = resolveEnqueueActions, enqueueActions2;
+  }
+  function resolveLog(_, snapshot, actionArgs, actionParams, {
+    value,
+    label: label2
+  }) {
+    return [snapshot, {
+      value: typeof value == "function" ? value(actionArgs, actionParams) : value,
+      label: label2
+    }, void 0];
+  }
+  function executeLog({
+    logger
+  }, {
+    value,
+    label: label2
+  }) {
+    label2 ? logger(label2, value) : logger(value);
+  }
+  function log(value = ({
+    context: context2,
+    event
+  }) => ({
+    context: context2,
+    event
+  }), label2) {
+    function log2(_args, _params) {
+    }
+    return log2.type = "xstate.log", log2.value = value, log2.label = label2, log2.resolve = resolveLog, log2.execute = executeLog, log2;
+  }
+  return log215998b6_cjs.SpecialTargets = SpecialTargets, log215998b6_cjs.emit = emit2, log215998b6_cjs.enqueueActions = enqueueActions, log215998b6_cjs.forwardTo = forwardTo, log215998b6_cjs.log = log, log215998b6_cjs.sendParent = sendParent, log215998b6_cjs.sendTo = sendTo, log215998b6_cjs;
+}
+var hasRequiredXstate_cjs;
+function requireXstate_cjs() {
+  if (hasRequiredXstate_cjs) return xstate_cjs;
+  hasRequiredXstate_cjs = 1, Object.defineProperty(xstate_cjs, "__esModule", { value: !0 });
+  var actors_dist_xstateActors = requireXstateActors_cjs(), guards_dist_xstateGuards = /* @__PURE__ */ requireRaise5872b9e8_cjs(), StateMachine = /* @__PURE__ */ requireStateMachine1cda96d3_cjs(), log = /* @__PURE__ */ requireLog215998b6_cjs(), assign2 = /* @__PURE__ */ requireAssignE9c344ea_cjs();
+  requireXstateDev_cjs();
+  function assertEvent(event, type) {
+    const types = guards_dist_xstateGuards.toArray(type);
+    if (!types.includes(event.type)) {
+      const typesText = types.length === 1 ? `type "${types[0]}"` : `one of types "${types.join('", "')}"`;
+      throw new Error(`Expected event ${JSON.stringify(event)} to have ${typesText}`);
+    }
+  }
   function createMachine(config, implementations) {
-    return new StateMachine(config, implementations);
+    return new StateMachine.StateMachine(config, implementations);
   }
   function createInertActorScope(actorLogic) {
     const self2 = guards_dist_xstateGuards.createActor(actorLogic);
@@ -34158,7 +34235,7 @@ ${err.message}`);
       }), done && sub.unsubscribe());
     });
   }
-  return xstate_cjs.createEmptyActor = actors_dist_xstateActors.createEmptyActor, xstate_cjs.fromCallback = actors_dist_xstateActors.fromCallback, xstate_cjs.fromEventObservable = actors_dist_xstateActors.fromEventObservable, xstate_cjs.fromObservable = actors_dist_xstateActors.fromObservable, xstate_cjs.fromPromise = actors_dist_xstateActors.fromPromise, xstate_cjs.fromTransition = actors_dist_xstateActors.fromTransition, xstate_cjs.Actor = guards_dist_xstateGuards.Actor, xstate_cjs.__unsafe_getAllOwnEventDescriptors = guards_dist_xstateGuards.getAllOwnEventDescriptors, xstate_cjs.and = guards_dist_xstateGuards.and, xstate_cjs.cancel = guards_dist_xstateGuards.cancel, xstate_cjs.createActor = guards_dist_xstateGuards.createActor, xstate_cjs.getStateNodes = guards_dist_xstateGuards.getStateNodes, xstate_cjs.interpret = guards_dist_xstateGuards.interpret, xstate_cjs.isMachineSnapshot = guards_dist_xstateGuards.isMachineSnapshot, xstate_cjs.matchesState = guards_dist_xstateGuards.matchesState, xstate_cjs.not = guards_dist_xstateGuards.not, xstate_cjs.or = guards_dist_xstateGuards.or, xstate_cjs.pathToStateValue = guards_dist_xstateGuards.pathToStateValue, xstate_cjs.raise = guards_dist_xstateGuards.raise, xstate_cjs.spawnChild = guards_dist_xstateGuards.spawnChild, xstate_cjs.stateIn = guards_dist_xstateGuards.stateIn, xstate_cjs.stop = guards_dist_xstateGuards.stop, xstate_cjs.stopChild = guards_dist_xstateGuards.stopChild, xstate_cjs.toObserver = guards_dist_xstateGuards.toObserver, xstate_cjs.SpecialTargets = log.SpecialTargets, xstate_cjs.assign = log.assign, xstate_cjs.emit = log.emit, xstate_cjs.enqueueActions = log.enqueueActions, xstate_cjs.forwardTo = log.forwardTo, xstate_cjs.log = log.log, xstate_cjs.sendParent = log.sendParent, xstate_cjs.sendTo = log.sendTo, xstate_cjs.SimulatedClock = SimulatedClock, xstate_cjs.StateMachine = StateMachine, xstate_cjs.StateNode = StateNode, xstate_cjs.assertEvent = assertEvent, xstate_cjs.createMachine = createMachine, xstate_cjs.getInitialSnapshot = getInitialSnapshot, xstate_cjs.getNextSnapshot = getNextSnapshot, xstate_cjs.initialTransition = initialTransition, xstate_cjs.setup = setup, xstate_cjs.toPromise = toPromise, xstate_cjs.transition = transition, xstate_cjs.waitFor = waitFor, xstate_cjs;
+  return xstate_cjs.createEmptyActor = actors_dist_xstateActors.createEmptyActor, xstate_cjs.fromCallback = actors_dist_xstateActors.fromCallback, xstate_cjs.fromEventObservable = actors_dist_xstateActors.fromEventObservable, xstate_cjs.fromObservable = actors_dist_xstateActors.fromObservable, xstate_cjs.fromPromise = actors_dist_xstateActors.fromPromise, xstate_cjs.fromTransition = actors_dist_xstateActors.fromTransition, xstate_cjs.Actor = guards_dist_xstateGuards.Actor, xstate_cjs.__unsafe_getAllOwnEventDescriptors = guards_dist_xstateGuards.getAllOwnEventDescriptors, xstate_cjs.and = guards_dist_xstateGuards.and, xstate_cjs.cancel = guards_dist_xstateGuards.cancel, xstate_cjs.createActor = guards_dist_xstateGuards.createActor, xstate_cjs.getStateNodes = guards_dist_xstateGuards.getStateNodes, xstate_cjs.interpret = guards_dist_xstateGuards.interpret, xstate_cjs.isMachineSnapshot = guards_dist_xstateGuards.isMachineSnapshot, xstate_cjs.matchesState = guards_dist_xstateGuards.matchesState, xstate_cjs.not = guards_dist_xstateGuards.not, xstate_cjs.or = guards_dist_xstateGuards.or, xstate_cjs.pathToStateValue = guards_dist_xstateGuards.pathToStateValue, xstate_cjs.raise = guards_dist_xstateGuards.raise, xstate_cjs.spawnChild = guards_dist_xstateGuards.spawnChild, xstate_cjs.stateIn = guards_dist_xstateGuards.stateIn, xstate_cjs.stop = guards_dist_xstateGuards.stop, xstate_cjs.stopChild = guards_dist_xstateGuards.stopChild, xstate_cjs.toObserver = guards_dist_xstateGuards.toObserver, xstate_cjs.StateMachine = StateMachine.StateMachine, xstate_cjs.StateNode = StateMachine.StateNode, xstate_cjs.SpecialTargets = log.SpecialTargets, xstate_cjs.emit = log.emit, xstate_cjs.enqueueActions = log.enqueueActions, xstate_cjs.forwardTo = log.forwardTo, xstate_cjs.log = log.log, xstate_cjs.sendParent = log.sendParent, xstate_cjs.sendTo = log.sendTo, xstate_cjs.assign = assign2.assign, xstate_cjs.SimulatedClock = SimulatedClock, xstate_cjs.assertEvent = assertEvent, xstate_cjs.createMachine = createMachine, xstate_cjs.getInitialSnapshot = getInitialSnapshot, xstate_cjs.getNextSnapshot = getNextSnapshot, xstate_cjs.initialTransition = initialTransition, xstate_cjs.setup = setup, xstate_cjs.toPromise = toPromise, xstate_cjs.transition = transition, xstate_cjs.waitFor = waitFor, xstate_cjs;
 }
 var hasRequiredXstateReact_cjs;
 function requireXstateReact_cjs() {
@@ -34950,6 +35027,27 @@ const curveCatmullRomOpen = function custom4(alpha2) {
     return splitProps(props2, likec4tagVariantKeys);
   },
   getVariantProps: likec4tagFn.getVariantProps
+}), markdownBlockFn = /* @__PURE__ */ createRecipe("likec4-markdown-block", {
+  uselikec4palette: !1
+}, []), markdownBlockVariantMap = {
+  uselikec4palette: [
+    "true",
+    "false"
+  ]
+}, markdownBlockVariantKeys = Object.keys(markdownBlockVariantMap), markdownBlock = /* @__PURE__ */ Object.assign(memo$1(markdownBlockFn.recipeFn), {
+  __recipe__: !0,
+  __name__: "markdownBlock",
+  __getCompoundVariantCss__: markdownBlockFn.__getCompoundVariantCss__,
+  raw: (props2) => props2,
+  variantKeys: markdownBlockVariantKeys,
+  variantMap: markdownBlockVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props2) {
+    return splitProps(props2, markdownBlockVariantKeys);
+  },
+  getVariantProps: markdownBlockFn.getVariantProps
 }), MotionButton = /* @__PURE__ */ createMinimalMotionComponent("button"), MotionDiv = /* @__PURE__ */ createMinimalMotionComponent("div"), compoundActionBtn = cva({
   base: {
     transitionDuration: "normal",
@@ -36603,140 +36701,157 @@ const ElementTag = forwardRef(
       }
     );
   }
-), propsAreEqual = (prev, next) => prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags), ElementTags = memo$2(({ id: id2, data: { tags, width } }) => {
-  const zoom2 = useCurrentZoom(), zoomIsLargeEnough = zoom2 > 1.2, portalProps = useMantinePortalProps();
+), propsAreEqual = (prev, next) => prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags) && (prev.data.hovered ?? !1) === (next.data.hovered ?? !1), ElementTags = memo$2(({ id: id2, data: { tags, width, hovered = !1 } }) => {
+  const {
+    hovered: isTagsBarHovered,
+    ref: tagsBarRef
+  } = useHover$1(), {
+    hovered: isTagsToolbarHovered,
+    ref: tagsToolbarRef
+  } = useHover$1(), [isVisible, setVisible] = useDebouncedState(!1, hovered ? 120 : 300);
+  useEffect(() => {
+    setVisible((visibleNow) => visibleNow ? hovered || isTagsBarHovered || isTagsToolbarHovered : hovered && (isTagsBarHovered || isTagsToolbarHovered));
+  }, [isTagsBarHovered, isTagsToolbarHovered, hovered]);
+  const zoom2 = useCurrentZoom(), zoomIsLargeEnough = zoom2 > 1.2, diagram = useDiagram(), onHover = (tag) => {
+    diagram.send({ type: "tag.highlight", tag });
+  }, onLeave = useCallback(() => {
+    diagram.send({ type: "tag.unhighlight" });
+  }, []);
   if (!tags || tags.length === 0)
     return null;
   const maxWidth = Math.max(Math.round(width * zoom2) - 10, 200);
-  return /* @__PURE__ */ jsxs(
-    HoverCard,
-    {
-      ...portalProps,
-      floatingStrategy: "fixed",
-      position: "bottom-start",
-      offset: {
-        alignmentAxis: Math.round(4 * zoom2),
-        mainAxis: 8
-      },
-      keepMounted: !1,
-      openDelay: 300,
-      closeDelay: 500,
-      children: [
-        /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(
-          "div",
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tagsBarRef,
+        className: cx(
+          "likec4-element-tags",
+          hstack({
+            pointerEvents: "all",
+            gap: 4,
+            alignItems: "flex-end",
+            justifyItems: "stretch",
+            position: "absolute",
+            width: "100%",
+            bottom: 0,
+            left: 0,
+            padding: 4,
+            _shapeCylinder: {
+              bottom: 5
+            },
+            _shapeStorage: {
+              bottom: 5
+            },
+            _shapeQueue: {
+              bottom: 0,
+              paddingLeft: 14
+            }
+          })
+        ),
+        onClick: stopPropagation$1,
+        children: tags.map((tag) => /* @__PURE__ */ jsx(
+          Box,
           {
-            className: cx(
-              "likec4-element-tags",
-              hstack({
-                pointerEvents: "all",
-                gap: 4,
-                alignItems: "flex-end",
-                justifyItems: "stretch",
-                position: "absolute",
-                width: "100%",
-                bottom: 0,
-                left: 0,
-                padding: 4,
-                _shapeCylinder: {
-                  bottom: 5
-                },
-                _shapeStorage: {
-                  bottom: 5
-                },
-                _shapeQueue: {
-                  bottom: 0,
-                  paddingLeft: 14
-                }
-              })
-            ),
-            onClick: stopPropagation$1,
-            children: tags.map((tag) => /* @__PURE__ */ jsx(
-              Box,
-              {
-                "data-likec4-tag": tag,
-                className: css({
-                  layerStyle: "likec4.tag",
-                  flex: 1,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  maxWidth: 50,
-                  height: 5,
-                  _whenHovered: {
-                    height: 12,
-                    borderRadius: 4,
-                    transitionDelay: ".08s"
-                  },
-                  transition: "fast"
-                })
+            "data-likec4-tag": tag,
+            className: css({
+              layerStyle: "likec4.tag",
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              maxWidth: 50,
+              height: 5,
+              _whenHovered: {
+                height: 12,
+                borderRadius: 4,
+                transitionDelay: ".08s"
               },
-              id2 + "#" + tag
-            ))
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          HoverCard.Dropdown,
+              transition: "fast"
+            })
+          },
+          id2 + "#" + tag
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(NodeToolbar, { isVisible, align: "start", position: Position.Bottom, children: /* @__PURE__ */ jsx(
+      HStack,
+      {
+        ref: tagsToolbarRef,
+        css: {
+          gap: 4,
+          flexWrap: "wrap",
+          pb: "sm",
+          translate: "auto",
+          x: -8,
+          maxWidth
+        },
+        children: tags.map((tag) => /* @__PURE__ */ jsx(
+          ElementTag,
           {
-            p: 0,
-            w: "auto",
-            maw: maxWidth,
+            tag,
             className: css({
-              background: "transparent",
-              border: "none"
+              userSelect: "none",
+              cursor: "pointer",
+              ...zoomIsLargeEnough && {
+                fontSize: "lg",
+                borderRadius: 4,
+                px: 6
+              }
             }),
-            children: /* @__PURE__ */ jsx(ElementTagsDropdown, { tags, zoomIsLargeEnough })
-          }
-        )
-      ]
-    }
-  );
+            onClick: (e2) => {
+              e2.stopPropagation(), diagram.openSearch(`#${tag}`);
+            },
+            onMouseEnter: () => onHover(tag),
+            onMouseLeave: onLeave
+          },
+          tag
+        ))
+      }
+    ) })
+  ] });
 }, propsAreEqual);
 ElementTags.displayName = "ElementTags";
-function ElementTagsDropdown({ tags, zoomIsLargeEnough }) {
-  const diagram = useDiagram(), onHover = (tag) => {
-    diagram.send({ type: "tag.highlight", tag });
-  }, onLeave = useCallback(() => {
-    diagram.send({ type: "tag.unhighlight" });
-  }, []);
+const MarkdownBlock = forwardRef(({
+  value,
+  textScale = 1,
+  uselikec4palette = !1,
+  hideIfEmpty = !1,
+  emptyText = "no content",
+  className,
+  ...props2
+}, ref) => {
+  if (value.isEmpty && hideIfEmpty)
+    return null;
+  const content2 = value.nonEmpty ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx(Text, { component: "span", fz: "xs", c: "dimmed", children: emptyText }) };
   return /* @__PURE__ */ jsx(
-    HStack,
+    Box,
     {
-      css: {
-        gap: 4,
-        flexWrap: "wrap",
-        pb: "sm"
+      ref,
+      ...props2,
+      className: cx(
+        markdownBlock({
+          uselikec4palette
+        }),
+        className
+      ),
+      style: {
+        // @ts-expect-error
+        "--mantine-scale": textScale
       },
-      children: tags.map((tag) => /* @__PURE__ */ jsx(
-        ElementTag,
-        {
-          tag,
-          className: css({
-            userSelect: "none",
-            cursor: "pointer",
-            ...zoomIsLargeEnough && {
-              fontSize: "lg",
-              borderRadius: 4,
-              px: 6
-            }
-          }),
-          onClick: (e2) => {
-            e2.stopPropagation(), diagram.openSearch(`#${tag}`);
-          },
-          onMouseEnter: () => onHover(tag),
-          onMouseLeave: onLeave
-        },
-        tag
-      ))
+      ...content2
     }
   );
-}
+});
+MarkdownBlock.displayName = "MarkdownBlock";
 const iconSize$2 = "--icon-size", title$4 = css.raw({
   textStyle: "likec4.node.primary",
   flex: "0 0 auto",
   textAlign: "center",
   color: "likec4.palette.hiContrast"
 }), description$2 = css.raw({
-  flex: "0 1 auto",
+  flexGrow: "0",
+  flexShrink: "1",
   textStyle: "likec4.node.secondary",
   color: "likec4.palette.loContrast",
   textAlign: "center",
@@ -36806,6 +36921,8 @@ const iconSize$2 = "--icon-size", title$4 = css.raw({
       flex: "1",
       height: "fit-content",
       width: "fit-content",
+      maxHeight: "100%",
+      maxWidth: "100%",
       margin: "0 auto",
       display: "flex",
       alignItems: "center",
@@ -36857,6 +36974,8 @@ const iconSize$2 = "--icon-size", title$4 = css.raw({
     textContainer: {
       height: "fit-content",
       width: "fit-content",
+      maxHeight: "100%",
+      maxWidth: "100%",
       flex: "0 1 auto",
       display: "flex",
       flexDirection: "column",
@@ -36926,7 +37045,7 @@ function ElementTitle({ id: id2, data, iconSize: iconSize2 }) {
     className: elementIcon$2
   }), classes2 = elementTitle({
     hasIcon: n$5(elementIcon2),
-    hasDescription: !n$1(data.description ?? ""),
+    hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !n$1(data.technology ?? "")
   }), size2 = nodeSizes(data.style).size, isSmOrXs = size2 === "sm" || size2 === "xs";
   return /* @__PURE__ */ jsxs(
@@ -36946,7 +37065,7 @@ function ElementTitle({ id: id2, data, iconSize: iconSize2 }) {
           /* @__PURE__ */ jsx(
             Text,
             {
-              component: "h3",
+              component: "div",
               className: cx(classes2.title, "likec4-element-title"),
               lineClamp: isSmOrXs ? 2 : 3,
               children: data.title
@@ -36961,12 +37080,14 @@ function ElementTitle({ id: id2, data, iconSize: iconSize2 }) {
             }
           ),
           data.description && /* @__PURE__ */ jsx(
-            Text,
+            MarkdownBlock,
             {
-              component: "div",
               className: cx(classes2.description, "likec4-element-description"),
-              lineClamp: isSmOrXs ? 3 : 5,
-              children: data.description
+              value: data.description,
+              uselikec4palette: !0,
+              hideIfEmpty: !0,
+              maxHeight: data.description.isMarkdown ? "8rem" : void 0,
+              lineClamp: isSmOrXs ? 3 : 5
             }
           )
         ] })
@@ -37442,7 +37563,7 @@ const stopPropagation = (e2) => e2.stopPropagation(), Tooltip$4 = Tooltip$5.with
       ] })
     ] }),
     /* @__PURE__ */ jsx(Box$1, { className: title$3, children: r2.title || "untitled" }),
-    r2.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: r2.description }),
+    r2.description.nonEmpty && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: r2.description.text }),
     links.length > 0 && /* @__PURE__ */ jsx(
       Stack,
       {
@@ -38688,11 +38809,13 @@ const useElementDetailsActorRef = () => {
   display: "grid",
   gridTemplateColumns: "min-content 1fr",
   gridAutoRows: "min-content max-content",
-  gap: "[20px 16px]",
+  gap: "[24px 20px]",
   alignItems: "baseline",
   justifyItems: "stretch"
 }), propertyLabel = css({
-  justifySelf: "end"
+  justifySelf: "end",
+  textAlign: "right",
+  userSelect: "none"
 }), resizeHandle = css({
   position: "absolute",
   width: "14px",
@@ -40155,10 +40278,8 @@ function requireUtil$1() {
     zipObject
   };
   function addDummyNode(g, type, attrs, name) {
-    let v;
-    do
+    for (var v = name; g.hasNode(v); )
       v = uniqueId(name);
-    while (g.hasNode(v));
     return attrs.dummy = type, g.setNode(v, attrs), v;
   }
   function simplify(g) {
@@ -40282,7 +40403,7 @@ function requireUtil$1() {
   let idCounter2 = 0;
   function uniqueId(prefix2) {
     var id2 = ++idCounter2;
-    return toString(prefix2) + id2;
+    return prefix2 + ("" + id2);
   }
   function range(start2, limit, step = 1) {
     limit == null && (limit = start2, start2 = 0);
@@ -40523,6 +40644,9 @@ function requireRank() {
   var rankUtil = requireUtil(), longestPath = rankUtil.longestPath, feasibleTree = requireFeasibleTree(), networkSimplex = requireNetworkSimplex();
   rank_1 = rank;
   function rank(g) {
+    var ranker = g.graph().ranker;
+    if (ranker instanceof Function)
+      return ranker(g);
     switch (g.graph().ranker) {
       case "network-simplex":
         networkSimplexRanker(g);
@@ -40533,6 +40657,8 @@ function requireRank() {
       case "longest-path":
         longestPathRanker(g);
         break;
+      case "none":
+        break;
       default:
         networkSimplexRanker(g);
     }
@@ -41229,7 +41355,7 @@ function requireLayout() {
       inputLabel.points = layoutLabel.points, Object.hasOwn(layoutLabel, "x") && (inputLabel.x = layoutLabel.x, inputLabel.y = layoutLabel.y);
     }), inputGraph.graph().width = layoutGraph.graph().width, inputGraph.graph().height = layoutGraph.graph().height;
   }
-  let graphNumAttrs = ["nodesep", "edgesep", "ranksep", "marginx", "marginy"], graphDefaults = { ranksep: 50, edgesep: 20, nodesep: 50, rankdir: "tb" }, graphAttrs = ["acyclicer", "ranker", "rankdir", "align"], nodeNumAttrs = ["width", "height"], nodeDefaults = { width: 0, height: 0 }, edgeNumAttrs = ["minlen", "weight", "width", "height", "labeloffset"], edgeDefaults = {
+  let graphNumAttrs = ["nodesep", "edgesep", "ranksep", "marginx", "marginy"], graphDefaults = { ranksep: 50, edgesep: 20, nodesep: 50, rankdir: "tb" }, graphAttrs = ["acyclicer", "ranker", "rankdir", "align"], nodeNumAttrs = ["width", "height", "rank"], nodeDefaults = { width: 0, height: 0 }, edgeNumAttrs = ["minlen", "weight", "width", "height", "labeloffset"], edgeDefaults = {
     minlen: 1,
     weight: 1,
     width: 0,
@@ -41418,7 +41544,7 @@ function requireDebug() {
 }
 var version, hasRequiredVersion;
 function requireVersion() {
-  return hasRequiredVersion || (hasRequiredVersion = 1, version = "1.1.4"), version;
+  return hasRequiredVersion || (hasRequiredVersion = 1, version = "1.1.5"), version;
 }
 var dagre$1, hasRequiredDagre;
 function requireDagre() {
@@ -41707,7 +41833,7 @@ function layoutRelationshipsView$1(data, scope) {
         y: position.y,
         position: [position.x, position.y],
         title: "empty node",
-        description: null,
+        description: RichText.EMPTY,
         technology: null,
         tags: [],
         links: [],
@@ -41746,7 +41872,7 @@ function layoutRelationshipsView$1(data, scope) {
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: element.description,
+      description: RichText.from(element.description),
       technology: element.technology,
       tags: [...element.tags],
       links: null,
@@ -42055,7 +42181,7 @@ function RelationshipsBrowser({ actorRef }) {
     initialEdges: []
   }), /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: !1, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) }) }) });
 }
-const selector$4 = (state) => ({
+const selector$5 = (state) => ({
   isActive: state.hasTag("active"),
   nodes: state.context.xynodes,
   edges: state.context.xyedges
@@ -42065,7 +42191,7 @@ const selector$4 = (state) => ({
     nodes,
     edges
   } = useRelationshipsBrowserState(
-    selector$4,
+    selector$5,
     selectorEq
   );
   return /* @__PURE__ */ jsx(
@@ -42729,7 +42855,22 @@ function ElementDetailsCard({
               /* @__PURE__ */ jsxs(Group, { align: "baseline", gap: "sm", wrap: "nowrap", children: [
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx(SmallLabel, { children: "kind" }),
-                  /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: elementModel.kind })
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      radius: "sm",
+                      size: "sm",
+                      fw: 600,
+                      color: "gray",
+                      style: {
+                        cursor: "pointer"
+                      },
+                      onClick: (e2) => {
+                        e2.stopPropagation(), diagram.openSearch(`kind:${elementModel.kind}`);
+                      },
+                      children: elementModel.kind
+                    }
+                  )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
                   /* @__PURE__ */ jsx(SmallLabel, { children: "tags" }),
@@ -42776,7 +42917,9 @@ function ElementDetailsCard({
                           variant: "default",
                           radius: "sm",
                           onClick: (e2) => {
-                            e2.stopPropagation();
+                            e2.stopPropagation(), diagram.openSource({
+                              element: elementModel.id
+                            });
                           },
                           children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "62%" } })
                         }
@@ -42812,8 +42955,17 @@ function ElementDetailsCard({
                 },
                 children: [
                   /* @__PURE__ */ jsx(TabsList, { children: TABS.map((tab) => /* @__PURE__ */ jsx(TabsTab, { value: tab, children: tab }, tab)) }),
-                  /* @__PURE__ */ jsx(TabsPanel, { value: "Properties", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "auto", children: /* @__PURE__ */ jsxs(Box$1, { className: propertiesGrid, pt: "xs", children: [
-                    /* @__PURE__ */ jsx(ElementProperty, { title: "description", emptyValue: "no description", children: elementModel.description }),
+                  /* @__PURE__ */ jsx(TabsPanel, { value: "Properties", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "scroll", offsetScrollbars: !0, children: /* @__PURE__ */ jsxs(Box$1, { className: propertiesGrid, pt: "xs", children: [
+                    /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                      /* @__PURE__ */ jsx(PropertyLabel, { children: "description" }),
+                      /* @__PURE__ */ jsx(
+                        MarkdownBlock,
+                        {
+                          value: elementModel.description,
+                          emptyText: "no description"
+                        }
+                      )
+                    ] }),
                     elementModel.technology && /* @__PURE__ */ jsx(ElementProperty, { title: "technology", children: elementModel.technology }),
                     elementModel.links.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
                       /* @__PURE__ */ jsx(PropertyLabel, { children: "links" }),
@@ -42888,10 +43040,7 @@ const ViewButton$1 = ({
   onNavigateTo
 }) => /* @__PURE__ */ jsx(UnstyledButton, { className: viewButton$1, onClick: (e2) => onNavigateTo(view.id, e2), children: /* @__PURE__ */ jsxs(Group, { gap: 6, align: "start", wrap: "nowrap", children: [
   /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", children: view._type === "deployment" ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
-  /* @__PURE__ */ jsxs(Box$1, { children: [
-    /* @__PURE__ */ jsx(Text, { component: "div", className: viewButtonTitle, lineClamp: 1, children: view.title || "untitled" }),
-    view.description && /* @__PURE__ */ jsx(Text, { component: "div", mt: 2, fz: "xs", c: "dimmed", lh: 1.4, lineClamp: 1, children: view.description })
-  ] })
+  /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { component: "div", className: viewButtonTitle, lineClamp: 1, children: view.title || "untitled" }) })
 ] }) });
 function ElementProperty({
   title: title2,
@@ -42910,6 +43059,7 @@ function ElementProperty({
         fz: "md",
         style: {
           whiteSpace: "preserve-breaks",
+          userSelect: "all",
           ...style2
         },
         ...props2,
@@ -42919,11 +43069,96 @@ function ElementProperty({
   ] });
 }
 function ElementMetata({
-  value
+  value: metadata
 }) {
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(PropertyLabel, { children: "metadata" }),
-    /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Code, { block: !0, children: JSON.stringify(value, null, 2) }) })
+    /* @__PURE__ */ jsx(
+      Box$1,
+      {
+        className: css({
+          flex: 1,
+          display: "grid",
+          gridTemplateColumns: "min-content 1fr",
+          gridAutoRows: "min-content max-content",
+          gap: "[4px 4px]",
+          alignItems: "baseline",
+          justifyItems: "stretch",
+          paddingRight: "2xs"
+        }),
+        children: t$1(metadata).map(([key2, value]) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "group",
+              css({
+                display: "contents"
+              })
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: css({
+                    fontSize: "sm",
+                    fontWeight: 500,
+                    justifySelf: "end",
+                    whiteSpace: "nowrap"
+                  }),
+                  children: [
+                    key2,
+                    ":"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: css({}),
+                  children: /* @__PURE__ */ jsx(
+                    ScrollAreaAutosize,
+                    {
+                      type: "auto",
+                      mah: 200,
+                      overscrollBehavior: "none",
+                      className: css({
+                        transitionProperty: "all",
+                        transitionDuration: "fast",
+                        transitionTimingFunction: "inOut",
+                        rounded: "sm",
+                        color: "mantine.colors.gray[8]",
+                        _dark: {
+                          color: "mantine.colors.dark[1]"
+                        },
+                        _groupHover: {
+                          transitionTimingFunction: "out",
+                          color: "mantine.colors.defaultColor",
+                          background: "mantine.colors.defaultHover"
+                        }
+                      }),
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: css({
+                            fontSize: "sm",
+                            padding: "2xs",
+                            whiteSpace: "pre",
+                            fontFamily: "[var(--mantine-font-family-monospace)]",
+                            userSelect: "all"
+                          }),
+                          children: value
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          key2
+        ))
+      }
+    )
   ] });
 }
 function ElementDetails({
@@ -43608,7 +43843,7 @@ function layoutRelationshipDetails(data, scope) {
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: element.description,
+      description: RichText.from(element.description),
       technology: element.technology,
       tags: [...element.tags],
       links: null,
@@ -43890,7 +44125,7 @@ const selectSubject = (state) => ({
   }, [store, instance.viewportInitialized, actor]), useEffect(() => {
     data !== null && actor.send({ type: "update.layoutData", data });
   }, [data, actor]), null;
-}), selector$3 = ({ context: context2 }) => ({
+}), selector$4 = ({ context: context2 }) => ({
   // subject: context.subject,
   // view: state.context.view,
   initialized: context2.initialized.xydata && context2.initialized.xyflow,
@@ -43901,7 +44136,7 @@ const selectSubject = (state) => ({
     initialized,
     nodes,
     edges
-  } = useRelationshipDetailsState(selector$3, deepEqual);
+  } = useRelationshipDetailsState(selector$4, deepEqual);
   return /* @__PURE__ */ jsxs(
     BaseXYFlow,
     {
@@ -44475,11 +44710,11 @@ function ViewButton({ className, view, loop = !1, search, ...props2 }) {
           /* @__PURE__ */ jsx(
             Highlight,
             {
-              highlight: view.$view.description ? search : "",
+              highlight: view.description.nonEmpty ? search : "",
               component: "div",
               className: btn$2.description,
               lineClamp: 1,
-              children: view.$view.description || "No description"
+              children: view.description.text || "No description"
             }
           )
         ] })
@@ -44640,7 +44875,7 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn$1.description, lineClamp: 1, children: element.description || "No description" })
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn$1.description, lineClamp: 1, children: element.description.text || "No description" })
           ] }),
           /* @__PURE__ */ jsx(Text, { component: "div", className: cx(elementViewsCount, btn$1.descriptionColor), fz: "xs", children: views.length === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment$1, { children: [
             views.length,
@@ -45371,7 +45606,7 @@ const autolayoutButton = css({
   borderColor: "mantine.colors.gray[5]",
   borderRadius: 3,
   transform: "translate(-50%, -50%)"
-}), selector$2 = (state) => ({
+}), selector$3 = (state) => ({
   viewId: state.view.id,
   autoLayout: state.view.autoLayout
 }), ChangeAutoLayoutButton = (props2) => {
@@ -45380,7 +45615,7 @@ const autolayoutButton = css({
   } = useDiagramEventHandlers(), diagram = useDiagram(), [rootRef, setRootRef] = useState(null), [controlsRefs, setControlsRefs] = useState({}), {
     autoLayout,
     viewId
-  } = useDiagramContext(selector$2), { ref, hovered: isSpacingHovered } = useHover$1(), setControlRef = (name) => (node2) => {
+  } = useDiagramContext(selector$3), { ref, hovered: isSpacingHovered } = useHover$1(), setControlRef = (name) => (node2) => {
     controlsRefs[name] = node2, setControlsRefs(controlsRefs);
   }, setAutoLayout = (direction) => (event) => {
     event.stopPropagation(), onChange?.({
@@ -45697,11 +45932,11 @@ const autolayoutButton = css({
       "forward"
     )
   ] });
-}, selector$1 = (state) => ({
+}, selector$2 = (state) => ({
   visible: state.features.enableReadOnly !== !0,
   isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly
 }), ToggleReadonly = () => {
-  const { visible: visible2, isReadOnly } = useDiagramContext(selector$1), diagram = useDiagram();
+  const { visible: visible2, isReadOnly } = useDiagramContext(selector$2), diagram = useDiagram();
   return visible2 ? /* @__PURE__ */ jsx(Tooltip, { label: isReadOnly ? "Enable editing" : "Disable editing", children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
@@ -45871,14 +46106,17 @@ const autolayoutButton = css({
     color: "mantine.colors.gray[5]"
   }
 });
+function selector$1(context2) {
+  return {
+    id: context2.view.id,
+    title: context2.view.title ?? "untitled",
+    description: RichText$1.from(context2.view.description),
+    links: context2.view.links,
+    isNotActiveWalkthrough: context2.activeWalkthrough === null
+  };
+}
 function DiagramTitlePanel() {
-  const { id: id2, title: title$12, description: description$12, links, isNotActiveWalkthrough } = useDiagramContext((s2) => ({
-    id: s2.view.id,
-    title: s2.view.title ?? "untitled",
-    description: s2.view.description,
-    links: s2.view.links,
-    isNotActiveWalkthrough: s2.activeWalkthrough === null
-  })), [isCollapsed, setCollapsed] = useLocalStorage({
+  const { id: id2, title: title$12, description: description$12, links, isNotActiveWalkthrough } = useDiagramContext(selector$1), [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-webview-collapsed",
     defaultValue: !1
   }), toggle = () => setCollapsed((v) => !v);
@@ -45972,24 +46210,23 @@ function DiagramTitlePanel() {
                   }
                 )
               ] }),
-              description$12 && /* @__PURE__ */ jsx(
+              description$12.nonEmpty && /* @__PURE__ */ jsx(
                 Spoiler,
                 {
-                  maxHeight: 42,
+                  maxHeight: 60,
                   showLabel: /* @__PURE__ */ jsx(Button, { component: "div", color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "show more" }),
                   hideLabel: /* @__PURE__ */ jsx(Button, { component: "div", color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "hide" }),
                   children: /* @__PURE__ */ jsx(
-                    Text,
+                    MarkdownBlock,
                     {
-                      component: "div",
-                      size: "sm",
                       className: description,
-                      children: description$12 || "no description"
+                      textScale: 0.9,
+                      value: description$12
                     }
                   )
                 }
               ),
-              !description$12 && /* @__PURE__ */ jsx(
+              description$12.isEmpty && /* @__PURE__ */ jsx(
                 Text,
                 {
                   component: "div",
@@ -46852,7 +47089,7 @@ function viewToNodesEdge$1(opts) {
       id: node2.id,
       title: node2.title,
       technology: node2.technology,
-      description: node2.description,
+      description: RichText.from(node2.description),
       height: node2.height,
       width: node2.width,
       level: node2.level,
@@ -47636,7 +47873,7 @@ function layoutResultToXYFlow(layout2) {
               fqn: fqn2,
               title: node2.title,
               technology: node2.technology,
-              description: node2.description,
+              description: RichText.from(node2.description),
               height: node2.height,
               width: node2.width,
               color: node2.color,
@@ -47681,8 +47918,8 @@ function layoutResultToXYFlow(layout2) {
         color: color2,
         navigateTo,
         line,
-        ...technology2 && { technology: technology2 },
-        ...description2 && { description: description2 }
+        description: RichText.from(description2),
+        ...technology2 && { technology: technology2 }
       }
     });
   }
@@ -49131,7 +49368,7 @@ const _diagramMachine = xstate_cjsExports.setup({
       };
     }),
     "tag.highlight": xstate_cjsExports.assign(({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "tag.highlight"), {
-      xynodes: context2.xynodes.map((n2) => n2.data.tags?.includes(event.tag) ? setDimmed(n2, !1) : setDimmed(n2, "immediate"))
+      xynodes: context2.xynodes.map((n2) => n2.data.tags?.includes(event.tag) ? setDimmed(n2, !1) : setDimmed(n2, !0))
     })),
     "undim everything": xstate_cjsExports.assign(({ context: context2 }) => ({
       xynodes: context2.xynodes.map(setDimmed(!1)),
@@ -49748,7 +49985,10 @@ 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 };
 }
-const diagramMachine = _diagramMachine, selectToggledFeatures = (state) => state.context.toggledFeatures;
+const diagramMachine = _diagramMachine, selectToggledFeatures = (state) => state.context.features.enableReadOnly ? {
+  ...state.context.toggledFeatures,
+  enableReadOnly: !0
+} : state.context.toggledFeatures;
 function DiagramActorProvider({
   view,
   zoomable,
@@ -49995,7 +50235,7 @@ function useLikeC4ModelDataAtom() {
   return useContext(LikeC4ModelDataContext);
 }
 function LikeC4ModelContext({ likec4data, likec4model, children: children2 }) {
-  const model = nano.useStore(likec4model);
+  const model = useStore(likec4model);
   return /* @__PURE__ */ jsx(LikeC4ModelDataContext.Provider, { value: likec4data, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children: children2 }) });
 }
 css({
@@ -50120,54 +50360,64 @@ const previewBg = css({
   component: RouteComponent$1
 });
 function RouteComponent$1() {
-  useDocumentTitle("LikeC4");
-  const views = t$4(useLikeC4Model$1().$model.views);
-  return /* @__PURE__ */ jsx(
+  useDocumentTitle(pageTitle);
+  const views = [...useLikeC4Model$1("layouted").views()];
+  return /* @__PURE__ */ jsx(Container, { size: "xl", children: /* @__PURE__ */ jsx(
     SimpleGrid,
     {
       p: { base: "md", sm: "xl" },
-      cols: { base: 1, sm: 2, md: 3, lg: 5 },
+      cols: { base: 1, sm: 2, md: 3, xl: 4 },
       spacing: { base: 10, sm: "xl" },
       verticalSpacing: { base: "md", sm: "xl" },
-      children: views.map((v) => /* @__PURE__ */ jsx(ViewCard, { viewId: v }, v))
+      children: views.map((v) => /* @__PURE__ */ jsx(ViewCard, { view: v }, v.id))
     }
-  );
+  ) });
 }
-const ViewCard = memo$2(({ viewId }) => {
-  const diagram = useLikeC4Model$1("layouted").findView(viewId);
-  if (!diagram || !diagram.isDiagram())
-    return null;
-  const { id: id2, title: title2, description: description2 } = diagram.$view;
-  return /* @__PURE__ */ jsxs(
+function ViewCard({ view }) {
+  const [visible2, setVisible] = useState(!1);
+  return useTimeoutEffect(() => {
+    setVisible(!0);
+  }, 100), /* @__PURE__ */ jsxs(
     Card,
     {
       shadow: "xs",
       padding: "lg",
       radius: "sm",
+      className: "group",
       withBorder: !0,
       children: [
-        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(DiagramPreview$1, { diagram: diagram.$view }) }),
-        /* @__PURE__ */ jsx(Group, { justify: "space-between", mt: "md", mb: "xs", children: /* @__PURE__ */ jsx(Text, { fw: 500, children: title2 }) }),
-        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: description2 }),
-        /* @__PURE__ */ jsx(Link$1, { to: "/view/$viewId/", params: { viewId: id2 }, search: !0, className: cardLink })
+        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Box$1, { className: previewBg, style: { height: 200 }, children: visible2 && /* @__PURE__ */ jsx(
+          StaticLikeC4Diagram,
+          {
+            background: "transparent",
+            view: view.$view,
+            fitView: !0,
+            fitViewPadding: "4px",
+            reduceGraphics: !0
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(Group, { justify: "space-between", mt: "md", children: /* @__PURE__ */ jsx(Text, { fw: 500, children: view.title ?? view.id }) }),
+        /* @__PURE__ */ jsx(
+          MarkdownBlock,
+          {
+            value: view.description,
+            textScale: 0.75,
+            emptyText: "No description",
+            lineClamp: 3,
+            mt: "2",
+            css: {
+              transition: "fast",
+              opacity: {
+                base: 0.8,
+                _groupHover: 1
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Link$1, { to: "/view/$viewId/", params: { viewId: view.id }, search: !0, className: cardLink })
       ]
     }
   );
-});
-function DiagramPreview$1({ diagram }) {
-  const { ref, inViewport } = useInViewport(), [visible2, setVisible] = useState(inViewport);
-  return useLayoutEffect$1(() => {
-    inViewport && !visible2 && setVisible(!0);
-  }, [inViewport]), /* @__PURE__ */ jsx(Box$1, { ref, className: previewBg, style: { height: 175 }, children: visible2 && /* @__PURE__ */ jsx(
-    StaticLikeC4Diagram,
-    {
-      background: "transparent",
-      view: diagram,
-      fitView: !0,
-      fitViewPadding: "4px",
-      reduceGraphics: !0
-    }
-  ) });
 }
 const Route$h = createFileRoute("/project/$projectId")({
   staleTime: 1 / 0,
@@ -51179,7 +51429,7 @@ function layoutRelationshipsView(data) {
       x: position.x,
       y: position.y,
       title: element.title,
-      description: element.description,
+      description: element.description.$source,
       technology: element.technology,
       tags: element.tags,
       links: null,
@@ -51293,7 +51543,8 @@ const cssExportView = css({
   margin: 0,
   marginRight: "auto",
   marginBottom: "auto",
-  background: "transparent"
+  background: "transparent",
+  overflow: "hidden"
 });
 css({
   position: "fixed",
@@ -51345,7 +51596,7 @@ function ExportPage() {
       if (!viewportRef.current)
         return;
       [...viewportRef.current.querySelectorAll(".react-flow__viewport")].forEach((el) => {
-        el.style.transform = "";
+        el.style.transform = "translate(" + padding + "px, " + padding + "px)";
       });
     }
   ), useDebouncedEffect(
@@ -51371,7 +51622,6 @@ function ExportPage() {
       "data-testid": "export-page",
       className: cx(cssExportView),
       style: {
-        padding,
         minWidth: width,
         width,
         minHeight: height,
@@ -51382,7 +51632,14 @@ function ExportPage() {
         /* @__PURE__ */ jsx(
           StaticLikeC4Diagram,
           {
-            view: diagram,
+            view: {
+              ...diagram,
+              bounds: {
+                ...diagram.bounds,
+                x: padding,
+                y: padding
+              }
+            },
             fitView: !1,
             fitViewPadding: 0,
             background: "transparent",
@@ -51455,7 +51712,7 @@ function ViewReact() {
       search: !0
     });
   }), title2 = view ? view.title ?? view.id : "View not found";
-  if (useDocumentTitle(title2 + " - LikeC4"), !view)
+  if (console.log(pageTitle), useDocumentTitle(`${title2} - ${pageTitle}`), !view)
     return /* @__PURE__ */ jsx(NotFound, {});
   const hasNotations = (view.notation?.nodes ?? []).length > 0;
   return /* @__PURE__ */ jsx(
@@ -51899,9 +52156,10 @@ function updateCursor() {
     constraintFlags |= flag;
   }), intersectsHorizontal && intersectsVertical ? setGlobalCursorStyle("intersection", constraintFlags) : intersectsHorizontal ? setGlobalCursorStyle("horizontal", constraintFlags) : intersectsVertical ? setGlobalCursorStyle("vertical", constraintFlags) : resetGlobalCursorStyle();
 }
-let listenersAbortController = new AbortController();
+let listenersAbortController;
 function updateListeners() {
-  listenersAbortController.abort(), listenersAbortController = new AbortController();
+  var _listenersAbortContro;
+  (_listenersAbortContro = listenersAbortController) === null || _listenersAbortContro === void 0 || _listenersAbortContro.abort(), listenersAbortController = new AbortController();
   const options = {
     capture: !0,
     signal: listenersAbortController.signal