@likec4/diagram 1.27.2 → 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/EdgeLabelContainer.js

@@ -74,9 +74,10 @@ function EdgeLabelContainer({
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: css({
+          style: {
             display: "contents"
-          }),
+          },
+          // Work around to keep same global selector data-likec4-dimmed
           ...isDimmed !== false && {
             "data-likec4-dimmed": isDimmed
           },

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;
@@ -56,21 +57,24 @@ function ElementActionButtons({
       "data-likec4-hovered": isHovered,
       className: cx("nodrag nopan", actionButtons),
       children: buttons.map((button, index) => /* @__PURE__ */ jsx(
-        m.div,
+        ActionIcon,
         {
+          component: m.button,
+          layout: true,
+          className: actionBtn({}),
           initial: false,
           whileTap: { scale: 1 },
           whileHover: {
             scale: 1.3
           },
-          onTap: (e) => button.onClick(e),
-          onClick: stopPropagation,
+          onClick: button.onClick,
           onDoubleClick: stopPropagation,
-          children: /* @__PURE__ */ jsx(ActionIcon, { className: actionBtn({}), children: button.icon })
+          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;

package/dist/hooks/useDiagram.js

@@ -2,44 +2,33 @@ import '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { useTransition, useMemo } from 'react';
+import { useMemo } from 'react';
 import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { useDiagramActorRef } from './safeContext.js';
 
 function useDiagram() {
   const actor = useDiagramActorRef();
-  const [, startTransition] = useTransition();
   return useMemo(() => ({
     actor,
     send: actor.send,
     navigateTo: (viewId, fromNode) => {
-      startTransition(() => {
-        actor.send({
-          type: "navigate.to",
-          viewId,
-          ...fromNode && { fromNode }
-        });
+      actor.send({
+        type: "navigate.to",
+        viewId,
+        ...fromNode && { fromNode }
       });
     },
     navigate: (direction) => {
-      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) => {
-      startTransition(() => {
-        actor.send({ type: "open.relationshipsBrowser", fqn });
-      });
+      actor.send({ type: "open.relationshipsBrowser", fqn });
     },
     openSource: (params) => {
-      startTransition(() => {
-        actor.send({ type: "open.source", ...params });
-      });
+      actor.send({ type: "open.source", ...params });
     },
     openElementDetails: (fqn, fromNode) => {
       actor.send({ type: "open.elementDetails", fqn, fromNode });

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/DiagramXYFlow.js

@@ -57,15 +57,13 @@ const LikeC4DiagramXYFlow = memo(({
     onCanvasDblClick
   } = useDiagramEventHandlers();
   const notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
-    if (!$isPanning.get()) {
-      $isPanning.set(true);
-    }
-  }, isReducedGraphics ? 150 : 350), notPanning = useDebouncedCallback(() => {
+    $isPanning.set(true);
+  }, isReducedGraphics ? 100 : 200), notPanning = useDebouncedCallback(() => {
     isPanning.clear();
     if ($isPanning.get()) {
       $isPanning.set(false);
     }
-  }, 120), onMove = useCallbackRef((event) => {
+  }, 200), onMove = useCallbackRef((event) => {
     if (!event) {
       return;
     }
@@ -74,7 +72,9 @@ const LikeC4DiagramXYFlow = memo(({
     }
     notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    notPanning.flush();
+    if (!!event) {
+      notPanning.flush();
+    }
     diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });

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 })
           },