@likec4/diagram 1.31.0 → 1.32.1

package/src/overlays/element-details/ElementDetailsCard.tsx

@@ -1,14 +1,13 @@
 import {
+  type Any,
   type ComputedView,
   type DiagramView,
   type Element,
   type Fqn,
-  type LikeC4View,
   type NodeId,
+  type scalar,
   type ViewId,
-  isDeploymentView,
-  isScopedElementView,
-} from '@likec4/core'
+} from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
 import {
   type TextProps,
@@ -41,6 +40,7 @@ import type { Rect } from '@xyflow/system'
 import { type PanInfo, m, useDragControls, useMotionValue } from 'motion/react'
 import { type PropsWithChildren, useCallback, useRef, useState } from 'react'
 import { clamp, isNullish, map, only, partition, pipe } from 'remeda'
+import { ElementTag } from '../../base/primitives/element/ElementTags'
 import { Link } from '../../components/Link'
 import { DiagramFeatures, IconRenderer, IfEnabled } from '../../context'
 import { useUpdateEffect } from '../../hooks'
@@ -113,7 +113,7 @@ export function ElementDetailsCard({
     defaultValue: 'Properties',
   })
   const diagram = useDiagram()
-  const likec4model = useLikeC4Model(true)
+  const likec4model = useLikeC4Model()
   const viewModel = likec4model.view(viewId)
   const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn)
 
@@ -122,10 +122,7 @@ export function ElementDetailsCard({
   const [viewsOf, otherViews] = pipe(
     [...elementModel.views()],
     map(v => v.$view),
-    partition(view => {
-      const v = view as LikeC4View
-      return isScopedElementView(v) && v.viewOf === fqn
-    }),
+    partition(v => v._type === 'element' && v.viewOf === fqn),
   )
 
   let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null
@@ -331,16 +328,26 @@ export function ElementDetailsCard({
               </div>
               <div style={{ flex: 1 }}>
                 <SmallLabel>tags</SmallLabel>
-                <Flex gap={4} flex={1} mt={6}>
+                <Flex gap={4} flex={1} mt={6} wrap="wrap">
                   {elementModel.tags.map((tag) => (
-                    <Badge key={tag} radius={'sm'} size="sm" fw={600} variant="gradient">#{tag}</Badge>
+                    <ElementTag
+                      key={tag}
+                      tag={tag}
+                      css={{
+                        cursor: 'pointer',
+                      }}
+                      onClick={e => {
+                        e.stopPropagation()
+                        diagram.openSearch(`#${tag}`)
+                      }}
+                    />
                   ))}
                   {elementModel.tags.length === 0 && <Badge radius={'sm'} size="sm" fw={600} color="gray">—</Badge>}
                 </Flex>
               </div>
               <ActionIconGroup
                 style={{
-                  alignSelf: 'flex-end',
+                  alignSelf: 'flex-start',
                 }}>
                 {defaultLink && (
                   <ActionIcon
@@ -454,7 +461,7 @@ export function ElementDetailsCard({
                           <ViewButton
                             key={view.id}
                             view={view}
-                            onNavigateTo={to => diagram.navigateTo(to, fromNode ?? undefined)} />
+                            onNavigateTo={to => diagram.navigateTo(to as scalar.ViewId, fromNode ?? undefined)} />
                         ))}
                       </Stack>
                     </Box>
@@ -467,7 +474,7 @@ export function ElementDetailsCard({
                           <ViewButton
                             key={view.id}
                             view={view}
-                            onNavigateTo={to => diagram.navigateTo(to, fromNode ?? undefined)} />
+                            onNavigateTo={to => diagram.navigateTo(to as scalar.ViewId, fromNode ?? undefined)} />
                         ))}
                       </Stack>
                     </Box>
@@ -501,18 +508,18 @@ export function ElementDetailsCard({
   )
 }
 
-const ViewButton = ({
+const ViewButton = <A extends Any>({
   view,
   onNavigateTo,
 }: {
-  view: ComputedView | DiagramView
-  onNavigateTo: OnNavigateTo
+  view: ComputedView<A> | DiagramView<A>
+  onNavigateTo: OnNavigateTo<A>
 }) => {
   return (
     <UnstyledButton className={styles.viewButton} onClick={e => onNavigateTo(view.id, e)}>
       <Group gap={6} align="start" wrap="nowrap">
         <ThemeIcon size={'sm'} variant="transparent">
-          {isDeploymentView(view)
+          {view._type === 'deployment'
             ? <IconStack2 stroke={1.8} />
             : <IconZoomScan stroke={1.8} />}
         </ThemeIcon>

package/src/overlays/element-details/TabPanelDeployments.tsx

@@ -1,4 +1,5 @@
-import type { Fqn, LikeC4Model } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
+import type { Fqn } from '@likec4/core/types'
 import { Alert, Box, Button, Group, Menu, rem, Text, ThemeIcon, Tree, useTree } from '@mantine/core'
 import { IconInfoCircle, IconTarget, IconZoomScan } from '@tabler/icons-react'
 import { type ReactNode, memo, useEffect, useMemo } from 'react'
@@ -107,7 +108,7 @@ const DeployedInstanceRenderer = (
 
 const setHoveredNode = () => {}
 export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn }) => {
-  const element = useLikeC4Model(true).element(elementFqn)
+  const element = useLikeC4Model().element(elementFqn)
   const deployments = [...element.deployments()]
 
   const tree = useTree({

package/src/overlays/element-details/TabPanelRelationships.tsx

@@ -1,4 +1,5 @@
-import { type LikeC4Model, nameFromFqn } from '@likec4/core'
+import { nameFromFqn } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { ActionIcon, Box, Group, Paper, Stack, Text, ThemeIcon, Tooltip as MantineTooltip } from '@mantine/core'
 import { IconArrowRight, IconExternalLink, IconInfoCircle } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'

package/src/overlays/element-details/TabPanelStructure.tsx

@@ -1,4 +1,4 @@
-import type { LikeC4Model } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { Alert, Anchor, Box, Pill, Text, Tree, useTree } from '@mantine/core'
 import { IconInfoCircle } from '@tabler/icons-react'
 import { type ReactNode, useEffect, useMemo } from 'react'

package/src/overlays/element-details/actor.ts

@@ -1,5 +1,5 @@
-import { type DiagramView, type Fqn, type NodeId } from '@likec4/core'
-import { type Rect } from '@xyflow/system'
+import type { DiagramView, Fqn, NodeId } from '@likec4/core/types'
+import type { Rect } from '@xyflow/system'
 import {
   type ActorLogicFrom,
   type ActorRefFromLogic,

package/src/overlays/overlay/Overlay.css.ts

@@ -12,8 +12,8 @@ const dialog = css.raw({
   boxSizing: 'border-box',
   margin: 0,
   position: 'fixed',
-  width: 'auto',
-  height: 'auto',
+  width: '100vw',
+  height: '100vh',
   maxWidth: '100vw',
   maxHeight: '100vh',
   background: `mantine.colors.defaultBorder/50`,
@@ -26,41 +26,12 @@ const dialog = css.raw({
   [offset]: '0px',
   [inset]: 'calc((1 + var(--_level) * 0.75) * var(--_offset))',
   [backdropOpacity]: '0%',
+  [borderRadius]: '0px',
   _backdrop: {
     cursor: 'zoom-out',
-    backdropFilter: `blur(var(${backdropBlur}))`,
-    backgroundColor: {
-      _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
-      _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`,
-    },
-  },
-  smDown: {
-    [borderRadius]: '0px',
-    border: 'none',
-    inset: 0,
-    padding: 0,
-    // [offset]: '0px',
-    // [inset]: '0px',
-    width: '100vw',
-    height: '100vh',
-  },
-  sm: {
-    inset: '[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]',
-    width: 'calc(100vw - 2 * var(--_inset))',
-    height: 'calc(100vh - var(--_offset) - var(--_inset))',
-    [borderRadius]: '6px',
-    padding: '6px',
-    [offset]: '1rem',
-  },
-  md: {
-    [offset]: '1rem',
-  },
-  lg: {
-    [offset]: '2rem',
-  },
-  xl: {
-    [offset]: '4rem',
   },
+  inset: 0,
+  padding: 0,
 })
 
 const body = css.raw({
@@ -68,13 +39,10 @@ const body = css.raw({
   containerName: 'overlay-dialog',
   containerType: 'size',
   border: `0 solid transparent`,
-  background: 'mantine.colors.body',
   overflow: 'hidden',
   width: '100%',
   height: '100%',
-  sm: {
-    borderRadius: `calc(var(${borderRadius}) - 2px)`,
-  },
+  background: 'mantine.colors.body',
 })
 
 export const overlay = sva({
@@ -83,4 +51,73 @@ export const overlay = sva({
     dialog: dialog,
     body: body,
   },
+  variants: {
+    fullscreen: {
+      false: {
+        dialog: {
+          sm: {
+            inset: '[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]',
+            width: 'calc(100vw - 2 * var(--_inset))',
+            height: 'calc(100vh - var(--_offset) - var(--_inset))',
+            [borderRadius]: '6px',
+            padding: '6px',
+            [offset]: '1rem',
+          },
+          md: {
+            [offset]: '1rem',
+          },
+          lg: {
+            [offset]: '2rem',
+          },
+          xl: {
+            [offset]: '4rem',
+          },
+        },
+        body: {
+          sm: {
+            borderRadius: `calc(var(${borderRadius}) - 2px)`,
+          },
+        },
+      },
+      true: {
+        dialog: {
+          inset: 0,
+          padding: 0,
+        },
+      },
+    },
+    // transparent: {
+    //   false: {
+    //   },
+    //   true: {
+    //     dialog: {
+    //       background: 'transparent',
+    //     },
+    //   },
+    // },
+    withBackdrop: {
+      false: {
+        dialog: {
+          _backdrop: {
+            display: 'none',
+          },
+        },
+      },
+      true: {
+        dialog: {
+          _backdrop: {
+            backdropFilter: `blur(var(${backdropBlur}))`,
+            backgroundColor: {
+              _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
+              _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`,
+            },
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    fullscreen: false,
+    withBackdrop: true,
+  },
 })

package/src/overlays/overlay/Overlay.tsx

@@ -2,20 +2,26 @@ import { cx } from '@likec4/styles/css'
 import {
   RemoveScroll,
 } from '@mantine/core'
-import { useMergedRef } from '@mantine/hooks'
-import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
+import { useFocusTrap, useMergedRef } from '@mantine/hooks'
+import { useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web'
 import { m, useReducedMotionConfig } from 'motion/react'
-import { type PropsWithChildren, forwardRef, useEffect, useRef, useState } from 'react'
+import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
 import { backdropBlur, backdropOpacity, level as cssVarLevel, overlay as overlayCVA } from './Overlay.css'
 
 export type OverlayProps = PropsWithChildren<{
+  fullscreen?: boolean | undefined
+  withBackdrop?: boolean | undefined
   overlayLevel?: number
   className?: string
   classes?: {
     dialog?: string
     body?: string
   }
+  backdrop?: {
+    opacity?: number
+  }
+  openDelay?: number
   onClose: () => void
   onClick?: never
 }>
@@ -26,15 +32,22 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
   classes,
   overlayLevel = 0,
   children,
+  fullscreen = false,
+  withBackdrop = true,
+  backdrop,
+  openDelay = 130,
   ...rest
 }, ref) => {
-  const [opened, setOpened] = useState(false)
+  const [opened, setOpened] = useState(openDelay === 0)
+  const focusTrapRef = useFocusTrap(opened)
   const dialogRef = useRef<HTMLDialogElement>(null)
   const isClosingRef = useRef(false)
 
   const motionNotReduced = useReducedMotionConfig() !== true
 
-  const onCloseRef = useSyncedRef(onClose)
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
+
   const close = useDebouncedCallback(
     () => {
       if (isClosingRef.current) return
@@ -45,37 +58,39 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
     50,
   )
 
-  useEffect(() => {
-    const cancel = (e: Event) => {
-      e.preventDefault()
-      e.stopPropagation()
-      close()
-    }
-    dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
-    return () => {
-      dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
-    }
-  }, [])
-
-  useTimeoutEffect(() => {
+  useLayoutEffect(() => {
     if (!dialogRef.current?.open) {
       // Move dialog to the top of the DOM
       dialogRef.current?.showModal()
     }
-  }, 30)
+  }, [])
 
   useTimeoutEffect(() => {
     setOpened(true)
-  }, 120)
+  }, openDelay > 0 ? openDelay : undefined)
 
   const styles = overlayCVA({
-    level: overlayLevel as 0 | 1 | 2 | 3,
+    fullscreen,
+    withBackdrop,
   })
 
+  let targetBackdropOpacity = overlayLevel > 0 ? '50%' : '60%'
+  if (backdrop?.opacity !== undefined) {
+    targetBackdropOpacity = `${backdrop.opacity * 100}%`
+  }
   return (
     <m.dialog
-      ref={useMergedRef(dialogRef, ref)}
-      className={cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className)}
+      ref={useMergedRef(
+        dialogRef,
+        focusTrapRef,
+        ref,
+      )}
+      className={cx(
+        classes?.dialog,
+        className,
+        styles.dialog,
+        fullscreen && RemoveScroll.classNames.fullWidth,
+      )}
       layout
       style={{
         // @ts-ignore
@@ -86,21 +101,28 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
           initial: {
             [backdropBlur]: '0px',
             [backdropOpacity]: '0%',
-            scale: overlayLevel > 0 ? 0.9 : 1.075,
+            scale: 0.95,
+            originY: 0,
+            translateY: -20,
             opacity: 0,
           },
           animate: {
             [backdropBlur]: overlayLevel > 0 ? '4px' : '8px',
-            [backdropOpacity]: overlayLevel > 0 ? '50%' : '60%',
+            [backdropOpacity]: targetBackdropOpacity,
             scale: 1,
             opacity: 1,
+            translateY: 0,
             transition: {
               delay: 0.075,
             },
           },
           exit: {
-            scale: 1.2,
             opacity: 0,
+            scale: 0.98,
+            translateY: -20,
+            transition: {
+              duration: 0.1,
+            },
             [backdropBlur]: '0px',
             [backdropOpacity]: '0%',
           },
@@ -108,7 +130,7 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
         : {
           initial: {
             [backdropBlur]: '8px',
-            [backdropOpacity]: '60%',
+            [backdropOpacity]: targetBackdropOpacity,
           },
         }}
       onClick={e => {
@@ -118,6 +140,11 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
           return
         }
       }}
+      onCancel={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        close()
+      }}
       onDoubleClick={stopPropagation}
       onPointerDown={stopPropagation}
       onClose={e => {
@@ -126,8 +153,13 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
       }}
       {...rest}
     >
-      <RemoveScroll forwardProps removeScrollBar={false}>
-        <div className={cx(styles.body, 'overlay-body', classes?.body)}>
+      <RemoveScroll forwardProps>
+        <div
+          className={cx(
+            classes?.body,
+            styles.body,
+            'overlay-body',
+          )}>
           {opened && <>{children}</>}
         </div>
       </RemoveScroll>

package/src/overlays/overlaysActor.ts

@@ -1,4 +1,4 @@
-import type { Fqn } from '@likec4/core'
+import type { Fqn } from '@likec4/core/types'
 import { getHotkeyHandler } from '@mantine/hooks'
 import type { KeyboardEvent } from 'react'
 import { isString, last, reverse } from 'remeda'

package/src/overlays/relationship-details/RelationshipDetails.tsx

@@ -83,7 +83,7 @@ const selectSubject = (state: RelationshipDetailsSnapshot) => ({
 const SyncRelationshipDetailsXYFlow = memo(() => {
   const actor = useRelationshipDetailsActor()
   const subject = useSelector(actor, selectSubject, deepEqual)
-  const likec4model = useLikeC4Model(true)
+  const likec4model = useLikeC4Model()
   const view = likec4model.findView(subject.viewId) ?? null
   const data = useMemo(() => {
     let data: RelationshipDetailsViewData
@@ -224,7 +224,7 @@ const topLeftPanelselector = ({ context }: RelationshipDetailsSnapshot) => ({
 })
 const TopLeftPanel = memo(() => {
   const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual)
-  const likec4model = useLikeC4Model(true)
+  const likec4model = useLikeC4Model()
   const view = likec4model.findView(viewId)
 
   if (!view || !view.isDiagram()) {
@@ -239,8 +239,8 @@ const TopLeftPanel = memo(() => {
       find(edges, (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target)
       || find(edges, (e) => {
         return (e.source.element?.id === subject.source ||
-          isAncestor(e.source.element?.id ?? '--', subject.source ?? '__')) &&
-          (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? '', subject.target ?? '__'))
+          isAncestor(e.source.element?.id ?? '__', subject.source ?? '__')) &&
+          (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? '__', subject.target ?? '__'))
       })
     )
   if (!edge) {

package/src/overlays/relationship-details/_types.ts

@@ -1,4 +1,4 @@
-import type { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core'
+import type { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core/types'
 import type { Simplify } from 'type-fest'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
@@ -26,6 +26,7 @@ export namespace RelationshipDetailsTypes {
         | 'height'
         | 'navigateTo'
         | 'style'
+        | 'tags'
       >
     >
     & {

package/src/overlays/relationship-details/custom/nodeTypes.tsx

@@ -5,6 +5,7 @@ import {
   ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
+  ElementTags,
   ElementTitle,
 } from '../../../base/primitives'
 import { ElementActions } from './ElementActions'
@@ -12,6 +13,7 @@ import { ElementActions } from './ElementActions'
 import { Handle } from '@xyflow/react'
 import { Position } from '@xyflow/system'
 import type { NodeProps } from '../../../base'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipDetailsTypes } from '../_types'
 
@@ -30,10 +32,12 @@ const ElementDetailsButtonWithHandler = (props: NodeProps<RelationshipDetailsTyp
 }
 
 export const ElementNode = customNode<RelationshipDetailsTypes.ElementNodeData>((props) => {
+  const { enableElementTags } = useEnabledFeatures()
   return (
     <ElementNodeContainer nodeProps={props}>
       <ElementShape {...props} />
       <ElementTitle {...props} />
+      {enableElementTags && <ElementTags {...props} />}
       <ElementDetailsButtonWithHandler {...props} />
       <ElementActions {...props} />
       <ElementPorts {...props} />

package/src/overlays/relationship-details/layout-to-xyflow.ts

@@ -119,6 +119,7 @@ export function layoutResultToXYFlow(
               icon: node.icon ?? 'none',
               ports: node.ports,
               style: node.style,
+              tags: node.tags,
               ...navigateTo,
             },
           },

package/src/overlays/relationship-details/layout.ts

@@ -394,11 +394,13 @@ export function layoutRelationshipDetails(
     return {
       id: id as NodeId,
       parent: parentId as NodeId ?? null,
+      x: position.x,
+      y: position.y,
       position: [position.x, position.y],
       title: element.title,
       description: element.description,
       technology: element.technology,
-      tags: null,
+      tags: [...element.tags],
       links: null,
       color: inheritFromNodeOrAncestor?.color ?? element.color,
       shape: inheritFromNode?.shape ?? element.shape,

package/src/overlays/relationships-browser/SelectElement.tsx

@@ -47,7 +47,7 @@ export const SelectElement = memo(() => {
 
   const root = useRef<HTMLDivElement>(null)
   const viewport = useRef<HTMLDivElement>(null)
-  const model = useLikeC4Model(true)
+  const model = useLikeC4Model()
   const subject = model.findElement(subjectId)
   const data = useLikeC4ElementsTree(scope === 'view' && viewId ? viewId : undefined)
   const tree = useTree({

package/src/overlays/relationships-browser/_types.ts

@@ -7,7 +7,7 @@ import type {
   RelationId,
   RelationshipLineType,
   ViewId,
-} from '@likec4/core'
+} from '@likec4/core/types'
 import type { Simplify } from 'type-fest'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
@@ -35,6 +35,7 @@ export namespace RelationshipsBrowserTypes {
         | 'style'
         | 'width'
         | 'height'
+        | 'tags'
         | 'navigateTo'
       >
     >

package/src/overlays/relationships-browser/custom/nodeTypes.tsx

@@ -8,8 +8,10 @@ import {
   ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
+  ElementTags,
   ElementTitle,
 } from '../../../base/primitives'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes } from '../_types'
 import { ElementActions } from './ElementActions'
@@ -32,10 +34,12 @@ const ElementDetailsButtonWithHandler = (
 }
 
 export const ElementNode = customNode<RelationshipsBrowserTypes.ElementNodeData>((props) => {
+  const { enableElementTags } = useEnabledFeatures()
   return (
     <ElementNodeContainer key={props.id} layoutId={props.id} nodeProps={props}>
       <ElementShape {...props} />
       <ElementTitle {...props} />
+      {enableElementTags && <ElementTags {...props} />}
       <ElementDetailsButtonWithHandler {...props} />
       <ElementActions {...props} />
       <ElementPorts {...props} />