@usableapp/cardds 0.7.85 → 0.7.87

package/dist/index.d.ts

@@ -81,6 +81,7 @@ export * from './sticky/StickyField.js';
 export * from './sticky/StickyPick.js';
 export * from './sticky/StickyThread.js';
 export * from './sticky/StickyBoard.js';
+export * from './sticky/StickyPile.js';
 export * from './sticky/StickyAnswer.js';
 export * from './stamp/Stamp.js';
 export * from './stamp/StampBook.js';

package/dist/index.js

@@ -85,6 +85,7 @@ export * from './sticky/StickyField.js';
 export * from './sticky/StickyPick.js';
 export * from './sticky/StickyThread.js';
 export * from './sticky/StickyBoard.js';
+export * from './sticky/StickyPile.js';
 export * from './sticky/StickyAnswer.js';
 export * from './stamp/Stamp.js';
 export * from './stamp/StampBook.js';

package/dist/lists/Row.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, createElement, isValidElement, useId, useLayoutEffect, useRef } from 'react';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
-import { reducedMotion, useDisclosure } from '../state.js';
+import { reducedMotion, setRefs, useDisclosure } from '../state.js';
 /**
  * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
@@ -56,12 +56,5 @@ export function Rows({ heading, className, children, ref, ...rest }) {
         was.current = at;
         order.current = rows;
     });
-    const setRef = (node) => {
-        own.current = node;
-        if (typeof ref === 'function')
-            ref(node);
-        else if (ref)
-            ref.current = node;
-    };
-    return (_jsxs("div", { ref: setRef, className: cx('rows', className), role: named ? 'group' : undefined, "aria-labelledby": named ? id : undefined, ...rest, children: [named && (isValidElement(heading) ? cloneElement(heading, { id }) : _jsx("span", { className: "rows__head", id: id, children: heading })), children] }));
+    return (_jsxs("div", { ref: setRefs(own, ref), className: cx('rows', className), role: named ? 'group' : undefined, "aria-labelledby": named ? id : undefined, ...rest, children: [named && (isValidElement(heading) ? cloneElement(heading, { id }) : _jsx("span", { className: "rows__head", id: id, children: heading })), children] }));
 }

package/dist/pressable.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+/** a box that is a `<button>` when it can be pressed (`onClick` given), else `still` — the tag to render and what to spread on it:
+ *  `type="button"`, the onClick and `extra` (attributes a button alone takes, `aria-pressed`) before `rest`. `tap` says which it is */
+export declare function pressable<E extends 'span' | 'div'>(onClick: (() => void) | undefined, still: E, rest: ComponentProps<E>, extra?: ComponentProps<'button'>): {
+    tap: boolean;
+    Box: E;
+    boxProps: ComponentProps<E>;
+};

package/dist/pressable.js

@@ -0,0 +1,6 @@
+/** a box that is a `<button>` when it can be pressed (`onClick` given), else `still` — the tag to render and what to spread on it:
+ *  `type="button"`, the onClick and `extra` (attributes a button alone takes, `aria-pressed`) before `rest`. `tap` says which it is */
+export function pressable(onClick, still, rest, extra) {
+    const tap = onClick != null;
+    return { tap, Box: (tap ? 'button' : still), boxProps: (tap ? { type: 'button', onClick, ...extra, ...rest } : rest) };
+}

package/dist/scaffold/Screen.js

@@ -1,5 +1,5 @@
 import { createElement, useEffect, useRef } from 'react';
-import { warnOnce, watchSize } from '../state.js';
+import { setRefs, warnOnce, watchSize } from '../state.js';
 import { cx } from '../cx.js';
 /**
  * Screen — the mobile screen in THREE parts: **top** and **content** (the children) in one flex column, the content down to the
@@ -39,12 +39,5 @@ export function Screen({ fill, palette, as = 'div', top, bottom, ready = true, c
         }
         return watchSize([lead], () => el.style.setProperty('--top-h', `${lead.offsetHeight}px`));
     }, [top, ready]);
-    const setRef = (node) => {
-        own.current = node;
-        if (typeof ref === 'function')
-            ref(node);
-        else if (ref)
-            ref.current = node;
-    };
-    return createElement(as, { className: cx('screen', fill && 'screen--fill', top === 'lead' && 'screen--lead', className), 'data-palette': palette, 'data-pending': ready ? undefined : '', 'aria-busy': ready ? undefined : true, ref: setRef, ...rest }, ready && top !== 'lead' ? top : null, ready ? children : null, ready ? bottom : null);
+    return createElement(as, { className: cx('screen', fill && 'screen--fill', top === 'lead' && 'screen--lead', className), 'data-palette': palette, 'data-pending': ready ? undefined : '', 'aria-busy': ready ? undefined : true, ref: setRefs(own, ref), ...rest }, ready && top !== 'lead' ? top : null, ready ? children : null, ready ? bottom : null);
 }

package/dist/sheets/StackSheet.js

@@ -12,6 +12,7 @@ import { Text } from '../type/Text.js';
 import { Icon } from '../type/Icon.js';
 import { Badge } from '../numbers/Badge.js';
 import { word } from '../words.js';
+import { runOver } from './sheetMeasure.js';
 /**
  * StackSheet — ONE sheet of a `SheetStack`, in the one sheet shape: SHEET HEAD (back · title · tabs or an icon) pinned at the top ·
  * SHEET BODY (the children; scrolls) · SHEET FOOT (`foot`, the CTA) at the bottom. Its tabs are icon buttons. The chosen one is filled
@@ -22,19 +23,14 @@ import { word } from '../words.js';
 export function StackSheet({ title, tone, paper, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel = word('back'), backAt = 'none', stack, className, children, ...rest }) {
     const [tab, pick] = useControlled(tabProp, defaultTab ?? tabs?.[0]?.id, onTabChange);
     // a title longer than its room does not wrap: it runs sideways, like a song title in a short slot — the room it overflows by
-    // is measured here (the tabs may grow with the text size) and handed to the CSS as --_over
+    // is measured here (the tabs may grow with the text size) and handed to the CSS as --_over / --_run, the Sheet's measurer
     const titleRef = useRef(null);
     const [long, setLong] = useState(false);
     useEffect(() => {
         const h = titleRef.current, run = h?.firstElementChild;
         if (!h || !run)
             return;
-        const measure = () => {
-            const over = Math.max(0, Math.ceil(run.scrollWidth - h.clientWidth));
-            h.style.setProperty('--_over', `${over}px`);
-            h.style.setProperty('--_run', `${(over / 30 + 3).toFixed(1)}s`);
-            setLong(over > 0);
-        };
+        const measure = () => setLong(runOver(h, run));
         measure();
         return watchSize([h, run], measure);
     }, [title]);

package/dist/sheets/sheetMeasure.d.ts

@@ -5,6 +5,7 @@ type SheetRef = RefObject<HTMLElement | null>;
 export declare const slid: (el: HTMLElement) => number;
 export declare const stopsOf: (el: HTMLElement) => Record<Resting, number>;
 export declare function usePeekStrip(ref: SheetRef): void;
+export declare function runOver(line: HTMLElement, words?: Node): boolean;
 export declare function useTitleRun(ref: SheetRef, onLong: (long: boolean) => void): void;
 export declare function useFootRoom(ref: SheetRef): void;
 export {};

package/dist/sheets/sheetMeasure.js

@@ -38,9 +38,19 @@ export function usePeekStrip(ref) {
         return () => { stop(); box.style.removeProperty('--sheet-peek'); };
     }, []);
 }
-/* the TITLE is one line; too long for it, it runs sideways like a song title (Lh 2026-10-03): the sheet measures how far its
-   words overflow the line and hands the widths to the CSS (--_over, --_run). The heading renders `.is-long` from what this
-   reports. Measured on the words themselves (a range), so the running indent never feeds back into the number. */
+/* a TITLE is one line; too long for it, it runs sideways like a song title (Lh 2026-09-24 for the StackSheet, 2026-10-03 for the Sheet):
+   how far its `words` overflow the `line` they stand on, published on the line for the CSS — `--_over` (px) and `--_run` (30px a
+   second plus the pauses). Measured on the words themselves (a range), so the running indent or translate never feeds back into
+   the number. Returns whether it is long; the heading renders `.is-long` from that. */
+export function runOver(line, words = line) {
+    const range = document.createRange();
+    range.selectNodeContents(words);
+    const over = Math.max(0, Math.ceil(range.getBoundingClientRect().width - line.clientWidth));
+    line.style.setProperty('--_over', `${over}px`);
+    line.style.setProperty('--_run', `${(over / 30 + 3).toFixed(1)}s`);
+    return over > 0;
+}
+/* the Sheet's title: the app's own heading, measured whole (sheet.css runs it with text-indent) */
 export function useTitleRun(ref, onLong) {
     useEffect(() => {
         const el = ref.current, title = el?.querySelector(':scope > .card__head > :is(h1, h2, h3):first-child, :scope > .sheet__head .sheet__title');
@@ -48,12 +58,7 @@ export function useTitleRun(ref, onLong) {
             return;
         let was = false;
         const measure = () => {
-            const words = document.createRange();
-            words.selectNodeContents(title);
-            const over = Math.max(0, Math.ceil(words.getBoundingClientRect().width - title.clientWidth));
-            title.style.setProperty('--_over', `${over}px`);
-            title.style.setProperty('--_run', `${(over / 30 + 3).toFixed(1)}s`);
-            const long = over > 0;
+            const long = runOver(title);
             if (long !== was) {
                 was = long;
                 onLong(long);

package/dist/sheets/stackCard.js

@@ -46,6 +46,31 @@ const pullsHead = (target, head) => {
         return false;
     return target === head || !!target.closest('.sheet-stack__back') || !!target.closest('.card__head > :is(h1, h2, h3)');
 };
+/* once a finger is down the DOCUMENT hears it, not the head or the body it started on: the finger leaves them while it drags.
+   One set of move / up / cancel at a time; `stop` takes the set off, and is safe to call with none on */
+const docPointer = () => {
+    let stop = () => { };
+    return {
+        listen: (move, up, cancel) => {
+            stop();
+            document.addEventListener('pointermove', move, { passive: false });
+            document.addEventListener('pointerup', up);
+            document.addEventListener('pointercancel', cancel);
+            stop = () => {
+                document.removeEventListener('pointermove', move);
+                document.removeEventListener('pointerup', up);
+                document.removeEventListener('pointercancel', cancel);
+                stop = () => { };
+            };
+        },
+        stop: () => stop(),
+    };
+};
+/* a pull that moved ends in a click the browser still fires: the card swallows it for one frame */
+const armSwallow = (swallow) => {
+    swallow.current = true;
+    requestAnimationFrame(() => { swallow.current = false; });
+};
 /**
  * The card's own pull, refresh and focus. Listeners sit on this card's head and body.
  * `--_pull` / `--_lift` are written while a finger is down, the same way a single Sheet writes `--_drag`.
@@ -86,24 +111,8 @@ export function useStackCard(ref, place, swallow) {
         const stack = card.closest('.sheet-stack');
         const head = card.querySelector(':scope > .card__head');
         const scroller = card.querySelector(':scope > .sheet__body') ?? card;
-        let stopDoc = () => { };
-        const listen = (move, up, cancel) => {
-            stopDoc();
-            document.addEventListener('pointermove', move, { passive: false });
-            document.addEventListener('pointerup', up);
-            document.addEventListener('pointercancel', cancel);
-            stopDoc = () => {
-                document.removeEventListener('pointermove', move);
-                document.removeEventListener('pointerup', up);
-                document.removeEventListener('pointercancel', cancel);
-                stopDoc = () => { };
-            };
-        };
+        const doc = docPointer();
         const primary = (e) => e.isPrimary && e.button === 0;
-        const armSwallow = () => {
-            swallow.current = true;
-            requestAnimationFrame(() => { swallow.current = false; });
-        };
         const release = (prop) => {
             live.current = null;
             card.classList.remove('is-dragging');
@@ -144,7 +153,7 @@ export function useStackCard(ref, place, swallow) {
                 const dy = Math.max(pull.last, along('down', pull.startY, ev.clientY));
                 const moved = pull.moved || dy >= pull.slop;
                 headPull.current = null;
-                stopDoc();
+                doc.stop();
                 if (moved && dy >= pull.commit) {
                     card.classList.remove('is-dragging');
                     readFrame(card);
@@ -156,16 +165,16 @@ export function useStackCard(ref, place, swallow) {
                 else
                     release('--_pull');
                 if (moved)
-                    armSwallow();
+                    armSwallow(swallow);
             };
             const onCancel = (ev) => {
                 if (ev.pointerId !== pull.pointerId || headPull.current !== pull)
                     return;
                 headPull.current = null;
-                stopDoc();
+                doc.stop();
                 release('--_pull');
             };
-            listen(onMove, onUp, onCancel);
+            doc.listen(onMove, onUp, onCancel);
         };
         const onBodyDown = (e) => {
             const ask = placeRef.current;
@@ -220,22 +229,22 @@ export function useStackCard(ref, place, swallow) {
                 const dy = Math.max(pull.lastDy, Math.max(0, ev.clientY - pull.startY));
                 const go = pull.moved && !pull.drop && scroller.scrollTop <= 0 && dy >= pull.commit;
                 bodyPull.current = null;
-                stopDoc();
+                doc.stop();
                 readFrame(scroller);
                 finish();
                 if (go)
                     placeRef.current?.onRefresh?.();
                 if (pull.moved)
-                    armSwallow();
+                    armSwallow(swallow);
             };
             const onCancel = (ev) => {
                 if (ev.pointerId !== pull.pointerId || bodyPull.current !== pull)
                     return;
                 bodyPull.current = null;
-                stopDoc();
+                doc.stop();
                 finish();
             };
-            listen(onMove, onUp, onCancel);
+            doc.listen(onMove, onUp, onCancel);
         };
         /* a finger: the browser takes a touch for its own scroll at the first move unless that move is refused here */
         let touch = null;
@@ -264,7 +273,7 @@ export function useStackCard(ref, place, swallow) {
         return () => {
             scroller.removeEventListener('touchstart', onTouchStart);
             scroller.removeEventListener('touchmove', onTouchMove);
-            stopDoc();
+            doc.stop();
             headPull.current = null;
             bodyPull.current = null;
             scroller.style.removeProperty('--_refresh');
@@ -285,23 +294,7 @@ export function useStackCard(ref, place, swallow) {
         const head = card.querySelector(':scope > .card__head');
         if (!head || !stack)
             return;
-        let stopDoc = () => { };
-        const listen = (move, up, cancel) => {
-            stopDoc();
-            document.addEventListener('pointermove', move, { passive: false });
-            document.addEventListener('pointerup', up);
-            document.addEventListener('pointercancel', cancel);
-            stopDoc = () => {
-                document.removeEventListener('pointermove', move);
-                document.removeEventListener('pointerup', up);
-                document.removeEventListener('pointercancel', cancel);
-                stopDoc = () => { };
-            };
-        };
-        const armSwallow = () => {
-            swallow.current = true;
-            requestAnimationFrame(() => { swallow.current = false; });
-        };
+        const doc = docPointer();
         const release = () => {
             live.current = null;
             card.classList.remove('is-dragging');
@@ -365,7 +358,7 @@ export function useStackCard(ref, place, swallow) {
                 const upPx = Math.max(pull.last, along('up', pull.startY, ev.clientY));
                 const moved = pull.moved || upPx >= pull.slop;
                 headPull.current = null;
-                stopDoc();
+                doc.stop();
                 if (moved && upPx >= pull.commit) {
                     card.classList.remove('is-dragging');
                     readFrame(card);
@@ -377,20 +370,20 @@ export function useStackCard(ref, place, swallow) {
                 else
                     release();
                 if (moved)
-                    armSwallow();
+                    armSwallow(swallow);
             };
             const onCancel = (ev) => {
                 if (ev.pointerId !== pull.pointerId || headPull.current !== pull)
                     return;
                 headPull.current = null;
-                stopDoc();
+                doc.stop();
                 release();
             };
-            listen(onMove, onUp, onCancel);
+            doc.listen(onMove, onUp, onCancel);
         };
         head.addEventListener('pointerdown', onDown);
         return () => {
-            stopDoc();
+            doc.stop();
             headPull.current = null;
             if (live.current?.prop === '--_lift')
                 release();

package/dist/stamp/Stamp.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
+import { pressable } from '../pressable.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.
  * Every stamp is ONE size wherever it stands (`--stamp-size`, two taps wide: 96 × 120) — what holds it only places it; a holder narrower than that shows it whole, smaller.
@@ -8,9 +9,7 @@ import { cx } from '../cx.js';
  */
 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);
+    const { tap, Box, boxProps } = pressable(onClick, 'span', 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 })] }))] }) }) }));
 }
 /**
@@ -19,8 +18,6 @@ export function Stamp({ pictures, tone = 'custard', name, words, bare, tilt, onC
  * and a `--stamp-place-dash` above 0 stretches each dot into a dash.
  */
 export function StampPlace({ faint, onClick, className, children, ...rest }) {
-    const tap = onClick != null;
-    const Box = (tap ? 'button' : 'span');
-    const boxProps = (tap ? { type: 'button', onClick, ...rest } : rest);
+    const { Box, boxProps } = pressable(onClick, 'span', rest);
     return (_jsxs(Box, { className: cx('stamp-place', faint && 'stamp-place--faint', className), ...boxProps, children: [_jsx("svg", { className: "stamp-place__edge", "aria-hidden": "true", focusable: "false", children: _jsx("rect", {}) }), children] }));
 }

package/dist/stamp/StampBook.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children } from 'react';
 import { cx } from '../cx.js';
+import { pressable } from '../pressable.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`. The book places its stamps and never sizes them: each is the one size of a stamp, in the middle of its third. */
@@ -10,8 +11,6 @@ export function StampBook({ places = 0, strip, bare, className, children, ...res
 }
 /** 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);
+    const { Box, boxProps } = pressable(onClick, 'span', rest, { 'aria-pressed': on });
     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

@@ -15,6 +15,14 @@ export interface StampOnProps extends ComponentProps<'div'> {
     onAtChange?: (at: StampAt) => void;
     /** a draggable stamp's accessible name ("แสตมป์ของต้น") */
     label?: string;
+    /** the stamp can be TAKEN OFF: when a drag ends, an arrow key moves it, or (on a stamp that cannot be dragged) it is pressed, a cross stands on its top right corner for `removeFor` ms; a press on the cross — or Delete / Backspace on the focused stamp — ASKS. The app owns what is stuck (as it owns `at`): it takes the `StampOn` away. Without it nothing changes: no cross, the stamp is dragged as before and cannot be taken off. A press or a drag on a removable stamp never reaches what lies under it */
+    onRemove?: () => void;
+    /** the cross's accessible name (default: cardds's own word, "Remove" / "เอาออก" by the page's language) */
+    removeLabel?: string;
+    /** how long the cross stands after the stamp was touched, in ms (default 3000). It stays while it holds the keyboard focus; a new drag takes it away until the drag ends */
+    removeFor?: number;
+    /** the stamp at the stamp's MAIN size, 96 × 120 (`--stamp-size`), to cover what it lies on; the default is the small size, 48 × 60 (`--stamp-sm-size`), which leaves a note's words readable */
+    main?: boolean;
     /** the stamp sticks ITSELF: as it comes onto the screen it is struck onto its place (shown large, pressed down to its size). Nobody
      *  picked it or pressed to stick it — the app shows it when its own move (send) begins. With `onArrived` */
     arrive?: boolean;
@@ -24,9 +32,19 @@ export interface StampOnProps extends ComponentProps<'div'> {
 /**
  * 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.
- * The stamp is the SMALL size: 48 × 60 on any surface, whatever the surface's size (`--stamp-sm-size`, one tap wide).
+ * The stamp is the SMALL size: 48 × 60 on any surface, whatever the surface's size (`--stamp-sm-size`, one tap wide); `main` makes it the
+ * stamp's main size, 96 × 120, to cover what it lies on.
  * 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.
- * With `arrive` it sticks itself: struck onto its place as it comes on, and `onArrived` tells the app it has landed.
+ * With `onRemove` it can be taken off: once touched (a drag let go, an arrow key, or a press on a stamp that cannot be dragged) a cross
+ * stands on its top right corner for `removeFor` ms; a press on the cross, or Delete / Backspace on the focused stamp, ASKS, and the app
+ * takes the stamp away. `onRemove` without `onAtChange` is a stamp that stays where it is and is taken off: a press shows the cross
+ * (a warning instead would leave the prop dead, since the cross needs a touch to appear). A press or a drag on a removable stamp or its
+ * cross stops there, so a pressable card or pile under it is not pressed. The cross stays upright whatever the stamp's `turn`: it is a
+ * button, and its 44 × 44 touch target round the 24 disc should be square to the screen.
+ * Inside a `StickyPile`, a stamp on a note under the top one is inert: no drag, no cross, no focus.
+ * With `arrive` it sticks itself: struck onto its place as it comes on, and `onArrived` tells the app it has landed. A stamp that is still
+ * arriving cannot be taken off: no cross, no focus, no Delete until it has landed (it is not stuck yet). `arrive` with `main` strikes
+ * the main size, 96 × 120, onto its place.
  */
-export declare function StampOn({ at, defaultAt, turn, onAtChange, label, arrive, onArrived, className, style, onAnimationEnd, children, ...rest }: StampOnProps): import("react").JSX.Element;
+export declare function StampOn({ at, defaultAt, turn, onAtChange, label, onRemove, removeLabel, removeFor, main, arrive, onArrived, className, style, onAnimationEnd, children, ...rest }: StampOnProps): import("react").JSX.Element;

package/dist/stamp/StampOn.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '../cx.js';
 import { reducedMotion, useControlled } from '../state.js';
+import { Icon } from '../type/Icon.js';
+import { word } from '../words.js';
+import { UnderNotes } from './underNotes.js';
 const MIDDLE = { x: 0.5, y: 0.5 };
 const STEP = 0.02; // an arrow key's move: a share of the surface
 const MOVES = { ArrowLeft: [-STEP, 0], ArrowRight: [STEP, 0], ArrowUp: [0, -STEP], ArrowDown: [0, STEP] };
@@ -15,23 +18,42 @@ function within(el, x, y) {
     const mx = el.offsetWidth / 2 / box.clientWidth, my = el.offsetHeight / 2 / box.clientHeight;
     return { x: round(clamp(x, mx, 1 - mx)), y: round(clamp(y, my, 1 - my)) };
 }
-const STRIKE = 'stamp-on-strike'; // css/stamp.css
+const STRIKE = 'strike'; // css/tokens.css — the strike every mark struck onto paper reads
 const write = (el, at) => { el.style.setProperty('--stamp-on-x', String(at.x)); el.style.setProperty('--stamp-on-y', String(at.y)); };
 /**
  * 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.
- * The stamp is the SMALL size: 48 × 60 on any surface, whatever the surface's size (`--stamp-sm-size`, one tap wide).
+ * The stamp is the SMALL size: 48 × 60 on any surface, whatever the surface's size (`--stamp-sm-size`, one tap wide); `main` makes it the
+ * stamp's main size, 96 × 120, to cover what it lies on.
  * 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.
- * With `arrive` it sticks itself: struck onto its place as it comes on, and `onArrived` tells the app it has landed.
+ * With `onRemove` it can be taken off: once touched (a drag let go, an arrow key, or a press on a stamp that cannot be dragged) a cross
+ * stands on its top right corner for `removeFor` ms; a press on the cross, or Delete / Backspace on the focused stamp, ASKS, and the app
+ * takes the stamp away. `onRemove` without `onAtChange` is a stamp that stays where it is and is taken off: a press shows the cross
+ * (a warning instead would leave the prop dead, since the cross needs a touch to appear). A press or a drag on a removable stamp or its
+ * cross stops there, so a pressable card or pile under it is not pressed. The cross stays upright whatever the stamp's `turn`: it is a
+ * button, and its 44 × 44 touch target round the 24 disc should be square to the screen.
+ * Inside a `StickyPile`, a stamp on a note under the top one is inert: no drag, no cross, no focus.
+ * With `arrive` it sticks itself: struck onto its place as it comes on, and `onArrived` tells the app it has landed. A stamp that is still
+ * arriving cannot be taken off: no cross, no focus, no Delete until it has landed (it is not stuck yet). `arrive` with `main` strikes
+ * the main size, 96 × 120, onto its place.
  */
-export function StampOn({ at, defaultAt = MIDDLE, turn = 0, onAtChange, label, arrive, onArrived, className, style, onAnimationEnd, children, ...rest }) {
+export function StampOn({ at, defaultAt = MIDDLE, turn = 0, onAtChange, label, onRemove, removeLabel, removeFor = 3000, main, arrive, onArrived, className, style, onAnimationEnd, children, ...rest }) {
+    const under = useContext(UnderNotes);
     const [shown, request] = useControlled(at, defaultAt, onAtChange);
     const [held, setHeld] = useState(false);
+    const [cross, setCross] = useState(false);
     const grip = useRef(null);
-    const moves = onAtChange != null;
+    const timer = useRef(undefined);
+    const moves = onAtChange != null && !under;
+    const [arrived, setArrived] = useState(false);
+    const removes = onRemove != null && !under && !(arrive && !arrived);
     const ask = (next) => { if (next.x !== shown.x || next.y !== shown.y)
         request(next); };
+    const stop = () => clearTimeout(timer.current);
+    const show = () => { if (!removes)
+        return; stop(); setCross(true); timer.current = setTimeout(() => setCross(false), removeFor); };
+    useEffect(() => stop, []);
     const down = (e) => {
         const el = e.currentTarget, box = el.offsetParent;
         if (!box || e.button !== 0)
@@ -40,6 +62,8 @@ export function StampOn({ at, defaultAt = MIDDLE, turn = 0, onAtChange, label, a
         grip.current = { dx: (e.clientX - r.left - box.clientLeft) / box.clientWidth - shown.x, dy: (e.clientY - r.top - box.clientTop) / box.clientHeight - shown.y, next: shown };
         el.setPointerCapture(e.pointerId);
         setHeld(true);
+        stop();
+        setCross(false); // a new drag takes the cross away until it ends
     };
     const move = (e) => {
         const el = e.currentTarget, box = el.offsetParent, g = grip.current;
@@ -56,26 +80,59 @@ export function StampOn({ at, defaultAt = MIDDLE, turn = 0, onAtChange, label, a
         grip.current = null;
         setHeld(false);
         write(e.currentTarget, shown); // back to what the app has: if it takes the new place, the next render writes it
-        if (e.type === 'pointerup')
+        if (e.type === 'pointerup') {
             ask(g.next);
+            show();
+        }
     };
     const key = (e) => {
-        const by = MOVES[e.key];
-        if (!by)
-            return;
-        e.preventDefault();
-        ask(within(e.currentTarget, shown.x + by[0], shown.y + by[1]));
+        if (e.target !== e.currentTarget)
+            return; // the cross has its own keys
+        const by = moves ? MOVES[e.key] : undefined;
+        if (by) {
+            e.preventDefault();
+            e.stopPropagation();
+            ask(within(e.currentTarget, shown.x + by[0], shown.y + by[1]));
+            show();
+        }
+        else if (removes && (e.key === 'Delete' || e.key === 'Backspace')) {
+            e.preventDefault();
+            e.stopPropagation();
+            stop();
+            setCross(false);
+            onRemove();
+        }
+        else if (removes && !moves && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            e.stopPropagation();
+            show();
+        }
+    };
+    // nothing that starts on a removable stamp or its cross reaches what lies under it: a click is the end of a press, and a drag's end is one too
+    const click = (e) => {
+        e.stopPropagation();
+        rest.onClick?.(e);
+        if (!moves)
+            show();
     };
     const landed = useRef(onArrived);
     landed.current = onArrived;
-    useEffect(() => { if (arrive && reducedMotion())
-        landed.current?.(); }, [arrive]); // no strike to wait for
+    const land = () => { setArrived(true); landed.current?.(); };
+    useEffect(() => { if (!arrive)
+        setArrived(false);
+    else if (reducedMotion()) {
+        setArrived(true);
+        landed.current?.();
+    } }, [arrive]); // no strike to wait for
     const struck = (e) => {
         onAnimationEnd?.(e);
         if (arrive && e.target === e.currentTarget && e.animationName === STRIKE)
-            onArrived?.();
+            land();
     };
     const place = { '--stamp-on-x': shown.x, '--stamp-on-y': shown.y, '--stamp-on-turn': turn, ...style };
-    const drag = moves ? { tabIndex: 0, role: 'group', 'aria-label': label, onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up, onKeyDown: key } : null;
-    return (_jsx("div", { className: cx('stamp-on', moves && 'stamp-on--move', arrive && 'stamp-on--arrive', held && 'is-held', className), style: place, onAnimationEnd: struck, ...rest, ...drag, children: children }));
+    const own = moves || removes ? { tabIndex: 0, role: 'group', 'aria-label': label, onKeyDown: key } : null;
+    const drag = moves ? { onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up } : null;
+    const guard = removes ? { onClick: click } : null;
+    return (_jsxs("div", { className: cx('stamp-on', moves && 'stamp-on--move', main && 'stamp-on--main', arrive && 'stamp-on--arrive', held && 'is-held', className), style: place, onAnimationEnd: struck, ...rest, ...own, ...drag, ...guard, inert: under || undefined, children: [children, removes && cross && (_jsx("button", { type: "button", className: "stamp-on__remove", "aria-label": removeLabel ?? word('remove'), onPointerDown: (e) => e.stopPropagation(), onClick: (e) => { e.stopPropagation(); stop(); setCross(false); onRemove(); }, onFocus: stop, onBlur: () => { if (!grip.current)
+                    show(); }, children: _jsx("span", { className: "stamp-on__remove-disc", children: _jsx(Icon, { name: "x" }) }) }))] }));
 }

package/dist/stamp/underNotes.d.ts

@@ -0,0 +1,3 @@
+/** set by a holder whose notes lie one under another (`StickyPile`): a stamp on a note that only shows what peeks out is inert — no drag, no cross, no focus.
+ *  Not part of the package's API: a holder writes it, `StampOn` reads it. */
+export declare const UnderNotes: import("react").Context<boolean>;

package/dist/stamp/underNotes.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+/** set by a holder whose notes lie one under another (`StickyPile`): a stamp on a note that only shows what peeks out is inert — no drag, no cross, no focus.
+ *  Not part of the package's API: a holder writes it, `StampOn` reads it. */
+export const UnderNotes = createContext(false);

package/dist/state.d.ts

@@ -1,4 +1,4 @@
-import { type SyntheticEvent } from 'react';
+import { type Ref, type SyntheticEvent } from 'react';
 /** controlled like an input: `value` given = the app owns it; undefined = the component keeps its own, starting at `initial`.
  *  Returns the value shown and `request(next, …extra)`: nothing when `next` is what shows; else it moves the component's own copy
  *  (uncontrolled only) and ASKS the app — `onChange(next, …extra)`. `request` keeps one identity for the component's life. */
@@ -12,6 +12,10 @@ export declare function useDisclosure(open: boolean | undefined, defaultOpen?: b
     open: boolean;
     onToggle: (e: SyntheticEvent<HTMLDetailsElement>) => void;
 };
+/** the node to the component's own ref AND the caller's `ref` (a function or an object: React 19 passes it as a prop). Give the result to the element's `ref` */
+export declare const setRefs: <T extends Element>(own: {
+    current: Element | null;
+}, ref: Ref<T> | undefined) => (node: T | null) => void;
 /** the latest value in a ref — for a handler that a timer, an observer or a listener set up once calls later */
 export declare function useLatest<T>(value: T): import("react").RefObject<T>;
 /** watch boxes for a size change (the keyboard, a font arriving, a wrap): `fn` on each — once at the start too, as the browser

package/dist/state.js

@@ -30,6 +30,14 @@ export function useDisclosure(open, defaultOpen = false, onOpenChange) {
         },
     };
 }
+/** the node to the component's own ref AND the caller's `ref` (a function or an object: React 19 passes it as a prop). Give the result to the element's `ref` */
+export const setRefs = (own, ref) => (node) => {
+    own.current = node;
+    if (typeof ref === 'function')
+        ref(node);
+    else if (ref)
+        ref.current = node;
+};
 /** the latest value in a ref — for a handler that a timer, an observer or a listener set up once calls later */
 export function useLatest(value) {
     const ref = useRef(value);