likec4 1.32.1 → 1.33.0

package/__app__/src/main.js

@@ -7,9 +7,8 @@ import ReactDOM__default, { createPortal, flushSync } from "react-dom";
 import { 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",
@@ -1300,8 +1321,8 @@ function useHover$1() {
     [handleMouseEnter, handleMouseLeave]
   ), hovered };
 }
-function useDisclosure(initialState = !1, options = {}) {
-  const [opened, setOpened] = useState(initialState), open = useCallback(() => {
+function useDisclosure(initialState2 = !1, options = {}) {
+  const [opened, setOpened] = useState(initialState2), open = useCallback(() => {
     setOpened((isOpened) => isOpened || (options.onOpen?.(), !0));
   }, [options.onOpen]), close = useCallback(() => {
     setOpened((isOpened) => isOpened && (options.onClose?.(), !1));
@@ -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(() => {
@@ -6838,7 +6851,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,9 +6882,11 @@ 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
   });
@@ -6969,6 +6984,7 @@ function Popover(_props) {
     withOverlay,
     overlayProps,
     hideDetached,
+    preventPositionChangeWhenVisible,
     ...others
   } = props2, getStyles2 = useStyles({
     name: __staticSelector,
@@ -6999,7 +7015,8 @@ function Popover(_props) {
     dropdownVisible,
     setDropdownVisible,
     positionRef,
-    disabled
+    disabled,
+    preventPositionChangeWhenVisible
   });
   useClickOutside(
     () => {
@@ -9323,6 +9340,7 @@ function Combobox(_props) {
         Popover,
         {
           opened: store.dropdownOpened,
+          preventPositionChangeWhenVisible: !0,
           ...others,
           onChange: (_opened) => !_opened && onDropdownClose(),
           withRoles: !1,
@@ -12646,7 +12664,7 @@ const defaultProps$8 = {
     styles,
     unstyled,
     vars,
-    initialState,
+    initialState: initialState2,
     maxHeight,
     hideLabel,
     showLabel,
@@ -12670,7 +12688,7 @@ const defaultProps$8 = {
     varsResolver: varsResolver$5
   }), _id = useId$2(id2), regionId = `${_id}-region`, [show, setShowState] = useUncontrolled({
     value: expanded,
-    defaultValue: initialState,
+    defaultValue: initialState2,
     finalValue: !1,
     onChange: onExpandedChange
   }), { ref: contentRef, height } = useElementSize(), spoilerMoreContent = show ? hideLabel : showLabel, spoiler = spoilerMoreContent !== null && maxHeight < height;
@@ -13192,7 +13210,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 })
       ]
     }
   );
@@ -13255,14 +13273,14 @@ function isNodeIndeterminate(value, data, checkedState) {
   return checkedState.length === 0 ? !1 : getAllCheckedNodes(data, checkedState).result.some((node2) => node2.value === value && node2.indeterminate);
 }
 const memoizedIsNodeIndeterminate = memoize(isNodeIndeterminate);
-function getInitialTreeExpandedState(initialState, data, value, acc = {}) {
+function getInitialTreeExpandedState(initialState2, data, value, acc = {}) {
   return data.forEach((node2) => {
-    acc[node2.value] = node2.value in initialState ? initialState[node2.value] : node2.value === value, Array.isArray(node2.children) && getInitialTreeExpandedState(initialState, node2.children, value, acc);
+    acc[node2.value] = node2.value in initialState2 ? initialState2[node2.value] : node2.value === value, Array.isArray(node2.children) && getInitialTreeExpandedState(initialState2, node2.children, value, acc);
   }), acc;
 }
-function getInitialCheckedState(initialState, data) {
+function getInitialCheckedState(initialState2, data) {
   const acc = [];
-  return initialState.forEach((node2) => acc.push(...getChildrenNodesValues(node2, data))), Array.from(new Set(acc));
+  return initialState2.forEach((node2) => acc.push(...getChildrenNodesValues(node2, data))), Array.from(new Set(acc));
 }
 function useTree({
   initialSelectedState = [],
@@ -13542,7 +13560,7 @@ function batch(fn) {
   }
 }
 class Store {
-  constructor(initialState, options) {
+  constructor(initialState2, options) {
     this.listeners = /* @__PURE__ */ new Set(), this.subscribe = (listener) => {
       var _a, _b;
       this.listeners.add(listener);
@@ -13553,7 +13571,7 @@ class Store {
     }, this.setState = (updater) => {
       var _a, _b, _c;
       this.prevState = this.state, this.state = (_a = this.options) != null && _a.updateFn ? this.options.updateFn(this.prevState)(updater) : updater(this.prevState), (_c = (_b = this.options) == null ? void 0 : _b.onUpdate) == null || _c.call(_b), __flush(this);
-    }, this.prevState = initialState, this.state = initialState, this.options = options;
+    }, this.prevState = initialState2, this.state = initialState2, this.options = options;
   }
 }
 class Derived {
@@ -22920,13 +22938,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 +23335,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 +24489,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)));
@@ -26595,11 +26613,11 @@ const __vite_import_meta_env__ = {}, createStoreImpl = (createState2) => {
       const previousState = state;
       state = replace ?? (typeof nextState != "object" || nextState === null) ? nextState : Object.assign({}, state, nextState), listeners.forEach((listener) => listener(state, previousState));
     }
-  }, getState = () => state, api = { setState, getState, getInitialState: () => initialState, subscribe: (listener) => (listeners.add(listener), () => listeners.delete(listener)), destroy: () => {
+  }, getState = () => state, api = { setState, getState, getInitialState: () => initialState2, subscribe: (listener) => (listeners.add(listener), () => listeners.delete(listener)), destroy: () => {
     (__vite_import_meta_env__ ? "production" : void 0) !== "production" && console.warn(
       "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
     ), listeners.clear();
-  } }, initialState = state = createState2(setState, getState, api);
+  } }, initialState2 = state = createState2(setState, getState, api);
   return api;
 }, createStore$1 = (createState2) => createState2 ? createStoreImpl(createState2) : createStoreImpl, { useDebugValue } = React__default, { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports, identity = (arg) => arg;
 function useStoreWithEqualityFn(api, selector3 = identity, equalityFn) {
@@ -28830,9 +28848,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) => {
@@ -32466,8 +32484,8 @@ ${err.message}`);
   }
   function getInitialStateNodesWithTheirAncestors(stateNode) {
     const states = getInitialStateNodes(stateNode);
-    for (const initialState of states)
-      for (const ancestor of getProperAncestors(initialState, stateNode))
+    for (const initialState2 of states)
+      for (const ancestor of getProperAncestors(initialState2, stateNode))
         states.add(ancestor);
     return states;
   }
@@ -32731,8 +32749,8 @@ ${err.message}`);
           addProperAncestorStatesToEnter(s2, stateNode.parent, statesToEnter, historyValue, statesForDefaultEntry);
       }
     else if (stateNode.type === "compound") {
-      const [initialState] = stateNode.initial.target;
-      isHistoryNode(initialState) || (statesToEnter.add(initialState), statesForDefaultEntry.add(initialState)), addDescendantStatesToEnter(initialState, historyValue, statesForDefaultEntry, statesToEnter), addProperAncestorStatesToEnter(initialState, stateNode, statesToEnter, historyValue, statesForDefaultEntry);
+      const [initialState2] = stateNode.initial.target;
+      isHistoryNode(initialState2) || (statesToEnter.add(initialState2), statesForDefaultEntry.add(initialState2)), addDescendantStatesToEnter(initialState2, historyValue, statesForDefaultEntry, statesToEnter), addProperAncestorStatesToEnter(initialState2, stateNode, statesToEnter, historyValue, statesForDefaultEntry);
     } else if (stateNode.type === "parallel")
       for (const child of getChildren2(stateNode).filter((sn) => !isHistoryNode(sn)))
         [...statesToEnter].some((s2) => isDescendant(s2, child)) || (isHistoryNode(child) || (statesToEnter.add(child), statesForDefaultEntry.add(child)), addDescendantStatesToEnter(child, historyValue, statesForDefaultEntry, statesToEnter));
@@ -34950,6 +34968,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 +36642,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 +36862,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 +36915,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 +36986,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 +37006,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 +37021,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 +37504,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,
       {
@@ -38379,131 +38441,90 @@ const select = (s2) => s2.children.search ?? null;
 function useSearchActorRef() {
   return useDiagramActorSnapshot(select, Object.is);
 }
-var reactErrorBoundary_cjs = {}, hasRequiredReactErrorBoundary_cjs;
-function requireReactErrorBoundary_cjs() {
-  if (hasRequiredReactErrorBoundary_cjs) return reactErrorBoundary_cjs;
-  hasRequiredReactErrorBoundary_cjs = 1, Object.defineProperty(reactErrorBoundary_cjs, "__esModule", { value: !0 });
-  var react = React__default;
-  const ErrorBoundaryContext = react.createContext(null), initialState = {
-    didCatch: !1,
-    error: null
-  };
-  class ErrorBoundary extends react.Component {
-    constructor(props2) {
-      super(props2), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = initialState;
+const ErrorBoundaryContext = createContext(null), initialState = {
+  didCatch: !1,
+  error: null
+};
+class ErrorBoundary extends Component {
+  constructor(props2) {
+    super(props2), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: !0,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      for (var _this$props$onReset, _this$props, _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++)
+        args[_key] = arguments[_key];
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 || _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      }), this.setState(initialState);
     }
-    static getDerivedStateFromError(error) {
-      return {
-        didCatch: !0,
-        error
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state, {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 || _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      }), this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children: children2,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props, {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children2;
+    if (didCatch) {
+      const props2 = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
       };
+      if (typeof fallbackRender == "function")
+        childToRender = fallbackRender(props2);
+      else if (FallbackComponent)
+        childToRender = createElement(FallbackComponent, props2);
+      else if (fallback !== void 0)
+        childToRender = fallback;
+      else
+        throw error;
     }
-    resetErrorBoundary() {
-      const {
-        error
-      } = this.state;
-      if (error !== null) {
-        for (var _this$props$onReset, _this$props, _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++)
-          args[_key] = arguments[_key];
-        (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 || _this$props$onReset.call(_this$props, {
-          args,
-          reason: "imperative-api"
-        }), this.setState(initialState);
-      }
-    }
-    componentDidCatch(error, info) {
-      var _this$props$onError, _this$props2;
-      (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props2, error, info);
-    }
-    componentDidUpdate(prevProps, prevState) {
-      const {
-        didCatch
-      } = this.state, {
-        resetKeys
-      } = this.props;
-      if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
-        var _this$props$onReset2, _this$props3;
-        (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 || _this$props$onReset2.call(_this$props3, {
-          next: resetKeys,
-          prev: prevProps.resetKeys,
-          reason: "keys"
-        }), this.setState(initialState);
-      }
-    }
-    render() {
-      const {
-        children: children2,
-        fallbackRender,
-        FallbackComponent,
-        fallback
-      } = this.props, {
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
         didCatch,
-        error
-      } = this.state;
-      let childToRender = children2;
-      if (didCatch) {
-        const props2 = {
-          error,
-          resetErrorBoundary: this.resetErrorBoundary
-        };
-        if (typeof fallbackRender == "function")
-          childToRender = fallbackRender(props2);
-        else if (FallbackComponent)
-          childToRender = react.createElement(FallbackComponent, props2);
-        else if (fallback !== void 0)
-          childToRender = fallback;
-        else
-          throw error;
-      }
-      return react.createElement(ErrorBoundaryContext.Provider, {
-        value: {
-          didCatch,
-          error,
-          resetErrorBoundary: this.resetErrorBoundary
-        }
-      }, childToRender);
-    }
-  }
-  function hasArrayChanged() {
-    let a2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], b2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
-    return a2.length !== b2.length || a2.some((item, index2) => !Object.is(item, b2[index2]));
-  }
-  function assertErrorBoundaryContext(value) {
-    if (value == null || typeof value.didCatch != "boolean" || typeof value.resetErrorBoundary != "function")
-      throw new Error("ErrorBoundaryContext not found");
-  }
-  function useErrorBoundary() {
-    const context2 = react.useContext(ErrorBoundaryContext);
-    assertErrorBoundaryContext(context2);
-    const [state, setState] = react.useState({
-      error: null,
-      hasError: !1
-    }), memoized = react.useMemo(() => ({
-      resetBoundary: () => {
-        context2.resetErrorBoundary(), setState({
-          error: null,
-          hasError: !1
-        });
-      },
-      showBoundary: (error) => setState({
         error,
-        hasError: !0
-      })
-    }), [context2.resetErrorBoundary]);
-    if (state.hasError)
-      throw state.error;
-    return memoized;
-  }
-  function withErrorBoundary(component, errorBoundaryProps) {
-    const Wrapped = react.forwardRef((props2, ref) => react.createElement(ErrorBoundary, errorBoundaryProps, react.createElement(component, {
-      ...props2,
-      ref
-    }))), name = component.displayName || component.name || "Unknown";
-    return Wrapped.displayName = "withErrorBoundary(".concat(name, ")"), Wrapped;
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
   }
-  return reactErrorBoundary_cjs.ErrorBoundary = ErrorBoundary, reactErrorBoundary_cjs.ErrorBoundaryContext = ErrorBoundaryContext, reactErrorBoundary_cjs.useErrorBoundary = useErrorBoundary, reactErrorBoundary_cjs.withErrorBoundary = withErrorBoundary, reactErrorBoundary_cjs;
 }
-var reactErrorBoundary_cjsExports = /* @__PURE__ */ requireReactErrorBoundary_cjs();
+function hasArrayChanged() {
+  let a2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], b2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return a2.length !== b2.length || a2.some((item, index2) => !Object.is(item, b2[index2]));
+}
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";
   return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: 0, left: 0, w: "100%", p: 0, style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
@@ -38729,11 +38750,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",
@@ -41748,7 +41771,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: [],
@@ -41787,7 +41810,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,
@@ -42096,7 +42119,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
@@ -42106,7 +42129,7 @@ const selector$4 = (state) => ({
     nodes,
     edges
   } = useRelationshipsBrowserState(
-    selector$4,
+    selector$5,
     selectorEq
   );
   return /* @__PURE__ */ jsx(
@@ -42770,7 +42793,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" }),
@@ -42817,7 +42855,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%" } })
                         }
@@ -42853,8 +42893,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" }),
@@ -42929,10 +42978,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,
@@ -42951,6 +42997,7 @@ function ElementProperty({
         fz: "md",
         style: {
           whiteSpace: "preserve-breaks",
+          userSelect: "all",
           ...style2
         },
         ...props2,
@@ -42960,11 +43007,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({
@@ -43649,7 +43781,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,
@@ -43931,7 +44063,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,
@@ -43942,7 +44074,7 @@ const selectSubject = (state) => ({
     initialized,
     nodes,
     edges
-  } = useRelationshipDetailsState(selector$3, deepEqual);
+  } = useRelationshipDetailsState(selector$4, deepEqual);
   return /* @__PURE__ */ jsxs(
     BaseXYFlow,
     {
@@ -44143,7 +44275,7 @@ function Overlays({ overlaysActorRef }) {
         nonexhaustive(overlay2);
     }
   });
-  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
 }
 const [SearchActorContext, useSearchActor] = createSafeContext("SearchActorContext"), selectSearchValue = (s2) => s2.context.searchValue;
 function useSearch() {
@@ -44516,11 +44648,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"
             }
           )
         ] })
@@ -44681,7 +44813,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,
@@ -45158,7 +45290,7 @@ function Search({ searchActorRef }) {
     ["mod+f", openSearch, {
       preventDefault: !0
     }]
-  ]), /* @__PURE__ */ jsx(SearchActorContext, { value: searchActorRef, children: /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: close, children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsx(
+  ]), /* @__PURE__ */ jsx(SearchActorContext, { value: searchActorRef, children: /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: close, children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsx(
     Overlay,
     {
       fullscreen: !0,
@@ -45412,7 +45544,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) => {
@@ -45421,7 +45553,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?.({
@@ -45738,11 +45870,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,
     {
@@ -45912,14 +46044,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);
@@ -46013,24 +46148,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",
@@ -46893,7 +47027,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,
@@ -47677,7 +47811,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,
@@ -47722,8 +47856,8 @@ function layoutResultToXYFlow(layout2) {
         color: color2,
         navigateTo,
         line,
-        ...technology2 && { technology: technology2 },
-        ...description2 && { description: description2 }
+        description: RichText.from(description2),
+        ...technology2 && { technology: technology2 }
       }
     });
   }
@@ -49172,7 +49306,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)),
@@ -49789,7 +49923,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,
@@ -50036,7 +50173,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({
@@ -50101,7 +50238,7 @@ const cssWebcomponentView = css({
   component: RouteComponent$2
 });
 function RouteComponent$2() {
-  return /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(
     LikeC4ModelContext,
     {
       likec4data: $likec4data,
@@ -50162,53 +50299,63 @@ const previewBg = css({
 });
 function RouteComponent$1() {
   useDocumentTitle("LikeC4");
-  const views = t$4(useLikeC4Model$1().$model.views);
-  return /* @__PURE__ */ jsx(
+  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,
@@ -50224,7 +50371,7 @@ const Route$h = createFileRoute("/project/$projectId")({
 });
 function RouteComponent() {
   const { $likec4data: $likec4data2, $likec4model: $likec4model2, IconRenderer: IconRenderer2 } = Route$h.useLoaderData();
-  return /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4data: $likec4data2, likec4model: $likec4model2, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer2, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
+  return /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4data: $likec4data2, likec4model: $likec4model2, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer2, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
 }
 const Route$g = createFileRoute("/project/$projectId/")({
   component: () => {
@@ -51220,7 +51367,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,
@@ -51940,9 +52087,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