@likec4/diagram 1.24.1 → 1.25.1

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,10 +2,11 @@ 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 { 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 { LikeC4DiagramXYFlow } from "./likec4diagram/XYFlow.js";
 import { DiagramActorProvider } from "./state/DiagramActorProvider.js";
 import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
 import { EnsureMantine } from "./context/EnsureMantine.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(ReduceGraphicsContext, { reduceGraphics: 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.d.ts

@@ -11,4 +11,4 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     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'>>;
-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;
+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,17 +1,16 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useCallbackRef } from "@mantine/hooks";
-import { ReactFlow, useStoreApi, useOnViewportChange, useStore } from "@xyflow/react";
+import { ReactFlow, 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 { 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";
 const BaseXYFlow = ({
   nodes,
   edges,
@@ -29,11 +28,13 @@ const BaseXYFlow = ({
   fitView = true,
   zoomOnDoubleClick = false,
   onViewportResize,
+  onMoveEnd,
   ...props
 }) => {
   const isBgWithPattern = background !== "transparent" && background !== "solid";
   const isZoomTooSmall = useIsZoomTooSmall();
   const reduceGraphics = useIsReducedGraphics();
+  const xystore = useXYStoreApi();
   return /* @__PURE__ */ jsxs(
     ReactFlow,
     {
@@ -73,10 +74,10 @@ const BaseXYFlow = ({
       noPanClassName: "nopan",
       panOnScroll: pannable,
       panOnDrag: pannable,
+      panActivationKeyCode: null,
       ...!pannable && {
         selectionKeyCode: null
       },
-      onlyRenderVisibleElements: reduceGraphics,
       elementsSelectable: nodesSelectable,
       nodesFocusable: nodesDraggable || nodesSelectable,
       edgesFocusable: false,
@@ -88,6 +89,13 @@ const BaseXYFlow = ({
       selectNodesOnDrag: false,
       onNodesChange,
       onEdgesChange,
+      onMoveEnd: useCallbackRef((event, { x, y, zoom }) => {
+        const roundedX = Math.round(x), roundedY = Math.round(y);
+        if (x !== roundedX || y !== roundedY) {
+          xystore.setState({ transform: [roundedX, roundedY, zoom] });
+        }
+        onMoveEnd == null ? void 0 : onMoveEnd(event, { x: roundedX, y: roundedY, zoom });
+      }),
       onNodeMouseEnter: useCallbackRef((_event, node) => {
         onNodesChange([{
           id: node.id,
@@ -121,33 +129,19 @@ const BaseXYFlow = ({
       ...props,
       children: [
         isBgWithPattern && /* @__PURE__ */ jsx(Background, { background }),
-        /* @__PURE__ */ jsx(BaseXYFlowInner, { onViewportResize }),
+        onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }),
         children
       ]
     }
   );
 };
-const BaseXYFlowInner = ({
-  onViewportResize
-}) => {
-  const xyflowApi = useStoreApi();
-  useOnViewportChange({
-    onEnd: ({ x, y, zoom }) => {
-      const roundedX = Math.round(x), roundedY = Math.round(y);
-      if (x !== roundedX || y !== roundedY) {
-        xyflowApi.setState({ transform: [roundedX, roundedY, zoom] });
-      }
-    }
-  });
-  return /* @__PURE__ */ jsx(Fragment, { children: onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }) });
-};
-const selectDimensions = ({ width, height }) => ({ width, height });
+const selectDimensions = ({ width, height }) => (width || 1) * (height || 1);
 const ViewportResizeHanlder = ({
   onViewportResize
 }) => {
-  const { width, height } = useStore(selectDimensions, shallowEqual);
-  useUpdateEffect(onViewportResize, [width, height]);
-  return /* @__PURE__ */ jsx(Fragment, {});
+  const square = useStore(selectDimensions);
+  useUpdateEffect(onViewportResize, [square]);
+  return null;
 };
 export {
   BaseXYFlow

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/example/custom.d.ts

@@ -37,9 +37,9 @@ export declare const edgeTypes: {
         style?: CSSProperties;
         id: string;
         selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
         animated?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
         sourceX: number;
         sourceY: number;
         targetX: number;

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

@@ -5,8 +5,8 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
 import { isNumber, clamp } from "remeda";
-import { useIsReducedGraphics } from "../../../hooks/useIsReducedGraphics.js";
 import { compoundBorder, indicator, container, varCompoundOpacity, varBorderTransparency } from "./CompoundNodeContainer.css.js";
+import { useIsReducedGraphics } from "../../../context/ReduceGraphics.js";
 function getVarName(variable) {
   var matches = variable.match(/^var\((.*)\)$/);
   if (matches) {
@@ -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/customEdge.d.ts

@@ -1,20 +1,16 @@
 import { FunctionComponent, NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Base, EdgeProps } from '../types';
 import { Position } from '@xyflow/system';
-export declare const edgePropsEqual: <P extends Record<string, unknown> = {
-    hovered?: boolean;
-    active?: boolean;
-    dimmed?: Base.Dimmed;
-}>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
+export declare const edgePropsEqual: <P extends Record<string, unknown> = Base.EdgeData>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
 export declare function customEdge<P extends Record<string, unknown> = Base.NodeData>(Edge: FunctionComponent<EdgeProps<P>>): NamedExoticComponent<{
     source: string;
     target: string;
     style?: CSSProperties;
     id: string;
     selected?: boolean;
-    selectable?: boolean;
-    deletable?: boolean;
     animated?: boolean;
+    deletable?: boolean;
+    selectable?: boolean;
     sourceX: number;
     sourceY: number;
     targetX: number;

package/dist/base/primitives/customNode.d.ts

@@ -1,7 +1,4 @@
 import { FunctionComponent, NamedExoticComponent } from 'react';
 import { Base, NodeProps } from '../types';
-export declare const nodePropsEqual: <P extends Record<string, unknown> = {
-    hovered?: boolean;
-    dimmed?: Base.Dimmed;
-}>(prev: NodeProps<P>, next: NodeProps<P>) => boolean;
+export declare const nodePropsEqual: <P extends Record<string, unknown> = Base.NodeData>(prev: NodeProps<P>, next: NodeProps<P>) => boolean;
 export declare function customNode<P extends Record<string, unknown> = Base.NodeData>(Node: FunctionComponent<NodeProps<P>>): NamedExoticComponent<NodeProps<P>>;

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