@likec4/diagram 1.26.1 → 1.27.0

package/dist/utils/vector.js

@@ -49,7 +49,5 @@ class VectorImpl {
 function vector(source) {
   return VectorImpl.create(source);
 }
-export {
-  VectorImpl,
-  vector
-};
+
+export { VectorImpl, vector };

package/dist/utils/xyflow.js

@@ -1,7 +1,8 @@
-import { invariant, hasAtLeast } from "@likec4/core";
-import { getNodeDimensions } from "@xyflow/system";
-import { Bezier } from "bezier-js";
-import { isArray } from "remeda";
+import { invariant, hasAtLeast } from '@likec4/core';
+import { getNodeDimensions } from '@xyflow/system';
+import { Bezier } from 'bezier-js';
+import { isArray } from 'remeda';
+
 function toDomPrecision(v) {
   if (v === null) {
     return 0.01;
@@ -64,11 +65,5 @@ function bezierPath(bezierSpline) {
   invariant(points.length === 0, "all points should be consumed");
   return path;
 }
-export {
-  bezierControlPoints,
-  bezierPath,
-  centerXYInternalNode,
-  isSamePoint,
-  stopPropagation,
-  toDomPrecision
-};
+
+export { bezierControlPoints, bezierPath, centerXYInternalNode, isSamePoint, stopPropagation, toDomPrecision };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -12,6 +12,7 @@
   },
   "files": [
     "dist",
+    "bundle",
     "src",
     "!**/*.spec.*",
     "!**/*.d.ts.map"
@@ -27,67 +28,67 @@
         "default": "./dist/index.js"
       }
     },
+    "./bundle": {
+      "sources": "./src/bundle/index.ts",
+      "default": {
+        "types": "./dist/bundle/index.d.ts",
+        "import": "./bundle/index.js",
+        "default": "./bundle/index.js"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json",
-    "./diagram.css": "./dist/diagram.css"
-  },
-  "wireit": {
-    "build:watch": {
-      "command": "vite build --watch --mode development --clearScreen=false -l warn",
-      "service": true
-    }
+    "./src/*": "./src/*"
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@mantine/vanilla-extract": "7.17.1",
+    "@mantine/core": "7.17.2",
+    "@mantine/hooks": "7.17.2",
     "@nanostores/react": "0.8.4",
-    "@react-hookz/web": "^25.0.1",
-    "@tabler/icons-react": "3.29.0",
-    "@xstate/react": "^5.0.2",
-    "@xyflow/react": "12.4.4",
-    "@xyflow/system": "0.0.52",
+    "@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",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
-    "esm-env": "^1.2.2",
     "fast-equals": "^5.2.2",
-    "framer-motion": "^12.4.10",
-    "khroma": "^2.1.0",
+    "framer-motion": "^12.5.0",
     "nanostores": "0.11.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-error-boundary": "^5.0.0",
-    "remeda": "^2.21.0",
-    "type-fest": "4.34.1",
+    "react-shadow": "^20.6.0",
+    "remeda": "^2.21.2",
+    "type-fest": "^4.38.0",
     "xstate": "^5.19.2",
-    "@likec4/core": "1.26.1"
-  },
-  "peerDependencies": {
-    "@mantine/core": "7.17.1",
-    "@mantine/hooks": "7.17.1",
-    "react": "~19.0.0",
-    "react-dom": "~19.0.0"
+    "@likec4/styles": "1.27.0",
+    "@likec4/core": "1.27.0"
   },
   "devDependencies": {
+    "@pandacss/dev": "^0.53.3",
     "@statelyai/inspect": "^0.4.0",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.7",
-    "@types/react": "~19.0.10",
-    "@types/react-dom": "~19.0.4",
-    "@vanilla-extract/css": "^1.17.1",
-    "@vanilla-extract/css-utils": "^0.1.4",
-    "@vanilla-extract/vite-plugin": "^5.0.1",
-    "@vitejs/plugin-react": "4.3.4",
-    "typescript": "5.8.2",
-    "vite": "6.1.0",
-    "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.0.8",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "@types/node": "^20.17.25",
+    "@vitejs/plugin-react": "^4.3.4",
+    "postcss": "^8.5.3",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.3",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.0.9",
     "wireit": "^0.14.11",
-    "@likec4/tsconfig": "1.26.1"
+    "@likec4/tsconfig": "1.27.0"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit",
-    "build": "vite build",
-    "build:watch": "wireit",
-    "lint": "run -T eslint src/ --fix",
-    "clean": "rm -r -f -g \"dist/*\" .tsbuildinfo",
+    "generate": "panda codegen",
+    "typecheck": "tsc --build --verbose",
+    "build:dist": "vite build -m production",
+    "build:bundle": "vite build -c vite-bundle.config.ts",
+    "pack": "pnpm pack",
     "test": "vitest run --no-isolate"
   }
 }

package/src/LikeC4CustomColors.tsx

@@ -1,33 +1,57 @@
-import { type CustomColorDefinitions, type ThemeColorValues } from '@likec4/core'
+import {
+  type CustomColorDefinitions,
+  type ElementThemeColorValues,
+  type RelationshipThemeColorValues,
+  type ThemeColorValues,
+  nonexhaustive,
+} from '@likec4/core'
 import { useMantineStyleNonce } from '@mantine/core'
 import { deepEqual } from 'fast-equals'
 import { memo } from 'react'
 import { entries } from 'remeda'
-import { vars } from './theme-vars'
-
-type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number} )`
 
 interface LikeC4CustomColorsProperties {
   customColors: CustomColorDefinitions
 }
-
-function toStyle(name: String, colorValues: ThemeColorValues): String {
-  const rules = [
-    ...entries(colorValues.elements)
-      .map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
-    ...entries(colorValues.relationships)
-      .map(([key, value]) => `${stripCssVarReference(vars.relation[key])}: ${value};`)
-  ]
-    .join('\n')
-
-  return `:where([data-likec4-color=${name}]) {
-  ${rules}
-}`
+function keyToCssVar(key: keyof RelationshipThemeColorValues | keyof ElementThemeColorValues): string {
+  switch (key) {
+    case 'lineColor':
+      return 'line'
+    case 'labelBgColor':
+      return 'label-bg'
+    case 'labelColor':
+      return 'label'
+    case 'fill':
+      return 'fill'
+    case 'stroke':
+      return 'stroke'
+    case 'hiContrast':
+      return 'hi-contrast'
+    case 'loContrast':
+      return 'lo-contrast'
+    default:
+      nonexhaustive(key)
+  }
 }
 
-function stripCssVarReference(ref: CSSVarFunction): String {
-  const end = ref.indexOf(',')
-  return ref.substring(4, end == -1 ? ref.length - 1 : end)
+function toStyle(name: String, colors: ThemeColorValues): String {
+  const darken = (color: string) => `color-mix(in srgb, ${color} 80%, black)`
+  return `
+:where([data-likec4-color=${name}]) {
+  --colors-likec4-palette-hi-contrast: ${colors.elements.hiContrast};
+  --colors-likec4-palette-lo-contrast: ${colors.elements.loContrast};
+  --colors-likec4-palette-fill: ${colors.elements.fill};
+  --colors-likec4-palette-stroke: ${colors.elements.stroke};
+  --colors-likec4-relation-stroke: ${colors.relationships.lineColor};
+  --colors-likec4-relation-stroke-selected: color-mix(in srgb, ${colors.relationships.lineColor}, var(--colors-likec4-mix-color) 20%);
+  --colors-likec4-relation-label: ${colors.relationships.labelColor};
+  --colors-likec4-relation-label-bg: ${colors.relationships.labelBgColor};
+}
+:where(.likec4-compound-node[data-likec4-color=${name}]) {
+  --colors-likec4-palette-fill: ${darken(colors.elements.fill)};
+  --colors-likec4-palette-stroke: ${darken(colors.elements.stroke)};
+}
+  `
 }
 
 export const LikeC4CustomColors = memo<LikeC4CustomColorsProperties>(({ customColors }) => {

package/src/LikeC4Diagram.props.ts

@@ -8,6 +8,7 @@ import type {
   ViewId,
   WhereOperator,
 } from '@likec4/core'
+import type { ReactFlowProps as XYFlowProps } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
 import type { ControlsCustomLayout } from './context/ControlsCustomLayout'
 
@@ -56,6 +57,32 @@ export type OnChange = (event: ChangeEvent) => void
 
 export type LikeC4ColorScheme = 'light' | 'dark'
 
+export type OverrideReactFlowProps = Pick<
+  XYFlowProps,
+  | 'paneClickDistance'
+  | 'nodeClickDistance'
+  | 'selectionKeyCode'
+  | 'panActivationKeyCode'
+  | 'multiSelectionKeyCode'
+  | 'zoomActivationKeyCode'
+  | 'snapToGrid'
+  | 'snapGrid'
+  | 'onlyRenderVisibleElements'
+  | 'nodesDraggable'
+  | 'nodesFocusable'
+  | 'elementsSelectable'
+  | 'selectNodesOnDrag'
+  | 'panOnDrag'
+  | 'preventScrolling'
+  | 'zoomOnScroll'
+  | 'zoomOnPinch'
+  | 'panOnScroll'
+  | 'panOnScrollSpeed'
+  | 'panOnScrollMode'
+  | 'zoomOnDoubleClick'
+  | 'nodeDragThreshold'
+>
+
 export interface LikeC4DiagramProperties {
   view: DiagramView
 
@@ -195,6 +222,11 @@ export interface LikeC4DiagramProperties {
    * Dynamic filter, applies both to nodes and edges
    */
   where?: WhereOperator<string, string> | undefined
+
+  /**
+   * Override ReactFlow props
+   */
+  reactFlowProps?: OverrideReactFlowProps | undefined
 }
 
 export type OpenSourceParams =

package/src/LikeC4Diagram.tsx

@@ -21,6 +21,17 @@ import { DiagramActorProvider } from './state/DiagramActorProvider'
 
 export type LikeC4DiagramProps = PropsWithChildren<LikeC4DiagramProperties & LikeC4DiagramEventHandlers>
 export function LikeC4Diagram({
+  onCanvasClick,
+  onCanvasContextMenu,
+  onCanvasDblClick,
+  onEdgeClick,
+  onChange,
+  onEdgeContextMenu,
+  onNavigateTo,
+  onNodeClick,
+  onNodeContextMenu,
+  onOpenSource,
+  onBurgerMenuClick,
   view,
   className,
   fitView = true,
@@ -33,32 +44,22 @@ export function LikeC4Diagram({
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,
   enableRelationshipBrowser = enableRelationshipDetails,
-  nodesSelectable = !readonly || enableFocusMode,
   nodesDraggable = !readonly,
+  nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
   controls = !readonly,
   showDiagramTitle = true,
   showNotations = true,
+  showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = false,
   enableSearch = true,
   initialWidth,
   initialHeight,
-  experimentalEdgeEditing = false,
+  experimentalEdgeEditing = !readonly,
   reduceGraphics = 'auto',
-  onCanvasClick,
-  onCanvasContextMenu,
-  onCanvasDblClick,
-  onEdgeClick,
-  onChange,
-  onEdgeContextMenu,
-  onNavigateTo,
-  onNodeClick,
-  onNodeContextMenu,
-  onOpenSource,
-  onBurgerMenuClick,
   renderIcon,
   renderControls,
   where,
-  showNavigationButtons = !!onNavigateTo,
+  reactFlowProps = {},
   children,
 }: LikeC4DiagramProps) {
   const hasLikec4model = !!useLikeC4Model()
@@ -154,6 +155,7 @@ export function LikeC4Diagram({
                           nodesDraggable={nodesDraggable}
                           nodesSelectable={nodesSelectable}
                           background={background}
+                          reactFlowProps={reactFlowProps}
                         >
                           {children}
                         </LikeC4DiagramXYFlow>

package/src/base/BaseXYFlow.tsx

@@ -1,3 +1,4 @@
+import { css, cx } from '@likec4/styles/css'
 import { useCallbackRef } from '@mantine/hooks'
 import {
   type ReactFlowProps,
@@ -5,13 +6,10 @@ import {
   ReactFlow,
   useStore,
 } from '@xyflow/react'
-import clsx from 'clsx'
-import { useMemo } from 'react'
+import { Fragment, useMemo } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
-import { useIsReducedGraphics } from '../hooks/useReducedGraphics'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow'
-import * as css from '../LikeC4Diagram.css'
 import { stopPropagation } from '../utils/xyflow'
 import { type XYBackground, Background } from './Background'
 import { MaxZoom, MinZoom } from './const'
@@ -33,13 +31,6 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
       // Omited props
       | 'defaultNodes'
       | 'defaultEdges'
-      | 'panOnScroll'
-      | 'panOnDrag'
-      | 'preventScrolling'
-      | 'zoomOnPinch'
-      | 'zoomActivationKeyCode'
-      | 'zoomOnScroll'
-      | 'elementsSelectable'
       | 'onNodeDoubleClick'
       | 'onEdgeDoubleClick'
       | 'fitViewOptions'
@@ -52,6 +43,35 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
   >
 >
 
+const cssTransparentBg = css({
+  background: 'transparent !important',
+  ['--xy-background-color']: 'transparent !important',
+})
+
+const cssReactFlow = css({
+  // '@supports': {
+  //   // https://wojtek.im/journal/targeting-safari-with-css-media-query
+  //   '(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
+  //     // TODO: this workaround disables animations in Safari (to improve performance)
+  //     vars: {
+  //       [vars.safariAnimationHook]: '',
+  //     },
+  //   },
+  // },
+
+  ['--xy-background-color']: '{colors.mantine.colors.body}',
+  ['--xy-background-pattern-color']: {
+    _dark: '{colors.mantine.colors.dark[5]}',
+    _light: '{colors.mantine.colors.gray[4]}',
+  },
+  '& .react-flow__pane': {
+    WebkitUserSelect: 'none',
+  },
+  '& .react-flow__attribution': {
+    display: 'none',
+  },
+})
+
 export const BaseXYFlow = <
   NodeType extends Base.Node,
   EdgeType extends Base.Edge,
@@ -77,8 +97,6 @@ export const BaseXYFlow = <
 }: BaseXYFlowProps<NodeType, EdgeType>) => {
   const isBgWithPattern = background !== 'transparent' && background !== 'solid'
   const isZoomTooSmall = useIsZoomTooSmall()
-  const reduceGraphics = useIsReducedGraphics()
-
   const xystore = useXYStoreApi()
 
   return (
@@ -86,18 +104,14 @@ export const BaseXYFlow = <
       colorMode={colorMode}
       nodes={nodes}
       edges={edges}
-      className={clsx(
-        css.cssReactFlow,
-        pannable !== true && css.cssDisablePan,
-        background === 'transparent' && css.cssTransparentBg,
+      className={cx(
+        cssReactFlow,
+        background === 'transparent' && cssTransparentBg,
         className,
       )}
       {...isZoomTooSmall && {
         ['data-likec4-zoom-small']: true,
       }}
-      {...reduceGraphics && {
-        ['data-likec4-reduced-graphics']: true,
-      }}
       zoomOnPinch={zoomable}
       zoomOnScroll={!pannable && zoomable}
       {...(!zoomable && {
@@ -119,8 +133,8 @@ export const BaseXYFlow = <
       noPanClassName="nopan"
       panOnScroll={pannable}
       panOnDrag={pannable}
-      panActivationKeyCode={null}
       {...(!pannable && {
+        panActivationKeyCode: null,
         selectionKeyCode: null,
       })}
       elementsSelectable={nodesSelectable}
@@ -149,39 +163,49 @@ export const BaseXYFlow = <
         onMoveEnd?.(event, { x: roundedX, y: roundedY, zoom })
       })}
       onNodeMouseEnter={useCallbackRef((_event, node) => {
-        onNodesChange([{
-          id: node.id,
-          type: 'replace',
-          item: Base.setHovered(node, true),
-        }])
+        if (!node.data.hovered) {
+          onNodesChange([{
+            id: node.id,
+            type: 'replace',
+            item: Base.setHovered(node, true),
+          }])
+        }
       })}
       onNodeMouseLeave={useCallbackRef((_event, node) => {
-        onNodesChange([{
-          id: node.id,
-          type: 'replace',
-          item: Base.setHovered(node, false),
-        }])
+        if (node.data.hovered) {
+          onNodesChange([{
+            id: node.id,
+            type: 'replace',
+            item: Base.setHovered(node, false),
+          }])
+        }
       })}
       onEdgeMouseEnter={useCallbackRef((_event, edge) => {
-        onEdgesChange([{
-          id: edge.id,
-          type: 'replace',
-          item: Base.setHovered(edge, true),
-        }])
+        if (!edge.data.hovered) {
+          onEdgesChange([{
+            id: edge.id,
+            type: 'replace',
+            item: Base.setHovered(edge, true),
+          }])
+        }
       })}
       onEdgeMouseLeave={useCallbackRef((_event, edge) => {
-        onEdgesChange([{
-          id: edge.id,
-          type: 'replace',
-          item: Base.setHovered(edge, false),
-        }])
+        if (edge.data.hovered) {
+          onEdgesChange([{
+            id: edge.id,
+            type: 'replace',
+            item: Base.setHovered(edge, false),
+          }])
+        }
       })}
       onNodeDoubleClick={stopPropagation}
       onEdgeDoubleClick={stopPropagation}
       {...props}
     >
-      {isBgWithPattern && <Background background={background} />}
-      {onViewportResize && <ViewportResizeHanlder onViewportResize={onViewportResize} />}
+      <Fragment key="_internals">
+        {isBgWithPattern && <Background background={background} />}
+        {onViewportResize && <ViewportResizeHanlder onViewportResize={onViewportResize} />}
+      </Fragment>
       {children}
     </ReactFlow>
   )

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

@@ -1,11 +1,12 @@
+import { css, cx } from '@likec4/styles/css'
+import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
+import { useDebouncedValue } from '@mantine/hooks'
 import { IconZoomScan } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { m } from 'framer-motion'
-import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
-import * as css from './CompoundActionButton.css'
+import { compoundActionBtn } from './actionbtns.css'
 
 type CompoundActionButtonProps = NodeProps & {
   icon?: React.ReactNode
@@ -19,31 +20,51 @@ export function CompoundActionButton({
   icon,
   onClick,
 }: CompoundActionButtonProps) {
+  // Debounce first "isHovered"
+  const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)
+  const isHoverDebounced = debounced[0] && isHovered
   return (
-    <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'compound-action')}>
-      <ActionIcon
-        className={clsx('nodrag nopan', css.actionIcon)}
-        component={m.button}
+    <Box
+      className={cx(
+        css({
+          position: 'absolute',
+          top: '5px',
+          left: '4px',
+          _smallZoom: {
+            display: 'none',
+          },
+        }),
+        'compound-action',
+      )}>
+      <m.div
         initial={false}
         animate={{
-          scale: isHovered ? 1.2 : 1,
-          x: isHovered ? -1 : 0,
-          // y: isHovered ? -1 : 0,
+          scale: isHoverDebounced ? 1.2 : 1,
+          x: isHoverDebounced ? -1 : 0,
+          y: isHoverDebounced ? -1 : 0,
         }}
         whileHover={{
-          scale: 1.35,
-          x: -1,
-          // y: 1,
+          scale: 1.4,
+          x: -2,
+          y: -2,
         }}
         whileTap={{ scale: 1 }}
-        size={'md'}
-        radius="md"
-        // Otherwise node receives click event and is selected
-        onClick={onClick}
-        onDoubleClick={stopPropagation}
       >
-        {icon ?? <IconZoomScan stroke={2} />}
-      </ActionIcon>
+        <ActionIcon
+          className={cx(
+            'nodrag nopan',
+            compoundActionBtn({
+              delay: isHovered && !isHoverDebounced,
+            }),
+            actionBtn(),
+          )}
+          // Otherwise node receives click event and is selected
+          onClick={onClick}
+          onDoubleClick={stopPropagation}
+        >
+          {icon ?? <IconZoomScan stroke={2} />}
+        </ActionIcon>
+      </m.div>
     </Box>
   )
 }