@enigmax/primitives 0.25.0 → 0.27.0

package/dist/chunk-2RIO4VDV.js

@@ -0,0 +1,121 @@
+import { injectImageStyles } from './chunk-EYZ366LP.js';
+import { lazy, useLayoutEffect, useState, useMemo, useEffect, useRef, useCallback, Suspense } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/react/image/types.ts
+function toItem(source) {
+  return typeof source === "string" ? { src: source } : source;
+}
+var ImageViewer = lazy(() => import('./viewer-N5WLFB24.js').then((module) => ({ default: module.ImageViewer })));
+var prefetched = false;
+function prefetchViewer() {
+  if (prefetched) return;
+  prefetched = true;
+  void import('./viewer-N5WLFB24.js');
+}
+var ZOOM_DEFAULTS = { min: 1, max: 8, wheel: true, doubleClick: true };
+function Image(props) {
+  const {
+    src,
+    alt,
+    images,
+    index,
+    lightbox = true,
+    zoom = true,
+    animate = true,
+    navigation = false,
+    thumbnails = false,
+    menu = false,
+    discardable = false,
+    onDiscard,
+    loop = true,
+    caption,
+    onOpenChange,
+    onIndexChange,
+    styles = true,
+    labels = {},
+    wrapperProps,
+    ...rest
+  } = props;
+  useLayoutEffect(() => {
+    if (styles) injectImageStyles();
+  }, [styles]);
+  const [open, setOpen] = useState(false);
+  const items = useMemo(() => {
+    const set = (images ?? [src]).map(toItem);
+    return set.some((entry) => entry.src === src) ? set : [{ src, alt }, ...set];
+  }, [images, src, alt]);
+  const initial = useMemo(() => {
+    if (typeof index === "number" && index >= 0 && index < items.length) return index;
+    const found = items.findIndex((entry) => entry.src === src);
+    return found === -1 ? 0 : found;
+  }, [index, items, src]);
+  const [current, setCurrent] = useState(initial);
+  useEffect(() => setCurrent(initial), [initial]);
+  const triggerRef = useRef(null);
+  const thumbnailRef = useRef(null);
+  const shown = useRef(current);
+  shown.current = current;
+  const origin = useCallback(() => shown.current === initial ? thumbnailRef.current?.getBoundingClientRect() ?? null : null, [initial]);
+  const zoomOptions = useMemo(() => {
+    if (zoom === false) return null;
+    const given = zoom === true ? {} : zoom;
+    return { ...ZOOM_DEFAULTS, ...given, doubleClick: given.doubleClick !== false, wheel: given.wheel !== false };
+  }, [zoom]);
+  const menuOptions = useMemo(() => menu === false ? null : menu === true ? {} : menu, [menu]);
+  const show = useCallback(() => {
+    if (!lightbox) return;
+    setOpen(true);
+    onOpenChange?.(true);
+  }, [lightbox, onOpenChange]);
+  const close = useCallback(() => {
+    setOpen(false);
+    onOpenChange?.(false);
+    triggerRef.current?.focus();
+  }, [onOpenChange]);
+  const goTo = useCallback((next) => {
+    setCurrent(next);
+    const item = items[next];
+    if (item) onIndexChange?.(next, item);
+  }, [items, onIndexChange]);
+  const image = /* @__PURE__ */ jsx("img", { ref: thumbnailRef, src, alt, ...rest });
+  return /* @__PURE__ */ jsxs("span", { ...wrapperProps, "data-enigma-image": "", "data-clickable": lightbox ? "" : void 0, children: [
+    lightbox ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "data-enigma-image-trigger": "",
+        "aria-label": labels.open ? `${labels.open}: ${alt}` : alt,
+        "aria-haspopup": "dialog",
+        onClick: show,
+        onPointerEnter: prefetchViewer,
+        onFocus: prefetchViewer,
+        children: image
+      }
+    ) : image,
+    open && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      ImageViewer,
+      {
+        items,
+        index: current,
+        onIndex: goTo,
+        onClose: close,
+        zoom: zoomOptions,
+        navigation,
+        thumbnails,
+        menu: menuOptions,
+        discardable,
+        onDiscard,
+        loop,
+        caption,
+        origin,
+        animate,
+        styles,
+        labels
+      }
+    ) })
+  ] });
+}
+
+export { Image };

package/dist/{chunk-DZMHY3SU.js → chunk-CPJJ3FPW.js}

@@ -1,4 +1,4 @@
-import { createContextMenu, clipboardAction, performClipboardAction, inspectClipboardTarget, CLIPBOARD_PREFIX, clipboardEntries, isAction, clipboardHasText } from './chunk-Z3VDE7OA.js';
+import { createContextMenu, clipboardAction, performClipboardAction, inspectClipboardTarget, CLIPBOARD_PREFIX, clipboardEntries, isAction, clipboardHasText } from './chunk-YQV5XZIA.js';
 import { shortcutTokens } from './chunk-4VUHQFAT.js';
 import { Slot } from './chunk-HS3X3XCW.js';
 import { shortenQuery } from './chunk-4ZPMP47J.js';
@@ -23,6 +23,13 @@ var CONTEXT_MENU_STYLES = `
     --enigma-menu-accent: #fbbf24;
     --enigma-menu-danger: #f87171;
     --enigma-menu-danger-bg: rgba(248, 113, 113, 0.12);
+
+    /* Above the lightbox, which sits at 9999, because a menu is opened FROM whatever is on
+       top: the image viewer's own three-dot menu was portalled to the same body and painted
+       underneath it, so its rows could be neither seen nor pressed. A menu is the topmost
+       transient surface on a page, and this is the number that says so. It belongs here and
+       not in the light-scheme block, or half the readers get an invalid z-index. */
+    --enigma-menu-z: 10000;
 }
 
 @media (prefers-color-scheme: light) {
@@ -43,7 +50,7 @@ var CONTEXT_MENU_STYLES = `
    and what a menu opened at the pointer needs. Fixed rather than absolute so a scrolling
    ancestor cannot drag it away from the place it was opened. */
 [data-enigma-menu-panel] {
-    position: fixed; z-index: 60;
+    position: fixed; z-index: var(--enigma-menu-z);
     box-sizing: border-box;
     min-width: var(--enigma-menu-min-width);
     max-width: min(22rem, calc(100vw - 1rem));
@@ -245,6 +252,7 @@ function ContextMenuRoot(props) {
   const {
     items,
     title,
+    searchable,
     disabled = false,
     fuse,
     fuseOptions,
@@ -272,6 +280,7 @@ function ContextMenuRoot(props) {
   const instance = useMemo(() => createContextMenu({
     items,
     title,
+    searchable,
     fuse,
     fuseOptions,
     matcher,
@@ -328,8 +337,8 @@ function ContextMenuRoot(props) {
     return [...clip, { type: "separator", id: `${CLIPBOARD_PREFIX}rule` }, ...rows];
   }, []);
   useEffect(() => {
-    instance.update({ items: withClipboard(currentItems.current), title });
-  }, [instance, signature, title, withClipboard]);
+    instance.update({ items: withClipboard(currentItems.current), title, searchable });
+  }, [instance, signature, title, searchable, withClipboard]);
   const cancelClose = useCallback(() => {
     window.clearTimeout(closing.current);
   }, []);
@@ -699,6 +708,7 @@ function ContextMenuRow({ level, index, entry, children, ...props }) {
     if (entry.type === "separator") return /* @__PURE__ */ jsx("div", { ...props, role: "separator", "data-enigma-menu-separator": "" });
     return /* @__PURE__ */ jsx("p", { ...props, "data-enigma-menu-label": "", "aria-hidden": "true", children: entry.label });
   }
+  const reserveCheck = state?.entries.some((entry2) => isAction(entry2) && entry2.checked !== void 0) ?? false;
   const checkable = item.checked !== void 0;
   const role = checkable ? item.group ? "menuitemradio" : "menuitemcheckbox" : "menuitem";
   return /* @__PURE__ */ jsx(
@@ -741,13 +751,13 @@ function ContextMenuRow({ level, index, entry, children, ...props }) {
         if (event.defaultPrevented || item.disabled || event.detail !== 0) return;
         menu.instance.select(level, index);
       },
-      children: children ?? menu.renderItem?.(item, level, index) ?? /* @__PURE__ */ jsx(ContextMenuRowContent, { item, submenu })
+      children: children ?? menu.renderItem?.(item, level, index) ?? /* @__PURE__ */ jsx(ContextMenuRowContent, { item, submenu, reserveCheck })
     }
   );
 }
-function ContextMenuRowContent({ item, submenu }) {
+function ContextMenuRowContent({ item, submenu, reserveCheck }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    item.checked !== void 0 && /* @__PURE__ */ jsx("span", { "data-enigma-menu-check": "", "aria-hidden": "true" }),
+    (item.checked !== void 0 || reserveCheck) && /* @__PURE__ */ jsx("span", { "data-enigma-menu-check": "", "aria-hidden": "true" }),
     item.icon ? /* @__PURE__ */ jsx("span", { "data-enigma-menu-icon": "", children: item.icon }) : null,
     /* @__PURE__ */ jsxs("span", { "data-enigma-menu-item-text": "", children: [
       /* @__PURE__ */ jsx("span", { "data-enigma-menu-item-label": "", children: item.label }),

package/dist/chunk-EYZ366LP.js

@@ -0,0 +1,189 @@
+// src/react/image/styles.ts
+var IMAGE_STYLES = `
+:root {
+    --enigma-image-backdrop: rgba(0, 0, 0, 0.92);
+    --enigma-image-text: #f5f5f5;
+    --enigma-image-muted: #a3a3a3;
+    --enigma-image-control-bg: rgba(23, 23, 23, 0.72);
+    --enigma-image-control-hover: rgba(64, 64, 64, 0.82);
+    --enigma-image-control-size: 2.25rem;
+    --enigma-image-radius: 0.625rem;
+    --enigma-image-gap: 0.75rem;
+    --enigma-image-thumb-size: 3.5rem;
+    --enigma-image-focus: #f5f5f5;
+    /* Above the page's own chrome, not merely above its content: a header or a sticky sidebar
+       with a z-index of its own would otherwise paint over the dialog covering it. */
+    --enigma-image-z: 9999;
+    /* How long the picture takes to fly out of the page and back into it, and the curve it
+       flies on. They are the numbers core/image-viewer.ts waits for, so a project that
+       changes one here changes it there - see the note above the keyframes. */
+    --enigma-image-flight: 300ms;
+    --enigma-image-flight-ease: cubic-bezier(0.2, 0, 0.2, 1);
+}
+
+/* The thumbnail in the page. Only what the behaviour needs: the pointer says it opens, and
+   the box is the caller's to size. */
+[data-enigma-image] { display: inline-flex; max-width: 100%; }
+[data-enigma-image][data-clickable] { cursor: zoom-in; }
+/* Stated on the picture as well as inherited: a project that restyles the trigger button is
+   one cursor: pointer away from a thumbnail that no longer says it enlarges. */
+[data-enigma-image][data-clickable] img { cursor: zoom-in; }
+[data-enigma-image] img { display: block; max-width: 100%; height: auto; }
+/* A real box, never display:contents: an element without one cannot be focused in Chromium,
+   so a viewer closed with Escape would hand focus to the body instead of back to the picture
+   it was opened from, and the next Tab would start at the top of the page. */
+[data-enigma-image-trigger] {
+    display: inline-flex; max-width: 100%; padding: 0; margin: 0;
+    background: none; border: 0; color: inherit; font: inherit; cursor: inherit;
+}
+[data-enigma-image-trigger]:focus-visible img { outline: 2px solid var(--enigma-image-focus); outline-offset: 3px; }
+
+/* The viewer. Fixed and portalled: a lightbox inside the page's own stacking context is a
+   lightbox some ancestor's overflow or transform will clip. */
+[data-enigma-image-viewer] {
+    position: fixed; inset: 0; z-index: var(--enigma-image-z);
+    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
+    background: var(--enigma-image-backdrop);
+    color: var(--enigma-image-text);
+}
+
+/* The opening: the backdrop arrives while the picture flies out of the page, and the toolbar
+   and the strip arrive with it rather than being there first over a picture that is still on
+   its way. data-state is only ever "opening" or "closing" while an animation is meant to be
+   running, so a viewer that skipped the flight - reduced motion, animate={false} - matches
+   none of these rules and simply exists. */
+@keyframes enigma-image-in { from { background-color: transparent; } to { background-color: var(--enigma-image-backdrop); } }
+@keyframes enigma-image-chrome { from { opacity: 0; } to { opacity: 1; } }
+[data-enigma-image-viewer][data-state="opening"] { animation: enigma-image-in var(--enigma-image-flight) ease-out; }
+[data-enigma-image-viewer][data-state="opening"] [data-enigma-image-bar],
+[data-enigma-image-viewer][data-state="opening"] [data-enigma-image-foot],
+[data-enigma-image-viewer][data-state="opening"] [data-enigma-image-nav] {
+    animation: enigma-image-chrome var(--enigma-image-flight) ease-out;
+}
+/* On the way out the backdrop drains, and the dialog stops taking presses: it is over the
+   page again, so a click through it would land on whatever is now under the pointer. */
+[data-enigma-image-viewer][data-state="closing"] {
+    background-color: transparent; pointer-events: none;
+    transition: background-color var(--enigma-image-flight) var(--enigma-image-flight-ease);
+}
+[data-enigma-image-viewer][data-state="closing"] [data-enigma-image-bar],
+[data-enigma-image-viewer][data-state="closing"] [data-enigma-image-foot],
+[data-enigma-image-viewer][data-state="closing"] [data-enigma-image-nav] {
+    opacity: 0; transition: opacity calc(var(--enigma-image-flight) / 2) ease-in;
+}
+
+[data-enigma-image-bar] {
+    display: flex; align-items: center; gap: 0.5rem;
+    padding: var(--enigma-image-gap);
+}
+[data-enigma-image-counter] {
+    font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--enigma-image-muted);
+    margin-inline-end: auto;
+}
+
+[data-enigma-image-button] {
+    display: grid; place-items: center; flex: none;
+    width: var(--enigma-image-control-size); height: var(--enigma-image-control-size);
+    padding: 0; color: var(--enigma-image-text);
+    background: var(--enigma-image-control-bg); border: 0; border-radius: 999px;
+    cursor: pointer;
+}
+[data-enigma-image-button]:hover { background: var(--enigma-image-control-hover); }
+[data-enigma-image-button]:focus-visible { outline: 2px solid var(--enigma-image-focus); outline-offset: 2px; }
+[data-enigma-image-button][disabled] { opacity: 0.35; cursor: not-allowed; }
+
+/* The frame the picture is fitted into, and the surface every gesture is measured against. */
+[data-enigma-image-frame] {
+    position: relative; overflow: hidden;
+    display: grid; place-items: center;
+    /* Room for the arrows down each side, so they sit beside the picture rather than on it. */
+    padding: 0 calc(var(--enigma-image-control-size) + var(--enigma-image-gap) * 1.5);
+    /* The drag IS the control once zoomed, so the page must not scroll under it. */
+    touch-action: none;
+    -webkit-user-select: none; user-select: none;
+}
+[data-enigma-image-frame] img {
+    max-width: 100%; max-height: 100%;
+    -webkit-user-drag: none;
+    will-change: transform;
+}
+/* Only while it is MOVING, which is not the same as "during the flight".
+   A transition left on permanently would put 300ms of lag between the wheel and the zoom, and
+   turn every pan into a drag the picture follows late. And one left on during "pending" is
+   worse than useless: putting the picture on the thumbnail is itself a transform change, so it
+   animated there over 300ms - behind a hidden element - and by the time anybody could see it
+   the flight was nearly over. */
+[data-enigma-image-frame][data-flying="moving"] img { transition: transform var(--enigma-image-flight) var(--enigma-image-flight-ease); }
+/* Not drawn until there is somewhere to fly from - see the note on the attribute. The spinner
+   is what stands in for it, the same one a slow picture gets. */
+[data-enigma-image-frame][data-flying="pending"] img { visibility: hidden; }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-image-frame][data-flying="moving"] img { transition: none; }
+}
+
+/* The cursor says what a press does, which in a lightbox is three different things. The empty
+   part of the frame IS the backdrop and closes it; the picture at rest takes a double press to
+   enlarge; once it is enlarged the gesture is a drag. */
+[data-enigma-image-frame] { cursor: zoom-out; }
+[data-enigma-image-frame][data-zoom] img { cursor: zoom-in; }
+[data-enigma-image-frame][data-zoomed],
+[data-enigma-image-frame][data-zoomed] img { cursor: grab; }
+[data-enigma-image-frame][data-panning],
+[data-enigma-image-frame][data-panning] img { cursor: grabbing; }
+[data-enigma-image-frame][data-loading] img { opacity: 0.35; }
+
+/* Left and right sit over the picture rather than beside it: the frame is the biggest thing
+   on screen and the arrows have to be reachable without hunting for an edge. */
+[data-enigma-image-nav] {
+    position: absolute; top: 50%; translate: 0 -50%;
+    width: var(--enigma-image-control-size); height: var(--enigma-image-control-size);
+}
+[data-enigma-image-nav="previous"] { left: var(--enigma-image-gap); }
+[data-enigma-image-nav="next"] { right: var(--enigma-image-gap); }
+
+[data-enigma-image-spinner] {
+    position: absolute; width: 1.75rem; height: 1.75rem;
+    border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--enigma-image-text);
+    border-radius: 999px; animation: enigma-image-spin 700ms linear infinite;
+}
+@keyframes enigma-image-spin { to { rotate: 360deg; } }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-image-spinner] { animation-duration: 2s; }
+}
+
+[data-enigma-image-foot] { display: grid; gap: 0.5rem; padding: var(--enigma-image-gap); }
+[data-enigma-image-caption] {
+    margin: 0; text-align: center; font-size: 0.8125rem; line-height: 1.5;
+    color: var(--enigma-image-muted);
+}
+
+/* The strip. Scrolls on its own rather than wrapping: a gallery of forty is one row you drag
+   through, not five rows that push the picture off the screen. */
+[data-enigma-image-strip] {
+    display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: thin;
+    justify-content: safe center;
+    padding-bottom: 0.25rem;
+}
+[data-enigma-image-thumb] {
+    flex: none; width: var(--enigma-image-thumb-size); height: var(--enigma-image-thumb-size);
+    padding: 0; overflow: hidden;
+    background: none; border: 0; border-radius: 0.375rem;
+    opacity: 0.55; cursor: pointer;
+}
+[data-enigma-image-thumb] img { width: 100%; height: 100%; object-fit: cover; }
+[data-enigma-image-thumb]:hover { opacity: 0.85; }
+[data-enigma-image-thumb][aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--enigma-image-focus); }
+[data-enigma-image-thumb]:focus-visible { outline: 2px solid var(--enigma-image-focus); outline-offset: 2px; }
+`;
+var injected = false;
+function injectImageStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  if (document.querySelector("[data-enigma-image-styles]")) return;
+  const element = document.createElement("style");
+  element.setAttribute("data-enigma-image-styles", "");
+  element.textContent = IMAGE_STYLES;
+  document.head.prepend(element);
+}
+
+export { injectImageStyles };

package/dist/chunk-HUUINHPR.js

@@ -0,0 +1,135 @@
+// src/core/image-viewer.ts
+var IDENTITY = { scale: 1, x: 0, y: 0 };
+var ZOOM_LIMITS = { min: 1, max: 8 };
+var ZOOM_STEP = 1.35;
+var ZOOM_DOUBLE = 2.5;
+function clampScale(scale, limits = ZOOM_LIMITS) {
+  return Math.min(Math.max(scale, limits.min), limits.max);
+}
+function wheelFactor(deltaY, deltaMode = 0) {
+  const pixels = deltaMode === 1 ? deltaY * 16 : deltaMode === 2 ? deltaY * 400 : deltaY;
+  return Math.exp(-Math.min(Math.max(pixels, -240), 240) / 320);
+}
+function zoomAt(current, factor, point, box, limits = ZOOM_LIMITS) {
+  const scale = clampScale(current.scale * factor, limits);
+  if (scale === current.scale) return current;
+  const dx = point.x - (box.left + box.width / 2);
+  const dy = point.y - (box.top + box.height / 2);
+  const ratio = scale / current.scale;
+  return { scale, x: dx - (dx - current.x) * ratio, y: dy - (dy - current.y) * ratio };
+}
+function clampPan(transform, box, natural) {
+  const width = natural.width * transform.scale;
+  const height = natural.height * transform.scale;
+  const x = Math.max(0, (width - box.width) / 2);
+  const y = Math.max(0, (height - box.height) / 2);
+  return {
+    scale: transform.scale,
+    x: Math.min(Math.max(transform.x, -x), x),
+    y: Math.min(Math.max(transform.y, -y), y)
+  };
+}
+function fittedSize(natural, box) {
+  if (!natural.width || !natural.height) return { width: box.width, height: box.height };
+  const ratio = Math.min(box.width / natural.width, box.height / natural.height, 1);
+  return { width: natural.width * ratio, height: natural.height * ratio };
+}
+function pinchDistance(a, b) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+function nextIndex(index, length, step, options = {}) {
+  const { loop = true, skip } = options;
+  if (length <= 0) return -1;
+  let next = index;
+  for (let moved = 0; moved < length; moved += 1) {
+    next += step;
+    if (next < 0 || next >= length) {
+      if (!loop) return -1;
+      next = (next % length + length) % length;
+    }
+    if (!skip?.has(next)) return next;
+  }
+  return -1;
+}
+function filenameFrom(url, fallback = "image") {
+  try {
+    const { pathname } = new URL(url, typeof location === "undefined" ? "https://localhost" : location.href);
+    const name = pathname.split("/").filter(Boolean).pop();
+    return name && name.includes(".") ? decodeURIComponent(name) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+async function downloadFile(url, filename) {
+  const name = filename ?? filenameFrom(url);
+  try {
+    const response = await fetch(url, { mode: "cors", credentials: "omit" });
+    if (!response.ok) throw new Error(`the file answered ${response.status}`);
+    const blob = await response.blob();
+    const href = URL.createObjectURL(blob);
+    saveAs(href, name);
+    setTimeout(() => URL.revokeObjectURL(href), 1e4);
+  } catch {
+    saveAs(url, name, true);
+  }
+}
+function saveAs(href, name, external = false) {
+  if (typeof document === "undefined") return;
+  const anchor = document.createElement("a");
+  anchor.href = href;
+  anchor.download = name;
+  anchor.rel = "noopener";
+  if (external) anchor.target = "_blank";
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+}
+function dataUrlToBlob(url) {
+  const comma = url.indexOf(",");
+  if (!url.startsWith("data:") || comma === -1) throw new Error("not a data URL");
+  const head = url.slice("data:".length, comma);
+  const body = url.slice(comma + 1);
+  const base64 = head.endsWith(";base64");
+  const type = (base64 ? head.slice(0, -";base64".length) : head) || "text/plain";
+  if (!base64) return new Blob([decodeURIComponent(body)], { type });
+  const binary = atob(body);
+  const bytes = new Uint8Array(binary.length);
+  for (let at = 0; at < binary.length; at += 1) bytes[at] = binary.charCodeAt(at);
+  return new Blob([bytes], { type });
+}
+function openInNewTab(url) {
+  if (typeof window === "undefined") return;
+  if (!url.startsWith("data:")) {
+    window.open(url, "_blank", "noopener,noreferrer");
+    return;
+  }
+  try {
+    const href = URL.createObjectURL(dataUrlToBlob(url));
+    window.open(href, "_blank", "noopener,noreferrer");
+    setTimeout(() => URL.revokeObjectURL(href), 6e4);
+  } catch {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+}
+var FLIGHT_MS = 300;
+function flightMs(element) {
+  if (!element || typeof getComputedStyle === "undefined") return FLIGHT_MS;
+  const seconds = Number.parseFloat(getComputedStyle(element).transitionDuration);
+  return Number.isFinite(seconds) && seconds > 0 ? seconds * 1e3 : FLIGHT_MS;
+}
+function flightFrom(from, to) {
+  if (!from.width || !from.height || !to.width || !to.height) return null;
+  return {
+    scale: from.width / to.width,
+    // Centre to centre: `translate(x, y) scale(s)` scales about the element's own centre
+    // first, so the offset that lands it on the thumbnail is the distance between them.
+    x: from.left + from.width / 2 - (to.left + to.width / 2),
+    y: from.top + from.height / 2 - (to.top + to.height / 2)
+  };
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+export { FLIGHT_MS, IDENTITY, ZOOM_DOUBLE, ZOOM_LIMITS, ZOOM_STEP, clampPan, clampScale, dataUrlToBlob, downloadFile, filenameFrom, fittedSize, flightFrom, flightMs, nextIndex, openInNewTab, pinchDistance, prefersReducedMotion, wheelFactor, zoomAt };