@likec4/diagram 1.26.2 → 1.27.0

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

@@ -1,11 +1,13 @@
-import { jsx } from "react/jsx-runtime";
-import { Box, ActionIcon } from "@mantine/core";
-import { IconId } from "@tabler/icons-react";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
-import { stopPropagation } from "../../../utils/xyflow.js";
-import { actionIcon, container } from "./CompoundDetailsButton.css.js";
+import { jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { actionBtn } from '@likec4/styles/recipes';
+import { Box, ActionIcon } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { IconId } from '@tabler/icons-react';
+import { m } from 'framer-motion';
+import { stopPropagation } from '../../../utils/xyflow.js';
+import { compoundActionBtn } from './actionbtns.css.js';
+
 function CompoundDetailsButton({
   data: {
     hovered: isHovered = false
@@ -13,33 +15,62 @@ function CompoundDetailsButton({
   icon,
   onClick
 }) {
-  return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall, "details-button"), onClick: stopPropagation, children: /* @__PURE__ */ jsx(
-    ActionIcon,
+  const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0);
+  const isHoverDebounced = debounced[0] && isHovered;
+  return /* @__PURE__ */ jsx(
+    Box,
     {
-      component: m.div,
-      className: clsx("nodrag nopan", actionIcon),
-      initial: false,
-      style: {
-        originX: 0.45,
-        originY: 0.55
-      },
-      animate: isHovered ? {
-        scale: 1.2
-      } : {
-        scale: 1
-      },
-      whileHover: {
-        scale: 1.42
-      },
-      whileTap: { scale: 1.15 },
-      size: "md",
-      radius: "md",
-      onClick,
-      onDoubleClick: stopPropagation,
-      children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
+      className: cx(
+        css({
+          position: "absolute",
+          top: "[2px]",
+          right: "[2px]",
+          _smallZoom: {
+            display: "none"
+          }
+        }),
+        "details-button"
+      ),
+      onClick: stopPropagation,
+      children: /* @__PURE__ */ jsx(
+        m.div,
+        {
+          initial: false,
+          animate: {
+            scale: isHoverDebounced ? 1.2 : 1,
+            opacity: isHoverDebounced ? 1 : 0.6
+          },
+          whileHover: {
+            scale: 1.4
+          },
+          whileTap: { scale: 1 },
+          children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              className: cx(
+                "nodrag nopan",
+                compoundActionBtn({
+                  delay: isHovered && !isHoverDebounced
+                }),
+                css({
+                  _whenHovered: {
+                    opacity: 0.75
+                  },
+                  _hover: {
+                    opacity: 1
+                  }
+                }),
+                actionBtn({ variant: "transparent" })
+              ),
+              onClick,
+              onDoubleClick: stopPropagation,
+              children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
+            }
+          )
+        }
+      )
     }
-  ) });
+  );
 }
-export {
-  CompoundDetailsButton
-};
+
+export { CompoundDetailsButton };

package/dist/base/primitives/compound/CompoundNodeContainer.css.d.ts

@@ -1,7 +1,35 @@
-export declare const varCompoundOpacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const varBorderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const varBorderTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const varBorderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const container: string;
-export declare const compoundBorder: string;
-export declare const indicator: string;
+import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
+export declare const borderWidth: {
+    readonly var: "--_border-width";
+    readonly ref: "var(--_border-width, 2px)";
+};
+export declare const borderRadius: {
+    readonly var: "--_border-radius";
+    readonly ref: "var(--_border-radius, 4px)";
+};
+export declare const compoundOpacity: {
+    readonly var: "--_compound-opacity";
+    readonly ref: "var(--_compound-opacity, 1)";
+};
+export declare const borderOpacityPercent: {
+    readonly var: "--_border-opacity-percent";
+    readonly ref: "var(--_border-opacity-percent, 100%)";
+};
+export declare const compound: SlotRecipeRuntimeFn<"root" | "compoundBorder" | "indicatorSvg" | "indicatorRect", {
+    isTransparent: {
+        false: {
+            root: {
+                _before: {
+                    boxShadow: {
+                        _noReduceGraphics: "0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)";
+                        _whenSelected: "none";
+                        _whenPanning: "none !important";
+                    };
+                };
+            };
+        };
+        true: {
+            root: {};
+        };
+    };
+}>;

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

@@ -1,13 +1,132 @@
-/* empty css                                         */
-var varCompoundOpacity = "var(--_7cmew10)";
-var varBorderTransparency = "var(--_7cmew12)";
-var container = "_7cmew15";
-var compoundBorder = "_7cmew16";
-var indicator = "_7cmew1a";
-export {
-  compoundBorder,
-  container,
-  indicator,
-  varBorderTransparency,
-  varCompoundOpacity
+import { sva, css } from '@likec4/styles/css';
+
+const borderWidth = {
+  var: "--_border-width",
+  ref: "var(--_border-width, 2px)"
 };
+const borderRadius = {
+  var: "--_border-radius",
+  ref: "var(--_border-radius, 4px)"
+};
+const compoundOpacity = {
+  var: "--_compound-opacity",
+  ref: "var(--_compound-opacity, 1)"
+};
+const borderOpacityPercent = {
+  var: "--_border-opacity-percent",
+  ref: "var(--_border-opacity-percent, 100%)"
+};
+const root = css.raw({
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  padding: "0",
+  margin: "0",
+  border: "transparent",
+  pointerEvents: "none",
+  _before: {
+    borderRadius: borderRadius.ref,
+    content: '" "',
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    border: "transparent",
+    background: "likec4.palette.fill",
+    backgroundClip: "padding-box",
+    transitionDelay: ".075ms"
+  },
+  _noReduceGraphics: {
+    _before: {
+      transition: `all {durations.slow} {easings.inOut}`
+    },
+    "&[data-likec4-hovered='true']": {
+      _before: {
+        transitionDelay: ".2s",
+        transitionTimingFunction: "in"
+      }
+    }
+  },
+  "&:is([data-compound-transparent])": {
+    _before: {
+      opacity: compoundOpacity.ref,
+      borderWidth: `calc(${borderWidth.ref} - 1px)`
+    }
+  }
+});
+const compoundBorder = css.raw({
+  borderRadius: borderRadius.ref,
+  padding: "0",
+  margin: "0",
+  transition: `all 250ms {easings.inOut}`,
+  cursor: "default",
+  position: "absolute",
+  top: "0",
+  left: "0",
+  width: "100%",
+  height: "100%",
+  pointerEvents: "none",
+  background: "transparent",
+  borderStyle: "dashed",
+  borderWidth: `[${borderWidth.ref}]`,
+  borderColor: `[color-mix(in srgb, {colors.likec4.palette.stroke} ${borderOpacityPercent.ref}, transparent)]`
+});
+const indicatorSvg = css.raw({
+  position: "absolute",
+  top: "0",
+  left: "0",
+  width: "100%",
+  height: "100%",
+  pointerEvents: "none",
+  overflow: "visible",
+  visibility: "hidden",
+  _whenFocused: {
+    visibility: "visible"
+  },
+  _whenSelected: {
+    visibility: "visible"
+  },
+  _whenPanning: {
+    display: "none"
+  }
+});
+const indicatorRect = css.raw({
+  stroke: `[color-mix(in srgb, {colors.likec4.palette.stroke} 60%, {colors.likec4.palette.hiContrast})]`,
+  strokeWidth: "4",
+  fill: "[none]",
+  animationStyle: "indicator",
+  _light: {
+    stroke: `[color-mix(in srgb, {colors.likec4.palette.stroke} 80%, {colors.likec4.palette.hiContrast})]`
+  }
+});
+const compound = sva({
+  slots: ["root", "compoundBorder", "indicatorSvg", "indicatorRect"],
+  className: "compound-container",
+  base: {
+    root,
+    compoundBorder,
+    indicatorSvg,
+    indicatorRect
+  },
+  variants: {
+    isTransparent: {
+      false: {
+        root: {
+          _before: {
+            boxShadow: {
+              _noReduceGraphics: "0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)",
+              _whenSelected: "none",
+              _whenPanning: "none !important"
+            }
+          }
+        }
+      },
+      true: {
+        root: {}
+      }
+    }
+  }
+});
+
+export { borderOpacityPercent, borderRadius, borderWidth, compound, compoundOpacity };

package/dist/base/primitives/compound/CompoundNodeContainer.d.ts

@@ -1,26 +1,10 @@
 import { DiagramNode } from '@likec4/core';
-import { BoxProps, PolymorphicComponentProps } from '@mantine/core';
-import { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+import { PropsWithChildren } from 'react';
 import { NodeProps } from '../../types';
 type RequiredData = Pick<DiagramNode, 'color' | 'depth' | 'shape' | 'style'>;
-type CompoundNodeContainerProps = BoxProps & PropsWithChildren<{
+type CompoundNodeContainerProps = Omit<HTMLMotionProps<'div'>, 'children'> & PropsWithChildren<{
     nodeProps: NodeProps<RequiredData>;
 }>;
-export declare const CompoundNodeContainer: (<C = "div">(props: PolymorphicComponentProps<C, CompoundNodeContainerProps>) => React.ReactElement) & Omit< FunctionComponent<(BoxProps & {
-    nodeProps: NodeProps<RequiredData>;
-} & {
-    children?: ReactNode | undefined;
-} & {
-    component?: any;
-} & Omit<Omit<any, "ref">, "children" | "component" | keyof BoxProps | "nodeProps"> & {
-    ref?: any;
-    renderRoot?: (props: any) => any;
-}) | (BoxProps & {
-    nodeProps: NodeProps<RequiredData>;
-} & {
-    children?: ReactNode | undefined;
-} & {
-    component: React.ElementType;
-    renderRoot?: (props: Record<string, any>) => any;
-})>, never> & Record<string, never>;
+export declare function CompoundNodeContainer({ nodeProps: { selected: isSelected, data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, children, style, ...rest }: CompoundNodeContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,99 +1,101 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { createPolymorphicComponent, Box } from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { forwardRef } from "react";
-import { isNumber, clamp } from "remeda";
-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) {
-    return matches[1];
-  }
-  return variable;
-}
-const opacityVar = getVarName(varCompoundOpacity);
-const borderTransparencyVar = getVarName(varBorderTransparency);
-const CompoundNodeContainer = createPolymorphicComponent(
-  forwardRef(({
-    nodeProps: {
-      selected: isSelected = false,
-      data: {
-        hovered: isHovered = false,
-        dimmed: isDimmed = false,
-        ...data
-      }
-    },
-    children,
-    style,
-    ...rest
-  }, ref) => {
-    const isReducedGraphics = useIsReducedGraphics();
-    const isTransparent = isNumber(data.style.opacity) && data.style.opacity < 100;
-    let _opacity = clamp((data.style.opacity ?? 100) / 100, {
-      min: 0,
-      max: 1
-    });
-    if (isTransparent && isHovered && !isReducedGraphics) {
-      _opacity = Math.min(_opacity + 0.11, 1);
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { m } from 'framer-motion';
+import 'react';
+import { isNumber, clamp } from 'remeda';
+import { compound, borderOpacityPercent, borderRadius, borderWidth, compoundOpacity } from './CompoundNodeContainer.css.js';
+import { useIsReducedGraphics } from '../../../context/ReduceGraphics.js';
+
+function CompoundNodeContainer({
+  nodeProps: {
+    selected: isSelected = false,
+    data: {
+      hovered: isHovered = false,
+      dimmed: isDimmed = false,
+      ...data
     }
-    const [opacity] = useDebouncedValue(Math.round(_opacity * 100) / 100, isHovered ? 200 : 50);
-    const MAX_TRANSPARENCY = 65;
-    const borderTransparency = clamp(MAX_TRANSPARENCY - 0.8 * opacity * MAX_TRANSPARENCY, {
-      min: 0,
-      max: MAX_TRANSPARENCY
-    });
-    return /* @__PURE__ */ jsxs(
-      Box,
-      {
-        ref,
-        component: m.div,
-        className: clsx([
-          container,
-          "likec4-compound-node"
-        ]),
-        initial: false,
-        "data-hovered": isHovered,
-        "data-likec4-color": data.color,
-        "data-compound-depth": data.depth ?? 1,
-        "data-compound-transparent": isTransparent,
-        "data-likec4-dimmed": isDimmed,
-        "data-likec4-shape": data.shape,
-        style: {
-          ...style,
-          [opacityVar]: opacity,
-          [borderTransparencyVar]: `${borderTransparency}%`
-        },
-        ...rest,
-        children: [
-          isTransparent && !isSelected && data.style.border !== "none" && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: compoundBorder,
-              style: {
-                borderStyle: data.style.border ?? "dashed"
-              }
-            }
-          ),
-          isSelected && /* @__PURE__ */ jsx("svg", { className: indicator, children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              x: 0,
-              y: 0,
-              width: "100%",
-              height: "100%",
-              rx: 6
+  },
+  children,
+  style,
+  ...rest
+}) {
+  const isReducedGraphics = useIsReducedGraphics();
+  const isTransparent = isNumber(data.style.opacity) && data.style.opacity < 99;
+  let opacity = clamp((data.style.opacity ?? 100) / 100, {
+    min: 0,
+    max: 1
+  });
+  if (isTransparent && isHovered && !isReducedGraphics) {
+    opacity = Math.min(opacity + 0.08, 1);
+  }
+  const MIN_OPACITY = 65;
+  const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * opacity, {
+    min: 0,
+    max: 100 - MIN_OPACITY
+  });
+  const classes = compound({
+    isTransparent
+  });
+  const depth = clamp(data.depth ?? 1, {
+    min: 1,
+    max: 5
+  });
+  return /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      className: cx(
+        css({
+          likec4Palette: `${data.color}.${depth}`
+        }),
+        classes.root,
+        "likec4-compound-node"
+      ),
+      initial: false,
+      "data-likec4-hovered": isHovered,
+      "data-likec4-color": data.color,
+      "data-compound-depth": depth,
+      "data-likec4-shape": data.shape,
+      ...isTransparent && {
+        "data-compound-transparent": true,
+        "data-compound-title-inverse": opacity < 0.5
+      },
+      ...isDimmed !== false && {
+        "likec4-dimmed": isDimmed
+      },
+      style: {
+        ...style,
+        // @ts-expect-error
+        [compoundOpacity.var]: opacity,
+        [borderWidth.var]: `3px`,
+        [borderRadius.var]: `6px`,
+        [borderOpacityPercent.var]: `${borderOpacity}%`
+      },
+      ...rest,
+      children: [
+        isTransparent && data.style.border !== "none" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classes.compoundBorder,
+            style: {
+              borderStyle: data.style.border ?? "dashed"
             }
-          ) }),
-          children
-        ]
-      }
-    );
-  })
-);
-CompoundNodeContainer.displayName = "CompoundNodeContainer";
-export {
-  CompoundNodeContainer
-};
+          }
+        ),
+        /* @__PURE__ */ jsx("svg", { className: classes.indicatorSvg, children: /* @__PURE__ */ jsx(
+          "rect",
+          {
+            className: classes.indicatorRect,
+            x: 0,
+            y: 0,
+            width: "100%",
+            height: "100%",
+            rx: 6
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+}
+
+export { CompoundNodeContainer };

package/dist/base/primitives/compound/CompoundTitle.d.ts

@@ -1,6 +1,6 @@
 import { DiagramNode } from '@likec4/core';
 import { NodeProps } from '../../types';
-type Data = Pick<DiagramNode, 'color' | 'title' | 'icon'>;
+type Data = Pick<DiagramNode, 'color' | 'title' | 'icon' | 'style'>;
 type CompoundTitleProps = NodeProps<Data>;
 export declare function CompoundTitle({ id, data }: CompoundTitleProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,8 +1,71 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Box, Text } from "@mantine/core";
-import clsx from "clsx";
-import { title, compoundTitle, icon } from "./CompoundTitle.css.js";
-import { IconRenderer } from "../../../context/IconRenderer.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { Box, Text } from '@mantine/core';
+import { IconRenderer } from '../../../context/IconRenderer.js';
+
+const titleContainer = css({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  left: "14px",
+  top: "4px",
+  right: "30px",
+  width: "auto",
+  minHeight: "30px",
+  [`:where(.react-flow__node.draggable) &`]: {
+    pointerEvents: "all",
+    cursor: "grab"
+  },
+  [`.likec4-compound-node:has(.compound-action) &`]: {
+    paddingLeft: "22px"
+  }
+});
+const titleText = css({
+  flex: "1",
+  fontFamily: "likec4.compound",
+  fontWeight: 600,
+  fontSize: "15px",
+  textTransform: "uppercase",
+  letterSpacing: "0.2px",
+  color: "likec4.palette.loContrast",
+  "[data-compound-title-inverse] &": {
+    color: {
+      base: "[color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]",
+      _light: "likec4.palette.stroke"
+    }
+  }
+});
+const iconSize = "20px";
+const cssIcon = css({
+  flex: `0 0 ${iconSize}`,
+  height: `${iconSize}`,
+  width: `${iconSize}`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  mixBlendMode: {
+    base: "hard-light",
+    _reduceGraphicsOnPan: "normal"
+  },
+  [`& svg, & img`]: {
+    width: "100%",
+    height: "auto",
+    maxHeight: "100%",
+    pointerEvents: "none",
+    filter: {
+      base: [
+        "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
+        "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
+        "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
+      ],
+      _reduceGraphicsOnPan: "none"
+    }
+  },
+  [`& img`]: {
+    objectFit: "contain"
+  }
+});
 function CompoundTitle({ id, data }) {
   const elementIcon = IconRenderer({
     element: {
@@ -10,22 +73,21 @@ function CompoundTitle({ id, data }) {
       title: data.title,
       icon: data.icon
     },
-    className: icon
+    className: cssIcon
   });
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: clsx(
-        compoundTitle,
+      className: cx(
+        titleContainer,
         "likec4-compound-title"
       ),
       children: [
         elementIcon,
-        /* @__PURE__ */ jsx(Text, { className: title, truncate: "end", children: data.title })
+        /* @__PURE__ */ jsx(Text, { className: titleText, truncate: "end", children: data.title })
       ]
     }
   );
 }
-export {
-  CompoundTitle
-};
+
+export { CompoundTitle };

package/dist/base/primitives/compound/actionbtns.css.d.ts

@@ -0,0 +1,11 @@
+import { RecipeRuntimeFn } from '@likec4/styles/types';
+export declare const compoundActionBtn: RecipeRuntimeFn<{
+    delay: {
+        true: {
+            transitionDelay: {
+                base: "0.2s";
+                _hover: "0s";
+            };
+        };
+    };
+}>;