@likec4/diagram 1.31.0 → 1.32.0

package/src/{likec4diagram/ui/search → search/components}/SearchInput.tsx

@@ -1,4 +1,3 @@
-import { compareNatural } from '@likec4/core'
 import {
   Combobox,
   ComboboxDropdown,
@@ -12,15 +11,15 @@ import {
   Text,
   useCombobox,
 } from '@mantine/core'
-import { useDebouncedValue, useFocusWithin, useIsFirstRender, useWindowEvent } from '@mantine/hooks'
+import { useFocusWithin, useWindowEvent } from '@mantine/hooks'
 import { usePreviousDistinct } from '@react-hookz/web'
 import { IconSearch } from '@tabler/icons-react'
-import { type ReactNode } from 'react'
-import { isString, keys, only } from 'remeda'
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
-import * as css from './LikeC4Search.css'
-import { setSearch, useIsPickViewActive, useSearch } from './state'
-import { moveFocusToSearchInput, stopAndPrevent } from './utils'
+import { type ReactNode, memo } from 'react'
+import { keys, only } from 'remeda'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import { useSearch, useSearchActor } from '../hooks'
+import * as css from './styles.css'
+import { focusToFirstFoundElement, moveFocusToSearchInput, stopAndPrevent } from './utils'
 
 function startingWithKind(search: string) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null
@@ -28,25 +27,34 @@ function startingWithKind(search: string) {
 
 const SEARCH_PREFIXES = ['#', 'kind:']
 
-export function LikeC4SearchInput() {
-  const isPickViewActive = useIsPickViewActive()
-  const likec4model = useLikeC4Model(true)
-  const combobox = useCombobox({
-    scrollBehavior: 'smooth',
-  })
+export const LikeC4SearchInput = memo(() => {
+  const { close, searchActorRef } = useSearchActor()
+  const likec4model = useLikeC4Model()
   const { ref, focused } = useFocusWithin<HTMLInputElement>()
-  const search = useSearch()
+  const [search, setSearch] = useSearch()
   const previous = usePreviousDistinct(search)
-  const isFirstRender = useIsFirstRender()
 
-  const [isEmptyForSomeTime] = useDebouncedValue(search === '' && !isFirstRender, isString(previous) ? 500 : 2000)
+  // const [isEmptyForSomeTime, cancel] = useDebouncedValue(
+  //   focused ? search : 'rstrs',
+  //   2000,
+  // )
+  // // useF
+  // // const isEmptyForSomeTime = debouncedSearch === ''
+  // useEffect(() => {
+  //   // cancel()
+  // }, [])
+
+  const combobox = useCombobox({
+    scrollBehavior: 'smooth',
+    loop: false,
+  })
 
   useWindowEvent(
     'keydown',
     (event) => {
       try {
         if (
-          !focused && !isPickViewActive && (
+          !focused && (
             event.key === 'Backspace' ||
             event.key.startsWith('Arrow') ||
             event.key.match(/^\p{L}$/u)
@@ -64,20 +72,18 @@ export function LikeC4SearchInput() {
   let isExactMatch = false
 
   switch (true) {
-    case search === '' && (isEmptyForSomeTime || SEARCH_PREFIXES.includes(previous ?? '')): {
-      options = SEARCH_PREFIXES.map((prefix) => (
-        <ComboboxOption value={prefix} key={prefix}>
-          <Text component="span" opacity={.5} mr={4} fz={'sm'}>Search by</Text>
-          {prefix}
-        </ComboboxOption>
-      ))
-      break
-    }
+    // case search === '' && isEmptyForSomeTime === '': {
+    //   options = SEARCH_PREFIXES.map((prefix) => (
+    //     <ComboboxOption value={prefix} key={prefix}>
+    //       <Text component="span" opacity={.5} mr={4} fz={'sm'}>Search by</Text>
+    //       {prefix}
+    //     </ComboboxOption>
+    //   ))
+    //   break
+    // }
     case search.startsWith('#'): {
       const searchTag = search.toLocaleLowerCase().slice(1)
-      const alloptions = likec4model.allTags().filter((tag) => tag.toLocaleLowerCase().includes(searchTag)).sort(
-        compareNatural,
-      )
+      const alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag))
       isExactMatch = only(alloptions)?.toLocaleLowerCase() === searchTag
       if (alloptions.length === 0) {
         options = [
@@ -98,7 +104,7 @@ export function LikeC4SearchInput() {
     case search.startsWith('kind:'):
     case startingWithKind(search): {
       const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : ''
-      let alloptions = keys(likec4model.$model.specification.elements)
+      let alloptions = keys(likec4model.specification.elements)
       if (term) {
         alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term))
         isExactMatch = only(alloptions)?.toLocaleLowerCase() === term
@@ -130,8 +136,8 @@ export function LikeC4SearchInput() {
           combobox.closeDropdown()
           // Let react to display filtered elements
           setTimeout(() => {
-            document.querySelector<HTMLButtonElement>(`[data-likec4-search] .${css.focusable}`)?.focus()
-          }, 50)
+            focusToFirstFoundElement()
+          }, 350)
         }
       }}
       width={'max-content'}
@@ -149,13 +155,27 @@ export function LikeC4SearchInput() {
           ref={ref}
           id="likec4searchinput"
           placeholder="Search by title, description or start with # or kind:"
+          autoFocus
           tabIndex={0}
           classNames={{
             input: css.input,
           }}
-          size="xl"
+          size="lg"
           value={search}
           leftSection={<IconSearch style={{ width: rem(20) }} stroke={2} />}
+          rightSection={
+            <Input.ClearButton
+              onClick={(e) => {
+                e.stopPropagation()
+                const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch
+                if (search === '' || search === openedWithSearch) {
+                  close()
+                } else {
+                  setSearch('')
+                }
+              }} />
+          }
+          rightSectionPointerEvents="auto"
           onChange={(event) => {
             setSearch(event.currentTarget.value)
             combobox.openDropdown()
@@ -207,6 +227,13 @@ export function LikeC4SearchInput() {
               combobox.closeDropdown()
               return
             }
+            if (
+              e.key === 'ArrowUp' && combobox.dropdownOpened && search === '' && combobox.getSelectedOptionIndex() === 0
+            ) {
+              combobox.closeDropdown()
+              stopAndPrevent(e)
+              return
+            }
             if (
               e.key === 'ArrowDown' && (
                 !combobox.dropdownOpened ||
@@ -217,7 +244,7 @@ export function LikeC4SearchInput() {
             ) {
               combobox.closeDropdown()
               stopAndPrevent(e)
-              document.querySelector<HTMLButtonElement>(`[data-likec4-search] .${css.focusable}`)?.focus()
+              focusToFirstFoundElement()
               return
             }
           }} />
@@ -232,4 +259,4 @@ export function LikeC4SearchInput() {
       </ComboboxDropdown>
     </Combobox>
   )
-}
+})

package/src/{likec4diagram/ui/search → search/components}/ViewsColum.tsx

@@ -1,8 +1,4 @@
-import {
-  type LikeC4Model,
-  type Tag,
-  isDeploymentView,
-} from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { cx } from '@likec4/styles/css'
 import { Box } from '@likec4/styles/jsx'
 import {
@@ -19,11 +15,13 @@ import {
 } from '@mantine/core'
 import { IconStack2, IconZoomScan } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
+import { memo } from 'react'
 import { first } from 'remeda'
-import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import { useCurrentViewId } from '../../hooks/useCurrentViewId'
+import { useDiagram } from '../../hooks/useDiagram'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import { useNormalizedSearch } from '../hooks'
 import { buttonsva } from './_shared.css'
-import { useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
 import { centerY, moveFocusToSearchInput } from './utils'
 import * as styles from './ViewsColumn.css'
 
@@ -33,16 +31,16 @@ export const NothingFound = () => (
   </Box>
 )
 
-export function ViewsColumn() {
-  const search = useNormalizedSearch()
-  let views = [...useLikeC4Model(true).views()]
+export const ViewsColumn = memo(() => {
+  let views = [...useLikeC4Model().views()]
+  let search = useNormalizedSearch()
   if (search) {
     if (search.startsWith('kind:')) {
       views = []
     } else {
       views = views.filter(view => {
         if (search.startsWith('#')) {
-          return view.tags.some((tag: Tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
+          return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
         }
         return (view.title ?? '' + view.$view.description ?? '').toLocaleLowerCase().includes(search)
       })
@@ -58,7 +56,7 @@ export function ViewsColumn() {
         if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
           const maxY = (e.target as HTMLElement).getBoundingClientRect().y
           const elementButtons = [...document.querySelectorAll<HTMLButtonElement>(
-            `[data-likec4-search-elements] .likec4-element-button`,
+            `[data-likec4-search-elements] .likec4-focusable`,
           )]
           let elementButton = elementButtons.length > 1
             ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
@@ -95,7 +93,7 @@ export function ViewsColumn() {
       ))}
     </Stack>
   )
-}
+})
 
 const btn = buttonsva()
 
@@ -109,7 +107,8 @@ export function ViewButton(
     & UnstyledButtonProps
     & ElementProps<'button'>,
 ) {
-  const navigateTo = useCloseSearchAndNavigateTo()
+  const diagram = useDiagram()
+  // const navigateTo = useCloseSearchAndNavigateTo()
   const currentViewId = useCurrentViewId()
   const isCurrentView = view.id === currentViewId
   return (
@@ -120,7 +119,7 @@ export function ViewButton(
       {...isCurrentView && { 'data-disabled': true }}
       onClick={(e) => {
         e.stopPropagation()
-        navigateTo(view.id)
+        diagram.navigateTo(view.id)
       }}
       onKeyDown={createScopedKeydownHandler({
         siblingSelector: '[data-likec4-view]',
@@ -131,12 +130,12 @@ export function ViewButton(
         onKeyDown: (e) => {
           if (e.nativeEvent.code === 'Space') {
             e.stopPropagation()
-            navigateTo(view.id)
+            diagram.navigateTo(view.id)
           }
         },
       })}>
       <ThemeIcon variant="transparent" className={btn.icon!}>
-        {isDeploymentView(view)
+        {view.isDeploymentView()
           ? <IconStack2 stroke={1.8} />
           : <IconZoomScan stroke={1.8} />}
       </ThemeIcon>

package/src/{likec4diagram/ui/search → search/components}/_shared.css.ts

@@ -1,5 +1,4 @@
 import { css, sva } from '@likec4/styles/css'
-import type { ColorToken } from '@likec4/styles/tokens'
 
 // export const titleColor = '--title-color'
 // export const descriptionColor = '---description-color'
@@ -13,21 +12,6 @@ const buttonFocused = css.raw({
 
 const _treenodefocus = '.mantine-Tree-node:focus > .mantine-Tree-label &'
 
-function colors(color: ColorToken, hover: ColorToken) {
-  return {
-    color,
-    _groupHover: {
-      color: hover,
-    },
-    _groupFocus: {
-      color: hover,
-    },
-    [_treenodefocus]: {
-      color: hover,
-    },
-  }
-}
-
 const button = css.raw({
   display: 'flex',
   width: '100%',
@@ -35,7 +19,7 @@ const button = css.raw({
   rounded: 'sm',
   padding: `12px 8px 12px 14px`,
   minHeight: '60px',
-  gap: '8',
+  gap: 8,
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
@@ -76,9 +60,14 @@ const iconSize = {
 }
 
 const icon = css.raw({
-  ...colors('mantine.colors.dimmed', 'mantine.colors.primary[0]'),
-  _light: {
-    ...colors('mantine.colors.gray[6]', 'mantine.colors.primary[3]'),
+  color: {
+    base: 'mantine.colors.dimmed',
+    _light: 'mantine.colors.gray[5]',
+    _groupHover: 'mantine.colors.primary[0]',
+    _groupFocus: 'mantine.colors.primary[0]',
+  },
+  [_treenodefocus]: {
+    color: 'mantine.colors.primary[0]',
   },
   flex: `0 0 ${iconSize.ref}`,
   height: iconSize.ref,
@@ -116,23 +105,23 @@ const title = css.raw({
     opacity: 0.4,
   },
 
-  // color: 'mantine.colors.dark[1]',
-  // _groupHover: {
-  //   color: 'mantine.colors.primary[1]',
-  // },
-  // _groupFocus: {
-  //   color: 'mantine.colors.primary[1]',
-  // },
-  ...colors('mantine.colors.dark[1]', 'mantine.colors.primary[1]'),
-  _light: {
-    ...colors('mantine.colors.gray[6]', 'mantine.colors.primary[3]'),
-    // color: `mantine.colors.gray[6]`,
-    // _groupHover: {
-    //   color: 'mantine.colors.primary[3]',
-    // },
-    // _groupFocus: {
-    //   color: 'mantine.colors.primary[3]',
-    // },
+  color: {
+    base: 'mantine.colors.dark[1]',
+    _light: 'mantine.colors.gray[7]',
+    _groupHover: {
+      base: 'mantine.colors.primary[1]',
+      _light: 'mantine.colors.white',
+    },
+    _groupFocus: {
+      base: 'mantine.colors.primary[1]',
+      _light: 'mantine.colors.white',
+    },
+  },
+  [_treenodefocus]: {
+    color: {
+      base: 'mantine.colors.primary[1]',
+      _light: 'mantine.colors.white',
+    },
   },
 })
 const descriptionColor = css.raw({

package/src/{likec4diagram/ui/search/LikeC4Search.css.ts → search/components/styles.css.ts}

@@ -1,44 +1,17 @@
 import { css } from '@likec4/styles/css'
 export { focusable } from './_shared.css'
 
-export const backdrop = css({
-  position: 'fixed',
-  zIndex: 900,
-  inset: '0px',
-  backgroundColor: '[rgb(34 34 34 / 0.95)]',
-  backdropFilter: 'auto',
-  backdropBlur: '10px',
-  _light: {
-    backgroundColor: '[rgb(255 255 255 / 0.92 )]',
-  },
-})
-export const root = css({
-  containerName: 'likec4-search',
-  containerType: 'size',
-  position: 'fixed',
-  zIndex: 901,
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  maxHeight: '100vh',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'stretch',
-  gap: 'md',
-  paddingTop: '32px',
-  paddingLeft: '16px',
-  paddingRight: '16px',
-  paddingBottom: 0,
-})
 export const input = css({
   border: 'transparent',
-  background: 'transparent',
-  _focusWithin: {
-    background: `mantine.colors.gray[3]/55`,
-    _dark: {
-      background: `mantine.colors.dark[4]/55`,
+  background: {
+    base: 'transparent',
+    _focusWithin: {
+      base: `mantine.colors.gray[4]/55 !important`,
+      _dark: `mantine.colors.dark[5]/55 !important`,
+    },
+    _groupHover: {
+      base: 'mantine.colors.gray[3]/35',
+      _dark: 'mantine.colors.dark[5]/35',
     },
   },
 })

package/src/{likec4diagram/ui/search → search/components}/utils.ts

@@ -1,3 +1,5 @@
+import { focusable } from './_shared.css'
+
 export function stopAndPrevent(e: React.KeyboardEvent | KeyboardEvent) {
   e.stopPropagation()
   e.preventDefault()
@@ -18,3 +20,8 @@ export function moveFocusToSearchInput() {
     input.setSelectionRange(length, length)
   }
 }
+
+export function focusToFirstFoundElement() {
+  let firstFoundElement = document.querySelector<HTMLButtonElement>(`[data-likec4-search] .${focusable}`)
+  firstFoundElement?.focus()
+}

package/src/search/hooks.ts

@@ -0,0 +1,41 @@
+import { createSafeContext } from '@mantine/core'
+import { useSelector } from '@xstate/react'
+import { useCallback, useDeferredValue } from 'react'
+import type { SearchActorRef, SearchActorSnapshot } from './searchActor'
+
+export const [SearchActorContext, useSearchActor] = createSafeContext<{
+  searchActorRef: SearchActorRef
+  close: (cb?: () => void) => void
+}>('SearchActorContext')
+
+const selectSearchValue = (s: SearchActorSnapshot) => s.context.searchValue
+export function useSearch(): [string, (search: string) => void] {
+  const { searchActorRef } = useSearchActor()
+  const searchValue = useSelector(searchActorRef, selectSearchValue)
+  const updateSearch = useCallback((search: string) => {
+    searchActorRef.send({ type: 'change.search', search })
+  }, [searchActorRef])
+  return [searchValue, updateSearch]
+}
+
+const selectNormalizedSearchValue = (s: SearchActorSnapshot) => {
+  const v = s.context.searchValue.trim().toLowerCase()
+  return v.length > 1 ? v : ''
+}
+export function useNormalizedSearch() {
+  const { searchActorRef } = useSearchActor()
+  return useDeferredValue(useSelector(searchActorRef, selectNormalizedSearchValue))
+}
+
+export function useUpdateSearch() {
+  const { searchActorRef } = useSearchActor()
+  return useCallback((search: string) => {
+    searchActorRef.send({ type: 'change.search', search })
+  }, [searchActorRef])
+}
+
+const selectPickViewFor = (s: SearchActorSnapshot) => s.context.pickViewFor
+export function usePickViewFor() {
+  const { searchActorRef } = useSearchActor()
+  return useSelector(searchActorRef, selectPickViewFor)
+}

package/src/search/searchActor.ts

@@ -0,0 +1,99 @@
+import type { Fqn } from '@likec4/core/types'
+import {
+  type ActorLogicFrom,
+  type ActorRefFrom,
+  type SnapshotFrom,
+  assertEvent,
+  assign,
+  setup,
+} from 'xstate'
+
+export type SearchActorEvent =
+  | { type: 'open'; search?: string | undefined }
+  | { type: 'close' }
+  | { type: 'change.search'; search: string }
+  | { type: 'pickview.open'; elementFqn: Fqn }
+  | { type: 'pickview.close' }
+
+export interface SearchContext {
+  openedWithSearch: string | null
+  searchValue: string
+  pickViewFor: Fqn | null
+}
+
+const _searchActorLogic = setup({
+  types: {
+    context: {} as SearchContext,
+    events: {} as SearchActorEvent,
+  },
+  actions: {
+    'change searchValue': assign({
+      searchValue: ({ event, context }) => {
+        assertEvent(event, ['change.search', 'open'])
+        return event.search ?? context.searchValue
+      },
+    }),
+    'reset pickViewFor': assign({
+      pickViewFor: () => null,
+    }),
+  },
+}).createMachine({
+  id: 'search',
+  context: {
+    openedWithSearch: null,
+    searchValue: '',
+    pickViewFor: null,
+  },
+  initial: 'inactive',
+  on: {
+    'close': {
+      target: '.inactive',
+      actions: 'reset pickViewFor',
+    },
+  },
+  states: {
+    inactive: {
+      on: {
+        'open': {
+          target: 'opened',
+          actions: [
+            assign({
+              openedWithSearch: ({ event }) => event.search ?? null,
+              searchValue: ({ event, context }) => event.search ?? context.searchValue,
+            }),
+          ],
+        },
+      },
+    },
+    opened: {
+      on: {
+        'open': {
+          actions: 'change searchValue',
+        },
+        'change.search': {
+          actions: 'change searchValue',
+        },
+        'pickview.open': {
+          target: 'pickView',
+          actions: assign({
+            pickViewFor: ({ event }) => event.elementFqn,
+          }),
+        },
+      },
+    },
+    pickView: {
+      on: {
+        'pickview.close': {
+          target: 'opened',
+          actions: 'reset pickViewFor',
+        },
+      },
+    },
+  },
+})
+
+export interface SearchActorLogic extends ActorLogicFrom<typeof _searchActorLogic> {}
+export const searchActorLogic: SearchActorLogic = _searchActorLogic
+
+export type SearchActorSnapshot = SnapshotFrom<SearchActorLogic>
+export interface SearchActorRef extends ActorRefFrom<SearchActorLogic> {}