@likec4/diagram 1.59.3 → 1.60.0

package/dist/base-primitives/edge/EdgeMarkers.mjs

@@ -0,0 +1,163 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { jsx } from "react/jsx-runtime";
+import { nonexhaustive } from "@likec4/core";
+
+//#region src/base-primitives/edge/EdgeMarkers.tsx
+const Open = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-4 -4 14 16",
+	refX: 5,
+	refY: 4,
+	markerWidth: "7",
+	markerHeight: "8",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M0,0 L7,4 L0,8 L4,4 Z",
+		stroke: "context-stroke",
+		fill: "context-stroke",
+		strokeDasharray: 0,
+		strokeWidth: 1,
+		strokeLinecap: "round"
+	})
+});
+const Arrow = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-1 -1 12 10",
+	refX: 4,
+	refY: 3,
+	markerWidth: "8",
+	markerHeight: "6",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
+		fill: "context-stroke",
+		strokeWidth: 0
+	})
+});
+const Crow = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-1 -1 12 12",
+	refX: 8,
+	refY: 4,
+	markerWidth: "8",
+	markerHeight: "8",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M 8 0 L 0 4 L 8 8 M 8 4 L 0 4",
+		fill: "none",
+		strokeWidth: 1
+	})
+});
+const OArrow = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-1 -1 12 10",
+	refX: 4,
+	refY: 3,
+	markerWidth: "8",
+	markerHeight: "6",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
+		stroke: "context-stroke",
+		fill: "var(--likec4-background-color)",
+		strokeWidth: 1.25,
+		strokeLinejoin: "miter",
+		strokeLinecap: "square"
+	})
+});
+const Diamond = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-4 -4 16 14",
+	refX: 5,
+	refY: 4,
+	markerWidth: "10",
+	markerHeight: "8",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M5,0 L10,4 L5,8 L0,4 Z",
+		fill: "context-stroke",
+		strokeWidth: 0,
+		strokeLinecap: "round"
+	})
+});
+const ODiamond = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "-4 -4 16 14",
+	refX: 6,
+	refY: 4,
+	markerWidth: "10",
+	markerHeight: "8",
+	preserveAspectRatio: "xMaxYMid meet",
+	orient: "auto-start-reverse",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M5,0 L10,4 L5,8 L0,4 Z",
+		stroke: "context-stroke",
+		fill: "var(--likec4-background-color)",
+		strokeWidth: 1.25,
+		strokeLinecap: "round"
+	})
+});
+const Dot = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "0 0 10 10",
+	refX: 4,
+	refY: 4,
+	markerWidth: "6",
+	markerHeight: "6",
+	...props,
+	children: /* @__PURE__ */ jsx("circle", {
+		strokeWidth: 0,
+		fill: "context-stroke",
+		cx: 4,
+		cy: 4,
+		r: 3
+	})
+});
+const ODot = (props) => /* @__PURE__ */ jsx("marker", {
+	viewBox: "0 0 10 10",
+	refX: 4,
+	refY: 4,
+	markerWidth: "6",
+	markerHeight: "6",
+	...props,
+	children: /* @__PURE__ */ jsx("circle", {
+		strokeWidth: 1.25,
+		stroke: "context-stroke",
+		fill: "var(--likec4-background-color)",
+		cx: 4,
+		cy: 4,
+		r: 3
+	})
+});
+const EdgeMarkers = {
+	Arrow,
+	Crow,
+	OArrow,
+	Open,
+	Diamond,
+	ODiamond,
+	Dot,
+	ODot
+};
+function arrowTypeToMarker(arrowType) {
+	if (!arrowType || arrowType === "none") return;
+	switch (arrowType) {
+		case "normal": return "Arrow";
+		case "crow": return "Crow";
+		case "onormal": return "OArrow";
+		case "diamond": return "Diamond";
+		case "odiamond": return "ODiamond";
+		case "open":
+		case "vee": return "Open";
+		case "dot": return "Dot";
+		case "odot": return `ODot`;
+		default: nonexhaustive(arrowType);
+	}
+}
+
+//#endregion
+export { EdgeMarkers, arrowTypeToMarker };

package/dist/base-primitives/edge/EdgePath.d.mts

@@ -0,0 +1,4 @@
+import "../../base/types.mjs";
+import "react";
+import { DiagramEdge } from "@likec4/core/types";
+import "type-fest";

package/dist/base-primitives/edge/EdgePath.mjs

@@ -0,0 +1,67 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { EdgeMarkers, arrowTypeToMarker } from "./EdgeMarkers.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { edgePath } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/edge/EdgePath.tsx
+const EdgePath = forwardRef(({ edgeProps: { id, data: { line, dir, tail, head }, selectable = true, style, interactionWidth }, isDragging = false, onEdgePointerDown, strokeWidth, svgPath }, svgPathRef) => {
+	let markerStartName = arrowTypeToMarker(tail);
+	let markerEndName = arrowTypeToMarker(head ?? "normal");
+	if (dir === "back") [markerStartName, markerEndName] = [markerEndName, markerStartName];
+	const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null;
+	const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null;
+	const isDotted = line === "dotted";
+	const isDashed = isDotted || line === "dashed";
+	let strokeDasharray;
+	if (isDotted) strokeDasharray = "1,8";
+	else if (isDashed) strokeDasharray = "8,10";
+	const classes = edgePath();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		selectable && /* @__PURE__ */ jsx("path", {
+			className: cx("react-flow__edge-interaction", css({ fill: "none" })),
+			onPointerDown: onEdgePointerDown,
+			d: svgPath,
+			style: {
+				strokeWidth: interactionWidth ?? 10,
+				stroke: "currentcolor",
+				strokeOpacity: 0,
+				...isDragging ? { display: "none" } : {}
+			}
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			className: cx("likec4-edge-middle-point", classes.middlePoint),
+			"data-edge-id": id,
+			style: { offsetPath: `path("${svgPath}")` }
+		}),
+		/* @__PURE__ */ jsxs("g", {
+			className: classes.markersCtx,
+			onPointerDown: onEdgePointerDown,
+			children: [
+				/* @__PURE__ */ jsxs("defs", { children: [MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }), MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })] }),
+				/* @__PURE__ */ jsx("path", {
+					className: cx("react-flow__edge-path", "hide-on-reduced-graphics", classes.pathBg, isDragging && css({ display: "none" })),
+					d: svgPath,
+					style,
+					strokeLinecap: "round"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					ref: svgPathRef,
+					className: cx("react-flow__edge-path", classes.path, selectable && "react-flow__edge-interaction"),
+					d: svgPath,
+					style,
+					strokeWidth,
+					strokeLinecap: "round",
+					strokeDasharray,
+					markerStart: MarkerStart ? `url(#start${id})` : void 0,
+					markerEnd: MarkerEnd ? `url(#end${id})` : void 0
+				})
+			]
+		})
+	] });
+});
+EdgePath.displayName = "EdgePath";
+
+//#endregion
+export { EdgePath };

package/dist/base-primitives/element/ElementActionButtons.d.mts

@@ -0,0 +1,45 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { MouseEvent, ReactNode } from "react";
+//#region src/base-primitives/element/ElementActionButtons.d.ts
+type ElementActionButtonsProps = {
+  selected?: boolean;
+  data: {
+    hovered?: boolean;
+  };
+  buttons: ElementActionButtons.Item[];
+};
+/**
+ * Center-Bottom bar with action buttons. Intended to be used inside "leaf" nodes.
+ *
+ * @param selected - Whether the node is selected
+ * @param data - Node data
+ * @param buttons - Action buttons
+ *
+ * @example
+ * ```tsx
+ * <ElementActionButtons
+ *   {...nodeProps}
+ *   Buttons={[
+ *     {
+ *       key: 'action1',
+ *       icon: <IconZoomScan />,
+ *       onClick: (e) => {
+ *         e.stopPropagation()
+ *         console.log('action1 clicked')
+ *       },
+ *     },
+ *     //...
+ *   ]}
+ * />
+ * ```
+ */
+export declare function ElementActionButtons({ selected, data: { hovered: isHovered }, buttons }: ElementActionButtonsProps): import("react").JSX.Element | null;
+export declare namespace ElementActionButtons {
+  type Item = {
+    key?: string;
+    ariaLabel?: string;
+    icon?: ReactNode;
+    onClick: (e: MouseEvent) => void;
+  };
+}
+//#endregion

package/dist/base-primitives/element/ElementActionButtons.mjs

@@ -0,0 +1,100 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconBolt from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { useId } from "@mantine/hooks";
+import * as m from "motion/react-m";
+import { actionBtn, actionButtons } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/element/ElementActionButtons.tsx
+const variants = {
+	normal: {
+		originY: 0,
+		opacity: .75,
+		scale: .8,
+		y: 0
+	},
+	selected: {
+		originY: 0,
+		opacity: 1,
+		scale: .9,
+		y: 7
+	},
+	hovered: {
+		originY: 0,
+		opacity: 1,
+		scale: 1.12,
+		y: 7
+	}
+};
+/**
+* Center-Bottom bar with action buttons. Intended to be used inside "leaf" nodes.
+*
+* @param selected - Whether the node is selected
+* @param data - Node data
+* @param buttons - Action buttons
+*
+* @example
+* ```tsx
+* <ElementActionButtons
+*   {...nodeProps}
+*   Buttons={[
+*     {
+*       key: 'action1',
+*       icon: <IconZoomScan />,
+*       onClick: (e) => {
+*         e.stopPropagation()
+*         console.log('action1 clicked')
+*       },
+*     },
+*     //...
+*   ]}
+* />
+* ```
+*/
+function ElementActionButtons({ selected = false, data: { hovered: isHovered = false }, buttons }) {
+	const id = useId();
+	if (!buttons.length) return null;
+	let variant;
+	switch (true) {
+		case isHovered:
+			variant = "hovered";
+			break;
+		case selected:
+			variant = "selected";
+			break;
+		default: variant = "normal";
+	}
+	const isActionVisible = isHovered || selected;
+	return /* @__PURE__ */ jsx("div", {
+		className: actionButtons(),
+		children: /* @__PURE__ */ jsx(m.div, {
+			layoutRoot: true,
+			initial: false,
+			variants,
+			animate: variant,
+			layoutDependency: `${isHovered}-${selected}`,
+			"data-likec4-hovered": isHovered,
+			className: cx("nodrag nopan"),
+			onClick: stopPropagation,
+			children: buttons.map((button, index) => /* @__PURE__ */ jsx(ActionIcon, {
+				component: m.button,
+				className: actionBtn({}),
+				initial: false,
+				whileTap: { scale: 1 },
+				whileHover: { scale: 1.3 },
+				tabIndex: isActionVisible ? 0 : -1,
+				inert: isActionVisible ? void 0 : true,
+				"aria-label": button.ariaLabel ?? button.key ?? "Element action",
+				onClick: button.onClick,
+				onDoubleClick: stopPropagation,
+				children: button.icon || /* @__PURE__ */ jsx(IconBolt, {})
+			}, `${id}-${button.key ?? index}`))
+		})
+	});
+}
+
+//#endregion
+export { ElementActionButtons };

package/dist/base-primitives/element/ElementData.d.mts

@@ -0,0 +1,72 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { CSSProperties, DetailedHTMLProps, HTMLAttributes } from "react";
+import { ComputedNodeStyle, ElementShape, MarkdownOrString, NodeId } from "@likec4/core";
+import { Color } from "@likec4/core/types";
+//#region src/base-primitives/element/ElementData.d.ts
+type RequiredData = {
+  id: NodeId;
+  title: string;
+  technology?: string | null | undefined;
+  color: Color;
+  shape?: ElementShape | undefined;
+  style: ComputedNodeStyle;
+  description?: MarkdownOrString | null | undefined;
+  icon?: string | null;
+  width?: number | undefined;
+  height?: number | undefined;
+};
+export type ElementDataProps = {
+  data: RequiredData;
+};
+type IconProps = {
+  data: {
+    id: string;
+    title: string;
+    icon?: string | null | undefined;
+  };
+  className?: string;
+  style?: CSSProperties;
+};
+type SlotProps = {
+  data: RequiredData;
+  className?: string;
+  style?: CSSProperties;
+  [key: `data-${string}`]: string;
+};
+/**
+ * Renders an element title, technology, description, and icon.
+ *
+ * @example
+ * ```tsx
+ * <ElementData {...nodeProps} />
+ * ```
+ * or
+ * ```tsx
+ * <ElementData.Root {...nodeProps} >
+ *   <ElementData.Icon {...nodeProps} />
+ *   <ElementData.Content>
+ *     <ElementData.Title {...nodeProps} />
+ *     <ElementData.Technology {...nodeProps} />
+ *     <ElementData.Description {...nodeProps} />
+ *   </ElementData.Content>
+ * </ElementData.Root>
+ * ```
+ */
+export declare function ElementData({ data, 'aria-hidden': ariaHidden }: ElementDataProps & {
+  'aria-hidden'?: boolean | undefined;
+}): import("react").JSX.Element;
+export declare namespace ElementData {
+  var Root: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ElementDataProps & import("react").RefAttributes<HTMLDivElement>>;
+  var Icon: ({ data, ...props }: IconProps) => import("react").JSX.Element;
+  var Content: import("react").ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  var Title: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLDivElement>>;
+  var Technology: import("react").ForwardRefExoticComponent<((import("type-fest/source/merge-exclusive").Without<SlotProps, {
+    children?: import("react").ReactNode | undefined;
+  }> & {
+    children?: import("react").ReactNode | undefined;
+  }) | (import("type-fest/source/merge-exclusive").Without<{
+    children?: import("react").ReactNode | undefined;
+  }, SlotProps> & SlotProps)) & import("react").RefAttributes<HTMLDivElement>>;
+  var Description: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLDivElement>>;
+}
+//#endregion

package/dist/base-primitives/element/ElementData.mjs

@@ -0,0 +1,135 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { IconRenderer } from "../../context/IconRenderer.mjs";
+import { useLikeC4Styles } from "../../hooks/useLikeC4Styles.mjs";
+import { Markdown } from "../Markdown.mjs";
+import { cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isTruthy } from "remeda";
+import { RichText } from "@likec4/core/types";
+import { elementNodeData } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/element/ElementData.tsx
+/**
+* Resolve the icon color based on the node's style and color.
+*
+* If the node's style icon color is not defined, returns undefined.
+* If the node's style icon color is the same as the node's color, returns the stroke color.
+* Otherwise, returns the fill color.
+*/
+const resolveIconColor = (styles, data) => {
+	const iconColor = data.style.iconColor;
+	if (!iconColor) return;
+	const colors = styles.colors(iconColor).elements;
+	return iconColor === data.color ? colors.stroke : colors.fill;
+};
+function shouldBlendIconWithPalette(icon, hasIconColor) {
+	return !hasIconColor && icon?.startsWith("bootstrap:") === true;
+}
+const Root = forwardRef(({ className, style, data, ...props }, ref) => {
+	const styles = useLikeC4Styles();
+	const fitted = data.style.sizing === "fixed" ? styles.fitNodeContent({
+		...data,
+		shape: data.shape ?? styles.defaults.shape
+	}) : null;
+	const iconSize = fitted?.iconSize ?? (data.style.iconSize ? styles.nodeSizes(data.style).values.iconSize : void 0);
+	const resolvedIconColor = resolveIconColor(styles, data);
+	const hasIconColor = !!resolvedIconColor;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(className, elementNodeData({
+			iconPosition: data.style.iconPosition,
+			withIconColor: hasIconColor,
+			withIconBlend: shouldBlendIconWithPalette(data.icon, hasIconColor),
+			sizing: data.style.sizing ?? "auto"
+		}), "likec4-element"),
+		style: {
+			...style,
+			...iconSize && { "--likec4-icon-size": `${iconSize}px` },
+			...fitted && { "--likec4-text-size": `${fitted.textSize}px` },
+			...resolvedIconColor && { "--likec4-icon-color": resolvedIconColor }
+		}
+	});
+});
+const Icon = ({ data, ...props }) => /* @__PURE__ */ jsx(IconRenderer, {
+	element: data,
+	...props
+});
+const Content = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: cx(className, "likec4-element-node-content"),
+	ref
+}));
+const Title = forwardRef(({ data: { title }, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx(className, "likec4-element-title"),
+		"data-likec4-node-title": "",
+		ref,
+		children: title
+	});
+});
+const Technology = forwardRef(({ data, children, className, ...props }, ref) => {
+	const text = data?.technology ?? children;
+	return isTruthy(text) ? /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx(className, "likec4-element-technology"),
+		"data-likec4-node-technology": "",
+		ref,
+		children: text
+	}) : null;
+});
+const Description = forwardRef(({ data: { description, style }, className, ...props }, ref) => {
+	if (!description) return null;
+	const desc = RichText.from(description);
+	return /* @__PURE__ */ jsx(Markdown, {
+		...props,
+		className: cx(className, "likec4-element-description"),
+		"data-likec4-node-description": "",
+		value: desc,
+		uselikec4palette: true,
+		hideIfEmpty: true,
+		style: { maxHeight: desc.isMarkdown ? style.sizing === "fixed" ? "calc(var(--likec4-text-size) * 0.74 * 1.2)" : "8rem" : void 0 },
+		ref
+	});
+});
+/**
+* Renders an element title, technology, description, and icon.
+*
+* @example
+* ```tsx
+* <ElementData {...nodeProps} />
+* ```
+* or
+* ```tsx
+* <ElementData.Root {...nodeProps} >
+*   <ElementData.Icon {...nodeProps} />
+*   <ElementData.Content>
+*     <ElementData.Title {...nodeProps} />
+*     <ElementData.Technology {...nodeProps} />
+*     <ElementData.Description {...nodeProps} />
+*   </ElementData.Content>
+* </ElementData.Root>
+* ```
+*/
+function ElementData({ data, "aria-hidden": ariaHidden }) {
+	return /* @__PURE__ */ jsxs(Root, {
+		data,
+		"aria-hidden": ariaHidden,
+		children: [/* @__PURE__ */ jsx(Icon, { data }), /* @__PURE__ */ jsxs(Content, { children: [
+			/* @__PURE__ */ jsx(Title, { data }),
+			/* @__PURE__ */ jsx(Technology, { data }),
+			/* @__PURE__ */ jsx(Description, { data })
+		] })]
+	});
+}
+ElementData.Root = Root;
+ElementData.Icon = Icon;
+ElementData.Content = Content;
+ElementData.Title = Title;
+ElementData.Technology = Technology;
+ElementData.Description = Description;
+
+//#endregion
+export { ElementData };

package/dist/base-primitives/element/ElementDetailsButton.d.mts

@@ -0,0 +1,13 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { BaseNodeData } from "../../base/types.mjs";
+import { MouseEvent, ReactNode } from "react";
+//#region src/base-primitives/element/ElementDetailsButton.d.ts
+type ElementDetailsButtonProps = {
+  selected?: boolean;
+  data: BaseNodeData;
+  icon?: ReactNode;
+  ariaLabel?: string;
+  onClick: (e: MouseEvent) => void;
+};
+export declare function ElementDetailsButton({ selected, data: { hovered: isHovered }, icon, ariaLabel, onClick }: ElementDetailsButtonProps): import("react").JSX.Element;
+//#endregion

package/dist/base-primitives/element/ElementDetailsButton.mjs

@@ -0,0 +1,87 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconId from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import * as m from "motion/react-m";
+import { actionBtn } from "@likec4/styles/recipes";
+
+//#region src/base-primitives/element/ElementDetailsButton.tsx
+const variants = {
+	normal: {
+		originX: .4,
+		originY: .6,
+		scale: 1,
+		opacity: .5
+	},
+	hovered: {
+		originX: .4,
+		originY: .6,
+		scale: 1.25,
+		opacity: .9
+	},
+	selected: {
+		originX: .4,
+		originY: .6,
+		scale: 1.25,
+		opacity: .9
+	},
+	whileHover: {
+		scale: 1.4,
+		opacity: 1
+	},
+	whileTap: { scale: 1.15 }
+};
+const container = css({
+	position: "absolute",
+	top: "0.5",
+	right: "0.5",
+	_shapeBrowser: { right: "[5px]" },
+	_shapeCylinder: { top: "[14px]" },
+	_shapeStorage: { top: "[14px]" },
+	_shapeQueue: {
+		top: "[1px]",
+		right: "3"
+	},
+	_smallZoom: { display: "none" },
+	_print: { display: "none" }
+});
+function ElementDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Open details", onClick }) {
+	let variant;
+	switch (true) {
+		case isHovered:
+			variant = "hovered";
+			break;
+		case selected:
+			variant = "selected";
+			break;
+		default: variant = "normal";
+	}
+	const isActionVisible = isHovered || selected;
+	return /* @__PURE__ */ jsx(Box$1, {
+		className: cx(container, "details-button"),
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx("nodrag nopan", actionBtn({ variant: "transparent" })),
+			component: m.button,
+			initial: false,
+			variants,
+			animate: variant,
+			whileHover: "whileHover",
+			whileTap: "whileTap",
+			onClick,
+			onDoubleClick: stopPropagation,
+			tabIndex: isActionVisible ? 0 : -1,
+			inert: isActionVisible ? void 0 : true,
+			"aria-label": ariaLabel,
+			children: icon ?? /* @__PURE__ */ jsx(IconId, {
+				stroke: 1.8,
+				style: { width: "75%" }
+			})
+		})
+	});
+}
+
+//#endregion
+export { ElementDetailsButton };