@likec4/diagram 1.59.3 → 1.60.0

package/dist/base-primitives/element/ElementNodeContainer.d.mts

@@ -0,0 +1,23 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { BaseNodePropsWithData } from "../../base/types.mjs";
+import { MotionNodeLayoutOptions, MotionStyle } from "motion/react";
+import { Color, ComputedNodeStyle, ElementShape } from "@likec4/core/types";
+//#region src/base-primitives/element/ElementNodeContainer.d.ts
+type RequiredData = {
+  color: Color;
+  shape: ElementShape;
+  style?: ComputedNodeStyle;
+};
+/**
+ * Top-level primitive to compose leaf nodes renderers.
+ * This container provides the state via data-* attributes
+ */
+export declare const ElementNodeContainer: import("react").ForwardRefExoticComponent<{
+  [key: `data-${string}`]: string | undefined;
+  nodeProps: BaseNodePropsWithData<RequiredData>;
+  className?: string | undefined;
+  style?: MotionStyle | undefined;
+} & MotionNodeLayoutOptions & {
+  children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/base-primitives/element/ElementNodeContainer.mjs

@@ -0,0 +1,58 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ensureSizes } from "@likec4/core/types";
+import * as m from "motion/react-m";
+import { elementNode } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/element/ElementNodeContainer.tsx
+const variants = {
+	normal: { scale: 1 },
+	hovered: { scale: 1.05 },
+	selected: { scale: 1.02 },
+	tap: { scale: .98 }
+};
+/**
+* Top-level primitive to compose leaf nodes renderers.
+* This container provides the state via data-* attributes
+*/
+const ElementNodeContainer = forwardRef(({ nodeProps: { selected = false, selectable = false, data: { hovered: isHovered = false, dimmed: isDimmed = false, ...data } }, className, style, children, ...rest }, ref) => {
+	let variant;
+	switch (true) {
+		case isHovered:
+			variant = "hovered";
+			break;
+		case selected:
+			variant = "selected";
+			break;
+		default: variant = "normal";
+	}
+	const { size, padding, textSize } = ensureSizes(data.style ?? {});
+	return /* @__PURE__ */ jsx(m.div, {
+		ref,
+		className: cx(elementNode(), "group", className),
+		variants,
+		initial: false,
+		...selectable && {
+			animate: variant,
+			whileTap: "tap"
+		},
+		"data-likec4-hovered": isHovered,
+		"data-likec4-color": data.color,
+		"data-likec4-shape": data.shape,
+		"data-likec4-shape-size": size,
+		"data-likec4-spacing": padding,
+		"data-likec4-text-size": textSize,
+		...data.style?.sizing === "fixed" && { "data-likec4-sizing": "fixed" },
+		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
+		style,
+		tabIndex: -1,
+		...rest,
+		children
+	});
+});
+ElementNodeContainer.displayName = "ElementNodeContainer";
+
+//#endregion
+export { ElementNodeContainer };

package/dist/base-primitives/element/ElementShape.d.mts

@@ -0,0 +1,21 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { ComputedNodeStyle, ElementShape as ElementShape$1 } from "@likec4/core/types";
+//#region src/base-primitives/element/ElementShape.d.ts
+type RequiredData = {
+  shape: ElementShape$1;
+  width: number;
+  height: number;
+  style?: ComputedNodeStyle;
+};
+type ElementShapeProps = {
+  data: RequiredData;
+  width?: number | undefined;
+  height?: number | undefined;
+  /**
+   * @default true
+   */
+  showSelectionOutline?: boolean | undefined;
+};
+declare function ElementShape$1({ data, width, height, showSelectionOutline }: ElementShapeProps): import("react").JSX.Element;
+//#endregion
+export { ElementShape$1 as ElementShape };

package/dist/base-primitives/element/ElementShape.mjs

@@ -0,0 +1,469 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { roundDpr } from "../../utils/roundDpr.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { nonexhaustive } from "@likec4/core";
+import { elementShapeRecipe } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/element/ElementShape.tsx
+function cylinderSVGPath(diameter, height, tilt = .07) {
+	const radius = Math.round(diameter / 2);
+	const rx = radius;
+	const ry = roundDpr(tilt * radius);
+	const tiltAdjustedHeight = height - 2 * ry;
+	return {
+		path: `  M ${diameter},${ry}
+        a ${rx},${ry} 0,0,0 ${-diameter} 0
+        l 0,${tiltAdjustedHeight}
+        a ${rx},${ry} 0,0,0 ${diameter} 0
+        l 0,${-tiltAdjustedHeight}
+        z
+        `.replace(/\s+/g, " ").trim(),
+		ry,
+		rx
+	};
+}
+function docSVGPath(width, height) {
+	const waveHeight = height / 8;
+	const baseY = roundDpr(height - waveHeight / 2);
+	const amplitude = roundDpr(height / 6);
+	const radius = 6;
+	return { path: `
+    M 0 ${baseY}
+    V ${radius}
+    Q 0 0 ${radius} 0
+    H ${width - radius}
+    Q ${width} 0 ${width} ${radius}
+    V ${baseY}
+    C ${roundDpr(width * .75)} ${baseY + amplitude}, ${roundDpr(width * .5)} ${baseY - amplitude}, 0 ${baseY}
+  `.replace(/\s+/g, " ").trim() };
+}
+function bucketSVGPath(width, height) {
+	const cx = width / 2;
+	const topRx = roundDpr(cx);
+	const topRy = roundDpr(Math.min(height / 8, topRx * .08));
+	const bottomRx = roundDpr(topRx * .8);
+	const bottomRy = roundDpr(topRy * 1.05);
+	const topY = topRy;
+	const bottomY = height - bottomRy;
+	const leftBottomX = cx - bottomRx;
+	return {
+		path: `
+    M ${width},${topY}
+    a ${topRx},${topRy} 0,0,0 ${-width} 0
+    L ${leftBottomX},${bottomY}
+    a ${bottomRx},${bottomRy} 0,0,0 ${bottomRx * 2} 0
+    Z
+  `.replace(/\s+/g, " ").trim(),
+		topRx,
+		topRy,
+		bottomRx,
+		bottomRy
+	};
+}
+function queueSVGPath(width, height, tilt = .185) {
+	const diameter = height;
+	const ry = Math.round(diameter / 2);
+	const rx = roundDpr(diameter / 2 * tilt);
+	return {
+		path: `
+    M ${rx},0
+    a ${rx},${ry} 0,0,0 0 ${diameter}
+    l ${width - 2 * rx},0
+    a ${rx},${ry} 0,0,0 0 ${-diameter}
+    z`.replace(/\s+/g, " ").trim(),
+		ry,
+		rx
+	};
+}
+const agentGeometry = (h) => ({
+	earW: 14,
+	earH: Math.min(Math.round(h * .38), 150),
+	stemW: 6,
+	stemH: 22,
+	ballR: 9
+});
+/**
+* Silhouette of the agent (body, ears and antenna), grown by `pad` on every side
+*/
+function agentSVGPath(w, h, pad = 0) {
+	const { earW, stemW, stemH, ballR, earH } = agentGeometry(h);
+	const r = 6 + pad;
+	const er = 3 + pad;
+	const cx = w / 2;
+	const sw = stemW / 2 + pad;
+	const R = ballR + pad;
+	const jy = roundDpr(-stemH + Math.sqrt(R * R - sw * sw));
+	const left = -pad;
+	const right = w + pad;
+	const top = -pad;
+	const bottom = h + pad;
+	const earTop = (h - earH) / 2 - pad;
+	const earBottom = (h + earH) / 2 + pad;
+	const earLeft = -(earW - 2) - pad;
+	const earRight = w + (earW - 2) + pad;
+	return `
+    M ${left + r},${top}
+    H ${cx - sw}
+    V ${jy}
+    A ${R} ${R} 0 1 1 ${cx + sw} ${jy}
+    V ${top}
+    H ${right - r}
+    A ${r} ${r} 0 0 1 ${right} ${top + r}
+    V ${earTop}
+    H ${earRight - er}
+    A ${er} ${er} 0 0 1 ${earRight} ${earTop + er}
+    V ${earBottom - er}
+    A ${er} ${er} 0 0 1 ${earRight - er} ${earBottom}
+    H ${right}
+    V ${bottom - r}
+    A ${r} ${r} 0 0 1 ${right - r} ${bottom}
+    H ${left + r}
+    A ${r} ${r} 0 0 1 ${left} ${bottom - r}
+    V ${earBottom}
+    H ${earLeft + er}
+    A ${er} ${er} 0 0 1 ${earLeft} ${earBottom - er}
+    V ${earTop + er}
+    A ${er} ${er} 0 0 1 ${earLeft + er} ${earTop}
+    H ${left}
+    V ${top + r}
+    A ${r} ${r} 0 0 1 ${left + r} ${top}
+    Z
+  `.replace(/\s+/g, " ").trim();
+}
+const PersonIcon = {
+	width: 115,
+	height: 120,
+	path: `M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z`
+};
+const ComponentTopLeftRect = ({ index, size }) => {
+	let width;
+	let height;
+	let offsetX;
+	let offsetY;
+	let between;
+	switch (size) {
+		case "xs":
+		case "sm":
+			width = 40;
+			height = 18;
+			offsetX = -16;
+			offsetY = 16;
+			between = 10;
+			break;
+		case "md":
+			width = 60;
+			height = 26;
+			offsetX = -20;
+			offsetY = 22;
+			between = 14;
+			break;
+		case "lg":
+		case "xl":
+			width = 70;
+			height = 32;
+			offsetX = -24;
+			offsetY = 32;
+			between = 18;
+			break;
+		default: nonexhaustive(size);
+	}
+	return /* @__PURE__ */ jsx("rect", {
+		x: offsetX,
+		y: offsetY + (height + between) * index,
+		width,
+		height,
+		rx: 3,
+		className: "top-left-rect",
+		strokeWidth: 2
+	});
+};
+function ShapeSvg({ shape, w, h, size = "md", isStacked = false }) {
+	switch (shape) {
+		case "component": return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("rect", {
+				width: w,
+				height: h,
+				rx: 6,
+				strokeWidth: 0
+			}),
+			/* @__PURE__ */ jsx(ComponentTopLeftRect, {
+				index: 0,
+				size
+			}),
+			/* @__PURE__ */ jsx(ComponentTopLeftRect, {
+				index: 1,
+				size
+			})
+		] });
+		case "mobile": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			width: w,
+			height: h,
+			rx: 6,
+			"data-likec4-fill": "mix-stroke",
+			strokeWidth: 0
+		}), /* @__PURE__ */ jsxs("g", {
+			"data-likec4-fill": "fill",
+			strokeWidth: 0,
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: 17,
+				cy: h / 2,
+				r: 12
+			}), /* @__PURE__ */ jsx("rect", {
+				x: 33,
+				y: 12,
+				width: w - 44,
+				height: h - 24,
+				rx: 5
+			})]
+		})] });
+		case "document": {
+			const { path } = docSVGPath(w, h);
+			return /* @__PURE__ */ jsx("path", {
+				d: path,
+				"data-likec4-fill": "fill",
+				strokeWidth: 2
+			});
+		}
+		case "browser": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			width: w,
+			height: h,
+			rx: 6,
+			"data-likec4-fill": "mix-stroke",
+			strokeWidth: 0
+		}), /* @__PURE__ */ jsxs("g", {
+			"data-likec4-fill": "fill",
+			strokeWidth: 0,
+			children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: 16,
+					cy: 17,
+					r: 7
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: 36,
+					cy: 17,
+					r: 7
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: 56,
+					cy: 17,
+					r: 7
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: 70,
+					y: 8,
+					width: w - 80,
+					height: 17,
+					rx: 4
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: 10,
+					y: 32,
+					width: w - 20,
+					height: h - 42,
+					rx: 4
+				})
+			]
+		})] });
+		case "person": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			width: w,
+			height: h,
+			rx: 6,
+			strokeWidth: 0
+		}), /* @__PURE__ */ jsx("svg", {
+			x: w - PersonIcon.width - 6,
+			y: h - PersonIcon.height,
+			width: PersonIcon.width,
+			height: PersonIcon.height,
+			viewBox: `0 0 ${PersonIcon.width} ${PersonIcon.height}`,
+			"data-likec4-fill": "mix-stroke",
+			children: /* @__PURE__ */ jsx("path", {
+				strokeWidth: 0,
+				d: PersonIcon.path
+			})
+		})] });
+		case "queue": {
+			const { path, rx, ry } = queueSVGPath(w, h);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+				d: path,
+				strokeWidth: 2
+			}), /* @__PURE__ */ jsx("ellipse", {
+				cx: rx,
+				cy: ry,
+				ry: ry - .75,
+				rx,
+				"data-likec4-fill": "mix-stroke",
+				strokeWidth: 2
+			})] });
+		}
+		case "bucket": {
+			const { path, topRx, topRy } = bucketSVGPath(w, h);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+				d: path,
+				strokeWidth: 2
+			}), /* @__PURE__ */ jsx("ellipse", {
+				cx: w / 2,
+				cy: topRy,
+				rx: topRx,
+				ry: topRy,
+				"data-likec4-fill": "mix-stroke",
+				strokeWidth: 2
+			})] });
+		}
+		case "storage":
+		case "cylinder": {
+			const { path, rx, ry } = cylinderSVGPath(w, h);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+				d: path,
+				strokeWidth: 2
+			}), /* @__PURE__ */ jsx("ellipse", {
+				cx: rx,
+				cy: ry,
+				ry,
+				rx: rx - .75,
+				"data-likec4-fill": "mix-stroke",
+				strokeWidth: 2
+			})] });
+		}
+		case "agent": {
+			const { earW, earH, stemW, stemH, ballR } = agentGeometry(h);
+			const earY = (h - earH) / 2;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [!isStacked && /* @__PURE__ */ jsxs("g", {
+				"data-likec4-fill": "mix-stroke",
+				strokeWidth: 0,
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						x: -earW + 2,
+						y: earY,
+						width: earW,
+						height: earH,
+						rx: 3
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: w - 2,
+						y: earY,
+						width: earW,
+						height: earH,
+						rx: 3
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: (w - stemW) / 2,
+						y: -stemH,
+						width: stemW,
+						height: stemH + 2
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: w / 2,
+						cy: -stemH,
+						r: ballR
+					})
+				]
+			}), /* @__PURE__ */ jsx("rect", {
+				width: w,
+				height: h,
+				rx: 6,
+				strokeWidth: 0
+			})] });
+		}
+		default: return nonexhaustive(shape);
+	}
+}
+/**
+* When element is selected, this component is used to render the indicator
+*/
+function ShapeSvgOutline({ shape, w, h }) {
+	let svg;
+	switch (shape) {
+		case "bucket":
+			svg = /* @__PURE__ */ jsx("g", {
+				transform: "translate(-3 -3)",
+				children: /* @__PURE__ */ jsx("path", { d: bucketSVGPath(w + 6, h + 6).path })
+			});
+			break;
+		case "queue":
+			svg = /* @__PURE__ */ jsx("g", {
+				transform: "translate(-3 -3)",
+				children: /* @__PURE__ */ jsx("path", { d: queueSVGPath(w + 6, h + 6).path })
+			});
+			break;
+		case "document":
+			svg = /* @__PURE__ */ jsx("g", {
+				transform: "translate(-3 -3)",
+				children: /* @__PURE__ */ jsx("path", { d: docSVGPath(w + 6, h + 6).path })
+			});
+			break;
+		case "agent":
+			svg = /* @__PURE__ */ jsx("path", { d: agentSVGPath(w, h, 3) });
+			break;
+		case "storage":
+		case "cylinder":
+			svg = /* @__PURE__ */ jsx("g", {
+				transform: "translate(-3 -3)",
+				children: /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w + 6, h + 6).path })
+			});
+			break;
+		default: svg = /* @__PURE__ */ jsx("rect", {
+			x: -3,
+			y: -3,
+			width: w + 6,
+			height: h + 6,
+			rx: 8
+		});
+	}
+	return /* @__PURE__ */ jsx("g", {
+		className: "likec4-shape-outline",
+		children: svg
+	});
+}
+function ElementShape$1({ data, width, height, showSelectionOutline = true }) {
+	let w = !!width && width > 10 ? width : data.width;
+	let h = !!height && height > 10 ? height : data.height;
+	const isMultiple = data.style?.multiple ?? false;
+	const borderStyle = data.style?.border ?? "none";
+	const withBorder = borderStyle !== "none";
+	if (data.shape === "rectangle") return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		style: { borderStyle },
+		className: elementShapeRecipe({
+			shapetype: "html",
+			withBorder,
+			withOutline: showSelectionOutline
+		}),
+		children: [isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }), /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })]
+	});
+	const className = elementShapeRecipe({
+		shapetype: "svg",
+		withOutline: showSelectionOutline
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [isMultiple && /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": true,
+		className,
+		"data-likec4-shape-multiple": "true",
+		viewBox: `0 0 ${w} ${h}`,
+		children: /* @__PURE__ */ jsx(ShapeSvg, {
+			shape: data.shape,
+			size: data.style?.size,
+			w,
+			h,
+			isStacked: true
+		})
+	}), /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": true,
+		className,
+		viewBox: `0 0 ${w} ${h}`,
+		children: [/* @__PURE__ */ jsx(ShapeSvgOutline, {
+			shape: data.shape,
+			w,
+			h
+		}), /* @__PURE__ */ jsx(ShapeSvg, {
+			shape: data.shape,
+			size: data.style?.size,
+			w,
+			h
+		})]
+	})] });
+}
+__name(ElementShape$1, "ElementShape");
+
+//#endregion
+export { ElementShape$1 as ElementShape };

package/dist/base-primitives/element/ElementTags.d.mts

@@ -0,0 +1,19 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { BaseNodePropsWithData } from "../../base/types.mjs";
+import "react";
+//#region src/base-primitives/element/ElementTags.d.ts
+export declare const ElementTag: import("react").ForwardRefExoticComponent<{
+  tag: string;
+  cursor?: "pointer" | "default";
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "children" | "translate"> & import("react").RefAttributes<HTMLDivElement>>;
+type Data = {
+  tags: readonly string[] | null | undefined;
+  width: number;
+};
+export type ElementTagsProps = BaseNodePropsWithData<Data> & {
+  onTagClick?: (tag: `#${string}`) => void;
+  onTagMouseEnter?: (tag: `#${string}`) => void;
+  onTagMouseLeave?: (tag: `#${string}`) => void;
+};
+export declare const ElementTags: import("react").MemoExoticComponent<({ id, data: { tags, width, hovered }, onTagClick, onTagMouseEnter, onTagMouseLeave }: ElementTagsProps) => import("react").JSX.Element | null>;
+//#endregion