// shelf2.jsx — the library shelf: eleven Roman-numeral spines, staggered
// arrival, hover reveal with the progressive garden mark, and the book modal.
// Book data lives in books2.jsx. Nothing here invents content.
const { useState: useSState, useEffect: useSEffect, useRef: useSRef } = React;
const SHELF_STAGGER = 40; // ms between spines
const SHELF_SETTLE = 700; // ms — stagger is complete, Book I settles once
// ── Modal ────────────────────────────────────────────────────
function MRow({ label, children, style = {} }) {
return (
{label}
{children}
);
}
function BookModal({ book, onClose, onFeedback }) {
const panelRef = useSRef(null);
const soundRef = useSRef(null);
const startY = useSRef(null);
const [playing, setPlaying] = useSState(false);
const [drag, setDrag] = useSState(0);
const [dragging, setDragging] = useSState(false);
// Body scroll lock — position-fixed so the swipe gesture has no page scroll
// to fight. Scroll position is restored exactly on close.
useSEffect(() => {
const y = window.scrollY;
const b = document.body;
const prev = { position: b.style.position, top: b.style.top, width: b.style.width, overflow: b.style.overflow };
b.style.position = 'fixed'; b.style.top = -y + 'px'; b.style.width = '100%'; b.style.overflow = 'hidden';
return () => {
b.style.position = prev.position; b.style.top = prev.top;
b.style.width = prev.width; b.style.overflow = prev.overflow;
window.scrollTo(0, y);
};
}, []);
// Focus into the panel, trap Tab, close on Escape.
useSEffect(() => {
const p = panelRef.current;
if (p) {
const first = p.querySelector('[data-autofocus]');
(first || p).focus();
}
const onKey = (e) => {
if (e.key === 'Escape') { e.preventDefault(); onClose(); return; }
if (e.key !== 'Tab' || !p) return;
const all = p.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const list = Array.prototype.filter.call(all, (el) => !el.disabled && el.offsetParent !== null);
if (!list.length) return;
const first2 = list[0], last = list[list.length - 1];
if (e.shiftKey && document.activeElement === first2) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first2.focus(); }
};
document.addEventListener('keydown', onKey, true);
return () => document.removeEventListener('keydown', onKey, true);
}, [onClose]);
// Dispose every audio node when the modal goes away.
useSEffect(() => () => {
if (soundRef.current) { soundRef.current.stop(); soundRef.current = null; }
}, []);
const hear = () => {
if (playing || !AUDIO_OK) return;
const h = playBookSound(book.n);
if (!h) return;
soundRef.current = h;
setPlaying(true);
setTimeout(() => {
if (soundRef.current === h) { h.stop(); soundRef.current = null; }
setPlaying(false);
}, h.ms + 140);
};
const titleId = 'bookmodal-title';
const canPlay = book.play && AUDIO_OK;
return (
{/* Books I and V carry no sound field — the row is omitted entirely. */}
{book.sound && (
{book.sound}
{canPlay && (
)}
)}
{book.released && (
Read it and tell us what you think →
)}
);
}
// ── Spine ────────────────────────────────────────────────────
function ShelfSpine({ book, index, shown, arrived, settling, onOpen }) {
// "Frame with padding only" — the padded button is the ≥44px tap target.
// Frames may overlap via negative margin so the visible cloth packs tight;
// the 44px hit area itself is never reduced.
const pad = Math.max(5, Math.ceil((44 - book.w) / 2));
return (
);
}
// One shelf unit: a row of spines packed edge to edge over its own board.
// `from` is the absolute index of books[0] in BOOKS, so arrival delays stay
// continuous however the row is split.
function ShelfRow({ books, from, shown, arrived, settling, onOpen }) {
return (
{books.map((b, i) => (
))}
);
}
// ── Shelf ────────────────────────────────────────────────────
function ShelfSection({ onNav }) {
const rowRef = useSRef(null);
const openerRef = useSRef(null);
const [shown, setShown] = useSState(false);
const [arrived, setArrived] = useSState(false);
const [settling, setSettling] = useSState(false);
const [open, setOpen] = useSState(null);
// ONE observer for the whole shelf; each spine gets an index-based delay.
useSEffect(() => {
const el = rowRef.current;
if (!el) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
setShown(true); setArrived(true); return;
}
// Already in view on mount — arrive without waiting for a callback.
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) { setShown(true); return; }
let io = null;
// Safety net: some embedding contexts never deliver IO callbacks. The
// shelf must never be left invisible because of it.
const fallback = setTimeout(() => { setShown(true); if (io) io.disconnect(); }, 800);
io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setShown(true); clearTimeout(fallback); io.disconnect(); }
}, { threshold: 0.2 });
io.observe(el);
return () => { clearTimeout(fallback); io.disconnect(); };
}, []);
useSEffect(() => {
if (!shown || arrived) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const a = setTimeout(() => { setArrived(true); setSettling(true); }, SHELF_SETTLE);
const b = setTimeout(() => setSettling(false), SHELF_SETTLE + 620);
return () => { clearTimeout(a); clearTimeout(b); };
}, [shown, arrived]);
const openBook = (i, el) => { openerRef.current = el; setOpen(i); };
const close = () => {
setOpen(null);
const el = openerRef.current;
if (el) setTimeout(() => el.focus(), 0);
};
return (
The Library
{/* Desktop: one shelf, all eleven. Unchanged. */}
{/* ≤640px: two shelves — I–VI above, VII–XI below. The stagger index
stays absolute, so the sequence reads straight through the break. */}
Book One is open for readers. The garden grows as the cycle publishes.