@likec4/diagram 1.30.0 → 1.32.0

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> {}

package/src/state/DiagramActorProvider.tsx

@@ -1,42 +1,46 @@
-import type { ViewId, WhereOperator } from '@likec4/core'
-import { useDeepCompareEffect } from '@react-hookz/web'
+import type { DiagramView, WhereOperator } from '@likec4/core/types'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect } from 'react'
+import { type PropsWithChildren, useEffect, useRef } from 'react'
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
-import { useUpdateEffect } from '../hooks/useUpdateEffect'
+import type { PaddingWithUnit } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
-import { type Input, diagramMachine } from './diagram-machine'
+import { type DiagramMachine, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import type { DiagramActorSnapshot } from './types'
 
 const selectToggledFeatures = (state: DiagramActorSnapshot) => state.context.toggledFeatures
-type ActorContextInput = Omit<Input, 'xystore' | 'xynodes' | 'xyedges'>
 export function DiagramActorProvider({
-  input: {
-    view,
-    ...inputs
-  },
+  view,
+  zoomable,
+  pannable,
+  fitViewPadding,
+  nodesSelectable,
   where,
   children,
 }: PropsWithChildren<{
-  input: ActorContextInput
-  where?: WhereOperator<string, string> | undefined
+  view: DiagramView
+  zoomable: boolean
+  pannable: boolean
+  fitViewPadding: PaddingWithUnit
+  nodesSelectable: boolean
+  where: WhereOperator | null
 }>) {
   const handlersRef = useDiagramEventHandlersRef()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
 
-  const actorRef = useActorRef(
-    diagramMachine.provide({
+  const machineRef = useRef<DiagramMachine | null>(null)
+  if (!machineRef.current) {
+    machineRef.current = diagramMachine.provide({
       actions: {
         'trigger:NavigateTo': ((_, { viewId }) => {
-          // this delay allows tap animations to finish
+          // Slightly defer callback for better responsiveness
           setTimeout(() => {
-            handlersRef.current.onNavigateTo?.(viewId as ViewId)
+            handlersRef.current.onNavigateTo?.(viewId)
           }, 30)
         }),
 
@@ -57,35 +61,42 @@ export function DiagramActorProvider({
           },
         }),
       },
-    }),
+    })
+  }
+
+  const actorRef = useActorRef(
+    machineRef.current,
     {
-      id: `diagram:${view.id}`,
+      id: `diagram`,
       systemId: 'diagram',
       // ...inspector,
       input: {
         xystore,
         view,
-        ...inputs,
+        zoomable,
+        pannable,
+        fitViewPadding,
+        nodesSelectable,
       },
     },
   )
 
   const features = useEnabledFeatures()
-  useUpdateEffect(() => {
-    actorRef.send({ type: 'update.inputs', inputs })
-  }, [inputs])
-
   useEffect(() => {
     actorRef.send({ type: 'update.features', features })
   }, [features])
 
+  useEffect(() => {
+    actorRef.send({ type: 'update.inputs', inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } })
+  }, [zoomable, pannable, fitViewPadding, nodesSelectable])
+
   const { xyedges, xynodes } = useViewToNodesEdges({
     view,
     where,
-    nodesSelectable: inputs.nodesSelectable,
+    nodesSelectable,
   })
 
-  useDeepCompareEffect(() => {
+  useEffect(() => {
     actorRef.send({ type: 'update.view', view, xyedges, xynodes })
   }, [view, xyedges, xynodes])
 

package/src/state/assign.ts

@@ -140,16 +140,16 @@ export function focusNodesEdges(params: ActionArg): Partial<DiagramContext> {
   }
 }
 
-export function unfocusNodesEdges({ context }: ActionArg): Partial<DiagramContext> {
-  const { xynodes, xyedges } = context
-  return {
-    xynodes: xynodes.map(Base.setDimmed(false)),
-    xyedges: xyedges.map(Base.setData({
-      dimmed: false,
-      active: false,
-    })),
-  }
-}
+// export function unfocusNodesEdges({ context }: ActionArg): Partial<DiagramContext> {
+//   const { xynodes, xyedges } = context
+//   return {
+//     xynodes: xynodes.map(Base.setDimmed(false)),
+//     xyedges: xyedges.map(Base.setData({
+//       dimmed: false,
+//       active: false,
+//     })),
+//   }
+// }
 
 export function updateNavigationHistory({ context, event }: ActionArg): Partial<DiagramContext> {
   assertEvent(event, 'update.view')