@likec4/diagram 1.22.0 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -29,24 +29,14 @@
     },
     "./style.css": "./dist/style.css"
   },
-  "packageManager": "yarn@4.6.0",
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "build": "vite build",
-    "lint": "run -T eslint src/ --fix",
-    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
-    "test": "vitest run --no-isolate"
-  },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@likec4/core": "1.22.0",
-    "@mantine/vanilla-extract": "7.16.3",
+    "@mantine/vanilla-extract": "7.17.0",
     "@nanostores/react": "0.8.4",
     "@react-hookz/web": "^25.0.1",
     "@tabler/icons-react": "3.29.0",
     "@vanilla-extract/dynamic": "^2.1.2",
     "@xstate/react": "^5.0.2",
-    "@xstate/store": "^2.6.2",
     "@xyflow/react": "12.4.2",
     "@xyflow/system": "0.0.50",
     "bezier-js": "^6.1.4",
@@ -60,18 +50,16 @@
     "react-error-boundary": "^5.0.0",
     "remeda": "^2.20.1",
     "type-fest": "4.34.1",
-    "xstate": "^5.19.2"
+    "xstate": "^5.19.2",
+    "@likec4/core": "1.23.0"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.16.3",
-    "@mantine/hooks": "^7.16.3",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "@mantine/core": "7.17.0",
+    "@mantine/hooks": "7.17.0",
+    "react": "~19.0.0",
+    "react-dom": "~19.0.0"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.22.0",
-    "@mantine/core": "7.16.3",
-    "@mantine/hooks": "7.16.3",
     "@statelyai/inspect": "^0.4.0",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.7",
@@ -79,12 +67,19 @@
     "@types/react-dom": "~19.0.3",
     "@vanilla-extract/css": "^1.17.1",
     "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/vite-plugin": "^5.0.1",
     "@vitejs/plugin-react": "4.3.4",
-    "react": "~19.0.0",
-    "react-dom": "~19.0.0",
-    "typescript": "^5.7.3",
-    "vite": "5.4.14",
+    "typescript": "5.7.3",
+    "vite": "6.1.0",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.0.4"
+    "vitest": "^3.0.4",
+    "@likec4/tsconfig": "1.23.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
+    "lint": "run -T eslint src/ --fix",
+    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
+    "test": "vitest run --no-isolate"
   }
 }

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

@@ -28,7 +28,7 @@ const FeatureNames = [
    */
   'Vscode',
 ] as const
-type FeatureName = typeof FeatureNames[number]
+export type FeatureName = typeof FeatureNames[number]
 export type EnabledFeatures = {
   [P in `enable${FeatureName}`]: boolean
 }
@@ -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,14 +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 { useDiagramActor } from '../hooks/useDiagramActor'
+import type { FeatureName } from '../context/DiagramFeatures'
 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,
@@ -49,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 })
     },
@@ -72,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'
     },
@@ -92,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
      */
@@ -105,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: () => {
@@ -125,5 +130,32 @@ export function useDiagram() {
     stopWalkthrough: () => {
       actor.send({ type: 'walkthrough.end' })
     },
+
+    toggleFeature: (feature: FeatureName, forceValue?: boolean) => {
+      actor.send({ type: 'toggle.feature', feature, ...(forceValue !== undefined && { forceValue }) })
+    },
   }), [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,14 @@ 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),
+      y: -Math.min(ctx.view.bounds.y, 0),
+      zoom: 1,
+    },
+  }),
 })
 const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof selectXYProps>): boolean =>
   a.initialized === b.initialized &&
@@ -33,7 +39,8 @@ const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof
   a.enableFitView === b.enableFitView &&
   a.enableReadOnly === b.enableReadOnly &&
   shallowEqual(a.nodes, b.nodes) &&
-  shallowEqual(a.edges, b.edges)
+  shallowEqual(a.edges, b.edges) &&
+  shallowEqual(a.viewport, b.viewport)
 
 type Picked = EnforceOptional<
   Pick<
@@ -138,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'
@@ -16,6 +14,7 @@ import { LayoutDriftNotification } from './LayoutDriftNotification'
 import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
 import { NavigationButtons } from './NavigationButtons'
 import * as css from './styles.css'
+import { ToggleReadonly } from './ToggleReadonly'
 
 export const Controls = memo(() => {
   const { viewId, hasLayoutDrift, viewportChanged } = useDiagramContext(c => ({
@@ -78,6 +77,7 @@ export const Controls = memo(() => {
               </ActionIcon>
             </Tooltip>
           )}
+          {enableControls && <ToggleReadonly />}
           {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
           {enableControls && notReadOnly && (
             <>
@@ -100,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

@@ -0,0 +1,30 @@
+import { IconLock, IconLockOpen2 } from '@tabler/icons-react'
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
+import type { DiagramContext } from '../../../state/types'
+import { ActionIcon, Tooltip } from './_shared'
+
+const selector = (state: DiagramContext) => ({
+  visible: state.features.enableReadOnly !== true,
+  isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly,
+})
+
+export const ToggleReadonly = () => {
+  const { visible, isReadOnly } = useDiagramContext(selector)
+  const diagram = useDiagram()
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <Tooltip label={isReadOnly ? 'Enable editing' : 'Disable editing'}>
+      <ActionIcon
+        onClick={e => {
+          e.stopPropagation()
+          diagram.toggleFeature('ReadOnly')
+        }}>
+        {isReadOnly ? <IconLock /> : <IconLockOpen2 />}
+      </ActionIcon>
+    </Tooltip>
+  )
+}