@michaelyagi/shoji 0.1.0-beta.5 → 0.1.0-beta.7

package/README.md

@@ -3,9 +3,9 @@
 [![CI](https://github.com/MichaelYagi/shoji/actions/workflows/ci.yml/badge.svg)](https://github.com/MichaelYagi/shoji/actions/workflows/ci.yml)
 [![npm (beta)](https://img.shields.io/npm/v/%40michaelyagi%2Fshoji/beta.svg)](https://www.npmjs.com/package/@michaelyagi/shoji)
 
-A zero-dependency, plugin-first TypeScript lightbox/gallery. Drop in two `<script>`/`<link>` tags, or install from npm — everything beyond the minimal lightbox, including every official plugin, is opt-in.
+> **AI-authored.** 100% of the code was written by Claude (Anthropic); I shaped the architecture, scope, and every decision, and did all the testing.
 
-> **Status: beta.** The API is still settling — expect breaking changes between `0.x` releases.
+A zero-dependency, plugin-first TypeScript lightbox/gallery. Drop in two `<script>`/`<link>` tags, or install from npm — everything beyond the minimal lightbox, including every official plugin, is opt-in.
 
 ## Features
 
@@ -14,7 +14,7 @@ A zero-dependency, plugin-first TypeScript lightbox/gallery. Drop in two `<scrip
 - **Plugin system** — zoom (pinch/pan/wheel), fullscreen, rotate/flip, autoplay/slideshow, active-thumbnail sync, YouTube video embeds, and a grid/masonry/justified layout engine, each independently opt-in.
 - **Accessibility is not a plugin** — keyboard nav, focus trapping, ARIA roles, and screen-reader announcements live in core.
 - **Themeable via CSS custom properties** — no hardcoded colors/sizes in JS.
-- **Single-file distribution** — `dist/shoji.js` + `dist/shoji.css` (core + every official plugin, self-registering) for zero-setup `<script>` tag use, plus tree-shakable per-plugin ESM entries for bundler users.
+- **Three distributions** — single-file (`dist/shoji.js` + `dist/shoji.css`, core + every plugin, self-registering) for zero-setup `<script>` tag use; core + individual plugin files (`dist/core/shoji-core.(min.)js` + `dist/plugins/{name}.(min.)js`) for `<script>`-tag consumers who want to pick exactly which plugins ship; and tree-shakable per-plugin ESM entries for bundler users.
 - Size-budgeted and CI-enforced: core ≤ 21 kB, each plugin ≤ 8 kB, full bundle ≤ 90 kB (all min+gzip).
 
 ## Install

package/dist/core/shoji-core.js

@@ -534,8 +534,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const translateY = to.top + to.height / 2 - (from.top + from.height / 2);
     return `translate3d(${translateX}px, ${translateY}px, 0) scale3d(${scale}, ${scale}, 1)`;
   }
+  function effectiveOriginBox(origin) {
+    const img = origin.querySelector("img");
+    if (img) {
+      const rect = img.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) return rect;
+    }
+    return origin.getBoundingClientRect();
+  }
   function computeTransform(origin, target, aspectRatio, naturalSize) {
-    const originRect = origin.getBoundingClientRect();
+    const originRect = effectiveOriginBox(origin);
     const targetRect = effectiveTargetBox(target, aspectRatio, naturalSize);
     if (targetRect.width === 0 || targetRect.height === 0 || originRect.width === 0 || originRect.height === 0) {
       return null;
@@ -1894,6 +1902,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "captureGestureStartState", () => {
         this.controlsHiddenAtGestureStart = this.autoHidden;
       });
+      /**
+       * A real mobile bug (DESIGN.md §2.6a): after scrolling far enough to
+       * collapse a mobile browser's own URL bar, `window.innerHeight` grows
+       * but `.shoji-outer`'s painted size didn't follow, off-centering the
+       * photo. `visualViewport.height` reflects the true visible area;
+       * `window`'s `resize` is the fallback where it's unsupported.
+       */
+      __publicField(this, "syncViewportHeight", () => {
+        var _a;
+        if (!this.dom) return;
+        const height = ((_a = window.visualViewport) == null ? void 0 : _a.height) ?? window.innerHeight;
+        this.dom.outer.style.height = `${height}px`;
+      });
       __publicField(this, "onKeydown", (event) => {
         if (document.activeElement instanceof HTMLVideoElement && event.key !== "Escape") return;
         this.onActivity();
@@ -2931,6 +2952,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         naturalSize && !((_a = this.itemList[index]) == null ? void 0 : _a.video) ? this.resolveOpenPlaceholderSrc(this.itemList[index], origin) : void 0
       );
       this.dom.outer.classList.add("shoji-open");
+      this.syncViewportHeight();
+      if (window.visualViewport)
+        window.visualViewport.addEventListener("resize", this.syncViewportHeight);
+      else window.addEventListener("resize", this.syncViewportHeight);
       document.addEventListener("keydown", this.onKeydown);
       this.focusTrap.activate(this.dom.dialog);
       this.scheduleAutoHide();
@@ -3155,8 +3180,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.opened = false;
       unlockBodyScroll();
       document.removeEventListener("keydown", this.onKeydown);
+      if (window.visualViewport)
+        window.visualViewport.removeEventListener("resize", this.syncViewportHeight);
+      else window.removeEventListener("resize", this.syncViewportHeight);
       this.focusTrap.deactivate();
       (_a = this.dom) == null ? void 0 : _a.outer.classList.remove("shoji-open");
+      if (this.dom) this.dom.outer.style.height = "";
       if (this.dom) this.dom.backdrop.style.opacity = "";
       if (this.autoHideTimer !== null) {
         clearTimeout(this.autoHideTimer);