@runwisp/ui 1.4.0 → 1.5.1

package/src/lib/log-console/highlight-scroll.test.ts

@@ -0,0 +1,59 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it, vi } from "vitest";
+import { createHighlightScroll } from "./highlight-scroll.js";
+
+// `sync` is what LogConsole calls inside its $effect. The effect re-runs it
+// whenever something it READ changes, so "no layout reads after the reveal"
+// (ready not consulted again) is exactly "layout changes can't re-scroll".
+function setup(initial: { line: number | null; ready: boolean }) {
+    const state = { ...initial };
+    const ready = vi.fn(() => state.ready);
+    const reveal = vi.fn();
+    const clear = vi.fn();
+    const sync = createHighlightScroll({ line: () => state.line, ready, reveal, clear });
+    return { state, ready, reveal, clear, sync };
+}
+
+describe("createHighlightScroll", () => {
+    it("reveals once and stops reading layout afterwards", () => {
+        const { ready, reveal, sync } = setup({ line: 5, ready: true });
+        sync();
+        expect(reveal).toHaveBeenCalledExactlyOnceWith(5);
+        expect(ready).toHaveBeenCalledTimes(1);
+
+        // A running run appends lines or the pane resizes: the effect re-runs,
+        // but must neither scroll again nor re-read the layout.
+        sync();
+        sync();
+        expect(reveal).toHaveBeenCalledTimes(1);
+        expect(ready).toHaveBeenCalledTimes(1);
+    });
+
+    it("waits until the line can be placed, then reveals once", () => {
+        const { state, reveal, sync } = setup({ line: 5, ready: false });
+        sync();
+        expect(reveal).not.toHaveBeenCalled();
+        state.ready = true;
+        sync();
+        sync();
+        expect(reveal).toHaveBeenCalledExactlyOnceWith(5);
+    });
+
+    it("reveals again for a new line and after the highlight is cleared", () => {
+        const { state, reveal, clear, sync } = setup({ line: 5, ready: true });
+        sync();
+        state.line = 9;
+        sync();
+        expect(reveal).toHaveBeenLastCalledWith(9);
+
+        state.line = null;
+        sync();
+        expect(clear).toHaveBeenCalledOnce();
+
+        state.line = 9;
+        sync();
+        expect(reveal).toHaveBeenCalledTimes(3);
+    });
+});

package/src/lib/log-console/highlight-scroll.ts

@@ -0,0 +1,41 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { untrack } from "svelte";
+
+export interface HighlightScrollOptions {
+    /** Reactive getter for the line to reveal; null/undefined means none. */
+    line: () => number | null | undefined;
+    /** Reactive getter: true once the layout can place `line` (container measured, line exists). */
+    ready: (line: number) => boolean;
+    /** Scrolls to `line`. Runs untracked, so layout reads here never re-trigger the sync. */
+    reveal: (line: number) => void;
+    /** Called when the highlight is cleared. */
+    clear: () => void;
+}
+
+/**
+ * Returns a function to call from inside an `$effect`. It reveals each
+ * highlighted line exactly once: after the first reveal, layout changes (new
+ * log lines, resizes) no longer re-run the scroll, so the operator can scroll
+ * away from a deep-linked search hit and stay there. It waits until `ready`,
+ * and a changed or re-set `line` reveals again.
+ */
+export function createHighlightScroll(options: HighlightScrollOptions): () => void {
+    let revealed: number | null = null;
+    return () => {
+        const target = options.line();
+        // Not `!target`: line 0 is a valid highlight.
+        if (typeof target !== "number") {
+            revealed = null;
+            options.clear();
+            return;
+        }
+        // Checked before `ready` so a revealed line leaves no layout dependency behind.
+        if (revealed === target || !options.ready(target)) return;
+        revealed = target;
+        untrack(() => {
+            options.reveal(target);
+        });
+    };
+}

package/src/lib/theme-tokens.css

@@ -1,7 +1,7 @@
 /* SPDX-FileCopyrightText: PoppyCake, s.r.o. */
 /* SPDX-License-Identifier: Apache-2.0 */
 
-/* RunWisp Design Tokens — plain CSS, no Tailwind directives.
+/* RunWisp Design Tokens, plain CSS, no Tailwind directives.
  *
  * Single source of truth for the OKLch palette and the semantic `--rw-*`
  * tokens that drive all apps:
@@ -19,7 +19,7 @@
  *   The union selector covers both. Light mode is the default.
  *
  * Webfonts are @imported here (not in theme.css) so every consumer that reads
- * these tokens also gets the faces they name — apps/docs imports this file
+ * these tokens also gets the faces they name, apps/docs imports this file
  * alone. Both families ship in the binary; nothing is fetched from a CDN.
  */
 
@@ -30,13 +30,13 @@
 @import "@fontsource-variable/geist-mono/index.css";
 
 :root {
-    /* Typography — body sans for prose, mono for all chrome and identifiers.
+    /* Typography, body sans for prose, mono for all chrome and identifiers.
      * Geist Mono is variable (100–900), so heading weight 800 is a real cut. */
     --rw-font-sans: "TASA Orbiter", system-ui, -apple-system, sans-serif;
     --rw-font-mono:
         "Geist Mono Variable", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
 
-    /* Primary — Wisp Teal (brand = #0E7C86, the artifact's deep teal). Deeper
+    /* Primary, Wisp Teal (brand = #0E7C86, the artifact's deep teal). Deeper
      * and less cyan than Aurora (running/info) so the two stay distinct. */
     --rw-color-wisp-50: oklch(0.97 0.02 205);
     --rw-color-wisp-100: oklch(0.95 0.035 205);
@@ -50,7 +50,7 @@
     --rw-color-wisp-900: oklch(0.3 0.048 208);
     --rw-color-wisp-950: oklch(0.2 0.034 210);
 
-    /* Accent — Aurora Teal (running status = #13A0A8, a cyan-leaning teal) */
+    /* Accent, Aurora Teal (running status = #13A0A8, a cyan-leaning teal) */
     --rw-color-aurora-50: oklch(0.97 0.02 192);
     --rw-color-aurora-100: oklch(0.94 0.045 192);
     --rw-color-aurora-200: oklch(0.88 0.075 190);
@@ -62,7 +62,7 @@
     --rw-color-aurora-800: oklch(0.35 0.07 192);
     --rw-color-aurora-900: oklch(0.28 0.055 192);
 
-    /* Mist — teal-gray neutrals (the runbook's #F3F6F6 / #E0E7E7 /
+    /* Mist, teal-gray neutrals (the runbook's #F3F6F6 / #E0E7E7 /
      * #14262A / #0C1719 family). No purple tint; hue ~195-205, low chroma,
      * so bg-mist-* utilities agree with the new teal-black surfaces. The light
      * end stays near-neutral to match the desaturated canvas. */
@@ -78,7 +78,7 @@
     --rw-color-mist-900: oklch(0.266 0.025 204); /* ≈ #16292B */
     --rw-color-mist-950: oklch(0.195 0.016 208); /* ≈ #0C1719 */
 
-    /* Success — Field Green (success status = #1F9D57, a true grass green) */
+    /* Success, Field Green (success status = #1F9D57, a true grass green) */
     --rw-color-success-50: oklch(0.97 0.02 150);
     --rw-color-success-100: oklch(0.94 0.04 150);
     --rw-color-success-200: oklch(0.88 0.07 150);
@@ -88,7 +88,7 @@
     --rw-color-success-600: oklch(0.5 0.13 150);
     --rw-color-success-700: oklch(0.42 0.11 150);
 
-    /* Danger — Signal Red (failed status = #D6453D, a warm tomato red) */
+    /* Danger, Signal Red (failed status = #D6453D, a warm tomato red) */
     --rw-color-danger-50: oklch(0.97 0.016 27);
     --rw-color-danger-100: oklch(0.94 0.03 27);
     --rw-color-danger-200: oklch(0.88 0.06 27);
@@ -98,7 +98,7 @@
     --rw-color-danger-600: oklch(0.5 0.17 27);
     --rw-color-danger-700: oklch(0.42 0.145 27);
 
-    /* Warning — Ember Amber (stopped status = #D98324, a warm orange-amber) */
+    /* Warning, Ember Amber (stopped status = #D98324, a warm orange-amber) */
     --rw-color-warning-50: oklch(0.97 0.03 78);
     --rw-color-warning-100: oklch(0.94 0.07 74);
     --rw-color-warning-200: oklch(0.9 0.11 72);
@@ -108,7 +108,7 @@
     --rw-color-warning-600: oklch(0.6 0.14 62);
     --rw-color-warning-700: oklch(0.52 0.12 60);
 
-    /* ANSI console palette — 16-color map for the log console, tuned for
+    /* ANSI console palette, 16-color map for the log console, tuned for
      * its always-dark surface (no .dark override needed). Hues follow the
      * semantic scales: red→danger, green→success, yellow→warning,
      * blue→wisp, cyan→aurora, grays→mist. */
@@ -129,11 +129,11 @@
     --rw-ansi-bright-cyan: var(--rw-color-aurora-300);
     --rw-ansi-bright-white: var(--rw-color-mist-50);
 
-    /* Fixed-dark sibling palettes — the `--rw-con-*` log console (a "black box"
+    /* Fixed-dark sibling palettes, the `--rw-con-*` log console (a "black box"
      * device) and the `--rw-term-*`/`--rw-syn-*` website terminal surfaces both
      * keep their own dark palette in BOTH themes; they never flip light/dark. */
 
-    /* Console device surface — the log console instrument.
+    /* Console device surface, the log console instrument.
      * Exact values from the approved execution-detail design. */
     --rw-con-bg: #0e141b; /* body / gutter backing */
     --rw-con-panel: #11181f; /* toolbar + footer chrome */
@@ -141,7 +141,7 @@
     --rw-con-dim: #6c7d8c; /* footer + muted readouts */
     --rw-con-gutter: #3c4a58; /* line numbers + sentinel rule */
 
-    /* Terminal surface — always dark in both themes (website --term-* set) */
+    /* Terminal surface, always dark in both themes (website --term-* set) */
     --rw-term: #0a1116;
     --rw-term-2: #0d151b;
     --rw-term-line: #1d2932;
@@ -161,7 +161,7 @@
     --rw-syn-punc: #9aa7b0;
     --rw-syn-fn: #2fd4dd;
 
-    /* Elevation — light-mode drop shadows; flipped to `none` in dark so the
+    /* Elevation, light-mode drop shadows; flipped to `none` in dark so the
      * UI reads as borders-only there. */
     --rw-shadow-xs: 0 1px 2px rgba(16, 41, 43, 0.04);
     --rw-shadow-sm: 0 1px 2px rgba(16, 41, 43, 0.04), 0 12px 28px -20px rgba(16, 41, 43, 0.22);
@@ -169,7 +169,7 @@
     --rw-shadow-lg: 0 1px 2px rgba(16, 41, 43, 0.06), 0 30px 60px -28px rgba(16, 41, 43, 0.45);
     --rw-shadow-xl: 0 1px 2px rgba(16, 41, 43, 0.06), 0 40px 80px -30px rgba(16, 41, 43, 0.5);
 
-    /* Light-mode semantic tokens (default) — runbook palette (exact hex).
+    /* Light-mode semantic tokens (default), runbook palette (exact hex).
      *
      * The canvas carries only a whisper of the brand teal. The website can
      * afford a minty `--ground` because dark panes and terminals cover most
@@ -223,7 +223,7 @@
     --rw-warning-soft: rgba(196, 120, 26, 0.1);
     --rw-warning-soft-text: #c4781a;
     --rw-warning-soft-border: rgba(196, 120, 26, 0.25);
-    /* Info — matches primary teal */
+    /* Info, matches primary teal */
     --rw-info: #15a0a8;
     --rw-info-hover: #0e7c86;
     --rw-on-info: #ffffff;
@@ -235,7 +235,7 @@
     --rw-glass-blur: blur(12px);
 }
 
-/* Dark-mode semantic tokens — `.dark` class for Svelte apps, `[data-theme="dark"]`
+/* Dark-mode semantic tokens, `.dark` class for Svelte apps, `[data-theme="dark"]`
  * attribute for Starlight. Both selectors apply the same token set. */
 :root.dark,
 :root[data-theme="dark"] {
@@ -254,7 +254,7 @@
     --rw-outline-faint: #1d2932;
     --rw-ring: #2fd4dd;
     --rw-backdrop: rgba(4, 10, 12, 0.7);
-    /* Primary — bright teal in dark, matches info */
+    /* Primary, bright teal in dark, matches info */
     --rw-primary: #2fd4dd;
     --rw-primary-hover: #5fe3ea;
     --rw-primary-active: #5fe3ea;
@@ -284,7 +284,7 @@
     --rw-warning-soft: rgba(224, 165, 46, 0.14);
     --rw-warning-soft-text: #e0a52e;
     --rw-warning-soft-border: rgba(224, 165, 46, 0.28);
-    /* Info — bright teal in dark */
+    /* Info, bright teal in dark */
     --rw-info: #2fd4dd;
     --rw-info-hover: #5fe3ea;
     --rw-on-info: #04181a;
@@ -293,7 +293,7 @@
     --rw-info-soft-border: rgba(47, 212, 221, 0.28);
     /* Glass */
     --rw-glass: rgba(8, 15, 17, 0.9);
-    /* Elevation — borders-only in dark, no drop shadow */
+    /* Elevation, borders-only in dark, no drop shadow */
     --rw-shadow-xs: none;
     --rw-shadow-sm: none;
     --rw-shadow-md: none;
@@ -301,7 +301,7 @@
     --rw-shadow-xl: none;
 }
 
-/* Platform polish — focus ring, text selection, scrollbar. Lifted from
+/* Platform polish, focus ring, text selection, scrollbar. Lifted from
  * theme.css so apps/docs (no Tailwind) gets the same treatment as the
  * Svelte apps. */
 

package/src/lib/theme.css

@@ -1,6 +1,6 @@
 /* Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0 */
 
-/* RunWisp Design System — Tailwind v4 entrypoint.
+/* RunWisp Design System, Tailwind v4 entrypoint.
  *
  * Raw OKLch palette + semantic tokens live in ./theme-tokens.css (plain CSS),
  * so apps/docs (Starlight, no Tailwind pipeline) can consume the same source.
@@ -19,7 +19,11 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
-    /* Palette aliases — Tailwind utilities (bg-wisp-500, text-mist-900, …)
+    /* Wide enough for the sidebar, run list and run detail to stay side by
+     * side for good; below it the operator can fold the first two away. */
+    --breakpoint-3xl: 100rem;
+
+    /* Palette aliases, Tailwind utilities (bg-wisp-500, text-mist-900, …)
      * resolve through to --rw-color-* declared in theme-tokens.css. */
     --color-wisp-50: var(--rw-color-wisp-50);
     --color-wisp-100: var(--rw-color-wisp-100);
@@ -83,7 +87,7 @@
     --color-warning-600: var(--rw-color-warning-600);
     --color-warning-700: var(--rw-color-warning-700);
 
-    /* Typography — stacks and @font-face live in theme-tokens.css so the
+    /* Typography, stacks and @font-face live in theme-tokens.css so the
      * non-Tailwind consumers (apps/docs) share one definition. */
     --font-sans: var(--rw-font-sans);
     --font-mono: var(--rw-font-mono);
@@ -122,18 +126,18 @@
     --spacing-20: 5rem;
     --spacing-24: 6rem;
 
-    /* Border radius — runbook scale (small radii are signature). lg/xl/2xl/3xl
+    /* Border radius, runbook scale (small radii are signature). lg/xl/2xl/3xl
      * remain for legacy call sites but should not be used going forward. */
     --radius-none: 0;
-    --radius-sm: 0.1875rem; /* 3px — controls */
-    --radius-md: 0.25rem; /* 4px — panels / cards */
+    --radius-sm: 0.1875rem; /* 3px, controls */
+    --radius-md: 0.25rem; /* 4px, panels / cards */
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --radius-full: 9999px;
 
-    /* Shadows — mapped to the flip tokens in theme-tokens.css so every
+    /* Shadows, mapped to the flip tokens in theme-tokens.css so every
      * shadow-* utility resolves to `none` in dark (borders-only look). */
     --shadow-xs: var(--rw-shadow-xs);
     --shadow-sm: var(--rw-shadow-sm);
@@ -142,7 +146,7 @@
     --shadow-xl: var(--rw-shadow-xl);
 }
 
-/* Semantic Design Tokens — Tailwind utility aliases.
+/* Semantic Design Tokens, Tailwind utility aliases.
  * Components use `bg-surface`, `text-primary`, etc.; the values live in
  * theme-tokens.css under the --rw-* namespace and flip on light/dark. */
 
@@ -202,7 +206,7 @@
     --color-warning-soft-border: var(--rw-warning-soft-border);
     --color-info-soft-border: var(--rw-info-soft-border);
 
-    /* Terminal surface — fixed dark in both themes */
+    /* Terminal surface, fixed dark in both themes */
     --color-term: var(--rw-term);
     --color-term-2: var(--rw-term-2);
     --color-term-line: var(--rw-term-line);
@@ -224,8 +228,8 @@
 
     /* Motion. Deliberately minimal: hover, focus and state changes are
      * instant, so there is no scale of durations to pick from. The few things
-     * that still move — a drawer sliding, a toggle knob, an accordion's
-     * height, a progress bar's width — set their own timing inline. */
+     * that still move, a drawer sliding, a toggle knob, an accordion's
+     * height, a progress bar's width, set their own timing inline. */
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
 }
 
@@ -251,10 +255,12 @@ body {
     color: var(--rw-on-surface);
 }
 
-/* Headings are mono chrome — the runbook voice. Components should not fight this. */
-h1,
-h2,
-h3 {
+/* Headings are mono chrome, the runbook voice. Unlayered, so it beats the
+   weight/leading/tracking utilities on a raw <h1>-<h3>: every heading reads the
+   same. The Heading component opts out (data-rw-heading) and carries this look
+   in its own classes, so its props are the source of truth. :is()/:where()
+   keep the selector at element specificity, so app stylesheets still win. */
+:is(h1, h2, h3):where(:not([data-rw-heading])) {
     font-family: var(--font-mono);
     font-weight: 800;
     line-height: 1.1;
@@ -289,7 +295,7 @@ h3 {
     backdrop-filter: var(--rw-glass-blur);
 }
 
-/* Legacy aliases — prefer .rw-bg-glass which adapts to light/dark */
+/* Legacy aliases, prefer .rw-bg-glass which adapts to light/dark */
 .rw-bg-glass-dark {
     background: var(--rw-glass);
     backdrop-filter: var(--rw-glass-blur);

package/src/lib/utils/clipboard.svelte.test.ts

@@ -0,0 +1,92 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CopyFeedback, copyText } from "./clipboard.svelte.js";
+
+describe("copyText", () => {
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+
+    it("writes through navigator.clipboard", async () => {
+        const writeText = vi.fn(() => Promise.resolve());
+        vi.stubGlobal("navigator", { clipboard: { writeText } });
+        expect(await copyText("runwisp")).toBe(true);
+        expect(writeText).toHaveBeenCalledWith("runwisp");
+    });
+
+    it("falls back to execCommand when the clipboard API is missing", async () => {
+        vi.stubGlobal("navigator", {});
+        const textarea = {
+            value: "",
+            readOnly: false,
+            style: {},
+            select: vi.fn(),
+            remove: vi.fn(),
+        };
+        const execCommand = vi.fn(() => true);
+        class FakeElement {
+            focus = vi.fn();
+        }
+        const focused = new FakeElement();
+        vi.stubGlobal("HTMLElement", FakeElement);
+        vi.stubGlobal("document", {
+            activeElement: focused,
+            createElement: () => textarea,
+            body: { appendChild: vi.fn() },
+            execCommand,
+        });
+        expect(await copyText("runwisp")).toBe(true);
+        expect(textarea.value).toBe("runwisp");
+        expect(execCommand).toHaveBeenCalledWith("copy");
+        expect(textarea.remove).toHaveBeenCalled();
+        expect(focused.focus).toHaveBeenCalled();
+    });
+
+    it("reports failure when no copy path exists", async () => {
+        vi.stubGlobal("navigator", {});
+        vi.stubGlobal("document", undefined);
+        expect(await copyText("runwisp")).toBe(false);
+    });
+});
+
+describe("CopyFeedback", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.stubGlobal("navigator", { clipboard: { writeText: () => Promise.resolve() } });
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.unstubAllGlobals();
+    });
+
+    it("flags the copied key until the reset delay passes", async () => {
+        const feedback = new CopyFeedback(1000);
+        await feedback.copy("docker run", "docker");
+        expect(feedback.copied).toBe(true);
+        expect(feedback.isCopied("docker")).toBe(true);
+        expect(feedback.isCopied("binary")).toBe(false);
+        vi.advanceTimersByTime(1000);
+        expect(feedback.copied).toBe(false);
+    });
+
+    it("restarts the reset delay on a second copy", async () => {
+        const feedback = new CopyFeedback(1000);
+        await feedback.copy("a");
+        vi.advanceTimersByTime(800);
+        await feedback.copy("b");
+        vi.advanceTimersByTime(800);
+        expect(feedback.copied).toBe(true);
+    });
+
+    it("stays idle when the copy fails", async () => {
+        vi.stubGlobal("navigator", {
+            clipboard: { writeText: () => Promise.reject(new Error("denied")) },
+        });
+        vi.stubGlobal("document", undefined);
+        const feedback = new CopyFeedback();
+        expect(await feedback.copy("a")).toBe(false);
+        expect(feedback.copied).toBe(false);
+    });
+});

package/src/lib/utils/clipboard.svelte.ts

@@ -0,0 +1,73 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+const DEFAULT_RESET_MS = 2000;
+
+// Copies text to the clipboard and reports whether it worked. navigator.clipboard
+// only exists in secure contexts, so a daemon served over plain http on a LAN IP
+// falls back to the legacy textarea + execCommand path.
+export async function copyText(text: string): Promise<boolean> {
+    if (typeof navigator !== "undefined" && "clipboard" in navigator) {
+        try {
+            await navigator.clipboard.writeText(text);
+            return true;
+        } catch {
+            // Denied or blocked: try the legacy path below.
+        }
+    }
+    return legacyCopy(text);
+}
+
+function legacyCopy(text: string): boolean {
+    if (typeof document === "undefined") return false;
+    const previousFocus = document.activeElement;
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.readOnly = true;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+        // Deprecated, but still the only copy path outside a secure context.
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        ok = document.execCommand("copy"); // NOSONAR
+    } catch {
+        ok = false;
+    }
+    ta.remove();
+    if (previousFocus instanceof HTMLElement) previousFocus.focus();
+    return ok;
+}
+
+// CopyFeedback drives a copy button's transient "copied" state. `key` tells
+// several buttons sharing one instance apart (one per tab or snippet).
+export class CopyFeedback {
+    #key = $state<string | null>(null);
+    #timer: ReturnType<typeof setTimeout> | undefined;
+    readonly #resetMs: number;
+
+    constructor(resetMs: number = DEFAULT_RESET_MS) {
+        this.#resetMs = resetMs;
+    }
+
+    get copied(): boolean {
+        return this.#key !== null;
+    }
+
+    isCopied(key: string): boolean {
+        return this.#key === key;
+    }
+
+    async copy(text: string, key: string = ""): Promise<boolean> {
+        const ok = await copyText(text);
+        if (!ok) return false;
+        clearTimeout(this.#timer);
+        this.#key = key;
+        this.#timer = setTimeout(() => {
+            this.#key = null;
+        }, this.#resetMs);
+        return true;
+    }
+}

package/src/lib/utils/format.test.ts

@@ -86,7 +86,7 @@ describe("formatRelativeTimeWithAbsolute", () => {
     it("uses time-only format (HH:MM) for dates within the same day", () => {
         const recent = new Date(Date.now() - 30 * 60_000).toISOString();
         const r = formatRelativeTimeWithAbsolute(recent);
-        // Same-day branch produces `relative (HH:MM)` — assert on the colon
+        // Same-day branch produces `relative (HH:MM)`, assert on the colon
         // that only appears inside the time format.
         expect(r).toMatch(/\(\d{1,2}:\d{2}\)$/);
     });
@@ -131,13 +131,13 @@ describe("formatRelativeTime", () => {
 
 describe("formatClockTime", () => {
     it("renders three numeric groups (hours, minutes, seconds)", () => {
-        // 24-hour h:m:s — the seconds component is what sets it apart from formatTimeHM.
+        // 24-hour h:m:s, the seconds component is what sets it apart from formatTimeHM.
         expect(numericGroups(formatClockTime("2026-06-22T17:15:02Z"))).toBe(3);
     });
 });
 
 describe("formatTimeHM", () => {
-    it("renders two numeric groups (hours, minutes) — no seconds", () => {
+    it("renders two numeric groups (hours, minutes), no seconds", () => {
         expect(numericGroups(formatTimeHM("2026-06-22T17:15:02Z"))).toBe(2);
     });
 });