@michaelyagi/shoji 0.1.0-beta.15 → 0.1.0-beta.17

package/dist/core/shoji-core.js

@@ -519,7 +519,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const child = target.firstElementChild;
     const isPlaceholder = child instanceof HTMLElement && (child.classList.contains("shoji-slide-spinner") || child.classList.contains("shoji-slide-open-placeholder"));
     if (child instanceof HTMLElement && !isPlaceholder) {
-      const rect = child.getBoundingClientRect();
+      const measureTarget = child.classList.contains("shoji-slide-provider-video") ? child.querySelector(".shoji-video-mount, iframe") ?? child : child;
+      const rect = measureTarget.getBoundingClientRect();
       if (rect.width > 0 && rect.height > 0) return rect;
     }
     const containerRect = target.getBoundingClientRect();
@@ -528,11 +529,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return containerRect;
   }
-  function transformBetween(from, to) {
+  function transformBetween(pivot, from, to) {
     const scale = Math.min(to.width / from.width, to.height / from.height);
-    const translateX = to.left + to.width / 2 - (from.left + from.width / 2);
-    const translateY = to.top + to.height / 2 - (from.top + from.height / 2);
-    return `translate3d(${translateX}px, ${translateY}px, 0) scale3d(${scale}, ${scale}, 1)`;
+    return transformString(pivot, from, to, scale, scale);
+  }
+  function transformBetweenStretch(pivot, from, to) {
+    return transformString(pivot, from, to, to.width / from.width, to.height / from.height);
+  }
+  function transformString(pivot, from, to, scaleX, scaleY) {
+    const pivotX = pivot.left + pivot.width / 2;
+    const pivotY = pivot.top + pivot.height / 2;
+    const fromX = from.left + from.width / 2;
+    const fromY = from.top + from.height / 2;
+    const toX = to.left + to.width / 2;
+    const toY = to.top + to.height / 2;
+    const translateX = toX - pivotX - scaleX * (fromX - pivotX);
+    const translateY = toY - pivotY - scaleY * (fromY - pivotY);
+    return `translate3d(${translateX}px, ${translateY}px, 0) scale3d(${scaleX}, ${scaleY}, 1)`;
   }
   function effectiveOriginBox(origin) {
     const img = origin.querySelector("img");
@@ -542,14 +555,34 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return origin.getBoundingClientRect();
   }
-  function computeTransform(origin, target, aspectRatio, naturalSize) {
+  const ASPECT_MISMATCH_THRESHOLD = 2;
+  function hasRealTargetContent(target) {
+    const child = target.firstElementChild;
+    const isPlaceholder = child instanceof HTMLElement && (child.classList.contains("shoji-slide-spinner") || child.classList.contains("shoji-slide-open-placeholder"));
+    if (!(child instanceof HTMLElement) || isPlaceholder) return false;
+    const rect = child.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+  }
+  function computeTransformOutcome(origin, target, direction, aspectRatio, naturalSize) {
     const originRect = effectiveOriginBox(origin);
     const targetRect = effectiveTargetBox(target, aspectRatio, naturalSize);
+    const pivotRect = target.getBoundingClientRect();
     if (targetRect.width === 0 || targetRect.height === 0 || originRect.width === 0 || originRect.height === 0) {
-      return null;
+      return { kind: "none" };
+    }
+    const unknownTargetSize = !naturalSize && !hasRealTargetContent(target);
+    if (unknownTargetSize) {
+      return { kind: "fade", transform: transformBetween(pivotRect, targetRect, originRect) };
     }
-    return transformBetween(targetRect, originRect);
+    const originRatio = originRect.width / originRect.height;
+    const targetRatio = targetRect.width / targetRect.height;
+    const ratioOfRatios = Math.max(originRatio, targetRatio) / Math.min(originRatio, targetRatio);
+    const isMismatch = direction === "out" && ratioOfRatios > ASPECT_MISMATCH_THRESHOLD;
+    const transform = isMismatch ? transformBetweenStretch(pivotRect, targetRect, originRect) : transformBetween(pivotRect, targetRect, originRect);
+    return isMismatch ? { kind: "fade", transform } : { kind: "zoom", transform };
   }
+  const FADE_IN_TRANSITION = "transform var(--shoji-duration) var(--shoji-easing), opacity var(--shoji-fade-duration, 120ms) var(--shoji-easing)";
+  const FADE_OUT_TRANSITION = "transform var(--shoji-duration) var(--shoji-easing), opacity var(--shoji-fade-duration, 120ms) var(--shoji-easing) calc(var(--shoji-duration) - var(--shoji-fade-duration, 120ms))";
   function waitForTransitionEnd(target, cb, property = "transform") {
     const durationMs = parseCssTime$1(getComputedStyle(target).transitionDuration);
     let done = false;
@@ -574,15 +607,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }
   function zoomIn({ origin, target, aspectRatio, naturalSize }) {
     if (prefersReducedMotion$1()) return;
-    const transform = computeTransform(origin, target, aspectRatio, naturalSize);
-    if (!transform) return;
+    const outcome = computeTransformOutcome(origin, target, "in", aspectRatio, naturalSize);
+    if (outcome.kind === "none") return;
+    const { transform } = outcome;
+    const isFade = outcome.kind === "fade";
     target.style.transition = "none";
     target.style.transformOrigin = "center";
-    target.style.willChange = "transform";
+    target.style.willChange = isFade ? "transform, opacity" : "transform";
     target.style.transform = transform;
+    if (isFade) target.style.opacity = "0";
     void target.offsetHeight;
-    target.style.transition = "transform var(--shoji-duration) var(--shoji-easing)";
+    target.style.transition = isFade ? FADE_IN_TRANSITION : "transform var(--shoji-duration) var(--shoji-easing)";
     target.style.transform = "none";
+    if (isFade) target.style.opacity = "1";
     waitForTransitionEnd(target, () => clearInlineTransform$1(target, "none"));
   }
   function zoomOut({ origin, target, aspectRatio, naturalSize, dragStart, zoomStart }, onComplete) {
@@ -590,13 +627,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       onComplete();
       return;
     }
-    const transform = computeTransform(origin, target, aspectRatio, naturalSize);
-    if (!transform) {
+    const outcome = computeTransformOutcome(origin, target, "out", aspectRatio, naturalSize);
+    if (outcome.kind === "none") {
       onComplete();
       return;
     }
+    const { transform } = outcome;
+    const isFade = outcome.kind === "fade";
     target.style.transformOrigin = "center";
-    target.style.willChange = "transform";
+    target.style.willChange = isFade ? "transform, opacity" : "transform";
     if (dragStart) {
       target.style.transition = "none";
       target.style.transform = `translate3d(0px, ${dragStart.translateY}px, 0px) scale3d(${dragStart.scale}, ${dragStart.scale}, 1)`;
@@ -606,15 +645,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const targetRect = effectiveTargetBox(target, aspectRatio, naturalSize);
       if (targetRect.width > 0 && targetRect.height > 0) {
         const existing = target.style.transform;
-        const jump = transformBetween(targetRect, zoomStart);
+        const jump = transformBetween(target.getBoundingClientRect(), targetRect, zoomStart);
         target.style.transition = "none";
         target.style.transform = existing && existing !== "none" ? `${existing} ${jump}` : jump;
         void target.offsetHeight;
       }
     }
-    target.style.transition = "transform var(--shoji-duration) var(--shoji-easing)";
+    target.style.transition = isFade ? FADE_OUT_TRANSITION : "transform var(--shoji-duration) var(--shoji-easing)";
     void target.offsetHeight;
     target.style.transform = transform;
+    if (isFade) target.style.opacity = "0";
     const appliedTransform = target.style.transform;
     waitForTransitionEnd(target, () => {
       clearInlineTransform$1(target, appliedTransform);
@@ -831,7 +871,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const n = Number(raw);
     return Number.isFinite(n) ? n : void 0;
   }
-  const NO_OWN_DATA_FIELD = /* @__PURE__ */ new Set(["no-drag", "video-id", "video-provider"]);
+  const NO_OWN_DATA_FIELD = /* @__PURE__ */ new Set([
+    "no-drag",
+    "video-id",
+    "video-provider",
+    "thumbnail-width",
+    "thumbnail-height"
+  ]);
   function applyCommon(element, item, src) {
     const caption = attr(element, "data-shoji-caption");
     if (caption) item.caption = caption;
@@ -857,6 +903,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     if (width !== void 0) item.width = width;
     const height = numAttr(element, "data-shoji-height");
     if (height !== void 0) item.height = height;
+    const thumbnailWidth = numAttr(element, "data-shoji-thumbnail-width");
+    if (thumbnailWidth !== void 0) item.thumbnailWidth = thumbnailWidth;
+    const thumbnailHeight = numAttr(element, "data-shoji-thumbnail-height");
+    if (thumbnailHeight !== void 0) item.thumbnailHeight = thumbnailHeight;
     const srcset = attr(element, "data-shoji-srcset");
     if (srcset) item.srcset = srcset;
     const sizes = attr(element, "data-shoji-sizes");
@@ -1112,8 +1162,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         slot.root.style.transform = `translateX(calc(${slot.offset * 100}% + ${this.dragOffsetPx}px))`;
       }
     }
-    /** Re-renders whichever slots need a different item; `onLoad` fires per index once its media settles. `openPlaceholderSrc` (only from `Gallery.open()`) swaps the centerIndex slot's spinner for a low-res placeholder once it decodes, if not already ready. `loop` matches `Gallery.ts`'s own `nextIndex()`/`prevIndex()` wrap-around — without it, the pool slot just past the last (or before the first) item has no item to preload at all, so a boundary drag reveals nothing even though the completed navigation itself already wraps correctly. */
-    render(items, centerIndex, onLoad, openPlaceholderSrc, loop = false) {
+    /** Re-renders whichever slots need a different item; `onLoad` fires per index once its media settles. `openPlaceholderSrc` (only from `Gallery.open()`) swaps the centerIndex slot's spinner for a low-res placeholder once it decodes, if not already ready; `onOpenPlaceholderReady` fires once that swap happens (`Gallery.ts`'s `beginZoom` doc comment explains why). `openPlaceholderAlreadyVisible` (`Gallery.ts`'s own doc comment on it) skips that decode wait entirely when it's not actually needed. `loop` matches `Gallery.ts`'s own `nextIndex()`/`prevIndex()` wrap-around — without it, the pool slot just past the last (or before the first) item has no item to preload at all, so a boundary drag reveals nothing even though the completed navigation itself already wraps correctly. */
+    render(items, centerIndex, onLoad, openPlaceholderSrc, loop = false, onOpenPlaceholderReady, openPlaceholderAlreadyVisible = false) {
       const canWrap = loop && items.length > this.slots.length;
       const targets = this.slots.map((_, i) => {
         const offset = i - this.preload;
@@ -1163,7 +1213,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         this.applyAspect(slot, item);
         if (index === centerIndex && openPlaceholderSrc) {
           const naturalSize = item.width && item.height ? { width: item.width, height: item.height } : void 0;
-          this.revealOpenPlaceholder(openPlaceholderSrc, slot, index, naturalSize);
+          const aspectRatio = item.thumbnailWidth && item.thumbnailHeight ? item.thumbnailWidth / item.thumbnailHeight : naturalSize && naturalSize.width / naturalSize.height;
+          this.revealOpenPlaceholder(
+            openPlaceholderSrc,
+            slot,
+            index,
+            naturalSize,
+            aspectRatio,
+            onOpenPlaceholderReady,
+            openPlaceholderAlreadyVisible
+          );
         }
         if (((_a = item.video) == null ? void 0 : _a.provider) === "html5") {
           this.renderVideo(item, slot, index, onLoad);
@@ -1264,25 +1323,41 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
      * (`.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.
+     *
+     * A third real bug: `aspectRatio` (the box's *shape*) must come from the
+     * thumbnail's own aspect (`item.thumbnailWidth`/`thumbnailHeight` when
+     * declared, the caller's own doc comment on this call explains the
+     * priority) — this image's actual pixels are the thumbnail's, and sizing
+     * the box to `naturalSize`'s aspect (the real photo's) instead left most
+     * of it transparent whenever the two differ, `object-fit: contain`
+     * letterboxing the real thumbnail content down to a thin strip inside a
+     * wrongly-shaped box (DESIGN.md §2.3b).
      */
-    revealOpenPlaceholder(src, slot, index, naturalSize) {
+    revealOpenPlaceholder(src, slot, index, naturalSize, aspectRatio, onReady, alreadyVisible = false) {
       const img = createOpenPlaceholder(src);
       const reveal = () => {
-        if (slot.assignedIndex !== index || slot.ready) return;
+        if (slot.assignedIndex !== index) return;
+        if (slot.ready) {
+          onReady == null ? void 0 : onReady();
+          return;
+        }
         slot.media.querySelectorAll(".shoji-slide-spinner, .shoji-slide-provider-poster").forEach((el) => el.remove());
         slot.media.appendChild(img);
-        if (naturalSize) {
+        if (aspectRatio) {
           const containerRect = slot.root.getBoundingClientRect();
           const box = containedBox(
             { left: 0, top: 0, width: containerRect.width, height: containerRect.height },
-            naturalSize.width / naturalSize.height,
+            aspectRatio,
             naturalSize
           );
           img.style.width = `${box.width}px`;
           img.style.height = `${box.height}px`;
         }
+        onReady == null ? void 0 : onReady();
       };
-      if (typeof img.decode === "function") {
+      if (alreadyVisible) {
+        queueMicrotask(reveal);
+      } else if (typeof img.decode === "function") {
         img.decode().then(reveal, reveal);
       } else {
         img.addEventListener("load", reveal, { once: true });
@@ -2890,7 +2965,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.onActivity();
       this.bus.emit("captionModalChange", { open: false });
     }
-    renderCurrentSlide(openPlaceholderSrc) {
+    /** `onCenterContentVisible` — only `open()` passes this, to start the zoom-in once something real is actually visible (its own `beginZoom` doc comment). */
+    renderCurrentSlide(openPlaceholderSrc, onCenterContentVisible, openPlaceholderAlreadyVisible = false) {
       if (!this.slides || !this.dom) return;
       const dom = this.dom;
       this.slides.render(
@@ -2901,10 +2977,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             this.bus.emit("slideItemLoad", { index: loadedIndex });
             this.setSlideLoading(false);
             if (!this.captionFadePending) this.updateCaptionVisibility();
+            onCenterContentVisible == null ? void 0 : onCenterContentVisible();
           }
         },
         openPlaceholderSrc,
-        this.loop
+        this.loop,
+        onCenterContentVisible,
+        openPlaceholderAlreadyVisible
       );
       this.setSlideLoading(!this.slides.isActiveReady());
       const item = this.itemList[this.activeIndex];
@@ -2935,27 +3014,39 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         this.captionFadePending = true;
         this.dom.caption.style.opacity = "0";
       }
+      const openPlaceholderSrc = naturalSize && !((_a = this.itemList[index]) == null ? void 0 : _a.video) ? this.resolveOpenPlaceholderSrc(this.itemList[index], origin) : void 0;
+      const originImg = origin == null ? void 0 : origin.querySelector("img");
+      const openPlaceholderAlreadyVisible = !!openPlaceholderSrc && !!originImg && (originImg.currentSrc || originImg.src) === openPlaceholderSrc;
+      let zoomStarted = false;
+      const beginZoom = () => {
+        var _a2;
+        if (zoomStarted) return;
+        zoomStarted = true;
+        const media = (_a2 = this.slides) == null ? void 0 : _a2.getActiveMedia();
+        if (media && origin) {
+          zoomIn({
+            origin,
+            target: media,
+            aspectRatio: this.resolveAspectRatio(index, origin),
+            naturalSize
+          });
+        }
+        if (fadeInOnOpen && this.dom) {
+          this.captionFadePending = false;
+          this.updateCaptionVisibility();
+          this.dom.caption.style.opacity = "";
+        }
+      };
       this.renderCurrentSlide(
-        naturalSize && !((_a = this.itemList[index]) == null ? void 0 : _a.video) ? this.resolveOpenPlaceholderSrc(this.itemList[index], origin) : void 0
+        openPlaceholderSrc,
+        openPlaceholderSrc ? beginZoom : void 0,
+        openPlaceholderAlreadyVisible
       );
       this.dom.outer.classList.add("shoji-open");
       document.addEventListener("keydown", this.onKeydown);
       this.focusTrap.activate(this.dom.dialog);
       this.scheduleAutoHide();
-      const media = (_b = this.slides) == null ? void 0 : _b.getActiveMedia();
-      if (media && origin && naturalSize) {
-        zoomIn({
-          origin,
-          target: media,
-          aspectRatio: this.resolveAspectRatio(index, origin),
-          naturalSize
-        });
-      }
-      if (fadeInOnOpen && this.dom) {
-        this.captionFadePending = false;
-        this.updateCaptionVisibility();
-        this.dom.caption.style.opacity = "";
-      }
+      if (!openPlaceholderSrc || ((_b = this.slides) == null ? void 0 : _b.isActiveReady())) beginZoom();
       this.bus.emit("open", { index });
       this.bus.emit("afterOpen", { index });
     }
@@ -3127,9 +3218,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       (_a = this.dom) == null ? void 0 : _a.dialog.classList.toggle("shoji-controls-hidden-for-drag", hidden);
       this.bus.emit("dragCloseThreshold", { hidden });
     }
-    /** `item.width`/`height`, else origin's `naturalWidth`/`naturalHeight` (accurate when `item.thumb` is unset). Feeds `computeTransform`'s letterbox-aware sizing. */
+    /** `item.thumbnailWidth`/`thumbnailHeight` (the thumbnail's own true shape) first, else `item.width`/`height` (the photo's), else origin's live `naturalWidth`/`naturalHeight`. Shape only — see `resolveNaturalSize` for why the size cap below uses the opposite order. DESIGN.md §2.3b (sixteenth/seventeenth entries). */
     resolveAspectRatio(index, origin) {
       const item = this.itemList[index];
+      if ((item == null ? void 0 : item.thumbnailWidth) && item.thumbnailHeight) {
+        return item.thumbnailWidth / item.thumbnailHeight;
+      }
       if ((item == null ? void 0 : item.width) && item.height) return item.width / item.height;
       const thumbImg = origin == null ? void 0 : origin.querySelector("img");
       if ((thumbImg == null ? void 0 : thumbImg.naturalWidth) && thumbImg.naturalHeight) {
@@ -3137,18 +3231,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       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).
-     */
+    /** `item.width`/`height` (the real photo) first, `item.thumbnailWidth`/`thumbnailHeight` only once that's unknown too — opposite priority from `resolveAspectRatio` on purpose: this only caps the placeholder's *size*, never its shape, so preferring the real (usually larger) photo size is never a distortion risk, and is what lets the placeholder grow to a properly large size instead of the thumbnail's own tiny one. DESIGN.md §2.3b (seventeenth entry) has the real bug this fixed. */
     resolveNaturalSize(index) {
       const item = this.itemList[index];
-      return (item == null ? void 0 : item.width) && item.height ? { width: item.width, height: item.height } : void 0;
+      if ((item == null ? void 0 : item.width) && item.height) return { width: item.width, height: item.height };
+      if ((item == null ? void 0 : item.thumbnailWidth) && item.thumbnailHeight) {
+        return { width: item.thumbnailWidth, height: item.thumbnailHeight };
+      }
+      return void 0;
     }
     /**
      * Idempotent on purpose: a pending zoom-out's `transitionend`/fallback