hd-garden 0.9.0 → 0.9.2

package/app/components/bookshelf/engine.ts

@@ -38,8 +38,11 @@ function injectExtraCovers(catalog) {
 }
 
 export function mountBookshelf(root, options = {}) {
+  // A passed catalog is a site shelf. Demo notes and demo copy stay on the
+  // package preview, which mounts this with no catalog.
   const CATALOG = options.catalog ?? DEMO_CATALOG;
-  const NOTES = options.notes ?? DEMO_NOTES;
+  const NOTES = options.notes ?? (options.catalog ? {} : DEMO_NOTES);
+  const usingDemo = !options.catalog;
   const removeExtraCovers = injectExtraCovers(CATALOG);
 
   // ux26: per-book cover dominant (= existing bk-* spine colors) for open-shell + page wash
@@ -100,8 +103,11 @@ export function mountBookshelf(root, options = {}) {
 
   function bookShellHex(book) {
     if (!book) return "#5a6a88";
-    if (book.filler === "sand") return COVER_SHELL.sand;
+    if (book.filler === "sand" || book.filler === true) return COVER_SHELL.sand;
     if (book.filler === "cream") return COVER_SHELL.cream;
+    // Site books carry the sampled cover color. Demo jackets keep COVER_SHELL.
+    const color = typeof book.color === "string" ? book.color.trim() : "";
+    if (/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)) return color;
     return COVER_SHELL[book.id] || "#5a6a88";
   }
 
@@ -171,6 +177,9 @@ export function mountBookshelf(root, options = {}) {
   function noteSummaryText(book) {
     const key = book && book.note;
     const note = key ? NOTES[key] : null;
+    if (note && typeof note.summary === "string" && note.summary.trim()) {
+      return note.summary.trim().replace(/\s+/g, " ");
+    }
     if (note && note.body) {
       let text = plainFromHtml(note.body);
       // Prefer first real sentence-ish chunk after stripping headings noise
@@ -179,6 +188,7 @@ export function mountBookshelf(root, options = {}) {
       if (text.length >= 24) return text;
     }
     const who = book && book.author ? ` · ${book.author}` : "";
+    if (!usingDemo) return (book && (book.author || book.title)) || "";
     return `《${book.title}》的读书笔记摘要${who}。正式站会换成完整笔记；Demo 先占这一页。`;
   }
 
@@ -190,7 +200,11 @@ export function mountBookshelf(root, options = {}) {
 
   function rightPageHtml(book) {
     const summary = escapeHtml(noteSummaryText(book));
-    return `<div class="flyer-page-kicker">读书笔记</div><p class="flyer-page-summary">${summary}</p>`;
+    const href = book && typeof book.href === "string" ? book.href : "";
+    const more = href
+      ? `<a class="flyer-page-more" href="${escapeHtml(href)}">阅读全文</a>`
+      : "";
+    return `<div class="flyer-page-kicker">读书笔记</div><p class="flyer-page-summary">${summary}</p>${more}`;
   }
 
 
@@ -298,6 +312,30 @@ export function mountBookshelf(root, options = {}) {
     return Math.max(96, Math.round(w * (nat.h / nat.w)));
   }
 
+  // Real jacket on the expanded spine. CSS background-image is stripped by
+  // `.spine[class*="img-"] { background-image: none !important }` and by the
+  // collapse rule, which left bk-* (#513688) as a solid pad at extract start.
+  function mountSeatCover(el, book) {
+    if (!el || !book || !book.cover || book.filler) return;
+    el.style.backgroundColor = "transparent";
+    let art = el.querySelector(":scope > .cover-art");
+    if (!art) {
+      art = document.createElement("img");
+      art.className = "cover-art";
+      art.alt = "";
+      art.draggable = false;
+      el.appendChild(art);
+    }
+    const src = coverSrc(book);
+    if (art.getAttribute("src") !== src) art.src = src;
+  }
+
+  function clearSeatCover(el) {
+    if (!el || !el.classList.contains("spine")) return;
+    el.querySelectorAll(":scope > .cover-art").forEach((node) => node.remove());
+    try { el.style.removeProperty("background-color"); } catch (_) {}
+  }
+
   function applyFaceSize(el, book, { expanded = false } = {}) {
     if (!el || !book) return;
     const faceH = bookFaceHeight(book);
@@ -323,12 +361,13 @@ export function mountBookshelf(root, options = {}) {
     return null;
   }
 
-  // ux21: mobile/touch-primary = (hover:none) AND (pointer:coarse).
-  // Prefer this over max-width so a narrow desktop window still uses density pin.
+  // ux21 lock: mobile resting = all covers (全封面).
+  // Match CSS mobile shelf: (hover:none) OR max-width 640.
+  // DevTools「手机 393」often keeps hover:hover — width gate is required or autoDecide→spines.
   function isMobilePrimary() {
     return (
-      window.matchMedia("(hover: none)").matches &&
-      window.matchMedia("(pointer: coarse)").matches
+      window.matchMedia("(hover: none)").matches ||
+      window.matchMedia("(max-width: 640px)").matches
     );
   }
 
@@ -565,6 +604,7 @@ export function mountBookshelf(root, options = {}) {
   function restoreRestingSpine(el, bookId) {
     if (!el) return;
     el.classList.remove("is-expanded", "is-collapsing");
+    clearSeatCover(el);
     const found = bookById(bookId);
     if (found && found.book.cover && !found.book.filler) {
       applyFaceSize(el, found.book, { expanded: false });
@@ -606,6 +646,7 @@ export function mountBookshelf(root, options = {}) {
       el.classList.remove("is-collapsing");
       el.classList.add("is-expanded");
       applyFaceSize(el, found.book, { expanded: true });
+      mountSeatCover(el, found.book);
     }
   }
 
@@ -671,12 +712,37 @@ export function mountBookshelf(root, options = {}) {
     $("#noteTitle").textContent = book.title;
     $("#noteAuthor").textContent = book.author || "";
     const coverEl = $("#noteCover");
-    coverEl.className = `note-cover ${bkClass(book)} ${coverClass(book)}`;
+    // Intrinsic <img>, not the .img-* background. That background is
+    // background-size:cover inside a fixed 2:3 frame and clips landscape art.
+    coverEl.className = "note-cover";
+    coverEl.style.backgroundImage = "none";
+    coverEl.style.backgroundColor = "transparent";
+    coverEl.replaceChildren();
+    if (book.cover) {
+      const img = document.createElement("img");
+      img.className = "note-cover-img";
+      img.alt = "";
+      img.draggable = false;
+      img.src = coverSrc(book);
+      coverEl.appendChild(img);
+    }
     const note = NOTES[book.note];
+    const read = $("#noteRead");
+    if (read) {
+      if (book.href) {
+        read.href = book.href;
+        read.hidden = false;
+      } else {
+        read.hidden = true;
+        read.removeAttribute("href");
+      }
+    }
     if (note) {
       $("#noteBody").innerHTML = note.body;
-    } else {
+    } else if (usingDemo) {
       $("#noteBody").innerHTML = `<p class="placeholder">这本还没有完整笔记正文。Demo 占位：返回书架继续抽翻验收。</p><p>${book.title}${book.author ? " · " + book.author : ""}</p>`;
+    } else {
+      $("#noteBody").innerHTML = `<p class="placeholder">这本还没有笔记正文。</p><p>${escapeHtml(book.title)}${book.author ? " · " + escapeHtml(book.author) : ""}</p>`;
     }
   }
 
@@ -727,15 +793,23 @@ export function mountBookshelf(root, options = {}) {
     return `translate(${tx}px, ${ty}px) scale(${sx}, ${sy})${extra ? " " + extra : ""}`;
   }
 
-  // Closed book: cover on RIGHT half. Uniform scale only (non-uniform sx/sy = stretch jitter).
+  // Closed book: cover on RIGHT half.
+  // Covers stay uniform (sx ≈ sy). A narrow spine must NOT share that one scale:
+  // min(spineW / halfSpread, spineH / spreadH) ≈ 0.09 crushes height to ~45px.
+  // Spine slot: scale X and Y apart so the flyer box height stays the resting spine.
   function closedCoverTransform(slotRect, mid) {
     const halfW = mid.width / 2;
     const sx = slotRect.width / halfW;
     const sy = slotRect.height / mid.height;
+    const narrow = slotRect.width / Math.max(1, slotRect.height) < 0.42;
+    if (narrow) {
+      const tx = slotRect.left - mid.left - halfW * sx;
+      const ty = slotRect.top - mid.top;
+      return `translate(${tx.toFixed(2)}px, ${ty.toFixed(2)}px) scale(${sx.toFixed(4)}, ${sy.toFixed(4)})`;
+    }
     const s = Math.min(sx, sy);
     const scaledHalfW = halfW * s;
     const scaledH = mid.height * s;
-    // Center scaled right-half over slot
     const tx = slotRect.left - mid.left - halfW * s + (slotRect.width - scaledHalfW) / 2;
     const ty = slotRect.top - mid.top + (slotRect.height - scaledH) / 2;
     return `translate(${tx.toFixed(2)}px, ${ty.toFixed(2)}px) scale(${s.toFixed(4)})`;
@@ -879,19 +953,27 @@ export function mountBookshelf(root, options = {}) {
   // Parse translate/scale from our path strings; lerp components so grow ≠ hard jump (PATH-SHAKE ~2.2s).
   function parseTS(transform) {
     const s = String(transform || "");
-    let tx = 0, ty = 0, sc = 1;
+    let tx = 0, ty = 0, sx = 1, sy = 1;
     let m = s.match(/translate3d\(\s*([\d.-]+)px\s*,\s*([\d.-]+)px/);
     if (m) { tx = +m[1]; ty = +m[2]; }
     else {
       m = s.match(/translate\(\s*([\d.-]+)px\s*,\s*([\d.-]+)px/);
       if (m) { tx = +m[1]; ty = +m[2]; }
     }
-    m = s.match(/scale\(\s*([\d.-]+)\s*(?:,\s*[\d.-]+)?\s*\)/);
-    if (m) sc = +m[1];
-    return { tx, ty, s: sc };
+    m = s.match(/scale\(\s*([\d.-]+)(?:\s*,\s*([\d.-]+))?\s*\)/);
+    if (m) {
+      sx = +m[1];
+      sy = m[2] != null ? +m[2] : sx;
+    }
+    return { tx, ty, sx, sy };
   }
   function formatTS(p) {
-    return `translate(${p.tx.toFixed(2)}px, ${p.ty.toFixed(2)}px) scale(${p.s.toFixed(4)})`;
+    const sx = p.sx != null ? p.sx : p.s;
+    const sy = p.sy != null ? p.sy : sx;
+    const scale = Math.abs(sx - sy) < 1e-4
+      ? `scale(${sx.toFixed(4)})`
+      : `scale(${sx.toFixed(4)}, ${sy.toFixed(4)})`;
+    return `translate(${p.tx.toFixed(2)}px, ${p.ty.toFixed(2)}px) ${scale}`;
   }
   function lerpTS(a, b, t) {
     const u = Math.max(0, Math.min(1, t));
@@ -900,10 +982,68 @@ export function mountBookshelf(root, options = {}) {
     return formatTS({
       tx: pa.tx + (pb.tx - pa.tx) * u,
       ty: pa.ty + (pb.ty - pa.ty) * u,
-      s: pa.s + (pb.s - pa.s) * u,
+      sx: pa.sx + (pb.sx - pa.sx) * u,
+      sy: pa.sy + (pb.sy - pa.sy) * u,
     });
   }
 
+  // Pose for the flyer move. Same tx/ty/sx/sy as the ux26 string, but on the
+  // individual translate and scale properties. A combined transform matrix
+  // decomposes badly when sx ≠ sy (slot height pin) and the flight stutters.
+  function pathPose(transform) {
+    const p = parseTS(transform);
+    return {
+      translate: `${p.tx.toFixed(2)}px ${p.ty.toFixed(2)}px`,
+      scale: `${p.sx.toFixed(4)} ${p.sy.toFixed(4)}`,
+    };
+  }
+  function applyPathPose(el, transform) {
+    if (!el) return;
+    const pose = pathPose(transform);
+    el.style.transform = "none";
+    el.style.translate = pose.translate;
+    el.style.scale = pose.scale;
+  }
+  function pathKey(offset, transform) {
+    return { offset, ...pathPose(transform) };
+  }
+
+  // Close samples. T0 still carries the separate sx/sy height pin.
+  // The old first stop was Tp3 (only 25% of the way home) at 0.28, so the
+  // book was still nearly full-size for the first ~1s and read as overlap.
+  function returnMoveKeys(Tfull, Tp1, T0) {
+    return [
+      pathKey(0, Tfull),
+      pathKey(0.12, lerpTS(Tfull, T0, 0.35)),
+      pathKey(0.32, lerpTS(Tfull, T0, 0.62)),
+      pathKey(0.52, Tp1),
+      pathKey(0.74, T0),
+      pathKey(0.88, T0),
+      pathKey(1, T0),
+    ];
+  }
+
+  // Note stays out until the flyer leaves, then a short handoff.
+  // Rising from 0.65 while the flyer stayed solid until 0.90 was the double exposure.
+  function noteInKeys() {
+    return [
+      { offset: 0, opacity: 0 },
+      { offset: 0.82, opacity: 0 },
+      { offset: 0.90, opacity: 1 },
+      { offset: 1, opacity: 1 },
+    ];
+  }
+
+  // Article is gone by ~0.12 (230ms). Shrink has already started on frame 0.
+  function noteOutKeys() {
+    return [
+      { offset: 0, opacity: 1 },
+      { offset: 0.05, opacity: 0.35 },
+      { offset: 0.12, opacity: 0 },
+      { offset: 1, opacity: 0 },
+    ];
+  }
+
   // ux14 geometric core: ONE diagonal arc slot-center ↔ screen-center.
   // X, Y, AND scale on the SAME beat — ban L-path (lift-only then slide-only).
   // Transforms are lerpTS(T0→Tfull) samples so WAAPI stays collinear in tx/ty/s.
@@ -1214,6 +1354,7 @@ export function mountBookshelf(root, options = {}) {
       "is-expanded",
       "is-collapsing"
     );
+    clearSeatCover(el);
     // Explicit removeProperty — kills commitStyles leftovers like opacity:0 / transform
     [
       "width",
@@ -1259,6 +1400,9 @@ export function mountBookshelf(root, options = {}) {
 
     const board = document.createElement("div");
     board.className = "flyer-board";
+    // ux27: never a solid shell behind the jacket. CSS also forces this off.
+    board.style.opacity = "0";
+    board.style.visibility = "hidden";
 
     const left = document.createElement("div");
     left.className = "flyer-leaf flyer-leaf-left";
@@ -1328,7 +1472,7 @@ export function mountBookshelf(root, options = {}) {
       right.style.transform = "rotateY(-8deg)";
       bookEl.style.transform = "rotateX(8deg) translate3d(0,0,0)";
       gutter.style.opacity = "1";
-      flyer.style.transform = "translate3d(0px, -4px, 0) scale(1)";
+      applyPathPose(flyer, "translate(0.00px, -4.00px) scale(1)");
       flyer.style.opacity = "1";
     } else {
       // ux10: closed extract must look like ONE cover/spine — hide board + right page
@@ -1336,12 +1480,11 @@ export function mountBookshelf(root, options = {}) {
       left.style.transform = "rotateY(180deg)";
       right.style.transform = "rotateY(0deg)";
       right.style.opacity = "0";
-      board.style.opacity = "0";
       leftThick.style.opacity = "0";
       rightThick.style.opacity = "0";
       bookEl.style.transform = "rotateX(8deg) translate3d(0,0,0)";
       gutter.style.opacity = "0";
-      flyer.style.transform = closedCoverTransform(atRect, mid);
+      applyPathPose(flyer, closedCoverTransform(atRect, mid));
       flyer.style.opacity = "1";
     }
     stage.appendChild(flyer);
@@ -1351,7 +1494,7 @@ export function mountBookshelf(root, options = {}) {
   function promote(el) {
     if (!el) return;
     el.classList.add("is-ready");
-    el.style.willChange = "transform, opacity";
+    el.style.willChange = "translate, scale, opacity";
   }
 
   function demote(el) {
@@ -1410,13 +1553,9 @@ export function mountBookshelf(root, options = {}) {
     noteView.classList.add("is-preparing");
     noteView.classList.remove("is-open");
     noteView.style.opacity = "0";
-    const coverEl = $("#noteCover");
-    const bg = coverEl && getComputedStyle(coverEl).backgroundImage;
-    const m = bg && bg.match(/url\(["']?([^"')]+)["']?\)/);
-    if (m) {
+    const img = $("#noteCover") && $("#noteCover").querySelector(".note-cover-img");
+    if (img && !coverImgReady(img)) {
       try {
-        const img = new Image();
-        img.src = m[1];
         const DECODE_MS = 400;
         const decodeOrLoad = img.decode
           ? img.decode()
@@ -1463,6 +1602,7 @@ export function mountBookshelf(root, options = {}) {
     busy = true;
     const myFlow = ++flowSeq;
     document.body.classList.add("is-busy");
+    root.classList.remove("is-return");
     openBook = { book, cat, asSpine, fromExpanded: !!fromExpanded, openSeatRect: null };
     openFromExpanded = !!fromExpanded;
 
@@ -1503,20 +1643,28 @@ export function mountBookshelf(root, options = {}) {
     sourceEl.style.transition = "none";
     sourceEl.style.transform = "none"; // kill :hover translateY / is-expanded lift
     sourceEl.classList.add("is-extracting"); // CSS: suppress :hover transform while extracting
+    // Keep the real jacket on the seat until the flyer exists. Dropping
+    // is-expanded used to reveal the bk-* fill for the frames before the flyer.
+    if (sourceEl.classList.contains("spine") && book && book.cover) {
+      mountSeatCover(sourceEl, book);
+    }
     if (fromExpanded) {
       sourceEl.classList.remove("is-expanded", "is-collapsing");
-      [
-        "width",
-        "height",
-        "min-width",
-        "min-height",
-        "flex-shrink",
-      ].forEach((p) => {
+      // Drop the expanded cover's width. Do NOT drop a resting spine's height:
+      // clearing it falls through to .s-mid/.s-short (152/136), shorter than the
+      // face height the shelf is already showing, and that short box becomes
+      // homeRect for extract and put-back.
+      ["width", "min-width", "min-height", "flex-shrink"].forEach((p) => {
         try { sourceEl.style.removeProperty(p); } catch (_) {}
       });
+      if (sourceEl.classList.contains("spine") && book && book.cover && !book.filler) {
+        applyFaceSize(sourceEl, book);
+      } else {
+        try { sourceEl.style.removeProperty("height"); } catch (_) {}
+      }
       expandedId = null;
       touchExpandedId = null;
-      void sourceEl.offsetWidth; // reflow to natural spine (transform already none)
+      void sourceEl.offsetWidth; // reflow to resting spine (transform already none)
     } else {
       // Even spine-direct: pointer may still be hovering → :hover lift would skew freeze.
       void sourceEl.offsetWidth;
@@ -1636,13 +1784,13 @@ export function mountBookshelf(root, options = {}) {
     // Same dual: single diagonal to full — no hold-then-slide second segment.
     const aDualMove = dual.animate(
       [
-        { offset: 0, transform: T0 },
-        { offset: 0.12, transform: Tp1 },
-        { offset: 0.28, transform: Tp2 },
-        { offset: 0.44, transform: Tp3 },
-        { offset: 0.58, transform: Tfull },
-        { offset: 0.78, transform: Tfull },
-        { offset: 1.0, transform: Tfull },
+        pathKey(0, T0),
+        pathKey(0.12, Tp1),
+        pathKey(0.28, Tp2),
+        pathKey(0.44, Tp3),
+        pathKey(0.58, Tfull),
+        pathKey(0.78, Tfull),
+        pathKey(1, Tfull),
       ],
       optsMotion
     );
@@ -1654,14 +1802,14 @@ export function mountBookshelf(root, options = {}) {
             { offset: 0, opacity: 0 },
             { offset: 0.14, opacity: 0 },
             { offset: 0.22, opacity: 1 },
-            { offset: 0.90, opacity: 1 },
-            { offset: 0.96, opacity: 0.35 },
+            { offset: 0.82, opacity: 1 },
+            { offset: 0.90, opacity: 0 },
             { offset: 1.0, opacity: 0 },
           ]
         : [
             { offset: 0, opacity: 1 },
-            { offset: 0.90, opacity: 1 },
-            { offset: 0.96, opacity: 0.35 },
+            { offset: 0.82, opacity: 1 },
+            { offset: 0.90, opacity: 0 },
             { offset: 1.0, opacity: 0 },
           ],
       opts
@@ -1687,6 +1835,7 @@ export function mountBookshelf(root, options = {}) {
     const aExtractCoverIn = null;
 
     // Pose fade on SAME layer while diagonal continues — ban origin-swapping phase.
+    // Board stays out: fading it in painted a wide shell behind the cover by ~1350ms.
     const closedFaceKf = [
       { offset: 0, opacity: 0 },
       { offset: 0.28, opacity: 0 },
@@ -1694,7 +1843,11 @@ export function mountBookshelf(root, options = {}) {
       { offset: 0.52, opacity: 1 },
       { offset: 1.0, opacity: 1 },
     ];
-    const aBoard = dual._board ? dual._board.animate(closedFaceKf, opts) : null;
+    if (dual._board) {
+      dual._board.style.opacity = "0";
+      dual._board.style.visibility = "hidden";
+    }
+    const aBoard = null;
     const aRightFace = dual._right.animate(
       [
         { offset: 0, opacity: 0, transform: "rotateY(0deg)" },
@@ -1735,20 +1888,9 @@ export function mountBookshelf(root, options = {}) {
         )
       : null;
 
-    // §12: note main rise offset 0.70–0.92 (≥1.80s clear). FORBIDDEN: ≥0.95 at 0.34.
-    const aNote = noteView.animate(
-      [
-        { offset: 0, opacity: 0 },
-        { offset: 0.65, opacity: 0 },
-        { offset: 0.70, opacity: 0.15 },
-        { offset: 0.78, opacity: 0.55 },
-        { offset: 0.85, opacity: 0.90 },
-        { offset: 0.90, opacity: 0.99 },
-        { offset: 0.92, opacity: 1 },
-        { offset: 1.0, opacity: 1 },
-      ],
-      opts
-    );
+    // Note stays at 0 while the flyer owns the flight, then hands off by unlock (0.90).
+    // FORBIDDEN: note body readable while the flyer is still solid (double exposure).
+    const aNote = noteView.animate(noteInKeys(), opts);
 
     const aBack = openBackdrop
       ? openBackdrop.animate(
@@ -1802,6 +1944,9 @@ export function mountBookshelf(root, options = {}) {
           try { a.cancel(); } catch (_) {}
         });
       } catch (_) {}
+      // commitStyles does not keep the individual scale/translate pose. Park at
+      // the open spread so close shrinks from 672×504 instead of jumping there.
+      applyPathPose(dual, Tfull);
       dual.style.opacity = "0";
       dual.style.pointerEvents = "none";
       dual.style.visibility = "visible";
@@ -1887,6 +2032,74 @@ export function mountBookshelf(root, options = {}) {
       return;
     }
 
+    // Clock first. Shelf measure, freeze, and rAF used to run before this and
+    // the 0.12 Tfull keyframe then held 672×504 for ~240ms. Stash from open is
+    // enough to start the return; height pin is already in those samples.
+    // is-return puts the stage above the note so the shrink is not hidden
+    // under an opaque article (that read as ~1s of overlap, then a jump).
+    root.classList.add("is-return");
+    const closeMotion = { duration: CLOSE_MS, easing: "linear", fill: "forwards" };
+    const closeOpts = { duration: CLOSE_MS, easing: "linear", fill: "forwards" };
+    const stashEarly = openBook.pathTs;
+    let earlyMove = null;
+    let earlyNote = null;
+    let earlyLeft = null;
+    let earlyRight = null;
+    const heldEarly = openBook.heldFlyer;
+    if (
+      heldEarly &&
+      heldEarly.isConnected &&
+      stashEarly &&
+      stashEarly.Tfull &&
+      stashEarly.T0 &&
+      stashEarly.Tp1 &&
+      stashEarly.Tp2 &&
+      stashEarly.Tp3
+    ) {
+      heldEarly.style.visibility = "visible";
+      heldEarly.style.zIndex = "70";
+      heldEarly.style.opacity = "1";
+      if (heldEarly._board) {
+        heldEarly._board.style.opacity = "0";
+        heldEarly._board.style.visibility = "hidden";
+      }
+      promote(heldEarly);
+      earlyMove = heldEarly.animate(
+        returnMoveKeys(stashEarly.Tfull, stashEarly.Tp1, stashEarly.T0),
+        closeMotion
+      );
+      earlyNote = noteView.animate(noteOutKeys(), closeOpts);
+      // Backup if the fade is dropped: the article must not still be up after ~230ms.
+      wait(Math.round(CLOSE_MS * 0.12)).then(() => {
+        if (myFlow !== flowSeq || !noteView) return;
+        noteView.style.opacity = "0";
+      });
+      if (heldEarly._left) {
+        earlyLeft = heldEarly._left.animate(
+          [
+            { offset: 0, transform: "rotateY(8deg)" },
+            { offset: 0.08, transform: "rotateY(20deg)" },
+            { offset: 0.16, transform: "rotateY(70deg)" },
+            { offset: 0.24, transform: "rotateY(140deg)" },
+            { offset: 0.32, transform: "rotateY(180deg)" },
+            { offset: 1.0, transform: "rotateY(180deg)" },
+          ],
+          closeMotion
+        );
+      }
+      if (heldEarly._right) {
+        earlyRight = heldEarly._right.animate(
+          [
+            { offset: 0, opacity: 1, transform: "rotateY(-8deg)" },
+            { offset: 0.20, opacity: 1, transform: "rotateY(-4deg)" },
+            { offset: 0.32, opacity: 0, transform: "rotateY(0deg)" },
+            { offset: 1.0, opacity: 0, transform: "rotateY(0deg)" },
+          ],
+          closeMotion
+        );
+      }
+    }
+
     const mid = midRect(book);
     const originX = mid.left + mid.width / 2;
     const originY = mid.top + mid.height / 2;
@@ -1910,8 +2123,14 @@ export function mountBookshelf(root, options = {}) {
       slot = $(slotSel);
     }
     if (!slot) {
+      try { earlyMove && earlyMove.cancel(); } catch (_) {}
+      try { earlyNote && earlyNote.cancel(); } catch (_) {}
+      try { earlyLeft && earlyLeft.cancel(); } catch (_) {}
+      try { earlyRight && earlyRight.cancel(); } catch (_) {}
+      root.classList.remove("is-return");
       noteView.classList.remove("is-open", "is-preparing");
       noteView.hidden = true;
+      noteView.style.opacity = "";
       openBook = null;
       busy = false;
       document.body.classList.remove("is-busy");
@@ -1932,9 +2151,17 @@ export function mountBookshelf(root, options = {}) {
     ].forEach((p) => {
       try { slot.style.removeProperty(p); } catch (_) {}
     });
-    slot.classList.remove("is-collapsing", "is-placeholder", "is-expanded");
+    slot.classList.remove("is-collapsing", "is-expanded");
+    // Keep the seat empty until handover. Dropping is-placeholder here let the
+    // bk-* fill paint a solid rectangle under the returning cover.
+    slot.classList.add("is-placeholder");
     expandedId = null;
-    void slot.offsetWidth; // reflow to natural spine after class/inline clear
+    // Spines: re-pin the resting face BEFORE reading the seat. A cleared inline
+    // height is the shorter size-class box, and put-back would keep it.
+    if (targetMode === "spines" && book && book.cover && !book.filler) {
+      applyFaceSize(slot, book);
+    }
+    void slot.offsetWidth; // reflow to resting spine after class/inline clear
     const naturalW = slot.offsetWidth;
     const naturalH = slot.offsetHeight;
     slot.style.flexShrink = "0";
@@ -1962,13 +2189,13 @@ export function mountBookshelf(root, options = {}) {
     });
     shelfView.classList.add("is-frozen");
 
-    // ux13: prepare shelf+flyer UNDER opaque note — ban route hard-cut then mid-air resume.
-    // Keep note is-open + opacity 1 until reverse clock starts.
+    // Note stays in the tree so its fade can finish, but must not cover the flyer.
+    // is-return (set before the clock) owns stacking. Do not pin z-index 75.
     noteView.classList.add("is-open");
     noteView.classList.remove("is-preparing");
     noteView.hidden = false;
-    noteView.style.opacity = "1";
-    noteView.style.zIndex = "75";
+    if (!earlyNote) noteView.style.opacity = "1";
+    noteView.style.zIndex = "";
 
     unparkShelf();
     shelfView.style.opacity = "1";
@@ -1990,6 +2217,17 @@ export function mountBookshelf(root, options = {}) {
       frozenHome.width = natW;
       frozenHome.height = natH;
       frozenHome.top = Math.round(bottom - natH);
+    } else if (targetMode === "spines" && naturalH > 0) {
+      // Seat and flyer use the resting spine just measured, not a short
+      // cover-frame stash from extract.
+      const bottom = frozenHome.top + frozenHome.height;
+      frozenHome.width = naturalW;
+      frozenHome.height = naturalH;
+      frozenHome.top = Math.round(bottom - naturalH);
+      if (openBook) {
+        openBook.homeRect = copyRect(frozenHome);
+        openBook.spineHome = copyRect(frozenHome);
+      }
     }
     slot.style.width = frozenHome.width + "px";
     slot.style.minWidth = frozenHome.width + "px";
@@ -2027,8 +2265,10 @@ export function mountBookshelf(root, options = {}) {
     }
     flyer.style.zIndex = "70";
     flyer.style.visibility = "visible";
-    flyer.style.opacity = "0"; // stay hidden under note until reverse clock
-    flyer.style.transform = Tfull; // start at open end pose (transform-aligned)
+    if (!earlyMove) {
+      flyer.style.opacity = "0";
+      applyPathPose(flyer, Tfull); // start at open end pose (transform-aligned)
+    }
     promote(flyer);
     if (flyer._cover) {
       flyer._cover.classList.add("is-cover-ready");
@@ -2050,7 +2290,10 @@ export function mountBookshelf(root, options = {}) {
       flyer._right.style.transform = "rotateY(-8deg)";
       flyer._right.style.opacity = "1";
     }
-    if (flyer._board) flyer._board.style.opacity = "1";
+    if (flyer._board) {
+      flyer._board.style.opacity = "0";
+      flyer._board.style.visibility = "hidden";
+    }
     if (flyer._leftThick) flyer._leftThick.style.opacity = "1";
     if (flyer._rightThick) flyer._rightThick.style.opacity = "1";
     if (flyer._gutter) flyer._gutter.style.opacity = "1";
@@ -2098,13 +2341,10 @@ export function mountBookshelf(root, options = {}) {
         `translate3d(${spineOutClose.x.toFixed(2)}px, ${spineOutClose.y.toFixed(2)}px, 0)`;
     }
 
-    // One frame then start reverse clock — note still fully covering.
-    await Promise.race([
-      new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))),
-      wait(32),
-    ]);
+    // Start the reverse on this frame. A pre-clock rAF left the spread parked at
+    // 672×504 while the note was still up (the ~240ms close-start hitch).
     void readyPulse;
-    flyer.style.opacity = "1"; // book layer present under note as reverse begins
+    if (!earlyMove) flyer.style.opacity = "1";
 
     // ux14: TIME-REVERSE of open pathTs — ban separately computed return / end-segment seek.
     const PUT_MS = 380;
@@ -2113,41 +2353,20 @@ export function mountBookshelf(root, options = {}) {
     const xfadeFrom = 1 - XFADE_MS / CLOSE_MS; // ~0.89
     const slotInAt = Math.max(0.86, xfadeFrom - 0.04);
     const flyerFadeAt = Math.min(0.97, slotInAt + 0.06);
-    const closeOpts = { duration: CLOSE_MS, easing: "linear", fill: "forwards" };
-    const closeMotion = { duration: CLOSE_MS, easing: "linear", fill: "forwards" };
 
     resetVeil();
 
-    // ux13: note fades ON the book layer while reverse shrink starts — ban instant note unmount.
-    const aNoteOut = noteView.animate(
-      [
-        { offset: 0, opacity: 1 },
-        { offset: 0.06, opacity: 0.85 },
-        { offset: 0.12, opacity: 0.45 },
-        { offset: 0.22, opacity: 0 },
-        { offset: 1.0, opacity: 0 },
-      ],
-      closeOpts
-    );
+    // Note fades out in the first ~230ms. Shrink already started on frame 0.
+    const aNoteOut = earlyNote || noteView.animate(noteOutKeys(), closeOpts);
 
-    // Open extract was 0→0.32 (T0→Tp1→Tp2→TdualClosed), grow 0.40→0.78.
-    // Close: reverse grow then reverse extract; end = T0 (frozen home) — no approach snap.
-    // TIME-REVERSE of open diagonal — same Ts, no L hang-then-drop.
-    const aFlyerMove = flyer.animate(
-      [
-        { offset: 0, transform: Tfull },
-        { offset: 0.12, transform: Tfull },
-        { offset: 0.28, transform: Tp3 },
-        { offset: 0.44, transform: Tp2 },
-        { offset: 0.60, transform: Tp1 },
-        { offset: 0.78, transform: T0 },
-        { offset: 0.90, transform: T0 },
-        { offset: 1.0, transform: T0 },
-      ],
+    // Shrink starts at offset 0 and is already well under way by ~400ms.
+    // A first stop on Tp3 (25% home) at 0.28 left the book looking full for ~1s.
+    const aFlyerMove = earlyMove || flyer.animate(
+      returnMoveKeys(Tfull, Tp1, T0),
       closeMotion
     );
     // Reverse hinge on SAME layer while shrink (open was 0.32→0.68 hinge).
-    const aLeftClose = flyer._left
+    const aLeftClose = earlyLeft || (flyer._left
       ? flyer._left.animate(
           [
             { offset: 0, transform: "rotateY(8deg)" },
@@ -2159,8 +2378,8 @@ export function mountBookshelf(root, options = {}) {
           ],
           closeMotion
         )
-      : null;
-    const aRightClose = flyer._right
+      : null);
+    const aRightClose = earlyRight || (flyer._right
       ? flyer._right.animate(
           [
             { offset: 0, opacity: 1, transform: "rotateY(-8deg)" },
@@ -2170,14 +2389,14 @@ export function mountBookshelf(root, options = {}) {
           ],
           closeMotion
         )
-      : null;
+      : null);
     const closedFaceOut = [
       { offset: 0, opacity: 1 },
       { offset: 0.18, opacity: 0.7 },
       { offset: 0.28, opacity: 0 },
       { offset: 1.0, opacity: 0 },
     ];
-    const aBoardClose = flyer._board ? flyer._board.animate(closedFaceOut, closeOpts) : null;
+    const aBoardClose = null;
     const aThickLClose = flyer._leftThick ? flyer._leftThick.animate(closedFaceOut, closeOpts) : null;
     const aThickRClose = flyer._rightThick ? flyer._rightThick.animate(closedFaceOut, closeOpts) : null;
     const aGutterClose = flyer._gutter
@@ -2218,9 +2437,11 @@ export function mountBookshelf(root, options = {}) {
     const aFlyerFade = flyer.animate(
       targetMode === "spines"
         ? [
+            // Stay through the shrink. Cutting at 0.58 dropped a still-large
+            // cover and made the first ~1.1s look like overlap, then a pop.
             { offset: 0, opacity: 1 },
-            { offset: 0.50, opacity: 1 },
-            { offset: 0.58, opacity: 0 },
+            { offset: 0.68, opacity: 1 },
+            { offset: 0.80, opacity: 0 },
             { offset: 1.0, opacity: 0 },
           ]
         : [
@@ -2252,10 +2473,10 @@ export function mountBookshelf(root, options = {}) {
       ? spineSlotClose.animate(
           [
             { offset: 0, transform: outClose, opacity: 0 },
-            { offset: 0.50, transform: outClose, opacity: 0 },
-            { offset: 0.58, transform: outClose, opacity: 1 },
-            { offset: 0.78, transform: "translate3d(0px, 0px, 0)", opacity: 1 },
-            { offset: 0.90, transform: "translate3d(0px, 0px, 0)", opacity: 1 },
+            { offset: 0.66, transform: outClose, opacity: 0 },
+            { offset: 0.74, transform: outClose, opacity: 1 },
+            { offset: 0.86, transform: "translate3d(0px, 0px, 0)", opacity: 1 },
+            { offset: 0.94, transform: "translate3d(0px, 0px, 0)", opacity: 1 },
             { offset: 1.0, transform: "translate3d(0px, 0px, 0)", opacity: 0 },
           ],
           closeMotion
@@ -2270,8 +2491,8 @@ export function mountBookshelf(root, options = {}) {
           targetMode === "spines"
             ? [
                 { offset: 0, opacity: 1 },
-                { offset: 0.50, opacity: 1 },
-                { offset: 0.58, opacity: 0 },
+                { offset: 0.68, opacity: 1 },
+                { offset: 0.80, opacity: 0 },
                 { offset: 1, opacity: 0 },
               ]
             : [
@@ -2293,6 +2514,13 @@ export function mountBookshelf(root, options = {}) {
       slot.style.backgroundColor = "";
     }
 
+    // Seat may show its real face only as the flyer hands off. Until then the
+    // placeholder ban (transparent, invisible) blocks the solid bk plate.
+    wait(Math.round(CLOSE_MS * Math.max(0, slotInAt - 0.02))).then(() => {
+      if (myFlow !== flowSeq || !slot.isConnected) return;
+      slot.classList.remove("is-placeholder");
+    });
+
     const aSlotIn = slot.animate(
       [
         { offset: 0, opacity: 0 },
@@ -2347,10 +2575,11 @@ export function mountBookshelf(root, options = {}) {
           try { a.cancel(); } catch (_) {}
         });
       } catch (_) {}
-      flyer.style.transform = T0; // stay locked on frozen home until slot fully owns pixels
+      applyPathPose(flyer, T0); // stay locked on frozen home until slot fully owns pixels
       flyer.style.opacity = "0";
       slot.style.opacity = "1";
       slot.style.transform = "none";
+      root.classList.remove("is-return");
       noteView.classList.remove("is-open", "is-preparing");
       noteView.hidden = true;
       noteView.style.opacity = "";
@@ -2376,6 +2605,21 @@ export function mountBookshelf(root, options = {}) {
       openFromExpanded = false;
       restoreSlot(slot, book);
       try { slot.classList.remove("is-extracting"); } catch (_) {}
+      // Pointer is often still over the returned spine. :hover is translateY(-8px)
+      // scale(1.06), which measures ~8–11px taller than neighbors. Hold that off
+      // until the pointer leaves; drop immediately if it is not hovering.
+      if (targetMode === "spines" && slot) {
+        slot.classList.add("is-seat");
+        const releaseSeat = () => {
+          slot.classList.remove("is-seat");
+          slot.removeEventListener("pointerleave", releaseSeat);
+        };
+        slot.addEventListener("pointerleave", releaseSeat);
+        requestAnimationFrame(() => {
+          if (!slot.isConnected) return;
+          if (!slot.matches(":hover")) releaseSeat();
+        });
+      }
       // ux23: drop close-path inline cover pin; resting .img-* CSS owns the seat again
       if (targetMode === "covers" && slot) {
         ["background-image", "background-size", "background-position", "background-repeat", "background-color"].forEach((p) => {
@@ -2445,6 +2689,47 @@ export function mountBookshelf(root, options = {}) {
 
   listen($("#backBtn"), "click", () => closeBookFlow());
 
+  // Browser Back from the full note restores this page from bfcache, still open.
+  // Land on the shelf at the scroll we saved, without replaying the close clock.
+  listen(window, "pageshow", (event) => {
+    if (!event.persisted || !openBook) return;
+    const home = scrollLock
+      ? { x: scrollLock.x, y: scrollLock.y }
+      : { x: scrollHome.x, y: scrollHome.y };
+    try { releaseScrollLock(); } catch (_) {}
+    openBook = null;
+    openFromExpanded = false;
+    expandedId = null;
+    touchExpandedId = null;
+    busy = false;
+    flowSeq += 1;
+    document.body.classList.remove("is-busy");
+    noteView.classList.remove("is-open", "is-preparing");
+    noteView.hidden = true;
+    noteView.style.opacity = "";
+    noteView.style.zIndex = "";
+    if (stage) stage.replaceChildren();
+    resetVeil();
+    resetBackdrop();
+    unparkShelf();
+    shelfView.classList.remove("is-frozen", "is-dim", "is-parked");
+    shelfView.style.opacity = "";
+    try { shelfView.style.removeProperty("min-height"); } catch (_) {}
+    renderShelf();
+    writeScroll(home);
+    requestAnimationFrame(() => writeScroll(home));
+  });
+
+  // Leaving for the post page: remember the shelf scroll so Back lands on it.
+  listen(root, "click", (event) => {
+    const target = event.target;
+    if (!target || !target.closest) return;
+    const link = target.closest("a.flyer-page-more, a.note-read");
+    if (!link || !root.contains(link)) return;
+    const y = scrollLock ? scrollLock.y : readScroll().y;
+    try { sessionStorage.setItem("garden-bookshelf-scroll", String(y)); } catch (_) {}
+  });
+
   // Escape closes note
   listen(window, "keydown", (e) => {
     if (e.key === "Escape" && openBook && !busy) closeBookFlow();