@michaelyagi/shoji 0.1.0-alpha.6

package/dist/esm/core/index.js

@@ -0,0 +1,1966 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { w as waitForTransitionEnd, z as zoomIn, a as zoomOut } from "../zoomTransition-bbKHpVpA.js";
+let lockCount = 0;
+let savedOverflow = "";
+let savedHtmlOverflow = "";
+function lockBodyScroll() {
+  if (lockCount === 0) {
+    savedOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    savedHtmlOverflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+  }
+  lockCount++;
+}
+function unlockBodyScroll() {
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = savedOverflow;
+    document.documentElement.style.overflow = savedHtmlOverflow;
+  }
+}
+class EventBus {
+  constructor() {
+    __publicField(this, "listeners", /* @__PURE__ */ new Map());
+  }
+  on(event, fn) {
+    let set = this.listeners.get(event);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(event, set);
+    }
+    set.add(fn);
+    return () => this.off(event, fn);
+  }
+  off(event, fn) {
+    var _a;
+    (_a = this.listeners.get(event)) == null ? void 0 : _a.delete(fn);
+  }
+  emit(event, detail) {
+    const set = this.listeners.get(event);
+    if (!set) return;
+    for (const fn of set) fn(detail);
+  }
+  clear() {
+    this.listeners.clear();
+  }
+}
+const CLOSE_ICON = '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>';
+const PREV_ICON = '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>';
+const NEXT_ICON = '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>';
+const PLAY_ICON = '<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>';
+const CAPTION_ICON = '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 10h10M7 14h6"/></svg>';
+let idCounter = 0;
+function iconButton(className, icon, label) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = className;
+  button.ariaLabel = button.title = label;
+  button.innerHTML = icon;
+  return button;
+}
+function buildLightboxDom(slides, labels) {
+  const labelId = `shoji-counter-${++idCounter}`;
+  const outer = document.createElement("div");
+  outer.className = "shoji-outer";
+  const backdrop = document.createElement("div");
+  backdrop.className = "shoji-backdrop";
+  outer.appendChild(backdrop);
+  const dialog = document.createElement("div");
+  dialog.className = "shoji-dialog";
+  dialog.setAttribute("role", "dialog");
+  dialog.setAttribute("aria-modal", "true");
+  dialog.setAttribute("aria-labelledby", labelId);
+  dialog.tabIndex = -1;
+  const toolbar = document.createElement("div");
+  toolbar.className = "shoji-toolbar";
+  const toolbarLeft = document.createElement("div");
+  toolbarLeft.className = "shoji-toolbar-slot shoji-toolbar-left";
+  const toolbarCenter = document.createElement("div");
+  toolbarCenter.className = "shoji-toolbar-slot shoji-toolbar-center";
+  const toolbarRight = document.createElement("div");
+  toolbarRight.className = "shoji-toolbar-slot shoji-toolbar-right";
+  const closeButton = iconButton("shoji-close", CLOSE_ICON, labels.close);
+  const captionToggleButton = iconButton(
+    "shoji-toolbar-button shoji-caption-toggle",
+    CAPTION_ICON,
+    labels.showCaption
+  );
+  captionToggleButton.setAttribute("aria-pressed", "false");
+  captionToggleButton.hidden = true;
+  toolbarRight.append(captionToggleButton, closeButton);
+  const counter = document.createElement("div");
+  counter.className = "shoji-counter";
+  counter.id = labelId;
+  toolbarLeft.appendChild(counter);
+  toolbar.append(toolbarLeft, toolbarCenter, toolbarRight);
+  dialog.appendChild(toolbar);
+  const prevButton = iconButton("shoji-nav shoji-nav-prev", PREV_ICON, labels.previous);
+  const nextButton = iconButton("shoji-nav shoji-nav-next", NEXT_ICON, labels.next);
+  dialog.appendChild(prevButton);
+  dialog.appendChild(nextButton);
+  dialog.appendChild(slides);
+  const caption = document.createElement("div");
+  caption.className = "shoji-caption";
+  dialog.appendChild(caption);
+  outer.appendChild(dialog);
+  return {
+    outer,
+    dialog,
+    counter,
+    caption,
+    closeButton,
+    prevButton,
+    nextButton,
+    captionToggleButton,
+    toolbarLeft,
+    toolbarCenter,
+    toolbarRight
+  };
+}
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), video[controls], [tabindex]:not([tabindex="-1"])';
+class FocusTrap {
+  constructor() {
+    __publicField(this, "container", null);
+    __publicField(this, "previouslyFocused", null);
+    __publicField(this, "onKeydown", (event) => {
+      if (event.key !== "Tab" || !this.container) return;
+      const focusable = this.getFocusable();
+      if (focusable.length === 0) {
+        event.preventDefault();
+        this.container.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      const activeIsInside = active instanceof HTMLElement && focusable.includes(active);
+      if (event.shiftKey) {
+        if (!activeIsInside || active === first) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else if (!activeIsInside || active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    });
+  }
+  getFocusable() {
+    if (!this.container) return [];
+    return Array.from(this.container.querySelectorAll(FOCUSABLE_SELECTOR));
+  }
+  activate(container) {
+    this.previouslyFocused = document.activeElement;
+    this.container = container;
+    document.addEventListener("keydown", this.onKeydown, true);
+    container.focus();
+  }
+  deactivate() {
+    var _a;
+    document.removeEventListener("keydown", this.onKeydown, true);
+    this.container = null;
+    (_a = this.previouslyFocused) == null ? void 0 : _a.focus();
+    this.previouslyFocused = null;
+  }
+}
+const DOUBLE_TAP_MAX_DELAY_MS = 300;
+const DOUBLE_TAP_MAX_DISTANCE = 30;
+const TAP_MAX_DELAY_MS = 500;
+class GestureEngine {
+  constructor(target, callbacks, options) {
+    __publicField(this, "target");
+    __publicField(this, "options");
+    __publicField(this, "callbacks");
+    __publicField(this, "pointers", /* @__PURE__ */ new Map());
+    __publicField(this, "primaryPointerId", null);
+    __publicField(this, "direction", null);
+    __publicField(this, "dragStartDistance", 0);
+    // along the locked axis, at the moment direction locked — subtracted so onDragStart's delta is 0
+    __publicField(this, "pinching", false);
+    __publicField(this, "pinchStartDistance", 0);
+    // -Infinity, not 0: `event.timeStamp` is time-since-navigation-start, so a
+    // real first tap is always some large positive number and 0 would seem
+    // like a safe "no previous tap" sentinel in practice — but not always: a
+    // tap in the first 300ms of the page's life, near the viewport's top-left
+    // corner, would satisfy registerTap's isDouble check against this
+    // sentinel and get wrongly reported as a double-tap on nothing. -Infinity
+    // can never be within DOUBLE_TAP_MAX_DELAY_MS of any real timestamp.
+    __publicField(this, "lastTapTime", -Infinity);
+    __publicField(this, "lastTapX", 0);
+    __publicField(this, "lastTapY", 0);
+    __publicField(this, "onPointerDown", (event) => {
+      var _a, _b, _c, _d;
+      if (event.isPrimary === false && this.pointers.size === 0) return;
+      if (this.pointers.size === 0 && ((_b = (_a = this.callbacks).ignore) == null ? void 0 : _b.call(_a, event))) return;
+      this.pointers.set(event.pointerId, {
+        startX: event.clientX,
+        startY: event.clientY,
+        startTime: event.timeStamp,
+        lastX: event.clientX,
+        lastY: event.clientY,
+        lastTime: event.timeStamp
+      });
+      if (this.pointers.size === 1) {
+        this.primaryPointerId = event.pointerId;
+        this.direction = null;
+      } else if (this.pointers.size === 2) {
+        this.direction = null;
+        this.pinching = true;
+        const [a, b] = [...this.pointers.values()];
+        this.pinchStartDistance = distanceBetween(a, b);
+        const center = centerOf(a, b);
+        (_d = (_c = this.callbacks).onPinchStart) == null ? void 0 : _d.call(_c, center.x, center.y);
+      }
+    });
+    __publicField(this, "onPointerMove", (event) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      const state = this.pointers.get(event.pointerId);
+      if (!state) return;
+      state.lastX = event.clientX;
+      state.lastY = event.clientY;
+      state.lastTime = event.timeStamp;
+      if (this.pinching) {
+        if (this.pointers.size < 2) return;
+        const [a, b] = [...this.pointers.values()];
+        const distance = distanceBetween(a, b);
+        const scale = this.pinchStartDistance > 0 ? distance / this.pinchStartDistance : 1;
+        const center = centerOf(a, b);
+        (_b = (_a = this.callbacks).onPinchMove) == null ? void 0 : _b.call(_a, scale, center.x, center.y);
+        return;
+      }
+      if (event.pointerId !== this.primaryPointerId) return;
+      const dx = event.clientX - state.startX;
+      const dy = event.clientY - state.startY;
+      if (this.direction === null) {
+        const absX = Math.abs(dx);
+        const absY = Math.abs(dy);
+        if (Math.max(absX, absY) < this.options.lockThreshold) return;
+        this.direction = absX > absY ? "horizontal" : "vertical";
+        this.dragStartDistance = this.direction === "horizontal" ? dx : dy;
+        if (((_d = (_c = this.callbacks).shouldCapture) == null ? void 0 : _d.call(_c)) ?? true) this.target.setPointerCapture(event.pointerId);
+        (_f = (_e = this.callbacks).onDragStart) == null ? void 0 : _f.call(_e, this.direction, event);
+      }
+      if (this.direction === "horizontal") event.preventDefault();
+      const delta = (this.direction === "horizontal" ? dx : dy) - this.dragStartDistance;
+      (_h = (_g = this.callbacks).onDragMove) == null ? void 0 : _h.call(_g, this.direction, delta, event);
+    });
+    __publicField(this, "onPointerUp", (event) => {
+      this.finishPointer(event, false);
+    });
+    __publicField(this, "onPointerCancel", (event) => {
+      this.finishPointer(event, true);
+    });
+    __publicField(this, "onWheel", (event) => {
+      var _a, _b;
+      if (!event.ctrlKey) return;
+      event.preventDefault();
+      const deltaScale = -event.deltaY * 0.01;
+      (_b = (_a = this.callbacks).onWheelZoom) == null ? void 0 : _b.call(_a, deltaScale, event.clientX, event.clientY, event);
+    });
+    this.target = target;
+    this.callbacks = callbacks;
+    this.options = {
+      lockThreshold: (options == null ? void 0 : options.lockThreshold) ?? 10,
+      swipeThreshold: (options == null ? void 0 : options.swipeThreshold) ?? 50,
+      swipeVelocity: (options == null ? void 0 : options.swipeVelocity) ?? 0.3
+    };
+    this.target.addEventListener("pointerdown", this.onPointerDown);
+    this.target.addEventListener("pointermove", this.onPointerMove);
+    this.target.addEventListener("pointerup", this.onPointerUp);
+    this.target.addEventListener("pointercancel", this.onPointerCancel);
+    this.target.addEventListener("wheel", this.onWheel, { passive: false });
+  }
+  destroy() {
+    this.target.removeEventListener("pointerdown", this.onPointerDown);
+    this.target.removeEventListener("pointermove", this.onPointerMove);
+    this.target.removeEventListener("pointerup", this.onPointerUp);
+    this.target.removeEventListener("pointercancel", this.onPointerCancel);
+    this.target.removeEventListener("wheel", this.onWheel);
+    this.pointers.clear();
+  }
+  finishPointer(event, cancelled) {
+    var _a, _b, _c, _d;
+    const state = this.pointers.get(event.pointerId);
+    if (!state) return;
+    state.lastX = event.clientX;
+    state.lastY = event.clientY;
+    state.lastTime = event.timeStamp;
+    this.pointers.delete(event.pointerId);
+    if (this.pinching) {
+      if (this.pointers.size < 2) {
+        this.pinching = false;
+        (_b = (_a = this.callbacks).onPinchEnd) == null ? void 0 : _b.call(_a);
+      }
+      return;
+    }
+    if (event.pointerId !== this.primaryPointerId) return;
+    if (this.direction === null) {
+      if (!cancelled && event.timeStamp - state.startTime <= TAP_MAX_DELAY_MS) {
+        this.registerTap(state.lastX, state.lastY, event);
+      }
+    } else {
+      const elapsed = Math.max(1, state.lastTime - state.startTime);
+      const totalDelta = (this.direction === "horizontal" ? state.lastX - state.startX : state.lastY - state.startY) - this.dragStartDistance;
+      const velocity = totalDelta / elapsed;
+      const completed = !cancelled && (Math.abs(totalDelta) >= this.options.swipeThreshold || Math.abs(velocity) >= this.options.swipeVelocity);
+      (_d = (_c = this.callbacks).onDragEnd) == null ? void 0 : _d.call(_c, this.direction, totalDelta, velocity, completed, cancelled);
+    }
+    this.primaryPointerId = null;
+    this.direction = null;
+  }
+  registerTap(x, y, event) {
+    var _a, _b, _c, _d;
+    const now = event.timeStamp;
+    const isDouble = now - this.lastTapTime <= DOUBLE_TAP_MAX_DELAY_MS && Math.hypot(x - this.lastTapX, y - this.lastTapY) <= DOUBLE_TAP_MAX_DISTANCE;
+    if (isDouble) {
+      (_b = (_a = this.callbacks).onDoubleTap) == null ? void 0 : _b.call(_a, x, y, event);
+      this.lastTapTime = 0;
+    } else {
+      (_d = (_c = this.callbacks).onTap) == null ? void 0 : _d.call(_c, x, y, event);
+      this.lastTapTime = now;
+      this.lastTapX = x;
+      this.lastTapY = y;
+    }
+  }
+}
+function distanceBetween(a, b) {
+  return Math.hypot(a.lastX - b.lastX, a.lastY - b.lastY);
+}
+function centerOf(a, b) {
+  return { x: (a.lastX + b.lastX) / 2, y: (a.lastY + b.lastY) / 2 };
+}
+const DRAG_SETTLE_TRANSITION = "transform var(--shoji-duration) var(--shoji-momentum-easing)";
+const DRAG_FEEDBACK_TRANSITION = "transform var(--shoji-duration) var(--shoji-momentum-easing), opacity var(--shoji-duration) var(--shoji-momentum-easing)";
+const VERTICAL_FEEDBACK_DISTANCE = 160;
+function shouldIgnoreGesture(event) {
+  return event.composedPath().some(
+    (node) => node instanceof Element && node.matches("button, video, input, select, textarea, a[href], [data-shoji-no-drag]")
+  );
+}
+class GestureController {
+  constructor(host, relay, options) {
+    __publicField(this, "engine");
+    /** Horizontal follows the finger 1:1; vertical drives close-feedback instead. Axis-locked, one branch per drag. */
+    __publicField(this, "onDragMove", (direction, delta) => {
+      if (this.host.isZoomed()) return;
+      if (direction === "horizontal") {
+        this.host.slides.setDragOffset(delta, null);
+      } else if (this.host.canClose()) {
+        this.applyVerticalDragFeedback(delta);
+      }
+    });
+    __publicField(this, "onDragEnd", (direction, delta, _velocity, completed) => {
+      if (this.host.isZoomed()) return;
+      if (direction === "horizontal") {
+        this.finishHorizontalDrag(delta, completed);
+      } else {
+        this.finishVerticalDrag(completed);
+      }
+    });
+    this.host = host;
+    this.engine = new GestureEngine(
+      host.dialog,
+      {
+        ignore: shouldIgnoreGesture,
+        shouldCapture: () => !host.isZoomed(),
+        onDragStart: () => host.onActivity(),
+        onDragMove: this.onDragMove,
+        onDragEnd: this.onDragEnd,
+        onTap: (x, y) => relay.onTap(x, y),
+        onDoubleTap: (x, y) => relay.onDoubleTap(x, y),
+        onPinchStart: (centerX, centerY) => relay.onPinchStart(centerX, centerY),
+        onPinchMove: (scale, centerX, centerY) => relay.onPinchMove(scale, centerX, centerY),
+        onPinchEnd: () => relay.onPinchEnd(),
+        onWheelZoom: (deltaScale, x, y) => relay.onWheelZoom(deltaScale, x, y)
+      },
+      options
+    );
+  }
+  destroy() {
+    this.engine.destroy();
+  }
+  /** `completed` decides intent; `canGoNext`/`canGoPrev` guard whether that's actually possible (`loop: false` at an end item). */
+  finishHorizontalDrag(delta, completed) {
+    const goingNext = delta < 0;
+    const canMove = goingNext ? this.host.canGoNext() : this.host.canGoPrev();
+    if (!completed || delta === 0 || !canMove) {
+      this.settleDragOffset(0, () => {
+      });
+      return;
+    }
+    const width = this.host.dialog.getBoundingClientRect().width || 1;
+    const target = goingNext ? -width : width;
+    this.settleDragOffset(target, () => {
+      this.host.slides.setDragOffset(0, null);
+      if (goingNext) this.host.next();
+      else this.host.prev();
+    });
+  }
+  settleDragOffset(targetPx, onSettled) {
+    const settleEl = this.host.slides.getSlotRoot(0);
+    this.host.slides.setDragOffset(targetPx, DRAG_SETTLE_TRANSITION);
+    if (!settleEl) {
+      onSettled();
+      return;
+    }
+    waitForTransitionEnd(settleEl, onSettled);
+  }
+  /** Purely presentational drag feedback — scales/fades the dialog toward `close()`'s target state as the viewer drags, without closing until release decides the outcome. */
+  applyVerticalDragFeedback(delta) {
+    const progress = Math.min(Math.abs(delta) / VERTICAL_FEEDBACK_DISTANCE, 1);
+    const dialog = this.host.dialog;
+    dialog.style.transition = "";
+    dialog.style.transform = `translateY(${delta}px) scale(${1 - progress * 0.15})`;
+    dialog.style.opacity = String(1 - progress * 0.6);
+  }
+  clearVerticalDragFeedback(animate) {
+    const dialog = this.host.dialog;
+    dialog.style.transition = animate ? DRAG_FEEDBACK_TRANSITION : "";
+    dialog.style.transform = "";
+    dialog.style.opacity = "";
+  }
+  finishVerticalDrag(completed) {
+    if (completed && this.host.canClose()) {
+      this.clearVerticalDragFeedback(false);
+      this.host.close();
+    } else {
+      this.clearVerticalDragFeedback(true);
+    }
+  }
+}
+class LiveRegion {
+  constructor() {
+    __publicField(this, "element");
+    this.element = document.createElement("div");
+    this.element.className = "shoji-live-region";
+    this.element.setAttribute("role", "status");
+    this.element.setAttribute("aria-live", "polite");
+  }
+  announce(text) {
+    this.element.textContent = "";
+    void this.element.offsetWidth;
+    this.element.textContent = text;
+  }
+}
+const DEFAULT_SELECTOR = ":scope > a, :scope > [data-shoji-src], :scope > [data-shoji-video]";
+function scanContainer(container, selector = DEFAULT_SELECTOR) {
+  const elements = Array.from(container.querySelectorAll(selector));
+  const scanned = [];
+  for (const element of elements) {
+    const item = scanVideo(element) ?? scanImage(element);
+    if (item) scanned.push({ element, item });
+  }
+  return scanned;
+}
+function attr(el, name) {
+  return el.getAttribute(name) ?? void 0;
+}
+function numAttr(el, name) {
+  const raw = el.getAttribute(name);
+  if (raw === null) return void 0;
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : void 0;
+}
+function applyCommon(element, item, src) {
+  const caption = attr(element, "data-shoji-caption");
+  if (caption) item.caption = caption;
+  item.id = attr(element, "data-shoji-id") ?? src;
+  let data;
+  for (const a of element.attributes) {
+    if (!a.name.startsWith("data-shoji-")) continue;
+    const key = a.name.slice(11);
+    if (key !== "no-drag" && !(key in item)) (data ?? (data = {}))[key] = a.value;
+  }
+  if (data) item.data = data;
+}
+function scanImage(element) {
+  const src = attr(element, "href") ?? attr(element, "data-shoji-src");
+  if (!src) return void 0;
+  const item = { src };
+  const img = element.querySelector("img");
+  const thumb = (img == null ? void 0 : img.getAttribute("src")) ?? attr(element, "data-shoji-thumb");
+  if (thumb) item.thumb = thumb;
+  const alt = (img == null ? void 0 : img.getAttribute("alt")) ?? attr(element, "data-shoji-alt");
+  if (alt) item.alt = alt;
+  const width = numAttr(element, "data-shoji-width");
+  if (width !== void 0) item.width = width;
+  const height = numAttr(element, "data-shoji-height");
+  if (height !== void 0) item.height = height;
+  const srcset = attr(element, "data-shoji-srcset");
+  if (srcset) item.srcset = srcset;
+  const sizes = attr(element, "data-shoji-sizes");
+  if (sizes) item.sizes = sizes;
+  applyCommon(element, item, src);
+  return item;
+}
+function scanVideo(element) {
+  var _a;
+  const videoEl = element.querySelector("video");
+  if (videoEl) {
+    const sources = Array.from(videoEl.querySelectorAll("source")).map((s) => ({ src: s.getAttribute("src") ?? "", type: s.getAttribute("type") ?? "" })).filter((s) => s.src);
+    const src = videoEl.getAttribute("src") ?? ((_a = sources[0]) == null ? void 0 : _a.src);
+    if (!src) return void 0;
+    const item = { src, video: { provider: "html5" } };
+    if (sources.length) item.sources = sources;
+    const poster = videoEl.getAttribute("poster");
+    if (poster) item.poster = poster;
+    applyCommon(element, item, src);
+    return item;
+  }
+  const videoUrl = attr(element, "data-shoji-video");
+  if (videoUrl) {
+    const youtubeId = detectYouTubeId(videoUrl);
+    const item = youtubeId ? { src: videoUrl, video: { provider: "youtube", id: youtubeId, url: videoUrl } } : {
+      src: videoUrl,
+      video: { provider: "html5" },
+      sources: [{ src: videoUrl, type: guessVideoType(videoUrl) }]
+    };
+    const poster = attr(element, "data-shoji-poster");
+    if (poster) item.poster = poster;
+    applyCommon(element, item, videoUrl);
+    return item;
+  }
+  return void 0;
+}
+function detectYouTubeId(url) {
+  let parsed;
+  try {
+    parsed = new URL(url, window.location.href);
+  } catch {
+    return void 0;
+  }
+  const host = parsed.hostname.replace(/^(www|m)\./, "");
+  if (host === "youtu.be") return parsed.pathname.slice(1).split("/")[0] || void 0;
+  if (host !== "youtube.com") return void 0;
+  if (parsed.pathname === "/watch") return parsed.searchParams.get("v") ?? void 0;
+  const match = parsed.pathname.match(/^\/(?:embed|shorts)\/([^/?]+)/);
+  return match == null ? void 0 : match[1];
+}
+function guessVideoType(url) {
+  const clean = url.split(/[?#]/)[0] ?? url;
+  const ext = clean.slice(clean.lastIndexOf(".") + 1).toLowerCase();
+  if (ext === "webm") return "video/webm";
+  if (ext === "ogg" || ext === "ogv") return "video/ogg";
+  return "video/mp4";
+}
+const PAUSE_OVERLAY_DELAY_MS = 200;
+class SlideManager {
+  constructor(options) {
+    __publicField(this, "element");
+    __publicField(this, "slots");
+    __publicField(this, "preload");
+    __publicField(this, "playVideoLabel");
+    __publicField(this, "videoProviders");
+    __publicField(this, "dragOffsetPx", 0);
+    /**
+     * Ready nodes keyed by item index, not slot offset — a `Slot` only
+     * remembers its *own* previous index, so it can't tell that some *other*
+     * slot already decoded the exact index it's now asked to show (the
+     * routine case: stepping forward moves the +1 slot's content into the 0
+     * slot). Without this, already-decoded content is thrown away and
+     * redecoded on every step. Trimmed to `centerIndex ± preload` each
+     * `render()`, same window the slots cover.
+     */
+    __publicField(this, "cache", /* @__PURE__ */ new Map());
+    /**
+     * Image decodes in flight, keyed by item index, not by whichever slot
+     * started them — a real bug this fixes: navigating before a preload
+     * decode resolved used to reassign that slot, abandoning the decode and
+     * starting a duplicate elsewhere, so a slow preload could never finish,
+     * only restart. `reveal()` looks up which slot currently wants this
+     * index at resolve time, so a reshuffled pool still lands it correctly.
+     */
+    __publicField(this, "pending", /* @__PURE__ */ new Map());
+    this.element = document.createElement("div");
+    this.element.className = "shoji-slides";
+    this.preload = options.preload;
+    this.playVideoLabel = options.playVideoLabel;
+    this.videoProviders = options.videoProviders;
+    const count = options.preload * 2 + 1;
+    this.slots = Array.from({ length: count }, (_, i) => {
+      const offset = i - options.preload;
+      const root = document.createElement("div");
+      root.className = "shoji-slide";
+      const media = document.createElement("div");
+      media.className = "shoji-slide-media";
+      root.appendChild(media);
+      this.element.appendChild(root);
+      return { root, media, offset, assignedIndex: null, ready: false };
+    });
+    this.applyTransforms(null);
+  }
+  /** The active slot's `.shoji-slide-media` — not `.shoji-slide`, whose transform is owned by pool-offset positioning. */
+  getActiveMedia() {
+    var _a;
+    return ((_a = this.slots.find((slot) => slot.offset === 0)) == null ? void 0 : _a.media) ?? null;
+  }
+  /** False while the active slot's content is still decoding — Gallery.ts uses this right after `render()` to show the loading state immediately, without waiting for `onLoad`. */
+  isActiveReady() {
+    var _a;
+    return ((_a = this.slots.find((slot) => slot.offset === 0)) == null ? void 0 : _a.ready) ?? false;
+  }
+  /**
+   * DESIGN.md §2.4 — live drag-to-navigate feedback: every slot's
+   * structural `offset * 100%` position gets this same `px` added on top,
+   * so dragging left/right visually slides the whole pool together (the
+   * adjacent preloaded slot already exists at `±100%`) — no new DOM, no
+   * content re-render mid-drag. `transition`: `null` during the live drag
+   * (1:1 with the pointer); a real value only for the post-release settle
+   * animation, reset back to `null` once that transition ends.
+   */
+  setDragOffset(px, transition) {
+    this.dragOffsetPx = px;
+    this.applyTransforms(transition);
+  }
+  /** The pool slot's `.shoji-slide` root at a structural offset — what the drag settle animation (§2.4) waits for `transitionend` on. */
+  getSlotRoot(offset) {
+    var _a;
+    return ((_a = this.slots.find((slot) => slot.offset === offset)) == null ? void 0 : _a.root) ?? null;
+  }
+  applyTransforms(transition) {
+    for (const slot of this.slots) {
+      slot.root.style.transition = transition ?? "";
+      slot.root.style.transform = `translateX(calc(${slot.offset * 100}% + ${this.dragOffsetPx}px))`;
+    }
+  }
+  /** Re-renders whichever slots need a different item; `onLoad` fires per index once its media settles. `openPlaceholderSrc` (only from `Gallery.open()`) swaps the centerIndex slot's spinner for a low-res placeholder once it decodes, if not already ready. */
+  render(items, centerIndex, onLoad, openPlaceholderSrc) {
+    var _a;
+    for (const [index, entry] of this.cache) {
+      if (index < centerIndex - this.preload || index > centerIndex + this.preload) {
+        releaseVideoNode(entry.node);
+        this.cache.delete(index);
+      }
+    }
+    const targets = this.slots.map((slot) => {
+      const index = centerIndex + slot.offset;
+      const item = index >= 0 && index < items.length ? items[index] : void 0;
+      return { slot, index, item };
+    });
+    for (const { slot, index, item } of targets) {
+      if (!item || slot.assignedIndex === index) continue;
+      const cached = this.cache.get(index);
+      if (!cached) continue;
+      if (cached.node.classList.contains("shoji-slide-provider-video")) continue;
+      slot.assignedIndex = index;
+      this.moveIn(slot, cached, index);
+      onLoad(index);
+    }
+    for (const { slot, index, item } of targets) {
+      if (!item) {
+        slot.assignedIndex = null;
+        slot.ready = false;
+        releaseVideo(slot.media);
+        slot.media.replaceChildren();
+        continue;
+      }
+      if (slot.assignedIndex === index) continue;
+      slot.assignedIndex = index;
+      slot.ready = false;
+      releaseVideo(slot.media);
+      slot.media.replaceChildren(createSpinner());
+      if (index === centerIndex && openPlaceholderSrc) {
+        this.revealOpenPlaceholder(openPlaceholderSrc, slot, index);
+      }
+      if (((_a = item.video) == null ? void 0 : _a.provider) === "html5") {
+        this.renderVideo(item, slot, index, onLoad);
+      } else if (item.video) {
+        this.renderProviderVideo(item, slot, index, onLoad);
+      } else {
+        this.ensureImageDecoding(item, index, onLoad);
+      }
+    }
+  }
+  applyAspect(slot, item) {
+    if (item.width && item.height) {
+      slot.media.style.aspectRatio = `${item.width} / ${item.height}`;
+    } else {
+      slot.media.style.removeProperty("aspect-ratio");
+    }
+  }
+  /** Releases the slot's old content and swaps the new node in, caching it. `extra` rides as a second child. `ensureImageDecoding` goes through `moveIn` instead. */
+  swapIn(slot, node, item, index, extra) {
+    releaseVideo(slot.media);
+    this.applyAspect(slot, item);
+    if (extra) slot.media.replaceChildren(node, extra);
+    else slot.media.replaceChildren(node);
+    slot.ready = true;
+    this.cache.set(index, { node, item, extra });
+  }
+  /**
+   * Moves an already-cached, ready node into `slot` — skips `releaseVideo`,
+   * unlike `swapIn`: what `slot` holds might be a live cache entry another
+   * slot reclaims this same `render()` pass (Phase 1). Reparenting is
+   * always safe; only the later fresh/clear pass releases stale content.
+   */
+  moveIn(slot, entry, index) {
+    this.applyAspect(slot, entry.item);
+    if (entry.extra) slot.media.replaceChildren(entry.node, entry.extra);
+    else slot.media.replaceChildren(entry.node);
+    slot.ready = true;
+    this.cache.set(index, entry);
+  }
+  /** Starts decoding `item` for `index`, only if nothing already is (see `pending`). Resolves by looking up whichever slot currently wants this index, not the one active when the decode started. */
+  ensureImageDecoding(item, index, onLoad) {
+    if (this.pending.has(index)) return;
+    const img = document.createElement("img");
+    img.className = "shoji-slide-img";
+    img.alt = item.alt ?? "";
+    img.draggable = false;
+    if ("fetchPriority" in img) img.fetchPriority = "high";
+    if (item.srcset) img.srcset = item.srcset;
+    if (item.sizes) img.sizes = item.sizes;
+    img.src = item.src;
+    this.pending.set(index, img);
+    const reveal = () => {
+      this.pending.delete(index);
+      const entry = { node: img, item };
+      this.cache.set(index, entry);
+      const slot = this.slots.find((s) => s.assignedIndex === index);
+      if (!slot) return;
+      this.moveIn(slot, entry, index);
+      onLoad(index);
+    };
+    if (typeof img.decode === "function") {
+      img.decode().then(reveal, reveal);
+    } else {
+      img.addEventListener("load", reveal, { once: true });
+      img.addEventListener("error", reveal, { once: true });
+    }
+  }
+  /** DESIGN.md §2.3 — swaps the spinner for the placeholder once *it* decodes, not immediately: `item.thumb` is often just `item.src` again, so an undecoded placeholder can leave as long a blank gap as the spinner it replaces. */
+  revealOpenPlaceholder(src, slot, index) {
+    const img = createOpenPlaceholder(src);
+    const reveal = () => {
+      var _a;
+      if (slot.assignedIndex !== index || slot.ready) return;
+      (_a = slot.media.querySelector(".shoji-slide-spinner")) == null ? void 0 : _a.remove();
+      slot.media.appendChild(img);
+    };
+    if (typeof img.decode === "function") {
+      img.decode().then(reveal, reveal);
+    } else {
+      img.addEventListener("load", reveal, { once: true });
+      img.addEventListener("error", reveal, { once: true });
+    }
+  }
+  /** Native `<video controls>` — real playback, not just a poster. Not autoplayed/muted: a deliberate click-to-play, not a background loop. */
+  renderVideo(item, slot, index, onLoad) {
+    const hasSource = Boolean(item.src) || Boolean(item.sources && item.sources.length > 0);
+    if (!hasSource) {
+      const placeholder = document.createElement("div");
+      placeholder.className = "shoji-slide-placeholder";
+      placeholder.textContent = "Video";
+      this.swapIn(slot, placeholder, item, index);
+      onLoad(index);
+      return;
+    }
+    const video = document.createElement("video");
+    video.className = "shoji-slide-video";
+    video.controls = true;
+    video.playsInline = true;
+    if (item.poster) video.poster = item.poster;
+    if (item.sources && item.sources.length > 0) {
+      for (const s of item.sources) {
+        const source = document.createElement("source");
+        source.src = s.src;
+        source.type = s.type;
+        video.appendChild(source);
+      }
+    } else {
+      video.src = item.src;
+    }
+    this.swapIn(slot, video, item, index, this.createVideoPlayOverlay(video));
+    const reveal = () => onLoad(index);
+    video.addEventListener("loadedmetadata", reveal, { once: true });
+    video.addEventListener("error", reveal, { once: true });
+  }
+  /** Tracks the video's own play/pause/ended state. Hide `.shoji-video-play-overlay` in CSS to opt out. */
+  createVideoPlayOverlay(video) {
+    const overlay = document.createElement("button");
+    overlay.type = "button";
+    overlay.className = "shoji-video-play-overlay";
+    overlay.innerHTML = PLAY_ICON;
+    overlay.ariaLabel = overlay.title = this.playVideoLabel;
+    overlay.hidden = !video.paused;
+    let pauseTimer = null;
+    const clearPauseTimer = () => {
+      if (pauseTimer === null) return;
+      clearTimeout(pauseTimer);
+      pauseTimer = null;
+    };
+    overlay.addEventListener("click", (event) => {
+      event.stopPropagation();
+      video.play().catch(() => {
+      });
+    });
+    video.addEventListener("play", () => {
+      clearPauseTimer();
+      overlay.hidden = true;
+    });
+    video.addEventListener("pause", () => {
+      clearPauseTimer();
+      pauseTimer = setTimeout(() => {
+        pauseTimer = null;
+        if (video.paused) overlay.hidden = false;
+      }, PAUSE_OVERLAY_DELAY_MS);
+    });
+    video.addEventListener("ended", () => {
+      clearPauseTimer();
+      overlay.hidden = false;
+    });
+    return overlay;
+  }
+  /** DESIGN.md §4-video. Unregistered provider → same placeholder as no-source video. */
+  renderProviderVideo(item, slot, index, onLoad) {
+    const video = item.video;
+    const renderFn = video.provider === "custom" ? video.render : this.videoProviders.get(video.provider);
+    if (!renderFn) {
+      const placeholder = document.createElement("div");
+      placeholder.className = "shoji-slide-placeholder";
+      placeholder.textContent = "Video";
+      this.swapIn(slot, placeholder, item, index);
+      onLoad(index);
+      return;
+    }
+    const container = document.createElement("div");
+    container.className = "shoji-slide-provider-video";
+    container.hidden = true;
+    const controller = new AbortController();
+    providerAbortControllers.set(container, controller);
+    slot.media.appendChild(container);
+    let revealed = false;
+    const onReady = () => {
+      var _a;
+      if (revealed || controller.signal.aborted) return;
+      revealed = true;
+      container.hidden = false;
+      (_a = slot.media.querySelector(".shoji-slide-spinner, .shoji-slide-open-placeholder")) == null ? void 0 : _a.remove();
+      this.applyAspect(slot, item);
+      slot.ready = true;
+      this.cache.set(index, { node: container, item });
+      onLoad(index);
+    };
+    renderFn(container, item, onReady, controller.signal);
+  }
+  destroy() {
+    for (const slot of this.slots) {
+      releaseVideo(slot.media);
+      slot.media.replaceChildren();
+      slot.assignedIndex = null;
+      slot.ready = false;
+    }
+    this.cache.clear();
+    this.pending.clear();
+    this.element.remove();
+  }
+}
+function createOpenPlaceholder(src) {
+  const img = document.createElement("img");
+  img.className = "shoji-slide-img shoji-slide-open-placeholder";
+  img.alt = "";
+  img.draggable = false;
+  img.src = src;
+  return img;
+}
+function createSpinner() {
+  const spinner = document.createElement("div");
+  spinner.className = "shoji-slide-spinner";
+  spinner.setAttribute("aria-hidden", "true");
+  return spinner;
+}
+const providerAbortControllers = /* @__PURE__ */ new WeakMap();
+function releaseVideo(media) {
+  const video = media.querySelector("video");
+  if (video) releaseVideoNode(video);
+  const provider = media.querySelector(".shoji-slide-provider-video");
+  if (provider) releaseProviderNode(provider);
+}
+function releaseVideoNode(node) {
+  if (node.tagName !== "VIDEO") {
+    releaseProviderNode(node);
+    return;
+  }
+  const video = node;
+  video.pause();
+  video.removeAttribute("src");
+  video.load();
+}
+function releaseProviderNode(node) {
+  const controller = providerAbortControllers.get(node);
+  if (!controller) return;
+  providerAbortControllers.delete(node);
+  controller.abort();
+}
+function resolveAxis(config, direction) {
+  const sign = config.directional ? direction : 1;
+  const parts = [];
+  if (config.perspective) parts.push(`perspective(${config.perspective}px)`);
+  const tx = config.translateX !== void 0 ? config.translateX * sign : 0;
+  const ty = config.translateY ?? 0;
+  if (tx !== 0 || ty !== 0) parts.push(`translate(${tx}%, ${ty}%)`);
+  if (config.rotateY !== void 0) parts.push(`rotateY(${config.rotateY * sign}deg)`);
+  if (config.rotateX !== void 0) parts.push(`rotateX(${config.rotateX}deg)`);
+  if (config.rotateZ !== void 0) parts.push(`rotateZ(${config.rotateZ * sign}deg)`);
+  if (config.scale !== void 0) parts.push(`scale(${config.scale})`);
+  return { transform: parts.length > 0 ? parts.join(" ") : "none", opacity: config.opacity ?? 1 };
+}
+function preset(spec) {
+  return {
+    name: spec.name,
+    enter: (direction) => resolveAxis(spec.enter, direction),
+    leave: (direction) => resolveAxis(spec.leave, direction)
+  };
+}
+const PRESET_LIST = [
+  // The four DESIGN.md calls out by name: default mode, plus fade/zoom/deck.
+  preset({
+    name: "slide",
+    enter: { directional: true, translateX: 100 },
+    leave: { directional: true, translateX: -100 }
+  }),
+  preset({
+    name: "fade",
+    enter: { opacity: 0 },
+    leave: { opacity: 0 }
+  }),
+  preset({
+    name: "zoom",
+    enter: { scale: 0.6, opacity: 0 },
+    leave: { scale: 1.4, opacity: 0 }
+  }),
+  preset({
+    // "lg-style deck": the incoming slide drops into place from slightly
+    // above/small while the outgoing one recedes back and fades, like a
+    // card being placed on top of a deck — not direction-dependent, a deck
+    // doesn't care whether the card came from the left or right.
+    name: "deck",
+    enter: { translateY: 6, scale: 0.85, opacity: 0 },
+    leave: { translateY: -4, scale: 0.92, opacity: 0 }
+  }),
+  // Positional siblings of `slide`.
+  preset({
+    name: "slideVertical",
+    enter: { directional: true, translateY: 100 },
+    leave: { directional: true, translateY: -100 }
+  }),
+  preset({
+    name: "push",
+    // Same geometry as `slide` but travels further (120% vs 100%) and with
+    // no cross-fade at all — a harder, snappier "shove it off" feel.
+    enter: { directional: true, translateX: 120 },
+    leave: { directional: true, translateX: -120 }
+  }),
+  // Fixed-direction fades (not nav-direction-aware — a named entrance style).
+  preset({
+    name: "fadeUp",
+    enter: { translateY: 12, opacity: 0 },
+    leave: { translateY: -12, opacity: 0 }
+  }),
+  preset({
+    name: "fadeDown",
+    enter: { translateY: -12, opacity: 0 },
+    leave: { translateY: 12, opacity: 0 }
+  }),
+  preset({
+    name: "fadeLeft",
+    enter: { translateX: -12, opacity: 0 },
+    leave: { translateX: 12, opacity: 0 }
+  }),
+  preset({
+    name: "fadeRight",
+    enter: { translateX: 12, opacity: 0 },
+    leave: { translateX: -12, opacity: 0 }
+  }),
+  // Zoom family.
+  preset({ name: "zoomOut", enter: { scale: 1.4, opacity: 0 }, leave: { scale: 0.6, opacity: 0 } }),
+  preset({ name: "scaleUp", enter: { scale: 0.7 }, leave: { scale: 1.3 } }),
+  preset({ name: "scaleDown", enter: { scale: 1.3 }, leave: { scale: 0.7 } }),
+  // Rotation family — `rotate` is fixed-direction; `rotateLeft`/`rotateRight`
+  // tie their spin to nav direction instead.
+  preset({
+    name: "rotate",
+    enter: { rotateZ: 15, opacity: 0 },
+    leave: { rotateZ: -15, opacity: 0 }
+  }),
+  preset({
+    name: "rotateLeft",
+    enter: { directional: true, rotateZ: -25, opacity: 0 },
+    leave: { directional: true, rotateZ: 25, opacity: 0 }
+  }),
+  preset({
+    name: "rotateRight",
+    enter: { directional: true, rotateZ: 25, opacity: 0 },
+    leave: { directional: true, rotateZ: -25, opacity: 0 }
+  }),
+  // 3D family — needs `perspective()` in the same transform for real depth.
+  preset({
+    name: "flipX",
+    enter: { rotateX: 90, perspective: 1200, opacity: 0 },
+    leave: { rotateX: -90, perspective: 1200, opacity: 0 }
+  }),
+  preset({
+    name: "flipY",
+    enter: { directional: true, rotateY: 90, perspective: 1200, opacity: 0 },
+    leave: { directional: true, rotateY: -90, perspective: 1200, opacity: 0 }
+  }),
+  preset({
+    name: "cube",
+    enter: { directional: true, rotateY: 70, translateX: 40, perspective: 1600, opacity: 1 },
+    leave: { directional: true, rotateY: -70, translateX: -40, perspective: 1600, opacity: 1 }
+  }),
+  preset({
+    name: "coverflow",
+    enter: {
+      directional: true,
+      rotateY: 35,
+      translateX: 60,
+      scale: 0.8,
+      perspective: 1400,
+      opacity: 0
+    },
+    leave: {
+      directional: true,
+      rotateY: -35,
+      translateX: -60,
+      scale: 0.8,
+      perspective: 1400,
+      opacity: 0
+    }
+  }),
+  // Fixed-direction drop.
+  preset({
+    name: "drop",
+    enter: { translateY: -30, opacity: 0 },
+    leave: { translateY: 20, opacity: 0 }
+  })
+];
+const TRANSITION_PRESETS = Object.fromEntries(
+  PRESET_LIST.map((p) => [p.name, p])
+);
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function parseCssTime(value) {
+  var _a;
+  const first = ((_a = value.split(",")[0]) == null ? void 0 : _a.trim()) ?? "";
+  if (first.endsWith("ms")) return parseFloat(first);
+  if (first.endsWith("s")) return parseFloat(first) * 1e3;
+  return 0;
+}
+function waitForEnd(el, cb) {
+  const style = getComputedStyle(el);
+  const durationMs = Math.max(
+    parseCssTime(style.transitionDuration),
+    parseCssTime(style.animationDuration)
+  );
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    el.removeEventListener("transitionend", onEnd);
+    el.removeEventListener("animationend", onEnd);
+    cb();
+  };
+  const onEnd = (event) => {
+    if (event.target === el) finish();
+  };
+  el.addEventListener("transitionend", onEnd);
+  el.addEventListener("animationend", onEnd);
+  setTimeout(finish, durationMs + 100);
+}
+function applyEnter(el, transform, opacity) {
+  el.style.transition = "none";
+  el.style.transformOrigin = "center";
+  el.style.transform = transform;
+  el.style.opacity = String(opacity);
+  void el.offsetHeight;
+  el.style.transition = "transform var(--shoji-duration) var(--shoji-easing), opacity var(--shoji-duration) var(--shoji-easing)";
+  el.style.transform = "none";
+  el.style.opacity = "1";
+}
+function applyLeave(el, transform, opacity) {
+  el.style.transformOrigin = "center";
+  el.style.transition = "transform var(--shoji-duration) var(--shoji-easing), opacity var(--shoji-duration) var(--shoji-easing)";
+  void el.offsetHeight;
+  el.style.transform = transform;
+  el.style.opacity = String(opacity);
+}
+function clearInlineTransform(el) {
+  el.style.transition = "";
+  el.style.transform = "";
+  el.style.opacity = "";
+  el.style.transformOrigin = "";
+}
+class SlideTransition {
+  constructor(slides) {
+    this.slides = slides;
+  }
+  /** A recognized built-in preset (`TRANSITION_PRESETS`). */
+  animate(preset2, direction, swapContent) {
+    this.run(swapContent, (ghost, incoming) => {
+      const leave = preset2.leave(direction);
+      applyLeave(ghost, leave.transform, leave.opacity);
+      const enter = preset2.enter(direction);
+      applyEnter(incoming, enter.transform, enter.opacity);
+    });
+  }
+  /** An unrecognized `mode` string: a host-supplied CSS class pair (`shoji-transition-<mode>-leave`/`-enter`), not an error — §2.5's "custom animation = a CSS class pair, no JS needed." */
+  animateCustom(mode, direction, swapContent) {
+    const dirAttr = direction === 1 ? "next" : "prev";
+    this.run(
+      swapContent,
+      (ghost, incoming) => {
+        ghost.dataset.shojiDirection = dirAttr;
+        ghost.classList.add(`shoji-transition-${mode}-leave`);
+        incoming.dataset.shojiDirection = dirAttr;
+        incoming.classList.add(`shoji-transition-${mode}-enter`);
+      },
+      (incoming) => {
+        incoming.classList.remove(`shoji-transition-${mode}-enter`);
+        delete incoming.dataset.shojiDirection;
+      }
+    );
+  }
+  run(swapContent, kickOff, cleanupIncoming = clearInlineTransform) {
+    if (prefersReducedMotion()) {
+      swapContent();
+      return;
+    }
+    const outgoing = this.slides.getActiveMedia();
+    if (!outgoing) {
+      swapContent();
+      return;
+    }
+    const ghost = document.createElement("div");
+    ghost.className = "shoji-slide-ghost";
+    ghost.appendChild(outgoing.cloneNode(true));
+    this.slides.element.appendChild(ghost);
+    void ghost.offsetHeight;
+    swapContent();
+    const incoming = this.slides.getActiveMedia();
+    if (!incoming) {
+      ghost.remove();
+      return;
+    }
+    kickOff(ghost, incoming);
+    waitForEnd(ghost, () => ghost.remove());
+    waitForEnd(incoming, () => cleanupIncoming(incoming));
+  }
+}
+function itemKey(item) {
+  return item.id ?? item.src;
+}
+function resolveElement(target) {
+  if (typeof target !== "string") return target;
+  const el = document.querySelector(target);
+  if (!el) throw new Error(`Shoji: no element matches selector "${target}"`);
+  return el;
+}
+const instanceRegistry = /* @__PURE__ */ new WeakMap();
+const allInstances = /* @__PURE__ */ new Set();
+const DEFAULT_LOCALE = {
+  close: "Close",
+  previous: "Previous image",
+  next: "Next image",
+  playVideo: "Play video",
+  showCaption: "Show caption",
+  hideCaption: "Hide caption"
+};
+function isBackdropClick(event) {
+  return !event.composedPath().some(
+    (node) => node instanceof Element && node.matches(".shoji-slide-img, button, video, .shoji-counter, .shoji-caption")
+  );
+}
+function isDangerousHtmlCaption(value) {
+  return typeof value === "object" && value !== null && typeof value.dangerouslySetInnerHTML === "string";
+}
+class Gallery {
+  constructor(target, options = {}) {
+    /** Not `readonly` — `reinit()` (§2.7) reassigns this + every option-derived field below; initializers here just satisfy strict-init. */
+    __publicField(this, "options", {});
+    __publicField(this, "element");
+    __publicField(this, "bus", new EventBus());
+    __publicField(this, "selector", DEFAULT_SELECTOR);
+    __publicField(this, "isDynamicMode", false);
+    __publicField(this, "preload", 1);
+    __publicField(this, "locale", DEFAULT_LOCALE);
+    __publicField(this, "showCounter", true);
+    __publicField(this, "captionVisibleOnVideo", false);
+    // DESIGN.md §2.3a
+    __publicField(this, "loop", true);
+    __publicField(this, "closable", true);
+    __publicField(this, "autoHideDelay", 5e3);
+    __publicField(this, "focusTrap", new FocusTrap());
+    __publicField(this, "liveRegion", new LiveRegion());
+    __publicField(this, "autoHideTimer", null);
+    __publicField(this, "autoHidden", false);
+    __publicField(this, "hoveredControlCount", 0);
+    __publicField(this, "isClosing", false);
+    __publicField(this, "itemList", []);
+    __publicField(this, "scannedElements", []);
+    __publicField(this, "activeIndex", 0);
+    __publicField(this, "opened", false);
+    __publicField(this, "destroyed", false);
+    __publicField(this, "slides", null);
+    __publicField(this, "dom", null);
+    __publicField(this, "gesture", null);
+    __publicField(this, "transition", null);
+    __publicField(this, "shortcuts", /* @__PURE__ */ new Map());
+    __publicField(this, "pluginStorage", /* @__PURE__ */ new Map());
+    /** Backs `getActivePlugins()`. */
+    __publicField(this, "activePluginNames", /* @__PURE__ */ new Set());
+    __publicField(this, "videoProviders", /* @__PURE__ */ new Map());
+    __publicField(this, "zoomGate", null);
+    __publicField(this, "pluginCleanups", []);
+    __publicField(this, "onContainerClick", (event) => {
+      let node = event.target;
+      while (node && node !== this.element) {
+        if (node instanceof HTMLElement) {
+          const index = this.scannedElements.indexOf(node);
+          if (index !== -1) {
+            event.preventDefault();
+            this.open(index);
+            return;
+          }
+        }
+        node = node.parentNode;
+      }
+    });
+    __publicField(this, "onOuterClick", (event) => {
+      if (this.closable && isBackdropClick(event)) this.close();
+    });
+    /** DESIGN.md §2.8 — any interaction re-shows controls, restarts the idle clock. `autoHideDelay: 0` = "never show controls" — a no-op here. */
+    __publicField(this, "onActivity", () => {
+      if (this.autoHideDelay === 0) return;
+      this.showControls();
+      this.scheduleAutoHide();
+    });
+    __publicField(this, "onKeydown", (event) => {
+      if (document.activeElement instanceof HTMLVideoElement && event.key !== "Escape") return;
+      this.onActivity();
+      switch (event.key) {
+        case "Escape":
+          if (this.closable) this.close();
+          break;
+        case "ArrowLeft":
+        case "a":
+        case "A":
+          this.prev();
+          break;
+        case "ArrowRight":
+        case "d":
+        case "D":
+          this.next();
+          break;
+        case "Home":
+          this.goTo(0);
+          break;
+        case "End":
+          this.goTo(this.itemList.length - 1);
+          break;
+        default: {
+          const shortcut = this.shortcuts.get(event.key);
+          if (!shortcut) return;
+          shortcut(event);
+        }
+      }
+      event.preventDefault();
+    });
+    this.element = resolveElement(target);
+    instanceRegistry.set(this.element, this);
+    allInstances.add(this);
+    this.applyOptions(options);
+  }
+  /** DESIGN.md §2.7 — the live instance mounted on `el`, or `undefined` if none exists there (or it's since been destroyed). */
+  static getInstance(el) {
+    return instanceRegistry.get(el);
+  }
+  /** DESIGN.md §2.7 — every live instance, e.g. for page-wide teardown or devtools inspection. */
+  static instances() {
+    return allInstances.values();
+  }
+  /** Everything the constructor does after `this.element` is resolved — shared with `reinit()` (§2.7). */
+  applyOptions(options) {
+    this.options = options;
+    this.selector = options.selector ?? DEFAULT_SELECTOR;
+    this.isDynamicMode = options.items !== void 0;
+    this.preload = options.preload ?? 1;
+    this.locale = { ...DEFAULT_LOCALE, ...options.locale };
+    this.showCounter = options.counter ?? true;
+    this.loop = options.loop ?? true;
+    this.closable = options.closable ?? true;
+    this.autoHideDelay = options.autoHideDelay ?? 5e3;
+    this.activeIndex = 0;
+    this.scannedElements = [];
+    if (this.isDynamicMode) {
+      this.itemList = options.items ?? [];
+    } else {
+      const scanned = scanContainer(this.element, this.selector);
+      this.itemList = scanned.map((s) => s.item);
+      this.scannedElements = scanned.map((s) => s.element);
+      this.element.addEventListener("click", this.onContainerClick);
+    }
+    this.ensureLightbox();
+    this.dom.closeButton.hidden = !this.closable;
+    if (options.openOnInit && this.itemList.length > 0) {
+      this.open(options.index ?? 0);
+    }
+  }
+  get items() {
+    return this.itemList;
+  }
+  get currentIndex() {
+    return this.activeIndex;
+  }
+  /** True from the first `open()` until `close()`/`destroy()`. */
+  get isOpen() {
+    return this.opened;
+  }
+  /** True once `destroy()` has run. */
+  get isDestroyed() {
+    return this.destroyed;
+  }
+  /** Whether auto-hide (§2.8) currently has controls faded. */
+  get controlsHidden() {
+    return this.autoHidden;
+  }
+  /** Names of plugins that actually initialized. */
+  getActivePlugins() {
+    return [...this.activePluginNames];
+  }
+  /** The active slide's `.shoji-slide-media` container. Empty before the first `open()`; `null` only after `destroy()`. */
+  getActiveMedia() {
+    var _a;
+    return ((_a = this.slides) == null ? void 0 : _a.getActiveMedia()) ?? null;
+  }
+  /** DESIGN.md §4-zoom — suspends drag-to-navigate/close while zoomed. Single slot, not a multi-subscriber event. */
+  registerZoomGate(isZoomed) {
+    this.zoomGate = isZoomed;
+    return () => {
+      if (this.zoomGate === isZoomed) this.zoomGate = null;
+    };
+  }
+  on(event, fn) {
+    return this.bus.on(event, fn);
+  }
+  clampToRange(index) {
+    return Math.min(Math.max(index, 0), Math.max(this.itemList.length - 1, 0));
+  }
+  ensureLightbox() {
+    if (this.dom) return;
+    this.slides = new SlideManager({
+      preload: this.preload,
+      playVideoLabel: this.locale.playVideo,
+      videoProviders: this.videoProviders
+    });
+    this.transition = new SlideTransition(this.slides);
+    const dom = buildLightboxDom(this.slides.element, this.locale);
+    this.dom = dom;
+    dom.outer.appendChild(this.liveRegion.element);
+    dom.closeButton.addEventListener("click", () => this.close());
+    dom.prevButton.addEventListener("click", () => this.prev());
+    dom.nextButton.addEventListener("click", () => this.next());
+    dom.captionToggleButton.addEventListener("click", () => {
+      this.captionVisibleOnVideo = !this.captionVisibleOnVideo;
+      this.updateCaptionVisibility();
+    });
+    dom.outer.addEventListener("click", this.onOuterClick);
+    dom.outer.addEventListener("pointermove", this.onActivity, { passive: true });
+    dom.outer.addEventListener("pointerdown", this.onActivity, { passive: true });
+    dom.outer.addEventListener("touchstart", this.onActivity, { passive: true });
+    dom.outer.addEventListener("wheel", this.onActivity, { passive: true });
+    dom.outer.addEventListener("focusin", this.onActivity);
+    dom.outer.addEventListener("focusout", () => this.scheduleAutoHide());
+    for (const el of [
+      dom.closeButton,
+      dom.prevButton,
+      dom.nextButton,
+      dom.captionToggleButton,
+      dom.caption,
+      dom.counter,
+      dom.toolbarLeft,
+      dom.toolbarCenter,
+      dom.toolbarRight
+    ]) {
+      this.wireControlHover(el);
+    }
+    document.body.appendChild(dom.outer);
+    this.gesture = new GestureController(
+      {
+        dialog: dom.dialog,
+        slides: this.slides,
+        canGoNext: () => this.loop || this.activeIndex < this.itemList.length - 1,
+        canGoPrev: () => this.loop || this.activeIndex > 0,
+        // animate:false — a completed swipe already played its own
+        // live-drag/settle animation (§2.4); running the §2.5 `mode`
+        // transition on top would double-animate. See navigate()'s doc.
+        next: () => this.navigate(this.nextIndex(), 1, false),
+        prev: () => this.navigate(this.prevIndex(), -1, false),
+        close: () => this.close(),
+        canClose: () => this.closable,
+        onActivity: () => this.onActivity(),
+        isZoomed: () => {
+          var _a;
+          return ((_a = this.zoomGate) == null ? void 0 : _a.call(this)) ?? false;
+        }
+      },
+      {
+        onTap: (x, y) => this.bus.emit("tap", { x, y }),
+        onDoubleTap: (x, y) => this.bus.emit("doubleTap", { x, y }),
+        onPinchStart: (centerX, centerY) => this.bus.emit("pinchStart", { centerX, centerY }),
+        onPinchMove: (scale, centerX, centerY) => this.bus.emit("pinchMove", { scale, centerX, centerY }),
+        onPinchEnd: () => this.bus.emit("pinchEnd", {}),
+        onWheelZoom: (deltaScale, x, y) => this.bus.emit("wheelZoom", { deltaScale, x, y })
+      },
+      this.options.gestures
+    );
+    this.initPlugins();
+  }
+  /** DESIGN.md §3 — plugins init here, not the constructor. `requires` checks names loaded earlier; an unmet one is skipped (logged), not thrown. Cleared up front so a `reinit()` doesn't inherit names from before. */
+  initPlugins() {
+    this.activePluginNames.clear();
+    this.videoProviders.clear();
+    for (const plugin of this.options.plugins ?? []) {
+      if (!plugin || typeof plugin.init !== "function") {
+        console.error(
+          "Shoji: skipping an invalid plugins[] entry (not a ShojiPlugin object):",
+          plugin
+        );
+        continue;
+      }
+      const missing = (plugin.requires ?? []).filter((name) => !this.activePluginNames.has(name));
+      if (missing.length > 0) {
+        console.error(
+          `Shoji: plugin "${plugin.name}" requires [${missing.join(", ")}] to be registered first — skipping.`
+        );
+        continue;
+      }
+      const pluginOptions = {
+        ...plugin.defaults,
+        ...this.options[plugin.name]
+      };
+      const ctx = {
+        gallery: this,
+        options: pluginOptions,
+        on: this.on.bind(this),
+        emit: (event, detail) => this.bus.emit(event, detail),
+        ui: {
+          toolbar: (slot, el) => this.pluginToolbar(slot, el),
+          overlay: (el, layer) => this.pluginOverlay(el, layer),
+          outer: () => this.dom.outer,
+          registerShortcut: (key, fn) => {
+            this.shortcuts.set(key, fn);
+            return () => this.shortcuts.delete(key);
+          },
+          registerVideoProvider: (name, render) => {
+            this.videoProviders.set(name, render);
+            return () => {
+              if (this.videoProviders.get(name) === render) this.videoProviders.delete(name);
+            };
+          }
+        },
+        storage: {
+          get: (key) => this.pluginStorage.get(key),
+          set: (key, value) => {
+            this.pluginStorage.set(key, value);
+          }
+        }
+      };
+      const cleanup = plugin.init(ctx);
+      if (typeof cleanup === "function") this.pluginCleanups.push(cleanup);
+      this.activePluginNames.add(plugin.name);
+    }
+  }
+  /**
+   * DESIGN.md §3.1 — 'right' inserts immediately before the close button
+   * (never after), so close stays fixed rightmost and plugins cluster to
+   * its left in registration order: `plugins: [A, B, C]` reads A, B, C,
+   * close. 'left'/'center' are independent zones for a plugin that doesn't
+   * want to sit next to close.
+   */
+  pluginToolbar(slot, el) {
+    const dom = this.dom;
+    const isRawElement = el instanceof HTMLElement;
+    const node = isRawElement ? el : this.buildToolbarButton(el);
+    const unhover = isRawElement ? this.wireControlHover(node) : null;
+    if (slot === "right") {
+      dom.toolbarRight.insertBefore(node, dom.closeButton);
+    } else {
+      (slot === "left" ? dom.toolbarLeft : dom.toolbarCenter).appendChild(node);
+    }
+    return () => {
+      unhover == null ? void 0 : unhover();
+      node.remove();
+    };
+  }
+  buildToolbarButton(spec) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "shoji-toolbar-button";
+    if (spec.icon) {
+      button.ariaLabel = button.title = spec.label;
+      button.innerHTML = spec.icon;
+    } else {
+      button.textContent = spec.label;
+    }
+    button.addEventListener("click", spec.onClick);
+    this.wireControlHover(button);
+    return button;
+  }
+  pluginOverlay(el, layer) {
+    if (layer !== void 0) el.style.zIndex = String(layer);
+    this.dom.dialog.appendChild(el);
+    const unhover = this.wireControlHover(el);
+    return () => {
+      unhover();
+      el.remove();
+    };
+  }
+  /** DESIGN.md §2.8/§3 — pauses auto-hide while genuinely hovered: controls, caption, and any plugin overlay (`ctx.ui.overlay()`). Unsubscribe also corrects the count if removed mid-hover — a real risk for overlay content a plugin can toggle while the gallery stays open, unlike static buttons. */
+  wireControlHover(el) {
+    let hovering = false;
+    const onEnter = () => {
+      hovering = true;
+      this.hoveredControlCount++;
+      this.onActivity();
+    };
+    const onLeave = () => {
+      hovering = false;
+      this.hoveredControlCount--;
+      this.scheduleAutoHide();
+    };
+    el.addEventListener("pointerenter", onEnter);
+    el.addEventListener("pointerleave", onLeave);
+    return () => {
+      el.removeEventListener("pointerenter", onEnter);
+      el.removeEventListener("pointerleave", onLeave);
+      if (hovering) {
+        hovering = false;
+        this.hoveredControlCount--;
+        this.scheduleAutoHide();
+      }
+    };
+  }
+  /**
+   * DESIGN.md §2.8 — paused only by a real *hover*. Used to also treat a
+   * *focused* control as active via `document.activeElement`, but a click
+   * leaves a `<button>` focused indefinitely, permanently blocking
+   * `hideControls()`. Focus still counts as activity (`focusin` →
+   * `onActivity()`), it just no longer blocks the eventual hide.
+   */
+  isControlActive() {
+    return this.hoveredControlCount > 0;
+  }
+  /**
+   * The thumbnail for `index` — what the zoom transition animates to/from,
+   * and what `activeThumbnail` marks/scrolls-to. `data-shoji-id` is an
+   * explicit opt-in that works in any mode (needed for dynamic mode, which
+   * has no scanned DOM); checked first so it can override selector mode's
+   * default `scannedElements[index]` too, e.g. to target an inner element.
+   */
+  getOriginElement(index) {
+    const item = this.itemList[index];
+    if ((item == null ? void 0 : item.id) && typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+      const marked = document.querySelector(
+        `[data-shoji-id="${CSS.escape(item.id)}"]`
+      );
+      if (marked) return marked;
+    }
+    return this.scannedElements[index] ?? null;
+  }
+  scheduleAutoHide() {
+    if (this.autoHideTimer !== null) {
+      clearTimeout(this.autoHideTimer);
+      this.autoHideTimer = null;
+    }
+    if (!this.opened) return;
+    if (this.autoHideDelay === 0) {
+      this.hideControls();
+      return;
+    }
+    this.autoHideTimer = setTimeout(() => this.hideControls(), this.autoHideDelay);
+  }
+  hideControls() {
+    if (!this.dom || this.autoHidden || this.isControlActive()) return;
+    this.autoHidden = true;
+    this.dom.dialog.classList.add("shoji-controls-hidden");
+    this.bus.emit("controls:hide", {});
+  }
+  showControls() {
+    if (!this.dom || !this.autoHidden) return;
+    this.autoHidden = false;
+    this.dom.dialog.classList.remove("shoji-controls-hidden");
+    this.bus.emit("controls:show", {});
+  }
+  /**
+   * DESIGN.md §2.1 — `caption` is `string | HTMLElement | DangerousHtmlCaption`:
+   * a plain string renders as text (`textContent`, auto-escaped, safe by
+   * default); an `HTMLElement` is appended as real DOM (the host built it);
+   * `{ dangerouslySetInnerHTML }` renders raw, unescaped HTML via `innerHTML`
+   * — Shoji does not sanitize it, the host must, same contract as React's
+   * identically-named escape hatch. Returns whether the caption element
+   * should be hidden.
+   */
+  renderCaption(el, caption) {
+    if (caption instanceof HTMLElement) {
+      el.replaceChildren(caption);
+      return false;
+    }
+    if (isDangerousHtmlCaption(caption)) {
+      el.innerHTML = caption.dangerouslySetInnerHTML;
+      return caption.dangerouslySetInnerHTML === "";
+    }
+    el.textContent = caption ?? "";
+    return !caption;
+  }
+  /**
+   * `.shoji-toolbar-button` only — never `.shoji-close`/`.shoji-nav`, which
+   * are different classes entirely, so this can't accidentally block
+   * closing or navigating away from a slow-loading slide. `tabIndex = -1`
+   * (not just the CSS below) so a keyboard user tabbing through the
+   * toolbar skips these entirely while disabled, not just visually dims
+   * them — `pointer-events: none` alone wouldn't stop Enter/Space
+   * activating an already-focused button.
+   */
+  setSlideLoading(loading) {
+    if (!this.dom) return;
+    this.dom.outer.classList.toggle("shoji-slide-loading", loading);
+    for (const button of this.dom.outer.querySelectorAll(
+      ".shoji-toolbar-button"
+    )) {
+      button.ariaDisabled = loading ? "true" : null;
+      if (loading) button.tabIndex = -1;
+      else button.removeAttribute("tabindex");
+    }
+  }
+  /**
+   * Content is always kept current (correct the instant loading finishes,
+   * no text flash) — only `hidden` also gates on `isActiveReady()`, so a
+   * caption for the *new* slide can't sit there readable while the
+   * image/video it describes is still a spinner.
+   */
+  updateCaptionVisibility() {
+    if (!this.dom || !this.slides) return;
+    const item = this.itemList[this.activeIndex];
+    const noCaption = this.renderCaption(this.dom.caption, item == null ? void 0 : item.caption);
+    const isVideo = !!(item == null ? void 0 : item.video);
+    this.dom.caption.classList.toggle("shoji-caption--video", isVideo);
+    const hiddenByToggle = isVideo && !this.captionVisibleOnVideo;
+    this.dom.caption.hidden = noCaption || !this.slides.isActiveReady() || hiddenByToggle;
+    const btn = this.dom.captionToggleButton;
+    btn.hidden = !isVideo || noCaption;
+    if (!btn.hidden) {
+      btn.setAttribute("aria-pressed", String(this.captionVisibleOnVideo));
+      btn.ariaLabel = btn.title = this.captionVisibleOnVideo ? this.locale.hideCaption : this.locale.showCaption;
+    }
+  }
+  renderCurrentSlide(openPlaceholderSrc) {
+    if (!this.slides || !this.dom) return;
+    const dom = this.dom;
+    this.slides.render(
+      this.itemList,
+      this.activeIndex,
+      (loadedIndex) => {
+        if (loadedIndex === this.activeIndex) {
+          this.bus.emit("slideItemLoad", { index: loadedIndex });
+          this.setSlideLoading(false);
+          this.updateCaptionVisibility();
+        }
+      },
+      openPlaceholderSrc
+    );
+    this.setSlideLoading(!this.slides.isActiveReady());
+    const item = this.itemList[this.activeIndex];
+    const total = this.itemList.length;
+    dom.counter.textContent = total > 0 ? `${this.activeIndex + 1} / ${total}` : "";
+    dom.counter.hidden = !this.showCounter || total === 0;
+    this.updateCaptionVisibility();
+    const label = `Image ${this.activeIndex + 1} of ${total}${(item == null ? void 0 : item.alt) ? `: ${item.alt}` : ""}`;
+    this.liveRegion.announce(label);
+    dom.prevButton.hidden = total <= 1;
+    dom.nextButton.hidden = total <= 1;
+    dom.prevButton.disabled = !this.loop && this.activeIndex <= 0;
+    dom.nextButton.disabled = !this.loop && this.activeIndex >= total - 1;
+  }
+  open(index = this.options.index ?? 0) {
+    var _a;
+    if (this.destroyed || this.opened) return;
+    this.bus.emit("beforeOpen", { index });
+    this.ensureLightbox();
+    this.opened = true;
+    this.activeIndex = index;
+    this.captionVisibleOnVideo = !!this.options.showVideoCaption;
+    lockBodyScroll();
+    const origin = this.getOriginElement(index);
+    this.renderCurrentSlide(this.resolveOpenPlaceholderSrc(this.itemList[index], origin));
+    this.dom.outer.classList.add("shoji-open");
+    document.addEventListener("keydown", this.onKeydown);
+    this.focusTrap.activate(this.dom.dialog);
+    this.scheduleAutoHide();
+    this.applyMobileControlsSetting();
+    const media = (_a = this.slides) == null ? void 0 : _a.getActiveMedia();
+    if (media && origin) {
+      zoomIn({ origin, target: media, aspectRatio: this.resolveAspectRatio(index, origin) });
+    }
+    this.bus.emit("open", { index });
+    this.bus.emit("afterOpen", { index });
+  }
+  /** DESIGN.md §2.3 — low-res open() placeholder source, checked in order: item.thumb, a live data-shoji-thumb on origin, else origin's own rendered <img>. */
+  resolveOpenPlaceholderSrc(item, origin) {
+    if (item == null ? void 0 : item.thumb) return item.thumb;
+    const dataThumb = origin == null ? void 0 : origin.getAttribute("data-shoji-thumb");
+    if (dataThumb) return dataThumb;
+    const img = origin == null ? void 0 : origin.querySelector("img");
+    return (img == null ? void 0 : img.currentSrc) || (img == null ? void 0 : img.src) || void 0;
+  }
+  /**
+   * DESIGN.md §2.2/§2.6 — navigates while open; always clamps an explicit
+   * out-of-range index (this is a directed jump, not a step — `loop` only
+   * affects `next()`/`prev()`, see below). No-op if not open. `animate`
+   * (default `true`) runs the configured §2.5 transition; hosts that want
+   * an instant jump — e.g. syncing to an external index without a visual
+   * flourish — can pass `{ animate: false }`.
+   */
+  goTo(index, options) {
+    if (this.destroyed || !this.opened || this.itemList.length === 0) return;
+    const target = this.clampToRange(index);
+    if (target === this.activeIndex) return;
+    const direction = target > this.activeIndex ? 1 : -1;
+    this.navigate(target, direction, (options == null ? void 0 : options.animate) ?? true);
+  }
+  next() {
+    this.navigate(this.nextIndex(), 1, true);
+  }
+  prev() {
+    this.navigate(this.prevIndex(), -1, true);
+  }
+  nextIndex() {
+    const atEnd = this.activeIndex >= this.itemList.length - 1;
+    return atEnd && this.loop ? 0 : this.activeIndex + 1;
+  }
+  prevIndex() {
+    const atStart = this.activeIndex <= 0;
+    return atStart && this.loop ? this.itemList.length - 1 : this.activeIndex - 1;
+  }
+  /**
+   * DESIGN.md §2.5 — the shared path behind `goTo()`/`next()`/`prev()`.
+   * `animate` is `false` only for `GestureController`'s own host callbacks
+   * (see `ensureLightbox()`): a gesture-completed swipe already played its
+   * own live-drag/settle animation, so running a *second*, `mode`-based
+   * transition on top of it would visibly double-animate. Every other
+   * caller — buttons, keyboard, autoplay, a plugin calling `goTo()` — gets
+   * the real, configured transition.
+   */
+  navigate(target, direction, animate) {
+    if (this.destroyed || !this.opened || this.itemList.length === 0) return;
+    const clamped = this.clampToRange(target);
+    if (clamped === this.activeIndex) return;
+    const from = this.activeIndex;
+    this.bus.emit("beforeSlide", { from, to: clamped });
+    this.activeIndex = clamped;
+    const swap = () => this.renderCurrentSlide();
+    if (animate && this.transition) {
+      const modeName = this.resolveTransitionMode();
+      const builtin = TRANSITION_PRESETS[modeName];
+      if (builtin) {
+        this.transition.animate(builtin, direction, swap);
+      } else {
+        this.transition.animateCustom(modeName, direction, swap);
+      }
+    } else {
+      swap();
+    }
+    this.bus.emit("afterSlide", { from, to: clamped });
+  }
+  /** DESIGN.md §2.5 — `mobileSettings.mode` overrides `mode` on a coarse-pointer device, evaluated fresh each navigation. */
+  resolveTransitionMode() {
+    var _a;
+    if (this.isMobileQuery() && ((_a = this.options.mobileSettings) == null ? void 0 : _a.mode)) {
+      return this.options.mobileSettings.mode;
+    }
+    return this.options.mode ?? "slide";
+  }
+  isMobileQuery() {
+    return typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches;
+  }
+  /**
+   * DESIGN.md §2.5 — `mobileSettings.controls: false` starts controls
+   * hidden on a coarse-pointer device, reusing the existing §2.8 auto-hide
+   * mechanism (`hideControls()`) rather than a separate permanent-hide
+   * state: auto-hide is opacity-only, never removed from the tab order,
+   * and already reveals on any activity — a genuinely *permanent* hide
+   * would strand a touch user with no way to ever reach Close.
+   */
+  applyMobileControlsSetting() {
+    var _a;
+    if (this.isMobileQuery() && ((_a = this.options.mobileSettings) == null ? void 0 : _a.controls) === false) {
+      this.hideControls();
+    }
+  }
+  close() {
+    var _a;
+    if (this.destroyed || !this.opened || this.isClosing) return;
+    this.bus.emit("beforeClose", {});
+    this.isClosing = true;
+    const media = (_a = this.slides) == null ? void 0 : _a.getActiveMedia();
+    const origin = this.getOriginElement(this.activeIndex);
+    if (media && origin) {
+      const aspectRatio = this.resolveAspectRatio(this.activeIndex, origin);
+      zoomOut({ origin, target: media, aspectRatio }, () => this.finishClose());
+    } else {
+      this.finishClose();
+    }
+  }
+  /** `item.width`/`height`, else origin's `naturalWidth`/`naturalHeight` (accurate when `item.thumb` is unset). Feeds `computeTransform`'s letterbox-aware sizing. */
+  resolveAspectRatio(index, origin) {
+    const item = this.itemList[index];
+    if ((item == null ? void 0 : item.width) && item.height) return item.width / item.height;
+    const thumbImg = origin == null ? void 0 : origin.querySelector("img");
+    if ((thumbImg == null ? void 0 : thumbImg.naturalWidth) && thumbImg.naturalHeight) {
+      return thumbImg.naturalWidth / thumbImg.naturalHeight;
+    }
+    return void 0;
+  }
+  /**
+   * Idempotent on purpose: a pending zoom-out's `transitionend`/fallback
+   * timeout can still fire after `destroy()` has already force-finished the
+   * close (§ destroy() below) — the `!this.opened` guard makes that a no-op
+   * instead of a second `close`/`afterClose` emission on a torn-down gallery.
+   */
+  finishClose() {
+    var _a, _b;
+    if (!this.opened) return;
+    this.isClosing = false;
+    this.opened = false;
+    unlockBodyScroll();
+    document.removeEventListener("keydown", this.onKeydown);
+    this.focusTrap.deactivate();
+    (_a = this.dom) == null ? void 0 : _a.outer.classList.remove("shoji-open");
+    if (this.autoHideTimer !== null) {
+      clearTimeout(this.autoHideTimer);
+      this.autoHideTimer = null;
+    }
+    this.autoHidden = false;
+    this.hoveredControlCount = 0;
+    (_b = this.dom) == null ? void 0 : _b.dialog.classList.remove("shoji-controls-hidden");
+    this.bus.emit("close", {});
+    this.bus.emit("afterClose", {});
+  }
+  /** DESIGN.md §2.1 — diffs by id (fallback src), preserving the active slide. */
+  updateSlides(items, currentIndex) {
+    if (this.destroyed) return;
+    const activeItem = this.itemList[this.activeIndex];
+    const activeKey = activeItem ? itemKey(activeItem) : void 0;
+    this.itemList = items;
+    let nextIndex = currentIndex;
+    if (nextIndex === void 0 && activeKey !== void 0) {
+      const preserved = items.findIndex((item) => itemKey(item) === activeKey);
+      if (preserved !== -1) nextIndex = preserved;
+    }
+    this.activeIndex = Math.min(
+      Math.max(nextIndex ?? this.activeIndex, 0),
+      Math.max(items.length - 1, 0)
+    );
+    if (this.opened) this.renderCurrentSlide();
+    this.bus.emit("itemsUpdated", { items: this.itemList });
+  }
+  /**
+   * Sugar over `updateSlides()` for the common "insert some items" case —
+   * splices `items` into a copy of the current list at `atIndex` (default:
+   * append at the end) and hands the result to `updateSlides()`, which
+   * still does all the real work (active-item preservation, live re-render
+   * if open, `itemsUpdated`). `atIndex` follows `Array.prototype.splice`'s
+   * own semantics (negative counts from the end, out-of-range clamps) —
+   * no extra validation on top of that.
+   */
+  addSlides(items, atIndex) {
+    if (this.destroyed) return;
+    const next = [...this.itemList];
+    next.splice(atIndex ?? next.length, 0, ...items);
+    this.updateSlides(next);
+  }
+  /**
+   * Sugar over `updateSlides()` for the common "remove some items" case.
+   * Accepts a single id/index or an array mixing both: a `string` matches
+   * the same `id ?? src` key `updateSlides()` already uses for active-item
+   * preservation, a `number` matches that position in the *current*
+   * `items` list (resolved against the list as it is now, before any
+   * removal — passing `[0, 1]` removes the first two items, not "index 0,
+   * then whatever became index 1 after that").
+   */
+  removeSlides(match) {
+    if (this.destroyed) return;
+    const matches = Array.isArray(match) ? match : [match];
+    const indices = new Set(matches.filter((m) => typeof m === "number"));
+    const keys = new Set(matches.filter((m) => typeof m === "string"));
+    const next = this.itemList.filter((item, i) => !indices.has(i) && !keys.has(itemKey(item)));
+    this.updateSlides(next);
+  }
+  /** DESIGN.md §2.7 — selector-mode only; sugar over updateSlides() sourced from a DOM rescan. */
+  refresh() {
+    if (this.destroyed) return;
+    if (this.isDynamicMode) {
+      console.warn("Shoji: refresh() is a no-op in dynamic mode — call updateSlides() instead.");
+      return;
+    }
+    const scanned = scanContainer(this.element, this.selector);
+    this.scannedElements = scanned.map((s) => s.element);
+    this.updateSlides(scanned.map((s) => s.item));
+  }
+  /** Shared by `destroy()`/`reinit()` (§2.7): force-close, run plugin cleanups, drop gesture/transition/slide/dialog. */
+  teardown() {
+    var _a, _b, _c;
+    if (this.opened) {
+      if (!this.isClosing) this.bus.emit("beforeClose", {});
+      this.finishClose();
+    }
+    for (const cleanup of this.pluginCleanups) cleanup();
+    this.pluginCleanups = [];
+    this.shortcuts.clear();
+    this.pluginStorage.clear();
+    this.activePluginNames.clear();
+    this.videoProviders.clear();
+    if (!this.isDynamicMode) {
+      this.element.removeEventListener("click", this.onContainerClick);
+    }
+    (_a = this.gesture) == null ? void 0 : _a.destroy();
+    this.gesture = null;
+    this.transition = null;
+    (_b = this.slides) == null ? void 0 : _b.destroy();
+    (_c = this.dom) == null ? void 0 : _c.outer.remove();
+    this.slides = null;
+    this.dom = null;
+  }
+  destroy() {
+    if (this.destroyed) return;
+    if (instanceRegistry.get(this.element) === this) instanceRegistry.delete(this.element);
+    allInstances.delete(this);
+    this.teardown();
+    this.bus.emit("destroy", {});
+    this.bus.clear();
+    this.destroyed = true;
+  }
+  /**
+   * DESIGN.md §2.7 — full teardown + reconstruction on `this`, not a new
+   * object: `Shoji.getInstance(el)`/any held reference keeps working across
+   * the call, unlike `destroy()` + `new Shoji(...)`. Omit `options` to
+   * rebuild unchanged (a hard reset); pass options to reconfigure
+   * structurally. `gallery.on(...)` listeners do NOT survive — the event
+   * bus is fully cleared, same as `destroy()` — re-`on()` anything needed.
+   */
+  reinit(options = this.options) {
+    if (this.destroyed) return;
+    this.teardown();
+    this.bus.clear();
+    this.applyOptions(options);
+  }
+}
+export {
+  EventBus,
+  Gallery
+};
+//# sourceMappingURL=index.js.map