@likec4/diagram 1.59.4 → 1.61.0

package/dist/overlays/relationship-details/layout.mjs

@@ -0,0 +1,313 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { measureEdgeLabel } from "../../utils/measure-edge-label.mjs";
+import { filter, find, isNumber, map, mapToObj, omit, pipe, prop, reduce, sortBy, tap } from "remeda";
+import { DefaultMap, ifind, invariant } from "@likec4/core/utils";
+import { exact, preferSummary } from "@likec4/core/types";
+import { treeFromElements } from "@likec4/core/compute-view";
+import dagre from "@dagrejs/dagre";
+
+// src/overlays/relationship-details/layout.ts
+/**
+* All constants related to the layout
+*/
+const Sizes = {
+	dagre: {
+		ranksep: 60,
+		nodesep: 35,
+		edgesep: 25
+	},
+	edgeLabel: {
+		width: 220,
+		height: 55,
+		labelpos: "c"
+	},
+	nodeWidth: 330,
+	nodeHeight: 180,
+	spacerHeight: 0,
+	compound: {
+		labelHeight: 2,
+		paddingTop: 50,
+		paddingBottom: 32
+	}
+};
+function createGraph() {
+	const g = new dagre.graphlib.Graph({
+		directed: true,
+		compound: true,
+		multigraph: true
+	});
+	g.setGraph({
+		...Sizes.dagre,
+		rankdir: "LR"
+	});
+	g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }));
+	g.setDefaultNodeLabel(() => ({}));
+	return g;
+}
+const PortSuffix = "-port";
+function createNodes(column, elements, g) {
+	const graphNodes = new DefaultMap((key) => ({
+		id: `${column}-${key}`,
+		portId: `${column}-${key}`
+	}));
+	const tree = treeFromElements(elements);
+	for (const element of tree.sorted) {
+		const isCompound = tree.children(element).length > 0;
+		const fqn = element.id;
+		const id = `${column}-${fqn}`;
+		const portId = isCompound ? `${id}${PortSuffix}` : id;
+		graphNodes.set(fqn, {
+			id,
+			portId
+		});
+		g.setNode(id, {
+			column,
+			element,
+			isCompound,
+			portId,
+			inPorts: [],
+			outPorts: [],
+			width: Sizes.nodeWidth,
+			height: Sizes.nodeHeight
+		});
+		if (isCompound) {
+			g.setNode(portId, {
+				element,
+				portId,
+				isCompound,
+				inPorts: [],
+				outPorts: [],
+				width: Sizes.nodeWidth - Sizes.dagre.ranksep,
+				height: Sizes.compound.labelHeight
+			});
+			g.setParent(portId, id);
+		}
+		const parent = tree.parent(element);
+		if (parent) g.setParent(id, `${column}-${parent.id}`);
+	}
+	return {
+		...tree,
+		byId: (id) => {
+			const element = tree.byId(id);
+			return {
+				element,
+				graph: graphNodes.get(element.id)
+			};
+		},
+		graphNodes
+	};
+}
+/**
+* Apply dagre layout to the graph
+* And return a function to get node bounds for xyflow
+*/
+function applyDagreLayout(g) {
+	dagre.layout(g, {});
+	return (nodeId) => {
+		const { x, y, width, height } = g.node(nodeId);
+		return {
+			position: {
+				x: x - Math.round(width / 2),
+				y: y - Math.round(height / 2)
+			},
+			width,
+			height
+		};
+	};
+}
+function layoutRelationshipDetails(data, scope, { withNavigateButtons = false } = {}) {
+	const g = createGraph();
+	const sources = createNodes("sources", data.sources, g);
+	const targets = createNodes("targets", data.targets, g);
+	const edges = Array.from(data.relationships).map((r) => {
+		const source = sources.byId(r.source.id).graph;
+		const target = targets.byId(r.target.id).graph;
+		const name = r.id;
+		g.node(source.id).outPorts.push(target.id);
+		g.node(target.id).inPorts.push(source.id);
+		const label = measureEdgeLabel({
+			label: r.title ?? "untitled",
+			technology: r.technology,
+			withActionButton: withNavigateButtons && !!r.navigateTo
+		});
+		g.setEdge(source.portId, target.portId, {
+			...Sizes.edgeLabel,
+			width: label.width,
+			height: label.height
+		}, name);
+		return {
+			name,
+			label,
+			source: source.id,
+			sourceHandle: source.id + "_out" + (g.node(source.id).outPorts.length - 1),
+			target: target.id,
+			targetHandle: target.id + "_in" + (g.node(target.id).inPorts.length - 1),
+			relationship: r
+		};
+	});
+	const nodeIds = [...sources.graphNodes.values(), ...targets.graphNodes.values()];
+	for (const { id: nodeId } of nodeIds) {
+		const node = g.node(nodeId);
+		if (node.isCompound) continue;
+		const edgeCount = Math.max(g.inEdges(nodeId)?.length ?? 0, g.outEdges(nodeId)?.length ?? 0);
+		if (edgeCount > 3) node.height = node.height + (edgeCount - 4) * 14;
+	}
+	const edgeCount = g.edgeCount();
+	if (edgeCount > 5) {
+		const minWidth = edgeCount > 10 ? 800 : 400;
+		for (const edge of g.edges()) {
+			const config = g.edge(edge);
+			const width = config["width"];
+			g.setEdge(edge, {
+				...config,
+				width: Math.max(isNumber(width) ? width : 0, minWidth)
+			});
+		}
+	}
+	const dagreBounds = applyDagreLayout(g);
+	const _calculatedNodeBounds = pipe(nodeIds, filter((n) => n.id === n.portId), mapToObj((n) => [n.id, dagreBounds(n.id)]));
+	function nodeBounds(nodeId) {
+		return _calculatedNodeBounds[nodeId] ??= pipe(g.children(nodeId) ?? [], filter((id) => !id.endsWith(PortSuffix)), map((id) => nodeBounds(id)), tap((bounds) => {
+			invariant(bounds.length > 0, `Node ${nodeId} has no nested nodes`);
+		}), reduce((acc, bounds) => {
+			return {
+				minY: Math.min(acc.minY, bounds.position.y),
+				maxY: Math.max(acc.maxY, bounds.position.y + bounds.height)
+			};
+		}, {
+			minY: Infinity,
+			maxY: -Infinity
+		}), ({ minY, maxY }) => {
+			const { position: { x }, width } = dagreBounds(nodeId);
+			minY = minY - Sizes.compound.paddingTop;
+			maxY = maxY + Sizes.compound.paddingBottom;
+			return {
+				position: {
+					x,
+					y: minY
+				},
+				width,
+				height: maxY - minY
+			};
+		});
+	}
+	function nodeLevel(nodeId) {
+		const parent = g.parent(nodeId);
+		if (parent) return nodeLevel(parent) + 1;
+		return 0;
+	}
+	function nodeDepth(nodeId) {
+		const children = g.children(nodeId) ?? [];
+		if (children.length === 0) return 0;
+		return 1 + Math.max(...children.map(nodeDepth));
+	}
+	const sortedPorts = (nodeId, type, ports) => {
+		return pipe(ports, map((port, index) => {
+			return {
+				port: nodeId + "_" + type + index,
+				topY: nodeBounds(port).position.y
+			};
+		}), sortBy(prop("topY")), map(prop("port")));
+	};
+	let minX = 0;
+	let minY = 0;
+	const nodes = nodeIds.map(({ id }) => {
+		const { element, inPorts, outPorts, column } = g.node(id);
+		let { position, width, height } = nodeBounds(id);
+		const parentId = g.parent(id);
+		const children = (g.children(id) ?? []).filter((c) => !c.endsWith(PortSuffix));
+		minX = Math.min(minX, position.x);
+		minY = Math.min(minY, position.y);
+		const navigateTo = scope ? ifind(element.scopedViews(), (v) => v.id !== scope.id)?.id ?? null : null;
+		const inheritFromNode = scope?.findNodeWithElement(element.id);
+		const scopedAncestor = scope && !inheritFromNode ? ifind(element.ancestors(), (a) => !!scope.findNodeWithElement(a.id))?.id : null;
+		const inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && scope?.findNodeWithElement(scopedAncestor));
+		return exact({
+			id,
+			parent: parentId ?? null,
+			x: position.x,
+			y: position.y,
+			title: element.title,
+			description: preferSummary(element.$element) ?? null,
+			technology: element.technology,
+			tags: [...element.tags],
+			links: null,
+			color: inheritFromNodeOrAncestor?.color ?? element.color,
+			shape: inheritFromNode?.shape ?? element.shape,
+			icon: inheritFromNode?.icon ?? element.icon ?? "none",
+			modelRef: element.id,
+			kind: element.kind,
+			level: nodeLevel(id),
+			labelBBox: {
+				x: position.x,
+				y: position.y,
+				width,
+				height
+			},
+			style: omit({
+				...(inheritFromNode ?? inheritFromNodeOrAncestor)?.style,
+				...element.$element.style
+			}, [
+				"shape",
+				"color",
+				"icon"
+			]),
+			navigateTo,
+			...children.length > 0 && { depth: nodeDepth(id) },
+			children,
+			width,
+			height,
+			column,
+			ports: {
+				in: sortedPorts(id, "in", inPorts),
+				out: sortedPorts(id, "out", outPorts)
+			}
+		});
+	});
+	return {
+		bounds: {
+			x: Math.min(minX, 0),
+			y: Math.min(minY, 0),
+			width: g.graph().width ?? 100,
+			height: g.graph().height ?? 100
+		},
+		nodes,
+		edges: g.edges().reduce((acc, e) => {
+			const edge = g.edge(e);
+			const ename = e.name;
+			if (!ename) return acc;
+			const { name, source, target, relationship, sourceHandle, targetHandle, label } = find(edges, (e) => e.name === ename);
+			const labelX = edge["x"];
+			const labelY = edge["y"];
+			invariant(isNumber(labelX) && isNumber(labelY), `dagre should place the label of ${name}`);
+			const navigateTo = relationship.navigateTo?.id ?? null;
+			const description = preferSummary(relationship.$relationship) ?? null;
+			const technology = relationship.technology ?? null;
+			acc.push({
+				id: name,
+				source,
+				sourceHandle,
+				target,
+				targetHandle,
+				label: label.label,
+				labelBBox: {
+					x: Math.round(labelX - label.width / 2),
+					y: Math.round(labelY - label.height / 2),
+					width: label.width,
+					height: label.height
+				},
+				color: relationship.color,
+				description,
+				...navigateTo && { navigateTo },
+				...technology && { technology },
+				points: edge.points.map((p) => [p.x, p.y]),
+				line: relationship.line,
+				relationId: relationship.id,
+				parent: null
+			});
+			return acc;
+		}, [])
+	};
+}
+
+export { layoutRelationshipDetails };

package/dist/overlays/relationships-browser/RelationshipsBrowser.mjs

@@ -0,0 +1,345 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconAlertTriangle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.mjs";
+import IconCheck from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs";
+import IconChevronLeft from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.mjs";
+import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import IconLink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.mjs";
+import IconX from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import { BaseXYFlow } from "../../base/BaseXYFlow.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
+import { CompoundNode, ElementNode } from "./custom/nodeTypes.mjs";
+import { EmptyNode } from "./custom/EmptyNode.mjs";
+import { RelationshipEdge } from "./custom/edgeTypes.mjs";
+import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.mjs";
+import { useRelationshipsView } from "./layout.mjs";
+import { SelectElement } from "./SelectElement.mjs";
+import { cx } from "@likec4/styles/css";
+import { memo, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+import { ActionIcon, Group, Tooltip } from "@mantine/core";
+import { AnimatePresence, LayoutGroup, m } from "motion/react";
+import { useClipboard, useStateHistory } from "@mantine/hooks";
+
+// src/overlays/relationships-browser/RelationshipsBrowser.tsx
+const nodeTypes = {
+	element: ElementNode,
+	compound: CompoundNode,
+	empty: EmptyNode
+};
+const edgeTypes = { relationship: RelationshipEdge };
+function RelationshipsBrowser({ actorRef }) {
+	const initialRef = useRef(null);
+	if (initialRef.current == null) initialRef.current = {
+		initialNodes: [],
+		initialEdges: []
+	};
+	return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, {
+		value: actorRef,
+		children: /* @__PURE__ */ jsx(ReactFlowProvider, {
+			...initialRef.current,
+			children: /* @__PURE__ */ jsx(LayoutGroup, {
+				id: actorRef.sessionId,
+				inherit: false,
+				children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) })
+			})
+		})
+	});
+}
+const selector = (state) => ({
+	isActive: state.hasTag("active"),
+	nodes: state.context.xynodes,
+	edges: state.context.xyedges
+});
+const selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
+const RelationshipsBrowserXYFlow = memo(() => {
+	const browser = useRelationshipsBrowser();
+	const { isActive, nodes, edges } = useRelationshipsBrowserState(selector, selectorEq);
+	return /* @__PURE__ */ jsx(BaseXYFlow, {
+		id: browser.rootElementId,
+		nodes,
+		edges,
+		className: cx(isActive ? "initialized" : "not-initialized", "relationships-browser"),
+		nodeTypes,
+		edgeTypes,
+		fitView: false,
+		onNodeClick: useCallbackRef$1((_e, node) => {
+			_e.stopPropagation();
+			browser.send({
+				type: "xyflow.nodeClick",
+				node
+			});
+		}),
+		onEdgeClick: useCallbackRef$1((_e, edge) => {
+			_e.stopPropagation();
+			browser.send({
+				type: "xyflow.edgeClick",
+				edge
+			});
+		}),
+		onPaneClick: useCallbackRef$1((_e) => {
+			_e.stopPropagation();
+			browser.send({ type: "xyflow.paneClick" });
+		}),
+		onDoubleClick: useCallbackRef$1((_e) => {
+			browser.send({ type: "xyflow.paneDblClick" });
+		}),
+		onViewportResize: useCallbackRef$1(() => {
+			browser.send({ type: "xyflow.resized" });
+		}),
+		onNodesChange: useCallbackRef$1((changes) => {
+			browser.send({
+				type: "xyflow.applyNodeChanges",
+				changes
+			});
+		}),
+		onEdgesChange: useCallbackRef$1((changes) => {
+			browser.send({
+				type: "xyflow.applyEdgeChanges",
+				changes
+			});
+		}),
+		onEdgeMouseEnter: useCallbackRef$1((_event, edge) => {
+			if (!edge.data.hovered) browser.send({
+				type: "xyflow.edgeMouseEnter",
+				edge
+			});
+		}),
+		onEdgeMouseLeave: useCallbackRef$1((_event, edge) => {
+			if (edge.data.hovered) browser.send({
+				type: "xyflow.edgeMouseLeave",
+				edge
+			});
+		}),
+		onSelectionChange: useCallbackRef$1((params) => {
+			browser.send({
+				type: "xyflow.selectionChange",
+				...params
+			});
+		}),
+		nodesDraggable: false,
+		nodesSelectable: true,
+		pannable: true,
+		zoomable: true,
+		children: /* @__PURE__ */ jsx(RelationshipsBrowserInner, {})
+	});
+});
+const selector2 = (state) => ({
+	subjectId: state.context.subject,
+	viewId: state.context.viewId,
+	scope: state.context.scope,
+	closeable: state.context.closeable
+});
+const RelationshipsBrowserInner = memo(() => {
+	const browser = useRelationshipsBrowser();
+	const { subjectId, viewId, scope, closeable } = useRelationshipsBrowserState(selector2);
+	const store = useStoreApi();
+	const instance = useReactFlow();
+	useEffect(() => {
+		if (instance.viewportInitialized) browser.send({
+			type: "xyflow.init",
+			instance,
+			store
+		});
+	}, [
+		store,
+		instance.viewportInitialized,
+		browser
+	]);
+	const layouted = useRelationshipsView(subjectId, viewId, scope);
+	const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
+	useEffect(() => {
+		if (historySubjectId !== subjectId) historyOps.set(subjectId);
+	}, [subjectId]);
+	useEffect(() => {
+		if (historySubjectId !== subjectId) browser.navigateTo(historySubjectId);
+	}, [historySubjectId, browser]);
+	useEffect(() => {
+		browser.updateView(layouted);
+	}, [layouted, browser]);
+	const hasStepBack = current > 0;
+	const hasStepForward = current + 1 < history.length;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TopLeftPanel, {
+		hasStepBack,
+		hasStepForward,
+		onStepBack: () => historyOps.back(),
+		onStepForward: () => historyOps.forward()
+	}), closeable && /* @__PURE__ */ jsx(Panel, {
+		position: "top-right",
+		children: /* @__PURE__ */ jsxs(Group, {
+			gap: 4,
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsx(CopyLinkButton, {
+				subjectId,
+				scope
+			}), /* @__PURE__ */ jsx(ActionIcon, {
+				variant: "default",
+				color: "gray",
+				onClick: (e) => {
+					e.stopPropagation();
+					browser.close();
+				},
+				children: /* @__PURE__ */ jsx(IconX, {})
+			})]
+		})
+	})] });
+});
+const TopLeftPanel = ({ hasStepBack, hasStepForward, onStepBack, onStepForward }) => {
+	return /* @__PURE__ */ jsx(Panel, {
+		position: "top-left",
+		children: /* @__PURE__ */ jsxs(Group, {
+			gap: 4,
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsxs(AnimatePresence, {
+				mode: "popLayout",
+				children: [hasStepBack && /* @__PURE__ */ jsx(m.div, {
+					layout: true,
+					initial: {
+						opacity: .05,
+						transform: "translateX(-5px)"
+					},
+					animate: {
+						opacity: 1,
+						transform: "translateX(0)"
+					},
+					exit: {
+						opacity: .05,
+						transform: "translateX(-10px)"
+					},
+					children: /* @__PURE__ */ jsx(ActionIcon, {
+						variant: "default",
+						color: "gray",
+						onClick: (e) => {
+							e.stopPropagation();
+							onStepBack();
+						},
+						children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+					})
+				}, "back"), hasStepForward && /* @__PURE__ */ jsx(m.div, {
+					layout: true,
+					initial: {
+						opacity: .05,
+						transform: "translateX(5px)"
+					},
+					animate: {
+						opacity: 1,
+						transform: "translateX(0)"
+					},
+					exit: {
+						opacity: 0,
+						transform: "translateX(5px)"
+					},
+					children: /* @__PURE__ */ jsx(ActionIcon, {
+						variant: "default",
+						color: "gray",
+						onClick: (e) => {
+							e.stopPropagation();
+							onStepForward();
+						},
+						children: /* @__PURE__ */ jsx(IconChevronRight, {})
+					})
+				}, "forward")]
+			}), /* @__PURE__ */ jsx(SelectElement, {})]
+		})
+	});
+};
+const Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 400,
+	closeDelay: 150,
+	label: "",
+	children: null,
+	offset: 4,
+	withinPortal: false
+});
+/**
+* Builds a shareable URL with the relationships parameter.
+* Handles both browser history routing and hash-based routing.
+* Preserves base paths when app is hosted under a sub-path.
+*/
+function buildRelationshipUrl(subjectId, scope) {
+	const currentUrl = new URL(window.location.href);
+	if (currentUrl.hash.startsWith("#/")) {
+		const hashUrl = new URL(currentUrl.hash.substring(1), currentUrl.origin);
+		hashUrl.searchParams.set("relationships", subjectId);
+		hashUrl.searchParams.set("relationshipsScope", scope);
+		const cleanPath = hashUrl.pathname.replace(/\/$/, "");
+		return `${currentUrl.origin}${currentUrl.pathname}${currentUrl.search}#${cleanPath}${hashUrl.search}`;
+	}
+	currentUrl.searchParams.set("relationships", subjectId);
+	currentUrl.searchParams.set("relationshipsScope", scope);
+	return currentUrl.href;
+}
+/**
+* Button that copies a direct link to the current relationship view.
+* Shows visual feedback for both success and failure states.
+* Note: Clipboard API requires HTTPS or localhost. This is a browser security restriction, not a code issue.
+*/
+const CopyLinkButton = ({ subjectId, scope }) => {
+	const clipboard = useClipboard({ timeout: 2e3 });
+	const [copyError, setCopyError] = useState(false);
+	const errorTimeoutRef = useRef(null);
+	const handleCopy = async (e) => {
+		e.stopPropagation();
+		setCopyError(false);
+		if (errorTimeoutRef.current) {
+			clearTimeout(errorTimeoutRef.current);
+			errorTimeoutRef.current = null;
+		}
+		const url = buildRelationshipUrl(subjectId, scope);
+		if (!window.isSecureContext) {
+			setCopyError(true);
+			errorTimeoutRef.current = window.setTimeout(() => {
+				setCopyError(false);
+			}, 2e3);
+			return;
+		}
+		clipboard.copy(url);
+	};
+	useEffect(() => {
+		if (clipboard.error) {
+			setCopyError(true);
+			if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current);
+			errorTimeoutRef.current = window.setTimeout(() => {
+				setCopyError(false);
+			}, 2e3);
+		}
+	}, [clipboard.error]);
+	useEffect(() => {
+		return () => {
+			if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current);
+		};
+	}, []);
+	const getButtonState = () => {
+		if (clipboard.copied) return {
+			icon: /* @__PURE__ */ jsx(IconCheck, {}),
+			tooltip: "Link copied!"
+		};
+		if (copyError) return {
+			icon: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+			tooltip: "Copy failed - Clipboard requires HTTPS or localhost"
+		};
+		return {
+			icon: /* @__PURE__ */ jsx(IconLink, {}),
+			tooltip: "Copy link to this relationship view"
+		};
+	};
+	const buttonState = getButtonState();
+	return /* @__PURE__ */ jsx(Tooltip$1, {
+		label: buttonState.tooltip,
+		withArrow: true,
+		position: "top",
+		withinPortal: false,
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			variant: "default",
+			color: "gray",
+			onClick: handleCopy,
+			"aria-label": "Copy relationship URL",
+			children: buttonState.icon
+		})
+	});
+};
+
+export { RelationshipsBrowser, buildRelationshipUrl };

package/dist/overlays/relationships-browser/SelectElement.css.mjs

@@ -0,0 +1,14 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { css } from "@likec4/styles/css";
+
+// src/overlays/relationships-browser/SelectElement.css.ts
+var SelectElement_css_exports = /* @__PURE__ */ __exportAll({
+	label: () => label,
+	node: () => node,
+	scrollArea: () => scrollArea
+});
+const node = css({ margin: "0" });
+const label = css({ _hover: { backgroundColor: "surface.hover" } });
+const scrollArea = css({ maxHeight: ["[70vh]", "[calc(100cqh - 70px)]"] });
+
+export { SelectElement_css_exports, label, node, scrollArea };