@likec4/diagram 1.27.3 → 1.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.27.3",
+  "version": "1.28.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -42,29 +42,31 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@mantine/core": "7.17.3",
-    "@mantine/hooks": "7.17.3",
+    "@mantine/core": "7.17.4",
+    "@mantine/hooks": "7.17.4",
     "@nanostores/react": "0.8.4",
-    "@react-hookz/web": "^25.1.0",
+    "@react-hookz/web": "^25.1.1",
     "@tabler/icons-react": "3.31.0",
     "@xstate/react": "^5.0.3",
-    "@xyflow/react": "^12.5.2",
-    "@xyflow/system": "^0.0.53",
+    "@xyflow/react": "^12.5.5",
+    "@xyflow/system": "^0.0.55",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "fast-equals": "^5.2.2",
-    "framer-motion": "^12.6.2",
+    "motion": "^12.6.3",
     "nanostores": "0.11.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
     "react-error-boundary": "^5.0.0",
     "react-shadow": "^20.6.0",
     "remeda": "^2.21.2",
-    "type-fest": "^4.38.0",
+    "type-fest": "^4.39.1",
     "xstate": "^5.19.2",
-    "@likec4/core": "1.27.3",
-    "@likec4/styles": "1.27.3"
+    "@likec4/core": "1.28.1",
+    "@likec4/styles": "1.28.1"
+  },
+  "peerDependencies": {
+    "react": "^18.x || ^19.x",
+    "react-dom": "^18.x || ^19.x"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.53.3",
@@ -73,15 +75,17 @@
     "@types/d3-shape": "^3.1.7",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "@types/node": "^20.17.28",
+    "@types/node": "^20.17.30",
     "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.5.3",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.9",
+    "vitest": "^3.1.1",
     "wireit": "^0.14.11",
-    "@likec4/tsconfig": "1.27.3"
+    "@likec4/tsconfig": "1.28.1"
   },
   "scripts": {
     "generate": "panda codegen",

package/src/base/BaseXYFlow.tsx

@@ -143,8 +143,8 @@ export const BaseXYFlow = <
       edgesFocusable={false}
       nodesDraggable={nodesDraggable}
       nodeDragThreshold={4}
-      nodeClickDistance={1.9}
-      paneClickDistance={1.9}
+      nodeClickDistance={3}
+      paneClickDistance={3}
       elevateNodesOnSelect={false} // or edges are not visible after select\
       selectNodesOnDrag={false}
       onNodesChange={onNodesChange}

package/src/base/primitives/compound/CompoundActionButton.tsx

@@ -3,7 +3,7 @@ import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconZoomScan } from '@tabler/icons-react'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import { compoundActionBtn } from './actionbtns.css'

package/src/base/primitives/compound/CompoundDetailsButton.tsx

@@ -3,7 +3,7 @@ import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import { compoundActionBtn } from './actionbtns.css'

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

@@ -1,7 +1,4 @@
 import { css, sva } from '@likec4/styles/css'
-// import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-// import { calc } from '@vanilla-extract/css-utils'
-// import { easings, vars, whereLight, whereNotReducedGraphics } from '../../../theme-vars'
 
 // export const _compoundOpacity = '--_compound-opacity'
 // const compoundOpacity = `var(${_compoundOpacity})`

package/src/base/primitives/compound/CompoundNodeContainer.tsx

@@ -1,6 +1,6 @@
 import type { DiagramNode } from '@likec4/core'
 import { css, cx } from '@likec4/styles/css'
-import { type HTMLMotionProps, m } from 'framer-motion'
+import { type HTMLMotionProps, m } from 'motion/react'
 import { type PropsWithChildren } from 'react'
 import { clamp, isNumber } from 'remeda'
 import { useIsReducedGraphics } from '../../../hooks/useReducedGraphics'

package/src/base/primitives/edge/EdgeActionButton.tsx

@@ -2,10 +2,9 @@ import { cx } from '@likec4/styles/css'
 import { ActionIcon } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import { stopPropagation } from '../../../utils/xyflow'
-import type { EdgeProps } from '../../types'
 import { actionBtn } from './edge.css'
 
-type EdgeActionBtnProps = EdgeProps & {
+type EdgeActionBtnProps = {
   icon?: React.ReactNode
   onClick: (e: React.MouseEvent) => void
 }

package/src/base/primitives/edge/EdgePath.tsx

@@ -1,5 +1,5 @@
 import type { DiagramEdge } from '@likec4/core'
-import { cx } from '@likec4/styles/css'
+import { css, cx } from '@likec4/styles/css'
 import { type PointerEventHandler, forwardRef } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import type { EdgeProps } from '../../types'
@@ -16,25 +16,28 @@ type Data = UndefinedOnPartialDeep<
   >
 >
 
-type EdgePathProps = EdgeProps<Data> & {
+type EdgePathProps = {
+  edgeProps: EdgeProps<Data>
   svgPath: string
   strokeWidth?: number
   onEdgePointerDown?: PointerEventHandler<SVGGElement> | undefined
 }
 
 export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
-  id,
-  data: {
-    line,
-    dir,
-    tail,
-    head,
+  edgeProps: {
+    id,
+    data: {
+      line,
+      dir,
+      tail,
+      head,
+    },
+    style,
+    interactionWidth,
   },
+  onEdgePointerDown,
   strokeWidth,
   svgPath,
-  style,
-  interactionWidth,
-  onEdgePointerDown,
 }, svgPathRef) => {
   let markerStartName = arrowTypeToMarker(tail)
   let markerEndName = arrowTypeToMarker(head ?? 'normal')
@@ -69,10 +72,15 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
   return (
     <>
       <path
-        className={cx('react-flow__edge-interaction', hideOnReducedGraphics)}
+        className={cx(
+          'react-flow__edge-interaction',
+          hideOnReducedGraphics,
+          css({
+            fill: '[none]',
+            strokeOpacity: 0,
+          }),
+        )}
         d={svgPath}
-        fill="none"
-        stroke={'transparent'}
         strokeWidth={interactionWidth ?? 10}
       />
       <g className={markerContext} onPointerDown={onEdgePointerDown}>

package/src/base/primitives/edge/edge.css.ts

@@ -71,7 +71,7 @@ export const markerContext = css({
 })
 
 export const cssEdgePath = css({
-  fill: '[none]',
+  fill: '[none!]',
   strokeDashoffset: 10,
   _noReduceGraphics: {
     transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',

package/src/base/primitives/element/ElementActionButtons.tsx

@@ -1,7 +1,8 @@
 import { css, cx } from '@likec4/styles/css'
 import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
-import { m } from 'framer-motion'
+import { useId } from '@mantine/hooks'
+import * as m from 'motion/react-m'
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
@@ -33,13 +34,13 @@ const actionButtons = css({
 })
 
 export function ElementActionButtons({
-  id,
   selected = false,
   data: {
     hovered: isHovered = false,
   },
   buttons,
 }: ElementActionButtonsProps) {
+  const id = useId()
   const zoomTooSmall = useIsZoomTooSmall()
   if (!buttons.length || zoomTooSmall) {
     return null
@@ -49,6 +50,7 @@ export function ElementActionButtons({
       <Box
         component={m.div}
         layoutRoot
+        key={`${id}-action-buttons`}
         initial={false}
         style={{
           originY: 0,
@@ -65,16 +67,16 @@ export function ElementActionButtons({
         {buttons.map((button, index) => (
           <ActionIcon
             component={m.button}
-            layout
+            // layout
             className={actionBtn({})}
-            key={`action-button-${id}-${button.key ?? index}`}
+            key={`${id}-${button.key ?? index}`}
             initial={false}
             whileTap={{ scale: 1 }}
             whileHover={{
               scale: 1.3,
             }}
-            // Otherwise node receives click event and is selected
             onClick={button.onClick}
+            // Otherwise node receives click event and is selected
             onDoubleClick={stopPropagation}
           >
             {button.icon}

package/src/base/primitives/element/ElementDetailsButton.tsx

@@ -1,8 +1,9 @@
 import { css, cx } from '@likec4/styles/css'
 import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
+import { useId } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 
@@ -41,11 +42,14 @@ export function ElementDetailsButton({
   icon,
   onClick,
 }: ElementDetailsButtonProps) {
+  const id = useId()
   return (
     <Box className={cx(container, 'details-button')}>
       <ActionIcon
+        key={id}
         className={cx('nodrag nopan', actionBtn({ variant: 'transparent' }))}
         component={m.button}
+        // layout
         initial={false}
         style={{
           originX: 0.45,

package/src/base/primitives/element/ElementNodeContainer.css.ts

@@ -1,7 +1,4 @@
 import { css as style } from '@likec4/styles/css'
-// import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-// import { easings, vars, whereReducedGraphics } from '../../../theme-vars'
-// import { iconSize, paddingSize, textSize } from './vars.css'
 
 export const container = style({
   position: 'relative',
@@ -52,18 +49,3 @@ export const container = style({
     cursor: 'pointer',
   },
 })
-
-// const sizes = ['xs', 'sm', 'lg', 'xl'] as const
-// sizes.forEach((size) => {
-//   globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
-//     vars: {
-//       [textSize]: rem(defaultTheme.textSizes[size]),
-//     },
-//   })
-
-//   globalStyle(`${container}[data-likec4-padding="${size}"]`, {
-//     vars: {
-//       [paddingSize]: rem(defaultTheme.spacing[size]),
-//     },
-//   })
-// })

package/src/base/primitives/element/ElementNodeContainer.tsx

@@ -7,7 +7,7 @@ import {
 } from '@likec4/core'
 import { css, cx } from '@likec4/styles/css'
 import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { type PropsWithChildren, forwardRef } from 'react'
 import type { NodeProps } from '../../types'
 import * as styles from './ElementNodeContainer.css'

package/src/base/updateEdges.ts

@@ -5,7 +5,7 @@ import type { Base } from './types'
 function _update<E extends Base.Edge>(current: E[], update: E[]): E[] {
   return update.map((next) => {
     const existing = current.find(n => n.id === next.id)
-    if (existing && existing.type === next.type) {
+    if (existing && eq(existing.type, next.type)) {
       if (
         eq(existing.hidden ?? false, next.hidden ?? false)
         && eq(existing.source, next.source)
@@ -17,14 +17,11 @@ function _update<E extends Base.Edge>(current: E[], update: E[]): E[] {
       ) {
         return existing
       }
-      // return {
-      //   ...omit(existing, ['hidden', 'zIndex']),
-      //   ...next,
-      //   data: {
-      //     ...existing.data,
-      //     ...next.data,
-      //   },
-      // }
+      return {
+        ...omit(existing, ['hidden', 'zIndex']),
+        ...next,
+        data: next.data,
+      }
     }
     return next
   })

package/src/base/updateNodes.ts

@@ -6,11 +6,10 @@ import type { Base } from './types'
 function _update<N extends Base.Node>(current: N[], updated: N[]): N[] {
   return updated.map((update) => {
     const existing = current.find(n => n.id === update.id)
-    if (existing) {
+    if (existing && eq(existing.type, update.type)) {
       const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing)
       if (
-        eq(existing.type, update.type)
-        && eq(existingWidth, update.initialWidth)
+        eq(existingWidth, update.initialWidth)
         && eq(existingHeight, update.initialHeight)
         && eq(existing.parentId ?? null, update.parentId ?? null)
         && eq(existing.hidden ?? false, update.hidden ?? false)
@@ -20,17 +19,14 @@ function _update<N extends Base.Node>(current: N[], updated: N[]): N[] {
       ) {
         return existing
       }
-      // return {
-      //   ...omit(existing, ['measured', 'parentId', 'hidden', 'zIndex']),
-      //   ...update,
-      //   // Force dimensions from update
-      //   width: update.initialWidth,
-      //   height: update.initialHeight,
-      //   data: {
-      //     ...existing.data,
-      //     ...update.data,
-      //   },
-      // } as N
+      return {
+        ...omit(existing, ['measured', 'parentId', 'hidden', 'zIndex']),
+        ...update,
+        // Force dimensions from update
+        width: update.initialWidth,
+        height: update.initialHeight,
+        data: update.data,
+      } as N
     }
     return update
   })

package/src/bundle/styles.css.ts

@@ -1,9 +1,14 @@
 import type { DiagramView } from '@likec4/core'
 import { css } from '@likec4/styles/css'
 import { type MantineThemeOverride, createTheme, Portal } from '@mantine/core'
-import { useColorScheme as usePreferredColorScheme, useDebouncedCallback, useMutationObserver } from '@mantine/hooks'
+import {
+  useColorScheme as usePreferredColorScheme,
+  useDebouncedCallback,
+  useId,
+  useMutationObserver,
+} from '@mantine/hooks'
 import { useIsomorphicLayoutEffect } from '@react-hookz/web'
-import { useId, useState } from 'react'
+import { useState } from 'react'
 import { first, isFunction, isString } from 'remeda'
 import inlinedStyles from '../styles.css?inline'
 import fontsCss from './font.css?inline'

package/src/components/SearchControl.css.ts

@@ -1,10 +1,6 @@
-import { css as style } from '@likec4/styles/css'
-// import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-// import { mantine, transitions, vars, whereDark, whereLight, whereNotReducedGraphics } from '../theme-vars'
+import { css } from '@likec4/styles/css'
 
-// const transparent = createVar('transparent')
-// const bgColor = createVar('bgcolor')
-export const root = style({
+export const root = css({
   height: '30px',
   paddingLeft: 'sm',
   paddingRight: '4px',
@@ -42,7 +38,7 @@ export const root = style({
   },
 })
 
-export const placeholder = style({
+export const placeholder = css({
   fontSize: 'sm', // mantine.fontSizes.sm,
   fontWeight: 500,
   paddingRight: '50px',
@@ -50,7 +46,7 @@ export const placeholder = style({
   flex: '1',
 })
 
-export const shortcut = style({
+export const shortcut = css({
   fontSize: '11px',
   fontWeight: 600,
   lineHeight: 1,

package/src/context/FramerMotionConfig.tsx

@@ -1,5 +1,5 @@
 import { useMantineStyleNonce } from '@mantine/core'
-import { domMax, LazyMotion, MotionConfig } from 'framer-motion'
+import { domMax, LazyMotion, MotionConfig } from 'motion/react'
 import { type PropsWithChildren } from 'react'
 
 export const FramerMotionConfig = ({

package/src/context/RootContainer.tsx

@@ -29,10 +29,6 @@ export function RootContainer({
   return (
     <Box
       className={cx('likec4-root', className)}
-      css={{
-        // '--likec4-background-color': 'mantine.colors.body',
-        // '--colors-likec4-background': 'var(--mantine-color-body)',
-      }}
       ref={ref}
       {...reduceGraphics && {
         ['data-likec4-reduced-graphics']: true,

package/src/hooks/useDiagram.ts

@@ -2,7 +2,7 @@ import { type DiagramView, type EdgeId, type ElementNotation, type Fqn, type Nod
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector as useXstateSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { useMemo, useTransition } from 'react'
+import { useMemo } from 'react'
 import type { PartialDeep } from 'type-fest'
 import type { FeatureName } from '../context/DiagramFeatures'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'

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

@@ -335,7 +335,13 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
   return (
     <>
       <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
-        <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
+        <EdgePath
+          edgeProps={props}
+          svgPath={edgePath}
+          ref={svgPathRef}
+          {...enableEdgeEditing && {
+            onEdgePointerDown,
+          }} />
         <EdgeLabelContainer
           edgeProps={props}
           labelPosition={{
@@ -368,7 +374,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
                 <circle
                   onPointerDown={e => onControlPointerDown(i, e)}
                   className={clsx('nodrag nopan', edgesCss.controlPoint)}
-                  key={i}
+                  key={'controlPoints' + edgeId + '#' + i}
                   cx={Math.round(p.x)}
                   cy={Math.round(p.y)}
                   r={3}

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

@@ -89,7 +89,7 @@ export const RelationshipsDropdownMenu = memo((
     diagramEdge.relations,
     map(id => {
       try {
-        return likec4model.relationship(id)
+        return likec4model.findRelationship(id)
       } catch (e) {
         // View was cached, but likec4model based on new data
         console.error(

package/src/likec4diagram/custom/edges/edges.css.ts

@@ -1,6 +1,4 @@
 import { css } from '@likec4/styles/css'
-// import { globalStyle, style } from '@vanilla-extract/css'
-// import { mantine, xyvars } from '../../../theme-vars'
 
 const isSelected = '.react-flow__edge.selected'
 

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

@@ -1,7 +1,7 @@
 import { ActionIconGroup, Badge, Box, Group, Loader, Stack } from '@mantine/core'
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
 import { clsx } from 'clsx'
-import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { LayoutGroup, m } from 'motion/react'
 import { memo } from 'react'
 import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
 import { type ControlsCustomLayout, useControlsCustomLayout } from '../../../context/ControlsCustomLayout'
@@ -90,60 +90,58 @@ export const Controls = memo(() => {
   const portalProps = useMantinePortalProps()
   const ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout
   return (
-    <LayoutGroup inherit={false}>
-      <AnimatePresence initial={false} mode="wait">
-        {isNotActiveWalkthrough && (
-          <ControlsLayout
-            burgerMenu={onBurgerMenuClick && (
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  onBurgerMenuClick()
-                }}>
-                <IconMenu2 />
-              </ActionIcon>
-            )}
-            navigationButtons={enableNavigationButtons && <NavigationButtons />}
-            search={enableSearch && <LikeC4Search />}
-            syncInProgressBadge={<SyncLayoutBadge />}
-            actionsGroup={
-              <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
-                {enableVscode && (
-                  <Tooltip label="Open source" {...portalProps}>
-                    <ActionIcon
-                      onClick={e => {
-                        e.stopPropagation()
-                        onOpenSource?.({ view: viewId })
-                      }}>
-                      <IconFileSymlink stroke={1.5} />
-                    </ActionIcon>
-                  </Tooltip>
-                )}
-                {enableControls && <ToggleReadonly />}
-                {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
-                {enableControls && notReadOnly && (
-                  <>
-                    <ChangeAutoLayoutButton {...portalProps} />
-                    <ManualLayoutToolsButton {...portalProps} />
-                  </>
-                )}
-                {enableControls && (
-                  <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
-                    <ActionIcon
-                      onClick={e => {
-                        e.stopPropagation()
-                        diagram.fitDiagram()
-                      }}>
-                      <IconFocusCentered />
-                    </ActionIcon>
-                  </Tooltip>
-                )}
-              </ActionIconGroup>
-            }
-          />
-        )}
-      </AnimatePresence>
-    </LayoutGroup>
+    <>
+      {isNotActiveWalkthrough && (
+        <ControlsLayout
+          burgerMenu={onBurgerMenuClick && (
+            <ActionIcon
+              onClick={e => {
+                e.stopPropagation()
+                onBurgerMenuClick()
+              }}>
+              <IconMenu2 />
+            </ActionIcon>
+          )}
+          navigationButtons={enableNavigationButtons && <NavigationButtons />}
+          search={enableSearch && <LikeC4Search />}
+          syncInProgressBadge={<SyncLayoutBadge />}
+          actionsGroup={
+            <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
+              {enableVscode && (
+                <Tooltip label="Open source" {...portalProps}>
+                  <ActionIcon
+                    onClick={e => {
+                      e.stopPropagation()
+                      onOpenSource?.({ view: viewId })
+                    }}>
+                    <IconFileSymlink stroke={1.5} />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+              {enableControls && <ToggleReadonly />}
+              {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
+              {enableControls && notReadOnly && (
+                <>
+                  <ChangeAutoLayoutButton {...portalProps} />
+                  <ManualLayoutToolsButton {...portalProps} />
+                </>
+              )}
+              {enableControls && (
+                <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
+                  <ActionIcon
+                    onClick={e => {
+                      e.stopPropagation()
+                      diagram.fitDiagram()
+                    }}>
+                    <IconFocusCentered />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+            </ActionIconGroup>
+          }
+        />
+      )}
+    </>
   )
 })