);
}
function Envelope({ onOpen, accent }) {
return (
);
}
// RevealBoard — mirrors BoardScreen's layout: notes float in world coords
// on the dotted canvas. Auto-fit centers the union bbox of all notes so
// nothing is clipped, regardless of where contributors placed them.
function RevealBoard({ notes, stage, palette, firstName, isRecipientShare, onSave, onReplay, onSkip, onClose, onOpenNote }) {
const stageRef = React.useRef(null);
const [size, setSize] = React.useState({ w: 0, h: 0 });
React.useEffect(() => {
const fit = () => {
const el = stageRef.current; if (!el) return;
setSize({ w: el.clientWidth, h: el.clientHeight });
};
fit();
window.addEventListener("resize", fit);
return () => window.removeEventListener("resize", fit);
}, []);
// Bounding box of all notes (in their rotated extents) in world coords.
// Falls back to a sane envelope when the board is empty so we still center.
const bbox = React.useMemo(() => notesWorldBBox(notes), [notes]);
// Reserve a bit of viewport padding for the brand + bottom buttons.
const padX = 80, padY = 160;
const scale = size.w && bbox.w > 0
? Math.min((size.w - padX) / bbox.w, (size.h - padY) / bbox.h)
: 0.4;
// Center the bbox centroid in the viewport.
const tx = size.w / 2 - bbox.cx * scale;
const ty = size.h / 2 - bbox.cy * scale;
const authorOf = (note) => authorForNote(note);
return (
{/* Top brand */}
Fare, well
{/* World container — scaled + translated to center the notes. */}
{/* Notes — array order = z-stack, matching contributor view. Each
wrapper sits over the world with pointer-events: none so its
transform/opacity animation can lift the StickyNote inside
without blocking clicks to other notes. */}
{notes.map((n, i) => {
const delay = stage === 1 ? 200 + i * 75 : 0;
return (
);
}
// Detail modal — opens when the recipient taps a note. Renders a large,
// readable version of the note in the center of the screen with a backdrop.
function NoteDetail({ note, author, onClose }) {
const hasPhoto = !!note.photoSrc || note.type === "photo" || note.type === "gif";
const isCluster = note.type === "sticker-cluster";
// Photo, video, and any note carrying a photo all get the white card chrome
// so the media reads cleanly against a neutral backdrop.
const isMedia = hasPhoto || note.type === "video";
const bg = isCluster ? "#FAF7F2" : (isMedia ? "#FFFFFF" : note.color);
React.useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose]);
return (
);
}
if (note.type === "voice") {
return ;
}
if (note.type === "doodle") {
return (
{note.body}
);
}
if (note.type === "sticker-cluster") {
return (
);
}
// text default
return (
{note.body}
{note.sticker && (
{note.sticker}
)}
);
}
// Carousel for multi-photo notes in the recipient detail modal. One large
// preview + chevrons + a position chip + a thumbnail strip; per-photo
// captions show below the active image when present.
function DetailCarousel({ photos, captionFallback }) {
const [active, setActive] = React.useState(0);
const n = photos.length;
const step = (dir) => setActive((i) => (i + dir + n) % n);
const cur = photos[active] || {};
const caption = cur.caption || captionFallback;
return (
) : (