@likec4/diagram 1.24.0 → 1.25.0

package/dist/LikeC4Diagram.css.d.ts

@@ -1,5 +1,8 @@
 export declare const cssReactFlow: string;
+export declare const reactFlowReducedGraphics: string;
+export declare const reactFlow: string;
 export declare const notInitialized: string;
 export declare const cssDisablePan: string;
 export declare const cssTransparentBg: string;
 export declare const hiddenIfZoomTooSmall: string;
+export declare const hiddenIfReducedGraphics: string;

package/dist/LikeC4Diagram.d.ts

@@ -1,3 +1,4 @@
+import { PropsWithChildren } from 'react';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
-export type LikeC4DiagramProps = 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, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, renderIcon, where, showNavigationButtons, }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
+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;

package/dist/LikeC4Diagram.js

@@ -2,6 +2,8 @@ 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 { ReducedGraphicsContext } from "./hooks/useIsReducedGraphics.js";
 import { LikeC4CustomColors } from "./LikeC4CustomColors.js";
 import { useViewToNodesEdges } from "./likec4diagram/useViewToNodesEdges.js";
 import { LikeC4DiagramXYFlow } from "./likec4diagram/XYFlow.js";
@@ -36,6 +38,7 @@ function LikeC4Diagram({
   initialWidth,
   initialHeight,
   experimentalEdgeEditing = false,
+  reduceGraphics = "auto",
   onCanvasClick,
   onCanvasContextMenu,
   onCanvasDblClick,
@@ -48,9 +51,12 @@ function LikeC4Diagram({
   onOpenSource,
   onBurgerMenuClick,
   renderIcon,
+  renderControls,
   where,
-  showNavigationButtons = !!onNavigateTo
+  showNavigationButtons = !!onNavigateTo,
+  children
 }) {
+  var _a, _b;
   const hasLikec4model = !!useLikeC4Model();
   const initialRef = useRef(null);
   const xyNodesEdges = useViewToNodesEdges({
@@ -67,77 +73,85 @@ function LikeC4Diagram({
       initialHeight: initialHeight ?? view.bounds.height
     };
   }
-  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsx(IconRendererProvider, { value: renderIcon ?? null, children: /* @__PURE__ */ jsx(
-    DiagramFeatures,
+  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;
+  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(
+    FramerMotionConfig,
     {
-      features: {
-        enableFitView: fitView,
-        enableReadOnly: readonly,
-        enableFocusMode,
-        enableNavigateTo: !!onNavigateTo,
-        enableElementDetails,
-        enableRelationshipDetails,
-        enableRelationshipBrowser,
-        enableSearch,
-        enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
-        enableDynamicViewWalkthrough: isDynamicView && enableDynamicViewWalkthrough,
-        enableEdgeEditing: experimentalEdgeEditing,
-        enableNotations: showNotations,
-        enableVscode: !!onOpenSource,
-        enableControls: controls,
-        enableViewTitle: showDiagramTitle,
-        enableLikeC4Model: hasLikec4model
-      },
-      children: /* @__PURE__ */ jsx(
-        DiagramEventHandlers,
+      ...isReducedGraphicsMode && { reducedMotion: "always" },
+      children: /* @__PURE__ */ jsx(IconRendererProvider, { value: renderIcon ?? null, children: /* @__PURE__ */ jsx(
+        DiagramFeatures,
         {
-          handlers: {
-            onCanvasClick,
-            onCanvasContextMenu,
-            onCanvasDblClick,
-            onEdgeClick,
-            onChange,
-            onEdgeContextMenu,
-            onNavigateTo,
-            onNodeClick,
-            onNodeContextMenu,
-            onOpenSource,
-            onBurgerMenuClick
+          features: {
+            enableFitView: fitView,
+            enableReadOnly: readonly,
+            enableFocusMode,
+            enableNavigateTo: !!onNavigateTo,
+            enableElementDetails,
+            enableRelationshipDetails,
+            enableRelationshipBrowser,
+            enableSearch,
+            enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
+            enableDynamicViewWalkthrough: isDynamicView && enableDynamicViewWalkthrough,
+            enableEdgeEditing: experimentalEdgeEditing,
+            enableNotations: showNotations,
+            enableVscode: !!onOpenSource,
+            enableControls: controls,
+            enableViewTitle: showDiagramTitle,
+            enableLikeC4Model: hasLikec4model
           },
-          children: /* @__PURE__ */ jsxs(RootContainer, { className, children: [
-            !isEmpty(view.customColorDefinitions) && /* @__PURE__ */ jsx(LikeC4CustomColors, { customColors: view.customColorDefinitions }),
-            /* @__PURE__ */ jsx(
-              ReactFlowProvider,
-              {
-                fitView,
-                ...initialRef.current,
-                children: /* @__PURE__ */ jsx(
-                  DiagramActorProvider,
+          children: /* @__PURE__ */ jsx(
+            DiagramEventHandlers,
+            {
+              handlers: {
+                onCanvasClick,
+                onCanvasContextMenu,
+                onCanvasDblClick,
+                onEdgeClick,
+                onChange,
+                onEdgeContextMenu,
+                onNavigateTo,
+                onNodeClick,
+                onNodeContextMenu,
+                onOpenSource,
+                onBurgerMenuClick
+              },
+              children: /* @__PURE__ */ jsx(ReducedGraphicsContext, { value: isReducedGraphicsMode, children: /* @__PURE__ */ jsxs(RootContainer, { className, reduceGraphics: isReducedGraphicsMode, children: [
+                !isEmpty(view.customColorDefinitions) && /* @__PURE__ */ jsx(LikeC4CustomColors, { customColors: view.customColorDefinitions }),
+                /* @__PURE__ */ jsx(
+                  ReactFlowProvider,
                   {
-                    input: {
-                      view,
-                      pannable,
-                      zoomable,
-                      fitViewPadding,
-                      ...xyNodesEdges
-                    },
+                    fitView,
+                    ...initialRef.current,
                     children: /* @__PURE__ */ jsx(
-                      LikeC4DiagramXYFlow,
+                      DiagramActorProvider,
                       {
-                        nodesDraggable,
-                        nodesSelectable,
-                        background
+                        input: {
+                          view,
+                          pannable,
+                          zoomable,
+                          fitViewPadding,
+                          ...xyNodesEdges
+                        },
+                        children: /* @__PURE__ */ jsx(ControlsCustomLayoutProvider, { value: renderControls ?? null, children: /* @__PURE__ */ jsx(
+                          LikeC4DiagramXYFlow,
+                          {
+                            nodesDraggable,
+                            nodesSelectable,
+                            background,
+                            children
+                          }
+                        ) })
                       }
                     )
                   }
                 )
-              }
-            )
-          ] })
+              ] }) })
+            }
+          )
         }
-      )
+      ) })
     }
-  ) }) }) });
+  ) });
 }
 export {
   LikeC4Diagram

package/dist/LikeC4Diagram.props.d.ts

@@ -1,5 +1,6 @@
 import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, ViewChange, ViewId, WhereOperator } from '@likec4/core';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { ControlsCustomLayout } from './context/ControlsCustomLayout';
 export type { WhereOperator };
 export type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
     navigateTo: ID;
@@ -124,11 +125,21 @@ export interface LikeC4DiagramProperties {
      * @default false
      */
     experimentalEdgeEditing?: boolean | undefined;
+    /**
+     * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+     *
+     * @default 'auto' - will be set to true if view has more then 3000 * 2000 pixels
+     */
+    reduceGraphics?: 'auto' | boolean | undefined;
     /**
      * Render icon for an element, bundled or remote
      * By default, if icon is http:// or https://, it will be rendered as an image
      */
     renderIcon?: ElementIconRenderer | undefined;
+    /**
+     * Customize layout of the controls on the top left
+     */
+    renderControls?: ControlsCustomLayout | undefined;
     /**
      * Dynamic filter, applies both to nodes and edges
      */

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,3 +1,3 @@
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
-export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'where'>;
+export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'where'>;
 export declare function StaticLikeC4Diagram({ view, fitView, fitViewPadding, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, background, ...rest }: StaticLikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

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' | 'onNodeMouseEnter' | 'onNodeMouseLeave' | 'onEdgeMouseEnter' | 'onEdgeMouseLeave' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
+} & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'panOnScroll' | 'panOnDrag' | 'preventScrolling' | 'zoomOnPinch' | 'zoomActivationKeyCode' | 'zoomOnScroll' | 'elementsSelectable' | '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, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -2,14 +2,16 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useCallbackRef } from "@mantine/hooks";
 import { ReactFlow, useStoreApi, useOnViewportChange, useStore } from "@xyflow/react";
 import clsx from "clsx";
-import { useMemo } from "react";
-import { useIsZoomTooSmall } from "../hooks/useXYFlow.js";
+import { shallowEqual } from "fast-equals";
+import { useRef, useEffect, useMemo } from "react";
+import { useIsReducedGraphics } from "../hooks/useIsReducedGraphics.js";
+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 { useUpdateEffect } from "../hooks/useUpdateEffect.js";
 const BaseXYFlow = ({
   nodes,
   edges,
@@ -31,6 +33,14 @@ const BaseXYFlow = ({
 }) => {
   const isBgWithPattern = background !== "transparent" && background !== "solid";
   const isZoomTooSmall = useIsZoomTooSmall();
+  const reduceGraphics = useIsReducedGraphics();
+  const isPanningRef = useRef(false);
+  const xystore = useXYStoreApi();
+  useEffect(() => {
+    return xystore.subscribe((state) => {
+      isPanningRef.current = state.paneDragging;
+    });
+  }, [xystore]);
   return /* @__PURE__ */ jsxs(
     ReactFlow,
     {
@@ -43,7 +53,12 @@ const BaseXYFlow = ({
         background === "transparent" && cssTransparentBg,
         className
       ),
-      "data-likec4-zoom-small": isZoomTooSmall,
+      ...isZoomTooSmall && {
+        ["data-likec4-zoom-small"]: true
+      },
+      ...reduceGraphics && {
+        ["data-likec4-reduced-graphics"]: true
+      },
       zoomOnPinch: zoomable,
       zoomOnScroll: !pannable && zoomable,
       ...!zoomable && {
@@ -65,6 +80,7 @@ const BaseXYFlow = ({
       noPanClassName: "nopan",
       panOnScroll: pannable,
       panOnDrag: pannable,
+      panActivationKeyCode: null,
       ...!pannable && {
         selectionKeyCode: null
       },
@@ -80,6 +96,7 @@ const BaseXYFlow = ({
       onNodesChange,
       onEdgesChange,
       onNodeMouseEnter: useCallbackRef((_event, node) => {
+        if (isPanningRef.current) return;
         onNodesChange([{
           id: node.id,
           type: "replace",
@@ -87,6 +104,7 @@ const BaseXYFlow = ({
         }]);
       }),
       onNodeMouseLeave: useCallbackRef((_event, node) => {
+        if (node.data.hovered !== true) return;
         onNodesChange([{
           id: node.id,
           type: "replace",
@@ -94,6 +112,7 @@ const BaseXYFlow = ({
         }]);
       }),
       onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+        if (isPanningRef.current) return;
         onEdgesChange([{
           id: edge.id,
           type: "replace",
@@ -101,6 +120,7 @@ const BaseXYFlow = ({
         }]);
       }),
       onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+        if (edge.data.hovered !== true) return;
         onEdgesChange([{
           id: edge.id,
           type: "replace",
@@ -136,7 +156,7 @@ const selectDimensions = ({ width, height }) => ({ width, height });
 const ViewportResizeHanlder = ({
   onViewportResize
 }) => {
-  const { width, height } = useStore(selectDimensions);
+  const { width, height } = useStore(selectDimensions, shallowEqual);
   useUpdateEffect(onViewportResize, [width, height]);
   return /* @__PURE__ */ jsx(Fragment, {});
 };

package/dist/base/const.d.ts

@@ -1,8 +1,8 @@
 export declare const ZIndexes: {
-    readonly Compound: 2;
-    readonly Edge: 4;
-    readonly Element: 6;
+    readonly Compound: 0;
+    readonly Edge: 2;
+    readonly Element: 2;
     readonly Max: 8;
 };
-export declare const MinZoom = 0.1;
+export declare const MinZoom = 0.05;
 export declare const MaxZoom = 2;

package/dist/base/const.js

@@ -1,10 +1,10 @@
 const ZIndexes = {
-  Compound: 2,
-  Edge: 4,
-  Element: 6,
+  Compound: 0,
+  Edge: 2,
+  Element: 2,
   Max: 8
 };
-const MinZoom = 0.1;
+const MinZoom = 0.05;
 const MaxZoom = 2;
 export {
   MaxZoom,

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

@@ -1,3 +1,2 @@
 export declare const container: string;
-export declare const actionButton: string;
 export declare const actionIcon: string;

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

@@ -1,9 +1,8 @@
 /* empty css                                        */
+/* empty css                                        */
 var container = "dbuyb70";
-var actionButton = "dbuyb71";
-var actionIcon = "dbuyb72";
+var actionIcon = "dbuyb71";
 export {
-  actionButton,
   actionIcon,
   container
 };

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

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { actionIcon, actionButton, container } from "./CompoundActionButton.css.js";
+import { actionIcon, container } from "./CompoundActionButton.css.js";
 function CompoundActionButton({
   data: {
     hovered: isHovered = false
@@ -14,10 +14,10 @@ function CompoundActionButton({
   onClick
 }) {
   return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall, "compound-action"), children: /* @__PURE__ */ jsx(
-    Box,
+    ActionIcon,
     {
-      className: clsx("nodrag nopan", actionButton),
-      component: m.div,
+      className: clsx("nodrag nopan", actionIcon),
+      component: m.button,
       initial: false,
       animate: {
         scale: isHovered ? 1.2 : 1,
@@ -30,17 +30,11 @@ function CompoundActionButton({
         // y: 1,
       },
       whileTap: { scale: 1 },
-      children: /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          className: actionIcon,
-          size: "md",
-          radius: "md",
-          onClick,
-          onDoubleClick: stopPropagation,
-          children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
-        }
-      )
+      size: "md",
+      radius: "md",
+      onClick,
+      onDoubleClick: stopPropagation,
+      children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
     }
   ) });
 }

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

@@ -1,9 +1,8 @@
+/* empty css                                        */
 /* empty css                                         */
 var container = "k9mic70";
 var actionIcon = "k9mic72";
-var actionIconWrapper = "k9mic73";
 export {
   actionIcon,
-  actionIconWrapper,
   container
 };

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

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { actionIcon, actionIconWrapper, container } from "./CompoundDetailsButton.css.js";
+import { actionIcon, container } from "./CompoundDetailsButton.css.js";
 function CompoundDetailsButton({
   data: {
     hovered: isHovered = false
@@ -14,10 +14,10 @@ function CompoundDetailsButton({
   onClick
 }) {
   return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall, "details-button"), onClick: stopPropagation, children: /* @__PURE__ */ jsx(
-    Box,
+    ActionIcon,
     {
       component: m.div,
-      className: clsx("nodrag nopan", actionIconWrapper),
+      className: clsx("nodrag nopan", actionIcon),
       initial: false,
       style: {
         originX: 0.45,
@@ -32,17 +32,11 @@ function CompoundDetailsButton({
         scale: 1.42
       },
       whileTap: { scale: 1.15 },
-      children: /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          className: actionIcon,
-          size: "md",
-          radius: "md",
-          onClick,
-          onDoubleClick: stopPropagation,
-          children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
-        }
-      )
+      size: "md",
+      radius: "md",
+      onClick,
+      onDoubleClick: stopPropagation,
+      children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
     }
   ) });
 }

package/dist/base/primitives/compound/CompoundNodeContainer.css.d.ts

@@ -3,6 +3,5 @@ export declare const varBorderRadius: `var(--${string})` | `var(--${string}, ${s
 export declare const varBorderTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varBorderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const container: string;
-export declare const compoundBg: string;
 export declare const compoundBorder: string;
 export declare const indicator: string;

package/dist/base/primitives/compound/CompoundNodeContainer.css.js

@@ -2,11 +2,9 @@
 var varCompoundOpacity = "var(--_7cmew10)";
 var varBorderTransparency = "var(--_7cmew12)";
 var container = "_7cmew15";
-var compoundBg = "_7cmew16";
-var compoundBorder = "_7cmew17";
-var indicator = "_7cmew1b";
+var compoundBorder = "_7cmew16";
+var indicator = "_7cmew1a";
 export {
-  compoundBg,
   compoundBorder,
   container,
   indicator,

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

@@ -1,34 +1,47 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { createPolymorphicComponent, Box } from "@mantine/core";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { useDebouncedValue } from "@mantine/hooks";
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
 import { isNumber, clamp } from "remeda";
-import { indicator, compoundBg, compoundBorder, varBorderTransparency, varCompoundOpacity, container } from "./CompoundNodeContainer.css.js";
+import { useIsReducedGraphics } from "../../../hooks/useIsReducedGraphics.js";
+import { compoundBorder, indicator, container, varCompoundOpacity, varBorderTransparency } from "./CompoundNodeContainer.css.js";
+function getVarName(variable) {
+  var matches = variable.match(/^var\((.*)\)$/);
+  if (matches) {
+    return matches[1];
+  }
+  return variable;
+}
+const opacityVar = getVarName(varCompoundOpacity);
+const borderTransparencyVar = getVarName(varBorderTransparency);
 const CompoundNodeContainer = createPolymorphicComponent(
   forwardRef(({
     nodeProps: {
+      selected: isSelected = false,
       data: {
         hovered: isHovered = false,
         dimmed: isDimmed = false,
-        style,
         ...data
       }
     },
     children,
+    style,
     ...rest
   }, ref) => {
-    const isTransparent = isNumber(style.opacity) && style.opacity < 100;
-    let opacity = clamp((style.opacity ?? 100) / 100, {
+    const isReducedGraphics = useIsReducedGraphics();
+    const isTransparent = isNumber(data.style.opacity) && data.style.opacity < 100;
+    let _opacity = clamp((data.style.opacity ?? 100) / 100, {
       min: 0,
       max: 1
     });
-    if (isTransparent && isHovered) {
-      opacity = Math.min(opacity + 0.11, 1);
+    if (isTransparent && isHovered && !isReducedGraphics) {
+      _opacity = Math.min(_opacity + 0.11, 1);
     }
-    const MAX_TRANSPARENCY = 40;
-    const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
+    const [opacity] = useDebouncedValue(Math.round(_opacity * 100) / 100, isHovered ? 200 : 50);
+    const MAX_TRANSPARENCY = 65;
+    const borderTransparency = clamp(MAX_TRANSPARENCY - 0.8 * opacity * MAX_TRANSPARENCY, {
       min: 0,
       max: MAX_TRANSPARENCY
     });
@@ -48,13 +61,23 @@ const CompoundNodeContainer = createPolymorphicComponent(
         "data-compound-transparent": isTransparent,
         "data-likec4-dimmed": isDimmed,
         "data-likec4-shape": data.shape,
-        style: assignInlineVars({
-          [varCompoundOpacity]: opacity.toFixed(2),
-          [varBorderTransparency]: `${borderTransparency}%`
-        }),
+        style: {
+          ...style,
+          [opacityVar]: opacity,
+          [borderTransparencyVar]: `${borderTransparency}%`
+        },
         ...rest,
         children: [
-          /* @__PURE__ */ jsx("svg", { className: indicator, children: /* @__PURE__ */ jsx(
+          isTransparent && !isSelected && data.style.border !== "none" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: compoundBorder,
+              style: {
+                borderStyle: data.style.border ?? "dashed"
+              }
+            }
+          ),
+          isSelected && /* @__PURE__ */ jsx("svg", { className: indicator, children: /* @__PURE__ */ jsx(
             "rect",
             {
               x: 0,
@@ -64,16 +87,6 @@ const CompoundNodeContainer = createPolymorphicComponent(
               rx: 6
             }
           ) }),
-          /* @__PURE__ */ jsx("div", { className: compoundBg }),
-          isTransparent && style.border !== "none" && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: compoundBorder,
-              style: {
-                borderStyle: style.border ?? "dashed"
-              }
-            }
-          ),
           children
         ]
       }

package/dist/base/primitives/compound/CompoundTitle.css.js

@@ -1,5 +1,6 @@
+/* empty css                                        */
 /* empty css                                 */
-var compoundTitle = "_1dn4as0";
+var compoundTitle = "_1dn4as0 _2h8g8h4";
 var title = "_1dn4as1";
 var icon = "_1dn4as2";
 export {

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Box, Text } from "@mantine/core";
 import clsx from "clsx";
-import { icon, title, compoundTitle } from "./CompoundTitle.css.js";
+import { title, compoundTitle, icon } from "./CompoundTitle.css.js";
 import { IconRenderer } from "../../../context/IconRenderer.js";
 function CompoundTitle({ id, data }) {
   const elementIcon = IconRenderer({

package/dist/base/primitives/customNode.js

@@ -1,6 +1,6 @@
 import { deepEqual } from "fast-equals";
 import { memo } from "react";
-const nodePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex, next.zIndex) && deepEqual(prev.positionAbsoluteX, next.positionAbsoluteX) && deepEqual(prev.positionAbsoluteY, next.positionAbsoluteY) && deepEqual(prev.data, next.data);
+const nodePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
 function customNode(Node) {
   return memo(Node, nodePropsEqual);
 }

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

@@ -4,7 +4,8 @@ import { UndefinedOnPartialDeep } from 'type-fest';
 import { EdgeProps } from '../../types';
 type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'dir' | 'color'>>;
 type EdgeContainerProps = PropsWithChildren<EdgeProps<Data> & {
+    component?: 'g' | 'svg' | undefined;
     className?: string | undefined;
 }>;
-export declare function EdgeContainer({ className, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, children, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function EdgeContainer({ className, component, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, children, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};