@likec4/diagram 1.40.0 → 1.41.0

package/dist/base/primitives/MarkdownBlock.js

@@ -12,6 +12,7 @@ const MarkdownBlock = forwardRef(({
   hideIfEmpty = false,
   emptyText = "no content",
   className,
+  style,
   ...props
 }, ref) => {
   if (value.isEmpty && hideIfEmpty) {
@@ -31,6 +32,7 @@ const MarkdownBlock = forwardRef(({
         className
       ),
       style: {
+        ...style,
         ...props.fontSize && {
           "--text-fz": `var(--font-sizes-${props.fontSize}, var(--font-sizes-md))`
         },

package/dist/components/Link.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { css, cx } from '@likec4/styles/css';
+import { styled } from '@likec4/styles/jsx';
 import { Badge, CopyButton, ActionIcon } from '@mantine/core';
 import { forwardRef } from 'react';
 import { GithubIcon } from './GithubIcon.js';
@@ -66,15 +67,22 @@ const Link = forwardRef(
               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,
@@ -84,20 +92,20 @@ const Link = forwardRef(
                 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
+            ]
+          }
+        )
       }
     );
   }

package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts

@@ -38,7 +38,7 @@ export declare const RelationshipEdge: FunctionComponent<{
         points: NonEmptyArray<Point>;
         color: Color | undefined;
         dir: "forward" | "back" | "both" | undefined;
-        technology: string | undefined;
+        technology: string | null | undefined;
         labelBBox: BBox | null | undefined;
         line: RelationshipLineType | undefined;
         head: RelationshipArrowType | undefined;

package/dist/navigationpanel/controls/ViewDetailsCard.js

@@ -4,8 +4,9 @@ import { HStack, Box, styled } from '@likec4/styles/jsx';
 import { hstack, vstack } from '@likec4/styles/patterns';
 import { Popover, UnstyledButton, Text, Badge } from '@mantine/core';
 import * as m from 'motion/react-m';
+import { useState } from 'react';
 import { Link } from '../../components/Link.js';
-import { useDiagram } from '../../hooks/useDiagram.js';
+import { useDiagram, useOnDiagramEvent } from '../../hooks/useDiagram.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 import { useNavigationActorSnapshot } from '../hooks.js';
 import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
@@ -25,6 +26,7 @@ const selector = ({ context }) => {
   };
 };
 const ViewDetailsCard = (props) => {
+  const [opened, setOpened] = useState(false);
   const data = useNavigationActorSnapshot(selector);
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
@@ -33,20 +35,21 @@ const ViewDetailsCard = (props) => {
       position: "bottom-end",
       shadow: "xl",
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      trapFocus: true,
       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(true) }),
+        opened && /* @__PURE__ */ jsx(ViewDetailsCardDropdown, { data, onClose: () => setOpened(false) })
       ]
     }
   );
 };
-const ViewDetailsCardTrigger = ({ linksCount }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
+const ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
   UnstyledButton,
   {
     component: m.button,
@@ -55,6 +58,10 @@ const ViewDetailsCardTrigger = ({ linksCount }) => /* @__PURE__ */ jsx(Popover.T
       scale: 0.95,
       translateY: 1
     },
+    onClick: (e) => {
+      e.stopPropagation();
+      onOpen();
+    },
     className: cx(
       "group",
       hstack({
@@ -115,9 +122,12 @@ const ViewDetailsCardDropdown = ({
     tags,
     links,
     relativePath
-  }
+  },
+  onClose
 }) => {
   const diagram = useDiagram();
+  useOnDiagramEvent("paneClick", onClose);
+  useOnDiagramEvent("nodeClick", onClose);
   return /* @__PURE__ */ jsxs(
     Popover.Dropdown,
     {
@@ -128,9 +138,10 @@ const ViewDetailsCardDropdown = ({
           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",
@@ -147,7 +158,7 @@ const ViewDetailsCardDropdown = ({
       ),
       children: [
         /* @__PURE__ */ jsxs("section", { children: [
-          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", children: title }),
+          /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", lh: "sm", children: title }),
           /* @__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(
@@ -168,7 +179,7 @@ const ViewDetailsCardDropdown = ({
           /* @__PURE__ */ jsx(SectionHeader, { children: "Links" }),
           /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`)) })
         ] }),
-        description.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", my: "md", style: { userSelect: "none" }, children: "No description" }),
+        description.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", style: { userSelect: "none" }, children: "No description" }),
         description.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
           /* @__PURE__ */ jsx(SectionHeader, { children: "Description" }),
           /* @__PURE__ */ jsx(
@@ -208,6 +219,7 @@ const ViewBadge = ({
             overflow: "visible",
             px: "1",
             color: {
+              _dark: "mantine.colors.gray[4]",
               _light: "mantine.colors.gray[8]"
             }
           }),

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -24,13 +24,19 @@ const dialog = css({
 const card = 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]"
   },
-  border: `none`,
+  boxShadow: "md",
+  overflow: "hidden",
+  border: "none",
   backgroundImage: `
     linear-gradient(180deg,
       color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent),

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { HStack } from '@likec4/styles/jsx';
-import { RemoveScroll, Card, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Divider as Divider$1, ScrollAreaAutosize, UnstyledButton, ThemeIcon } from '@mantine/core';
+import { RemoveScroll, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Divider as Divider$1, ScrollAreaAutosize, UnstyledButton, Group, ThemeIcon } from '@mantine/core';
 import { useViewportSize, useSessionStorage } from '@mantine/hooks';
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
 import { useDragControls, useMotionValue, m } from 'motion/react';
@@ -14,7 +14,7 @@ import { elementIcon, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tab
 import { TabPanelDeployments } from './TabPanelDeployments.js';
 import { TabPanelRelationships } from './TabPanelRelationships.js';
 import { TabPanelStructure } from './TabPanelStructure.js';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useCurrentViewModel } from '../../likec4model/useCurrentViewModel.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { IconRenderer } from '../../context/IconRenderer.js';
 import { stopPropagation } from '../../utils/xyflow.js';
@@ -69,8 +69,7 @@ function ElementDetailsCard({
     defaultValue: "Properties"
   });
   const diagram = useDiagram();
-  const likec4model = useLikeC4Model();
-  const viewModel = likec4model.view(viewId);
+  const viewModel = useCurrentViewModel();
   const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn);
   const elementModel = viewModel.$model.element(fqn);
   const [viewsOf, otherViews] = pipe(
@@ -150,7 +149,7 @@ function ElementDetailsCard({
   }, 20);
   useTimeoutEffect(() => {
     setOpened(true);
-  }, 200);
+  }, 220);
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
@@ -185,10 +184,8 @@ function ElementDetailsCard({
         close();
       },
       children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsxs(
-        Card,
+        m.div,
         {
-          shadow: "md",
-          component: m.div,
           layout: true,
           layoutRoot: true,
           drag: true,
@@ -221,14 +218,13 @@ function ElementDetailsCard({
             }
           },
           style: {
-            // `style` prop in Mantine doesn't accept motion values
             width,
             height
           },
           children: [
             /* @__PURE__ */ jsxs("div", { className: cardHeader, onPointerDown: (e) => controls.start(e), 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: [
                   elementIcon$1,
                   /* @__PURE__ */ jsxs("div", { children: [
                     /* @__PURE__ */ jsx(
@@ -253,7 +249,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(
@@ -359,6 +355,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: true, children: /* @__PURE__ */ jsxs(Box, { 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(
@@ -494,12 +494,10 @@ function ElementMetata({
         children: entries(metadata).map(([key, value]) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cx(
-              "group",
-              css({
-                display: "contents"
-              })
-            ),
+            style: {
+              display: "contents"
+            },
+            className: "group",
             children: [
               /* @__PURE__ */ jsxs(
                 "div",
@@ -548,7 +546,7 @@ function ElementMetata({
                             fontSize: "sm",
                             padding: "xxs",
                             whiteSpace: "pre",
-                            fontFamily: "[var(--mantine-font-family-monospace)]",
+                            fontFamily: "mono",
                             userSelect: "all"
                           }),
                           children: value

package/dist/overlays/relationship-details/layout.d.ts

@@ -1,5 +1,6 @@
 import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, RichTextOrEmpty } from '@likec4/core/types';
 import { AnyAux, LikeC4ViewModel } from '@likec4/core/model';
+import { Except } from 'type-fest';
 import { RelationshipDetailsTypes } from './_types';
 import { RelationshipDetailsViewData } from './compute';
 export type LayoutResult = {
@@ -8,13 +9,13 @@ export type LayoutResult = {
     bounds: DiagramView['bounds'];
 };
 export declare namespace LayoutResult {
-    type Node = Omit<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+    type Node = Except<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
         description: RichTextOrEmpty;
         modelRef: Fqn;
         column: RelationshipDetailsTypes.Column;
         ports: RelationshipDetailsTypes.Ports;
     };
-    type Edge = Omit<DiagramEdge, 'relations' | 'description'> & {
+    type Edge = Except<DiagramEdge, 'relations' | 'description'> & {
         relationId: RelationId;
         sourceHandle: string;
         targetHandle: string;

package/dist/overlays/relationship-details/layout.js

@@ -1,6 +1,5 @@
 import { treeFromElements } from '@likec4/core/compute-view/relationships';
 import dagre from '@dagrejs/dagre';
-import { RichText } from '@likec4/core';
 import { ifind, DefaultMap, invariant } from '@likec4/core/utils';
 import { pipe, filter, mapToObj, find, map, tap, reduce, sortBy, prop } from 'remeda';
 
@@ -240,7 +239,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,

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { ActionIcon, Group } from '@mantine/core';
 import { useCallbackRef, useStateHistory } from '@mantine/hooks';
+import { useRafEffect } from '@react-hookz/web';
 import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'motion/react';
@@ -137,7 +138,7 @@ const RelationshipsBrowserInner = memo(() => {
       browser.navigateTo(historySubjectId);
     }
   }, [historySubjectId, browser]);
-  useEffect(() => {
+  useRafEffect(() => {
     browser.updateView(layouted);
   }, [layouted, browser]);
   const hasStepBack = current > 0;

package/dist/overlays/relationships-browser/layout.js

@@ -374,7 +374,7 @@ function layoutRelationshipsView(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,

package/dist/search/components/ElementsColumn.js

@@ -224,7 +224,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.description, lineClamp: 1, children: element.description.text || "No description" })
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.description, lineClamp: 1, children: element.summary.text || "No description" })
           ] }),
           /* @__PURE__ */ jsx(Text, { component: "div", className: cx(elementViewsCount, btn.descriptionColor), fz: "xs", children: views.length === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment, { children: [
             views.length,

package/dist/state/DiagramActorProvider.js

@@ -1,14 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCustomCompareEffect } from '@react-hookz/web';
+import { useCustomCompareEffect, useRafEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual, deepEqual } from 'fast-equals';
-import { useRef, useMemo, useEffect } from 'react';
+import { useRef, useMemo } from 'react';
 import { ErrorBoundary } from '../components/ErrorFallback.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorContextProvider } from '../hooks/safeContext.js';
-import { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 import { convertToXYFlow } from '../likec4diagram/convert-to-xyflow.js';
 import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext.js';
 import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
@@ -16,15 +15,6 @@ import { diagramMachine } from './diagram-machine.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
 import { useOnDiagramEvent } from '../hooks/useDiagram.js';
 
-const selectToggledFeatures = (state) => {
-  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
-    return {
-      ...state.context.toggledFeatures,
-      enableReadOnly: true
-    };
-  }
-  return state.context.toggledFeatures;
-};
 const selectDynamicViewVariant = (state) => {
   return state.context.dynamicViewVariant;
 };
@@ -91,23 +81,37 @@ function DiagramActorProvider({
     () => convertToXYFlow({ view, where, nodesSelectable, dynamicViewVariant }),
     [view, where, nodesSelectable, dynamicViewVariant]
   );
-  useEffect(() => {
+  useRafEffect(() => {
     actorRef.send({
       type: "update.view",
       ...update
     });
   }, [actorRef, update]);
-  const toggledFeatures = 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 }) }) }),
+    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef, children }) }),
     /* @__PURE__ */ jsx(DiagramActorEventListener, { actorRef })
   ] });
 }
-function CurrentViewModelProvider({ children }) {
-  const viewId = useCurrentViewId();
+const selectViewIdAndToggledFeatures = (state) => {
+  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
+    return {
+      viewId: state.context.view.id,
+      toggledFeatures: {
+        ...state.context.toggledFeatures,
+        enableReadOnly: true
+      }
+    };
+  }
+  return {
+    viewId: state.context.view.id,
+    toggledFeatures: state.context.toggledFeatures
+  };
+};
+function CurrentViewModelProvider({ children, actorRef }) {
+  const { viewId, toggledFeatures } = useSelector(actorRef, selectViewIdAndToggledFeatures, deepEqual);
   const likec4model = useLikeC4Model();
   const viewmodel = likec4model.findView(viewId);
-  return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children });
+  return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
 function DiagramActorEventListener({ actorRef }) {
   const {
@@ -115,20 +119,7 @@ function DiagramActorEventListener({ actorRef }) {
     onOpenSource
   } = useDiagramEventHandlers();
   useOnDiagramEvent("openSource", ({ params }) => 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]);
+  useOnDiagramEvent("navigateTo", ({ viewId }) => onNavigateTo?.(viewId));
   return null;
 }