From b821ecddb2be32890e292de916fe2cd6da3e3eb8 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Mon, 31 Aug 2026 16:41:03 +0200
Subject: [PATCH] web/ui: add CopyButton

Signed-off-by: eti <eti@eti.tf>
---
 .../components/ui/CopyButton.stories.svelte   | 150 +++++++++++++++
 web/src/lib/components/ui/CopyButton.svelte   | 180 ++++++++++++++++++
 2 files changed, 330 insertions(+)
 create mode 100644 web/src/lib/components/ui/CopyButton.stories.svelte
 create mode 100644 web/src/lib/components/ui/CopyButton.svelte

diff --git a/web/src/lib/components/ui/CopyButton.stories.svelte b/web/src/lib/components/ui/CopyButton.stories.svelte
new file mode 100644
index 000000000..f07eac653
--- /dev/null
+++ b/web/src/lib/components/ui/CopyButton.stories.svelte
@@ -0,0 +1,150 @@
+<script module lang="ts">
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
+	import { Check as CheckNode, Copy as CopyNode } from "lucide";
+	import CopyButton from "./CopyButton.svelte";
+	import MorphIcon from "./MorphIcon.svelte";
+
+	const SHA = "013b7330f0a2a7f4d0d1d6f4c9d51d1f3a0e1b2c";
+
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas" | "userEvent">;
+
+	const stubClipboard = (writeText: (text: string) => Promise<void>) => {
+		Object.defineProperty(navigator, "clipboard", {
+			value: { writeText },
+			configurable: true
+		});
+	};
+
+	const copies = async ({ canvas, userEvent }: PlayContext) => {
+		const written: string[] = [];
+		stubClipboard(async (text) => void written.push(text));
+		await userEvent.click(canvas.getByRole("button", { name: "Copy SHA" }));
+		await expect(written).toEqual([SHA]);
+		await expect(canvas.getByRole("status")).toHaveTextContent("Copied");
+	};
+
+	const reportsFailure = async ({ canvas, userEvent }: PlayContext) => {
+		stubClipboard(() => Promise.reject(new Error("denied")));
+		await userEvent.click(canvas.getByRole("button", { name: "Copy SHA" }));
+		await expect(canvas.getByRole("status")).toHaveTextContent("Failed");
+	};
+
+	const { Story } = defineMeta({
+		title: "UI/CopyButton",
+		component: CopyButton,
+		tags: ["autodocs"],
+		argTypes: {
+			morph: { control: "boolean" },
+			variant: {
+				control: "inline-radio",
+				options: ["default", "primary", "ghost", "danger", "success", "warning"]
+			},
+			size: { control: "inline-radio", options: ["mini", "small", "regular", "large"] },
+			showLabel: { control: "boolean" },
+			disabled: { control: "boolean" },
+			timeout: { control: "number" }
+		},
+		args: {
+			value: SHA,
+			label: "Copy SHA",
+			showLabel: false,
+			morph: false,
+			variant: "ghost",
+			size: "small",
+			disabled: false,
+			timeout: 2000
+		}
+	});
+</script>
+
+<script lang="ts">
+	let checked = $state<Record<string, boolean>>({});
+</script>
+
+<Story name="Default" />
+
+<Story name="With label" args={{ showLabel: true, variant: "default" }} />
+
+<Story name="Copies" args={{ showLabel: true, variant: "default" }} play={copies} />
+
+<Story name="Failure" args={{ showLabel: true, variant: "default" }} play={reportsFailure} />
+
+<Story name="Disabled" args={{ showLabel: true, variant: "default", disabled: true }} />
+
+<Story name="Sizes">
+	<div class="flex items-center gap-3">
+		<CopyButton value={SHA} size="mini" showLabel variant="default" />
+		<CopyButton value={SHA} size="small" showLabel variant="default" />
+		<CopyButton value={SHA} size="regular" showLabel variant="default" />
+		<CopyButton value={SHA} size="large" showLabel variant="default" />
+	</div>
+</Story>
+
+<Story name="Variants">
+	<div class="flex items-center gap-3">
+		<CopyButton value={SHA} showLabel variant="default" />
+		<CopyButton value={SHA} showLabel variant="primary" />
+		<CopyButton value={SHA} showLabel variant="ghost" />
+		<CopyButton value={SHA} showLabel variant="danger" />
+	</div>
+</Story>
+
+<Story name="In a row">
+	<div class="flex w-96 items-center gap-2 rounded-sm border border-border-default p-1 pl-3">
+		<code class="min-w-0 flex-1 truncate typography-monospace-small text-foreground-muted">
+			{SHA}
+		</code>
+		<CopyButton value={SHA} label="Copy SHA" showLabel />
+	</div>
+</Story>
+
+<!-- the A/B for the icon swap: three layered faces crossfading, against one path
+     morphing between them. click both, then pick. -->
+<Story name="Crossfade vs morph">
+	<div class="flex flex-col gap-4">
+		<div class="flex items-center gap-3">
+			<span class="w-24 typography-paragraph-small text-foreground-muted">Crossfade</span>
+			<CopyButton value={SHA} showLabel variant="default" />
+			<CopyButton value={SHA} variant="default" />
+			<CopyButton value={SHA} size="large" showLabel variant="default" />
+		</div>
+		<div class="flex items-center gap-3">
+			<span class="w-24 typography-paragraph-small text-foreground-muted">Morph</span>
+			<CopyButton value={SHA} morph showLabel variant="default" />
+			<CopyButton value={SHA} morph variant="default" />
+			<CopyButton value={SHA} morph size="large" showLabel variant="default" />
+		</div>
+	</div>
+</Story>
+
+<!-- the presets side by side on the same pair, since the spring is the part a
+     wrapper default locks in. click any icon to send it the other way. -->
+<Story name="Morph springs">
+	{@const presets = [
+		["smooth", "\u03b6 1.00 \u2014 no overshoot"],
+		["snappy", "\u03b6 0.73 \u2014 fast, slight overshoot"],
+		["bouncy", "\u03b6 0.40 \u2014 playful"]
+	] as const}
+	<div class="flex flex-col gap-4">
+		{#each presets as [preset, note] (preset)}
+			<div class="flex items-center gap-3">
+				<button
+					type="button"
+					class="cursor-pointer rounded-sm border border-border-default p-2"
+					onclick={() => (checked[preset] = !checked[preset])}
+					aria-label={`Toggle the ${preset} morph`}
+				>
+					<MorphIcon
+						icon={checked[preset] ? CheckNode : CopyNode}
+						spring={preset}
+						class="size-6"
+					/>
+				</button>
+				<span class="typography-paragraph-small text-foreground-muted">
+					{preset} — {note}
+				</span>
+			</div>
+		{/each}
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/CopyButton.svelte b/web/src/lib/components/ui/CopyButton.svelte
new file mode 100644
index 000000000..52d0e3850
--- /dev/null
+++ b/web/src/lib/components/ui/CopyButton.svelte
@@ -0,0 +1,180 @@
+<script module lang="ts">
+	export type CopyStatus = "idle" | "copied" | "error";
+</script>
+
+<script lang="ts">
+	import Copy from "$icon/copy";
+	import X from "$icon/x";
+	import { Check as CheckNode, Copy as CopyNode, X as XNode } from "lucide";
+	import {
+		CROSSFADE_DURATION,
+		CROSSFADE_EASING,
+		DRAW_DURATION,
+		DRAW_EASING
+	} from "$lib/motion/spring";
+	import { prefersReducedMotion } from "svelte/motion";
+	import Button, { type ButtonVariants } from "./Button.svelte";
+	import MorphIcon from "./MorphIcon.svelte";
+
+	interface Props {
+		value: string;
+		label?: string;
+		copiedLabel?: string;
+		errorLabel?: string;
+		showLabel?: boolean;
+		/** temporary A/B switch: morph the icon instead of crossfading the three faces */
+		morph?: boolean;
+		timeout?: number;
+		variant?: ButtonVariants["variant"];
+		size?: ButtonVariants["size"];
+		disabled?: boolean;
+		onCopy?: (value: string) => void;
+		onError?: (reason: unknown) => void;
+		title?: string;
+		"aria-label"?: string;
+		class?: string;
+	}
+
+	let {
+		value,
+		label = "Copy",
+		copiedLabel = "Copied",
+		errorLabel = "Failed",
+		showLabel = false,
+		morph = false,
+		timeout = 2000,
+		variant = "ghost",
+		size = "small",
+		disabled = false,
+		onCopy,
+		onError,
+		class: className,
+		title,
+		"aria-label": ariaLabel
+	}: Props = $props();
+
+	let status = $state<CopyStatus>("idle");
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	$effect(() => () => clearTimeout(timer));
+
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(value);
+			status = "copied";
+			onCopy?.(value);
+		} catch (reason) {
+			status = "error";
+			onError?.(reason);
+		}
+		clearTimeout(timer);
+		timer = setTimeout(() => (status = "idle"), timeout);
+	};
+
+	const iconSize = $derived(size === "large" ? "size-5" : "size-4");
+	const fade = $derived(prefersReducedMotion.current ? 0 : CROSSFADE_DURATION);
+	const draw = $derived(prefersReducedMotion.current ? 0 : DRAW_DURATION);
+	const face = $derived({ idle: CopyNode, copied: CheckNode, error: XNode }[status]);
+	const labels = $derived<[CopyStatus, string][]>([
+		["idle", label],
+		["copied", copiedLabel],
+		["error", errorLabel]
+	]);
+</script>
+
+<Button
+	{variant}
+	{size}
+	{disabled}
+	class={className}
+	{title}
+	aria-label={ariaLabel ?? label}
+	onclick={() => void copy()}
+	style="--copy-fade: {fade}ms; --copy-fade-ease: {CROSSFADE_EASING}; --copy-draw: {draw}ms; --copy-draw-ease: {DRAW_EASING}"
+>
+	{#if morph}
+		<MorphIcon icon={face} class="{iconSize} shrink-0" />
+	{:else}
+		<span class="cell {iconSize} grid shrink-0" data-status={status} aria-hidden="true">
+			<Copy class="layer idle {iconSize}" />
+			<!-- lucide's check reversed, so the stroke draws from the short leg up to the
+			     tip the way a hand would write it. pathLength normalises the dash to 1. -->
+			<svg
+				class="layer ok {iconSize}"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path class="check" pathLength="1" d="M4 12l5 5L20 6" />
+			</svg>
+			<X class="layer err {iconSize}" />
+		</span>
+	{/if}
+	{#if showLabel}
+		<span class="cell grid" data-status={status} aria-hidden="true">
+			{#each labels as [key, text] (key)}
+				<span class="label label-{key}">{text}</span>
+			{/each}
+		</span>
+	{/if}
+	<span role="status" aria-live="polite" class="sr-only">
+		{status === "copied" ? copiedLabel : status === "error" ? errorLabel : ""}
+	</span>
+</Button>
+
+<style>
+	/* the three faces share one grid cell, so the button never resizes as they
+	   swap and the label column stays as wide as its longest word */
+	.cell :global(.layer),
+	.label {
+		grid-column: 1;
+		grid-row: 1;
+	}
+
+	.cell :global(.layer) {
+		opacity: 0;
+		scale: 0.92;
+		transition:
+			opacity var(--copy-fade) var(--copy-fade-ease),
+			scale var(--copy-fade) var(--copy-fade-ease);
+	}
+
+	.cell[data-status="idle"] :global(.idle),
+	.cell[data-status="copied"] :global(.ok),
+	.cell[data-status="error"] :global(.err) {
+		opacity: 1;
+		scale: 1;
+	}
+
+	.check {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 1;
+		transition: stroke-dashoffset var(--copy-draw) var(--copy-draw-ease);
+	}
+
+	.cell[data-status="copied"] .check {
+		stroke-dashoffset: 0;
+	}
+
+	.label {
+		white-space: nowrap;
+		opacity: 0;
+		translate: 0 3px;
+		filter: blur(3px);
+		transition:
+			opacity var(--copy-fade) var(--copy-fade-ease),
+			translate var(--copy-fade) var(--copy-fade-ease),
+			filter var(--copy-fade) var(--copy-fade-ease);
+	}
+
+	.cell[data-status="idle"] .label-idle,
+	.cell[data-status="copied"] .label-copied,
+	.cell[data-status="error"] .label-error {
+		opacity: 1;
+		translate: 0 0;
+		filter: blur(0);
+	}
+</style>
-- 
2.51.2