hd-garden 0.9.0 → 0.9.2

package/app/components/bookshelf/bookshelf.css

@@ -6,7 +6,10 @@
 .bookshelf-demo .cover.is-extracting:hover,
 .bookshelf-demo .spine.is-extracting,
 .bookshelf-demo .spine.is-extracting:hover,
-.bookshelf-demo .spine.is-extracting.is-expanded {
+.bookshelf-demo .spine.is-extracting.is-expanded,
+.bookshelf-demo .spine.is-seat,
+.bookshelf-demo .spine.is-seat:hover,
+.bookshelf-demo .spine.is-seat:focus-visible {
   transform: none !important;
   box-shadow: none !important;
   transition: none !important;
@@ -232,18 +235,22 @@
     z-index: 2;
   }
 }
-.bookshelf-demo .cover.is-placeholder {
-  /* ux13+ux24: invisible seat — no gray/wood/bk plate while flyer is out */
+.bookshelf-demo .cover.is-placeholder,
+.bookshelf-demo .spine.is-placeholder {
+  /* Empty seat while the flyer owns the motion: shelf surface only.
+     A bk-* fill here is the gray/lavender plate behind the real cover. */
   opacity: 0 !important;
   visibility: hidden !important;
   background-color: transparent !important;
   background-image: none !important;
-  filter: none;
+  filter: none !important;
   pointer-events: none;
-  box-shadow: none;
+  box-shadow: none !important;
+  color: transparent !important;
   transform: none !important;
 }
-.bookshelf-demo .cover.is-placeholder > .cover-art {
+.bookshelf-demo .cover.is-placeholder > .cover-art,
+.bookshelf-demo .spine.is-placeholder > .cover-art {
   visibility: hidden !important;
   opacity: 0 !important;
 }
@@ -339,15 +346,7 @@
     z-index: 2;
   }
 }
-.bookshelf-demo .spine.is-placeholder {
-  /* ux13: invisible seat — ban gray ghost plate */
-  opacity: 0;
-  filter: none;
-  pointer-events: none;
-  box-shadow: none;
-  transform: none !important;
-}
-.bookshelf-demo .spine.is-placeholder span { opacity: 0; }
+.bookshelf-demo .spine.is-placeholder span { opacity: 0 !important; visibility: hidden !important; }
 .bookshelf-demo .cover.is-placeholder.is-landing,
 .bookshelf-demo .spine.is-placeholder.is-landing {
   opacity: 0;
@@ -356,6 +355,25 @@
 
 /* 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. */
+.bookshelf-demo .spine.is-expanded,
+.bookshelf-demo .spine.is-extracting {
+  background-color: transparent !important;
+}
+.bookshelf-demo .spine.is-expanded > .cover-art,
+.bookshelf-demo .spine.is-extracting > .cover-art {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center top;
+  display: block;
+  pointer-events: none;
+  z-index: 1;
+  border-radius: inherit;
+}
 .bookshelf-demo .spine[class*="img-"] {
   background-image: none !important;
 }
@@ -556,15 +574,32 @@
   align-items: flex-start;
   margin-bottom: 36px;
 }
+.bookshelf-demo .note-meta {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+/* Settled note header: size the box to the picture. A fixed 2:3 frame with
+   background-size:cover center-crops landscape heroes (Obsidian → "sid"). */
 .bookshelf-demo .note-cover {
-  width: 120px;
-  height: 180px;
-  flex-shrink: 0;
+  width: max-content;
+  max-width: min(420px, 46%);
+  height: auto;
+  flex: 0 0 auto;
   border-radius: 2px 3px 0 0;
-  background-size: cover;
-  background-position: center top;
-  background-color: #2a2a2a;
+  background-color: transparent;
+  background-image: none;
   box-shadow: 0 8px 20px rgba(40,30,20,0.12);
+  line-height: 0;
+}
+.bookshelf-demo .note-cover-img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 180px;
+  object-fit: contain;
+  object-position: center;
+  border-radius: inherit;
 }
 .bookshelf-demo .note-cat {
   margin: 0 0 8px;
@@ -674,7 +709,7 @@
   contain: layout style;
 }
 .bookshelf-demo .flyer.is-ready {
-  will-change: transform, opacity;
+  will-change: translate, scale, opacity;
 }
 
 /* Soft oval foot shadow — no filter:blur (blur+anim = jitter) */
@@ -710,21 +745,16 @@
   backface-visibility: hidden;
 }
 
-/* Thin cover board peeking under page block (thickness cue) */
+/* ux27 plate ban: this used to be a full-spread shell (fallback #6a7a98 / #5a6a88,
+   and shell-hi of dark covers reads the same gray-lavender). It sat wider than
+   the jacket during lift and put-back. Fore-edge stays on .flyer-thickness. */
 .bookshelf-demo .flyer-board {
-  position: absolute;
-  inset: -2% -1.2% -3.5% -1.2%;
-  border-radius: 3px 4px 2px 2px;
-  /* ux26: shell = this book's cover dominant (via --shell); ban site-wide brown */
-  background: linear-gradient(
-    180deg,
-    var(--shell-hi, #6a7a98) 0%,
-    var(--shell, #5a6a88) 55%,
-    var(--shell-lo, #3a4a68) 100%
-  );
-  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
-  transform: translateZ(-8px);
-  z-index: 0;
+  display: none !important;
+  background: none !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
 }
 
 .bookshelf-demo .flyer-leaf {
@@ -756,7 +786,7 @@
 /* Cover on BACK of left leaf — camera-facing when leaf folded (180°) */
 .bookshelf-demo .flyer-face-cover {
   transform: rotateY(180deg);
-  background-color: transparent; /* ux24: no preset wood plate */
+  background-color: transparent !important; /* ux24/ux27: bk-* must not fill behind the img */
   /* No background-image here — .img-* / inline applyCoverImage owns the photo.
      Gradients-only used to override img classes → flat brown/gray close flash. */
   box-shadow:
@@ -779,17 +809,18 @@
 }
 .bookshelf-demo .flyer-spine-label { pointer-events: none; }
 
-/* ux15 plate kept inert; ux16 uses full-height .flyer-spine-slot instead */
+/* ux15 plate kept inert; ux16 uses full-height .flyer-spine-slot instead.
+   Never paint the lavender shell fallback if a leftover plate node is mounted. */
 .bookshelf-demo .flyer-spine-land-plate {
   position: absolute;
   inset: 0;
   pointer-events: none;
   border-radius: inherit;
   z-index: 1;
-  display: none;
-}
-.bookshelf-demo .flyer-spine-land-plate:not([class*="bk-"]) {
-  background: linear-gradient(180deg, var(--shell-hi, #6a7a98) 0%, var(--shell, #5a6a88) 100%);
+  display: none !important;
+  background: none !important;
+  background-color: transparent !important;
+  opacity: 0 !important;
 }
 
 /* ux16: exact homeRect standing spine — full height, spine width, slides out/in */
@@ -999,6 +1030,18 @@
   overflow: auto;
 }
 
+/* Close: flyer owns the motion. The note used to stay at z-index 75, so the
+   article sat on top of the return for the whole fade and the shrink was hidden. */
+.bookshelf-demo.is-return .stage { z-index: 80; }
+.bookshelf-demo.is-return .note-view,
+.bookshelf-demo.is-return .note-view.is-preparing,
+.bookshelf-demo.is-return .note-view.is-open { z-index: 60; }
+.bookshelf-demo.is-site.is-return .stage { z-index: 36; }
+.bookshelf-demo.is-site.is-return .open-backdrop { z-index: 30; }
+.bookshelf-demo.is-site.is-return .note-view,
+.bookshelf-demo.is-site.is-return .note-view.is-preparing,
+.bookshelf-demo.is-site.is-return .note-view.is-open { z-index: 31; }
+
 .bookshelf-demo .shelf-view.is-dim {
   /* Backdrop covers shelf — dim is unused during open; keep inert */
   opacity: 1;
@@ -1056,7 +1099,7 @@
   inset: 0;
   border-radius: inherit;
   overflow: hidden;
-  background-color: transparent; /* ux24: no preset wood plate */
+  background-color: transparent !important; /* ux24/ux27: no solid shell behind the img */
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
@@ -1159,9 +1202,133 @@
   .bookshelf-demo .spine.is-expanded.is-collapsing.s-mid { width: 24px; height: 134px; }
   .bookshelf-demo .spine.is-expanded.is-collapsing.s-short { width: 20px; height: 120px; }
   .bookshelf-demo .note-hero { flex-direction: column; gap: 16px; }
-  .bookshelf-demo .note-cover { width: 100px; height: 150px; }
+  .bookshelf-demo .note-cover { width: max-content; max-width: 100%; }
+  .bookshelf-demo .note-cover-img {
+    width: auto;
+    max-width: 100%;
+    max-height: 180px;
+    height: auto;
+  }
   .bookshelf-demo .qa-hint { width: 100%; margin-left: 0; margin-top: 4px; }
 }
 
 /* Reading path: hide demo/QA chrome unless ?debug=1 */
 body:not(.debug-on) .bookshelf-demo .is-debug { display: none !important; }
+
+/* Site shelf: same column, type, and header as the blog. Motion rules above stay. */
+.bookshelf-page.sh-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.bookshelf-page .sh-head {
+  width: 100%;
+  max-width: var(--col);
+  margin-inline: auto;
+}
+.bookshelf-page .sh-kicker {
+  margin: 0 0 12px;
+  font-size: var(--fs-meta);
+  letter-spacing: 0.08em;
+  color: var(--muted);
+}
+.bookshelf-demo.is-site {
+  --site-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
+  width: 100%;
+  max-width: var(--col);
+  margin-inline: auto;
+  background: transparent;
+  min-height: 0;
+  color: inherit;
+  font-family: var(--site-sans);
+  font-size: inherit;
+  line-height: inherit;
+}
+.bookshelf-demo.is-site .page {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 0 0 8px;
+}
+.bookshelf-demo.is-site .top { display: none; }
+.bookshelf-page .sh-head h1,
+.bookshelf-page .sh-deck,
+.bookshelf-page .sh-kicker,
+body:has(.bookshelf-demo.is-site) .sh-header,
+body:has(.bookshelf-demo.is-site) .sh-footer {
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
+}
+body:has(.bookshelf-demo.is-site) .sh-header .sh-word {
+  font-family: "Songti SC", "STSong", "Source Serif 4", Georgia, serif;
+}
+/* Overlays stay under the sticky header so open/close does not cover it. */
+.bookshelf-demo.is-site .open-backdrop {
+  top: var(--hdr);
+  z-index: 30;
+  background: var(--paper);
+}
+.bookshelf-demo.is-site .stage { z-index: 32; }
+.bookshelf-demo.is-site .note-view {
+  top: var(--hdr);
+  background: var(--paper);
+  color: var(--text);
+}
+.bookshelf-demo.is-site .note-view.is-preparing,
+.bookshelf-demo.is-site .note-view.is-open { z-index: 34; }
+.bookshelf-demo.is-site .open-veil { z-index: 36; }
+.bookshelf-demo.is-site .note {
+  width: min(100%, var(--col));
+  margin: 0 auto;
+  padding: 28px 0 80px;
+}
+.bookshelf-demo.is-site .back-btn,
+.bookshelf-demo.is-site .note-hero,
+.bookshelf-demo.is-site .note-body,
+.bookshelf-demo.is-site .note-read {
+  max-width: none;
+  font-family: var(--site-sans);
+}
+.bookshelf-demo.is-site .note-body {
+  font-size: var(--fs-body);
+  line-height: 1.75;
+  color: var(--text);
+}
+.bookshelf-demo.is-site .note-body h2 {
+  font-family: inherit;
+  font-size: var(--fs-h2);
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--ink);
+}
+.bookshelf-demo.is-site .note-meta h1 {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: var(--fs-display);
+  line-height: 1.2;
+  color: var(--ink);
+}
+.bookshelf-demo .flyer-page-more {
+  pointer-events: auto;
+  align-self: flex-start;
+  margin-top: 8px;
+  font-family: system-ui, sans-serif;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--ink, #2a261e);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.bookshelf-demo .note-read {
+  display: inline-block;
+  margin: 12px 0 0;
+  font-size: 14px;
+  color: var(--ink);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.bookshelf-demo .note-read[hidden] { display: none; }
+.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/catalog.mjs

@@ -0,0 +1,116 @@
+import { marked } from "marked";
+import { BookshelfConfigError } from "./schema.mjs";
+
+/**
+ * Site shelf for `<Bookshelf catalog notes />`.
+ * Built only from `content/bookshelf.yaml` and the posts it names.
+ * The package demo is a separate path: this module never reads it.
+ *
+ * `post` is a `content/posts` path without `.md`. Its front matter description
+ * leads the note HTML so the open book's right page is that summary.
+ * A cover file name is published at `/media/covers/<file>` (same stem cleanup
+ * as content sync). A full URL or a path starting with `/` is kept.
+ */
+
+const WIDGET_FENCE = /```(?:garden|ui-error|ui|intent|widget)(?:[ \t]+[^\n]*)?\r?\n[\s\S]*?```/gu;
+
+export function resolveBookshelfCover(cover, where = "cover") {
+  if (!cover?.trim()) return undefined;
+  const value = cover.trim();
+  if (/^(?:[a-z][a-z0-9+.-]*:)?\/\//iu.test(value) || value.startsWith("/") || value.startsWith("data:")) {
+    return value;
+  }
+  let relative = value.replace(/^\.\//u, "");
+  if (relative.startsWith("covers/")) relative = relative.slice("covers/".length);
+  const parts = relative.split("/");
+  if (!relative || parts.some((segment) => segment === "" || segment === "." || segment === "..")) {
+    throw new BookshelfConfigError("cover", `${where} 的 cover 必须是文件名或完整 URL。`);
+  }
+  return `/media/covers/${parts.map(publishCoverSegment).join("/")}`;
+}
+
+/** `content/posts` path, without `.md`. Rejects anything that leaves that directory. */
+export function normalizeBookshelfPostPath(value) {
+  const relative = value
+    .trim()
+    .replaceAll("\\", "/")
+    .replace(/^(?:content\/)?posts\//u, "")
+    .replace(/\.md$/u, "");
+  if (
+    !relative
+    || relative.startsWith("/")
+    || relative.split("/").some((segment) => segment === "" || segment === "." || segment === "..")
+  ) {
+    throw new BookshelfConfigError("post", `post「${value}」必须是 content/posts 下的路径，不带 .md。`);
+  }
+  return relative;
+}
+
+export function bookshelfMountFromFile(file, posts) {
+  const byPath = new Map(posts.map((post) => [normalizeBookshelfPostPath(post.path), post]));
+  const notes = {};
+  const catalog = file.shelves.map((shelf) => ({
+    id: shelf.id,
+    name: shelf.name,
+    books: shelf.books.map((book) => toCatalogBook(book, byPath, notes)),
+  }));
+  return {
+    title: file.title,
+    description: file.description,
+    eyebrow: file.eyebrow,
+    catalog,
+    notes,
+  };
+}
+
+function toCatalogBook(book, byPath, notes) {
+  const post = book.post ? byPath.get(normalizeBookshelfPostPath(book.post)) : undefined;
+  if (book.post && !post) {
+    throw new BookshelfConfigError("post", `书架引用的博文 ${book.post} 没有读到。`);
+  }
+  const cover = resolveBookshelfCover(book.cover, book.id) ?? (post ? resolveBookshelfCover(post.cover, book.id) : undefined);
+  const body = post
+    ? renderNoteHtml(post.content, post.description)
+    : book.note
+      ? renderNoteHtml(book.note)
+      : "";
+  const note = body ? book.id : null;
+  if (note) notes[book.id] = { title: book.title, body, summary: post?.description };
+  return {
+    id: book.id,
+    title: book.title,
+    author: book.author ?? "",
+    spine: book.spine ?? book.title,
+    size: book.size ?? (book.filler ? "thin" : "s-mid"),
+    cover: cover ?? false,
+    color: book.color,
+    filler: book.filler,
+    post: book.post ? normalizeBookshelfPostPath(book.post) : undefined,
+    note,
+  };
+}
+
+function renderNoteHtml(markdown, description) {
+  const prose = markdown.replace(WIDGET_FENCE, "\n").trim();
+  const parsed = prose ? marked.parse(prose, { async: false }).trim() : "";
+  const summary = description?.trim();
+  if (!summary || prose.includes(summary)) return parsed;
+  return `<p>${escapeHtml(summary)}</p>${parsed ? `\n${parsed}` : ""}`;
+}
+
+function publishCoverSegment(segment, index, all) {
+  const isFile = index === all.length - 1;
+  if (!isFile) return encodeURIComponent(segment.replace(/[^\w\u3400-\u9fff.-]+/gu, "-"));
+  const dot = segment.lastIndexOf(".");
+  const ext = dot >= 0 ? segment.slice(dot).toLowerCase() : "";
+  const stem = dot >= 0 ? segment.slice(0, dot) : segment;
+  return encodeURIComponent(`${stem.replace(/[^\w\u3400-\u9fff.-]+/gu, "-")}${ext}`);
+}
+
+function escapeHtml(value) {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}

package/app/components/bookshelf/catalog.ts

@@ -0,0 +1,23 @@
+import type { BookshelfNote, BookshelfShelf } from "./types";
+
+/**
+ * Site shelf ready for `<Bookshelf catalog notes />`.
+ * The runtime lives in `catalog.mjs` (node tests and the page share it).
+ * The package demo is not an input.
+ */
+export type BookshelfMount = {
+  title: string;
+  description?: string;
+  eyebrow?: string;
+  catalog: BookshelfShelf[];
+  notes: Record<string, BookshelfNote>;
+};
+
+/** A post the shelf can turn into a note. `path` is relative to `content/posts`, without `.md`. */
+export type BookshelfPostSource = {
+  path: string;
+  title?: string;
+  description?: string;
+  cover?: string;
+  content: string;
+};