@likec4/diagram 1.59.4 → 1.60.0

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

@@ -1,285 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { filter, find, 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";
-//#region src/overlays/relationship-details/layout.ts
-/**
-* All constants related to the layout
-*/
-var Sizes = {
-	dagre: {
-		ranksep: 60,
-		nodesep: 35,
-		edgesep: 25
-	},
-	edgeLabel: {
-		width: 220,
-		height: 55
-	},
-	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;
-}
-var 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) {
-	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);
-		g.setEdge(source.portId, target.portId, { ...Sizes.edgeLabel }, name);
-		return {
-			name,
-			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) for (const edge of g.edges()) g.setEdge(edge, {
-		...Sizes.edgeLabel,
-		width: edgeCount > 10 ? 800 : 400
-	});
-	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 } = find(edges, (e) => e.name === ename);
-			const label = relationship.title ?? "untitled";
-			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,
-				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;
-		}, [])
-	};
-}
-//#endregion
-export { layoutRelationshipDetails };

package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts

@@ -1,11 +0,0 @@
-import { RelationshipsBrowserActorRef } from './actor';
-export type RelationshipsBrowserProps = {
-    actorRef: RelationshipsBrowserActorRef;
-};
-export declare function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps): import("react").JSX.Element;
-/**
- * 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.
- */
-export declare function buildRelationshipUrl(subjectId: string, scope: 'global' | 'view'): string;

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

@@ -1,339 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.js";
-import { BaseXYFlow } from "../../base/BaseXYFlow.js";
-import { useRelationshipsView } from "./layout.js";
-import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.js";
-import { RelationshipEdge } from "./custom/edgeTypes.js";
-import { EmptyNode } from "./custom/EmptyNode.js";
-import { CompoundNode, ElementNode } from "./custom/nodeTypes.js";
-import { SelectElement } from "./SelectElement.js";
-import { cx } from "@likec4/styles/css";
-import { IconAlertTriangle, IconCheck, IconChevronLeft, IconChevronRight, IconLink, IconX } from "@tabler/icons-react";
-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";
-//#region src/overlays/relationships-browser/RelationshipsBrowser.tsx
-var nodeTypes = {
-	element: ElementNode,
-	compound: CompoundNode,
-	empty: EmptyNode
-};
-var 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, {}) })
-			})
-		})
-	});
-}
-var selector = (state) => ({
-	isActive: state.hasTag("active"),
-	nodes: state.context.xynodes,
-	edges: state.context.xyedges
-});
-var selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
-var 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, {})
-	});
-});
-var selector2 = (state) => ({
-	subjectId: state.context.subject,
-	viewId: state.context.viewId,
-	scope: state.context.scope,
-	closeable: state.context.closeable
-});
-var 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, {})
-			})]
-		})
-	})] });
-});
-var 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, {})]
-		})
-	});
-};
-var 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.
-*/
-var 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
-		})
-	});
-};
-//#endregion
-export { RelationshipsBrowser, buildRelationshipUrl };

package/dist/overlays/relationships-browser/SelectElement.css.d.ts

@@ -1,3 +0,0 @@
-export declare const node: string;
-export declare const label: string;
-export declare const scrollArea: string;

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

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

package/dist/overlays/relationships-browser/SelectElement.d.ts

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