@likec4/diagram 1.59.4 → 1.60.0

package/dist/overlays/Overlays.js

@@ -1,111 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { DiagramFeatures } from "../context/DiagramFeatures.js";
-import { useDiagram } from "../hooks/safeContext.js";
-import { ErrorBoundary } from "../components/ErrorFallback.js";
-import { Overlay } from "./overlay/Overlay.js";
-import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.js";
-import { ElementDetails } from "./element-details/ElementDetails.js";
-import { OverlaysActorContext, selectOverlaysSnapshot, useSelectOverlaysActor } from "./hooks.js";
-import { RelationshipDetails } from "./relationship-details/RelationshipDetails.js";
-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
-var Overlays = ({ overlaysActorRef }) => /* @__PURE__ */ jsx(OverlaysActorContext, {
-	value: overlaysActorRef,
-	children: /* @__PURE__ */ jsx(OverlaysSurface, { overlaysActorRef })
-});
-var 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.d.ts

@@ -1,6 +0,0 @@
-import { ElementDetailsActorRef } from './actor';
-export type ElementDetailsProps = {
-    actorRef: ElementDetailsActorRef;
-    onClose: () => void;
-};
-export declare function ElementDetails({ actorRef, onClose, }: ElementDetailsProps): import("react").JSX.Element;

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

@@ -1,25 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { ElementDetailsActorContext } from "./actorContext.js";
-import { ElementDetailsCard } from "./ElementDetailsCard.js";
-import { jsx } from "react/jsx-runtime";
-import { shallowEqual } from "fast-equals";
-import { useSelector } from "@xstate/react";
-//#region src/overlays/element-details/ElementDetails.tsx
-var 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.d.ts

@@ -1,16 +0,0 @@
-export declare const backdropBlur = "--_blur";
-export declare const backdropOpacity = "--_opacity";
-export declare const dialog: string;
-export declare const card: string;
-export declare const cardHeader: string;
-export declare const title: string;
-export declare const elementIcon: string;
-export declare const viewButton: string;
-export declare const viewButtonTitle: string;
-export declare const tabsRoot: string;
-export declare const tabsList: string;
-export declare const tabsTab: string;
-export declare const tabsPanel: string;
-export declare const propertiesGrid: string;
-export declare const propertyLabel: string;
-export declare const resizeHandle: string;

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

@@ -1,218 +0,0 @@
-import { css } from "@likec4/styles/css";
-import { flex } from "@likec4/styles/patterns";
-//#region src/overlays/element-details/ElementDetailsCard.css.ts
-var backdropBlur = "--_blur";
-var backdropOpacity = "--_opacity";
-var 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%))]`
-	}
-});
-var 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" }
-});
-var cardHeader = css({
-	flex: "[0]",
-	cursor: "move"
-});
-var 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
-});
-var iconSize = "40px";
-var 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" }
-});
-var viewTitleColor = "--view-title-color";
-var iconColor = "--icon-color";
-var 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}]` }
-});
-var viewButtonTitle = css({
-	transition: "fast",
-	color: `[var(${viewTitleColor}, {colors.mantine.gray[7]})]`,
-	fontSize: "[15px]",
-	fontWeight: "medium",
-	lineHeight: "[1.4]"
-});
-var tabsRoot = flex({
-	flex: "1",
-	flexDirection: "column",
-	justifyContent: "stretch",
-	overflow: "hidden",
-	gap: "sm"
-});
-var tabsList = css({
-	background: "mantine.gray[1]",
-	borderRadius: "sm",
-	flexWrap: "nowrap",
-	gap: "1.5",
-	padding: "1",
-	_dark: { background: "mantine.dark[7]" }
-});
-var 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]"
-		}
-	}
-});
-var 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"
-		}
-	}
-});
-var propertiesGrid = css({
-	flex: "1",
-	display: "grid",
-	gridTemplateColumns: "[min-content 1fr]",
-	gridAutoRows: "[min-content max-content]",
-	gap: `[24px 20px]`,
-	alignItems: "baseline",
-	justifyItems: "stretch"
-});
-var propertyLabel = css({
-	justifySelf: "end",
-	textAlign: "right",
-	userSelect: "none"
-});
-var 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 };

package/dist/overlays/element-details/ElementDetailsCard.d.ts

@@ -1,11 +0,0 @@
-import { Fqn, NodeId, ViewId } from '@likec4/core/types';
-import { Rect } from '@xyflow/system';
-type ElementDetailsCardProps = {
-    viewId: ViewId;
-    fromNode: NodeId | null;
-    rectFromNode: Rect | null;
-    onClose: () => void;
-    fqn: Fqn;
-};
-export declare function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose, }: ElementDetailsCardProps): import("react").JSX.Element;
-export {};