@michaelyagi/shoji 0.1.0-alpha.6

package/dist/esm/index3.css

@@ -0,0 +1,166 @@
+/* DESIGN.md §5 — layout takes over the container entirely once enabled
+   (any host markup that was there at scan time is replaced by its own
+   generated tiles), so all of its structural styling lives here rather than
+   depending on host CSS. */
+
+.shoji-layout {
+  position: relative;
+}
+
+/* masonry & justified always give the container an explicit
+   `container.style.height` (index.ts) — never intrinsic/content-driven —
+   so CSS layout containment is safe here and doesn't collapse or misjudge
+   its size. A real, reported slowdown: opening/closing the lightbox reads
+   layout (getBoundingClientRect/offsetHeight — zoomTransition.ts's FLIP
+   technique) which forces the browser to flush *any* pending layout on the
+   page first, including this container's own (often large — hundreds of
+   individually absolutely-positioned tiles) subtree, even though none of
+   that subtree's layout ever changed. `contain: layout` tells the browser
+   this subtree's internal layout can't affect, and isn't affected by,
+   anything outside it, so that flush can skip descending into it. Not
+   applied to grid: its height is intrinsic (content-driven auto-sized
+   rows), which layout containment doesn't safely decouple the same way. */
+.shoji-layout--masonry,
+.shoji-layout--justified {
+  contain: layout style;
+}
+
+.shoji-layout-tile {
+  display: block;
+  cursor: pointer;
+}
+
+.shoji-layout-tile img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* masonry & justified: both JS-positioned, absolutely placed, GPU-composited
+   moves only (transform), per CLAUDE.md — no top/left animation.
+   visibility: hidden until the JS layout pass actually sets a real
+   width/height/transform — masonry/justified skip that pass entirely
+   (index.ts's containerWidth <= 0 guard) if the container isn't sized yet
+   at construction, correcting only once the ResizeObserver's own
+   (asynchronous) initial notification fires. In that gap, an unstyled
+   tile falls back to CSS auto-sizing from its <img> child, which can be a
+   genuinely 0×0 or wildly wrong-shaped rect depending on image load
+   timing — clickable, but a click landing on it computes the zoom
+   transition's origin from that same bad rect, silently skipping the
+   animation (a 0×0 origin) or animating from the wrong place (a
+   wrong-shaped one). visibility: hidden (not display: none — keeps the
+   space-not-taking difference irrelevant here, but note it also removes
+   the tile from hit-testing, unlike opacity: 0) makes an unpositioned
+   tile un-clickable for that entire window instead — the JS layout
+   functions clear it back to visible the moment they actually set real
+   geometry. See DESIGN.md §2.3b. */
+.shoji-layout--masonry .shoji-layout-tile,
+.shoji-layout--justified .shoji-layout-tile {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+}
+
+.shoji-layout--masonry.shoji-layout--animate .shoji-layout-tile,
+.shoji-layout--justified.shoji-layout--animate .shoji-layout-tile {
+  transition: transform var(--shoji-duration) var(--shoji-easing);
+}
+
+/* grid: native CSS grid does the positioning, no JS math or transforms. */
+.shoji-layout--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--shoji-layout-column-width, 240px), 1fr));
+  gap: var(--shoji-layout-gutter, 8px);
+}
+
+.shoji-layout--grid .shoji-layout-tile {
+  aspect-ratio: var(--shoji-layout-tile-aspect, 1);
+}
+
+/* headings (groupBy) — grid: a real grid row of its own, native flow, no JS
+   positioning needed (a full-span item naturally starts a new row after
+   it). masonry/justified: JS-positioned same as tiles, since those modes
+   don't have a document-flow "row" to insert into. */
+.shoji-layout-heading {
+  margin: 0;
+}
+
+.shoji-layout--grid .shoji-layout-heading {
+  grid-column: 1 / -1;
+}
+
+.shoji-layout--masonry .shoji-layout-heading,
+.shoji-layout--justified .shoji-layout-heading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+/* justified headings are compact, inline labels, not full-width blocking
+   elements (see the groupBy option's doc comment in index.ts) — sized to
+   their own content by default, and to their own JS-computed max-width
+   only when the content-fitting pass decides a label needs to wrap. This
+   overrides the shared width: 100% rule above by source order (equal
+   specificity), not by a stronger selector. */
+.shoji-layout--justified .shoji-layout-heading {
+  width: auto;
+  white-space: nowrap;
+}
+
+.shoji-layout--masonry.shoji-layout--animate .shoji-layout-heading,
+.shoji-layout--justified.shoji-layout--animate .shoji-layout-heading {
+  transition: transform var(--shoji-duration) var(--shoji-easing);
+}
+
+/* Font customization points, per CLAUDE.md ("all styling through --shoji-*
+   custom properties with sane defaults"). .shoji-layout-heading itself (the
+   plain-string/default heading, and the shared parent of title+subtitle)
+   deliberately keeps its browser-default <h2> font-size untouched rather
+   than gaining its own --shoji-layout-heading-font-size — overriding that
+   here to "inherit" would shrink it from the UA stylesheet's own (larger)
+   h2 default, a visible regression for anyone not using the structured
+   form. Host CSS targeting .shoji-layout-heading directly already fully
+   controls it.
+
+   The title/subtitle spans below intentionally do NOT size off that same
+   (oversized, unreset) h2 default — title and subtitle both get an
+   explicit shared default size instead (matching .shoji-counter's own
+   0.875rem elsewhere in core, for visual consistency), decoupled from
+   whatever the plain-string heading's own size happens to be. The label
+   (title) reads as muted/normal-weight, the value (subtitle) as bold/
+   full-color — e.g. "Taken" vs a bolded date — the inverse of an earlier
+   version of this default that bolded the label instead. */
+.shoji-layout-heading {
+  font-family: var(--shoji-layout-heading-font-family, inherit);
+}
+
+.shoji-layout-heading-title {
+  font-size: var(--shoji-layout-heading-title-font-size, 0.875rem);
+  font-weight: var(--shoji-layout-heading-title-font-weight, 400);
+  color: var(--shoji-layout-heading-title-color, #767676);
+  /* headingOverflow: 'fit''s ellipsis fallback (the one unavoidable case —
+     a single label wider than the container even alone) still needs
+     overflow-wrap: break-word so a single long unbroken token (a URL, a
+     hashtag) doesn't itself force the ellipsis box wider than intended. */
+  overflow-wrap: break-word;
+}
+
+.shoji-layout-heading-subtitle {
+  margin-left: 0.6em;
+  font-size: var(--shoji-layout-heading-subtitle-font-size, 0.875rem);
+  font-weight: var(--shoji-layout-heading-subtitle-font-weight, 700);
+  color: var(--shoji-layout-heading-subtitle-color, inherit);
+  overflow-wrap: break-word;
+}
+
+/* stickyHeadings — grid mode only; masonry/justified headings are already
+   absolutely positioned by JS, which sticky can't meaningfully layer onto
+   (see the option's own doc comment in index.ts). */
+.shoji-layout--grid .shoji-layout-heading--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}

package/dist/esm/index4.css

@@ -0,0 +1,27 @@
+/* DESIGN.md §4-zoom — cursor affordances only; the transform itself is set
+   inline (per-slide, computed from gesture/button state, not a static
+   rule). Scoped to .shoji-zoom-enabled (added by the plugin itself, per
+   slide) rather than the bare .shoji-slide-img class — that class exists on
+   every slide image regardless of whether this plugin is even enabled for
+   a given gallery, and this CSS ships in the single-file bundle alongside
+   every other official plugin's, so an unscoped rule would leak a zoom-in
+   cursor onto galleries that never opted into this plugin at all. */
+.shoji-zoom-enabled {
+  cursor: zoom-in;
+}
+
+.shoji-zoom-enabled.shoji-zoomed {
+  cursor: grab;
+  /* Reported from real usage: a scaled-up image could show GPU tile-seam
+     lines through its own content while zoomed — the same rasterization
+     quirk as the toolbar's own (shoji.css), just from the image's frequent
+     scale() updates instead of a neighbor's. Scoped to only while actually
+     zoomed (not the whole time this plugin is enabled) — at scale 1 there's
+     no scale-up to tile-seam in the first place, so no reason to spend the
+     extra memory a promoted layer costs. */
+  will-change: transform;
+}
+
+.shoji-zoom-enabled.shoji-zoomed:active {
+  cursor: grabbing;
+}

package/dist/esm/plugins/activeThumbnail/index.d.ts

@@ -0,0 +1,26 @@
+import { ShojiPlugin } from '../../core/plugin';
+export interface ActiveThumbnailOptions {
+    /** CSS class applied to the origin thumbnail for whichever slide is currently active. Default `'shoji-thumb-active'` — Shoji ships no default styling for it (the host's own thumbnail markup, or the layout plugin's tiles, define what "active" looks like), only the class toggling. */
+    activeClass?: string;
+    /** Scrolls the active thumbnail into view (`block: 'nearest'`) whenever it changes. Default `true`. */
+    scrollIntoView?: boolean;
+}
+/**
+ * Opt-in: keeps the host's thumbnail grid in sync with whichever slide is
+ * currently open — highlighting it and, by default, scrolling it into view —
+ * as the viewer moves through the lightbox by any means (arrow keys,
+ * prev/next buttons, a completed swipe, autoplay ticking forward, a plugin
+ * calling `goTo()`). Not core: CLAUDE.md's "everything that can be a plugin
+ * is a plugin" — a host whose thumbnail grid is short enough to always be
+ * fully visible, or who doesn't want their page scrolling out from under
+ * them mid-slideshow, should be able to leave this off entirely.
+ *
+ * Reuses `Gallery.getOriginElement()` (the same index → thumbnail lookup the
+ * zoom transition already relies on, §2.3b) rather than re-deriving it, so
+ * this plugin's coverage exactly matches whatever the zoom transition
+ * already zooms to/from: `scannedElements[index]` in selector mode,
+ * `data-shoji-id="<item.id>"` markers elsewhere (including the layout
+ * plugin's own tiles, which set that attribute automatically when
+ * `item.id` is present).
+ */
+export declare const ActiveThumbnail: ShojiPlugin;

package/dist/esm/plugins/activeThumbnail/index.js

@@ -0,0 +1,48 @@
+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();
+    };
+  }
+};
+export {
+  ActiveThumbnail
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/plugins/activeThumbnail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/plugins/activeThumbnail/index.ts"],"sourcesContent":["import type { PluginContext, ShojiPlugin } from '../../core/plugin';\n\nexport interface ActiveThumbnailOptions {\n  /** CSS class applied to the origin thumbnail for whichever slide is currently active. Default `'shoji-thumb-active'` — Shoji ships no default styling for it (the host's own thumbnail markup, or the layout plugin's tiles, define what \"active\" looks like), only the class toggling. */\n  activeClass?: string;\n  /** Scrolls the active thumbnail into view (`block: 'nearest'`) whenever it changes. Default `true`. */\n  scrollIntoView?: boolean;\n}\n\nfunction prefersReducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === 'function' &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  );\n}\n\n/**\n * Opt-in: keeps the host's thumbnail grid in sync with whichever slide is\n * currently open — highlighting it and, by default, scrolling it into view —\n * as the viewer moves through the lightbox by any means (arrow keys,\n * prev/next buttons, a completed swipe, autoplay ticking forward, a plugin\n * calling `goTo()`). Not core: CLAUDE.md's \"everything that can be a plugin\n * is a plugin\" — a host whose thumbnail grid is short enough to always be\n * fully visible, or who doesn't want their page scrolling out from under\n * them mid-slideshow, should be able to leave this off entirely.\n *\n * Reuses `Gallery.getOriginElement()` (the same index → thumbnail lookup the\n * zoom transition already relies on, §2.3b) rather than re-deriving it, so\n * this plugin's coverage exactly matches whatever the zoom transition\n * already zooms to/from: `scannedElements[index]` in selector mode,\n * `data-shoji-id=\"<item.id>\"` markers elsewhere (including the layout\n * plugin's own tiles, which set that attribute automatically when\n * `item.id` is present).\n */\nexport const ActiveThumbnail: ShojiPlugin = {\n  name: 'activeThumbnail',\n  defaults: {\n    activeClass: 'shoji-thumb-active',\n    scrollIntoView: true,\n  } satisfies ActiveThumbnailOptions,\n\n  init(ctx: PluginContext): () => void {\n    const { gallery } = ctx;\n    const activeClass = String(ctx.options.activeClass ?? 'shoji-thumb-active');\n    const scrollIntoView = ctx.options.scrollIntoView !== false;\n\n    let current: HTMLElement | null = null;\n\n    function apply(index: number): void {\n      const el = gallery.getOriginElement(index);\n      if (current && current !== el) current.classList.remove(activeClass);\n      if (el) {\n        el.classList.add(activeClass);\n        if (scrollIntoView) {\n          el.scrollIntoView({\n            block: 'nearest',\n            inline: 'nearest',\n            behavior: prefersReducedMotion() ? 'auto' : 'smooth',\n          });\n        }\n      }\n      current = el;\n    }\n\n    // Cleared on close (not left highlighting a thumbnail the viewer isn't\n    // looking at anymore) — reopening re-applies it from whatever index\n    // open() lands on, via the 'afterOpen' listener below.\n    function clear(): void {\n      current?.classList.remove(activeClass);\n      current = null;\n    }\n\n    const offOpen = ctx.on('afterOpen', ({ index }) => apply(index));\n    const offSlide = ctx.on('afterSlide', ({ to }) => apply(to));\n    const offClose = ctx.on('close', clear);\n\n    return () => {\n      offOpen();\n      offSlide();\n      offClose();\n      clear();\n    };\n  },\n};\n"],"names":[],"mappings":"AASA,SAAS,uBAAgC;AACvC,SACE,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE;AAE1D;AAoBO,MAAM,kBAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,UAAU;AAAA,IACR,aAAa;AAAA,IACb,gBAAgB;AAAA,EAAA;AAAA,EAGlB,KAAK,KAAgC;AACnC,UAAM,EAAE,YAAY;AACpB,UAAM,cAAc,OAAO,IAAI,QAAQ,eAAe,oBAAoB;AAC1E,UAAM,iBAAiB,IAAI,QAAQ,mBAAmB;AAEtD,QAAI,UAA8B;AAElC,aAAS,MAAM,OAAqB;AAClC,YAAM,KAAK,QAAQ,iBAAiB,KAAK;AACzC,UAAI,WAAW,YAAY,GAAI,SAAQ,UAAU,OAAO,WAAW;AACnE,UAAI,IAAI;AACN,WAAG,UAAU,IAAI,WAAW;AAC5B,YAAI,gBAAgB;AAClB,aAAG,eAAe;AAAA,YAChB,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAU,qBAAA,IAAyB,SAAS;AAAA,UAAA,CAC7C;AAAA,QACH;AAAA,MACF;AACA,gBAAU;AAAA,IACZ;AAKA,aAAS,QAAc;AACrB,yCAAS,UAAU,OAAO;AAC1B,gBAAU;AAAA,IACZ;AAEA,UAAM,UAAU,IAAI,GAAG,aAAa,CAAC,EAAE,MAAA,MAAY,MAAM,KAAK,CAAC;AAC/D,UAAM,WAAW,IAAI,GAAG,cAAc,CAAC,EAAE,GAAA,MAAS,MAAM,EAAE,CAAC;AAC3D,UAAM,WAAW,IAAI,GAAG,SAAS,KAAK;AAEtC,WAAO,MAAM;AACX,cAAA;AACA,eAAA;AACA,eAAA;AACA,YAAA;AAAA,IACF;AAAA,EACF;AACF;"}

package/dist/esm/plugins/autoplay/icons.d.ts

@@ -0,0 +1,3 @@
+/** DESIGN.md §9 — inline SVG, stroke/fill = currentColor, matches src/core/icons.ts's convention. */
+export declare const PLAY_ICON = "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"/></svg>";
+export declare const PAUSE_ICON = "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M7 5h4v14H7zM13 5h4v14h-4z\"/></svg>";

package/dist/esm/plugins/autoplay/index.d.ts

@@ -0,0 +1,17 @@
+import { ShojiPlugin } from '../../core/plugin';
+export interface AutoplayOptions {
+    /** Milliseconds between advances for timed (photo) slides. Default `5000`. */
+    interval?: number;
+    /** Shows the thin progress bar (`--shoji-progress`) tracking time-to-next-advance along the dialog's bottom edge, for timed slides only — never shown during video slides, whose own runtime drives advancement instead. Default `true`. Purely presentational: turning it off doesn't change any timing, only whether it's drawn. */
+    showProgress?: boolean;
+}
+/**
+ * DESIGN.md §4-autoplay. Advances on a fixed `interval` (default 5000ms) for
+ * ordinary slides; for a video slide, plays it and waits for `ended` instead
+ * — the interval never applies to video. A manual pause on that video pauses
+ * the *slideshow* too (not just the video); manually resuming the video does
+ * NOT resume the slideshow — that requires pressing the slideshow's own
+ * play control again. See `enterSlide()`/`onVideoPause()` below for exactly
+ * where each half of that rule lives.
+ */
+export declare const Autoplay: ShojiPlugin;

package/dist/esm/plugins/autoplay/index.js

@@ -0,0 +1,177 @@
+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();
+    };
+  }
+};
+export {
+  Autoplay
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/plugins/autoplay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/plugins/autoplay/icons.ts","../../../../src/plugins/autoplay/index.ts"],"sourcesContent":["/** DESIGN.md §9 — inline SVG, stroke/fill = currentColor, matches src/core/icons.ts's convention. */\n\nexport const PLAY_ICON =\n  '<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"/></svg>';\n\nexport const PAUSE_ICON =\n  '<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M7 5h4v14H7zM13 5h4v14h-4z\"/></svg>';\n","import type { PluginContext, ShojiPlugin } from '../../core/plugin';\nimport { PAUSE_ICON, PLAY_ICON } from './icons';\nimport './autoplay.css';\n\n/**\n * A native `<video>` or a `.shoji-slide-provider-video` container a video\n * provider plugin (§4-video) has augmented with the same shape — Autoplay\n * never needs to know which. `play()`'s return type is technically a lie\n * for the provider case (that `.play` is a synchronous fire-and-forget, no\n * `HTMLVideoElement.play()`-style promise) — harmless, `enterSlide()`'s own\n * `typeof playResult.catch === 'function'` guard already treats a\n * non-promise `play()` result as \"nothing to await,\" same as `undefined`.\n */\ntype PlayableMedia = Pick<\n  HTMLVideoElement,\n  'play' | 'pause' | 'paused' | 'ended' | 'muted' | 'addEventListener' | 'removeEventListener'\n>;\n\n/** `.shoji-slide-provider-video` only counts if it's actually been wired up as playable (§4-video's `wirePlayableContract`) — a provider still mid-async-setup, or one that never opted into Autoplay sync at all, isn't. */\nfunction findPlayable(media: HTMLElement | null): PlayableMedia | null {\n  const video = media?.querySelector('video');\n  if (video) return video;\n  const provider = media?.querySelector<HTMLElement & Partial<PlayableMedia>>(\n    '.shoji-slide-provider-video',\n  );\n  if (provider && typeof provider.play === 'function') return provider as PlayableMedia;\n  return null;\n}\n\n/** A provider container is attached to the DOM immediately (§4-video), well before its async setup (loading an SDK, constructing a player) finishes wiring `.play` — this is what tells `enterSlide()` \"there's a video here, it's just not playable yet\" apart from \"no video at all,\" so it doesn't mistreat a still-loading video as an ordinary timed slide. */\nfunction isPendingProviderVideo(media: HTMLElement | null): boolean {\n  const provider = media?.querySelector<HTMLElement & Partial<PlayableMedia>>(\n    '.shoji-slide-provider-video',\n  );\n  return !!provider && typeof provider.play !== 'function';\n}\n\n// A provider embed's postMessage bridge (DESIGN.md §4.3) can need more real\n// time after \"ready\" before it reliably processes its first command — a\n// play() issued too soon can silently no-op with nothing to catch. Retries\n// a few times with a short delay instead of a single best-effort attempt.\nconst PROVIDER_PLAY_RETRY_MS = 400;\nconst MAX_PROVIDER_PLAY_ATTEMPTS = 8; // + the initial attempt = 9 total, ~3.6s before giving up\n\nexport interface AutoplayOptions {\n  /** Milliseconds between advances for timed (photo) slides. Default `5000`. */\n  interval?: number;\n  /** Shows the thin progress bar (`--shoji-progress`) tracking time-to-next-advance along the dialog's bottom edge, for timed slides only — never shown during video slides, whose own runtime drives advancement instead. Default `true`. Purely presentational: turning it off doesn't change any timing, only whether it's drawn. */\n  showProgress?: boolean;\n}\n\n/**\n * DESIGN.md §4-autoplay. Advances on a fixed `interval` (default 5000ms) for\n * ordinary slides; for a video slide, plays it and waits for `ended` instead\n * — the interval never applies to video. A manual pause on that video pauses\n * the *slideshow* too (not just the video); manually resuming the video does\n * NOT resume the slideshow — that requires pressing the slideshow's own\n * play control again. See `enterSlide()`/`onVideoPause()` below for exactly\n * where each half of that rule lives.\n */\nexport const Autoplay: ShojiPlugin = {\n  name: 'autoplay',\n  defaults: { interval: 5000, showProgress: true } satisfies AutoplayOptions,\n\n  init(ctx: PluginContext): () => void {\n    const { gallery } = ctx;\n    const interval = Number(ctx.options.interval ?? 5000);\n    const showProgress = ctx.options.showProgress !== false;\n    const locale = ctx.options.locale as Partial<Record<'play' | 'pause', string>> | undefined;\n    const playLabel = locale?.play ?? 'Play slideshow';\n    const pauseLabel = locale?.pause ?? 'Pause slideshow';\n\n    let playing = false;\n    let timer: ReturnType<typeof setTimeout> | null = null;\n    let currentVideo: PlayableMedia | null = null;\n    let awaitingProviderVideo = false;\n\n    // .shoji-slide-media (offset 0) is a stable node for the gallery's whole\n    // lifetime (SlideManager's pool, DESIGN.md §2.3) — registered once here,\n    // not per enterSlide(), rather than tracked/detached alongside\n    // currentVideo. A provider's own error event (§4-video, e.g. YouTube's\n    // onError) bubbles up to it regardless of which slide is currently\n    // showing there, or whether findPlayable() would even consider it\n    // \"ready\" yet — a video that errors out before ever becoming playable\n    // would otherwise just sit through the full `interval` fallback timer\n    // instead of skipping ahead immediately.\n    const media = gallery.getActiveMedia();\n    function onVideoError(): void {\n      if (playing) advance();\n    }\n    media?.addEventListener('error', onVideoError);\n\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.className = 'shoji-toolbar-button';\n    button.setAttribute('aria-label', playLabel);\n    button.title = playLabel;\n    button.innerHTML = PLAY_ICON;\n\n    const progress = document.createElement('div');\n    progress.className = 'shoji-autoplay-progress';\n    progress.hidden = true;\n    const progressBar = document.createElement('div');\n    progressBar.className = 'shoji-autoplay-progress-bar';\n    progress.appendChild(progressBar);\n\n    function clearTimer(): void {\n      if (timer !== null) {\n        clearTimeout(timer);\n        timer = null;\n      }\n    }\n\n    function resetProgressBar(): void {\n      if (!showProgress) return;\n      progress.hidden = true;\n      progressBar.style.transition = 'none';\n      progressBar.style.width = '0%';\n    }\n\n    function runProgressBar(ms: number): void {\n      if (!showProgress) return;\n      progress.hidden = false;\n      progressBar.style.transition = 'none';\n      progressBar.style.width = '0%';\n      void progressBar.offsetWidth; // commit the reset before transitioning\n      progressBar.style.transition = `width ${ms}ms linear`;\n      progressBar.style.width = '100%';\n    }\n\n    function setButtonState(isPlaying: boolean): void {\n      playing = isPlaying;\n      button.innerHTML = isPlaying ? PAUSE_ICON : PLAY_ICON;\n      button.setAttribute('aria-label', isPlaying ? pauseLabel : playLabel);\n      button.title = isPlaying ? pauseLabel : playLabel;\n    }\n\n    function onVideoEnded(): void {\n      if (playing) advance();\n    }\n\n    // A real user pause, as opposed to the pause some browsers fire\n    // immediately alongside 'ended' — `.ended` disambiguates the two.\n    function onVideoPause(): void {\n      if (currentVideo?.ended) return;\n      stop();\n    }\n\n    function detachVideo(): void {\n      if (!currentVideo) return;\n      currentVideo.removeEventListener('ended', onVideoEnded);\n      currentVideo.removeEventListener('pause', onVideoPause);\n      currentVideo = null;\n    }\n\n    // A provider embed (e.g. YouTube) is cross-origin — unlike native\n    // <video>, its own autoplay policy requires a *direct* user gesture on\n    // the embed itself, which an automatic play() arriving via this\n    // timer/'ended'/slideItemLoad chain never has; it silently no-ops\n    // rather than rejecting, so there's nothing to catch. Muting first is\n    // what actually gets it to play — the viewer can still unmute via the\n    // embed's own controls.\n    function ensureProviderPlaying(video: PlayableMedia, attemptsLeft: number): void {\n      video.muted = true;\n      video.play();\n      setTimeout(() => {\n        if (currentVideo !== video || !playing) return; // stale — slide changed, or already stopped\n        if (!video.paused) return; // took effect\n        if (attemptsLeft > 0) ensureProviderPlaying(video, attemptsLeft - 1);\n        else stop(); // exhausted retries — don't leave the slideshow silently stuck\n      }, PROVIDER_PLAY_RETRY_MS);\n    }\n\n    function enterSlide(): void {\n      clearTimer();\n      detachVideo();\n      resetProgressBar();\n      awaitingProviderVideo = false;\n      if (!playing) return;\n\n      const media = gallery.getActiveMedia();\n      const video = findPlayable(media);\n      if (video) {\n        currentVideo = video;\n        video.addEventListener('ended', onVideoEnded);\n        video.addEventListener('pause', onVideoPause);\n        if (video instanceof HTMLVideoElement) {\n          const playResult = video.play();\n          // Browsers can block an unmuted native <video> play() that isn't a\n          // direct continuation of a user gesture (e.g. one arriving via this\n          // setTimeout/'ended' chain rather than the toggle button's click) —\n          // pause the slideshow and wait for the viewer rather than getting\n          // stuck with a video that silently never plays or advances.\n          if (playResult && typeof playResult.catch === 'function') {\n            playResult.catch(() => stop());\n          }\n        } else {\n          ensureProviderPlaying(video, MAX_PROVIDER_PLAY_ATTEMPTS);\n        }\n        return;\n      }\n\n      // A provider video (e.g. YouTube) still mid-setup isn't an ordinary\n      // slide either — the slideItemLoad listener below re-enters once it's\n      // actually playable. This timer is a fallback in case that never\n      // happens (network failure, blocked, ...), so the slideshow can't\n      // stall on it forever.\n      awaitingProviderVideo = isPendingProviderVideo(media);\n      runProgressBar(interval);\n      timer = setTimeout(advance, interval);\n    }\n\n    function advance(): void {\n      const before = gallery.currentIndex;\n      gallery.next();\n      // loop:false and next() was already at the last item — nothing left\n      // to advance to; the 'afterSlide' handler below won't fire for a\n      // no-op goTo(), so this is the only place that can catch it.\n      if (gallery.currentIndex === before) stop();\n    }\n\n    function start(): void {\n      if (playing) return;\n      setButtonState(true);\n      ctx.emit('autoplayStart', {});\n      enterSlide();\n    }\n\n    function stop(): void {\n      if (!playing) return;\n      setButtonState(false);\n      clearTimer();\n      resetProgressBar();\n      if (currentVideo && !currentVideo.paused) currentVideo.pause();\n      detachVideo();\n      ctx.emit('autoplayStop', {});\n    }\n\n    function toggle(): void {\n      if (playing) stop();\n      else start();\n    }\n\n    button.addEventListener('click', toggle);\n\n    // 'right' — clusters immediately before the close button, per DESIGN.md §3.1.\n    const removeButton = ctx.ui.toolbar('right', button);\n    const removeProgress = showProgress ? ctx.ui.overlay(progress) : null;\n    const removeShortcut = ctx.ui.registerShortcut(' ', toggle);\n    // Any slide change — autoplay's own next(), or the viewer manually\n    // navigating mid-slideshow via arrows/buttons/goTo() — re-enters here,\n    // tearing down the previous slide's timer/video listeners and setting\n    // up fresh ones for whatever is active now. advance() deliberately does\n    // NOT call enterSlide() itself: next() already triggers this listener\n    // synchronously, so calling it twice would double up the timer/video wiring.\n    const offSlide = ctx.on('afterSlide', () => {\n      if (playing) enterSlide();\n    });\n    // A provider video (§4-video) that was still mid-setup when enterSlide()\n    // last ran — see awaitingProviderVideo there — becomes playable some\n    // time after afterSlide already fired and gave up on it for this pass.\n    // Re-enter once it's genuinely ready, scoped to the still-active index\n    // so a slide the viewer has already moved past doesn't retroactively\n    // hijack the timer.\n    const offSlideItemLoad = ctx.on('slideItemLoad', ({ index }) => {\n      if (playing && awaitingProviderVideo && index === gallery.currentIndex) enterSlide();\n    });\n    const offClose = ctx.on('close', () => stop());\n\n    return () => {\n      stop();\n      media?.removeEventListener('error', onVideoError);\n      removeButton();\n      removeProgress?.();\n      removeShortcut();\n      offSlide();\n      offSlideItemLoad();\n      offClose();\n    };\n  },\n};\n"],"names":["media"],"mappings":"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"}

package/dist/esm/plugins/fullscreen/icons.d.ts

@@ -0,0 +1,3 @@
+/** DESIGN.md §9 — inline SVG, stroke = currentColor, matches src/core/icons.ts's convention. Four corner-arrow glyphs, a generic "expand"/"collapse" pair, not tied to any particular icon set. */
+export declare 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>";
+export declare 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>";

package/dist/esm/plugins/fullscreen/index.d.ts

@@ -0,0 +1,17 @@
+import { ShojiPlugin } from '../../core/plugin';
+/**
+ * DESIGN.md §4 — native Fullscreen API toggle, `.shoji-outer` (`ctx.ui.outer()`,
+ * the whole lightbox — backdrop, dialog, controls) is what goes fullscreen,
+ * not just the slide media. No toolbar button at all — not a disabled one —
+ * on a browser with no Fullscreen API support (checked once at `init()`;
+ * historically Safari on iOS), rather than shipping a dead control.
+ *
+ * `fullscreenchange` (plus the `webkitfullscreenchange` vendor variant) is
+ * the single source of truth for button state, not the click handler
+ * directly — a real Fullscreen API `request`/`exit` call can be rejected
+ * (permission, another element already fullscreen, etc.), and the browser's
+ * own Escape-key fullscreen exit doesn't go through this plugin's click
+ * handler at all. Reacting to the event instead of the request keeps the
+ * button correct regardless of *why* fullscreen state changed.
+ */
+export declare const Fullscreen: ShojiPlugin;

package/dist/esm/plugins/fullscreen/index.js

@@ -0,0 +1,74 @@
+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();
+    };
+  }
+};
+export {
+  Fullscreen
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/plugins/fullscreen/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/plugins/fullscreen/icons.ts","../../../../src/plugins/fullscreen/index.ts"],"sourcesContent":["/** DESIGN.md §9 — inline SVG, stroke = currentColor, matches src/core/icons.ts's convention. Four corner-arrow glyphs, a generic \"expand\"/\"collapse\" pair, not tied to any particular icon set. */\nexport const EXPAND_ICON =\n  '<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>';\n\nexport const COMPRESS_ICON =\n  '<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>';\n","import type { PluginContext, ShojiPlugin } from '../../core/plugin';\nimport { COMPRESS_ICON, EXPAND_ICON } from './icons';\n\n/**\n * Vendor-prefixed Fullscreen API surface (older Safari) — not in standard\n * `lib.dom.d.ts`, so this is a documented interop boundary (CLAUDE.md: `any`\n * only there). Everything else in this file uses the standard,\n * already-typed `Element.requestFullscreen`/`Document.exitFullscreen`/\n * `Document.fullscreenElement`/`Document.fullscreenEnabled`.\n */\ninterface WebkitFullscreenElement extends HTMLElement {\n  webkitRequestFullscreen?: () => void;\n}\ninterface WebkitFullscreenDocument extends Document {\n  webkitExitFullscreen?: () => void;\n  webkitFullscreenElement?: Element | null;\n  webkitFullscreenEnabled?: boolean;\n}\n\nfunction isSupported(): boolean {\n  return !!(\n    document.fullscreenEnabled || (document as WebkitFullscreenDocument).webkitFullscreenEnabled\n  );\n}\n\nfunction currentFullscreenElement(): Element | null {\n  return (\n    document.fullscreenElement ??\n    (document as WebkitFullscreenDocument).webkitFullscreenElement ??\n    null\n  );\n}\n\nfunction requestFullscreen(el: HTMLElement): void {\n  const target = el as WebkitFullscreenElement;\n  if (target.requestFullscreen) target.requestFullscreen().catch(() => {});\n  else target.webkitRequestFullscreen?.();\n}\n\nfunction exitFullscreen(): void {\n  const doc = document as WebkitFullscreenDocument;\n  if (document.exitFullscreen) document.exitFullscreen().catch(() => {});\n  else doc.webkitExitFullscreen?.();\n}\n\n/**\n * DESIGN.md §4 — native Fullscreen API toggle, `.shoji-outer` (`ctx.ui.outer()`,\n * the whole lightbox — backdrop, dialog, controls) is what goes fullscreen,\n * not just the slide media. No toolbar button at all — not a disabled one —\n * on a browser with no Fullscreen API support (checked once at `init()`;\n * historically Safari on iOS), rather than shipping a dead control.\n *\n * `fullscreenchange` (plus the `webkitfullscreenchange` vendor variant) is\n * the single source of truth for button state, not the click handler\n * directly — a real Fullscreen API `request`/`exit` call can be rejected\n * (permission, another element already fullscreen, etc.), and the browser's\n * own Escape-key fullscreen exit doesn't go through this plugin's click\n * handler at all. Reacting to the event instead of the request keeps the\n * button correct regardless of *why* fullscreen state changed.\n */\nexport const Fullscreen: ShojiPlugin = {\n  name: 'fullscreen',\n\n  init(ctx: PluginContext): (() => void) | void {\n    if (!isSupported()) return;\n\n    const outer = ctx.ui.outer();\n    const locale = (ctx.gallery.options.locale ?? {}) as Record<string, string>;\n    const enterLabel = locale.enterFullscreen ?? 'Enter fullscreen';\n    const exitLabel = locale.exitFullscreen ?? 'Exit fullscreen';\n\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.className = 'shoji-toolbar-button';\n    button.innerHTML = EXPAND_ICON;\n    button.setAttribute('aria-label', enterLabel);\n    button.title = enterLabel;\n    button.setAttribute('aria-pressed', 'false');\n\n    function isActive(): boolean {\n      return currentFullscreenElement() === outer;\n    }\n\n    function setState(active: boolean): void {\n      button.innerHTML = active ? COMPRESS_ICON : EXPAND_ICON;\n      button.setAttribute('aria-label', active ? exitLabel : enterLabel);\n      button.title = active ? exitLabel : enterLabel;\n      button.setAttribute('aria-pressed', String(active));\n    }\n\n    button.addEventListener('click', () => {\n      if (isActive()) exitFullscreen();\n      else requestFullscreen(outer);\n    });\n\n    const onChange = (): void => {\n      const active = isActive();\n      setState(active);\n      ctx.emit('fullscreenChange', { fullscreen: active });\n    };\n    document.addEventListener('fullscreenchange', onChange);\n    document.addEventListener('webkitfullscreenchange', onChange);\n\n    // 'right' — clusters immediately before the close button (DESIGN.md §3.1).\n    const removeButton = ctx.ui.toolbar('right', button);\n\n    // Browser-level Escape-to-exit-fullscreen behavior is inconsistent\n    // across browsers (some exit fullscreen and still deliver the page its\n    // own Escape keydown, some don't) — closing the gallery explicitly\n    // exits fullscreen too, rather than risking the page getting stuck\n    // fullscreen-on-nothing after the lightbox itself is gone.\n    const offClose = ctx.on('close', () => {\n      if (isActive()) exitFullscreen();\n    });\n\n    return () => {\n      document.removeEventListener('fullscreenchange', onChange);\n      document.removeEventListener('webkitfullscreenchange', onChange);\n      removeButton();\n      offClose();\n      if (isActive()) exitFullscreen();\n    };\n  },\n};\n"],"names":[],"mappings":"AACO,MAAM,cACX;AAEK,MAAM,gBACX;ACcF,SAAS,cAAuB;AAC9B,SAAO,CAAC,EACN,SAAS,qBAAsB,SAAsC;AAEzE;AAEA,SAAS,2BAA2C;AAClD,SACE,SAAS,qBACR,SAAsC,2BACvC;AAEJ;AAEA,SAAS,kBAAkB,IAAuB;ADhC3C;ACiCL,QAAM,SAAS;AACf,MAAI,OAAO,kBAAmB,QAAO,kBAAA,EAAoB,MAAM,MAAM;AAAA,EAAC,CAAC;AAAA,oBAC3D;AACd;AAEA,SAAS,iBAAuB;ADtCzB;ACuCL,QAAM,MAAM;AACZ,MAAI,SAAS,eAAgB,UAAS,eAAA,EAAiB,MAAM,MAAM;AAAA,EAAC,CAAC;AAAA,iBAC5D;AACX;AAiBO,MAAM,aAA0B;AAAA,EACrC,MAAM;AAAA,EAEN,KAAK,KAAyC;AAC5C,QAAI,CAAC,cAAe;AAEpB,UAAM,QAAQ,IAAI,GAAG,MAAA;AACrB,UAAM,SAAU,IAAI,QAAQ,QAAQ,UAAU,CAAA;AAC9C,UAAM,aAAa,OAAO,mBAAmB;AAC7C,UAAM,YAAY,OAAO,kBAAkB;AAE3C,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,OAAO;AACd,WAAO,YAAY;AACnB,WAAO,YAAY;AACnB,WAAO,aAAa,cAAc,UAAU;AAC5C,WAAO,QAAQ;AACf,WAAO,aAAa,gBAAgB,OAAO;AAE3C,aAAS,WAAoB;AAC3B,aAAO,+BAA+B;AAAA,IACxC;AAEA,aAAS,SAAS,QAAuB;AACvC,aAAO,YAAY,SAAS,gBAAgB;AAC5C,aAAO,aAAa,cAAc,SAAS,YAAY,UAAU;AACjE,aAAO,QAAQ,SAAS,YAAY;AACpC,aAAO,aAAa,gBAAgB,OAAO,MAAM,CAAC;AAAA,IACpD;AAEA,WAAO,iBAAiB,SAAS,MAAM;AACrC,UAAI,SAAA,EAAY,gBAAA;AAAA,6BACO,KAAK;AAAA,IAC9B,CAAC;AAED,UAAM,WAAW,MAAY;AAC3B,YAAM,SAAS,SAAA;AACf,eAAS,MAAM;AACf,UAAI,KAAK,oBAAoB,EAAE,YAAY,QAAQ;AAAA,IACrD;AACA,aAAS,iBAAiB,oBAAoB,QAAQ;AACtD,aAAS,iBAAiB,0BAA0B,QAAQ;AAG5D,UAAM,eAAe,IAAI,GAAG,QAAQ,SAAS,MAAM;AAOnD,UAAM,WAAW,IAAI,GAAG,SAAS,MAAM;AACrC,UAAI,SAAA,EAAY,gBAAA;AAAA,IAClB,CAAC;AAED,WAAO,MAAM;AACX,eAAS,oBAAoB,oBAAoB,QAAQ;AACzD,eAAS,oBAAoB,0BAA0B,QAAQ;AAC/D,mBAAA;AACA,eAAA;AACA,UAAI,SAAA,EAAY,gBAAA;AAAA,IAClB;AAAA,EACF;AACF;"}