@likec4/diagram 1.1.1 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -40,18 +40,17 @@
       "./style.css": "./dist/style.css"
     }
   },
-  "packageManager": "yarn@4.2.2",
+  "packageManager": "yarn@4.3.0",
   "scripts": {
-    "typecheck": "tsc",
+    "typecheck": "tsc --noEmit",
     "prepack": "vite build --mode production",
-    "build:turbo": "run -T turbo build --filter='diagram'",
-    "build": "vite build --mode development && tsc -b",
     "lint": "run -T eslint src/ --fix",
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.1.1",
+    "@likec4/core": "1.2.1",
     "@react-hookz/web": "^24.0.4",
+    "@tabler/icons-react": "^3.0.0",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
@@ -60,35 +59,38 @@
     "zustand": "^4.5.2"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.9.2",
-    "@mantine/hooks": "^7.9.2",
+    "@mantine/core": "^7.10.1",
+    "@mantine/hooks": "^7.10.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@likec4/tsconfig": "1.2.1",
     "@lume/kiwi": "^0.4.3",
-    "@mantine/core": "^7.9.2",
-    "@mantine/hooks": "^7.9.2",
-    "@mantine/vanilla-extract": "^7.9.2",
+    "@mantine/core": "^7.10.1",
+    "@mantine/hooks": "^7.10.1",
+    "@mantine/vanilla-extract": "^7.10.1",
     "@total-typescript/ts-reset": "^0.5.1",
+    "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.4",
-    "@vanilla-extract/css": "^1.15.1",
-    "@vanilla-extract/dynamic": "^2.1.0",
-    "@vanilla-extract/esbuild-plugin": "^2.3.5",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vanilla-extract/css": "^1.15.2",
+    "@vanilla-extract/dynamic": "^2.1.1",
+    "@vanilla-extract/esbuild-plugin": "^2.3.6",
+    "@vitejs/plugin-react": "^4.3.1",
     "@xyflow/react": "^12.0.0-next",
+    "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "execa": "^9.1.0",
     "khroma": "^2.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "tilg": "^0.1.1",
     "type-fest": "^4.18.2",
     "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
-    "vite": "^5.2.11",
-    "vite-plugin-dts": "^3.8.1"
+    "vite": "5.3.0",
+    "vite-plugin-dts": "^3.9.1"
   }
 }

package/src/KeepAspectRatioContainer.tsx

@@ -27,7 +27,7 @@ export function KeepAspectRatioContainer({
         ? {
           ...style,
           aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
-          maxHeight: Math.ceil(height)
+          maxHeight: `var(--likec4-view-max-height, ${Math.ceil(height)}px)`
         }
         : style}>
       {children}

package/src/LikeC4Diagram.css.ts

@@ -2,6 +2,8 @@ import { globalStyle, style } from '@vanilla-extract/css'
 import { vars, xyvars } from './theme.css'
 
 export const keepAspectRatioContainer = style({
+  overflow: 'hidden',
+  position: 'relative',
   width: '100%',
   height: '100%',
   padding: 0

package/src/LikeC4Diagram.props.ts

@@ -11,8 +11,8 @@ import type {
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
-import type { XYBackgroundProps } from './xyflow/XYFlowBackground'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
+import type { XYBackground, XYBackgroundProps } from './xyflow/XYFlowBackground'
 
 export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
 
@@ -57,8 +57,7 @@ export namespace Changes {
   }
 }
 
-export type Change =
-  | Changes.ChangeElementStyle
+export type Change = Changes.ChangeElementStyle
 
 export type ChangeEvent = {
   changes: NonEmptyArray<Change>
@@ -131,7 +130,7 @@ export interface LikeC4DiagramProperties {
    * Background pattern
    * @default 'dots'
    */
-  background?: 'transparent' | 'solid' | XYBackgroundProps | undefined
+  background?: 'transparent' | 'solid' | XYBackground | undefined
 
   /**
    * Display hovercards with element links
@@ -144,6 +143,12 @@ export interface LikeC4DiagramProperties {
    * @default true
    */
   showDiagramTitle?: boolean | undefined
+
+  /**
+   * If Walkthrough for dynamic views should be enabled
+   * @default false
+   */
+  enableDynamicViewWalkthrough?: boolean | undefined
 }
 
 export interface LikeC4DiagramEventHandlers {

package/src/LikeC4Diagram.tsx

@@ -1,3 +1,4 @@
+import '@xyflow/react/dist/style.css'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { useRef } from 'react'
@@ -8,13 +9,13 @@ import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from '.
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
 import { WhenInitialized } from './state/WhenInitialized'
-import DiagramTitlePanel from './ui/DiagramTitlePanel'
-import OptionsPanel from './ui/OptionsPanel'
 import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
+import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
 import { SyncWithDiagram } from './xyflow/SyncWithDiagram'
 import type { XYFlowData } from './xyflow/types'
 import { XYFlow } from './xyflow/XYFlow'
+import { XYFlowInner } from './xyflow/XYFlowInner'
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers
 export function LikeC4Diagram({
@@ -28,9 +29,10 @@ export function LikeC4Diagram({
   nodesSelectable = !readonly,
   nodesDraggable = !readonly,
   background = 'dots',
-  controls = false,
+  controls = !readonly,
   showElementLinks = true,
   showDiagramTitle = true,
+  enableDynamicViewWalkthrough = true,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -44,6 +46,7 @@ export function LikeC4Diagram({
   onNodeClick,
   onNodeContextMenu
 }: LikeC4DiagramProps) {
+  console.log('LikeC4Diagram')
   const initialRef = useRef<{
     defaultNodes: XYFlowData['nodes']
     defaultEdges: XYFlowData['edges']
@@ -102,19 +105,22 @@ export function LikeC4Diagram({
                 pannable !== true && cssDisablePan,
                 background === 'transparent' && cssTransparentBg
               )}
-              background={background}
-              controls={controls}
               defaultNodes={initialRef.current.defaultNodes}
               defaultEdges={initialRef.current.defaultEdges}
             >
-              {readonly !== true && <OptionsPanel />}
-              {showDiagramTitle === true && <DiagramTitlePanel />}
+              <XYFlowInner
+                showDiagramTitle={showDiagramTitle}
+                enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+                background={background}
+                controls={controls}
+              />
             </XYFlow>
+            <WhenInitialized>
+              <SyncWithDiagram />
+              {fitView && <FitViewOnDiagramChange />}
+              {fitView && zoomable && <SelectEdgesOnNodeFocus />}
+            </WhenInitialized>
           </KeepAspectRatioContainer>
-          <WhenInitialized>
-            <SyncWithDiagram />
-            <FitViewOnDiagramChange />
-          </WhenInitialized>
         </DiagramContextProvider>
       </XYFlowProvider>
     </EnsureMantine>

package/src/StaticLikeC4Diagram.tsx

@@ -32,6 +32,7 @@ export function StaticLikeC4Diagram({
       background={background}
       showElementLinks
       showDiagramTitle={false}
+      enableDynamicViewWalkthrough={false}
       nodesSelectable={false}
       nodesDraggable={false}
       {...rest}

package/src/globals.css.ts

@@ -25,6 +25,7 @@ createGlobalTheme(`.${rootClassName}`, {
       }
     }
   },
+  filterDimmed: 'brightness(.6) grayscale(.8) opacity(.5) blur(1px)',
   compound: {
     font: vars.likec4.font,
     titleColor: vars.element.loContrast

package/src/index.ts

@@ -1,6 +1,3 @@
-import '@xyflow/react/dist/style.css'
-import './globals.css'
-
 export { LikeC4Diagram } from './LikeC4Diagram'
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 

package/src/state/DiagramContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, type PropsWithChildren, useRef } from 'react'
+import { createContext, type PropsWithChildren, useEffect, useRef } from 'react'
+import { hasSubObject, isIncludedIn } from 'remeda'
 import { useUpdateEffect } from '../hooks'
 import { useXYFlow } from '../xyflow/hooks'
 import { createDiagramStore, type DiagramInitialState } from './diagramStore'
@@ -18,20 +19,28 @@ export function DiagramContextProvider({ children, view, ...props }: PropsWithCh
     })
   }
 
-  useUpdateEffect(
-    () => store.current?.setState({ xyflow }, false, 'update xyflow'),
-    [xyflow],
-    Object.is
-  )
-
-  useUpdateEffect(
-    () => store.current?.getState().updateView(view),
-    [view]
+  useEffect(
+    () => {
+      if (store.current?.getState().xyflow !== xyflow) {
+        store.current?.setState({ xyflow }, false, 'update xyflow')
+      }
+    },
+    [xyflow]
   )
 
   useUpdateEffect(
-    () => store.current?.setState(props, false, 'update incoming props'),
-    [props]
+    () => {
+      if (!store.current) return
+      const state = store.current.getState()
+      if (state.view !== view) {
+        state.updateView(view)
+      }
+      if (!hasSubObject(state, props)) {
+        store.current.setState(props, false, 'update incoming props')
+      }
+      isIncludedIn
+    },
+    [view, props]
   )
 
   return (

package/src/state/diagramStore.ts

@@ -1,5 +1,6 @@
 import type {
   BorderStyle,
+  DiagramEdge,
   DiagramNode,
   DiagramView,
   ElementShape,
@@ -8,20 +9,21 @@ import type {
   ThemeColor,
   ViewID
 } from '@likec4/core'
-import { invariant, nonexhaustive } from '@likec4/core'
-import type { XYPosition } from '@xyflow/react'
+import { invariant, nonexhaustive, StepEdgeId } from '@likec4/core'
+import { getViewportForBounds, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { DEV } from 'esm-env'
-import { shallowEqual } from 'fast-equals'
+import { deepEqual, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
-import { entries } from 'remeda'
+import { entries, filter, map, prop } from 'remeda'
 import type { Exact, Except, RequiredKeysOf, Simplify } from 'type-fest'
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { Change, DiagramNodeWithNavigate, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
 import { MinZoom } from '../xyflow/const'
-import type { XYFlowInstance, XYFlowNode } from '../xyflow/types'
+import type { XYStoreApi } from '../xyflow/hooks'
+import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
 
 export type DiagramStore = {
   // Incoming props
@@ -38,6 +40,10 @@ export type DiagramStore = {
   // Internal state
   xyflow: XYFlowInstance
   initialized: boolean
+  xyflowSynced: boolean
+
+  // If Dynamic View
+  activeDynamicViewStep: number | null
 
   // This is XYFlow id's
   lastClickedNodeId: string | null
@@ -46,6 +52,9 @@ export type DiagramStore = {
   hoveredNodeId: string | null
   hoveredEdgeId: string | null
 
+  // id's of nodes / edges that
+  dimmed: ReadonlySet<string>
+
   // Stack of previous distinct views (unique id's)
   previousViews: DiagramView[]
 
@@ -62,6 +71,8 @@ export type DiagramStore = {
   viewportChanged: boolean
 } & Required<LikeC4DiagramEventHandlers>
 
+const StringSet = Set<string>
+
 export type DiagramInitialState = // Required properties
   & Pick<
     DiagramStore,
@@ -85,8 +96,12 @@ export type DiagramInitialState = // Required properties
   & LikeC4DiagramEventHandlers
 
 interface DiagramStoreActions {
+  isDynamicView: () => boolean
+
   updateView: (view: DiagramView) => void
 
+  focusOnNode: (nodeId: string) => void
+
   setHoveredNode: (nodeId: string | null) => void
   setHoveredEdge: (edgeId: string | null) => void
 
@@ -98,20 +113,26 @@ interface DiagramStoreActions {
   getElement(id: Fqn): DiagramNode | null
   triggerOnChange: (changes: NonEmptyArray<Change>) => void
   triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
-  fitDiagram: (centerNode?: XYFlowNode) => void
+  fitDiagram: (xyStore: XYStoreApi) => void
+
+  nextDynamicStep: (increment?: number) => void
+  stopDynamicView: () => void
 }
 
 export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>
 
 const DEFAULT_PROPS: Except<DiagramStore, RequiredKeysOf<DiagramInitialState> | 'xyflow'> = {
   initialized: false,
+  xyflowSynced: false,
   previousViews: [],
   viewportChanged: false,
+  activeDynamicViewStep: null,
   focusedNodeId: null,
   hoveredNodeId: null,
   hoveredEdgeId: null,
   lastClickedNodeId: null,
   lastClickedEdgeId: null,
+  dimmed: new StringSet(),
   lastOnNavigate: null,
   onChange: null,
   onNavigateTo: null,
@@ -130,7 +151,7 @@ const noReplace = false
 
 let storeDevId = 1
 
-const containsWithId = <T extends { id: string }>(arr: T[], id: string) => arr.some((x) => x.id === id)
+const EmptyStringSet: ReadonlySet<string> = new StringSet()
 
 export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props: T) {
   return createWithEqualityFn<
@@ -146,78 +167,139 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
           ...DEFAULT_PROPS,
           ...(props as CreateDiagramStore),
 
-          updateView: (view) => {
+          isDynamicView: () => {
+            return get().view?.__ === 'dynamic'
+          },
+
+          updateView: (nextView) => {
             let {
-              view: currentView,
+              dimmed,
+              xyflowSynced,
+              view: current,
               lastOnNavigate,
               previousViews,
               focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
+              activeDynamicViewStep,
               hoveredEdgeId,
               hoveredNodeId
             } = get()
 
-            if (shallowEqual(currentView, view)) {
+            if (shallowEqual(current, nextView)) {
+              if (!xyflowSynced) {
+                set({ xyflowSynced: true }, noReplace, 'updateView: xyflow synced')
+              }
               DEV && console.debug('store: skip updateView')
               return
             }
 
-            // Reset lastOnNavigate if the view is not the source or target view
-            if (lastOnNavigate && lastOnNavigate.toView !== view.id && lastOnNavigate.fromView !== view.id) {
-              lastOnNavigate = null
-            }
-
-            const isSameView = currentView.id === view.id
+            const isSameView = current.id === nextView.id
 
             if (isSameView) {
+              const nodeIds = new StringSet(nextView.nodes.map((n) => n.id))
+              const edgeIds = new StringSet(nextView.edges.map((e) => e.id))
               // Reset clicked/hovered node/edge if the node/edge is not in the new view
-              if (lastClickedNodeId && !containsWithId(view.nodes, lastClickedNodeId)) {
+              if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId)) {
                 lastClickedNodeId = null
               }
-              if (hoveredNodeId && !containsWithId(view.nodes, hoveredNodeId)) {
+              if (hoveredNodeId && !nodeIds.has(hoveredNodeId)) {
                 hoveredNodeId = null
               }
-              if (focusedNodeId && !containsWithId(view.nodes, focusedNodeId)) {
+              if (focusedNodeId && !nodeIds.has(focusedNodeId)) {
                 focusedNodeId = null
               }
-              if (lastClickedEdgeId && !containsWithId(view.edges, lastClickedEdgeId)) {
+              if (lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId)) {
                 lastClickedEdgeId = null
               }
-              if (hoveredEdgeId && !containsWithId(view.edges, hoveredEdgeId)) {
+              if (hoveredEdgeId && !edgeIds.has(hoveredEdgeId)) {
                 hoveredEdgeId = null
               }
+              if (activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep))) {
+                activeDynamicViewStep = null
+              }
+              xyflowSynced = deepEqual(current.nodes, nextView.nodes) && deepEqual(current.edges, nextView.edges)
+              if (!xyflowSynced) {
+                let nextDimmed = new StringSet([...dimmed].filter(id => nodeIds.has(id) || edgeIds.has(id)))
+                if (nextDimmed.size !== dimmed.size) {
+                  dimmed = nextDimmed
+                }
+              }
             } else {
+              // Reset lastOnNavigate if the view is not the source or target view
+              if (lastOnNavigate) {
+                if (lastOnNavigate.toView !== nextView.id && lastOnNavigate.fromView !== nextView.id) {
+                  lastOnNavigate = null
+                }
+              }
+
               // Reset hovered / clicked node/edge if the view is different
               lastClickedEdgeId = null
               lastClickedNodeId = null
               hoveredEdgeId = null
               hoveredNodeId = null
               focusedNodeId = null
+              activeDynamicViewStep = null
+              dimmed = EmptyStringSet
 
               // Update history stack (back button not implemented yet)
               previousViews = [
-                currentView,
-                ...previousViews.filter((v) => v.id !== view.id && v.id !== currentView.id)
+                current,
+                ...previousViews.filter((v) => v.id !== nextView.id && v.id !== current.id)
               ]
+              xyflowSynced = false
             }
 
             set(
               {
-                view,
+                view: nextView,
+                activeDynamicViewStep,
+                xyflowSynced,
                 lastOnNavigate,
                 previousViews,
                 lastClickedNodeId,
                 lastClickedEdgeId,
                 focusedNodeId,
                 hoveredEdgeId,
-                hoveredNodeId
+                hoveredNodeId,
+                dimmed
               },
               noReplace,
               'update-view'
             )
           },
 
+          focusOnNode: (nodeId) => {
+            const { focusedNodeId, view } = get()
+            if (nodeId !== focusedNodeId) {
+              const notDimmed = new StringSet([nodeId])
+              const dimmed = new StringSet()
+              for (const edge of view.edges) {
+                if (edge.source === nodeId || edge.target === nodeId) {
+                  notDimmed.add(edge.source)
+                  notDimmed.add(edge.target)
+                } else {
+                  dimmed.add(edge.id)
+                }
+              }
+              for (const node of view.nodes) {
+                if (notDimmed.has(node.id)) {
+                  continue
+                }
+                dimmed.add(node.id)
+              }
+              set(
+                {
+                  activeDynamicViewStep: null,
+                  focusedNodeId: nodeId,
+                  dimmed
+                },
+                noReplace,
+                `focus on node: ${nodeId}`
+              )
+            }
+          },
+
           setHoveredNode: (nodeId) => {
             if (nodeId !== get().hoveredNodeId) {
               set({ hoveredNodeId: nodeId }, noReplace, nodeId ? 'setHoveredNode' : 'unsetHoveredNode')
@@ -253,7 +335,8 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 {
                   focusedNodeId: null,
                   lastClickedNodeId: null,
-                  lastClickedEdgeId: null
+                  lastClickedEdgeId: null,
+                  dimmed: EmptyStringSet
                 },
                 noReplace,
                 'resetLastClicked'
@@ -386,22 +469,78 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             )
           },
 
-          fitDiagram: (centerNode) => {
-            const { fitViewPadding, xyflow, focusedNodeId } = get()
+          fitDiagram: (xyStore) => {
+            const { width, height, panZoom } = xyStore.getState()
+            const { fitViewPadding, view, focusedNodeId } = get()
+            const bounds = {
+              x: 0,
+              y: 0,
+              width: view.width,
+              height: view.height
+            }
+            const viewport = getViewportForBounds(bounds, width, height, MinZoom, 1, fitViewPadding)
+            panZoom?.setViewport(viewport, { duration: 400 })
+            if (!!focusedNodeId) {
+              set(
+                {
+                  focusedNodeId: null,
+                  dimmed: EmptyStringSet
+                },
+                noReplace,
+                'unfocus'
+              )
+            }
+          },
+
+          nextDynamicStep: (increment = 1) => {
+            const { view, activeDynamicViewStep, xyflow, fitViewPadding } = get()
+            invariant(view.__ === 'dynamic', 'view is not dynamic')
+            const nextStep = (activeDynamicViewStep ?? 0) + increment
+            const edgeId = StepEdgeId(nextStep)
+            const dimmed = new StringSet()
+            let edge: XYFlowEdge | null = null
+            for (const e of xyflow.getEdges()) {
+              if (e.id === edgeId) {
+                edge = e
+                continue
+              }
+              dimmed.add(e.id)
+            }
+            invariant(!!edge, `edge not found: ${edgeId}`)
+            const selected = [] as XYFlowNode[]
+            for (const n of xyflow.getNodes()) {
+              if (n.id === edge.source || n.id === edge.target) {
+                selected.push(n)
+                continue
+              }
+              dimmed.add(n.id)
+            }
             xyflow.fitView({
-              includeHiddenNodes: true,
-              duration: (centerNode && focusedNodeId) ? 300 : 400,
-              padding: fitViewPadding,
+              duration: 400,
+              maxZoom: 1,
               minZoom: MinZoom,
+              padding: fitViewPadding,
+              nodes: selected
+            })
+            set({
+              focusedNodeId: null,
+              activeDynamicViewStep: nextStep,
+              dimmed
+            })
+          },
+
+          stopDynamicView: () => {
+            const { xyflow, fitViewPadding } = get()
+            set({
+              activeDynamicViewStep: null,
+              dimmed: EmptyStringSet
+            })
+            xyflow.fitView({
+              duration: 400,
               maxZoom: 1,
-              ...(centerNode && { nodes: [centerNode] })
+              minZoom: MinZoom,
+              padding: fitViewPadding
             })
-            if (centerNode && focusedNodeId !== centerNode.id) {
-              set({ focusedNodeId: centerNode.id }, noReplace, 'focus node')
-            }
-            if (!centerNode && !!focusedNodeId) {
-              set({ focusedNodeId: null }, noReplace, 'unfocus')
-            }
           }
         }),
         {

package/src/theme.css.ts

@@ -4,6 +4,7 @@ export const vars = createGlobalThemeContract({
   default: {
     font: 'default-font-family'
   },
+  filterDimmed: 'filter-dimmed',
   likec4: {
     font: 'font-family',
     background: {