@likec4/diagram 1.26.2 → 1.27.0

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

@@ -0,0 +1,32 @@
+import { cva } from '@likec4/styles/css';
+
+const compoundActionBtn = cva({
+  base: {
+    transitionDuration: "normal",
+    "[data-compound-title-inverse] &": {
+      _dark: {
+        "--actionbtn-color": "color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})"
+      },
+      _light: {
+        "--actionbtn-color": "{colors.likec4.palette.stroke}",
+        "--actionbtn-color-hovered": "{colors.likec4.palette.stroke}",
+        "--actionbtn-color-hovered-btn": "{colors.likec4.palette.hiContrast}",
+        "--actionbtn-bg-hovered": `{colors.likec4.palette.fill/50}`,
+        "--actionbtn-bg-hovered-btn": `{colors.likec4.palette.fill}`
+      }
+    }
+  },
+  variants: {
+    delay: {
+      true: {
+        // Debounce CSS transition
+        transitionDelay: {
+          base: "0.2s",
+          _hover: "0s"
+        }
+      }
+    }
+  }
+});
+
+export { compoundActionBtn };

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

@@ -3,14 +3,14 @@ import { Base, EdgeProps } from '../types';
 import { Position } from '@xyflow/system';
 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;
-    animated?: boolean;
-    deletable?: boolean;
     selectable?: boolean;
+    deletable?: boolean;
+    style?: CSSProperties;
+    source: string;
+    target: string;
+    animated?: boolean;
     sourceX: number;
     sourceY: number;
     targetX: number;

package/dist/base/primitives/customEdge.js

@@ -1,13 +1,12 @@
-import { deepEqual } from "fast-equals";
-import { memo } from "react";
+import { deepEqual } from 'fast-equals';
+import { memo } from 'react';
+
 const isSame = (a, b) => {
   return Math.abs(a - b) < 2.5;
 };
-const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data) && deepEqual(prev.style, next.style);
+const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
 function customEdge(Edge) {
   return memo(Edge, edgePropsEqual);
 }
-export {
-  customEdge,
-  edgePropsEqual
-};
+
+export { customEdge, edgePropsEqual };

package/dist/base/primitives/customNode.js

@@ -1,10 +1,9 @@
-import { deepEqual } from "fast-equals";
-import { memo } from "react";
+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 ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
 function customNode(Node) {
   return memo(Node, nodePropsEqual);
 }
-export {
-  customNode,
-  nodePropsEqual
-};
+
+export { customNode, nodePropsEqual };

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

@@ -1,16 +1,15 @@
-import { jsx } from "react/jsx-runtime";
-import { ActionIcon } from "@mantine/core";
-import { IconZoomScan } from "@tabler/icons-react";
-import clsx from "clsx";
-import { stopPropagation } from "../../../utils/xyflow.js";
-import { actionBtn } from "./EdgeLabel.css.js";
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { ActionIcon } from '@mantine/core';
+import { IconZoomScan } from '@tabler/icons-react';
+import { stopPropagation } from '../../../utils/xyflow.js';
+import { actionBtn } from './edge.css.js';
+
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      className: clsx("nodrag nopan", actionBtn),
-      size: "sm",
-      radius: "sm",
+      className: cx("nodrag nopan", actionBtn),
       onPointerDownCapture: stopPropagation,
       onClick,
       role: "button",
@@ -19,6 +18,5 @@ function EdgeActionButton({ icon, onClick }) {
     }
   );
 }
-export {
-  EdgeActionButton
-};
+
+export { EdgeActionButton };

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

@@ -7,5 +7,5 @@ type EdgeContainerProps = PropsWithChildren<EdgeProps<Data> & {
     component?: 'g' | 'svg' | undefined;
     className?: string | undefined;
 }>;
-export declare function EdgeContainer({ className, component, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, children, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function EdgeContainer({ className, component, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, children, style, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -1,12 +1,26 @@
-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})`;
-export declare const varTranslate: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const edgeLabelContainer: string;
-export declare const edgeLabel: string;
-export declare const secondColumn: string;
-export declare const edgeLabelText: string;
-export declare const edgeLabelTechnology: string;
+import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
 export declare const edgeNoteCloseButton: string;
 export declare const edgeNoteText: string;
-export declare const actionBtn: string;
+export declare const translate: {
+    readonly var: "--edge-translate";
+    readonly ref: "var(--edge-translate)";
+};
+export declare const edgeLabelContainer: string;
+export declare const labelsva: SlotRecipeRuntimeFn<"root" | "stepNumber" | "labelContents" | "labelText" | "labelTechnology", {
+    isStepEdge: {
+        false: {};
+        true: {
+            root: {
+                flexDirection: "row";
+                gap: "4px";
+                padding: "0px";
+            };
+            labelContents: {
+                padding: "2px 5px 4px 0px";
+            };
+            labelText: {
+                padding: "2px 6px 4px 0px";
+            };
+        };
+    };
+}>;

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

@@ -1,21 +1,134 @@
-/* empty css                                        */
-/* empty css                        */
-/* empty css                             */
-var stepEdgeNumber = "_1fqbh3j0";
-var varTranslate = "var(--_1fqbh3j3)";
-var edgeLabelContainer = "_1fqbh3j4 nrg7w91";
-var edgeLabel = "_1fqbh3j5";
-var secondColumn = "_1fqbh3j6";
-var edgeLabelText = "_1fqbh3j7";
-var edgeLabelTechnology = "_1fqbh3j8";
-var actionBtn = "_1fqbh3jb";
-export {
-  actionBtn,
-  edgeLabel,
-  edgeLabelContainer,
-  edgeLabelTechnology,
-  edgeLabelText,
-  secondColumn,
-  stepEdgeNumber,
-  varTranslate
+import { css, sva } from '@likec4/styles/css';
+
+const labelBorderRadius = "4px";
+css({
+  position: "absolute",
+  top: 4,
+  right: 4
+});
+css({
+  userSelect: "all",
+  textAlign: "left",
+  whiteSpaceCollapse: "preserve-breaks",
+  textWrap: "pretty",
+  lineHeight: "1.25",
+  "--text-fz": "{fontSizes.sm}",
+  md: {
+    "--text-fz": "{fontSizes.md}"
+  }
+});
+const translate = {
+  var: "--edge-translate",
+  ref: `var(--edge-translate)`
 };
+const edgeLabelContainer = css({
+  top: 0,
+  left: 0,
+  position: "absolute",
+  pointerEvents: "all",
+  cursor: "pointer",
+  width: "auto",
+  height: "auto",
+  background: "[var(--xy-edge-label-background-color)]",
+  color: "[var(--xy-edge-label-color)]",
+  border: "0px solid transparent",
+  borderRadius: labelBorderRadius,
+  transform: `${translate.ref}`,
+  transition: "fast",
+  "&:is([data-likec4-hovered='true'])": {
+    transition: `all 190ms {easings.inOut}`,
+    transform: `var(--edge-translate, translate(0px, 0px)) scale(1.12)`,
+    transitionDelay: "100ms"
+  },
+  _noReduceGraphics: {
+    mixBlendMode: {
+      base: "plus-lighter",
+      _light: "screen"
+    }
+  },
+  _smallZoom: {
+    display: "none"
+  },
+  _reduceGraphicsOnPan: {
+    display: "none"
+  },
+  _whenPanning: {
+    mixBlendMode: "normal"
+  }
+});
+const labelsva = sva({
+  slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
+  base: {
+    root: {
+      fontFamily: "likec4.relation",
+      padding: "3px 5px 5px 5px",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "max-content",
+      maxWidth: "100%",
+      gap: "4px"
+    },
+    stepNumber: {
+      alignSelf: "stretch",
+      flex: "0 0 auto",
+      fontWeight: 600,
+      fontSize: "14px",
+      lineHeight: "1",
+      padding: "5px 5px",
+      textAlign: "center",
+      minWidth: "22px",
+      borderTopLeftRadius: labelBorderRadius,
+      borderBottomLeftRadius: labelBorderRadius,
+      background: `[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]`,
+      fontVariantNumeric: "tabular-nums",
+      // _dark: {
+      [':where([data-likec4-color="gray"]) &']: {
+        _dark: {
+          background: `[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]`
+        }
+      }
+    },
+    labelContents: {
+      display: "contents",
+      _empty: {
+        display: "none !important"
+      }
+    },
+    labelText: {
+      whiteSpaceCollapse: "preserve-breaks",
+      fontSize: "14px",
+      lineHeight: "1.185"
+    },
+    labelTechnology: {
+      textAlign: "center",
+      whiteSpaceCollapse: "preserve-breaks",
+      fontSize: "11px",
+      lineHeight: "1",
+      opacity: 0.75
+    }
+  },
+  variants: {
+    isStepEdge: {
+      false: {},
+      true: {
+        root: {
+          flexDirection: "row",
+          gap: "4px",
+          padding: "0px"
+        },
+        labelContents: {
+          padding: "2px 5px 4px 0px"
+        },
+        labelText: {
+          padding: "2px 6px 4px 0px"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    isStepEdge: false
+  }
+});
+
+export { edgeLabelContainer, labelsva, translate };

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

@@ -1,51 +1,11 @@
 import { DiagramEdge } from '@likec4/core';
-import { BoxProps, PolymorphicComponentProps } from '@mantine/core';
-import { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
+import { BoxProps } from '@mantine/core';
+import { PropsWithChildren } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
 import { EdgeProps } from '../../types';
-type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology' | 'labelBBox' | 'color'>>;
+type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology'>>;
 type EdgeLabelProps = PropsWithChildren<BoxProps & {
-    /**
-     * label position with optional translate
-     */
-    labelPosition?: {
-        x?: number | undefined;
-        y?: number | undefined;
-        translate?: string | undefined;
-    } | undefined;
     edgeProps: EdgeProps<Data>;
 }>;
-export declare const EdgeLabel: (<C = "div">(props: PolymorphicComponentProps<C, EdgeLabelProps>) => React.ReactElement) & Omit< FunctionComponent<(BoxProps & {
-    /**
-     * label position with optional translate
-     */
-    labelPosition?: {
-        x?: number | undefined;
-        y?: number | undefined;
-        translate?: string | undefined;
-    } | undefined;
-    edgeProps: EdgeProps<Data>;
-} & {
-    children?: ReactNode | undefined;
-} & {
-    component?: any;
-} & Omit<Omit<any, "ref">, "children" | "component" | keyof BoxProps | "labelPosition" | "edgeProps"> & {
-    ref?: any;
-    renderRoot?: (props: any) => any;
-}) | (BoxProps & {
-    /**
-     * label position with optional translate
-     */
-    labelPosition?: {
-        x?: number | undefined;
-        y?: number | undefined;
-        translate?: string | undefined;
-    } | undefined;
-    edgeProps: EdgeProps<Data>;
-} & {
-    children?: ReactNode | undefined;
-} & {
-    component: React.ElementType;
-    renderRoot?: (props: Record<string, any>) => any;
-})>, never> & Record<string, never>;
+export declare function EdgeLabel({ edgeProps: { id, data: { label, technology, }, }, className, style, children, ...rest }: EdgeLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,89 +1,36 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { isStepEdgeId, extractStep } from "@likec4/core";
-import { createPolymorphicComponent, Box, Text } from "@mantine/core";
-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, 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: {
-      id,
-      data: {
-        technology,
-        hovered: isHovered = false,
-        active: isActive = false,
-        dimmed: isDimmed = false,
-        labelBBox,
-        ...data
-      }
-    },
-    labelPosition: labelXY,
-    className,
-    style,
-    children,
-    ...rest
-  }, ref) => {
-    const isZoomTooSmall = useIsZoomTooSmall();
-    const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
-    let zIndex = ZIndexes.Edge;
-    if (isHovered || isActive) {
-      zIndex = ZIndexes.Element + 1;
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isStepEdgeId, extractStep } from '@likec4/core';
+import { cx } from '@likec4/styles/css';
+import { Box, Text } from '@mantine/core';
+import 'react';
+import { isTruthy } from 'remeda';
+import { labelsva } from './EdgeLabel.css.js';
+
+function EdgeLabel({
+  edgeProps: {
+    id,
+    data: {
+      label,
+      technology
     }
-    let labelX = (labelXY == null ? void 0 : labelXY.x) ?? (labelBBox == null ? void 0 : labelBBox.x), labelY = (labelXY == null ? void 0 : labelXY.y) ?? (labelBBox == null ? void 0 : labelBBox.y);
-    if (labelX === void 0 || labelY === void 0 || isZoomTooSmall) {
-      return null;
-    }
-    const translate = labelXY == null ? void 0 : labelXY.translate;
-    return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
-      Box,
-      {
-        className: clsx(
-          "nodrag nopan",
-          edgeLabelContainer,
-          className
-        ),
-        "data-likec4-color": data.color ?? "gray",
-        "data-edge-active": isActive,
-        "data-edge-animated": isActive,
-        "data-edge-hovered": isHovered,
-        ...isDimmed !== false && {
-          "data-edge-dimmed": isDimmed
-        },
-        style: {
-          top: toCssVarValue(labelY),
-          left: toCssVarValue(labelX),
-          ...translate && {
-            [varTranslate]: translate
-          },
-          ...labelBBox && {
-            maxWidth: labelBBox.width + 18
-          },
-          zIndex,
-          ...style
-        },
-        children: /* @__PURE__ */ jsxs(Box, { ref, className: edgeLabel, ...rest, children: [
-          stepNum !== null && /* @__PURE__ */ jsx(Box, { className: stepEdgeNumber, children: stepNum }),
-          /* @__PURE__ */ jsxs(Box, { className: secondColumn, children: [
-            isTruthy(data.label) && /* @__PURE__ */ jsx(Text, { component: "div", className: edgeLabelText, lineClamp: 5, children: data.label }),
-            isTruthy(technology) && /* @__PURE__ */ jsx(Text, { component: "div", className: edgeLabelTechnology, children: "[ " + technology + " ]" }),
-            children
-          ] })
-        ] })
-      }
-    ) });
-  })
-);
-EdgeLabel.displayName = "EdgeLabel";
-export {
-  EdgeLabel
-};
+  },
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
+  const classes = labelsva({
+    isStepEdge: stepNum !== null
+  });
+  return /* @__PURE__ */ jsxs(Box, { className: cx(classes.root, className), ...rest, children: [
+    stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes.stepNumber, children: stepNum }),
+    /* @__PURE__ */ jsxs(Box, { className: classes.labelContents, children: [
+      isTruthy(label) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes.labelText, lineClamp: 5, children: label }),
+      isTruthy(technology) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes.labelTechnology, children: "[ " + technology + " ]" }),
+      children
+    ] })
+  ] });
+}
+
+export { EdgeLabel };

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

@@ -0,0 +1,18 @@
+import { DiagramEdge } from '@likec4/core';
+import { HTMLAttributes } from 'react';
+import { UndefinedOnPartialDeep } from 'type-fest';
+import { EdgeProps } from '../../types';
+type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'labelBBox' | 'color'>>;
+type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * label position with optional translate
+     */
+    labelPosition?: {
+        x?: number | undefined;
+        y?: number | undefined;
+        translate?: string | undefined;
+    } | undefined;
+    edgeProps: EdgeProps<Data>;
+};
+export declare function EdgeLabelContainer({ edgeProps: { id, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, }, labelPosition: labelXY, className, style, children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};