Photo album

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,} from 'react';import {  AlertDot,  FaceGlyph,  Heart,  KeyCap,  Medallion,  PageArrow,  PhotoBadge,  Reticle,

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { SceneId } from './scenes';/** A picture in the album: which painted scene it shows, its name, and where it was taken. */export type AlbumPhoto = {  id: string;  scene: SceneId;  /** The picture's name, read out and shown in the large view. */  title: string;  /** Where it was taken, shown over the picture in the save dialog and the large view. */  place?: string;  /** Shows the scene mirrored, so one scene can make two different pictures. */  mirrored?: boolean;};export const DEFAULT_PHOTOS: AlbumPhoto[] = [  { id: 'p01', scene: 'colonnade', title: 'Pillar Court', place: 'Old Capital Outskirts' },  { id: 'p02', scene: 'birch-lake', title: 'Birch Shore', place: 'Lantern Lake' },  { id: 'p03', scene: 'standing-stones', title: 'Seven Stones', place: 'Windmeet Plain' },  { id: 'p04', scene: 'palm-cove', title: 'Palm Cove at Dusk', place: 'Amber Coast' },  { id: 'p05', scene: 'canyon-dawn', title: 'Ochre Canyon', place: 'Redfall Gorge' },  { id: 'p06', scene: 'lone-oak', title: 'The Lone Oak', place: 'Greenmoor' },  { id: 'p07', scene: 'deep-wood', title: 'Under the Canopy', place: 'Mossdeep Wood' },

// Copyright (c) 2026 Bruno Delorence. MIT License.import { useId, type ReactNode } from 'react';/* * The album's pictures: small painted landscapes drawn in SVG, one per scene, at different times of * day. Each is a 320 × 180 drawing in layers (a sky gradient, a sun or a moon with its glow, ridges * that fade into the haze, a ground, and a subject: pillars, birches, standing stones, palms, an * oak, a fort, a gate…). Ridges come from a seeded midpoint displacement, so they are irregular but * the same on every render. Nothing is a bitmap: a picture stays sharp at any size. */export type SceneId =  | 'colonnade'  | 'birch-lake'  | 'standing-stones'  | 'palm-cove'  | 'canyon-dawn'  | 'lone-oak'  | 'deep-wood'  | 'hill-fort'  | 'still-pond'  | 'old-plaza'  | 'stone-gate'

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The album's small drawings: the controller prompts (a round face button, a shoulder keycap), the * page arrow, the photo badge, the heart and the alert dot, the viewfinder's corners, and the * tablet's bezel (its riveted rail and its corner medallions). All are flat vector shapes in * currentColor or the bezel's own tokens, aria-hidden: the words around them carry the meaning. *//** A face button: a filled disc with its letter knocked out in the plate's ink. */export function FaceGlyph({ letter }: { letter: string }) {  return (    <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false">      <circle cx="16" cy="16" r="16" fill="currentColor" />      <text x="16" y="22.4" textAnchor="middle" fontSize="18" fontWeight="700" fill="var(--ink)">        {letter}      </text>    </svg>  );}/** A shoulder button: a keycap with a slanted top edge, its letter knocked out. */export function KeyCap({ letter, side }: { letter: string; side: 'left' | 'right' }) {  const d =

/* Photo album (photo-album.tsx): a handheld tablet's album page, on its own, centred on the lab's   plain stage. The tablet brings its own surface: a dark ornamented bezel around a navy screen   with a cyan glow, so it reads the same on a white page and a black one; only its shadow and halo   on the page follow the colour scheme.   Every length is a multiple of --u: 1 px when the stage gives the tablet its 960 px, less on a   narrower stage. Under 640 px the tablet turns into a 480-unit portrait layout with a 3 × 4 grid,   so the pictures and words stay legible on a phone.   Crispness: the pictures, the bezel's rail and medallions, the glyphs and the screen's pattern are   all vector (inline SVG or SVG data URIs); glows are box- and text-shadows behind sharp shapes.   Motion: the selection frame moves by a transition on translate; page slides, the viewer's swaps,   the dialog's pop, the flash and the ping are keyframes; the FLIPs (open, close, save) are Web   Animations set from the script. Reduced motion turns them all off. */.root {  /* The bezel. */  --band: #1b1a18;  --band-hi: #2a2826;  --relief: #b09872;  --relief-dark: #3a2d20;  --relief-light: #ecdcb4;  /* The screen. */

// Copyright (c) 2026 Bruno Delorence. MIT License.'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(