@likec4/diagram 1.24.0 → 1.25.0

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 { edgeVars, dimmed } from "./edge.css.js";
+import { edgeContainer } from "./edge.css.js";
 function EdgeContainer({
   className,
+  component = "g",
   data: {
     hovered: isHovered = false,
     active: isActive = false,
@@ -12,23 +14,25 @@ function EdgeContainer({
   },
   children
 }) {
-  return /* @__PURE__ */ jsx(
-    "g",
-    {
-      className: clsx(
-        edgeVars,
-        isDimmed && dimmed,
-        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,
-      "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.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,9 @@
 /* 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 +11,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

@@ -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, edgeVars, edgeLabelContainer, dimmed } 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: {
@@ -21,7 +22,7 @@ const EdgeLabel = createPolymorphicComponent(
         technology,
         hovered: isHovered = false,
         active: isActive = false,
-        dimmed: dimmed$1 = false,
+        dimmed: isDimmed = false,
         labelBBox,
         ...data
       }
@@ -48,26 +49,22 @@ 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),
-          // ...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
         }

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,12 @@
 /* empty css                                        */
 /* empty css                        */
-var edgeVars = "nrg7w91";
-var dimmed = "nrg7w92";
+var edgeContainer = "nrg7w92 nrg7w91";
 var edgePathBg = "nrg7w93";
 var markerContext = "nrg7w94";
 var cssEdgePath = "nrg7w96";
 export {
   cssEdgePath,
-  dimmed,
+  edgeContainer,
   edgePathBg,
-  edgeVars,
   markerContext
 };

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

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

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,9 +1,8 @@
 /* empty css                                        */
+/* empty css                                        */
 var container = "_1jvuy7m0";
-var actionIconWrapper = "_1jvuy7m1";
 var actionIcon = "_1jvuy7m2";
 export {
   actionIcon,
-  actionIconWrapper,
   container
 };

package/dist/base/primitives/element/ElementDetailsButton.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 "./ElementDetailsButton.css.js";
+import { actionIcon, container } from "./ElementDetailsButton.css.js";
 function ElementDetailsButton({
   selected = false,
   data: {
@@ -15,10 +15,10 @@ function ElementDetailsButton({
   onClick
 }) {
   return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall, "details-button"), children: /* @__PURE__ */ jsx(
-    Box,
+    ActionIcon,
     {
-      className: clsx("nodrag nopan", actionIconWrapper),
-      component: m.div,
+      className: clsx("nodrag nopan", actionIcon),
+      component: m.button,
       initial: false,
       style: {
         originX: 0.45,
@@ -36,17 +36,11 @@ function ElementDetailsButton({
         opacity: 1
       },
       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/element/ElementNodeContainer.css.js

@@ -1,3 +1,4 @@
+import "./vars.css.ts.vanilla.css.js";
 /* empty css                                        */
 var container = "_1smoows1";
 export {

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

@@ -1,9 +1,10 @@
 /* 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.d.ts

@@ -1,4 +1,6 @@
+import { iconSize, paddingSize, textSize } from './vars.css';
 export declare const hasIcon: string;
+export { iconSize, paddingSize, textSize };
 export declare const title: string;
 export declare const description: string;
 export declare const technology: string;

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

@@ -1,7 +1,6 @@
-/* empty css                                        */
-/* empty css                          */
 /* empty css                                */
 var hasIcon = "fo05290";
+var iconSize = "var(--likec4-icon-size)";
 var title = "fo05292";
 var description = "fo05293";
 var technology = "fo05294";
@@ -14,6 +13,7 @@ export {
   elementIcon,
   elementTextData,
   hasIcon,
+  iconSize,
   technology,
   title
 };

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

@@ -1,15 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import "@likec4/core";
 import { Box, Text } from "@mantine/core";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
 import clsx from "clsx";
 import { isNumber, isTruthy } from "remeda";
 import { IconRenderer } from "../../../context/IconRenderer.js";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
+import { getVarName } from "../../../utils/css.js";
 import { nodeSizes } from "./ElementNodeContainer.js";
-import { elementIcon, title, technology, description, elementTextData, elementDataContainer, hasIcon } from "./ElementTitle.css.js";
-import { iconSize } from "./styles.css.js";
-function ElementTitle({ id, data, iconSize: iconSize$1 }) {
+import { title, technology, description, elementTextData, elementDataContainer, hasIcon, elementIcon, iconSize } from "./ElementTitle.css.js";
+const varIconSize = getVarName(iconSize);
+function ElementTitle({ id, data, iconSize: iconSize2 }) {
   const elementIcon$1 = IconRenderer({
     element: {
       id,
@@ -30,9 +30,9 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
         "likec4-element"
       ),
       style: {
-        ...isNumber(iconSize$1) && assignInlineVars({
-          [iconSize]: `${iconSize$1}px`
-        })
+        ...isNumber(iconSize2) && {
+          [varIconSize]: `${iconSize2}px`
+        }
       },
       children: [
         elementIcon$1,

package/dist/components/SearchControl.css.d.ts

@@ -1,2 +1,3 @@
 export declare const root: string;
+export declare const placeholder: string;
 export declare const shortcut: string;

package/dist/components/SearchControl.css.js

@@ -1,7 +1,9 @@
 /* empty css                                 */
 var root = "xmhqho2";
-var shortcut = "xmhqho3";
+var placeholder = "xmhqho3";
+var shortcut = "xmhqho4";
 export {
+  placeholder,
   root,
   shortcut
 };

package/dist/components/SearchControl.js

@@ -3,13 +3,13 @@ import { UnstyledButton, Group, rem, Text } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
 import { isMacOs } from "@xyflow/system";
 import clsx from "clsx";
-import { shortcut, root } from "./SearchControl.css.js";
+import { placeholder, shortcut, root } from "./SearchControl.css.js";
 function SearchControl({ className, ...others }) {
   const isMac = isMacOs();
   return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: clsx(root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
     /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(15), height: rem(15) }, stroke: 2 }),
-    /* @__PURE__ */ jsx(Text, { fz: "sm", fw: "500", pr: 50, children: "Search" }),
-    /* @__PURE__ */ jsx(Text, { fw: 700, className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
+    /* @__PURE__ */ jsx(Text, { component: "div", className: placeholder, children: "Search" }),
+    /* @__PURE__ */ jsx(Text, { component: "div", className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
   ] }) });
 }
 export {

package/dist/context/ControlsCustomLayout.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type ControlsCustomLayoutProps = {
+    burgerMenu: ReactNode;
+    navigationButtons: ReactNode;
+    search: ReactNode;
+    actionsGroup: ReactNode;
+    syncInProgressBadge: ReactNode;
+};
+export type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode;
+export declare const ControlsCustomLayoutProvider: ({ children, value }: {
+    value: ControlsCustomLayout | null;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useControlsCustomLayout: () => ControlsCustomLayout | null;

package/dist/context/ControlsCustomLayout.js

@@ -0,0 +1,10 @@
+import { createOptionalContext } from "@mantine/core";
+import "react";
+const [
+  ControlsCustomLayoutProvider,
+  useControlsCustomLayout
+] = createOptionalContext(null);
+export {
+  ControlsCustomLayoutProvider,
+  useControlsCustomLayout
+};

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

package/dist/context/RootContainer.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren, RefObject } from 'react';
-export declare function RootContainer({ className, children, }: PropsWithChildren<{
+export declare function RootContainer({ className, reduceGraphics, children, }: PropsWithChildren<{
     className?: string | undefined;
+    reduceGraphics?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;
 export declare function useRootContainerRef(): RefObject<HTMLDivElement | null>;
 /**

package/dist/context/RootContainer.js

@@ -2,14 +2,25 @@ import { jsx } from "react/jsx-runtime";
 import { Box } from "@mantine/core";
 import clsx from "clsx";
 import { useRef, createContext, createRef, useContext } from "react";
-import { rootClassName } from "../globals.css.js";
+import { rootClassName } from "../theme-vars.js";
 const RootContainerContext = createContext(createRef());
 function RootContainer({
   className,
+  reduceGraphics = false,
   children
 }) {
   const ref = useRef(null);
-  return /* @__PURE__ */ jsx(Box, { className: clsx(rootClassName, className), ref, children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children }) });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: clsx(rootClassName, className),
+      ref,
+      ...reduceGraphics && {
+        ["data-likec4-reduced-graphics"]: true
+      },
+      children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children })
+    }
+  );
 }
 function useRootContainer() {
   return useContext(RootContainerContext).current;