@likec4/diagram 1.26.1 → 1.27.0

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

@@ -0,0 +1,91 @@
+import { jsx } from 'react/jsx-runtime';
+import '@likec4/core';
+import { cx, css } from '@likec4/styles/css';
+import { EdgeLabelRenderer } from '@xyflow/react';
+import 'react';
+import { isNumber } from 'remeda';
+import { ZIndexes } from '../../const.js';
+import { edgeVars } from './edge.css.js';
+import { translate, edgeLabelContainer } from './EdgeLabel.css.js';
+
+const toCssVarValue = (value) => {
+  if (value === void 0) return void 0;
+  return isNumber(value) ? `${value}px` : value;
+};
+function EdgeLabelContainer({
+  edgeProps: {
+    id,
+    data: {
+      hovered: isHovered = false,
+      active: isActive = false,
+      dimmed: isDimmed = false,
+      labelBBox,
+      color = "gray"
+    }
+  },
+  labelPosition: labelXY,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  let zIndex = ZIndexes.Edge;
+  if (isHovered || isActive) {
+    zIndex = ZIndexes.Element + 1;
+  }
+  let labelX = labelXY?.x ?? labelBBox?.x, labelY = labelXY?.y ?? labelBBox?.y;
+  if (labelX === void 0 || labelY === void 0) {
+    return null;
+  }
+  const translate$1 = labelXY?.translate;
+  return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        css({
+          likec4RelationPalette: color
+        }),
+        edgeVars,
+        edgeLabelContainer,
+        "nodrag nopan",
+        "likec4-edge-label-container",
+        className
+      ),
+      "data-likec4-hovered": isHovered,
+      "data-likec4-color": color,
+      "data-edge-active": isActive,
+      "data-edge-animated": isActive,
+      ...isDimmed !== false && {
+        "data-likec4-dimmed": isDimmed
+      },
+      style: {
+        top: toCssVarValue(labelY),
+        left: toCssVarValue(labelX),
+        ...translate$1 && {
+          [translate.var]: translate$1
+        },
+        ...labelBBox && {
+          maxWidth: labelBBox.width + 18
+        },
+        zIndex,
+        ...style
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: css({
+            display: "contents"
+          }),
+          ...isDimmed !== false && {
+            "data-likec4-dimmed": isDimmed
+          },
+          children
+        }
+      )
+    },
+    id
+  ) }, id);
+}
+
+export { EdgeLabelContainer };

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

@@ -1,5 +1,6 @@
-import { jsx } from "react/jsx-runtime";
-import { nonexhaustive } from "@likec4/core";
+import { jsx } from 'react/jsx-runtime';
+import { nonexhaustive } from '@likec4/core';
+
 const Open = (props) => /* @__PURE__ */ jsx(
   "marker",
   {
@@ -214,7 +215,5 @@ function arrowTypeToMarker(arrowType) {
       nonexhaustive(arrowType);
   }
 }
-export {
-  EdgeMarkers,
-  arrowTypeToMarker
-};
+
+export { EdgeMarkers, arrowTypeToMarker };

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

@@ -1,15 +1,15 @@
 import { PointerEventHandler, ForwardRefExoticComponent, CSSProperties, ReactNode, RefAttributes } from 'react';
 import { Position } from '@xyflow/system';
-import { RelationshipArrowType, RelationshipLineType } from '@likec4/core';
+import { RelationshipLineType, RelationshipArrowType } from '@likec4/core';
 export declare const EdgePath: ForwardRefExoticComponent<{
-    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;
@@ -34,9 +34,9 @@ export declare const EdgePath: ForwardRefExoticComponent<{
         dimmed?: import("../..").Base.Dimmed;
     } & {
         dir?: "forward" | "back" | "both" | undefined;
+        line?: RelationshipLineType | undefined;
         head?: RelationshipArrowType | undefined;
         tail?: RelationshipArrowType | undefined;
-        line?: RelationshipLineType | undefined;
     };
 } & {
     svgPath: string;

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

@@ -1,27 +1,23 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-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";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { forwardRef } from 'react';
+import { hideOnReducedGraphics, markerContext, edgePathBg, cssEdgePath } from './edge.css.js';
+import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers.js';
+
 const EdgePath = forwardRef(({
   id,
   data: {
     line,
     dir,
     tail,
-    head,
-    ...data
+    head
   },
   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") {
@@ -37,21 +33,11 @@ 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: [
-    !isLooseReduce && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       "path",
       {
-        className: clsx("react-flow__edge-interaction"),
+        className: cx("react-flow__edge-interaction", hideOnReducedGraphics),
         d: svgPath,
         fill: "none",
         stroke: "transparent",
@@ -63,10 +49,10 @@ const EdgePath = forwardRef(({
         MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }),
         MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })
       ] }),
-      !isReducedGraphics && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         "path",
         {
-          className: clsx("react-flow__edge-path", edgePathBg),
+          className: cx("react-flow__edge-path", edgePathBg),
           d: svgPath,
           style,
           strokeLinecap: "round"
@@ -76,10 +62,13 @@ const EdgePath = forwardRef(({
         "path",
         {
           ref: svgPathRef,
-          className: clsx(
+          className: cx(
             "react-flow__edge-path",
             "react-flow__edge-interaction",
             cssEdgePath
+            // css({
+            //   strokeDasharray: strokeDasharray,
+            // }),
           ),
           d: svgPath,
           style,
@@ -93,6 +82,5 @@ const EdgePath = forwardRef(({
     ] })
   ] });
 });
-export {
-  EdgePath
-};
+
+export { EdgePath };

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

@@ -1,7 +1,7 @@
-export declare const mixColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const edgeVars: string;
 export declare const edgeContainer: string;
+export declare const hideOnReducedGraphics: string;
 export declare const edgePathBg: string;
 export declare const markerContext: string;
 export declare const cssEdgePath: string;
-export declare const looseReduce: string;
+export declare const actionBtn: string;

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

@@ -1,12 +1,123 @@
-/* empty css                                        */
-/* empty css                        */
-var edgeContainer = "nrg7w92 nrg7w91";
-var edgePathBg = "nrg7w93";
-var markerContext = "nrg7w94";
-var cssEdgePath = "nrg7w96";
-export {
-  cssEdgePath,
-  edgeContainer,
-  edgePathBg,
-  markerContext
-};
+import { css } from '@likec4/styles/css';
+
+const isSelected = ".react-flow__edge.selected";
+const edgeStroke = "--xy-edge-stroke";
+const edgeStrokeSelected = "--xy-edge-stroke-selected";
+const labelColor = "--xy-edge-label-color";
+const labelBg = "--xy-edge-label-background-color";
+const edgeVars = css({
+  [edgeStroke]: "{colors.likec4.relation.stroke}",
+  [edgeStrokeSelected]: "{colors.likec4.relation.stroke.selected}",
+  [labelColor]: {
+    base: "{colors.likec4.relation.label}",
+    _light: `color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)`
+  },
+  [labelBg]: {
+    _light: `{colors.likec4.relation.label.bg/60}`,
+    _dark: `{colors.likec4.relation.label.bg/50}`
+  },
+  ["--xy-edge-stroke-width"]: "3",
+  "&:is([data-likec4-hovered='true'],[data-edge-active='true'])": {
+    [edgeStroke]: "{colors.likec4.relation.stroke.selected}",
+    _whenSelected: {
+      ["--xy-edge-stroke-width"]: "4"
+    }
+  }
+});
+const edgeContainer = css({
+  _reduceGraphics: {
+    transition: "none"
+  }
+});
+const _hideOnReducedGraphics = css.raw({
+  _reduceGraphicsOnPan: {
+    display: "none"
+  },
+  _smallZoom: {
+    display: "none"
+  }
+});
+const hideOnReducedGraphics = css(_hideOnReducedGraphics);
+const edgePathBg = css(_hideOnReducedGraphics, {
+  strokeWidth: "calc(var(--xy-edge-stroke-width) + 2)",
+  strokeOpacity: 0.08,
+  transitionProperty: "stroke-width, stroke-opacity",
+  transitionDuration: "fast",
+  transitionTimingFunction: "inOut",
+  _whenHovered: {
+    transitionTimingFunction: "out",
+    strokeWidth: "calc(var(--xy-edge-stroke-width) + 4)",
+    strokeOpacity: 0.2
+  },
+  _whenSelected: {
+    strokeWidth: "calc(var(--xy-edge-stroke-width) + 6)",
+    strokeOpacity: 0.25,
+    _whenHovered: {
+      strokeOpacity: 0.4
+    }
+  }
+});
+const markerContext = css({
+  fill: "[var(--xy-edge-stroke)]",
+  stroke: "[var(--xy-edge-stroke)]"
+});
+const cssEdgePath = css({
+  strokeDashoffset: 10,
+  _noReduceGraphics: {
+    transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"
+  },
+  _whenHovered: {
+    animationStyle: "xyedgeAnimated",
+    animationDelay: "450ms"
+  },
+  [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
+    animationStyle: "xyedgeAnimated",
+    animationDelay: "0ms"
+  },
+  [`:where([data-edge-dir='back']) &`]: {
+    animationDirection: "reverse"
+  },
+  _whenDimmed: {
+    animationPlayState: "paused"
+  },
+  _smallZoom: {
+    animationName: "none"
+  },
+  _whenPanning: {
+    strokeDasharray: "none !important",
+    animationName: "none"
+  }
+});
+const aiBg = {
+  var: "--ai-bg"};
+const actionBtn = css({
+  // zIndex: 'calc(var(--layer-overlays, 1) + 1)',
+  pointerEvents: "all",
+  // color: `xyedge.label`,
+  cursor: "pointer",
+  opacity: 0.75,
+  transition: "fast",
+  // backgroundColor: aiBg.ref,
+  [aiBg.var]: "var(--xy-edge-label-background-color)",
+  "--ai-hover": `color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
+  "--ai-size": `var(--ai-size-sm)`,
+  "--ai-radius": `var(--mantine-radius-sm)`,
+  _hover: {
+    translateY: "1px",
+    scale: 1.15
+  },
+  _active: {
+    translateY: "-1px",
+    scale: "0.9"
+  },
+  _whenHovered: {
+    opacity: 1
+  },
+  "& .tabler-icon": {
+    width: "80%",
+    height: "80%",
+    strokeWidth: "2"
+  }
+});
+
+export { actionBtn, cssEdgePath, edgeContainer, edgePathBg, edgeVars, hideOnReducedGraphics, markerContext };

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

@@ -0,0 +1,24 @@
+export declare const xyvars: {
+    readonly edge: {
+        readonly stroke: {
+            readonly var: "--xy-edge-stroke";
+            readonly ref: "var(--xy-edge-stroke)";
+        };
+        readonly strokeSelected: {
+            readonly var: "--xy-edge-stroke-selected";
+            readonly ref: "var(--xy-edge-stroke-selected)";
+        };
+        readonly labelColor: {
+            readonly var: "--xy-edge-label-color";
+            readonly ref: "var(--xy-edge-label-color)";
+        };
+        readonly labelBgColor: {
+            readonly var: "--xy-edge-label-background-color";
+            readonly ref: "var(--xy-edge-label-background-color)";
+        };
+        readonly strokeWidth: {
+            readonly var: "--xy-edge-stroke-width";
+            readonly ref: "var(--xy-edge-stroke-width)";
+        };
+    };
+};

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

@@ -1,10 +1,31 @@
-import { jsx } from "react/jsx-runtime";
-import { Box, ActionIcon } from "@mantine/core";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { useIsZoomTooSmall } from "../../../hooks/useXYFlow.js";
-import { stopPropagation } from "../../../utils/xyflow.js";
-import { actionIcon, actionButtons, container } from "./ElementActionButtons.css.js";
+import { jsx } from 'react/jsx-runtime';
+import { css, cx } from '@likec4/styles/css';
+import { actionBtn } from '@likec4/styles/recipes';
+import { Box, ActionIcon } from '@mantine/core';
+import { m } from 'framer-motion';
+import { useIsZoomTooSmall } from '../../../hooks/useXYFlow.js';
+import { stopPropagation } from '../../../utils/xyflow.js';
+
+const container = css({
+  position: "absolute",
+  top: `calc(100% - 28px)`,
+  // transform: 'translateY(-100%)',
+  left: 0,
+  width: "100%",
+  minHeight: "28px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  _smallZoom: {
+    display: "none"
+  }
+  // zIndex: 10,
+});
+const actionButtons = css({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+});
 function ElementActionButtons({
   id,
   selected = false,
@@ -17,7 +38,7 @@ function ElementActionButtons({
   if (!buttons.length || zoomTooSmall) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Box, { className: clsx(container), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: container, children: /* @__PURE__ */ jsx(
     Box,
     {
       component: m.div,
@@ -25,15 +46,15 @@ function ElementActionButtons({
       initial: false,
       style: {
         originY: 0,
-        gap: "6px"
+        gap: "8px"
       },
       animate: {
         opacity: isHovered || selected ? 1 : 0.75,
         scale: isHovered ? 1.1 : selected ? 0.9 : 0.8,
         y: isHovered || selected ? 6 : 0
       },
-      "data-hovered": isHovered,
-      className: clsx("nodrag nopan", actionButtons),
+      "data-likec4-hovered": isHovered,
+      className: cx("nodrag nopan", actionButtons),
       children: buttons.map((button, index) => /* @__PURE__ */ jsx(
         m.div,
         {
@@ -45,9 +66,7 @@ function ElementActionButtons({
           children: /* @__PURE__ */ jsx(
             ActionIcon,
             {
-              className: actionIcon,
-              size: "md",
-              radius: "md",
+              className: actionBtn({}),
               onClick: button.onClick,
               onDoubleClick: stopPropagation,
               children: button.icon
@@ -59,6 +78,5 @@ function ElementActionButtons({
     }
   ) });
 }
-export {
-  ElementActionButtons
-};
+
+export { ElementActionButtons };

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

@@ -1,11 +1,32 @@
-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 "./ElementDetailsButton.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 { IconId } from '@tabler/icons-react';
+import { m } from 'framer-motion';
+import { stopPropagation } from '../../../utils/xyflow.js';
+
+const container = css({
+  position: "absolute",
+  top: 2,
+  right: 2,
+  _shapeBrowser: {
+    right: "5px"
+  },
+  _shapeCylinder: {
+    top: "14px"
+  },
+  _shapeStorage: {
+    top: "14px"
+  },
+  _shapeQueue: {
+    top: "1px",
+    right: "12px"
+  },
+  _smallZoom: {
+    display: "none"
+  }
+});
 function ElementDetailsButton({
   selected = false,
   data: {
@@ -14,10 +35,10 @@ function ElementDetailsButton({
   icon,
   onClick
 }) {
-  return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall, "details-button"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: cx(container, "details-button"), children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      className: clsx("nodrag nopan", actionIcon),
+      className: cx("nodrag nopan", actionBtn({ variant: "transparent" })),
       component: m.button,
       initial: false,
       style: {
@@ -26,7 +47,7 @@ function ElementDetailsButton({
       },
       animate: isHovered || selected ? {
         scale: 1.2,
-        opacity: 0.7
+        opacity: 0.8
       } : {
         scale: 1,
         opacity: 0.5
@@ -36,14 +57,11 @@ function ElementDetailsButton({
         opacity: 1
       },
       whileTap: { scale: 1.15 },
-      size: "md",
-      radius: "md",
       onClick,
       onDoubleClick: stopPropagation,
       children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
     }
   ) });
 }
-export {
-  ElementDetailsButton
-};
+
+export { ElementDetailsButton };

package/dist/base/primitives/element/ElementNodeContainer.css.d.ts

@@ -1,2 +1 @@
-export declare const stokeFillMix: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const container: string;

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

@@ -1,5 +1,50 @@
-/* empty css                                        */
-var container = "_1smoows1";
-export {
-  container
-};
+import { css } from '@likec4/styles/css';
+
+const container = css({
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  padding: 0,
+  margin: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  _after: {
+    content: '" "',
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    height: "24px",
+    background: "[transparent]",
+    pointerEvents: "all"
+  },
+  _focusVisible: {
+    outline: "none"
+  },
+  // _whenDimmed: {
+  //   opacity: 0.25,
+  //   transition: `opacity 400ms {easings.inOut}, filter 500ms {easings.inOut}`,
+  //   transitionDelay: '50ms',
+  //   grayscale: 0.85,
+  //   blur: '2px',
+  //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
+  // },
+  // _whenDimmedImmediate: {
+  //   opacity: 0.25,
+  //   grayscale: 0.85,
+  //   blur: '2px',
+  //   // transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
+  //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
+  // },
+  _reduceGraphicsOnPan: {
+    _after: {
+      display: "none"
+    }
+  },
+  [`:where(.react-flow__node.selectable:not(.dragging)) &`]: {
+    cursor: "pointer"
+  }
+});
+
+export { container };

package/dist/base/primitives/element/ElementNodeContainer.d.ts

@@ -17,7 +17,7 @@ export declare const ElementNodeContainer: (<C = "div">(props: PolymorphicCompon
     children?: ReactNode | undefined;
 } & {
     component?: any;
-} & Omit<Omit<any, "ref">, "children" | "component" | keyof BoxProps | "nodeProps"> & {
+} & Omit<Omit<any, "ref">, "children" | keyof BoxProps | "nodeProps" | "component"> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (BoxProps & {