hd-garden 0.9.3 → 0.9.4

package/app/bookshelf/[bookId]/page.tsx

@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { bookshelf } from "@garden/bookshelf";
-import { BookHub } from "../../components/bookshelf/BookHub";
+import { Bookshelf } from "../../components/bookshelf";
 import { pageAlternates } from "../../lib/page-alternates";
+import { siteConfig } from "../../site.config";
 import { isStaticPlaceholder, STATIC_PLACEHOLDER, staticParams } from "../../../ui/garden/static-params.mjs";
 import type { BookshelfBook } from "../../components/bookshelf/types";
 
@@ -47,9 +48,25 @@ export default async function BookHubPage({
 }) {
   const { bookId } = await params;
   const found = hubBooks().find((item) => item.book.id === bookId);
-  if (!found) {
+  if (!found || !bookshelf) {
     if (isStaticPlaceholder(bookId)) return null;
     notFound();
   }
-  return <BookHub shelfTitle={found.shelfTitle} book={found.book} />;
+  return (
+    <main className="sh-main bookshelf-page" id="content">
+      <header className="sh-head">
+        {bookshelf.eyebrow ? <p className="sh-kicker">{bookshelf.eyebrow}</p> : null}
+        <h1 id="sh-title">{bookshelf.title}</h1>
+        {bookshelf.description ? <p className="sh-deck">{bookshelf.description}</p> : null}
+      </header>
+      <Bookshelf
+        embedded
+        catalog={bookshelf.catalog}
+        notes={bookshelf.notes}
+        title={bookshelf.title}
+        eyebrow={bookshelf.eyebrow ?? siteConfig.name}
+        initialHub={found.book.id}
+      />
+    </main>
+  );
 }

package/app/components/bookshelf/Bookshelf.tsx

@@ -79,6 +79,7 @@ function shelfShell(brand: string, title: string) {
     <div class="note-view" id="noteView" hidden>
       <article class="note">
         <button type="button" class="back-btn" id="backBtn">← 返回书架</button>
+        <div class="hub-panel" id="hubPanel" hidden></div>
         <div class="note-hero">
           <div class="note-cover" id="noteCover"></div>
           <div class="note-meta">
@@ -101,7 +102,14 @@ function shelfShell(brand: string, title: string) {
 }
 
 /** Approved bookshelf. Pass `catalog` and `notes` for a site shelf; omit them for the package demo. */
-export function Bookshelf({ catalog, notes, title, eyebrow, embedded = false }: BookshelfProps) {
+export function Bookshelf({
+  catalog,
+  notes,
+  title,
+  eyebrow,
+  embedded = false,
+  initialHub,
+}: BookshelfProps) {
   const ref = useRef<HTMLDivElement>(null);
   useLayoutEffect(() => {
     const root = ref.current;
@@ -111,13 +119,18 @@ export function Bookshelf({ catalog, notes, title, eyebrow, embedded = false }:
       if (saved != null) window.scrollTo(0, saved);
     };
     applyScroll();
-    const unmount = mountBookshelf(root, { catalog: withNoteLinks(catalog), notes });
+    const unmount = mountBookshelf(root, {
+      catalog: withNoteLinks(catalog),
+      notes,
+      initialHub,
+      shelfHref: siteHref("/bookshelf"),
+    });
     const frame = window.requestAnimationFrame(applyScroll);
     return () => {
       window.cancelAnimationFrame(frame);
       unmount?.();
     };
-  }, [catalog, notes, title, eyebrow, embedded]);
+  }, [catalog, notes, title, eyebrow, embedded, initialHub]);
   return (
     <div
       className={embedded ? "bookshelf-demo is-site" : "bookshelf-demo"}

package/app/components/bookshelf/bookshelf.css

@@ -283,6 +283,7 @@
   overscroll-behavior-x: contain;
   scrollbar-width: none;
 }
+.bookshelf-demo .spines.has-jackets { gap: 10px; }
 .bookshelf-demo .spines::-webkit-scrollbar { display: none; }
 
 .bookshelf-demo .spine {
@@ -353,14 +354,29 @@
   transition: opacity 220ms var(--ease-motion);
 }
 
-/* Mode C: temporary expand on spine wall */
-/* resting spines: solid hue only; cover image only when expanded */
-/* Expanded / extracting face must not fall back to bk-* (#513688 etc.).
-   The jacket is .cover-art. A missing image stays cream shelf, not a shell pad. */
+/* Mode C: temporary expand on spine wall.
+   Demo spines (no .has-jacket) stay cloth until expand.
+   A real books[].cover is .has-jacket: the <img> is the face at rest,
+   on hover, and while extracting. bk-* must not paint a plate over it.
+   The old `.spine[class*="img-"] { background-image: none !important }`
+   was that plate. */
 .bookshelf-demo .spine.is-expanded,
-.bookshelf-demo .spine.is-extracting {
+.bookshelf-demo .spine.is-extracting,
+.bookshelf-demo .spine.has-jacket {
   background-color: transparent !important;
 }
+.bookshelf-demo .spine.has-jacket {
+  padding: 0;
+  writing-mode: horizontal-tb;
+  text-orientation: mixed;
+  letter-spacing: 0;
+  background-image: none;
+}
+.bookshelf-demo .spine.has-jacket > span {
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+.bookshelf-demo .spine > .cover-art,
 .bookshelf-demo .spine.is-expanded > .cover-art,
 .bookshelf-demo .spine.is-extracting > .cover-art {
   position: absolute;
@@ -374,33 +390,34 @@
   z-index: 1;
   border-radius: inherit;
 }
-.bookshelf-demo .spine[class*="img-"] {
+/* Demo catalog only: cloth at rest, jacket when the spine expands. */
+.bookshelf-demo .spine[class*="img-"]:not(.has-jacket) {
   background-image: none !important;
 }
-.bookshelf-demo .spine.is-expanded[class*="img-"] {
+.bookshelf-demo .spine.is-expanded[class*="img-"]:not(.has-jacket) {
   background-image: unset;
 }
-.bookshelf-demo .spine.is-expanded.img-clean-code { background-image: url("/covers/clean-code.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-refactoring { background-image: url("/covers/refactoring.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-design-patterns { background-image: url("/covers/design-patterns.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-pragmatic-programmer { background-image: url("/covers/pragmatic-programmer.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-continuous-delivery { background-image: url("/covers/continuous-delivery.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-phoenix-project { background-image: url("/covers/phoenix-project.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-mythical-man-month { background-image: url("/covers/mythical-man-month.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-tdd { background-image: url("/covers/tdd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-lean-startup { background-image: url("/covers/lean-startup.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-release-it { background-image: url("/covers/release-it.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-sre { background-image: url("/covers/sre.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-team-topologies { background-image: url("/covers/team-topologies.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-accelerate { background-image: url("/covers/accelerate.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-ddd { background-image: url("/covers/ddd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-microservices { background-image: url("/covers/microservices.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-eaa { background-image: url("/covers/eaa.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-ddia { background-image: url("/covers/ddia.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-fundamentals-sa { background-image: url("/covers/fundamentals-sa.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-implementing-ddd { background-image: url("/covers/implementing-ddd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-systems-performance { background-image: url("/covers/systems-performance.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-clean-architecture { background-image: url("/covers/clean-architecture.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-clean-code:not(.has-jacket) { background-image: url("/covers/clean-code.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-refactoring:not(.has-jacket) { background-image: url("/covers/refactoring.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-design-patterns:not(.has-jacket) { background-image: url("/covers/design-patterns.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-pragmatic-programmer:not(.has-jacket) { background-image: url("/covers/pragmatic-programmer.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-continuous-delivery:not(.has-jacket) { background-image: url("/covers/continuous-delivery.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-phoenix-project:not(.has-jacket) { background-image: url("/covers/phoenix-project.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-mythical-man-month:not(.has-jacket) { background-image: url("/covers/mythical-man-month.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-tdd:not(.has-jacket) { background-image: url("/covers/tdd.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-lean-startup:not(.has-jacket) { background-image: url("/covers/lean-startup.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-release-it:not(.has-jacket) { background-image: url("/covers/release-it.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-sre:not(.has-jacket) { background-image: url("/covers/sre.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-team-topologies:not(.has-jacket) { background-image: url("/covers/team-topologies.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-accelerate:not(.has-jacket) { background-image: url("/covers/accelerate.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-ddd:not(.has-jacket) { background-image: url("/covers/ddd.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-microservices:not(.has-jacket) { background-image: url("/covers/microservices.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-eaa:not(.has-jacket) { background-image: url("/covers/eaa.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-ddia:not(.has-jacket) { background-image: url("/covers/ddia.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-fundamentals-sa:not(.has-jacket) { background-image: url("/covers/fundamentals-sa.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-implementing-ddd:not(.has-jacket) { background-image: url("/covers/implementing-ddd.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-systems-performance:not(.has-jacket) { background-image: url("/covers/systems-performance.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-clean-architecture:not(.has-jacket) { background-image: url("/covers/clean-architecture.jpg") !important; }
 
 .bookshelf-demo .spine.is-expanded {
   width: 100px;
@@ -435,7 +452,8 @@
     box-shadow var(--t-collapse) var(--ease-motion),
     background-size var(--t-collapse) var(--ease-motion);
 }
-/* C collapse: shrink while still "expanded" class — drop cover image to solid hue immediately, never flash a wide black plate */
+/* C collapse: shrink while still "expanded". Real jackets keep .cover-art.
+   Demo cloth may drop the expanded photo; it must not clear a .has-jacket. */
 .bookshelf-demo .spine.is-expanded.is-collapsing {
   width: 28px;
   height: 150px;
@@ -449,10 +467,18 @@
   box-shadow:
     inset -1px 0 0 rgba(255,255,255,0.12),
     inset 1px 0 0 rgba(0,0,0,0.18);
-  background-image: none !important;
   background-size: auto;
   z-index: 2;
 }
+.bookshelf-demo .spine.is-expanded.is-collapsing:not(.has-jacket) {
+  background-image: none !important;
+}
+.bookshelf-demo .spine.has-jacket.is-expanded.is-collapsing {
+  writing-mode: horizontal-tb;
+  padding: 0;
+  background-color: transparent !important;
+  background-image: none;
+}
 .bookshelf-demo .spine.is-expanded.is-collapsing.s-tall { width: 30px; height: 168px; }
 .bookshelf-demo .spine.is-expanded.is-collapsing.s-mid { width: 28px; height: 152px; }
 .bookshelf-demo .spine.is-expanded.is-collapsing.s-short { width: 24px; height: 136px; }
@@ -823,7 +849,24 @@
   opacity: 0 !important;
 }
 
-/* ux16: exact homeRect standing spine — full height, spine width, slides out/in */
+/* ux16: exact homeRect standing spine — full height, spine width, slides out/in.
+   A real jacket fills the slot. bk-* cloth is only the filler / demo label. */
+.bookshelf-demo .flyer.flyer-spine-slot.has-jacket {
+  background: none !important;
+  background-color: transparent !important;
+  box-shadow: none;
+  padding: 0;
+}
+.bookshelf-demo .flyer-spine-slot-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center bottom;
+  display: block;
+  border-radius: inherit;
+}
 .bookshelf-demo .flyer.flyer-spine-slot {
   position: fixed;
   margin: 0;
@@ -1161,35 +1204,6 @@
   .bookshelf-demo .s-tall { height: 148px; width: 26px; }
   .bookshelf-demo .s-mid { height: 134px; width: 24px; }
   .bookshelf-demo .s-short { height: 120px; width: 20px; }
-  /* resting spines: solid hue only; cover image only when expanded */
-.bookshelf-demo .spine[class*="img-"] {
-  background-image: none !important;
-}
-.bookshelf-demo .spine.is-expanded[class*="img-"] {
-  background-image: unset;
-}
-.bookshelf-demo .spine.is-expanded.img-clean-code { background-image: url("/covers/clean-code.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-refactoring { background-image: url("/covers/refactoring.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-design-patterns { background-image: url("/covers/design-patterns.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-pragmatic-programmer { background-image: url("/covers/pragmatic-programmer.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-continuous-delivery { background-image: url("/covers/continuous-delivery.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-phoenix-project { background-image: url("/covers/phoenix-project.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-mythical-man-month { background-image: url("/covers/mythical-man-month.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-tdd { background-image: url("/covers/tdd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-lean-startup { background-image: url("/covers/lean-startup.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-release-it { background-image: url("/covers/release-it.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-sre { background-image: url("/covers/sre.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-team-topologies { background-image: url("/covers/team-topologies.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-accelerate { background-image: url("/covers/accelerate.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-ddd { background-image: url("/covers/ddd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-microservices { background-image: url("/covers/microservices.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-eaa { background-image: url("/covers/eaa.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-ddia { background-image: url("/covers/ddia.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-fundamentals-sa { background-image: url("/covers/fundamentals-sa.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-implementing-ddd { background-image: url("/covers/implementing-ddd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-systems-performance { background-image: url("/covers/systems-performance.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-clean-architecture { background-image: url("/covers/clean-architecture.jpg") !important; }
-
 .bookshelf-demo .spine.is-expanded {
     width: 90px;
     height: 136px;
@@ -1328,6 +1342,10 @@ body:has(.bookshelf-demo.is-site) .sh-header .sh-word {
   text-underline-offset: 3px;
 }
 .bookshelf-demo .note-read[hidden] { display: none; }
+.bookshelf-demo .hub-panel[hidden] { display: none !important; }
+.bookshelf-demo .note-view.is-hub .note-hero,
+.bookshelf-demo .note-view.is-hub .note-body { display: none !important; }
+.bookshelf-demo .hub-panel .book-hub { width: 100%; padding: 0; }
 .bookshelf-demo.is-site .note-read { color: var(--blue); }
 @media (max-width: 820px) {
   .bookshelf-demo.is-site .note { padding: 16px 20px 64px; }

package/app/components/bookshelf/engine.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 // @ts-nocheck
 // Tip ux26 held-book-s10-ux26-20261028. Motion copied from that app.js. Do not retune it.
+import { ui } from "../../lib/i18n";
 import { DEMO_CATALOG, DEMO_NOTES } from "./demo-data";
 
 function cssIdent(id) {
@@ -12,6 +13,19 @@ function coverSrc(book) {
   return `/covers/${book.id}.jpg`;
 }
 
+/** Site jackets are URL strings. Demo `cover: true` stays a cloth spine at rest. */
+function realCover(book) {
+  return !!(book && typeof book.cover === "string" && book.cover && !book.filler);
+}
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
 function injectExtraCovers(catalog) {
   const rules = [];
   for (const cat of catalog) {
@@ -43,6 +57,10 @@ export function mountBookshelf(root, options = {}) {
   const CATALOG = options.catalog ?? DEMO_CATALOG;
   const NOTES = options.notes ?? (options.catalog ? {} : DEMO_NOTES);
   const usingDemo = !options.catalog;
+  const initialHub = typeof options.initialHub === "string" ? options.initialHub : "";
+  const shelfHref = typeof options.shelfHref === "string" && options.shelfHref
+    ? options.shelfHref
+    : "/bookshelf/";
   const removeExtraCovers = injectExtraCovers(CATALOG);
 
   // ux26: per-book cover dominant (= existing bk-* spine colors) for open-shell + page wash
@@ -297,6 +315,24 @@ export function mountBookshelf(root, options = {}) {
     return window.innerWidth <= 640 ? 102 : 118;
   }
 
+  // Real jackets stand face-out. Width fits the row when it can (≥72);
+  // otherwise 72 and the row scrolls, so the art stays readable.
+  function jacketFaceWidth(count) {
+    const col = Math.min((window.innerWidth || 1280) - 32, 740);
+    const gap = 10;
+    const full = coverWidthPx();
+    const n = Math.max(1, count | 0);
+    const fit = Math.floor((col - 8 - gap * Math.max(0, n - 1)) / n);
+    if (fit >= 72) return Math.min(full, fit);
+    return Math.min(full, 72);
+  }
+
+  function faceHeightFor(book, w) {
+    const nat = bookNat(book);
+    if (!nat) return Math.max(96, Math.round(w / 0.68));
+    return Math.max(96, Math.round(w * (nat.h / nat.w)));
+  }
+
   function bookNat(book) {
     if (!book || !book.cover) return null;
     const pair = COVER_NAT[book.id];
@@ -306,10 +342,7 @@ export function mountBookshelf(root, options = {}) {
 
   // Fixed width; height from real cover aspect. Fallback ~2:3 if unknown.
   function bookFaceHeight(book) {
-    const w = coverWidthPx();
-    const nat = bookNat(book);
-    if (!nat) return Math.round(w / 0.68);
-    return Math.max(96, Math.round(w * (nat.h / nat.w)));
+    return faceHeightFor(book, coverWidthPx());
   }
 
   // Real jacket on the expanded spine. CSS background-image is stripped by
@@ -338,18 +371,21 @@ export function mountBookshelf(root, options = {}) {
 
   function applyFaceSize(el, book, { expanded = false } = {}) {
     if (!el || !book) return;
-    const faceH = bookFaceHeight(book);
-    if (el.classList.contains("cover") || expanded) {
-      const w = coverWidthPx();
+    const jacket = realCover(book) && el.classList.contains("spine");
+    const stored = jacket ? Number(el.dataset.jacketW) : 0;
+    const w = expanded ? coverWidthPx() : (stored > 0 ? stored : (jacket ? jacketFaceWidth(1) : coverWidthPx()));
+    const faceH = faceHeightFor(book, jacket || el.classList.contains("cover") || expanded ? w : coverWidthPx());
+    if (el.classList.contains("cover") || expanded || jacket) {
       el.style.width = w + "px";
       el.style.height = faceH + "px";
       el.style.backgroundSize = "contain";
       el.style.backgroundPosition = "center top";
       el.style.backgroundRepeat = "no-repeat";
+      el.dataset.faceH = String(faceH);
     } else if (el.classList.contains("spine")) {
-      // Resting spine: same height as that book's cover face; width from size class.
+      // Demo / filler spine: height tracks the cover face; width stays the cloth class.
       el.style.height = faceH + "px";
-      el.style.removeProperty("width"); // keep CSS size class width
+      el.style.removeProperty("width");
       el.dataset.faceH = String(faceH);
     }
   }
@@ -557,16 +593,24 @@ export function mountBookshelf(root, options = {}) {
       } else {
         const row = document.createElement("div");
         row.className = "spines";
+        const jacketCount = cat.books.filter(realCover).length;
+        if (jacketCount) row.classList.add("has-jackets");
+        const jacketW = jacketFaceWidth(Math.max(1, jacketCount));
         for (const book of cat.books) {
           const btn = document.createElement("button");
           btn.type = "button";
           const sizeCls = book.size === "thin" ? "thin dark-text" : `${book.size} light-text`;
           btn.className = `spine ${bkClass(book)} ${sizeCls}`;
           if (book.cover) btn.classList.add(coverClass(book));
+          if (realCover(book)) {
+            btn.classList.add("has-jacket");
+            btn.dataset.jacketW = String(jacketW);
+          }
           btn.dataset.bookId = book.id;
           btn.setAttribute("aria-label", book.title);
-          btn.innerHTML = `<span>${book.spine}</span>`;
+          btn.innerHTML = `<span>${escapeHtml(book.spine)}</span>`;
           if (book.cover && !book.filler) applyFaceSize(btn, book);
+          if (realCover(book)) mountSeatCover(btn, book);
           else if (book.filler) { /* thin filler keeps CSS height */ }
 
           if (book.cover && !book.filler) {
@@ -604,13 +648,19 @@ 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) {
+    if (found && realCover(found.book)) {
       applyFaceSize(el, found.book, { expanded: false });
+      mountSeatCover(el, found.book);
+      el.classList.add("has-jacket");
     } else {
-      el.style.removeProperty("width");
-      el.style.removeProperty("height");
+      clearSeatCover(el);
+      if (found && found.book.cover && !found.book.filler) {
+        applyFaceSize(el, found.book, { expanded: false });
+      } else {
+        el.style.removeProperty("width");
+        el.style.removeProperty("height");
+      }
     }
   }
 
@@ -618,13 +668,10 @@ export function mountBookshelf(root, options = {}) {
     $$(".spine[data-book-id]").forEach((el) => {
       const id = el.dataset.bookId;
       if (!id || id === exceptId) return;
-      if (
-        el.classList.contains("is-expanded") ||
-        el.classList.contains("is-collapsing") ||
-        el.style.width
-      ) {
-        restoreRestingSpine(el, id);
-      }
+      const expandedLike = el.classList.contains("is-expanded") || el.classList.contains("is-collapsing");
+      // Real jackets keep an inline face width at rest. That is not an orphan expand.
+      const strayWidth = !!el.style.width && !el.classList.contains("has-jacket");
+      if (expandedLike || strayWidth) restoreRestingSpine(el, id);
     });
   }
 
@@ -660,7 +707,10 @@ export function mountBookshelf(root, options = {}) {
     if (!el) return;
     // Keep is-expanded + expandedId during shrink so a click mid-collapse still takes C path.
     // Drop inline width FIRST — ux17 face size would otherwise beat .is-collapsing CSS width.
-    el.style.removeProperty("width");
+    // Real jackets keep their resting face; clearing width snaps them to a 28px cloth bar.
+    const found = bookById(id);
+    if (found && realCover(found.book)) applyFaceSize(el, found.book, { expanded: false });
+    else el.style.removeProperty("width");
     el.classList.add("is-collapsing");
     const token = ++collapseToken;
     await wait(cssMs("--t-collapse", 230));
@@ -677,30 +727,55 @@ export function mountBookshelf(root, options = {}) {
     collapseToken += 1;
   }
 
-  // Multi-note books leave the shelf for /bookshelf/<id>. No extract flyer.
-  function leaveForHub(book) {
+  // Two or more notes: the shelf extract lands on the book hub, not the first note.
+  // List → article is an ordinary link and does not use this.
+  function isHubBook(book) {
     const posts = book && Array.isArray(book.posts) ? book.posts : [];
-    const href = book && typeof book.hub === "string" ? book.hub : "";
-    if (posts.length < 2 || !href) return false;
-    const y = scrollLock ? scrollLock.y : readScroll().y;
-    try { sessionStorage.setItem("garden-bookshelf-scroll", String(y)); } catch (_) {}
-    window.location.assign(href);
-    return true;
+    return posts.length >= 2 && typeof book.hub === "string" && !!book.hub;
+  }
+
+  function samePath(a, b) {
+    const norm = (value) => String(value || "").replace(/\/+$/u, "") || "/";
+    return norm(a) === norm(b);
+  }
+
+  function rememberHubUrl() {
+    if (!openBook || !openBook.hubMode || !openBook.book || !openBook.book.hub) return;
+    if (openBook.hubEntry === "direct" || openBook.hubEntry === "pushed") return;
+    const url = openBook.book.hub;
+    if (samePath(location.pathname, url)) {
+      openBook.hubEntry = "direct";
+      return;
+    }
+    try {
+      history.pushState(history.state, "", url);
+      openBook.hubEntry = "pushed";
+    } catch (_) {
+      openBook.hubEntry = "direct";
+    }
+  }
+
+  function releaseHubUrl() {
+    if (!openBook || !openBook.hubMode || openBook.hubEntry === "history") return;
+    if (samePath(location.pathname, shelfHref)) return;
+    try { history.replaceState(history.state, "", shelfHref); } catch (_) {}
   }
 
   async function onCoverClick(id, el) {
     if (busy) return;
     const found = bookById(id);
     if (!found || found.book.filler) return;
-    if (leaveForHub(found.book)) return;
-    await openBookFlow(found.book, found.cat, el, { fromExpanded: false, asSpine: false });
+    await openBookFlow(found.book, found.cat, el, {
+      fromExpanded: false,
+      asSpine: false,
+      hub: isHubBook(found.book),
+    });
   }
 
   async function onSpineClick(id, el, ev) {
     if (busy) return;
     const found = bookById(id);
     if (!found || found.book.filler) return;
-    if (leaveForHub(found.book)) return;
     if (!found.book.cover) return;
 
     const isTouch = ev && (ev.pointerType === "touch" || ("ontouchstart" in window && window.matchMedia("(hover: none)").matches));
@@ -709,7 +784,11 @@ export function mountBookshelf(root, options = {}) {
     if (isTouch || window.matchMedia("(hover: none)").matches) {
       touchExpandedId = null;
       if (expandedId) await collapseSpine(expandedId);
-      await openBookFlow(found.book, found.cat, el, { fromExpanded: false, asSpine: true });
+      await openBookFlow(found.book, found.cat, el, {
+        fromExpanded: false,
+        asSpine: true,
+        hub: isHubBook(found.book),
+      });
       return;
     }
 
@@ -717,10 +796,105 @@ export function mountBookshelf(root, options = {}) {
     const fromExpanded =
       (expandedId === id && el.classList.contains("is-expanded")) ||
       el.classList.contains("is-collapsing");
-    await openBookFlow(found.book, found.cat, el, { fromExpanded, asSpine: true });
+    await openBookFlow(found.book, found.cat, el, {
+      fromExpanded,
+      asSpine: true,
+      hub: isHubBook(found.book),
+    });
+  }
+
+  function showNoteChrome() {
+    noteView.classList.remove("is-hub");
+    const hub = $("#hubPanel");
+    if (hub) {
+      hub.hidden = true;
+      hub.replaceChildren();
+    }
+  }
+
+  function showHubChrome() {
+    noteView.classList.add("is-hub");
+    const hub = $("#hubPanel");
+    if (hub) hub.hidden = false;
+  }
+
+  function hubKindLabel(kind) {
+    const t = ui();
+    switch (kind) {
+      case "overview":
+        return t.bookHubOverview;
+      case "excerpt":
+        return t.bookHubExcerpt;
+      case undefined:
+        return "";
+      default: {
+        const unexpected = kind;
+        return unexpected;
+      }
+    }
+  }
+
+  function hubDay(value) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return String(value).slice(0, 10);
+    return new Intl.DateTimeFormat("en-CA", {
+      timeZone: "Asia/Shanghai",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    }).format(date);
+  }
+
+  function hubSourceList(book) {
+    const list = Array.isArray(book.sources) ? book.sources : [];
+    const douban = list.filter((source) => source.label === "豆瓣" || /^douban$/iu.test(source.label));
+    const pdf = list.filter((source) => /pdf/iu.test(source.label));
+    return [...douban, ...pdf];
+  }
+
+  function fillHub(book) {
+    showHubChrome();
+    const t = ui();
+    const panel = $("#hubPanel");
+    if (!panel) return;
+    const jacket = realCover(book) ? coverSrc(book) : "";
+    const sources = hubSourceList(book).map((source) => {
+      const external = /^(?:https?:)?\/\//iu.test(source.href);
+      const pdf = /pdf/iu.test(source.label);
+      const attrs = external ? ` target="_blank" rel="noopener noreferrer"` : "";
+      return `<span class="book-hub-source"><a class="book-hub-chip" href="${escapeHtml(source.href)}"${attrs}>${escapeHtml(source.label)}<span class="ext" aria-hidden="true">↗</span></a>${pdf ? `<span class="book-hub-source-note">${escapeHtml(t.bookHubPdfNote)}</span>` : ""}</span>`;
+    }).join("");
+    const notes = (Array.isArray(book.posts) ? book.posts : []).map((entry) => {
+      const label = hubKindLabel(entry.kind);
+      const href = entry.href || `/blog/${entry.path}`;
+      const when = entry.date ? hubDay(entry.date) : "";
+      const count = entry.words ? t.wordCount(entry.words) : "";
+      const meta = when || count
+        ? `<p class="book-hub-note-meta">${escapeHtml(when)}${when && count ? " · " : ""}${escapeHtml(count)}</p>`
+        : "";
+      return `<li><a class="book-hub-note" href="${escapeHtml(href)}">${label ? `<p class="book-hub-note-label">${escapeHtml(label)}</p>` : ""}<h3>${escapeHtml(entry.title || book.title)}</h3>${entry.summary ? `<p class="book-hub-note-sum">${escapeHtml(entry.summary)}</p>` : ""}${meta}</a></li>`;
+    }).join("");
+    panel.innerHTML = `<div class="book-hub">
+      <section class="book-hub-card" aria-labelledby="book-hub-title">
+        ${jacket ? `<div class="book-hub-cover"><img src="${escapeHtml(jacket)}" alt="" width="148"></div>` : ""}
+        <div class="book-hub-meta">
+          <h1 id="book-hub-title">${escapeHtml(book.title)}</h1>
+          ${book.author ? `<p class="book-hub-author">${escapeHtml(book.author)}</p>` : ""}
+          ${sources ? `<div class="book-hub-sources">${sources}</div>` : ""}
+        </div>
+      </section>
+      <h2 class="book-hub-notes-head">${escapeHtml(t.bookHubNotes)}</h2>
+      <ul class="book-hub-notes">${notes}</ul>
+    </div>`;
+    const read = $("#noteRead");
+    if (read) {
+      read.hidden = true;
+      read.removeAttribute("href");
+    }
   }
 
   function fillNote(book, cat) {
+    showNoteChrome();
     $("#noteCat").textContent = cat.name;
     $("#noteTitle").textContent = book.title;
     $("#noteAuthor").textContent = book.author || "";
@@ -892,10 +1066,23 @@ export function mountBookshelf(root, options = {}) {
     el.style.opacity = String(opacity);
     el.style.zIndex = "80";
     el.style.pointerEvents = "none";
-    const label = document.createElement("span");
-    label.className = "flyer-spine-slot-label";
-    label.textContent = book.spine || book.title || "";
-    el.appendChild(label);
+    if (book && book.cover && !book.filler) {
+      el.classList.add("has-jacket", coverClass(book));
+      el.style.backgroundColor = "transparent";
+      el.style.backgroundImage = "none";
+      el.style.padding = "0";
+      const img = document.createElement("img");
+      img.className = "flyer-spine-slot-img";
+      img.alt = "";
+      img.draggable = false;
+      img.src = coverSrc(book);
+      el.appendChild(img);
+    } else {
+      const label = document.createElement("span");
+      label.className = "flyer-spine-slot-label";
+      label.textContent = book.spine || book.title || "";
+      el.appendChild(label);
+    }
     stage.appendChild(el);
     return el;
   }
@@ -1047,16 +1234,31 @@ export function mountBookshelf(root, options = {}) {
     ];
   }
 
-  // Article is gone by ~0.12 (230ms). Shrink has already started on frame 0.
+  // Close start must not composite the open spread on the note (double exposure).
+  // The article is gone within ~80ms. The flyer stays hidden until then, already
+  // collapsed to a single jacket, then flies home.
   function noteOutKeys() {
     return [
       { offset: 0, opacity: 1 },
-      { offset: 0.05, opacity: 0.35 },
-      { offset: 0.12, opacity: 0 },
+      { offset: 0.02, opacity: 0 },
       { offset: 1, opacity: 0 },
     ];
   }
 
+  function closedReturnLeftKeys() {
+    return [
+      { offset: 0, transform: "rotateY(180deg)" },
+      { offset: 1, transform: "rotateY(180deg)" },
+    ];
+  }
+
+  function closedReturnRightKeys() {
+    return [
+      { offset: 0, opacity: 0, transform: "rotateY(0deg)" },
+      { offset: 1, opacity: 0, transform: "rotateY(0deg)" },
+    ];
+  }
+
   // 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.
@@ -1367,7 +1569,7 @@ export function mountBookshelf(root, options = {}) {
       "is-expanded",
       "is-collapsing"
     );
-    clearSeatCover(el);
+    if (!(book && realCover(book))) clearSeatCover(el);
     // Explicit removeProperty — kills commitStyles leftovers like opacity:0 / transform
     [
       "width",
@@ -1391,6 +1593,10 @@ export function mountBookshelf(root, options = {}) {
       applyFaceSize(el, book);
     } else if (book && el.classList.contains("spine") && book.cover && !book.filler) {
       applyFaceSize(el, book);
+      if (realCover(book)) {
+        el.classList.add("has-jacket");
+        mountSeatCover(el, book);
+      }
     }
   }
 
@@ -1560,6 +1766,24 @@ export function mountBookshelf(root, options = {}) {
     }
   }
 
+  async function prepareHub(book) {
+    fillHub(book);
+    noteView.hidden = false;
+    noteView.classList.add("is-preparing", "is-hub");
+    noteView.classList.remove("is-open");
+    noteView.style.opacity = "0";
+    const img = $("#hubPanel") && $("#hubPanel").querySelector("img");
+    if (img && !coverImgReady(img)) {
+      try {
+        const decodeOrLoad = img.decode
+          ? img.decode()
+          : new Promise((res) => { img.onload = res; img.onerror = res; });
+        await Promise.race([decodeOrLoad.catch(() => {}), wait(400)]);
+      } catch (_) {}
+    }
+    void noteView.offsetWidth;
+  }
+
   async function prepareNote(book, cat) {
     fillNote(book, cat);
     noteView.hidden = false;
@@ -1610,13 +1834,22 @@ export function mountBookshelf(root, options = {}) {
     restoreSlot(el);
   }
 
-  async function openBookFlow(book, cat, sourceEl, { fromExpanded, asSpine }) {
+  async function openBookFlow(book, cat, sourceEl, { fromExpanded, asSpine, hub }) {
     if (busy) return;
     busy = true;
     const myFlow = ++flowSeq;
     document.body.classList.add("is-busy");
     root.classList.remove("is-return");
-    openBook = { book, cat, asSpine, fromExpanded: !!fromExpanded, openSeatRect: null };
+    const hubMode = !!hub && isHubBook(book);
+    openBook = {
+      book,
+      cat,
+      asSpine,
+      fromExpanded: !!fromExpanded,
+      hubMode,
+      hubEntry: hubMode ? "pending" : "",
+      openSeatRect: null,
+    };
     openFromExpanded = !!fromExpanded;
 
     // ux6b: freeze window scroll to idle/expand home (face-out stuck ~197px up).
@@ -1629,7 +1862,8 @@ export function mountBookshelf(root, options = {}) {
     } catch (_) {}
 
     try {
-      await prepareNote(book, cat);
+      if (hubMode) await prepareHub(book);
+      else await prepareNote(book, cat);
     } catch (_) {
       // Decode/prepare failed — still open; never leave is-busy hung.
     }
@@ -1644,6 +1878,7 @@ export function mountBookshelf(root, options = {}) {
       noteView.classList.add("is-open");
       noteView.style.opacity = "1";
       parkShelf();
+      rememberHubUrl();
       releaseScrollLock();
       busy = false;
       document.body.classList.remove("is-busy");
@@ -1989,6 +2224,7 @@ export function mountBookshelf(root, options = {}) {
         unlockNoteClicks();
         holdFlyerUnderNote();
         parkShelf();
+        rememberHubUrl();
         restoreSlot(sourceEl, book);
         sourceEl.classList.remove("is-extracting");
         // Keep sourceEl as invisible reserved seat while note open (no gray plate).
@@ -2026,13 +2262,14 @@ export function mountBookshelf(root, options = {}) {
     const targetMode = pageMode;
 
     if (reduceMotion()) {
-      noteView.classList.remove("is-open", "is-preparing");
+      noteView.classList.remove("is-open", "is-preparing", "is-hub");
       noteView.hidden = true;
       noteView.style.opacity = "";
       expandedId = null;
       openFromExpanded = false;
       unparkShelf();
       renderShelf();
+      releaseHubUrl();
       clearGhost(
         targetMode === "covers"
           ? $(`.cover[data-book-id="${book.id}"]`)
@@ -2069,47 +2306,36 @@ export function mountBookshelf(root, options = {}) {
       stashEarly.Tp2 &&
       stashEarly.Tp3
     ) {
+      // Hide the spread on the first frame. Shrinking starts now, but the
+      // open pages must not sit on top of the note.
       heldEarly.style.visibility = "visible";
       heldEarly.style.zIndex = "70";
-      heldEarly.style.opacity = "1";
+      heldEarly.style.opacity = "0";
       if (heldEarly._board) {
         heldEarly._board.style.opacity = "0";
         heldEarly._board.style.visibility = "hidden";
       }
+      if (heldEarly._right) heldEarly._right.style.opacity = "0";
+      if (heldEarly._left) heldEarly._left.style.transform = "rotateY(180deg)";
+      if (heldEarly._leftThick) heldEarly._leftThick.style.opacity = "0";
+      if (heldEarly._rightThick) heldEarly._rightThick.style.opacity = "0";
+      if (heldEarly._gutter) heldEarly._gutter.style.opacity = "0";
       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(() => {
+      // Backup if the fade is dropped: the article must not still be up.
+      wait(Math.round(CLOSE_MS * 0.05)).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
-        );
+        earlyLeft = heldEarly._left.animate(closedReturnLeftKeys(), 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
-        );
+        earlyRight = heldEarly._right.animate(closedReturnRightKeys(), closeMotion);
       }
     }
 
@@ -2141,9 +2367,10 @@ export function mountBookshelf(root, options = {}) {
       try { earlyLeft && earlyLeft.cancel(); } catch (_) {}
       try { earlyRight && earlyRight.cancel(); } catch (_) {}
       root.classList.remove("is-return");
-      noteView.classList.remove("is-open", "is-preparing");
+      noteView.classList.remove("is-open", "is-preparing", "is-hub");
       noteView.hidden = true;
       noteView.style.opacity = "";
+      releaseHubUrl();
       openBook = null;
       busy = false;
       document.body.classList.remove("is-busy");
@@ -2297,19 +2524,20 @@ export function mountBookshelf(root, options = {}) {
         }
       }
     }
-    // Ensure open-spread leaf pose at Tfull so reverse hinge is continuous (under note).
-    if (flyer._left) flyer._left.style.transform = "rotateY(8deg)";
+    // Collapse to one jacket before the flyer is allowed to paint. An open
+    // spread here is the full-screen double exposure over the note.
+    if (flyer._left) flyer._left.style.transform = "rotateY(180deg)";
     if (flyer._right) {
-      flyer._right.style.transform = "rotateY(-8deg)";
-      flyer._right.style.opacity = "1";
+      flyer._right.style.transform = "rotateY(0deg)";
+      flyer._right.style.opacity = "0";
     }
     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";
+    if (flyer._leftThick) flyer._leftThick.style.opacity = "0";
+    if (flyer._rightThick) flyer._rightThick.style.opacity = "0";
+    if (flyer._gutter) flyer._gutter.style.opacity = "0";
     const closeSpineLabel = flyer._cover && flyer._cover.querySelector(".flyer-spine-label");
     if (closeSpineLabel) closeSpineLabel.style.opacity = "0";
     // ux23: spines may swap to img-only; covers keep applyCoverImage bg under img
@@ -2357,7 +2585,7 @@ export function mountBookshelf(root, options = {}) {
     // 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;
-    if (!earlyMove) flyer.style.opacity = "1";
+    if (!earlyMove) flyer.style.opacity = "0";
 
     // ux14: TIME-REVERSE of open pathTs — ban separately computed return / end-segment seek.
     const PUT_MS = 380;
@@ -2380,33 +2608,13 @@ export function mountBookshelf(root, options = {}) {
     );
     // Reverse hinge on SAME layer while shrink (open was 0.32→0.68 hinge).
     const aLeftClose = earlyLeft || (flyer._left
-      ? flyer._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
-        )
+      ? flyer._left.animate(closedReturnLeftKeys(), closeMotion)
       : null);
     const aRightClose = earlyRight || (flyer._right
-      ? flyer._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
-        )
+      ? flyer._right.animate(closedReturnRightKeys(), closeMotion)
       : null);
     const closedFaceOut = [
-      { offset: 0, opacity: 1 },
-      { offset: 0.18, opacity: 0.7 },
-      { offset: 0.28, opacity: 0 },
+      { offset: 0, opacity: 0 },
       { offset: 1.0, opacity: 0 },
     ];
     const aBoardClose = null;
@@ -2415,8 +2623,7 @@ export function mountBookshelf(root, options = {}) {
     const aGutterClose = flyer._gutter
       ? flyer._gutter.animate(
           [
-            { offset: 0, opacity: 1 },
-            { offset: 0.24, opacity: 0 },
+            { offset: 0, opacity: 0 },
             { offset: 1.0, opacity: 0 },
           ],
           closeOpts
@@ -2450,15 +2657,19 @@ 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.68, opacity: 1 },
-            { offset: 0.80, opacity: 0 },
+            // Hidden while the note is still up, then the collapsed jacket
+            // flies home. Do not hold opacity 1 at the full spread.
+            { offset: 0, opacity: 0 },
+            { offset: 0.06, opacity: 0 },
+            { offset: 0.12, opacity: 1 },
+            { offset: 0.72, opacity: 1 },
+            { offset: 0.84, opacity: 0 },
             { offset: 1.0, opacity: 0 },
           ]
         : [
-            { offset: 0, opacity: 1 },
+            { offset: 0, opacity: 0 },
+            { offset: 0.06, opacity: 0 },
+            { offset: 0.12, opacity: 1 },
             { offset: flyerFadeAt, opacity: 1 },
             { offset: 1.0, opacity: 0 },
           ],
@@ -2503,13 +2714,17 @@ export function mountBookshelf(root, options = {}) {
       ? coverImg.animate(
           targetMode === "spines"
             ? [
-                { offset: 0, opacity: 1 },
-                { offset: 0.68, opacity: 1 },
-                { offset: 0.80, opacity: 0 },
+                { offset: 0, opacity: 0 },
+                { offset: 0.06, opacity: 0 },
+                { offset: 0.12, opacity: 1 },
+                { offset: 0.72, opacity: 1 },
+                { offset: 0.84, opacity: 0 },
                 { offset: 1, opacity: 0 },
               ]
             : [
-                { offset: 0, opacity: 1 },
+                { offset: 0, opacity: 0 },
+                { offset: 0.06, opacity: 0 },
+                { offset: 0.12, opacity: 1 },
                 { offset: flyerFadeAt, opacity: 1 },
                 { offset: 1, opacity: 0 },
               ],
@@ -2593,7 +2808,7 @@ export function mountBookshelf(root, options = {}) {
       slot.style.opacity = "1";
       slot.style.transform = "none";
       root.classList.remove("is-return");
-      noteView.classList.remove("is-open", "is-preparing");
+      noteView.classList.remove("is-open", "is-preparing", "is-hub");
       noteView.hidden = true;
       noteView.style.opacity = "";
       noteView.style.zIndex = "";
@@ -2664,6 +2879,7 @@ export function mountBookshelf(root, options = {}) {
       });
       try { shelfView.style.removeProperty("min-height"); } catch (_) {}
       shelfView.style.opacity = "";
+      releaseHubUrl();
       openBook = null;
       openFromExpanded = false;
       releaseScrollLock();
@@ -2702,6 +2918,13 @@ export function mountBookshelf(root, options = {}) {
 
   listen($("#backBtn"), "click", () => closeBookFlow());
 
+  listen(window, "popstate", () => {
+    if (!openBook || !openBook.hubMode || busy || !openBook.book) return;
+    if (samePath(location.pathname, openBook.book.hub)) return;
+    openBook.hubEntry = "history";
+    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) => {
@@ -2717,7 +2940,7 @@ export function mountBookshelf(root, options = {}) {
     busy = false;
     flowSeq += 1;
     document.body.classList.remove("is-busy");
-    noteView.classList.remove("is-open", "is-preparing");
+    noteView.classList.remove("is-open", "is-preparing", "is-hub");
     noteView.hidden = true;
     noteView.style.opacity = "";
     noteView.style.zIndex = "";
@@ -2737,7 +2960,7 @@ export function mountBookshelf(root, options = {}) {
   listen(root, "click", (event) => {
     const target = event.target;
     if (!target || !target.closest) return;
-    const link = target.closest("a.flyer-page-more, a.note-read");
+    const link = target.closest("a.flyer-page-more, a.note-read, a.book-hub-note");
     if (!link || !root.contains(link)) return;
     const y = scrollLock ? scrollLock.y : readScroll().y;
     try { sessionStorage.setItem("garden-bookshelf-scroll", String(y)); } catch (_) {}
@@ -2755,12 +2978,73 @@ export function mountBookshelf(root, options = {}) {
     /* intentionally empty — enter-time density + face sizes stay put */
   });
 
+  // Direct /bookshelf/<id>: hub is already the page. Shelf sits underneath so
+  // 返回书架 can play the return flyer. No extract — there was no click.
+  function presentHubImmediate(book) {
+    const found = bookById(book.id);
+    const cat = found ? found.cat : { name: "" };
+    const slot = $(`.spine[data-book-id="${book.id}"]`) || $(`.cover[data-book-id="${book.id}"]`);
+    if (!slot) return;
+    fillHub(book);
+    noteView.hidden = false;
+    noteView.classList.add("is-open", "is-hub");
+    noteView.classList.remove("is-preparing");
+    noteView.style.opacity = "1";
+    const homeRect = copyRect(rectOf(slot));
+    const mid = midRect(book);
+    const wp = buildSlotWaypoints(homeRect, mid, book);
+    const startAsSpine = slot.classList.contains("spine");
+    const flyer = makeFlyer(book, homeRect, { spineShape: false, spreadOpen: true });
+    flyer.style.opacity = "0";
+    if (flyer._left) flyer._left.style.transform = "rotateY(180deg)";
+    if (flyer._right) flyer._right.style.opacity = "0";
+    if (flyer._board) {
+      flyer._board.style.opacity = "0";
+      flyer._board.style.visibility = "hidden";
+    }
+    slot.classList.add("is-placeholder");
+    slot.style.opacity = "0";
+    openBook = {
+      book,
+      cat,
+      asSpine: startAsSpine,
+      fromExpanded: false,
+      hubMode: true,
+      hubEntry: "direct",
+      openSeatRect: { ...homeRect },
+      homeRect: { ...homeRect },
+      homeMode: startAsSpine ? "spines" : "covers",
+      pathMid: copyRect(mid),
+      pathWp: wp,
+      pathTs: {
+        T0: wp.T0,
+        Tp1: wp.Tp1,
+        Tp2: wp.Tp2,
+        Tp3: wp.Tp3,
+        TdualClosed: wp.Tp2,
+        Tgrow: wp.Tp3,
+        Tnear: lerpTS(wp.Tp3, wp.Tfull, 0.5),
+        Tfull: wp.Tfull,
+      },
+      spineHome: copyRect(homeRect),
+      heldFlyer: flyer,
+    };
+    if (startAsSpine) openBook.spineOut = spineSlotOutDelta(homeRect, mid);
+    parkShelf();
+    rememberScrollHome();
+    armScrollLock();
+  }
+
   // init
   const q = parseQuery();
   if (q) modeOverride = q;
   enableDebugChrome();
   applyModePreference();
   preloadCovers();
+  if (initialHub) {
+    const found = bookById(initialHub);
+    if (found && isHubBook(found.book)) presentHubImmediate(found.book);
+  }
 
   return () => {
     for (const fn of unlisten) fn();

package/app/components/bookshelf/schema.ts

@@ -59,16 +59,16 @@ export type BookshelfFileSource = {
  *   the same path as `posts[0]`. Otherwise the shelf is rejected.
  * - one note: the shelf opens that note as it does today (extract flyer, note,
  *   return flyer). There is no book hub.
- * - two or more notes: a spine click leaves the shelf for `/bookshelf/<id>`
- *   (本书). It does not open `posts[0]` and it does not play the flyer.
+ * - two or more notes: a spine click plays the same extract flyer and lands
+ *   on `/bookshelf/<id>` (本书). It does not open `posts[0]`.
  *   The hub card is the locked book-multi layout: the jacket slot is 148px
  *   wide, the image fills that width, and the height follows the file's ratio.
  *   There is no plate behind the jacket. A Douban scan's white border is
  *   cropped in the jacket file before it is committed; the build copies that
  *   file into `/media/covers/` unchanged.
  *   「我的笔记」 lists the notes. A note card is an ordinary link to that
- *   article; article ↔ list does not play the flyer. The flyer runs only when
- *   a single-note book is extracted from the shelf and put back.
+ *   article; article ↔ list does not play the flyer. Returning from the hub
+ *   to the shelf plays the close flyer. A single note uses that same flyer.
  * - `sources` are optional `{ label, href }` chips. The hub shows 豆瓣 and PDF
  *   only. The PDF chip carries the caption 「（仅分享，侵权删）」. No chapter list.
  * - `note` is Markdown used only when the book has no posts.

package/app/components/bookshelf/types.ts

@@ -86,4 +86,9 @@ export type BookshelfProps = {
    * unset and keeps its own full-viewport frame.
    */
   embedded?: boolean;
+  /**
+   * Open `/bookshelf/<id>` already on the hub, with the shelf parked under it
+   * so the return flyer can run. A shelf click does not use this.
+   */
+  initialHub?: string;
 };

package/docs/handbook/config.md

@@ -130,7 +130,7 @@ columns:
 
 `/bookshelf` 在站点写了 `content/bookshelf.yaml` 时渲染这里的书，并带上站点顶栏，和其他页面一样可以被索引。没有这个文件时，`/bookshelf` 只在引擎包内的中文验收里显示内置 demo（无顶栏、不收录）；正式站要真书目，就放下这份文件。
 
-架上每一条 `books` 是一本书。`post: note/ddia` 是只有一篇笔记时的简写。一本书有多篇笔记时写 `posts`，点书脊进入 `/bookshelf/<id>`（本书），不打开第一篇，也不播放抽书动画。本书页左边是书衣（宽 148，高度跟图片走），右边是书名、作者，以及豆瓣和 PDF 两枚出处胶囊；PDF 后面有一行「（仅分享，侵权删）」。下面是「我的笔记」，点进去才是文章。单篇笔记仍走原来的抽书和合上。
+架上每一条 `books` 是一本书。`post: note/ddia` 是只有一篇笔记时的简写。一本书有多篇笔记时写 `posts`，点书脊播放抽书动画，落到 `/bookshelf/<id>`（本书），不打开第一篇。从本书页回到书架播放合上动画。本书页左边是书衣（宽 148，高度跟图片走），右边是书名、作者，以及豆瓣和 PDF 两枚出处胶囊；PDF 后面有一行「（仅分享，侵权删）」。下面是「我的笔记」，点进去才是文章，这一步没有飞页。单篇笔记仍走原来的抽书和合上。
 
 `cover` 是书衣，只给书架、抽书飞页和本书页用。文件放在 `content/covers/`，构建时会复制到 `/media/covers/`，即使没有任何博文的 front matter 引用这个文件名。豆瓣封面四周的白边在放进 `content/covers/` 之前裁好，构建不会再改像素。笔记页的横幅仍是各篇 front matter 的 `cover`，不要把那张图填进书衣。yaml 不写 `cover` 时，书衣才沿用第一篇的封面。`color`（`#rgb` 或 `#rrggbb`）画书脊和单篇打开后的纸页。
 

package/docs/handbook/en/config.md

@@ -130,7 +130,7 @@ columns:
 
 When a site has `content/bookshelf.yaml`, `/bookshelf` renders those books inside the site header and is indexed with the other pages. Without that file, `/bookshelf` is only the package's built-in demo (Chinese click-test, no header, not indexed). A production site supplies the file.
 
-Each `books` entry is one volume. `post: note/ddia` is the one-note shorthand. Several notes use `posts`. Clicking that spine opens `/bookshelf/<id>` and does not open the first note or play the extract animation. The book page shows a 148px-wide jacket (height follows the image), the title, the author, and only the Douban and PDF chips. The PDF chip is followed by a short sharing note. My notes lists the notes; each card is a normal link to the article. A single note still uses the extract and return animation.
+Each `books` entry is one volume. `post: note/ddia` is the one-note shorthand. Several notes use `posts`. Clicking that spine plays the extract animation and lands on `/bookshelf/<id>`. It does not open the first note. Returning from that page to the shelf plays the close animation. The book page shows a 148px-wide jacket (height follows the image), the title, the author, and only the Douban and PDF chips. The PDF chip is followed by a short sharing note. My notes lists the notes; each card is a normal link to the article and does not play the flyer. A single note still uses the extract and return animation.
 
 `cover` is the jacket for the shelf, the flyer, and the book page. The file lives in `content/covers/` and the build copies it to `/media/covers/`, even when no post front matter names that file. Crop a Douban scan's white margin before committing the file; the build does not change pixels. A note's hero stays that post's front matter `cover`. Omit the jacket and it falls back to the first note's cover. `color` (`#rgb` or `#rrggbb`) is the spine and the single-note open page.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",