@likec4/diagram 1.17.1 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -26,14 +26,15 @@
   "packageManager": "yarn@4.5.3",
   "scripts": {
     "typecheck": "tsc --noEmit",
+    "build": "",
     "lint": "run -T eslint src/ --fix",
     "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
     "test": "vitest run --no-isolate"
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@likec4/core": "1.17.1",
-    "@mantine/vanilla-extract": "7.14.1",
+    "@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.1",
@@ -44,26 +45,27 @@
     "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.17",
+    "framer-motion": "^11.14.1",
     "khroma": "^2.1.0",
-    "remeda": "^2.17.3",
-    "type-fest": "4.27.1",
+    "react-error-boundary": "^4.1.2",
+    "remeda": "^2.17.4",
+    "type-fest": "4.28.1",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.14.1",
-    "@mantine/hooks": "^7.14.1",
-    "@mantine/spotlight": "^7.14.1",
+    "@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.1",
-    "@mantine/core": "7.14.1",
-    "@mantine/hooks": "7.14.1",
-    "@mantine/spotlight": "7.14.1",
+    "@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",
@@ -72,6 +74,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.7.2",
-    "vitest": "^2.1.5"
+    "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,
@@ -191,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
@@ -205,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,3 +1,4 @@
+import { ComputedView, isDeploymentView } from '@likec4/core'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual } from 'fast-equals'
@@ -54,9 +55,7 @@ export function LikeC4Diagram({
   onNavigateTo,
   onNodeClick,
   onNodeContextMenu,
-  onOpenSourceElement,
-  onOpenSourceView,
-  onOpenSourceRelation,
+  onOpenSource,
   onBurgerMenuClick,
   renderIcon,
   where,
@@ -112,11 +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}
@@ -129,9 +129,7 @@ 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

package/src/LikeC4Search.tsx

@@ -1,35 +1,38 @@
-import type { DiagramView } from '@likec4/core'
-import { Spotlight, SpotlightActionsGroup, type SpotlightActionData } from '@mantine/spotlight'
-import { IconRectangularPrism, IconSitemap, IconSearch } from '@tabler/icons-react'
+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'
-import { Center, Group, Highlight, Text } from '@mantine/core'
 
 interface QueryMatch {
-  data: SpotlightActionData,
-  keyword: string,
+  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 : [];
+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;
+      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;
+    .find(match => !!match)
+  return !!keywordMatch
+    ? {
+      data: actionData,
+      keyword: keywordMatch.keyword,
+      match: keywordMatch.match
+    }
+    : undefined
 }
 
 function buildFilteredActions(actionsData: SpotlightActionData[], query: string): JSX.Element[] {
@@ -38,7 +41,7 @@ function buildFilteredActions(actionsData: SpotlightActionData[], query: string)
     map(a => filterAction(a, query)),
     filter(qm => !!qm),
     map(qm => buildSpotlightAction(qm))
-  );
+  )
 }
 
 function highlightMatch(match: QueryMatch): JSX.Element {
@@ -46,27 +49,29 @@ function highlightMatch(match: QueryMatch): JSX.Element {
 }
 
 function buildSpotlightAction(matchedAction: QueryMatch): JSX.Element {
-  const isMatchInLabel = matchedAction.keyword == matchedAction.data.label;
-  return <Spotlight.Action 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>
+  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 [query, setQuery] = useState('')
 
   const getNodeActionsData = (): SpotlightActionData[] => {
     const { focusOnNode } = store.getState()
@@ -85,12 +90,12 @@ export const LikeC4Search = memo(() => {
         onClick: () => focusOnNode(n.id),
         leftSection: <IconRectangularPrism />
       }))
-    );
+    )
   }
 
   const getViewActionsData = (): SpotlightActionData[] => {
     const { onNavigateTo } = store.getState()
-    const views = model.views()
+    const views = model.views().toArray()
 
     return map(views, v => ({
       id: v.id,
@@ -98,7 +103,7 @@ export const LikeC4Search = memo(() => {
       keywords: [
         v.title ?? v.id,
         ...(v.tags ?? []),
-        ...(v.view.description ? [v.view.description] : [])
+        ...(v.$view.description ? [v.$view.description] : [])
       ],
       onClick: () => {
         store.setState({
@@ -112,17 +117,15 @@ export const LikeC4Search = memo(() => {
         onNavigateTo?.(v.id)
       },
       leftSection: <IconSitemap />
-    }));
+    }))
   }
 
   const { nodeActions, viewActions } = useMemo(() => ({
-      nodeActions: buildFilteredActions(getNodeActionsData(), query),
-      viewActions: buildFilteredActions(getViewActionsData(), query)
-    }),
-    [model, store, view, query]
-  );
+    nodeActions: buildFilteredActions(getNodeActionsData(), query),
+    viewActions: buildFilteredActions(getViewActionsData(), query)
+  }), [model, store, view, query])
 
-  const portalProps = useMantinePortalProps();
+  const portalProps = useMantinePortalProps()
   return (
     <Spotlight.Root
       {...portalProps}
@@ -137,10 +140,10 @@ export const LikeC4Search = memo(() => {
         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> }
+        {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/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)
+}