@likec4/diagram 1.55.0 → 1.56.0

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

@@ -1,68 +1,48 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { compoundNode } from '@likec4/styles/recipes';
-import * as m from 'motion/react-m';
-import { clamp } from 'remeda';
-import { MAX_COMPOUND_DEPTH } from '../../base/const.js';
-import { useLikeC4Styles } from '../../hooks/useLikeC4Styles.js';
-
-function CompoundNodeContainer({
-  nodeProps: {
-    data: {
-      hovered: isHovered = false,
-      dimmed: isDimmed = false,
-      ...data
-    }
-  },
-  className,
-  children,
-  style,
-  ...rest
-}) {
-  const styles = useLikeC4Styles();
-  let opacity = clamp(data.style.opacity ?? 100, {
-    min: 0,
-    max: 100
-  });
-  const isTransparent = opacity < 98;
-  const MIN_OPACITY = 50;
-  const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * (opacity / 100), {
-    min: 0,
-    max: 100 - MIN_OPACITY
-  });
-  const compoundClass = compoundNode({
-    isTransparent,
-    inverseColor: opacity < 70,
-    borderStyle: data.style.border ?? (isTransparent ? styles.defaults.group.border : "none")
-  });
-  const depth = clamp(data.depth ?? 1, {
-    min: 1,
-    max: MAX_COMPOUND_DEPTH
-  });
-  return /* @__PURE__ */ jsx(
-    m.div,
-    {
-      className: cx(
-        compoundClass,
-        className
-      ),
-      initial: false,
-      "data-likec4-hovered": isHovered,
-      "data-likec4-color": data.color,
-      "data-compound-depth": depth,
-      ...isDimmed !== false && {
-        "data-likec4-dimmed": isDimmed
-      },
-      tabIndex: -1,
-      animate: {
-        ["--_border-transparency"]: `${borderOpacity}%`,
-        ["--_compound-transparency"]: `${opacity}%`
-      },
-      style,
-      ...rest,
-      children
-    }
-  );
+import "../../_virtual/_rolldown/runtime.js";
+import { useLikeC4Styles } from "../../hooks/useLikeC4Styles.js";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { clamp } from "remeda";
+import * as m from "motion/react-m";
+import { compoundNode } from "@likec4/styles/recipes";
+//#region src/base-primitives/compound/CompoundNodeContainer.tsx
+function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered = false, dimmed: isDimmed = false, ...data } }, className, children, style, ...rest }) {
+	const styles = useLikeC4Styles();
+	let opacity = clamp(data.style.opacity ?? 100, {
+		min: 0,
+		max: 100
+	});
+	const isTransparent = opacity < 98;
+	const MIN_OPACITY = 50;
+	const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * (opacity / 100), {
+		min: 0,
+		max: 100 - MIN_OPACITY
+	});
+	const compoundClass = compoundNode({
+		isTransparent,
+		inverseColor: opacity < 70,
+		borderStyle: data.style.border ?? (isTransparent ? styles.defaults.group.border : "none")
+	});
+	const depth = clamp(data.depth ?? 1, {
+		min: 1,
+		max: 5
+	});
+	return /* @__PURE__ */ jsx(m.div, {
+		className: cx(compoundClass, className),
+		initial: false,
+		"data-likec4-hovered": isHovered,
+		"data-likec4-color": data.color,
+		"data-compound-depth": depth,
+		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
+		tabIndex: -1,
+		animate: {
+			["--_border-transparency"]: `${borderOpacity}%`,
+			["--_compound-transparency"]: `${opacity}%`
+		},
+		style,
+		...rest,
+		children
+	});
 }
-
+//#endregion
 export { CompoundNodeContainer };

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

@@ -1,15 +1,18 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconRenderer } from '../../context/IconRenderer.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { IconRenderer } from "../../context/IconRenderer.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/base-primitives/compound/CompoundTitle.tsx
 function CompoundTitle({ data }) {
-  const elementIcon = IconRenderer({
-    element: data,
-    className: "likec4-compound-icon"
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "likec4-compound-title-container", children: [
-    elementIcon,
-    /* @__PURE__ */ jsx("div", { className: "likec4-compound-title", children: data.title })
-  ] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "likec4-compound-title-container",
+		children: [IconRenderer({
+			element: data,
+			className: "likec4-compound-icon"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "likec4-compound-title",
+			children: data.title
+		})]
+	});
 }
-
+//#endregion
 export { CompoundTitle };

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

@@ -1,20 +1,11 @@
-import { cva } from '@likec4/styles/css';
-
-const compoundActionBtn = cva({
-  base: {
-    transitionDuration: "normal"
-  },
-  variants: {
-    delay: {
-      true: {
-        // Debounce CSS transition
-        transitionDelay: {
-          base: "0.2s",
-          _hover: "0s"
-        }
-      }
-    }
-  }
+import { cva } from "@likec4/styles/css";
+//#region src/base-primitives/compound/actionbtns.css.ts
+var compoundActionBtn = cva({
+	base: { transitionDuration: "normal" },
+	variants: { delay: { true: { transitionDelay: {
+		base: "0.2s",
+		_hover: "0s"
+	} } } }
 });
-
+//#endregion
 export { compoundActionBtn };

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

@@ -1,22 +1,20 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { edgeActionBtn } from '@likec4/styles/recipes';
-import { ActionIcon } from '@mantine/core';
-import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { stopPropagation } from "../../utils/xyflow.js";
+import { cx } from "@likec4/styles/css";
+import { IconZoomScan } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { edgeActionBtn } from "@likec4/styles/recipes";
+//#region src/base-primitives/edge/EdgeActionButton.tsx
 function EdgeActionButton({ icon, onClick }) {
-  return /* @__PURE__ */ jsx(
-    ActionIcon,
-    {
-      className: cx("nodrag nopan", edgeActionBtn()),
-      onPointerDownCapture: stopPropagation,
-      onClick,
-      role: "button",
-      onDoubleClick: stopPropagation,
-      children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, {})
-    }
-  );
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		className: cx("nodrag nopan", edgeActionBtn()),
+		onPointerDownCapture: stopPropagation,
+		onClick,
+		role: "button",
+		onDoubleClick: stopPropagation,
+		children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, {})
+	});
 }
-
+//#endregion
 export { EdgeActionButton };

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

@@ -1,50 +1,31 @@
-import { jsx } from 'react/jsx-runtime';
-import { invariant } from '@likec4/core';
-import { cx } from '@likec4/styles/css';
-
-function EdgeContainer({
-  className,
-  component = "g",
-  selectable = false,
-  selected = false,
-  data: {
-    color = "gray",
-    hovered: isHovered = false,
-    active: isActive = false,
-    dimmed: isDimmed = false,
-    ...data
-  },
-  animated = false,
-  children,
-  style
-}) {
-  animated = animated || isActive;
-  const props = {
-    className: cx(
-      className,
-      "likec4-edge-container",
-      selected && "selected",
-      selectable && "selectable"
-    ),
-    "data-likec4-color": color,
-    "data-edge-dir": data.dir ?? "forward",
-    "data-edge-active": isActive,
-    "data-likec4-hovered": isHovered,
-    ...animated && {
-      "data-likec4-animated": animated
-    },
-    ...selected && {
-      "data-likec4-selected": selected
-    },
-    ...isDimmed !== false && {
-      "data-likec4-dimmed": isDimmed
-    }
-  };
-  if (component === "svg") {
-    return /* @__PURE__ */ jsx("svg", { style, ...props, children });
-  }
-  invariant(component === "g", 'EdgeContainer: component must be "g" or "svg"');
-  return /* @__PURE__ */ jsx("g", { style, ...props, children });
+import "../../_virtual/_rolldown/runtime.js";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { invariant } from "@likec4/core";
+//#region src/base-primitives/edge/EdgeContainer.tsx
+function EdgeContainer({ className, component = "g", selectable = false, selected = false, data: { color = "gray", hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, ...data }, animated = false, children, style }) {
+	animated = animated || isActive;
+	const props = {
+		className: cx(className, "likec4-edge-container", selected && "selected", selectable && "selectable"),
+		"data-likec4-color": color,
+		"data-edge-dir": data.dir ?? "forward",
+		"data-edge-active": isActive,
+		"data-likec4-hovered": isHovered,
+		...animated && { "data-likec4-animated": animated },
+		...selected && { "data-likec4-selected": selected },
+		...isDimmed !== false && { "data-likec4-dimmed": isDimmed }
+	};
+	if (component === "svg") return /* @__PURE__ */ jsx("svg", {
+		style,
+		...props,
+		children
+	});
+	invariant(component === "g", "EdgeContainer: component must be \"g\" or \"svg\"");
+	return /* @__PURE__ */ jsx("g", {
+		style,
+		...props,
+		children
+	});
 }
-
+//#endregion
 export { EdgeContainer };

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

@@ -1,68 +1,47 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { isStepEdgeId, extractStep } from '@likec4/core';
-import { cx } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { edgeLabel } from '@likec4/styles/recipes';
-import * as m from 'motion/react-m';
-import { forwardRef } from 'react';
-import { isTruthy } from 'remeda';
-
-const EdgeLabel = forwardRef(({
-  edgeProps: {
-    id,
-    data: {
-      label,
-      technology,
-      hovered: isHovered = false
-    },
-    selected = false,
-    selectable = false
-  },
-  pointerEvents = "all",
-  className,
-  children,
-  ...rest
-}, ref) => {
-  const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
-  const isStepEdge = stepNum !== null;
-  const hasLabel = isTruthy(label) || isTruthy(technology);
-  return /* @__PURE__ */ jsxs(
-    m.div,
-    {
-      ref,
-      className: cx(
-        // This class is queried by RelationshipPopover to position near the edge label
-        "likec4-edge-label",
-        edgeLabel({
-          pointerEvents,
-          isStepEdge,
-          cursor: selectable || isStepEdge ? "pointer" : "default"
-        }),
-        className
-      ),
-      "data-edge-id": id,
-      animate: {
-        scale: isHovered && !selected ? 1.06 : 1
-      },
-      ...rest,
-      children: [
-        stepNum !== null && /* @__PURE__ */ jsx(Box, { className: "likec4-edge-label__step-number", children: stepNum }),
-        hasLabel && /* @__PURE__ */ jsxs(Box, { className: "likec4-edge-label__contents", children: [
-          isTruthy(label) && /* @__PURE__ */ jsx(
-            Box,
-            {
-              lineClamp: 5,
-              className: "likec4-edge-label__text",
-              children: label
-            }
-          ),
-          isTruthy(technology) && /* @__PURE__ */ jsx(Box, { className: "likec4-edge-label__technology", children: "[ " + technology + " ]" }),
-          children
-        ] })
-      ]
-    }
-  );
+import "../../_virtual/_rolldown/runtime.js";
+import { cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isTruthy } from "remeda";
+import { extractStep, isStepEdgeId } from "@likec4/core";
+import { Box } from "@likec4/styles/jsx";
+import * as m from "motion/react-m";
+import { edgeLabel } from "@likec4/styles/recipes";
+//#region src/base-primitives/edge/EdgeLabel.tsx
+var EdgeLabel = forwardRef(({ edgeProps: { id, data: { label, technology, hovered: isHovered = false }, selected = false, selectable = false }, pointerEvents = "all", className, children, ...rest }, ref) => {
+	const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
+	const isStepEdge = stepNum !== null;
+	const hasLabel = isTruthy(label) || isTruthy(technology);
+	return /* @__PURE__ */ jsxs(m.div, {
+		ref,
+		className: cx("likec4-edge-label", edgeLabel({
+			pointerEvents,
+			isStepEdge,
+			cursor: selectable || isStepEdge ? "pointer" : "default"
+		}), className),
+		"data-edge-id": id,
+		animate: { scale: isHovered && !selected ? 1.06 : 1 },
+		...rest,
+		children: [stepNum !== null && /* @__PURE__ */ jsx(Box, {
+			className: "likec4-edge-label__step-number",
+			children: stepNum
+		}), hasLabel && /* @__PURE__ */ jsxs(Box, {
+			className: "likec4-edge-label__contents",
+			children: [
+				isTruthy(label) && /* @__PURE__ */ jsx(Box, {
+					lineClamp: 5,
+					className: "likec4-edge-label__text",
+					children: label
+				}),
+				isTruthy(technology) && /* @__PURE__ */ jsx(Box, {
+					className: "likec4-edge-label__technology",
+					children: "[ " + technology + " ]"
+				}),
+				children
+			]
+		})]
+	});
 });
 EdgeLabel.displayName = "EdgeLabel";
-
+//#endregion
 export { EdgeLabel };

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

@@ -14,6 +14,6 @@ type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
     } | undefined;
     edgeProps: BaseEdgePropsWithData<Data>;
 };
-export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, animated, }, labelPosition: labelXY, className, style: _, // omit styles for container
+export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, animated, }, labelPosition: labelXY, className, style: contentStyle, // applied to inner content div, not the positioned container
 children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,75 +1,38 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { EdgeLabelRenderer } from '@xyflow/react';
-import { isNumber } from 'remeda';
-
-const toCssVarValue = (value) => {
-  if (value === void 0) return "";
-  return isNumber(value) ? `${Math.trunc(value)}px` : value;
+import "../../_virtual/_rolldown/runtime.js";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { EdgeLabelRenderer } from "@xyflow/react";
+import { isNumber } from "remeda";
+//#region src/base-primitives/edge/EdgeLabelContainer.tsx
+var toCssVarValue = (value) => {
+	if (value === void 0) return "";
+	return isNumber(value) ? `${Math.trunc(value)}px` : value;
 };
-function EdgeLabelContainer({
-  edgeProps: {
-    id,
-    selected = false,
-    data: {
-      hovered: isHovered = false,
-      active: isActive = false,
-      dimmed: isDimmed = false,
-      labelBBox,
-      color = "gray"
-    },
-    animated
-  },
-  labelPosition: labelXY,
-  className,
-  style: _,
-  // omit styles for container
-  children,
-  ...rest
-}) {
-  let labelX = labelXY?.x ?? labelBBox?.x, labelY = labelXY?.y ?? labelBBox?.y;
-  if (labelX === void 0 || labelY === void 0) {
-    return null;
-  }
-  const translate = labelXY?.translate ?? "";
-  animated = animated || isActive;
-  return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...rest,
-      className: cx(
-        "nodrag nopan",
-        "likec4-edge-label-container",
-        className
-      ),
-      "data-likec4-hovered": isHovered,
-      "data-likec4-color": color,
-      "data-edge-active": isActive,
-      "data-edge-animated": animated || isActive,
-      ...animated && {
-        "data-likec4-animated": animated
-      },
-      ...selected !== false && {
-        "data-likec4-selected": selected
-      },
-      ...isDimmed !== false && {
-        "data-likec4-dimmed": isDimmed
-      },
-      style: {
-        transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate}`
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: labelBBox ? {
-            maxWidth: labelBBox.width + 20
-          } : void 0,
-          children
-        }
-      )
-    },
-    id
-  ) });
+function EdgeLabelContainer({ edgeProps: { id, selected = false, data: { hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, labelBBox, color = "gray" }, animated }, labelPosition: labelXY, className, style: contentStyle, children, ...rest }) {
+	let labelX = labelXY?.x ?? labelBBox?.x;
+	let labelY = labelXY?.y ?? labelBBox?.y;
+	if (labelX === void 0 || labelY === void 0) return null;
+	const translate = labelXY?.translate ?? "";
+	animated = animated || isActive;
+	return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cx("nodrag nopan", "likec4-edge-label-container", className),
+		"data-likec4-hovered": isHovered,
+		"data-likec4-color": color,
+		"data-edge-active": isActive,
+		"data-edge-animated": animated || isActive,
+		...animated && { "data-likec4-animated": animated },
+		...selected !== false && { "data-likec4-selected": selected },
+		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
+		style: { transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate}` },
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				...contentStyle,
+				...labelBBox && { maxWidth: labelBBox.width + 20 }
+			},
+			children
+		})
+	}, id) });
 }
-
+//#endregion
 export { EdgeLabelContainer };