@likec4/diagram 1.27.0 → 1.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.27.0",
+  "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.0",
-    "@likec4/core": "1.27.0"
+    "@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.25",
+    "@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.0"
+    "@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,
@@ -70,12 +70,6 @@ export function LikeC4Diagram({
     initialHeight: number
   }>(null)
 
-  const xyNodesEdges = useViewToNodesEdges({
-    view,
-    where,
-    nodesSelectable,
-  })
-
   const isDynamicView = view.__ === 'dynamic'
 
   if (initialRef.current == null) {
@@ -147,8 +141,8 @@ export function LikeC4Diagram({
                         view,
                         pannable,
                         zoomable,
+                        nodesSelectable,
                         fitViewPadding,
-                        ...xyNodesEdges,
                       }}>
                       <ControlsCustomLayoutProvider value={renderControls ?? null}>
                         <LikeC4DiagramXYFlow

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,13 +72,12 @@ 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,
       }}
       {...isDimmed !== false && {
-        'likec4-dimmed': isDimmed,
+        'data-likec4-dimmed': isDimmed,
       }}
       style={{
         ...style,

package/src/base/primitives/edge/EdgeLabel.css.ts

@@ -50,7 +50,7 @@ export const edgeLabelContainer = css({
 
   _noReduceGraphics: {
     mixBlendMode: {
-      base: 'plus-lighter',
+      _dark: 'plus-lighter',
       _light: 'screen',
     },
   },
@@ -61,9 +61,6 @@ export const edgeLabelContainer = css({
   _reduceGraphicsOnPan: {
     display: 'none',
   },
-  _whenPanning: {
-    mixBlendMode: 'normal',
-  },
 })
 
 export const labelsva = sva({

package/src/base/primitives/edge/EdgeLabelContainer.tsx

@@ -32,7 +32,7 @@ type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
 
 const toCssVarValue = (value: number | string | undefined) => {
   if (value === undefined) return undefined
-  return isNumber(value) ? `${value}px` : value
+  return isNumber(value) ? `${Math.round(value)}px` : value
 }
 
 export function EdgeLabelContainer({

package/src/base/primitives/edge/EdgePath.tsx

@@ -92,9 +92,6 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
             'react-flow__edge-path',
             'react-flow__edge-interaction',
             cssEdgePath,
-            // css({
-            //   strokeDasharray: strokeDasharray,
-            // }),
           )}
           d={svgPath}
           style={style}

package/src/base/primitives/edge/edge.css.ts

@@ -44,6 +44,7 @@ const _hideOnReducedGraphics = css.raw({
 export const hideOnReducedGraphics = css(_hideOnReducedGraphics)
 
 export const edgePathBg = css(_hideOnReducedGraphics, {
+  fill: '[none]',
   strokeWidth: 'calc(var(--xy-edge-stroke-width) + 2)',
   strokeOpacity: 0.08,
   transitionProperty: 'stroke-width, stroke-opacity',
@@ -70,6 +71,7 @@ export const markerContext = css({
 })
 
 export const cssEdgePath = css({
+  fill: '[none]',
   strokeDashoffset: 10,
   _noReduceGraphics: {
     transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',

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

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

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

@@ -7,7 +7,7 @@ export const indicator = css({
   stroke: 'likec4.palette.loContrast',
   fill: '[none]',
 
-  strokeWidth: 6,
+  strokeWidth: 8,
   strokeOpacity: 0.8,
   visibility: 'hidden',
   pointerEvents: 'none',
@@ -15,26 +15,15 @@ export const indicator = css({
     stroke: `[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]`,
   },
   _whenFocused: {
-    strokeWidth: 12,
     visibility: 'visible',
   },
   _groupFocusVisible: {
-    strokeWidth: 12,
     visibility: 'visible',
   },
   _whenSelected: {
     animationStyle: 'indicator',
     visibility: 'visible',
   },
-  _shapeQueue: {
-    strokeWidth: 8,
-  },
-  _shapeCylinder: {
-    strokeWidth: 8,
-  },
-  _shapeStorage: {
-    strokeWidth: 8,
-  },
 })
 
 export const fillElementFill = css({

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

@@ -20,7 +20,7 @@ const description = css.raw({
     display: 'none',
   },
   _smallZoom: {
-    visibility: 'hidden',
+    display: 'none',
   },
 })
 
@@ -43,7 +43,7 @@ const technology = css.raw({
     display: 'none',
   },
   _smallZoom: {
-    visibility: 'hidden',
+    display: 'none',
   },
 })
 
@@ -97,6 +97,7 @@ export const elementTitle = sva({
       paddingLeft: 'calc(var(--likec4-spacing) + 8px)',
       paddingRight: 'calc(var(--likec4-spacing) + 8px)',
       overflow: 'hidden',
+      pointerEvents: 'none',
       gap: '12px',
       _shapeQueue: {
         paddingLeft: '46px',

package/src/base/types.ts

@@ -111,7 +111,7 @@ export namespace Base {
   type WithHovered = { data: { hovered?: boolean } }
 
   const _setDimmed = <T extends WithDimmed>(v: T, dimmed: Dimmed): T =>
-    v.data.dimmed === dimmed ? v : ({
+    (v.data.dimmed ?? false) === dimmed ? v : ({
       ...v,
       data: {
         ...v.data,
@@ -129,7 +129,7 @@ export namespace Base {
   }
 
   const _setHovered = <T extends WithHovered>(v: T, hovered: boolean): T =>
-    v.data.hovered === hovered ? v : ({
+    (v.data.hovered ?? false) === hovered ? v : ({
       ...v,
       data: {
         ...v.data,
@@ -167,8 +167,3 @@ export namespace Base {
     return (edge: E) => _setData(edge, arg1 as Partial<EdgeData>)
   }
 }
-
-// import type { ThemeColor } from '@likec4/core'
-// import type { ColorPalette as AllColorPalette } from '@likec4/styles/tokens'
-
-// export type ColorPalette = Extract<AllColorPalette, `likec4.${ThemeColor}` | `likec4.compound${number}.${ThemeColor}`>

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/components/Link.tsx

@@ -59,7 +59,9 @@ export function Link({
   value: LinkData
 }) {
   const isNormalSize = size === 'md'
-  const url = new URL(value.url, window.location.href).toString()
+  // If the url is already a full url, use it as is.
+  // Otherwise, it's a relative url and we need to make it absolute.
+  const url = value.url.includes('://') ? value.url : new window.URL(value.url, window.location.href).toString()
   return (
     <CopyButton value={url}>
       {({ copied, copy }) => (

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/DiagramXYFlow.tsx

@@ -1,12 +1,12 @@
 import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
 import { cx } from '@likec4/styles/css'
-import { useCallbackRef, useTimeout } from '@mantine/hooks'
+import { useCallbackRef, useDebouncedCallback, useTimeout } from '@mantine/hooks'
 import type { OnMove, OnMoveEnd } from '@xyflow/system'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { type PropsWithChildren, memo } from 'react'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
-import { usePanningAtom } from '../context/ReduceGraphics'
+import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics'
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import type { DiagramContext } from '../state/types'
@@ -16,7 +16,7 @@ import type { Types } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
 
 const selectXYProps = (ctx: DiagramContext) => ({
-  initialized: ctx.initialized,
+  initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
   nodes: ctx.xynodes,
   edges: ctx.xyedges,
   pannable: ctx.pannable,
@@ -87,12 +87,15 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
   } = useDiagramEventHandlers()
 
   const notReadOnly = !enableReadOnly,
+    isReducedGraphics = useIsReducedGraphics(),
     layoutConstraints = useLayoutConstraints(),
     $isPanning = usePanningAtom(),
     isPanning = useTimeout(() => {
-      $isPanning.set(true)
-    }, 160),
-    notPanning = useTimeout(() => {
+      if (!$isPanning.get()) {
+        $isPanning.set(true)
+      }
+    }, isReducedGraphics ? 150 : 350),
+    notPanning = useDebouncedCallback(() => {
       isPanning.clear()
       if ($isPanning.get()) {
         $isPanning.set(false)
@@ -105,11 +108,10 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
       if (!$isPanning.get()) {
         isPanning.start()
       }
-      notPanning.clear()
-      notPanning.start()
+      notPanning()
     }),
     onMoveEnd: OnMoveEnd = useCallbackRef((event, viewport) => {
-      notPanning.start()
+      notPanning.flush()
       diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })
     }),
     onViewportResize = useCallbackRef(() => {