@likec4/diagram 1.27.3 → 1.28.0

package/dist/base/primitives/customEdge.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent, NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Base, EdgeProps } from '../types';
-import { Position } from '@xyflow/system';
+import { Position } from '@xyflow/react';
 export declare const edgePropsEqual: <P extends Record<string, unknown> = Base.EdgeData>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
 export declare function customEdge<P extends Record<string, unknown> = Base.NodeData>(Edge: FunctionComponent<EdgeProps<P>>): NamedExoticComponent<{
     id: string;

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

@@ -1,5 +1,4 @@
-import { EdgeProps } from '../../types';
-type EdgeActionBtnProps = EdgeProps & {
+type EdgeActionBtnProps = {
     icon?: React.ReactNode;
     onClick: (e: React.MouseEvent) => void;
 };

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

@@ -1,5 +1,5 @@
 import { PointerEventHandler, ForwardRefExoticComponent, CSSProperties, ReactNode, RefAttributes } from 'react';
-import { Position } from '@xyflow/system';
+import { Position } from '@xyflow/react';
 import { RelationshipLineType, RelationshipArrowType } from '@likec4/core';
 export declare const EdgePath: ForwardRefExoticComponent<{
     id: string;

package/dist/base/primitives/element/ElementActionButtons.d.ts

@@ -2,7 +2,7 @@ import { NodeProps } from '../../types';
 type ElementActionButtonsProps = NodeProps & {
     buttons: ElementActionButtons.Item[];
 };
-export declare function ElementActionButtons({ id, selected, data: { hovered: isHovered, }, buttons, }: ElementActionButtonsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ElementActionButtons({ selected, data: { hovered: isHovered, }, buttons, }: ElementActionButtonsProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ElementActionButtons {
     type Item = {
         key?: string;

package/dist/base/primitives/element/ElementActionButtons.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { css, cx } from '@likec4/styles/css';
 import { actionBtn } from '@likec4/styles/recipes';
 import { Box, ActionIcon } from '@mantine/core';
+import { useId } from '@mantine/hooks';
 import { m } from 'framer-motion';
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow.js';
 import { stopPropagation } from '../../../utils/xyflow.js';
@@ -27,13 +28,13 @@ const actionButtons = css({
   alignItems: "center"
 });
 function ElementActionButtons({
-  id,
   selected = false,
   data: {
     hovered: isHovered = false
   },
   buttons
 }) {
+  const id = useId();
   const zoomTooSmall = useIsZoomTooSmall();
   if (!buttons.length || zoomTooSmall) {
     return null;
@@ -70,9 +71,10 @@ function ElementActionButtons({
           onDoubleClick: stopPropagation,
           children: button.icon
         },
-        `action-button-${id}-${button.key ?? index}`
+        `${id}-${button.key ?? index}`
       ))
-    }
+    },
+    `${id}-action-buttons`
   ) });
 }
 

package/dist/base/primitives/element/ElementDetailsButton.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { actionBtn } from '@likec4/styles/recipes';
 import { Box, ActionIcon } from '@mantine/core';
+import { useId } from '@mantine/hooks';
 import { IconId } from '@tabler/icons-react';
 import { m } from 'framer-motion';
 import { stopPropagation } from '../../../utils/xyflow.js';
@@ -35,11 +36,13 @@ function ElementDetailsButton({
   icon,
   onClick
 }) {
+  const id = useId();
   return /* @__PURE__ */ jsx(Box, { className: cx(container, "details-button"), children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
       className: cx("nodrag nopan", actionBtn({ variant: "transparent" })),
       component: m.button,
+      layout: true,
       initial: false,
       style: {
         originX: 0.45,
@@ -60,7 +63,8 @@ function ElementDetailsButton({
       onClick,
       onDoubleClick: stopPropagation,
       children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
-    }
+    },
+    id
   ) });
 }
 

package/dist/bundle/styles.css.js

@@ -1,8 +1,8 @@
 import { css } from '@likec4/styles/css';
 import { createTheme, Portal } from '@mantine/core';
-import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback } from '@mantine/hooks';
+import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback, useId } from '@mantine/hooks';
 import { useIsomorphicLayoutEffect } from '@react-hookz/web';
-import { useState, useId } from 'react';
+import { useState } from 'react';
 import { first, isString, isFunction } from 'remeda';
 import inlinedStyles from '../styles.css.js';
 import fontsCss from './font.css.js';

package/dist/hooks/useDiagram.d.ts

@@ -13,9 +13,9 @@ import { HotKeyEvent } from '../state/hotkeyActor';
 import { OverlaysContext, OverlayActorEvent, OverlayActorEmitedEvent } from '../overlays/overlaysActor';
 import { ElementDetailsLogic } from '../overlays/element-details/actor';
 import { EnabledFeatures } from '../context';
-import { ReactFlowState, ReactFlowInstance } from '@xyflow/react';
-import { EdgeMarkerType, HandleType, XYPosition, Viewport, NodeChange, EdgeChange } from '@xyflow/system';
+import { ReactFlowState, EdgeMarkerType, HandleType, ReactFlowInstance } from '@xyflow/react';
 import { ReactNode, CSSProperties } from 'react';
+import { XYPosition, Viewport, NodeChange, EdgeChange } from '@xyflow/system';
 export { useDiagramActorRef };
 export declare function useDiagram(): {
     actor: DiagramActorRef;
@@ -9775,11 +9775,7 @@ export declare function useDiagram(): {
             readonly 'xyflow.applyEdgeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
                     type: "xyflow.applyEdgeChanges";
-                    changes: EdgeChange<
-                    /**
-                     * @warning Do not use in render phase
-                     */
-                    Types.Edge>[];
+                    changes: EdgeChange<Types.Edge>[];
                 }, Events, undefined, Values<{
                     syncManualLayoutActorLogic: {
                         src: "syncManualLayoutActorLogic";

package/dist/hooks/useXYFlow.d.ts

@@ -1,8 +1,8 @@
-import { ReactFlowState, ReactFlowInstance, InternalNode } from '@xyflow/react';
+import { ReactFlowState, ReactFlowInstance, EdgeMarkerType, HandleType, InternalNode } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
-import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
 import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
+import { XYPosition } from '@xyflow/system';
 export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     id: string;
     source: string;

package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts

@@ -1,7 +1,7 @@
 import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
-import { XYPosition } from '@xyflow/react';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/system';
+import { Position } from '@xyflow/react';
+import { XYPosition } from '@xyflow/system';
 export declare const RelationshipEdge: NamedExoticComponent<{
     id: string;
     selected?: boolean;

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -265,7 +265,17 @@ const RelationshipEdge = customEdge((props) => {
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
-      /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath: edgePath, ref: svgPathRef, onEdgePointerDown }),
+      /* @__PURE__ */ jsx(
+        EdgePath,
+        {
+          ...props,
+          svgPath: edgePath,
+          ref: svgPathRef,
+          ...enableEdgeEditing && {
+            onEdgePointerDown
+          }
+        }
+      ),
       /* @__PURE__ */ jsx(
         EdgeLabelContainer,
         {

package/dist/likec4diagram/custom/index.d.ts

@@ -1,8 +1,9 @@
 import { Types } from '../types';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { NodeProps } from '../../base';
-import { Position, XYPosition } from '@xyflow/system';
+import { Position } from '@xyflow/react';
 import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
+import { XYPosition } from '@xyflow/system';
 export declare const nodeTypes: {
     element: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
     deployment: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
-import '@likec4/styles/tokens';
 import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { IconAlertTriangle, IconHelpCircle, IconArrowDownRight } from '@tabler/icons-react';

package/dist/overlays/Overlays.js

@@ -92,7 +92,7 @@ const Overlays = memo(({ overlaysActorRef }) => {
         return /* @__PURE__ */ jsx(
           Overlay,
           {
-            overlayLevel: Math.min(index, 3),
+            overlayLevel: index,
             onClose: () => close(overlay.actorRef),
             children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: overlay.actorRef })
           },
@@ -102,7 +102,7 @@ const Overlays = memo(({ overlaysActorRef }) => {
         return /* @__PURE__ */ jsx(
           Overlay,
           {
-            overlayLevel: Math.min(index, 3),
+            overlayLevel: index,
             onClose: () => close(overlay.actorRef),
             children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: overlay.actorRef })
           },