@likec4/diagram 1.17.0 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -23,44 +23,49 @@
   "exports": {
     ".": "./src/index.ts"
   },
-  "packageManager": "yarn@4.5.1",
+  "packageManager": "yarn@4.5.3",
   "scripts": {
     "typecheck": "tsc --noEmit",
+    "build": "",
     "lint": "run -T eslint src/ --fix",
-    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo"
+    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
+    "test": "vitest run --no-isolate"
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@likec4/core": "1.17.0",
-    "@mantine/vanilla-extract": "7.13.4",
+    "@likec4/core": "1.18.0",
+    "@mantine/vanilla-extract": "7.15.1",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
-    "@vanilla-extract/css": "^1.16.0",
+    "@vanilla-extract/css": "^1.16.1",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.2",
-    "@xyflow/react": "12.3.4",
-    "@xyflow/system": "0.0.45",
+    "@xyflow/react": "12.3.5",
+    "@xyflow/system": "0.0.46",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
-    "esm-env": "^1.1.4",
+    "esm-env": "^1.2.1",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.11.11",
+    "framer-motion": "^11.14.1",
     "khroma": "^2.1.0",
-    "remeda": "^2.16.0",
-    "type-fest": "4.26.1",
+    "react-error-boundary": "^4.1.2",
+    "remeda": "^2.17.4",
+    "type-fest": "4.28.1",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.13.4",
-    "@mantine/hooks": "^7.13.4",
+    "@mantine/core": "^7.15.1",
+    "@mantine/hooks": "^7.15.1",
+    "@mantine/spotlight": "^7.15.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.17.0",
-    "@mantine/core": "7.13.4",
-    "@mantine/hooks": "7.13.4",
+    "@likec4/tsconfig": "1.18.0",
+    "@mantine/core": "7.15.1",
+    "@mantine/hooks": "7.15.1",
+    "@mantine/spotlight": "7.15.1",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
     "@types/react": "^18.3.11",
@@ -68,6 +73,7 @@
     "execa": "^9.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
   }
 }

package/src/LikeC4Diagram.props.ts

@@ -3,9 +3,9 @@ import type {
   DiagramNode,
   DiagramView,
   Fqn,
-  RelationID,
+  RelationId,
   ViewChange,
-  ViewID,
+  ViewId,
   WhereOperator
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
@@ -13,7 +13,7 @@ import type { XYBackground } from './xyflow/XYFlowBackground'
 
 export type { WhereOperator }
 
-export type DiagramNodeWithNavigate<ID extends string = ViewID> = Omit<DiagramNode, 'navigateTo'> & {
+export type DiagramNodeWithNavigate<ID extends string = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
   navigateTo: ID
 }
 
@@ -27,7 +27,7 @@ export type ElementIconRenderer = (props: {
   node: ElementIconNodeProps
 }) => ReactNode
 
-export type OnNavigateTo<ID extends string = ViewID> = (
+export type OnNavigateTo<ID extends string = ViewId> = (
   to: ID,
   // These fields present if navigateTo triggered by a node click
   event?: ReactMouseEvent,
@@ -148,6 +148,12 @@ export interface LikeC4DiagramProperties {
    */
   enableFocusMode?: boolean | undefined
 
+  /**
+   * Enable search popup for elements and views
+   * @default true
+   */
+  enableSearch?: boolean | undefined
+
   /**
    * Enable modal with element details
    * @default false
@@ -185,6 +191,22 @@ export interface LikeC4DiagramProperties {
   where?: WhereOperator<string, string> | undefined
 }
 
+export type OpenSourceParams =
+  | {
+    element: Fqn
+    property?: string
+  }
+  | {
+    relation: RelationId
+  }
+  | {
+    deployment: Fqn
+    property?: string
+  }
+  | {
+    view: ViewId
+  }
+
 export interface LikeC4DiagramEventHandlers {
   onChange?: OnChange | null | undefined
   onNavigateTo?: OnNavigateTo | null | undefined
@@ -199,12 +221,5 @@ export interface LikeC4DiagramEventHandlers {
   // if set, will render a burger menu icon in the top left corner
   onBurgerMenuClick?: null | undefined | (() => void)
 
-  // if set, will render a source code icon in the top left corner
-  onOpenSourceView?: null | undefined | (() => void)
-
-  // if set, will render an icon in properties webview for each element
-  onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void)
-
-  // if set, will be called on edge click
-  onOpenSourceRelation?: null | undefined | ((id: RelationID) => void)
+  onOpenSource?: null | undefined | ((params: OpenSourceParams) => void)
 }

package/src/LikeC4Diagram.tsx

@@ -1,6 +1,7 @@
+import { ComputedView, isDeploymentView } from '@likec4/core'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
-import { deepEqual, shallowEqual } from 'fast-equals'
+import { deepEqual } from 'fast-equals'
 import { memo, useEffect, useRef } from 'react'
 import { isEmpty } from 'remeda'
 import { rootClassName } from './globals.css'
@@ -9,6 +10,7 @@ import { LikeC4CustomColors } from './LikeC4CustomColors'
 import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { useLikeC4Model } from './likec4model'
+import { LikeC4Search } from './LikeC4Search'
 import { Overlays } from './overlays'
 import { DiagramContextProvider } from './state/DiagramContext'
 import { EnsureMantine } from './ui/EnsureMantine'
@@ -39,6 +41,7 @@ export function LikeC4Diagram({
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,
   enableRelationshipBrowser = enableRelationshipDetails,
+  enableSearch = true,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -52,9 +55,7 @@ export function LikeC4Diagram({
   onNavigateTo,
   onNodeClick,
   onNodeContextMenu,
-  onOpenSourceElement,
-  onOpenSourceView,
-  onOpenSourceRelation,
+  onOpenSource,
   onBurgerMenuClick,
   renderIcon,
   where,
@@ -110,10 +111,12 @@ export function LikeC4Diagram({
             showNavigationButtons={showNavigationButtons && !!onNavigateTo}
             showNotations={showNotations}
             enableFocusMode={enableFocusMode}
-            enableRelationshipDetails={enableRelationshipDetails && hasLikec4model}
+            enableSearch={hasLikec4model && enableSearch}
             enableElementDetails={enableElementDetails && hasLikec4model}
             enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
             enableRelationshipBrowser={enableRelationshipBrowser && hasLikec4model}
+            // TODO: temporary disable relationship details for deployment views
+            enableRelationshipDetails={enableRelationshipDetails && hasLikec4model && !isDeploymentView(view)}
             // Apply where filter only in readonly mode
             whereFilter={readonly ? (where ?? null) : null}
             renderIcon={renderIcon ?? null}
@@ -126,14 +129,13 @@ export function LikeC4Diagram({
             onChange={onChange ?? null}
             onNavigateTo={onNavigateTo ?? null}
             onCanvasDblClick={onCanvasDblClick ?? null}
-            onOpenSourceView={onOpenSourceView ?? null}
-            onOpenSourceElement={onOpenSourceElement ?? null}
-            onOpenSourceRelation={onOpenSourceRelation ?? null}
+            onOpenSource={onOpenSource ?? null}
             onBurgerMenuClick={onBurgerMenuClick ?? null}
           >
             <LikeC4DiagramInnerMemo
               background={background}
               showDiagramTitle={showDiagramTitle}
+              enableSearch={hasLikec4model && enableSearch}
             />
           </DiagramContextProvider>
         </XYFlowProvider>
@@ -146,10 +148,12 @@ LikeC4Diagram.displayName = 'LikeC4Diagram'
 type LikeC4DiagramInnerProps = {
   background: NonNullable<LikeC4DiagramProperties['background']>
   showDiagramTitle: boolean
+  enableSearch: boolean
 }
 const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
   background,
-  showDiagramTitle
+  showDiagramTitle,
+  enableSearch
 }) {
   const {
     isInitialized,
@@ -183,6 +187,7 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
         />
       </XYFlow>
       {enableOverlays && <Overlays />}
+      {enableSearch && <LikeC4Search />}
       {isInitialized && (
         <>
           {fitView && <FitViewOnDiagramChange />}

package/src/LikeC4Search.tsx

@@ -0,0 +1,149 @@
+import { Center, Group, Highlight, Text } from '@mantine/core'
+import { Spotlight, type SpotlightActionData, SpotlightActionsGroup } from '@mantine/spotlight'
+import { IconRectangularPrism, IconSearch, IconSitemap } from '@tabler/icons-react'
+import { memo, useMemo, useState } from 'react'
+import { filter, map, pipe } from 'remeda'
+import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from './hooks'
+import { useLikeC4Model } from './likec4model'
+
+interface QueryMatch {
+  data: SpotlightActionData
+  keyword: string
+  match: string
+}
+
+function filterAction(actionData: SpotlightActionData, query: string): QueryMatch | undefined {
+  const queryLower = query.toLowerCase()
+  const keywords = Array.isArray(actionData.keywords) ? actionData.keywords : []
+  const keywordMatch = keywords
+    .map(keyword => {
+      const index = keyword.toLowerCase().indexOf(queryLower)
+      return index !== -1
+        ? {
+          keyword: keyword,
+          match: keyword.substring(index, index + query.length)
+        }
+        : null
+    })
+    .find(match => !!match)
+  return !!keywordMatch
+    ? {
+      data: actionData,
+      keyword: keywordMatch.keyword,
+      match: keywordMatch.match
+    }
+    : undefined
+}
+
+function buildFilteredActions(actionsData: SpotlightActionData[], query: string): JSX.Element[] {
+  return pipe(
+    actionsData,
+    map(a => filterAction(a, query)),
+    filter(qm => !!qm),
+    map(qm => buildSpotlightAction(qm))
+  )
+}
+
+function highlightMatch(match: QueryMatch): JSX.Element {
+  return <Highlight highlight={match.match}>{match.keyword}</Highlight>
+}
+
+function buildSpotlightAction(matchedAction: QueryMatch): JSX.Element {
+  const isMatchInLabel = matchedAction.keyword == matchedAction.data.label
+  return (
+    <Spotlight.Action key={matchedAction.data.id} onClick={matchedAction.data.onClick}>
+      <Center style={{ marginRight: '8px ' }}>
+        {matchedAction.data.leftSection}
+      </Center>
+      <Group wrap="nowrap" w="100%">
+        <div style={{ flex: 1 }}>
+          <Text>
+            {isMatchInLabel ? highlightMatch(matchedAction) : matchedAction.data.label}
+          </Text>
+          {!isMatchInLabel && <Text opacity={0.6} size="xs">{highlightMatch(matchedAction)}</Text>}
+        </div>
+      </Group>
+    </Spotlight.Action>
+  )
+}
+
+export const LikeC4Search = memo(() => {
+  const view = useDiagramState(s => s.view)
+  const model = useLikeC4Model(true)
+  const store = useDiagramStoreApi()
+  const [query, setQuery] = useState('')
+
+  const getNodeActionsData = (): SpotlightActionData[] => {
+    const { focusOnNode } = store.getState()
+
+    return pipe(
+      view.nodes,
+      filter(n => !!n.title),
+      map(n => ({
+        id: n.id,
+        label: n.title,
+        keywords: [
+          n.title,
+          ...(n.tags ?? []).map(t => `#${t}`),
+          ...(n.description ? [n.description] : [])
+        ].filter(k => k.toLowerCase()),
+        onClick: () => focusOnNode(n.id),
+        leftSection: <IconRectangularPrism />
+      }))
+    )
+  }
+
+  const getViewActionsData = (): SpotlightActionData[] => {
+    const { onNavigateTo } = store.getState()
+    const views = model.views().toArray()
+
+    return map(views, v => ({
+      id: v.id,
+      label: v.title ?? v.id,
+      keywords: [
+        v.title ?? v.id,
+        ...(v.tags ?? []),
+        ...(v.$view.description ? [v.$view.description] : [])
+      ],
+      onClick: () => {
+        store.setState({
+          hoveredNodeId: null,
+          lastOnNavigate: {
+            fromView: view.id,
+            toView: v.id,
+            fromNode: null
+          }
+        })
+        onNavigateTo?.(v.id)
+      },
+      leftSection: <IconSitemap />
+    }))
+  }
+
+  const { nodeActions, viewActions } = useMemo(() => ({
+    nodeActions: buildFilteredActions(getNodeActionsData(), query),
+    viewActions: buildFilteredActions(getViewActionsData(), query)
+  }), [model, store, view, query])
+
+  const portalProps = useMantinePortalProps()
+  return (
+    <Spotlight.Root
+      {...portalProps}
+      shortcut={['mod + f', 'mod + k']}
+      query={query}
+      onQueryChange={setQuery}
+      scrollable
+      maxHeight={'calc(100vh - 100px)'}
+    >
+      <Spotlight.Search
+        placeholder="Search elements in current view and other views..."
+        leftSection={<IconSearch stroke={1.5} />}
+      />
+      <Spotlight.ActionsList>
+        {nodeActions.length > 0 && <SpotlightActionsGroup label="Elements">{nodeActions}</SpotlightActionsGroup>}
+        {viewActions.length > 0 && <SpotlightActionsGroup label="Views">{viewActions}</SpotlightActionsGroup>}
+        {nodeActions.length == 0 && viewActions.length == 0 && <Spotlight.Empty>Nothing found...</Spotlight.Empty>}
+      </Spotlight.ActionsList>
+    </Spotlight.Root>
+  )
+})

package/src/StaticLikeC4Diagram.tsx

@@ -48,6 +48,7 @@ export function StaticLikeC4Diagram({
       enableFocusMode={false}
       nodesSelectable={false}
       nodesDraggable={false}
+      enableSearch={false}
       {...rest}
     />
   )

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,4 +1,4 @@
-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'
@@ -6,6 +6,7 @@ import type { XYFlowEdge, XYFlowNode, XYFlowState } from '../xyflow/types'
 export const useXYFlow = useReactFlow<XYFlowNode, XYFlowEdge>
 
 export const useXYNodesData = useNodesData<XYFlowNode>
+export const useXYInternalNode = useInternalNode<XYFlowNode>
 
 export function useXYStore<StateSlice = unknown>(
   selector: (state: XYFlowState) => StateSlice,

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)
+}