@likec4/diagram 1.27.1 → 1.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.27.1",
+  "version": "1.27.2",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -42,19 +42,19 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@mantine/core": "7.17.2",
-    "@mantine/hooks": "7.17.2",
+    "@mantine/core": "7.17.3",
+    "@mantine/hooks": "7.17.3",
     "@nanostores/react": "0.8.4",
     "@react-hookz/web": "^25.1.0",
     "@tabler/icons-react": "3.31.0",
     "@xstate/react": "^5.0.3",
-    "@xyflow/react": "^12.4.4",
-    "@xyflow/system": "^0.0.52",
+    "@xyflow/react": "^12.5.2",
+    "@xyflow/system": "^0.0.53",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "fast-equals": "^5.2.2",
-    "framer-motion": "^12.5.0",
+    "framer-motion": "^12.6.2",
     "nanostores": "0.11.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -63,8 +63,8 @@
     "remeda": "^2.21.2",
     "type-fest": "^4.38.0",
     "xstate": "^5.19.2",
-    "@likec4/styles": "1.27.1",
-    "@likec4/core": "1.27.1"
+    "@likec4/core": "1.27.2",
+    "@likec4/styles": "1.27.2"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.53.3",
@@ -73,15 +73,15 @@
     "@types/d3-shape": "^3.1.7",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "@types/node": "^20.17.27",
+    "@types/node": "^20.17.28",
     "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.5.3",
     "typescript": "^5.8.2",
-    "vite": "^6.2.3",
+    "vite": "^6.2.4",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.9",
     "wireit": "^0.14.11",
-    "@likec4/tsconfig": "1.27.1"
+    "@likec4/tsconfig": "1.27.2"
   },
   "scripts": {
     "generate": "panda codegen",

package/src/LikeC4Diagram.props.ts

@@ -83,6 +83,9 @@ export type OverrideReactFlowProps = Pick<
   | 'nodeDragThreshold'
 >
 
+export type PaddingUnit = 'px' | '%'
+export type PaddingWithUnit = `${number}${PaddingUnit}` | number
+
 export interface LikeC4DiagramProperties {
   view: DiagramView
 
@@ -114,11 +117,12 @@ export interface LikeC4DiagramProperties {
    * @default true
    */
   fitView?: boolean | undefined
+
   /**
-   * Seems like this is percentage of the view size
-   * @default 0
+   * Padding around the diagram
+   * @default '8px'
    */
-  fitViewPadding?: number | undefined
+  fitViewPadding?: PaddingWithUnit | undefined
 
   /**
    * @default false if readonly

package/src/LikeC4Diagram.tsx

@@ -35,7 +35,7 @@ export function LikeC4Diagram({
   view,
   className,
   fitView = true,
-  fitViewPadding = 0,
+  fitViewPadding = '8px',
   readonly = true,
   pannable = true,
   zoomable = true,

package/src/StaticLikeC4Diagram.tsx

@@ -21,7 +21,7 @@ export type StaticLikeC4DiagramProps = Pick<
 export function StaticLikeC4Diagram({
   view,
   fitView = true,
-  fitViewPadding = 0,
+  fitViewPadding = '8px',
   enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,

package/src/base/BaseXYFlow.tsx

@@ -10,6 +10,7 @@ import { Fragment, useMemo } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow'
+import type { PaddingWithUnit } from '../LikeC4Diagram.props'
 import { stopPropagation } from '../utils/xyflow'
 import { type XYBackground, Background } from './Background'
 import { MaxZoom, MinZoom } from './const'
@@ -22,7 +23,7 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     nodesSelectable?: boolean
     nodesDraggable?: boolean
     background?: 'transparent' | 'solid' | XYBackground
-    fitViewPadding?: number
+    fitViewPadding?: PaddingWithUnit | undefined
     onViewportResize?: undefined | (() => void)
   }
   & SetRequired<

package/src/base/primitives/compound/CompoundNodeContainer.tsx

@@ -11,7 +11,6 @@ type RequiredData = Pick<
   DiagramNode,
   | 'color'
   | 'depth'
-  | 'shape'
   | 'style'
 >
 
@@ -73,7 +72,6 @@ export function CompoundNodeContainer({
       data-likec4-hovered={isHovered}
       data-likec4-color={data.color}
       data-compound-depth={depth}
-      data-likec4-shape={data.shape}
       {...isTransparent && {
         'data-compound-transparent': true,
         'data-compound-title-inverse': opacity < 0.5,

package/src/base/primitives/element/ElementActionButtons.tsx

@@ -68,15 +68,14 @@ export function ElementActionButtons({
             initial={false}
             whileTap={{ scale: 1 }}
             whileHover={{
-              scale: 1.35,
+              scale: 1.3,
             }}
+            onTap={e => button.onClick(e as unknown as React.MouseEvent)}
+            // Otherwise node receives click event and is selected
+            onClick={stopPropagation}
+            onDoubleClick={stopPropagation}
           >
-            <ActionIcon
-              className={actionBtn({})}
-              onClick={button.onClick}
-              // Otherwise node receives click event and is selected
-              onDoubleClick={stopPropagation}
-            >
+            <ActionIcon className={actionBtn({})}>
               {button.icon}
             </ActionIcon>
           </m.div>

package/src/base/primitives/element/ElementNodeContainer.css.ts

@@ -13,12 +13,12 @@ export const container = style({
   alignItems: 'center',
   justifyContent: 'center',
   pointerEvents: 'none',
-  _after: {
+  _before: {
     content: '" "',
     position: 'absolute',
-    top: '100%',
+    top: 'calc(100% - 4px)',
     left: 0,
-    right: 0,
+    width: '100%',
     height: '24px',
     background: '[transparent]',
     pointerEvents: 'all',
@@ -43,7 +43,7 @@ export const container = style({
   //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
   // },
   _reduceGraphicsOnPan: {
-    _after: {
+    _before: {
       display: 'none',
     },
   },

package/src/base/updateEdges.ts

@@ -17,14 +17,14 @@ function _update<E extends Base.Edge>(current: E[], update: E[]): E[] {
       ) {
         return existing
       }
-      return {
-        ...omit(existing, ['hidden', 'zIndex']),
-        ...next,
-        data: {
-          ...existing.data,
-          ...next.data,
-        },
-      }
+      // return {
+      //   ...omit(existing, ['hidden', 'zIndex']),
+      //   ...next,
+      //   data: {
+      //     ...existing.data,
+      //     ...next.data,
+      //   },
+      // }
     }
     return next
   })

package/src/base/updateNodes.ts

@@ -20,17 +20,17 @@ function _update<N extends Base.Node>(current: N[], updated: N[]): N[] {
       ) {
         return existing
       }
-      return {
-        ...omit(existing, ['measured', 'parentId', 'hidden', 'zIndex']),
-        ...update,
-        // Force dimensions from update
-        width: update.initialWidth,
-        height: update.initialHeight,
-        data: {
-          ...existing.data,
-          ...update.data,
-        },
-      } as N
+      // return {
+      //   ...omit(existing, ['measured', 'parentId', 'hidden', 'zIndex']),
+      //   ...update,
+      //   // Force dimensions from update
+      //   width: update.initialWidth,
+      //   height: update.initialHeight,
+      //   data: {
+      //     ...existing.data,
+      //     ...update.data,
+      //   },
+      // } as N
     }
     return update
   })

package/src/bundle/LikeC4View.props.ts

@@ -1,6 +1,6 @@
 import type { WhereOperator } from '@likec4/core'
 import type { CSSProperties } from 'react'
-import type { ElementIconRenderer, OverrideReactFlowProps } from '../LikeC4Diagram.props'
+import type { ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props'
 
 export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
   /**
@@ -66,10 +66,10 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
   fitView?: boolean | undefined
 
   /**
-   * Seems like this is percentage of the view size
-   * @default 0.1
+   * Padding around the diagram
+   * @default '8px'
    */
-  fitViewPadding?: number | undefined
+  fitViewPadding?: PaddingWithUnit | undefined
 
   /**
    * Display diagram title / description
@@ -163,10 +163,10 @@ export interface LikeC4BrowserProps {
   background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined
 
   /**
-   * Seems like this is percentage of the view size
-   * @default 0.1
+   * Padding around the diagram
+   * @default '16px'
    */
-  fitViewPadding?: number | undefined
+  fitViewPadding?: PaddingWithUnit | undefined
 
   /**
    * Show/hide panel with top left controls,

package/src/bundle/LikeC4View.tsx

@@ -61,7 +61,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
   injectFontCss = true,
   controls = false,
   fitView = true,
-  fitViewPadding = 0.1,
+  fitViewPadding = '8px',
   background = 'transparent',
   browser = true,
   showDiagramTitle = false,
@@ -169,7 +169,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
                 controls
                 readonly
                 fitView
-                fitViewPadding={fitViewPadding}
+                fitViewPadding={'16px'}
                 {...props}
                 {...browserProps}
                 showNotations={(browserProps.showNotations ?? true) &&

package/src/hooks/useCurrentViewId.ts

@@ -1,8 +1,10 @@
 import type { ViewId } from '@likec4/core'
+import { useSelector } from '@xstate/react'
 import type { DiagramActorSnapshot } from '../state/types'
-import { useDiagramActorSnapshot } from './useDiagram'
+import { useDiagramActorRef } from './useDiagram'
 
 const selectViewId = (s: DiagramActorSnapshot) => s.context.view.id
 export function useCurrentViewId(): ViewId {
-  return useDiagramActorSnapshot(selectViewId)
+  const actorRef = useDiagramActorRef()
+  return useSelector(actorRef, selectViewId)
 }

package/src/hooks/useDiagram.ts

@@ -1,4 +1,4 @@
-import { type DiagramView, type EdgeId, type Fqn, type NodeId, type ViewId } from '@likec4/core'
+import { type DiagramView, type EdgeId, type ElementNotation, type Fqn, type NodeId, type ViewId } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector as useXstateSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
@@ -45,17 +45,19 @@ export function useDiagram() {
       })
     },
     openSource: (params: OpenSourceParams) => {
-      actor.send({ type: 'open.source', ...params })
-    },
-    openElementDetails: (fqn: Fqn, fromNode?: NodeId) => {
       startTransition(() => {
-        actor.send({ type: 'open.elementDetails', fqn, fromNode })
+        actor.send({ type: 'open.source', ...params })
       })
     },
-    openRelationshipDetails: (edgeId: EdgeId) => {
-      startTransition(() => {
-        actor.send({ type: 'open.relationshipDetails', edgeId })
-      })
+    openElementDetails: (fqn: Fqn, fromNode?: NodeId) => {
+      actor.send({ type: 'open.elementDetails', fqn, fromNode })
+    },
+    openRelationshipDetails: (...params: [edgeId: EdgeId] | [source: Fqn, target: Fqn]) => {
+      if (params.length === 1) {
+        actor.send({ type: 'open.relationshipDetails', params: { edgeId: params[0] } })
+      } else {
+        actor.send({ type: 'open.relationshipDetails', params: { source: params[0], target: params[1] } })
+      }
     },
 
     updateNodeData: (nodeId: NodeId, data: PartialDeep<Types.NodeData>) => {
@@ -135,6 +137,13 @@ export function useDiagram() {
     toggleFeature: (feature: FeatureName, forceValue?: boolean) => {
       actor.send({ type: 'toggle.feature', feature, ...(forceValue !== undefined && { forceValue }) })
     },
+
+    highlightNotation: (notation: ElementNotation, kind?: string) => {
+      actor.send({ type: 'notations.highlight', notation, ...(kind && { kind }) })
+    },
+    unhighlightNotation: () => {
+      actor.send({ type: 'notations.unhighlight' })
+    },
   }), [actor])
 }
 

package/src/likec4diagram/ui/notation/NotationPanel.css.ts

@@ -98,6 +98,6 @@ export const shapeBadge = css({
   ['--badge-padding-x']: '3px',
   ['--badge-height']: '13.5px',
   ['--badge-lh']: '1',
-  // ['--badge-bg']: vars.element.fill,
-  // ['--badge-color']: vars.element.hiContrast
+  ['--badge-bg']: '{colors.likec4.palette.fill}',
+  ['--badge-color']: '{colors.likec4.palette.hiContrast}',
 })

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

@@ -54,13 +54,14 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
           likec4Palette: color,
         }),
       )}
+      data-likec4-color={color}
       onMouseEnter={() => {
         setOnlyKind(null)
-        // diagramStore.getState().highlightByElementNotation(value)
+        diagram.highlightNotation(value)
       }}
       onMouseLeave={() => {
         setOnlyKind(null)
-        // diagramStore.setState({ dimmed: new Set() })
+        diagram.unhighlightNotation()
       }}
     >
       <Group
@@ -88,17 +89,18 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
             {value.kinds.map((kind) => (
               <Badge
                 key={kind}
-                className={styles.shapeBadge}
+                className={cx(
+                  styles.shapeBadge,
+                )}
                 onMouseEnter={() => {
                   setOnlyKind(kind)
-                  // diagramStore.getState().highlightByElementNotation(value, kind)
+                  diagram.highlightNotation(value, kind)
                 }}
                 onMouseLeave={() => {
                   setOnlyKind(null)
-                  // diagramStore.getState().highlightByElementNotation(value)
+                  diagram.highlightNotation(value)
                 }}
                 opacity={isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1}
-                color={isNonNullish(onlyKind) && onlyKind !== kind ? 'gray' : token('colors.likec4.palette.fill')}
               >
                 {kind}
               </Badge>

package/src/overlays/Overlays.tsx

@@ -102,12 +102,13 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
     overlaysActorRef.send({ type: 'close', actorId: actorRef.id })
   }
 
-  const overlaysReact = overlays.map((overlay) => {
+  const overlaysReact = overlays.map((overlay, index) => {
     switch (overlay.type) {
       case 'relationshipsBrowser':
         return (
           <Overlay
             key={overlay.actorRef.sessionId}
+            overlayLevel={Math.min(index, 3) as 0 | 1 | 2 | 3}
             onClose={() => close(overlay.actorRef)}>
             <RelationshipsBrowser actorRef={overlay.actorRef} />
           </Overlay>
@@ -115,6 +116,7 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
       case 'relationshipDetails':
         return (
           <Overlay
+            overlayLevel={Math.min(index, 3) as 0 | 1 | 2 | 3}
             key={overlay.actorRef.sessionId}
             onClose={() => close(overlay.actorRef)}>
             <RelationshipDetails actorRef={overlay.actorRef} />

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

@@ -1,10 +1,14 @@
-import { css } from '@likec4/styles/css'
+import { css, sva } from '@likec4/styles/css'
 
 export const backdropBlur = '--_blur'
 export const backdropOpacity = '--_opacity'
 
+export const level = '--_level'
+const offset = '--_offset'
+const inset = '--_inset'
+
 const borderRadius = '--_border-radius'
-export const dialog = css({
+const dialog = css.raw({
   boxSizing: 'border-box',
   margin: 0,
   position: 'fixed',
@@ -18,6 +22,9 @@ export const dialog = css({
   outline: 'none',
   borderRadius: `var(${borderRadius})`,
   [backdropBlur]: '0px',
+  [level]: '0',
+  [offset]: '0px',
+  [inset]: 'calc((1 + var(--_level) * 0.5) * var(--_offset))',
   [backdropOpacity]: '0%',
   _backdrop: {
     cursor: 'zoom-out',
@@ -32,36 +39,47 @@ export const dialog = css({
     border: 'none',
     inset: 0,
     padding: 0,
+    // [offset]: '0px',
+    // [inset]: '0px',
     width: '100vw',
     height: '100vh',
   },
   sm: {
+    inset: '[var(--_inset) var(--_offset) var(--_offset) var(--_inset)]',
+    width: 'calc(100vw - var(--_offset) - var(--_inset))',
+    height: 'calc(100vh - var(--_offset) - var(--_inset))',
     [borderRadius]: '6px',
     padding: '6px',
-    inset: '1rem',
-    width: 'calc(100vw - 2rem)',
-    height: 'calc(100vh - 2rem)',
+    [offset]: '1rem',
   },
   md: {
-    inset: '2rem',
-    width: 'calc(100vw - 4rem)',
-    height: 'calc(100vh - 4rem)',
+    [offset]: '1rem',
   },
   lg: {
-    inset: '4rem',
-    width: 'calc(100vw - 8rem)',
-    height: 'calc(100vh - 8rem)',
+    [offset]: '2rem',
   },
   xl: {
-    [borderRadius]: '8px',
-    padding: '8px',
-    inset: '5rem',
-    width: 'calc(100vw - 10rem)',
-    height: 'calc(100vh - 10rem)',
+    [offset]: '4rem',
   },
+  //     inset: '[calc(2rem + var(--_level, 0) * 1rem), 2rem, 2rem, 2rem]',
+  //     width: 'calc(100vw - 4rem)',
+  //     height: 'calc(100vh - 4rem - var(--_level, 0) * 1rem)',
+  //   },
+  //   lg: {
+  //     inset: '[calc(4rem + var(--_level, 0) * 1rem), 4rem, 4rem, 4rem]',
+  //     width: 'calc(100vw - 8rem)',
+  //     height: 'calc(100vh - 8rem)',
+  //   },
+  //   xl: {
+  //     [borderRadius]: '8px',
+  //     padding: '8px',
+  //     inset: '[calc(5rem + var(--_level, 0) * 1rem), 5rem, 5rem, 5rem]',
+  //     width: 'calc(100vw - 10rem)',
+  //     height: 'calc(100vh - 10rem - var(--_level, 0) * 1rem)',
+  //   },
 })
 
-export const body = css({
+const body = css.raw({
   position: 'relative',
   containerName: 'overlay-dialog',
   containerType: 'size',
@@ -74,3 +92,35 @@ export const body = css({
     borderRadius: `calc(var(${borderRadius}) - 2px)`,
   },
 })
+
+export const overlay = sva({
+  slots: ['dialog', 'body'],
+  base: {
+    dialog: dialog,
+    body: body,
+  },
+  variants: {
+    level: {
+      0: {
+        dialog: {
+          [level]: '0',
+        },
+      },
+      1: {
+        dialog: {
+          [level]: '1',
+        },
+      },
+      2: {
+        dialog: {
+          [level]: '2',
+        },
+      },
+      3: {
+        dialog: {
+          [level]: '3',
+        },
+      },
+    },
+  },
+})

package/src/overlays/overlay/Overlay.tsx

@@ -8,21 +8,21 @@ import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hoo
 import { type HTMLMotionProps, m, useReducedMotionConfig } from 'framer-motion'
 import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
-import * as styles from './Overlay.css'
+import { backdropBlur, backdropOpacity, overlay as overlayCVA } from './Overlay.css'
 
-type OverlayProps = PropsWithChildren<
-  HTMLMotionProps<'dialog'> & {
-    classes?: {
-      dialog?: string
-      body?: string
-    }
-    onClose: () => void
-    onClick?: never
+type OverlayProps = PropsWithChildren<{
+  overlayLevel?: 0 | 1 | 2 | 3
+  className?: string
+  classes?: {
+    dialog?: string
+    body?: string
   }
->
+  onClose: () => void
+  onClick?: never
+}>
 
 export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
-  ({ children, onClose, className, classes, ...rest }, ref) => {
+  ({ children, onClose, className, classes, overlayLevel = 0, ...rest }, ref) => {
     const [opened, setOpened] = useState(false)
     const dialogRef = useRef<HTMLDialogElement>(null)
     const isClosingRef = useRef(false)
@@ -56,12 +56,16 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
         // Move dialog to the top of the DOM
         dialogRef.current?.showModal()
       }
-    }, 10)
+    }, 20)
 
     useTimeoutEffect(() => {
       setOpened(true)
     }, 120)
 
+    const styles = overlayCVA({
+      level: overlayLevel as 0 | 1 | 2 | 3,
+    })
+
     return (
       <m.dialog
         ref={useMergedRef(dialogRef, ref)}
@@ -70,16 +74,17 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
         {...motionNotReduced
           ? ({
             initial: {
-              [styles.backdropBlur]: '0px',
-              [styles.backdropOpacity]: '0%',
-              scale: 1.075,
+              [backdropBlur]: '0px',
+              [backdropOpacity]: '0%',
+              scale: overlayLevel > 0 ? 0.9 : 1.075,
               opacity: 0,
             },
             animate: {
-              [styles.backdropBlur]: '8px',
-              [styles.backdropOpacity]: '60%',
+              [backdropBlur]: overlayLevel > 0 ? '4px' : '8px',
+              [backdropOpacity]: overlayLevel > 0 ? '50%' : '60%',
               scale: 1,
               opacity: 1,
+              translateY: 0,
               transition: {
                 delay: 0.075,
               },
@@ -88,14 +93,14 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
               scale: 1.3,
               opacity: 0,
               translateY: -10,
-              [styles.backdropBlur]: '0px',
-              [styles.backdropOpacity]: '0%',
+              [backdropBlur]: '0px',
+              [backdropOpacity]: '0%',
             },
           })
           : {
             initial: {
-              [styles.backdropBlur]: '8px',
-              [styles.backdropOpacity]: '60%',
+              [backdropBlur]: '8px',
+              [backdropOpacity]: '60%',
             },
           }}
         onClick={e => {

package/src/overlays/overlaysActor.ts

@@ -133,8 +133,8 @@ export const overlaysActorLogic = setup({
       const currentOverlay = last(context.overlays)
       if (currentOverlay?.type === 'relationshipDetails') {
         enqueue.sendTo(currentOverlay.id, {
+          ...event,
           type: 'navigate.to',
-          edgeId: event.edgeId,
         })
         return
       }