@likec4/diagram 1.59.4 → 1.60.0

package/dist/overlays/Overlays.mjs

@@ -0,0 +1,113 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { DiagramFeatures } from "../context/DiagramFeatures.mjs";
+import { useDiagram } from "../hooks/safeContext.mjs";
+import { ErrorBoundary } from "../components/ErrorFallback.mjs";
+import { Overlay } from "./overlay/Overlay.mjs";
+import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.mjs";
+import { ElementDetails } from "./element-details/ElementDetails.mjs";
+import { OverlaysActorContext, selectOverlaysSnapshot, useSelectOverlaysActor } from "./hooks.mjs";
+import { RelationshipDetails } from "./relationship-details/RelationshipDetails.mjs";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isNonNullish } from "remeda";
+import { nonexhaustive } from "@likec4/core";
+import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from "motion/react";
+import { animate } from "motion";
+
+//#region src/overlays/Overlays.tsx
+const Overlays = ({ overlaysActorRef }) => /* @__PURE__ */ jsx(OverlaysActorContext, {
+	value: overlaysActorRef,
+	children: /* @__PURE__ */ jsx(OverlaysSurface, { overlaysActorRef })
+});
+const selectOverlays = selectOverlaysSnapshot((s) => {
+	return s.context.overlays.map((overlay) => {
+		switch (overlay.type) {
+			case "relationshipsBrowser": return s.children[overlay.id] ? {
+				type: overlay.type,
+				actorRef: s.children[overlay.id]
+			} : null;
+			case "relationshipDetails": return s.children[overlay.id] ? {
+				type: overlay.type,
+				actorRef: s.children[overlay.id]
+			} : null;
+			case "elementDetails": return s.children[overlay.id] ? {
+				type: overlay.type,
+				actorRef: s.children[overlay.id]
+			} : null;
+			default: nonexhaustive(overlay);
+		}
+	}).filter(isNonNullish);
+}, (a, b) => !!a && !!b && a.length === b.length && a.every((overlay, i) => overlay.actorRef === b[i].actorRef));
+function OverlaysSurface({ overlaysActorRef }) {
+	const diagram = useDiagram();
+	const overlays = useSelectOverlaysActor(selectOverlays);
+	const isMotionReduced = useReducedMotionConfig() ?? false;
+	const isActiveOverlay = overlays.some((overlay) => overlay.type === "elementDetails");
+	useEffect(() => {
+		const xyflowRendererDom = diagram.getContext().xystore.getState().domNode?.querySelector(".react-flow__renderer");
+		if (!xyflowRendererDom || isMotionReduced) return;
+		const current = animate(xyflowRendererDom, {
+			opacity: isActiveOverlay ? .7 : 1,
+			filter: isActiveOverlay ? "grayscale(1)" : "grayscale(0)",
+			transform: isActiveOverlay ? `perspective(400px) translateZ(-12px) translateY(3px)` : `translateY(0)`
+		}, { duration: isActiveOverlay ? .35 : .17 });
+		let cleanupTm = null;
+		if (!isActiveOverlay) cleanupTm = setTimeout(() => {
+			xyflowRendererDom.style.transform = "";
+			xyflowRendererDom.style.filter = "";
+			cleanupTm = null;
+		}, 450);
+		return () => {
+			if (cleanupTm) clearTimeout(cleanupTm);
+			current.stop();
+		};
+	}, [isActiveOverlay]);
+	const close = (actorRef) => {
+		overlaysActorRef.send({
+			type: "close",
+			actorId: actorRef.id
+		});
+	};
+	const overlaysReact = overlays.map((overlay, index) => {
+		switch (overlay.type) {
+			case "relationshipsBrowser": return /* @__PURE__ */ jsx(ErrorBoundary, {
+				onReset: () => close(overlay.actorRef),
+				children: /* @__PURE__ */ jsx(Overlay, {
+					overlayLevel: index,
+					onClose: () => close(overlay.actorRef),
+					children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: overlay.actorRef })
+				})
+			}, overlay.actorRef.sessionId);
+			case "relationshipDetails": return /* @__PURE__ */ jsx(ErrorBoundary, {
+				onReset: () => close(overlay.actorRef),
+				children: /* @__PURE__ */ jsx(Overlay, {
+					overlayLevel: index,
+					onClose: () => close(overlay.actorRef),
+					children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: overlay.actorRef })
+				})
+			}, overlay.actorRef.sessionId);
+			case "elementDetails": return /* @__PURE__ */ jsx(ErrorBoundary, {
+				onReset: () => close(overlay.actorRef),
+				children: /* @__PURE__ */ jsx(ElementDetails, {
+					actorRef: overlay.actorRef,
+					onClose: () => close(overlay.actorRef)
+				})
+			}, overlay.actorRef.sessionId);
+			default: nonexhaustive(overlay);
+		}
+	});
+	return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(LayoutGroup, {
+		id: overlaysActorRef.sessionId,
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			propagate: true,
+			mode: "popLayout",
+			children: /* @__PURE__ */ jsx(ErrorBoundary, {
+				onReset: () => overlaysActorRef.send({ type: "close.all" }),
+				children: overlaysReact
+			})
+		})
+	}) });
+}
+
+//#endregion
+export { Overlays };

package/dist/overlays/element-details/ElementDetails.mjs

@@ -0,0 +1,27 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { ElementDetailsActorContext } from "./actorContext.mjs";
+import { ElementDetailsCard } from "./ElementDetailsCard.mjs";
+import { jsx } from "react/jsx-runtime";
+import { shallowEqual } from "fast-equals";
+import { useSelector } from "@xstate/react";
+
+//#region src/overlays/element-details/ElementDetails.tsx
+const selector = (s) => ({
+	viewId: s.context.currentView.id,
+	fromNode: s.context.initiatedFrom.node,
+	rectFromNode: s.context.initiatedFrom.clientRect,
+	fqn: s.context.subject
+});
+function ElementDetails({ actorRef, onClose }) {
+	const props = useSelector(actorRef, selector, shallowEqual);
+	return /* @__PURE__ */ jsx(ElementDetailsActorContext.Provider, {
+		value: actorRef,
+		children: /* @__PURE__ */ jsx(ElementDetailsCard, {
+			onClose,
+			...props
+		})
+	});
+}
+
+//#endregion
+export { ElementDetails };

package/dist/overlays/element-details/ElementDetailsCard.css.mjs

@@ -0,0 +1,220 @@
+import { css } from "@likec4/styles/css";
+import { flex } from "@likec4/styles/patterns";
+
+//#region src/overlays/element-details/ElementDetailsCard.css.ts
+const backdropBlur = "--_blur";
+const backdropOpacity = "--_opacity";
+const dialog = css({
+	boxSizing: "border-box",
+	margin: "0",
+	padding: "0",
+	position: "fixed",
+	inset: "0",
+	width: "100vw",
+	height: "100vh",
+	maxWidth: "100vw",
+	maxHeight: "100vh",
+	background: "transparent",
+	border: "transparent",
+	_backdrop: {
+		backdropFilter: "auto",
+		backdropBlur: `var(${backdropBlur})`,
+		backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity}, 5%))]`
+	}
+});
+const card = css({
+	position: "absolute",
+	pointerEvents: "all",
+	display: "flex",
+	flexDirection: "column",
+	padding: "4",
+	gap: "lg",
+	justifyContent: "stretch",
+	color: "text",
+	boxShadow: "md",
+	overflow: "hidden",
+	border: "none",
+	background: `[
+    linear-gradient(180deg,
+    color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent),
+    color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px,
+    color-mix(in oklab, var(--likec4-palette-fill) 14%, transparent) 20px,
+    transparent 80px
+    ),
+    linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px),
+    {colors.likec4.overlay.body}
+  ]`,
+	"& .react-flow__attribution": { display: "none" }
+});
+const cardHeader = css({
+	flex: "[0]",
+	cursor: "move"
+});
+const title = css({
+	display: "block",
+	fontFamily: "likec4.element",
+	fontOpticalSizing: "auto",
+	fontStyle: "normal",
+	fontWeight: "bold",
+	fontSize: "[24px]",
+	lineHeight: "xs",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	wordBreak: "break-word",
+	lineClamp: 2
+});
+const iconSize = "40px";
+const elementIcon = css({
+	flex: `[0 0 ${iconSize}]`,
+	boxSize: `[${iconSize}]`,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	alignSelf: "flex-start",
+	cursor: "move",
+	_dark: { mixBlendMode: "hard-light" },
+	"& :where(svg, img)": {
+		width: "100%",
+		height: "auto",
+		maxHeight: "100%",
+		pointerEvents: "none",
+		filter: `[
+    drop-shadow(0 0 3px rgb(0 0 0 / 10%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 5%))
+    drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))
+  ]`
+	},
+	"& img": { objectFit: "contain" }
+});
+const viewTitleColor = "--view-title-color";
+const iconColor = "--icon-color";
+const viewButton = css({
+	width: "100%",
+	background: "surface.default",
+	borderRadius: "sm",
+	padding: `[10px 8px]`,
+	transition: "fast",
+	border: `default`,
+	borderStyle: "dashed",
+	[viewTitleColor]: "{colors.mantine.dark[1]}",
+	_hover: {
+		background: "surface.hover",
+		[iconColor]: "{colors.mantine.dark[1]}",
+		[viewTitleColor]: "{colors.text}"
+	},
+	_light: {
+		[iconColor]: "{colors.mantine.gray[6]}",
+		[viewTitleColor]: "{colors.mantine.gray[7]}",
+		_hover: { [iconColor]: "{colors.mantine.gray[7]}" }
+	},
+	"& .mantine-ThemeIcon-root": {
+		transition: "fast",
+		color: `[var(${iconColor}, {colors.mantine.dark[2]})]`,
+		"--ti-size": "22px",
+		_hover: { color: "text" }
+	},
+	"& > *": { transition: `[all 130ms {easings.inOut}]` }
+});
+const viewButtonTitle = css({
+	transition: "fast",
+	color: `[var(${viewTitleColor}, {colors.mantine.gray[7]})]`,
+	fontSize: "[15px]",
+	fontWeight: "medium",
+	lineHeight: "[1.4]"
+});
+const tabsRoot = flex({
+	flex: "1",
+	flexDirection: "column",
+	justifyContent: "stretch",
+	overflow: "hidden",
+	gap: "sm"
+});
+const tabsList = css({
+	background: "mantine.gray[1]",
+	borderRadius: "sm",
+	flexWrap: "nowrap",
+	gap: "1.5",
+	padding: "1",
+	_dark: { background: "mantine.dark[7]" }
+});
+const tabsTab = css({
+	fontSize: "xs",
+	fontWeight: "medium",
+	flexGrow: 1,
+	padding: "[6px 8px]",
+	transition: "fast",
+	borderRadius: "sm",
+	color: "mantine.gray[7]",
+	_hover: {
+		transitionTimingFunction: "out",
+		color: "text",
+		background: "mantine.gray[3]"
+	},
+	["&[data-active]"]: {
+		transition: "none",
+		background: "white",
+		shadow: "xs",
+		color: "text"
+	},
+	_dark: {
+		color: "mantine.dark[1]",
+		_hover: {
+			color: "white",
+			background: "mantine.dark[6]"
+		},
+		[`&:is([data-active])`]: {
+			color: "white",
+			background: "mantine.dark[5]"
+		}
+	}
+});
+const tabsPanel = css({
+	flex: "1",
+	overflow: "hidden",
+	position: "relative",
+	"&:not(:has(.mantine-ScrollArea-root))": {
+		paddingLeft: "1",
+		paddingRight: "1"
+	},
+	"& .mantine-ScrollArea-root": {
+		width: "100%",
+		height: "100%",
+		"& > div": {
+			paddingLeft: "1",
+			paddingRight: "1"
+		}
+	}
+});
+const propertiesGrid = css({
+	flex: "1",
+	display: "grid",
+	gridTemplateColumns: "[min-content 1fr]",
+	gridAutoRows: "[min-content max-content]",
+	gap: `[24px 20px]`,
+	alignItems: "baseline",
+	justifyItems: "stretch"
+});
+const propertyLabel = css({
+	justifySelf: "end",
+	textAlign: "right",
+	userSelect: "none"
+});
+const resizeHandle = css({
+	position: "absolute",
+	boxSize: "[14px]",
+	border: `[3.5px solid {colors.mantine.dark[3]}]`,
+	borderTop: "none",
+	borderLeft: "none",
+	borderRadius: "xs",
+	bottom: "0.5",
+	right: "0.5",
+	transition: "fast",
+	cursor: "[se-resize]",
+	_hover: {
+		borderWidth: "[4px]",
+		borderColor: "mantine.dark[1]"
+	}
+});
+
+//#endregion
+export { backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, propertiesGrid, propertyLabel, resizeHandle, tabsList, tabsPanel, tabsRoot, tabsTab, title, viewButton, viewButtonTitle };