@likec4/diagram 1.55.0 → 1.56.0

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

@@ -1,334 +1,332 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { Group, ActionIcon, Tooltip as Tooltip$1 } from '@mantine/core';
-import { useStateHistory, useClipboard } from '@mantine/hooks';
-import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
-import { shallowEqual } from 'fast-equals';
-import { LayoutGroup, AnimatePresence, m } from 'motion/react';
-import { useRef, memo, useEffect, useState } from 'react';
-import { BaseXYFlow } from '../../base/BaseXYFlow.js';
-import { useCallbackRef } from '../../hooks/useCallbackRef.js';
-import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
-import { useRelationshipsView } from './layout.js';
-import { SelectElement } from './SelectElement.js';
-import { RelationshipEdge } from './custom/edgeTypes.js';
-import { EmptyNode } from './custom/EmptyNode.js';
-import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-import IconCheck from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
-
-const nodeTypes = {
-  element: ElementNode,
-  compound: CompoundNode,
-  empty: EmptyNode
-};
-const edgeTypes = {
-  relationship: RelationshipEdge
+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, {}) }) }) }) });
+	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
+var 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((_e, node) => {
-        _e.stopPropagation();
-        browser.send({ type: "xyflow.nodeClick", node });
-      }),
-      onEdgeClick: useCallbackRef((_e, edge) => {
-        _e.stopPropagation();
-        browser.send({ type: "xyflow.edgeClick", edge });
-      }),
-      onPaneClick: useCallbackRef((_e) => {
-        _e.stopPropagation();
-        browser.send({ type: "xyflow.paneClick" });
-      }),
-      onDoubleClick: useCallbackRef((_e) => {
-        browser.send({ type: "xyflow.paneDblClick" });
-      }),
-      onViewportResize: useCallbackRef(() => {
-        browser.send({ type: "xyflow.resized" });
-      }),
-      onNodesChange: useCallbackRef((changes) => {
-        browser.send({ type: "xyflow.applyNodeChanges", changes });
-      }),
-      onEdgesChange: useCallbackRef((changes) => {
-        browser.send({ type: "xyflow.applyEdgeChanges", changes });
-      }),
-      onEdgeMouseEnter: useCallbackRef((_event, edge) => {
-        if (!edge.data.hovered) {
-          browser.send({ type: "xyflow.edgeMouseEnter", edge });
-        }
-      }),
-      onEdgeMouseLeave: useCallbackRef((_event, edge) => {
-        if (edge.data.hovered) {
-          browser.send({ type: "xyflow.edgeMouseLeave", edge });
-        }
-      }),
-      onSelectionChange: useCallbackRef((params) => {
-        browser.send({ type: "xyflow.selectionChange", ...params });
-      }),
-      nodesDraggable: false,
-      nodesSelectable: true,
-      pannable: true,
-      zoomable: true,
-      children: /* @__PURE__ */ jsx(RelationshipsBrowserInner, {})
-    }
-  );
+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, {})
+	});
 });
-const selector2 = (state) => ({
-  subjectId: state.context.subject,
-  viewId: state.context.viewId,
-  scope: state.context.scope,
-  closeable: state.context.closeable
+var 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, { 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 }),
-      /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          variant: "default",
-          color: "gray",
-          onClick: (e) => {
-            e.stopPropagation();
-            browser.close();
-          },
-          children: /* @__PURE__ */ jsx(IconX, {})
-        }
-      )
-    ] }) })
-  ] });
+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]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TopLeftPanel, {
+		hasStepBack: current > 0,
+		hasStepForward: current + 1 < history.length,
+		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 }), /* @__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: 0.05, transform: "translateX(-5px)" },
-          animate: { opacity: 1, transform: "translateX(0)" },
-          exit: {
-            opacity: 0.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: 0.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 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 = Tooltip$1.withProps({
-  color: "dark",
-  fz: "xs",
-  openDelay: 400,
-  closeDelay: 150,
-  label: "",
-  children: null,
-  offset: 4,
-  withinPortal: false
+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) {
-  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);
-    const cleanPath = hashUrl.pathname.replace(/\/$/, "");
-    return `${currentUrl.origin}${currentUrl.pathname}${currentUrl.search}#${cleanPath}${hashUrl.search}`;
-  }
-  currentUrl.searchParams.set("relationships", subjectId);
-  return currentUrl.href;
+	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);
+		const cleanPath = hashUrl.pathname.replace(/\/$/, "");
+		return `${currentUrl.origin}${currentUrl.pathname}${currentUrl.search}#${cleanPath}${hashUrl.search}`;
+	}
+	currentUrl.searchParams.set("relationships", subjectId);
+	return currentUrl.href;
 }
-const CopyLinkButton = ({ subjectId }) => {
-  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);
-    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, { label: buttonState.tooltip, withArrow: true, position: "top", withinPortal: false, children: /* @__PURE__ */ jsx(
-    ActionIcon,
-    {
-      variant: "default",
-      color: "gray",
-      onClick: handleCopy,
-      "aria-label": "Copy link to this relationship view",
-      children: buttonState.icon
-    }
-  ) });
+/**
+* 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 }) => {
+	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);
+		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 link to this relationship view",
+			children: buttonState.icon
+		})
+	});
 };
-
+//#endregion
 export { RelationshipsBrowser };