@enigmax/primitives 0.24.0 → 0.26.0

package/src/core/image-viewer.ts

@@ -0,0 +1,222 @@
+/**
+ * The arithmetic behind the image viewer: zoom around a point, panning that cannot lose the
+ * image, moving through a set, and getting a file onto the disk.
+ *
+ * Not a React module, and deliberately: none of this is rendering. A page drawing its own
+ * viewer, or a test, gets the same maths - and the parts that are easy to get wrong (zoom
+ * that drifts away from the cursor, a pan that strands the image off screen, a download that
+ * silently opens a tab instead) are then testable without a browser.
+ */
+
+/** How far the image is scaled, and where its centre sits relative to the frame's, in px. */
+export interface Transform {
+    scale: number;
+    x: number;
+    y: number;
+}
+
+export interface ZoomLimits {
+    min: number;
+    max: number;
+}
+
+/** A box in viewport coordinates - the frame the image is being viewed in. */
+export interface Box {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+
+export const IDENTITY: Transform = { scale: 1, x: 0, y: 0 };
+
+export const ZOOM_LIMITS: ZoomLimits = { min: 1, max: 8 };
+
+/** What a keyboard `+`/`-` step multiplies by, and the ratio a double press toggles to. */
+export const ZOOM_STEP = 1.35;
+export const ZOOM_DOUBLE = 2.5;
+
+export function clampScale(scale: number, limits: ZoomLimits = ZOOM_LIMITS): number {
+    return Math.min(Math.max(scale, limits.min), limits.max);
+}
+
+/**
+ * A wheel notch to a zoom factor.
+ *
+ * `deltaMode` matters: a mouse reports pixels, but Firefox reports LINES (mode 1) and a page
+ * scroll reports pages (mode 2), so treating every delta as pixels makes the same gesture
+ * zoom a hundred times harder in one browser than another. The exponential keeps a notch
+ * proportional - zooming out from 8x and in from 1x take the same number of turns.
+ */
+export function wheelFactor(deltaY: number, deltaMode = 0): number {
+    const pixels = deltaMode === 1 ? deltaY * 16 : deltaMode === 2 ? deltaY * 400 : deltaY;
+    return Math.exp(-Math.min(Math.max(pixels, -240), 240) / 320);
+}
+
+/**
+ * Zoom, keeping the point under the pointer under the pointer.
+ *
+ * The defect this exists for: scaling around the frame's centre slides whatever the visitor
+ * was pointing at out from under them, so zooming into a face means zooming and then hunting
+ * for it again. The offset is corrected by how much that point moved when the scale changed.
+ */
+export function zoomAt(current: Transform, factor: number, point: { x: number; y: number; }, box: Box, limits: ZoomLimits = ZOOM_LIMITS): Transform {
+    const scale = clampScale(current.scale * factor, limits);
+    if (scale === current.scale) return current;
+
+    // Where the pointer is relative to the frame's centre, which is what the offsets are
+    // measured from.
+    const dx = point.x - (box.left + box.width / 2);
+    const dy = point.y - (box.top + box.height / 2);
+    const ratio = scale / current.scale;
+
+    return { scale, x: dx - (dx - current.x) * ratio, y: dy - (dy - current.y) * ratio };
+}
+
+/**
+ * Keep the image over the frame.
+ *
+ * At 1x it is centred and there is nothing to pan. Zoomed, the offset is bounded by the half
+ * of the image that hangs outside the frame - without it a drag can throw the picture off the
+ * screen entirely, and the only way back is to close the viewer.
+ */
+export function clampPan(transform: Transform, box: Box, natural: { width: number; height: number; }): Transform {
+    const width = natural.width * transform.scale;
+    const height = natural.height * transform.scale;
+    const x = Math.max(0, (width - box.width) / 2);
+    const y = Math.max(0, (height - box.height) / 2);
+
+    return {
+        scale: transform.scale,
+        x: Math.min(Math.max(transform.x, -x), x),
+        y: Math.min(Math.max(transform.y, -y), y)
+    };
+}
+
+/** The size an image is DRAWN at inside a frame it is fitted to, which is what pan is bounded by. */
+export function fittedSize(natural: { width: number; height: number; }, box: Box): { width: number; height: number; } {
+    if (!natural.width || !natural.height) return { width: box.width, height: box.height };
+    const ratio = Math.min(box.width / natural.width, box.height / natural.height, 1);
+    return { width: natural.width * ratio, height: natural.height * ratio };
+}
+
+/** The distance between two pointers, for a pinch. */
+export function pinchDistance(a: { x: number; y: number; }, b: { x: number; y: number; }): number {
+    return Math.hypot(a.x - b.x, a.y - b.y);
+}
+
+/**
+ * The next index in a set, skipping what has been discarded.
+ *
+ * Returns -1 when there is nothing left to show, which is the viewer's cue to close rather
+ * than to sit on an empty frame.
+ */
+export function nextIndex(index: number, length: number, step: number, options: { loop?: boolean; skip?: ReadonlySet<number>; } = {}): number {
+    const { loop = true, skip } = options;
+    if (length <= 0) return -1;
+
+    let next = index;
+    // At most one full pass: with everything else discarded the walk would never stop.
+    for (let moved = 0; moved < length; moved += 1) {
+        next += step;
+        if (next < 0 || next >= length) {
+            if (!loop) return -1;
+            next = (next % length + length) % length;
+        }
+        if (!skip?.has(next)) return next;
+    }
+    return -1;
+}
+
+/** The file name to save as: whatever the caller asked for, else the one in the URL. */
+export function filenameFrom(url: string, fallback = "image"): string {
+    try {
+        const { pathname } = new URL(url, typeof location === "undefined" ? "https://localhost" : location.href);
+        const name = pathname.split("/").filter(Boolean).pop();
+        return name && name.includes(".") ? decodeURIComponent(name) : fallback;
+    } catch {
+        return fallback;
+    }
+}
+
+/**
+ * Save the file, rather than navigate to it.
+ *
+ * `<a download>` is honoured only for a same-origin URL; on a CDN the browser ignores the
+ * attribute and opens the image in a tab instead, which is not what the row said it would do.
+ * So the bytes are fetched and handed over as a blob, and the plain anchor is the fallback for
+ * when that is refused (no CORS header) - a tab is still better than nothing happening.
+ */
+export async function downloadFile(url: string, filename?: string): Promise<void> {
+    const name = filename ?? filenameFrom(url);
+    try {
+        const response = await fetch(url, { mode: "cors", credentials: "omit" });
+        if (!response.ok) throw new Error(`the file answered ${response.status}`);
+        const blob = await response.blob();
+        const href = URL.createObjectURL(blob);
+        saveAs(href, name);
+        // Revoked on the next task, not immediately: Safari has not started reading yet.
+        setTimeout(() => URL.revokeObjectURL(href), 10_000);
+    } catch {
+        saveAs(url, name, true);
+    }
+}
+
+function saveAs(href: string, name: string, external = false): void {
+    if (typeof document === "undefined") return;
+    const anchor = document.createElement("a");
+    anchor.href = href;
+    anchor.download = name;
+    anchor.rel = "noopener";
+    if (external) anchor.target = "_blank";
+    document.body.append(anchor);
+    anchor.click();
+    anchor.remove();
+}
+
+/* -------- the flight from the thumbnail into the viewer -------- */
+
+/** How long the picture takes to fly, when the stylesheet does not say otherwise. */
+export const FLIGHT_MS = 300;
+
+/**
+ * How long the flight ACTUALLY lasts, read off the element.
+ *
+ * The duration lives in the stylesheet (`--enigma-image-flight`), so a project that slows it
+ * down would otherwise have the viewer give up waiting halfway through and close mid-flight.
+ * The constant above is only the answer for an element with no transition on it at all.
+ */
+export function flightMs(element: Element | null): number {
+    if (!element || typeof getComputedStyle === "undefined") return FLIGHT_MS;
+    const seconds = Number.parseFloat(getComputedStyle(element).transitionDuration);
+    return Number.isFinite(seconds) && seconds > 0 ? seconds * 1000 : FLIGHT_MS;
+}
+
+/**
+ * The transform that puts a picture exactly over another box.
+ *
+ * This is the FLIP the lightbox opens with: the full-size image is laid out where it belongs,
+ * measured, and then drawn back ON the thumbnail with this transform - so releasing it to the
+ * identity transform is the picture growing out of the one in the page rather than a dialog
+ * appearing over it. Closing is the same transform applied in the other direction.
+ *
+ * Both boxes are the same picture, so one scale is enough; the width is used because a
+ * thumbnail is nearly always constrained by it. Null when either box has not been laid out
+ * yet, which is the caller's cue to skip the animation rather than to divide by zero.
+ */
+export function flightFrom(from: Box, to: Box): Transform | null {
+    if (!from.width || !from.height || !to.width || !to.height) return null;
+    return {
+        scale: from.width / to.width,
+        // Centre to centre: `translate(x, y) scale(s)` scales about the element's own centre
+        // first, so the offset that lands it on the thumbnail is the distance between them.
+        x: (from.left + from.width / 2) - (to.left + to.width / 2),
+        y: (from.top + from.height / 2) - (to.top + to.height / 2)
+    };
+}
+
+/** Whether the reader has asked for less movement. Every animation here is skipped when they have. */
+export function prefersReducedMotion(): boolean {
+    if (typeof window === "undefined" || !window.matchMedia) return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}

package/src/core/player.ts

@@ -0,0 +1,303 @@
+/**
+ * The arithmetic behind the video player: times, seeking, buffering, volume and the keys.
+ *
+ * None of it is rendering, so it is testable without a browser and reusable by a page that
+ * draws its own controls - the same split the colour maths and the image viewer's are in.
+ */
+
+/** The playback rates the settings menu offers, in the order it lists them. */
+export const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] as const;
+
+/** How far the arrows seek, in seconds, and what a bigger jump moves by. */
+export const SEEK_STEP = 5;
+export const SEEK_JUMP = 10;
+export const VOLUME_STEP = 0.05;
+
+/**
+ * Seconds as a clock, sized by the LONGEST time it will have to show.
+ *
+ * `duration` is what stops the label changing width mid-playback: a 1h04m video passing 10:00
+ * would otherwise go from `9:59` to `10:00` to `1:00:00`, and every control after it moves.
+ */
+export function formatTime(seconds: number, duration = seconds): string {
+    if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+    const total = Math.floor(seconds);
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const rest = total % 60;
+    const withHours = Number.isFinite(duration) && duration >= 3600;
+
+    const pad = (value: number): string => String(value).padStart(2, "0");
+    if (withHours || hours > 0) return `${hours}:${pad(minutes)}:${pad(rest)}`;
+    return `${minutes}:${pad(rest)}`;
+}
+
+/** A time as a fraction of the duration, safe before the metadata says what that is. */
+export function progress(time: number, duration: number): number {
+    if (!Number.isFinite(duration) || duration <= 0) return 0;
+    return Math.min(Math.max(time / duration, 0), 1);
+}
+
+/** Where a press on a horizontal rail lands, as a fraction of it. */
+export function fractionAt(box: { left: number; width: number; }, clientX: number): number {
+    if (!box.width) return 0;
+    return Math.min(Math.max((clientX - box.left) / box.width, 0), 1);
+}
+
+/**
+ * How much is buffered AHEAD of where playback is.
+ *
+ * The range under the playhead, not the largest one: a viewer who seeks past the buffer is
+ * looking at a bar that says nothing is loaded, which is true of the part they are watching.
+ */
+export function bufferedAhead(ranges: TimeRanges | null, time: number, duration: number): number {
+    if (!ranges || !Number.isFinite(duration) || duration <= 0) return 0;
+    for (let at = 0; at < ranges.length; at += 1) {
+        if (ranges.start(at) <= time && ranges.end(at) >= time) return Math.min(ranges.end(at) / duration, 1);
+    }
+    return 0;
+}
+
+/** The next rate in the list, wrapping - what a repeated press on the speed row does. */
+export function nextSpeed(current: number, step = 1): number {
+    const at = SPEEDS.indexOf(current as typeof SPEEDS[number]);
+    const from = at === -1 ? SPEEDS.indexOf(1) : at;
+    return SPEEDS[(from + step + SPEEDS.length) % SPEEDS.length] as number;
+}
+
+/** What a key press means, or null when the player should leave it to the page. */
+export type PlayerCommand =
+    | { type: "toggle"; }
+    | { type: "seek"; by: number; }
+    | { type: "seekTo"; fraction: number; }
+    | { type: "volume"; by: number; }
+    | { type: "mute"; }
+    | { type: "fullscreen"; }
+    | { type: "captions"; }
+    | { type: "pip"; };
+
+/**
+ * The shortcuts, as the platform's video players define them.
+ *
+ * Space and K play, J and L jump ten, the arrows nudge five and the volume, M mutes, F is
+ * fullscreen, C captions, and a digit seeks to that tenth of the video.
+ */
+export function commandFor(key: string): PlayerCommand | null {
+    if (key === " " || key === "k" || key === "K") return { type: "toggle" };
+    if (key === "ArrowRight") return { type: "seek", by: SEEK_STEP };
+    if (key === "ArrowLeft") return { type: "seek", by: -SEEK_STEP };
+    if (key === "l" || key === "L") return { type: "seek", by: SEEK_JUMP };
+    if (key === "j" || key === "J") return { type: "seek", by: -SEEK_JUMP };
+    if (key === "ArrowUp") return { type: "volume", by: VOLUME_STEP };
+    if (key === "ArrowDown") return { type: "volume", by: -VOLUME_STEP };
+    if (key === "m" || key === "M") return { type: "mute" };
+    if (key === "f" || key === "F") return { type: "fullscreen" };
+    if (key === "c" || key === "C") return { type: "captions" };
+    if (key === "p" || key === "P") return { type: "pip" };
+    if (key >= "0" && key <= "9") return { type: "seekTo", fraction: Number(key) / 10 };
+    return null;
+}
+
+/**
+ * Whether a key press belongs to the page rather than to the player.
+ *
+ * A shortcut that fires while somebody is typing turns their space bar into a pause, so the
+ * player stands down inside anything that takes text.
+ */
+export function isTypingTarget(target: EventTarget | null): boolean {
+    const element = target as HTMLElement | null;
+    if (!element || typeof element.tagName !== "string") return false;
+    if (element.isContentEditable) return true;
+    return ["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName);
+}
+
+/** Whether the document is showing something fullscreen, across the two spellings of it. */
+export function fullscreenElement(): Element | null {
+    if (typeof document === "undefined") return null;
+    const legacy = document as Document & { webkitFullscreenElement?: Element | null; };
+    return document.fullscreenElement ?? legacy.webkitFullscreenElement ?? null;
+}
+
+/**
+ * Fullscreen, including the one platform that will not give it to a container.
+ *
+ * iOS Safari has no Fullscreen API on an arbitrary element: the only thing that can fill the
+ * screen is the video itself, through `webkitEnterFullscreen`. Without that branch the button
+ * does nothing at all on an iPhone, which is where most video is watched.
+ */
+export async function toggleFullscreen(container: HTMLElement, video: HTMLVideoElement | null): Promise<void> {
+    const legacyDocument = document as Document & { webkitExitFullscreen?: () => Promise<void>; };
+    if (fullscreenElement()) {
+        await (document.exitFullscreen?.() ?? legacyDocument.webkitExitFullscreen?.());
+        return;
+    }
+
+    const legacyElement = container as HTMLElement & { webkitRequestFullscreen?: () => Promise<void>; };
+    if (container.requestFullscreen) return void await container.requestFullscreen();
+    if (legacyElement.webkitRequestFullscreen) return void await legacyElement.webkitRequestFullscreen();
+
+    const iosVideo = video as (HTMLVideoElement & { webkitEnterFullscreen?: () => void; }) | null;
+    iosVideo?.webkitEnterFullscreen?.();
+}
+
+/** Picture in picture, where the browser has it. Firefox has its own button and no API. */
+export function supportsPip(): boolean {
+    return typeof document !== "undefined" && Boolean(document.pictureInPictureEnabled);
+}
+
+export async function togglePip(video: HTMLVideoElement): Promise<void> {
+    if (document.pictureInPictureElement) return void await document.exitPictureInPicture();
+    await video.requestPictureInPicture();
+}
+
+/* -------- captions -------- */
+
+/** One subtitle track, as the menu lists it. */
+export interface CaptionTrack {
+    /** Where it sits in the element's own `textTracks`, which is what turns it on. */
+    index: number;
+    label: string;
+    language: string;
+}
+
+/** Which of the element's text tracks are subtitles a viewer would choose between. */
+export function captionTracks(list: TextTrackList | null | undefined): CaptionTrack[] {
+    if (!list) return [];
+    const found: CaptionTrack[] = [];
+    for (let at = 0; at < list.length; at += 1) {
+        const track = list[at];
+        // Chapters and metadata are for the page, not for the viewer: listing them offers a
+        // language picker entry that draws nothing over the picture.
+        if (!track || (track.kind !== "subtitles" && track.kind !== "captions")) continue;
+        found.push({ index: at, label: track.label || track.language || `Track ${found.length + 1}`, language: track.language });
+    }
+    return found;
+}
+
+/**
+ * The track the element is SHOWING, or -1.
+ *
+ * Read rather than remembered: a `default` track is showing before any button was pressed, and
+ * a player that assumed "off" would need two presses to turn something off.
+ */
+export function activeCaption(list: TextTrackList | null | undefined): number {
+    if (!list) return -1;
+    for (let at = 0; at < list.length; at += 1) if (list[at]?.mode === "showing") return at;
+    return -1;
+}
+
+/**
+ * Show one track and disable the rest. -1 turns them all off.
+ *
+ * "disabled" rather than "hidden": a hidden track still fires its cues, so a page listening to
+ * `cuechange` for its own transcript would keep receiving a language nobody asked for.
+ */
+export function showCaption(list: TextTrackList | null | undefined, index: number): void {
+    if (!list) return;
+    for (let at = 0; at < list.length; at += 1) {
+        const track = list[at];
+        if (track) track.mode = at === index ? "showing" : "disabled";
+    }
+}
+
+/* -------- casting: the remote screen this is played on -------- */
+
+/** What the cast control knows about the world. */
+export interface RemoteState {
+    /** There is somewhere to cast TO. Before the browser has looked, this is optimistic. */
+    available: boolean;
+    /** Playing on that screen right now. */
+    connected: boolean;
+}
+
+interface RemotePlaybackLike {
+    state: "connected" | "connecting" | "disconnected";
+    watchAvailability: (callback: (available: boolean) => void) => Promise<number>;
+    cancelWatchAvailability: (id: number) => Promise<void>;
+    prompt: () => Promise<void>;
+    addEventListener: (type: string, listener: () => void) => void;
+    removeEventListener: (type: string, listener: () => void) => void;
+}
+
+/** The element, with the two spellings of "play this somewhere else" on it. */
+type CastableVideo = HTMLVideoElement & {
+    remote?: RemotePlaybackLike;
+    /** Safari's AirPlay picker, which predates the standard and is still the only one it has on iOS. */
+    webkitShowPlaybackTargetPicker?: () => void;
+    webkitCurrentPlaybackTargetIsWireless?: boolean;
+};
+
+/**
+ * Whether this element can be cast at all.
+ *
+ * `disableRemotePlayback` is honoured: a page that asked for the button to be gone does not
+ * get one drawn over its video by a component.
+ */
+export function supportsRemote(video: HTMLVideoElement | null): boolean {
+    const element = video as CastableVideo | null;
+    if (!element || element.disableRemotePlayback) return false;
+    return Boolean(element.remote?.prompt ?? element.webkitShowPlaybackTargetPicker);
+}
+
+/**
+ * Watch for a screen to cast to, and for the connection to it.
+ *
+ * WHY AVAILABILITY IS OPTIMISTIC WHEN THE WATCH FAILS. `watchAvailability` rejects with
+ * NotSupportedError on the platforms that can still `prompt()` - Safari, and Chromium for some
+ * sources - so treating a rejection as "no devices" hides a control that works. A button that
+ * opens an empty picker is a smaller loss than a missing one.
+ */
+export function watchRemote(video: HTMLVideoElement, onChange: (state: RemoteState) => void): () => void {
+    const element = video as CastableVideo;
+    const state: RemoteState = { available: false, connected: false };
+    const publish = (next: Partial<RemoteState>): void => {
+        Object.assign(state, next);
+        onChange({ ...state });
+    };
+
+    if (element.remote) {
+        const remote = element.remote;
+        const onState = (): void => publish({ connected: remote.state === "connected" });
+        let watch: number | null = null;
+        let cancelled = false;
+
+        remote.watchAvailability((available) => { if (!cancelled) publish({ available }); })
+            .then((id) => {
+                if (cancelled) void remote.cancelWatchAvailability(id).catch(() => { /* already gone */ });
+                else watch = id;
+            })
+            .catch(() => { if (!cancelled) publish({ available: true }); });
+
+        for (const name of ["connect", "connecting", "disconnect"]) remote.addEventListener(name, onState);
+        onState();
+
+        return () => {
+            cancelled = true;
+            for (const name of ["connect", "connecting", "disconnect"]) remote.removeEventListener(name, onState);
+            if (watch !== null) void remote.cancelWatchAvailability(watch).catch(() => { /* already gone */ });
+        };
+    }
+
+    const onAvailability = (event: Event): void => publish({ available: (event as Event & { availability?: string; }).availability === "available" });
+    const onWireless = (): void => publish({ connected: Boolean(element.webkitCurrentPlaybackTargetIsWireless) });
+    element.addEventListener("webkitplaybacktargetavailabilitychanged", onAvailability);
+    element.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", onWireless);
+    onWireless();
+
+    return () => {
+        element.removeEventListener("webkitplaybacktargetavailabilitychanged", onAvailability);
+        element.removeEventListener("webkitcurrentplaybacktargetiswirelesschanged", onWireless);
+    };
+}
+
+/**
+ * Open the browser's own device picker.
+ *
+ * There is no list to draw ourselves: both APIs hand the choice to the platform, which is the
+ * only thing that can enumerate the screens on the network.
+ */
+export async function promptRemote(video: HTMLVideoElement): Promise<void> {
+    const element = video as CastableVideo;
+    if (element.remote?.prompt) return void await element.remote.prompt();
+    element.webkitShowPlaybackTargetPicker?.();
+}

package/src/index.ts

@@ -152,3 +152,55 @@ export {
     type TypeaheadState,
     type TypeaheadStep
 } from "@/core/keys";
+
+// The image viewer's arithmetic: zoom that stays under the cursor, a pan that cannot lose the
+// picture, and moving through a set. The lightbox is React; none of this is.
+export {
+    zoomAt,
+    clampPan,
+    clampScale,
+    wheelFactor,
+    fittedSize,
+    pinchDistance,
+    nextIndex,
+    filenameFrom,
+    downloadFile,
+    flightFrom,
+    flightMs,
+    prefersReducedMotion,
+    FLIGHT_MS,
+    IDENTITY,
+    ZOOM_LIMITS,
+    ZOOM_STEP,
+    ZOOM_DOUBLE,
+    type Transform,
+    type ZoomLimits,
+    type Box
+} from "@/core/image-viewer";
+// The video player's arithmetic: times, seeking, buffering and the shortcut map.
+export {
+    formatTime,
+    progress,
+    fractionAt,
+    bufferedAhead,
+    nextSpeed,
+    commandFor,
+    isTypingTarget,
+    fullscreenElement,
+    toggleFullscreen,
+    supportsPip,
+    togglePip,
+    captionTracks,
+    activeCaption,
+    showCaption,
+    supportsRemote,
+    watchRemote,
+    promptRemote,
+    SPEEDS,
+    SEEK_STEP,
+    SEEK_JUMP,
+    VOLUME_STEP,
+    type PlayerCommand,
+    type CaptionTrack,
+    type RemoteState
+} from "@/core/player";

package/src/react/image/icons.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+
+/**
+ * The viewer's icons, drawn rather than loaded.
+ *
+ * A sprite or an SVG file would be a request, and an icon package would be a dependency for
+ * eight paths. They sit in one module so the viewer and its menu share them without either
+ * pulling the other's chunk.
+ */
+
+function Glyph({ children }: { children: ReactNode; }): ReactNode {
+    return (
+        <svg viewBox="0 0 24 24" width="1.125em" height="1.125em" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            {children}
+        </svg>
+    );
+}
+
+export function Close(): ReactNode {
+    return <Glyph><path d="M6 6 18 18M18 6 6 18" /></Glyph>;
+}
+
+export function Plus(): ReactNode {
+    return <Glyph><path d="M12 5v14M5 12h14" /></Glyph>;
+}
+
+export function Minus(): ReactNode {
+    return <Glyph><path d="M5 12h14" /></Glyph>;
+}
+
+export function ChevronLeft(): ReactNode {
+    return <Glyph><path d="m15 5-7 7 7 7" /></Glyph>;
+}
+
+export function ChevronRight(): ReactNode {
+    return <Glyph><path d="m9 5 7 7-7 7" /></Glyph>;
+}
+
+export function Trash(): ReactNode {
+    return <Glyph><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" /></Glyph>;
+}
+
+export function Dots(): ReactNode {
+    return (
+        <svg viewBox="0 0 24 24" width="1.125em" height="1.125em" fill="currentColor" aria-hidden="true">
+            <circle cx="12" cy="5" r="1.75" />
+            <circle cx="12" cy="12" r="1.75" />
+            <circle cx="12" cy="19" r="1.75" />
+        </svg>
+    );
+}
+
+export function Download(): ReactNode {
+    return <Glyph><path d="M12 3v12M7 11l5 5 5-5M4 20h16" /></Glyph>;
+}