@likec4/diagram 1.17.1 → 1.19.0

package/src/controls/action-button-bar/useActionButtonBarCtx.ts

@@ -0,0 +1,13 @@
+import type { Variants } from 'framer-motion'
+import { createContext, useContext } from 'react'
+
+export const ActionButtonBarContext = createContext<
+  {
+    variants: Variants
+    ['data-animate-target']?: string
+  } | null
+>(null)
+
+export function useActionButtonBarCtx() {
+  return useContext(ActionButtonBarContext)
+}

package/src/controls/action-buttons/ActionButton.css.ts

@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css'
+import { mantine, vars, whereLight } from '../../theme-vars'
+
+export const btn = style({
+  pointerEvents: 'all',
+  color: vars.element.loContrast,
+  cursor: 'pointer',
+  backgroundColor: 'var(--ai-bg)',
+  'vars': {
+    '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--ai-bg': `var(--ai-bg-idle)`,
+    '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
+    '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`,
+  },
+  ':hover': {
+    boxShadow: mantine.shadows.md,
+  },
+  selectors: {
+    [`${whereLight} .likec4-compound-transparent &`]: {
+      color: vars.element.stroke,
+      opacity: 0.85,
+      vars: {
+        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`,
+        '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
+        '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+      },
+    },
+  },
+})

package/src/controls/action-buttons/ActionButton.tsx

@@ -0,0 +1,66 @@
+import { type ActionIconProps, ActionIcon, Tooltip } from '@mantine/core'
+import clsx from 'clsx'
+import { type HTMLMotionProps, type Variants, m } from 'framer-motion'
+import type { PropsWithoutRef } from 'react'
+import { stopPropagation } from '../../xyflow/utils'
+import { useActionButtonBarCtx } from '../action-button-bar/useActionButtonBarCtx'
+import * as css from './ActionButton.css'
+
+export type ActionButtonProps = PropsWithoutRef<
+  Omit<ActionIconProps & HTMLMotionProps<'div'>, 'onClick' | 'children'> & {
+    onClick: (e: React.MouseEvent) => void
+    IconComponent: React.ComponentType<any>
+    tooltipLabel?: string
+  }
+>
+
+const variants = {
+  idle: {
+    '--icon-scale': 'scale(1)',
+    '--ai-bg': 'var(--ai-bg-idle)',
+  },
+  hovered: {
+    '--icon-scale': 'scale(1)',
+    '--ai-bg': 'var(--ai-bg-hover)',
+  },
+  selected: {},
+} satisfies Variants
+variants['selected'] = variants['hovered']
+
+export const ActionButton = ({
+  onClick: action,
+  IconComponent,
+  tooltipLabel,
+  ...props
+}: ActionButtonProps) => {
+  const ctx = useActionButtonBarCtx() ?? {
+    variants: variants,
+  }
+  return (
+    <Tooltip
+      fz="xs"
+      color="dark"
+      label={tooltipLabel ?? ''}
+      disabled={!tooltipLabel}
+      withinPortal={false}
+      offset={2}
+      openDelay={600}>
+      <ActionIcon
+        component={m.div}
+        className={clsx('nodrag nopan', css.btn)}
+        radius="md"
+        role="button"
+        onClick={action}
+        onDoubleClick={stopPropagation}
+        {...ctx}
+        {...props}
+      >
+        <IconComponent
+          style={{
+            width: '70%',
+            transform: 'var(--icon-scale)',
+          }} />
+      </ActionIcon>
+    </Tooltip>
+  )
+}

package/src/controls/action-buttons/ActionButtons.tsx

@@ -0,0 +1,138 @@
+import type { Fqn } from '@likec4/core'
+import { IconFileSymlink, IconId, IconTransform, IconZoomScan } from '@tabler/icons-react'
+import { useCallback } from 'react'
+import { useDiagramState, useDiagramStoreApi } from '../../hooks'
+import { type ActionButtonProps, ActionButton } from './ActionButton'
+
+export type NodeActionButtonProps = Omit<ActionButtonProps, 'onClick' | 'IconComponent' | 'tooltipLabel'> & {
+  fqn: Fqn
+}
+
+// Browse Relationships
+
+export const BrowseRelationshipsButton = ({
+  fqn,
+  ...props
+}: NodeActionButtonProps) => {
+  const {
+    openOverlay,
+  } = useDiagramState(s => ({
+    openOverlay: s.openOverlay,
+  }))
+
+  const onBrowseRelationships = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    openOverlay({ relationshipsOf: fqn })
+  }, [openOverlay, fqn])
+
+  return (
+    <ActionButton
+      {...props}
+      onClick={onBrowseRelationships}
+      IconComponent={IconTransform}
+      tooltipLabel="Browse relationships"
+    />
+  )
+}
+
+// Navigate to
+// It triggers the onNavigateTo event from the xynode (node should have a navigateTo property)
+export type NavigateToButtonProps = Omit<ActionButtonProps, 'onClick' | 'IconComponent' | 'tooltipLabel'> & {
+  xynodeId: string
+}
+export const NavigateToButton = ({
+  xynodeId,
+  ...props
+}: NavigateToButtonProps) => {
+  const store = useDiagramStoreApi()
+
+  const onNavigateTo = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    store.getState().triggerOnNavigateTo(xynodeId, e)
+  }, [store, xynodeId])
+
+  return (
+    <ActionButton
+      {...props}
+      onClick={onNavigateTo}
+      IconComponent={IconZoomScan}
+      tooltipLabel="Open scoped view"
+    />
+  )
+}
+
+// Open details
+const VariantsDetailsBtn = {
+  idle: {
+    '--ai-bg': 'var(--ai-bg-idle)',
+    scale: 1,
+    opacity: 0.5,
+    originX: 0.45,
+    originY: 0.55,
+  },
+  selected: {},
+  hovered: {
+    scale: 1.2,
+    opacity: 0.7,
+  },
+  'hovered:details': {
+    scale: 1.44,
+    opacity: 1,
+  },
+  'tap:details': {
+    scale: 1.15,
+  },
+}
+VariantsDetailsBtn['selected'] = VariantsDetailsBtn['hovered']
+
+export const OpenDetailsButton = ({
+  fqn,
+  ...props
+}: NodeActionButtonProps) => {
+  const {
+    openOverlay,
+  } = useDiagramState(s => ({
+    openOverlay: s.openOverlay,
+  }))
+
+  const onOpenDetails = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    openOverlay({ elementDetails: fqn })
+  }, [openOverlay, fqn])
+
+  return (
+    <ActionButton
+      variants={VariantsDetailsBtn}
+      onClick={onOpenDetails}
+      IconComponent={IconId}
+      tooltipLabel="Open details"
+      data-animate-target="details"
+      {...props}
+    />
+  )
+}
+
+// Open element source
+
+export const OpenSourceButton = ({
+  fqn,
+  ...props
+}: NodeActionButtonProps) => {
+  const diagramApi = useDiagramStoreApi()
+
+  const onOpenSource = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    diagramApi.getState().onOpenSource?.({
+      element: fqn,
+    })
+  }, [diagramApi, fqn])
+
+  return (
+    <ActionButton
+      {...props}
+      onClick={onOpenSource}
+      IconComponent={IconFileSymlink}
+      tooltipLabel="Open source"
+    />
+  )
+}

package/src/hooks/useDiagramState.ts

@@ -2,10 +2,16 @@ import { shallowEqual } from 'fast-equals'
 import { useContext } from 'react'
 import { useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional'
 
+import type { ViewId } from '@likec4/core'
 import { DiagramContext } from '../state/DiagramContext'
 import type { DiagramState, DiagramStoreApi } from '../state/diagramStore'
 
-function useDiagramState<StateSlice = unknown>(
+const selectViewId = (state: DiagramState) => state.view.id
+export function useCurrentViewId(): ViewId {
+  return useDiagramState(selectViewId)
+}
+
+export function useDiagramState<StateSlice = unknown>(
   selector: (state: DiagramState) => StateSlice,
   equalityFn?: (a: StateSlice, b: StateSlice) => boolean
 ): StateSlice {
@@ -18,7 +24,7 @@ function useDiagramState<StateSlice = unknown>(
   return useZustandStore(store, selector, equalityFn ?? shallowEqual)
 }
 
-function useDiagramStoreApi(): DiagramStoreApi {
+export function useDiagramStoreApi(): DiagramStoreApi {
   const store = useContext(DiagramContext)
 
   if (store === null) {
@@ -28,4 +34,3 @@ function useDiagramStoreApi(): DiagramStoreApi {
   return store
 }
 export type { DiagramState, DiagramStoreApi }
-export { useDiagramState, useDiagramStoreApi }

package/src/hooks/useXYFlow.ts

@@ -1,14 +1,15 @@
-import { useNodesData, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
+import { useInternalNode, useNodesData, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { useCallback } from 'react'
-import type { XYFlowEdge, XYFlowNode, XYFlowState } from '../xyflow/types'
+import type { DiagramFlowTypes } from '../xyflow/types'
 
-export const useXYFlow = useReactFlow<XYFlowNode, XYFlowEdge>
+export const useXYFlow = useReactFlow<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>
 
-export const useXYNodesData = useNodesData<XYFlowNode>
+export const useXYNodesData = useNodesData<DiagramFlowTypes.Node>
+export const useXYInternalNode = useInternalNode<DiagramFlowTypes.Node>
 
 export function useXYStore<StateSlice = unknown>(
-  selector: (state: XYFlowState) => StateSlice,
+  selector: (state: DiagramFlowTypes.XYFlowState) => StateSlice,
   equalityFn?: (a: StateSlice, b: StateSlice) => boolean
 ): StateSlice {
   return useStore(
@@ -16,15 +17,15 @@ export function useXYStore<StateSlice = unknown>(
     equalityFn ?? shallowEqual
   )
 }
-export const useXYStoreApi = useStoreApi<XYFlowNode, XYFlowEdge>
+export const useXYStoreApi = useStoreApi<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>
 
-export function useXYEdgesData(edgeIds: string[]): Pick<XYFlowEdge, 'id' | 'data'>[] {
+export function useXYEdgesData(edgeIds: string[]): Pick<DiagramFlowTypes.Edge, 'id' | 'data'>[] {
   const ids = edgeIds.join(',')
   const edgesData = useXYStore(
     useCallback(
       (s) => {
-        const data = [] as Pick<XYFlowEdge, 'id' | 'data'>[]
+        const data = [] as Pick<DiagramFlowTypes.Edge, 'id' | 'data'>[]
         for (const id of edgeIds) {
           const edge = s.edgeLookup.get(id)
           if (edge) {

package/src/index.ts

@@ -1,20 +1,26 @@
 import '@xyflow/react/dist/style.css'
 
 export { LikeC4Diagram } from './LikeC4Diagram'
+export type { LikeC4DiagramProps } from './LikeC4Diagram'
+
 export {
   useLikeC4DiagramView,
+  useLikeC4ElementModel,
+  useLikeC4ElementsTree,
   useLikeC4Model,
   useLikeC4View,
   useLikeC4ViewModel,
-  useLikeC4Views
-} from './likec4model/useLikeC4Model'
+  useLikeC4Views,
+} from './likec4model'
 export { LikeC4ModelProvider } from './LikeC4ModelProvider'
-export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 
 export { useSetState } from './hooks/useSetState'
 export { useUpdateEffect } from './hooks/useUpdateEffect'
-export type * from './LikeC4Diagram'
+export { vars, xyvars } from './theme-vars'
+
 export type * from './LikeC4Diagram.props'
-export type * from './LikeC4ModelProvider'
-export type * from './StaticLikeC4Diagram'
+
 export type * from './xyflow/types'
+
+export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
+export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram'

package/src/likec4model/index.ts

@@ -1,2 +1,12 @@
-export * from './useLikeC4ElementsTree'
-export * from './useLikeC4Model'
+export {
+  useLikeC4ElementsTree,
+} from './useLikeC4ElementsTree'
+export {
+  useLikeC4CurrentViewModel,
+  useLikeC4DiagramView,
+  useLikeC4ElementModel,
+  useLikeC4Model,
+  useLikeC4View,
+  useLikeC4ViewModel,
+  useLikeC4Views,
+} from './useLikeC4Model'

package/src/likec4model/useLikeC4ElementsTree.ts

@@ -1,11 +1,4 @@
-import {
-  compareNatural,
-  type Fqn,
-  type LikeC4DiagramModel,
-  type LikeC4Model,
-  type LikeC4ViewModel,
-  type ViewID
-} from '@likec4/core'
+import { compareNatural, type Fqn, type LikeC4Model, type ViewId } from '@likec4/core'
 import { useMemo } from 'react'
 import { useLikeC4Model } from './useLikeC4Model'
 
@@ -18,12 +11,12 @@ interface LikeC4ModelTreeNodeData {
 const sortByLabel = (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTreeNodeData) => compareNatural(a.label, b.label)
 
 function buildNode(
-  element: LikeC4Model.ElementModel | LikeC4DiagramModel.Element | LikeC4ViewModel.Element
+  element: LikeC4Model.Node | LikeC4Model.Element
 ): LikeC4ModelTreeNodeData {
   return {
     label: element.title,
     value: element.id,
-    children: element.children().map(buildNode).sort(sortByLabel)
+    children: [...element.children()].map(buildNode).sort(sortByLabel)
   }
 }
 
@@ -31,14 +24,14 @@ function buildNode(
  * Returns a tree of elements in the model.
  * If `viewId` is provided, returns the tree of elements in the view.
  */
-export function useLikeC4ElementsTree(viewId?: ViewID): LikeC4ModelTreeNodeData[] {
+export function useLikeC4ElementsTree(viewId?: ViewId): LikeC4ModelTreeNodeData[] {
   const model = useLikeC4Model(true)
   return useMemo(() => {
     if (viewId) {
       const view = model.view(viewId)
-      return view.roots().map(buildNode).sort(sortByLabel)
+      return [...view.roots()].map(buildNode).sort(sortByLabel)
     } else {
-      return model.roots().map(buildNode).sort(sortByLabel)
+      return [...model.roots()].map(buildNode).sort(sortByLabel)
     }
   }, [model, viewId ?? null])
 }

package/src/likec4model/useLikeC4Model.ts

@@ -1,7 +1,8 @@
-import { type ComputedView, type DiagramView, type LikeC4Model, type ViewID } from '@likec4/core'
+import { type ComputedView, type DiagramView, type Fqn, LikeC4Model, type ViewId } from '@likec4/core'
 import { useContext } from 'react'
 import { isDefined, isNonNullish, isString } from 'remeda'
 import type { LiteralUnion } from 'type-fest'
+import { useCurrentViewId } from '../hooks'
 import { LikeC4ModelContext } from './LikeC4ModelContext'
 
 export function useLikeC4Model(): LikeC4Model | null
@@ -9,11 +10,11 @@ export function useLikeC4Model(strict: true): LikeC4Model
 export function useLikeC4Model(strict: boolean): LikeC4Model | null
 export function useLikeC4Model(strict: true, type: 'layouted'): LikeC4Model.Layouted
 export function useLikeC4Model(strict: true, type: 'computed'): LikeC4Model.Computed
-export function useLikeC4Model(strict: true, type: LikeC4Model['type'] | undefined): LikeC4Model
+export function useLikeC4Model(strict: true, type: 'layouted' | 'computed' | undefined): LikeC4Model
 export function useLikeC4Model(strict: boolean, type: 'layouted'): LikeC4Model.Layouted | null
 export function useLikeC4Model(strict: boolean, type: 'computed'): LikeC4Model.Computed | null
-export function useLikeC4Model(strict: boolean, type: LikeC4Model['type'] | undefined): LikeC4Model | null
-export function useLikeC4Model(strict?: boolean, type?: LikeC4Model['type']) {
+export function useLikeC4Model(strict: boolean, type: 'layouted' | 'computed' | undefined): LikeC4Model | null
+export function useLikeC4Model(strict?: boolean, type?: 'layouted' | 'computed') {
   const model = useContext(LikeC4ModelContext)
 
   if (isString(type) && isNonNullish(model) && model.type !== type) {
@@ -26,33 +27,42 @@ export function useLikeC4Model(strict?: boolean, type?: LikeC4Model['type']) {
   return model
 }
 
-export function useLikeC4Views(): LikeC4Model.SourceModel['views'] {
-  return useLikeC4Model(true).sourcemodel.views
+export function useLikeC4Views(): Record<ViewId, ComputedView | DiagramView> {
+  return useLikeC4Model(true).$model.views
 }
 
-export function useLikeC4ViewModel(viewId: LiteralUnion<ViewID, string>): LikeC4Model.ViewModel {
+export function useLikeC4ViewModel(viewId: LiteralUnion<ViewId, string>): LikeC4Model.View {
+  return useLikeC4Model(true).view(viewId)
+}
+
+export function useLikeC4CurrentViewModel(): LikeC4Model.View {
+  const viewId = useCurrentViewId()
   return useLikeC4Model(true).view(viewId)
 }
 
 /**
  * Parsed view, computed or layouted
  */
-export function useLikeC4View(viewId: LiteralUnion<ViewID, string>): ComputedView | DiagramView | null {
+export function useLikeC4View(viewId: LiteralUnion<ViewId, string>): ComputedView | DiagramView | null {
   const model = useLikeC4Model(true)
   try {
-    return model.view(viewId).view
+    return model.view(viewId).$view
   } catch (error) {
     console.warn(error)
     return null
   }
 }
 
-export function useLikeC4DiagramView(viewId: LiteralUnion<ViewID, string>): DiagramView | null {
+export function useLikeC4DiagramView(viewId: LiteralUnion<ViewId, string>): DiagramView | null {
   const model = useLikeC4Model(true, 'layouted')
   try {
-    return model.view(viewId).view
+    return model.view(viewId).$view
   } catch (error) {
     console.warn(error)
     return null
   }
 }
+
+export function useLikeC4ElementModel(fqn: LiteralUnion<Fqn, string>): LikeC4Model.Element {
+  return useLikeC4Model(true).element(fqn)
+}

package/src/overlays/Overlays.tsx

@@ -1,9 +1,10 @@
-import { ActionIcon, Box, FocusTrap, RemoveScroll } from '@mantine/core'
+import { ActionIcon, Box, Button, FocusTrap, Group, Notification, RemoveScroll, Text } from '@mantine/core'
 import { useHotkeys } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import { AnimatePresence, m } from 'framer-motion'
 import { memo, type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { ErrorBoundary, type FallbackProps } from 'react-error-boundary'
 import { isNullish } from 'remeda'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
 import { EdgeDetailsXYFlow } from './edge-details/EdgeDetailsXYFlow'
@@ -12,6 +13,36 @@ import { OverlayContext, useOverlayDialog } from './OverlayContext'
 import * as css from './Overlays.css'
 import { RelationshipsOverlay } from './relationships-of/RelationshipsOverlay'
 
+function Fallback({ error, resetErrorBoundary }: FallbackProps) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+  const errorString = error instanceof Error ? error.message : 'Unknown error'
+  return (
+    <Box className={css.container} p={'lg'}>
+      <Notification
+        icon={<IconX style={{ width: 16, height: 16 }} />}
+        styles={{
+          icon: {
+            alignSelf: 'flex-start'
+          }
+        }}
+        color={'red'}
+        title={'Oops, something went wrong'}
+        py={'lg'}
+        withCloseButton={false}>
+        <Text
+          style={{
+            whiteSpace: 'preserve-breaks'
+          }}>
+          {errorString}
+        </Text>
+        <Group gap={'xs'} mt="sm">
+          <Button color="gray" size="xs" variant="light" onClick={() => resetErrorBoundary()}>Reset</Button>
+        </Group>
+      </Notification>
+    </Box>
+  )
+}
+
 export const Overlays = memo(() => {
   const diagramStore = useDiagramStoreApi()
   const {
@@ -53,68 +84,70 @@ export const Overlays = memo(() => {
 
   return (
     <OverlayContext.Provider value={ctxValue}>
-      <AnimatePresence initial={false} key={viewId} onExitComplete={onExitComplete}>
-        {activeOverlay?.elementDetails && (
-          <ElementDetailsCard key={'details card'} fqn={activeOverlay.elementDetails} />
-        )}
-      </AnimatePresence>
-      <AnimatePresence initial={false} onExitComplete={onExitComplete}>
-        {activeOverlay && isNullish(activeOverlay.elementDetails) && (
-          <RemoveScroll forwardProps>
-            <Box
-              component={m.div}
-              className={css.container}
-              data-likec4-color="gray"
-              initial={{
-                '--backdrop-blur': '0px',
-                '--backdrop-opacity': '0%',
-                opacity: 0,
-                translateY: -15
-              }}
-              animate={{
-                '--backdrop-blur': '10px',
-                '--backdrop-opacity': '70%',
-                opacity: 1,
-                translateY: 0
-              }}
-              exit={{
-                '--backdrop-blur': '1px',
-                '--backdrop-opacity': '0%',
-                translateY: -5,
-                opacity: 0,
-                transition: {
-                  duration: .2
-                }
-              }}
-            >
-              <FocusTrap>
-                {activeOverlay.relationshipsOf && <RelationshipsOverlay subjectId={activeOverlay.relationshipsOf} />}
-                {activeOverlay.edgeDetails && (
-                  <XYFlowProvider
-                    defaultNodes={[]}
-                    defaultEdges={[]}>
-                    <EdgeDetailsXYFlow edgeId={activeOverlay.edgeDetails} />
-                  </XYFlowProvider>
-                )}
-                <Box pos={'absolute'} top={'1rem'} right={'1rem'}>
-                  <ActionIcon
-                    variant="default"
-                    // color="gray"
-                    size={'lg'}
-                    // data-autofocus
-                    // autoFocus
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      ctxValue.close()
-                    }}>
-                    <IconX />
-                  </ActionIcon>
-                </Box>
-              </FocusTrap>
-            </Box>
-          </RemoveScroll>
-        )}
-      </AnimatePresence>
+      <ErrorBoundary FallbackComponent={Fallback} onReset={() => ctxValue.close()}>
+        <AnimatePresence initial={false} key={viewId} onExitComplete={onExitComplete}>
+          {activeOverlay?.elementDetails && (
+            <ElementDetailsCard key={'details card'} fqn={activeOverlay.elementDetails} />
+          )}
+        </AnimatePresence>
+        <AnimatePresence initial={false} onExitComplete={onExitComplete}>
+          {activeOverlay && isNullish(activeOverlay.elementDetails) && (
+            <RemoveScroll forwardProps>
+              <Box
+                component={m.div}
+                className={css.container}
+                data-likec4-color="gray"
+                initial={{
+                  '--backdrop-blur': '0px',
+                  '--backdrop-opacity': '0%',
+                  opacity: 0,
+                  translateY: -15
+                }}
+                animate={{
+                  '--backdrop-blur': '10px',
+                  '--backdrop-opacity': '70%',
+                  opacity: 1,
+                  translateY: 0
+                }}
+                exit={{
+                  '--backdrop-blur': '1px',
+                  '--backdrop-opacity': '0%',
+                  translateY: -5,
+                  opacity: 0,
+                  transition: {
+                    duration: .2
+                  }
+                }}
+              >
+                <FocusTrap>
+                  {activeOverlay.relationshipsOf && <RelationshipsOverlay subjectId={activeOverlay.relationshipsOf} />}
+                  {activeOverlay.edgeDetails && (
+                    <XYFlowProvider
+                      defaultNodes={[]}
+                      defaultEdges={[]}>
+                      <EdgeDetailsXYFlow edgeId={activeOverlay.edgeDetails} />
+                    </XYFlowProvider>
+                  )}
+                  <Box pos={'absolute'} top={'1rem'} right={'1rem'}>
+                    <ActionIcon
+                      variant="default"
+                      // color="gray"
+                      size={'lg'}
+                      // data-autofocus
+                      // autoFocus
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        ctxValue.close()
+                      }}>
+                      <IconX />
+                    </ActionIcon>
+                  </Box>
+                </FocusTrap>
+              </Box>
+            </RemoveScroll>
+          )}
+        </AnimatePresence>
+      </ErrorBoundary>
     </OverlayContext.Provider>
   )
 })