@eifi1/ui-kit 0.8.1 → 0.10.0

package/src/components/ui.tsx

@@ -57,6 +57,40 @@ const buttonVariantClasses: Record<ButtonVariant, string> = {
     "rounded-sm p-0 bg-transparent text-[var(--brand)] underline-offset-4 hover:underline focus:ring-[var(--brand)]",
 };
 
+/**
+ * The text colour of a `link` or `ghost` button, over the variant's own.
+ *
+ * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's "Mark
+ * undone", transaction-fields:176/215's "Add line" / "Fill total",
+ * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the
+ * body colour under the pointer, for an action that must be findable but not compete
+ * with the brand-coloured one beside it. `danger` is the same quiet look turning
+ * `--danger` on hover — transaction-editor:401's "Remove split", which is a text
+ * action that destroys something.
+ *
+ * A `tone` rather than a `link-muted` variant, because it is the axis IconButton
+ * already has (`tone="muted"`, `tone="danger"`, same quiet-until-hover meaning), and
+ * because the same two looks are wanted on `ghost`. The filled and bordered variants
+ * carry their meaning in the box, not the text, so a tone on them does nothing.
+ */
+export type ButtonTone = "default" | "muted" | "danger";
+
+const BUTTON_TONES: Record<Exclude<ButtonTone, "default">, string> = {
+  muted:
+    "text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:hover:text-[var(--text-secondary)]",
+  danger:
+    "text-[var(--text-secondary)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)] disabled:hover:text-[var(--text-secondary)]",
+};
+
+/** Only the two transparent variants take a tone; see {@link ButtonTone}. */
+const TONED_VARIANTS = new Set<ButtonVariant>(["link", "ghost"]);
+
+// `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what
+// lenkbank's "All speeds" toggle paints by hand (gear/hysteresis-charts.tsx:482). After
+// the tone, so a pressed muted link is brand, and an unpressed one is quiet grey.
+const BUTTON_LINK_PRESSED =
+  "font-medium text-[var(--brand)] hover:text-[var(--brand)] disabled:hover:text-[var(--brand)]";
+
 /** The second argument of {@link buttonClasses} in its options form. */
 export interface ButtonClassesOptions {
   /** See {@link ButtonProps.size}. */
@@ -105,12 +139,75 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —
    *  declared here only because `ButtonHTMLAttributes` does not carry it. */
   ref?: Ref<HTMLButtonElement>;
+  /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or
+   *  `danger` (quiet, `--danger` on hover). Ignored by the other variants. See
+   *  {@link ButtonTone}. */
+  tone?: ButtonTone;
+  /**
+   * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets
+   * `aria-pressed="true"` and draws the "on" look — on a `link`, the brand colour and a
+   * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and
+   * `false` sets `aria-pressed="false"` with the ordinary look. Left out, no
+   * `aria-pressed` (or the caller's own). For lenkbank's "All speeds" text toggle
+   * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`
+   * swapping two class strings; with `variant="link" tone="muted"` it is this.
+   */
+  pressed?: boolean;
+  /**
+   * Why the action is not available — the button's half of DangerConfirm's
+   * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).
+   *
+   * A disabled button that cannot say why is a dead end: the native `disabled` takes it
+   * out of the tab order, so a keyboard user never lands on it, and a pointer gets a
+   * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`
+   * instead — still focusable, still hoverable — clicks (and the Enter/Space and form
+   * submission they stand for) do nothing, and the reason is shown in the kit
+   * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it
+   * on focus. It wins over `disabled`: passing both keeps the button reachable, which is
+   * the point of giving a reason.
+   *
+   * The description is a `hidden` copy of the reason rather than the bubble itself: the
+   * bubble exists only while hovered or focused once it is portalled, and a description
+   * that comes and goes is read inconsistently. The bubble is kept visual, the way
+   * DangerConfirm keeps its own.
+   */
+  disabledReason?: ReactNode;
 }
 
-export function Button({ variant = "primary", size = "md", stretch, className, ...rest }: ButtonProps) {
-  return (
+function hasContent(node: ReactNode): boolean {
+  return node !== undefined && node !== null && node !== false && node !== "";
+}
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  stretch,
+  tone = "default",
+  pressed,
+  disabledReason,
+  className,
+  onClick,
+  ...rest
+}: ButtonProps) {
+  const reasonId = useId();
+  const locked = hasContent(disabledReason);
+  const ownDescribedBy = rest["aria-describedby"];
+  const button = (
     <button
       {...rest}
+      disabled={locked ? undefined : rest.disabled}
+      aria-disabled={locked || rest["aria-disabled"]}
+      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}
+      aria-pressed={pressed ?? rest["aria-pressed"]}
+      onClick={(e) => {
+        // `preventDefault` as well as not calling through: a locked submit button must
+        // not submit its form, and the browser does that after this handler returns.
+        if (locked) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      }}
       className={cn(
         BUTTON_BASE,
         BUTTON_SIZES[size],
@@ -119,10 +216,29 @@ export function Button({ variant = "primary", size = "md", stretch, className, .
         // align-items). No effect outside a flex row / when it's already the tallest.
         stretch && "self-stretch",
         buttonVariantClasses[variant],
+        tone !== "default" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],
+        pressed && (variant === "link" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),
+        // The disabled look for the focusable kind of disabled.
+        locked && "cursor-not-allowed opacity-50",
         className,
       )}
     />
   );
+  if (!locked) return button;
+  return (
+    // The button in a FRAGMENT so Tooltip does not clone its bubble into the
+    // description as well — the hidden copy below already describes it, and the same
+    // sentence twice would be read on every focus. `stretch` moves to the wrapper,
+    // which is now the flex item.
+    <Tooltip label={disabledReason} className={stretch ? "self-stretch" : undefined}>
+      <>
+        {button}
+        <span id={reasonId} hidden>
+          {disabledReason}
+        </span>
+      </>
+    </Tooltip>
+  );
 }
 
 // Canonical square icon-only button. <Button> carries TEXT geometry — px-3 py-2
@@ -154,27 +270,50 @@ const ICON_BUTTON_SIZES: Record<IconButtonSize, string> = {
 };
 
 // A tone re-colours the glyph without changing what the variant draws around it.
-// `muted` and `danger` both sit quiet at rest — an action in every row of a list
-// must not shout from every row — and `danger` answers the pointer in the
-// destructive family, so the red arrives only on the one row you are about to
-// act on.
-const ICON_BUTTON_TONES = {
-  default: "",
-  muted:
-    "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]",
-  danger:
-    "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]",
-  // Amber AT REST, unlike `danger`: a warning icon button is the one on the row that
-  // needs attention (keksdose's "needs review" flag on a transaction, the stale-rate
-  // marker), not an action repeated down a list — quiet grey would hide the very
-  // thing it is there to point out.
-  warning:
-    "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]",
-  // Sky at rest, for the same reason as `warning`: keksdose's reconcile action on an
-  // account row (accounts-page:867) is the one on the row to notice, and it is
-  // informational rather than a problem, so it takes the `--info` family.
-  info: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]",
-} as const;
+// Each coloured tone comes in two resting looks, picked by `quiet` (see the prop):
+// QUIET is placeholder grey until the pointer or focus arrives, then the tone's
+// family; TONED wears the tone's colour at rest. The defaults are the looks each tone
+// had before `quiet` existed: `danger` is quiet — an action in every row of a list
+// must not shout from every row, so the red arrives only on the one row you are about
+// to act on — while `warning` and `info` are toned, because they mark the ONE thing
+// on the row to notice (keksdose's "needs review" flag, its reconcile action at
+// accounts-page:867), and quiet grey would hide the very thing they point out.
+// `muted` is quiet by definition and has no toned look; `default` has no tone.
+export type IconButtonTone = "default" | "muted" | "danger" | "warning" | "info";
+
+type ColouredTone = "danger" | "warning" | "info";
+
+const ICON_BUTTON_TONES: Record<ColouredTone, { quiet: string; toned: string }> = {
+  danger: {
+    quiet:
+      "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]",
+    toned: "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border)]",
+  },
+  warning: {
+    quiet:
+      "text-[var(--text-placeholder)] hover:bg-[var(--warning-bg)] hover:text-[var(--warning)] focus:ring-[var(--warning-border)]",
+    toned: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]",
+  },
+  info: {
+    quiet:
+      "text-[var(--text-placeholder)] hover:bg-[var(--info-bg)] hover:text-[var(--info)] focus:ring-[var(--info-border)]",
+    toned: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]",
+  },
+};
+
+const ICON_BUTTON_MUTED =
+  "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]";
+
+/** Which tones sit quiet at rest when `quiet` is left out. */
+const QUIET_BY_DEFAULT: Record<ColouredTone, boolean> = { danger: true, warning: false, info: false };
+
+function iconButtonToneClass(tone: IconButtonTone, quiet: boolean | undefined): string {
+  if (tone === "default") return "";
+  if (tone === "muted") return cn(ICON_BUTTON_MUTED, ICON_BUTTON_QUIET_DISABLED_REST);
+  const isQuiet = quiet ?? QUIET_BY_DEFAULT[tone];
+  const look = ICON_BUTTON_TONES[tone];
+  return isQuiet ? cn(look.quiet, ICON_BUTTON_QUIET_DISABLED_REST) : look.toned;
+}
 
 // A disabled button must not answer the pointer. The hover classes above are plain
 // `hover:` (so a caller's `className="hover:…"` still replaces them through
@@ -194,11 +333,9 @@ const ICON_BUTTON_DISABLED_REST: Record<ButtonVariant | "overlay", string> = {
   overlay: "disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]",
 };
 
-// The tones that change the glyph on hover pin their resting glyph the same way.
-const ICON_BUTTON_TONES_DISABLED_REST: Partial<Record<keyof typeof ICON_BUTTON_TONES, string>> = {
-  muted: "disabled:hover:text-[var(--text-placeholder)]",
-  danger: "disabled:hover:text-[var(--text-placeholder)]",
-};
+// The quiet looks change the glyph on hover, so they pin their resting glyph the
+// same way. A toned look keeps its glyph on hover and needs no pin.
+const ICON_BUTTON_QUIET_DISABLED_REST = "disabled:hover:text-[var(--text-placeholder)]";
 
 // `pressed`: a toggle that is on. The brand glyph on the quiet brand fill — the
 // "selected" look of a Chip or a SegmentedControl option, so an on toggle reads as on
@@ -229,8 +366,26 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
    *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a
    *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that
    *  wants attention. `info`: sky at rest — a notice-worthy but harmless action
-   *  (keksdose's reconcile). Default: the variant's own colours. */
-  tone?: keyof typeof ICON_BUTTON_TONES;
+   *  (keksdose's reconcile). Default: the variant's own colours. See `quiet` for
+   *  turning a coloured tone's resting look the other way. */
+  tone?: IconButtonTone;
+  /**
+   * Whether a coloured tone (`danger`, `warning`, `info`) waits for the pointer:
+   * `true` is placeholder grey at rest and the tone's colour on hover and focus;
+   * `false` wears the tone's colour at rest. Left out, each tone keeps its own
+   * default — `danger` quiet, `warning` and `info` not. Ignored for `muted` (quiet by
+   * definition) and `default` (no tone).
+   *
+   * `quiet={false}` on `danger` is for a destructive action that stands ALONE, where
+   * hover-to-reveal hides it: keksdose's phone bulk bar (mobile-bulk-bar.tsx) has one
+   * "delete all" and a touch screen that never hovers, so it painted rose by hand.
+   * `quiet` on `warning`/`info` is the same switch the other way, for a flag repeated
+   * down a list. A boolean over the tone rather than a new tone (`danger-solid`) or an
+   * `emphasis` scale: there are exactly two resting looks, every coloured tone has
+   * both, and which one fits is a question about the SITE (alone or repeated, touch or
+   * pointer), not about the tone — so it is one switch the family shares.
+   */
+  quiet?: boolean;
   /**
    * Make it a toggle button. `true` sets `aria-pressed="true"` and draws the "on" look
    * (brand glyph on the quiet brand fill); `false` sets `aria-pressed="false"` with the
@@ -266,16 +421,59 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
    *  The pair look exactly like the nested version, click exactly like it, and
    *  are two tab stops a screen reader can tell apart. */
   stopPropagation?: boolean;
+  /**
+   * The button's name, said once: it becomes the `aria-label` AND the text of a kit
+   * {@link Tooltip} round the button.
+   *
+   * Every app writes the pair by hand. lenkbank's nine icon actions all carry
+   * `aria-label={t(x)} title={t(x)}` (shared/lib/table-columns.tsx:103,
+   * projects-page.tsx:83, setpoint/segment-list.tsx:198/207, profile-bar.tsx:128/142,
+   * shortcut-dialog.tsx:815/857/1007) — and `title` is the browser's own tooltip,
+   * which shows late, never on focus and never on touch, and looks like no other
+   * label in the kit. kastlan's RowAction (shared/components/data-table/row-action.tsx)
+   * and keksdose's icon wrappers each exist to put a Tooltip round an IconButton.
+   *
+   * A caller's own `aria-label` still wins, for the rare name that should be longer
+   * than the bubble. The bubble is visual only: it would otherwise describe the button
+   * with its own name, and a screen reader would read the same word twice. Tooltip's
+   * default placement applies — in place, or portalled inside a scroll container —
+   * unless `tooltipPortal` says otherwise.
+   */
+  label?: string;
+  /** Show `label` as a tooltip. Default `true`; `false` keeps `label` as the
+   *  accessible name only — for a button whose glyph is universally read (a close ✕ in
+   *  a dialog header) or that already sits under a tooltip of its own. */
+  tooltip?: boolean;
+  /** Where the `label` tooltip opens. See {@link Tooltip}'s `side`. */
+  tooltipSide?: TooltipSide;
+  /** Passed to the `label` tooltip's `portal`. Left out, Tooltip decides (see there). */
+  tooltipPortal?: boolean;
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
-  { variant = "ghost", size = "md", tone = "default", pressed, stopPropagation, className, onClick, onKeyDown, ...rest },
+  {
+    variant = "ghost",
+    size = "md",
+    tone = "default",
+    quiet,
+    pressed,
+    stopPropagation,
+    label,
+    tooltip = true,
+    tooltipSide,
+    tooltipPortal,
+    className,
+    onClick,
+    onKeyDown,
+    ...rest
+  },
   ref,
 ) {
-  return (
+  const button = (
     <button
       ref={ref}
       {...rest}
+      aria-label={rest["aria-label"] ?? label}
       aria-pressed={pressed ?? rest["aria-pressed"]}
       onClick={(e) => {
         if (stopPropagation) e.stopPropagation();
@@ -293,13 +491,20 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
         // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
         variant === "overlay" ? ICON_BUTTON_OVERLAY : buttonVariantClasses[variant],
         ICON_BUTTON_DISABLED_REST[variant],
-        ICON_BUTTON_TONES[tone],
-        ICON_BUTTON_TONES_DISABLED_REST[tone],
+        iconButtonToneClass(tone, quiet),
         pressed && ICON_BUTTON_PRESSED,
         className,
       )}
     />
   );
+  if (!tooltip || label === undefined || label === "") return button;
+  return (
+    // A fragment, so Tooltip leaves the button's description alone: the bubble says
+    // exactly what `aria-label` already does.
+    <Tooltip label={label} side={tooltipSide} portal={tooltipPortal}>
+      <>{button}</>
+    </Tooltip>
+  );
 });
 IconButton.displayName = "IconButton";
 
@@ -1334,13 +1539,24 @@ export function Spinner({ className, label, ...rest }: SpinnerProps) {
   );
 }
 
-export interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
   /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes
    *  every empty state in three apps look like the same thing — so there is no
    *  `children` slot to put arbitrary content in. The two slots below are the only
    *  other things an empty state has turned out to need, and each has a fixed place. */
-  title: string;
-  hint?: string;
+  /** Nodes rather than strings, so a title can carry a code, a link or an emphasised
+   *  word — keksdose's error boundary shows the error's name in `<code>` — while the
+   *  box still sets the type. */
+  title: ReactNode;
+  hint?: ReactNode;
+  /**
+   * Render the title as a heading of this level. Left out it is a `<div>`, as before:
+   * most empty states are a message inside a section that already has its heading.
+   * keksdose's error boundary IS the page when it trips, and its `<h2>` went missing
+   * when it moved onto EmptyState — so the page's heading outline lost the one line
+   * that says what happened. Only the element changes; the look is the box's.
+   */
+  headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
   /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's
    *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and
    *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,
@@ -1351,9 +1567,72 @@ export interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "
    *  wrap and centre as one row), kastlan's "Create a rule". Buttons or links the
    *  caller renders; the box only places them. */
   action?: ReactNode;
+  /**
+   * `box` (default): the dashed, padded card that stands in for a whole section.
+   * `inline`: one quiet line with no box — for the empty state INSIDE something that
+   * already has its own frame, where a dashed card would be a box in a box. keksdose
+   * writes that line by hand five times as a muted `<p className="py-6 text-center">`:
+   * the notification inbox (notification-inbox:140), a support thread
+   * (support-thread:144), the assistant (assistant-page:321), the admin support panel
+   * (support-panel:265) and the funding dialog (funding-dialog:89). The icon shrinks
+   * to the text's size and sits before the title, the hint follows on the same line,
+   * and the row wraps only when it must. Centred like the box; `className="justify-start"`
+   * for a list that reads from the start edge (funding-dialog).
+   */
+  variant?: "box" | "inline";
+  /**
+   * Colour the icon and the title: `danger` for an error standing where the content
+   * should be — kastlan's ErrorState (shared/components/feedback/error-state.tsx) and
+   * its error boundary's fallback (error-boundary.tsx:16), both a red triangle over a
+   * message — and `success` for an empty state that is GOOD news, kastlan's "No defects
+   * recorded for this room" (handover defects-step.tsx:142, a green check). Left out,
+   * both stay muted. The hint stays muted either way: it is the explanation, not the
+   * verdict.
+   */
+  tone?: "danger" | "success";
 }
 
-export function EmptyState({ title, hint, icon, action, className, ...rest }: EmptyStateProps) {
+const EMPTY_STATE_TONE: Record<"danger" | "success", string> = {
+  danger: "text-[var(--danger)]",
+  success: "text-[var(--success)]",
+};
+
+export function EmptyState({
+  title,
+  hint,
+  icon,
+  action,
+  headingAs,
+  variant = "box",
+  tone,
+  className,
+  ...rest
+}: EmptyStateProps) {
+  const Title = headingAs ?? "div";
+  const toneClass = tone ? EMPTY_STATE_TONE[tone] : undefined;
+  const hasHint = hint != null && hint !== false && hint !== "";
+  if (variant === "inline") {
+    return (
+      <div
+        {...rest}
+        className={cn(
+          "flex flex-wrap items-center justify-center gap-x-2 gap-y-1 py-4 text-center text-sm text-[var(--text-muted)]",
+          className,
+        )}
+      >
+        {icon != null && (
+          <span aria-hidden className={cn("flex text-[var(--text-placeholder)] [&_svg]:size-4", toneClass)}>
+            {icon}
+          </span>
+        )}
+        {/* No weight of its own: one muted line is what these sites were, and a
+            bold title would turn a quiet "nothing here" into a heading. */}
+        <Title className={cn("text-sm", toneClass)}>{title}</Title>
+        {hasHint && <span className="text-xs">{hint}</span>}
+        {action != null && <span className="flex flex-wrap items-center gap-2">{action}</span>}
+      </div>
+    );
+  }
   return (
     <div
       {...rest}
@@ -1363,12 +1642,13 @@ export function EmptyState({ title, hint, icon, action, className, ...rest }: Em
       )}
     >
       {icon != null && (
-        <div aria-hidden className="mb-3 text-[var(--text-placeholder)] [&_svg]:size-8">
+        <div aria-hidden className={cn("mb-3 text-[var(--text-placeholder)] [&_svg]:size-8", toneClass)}>
           {icon}
         </div>
       )}
-      <div className="font-medium text-[var(--text-secondary)]">{title}</div>
-      {hint && <div className="mt-1 text-xs">{hint}</div>}
+      {/* `text-sm`: a heading keeps the box's size, not whatever a stylesheet gives h2. */}
+      <Title className={cn("text-sm font-medium text-[var(--text-secondary)]", toneClass)}>{title}</Title>
+      {hasHint && <div className="mt-1 text-xs">{hint}</div>}
       {action != null && (
         <div className="mt-4 flex flex-wrap items-center justify-center gap-2">{action}</div>
       )}

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

@@ -6,6 +6,19 @@ import { useCallback, useEffect, useRef, useState } from "react";
  *  by a copy of it. */
 export const OVERLAY_EXIT_MS = 220;
 
+/**
+ * Whether the user has asked for no motion, read NOW. `true` where `matchMedia` is
+ * absent (jsdom, SSR): nothing is painting there, so "no animation" is the only
+ * correct answer. Shared by every exit timer in the package, so they agree.
+ */
+export function prefersReducedMotion(): boolean {
+  return (
+    typeof window === "undefined" ||
+    typeof window.matchMedia !== "function" ||
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
 /**
  * The state machine an exit animation needs, written once for every overlay in this
  * package (Keksdose live #320 rework: *"Recognized the opening transition. Choose
@@ -66,11 +79,7 @@ export function useCloseTransition(
     // 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.
-    const reduced =
-      typeof window === "undefined" ||
-      typeof window.matchMedia !== "function" ||
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (reduced || ms <= 0) {
+    if (prefersReducedMotion() || ms <= 0) {
       latest.current();
       return;
     }

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

@@ -42,7 +42,7 @@ function legacyCopy(text: string): boolean {
   area.style.opacity = "0";
   document.body.appendChild(area);
   area.select();
-  let ok = false;
+  let ok: boolean;
   try {
     ok = document.execCommand("copy");
   } catch {