@likec4/diagram 1.58.0 → 1.59.0

package/dist/likec4diagram/ui/FloatingSequenceActors.js

@@ -0,0 +1,155 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { selectXYStore, useXYStore } from "../../hooks/useXYFlow.js";
+import { roundDpr } from "../../utils/roundDpr.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { ElementData } from "../../base-primitives/element/ElementData.js";
+import { ElementShape } from "../../base-primitives/element/ElementShape.js";
+import { css, cx } from "@likec4/styles/css";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useNodesData } from "@xyflow/react";
+import "fast-equals";
+import { clamp, omit, pipe } from "remeda";
+import { ensureSizes } from "@likec4/core";
+import { ifilter, imap, invariant as invariant$1, toArray } from "@likec4/core/utils";
+import { getNodeDimensions } from "@xyflow/system";
+import { AnimatePresence, LayoutGroup } from "motion/react";
+import * as m$1 from "motion/react-m";
+import { elementNode } from "@likec4/styles/recipes";
+//#region src/likec4diagram/ui/FloatingSequenceActors.tsx
+/**
+* Returns actor nodes from the current XY node list.
+* Only re-runs when xynodes reference changes.
+*/
+var selectActorNodes = selectXYStore((state) => {
+	const [tx, ty, tScale] = state.transform;
+	const x1 = -tx / tScale;
+	const y1 = -ty / tScale;
+	const x2 = x1 + state.width / tScale;
+	return pipe(state.nodeLookup.values(), ifilter((node) => {
+		const xynode = node.internals.userNode;
+		if (xynode.type !== "seq-actor" || !!node.data.dimmed) return false;
+		const { width, height } = getNodeDimensions(node);
+		const centerX = xynode.data.x + width / 2;
+		if (xynode.data.y + height - 8 < y1 && centerX - 30 > x1 && centerX + 30 < x2) return true;
+		return false;
+	}), imap((node) => node.id), toArray());
+});
+/**
+* Shows sequence actors at the top of the diagram, if current viewport does not fit them
+*/
+function FloatingSequenceActors({ isActiveWalkthrough }) {
+	return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+		anchorY: "top",
+		children: useXYStore(selectActorNodes).map((id) => /* @__PURE__ */ jsx(SequenceActor, {
+			id,
+			top: isActiveWalkthrough ? 24 : 64
+		}, id))
+	}) });
+}
+var variants = {
+	initial: {
+		opacity: .7,
+		scale: .9
+	},
+	normal: {
+		opacity: .95,
+		scale: 1
+	},
+	hovered: {
+		opacity: 1,
+		scale: 1.07
+	},
+	tap: {
+		opacity: 1,
+		scale: .98
+	},
+	exit: {
+		opacity: 0,
+		scale: .9
+	}
+};
+function SequenceActor({ id, top }) {
+	const node = useNodesData(id);
+	const diagram = useDiagram();
+	let { centerX, scale, width, height } = useXYStore(useCallback((state) => {
+		const node = state.nodeLookup.get(id);
+		if (!node) return {
+			centerX: 0,
+			scale: 1
+		};
+		const { width, height } = getNodeDimensions(node);
+		const [tx, , tScale] = state.transform;
+		const xynode = node.internals.userNode;
+		invariant$1(xynode.type === "seq-actor");
+		const scale = clamp(.6 * tScale, {
+			min: .2,
+			max: .6
+		});
+		return {
+			centerX: roundDpr((node.position.x + width / 2) * tScale + tx),
+			scale,
+			width,
+			height
+		};
+	}, [id]));
+	if (!node) return null;
+	const { data } = node;
+	const isHovered = data.hovered === true;
+	const { size, padding, textSize } = ensureSizes(data.style ?? {});
+	return /* @__PURE__ */ jsx("div", {
+		"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-likec4-hovered": data.hovered === true,
+		className: css({
+			position: "absolute",
+			pointerEvents: "none",
+			left: "0",
+			top: "0"
+		}),
+		style: {
+			width,
+			height,
+			transformOrigin: "50% 0%",
+			transform: `translate(-50%, ${top}px) translateX(${centerX}px) scale(${scale})`
+		},
+		children: /* @__PURE__ */ jsxs(m$1.div, {
+			className: cx(elementNode(), css({
+				pointerEvents: "all",
+				userSelect: "none"
+			})),
+			variants,
+			transition: {
+				type: "spring",
+				stiffness: 400,
+				damping: 30
+			},
+			initial: "initial",
+			animate: isHovered ? "hovered" : "normal",
+			exit: "exit",
+			whileTap: "tap",
+			onHoverStart: () => {
+				diagram.send({
+					type: "xyflow.nodeMouseEnter",
+					node: node.data.id
+				});
+			},
+			onHoverEnd: () => {
+				diagram.send({
+					type: "xyflow.nodeMouseLeave",
+					node: node.data.id
+				});
+			},
+			children: [/* @__PURE__ */ jsx(ElementShape, { data: {
+				width: data.width,
+				height: data.height,
+				shape: data.shape
+			} }), /* @__PURE__ */ jsx(ElementData, { data: omit(data, ["technology"]) })]
+		})
+	});
+}
+//#endregion
+export { FloatingSequenceActors };

package/dist/likec4diagram/ui/LayoutDriftFrame.js

@@ -18,7 +18,7 @@ var LayoutDriftFrame = memo(() => {
 			width: "full",
 			height: "full",
 			border: `default`,
-			borderWidth: 4,
+			borderWidth: "4",
 			pointerEvents: "none",
 			alignItems: "flex-start",
 			justifyContent: "center"
@@ -47,7 +47,7 @@ var Btn = UnstyledButton.withProps({ className: css({
 	borderBottomRightRadius: "sm",
 	transform: "translateY(-4px)",
 	px: "4",
-	color: "mantine.colors.gray[9]",
+	color: "mantine.gray[9]",
 	pointerEvents: "all",
 	_active: { transform: "translateY(-3px)" }
 }) });

package/dist/likec4diagram/ui/index.d.ts

@@ -1,2 +1,4 @@
+export { FloatingSequenceActors } from './FloatingSequenceActors';
 export { LayoutDriftFrame } from './LayoutDriftFrame';
 export { NotationPanel } from './notation/NotationPanel';
+export { SequenceOutlinePanel } from './sequence-outline/SequenceOutlinePanel';

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -19,13 +19,13 @@ var card = css({
 	userSelect: "none",
 	minWidth: 200,
 	maxWidth: "calc(100vw - 20px)",
-	backgroundColor: `body/80`,
+	backgroundColor: `surface.default/80`,
 	sm: {
 		minWidth: 300,
 		maxWidth: `65vw`
 	},
 	md: { maxWidth: `40vw` },
-	_dark: { backgroundColor: `mantine.colors.dark[6]/80` }
+	_dark: { backgroundColor: `mantine.dark[6]/80` }
 });
 var tabPanel = css({ padding: "xxs" });
 var elementNotation = css({
@@ -33,9 +33,9 @@ var elementNotation = css({
 	transition: "all 100ms ease-in",
 	_hover: {
 		transition: "all 120ms ease-out",
-		backgroundColor: `mantine.colors.primary[2]/50`
+		backgroundColor: `mantine.primary[2]/50`
 	},
-	_dark: { _hover: { backgroundColor: `mantine.colors.dark[3]/40` } }
+	_dark: { _hover: { backgroundColor: `mantine.dark[3]/40` } }
 });
 css({
 	fill: "var(--likec4-palette-fill)",
@@ -51,7 +51,7 @@ css({
 });
 var shapeBadge = css({
 	fontWeight: "medium",
-	letterSpacing: "0.2px",
+	letterSpacing: "tight",
 	paddingTop: "0",
 	paddingBottom: "0",
 	textTransform: "lowercase",

package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const SequenceOutlinePanel: MemoExoticComponent<() => import("react").JSX.Element>;