@likec4/diagram 1.28.0 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -42,29 +42,31 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@mantine/core": "7.17.3",
-    "@mantine/hooks": "7.17.3",
-    "@nanostores/react": "0.8.4",
-    "@react-hookz/web": "^25.1.0",
+    "@mantine/core": "7.17.4",
+    "@mantine/hooks": "7.17.4",
+    "@nanostores/react": "1.0.0",
+    "@react-hookz/web": "^25.1.1",
     "@tabler/icons-react": "3.31.0",
     "@xstate/react": "^5.0.3",
-    "@xyflow/react": "^12.5.3",
-    "@xyflow/system": "^0.0.53",
+    "@xyflow/react": "^12.5.5",
+    "@xyflow/system": "^0.0.55",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "fast-equals": "^5.2.2",
-    "framer-motion": "^12.6.3",
-    "nanostores": "0.11.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "motion": "^12.7.3",
+    "nanostores": "1.0.1",
     "react-error-boundary": "^5.0.0",
     "react-shadow": "^20.6.0",
     "remeda": "^2.21.2",
     "type-fest": "^4.39.1",
     "xstate": "^5.19.2",
-    "@likec4/core": "1.28.0",
-    "@likec4/styles": "1.28.0"
+    "@likec4/core": "1.29.0",
+    "@likec4/styles": "1.29.0"
+  },
+  "peerDependencies": {
+    "react": "^18.x || ^19.x",
+    "react-dom": "^18.x || ^19.x"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.53.3",
@@ -73,15 +75,17 @@
     "@types/d3-shape": "^3.1.7",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "@types/node": "^20.17.28",
+    "@types/node": "^20.17.30",
     "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.5.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "typescript": "^5.8.3",
     "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.1.1",
-    "wireit": "^0.14.11",
-    "@likec4/tsconfig": "1.28.0"
+    "wireit": "^0.14.12",
+    "@likec4/tsconfig": "1.29.0"
   },
   "scripts": {
     "generate": "panda codegen",

package/src/LikeC4Diagram.tsx

@@ -15,7 +15,6 @@ import { LikeC4CustomColors } from './LikeC4CustomColors'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow'
 import type { Types } from './likec4diagram/types'
-import { useViewToNodesEdges } from './likec4diagram/useViewToNodesEdges'
 import { useLikeC4Model } from './likec4model'
 import { DiagramActorProvider } from './state/DiagramActorProvider'
 

package/src/base/BaseXYFlow.tsx

@@ -143,8 +143,8 @@ export const BaseXYFlow = <
       edgesFocusable={false}
       nodesDraggable={nodesDraggable}
       nodeDragThreshold={4}
-      nodeClickDistance={1.9}
-      paneClickDistance={1.9}
+      nodeClickDistance={3}
+      paneClickDistance={3}
       elevateNodesOnSelect={false} // or edges are not visible after select\
       selectNodesOnDrag={false}
       onNodesChange={onNodesChange}

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

@@ -3,7 +3,7 @@ import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconZoomScan } from '@tabler/icons-react'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import { compoundActionBtn } from './actionbtns.css'

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

@@ -3,7 +3,7 @@ import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import { compoundActionBtn } from './actionbtns.css'

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

@@ -1,6 +1,6 @@
 import type { DiagramNode } from '@likec4/core'
 import { css, cx } from '@likec4/styles/css'
-import { type HTMLMotionProps, m } from 'framer-motion'
+import { type HTMLMotionProps, m } from 'motion/react'
 import { type PropsWithChildren } from 'react'
 import { clamp, isNumber } from 'remeda'
 import { useIsReducedGraphics } from '../../../hooks/useReducedGraphics'

package/src/base/primitives/customEdge.ts

@@ -13,6 +13,7 @@ export const edgePropsEqual = <P extends Record<string, unknown> = Base.EdgeData
 ) => (
   prev.id === next.id
   && eq(prev.selected ?? false, next.selected ?? false)
+  && eq(prev.animated ?? false, next.animated ?? false)
   && eq(prev.source, next.source)
   && eq(prev.sourceHandleId ?? null, next.sourceHandleId ?? null)
   && eq(prev.sourcePosition, next.sourcePosition)

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

@@ -125,6 +125,9 @@ export const labelsva = sva({
           padding: '0px',
         },
         labelContents: {
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
           padding: '2px 5px 4px 0px',
         },
         labelText: {

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

@@ -1,6 +1,7 @@
 import { type DiagramEdge, extractStep, isStepEdgeId } from '@likec4/core'
 import { cx } from '@likec4/styles/css'
-import { type BoxProps, Box, Text } from '@mantine/core'
+import { type BoxProps, Box } from '@likec4/styles/jsx'
+import { Text } from '@mantine/core'
 import { type PropsWithChildren } from 'react'
 import { isTruthy } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'

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

@@ -1,5 +1,5 @@
 import type { DiagramEdge } from '@likec4/core'
-import { cx } from '@likec4/styles/css'
+import { css, cx } from '@likec4/styles/css'
 import { type PointerEventHandler, forwardRef } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import type { EdgeProps } from '../../types'
@@ -16,25 +16,28 @@ type Data = UndefinedOnPartialDeep<
   >
 >
 
-type EdgePathProps = EdgeProps<Data> & {
+type EdgePathProps = {
+  edgeProps: EdgeProps<Data>
   svgPath: string
   strokeWidth?: number
   onEdgePointerDown?: PointerEventHandler<SVGGElement> | undefined
 }
 
 export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
-  id,
-  data: {
-    line,
-    dir,
-    tail,
-    head,
+  edgeProps: {
+    id,
+    data: {
+      line,
+      dir,
+      tail,
+      head,
+    },
+    style,
+    interactionWidth,
   },
+  onEdgePointerDown,
   strokeWidth,
   svgPath,
-  style,
-  interactionWidth,
-  onEdgePointerDown,
 }, svgPathRef) => {
   let markerStartName = arrowTypeToMarker(tail)
   let markerEndName = arrowTypeToMarker(head ?? 'normal')
@@ -69,10 +72,15 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
   return (
     <>
       <path
-        className={cx('react-flow__edge-interaction', hideOnReducedGraphics)}
+        className={cx(
+          'react-flow__edge-interaction',
+          hideOnReducedGraphics,
+          css({
+            fill: '[none]',
+            strokeOpacity: 0,
+          }),
+        )}
         d={svgPath}
-        fill="none"
-        stroke={'transparent'}
         strokeWidth={interactionWidth ?? 10}
       />
       <g className={markerContext} onPointerDown={onEdgePointerDown}>

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

@@ -71,7 +71,7 @@ export const markerContext = css({
 })
 
 export const cssEdgePath = css({
-  fill: '[none]',
+  fill: '[none!]',
   strokeDashoffset: 10,
   _noReduceGraphics: {
     transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',

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

@@ -2,7 +2,7 @@ import { css, cx } from '@likec4/styles/css'
 import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
 import { useId } from '@mantine/hooks'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
@@ -67,7 +67,7 @@ export function ElementActionButtons({
         {buttons.map((button, index) => (
           <ActionIcon
             component={m.button}
-            layout
+            // layout
             className={actionBtn({})}
             key={`${id}-${button.key ?? index}`}
             initial={false}

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

@@ -3,7 +3,7 @@ import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
 import { useId } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 
@@ -49,7 +49,7 @@ export function ElementDetailsButton({
         key={id}
         className={cx('nodrag nopan', actionBtn({ variant: 'transparent' }))}
         component={m.button}
-        layout
+        // layout
         initial={false}
         style={{
           originX: 0.45,

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

@@ -7,7 +7,7 @@ import {
 } from '@likec4/core'
 import { css, cx } from '@likec4/styles/css'
 import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { type PropsWithChildren, forwardRef } from 'react'
 import type { NodeProps } from '../../types'
 import * as styles from './ElementNodeContainer.css'

package/src/base/updateEdges.ts

@@ -5,7 +5,7 @@ import type { Base } from './types'
 function _update<E extends Base.Edge>(current: E[], update: E[]): E[] {
   return update.map((next) => {
     const existing = current.find(n => n.id === next.id)
-    if (existing && existing.type === next.type) {
+    if (existing && eq(existing.type, next.type)) {
       if (
         eq(existing.hidden ?? false, next.hidden ?? false)
         && eq(existing.source, next.source)
@@ -17,14 +17,11 @@ 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: next.data,
+      }
     }
     return next
   })

package/src/base/updateNodes.ts

@@ -6,11 +6,10 @@ import type { Base } from './types'
 function _update<N extends Base.Node>(current: N[], updated: N[]): N[] {
   return updated.map((update) => {
     const existing = current.find(n => n.id === update.id)
-    if (existing) {
+    if (existing && eq(existing.type, update.type)) {
       const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing)
       if (
-        eq(existing.type, update.type)
-        && eq(existingWidth, update.initialWidth)
+        eq(existingWidth, update.initialWidth)
         && eq(existingHeight, update.initialHeight)
         && eq(existing.parentId ?? null, update.parentId ?? null)
         && eq(existing.hidden ?? false, update.hidden ?? false)
@@ -20,17 +19,14 @@ 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: update.data,
+      } as N
     }
     return update
   })

package/src/context/FramerMotionConfig.tsx

@@ -1,5 +1,5 @@
 import { useMantineStyleNonce } from '@mantine/core'
-import { domMax, LazyMotion, MotionConfig } from 'framer-motion'
+import { domMax, LazyMotion, MotionConfig } from 'motion/react'
 import { type PropsWithChildren } from 'react'
 
 export const FramerMotionConfig = ({

package/src/context/RootContainer.tsx

@@ -29,10 +29,6 @@ export function RootContainer({
   return (
     <Box
       className={cx('likec4-root', className)}
-      css={{
-        // '--likec4-background-color': 'mantine.colors.body',
-        // '--colors-likec4-background': 'var(--mantine-color-body)',
-      }}
       ref={ref}
       {...reduceGraphics && {
         ['data-likec4-reduced-graphics']: true,

package/src/hooks/safeContext.tsx

@@ -4,9 +4,11 @@ import type { DiagramActorRef } from '../state/types'
 /**
  * To improve experience with HMR, we use `createSafeContext` as a boundary for hoooks
  */
-export const DiagramActorSafeContext = createContext<DiagramActorRef>(null as any)
+const DiagramActorSafeContext = createContext<DiagramActorRef>(null as any)
 DiagramActorSafeContext.displayName = 'DiagramActorSafeContext'
 
+export const DiagramActorContextProvider = DiagramActorSafeContext.Provider
+
 export const useDiagramActorRef = () => {
   const ctx = useContext(DiagramActorSafeContext)
   if (ctx === null) {

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -336,7 +336,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     <>
       <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
         <EdgePath
-          {...props}
+          edgeProps={props}
           svgPath={edgePath}
           ref={svgPathRef}
           {...enableEdgeEditing && {
@@ -374,7 +374,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
                 <circle
                   onPointerDown={e => onControlPointerDown(i, e)}
                   className={clsx('nodrag nopan', edgesCss.controlPoint)}
-                  key={i}
+                  key={'controlPoints' + edgeId + '#' + i}
                   cx={Math.round(p.x)}
                   cy={Math.round(p.y)}
                   r={3}

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -89,7 +89,7 @@ export const RelationshipsDropdownMenu = memo((
     diagramEdge.relations,
     map(id => {
       try {
-        return likec4model.relationship(id)
+        return likec4model.findRelationship(id)
       } catch (e) {
         // View was cached, but likec4model based on new data
         console.error(

package/src/likec4diagram/ui/controls/Controls.tsx

@@ -1,7 +1,7 @@
+import { cx } from '@likec4/styles/css'
 import { ActionIconGroup, Badge, Box, Group, Loader, Stack } from '@mantine/core'
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
-import { clsx } from 'clsx'
-import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { LayoutGroup, m } from 'motion/react'
 import { memo } from 'react'
 import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
 import { type ControlsCustomLayout, useControlsCustomLayout } from '../../../context/ControlsCustomLayout'
@@ -42,7 +42,7 @@ const ControlsDefaultLayout: ControlsCustomLayout = ({
       translateY: -10,
     }}
     align="flex-start"
-    className={clsx(
+    className={cx(
       'react-flow__panel',
       css.panel,
       'likec4-top-left-panel',
@@ -53,7 +53,7 @@ const ControlsDefaultLayout: ControlsCustomLayout = ({
     <Stack align="flex-start" gap="xs">
       <LayoutGroup>
         <Group
-          className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
+          className={cx(css.navigationButtons, 'likec4-navigation-webview')}
           gap={'xs'}>
           {burgerMenu}
           {navigationButtons}
@@ -90,60 +90,58 @@ export const Controls = memo(() => {
   const portalProps = useMantinePortalProps()
   const ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout
   return (
-    <LayoutGroup inherit={false}>
-      <AnimatePresence initial={false} mode="wait">
-        {isNotActiveWalkthrough && (
-          <ControlsLayout
-            burgerMenu={onBurgerMenuClick && (
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  onBurgerMenuClick()
-                }}>
-                <IconMenu2 />
-              </ActionIcon>
-            )}
-            navigationButtons={enableNavigationButtons && <NavigationButtons />}
-            search={enableSearch && <LikeC4Search />}
-            syncInProgressBadge={<SyncLayoutBadge />}
-            actionsGroup={
-              <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
-                {enableVscode && (
-                  <Tooltip label="Open source" {...portalProps}>
-                    <ActionIcon
-                      onClick={e => {
-                        e.stopPropagation()
-                        onOpenSource?.({ view: viewId })
-                      }}>
-                      <IconFileSymlink stroke={1.5} />
-                    </ActionIcon>
-                  </Tooltip>
-                )}
-                {enableControls && <ToggleReadonly />}
-                {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
-                {enableControls && notReadOnly && (
-                  <>
-                    <ChangeAutoLayoutButton {...portalProps} />
-                    <ManualLayoutToolsButton {...portalProps} />
-                  </>
-                )}
-                {enableControls && (
-                  <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
-                    <ActionIcon
-                      onClick={e => {
-                        e.stopPropagation()
-                        diagram.fitDiagram()
-                      }}>
-                      <IconFocusCentered />
-                    </ActionIcon>
-                  </Tooltip>
-                )}
-              </ActionIconGroup>
-            }
-          />
-        )}
-      </AnimatePresence>
-    </LayoutGroup>
+    <>
+      {isNotActiveWalkthrough && (
+        <ControlsLayout
+          burgerMenu={onBurgerMenuClick && (
+            <ActionIcon
+              onClick={e => {
+                e.stopPropagation()
+                onBurgerMenuClick()
+              }}>
+              <IconMenu2 />
+            </ActionIcon>
+          )}
+          navigationButtons={enableNavigationButtons && <NavigationButtons />}
+          search={enableSearch && <LikeC4Search />}
+          syncInProgressBadge={<SyncLayoutBadge />}
+          actionsGroup={
+            <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
+              {enableVscode && (
+                <Tooltip label="Open source" {...portalProps}>
+                  <ActionIcon
+                    onClick={e => {
+                      e.stopPropagation()
+                      onOpenSource?.({ view: viewId })
+                    }}>
+                    <IconFileSymlink stroke={1.5} />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+              {enableControls && <ToggleReadonly />}
+              {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
+              {enableControls && notReadOnly && (
+                <>
+                  <ChangeAutoLayoutButton {...portalProps} />
+                  <ManualLayoutToolsButton {...portalProps} />
+                </>
+              )}
+              {enableControls && (
+                <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
+                  <ActionIcon
+                    onClick={e => {
+                      e.stopPropagation()
+                      diagram.fitDiagram()
+                    }}>
+                    <IconFocusCentered />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+            </ActionIconGroup>
+          }
+        />
+      )}
+    </>
   )
 })
 

package/src/likec4diagram/ui/controls/NavigationButtons.tsx

@@ -1,6 +1,6 @@
 import { IconChevronRight } from '@tabler/icons-react'
 
-import { AnimatePresence, m } from 'framer-motion'
+import { AnimatePresence, m } from 'motion/react'
 
 import { IconChevronLeft } from '@tabler/icons-react'
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -2,7 +2,7 @@ import { Button, Card, CardSection, Group, Spoiler, Stack, Text } from '@mantine
 import { useLocalStorage } from '@mantine/hooks'
 import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { AnimatePresence, m } from 'framer-motion'
+import { AnimatePresence, m } from 'motion/react'
 import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagram'
 import * as styles from './DiagramTitlePanel.css'

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

@@ -20,7 +20,7 @@ import {
 import { useLocalStorage } from '@mantine/hooks'
 import { IconAlertTriangle, IconArrowDownRight, IconHelpCircle } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { AnimatePresence, m } from 'framer-motion'
+import { AnimatePresence, m } from 'motion/react'
 import { memo, useState } from 'react'
 import { ceil, isNonNullish } from 'remeda'
 import { ElementShape } from '../../../base/primitives'