likec4 1.40.0 → 1.41.0

package/__app__/src/likec4.js

@@ -7,7 +7,7 @@ var __publicField = (obj, key2, value) => __defNormalProp(obj, typeof key2 != "s
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj)), __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value), __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 import { forwardRef, createElement, useContext, createContext, Fragment as Fragment$1, useMemo, useState, useEffect, useRef, createRef, useCallback, memo as memo$1, useLayoutEffect, useDeferredValue } from "react";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { u as useMantineStyleNonce, L as LazyMotion, d as domMax, M as MotionConfig, a as useFirstMountState, b as useCustomCompareEffect, s as shallowEqual, c as useStoreApi, e as useStore, f as useCallbackRef, g as useReactFlow, h as useInternalNode, t, i as t$1, B as Bezier, j as e, k as getNodeDimensions, l as Background$1, m as BackgroundVariant, n, o as index, p as useSyncedRef, q as e$1, r as t$2, v as MantineContext, w as MantineProvider, x as atom, y as createSafeContext, z as deepEqual, A as useDeepCompareMemo, C as t$3, D as t$4, E as t$5, F as t$6, G as createOptionalContext, H as useId$1, I as getNodesBounds, J as getEdgePosition, K as xstateReact_cjsExports, N as useDebouncedValue, O as MotionDiv, P as ActionIcon$1, Q as m, T as Text, R as e$2, S as EdgeLabelRenderer, U as e$3, V as MotionButton, W as useHover, X as useDebouncedState, Y as NodeToolbar, Z as Position, _ as e$4, $ as Handle, a0 as d3line, a1 as curveCatmullRomOpen, a2 as n$1, a3 as t$7, a4 as useDebouncedEffect, a5 as getSmoothStepPath, a6 as Tooltip$7, a7 as t$8, a8 as Popover, a9 as PopoverTarget, aa as Button, ab as ColorSwatch, ac as PopoverDropdown, ad as Space, ae as Divider$1, af as Stack, ag as TooltipGroup, ah as Flex, ai as CheckIcon, aj as rem, ak as useUpdateEffect$1, al as Slider, am as Paper, an as Box$1, ao as Group, ap as SegmentedControl, aq as Menu, ar as MenuTarget, as as MenuDropdown, at as MenuItem, au as useFocusTrap, av as useReducedMotionConfig, aw as useDebouncedCallback, ax as useTimeoutEffect, ay as useMergedRef, az as ReactRemoveScroll, aA as xstate_cjsExports, aB as ThemeIcon, aC as Breadcrumbs, aD as FloatingIndicator, aE as UnstyledButton, aF as useUncontrolled, aG as clampUseMovePosition, aH as useMove, aI as HoverCard, aJ as HoverCardTarget, aK as HoverCardDropdown, aL as Notification, aM as Code, aN as AnimatePresence, aO as isMacOs, aP as Badge, aQ as CopyButton, aR as MotionSpan, aS as Portal, aT as NavLink, aU as useThrottledCallback, aV as createScopedKeydownHandler, aW as ScrollAreaAutosize, aX as Input, aY as t$9, aZ as Highlight, a_ as e$5, a$ as LayoutGroup, b0 as ErrorBoundary$1, b1 as useTree, b2 as Alert, b3 as Tree, b4 as getBezierPath, b5 as t$a, b6 as t$b, b7 as e$6, b8 as t$c, b9 as t$d, ba as n$2, bb as r, bc as t$e, bd as n$3, be as dagre, bf as t$f, bg as t$g, bh as t$h, bi as ReactFlowProvider, bj as useStateHistory, bk as Panel, bl as Anchor, bm as Pill, bn as useViewportSize, bo as useSessionStorage, bp as t$i, bq as useDragControls, br as useMotionValue, bs as Card, bt as CloseButton, bu as ActionIconGroup, bv as Tabs, bw as TabsList, bx as TabsTab, by as TabsPanel, bz as ScrollArea, bA as e$7, bB as animate, bC as e$8, bD as VisuallyHidden, bE as useWindowEvent, bF as FocusTrap, bG as Title, bH as useFocusWithin, bI as useCombobox, bJ as ComboboxOption, bK as Combobox, bL as ComboboxTarget, bM as ComboboxDropdown, bN as ComboboxOptions, bO as ComboboxEmpty, bP as useHotkeys, bQ as Grid, bR as GridCol, bS as autoUpdate, bT as computePosition, bU as offset$1, bV as autoPlacement, bW as size, bX as hide, bY as useLocalStorage, bZ as CardSection, b_ as Spoiler, b$ as n$4, c0 as ButtonGroup, c1 as useTimeout, c2 as useDebouncedCallback$1, c3 as useCustomCompareMemo, c4 as toRgba, c5 as t$j, c6 as mix, c7 as toHex, c8 as scale, c9 as t$k, ca as t$l, cb as t$m, cc as Solver, cd as Strength, ce as Variable, cf as Operator, cg as Constraint, ch as e$9, ci as n$5, cj as applyEdgeChanges, ck as applyNodeChanges, cl as getViewportForBounds, cm as e$a, cn as t$n, co as getHotkeyHandler, cp as n$6, cq as t$o, cr as e$b, cs as getBoundsOfRects, ct as boxToRect, cu as nodeToRect } from "./vendors.js";
+import { u as useMantineStyleNonce, L as LazyMotion, d as domMax, M as MotionConfig, a as useFirstMountState, b as useCustomCompareEffect, s as shallowEqual, c as useStoreApi, e as useStore, f as useCallbackRef, g as useReactFlow, h as useInternalNode, t, i as t$1, B as Bezier, j as e, k as getNodeDimensions, l as Background$1, m as BackgroundVariant, n, o as index, p as useSyncedRef, q as e$1, r as t$2, v as MantineContext, w as MantineProvider, x as atom, y as createSafeContext, z as deepEqual, A as useDeepCompareMemo, C as t$3, D as t$4, E as t$5, F as t$6, G as createOptionalContext, H as useId$1, I as getNodesBounds, J as getEdgePosition, K as xstateReact_cjsExports, N as useDebouncedValue, O as MotionDiv, P as ActionIcon$1, Q as m, T as Text, R as e$2, S as EdgeLabelRenderer, U as e$3, V as MotionButton, W as useHover, X as useDebouncedState, Y as NodeToolbar, Z as Position, _ as e$4, $ as Handle, a0 as d3line, a1 as curveCatmullRomOpen, a2 as n$1, a3 as t$7, a4 as useDebouncedEffect, a5 as getSmoothStepPath, a6 as Tooltip$7, a7 as t$8, a8 as Popover, a9 as PopoverTarget, aa as Button, ab as ColorSwatch, ac as PopoverDropdown, ad as Space, ae as Divider$1, af as Stack, ag as TooltipGroup, ah as Flex, ai as CheckIcon, aj as rem, ak as useUpdateEffect$1, al as Slider, am as Paper, an as Box$1, ao as Group, ap as SegmentedControl, aq as Menu, ar as MenuTarget, as as MenuDropdown, at as MenuItem, au as useFocusTrap, av as useReducedMotionConfig, aw as useDebouncedCallback, ax as useTimeoutEffect, ay as useMergedRef, az as ReactRemoveScroll, aA as xstate_cjsExports, aB as ThemeIcon, aC as Breadcrumbs, aD as FloatingIndicator, aE as UnstyledButton, aF as useUncontrolled, aG as clampUseMovePosition, aH as useMove, aI as HoverCard, aJ as HoverCardTarget, aK as HoverCardDropdown, aL as Notification, aM as Code, aN as AnimatePresence, aO as isMacOs, aP as Badge, aQ as CopyButton, aR as MotionSpan, aS as Portal, aT as NavLink, aU as useThrottledCallback, aV as createScopedKeydownHandler, aW as ScrollAreaAutosize, aX as Input, aY as t$9, aZ as Highlight, a_ as e$5, a$ as LayoutGroup, b0 as ErrorBoundary$1, b1 as useTree, b2 as Alert, b3 as Tree, b4 as getBezierPath, b5 as t$a, b6 as t$b, b7 as e$6, b8 as t$c, b9 as t$d, ba as n$2, bb as r, bc as t$e, bd as n$3, be as dagre, bf as t$f, bg as t$g, bh as t$h, bi as ReactFlowProvider, bj as useStateHistory, bk as useRafEffect, bl as Panel, bm as Anchor, bn as Pill, bo as useViewportSize, bp as useSessionStorage, bq as t$i, br as useDragControls, bs as useMotionValue, bt as CloseButton, bu as ActionIconGroup, bv as Tabs, bw as TabsList, bx as TabsTab, by as TabsPanel, bz as ScrollArea, bA as e$7, bB as animate, bC as e$8, bD as VisuallyHidden, bE as useWindowEvent, bF as FocusTrap, bG as Title, bH as useFocusWithin, bI as useCombobox, bJ as ComboboxOption, bK as Combobox, bL as ComboboxTarget, bM as ComboboxDropdown, bN as ComboboxOptions, bO as ComboboxEmpty, bP as useHotkeys, bQ as Grid, bR as GridCol, bS as autoUpdate, bT as computePosition, bU as offset$1, bV as autoPlacement, bW as size, bX as hide, bY as useLocalStorage, bZ as Card, b_ as CardSection, b$ as Spoiler, c0 as n$4, c1 as ButtonGroup, c2 as useTimeout, c3 as useDebouncedCallback$1, c4 as useCustomCompareMemo, c5 as toRgba, c6 as t$j, c7 as mix, c8 as toHex, c9 as scale, ca as t$k, cb as t$l, cc as t$m, cd as Solver, ce as Strength, cf as Variable, cg as Operator, ch as Constraint, ci as e$9, cj as n$5, ck as applyEdgeChanges, cl as applyNodeChanges, cm as getViewportForBounds, cn as e$a, co as t$n, cp as getHotkeyHandler, cq as n$6, cr as t$o, cs as e$b, ct as getBoundsOfRects, cu as boxToRect, cv as nodeToRect } from "./vendors.js";
 import { nonexhaustive, isTagColorSpecified, invariant as invariant$1, isStepEdgeId, extractStep, nonNullable as nonNullable$1, defaultTheme, ElementShapes, RichText, ancestorsFqn, nameFromFqn, isAncestor as isAncestor$1, ThemeColors, Queue, whereOperatorAsPredicate, GroupElementKind, BBox as BBox$1, getParallelStepsPrefix as getParallelStepsPrefix$1 } from "@likec4/core";
 import { invariant, nonNullable, toArray, ifirst, ifilter, compareNaturalHierarchically, nonexhaustive as nonexhaustive$1, compareNatural, ifind, DefaultMap, isAncestor, sortParentsFirst, nameFromFqn as nameFromFqn$1, Stack as Stack$1, delay } from "@likec4/core/utils";
 import { BBox, ensureSizes, RichText as RichText$1, isStepEdgeId as isStepEdgeId$1, getParallelStepsPrefix } from "@likec4/core/types";
@@ -3412,6 +3412,7 @@ const MarkdownBlock = forwardRef(({
   hideIfEmpty = !1,
   emptyText = "no content",
   className,
+  style: style2,
   ...props
 }, ref) => {
   if (value.isEmpty && hideIfEmpty)
@@ -3430,6 +3431,7 @@ const MarkdownBlock = forwardRef(({
         className
       ),
       style: {
+        ...style2,
         ...props.fontSize && {
           "--text-fz": `var(--font-sizes-${props.fontSize}, var(--font-sizes-md))`
         },
@@ -5882,15 +5884,22 @@ const selector$7 = (state) => ({
               userSelect: "none",
               pointerEvents: "none",
               _groupHover: {
-                color: "[inherit]",
+                color: "[var(--badge-color)]",
                 opacity: 0.7
               }
             }
-          }),
-          label: css({
-            "& > a": {
-              color: "[inherit]",
-              cursor: "pointer",
+          })
+        },
+        children: /* @__PURE__ */ jsxs(
+          styled.a,
+          {
+            href: url,
+            target: "_blank",
+            style: {
+              color: "var(--badge-color)",
+              cursor: "pointer"
+            },
+            css: {
               transition: "fast",
               opacity: {
                 base: 0.7,
@@ -5900,20 +5909,20 @@ const selector$7 = (state) => ({
                 base: "none",
                 _hover: "underline"
               }
-            }
-          })
-        },
-        children: /* @__PURE__ */ jsxs("a", { href: url, target: "_blank", children: [
-          isGithub && /* @__PURE__ */ jsx(
-            GithubIcon,
-            {
-              height: "12",
-              width: "12",
-              style: { verticalAlign: "middle", marginRight: "4px" }
-            }
-          ),
-          isGithub ? url.replace(GITHUB_PREFIX, "") : url
-        ] })
+            },
+            children: [
+              isGithub && /* @__PURE__ */ jsx(
+                GithubIcon,
+                {
+                  height: "12",
+                  width: "12",
+                  style: { verticalAlign: "middle", marginRight: "4px" }
+                }
+              ),
+              isGithub ? url.replace(GITHUB_PREFIX, "") : url
+            ]
+          }
+        )
       }
     );
   }
@@ -5928,26 +5937,27 @@ const selector$7 = (state) => ({
     relativePath: view.$view.relativePath
   };
 }, ViewDetailsCard = (props) => {
-  const data = useNavigationActorSnapshot(selector$6), portalProps = useMantinePortalProps();
+  const [opened, setOpened] = useState(!1), data = useNavigationActorSnapshot(selector$6), portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
     Popover,
     {
       position: "bottom-end",
       shadow: "xl",
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      trapFocus: !0,
       offset: {
         mainAxis: 4
       },
+      opened,
+      onChange: setOpened,
       ...portalProps,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ViewDetailsCardTrigger, { linksCount: data.links.length }),
-        /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data })
+        /* @__PURE__ */ jsx(ViewDetailsCardTrigger, { linksCount: data.links.length, onOpen: () => setOpened(!0) }),
+        opened && /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data, onClose: () => setOpened(!1) })
       ]
     }
   );
-}, ViewDetailsCardTrigger = ({ linksCount }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
+}, ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
   UnstyledButton,
   {
     component: MotionButton,
@@ -5956,6 +5966,9 @@ const selector$7 = (state) => ({
       scale: 0.95,
       translateY: 1
     },
+    onClick: (e2) => {
+      e2.stopPropagation(), onOpen();
+    },
     className: cx(
       "group",
       hstack({
@@ -6014,10 +6027,11 @@ const selector$7 = (state) => ({
     tags,
     links,
     relativePath
-  }
+  },
+  onClose
 }) => {
   const diagram = useDiagram();
-  return /* @__PURE__ */ jsxs(
+  return useOnDiagramEvent("paneClick", onClose), useOnDiagramEvent("nodeClick", onClose), /* @__PURE__ */ jsxs(
     Popover.Dropdown,
     {
       className: cx(
@@ -6027,9 +6041,10 @@ const selector$7 = (state) => ({
           layerStyle: "likec4.dropdown",
           gap: "md",
           padding: "md",
+          paddingBottom: "lg",
           pointerEvents: "all",
-          maxWidth: "calc(100cqw - 32px)",
-          minWidth: "calc(100cqw - 50px)",
+          maxWidth: "calc(100cqw - 52px)",
+          minWidth: "200px",
           maxHeight: "calc(100cqh - 100px)",
           width: "max-content",
           cursor: "default",
@@ -6046,7 +6061,7 @@ const selector$7 = (state) => ({
       ),
       children: [
         /* @__PURE__ */ jsxs("section", { children: [
-          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", children: title2 }),
+          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", lh: "sm", children: title2 }),
           /* @__PURE__ */ jsxs(HStack, { alignItems: "flex-start", mt: "1", children: [
             /* @__PURE__ */ jsx(ViewBadge, { label: "id", value: id }),
             /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: tags.map((tag, i) => /* @__PURE__ */ jsx(
@@ -6066,7 +6081,7 @@ const selector$7 = (state) => ({
           /* @__PURE__ */ jsx(SectionHeader$1, { children: "Links" }),
           /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`)) })
         ] }),
-        description2.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", my: "md", style: { userSelect: "none" }, children: "No description" }),
+        description2.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", style: { userSelect: "none" }, children: "No description" }),
         description2.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
           /* @__PURE__ */ jsx(SectionHeader$1, { children: "Description" }),
           /* @__PURE__ */ jsx(
@@ -6104,6 +6119,7 @@ const selector$7 = (state) => ({
           overflow: "visible",
           px: "1",
           color: {
+            _dark: "mantine.colors.gray[4]",
             _light: "mantine.colors.gray[8]"
           }
         }),
@@ -7209,12 +7225,18 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", dialog$1 = css({
 }), card$2 = css({
   position: "absolute",
   pointerEvents: "all",
+  display: "flex",
+  flexDirection: "column",
+  padding: "4",
   gap: "lg",
   justifyContent: "stretch",
+  color: "mantine.colors.text",
   backgroundColor: {
     base: "mantine.colors.body",
     _dark: "mantine.colors.dark[6]"
   },
+  boxShadow: "md",
+  overflow: "hidden",
   border: "none",
   backgroundImage: `
     linear-gradient(180deg,
@@ -8177,7 +8199,7 @@ function layoutRelationshipsView(data, scope) {
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: RichText$1.from(element.description),
+      description: element.summary,
       technology: element.technology,
       tags: [...element.tags],
       links: null,
@@ -8574,7 +8596,7 @@ const selector$5 = (state) => ({
     historySubjectId !== subjectId && historyOps.set(subjectId);
   }, [subjectId]), useEffect(() => {
     historySubjectId !== subjectId && browser.navigateTo(historySubjectId);
-  }, [historySubjectId, browser]), useEffect(() => {
+  }, [historySubjectId, browser]), useRafEffect(() => {
     browser.updateView(layouted);
   }, [layouted, browser]);
   const hasStepBack = current > 0, hasStepForward = current + 1 < history.length;
@@ -9010,7 +9032,7 @@ function ElementDetailsCard({
   const [opened, setOpened] = useState(!1), windowSize = useViewportSize(), windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800, [activeTab, setActiveTab] = useSessionStorage({
     key: "likec4:element-details:active-tab",
     defaultValue: "Properties"
-  }), diagram = useDiagram(), viewModel = useLikeC4Model().view(viewId), nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn2), elementModel = viewModel.$model.element(fqn2), [viewsOf, otherViews] = t$3(
+  }), diagram = useDiagram(), viewModel = useCurrentViewModel(), nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn2), elementModel = viewModel.$model.element(fqn2), [viewsOf, otherViews] = t$3(
     [...elementModel.views()],
     t$c((v) => v.$view),
     t$i((v) => v._type === "element" && v.viewOf === fqn2)
@@ -9064,7 +9086,7 @@ function ElementDetailsCard({
     (_a2 = ref.current) != null && _a2.open || (_b2 = ref.current) == null || _b2.showModal();
   }, 20), useTimeoutEffect(() => {
     setOpened(!0);
-  }, 200), /* @__PURE__ */ jsx(
+  }, 220), /* @__PURE__ */ jsx(
     m.dialog,
     {
       ref,
@@ -9095,10 +9117,8 @@ function ElementDetailsCard({
         e2.stopPropagation(), close();
       },
       children: /* @__PURE__ */ jsx(ReactRemoveScroll, { forwardProps: !0, removeScrollBar: !1, children: /* @__PURE__ */ jsxs(
-        Card,
+        m.div,
         {
-          shadow: "md",
-          component: m.div,
           layout: !0,
           layoutRoot: !0,
           drag: !0,
@@ -9131,14 +9151,13 @@ function ElementDetailsCard({
             }
           },
           style: {
-            // `style` prop in Mantine doesn't accept motion values
             width,
             height
           },
           children: [
             /* @__PURE__ */ jsxs("div", { className: cardHeader, onPointerDown: (e2) => controls.start(e2), children: [
-              /* @__PURE__ */ jsxs(Group, { align: "start", justify: "space-between", gap: "sm", mb: "sm", wrap: "nowrap", children: [
-                /* @__PURE__ */ jsxs(Group, { align: "start", gap: "sm", style: { cursor: "default" }, wrap: "nowrap", children: [
+              /* @__PURE__ */ jsxs(HStack, { alignItems: "start", justify: "space-between", gap: "sm", mb: "sm", flexWrap: "nowrap", children: [
+                /* @__PURE__ */ jsxs(HStack, { alignItems: "start", gap: "sm", style: { cursor: "default" }, flexWrap: "nowrap", children: [
                   elementIcon2,
                   /* @__PURE__ */ jsxs("div", { children: [
                     /* @__PURE__ */ jsx(
@@ -9162,7 +9181,7 @@ function ElementDetailsCard({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs(Group, { align: "baseline", gap: "sm", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsxs(HStack, { alignItems: "baseline", gap: "sm", flexWrap: "nowrap", children: [
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx(SmallLabel, { children: "kind" }),
                   /* @__PURE__ */ jsx(
@@ -9264,6 +9283,10 @@ 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: "scroll", offsetScrollbars: !0, children: /* @__PURE__ */ jsxs(Box$1, { className: propertiesGrid, pt: "xs", children: [
+                    elementModel.hasSummary && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(PropertyLabel, { children: "summary" }),
+                      /* @__PURE__ */ jsx(MarkdownBlock, { value: elementModel.summary })
+                    ] }),
                     /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(PropertyLabel, { children: "description" }),
                       /* @__PURE__ */ jsx(
@@ -9397,12 +9420,10 @@ function ElementMetata({
         children: t$6(metadata).map(([key2, value]) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cx(
-              "group",
-              css({
-                display: "contents"
-              })
-            ),
+            style: {
+              display: "contents"
+            },
+            className: "group",
             children: [
               /* @__PURE__ */ jsxs(
                 "div",
@@ -9451,7 +9472,7 @@ function ElementMetata({
                             fontSize: "sm",
                             padding: "xxs",
                             whiteSpace: "pre",
-                            fontFamily: "[var(--mantine-font-family-monospace)]",
+                            fontFamily: "mono",
                             userSelect: "all"
                           }),
                           children: value
@@ -9931,7 +9952,7 @@ function layoutRelationshipDetails(data, scope) {
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: RichText.from(element.description),
+      description: element.summary,
       technology: element.technology,
       tags: [...element.tags],
       links: null,
@@ -10977,7 +10998,7 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn$1.description, lineClamp: 1, children: element.description.text || "No description" })
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn$1.description, lineClamp: 1, children: element.summary.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, { children: [
             views.length,
@@ -17549,10 +17570,7 @@ function findCorrespondingNode(context2, event) {
   const fromNodeId = (_a = context2.lastOnNavigate) == null ? void 0 : _a.fromNode, fromNode = fromNodeId && context2.xynodes.find((n2) => n2.id === fromNodeId), fromRef = fromNode && nodeRef(fromNode), toNode = fromRef && event.xynodes.find((n2) => nodeRef(n2) === fromRef);
   return { fromNode, toNode };
 }
-const diagramMachine = _diagramMachine, selectToggledFeatures = (state) => state.context.features.enableReadOnly || state.context.activeWalkthrough ? {
-  ...state.context.toggledFeatures,
-  enableReadOnly: !0
-} : state.context.toggledFeatures, selectDynamicViewVariant = (state) => state.context.dynamicViewVariant;
+const diagramMachine = _diagramMachine, selectDynamicViewVariant = (state) => state.context.dynamicViewVariant;
 function DiagramActorProvider({
   view,
   zoomable,
@@ -17610,39 +17628,36 @@ function DiagramActorProvider({
     () => convertToXYFlow({ view, where, nodesSelectable, dynamicViewVariant }),
     [view, where, nodesSelectable, dynamicViewVariant]
   );
-  useEffect(() => {
+  return useRafEffect(() => {
     actorRef.send({
       type: "update.view",
       ...update
     });
-  }, [actorRef, update]);
-  const toggledFeatures = xstateReact_cjsExports.useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: actorRef, children: [
-    /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { children }) }) }),
+  }, [actorRef, update]), /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: actorRef, children: [
+    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef, children }) }),
     /* @__PURE__ */ jsx(DiagramActorEventListener, { actorRef })
   ] });
 }
-function CurrentViewModelProvider({ children }) {
-  const viewId = useCurrentViewId(), viewmodel = useLikeC4Model().findView(viewId);
-  return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children });
+const selectViewIdAndToggledFeatures = (state) => state.context.features.enableReadOnly || state.context.activeWalkthrough ? {
+  viewId: state.context.view.id,
+  toggledFeatures: {
+    ...state.context.toggledFeatures,
+    enableReadOnly: !0
+  }
+} : {
+  viewId: state.context.view.id,
+  toggledFeatures: state.context.toggledFeatures
+};
+function CurrentViewModelProvider({ children, actorRef }) {
+  const { viewId, toggledFeatures } = xstateReact_cjsExports.useSelector(actorRef, selectViewIdAndToggledFeatures, deepEqual), viewmodel = useLikeC4Model().findView(viewId);
+  return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
 function DiagramActorEventListener({ actorRef }) {
   const {
     onNavigateTo,
     onOpenSource
   } = useDiagramEventHandlers();
-  return useOnDiagramEvent("openSource", ({ params }) => onOpenSource == null ? void 0 : onOpenSource(params)), useEffect(() => {
-    if (!onNavigateTo) return;
-    let frame;
-    const subscription = actorRef.on("navigateTo", ({ viewId }) => {
-      cancelAnimationFrame(frame), frame = requestAnimationFrame(() => {
-        onNavigateTo(viewId);
-      });
-    });
-    return () => {
-      cancelAnimationFrame(frame), subscription.unsubscribe();
-    };
-  }, [actorRef, onNavigateTo]), null;
+  return useOnDiagramEvent("openSource", ({ params }) => onOpenSource == null ? void 0 : onOpenSource(params)), useOnDiagramEvent("navigateTo", ({ viewId }) => onNavigateTo == null ? void 0 : onNavigateTo(viewId)), null;
 }
 function LikeC4Diagram({
   onCanvasClick,

package/__app__/src/main.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEffect, lazy, Suspense, createContext, useContext, useState, useMemo, memo, useRef, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { cv as useRouter, cw as isNotFound, cx as Container, b2 as Alert, T as Text, aM as Code, aa as Button, ao as Group, aj as rem, bG as Title, cy as Link, cz as useNavigate, f as useCallbackRef, cA as createRootRouteWithContext, cB as stripSearchParams, R as e, cC as Outlet, cD as useMantineColorScheme, cE as createFileRoute, cF as useDocumentTitle, af as Stack, cG as Loader, cH as useStore, b0 as ErrorBoundary, cI as Navigate, cJ as SimpleGrid, cK as useInViewport, cL as e$1, bs as Card, an as Box, cM as notFound, cN as useParams, ca as t, s as shallowEqual, cO as useIsomorphicLayoutEffect, bb as r, b1 as useTree, cP as useComputedColorScheme, b3 as Tree, aI as HoverCard, aJ as HoverCardTarget, aK as HoverCardDropdown, aB as ThemeIcon, cQ as onMount, x as atom, bY as useLocalStorage, cR as Drawer, bz as ScrollArea, ap as SegmentedControl, P as ActionIcon, aq as Menu, ar as MenuTarget, as as MenuDropdown, at as MenuItem, aQ as CopyButton$1, cS as Select, cT as ModalRoot, cU as ModalOverlay, cV as ModalContent, cW as ModalBody, bv as Tabs, bw as TabsList, bx as TabsTab, by as TabsPanel, cX as useMatches, cY as useMantineTheme, cZ as useMediaQuery, c_ as useDisclosure, am as Paper, ae as Divider, ad as Space, c$ as useParentMatches, d0 as MenuLabel, C as t$1, b5 as t$2, b8 as t$3, b7 as e$2, b6 as t$4, b9 as t$5, r as t$6, ba as n, i as t$7, be as dagre, bf as t$8, bg as t$9, d1 as useSearch, a4 as useDebouncedEffect, d2 as LoadingOverlay, a6 as Tooltip, d3 as useAsync, d4 as PanelGroup, d5 as Panel, d6 as PanelResizeHandle, d7 as Burger, d8 as RouterProvider, d9 as createRouter$1, da as createHashHistory, db as createBrowserHistory, dc as createTheme, aS as Portal, w as MantineProvider } from "./vendors.js";
+import { cw as useRouter, cx as isNotFound, cy as Container, b2 as Alert, T as Text, aM as Code, aa as Button, ao as Group, aj as rem, bG as Title, cz as Link, cA as useNavigate, f as useCallbackRef, cB as createRootRouteWithContext, cC as stripSearchParams, R as e, cD as Outlet, cE as useMantineColorScheme, cF as createFileRoute, cG as useDocumentTitle, af as Stack, cH as Loader, cI as useStore, b0 as ErrorBoundary, cJ as Navigate, cK as SimpleGrid, cL as useInViewport, cM as e$1, bZ as Card, an as Box, cN as notFound, cO as useParams, cb as t, s as shallowEqual, cP as useIsomorphicLayoutEffect, bb as r, b1 as useTree, cQ as useComputedColorScheme, b3 as Tree, aI as HoverCard, aJ as HoverCardTarget, aK as HoverCardDropdown, aB as ThemeIcon, cR as onMount, x as atom, bY as useLocalStorage, cS as Drawer, bz as ScrollArea, ap as SegmentedControl, P as ActionIcon, aq as Menu, ar as MenuTarget, as as MenuDropdown, at as MenuItem, aQ as CopyButton$1, cT as Select, cU as ModalRoot, cV as ModalOverlay, cW as ModalContent, cX as ModalBody, bv as Tabs, bw as TabsList, bx as TabsTab, by as TabsPanel, cY as useMatches, cZ as useMantineTheme, c_ as useMediaQuery, c$ as useDisclosure, am as Paper, ae as Divider, ad as Space, d0 as useParentMatches, d1 as MenuLabel, C as t$1, b5 as t$2, b8 as t$3, b7 as e$2, b6 as t$4, b9 as t$5, r as t$6, ba as n, i as t$7, be as dagre, bf as t$8, bg as t$9, d2 as useSearch, a4 as useDebouncedEffect, d3 as LoadingOverlay, a6 as Tooltip, d4 as useAsync, d5 as PanelGroup, d6 as Panel, d7 as PanelResizeHandle, d8 as Burger, d9 as RouterProvider, da as createRouter$1, db as createHashHistory, dc as createBrowserHistory, dd as createTheme, aS as Portal, w as MantineProvider } from "./vendors.js";
 import { projects } from "likec4:projects";
 import { c as css, L as LikeC4ProjectsProvider, u as useLikeC4Projects, I as IconRendererProvider, a as LikeC4ModelProvider, b as useLikeC4Model$1, S as StaticLikeC4Diagram, M as MarkdownBlock, B as Box$1, d as useUpdateEffect, e as IconStarFilled, f as IconStack2, g as IconLayoutDashboard, h as IconFileCode, i as IconFolderOpen, j as IconFolderFilled, k as IconArrowLeft, l as IconMoonStars, m as IconSun, n as IconChevronDown, o as IconAlertTriangle, p as IconCheck, q as IconCopy, r as IconExternalLink, s as IconShare, t as LikeC4Diagram } from "./likec4.js";
 import { pageTitle, ComponentName, useHashHistory, withOverviewGraph, krokiPumlSvgUrl, isDevelopment, krokiD2SvgUrl, basepath } from "./const.js";
@@ -1474,7 +1474,7 @@ async function downloadAsPng({
   pngFilename,
   viewport
 }) {
-  const { toBlob } = await import("./vendors.js").then((n2) => n2.dd);
+  const { toBlob } = await import("./vendors.js").then((n2) => n2.de);
   try {
     const blob = await toBlob(viewport, {
       backgroundColor: "transparent",