@likec4/diagram 1.27.1 → 1.27.3

package/dist/utils/index.d.ts

@@ -1,4 +1,3 @@
-export type { AddEdgeData, AddNodeData } from './types';
 export { vector, VectorImpl } from './vector';
 export type { Vector } from './vector';
 export { bezierControlPoints, bezierPath, centerXYInternalNode, distance, distanceBetweenPoints, isInside, isSamePoint, nodeToRect, stopPropagation, toDomPrecision, } from './xyflow';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.27.1",
+  "version": "1.27.3",
   "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.3",
+    "@likec4/styles": "1.27.3"
   },
   "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.3"
   },
   "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/edge/EdgeLabelContainer.tsx

@@ -101,14 +101,16 @@ export function EdgeLabelContainer({
         }}
         {...rest}
       >
-        {/* Work around to keep same global selector data-likec4-dimmed */}
         <div
-          className={css({
+          style={{
             display: 'contents',
-          })}
-          {...isDimmed !== false && {
-            'data-likec4-dimmed': isDimmed,
           }}
+          {
+            // Work around to keep same global selector data-likec4-dimmed
+            ...isDimmed !== false && {
+              'data-likec4-dimmed': isDimmed,
+            }
+          }
         >
           {children}
         </div>

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

@@ -63,23 +63,22 @@ export function ElementActionButtons({
         className={cx('nodrag nopan', actionButtons)}
       >
         {buttons.map((button, index) => (
-          <m.div
+          <ActionIcon
+            component={m.button}
+            layout
+            className={actionBtn({})}
             key={`action-button-${id}-${button.key ?? index}`}
             initial={false}
             whileTap={{ scale: 1 }}
             whileHover={{
-              scale: 1.35,
+              scale: 1.3,
             }}
+            // Otherwise node receives click event and is selected
+            onClick={button.onClick}
+            onDoubleClick={stopPropagation}
           >
-            <ActionIcon
-              className={actionBtn({})}
-              onClick={button.onClick}
-              // Otherwise node receives click event and is selected
-              onDoubleClick={stopPropagation}
-            >
-              {button.icon}
-            </ActionIcon>
-          </m.div>
+            {button.icon}
+          </ActionIcon>
         ))}
       </Box>
     </Box>

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'
@@ -16,46 +16,37 @@ export { useDiagramActorRef }
 
 export function useDiagram() {
   const actor = useDiagramActorRef()
-  const [, startTransition] = useTransition()
   return useMemo(() => ({
     actor,
     send: actor.send,
     navigateTo: (viewId: ViewId, fromNode?: NodeId) => {
-      startTransition(() => {
-        actor.send({
-          type: 'navigate.to',
-          viewId,
-          ...(fromNode && { fromNode }),
-        })
+      actor.send({
+        type: 'navigate.to',
+        viewId,
+        ...(fromNode && { fromNode }),
       })
     },
     navigate: (direction: 'back' | 'forward') => {
-      startTransition(() => {
-        actor.send({ type: `navigate.${direction}` })
-      })
+      actor.send({ type: `navigate.${direction}` })
     },
     fitDiagram: (duration = 350) => {
-      startTransition(() => {
-        actor.send({ type: 'fitDiagram', duration })
-      })
+      actor.send({ type: 'fitDiagram', duration })
     },
     openRelationshipsBrowser: (fqn: Fqn) => {
-      startTransition(() => {
-        actor.send({ type: 'open.relationshipsBrowser', fqn })
-      })
+      actor.send({ type: 'open.relationshipsBrowser', fqn })
     },
     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.elementDetails', fqn, fromNode })
     },
-    openRelationshipDetails: (edgeId: EdgeId) => {
-      startTransition(() => {
-        actor.send({ type: 'open.relationshipDetails', edgeId })
-      })
+    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 +126,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/DiagramXYFlow.tsx

@@ -91,16 +91,14 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
     layoutConstraints = useLayoutConstraints(),
     $isPanning = usePanningAtom(),
     isPanning = useTimeout(() => {
-      if (!$isPanning.get()) {
-        $isPanning.set(true)
-      }
-    }, isReducedGraphics ? 150 : 350),
+      $isPanning.set(true)
+    }, isReducedGraphics ? 100 : 200),
     notPanning = useDebouncedCallback(() => {
       isPanning.clear()
       if ($isPanning.get()) {
         $isPanning.set(false)
       }
-    }, 120),
+    }, 200),
     onMove: OnMove = useCallbackRef((event) => {
       if (!event) {
         return
@@ -111,7 +109,9 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
       notPanning()
     }),
     onMoveEnd: OnMoveEnd = useCallbackRef((event, viewport) => {
-      notPanning.flush()
+      if (!!event) {
+        notPanning.flush()
+      }
       diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })
     }),
     onViewportResize = useCallbackRef(() => {

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

@@ -2,7 +2,7 @@ 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 { AnimatePresence, LayoutGroup, useReducedMotion, useReducedMotionConfig } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from 'framer-motion'
 import { animate } from 'framer-motion/dom'
 import { memo, useEffect, useMemo } from 'react'
 import { type FallbackProps, ErrorBoundary } from 'react-error-boundary'
@@ -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} />