@michaelyagi/shoji 0.1.0-alpha.6

package/dist/shoji.js

@@ -0,0 +1,3605 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? define(factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, global.Shoji = factory());
+})(this, (function() {
+  "use strict";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);
+
+  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$1 = '<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 };
+  }
+  function prefersReducedMotion$2() {
+    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  function parseCssTime$1(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 containedBox(container, aspectRatio) {
+    const containerRatio = container.width / container.height;
+    const width = aspectRatio > containerRatio ? container.width : container.height * aspectRatio;
+    const height = aspectRatio > containerRatio ? container.width / aspectRatio : container.height;
+    return {
+      left: container.left + (container.width - width) / 2,
+      top: container.top + (container.height - height) / 2,
+      width,
+      height
+    };
+  }
+  function effectiveTargetBox(target, aspectRatio) {
+    const child = target.firstElementChild;
+    const isPlaceholder = child instanceof HTMLElement && (child.classList.contains("shoji-slide-spinner") || child.classList.contains("shoji-slide-open-placeholder"));
+    if (child instanceof HTMLElement && !isPlaceholder) {
+      const rect = child.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) return rect;
+    }
+    const containerRect = target.getBoundingClientRect();
+    if (aspectRatio && containerRect.width > 0 && containerRect.height > 0) {
+      return containedBox(containerRect, aspectRatio);
+    }
+    return containerRect;
+  }
+  function computeTransform(origin, target, aspectRatio) {
+    const originRect = origin.getBoundingClientRect();
+    const targetRect = effectiveTargetBox(target, aspectRatio);
+    if (targetRect.width === 0 || targetRect.height === 0 || originRect.width === 0 || originRect.height === 0) {
+      return null;
+    }
+    const scale = Math.min(
+      originRect.width / targetRect.width,
+      originRect.height / targetRect.height
+    );
+    const translateX = originRect.left + originRect.width / 2 - (targetRect.left + targetRect.width / 2);
+    const translateY = originRect.top + originRect.height / 2 - (targetRect.top + targetRect.height / 2);
+    return `translate3d(${translateX}px, ${translateY}px, 0) scale3d(${scale}, ${scale}, 1)`;
+  }
+  function waitForTransitionEnd(target, cb) {
+    const durationMs = parseCssTime$1(getComputedStyle(target).transitionDuration);
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      target.removeEventListener("transitionend", onEnd);
+      cb();
+    };
+    const onEnd = (event) => {
+      if (event.target === target && event.propertyName === "transform")
+        finish();
+    };
+    target.addEventListener("transitionend", onEnd);
+    setTimeout(finish, durationMs + 100);
+  }
+  function clearInlineTransform$1(target, expectedTransform) {
+    target.style.transition = "";
+    target.style.transformOrigin = "";
+    target.style.willChange = "";
+    if (target.style.transform === expectedTransform) target.style.transform = "";
+  }
+  function zoomIn({ origin, target, aspectRatio }) {
+    if (prefersReducedMotion$2()) return;
+    const transform = computeTransform(origin, target, aspectRatio);
+    if (!transform) return;
+    target.style.transition = "none";
+    target.style.transformOrigin = "center";
+    target.style.willChange = "transform";
+    target.style.transform = transform;
+    void target.offsetHeight;
+    target.style.transition = "transform var(--shoji-duration) var(--shoji-easing)";
+    target.style.transform = "none";
+    waitForTransitionEnd(target, () => clearInlineTransform$1(target, "none"));
+  }
+  function zoomOut({ origin, target, aspectRatio }, onComplete) {
+    if (prefersReducedMotion$2()) {
+      onComplete();
+      return;
+    }
+    const transform = computeTransform(origin, target, aspectRatio);
+    if (!transform) {
+      onComplete();
+      return;
+    }
+    target.style.transformOrigin = "center";
+    target.style.willChange = "transform";
+    target.style.transition = "transform var(--shoji-duration) var(--shoji-easing)";
+    void target.offsetHeight;
+    target.style.transform = transform;
+    const appliedTransform = target.style.transform;
+    waitForTransitionEnd(target, () => {
+      clearInlineTransform$1(target, appliedTransform);
+      onComplete();
+    });
+  }
+  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$1;
+      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$1() {
+    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$1()) {
+        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);
+    }
+  }
+  function prefersReducedMotion() {
+    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  const ActiveThumbnail = {
+    name: "activeThumbnail",
+    defaults: {
+      activeClass: "shoji-thumb-active",
+      scrollIntoView: true
+    },
+    init(ctx) {
+      const { gallery } = ctx;
+      const activeClass = String(ctx.options.activeClass ?? "shoji-thumb-active");
+      const scrollIntoView = ctx.options.scrollIntoView !== false;
+      let current = null;
+      function apply(index) {
+        const el = gallery.getOriginElement(index);
+        if (current && current !== el) current.classList.remove(activeClass);
+        if (el) {
+          el.classList.add(activeClass);
+          if (scrollIntoView) {
+            el.scrollIntoView({
+              block: "nearest",
+              inline: "nearest",
+              behavior: prefersReducedMotion() ? "auto" : "smooth"
+            });
+          }
+        }
+        current = el;
+      }
+      function clear() {
+        current == null ? void 0 : current.classList.remove(activeClass);
+        current = null;
+      }
+      const offOpen = ctx.on("afterOpen", ({ index }) => apply(index));
+      const offSlide = ctx.on("afterSlide", ({ to }) => apply(to));
+      const offClose = ctx.on("close", clear);
+      return () => {
+        offOpen();
+        offSlide();
+        offClose();
+        clear();
+      };
+    }
+  };
+  const PLAY_ICON = '<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>';
+  const PAUSE_ICON = '<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg>';
+  function findPlayable(media) {
+    const video = media == null ? void 0 : media.querySelector("video");
+    if (video) return video;
+    const provider = media == null ? void 0 : media.querySelector(
+      ".shoji-slide-provider-video"
+    );
+    if (provider && typeof provider.play === "function") return provider;
+    return null;
+  }
+  function isPendingProviderVideo(media) {
+    const provider = media == null ? void 0 : media.querySelector(
+      ".shoji-slide-provider-video"
+    );
+    return !!provider && typeof provider.play !== "function";
+  }
+  const PROVIDER_PLAY_RETRY_MS = 400;
+  const MAX_PROVIDER_PLAY_ATTEMPTS = 8;
+  const Autoplay = {
+    name: "autoplay",
+    defaults: { interval: 5e3, showProgress: true },
+    init(ctx) {
+      const { gallery } = ctx;
+      const interval = Number(ctx.options.interval ?? 5e3);
+      const showProgress = ctx.options.showProgress !== false;
+      const locale = ctx.options.locale;
+      const playLabel = (locale == null ? void 0 : locale.play) ?? "Play slideshow";
+      const pauseLabel = (locale == null ? void 0 : locale.pause) ?? "Pause slideshow";
+      let playing = false;
+      let timer = null;
+      let currentVideo = null;
+      let awaitingProviderVideo = false;
+      const media = gallery.getActiveMedia();
+      function onVideoError() {
+        if (playing) advance();
+      }
+      media == null ? void 0 : media.addEventListener("error", onVideoError);
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "shoji-toolbar-button";
+      button.setAttribute("aria-label", playLabel);
+      button.title = playLabel;
+      button.innerHTML = PLAY_ICON;
+      const progress = document.createElement("div");
+      progress.className = "shoji-autoplay-progress";
+      progress.hidden = true;
+      const progressBar = document.createElement("div");
+      progressBar.className = "shoji-autoplay-progress-bar";
+      progress.appendChild(progressBar);
+      function clearTimer() {
+        if (timer !== null) {
+          clearTimeout(timer);
+          timer = null;
+        }
+      }
+      function resetProgressBar() {
+        if (!showProgress) return;
+        progress.hidden = true;
+        progressBar.style.transition = "none";
+        progressBar.style.width = "0%";
+      }
+      function runProgressBar(ms) {
+        if (!showProgress) return;
+        progress.hidden = false;
+        progressBar.style.transition = "none";
+        progressBar.style.width = "0%";
+        void progressBar.offsetWidth;
+        progressBar.style.transition = `width ${ms}ms linear`;
+        progressBar.style.width = "100%";
+      }
+      function setButtonState(isPlaying) {
+        playing = isPlaying;
+        button.innerHTML = isPlaying ? PAUSE_ICON : PLAY_ICON;
+        button.setAttribute("aria-label", isPlaying ? pauseLabel : playLabel);
+        button.title = isPlaying ? pauseLabel : playLabel;
+      }
+      function onVideoEnded() {
+        if (playing) advance();
+      }
+      function onVideoPause() {
+        if (currentVideo == null ? void 0 : currentVideo.ended) return;
+        stop();
+      }
+      function detachVideo() {
+        if (!currentVideo) return;
+        currentVideo.removeEventListener("ended", onVideoEnded);
+        currentVideo.removeEventListener("pause", onVideoPause);
+        currentVideo = null;
+      }
+      function ensureProviderPlaying(video, attemptsLeft) {
+        video.muted = true;
+        video.play();
+        setTimeout(() => {
+          if (currentVideo !== video || !playing) return;
+          if (!video.paused) return;
+          if (attemptsLeft > 0) ensureProviderPlaying(video, attemptsLeft - 1);
+          else stop();
+        }, PROVIDER_PLAY_RETRY_MS);
+      }
+      function enterSlide() {
+        clearTimer();
+        detachVideo();
+        resetProgressBar();
+        awaitingProviderVideo = false;
+        if (!playing) return;
+        const media2 = gallery.getActiveMedia();
+        const video = findPlayable(media2);
+        if (video) {
+          currentVideo = video;
+          video.addEventListener("ended", onVideoEnded);
+          video.addEventListener("pause", onVideoPause);
+          if (video instanceof HTMLVideoElement) {
+            const playResult = video.play();
+            if (playResult && typeof playResult.catch === "function") {
+              playResult.catch(() => stop());
+            }
+          } else {
+            ensureProviderPlaying(video, MAX_PROVIDER_PLAY_ATTEMPTS);
+          }
+          return;
+        }
+        awaitingProviderVideo = isPendingProviderVideo(media2);
+        runProgressBar(interval);
+        timer = setTimeout(advance, interval);
+      }
+      function advance() {
+        const before = gallery.currentIndex;
+        gallery.next();
+        if (gallery.currentIndex === before) stop();
+      }
+      function start() {
+        if (playing) return;
+        setButtonState(true);
+        ctx.emit("autoplayStart", {});
+        enterSlide();
+      }
+      function stop() {
+        if (!playing) return;
+        setButtonState(false);
+        clearTimer();
+        resetProgressBar();
+        if (currentVideo && !currentVideo.paused) currentVideo.pause();
+        detachVideo();
+        ctx.emit("autoplayStop", {});
+      }
+      function toggle() {
+        if (playing) stop();
+        else start();
+      }
+      button.addEventListener("click", toggle);
+      const removeButton = ctx.ui.toolbar("right", button);
+      const removeProgress = showProgress ? ctx.ui.overlay(progress) : null;
+      const removeShortcut = ctx.ui.registerShortcut(" ", toggle);
+      const offSlide = ctx.on("afterSlide", () => {
+        if (playing) enterSlide();
+      });
+      const offSlideItemLoad = ctx.on("slideItemLoad", ({ index }) => {
+        if (playing && awaitingProviderVideo && index === gallery.currentIndex) enterSlide();
+      });
+      const offClose = ctx.on("close", () => stop());
+      return () => {
+        stop();
+        media == null ? void 0 : media.removeEventListener("error", onVideoError);
+        removeButton();
+        removeProgress == null ? void 0 : removeProgress();
+        removeShortcut();
+        offSlide();
+        offSlideItemLoad();
+        offClose();
+      };
+    }
+  };
+  const EXPAND_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="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg>';
+  const COMPRESS_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 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5"/></svg>';
+  function isSupported() {
+    return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
+  }
+  function currentFullscreenElement() {
+    return document.fullscreenElement ?? document.webkitFullscreenElement ?? null;
+  }
+  function requestFullscreen(el) {
+    var _a;
+    const target = el;
+    if (target.requestFullscreen) target.requestFullscreen().catch(() => {
+    });
+    else (_a = target.webkitRequestFullscreen) == null ? void 0 : _a.call(target);
+  }
+  function exitFullscreen() {
+    var _a;
+    const doc = document;
+    if (document.exitFullscreen) document.exitFullscreen().catch(() => {
+    });
+    else (_a = doc.webkitExitFullscreen) == null ? void 0 : _a.call(doc);
+  }
+  const Fullscreen = {
+    name: "fullscreen",
+    init(ctx) {
+      if (!isSupported()) return;
+      const outer = ctx.ui.outer();
+      const locale = ctx.gallery.options.locale ?? {};
+      const enterLabel = locale.enterFullscreen ?? "Enter fullscreen";
+      const exitLabel = locale.exitFullscreen ?? "Exit fullscreen";
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "shoji-toolbar-button";
+      button.innerHTML = EXPAND_ICON;
+      button.setAttribute("aria-label", enterLabel);
+      button.title = enterLabel;
+      button.setAttribute("aria-pressed", "false");
+      function isActive() {
+        return currentFullscreenElement() === outer;
+      }
+      function setState(active) {
+        button.innerHTML = active ? COMPRESS_ICON : EXPAND_ICON;
+        button.setAttribute("aria-label", active ? exitLabel : enterLabel);
+        button.title = active ? exitLabel : enterLabel;
+        button.setAttribute("aria-pressed", String(active));
+      }
+      button.addEventListener("click", () => {
+        if (isActive()) exitFullscreen();
+        else requestFullscreen(outer);
+      });
+      const onChange = () => {
+        const active = isActive();
+        setState(active);
+        ctx.emit("fullscreenChange", { fullscreen: active });
+      };
+      document.addEventListener("fullscreenchange", onChange);
+      document.addEventListener("webkitfullscreenchange", onChange);
+      const removeButton = ctx.ui.toolbar("right", button);
+      const offClose = ctx.on("close", () => {
+        if (isActive()) exitFullscreen();
+      });
+      return () => {
+        document.removeEventListener("fullscreenchange", onChange);
+        document.removeEventListener("webkitfullscreenchange", onChange);
+        removeButton();
+        offClose();
+        if (isActive()) exitFullscreen();
+      };
+    }
+  };
+  function computeColumnCount(options) {
+    const { containerWidth, gutterX, columns } = options;
+    if (typeof columns === "number") return Math.max(1, Math.floor(columns));
+    const target = Math.max(
+      1,
+      Math.floor((containerWidth + gutterX) / (options.columnWidth + gutterX))
+    );
+    const maxAllowedByMin = Math.max(
+      1,
+      Math.floor((containerWidth + gutterX) / (options.minColumnWidth + gutterX))
+    );
+    const minRequiredByMax = Math.max(
+      1,
+      Math.ceil((containerWidth + gutterX) / (options.maxColumnWidth + gutterX))
+    );
+    return Math.max(minRequiredByMax, Math.min(target, maxAllowedByMin));
+  }
+  function computeColumnWidth(containerWidth, gutterX, columnCount) {
+    return (containerWidth - gutterX * (columnCount - 1)) / columnCount;
+  }
+  function layoutMasonry(tiles, options, startHeights) {
+    const columnCount = computeColumnCount(options);
+    const colWidth = computeColumnWidth(options.containerWidth, options.gutterX, columnCount);
+    const columnHeights = startHeights && startHeights.length === columnCount ? [...startHeights] : new Array(columnCount).fill(0);
+    const positions = tiles.map((tile, i) => {
+      const colIndex = options.fill === "ordered" ? i % columnCount : indexOfShortest(columnHeights);
+      const tileHeight = tile.width > 0 ? colWidth * (tile.height / tile.width) : colWidth;
+      const x = colIndex * (colWidth + options.gutterX);
+      const y = columnHeights[colIndex];
+      columnHeights[colIndex] = y + tileHeight + options.gutterY;
+      return { x, y, width: colWidth, height: tileHeight };
+    });
+    const containerHeight = tiles.length === 0 ? 0 : Math.max(...columnHeights) - options.gutterY;
+    return { positions, columnCount, columnWidth: colWidth, columnHeights, containerHeight };
+  }
+  function indexOfShortest(heights) {
+    let shortest = 0;
+    for (let i = 1; i < heights.length; i++) {
+      if (heights[i] < heights[shortest]) shortest = i;
+    }
+    return shortest;
+  }
+  function layoutMasonryHorizontal(tiles, options) {
+    const { containerWidth, gutterX, gutterY, rowHeight } = options;
+    const positions = new Array(tiles.length);
+    let currentY = 0;
+    let rowStart = 0;
+    let rowWidth = 0;
+    let rowCount = 0;
+    function tileWidth(tile) {
+      return tile.height > 0 ? rowHeight * (tile.width / tile.height) : rowHeight;
+    }
+    function placeRow(start, endExclusive) {
+      let x = 0;
+      for (let i = start; i < endExclusive; i++) {
+        const w = tileWidth(tiles[i]);
+        positions[i] = { x, y: currentY, width: w, height: rowHeight };
+        x += w + gutterX;
+      }
+      rowCount++;
+      currentY += rowHeight + gutterY;
+    }
+    for (let i = 0; i < tiles.length; i++) {
+      const w = tileWidth(tiles[i]);
+      const countInRow = i - rowStart;
+      const widthIfIncluded = rowWidth + (countInRow > 0 ? gutterX : 0) + w;
+      if (countInRow > 0 && widthIfIncluded > containerWidth) {
+        placeRow(rowStart, i);
+        rowStart = i;
+        rowWidth = w;
+      } else {
+        rowWidth = widthIfIncluded;
+      }
+    }
+    if (rowStart < tiles.length) placeRow(rowStart, tiles.length);
+    const containerHeight = tiles.length === 0 ? 0 : currentY - gutterY;
+    return { positions, rowCount, containerHeight };
+  }
+  function aspectRatioOf(tile) {
+    return tile.width > 0 && tile.height > 0 ? tile.width / tile.height : 1;
+  }
+  function layoutJustified(tiles, options) {
+    const { containerWidth, gutterX, gutterY, rowHeight, minRowHeight, maxRowHeight, lastRow } = options;
+    const positions = new Array(tiles.length).fill(null);
+    const rows = [];
+    let currentY = 0;
+    let rowStart = 0;
+    let aspectSum = 0;
+    function naturalHeightOf(startIndex, endExclusive, sum) {
+      const availableWidth = containerWidth - gutterX * (endExclusive - startIndex - 1);
+      return availableWidth / sum;
+    }
+    function placeRow(startIndex, endExclusive, height) {
+      let x = 0;
+      for (let i = startIndex; i < endExclusive; i++) {
+        const width = height * aspectRatioOf(tiles[i]);
+        positions[i] = { x, y: currentY, width, height };
+        x += width + gutterX;
+      }
+      rows.push({ start: startIndex, end: endExclusive, y: currentY, height });
+      currentY += height + gutterY;
+    }
+    function resolveScaledRow(startIndex, endExclusive, sum) {
+      let end = endExclusive;
+      let rowSum = sum;
+      while (end - startIndex > 1 && naturalHeightOf(startIndex, end, rowSum) < minRowHeight) {
+        end--;
+        rowSum -= aspectRatioOf(tiles[end]);
+      }
+      const natural = naturalHeightOf(startIndex, end, rowSum);
+      const height = end - startIndex === 1 && natural < minRowHeight ? natural : Math.min(Math.max(natural, minRowHeight), maxRowHeight);
+      placeRow(startIndex, end, height);
+      return end;
+    }
+    for (let i = 0; i < tiles.length; i++) {
+      aspectSum += aspectRatioOf(tiles[i]);
+      const count = i - rowStart + 1;
+      const widthAtTargetHeight = rowHeight * aspectSum + gutterX * (count - 1);
+      if (widthAtTargetHeight >= containerWidth) {
+        const end = resolveScaledRow(rowStart, i + 1, aspectSum);
+        rowStart = end;
+        aspectSum = 0;
+        for (let j = end; j <= i; j++) aspectSum += aspectRatioOf(tiles[j]);
+      }
+    }
+    if (rowStart < tiles.length) {
+      if (lastRow === "justify") {
+        let start = rowStart;
+        while (start < tiles.length) {
+          let sum = 0;
+          for (let j = start; j < tiles.length; j++) sum += aspectRatioOf(tiles[j]);
+          start = resolveScaledRow(start, tiles.length, sum);
+        }
+      } else if (lastRow === "left") {
+        placeRow(rowStart, tiles.length, rowHeight);
+      }
+    }
+    const containerHeight = tiles.length === 0 ? 0 : Math.max(0, currentY - gutterY);
+    return { positions, containerHeight, rows };
+  }
+  const DEFAULT_ASPECT = { width: 4, height: 3 };
+  function resolveGutter(raw) {
+    if (raw && typeof raw === "object") {
+      const obj = raw;
+      return { x: Number(obj.x ?? 8), y: Number(obj.y ?? 8) };
+    }
+    const n = Number(raw ?? 8);
+    return { x: n, y: n };
+  }
+  function keyOf(item) {
+    return item.id ?? item.src;
+  }
+  function isPureAppend(oldItems, newItems) {
+    if (newItems.length <= oldItems.length) return false;
+    for (let i = 0; i < oldItems.length; i++) {
+      if (keyOf(oldItems[i]) !== keyOf(newItems[i])) return false;
+    }
+    return true;
+  }
+  const Layout = {
+    name: "layout",
+    defaults: {
+      type: "justified",
+      gutter: 8,
+      columns: "auto",
+      columnWidth: 240,
+      minColumnWidth: 160,
+      maxColumnWidth: 480,
+      fill: "shortest",
+      animate: true,
+      autoMeasure: true
+    },
+    init(ctx) {
+      const { gallery } = ctx;
+      const type = ctx.options.type ?? "justified";
+      const gutter = resolveGutter(ctx.options.gutter);
+      const aspectRatio = Number(ctx.options.aspectRatio ?? 1);
+      const orientation = ctx.options.orientation ?? "vertical";
+      const columns = ctx.options.columns ?? "auto";
+      const columnWidth = Number(ctx.options.columnWidth ?? 240);
+      const minColumnWidth = Number(ctx.options.minColumnWidth ?? 160);
+      const maxColumnWidth = Number(ctx.options.maxColumnWidth ?? 480);
+      const fill = ctx.options.fill ?? "shortest";
+      const rowHeight = Number(ctx.options.rowHeight ?? 220);
+      const minRowHeight = Number(ctx.options.minRowHeight ?? 120);
+      const maxRowHeight = Number(ctx.options.maxRowHeight ?? 360);
+      const lastRow = ctx.options.lastRow ?? "justify";
+      const animate = ctx.options.animate !== false;
+      const autoMeasureEnabled = ctx.options.autoMeasure !== false;
+      const horizontal = type === "masonry" && orientation === "horizontal";
+      const groupByFn = ctx.options.groupBy;
+      const renderHeadingFn = ctx.options.renderHeading;
+      const headingOverflow = ctx.options.headingOverflow ?? "show";
+      const stickyHeadingsRaw = ctx.options.stickyHeadings === true;
+      const stickyHeadings = stickyHeadingsRaw && type === "grid";
+      if (stickyHeadingsRaw && type !== "grid") {
+        console.warn(
+          "Shoji: layout plugin — stickyHeadings is only implemented for type: 'grid'; ignored (see the option's doc comment)."
+        );
+      }
+      if (groupByFn && horizontal) {
+        console.warn(
+          "Shoji: layout plugin — groupBy isn't supported with orientation: 'horizontal'; ignored."
+        );
+      }
+      const groupingEnabled = !!groupByFn && !horizontal;
+      const baseConfig = {
+        gutter,
+        columns,
+        columnWidth,
+        minColumnWidth,
+        maxColumnWidth,
+        fill,
+        rowHeight,
+        minRowHeight,
+        maxRowHeight,
+        lastRow
+      };
+      const breakpointsRaw = ctx.options.breakpoints;
+      const sortedBreakpoints = breakpointsRaw ? Object.entries(breakpointsRaw).map(([key, overrides]) => [Number(key), overrides]).sort((a, b) => a[0] - b[0]) : [];
+      function resolveConfig(width) {
+        const match = sortedBreakpoints.find(([maxWidth]) => width <= maxWidth);
+        if (!match) return baseConfig;
+        const overrides = match[1];
+        return {
+          gutter: overrides.gutter !== void 0 ? resolveGutter(overrides.gutter) : baseConfig.gutter,
+          columns: overrides.columns ?? baseConfig.columns,
+          columnWidth: overrides.columnWidth ?? baseConfig.columnWidth,
+          minColumnWidth: overrides.minColumnWidth ?? baseConfig.minColumnWidth,
+          maxColumnWidth: overrides.maxColumnWidth ?? baseConfig.maxColumnWidth,
+          fill: overrides.fill ?? baseConfig.fill,
+          rowHeight: overrides.rowHeight ?? baseConfig.rowHeight,
+          minRowHeight: overrides.minRowHeight ?? baseConfig.minRowHeight,
+          maxRowHeight: overrides.maxRowHeight ?? baseConfig.maxRowHeight,
+          lastRow: overrides.lastRow ?? baseConfig.lastRow
+        };
+      }
+      const container = gallery.element;
+      container.classList.add("shoji-layout", `shoji-layout--${type}`);
+      if (animate) container.classList.add("shoji-layout--animate");
+      let tiles = [];
+      let headings = [];
+      let columnHeights;
+      let previousItems = [];
+      let warnedMissingDims = false;
+      function computeSections(items) {
+        const sections = [];
+        for (let i = 0; i < items.length; i++) {
+          const key = groupByFn(items[i]);
+          const current = sections[sections.length - 1];
+          if (!current || current.key !== key) {
+            sections.push({ key, startIndex: i, endIndex: i + 1 });
+          } else {
+            current.endIndex = i + 1;
+          }
+        }
+        return sections;
+      }
+      function createHeadingRoot(key, sectionItems) {
+        const rendered = renderHeadingFn ? renderHeadingFn(key, sectionItems) : key;
+        let root;
+        let structured = null;
+        if (typeof rendered === "string") {
+          root = document.createElement("h2");
+          root.textContent = rendered;
+        } else if (rendered instanceof HTMLElement) {
+          root = rendered;
+        } else {
+          root = document.createElement("h2");
+          const titleEl = document.createElement("span");
+          titleEl.className = "shoji-layout-heading-title";
+          titleEl.textContent = rendered.title;
+          root.appendChild(titleEl);
+          let subtitleEl = null;
+          if (rendered.subtitle) {
+            subtitleEl = document.createElement("span");
+            subtitleEl.className = "shoji-layout-heading-subtitle";
+            subtitleEl.textContent = rendered.subtitle;
+            root.appendChild(subtitleEl);
+          }
+          structured = { titleEl, subtitleEl };
+        }
+        root.classList.add("shoji-layout-heading");
+        if (stickyHeadings) root.classList.add("shoji-layout-heading--sticky");
+        return { root, structured };
+      }
+      function headingSegments() {
+        return headings.map((heading, i) => ({
+          heading,
+          start: heading.tileStart,
+          end: i + 1 < headings.length ? headings[i + 1].tileStart : tiles.length
+        }));
+      }
+      function measurableSrc(item) {
+        return item.thumb ?? item.poster ?? (item.video ? void 0 : item.src);
+      }
+      function aspectOf(item) {
+        if ((item == null ? void 0 : item.width) && item.height) return { width: item.width, height: item.height };
+        const selfCorrecting = autoMeasureEnabled && !!item && !!measurableSrc(item);
+        if (!warnedMissingDims && !selfCorrecting) {
+          warnedMissingDims = true;
+          console.warn(
+            autoMeasureEnabled ? "Shoji: layout plugin — item(s) missing width/height with no measurable thumb/poster/src to auto-measure from either; falling back to a 4:3 placeholder ratio permanently for those." : "Shoji: layout plugin — item(s) missing width/height and autoMeasure is disabled. Masonry/justified positions are computed from aspect ratios up front, never by measuring loaded images (DESIGN.md §5.2 — that causes layout-jump), so items without dimensions fall back to a 4:3 placeholder ratio instead."
+          );
+        }
+        return DEFAULT_ASPECT;
+      }
+      function createTile(item, index) {
+        const root = document.createElement("a");
+        root.className = "shoji-layout-tile";
+        if (item.id) root.dataset.shojiId = item.id;
+        root.dataset.shojiIndex = String(index);
+        const img = document.createElement("img");
+        img.src = item.thumb ?? item.poster ?? item.src;
+        img.loading = "lazy";
+        img.alt = item.alt ?? "";
+        root.appendChild(img);
+        const tile = { index, root, img };
+        root.addEventListener("click", (event) => {
+          event.preventDefault();
+          gallery.open(tile.index);
+        });
+        return tile;
+      }
+      function applyGrid(target) {
+        const containerWidth = container.getBoundingClientRect().width;
+        const config = resolveConfig(containerWidth);
+        container.style.setProperty("--shoji-layout-column-width", `${config.columnWidth}px`);
+        container.style.setProperty(
+          "--shoji-layout-gutter",
+          `${config.gutter.y}px ${config.gutter.x}px`
+        );
+        for (const tile of target) {
+          tile.root.style.setProperty("--shoji-layout-tile-aspect", `${aspectRatio}`);
+        }
+      }
+      function applyMasonry(appendOnly) {
+        const containerWidth = container.getBoundingClientRect().width;
+        if (containerWidth <= 0) return;
+        const config = resolveConfig(containerWidth);
+        const masonryOptions = {
+          containerWidth,
+          gutterX: config.gutter.x,
+          gutterY: config.gutter.y,
+          columns: config.columns,
+          columnWidth: config.columnWidth,
+          minColumnWidth: config.minColumnWidth,
+          maxColumnWidth: config.maxColumnWidth,
+          fill: config.fill
+        };
+        if (groupingEnabled && headings.length > 0) {
+          const segments = headingSegments();
+          const headingHeights = segments.map((s) => s.heading.root.getBoundingClientRect().height);
+          let y = 0;
+          segments.forEach(({ heading, start, end }, i) => {
+            const segTiles = tiles.slice(start, end);
+            heading.root.style.transform = `translate(0px, ${y}px)`;
+            y += headingHeights[i] + config.gutter.y;
+            const segResult = layoutMasonry(
+              segTiles.map((t) => aspectOf(gallery.items[t.index])),
+              masonryOptions
+            );
+            segTiles.forEach((tile, j) => {
+              const pos = segResult.positions[j];
+              tile.root.style.width = `${pos.width}px`;
+              tile.root.style.height = `${pos.height}px`;
+              tile.root.style.visibility = "visible";
+              tile.root.style.transform = `translate(${pos.x}px, ${y + pos.y}px)`;
+            });
+            y += segResult.containerHeight + config.gutter.y;
+          });
+          columnHeights = void 0;
+          container.style.height = `${Math.max(0, y - config.gutter.y)}px`;
+          return;
+        }
+        const target = appendOnly ?? tiles;
+        const masonryTiles = target.map((t) => aspectOf(gallery.items[t.index]));
+        const startHeights = appendOnly ? columnHeights : void 0;
+        const result = layoutMasonry(masonryTiles, masonryOptions, startHeights);
+        target.forEach((tile, i) => {
+          const pos = result.positions[i];
+          tile.root.style.width = `${pos.width}px`;
+          tile.root.style.height = `${pos.height}px`;
+          tile.root.style.visibility = "visible";
+          tile.root.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+        });
+        columnHeights = result.columnHeights;
+        container.style.height = `${result.containerHeight}px`;
+      }
+      function applyMasonryHorizontal() {
+        const containerWidth = container.getBoundingClientRect().width;
+        if (containerWidth <= 0) return;
+        const config = resolveConfig(containerWidth);
+        const masonryTiles = tiles.map((t) => aspectOf(gallery.items[t.index]));
+        const result = layoutMasonryHorizontal(masonryTiles, {
+          containerWidth,
+          gutterX: config.gutter.x,
+          gutterY: config.gutter.y,
+          rowHeight: config.rowHeight
+        });
+        tiles.forEach((tile, i) => {
+          const pos = result.positions[i];
+          tile.root.style.width = `${pos.width}px`;
+          tile.root.style.height = `${pos.height}px`;
+          tile.root.style.visibility = "visible";
+          tile.root.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+        });
+        container.style.height = `${result.containerHeight}px`;
+      }
+      function applyJustifiedGrouped(justifiedOptions, config, containerWidth) {
+        const fullWidths = /* @__PURE__ */ new Map();
+        const titleOnlyWidths = /* @__PURE__ */ new Map();
+        if (headingOverflow === "fit") {
+          for (const heading of headings) {
+            if (!heading.structured) continue;
+            const { subtitleEl } = heading.structured;
+            heading.root.style.maxWidth = "none";
+            heading.root.style.whiteSpace = "nowrap";
+            if (subtitleEl) subtitleEl.hidden = false;
+            fullWidths.set(heading.tileStart, heading.root.getBoundingClientRect().width);
+            if (subtitleEl) {
+              subtitleEl.hidden = true;
+              titleOnlyWidths.set(heading.tileStart, heading.root.getBoundingClientRect().width);
+              subtitleEl.hidden = false;
+            } else {
+              titleOnlyWidths.set(heading.tileStart, fullWidths.get(heading.tileStart));
+            }
+          }
+        }
+        function tileAspects(tileStart, tileEnd) {
+          return tiles.slice(tileStart, tileEnd).map((t) => aspectOf(gallery.items[t.index]));
+        }
+        function tryFit(startSection, endSection) {
+          const tileStart = headings[startSection].tileStart;
+          const tileEnd = endSection < headings.length ? headings[endSection].tileStart : tiles.length;
+          const result = layoutJustified(tileAspects(tileStart, tileEnd), justifiedOptions);
+          for (let k = startSection; k < endSection; k++) {
+            const heading = headings[k];
+            if (!heading.structured) continue;
+            const pos = result.positions[heading.tileStart - tileStart];
+            if (!pos) continue;
+            const next = k + 1 < endSection ? headings[k + 1] : void 0;
+            const nextPos = next ? result.positions[next.tileStart - tileStart] : null;
+            const sameRow = !!nextPos && Math.abs(nextPos.y - pos.y) < 0.5;
+            const available = (sameRow ? nextPos.x : containerWidth) - pos.x - config.gutter.x;
+            const bestWidth = Math.min(
+              fullWidths.get(heading.tileStart) ?? Infinity,
+              titleOnlyWidths.get(heading.tileStart) ?? Infinity
+            );
+            if (bestWidth > available) return null;
+          }
+          return result;
+        }
+        function computeSegments() {
+          if (headingOverflow !== "fit") {
+            return [
+              {
+                startSection: 0,
+                endSection: headings.length,
+                tileStart: 0,
+                tileEnd: tiles.length,
+                result: layoutJustified(tileAspects(0, tiles.length), justifiedOptions)
+              }
+            ];
+          }
+          const segments2 = [];
+          let segStart = 0;
+          while (segStart < headings.length) {
+            const base = tryFit(segStart, segStart + 1);
+            const tileStart = headings[segStart].tileStart;
+            if (base === null) {
+              const tileEnd2 = segStart + 1 < headings.length ? headings[segStart + 1].tileStart : tiles.length;
+              segments2.push({
+                startSection: segStart,
+                endSection: segStart + 1,
+                tileStart,
+                tileEnd: tileEnd2,
+                result: layoutJustified(tileAspects(tileStart, tileEnd2), justifiedOptions)
+              });
+              segStart += 1;
+              continue;
+            }
+            let end = segStart + 1;
+            let best = base;
+            while (end < headings.length) {
+              const trial = tryFit(segStart, end + 1);
+              if (trial === null) break;
+              end += 1;
+              best = trial;
+            }
+            const tileEnd = end < headings.length ? headings[end].tileStart : tiles.length;
+            segments2.push({
+              startSection: segStart,
+              endSection: end,
+              tileStart,
+              tileEnd,
+              result: best
+            });
+            segStart = end;
+          }
+          return segments2;
+        }
+        function applyContentDecisions(segment) {
+          for (let k = segment.startSection; k < segment.endSection; k++) {
+            const heading = headings[k];
+            if (!heading.structured) continue;
+            const pos = segment.result.positions[heading.tileStart - segment.tileStart];
+            if (!pos) continue;
+            const next = k + 1 < segment.endSection ? headings[k + 1] : void 0;
+            const nextPos = next ? segment.result.positions[next.tileStart - segment.tileStart] : null;
+            const sameRow = !!nextPos && Math.abs(nextPos.y - pos.y) < 0.5;
+            const available = (sameRow ? nextPos.x : containerWidth) - pos.x - config.gutter.x;
+            const { subtitleEl } = heading.structured;
+            heading.root.style.whiteSpace = "nowrap";
+            heading.root.style.maxWidth = "none";
+            heading.root.style.overflow = "";
+            heading.root.style.textOverflow = "";
+            if (subtitleEl) subtitleEl.hidden = false;
+            const full = fullWidths.get(heading.tileStart) ?? 0;
+            if (full <= available) continue;
+            if (subtitleEl) {
+              subtitleEl.hidden = true;
+              const titleOnly = titleOnlyWidths.get(heading.tileStart) ?? 0;
+              if (titleOnly <= available) continue;
+            }
+            heading.root.style.maxWidth = `${Math.max(0, available)}px`;
+            heading.root.style.overflow = "hidden";
+            heading.root.style.textOverflow = "ellipsis";
+          }
+        }
+        function applyWrapDecisions(segment) {
+          for (let k = segment.startSection; k < segment.endSection; k++) {
+            const heading = headings[k];
+            if (!heading.structured) continue;
+            const pos = segment.result.positions[heading.tileStart - segment.tileStart];
+            if (!pos) continue;
+            const next = k + 1 < segment.endSection ? headings[k + 1] : void 0;
+            const nextPos = next ? segment.result.positions[next.tileStart - segment.tileStart] : null;
+            const sameRow = !!nextPos && Math.abs(nextPos.y - pos.y) < 0.5;
+            const available = (sameRow ? nextPos.x : containerWidth) - pos.x - config.gutter.x;
+            heading.root.style.whiteSpace = "normal";
+            heading.root.style.maxWidth = `${Math.max(0, available)}px`;
+            const style = getComputedStyle(heading.root);
+            const parsedLineHeight = parseFloat(style.lineHeight);
+            const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : parseFloat(style.fontSize) * 1.2;
+            const maxLines = Math.max(1, Math.floor(config.maxRowHeight / lineHeight));
+            heading.root.style.display = "-webkit-box";
+            heading.root.style.overflow = "hidden";
+            heading.root.style.setProperty("-webkit-box-orient", "vertical");
+            heading.root.style.setProperty("-webkit-line-clamp", `${maxLines}`);
+          }
+        }
+        const segments = computeSegments();
+        let cumulativeExtra = 0;
+        let headingPtr = 0;
+        for (const segment of segments) {
+          if (headingOverflow === "fit") applyContentDecisions(segment);
+          else if (headingOverflow === "wrap") applyWrapDecisions(segment);
+          const headingHeights = /* @__PURE__ */ new Map();
+          for (let k = segment.startSection; k < segment.endSection; k++) {
+            const heading = headings[k];
+            headingHeights.set(heading.tileStart, heading.root.getBoundingClientRect().height);
+          }
+          for (const row of segment.result.rows) {
+            const globalStart = row.start + segment.tileStart;
+            const globalEnd = row.end + segment.tileStart;
+            let bandHeight = 0;
+            while (headingPtr < segment.endSection && headings[headingPtr].tileStart < globalEnd) {
+              const heading = headings[headingPtr];
+              const pos = segment.result.positions[heading.tileStart - segment.tileStart];
+              if (pos) {
+                heading.root.hidden = false;
+                heading.root.style.transform = `translate(${pos.x}px, ${row.y + cumulativeExtra}px)`;
+                bandHeight = Math.max(bandHeight, headingHeights.get(heading.tileStart) ?? 0);
+              }
+              headingPtr++;
+            }
+            if (bandHeight > 0) cumulativeExtra += bandHeight + config.gutter.y;
+            for (let i = globalStart; i < globalEnd; i++) {
+              const pos = segment.result.positions[i - segment.tileStart];
+              const tile = tiles[i];
+              tile.root.hidden = pos === null;
+              if (!pos) continue;
+              tile.root.style.width = `${pos.width}px`;
+              tile.root.style.height = `${pos.height}px`;
+              tile.root.style.visibility = "visible";
+              tile.root.style.transform = `translate(${pos.x}px, ${pos.y + cumulativeExtra}px)`;
+            }
+          }
+          const segLastCovered = segment.result.rows.length > 0 ? segment.result.rows[segment.result.rows.length - 1].end + segment.tileStart : segment.tileStart;
+          for (let i = segLastCovered; i < segment.tileEnd; i++) {
+            tiles[i].root.hidden = true;
+          }
+          cumulativeExtra += segment.result.containerHeight + config.gutter.y;
+        }
+        while (headingPtr < headings.length) {
+          headings[headingPtr].root.hidden = true;
+          headingPtr++;
+        }
+        container.style.height = `${Math.max(0, cumulativeExtra - config.gutter.y)}px`;
+      }
+      function applyJustified() {
+        const containerWidth = container.getBoundingClientRect().width;
+        if (containerWidth <= 0) return;
+        const config = resolveConfig(containerWidth);
+        const justifiedOptions = {
+          containerWidth,
+          gutterX: config.gutter.x,
+          gutterY: config.gutter.y,
+          rowHeight: config.rowHeight,
+          minRowHeight: config.minRowHeight,
+          maxRowHeight: config.maxRowHeight,
+          lastRow: config.lastRow
+        };
+        if (groupingEnabled && headings.length > 0) {
+          applyJustifiedGrouped(justifiedOptions, config, containerWidth);
+          return;
+        }
+        const justifiedTiles = tiles.map((t) => aspectOf(gallery.items[t.index]));
+        const result = layoutJustified(justifiedTiles, justifiedOptions);
+        tiles.forEach((tile, i) => {
+          const pos = result.positions[i];
+          tile.root.hidden = pos === null;
+          if (!pos) return;
+          tile.root.style.width = `${pos.width}px`;
+          tile.root.style.height = `${pos.height}px`;
+          tile.root.style.visibility = "visible";
+          tile.root.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+        });
+        container.style.height = `${result.containerHeight}px`;
+      }
+      function relayoutAll() {
+        if (horizontal) applyMasonryHorizontal();
+        else if (type === "masonry") applyMasonry(null);
+        else if (type === "justified") applyJustified();
+        else applyGrid(tiles);
+      }
+      let destroyed = false;
+      let measureFrame = null;
+      function scheduleMeasureRelayout() {
+        if (measureFrame !== null || destroyed) return;
+        measureFrame = requestAnimationFrame(() => {
+          measureFrame = null;
+          if (destroyed) return;
+          if (groupingEnabled) fullRender(gallery.items);
+          else relayoutAll();
+        });
+      }
+      function autoMeasureTiles(newTiles) {
+        if (!autoMeasureEnabled) return;
+        for (const tile of newTiles) {
+          const item = gallery.items[tile.index];
+          if (!item || item.width && item.height || !measurableSrc(item)) continue;
+          const onLoad = () => {
+            if (destroyed) return;
+            if (tile.img.naturalWidth > 0 && tile.img.naturalHeight > 0) {
+              item.width = tile.img.naturalWidth;
+              item.height = tile.img.naturalHeight;
+              scheduleMeasureRelayout();
+            }
+          };
+          if (tile.img.complete) onLoad();
+          else tile.img.addEventListener("load", onLoad, { once: true });
+        }
+      }
+      function emitLayoutRender(rendered) {
+        ctx.emit("layoutRender", {
+          tiles: rendered.map((tile) => ({ index: tile.index, element: tile.root }))
+        });
+      }
+      function fullRender(items) {
+        container.replaceChildren();
+        tiles = items.map((item, i) => createTile(item, i));
+        headings = [];
+        if (groupingEnabled) {
+          for (const section of computeSections(items)) {
+            const sectionItems = items.slice(section.startIndex, section.endIndex);
+            const { root: headingRoot, structured } = createHeadingRoot(section.key, sectionItems);
+            container.appendChild(headingRoot);
+            headings.push({ root: headingRoot, tileStart: section.startIndex, structured });
+            for (let i = section.startIndex; i < section.endIndex; i++) {
+              container.appendChild(tiles[i].root);
+            }
+          }
+        } else {
+          for (const tile of tiles) container.appendChild(tile.root);
+        }
+        columnHeights = void 0;
+        relayoutAll();
+        autoMeasureTiles(tiles);
+        emitLayoutRender(tiles);
+      }
+      function appendRender(newItems, startIndex) {
+        const newTiles = newItems.map((item, i) => createTile(item, startIndex + i));
+        for (const tile of newTiles) container.appendChild(tile.root);
+        tiles = [...tiles, ...newTiles];
+        if (horizontal)
+          applyMasonryHorizontal();
+        else if (type === "masonry") applyMasonry(newTiles);
+        else if (type === "justified")
+          applyJustified();
+        else applyGrid(newTiles);
+        autoMeasureTiles(newTiles);
+        emitLayoutRender(newTiles);
+      }
+      fullRender(gallery.items);
+      previousItems = gallery.items;
+      const offItemsUpdated = ctx.on("itemsUpdated", ({ items }) => {
+        if (groupingEnabled) {
+          fullRender(items);
+        } else if (isPureAppend(previousItems, items)) {
+          appendRender(items.slice(previousItems.length), previousItems.length);
+        } else {
+          fullRender(items);
+        }
+        previousItems = items;
+      });
+      let resizeFrame = null;
+      let resizeObserver;
+      if (type === "masonry" || type === "justified" || sortedBreakpoints.length > 0) {
+        resizeObserver = new ResizeObserver(() => {
+          if (resizeFrame !== null) return;
+          resizeFrame = requestAnimationFrame(() => {
+            resizeFrame = null;
+            relayoutAll();
+          });
+        });
+        resizeObserver.observe(container);
+      }
+      return () => {
+        destroyed = true;
+        if (measureFrame !== null) cancelAnimationFrame(measureFrame);
+        resizeObserver == null ? void 0 : resizeObserver.disconnect();
+        if (resizeFrame !== null) cancelAnimationFrame(resizeFrame);
+        offItemsUpdated();
+        container.classList.remove("shoji-layout", `shoji-layout--${type}`, "shoji-layout--animate");
+        container.style.removeProperty("height");
+        container.style.removeProperty("width");
+        container.replaceChildren();
+      };
+    }
+  };
+  function normalizeRotateFlip(state) {
+    const rotation = (state.rotation % 360 + 360) % 360;
+    if (state.flipH && state.flipV) {
+      return { flipH: false, flipV: false, rotation: (rotation + 180) % 360 };
+    }
+    return { flipH: state.flipH, flipV: state.flipV, rotation };
+  }
+  const ROTATE_LEFT_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 14 4 9l5-5"/><path d="M4 9h10a6 6 0 1 1 0 12H9"/></svg>';
+  const ROTATE_RIGHT_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 14 20 9l-5-5"/><path d="M20 9H10a6 6 0 1 0 0 12h5"/></svg>';
+  const FLIP_H_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="M12 3v18"/><path d="M17 7l3 5-3 5"/><path d="M7 7l-3 5 3 5"/></svg>';
+  const FLIP_V_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="M3 12h18"/><path d="M7 17l5 3 5-3"/><path d="M7 7l5-3 5 3"/></svg>';
+  const NEUTRAL = { flipH: false, flipV: false, rotation: 0 };
+  function transformFor(flipH, flipV, rotationDeg, fitScale) {
+    if (!flipH && !flipV && rotationDeg === 0 && fitScale === 1) return "none";
+    const scaleX = (flipH ? -1 : 1) * fitScale;
+    const scaleY = (flipV ? -1 : 1) * fitScale;
+    return `scaleX(${scaleX}) scaleY(${scaleY}) rotate(${rotationDeg}deg)`;
+  }
+  function fitScaleFor(mediaWidth, mediaHeight, rotationDeg, naturalWidth, naturalHeight) {
+    if (!mediaWidth || !mediaHeight || !naturalWidth || !naturalHeight) return 1;
+    if (rotationDeg / 90 % 2 === 0) return 1;
+    const scaleAt0 = Math.min(1, mediaWidth / naturalWidth, mediaHeight / naturalHeight);
+    const scaleAt90 = Math.min(1, mediaWidth / naturalHeight, mediaHeight / naturalWidth);
+    return scaleAt90 / scaleAt0;
+  }
+  const RotateFlip = {
+    name: "rotateFlip",
+    init(ctx) {
+      const { gallery } = ctx;
+      const locale = gallery.options.locale ?? {};
+      const rotateLeftLabel = locale.rotateLeft ?? "Rotate left";
+      const rotateRightLabel = locale.rotateRight ?? "Rotate right";
+      const flipHLabel = locale.flipHorizontal ?? "Flip horizontal";
+      const flipVLabel = locale.flipVertical ?? "Flip vertical";
+      let state = { ...NEUTRAL };
+      let visualRotation = 0;
+      let visualFlipH = false;
+      let visualFlipV = false;
+      function resolveNaturalSize(media) {
+        const item = gallery.items[gallery.currentIndex];
+        if ((item == null ? void 0 : item.width) && item.height) return { width: item.width, height: item.height };
+        const img = media.querySelector("img");
+        if ((img == null ? void 0 : img.naturalWidth) && img.naturalHeight) {
+          return { width: img.naturalWidth, height: img.naturalHeight };
+        }
+        return void 0;
+      }
+      function apply(animate) {
+        const media = gallery.getActiveMedia();
+        if (!media) return;
+        const natural = resolveNaturalSize(media);
+        const fitScale = fitScaleFor(
+          media.clientWidth,
+          media.clientHeight,
+          visualRotation,
+          natural == null ? void 0 : natural.width,
+          natural == null ? void 0 : natural.height
+        );
+        const transform = transformFor(visualFlipH, visualFlipV, visualRotation, fitScale);
+        if (!animate) {
+          media.style.transform = transform;
+          return;
+        }
+        media.style.transition = "transform var(--shoji-duration) var(--shoji-easing)";
+        media.style.transform = transform;
+        waitForTransitionEnd(media, () => {
+          media.style.transition = "";
+        });
+      }
+      function buildButton(icon, label) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "shoji-toolbar-button";
+        button.innerHTML = icon;
+        button.setAttribute("aria-label", label);
+        button.title = label;
+        return button;
+      }
+      const rotateLeftBtn = buildButton(ROTATE_LEFT_ICON, rotateLeftLabel);
+      const rotateRightBtn = buildButton(ROTATE_RIGHT_ICON, rotateRightLabel);
+      const flipHBtn = buildButton(FLIP_H_ICON, flipHLabel);
+      const flipVBtn = buildButton(FLIP_V_ICON, flipVLabel);
+      flipHBtn.setAttribute("aria-pressed", "false");
+      flipVBtn.setAttribute("aria-pressed", "false");
+      function update(patch, visualRotationDelta) {
+        state = normalizeRotateFlip({ ...state, ...patch });
+        if (visualRotationDelta !== void 0) visualRotation += visualRotationDelta;
+        apply(true);
+        flipHBtn.setAttribute("aria-pressed", String(state.flipH));
+        flipVBtn.setAttribute("aria-pressed", String(state.flipV));
+        ctx.emit("rotateFlipChange", { index: gallery.currentIndex, ...state });
+      }
+      function rotateDelta(clockwise) {
+        const flippedOnOneAxis = visualFlipH !== visualFlipV;
+        return clockwise !== flippedOnOneAxis ? 90 : -90;
+      }
+      rotateLeftBtn.addEventListener("click", () => {
+        const delta = rotateDelta(false);
+        update({ rotation: state.rotation + delta }, delta);
+      });
+      rotateRightBtn.addEventListener("click", () => {
+        const delta = rotateDelta(true);
+        update({ rotation: state.rotation + delta }, delta);
+      });
+      flipHBtn.addEventListener("click", () => {
+        visualFlipH = !visualFlipH;
+        update({ flipH: !state.flipH });
+      });
+      flipVBtn.addEventListener("click", () => {
+        visualFlipV = !visualFlipV;
+        update({ flipV: !state.flipV });
+      });
+      function reset() {
+        state = { ...NEUTRAL };
+        visualRotation = 0;
+        visualFlipH = false;
+        visualFlipV = false;
+        apply(false);
+        flipHBtn.setAttribute("aria-pressed", "false");
+        flipVBtn.setAttribute("aria-pressed", "false");
+      }
+      const removeButtons = [rotateLeftBtn, rotateRightBtn, flipHBtn, flipVBtn].map(
+        (button) => ctx.ui.toolbar("right", button)
+      );
+      const offOpen = ctx.on("afterOpen", reset);
+      const offSlide = ctx.on("afterSlide", reset);
+      return () => {
+        for (const remove of removeButtons) remove();
+        offOpen();
+        offSlide();
+      };
+    }
+  };
+  let apiPromise = null;
+  function loadYouTubeApi() {
+    var _a;
+    if ((_a = window.YT) == null ? void 0 : _a.Player) return Promise.resolve(window.YT);
+    if (apiPromise) return apiPromise;
+    apiPromise = new Promise((resolve) => {
+      const previous = window.onYouTubeIframeAPIReady;
+      window.onYouTubeIframeAPIReady = () => {
+        previous == null ? void 0 : previous();
+        resolve(window.YT);
+      };
+      const script = document.createElement("script");
+      script.src = "https://www.youtube.com/iframe_api";
+      document.head.appendChild(script);
+    });
+    return apiPromise;
+  }
+  function wirePlayableContract(container, player) {
+    const playable = container;
+    playable.paused = true;
+    playable.ended = false;
+    playable.play = () => player.playVideo();
+    playable.pause = () => player.pauseVideo();
+    Object.defineProperty(playable, "muted", {
+      configurable: true,
+      get: () => player.isMuted(),
+      set: (value) => value ? player.mute() : player.unMute()
+    });
+    return playable;
+  }
+  function handleStateChange(event, YT, playable) {
+    if (event.data === YT.PlayerState.PLAYING) {
+      playable.paused = false;
+      playable.dispatchEvent(new Event("play"));
+    } else if (event.data === YT.PlayerState.PAUSED) {
+      playable.paused = true;
+      playable.dispatchEvent(new Event("pause"));
+    } else if (event.data === YT.PlayerState.ENDED) {
+      playable.paused = true;
+      playable.ended = true;
+      playable.dispatchEvent(new Event("ended"));
+    }
+  }
+  const renderYouTube = (container, item, onReady, signal) => {
+    var _a;
+    if (((_a = item.video) == null ? void 0 : _a.provider) !== "youtube") return;
+    const videoId = item.video.id;
+    const mount = document.createElement("div");
+    container.appendChild(mount);
+    loadYouTubeApi().then((YT) => {
+      if (signal.aborted) return;
+      const playable = container;
+      const player = new YT.Player(mount, {
+        videoId,
+        playerVars: { playsinline: 1, rel: 0 },
+        events: {
+          // `new YT.Player()` returns before the embed's own internal bootstrap
+          // (its postMessage handshake with youtube.com) finishes — calling
+          // `player.mute()`/`playVideo()`/etc. before that completes can throw
+          // ("player.isMuted is not a function") or silently no-op, even though
+          // the constructor already returned an object. `onReady` is YouTube's
+          // own signal that the real API surface is actually callable now, so
+          // wiring the contract here — not synchronously after construction —
+          // is what makes `findPlayable()`'s "is `.play` wired?" check in
+          // Autoplay (DESIGN.md §4.1) an accurate proxy for "is it really
+          // ready?" instead of just "did we build the wrapper closures?".
+          onReady: () => {
+            wirePlayableContract(container, player);
+            onReady();
+          },
+          onStateChange: (event) => handleStateChange(event, YT, playable),
+          // bubbles: true — reaches .shoji-slide-media (the pool slot, always
+          // present regardless of readiness) without needing wirePlayableContract
+          // to have run first; onError can fire instead of onReady entirely
+          // (e.g. a removed/private video), so playable isn't a safe assumption
+          // here the way it is in onStateChange. Autoplay (DESIGN.md §4.1)
+          // listens for this to skip to the next slide instead of stalling.
+          onError: (event) => playable.dispatchEvent(
+            new CustomEvent("error", { bubbles: true, detail: { code: event.data } })
+          )
+        }
+      });
+      signal.addEventListener("abort", () => player.destroy(), { once: true });
+    });
+  };
+  const Video = {
+    name: "video",
+    init(ctx) {
+      return ctx.ui.registerVideoProvider("youtube", renderYouTube);
+    }
+  };
+  const ZOOM_IN_ICON = '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"/><path d="M21 21l-5.5-5.5M10 7v6M7 10h6"/></svg>';
+  const ZOOM_OUT_ICON = '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"/><path d="M21 21l-5.5-5.5M7 10h6"/></svg>';
+  const ZOOM_ACTUAL_SIZE_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="4" y="4" width="16" height="16" rx="1"/><path d="M9 15l6-6M9 9h0M15 15h0"/></svg>';
+  function clampScale(scale, min, max) {
+    return Math.min(max, Math.max(min, scale));
+  }
+  function clampAxis(naturalPos, naturalSize, scale, containerPos, containerSize, offset) {
+    const scaledSize = naturalSize * scale;
+    if (scaledSize <= containerSize) {
+      return containerPos + (containerSize - scaledSize) / 2 - naturalPos;
+    }
+    const minPos = containerPos + containerSize - scaledSize;
+    const maxPos = containerPos;
+    const proposedPos = naturalPos + offset;
+    return Math.min(maxPos, Math.max(minPos, proposedPos)) - naturalPos;
+  }
+  function clampPan(natural, container, scale, pan) {
+    return {
+      tx: clampAxis(natural.left, natural.width, scale, container.left, container.width, pan.tx),
+      ty: clampAxis(natural.top, natural.height, scale, container.top, container.height, pan.ty)
+    };
+  }
+  function zoomTowardPoint(natural, pan, oldScale, newScale, anchorX, anchorY) {
+    const currentLeft = natural.left + pan.tx;
+    const currentTop = natural.top + pan.ty;
+    const dx = anchorX - currentLeft;
+    const dy = anchorY - currentTop;
+    const factor = 1 - newScale / oldScale;
+    return {
+      tx: pan.tx + dx * factor,
+      ty: pan.ty + dy * factor
+    };
+  }
+  const ZOOM_EPSILON = 1.001;
+  function isRealControl(event) {
+    return event.composedPath().some(
+      (node) => node instanceof Element && node.matches("button, video, input, select, textarea, a[href], [data-shoji-no-drag]")
+    );
+  }
+  const Zoom = {
+    name: "zoom",
+    defaults: {
+      maxScale: 4,
+      doubleTapScale: 2,
+      buttonStep: 1.5
+    },
+    init(ctx) {
+      const { gallery } = ctx;
+      const maxScale = Number(ctx.options.maxScale ?? 4);
+      const doubleTapScale = Number(ctx.options.doubleTapScale ?? 2);
+      const buttonStep = Number(ctx.options.buttonStep ?? 1.5);
+      const locale = gallery.options.locale ?? {};
+      const zoomInLabel = locale.zoomIn ?? "Zoom in";
+      const zoomOutLabel = locale.zoomOut ?? "Zoom out";
+      const actualSizeLabel = locale.zoomActualSize ?? "Actual size";
+      let scale = 1;
+      let pan = { tx: 0, ty: 0 };
+      let natural = null;
+      let container = null;
+      let pinchStartScale = 1;
+      function getImg() {
+        const media = gallery.getActiveMedia();
+        const child = media == null ? void 0 : media.firstElementChild;
+        return child instanceof HTMLImageElement ? child : null;
+      }
+      function boxOf(el) {
+        const rect = el.getBoundingClientRect();
+        return { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
+      }
+      function ensureNatural(img) {
+        if (natural && container) return true;
+        if (scale !== 1) return false;
+        natural = boxOf(img);
+        container = boxOf(img.parentElement ?? img);
+        return true;
+      }
+      function whenSettled(action) {
+        const media = gallery.getActiveMedia();
+        if (!media || media.style.transition === "") {
+          action();
+          return;
+        }
+        waitForTransitionEnd(media, action);
+      }
+      function apply() {
+        const img = getImg();
+        if (!img) return;
+        img.style.transformOrigin = "0 0";
+        img.style.transform = scale === 1 && pan.tx === 0 && pan.ty === 0 ? "none" : `translate3d(${pan.tx}px, ${pan.ty}px, 0) scale3d(${scale}, ${scale}, 1)`;
+        img.classList.toggle("shoji-zoomed", scale > 1);
+      }
+      function emitChange() {
+        ctx.emit("zoomChange", { index: gallery.currentIndex, scale });
+      }
+      function withTransition(img, run, afterEnd) {
+        img.style.transition = "transform var(--shoji-duration) var(--shoji-easing)";
+        run();
+        waitForTransitionEnd(img, () => {
+          img.style.transition = "";
+          afterEnd == null ? void 0 : afterEnd();
+        });
+      }
+      function zoomTo(targetScale, anchorX, anchorY, ceiling = maxScale, animate = false) {
+        whenSettled(() => {
+          const img = getImg();
+          if (!img || !ensureNatural(img)) return;
+          const clampedScale = clampScale(targetScale, 1, Math.max(ceiling, 1));
+          pan = zoomTowardPoint(natural, pan, scale, clampedScale, anchorX, anchorY);
+          scale = clampedScale;
+          pan = clampPan(natural, container, scale, pan);
+          if (animate) withTransition(img, apply);
+          else apply();
+          emitChange();
+        });
+      }
+      function reset(animate = false) {
+        scale = 1;
+        pan = { tx: 0, ty: 0 };
+        natural = null;
+        container = null;
+        const img = getImg();
+        if (!img) return;
+        const clearTransform = () => {
+          img.style.transform = "";
+          img.classList.remove("shoji-zoomed");
+        };
+        if (animate) {
+          withTransition(img, clearTransform, () => {
+            img.style.transformOrigin = "";
+          });
+        } else {
+          clearTransform();
+          img.style.transformOrigin = "";
+        }
+      }
+      function markEnabled() {
+        var _a;
+        (_a = getImg()) == null ? void 0 : _a.classList.add("shoji-zoom-enabled");
+      }
+      function toggleZoom(x, y) {
+        if (scale > ZOOM_EPSILON) reset(true);
+        else zoomTo(doubleTapScale, x, y, maxScale, true);
+      }
+      const offPinchStart = ctx.on("pinchStart", () => {
+        pinchStartScale = scale;
+      });
+      const offPinchMove = ctx.on("pinchMove", ({ scale: relative, centerX, centerY }) => {
+        zoomTo(pinchStartScale * relative, centerX, centerY);
+      });
+      const offPinchEnd = ctx.on("pinchEnd", () => {
+        if (scale <= ZOOM_EPSILON) reset();
+      });
+      const offDoubleTap = ctx.on("doubleTap", ({ x, y }) => toggleZoom(x, y));
+      const offWheelZoom = ctx.on("wheelZoom", ({ deltaScale, x, y }) => {
+        zoomTo(scale + deltaScale, x, y);
+      });
+      let panPointerId = null;
+      let lastX = 0;
+      let lastY = 0;
+      const outer = ctx.ui.outer();
+      function onPointerDown(event) {
+        if (scale <= ZOOM_EPSILON || isRealControl(event)) return;
+        panPointerId = event.pointerId;
+        lastX = event.clientX;
+        lastY = event.clientY;
+      }
+      function onPointerMove(event) {
+        if (panPointerId !== event.pointerId || !natural || !container) return;
+        event.preventDefault();
+        const dx = event.clientX - lastX;
+        const dy = event.clientY - lastY;
+        lastX = event.clientX;
+        lastY = event.clientY;
+        pan = clampPan(natural, container, scale, { tx: pan.tx + dx, ty: pan.ty + dy });
+        apply();
+      }
+      function onPointerUp(event) {
+        if (panPointerId === event.pointerId) panPointerId = null;
+      }
+      outer.addEventListener("pointerdown", onPointerDown);
+      outer.addEventListener("pointermove", onPointerMove, { passive: false });
+      outer.addEventListener("pointerup", onPointerUp);
+      outer.addEventListener("pointercancel", onPointerUp);
+      function buildButton(icon, label) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "shoji-toolbar-button";
+        button.innerHTML = icon;
+        button.setAttribute("aria-label", label);
+        button.title = label;
+        return button;
+      }
+      function centerAnchor() {
+        const media = gallery.getActiveMedia();
+        const rect = media == null ? void 0 : media.getBoundingClientRect();
+        return rect ? { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 } : { x: 0, y: 0 };
+      }
+      function zoomInStep() {
+        const { x, y } = centerAnchor();
+        zoomTo(scale * buttonStep, x, y, maxScale, true);
+      }
+      function zoomOutStep() {
+        const { x, y } = centerAnchor();
+        if (scale / buttonStep <= ZOOM_EPSILON) reset(true);
+        else zoomTo(scale / buttonStep, x, y, maxScale, true);
+      }
+      const zoomInBtn = buildButton(ZOOM_IN_ICON, zoomInLabel);
+      const zoomOutBtn = buildButton(ZOOM_OUT_ICON, zoomOutLabel);
+      const actualSizeBtn = buildButton(ZOOM_ACTUAL_SIZE_ICON, actualSizeLabel);
+      zoomInBtn.addEventListener("click", zoomInStep);
+      zoomOutBtn.addEventListener("click", zoomOutStep);
+      actualSizeBtn.addEventListener("click", () => {
+        whenSettled(() => {
+          const img = getImg();
+          if (!img || !img.naturalWidth) return;
+          if (!ensureNatural(img)) return;
+          if (scale > ZOOM_EPSILON) {
+            reset(true);
+            return;
+          }
+          const targetScale = img.naturalWidth / natural.width;
+          const { x, y } = centerAnchor();
+          zoomTo(targetScale, x, y, targetScale, true);
+        });
+      });
+      const removeButtons = [zoomInBtn, zoomOutBtn, actualSizeBtn].map(
+        (button) => ctx.ui.toolbar("right", button)
+      );
+      const removeShortcuts = [
+        ctx.ui.registerShortcut("w", zoomInStep),
+        ctx.ui.registerShortcut("W", zoomInStep),
+        ctx.ui.registerShortcut("s", zoomOutStep),
+        ctx.ui.registerShortcut("S", zoomOutStep)
+      ];
+      const offOpen = ctx.on("afterOpen", () => {
+        reset();
+        markEnabled();
+      });
+      const offBeforeSlide = ctx.on("beforeSlide", () => reset());
+      const offSlide = ctx.on("afterSlide", () => {
+        reset();
+        markEnabled();
+      });
+      const offBeforeClose = ctx.on("beforeClose", () => reset());
+      const unregisterGate = gallery.registerZoomGate(() => scale > ZOOM_EPSILON);
+      markEnabled();
+      return () => {
+        var _a;
+        for (const remove of removeButtons) remove();
+        for (const remove of removeShortcuts) remove();
+        offOpen();
+        offBeforeSlide();
+        offSlide();
+        offBeforeClose();
+        offPinchStart();
+        offPinchMove();
+        offPinchEnd();
+        offDoubleTap();
+        offWheelZoom();
+        outer.removeEventListener("pointerdown", onPointerDown);
+        outer.removeEventListener("pointermove", onPointerMove);
+        outer.removeEventListener("pointerup", onPointerUp);
+        outer.removeEventListener("pointercancel", onPointerUp);
+        unregisterGate();
+        reset();
+        (_a = getImg()) == null ? void 0 : _a.classList.remove("shoji-zoom-enabled");
+      };
+    }
+  };
+  const version = "0.1.0-alpha.6";
+  const Shoji = Object.assign(Gallery, {
+    Autoplay,
+    Layout,
+    ActiveThumbnail,
+    Fullscreen,
+    RotateFlip,
+    Video,
+    Zoom,
+    /** `package.json`'s own version — the single source of truth, read via a named JSON import so a bundler can tree-shake away everything else in package.json (devDependencies, scripts, ...) rather than embedding the whole file. */
+    version
+  });
+  return Shoji;
+}));
+//# sourceMappingURL=shoji.js.map