@michaelyagi/shoji 0.1.0-alpha.10 → 0.1.0-alpha.11

package/dist/esm/core/Gallery.d.ts

@@ -50,6 +50,9 @@ export declare class Gallery {
     private readonly onOuterClick;
     /** DESIGN.md §2.8 — any interaction re-shows controls, restarts the idle clock. `autoHideDelay: 0` = "never show controls" — a no-op here. */
     private readonly onActivity;
+    /** x */
+    private controlsHiddenAtGestureStart;
+    private readonly captureGestureStartState;
     private readonly onKeydown;
     constructor(target: HTMLElement | string, options?: GalleryOptions);
     /** Everything the constructor does after `this.element` is resolved — shared with `reinit()` (§2.7). */
@@ -102,7 +105,8 @@ export declare class Gallery {
      */
     getOriginElement(index: number): HTMLElement | null;
     private scheduleAutoHide;
-    private hideControls;
+    /** Forces the same fade §2.8's idle timer would eventually trigger — public so a plugin can hide controls on its own trigger. Same `isControlActive()` guard as the timer. */
+    hideControls(): void;
     private showControls;
     /**
      * DESIGN.md §2.1 — `caption` is `string | HTMLElement | DangerousHtmlCaption`:
@@ -175,6 +179,16 @@ export declare class Gallery {
     close(): void;
     /** `item.width`/`height`, else origin's `naturalWidth`/`naturalHeight` (accurate when `item.thumb` is unset). Feeds `computeTransform`'s letterbox-aware sizing. */
     private resolveAspectRatio;
+    /**
+     * `item.width`/`height` only — deliberately never a thumbnail's own
+     * `naturalWidth`/`naturalHeight` the way `resolveAspectRatio` above will:
+     * that's a fine stand-in for *shape*, but using it as the real photo's
+     * true pixel size would under-cap a genuinely large photo down to
+     * thumbnail resolution. `undefined` here just means "genuinely unknown,"
+     * not "assume small" — `zoomTransition.ts`'s `containedBox` already
+     * treats it that way (no cap applied at all).
+     */
+    private resolveNaturalSize;
     /**
      * Idempotent on purpose: a pending zoom-out's `transitionend`/fallback
      * timeout can still fire after `destroy()` has already force-finished the

package/dist/esm/core/SlideManager.d.ts

@@ -66,7 +66,33 @@ export declare class SlideManager {
     private moveIn;
     /** Starts decoding `item` for `index`, only if nothing already is (see `pending`). Resolves by looking up whichever slot currently wants this index, not the one active when the decode started. */
     private ensureImageDecoding;
-    /** DESIGN.md §2.3 — swaps the spinner for the placeholder once *it* decodes, not immediately: `item.thumb` is often just `item.src` again, so an undecoded placeholder can leave as long a blank gap as the spinner it replaces. */
+    /**
+     * DESIGN.md §2.3 — swaps the spinner for the placeholder once *it*
+     * decodes, not immediately: `item.thumb` is often just `item.src` again,
+     * so an undecoded placeholder can leave as long a blank gap as the
+     * spinner it replaces.
+     *
+     * A real bug: `.shoji-slide-open-placeholder`'s CSS unconditionally
+     * force-fills the frame (deliberate default: a real photo is usually
+     * bigger than the dialog). Wrong for a genuinely small photo with known
+     * `item.width`/`item.height` — same "grows too big, snaps down once real"
+     * symptom the zoom-in transition itself had (§2.3b), but that fix only
+     * governs the animated *transform*, not this placeholder's own CSS box
+     * once it settles. When `naturalSize` is known, sizes the placeholder
+     * explicitly instead, reusing `containedBox` (`zoomTransition.ts`) —
+     * unknown-size items keep the original force-fill guess.
+     *
+     * A second real bug in that same fix: measured `slot.media`'s own rect as
+     * "the container" — but `slot.media` is the exact element the zoom-in
+     * transition (§2.3b) animates a `scale()` transform on. `getBoundingClientRect()`
+     * reflects whatever transform is *currently* applied, and the placeholder's
+     * own decode typically resolves before that ~300ms animation settles — so
+     * this measured a still-small, mid-animation rect (often the origin
+     * thumbnail's own tiny size) instead of the real dialog size. `slot.root`
+     * (`.shoji-slide`) fixes it: same box, only ever `translateX`'d for
+     * pool-offset positioning, never scaled — a stable read regardless of
+     * what its child is mid-animation through.
+     */
     private revealOpenPlaceholder;
     /** Native `<video controls>` — real playback, not just a poster. Not autoplayed/muted: a deliberate click-to-play, not a background loop. */
     private renderVideo;

package/dist/esm/core/index.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { w as waitForTransitionEnd, z as zoomIn, a as zoomOut } from "../zoomTransition-bbKHpVpA.js";
+import { w as waitForTransitionEnd, c as containedBox, z as zoomIn, a as zoomOut } from "../zoomTransition-2_HG7tyJ.js";
 let lockCount = 0;
 let savedOverflow = "";
 let savedHtmlOverflow = "";
@@ -785,7 +785,8 @@ class SlideManager {
       releaseVideo(slot.media);
       slot.media.replaceChildren(createSpinner());
       if (index === centerIndex && openPlaceholderSrc) {
-        this.revealOpenPlaceholder(openPlaceholderSrc, slot, index);
+        const naturalSize = item.width && item.height ? { width: item.width, height: item.height } : void 0;
+        this.revealOpenPlaceholder(openPlaceholderSrc, slot, index, naturalSize);
       }
       if (((_a = item.video) == null ? void 0 : _a.provider) === "html5") {
         this.renderVideo(item, slot, index, onLoad);
@@ -854,14 +855,50 @@ class SlideManager {
       img.addEventListener("error", reveal, { once: true });
     }
   }
-  /** DESIGN.md §2.3 — swaps the spinner for the placeholder once *it* decodes, not immediately: `item.thumb` is often just `item.src` again, so an undecoded placeholder can leave as long a blank gap as the spinner it replaces. */
-  revealOpenPlaceholder(src, slot, index) {
+  /**
+   * DESIGN.md §2.3 — swaps the spinner for the placeholder once *it*
+   * decodes, not immediately: `item.thumb` is often just `item.src` again,
+   * so an undecoded placeholder can leave as long a blank gap as the
+   * spinner it replaces.
+   *
+   * A real bug: `.shoji-slide-open-placeholder`'s CSS unconditionally
+   * force-fills the frame (deliberate default: a real photo is usually
+   * bigger than the dialog). Wrong for a genuinely small photo with known
+   * `item.width`/`item.height` — same "grows too big, snaps down once real"
+   * symptom the zoom-in transition itself had (§2.3b), but that fix only
+   * governs the animated *transform*, not this placeholder's own CSS box
+   * once it settles. When `naturalSize` is known, sizes the placeholder
+   * explicitly instead, reusing `containedBox` (`zoomTransition.ts`) —
+   * unknown-size items keep the original force-fill guess.
+   *
+   * A second real bug in that same fix: measured `slot.media`'s own rect as
+   * "the container" — but `slot.media` is the exact element the zoom-in
+   * transition (§2.3b) animates a `scale()` transform on. `getBoundingClientRect()`
+   * reflects whatever transform is *currently* applied, and the placeholder's
+   * own decode typically resolves before that ~300ms animation settles — so
+   * this measured a still-small, mid-animation rect (often the origin
+   * thumbnail's own tiny size) instead of the real dialog size. `slot.root`
+   * (`.shoji-slide`) fixes it: same box, only ever `translateX`'d for
+   * pool-offset positioning, never scaled — a stable read regardless of
+   * what its child is mid-animation through.
+   */
+  revealOpenPlaceholder(src, slot, index, naturalSize) {
     const img = createOpenPlaceholder(src);
     const reveal = () => {
       var _a;
       if (slot.assignedIndex !== index || slot.ready) return;
       (_a = slot.media.querySelector(".shoji-slide-spinner")) == null ? void 0 : _a.remove();
       slot.media.appendChild(img);
+      if (naturalSize) {
+        const containerRect = slot.root.getBoundingClientRect();
+        const box = containedBox(
+          { left: 0, top: 0, width: containerRect.width, height: containerRect.height },
+          naturalSize.width / naturalSize.height,
+          naturalSize
+        );
+        img.style.width = `${box.width}px`;
+        img.style.height = `${box.height}px`;
+      }
     };
     if (typeof img.decode === "function") {
       img.decode().then(reveal, reveal);
@@ -1375,6 +1412,11 @@ class Gallery {
       this.showControls();
       this.scheduleAutoHide();
     });
+    /** x */
+    __publicField(this, "controlsHiddenAtGestureStart", false);
+    __publicField(this, "captureGestureStartState", () => {
+      this.controlsHiddenAtGestureStart = this.autoHidden;
+    });
     __publicField(this, "onKeydown", (event) => {
       if (document.activeElement instanceof HTMLVideoElement && event.key !== "Escape") return;
       this.onActivity();
@@ -1506,6 +1548,7 @@ class Gallery {
     });
     dom.outer.addEventListener("click", this.onOuterClick);
     dom.outer.addEventListener("pointermove", this.onActivity, { passive: true });
+    dom.outer.addEventListener("pointerdown", this.captureGestureStartState, { passive: true });
     dom.outer.addEventListener("pointerdown", this.onActivity, { passive: true });
     dom.outer.addEventListener("touchstart", this.onActivity, { passive: true });
     dom.outer.addEventListener("wheel", this.onActivity, { passive: true });
@@ -1545,7 +1588,11 @@ class Gallery {
         }
       },
       {
-        onTap: (x, y) => this.bus.emit("tap", { x, y }),
+        onTap: (x, y) => this.bus.emit("tap", {
+          x,
+          y,
+          controlsWereHidden: this.controlsHiddenAtGestureStart
+        }),
         onDoubleTap: (x, y) => this.bus.emit("doubleTap", { x, y }),
         onPinchStart: (centerX, centerY) => this.bus.emit("pinchStart", { centerX, centerY }),
         onPinchMove: (scale, centerX, centerY) => this.bus.emit("pinchMove", { scale, centerX, centerY }),
@@ -1720,6 +1767,7 @@ class Gallery {
     }
     this.autoHideTimer = setTimeout(() => this.hideControls(), this.autoHideDelay);
   }
+  /** Forces the same fade §2.8's idle timer would eventually trigger — public so a plugin can hide controls on its own trigger. Same `isControlActive()` guard as the timer. */
   hideControls() {
     if (!this.dom || this.autoHidden || this.isControlActive()) return;
     this.autoHidden = true;
@@ -1832,15 +1880,23 @@ class Gallery {
     this.captionVisibleOnVideo = !!this.options.showVideoCaption;
     lockBodyScroll();
     const origin = this.getOriginElement(index);
-    this.renderCurrentSlide(this.resolveOpenPlaceholderSrc(this.itemList[index], origin));
+    const naturalSize = this.resolveNaturalSize(index);
+    this.renderCurrentSlide(
+      naturalSize ? this.resolveOpenPlaceholderSrc(this.itemList[index], origin) : void 0
+    );
     this.dom.outer.classList.add("shoji-open");
     document.addEventListener("keydown", this.onKeydown);
     this.focusTrap.activate(this.dom.dialog);
     this.scheduleAutoHide();
     this.applyMobileControlsSetting();
     const media = (_a = this.slides) == null ? void 0 : _a.getActiveMedia();
-    if (media && origin) {
-      zoomIn({ origin, target: media, aspectRatio: this.resolveAspectRatio(index, origin) });
+    if (media && origin && naturalSize) {
+      zoomIn({
+        origin,
+        target: media,
+        aspectRatio: this.resolveAspectRatio(index, origin),
+        naturalSize
+      });
     }
     this.bus.emit("open", { index });
     this.bus.emit("afterOpen", { index });
@@ -1940,16 +1996,17 @@ class Gallery {
     }
   }
   close() {
-    var _a;
+    var _a, _b;
     if (this.destroyed || !this.opened || this.isClosing) return;
     this.bus.emit("beforeClose", {});
     this.isClosing = true;
     const media = (_a = this.slides) == null ? void 0 : _a.getActiveMedia();
     pauseMedia(media ?? null);
     const origin = this.getOriginElement(this.activeIndex);
-    if (media && origin) {
+    const naturalSize = this.resolveNaturalSize(this.activeIndex);
+    if (media && origin && (((_b = this.slides) == null ? void 0 : _b.isActiveReady()) || naturalSize)) {
       const aspectRatio = this.resolveAspectRatio(this.activeIndex, origin);
-      zoomOut({ origin, target: media, aspectRatio }, () => this.finishClose());
+      zoomOut({ origin, target: media, aspectRatio, naturalSize }, () => this.finishClose());
     } else {
       this.finishClose();
     }
@@ -1964,6 +2021,19 @@ class Gallery {
     }
     return void 0;
   }
+  /**
+   * `item.width`/`height` only — deliberately never a thumbnail's own
+   * `naturalWidth`/`naturalHeight` the way `resolveAspectRatio` above will:
+   * that's a fine stand-in for *shape*, but using it as the real photo's
+   * true pixel size would under-cap a genuinely large photo down to
+   * thumbnail resolution. `undefined` here just means "genuinely unknown,"
+   * not "assume small" — `zoomTransition.ts`'s `containedBox` already
+   * treats it that way (no cap applied at all).
+   */
+  resolveNaturalSize(index) {
+    const item = this.itemList[index];
+    return (item == null ? void 0 : item.width) && item.height ? { width: item.width, height: item.height } : void 0;
+  }
   /**
    * Idempotent on purpose: a pending zoom-out's `transitionend`/fallback
    * timeout can still fire after `destroy()` has already force-finished the