@enigmax/primitives 0.25.0 → 0.27.0

package/dist/chunk-JLZDS6CV.js

@@ -0,0 +1,177 @@
+// src/core/player.ts
+var SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+var SEEK_STEP = 5;
+var SEEK_JUMP = 10;
+var VOLUME_STEP = 0.05;
+function formatTime(seconds, duration = seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+  const total = Math.floor(seconds);
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  const rest = total % 60;
+  const withHours = Number.isFinite(duration) && duration >= 3600;
+  const pad = (value) => String(value).padStart(2, "0");
+  if (withHours || hours > 0) return `${hours}:${pad(minutes)}:${pad(rest)}`;
+  return `${minutes}:${pad(rest)}`;
+}
+function progress(time, duration) {
+  if (!Number.isFinite(duration) || duration <= 0) return 0;
+  return Math.min(Math.max(time / duration, 0), 1);
+}
+function fractionAt(box, clientX) {
+  if (!box.width) return 0;
+  return Math.min(Math.max((clientX - box.left) / box.width, 0), 1);
+}
+function bufferedAhead(ranges, time, duration) {
+  if (!ranges || !Number.isFinite(duration) || duration <= 0) return 0;
+  for (let at = 0; at < ranges.length; at += 1) {
+    if (ranges.start(at) <= time && ranges.end(at) >= time) return Math.min(ranges.end(at) / duration, 1);
+  }
+  return 0;
+}
+function nextSpeed(current, step = 1) {
+  const at = SPEEDS.indexOf(current);
+  const from = at === -1 ? SPEEDS.indexOf(1) : at;
+  return SPEEDS[(from + step + SPEEDS.length) % SPEEDS.length];
+}
+function commandFor(key) {
+  if (key === " " || key === "k" || key === "K") return { type: "toggle" };
+  if (key === "ArrowRight") return { type: "seek", by: SEEK_STEP };
+  if (key === "ArrowLeft") return { type: "seek", by: -SEEK_STEP };
+  if (key === "l" || key === "L") return { type: "seek", by: SEEK_JUMP };
+  if (key === "j" || key === "J") return { type: "seek", by: -SEEK_JUMP };
+  if (key === "ArrowUp") return { type: "volume", by: VOLUME_STEP };
+  if (key === "ArrowDown") return { type: "volume", by: -VOLUME_STEP };
+  if (key === "m" || key === "M") return { type: "mute" };
+  if (key === "f" || key === "F") return { type: "fullscreen" };
+  if (key === "c" || key === "C") return { type: "captions" };
+  if (key === "p" || key === "P") return { type: "pip" };
+  if (key >= "0" && key <= "9") return { type: "seekTo", fraction: Number(key) / 10 };
+  return null;
+}
+function isTypingTarget(target) {
+  const element = target;
+  if (!element || typeof element.tagName !== "string") return false;
+  if (element.isContentEditable) return true;
+  return ["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName);
+}
+function fullscreenElement() {
+  if (typeof document === "undefined") return null;
+  const legacy = document;
+  return document.fullscreenElement ?? legacy.webkitFullscreenElement ?? null;
+}
+async function toggleFullscreen(container, video) {
+  const legacyDocument = document;
+  if (fullscreenElement()) {
+    await (document.exitFullscreen?.() ?? legacyDocument.webkitExitFullscreen?.());
+    return;
+  }
+  const legacyElement = container;
+  if (container.requestFullscreen) return void await container.requestFullscreen();
+  if (legacyElement.webkitRequestFullscreen) return void await legacyElement.webkitRequestFullscreen();
+  const iosVideo = video;
+  iosVideo?.webkitEnterFullscreen?.();
+}
+function supportsPip() {
+  return typeof document !== "undefined" && Boolean(document.pictureInPictureEnabled);
+}
+async function togglePip(video) {
+  if (document.pictureInPictureElement) return void await document.exitPictureInPicture();
+  await video.requestPictureInPicture();
+}
+var SOURCE_TYPES = {
+  mp4: "video/mp4",
+  m4v: "video/mp4",
+  webm: "video/webm",
+  ogv: "video/ogg",
+  mov: "video/quicktime",
+  mkv: "video/x-matroska",
+  m3u8: "application/vnd.apple.mpegurl",
+  mpd: "application/dash+xml"
+};
+function sourceType(url) {
+  let path = url;
+  try {
+    path = new URL(url, typeof location === "undefined" ? "https://localhost" : location.href).pathname;
+  } catch {
+    path = url.split("?")[0].split("#")[0];
+  }
+  const name = path.split("/").pop() ?? "";
+  const dot = name.lastIndexOf(".");
+  if (dot <= 0) return void 0;
+  return SOURCE_TYPES[name.slice(dot + 1).toLowerCase()];
+}
+function captionTracks(list) {
+  if (!list) return [];
+  const found = [];
+  for (let at = 0; at < list.length; at += 1) {
+    const track = list[at];
+    if (!track || track.kind !== "subtitles" && track.kind !== "captions") continue;
+    found.push({ index: at, label: track.label || track.language || `Track ${found.length + 1}`, language: track.language });
+  }
+  return found;
+}
+function activeCaption(list) {
+  if (!list) return -1;
+  for (let at = 0; at < list.length; at += 1) if (list[at]?.mode === "showing") return at;
+  return -1;
+}
+function showCaption(list, index) {
+  if (!list) return;
+  for (let at = 0; at < list.length; at += 1) {
+    const track = list[at];
+    if (track) track.mode = at === index ? "showing" : "disabled";
+  }
+}
+function supportsRemote(video) {
+  const element = video;
+  if (!element || element.disableRemotePlayback) return false;
+  return Boolean(element.remote?.prompt ?? element.webkitShowPlaybackTargetPicker);
+}
+function watchRemote(video, onChange) {
+  const element = video;
+  const state = { available: false, connected: false };
+  const publish = (next) => {
+    Object.assign(state, next);
+    onChange({ ...state });
+  };
+  if (element.remote) {
+    const remote = element.remote;
+    const onState = () => publish({ connected: remote.state === "connected" });
+    let watch = null;
+    let cancelled = false;
+    remote.watchAvailability((available) => {
+      if (!cancelled) publish({ available });
+    }).then((id) => {
+      if (cancelled) void remote.cancelWatchAvailability(id).catch(() => {
+      });
+      else watch = id;
+    }).catch(() => {
+      if (!cancelled) publish({ available: true });
+    });
+    for (const name of ["connect", "connecting", "disconnect"]) remote.addEventListener(name, onState);
+    onState();
+    return () => {
+      cancelled = true;
+      for (const name of ["connect", "connecting", "disconnect"]) remote.removeEventListener(name, onState);
+      if (watch !== null) void remote.cancelWatchAvailability(watch).catch(() => {
+      });
+    };
+  }
+  const onAvailability = (event) => publish({ available: event.availability === "available" });
+  const onWireless = () => publish({ connected: Boolean(element.webkitCurrentPlaybackTargetIsWireless) });
+  element.addEventListener("webkitplaybacktargetavailabilitychanged", onAvailability);
+  element.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", onWireless);
+  onWireless();
+  return () => {
+    element.removeEventListener("webkitplaybacktargetavailabilitychanged", onAvailability);
+    element.removeEventListener("webkitcurrentplaybacktargetiswirelesschanged", onWireless);
+  };
+}
+async function promptRemote(video) {
+  const element = video;
+  if (element.remote?.prompt) return void await element.remote.prompt();
+  element.webkitShowPlaybackTargetPicker?.();
+}
+
+export { SEEK_JUMP, SEEK_STEP, SPEEDS, VOLUME_STEP, activeCaption, bufferedAhead, captionTracks, commandFor, formatTime, fractionAt, fullscreenElement, isTypingTarget, nextSpeed, progress, promptRemote, showCaption, sourceType, supportsPip, supportsRemote, toggleFullscreen, togglePip, watchRemote };

package/dist/chunk-O2UJ5ZIX.js

@@ -0,0 +1,387 @@
+import { IDENTITY, prefersReducedMotion, ZOOM_LIMITS, flightFrom, nextIndex, fittedSize, clampPan, zoomAt, pinchDistance, flightMs, ZOOM_STEP, ZOOM_DOUBLE, wheelFactor } from './chunk-HUUINHPR.js';
+import { injectImageStyles } from './chunk-EYZ366LP.js';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { lazy, useLayoutEffect, useRef, useState, useMemo, useCallback, useEffect, Suspense } from 'react';
+
+function Glyph({ children }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.125em", height: "1.125em", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children });
+}
+function Close() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M6 6 18 18M18 6 6 18" }) });
+}
+function Plus() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
+}
+function Minus() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
+}
+function ChevronLeft() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "m15 5-7 7 7 7" }) });
+}
+function ChevronRight() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "m9 5 7 7-7 7" }) });
+}
+function Trash() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" }) });
+}
+function Dots() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "1.125em", height: "1.125em", fill: "currentColor", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.75" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.75" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1.75" })
+  ] });
+}
+function Download() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M12 3v12M7 11l5 5 5-5M4 20h16" }) });
+}
+function NewTab() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M14 4h6v6" }),
+    /* @__PURE__ */ jsx("path", { d: "M20 4 11 13" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 14v5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V7.5A1.5 1.5 0 0 1 5.5 6H10" })
+  ] });
+}
+var ImageMenu = lazy(() => import('./menu-YIGMPFUP.js').then((module) => ({ default: module.ImageMenu })));
+function ImageViewer({
+  items,
+  index,
+  onIndex,
+  onClose,
+  zoom,
+  navigation,
+  thumbnails,
+  menu,
+  discardable,
+  onDiscard,
+  loop,
+  caption,
+  origin,
+  animate,
+  styles,
+  labels
+}) {
+  useLayoutEffect(() => {
+    if (styles) injectImageStyles();
+  }, [styles]);
+  const frameRef = useRef(null);
+  const stripRef = useRef(null);
+  const imageRef = useRef(null);
+  const [transform, setTransform] = useState(IDENTITY);
+  const [loading, setLoading] = useState(true);
+  const [panning, setPanning] = useState(false);
+  const [phase, setPhase] = useState(() => animate && origin && !prefersReducedMotion() ? "measuring" : "open");
+  const [flight, setFlight] = useState(null);
+  const [discarded, setDiscarded] = useState(() => /* @__PURE__ */ new Set());
+  const limits = useMemo(() => ({ min: zoom?.min ?? ZOOM_LIMITS.min, max: zoom?.max ?? ZOOM_LIMITS.max }), [zoom]);
+  const item = items[index];
+  const zoomed = transform.scale > limits.min;
+  const remaining = items.length - discarded.size;
+  const position = useMemo(() => {
+    let seen = 0;
+    for (let at = 0; at <= index && at < items.length; at += 1) if (!discarded.has(at)) seen += 1;
+    return seen;
+  }, [index, items.length, discarded]);
+  const layoutBox = useCallback(() => {
+    const frame = frameRef.current;
+    const element = imageRef.current;
+    if (!frame || !element?.offsetWidth) return null;
+    const box = frame.getBoundingClientRect();
+    return { left: box.left + element.offsetLeft, top: box.top + element.offsetTop, width: element.offsetWidth, height: element.offsetHeight };
+  }, []);
+  const requestClose = useCallback(() => {
+    if (phase === "closing" || phase === "measuring") return onClose();
+    const from = origin?.();
+    const to = layoutBox();
+    const back = animate && !prefersReducedMotion() && from && to ? flightFrom(from, to) : null;
+    if (!back) return onClose();
+    setPhase("closing");
+    setFlight(back);
+  }, [phase, origin, layoutBox, animate, onClose]);
+  const go = useCallback((step) => {
+    const next = nextIndex(index, items.length, step, { loop, skip: discarded });
+    if (next === -1 || next === index) return;
+    onIndex(next);
+  }, [index, items.length, loop, discarded, onIndex]);
+  const showAt = useCallback((next) => {
+    if (next === index || discarded.has(next)) return;
+    onIndex(next);
+  }, [index, discarded, onIndex]);
+  const discard = useCallback(() => {
+    if (!discardable || !item) return;
+    const next = nextIndex(index, items.length, 1, { loop: true, skip: /* @__PURE__ */ new Set([...discarded, index]) });
+    setDiscarded((current) => new Set(current).add(index));
+    onDiscard?.(item, index);
+    if (next === -1) requestClose();
+    else onIndex(next);
+  }, [discardable, item, index, items.length, discarded, onDiscard, onIndex, requestClose]);
+  const reset = useCallback(() => setTransform(IDENTITY), []);
+  useEffect(() => {
+    setTransform(IDENTITY);
+    setLoading(true);
+  }, [item?.src]);
+  const frameBox = useCallback(() => {
+    const box = frameRef.current?.getBoundingClientRect();
+    return box ? { left: box.left, top: box.top, width: box.width, height: box.height } : null;
+  }, []);
+  const bounded = useCallback((next) => {
+    const box = frameBox();
+    const element = imageRef.current;
+    if (!box || !element) return next;
+    const fitted = fittedSize({ width: element.naturalWidth, height: element.naturalHeight }, box);
+    return clampPan(next, box, fitted);
+  }, [frameBox]);
+  const zoomBy = useCallback((factor, point) => {
+    const box = frameBox();
+    if (!box) return;
+    const at = point ?? { x: box.left + box.width / 2, y: box.top + box.height / 2 };
+    setTransform((current) => bounded(zoomAt(current, factor, at, box, limits)));
+  }, [frameBox, bounded, limits]);
+  useEffect(() => {
+    const element = frameRef.current;
+    if (!element || !zoom?.wheel) return;
+    const onWheel = (event) => {
+      event.preventDefault();
+      zoomBy(wheelFactor(event.deltaY, event.deltaMode), { x: event.clientX, y: event.clientY });
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => element.removeEventListener("wheel", onWheel);
+  }, [zoom?.wheel, zoomBy]);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const pinch = useRef(null);
+  const backdropPress = useRef(null);
+  const onPointerDown = useCallback((event) => {
+    if (event.button !== 0 && event.pointerType === "mouse") return;
+    const element = event.currentTarget;
+    backdropPress.current = event.target === element && !zoomed ? { x: event.clientX, y: event.clientY } : null;
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pointers.current.size === 2) {
+      const [a, b] = [...pointers.current.values()];
+      pinch.current = { distance: pinchDistance(a, b), scale: transform.scale };
+      setPanning(false);
+      return;
+    }
+    if (!zoomed) return;
+    event.preventDefault();
+    setPanning(true);
+    try {
+      element.setPointerCapture(event.pointerId);
+    } catch {
+    }
+  }, [zoomed, transform.scale]);
+  const onPointerMove = useCallback((event) => {
+    const previous = pointers.current.get(event.pointerId);
+    if (!previous) return;
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pointers.current.size === 2 && pinch.current) {
+      const [a, b] = [...pointers.current.values()];
+      const distance = pinchDistance(a, b);
+      if (!pinch.current.distance) return;
+      const box = frameBox();
+      if (!box) return;
+      const factor = distance / pinch.current.distance * (pinch.current.scale / transform.scale);
+      setTransform((current) => bounded(zoomAt(current, factor, { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }, box, limits)));
+      return;
+    }
+    if (!panning) return;
+    setTransform((current) => bounded({ ...current, x: current.x + (event.clientX - previous.x), y: current.y + (event.clientY - previous.y) }));
+  }, [panning, bounded, frameBox, limits, transform.scale]);
+  const endPointer = useCallback((event) => {
+    pointers.current.delete(event.pointerId);
+    if (pointers.current.size < 2) pinch.current = null;
+    if (pointers.current.size === 0) setPanning(false);
+    const started = backdropPress.current;
+    backdropPress.current = null;
+    if (!started || event.target !== event.currentTarget) return;
+    if (Math.abs(event.clientX - started.x) < 4 && Math.abs(event.clientY - started.y) < 4) requestClose();
+  }, [requestClose]);
+  useLayoutEffect(() => {
+    if (phase !== "measuring") return;
+    const element = imageRef.current;
+    const from = origin?.();
+    if (!element || !from) {
+      setPhase("open");
+      return;
+    }
+    if (!element.complete) return;
+    const to = layoutBox();
+    const start = to ? flightFrom(from, to) : null;
+    if (!start) {
+      setPhase("open");
+      return;
+    }
+    setFlight(start);
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => {
+        setFlight(null);
+        setPhase("flying");
+      });
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [phase, origin, layoutBox, loading]);
+  useEffect(() => {
+    if (phase !== "flying" && phase !== "closing") return;
+    const element = imageRef.current;
+    const done = (event) => {
+      if (event && event.propertyName !== "transform") return;
+      if (phase === "closing") onClose();
+      else setPhase("open");
+    };
+    element?.addEventListener("transitionend", done);
+    const timer = window.setTimeout(() => done(), flightMs(element) + 80);
+    return () => {
+      element?.removeEventListener("transitionend", done);
+      window.clearTimeout(timer);
+    };
+  }, [phase, onClose]);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented) return;
+      const key = event.key;
+      if (key === "Escape") return void (event.preventDefault(), requestClose());
+      if (navigation && (key === "ArrowRight" || key === "ArrowLeft") && !zoomed) {
+        event.preventDefault();
+        return go(key === "ArrowRight" ? 1 : -1);
+      }
+      if (zoom && (key === "+" || key === "=")) return void (event.preventDefault(), zoomBy(ZOOM_STEP));
+      if (zoom && key === "-") return void (event.preventDefault(), zoomBy(1 / ZOOM_STEP));
+      if (zoom && key === "0") return void (event.preventDefault(), reset());
+      if (zoomed && key.startsWith("Arrow")) {
+        event.preventDefault();
+        const step = event.shiftKey ? 120 : 40;
+        const by = key === "ArrowLeft" ? [step, 0] : key === "ArrowRight" ? [-step, 0] : key === "ArrowUp" ? [0, step] : [0, -step];
+        return setTransform((current) => bounded({ ...current, x: current.x + by[0], y: current.y + by[1] }));
+      }
+      if (discardable && (key === "Delete" || key === "Backspace")) return void (event.preventDefault(), discard());
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [requestClose, navigation, zoom, zoomed, go, zoomBy, reset, bounded, discardable, discard]);
+  useEffect(() => {
+    frameRef.current?.focus();
+    const { body } = document;
+    const overflow = body.style.overflow;
+    body.style.overflow = "hidden";
+    return () => {
+      body.style.overflow = overflow;
+    };
+  }, []);
+  useEffect(() => {
+    if (!thumbnails) return;
+    stripRef.current?.querySelector("[aria-current=true]")?.scrollIntoView({ block: "nearest", inline: "center" });
+  }, [thumbnails, index]);
+  if (!item) return null;
+  const drawn = flight ?? transform;
+  const style = { transform: `translate(${drawn.x}px, ${drawn.y}px) scale(${drawn.scale})` };
+  const counter = (labels.counter ?? "{index} of {total}").replace("{index}", String(position)).replace("{total}", String(remaining));
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-enigma-image-viewer": "",
+        "data-state": phase === "measuring" || phase === "flying" ? "opening" : phase,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": labels.viewer ?? "Image viewer",
+        onPointerDown: (event) => {
+          if (event.target === event.currentTarget) requestClose();
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { "data-enigma-image-bar": "", children: [
+            navigation && /* @__PURE__ */ jsx("span", { "data-enigma-image-counter": "", children: counter }),
+            !navigation && /* @__PURE__ */ jsx("span", { "data-enigma-image-counter": "" }),
+            zoom && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "aria-label": labels.zoomOut ?? "Zoom out", title: labels.zoomOut ?? "Zoom out", disabled: transform.scale <= limits.min, onClick: () => zoomBy(1 / ZOOM_STEP), children: /* @__PURE__ */ jsx(Minus, {}) }),
+              /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "aria-label": labels.zoomIn ?? "Zoom in", title: labels.zoomIn ?? "Zoom in", disabled: transform.scale >= limits.max, onClick: () => zoomBy(ZOOM_STEP), children: /* @__PURE__ */ jsx(Plus, {}) })
+            ] }),
+            discardable && /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "aria-label": labels.discard ?? "Discard this image", title: labels.discard ?? "Discard this image", onClick: discard, children: /* @__PURE__ */ jsx(Trash, {}) }),
+            menu && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(MenuButton, { label: labels.menu ?? "More", onPress: void 0 }), children: /* @__PURE__ */ jsx(ImageMenu, { item, index, options: menu, labels }) }),
+            /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "aria-label": labels.close ?? "Close", title: labels.close ?? "Close", onClick: requestClose, children: /* @__PURE__ */ jsx(Close, {}) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: frameRef,
+              "data-enigma-image-frame": "",
+              "data-zoom": zoom ? "" : void 0,
+              "data-flying": phase === "open" ? void 0 : phase === "measuring" ? "pending" : "moving",
+              "data-zoomed": zoomed ? "" : void 0,
+              "data-panning": panning ? "" : void 0,
+              "data-loading": loading ? "" : void 0,
+              tabIndex: -1,
+              onPointerDown,
+              onPointerMove,
+              onPointerUp: endPointer,
+              onPointerCancel: endPointer,
+              onDoubleClick: (event) => {
+                if (!zoom?.doubleClick || phase !== "open") return;
+                if (zoomed) return reset();
+                zoomBy(ZOOM_DOUBLE / transform.scale, { x: event.clientX, y: event.clientY });
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    ref: imageRef,
+                    src: item.src,
+                    alt: item.alt ?? "",
+                    style,
+                    draggable: false,
+                    onLoad: () => setLoading(false),
+                    onError: () => setLoading(false)
+                  },
+                  item.src
+                ),
+                loading && /* @__PURE__ */ jsx("span", { "data-enigma-image-spinner": "", role: "progressbar", "aria-label": labels.viewer ?? "Image viewer" }),
+                navigation && remaining > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "data-enigma-image-nav": "previous", "aria-label": labels.previous ?? "Previous image", title: labels.previous ?? "Previous image", onClick: () => go(-1), children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
+                  /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-image-button": "", "data-enigma-image-nav": "next", "aria-label": labels.next ?? "Next image", title: labels.next ?? "Next image", onClick: () => go(1), children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { "data-enigma-image-foot": "", children: [
+            (item.caption ?? caption) && /* @__PURE__ */ jsx("p", { "data-enigma-image-caption": "", children: item.caption ?? caption }),
+            thumbnails && remaining > 1 && /* @__PURE__ */ jsx("div", { ref: stripRef, "data-enigma-image-strip": "", role: "tablist", "aria-label": labels.thumbnails ?? "Images", children: items.map((entry, at) => discarded.has(at) ? null : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "data-enigma-image-thumb": "",
+                "aria-current": at === index,
+                "aria-selected": at === index,
+                "aria-label": entry.alt ?? `${at + 1}`,
+                onClick: () => showAt(at),
+                children: /* @__PURE__ */ jsx("img", { src: entry.thumbnail ?? entry.src, alt: "", loading: "lazy", draggable: false })
+              },
+              entry.src
+            )) })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function MenuButton({ label, onPress, expanded }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-enigma-image-button": "",
+      "data-enigma-image-menu": "",
+      "aria-haspopup": "menu",
+      "aria-expanded": expanded ?? false,
+      "aria-label": label,
+      title: label,
+      onClick: onPress,
+      children: /* @__PURE__ */ jsx(Dots, {})
+    }
+  );
+}
+
+export { Download, ImageViewer, MenuButton, NewTab };