@likec4/diagram 1.26.1 → 1.27.0

package/dist/LikeC4CustomColors.js

@@ -1,30 +1,34 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import "@likec4/core";
-import { useMantineStyleNonce } from "@mantine/core";
-import { deepEqual } from "fast-equals";
-import { memo } from "react";
-import { entries } from "remeda";
-import { vars } from "./theme-vars.css.js";
-function toStyle(name, colorValues) {
-  const rules = [
-    ...entries(colorValues.elements).map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
-    ...entries(colorValues.relationships).map(([key, value]) => `${stripCssVarReference(vars.relation[key])}: ${value};`)
-  ].join("\n");
-  return `:where([data-likec4-color=${name}]) {
-  ${rules}
-}`;
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@likec4/core';
+import { useMantineStyleNonce } from '@mantine/core';
+import { deepEqual } from 'fast-equals';
+import { memo } from 'react';
+import { entries } from 'remeda';
+
+function toStyle(name, colors) {
+  const darken = (color) => `color-mix(in srgb, ${color} 80%, black)`;
+  return `
+:where([data-likec4-color=${name}]) {
+  --colors-likec4-palette-hi-contrast: ${colors.elements.hiContrast};
+  --colors-likec4-palette-lo-contrast: ${colors.elements.loContrast};
+  --colors-likec4-palette-fill: ${colors.elements.fill};
+  --colors-likec4-palette-stroke: ${colors.elements.stroke};
+  --colors-likec4-relation-stroke: ${colors.relationships.lineColor};
+  --colors-likec4-relation-stroke-selected: color-mix(in srgb, ${colors.relationships.lineColor}, var(--colors-likec4-mix-color) 20%);
+  --colors-likec4-relation-label: ${colors.relationships.labelColor};
+  --colors-likec4-relation-label-bg: ${colors.relationships.labelBgColor};
 }
-function stripCssVarReference(ref) {
-  const end = ref.indexOf(",");
-  return ref.substring(4, end == -1 ? ref.length - 1 : end);
+:where(.likec4-compound-node[data-likec4-color=${name}]) {
+  --colors-likec4-palette-fill: ${darken(colors.elements.fill)};
+  --colors-likec4-palette-stroke: ${darken(colors.elements.stroke)};
+}
+  `;
 }
 const LikeC4CustomColors = memo(({ customColors }) => {
-  var _a;
   const styles = entries(customColors).map(([name, color]) => toStyle(name, color)).join("\n");
-  const nonce = (_a = useMantineStyleNonce()) == null ? void 0 : _a();
+  const nonce = useMantineStyleNonce()?.();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles }, nonce }) });
 }, deepEqual);
 LikeC4CustomColors.displayName = "LikeC4CustomColors";
-export {
-  LikeC4CustomColors
-};
+
+export { LikeC4CustomColors };

package/dist/LikeC4Diagram.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 export type LikeC4DiagramProps = PropsWithChildren<LikeC4DiagramProperties & LikeC4DiagramEventHandlers>;
-export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, background, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesSelectable, nodesDraggable, controls, showDiagramTitle, showNotations, enableDynamicViewWalkthrough, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, renderIcon, renderControls, where, showNavigationButtons, children, }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, view, className, fitView, fitViewPadding, readonly, pannable, zoomable, background, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, controls, showDiagramTitle, showNotations, showNavigationButtons, enableDynamicViewWalkthrough, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, renderControls, where, reactFlowProps, children, }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -1,21 +1,33 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ReactFlowProvider } from "@xyflow/react";
-import { useRef } from "react";
-import { isEmpty } from "remeda";
-import { ControlsCustomLayoutProvider } from "./context/ControlsCustomLayout.js";
-import { ReduceGraphicsContext } from "./context/ReduceGraphics.js";
-import { LikeC4CustomColors } from "./LikeC4CustomColors.js";
-import { LikeC4DiagramXYFlow } from "./likec4diagram/DiagramXYFlow.js";
-import { useViewToNodesEdges } from "./likec4diagram/useViewToNodesEdges.js";
-import { DiagramActorProvider } from "./state/DiagramActorProvider.js";
-import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
-import { EnsureMantine } from "./context/EnsureMantine.js";
-import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
-import { IconRendererProvider } from "./context/IconRenderer.js";
-import { DiagramFeatures } from "./context/DiagramFeatures.js";
-import { DiagramEventHandlers } from "./context/DiagramEventHandlers.js";
-import { RootContainer } from "./context/RootContainer.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ReactFlowProvider } from '@xyflow/react';
+import { useRef } from 'react';
+import { isEmpty } from 'remeda';
+import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js';
+import { ReduceGraphicsContext } from './context/ReduceGraphics.js';
+import { LikeC4CustomColors } from './LikeC4CustomColors.js';
+import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
+import { useViewToNodesEdges } from './likec4diagram/useViewToNodesEdges.js';
+import { DiagramActorProvider } from './state/DiagramActorProvider.js';
+import { useLikeC4Model } from './likec4model/useLikeC4Model.js';
+import { EnsureMantine } from './context/EnsureMantine.js';
+import { FramerMotionConfig } from './context/FramerMotionConfig.js';
+import { IconRendererProvider } from './context/IconRenderer.js';
+import { DiagramFeatures } from './context/DiagramFeatures.js';
+import { DiagramEventHandlers } from './context/DiagramEventHandlers.js';
+import { RootContainer } from './context/RootContainer.js';
+
 function LikeC4Diagram({
+  onCanvasClick,
+  onCanvasContextMenu,
+  onCanvasDblClick,
+  onEdgeClick,
+  onChange,
+  onEdgeContextMenu,
+  onNavigateTo,
+  onNodeClick,
+  onNodeContextMenu,
+  onOpenSource,
+  onBurgerMenuClick,
   view,
   className,
   fitView = true,
@@ -28,35 +40,24 @@ function LikeC4Diagram({
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,
   enableRelationshipBrowser = enableRelationshipDetails,
-  nodesSelectable = !readonly || enableFocusMode,
   nodesDraggable = !readonly,
+  nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
   controls = !readonly,
   showDiagramTitle = true,
   showNotations = true,
+  showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = false,
   enableSearch = true,
   initialWidth,
   initialHeight,
-  experimentalEdgeEditing = false,
+  experimentalEdgeEditing = !readonly,
   reduceGraphics = "auto",
-  onCanvasClick,
-  onCanvasContextMenu,
-  onCanvasDblClick,
-  onEdgeClick,
-  onChange,
-  onEdgeContextMenu,
-  onNavigateTo,
-  onNodeClick,
-  onNodeContextMenu,
-  onOpenSource,
-  onBurgerMenuClick,
   renderIcon,
   renderControls,
   where,
-  showNavigationButtons = !!onNavigateTo,
+  reactFlowProps = {},
   children
 }) {
-  var _a, _b;
   const hasLikec4model = !!useLikeC4Model();
   const initialRef = useRef(null);
   const xyNodesEdges = useViewToNodesEdges({
@@ -73,7 +74,7 @@ function LikeC4Diagram({
       initialHeight: initialHeight ?? view.bounds.height
     };
   }
-  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && (((_a = view.bounds) == null ? void 0 : _a.width) ?? 1) * (((_b = view.bounds) == null ? void 0 : _b.height) ?? 1) > 6e6 : reduceGraphics;
+  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && (view.bounds?.width ?? 1) * (view.bounds?.height ?? 1) > 6e6 : reduceGraphics;
   return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(
     FramerMotionConfig,
     {
@@ -138,6 +139,7 @@ function LikeC4Diagram({
                             nodesDraggable,
                             nodesSelectable,
                             background,
+                            reactFlowProps,
                             children
                           }
                         ) })
@@ -153,6 +155,5 @@ function LikeC4Diagram({
     }
   ) });
 }
-export {
-  LikeC4Diagram
-};
+
+export { LikeC4Diagram };

package/dist/LikeC4Diagram.props.d.ts

@@ -1,4 +1,5 @@
 import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, ViewChange, ViewId, WhereOperator } from '@likec4/core';
+import { ReactFlowProps as XYFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { ControlsCustomLayout } from './context/ControlsCustomLayout';
 export type { WhereOperator };
@@ -25,6 +26,7 @@ export type ChangeEvent = {
 };
 export type OnChange = (event: ChangeEvent) => void;
 export type LikeC4ColorScheme = 'light' | 'dark';
+export type OverrideReactFlowProps = Pick<XYFlowProps, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold'>;
 export interface LikeC4DiagramProperties {
     view: DiagramView;
     className?: string | undefined;
@@ -144,6 +146,10 @@ export interface LikeC4DiagramProperties {
      * Dynamic filter, applies both to nodes and edges
      */
     where?: WhereOperator<string, string> | undefined;
+    /**
+     * Override ReactFlow props
+     */
+    reactFlowProps?: OverrideReactFlowProps | undefined;
 }
 export type OpenSourceParams = {
     element: Fqn;

package/dist/LikeC4ModelProvider.js

@@ -1,12 +1,12 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import { LikeC4ModelContext } from "./likec4model/LikeC4ModelContext.js";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext.js';
+
 function LikeC4ModelProvider({
   children,
   likec4model
 }) {
   return /* @__PURE__ */ jsx(LikeC4ModelContext.Provider, { value: likec4model, children });
 }
-export {
-  LikeC4ModelProvider
-};
+
+export { LikeC4ModelProvider };

package/dist/StaticLikeC4Diagram.js

@@ -1,5 +1,6 @@
-import { jsx } from "react/jsx-runtime";
-import { LikeC4Diagram } from "./LikeC4Diagram.js";
+import { jsx } from 'react/jsx-runtime';
+import { LikeC4Diagram } from './LikeC4Diagram.js';
+
 function StaticLikeC4Diagram({
   view,
   fitView = true,
@@ -37,6 +38,5 @@ function StaticLikeC4Diagram({
     }
   );
 }
-export {
-  StaticLikeC4Diagram
-};
+
+export { StaticLikeC4Diagram };

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,5 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs };

package/dist/_virtual/default-map.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { __require as requireDefaultMap } from '../node_modules/.pnpm/mnemonist@0.40.3_patch_hash_5c12abb43fcff6fd81e53021b89075d53249640d165a2556cc1e58d71201a13a/node_modules/mnemonist/default-map.js';
+
+var defaultMapExports = /*@__PURE__*/ requireDefaultMap();
+const DefaultMap = /*@__PURE__*/getDefaultExportFromCjs(defaultMapExports);
+
+export { DefaultMap as default };

package/dist/base/Background.js

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
-import { nonexhaustive } from "@likec4/core";
-import { Background as Background$1, BackgroundVariant } from "@xyflow/react";
+import { jsx } from 'react/jsx-runtime';
+import { nonexhaustive } from '@likec4/core';
+import { Background as Background$1, BackgroundVariant } from '@xyflow/react';
+
 function literalToEnum(value) {
   switch (value) {
     case "dots":
@@ -19,6 +20,5 @@ function Background({ background }) {
   }
   return /* @__PURE__ */ jsx(Background$1, { ...background });
 }
-export {
-  Background
-};
+
+export { Background };

package/dist/base/BaseXYFlow.d.ts

@@ -10,5 +10,5 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     background?: 'transparent' | 'solid' | XYBackground;
     fitViewPadding?: number;
     onViewportResize?: undefined | (() => void);
-} & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'panOnScroll' | 'panOnDrag' | 'preventScrolling' | 'zoomOnPinch' | 'zoomActivationKeyCode' | 'zoomOnScroll' | 'elementsSelectable' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
+} & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
 export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -1,16 +1,41 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useCallbackRef } from "@mantine/hooks";
-import { ReactFlow, useStore } from "@xyflow/react";
-import clsx from "clsx";
-import { useMemo } from "react";
-import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
-import { useIsZoomTooSmall, useXYStoreApi } from "../hooks/useXYFlow.js";
-import { cssReactFlow, cssDisablePan, cssTransparentBg } from "../LikeC4Diagram.css.js";
-import { stopPropagation } from "../utils/xyflow.js";
-import { Background } from "./Background.js";
-import { MinZoom, MaxZoom } from "./const.js";
-import { Base } from "./types.js";
-import { useIsReducedGraphics } from "../context/ReduceGraphics.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { useCallbackRef } from '@mantine/hooks';
+import { ReactFlow, useStore } from '@xyflow/react';
+import { useMemo, Fragment } from 'react';
+import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
+import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow.js';
+import { stopPropagation } from '../utils/xyflow.js';
+import { Background } from './Background.js';
+import { MinZoom, MaxZoom } from './const.js';
+import { Base } from './types.js';
+
+const cssTransparentBg = css({
+  background: "transparent !important",
+  ["--xy-background-color"]: "transparent !important"
+});
+const cssReactFlow = css({
+  // '@supports': {
+  //   // https://wojtek.im/journal/targeting-safari-with-css-media-query
+  //   '(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
+  //     // TODO: this workaround disables animations in Safari (to improve performance)
+  //     vars: {
+  //       [vars.safariAnimationHook]: '',
+  //     },
+  //   },
+  // },
+  ["--xy-background-color"]: "{colors.mantine.colors.body}",
+  ["--xy-background-pattern-color"]: {
+    _dark: "{colors.mantine.colors.dark[5]}",
+    _light: "{colors.mantine.colors.gray[4]}"
+  },
+  "& .react-flow__pane": {
+    WebkitUserSelect: "none"
+  },
+  "& .react-flow__attribution": {
+    display: "none"
+  }
+});
 const BaseXYFlow = ({
   nodes,
   edges,
@@ -33,7 +58,6 @@ const BaseXYFlow = ({
 }) => {
   const isBgWithPattern = background !== "transparent" && background !== "solid";
   const isZoomTooSmall = useIsZoomTooSmall();
-  const reduceGraphics = useIsReducedGraphics();
   const xystore = useXYStoreApi();
   return /* @__PURE__ */ jsxs(
     ReactFlow,
@@ -41,18 +65,14 @@ const BaseXYFlow = ({
       colorMode,
       nodes,
       edges,
-      className: clsx(
+      className: cx(
         cssReactFlow,
-        pannable !== true && cssDisablePan,
         background === "transparent" && cssTransparentBg,
         className
       ),
       ...isZoomTooSmall && {
         ["data-likec4-zoom-small"]: true
       },
-      ...reduceGraphics && {
-        ["data-likec4-reduced-graphics"]: true
-      },
       zoomOnPinch: zoomable,
       zoomOnScroll: !pannable && zoomable,
       ...!zoomable && {
@@ -74,8 +94,8 @@ const BaseXYFlow = ({
       noPanClassName: "nopan",
       panOnScroll: pannable,
       panOnDrag: pannable,
-      panActivationKeyCode: null,
       ...!pannable && {
+        panActivationKeyCode: null,
         selectionKeyCode: null
       },
       elementsSelectable: nodesSelectable,
@@ -94,42 +114,52 @@ const BaseXYFlow = ({
         if (x !== roundedX || y !== roundedY) {
           xystore.setState({ transform: [roundedX, roundedY, zoom] });
         }
-        onMoveEnd == null ? void 0 : onMoveEnd(event, { x: roundedX, y: roundedY, zoom });
+        onMoveEnd?.(event, { x: roundedX, y: roundedY, zoom });
       }),
       onNodeMouseEnter: useCallbackRef((_event, node) => {
-        onNodesChange([{
-          id: node.id,
-          type: "replace",
-          item: Base.setHovered(node, true)
-        }]);
+        if (!node.data.hovered) {
+          onNodesChange([{
+            id: node.id,
+            type: "replace",
+            item: Base.setHovered(node, true)
+          }]);
+        }
       }),
       onNodeMouseLeave: useCallbackRef((_event, node) => {
-        onNodesChange([{
-          id: node.id,
-          type: "replace",
-          item: Base.setHovered(node, false)
-        }]);
+        if (node.data.hovered) {
+          onNodesChange([{
+            id: node.id,
+            type: "replace",
+            item: Base.setHovered(node, false)
+          }]);
+        }
       }),
       onEdgeMouseEnter: useCallbackRef((_event, edge) => {
-        onEdgesChange([{
-          id: edge.id,
-          type: "replace",
-          item: Base.setHovered(edge, true)
-        }]);
+        if (!edge.data.hovered) {
+          onEdgesChange([{
+            id: edge.id,
+            type: "replace",
+            item: Base.setHovered(edge, true)
+          }]);
+        }
       }),
       onEdgeMouseLeave: useCallbackRef((_event, edge) => {
-        onEdgesChange([{
-          id: edge.id,
-          type: "replace",
-          item: Base.setHovered(edge, false)
-        }]);
+        if (edge.data.hovered) {
+          onEdgesChange([{
+            id: edge.id,
+            type: "replace",
+            item: Base.setHovered(edge, false)
+          }]);
+        }
       }),
       onNodeDoubleClick: stopPropagation,
       onEdgeDoubleClick: stopPropagation,
       ...props,
       children: [
-        isBgWithPattern && /* @__PURE__ */ jsx(Background, { background }),
-        onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }),
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          isBgWithPattern && /* @__PURE__ */ jsx(Background, { background }),
+          onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize })
+        ] }, "_internals"),
         children
       ]
     }
@@ -143,6 +173,5 @@ const ViewportResizeHanlder = ({
   useUpdateEffect(onViewportResize, [square]);
   return null;
 };
-export {
-  BaseXYFlow
-};
+
+export { BaseXYFlow };

package/dist/base/const.js

@@ -6,8 +6,5 @@ const ZIndexes = {
 };
 const MinZoom = 0.05;
 const MaxZoom = 2;
-export {
-  MaxZoom,
-  MinZoom,
-  ZIndexes
-};
+
+export { MaxZoom, MinZoom, ZIndexes };

package/dist/base/primitives/NodeHandles.js

@@ -1,5 +1,6 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Handle, Position } from "@xyflow/react";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Handle, Position } from '@xyflow/react';
+
 const style = {
   top: "50%",
   left: "50%",
@@ -9,6 +10,5 @@ const DefaultHandles = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style }),
   /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style })
 ] });
-export {
-  DefaultHandles
-};
+
+export { DefaultHandles };

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

@@ -1,11 +1,13 @@
-import { jsx } from "react/jsx-runtime";
-import { Box, ActionIcon } from "@mantine/core";
-import { IconZoomScan } from "@tabler/icons-react";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
-import { stopPropagation } from "../../../utils/xyflow.js";
-import { actionIcon, container } from "./CompoundActionButton.css.js";
+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 { useDebouncedValue } from '@mantine/hooks';
+import { IconZoomScan } from '@tabler/icons-react';
+import { m } from 'framer-motion';
+import { stopPropagation } from '../../../utils/xyflow.js';
+import { compoundActionBtn } from './actionbtns.css.js';
+
 function CompoundActionButton({
   data: {
     hovered: isHovered = false
@@ -13,31 +15,56 @@ function CompoundActionButton({
   icon,
   onClick
 }) {
-  return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall, "compound-action"), children: /* @__PURE__ */ jsx(
-    ActionIcon,
+  const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0);
+  const isHoverDebounced = debounced[0] && isHovered;
+  return /* @__PURE__ */ jsx(
+    Box,
     {
-      className: clsx("nodrag nopan", actionIcon),
-      component: m.button,
-      initial: false,
-      animate: {
-        scale: isHovered ? 1.2 : 1,
-        x: isHovered ? -1 : 0
-        // y: isHovered ? -1 : 0,
-      },
-      whileHover: {
-        scale: 1.35,
-        x: -1
-        // y: 1,
-      },
-      whileTap: { scale: 1 },
-      size: "md",
-      radius: "md",
-      onClick,
-      onDoubleClick: stopPropagation,
-      children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
+      className: cx(
+        css({
+          position: "absolute",
+          top: "5px",
+          left: "4px",
+          _smallZoom: {
+            display: "none"
+          }
+        }),
+        "compound-action"
+      ),
+      children: /* @__PURE__ */ jsx(
+        m.div,
+        {
+          initial: false,
+          animate: {
+            scale: isHoverDebounced ? 1.2 : 1,
+            x: isHoverDebounced ? -1 : 0,
+            y: isHoverDebounced ? -1 : 0
+          },
+          whileHover: {
+            scale: 1.4,
+            x: -2,
+            y: -2
+          },
+          whileTap: { scale: 1 },
+          children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              className: cx(
+                "nodrag nopan",
+                compoundActionBtn({
+                  delay: isHovered && !isHoverDebounced
+                }),
+                actionBtn()
+              ),
+              onClick,
+              onDoubleClick: stopPropagation,
+              children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
+            }
+          )
+        }
+      )
     }
-  ) });
+  );
 }
-export {
-  CompoundActionButton
-};
+
+export { CompoundActionButton };