@likec4/diagram 1.21.1 → 1.22.1

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
 }

package/src/context/IconRenderer.tsx

@@ -1,5 +1,16 @@
+import type { ElementShape } from '@likec4/core'
+import {
+  type Icon,
+  type IconProps,
+  IconBrowser,
+  IconCylinder,
+  IconDeviceMobile,
+  IconRectangularPrism,
+  IconReorder,
+  IconUser,
+} from '@tabler/icons-react'
 import clsx from 'clsx'
-import { type ReactNode, createContext, useContext } from 'react'
+import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes, createContext, useContext } from 'react'
 import type { ElementIconRenderer } from '../LikeC4Diagram.props'
 
 const IconRendererContext = createContext<ElementIconRenderer | null>(null)
@@ -43,3 +54,45 @@ export function IconRenderer({
     </div>
   )
 }
+
+const ShapeIcons = {
+  browser: IconBrowser,
+  cylinder: IconCylinder,
+  mobile: IconDeviceMobile,
+  person: IconUser,
+  queue: IconReorder,
+  rectangle: IconRectangularPrism,
+  storage: IconCylinder,
+} satisfies Record<ElementShape, ForwardRefExoticComponent<IconProps & RefAttributes<Icon>>>
+
+export function IconOrShapeRenderer({
+  element,
+  className,
+}: {
+  element: {
+    id: string
+    title: string
+    shape: ElementShape
+    icon?: string | null | undefined
+  }
+  className: string
+}) {
+  const icon = IconRenderer({
+    element,
+    className,
+  })
+  if (icon) {
+    return icon
+  }
+  const ShapeIcon = ShapeIcons[element.shape]
+  return (
+    <div
+      className={clsx(
+        className,
+        'likec4-shape-icon',
+      )}
+    >
+      <ShapeIcon />
+    </div>
+  )
+}

package/src/globals.css.ts

@@ -7,8 +7,6 @@ import { mantine, vars, whereDark } from './theme-vars'
 export const rootClassName = 'likec4-diagram-root'
 
 globalStyle(`.${rootClassName}`, {
-  containerName: 'likec4-diagram-root',
-  containerType: 'size',
   overflow: 'hidden',
   position: 'relative',
   width: '100%',

package/src/hooks/useDiagram.ts

@@ -1,6 +1,7 @@
 import type { EdgeId, Fqn, NodeId, ViewId } from '@likec4/core'
 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'
@@ -125,5 +126,9 @@ export function useDiagram() {
     stopWalkthrough: () => {
       actor.send({ type: 'walkthrough.end' })
     },
+
+    toggleFeature: (feature: FeatureName, forceValue?: boolean) => {
+      actor.send({ type: 'toggle.feature', feature, ...(forceValue !== undefined && { forceValue }) })
+    },
   }), [actor])
 }

package/src/likec4diagram/DiagramActor.tsx

@@ -2,11 +2,12 @@ import type { ViewId } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useStoreApi } from '@xyflow/react'
 import { type PropsWithChildren, useEffect } from 'react'
-import { useDiagramEventHandlers, useEnabledFeatures } from '../context'
+import { DiagramFeatures, useDiagramEventHandlers, useEnabledFeatures } from '../context'
 import { useDiagramActor } from '../hooks/useDiagramActor'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import { LikeC4ViewMachineContextProvider } from './state/actorContext'
 // import { useInspector } from './state/inspector'
+import { useDiagramContext } from '../hooks/useDiagramContext'
 import { type Input, diagramMachine } from './state/machine'
 import { syncManualLayoutActor } from './state/syncManualLayoutActor'
 import type { Types } from './types'
@@ -54,7 +55,9 @@ export function DiagramActor({ input, children }: PropsWithChildren<{ input: Act
         }}
       >
         <SyncStore input={input} />
-        {children}
+        <DiagramActorToggledFeatures>
+          {children}
+        </DiagramActorToggledFeatures>
       </LikeC4ViewMachineContextProvider>
     )
   )
@@ -77,3 +80,13 @@ const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs } }: { input: Ac
 
   return null
 }
+
+function DiagramActorToggledFeatures({ children }: PropsWithChildren) {
+  const toggledFeatures = useDiagramContext(s => s.toggledFeatures)
+  return (
+    <DiagramFeatures
+      overrides={toggledFeatures}>
+      {children}
+    </DiagramFeatures>
+  )
+}

package/src/likec4diagram/DiagramUI.tsx

@@ -1,5 +1,4 @@
 import { IfEnabled } from '../context'
-import { LikeC4Search } from '../LikeC4Search'
 import { Overlays } from '../overlays/Overlays'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
@@ -8,9 +7,6 @@ export function DiagramUI() {
     <>
       <Controls />
       <Overlays />
-      <IfEnabled feature="Search">
-        <LikeC4Search />
-      </IfEnabled>
       <IfEnabled feature="ViewTitle">
         <DiagramTitlePanel />
       </IfEnabled>

package/src/likec4diagram/XYFlow.tsx

@@ -2,6 +2,7 @@ import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
+import { memo } from 'react'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
@@ -9,6 +10,7 @@ import { useDiagram } from '../hooks/useDiagram'
 import { useDiagramContext } from '../hooks/useDiagramContext'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import { edgeTypes, nodeTypes } from './custom'
+import { DiagramUI } from './DiagramUI'
 import type { DiagramContext } from './state/machine'
 import type { Types } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
@@ -22,6 +24,13 @@ const selectXYProps = (ctx: DiagramContext) => ({
   fitViewPadding: ctx.fitViewPadding,
   enableFitView: ctx.features.enableFitView,
   enableReadOnly: ctx.features.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 &&
@@ -31,7 +40,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<
@@ -43,7 +53,7 @@ type Picked = EnforceOptional<
 >
 export type LikeC4DiagramXYFlowProps = Required<Picked>
 
-export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlowProps) => {
+export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({ background, nodesDraggable, nodesSelectable }) => {
   const diagram = useDiagram()
   const {
     initialized,
@@ -80,10 +90,10 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       onNodesChange={useCallbackRef((changes) => {
-        diagram.send({ type: 'xyflow.applyNodeChages', changes })
+        diagram.send({ type: 'xyflow.applyNodeChanges', changes })
       })}
       onEdgesChange={useCallbackRef((changes) => {
-        diagram.send({ type: 'xyflow.applyEdgeChages', changes })
+        diagram.send({ type: 'xyflow.applyEdgeChanges', changes })
       })}
       background={initialized ? background : 'transparent'}
       // Fitview is handled in onInit
@@ -105,6 +115,7 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
       })}
       onDoubleClick={useCallbackRef(e => {
         e.stopPropagation()
+        e.preventDefault()
         diagram.send({ type: 'xyflow.paneDblClick' })
         onCanvasDblClick?.(e as any)
       })}
@@ -115,34 +126,31 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
       onInit={useCallbackRef((instance) => {
         diagram.send({ type: 'xyflow.init', instance })
       })}
-      {...onNodeContextMenu && {
-        onNodeContextMenu: useCallbackRef((event, node) => {
-          const diagramNode = nonNullable(
-            diagram.findDiagramNode(node.id as NodeId),
-            `diagramNode ${node.id} not found`,
-          )
-          onNodeContextMenu(diagramNode, event)
-        }),
-      }}
-      {...onEdgeContextMenu && {
-        onEdgeContextMenu: useCallbackRef((event, edge) => {
-          const diagramEdge = nonNullable(
-            diagram.findDiagramEdge(edge.id as EdgeId),
-            `diagramEdge ${edge.id} not found`,
-          )
-          onEdgeContextMenu(diagramEdge, event)
-        }),
-      }}
-      {...onCanvasContextMenu && {
-        onPaneContextMenu: useCallbackRef((event) => {
-          onCanvasContextMenu(event as any)
-        }),
-      }}
+      onNodeContextMenu={useCallbackRef((event, node) => {
+        const diagramNode = nonNullable(
+          diagram.findDiagramNode(node.id as NodeId),
+          `diagramNode ${node.id} not found`,
+        )
+        onNodeContextMenu?.(diagramNode, event)
+      })}
+      onEdgeContextMenu={useCallbackRef((event, edge) => {
+        const diagramEdge = nonNullable(
+          diagram.findDiagramEdge(edge.id as EdgeId),
+          `diagramEdge ${edge.id} not found`,
+        )
+        onEdgeContextMenu?.(diagramEdge, event)
+      })}
+      onPaneContextMenu={useCallbackRef((event) => {
+        onCanvasContextMenu?.(event as any)
+      })}
       {...enableFitView && {
         onViewportResize,
       }}
-      {...(notReadOnly && rest.nodesDraggable && layoutConstraints)}
-      {...props}
-      {...rest} />
+      nodesDraggable={nodesDraggable}
+      nodesSelectable={nodesSelectable}
+      {...(notReadOnly && nodesDraggable && layoutConstraints)}
+      {...props}>
+      <DiagramUI />
+    </BaseXYFlow>
   )
-}
+}, shallowEqual)

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

@@ -27,7 +27,7 @@ import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@
 import clsx from 'clsx'
 import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
-import { Link } from '../../../base/Link'
+import { Link } from '../../../components/Link'
 import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
@@ -127,6 +127,7 @@ export function RelationshipsDropdownMenu({
       closeOnClickOutside
       clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
       closeOnEscape
+      keepMounted={false}
       closeOnItemClick={false}
       disabled={disabled}
       position="bottom-start"

package/src/likec4diagram/state/assign.ts

@@ -321,7 +321,7 @@ export function resetEdgeControlPoints({ context }: ActionArg): Partial<DiagramC
     }
 
     // Edge is a loop
-    if (source == target) {
+    if (source === target) {
       const loopSize = 80
       const centerOfTopBoundary = new VectorImpl(0, source.height || 0)
         .mul(-0.5)

package/src/likec4diagram/state/machine.ts

@@ -4,7 +4,6 @@ import {
   type EdgeId,
   type Fqn,
   type NodeId,
-  type RelationId,
   type StepEdgeId,
   type ViewChange,
   type ViewId,
@@ -42,7 +41,7 @@ import {
 } from 'xstate'
 import { MinZoom } from '../../base/const'
 import type { EnabledFeatures } from '../../context'
-import { AllDisabled } from '../../context/DiagramFeatures'
+import { type FeatureName, AllDisabled } from '../../context/DiagramFeatures'
 import type { OpenSourceParams } from '../../LikeC4Diagram.props'
 import { relationshipDetailsActor } from '../../overlays/relationship-details/actor'
 import { relationshipsBrowserActor } from '../../overlays/relationships-browser/actor'
@@ -87,8 +86,12 @@ export interface Input {
   fitViewPadding: number
 }
 
+type ToggledFeatures = Partial<EnabledFeatures>
+
 export interface DiagramContext extends Input {
   features: EnabledFeatures
+  // This is used to override features from props
+  toggledFeatures: ToggledFeatures
   initialized: boolean
   viewport: Viewport
   viewportChangedManually: boolean
@@ -136,8 +139,8 @@ export namespace DiagramContext {
 export type Events =
   | HotKeyEvent
   | { type: 'xyflow.init'; instance: ReactFlowInstance<Types.Node, Types.Edge> }
-  | { type: 'xyflow.applyNodeChages'; changes: NodeChange<Types.Node>[] }
-  | { type: 'xyflow.applyEdgeChages'; changes: EdgeChange<Types.Edge>[] }
+  | { type: 'xyflow.applyNodeChanges'; changes: NodeChange<Types.Node>[] }
+  | { type: 'xyflow.applyEdgeChanges'; changes: EdgeChange<Types.Edge>[] }
   | { type: 'xyflow.viewportMoved'; viewport: Viewport; manually: boolean }
   | { type: 'xyflow.nodeClick'; node: Types.Node }
   | { type: 'xyflow.edgeClick'; edge: Types.Edge }
@@ -166,6 +169,7 @@ export type Events =
   | { type: 'walkthrough.start'; stepId?: StepEdgeId }
   | { type: 'walkthrough.step'; direction: 'next' | 'previous' }
   | { type: 'walkthrough.end' }
+  | { type: 'toggle.feature'; feature: FeatureName; forceValue?: boolean }
 
 export type ActionArg = { context: DiagramContext; event: Events }
 
@@ -307,12 +311,24 @@ export const diagramMachine = setup({
         })
       })
     },
+
+    'updateFeatures': assign(({ event }) => {
+      assertEvent(event, 'update.features')
+      return {
+        features: {
+          ...event.features,
+        },
+      }
+    }),
   },
 }).createMachine({
   initial: 'initializing',
   context: ({ input, self, spawn }) => ({
     ...input,
     features: { ...AllDisabled },
+    toggledFeatures: {
+      enableReadOnly: true,
+    },
     initialized: false,
     viewportChangedManually: false,
     lastOnNavigate: null,
@@ -634,7 +650,7 @@ export const diagramMachine = setup({
         pending: {
           entry: enqueueActions(({ enqueue }) => {
             enqueue.sendTo(c => c.context.syncLayoutActorRef, { type: 'stop' })
-            enqueue.stopChild('layout')
+            enqueue.stopChild('syncLayout')
             enqueue({
               type: 'trigger:NavigateTo',
               params: ({ context }) => ({
@@ -657,15 +673,16 @@ export const diagramMachine = setup({
                       },
                     },
                   })
+                  enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 80 })
                 } else {
                   enqueue({
                     type: 'xyflow:setViewportCenter',
                     params: getBBoxCenter(event.view.bounds),
                   })
+                  enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
                 }
                 enqueue.assign(updateNavigationHistory)
                 enqueue.assign(mergeXYNodesEdges)
-                enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 75 })
               }),
               target: 'done',
             },
@@ -765,12 +782,12 @@ export const diagramMachine = setup({
     },
   },
   on: {
-    'xyflow.applyNodeChages': {
+    'xyflow.applyNodeChanges': {
       actions: assign({
         xynodes: ({ context, event }) => applyNodeChanges(event.changes, context.xynodes),
       }),
     },
-    'xyflow.applyEdgeChages': {
+    'xyflow.applyEdgeChanges': {
       actions: assign({
         xyedges: ({ context, event }) => applyEdgeChanges(event.changes, context.xyedges),
       }),
@@ -838,17 +855,19 @@ export const diagramMachine = setup({
                   },
                 },
               })
+              enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 80 })
             } else {
               enqueue({
                 type: 'xyflow:setViewportCenter',
                 params: getBBoxCenter(event.view.bounds),
               })
+              enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
             }
           } else {
             enqueue.sendTo(c => c.context.syncLayoutActorRef, { type: 'synced' })
-          }
-          if (isAnotherView || !context.viewportChangedManually) {
-            enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 90 })
+            if (!context.viewportChangedManually) {
+              enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 50 })
+            }
           }
           enqueue.assign(mergeXYNodesEdges)
           enqueue.assign({
@@ -861,9 +880,7 @@ export const diagramMachine = setup({
       actions: assign(({ event }) => ({ ...event.inputs })),
     },
     'update.features': {
-      actions: assign({
-        features: ({ event }) => event.features,
-      }),
+      actions: 'updateFeatures',
     },
     'update.nodeData': {
       actions: assign(updateNodeData),
@@ -919,6 +936,15 @@ export const diagramMachine = setup({
       guard: 'is dynamic view',
       target: '.walkthrough',
     },
+    'toggle.feature': {
+      actions: assign({
+        toggledFeatures: ({ context, event }) => ({
+          ...context.toggledFeatures,
+          [`enable${event.feature}`]: event.forceValue ??
+            !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`]),
+        }),
+      }),
+    },
   },
   exit: [
     stopChild('layout'),

package/src/likec4diagram/state/syncManualLayoutActor.ts

@@ -1,5 +1,5 @@
 import type { ViewChange, ViewId } from '@likec4/core'
-import { boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
+import { type Rect, boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
 import { hasAtLeast, reduce } from 'remeda'
 import {
   type ActorRef,
@@ -132,12 +132,7 @@ function createViewChange(parentContext: Machine.DiagramContext): ViewChange.Sav
 
   const { nodeLookup } = xystore.getState()
   const movedNodes = new Set<string>()
-  let bounds = {
-    x: 0,
-    y: 0,
-    width: 1,
-    height: 1,
-  }
+  let bounds: Rect | undefined
 
   const nodes = reduce([...nodeLookup.values()], (acc, node) => {
     const dimensions = getNodeDimensions(node)
@@ -154,7 +149,7 @@ function createViewChange(parentContext: Machine.DiagramContext): ViewChange.Sav
       width: Math.ceil(dimensions.width),
       height: Math.ceil(dimensions.height),
     }
-    bounds = getBoundsOfRects(bounds, rect)
+    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect
     return acc
   }, {} as ViewChange.SaveManualLayout['layout']['nodes'])
 
@@ -202,10 +197,12 @@ function createViewChange(parentContext: Machine.DiagramContext): ViewChange.Sav
       x2: Math.ceil(Math.max(...allX)),
       y2: Math.ceil(Math.max(...allY)),
     })
-    bounds = getBoundsOfRects(bounds, rect)
+    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect
     return acc
   }, {} as ViewChange.SaveManualLayout['layout']['edges'])
 
+  bounds ??= view.bounds
+
   return {
     op: 'save-manual-layout',
     layout: {

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

@@ -1,20 +1,22 @@
-import { ActionIconGroup, Badge, Loader, Stack } from '@mantine/core'
-import { openSpotlight } from '@mantine/spotlight'
-import { IconFileSymlink, IconFocusCentered, IconSearch } from '@tabler/icons-react'
+import { ActionIconGroup, Badge, Group, Loader, Stack } from '@mantine/core'
+import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
 import { clsx } from 'clsx'
+import { LayoutGroup } from 'framer-motion'
 import { memo } from 'react'
-import { IfNotEnabled, useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
+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 { stopPropagation } from '../../../utils'
+import { LikeC4Search } from '../search/LikeC4Search'
 import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
 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 => ({
@@ -25,41 +27,47 @@ export const Controls = memo(() => {
   const diagram = useDiagram()
   const {
     onOpenSource,
+    onBurgerMenuClick,
   } = useDiagramEventHandlers()
   const {
     enableControls,
     enableSearch,
     enableNavigationButtons,
     enableReadOnly,
-    enableEdgeEditing,
     enableVscode,
   } = useEnabledFeatures()
   const notReadOnly = !enableReadOnly
   const portalProps = useMantinePortalProps()
+
   return (
-    <>
-      <Stack
-        className={clsx(
-          'react-flow__panel',
-          css.panel,
-          'likec4-top-left-panel',
-        )}
-        align="flex-start"
-        onClick={stopPropagation}
-        gap={'xs'}>
-        {enableNavigationButtons && <NavigationButtons />}
-        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
-          {enableControls && enableSearch && (
-            <Tooltip label="Search (Ctrl+F or ⌘+F)" {...portalProps}>
+    <Group
+      align="flex-start"
+      className={clsx(
+        'react-flow__panel',
+        css.panel,
+        'likec4-top-left-panel',
+      )}
+      gap="xs"
+      onClick={stopPropagation}
+    >
+      <Stack align="flex-start" gap="xs">
+        <LayoutGroup>
+          <Group
+            className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
+            gap={'xs'}>
+            {onBurgerMenuClick && (
               <ActionIcon
                 onClick={e => {
                   e.stopPropagation()
-                  openSpotlight()
+                  onBurgerMenuClick()
                 }}>
-                <IconSearch />
+                <IconMenu2 />
               </ActionIcon>
-            </Tooltip>
-          )}
+            )}
+            {enableNavigationButtons && <NavigationButtons />}
+          </Group>
+        </LayoutGroup>
+        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
           {enableVscode && (
             <Tooltip label="Open source" {...portalProps}>
               <ActionIcon
@@ -71,6 +79,7 @@ export const Controls = memo(() => {
               </ActionIcon>
             </Tooltip>
           )}
+          {enableControls && <ToggleReadonly />}
           {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
           {enableControls && notReadOnly && (
             <>
@@ -90,9 +99,12 @@ export const Controls = memo(() => {
             </Tooltip>
           )}
         </ActionIconGroup>
-        {notReadOnly && <SyncLayoutBadge />}
       </Stack>
-    </>
+      <Group>
+        {enableSearch && <LikeC4Search />}
+        {notReadOnly && <SyncLayoutBadge />}
+      </Group>
+    </Group>
   )
 })