@gallerist/plugin-zoom 0.0.0-stage → 0.4.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shafayet Ahmmed
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,104 @@
-# Temporary Holding Version
+# @gallerist/plugin-zoom
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Gallerist plugin — a **zoom tool** in the toolbar: **− 100% +**. Zoom out, the current zoom (press
+it to fit the image again), zoom in; the `+`, `-` and `0` keys do the same.
+
+Part of [Gallerist](https://github.com/shafayet9780/gallerist#readme) — a headless, framework-agnostic media viewer for grouped / nested galleries with image-space overlays and virtualized rendering.
+
+## Install
+
+```bash
+npm i @gallerist/plugin-zoom
+```
+
+## Usage
+
+```ts
+import { createViewer } from '@gallerist/core'
+import { zoom } from '@gallerist/plugin-zoom'
+import { mount } from '@gallerist/renderer-dom'
+import '@gallerist/theme-default/gallerist.css'
+
+const viewer = createViewer({ groups, plugins: [zoom()] })
+mount(viewer, { preset: 'reviewer' })
+```
+
+One tool joins the toolbar, a group named "Zoom" of three buttons:
+
+- **−** zooms out to the previous stop, **+** in to the next. The stops are fit (100%), 150%, 200%,
+  300% and 400% by default: 100% is the image fitted to the stage, and 400% the DOM renderer's
+  largest zoom. Every step pivots on the centre of the stage, and the view stays inside the image.
+- **the percentage** shows the current zoom, and fits the image again when pressed (Enter or Space
+  from the keyboard). It follows every zoom as it happens: a pinch, a wheel or a double click shows
+  its percentage while it moves, not only once it settles, and a new item shows its own.
+
+While the viewer has focus, **`+`** (or **`=`**) and **`-`** step through the same stops, and **`0`**
+fits the image. They do nothing while the focus is in a text field inside the viewer (a pin's note,
+say), and nothing with Ctrl, ⌘ or Alt held (the browser's own page zoom). Without this plugin the
+renderer zooms by a fixed factor on those keys; with it, the keys and the buttons take the same
+steps (`keys: false` leaves the keys to the renderer).
+
+These keys are the tool's while `keys` is on, whatever the item: while it can't zoom they are
+marked taken (`preventDefault()`) and the renderer runs nothing for them, so another plugin's own
+`+`, `=`, `-` or `0` in its `keymap` never runs either. A plugin (or host) that wants one of those keys
+sets `keys: false`, or handles it first in a capture-phase listener above the viewer's root (on
+`document`, say) and calls `preventDefault()`, which this plugin leaves alone.
+
+**−** and **+** are unavailable at either end of the range, and while the current item can't zoom: a
+video or another non-image, an image still loading, one that failed to load. The percentage is
+unavailable at fit, where there's nothing to reset. Unavailable buttons are `aria-disabled` and dimmed
+(the percentage keeps its colour), and stay focusable, so the focus never drops out of the toolbar when
+a press reaches the end of the range.
+
+The renderer's own zoom-reset button (shown in the bar while the image is zoomed) is left out while
+this tool shows in the bar: the percentage does the same. A tool given `hidden`, or left out on a
+phone, leaves the reset where it was; without the plugin it works as before. A zoom from the tool or
+its keys is announced in the viewer's live region (`150%`); a pinch or a wheel only shows it.
+
+## Options
+
+| Option | Default | |
+|---|---|---|
+| `stops` | `[1, 1.5, 2, 3, 4]` | the zoom levels − and + step through, as scales (1 = fit); the first and last are the ends of the range. The DOM renderer zooms from fit to 400%: a stop outside that range is brought into it |
+| `zoomable(item)` | `item.type === 'image'` | whether an item can zoom once it has loaded (a custom adapter's media that zooms); [plugin-shortcuts](../plugin-shortcuts/README.md) lists the zoom keys while an item in the collection can |
+| `keys` | `true` | `+` / `=`, `-` and `0` step through the stops; `false` leaves them to the renderer |
+| `strings` | English | the labels, for translation; defaults in `DEFAULT_ZOOM_STRINGS`: `zoom` (the group), `zoomIn`, `zoomOut`, `reset(percent)` (the percentage button's name, which includes the percentage it shows), `percent(scale)` (how a zoom reads, `125%`) |
+
+`nextStop(stops, scale, dir)` (the stop a step lands on) and `DEFAULT_STOPS` are exported too.
+
+## Look
+
+The buttons are bar tools like the others, so they take each skin's tool style, in both schemes.
+With a fine pointer the Console skin draws them as one group in a hairline border, 30px tall, the
+percentage between two hairlines (`--gallerist-zoom-group: 1`); a touch, Gallery and Editorial keep
+three loose 44px tools.
+Right to left the group mirrors with the bar (− stays at the inline start, now on the right). The
+percentage uses tabular figures and keeps one width, so the bar doesn't shift as it changes. On a phone (600px wide or less) the bar
+leaves the tool out (a pinch zooms there, and a double tap fits); a page that keeps it
+(`.gallerist { --gallerist-phone-zoom: flex }`) gets − and + without the percentage, and the
+toolbar's strip scrolls if the tools still don't fit. A tool given `hidden` stays hidden. The styles ship in `@gallerist/theme-default` (`base.css`).
+
+## How it reads the zoom
+
+The committed zoom comes from the viewer's state (`viewer.subscribe`). A gesture's zoom isn't
+committed until it ends, so while one moves the plugin reads the transform the renderer gives the
+current slide (`.gallerist-content[data-gallerist-current]`), through a `MutationObserver` on the
+viewer's root that only looks at `style` changes. The keys are a capture-phase `keydown` listener on
+the viewer's root; it stops the keys it takes (`+`, `=`, `-`, `0`) from reaching the renderer and
+anything above the viewer. It leaves them alone where they are someone else's: typed in a field
+(`input`, `textarea`, `select`, contenteditable, one in an open shadow root included), inside a
+dialog or menu in the viewer (the View popover, a host's popover), inside a `slider`, `spinbutton`,
+`tree` or `grid`, or with Ctrl, ⌘ or Alt. While the current item can't zoom they do nothing (as the
+tool shows) and go on to the page, marked taken (`preventDefault()`), so the renderer doesn't zoom it
+either.
+
+## Not in the CDN bundle
+
+`@gallerist/cdn` (the one-`<script>` build) doesn't include this plugin: it would take that bundle
+past its size budget. Install it from npm alongside the packages above.
+
+Full docs: the [monorepo README](https://github.com/shafayet9780/gallerist#readme) and [`docs/`](https://github.com/shafayet9780/gallerist/tree/main/docs).
+
+## License
+
+MIT © Shafayet Ahmmed

package/dist/index.cjs

@@ -0,0 +1,174 @@
+'use strict';
+
+// src/index.ts
+var DEFAULT_ZOOM_STRINGS = {
+  zoom: "Zoom",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  reset: (percent) => `${percent}, fit to screen`,
+  percent: (scale) => `${Math.round(scale * 100)}%`
+};
+var DEFAULT_STOPS = [1, 1.5, 2, 3, 4];
+var icon = (body) => `<svg class="gallerist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${body}</svg>`;
+var MINUS = icon('<path d="M5 12h14"/>');
+var PLUS = icon('<path d="M5 12h14"/><path d="M12 5v14"/>');
+var EPS = 0.01;
+function nextStop(stops, scale, dir) {
+  const sorted = [...stops].sort((a, b) => a - b);
+  if (dir > 0) return sorted.find((s) => s > scale + EPS) ?? scale;
+  return [...sorted].reverse().find((s) => s < scale - EPS) ?? scale;
+}
+var SCALE = /scale\(\s*([\d.]+)/;
+var RANGE = [1, 4];
+var OWNED = 'input,textarea,select,[contenteditable]:not([contenteditable="false"]),[role=dialog],[role=menu],[role=spinbutton],[role=slider],[role=tree],[role=grid]';
+var theirs = (e, root) => {
+  const at = e.composedPath()[0].closest?.(OWNED);
+  return !!at && !at.contains(root);
+};
+function zoom(opts = {}) {
+  const t = { ...DEFAULT_ZOOM_STRINGS, ...opts.strings };
+  const stops = (opts.stops?.length ? opts.stops : DEFAULT_STOPS).map((s) => Math.min(RANGE[1], Math.max(RANGE[0], s))).sort((a, b) => a - b);
+  const min = stops[0] ?? 1;
+  const max = stops[stops.length - 1] ?? 1;
+  const zoomable = opts.zoomable ?? ((item) => item.type === "image");
+  return (viewer) => {
+    let group = null;
+    let out = null;
+    let level = null;
+    let into = null;
+    let root = null;
+    let unsub = null;
+    let watch = null;
+    let live = null;
+    const canZoom = () => {
+      const { cursor, loaded } = viewer.getState();
+      const item = viewer.getCollection().groups[cursor.g]?.items[cursor.i];
+      return !!item && zoomable(item) && loaded[item.id] === "loaded";
+    };
+    const scale = () => live ?? viewer.getState().zoom.scale;
+    const off = (btn, disabled) => {
+      if (!btn) return;
+      if (disabled) btn.setAttribute("aria-disabled", "true");
+      else btn.removeAttribute("aria-disabled");
+    };
+    const paint = () => {
+      if (!level) return;
+      const s = Math.max(min, scale());
+      const percent = t.percent(s);
+      const ok = canZoom();
+      if (level.textContent !== percent) level.textContent = percent;
+      level.setAttribute("aria-label", t.reset(percent));
+      off(out, !ok || s <= min + EPS);
+      off(into, !ok || s >= max - EPS);
+      off(level, s <= 1 + EPS);
+    };
+    const say = () => {
+      const live2 = root?.querySelector(".gallerist-live");
+      if (live2) live2.textContent = t.percent(viewer.getState().zoom.scale);
+    };
+    const step = (dir) => {
+      if (!canZoom()) return;
+      const s = scale();
+      const to = nextStop(stops, s, dir);
+      if (to === s) return;
+      viewer.zoomTo(to);
+      say();
+    };
+    const fit = () => {
+      if (viewer.getState().zoom.scale <= 1 + EPS) return;
+      viewer.resetZoom();
+      say();
+    };
+    const onKey = (e) => {
+      const dir = e.key === "+" || e.key === "=" ? 1 : e.key === "-" ? -1 : e.key === "0" ? 0 : null;
+      if (dir === null || e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
+      if (theirs(e, e.currentTarget)) return;
+      e.preventDefault();
+      if (!canZoom()) return;
+      e.stopImmediatePropagation();
+      if (dir === 0) fit();
+      else step(dir);
+    };
+    const onMutate = (records) => {
+      let seen = false;
+      for (const r of records) {
+        const el = r.target;
+        if (!el.classList?.contains("gallerist-content")) continue;
+        if (!el.hasAttribute("data-gallerist-current")) continue;
+        const m = SCALE.exec(el.style.transform);
+        const s = m ? Number(m[1]) : Number.NaN;
+        if (!Number.isFinite(s)) continue;
+        live = Math.abs(s - viewer.getState().zoom.scale) > EPS && s >= min ? s : null;
+        seen = true;
+      }
+      if (seen) paint();
+    };
+    const attach = () => {
+      const found = group?.closest(".gallerist") ?? null;
+      if (!found || found === root) return;
+      detach();
+      root = found;
+      if (opts.keys !== false) root.addEventListener("keydown", onKey, true);
+      if (typeof MutationObserver !== "undefined") {
+        watch = new MutationObserver(onMutate);
+        watch.observe(root, { subtree: true, attributeFilter: ["style"] });
+      }
+    };
+    const detach = () => {
+      root?.removeEventListener("keydown", onKey, true);
+      watch?.disconnect();
+      watch = null;
+      root = null;
+    };
+    const button = (className, label, html, onClick) => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = className;
+      btn.setAttribute("aria-label", label);
+      btn.innerHTML = html;
+      btn.addEventListener("click", () => {
+        if (btn.getAttribute("aria-disabled") !== "true") onClick();
+      });
+      return btn;
+    };
+    const build = () => {
+      group = document.createElement("div");
+      group.className = "gallerist-zoom-tool";
+      group.setAttribute("role", "group");
+      group.setAttribute("aria-label", t.zoom);
+      out = button("gallerist-zoom-out", t.zoomOut, MINUS, () => step(-1));
+      level = button("gallerist-zoom-level", "", "", fit);
+      into = button("gallerist-zoom-in", t.zoomIn, PLUS, () => step(1));
+      group.append(out, level, into);
+      paint();
+      queueMicrotask(attach);
+      return group;
+    };
+    return {
+      name: "zoom",
+      zoomable,
+      // plugin-shortcuts lists the zoom keys while an item can zoom
+      init() {
+        unsub = viewer.subscribe(() => {
+          live = null;
+          if (!root) attach();
+          paint();
+        });
+      },
+      destroy() {
+        unsub?.();
+        unsub = null;
+        detach();
+        group = out = level = into = null;
+      },
+      regions: { toolbar: build }
+    };
+  };
+}
+
+exports.DEFAULT_STOPS = DEFAULT_STOPS;
+exports.DEFAULT_ZOOM_STRINGS = DEFAULT_ZOOM_STRINGS;
+exports.nextStop = nextStop;
+exports.zoom = zoom;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["live"],"mappings":"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","file":"index.cjs","sourcesContent":["// @gallerist/plugin-zoom — a zoom tool in the viewer's toolbar: \"− 100% +\".\n//\n// Zoom out, the current zoom (pressing it fits the image again), zoom in. The steps are stops of\n// the zoom range (fit, 150%, 200%, 300%, 400% by default; 100% is the image fitted to the stage), and\n// every step pivots on the stage's centre (`viewer.zoomTo`, which keeps the view inside the image).\n// While the viewer has focus, `+` / `=`, `-` and `0` take the same steps: the renderer's own zoom\n// keys step by a fixed factor, so the tool takes those keys first and the two never disagree.\n//\n// The percentage follows every zoom: the committed one from the viewer's state, and the live\n// transform while a pinch, a wheel or a double click is still moving (the renderer applies those to\n// the current slide's content before it commits them, so the plugin reads that transform).\n// `− +` are unavailable (aria-disabled, still focusable, so focus never drops) at either end of the\n// range and while the current item can't zoom: a video or another non-image, one still loading, one\n// that failed. The percentage is unavailable at fit, where there's nothing to reset.\n\nimport type { Item, Plugin, PluginInstance, ViewerApi } from '@gallerist/core'\n\nexport interface ZoomStrings {\n  /** the tool's group name */\n  zoom: string\n  zoomIn: string\n  zoomOut: string\n  /** the percentage button's name, with the zoom it shows (it fits the image again) */\n  reset: (percent: string) => string\n  /** how a zoom reads (`scale` 1 is the image fitted to the stage) */\n  percent: (scale: number) => string\n}\n\nexport const DEFAULT_ZOOM_STRINGS: ZoomStrings = {\n  zoom: 'Zoom',\n  zoomIn: 'Zoom in',\n  zoomOut: 'Zoom out',\n  reset: (percent) => `${percent}, fit to screen`,\n  percent: (scale) => `${Math.round(scale * 100)}%`,\n}\n\nexport interface ZoomOptions {\n  /** The zoom levels − and + step through, as scales (1 = fit). Default `[1, 1.5, 2, 3, 4]`, the DOM\n   *  renderer's range (fit to 400%); the first and last are the ends of the range. A stop outside\n   *  that range is brought into it (the renderer can't zoom past it). */\n  stops?: readonly number[]\n  /** Whether an item can zoom (when it has loaded). Default: images (`type: 'image'`). */\n  zoomable?: (item: Item) => boolean\n  /** `+` / `=`, `-` and `0` step through the stops while the viewer has focus. Default true; `false`\n   *  leaves those keys to the renderer (which steps by its own factor). While it's on, no plugin's\n   *  keymap gets them: the tool takes them while the item can zoom, and marks them taken\n   *  (`preventDefault()`) while it can't, so the renderer runs nothing for them. */\n  keys?: boolean\n  /** UI text overrides, for translation; merged over English. */\n  strings?: Partial<ZoomStrings>\n}\n\n/** The plugin's instance: `zoomable` is the option's predicate (or the default), which\n *  plugin-shortcuts reads to list the zoom keys only while the collection has an item that zooms. */\nexport interface ZoomInstance extends PluginInstance {\n  zoomable: (item: Item) => boolean\n}\n\nexport const DEFAULT_STOPS: readonly number[] = [1, 1.5, 2, 3, 4]\n\n// the shared icon family's look (core's ICONS)\nconst icon = (body: string) =>\n  `<svg class=\"gallerist-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">${body}</svg>`\nconst MINUS = icon('<path d=\"M5 12h14\"/>')\nconst PLUS = icon('<path d=\"M5 12h14\"/><path d=\"M12 5v14\"/>')\n\n/** Within a hair of a stop counts as on it (zooms are floats; a pinch rarely lands exactly). */\nconst EPS = 0.01\n\n/** The stop after `scale` going `dir` (+1 in, −1 out), or `scale` itself at that end. */\nexport function nextStop(stops: readonly number[], scale: number, dir: 1 | -1): number {\n  const sorted = [...stops].sort((a, b) => a - b)\n  if (dir > 0) return sorted.find((s) => s > scale + EPS) ?? scale\n  return [...sorted].reverse().find((s) => s < scale - EPS) ?? scale\n}\n\nconst SCALE = /scale\\(\\s*([\\d.]+)/\n/** The DOM renderer's zoom range: fit to 400%. */\nconst RANGE = [1, 4] as const\n// Where the keys are someone else's: a field, a dialog or menu in the viewer (the View popover), or a\n// widget whose own keys these are. A node inside a shadow root counts by itself (the event's first\n// target). The viewer's root (an overlay is a dialog) and what holds it don't count.\nconst OWNED =\n  'input,textarea,select,[contenteditable]:not([contenteditable=\"false\"]),[role=dialog],[role=menu],[role=spinbutton],[role=slider],[role=tree],[role=grid]'\nconst theirs = (e: KeyboardEvent, root: HTMLElement) => {\n  const at = (e.composedPath()[0] as Element).closest?.(OWNED)\n  return !!at && !at.contains(root)\n}\n\nexport function zoom(opts: ZoomOptions = {}): Plugin {\n  const t: ZoomStrings = { ...DEFAULT_ZOOM_STRINGS, ...opts.strings }\n  const stops = (opts.stops?.length ? opts.stops : DEFAULT_STOPS)\n    .map((s) => Math.min(RANGE[1], Math.max(RANGE[0], s)))\n    .sort((a, b) => a - b)\n  const min = stops[0] ?? 1\n  const max = stops[stops.length - 1] ?? 1\n  const zoomable = opts.zoomable ?? ((item: Item) => item.type === 'image')\n\n  return (viewer: ViewerApi): ZoomInstance => {\n    let group: HTMLElement | null = null\n    let out: HTMLButtonElement | null = null\n    let level: HTMLButtonElement | null = null\n    let into: HTMLButtonElement | null = null\n    let root: HTMLElement | null = null\n    let unsub: (() => void) | null = null\n    let watch: MutationObserver | null = null\n    let live: number | null = null // the transform a gesture shows before it commits\n\n    // whether the current item can zoom now: an image (by default) that has loaded\n    const canZoom = () => {\n      const { cursor, loaded } = viewer.getState()\n      const item = viewer.getCollection().groups[cursor.g]?.items[cursor.i]\n      return !!item && zoomable(item) && loaded[item.id] === 'loaded'\n    }\n    const scale = () => live ?? viewer.getState().zoom.scale\n\n    const off = (btn: HTMLButtonElement | null, disabled: boolean) => {\n      if (!btn) return\n      if (disabled) btn.setAttribute('aria-disabled', 'true')\n      else btn.removeAttribute('aria-disabled')\n    }\n    const paint = () => {\n      if (!level) return\n      const s = Math.max(min, scale())\n      const percent = t.percent(s)\n      const ok = canZoom()\n      if (level.textContent !== percent) level.textContent = percent\n      level.setAttribute('aria-label', t.reset(percent))\n      off(out, !ok || s <= min + EPS)\n      off(into, !ok || s >= max - EPS)\n      off(level, s <= 1 + EPS)\n    }\n\n    // a zoom from the tool or its keys says its percentage (a pinch or a wheel shows it only)\n    const say = () => {\n      const live = root?.querySelector('.gallerist-live')\n      if (live) live.textContent = t.percent(viewer.getState().zoom.scale)\n    }\n    const step = (dir: 1 | -1) => {\n      if (!canZoom()) return\n      const s = scale()\n      const to = nextStop(stops, s, dir)\n      if (to === s) return\n      viewer.zoomTo(to)\n      say()\n    }\n    const fit = () => {\n      if (viewer.getState().zoom.scale <= 1 + EPS) return\n      viewer.resetZoom()\n      say()\n    }\n\n    // the renderer's zoom keys step by its own factor: take them first (capture on the viewer's\n    // root), unless they're someone else's (typing, a dialog, a slider: OWNED) or a chord (the\n    // browser's zoom). While the item can't zoom they do nothing here, as the tool shows, and go on\n    // to the page (marked taken, so the renderer doesn't zoom it either).\n    const onKey = (e: KeyboardEvent) => {\n      const dir = e.key === '+' || e.key === '=' ? 1 : e.key === '-' ? -1 : e.key === '0' ? 0 : null\n      if (dir === null || e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return\n      if (theirs(e, e.currentTarget as HTMLElement)) return\n      e.preventDefault()\n      if (!canZoom()) return\n      e.stopImmediatePropagation()\n      if (dir === 0) fit()\n      else step(dir)\n    }\n\n    // A gesture's live transform on the current slide's content (the renderer commits it at the\n    // end): show it while it moves. A drag to dismiss shrinks the content too; that isn't a zoom.\n    const onMutate = (records: MutationRecord[]) => {\n      let seen = false\n      for (const r of records) {\n        const el = r.target as HTMLElement\n        if (!el.classList?.contains('gallerist-content')) continue\n        if (!el.hasAttribute('data-gallerist-current')) continue\n        const m = SCALE.exec(el.style.transform)\n        const s = m ? Number(m[1]) : Number.NaN\n        if (!Number.isFinite(s)) continue\n        live = Math.abs(s - viewer.getState().zoom.scale) > EPS && s >= min ? s : null\n        seen = true\n      }\n      if (seen) paint()\n    }\n\n    const attach = () => {\n      const found = group?.closest<HTMLElement>('.gallerist') ?? null\n      if (!found || found === root) return\n      detach()\n      root = found\n      if (opts.keys !== false) root.addEventListener('keydown', onKey, true)\n      if (typeof MutationObserver !== 'undefined') {\n        watch = new MutationObserver(onMutate)\n        watch.observe(root, { subtree: true, attributeFilter: ['style'] })\n      }\n    }\n    const detach = () => {\n      root?.removeEventListener('keydown', onKey, true)\n      watch?.disconnect()\n      watch = null\n      root = null\n    }\n\n    const button = (className: string, label: string, html: string, onClick: () => void) => {\n      const btn = document.createElement('button')\n      btn.type = 'button'\n      btn.className = className\n      btn.setAttribute('aria-label', label)\n      btn.innerHTML = html\n      // aria-disabled, not disabled: focus stays on a tool that reaches the end of the range\n      btn.addEventListener('click', () => {\n        if (btn.getAttribute('aria-disabled') !== 'true') onClick()\n      })\n      return btn\n    }\n\n    const build = () => {\n      group = document.createElement('div')\n      group.className = 'gallerist-zoom-tool'\n      group.setAttribute('role', 'group')\n      group.setAttribute('aria-label', t.zoom)\n      out = button('gallerist-zoom-out', t.zoomOut, MINUS, () => step(-1))\n      level = button('gallerist-zoom-level', '', '', fit)\n      into = button('gallerist-zoom-in', t.zoomIn, PLUS, () => step(1))\n      group.append(out, level, into)\n      paint()\n      queueMicrotask(attach) // once the renderer has put the tool in the viewer\n      return group\n    }\n\n    return {\n      name: 'zoom',\n      zoomable, // plugin-shortcuts lists the zoom keys while an item can zoom\n      init() {\n        unsub = viewer.subscribe(() => {\n          live = null // a commit (or a new item) settles the live transform\n          if (!root) attach()\n          paint()\n        })\n      },\n      destroy() {\n        unsub?.()\n        unsub = null\n        detach()\n        group = out = level = into = null\n      },\n      regions: { toolbar: build },\n    }\n  }\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,39 @@
+import { PluginInstance, Item, Plugin } from '@gallerist/core';
+
+interface ZoomStrings {
+    /** the tool's group name */
+    zoom: string;
+    zoomIn: string;
+    zoomOut: string;
+    /** the percentage button's name, with the zoom it shows (it fits the image again) */
+    reset: (percent: string) => string;
+    /** how a zoom reads (`scale` 1 is the image fitted to the stage) */
+    percent: (scale: number) => string;
+}
+declare const DEFAULT_ZOOM_STRINGS: ZoomStrings;
+interface ZoomOptions {
+    /** The zoom levels − and + step through, as scales (1 = fit). Default `[1, 1.5, 2, 3, 4]`, the DOM
+     *  renderer's range (fit to 400%); the first and last are the ends of the range. A stop outside
+     *  that range is brought into it (the renderer can't zoom past it). */
+    stops?: readonly number[];
+    /** Whether an item can zoom (when it has loaded). Default: images (`type: 'image'`). */
+    zoomable?: (item: Item) => boolean;
+    /** `+` / `=`, `-` and `0` step through the stops while the viewer has focus. Default true; `false`
+     *  leaves those keys to the renderer (which steps by its own factor). While it's on, no plugin's
+     *  keymap gets them: the tool takes them while the item can zoom, and marks them taken
+     *  (`preventDefault()`) while it can't, so the renderer runs nothing for them. */
+    keys?: boolean;
+    /** UI text overrides, for translation; merged over English. */
+    strings?: Partial<ZoomStrings>;
+}
+/** The plugin's instance: `zoomable` is the option's predicate (or the default), which
+ *  plugin-shortcuts reads to list the zoom keys only while the collection has an item that zooms. */
+interface ZoomInstance extends PluginInstance {
+    zoomable: (item: Item) => boolean;
+}
+declare const DEFAULT_STOPS: readonly number[];
+/** The stop after `scale` going `dir` (+1 in, −1 out), or `scale` itself at that end. */
+declare function nextStop(stops: readonly number[], scale: number, dir: 1 | -1): number;
+declare function zoom(opts?: ZoomOptions): Plugin;
+
+export { DEFAULT_STOPS, DEFAULT_ZOOM_STRINGS, type ZoomInstance, type ZoomOptions, type ZoomStrings, nextStop, zoom };

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import { PluginInstance, Item, Plugin } from '@gallerist/core';
+
+interface ZoomStrings {
+    /** the tool's group name */
+    zoom: string;
+    zoomIn: string;
+    zoomOut: string;
+    /** the percentage button's name, with the zoom it shows (it fits the image again) */
+    reset: (percent: string) => string;
+    /** how a zoom reads (`scale` 1 is the image fitted to the stage) */
+    percent: (scale: number) => string;
+}
+declare const DEFAULT_ZOOM_STRINGS: ZoomStrings;
+interface ZoomOptions {
+    /** The zoom levels − and + step through, as scales (1 = fit). Default `[1, 1.5, 2, 3, 4]`, the DOM
+     *  renderer's range (fit to 400%); the first and last are the ends of the range. A stop outside
+     *  that range is brought into it (the renderer can't zoom past it). */
+    stops?: readonly number[];
+    /** Whether an item can zoom (when it has loaded). Default: images (`type: 'image'`). */
+    zoomable?: (item: Item) => boolean;
+    /** `+` / `=`, `-` and `0` step through the stops while the viewer has focus. Default true; `false`
+     *  leaves those keys to the renderer (which steps by its own factor). While it's on, no plugin's
+     *  keymap gets them: the tool takes them while the item can zoom, and marks them taken
+     *  (`preventDefault()`) while it can't, so the renderer runs nothing for them. */
+    keys?: boolean;
+    /** UI text overrides, for translation; merged over English. */
+    strings?: Partial<ZoomStrings>;
+}
+/** The plugin's instance: `zoomable` is the option's predicate (or the default), which
+ *  plugin-shortcuts reads to list the zoom keys only while the collection has an item that zooms. */
+interface ZoomInstance extends PluginInstance {
+    zoomable: (item: Item) => boolean;
+}
+declare const DEFAULT_STOPS: readonly number[];
+/** The stop after `scale` going `dir` (+1 in, −1 out), or `scale` itself at that end. */
+declare function nextStop(stops: readonly number[], scale: number, dir: 1 | -1): number;
+declare function zoom(opts?: ZoomOptions): Plugin;
+
+export { DEFAULT_STOPS, DEFAULT_ZOOM_STRINGS, type ZoomInstance, type ZoomOptions, type ZoomStrings, nextStop, zoom };

package/dist/index.js

@@ -0,0 +1,169 @@
+// src/index.ts
+var DEFAULT_ZOOM_STRINGS = {
+  zoom: "Zoom",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  reset: (percent) => `${percent}, fit to screen`,
+  percent: (scale) => `${Math.round(scale * 100)}%`
+};
+var DEFAULT_STOPS = [1, 1.5, 2, 3, 4];
+var icon = (body) => `<svg class="gallerist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${body}</svg>`;
+var MINUS = icon('<path d="M5 12h14"/>');
+var PLUS = icon('<path d="M5 12h14"/><path d="M12 5v14"/>');
+var EPS = 0.01;
+function nextStop(stops, scale, dir) {
+  const sorted = [...stops].sort((a, b) => a - b);
+  if (dir > 0) return sorted.find((s) => s > scale + EPS) ?? scale;
+  return [...sorted].reverse().find((s) => s < scale - EPS) ?? scale;
+}
+var SCALE = /scale\(\s*([\d.]+)/;
+var RANGE = [1, 4];
+var OWNED = 'input,textarea,select,[contenteditable]:not([contenteditable="false"]),[role=dialog],[role=menu],[role=spinbutton],[role=slider],[role=tree],[role=grid]';
+var theirs = (e, root) => {
+  const at = e.composedPath()[0].closest?.(OWNED);
+  return !!at && !at.contains(root);
+};
+function zoom(opts = {}) {
+  const t = { ...DEFAULT_ZOOM_STRINGS, ...opts.strings };
+  const stops = (opts.stops?.length ? opts.stops : DEFAULT_STOPS).map((s) => Math.min(RANGE[1], Math.max(RANGE[0], s))).sort((a, b) => a - b);
+  const min = stops[0] ?? 1;
+  const max = stops[stops.length - 1] ?? 1;
+  const zoomable = opts.zoomable ?? ((item) => item.type === "image");
+  return (viewer) => {
+    let group = null;
+    let out = null;
+    let level = null;
+    let into = null;
+    let root = null;
+    let unsub = null;
+    let watch = null;
+    let live = null;
+    const canZoom = () => {
+      const { cursor, loaded } = viewer.getState();
+      const item = viewer.getCollection().groups[cursor.g]?.items[cursor.i];
+      return !!item && zoomable(item) && loaded[item.id] === "loaded";
+    };
+    const scale = () => live ?? viewer.getState().zoom.scale;
+    const off = (btn, disabled) => {
+      if (!btn) return;
+      if (disabled) btn.setAttribute("aria-disabled", "true");
+      else btn.removeAttribute("aria-disabled");
+    };
+    const paint = () => {
+      if (!level) return;
+      const s = Math.max(min, scale());
+      const percent = t.percent(s);
+      const ok = canZoom();
+      if (level.textContent !== percent) level.textContent = percent;
+      level.setAttribute("aria-label", t.reset(percent));
+      off(out, !ok || s <= min + EPS);
+      off(into, !ok || s >= max - EPS);
+      off(level, s <= 1 + EPS);
+    };
+    const say = () => {
+      const live2 = root?.querySelector(".gallerist-live");
+      if (live2) live2.textContent = t.percent(viewer.getState().zoom.scale);
+    };
+    const step = (dir) => {
+      if (!canZoom()) return;
+      const s = scale();
+      const to = nextStop(stops, s, dir);
+      if (to === s) return;
+      viewer.zoomTo(to);
+      say();
+    };
+    const fit = () => {
+      if (viewer.getState().zoom.scale <= 1 + EPS) return;
+      viewer.resetZoom();
+      say();
+    };
+    const onKey = (e) => {
+      const dir = e.key === "+" || e.key === "=" ? 1 : e.key === "-" ? -1 : e.key === "0" ? 0 : null;
+      if (dir === null || e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
+      if (theirs(e, e.currentTarget)) return;
+      e.preventDefault();
+      if (!canZoom()) return;
+      e.stopImmediatePropagation();
+      if (dir === 0) fit();
+      else step(dir);
+    };
+    const onMutate = (records) => {
+      let seen = false;
+      for (const r of records) {
+        const el = r.target;
+        if (!el.classList?.contains("gallerist-content")) continue;
+        if (!el.hasAttribute("data-gallerist-current")) continue;
+        const m = SCALE.exec(el.style.transform);
+        const s = m ? Number(m[1]) : Number.NaN;
+        if (!Number.isFinite(s)) continue;
+        live = Math.abs(s - viewer.getState().zoom.scale) > EPS && s >= min ? s : null;
+        seen = true;
+      }
+      if (seen) paint();
+    };
+    const attach = () => {
+      const found = group?.closest(".gallerist") ?? null;
+      if (!found || found === root) return;
+      detach();
+      root = found;
+      if (opts.keys !== false) root.addEventListener("keydown", onKey, true);
+      if (typeof MutationObserver !== "undefined") {
+        watch = new MutationObserver(onMutate);
+        watch.observe(root, { subtree: true, attributeFilter: ["style"] });
+      }
+    };
+    const detach = () => {
+      root?.removeEventListener("keydown", onKey, true);
+      watch?.disconnect();
+      watch = null;
+      root = null;
+    };
+    const button = (className, label, html, onClick) => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = className;
+      btn.setAttribute("aria-label", label);
+      btn.innerHTML = html;
+      btn.addEventListener("click", () => {
+        if (btn.getAttribute("aria-disabled") !== "true") onClick();
+      });
+      return btn;
+    };
+    const build = () => {
+      group = document.createElement("div");
+      group.className = "gallerist-zoom-tool";
+      group.setAttribute("role", "group");
+      group.setAttribute("aria-label", t.zoom);
+      out = button("gallerist-zoom-out", t.zoomOut, MINUS, () => step(-1));
+      level = button("gallerist-zoom-level", "", "", fit);
+      into = button("gallerist-zoom-in", t.zoomIn, PLUS, () => step(1));
+      group.append(out, level, into);
+      paint();
+      queueMicrotask(attach);
+      return group;
+    };
+    return {
+      name: "zoom",
+      zoomable,
+      // plugin-shortcuts lists the zoom keys while an item can zoom
+      init() {
+        unsub = viewer.subscribe(() => {
+          live = null;
+          if (!root) attach();
+          paint();
+        });
+      },
+      destroy() {
+        unsub?.();
+        unsub = null;
+        detach();
+        group = out = level = into = null;
+      },
+      regions: { toolbar: build }
+    };
+  };
+}
+
+export { DEFAULT_STOPS, DEFAULT_ZOOM_STRINGS, nextStop, zoom };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["live"],"mappings":";AA4BO,IAAM,oBAAA,GAAoC;AAAA,EAC/C,IAAA,EAAM,MAAA;AAAA,EACN,MAAA,EAAQ,SAAA;AAAA,EACR,OAAA,EAAS,UAAA;AAAA,EACT,KAAA,EAAO,CAAC,OAAA,KAAY,CAAA,EAAG,OAAO,CAAA,eAAA,CAAA;AAAA,EAC9B,OAAA,EAAS,CAAC,KAAA,KAAU,CAAA,EAAG,KAAK,KAAA,CAAM,KAAA,GAAQ,GAAG,CAAC,CAAA,CAAA;AAChD;AAwBO,IAAM,gBAAmC,CAAC,CAAA,EAAG,GAAA,EAAK,CAAA,EAAG,GAAG,CAAC;AAGhE,IAAM,IAAA,GAAO,CAAC,IAAA,KACZ,CAAA,uLAAA,EAA0L,IAAI,CAAA,MAAA,CAAA;AAChM,IAAM,KAAA,GAAQ,KAAK,sBAAsB,CAAA;AACzC,IAAM,IAAA,GAAO,KAAK,0CAA0C,CAAA;AAG5D,IAAM,GAAA,GAAM,IAAA;AAGL,SAAS,QAAA,CAAS,KAAA,EAA0B,KAAA,EAAe,GAAA,EAAqB;AACrF,EAAA,MAAM,MAAA,GAAS,CAAC,GAAG,KAAK,CAAA,CAAE,KAAK,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,GAAI,CAAC,CAAA;AAC9C,EAAA,IAAI,GAAA,GAAM,CAAA,EAAG,OAAO,MAAA,CAAO,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,GAAI,KAAA,GAAQ,GAAG,CAAA,IAAK,KAAA;AAC3D,EAAA,OAAO,CAAC,GAAG,MAAM,CAAA,CAAE,OAAA,EAAQ,CAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,GAAI,KAAA,GAAQ,GAAG,CAAA,IAAK,KAAA;AAC/D;AAEA,IAAM,KAAA,GAAQ,oBAAA;AAEd,IAAM,KAAA,GAAQ,CAAC,CAAA,EAAG,CAAC,CAAA;AAInB,IAAM,KAAA,GACJ,0JAAA;AACF,IAAM,MAAA,GAAS,CAAC,CAAA,EAAkB,IAAA,KAAsB;AACtD,EAAA,MAAM,KAAM,CAAA,CAAE,YAAA,GAAe,CAAC,CAAA,CAAc,UAAU,KAAK,CAAA;AAC3D,EAAA,OAAO,CAAC,CAAC,EAAA,IAAM,CAAC,EAAA,CAAG,SAAS,IAAI,CAAA;AAClC,CAAA;AAEO,SAAS,IAAA,CAAK,IAAA,GAAoB,EAAC,EAAW;AACnD,EAAA,MAAM,IAAiB,EAAE,GAAG,oBAAA,EAAsB,GAAG,KAAK,OAAA,EAAQ;AAClE,EAAA,MAAM,KAAA,GAAA,CAAS,IAAA,CAAK,KAAA,EAAO,MAAA,GAAS,IAAA,CAAK,KAAA,GAAQ,aAAA,EAC9C,GAAA,CAAI,CAAC,CAAA,KAAM,IAAA,CAAK,GAAA,CAAI,KAAA,CAAM,CAAC,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,KAAA,CAAM,CAAC,CAAA,EAAG,CAAC,CAAC,CAAC,CAAA,CACpD,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM,IAAI,CAAC,CAAA;AACvB,EAAA,MAAM,GAAA,GAAM,KAAA,CAAM,CAAC,CAAA,IAAK,CAAA;AACxB,EAAA,MAAM,GAAA,GAAM,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,CAAC,CAAA,IAAK,CAAA;AACvC,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA,KAAa,CAAC,IAAA,KAAe,KAAK,IAAA,KAAS,OAAA,CAAA;AAEjE,EAAA,OAAO,CAAC,MAAA,KAAoC;AAC1C,IAAA,IAAI,KAAA,GAA4B,IAAA;AAChC,IAAA,IAAI,GAAA,GAAgC,IAAA;AACpC,IAAA,IAAI,KAAA,GAAkC,IAAA;AACtC,IAAA,IAAI,IAAA,GAAiC,IAAA;AACrC,IAAA,IAAI,IAAA,GAA2B,IAAA;AAC/B,IAAA,IAAI,KAAA,GAA6B,IAAA;AACjC,IAAA,IAAI,KAAA,GAAiC,IAAA;AACrC,IAAA,IAAI,IAAA,GAAsB,IAAA;AAG1B,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,MAAM,EAAE,MAAA,EAAQ,MAAA,EAAO,GAAI,OAAO,QAAA,EAAS;AAC3C,MAAA,MAAM,IAAA,GAAO,MAAA,CAAO,aAAA,EAAc,CAAE,MAAA,CAAO,OAAO,CAAC,CAAA,EAAG,KAAA,CAAM,MAAA,CAAO,CAAC,CAAA;AACpE,MAAA,OAAO,CAAC,CAAC,IAAA,IAAQ,QAAA,CAAS,IAAI,CAAA,IAAK,MAAA,CAAO,IAAA,CAAK,EAAE,CAAA,KAAM,QAAA;AAAA,IACzD,CAAA;AACA,IAAA,MAAM,QAAQ,MAAM,IAAA,IAAQ,MAAA,CAAO,QAAA,GAAW,IAAA,CAAK,KAAA;AAEnD,IAAA,MAAM,GAAA,GAAM,CAAC,GAAA,EAA+B,QAAA,KAAsB;AAChE,MAAA,IAAI,CAAC,GAAA,EAAK;AACV,MAAA,IAAI,QAAA,EAAU,GAAA,CAAI,YAAA,CAAa,eAAA,EAAiB,MAAM,CAAA;AAAA,WACjD,GAAA,CAAI,gBAAgB,eAAe,CAAA;AAAA,IAC1C,CAAA;AACA,IAAA,MAAM,QAAQ,MAAM;AAClB,MAAA,IAAI,CAAC,KAAA,EAAO;AACZ,MAAA,MAAM,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,OAAO,CAAA;AAC/B,MAAA,MAAM,OAAA,GAAU,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAA;AAC3B,MAAA,MAAM,KAAK,OAAA,EAAQ;AACnB,MAAA,IAAI,KAAA,CAAM,WAAA,KAAgB,OAAA,EAAS,KAAA,CAAM,WAAA,GAAc,OAAA;AACvD,MAAA,KAAA,CAAM,YAAA,CAAa,YAAA,EAAc,CAAA,CAAE,KAAA,CAAM,OAAO,CAAC,CAAA;AACjD,MAAA,GAAA,CAAI,GAAA,EAAK,CAAC,EAAA,IAAM,CAAA,IAAK,MAAM,GAAG,CAAA;AAC9B,MAAA,GAAA,CAAI,IAAA,EAAM,CAAC,EAAA,IAAM,CAAA,IAAK,MAAM,GAAG,CAAA;AAC/B,MAAA,GAAA,CAAI,KAAA,EAAO,CAAA,IAAK,CAAA,GAAI,GAAG,CAAA;AAAA,IACzB,CAAA;AAGA,IAAA,MAAM,MAAM,MAAM;AAChB,MAAA,MAAMA,KAAAA,GAAO,IAAA,EAAM,aAAA,CAAc,iBAAiB,CAAA;AAClD,MAAA,IAAIA,KAAAA,EAAMA,KAAAA,CAAK,WAAA,GAAc,CAAA,CAAE,QAAQ,MAAA,CAAO,QAAA,EAAS,CAAE,IAAA,CAAK,KAAK,CAAA;AAAA,IACrE,CAAA;AACA,IAAA,MAAM,IAAA,GAAO,CAAC,GAAA,KAAgB;AAC5B,MAAA,IAAI,CAAC,SAAQ,EAAG;AAChB,MAAA,MAAM,IAAI,KAAA,EAAM;AAChB,MAAA,MAAM,EAAA,GAAK,QAAA,CAAS,KAAA,EAAO,CAAA,EAAG,GAAG,CAAA;AACjC,MAAA,IAAI,OAAO,CAAA,EAAG;AACd,MAAA,MAAA,CAAO,OAAO,EAAE,CAAA;AAChB,MAAA,GAAA,EAAI;AAAA,IACN,CAAA;AACA,IAAA,MAAM,MAAM,MAAM;AAChB,MAAA,IAAI,OAAO,QAAA,EAAS,CAAE,IAAA,CAAK,KAAA,IAAS,IAAI,GAAA,EAAK;AAC7C,MAAA,MAAA,CAAO,SAAA,EAAU;AACjB,MAAA,GAAA,EAAI;AAAA,IACN,CAAA;AAMA,IAAA,MAAM,KAAA,GAAQ,CAAC,CAAA,KAAqB;AAClC,MAAA,MAAM,GAAA,GAAM,CAAA,CAAE,GAAA,KAAQ,GAAA,IAAO,EAAE,GAAA,KAAQ,GAAA,GAAM,CAAA,GAAI,CAAA,CAAE,QAAQ,GAAA,GAAM,EAAA,GAAK,CAAA,CAAE,GAAA,KAAQ,MAAM,CAAA,GAAI,IAAA;AAC1F,MAAA,IAAI,GAAA,KAAQ,QAAQ,CAAA,CAAE,gBAAA,IAAoB,EAAE,OAAA,IAAW,CAAA,CAAE,OAAA,IAAW,CAAA,CAAE,MAAA,EAAQ;AAC9E,MAAA,IAAI,MAAA,CAAO,CAAA,EAAG,CAAA,CAAE,aAA4B,CAAA,EAAG;AAC/C,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,IAAI,CAAC,SAAQ,EAAG;AAChB,MAAA,CAAA,CAAE,wBAAA,EAAyB;AAC3B,MAAA,IAAI,GAAA,KAAQ,GAAG,GAAA,EAAI;AAAA,gBACT,GAAG,CAAA;AAAA,IACf,CAAA;AAIA,IAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAA8B;AAC9C,MAAA,IAAI,IAAA,GAAO,KAAA;AACX,MAAA,KAAA,MAAW,KAAK,OAAA,EAAS;AACvB,QAAA,MAAM,KAAK,CAAA,CAAE,MAAA;AACb,QAAA,IAAI,CAAC,EAAA,CAAG,SAAA,EAAW,QAAA,CAAS,mBAAmB,CAAA,EAAG;AAClD,QAAA,IAAI,CAAC,EAAA,CAAG,YAAA,CAAa,wBAAwB,CAAA,EAAG;AAChD,QAAA,MAAM,CAAA,GAAI,KAAA,CAAM,IAAA,CAAK,EAAA,CAAG,MAAM,SAAS,CAAA;AACvC,QAAA,MAAM,IAAI,CAAA,GAAI,MAAA,CAAO,EAAE,CAAC,CAAC,IAAI,MAAA,CAAO,GAAA;AACpC,QAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,CAAC,CAAA,EAAG;AACzB,QAAA,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,CAAA,GAAI,MAAA,CAAO,QAAA,EAAS,CAAE,IAAA,CAAK,KAAK,CAAA,GAAI,GAAA,IAAO,CAAA,IAAK,GAAA,GAAM,CAAA,GAAI,IAAA;AAC1E,QAAA,IAAA,GAAO,IAAA;AAAA,MACT;AACA,MAAA,IAAI,MAAM,KAAA,EAAM;AAAA,IAClB,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,MAAM,KAAA,GAAQ,KAAA,EAAO,OAAA,CAAqB,YAAY,CAAA,IAAK,IAAA;AAC3D,MAAA,IAAI,CAAC,KAAA,IAAS,KAAA,KAAU,IAAA,EAAM;AAC9B,MAAA,MAAA,EAAO;AACP,MAAA,IAAA,GAAO,KAAA;AACP,MAAA,IAAI,KAAK,IAAA,KAAS,KAAA,OAAY,gBAAA,CAAiB,SAAA,EAAW,OAAO,IAAI,CAAA;AACrE,MAAA,IAAI,OAAO,qBAAqB,WAAA,EAAa;AAC3C,QAAA,KAAA,GAAQ,IAAI,iBAAiB,QAAQ,CAAA;AACrC,QAAA,KAAA,CAAM,OAAA,CAAQ,MAAM,EAAE,OAAA,EAAS,MAAM,eAAA,EAAiB,CAAC,OAAO,CAAA,EAAG,CAAA;AAAA,MACnE;AAAA,IACF,CAAA;AACA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,IAAA,EAAM,mBAAA,CAAoB,SAAA,EAAW,KAAA,EAAO,IAAI,CAAA;AAChD,MAAA,KAAA,EAAO,UAAA,EAAW;AAClB,MAAA,KAAA,GAAQ,IAAA;AACR,MAAA,IAAA,GAAO,IAAA;AAAA,IACT,CAAA;AAEA,IAAA,MAAM,MAAA,GAAS,CAAC,SAAA,EAAmB,KAAA,EAAe,MAAc,OAAA,KAAwB;AACtF,MAAA,MAAM,GAAA,GAAM,QAAA,CAAS,aAAA,CAAc,QAAQ,CAAA;AAC3C,MAAA,GAAA,CAAI,IAAA,GAAO,QAAA;AACX,MAAA,GAAA,CAAI,SAAA,GAAY,SAAA;AAChB,MAAA,GAAA,CAAI,YAAA,CAAa,cAAc,KAAK,CAAA;AACpC,MAAA,GAAA,CAAI,SAAA,GAAY,IAAA;AAEhB,MAAA,GAAA,CAAI,gBAAA,CAAiB,SAAS,MAAM;AAClC,QAAA,IAAI,GAAA,CAAI,YAAA,CAAa,eAAe,CAAA,KAAM,QAAQ,OAAA,EAAQ;AAAA,MAC5D,CAAC,CAAA;AACD,MAAA,OAAO,GAAA;AAAA,IACT,CAAA;AAEA,IAAA,MAAM,QAAQ,MAAM;AAClB,MAAA,KAAA,GAAQ,QAAA,CAAS,cAAc,KAAK,CAAA;AACpC,MAAA,KAAA,CAAM,SAAA,GAAY,qBAAA;AAClB,MAAA,KAAA,CAAM,YAAA,CAAa,QAAQ,OAAO,CAAA;AAClC,MAAA,KAAA,CAAM,YAAA,CAAa,YAAA,EAAc,CAAA,CAAE,IAAI,CAAA;AACvC,MAAA,GAAA,GAAM,MAAA,CAAO,sBAAsB,CAAA,CAAE,OAAA,EAAS,OAAO,MAAM,IAAA,CAAK,EAAE,CAAC,CAAA;AACnE,MAAA,KAAA,GAAQ,MAAA,CAAO,sBAAA,EAAwB,EAAA,EAAI,EAAA,EAAI,GAAG,CAAA;AAClD,MAAA,IAAA,GAAO,MAAA,CAAO,qBAAqB,CAAA,CAAE,MAAA,EAAQ,MAAM,MAAM,IAAA,CAAK,CAAC,CAAC,CAAA;AAChE,MAAA,KAAA,CAAM,MAAA,CAAO,GAAA,EAAK,KAAA,EAAO,IAAI,CAAA;AAC7B,MAAA,KAAA,EAAM;AACN,MAAA,cAAA,CAAe,MAAM,CAAA;AACrB,MAAA,OAAO,KAAA;AAAA,IACT,CAAA;AAEA,IAAA,OAAO;AAAA,MACL,IAAA,EAAM,MAAA;AAAA,MACN,QAAA;AAAA;AAAA,MACA,IAAA,GAAO;AACL,QAAA,KAAA,GAAQ,MAAA,CAAO,UAAU,MAAM;AAC7B,UAAA,IAAA,GAAO,IAAA;AACP,UAAA,IAAI,CAAC,MAAM,MAAA,EAAO;AAClB,UAAA,KAAA,EAAM;AAAA,QACR,CAAC,CAAA;AAAA,MACH,CAAA;AAAA,MACA,OAAA,GAAU;AACR,QAAA,KAAA,IAAQ;AACR,QAAA,KAAA,GAAQ,IAAA;AACR,QAAA,MAAA,EAAO;AACP,QAAA,KAAA,GAAQ,GAAA,GAAM,QAAQ,IAAA,GAAO,IAAA;AAAA,MAC/B,CAAA;AAAA,MACA,OAAA,EAAS,EAAE,OAAA,EAAS,KAAA;AAAM,KAC5B;AAAA,EACF,CAAA;AACF","file":"index.js","sourcesContent":["// @gallerist/plugin-zoom — a zoom tool in the viewer's toolbar: \"− 100% +\".\n//\n// Zoom out, the current zoom (pressing it fits the image again), zoom in. The steps are stops of\n// the zoom range (fit, 150%, 200%, 300%, 400% by default; 100% is the image fitted to the stage), and\n// every step pivots on the stage's centre (`viewer.zoomTo`, which keeps the view inside the image).\n// While the viewer has focus, `+` / `=`, `-` and `0` take the same steps: the renderer's own zoom\n// keys step by a fixed factor, so the tool takes those keys first and the two never disagree.\n//\n// The percentage follows every zoom: the committed one from the viewer's state, and the live\n// transform while a pinch, a wheel or a double click is still moving (the renderer applies those to\n// the current slide's content before it commits them, so the plugin reads that transform).\n// `− +` are unavailable (aria-disabled, still focusable, so focus never drops) at either end of the\n// range and while the current item can't zoom: a video or another non-image, one still loading, one\n// that failed. The percentage is unavailable at fit, where there's nothing to reset.\n\nimport type { Item, Plugin, PluginInstance, ViewerApi } from '@gallerist/core'\n\nexport interface ZoomStrings {\n  /** the tool's group name */\n  zoom: string\n  zoomIn: string\n  zoomOut: string\n  /** the percentage button's name, with the zoom it shows (it fits the image again) */\n  reset: (percent: string) => string\n  /** how a zoom reads (`scale` 1 is the image fitted to the stage) */\n  percent: (scale: number) => string\n}\n\nexport const DEFAULT_ZOOM_STRINGS: ZoomStrings = {\n  zoom: 'Zoom',\n  zoomIn: 'Zoom in',\n  zoomOut: 'Zoom out',\n  reset: (percent) => `${percent}, fit to screen`,\n  percent: (scale) => `${Math.round(scale * 100)}%`,\n}\n\nexport interface ZoomOptions {\n  /** The zoom levels − and + step through, as scales (1 = fit). Default `[1, 1.5, 2, 3, 4]`, the DOM\n   *  renderer's range (fit to 400%); the first and last are the ends of the range. A stop outside\n   *  that range is brought into it (the renderer can't zoom past it). */\n  stops?: readonly number[]\n  /** Whether an item can zoom (when it has loaded). Default: images (`type: 'image'`). */\n  zoomable?: (item: Item) => boolean\n  /** `+` / `=`, `-` and `0` step through the stops while the viewer has focus. Default true; `false`\n   *  leaves those keys to the renderer (which steps by its own factor). While it's on, no plugin's\n   *  keymap gets them: the tool takes them while the item can zoom, and marks them taken\n   *  (`preventDefault()`) while it can't, so the renderer runs nothing for them. */\n  keys?: boolean\n  /** UI text overrides, for translation; merged over English. */\n  strings?: Partial<ZoomStrings>\n}\n\n/** The plugin's instance: `zoomable` is the option's predicate (or the default), which\n *  plugin-shortcuts reads to list the zoom keys only while the collection has an item that zooms. */\nexport interface ZoomInstance extends PluginInstance {\n  zoomable: (item: Item) => boolean\n}\n\nexport const DEFAULT_STOPS: readonly number[] = [1, 1.5, 2, 3, 4]\n\n// the shared icon family's look (core's ICONS)\nconst icon = (body: string) =>\n  `<svg class=\"gallerist-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\">${body}</svg>`\nconst MINUS = icon('<path d=\"M5 12h14\"/>')\nconst PLUS = icon('<path d=\"M5 12h14\"/><path d=\"M12 5v14\"/>')\n\n/** Within a hair of a stop counts as on it (zooms are floats; a pinch rarely lands exactly). */\nconst EPS = 0.01\n\n/** The stop after `scale` going `dir` (+1 in, −1 out), or `scale` itself at that end. */\nexport function nextStop(stops: readonly number[], scale: number, dir: 1 | -1): number {\n  const sorted = [...stops].sort((a, b) => a - b)\n  if (dir > 0) return sorted.find((s) => s > scale + EPS) ?? scale\n  return [...sorted].reverse().find((s) => s < scale - EPS) ?? scale\n}\n\nconst SCALE = /scale\\(\\s*([\\d.]+)/\n/** The DOM renderer's zoom range: fit to 400%. */\nconst RANGE = [1, 4] as const\n// Where the keys are someone else's: a field, a dialog or menu in the viewer (the View popover), or a\n// widget whose own keys these are. A node inside a shadow root counts by itself (the event's first\n// target). The viewer's root (an overlay is a dialog) and what holds it don't count.\nconst OWNED =\n  'input,textarea,select,[contenteditable]:not([contenteditable=\"false\"]),[role=dialog],[role=menu],[role=spinbutton],[role=slider],[role=tree],[role=grid]'\nconst theirs = (e: KeyboardEvent, root: HTMLElement) => {\n  const at = (e.composedPath()[0] as Element).closest?.(OWNED)\n  return !!at && !at.contains(root)\n}\n\nexport function zoom(opts: ZoomOptions = {}): Plugin {\n  const t: ZoomStrings = { ...DEFAULT_ZOOM_STRINGS, ...opts.strings }\n  const stops = (opts.stops?.length ? opts.stops : DEFAULT_STOPS)\n    .map((s) => Math.min(RANGE[1], Math.max(RANGE[0], s)))\n    .sort((a, b) => a - b)\n  const min = stops[0] ?? 1\n  const max = stops[stops.length - 1] ?? 1\n  const zoomable = opts.zoomable ?? ((item: Item) => item.type === 'image')\n\n  return (viewer: ViewerApi): ZoomInstance => {\n    let group: HTMLElement | null = null\n    let out: HTMLButtonElement | null = null\n    let level: HTMLButtonElement | null = null\n    let into: HTMLButtonElement | null = null\n    let root: HTMLElement | null = null\n    let unsub: (() => void) | null = null\n    let watch: MutationObserver | null = null\n    let live: number | null = null // the transform a gesture shows before it commits\n\n    // whether the current item can zoom now: an image (by default) that has loaded\n    const canZoom = () => {\n      const { cursor, loaded } = viewer.getState()\n      const item = viewer.getCollection().groups[cursor.g]?.items[cursor.i]\n      return !!item && zoomable(item) && loaded[item.id] === 'loaded'\n    }\n    const scale = () => live ?? viewer.getState().zoom.scale\n\n    const off = (btn: HTMLButtonElement | null, disabled: boolean) => {\n      if (!btn) return\n      if (disabled) btn.setAttribute('aria-disabled', 'true')\n      else btn.removeAttribute('aria-disabled')\n    }\n    const paint = () => {\n      if (!level) return\n      const s = Math.max(min, scale())\n      const percent = t.percent(s)\n      const ok = canZoom()\n      if (level.textContent !== percent) level.textContent = percent\n      level.setAttribute('aria-label', t.reset(percent))\n      off(out, !ok || s <= min + EPS)\n      off(into, !ok || s >= max - EPS)\n      off(level, s <= 1 + EPS)\n    }\n\n    // a zoom from the tool or its keys says its percentage (a pinch or a wheel shows it only)\n    const say = () => {\n      const live = root?.querySelector('.gallerist-live')\n      if (live) live.textContent = t.percent(viewer.getState().zoom.scale)\n    }\n    const step = (dir: 1 | -1) => {\n      if (!canZoom()) return\n      const s = scale()\n      const to = nextStop(stops, s, dir)\n      if (to === s) return\n      viewer.zoomTo(to)\n      say()\n    }\n    const fit = () => {\n      if (viewer.getState().zoom.scale <= 1 + EPS) return\n      viewer.resetZoom()\n      say()\n    }\n\n    // the renderer's zoom keys step by its own factor: take them first (capture on the viewer's\n    // root), unless they're someone else's (typing, a dialog, a slider: OWNED) or a chord (the\n    // browser's zoom). While the item can't zoom they do nothing here, as the tool shows, and go on\n    // to the page (marked taken, so the renderer doesn't zoom it either).\n    const onKey = (e: KeyboardEvent) => {\n      const dir = e.key === '+' || e.key === '=' ? 1 : e.key === '-' ? -1 : e.key === '0' ? 0 : null\n      if (dir === null || e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return\n      if (theirs(e, e.currentTarget as HTMLElement)) return\n      e.preventDefault()\n      if (!canZoom()) return\n      e.stopImmediatePropagation()\n      if (dir === 0) fit()\n      else step(dir)\n    }\n\n    // A gesture's live transform on the current slide's content (the renderer commits it at the\n    // end): show it while it moves. A drag to dismiss shrinks the content too; that isn't a zoom.\n    const onMutate = (records: MutationRecord[]) => {\n      let seen = false\n      for (const r of records) {\n        const el = r.target as HTMLElement\n        if (!el.classList?.contains('gallerist-content')) continue\n        if (!el.hasAttribute('data-gallerist-current')) continue\n        const m = SCALE.exec(el.style.transform)\n        const s = m ? Number(m[1]) : Number.NaN\n        if (!Number.isFinite(s)) continue\n        live = Math.abs(s - viewer.getState().zoom.scale) > EPS && s >= min ? s : null\n        seen = true\n      }\n      if (seen) paint()\n    }\n\n    const attach = () => {\n      const found = group?.closest<HTMLElement>('.gallerist') ?? null\n      if (!found || found === root) return\n      detach()\n      root = found\n      if (opts.keys !== false) root.addEventListener('keydown', onKey, true)\n      if (typeof MutationObserver !== 'undefined') {\n        watch = new MutationObserver(onMutate)\n        watch.observe(root, { subtree: true, attributeFilter: ['style'] })\n      }\n    }\n    const detach = () => {\n      root?.removeEventListener('keydown', onKey, true)\n      watch?.disconnect()\n      watch = null\n      root = null\n    }\n\n    const button = (className: string, label: string, html: string, onClick: () => void) => {\n      const btn = document.createElement('button')\n      btn.type = 'button'\n      btn.className = className\n      btn.setAttribute('aria-label', label)\n      btn.innerHTML = html\n      // aria-disabled, not disabled: focus stays on a tool that reaches the end of the range\n      btn.addEventListener('click', () => {\n        if (btn.getAttribute('aria-disabled') !== 'true') onClick()\n      })\n      return btn\n    }\n\n    const build = () => {\n      group = document.createElement('div')\n      group.className = 'gallerist-zoom-tool'\n      group.setAttribute('role', 'group')\n      group.setAttribute('aria-label', t.zoom)\n      out = button('gallerist-zoom-out', t.zoomOut, MINUS, () => step(-1))\n      level = button('gallerist-zoom-level', '', '', fit)\n      into = button('gallerist-zoom-in', t.zoomIn, PLUS, () => step(1))\n      group.append(out, level, into)\n      paint()\n      queueMicrotask(attach) // once the renderer has put the tool in the viewer\n      return group\n    }\n\n    return {\n      name: 'zoom',\n      zoomable, // plugin-shortcuts lists the zoom keys while an item can zoom\n      init() {\n        unsub = viewer.subscribe(() => {\n          live = null // a commit (or a new item) settles the live transform\n          if (!root) attach()\n          paint()\n        })\n      },\n      destroy() {\n        unsub?.()\n        unsub = null\n        detach()\n        group = out = level = into = null\n      },\n      regions: { toolbar: build },\n    }\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,68 @@
 {
   "name": "@gallerist/plugin-zoom",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.4.1",
+  "description": "Gallerist plugin — a zoom tool in the toolbar: zoom out, the current zoom (press to fit), zoom in, with the + / - / 0 keys and a live percentage during pinch and wheel zoom.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "peerDependencies": {
+    "@gallerist/core": ">=0.3.0 <1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@gallerist/core": "0.4.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shafayet9780/gallerist.git",
+    "directory": "packages/plugin-zoom"
+  },
+  "homepage": "https://github.com/shafayet9780/gallerist#readme",
+  "bugs": {
+    "url": "https://github.com/shafayet9780/gallerist/issues"
+  },
+  "author": "Shafayet Ahmmed",
+  "keywords": [
+    "lightbox",
+    "gallery",
+    "image-viewer",
+    "media-viewer",
+    "photo-gallery",
+    "carousel",
+    "zoom",
+    "pan",
+    "overlays",
+    "headless",
+    "framework-agnostic",
+    "virtualized",
+    "nested-gallery"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
 }