@likec4/diagram 1.24.1 → 1.25.0

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

@@ -1,9 +1,10 @@
-import { ActionIconGroup, Badge, Group, Loader, Stack } from '@mantine/core'
+import { ActionIconGroup, Badge, Box, Group, Loader, Stack } from '@mantine/core'
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
 import { clsx } from 'clsx'
-import { LayoutGroup } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
 import { memo } from 'react'
 import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
+import { type ControlsCustomLayout, useControlsCustomLayout } from '../../../context/ControlsCustomLayout'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram, useDiagramContext, useDiagramSyncLayoutState } from '../../../hooks/useDiagram'
 import { stopPropagation } from '../../../utils'
@@ -16,11 +17,62 @@ import { NavigationButtons } from './NavigationButtons'
 import * as css from './styles.css'
 import { ToggleReadonly } from './ToggleReadonly'
 
+const ControlsDefaultLayout: ControlsCustomLayout = ({
+  burgerMenu,
+  navigationButtons,
+  search,
+  actionsGroup,
+}) => (
+  <Group
+    component={m.div}
+    // @ts-expect-error group component not fully polymorphic
+    initial={{
+      opacity: 0.05,
+      translateX: -30,
+      translateY: -16,
+    }}
+    animate={{
+      opacity: 1,
+      translateX: 0,
+      translateY: 0,
+    }}
+    exit={{
+      opacity: 0.05,
+      translateX: -30,
+      translateY: -10,
+    }}
+    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'}>
+          {burgerMenu}
+          {navigationButtons}
+        </Group>
+      </LayoutGroup>
+      {actionsGroup}
+    </Stack>
+    <Box>
+      {search}
+    </Box>
+  </Group>
+)
+
 export const Controls = memo(() => {
-  const { viewId, hasLayoutDrift, viewportChanged } = useDiagramContext(c => ({
+  const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext(c => ({
     viewId: c.view.id,
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,
     viewportChanged: c.viewportChangedManually,
+    isNotActiveWalkthrough: c.activeWalkthrough === null,
   }))
   const diagram = useDiagram()
   const {
@@ -36,24 +88,13 @@ export const Controls = memo(() => {
   } = useEnabledFeatures()
   const notReadOnly = !enableReadOnly
   const portalProps = useMantinePortalProps()
-
+  const ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout
   return (
-    <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 && (
+    <LayoutGroup inherit={false}>
+      <AnimatePresence initial={false} mode="wait">
+        {isNotActiveWalkthrough && (
+          <ControlsLayout
+            burgerMenu={onBurgerMenuClick && (
               <ActionIcon
                 onClick={e => {
                   e.stopPropagation()
@@ -62,47 +103,47 @@ export const Controls = memo(() => {
                 <IconMenu2 />
               </ActionIcon>
             )}
-            {enableNavigationButtons && <NavigationButtons />}
-          </Group>
-        </LayoutGroup>
-        <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>
-      </Stack>
-      <Group>
-        {enableSearch && <LikeC4Search />}
-        {/* {notReadOnly && <SyncLayoutBadge />} */}
-      </Group>
-    </Group>
+            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>
   )
 })
 

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

@@ -18,7 +18,12 @@ export const NavigationButtons = () => {
   return (
     <AnimatePresence>
       {hasStepBack && (
-        <m.div
+        <ActionIcon
+          component={m.button}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.navigate('back')
+          }}
           layout
           initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
           animate={{ opacity: 1, transform: 'translateX(0)' }}
@@ -26,18 +31,14 @@ export const NavigationButtons = () => {
             opacity: 0.05,
             transform: 'translateX(-10px)',
           }}
-          key={'back'}>
-          <ActionIcon
-            onClick={e => {
-              e.stopPropagation()
-              diagram.navigate('back')
-            }}>
-            <IconChevronLeft />
-          </ActionIcon>
-        </m.div>
+          key={'back'}
+        >
+          <IconChevronLeft />
+        </ActionIcon>
       )}
       {hasStepForward && (
-        <m.div
+        <ActionIcon
+          component={m.button}
           layout
           initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
           animate={{ opacity: 1, transform: 'translateX(0)' }}
@@ -45,15 +46,13 @@ export const NavigationButtons = () => {
             opacity: 0,
             transform: 'translateX(10px)',
           }}
-          key={'forward'}>
-          <ActionIcon
-            onClick={e => {
-              e.stopPropagation()
-              diagram.navigate('forward')
-            }}>
-            <IconChevronRight />
-          </ActionIcon>
-        </m.div>
+          key={'forward'}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.navigate('forward')
+          }}>
+          <IconChevronRight />
+        </ActionIcon>
       )}
     </AnimatePresence>
   )

package/src/likec4diagram/ui/controls/styles.css.ts

@@ -1,8 +1,7 @@
 import { rem } from '@mantine/core'
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { mantine, vars } from '../../../theme-vars'
+import { mantine, vars, whereNotReducedGraphics, whereReducedGraphics } from '../../../theme-vars'
 
 export const navigationButtons = style({
   gap: calc(mantine.spacing.xs).divide(1.5).toString(),
@@ -18,10 +17,16 @@ export const panel = style({
   pointerEvents: 'none',
 })
 
-globalStyle(`${panel} :where(button, .action-icon)`, {
+globalStyle(`${panel} :where(button, .action-icon, [role="dialog"])`, {
   pointerEvents: 'all',
 })
 
+globalStyle(`${whereReducedGraphics} ${panel} .action-icon`, {
+  vars: {
+    '--ai-radius': '0px',
+  },
+})
+
 globalStyle(`.likec4-top-left-panel .action-icon`, {
   vars: {
     ['--ai-size']: '2rem',

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.ts

@@ -1,19 +1,13 @@
 import { fallbackVar, style } from '@vanilla-extract/css'
-import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { mantine, vars, whereDark } from '../../../theme-vars'
-
-export const container = style({
-  bottom: 0,
-  left: 0,
-  padding: 8,
-  margin: 0,
-})
+import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
 
 export const card = style({
   cursor: 'default',
   minWidth: 200,
   maxWidth: 'calc(100vw - 16px)',
+  width: 'auto',
   backgroundColor: mantine.colors.body,
+  borderRadius: '0px',
   '@media': {
     [mantine.largerThan('sm')]: {
       minWidth: 250,
@@ -29,6 +23,7 @@ export const card = style({
       backgroundColor: mantine.colors.dark[6],
     },
     [`${whereNotReducedGraphics} &`]: {
+      borderRadius: mantine.radius.sm,
       backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
       WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
       backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),

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

@@ -47,13 +47,12 @@ export function DiagramTitlePanel() {
             opacity: 0.05,
             scale: 0.6,
           }}
-          className={clsx('react-flow__panel', css.container)}
+          className={clsx('react-flow__panel', 'left', 'bottom')}
           style={{
             transformOrigin: 'left center',
           }}
         >
           <Card
-            radius="sm"
             className={css.card}
             withBorder={!isCollapsed}
             p={isCollapsed ? 'sm' : 'md'}

package/src/likec4diagram/ui/notation/NotationPanel.css.ts

@@ -1,6 +1,6 @@
 import { fallbackVar, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars, whereDark } from '../../../theme-vars'
+import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
 // import { stokeFillMix } from '../../xyflow/nodes/element/element.css'
 
 export const container = style({
@@ -10,6 +10,19 @@ export const container = style({
   margin: 0,
 })
 
+export const icon = style({
+  vars: {
+    ['--ai-radius']: '0px',
+  },
+  selectors: {
+    [`${whereNotReducedGraphics} &`]: {
+      vars: {
+        ['--ai-radius']: mantine.radius.md,
+      },
+    },
+  },
+})
+
 export const card = style({
   cursor: 'default',
   userSelect: 'none',

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

@@ -178,7 +178,7 @@ export const NotationPanel = memo(() => {
               size={'lg'}
               variant="default"
               color="gray"
-              radius={'md'}
+              className={css.icon}
               onClick={() => setCollapsed(false)}
             >
               <IconHelpCircle stroke={1.5} />

package/src/likec4diagram/ui/search/ElementsColumn.css.ts

@@ -1,6 +1,5 @@
 import { createContainer, createGlobalVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../../theme-vars'
-import { whereLight } from '../../../theme-vars.css'
+import { mantine, whereLight } from '../../../theme-vars'
 import { button, buttonFocused, description, descriptionColor, iconColor, title } from './_shared.css'
 
 export { focusable } from './_shared.css'

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

@@ -1,8 +1,8 @@
 import {
   type Fqn,
+  type LikeC4Model,
   ifilter,
   isAncestor,
-  LikeC4Model,
   nameFromFqn,
   sortParentsFirst,
   toArray,

package/src/likec4diagram/ui/search/LikeC4Search.css.ts

@@ -1,8 +1,6 @@
 import { rem } from '@mantine/core'
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { reactFlow } from '../../../LikeC4Diagram.css'
-import { mantine } from '../../../theme-vars'
-import { vars, whereDark, whereLight } from '../../../theme-vars.css'
+import { mantine, vars, whereDark, whereLight } from '../../../theme-vars'
 import { button, buttonFocused } from './_shared.css'
 export { focusable } from './_shared.css'
 

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

@@ -39,7 +39,7 @@ export function LikeC4SearchInput() {
   const previous = usePreviousDistinct(search)
   const isFirstRender = useIsFirstRender()
 
-  const [isEmptyForSomeTime] = useDebouncedValue(search === '' && !isFirstRender, isString(previous) ? 400 : 1000)
+  const [isEmptyForSomeTime] = useDebouncedValue(search === '' && !isFirstRender, isString(previous) ? 500 : 2000)
 
   useWindowEvent(
     'keydown',

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

@@ -22,13 +22,12 @@ import { m } from 'framer-motion'
 import { first } from 'remeda'
 import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
-import { emptyBoX } from './_shared.css'
 import { useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
 import { centerY, moveFocusToSearchInput } from './utils'
 import * as css from './ViewsColumn.css'
 
 export const NothingFound = () => (
-  <Box className={emptyBoX}>
+  <Box className={css.emptyBoX}>
     Nothing found
   </Box>
 )

package/src/likec4diagram/ui/search/ViewsColumn.css.ts

@@ -2,7 +2,7 @@ import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
 import { mantine } from '../../../theme-vars'
 import { button, description, descriptionColor, iconColor, title } from './_shared.css'
 
-export { focusable } from './_shared.css'
+export { emptyBoX, focusable } from './_shared.css'
 
 export const viewButton = style([button, {
   flexWrap: 'nowrap',

package/src/likec4diagram/ui/search/_shared.css.ts

@@ -1,6 +1,5 @@
-import { type StyleRule, createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../../theme-vars'
-import { whereDark, whereLight } from '../../../theme-vars.css'
+import { type StyleRule, createVar, fallbackVar, style } from '@vanilla-extract/css'
+import { mantine, whereDark, whereLight } from '../../../theme-vars'
 
 export const titleColor = createVar('title-color')
 export const descriptionColor = createVar('description-color')

package/src/likec4model/useLikeC4Model.ts

@@ -1,4 +1,4 @@
-import { LikeC4Model } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core'
 import { useContext } from 'react'
 import { isDefined, isNonNullish, isString } from 'remeda'
 import { LikeC4ModelContext } from './LikeC4ModelContext'

package/src/overlays/element-details/ElementDetailsCard.css.ts

@@ -5,6 +5,9 @@ import { easings, mantine, transitions, vars, whereDark, whereLight } from '../.
 export const cardBg = createVar('card-bg')
 const cardBgImage = createVar('card-bg-top')
 
+export const backdropBlur = createVar('backdrop-blur')
+export const backdropOpacity = createVar('backdrop-opacity')
+
 export const dialog = style({
   boxSizing: 'border-box',
   margin: 0,
@@ -18,14 +21,14 @@ export const dialog = style({
   background: 'transparent',
   border: '0 solid transparent',
   vars: {
-    '--backdrop-opacity': '0%',
-    '--backdrop-blur': '0px',
+    [backdropOpacity]: '0%',
+    [backdropBlur]: '0px',
   },
   selectors: {
     [`&::backdrop`]: {
-      WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
-      backdropFilter: 'blur(var(--backdrop-blur))',
-      backgroundColor: `rgb(36 36 36 / var(--backdrop-opacity))`,
+      WebkitBackdropFilter: `blur(${backdropBlur})`,
+      backdropFilter: `blur(${backdropBlur})`,
+      backgroundColor: `rgb(36 36 36 / ${backdropOpacity})`,
     },
   },
 })

package/src/overlays/element-details/ElementDetailsCard.tsx

@@ -1,11 +1,11 @@
 import {
+  type ComputedView,
   type DiagramView,
   type Element,
   type Fqn,
   type LikeC4View,
   type NodeId,
   type ViewId,
-  ComputedView,
   isDeploymentView,
   isScopedElementView,
 } from '@likec4/core'
@@ -48,11 +48,15 @@ import { useDiagram } from '../../hooks/useDiagram'
 import type { OnNavigateTo } from '../../LikeC4Diagram.props'
 import { useLikeC4Model } from '../../likec4model'
 import { stopPropagation } from '../../utils'
+import { getVarName } from '../../utils/css'
 import * as css from './ElementDetailsCard.css'
 import { TabPanelDeployments } from './TabPanelDeployments'
 import { TabPanelRelationships } from './TabPanelRelationships'
 import { TabPanelStructure } from './TabPanelStructure'
 
+const backdropBlur = getVarName(css.backdropBlur) as '--backdrop-blur'
+const backdropOpacity = getVarName(css.backdropOpacity) as '--backdrop-opacity'
+
 const Divider = MantineDivider.withProps({
   mb: 8,
   labelPosition: 'left',
@@ -226,16 +230,16 @@ export function ElementDetailsCard({
       layout
       layoutRoot
       initial={{
-        '--backdrop-blur': '0px',
-        '--backdrop-opacity': '10%',
+        [backdropBlur]: '0px',
+        [backdropOpacity]: '10%',
       }}
       animate={{
-        '--backdrop-blur': '3px',
-        '--backdrop-opacity': '60%',
+        [backdropBlur]: '3px',
+        [backdropOpacity]: '60%',
       }}
       exit={{
-        '--backdrop-blur': '0px',
-        '--backdrop-opacity': '0%',
+        [backdropBlur]: '0px',
+        [backdropOpacity]: '0%',
         transition: {
           duration: 0.1,
         },

package/src/overlays/overlay/Overlay.css.ts

@@ -2,6 +2,10 @@ import { createVar, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
 import { mantine, whereLight } from '../../theme-vars'
 
+export const backdropBlur = createVar('backdrop-blur')
+export const backdropOpacity = createVar('backdrop-opacity')
+const backdropColor = createVar('backdrop-color')
+
 const borderRadius = createVar('border-radius')
 export const dialog = style({
   boxSizing: 'border-box',
@@ -20,20 +24,20 @@ export const dialog = style({
   padding: 6,
   vars: {
     [borderRadius]: '8px',
-    '--backdrop-color': '34 34 34',
-    '--backdrop-opacity': '0%',
-    '--backdrop-blur': '0px',
+    [backdropColor]: '34 34 34',
+    [backdropOpacity]: '0%',
+    [backdropBlur]: '0px',
   },
   selectors: {
     [`&::backdrop`]: {
       cursor: 'zoom-out',
-      WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
-      backdropFilter: 'blur(var(--backdrop-blur))',
-      backgroundColor: `rgb(var(--backdrop-color) / var(--backdrop-opacity))`,
+      WebkitBackdropFilter: `blur(${backdropBlur})`,
+      backdropFilter: `blur(${backdropBlur})`,
+      backgroundColor: `rgb(${backdropColor} / ${backdropOpacity})`,
     },
     [`${whereLight} &`]: {
       vars: {
-        '--backdrop-color': '15 15 15',
+        [backdropBlur]: '15 15 15',
       },
     },
   },

package/src/overlays/overlay/Overlay.tsx

@@ -7,6 +7,7 @@ import clsx from 'clsx'
 import { type HTMLMotionProps, m } from 'framer-motion'
 import { type PropsWithChildren, useLayoutEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
+import { getVarName } from '../../utils/css'
 import * as css from './Overlay.css'
 
 type OverlayProps = PropsWithChildren<
@@ -20,6 +21,9 @@ type OverlayProps = PropsWithChildren<
   }
 >
 
+const backdropBlur = getVarName(css.backdropBlur) as '--backdrop-blur'
+const backdropOpacity = getVarName(css.backdropOpacity) as '--backdrop-opacity'
+
 export function Overlay({ children, onClose, className, classes, ...rest }: OverlayProps) {
   const [opened, setOpened] = useState(false)
   const dialogRef = useRef<HTMLDialogElement>(null)
@@ -68,15 +72,15 @@ export function Overlay({ children, onClose, className, classes, ...rest }: Over
       ref={dialogRef}
       className={clsx(css.dialog, classes?.dialog, className, RemoveScroll.classNames.fullWidth)}
       initial={{
-        '--backdrop-blur': '0px',
-        '--backdrop-opacity': '5%',
+        [backdropBlur]: '0px',
+        [backdropOpacity]: '5%',
         opacity: 0.85,
         translateY: 12,
         // opacity: 02.8,
       }}
       animate={{
-        '--backdrop-blur': '6px',
-        '--backdrop-opacity': '60%',
+        [backdropBlur]: '6px',
+        // [backdropOpacity]: '60%',
         translateY: 0,
         opacity: 1,
         // transition: {
@@ -86,8 +90,8 @@ export function Overlay({ children, onClose, className, classes, ...rest }: Over
       exit={{
         opacity: 0,
         translateY: -10,
-        '--backdrop-blur': '0px',
-        '--backdrop-opacity': '0%',
+        [backdropBlur]: '0px',
+        [backdropOpacity]: '0%',
         transition: {
           duration: 0.1,
         },

package/src/overlays/relationship-details/RelationshipDetails.tsx

@@ -2,15 +2,11 @@ import type { DiagramEdge, DiagramView } from '@likec4/core'
 import { ActionIcon, Group } from '@mantine/core'
 import { useCallbackRef, useStateHistory } from '@mantine/hooks'
 import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
-import { Panel, ReactFlowProvider, useEdgesState, useNodesState } from '@xyflow/react'
+import { Panel, ReactFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
 import { memo, useEffect, useRef } from 'react'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
-import { Base } from '../../base/types'
-import { updateEdges } from '../../base/updateEdges'
-import { updateNodes } from '../../base/updateNodes'
-import { useUpdateEffect } from '../../hooks'
 import type { RelationshipDetailsTypes as Types } from './_types'
 import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
 import { edgeTypes } from './custom/edgeTypes'