@likec4/diagram 1.23.1 → 1.24.1

package/dist/LikeC4Diagram.css.d.ts

@@ -1,5 +1,10 @@
+import { whereNotReducedGraphics, whereReducedGraphics } from './globals.css';
 export declare const cssReactFlow: string;
+export declare const reactFlowReducedGraphics: string;
+export declare const reactFlow: string;
+export { whereNotReducedGraphics, whereReducedGraphics };
 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.css.js

@@ -1,3 +1,4 @@
+/* empty css                           */
 /* empty css                                 */
 var cssReactFlow = "_2h8g8h0";
 var cssDisablePan = "_2h8g8h2";

package/dist/LikeC4Diagram.d.ts

@@ -1,3 +1,3 @@
 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 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, where, showNavigationButtons, }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useRef } from "react";
 import { isEmpty } from "remeda";
+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 +37,7 @@ function LikeC4Diagram({
   initialWidth,
   initialHeight,
   experimentalEdgeEditing = false,
+  reduceGraphics = "auto",
   onCanvasClick,
   onCanvasContextMenu,
   onCanvasDblClick,
@@ -51,6 +53,7 @@ function LikeC4Diagram({
   where,
   showNavigationButtons = !!onNavigateTo
 }) {
+  var _a, _b;
   const hasLikec4model = !!useLikeC4Model();
   const initialRef = useRef(null);
   const xyNodesEdges = useViewToNodesEdges({
@@ -67,6 +70,7 @@ function LikeC4Diagram({
       initialHeight: initialHeight ?? view.bounds.height
     };
   }
+  const isReducedGraphicsMode = reduceGraphics === "auto" ? (((_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, { children: /* @__PURE__ */ jsx(IconRendererProvider, { value: renderIcon ?? null, children: /* @__PURE__ */ jsx(
     DiagramFeatures,
     {
@@ -104,7 +108,7 @@ function LikeC4Diagram({
             onOpenSource,
             onBurgerMenuClick
           },
-          children: /* @__PURE__ */ jsxs(RootContainer, { className, children: [
+          children: /* @__PURE__ */ jsx(ReducedGraphicsContext, { value: isReducedGraphicsMode, children: /* @__PURE__ */ jsxs(RootContainer, { className, children: [
             !isEmpty(view.customColorDefinitions) && /* @__PURE__ */ jsx(LikeC4CustomColors, { customColors: view.customColorDefinitions }),
             /* @__PURE__ */ jsx(
               ReactFlowProvider,
@@ -133,7 +137,7 @@ function LikeC4Diagram({
                 )
               }
             )
-          ] })
+          ] }) })
         }
       )
     }

package/dist/LikeC4Diagram.props.d.ts

@@ -124,6 +124,12 @@ 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

package/dist/StaticLikeC4Diagram.js

@@ -27,11 +27,12 @@ function StaticLikeC4Diagram({
       enableRelationshipDetails,
       enableRelationshipBrowser,
       enableDynamicViewWalkthrough: false,
+      showNavigationButtons: false,
       experimentalEdgeEditing: false,
       enableFocusMode: false,
+      enableSearch: false,
       nodesSelectable: false,
       nodesDraggable: false,
-      enableSearch: false,
       ...rest
     }
   );

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 { shallowEqual } from "fast-equals";
 import { useMemo } from "react";
+import { useIsReducedGraphics } from "../hooks/useIsReducedGraphics.js";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
 import { useIsZoomTooSmall } 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,7 @@ const BaseXYFlow = ({
 }) => {
   const isBgWithPattern = background !== "transparent" && background !== "solid";
   const isZoomTooSmall = useIsZoomTooSmall();
+  const reduceGraphics = useIsReducedGraphics();
   return /* @__PURE__ */ jsxs(
     ReactFlow,
     {
@@ -43,7 +46,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 && {
@@ -68,6 +76,7 @@ const BaseXYFlow = ({
       ...!pannable && {
         selectionKeyCode: null
       },
+      onlyRenderVisibleElements: reduceGraphics,
       elementsSelectable: nodesSelectable,
       nodesFocusable: nodesDraggable || nodesSelectable,
       edgesFocusable: false,
@@ -136,7 +145,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

@@ -4,5 +4,5 @@ export declare const ZIndexes: {
     readonly Element: 6;
     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

@@ -4,7 +4,7 @@ const ZIndexes = {
   Element: 6,
   Max: 8
 };
-const MinZoom = 0.1;
+const MinZoom = 0.05;
 const MaxZoom = 2;
 export {
   MaxZoom,

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

@@ -1,3 +1,5 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                        */
 var container = "dbuyb70";
 var actionButton = "dbuyb71";

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

@@ -1,3 +1,5 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                         */
 var container = "k9mic70";
 var actionIcon = "k9mic72";

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

@@ -1,12 +1,12 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                         */
 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,32 +1,45 @@
 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 [opacity] = useDebouncedValue(Math.round(_opacity * 100) / 100, isHovered ? 200 : 50);
     const MAX_TRANSPARENCY = 40;
     const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
       min: 0,
@@ -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,7 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                 */
-var compoundTitle = "_1dn4as0";
+var compoundTitle = "_1dn4as0 _2h8g8h4";
 var title = "_1dn4as1";
 var icon = "_1dn4as2";
 export {

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, next.zIndex) && deepEqual(prev.data, next.data);
 function customNode(Node) {
   return memo(Node, nodePropsEqual);
 }

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import "react";
-import { edgeVars, dimmed } from "./edge.css.js";
+import { edgeContainer } from "./edge.css.js";
 function EdgeContainer({
   className,
   data: {
@@ -16,8 +16,7 @@ function EdgeContainer({
     "g",
     {
       className: clsx(
-        edgeVars,
-        isDimmed && dimmed,
+        edgeContainer,
         className
       ),
       "data-likec4-color": data.color ?? "gray",
@@ -25,7 +24,9 @@ function EdgeContainer({
       "data-edge-active": isActive,
       "data-edge-animated": isActive,
       "data-edge-hovered": isHovered,
-      "data-edge-dimmed": isDimmed,
+      ...isDimmed !== false && {
+        "data-edge-dimmed": isDimmed
+      },
       children
     }
   );

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

@@ -1,4 +1,3 @@
-export { dimmed, edgeVars } from './edge.css';
 export declare const stepEdgeNumber: string;
 export declare const varLabelX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varLabelY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

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

@@ -1,11 +1,10 @@
+/* empty css                                  */
 /* empty css                                        */
 /* empty css                        */
 /* empty css                             */
-var dimmed = "nrg7w92";
-var edgeVars = "nrg7w91";
 var stepEdgeNumber = "_1fqbh3j0";
 var varTranslate = "var(--_1fqbh3j3)";
-var edgeLabelContainer = "_1fqbh3j4";
+var edgeLabelContainer = "_1fqbh3j4 nrg7w91";
 var edgeLabel = "_1fqbh3j5";
 var secondColumn = "_1fqbh3j6";
 var edgeLabelText = "_1fqbh3j7";
@@ -13,12 +12,10 @@ var edgeLabelTechnology = "_1fqbh3j8";
 var actionBtn = "_1fqbh3jb";
 export {
   actionBtn,
-  dimmed,
   edgeLabel,
   edgeLabelContainer,
   edgeLabelTechnology,
   edgeLabelText,
-  edgeVars,
   secondColumn,
   stepEdgeNumber,
   varTranslate

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

@@ -8,7 +8,7 @@ import { forwardRef } from "react";
 import { isTruthy, isNumber } from "remeda";
 import { useIsZoomTooSmall } from "../../../hooks/useXYFlow.js";
 import { ZIndexes } from "../../const.js";
-import { edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, varTranslate, edgeVars, edgeLabelContainer, dimmed } from "./EdgeLabel.css.js";
+import { edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, varTranslate, edgeLabelContainer } from "./EdgeLabel.css.js";
 const toCssVarValue = (value) => {
   if (value === void 0) return void 0;
   return isNumber(value) ? `${value}px` : value;
@@ -21,7 +21,7 @@ const EdgeLabel = createPolymorphicComponent(
         technology,
         hovered: isHovered = false,
         active: isActive = false,
-        dimmed: dimmed$1 = false,
+        dimmed: isDimmed = false,
         labelBBox,
         ...data
       }
@@ -48,16 +48,16 @@ const EdgeLabel = createPolymorphicComponent(
       {
         className: clsx(
           "nodrag nopan",
-          edgeVars,
           edgeLabelContainer,
-          !!dimmed$1 && dimmed,
           className
         ),
         "data-likec4-color": data.color ?? "gray",
         "data-edge-active": isActive,
         "data-edge-animated": isActive,
         "data-edge-hovered": isHovered,
-        "data-edge-dimmed": dimmed$1,
+        ...isDimmed !== false && {
+          "data-edge-dimmed": isDimmed
+        },
         style: {
           top: toCssVarValue(labelY),
           left: toCssVarValue(labelX),

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

@@ -1,6 +1,6 @@
 export declare const mixColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const edgeVars: string;
-export declare const dimmed: string;
+export declare const edgeContainer: string;
 export declare const edgePathBg: string;
 export declare const markerContext: string;
 export declare const cssEdgePath: string;

package/dist/base/primitives/edge/edge.css.js

@@ -1,14 +1,13 @@
+/* empty css                                  */
 /* empty css                                        */
 /* empty css                        */
-var edgeVars = "nrg7w91";
-var dimmed = "nrg7w92";
-var edgePathBg = "nrg7w93";
+var edgeContainer = "nrg7w92 nrg7w91";
+var edgePathBg = "nrg7w93 _2h8g8h4 _2h8g8h5";
 var markerContext = "nrg7w94";
 var cssEdgePath = "nrg7w96";
 export {
   cssEdgePath,
-  dimmed,
+  edgeContainer,
   edgePathBg,
-  edgeVars,
   markerContext
 };

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

@@ -1,3 +1,5 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                        */
 var container = "_14fvrz60";
 var actionButtons = "_14fvrz61";

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Box, ActionIcon } from "@mantine/core";
 import clsx from "clsx";
 import { m } from "framer-motion";
-import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
+import { useIsZoomTooSmall } from "../../../hooks/useXYFlow.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
 import { actionIcon, actionButtons, container } from "./ElementActionButtons.css.js";
 function ElementActionButtons({
@@ -13,10 +13,11 @@ function ElementActionButtons({
   },
   buttons
 }) {
-  if (!buttons.length) {
+  const zoomTooSmall = useIsZoomTooSmall();
+  if (!buttons.length || zoomTooSmall) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: clsx(container), children: /* @__PURE__ */ jsx(
     Box,
     {
       component: m.div,

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

@@ -1,3 +1,5 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                        */
 var container = "_1jvuy7m0";
 var actionIconWrapper = "_1jvuy7m1";

package/dist/base/primitives/element/ElementNodeContainer.css.js

@@ -1,3 +1,5 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                        */
 var container = "_1smoows1";
 export {

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

@@ -4,6 +4,7 @@ import { createPolymorphicComponent, Box } from "@mantine/core";
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
+import { useIsReducedGraphics } from "../../../hooks/useIsReducedGraphics.js";
 import { container } from "./ElementNodeContainer.css.js";
 function nodeSizes({
   size,
@@ -42,6 +43,7 @@ const ElementNodeContainer = createPolymorphicComponent(
     children,
     ...rest
   }, ref) => {
+    const nonReducedGraphics = !useIsReducedGraphics();
     let scale = 1;
     switch (true) {
       case isHovered:
@@ -66,7 +68,7 @@ const ElementNodeContainer = createPolymorphicComponent(
           "likec4-element-node"
         ]),
         initial: false,
-        ...selectable && {
+        ...selectable && nonReducedGraphics && {
           animate: {
             scale
           },

package/dist/base/primitives/element/ElementShape.css.js

@@ -1,9 +1,11 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                        */
 /* empty css                                */
-var indicator = "_4zok2q2";
+var indicator = "_4zok2q2 _2h8g8h4";
 var fillElementFill = "_4zok2q3";
 var fillMixStroke = "_4zok2q5";
-var shapeSvgMultiple = "_4zok2q8 _4zok2q7";
+var shapeSvgMultiple = "_4zok2q8 _4zok2q7 _2h8g8h4";
 var shapeSvg = "_4zok2q9 _4zok2q7";
 export {
   fillElementFill,

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

@@ -1,7 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
 import clsx from "clsx";
-import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { toDomPrecision } from "../../../utils/xyflow.js";
 import { shapeSvgMultiple, shapeSvg, fillMixStroke, fillElementFill, indicator } from "./ElementShape.css.js";
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
@@ -152,7 +151,7 @@ function ElementShape({ data, width, height, isMultiple = false, withSelectedInd
   let w = !!width && width > 10 ? width : data.width;
   let h = !!height && height > 10 ? height : data.height;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isMultiple && /* @__PURE__ */ jsx("svg", { className: clsx(shapeSvgMultiple, hiddenIfZoomTooSmall), viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
+    isMultiple && /* @__PURE__ */ jsx("svg", { className: clsx(shapeSvgMultiple), viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
     /* @__PURE__ */ jsxs("svg", { className: shapeSvg, viewBox: `0 0 ${w} ${h}`, children: [
       withSelectedIndicator && /* @__PURE__ */ jsx(SelectedIndicator, { shape: data.shape, w, h }),
       /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h })
@@ -184,7 +183,7 @@ function SelectedIndicator({ shape, w, h }) {
       break;
     }
   }
-  return /* @__PURE__ */ jsx("g", { className: clsx(indicator, hiddenIfZoomTooSmall), children: svg });
+  return /* @__PURE__ */ jsx("g", { className: indicator, children: svg });
 }
 export {
   ElementShape,

package/dist/base/primitives/element/ElementTitle.css.js

@@ -1,3 +1,5 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                        */
 /* empty css                          */
 /* empty css                                */

package/dist/base/primitives/element/styles.css.js

@@ -1,3 +1,5 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                        */
 /* empty css                          */
 var iconSize = "var(--likec4-icon-size)";

package/dist/components/SearchControl.css.js

@@ -1,3 +1,5 @@
+/* empty css                            */
+/* empty css                                  */
 /* empty css                                 */
 var root = "xmhqho2";
 var shortcut = "xmhqho3";

package/dist/context/FramerMotionConfig.d.ts

@@ -1,2 +1,10 @@
 import { PropsWithChildren } from 'react';
-export declare const FramerMotionConfig: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const FramerMotionConfig: ({ reducedMotion, children, }: PropsWithChildren<{
+    /**
+     * If true, will respect the device prefersReducedMotion setting by switching
+     * transform animations off.
+     *
+     * @public
+     */
+    reducedMotion?: "always" | "never" | "user";
+}>) => import("react/jsx-runtime").JSX.Element;

package/dist/context/FramerMotionConfig.js

@@ -2,10 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { useMantineStyleNonce } from "@mantine/core";
 import { LazyMotion, domMax, MotionConfig } from "framer-motion";
 import "react";
-const FramerMotionConfig = ({ children }) => {
+const FramerMotionConfig = ({
+  reducedMotion = "user",
+  children
+}) => {
   var _a;
   const nonce = (_a = useMantineStyleNonce()) == null ? void 0 : _a();
-  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(MotionConfig, { ...nonce && { nonce }, children }) });
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion, ...nonce && { nonce }, children }) });
 };
 export {
   FramerMotionConfig