@likec4/diagram 1.43.0 → 1.45.0

package/dist/base/BaseXYFlow.js

@@ -1,15 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { useMantineColorScheme } from '@mantine/core';
-import { useCallbackRef } from '@mantine/hooks';
 import { ReactFlow, useStore } from '@xyflow/react';
+import { useMemo } from 'react';
+import { useCallbackRef } from '../hooks/useCallbackRef.js';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow.js';
 import { roundDpr } from '../utils/roundDpr.js';
 import { stopPropagation } from '../utils/xyflow.js';
 import { Background } from './Background.js';
+import { Base } from './Base.js';
 import { MinZoom, MaxZoom } from './const.js';
-import { Base } from './types.js';
 
 function BaseXYFlow({
   nodes,
@@ -35,6 +36,12 @@ function BaseXYFlow({
   onEdgeMouseLeave,
   ...props
 }) {
+  const fitViewOptions = useMemo(() => ({
+    minZoom: MinZoom,
+    maxZoom: 1,
+    padding: fitViewPadding,
+    includeHiddenNodes: false
+  }), [fitViewPadding]);
   const isBgWithPattern = background !== "transparent" && background !== "solid";
   const isZoomTooSmall = useIsZoomTooSmall();
   const xystore = useXYStoreApi();
@@ -64,12 +71,7 @@ function BaseXYFlow({
       maxZoom: zoomable ? MaxZoom : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView,
-      fitViewOptions: {
-        minZoom: MinZoom,
-        maxZoom: 1,
-        padding: fitViewPadding,
-        includeHiddenNodes: false
-      },
+      fitViewOptions,
       preventScrolling: zoomable || pannable,
       defaultMarkerColor: "var(--xy-edge-stroke)",
       noDragClassName: "nodrag",
@@ -99,57 +101,49 @@ function BaseXYFlow({
         }
         onMoveEnd?.(event, { x: roundedX, y: roundedY, zoom });
       }),
-      onNodeMouseEnter: useCallbackRef((_event, node) => {
+      onNodeMouseEnter: useCallbackRef((event, node) => {
         if (onNodeMouseEnter) {
-          onNodeMouseEnter(_event, node);
+          onNodeMouseEnter(event, node);
           return;
         }
-        if (!node.data.hovered) {
-          onNodesChange([{
-            id: node.id,
-            type: "replace",
-            item: Base.setHovered(node, true)
-          }]);
-        }
+        onNodesChange([{
+          id: node.id,
+          type: "replace",
+          item: Base.setHovered(node, true)
+        }]);
       }),
-      onNodeMouseLeave: useCallbackRef((_event, node) => {
+      onNodeMouseLeave: useCallbackRef((event, node) => {
         if (onNodeMouseLeave) {
-          onNodeMouseLeave(_event, node);
+          onNodeMouseLeave(event, node);
           return;
         }
-        if (node.data.hovered) {
-          onNodesChange([{
-            id: node.id,
-            type: "replace",
-            item: Base.setHovered(node, false)
-          }]);
-        }
+        onNodesChange([{
+          id: node.id,
+          type: "replace",
+          item: Base.setHovered(node, false)
+        }]);
       }),
-      onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+      onEdgeMouseEnter: useCallbackRef((event, edge) => {
         if (onEdgeMouseEnter) {
-          onEdgeMouseEnter(_event, edge);
+          onEdgeMouseEnter(event, edge);
           return;
         }
-        if (!edge.data.hovered) {
-          onEdgesChange([{
-            id: edge.id,
-            type: "replace",
-            item: Base.setHovered(edge, true)
-          }]);
-        }
+        onEdgesChange([{
+          id: edge.id,
+          type: "replace",
+          item: Base.setHovered(edge, true)
+        }]);
       }),
-      onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+      onEdgeMouseLeave: useCallbackRef((event, edge) => {
         if (onEdgeMouseLeave) {
-          onEdgeMouseLeave(_event, edge);
+          onEdgeMouseLeave(event, edge);
           return;
         }
-        if (edge.data.hovered) {
-          onEdgesChange([{
-            id: edge.id,
-            type: "replace",
-            item: Base.setHovered(edge, false)
-          }]);
-        }
+        onEdgesChange([{
+          id: edge.id,
+          type: "replace",
+          item: Base.setHovered(edge, false)
+        }]);
       }),
       onNodeDoubleClick: stopPropagation,
       onEdgeDoubleClick: stopPropagation,

package/dist/base/index.d.ts

@@ -1,3 +1,7 @@
-export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
-export * from './types';
+export { Background, type XYBackground, type XYBackgroundProps, type XYBackgroundVariant, } from './Background';
+export { BaseXYFlow, type BaseXYFlowProps, } from './BaseXYFlow';
+export * from './Base';
 export * from './const';
+export * from './types';
+export { updateEdges } from './updateEdges';
+export { updateNodes } from './updateNodes';

package/dist/base/types.d.ts

@@ -1,5 +1,6 @@
 import { Edge, EdgeProps, Node, NodeProps } from '@xyflow/react';
 import { OptionalKeysOf, SetRequired, Simplify } from 'type-fest';
+import { Base } from './Base';
 export type BaseNodeData = {
     /**
      * Whether the cursor is hovering over the node
@@ -41,33 +42,6 @@ export type BaseNodePropsWithData<Data extends Record<string, unknown>> = BaseNo
 export interface BaseEdgeProps<E extends BaseEdge = BaseEdge> extends EdgeProps<E> {
 }
 export type BaseEdgePropsWithData<Data extends Record<string, unknown>> = BaseEdgeProps<BaseEdge<Data>>;
-type WithDimmed = {
-    data: {
-        dimmed?: Base.Dimmed;
-    };
-};
-type WithHovered = {
-    data: {
-        hovered?: boolean;
-    };
-};
-declare function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
-declare function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
-declare function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
-declare function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
-type WithData<D> = {
-    data: D;
-};
-declare function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
-declare function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
-export declare const Base: {
-    setDimmed: typeof setDimmed;
-    setHovered: typeof setHovered;
-    setData: typeof setData;
-};
-export declare namespace Base {
-    type Dimmed = 'immediate' | boolean;
-}
 /**
  * To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
  *
@@ -90,4 +64,3 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 } & {
     [P in Keys]-?: T[P] | undefined;
 }>;
-export {};

package/dist/base/updateEdges.js

@@ -1,21 +1,32 @@
 import { deepEqual } from 'fast-equals';
-import { isDefined, omit } from 'remeda';
+import { isDefined, pickBy, isShallowEqual } from 'remeda';
 
-function _update(current, update) {
-  return update.map((next) => {
-    const existing = current.find((n) => n.id === next.id);
-    if (existing && deepEqual(existing.type, next.type)) {
-      if (deepEqual(existing.hidden ?? false, next.hidden ?? false) && deepEqual(existing.source, next.source) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.target, next.target) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(existing.data, next.data)) {
-        return existing;
-      }
-      return {
-        ...omit(existing, ["hidden", "zIndex"]),
-        ...next,
-        data: next.data
-      };
+const EMPTY_OBJ = {};
+function _update(current, updated) {
+  if (current === updated) {
+    return current;
+  }
+  updated = updated.map((update) => {
+    const existing = current.find(
+      (n) => n.id === update.id && n.type === update.type && n.source === update.source && n.target === update.target
+    );
+    if (!existing) {
+      return update;
+    }
+    const isSameData = deepEqual(existing.data, update.data);
+    const data = isSameData ? existing.data : update.data;
+    if (isSameData && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.animated, update.animated ?? existing.animated) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.label, update.label) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) {
+      return existing;
     }
-    return next;
+    return {
+      // Retain existing properties that are defined, except parentId
+      ...pickBy(existing, isDefined),
+      // Apply updates, omitting undefined values
+      ...pickBy(update, isDefined),
+      data
+    };
   });
+  return isShallowEqual(current, updated) ? current : updated;
 }
 function updateEdges(current, update) {
   if (isDefined(update)) {

package/dist/base/updateNodes.d.ts

@@ -1,3 +1,17 @@
 import { BaseNode } from './types';
+/**
+ * Updates nodes by merging existing nodes with updated nodes based on their IDs.
+ *
+ * Can be used in two ways:
+ * 1. By providing both current and updated node arrays:
+ *    `const newNodes = updateNodes(currentNodes, updatedNodes);`
+ * 2. By providing only the updated node array, returning a function that takes the current nodes:
+ *    `const updater = updateNodes(updatedNodes);
+ *     const newNodes = updater(currentNodes);`
+ *
+ * @param current - The current array of nodes.
+ * @param update - The array of nodes with updates.
+ * @returns The updated array of nodes.
+ */
 export declare function updateNodes<N extends BaseNode>(current: N[], update: N[]): N[];
 export declare function updateNodes<N extends BaseNode>(update: N[]): (current: N[]) => N[];

package/dist/base/updateNodes.js

@@ -1,33 +1,67 @@
 import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
-import { isDefined, omit } from 'remeda';
+import { isDefined, hasSubObject, pickBy, isShallowEqual } from 'remeda';
 
+const EMPTY_OBJ = {};
 function _update(current, updated) {
-  return updated.map((update) => {
-    const existing = current.find((n) => n.id === update.id);
-    if (existing && deepEqual(existing.type, update.type)) {
-      const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
-      if (deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.zIndex ?? 0, update.zIndex ?? 0) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data)) {
-        return existing;
+  if (current === updated) {
+    return current;
+  }
+  updated = updated.map((update) => {
+    const existing = current.find((n) => n.id === update.id && n.type === update.type);
+    if (!existing) {
+      return update;
+    }
+    const isSameData = hasSubObject(existing.data, update.data);
+    let data = isSameData ? existing.data : update.data;
+    if (!isSameData) {
+      if (isDefined(existing.data.hovered) && !isDefined(update.data.hovered)) {
+        data = {
+          ...data,
+          hovered: existing.data.hovered
+        };
       }
-      return {
-        ...omit(existing, ["measured", "parentId", "hidden", "zIndex"]),
-        ...update,
-        // Force dimensions from update
-        width: update.initialWidth,
-        height: update.initialHeight,
-        data: update.data
-      };
+      if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) {
+        data = {
+          ...data,
+          dimmed: existing.data.dimmed
+        };
+      }
+    }
+    const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
+    const haveHandles = Object.hasOwn(existing, "handles") || Object.hasOwn(update, "handles");
+    const isSameHandles = !haveHandles || deepEqual(existing.handles ?? [], update.handles ?? []);
+    if (isSameData && isSameHandles && deepEqual(existingWidth, update.width ?? update.initialWidth) && deepEqual(existingHeight, update.height ?? update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.draggable, update.draggable ?? existing.draggable) && deepEqual(existing.dragHandle, update.dragHandle) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.position, update.position) && deepEqual(existing.domAttributes ?? EMPTY_OBJ, update.domAttributes ?? EMPTY_OBJ) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) {
+      return existing;
     }
-    return update;
+    const handles = haveHandles && isSameHandles ? existing.handles : update.handles;
+    return {
+      // Retain existing properties that are defined, except parentId
+      ...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId"),
+      // Retain measured dimensions from existing if present
+      ..."measured" in existing && {
+        measured: {
+          width: update.width ?? update.initialWidth,
+          height: update.height ?? update.initialHeight
+        }
+      },
+      // Apply updates, omitting undefined values
+      ...pickBy(update, isDefined),
+      // Force dimensions
+      width: update.width ?? update.initialWidth,
+      height: update.height ?? update.initialHeight,
+      ...handles && { handles },
+      data
+    };
   });
+  return isShallowEqual(current, updated) ? current : updated;
 }
 function updateNodes(current, update) {
   if (isDefined(update)) {
     return _update(current, update);
   }
   update = current;
-  return (current2) => _update(current2, update);
+  return (existing) => _update(existing, update);
 }
 
 export { updateNodes };

package/dist/base-primitives/Markdown.d.ts

@@ -1,8 +1,7 @@
 import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
-import { BoxProps } from '@likec4/styles/jsx';
 import { JsxStyleProps } from '@likec4/styles/types';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export type MarkdownProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'children'> & {
+import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color'> & {
     value: RichTextType;
     /**
      * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
@@ -30,4 +29,31 @@ export type MarkdownProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'children
      */
     emptyText?: string;
 };
-export declare const Markdown: ForwardRefExoticComponent<Omit<MarkdownProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export declare const Markdown: ForwardRefExoticComponent<Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "color" | "dangerouslySetInnerHTML"> & {
+    value: RichTextType;
+    /**
+     * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
+     * @default false
+     */
+    uselikec4palette?: boolean;
+    /**
+     * Scale factor for the block
+     * @default 1
+     */
+    textScale?: number;
+    /**
+     * Font size for the block
+     * @default 'md'
+     */
+    fontSize?: (JsxStyleProps["fontSize"] & string) | undefined;
+    /**
+     * If true, the component will not render anything if the value is empty.
+     * @default false
+     */
+    hideIfEmpty?: boolean | undefined;
+    /**
+     * Text to show if the value is empty.
+     * @default "no content"
+     */
+    emptyText?: string;
+} & RefAttributes<HTMLDivElement>>;

package/dist/base-primitives/Markdown.js

@@ -37,8 +37,9 @@ const Markdown = forwardRef(({
         ...fontSize && {
           "--text-fz": `var(--font-sizes-${fontSize}, var(--font-sizes-md))`
         },
-        // @ts-expect-error
-        ["--mantine-scale"]: textScale
+        ...textScale !== 1 && {
+          ["--mantine-scale"]: textScale
+        }
       },
       ...content
     }

package/dist/base-primitives/compound/CompoundActionButton.d.ts

@@ -1,8 +1,9 @@
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { Simplify } from 'type-fest';
 import { BaseNodeProps } from '../../base/types';
 type CompoundActionButtonProps = Simplify<BaseNodeProps & {
-    icon?: React.ReactNode;
-    onClick: (e: React.MouseEvent) => void;
+    icon?: ReactNode;
+    onClick: (e: ReactMouseEvent) => void;
 }>;
 export declare function CompoundActionButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundActionButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundActionButton.js

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function CompoundActionButton({
   data: {

package/dist/base-primitives/compound/CompoundDetailsButton.d.ts

@@ -1,8 +1,9 @@
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { Simplify } from 'type-fest';
 import { BaseNodeProps } from '../../base/types';
 type CompoundDetailsButtonProps = Simplify<BaseNodeProps & {
-    icon?: React.ReactNode;
-    onClick: (e: React.MouseEvent) => void;
+    icon?: ReactNode;
+    onClick: (e: ReactMouseEvent) => void;
 }>;
 export declare function CompoundDetailsButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundDetailsButton.js

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 function CompoundDetailsButton({
   data: {

package/dist/base-primitives/edge/EdgeActionButton.d.ts

@@ -1,6 +1,7 @@
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 type EdgeActionBtnProps = {
-    icon?: React.ReactNode;
-    onClick: (e: React.MouseEvent) => void;
+    icon?: ReactNode;
+    onClick: (e: ReactMouseEvent) => void;
 };
 export declare function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base-primitives/edge/EdgeActionButton.js

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { edgeActionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(

package/dist/base-primitives/edge/EdgeContainer.d.ts

@@ -7,5 +7,5 @@ type EdgeContainerProps = PropsWithChildren<BaseEdgePropsWithData<Data> & {
     component?: 'g' | 'svg' | undefined;
     className?: string | undefined;
 }>;
-export declare function EdgeContainer({ className, component, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, children, style, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function EdgeContainer({ className, component, selectable, selected, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, children, style, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base-primitives/edge/EdgeContainer.js

@@ -6,6 +6,8 @@ import { edgeContainer } from './edge.css.js';
 function EdgeContainer({
   className,
   component = "g",
+  selectable = false,
+  selected = false,
   data: {
     color = "gray",
     hovered: isHovered = false,
@@ -20,13 +22,18 @@ function EdgeContainer({
     className: cx(
       className,
       edgeContainer,
-      "likec4-edge-container"
+      "likec4-edge-container",
+      selected && "selected",
+      selectable && "selectable"
     ),
     "data-likec4-color": color,
     "data-edge-dir": data.dir ?? "forward",
     "data-edge-active": isActive,
     "data-edge-animated": isActive,
     "data-likec4-hovered": isHovered,
+    ...selected && {
+      "data-likec4-selected": selected
+    },
     ...isDimmed !== false && {
       "data-likec4-dimmed": isDimmed
     }

package/dist/base-primitives/edge/EdgeLabel.d.ts

@@ -1,12 +1,13 @@
 import { DiagramEdge } from '@likec4/core/types';
 import { HTMLMotionProps } from 'motion/react';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
 import { BaseEdgePropsWithData } from '../../base/types';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
 type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology'>>;
 type EdgeLabelProps = HTMLMotionProps<'div'> & {
-    children?: React.ReactNode;
+    children?: ReactNode;
     edgeProps: BaseEdgePropsWithData<Data>;
+    pointerEvents?: 'all' | 'none';
 };
 export declare const EdgeLabel: ForwardRefExoticComponent<Omit<EdgeLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
 export {};

package/dist/base-primitives/edge/EdgeLabel.js

@@ -18,6 +18,7 @@ const EdgeLabel = forwardRef(({
     selected = false,
     selectable = false
   },
+  pointerEvents = "all",
   className,
   style: _style,
   // omit
@@ -26,6 +27,7 @@ const EdgeLabel = forwardRef(({
 }, ref) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
   const classes = edgeLabel({
+    pointerEvents,
     isStepEdge: stepNum !== null,
     cursor: selectable || stepNum !== null ? "pointer" : "default"
   });

package/dist/base-primitives/edge/EdgeLabelContainer.d.ts

@@ -14,5 +14,5 @@ type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
     } | undefined;
     edgeProps: BaseEdgePropsWithData<Data>;
 };
-export declare function EdgeLabelContainer({ edgeProps: { id, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, }, labelPosition: labelXY, className, style, children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, }, labelPosition: labelXY, className, style, children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/base-primitives/edge/EdgeLabelContainer.js

@@ -13,6 +13,7 @@ const toCssVarValue = (value) => {
 function EdgeLabelContainer({
   edgeProps: {
     id,
+    selected = false,
     data: {
       hovered: isHovered = false,
       active: isActive = false,
@@ -53,6 +54,9 @@ function EdgeLabelContainer({
       "data-likec4-color": color,
       "data-edge-active": isActive,
       "data-edge-animated": isActive,
+      ...selected !== false && {
+        "data-likec4-selected": selected
+      },
       ...isDimmed !== false && {
         "data-likec4-dimmed": isDimmed
       },

package/dist/base-primitives/edge/EdgePath.d.ts

@@ -6,6 +6,10 @@ type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'line' | 'dir' | 'tail' | '
 type EdgePathProps = {
     edgeProps: BaseEdgePropsWithData<Data>;
     svgPath: string;
+    /**
+     * If true, the edge is being dragged (used to disable animations)
+     */
+    isDragging?: boolean;
     strokeWidth?: number;
     onEdgePointerDown?: PointerEventHandler<SVGGElement> | undefined;
 };

package/dist/base-primitives/edge/EdgePath.js

@@ -17,6 +17,8 @@ const EdgePath = forwardRef(({
     style,
     interactionWidth
   },
+  isDragging = false,
+  // omit
   onEdgePointerDown,
   strokeWidth,
   svgPath
@@ -42,19 +44,38 @@ const EdgePath = forwardRef(({
       {
         className: cx(
           "react-flow__edge-interaction",
-          "hide-on-reduced-graphics",
           css({
             fill: "none"
           })
         ),
+        onPointerDown: onEdgePointerDown,
         d: svgPath,
         style: {
           strokeWidth: interactionWidth ?? 10,
           stroke: "currentcolor",
-          strokeOpacity: 0
+          strokeOpacity: 0,
+          ...isDragging ? { display: "none" } : {}
         }
       }
     ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: cx(
+          "edge-center-point",
+          css({
+            visibility: "hidden",
+            offsetDistance: "50%"
+          })
+        ),
+        style: {
+          offsetPath: `path("${svgPath}")`
+        },
+        cx: 0,
+        cy: 0,
+        r: 2
+      }
+    ),
     /* @__PURE__ */ jsxs("g", { className: markerContext, onPointerDown: onEdgePointerDown, children: [
       /* @__PURE__ */ jsxs("defs", { children: [
         MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }),
@@ -66,12 +87,14 @@ const EdgePath = forwardRef(({
           className: cx(
             "react-flow__edge-path",
             "hide-on-reduced-graphics",
-            edgePathBg
+            edgePathBg,
+            isDragging && css({ display: "none" })
           ),
           d: svgPath,
           style,
           strokeLinecap: "round"
-        }
+        },
+        "edge-path-bg"
       ),
       /* @__PURE__ */ jsx(
         "path",
@@ -89,7 +112,8 @@ const EdgePath = forwardRef(({
           strokeDasharray,
           markerStart: MarkerStart ? `url(#start${id})` : void 0,
           markerEnd: MarkerEnd ? `url(#end${id})` : void 0
-        }
+        },
+        "edge-path"
       )
     ] })
   ] });