@likec4/diagram 1.59.4 → 1.61.0

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

@@ -0,0 +1,162 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconArrowRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs";
+import IconExternalLink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.mjs";
+import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { RelationshipsBrowser } from "../relationships-browser/RelationshipsBrowser.mjs";
+import { useElementDetailsActorRef } from "./actorContext.mjs";
+import { fqn, relationshipStat, xyflow } from "./TabPanelRelationships.css.mjs";
+import { useCallback } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { unique } from "remeda";
+import { nameFromFqn } from "@likec4/core";
+import { ActionIcon, Box, Group, Paper, Stack, Text, ThemeIcon, Tooltip } from "@mantine/core";
+import { useSelector } from "@xstate/react";
+
+// src/overlays/element-details/TabPanelRelationships.tsx
+const Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 600,
+	closeDelay: 120,
+	label: "",
+	children: null,
+	offset: 8,
+	withinPortal: false
+});
+function TabPanelRelationships({ node, element }) {
+	const diagram = useDiagram();
+	const delailsActor = useElementDetailsActorRef();
+	const relationshipsBrowserActor = useSelector(delailsActor, useCallback((s) => s.children[`${delailsActor.id}-relationships`], [delailsActor.id]));
+	const incoming = [...element.incoming()].map((r) => r.id);
+	const outgoing = [...element.outgoing()].map((r) => r.id);
+	const incomingInView = node ? unique([...node.incoming()].flatMap((e) => e.$edge.relations)) : [];
+	const outgoingInView = node ? unique([...node.outgoing()].flatMap((e) => e.$edge.relations)) : [];
+	const notIncludedRelations = [...incoming, ...outgoing].filter((r) => !incomingInView.includes(r) && !outgoingInView.includes(r)).length;
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "xs",
+		pos: "relative",
+		w: "100%",
+		h: "100%",
+		children: [incoming.length + outgoing.length > 0 && /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			wrap: "nowrap",
+			align: "center",
+			children: [/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Group, {
+				gap: 8,
+				mb: 4,
+				wrap: "nowrap",
+				children: [
+					/* @__PURE__ */ jsx(RelationshipsStat, {
+						title: "incoming",
+						total: incoming.length,
+						included: incomingInView.length
+					}),
+					/* @__PURE__ */ jsx(ThemeIcon, {
+						size: "sm",
+						variant: "transparent",
+						c: "dimmed",
+						children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } })
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						className: fqn,
+						children: nameFromFqn(element.id)
+					}),
+					/* @__PURE__ */ jsx(ThemeIcon, {
+						size: "sm",
+						variant: "transparent",
+						c: "dimmed",
+						children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } })
+					}),
+					/* @__PURE__ */ jsx(RelationshipsStat, {
+						title: "outgoing",
+						total: outgoing.length,
+						included: outgoingInView.length
+					})
+				]
+			}) }), notIncludedRelations > 0 && /* @__PURE__ */ jsx(Tooltip$1, {
+				label: "Current view does not include some relationships",
+				children: /* @__PURE__ */ jsxs(Group, {
+					mt: "xs",
+					gap: 6,
+					c: "orange",
+					style: { cursor: "pointer" },
+					children: [/* @__PURE__ */ jsx(IconInfoCircle, { style: { width: 14 } }), /* @__PURE__ */ jsxs(Text, {
+						fz: "sm",
+						children: [
+							notIncludedRelations,
+							" relationship",
+							notIncludedRelations > 1 ? "s are" : " is",
+							" hidden"
+						]
+					})]
+				})
+			})]
+		}), /* @__PURE__ */ jsx(Box, {
+			className: xyflow,
+			children: relationshipsBrowserActor && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor }), /* @__PURE__ */ jsx(Box, {
+				pos: "absolute",
+				top: 12,
+				right: 12,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "md",
+					variant: "default",
+					radius: "sm",
+					onClick: (e) => {
+						e.stopPropagation();
+						const { subject, scope, viewId } = relationshipsBrowserActor.getSnapshot().context;
+						diagram.overlays().send({
+							type: "open.relationshipsBrowser",
+							subject,
+							scope,
+							viewId
+						});
+					},
+					children: /* @__PURE__ */ jsx(IconExternalLink, {
+						stroke: 1.6,
+						style: { width: "70%" }
+					})
+				})
+			})] })
+		})]
+	});
+}
+function RelationshipsStat({ title, total, included }) {
+	return /* @__PURE__ */ jsx(Paper, {
+		withBorder: true,
+		shadow: "none",
+		className: relationshipStat,
+		px: "md",
+		py: "xs",
+		radius: "md",
+		mod: {
+			zero: total === 0,
+			missing: total !== included
+		},
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			align: "flex-end",
+			children: [/* @__PURE__ */ jsx(Text, {
+				component: "div",
+				c: total !== included ? "orange" : "dimmed",
+				tt: "uppercase",
+				fw: 600,
+				fz: 10,
+				lh: 1,
+				children: title
+			}), /* @__PURE__ */ jsx(Text, {
+				fw: 600,
+				fz: "xl",
+				component: "div",
+				lh: 1,
+				children: total !== included ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					included,
+					" / ",
+					total
+				] }) : /* @__PURE__ */ jsx(Fragment$1, { children: total })
+			})]
+		})
+	});
+}
+
+export { TabPanelRelationships };

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

@@ -0,0 +1,29 @@
+import { css } from "@likec4/styles/css";
+
+// src/overlays/element-details/TabPanelStructure.css.ts
+const treeNodeLabel = css({
+	marginTop: "sm",
+	marginBottom: "sm"
+});
+const elementLabel = css({
+	display: "inline-flex",
+	transition: "fast",
+	border: "default",
+	borderStyle: "dashed",
+	borderRadius: "sm",
+	px: "md",
+	py: "xs",
+	alignItems: "center",
+	cursor: "pointer",
+	color: "mantine.gray[7]",
+	_dark: { color: "mantine.dark[1]" },
+	"& > *": { transition: "fast" },
+	_hover: {
+		transitionTimingFunction: "out",
+		borderStyle: "solid",
+		color: "text.default",
+		background: "surface.hover"
+	}
+});
+
+export { elementLabel, treeNodeLabel };

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

@@ -0,0 +1,95 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs";
+import { elementLabel, treeNodeLabel } from "./TabPanelStructure.css.mjs";
+import { useEffect, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Anchor, Box, Pill, Text, Tree, useTree } from "@mantine/core";
+
+// src/overlays/element-details/TabPanelStructure.tsx
+const ElementLabel = ({ element }) => /* @__PURE__ */ jsx(Box, {
+	className: elementLabel,
+	children: /* @__PURE__ */ jsx(Text, {
+		component: "div",
+		fz: "sm",
+		fw: "500",
+		children: element.title
+	})
+});
+const infoIcon = /* @__PURE__ */ jsx(IconInfoCircle, {});
+function TabPanelStructure({ element }) {
+	const tree = useTree({ multiple: false });
+	const data = useMemo(() => {
+		let seq = 1;
+		const messageNode = (label) => ({
+			label,
+			value: `msg${seq++}`,
+			type: "message",
+			children: []
+		});
+		const current = {
+			label: /* @__PURE__ */ jsx(ElementLabel, {
+				type: "current",
+				element
+			}),
+			value: element.id,
+			element,
+			type: "current",
+			children: ("children" in element ? [...element.children()] : []).map((child) => ({
+				label: /* @__PURE__ */ jsx(ElementLabel, {
+					type: "descedant",
+					element: child
+				}),
+				value: child.id,
+				element: child,
+				type: "descedant",
+				children: []
+			}))
+		};
+		if (current.children.length === 0) current.children.push(messageNode(/* @__PURE__ */ jsx(Pill, {
+			radius: "sm",
+			children: "no nested"
+		})));
+		return [[...element.ancestors()].reduce((acc, parent) => ({
+			label: /* @__PURE__ */ jsx(ElementLabel, {
+				type: "ancestor",
+				element: parent
+			}),
+			value: parent.id,
+			element: parent,
+			type: "ancestor",
+			children: [acc]
+		}), current)];
+	}, [element]);
+	useEffect(() => {
+		tree.expandAllNodes();
+	}, [data]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Alert, {
+		variant: "light",
+		color: "orange",
+		title: "In development",
+		icon: infoIcon,
+		children: [
+			"We need your feedback. Share your thoughts and ideas -",
+			" ",
+			/* @__PURE__ */ jsx(Anchor, {
+				fz: "sm",
+				fw: 500,
+				underline: "hover",
+				c: "orange",
+				href: "https://github.com/likec4/likec4/discussions/",
+				target: "_blank",
+				children: "GitHub discussions"
+			})
+		]
+	}), /* @__PURE__ */ jsx(Tree, {
+		levelOffset: "xl",
+		allowRangeSelection: false,
+		expandOnClick: false,
+		expandOnSpace: false,
+		classNames: { label: treeNodeLabel },
+		data,
+		tree
+	})] });
+}
+
+export { ElementLabel, TabPanelStructure };

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

@@ -0,0 +1,51 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { ViewIcon } from "../../components/ViewIcon.mjs";
+import { ViewButtonTitle, viewButton } from "./ElementDetailsCard.css.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { hasAtLeast, map, partition, pipe } from "remeda";
+import { Divider, ScrollArea, Stack, UnstyledButton } from "@mantine/core";
+import { isNonEmptyArray } from "@likec4/core/types";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { isElementModel } from "@likec4/core/model";
+
+// src/overlays/element-details/TabPanelViews.tsx
+const Divider$1 = Divider.withProps({
+	mb: 8,
+	labelPosition: "left",
+	variant: "dashed"
+});
+function TabPanelViews({ elementModel, onNavigateTo }) {
+	const [viewsOf, otherViews] = pipe([...elementModel.views()], map((v) => v.$view), partition((v) => v._type === "element" && v.viewOf === elementModel.id));
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		scrollbars: "y",
+		type: "auto",
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "lg",
+			children: [isNonEmptyArray(viewsOf) && /* @__PURE__ */ jsxs(Box$1, { children: [/* @__PURE__ */ jsx(Divider$1, { label: "views of the element (scoped)" }), /* @__PURE__ */ jsx(Stack, {
+				gap: "sm",
+				children: viewsOf.map((view) => /* @__PURE__ */ jsx(ViewButton, {
+					view,
+					onNavigateTo
+				}, view.id))
+			})] }), isNonEmptyArray(otherViews) && /* @__PURE__ */ jsxs(Box$1, { children: [/* @__PURE__ */ jsx(Divider$1, { label: isElementModel(elementModel) ? "views including this element" : "views including this deployment" }), /* @__PURE__ */ jsx(Stack, {
+				gap: "sm",
+				children: otherViews.map((view) => /* @__PURE__ */ jsx(ViewButton, {
+					view,
+					onNavigateTo
+				}, view.id))
+			})] })]
+		})
+	});
+}
+const ViewButton = ({ view, onNavigateTo }) => {
+	return /* @__PURE__ */ jsxs(UnstyledButton, {
+		className: viewButton,
+		onClick: (e) => {
+			e.stopPropagation();
+			onNavigateTo(view.id);
+		},
+		children: [/* @__PURE__ */ jsx(ViewIcon, { type: view._type }), /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(ViewButtonTitle, { children: view.title || "untitled" }) })]
+	});
+};
+
+export { TabPanelViews };

package/dist/overlays/element-details/actor.d.mts

@@ -0,0 +1,33 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { RelationshipsBrowserActorRef } from "../relationships-browser/actor.mjs";
+import { DetailsSubject } from "./subject.mjs";
+import { Rect } from "@xyflow/system";
+import { DiagramView, NodeId } from "@likec4/core/types";
+import { ActorRef, SnapshotFrom, StateMachine } from "xstate";
+export type ElementDetailsInput = {
+  subject: DetailsSubject;
+  currentView: DiagramView;
+  initiatedFrom?: {
+    node?: NodeId;
+    clientRect?: Rect;
+  };
+};
+export type Context = {
+  subject: DetailsSubject;
+  currentView: DiagramView;
+  initiatedFrom: {
+    node: NodeId | null;
+    clientRect: Rect | null;
+  };
+};
+export type Events = {
+  type: 'change.subject';
+  subject: DetailsSubject;
+} | {
+  type: 'close';
+};
+export interface ElementDetailsLogic extends StateMachine<Context, Events, {
+  [key: `${string}-relationships`]: RelationshipsBrowserActorRef | undefined;
+}, any, any, any, any, any, never, ElementDetailsInput, any, any, any, any> {}
+export type ElementDetailsSnapshot = SnapshotFrom<ElementDetailsLogic>;
+export interface ElementDetailsActorRef extends ActorRef<ElementDetailsSnapshot, Events> {}

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

@@ -0,0 +1,68 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { relationshipsBrowserLogic } from "../relationships-browser/actor.mjs";
+import { assign, enqueueActions, setup } from "xstate";
+
+// src/overlays/element-details/actor.ts
+const _elementDetailsLogic = setup({
+	types: {
+		context: {},
+		input: {},
+		events: {},
+		children: {}
+	},
+	actors: { relationshipsBrowserLogic }
+}).createMachine({
+	id: "element-details",
+	context: ({ input }) => ({
+		...input,
+		initiatedFrom: {
+			node: input.initiatedFrom?.node ?? null,
+			clientRect: input.initiatedFrom?.clientRect ?? null
+		}
+	}),
+	initial: "active",
+	states: {
+		"active": {
+			entry: enqueueActions(({ context, self, enqueue }) => {
+				if (context.subject.type === "element") enqueue.spawnChild("relationshipsBrowserLogic", {
+					id: `${self.id}-relationships`,
+					input: {
+						subject: context.subject.element,
+						viewId: context.currentView.id,
+						scope: "view",
+						enableSelectSubject: false,
+						enableChangeScope: true,
+						closeable: false
+					}
+				});
+			}),
+			exit: enqueueActions(({ context, self, enqueue }) => {
+				if (context.subject.type === "element") {
+					enqueue.sendTo(`${self.id}-relationships`, { type: "close" });
+					enqueue.stopChild(`${self.id}-relationships`);
+				}
+			}),
+			on: {
+				"change.subject": {
+					target: "active",
+					reenter: true,
+					actions: assign({
+						subject: ({ event }) => event.subject,
+						initiatedFrom: ({ context }) => ({
+							node: null,
+							clientRect: context.initiatedFrom.clientRect
+						})
+					})
+				},
+				"close": "closed"
+			}
+		},
+		closed: {
+			id: "closed",
+			type: "final"
+		}
+	}
+});
+const elementDetailsLogic = _elementDetailsLogic;
+
+export { elementDetailsLogic };

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

@@ -0,0 +1,16 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext } from "react";
+
+// src/overlays/element-details/actorContext.tsx
+/**
+* To improve experience with HMR, we use `createSafeContext` as a boundary for hooks
+*/
+const ElementDetailsActorContext = createContext(null);
+ElementDetailsActorContext.displayName = "ElementDetailsActorContext";
+const useElementDetailsActorRef = () => {
+	const ctx = useContext(ElementDetailsActorContext);
+	if (ctx === null) throw new Error("ElementDetailsActorRef is not provided");
+	return ctx;
+};
+
+export { ElementDetailsActorContext, useElementDetailsActorRef };

package/dist/overlays/element-details/subject.d.mts

@@ -0,0 +1,12 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import "../../base/types.mjs";
+import { DeploymentFqn, Fqn } from "@likec4/core";
+export type DetailsSubject = {
+  type: 'element';
+  element: Fqn;
+  deployment?: never;
+} | {
+  type: 'deployment';
+  deployment: DeploymentFqn;
+  element?: never;
+};

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

@@ -0,0 +1,15 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+
+// src/overlays/element-details/subject.ts
+function detailsSubject(data) {
+	if (data.deploymentFqn) return {
+		type: "deployment",
+		deployment: data.deploymentFqn
+	};
+	return data.modelFqn ? {
+		type: "element",
+		element: data.modelFqn
+	} : null;
+}
+
+export { detailsSubject };

package/dist/overlays/hooks.mjs

@@ -0,0 +1,6 @@
+import { createSafeContextForActor } from "../hooks/safeContext.mjs";
+
+// src/overlays/hooks.ts
+const { ContextProvider: OverlaysActorContext, selectSnapshot: selectOverlaysSnapshot, useActorSelector: useSelectOverlaysActor } = createSafeContextForActor("Overlays");
+
+export { OverlaysActorContext, selectOverlaysSnapshot, useSelectOverlaysActor };

package/dist/overlays/overlay/Overlay.d.mts

@@ -0,0 +1,52 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { PropsWithChildren } from "react";
+export type OverlayProps = PropsWithChildren<{
+  fullscreen?: boolean | undefined;
+  withBackdrop?: boolean | undefined;
+  overlayLevel?: number;
+  className?: string;
+  classes?: {
+    dialog?: string;
+    body?: string;
+  };
+  backdrop?: {
+    opacity?: number;
+  };
+  /**
+   * Delay before showing the overlay content (in milliseconds) - helps to avoid flickering
+   * Default: `130ms`
+   * If set to `0`, the content will be shown immediately
+   */
+  openDelay?: number;
+  /**
+   * Called when the overlay is closed by outside click or escape key
+   */
+  onClose: () => void;
+  onClick?: never;
+}>;
+export declare const Overlay: import("react").ForwardRefExoticComponent<{
+  fullscreen?: boolean | undefined;
+  withBackdrop?: boolean | undefined;
+  overlayLevel?: number;
+  className?: string;
+  classes?: {
+    dialog?: string;
+    body?: string;
+  };
+  backdrop?: {
+    opacity?: number;
+  };
+  /**
+   * Delay before showing the overlay content (in milliseconds) - helps to avoid flickering
+   * Default: `130ms`
+   * If set to `0`, the content will be shown immediately
+   */
+  openDelay?: number;
+  /**
+   * Called when the overlay is closed by outside click or escape key
+   */
+  onClose: () => void;
+  onClick?: never;
+} & {
+  children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/overlays/overlay/Overlay.mjs

@@ -0,0 +1,116 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { cx } from "@likec4/styles/css";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { useTimeoutEffect } from "@react-hookz/web";
+import { RemoveScroll } from "@mantine/core";
+import { m, useIsPresent, useReducedMotionConfig } from "motion/react";
+import { useFocusTrap, useMergedRef } from "@mantine/hooks";
+import { overlay } from "@likec4/styles/recipes";
+
+// src/overlays/overlay/Overlay.tsx
+const backdropBlur = "--_blur";
+const backdropOpacity = "--_opacity";
+const cssVarLevel = "--_level";
+const Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, children, fullscreen = false, withBackdrop = true, backdrop, openDelay = 120, ...rest }, ref) => {
+	const [opened, setOpened] = useState(false);
+	const focusTrapRef = useFocusTrap(opened);
+	const dialogRef = useRef(null);
+	const onCloseCalledRef = useRef(false);
+	const motionNotReduced = useReducedMotionConfig() !== true;
+	/**
+	* This function is called when the overlay is closed by outside click or escape key.
+	* It ensures that the onClose callback is only called once.
+	*/
+	const closeMe = () => {
+		if (!onCloseCalledRef.current) {
+			onCloseCalledRef.current = true;
+			onClose();
+		}
+	};
+	const isPresent = useIsPresent();
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (dialog && !dialog.open) dialog.showModal();
+		if (openDelay === 0) setOpened(true);
+	}, []);
+	useEffect(() => {
+		if (isPresent) return;
+		const dialog = dialogRef.current;
+		return () => {
+			onCloseCalledRef.current = true;
+			if (dialog?.open) dialog.close();
+		};
+	}, [isPresent]);
+	useTimeoutEffect(() => setOpened(true), !opened && openDelay > 0 ? openDelay : void 0);
+	const overlayRecipe = overlay({
+		fullscreen,
+		withBackdrop
+	});
+	let targetBackdropOpacity = overlayLevel > 0 ? "50%" : "60%";
+	if (backdrop?.opacity !== void 0) targetBackdropOpacity = `${backdrop.opacity * 100}%`;
+	const motionProps = useMemo(() => ({
+		initial: {
+			[backdropBlur]: "2px",
+			[backdropOpacity]: "20%",
+			scaleX: .95,
+			scaleY: .85,
+			originY: 0,
+			translateY: -8,
+			opacity: 0
+		},
+		animate: {
+			[backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
+			[backdropOpacity]: targetBackdropOpacity,
+			scaleX: 1,
+			scaleY: 1,
+			originY: 0,
+			translateY: 0,
+			opacity: 1
+		},
+		exit: {
+			scaleX: .9,
+			scaleY: .8,
+			originY: 0,
+			translateY: -10,
+			opacity: 0,
+			[backdropBlur]: "2px",
+			[backdropOpacity]: "20%"
+		}
+	}), [overlayLevel, targetBackdropOpacity]);
+	return /* @__PURE__ */ jsx(m.dialog, {
+		ref: useMergedRef(dialogRef, ref),
+		className: cx(classes?.dialog, className, overlayRecipe, fullscreen && RemoveScroll.classNames.fullWidth),
+		layout: true,
+		style: { [cssVarLevel]: overlayLevel },
+		...motionNotReduced ? motionProps : { initial: {
+			[backdropBlur]: "8px",
+			[backdropOpacity]: targetBackdropOpacity
+		} },
+		onDoubleClick: stopPropagation,
+		onPointerDown: stopPropagation,
+		...rest,
+		onClick: (e) => {
+			e.stopPropagation();
+			if (e.target === e.currentTarget) closeMe();
+		},
+		onCancel: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			closeMe();
+		},
+		onClose: closeMe,
+		children: /* @__PURE__ */ jsx(RemoveScroll, {
+			forwardProps: true,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: focusTrapRef,
+				className: cx(classes?.body, "likec4-overlay-body"),
+				children: opened && /* @__PURE__ */ jsx(Fragment$1, { children })
+			})
+		})
+	});
+});
+Overlay.displayName = "Overlay";
+
+export { Overlay };