@eifi1/ui-kit 0.54.0 → 0.55.0

package/src/hooks/use-authed-src.ts

@@ -1,167 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-/**
- * Fetch a file with the app's own credentials and hand back an object URL for it.
- *
- * A plain `<img src="/api/v1/…">` cannot carry a Bearer token, so the browser gets a
- * 401 and the image — and any "open it" link built on the same path — fails. Both apps
- * solved this once each, by hand: kastlan's `shared/components/authed-image.tsx` (ported
- * from keksdose) and its `useDocumentBlobUrl` for floor plans. This is that code, once,
- * with the two things neither copy did: a loading/error state a caller can render, and
- * an abort when the URL changes mid-flight (a stale response used to overwrite the new
- * one's object URL — and leak the old one, since nothing revoked it).
- *
- * The kit does no auth of its own: the caller hands over a {@link AuthedFetcher} — its
- * axios client, its `fetch` with the header — and the kit only manages the blob's life:
- *
- *   - created when the bytes arrive,
- *   - revoked when the URL changes, the fetcher reports an error, or the component
- *     unmounts — so a long gallery session does not accumulate blobs,
- *   - never exposed as a token-bearing URL: the object URL is `blob:` and local.
- */
-
-/**
- * The app's authenticated GET. Resolve to the file's bytes: a `Blob` (axios with
- * `responseType: "blob"`), or a `Response` (plain `fetch`), whose `ok` is checked here.
- *
- * Honour `signal` if you can — a thumbnail scrolled past, or a lightbox paged on, then
- * stops downloading. Ignoring it is safe; the result of a superseded call is discarded
- * either way.
- */
-export type AuthedFetcher = (url: string, init: { signal: AbortSignal }) => Promise<Blob | Response>;
-
-/** `idle`: no URL. `loading`: the fetch is in flight. `ready`: `src` is usable.
- *  `error`: the fetch failed (see `error`). */
-export type AuthedSrcStatus = "idle" | "loading" | "ready" | "error";
-
-export interface UseAuthedSrcOptions {
-  /**
-   * How to fetch. Left out (or `null`), the URL is used as it is — `src` is the URL and
-   * the status `ready` at once — so a component that takes an OPTIONAL fetcher (the
-   * image grid, the lightbox) has one code path for public and protected images.
-   */
-  fetcher?: AuthedFetcher | null;
-  /** `false` holds the fetch — a lightbox slide that is not on screen. Default `true`. */
-  enabled?: boolean;
-}
-
-export interface UseAuthedSrcResult {
-  /** The object URL (or, without a fetcher, the URL itself); `null` until ready. */
-  src: string | null;
-  status: AuthedSrcStatus;
-  /** What the fetcher threw, when `status` is `error`. */
-  error: unknown;
-  /** The blob's MIME type, once fetched (`""` when the server sent none). `undefined`
-   *  without a fetcher — nothing was fetched to ask. Lets a caller that does not know
-   *  whether a URL is an image or a PDF find out. */
-  type: string | undefined;
-  /** Fetch again — after an `error`, or to pick up a changed file at the same URL. */
-  retry: () => void;
-}
-
-interface State {
-  /** Which request this state belongs to — see the effect. */
-  key: string | null;
-  src: string | null;
-  status: AuthedSrcStatus;
-  error: unknown;
-  type: string | undefined;
-}
-
-const NO_STATE: State = { key: null, src: null, status: "idle", error: undefined, type: undefined };
-
-async function toBlob(res: Blob | Response): Promise<Blob> {
-  if (typeof Response !== "undefined" && res instanceof Response) {
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    return res.blob();
-  }
-  return res as Blob;
-}
-
-/**
- * `useAuthedSrc(url, { fetcher })` — see the module note.
- *
- * ```tsx
- * const fetcher: AuthedFetcher = (url, { signal }) =>
- *   apiClient.get(url, { responseType: "blob", signal }).then((r) => r.data);
- * const { src, status } = useAuthedSrc(photo.file_path, { fetcher });
- * ```
- *
- * The fetcher is read through a ref, so an inline arrow does not refetch on every
- * render; a change of `url` (or `retry`) does.
- */
-export function useAuthedSrc(
-  url: string | null | undefined,
-  { fetcher, enabled = true }: UseAuthedSrcOptions = {},
-): UseAuthedSrcResult {
-  const fetcherRef = useRef(fetcher);
-  useEffect(() => {
-    fetcherRef.current = fetcher;
-  });
-  const hasFetcher = !!fetcher;
-  const [attempt, setAttempt] = useState(0);
-  const key = url && enabled && hasFetcher ? `${attempt}|${url}` : null;
-  const [state, setState] = useState<State>(NO_STATE);
-  // The state answers one key, and only while that key is current. Once the key moves
-  // on, that request's effect is cleaned up and its object URL revoked, and a key can
-  // come back: Lightbox passes `enabled: open`, so closing and reopening a photo goes
-  // K → null → K, and paging back before the next picture loaded goes A → B → A. Kept,
-  // the state would answer the returning key with the revoked `blob:` as "ready" (or
-  // with the old error) until the refetch lands (BUG-3, refactor audit 2026-10).
-  // Dropped here, while rendering, rather than in the cleanup: a setState from a
-  // cleanup lands at a lower priority than the click that reopens, so that render
-  // could still see the old state.
-  if (state.key !== null && state.key !== key) setState(NO_STATE);
-
-  useEffect(() => {
-    const fetchFn = fetcherRef.current;
-    if (!key || !url || !fetchFn) return;
-    const controller = new AbortController();
-    let created: string | null = null;
-    let active = true;
-    // Settled: the response is in (or failed). Aborting then would signal a request
-    // that is long over — a fetcher that listens for `abort` (to log, to cancel a
-    // retry it scheduled, to count cancellations) would see a cancellation that
-    // never happened on every URL change and unmount.
-    let settled = false;
-    // No "loading" state is set here: a key the state does not describe yet already
-    // reads as loading (see the end of the hook).
-    fetchFn(url, { signal: controller.signal })
-      .then(toBlob)
-      .then((blob) => {
-        settled = true;
-        if (!active) return;
-        created = URL.createObjectURL(blob);
-        setState({ key, src: created, status: "ready", error: undefined, type: blob.type });
-      })
-      .catch((error: unknown) => {
-        settled = true;
-        if (!active) return;
-        setState({ key, src: null, status: "error", error, type: undefined });
-      });
-    return () => {
-      // `active` first: an in-flight response that lands after this must neither set
-      // state on an unmounted component nor create a blob nobody will revoke.
-      active = false;
-      // Only a request still in flight is aborted; `active` above is the stale-response
-      // guard either way.
-      if (!settled) controller.abort();
-      if (created) URL.revokeObjectURL(created);
-    };
-  }, [key, url]);
-
-  const retry = useCallback(() => setAttempt((n) => n + 1), []);
-
-  if (!url || !enabled) {
-    return { src: null, status: "idle", error: undefined, type: undefined, retry };
-  }
-  if (!hasFetcher) {
-    return { src: url, status: "ready", error: undefined, type: undefined, retry };
-  }
-  // Until the effect for THIS key has run, the state still describes the previous URL
-  // — a render in between must not show the old picture under the new name.
-  if (state.key !== key) {
-    return { src: null, status: "loading", error: undefined, type: undefined, retry };
-  }
-  return { src: state.src, status: state.status, error: state.error, type: state.type, retry };
-}

package/src/hooks/use-body-scroll-lock.ts

@@ -1,119 +0,0 @@
-import { useEffect } from "react";
-
-/**
- * How many locks are currently held, and what `body.style.overflow` was before the
- * first of them. Module scope on purpose: the whole point is that the lockers do not
- * know about each other, so the only place they can agree is here.
- *
- * This used to be per-locker — each one saved the previous value and restored it on
- * cleanup — and five places in this package do that (Modal, PickerSheet,
- * NumberPadSheet, and the DataTable's row dialog and settings panel). Save/restore
- * composes only if the releases are strictly nested in reverse order of the
- * acquisitions, and React runs unmount cleanups PARENT FIRST, which is the opposite
- * of what the idiom needs.
- *
- * The gesture that broke it is an ordinary one: open the transaction dialog, tap the
- * amount — the numpad sheet opens on focus, in a later commit, capturing the
- * "hidden" the dialog had already set — then press Save. Both unmount together, the
- * dialog restores "" first, the sheet then puts "hidden" back, and the page is left
- * unscrollable with no overlay on screen. The only way out was a reload.
- *
- * A count has neither failure: the first acquire records the real previous value, the
- * last release restores it, and the order in between does not matter.
- */
-let lockCount = 0;
-let previousOverflow = "";
-let previousPaddingRight = "";
-let previousRootOverflow: { x: string; y: string } | null = null;
-
-/**
- * Whether `overflow` on <body> reaches the viewport. It does only while <html>'s own
- * overflow is `visible` on both axes; once an app clips or hides <html> (keksdose's
- * `html, body { overflow-x: clip }` guard, 0.25), the body's `hidden` stays on the
- * body and the page behind a "locked" dialog scrolls on (measured: the wheel moved
- * 800px). Then <html> is locked too.
- */
-function rootTakesOverflow(): boolean {
-  const style = getComputedStyle(document.documentElement);
-  return style.overflowX !== "visible" || style.overflowY !== "visible";
-}
-
-/**
- * How much width the scrollbar of the DOCUMENT is currently taking.
- *
- * Zero on every platform with overlay scrollbars (macOS, most Linux, every phone) and
- * zero whenever the page does not scroll; ~15px on Windows with classic ones. Read
- * BEFORE `overflow: hidden` is applied, because applying it is what makes it vanish.
- */
-function scrollbarWidth(): number {
-  return Math.max(0, window.innerWidth - document.documentElement.clientWidth);
-}
-
-function acquire(): void {
-  if (lockCount === 0) {
-    // ⚠️ Hiding the document's overflow REMOVES its scrollbar, and on a platform where
-    // that scrollbar occupied layout space the page gets ~15px wider for as long as the
-    // dialog is open — then snaps back on close. Keksdose dev #561 from a 500px-wide
-    // desktop window: *"remove the scroll bar to stop horizontal resizing when opening
-    // edit tx and closing"*.
-    //
-    // Replacing the width we are about to take away is the standard fix and the narrow
-    // one. The alternatives both cost more than the bug: `scrollbar-gutter` on `html`
-    // shrinks the initial containing block, so every `position: fixed` overlay stops
-    // 15px short on each edge (measured, and documented in tokens.css), and moving the
-    // scroll container to `main` below `md` stops a phone's URL bar collapsing. This
-    // touches neither — only the element already being modified, only while locked.
-    //
-    // Note this fixes the DIALOG jump specifically. The separate page-to-page width
-    // change, where one route scrolls and the next does not, is the open decision
-    // recorded in tokens.css and is untouched here.
-    const gap = scrollbarWidth();
-    previousOverflow = document.body.style.overflow;
-    previousPaddingRight = document.body.style.paddingRight;
-    document.body.style.overflow = "hidden";
-    if (rootTakesOverflow()) {
-      // Per axis, so an app's own inline `overflow-x` comes back as it was.
-      const root = document.documentElement.style;
-      previousRootOverflow = { x: root.overflowX, y: root.overflowY };
-      root.overflowX = "hidden";
-      root.overflowY = "hidden";
-    }
-    if (gap > 0) {
-      // Added to whatever the body already had rather than assigned, so a consumer
-      // that sets its own padding keeps it.
-      const existing = parseFloat(getComputedStyle(document.body).paddingRight) || 0;
-      document.body.style.paddingRight = `${existing + gap}px`;
-    }
-  }
-  lockCount += 1;
-}
-
-function release(): void {
-  if (lockCount === 0) return;
-  lockCount -= 1;
-  if (lockCount === 0) {
-    document.body.style.overflow = previousOverflow;
-    document.body.style.paddingRight = previousPaddingRight;
-    if (previousRootOverflow !== null) {
-      document.documentElement.style.overflowX = previousRootOverflow.x;
-      document.documentElement.style.overflowY = previousRootOverflow.y;
-    }
-    previousOverflow = "";
-    previousPaddingRight = "";
-    previousRootOverflow = null;
-  }
-}
-
-/**
- * Lock background scrolling while `locked` is true, restoring the prior value once
- * the LAST holder releases. Composable with every other caller of this hook — see
- * the note above for why that has to be a property of the hook rather than of each
- * caller's discipline.
- */
-export function useBodyScrollLock(locked: boolean): void {
-  useEffect(() => {
-    if (!locked) return;
-    acquire();
-    return release;
-  }, [locked]);
-}

package/src/hooks/use-breakpoint.ts

@@ -1,133 +0,0 @@
-import { useMediaQuery } from "./use-media-query";
-import { useTextSize } from "../theme/text-size";
-
-/**
- * Breakpoints that follow the text size, in JS (docs/text-size-harmonization.md §3.3,
- * §10.4).
- *
- * A media query's rem resolves against the browser's default font size, not `<html>`'s,
- * so Tailwind's `md:` would stay at 48rem when the root grows. tokens.css therefore
- * redefines every breakpoint variant per text size — `md:` is 48rem at Normal, 60rem at
- * Large, 72rem at Extra large — and these hooks ask the same question with the same
- * numbers, so the CSS and the JS answer always agree: AppShell's `md:hidden` and its
- * `isMdUp`, DataTable's cards and its full-screen dialog, an app's sticky footer
- * (keksdose's must be the SAME `usePhoneLayout()` the dialog uses, §10.4).
- *
- * Width queries only. Pointer and display-mode queries stay `useMediaQuery` (§10.4).
- */
-
-/** The breakpoints at Normal, in rem: Tailwind's five, and `3xl` (keksdose's
- *  `min-[2400px]`, §10.4). tokens.css multiplies each by the text size. */
-export const BREAKPOINT_REM = { sm: 40, md: 48, lg: 64, xl: 80, "2xl": 96, "3xl": 150 } as const;
-
-export type Breakpoint = keyof typeof BREAKPOINT_REM;
-
-/** A breakpoint variant, spelled as in a class: `"md"` is `md:` (at least md), `"max-md"`
- *  is `max-md:` (below md). */
-export type BreakpointVariant = Breakpoint | `max-${Breakpoint}`;
-
-/**
- * The browser's own default font size in px — what a media query's rem means (the
- * initial `font-size: medium`, never `<html>`'s). 16 unless the person changed it, and 16
- * outside a browser. Read once: changing it takes a browser setting, after which the
- * page is reloaded in practice.
- */
-let browserRemPx: number | null = null;
-function readBrowserRemPx(): number {
-  if (browserRemPx !== null) return browserRemPx;
-  // Outside a browser (SSR): 16, uncached, so the client's first real read still counts.
-  if (typeof document === "undefined" || !document.body) return 16;
-  const probe = document.createElement("div");
-  probe.style.cssText = "position:absolute;visibility:hidden;font-size:medium";
-  document.body.appendChild(probe);
-  const px = Number.parseFloat(getComputedStyle(probe).fontSize);
-  probe.remove();
-  // jsdom computes no font size ("medium" or nothing): the default it stands for.
-  browserRemPx = px > 0 ? px : 16;
-  return browserRemPx;
-}
-
-/**
- * How many CSS px one `rem` is at `scale` (`TEXT_SCALE` of the size in force): the
- * browser's own default font size times the text size — what `<html>`'s computed font
- * size is, by tokens.css. For the few lengths JS has to do arithmetic with: a popover's
- * width against the viewport edge, a chart constant (§3.1, §3.2). 16 × `scale` outside a
- * browser and in jsdom, which computes no default font size.
- */
-export function remPx(scale = 1): number {
-  return readBrowserRemPx() * scale;
-}
-
-/** {@link remPx} at the text size in force, re-rendering when it changes. */
-export function useRemPx(): number {
-  const { scale } = useTextSize();
-  return remPx(scale);
-}
-
-/** A length in rem as the kit spells one in JS — `"18rem"` — where a prop also takes px
- *  as a plain number. */
-export type RemLength = `${number}rem`;
-
-/**
- * A `number | RemLength` in CSS px now: a number is px as given, `"18rem"` is 18 ×
- * `rootRemPx` (see {@link remPx}). `undefined` stays `undefined`.
- */
-export function lengthPx(length: number | RemLength, rootRemPx: number): number;
-export function lengthPx(length: number | RemLength | undefined, rootRemPx: number): number | undefined;
-export function lengthPx(length: number | RemLength | undefined, rootRemPx: number): number | undefined {
-  if (length === undefined) return undefined;
-  return typeof length === "number" ? length : Number.parseFloat(length) * rootRemPx;
-}
-
-/**
- * The media query a breakpoint variant means at `scale` (`TEXT_SCALE` of the size in
- * force). `"md"` → `(min-width: 768px)` at Normal, `(min-width: 960px)` at Large;
- * `"max-md"` → `(width < 768px)` at Normal. In px, scaled by the browser's own default
- * font size as well, so a person who set 20 px in the browser gets 960 px for `md` at
- * Normal — as the CSS does.
- *
- * `max-*` is written in range syntax, `(width < N)`, against the same `N` its `min-*`
- * twin starts at, so the two are exact complements at EVERY width: exactly one of
- * `md` and `max-md` matches, as with tokens.css's `width >= 48rem` / `width < 48rem`
- * (and Tailwind's own `max-*`). Until 0.32.1 it was `(max-width: 767px)`, which left a
- * gap: on a fractional viewport width (767.5 px under zoom or at some Android
- * device-pixel ratios) neither query matched, so DataTable, asking `!md`, said phone
- * while `usePhoneLayout()`, asking `max-md`, said not (0.32.1, keksdose's 0.32 report;
- * docs/text-size-harmonization.md §3.3: "the CSS and JS answers always agree").
- *
- * Range syntax in media queries is Chrome / Edge 104, Firefox 63, Safari 16.4. That is
- * inside the floor the kit already sets: tokens.css's breakpoint variants are written in
- * it, and Tailwind v4 itself needs Safari 16.4, Chrome 111 and Firefox 128.
- *
- * A test's `matchMedia` stub that keyed on the old string (`"max-width: 767px"`,
- * `PHONE_QUERY`'s, which went in 0.34) has to answer `(width < 768px)` now. `min-*` is
- * unchanged, character for character.
- */
-export function breakpointQuery(variant: BreakpointVariant, scale = 1, remPx: number = readBrowserRemPx()): string {
-  const max = variant.startsWith("max-");
-  const name = (max ? variant.slice(4) : variant) as Breakpoint;
-  const px = Math.round(BREAKPOINT_REM[name] * remPx * scale);
-  return max ? `(width < ${px}px)` : `(min-width: ${px}px)`;
-}
-
-/**
- * Whether the viewport matches a breakpoint variant at the text size in force — the JS
- * twin of the class: `useBreakpoint("md")` is true exactly where `md:` applies,
- * `useBreakpoint("max-sm")` where `max-sm:` does. `fallback` answers where there is no
- * `matchMedia` (SSR, jsdom).
- */
-export function useBreakpoint(variant: BreakpointVariant, fallback = false): boolean {
-  const { scale } = useTextSize();
-  return useMediaQuery(breakpointQuery(variant, scale), fallback);
-}
-
-/**
- * The phone layout: below `md` at the text size in force — `max-md:` in CSS. The single
- * answer for "is this the phone layout" (§10.4): the kit's own sheets and cards use it,
- * and an app's phone checks must too, so a tablet at 150 % gets every phone treatment
- * at once or none of them. Replaced `useMediaQuery(PHONE_QUERY)` in 0.32; that string
- * went in 0.34.
- */
-export function usePhoneLayout(fallback = false): boolean {
-  return useBreakpoint("max-md", fallback);
-}

package/src/hooks/use-close-transition.ts

@@ -1,107 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { prefersReducedMotion } from "../lib/reduced-motion";
-
-/** How long the exit animation runs, in ms. Mirrors `.animate-sheet-out` in
- *  tokens.css — the sheet is the slower of the two, so it is what the unmount waits
- *  for. Exported so a test can advance a fake clock by the real number rather than
- *  by a copy of it. */
-export const OVERLAY_EXIT_MS = 220;
-
-/**
- * Whether an exit animation is skipped, read NOW: the user asked for no motion, or there
- * is no `matchMedia` (jsdom, SSR) — nothing is painting there, so "no animation" is the
- * only correct answer, and a closed overlay is gone at once in every test suite. Shared
- * by every exit timer in the package, so they agree. The kit's one `prefersReducedMotion`
- * (lib/reduced-motion), asked with that answer for the unknown case (DUP-11).
- */
-export function skipsExitAnimation(): boolean {
-  return prefersReducedMotion(true);
-}
-
-/**
- * The state machine an exit animation needs, written once for every overlay in this
- * package (Keksdose live #320 rework: *"Recognized the opening transition. Choose
- * transition should be the same, only backwards"*).
- *
- * ## Why a hook and not a class on the panel
- *
- * An enter animation is free: the element mounts, the keyframes run. An exit is not —
- * by the time the state says "closed" the element is already gone, so something has to
- * hold it on screen for exactly as long as the animation lasts. That something cannot
- * be the caller (every caller would need the same timer) and it cannot be the panel's
- * markup. It is this: the overlay's own affordances call {@link requestClose} instead
- * of `onClose`, render the `-out` classes while `closing` is true, and the real
- * `onClose` — the one that unmounts them — fires when the animation has finished.
- *
- * ## What it deliberately does not do
- *
- * It does not intercept a close the CALLER decides on. A dialog that closes itself
- * after a successful save sets its own state and unmounts, with no exit animation, and
- * that is the right trade: making it otherwise would mean every overlay owning an
- * `open` prop and every caller waiting on a callback to learn when its own state took
- * effect. What is animated is what the user dismissed — the X, the backdrop, Escape,
- * the Back gesture — which is the motion the row was about.
- *
- * ## Reduced motion
- *
- * Closes immediately, without the delay. A user who has asked for no motion must not
- * be made to wait 220ms for an animation they are not being shown, and the `-out`
- * classes are never applied, so tokens.css needs no reduced-motion rule for them.
- */
-export function useCloseTransition(
-  onClose: () => void,
-  ms: number = OVERLAY_EXIT_MS,
-): { closing: boolean; requestClose: () => void } {
-  const [closing, setClosing] = useState(false);
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Latest-ref rather than a dependency: callers pass inline arrows, so a dependency
-  // would hand every render a new `requestClose` — and this one is read once, by a
-  // timer that has already been scheduled. Assigned in an effect, never during render
-  // (`react-hooks/refs`), matching `use-long-press.ts` next door.
-  const latest = useRef(onClose);
-  useEffect(() => {
-    latest.current = onClose;
-  });
-
-  // One timer, ever. A second Escape while the panel is already leaving must not
-  // schedule a second unmount — two `onClose` calls is a caller's state machine being
-  // run twice, which is how a "close" ends up also discarding the row behind it.
-  useEffect(
-    () => () => {
-      if (timer.current) clearTimeout(timer.current);
-    },
-    [],
-  );
-
-  const requestClose = useCallback(() => {
-    if (timer.current) return;
-    // Read at close time, not at mount: the setting can change under a long-lived
-    // page, and `matchMedia` is absent in jsdom and in SSR — where "no animation" is
-    // also the only correct answer, since nothing is painting.
-    if (skipsExitAnimation() || ms <= 0) {
-      latest.current();
-      return;
-    }
-    setClosing(true);
-    timer.current = setTimeout(() => {
-      timer.current = null;
-      // ⚠️ Reset BEFORE handing control back — reported from a phone within the hour
-      // of the 0.4.52 deploy that first shipped this hook, against every table at once.
-      // A panel that returns `null` while closed is still MOUNTED — `FullBleedDialog`
-      // early-returns after its hooks, and DataTable renders it once and flips `open`
-      // — so this state outlives the panel it describes. Left true, the NEXT open
-      // rendered `animate-*-out` with `animation-fill-mode: forwards` on a sheet that
-      // had only just arrived: it lowered itself off the screen in 220ms and stayed
-      // there, invisible but still holding the backdrop's pointer events. Every table
-      // on every phone, first open fine and every one after it not, until a route
-      // change remounted the component.
-      //
-      // Batched with the `onClose` below, so a caller that unmounts on close still
-      // renders exactly once and nothing flashes.
-      setClosing(false);
-      latest.current();
-    }, ms);
-  }, [ms]);
-
-  return { closing, requestClose };
-}

package/src/hooks/use-copy-to-clipboard.ts

@@ -1,122 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-export type CopyState = "idle" | "copied" | "failed";
-
-export interface UseCopyToClipboardOptions {
-  /** How long `copied` / `failed` stays up before the state returns to `idle`, in
-   *  ms. `0` keeps it until the next copy or {@link UseCopyToClipboardReturn.reset}. */
-  resetAfter?: number;
-}
-
-export interface UseCopyToClipboardReturn {
-  state: CopyState;
-  /** Copy `text`. Resolves to whether it actually reached the clipboard — the same
-   *  answer `state` gives, for a caller that wants to act on it directly. */
-  copy: (text: string) => Promise<boolean>;
-  reset: () => void;
-}
-
-/**
- * The legacy path: select a throwaway `<textarea>` and ask the document to copy it.
- *
- * `navigator.clipboard` exists only in a secure context, so an app opened over plain
- * http on a LAN address (how keksdose is tested on a phone) has no Clipboard API at
- * all. `execCommand("copy")` is deprecated but still implemented everywhere, and it
- * answers with a boolean, which is all this needs. Focus and the user's selection are
- * put back afterwards: copying must not move the keyboard.
- */
-function legacyCopy(text: string): boolean {
-  if (typeof document === "undefined" || typeof document.execCommand !== "function") return false;
-  const active = document.activeElement as HTMLElement | null;
-  const selection = document.getSelection();
-  const ranges: Range[] = [];
-  if (selection) for (let i = 0; i < selection.rangeCount; i++) ranges.push(selection.getRangeAt(i));
-
-  const area = document.createElement("textarea");
-  area.value = text;
-  area.setAttribute("readonly", "");
-  // Off-screen but rendered: a `display: none` textarea cannot be selected.
-  area.style.position = "fixed";
-  area.style.top = "0";
-  area.style.insetInlineStart = "-9999px";
-  area.style.opacity = "0";
-  document.body.appendChild(area);
-  area.select();
-  let ok: boolean;
-  try {
-    ok = document.execCommand("copy");
-  } catch {
-    ok = false;
-  }
-  area.remove();
-  if (selection) {
-    selection.removeAllRanges();
-    for (const r of ranges) selection.addRange(r);
-  }
-  active?.focus?.();
-  return ok;
-}
-
-/** Copy `text`, by the Clipboard API when there is one and the legacy path when
- *  there is not — or when the API refuses (a denied permission, a document that is
- *  not focused). Never throws. */
-export async function copyToClipboard(text: string): Promise<boolean> {
-  const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : undefined;
-  if (clipboard && typeof clipboard.writeText === "function") {
-    try {
-      await clipboard.writeText(text);
-      return true;
-    } catch {
-      // Fall through: the API exists but refused. The legacy path sometimes succeeds
-      // where the permission prompt was dismissed.
-    }
-  }
-  return legacyCopy(text);
-}
-
-/**
- * Copy text and KNOW whether it worked.
- *
- * keksdose had two copy buttons that flipped to "Copied" on click and never looked at
- * the promise — so on the http LAN build, where there is no Clipboard API, they
- * confirmed a copy that had not happened. The state here is set from the result, and
- * a failure is a state of its own rather than a quiet return to idle.
- */
-export function useCopyToClipboard({ resetAfter = 2000 }: UseCopyToClipboardOptions = {}): UseCopyToClipboardReturn {
-  const [state, setState] = useState<CopyState>("idle");
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const mounted = useRef(true);
-
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-      if (timer.current) clearTimeout(timer.current);
-    };
-  }, []);
-
-  const reset = useCallback(() => {
-    if (timer.current) clearTimeout(timer.current);
-    timer.current = null;
-    setState("idle");
-  }, []);
-
-  const copy = useCallback(
-    async (text: string) => {
-      if (timer.current) clearTimeout(timer.current);
-      const ok = await copyToClipboard(text);
-      if (!mounted.current) return ok;
-      setState(ok ? "copied" : "failed");
-      if (resetAfter > 0) {
-        timer.current = setTimeout(() => {
-          timer.current = null;
-          setState("idle");
-        }, resetAfter);
-      }
-      return ok;
-    },
-    [resetAfter],
-  );
-
-  return { state, copy, reset };
-}