@likec4/diagram 1.24.1 → 1.25.1

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.d.ts

@@ -7,9 +7,9 @@ export declare const EdgePath: ForwardRefExoticComponent<{
     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/edge/EdgePath.js

@@ -3,20 +3,25 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { markerContext, edgePathBg, cssEdgePath } from "./edge.css.js";
 import { arrowTypeToMarker, EdgeMarkers } from "./EdgeMarkers.js";
+import { useIsReducedGraphics, useLooseReducedGraphics } from "../../../context/ReduceGraphics.js";
 const EdgePath = forwardRef(({
   id,
   data: {
     line,
     dir,
     tail,
-    head
+    head,
+    ...data
   },
   strokeWidth,
   svgPath,
   style,
+  animated = false,
   interactionWidth,
   onEdgePointerDown
 }, svgPathRef) => {
+  const isReducedGraphics = useIsReducedGraphics();
+  const isLooseReduce = useLooseReducedGraphics();
   let markerStartName = arrowTypeToMarker(tail);
   let markerEndName = arrowTypeToMarker(head ?? "normal");
   if (dir === "back") {
@@ -32,8 +37,18 @@ const EdgePath = forwardRef(({
   } else if (isDashed) {
     strokeDasharray = "8,10";
   }
+  if (isLooseReduce) {
+    strokeDasharray = void 0;
+  }
+  const isAnimated = (animated || data.hovered || data.active) && !data.dimmed;
+  if (isLooseReduce && isAnimated) {
+    style = {
+      ...style,
+      animationName: "none"
+    };
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    !isLooseReduce && /* @__PURE__ */ jsx(
       "path",
       {
         className: clsx("react-flow__edge-interaction"),
@@ -48,7 +63,7 @@ const EdgePath = forwardRef(({
         MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }),
         MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })
       ] }),
-      /* @__PURE__ */ jsx(
+      !isReducedGraphics && /* @__PURE__ */ jsx(
         "path",
         {
           className: clsx("react-flow__edge-path", edgePathBg),
@@ -61,7 +76,11 @@ const EdgePath = forwardRef(({
         "path",
         {
           ref: svgPathRef,
-          className: clsx("react-flow__edge-path", cssEdgePath),
+          className: clsx(
+            "react-flow__edge-path",
+            "react-flow__edge-interaction",
+            cssEdgePath
+          ),
           d: svgPath,
           style,
           strokeWidth,

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

@@ -4,3 +4,4 @@ export declare const edgeContainer: string;
 export declare const edgePathBg: string;
 export declare const markerContext: string;
 export declare const cssEdgePath: string;
+export declare const looseReduce: string;

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

@@ -1,8 +1,7 @@
-/* empty css                                  */
 /* empty css                                        */
 /* empty css                        */
 var edgeContainer = "nrg7w92 nrg7w91";
-var edgePathBg = "nrg7w93 _2h8g8h4 _2h8g8h5";
+var edgePathBg = "nrg7w93";
 var markerContext = "nrg7w94";
 var cssEdgePath = "nrg7w96";
 export {

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

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

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

@@ -1,11 +1,8 @@
-/* empty css                                  */
 /* 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,5 +1,3 @@
-/* empty css                                  */
-/* empty css                                        */
 /* empty css                                        */
 var container = "_1smoows1";
 export {

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

@@ -4,7 +4,6 @@ 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,
@@ -43,7 +42,6 @@ const ElementNodeContainer = createPolymorphicComponent(
     children,
     ...rest
   }, ref) => {
-    const nonReducedGraphics = !useIsReducedGraphics();
     let scale = 1;
     switch (true) {
       case isHovered:
@@ -68,7 +66,7 @@ const ElementNodeContainer = createPolymorphicComponent(
           "likec4-element-node"
         ]),
         initial: false,
-        ...selectable && nonReducedGraphics && {
+        ...selectable && {
           animate: {
             scale
           },

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

@@ -1,5 +1,5 @@
-/* empty css                                  */
 /* empty css                                        */
+import "./vars.css.ts.vanilla.css.js";
 /* empty css                                        */
 /* empty css                                */
 var indicator = "_4zok2q2 _2h8g8h4";

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,9 +1,6 @@
-/* empty css                                  */
-/* empty css                                        */
-/* empty css                                        */
-/* empty css                          */
 /* empty css                                */
 var hasIcon = "fo05290";
+var iconSize = "var(--likec4-icon-size)";
 var title = "fo05292";
 var description = "fo05293";
 var technology = "fo05294";
@@ -16,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,9 +1,9 @@
-/* empty css                            */
-/* empty css                                  */
 /* 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/DiagramFeatures.js

@@ -1,8 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { useCustomCompareEffect } from "@react-hookz/web";
-import { useContext, createContext, useState } from "react";
+import { shallowEqual } from "fast-equals";
+import { useContext, createContext, useState, useEffect } from "react";
 import { mapToObj, pick, map } from "remeda";
-import { depsShallowEqual } from "../hooks/useUpdateEffect.js";
 const FeatureNames = [
   "Controls",
   "ReadOnly",
@@ -68,20 +67,22 @@ function DiagramFeatures({
   features,
   overrides
 }) {
-  const scope = useContext(DiagramFeaturesContext);
-  const [enabled, setFeatures] = useState(scope);
-  useCustomCompareEffect(
+  const outerScope = useContext(DiagramFeaturesContext);
+  const [scope, setScope] = useState(outerScope);
+  useEffect(
     () => {
-      setFeatures(validate({
-        ...scope,
-        ...features,
-        ...overrides
-      }));
+      setScope((current) => {
+        const next = validate({
+          ...outerScope,
+          ...features,
+          ...overrides
+        });
+        return shallowEqual(current, next) ? current : next;
+      });
     },
-    [scope, features, overrides],
-    depsShallowEqual
+    [outerScope, features, overrides]
   );
-  return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: enabled, children });
+  return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: scope, children });
 }
 DiagramFeatures.Overlays = ({ children }) => {
   return /* @__PURE__ */ jsx(

package/dist/context/ReduceGraphics.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+/**
+ * Hook to determine if reduced graphics mode is enabled.
+ */
+export declare function useIsReducedGraphics(): boolean;
+/**
+ * Reduce graphics when reduced mode is enabled and pan/zoom is active.
+ */
+export declare function useLooseReducedGraphics(): boolean;
+export declare function ReduceGraphicsContext({ reduceGraphics, children }: PropsWithChildren<{
+    reduceGraphics: boolean;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function ReduceGraphicsViewportListener(): null;

package/dist/context/ReduceGraphics.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { createSafeContext, createOptionalContext } from "@mantine/core";
+import { useTimeout } from "@mantine/hooks";
+import { useStore } from "@nanostores/react";
+import { useStoreApi } from "@xyflow/react";
+import { atom } from "nanostores";
+import { useRef, useMemo, useEffect } from "react";
+const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext();
+function useIsReducedGraphics() {
+  const isReduced = useReducedGraphics();
+  if (isReduced === null) {
+    console.warn("ReduceGraphicsMode is not provided");
+  }
+  return isReduced ?? false;
+}
+const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
+  "PanningAtomSafeCtx is not provided"
+);
+const [LooseReduceGraphicsAtomCtx, useLooseReduceGraphicsAtom] = createOptionalContext();
+const $defaultLooseReduceGraphics = atom(false);
+function useLooseReducedGraphics() {
+  const $isPanning = useLooseReduceGraphicsAtom() ?? $defaultLooseReduceGraphics;
+  return useStore($isPanning);
+}
+function ReduceGraphicsContext({ reduceGraphics, children }) {
+  const $isPanningRef = useRef(null);
+  if (!$isPanningRef.current) {
+    $isPanningRef.current = atom(reduceGraphics);
+  }
+  const looseReduceGraphics = useMemo(() => {
+    return reduceGraphics ? $isPanningRef.current : atom(false);
+  }, [reduceGraphics, $isPanningRef.current]);
+  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(LooseReduceGraphicsAtomCtx, { value: looseReduceGraphics, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx, { value: reduceGraphics, children }) }) });
+}
+function ReduceGraphicsViewportListener() {
+  const store = useStoreApi();
+  const $isPanning = usePanningAtom();
+  const notPanning = useTimeout(() => {
+    $isPanning.set(false);
+  }, 150);
+  useEffect(() => {
+    store.setState({
+      onViewportChangeStart: () => {
+        notPanning.clear();
+      },
+      onViewportChange: () => {
+        $isPanning.set(true);
+      },
+      onViewportChangeEnd: () => {
+        notPanning.start();
+      }
+    });
+  }, [$isPanning, store]);
+  return null;
+}
+export {
+  ReduceGraphicsContext,
+  ReduceGraphicsViewportListener,
+  useIsReducedGraphics,
+  useLooseReducedGraphics
+};

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,15 +2,14 @@ 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 { useIsReducedGraphics } from "../hooks/useIsReducedGraphics.js";
+import { rootClassName } from "../theme-vars.js";
 const RootContainerContext = createContext(createRef());
 function RootContainer({
   className,
+  reduceGraphics = false,
   children
 }) {
   const ref = useRef(null);
-  const reduceGraphics = useIsReducedGraphics();
   return /* @__PURE__ */ jsx(
     Box,
     {