@likec4/diagram 1.30.0 → 1.32.0

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
@@ -215,16 +212,19 @@ export function ElementDetailsCard({
     }
   }, 20)
 
+  /**
+   * This delay improves "enter" animations,
+   * if  current tab is "Relationships"
+   */
   useTimeoutEffect(() => {
     setOpened(true)
-  }, 150)
+  }, 200)
 
   return (
     <m.dialog
       ref={ref}
       className={cx(styles.dialog, RemoveScroll.classNames.fullWidth)}
       layout
-      layoutRoot
       initial={{
         [styles.backdropBlur]: '0px',
         [styles.backdropOpacity]: '5%',
@@ -255,14 +255,15 @@ export function ElementDetailsCard({
     >
       <RemoveScroll forwardProps removeScrollBar={false}>
         <Card
+          shadow="md"
+          component={m.div}
+          layout
+          layoutRoot
           drag
+          dragControls={controls}
           dragElastic={0}
           dragMomentum={false}
           dragListener={false}
-          dragControls={controls}
-          withBorder
-          shadow="md"
-          component={m.div}
           className={cx(
             css({
               likec4Palette: nodeModel?.color ?? elementModel.color,
@@ -296,13 +297,11 @@ export function ElementDetailsCard({
             width: width as any,
             height: height as any,
           }}>
-          <Box
-            className={styles.cardHeader}
-            onPointerDown={e => controls.start(e)}>
+          <div className={styles.cardHeader} onPointerDown={e => controls.start(e)}>
             <Group align="start" justify="space-between" gap={'sm'} mb={'sm'} wrap="nowrap">
               <Group align="start" gap={'sm'} style={{ cursor: 'default' }} wrap="nowrap">
                 {elementIcon}
-                <Box>
+                <div>
                   <Text
                     component={'div'}
                     className={styles.title}>
@@ -313,7 +312,7 @@ export function ElementDetailsCard({
                       {notation}
                     </Text>
                   )}
-                </Box>
+                </div>
               </Group>
               <CloseButton
                 size={'lg'}
@@ -323,22 +322,32 @@ export function ElementDetailsCard({
                 }} />
             </Group>
             <Group align="baseline" gap={'sm'} wrap="nowrap">
-              <Box>
+              <div>
                 <SmallLabel>kind</SmallLabel>
                 <Badge radius={'sm'} size="sm" fw={600} color="gray">{elementModel.kind}</Badge>
-              </Box>
-              <Box flex={1}>
+              </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>
-              </Box>
+              </div>
               <ActionIconGroup
                 style={{
-                  alignSelf: 'flex-end',
+                  alignSelf: 'flex-start',
                 }}>
                 {defaultLink && (
                   <ActionIcon
@@ -384,7 +393,7 @@ export function ElementDetailsCard({
                 )}
               </ActionIconGroup>
             </Group>
-          </Box>
+          </div>
           <Tabs
             value={activeTab}
             onChange={v => setActiveTab(v as any)}
@@ -452,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>
@@ -465,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>
@@ -499,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

@@ -1,22 +1,27 @@
 import { cx } from '@likec4/styles/css'
 import {
-  Box,
   RemoveScroll,
 } from '@mantine/core'
 import { useMergedRef } from '@mantine/hooks'
-import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
+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'
 
-type OverlayProps = PropsWithChildren<{
+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
 }>
@@ -27,15 +32,21 @@ 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 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
@@ -46,37 +57,30 @@ 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)}
+      className={cx(RemoveScroll.classNames.fullWidth, classes?.dialog, className, styles.dialog)}
       layout
       style={{
         // @ts-ignore
@@ -87,21 +91,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%',
           },
@@ -109,7 +120,7 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
         : {
           initial: {
             [backdropBlur]: '8px',
-            [backdropOpacity]: '60%',
+            [backdropOpacity]: targetBackdropOpacity,
           },
         }}
       onClick={e => {
@@ -119,6 +130,11 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
           return
         }
       }}
+      onCancel={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        close()
+      }}
       onDoubleClick={stopPropagation}
       onPointerDown={stopPropagation}
       onClose={e => {
@@ -128,9 +144,9 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
       {...rest}
     >
       <RemoveScroll forwardProps removeScrollBar={false}>
-        <Box className={cx(styles.body, 'overlay-body', classes?.body)}>
+        <div className={cx(classes?.body, styles.body, 'overlay-body')}>
           {opened && <>{children}</>}
-        </Box>
+        </div>
       </RemoveScroll>
     </m.dialog>
   )

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'
@@ -7,7 +7,6 @@ import {
   type ActorRefFrom,
   type SnapshotFrom,
   assertEvent,
-  assign,
   enqueueActions,
   fromCallback,
   setup,
@@ -59,7 +58,7 @@ const hotkeyLogic = fromCallback(({ sendBack }: {
   }
 })
 
-export const overlaysActorLogic = setup({
+const _overlaysActorLogic = setup({
   types: {
     context: {} as OverlaysContext,
     events: {} as OverlayActorEvent,
@@ -278,6 +277,8 @@ export const overlaysActorLogic = setup({
   ],
 })
 
-export interface OverlaysActorLogic extends ActorLogicFrom<typeof overlaysActorLogic> {}
+export interface OverlaysActorLogic extends ActorLogicFrom<typeof _overlaysActorLogic> {}
+export const overlaysActorLogic: OverlaysActorLogic = _overlaysActorLogic
+
 export type OverlaysActorSnapshot = SnapshotFrom<OverlaysActorLogic>
 export interface OverlaysActorRef extends ActorRefFrom<OverlaysActorLogic> {}

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

@@ -1,10 +1,10 @@
 import { type DiagramEdge, type DiagramView, invariant, isAncestor, nonNullable } from '@likec4/core'
+import { cx as clsx } from '@likec4/styles/css'
 import { ActionIcon, Group } from '@mantine/core'
 import { useCallbackRef, useStateHistory } from '@mantine/hooks'
 import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'
 import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
-import clsx from 'clsx'
 import { deepEqual } from 'fast-equals'
 import { AnimatePresence, LayoutGroup, m } from 'motion/react'
 import { memo, useEffect, useMemo, useRef } from 'react'
@@ -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/SelectEdge.tsx

@@ -8,11 +8,9 @@ import {
   ScrollAreaAutosize,
   Text,
   ThemeIcon,
-  useComputedColorScheme,
 } from '@mantine/core'
 import { IconArrowRight, IconSelector } from '@tabler/icons-react'
 import { useRef } from 'react'
-import { useMantinePortalProps } from '../../hooks'
 import { useRelationshipDetails } from './hooks'
 import * as css from './SelectEdge.css'