@usableapp/cardds 0.7.66 → 0.7.67

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { cx } from './cx.js';
 export * from './type/Icon.js';
 export { ICON_NAMES } from './type/icons.js';
 export * from './type/Text.js';
+export * from './type/Mark.js';
 export { setTextScale, controlsFor } from './type/textScale.js';
 export { setWords, word, type WordKey } from './words.js';
 export * from './scaffold/Screen.js';
@@ -78,6 +79,13 @@ export * from './sticky/StickyDate.js';
 export * from './sticky/StickyField.js';
 export * from './sticky/StickyPick.js';
 export * from './sticky/StickyThread.js';
+export * from './stamp/Stamp.js';
+export * from './stamp/StampBook.js';
+export * from './stamp/StampOn.js';
+export * from './post/Postmark.js';
+export * from './post/PostLetter.js';
+export * from './post/PostDesk.js';
+export * from './post/PostBox.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';
 export * from './media/MapArea.js';

package/dist/index.js

@@ -8,6 +8,7 @@ export { cx } from './cx.js';
 export * from './type/Icon.js';
 export { ICON_NAMES } from './type/icons.js';
 export * from './type/Text.js';
+export * from './type/Mark.js';
 export { setTextScale, controlsFor } from './type/textScale.js';
 export { setWords, word } from './words.js';
 export * from './scaffold/Screen.js';
@@ -82,6 +83,13 @@ export * from './sticky/StickyDate.js';
 export * from './sticky/StickyField.js';
 export * from './sticky/StickyPick.js';
 export * from './sticky/StickyThread.js';
+export * from './stamp/Stamp.js';
+export * from './stamp/StampBook.js';
+export * from './stamp/StampOn.js';
+export * from './post/Postmark.js';
+export * from './post/PostLetter.js';
+export * from './post/PostDesk.js';
+export * from './post/PostBox.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';
 export * from './media/MapArea.js';

package/dist/post/PostBox.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export interface PostBoxProps extends ComponentProps<'ul'> {
+    /** CONTROLLED: the `id` of the card the box is parted at; `null` = closed, only the front card (the last one) shows whole — with `onOpenChange` */
+    open?: string | null;
+    /** UNCONTROLLED: the card it starts parted at (default none: the front card) */
+    defaultOpen?: string | null;
+    /** an edge was pressed: the card it asks to part at — `null` when the open card's own edge was pressed (the box closes back to the front card) */
+    onOpenChange?: (open: string | null) => void;
+}
+/**
+ * PostBox — the postcards KEPT: PostBoxCards whole and landscape, standing one behind another, each showing its top edge. The last
+ * child is the front card, nearest the thumb — put the newest there. Pressing an edge parts the box: the cards in front slide down
+ * and that card is there to read; pressing it again, or another edge, closes it. Which card is open is a state: `open` + `onOpenChange`, or `defaultOpen`.
+ */
+export declare function PostBox({ open, defaultOpen, onOpenChange, className, children, ...rest }: PostBoxProps): import("react").JSX.Element;
+export interface PostBoxCardProps extends Omit<ComponentProps<'li'>, 'id'> {
+    /** the card's own name in its box — what `open` / `onOpenChange` speak */
+    id: string;
+    /** who sent it — the edge's big line */
+    from: ReactNode;
+    /** where and when — the edge's small line ("เชียงใหม่ · 3 ม.ค. 69") */
+    when?: ReactNode;
+    /** the corner's stamp — a `Stamp` */
+    stamp?: ReactNode;
+    /** the mark struck over the stamp — a `Postmark`; behind another card only its place shows */
+    postmark?: ReactNode;
+    /** the address lines, top down */
+    to?: ReactNode[];
+}
+/**
+ * PostBoxCard — one kept postcard of a PostBox: its top edge is the button (who · where and when · the stamp and its postmark),
+ * the rest is the card whole — the message (`children`) left, the address right. Read only while its box is parted at it.
+ */
+export declare function PostBoxCard({ id, from, when, stamp, postmark, to, className, children, ...rest }: PostBoxCardProps): import("react").JSX.Element;

package/dist/post/PostBox.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useEffect, useId, useRef } from 'react';
+import { cx } from '../cx.js';
+import { reducedMotion, useControlled } from '../state.js';
+import { PostCorner } from './postCorner.js';
+const Box = createContext({ open: null, press: () => { } });
+/**
+ * PostBox — the postcards KEPT: PostBoxCards whole and landscape, standing one behind another, each showing its top edge. The last
+ * child is the front card, nearest the thumb — put the newest there. Pressing an edge parts the box: the cards in front slide down
+ * and that card is there to read; pressing it again, or another edge, closes it. Which card is open is a state: `open` + `onOpenChange`, or `defaultOpen`.
+ */
+export function PostBox({ open, defaultOpen = null, onOpenChange, className, children, ...rest }) {
+    const [parted, ask] = useControlled(open, defaultOpen, onOpenChange);
+    const front = Children.toArray(children).filter(isValidElement).at(-1)?.props;
+    const shown = parted ?? front?.id ?? null;
+    return (_jsx("ul", { className: cx('post-box', className), ...rest, children: _jsx(Box.Provider, { value: { open: shown, press: (id) => ask(id === shown ? null : id) }, children: children }) }));
+}
+/**
+ * PostBoxCard — one kept postcard of a PostBox: its top edge is the button (who · where and when · the stamp and its postmark),
+ * the rest is the card whole — the message (`children`) left, the address right. Read only while its box is parted at it.
+ */
+export function PostBoxCard({ id, from, when, stamp, postmark, to = [], className, children, ...rest }) {
+    const box = useContext(Box);
+    const open = box.open === id;
+    const body = useId();
+    const el = useRef(null);
+    const was = useRef(open);
+    useEffect(() => {
+        if (open && !was.current)
+            el.current?.scrollIntoView({ block: 'nearest', behavior: reducedMotion() ? 'auto' : 'smooth' });
+        was.current = open;
+    }, [open]);
+    return (_jsxs("li", { ref: el, className: cx('post-box__card', 'post-paper', open && 'is-open', className), ...rest, children: [_jsxs("button", { className: "post-box__edge", type: "button", "aria-expanded": open, "aria-controls": body, onClick: () => box.press(id), children: [_jsx("span", { className: "post-box__from", children: from }), when != null && _jsx("span", { className: "post-box__when", children: when })] }), _jsx(PostCorner, { stamp: stamp, postmark: postmark, "aria-hidden": "true" }), _jsxs("div", { className: "post-box__body", id: body, inert: !open, children: [_jsx("p", { className: "post-box__message", children: children }), _jsx("div", { className: "post-box__to", children: to.map((line, i) => _jsx("span", { children: line }, i)) })] })] }));
+}

package/dist/post/PostDesk.d.ts

@@ -0,0 +1,68 @@
+import { type ComponentProps, type ReactNode } from 'react';
+/** the half of the paper the phone looks at: the message (left), the address and the stamp (right) */
+export type PostHalf = 'message' | 'address';
+/** where the card is on its way out: being written · the postmark struck on it · gone */
+export type PostState = 'writing' | 'struck' | 'sent';
+/** one of the sender's stamps to choose from: its `id`, the `Stamp` itself, its accessible name */
+export interface PostDeskStamp {
+    id: string;
+    stamp: ReactNode;
+    label: string;
+}
+export interface PostDeskProps extends ComponentProps<'div'> {
+    /** CONTROLLED: the half in sight — with `onHalfChange` */
+    half?: PostHalf;
+    /** UNCONTROLLED: the half it starts on (default the message) */
+    defaultHalf?: PostHalf;
+    /** the other half's showing edge was pressed, or the paper dragged sideways: the half it asks for */
+    onHalfChange?: (half: PostHalf) => void;
+    /** CONTROLLED: the message — with `onMessageChange` */
+    message?: string;
+    /** UNCONTROLLED: the words it starts with */
+    defaultMessage?: string;
+    /** the member typed: the message it asks for. Never more than the half holds */
+    onMessageChange?: (message: string) => void;
+    /** the paper refused what was typed: the half is full */
+    onFull?: () => void;
+    /** the room on the paper changed: ruled lines still free, and how many the half holds — the app words it ("7 lines left") */
+    onLinesChange?: (left: number, fits: number) => void;
+    /** the message's placeholder */
+    placeholder?: string;
+    /** the address lines — `PostDeskLine`s; their values are the app's, like any input's */
+    address?: ReactNode;
+    /** the sender's own stamps, shown under the card on the address half */
+    stamps?: PostDeskStamp[];
+    /** CONTROLLED: the `id` of the stamp in the stamp box, `null` = none — with `onStampChange` */
+    stamp?: string | null;
+    /** UNCONTROLLED: the stamp it starts with */
+    defaultStamp?: string | null;
+    /** a stamp was chosen, or the stamp box pressed (empty: the first stamp; filled: `null`, the stamp comes off) */
+    onStampChange?: (stamp: string | null) => void;
+    /** CONTROLLED: `writing` · `struck` (the postmark lands; the app sets it when the member sends) · `sent` (the card has left) — with `onStateChange` */
+    state?: PostState;
+    /** UNCONTROLLED: the state it starts in */
+    defaultState?: PostState;
+    /** struck, the card asks to be `sent` once the mark has landed (at once with reduced motion) */
+    onStateChange?: (state: PostState) => void;
+    /** the mark struck over the stamp — a `Postmark`; drawn from `struck` on */
+    postmark?: ReactNode;
+    /** what stands where the card was once it is `sent` */
+    sent?: ReactNode;
+    /** one small line under the card, read out when it changes — the app's words (lines left, what is missing, ready) */
+    note?: ReactNode;
+}
+/**
+ * PostDesk — a postcard being WRITTEN, stamped and sent. The paper is landscape and twice the screen; the phone looks at one half:
+ * the message on ruled lines (typing stops when the half is full — the paper is the limit), then the address with the stamp box.
+ * The other half's showing edge, or a sideways drag, slides the paper. The stamp box and the stamps under the card choose one of
+ * the sender's own stamps. Sending is the SCREEN's button, never the desk's: the app sets `state="struck"` — the postmark lands,
+ * the desk asks for `sent`, and the card leaves upward; `sent` stands in its place. Every state is the app's (`x` + `onXChange`, or `defaultX`).
+ * It sizes itself to the screen it is in; put it in a `Page bleed`.
+ */
+export declare function PostDesk({ half, defaultHalf, onHalfChange, message, defaultMessage, onMessageChange, onFull, onLinesChange, placeholder, address, stamps, stamp, defaultStamp, onStampChange, state, defaultState, onStateChange, postmark, sent, note, className, ...rest }: PostDeskProps): import("react").JSX.Element;
+export interface PostDeskLineProps extends ComponentProps<'input'> {
+    /** the small word over the line ("ถึง", "ที่") */
+    label: ReactNode;
+}
+/** PostDeskLine — one address line of a PostDesk (`address`): a small word and a bare input on a rule. The value is the app's, like any input's. */
+export declare function PostDeskLine({ label, type, autoComplete, className, ...rest }: PostDeskLineProps): import("react").JSX.Element;

package/dist/post/PostDesk.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { cx } from '../cx.js';
+import { reducedMotion, useControlled, useLatest, watchSize } from '../state.js';
+import { word } from '../words.js';
+import { StampPlace } from '../stamp/Stamp.js';
+const STRIKE = 700; // ms the struck card is seen before it asks to leave
+const SWIPE = 48; // px a sideways drag must travel to move the paper
+/* ruled lines the half holds, and how many the words leave free (the box is collapsed for a moment to read the words' own height) */
+function linesOf(ta) {
+    const line = parseFloat(getComputedStyle(ta).lineHeight);
+    const fits = Math.floor(ta.clientHeight / line);
+    const { height, flex } = ta.style;
+    ta.style.flex = 'none';
+    ta.style.height = '0px';
+    const used = ta.value ? Math.round(ta.scrollHeight / line) : 0;
+    ta.style.height = height;
+    ta.style.flex = flex;
+    return { left: Math.max(0, fits - used), fits };
+}
+/**
+ * PostDesk — a postcard being WRITTEN, stamped and sent. The paper is landscape and twice the screen; the phone looks at one half:
+ * the message on ruled lines (typing stops when the half is full — the paper is the limit), then the address with the stamp box.
+ * The other half's showing edge, or a sideways drag, slides the paper. The stamp box and the stamps under the card choose one of
+ * the sender's own stamps. Sending is the SCREEN's button, never the desk's: the app sets `state="struck"` — the postmark lands,
+ * the desk asks for `sent`, and the card leaves upward; `sent` stands in its place. Every state is the app's (`x` + `onXChange`, or `defaultX`).
+ * It sizes itself to the screen it is in; put it in a `Page bleed`.
+ */
+export function PostDesk({ half, defaultHalf = 'message', onHalfChange, message, defaultMessage = '', onMessageChange, onFull, onLinesChange, placeholder, address, stamps = [], stamp, defaultStamp = null, onStampChange, state, defaultState = 'writing', onStateChange, postmark, sent, note, className, ...rest }) {
+    const [side, askSide] = useControlled(half, defaultHalf, onHalfChange);
+    const [text, askText] = useControlled(message, defaultMessage, onMessageChange);
+    const [stuck, askStamp] = useControlled(stamp, defaultStamp, onStampChange);
+    const [at, askState] = useControlled(state, defaultState, onStateChange);
+    const writing = at === 'writing';
+    const chosen = stamps.find((s) => s.id === stuck);
+    const paper = useRef(null);
+    const lines = useLatest(onLinesChange);
+    const told = useRef('');
+    const measure = () => {
+        const ta = paper.current;
+        if (!ta)
+            return;
+        const { left, fits } = linesOf(ta);
+        if (told.current === `${left}/${fits}`)
+            return;
+        told.current = `${left}/${fits}`;
+        lines.current?.(left, fits);
+    };
+    useLayoutEffect(measure, [text]);
+    useEffect(() => {
+        document.fonts?.ready.then(measure);
+        return watchSize([paper.current], measure);
+    }, []);
+    useEffect(() => {
+        if (at !== 'struck')
+            return;
+        const t = setTimeout(() => askState('sent'), reducedMotion() ? 0 : STRIKE);
+        return () => clearTimeout(t);
+    }, [at, askState]);
+    const write = (e) => {
+        const ta = e.currentTarget;
+        if (ta.scrollHeight > ta.clientHeight + 1 && ta.value.length >= text.length) {
+            ta.value = text;
+            onFull?.();
+            return;
+        } // taking words away is never refused
+        askText(ta.value);
+    };
+    const from = useRef(null);
+    const drop = (e) => {
+        const dx = from.current == null ? 0 : e.clientX - from.current;
+        from.current = null;
+        if (writing && Math.abs(dx) >= SWIPE)
+            askSide(dx < 0 ? 'address' : 'message');
+    };
+    return (_jsxs("div", { className: cx('post-desk', `post-desk--${side}`, `post-desk--${at}`, className), ...rest, children: [_jsxs("div", { className: "post-desk__window", onPointerDown: (e) => { from.current = e.clientX; }, onPointerUp: drop, children: [_jsxs("div", { className: "post-desk__card post-paper", children: [_jsx("section", { className: "post-desk__half post-desk__half--message", "aria-label": word('message'), inert: !writing || side !== 'message', children: _jsx("textarea", { ref: paper, className: "post-desk__write", "aria-label": word('message'), placeholder: placeholder, value: text, onChange: write }) }), _jsxs("section", { className: "post-desk__half post-desk__half--address", "aria-label": word('address'), inert: !writing || side !== 'address', children: [_jsx("div", { className: "post-desk__corner", children: _jsxs("div", { className: "post-corner", children: [!writing && postmark, _jsx("button", { className: "post-corner__stamp post-desk__slot", type: "button", "aria-pressed": chosen != null, "aria-label": word(chosen ? 'stampOff' : 'stampOn'), onClick: () => askStamp(chosen ? null : stamps[0]?.id ?? null), children: chosen ? chosen.stamp : _jsx(StampPlace, { "aria-hidden": "true", children: word('stampOn') }) })] }) }), _jsx("div", { className: "post-desk__lines", children: address })] })] }), writing && _jsx("button", { className: `post-desk__reach post-desk__reach--${side === 'message' ? 'address' : 'message'}`, type: "button", "aria-label": word(side === 'message' ? 'toAddress' : 'toMessage'), onClick: () => askSide(side === 'message' ? 'address' : 'message') }), at === 'sent' && _jsx("div", { className: "post-desk__gone", children: sent })] }), _jsx("p", { className: "post-desk__note", "aria-live": "polite", children: note }), writing && side === 'address' && stamps.length > 0 && (_jsx("div", { className: "post-desk__stamps", role: "group", "aria-label": word('stamps'), children: stamps.map((s) => (_jsx("button", { className: "post-desk__pick", type: "button", "aria-pressed": s.id === stuck, "aria-label": s.label, onClick: () => askStamp(s.id), children: s.stamp }, s.id))) }))] }));
+}
+/** PostDeskLine — one address line of a PostDesk (`address`): a small word and a bare input on a rule. The value is the app's, like any input's. */
+export function PostDeskLine({ label, type = 'text', autoComplete = 'off', className, ...rest }) {
+    return (_jsxs("label", { className: cx('post-desk__line', className), children: [_jsx("span", { children: label }), _jsx("input", { type: type, autoComplete: autoComplete, ...rest })] }));
+}

package/dist/post/PostLetter.d.ts

@@ -0,0 +1,52 @@
+import { type ComponentProps, type ReactNode } from 'react';
+/** a postcard's two sides: the bought `picture`, the written `back` */
+export type PostFace = 'picture' | 'back';
+export interface PostLetterProps extends ComponentProps<'div'> {
+    /** CONTROLLED: the side in front — with `onFaceChange` */
+    face?: PostFace;
+    /** UNCONTROLLED: the side it starts on (default the picture) */
+    defaultFace?: PostFace;
+    /** the tab or a sheet was tapped: the side it asks to bring forward */
+    onFaceChange?: (face: PostFace) => void;
+    /** the picture side's print — the app's own (an img, an svg); it fills the sheet inside its white margin */
+    picture: ReactNode;
+    /** the place printed under the picture */
+    caption?: ReactNode;
+    /** a voice note: its time as the app words it ("0:12"). With it the picture side has the play control — cardds never plays: the control asks, the app plays and passes the time */
+    voice?: ReactNode;
+    /** CONTROLLED: the voice note is playing — with `onPlayingChange` */
+    playing?: boolean;
+    /** UNCONTROLLED: it starts playing */
+    defaultPlaying?: boolean;
+    /** the play control was tapped: the state it asks for */
+    onPlayingChange?: (playing: boolean) => void;
+    /** the small word printed over the address ("โปสการ์ด") */
+    kicker?: ReactNode;
+    /** the address lines, top down: the first is the name, the rest where they live */
+    to?: ReactNode[];
+    /** the corner's stamp — a `Stamp` */
+    stamp?: ReactNode;
+    /** the mark struck over the stamp — a `Postmark` */
+    postmark?: ReactNode;
+    /** how the message ends, at the right ("คิดถึง · ต้น") */
+    sign?: ReactNode;
+    /** one line under the card: the trip it made */
+    journey?: ReactNode;
+    /** the tab's words while the picture is in front (default: cardds's own, by `<html lang>`) */
+    backLabel?: string;
+    /** the tab's words while the back is in front */
+    pictureLabel?: string;
+    /** the play control's names */
+    playLabel?: string;
+    pauseLabel?: string;
+    /** the small word before the name (default "To", by `<html lang>`) */
+    toLabel?: ReactNode;
+}
+/**
+ * PostLetter — a postcard that arrived, to READ: two upright 2:3 sheets, one in front. The written side is the address half over the
+ * message half (`children`, set large); the picture side is the print in its margin, a voice note's control on its corner.
+ * The tab over the pair (or a tap on the sheet) turns it: the sheet in front swings to its edge, the other swings in — both stay
+ * whole and readable, nothing turns with reduced motion. Which side shows is a state: `face` + `onFaceChange`, or `defaultFace`.
+ * It sizes itself to the screen it is in (the sheet, the tab and the `journey` line stay above the bottom layer); put it in a `Page bleed`.
+ */
+export declare function PostLetter({ face, defaultFace, onFaceChange, picture, caption, voice, playing, defaultPlaying, onPlayingChange, kicker, to, stamp, postmark, sign, journey, backLabel, pictureLabel, playLabel, pauseLabel, toLabel, className, children, ...rest }: PostLetterProps): import("react").JSX.Element;

package/dist/post/PostLetter.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { cx } from '../cx.js';
+import { reducedMotion, useControlled } from '../state.js';
+import { word } from '../words.js';
+import { Icon } from '../type/Icon.js';
+import { IconBtn } from '../actions/IconBtn.js';
+import { PostCorner } from './postCorner.js';
+const OTHER = { picture: 'back', back: 'picture' };
+/* half a turn: the sheet swings on its upright middle between flat (0) and edge-on (±90). `hold` keeps it edge-on until the other sheet is rendered */
+function swing(el, from, to, easing, hold = false) {
+    const lens = `perspective(${el.offsetWidth * 3}px)`;
+    const flip = parseFloat(getComputedStyle(el).getPropertyValue('--motion-flip')) || 0.45;
+    return el.animate([{ transform: `${lens} rotateY(${from}deg)` }, { transform: `${lens} rotateY(${to}deg)` }], { duration: flip * 500, easing, fill: hold ? 'forwards' : 'none' });
+}
+/**
+ * PostLetter — a postcard that arrived, to READ: two upright 2:3 sheets, one in front. The written side is the address half over the
+ * message half (`children`, set large); the picture side is the print in its margin, a voice note's control on its corner.
+ * The tab over the pair (or a tap on the sheet) turns it: the sheet in front swings to its edge, the other swings in — both stay
+ * whole and readable, nothing turns with reduced motion. Which side shows is a state: `face` + `onFaceChange`, or `defaultFace`.
+ * It sizes itself to the screen it is in (the sheet, the tab and the `journey` line stay above the bottom layer); put it in a `Page bleed`.
+ */
+export function PostLetter({ face, defaultFace = 'picture', onFaceChange, picture, caption, voice, playing, defaultPlaying = false, onPlayingChange, kicker, to = [], stamp, postmark, sign, journey, backLabel, pictureLabel, playLabel, pauseLabel, toLabel, className, children, ...rest }) {
+    const [asked, ask] = useControlled(face, defaultFace, onFaceChange);
+    const [sound, askSound] = useControlled(playing, defaultPlaying, onPlayingChange);
+    const [lying, setLying] = useState(asked); // the sheet in front right now: it trails `asked` by half a turn
+    const sheets = useRef({ picture: null, back: null });
+    const landed = useRef(asked);
+    useEffect(() => {
+        if (asked === lying)
+            return;
+        const el = sheets.current[lying];
+        if (reducedMotion() || !el?.animate) {
+            landed.current = asked;
+            setLying(asked);
+            return;
+        }
+        const out = swing(el, 0, 90, 'ease-in', true);
+        out.onfinish = () => setLying(asked);
+        return () => out.cancel();
+    }, [asked, lying]);
+    useLayoutEffect(() => {
+        if (landed.current === lying)
+            return;
+        landed.current = lying;
+        const el = sheets.current[lying];
+        if (el?.animate)
+            swing(el, -90, 0, 'ease-out');
+    }, [lying]);
+    const turn = () => ask(OTHER[asked]);
+    const [name, ...lines] = to;
+    return (_jsxs("div", { className: cx('post-letter', `post-letter--${lying}`, className), ...rest, children: [_jsxs("div", { className: "post-letter__sheet post-letter__sheet--picture post-paper", ref: (el) => { sheets.current.picture = el; }, inert: lying !== 'picture', onClick: turn, children: [_jsx("div", { className: "post-letter__pic", children: picture }), _jsx("p", { className: "post-letter__caption", children: caption }), voice != null && (_jsxs("div", { className: "post-letter__voice", onClick: (e) => e.stopPropagation(), children: [_jsx(IconBtn, { invert: true, icon: sound ? 'pause' : 'play', label: sound ? pauseLabel ?? word('pause') : playLabel ?? word('play'), "aria-pressed": sound, onClick: () => askSound(!sound) }), _jsx("span", { className: "post-letter__time", children: voice })] }))] }), _jsxs("article", { className: "post-letter__sheet post-letter__sheet--back post-paper", ref: (el) => { sheets.current.back = el; }, inert: lying !== 'back', onClick: turn, children: [_jsxs("header", { className: "post-letter__head", children: [_jsxs("div", { className: "post-letter__to", children: [_jsx("span", { className: "post-letter__kicker", children: kicker }), _jsxs("span", { className: "post-letter__lines", children: [name != null && _jsxs("span", { className: "post-letter__line post-letter__line--name", children: [_jsx("small", { children: toLabel ?? word('to') }), name] }), lines.map((line, i) => _jsx("span", { className: "post-letter__line", children: line }, i))] })] }), _jsx(PostCorner, { stamp: stamp, postmark: postmark })] }), _jsxs("div", { className: "post-letter__message", children: [children, sign != null && _jsx("p", { className: "post-letter__sign", children: sign })] })] }), _jsxs("button", { className: "post-letter__turn", type: "button", onClick: turn, children: [_jsx(Icon, { name: lying === 'back' ? 'image' : 'file-text', size: "xs" }), _jsx("span", { children: lying === 'back' ? pictureLabel ?? word('turnToPicture') : backLabel ?? word('turnToBack') })] }), journey != null && _jsx("p", { className: "post-letter__journey", children: journey })] }));
+}

package/dist/post/Postmark.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ReactNode } from 'react';
+export interface PostmarkProps extends ComponentProps<'div'> {
+    /** where it was posted — the mark's first line */
+    place: ReactNode;
+    /** when — the second line, short ("12 เม.ย."); behind another card in a PostBox only the place shows */
+    date?: ReactNode;
+}
+/**
+ * Postmark — the round mark the post strikes: where and when, two rings, turned a little, its cancel lines running on to the side.
+ * On a card's corner (`postmark` of PostLetter · PostDesk · PostBoxCard) it lies over the edge of the stamp. Information: nothing to press.
+ */
+export declare function Postmark({ place, date, className, ...rest }: PostmarkProps): import("react").JSX.Element;

package/dist/post/Postmark.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/**
+ * Postmark — the round mark the post strikes: where and when, two rings, turned a little, its cancel lines running on to the side.
+ * On a card's corner (`postmark` of PostLetter · PostDesk · PostBoxCard) it lies over the edge of the stamp. Information: nothing to press.
+ */
+export function Postmark({ place, date, className, ...rest }) {
+    return (_jsxs("div", { className: cx('postmark', className), ...rest, children: [_jsx("span", { children: place }), date != null && _jsx("span", { children: date })] }));
+}

package/dist/post/postCorner.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps, ReactNode } from 'react';
+export declare function PostCorner({ stamp, postmark, ...rest }: {
+    stamp?: ReactNode;
+    postmark?: ReactNode;
+} & ComponentProps<'div'>): import("react").JSX.Element | null;

package/dist/post/postCorner.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* the corner of a card that proves the journey: the stamp (a `Stamp`, the app's), the postmark struck over its edge.
+   A part of the three post views, never exported: a stamp here shows its pictures only (stamp.css). */
+export function PostCorner({ stamp, postmark, ...rest }) {
+    if (stamp == null && postmark == null)
+        return null;
+    return (_jsxs("div", { className: "post-corner", ...rest, children: [postmark, stamp != null && _jsx("span", { className: "post-corner__stamp", children: stamp })] }));
+}

package/dist/scaffold/Page.d.ts

@@ -1,5 +1,7 @@
 import type { ComponentProps } from 'react';
 export interface PageProps extends ComponentProps<'section'> {
+    /** in a Step: the page runs to the screen's edges and keeps the inset as its own padding — for a thing that leans, slides or casts a shadow past the inset (a postcard), which is then cut at the glass, never at the inset. Nothing pans sideways */
+    bleed?: boolean;
 }
 /**
  * Page — ONE page of words in the content: a picture (optional, first — it stays put while the words scroll), a heading, the words,
@@ -7,7 +9,7 @@ export interface PageProps extends ComponentProps<'section'> {
  * pager turns (slideTo); a single one sits in the content (a Step) directly. Was BaseContent until 2026-09-23 — "words on the base" meant
  * a still, one-scaffold screen, which is gone.
  */
-export declare function Page({ className, ...rest }: PageProps): import("react").JSX.Element;
+export declare function Page({ bleed, className, ...rest }: PageProps): import("react").JSX.Element;
 export interface CtaPackProps extends ComponentProps<'div'> {
 }
 /** CtaPack — the buttons under a Page's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */

package/dist/scaffold/Page.js

@@ -6,8 +6,8 @@ import { cx } from '../cx.js';
  * pager turns (slideTo); a single one sits in the content (a Step) directly. Was BaseContent until 2026-09-23 — "words on the base" meant
  * a still, one-scaffold screen, which is gone.
  */
-export function Page({ className, ...rest }) {
-    return _jsx("section", { className: cx('page', className), ...rest });
+export function Page({ bleed, className, ...rest }) {
+    return _jsx("section", { className: cx('page', bleed && 'page--bleed', className), ...rest });
 }
 /** CtaPack — the buttons under a Page's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */
 export function CtaPack({ className, ...rest }) {

package/dist/stamp/Stamp.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { StickyTone } from '../sticky/tones.js';
+export interface StampProps extends Omit<ComponentProps<'span'>, 'onClick'> {
+    /** the pictures, ONE to FOUR, in placement order — the app's own art (an svg, an img). The stamp places, sizes and turns them by how many there are; a fifth is not drawn */
+    pictures: ReactNode[];
+    /** the ground behind the pictures — one of STICKY_TONES (default custard). Which picture gives it is the app's choice, stored with the stamp */
+    tone?: StickyTone;
+    /** the big line at the foot, on the picture — whose stamp it is */
+    name?: ReactNode;
+    /** a small line above the name (the pictures' words); it goes when the stamp is tiny */
+    words?: ReactNode;
+    /** the pictures alone: `name` and `words` are not drawn. For a stamp stuck on something (a postcard's corner); in a `StampOn` every stamp is bare already. The words are for the album */
+    bare?: boolean;
+    /** turned a little on its middle — the one stamp a start screen hands over */
+    tilt?: 'left' | 'right';
+    /** the whole stamp is a button: it renders a `<button>` */
+    onClick?: () => void;
+}
+/**
+ * Stamp — a perforated paper stamp, 4:5: the pictures fill the inner frame on a tone, the words sit on the picture's foot.
+ * It is sized by its column (up to `--stamp-max-w`) and every inner length follows its width, so it reads from a tray to a sheet.
+ * The outer box holds the size and the shadow; the paper inside is the one whose edge is punched (a mask would cut the shadow too).
+ */
+export declare function Stamp({ pictures, tone, name, words, bare, tilt, onClick, className, ...rest }: StampProps): import("react").JSX.Element;
+export interface StampPlaceProps extends Omit<ComponentProps<'span'>, 'onClick'> {
+    /** a gap nobody is asked to fill: a paler edge (an album's free places) */
+    faint?: boolean;
+    /** the place is a button ("make yours"): it renders a `<button>` */
+    onClick?: () => void;
+}
+/** StampPlace — an empty place for a stamp: a dashed 4:5 frame the size a Stamp would be, a word or an Icon inside. */
+export declare function StampPlace({ faint, onClick, className, ...rest }: StampPlaceProps): import("react").JSX.Element;

package/dist/stamp/Stamp.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/**
+ * Stamp — a perforated paper stamp, 4:5: the pictures fill the inner frame on a tone, the words sit on the picture's foot.
+ * It is sized by its column (up to `--stamp-max-w`) and every inner length follows its width, so it reads from a tray to a sheet.
+ * The outer box holds the size and the shadow; the paper inside is the one whose edge is punched (a mask would cut the shadow too).
+ */
+export function Stamp({ pictures, tone = 'custard', name, words, bare, tilt, onClick, className, ...rest }) {
+    const shown = pictures.slice(0, 4);
+    const tap = onClick != null;
+    const Box = (tap ? 'button' : 'span');
+    const boxProps = (tap ? { type: 'button', onClick, ...rest } : rest);
+    return (_jsx(Box, { className: cx('stamp', `stamp--${shown.length}`, bare && 'stamp--bare', tilt && `stamp--tilt-${tilt}`, tap && 'stamp--tap', className), ...boxProps, children: _jsx("span", { className: "stamp__paper", children: _jsxs("span", { className: cx('stamp__pic', `sticky--${tone}`), children: [shown.map((picture, i) => _jsx("span", { className: "stamp__art", "aria-hidden": "true", children: picture }, i)), (name != null || words != null) && (_jsxs("span", { className: "stamp__cap", children: [words != null && _jsx("span", { className: "stamp__words", children: words }), name != null && _jsx("span", { className: "stamp__name", children: name })] }))] }) }) }));
+}
+/** StampPlace — an empty place for a stamp: a dashed 4:5 frame the size a Stamp would be, a word or an Icon inside. */
+export function StampPlace({ faint, onClick, className, ...rest }) {
+    const tap = onClick != null;
+    const Box = (tap ? 'button' : 'span');
+    const boxProps = (tap ? { type: 'button', onClick, ...rest } : rest);
+    return _jsx(Box, { className: cx('stamp-place', faint && 'stamp-place--faint', className), ...boxProps });
+}

package/dist/stamp/StampBook.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export interface StampBookProps extends ComponentProps<'div'> {
+    /** how many places the page shows: the ones no StampCell fills are drawn empty */
+    places?: number;
+    /** ONE line of small stamps that scrolls sideways, no ground — the tray a member picks from */
+    strip?: boolean;
+}
+/** StampBook — the album page: StampCells three across on an album ground, the free places drawn empty up to `places`. */
+export declare function StampBook({ places, strip, className, children, ...rest }: StampBookProps): import("react").JSX.Element;
+export interface StampCellProps extends Omit<ComponentProps<'span'>, 'onClick'> {
+    /** a short line under the stamp — who it is from */
+    label?: ReactNode;
+    /** the cell is a button: it renders a `<button>` (give the Stamp inside no `onClick`) */
+    onClick?: () => void;
+    /** with `onClick`: this stamp is in use (stuck on the note) — `aria-pressed`, a check on its corner. Omit it and the cell is a plain button */
+    on?: boolean;
+}
+/** StampCell — one place of a StampBook: a Stamp (the child) and a short label under it. */
+export declare function StampCell({ label, onClick, on, className, children, ...rest }: StampCellProps): import("react").JSX.Element;

package/dist/stamp/StampBook.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from 'react';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
+import { StampPlace } from './Stamp.js';
+/** StampBook — the album page: StampCells three across on an album ground, the free places drawn empty up to `places`. */
+export function StampBook({ places = 0, strip, className, children, ...rest }) {
+    const free = Math.max(0, places - Children.count(children));
+    return (_jsxs("div", { className: cx('stamp-book', strip && 'stamp-book--strip', className), ...rest, children: [children, Array.from({ length: free }, (_, i) => _jsx(StampPlace, { faint: true, "aria-hidden": "true" }, i))] }));
+}
+/** StampCell — one place of a StampBook: a Stamp (the child) and a short label under it. */
+export function StampCell({ label, onClick, on, className, children, ...rest }) {
+    const tap = onClick != null;
+    const Box = (tap ? 'button' : 'span');
+    const boxProps = (tap ? { type: 'button', onClick, 'aria-pressed': on, ...rest } : rest);
+    return (_jsxs(Box, { className: cx('stamp-cell', className), ...boxProps, children: [children, label != null && _jsx("span", { className: "stamp-cell__label", children: label }), on && _jsx("span", { className: "stamp-cell__on", "aria-hidden": "true", children: _jsx(Icon, { name: "check" }) })] }));
+}

package/dist/stamp/StampOn.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentProps } from 'react';
+/** where a stuck stamp's MIDDLE is, as a share of its surface: 0 = the left / top edge, 1 = the right / bottom edge */
+export interface StampAt {
+    x: number;
+    y: number;
+}
+export interface StampOnProps extends ComponentProps<'div'> {
+    /** CONTROLLED: where the stamp is — with `onAtChange`; the app stores it with the note */
+    at?: StampAt;
+    /** UNCONTROLLED: where it starts (default the middle) */
+    defaultAt?: StampAt;
+    /** how far it is turned, in degrees — the app's (a hand never sticks one straight) */
+    turn?: number;
+    /** the member moved it (a drag let go, an arrow key): the stamp ASKS with the new place. With it the stamp can be dragged; without it the stamp is still — the receiver's view */
+    onAtChange?: (at: StampAt) => void;
+    /** a draggable stamp's accessible name ("แสตมป์ของต้น") */
+    label?: string;
+}
+/**
+ * StampOn — a Stamp (the child) stuck on a surface at the place the member chose. The surface is the nearest positioned box:
+ * a Sticky's `stuck`, a postcard's face. `at` is the stamp's middle as a share of that surface, so the note reads the same at any size.
+ * With `onAtChange` the member drags it (finger or mouse; the arrow keys move it too): while the finger holds, the stamp writes its
+ * own place, and on letting go it ASKS — the app owns `at`. It never leaves the surface.
+ */
+export declare function StampOn({ at, defaultAt, turn, onAtChange, label, className, style, children, ...rest }: StampOnProps): import("react").JSX.Element;