@likec4/diagram 1.28.0 → 1.28.1

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

@@ -23,8 +23,8 @@ import {
 import { useCallbackRef } from '@mantine/hooks'
 import { IconChevronRight } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { m } from 'framer-motion'
-import { useEffect, useMemo } from 'react'
+import * as m from 'motion/react-m'
+import { type KeyboardEventHandler, useCallback, useEffect, useMemo } from 'react'
 import { first, indexBy, isEmpty, only, partition, pipe, prop, reduce } from 'remeda'
 import { IconOrShapeRenderer } from '../../../context/IconRenderer'
 import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree'
@@ -61,11 +61,8 @@ const btn = buttonsva()
 export function ElementsColumn() {
   const search = useNormalizedSearch()
   const model = useLikeC4Model(true)
-  const {
-    all,
-    byid,
-    roots: data,
-  } = useMemo(() => {
+
+  const data = useMemo(() => {
     const searchTerms = search.split('.')
     let elements
     if (isEmpty(search) || search === 'kind:') {
@@ -82,9 +79,9 @@ export function ElementsColumn() {
           .toLocaleLowerCase().includes(search)
       })
     }
+    const byid = {} as Record<Fqn, LikeC4ModelTreeNodeData>
     const { all, roots } = pipe(
-      elements,
-      toArray(),
+      [...elements],
       sortParentsFirst,
       reduce((acc, element) => {
         const treeItem: LikeC4ModelTreeNodeData = {
@@ -94,6 +91,7 @@ export function ElementsColumn() {
           searchTerms,
           children: [],
         }
+        byid[treeItem.value] = treeItem
         const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value))
         if (parent) {
           parent.children.push(treeItem)
@@ -112,14 +110,42 @@ export function ElementsColumn() {
     )
     return {
       all,
-      byid: indexBy(all, prop('value')),
+      byid,
       roots: roots.sort(sortByLabel),
     }
   }, [model, search])
 
+  const handleClick = useHandleElementSelection()
+
+  if (data.all.length === 0) {
+    return <NothingFound />
+  }
+
+  return <ElementsTree data={data} handleClick={handleClick} />
+}
+
+const setHoveredNode = () => {}
+
+function ElementsTree({
+  data: {
+    all,
+    byid,
+    roots,
+  },
+  handleClick,
+}: {
+  data: {
+    all: LikeC4ModelTreeNodeData[]
+    byid: Record<Fqn, LikeC4ModelTreeNodeData>
+    roots: LikeC4ModelTreeNodeData[]
+  }
+  handleClick: (element: LikeC4Model.Element) => void
+}) {
   const tree = useTree({
     multiple: false,
   })
+  tree.setHoveredNode = setHoveredNode
+
   useEffect(() => {
     tree.collapseAllNodes()
     for (const nd of all) {
@@ -129,66 +155,63 @@ export function ElementsColumn() {
     }
   }, [all])
 
-  const handleClick = useHandleElementSelection()
+  const onKeyDownCapture: KeyboardEventHandler = useCallbackRef((e) => {
+    const target = e.target as HTMLElement
+    const id = target.getAttribute('data-value')
+    const node = !!id && byid[id as Fqn]
+    if (!node) return
+    if (e.key === 'ArrowUp') {
+      if (id === roots[0]?.value) {
+        stopAndPrevent(e)
+        moveFocusToSearchInput()
+      }
+      return
+    }
+    if (e.key === 'ArrowRight') {
+      const hasChildren = node.children.length > 0
+      if (hasChildren && tree.expandedState[id] === false) {
+        return
+      }
+      const label = (e.target as HTMLLIElement).querySelector<HTMLLIElement>('.mantine-Tree-label') ?? target
+      const maxY = label.getBoundingClientRect().y
+      const viewButtons = [...document.querySelectorAll<HTMLButtonElement>(
+        `[data-likec4-search-views] .${styles.focusable}`,
+      )]
+      let view = viewButtons.length > 1
+        ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
+        : null
+      view ??= first(viewButtons)
+      if (view) {
+        stopAndPrevent(e)
+        view.focus()
+      }
+      return
+    }
+    if (e.key === ' ' || e.key === 'Enter') {
+      stopAndPrevent(e)
+      handleClick(node.element)
+      return
+    }
+  })
 
   return (
-    <>
-      {data.length === 0 && <NothingFound />}
-      <Tree
-        data-likec4-search-elements
-        allowRangeSelection={false}
-        clearSelectionOnOutsideClick
-        selectOnClick={false}
-        tree={tree}
-        data={data}
-        levelOffset={'lg'}
-        classNames={{
-          root: styles.treeRoot,
-          node: cx(styles.focusable, styles.treeNode),
-          label: styles.treeLabel,
-          subtree: styles.treeSubtree,
-        }}
-        onKeyDownCapture={(e) => {
-          const target = e.target as HTMLElement
-          const id = target.getAttribute('data-value')
-          const node = !!id && byid[id as Fqn]
-          if (!node) return
-          if (e.key === 'ArrowUp') {
-            if (id === data[0]?.value) {
-              stopAndPrevent(e)
-              moveFocusToSearchInput()
-            }
-            return
-          }
-          if (e.key === 'ArrowRight') {
-            const hasChildren = node.children.length > 0
-            if (hasChildren && tree.expandedState[id] === false) {
-              return
-            }
-            const label = (e.target as HTMLLIElement).querySelector<HTMLLIElement>('.mantine-Tree-label') ?? target
-            const maxY = label.getBoundingClientRect().y
-            const viewButtons = [...document.querySelectorAll<HTMLButtonElement>(
-              `[data-likec4-search-views] .${styles.focusable}`,
-            )]
-            let view = viewButtons.length > 1
-              ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
-              : null
-            view ??= first(viewButtons)
-            if (view) {
-              stopAndPrevent(e)
-              view.focus()
-            }
-            return
-          }
-          if (e.key === ' ' || e.key === 'Enter') {
-            stopAndPrevent(e)
-            handleClick(node.element)
-            return
-          }
-        }}
-        renderNode={ElementTreeNode}
-      />
-    </>
+    <Tree
+      data-likec4-search-elements
+      allowRangeSelection={false}
+      clearSelectionOnOutsideClick
+      selectOnClick={false}
+      tree={tree}
+      data={roots}
+      levelOffset={'lg'}
+      classNames={{
+        root: styles.treeRoot,
+        node: cx(styles.focusable, styles.treeNode),
+        label: styles.treeLabel,
+        subtree: styles.treeSubtree,
+      }}
+      onKeyDownCapture={onKeyDownCapture}
+      renderNode={ElementTreeNode}
+    />
   )
 }
 
@@ -212,7 +235,7 @@ function ElementTreeNode(
   const key = `@tree.${node.value}`
 
   return (
-    <m.div layoutId={key} key={key} {...elementProps as any}>
+    <m.div layoutId={key} {...elementProps as any}>
       <ActionIcon
         variant="transparent"
         size={16}
@@ -278,7 +301,7 @@ function ElementTreeNode(
 function useHandleElementSelection() {
   const navigateTo = useCloseSearchAndNavigateTo()
 
-  return useCallbackRef((element: LikeC4Model.Element) => {
+  return useCallback((element: LikeC4Model.Element) => {
     const views = [...element.views()]
     if (views.length === 0) {
       return
@@ -294,5 +317,5 @@ function useHandleElementSelection() {
       scoped,
       others,
     })
-  })
+  }, [setPickView, navigateTo])
 }

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

@@ -1,11 +1,11 @@
+import { css } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
 import {
   ActionIcon,
-  Box,
   Grid,
   GridCol,
   Group,
   Portal,
-  RemoveScroll,
   ScrollArea,
   ScrollAreaAutosize,
   Stack,
@@ -20,24 +20,25 @@ import {
   useWindowEvent,
 } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
-import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
-import { useRef } from 'react'
+import { AnimatePresence, LayoutGroup, m } from 'motion/react'
+import { memo, useRef } from 'react'
 import { SearchControl } from '../../../components/SearchControl'
 import { useMantinePortalProps } from '../../../hooks'
 import { ElementsColumn } from './ElementsColumn'
-import * as css from './LikeC4Search.css'
+import * as styles from './LikeC4Search.css'
 import { LikeC4SearchInput } from './SearchInput'
 import {
   LikeC4SearchContext,
   setPickView,
   useCloseSearch,
+  useIsPickViewActive,
   usePickView,
   wasResetPickView,
 } from './state'
 import { stopAndPrevent } from './utils'
 import { ViewButton, ViewsColumn } from './ViewsColum'
 
-export function LikeC4Search() {
+export const LikeC4Search = memo(() => {
   const [searchOpened, searchOps] = useDisclosure(false)
   useHotkeys([
     ['mod+k', () => searchOps.toggle(), {
@@ -69,41 +70,38 @@ export function LikeC4Search() {
           e.stopPropagation()
           searchOps.toggle()
         }} />
-      <Portal {...portalProps}>
-        <RemoveScroll enabled={searchOpened}>
-          <AnimatePresence onExitComplete={onExitComplete}>
-            {searchOpened && (
-              <>
-                <m.div
-                  key={'backdrop'}
-                  className={css.backdrop}
-                  initial={{ opacity: 0.7 }}
-                  animate={{
-                    opacity: 1,
-                    transition: {
-                      duration: 0.1,
-                    },
-                  }}
-                  exit={{
-                    opacity: 0,
-                    transition: {
-                      duration: 0.075,
-                    },
-                  }}>
-                </m.div>
-                <LikeC4SearchOverlay key="overlay" />
-              </>
-            )}
-          </AnimatePresence>
-        </RemoveScroll>
+      <Portal {...portalProps} reuseTargetNode>
+        <AnimatePresence onExitComplete={onExitComplete}>
+          {searchOpened && (
+            <m.div
+              key={'backdrop'}
+              className={styles.backdrop}
+              initial={{ opacity: 0.7 }}
+              animate={{
+                opacity: 1,
+                transition: {
+                  duration: 0.13,
+                },
+              }}
+              exit={{
+                opacity: 0,
+                transition: {
+                  duration: 0.13,
+                },
+              }}>
+            </m.div>
+          )}
+          {searchOpened && <LikeC4SearchOverlay key="overlay" />}
+        </AnimatePresence>
       </Portal>
     </LikeC4SearchContext>
   )
-}
+})
+LikeC4Search.displayName = 'LikeC4Search'
 
-function LikeC4SearchOverlay() {
+const LikeC4SearchOverlay = () => {
   const close = useCloseSearch()
-  const ref = useFocusTrap()
+  const pickViewActive = useIsPickViewActive()
 
   useWindowEvent(
     'keydown',
@@ -120,14 +118,9 @@ function LikeC4SearchOverlay() {
 
   return (
     <m.div
-      ref={ref}
-      className={css.root}
-      data-likec4-search
-      // initial={{
-      //   opacity: 0,
-      //   // scale: 0.9,
-      //   translateY: -20,
-      // }}
+      className={styles.root}
+      data-likec4-search="true"
+      initial={false}
       animate={{
         opacity: 1,
         scale: 1,
@@ -136,8 +129,9 @@ function LikeC4SearchOverlay() {
       exit={{
         opacity: 0,
         scale: 0.9,
+        translateY: -30,
         transition: {
-          duration: 0.1,
+          duration: 0.13,
         },
       }}
     >
@@ -166,16 +160,16 @@ function LikeC4SearchOverlay() {
         </GridCol>
       </Grid>
       <Grid
-        style={{
+        className={css({
           containerName: 'likec4-search-elements',
           containerType: 'size',
           overflow: 'hidden',
           flexGrow: 1,
-        }}>
+        })}>
         <GridCol span={6}>
           <ScrollArea
             type="hover"
-            className={css.scrollArea}
+            className={styles.scrollArea}
             pr="xs"
             scrollbars="y">
             <AnimatePresence>
@@ -188,7 +182,7 @@ function LikeC4SearchOverlay() {
         <GridCol span={6}>
           <ScrollArea
             type="hover"
-            className={css.scrollArea}
+            className={styles.scrollArea}
             pr="xs"
             scrollbars="y">
             <AnimatePresence>
@@ -199,8 +193,7 @@ function LikeC4SearchOverlay() {
           </ScrollArea>
         </GridCol>
       </Grid>
-      <Box></Box>
-      <PickView />
+      {pickViewActive && <PickView />}
     </m.div>
   )
 }
@@ -220,7 +213,7 @@ function PickView() {
           <>
             <m.div
               key="backdrop"
-              className={css.pickviewBackdrop}
+              className={styles.pickviewBackdrop}
               onClick={e => {
                 e.stopPropagation()
                 setPickView(null)
@@ -248,7 +241,7 @@ function PickView() {
                   duration: 0.1,
                 },
               }}
-              className={css.pickview}
+              className={styles.pickview}
               data-likec4-search-views
               ref={focusTrapRef}>
               <Group px="sm" py="md" justify="space-between">
@@ -266,7 +259,7 @@ function PickView() {
 
               <ScrollAreaAutosize mah={'calc(100vh - 8rem - 50px)'} type="never">
                 {pickview.scoped.length > 0 && (
-                  <Stack gap={'sm'} px={'sm'} className={css.pickviewGroup}>
+                  <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
                     <Title order={6} c={'dimmed'}>scoped views of the element</Title>
                     {pickview.scoped.map((view, i) => (
                       <ViewButton
@@ -283,7 +276,7 @@ function PickView() {
                 )}
 
                 {pickview.others.length > 0 && (
-                  <Stack gap={'sm'} px={'sm'} className={css.pickviewGroup}>
+                  <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
                     <Title order={6} c={'dimmed'}>views including this element</Title>
                     {pickview.others.map((view, i) => (
                       <ViewButton

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

@@ -4,11 +4,11 @@ import {
   isDeploymentView,
 } from '@likec4/core'
 import { cx } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
 import {
   type ElementProps,
   type UnstyledButtonProps,
   Badge,
-  Box,
   createScopedKeydownHandler,
   Group,
   Highlight,
@@ -18,7 +18,7 @@ import {
   VisuallyHidden,
 } from '@mantine/core'
 import { IconStack2, IconZoomScan } from '@tabler/icons-react'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { first } from 'remeda'
 import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'

package/src/likec4diagram/ui/search/state.ts

@@ -3,7 +3,7 @@ import { createSafeContext } from '@mantine/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useStore } from '@nanostores/react'
 import { atom, computed, onMount } from 'nanostores'
-import { useDeferredValue } from 'react'
+import { useCallback, useDeferredValue } from 'react'
 import { useDiagram } from '../../../hooks/useDiagram'
 
 const $search = atom('')
@@ -59,18 +59,20 @@ export function useIsPickViewActive() {
 export function useCloseSearchAndNavigateTo() {
   const diagram = useDiagram()
   const close = useCloseSearch()
-  return useCallbackRef((viewId: ViewId, fromElementFqn?: Fqn) => {
+  return useCallback((viewId: ViewId, fromElementFqn?: Fqn) => {
     close(() => {
       fromElementFqn ??= $pickView.get()?.elementFqn
       setPickView(null)
       const fromNode = fromElementFqn
         ? diagram.getContext().view.nodes.find(n => DiagramNode.modelRef(n) === fromElementFqn)?.id
         : undefined
-      if (diagram.currentView.id === viewId && fromNode) {
-        diagram.focusNode(fromNode)
+      if (diagram.currentView.id !== viewId) {
+        diagram.navigateTo(viewId, fromNode)
         return
       }
-      diagram.navigateTo(viewId, fromNode)
+      if (fromNode) {
+        diagram.focusNode(fromNode)
+      }
     })
-  })
+  }, [close, diagram])
 }

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.tsx

@@ -6,7 +6,7 @@ import {
   IconPlayerStopFilled,
 } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { AnimatePresence, m } from 'framer-motion'
+import { AnimatePresence, m } from 'motion/react'
 import { isNonNull, isTruthy } from 'remeda'
 import { useXYStore } from '../../../hooks'
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'

package/src/overlays/Overlays.tsx

@@ -2,8 +2,8 @@ import { nonexhaustive } from '@likec4/core'
 import { Box, Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'
-import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from 'framer-motion'
-import { animate } from 'framer-motion/dom'
+import { animate } from 'motion'
+import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from 'motion/react'
 import { memo, useEffect, useMemo } from 'react'
 import { type FallbackProps, ErrorBoundary } from 'react-error-boundary'
 import { isNonNullish } from 'remeda'

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

@@ -38,7 +38,7 @@ import { useSessionStorage, useViewportSize } from '@mantine/hooks'
 import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
 import { IconExternalLink, IconFileSymlink, IconStack2, IconZoomScan } from '@tabler/icons-react'
 import type { Rect } from '@xyflow/system'
-import { type PanInfo, m, useDragControls, useMotionValue } from 'framer-motion'
+import { type PanInfo, m, useDragControls, useMotionValue } from 'motion/react'
 import { type PropsWithChildren, useCallback, useRef, useState } from 'react'
 import { clamp, isNullish, map, only, partition, pipe } from 'remeda'
 import { Link } from '../../components/Link'

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

@@ -105,6 +105,7 @@ const DeployedInstanceRenderer = (
   )
 }
 
+const setHoveredNode = () => {}
 export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn }) => {
   const element = useLikeC4Model(true).element(elementFqn)
   const deployments = [...element.deployments()]
@@ -112,6 +113,7 @@ export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn
   const tree = useTree({
     multiple: false,
   })
+  tree.setHoveredNode = setHoveredNode
 
   const data = useMemo(() => {
     let roots = [] as TreeNodeData[]

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

@@ -37,13 +37,14 @@ export const ElementLabel = ({
 //   node
 // }: RenderTreeNodePayload) => {
 // }
-
+const setHoveredNode = () => {}
 export function TabPanelStructure({
   element,
 }: TabPanelStructureProps) {
   const tree = useTree({
     multiple: false,
   })
+  tree.setHoveredNode = setHoveredNode
 
   const data = useMemo(() => {
     let seq = 1

package/src/overlays/overlay/Overlay.tsx

@@ -5,7 +5,7 @@ import {
 } from '@mantine/core'
 import { useMergedRef } from '@mantine/hooks'
 import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
-import { m, useReducedMotionConfig } from 'framer-motion'
+import { m, useReducedMotionConfig } from 'motion/react'
 import { type PropsWithChildren, forwardRef, useEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
 import { backdropBlur, backdropOpacity, level as cssVarLevel, overlay as overlayCVA } from './Overlay.css'
@@ -49,6 +49,7 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
   useEffect(() => {
     const cancel = (e: Event) => {
       e.preventDefault()
+      e.stopPropagation()
       close()
     }
     dialogRef.current?.addEventListener('cancel', cancel, { capture: true })