@likec4/diagram 1.40.0 → 1.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -89,8 +89,8 @@
     "remeda": "^2.30.0",
     "type-fest": "^4.41.0",
     "xstate": "^5.20.2",
-    "@likec4/core": "1.40.0",
-    "@likec4/styles": "1.40.0"
+    "@likec4/core": "1.41.0",
+    "@likec4/styles": "1.41.0"
   },
   "peerDependencies": {
     "@pandacss/dev": "^1.3.0",
@@ -120,7 +120,7 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "3.2.4",
     "wireit": "0.14.12",
-    "@likec4/tsconfig": "1.40.0"
+    "@likec4/tsconfig": "1.41.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/panda.buildinfo.json

@@ -37,16 +37,12 @@
       "color]___[value:mantine.colors.dimmed]___[cond:&:is([data-position=\"left\"])",
       "userSelect]___[value:none]___[cond:&:is([data-position=\"left\"])",
       "pointerEvents]___[value:none]___[cond:&:is([data-position=\"left\"])",
-      "color]___[value:[inherit]]___[cond:&:is([data-position=\"left\"])<___>_groupHover",
+      "color]___[value:[var(--badge-color)]]___[cond:&:is([data-position=\"left\"])<___>_groupHover",
       "opacity]___[value:0.7]___[cond:&:is([data-position=\"left\"])<___>_groupHover",
-      "color]___[value:[inherit]]___[cond:& > a",
-      "cursor]___[value:pointer]___[cond:& > a",
-      "transition]___[value:fast]___[cond:& > a",
-      "opacity]___[value:0.7]___[cond:& > a",
-      "opacity]___[value:1]___[cond:& > a<___>_hover",
-      "textDecoration]___[value:none]___[cond:& > a",
-      "textDecoration]___[value:underline]___[cond:& > a<___>_hover",
       "stroke]___[value:2.5",
+      "opacity]___[value:0.7",
+      "textDecoration]___[value:none",
+      "textDecoration]___[value:underline]___[cond:_hover",
       "height]___[value:12",
       "width]___[value:12",
       "height]___[value:30px",
@@ -249,16 +245,17 @@
       "gap]___[value:md",
       "margin]___[value:xs",
       "padding]___[value:md",
-      "maxWidth]___[value:calc(100cqw - 32px)",
-      "minWidth]___[value:calc(100cqw - 50px)",
+      "paddingBottom]___[value:lg",
+      "maxWidth]___[value:calc(100cqw - 52px)",
+      "minWidth]___[value:200px",
       "maxHeight]___[value:calc(100cqh - 100px)",
       "overflow]___[value:auto",
       "overscrollBehavior]___[value:contain",
       "minWidth]___[value:400]___[cond:@/sm",
       "maxWidth]___[value:550]___[cond:@/sm",
       "maxWidth]___[value:700]___[cond:@/lg",
-      "marginBlock]___[value:md",
       "overflow]___[value:visible",
+      "color]___[value:mantine.colors.gray[4]]___[cond:_dark",
       "color]___[value:mantine.colors.gray[8]]___[cond:_light",
       "opacity]___[value:0.5",
       "marginInlineEnd]___[value:0.5",
@@ -331,6 +328,8 @@
       "--text-fz]___[value:{fontSizes.sm}",
       "--text-fz]___[value:{fontSizes.md}]___[cond:md",
       "paddingTop]___[value:xxs",
+      "maxWidth]___[value:calc(100cqw - 32px)",
+      "minWidth]___[value:calc(100cqw - 50px)",
       "boxSizing]___[value:border-box",
       "inset]___[value:0",
       "width]___[value:100vw",
@@ -341,6 +340,7 @@
       "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
       "backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
       "gap]___[value:lg",
+      "color]___[value:mantine.colors.text",
       "backgroundColor]___[value:mantine.colors.body",
       "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
       "border]___[value:none",
@@ -424,13 +424,15 @@
       "cursor]___[value:se-resize",
       "borderWidth]___[value:4px]___[cond:_hover",
       "borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
+      "alignItems]___[value:start",
+      "justifyContent]___[value:space-between",
       "marginBottom]___[value:sm",
-      "gap]___[value:6",
       "lineClamp]___[value:1",
       "gap]___[value:4",
       "marginTop]___[value:6",
       "stroke]___[value:1.6",
       "paddingTop]___[value:xs",
+      "gap]___[value:6",
       "gap]___[value:[4px 4px]",
       "paddingRight]___[value:xxs",
       "transitionProperty]___[value:all",
@@ -441,7 +443,7 @@
       "color]___[value:mantine.colors.defaultColor]___[cond:_groupHover",
       "background]___[value:mantine.colors.defaultHover]___[cond:_groupHover",
       "whiteSpace]___[value:pre",
-      "fontFamily]___[value:[var(--mantine-font-family-monospace)]",
+      "fontFamily]___[value:mono",
       "overscrollBehavior]___[value:none",
       "marginBottom]___[value:sm]___[cond:&[data-level='1']",
       "marginBottom]___[value:0",
@@ -665,7 +667,6 @@
       "top]___[value:[2rem]",
       "left]___[value:[50%]",
       "maxWidth]___[value:600px",
-      "minWidth]___[value:200px",
       "transform]___[value:translateX(-50%)",
       "zIndex]___[value:903",
       "marginTop]___[value:[32px]]___[cond:& + &",
@@ -795,7 +796,6 @@
       "marginBottom]___[value:xs",
       "height]___[value:sm",
       "paddingBlock]___[value:2",
-      "opacity]___[value:0.7",
       "flex]___[value:0 0 auto",
       "maxHeight]___[value:60",
       "right]___[value:0",

package/src/base/primitives/MarkdownBlock.tsx

@@ -45,6 +45,7 @@ export const MarkdownBlock = forwardRef<HTMLDivElement, MarkdownBlockProps>(({
   hideIfEmpty = false,
   emptyText = 'no content',
   className,
+  style,
   ...props
 }, ref) => {
   if (value.isEmpty && hideIfEmpty) {
@@ -67,6 +68,7 @@ export const MarkdownBlock = forwardRef<HTMLDivElement, MarkdownBlockProps>(({
         className,
       )}
       style={{
+        ...style,
         ...props.fontSize && {
           '--text-fz': `var(--font-sizes-${props.fontSize}, var(--font-sizes-md))`,
         },

package/src/components/Link.tsx

@@ -1,5 +1,6 @@
 import type { Link as LinkData } from '@likec4/core'
 import { css, cx } from '@likec4/styles/css'
+import { styled } from '@likec4/styles/jsx'
 import { type BadgeProps, ActionIcon, Badge, CopyButton } from '@mantine/core'
 import { IconCheck, IconCopy } from '@tabler/icons-react'
 import { forwardRef } from 'react'
@@ -72,29 +73,31 @@ export const Link = forwardRef<HTMLDivElement, Omit<BadgeProps, 'children' | 'cl
               userSelect: 'none',
               pointerEvents: 'none',
               _groupHover: {
-                color: '[inherit]',
+                color: '[var(--badge-color)]',
                 opacity: .7,
               },
             },
           }),
-          label: css({
-            '& > a': {
-              color: '[inherit]',
-              cursor: 'pointer',
-              transition: 'fast',
-              opacity: {
-                base: 0.7,
-                _hover: 1,
-              },
-              textDecoration: {
-                base: 'none',
-                _hover: 'underline',
-              },
-            },
-          }),
         }}
       >
-        <a href={url} target="_blank">
+        <styled.a
+          href={url}
+          target="_blank"
+          style={{
+            color: 'var(--badge-color)',
+            cursor: 'pointer',
+          }}
+          css={{
+            transition: 'fast',
+            opacity: {
+              base: 0.7,
+              _hover: 1,
+            },
+            textDecoration: {
+              base: 'none',
+              _hover: 'underline',
+            },
+          }}>
           {isGithub && (
             <GithubIcon
               height="12"
@@ -102,7 +105,7 @@ export const Link = forwardRef<HTMLDivElement, Omit<BadgeProps, 'children' | 'cl
               style={{ verticalAlign: 'middle', marginRight: '4px' }} />
           )}
           {isGithub ? url.replace(GITHUB_PREFIX, '') : url}
-        </a>
+        </styled.a>
       </Badge>
     )
   },

package/src/navigationpanel/controls/ViewDetailsCard.tsx

@@ -10,9 +10,10 @@ import {
 } from '@mantine/core'
 import { IconId, IconLink } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
+import { useState } from 'react'
 import { ElementTag, MarkdownBlock } from '../../base/primitives'
 import { Link } from '../../components/Link'
-import { useDiagram } from '../../hooks/useDiagram'
+import { useDiagram, useOnDiagramEvent } from '../../hooks/useDiagram'
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
 import type { NavigationPanelActorSnapshot } from '../actor'
 import { useNavigationActorSnapshot } from '../hooks'
@@ -32,6 +33,7 @@ const selector = ({ context }: NavigationPanelActorSnapshot) => {
 type ViewDetailsCardData = ReturnType<typeof selector>
 
 export const ViewDetailsCard = (props: PopoverProps) => {
+  const [opened, setOpened] = useState(false)
   const data = useNavigationActorSnapshot(selector)
   const portalProps = useMantinePortalProps()
 
@@ -40,20 +42,21 @@ export const ViewDetailsCard = (props: PopoverProps) => {
       position="bottom-end"
       shadow="xl"
       clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
-      trapFocus
       offset={{
         mainAxis: 4,
       }}
+      opened={opened}
+      onChange={setOpened}
       {...portalProps}
       {...props}
     >
-      <ViewDetailsCardTrigger linksCount={data.links.length} />
-      <ViewDetailsCardDropdown data={data} />
+      <ViewDetailsCardTrigger linksCount={data.links.length} onOpen={() => setOpened(true)} />
+      {opened && <ViewDetailsCardDropdown data={data} onClose={() => setOpened(false)} />}
     </Popover>
   )
 }
 
-const ViewDetailsCardTrigger = ({ linksCount }: { linksCount: number }) => (
+const ViewDetailsCardTrigger = ({ linksCount, onOpen }: { linksCount: number; onOpen: () => void }) => (
   <Popover.Target>
     <UnstyledButton
       component={m.button}
@@ -62,6 +65,10 @@ const ViewDetailsCardTrigger = ({ linksCount }: { linksCount: number }) => (
         scale: 0.95,
         translateY: 1,
       }}
+      onClick={e => {
+        e.stopPropagation()
+        onOpen()
+      }}
       className={cx(
         'group',
         hstack({
@@ -123,8 +130,13 @@ const ViewDetailsCardDropdown = ({
     links,
     relativePath,
   },
-}: { data: ViewDetailsCardData }) => {
+  onClose,
+}: { data: ViewDetailsCardData; onClose: () => void }) => {
   const diagram = useDiagram()
+
+  useOnDiagramEvent('paneClick', onClose)
+  useOnDiagramEvent('nodeClick', onClose)
+
   return (
     <Popover.Dropdown
       className={cx(
@@ -134,9 +146,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',
@@ -152,7 +165,7 @@ const ViewDetailsCardDropdown = ({
         }),
       )}>
       <section>
-        <Text component="div" fw={500} size="xl">{title}</Text>
+        <Text component="div" fw={500} size="xl" lh={'sm'}>{title}</Text>
         <HStack alignItems={'flex-start'} mt="1">
           <ViewBadge label="id" value={id} />
           {/* {relativePath && <ViewBadge label="source" value={relativePath} />} */}
@@ -179,7 +192,7 @@ const ViewDetailsCardDropdown = ({
         </section>
       )}
       {description.isEmpty && (
-        <Text component="div" fw={500} size="xs" c="dimmed" my="md" style={{ userSelect: 'none' }}>No description</Text>
+        <Text component="div" fw={500} size="xs" c="dimmed" style={{ userSelect: 'none' }}>No description</Text>
       )}
       {description.nonEmpty && (
         <section>
@@ -221,6 +234,7 @@ const ViewBadge = ({
             overflow: 'visible',
             px: '1',
             color: {
+              _dark: 'mantine.colors.gray[4]',
               _light: 'mantine.colors.gray[8]',
             },
           }),

package/src/overlays/element-details/ElementDetailsCard.css.ts

@@ -25,13 +25,19 @@ export const dialog = css({
 export 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/src/overlays/element-details/ElementDetailsCard.tsx

@@ -16,7 +16,6 @@ import {
   ActionIconGroup,
   Badge,
   Box,
-  Card,
   CloseButton,
   Divider as MantineDivider,
   Flex,
@@ -48,7 +47,7 @@ import { DiagramFeatures, IconRenderer, IfEnabled } from '../../context'
 import { useUpdateEffect } from '../../hooks'
 import { useDiagram } from '../../hooks/useDiagram'
 import type { OnNavigateTo } from '../../LikeC4Diagram.props'
-import { useLikeC4Model } from '../../likec4model'
+import { useCurrentViewModel } from '../../likec4model'
 import { stopPropagation } from '../../utils'
 import * as styles from './ElementDetailsCard.css'
 import { TabPanelDeployments } from './TabPanelDeployments'
@@ -115,8 +114,7 @@ export 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)
@@ -221,7 +219,7 @@ export function ElementDetailsCard({
    */
   useTimeoutEffect(() => {
     setOpened(true)
-  }, 200)
+  }, 220)
 
   return (
     <m.dialog
@@ -257,9 +255,7 @@ export function ElementDetailsCard({
       }}
     >
       <RemoveScroll forwardProps removeScrollBar={false}>
-        <Card
-          shadow="md"
-          component={m.div}
+        <m.div
           layout
           layoutRoot
           drag
@@ -292,13 +288,12 @@ export function ElementDetailsCard({
             },
           }}
           style={{
-            // `style` prop in Mantine doesn't accept motion values
-            width: width as any,
-            height: height as any,
+            width,
+            height,
           }}>
           <div className={styles.cardHeader} onPointerDown={e => controls.start(e)}>
-            <Group align="start" justify="space-between" gap={'sm'} mb={'sm'} wrap="nowrap">
-              <Group align="start" gap={'sm'} style={{ cursor: 'default' }} wrap="nowrap">
+            <HStack alignItems="start" justify="space-between" gap={'sm'} mb={'sm'} flexWrap="nowrap">
+              <HStack alignItems="start" gap={'sm'} style={{ cursor: 'default' }} flexWrap="nowrap">
                 {elementIcon}
                 <div>
                   <Text
@@ -312,15 +307,15 @@ export function ElementDetailsCard({
                     </Text>
                   )}
                 </div>
-              </Group>
+              </HStack>
               <CloseButton
                 size={'lg'}
                 onClick={e => {
                   e.stopPropagation()
                   close()
                 }} />
-            </Group>
-            <Group align="baseline" gap={'sm'} wrap="nowrap">
+            </HStack>
+            <HStack alignItems="baseline" gap={'sm'} flexWrap="nowrap">
               <div>
                 <SmallLabel>kind</SmallLabel>
                 <Badge
@@ -403,7 +398,7 @@ export function ElementDetailsCard({
                   </Tooltip>
                 )}
               </ActionIconGroup>
-            </Group>
+            </HStack>
           </div>
           <Tabs
             value={activeTab}
@@ -426,6 +421,12 @@ export function ElementDetailsCard({
             <TabsPanel value="Properties">
               <ScrollArea scrollbars="y" type="scroll" offsetScrollbars>
                 <Box className={styles.propertiesGrid} pt={'xs'}>
+                  {elementModel.hasSummary && (
+                    <>
+                      <PropertyLabel>summary</PropertyLabel>
+                      <MarkdownBlock value={elementModel.summary} />
+                    </>
+                  )}
                   <>
                     <PropertyLabel>description</PropertyLabel>
                     <MarkdownBlock
@@ -517,7 +518,7 @@ export function ElementDetailsCard({
             dragMomentum={false}
             onDrag={handleDrag}
             dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }} />
-        </Card>
+        </m.div>
       </RemoveScroll>
     </m.dialog>
   )
@@ -609,12 +610,10 @@ function ElementMetata({
         {entries(metadata).map(([key, value]) => (
           <div
             key={key}
-            className={cx(
-              'group',
-              css({
-                display: 'contents',
-              }),
-            )}
+            style={{
+              display: 'contents',
+            }}
+            className={'group'}
           >
             <div
               className={css({
@@ -651,7 +650,7 @@ function ElementMetata({
                     fontSize: 'sm',
                     padding: 'xxs',
                     whiteSpace: 'pre',
-                    fontFamily: '[var(--mantine-font-family-monospace)]',
+                    fontFamily: 'mono',
                     userSelect: 'all',
                   })}>
                   {value}

package/src/overlays/relationship-details/layout.ts

@@ -34,6 +34,7 @@ import {
   sortBy,
   tap,
 } from 'remeda'
+import type { Except } from 'type-fest'
 import type { RelationshipDetailsTypes } from './_types'
 import type { RelationshipDetailsViewData } from './compute'
 
@@ -218,14 +219,14 @@ export type LayoutResult = {
 }
 
 export namespace LayoutResult {
-  export type Node = Omit<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+  export type Node = Except<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
     description: RichTextOrEmpty
     modelRef: Fqn
     column: RelationshipDetailsTypes.Column
     ports: RelationshipDetailsTypes.Ports
     // existsInCurrentView: boolean
   }
-  export type Edge = Omit<DiagramEdge, 'relations' | 'description'> & {
+  export type Edge = Except<DiagramEdge, 'relations' | 'description'> & {
     relationId: RelationId
     sourceHandle: string
     targetHandle: string
@@ -402,7 +403,7 @@ export function layoutRelationshipDetails(
       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/src/overlays/relationships-browser/RelationshipsBrowser.tsx

@@ -1,6 +1,7 @@
 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 { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
 import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
@@ -183,7 +184,7 @@ const RelationshipsBrowserInner = memo(() => {
     }
   }, [historySubjectId, browser])
 
-  useEffect(() => {
+  useRafEffect(() => {
     browser.updateView(layouted)
   }, [layouted, browser])
 

package/src/overlays/relationships-browser/layout.ts

@@ -518,7 +518,7 @@ export function layoutRelationshipsView(
       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/src/search/components/ElementsColumn.tsx

@@ -279,7 +279,7 @@ function ElementTreeNode(
             </Tooltip>
           </Group>
           <Highlight component="div" highlight={searchTerms} className={btn.description!} lineClamp={1}>
-            {element.description.text || 'No description'}
+            {element.summary.text || 'No description'}
           </Highlight>
         </Box>
 

package/src/state/DiagramActorProvider.tsx

@@ -1,15 +1,14 @@
 import type { DiagramView, DynamicViewDisplayVariant, WhereOperator } from '@likec4/core/types'
-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 { deepEqual, shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { type PropsWithChildren, useMemo, useRef } from 'react'
 import { ErrorBoundary } from '../components/ErrorFallback'
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { useOnDiagramEvent } from '../custom'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
-import { useCurrentViewId } from '../hooks/useCurrentViewId'
 import type { ViewPadding } from '../LikeC4Diagram.props'
 import { convertToXYFlow } from '../likec4diagram/convert-to-xyflow'
 import type { Types } from '../likec4diagram/types'
@@ -19,16 +18,6 @@ import { type DiagramMachine, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import type { DiagramActorRef, DiagramActorSnapshot } from './types'
 
-const selectToggledFeatures = (state: DiagramActorSnapshot) => {
-  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
-    return {
-      ...state.context.toggledFeatures,
-      enableReadOnly: true,
-    }
-  }
-  return state.context.toggledFeatures
-}
-
 const selectDynamicViewVariant = (state: DiagramActorSnapshot) => {
   return state.context.dynamicViewVariant
 }
@@ -111,36 +100,49 @@ export function DiagramActorProvider({
     [view, where, nodesSelectable, dynamicViewVariant],
   )
 
-  useEffect(() => {
+  useRafEffect(() => {
     actorRef.send({
       type: 'update.view',
       ...update,
     })
   }, [actorRef, update])
 
-  const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual)
-
   return (
     <DiagramActorContextProvider value={actorRef}>
-      <DiagramFeatures overrides={toggledFeatures}>
-        <ErrorBoundary>
-          <CurrentViewModelProvider>
-            {children}
-          </CurrentViewModelProvider>
-        </ErrorBoundary>
-      </DiagramFeatures>
+      <ErrorBoundary>
+        <CurrentViewModelProvider actorRef={actorRef}>
+          {children}
+        </CurrentViewModelProvider>
+      </ErrorBoundary>
       <DiagramActorEventListener actorRef={actorRef} />
     </DiagramActorContextProvider>
   )
 }
 
-function CurrentViewModelProvider({ children }: PropsWithChildren) {
-  const viewId = useCurrentViewId()
+const selectViewIdAndToggledFeatures = (state: DiagramActorSnapshot) => {
+  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 }: PropsWithChildren<{ actorRef: DiagramActorRef }>) {
+  const { viewId, toggledFeatures } = useSelector(actorRef, selectViewIdAndToggledFeatures, deepEqual)
   const likec4model = useLikeC4Model()
   const viewmodel = likec4model.findView(viewId)
   return (
     <CurrentViewModelContext.Provider value={viewmodel}>
-      {children}
+      <DiagramFeatures overrides={toggledFeatures}>
+        {children}
+      </DiagramFeatures>
     </CurrentViewModelContext.Provider>
   )
 }
@@ -152,25 +154,7 @@ function DiagramActorEventListener({ actorRef }: { actorRef: DiagramActorRef })
   } = useDiagramEventHandlers()
 
   useOnDiagramEvent('openSource', ({ params }) => onOpenSource?.(params))
-
-  // onNavigateTo we defer the callback for better responsiveness
-  // (allowing animation to finish)
-  useEffect(() => {
-    if (!onNavigateTo) return
-    let frame: number
-
-    const subscription = actorRef.on('navigateTo', ({ viewId }) => {
-      cancelAnimationFrame(frame)
-      // Slightly defer callback for better responsiveness
-      frame = requestAnimationFrame(() => {
-        onNavigateTo(viewId)
-      })
-    })
-    return () => {
-      cancelAnimationFrame(frame)
-      subscription.unsubscribe()
-    }
-  }, [actorRef, onNavigateTo])
+  useOnDiagramEvent('navigateTo', ({ viewId }) => onNavigateTo?.(viewId))
 
   return null
 }