@likec4/diagram 1.22.1 → 1.23.0

package/src/LikeC4Diagram.tsx

@@ -11,12 +11,11 @@ import {
 } from './context'
 import { LikeC4CustomColors } from './LikeC4CustomColors'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
-import { DiagramActor } from './likec4diagram/DiagramActor'
-import { DiagramUI } from './likec4diagram/DiagramUI'
 import type { Types } from './likec4diagram/types'
 import { useViewToNodesEdges } from './likec4diagram/useViewToNodesEdges'
 import { LikeC4DiagramXYFlow } from './likec4diagram/XYFlow'
 import { useLikeC4Model } from './likec4model'
+import { DiagramActorProvider } from './state/DiagramActorProvider'
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers
 export function LikeC4Diagram({
@@ -68,7 +67,6 @@ export function LikeC4Diagram({
   const xyNodesEdges = useViewToNodesEdges({
     view,
     where,
-    nodesDraggable,
     nodesSelectable,
   })
 
@@ -129,7 +127,7 @@ export function LikeC4Diagram({
                   fitView={fitView}
                   {...initialRef.current}
                 >
-                  <DiagramActor
+                  <DiagramActorProvider
                     input={{
                       view,
                       pannable,
@@ -142,7 +140,7 @@ export function LikeC4Diagram({
                       nodesSelectable={nodesSelectable}
                       background={background}
                     />
-                  </DiagramActor>
+                  </DiagramActorProvider>
                 </XYFlowProvider>
               </RootContainer>
             </DiagramEventHandlers>

package/src/base/BaseXYFlow.tsx

@@ -115,7 +115,8 @@ export const BaseXYFlow = <
       {...(!pannable && {
         selectionKeyCode: null,
       })}
-      onlyRenderVisibleElements={nodes.length > 75}
+      // TODO: benchmarks first
+      //onlyRenderVisibleElements={nodes.length > 75}
       elementsSelectable={nodesSelectable}
       nodesFocusable={nodesDraggable || nodesSelectable}
       edgesFocusable={false}

package/src/base/primitives/compound/CompoundTitle.css.ts

@@ -35,11 +35,6 @@ export const title = style({
   // paddingBottom: 6,
   // minHeight: 20,
   mixBlendMode: 'screen',
-  selectors: {
-    [`${whereLight} &`]: {
-      mixBlendMode: 'darken',
-    },
-  },
 })
 
 const iconSize = '20px'

package/src/context/DiagramEventHandlers.tsx

@@ -1,5 +1,5 @@
 import { useSyncedRef } from '@react-hookz/web'
-import { type PropsWithChildren, createContext, useContext, useMemo } from 'react'
+import { type PropsWithChildren, type RefObject, createContext, useContext, useMemo } from 'react'
 import { isFunction, mapToObj } from 'remeda'
 import type { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
 
@@ -21,9 +21,16 @@ const HandlerNames = [
   'onCanvasDblClick',
 ] as const
 
-const DiagramEventHandlersContext = createContext<RequiredOrNull<LikeC4DiagramEventHandlers>>(
-  mapToObj(HandlerNames, (name) => [name, null]),
-)
+type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers> & {
+  handlersRef: RefObject<LikeC4DiagramEventHandlers>
+}
+
+const DiagramEventHandlersContext = createContext<DiagramEventHandlersContextValue>({
+  ...mapToObj(HandlerNames, (name) => [name, null]),
+  handlersRef: {
+    current: {},
+  },
+})
 
 export function DiagramEventHandlers({
   handlers,
@@ -33,16 +40,19 @@ export function DiagramEventHandlers({
 
   const deps = HandlerNames.map((name) => isFunction(handlers[name]))
 
+  const value = useMemo((): DiagramEventHandlersContextValue => ({
+    ...mapToObj(HandlerNames, (name) => {
+      if (handlersRef.current[name]) {
+        // @ts-expect-error TODO: fix this
+        return [name, (...args: any[]) => handlersRef.current[name]?.(...args)]
+      }
+      return [name, null]
+    }),
+    handlersRef,
+  }), [handlersRef, ...deps])
+
   return (
-    <DiagramEventHandlersContext.Provider
-      value={useMemo(() =>
-        mapToObj(HandlerNames, (name) => {
-          if (handlersRef.current[name]) {
-            // @ts-expect-error TODO: fix this
-            return [name, (...args: any[]) => handlersRef.current[name]?.(...args)]
-          }
-          return [name, null]
-        }), [handlersRef, ...deps])}>
+    <DiagramEventHandlersContext.Provider value={value}>
       {children}
     </DiagramEventHandlersContext.Provider>
   )
@@ -51,3 +61,7 @@ export function DiagramEventHandlers({
 export function useDiagramEventHandlers() {
   return useContext(DiagramEventHandlersContext)
 }
+
+export function useDiagramEventHandlersRef() {
+  return useContext(DiagramEventHandlersContext).handlersRef
+}

package/src/context/DiagramFeatures.tsx

@@ -47,42 +47,29 @@ const validate = (features: EnabledFeatures) => {
     enableRelationshipDetails,
     enableRelationshipBrowser,
     enableSearch,
+    enableEdgeEditing,
     ...rest
   } = features
   if (!enableLikeC4Model) {
-    if (enableElementDetails) {
-      console.warn('enableElementDetails is ignored because requires LikeC4Model')
-      enableElementDetails = false
-    }
-    if (enableRelationshipDetails) {
-      console.warn('enableRelationshipDetails is ignored because requires enableLikeC4Model')
-      enableRelationshipDetails = false
-    }
-    if (enableRelationshipBrowser) {
-      console.warn('enableRelationshipBrowser is ignored because requires LikeC4Model')
-      enableRelationshipBrowser = false
-    }
-    if (enableSearch) {
-      console.warn('enableSearch is ignored because requires LikeC4Model')
-      enableSearch = false
-    }
+    enableElementDetails = false
+    enableRelationshipDetails = false
+    enableRelationshipBrowser = false
+    enableSearch = false
   }
 
   if (enableReadOnly) {
-    if (rest.enableEdgeEditing) {
-      console.warn('enableEdgeEditing is ignored because enabled ReadOnly')
-      rest.enableEdgeEditing = false
-    }
+    enableEdgeEditing = false
   }
 
   return {
-    ...rest,
     enableReadOnly,
     enableLikeC4Model,
     enableElementDetails,
     enableRelationshipDetails,
     enableRelationshipBrowser,
     enableSearch,
+    enableEdgeEditing,
+    ...rest,
   }
 }
 

package/src/hooks/index.ts

@@ -1,4 +1,3 @@
-export { useCurrentViewId } from './useCurrentViewId'
 export { useMantinePortalProps } from './useMantinePortalProps'
 export { useSetState } from './useSetState'
 export { useUpdateEffect } from './useUpdateEffect'

package/src/hooks/safeContext.tsx

@@ -0,0 +1,16 @@
+import { createContext, use } from 'react'
+import type { DiagramActorRef } from '../state/types'
+
+/**
+ * To improve experience with HMR, we use `createSafeContext` as a boundary for hoooks
+ */
+export const DiagramActorSafeContext = createContext<DiagramActorRef>(null as any)
+DiagramActorSafeContext.displayName = 'DiagramActorSafeContext'
+
+export const useDiagramActorRef = () => {
+  const ctx = use(DiagramActorSafeContext)
+  if (ctx === null) {
+    throw new Error('DiagramActorRef is not provided')
+  }
+  return ctx
+}

package/src/hooks/useCurrentViewId.ts

@@ -1,6 +1,6 @@
 import type { ViewId } from '@likec4/core'
-import type { DiagramContext } from '../likec4diagram/state/machine'
-import { useDiagramContext } from './useDiagramContext'
+import type { DiagramContext } from '../state/types'
+import { useDiagramContext } from './useDiagram'
 
 const selectViewId = (state: DiagramContext) => state.view.id
 export function useCurrentViewId(): ViewId {

package/src/hooks/useDiagram.ts

@@ -1,15 +1,21 @@
-import type { EdgeId, Fqn, NodeId, ViewId } from '@likec4/core'
+import { type DiagramView, type EdgeId, type Fqn, type NodeId, type ViewId } from '@likec4/core'
+import { useCallbackRef } from '@mantine/hooks'
+import { useSelector as useXstateSelector } from '@xstate/react'
+import { shallowEqual } from 'fast-equals'
 import { useMemo, useTransition } from 'react'
 import type { PartialDeep } from 'type-fest'
 import type { FeatureName } from '../context/DiagramFeatures'
-import { useDiagramActor } from '../hooks/useDiagramActor'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'
-import type { AlignmentMode } from '../likec4diagram/state/aligners'
-import { DiagramContext } from '../likec4diagram/state/machine'
 import type { Types } from '../likec4diagram/types'
+import type { AlignmentMode } from '../state/aligners'
+import type { DiagramActorSnapshot, DiagramContext, SyncLayoutActorRef, SyncLayoutActorSnapshot } from '../state/types'
+import { findDiagramEdge, findDiagramNode } from '../state/utils'
+import { useDiagramActorRef } from './safeContext'
+
+export { useDiagramActorRef }
 
 export function useDiagram() {
-  const actor = useDiagramActor()
+  const actor = useDiagramActorRef()
   const [, startTransition] = useTransition()
   return useMemo(() => ({
     send: actor.send,
@@ -50,11 +56,7 @@ export function useDiagram() {
         actor.send({ type: 'open.relationshipDetails', edgeId })
       })
     },
-    closeOverlay: () => {
-      startTransition(() => {
-        actor.send({ type: 'close.overlay' })
-      })
-    },
+
     updateNodeData: (nodeId: NodeId, data: PartialDeep<Types.NodeData>) => {
       actor.send({ type: 'update.nodeData', nodeId, data })
     },
@@ -73,7 +75,7 @@ export function useDiagram() {
      * @returns true if there was pending request to save layout
      */
     cancelSaveManualLayout: () => {
-      const syncState = actor.getSnapshot().context.syncLayoutActorRef.getSnapshot().value
+      const syncState = actor.getSnapshot().children.syncLayout?.getSnapshot().value
       actor.send({ type: 'saveManualLayout.cancel' })
       return syncState === 'pending' || syncState === 'paused'
     },
@@ -93,11 +95,13 @@ export function useDiagram() {
     /**
      * @warning Do not use in render phase
      */
-    currentView: () => actor.getSnapshot().context.view,
+    get currentView(): DiagramView {
+      return actor.getSnapshot().context.view
+    },
     /**
      * @warning Do not use in render phase
      */
-    getState: () => actor.getSnapshot(),
+    getSnapshot: () => actor.getSnapshot(),
     /**
      * @warning Do not use in render phase
      */
@@ -106,13 +110,13 @@ export function useDiagram() {
      * @warning Do not use in render phase
      */
     findDiagramNode: (xynodeId: string) => {
-      return DiagramContext.findDiagramNode(actor.getSnapshot().context, xynodeId)
+      return findDiagramNode(actor.getSnapshot().context, xynodeId)
     },
     /**
      * @warning Do not use in render phase
      */
     findDiagramEdge: (xyedgeId: string) => {
-      return DiagramContext.findDiagramEdge(actor.getSnapshot().context, xyedgeId)
+      return findDiagramEdge(actor.getSnapshot().context, xyedgeId)
     },
 
     startWalkthrough: () => {
@@ -132,3 +136,26 @@ export function useDiagram() {
     },
   }), [actor])
 }
+
+export function useDiagramActorSnapshot<T = unknown>(
+  selector: (state: DiagramActorSnapshot) => T,
+  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
+): T {
+  const actorRef = useDiagramActorRef()
+  return useXstateSelector(actorRef, useCallbackRef(selector), compare)
+}
+
+export function useDiagramSyncLayoutState<T = unknown>(
+  selector: (state: SyncLayoutActorSnapshot) => T,
+  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
+): T {
+  const syncLayoutActorRef = useDiagramActorSnapshot(s => s.context.syncLayoutActorRef as SyncLayoutActorRef)
+  return useXstateSelector(syncLayoutActorRef, useCallbackRef(selector), compare)
+}
+
+export function useDiagramContext<T = unknown>(
+  selector: (state: DiagramContext) => T,
+  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
+) {
+  return useDiagramActorSnapshot(useCallbackRef(s => selector(s.context)), compare)
+}

package/src/likec4diagram/DiagramUI.tsx

@@ -1,21 +1,24 @@
-import { IfEnabled } from '../context'
+import { useEnabledFeatures } from '../context'
+import { useDiagramActorSnapshot } from '../hooks/useDiagram'
 import { Overlays } from '../overlays/Overlays'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
 export function DiagramUI() {
+  const {
+    enableViewTitle,
+    enableNotations,
+    enableDynamicViewWalkthrough,
+  } = useEnabledFeatures()
+
+  const overlaysActorRef = useDiagramActorSnapshot(s => s.children.overlays)
+
   return (
     <>
       <Controls />
-      <Overlays />
-      <IfEnabled feature="ViewTitle">
-        <DiagramTitlePanel />
-      </IfEnabled>
-      <IfEnabled feature="Notations">
-        <NotationPanel />
-      </IfEnabled>
-      <IfEnabled feature="DynamicViewWalkthrough">
-        <DynamicViewWalkthrough />
-      </IfEnabled>
+      {overlaysActorRef && <Overlays overlaysActorRef={overlaysActorRef} />}
+      {enableViewTitle && <DiagramTitlePanel />}
+      {enableNotations && <NotationPanel />}
+      {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
     </>
   )
 }

package/src/likec4diagram/XYFlow.tsx

@@ -6,12 +6,11 @@ import { memo } from 'react'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
-import { useDiagram } from '../hooks/useDiagram'
-import { useDiagramContext } from '../hooks/useDiagramContext'
+import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
+import type { DiagramContext } from '../state/types'
 import { edgeTypes, nodeTypes } from './custom'
 import { DiagramUI } from './DiagramUI'
-import type { DiagramContext } from './state/machine'
 import type { Types } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
 
@@ -23,7 +22,7 @@ const selectXYProps = (ctx: DiagramContext) => ({
   zoomable: ctx.zoomable,
   fitViewPadding: ctx.fitViewPadding,
   enableFitView: ctx.features.enableFitView,
-  enableReadOnly: ctx.features.enableReadOnly,
+  enableReadOnly: ctx.features.enableReadOnly || ctx.toggledFeatures.enableReadOnly,
   ...(!ctx.features.enableFitView && {
     viewport: {
       x: -Math.min(ctx.view.bounds.x, 0),
@@ -146,7 +145,7 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({ background,
       {...enableFitView && {
         onViewportResize,
       }}
-      nodesDraggable={nodesDraggable}
+      nodesDraggable={notReadOnly && nodesDraggable}
       nodesSelectable={nodesSelectable}
       {...(notReadOnly && nodesDraggable && layoutConstraints)}
       {...props}>

package/src/likec4diagram/custom/edges/NotePopover.tsx

@@ -13,8 +13,7 @@ import { useDebouncedEffect } from '@react-hookz/web'
 import { type PropsWithChildren, useState } from 'react'
 import { isNonNull, isTruthy } from 'remeda'
 import { useMantinePortalProps } from '../../../hooks'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import { stopPropagation } from '../../../utils'
 import * as edgesCss from './NotePopover.css'
 

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -291,7 +291,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
   let renderLabel: undefined | ((props: any) => any)
   if (!isControlPointDragging) {
     const notes = props.data.notes
-    if (notes && isStepEdgeId(props.id) && diagram.getState().context.activeWalkthrough?.stepId === props.id) {
+    if (notes && isStepEdgeId(props.id) && diagram.getContext().activeWalkthrough?.stepId === props.id) {
       renderLabel = (props: any) => (
         <NotePopover notes={notes}>
           <div {...props} />

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -30,10 +30,9 @@ import { filter, isTruthy, map, partition, pipe } from 'remeda'
 import { Link } from '../../../components/Link'
 import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import { useLikeC4Model } from '../../../likec4model'
-import { DiagramContext } from '../../state/machine'
+import { findDiagramEdge, findDiagramNode } from '../../../state/utils'
 import * as css from './RelationshipsDropdownMenu.css'
 
 const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
@@ -62,9 +61,9 @@ export function RelationshipsDropdownMenu({
   disabled?: boolean | undefined
 }>) {
   const { diagramEdge, sourceNode, targetNode } = useDiagramContext(ctx => ({
-    diagramEdge: DiagramContext.findDiagramEdge(ctx, edgeId),
-    sourceNode: DiagramContext.findDiagramNode(ctx, source),
-    targetNode: DiagramContext.findDiagramNode(ctx, target),
+    diagramEdge: findDiagramEdge(ctx, edgeId),
+    sourceNode: findDiagramNode(ctx, source),
+    targetNode: findDiagramNode(ctx, target),
   }))
   const likec4model = useLikeC4Model(true)
   const diagram = useDiagram()
@@ -189,7 +188,7 @@ const Relationship = forwardRef<
   const diagram = useDiagram()
   const { enableNavigateTo } = useEnabledFeature('NavigateTo')
   const { onOpenSource } = useDiagramEventHandlers()
-  const viewId = diagram.currentView().id
+  const viewId = diagram.currentView.id
 
   const sourceId = getShortId(r, r.source.id, sourceNode)
   const targetId = getShortId(r, r.target.id, targetNode)

package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx

@@ -4,7 +4,7 @@ import { type NodeToolbarProps, NodeToolbar } from '@xyflow/react'
 import clsx from 'clsx'
 import type { ReactNode } from 'react'
 import type { Base } from '../../../../base'
-import { useDiagramContext } from '../../../../hooks/useDiagramContext'
+import { useDiagramContext } from '../../../../hooks/useDiagram'
 import { stopPropagation } from '../../../../utils/xyflow'
 import * as css from './styles.css'
 

package/src/likec4diagram/ui/controls/ChangeAutoLayoutButton.tsx

@@ -22,9 +22,8 @@ import { useDebouncedCallback } from '@react-hookz/web'
 import { IconLayoutDashboard } from '@tabler/icons-react'
 import { forwardRef, useState } from 'react'
 import { useDiagramEventHandlers } from '../../../context'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useDiagramContext } from '../../../hooks/useDiagramContext'
-import type { DiagramContext } from '../../state/machine'
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
+import type { DiagramContext } from '../../../state/types'
 import { ActionIcon, Tooltip } from './_shared'
 import * as css from './styles.css'
 

package/src/likec4diagram/ui/controls/Controls.tsx

@@ -5,9 +5,7 @@ import { LayoutGroup } from 'framer-motion'
 import { memo } from 'react'
 import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useDiagramSyncLayoutState } from '../../../hooks/useDiagramActor'
-import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useDiagram, useDiagramContext, useDiagramSyncLayoutState } from '../../../hooks/useDiagram'
 import { stopPropagation } from '../../../utils'
 import { LikeC4Search } from '../search/LikeC4Search'
 import { ActionIcon, Tooltip } from './_shared'
@@ -102,7 +100,7 @@ export const Controls = memo(() => {
       </Stack>
       <Group>
         {enableSearch && <LikeC4Search />}
-        {notReadOnly && <SyncLayoutBadge />}
+        {/* {notReadOnly && <SyncLayoutBadge />} */}
       </Group>
     </Group>
   )

package/src/likec4diagram/ui/controls/NavigationButtons.tsx

@@ -3,8 +3,7 @@ import { IconChevronRight } from '@tabler/icons-react'
 import { AnimatePresence, m } from 'framer-motion'
 
 import { IconChevronLeft } from '@tabler/icons-react'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import { ActionIcon } from './_shared'
 
 export const NavigationButtons = () => {

package/src/likec4diagram/ui/controls/ToggleReadonly.tsx

@@ -1,7 +1,6 @@
 import { IconLock, IconLockOpen2 } from '@tabler/icons-react'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useDiagramContext } from '../../../hooks/useDiagramContext'
-import type { DiagramContext } from '../../state/machine'
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
+import type { DiagramContext } from '../../../state/types'
 import { ActionIcon, Tooltip } from './_shared'
 
 const selector = (state: DiagramContext) => ({

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -4,20 +4,17 @@ import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { Link } from '../../../components/Link'
-import { useDiagramContext } from '../../../hooks/useDiagramContext'
-import type { DiagramContext } from '../../state/machine'
+import { useDiagramContext } from '../../../hooks/useDiagram'
 import * as css from './DiagramTitlePanel.css'
 
-const selector = (s: DiagramContext) => ({
-  id: s.view.id,
-  title: s.view.title ?? 'untitled',
-  description: s.view.description,
-  links: s.view.links,
-  isNotActiveWalkthrough: s.activeWalkthrough === null,
-})
-
 export function DiagramTitlePanel() {
-  const { id, title, description, links, isNotActiveWalkthrough } = useDiagramContext(selector)
+  const { id, title, description, links, isNotActiveWalkthrough } = useDiagramContext(s => ({
+    id: s.view.id,
+    title: s.view.title ?? 'untitled',
+    description: s.view.description,
+    links: s.view.links,
+    isNotActiveWalkthrough: s.activeWalkthrough === null,
+  }))
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'diagram-title-webview-collapsed',
     defaultValue: false,

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -24,10 +24,9 @@ import { memo, useState } from 'react'
 import { ceil, isNonNullish } from 'remeda'
 import { ElementShape } from '../../../base/primitives'
 import { useMantinePortalProps } from '../../../hooks'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import { useXYStore } from '../../../hooks/useXYFlow'
-import { DiagramContext } from '../../../likec4diagram/state/machine'
+import type { DiagramContext } from '../../../state/types'
 import { vars } from '../../../theme-vars'
 import * as css from './NotationPanel.css'
 

package/src/likec4diagram/ui/search/LikeC4Search.tsx

@@ -105,10 +105,7 @@ export function LikeC4Search() {
 
 function LikeC4SearchOverlay() {
   const close = useCloseSearch()
-  const focusTrapRef = useFocusTrap()
-  const { ref: forcusRef, focused } = useFocusWithin()
-
-  const ref = useMergedRef(forcusRef, focusTrapRef)
+  const ref = useFocusTrap()
 
   useWindowEvent(
     'keydown',

package/src/likec4diagram/ui/search/ViewsColum.tsx

@@ -20,7 +20,7 @@ import { IconStack2, IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { first } from 'remeda'
-import { useCurrentViewId } from '../../../hooks'
+import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
 import { emptyBoX } from './_shared.css'
 import { useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'

package/src/likec4diagram/ui/search/state.ts

@@ -66,7 +66,7 @@ export function useCloseSearchAndNavigateTo() {
       const fromNode = fromElementFqn
         ? diagram.getContext().view.nodes.find(n => DiagramNode.modelRef(n) === fromElementFqn)?.id
         : undefined
-      if (diagram.currentView().id === viewId && fromNode) {
+      if (diagram.currentView.id === viewId && fromNode) {
         diagram.focusNode(fromNode)
         return
       }

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.tsx

@@ -9,8 +9,7 @@ import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { isNonNull, isTruthy } from 'remeda'
 import { useXYStore } from '../../../hooks'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import * as css from './DynamicViewWalkthrough.css'
 
 export function DynamicViewWalkthrough() {

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -21,7 +21,6 @@ import type { Types } from './types'
 function viewToNodesEdge(opts: {
   view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__'>
   where: WhereOperator<string, string> | undefined
-  nodesDraggable: boolean
   nodesSelectable: boolean
 }): {
   xynodes: Types.Node[]
@@ -29,7 +28,6 @@ function viewToNodesEdge(opts: {
 } {
   const {
     view,
-    nodesDraggable: draggable,
     nodesSelectable: selectable,
   } = opts
   const isDynamicView = view.__ === 'dynamic',
@@ -95,7 +93,6 @@ function viewToNodesEdge(opts: {
 
     const base = {
       id,
-      draggable: draggable,
       selectable: selectable && node.kind !== ElementKind.Group,
       focusable: selectable && !isCompound,
       deletable: false,
@@ -281,7 +278,6 @@ export function useViewToNodesEdges({
 }: {
   view: DiagramView
   where: WhereOperator<string, string> | undefined
-  nodesDraggable: boolean
   nodesSelectable: boolean
 }) {
   return useDeepCompareMemo(() => {