Book shelf

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type PointerEvent,  type RefObject,} from 'react';import { Volume } from './book';import { BOOKS, STATUSES, type Book, type Status } from './books';import { FrontCover } from './covers';import { GhostPointer, runDemo } from './ghost-pointer';import { ChevronIcon, CloseIcon, CubeIcon, EyeClosedIcon, EyeOpenIcon } from './icons';import { easingOf, spring } from './spring';import { useAutoplay } from './use-autoplay';import styles from './book-shelf.module.css';

/* A manga library: Japanese covers on a continuous, scrollable surface. The app's data-depth   draws the volumes as objects or flat covers. A volume's sizes are in --w, its cover's width   (each grid cell is a container); the tilt is --rx and --ry, written by the component as the   pointer moves.   The app's colours are the tokens on .app, light-dark(light, dark): it takes the color-scheme   it inherits from the page, or the one the colorScheme prop or the eye in the top bar sets   (data-color-scheme on the root). The covers keep their own colours on both. */.root {  --display:    'Avenir Next Condensed', 'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue', Impact,    sans-serif;  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;  --focus: #0a84ff;  /* For the script: a colour the root never shows (it has no outline), white in light and black     in dark, which tells the eye the scheme the root is drawn in. */  outline-color: #fff;  position: relative;  container: stage / inline-size;  display: grid;  grid-template-rows: minmax(0, 1fr);  height: var(--shelf-height, 660px);  overflow: hidden;

import type { CSSProperties } from 'react';import type { Book } from './books';import { FrontCover } from './covers';import styles from './book-shelf.module.css';/* * A volume as an object, in CSS 3D. The cover is at z = 0 and the pages reach back from it; the * eye is to the right of the book, so the block of page edges shows along its right side. * * - At rest a book is flat: its cover, and its page edges painted beside it by a clipped *   pseudo-element at the very angle the 3D face shows from the eye. Only a book that moves is *   solid (`solid`): the page edges and the thin top and bottom edges are then real faces. * - The cover carries the hover overlays: a genre chip, a chapter chip, a progress bar, and the *   rating badge, which stays on. */export function Volume({  book,  read,  solid,  id,}: {  book: Book;  /** Chapters read. */

import type { Book } from './books';/** The actual Japanese cover, reused by the volume and both faces of its hinged cover. */export function FrontCover({  book,  id,  className,}: {  book: Book;  id: string;  className?: string;}) {  return (    <img      id={id}      src={book.cover}      alt=""      aria-hidden="true"      className={className}      width={500}      height={Math.round(500 * (book.coverRatio ?? 1.5625))}      draggable={false}      loading="lazy"      decoding="async"

/* * 36 Japanese editions: volumes 1–9 of Naruto, Hajime no Ippo, Bleach and Bakuman. * Cover artwork and publication years are sourced from the official Shueisha and Kodansha * catalogs below. Artwork belongs to the authors and publishers. Chapter counts, progress and * personal ratings are illustrative demo state, not bibliographic metadata. */export type Status = 'reading' | 'plan' | 'done';export type Book = {  id: string;  title: string;  native: string;  author: string;  volume: number;  genre: string;  year: number;  chapter: number;  chapters: number;  rating?: number;  /** A local or remote cover image, with its original height / width ratio. */  cover: string;  coverRatio?: number;  publisher?: string;

/* The app's icons, drawn on a 16 × 16 grid in the current colour. All decorative. */type IconProps = { className?: string };/** The light theme's eye: closed. */export function EyeClosedIcon({ className }: IconProps) {  return (    <svg className={className} viewBox="0 0 16 16" aria-hidden="true">      <path        d="M2.5 7.5c3 3.4 8 3.4 11 0M5 10l-1 1.6M8 10.8v1.8M11 10l1 1.6"        fill="none"        stroke="currentColor"        strokeWidth="1.4"        strokeLinecap="round"      />    </svg>  );}/** The dark theme's eye: open, with a diamond for a pupil. */export function EyeOpenIcon({ className }: IconProps) {  return (    <svg className={className} viewBox="0 0 16 16" aria-hidden="true">      <path

/* * Springs as CSS easings. A spring pulls a value to its target and lets it settle: fast at first, * then slowing down, overshooting a little and coming back if it is bouncy. CSS `linear()` draws * any curve through a list of points, so the spring's motion is sampled once, and the same curve * serves CSS transitions and the Web Animations API. */export type Spring = {  /** The curve, as a CSS `linear()` easing. */  easing: string;  /** How long it takes to settle, in ms: the duration to play the curve over. */  duration: number;};/** Points sampled along the curve: plenty for a smooth motion. */const SAMPLES = 40;/** * A spring that covers most of the distance in about `response` ms. With a `bounce` of 0 it * settles without overshooting; at 0.3 it overshoots by about 5% and comes back. */export function spring(bounce: number, response: number): Spring {  // The damping ratio (1: no overshoot) and the natural frequency, in radians per second.  const damping = 1 - bounce;

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's ghost pointer, and the timeline that moves it. A demo is a script of awaited steps: * wait, glide the pointer onto a book, trace a path across it while the book tilts after it, * press. Stopping the demo (the reader takes over, or it scrolls away) ends the step in progress * at once: its promise rejects, which ends the script right there, and the pointer fades out. */type Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer onto `target`: its middle, or a point given as shares of its size. */  moveTo: (target: Element | null | undefined, at?: Point) => Promise<void>;  /**   * Traces a path across `target`, through points given as shares of its size, in `ms`;   * `onPoint` gets the point under the pointer on every frame.   */  trace: (    target: Element | null | undefined,

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;