zabi-components 8.0.0 → 9.0.0

package/dist/util/focus-utils.js

@@ -2,6 +2,8 @@
 /** From `app.css` `@layer components` — import the library/app stylesheet. */
 export const FOCUS_BRAND_CLASS = "focus-brand";
 export const FOCUS_NAV_CLASS = "focus-nav";
+/** Every dialog panel: `dialog` and `alertdialog` are both dialogs to a focus trap. */
+export const DIALOG_SELECTOR = '[role="dialog"], [role="alertdialog"]';
 export function getFocusableElements(container) {
     const selector = [
         'button:not([disabled])',
@@ -12,10 +14,81 @@ export function getFocusableElements(container) {
         '[tabindex]:not([tabindex="-1"])',
     ].join(', ');
     return Array.from(container.querySelectorAll(selector)).filter((el) => {
+        // `tabindex="-1"` takes a control out of the Tab order whatever it
+        // is: the items of a list with one roving Tab stop are buttons,
+        // and counting them made a focus trap think the last of them was
+        // its last stop, so Tab from the real one left the dialog.
+        if (el.getAttribute('tabindex') === '-1')
+            return false;
         const style = window.getComputedStyle(el);
         return style.display !== 'none' && style.visibility !== 'hidden';
     });
 }
+/** The region a `Toaster` renders its toasts in. */
+export const TOAST_REGION_SELECTOR = "[data-zabi-toaster]";
+/**
+ * Whether an event's target is in a toast. A toast is drawn over whatever is
+ * open, and a press on it is for the toast (to hold it, read it, dismiss it):
+ * a menu or a panel that closes on a press outside itself asks this first,
+ * and leaves a press on a toast alone.
+ */
+export function isInsideToastRegion(target) {
+    if (typeof Node === "undefined" || !(target instanceof Node))
+        return false;
+    // A press on text can report the text node.
+    const element = target instanceof Element ? target : target.parentElement;
+    return !!element?.closest(TOAST_REGION_SELECTOR);
+}
+/**
+ * The controls of the toasts on screen. A toast is drawn over a modal
+ * overlay and can cover its buttons, so a focus trap that kept the keyboard
+ * out of it would leave no way to dismiss it: the trap takes these in, after
+ * the overlay's own controls.
+ */
+export function getToastFocusables() {
+    if (typeof document === "undefined")
+        return [];
+    return Array.from(document.querySelectorAll(TOAST_REGION_SELECTOR)).flatMap((region) => getFocusableElements(region));
+}
+/**
+ * One step of the Tab cycle of a modal overlay: through the controls of
+ * `container`, then through the toasts on screen, and round again. Focusables
+ * are looked up on every Tab, so what is added while the overlay is open is
+ * in the cycle. Focus that is nowhere in it goes to the first control.
+ */
+export function cycleTrappedFocus(container, event) {
+    const focusable = [...getFocusableElements(container), ...getToastFocusables()];
+    if (focusable.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (!active || !focusable.includes(active)) {
+        event.preventDefault();
+        first.focus();
+        return;
+    }
+    if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+        return;
+    }
+    if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+        return;
+    }
+    // Between the overlay and the toasts the browser's own order would walk
+    // the page that lies between them in the document: step across by hand.
+    const next = focusable[focusable.indexOf(active) + (event.shiftKey ? -1 : 1)];
+    if (active.closest(TOAST_REGION_SELECTOR) !== next.closest(TOAST_REGION_SELECTOR)) {
+        event.preventDefault();
+        next.focus();
+    }
+}
 /** Tab wraps first↔last inside `container`. Caller should pair with `saveFocus` / `returnFocus`. */
 export function trapFocus(container) {
     const focusableElements = getFocusableElements(container);
@@ -53,7 +126,11 @@ export function trapFocus(container) {
         container.removeEventListener('keydown', handleKeydown);
     };
 }
-/** One entry per overlay open; `returnFocus` pops LIFO (nested modals). */
+/**
+ * One entry per overlay open; `returnFocus` pops LIFO (nested modals). The id
+ * is kept beside the element: the element may be gone by the time the overlay
+ * closes, replaced by another that carries the same id.
+ */
 const focusReturnStack = [];
 export function saveFocus() {
     if (typeof document === 'undefined') {
@@ -61,22 +138,31 @@ export function saveFocus() {
     }
     const active = document.activeElement;
     if (active instanceof HTMLElement && active !== document.body) {
-        focusReturnStack.push(active);
+        focusReturnStack.push({ element: active, id: active.id });
     }
     else {
         focusReturnStack.push(null);
     }
 }
-/** Restores focus from the last `saveFocus`. Skips disconnected or unfocusable nodes. */
+/**
+ * Restores focus from the last `saveFocus`. If that element has left the
+ * document, the element that now has its id takes the focus instead (a
+ * dropzone swapped for its Change button, say); with neither, nothing happens.
+ */
 export function returnFocus() {
     if (typeof document === 'undefined') {
         return;
     }
-    const el = focusReturnStack.pop();
-    if (!el) {
+    const saved = focusReturnStack.pop();
+    if (!saved) {
         return;
     }
-    if (typeof el.focus !== 'function' || !el.isConnected) {
+    const el = saved.element.isConnected
+        ? saved.element
+        : saved.id
+            ? document.getElementById(saved.id)
+            : null;
+    if (!el || typeof el.focus !== 'function') {
         return;
     }
     try {
@@ -86,9 +172,100 @@ export function returnFocus() {
         /* embeds / shadow roots may reject programmatic focus */
     }
 }
-export function focusFirstElement(container) {
+/**
+ * Moves focus into an overlay: to its first focusable element, or to the
+ * container itself when it has none (give the container `tabindex="-1"`), so
+ * focus never stays on the opener behind the backdrop.
+ *
+ * `preferred` is a CSS selector, looked up inside the container: the matching
+ * control takes focus instead of the first one, if it can take focus.
+ */
+export function focusFirstElement(container, preferred) {
     const focusableElements = getFocusableElements(container);
-    if (focusableElements.length > 0) {
-        focusableElements[0].focus();
+    const wanted = preferred
+        ? focusableElements.find((element) => element.matches(preferred))
+        : undefined;
+    (wanted ?? focusableElements[0] ?? container).focus();
+}
+/** Open modal overlays, oldest first. The last one is the one on top. */
+const overlayStack = [];
+/**
+ * Joins the stack of open modal overlays (Modal, SlideUp, a drawer).
+ *
+ * Every overlay shares one z-index, so without this the paint order is the
+ * DOM order, and an overlay opened later but placed earlier in the document
+ * opens behind the first. `depth` is 0 for the first overlay and one more than
+ * the highest open one after that: put it on the overlay root as
+ * `z-index: calc(var(--z-modal) + depth)`.
+ *
+ * `panel` is the element with the dialog role. Call this when the overlay
+ * opens, in the browser, and `leave()` when it closes.
+ */
+export function joinOverlayStack(panel) {
+    const depth = overlayStack.reduce((max, entry) => Math.max(max, entry.depth + 1), 0);
+    const entry = { panel, depth };
+    overlayStack.push(entry);
+    return {
+        depth,
+        leave() {
+            const index = overlayStack.indexOf(entry);
+            if (index !== -1)
+                overlayStack.splice(index, 1);
+        },
+    };
+}
+/** Whether `panel` is the overlay on top of the stack: the one opened last. */
+export function isTopOverlay(panel) {
+    return overlayStack[overlayStack.length - 1]?.panel === panel;
+}
+/**
+ * Keeps a modal overlay in charge of the keyboard when focus has left it
+ * without a Tab: the focused control was disabled or removed and the browser
+ * dropped focus on `<body>`, where the overlay's own key handlers never hear
+ * the key, and Tab would walk the page behind it.
+ *
+ * While installed, a Tab pressed with focus outside every dialog moves focus
+ * to the first focusable element of `container` (or to `container` itself),
+ * and Escape calls `onEscape`. Only the overlay on top of the stack acts (the
+ * one opened last), so every open overlay can install its own. An overlay that
+ * has not called `joinOverlayStack` is added to the stack for as long as the
+ * recovery is installed.
+ *
+ * `container` is the panel with `role="dialog"` or `"alertdialog"` and
+ * `aria-modal="true"`. Call it when the overlay opens, in the browser, and call
+ * the returned function when it closes.
+ */
+export function recoverStrayFocus(container, options = {}) {
+    const joined = overlayStack.some((entry) => entry.panel === container)
+        ? null
+        : joinOverlayStack(container);
+    function handleKeydown(event) {
+        if (event.defaultPrevented)
+            return;
+        if (event.key !== 'Tab' && event.key !== 'Escape')
+            return;
+        // Inside a dialog, that dialog's own handlers deal with the key.
+        if (document.activeElement?.closest(DIALOG_SELECTOR))
+            return;
+        if (overlayStack[overlayStack.length - 1]?.panel !== container)
+            return;
+        // In a toast: part of the trap. Tab goes on through the toasts and
+        // back into the overlay; Escape is the toast region's own business.
+        if (document.activeElement?.closest(TOAST_REGION_SELECTOR)) {
+            if (event.key === 'Tab')
+                cycleTrappedFocus(container, event);
+            return;
+        }
+        event.preventDefault();
+        if (event.key === 'Escape') {
+            options.onEscape?.(event);
+            return;
+        }
+        (getFocusableElements(container)[0] ?? container).focus();
     }
+    document.addEventListener('keydown', handleKeydown);
+    return () => {
+        document.removeEventListener('keydown', handleKeydown);
+        joined?.leave();
+    };
 }

package/dist/util/hydration.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Controls that keep what a visitor chose before the page hydrated.
+ *
+ * A server-rendered page can be used before its scripts arrive: a checkbox
+ * can be ticked, a radio chosen. A component that writes `checked={…}` from
+ * its own state and listens for `change` loses that on hydration: Svelte sets
+ * `checked` from the state, which still says nothing was chosen.
+ *
+ * Svelte's own bindings do not. `bind:checked` and `bind:group` know when
+ * they run during hydration, compare the input with the markup the server
+ * sent (`defaultChecked`), and where they differ hand the input's state to
+ * the binding instead of overwriting it. They also put the binding back on a
+ * form reset. So the controls bind, and what they bind to is an accessor of
+ * their own: the place where a choice is taken in, by whatever road it came.
+ *
+ * `bind:group` takes only an identifier or a member expression, which is why
+ * this is an object with a `value` and not a pair of functions.
+ */
+/** What Svelte hands a group binding when no radio is checked: after a reset, or when hydration finds none. */
+export type NoChoice = null | undefined;
+/**
+ * The target of a radio's `bind:group={binding.value}`.
+ *
+ * `read` gives the chosen value; a radio is checked while its own value is
+ * that. `choose` is called when a radio was picked: by the user, or before
+ * hydration. `restore` is called with nothing chosen: a form is being reset
+ * (see `resetValueOf` for what to go back to).
+ */
+export declare function groupBinding<T>(read: () => T | NoChoice, choose: (value: T) => void, restore: () => void): {
+    value: T | NoChoice;
+};
+/**
+ * The value a group of radios goes back to on a form reset: that of the one
+ * whose `checked` attribute is set, in the type the component's options have
+ * (Svelte keeps it on the input as `__value`), or `undefined` when none is.
+ *
+ * It reads the attribute (`defaultChecked`), not `checked`: Svelte calls a
+ * binding's reset handler in a microtask after the `reset` event, and when a
+ * user pressed the reset button that is before the browser has reset
+ * anything. Svelte takes the `checked` attribute off a bound input once it
+ * has hydrated, so in practice a reset empties the group, as it does a bound
+ * native input.
+ */
+export declare function resetValueOf<T>(inputs: Iterable<HTMLInputElement | undefined>): T | undefined;

package/dist/util/hydration.js

@@ -0,0 +1,58 @@
+/**
+ * Controls that keep what a visitor chose before the page hydrated.
+ *
+ * A server-rendered page can be used before its scripts arrive: a checkbox
+ * can be ticked, a radio chosen. A component that writes `checked={…}` from
+ * its own state and listens for `change` loses that on hydration: Svelte sets
+ * `checked` from the state, which still says nothing was chosen.
+ *
+ * Svelte's own bindings do not. `bind:checked` and `bind:group` know when
+ * they run during hydration, compare the input with the markup the server
+ * sent (`defaultChecked`), and where they differ hand the input's state to
+ * the binding instead of overwriting it. They also put the binding back on a
+ * form reset. So the controls bind, and what they bind to is an accessor of
+ * their own: the place where a choice is taken in, by whatever road it came.
+ *
+ * `bind:group` takes only an identifier or a member expression, which is why
+ * this is an object with a `value` and not a pair of functions.
+ */
+/**
+ * The target of a radio's `bind:group={binding.value}`.
+ *
+ * `read` gives the chosen value; a radio is checked while its own value is
+ * that. `choose` is called when a radio was picked: by the user, or before
+ * hydration. `restore` is called with nothing chosen: a form is being reset
+ * (see `resetValueOf` for what to go back to).
+ */
+export function groupBinding(read, choose, restore) {
+    return {
+        get value() {
+            return read();
+        },
+        set value(next) {
+            if (next === null || next === undefined)
+                restore();
+            else
+                choose(next);
+        },
+    };
+}
+/**
+ * The value a group of radios goes back to on a form reset: that of the one
+ * whose `checked` attribute is set, in the type the component's options have
+ * (Svelte keeps it on the input as `__value`), or `undefined` when none is.
+ *
+ * It reads the attribute (`defaultChecked`), not `checked`: Svelte calls a
+ * binding's reset handler in a microtask after the `reset` event, and when a
+ * user pressed the reset button that is before the browser has reset
+ * anything. Svelte takes the `checked` attribute off a bound input once it
+ * has hydrated, so in practice a reset empties the group, as it does a bound
+ * native input.
+ */
+export function resetValueOf(inputs) {
+    for (const input of inputs) {
+        if (input?.defaultChecked)
+            return input.__value;
+    }
+    return undefined;
+}

package/dist/util/keyboard-inset.d.ts

@@ -0,0 +1,17 @@
+/**
+ * How much of the bottom of the page the on-screen keyboard covers.
+ *
+ * Browsers disagree on what a keyboard does. Some shrink the layout viewport,
+ * and everything pinned to the bottom moves up by itself. Others (iOS Safari,
+ * and Chrome on Android by default) leave the layout alone and only shrink
+ * the *visual* viewport, so a bar pinned to the bottom ends up behind the
+ * keyboard. The difference between the two viewports is the part to lift a
+ * bar by; where the layout has already shrunk, it is 0.
+ */
+/** The covered height in px, or 0 where it cannot be told (the server, an old browser). */
+export declare function readKeyboardInset(): number;
+/**
+ * Calls `onChange` with the inset now, and again whenever it changes. Call it
+ * in the browser; the returned function stops it.
+ */
+export declare function watchKeyboardInset(onChange: (inset: number) => void): () => void;

package/dist/util/keyboard-inset.js

@@ -0,0 +1,53 @@
+/**
+ * How much of the bottom of the page the on-screen keyboard covers.
+ *
+ * Browsers disagree on what a keyboard does. Some shrink the layout viewport,
+ * and everything pinned to the bottom moves up by itself. Others (iOS Safari,
+ * and Chrome on Android by default) leave the layout alone and only shrink
+ * the *visual* viewport, so a bar pinned to the bottom ends up behind the
+ * keyboard. The difference between the two viewports is the part to lift a
+ * bar by; where the layout has already shrunk, it is 0.
+ */
+/** The covered height in px, or 0 where it cannot be told (the server, an old browser). */
+export function readKeyboardInset() {
+    if (typeof window === "undefined")
+        return 0;
+    const viewport = window.visualViewport;
+    if (!viewport)
+        return 0;
+    // Pinch zoom shrinks the visual viewport too, and is not a keyboard.
+    if (Math.abs(viewport.scale - 1) > 0.01)
+        return 0;
+    const layoutHeight = document.documentElement.clientHeight;
+    const inset = layoutHeight - viewport.height - viewport.offsetTop;
+    // A pixel of rounding is not a keyboard either.
+    return inset > 1 ? Math.round(inset) : 0;
+}
+/**
+ * Calls `onChange` with the inset now, and again whenever it changes. Call it
+ * in the browser; the returned function stops it.
+ */
+export function watchKeyboardInset(onChange) {
+    if (typeof window === "undefined")
+        return () => { };
+    const viewport = window.visualViewport;
+    let last = -1;
+    const update = () => {
+        const next = readKeyboardInset();
+        if (next === last)
+            return;
+        last = next;
+        onChange(next);
+    };
+    update();
+    if (!viewport)
+        return () => { };
+    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);
+    };
+}

package/dist/util/map-view.d.ts

@@ -0,0 +1,143 @@
+/**
+ * Public types and pure helpers for `MapView`.
+ *
+ * Which markers become one count marker is worked out here, on pixels, so it
+ * can be tested without a browser or the map library. Nothing in this file
+ * imports MapLibre: `mapViewSupported()` can be asked before the library is
+ * loaded, and the library's own types stay out of the package's.
+ */
+export type MapPointKey = string | number;
+/** A place on the map. */
+export interface MapLngLat {
+    lng: number;
+    lat: number;
+}
+/** One marker. */
+export interface MapPoint extends MapLngLat {
+    /** Stable identity. */
+    id: MapPointKey;
+    /** The marker's accessible name, written by the app. */
+    label: string;
+    /** Drawn filled, with a check mark; left out or false, round and outlined. */
+    checked?: boolean;
+}
+/** Room kept clear at the edges of the map, in px: a sheet over its lower part is a `bottom`. */
+export interface MapInset {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+/**
+ * Where the map stands:
+ * - `loading`: the library or the first style is on its way;
+ * - `ready`: the map has drawn;
+ * - `library-error`: the map library could not be loaded or started (no WebGL, a failed chunk);
+ * - `tiles-error`: the style could not be fetched, or tiles failed and none has arrived (offline).
+ */
+export type MapViewStatus = "loading" | "ready" | "library-error" | "tiles-error";
+/** Payload of MapView's `onmove`: where the map is after a move has ended. */
+export interface MapViewPosition {
+    center: MapLngLat;
+    zoom: number;
+}
+/** Every built-in string of MapView. Pass a partial object to `strings` to translate. */
+export interface MapViewStrings {
+    /** Accessible name of the map. */
+    label: string;
+    /** Accessible name of a marker that stands for several points. */
+    cluster: (count: number) => string;
+    /** Accessible name of the dot at the viewer's own position. */
+    viewer: string;
+}
+export declare const MAP_VIEW_STRINGS: MapViewStrings;
+/** A marker's tap area, in px. It does not grow with the text size. */
+export declare const MAP_MARKER_TAP = 44;
+/** The closest the opening fit zooms in, so one marker does not fill the screen: street level. */
+export declare const MAP_FIT_MAX_ZOOM = 16;
+/**
+ * Whether this browser can draw the map: it has WebGL. Safe on the server
+ * (false) and cheap: it does not load the map library.
+ */
+export declare function mapViewSupported(): boolean;
+export interface MapPixel {
+    x: number;
+    y: number;
+}
+/** What is drawn: one point, or several under one count marker. */
+export interface MapMarker<T> {
+    /** The key of its first point in the list: the marker keeps its element, and the focus, while others join or leave it. */
+    key: MapPointKey;
+    /** Its points, in the order of the list. */
+    points: T[];
+    /** Place in the list of its first point: the marker's place in the tab order. */
+    order: number;
+    /** Where it is drawn: the middle of its points. */
+    x: number;
+    y: number;
+}
+/**
+ * Groups points whose tap areas overlap into one marker, and goes on until no
+ * two markers overlap: a count marker sits in the middle of its points, which
+ * may bring it over a neighbour. Markers come back in the order of the list,
+ * each at the place of its first point.
+ *
+ * `pixels[i]` is where `points[i]` is on the screen. The result depends only
+ * on how far apart the points are, so a pan changes nothing and a pinch splits
+ * markers as they stop overlapping.
+ */
+export declare function clusterMarkers<T extends {
+    id: MapPointKey;
+}>(points: readonly T[], pixels: readonly MapPixel[], tap?: number): MapMarker<T>[];
+/** The corners of the box around `points`, or null with none. */
+export declare function boundsOf(points: readonly MapLngLat[]): [[number, number], [number, number]] | null;
+/** Changes when a point is added, taken away or moved, and not when only its name or its check does. */
+export declare function pointsSignature(points: readonly MapPoint[]): string;
+/**
+ * How far from the middle of the map the middle of the area inside `inset`
+ * is, in px: where a point is put so that it is in view above a sheet.
+ */
+export declare function insetOffset(inset: MapInset | undefined): MapPixel;
+/** The words of an attribution the style carries as HTML, as plain text. */
+export declare function attributionText(html: string): string;
+/**
+ * The part of MapLibre GL JS that MapView uses, written out here so that the
+ * package's types do not need the library's.
+ */
+export interface MapLibreMapLike {
+    on(type: string, listener: (event: any) => void): unknown;
+    off(type: string, listener: (event: any) => void): unknown;
+    remove(): void;
+    resize(): unknown;
+    jumpTo(options: {
+        center?: [number, number] | MapLngLat;
+        zoom?: number;
+    }): unknown;
+    cameraForBounds(bounds: [[number, number], [number, number]], options?: {
+        padding?: number;
+        maxZoom?: number;
+    }): {
+        center?: unknown;
+        zoom?: number;
+    } | undefined;
+    project(lngLat: [number, number]): MapPixel;
+    unproject(point: [number, number]): MapLngLat;
+    getCenter(): MapLngLat;
+    getZoom(): number;
+    setStyle(style: string | object): unknown;
+    getStyle(): {
+        sources?: Record<string, {
+            attribution?: string;
+        }>;
+    } | undefined;
+    getSource?(id: string): {
+        attribution?: string;
+    } | undefined;
+    getCanvas(): HTMLCanvasElement;
+    touchZoomRotate?: {
+        disableRotation(): void;
+    };
+}
+export interface MapLibreLike {
+    Map: new (options: Record<string, unknown>) => MapLibreMapLike;
+}

package/dist/util/map-view.js

@@ -0,0 +1,121 @@
+/**
+ * Public types and pure helpers for `MapView`.
+ *
+ * Which markers become one count marker is worked out here, on pixels, so it
+ * can be tested without a browser or the map library. Nothing in this file
+ * imports MapLibre: `mapViewSupported()` can be asked before the library is
+ * loaded, and the library's own types stay out of the package's.
+ */
+export const MAP_VIEW_STRINGS = {
+    label: "Map",
+    cluster: (count) => `${count} places`,
+    viewer: "Your position",
+};
+/** A marker's tap area, in px. It does not grow with the text size. */
+export const MAP_MARKER_TAP = 44;
+/** The closest the opening fit zooms in, so one marker does not fill the screen: street level. */
+export const MAP_FIT_MAX_ZOOM = 16;
+/**
+ * Whether this browser can draw the map: it has WebGL. Safe on the server
+ * (false) and cheap: it does not load the map library.
+ */
+export function mapViewSupported() {
+    if (typeof document === "undefined")
+        return false;
+    try {
+        const canvas = document.createElement("canvas");
+        return !!(canvas.getContext("webgl2") ?? canvas.getContext("webgl"));
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Groups points whose tap areas overlap into one marker, and goes on until no
+ * two markers overlap: a count marker sits in the middle of its points, which
+ * may bring it over a neighbour. Markers come back in the order of the list,
+ * each at the place of its first point.
+ *
+ * `pixels[i]` is where `points[i]` is on the screen. The result depends only
+ * on how far apart the points are, so a pan changes nothing and a pinch splits
+ * markers as they stop overlapping.
+ */
+export function clusterMarkers(points, pixels, tap = MAP_MARKER_TAP) {
+    let groups = points.map((_, index) => ({
+        members: [index],
+        x: pixels[index].x,
+        y: pixels[index].y,
+    }));
+    let merged = true;
+    while (merged) {
+        merged = false;
+        const next = [];
+        for (const group of groups) {
+            const into = next.find((other) => Math.abs(other.x - group.x) < tap && Math.abs(other.y - group.y) < tap);
+            if (!into) {
+                next.push(group);
+                continue;
+            }
+            into.members = [...into.members, ...group.members];
+            into.x = into.members.reduce((sum, index) => sum + pixels[index].x, 0) / into.members.length;
+            into.y = into.members.reduce((sum, index) => sum + pixels[index].y, 0) / into.members.length;
+            merged = true;
+        }
+        groups = next;
+    }
+    return groups
+        .map((group) => {
+        const members = [...group.members].sort((a, b) => a - b);
+        return {
+            key: points[members[0]].id,
+            points: members.map((index) => points[index]),
+            order: members[0],
+            x: group.x,
+            y: group.y,
+        };
+    })
+        .sort((a, b) => a.order - b.order);
+}
+/** The corners of the box around `points`, or null with none. */
+export function boundsOf(points) {
+    if (points.length === 0)
+        return null;
+    let west = Infinity;
+    let south = Infinity;
+    let east = -Infinity;
+    let north = -Infinity;
+    for (const point of points) {
+        west = Math.min(west, point.lng);
+        east = Math.max(east, point.lng);
+        south = Math.min(south, point.lat);
+        north = Math.max(north, point.lat);
+    }
+    return [
+        [west, south],
+        [east, north],
+    ];
+}
+/** Changes when a point is added, taken away or moved, and not when only its name or its check does. */
+export function pointsSignature(points) {
+    return points.map((point) => `${point.id}:${point.lng}:${point.lat}`).join("|");
+}
+/**
+ * How far from the middle of the map the middle of the area inside `inset`
+ * is, in px: where a point is put so that it is in view above a sheet.
+ */
+export function insetOffset(inset) {
+    return {
+        x: ((inset?.left ?? 0) - (inset?.right ?? 0)) / 2,
+        y: ((inset?.top ?? 0) - (inset?.bottom ?? 0)) / 2,
+    };
+}
+/** The words of an attribution the style carries as HTML, as plain text. */
+export function attributionText(html) {
+    return html
+        .replace(/<[^>]*>/g, " ")
+        .replace(/&copy;/g, "©")
+        .replace(/&amp;/g, "&")
+        .replace(/&nbsp;/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+}