);
}
// ─── Red square chop ──────────────────────────────────────────────────
function ChopSeal({ text = '僑批', size = 64, rotate = -4, style }) {
const cells = text.split('').slice(0, 4);
const grid = cells.length <= 2 ? 1 : 2;
return (
{cells.map((c, i) =>
{c}
)}
);
}
// ─── Postage stamp ────────────────────────────────────────────────────
function Stamp({ year, country, w = 56, h = 70, rotate = 3, style }) {
return (
{country}
{year}
);
}
// ─── Letter scan ──────────────────────────────────────────────────────
// If letter.scans[] is available, renders the real scanned page (with simple
// page-flipper for multi-page). Otherwise falls back to the synthetic
// "looks-like-a-scan" placeholder (vertical text on aged paper) used
// before the real ones were dropped in.
function LetterScan({ letter, scale = 1, page = 0, onPageChange, style }) {
const w = 540 * scale, h = 720 * scale;
const scans = letter.scans || [];
// === Real-scan rendering ===
if (scans.length > 0) {
const [internalPage, setInternalPage] = React.useState(page);
const cur = onPageChange ? page : internalPage;
const setCur = onPageChange || setInternalPage;
const total = scans.length;
// Some envelope scans are landscape-shot but stored on a portrait canvas
// with the content rotated 90°. Detect and auto-rotate so the writing is upright.
const [rotate, setRotate] = React.useState(0);
const onLoad = (e) => {
const img = e.target;
// CADAL scans are always 1190x1684. If the actual content is landscape
// we'd see most ink concentrated in a wider band — too costly to detect.
// Instead expose a manual rotate toggle (button below).
};
return (