@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/dist/legend/root/legend-root.js

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { commaList, customElement, HelixBeforeChangeEvent, HelixElement, requestChange, SourceController, seriesIndex, } from '@fusion.dev/helix-core';
+import { commaList, customElement, HelixBeforeChangeEvent, HelixElement, KeyboardNavigationController, requestChange, SourceController, seriesIndex, seriesKey, typeaheadBy, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { isHidden, toggledNames } from '../hidden-series.js';
 let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     constructor() {
@@ -16,25 +16,58 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         this.label = '';
         this.toggles = false;
         this.source = new SourceController(this);
-        this.wrote = false;
+        this.stop = 0;
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.toggles
+                ? [...this.renderRoot.querySelectorAll('[part="toggle"]')].map((button) => ({
+                    contains: (node) => button.contains(node),
+                    disabled: false,
+                    focusItem: () => button.focus(),
+                    select: () => { },
+                    selected: false,
+                    words: button.textContent?.trim() ?? '',
+                }))
+                : [],
+            origin: 'focus',
+            selects: () => false,
+            typeahead: typeaheadBy((item) => item.words ?? ''),
+        });
+        this.wroteTo = null;
+        this.writes = false;
     }
     willUpdate(changed) {
         if (changed.has('for')) {
             this.source.watch();
         }
+        const table = this.source.element;
+        const asked = changed.has('hiddenSeries') &&
+            !(changed.get('hiddenSeries') === undefined && this.hiddenSeries === '');
+        this.writes = asked || (table !== null && table !== this.wroteTo && this.hiddenSeries !== '');
+        if (!this.writes && table !== null) {
+            this.follow();
+        }
+    }
+    follow() {
+        const hidden = this.source.hidden;
+        const now = commaList(this.hiddenSeries);
+        const next = this.names().filter((name) => hidden.has(seriesKey(name)));
+        const same = next.length === now.length &&
+            next.every((name) => now.some((one) => seriesKey(one) === seriesKey(name)));
+        if (!same) {
+            this.hiddenSeries = next.join(', ');
+        }
     }
     updated(changed) {
         super.updated(changed);
-        const names = commaList(this.hiddenSeries);
-        if (names.length > 0 || this.wrote) {
-            this.source.hide(names);
-            this.wrote = names.length > 0;
+        if (this.writes) {
+            this.writes = false;
+            this.wroteTo = this.source.hide(commaList(this.hiddenSeries), this.names()) ?? this.wroteTo;
         }
     }
     disconnectedCallback() {
-        if (this.wrote) {
-            this.source.hide([]);
-            this.wrote = false;
+        if (this.wroteTo !== null) {
+            this.source.hide([], this.names());
+            this.wroteTo = null;
         }
         super.disconnectedCallback();
     }
@@ -58,8 +91,10 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     }
     render() {
         const named = this.label || this.source.element?.querySelector('caption')?.textContent?.trim();
+        const names = this.names();
+        const stop = Math.min(this.stop, names.length - 1);
         return html `<ul aria-label=${named || nothing} part="list" role="list">
-      ${this.names().map((name, index) => {
+      ${names.map((name, index) => {
             const off = isHidden(this.hiddenSeries, name);
             return html `<li
           data-series=${seriesIndex(index)}
@@ -67,17 +102,21 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
           style="--chart-series: var(--chart-series-${seriesIndex(index)})"
           role="listitem"
         >
-          ${this.toggles ? this.renderToggle(name, off) : html `<span part="name">${name}</span>`}
+          ${this.toggles ? this.renderToggle(name, off, index, index === stop) : html `<span part="name">${name}</span>`}
         </li>`;
         })}
     </ul>`;
     }
-    renderToggle(name, off) {
+    renderToggle(name, off, index = 0, holds = true) {
         return html `<button
       aria-pressed=${off ? 'false' : 'true'}
       part="toggle"
+      tabindex=${holds ? '0' : '-1'}
       type="button"
       @click=${() => this.toggle(name)}
+      @focus=${() => {
+            this.stop = index;
+        }}
     >
       <span part="name">${name}</span>
     </button>`;
@@ -98,6 +137,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLegend.prototype, "toggles", void 0);
+__decorate([
+    state()
+], HelixHeadlessLegend.prototype, "stop", void 0);
 HelixHeadlessLegend = __decorate([
     customElement('helix-headless-legend')
 ], HelixHeadlessLegend);

package/dist/lightbox/root/lightbox-root.d.ts

@@ -19,9 +19,18 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * focus stays in the dialog.
  *
  * Set `controls` for the viewer's own previous, next and close controls, named
- * by `previous-label`, `next-label` and `dismiss-label`. Without it, compose the
- * chrome yourself in the `header` and `footer` slots, with buttons that send
- * `--previous`, `--next` and `--close`.
+ * by `previous-label`, `next-label` and `dismiss-label`, whose glyphs you can
+ * replace in the `previous-icon`, `next-icon` and `dismiss-icon` slots. Without
+ * it, compose the chrome yourself in the `header` and `footer` slots, with
+ * buttons that send `--previous`, `--next` and `--close`.
+ *
+ * **Set `max-zoom` to let a reader zoom into the shown item**, such as `3`.
+ * Two fingers pinch it, a double click or a double tap zooms all the way in
+ * about the point pressed and back out, and once zoomed one pointer drags it
+ * about. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
+ * The scale and the offset are on the `viewport` part as `--lightbox-zoom`,
+ * `--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a
+ * swipe moves to the next item only while the item is at its own size.
  *
  * Each item is a slide: a `group` with the role description in
  * `slide-role-label`, named by its `label` or by `slide-label`. A touch or a pen
@@ -41,8 +50,11 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @documentation https://fusion.dev/helix/components/lightbox
  *
  * @slot - The items, which are `<helix-headless-lightbox-item>` elements.
+ * @slot dismiss-icon - Replaces the glyph inside the close control.
  * @slot footer - Content below the item, such as a counter or a thumbnail strip.
  * @slot header - Content above the item, such as a title and a close button.
+ * @slot next-icon - Replaces the glyph inside the next control.
+ * @slot previous-icon - Replaces the glyph inside the previous control.
  *
  * @event {Event} close - Fired when the viewer closes. The component dispatches it again from the host, because the dialog's own event does not leave the shadow root.
  * @event {HelixActivateEvent} helix-activate - Fired after the shown item changes, when the element already holds the new item.
@@ -51,19 +63,26 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the viewer opens. Cancelable.
  * @event {ToggleEvent} toggle - Fired when the viewer opens or closes, with `newState` and `oldState`.
  *
+ * @csspart counter - The place of the shown item in the set, drawn with `counter`.
  * @csspart dialog - The native dialog element.
  * @csspart dismiss - The close control, drawn with `controls`.
- * @csspart dismiss-mark - The glyph on the close control.
+ * @csspart dismiss-mark - The glyph on the close control, where none is slotted.
  * @csspart live - The live region that announces which item is shown.
  * @csspart next - The control that shows the next item, drawn with `controls`.
- * @csspart next-mark - The glyph on the next control.
+ * @csspart next-mark - The glyph on the next control, where none is slotted.
  * @csspart previous - The control that shows the previous item, drawn with `controls`.
- * @csspart previous-mark - The glyph on the previous control.
+ * @csspart previous-mark - The glyph on the previous control, where none is slotted.
  * @csspart viewport - The box the current item is shown in.
  *
+ * @cssproperty --lightbox-pan-x - How far the zoomed item is moved across from the middle of the viewport, in pixels, toward the right. Written only while zoomed.
+ * @cssproperty --lightbox-pan-y - How far the zoomed item is moved down from the middle of the viewport, in pixels. Written only while zoomed.
+ * @cssproperty --lightbox-zoom - The scale the shown item is zoomed to, such as `2`. Written only while zoomed.
+ *
  * @cssstate fullscreen - While the viewer fills the screen.
  * @cssstate idle - The user has been still long enough for the controls to hide.
  * @cssstate open - While the viewer is open.
+ * @cssstate zoomable - While `max-zoom` lets a reader zoom.
+ * @cssstate zoomed - While the shown item is zoomed past its own size.
  */
 export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     /**
@@ -75,6 +94,13 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * either end of a set that does not `loop`.
      */
     controls: boolean;
+    /**
+     * Draws the place of the shown item in the set over the picture, in the
+     * words of `status-label`, such as "2 of 5". It hides with the controls while
+     * the reader is idle. Screen readers hear the place from the live region, so
+     * the drawn copy is hidden from them.
+     */
+    counter: boolean;
     /**
      * The close control's accessible name. Translate it with the rest of your
      * interface.
@@ -97,6 +123,11 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * Whether moving past the last item returns to the first.
      */
     loop: boolean;
+    /**
+     * How far a reader can zoom into the shown item, as a scale, such as `3`.
+     * `1`, the default, turns zooming off.
+     */
+    maxZoom: number;
     /**
      * The next control's accessible name.
      */
@@ -132,6 +163,14 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     /** What the live region is currently saying. */
     private announcement;
     protected readonly swipes: SwipeController;
+    private readonly zoomer;
+    /** Writes the zoom on the viewport, and nothing at the item's own size. */
+    private drawZoom;
+    /**
+     * Zooms the shown item to `scale`, held between `1` and `max-zoom`, about
+     * the middle of the viewport.
+     */
+    zoomTo(scale: number): void;
     private readonly fullscreen;
     private readonly idle;
     /**
@@ -202,6 +241,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * a reader having no way to know which one this component thinks it is.
      */
     private readonly handleKeydown;
+    /** `+` and `-` zoom in and out by half again, and `0` puts the item back. Returns whether it was one. */
+    private zoomKey;
     /** Home and End, which are an index rather than a step. */
     private toEnd;
     /** The item on screen: the one `active` names, or the first where it names none. */
@@ -236,6 +277,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * every page load.
      */
     private say;
+    /** The shown item's place in the set, in the words of `status-label`. */
+    private place;
     protected render(): TemplateResult;
     /**
      * The viewer's own controls, behind a seam a tier above can move.

package/dist/lightbox/root/lightbox-root.js

@@ -4,20 +4,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CommandController, customElement, deepActiveElement, deepContains, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, } from '@fusion.dev/helix-core';
-import { caretLeft, caretRight, x } from '@fusion.dev/helix-icons';
+import { CommandController, customElement, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, } from '@fusion.dev/helix-core';
+import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { HelixHeadlessLightboxItem } from '../item/lightbox-item.js';
+import { ZoomController } from '../zoom-controller.js';
 let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerActive(MixinControllerOpen(HelixElement)) {
     constructor() {
         super(...arguments);
         this.controls = false;
+        this.counter = false;
         this.dismissLabel = 'Close';
         this.idleDelay = 0;
         this.label = '';
         this.loop = false;
+        this.maxZoom = 1;
         this.nextLabel = 'Next';
         this.previousLabel = 'Previous';
         this.slideLabel = '{index} of {count}';
@@ -27,8 +30,11 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.filled = false;
         this.announcement = '';
         this.swipes = new SwipeController(this, {
-            axis: () => (this.open ? 'x' : undefined),
+            axis: () => (this.open && !this.zoomer.engaged ? 'x' : undefined),
             end: (dx, _dy, vx) => {
+                if (this.zoomer.pinched) {
+                    return;
+                }
                 const width = this.partNamed('viewport')?.getBoundingClientRect().width ?? 0;
                 const step = swipeStep(dx, vx, width, isRtl(this));
                 if (step !== 0) {
@@ -39,6 +45,11 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             start: (_target, event) => event.pointerType !== 'mouse',
             surface: () => this.dialog,
         });
+        this.zoomer = new ZoomController(this, {
+            max: () => (this.open ? this.maxZoom : 1),
+            onChange: (scale, pan) => this.drawZoom(scale, pan),
+            surface: () => this.partNamed('viewport'),
+        });
         this.fullscreen = new FullscreenController(this, (full) => {
             this.filled = full;
         });
@@ -70,6 +81,10 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             if (keyClaimed(event) || event.altKey || event.ctrlKey || event.metaKey) {
                 return;
             }
+            if (this.zoomKey(event.key)) {
+                event.preventDefault();
+                return;
+            }
             const along = inlineStep(this, event.key);
             if (along === 1 || event.key === 'ArrowDown') {
                 event.preventDefault();
@@ -103,6 +118,18 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.requestOpen(false);
         };
     }
+    drawZoom(scale, pan) {
+        const viewport = this.partNamed('viewport');
+        const zoomed = scale > 1;
+        viewport?.style.setProperty('--lightbox-zoom', zoomed ? String(scale) : '');
+        viewport?.style.setProperty('--lightbox-pan-x', zoomed ? `${Math.round(pan.x)}px` : '');
+        viewport?.style.setProperty('--lightbox-pan-y', zoomed ? `${Math.round(pan.y)}px` : '');
+        this.toggleState('zoomed', zoomed);
+        this.idle.stir();
+    }
+    zoomTo(scale) {
+        this.zoomer.zoomTo(scale);
+    }
     chromeHasFocus() {
         const active = deepActiveElement();
         const own = this.shadowRoot?.activeElement?.matches('[part="previous"], [part="next"], [part="dismiss"]');
@@ -147,6 +174,25 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.requestActive(target.value);
         }
     }
+    zoomKey(key) {
+        if (this.maxZoom <= 1) {
+            return false;
+        }
+        const scale = this.zoomer.scale;
+        if (key === '+' || key === '=') {
+            this.zoomer.zoomTo(scale * 1.5);
+        }
+        else if (key === '-') {
+            this.zoomer.zoomTo(scale / 1.5);
+        }
+        else if (key === '0') {
+            this.zoomer.reset();
+        }
+        else {
+            return false;
+        }
+        return true;
+    }
     toEnd(at) {
         const target = this.items[at];
         if (target && target !== this.shown) {
@@ -161,6 +207,10 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         hostAria(this.internals, { label: this.label });
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
+        this.toggleState('zoomable', this.maxZoom > 1);
+        if (changed.has('active') || (changed.has('open') && !this.open)) {
+            this.zoomer.reset();
+        }
         this.say(changed);
     }
     disconnectedCallback() {
@@ -230,6 +280,17 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
                     label: current.label,
                 });
     }
+    place() {
+        const items = this.items;
+        const current = resolveActiveItem(this.active, items);
+        return current
+            ? fillTemplate(this.statusLabel, {
+                count: items.length,
+                index: items.indexOf(current) + 1,
+                label: current.label,
+            })
+            : '';
+    }
     render() {
         return html `<dialog
       part="dialog"
@@ -250,6 +311,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
       </div>
       <slot name="footer"></slot>
       ${this.controls ? this.renderControls() : nothing}
+      ${this.counter ? html `<span part="counter" aria-hidden="true">${this.place()}</span>` : nothing}
       <span part="live" role="status" aria-live="polite">${this.announcement || nothing}</span>
     </dialog>`;
     }
@@ -261,9 +323,11 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         aria-disabled=${this.atEnd(-1) ? 'true' : nothing}
         @click=${() => this.previous()}
       >
-        <svg part="previous-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
-          ${unsafeSVG(caretLeft.content)}
-        </svg>
+        <slot name="previous-icon">
+          <svg part="previous-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+            ${unsafeSVG(caretLeft.content)}
+          </svg>
+        </slot>
       </button>
       <button
         part="next"
@@ -272,25 +336,25 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         aria-disabled=${this.atEnd(1) ? 'true' : nothing}
         @click=${() => this.next()}
       >
-        <svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
-          ${unsafeSVG(caretRight.content)}
-        </svg>
+        <slot name="next-icon">
+          <svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+            ${unsafeSVG(caretRight.content)}
+          </svg>
+        </slot>
       </button>
-      <button
-        part="dismiss"
-        type="button"
-        aria-label=${this.dismissLabel}
-        @click=${() => this.close()}
-      >
-        <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">
-          ${unsafeSVG(x.content)}
-        </svg>
-      </button>`;
+      ${drawDismiss({
+            label: this.dismissLabel,
+            mark: html `<slot name="dismiss-icon">${drawDismissGlyph()}</slot>`,
+            onDismiss: () => this.close(),
+        })}`;
     }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLightbox.prototype, "controls", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessLightbox.prototype, "counter", void 0);
 __decorate([
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessLightbox.prototype, "dismissLabel", void 0);
@@ -303,6 +367,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLightbox.prototype, "loop", void 0);
+__decorate([
+    property({ attribute: 'max-zoom', type: Number })
+], HelixHeadlessLightbox.prototype, "maxZoom", void 0);
 __decorate([
     property({ attribute: 'next-label' })
 ], HelixHeadlessLightbox.prototype, "nextLabel", void 0);

package/dist/lightbox/zoom-controller.d.ts

@@ -0,0 +1,59 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { type Offset } from './zoom.js';
+export interface ZoomOptions {
+    /** The most the item may grow, as a scale. 1 or less turns zooming off. */
+    max: () => number;
+    /** Told every time the scale or the position changes. */
+    onChange: (scale: number, pan: Offset) => void;
+    /** The box the item is shown in, which presses must land in and the item scales from the middle of. */
+    surface: () => HTMLElement | null | undefined;
+}
+/**
+ * Pinch, double press and drag to zoom into the item a viewer shows, and to
+ * move about it once zoomed.
+ *
+ * Two fingers scale the item about the point between them. A double press, a
+ * double click or a double tap, zooms all the way in about the point pressed,
+ * and back out again. One pointer dragged across a zoomed item moves it, never
+ * so far that an edge comes inside the box. What it reports is a scale and an
+ * offset from the middle of the box; drawing them is the caller's.
+ */
+export declare class ZoomController implements ReactiveController {
+    private readonly host;
+    private readonly options;
+    /** The pointers down on the box, where each one is now. */
+    private readonly pointers;
+    /** What the gesture under way started from. */
+    private from;
+    /** The scale, 1 at rest. */
+    scale: number;
+    /** How far the item is moved from the middle of the box, in pixels. */
+    pan: Offset;
+    /**
+     * Whether two fingers have been down since the last gesture began, so a
+     * swipe that started with the first of them can be told it was a pinch.
+     */
+    pinched: boolean;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: ZoomOptions);
+    /** Whether the item is zoomed, or two fingers are on it: either way, a drag is not a swipe. */
+    get engaged(): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** Zooms to `scale` about the middle of the box, held to the range. */
+    zoomTo(scale: number, at?: Offset): void;
+    /** Back to the item at its own size, in the middle. */
+    reset(): void;
+    private set;
+    /** A point on the page, measured from the middle of the box. */
+    private offset;
+    /** Whether a press landed in the box, through slotted content as well. */
+    private inside;
+    /** Starts over from where every pointer down is now. */
+    private begin;
+    private readonly handleDown;
+    private readonly handleMove;
+    private readonly handleUp;
+    /** A double press zooms all the way in about the point, or back out. */
+    private readonly handleDouble;
+    private release;
+}

package/dist/lightbox/zoom-controller.js

@@ -0,0 +1,128 @@
+import { between, clampPan, clampScale, spread, zoomAt } from './zoom.js';
+export class ZoomController {
+    constructor(host, options) {
+        this.pointers = new Map();
+        this.scale = 1;
+        this.pan = { x: 0, y: 0 };
+        this.pinched = false;
+        this.handleDown = (event) => {
+            if (this.options.max() <= 1 || event.button !== 0 || !this.inside(event)) {
+                return;
+            }
+            if (this.pointers.size === 0) {
+                this.pinched = false;
+                window.addEventListener('pointermove', this.handleMove);
+                window.addEventListener('pointerup', this.handleUp);
+                window.addEventListener('pointercancel', this.handleUp);
+            }
+            this.pointers.set(event.pointerId, this.offset(event));
+            if (this.pointers.size > 1) {
+                this.pinched = true;
+            }
+            this.begin();
+        };
+        this.handleMove = (event) => {
+            const from = this.from;
+            if (!from || !this.pointers.has(event.pointerId)) {
+                return;
+            }
+            this.pointers.set(event.pointerId, this.offset(event));
+            const [a, b] = [...this.pointers.values()];
+            if (a && b && from.spread > 0) {
+                const at = between(a, b);
+                const scale = clampScale((from.scale * spread(a, b)) / from.spread, this.options.max());
+                const about = zoomAt(from.at, from.scale, scale, from.pan);
+                this.set(scale, { x: about.x + at.x - from.at.x, y: about.y + at.y - from.at.y });
+            }
+            else if (a && this.scale > 1) {
+                this.set(this.scale, { x: from.pan.x + a.x - from.at.x, y: from.pan.y + a.y - from.at.y });
+            }
+        };
+        this.handleUp = (event) => {
+            if (!this.pointers.delete(event.pointerId)) {
+                return;
+            }
+            if (this.pointers.size === 0) {
+                this.release();
+                return;
+            }
+            this.begin();
+        };
+        this.handleDouble = (event) => {
+            if (this.options.max() <= 1 || !this.inside(event)) {
+                return;
+            }
+            if (this.scale > 1) {
+                this.reset();
+            }
+            else {
+                this.zoomTo(this.options.max(), this.offset(event));
+            }
+        };
+        this.host = host;
+        this.options = options;
+        host.addController(this);
+    }
+    get engaged() {
+        return this.scale > 1 || this.pointers.size > 1;
+    }
+    hostConnected() {
+        this.host.addEventListener('pointerdown', this.handleDown);
+        this.host.addEventListener('dblclick', this.handleDouble);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('pointerdown', this.handleDown);
+        this.host.removeEventListener('dblclick', this.handleDouble);
+        this.release();
+    }
+    zoomTo(scale, at = { x: 0, y: 0 }) {
+        const next = clampScale(scale, this.options.max());
+        this.set(next, zoomAt(at, this.scale, next, this.pan));
+    }
+    reset() {
+        if (this.scale !== 1 || this.pan.x !== 0 || this.pan.y !== 0) {
+            this.set(1, { x: 0, y: 0 });
+        }
+    }
+    set(scale, pan) {
+        const box = this.options.surface()?.getBoundingClientRect();
+        const held = clampPan(pan, scale, box?.width ?? 0, box?.height ?? 0);
+        if (scale === this.scale && held.x === this.pan.x && held.y === this.pan.y) {
+            return;
+        }
+        this.scale = scale;
+        this.pan = held;
+        this.options.onChange(scale, held);
+    }
+    offset(event) {
+        const box = this.options.surface()?.getBoundingClientRect();
+        return {
+            x: event.clientX - (box ? box.left + box.width / 2 : 0),
+            y: event.clientY - (box ? box.top + box.height / 2 : 0),
+        };
+    }
+    inside(event) {
+        const surface = this.options.surface();
+        return surface !== null && surface !== undefined && event.composedPath().includes(surface);
+    }
+    begin() {
+        const [a, b] = [...this.pointers.values()];
+        if (!a) {
+            this.from = undefined;
+            return;
+        }
+        this.from = {
+            at: b ? between(a, b) : a,
+            pan: { ...this.pan },
+            scale: this.scale,
+            spread: b ? spread(a, b) : 0,
+        };
+    }
+    release() {
+        window.removeEventListener('pointermove', this.handleMove);
+        window.removeEventListener('pointerup', this.handleUp);
+        window.removeEventListener('pointercancel', this.handleUp);
+        this.pointers.clear();
+        this.from = undefined;
+    }
+}

package/dist/lightbox/zoom.d.ts

@@ -0,0 +1,22 @@
+/** A distance from the middle of the viewer, or a point measured from it, in pixels. */
+export interface Offset {
+    x: number;
+    y: number;
+}
+/** A scale held between 1, the item at its own size, and `max`. */
+export declare const clampScale: (scale: number, max: number) => number;
+/**
+ * How far a zoomed item may move, kept so its edges never come inside the
+ * viewer's: at a scale of 2 in a box 400 wide, 200 either way.
+ */
+export declare const clampPan: (pan: Offset, scale: number, width: number, height: number) => Offset;
+/**
+ * Where the item moves to as its scale goes from `from` to `to`, so the point
+ * under `at` stays under it. Both are measured from the middle of the viewer,
+ * which is where the item scales from.
+ */
+export declare const zoomAt: (at: Offset, from: number, to: number, pan: Offset) => Offset;
+/** The distance between two fingers. */
+export declare const spread: (a: Offset, b: Offset) => number;
+/** The point halfway between two fingers. */
+export declare const between: (a: Offset, b: Offset) => Offset;