// qiaopi-app-letter.jsx — Letter detail page (cinematic)
// Sealed envelope → "展信" → opening animation → reading state with scan + transcript.
// Bottom ribbon to jump between letters without going back to map.
function LetterPage({ letter, letters, onBack, onPick, tweaks, width, height }) {
const [stage, setStage] = React.useState(0); // 0 envelope, 1 opening, 2 reading
// For real-scan records the "opening" animation shows the same image twice
// (the synthetic letter-paper flying out of the envelope is moot when the
// envelope IS a photograph). Skip Stage 1 there and cross-fade straight to Stage 2.
const hasRealScan = !!(letter.scans && letter.scans.length);
const open = () => {
if (hasRealScan) {
setStage(2);
} else {
setStage(1);
setTimeout(() => setStage(2), 1300);
}
};
const close = () => setStage(0);
React.useEffect(() => { setStage(0); }, [letter.id]);
const idx = letters.findIndex(l => l.id === letter.id);
return (
{/* TOP NAV */}
家書·
№ {String(idx + 1).padStart(2, '0')} of {String(letters.length).padStart(2, '0')}
);
}
function DarkMeta({ label, children }) {
return (
{label}
{children}
);
}
// ─── Envelope front ───────────────────────────────────────────────────
function EnvelopeFront({ letter, opening = false }) {
// If the letter has real scans, show the real envelope-front photograph
// instead of the synthetic illustration.
if (letter.scans && letter.scans.length) {
const W = 380, H = 540; // taller because scans are portrait
return (