zidane-ui 9.0.4 → 9.1.3

package/src/components/palette/PalettePanel.tsx

@@ -1,338 +0,0 @@
-/**
- * The Cmd+K surface: the query as the header, the ranked sections, a footer
- * saying what Enter does, and a notice line. Presentational and controlled:
- * the caller owns the query, the cursor and what running a row means (the
- * desktop app's palette runs sources and nested pickers, the website opens
- * a docs page). The panel owns the keys of its input: arrows, Home / End,
- * Enter (held until the rows are for the query typed: `settled`), Escape,
- * and Backspace on an empty query to leave a nested level.
- *
- * Mount it in a layer (an `Overlay`, the app's modal slot): it brings no
- * scrim or focus trap of its own; its input takes focus on mount.
- */
-import { Fragment, useEffect, useMemo, useRef, useState, type HTMLAttributes, type ReactNode, type Ref } from 'react';
-
-import { useLabels, type Labels } from '../../labels';
-import { IconButton } from '../IconButton';
-import {
-  defaultPaletteKeys,
-  PaletteList,
-  type PaletteEntry,
-  type PaletteKeys,
-  type PaletteRowData,
-  type PaletteRowProps,
-  type PaletteSection,
-} from './PaletteList';
-
-/** How long the rows may take before the loading line shows: a quick open never flashes it. */
-const LOADING_LINE_AFTER_MS = 200;
-
-/** `on`, once it has stayed on for `ms`; false again as soon as it turns off. */
-function useLasting(on: boolean, ms: number): boolean {
-  const [lasting, setLasting] = useState(false);
-  useEffect(() => {
-    if (!on) return undefined;
-    const timer = setTimeout(() => setLasting(true), ms);
-    return () => {
-      clearTimeout(timer);
-      setLasting(false);
-    };
-  }, [on, ms]);
-  return on && lasting;
-}
-
-/** A line of status text under the palette's footer. */
-export interface PaletteNotice {
-  /** The message. */
-  text: string;
-  /**
-   * Colour of the message: muted for `info`, warning for `warn`, danger for `error`.
-   * @default 'info'
-   */
-  tone?: 'info' | 'warn' | 'error';
-}
-
-/**
- * What Enter does to a row by its kind; an app names its own kinds first (`verb`).
- *
- * @param row - The marked row. When `undefined`, the run label is used.
- * @param nested - Whether the palette is at a nested picker level, where a `toggle` row is chosen
- * instead of switched.
- * @param labels - The label set to take the verb from.
- * @returns The word for what Enter does: choose, turn on, turn off, open or run.
- */
-export function paletteVerb(row: PaletteRowData | undefined, nested: boolean, labels: Labels): string {
-  if (!row) return labels.paletteRun;
-  const { item } = row;
-  if (item.kind === 'toggle')
-    return nested ? labels.paletteChoose : item.checked ? labels.paletteTurnOff : labels.paletteTurnOn;
-  if (item.kind === 'picker') return labels.paletteOpen;
-  return labels.paletteRun;
-}
-
-/** The panel's own element: data attributes, style, the surface classes. */
-type PanelElementProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title' | 'onKeyDown'>;
-
-/**
- * Props of {@link PalettePanel}: the controlled palette state and callbacks, plus the attributes of
- * the panel's `div`.
- */
-export type PalettePanelProps<T extends PaletteEntry = PaletteEntry> = PanelElementProps & {
-  /** The ranked sections to show. */
-  groups: readonly PaletteSection<T>[];
-  /** The query in the input. */
-  query: string;
-  /** Called with the new text when the query changes. The cursor resets to the first row. */
-  onQueryChange: (query: string) => void;
-  /** Flat index of the marked row, across sections. */
-  cursor: number;
-  /** Called with a new flat row index when the arrows, Home, End or the pointer move the cursor. */
-  onCursorChange: (index: number) => void;
-  /** Called with the marked row on Enter, or with a clicked row. */
-  onRun: (row: PaletteRowData<T>) => void;
-  /** Escape in the input. */
-  onClose: () => void;
-  /** A nested level: a back button, and Backspace on an empty query calls it. */
-  nested?: boolean;
-  /** Called by the back button, and by Backspace on an empty query, to leave a nested level. */
-  onBack?: () => void;
-  /** The level's name, as a chip before the query. */
-  title?: string;
-  /** Defaults to the labels' `paletteFilter`. */
-  placeholder?: string;
-  /** False while the rows are still for an earlier query: Enter waits for them. Default true. */
-  settled?: boolean;
-  /** The rows are not known yet. */
-  loading?: boolean;
-  /** A row is running: a spinner in the header. */
-  running?: boolean;
-  /** A status line shown under the footer. */
-  notice?: PaletteNotice | null;
-  /** The footer's word for Enter on the marked row; `undefined` falls back to `paletteVerb`. */
-  verb?: (row: PaletteRowData<T>, nested: boolean) => string | undefined;
-  /** Draws a row. Return `undefined` for the default row. Keep it stable, since rows are memoized. */
-  renderRow?: (props: PaletteRowProps<T>) => ReactNode;
-  /** Draws the default row's icon. A dot shows when omitted. */
-  renderIcon?: (row: PaletteRowData<T>) => ReactNode;
-  /**
-   * Draws a keybinding spec as keycaps.
-   * @default defaultPaletteKeys
-   */
-  renderKeys?: PaletteKeys;
-  /** Ref to the query input. */
-  inputRef?: Ref<HTMLInputElement>;
-};
-
-/**
- * Renders the Cmd+K surface: the query as the header, the ranked sections, a footer that says
- * what Enter does, and an optional notice. It is controlled: the caller owns the query, the
- * cursor and what running a row means. The input takes focus on mount and handles the arrows,
- * Home, End, Enter, Escape and Backspace on an empty nested query. It brings no scrim or focus
- * trap, so mount it in a layer such as {@link Overlay}.
- *
- * @param props - {@link PalettePanelProps}.
- */
-export function PalettePanel<T extends PaletteEntry>({
-  groups,
-  query,
-  onQueryChange,
-  cursor,
-  onCursorChange,
-  onRun,
-  onClose,
-  nested = false,
-  onBack,
-  title,
-  placeholder,
-  settled = true,
-  loading = false,
-  running = false,
-  notice,
-  verb,
-  renderRow,
-  renderIcon,
-  renderKeys = defaultPaletteKeys,
-  inputRef,
-  className = 'zg-modal-panel zg-float w-[40rem] max-w-[92vw] self-start mt-[13vh] flex flex-col overflow-hidden',
-  ...rest
-}: PalettePanelProps<T>) {
-  const labels = useLabels();
-  const flat = useMemo(() => groups.flatMap((g) => g.rows), [groups]);
-  const showLoading = useLasting(loading, LOADING_LINE_AFTER_MS);
-
-  // Keep the cursor on a runnable row when the list changes.
-  useEffect(() => {
-    const clamped = Math.min(cursor, Math.max(0, flat.length - 1));
-    if (clamped !== cursor) onCursorChange(clamped);
-  }, [flat.length, cursor, onCursorChange]);
-
-  // Enter before the rows caught up with the query runs the top row of the query, not of the last one.
-  const enterWhenSettled = useRef(false);
-  useEffect(() => {
-    if (!settled || !enterWhenSettled.current) return;
-    enterWhenSettled.current = false;
-    const row = flat[cursor];
-    if (row) onRun(row);
-  }, [settled, flat, cursor, onRun]);
-
-  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    switch (e.key) {
-      case 'Escape':
-        // Owned here, not only by the layer's document listener: that one may
-        // attach in a passive effect, a frame after the input took focus.
-        e.preventDefault();
-        e.stopPropagation();
-        onClose();
-        return;
-      case 'ArrowDown':
-        e.preventDefault();
-        onCursorChange(flat.length === 0 ? 0 : (cursor + 1) % flat.length);
-        return;
-      case 'ArrowUp':
-        e.preventDefault();
-        onCursorChange(flat.length === 0 ? 0 : (cursor - 1 + flat.length) % flat.length);
-        return;
-      case 'Home':
-        e.preventDefault();
-        onCursorChange(0);
-        return;
-      case 'End':
-        e.preventDefault();
-        onCursorChange(Math.max(0, flat.length - 1));
-        return;
-      case 'Enter': {
-        e.preventDefault();
-        if (!settled) {
-          enterWhenSettled.current = true;
-          return;
-        }
-        const row = flat[cursor];
-        if (row) onRun(row);
-        return;
-      }
-      case 'Backspace':
-        if (query === '' && nested && onBack) {
-          e.preventDefault();
-          onBack();
-        }
-        return;
-    }
-  };
-
-  const marked = flat[cursor];
-  const trimmed = query.trim();
-
-  return (
-    <div
-      className={className}
-      // Clicks inside stay inside: the host closes the palette on an outside mousedown.
-      role="presentation"
-      onMouseDown={(e) => e.stopPropagation()}
-      data-testid="command-palette"
-      {...rest}
-    >
-      {/* The query is the header: borderless, the panel's largest type; one hairline divides it from the list. */}
-      <div
-        className={`flex items-center gap-2 h-[52px] shrink-0 shadow-[inset_0_-1px_0_var(--zg-hairline)] ${nested ? 'pl-2.5 pr-4' : 'px-4'}`}
-      >
-        {nested && onBack && (
-          <IconButton
-            icon="i-ph-caret-left"
-            label={labels.paletteBack}
-            title={labels.paletteBackHint}
-            size="sm"
-            onClick={onBack}
-          />
-        )}
-        {title && (
-          <span className="zg-track-chip shrink-0 px-2.5 h-6 inline-flex items-center text-zg-label text-[var(--zg-text-muted)]">
-            {title}
-          </span>
-        )}
-        <input
-          ref={inputRef}
-          autoFocus
-          value={query}
-          onChange={(e) => {
-            onQueryChange(e.target.value);
-            onCursorChange(0);
-          }}
-          onKeyDown={onKeyDown}
-          placeholder={placeholder ?? labels.paletteFilter}
-          aria-label={labels.paletteLabel}
-          role="combobox"
-          aria-expanded
-          aria-haspopup="listbox"
-          aria-controls="zg-palette-list"
-          aria-autocomplete="list"
-          aria-activedescendant={marked ? `zg-palette-row-${cursor}` : undefined}
-          spellCheck={false}
-          className="flex-1 min-w-0 h-9 bg-transparent border-0 outline-none text-[15px] tracking-[-0.005em] text-[var(--zg-text)] placeholder:text-[var(--zg-text-subtle)]"
-        />
-        {running && (
-          <span className="i-ph-circle-notch animate-spin text-zg-ui text-[var(--zg-text-muted)]" aria-hidden />
-        )}
-      </div>
-      {loading ? (
-        // The line's room is held from the first frame, so the panel doesn't jump when it shows.
-        <p
-          className={`m-0 px-4 py-8 text-center text-zg-ui text-[var(--zg-text-muted)] ${showLoading ? '' : 'invisible'}`}
-        >
-          {labels.paletteLoading}
-        </p>
-      ) : flat.length === 0 ? (
-        <p className="m-0 px-4 py-8 text-center text-zg-ui text-[var(--zg-text-muted)]">
-          {trimmed ? labels.paletteNoMatch(trimmed) : labels.paletteEmpty}
-        </p>
-      ) : (
-        <PaletteList
-          groups={groups}
-          cursor={cursor}
-          query={query}
-          nested={nested}
-          onHover={onCursorChange}
-          onRun={onRun}
-          renderRow={renderRow}
-          renderIcon={renderIcon}
-          renderKeys={renderKeys}
-        />
-      )}
-      <div className="flex items-center gap-4 px-4 h-9 shrink-0 shadow-[inset_0_1px_0_var(--zg-hairline)]">
-        {marked && (
-          <PaletteHint
-            keys={['enter']}
-            label={verb?.(marked, nested) ?? paletteVerb(marked, nested, labels)}
-            renderKeys={renderKeys}
-          />
-        )}
-        {nested && <PaletteHint keys={['⌫']} label={labels.paletteBack} renderKeys={renderKeys} />}
-      </div>
-      {notice && (
-        <div
-          role="status"
-          className={`px-3 py-2 shadow-[inset_0_1px_0_var(--zg-hairline)] text-zg-label ${
-            notice.tone === 'error'
-              ? 'text-zg-danger'
-              : notice.tone === 'warn'
-                ? 'text-zg-warn'
-                : 'text-[var(--zg-text-muted)]'
-          }`}
-        >
-          {notice.text}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/** A footer legend entry: the keys, then what they do. */
-function PaletteHint({ keys, label, renderKeys }: { keys: readonly string[]; label: string; renderKeys: PaletteKeys }) {
-  return (
-    <span className="zg-meta inline-flex items-center gap-1">
-      {keys.map((k) => (
-        <Fragment key={k}>{renderKeys(k)}</Fragment>
-      ))}
-      <span className="ml-0.5">{label}</span>
-    </span>
-  );
-}

package/src/components/palette/palette-layout.ts

@@ -1,86 +0,0 @@
-/**
- * The palette list's geometry: every row and section header has a fixed
- * height, so a section's place and a row's place inside it are arithmetic
- * and the list can mount only what is in view, whatever the catalog size.
- */
-import { useLayoutEffect, useState } from 'react';
-
-import type { PaletteEntry, PaletteRowData, PaletteSection } from './PaletteList';
-
-/** Height of a palette row, in px. */
-export const PALETTE_ROW_H = 34;
-/** Height of a palette section header, in px. */
-export const PALETTE_HEADER_H = 30;
-/** Padding above the first section and below the last, in px. */
-export const PALETTE_PAD = 6;
-/** Rows kept mounted beyond each edge of the view, so a fast scroll never shows a gap. */
-export const PALETTE_OVERSCAN_PX = 320;
-/** The list's tallest, as a share of the window; the panel grows to it, then scrolls. */
-const MAX_HEIGHT_SHARE = 0.56;
-/** The window height assumed on the server and for the first client render, until it is measured. */
-const SSR_WINDOW_H = 800;
-
-/** A section of the list, placed in the scrolled content. */
-export interface PlacedSection<T extends PaletteEntry> {
-  /** The section's header label. */
-  title: string;
-  /** The section's rows, in order. */
-  rows: readonly PaletteRowData<T>[];
-  /** Flat index of the section's first row. */
-  first: number;
-  /** Offset of the section's header in the scrolled content, in px. */
-  top: number;
-  /** Header plus rows, in px. */
-  height: number;
-}
-
-/**
- * Places every section, in order, and reports the height of the whole list.
- *
- * @param groups - The palette's sections, in display order.
- * @returns The placed sections and the list's content height in px.
- */
-export function layoutPalette<T extends PaletteEntry>(
-  groups: readonly PaletteSection<T>[],
-): { sections: PlacedSection<T>[]; height: number } {
-  const sections: PlacedSection<T>[] = [];
-  let top = PALETTE_PAD;
-  let first = 0;
-  for (const g of groups) {
-    const height = PALETTE_HEADER_H + g.rows.length * PALETTE_ROW_H;
-    sections.push({ title: g.title, rows: g.rows, first, top, height });
-    top += height;
-    first += g.rows.length;
-  }
-  return { sections, height: top + PALETTE_PAD };
-}
-
-/**
- * Where the flat row `index` sits in the scrolled content (its section's label above the first).
- *
- * @param sections - The sections from `layoutPalette`.
- * @param index - The row's index across all sections.
- * @returns The row's offset and whether it opens its section, or `null` when out of range.
- */
-export function placeOfRow(
-  sections: readonly PlacedSection<PaletteEntry>[],
-  index: number,
-): { top: number; first: boolean } | null {
-  const section = sections.find((s) => index >= s.first && index < s.first + s.rows.length);
-  if (!section) return null;
-  const k = index - section.first;
-  return { top: section.top + PALETTE_HEADER_H + k * PALETTE_ROW_H, first: k === 0 };
-}
-
-/** The list's cap: a share of the window, remeasured as it resizes. */
-export function useMaxHeight(): number {
-  // The first render never reads `window`, so the server and the hydrating client agree.
-  const [max, setMax] = useState(() => Math.round(SSR_WINDOW_H * MAX_HEIGHT_SHARE));
-  useLayoutEffect(() => {
-    const measure = () => setMax(Math.round(window.innerHeight * MAX_HEIGHT_SHARE));
-    measure();
-    window.addEventListener('resize', measure);
-    return () => window.removeEventListener('resize', measure);
-  }, []);
-  return max;
-}

package/src/components/report-error.ts

@@ -1,142 +0,0 @@
-/**
- * The one place UI failures are logged: error boundaries (with the region
- * that caught them) and the window's uncaught errors / unhandled rejections.
- * Each goes to the console and to the app's sink (`configureErrorReports`,
- * the desktop app's main-process log), once per distinct error: a region that
- * throws on every render, or a rejection in a polling loop, would otherwise
- * flood both.
- */
-
-/** One distinct failure, as handed to the sink. */
-export interface ErrorReport {
-  /** What caught it: "Sidebar crashed", "uncaught error", "unhandled rejection". */
-  source: string;
-  /** `Name: message` (or the thrown value's string form). */
-  message: string;
-  /** The JS stack, when the error had one. */
-  stack?: string;
-  /** React's component stack, for an error a boundary caught. */
-  componentStack?: string;
-}
-
-/** Where reports go besides the console (an app's log). */
-export type ErrorReportSink = (report: ErrorReport) => void;
-
-/** What {@link configureErrorReports} sets. */
-export interface ErrorReportOptions {
-  /** Receives each distinct report; `null` for the console only. */
-  sink?: ErrorReportSink | null;
-  /** The error fallbacks show the JS and component stacks (a development build). */
-  showStacks?: boolean;
-}
-
-let sink: ErrorReportSink | null = null;
-let showStacks = false;
-
-/**
- * Sets the sink and whether fallbacks show stacks. Call once at boot, before the first render;
- * fields left out keep their value.
- *
- * @param options - The sink and the stacks switch.
- */
-export function configureErrorReports(options: ErrorReportOptions): void {
-  if (options.sink !== undefined) sink = options.sink;
-  if (options.showStacks !== undefined) showStacks = options.showStacks;
-}
-
-/** Whether the error fallbacks show stacks ({@link configureErrorReports}). */
-export function errorStacksShown(): boolean {
-  return showStacks;
-}
-
-const reported = new Set<string>();
-/** Distinct errors remembered before the set starts over (a long session must not grow it forever). */
-const REPORTED_CAP = 200;
-
-function describe(error: unknown): string {
-  if (error instanceof Error) return `${error.name}: ${error.message}`;
-  try {
-    return String(error);
-  } catch {
-    return '(unprintable error)';
-  }
-}
-
-/** Message plus the first stack frame: the same throw from the same place is one report. */
-function identity(error: unknown): string {
-  const frame = error instanceof Error ? (error.stack?.split('\n').find((line) => /^\s+at /.test(line)) ?? '') : '';
-  return `${describe(error)}\n${frame.trim()}`;
-}
-
-/**
- * An error's message for a person: the `Error`'s message (its name when empty), else its string form.
- *
- * @param error - Anything thrown.
- */
-export function errorMessage(error: unknown): string {
-  if (error instanceof Error) return error.message || error.name;
-  return describe(error);
-}
-
-/**
- * Logs `error` to the console and the sink unless the same one was already reported. Never throws,
- * never swallows (it only logs).
- *
- * @param error - Anything thrown.
- * @param context - `source` names what caught it ("Sidebar crashed"); `componentStack` is React's.
- */
-export function reportRendererError(error: unknown, context: { source: string; componentStack?: string | null }): void {
-  const key = identity(error);
-  if (reported.has(key)) return;
-  if (reported.size >= REPORTED_CAP) reported.clear();
-  reported.add(key);
-  if (context.componentStack) {
-    console.error(`[renderer] ${context.source}:`, error, '\nComponent stack:', context.componentStack);
-  } else {
-    console.error(`[renderer] ${context.source}:`, error);
-  }
-  try {
-    sink?.({
-      source: context.source,
-      message: describe(error),
-      ...(error instanceof Error && error.stack ? { stack: error.stack } : {}),
-      ...(context.componentStack ? { componentStack: context.componentStack } : {}),
-    });
-  } catch {
-    // A dead channel (a window tearing down) must not turn a report into a second failure.
-  }
-}
-
-/** Forgets what was reported. Tests only. */
-export function resetReportedErrors(): void {
-  reported.clear();
-}
-
-let installed = false;
-
-/**
- * Logs the window's uncaught errors and unhandled rejections through
- * {@link reportRendererError}. Listens only: nothing is `preventDefault`ed,
- * so the browser's own reporting is untouched. Idempotent; returns the
- * uninstall.
- *
- * @param target - The window to listen on (default `window`).
- */
-export function installRendererErrorHandlers(target: Window = window): () => void {
-  if (installed) return () => {};
-  installed = true;
-  const onError = (event: ErrorEvent) => {
-    // `error` is null for a cross-origin "Script error.": the message is all there is.
-    reportRendererError(event.error ?? event.message, { source: 'uncaught error' });
-  };
-  const onRejection = (event: PromiseRejectionEvent) => {
-    reportRendererError(event.reason, { source: 'unhandled rejection' });
-  };
-  target.addEventListener('error', onError);
-  target.addEventListener('unhandledrejection', onRejection);
-  return () => {
-    target.removeEventListener('error', onError);
-    target.removeEventListener('unhandledrejection', onRejection);
-    installed = false;
-  };
-}

package/src/components/zoom.ts

@@ -1,133 +0,0 @@
-/**
- * The zoom of an image in a frame (`ZoomableImage`), as pure functions: the
- * component feeds them its measures and renders the state they return.
- *
- * The image sits centred in its frame at its fit size (scaled down to fit,
- * never up). `scale` is relative to that fit: 1 is fit, and it goes up to
- * {@link MAX_REAL_SCALE} times the image's real size. `x` / `y` move the
- * scaled image from the centre, in CSS pixels, and are kept so the image
- * never leaves the frame: an axis where it is smaller than the frame stays
- * centred.
- */
-
-/** How far past its real size an image zooms. */
-export const MAX_REAL_SCALE = 8;
-/** What one zoom step (a key, a button) multiplies the scale by. */
-const STEP = 1.25;
-
-/** A width and height, in CSS pixels. */
-export interface Size {
-  w: number;
-  h: number;
-}
-
-/** What a zoom is computed against. */
-export interface ZoomGeometry {
-  /** The frame the image is shown in. */
-  frame: Size;
-  /** The image at fit (scale 1). */
-  base: Size;
-  /** The image's real size. */
-  natural: Size;
-}
-
-/** A zoom: the scale over fit and the offset from the centre. */
-export interface ZoomState {
-  scale: number;
-  x: number;
-  y: number;
-}
-
-/** Fit: the whole image, centred. */
-export const FIT: ZoomState = { scale: 1, x: 0, y: 0 };
-
-/** The scale at which the image shows at its real size (1 when fit already does). */
-export function realScale({ base, natural }: ZoomGeometry): number {
-  return base.w > 0 ? Math.max(1, natural.w / base.w) : 1;
-}
-
-/** The largest scale: {@link MAX_REAL_SCALE} times the real size. */
-export function maxScale(geometry: ZoomGeometry): number {
-  const { base, natural } = geometry;
-  return base.w > 0 ? Math.max(1, (MAX_REAL_SCALE * natural.w) / base.w) : 1;
-}
-
-/** The scale as a share of the real size, in whole percent: what the zoom chip says. */
-export function realPercent(state: ZoomState, { base, natural }: ZoomGeometry): number {
-  return natural.w > 0 ? Math.round(((base.w * state.scale) / natural.w) * 100) : 100;
-}
-
-const clampAxis = (offset: number, scaled: number, frame: number): number => {
-  const room = Math.max(0, (scaled - frame) / 2);
-  return Math.min(room, Math.max(-room, offset));
-};
-
-/**
- * `state` within bounds: the scale between fit and the largest, the image
- * covering the frame on each axis it is larger than, centred on the others.
- */
-export function clampZoom(state: ZoomState, geometry: ZoomGeometry): ZoomState {
-  const scale = Math.min(maxScale(geometry), Math.max(1, state.scale));
-  if (scale === 1) return FIT;
-  return {
-    scale,
-    x: clampAxis(state.x, geometry.base.w * scale, geometry.frame.w),
-    y: clampAxis(state.y, geometry.base.h * scale, geometry.frame.h),
-  };
-}
-
-/**
- * Zooms to `scale` keeping the image's point under `at` where it is.
- *
- * @param state - The zoom now.
- * @param scale - The scale to go to (clamped).
- * @param at - The point that holds still, from the frame's centre, in CSS pixels.
- * @param geometry - The frame and the image.
- */
-export function zoomAt(
-  state: ZoomState,
-  scale: number,
-  at: { x: number; y: number },
-  geometry: ZoomGeometry,
-): ZoomState {
-  const next = Math.min(maxScale(geometry), Math.max(1, scale));
-  const ratio = next / state.scale;
-  return clampZoom({ scale: next, x: at.x - (at.x - state.x) * ratio, y: at.y - (at.y - state.y) * ratio }, geometry);
-}
-
-/**
- * A wheel's zoom: a scroll or a trackpad pinch (the browser sends a pinch as
- * a wheel with `ctrlKey`, in finer steps), toward the pointer.
- *
- * @param state - The zoom now.
- * @param deltaY - The wheel's vertical delta, in pixels (up zooms in).
- * @param pinch - The wheel is a pinch.
- * @param at - The pointer, from the frame's centre.
- * @param geometry - The frame and the image.
- */
-export function wheelZoom(
-  state: ZoomState,
-  deltaY: number,
-  pinch: boolean,
-  at: { x: number; y: number },
-  geometry: ZoomGeometry,
-): ZoomState {
-  return zoomAt(state, state.scale * Math.exp(-deltaY * (pinch ? 0.01 : 0.0015)), at, geometry);
-}
-
-/** One step in (`1`) or out (`-1`), around the frame's centre. */
-export function stepZoom(state: ZoomState, direction: 1 | -1, geometry: ZoomGeometry): ZoomState {
-  return zoomAt(state, state.scale * STEP ** direction, { x: 0, y: 0 }, geometry);
-}
-
-/** A double-click: back to fit when zoomed, else to the real size (twice fit for an image fit shows whole) at `at`. */
-export function toggleZoom(state: ZoomState, at: { x: number; y: number }, geometry: ZoomGeometry): ZoomState {
-  if (state.scale > 1) return FIT;
-  const real = realScale(geometry);
-  return zoomAt(state, real > 1 ? real : 2, at, geometry);
-}
-
-/** Moved by a drag of `dx` / `dy`, within bounds. */
-export function panZoom(state: ZoomState, dx: number, dy: number, geometry: ZoomGeometry): ZoomState {
-  return clampZoom({ ...state, x: state.x + dx, y: state.y + dy }, geometry);
-}