@likec4/diagram 1.39.4 → 1.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.39.4",
+  "version": "1.40.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -69,6 +69,7 @@
   "dependencies": {
     "@dagrejs/dagre": "1.1.5",
     "@floating-ui/dom": "^1.7.4",
+    "@lume/kiwi": "^0.4.4",
     "@mantine/core": "8.2.8",
     "@mantine/hooks": "8.2.8",
     "@nanostores/react": "1.0.0",
@@ -88,11 +89,11 @@
     "remeda": "^2.30.0",
     "type-fest": "^4.41.0",
     "xstate": "^5.20.2",
-    "@likec4/core": "1.39.4",
-    "@likec4/styles": "1.39.4"
+    "@likec4/core": "1.40.0",
+    "@likec4/styles": "1.40.0"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.1.0",
+    "@pandacss/dev": "^1.3.0",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },
@@ -102,7 +103,7 @@
     }
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.1.0",
+    "@pandacss/dev": "^1.3.0",
     "@statelyai/inspect": "^0.4.0",
     "@tabler/icons-react": "3.34.1",
     "@types/bezier-js": "^4.1.3",
@@ -115,11 +116,11 @@
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "typescript": "5.9.2",
-    "vite": "^6.3.5",
+    "vite": "^6.3.6",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "3.2.4",
     "wireit": "0.14.12",
-    "@likec4/tsconfig": "1.39.4"
+    "@likec4/tsconfig": "1.40.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.1.0",
+  "schemaVersion": "1.3.0",
   "styles": {
     "atomic": [
       "background]___[value:dots",
@@ -240,6 +240,7 @@
       "position]___[value:bottom-end",
       "boxShadow]___[value:xl",
       "display]___[value:flex]___[cond:@/xs",
+      "paddingBlock]___[value:1",
       "alignItems]___[value:baseline",
       "stroke]___[value:1.8",
       "marginTop]___[value:1",
@@ -313,10 +314,14 @@
       "borderColor]___[value:mantine.colors.gray[5]",
       "borderRadius]___[value:3",
       "transform]___[value:translate(-50%, -50%)",
-      "flexShrink]___[value:0",
-      "marginRight]___[value:sm",
       "borderColor]___[value:mantine.colors.orange[6]",
       "borderWidth]___[value:4]___[cond:md",
+      "marginRight]___[value:sm",
+      "flexShrink]___[value:0",
+      "display]___[value:[inherit]]___[cond:@/md",
+      "marginInlineStart]___[value:0",
+      "marginInlineStart]___[value:2]___[cond:@/md",
+      "height]___[value:26",
       "top]___[value:[1px]",
       "right]___[value:[1px]",
       "zIndex]___[value:9",
@@ -668,11 +673,8 @@
       "transitionDelay]___[value:0.2s",
       "transitionDelay]___[value:0s]___[cond:_hover",
       "lineClamp]___[value:5",
-      "fill]___[value:[none]",
-      "strokeOpacity]___[value:0",
+      "fill]___[value:none",
       "transition]___[value:none]___[cond:_reduceGraphics",
-      "display]___[value:none]___[cond:_reduceGraphicsOnPan",
-      "display]___[value:none]___[cond:_smallZoom",
       "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
       "strokeOpacity]___[value:0.08",
       "transitionProperty]___[value:stroke-width, stroke-opacity]___[cond:_noReduceGraphics",
@@ -686,8 +688,7 @@
       "strokeOpacity]___[value:0.4]___[cond:_whenSelected<___>_whenHovered",
       "fill]___[value:[var(--xy-edge-stroke)]",
       "stroke]___[value:[var(--xy-edge-stroke)]",
-      "fill]___[value:[none!]",
-      "strokeDashoffset]___[value:10",
+      "strokeDashoffset]___[value:0",
       "animationStyle]___[value:xyedgeAnimated]___[cond:_noReduceGraphics",
       "animationPlayState]___[value:paused]___[cond:_noReduceGraphics",
       "transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
@@ -703,6 +704,7 @@
       "top]___[value:[calc(100% - 30px)]",
       "width]___[value:auto",
       "minHeight]___[value:30px",
+      "display]___[value:none]___[cond:_smallZoom",
       "top]___[value:0.5",
       "right]___[value:[5px]]___[cond:_shapeBrowser",
       "top]___[value:[14px]]___[cond:_shapeCylinder",
@@ -759,6 +761,25 @@
       "cursor]___[value:grabbing",
       "cursor]___[value:grabbing !important]___[cond:& *",
       "cursor]___[value:grabbing !important]___[cond:& .react-flow__edge-interaction",
+      "border]___[value:default",
+      "borderWidth]___[value:1",
+      "--_color]___[value:var(--likec4-palette-stroke)",
+      "--_color]___[value:[color-mix(in srgb, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]]___[cond:_dark",
+      "borderColor]___[value:[var(--_color)/30]",
+      "backgroundColor]___[value:var(--likec4-palette-fill)/15",
+      "paddingLeft]___[value:2",
+      "paddingTop]___[value:0.5",
+      "fontWeight]___[value:bold",
+      "letterSpacing]___[value:.75px",
+      "color]___[value:[var(--_color)/75]",
+      "backgroundColor]___[value:var(--likec4-palette-fill)",
+      "borderRadius]___[value:xs",
+      "width]___[value:5px",
+      "width]___[value:7px]___[cond:_whenHovered",
+      "width]___[value:7px]___[cond:_whenSelected",
+      "translateX]___[value:-1/2",
+      "translateY]___[value:-1/2",
+      "top]___[value:1",
       "position]___[value:top-end",
       "minWidth]___[value:200",
       "maxWidth]___[value:calc(100vw - 16px)",

package/src/LikeC4Diagram.props.ts

@@ -1,5 +1,12 @@
 import type * as t from '@likec4/core/types'
-import type { DiagramEdge, DiagramNode, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types'
+import type {
+  DiagramEdge,
+  DiagramNode,
+  DynamicViewDisplayVariant,
+  LayoutedView,
+  ViewChange,
+  WhereOperator,
+} from '@likec4/core/types'
 import type { ReactFlowProps as XYFlowProps } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
 import type { SetRequired } from 'type-fest'
@@ -250,6 +257,12 @@ export interface LikeC4DiagramProperties<A extends Any = Any> {
    */
   enableDynamicViewWalkthrough?: boolean | undefined
 
+  /**
+   * Default dynamic view display variant
+   * @default 'diagram'
+   */
+  dynamicViewVariant?: DynamicViewDisplayVariant | undefined
+
   /**
    * Display element tags in the bottom left corner
    * @default false

package/src/LikeC4Diagram.tsx

@@ -1,6 +1,7 @@
 import type { Any } from '@likec4/core/types'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import { type PropsWithChildren, useRef } from 'react'
+import { FitViewPaddings } from './base'
 import {
   DiagramEventHandlers,
   DiagramFeatures,
@@ -37,9 +38,10 @@ export function LikeC4Diagram<A extends Any = Any>({
   onBurgerMenuClick,
   view,
   className,
-  fitView = true,
-  fitViewPadding = '8px',
   readonly = true,
+  controls = !readonly,
+  fitView = true,
+  fitViewPadding = controls === 'next' ? FitViewPaddings.withControls : FitViewPaddings.default,
   pannable = true,
   zoomable = true,
   background = 'dots',
@@ -50,11 +52,11 @@ export function LikeC4Diagram<A extends Any = Any>({
   enableRelationshipBrowser = enableRelationshipDetails,
   nodesDraggable = !readonly,
   nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
-  controls = !readonly,
   showDiagramTitle = true,
   showNotations = true,
   showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = false,
+  dynamicViewVariant,
   enableSearch = true,
   initialWidth,
   initialHeight,
@@ -63,7 +65,7 @@ export function LikeC4Diagram<A extends Any = Any>({
   renderIcon,
   renderControls,
   where,
-  reactFlowProps = {},
+  reactFlowProps,
   renderNodes,
   children,
 }: LikeC4DiagramProps<A>) {
@@ -144,6 +146,7 @@ export function LikeC4Diagram<A extends Any = Any>({
                       fitViewPadding={fitViewPadding}
                       nodesSelectable={nodesSelectable}
                       where={where ?? null}
+                      dynamicViewVariant={dynamicViewVariant}
                     >
                       <ControlsCustomLayoutProvider value={renderControls ?? null}>
                         <LikeC4DiagramXYFlow

package/src/base/const.ts

@@ -1,3 +1,5 @@
+import type { ViewPadding } from '../LikeC4Diagram.props'
+
 export const ZIndexes = {
   Compound: 1,
   // XYFlow increments zIndexes of compounds
@@ -8,3 +10,13 @@ export const ZIndexes = {
 
 export const MinZoom = 0.05
 export const MaxZoom = 3
+
+export const FitViewPaddings = {
+  default: '16px',
+  withControls: {
+    top: '50px',
+    left: '16px',
+    right: '16px',
+    bottom: '16px',
+  },
+} satisfies Record<string, ViewPadding>

package/src/base/index.ts

@@ -8,3 +8,5 @@ export {
   type ReactFlowEdge,
   type ReactFlowNode,
 } from './types'
+
+export * from './const'

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

@@ -50,6 +50,8 @@ export const EdgeLabel = forwardRef<HTMLDivElement, EdgeLabelProps>((
     cursor: selectable || stepNum !== null ? 'pointer' : 'default',
   })
 
+  const hasLabel = isTruthy(label) || isTruthy(technology)
+
   return (
     <m.div
       ref={ref}
@@ -65,25 +67,27 @@ export const EdgeLabel = forwardRef<HTMLDivElement, EdgeLabelProps>((
           {stepNum}
         </Box>
       )}
-      <Box className={classes.labelContents}>
-        {isTruthy(label) && (
-          <Box
-            className={cx(
-              classes.labelText,
-              css({
-                lineClamp: 5,
-              }),
-            )}>
-            {label}
-          </Box>
-        )}
-        {isTruthy(technology) && (
-          <Box className={classes.labelTechnology}>
-            {'[ ' + technology + ' ]'}
-          </Box>
-        )}
-        {children}
-      </Box>
+      {hasLabel && (
+        <Box className={classes.labelContents}>
+          {isTruthy(label) && (
+            <Box
+              className={cx(
+                classes.labelText,
+                css({
+                  lineClamp: 5,
+                }),
+              )}>
+              {label}
+            </Box>
+          )}
+          {isTruthy(technology) && (
+            <Box className={classes.labelTechnology}>
+              {'[ ' + technology + ' ]'}
+            </Box>
+          )}
+          {children}
+        </Box>
+      )}
     </m.div>
   )
 })

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

@@ -1,9 +1,10 @@
 import type { DiagramEdge } from '@likec4/core/types'
-import { css, cx } from '@likec4/styles/css'
+import { cx } from '@likec4/styles/css'
 import { EdgeLabelRenderer } from '@xyflow/react'
-import { type HTMLAttributes } from 'react'
+import { type HTMLAttributes, useCallback } from 'react'
 import { isNumber } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'
+import { useXYStore } from '../../../hooks'
 import { ZIndexes } from '../../const'
 import type { EdgeProps } from '../../types'
 
@@ -50,10 +51,14 @@ export function EdgeLabelContainer({
   children,
   ...rest
 }: EdgeLabelContainerProps) {
-  let zIndex = ZIndexes.Edge
+  let zIndex = useXYStore(
+    useCallback((state) => {
+      return state.edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge
+    }, [id]),
+  )
+  // Move above the elements
   if (isHovered || isActive) {
-    // Move above the elements
-    zIndex = ZIndexes.Element + 1
+    zIndex += 100
   }
 
   let labelX = labelXY?.x ?? labelBBox?.x,
@@ -65,9 +70,10 @@ export function EdgeLabelContainer({
   const translate = labelXY?.translate
 
   return (
-    <EdgeLabelRenderer key={id}>
+    <EdgeLabelRenderer>
       <div
         key={id}
+        {...rest}
         className={cx(
           'nodrag nopan',
           'likec4-edge-label-container',
@@ -88,7 +94,6 @@ export function EdgeLabelContainer({
           ...style,
           transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate || ''}`,
         }}
-        {...rest}
       >
         {children}
       </div>

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

@@ -3,7 +3,7 @@ import { css, cx } from '@likec4/styles/css'
 import { type PointerEventHandler, forwardRef } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import type { EdgeProps } from '../../types'
-import { cssEdgePath, edgePathBg, hideOnReducedGraphics, markerContext } from './edge.css'
+import { cssEdgePath, edgePathBg, markerContext } from './edge.css'
 import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers'
 
 type Data = UndefinedOnPartialDeep<
@@ -32,6 +32,7 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
       tail,
       head,
     },
+    selectable = true,
     style,
     interactionWidth,
   },
@@ -71,25 +72,34 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
 
   return (
     <>
-      <path
-        className={cx(
-          'react-flow__edge-interaction',
-          hideOnReducedGraphics,
-          css({
-            fill: '[none]',
+      {selectable && (
+        <path
+          className={cx(
+            'react-flow__edge-interaction',
+            'hide-on-reduced-graphics',
+            css({
+              fill: 'none',
+            }),
+          )}
+          d={svgPath}
+          style={{
+            strokeWidth: interactionWidth ?? 10,
+            stroke: 'currentcolor',
             strokeOpacity: 0,
-          }),
-        )}
-        d={svgPath}
-        strokeWidth={interactionWidth ?? 10}
-      />
+          }}
+        />
+      )}
       <g className={markerContext} onPointerDown={onEdgePointerDown}>
         <defs>
           {MarkerStart && <MarkerStart id={'start' + id} />}
           {MarkerEnd && <MarkerEnd id={'end' + id} />}
         </defs>
         <path
-          className={cx('react-flow__edge-path', edgePathBg)}
+          className={cx(
+            'react-flow__edge-path',
+            'hide-on-reduced-graphics',
+            edgePathBg,
+          )}
           d={svgPath}
           style={style}
           strokeLinecap={'round'}
@@ -98,7 +108,7 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
           ref={svgPathRef}
           className={cx(
             'react-flow__edge-path',
-            'react-flow__edge-interaction',
+            selectable && 'react-flow__edge-interaction',
             cssEdgePath,
           )}
           d={svgPath}
@@ -113,3 +123,4 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
     </>
   )
 })
+EdgePath.displayName = 'EdgePath'

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

@@ -8,18 +8,9 @@ export const edgeContainer = css({
   },
 })
 
-const _hideOnReducedGraphics = css.raw({
-  _reduceGraphicsOnPan: {
-    display: 'none',
-  },
-  _smallZoom: {
-    display: 'none',
-  },
-})
-export const hideOnReducedGraphics = css(_hideOnReducedGraphics)
-
-export const edgePathBg = css(_hideOnReducedGraphics, {
-  fill: '[none]',
+export const edgePathBg = css({
+  pointerEvents: 'none',
+  fill: 'none',
   strokeWidth: 'calc(var(--xy-edge-stroke-width) + 2)',
   strokeOpacity: 0.08,
   _noReduceGraphics: {
@@ -48,8 +39,8 @@ export const markerContext = css({
 })
 
 export const cssEdgePath = css({
-  fill: '[none!]',
-  strokeDashoffset: 10,
+  fill: 'none',
+  strokeDashoffset: 0,
   _noReduceGraphics: {
     animationStyle: 'xyedgeAnimated',
     animationPlayState: 'paused',

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

@@ -4,7 +4,6 @@ import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon } from '@mantine/core'
 import { useId } from '@mantine/hooks'
 import * as m from 'motion/react-m'
-import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 
@@ -43,8 +42,7 @@ export function ElementActionButtons({
   buttons,
 }: ElementActionButtonsProps) {
   const id = useId()
-  const zoomTooSmall = useIsZoomTooSmall()
-  if (!buttons.length || zoomTooSmall) {
+  if (!buttons.length) {
     return null
   }
   return (

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

@@ -2,11 +2,9 @@ import {
   type Color,
   type ElementShape,
   type ElementStyle,
-  DefaultPaddingSize,
-  DefaultShapeSize,
-  DefaultTextSize,
+  ensureSizes,
 } from '@likec4/core/types'
-import { css, cx } from '@likec4/styles/css'
+import { cx } from '@likec4/styles/css'
 import type { MotionNodeLayoutOptions } from 'motion/react'
 import * as m from 'motion/react-m'
 import { type CSSProperties, type ReactNode, forwardRef } from 'react'
@@ -28,31 +26,6 @@ export type ElementNodeContainerProps =
     [key: `data-${string}`]: string | undefined
   }
   & MotionNodeLayoutOptions
-
-export function nodeSizes({
-  size,
-  padding,
-  textSize,
-}: ElementStyle) {
-  if (!size && !!textSize) {
-    size = textSize
-  }
-  if (!textSize && !!size) {
-    textSize = size
-  }
-  if (!padding && !!size) {
-    padding = size
-  }
-  size ??= DefaultShapeSize
-  textSize ??= DefaultTextSize
-  padding ??= DefaultPaddingSize
-  return {
-    size,
-    padding,
-    textSize,
-  }
-}
-
 /**
  * Top-level primitive to compose leaf nodes renderers.
  * This container provides the state via data-* attributes
@@ -86,7 +59,7 @@ export const ElementNodeContainer = forwardRef<HTMLDivElement, ElementNodeContai
     size,
     padding,
     textSize,
-  } = nodeSizes(data.style ?? {})
+  } = ensureSizes(data.style ?? {})
 
   return (
     <m.div

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

@@ -1,4 +1,4 @@
-import type { DiagramNode, RichTextOrEmpty } from '@likec4/core/types'
+import { type DiagramNode, type RichTextOrEmpty, ensureSizes } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { Box } from '@likec4/styles/jsx'
 import { elementNodeData, elementNodeIcon as elementIconRecipe } from '@likec4/styles/recipes'
@@ -8,7 +8,6 @@ import type { Simplify } from 'type-fest'
 import { IconRenderer } from '../../../context/IconRenderer'
 import type { NodeProps, NonOptional } from '../../types'
 import { MarkdownBlock } from '../MarkdownBlock'
-import { nodeSizes } from './ElementNodeContainer'
 
 type Data = Simplify<
   & NonOptional<
@@ -44,7 +43,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
     hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !isEmpty(data.technology ?? ''),
   })
-  const size = nodeSizes(data.style).size
+  const { size } = ensureSizes(data.style)
   const isSm = size === 'sm'
   const isSmOrXs = isSm || size === 'xs'
   return (

package/src/base/types.ts

@@ -15,11 +15,11 @@ type RFEdge<
 type ReactFlowNodeProps<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
   NodeType extends string | undefined = string | undefined,
-> = RF.NodeProps<RFNode<NodeData, NodeType>>
+> = RF.NodeProps<RF.Node<NodeData, NodeType>>
 type ReactFlowEdgeProps<
   EdgeData extends Record<string, unknown> = Record<string, unknown>,
   EdgeType extends string | undefined = string | undefined,
-> = RF.EdgeProps<RFEdge<EdgeData, EdgeType>>
+> = RF.EdgeProps<RF.Edge<EdgeData, EdgeType>>
 
 export namespace Base {
   // 'immediate' means that the node is dimmed without delay
@@ -156,9 +156,11 @@ export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends s
 /**
  * ReactFlow Custom Edge properties with BaseEdgeData at least
  */
-export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = SetRequired<
-  Simplify<ReactFlowEdgeProps<Base.EdgeData & T, EdgeType>>,
-  'data'
+export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = Simplify<
+  SetRequired<
+    ReactFlowEdgeProps<Base.EdgeData & T, EdgeType>,
+    'data'
+  >
 >
 
 export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<

package/src/bundle/LikeC4View.props.ts

@@ -1,5 +1,4 @@
 import type * as t from '@likec4/core/types'
-import type { WhereOperator } from '@likec4/core/types'
 import type { CSSProperties } from 'react'
 import type {
   CustomNodes,
@@ -109,10 +108,16 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
 
   /**
    * If Walkthrough for dynamic views should be enabled
-   * @default enableFocusMode
+   * @default false
    */
   enableDynamicViewWalkthrough?: boolean | undefined
 
+  /**
+   * Default dynamic view display variant
+   * @default 'diagram'
+   */
+  dynamicViewVariant?: t.DynamicViewDisplayVariant | undefined
+
   /**
    * Enable popup with element details
    * @default false
@@ -145,7 +150,7 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
    */
   reduceGraphics?: 'auto' | boolean | undefined
 
-  where?: WhereOperator<A> | undefined
+  where?: t.WhereOperator<A> | undefined
 
   /**
    * Override some react flow props
@@ -228,6 +233,12 @@ export interface LikeC4BrowserProps {
    */
   enableDynamicViewWalkthrough?: boolean | undefined
 
+  /**
+   * Default dynamic view display variant
+   * @default 'diagram'
+   */
+  dynamicViewVariant?: t.DynamicViewDisplayVariant | undefined
+
   /**
    * Enable popup with element details
    * @default true