@wular/coder 0.4.8 → 0.4.10

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/frame/{theme-choices.ef190ef1cd197199.js → theme-choices.85100ed66d6f9200.js}

@@ -1,8 +1,8 @@
 "use client";
 import { useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { iCheck, iMonitor, iMoon, iSun } from "../ui/icons.868385119bf2de28.js";
-import { Icon } from "../ui/icon.0874ca2f58f7db14.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import { iMonitor, iMoon, iSun } from "../ui/icons.e36c72f54750663a.js";
+import { MenuRadio } from "../ui/menu-items.1d082ac4dae8f3d4.js";
+import { jsx as _jsx, Fragment as _Fragment } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const YEAR = 60 * 60 * 24 * 365;
 const THEMES = [
 	[
@@ -31,19 +31,10 @@ export function ThemeChoices({ theme: initial }) {
 		document.cookie = `theme=${value}; path=/; max-age=${YEAR}; samesite=lax`;
 		setTheme(value);
 	};
-	return /* @__PURE__ */ _jsx(_Fragment, { children: THEMES.map(([value, label, icon]) => /* @__PURE__ */ _jsxs("button", {
-		type: "button",
-		class: "pop-item",
-		role: "menuitemradio",
-		"aria-checked": theme === value,
-		onClick: () => pick(value),
-		children: [
-			/* @__PURE__ */ _jsx(Icon, { d: icon }),
-			/* @__PURE__ */ _jsx("span", {
-				class: "grow",
-				children: label
-			}),
-			/* @__PURE__ */ _jsx(Icon, { d: iCheck })
-		]
+	return /* @__PURE__ */ _jsx(_Fragment, { children: THEMES.map(([value, label, icon]) => /* @__PURE__ */ _jsx(MenuRadio, {
+		on: theme === value,
+		onPick: () => pick(value),
+		icon,
+		children: label
 	}, value)) });
 }

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/nav/{back.af528135d7e33d6d.js → back.180765bdadf6d602.js}

@@ -1,12 +1,12 @@
 "use client";
 import { useEffect } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { Link } from "../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
-import { Back } from "../frame/page-head.e5d2185c1cdac740.js";
-import { useOrg } from "./org.813dc34bd23a336f.js";
+import { Back } from "../frame/page-head.85f15db7b648d48c.js";
+import { LinkButton } from "../ui/button.ce9e6cdb08ca86db.js";
+import { useOrg } from "./org.572ad93c7707ab27.js";
 import { BACK_COOKIE, rememberedBack } from "./back-cookie.942c0904e944d8d6.js";
 import { jsx as _jsx } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** Settings' credentials tab; it links back to this page, named `label` where its section name is not enough. */
-export function CredentialsLink({ class: cls, label, children }) {
+export function CredentialsLink({ label, children, ...look }) {
 	const remember = () => {
 		const value = encodeURIComponent(JSON.stringify({
 			path: location.pathname,
@@ -14,8 +14,8 @@ export function CredentialsLink({ class: cls, label, children }) {
 		}));
 		document.cookie = `${BACK_COOKIE}=${value}; path=/dash; max-age=600; samesite=lax`;
 	};
-	return /* @__PURE__ */ _jsx(Link, {
-		class: cls,
+	return /* @__PURE__ */ _jsx(LinkButton, {
+		...look,
 		href: "/dash/[org]/settings/[tab]",
 		params: {
 			org: useOrg(),

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/nav/{org.813dc34bd23a336f.js → org.572ad93c7707ab27.js}

@@ -1,7 +1,7 @@
 "use client";
 import { Link } from "../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
 import { useParams } from "../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
-import { Back } from "../frame/page-head.e5d2185c1cdac740.js";
+import { Back } from "../frame/page-head.85f15db7b648d48c.js";
 import { linkOf } from "./to.a2c840c09bd4bf4a.js";
 import { jsx as _jsx } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** The organization in the address, `/dash/<org>/…`. */

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/nav/{side-toggle.bafcb4b273b1c4d0.js → side-toggle.489faf1a259479f7.js}

@@ -1,7 +1,7 @@
 "use client";
 import { useEffect, useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { iLeft, iRight } from "../ui/icons.868385119bf2de28.js";
-import { Icon } from "../ui/icon.0874ca2f58f7db14.js";
+import { iLeft, iRight } from "../ui/icons.e36c72f54750663a.js";
+import { IconButton } from "../ui/button.ce9e6cdb08ca86db.js";
 import { jsx as _jsx } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const COOKIE = "side";
 /** Collapses the sidebar to its icons; a click is saved in a cookie so the next page renders that way at once. */
@@ -25,12 +25,12 @@ export function SideToggle({ collapsed: initial }) {
 		document.querySelector(".app")?.classList.toggle("side-min", next);
 		document.cookie = `${COOKIE}=${next ? "min" : "max"}; path=/; max-age=31536000; samesite=lax`;
 	};
-	return /* @__PURE__ */ _jsx("button", {
-		type: "button",
-		class: "icon-btn side-toggle",
-		"aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-		"data-tip": collapsed ? "Expand sidebar" : "Collapse sidebar",
-		onClick: toggle,
-		children: /* @__PURE__ */ _jsx(Icon, { d: collapsed ? iRight : iLeft })
+	const label = collapsed ? "Expand sidebar" : "Collapse sidebar";
+	return /* @__PURE__ */ _jsx(IconButton, {
+		icon: collapsed ? iRight : iLeft,
+		label,
+		tip: label,
+		class: "side-toggle",
+		onClick: toggle
 	});
 }

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/badge.c0bc352791a95fd6.js

@@ -0,0 +1,83 @@
+import "./badge.0cb1513f8b077560.css.pnext-asset.js";
+import { MoreList } from "./menu.ee45bace979944b6.js";
+import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** From this many chips on, the first few show and +n opens every one. */
+export const COLLAPSE_FROM = 5;
+export const COLLAPSED = 3;
+/** A tag; with `onClick` a button, with `href` a link, `external` in a new tab. */
+export function Badge({ tone, title, onClick, href, external, class: cls, children }) {
+	const className = [
+		"badge",
+		tone,
+		cls
+	].filter(Boolean).join(" ");
+	if (href) return /* @__PURE__ */ _jsx("a", {
+		class: className,
+		href,
+		title,
+		...external ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : {},
+		children
+	});
+	if (onClick) return /* @__PURE__ */ _jsx("button", {
+		type: "button",
+		class: className,
+		title,
+		onClick,
+		children
+	});
+	return /* @__PURE__ */ _jsx("span", {
+		class: className,
+		title,
+		children
+	});
+}
+/** A small tag in a row of them; with `onClick` a button, `aria-pressed` for a toggle. */
+export function Chip({ onClick, children, ...rest }) {
+	return onClick ? /* @__PURE__ */ _jsx("button", {
+		...rest,
+		type: "button",
+		class: "chip",
+		onClick,
+		children
+	}) : /* @__PURE__ */ _jsx("span", {
+		class: "chip",
+		children
+	});
+}
+/** A row of chips; `values` shows text, fewer past `COLLAPSE_FROM`, or `children` holds ready ones. */
+export function Chips({ values, label, children }) {
+	if (children) return /* @__PURE__ */ _jsx("span", {
+		class: "chips",
+		role: "group",
+		"aria-label": label,
+		children
+	});
+	const all = (values ?? []).filter((value) => Boolean(value));
+	if (!all.length) return /* @__PURE__ */ _jsx("span", {
+		class: "muted",
+		children: "None"
+	});
+	const chip = (value) => /* @__PURE__ */ _jsx(Chip, { children: value }, value);
+	const collapsed = all.length >= COLLAPSE_FROM;
+	return /* @__PURE__ */ _jsxs("span", {
+		class: "chips",
+		children: [(collapsed ? all.slice(0, COLLAPSED) : all).map(chip), collapsed ? /* @__PURE__ */ _jsx(MoreList, {
+			label: `+${all.length - COLLAPSED}`,
+			children: /* @__PURE__ */ _jsx("span", {
+				class: "chips",
+				children: all.map(chip)
+			})
+		}) : null]
+	});
+}
+/** A record's id: secondary, never a page's or row's label; the line it sits on clips it when space runs out. */
+export function Id({ value, title }) {
+	return /* @__PURE__ */ _jsx("span", {
+		class: "id",
+		title: title ?? value,
+		children: value
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/button.ce9e6cdb08ca86db.js

@@ -0,0 +1,91 @@
+import "./button.d7f4433f4e7faa80.css.pnext-asset.js";
+import { Link } from "../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
+import { iExternal } from "./icons.e36c72f54750663a.js";
+import { Icon } from "./icon.0874ca2f58f7db14.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+const classOf = ({ variant, danger, size, wide, class: cls }) => [
+	"btn",
+	variant !== "primary" && variant,
+	danger && "danger",
+	size,
+	wide && "wide",
+	cls
+].filter(Boolean).join(" ");
+/** The label between its icons; a spinner takes the left icon's place, else the right one's, else sits over the label. */
+function Content({ leftIcon, rightIcon, loading, children }) {
+	const spin = /* @__PURE__ */ _jsx("i", { class: "btn-spin" });
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		leftIcon ? loading ? spin : /* @__PURE__ */ _jsx(Icon, { d: leftIcon }) : null,
+		children,
+		rightIcon ? loading && !leftIcon ? spin : /* @__PURE__ */ _jsx(Icon, { d: rightIcon }) : null
+	] });
+}
+/** A button, or a plain link to `href` while it is enabled; `loading` disables it and shows a spinner. */
+export function Button({ variant, danger, size, wide, leftIcon, rightIcon, loading, disabled, href, external, as, type = "button", class: cls, children, ...rest }) {
+	const className = classOf({
+		variant,
+		danger,
+		size,
+		wide,
+		class: cls
+	});
+	const content = /* @__PURE__ */ _jsx(Content, {
+		leftIcon,
+		rightIcon: rightIcon ?? (external ? iExternal : undefined),
+		loading,
+		children
+	});
+	if (as === "span") return /* @__PURE__ */ _jsx("span", {
+		class: className,
+		"aria-hidden": "true",
+		children: content
+	});
+	if (href && !disabled && !loading) return /* @__PURE__ */ _jsx("a", {
+		...rest,
+		class: className,
+		href,
+		...external ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : {},
+		children: content
+	});
+	return /* @__PURE__ */ _jsx("button", {
+		"aria-busy": loading || undefined,
+		...rest,
+		type,
+		class: className,
+		disabled: disabled || loading,
+		children: content
+	});
+}
+/** A `Button` that links to an in-app page, with `Link`'s typed route and params. */
+export function LinkButton({ variant, danger, size, wide, leftIcon, rightIcon, class: cls, children, ...link }) {
+	return /* @__PURE__ */ _jsx(Link, {
+		...link,
+		class: classOf({
+			variant,
+			danger,
+			size,
+			wide,
+			class: cls
+		}),
+		children: /* @__PURE__ */ _jsx(Content, {
+			leftIcon,
+			rightIcon,
+			children
+		})
+	});
+}
+/** A square button that shows only an icon, named by `label`. */
+export function IconButton({ icon, label, tip, type = "button", class: cls, children, ...rest }) {
+	return /* @__PURE__ */ _jsx("button", {
+		...rest,
+		type,
+		class: cls ? `icon-btn ${cls}` : "icon-btn",
+		"aria-label": label,
+		title: tip ? undefined : label,
+		"data-tip": tip,
+		children: icon ? /* @__PURE__ */ _jsx(Icon, { d: icon }) : children
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{card.6227f43fc0ae4bd1.js → card.9f0d45b73bc78b4f.js}

@@ -1,6 +1,6 @@
-import "./card.15f7435f202831c3.css.pnext-asset.js";
-import { Icon } from "./icon.0874ca2f58f7db14.js";
-import { iPlus } from "./icons.868385119bf2de28.js";
+import "./card.f80288cc42f9bcae.css.pnext-asset.js";
+import { Button } from "./button.ce9e6cdb08ca86db.js";
+import { iPlus } from "./icons.e36c72f54750663a.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 export function Card({ id, title, count, actions, tone, children }) {
 	return /* @__PURE__ */ _jsxs("section", {
@@ -35,14 +35,19 @@ export function FoldCard({ title, note, actions, open = "Add", opened, children
 					class: "bar-r",
 					children: actions
 				}) : null,
-				/* @__PURE__ */ _jsxs("span", {
-					class: "btn outline sm fold-open",
-					"aria-hidden": "true",
-					children: [open === "Add" ? /* @__PURE__ */ _jsx(Icon, { d: iPlus }) : null, open]
+				/* @__PURE__ */ _jsx(Button, {
+					as: "span",
+					variant: "outline",
+					size: "sm",
+					class: "fold-open",
+					leftIcon: open === "Add" ? iPlus : undefined,
+					children: open
 				}),
-				/* @__PURE__ */ _jsx("span", {
-					class: "btn ghost sm fold-close",
-					"aria-hidden": "true",
+				/* @__PURE__ */ _jsx(Button, {
+					as: "span",
+					variant: "ghost",
+					size: "sm",
+					class: "fold-close",
 					children: "Close"
 				})
 			]
@@ -56,10 +61,14 @@ export function Empty({ title, children }) {
 	});
 }
 /** The one loading state: a spinner and a short line; `inline` keeps it to one line. */
-export function Loading({ label, inline, dots, h }) {
+export function Loading({ label, inline, dots, late, h }) {
 	const Tag = inline ? "span" : "div";
 	return /* @__PURE__ */ _jsx(Tag, {
-		class: inline ? "loading inline" : "loading",
+		class: [
+			"loading",
+			inline && "inline",
+			late && "late"
+		].filter(Boolean).join(" "),
 		role: "status",
 		style: h ? `--h:${h}px` : undefined,
 		children: /* @__PURE__ */ _jsxs("span", { children: [dots ? /* @__PURE__ */ _jsxs("i", {

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{collapse.dab7f208cbbe6a33.js → collapse.93e4d1b20c2873ed.js}

@@ -1,6 +1,7 @@
 "use client";
 import "./collapse.fb687b120ea60247.css.pnext-asset.js";
 import { useLayoutEffect, useRef, useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { Button } from "./button.ce9e6cdb08ca86db.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** Long content cut to its first `lines` lines under a fade, with a Show more toggle. */
 export function Collapse({ lines = 10, class: cls, children }) {
@@ -13,8 +14,18 @@ export function Collapse({ lines = 10, class: cls, children }) {
 		measure();
 		const observer = new ResizeObserver(measure);
 		observer.observe(el);
-		return () => observer.disconnect();
-	}, [children, open]);
+		// The clamped box keeps its size as content grows, so content changes measure too.
+		const changes = new MutationObserver(measure);
+		changes.observe(el, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		return () => {
+			observer.disconnect();
+			changes.disconnect();
+		};
+	}, [open]);
 	return /* @__PURE__ */ _jsxs("div", {
 		class: `collapse${long ? " long" : ""}${open ? " open" : ""}`,
 		style: `--lines:${lines}`,
@@ -22,9 +33,10 @@ export function Collapse({ lines = 10, class: cls, children }) {
 			class: cls ? `collapse-box ${cls}` : "collapse-box",
 			ref: box,
 			children
-		}), long ? /* @__PURE__ */ _jsx("button", {
-			type: "button",
-			class: "btn ghost sm more-toggle",
+		}), long ? /* @__PURE__ */ _jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			class: "more-toggle",
 			"aria-expanded": open,
 			onClick: () => setOpen(!open),
 			children: open ? "Show less" : "Show more"

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{combo.0572dd5730c94112.js → combo.54270c0251466fda.js}

@@ -1,7 +1,7 @@
 import { useId, useLayoutEffect, useRef, useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { Icon } from "./icon.0874ca2f58f7db14.js";
-import { iCheck } from "./icons.868385119bf2de28.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import { MenuOption } from "./menu-items.1d082ac4dae8f3d4.js";
+import { SelectList, usePlace } from "./select.2eb33e5bea28d804.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const SHOWN = 50;
 /** A text input with suggestions under it, filtered as you type; any text is still a value. */
 export function Combo({ label, name, class: className, options, placeholder, value, onChange, onOpen }) {
@@ -9,7 +9,6 @@ export function Combo({ label, name, class: className, options, placeholder, val
 	// Only text typed since opening filters; opening on a picked value shows every option.
 	const [typed, setTyped] = useState(false);
 	const [active, setActive] = useState(0);
-	const [place, setPlace] = useState("");
 	const input = useRef(null);
 	const list = useRef(null);
 	const id = useId();
@@ -22,25 +21,7 @@ export function Combo({ label, name, class: className, options, placeholder, val
 		setOpen(false);
 		setTyped(false);
 	};
-	useLayoutEffect(() => {
-		if (!listed) return;
-		list.current?.showPopover();
-		const position = () => {
-			const box = input.current?.getBoundingClientRect();
-			const menu = list.current;
-			if (!box || !menu) return;
-			const below = innerHeight - box.bottom - 12;
-			const up = below < Math.min(menu.scrollHeight, 240) && box.top > below;
-			setPlace(`left:${Math.round(Math.min(box.left, innerWidth - menu.offsetWidth - 8))}px;min-width:${Math.round(box.width)}px;` + (up ? `bottom:${Math.round(innerHeight - box.top + 4)}px;max-height:${Math.round(Math.min(360, box.top - 12))}px` : `top:${Math.round(box.bottom + 4)}px;max-height:${Math.round(Math.min(360, below))}px`));
-		};
-		position();
-		addEventListener("resize", position);
-		addEventListener("scroll", position, true);
-		return () => {
-			removeEventListener("resize", position);
-			removeEventListener("scroll", position, true);
-		};
-	}, [listed, shown.length]);
+	const place = usePlace(input, list, listed, 360, [shown.length]);
 	useLayoutEffect(() => {
 		if (listed) list.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
 	}, [
@@ -89,27 +70,20 @@ export function Combo({ label, name, class: className, options, placeholder, val
 			else return;
 			event.preventDefault();
 		}
-	}), listed ? /* @__PURE__ */ _jsx("div", {
-		ref: list,
-		id: `${id}-list`,
-		class: "pop select-pop",
-		popover: "manual",
-		role: "listbox",
-		"aria-label": label,
-		style: place || "visibility:hidden",
-		onMouseDown: (event) => event.preventDefault(),
-		children: shown.map((option, index) => /* @__PURE__ */ _jsxs("div", {
+	}), listed ? /* @__PURE__ */ _jsx(SelectList, {
+		id,
+		label,
+		listRef: list,
+		place,
+		children: shown.map((option, index) => /* @__PURE__ */ _jsx(MenuOption, {
 			id: `${id}-${index}`,
 			"data-index": index,
-			role: "option",
-			"aria-selected": option === value,
-			class: index === active ? "pop-item on" : "pop-item",
+			active: index === active,
+			selected: option === value,
+			check: true,
 			onPointerMove: () => index !== active && setActive(index),
 			onClick: () => pick(index),
-			children: [/* @__PURE__ */ _jsx("span", {
-				class: "grow",
-				children: option
-			}), /* @__PURE__ */ _jsx(Icon, { d: iCheck })]
+			children: option
 		}, option))
 	}) : null] });
 }

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/confirm.c1281f9b12854210.js

@@ -0,0 +1,27 @@
+"use client";
+import { Button } from "./button.ce9e6cdb08ca86db.js";
+import { iTrash } from "./icons.e36c72f54750663a.js";
+import { Modal } from "./modal.25d53e5b41b9c4e5.js";
+import { jsx as _jsx } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** A modal question before a destructive step. */
+export function ConfirmDialog({ open, title, body, confirmLabel, onConfirm, onClose, busy }) {
+	return /* @__PURE__ */ _jsx(Modal, {
+		open,
+		class: "confirm",
+		title,
+		busy,
+		onSubmit: (event) => {
+			event.preventDefault();
+			onConfirm();
+		},
+		onClose,
+		actions: /* @__PURE__ */ _jsx(Button, {
+			type: "submit",
+			danger: true,
+			leftIcon: iTrash,
+			loading: busy,
+			children: confirmLabel
+		}),
+		children: body ? /* @__PURE__ */ _jsx("p", { children: body }) : null
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{copy.9be99c94423eb1ca.js → copy.bd6fc1577a393965.js}

@@ -1,19 +1,17 @@
 "use client";
-import "./copy.991f1efa061e71d6.css.pnext-asset.js";
+import "./copy.fb3240de6c9479cd.css.pnext-asset.js";
 import { useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { iCheck, iCopy } from "./icons.868385119bf2de28.js";
-import { Icon } from "./icon.0874ca2f58f7db14.js";
+import { iCheck, iCopy } from "./icons.e36c72f54750663a.js";
+import { IconButton } from "./button.ce9e6cdb08ca86db.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** An icon button that copies `value` and shows a check once it did. */
 export function CopyButton({ value, label = "Copy" }) {
 	const [copied, setCopied] = useState(false);
-	return /* @__PURE__ */ _jsx("button", {
-		type: "button",
-		class: copied ? "icon-btn copied" : "icon-btn",
-		"aria-label": copied ? "Copied" : label,
-		title: copied ? "Copied" : label,
-		onClick: () => void navigator.clipboard.writeText(value).then(() => setCopied(true)),
-		children: /* @__PURE__ */ _jsx(Icon, { d: copied ? iCheck : iCopy })
+	return /* @__PURE__ */ _jsx(IconButton, {
+		icon: copied ? iCheck : iCopy,
+		label: copied ? "Copied" : label,
+		class: copied ? "copied" : undefined,
+		onClick: () => void navigator.clipboard.writeText(value).then(() => setCopied(true))
 	});
 }
 /** One value to copy, such as a command or an address; `link` also opens it in a new tab. */