@likec4/diagram 1.27.2 → 1.28.0

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.2",
+  "version": "1.28.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -48,23 +48,23 @@
     "@react-hookz/web": "^25.1.0",
     "@tabler/icons-react": "3.31.0",
     "@xstate/react": "^5.0.3",
-    "@xyflow/react": "^12.5.2",
+    "@xyflow/react": "^12.5.3",
     "@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.6.2",
+    "framer-motion": "^12.6.3",
     "nanostores": "0.11.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^5.0.0",
     "react-shadow": "^20.6.0",
     "remeda": "^2.21.2",
-    "type-fest": "^4.38.0",
+    "type-fest": "^4.39.1",
     "xstate": "^5.19.2",
-    "@likec4/core": "1.27.2",
-    "@likec4/styles": "1.27.2"
+    "@likec4/core": "1.28.0",
+    "@likec4/styles": "1.28.0"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.53.3",
@@ -76,12 +76,12 @@
     "@types/node": "^20.17.28",
     "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.5.3",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.9",
+    "vitest": "^3.1.1",
     "wireit": "^0.14.11",
-    "@likec4/tsconfig": "1.27.2"
+    "@likec4/tsconfig": "1.28.0"
   },
   "scripts": {
     "generate": "panda codegen",

package/src/base/primitives/compound/CompoundNodeContainer.css.ts

@@ -1,7 +1,4 @@
 import { css, sva } from '@likec4/styles/css'
-// import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-// import { calc } from '@vanilla-extract/css-utils'
-// import { easings, vars, whereLight, whereNotReducedGraphics } from '../../../theme-vars'
 
 // export const _compoundOpacity = '--_compound-opacity'
 // const compoundOpacity = `var(${_compoundOpacity})`

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

@@ -2,10 +2,9 @@ import { cx } from '@likec4/styles/css'
 import { ActionIcon } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import { stopPropagation } from '../../../utils/xyflow'
-import type { EdgeProps } from '../../types'
 import { actionBtn } from './edge.css'
 
-type EdgeActionBtnProps = EdgeProps & {
+type EdgeActionBtnProps = {
   icon?: React.ReactNode
   onClick: (e: React.MouseEvent) => void
 }

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

@@ -1,6 +1,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 { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
 import { stopPropagation } from '../../../utils/xyflow'
@@ -33,13 +34,13 @@ const actionButtons = css({
 })
 
 export function ElementActionButtons({
-  id,
   selected = false,
   data: {
     hovered: isHovered = false,
   },
   buttons,
 }: ElementActionButtonsProps) {
+  const id = useId()
   const zoomTooSmall = useIsZoomTooSmall()
   if (!buttons.length || zoomTooSmall) {
     return null
@@ -49,6 +50,7 @@ export function ElementActionButtons({
       <Box
         component={m.div}
         layoutRoot
+        key={`${id}-action-buttons`}
         initial={false}
         style={{
           originY: 0,
@@ -63,22 +65,22 @@ export function ElementActionButtons({
         className={cx('nodrag nopan', actionButtons)}
       >
         {buttons.map((button, index) => (
-          <m.div
-            key={`action-button-${id}-${button.key ?? index}`}
+          <ActionIcon
+            component={m.button}
+            layout
+            className={actionBtn({})}
+            key={`${id}-${button.key ?? index}`}
             initial={false}
             whileTap={{ scale: 1 }}
             whileHover={{
               scale: 1.3,
             }}
-            onTap={e => button.onClick(e as unknown as React.MouseEvent)}
+            onClick={button.onClick}
             // Otherwise node receives click event and is selected
-            onClick={stopPropagation}
             onDoubleClick={stopPropagation}
           >
-            <ActionIcon className={actionBtn({})}>
-              {button.icon}
-            </ActionIcon>
-          </m.div>
+            {button.icon}
+          </ActionIcon>
         ))}
       </Box>
     </Box>

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

@@ -1,6 +1,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 { IconId } from '@tabler/icons-react'
 import { m } from 'framer-motion'
 import { stopPropagation } from '../../../utils/xyflow'
@@ -41,11 +42,14 @@ export function ElementDetailsButton({
   icon,
   onClick,
 }: ElementDetailsButtonProps) {
+  const id = useId()
   return (
     <Box className={cx(container, 'details-button')}>
       <ActionIcon
+        key={id}
         className={cx('nodrag nopan', actionBtn({ variant: 'transparent' }))}
         component={m.button}
+        layout
         initial={false}
         style={{
           originX: 0.45,

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

@@ -1,7 +1,4 @@
 import { css as style } from '@likec4/styles/css'
-// import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-// import { easings, vars, whereReducedGraphics } from '../../../theme-vars'
-// import { iconSize, paddingSize, textSize } from './vars.css'
 
 export const container = style({
   position: 'relative',
@@ -52,18 +49,3 @@ export const container = style({
     cursor: 'pointer',
   },
 })
-
-// const sizes = ['xs', 'sm', 'lg', 'xl'] as const
-// sizes.forEach((size) => {
-//   globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
-//     vars: {
-//       [textSize]: rem(defaultTheme.textSizes[size]),
-//     },
-//   })
-
-//   globalStyle(`${container}[data-likec4-padding="${size}"]`, {
-//     vars: {
-//       [paddingSize]: rem(defaultTheme.spacing[size]),
-//     },
-//   })
-// })

package/src/bundle/styles.css.ts

@@ -1,9 +1,14 @@
 import type { DiagramView } from '@likec4/core'
 import { css } from '@likec4/styles/css'
 import { type MantineThemeOverride, createTheme, Portal } from '@mantine/core'
-import { useColorScheme as usePreferredColorScheme, useDebouncedCallback, useMutationObserver } from '@mantine/hooks'
+import {
+  useColorScheme as usePreferredColorScheme,
+  useDebouncedCallback,
+  useId,
+  useMutationObserver,
+} from '@mantine/hooks'
 import { useIsomorphicLayoutEffect } from '@react-hookz/web'
-import { useId, useState } from 'react'
+import { useState } from 'react'
 import { first, isFunction, isString } from 'remeda'
 import inlinedStyles from '../styles.css?inline'
 import fontsCss from './font.css?inline'

package/src/components/SearchControl.css.ts

@@ -1,10 +1,6 @@
-import { css as style } from '@likec4/styles/css'
-// import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-// import { mantine, transitions, vars, whereDark, whereLight, whereNotReducedGraphics } from '../theme-vars'
+import { css } from '@likec4/styles/css'
 
-// const transparent = createVar('transparent')
-// const bgColor = createVar('bgcolor')
-export const root = style({
+export const root = css({
   height: '30px',
   paddingLeft: 'sm',
   paddingRight: '4px',
@@ -42,7 +38,7 @@ export const root = style({
   },
 })
 
-export const placeholder = style({
+export const placeholder = css({
   fontSize: 'sm', // mantine.fontSizes.sm,
   fontWeight: 500,
   paddingRight: '50px',
@@ -50,7 +46,7 @@ export const placeholder = style({
   flex: '1',
 })
 
-export const shortcut = style({
+export const shortcut = css({
   fontSize: '11px',
   fontWeight: 600,
   lineHeight: 1,

package/src/hooks/useDiagram.ts

@@ -2,7 +2,7 @@ import { type DiagramView, type EdgeId, type ElementNotation, type Fqn, type Nod
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector as useXstateSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { useMemo, useTransition } from 'react'
+import { useMemo } from 'react'
 import type { PartialDeep } from 'type-fest'
 import type { FeatureName } from '../context/DiagramFeatures'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'
@@ -16,38 +16,27 @@ 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) => {
-      startTransition(() => {
-        actor.send({ type: 'open.source', ...params })
-      })
+      actor.send({ type: 'open.source', ...params })
     },
     openElementDetails: (fqn: Fqn, fromNode?: NodeId) => {
       actor.send({ type: 'open.elementDetails', fqn, fromNode })

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/custom/edges/RelationshipEdge.tsx

@@ -335,7 +335,13 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
   return (
     <>
       <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
-        <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
+        <EdgePath
+          {...props}
+          svgPath={edgePath}
+          ref={svgPathRef}
+          {...enableEdgeEditing && {
+            onEdgePointerDown,
+          }} />
         <EdgeLabelContainer
           edgeProps={props}
           labelPosition={{

package/src/likec4diagram/custom/edges/edges.css.ts

@@ -1,6 +1,4 @@
 import { css } from '@likec4/styles/css'
-// import { globalStyle, style } from '@vanilla-extract/css'
-// import { mantine, xyvars } from '../../../theme-vars'
 
 const isSelected = '.react-flow__edge.selected'
 

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

@@ -1,8 +1,4 @@
 import { css } from '@likec4/styles/css'
-// import { fallbackVar, style } from '@vanilla-extract/css'
-// import { calc } from '@vanilla-extract/css-utils'
-// import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
-// import { stokeFillMix } from '../../xyflow/nodes/element/element.css'
 
 export const container = css({
   bottom: 0,

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

@@ -1,6 +1,5 @@
 import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
 import { css, cx } from '@likec4/styles/css'
-import { token } from '@likec4/styles/tokens'
 import {
   ActionIcon,
   Badge,

package/src/likec4diagram/ui/search/ViewsColumn.css.ts

@@ -1,9 +1,5 @@
 import { css, cx } from '@likec4/styles/css'
 
-// import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-// import { mantine } from '../../../theme-vars'
-// import { button, description, descriptionColor, iconColor, title } from './_shared.css'
-
 export { emptyBoX, focusable } from './_shared.css'
 
 const _viewBtn = 'likec4-view-btn'

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'
@@ -108,7 +108,7 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
         return (
           <Overlay
             key={overlay.actorRef.sessionId}
-            overlayLevel={Math.min(index, 3) as 0 | 1 | 2 | 3}
+            overlayLevel={index}
             onClose={() => close(overlay.actorRef)}>
             <RelationshipsBrowser actorRef={overlay.actorRef} />
           </Overlay>
@@ -116,7 +116,7 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
       case 'relationshipDetails':
         return (
           <Overlay
-            overlayLevel={Math.min(index, 3) as 0 | 1 | 2 | 3}
+            overlayLevel={index}
             key={overlay.actorRef.sessionId}
             onClose={() => close(overlay.actorRef)}>
             <RelationshipDetails actorRef={overlay.actorRef} />

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

@@ -24,7 +24,7 @@ const dialog = css.raw({
   [backdropBlur]: '0px',
   [level]: '0',
   [offset]: '0px',
-  [inset]: 'calc((1 + var(--_level) * 0.5) * var(--_offset))',
+  [inset]: 'calc((1 + var(--_level) * 0.75) * var(--_offset))',
   [backdropOpacity]: '0%',
   _backdrop: {
     cursor: 'zoom-out',
@@ -45,8 +45,8 @@ const dialog = css.raw({
     height: '100vh',
   },
   sm: {
-    inset: '[var(--_inset) var(--_offset) var(--_offset) var(--_inset)]',
-    width: 'calc(100vw - var(--_offset) - var(--_inset))',
+    inset: '[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]',
+    width: 'calc(100vw - 2 * var(--_inset))',
     height: 'calc(100vh - var(--_offset) - var(--_inset))',
     [borderRadius]: '6px',
     padding: '6px',
@@ -61,22 +61,6 @@ const dialog = css.raw({
   xl: {
     [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)',
-  //   },
 })
 
 const body = css.raw({
@@ -99,28 +83,4 @@ export const overlay = sva({
     dialog: dialog,
     body: body,
   },
-  variants: {
-    level: {
-      0: {
-        dialog: {
-          [level]: '0',
-        },
-      },
-      1: {
-        dialog: {
-          [level]: '1',
-        },
-      },
-      2: {
-        dialog: {
-          [level]: '2',
-        },
-      },
-      3: {
-        dialog: {
-          [level]: '3',
-        },
-      },
-    },
-  },
 })