@likec4/diagram 1.24.1 → 1.25.0

package/dist/LikeC4Diagram.css.d.ts

@@ -1,8 +1,6 @@
-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;

package/dist/LikeC4Diagram.css.js

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

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, reduceGraphics, 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,7 @@ 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";
@@ -50,8 +51,10 @@ function LikeC4Diagram({
   onOpenSource,
   onBurgerMenuClick,
   renderIcon,
+  renderControls,
   where,
-  showNavigationButtons = !!onNavigateTo
+  showNavigationButtons = !!onNavigateTo,
+  children
 }) {
   var _a, _b;
   const hasLikec4model = !!useLikeC4Model();
@@ -70,78 +73,85 @@ 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,
+  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__ */ jsx(ReducedGraphicsContext, { value: isReducedGraphicsMode, 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;
@@ -135,6 +136,10 @@ export interface LikeC4DiagramProperties {
      * 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.js

@@ -3,10 +3,10 @@ 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 { useRef, useEffect, useMemo } from "react";
 import { useIsReducedGraphics } from "../hooks/useIsReducedGraphics.js";
 import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
-import { useIsZoomTooSmall } from "../hooks/useXYFlow.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";
@@ -34,6 +34,13 @@ 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,
     {
@@ -73,10 +80,10 @@ const BaseXYFlow = ({
       noPanClassName: "nopan",
       panOnScroll: pannable,
       panOnDrag: pannable,
+      panActivationKeyCode: null,
       ...!pannable && {
         selectionKeyCode: null
       },
-      onlyRenderVisibleElements: reduceGraphics,
       elementsSelectable: nodesSelectable,
       nodesFocusable: nodesDraggable || nodesSelectable,
       edgesFocusable: false,
@@ -89,6 +96,7 @@ const BaseXYFlow = ({
       onNodesChange,
       onEdgesChange,
       onNodeMouseEnter: useCallbackRef((_event, node) => {
+        if (isPanningRef.current) return;
         onNodesChange([{
           id: node.id,
           type: "replace",
@@ -96,6 +104,7 @@ const BaseXYFlow = ({
         }]);
       }),
       onNodeMouseLeave: useCallbackRef((_event, node) => {
+        if (node.data.hovered !== true) return;
         onNodesChange([{
           id: node.id,
           type: "replace",
@@ -103,6 +112,7 @@ const BaseXYFlow = ({
         }]);
       }),
       onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+        if (isPanningRef.current) return;
         onEdgesChange([{
           id: edge.id,
           type: "replace",
@@ -110,6 +120,7 @@ const BaseXYFlow = ({
         }]);
       }),
       onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+        if (edge.data.hovered !== true) return;
         onEdgesChange([{
           id: edge.id,
           type: "replace",

package/dist/base/const.d.ts

@@ -1,7 +1,7 @@
 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.05;

package/dist/base/const.js

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

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,11 +1,8 @@
-/* empty css                                  */
 /* 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,11 +1,8 @@
-/* empty css                                  */
 /* 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.js

@@ -1,5 +1,3 @@
-/* empty css                                  */
-/* empty css                                        */
 /* empty css                                         */
 var varCompoundOpacity = "var(--_7cmew10)";
 var varBorderTransparency = "var(--_7cmew12)";

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

@@ -40,8 +40,8 @@ const CompoundNodeContainer = createPolymorphicComponent(
       _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, {
+    const MAX_TRANSPARENCY = 65;
+    const borderTransparency = clamp(MAX_TRANSPARENCY - 0.8 * opacity * MAX_TRANSPARENCY, {
       min: 0,
       max: MAX_TRANSPARENCY
     });

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

@@ -1,4 +1,3 @@
-/* empty css                                  */
 /* empty css                                        */
 /* empty css                                 */
 var compoundTitle = "_1dn4as0 _2h8g8h4";

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.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 {};

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

@@ -1,9 +1,11 @@
 import { jsx } from "react/jsx-runtime";
+import { invariant } from "@likec4/core";
 import clsx from "clsx";
 import "react";
 import { edgeContainer } from "./edge.css.js";
 function EdgeContainer({
   className,
+  component = "g",
   data: {
     hovered: isHovered = false,
     active: isActive = false,
@@ -12,24 +14,25 @@ function EdgeContainer({
   },
   children
 }) {
-  return /* @__PURE__ */ jsx(
-    "g",
-    {
-      className: clsx(
-        edgeContainer,
-        className
-      ),
-      "data-likec4-color": data.color ?? "gray",
-      "data-edge-dir": data.dir ?? "forward",
-      "data-edge-active": isActive,
-      "data-edge-animated": isActive,
-      "data-edge-hovered": isHovered,
-      ...isDimmed !== false && {
-        "data-edge-dimmed": isDimmed
-      },
-      children
+  const props = {
+    className: clsx(
+      edgeContainer,
+      className
+    ),
+    "data-likec4-color": data.color ?? "gray",
+    "data-edge-dir": data.dir ?? "forward",
+    "data-edge-active": isActive,
+    "data-edge-animated": isActive,
+    "data-edge-hovered": isHovered,
+    ...isDimmed !== false && {
+      "data-edge-dimmed": isDimmed
     }
-  );
+  };
+  if (component === "svg") {
+    return /* @__PURE__ */ jsx("svg", { ...props, children });
+  }
+  invariant(component === "g", 'EdgeContainer: component must be "g" or "svg"');
+  return /* @__PURE__ */ jsx("g", { ...props, children });
 }
 export {
   EdgeContainer

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

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

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

@@ -1,18 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isStepEdgeId, extractStep } from "@likec4/core";
 import { createPolymorphicComponent, Box, Text } from "@mantine/core";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { EdgeLabelRenderer } from "@xyflow/react";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { isTruthy, isNumber } from "remeda";
 import { useIsZoomTooSmall } from "../../../hooks/useXYFlow.js";
+import { getVarName } from "../../../utils/css.js";
 import { ZIndexes } from "../../const.js";
-import { edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, varTranslate, edgeLabelContainer } from "./EdgeLabel.css.js";
+import { edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, edgeLabelContainer, varTranslate as varTranslate$1 } from "./EdgeLabel.css.js";
 const toCssVarValue = (value) => {
   if (value === void 0) return void 0;
   return isNumber(value) ? `${value}px` : value;
 };
+const varTranslate = getVarName(varTranslate$1);
 const EdgeLabel = createPolymorphicComponent(
   forwardRef(({
     edgeProps: {
@@ -61,13 +62,9 @@ const EdgeLabel = createPolymorphicComponent(
         style: {
           top: toCssVarValue(labelY),
           left: toCssVarValue(labelX),
-          // ...assignInlineVars({
-          //   [css.varLabelX]: toCssVarValue(labelX),
-          //   [css.varLabelY]: toCssVarValue(labelY),
-          // }),
-          ...translate && assignInlineVars({
+          ...translate && {
             [varTranslate]: translate
-          }),
+          },
           ...labelBBox && {
             maxWidth: labelBBox.width + 18
           },

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

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
+import { useIsReducedGraphics } from "../../../hooks/useIsReducedGraphics.js";
 import { markerContext, edgePathBg, cssEdgePath } from "./edge.css.js";
 import { arrowTypeToMarker, EdgeMarkers } from "./EdgeMarkers.js";
 const EdgePath = forwardRef(({
@@ -17,6 +18,7 @@ const EdgePath = forwardRef(({
   interactionWidth,
   onEdgePointerDown
 }, svgPathRef) => {
+  const isReducedGraphicsMode = useIsReducedGraphics();
   let markerStartName = arrowTypeToMarker(tail);
   let markerEndName = arrowTypeToMarker(head ?? "normal");
   if (dir === "back") {
@@ -33,7 +35,7 @@ const EdgePath = forwardRef(({
     strokeDasharray = "8,10";
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    !isReducedGraphicsMode && /* @__PURE__ */ jsx(
       "path",
       {
         className: clsx("react-flow__edge-interaction"),
@@ -48,7 +50,7 @@ const EdgePath = forwardRef(({
         MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }),
         MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })
       ] }),
-      /* @__PURE__ */ jsx(
+      !isReducedGraphicsMode && /* @__PURE__ */ jsx(
         "path",
         {
           className: clsx("react-flow__edge-path", edgePathBg),
@@ -61,12 +63,18 @@ const EdgePath = forwardRef(({
         "path",
         {
           ref: svgPathRef,
-          className: clsx("react-flow__edge-path", cssEdgePath),
+          className: clsx(
+            "react-flow__edge-path",
+            isReducedGraphicsMode && "react-flow__edge-interaction",
+            cssEdgePath
+          ),
           d: svgPath,
           style,
           strokeWidth,
-          strokeLinecap: "round",
-          strokeDasharray,
+          ...!isReducedGraphicsMode && {
+            strokeLinecap: "round",
+            strokeDasharray
+          },
           markerStart: MarkerStart ? `url(#start${id})` : void 0,
           markerEnd: MarkerEnd ? `url(#end${id})` : void 0
         }