@likec4/diagram 1.30.0 → 1.32.0

package/src/likec4diagram/types.ts

@@ -1,8 +1,7 @@
-import type { DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core'
+import type { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core/types'
 import type { XYPosition } from '@xyflow/system'
 import type { OptionalKeysOf, Simplify } from 'type-fest'
-import type { Base } from '../base'
-import type { ReactFlowEdge, ReactFlowNode } from '../base/types'
+import type { Base, ReactFlowEdge, ReactFlowNode } from '../base/types'
 
 type NonOptional<T extends object> = Simplify<
   & {
@@ -14,7 +13,8 @@ type NonOptional<T extends object> = Simplify<
 >
 
 export namespace Types {
-  export type LeafNodeData = Base.NodeData<
+  export type LeafNodeData =
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -28,14 +28,18 @@ export namespace Types {
         | 'level'
         | 'height'
         | 'style'
+        | 'tags'
         | 'position'
       >
     >
     & {
+      /**
+       * View this node belongs to
+       */
+      viewId: ViewId
       isMultiple?: boolean | undefined
       icon: string | null
     }
-  >
 
   /**
    * Represents element from logical model
@@ -56,12 +60,13 @@ export namespace Types {
     & LeafNodeData
     & {
       navigateTo: ViewId | null
-      deploymentFqn: Fqn
+      deploymentFqn: DeploymentFqn
       // If set - this node refers to a model element
       modelFqn: Fqn | null
     }
 
-  export type CompoundNodeData = Base.NodeData<
+  export type CompoundNodeData =
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -70,14 +75,18 @@ export namespace Types {
         | 'color'
         | 'shape'
         | 'style'
+        | 'tags'
         | 'position'
       >
     >
     & {
+      /**
+       * View this node belongs to
+       */
+      viewId: ViewId
       depth: number
       icon?: IconUrl
     }
-  >
 
   export type CompoundElementNodeData = CompoundNodeData & {
     modelFqn: Fqn
@@ -89,7 +98,7 @@ export namespace Types {
   }
 
   export type CompoundDeploymentNodeData = CompoundNodeData & {
-    deploymentFqn: Fqn
+    deploymentFqn: DeploymentFqn
     /**
      * If set - this node refers to a model element
      */
@@ -116,8 +125,9 @@ export namespace Types {
 
   export type NodeData = Node['data']
 
-  export type RelationshipEdgeData = Base.EdgeData<
-    NonOptional<
+  export type RelationshipEdgeData = Simplify<
+    & Base.EdgeData
+    & NonOptional<
       Pick<
         DiagramEdge,
         | 'id'
@@ -133,7 +143,8 @@ export namespace Types {
         | 'navigateTo'
         | 'notes'
       >
-    > & {
+    >
+    & {
       labelXY: XYPosition | null
       controlPoints: XYPosition[] | undefined | null
     }
@@ -142,4 +153,5 @@ export namespace Types {
   export type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, 'relationship'>
 
   export type Edge = RelationshipEdge
+  export type EdgeData = RelationshipEdgeData
 }

package/src/likec4diagram/ui/controls/Controls.tsx

@@ -3,12 +3,12 @@ import { ActionIconGroup, Badge, Box, Group, Loader, Stack } from '@mantine/core
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
 import { LayoutGroup, m } from 'motion/react'
 import { memo } from 'react'
+import { SearchControl } from '../../../components/SearchControl'
 import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
 import { type ControlsCustomLayout, useControlsCustomLayout } from '../../../context/ControlsCustomLayout'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram, useDiagramContext, useDiagramSyncLayoutState } from '../../../hooks/useDiagram'
 import { stopPropagation } from '../../../utils'
-import { LikeC4Search } from '../search/LikeC4Search'
 import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
 import { LayoutDriftNotification } from './LayoutDriftNotification'
@@ -68,8 +68,7 @@ const ControlsDefaultLayout: ControlsCustomLayout = ({
 )
 
 export const Controls = memo(() => {
-  const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext(c => ({
-    viewId: c.view.id,
+  const { hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext(c => ({
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,
     viewportChanged: c.viewportChangedManually,
     isNotActiveWalkthrough: c.activeWalkthrough === null,
@@ -103,7 +102,14 @@ export const Controls = memo(() => {
             </ActionIcon>
           )}
           navigationButtons={enableNavigationButtons && <NavigationButtons />}
-          search={enableSearch && <LikeC4Search />}
+          search={enableSearch && (
+            <SearchControl
+              onClick={e => {
+                e.stopPropagation()
+                diagram.openSearch()
+              }}
+            />
+          )}
           syncInProgressBadge={<SyncLayoutBadge />}
           actionsGroup={
             <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
@@ -112,6 +118,7 @@ export const Controls = memo(() => {
                   <ActionIcon
                     onClick={e => {
                       e.stopPropagation()
+                      const viewId = diagram.currentView.id
                       onOpenSource?.({ view: viewId })
                     }}>
                     <IconFileSymlink stroke={1.5} />

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -1,7 +1,7 @@
+import { cx as clsx } from '@likec4/styles/css'
 import { Button, Card, CardSection, Group, Spoiler, Stack, Text } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
 import { IconMenu } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { AnimatePresence, m } from 'motion/react'
 import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagram'

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -1,5 +1,5 @@
-import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
-import { css, cx } from '@likec4/styles/css'
+import { type ComputedNode, type NodeNotation as ElementNotationData } from '@likec4/core'
+import { css, cx, cx as clsx } from '@likec4/styles/css'
 import {
   ActionIcon,
   Badge,
@@ -19,7 +19,6 @@ import {
 } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
 import { IconAlertTriangle, IconArrowDownRight, IconHelpCircle } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { AnimatePresence, m } from 'motion/react'
 import { memo, useState } from 'react'
 import { ceil, isNonNullish } from 'remeda'
@@ -123,7 +122,7 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
 
 const selector = (s: DiagramContext) => ({
   id: s.view.id,
-  notations: s.view.notation?.elements ?? [],
+  notations: s.view.notation?.nodes ?? [],
   isVisible: true,
   // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
 })

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

@@ -1,3 +1,4 @@
+import { cx as clsx } from '@likec4/styles/css'
 import { Badge, Box, Button, ButtonGroup } from '@mantine/core'
 import {
   IconPlayerPlayFilled,
@@ -5,7 +6,6 @@ import {
   IconPlayerSkipForwardFilled,
   IconPlayerStopFilled,
 } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { AnimatePresence, m } from 'motion/react'
 import { isNonNull, isTruthy } from 'remeda'
 import { useXYStore } from '../../../hooks'

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -1,26 +1,27 @@
 import {
   type DiagramEdge,
+  type DiagramNode,
   type DiagramView,
   type EdgeId,
   type Fqn,
   type NodeId,
   type WhereOperator,
-  DiagramNode,
-  ElementKind,
+  GroupElementKind,
   invariant,
   nonNullable,
   Queue,
   whereOperatorAsPredicate,
 } from '@likec4/core'
-import { useDeepCompareMemo } from '@react-hookz/web'
+import { useCustomCompareMemo } from '@react-hookz/web'
+import { deepEqual, shallowEqual } from 'fast-equals'
 import { hasAtLeast, pick } from 'remeda'
 import { ZIndexes } from '../base/const'
 import type { Types } from './types'
 
 // const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 function viewToNodesEdge(opts: {
-  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__'>
-  where: WhereOperator<string, string> | undefined
+  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '_type'>
+  where: WhereOperator | null
   nodesSelectable: boolean
 }): {
   xynodes: Types.Node[]
@@ -30,7 +31,7 @@ function viewToNodesEdge(opts: {
     view,
     nodesSelectable: selectable,
   } = opts
-  const isDynamicView = view.__ === 'dynamic',
+  const isDynamicView = view._type === 'dynamic',
     xynodes = [] as Types.Node[],
     xyedges = [] as Types.Edge[],
     nodeLookup = new Map<Fqn, DiagramNode>()
@@ -73,7 +74,7 @@ function viewToNodesEdge(opts: {
   let next: TraverseItem | undefined
   while ((next = queue.dequeue())) {
     const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind
     if (isCompound) {
       for (const child of node.children) {
         queue.enqueue({ node: nodeById(child), parent: node })
@@ -93,8 +94,8 @@ function viewToNodesEdge(opts: {
 
     const base = {
       id,
-      selectable: selectable && node.kind !== ElementKind.Group,
-      focusable: selectable && node.kind !== ElementKind.Group,
+      selectable: selectable && node.kind !== GroupElementKind,
+      focusable: selectable && node.kind !== GroupElementKind,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -104,13 +105,14 @@ function viewToNodesEdge(opts: {
       },
       initialWidth: node.width,
       initialHeight: node.height,
-      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
+      hidden: node.kind !== GroupElementKind && !visiblePredicate(node),
       ...(parent && {
         parentId: ns + parent.id,
       }),
     } satisfies Omit<Types.Node, 'data' | 'type'>
 
     const compoundData = {
+      viewId: view.id,
       id: node.id,
       title: node.title,
       color: node.color,
@@ -118,10 +120,12 @@ function viewToNodesEdge(opts: {
       style: node.style,
       depth: node.depth ?? 0,
       icon: node.icon ?? 'none',
+      tags: node.tags ?? null,
       position: node.position,
     } satisfies Types.CompoundNodeData
 
     const leafNodeData = {
+      viewId: view.id,
       id: node.id,
       title: node.title,
       technology: node.technology,
@@ -133,11 +137,12 @@ function viewToNodesEdge(opts: {
       shape: node.shape,
       style: node.style,
       icon: node.icon ?? null,
+      tags: node.tags,
       position: node.position,
       isMultiple: node.style?.multiple ?? false,
     } satisfies Types.LeafNodeData
 
-    if (node.kind === ElementKind.Group) {
+    if (node.kind === GroupElementKind) {
       xynodes.push({
         ...base,
         type: 'view-group',
@@ -150,8 +155,8 @@ function viewToNodesEdge(opts: {
       continue
     }
 
-    const modelFqn = DiagramNode.modelRef(node)
-    const deploymentFqn = DiagramNode.deploymentRef(node)
+    const modelFqn = node.modelRef ?? null
+    const deploymentFqn = node.deploymentRef ?? null
     if (!modelFqn && !deploymentFqn) {
       console.error('Invalid node', node)
       throw new Error('Element should have either modelRef or deploymentRef')
@@ -267,29 +272,24 @@ function viewToNodesEdge(opts: {
     xyedges,
   }
 }
-
-export function useViewToNodesEdges({
-  view: {
-    id,
-    nodes,
-    edges,
-    __ = 'element',
-  },
-  ...opts
-}: {
+type ViewToNodesEdgeInput = {
   view: DiagramView
-  where: WhereOperator<string, string> | undefined
+  where: WhereOperator | null
   nodesSelectable: boolean
-}) {
-  return useDeepCompareMemo(() => {
-    return viewToNodesEdge({
-      view: {
-        id,
-        nodes,
-        edges,
-        __,
-      },
-      ...opts,
-    })
-  }, [id, __, nodes, edges, opts])
+}
+const viewToNodesEdgeEqual = (a: ViewToNodesEdgeInput, b: ViewToNodesEdgeInput) => (
+  a.view.id === b.view.id
+  && a.view._type === b.view._type
+  && a.nodesSelectable === b.nodesSelectable
+  && shallowEqual(a.view.nodes, b.view.nodes)
+  && shallowEqual(a.view.edges, b.view.edges)
+  && deepEqual(a.where, b.where)
+)
+
+export function useViewToNodesEdges(params: ViewToNodesEdgeInput) {
+  return useCustomCompareMemo(
+    () => viewToNodesEdge(params),
+    [params],
+    ([a], [b]) => !!a && !!b && viewToNodesEdgeEqual(a, b),
+  )
 }

package/src/likec4model/LikeC4ModelContext.ts

@@ -1,4 +1,4 @@
-import type { LikeC4Model } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { createContext } from 'react'
 
-export const LikeC4ModelContext = createContext<LikeC4Model | null>(null)
+export const LikeC4ModelContext = createContext<LikeC4Model<any> | null>(null)

package/src/likec4model/useLikeC4ElementsTree.ts

@@ -1,4 +1,6 @@
-import { type Fqn, type LikeC4Model, type ViewId, compareNatural } from '@likec4/core'
+import { type LikeC4Model } from '@likec4/core/model'
+import { type Fqn, type ViewId } from '@likec4/core/types'
+import { compareNatural } from '@likec4/core/utils'
 import { useMemo } from 'react'
 import { useLikeC4Model } from './useLikeC4Model'
 
@@ -25,7 +27,7 @@ function buildNode(
  * If `viewId` is provided, returns the tree of elements in the view.
  */
 export function useLikeC4ElementsTree(viewId?: ViewId): LikeC4ModelTreeNodeData[] {
-  const model = useLikeC4Model(true)
+  const model = useLikeC4Model()
   return useMemo(() => {
     if (viewId) {
       const view = model.view(viewId)

package/src/likec4model/useLikeC4Model.ts

@@ -1,26 +1,28 @@
-import type { LikeC4Model } from '@likec4/core'
+import type { aux, LikeC4Model } from '@likec4/core/model'
 import { useContext } from 'react'
-import { isDefined, isNonNullish, isString } from 'remeda'
+import { isString } from 'remeda'
 import { LikeC4ModelContext } from './LikeC4ModelContext'
 
-export function useLikeC4Model(): LikeC4Model | null
-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: '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: 'layouted' | 'computed' | undefined): LikeC4Model | null
-export function useLikeC4Model(strict?: boolean, type?: 'layouted' | 'computed') {
+export function useLikeC4Model<A extends aux.Any = aux.Unknown>(): LikeC4Model<A>
+export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted'): LikeC4Model.Layouted<A>
+export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'computed'): LikeC4Model.Computed<A>
+// dprint-ignore
+export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted' | 'computed' | undefined): LikeC4Model<A>
+export function useLikeC4Model(type?: 'layouted' | 'computed') {
   const model = useContext(LikeC4ModelContext)
 
-  if (isString(type) && isNonNullish(model) && model.type !== type) {
-    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.type}" in context`)
+  if (!model) {
+    throw new Error('No LikeC4Model found in context')
   }
 
-  if (isDefined(strict) && strict === true && !model) {
-    throw new Error('No LikeC4Model found in context')
+  if (isString(type) && model.stage !== type) {
+    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`)
   }
+
   return model
 }
+
+export function useLikeC4Specification() {
+  const model = useLikeC4Model()
+  return model.$data.specification
+}

package/src/overlays/Overlays.tsx

@@ -1,13 +1,12 @@
 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 { 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 { useEffect, useMemo } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
 import { isNonNullish } from 'remeda'
 import type { AnyActorRef } from 'xstate'
+import { ErrorFallback } from '../components/ErrorFallback'
 import { DiagramFeatures } from '../context'
 import { useXYStore } from '../hooks'
 import { ElementDetails } from './element-details/ElementDetails'
@@ -16,32 +15,6 @@ import { type OverlaysActorRef, type OverlaysActorSnapshot } from './overlaysAct
 import { RelationshipDetails } from './relationship-details/RelationshipDetails'
 import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrowser'
 
-function Fallback({ error, resetErrorBoundary }: FallbackProps) {
-  const errorString = error instanceof Error ? error.message : 'Unknown error'
-  return (
-    <Box pos={'fixed'} top={0} left={0} w={'100%'} p={0} style={{ zIndex: 1000 }}>
-      <Notification
-        icon={<IconX style={{ width: 16, height: 16 }} />}
-        styles={{
-          icon: {
-            alignSelf: 'flex-start',
-          },
-        }}
-        color={'red'}
-        title={'Oops, something went wrong'}
-        p={'xl'}
-        withCloseButton={false}>
-        <ScrollAreaAutosize maw={'100%'} mah={400}>
-          <Code block>{errorString}</Code>
-        </ScrollAreaAutosize>
-        <Group gap={'xs'} mt="xl">
-          <Button color="gray" size="xs" variant="light" onClick={() => resetErrorBoundary()}>Reset</Button>
-        </Group>
-      </Notification>
-    </Box>
-  )
-}
-
 const selectOverlays = (s: OverlaysActorSnapshot) => {
   return s.context.overlays.map((overlay) => {
     switch (overlay.type) {
@@ -77,7 +50,7 @@ const compareSelectOverlays = <T extends ReturnType<typeof selectOverlays>>(a: T
   })
 }
 
-export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: OverlaysActorRef }) => {
+export function Overlays({ overlaysActorRef }: { overlaysActorRef: OverlaysActorRef }) {
   const xyflowDomNode = useXYStore(s => s.domNode)
   const xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector('.react-flow__renderer') ?? null, [
     xyflowDomNode,
@@ -85,7 +58,7 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays)
   const isMotionReduced = useReducedMotionConfig() ?? false
 
-  const isActiveOverlay = overlays.length > 0
+  const isActiveOverlay = overlays.some((overlay) => overlay.type === 'elementDetails')
 
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return
@@ -136,7 +109,7 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
 
   return (
     <DiagramFeatures.Overlays>
-      <ErrorBoundary FallbackComponent={Fallback} onReset={() => overlaysActorRef.send({ type: 'close.all' })}>
+      <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => overlaysActorRef.send({ type: 'close.all' })}>
         <LayoutGroup>
           <AnimatePresence>
             {overlaysReact}
@@ -145,5 +118,4 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
       </ErrorBoundary>
     </DiagramFeatures.Overlays>
   )
-})
-Overlays.displayName = 'Overlays'
+}

package/src/overlays/element-details/ElementDetailsCard.css.ts

@@ -27,17 +27,20 @@ export const card = css({
   pointerEvents: 'all',
   gap: 'lg',
   justifyContent: 'stretch',
-  backgroundColor: 'mantine.colors.body',
-  backgroundImage:
-    `linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)`,
-  borderTopColor: 'likec4.palette.fill',
-  _dark: {
-    backgroundColor: `mantine.colors.dark[6]`,
-    backgroundImage: `
-          linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 15%, transparent), transparent 80px),
-          linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
-        `,
-  },
+  backgroundColor: {
+    base: 'mantine.colors.body',
+    _dark: 'mantine.colors.dark[6]',
+  },
+  border: `none`,
+  backgroundImage: `
+    linear-gradient(180deg,
+      color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent),
+      color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px,
+      color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px,
+      transparent 80px
+    ),
+    linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+  `,
   '& .react-flow__attribution': {
     display: 'none',
   },
@@ -145,17 +148,6 @@ export const viewButtonTitle = css({
   fontWeight: 500,
   lineHeight: '1.4',
 })
-// globalStyle(`${viewButton} .tabler-icon`, {
-//   width: '85%',
-// })
-// globalStyle(`${viewButton} .tabler-icon`, {
-//   width: '85%',
-//   opacity: 0.75
-// })
-
-// globalStyle(`${whereLight} ${viewButton} .mantine-Button-label`, {
-//   color: mantine.colors.dark[3]
-// })
 
 export const tabsRoot = css({
   flex: 1,