@gallerist/renderer-dom 0.0.0-stage → 0.3.1

package/dist/index.cjs

@@ -0,0 +1,1965 @@
+'use strict';
+
+var core = require('@gallerist/core');
+var internal = require('@gallerist/core/internal');
+
+// src/adapters/image.ts
+var COLOR_RE = /^(#|rgb|hsl|[a-z]+$)/i;
+var CSS_URL_UNSAFE = /["\\\n\r]/;
+var BROKEN_ICON = '<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.4 10.4a2 2 0 1 1-2.8-2.8"/><path d="M21 15.5V5a2 2 0 0 0-2-2H8.5"/><path d="M3.6 3.6A2 2 0 0 0 3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 1.4-.6"/><path d="m5 21 7-7"/><path d="m2 2 20 20"/></svg>';
+function applyPlaceholder(el2, placeholder) {
+  if (placeholder.startsWith("data:") || placeholder.includes("/")) {
+    if (CSS_URL_UNSAFE.test(placeholder)) return;
+    el2.style.backgroundImage = `url("${placeholder}")`;
+    el2.style.backgroundSize = "cover";
+    el2.style.backgroundPosition = "center";
+  } else if (COLOR_RE.test(placeholder)) {
+    el2.style.backgroundColor = placeholder;
+  }
+}
+function imageAdapter() {
+  return { type: "image", mount: mountImage };
+}
+function mountImage(item, slot, ctx) {
+  const img = document.createElement("img");
+  img.setAttribute("decoding", "async");
+  img.setAttribute("fetchpriority", ctx.priority ?? "auto");
+  img.className = "gallerist-media gallerist-media-image";
+  if (item.alt !== void 0) img.alt = item.alt;
+  if (item.placeholder) applyPlaceholder(img, item.placeholder);
+  slot.appendChild(img);
+  let element = img;
+  let errorEl = null;
+  const showError = () => {
+    if (errorEl) return;
+    img.setAttribute("data-gallerist-error", "");
+    const card = document.createElement("div");
+    card.className = "gallerist-media-error";
+    card.setAttribute("role", "img");
+    if (item.alt) card.setAttribute("aria-label", item.alt);
+    const icon = document.createElement("div");
+    icon.className = "gallerist-media-error-icon";
+    icon.setAttribute("aria-hidden", "true");
+    icon.innerHTML = BROKEN_ICON;
+    card.appendChild(icon);
+    if (item.alt) {
+      const label = document.createElement("span");
+      label.className = "gallerist-media-error-label";
+      label.textContent = item.alt;
+      card.appendChild(label);
+    }
+    slot.appendChild(card);
+    errorEl = card;
+  };
+  const ready = new Promise((resolve, reject) => {
+    const abortErr = () => new DOMException("Image load aborted", "AbortError");
+    if (ctx.signal.aborted) {
+      reject(abortErr());
+      return;
+    }
+    const cleanup = () => {
+      img.removeEventListener("load", onLoad);
+      img.removeEventListener("error", onError);
+      ctx.signal.removeEventListener("abort", onAbort);
+    };
+    const onAbort = () => {
+      cleanup();
+      reject(abortErr());
+    };
+    const onLoad = async () => {
+      try {
+        if (typeof img.decode === "function") await img.decode();
+      } catch {
+      }
+      cleanup();
+      img.setAttribute("data-gallerist-loaded", "");
+      resolve();
+    };
+    const onError = () => {
+      cleanup();
+      showError();
+      reject(new Error(`image load error: ${item.id}`));
+    };
+    img.addEventListener("load", onLoad);
+    img.addEventListener("error", onError);
+    ctx.signal.addEventListener("abort", onAbort);
+    const src = item.source;
+    if (typeof src === "string") {
+      img.src = src;
+    } else if ("src" in src) {
+      img.src = src.src;
+      if (src.srcset) img.setAttribute("srcset", src.srcset);
+      if (src.sizes) img.setAttribute("sizes", src.sizes);
+    } else if ("loader" in src) {
+      src.loader(ctx.signal).then((res) => {
+        if (ctx.signal.aborted) return;
+        if (typeof res === "string") {
+          img.src = res;
+        } else {
+          cleanup();
+          img.remove();
+          slot.appendChild(res);
+          res.setAttribute("data-gallerist-loaded", "");
+          element = res;
+          resolve();
+        }
+      }).catch((err) => {
+        cleanup();
+        showError();
+        reject(err instanceof Error ? err : new Error(String(err)));
+      });
+    }
+  });
+  ready.catch(() => {
+  });
+  return {
+    get element() {
+      return element;
+    },
+    ready,
+    supportsZoom: true,
+    naturalSize() {
+      if (item.naturalSize) return item.naturalSize;
+      return img.naturalWidth ? { w: img.naturalWidth, h: img.naturalHeight } : null;
+    },
+    destroy() {
+      img.removeAttribute("src");
+      element.remove();
+      errorEl?.remove();
+    }
+  };
+}
+
+// src/appearance.ts
+function applyAppearance(root, appearance) {
+  if ("skin" in appearance) root.setAttribute("data-gallerist-skin", appearance.skin ?? "gallery");
+  if ("scheme" in appearance) {
+    if (appearance.scheme) root.setAttribute("data-gallerist-scheme", appearance.scheme);
+    else root.removeAttribute("data-gallerist-scheme");
+  }
+  if ("accent" in appearance) {
+    if (appearance.accent) root.setAttribute("data-gallerist-accent", appearance.accent);
+    else root.removeAttribute("data-gallerist-accent");
+  }
+}
+
+// src/transform.ts
+function zoomTransform(zoom) {
+  return `translate(${zoom.x}px, ${zoom.y}px) scale(${zoom.scale})`;
+}
+
+// src/gestures.ts
+var dist = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+var mid = (a, b) => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });
+function attachGestures(opts) {
+  const {
+    stage,
+    viewer,
+    getContent,
+    getGeometry,
+    threshold = 10,
+    commitNav = 60,
+    closeDismiss = 120,
+    maxScale = 4,
+    nav = {
+      next: () => viewer.next(),
+      prev: () => viewer.prev(),
+      nextItem: () => viewer.nextItem(),
+      prevItem: () => viewer.prevItem()
+    },
+    raf = (cb) => requestAnimationFrame(cb),
+    caf = (id) => cancelAnimationFrame(id)
+  } = opts;
+  const dismissEl = stage.closest(".gallerist") ?? stage;
+  const pointers = /* @__PURE__ */ new Map();
+  let start = null;
+  let startZoom = { scale: 1, x: 0, y: 0 };
+  let pinchStartDist = 0;
+  let intent = "none";
+  let live = { scale: 1, x: 0, y: 0 };
+  let frame = 0;
+  let gestureGeom = null;
+  const geom = () => gestureGeom ?? getGeometry();
+  const fitOf = (g) => g.naturalSize ? internal.fitScale({ w: g.stageRect.width, h: g.stageRect.height }, g.naturalSize) : 1;
+  const fit = () => fitOf(geom());
+  const toStage = (p) => {
+    const r = geom().stageRect;
+    return { x: p.x - r.left, y: p.y - r.top };
+  };
+  const settle = (z, g = geom()) => {
+    const scaled = { scale: internal.clampScale(z.scale, fitOf(g), maxScale), x: z.x, y: z.y };
+    const stageSize = { w: g.stageRect.width, h: g.stageRect.height };
+    if (g.mediaBox) return internal.clampPanToBox(scaled, stageSize, g.mediaBox);
+    return g.naturalSize ? internal.clampPan(scaled, stageSize, g.naturalSize) : scaled;
+  };
+  const internals = internal.getInternals(viewer);
+  const commit = (z) => {
+    internals.setZoom(z);
+    const content = getContent();
+    if (content) content.style.transform = zoomTransform(viewer.getState().zoom);
+  };
+  const schedule = () => {
+    if (frame) return;
+    frame = raf(() => {
+      frame = 0;
+      const content = getContent();
+      if (content) {
+        content.style.transform = zoomTransform(live);
+      }
+    });
+  };
+  const capture = (id) => {
+    try {
+      stage.setPointerCapture?.(id);
+    } catch {
+    }
+  };
+  const release = (id) => {
+    try {
+      stage.releasePointerCapture?.(id);
+    } catch {
+    }
+  };
+  const WHEEL_COMMIT_MS = 90;
+  let wheelGeom = null;
+  let wheelZoom = null;
+  let wheelTimer;
+  const commitWheel = () => {
+    wheelTimer = void 0;
+    wheelGeom = null;
+    if (wheelZoom) {
+      commit(wheelZoom);
+      wheelZoom = null;
+    }
+  };
+  const flushWheel = () => {
+    if (wheelTimer) {
+      clearTimeout(wheelTimer);
+      commitWheel();
+    }
+  };
+  const onDown = (e) => {
+    flushWheel();
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    startZoom = { ...viewer.getState().zoom };
+    live = { ...startZoom };
+    gestureGeom = getGeometry();
+    if (pointers.size === 1) {
+      start = { x: e.clientX, y: e.clientY };
+      intent = "none";
+    } else if (pointers.size === 2) {
+      const [a, b] = [...pointers.values()];
+      if (a && b) pinchStartDist = dist(a, b);
+      intent = "zoom";
+      for (const id of pointers.keys()) capture(id);
+    }
+  };
+  const resolveIntent = (dx, dy) => {
+    const g = geom();
+    return internal.arbitrate({
+      pointerCount: pointers.size === 0 ? 1 : pointers.size,
+      dx,
+      dy,
+      scale: startZoom.scale,
+      fitScale: g.naturalSize ? fit() : startZoom.scale,
+      grouped: currentGroupHasMultiple(viewer),
+      threshold
+    });
+  };
+  const onMove = (e) => {
+    if (!pointers.has(e.pointerId)) return;
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (intent === "zoom" && pointers.size >= 2) {
+      const [a, b] = [...pointers.values()];
+      if (!a || !b || pinchStartDist === 0) return;
+      const factor = dist(a, b) / pinchStartDist;
+      const newScale = internal.clampScale(startZoom.scale * factor, fit(), maxScale);
+      live = internal.focalZoom(startZoom, toStage(mid(a, b)), newScale);
+      schedule();
+      return;
+    }
+    if (!start) return;
+    const dx = e.clientX - start.x;
+    const dy = e.clientY - start.y;
+    if (intent === "none") {
+      intent = resolveIntent(dx, dy);
+      if (intent !== "none") capture(e.pointerId);
+    }
+    if (intent === "pan") {
+      live = { scale: startZoom.scale, x: startZoom.x + dx, y: startZoom.y + dy };
+      schedule();
+    } else if (intent === "close") {
+      const k = Math.max(0.5, 1 - Math.abs(dy) / 1e3);
+      live = { scale: startZoom.scale * k, x: startZoom.x + dx, y: startZoom.y + dy };
+      dismissEl.style.setProperty(
+        "--gallerist-dismiss",
+        String(Math.min(1, Math.abs(dy) / closeDismiss))
+      );
+      schedule();
+    }
+  };
+  const onUp = (e) => {
+    if (!pointers.has(e.pointerId)) return;
+    pointers.delete(e.pointerId);
+    release(e.pointerId);
+    if (frame) {
+      caf(frame);
+      frame = 0;
+    }
+    if (intent === "zoom" && pointers.size === 1) {
+      live = settle(live);
+      commit(live);
+      const [remaining] = [...pointers.values()];
+      startZoom = { ...live };
+      start = remaining ? { x: remaining.x, y: remaining.y } : null;
+      intent = "none";
+      return;
+    }
+    const dx = start ? e.clientX - start.x : 0;
+    const dy = start ? e.clientY - start.y : 0;
+    if (intent === "none") intent = resolveIntent(dx, dy);
+    switch (intent) {
+      case "pan":
+        commit(settle(live));
+        break;
+      case "zoom":
+        if (pointers.size === 0) commit(settle(live));
+        break;
+      case "navigate":
+        if (Math.abs(dx) >= commitNav) dx < 0 ? nav.next() : nav.prev();
+        break;
+      case "close":
+        dismissEl.style.removeProperty("--gallerist-dismiss");
+        if (Math.abs(dy) >= closeDismiss) viewer.close();
+        else commit(startZoom);
+        break;
+      case "secondary":
+        if (-dy >= commitNav) nav.nextItem();
+        break;
+    }
+    if (pointers.size === 0) {
+      start = null;
+      intent = "none";
+      gestureGeom = null;
+    }
+  };
+  const onCancel = (e) => {
+    if (!pointers.has(e.pointerId)) return;
+    for (const id of pointers.keys()) release(id);
+    pointers.clear();
+    if (frame) {
+      caf(frame);
+      frame = 0;
+    }
+    dismissEl.style.removeProperty("--gallerist-dismiss");
+    const content = getContent();
+    if (content) content.style.transform = zoomTransform(viewer.getState().zoom);
+    start = null;
+    intent = "none";
+    gestureGeom = null;
+  };
+  const onWheel = (e) => {
+    e.preventDefault();
+    if (!wheelGeom) wheelGeom = getGeometry();
+    const g = wheelGeom;
+    const base = wheelZoom ?? viewer.getState().zoom;
+    const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+    const newScale = internal.clampScale(base.scale * factor, fitOf(g), maxScale);
+    const focal = { x: e.clientX - g.stageRect.left, y: e.clientY - g.stageRect.top };
+    wheelZoom = settle(internal.focalZoom(base, focal, newScale), g);
+    live = { ...wheelZoom };
+    schedule();
+    if (wheelTimer) clearTimeout(wheelTimer);
+    wheelTimer = setTimeout(commitWheel, WHEEL_COMMIT_MS);
+  };
+  const onDblClick = (e) => {
+    const hit = e.target;
+    if (hit?.closest?.("button, a[href], input, select, textarea, [data-interactive]")) return;
+    flushWheel();
+    const z = viewer.getState().zoom;
+    const target = internal.toggleZoom(z.scale, fit(), maxScale);
+    commit(settle(internal.focalZoom(z, toStage({ x: e.clientX, y: e.clientY }), target)));
+  };
+  const onDragStart = (e) => {
+    const target = e.target;
+    const content = getContent();
+    if (!target || !content?.contains(target)) return;
+    if (target.closest?.(".gallerist-overlays-content")) return;
+    e.preventDefault();
+  };
+  stage.addEventListener("dragstart", onDragStart);
+  stage.addEventListener("pointerdown", onDown);
+  stage.addEventListener("pointermove", onMove);
+  stage.addEventListener("pointerup", onUp);
+  stage.addEventListener("pointercancel", onCancel);
+  stage.addEventListener("wheel", onWheel, { passive: false });
+  stage.addEventListener("dblclick", onDblClick);
+  return () => {
+    stage.removeEventListener("dragstart", onDragStart);
+    stage.removeEventListener("pointerdown", onDown);
+    stage.removeEventListener("pointermove", onMove);
+    stage.removeEventListener("pointerup", onUp);
+    stage.removeEventListener("pointercancel", onCancel);
+    stage.removeEventListener("wheel", onWheel);
+    stage.removeEventListener("dblclick", onDblClick);
+    if (frame) caf(frame);
+    flushWheel();
+  };
+}
+function currentGroupHasMultiple(viewer) {
+  const col = viewer.getCollection();
+  const g = viewer.getState().cursor.g;
+  return (col.groups[g]?.items.length ?? 0) > 1;
+}
+
+// src/idle.ts
+var ATTR = "data-gallerist-idle";
+var ACTIVITY = ["pointermove", "pointerdown", "keydown", "wheel", "touchstart"];
+var REARM_THROTTLE_MS = 200;
+function prefersReducedMotion(root) {
+  const win = root.ownerDocument?.defaultView;
+  return win?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+}
+function createIdleController(root, opts = {}) {
+  const delay = opts.delay ?? 2500;
+  const reduced = opts.reducedMotion ?? prefersReducedMotion(root);
+  if (reduced) {
+    return { poke() {
+    }, destroy() {
+    } };
+  }
+  let timer = null;
+  let alive = true;
+  let lastArm = 0;
+  let isIdle = false;
+  const wake = () => {
+    if (!isIdle) return;
+    isIdle = false;
+    root.removeAttribute(ATTR);
+  };
+  const goIdle = () => {
+    if (!alive || isIdle) return;
+    isIdle = true;
+    root.setAttribute(ATTR, "");
+  };
+  const arm = () => {
+    if (timer != null) clearTimeout(timer);
+    timer = setTimeout(goIdle, delay);
+    lastArm = Date.now();
+  };
+  const poke = () => {
+    wake();
+    arm();
+  };
+  const onActivity = () => {
+    wake();
+    if (Date.now() - lastArm >= REARM_THROTTLE_MS) arm();
+  };
+  for (const ev of ACTIVITY) root.addEventListener(ev, onActivity, { passive: true });
+  arm();
+  return {
+    poke,
+    destroy() {
+      alive = false;
+      if (timer != null) clearTimeout(timer);
+      for (const ev of ACTIVITY) root.removeEventListener(ev, onActivity);
+      root.removeAttribute(ATTR);
+    }
+  };
+}
+
+// src/overlays/position.ts
+function containRect(container, natural) {
+  const s = Math.min(container.w / natural.w, container.h / natural.h);
+  const w = natural.w * s;
+  const h = natural.h * s;
+  return { x: (container.w - w) / 2, y: (container.h - h) / 2, w, h };
+}
+function contentAnchorBox(anchor, stage, natural, rect = containRect(stage, natural)) {
+  const s = rect.w / natural.w;
+  const space = anchor.space ?? "normalized";
+  const mapX = (x) => space === "natural" ? rect.x + x * s : rect.x + x * rect.w;
+  const mapY = (y) => space === "natural" ? rect.y + y * s : rect.y + y * rect.h;
+  const mapW = (w) => space === "natural" ? w * s : w * rect.w;
+  const mapH = (h) => space === "natural" ? h * s : h * rect.h;
+  if (anchor.kind === "point") {
+    return { left: mapX(anchor.x), top: mapY(anchor.y), width: null, height: null };
+  }
+  return {
+    left: mapX(anchor.x),
+    top: mapY(anchor.y),
+    width: mapW(anchor.w),
+    height: mapH(anchor.h)
+  };
+}
+function resolveScaleWithImage(anchor, override) {
+  if (override !== void 0) return override;
+  return anchor.kind === "region";
+}
+function counterScaleTransform(zoomScale) {
+  return `translate(-50%, -50%) scale(${1 / zoomScale})`;
+}
+function viewportAnchorStyle(at, offset = [0, 0]) {
+  const [ox, oy] = offset;
+  const style = { position: "absolute" };
+  if (at.startsWith("top")) style.top = `${oy}px`;
+  else if (at.startsWith("bottom")) style.bottom = `${oy}px`;
+  else style.top = "50%";
+  if (at.endsWith("left")) style.left = `${ox}px`;
+  else if (at.endsWith("right")) style.right = `${ox}px`;
+  else style.left = "50%";
+  const tx = at === "top" || at === "bottom" || at === "center" ? "-50%" : "0";
+  const ty = at === "left" || at === "right" || at === "center" ? "-50%" : "0";
+  if (tx !== "0" || ty !== "0") style.transform = `translate(${tx}, ${ty})`;
+  return style;
+}
+function orderByLayer(specs) {
+  return [...specs].sort((a, b) => (a.layer ?? 0) - (b.layer ?? 0));
+}
+var FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function gatherOverlays(group, item, globals) {
+  return [...globals, ...group.overlays ?? [], ...item.overlays ?? []];
+}
+function updateOverlays(entries, zoomScale) {
+  for (const { el: el2, spec, counterScaled } of entries) {
+    const visible = !spec.visibleAt || zoomScale >= spec.visibleAt[0] && zoomScale <= spec.visibleAt[1];
+    el2.style.display = visible ? "" : "none";
+    if (counterScaled) el2.style.transform = counterScaleTransform(zoomScale);
+  }
+}
+function paintOverlays(viewportHost, contentHost, specs, ctx) {
+  const active = document.activeElement;
+  const focusedId = active && (viewportHost.contains(active) || contentHost.contains(active)) ? active.closest("[data-overlay]")?.dataset.overlay : void 0;
+  viewportHost.replaceChildren();
+  contentHost.replaceChildren();
+  const entries = [];
+  for (const spec of orderByLayer(specs)) {
+    const host = document.createElement("div");
+    host.className = spec.class ? `gallerist-overlay ${spec.class}` : "gallerist-overlay";
+    host.dataset.overlay = spec.id;
+    host.style.position = "absolute";
+    if (spec.layer !== void 0) host.style.zIndex = String(spec.layer);
+    host.style.pointerEvents = spec.interactive ? "auto" : "none";
+    const visible = !spec.visibleAt || ctx.zoom.scale >= spec.visibleAt[0] && ctx.zoom.scale <= spec.visibleAt[1];
+    if (!visible) host.style.display = "none";
+    if (spec.interactive) {
+      host.dataset.interactive = "";
+      host.addEventListener(
+        "click",
+        () => internal.getInternals(ctx.viewer).emit("overlayClick", {
+          viewer: ctx.viewer,
+          cursor: ctx.viewer.getState().cursor,
+          group: ctx.group,
+          item: ctx.item,
+          id: spec.id
+        })
+      );
+    } else {
+      host.setAttribute("aria-hidden", "true");
+    }
+    const out = spec.render({
+      group: ctx.group,
+      item: ctx.item,
+      zoom: ctx.zoom,
+      viewer: ctx.viewer
+    });
+    if (typeof out === "string") host.textContent = out;
+    else host.appendChild(out);
+    if (spec.interactive && !host.querySelector(FOCUSABLE)) host.tabIndex = 0;
+    let counterScaled = false;
+    if (spec.anchor.kind === "viewport") {
+      Object.assign(host.style, viewportAnchorStyle(spec.anchor.at, spec.anchor.offset));
+      viewportHost.appendChild(host);
+    } else {
+      const box = contentAnchorBox(spec.anchor, ctx.stage, ctx.natural, ctx.box);
+      host.style.left = `${box.left}px`;
+      host.style.top = `${box.top}px`;
+      if (box.width !== null) host.style.width = `${box.width}px`;
+      if (box.height !== null) host.style.height = `${box.height}px`;
+      counterScaled = !resolveScaleWithImage(spec.anchor, spec.scaleWithImage);
+      if (counterScaled) host.style.transform = counterScaleTransform(ctx.zoom.scale);
+      contentHost.appendChild(host);
+    }
+    entries.push({ el: host, spec, counterScaled });
+  }
+  if (focusedId) {
+    const host = entries.find((e) => e.spec.id === focusedId)?.el;
+    const target = host?.querySelector(FOCUSABLE) ?? (host?.tabIndex === 0 ? host : null);
+    target?.focus({ preventScroll: true });
+  }
+  return entries;
+}
+
+// src/presets.ts
+var PRESETS = {
+  // classic lightbox: bottom rail, side arrows, persistent chrome.
+  filmstrip: {
+    rootAttrs: { "data-gallerist-preset": "filmstrip" },
+    arrows: "pill-right",
+    autoHide: false,
+    rail: "bottom",
+    thumbnails: { itemAxis: "vertical" },
+    navigator: false
+  },
+  // full-bleed: rail hidden by default, chrome auto-hides on idle, minimal UI.
+  immersive: {
+    rootAttrs: { "data-gallerist-preset": "immersive" },
+    arrows: "pill-right",
+    autoHide: true,
+    rail: "hidden",
+    thumbnails: { itemAxis: "vertical" },
+    navigator: false
+  },
+  // time-series reviewer: a bottom timeline rail (a time over each group, from group.meta.time),
+  // numbered items, the zoom navigator, and no control over the media (review needs every pixel):
+  // docked arrows, the item navigator on the item column or the caption row.
+  reviewer: {
+    rootAttrs: { "data-gallerist-preset": "reviewer" },
+    arrows: "docked",
+    autoHide: false,
+    rail: "bottom",
+    thumbnails: { itemAxis: "vertical", timeline: true, numberItems: true },
+    navigator: true
+  },
+  // a gallery wall: the work framed with room around it, a placard beside it (caption + item
+  // navigator), numbered items inline in a bottom rail. Pairs with `skin: 'editorial'`.
+  editorial: {
+    rootAttrs: { "data-gallerist-preset": "editorial" },
+    arrows: "pill-right",
+    autoHide: false,
+    rail: "bottom",
+    thumbnails: { itemAxis: "horizontal", numberItems: true },
+    frame: true,
+    itemIndicator: "placard"
+  },
+  // a walkthrough of named sections: a section index down the side (names, counts, the active section
+  // expanded), ←/→ between sections on labelled arrows, ↑/↓ within one, and framed media so nothing
+  // covers the photo. Pairs with `grid({ layout: 'sections', startOpen: true })`.
+  tour: {
+    rootAttrs: { "data-gallerist-preset": "tour" },
+    arrows: "pill-right",
+    autoHide: false,
+    rail: "left",
+    thumbnails: { itemAxis: "horizontal", groupDisplay: "index", numberItems: true },
+    frame: true,
+    itemIndicator: "dots",
+    groupAxis: "horizontal",
+    arrowLabels: true
+  },
+  // browse-heavy: a vertical rail down the right edge (pairs well with the grid plugin).
+  contact: {
+    rootAttrs: { "data-gallerist-preset": "contact" },
+    arrows: "pill-right",
+    autoHide: false,
+    rail: "right",
+    thumbnails: { itemAxis: "vertical" },
+    navigator: false
+  }
+};
+for (const p of Object.values(PRESETS))
+  for (const o of [p.rootAttrs, p.thumbnails, p]) Object.freeze(o);
+function resolvePreset(name) {
+  const preset = PRESETS[name];
+  if (!preset && typeof console !== "undefined") {
+    console.warn(`[gallerist] unknown preset "${name}" \u2014 falling back to "filmstrip"`);
+  }
+  return preset ?? PRESETS.filmstrip;
+}
+
+// src/regions.ts
+var ADDITIVE = /* @__PURE__ */ new Set(["toolbar", "footer", "aside"]);
+function createRegionMounter(hosts, ctx) {
+  const rendered = /* @__PURE__ */ new WeakMap();
+  const applied = /* @__PURE__ */ new Map();
+  return (plugins) => {
+    const desired = /* @__PURE__ */ new Map();
+    for (const host of Object.values(hosts)) desired.set(host, []);
+    const claimedBy = /* @__PURE__ */ new Map();
+    for (const plugin of plugins) {
+      if (!plugin.regions) continue;
+      let nodes = rendered.get(plugin);
+      if (!nodes) {
+        nodes = /* @__PURE__ */ new Map();
+        rendered.set(plugin, nodes);
+      }
+      for (const [name, render] of Object.entries(plugin.regions)) {
+        if (!render) continue;
+        const host = hosts[name];
+        if (!host) {
+          console.warn(
+            `[gallerist] plugin "${plugin.name}" targets region "${name}", which the default renderer does not host`
+          );
+          continue;
+        }
+        let node = nodes.get(name);
+        if (!node) {
+          node = render(ctx);
+          nodes.set(name, node);
+        }
+        const list = desired.get(host) ?? [];
+        if (!ADDITIVE.has(name) && claimedBy.has(name)) {
+          console.warn(
+            `[gallerist] region "${name}" claimed by multiple plugins; "${plugin.name}" wins over "${claimedBy.get(name)}"`
+          );
+          list.length = 0;
+        }
+        list.push(node);
+        desired.set(host, list);
+        if (!ADDITIVE.has(name)) claimedBy.set(name, plugin.name);
+      }
+    }
+    for (const [host, list] of desired) {
+      const prev = applied.get(host) ?? [];
+      if (prev.length === list.length && prev.every((n, i) => n === list[i])) continue;
+      reconcile(host, prev, list);
+      applied.set(host, list);
+    }
+  };
+}
+function reconcile(host, prev, next) {
+  const keep = new Set(next);
+  for (const node of prev) if (!keep.has(node) && node.parentNode === host) host.removeChild(node);
+  let before = null;
+  for (const node of next) {
+    if (before) {
+      if (before.nextSibling !== node) host.insertBefore(node, before.nextSibling);
+    } else if (node.parentNode !== host) {
+      host.appendChild(node);
+    }
+    before = node;
+  }
+}
+function aggregateKeymap(plugins) {
+  const map = {};
+  for (const plugin of plugins) {
+    if (plugin.keymap) Object.assign(map, plugin.keymap);
+  }
+  return map;
+}
+
+// src/strings.ts
+var DEFAULT_STRINGS = {
+  dialog: "Media viewer",
+  carousel: "carousel",
+  close: "Close",
+  previous: "Previous",
+  next: "Next",
+  previousItem: "Previous item",
+  nextItem: "Next item",
+  previousTo: (name) => `Previous: ${name}`,
+  nextTo: (name) => `Next: ${name}`,
+  resetZoom: "Reset zoom",
+  showThumbnails: "Show thumbnails",
+  hideThumbnails: "Hide thumbnails",
+  caption: "Caption",
+  item: (n) => `Item ${n}`,
+  groupOf: (n, total) => `Group ${n} of ${total}`,
+  itemOf: (n, total) => `Item ${n} of ${total}`
+};
+
+// src/mount.ts
+var sourceUrl = (source) => typeof source === "string" ? source : source && "src" in source ? source.src : null;
+var str = (x) => typeof x === "string" ? x : "";
+var mounts = 0;
+function el(tag, className, attrs) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (attrs) for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, v);
+  return node;
+}
+var FOCUSABLE_SELECTOR = 'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,[tabindex],[contenteditable="true"]';
+function focusableWithin(root) {
+  return [...root.querySelectorAll(FOCUSABLE_SELECTOR)].filter(
+    // a hidden control can't take focus: counted as the last one, it would let Tab out of the trap
+    (node) => node.tabIndex !== -1 && !node.hasAttribute("disabled") && node.checkVisibility?.() !== false
+  );
+}
+function isEditableTarget(target) {
+  const node = target;
+  return !!node && (node.isContentEditable || /^(input|textarea|select)$/i.test(node.tagName ?? ""));
+}
+function animationMs(style) {
+  const ms = (v) => {
+    const n = Number.parseFloat(v);
+    if (!Number.isFinite(n)) return 0;
+    return v.trim().endsWith("ms") ? n : n * 1e3;
+  };
+  const count = (v) => {
+    const n = Number.parseFloat(v ?? "1");
+    return Number.isFinite(n) && n > 0 ? n : 1;
+  };
+  const at = (list, i) => list[i % list.length];
+  const durations = style.animationDuration.split(",");
+  const delays = style.animationDelay.split(",");
+  const iterations = (style.animationIterationCount || "1").split(",");
+  return Math.max(
+    0,
+    ...durations.map((d, i) => ms(at(delays, i) ?? "0s") + ms(d) * count(at(iterations, i)))
+  );
+}
+var MAX_ZOOM = 4;
+function applyTransform(content, zoom) {
+  content.style.transform = zoomTransform(zoom);
+}
+var savedBodyOverflow = "";
+var anyOverlayMounted = () => !!document.querySelector('.gallerist[data-gallerist-mode="overlay"]');
+function lockBodyScroll() {
+  if (!anyOverlayMounted()) savedBodyOverflow = document.body.style.overflow;
+  document.body.style.overflow = "hidden";
+}
+function unlockBodyScroll() {
+  if (!anyOverlayMounted()) document.body.style.overflow = savedBodyOverflow;
+}
+var inertedByGallerist = /* @__PURE__ */ new Set();
+function inertBackground(root) {
+  for (const child of [...document.body.children]) {
+    if (child !== root && child instanceof HTMLElement && !child.hasAttribute("inert")) {
+      child.setAttribute("inert", "");
+      inertedByGallerist.add(child);
+    }
+  }
+}
+function releaseBackgroundInert() {
+  if (anyOverlayMounted()) return;
+  for (const el2 of inertedByGallerist) el2.removeAttribute("inert");
+  inertedByGallerist.clear();
+}
+function mount(viewer, opts = {}) {
+  const overlay = !opts.container;
+  const container = opts.container ?? null;
+  const controls = opts.controls ?? true;
+  const preload = opts.preload ?? { ahead: 2, behind: 1 };
+  const preset = opts.preset ? resolvePreset(opts.preset) : void 0;
+  const arrows = opts.arrows ?? preset?.arrows ?? "pill-right";
+  const autoHide = opts.autoHide ?? preset?.autoHide ?? true;
+  const showNavigator = opts.navigator ?? preset?.navigator ?? false;
+  const frame = opts.frame ?? preset?.frame ?? false;
+  const rail = opts.rail ?? preset?.rail ?? "bottom";
+  const railHidden = rail === "hidden";
+  const railPos = rail === "hidden" ? "bottom" : rail;
+  const orientation = rail === "left" || rail === "right" ? "vertical" : "horizontal";
+  const groupAxis = opts.groupAxis ?? preset?.groupAxis ?? orientation;
+  const vertical = groupAxis === "vertical";
+  let linear = false;
+  const arrowLabelsOpt = opts.arrowLabels ?? preset?.arrowLabels ?? false;
+  const arrowLabel = !arrowLabelsOpt || !controls || vertical || arrows !== "pill-right" ? null : arrowLabelsOpt === true ? (group) => str(group.caption) : arrowLabelsOpt;
+  const loop = opts.loop ?? viewer.loop;
+  const ui = { ...DEFAULT_STRINGS, ...opts.strings };
+  const itemIndicator = opts.itemIndicator ?? preset?.itemIndicator ?? "pills";
+  const placard = itemIndicator === "placard";
+  const internals = internal.getInternals(viewer);
+  const plugins = internals.getPlugins();
+  const baseAdapters = opts.adapters ?? [imageAdapter()];
+  const currentAdapters = () => [
+    ...baseAdapters,
+    ...internals.getPlugins().flatMap((p) => p.mediaAdapters ?? [])
+  ];
+  const currentGlobalOverlays = (group, item) => [
+    ...opts.overlays ?? [],
+    ...internals.getPlugins().flatMap(
+      (p) => typeof p.overlays === "function" ? p.overlays({ group, item }) : p.overlays ?? []
+    )
+  ];
+  let pluginKeymap = aggregateKeymap(plugins);
+  const pickAdapter = (type, item) => currentAdapters().find((a) => a.match ? a.match(item) : a.type === type);
+  let flatSeq = [];
+  let flatIdx = /* @__PURE__ */ new Map();
+  let flatCol = null;
+  const ensureFlat = () => {
+    const col = viewer.getCollection();
+    if (col === flatCol) return;
+    flatCol = col;
+    flatSeq = [];
+    flatIdx = /* @__PURE__ */ new Map();
+    col.groups.forEach(
+      (grp, g) => grp.items.forEach((_, i) => {
+        flatIdx.set(`${g}:${i}`, flatSeq.length);
+        flatSeq.push({ g, i });
+      })
+    );
+  };
+  const flatPosition = (g, i) => {
+    ensureFlat();
+    return flatIdx.get(`${g}:${i}`) ?? 0;
+  };
+  const linearStep = (dir) => {
+    ensureFlat();
+    if (flatSeq.length === 0) return;
+    const { g, i } = viewer.getState().cursor;
+    let n = (flatIdx.get(`${g}:${i}`) ?? 0) + dir;
+    if (n >= flatSeq.length) n = loop ? 0 : flatSeq.length - 1;
+    if (n < 0) n = loop ? flatSeq.length - 1 : 0;
+    const t = flatSeq[n];
+    if (t) viewer.goTo(t.g, t.i);
+  };
+  const nav = {
+    next: () => linear ? linearStep(1) : viewer.next(),
+    prev: () => linear ? linearStep(-1) : viewer.prev(),
+    nextItem: () => {
+      if (!linear) viewer.nextItem();
+    },
+    prevItem: () => {
+      if (!linear) viewer.prevItem();
+    }
+  };
+  const root = el("div", "gallerist");
+  root.setAttribute("data-gallerist-mode", overlay ? "overlay" : "inline");
+  root.setAttribute("data-gallerist-arrows", arrows);
+  root.setAttribute("data-gallerist-rail-pos", railPos);
+  root.setAttribute("data-gallerist-orientation", orientation);
+  root.setAttribute("data-gallerist-axis", groupAxis);
+  root.setAttribute("data-gallerist-rail", railHidden ? "collapsed" : "expanded");
+  if (frame) root.setAttribute("data-gallerist-frame", "");
+  if (placard) root.setAttribute("data-gallerist-indicator", "placard");
+  applyAppearance(root, { skin: opts.skin, accent: opts.accent, scheme: opts.scheme });
+  if (preset) for (const [k, val] of Object.entries(preset.rootAttrs)) root.setAttribute(k, val);
+  if (overlay) {
+    root.setAttribute("role", "dialog");
+    root.setAttribute("aria-modal", "true");
+    root.setAttribute("aria-label", opts.label ?? ui.dialog);
+    root.tabIndex = -1;
+  } else {
+    root.setAttribute("role", "group");
+    root.setAttribute("aria-roledescription", ui.carousel);
+    root.tabIndex = -1;
+  }
+  if (overlay) root.appendChild(el("div", "gallerist-backdrop"));
+  const bar = el("div", "gallerist-bar");
+  const main = el("div", "gallerist-main");
+  const stage = el("div", "gallerist-stage");
+  const track = el("div", "gallerist-track");
+  const viewportLayer = el("div", "gallerist-viewport-layer");
+  const stageRegion = el("div", "gallerist-region gallerist-region-stage");
+  stage.append(track, viewportLayer, stageRegion);
+  main.appendChild(stage);
+  const regionHosts = {
+    backdrop: el("div", "gallerist-region gallerist-region-backdrop"),
+    stage: stageRegion,
+    toolbar: el("div", "gallerist-region gallerist-region-toolbar"),
+    aside: el("div", "gallerist-region gallerist-region-aside"),
+    thumbnails: el("div", "gallerist-region gallerist-region-thumbnails"),
+    footer: el("div", "gallerist-region gallerist-region-footer"),
+    caption: el("div", "gallerist-region gallerist-region-caption")
+  };
+  const caption = el("div", "gallerist-caption");
+  const cid = `gallerist-caption-${++mounts}`;
+  const captionText = el("span", "gallerist-caption-text", { id: cid });
+  regionHosts.caption.id = `${cid}r`;
+  const capLabel = el("span", "", { id: `${cid}l`, hidden: "" });
+  capLabel.textContent = ui.caption;
+  const capScroll = placard ? regionHosts.caption : caption;
+  const fitCaption = () => {
+    const on = regionHosts.caption.hasChildNodes() && capScroll.scrollHeight > capScroll.clientHeight + 1;
+    if (!on && document.activeElement === capScroll) root.focus({ preventScroll: true });
+    const set = on ? "setAttribute" : "removeAttribute";
+    capScroll[set]("tabindex", "0");
+    capScroll[set]("role", "region");
+    capScroll[set]("aria-labelledby", capLabel.id);
+  };
+  const capObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(fitCaption) : null;
+  caption.append(captionText, regionHosts.caption);
+  caption.hidden = true;
+  let anyCaption = false;
+  const syncCaption = () => {
+    const own = regionHosts.caption.hasChildNodes();
+    const { g, i } = viewer.getState().cursor;
+    captionText.textContent = own ? "" : str(viewer.getCollection().groups[g]?.items[i]?.caption);
+    const hide = !(own || controls && (anyCaption || placard));
+    caption.hidden = hide;
+    caption.toggleAttribute("data-gallerist-custom", own);
+    root[hide ? "removeAttribute" : "setAttribute"]("aria-describedby", `${cid} ${cid}r`);
+    for (const n of [capScroll, ...capScroll.children]) capObserver?.observe(n);
+    if (!own) fitCaption();
+  };
+  root.append(
+    regionHosts.backdrop,
+    bar,
+    main,
+    regionHosts.aside,
+    caption,
+    regionHosts.footer,
+    regionHosts.thumbnails,
+    capLabel
+  );
+  const live = el("div", "gallerist-live", { "aria-live": "polite", role: "status" });
+  root.appendChild(live);
+  let railCollapsed = railHidden;
+  let preFsCollapsed = null;
+  const railHandle = el("div", "gallerist-rail-handle");
+  const railToggle = el("button", "gallerist-rail-toggle", {
+    type: "button",
+    "aria-label": railHidden ? ui.showThumbnails : ui.hideThumbnails,
+    "aria-pressed": String(railHidden)
+  });
+  railToggle.innerHTML = internal.ICONS.collapse;
+  railHandle.appendChild(railToggle);
+  const setRailCollapsed = (v, manual = false) => {
+    railCollapsed = v;
+    root.setAttribute("data-gallerist-rail", v ? "collapsed" : "expanded");
+    railToggle.setAttribute("aria-pressed", String(v));
+    railToggle.setAttribute("aria-label", v ? ui.showThumbnails : ui.hideThumbnails);
+    if (manual) preFsCollapsed = null;
+  };
+  railToggle.addEventListener("click", () => setRailCollapsed(!railCollapsed, true));
+  let counter;
+  let title;
+  let position;
+  let itemNav;
+  let controlsBox;
+  let reset;
+  let navigatorEl;
+  let navigatorView;
+  let prevArrow;
+  let nextArrow;
+  let posG = -1;
+  let posM = -1;
+  if (controls) {
+    counter = el("div", "gallerist-counter");
+    title = el("div", "gallerist-title");
+    title.hidden = true;
+    reset = el("button", "gallerist-zoom-reset", { type: "button", "aria-label": ui.resetZoom });
+    reset.innerHTML = internal.ICONS.zoomReset;
+    reset.hidden = true;
+    reset.addEventListener("click", () => viewer.resetZoom());
+    const close = el("button", "gallerist-close", { type: "button", "aria-label": ui.close });
+    close.innerHTML = internal.ICONS.close;
+    close.addEventListener("click", () => viewer.close());
+    bar.append(counter, title, regionHosts.toolbar, reset, close);
+    const prev = el("button", "gallerist-prev", { type: "button", "aria-label": ui.previous });
+    prev.innerHTML = vertical ? internal.ICONS.itemPrev : internal.ICONS.prev;
+    prev.addEventListener("click", () => nav.prev());
+    const next = el("button", "gallerist-next", { type: "button", "aria-label": ui.next });
+    next.innerHTML = vertical ? internal.ICONS.itemNext : internal.ICONS.next;
+    next.addEventListener("click", () => nav.next());
+    prevArrow = prev;
+    nextArrow = next;
+    const prevItem = el("button", "gallerist-item-prev", {
+      type: "button",
+      "aria-label": ui.previousItem
+    });
+    prevItem.innerHTML = vertical ? internal.ICONS.prev : internal.ICONS.itemPrev;
+    prevItem.addEventListener("click", () => nav.prevItem());
+    const nextItem = el("button", "gallerist-item-next", {
+      type: "button",
+      "aria-label": ui.nextItem
+    });
+    nextItem.innerHTML = vertical ? internal.ICONS.next : internal.ICONS.itemNext;
+    nextItem.addEventListener("click", () => nav.nextItem());
+    position = el("div", "gallerist-position");
+    itemNav = el("div", "gallerist-itemnav");
+    itemNav.hidden = true;
+    itemNav.append(prevItem, position, nextItem);
+    controlsBox = el("div", "gallerist-controls");
+    controlsBox.append(prev, next);
+    if (placard) caption.appendChild(itemNav);
+    else if (arrows === "docked") main.after(caption, itemNav);
+    else controlsBox.appendChild(itemNav);
+    if (showNavigator) {
+      navigatorEl = el("div", "gallerist-navigator", { "aria-hidden": "true" });
+      navigatorEl.hidden = true;
+      navigatorView = el("div", "gallerist-navigator-view");
+      navigatorEl.appendChild(navigatorView);
+      navigatorEl.addEventListener("pointerdown", onNavigatorDown);
+      controlsBox.appendChild(navigatorEl);
+    }
+    main.appendChild(controlsBox);
+  } else {
+    bar.appendChild(regionHosts.toolbar);
+  }
+  const mounted = /* @__PURE__ */ new Map();
+  let lastCursor = null;
+  let lastWindowCol = null;
+  let lastWindowG = -1;
+  let lastWindowI = -1;
+  let indexCol = null;
+  let idIndex = /* @__PURE__ */ new Map();
+  const groupIndex = (id) => {
+    const col = viewer.getCollection();
+    if (col !== indexCol) {
+      indexCol = col;
+      idIndex = new Map(col.groups.map((g, i) => [g.id, i]));
+    }
+    return idIndex.get(id) ?? -1;
+  };
+  const tagAxis = (currentSlide, cur) => {
+    if (lastCursor && (lastCursor.g !== cur.g || lastCursor.i !== cur.i)) {
+      const axis = lastCursor.g !== cur.g ? "group" : "item";
+      currentSlide.removeAttribute("data-gallerist-enter");
+      void currentSlide.offsetWidth;
+      currentSlide.setAttribute("data-gallerist-enter", axis);
+    }
+    lastCursor = { g: cur.g, i: cur.i };
+  };
+  const teardownSlide = (rec) => {
+    rec.abort?.abort();
+    rec.media?.destroy();
+    rec.slide.remove();
+  };
+  let rendering = false;
+  const renderWindowInner = () => {
+    const state = viewer.getState();
+    const col = viewer.getCollection();
+    const groupCount = col.groups.length;
+    if (groupCount === 0) return;
+    const cur = state.cursor;
+    if (col === lastWindowCol && cur.g === lastWindowG && cur.i === lastWindowI) {
+      const rec = mounted.get(col.groups[cur.g]?.id ?? "");
+      const it = col.groups[cur.g]?.items[cur.i];
+      if (rec && it && rec.itemId === it.id && rec.overlayItem === it) {
+        applyTransform(rec.content, state.zoom);
+        if (rec.overlayEls) updateOverlays(rec.overlayEls, state.zoom.scale);
+        return;
+      }
+    }
+    lastWindowCol = col;
+    lastWindowG = cur.g;
+    lastWindowI = cur.i;
+    const idxs = internal.windowIndices(cur.g, groupCount, preload.ahead, preload.behind, viewer.loop);
+    const wantKeys = idxs.map((g) => col.groups[g]?.id ?? "");
+    const { enter, exit } = internal.reconcileKeys([...mounted.keys()], wantKeys);
+    for (const k of exit) {
+      const rec = mounted.get(k);
+      if (rec) teardownSlide(rec);
+      mounted.delete(k);
+    }
+    for (const k of enter) {
+      const slide = el("div", "gallerist-slide", { "data-group": k });
+      const content = el("div", "gallerist-content");
+      const overlayHost = el("div", "gallerist-overlays-content");
+      content.appendChild(overlayHost);
+      slide.appendChild(content);
+      track.appendChild(slide);
+      mounted.set(k, { slide, content, overlayHost });
+    }
+    for (const [k, rec] of mounted) {
+      const g = groupIndex(k);
+      if (g < 0) continue;
+      const isCurrent = g === cur.g;
+      const group = col.groups[g];
+      if (!group) continue;
+      const itemIndex = isCurrent ? cur.i : 0;
+      const it = group.items[itemIndex];
+      if (it && rec.itemId !== it.id) {
+        rec.abort?.abort();
+        rec.media?.destroy();
+        const abort = new AbortController();
+        rec.media = pickAdapter(it.type, it)?.mount(it, rec.content, {
+          signal: abort.signal,
+          priority: isCurrent ? "high" : "low"
+        });
+        rec.abort = abort;
+        rec.itemId = it.id;
+        rec.activated = false;
+        rec.content.appendChild(rec.overlayHost);
+        frameSlide(rec);
+        const mountedId = it.id;
+        const slideKey = k;
+        const loadBase = { viewer, group, item: it };
+        internals.emit("load", { ...loadBase, cursor: viewer.cursor, id: mountedId });
+        rec.media?.ready?.then(() => {
+          internals.emit("loaded", { ...loadBase, cursor: viewer.cursor, id: mountedId });
+          const r = mounted.get(slideKey);
+          if (!r || r.itemId !== mountedId) return;
+          frameSlide(r);
+          if (groupIndex(slideKey) !== viewer.getState().cursor.g) return;
+          r.overlayItem = void 0;
+          if (attached) reclampZoom();
+        }).catch((error) => {
+          if (abort.signal.aborted) {
+            const remounted = [...mounted.values()].some((r) => r.itemId === mountedId);
+            if (!remounted) internals.cancelLoad(mountedId);
+            return;
+          }
+          internals.emit("loadError", {
+            ...loadBase,
+            cursor: viewer.cursor,
+            id: mountedId,
+            error
+          });
+        });
+      }
+      if (isCurrent && !rec.activated) {
+        rec.media?.activate?.();
+        rec.activated = true;
+      } else if (!isCurrent && rec.activated) {
+        rec.media?.deactivate?.();
+        rec.activated = false;
+      }
+      if (isCurrent) {
+        tagAxis(rec.slide, cur);
+        rec.slide.setAttribute("data-gallerist-current", "");
+        rec.content.setAttribute("data-gallerist-current", "");
+        applyTransform(rec.content, state.zoom);
+        if (it) {
+          if (rec.overlayItem !== it) {
+            const r = stage.getBoundingClientRect();
+            const stageSize2 = { w: r.width, h: r.height };
+            rec.overlayEls = paintOverlays(
+              viewportLayer,
+              rec.overlayHost,
+              gatherOverlays(group, it, currentGlobalOverlays(group, it)),
+              {
+                group,
+                item: it,
+                viewer,
+                zoom: state.zoom,
+                stage: stageSize2,
+                natural: rec.media?.naturalSize?.() ?? stageSize2,
+                box: paintedBox(stageSize2, rec.media?.naturalSize?.())
+              }
+            );
+            rec.overlayItem = it;
+          } else if (rec.overlayEls) {
+            updateOverlays(rec.overlayEls, state.zoom.scale);
+          }
+        }
+      } else {
+        rec.slide.removeAttribute("data-gallerist-current");
+        rec.content.removeAttribute("data-gallerist-current");
+        rec.overlayHost.replaceChildren();
+        rec.overlayEls = void 0;
+        rec.overlayItem = void 0;
+      }
+    }
+    const items = col.groups[cur.g]?.items ?? [];
+    const want = /* @__PURE__ */ new Map();
+    for (let d = -preload.behind; d <= preload.ahead; d++) {
+      const it = d ? items[cur.i + d] : void 0;
+      if (it && sourceUrl(it.source) && pickAdapter(it.type, it)?.mount === mountImage)
+        want.set(it.id, it);
+    }
+    for (const [id, img] of warm) if (!want.has(id)) unwarm(id, img);
+    const run = ++warmRun;
+    const start = () => {
+      if (run !== warmRun) return;
+      for (const [id, it] of want) {
+        const s = it.source;
+        if (!warm.has(id)) {
+          warm.set(
+            id,
+            Object.assign(new Image(), {
+              fetchPriority: "low",
+              sizes: s.sizes ?? "",
+              srcset: s.srcset ?? "",
+              src: sourceUrl(it.source)
+            })
+          );
+        }
+      }
+    };
+    const ready = mounted.get(col.groups[cur.g]?.id ?? "")?.media?.ready;
+    if (ready) ready.then(start, start);
+    else start();
+  };
+  const warm = /* @__PURE__ */ new Map();
+  let warmRun = 0;
+  const unwarm = (id, img) => {
+    img.srcset = img.src = "";
+    warm.delete(id);
+  };
+  const renderWindow = () => {
+    if (rendering) return;
+    rendering = true;
+    try {
+      renderWindowInner();
+    } finally {
+      rendering = false;
+    }
+  };
+  const PILL_MAX = 8;
+  const DOT_MAX = 12;
+  const updatePosition = (g, i, itemCount) => {
+    if (!position) return;
+    const mode = itemIndicator === "pills" && itemCount <= PILL_MAX ? "pills" : (itemIndicator === "dots" || placard) && itemCount <= DOT_MAX ? "dots" : "counter";
+    if (g !== posG || itemCount !== posM || position.dataset.mode !== mode) {
+      position.dataset.mode = mode;
+      position.replaceChildren();
+      const text2 = el("span", "gallerist-position-text");
+      position.appendChild(text2);
+      if (mode !== "counter") {
+        for (let k = 0; k < itemCount; k++) {
+          const jump = el("button", mode === "pills" ? "gallerist-pill" : "gallerist-dot", {
+            type: "button",
+            "aria-label": ui.item(k + 1)
+          });
+          if (mode === "pills") jump.textContent = String(k + 1);
+          jump.addEventListener("click", () => viewer.goTo(g, k));
+          position.appendChild(jump);
+        }
+      }
+      posG = g;
+      posM = itemCount;
+    }
+    const text = position.querySelector(".gallerist-position-text");
+    if (text) text.textContent = `${i + 1} / ${itemCount}`;
+    for (const [k, jump] of position.querySelectorAll(".gallerist-pill, .gallerist-dot").entries()) {
+      if (k === i) jump.setAttribute("data-active", "");
+      else jump.removeAttribute("data-active");
+    }
+  };
+  const setHiddenKeepingFocus = (node, hidden) => {
+    if (hidden && !node.hidden && node.contains(document.activeElement)) {
+      root.focus({ preventScroll: true });
+    }
+    node.hidden = hidden;
+  };
+  const setArrowLabel = (arrow, name, plain, named) => {
+    if (!arrow) return;
+    let label = arrow.querySelector(".gallerist-arrow-label");
+    if (!label) {
+      label = el("span", "gallerist-arrow-label", { "aria-hidden": "true" });
+      arrow.appendChild(label);
+    }
+    label.textContent = name ?? "";
+    label.hidden = !name;
+    arrow.setAttribute("aria-label", name ? named(name) : plain);
+  };
+  let chromeG = -1;
+  let chromeI = -1;
+  let chromeCol = null;
+  const updateChrome = () => {
+    const col = viewer.getCollection();
+    const cur = viewer.getState().cursor;
+    if (col === chromeCol && cur.g === chromeG && cur.i === chromeI) return;
+    if (col !== chromeCol) {
+      anyCaption = col.groups.some((grp) => grp.items.some((it) => str(it.caption)));
+      root.toggleAttribute(
+        "data-gallerist-multi",
+        col.groups.some((grp) => grp.items.length > 1)
+      );
+      const one = col.groups.length < 2;
+      if (one && arrows === "docked" && !linear && [prevArrow, nextArrow].includes(document.activeElement))
+        root.focus({ preventScroll: true });
+      root.toggleAttribute("data-gallerist-one-group", one);
+    }
+    chromeCol = col;
+    chromeG = cur.g;
+    chromeI = cur.i;
+    const G = col.groups.length;
+    const group = col.groups[cur.g];
+    const item = group?.items[cur.i];
+    const itemCount = group?.items.length ?? 0;
+    const multi = !linear && itemCount > 1;
+    if (itemNav) setHiddenKeepingFocus(itemNav, !multi);
+    if (title) {
+      title.textContent = str(group?.caption);
+      title.hidden = !title.textContent;
+    }
+    if (arrowLabel) {
+      const nameAt = (step) => {
+        const n = viewer.loop && G > 1 ? (cur.g + step + G) % G : cur.g + step;
+        const target = col.groups[n];
+        return target && !linear ? arrowLabel(target, n) : void 0;
+      };
+      setArrowLabel(prevArrow, nameAt(-1), ui.previous, ui.previousTo);
+      setArrowLabel(nextArrow, nameAt(1), ui.next, ui.nextTo);
+    }
+    syncCaption();
+    const desc = item?.alt ? ` \u2014 ${item.alt}` : "";
+    if (linear) {
+      const pos = flatPosition(cur.g, cur.i) + 1;
+      const total = flatSeq.length;
+      if (counter) counter.textContent = `${pos} / ${total}`;
+      live.textContent = `${ui.itemOf(pos, total)}${desc}`;
+    } else {
+      if (counter) counter.textContent = `${cur.g + 1} / ${G}`;
+      if (multi) updatePosition(cur.g, cur.i, itemCount);
+      live.textContent = multi ? `${ui.groupOf(cur.g + 1, G)}, ${ui.itemOf(cur.i + 1, itemCount)}${desc}` : `${ui.groupOf(cur.g + 1, G)}${desc}`;
+    }
+  };
+  const updateZoomChrome = () => {
+    if (reset) setHiddenKeepingFocus(reset, !(viewer.getState().zoom.scale > 1.001));
+    updateNavigator();
+  };
+  function updateNavigator() {
+    if (!navigatorEl || !navigatorView) return;
+    const z = viewer.getState().zoom;
+    const rec = currentRec();
+    const natural = rec?.media?.naturalSize?.();
+    const { g, i } = viewer.getState().cursor;
+    const it = viewer.getCollection().groups[g]?.items[i];
+    const src = it ? sourceUrl(it.source) ?? sourceUrl(it.thumb) : null;
+    const size = stageSize();
+    const zoomable = rec?.media?.supportsZoom !== false;
+    if (!(z.scale > 1.001) || !zoomable || !natural || !src || !(size.w > 0)) {
+      navigatorEl.hidden = true;
+      return;
+    }
+    const box = mediaBox(size);
+    const url = `url(${JSON.stringify(src)})`;
+    if (navigatorEl.style.backgroundImage !== url) navigatorEl.style.backgroundImage = url;
+    navigatorEl.style.aspectRatio = `${natural.w} / ${natural.h}`;
+    navigatorEl.dataset.shape = natural.h > natural.w ? "portrait" : "landscape";
+    const clamp01 = (n) => Math.min(1, Math.max(0, n));
+    const x0 = clamp01((-z.x / z.scale - box.x) / box.w);
+    const y0 = clamp01((-z.y / z.scale - box.y) / box.h);
+    const x1 = clamp01(((size.w - z.x) / z.scale - box.x) / box.w);
+    const y1 = clamp01(((size.h - z.y) / z.scale - box.y) / box.h);
+    Object.assign(navigatorView.style, {
+      left: `${x0 * 100}%`,
+      top: `${y0 * 100}%`,
+      width: `${(x1 - x0) * 100}%`,
+      height: `${(y1 - y0) * 100}%`
+    });
+    navigatorEl.hidden = false;
+  }
+  const panNavigatorTo = (e) => {
+    if (!navigatorEl) return;
+    const r = navigatorEl.getBoundingClientRect();
+    const size = stageSize();
+    if (!(r.width > 0) || !(size.w > 0)) return;
+    const box = mediaBox(size);
+    const z = viewer.getState().zoom;
+    const cx = box.x + (e.clientX - r.left) / r.width * box.w;
+    const cy = box.y + (e.clientY - r.top) / r.height * box.h;
+    internals.setZoom({
+      scale: z.scale,
+      x: size.w / 2 - cx * z.scale,
+      y: size.h / 2 - cy * z.scale
+    });
+  };
+  function onNavigatorDown(e) {
+    if (e.button !== 0) return;
+    const nav2 = e.currentTarget;
+    e.preventDefault();
+    e.stopPropagation();
+    nav2.setPointerCapture?.(e.pointerId);
+    panNavigatorTo(e);
+    const move = (ev) => panNavigatorTo(ev);
+    const up = () => {
+      nav2.removeEventListener("pointermove", move);
+      nav2.removeEventListener("pointerup", up);
+      nav2.removeEventListener("pointercancel", up);
+      nav2.removeEventListener("lostpointercapture", up);
+    };
+    nav2.addEventListener("pointermove", move);
+    nav2.addEventListener("pointerup", up);
+    nav2.addEventListener("pointercancel", up);
+    nav2.addEventListener("lostpointercapture", up);
+  }
+  let attached = false;
+  let restoreFocus = null;
+  const idle = autoHide ? createIdleController(root) : null;
+  const attach = () => {
+    if (attached) return;
+    attached = true;
+    if (overlay) {
+      restoreFocus = document.activeElement;
+      lockBodyScroll();
+      document.body.appendChild(root);
+      inertBackground(root);
+      root.focus();
+    }
+    setDir();
+    readFrameInset();
+    idle?.poke();
+  };
+  const detach = () => {
+    if (!attached) return;
+    attached = false;
+    if (overlay) {
+      root.remove();
+      unlockBodyScroll();
+      releaseBackgroundInert();
+      const target = typeof opts.returnFocus === "function" ? opts.returnFocus() : opts.returnFocus ?? null;
+      (target ?? restoreFocus)?.focus?.();
+    }
+  };
+  if (!overlay && container) {
+    container.appendChild(root);
+    attached = true;
+    idle?.poke();
+  }
+  const sync = () => {
+    const phase = viewer.getState().phase;
+    if (root.getAttribute("data-gallerist-phase") !== phase)
+      root.setAttribute("data-gallerist-phase", phase);
+    if (overlay) {
+      if (phase !== "closed") attach();
+      else detach();
+    }
+    if (attached) {
+      if (!root.hasAttribute("data-gallerist-dir")) setDir();
+      renderWindow();
+      updateChrome();
+      updateZoomChrome();
+    }
+  };
+  const zoomAroundCenter = (factor) => viewer.zoomTo(viewer.zoom.scale * factor);
+  const arrowNav = vertical ? {
+    ArrowDown: nav.next,
+    ArrowUp: nav.prev,
+    ArrowRight: nav.nextItem,
+    ArrowLeft: nav.prevItem
+  } : {
+    ArrowRight: nav.next,
+    ArrowLeft: nav.prev,
+    ArrowDown: nav.nextItem,
+    ArrowUp: nav.prevItem
+  };
+  const isRtl = () => {
+    const dir = root.closest("[dir]")?.getAttribute("dir");
+    if (dir) return dir === "rtl";
+    try {
+      return getComputedStyle(root).direction === "rtl";
+    } catch {
+      return false;
+    }
+  };
+  const setDir = () => root.setAttribute("data-gallerist-dir", isRtl() ? "rtl" : "ltr");
+  const onKey = (e) => {
+    if (isEditableTarget(e.target) && e.key !== "Escape") return;
+    const by = e.target === capScroll && capScroll.hasAttribute("tabindex") ? { ArrowUp: -40, ArrowDown: 40, Home: -1e9, End: 1e9 }[e.key] : 0;
+    if (by) {
+      capScroll.scrollTop += by;
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "Tab" && overlay) {
+      const tabbables = focusableWithin(root);
+      const first = tabbables[0];
+      const last = tabbables[tabbables.length - 1];
+      if (!first || !last) {
+        e.preventDefault();
+        return;
+      }
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || active === root)) {
+        last.focus();
+        e.preventDefault();
+      } else if (!e.shiftKey && active === last) {
+        first.focus();
+        e.preventDefault();
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowLeft":
+      case "ArrowUp":
+      case "ArrowDown": {
+        const flip = isRtl() && (e.key === "ArrowRight" || e.key === "ArrowLeft");
+        const k = flip ? e.key === "ArrowRight" ? "ArrowLeft" : "ArrowRight" : e.key;
+        arrowNav[k]?.();
+        break;
+      }
+      case "Escape":
+        if (!e.defaultPrevented) viewer.close();
+        break;
+      case "+":
+      case "=":
+        zoomAroundCenter(1.25);
+        break;
+      case "-":
+        zoomAroundCenter(1 / 1.25);
+        break;
+      case "0":
+        viewer.resetZoom();
+        break;
+      case "t":
+      case "T":
+        setRailCollapsed(!railCollapsed, true);
+        break;
+      case "Home":
+        if (linear) {
+          ensureFlat();
+          const t = flatSeq[0];
+          if (t) viewer.goTo(t.g, t.i);
+        } else viewer.goTo(0);
+        break;
+      case "End":
+        if (linear) {
+          ensureFlat();
+          const t = flatSeq[flatSeq.length - 1];
+          if (t) viewer.goTo(t.g, t.i);
+        } else viewer.goTo(viewer.getCollection().groups.length - 1);
+        break;
+      default:
+        if (e.ctrlKey || e.metaKey || e.altKey) return;
+        if (!linear && /^[1-9]$/.test(e.key)) {
+          viewer.goTo(viewer.getState().cursor.g, Number(e.key) - 1);
+        } else if (pluginKeymap[e.key]) {
+          pluginKeymap[e.key]?.(e);
+        }
+        return;
+    }
+    e.preventDefault();
+  };
+  root.addEventListener("keydown", onKey);
+  const isOurFullscreen = () => {
+    const fe = document.fullscreenElement;
+    return !!fe && (fe === root || root.contains(fe));
+  };
+  const onFsChange = () => {
+    if (isOurFullscreen()) {
+      if (preFsCollapsed === null) preFsCollapsed = railCollapsed;
+      setRailCollapsed(true);
+    } else if (preFsCollapsed !== null) {
+      setRailCollapsed(preFsCollapsed);
+      preFsCollapsed = null;
+    }
+  };
+  document.addEventListener("fullscreenchange", onFsChange);
+  const currentRec = () => {
+    const key = viewer.getCollection().groups[viewer.getState().cursor.g]?.id;
+    return key ? mounted.get(key) : void 0;
+  };
+  const detachGestures = attachGestures({
+    stage,
+    viewer,
+    maxScale: MAX_ZOOM,
+    nav,
+    // route swipes through the linear/oriented nav seam
+    getContent: () => currentRec()?.content ?? null,
+    getGeometry: () => {
+      const r = stage.getBoundingClientRect();
+      return {
+        stageRect: { left: r.left, top: r.top, width: r.width, height: r.height },
+        naturalSize: { w: r.width, h: r.height },
+        mediaBox: mediaBox({ w: r.width, h: r.height })
+      };
+    }
+  });
+  let cancelPhaseWait = null;
+  const awaitPhaseAnimation = (done) => {
+    cancelPhaseWait?.();
+    const style = getComputedStyle(root);
+    if (!style.animationName || style.animationName === "none") return done();
+    const onEnd = (e) => {
+      if (e.target === root) finish();
+    };
+    const stop = () => {
+      root.removeEventListener("animationend", onEnd);
+      clearTimeout(timer);
+      cancelPhaseWait = null;
+    };
+    const finish = () => {
+      stop();
+      done();
+    };
+    root.addEventListener("animationend", onEnd);
+    const timer = setTimeout(finish, animationMs(style) + 50);
+    cancelPhaseWait = stop;
+  };
+  const offLifecycle = internals.setLifecycleDriver({
+    opening: awaitPhaseAnimation,
+    closing: awaitPhaseAnimation
+  });
+  const stageSize = () => {
+    const r = stage.getBoundingClientRect();
+    return { w: r.width, h: r.height };
+  };
+  let frameInset = 0;
+  const readFrameInset = () => {
+    frameInset = frame ? Number.parseFloat(getComputedStyle(root).getPropertyValue("--gallerist-frame-inset")) || 0 : 0;
+  };
+  function paintedBox(size, natural) {
+    const inset = Math.max(0, Math.min(frameInset, size.w / 4, size.h / 4));
+    const inner = { w: size.w - 2 * inset, h: size.h - 2 * inset };
+    if (!(natural && natural.w > 0 && natural.h > 0)) return { x: inset, y: inset, ...inner };
+    const r = containRect(inner, natural);
+    return { x: r.x + inset, y: r.y + inset, w: r.w, h: r.h };
+  }
+  function mediaBox(size) {
+    return paintedBox(size, currentRec()?.media?.naturalSize?.());
+  }
+  function frameSlide(rec) {
+    if (!frame) return;
+    const size = stageSize();
+    if (!(size.w > 0 && size.h > 0)) return;
+    const box = paintedBox(size, rec.media?.naturalSize?.());
+    const s = rec.content.style;
+    s.setProperty("--gallerist-box-x", `${box.x}px`);
+    s.setProperty("--gallerist-box-y", `${box.y}px`);
+    s.setProperty("--gallerist-box-w", `${box.w}px`);
+    s.setProperty("--gallerist-box-h", `${box.h}px`);
+  }
+  const constrainZoom = (z) => {
+    const scaled = { scale: internal.clampScale(z.scale, 1, MAX_ZOOM), x: z.x, y: z.y };
+    const size = stageSize();
+    if (!(size.w > 0 && size.h > 0)) return scaled;
+    return internal.clampPanToBox(scaled, size, mediaBox(size));
+  };
+  const offZoomBounds = internals.setZoomBounds({
+    center: () => {
+      const size = stageSize();
+      return { x: size.w / 2, y: size.h / 2 };
+    },
+    constrain: constrainZoom
+  });
+  const reclampZoom = () => {
+    const z = viewer.getState().zoom;
+    const clamped = constrainZoom(z);
+    if (clamped.scale !== z.scale || clamped.x !== z.x || clamped.y !== z.y) {
+      internals.setZoom(clamped);
+    } else {
+      renderWindow();
+      updateNavigator();
+    }
+  };
+  let resizeFrame = 0;
+  const onStageResize = () => {
+    if (resizeFrame) return;
+    resizeFrame = requestAnimationFrame(() => {
+      resizeFrame = 0;
+      if (!attached) return;
+      readFrameInset();
+      for (const rec of mounted.values()) frameSlide(rec);
+      const cur = currentRec();
+      if (cur) cur.overlayItem = void 0;
+      reclampZoom();
+    });
+  };
+  const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(onStageResize) : null;
+  resizeObserver?.observe(stage);
+  let insetFrame = 0;
+  const updateControlsInset = () => {
+    insetFrame = 0;
+    if (!controlsBox) return;
+    if (root.getAttribute("data-gallerist-preset") !== "immersive" || !attached) {
+      controlsBox.style.removeProperty("--gallerist-controls-inset");
+      return;
+    }
+    const m = main.getBoundingClientRect();
+    let top = 0;
+    let right = 0;
+    let bottom = 0;
+    let left = 0;
+    for (const band of [
+      bar,
+      caption,
+      regionHosts.footer,
+      regionHosts.thumbnails,
+      regionHosts.aside
+    ]) {
+      if (band.hidden) continue;
+      const r = band.getBoundingClientRect();
+      if (r.width < 1 || r.height < 1) continue;
+      if (r.width >= m.width * 0.5) {
+        if (r.top - m.top < m.bottom - r.bottom) top = Math.max(top, r.bottom - m.top);
+        else bottom = Math.max(bottom, m.bottom - r.top);
+      } else if (r.left - m.left < m.right - r.right) {
+        left = Math.max(left, r.right - m.left);
+      } else {
+        right = Math.max(right, m.right - r.left);
+      }
+    }
+    controlsBox.style.setProperty(
+      "--gallerist-controls-inset",
+      `${top}px ${right}px ${bottom}px ${left}px`
+    );
+  };
+  const scheduleInset = () => {
+    if (!insetFrame) insetFrame = requestAnimationFrame(updateControlsInset);
+  };
+  const bandObserver = controlsBox && typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleInset) : null;
+  for (const band of [
+    main,
+    bar,
+    caption,
+    regionHosts.footer,
+    regionHosts.thumbnails,
+    regionHosts.aside
+  ]) {
+    bandObserver?.observe(band);
+  }
+  const offRefresh = internals.onRefresh(onStageResize);
+  const mountPluginRegions = createRegionMounter(regionHosts, { viewer, preset });
+  const mountRegions = () => {
+    pluginKeymap = aggregateKeymap(internals.getPlugins());
+    mountPluginRegions(internals.getPlugins());
+    const on = opts.linear ?? !!regionHosts.thumbnails.querySelector("[data-gallerist-linear]");
+    root.toggleAttribute("data-gallerist-arrow-labels", !!arrowLabel && !on);
+    if (on !== linear) {
+      linear = on;
+      if (on) root.setAttribute("data-gallerist-linear", "true");
+      else root.removeAttribute("data-gallerist-linear");
+      chromeCol = null;
+    }
+    const thumbs = regionHosts.thumbnails;
+    const hasRail = [...thumbs.childNodes].some((n) => n !== railHandle);
+    if (!hasRail) railHandle.remove();
+    else if (thumbs.firstChild !== railHandle) thumbs.prepend(railHandle);
+    if (!controls) bar.hidden = regionHosts.toolbar.childElementCount === 0;
+    syncCaption();
+    const cur = currentRec();
+    if (cur) cur.overlayItem = void 0;
+    if (attached) {
+      renderWindow();
+      updateChrome();
+    }
+  };
+  mountRegions();
+  const offPlugins = internals.onPluginsChanged(mountRegions);
+  const unsubscribe = viewer.subscribe(sync);
+  sync();
+  return {
+    root,
+    destroy() {
+      unsubscribe();
+      offPlugins();
+      offZoomBounds();
+      offRefresh();
+      cancelPhaseWait?.();
+      offLifecycle();
+      detachGestures();
+      resizeObserver?.disconnect();
+      bandObserver?.disconnect();
+      capObserver?.disconnect();
+      if (insetFrame) cancelAnimationFrame(insetFrame);
+      if (resizeFrame) cancelAnimationFrame(resizeFrame);
+      idle?.destroy();
+      document.removeEventListener("fullscreenchange", onFsChange);
+      root.removeEventListener("keydown", onKey);
+      for (const rec of mounted.values()) teardownSlide(rec);
+      mounted.clear();
+      warmRun++;
+      for (const [id, img] of warm) unwarm(id, img);
+      detach();
+      if (!overlay) root.remove();
+    }
+  };
+}
+
+// src/bind.ts
+var attr = (el2, name) => el2.getAttribute(`data-gallerist-${name}`) ?? void 0;
+var dimension = (el2, name) => Number(attr(el2, name));
+function itemFromLink(el2, id) {
+  const source = attr(el2, "src") ?? el2.getAttribute("href");
+  if (!source) return null;
+  const img = el2.querySelector("img");
+  const item = {
+    id: attr(el2, "id") ?? id,
+    type: attr(el2, "type") ?? "image",
+    source
+  };
+  const thumb = attr(el2, "thumb") ?? img?.getAttribute("src");
+  if (thumb) item.thumb = thumb;
+  const alt = attr(el2, "alt") ?? img?.getAttribute("alt");
+  if (alt) item.alt = alt;
+  const caption = attr(el2, "caption");
+  if (caption) item.caption = caption;
+  const w = dimension(el2, "width");
+  const h = dimension(el2, "height");
+  if (w > 0 && h > 0) item.naturalSize = { w, h };
+  return item;
+}
+function collectionFromLinks(links, idPrefix = "link") {
+  const groups = [];
+  const byId = /* @__PURE__ */ new Map();
+  const positions = /* @__PURE__ */ new Map();
+  const usedIds = /* @__PURE__ */ new Set();
+  let n = 0;
+  for (const el2 of links) {
+    const generated = `${idPrefix}-${n}`;
+    const item = itemFromLink(el2, generated);
+    if (!item) continue;
+    if (usedIds.has(item.id)) item.id = usedIds.has(generated) ? `${generated}-dup` : generated;
+    usedIds.add(item.id);
+    const groupId = attr(el2, "group");
+    let g = groupId ? byId.get(groupId) : void 0;
+    if (g === void 0) {
+      const group = { id: groupId ?? `${idPrefix}-g${n}`, items: [] };
+      const caption = attr(el2, "group-caption");
+      if (caption) group.caption = caption;
+      const subtitle = attr(el2, "group-subtitle");
+      if (subtitle) group.meta = { subtitle };
+      g = groups.push(group) - 1;
+      if (groupId) byId.set(groupId, g);
+    }
+    const items = groups[g].items;
+    positions.set(el2, { g, i: items.push(item) - 1 });
+    n++;
+  }
+  return { collection: { groups }, positions };
+}
+function bind(opts = {}) {
+  const selector = opts.selector ?? "[data-gallerist]";
+  const root = opts.root ?? document;
+  const live = /* @__PURE__ */ new Map();
+  let destroyed = false;
+  const linksOf = (gallery) => [...root.querySelectorAll(selector)].filter(
+    (el2) => (el2.getAttribute("data-gallerist") ?? "") === gallery && !el2.closest(".gallerist")
+  );
+  const pick = (value, gallery) => typeof value === "function" ? value(gallery) : value;
+  const ensure = (gallery) => {
+    const { collection, positions } = collectionFromLinks(linksOf(gallery), gallery || "link");
+    if (collection.groups.length === 0) return null;
+    const signature = JSON.stringify(collection);
+    const existing = live.get(gallery);
+    if (existing) {
+      if (existing.signature !== signature) {
+        existing.viewer.setCollection(collection);
+        existing.signature = signature;
+      }
+      return { entry: existing, positions };
+    }
+    const viewer = core.createViewer({ ...pick(opts.viewer, gallery), collection });
+    const handle = mount(viewer, {
+      // a link removed meanwhile falls back to what had focus on opening
+      returnFocus: () => {
+        const link = live.get(gallery)?.link;
+        return link?.isConnected ? link : null;
+      },
+      ...pick(opts.mount, gallery)
+    });
+    const entry = { viewer, handle, signature, link: null };
+    live.set(gallery, entry);
+    return { entry, positions };
+  };
+  const onClick = (event) => {
+    const e = event;
+    if (e.defaultPrevented || e.button !== 0) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    const link = e.target?.closest?.(selector);
+    if (!link || link.closest(".gallerist")) return;
+    const ready = ensure(link.getAttribute("data-gallerist") ?? "");
+    const at = ready?.positions.get(link);
+    if (!ready || !at) return;
+    e.preventDefault();
+    ready.entry.link = link;
+    ready.entry.viewer.open(at);
+  };
+  root.addEventListener("click", onClick);
+  return {
+    open(gallery, at) {
+      if (destroyed) return;
+      const ready = ensure(gallery ?? "");
+      if (!ready) return;
+      ready.entry.link = null;
+      ready.entry.viewer.open(at ?? { g: 0, i: 0 });
+    },
+    viewer: (gallery = "") => live.get(gallery)?.viewer,
+    destroy() {
+      destroyed = true;
+      root.removeEventListener("click", onClick);
+      for (const { handle, viewer } of live.values()) {
+        handle.destroy();
+        viewer.destroy();
+      }
+      live.clear();
+    }
+  };
+}
+
+// src/index.ts
+var VERSION = "0.3.1" ;
+
+Object.defineProperty(exports, "reconcileKeys", {
+  enumerable: true,
+  get: function () { return internal.reconcileKeys; }
+});
+Object.defineProperty(exports, "windowIndices", {
+  enumerable: true,
+  get: function () { return internal.windowIndices; }
+});
+exports.DEFAULT_STRINGS = DEFAULT_STRINGS;
+exports.VERSION = VERSION;
+exports.applyAppearance = applyAppearance;
+exports.bind = bind;
+exports.collectionFromLinks = collectionFromLinks;
+exports.imageAdapter = imageAdapter;
+exports.mount = mount;
+exports.resolvePreset = resolvePreset;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map