zabi-components 8.0.0 → 8.1.0

package/dist/util/overlay-chrome.js

@@ -0,0 +1,56 @@
+/**
+ * The chrome of an overlay at large text: the header of a BottomSheet, Drawer,
+ * Modal or SlideUp, and the padding of its footer.
+ *
+ * Tailwind's spacing is in rem, so at `html { font-size: 200% }` the gutters,
+ * the gap above the title, the title and the close button all doubled. On a
+ * phone that left a third of a half-height sheet to what the sheet was opened
+ * for. This is navigation chrome, as the app bar is (see AppBar): it says
+ * where you are and how to leave, and it is not what the user enlarged the
+ * text to read. So it is laid out in px, and its title grows to 1.3 times its
+ * size and stops. The content, and whatever the app puts in the footer, scale
+ * in full. docs/ACCESSIBILITY.md has the reasoning against WCAG 1.4.4.
+ */
+/**
+ * On the header box: the spacing scale in px for everything inside it, so
+ * `px-6`, `gap-4`, `size-8` and the 44px of `TOUCH_HIT_AREA` are the sizes
+ * they are at 100% text. Only for a box that holds chrome alone: an app's
+ * Button inside it would stop growing too, which is why a footer spells its
+ * padding out in px instead.
+ */
+export const OVERLAY_CHROME = "[--spacing:4px]";
+/**
+ * How a title wraps: onto as many lines as it needs, between words, and a
+ * word wider than the whole line is cut rather than left sticking out.
+ */
+export const OVERLAY_TITLE_WRAP = "[overflow-wrap:break-word]";
+/**
+ * On the title while the text is enlarged (`textIsEnlarged`): a word that does
+ * not fit at the end of a line is hyphenated by the rules of the page's
+ * `lang`, where the browser has them, before it is cut.
+ *
+ * Not at the default text size, and not narrowed with `hyphenate-limit-chars`:
+ * `hyphens: auto` hyphenates at the end of every line, not only where a word
+ * is too wide, and what a browser offers as a hyphenation point is the
+ * platform's ("sett-ings", "histor-y" in Chromium on macOS). A title that
+ * wraps between words today would get those. A limit, where it is supported
+ * at all (not in Safari), turns a hyphenated break of a shorter word into a
+ * plain cut.
+ */
+export const OVERLAY_TITLE_HYPHENS = "hyphens-auto";
+/**
+ * Whether the reader has enlarged the text: the root font size is above the
+ * 16px every browser starts from. Read when an overlay opens. False on the
+ * server and until then, which is the layout at the default size.
+ */
+export function textIsEnlarged() {
+    if (typeof document === "undefined")
+        return false;
+    return parseFloat(getComputedStyle(document.documentElement).fontSize) > 16;
+}
+/** A title of 20px (`text-xl`): up to 26px, on the same 1.4 line. */
+export const OVERLAY_TITLE_XL = "text-[length:min(1.25rem,26px)] leading-[1.4]";
+/** A title of 24px (`text-2xl`): up to 31.2px, on the same 4/3 line. */
+export const OVERLAY_TITLE_2XL = "text-[length:min(1.5rem,31.2px)] leading-[calc(4/3)]";
+/** The "×" of a close button: a control, so the size it is at 100%. */
+export const OVERLAY_CLOSE_GLYPH = "text-[24px] leading-[32px]";

package/dist/util/overlay.d.ts

@@ -0,0 +1,71 @@
+/**
+ * What Modal, SlideUp and Drawer share beyond `focus-utils.ts`: the scroll
+ * lock on `<body>` and the Tab cycle inside the panel. One copy, so the
+ * overlays cannot drift apart and keep working when nested in any order.
+ */
+/**
+ * Stops the page behind an overlay from scrolling. Ref-counted on `<body>`
+ * (`data-zabi-scroll-lock`), so nested overlays share one lock and the page
+ * scrolls again only when the last one has released it.
+ *
+ * Call it when the overlay opens, in the browser, and call the returned
+ * function when it closes.
+ */
+export declare function lockBodyScroll(): () => void;
+/**
+ * Keeps Tab inside `container`: call it from the panel's `keydown` handler.
+ * Focusables are re-queried on every Tab, so content added while the overlay
+ * is open stays inside the cycle. A Tab that comes from a dialog nested in the
+ * container is left to that dialog. The toasts on screen are in the cycle too,
+ * after the container's own controls: see `getToastFocusables`.
+ */
+export declare function trapTabKey(container: HTMLElement | undefined, event: KeyboardEvent): void;
+/**
+ * Watches a scrolling box in an overlay and reports whether it has to be a
+ * Tab stop itself: true when its content is taller than it and holds nothing
+ * that can take focus, so the keyboard would otherwise have no way to scroll
+ * it. The answer changes with the viewport and with the content, so it is
+ * reported again whenever either does.
+ *
+ * Call it when the overlay opens, in the browser; the returned function stops it.
+ */
+export declare function watchScrollerNeedsFocus(box: HTMLElement, onChange: (needsFocus: boolean) => void): () => void;
+/**
+ * Keeps an overlay on the part of the screen the on-screen keyboard leaves.
+ *
+ * Where the keyboard covers the page instead of shrinking it (iOS Safari,
+ * Chrome on Android), a panel at the bottom of a `fixed inset-0` root ends up
+ * behind it, footer and all. This moves the root's bottom edge up to the top
+ * of the keyboard (and its top edge down, if the browser has panned the
+ * screen), so everything laid out against the root follows: a sheet's height,
+ * a pinned footer, a drawer's end. `data-keyboard-open` is set on the root
+ * meanwhile. The field that has focus is scrolled back into view once the
+ * root has its new size. Where the page shrinks by itself, nothing is done.
+ *
+ * The root is usually the backdrop as well: while it is moved, its dimming is
+ * carried on past its edges, so the page does not show undimmed where the
+ * keyboard was while that slides away.
+ *
+ * `root` is the overlay's outermost, fixed element. Call it when the overlay
+ * opens, in the browser; the returned function stops it and puts the root back.
+ */
+export declare function followKeyboard(root: HTMLElement): () => void;
+/**
+ * Says that `footer` is pinned to the bottom of an open overlay, so what is
+ * drawn over the overlays (the toast stack) can stay off it. Call it when the
+ * footer is rendered, in the browser; the returned function withdraws it.
+ */
+export declare function registerOverlayFooter(footer: HTMLElement): () => void;
+/**
+ * Says that `header` is the top of an open overlay and holds its close
+ * button, so the toast stack starts below it and never lies over the one
+ * control that always closes the overlay. Call it when the header is
+ * rendered, in the browser; the returned function withdraws it.
+ */
+export declare function registerOverlayHeader(header: HTMLElement): () => void;
+/** The footer of the overlay on top, if it has one. */
+export declare function topOverlayFooter(): HTMLElement | null;
+/** The header of the overlay on top, if it has one. */
+export declare function topOverlayHeader(): HTMLElement | null;
+/** Calls `listener` whenever a registered header or footer appears, goes, moves or changes size. */
+export declare function watchOverlayFooters(listener: () => void): () => void;

package/dist/util/overlay.js

@@ -0,0 +1,240 @@
+/**
+ * What Modal, SlideUp and Drawer share beyond `focus-utils.ts`: the scroll
+ * lock on `<body>` and the Tab cycle inside the panel. One copy, so the
+ * overlays cannot drift apart and keep working when nested in any order.
+ */
+import { cycleTrappedFocus, DIALOG_SELECTOR, getFocusableElements } from "./focus-utils.js";
+import { readKeyboardInset } from "./keyboard-inset.js";
+/**
+ * Stops the page behind an overlay from scrolling. Ref-counted on `<body>`
+ * (`data-zabi-scroll-lock`), so nested overlays share one lock and the page
+ * scrolls again only when the last one has released it.
+ *
+ * Call it when the overlay opens, in the browser, and call the returned
+ * function when it closes.
+ */
+export function lockBodyScroll() {
+    const body = document.body;
+    const count = Number(body.dataset.zabiScrollLock ?? "0");
+    if (count === 0) {
+        body.dataset.zabiScrollLockOverflow = body.style.overflow;
+        body.style.overflow = "hidden";
+    }
+    body.dataset.zabiScrollLock = String(count + 1);
+    return () => {
+        const next = Number(body.dataset.zabiScrollLock ?? "1") - 1;
+        if (next <= 0) {
+            body.style.overflow = body.dataset.zabiScrollLockOverflow ?? "";
+            delete body.dataset.zabiScrollLock;
+            delete body.dataset.zabiScrollLockOverflow;
+        }
+        else {
+            body.dataset.zabiScrollLock = String(next);
+        }
+    };
+}
+/**
+ * Keeps Tab inside `container`: call it from the panel's `keydown` handler.
+ * Focusables are re-queried on every Tab, so content added while the overlay
+ * is open stays inside the cycle. A Tab that comes from a dialog nested in the
+ * container is left to that dialog. The toasts on screen are in the cycle too,
+ * after the container's own controls: see `getToastFocusables`.
+ */
+export function trapTabKey(container, event) {
+    if (event.key !== "Tab" || !container)
+        return;
+    // A nested dialog handles its own Tab cycle.
+    const owner = event.target?.closest?.(DIALOG_SELECTOR);
+    if (owner && owner !== container)
+        return;
+    cycleTrappedFocus(container, event);
+}
+/**
+ * Watches a scrolling box in an overlay and reports whether it has to be a
+ * Tab stop itself: true when its content is taller than it and holds nothing
+ * that can take focus, so the keyboard would otherwise have no way to scroll
+ * it. The answer changes with the viewport and with the content, so it is
+ * reported again whenever either does.
+ *
+ * Call it when the overlay opens, in the browser; the returned function stops it.
+ */
+export function watchScrollerNeedsFocus(box, onChange) {
+    const measure = () => {
+        onChange(box.scrollHeight > box.clientHeight && getFocusableElements(box).length === 0);
+    };
+    measure();
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(measure) : undefined;
+    resize?.observe(box);
+    const mutation = new MutationObserver(measure);
+    mutation.observe(box, { childList: true, subtree: true, characterData: true });
+    return () => {
+        resize?.disconnect();
+        mutation.disconnect();
+    };
+}
+/**
+ * Keeps an overlay on the part of the screen the on-screen keyboard leaves.
+ *
+ * Where the keyboard covers the page instead of shrinking it (iOS Safari,
+ * Chrome on Android), a panel at the bottom of a `fixed inset-0` root ends up
+ * behind it, footer and all. This moves the root's bottom edge up to the top
+ * of the keyboard (and its top edge down, if the browser has panned the
+ * screen), so everything laid out against the root follows: a sheet's height,
+ * a pinned footer, a drawer's end. `data-keyboard-open` is set on the root
+ * meanwhile. The field that has focus is scrolled back into view once the
+ * root has its new size. Where the page shrinks by itself, nothing is done.
+ *
+ * The root is usually the backdrop as well: while it is moved, its dimming is
+ * carried on past its edges, so the page does not show undimmed where the
+ * keyboard was while that slides away.
+ *
+ * `root` is the overlay's outermost, fixed element. Call it when the overlay
+ * opens, in the browser; the returned function stops it and puts the root back.
+ */
+export function followKeyboard(root) {
+    if (typeof window === "undefined")
+        return () => { };
+    const viewport = window.visualViewport;
+    const restore = () => {
+        root.style.bottom = "";
+        root.style.top = "";
+        root.style.boxShadow = "";
+        delete root.dataset.keyboardOpen;
+    };
+    let last = "";
+    const update = () => {
+        const inset = readKeyboardInset();
+        // How far the browser has panned the screen to show the field. It
+        // counts when the pan is complete as well: nothing of the page is
+        // under the keyboard then (the inset is 0), and the top of the root
+        // is as far above the screen as the keyboard is tall.
+        const shorter = !!viewport &&
+            Math.abs(viewport.scale - 1) <= 0.01 &&
+            document.documentElement.clientHeight - viewport.height > 1;
+        const panned = shorter ? Math.max(0, Math.round(viewport.offsetTop)) : 0;
+        const key = `${inset}:${panned}`;
+        if (key === last)
+            return;
+        last = key;
+        if (inset > 0 || panned > 0) {
+            root.style.bottom = inset > 0 ? `${inset}px` : "";
+            root.style.top = panned > 0 ? `${panned}px` : "";
+            root.dataset.keyboardOpen = "true";
+            // The root is the backdrop too. What it no longer covers is under
+            // the keyboard, but shows for a moment while the keyboard slides
+            // away: the dimming goes on past the root's edges.
+            const dim = getComputedStyle(root).backgroundColor;
+            root.style.boxShadow =
+                dim && dim !== "transparent" && dim !== "rgba(0, 0, 0, 0)"
+                    ? `0 0 0 100vmax ${dim}`
+                    : "";
+        }
+        else {
+            restore();
+        }
+        notifyOverlayFooters();
+        const active = document.activeElement;
+        if (inset > 0 && active instanceof HTMLElement && root.contains(active)) {
+            active.scrollIntoView?.({ block: "nearest" });
+        }
+    };
+    update();
+    viewport?.addEventListener("resize", update);
+    viewport?.addEventListener("scroll", update);
+    window.addEventListener("resize", update);
+    return () => {
+        viewport?.removeEventListener("resize", update);
+        viewport?.removeEventListener("scroll", update);
+        window.removeEventListener("resize", update);
+        restore();
+    };
+}
+const overlayParts = [];
+const footerListeners = new Set();
+function notifyOverlayFooters() {
+    for (const listener of footerListeners)
+        listener();
+}
+function registerOverlayPart(part, element) {
+    const panel = element.closest(DIALOG_SELECTOR);
+    let entry = panel ? overlayParts.find((candidate) => candidate.panel === panel) : undefined;
+    if (!entry) {
+        entry = { panel };
+        overlayParts.push(entry);
+    }
+    const mine = entry;
+    mine[part] = element;
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(notifyOverlayFooters) : undefined;
+    observer?.observe(element);
+    notifyOverlayFooters();
+    // An overlay that slides in is still on its way when its parts are
+    // rendered, and a move is not a change of size: say so again once the
+    // panel has come to rest.
+    let frame = 0;
+    const settle = () => {
+        frame = 0;
+        if (typeof panel?.getAnimations === "function" && panel.getAnimations().length > 0) {
+            frame = requestAnimationFrame(settle);
+            return;
+        }
+        notifyOverlayFooters();
+    };
+    if (panel && typeof requestAnimationFrame === "function")
+        frame = requestAnimationFrame(settle);
+    return () => {
+        if (frame)
+            cancelAnimationFrame(frame);
+        observer?.disconnect();
+        if (mine[part] === element)
+            delete mine[part];
+        if (!mine.header && !mine.footer) {
+            const index = overlayParts.indexOf(mine);
+            if (index !== -1)
+                overlayParts.splice(index, 1);
+        }
+        notifyOverlayFooters();
+    };
+}
+/**
+ * Says that `footer` is pinned to the bottom of an open overlay, so what is
+ * drawn over the overlays (the toast stack) can stay off it. Call it when the
+ * footer is rendered, in the browser; the returned function withdraws it.
+ */
+export function registerOverlayFooter(footer) {
+    return registerOverlayPart("footer", footer);
+}
+/**
+ * Says that `header` is the top of an open overlay and holds its close
+ * button, so the toast stack starts below it and never lies over the one
+ * control that always closes the overlay. Call it when the header is
+ * rendered, in the browser; the returned function withdraws it.
+ */
+export function registerOverlayHeader(header) {
+    return registerOverlayPart("header", header);
+}
+/** The parts of the overlay opened last that has registered any. */
+function topOverlayParts() {
+    for (let index = overlayParts.length - 1; index >= 0; index -= 1) {
+        const entry = overlayParts[index];
+        if (entry.header?.isConnected || entry.footer?.isConnected)
+            return entry;
+    }
+    return undefined;
+}
+/** The footer of the overlay on top, if it has one. */
+export function topOverlayFooter() {
+    const footer = topOverlayParts()?.footer;
+    return footer?.isConnected ? footer : null;
+}
+/** The header of the overlay on top, if it has one. */
+export function topOverlayHeader() {
+    const header = topOverlayParts()?.header;
+    return header?.isConnected ? header : null;
+}
+/** Calls `listener` whenever a registered header or footer appears, goes, moves or changes size. */
+export function watchOverlayFooters(listener) {
+    footerListeners.add(listener);
+    return () => {
+        footerListeners.delete(listener);
+    };
+}

package/dist/util/photo.d.ts

@@ -0,0 +1,214 @@
+/**
+ * Public types and pure helpers for `PhotoGrid` and `PhotoViewer`.
+ *
+ * Everything a gesture means is worked out here, on numbers: where a pinch
+ * leaves the photo, how far it may be panned, whether a swipe turns the page.
+ * The components only feed pointers in and apply the result, so the
+ * arithmetic can be tested without a browser.
+ */
+import type { Component } from "svelte";
+export type PhotoKey = string | number;
+/** One photo. `PhotoGrid` and `PhotoViewer` take the same array. */
+export interface Photo {
+    /** Stable identity, when the same `src` may appear twice or may change. Without it, `src` is the identity. */
+    id?: PhotoKey;
+    /** The full image, shown in the viewer. */
+    src: string;
+    /** A small version for the grid, and for the viewer while the full image loads. Without it, `src`. */
+    thumbSrc?: string;
+    /** What the photo shows, for those who cannot see it. */
+    alt: string;
+    /** Width of the full image in px. With `height` it reserves the photo's box before it has loaded. */
+    width: number;
+    /** Height of the full image in px. */
+    height: number;
+    /** Shown under the photo in the viewer. */
+    caption?: string;
+}
+export declare function photoKey(photo: Photo): PhotoKey;
+/** Payload of PhotoGrid's `onselect`. */
+export interface PhotoGridSelectDetail {
+    photo: Photo;
+    index: number;
+    /** False when the press cleared the photo's selection (only in `multiple`). */
+    selected: boolean;
+    /** Every selected key after the change: one or none in `single`. */
+    keys: PhotoKey[];
+}
+/** Every built-in string of PhotoGrid. Pass a partial object to `strings` to translate. */
+export interface PhotoGridStrings {
+    /** Visible label and name of the tile that adds a photo. */
+    addPhoto: string;
+    /** Name of a photo that has no `alt`. */
+    photoName: (position: number, total: number) => string;
+    /** Name of the last tile when it stands for the photos not shown. */
+    morePhotos: (count: number) => string;
+    /** Name of the button that opens a photo, in a grid where a press selects. */
+    openPhoto: (name: string) => string;
+    /** How to get around by keyboard. Read once when focus enters the grid, and shown while it has keyboard focus. */
+    keyboardHint: string;
+}
+export declare const PHOTO_GRID_STRINGS: PhotoGridStrings;
+/** What the user did to close the viewer. `swipe` is a swipe down on the photo. */
+export type PhotoViewerCloseReason = "escape" | "close-button" | "swipe";
+/** Something to do with the photo that is showing: share it, delete it. */
+export interface PhotoViewerAction {
+    id: string;
+    label: string;
+    /** An icon component, as `@lucide/svelte` icons are. */
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    /** `danger` for a destructive action such as Delete. */
+    tone?: "danger";
+    disabled?: boolean;
+    onclick: (photo: Photo, index: number) => void;
+}
+/** Every built-in string of PhotoViewer. Pass a partial object to `strings` to translate. */
+export interface PhotoViewerStrings {
+    close: string;
+    previous: string;
+    next: string;
+    /** The counter that is shown: "3 / 12". */
+    counter: (position: number, total: number) => string;
+    /** The same for a screen reader, read out after the photo's `alt`: "3 of 12". */
+    position: (position: number, total: number) => string;
+    /** Announced, with a spinner, when a photo takes a while to load. */
+    loading: string;
+    /** Shown when a photo cannot be loaded. */
+    loadError: string;
+    retry: string;
+    /** Name of the menu that holds the actions that do not fit in the bar. */
+    moreActions: string;
+    /** The button that shows all of a long caption, and the one that folds it again. */
+    showMore: string;
+    showLess: string;
+    /** Name of a photo that has no `alt`. */
+    photoName: (position: number, total: number) => string;
+}
+export declare const PHOTO_VIEWER_STRINGS: PhotoViewerStrings;
+/** How many actions the viewer's bar shows before the rest go into a menu. */
+export declare const MAX_BAR_ACTIONS = 3;
+/** The actions shown in the bar, and those that go into the menu. */
+export declare function splitActions<T>(actions: readonly T[], max?: number): {
+    bar: T[];
+    menu: T[];
+};
+/** An index held inside a list of `count` photos; -1 for an empty list. */
+export declare function clampIndex(index: number, count: number): number;
+/** What the grid shows of `total` photos under `max`, and how many the last tile stands for. */
+export declare function visibleCount(total: number, max: number | undefined): {
+    shown: number;
+    hidden: number;
+};
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * Where the photo is. `scale` 1 is the photo fitted to the screen. `x` and
+ * `y` are how far its centre is from the centre of the screen, in px.
+ */
+export interface PhotoTransform {
+    scale: number;
+    x: number;
+    y: number;
+}
+export declare const REST: PhotoTransform;
+export declare const MIN_SCALE = 1;
+export declare const MAX_SCALE = 4;
+/** What a double tap zooms to. */
+export declare const DOUBLE_TAP_SCALE = 2.5;
+export declare const isZoomed: (transform: PhotoTransform) => boolean;
+/** The largest size a photo of `photo` px takes inside `view` without being cropped. */
+export declare function fitSize(photo: Size, view: Size): Size;
+/**
+ * The transform with its pan held to the photo's edges: an edge of the photo
+ * never comes further in than the edge of the screen, and a side that is
+ * narrower than the screen stays centred. `fit` is the photo's size at scale 1.
+ */
+export declare function clampPan(transform: PhotoTransform, fit: Size, view: Size): PhotoTransform;
+/**
+ * Zooms to `scale` so that the point of the photo under `point` stays under
+ * it. `point` is measured from the centre of the screen.
+ */
+export declare function zoomAbout(transform: PhotoTransform, scale: number, point: Point, fit: Size, view: Size): PhotoTransform;
+/** Two fingers on the glass: the point between them, and how far apart they are. */
+export interface PinchSample {
+    centre: Point;
+    distance: number;
+}
+export declare function pinchSample(first: Point, second: Point): PinchSample;
+/**
+ * Where a pinch has taken the photo: scaled by how much the fingers have
+ * spread, about the point that was between them when it began, and moved with
+ * that point. Points are measured from the centre of the screen.
+ */
+export declare function pinchTransform(start: PhotoTransform, from: PinchSample, now: PinchSample, fit: Size, view: Size): PhotoTransform;
+/** A pinch let go a hair above the fitted size is the fitted size. */
+export declare function settleZoom(transform: PhotoTransform, fit: Size, view: Size): PhotoTransform;
+/** A double tap: in to 2.5 times about the tap from the fitted photo, and back to fitted from any zoom. */
+export declare function doubleTapTransform(transform: PhotoTransform, point: Point, fit: Size, view: Size): PhotoTransform;
+/** The photo moved by `delta` px, held to its edges. */
+export declare function panBy(transform: PhotoTransform, delta: Point, fit: Size, view: Size): PhotoTransform;
+/** One step of the keyboard or the wheel: in or out by half again, about the centre. */
+export declare const ZOOM_STEP = 1.5;
+/** Movement under this many px is a press, not a drag. */
+export declare const TAP_SLOP = 8;
+/** A press shorter than this is a tap, and two taps closer together than this are a double tap. */
+export declare const TAP_MS = 300;
+/** Two taps further apart than this are two taps. */
+export declare const DOUBLE_TAP_RADIUS = 32;
+export declare function isDoubleTap(previous: {
+    time: number;
+    point: Point;
+} | null, now: {
+    time: number;
+    point: Point;
+}): boolean;
+/**
+ * Which way a drag on the fitted photo is going, once it has gone far enough
+ * to tell: `x` turns the page, `down` closes, and null is not yet known. A
+ * drag upwards is neither, and stays null.
+ */
+export declare function dragAxis(delta: Point, slop?: number): "x" | "down" | null;
+/** Part of the screen's width a slow swipe has to cross to turn the page. */
+export declare const TURN_DISTANCE = 0.25;
+/** Part of the screen's height a slow swipe down has to cross to close. */
+export declare const CLOSE_DISTANCE = 0.2;
+/**
+ * What a horizontal swipe does when the finger lifts. A flick decides by its
+ * direction; a slow one by how far it went. Swiping left shows the next
+ * photo, and the previous one in a right-to-left layout. At either end there
+ * is nothing to turn to.
+ */
+export declare function swipeTurn(options: {
+    /** px moved; negative is to the left. */
+    distance: number;
+    /** px per ms at release; negative is to the left. */
+    velocity: number;
+    width: number;
+    index: number;
+    count: number;
+    rtl?: boolean;
+    flick: number;
+}): -1 | 0 | 1;
+/** Whether a swipe down closes the viewer when the finger lifts. */
+export declare function swipeCloses(options: {
+    /** px moved down. */
+    distance: number;
+    /** px per ms at release; positive is down. */
+    velocity: number;
+    height: number;
+    flick: number;
+}): boolean;
+/**
+ * How far a drag past the first or last photo moves it: a third of the
+ * finger's travel, so it gives but does not come away.
+ */
+export declare function resist(distance: number): number;