@usableapp/cardds 0.7.100 → 0.7.102

package/dist/choice/Calendar.js

@@ -3,9 +3,13 @@ import { useControlled } from '../state.js';
 import { cx } from '../cx.js';
 import { IconBtn } from '../actions/IconBtn.js';
 import { word } from '../words.js';
+import { calendarDay } from './calendarDay.js';
 /** Calendar — a month grid of 44px round cells: one accent day, optional marks; prev/next in the head. It shows ONE month and knows no dates:
  *  the app owns which month (`title`, `days`, `start` + `onPrev` / `onNext`) and which day (`selected` + `onSelect`, or `defaultSelected`). On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). */
 export function Calendar({ title, days = 30, start = 1, selected, defaultSelected, onSelect, onPrev, onNext, prevLabel = word('previous'), nextLabel = word('next'), marks = [], marks2 = [], disabled = [], weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], nav, className, ...rest }) {
     const [day, pick] = useControlled(selected, defaultSelected, onSelect);
-    return (_jsxs("div", { className: cx('calendar', className), ...rest, children: [_jsxs("div", { className: "calendar__head", children: [_jsx("span", { className: "t-title", children: title }), nav ?? (_jsxs("span", { className: "icon-row", children: [_jsx(IconBtn, { sm: true, icon: "chevron-left", label: prevLabel, onClick: onPrev }), _jsx(IconBtn, { sm: true, icon: "chevron-right", label: nextLabel, onClick: onNext })] }))] }), _jsxs("div", { className: "calendar__grid", children: [weekdays.map((d) => _jsx("span", { className: "calendar__wd", children: d }, d)), Array.from({ length: days }, (_, i) => i + 1).map((d) => (_jsx("button", { type: "button", className: cx('calendar__day', marks.includes(d) && 'calendar__day--mark', marks2.includes(d) && 'calendar__day--mark2'), "aria-selected": d === day ? 'true' : undefined, onClick: () => pick(d), disabled: disabled.includes(d), style: d === 1 ? { '--start': start } : undefined, children: d }, d)))] })] }));
+    return (_jsxs("div", { className: cx('calendar', className), ...rest, children: [_jsxs("div", { className: "calendar__head", children: [_jsx("span", { className: "t-title", children: title }), nav ?? (_jsxs("span", { className: "icon-row", children: [_jsx(IconBtn, { sm: true, icon: "chevron-left", label: prevLabel, onClick: onPrev }), _jsx(IconBtn, { sm: true, icon: "chevron-right", label: nextLabel, onClick: onNext })] }))] }), _jsxs("div", { className: "calendar__grid", children: [weekdays.map((d) => _jsx("span", { className: "calendar__wd", children: d }, d)), Array.from({ length: days }, (_, i) => i + 1).map((d) => (calendarDay({
+                        key: d, num: d, mark: marks.includes(d), mark2: marks2.includes(d), selected: d === day, disabled: disabled.includes(d),
+                        style: d === 1 ? { '--start': start } : undefined, onPick: () => pick(d),
+                    })))] })] }));
 }

package/dist/choice/CalendarWeeks.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export interface WeekDay {
+    /** the app's id for the day ("2026-06-05"): what `onSelect` hands back */
+    key: string;
+    /** what the cell shows ("5", "๕") */
+    num: ReactNode;
+    /** the day is today */
+    today?: boolean;
+    /** the day cannot be picked (already past, full) */
+    disabled?: boolean;
+    /** a soft mark (something is on) or a strong one (booked) */
+    mark?: 'soft' | 'strong';
+}
+export interface Week {
+    /** the month · year the week belongs to, in the app's words ("มิถุนายน 2569"): the head shows it while the week is the first row in sight */
+    label: ReactNode;
+    /** 7 days, in the order of `weekdays` */
+    days: WeekDay[];
+}
+export interface CalendarWeeksProps extends Omit<ComponentProps<'div'>, 'onSelect'> {
+    /** the run of weeks, in order; the app builds every date */
+    weeks: Week[];
+    /** week rows in sight, counted in rows like CardList `show` (default 2) */
+    show?: number;
+    /** CONTROLLED: the picked day's `key`, or `null` for none. The app owns it — pair it with `onSelect`. (`undefined` = uncontrolled.) */
+    selected?: string | null;
+    /** UNCONTROLLED: the day picked on arrival; the weeks then keep their own */
+    defaultSelected?: string;
+    /** a day was tapped: its `key` */
+    onSelect?: (key: string) => void;
+    /** weekday heads, 7 */
+    weekdays?: string[];
+    /** given, the label is a button: the app opens its own month / year pick. Not given, the label is plain words */
+    onLabelClick?: () => void;
+}
+/** CalendarWeeks — a run of weeks that scrolls week by week, `show` rows in sight (2 by default), Calendar's own 44px round cells; a sticky head holds
+ *  the month · year of the first row in sight and the weekday heads. It knows no dates, as Calendar: the app builds `weeks` (each a `label` and 7 days
+ *  with `key`, `num`, `today`, `disabled`, `mark`) and owns the day (`selected` + `onSelect`, or `defaultSelected`); a tap on the label (`onLabelClick`)
+ *  is the app's to answer with its month / year pick. It opens at the week that holds today (Lh 2026-10-19): the first row in sight is the week
+ *  whose day has `today`, at once and without a scroll to watch; with no `today` in the data it opens at the first week. For a day within the coming weeks on a step with little height. On a sheet, never in a Card. */
+export declare function CalendarWeeks({ weeks, show, selected, defaultSelected, onSelect, weekdays, onLabelClick, className, ref, ...rest }: CalendarWeeksProps): import("react").JSX.Element;

package/dist/choice/CalendarWeeks.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { useControlled, setRefs } from '../state.js';
+import { cx } from '../cx.js';
+import { calendarDay } from './calendarDay.js';
+/** CalendarWeeks — a run of weeks that scrolls week by week, `show` rows in sight (2 by default), Calendar's own 44px round cells; a sticky head holds
+ *  the month · year of the first row in sight and the weekday heads. It knows no dates, as Calendar: the app builds `weeks` (each a `label` and 7 days
+ *  with `key`, `num`, `today`, `disabled`, `mark`) and owns the day (`selected` + `onSelect`, or `defaultSelected`); a tap on the label (`onLabelClick`)
+ *  is the app's to answer with its month / year pick. It opens at the week that holds today (Lh 2026-10-19): the first row in sight is the week
+ *  whose day has `today`, at once and without a scroll to watch; with no `today` in the data it opens at the first week. For a day within the coming weeks on a step with little height. On a sheet, never in a Card. */
+export function CalendarWeeks({ weeks, show = 2, selected, defaultSelected, onSelect, weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], onLabelClick, className, ref, ...rest }) {
+    const [day, pick] = useControlled(selected, defaultSelected, onSelect);
+    const [first, setFirst] = useState(0);
+    const box = useRef(null);
+    // the box opens at today's week whenever the run itself is new (its days, not its identity: an app that rebuilds `weeks` on each render
+    // keeps the member's scroll), and never again for a rerender of the same run
+    const todayAt = weeks.findIndex((w) => w.days.some((d) => d.today));
+    const run = `${weeks.length}|${weeks[0]?.days[0]?.key}|${todayAt}`;
+    const landed = useRef(null);
+    // the label and the window both come from the rows' layout tops (offsetTop: the box is their offsetParent, and a sheet's transform does not
+    // scale them), read against scrollTop on each frame of a scroll: deterministic, no observer callback to wait for
+    useLayoutEffect(() => {
+        const el = box.current;
+        if (!el)
+            return;
+        const rows = () => [...el.querySelectorAll(':scope > .calendar__week')];
+        const top = (row) => row.offsetTop;
+        const lead = () => rows()[0]?.offsetTop ?? 0; // the head and the gap under it: where a row snaps to
+        const track = () => {
+            const under = el.scrollTop + lead();
+            const all = rows();
+            const at = all.findIndex((row) => top(row) + row.offsetHeight / 2 > under);
+            setFirst(at < 0 ? all.length - 1 : at);
+        };
+        const fit = () => {
+            const all = rows(), whole = Math.floor(show);
+            el.style.setProperty('--_weeks-lead', `${lead()}px`);
+            const cut = all[whole];
+            if (!cut)
+                el.style.removeProperty('--_weeks-h');
+            else
+                el.style.setProperty('--_weeks-h', `${top(cut) + (show - whole) * cut.offsetHeight}px`);
+            if (landed.current !== run) {
+                landed.current = run;
+                const today = all[todayAt];
+                if (today)
+                    el.scrollTo({ top: top(today) - lead(), behavior: 'instant' });
+            }
+            track();
+        };
+        let frame = 0;
+        const onScroll = () => { if (!frame)
+            frame = requestAnimationFrame(() => { frame = 0; track(); }); };
+        fit();
+        const watch = new ResizeObserver(fit);
+        watch.observe(el);
+        el.addEventListener('scroll', onScroll, { passive: true });
+        return () => { watch.disconnect(); el.removeEventListener('scroll', onScroll); cancelAnimationFrame(frame); };
+    }, [show, run, todayAt]);
+    const label = weeks[Math.min(first, weeks.length - 1)]?.label;
+    return (_jsxs("div", { ref: setRefs(box, ref), className: cx('calendar', 'calendar--weeks', className), ...rest, children: [_jsxs("div", { className: "calendar__weeks-head", children: [onLabelClick
+                        ? _jsx("button", { type: "button", className: "calendar__label", onClick: onLabelClick, children: label })
+                        : _jsx("span", { className: "calendar__label", children: label }), _jsx("div", { className: "calendar__grid", children: weekdays.map((d) => _jsx("span", { className: "calendar__wd", children: d }, d)) })] }), weeks.map((w, i) => (_jsx("div", { className: "calendar__grid calendar__week", children: w.days.map((d) => calendarDay({ key: d.key, num: d.num, mark: d.mark === 'soft', mark2: d.mark === 'strong', selected: d.key === day, today: d.today, disabled: d.disabled, onPick: () => pick(d.key) })) }, w.days[0]?.key ?? i)))] }));
+}

package/dist/choice/calendarDay.d.ts

@@ -0,0 +1,13 @@
+import { type CSSProperties, type ReactNode } from 'react';
+/** one `.calendar__day` cell: the button Calendar and CalendarWeeks both draw, so the cell and every `--calendar-day-*` knob are one */
+export declare function calendarDay({ key, num, mark, mark2, selected, today, disabled, style, onPick }: {
+    key: string | number;
+    num: ReactNode;
+    mark?: boolean;
+    mark2?: boolean;
+    selected?: boolean;
+    today?: boolean;
+    disabled?: boolean;
+    style?: CSSProperties;
+    onPick: () => void;
+}): import("react").JSX.Element;

package/dist/choice/calendarDay.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/** one `.calendar__day` cell: the button Calendar and CalendarWeeks both draw, so the cell and every `--calendar-day-*` knob are one */
+export function calendarDay({ key, num, mark, mark2, selected, today, disabled, style, onPick }) {
+    return (_jsx("button", { type: "button", className: cx('calendar__day', mark && 'calendar__day--mark', mark2 && 'calendar__day--mark2'), "aria-selected": selected ? 'true' : undefined, "aria-current": today ? 'date' : undefined, onClick: onPick, disabled: disabled, style: style, children: num }, key));
+}

package/dist/forms/Composer.d.ts

@@ -13,7 +13,7 @@ export interface ComposerProps extends Omit<ComponentProps<'textarea'>, 'classNa
     /** inline style for the wrapper, not the textarea */
     style?: React.CSSProperties;
 }
-/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). A second thing to write in the same Composer (the reason under the request) is a `ComposerArea` child: the same words, behind a dashed rule. The bar is drawn only when it holds a lead, a hint or a send. */
+/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). A second thing to write in the same Composer is a `ComposerArea` child: the same words, behind a dashed rule. Two framed write-ins (the ask sheet's request and its reason) are two `Field rows`, not a Composer with a `ComposerArea` (Lh 2026-10-19): the Composer is bare, the one big write-in. The bar is drawn only when it holds a lead, a hint or a send. */
 export declare function Composer({ hint, lead, send, children, className, style, ...textarea }: ComposerProps): import("react").JSX.Element;
 export interface ComposerAreaProps extends Omit<ComponentProps<'textarea'>, 'className' | 'children'> {
 }

package/dist/forms/Composer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 import { useStepCursor } from '../sheets/stepCursor.js';
-/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). A second thing to write in the same Composer (the reason under the request) is a `ComposerArea` child: the same words, behind a dashed rule. The bar is drawn only when it holds a lead, a hint or a send. */
+/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. On a sheet, never in a Card: the sheet is the paper the member fills in (Lh 2026-10-18). A second thing to write in the same Composer is a `ComposerArea` child: the same words, behind a dashed rule. Two framed write-ins (the ask sheet's request and its reason) are two `Field rows`, not a Composer with a `ComposerArea` (Lh 2026-10-19): the Composer is bare, the one big write-in. The bar is drawn only when it holds a lead, a hint or a send. */
 export function Composer({ hint, lead, send, children, className, style, ...textarea }) {
     const cursor = useStepCursor();
     return (_jsxs("div", { className: cx('composer', className), style: style, children: [_jsx("textarea", { className: "composer__input", ...textarea, ...cursor }), children, (lead != null || hint != null || send != null) && (_jsxs("div", { className: "composer__bar", children: [lead, hint != null && _jsx("span", { className: "composer__hint", children: hint }), send] }))] }));

package/dist/forms/Field.d.ts

@@ -24,6 +24,11 @@ export interface FieldProps extends Omit<ComponentProps<'input'>, 'className' |
      *  → 081-234-5678). Only digits are kept; a mark comes only once a digit follows it, so Backspace never sticks on a dash. The
      *  app's `onChange` reads the shaped value (the digits alone: `value.replace(/\D/g, '')`). Lh 2026-09-25 */
     mask?: string;
+    /** several lines tall (the request on the help-ask sheet, and under it its reason): the Field draws a `textarea` of this many
+     *  lines in the same frame. The placeholder is still the label; `error`, `required` and `icon` / `action` work as in one line.
+     *  `mask`, `format` and `digits` are for one line: with `rows` they are ignored (warns once). The change events come from a
+     *  `textarea` (`e.currentTarget.value` is the same). Lh 2026-10-19 */
+    rows?: number;
     /** classes for the field's label wrapper, not the input */
     className?: string;
     /** inline style for the label wrapper, not the input */
@@ -36,5 +41,8 @@ export declare function applyMask(v: string, mask: string): string;
  * It stands on a Sheet's `SheetBody`, in a `SheetStep`, or on a stack sheet, 1–3 per step; a card is for reading and pressing buttons
  * (`cardds check` rule `field-in-card` flags a Field, or any control the member fills or picks, inside a `<Card>`).
  * The LABEL IS THE PLACEHOLDER. 48px tall (56px with an action inside).
+ * Variation `rows={n}`: several lines in the same frame, for what the member writes in words (the request and its reason on the ask
+ * sheet: `<Field rows={4} />` over `<Field rows={2} />`). A frame says "tap me", so a framed write-in is a Field, never a Composer:
+ * the Composer is the one big write-in on the paper, bare (Lh 2026-10-19, timebank's ask sheet).
  */
-export declare function Field({ icon, action, label, error, format, digits, formatError, mask, className, style, onBlur, onInput, onChange, ...input }: FieldProps): import("react").JSX.Element;
+export declare function Field({ icon, action, label, error, format: formatProp, digits: digitsProp, formatError, mask: maskProp, rows, className, style, onBlur, onInput, onChange, ...input }: FieldProps): import("react").JSX.Element;

package/dist/forms/Field.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { watchSize } from '../state.js';
+import { warnOnce, watchSize } from '../state.js';
 import { formatOk, useCheck } from './check.js';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
@@ -24,8 +24,15 @@ export function applyMask(v, mask) {
  * It stands on a Sheet's `SheetBody`, in a `SheetStep`, or on a stack sheet, 1–3 per step; a card is for reading and pressing buttons
  * (`cardds check` rule `field-in-card` flags a Field, or any control the member fills or picks, inside a `<Card>`).
  * The LABEL IS THE PLACEHOLDER. 48px tall (56px with an action inside).
+ * Variation `rows={n}`: several lines in the same frame, for what the member writes in words (the request and its reason on the ask
+ * sheet: `<Field rows={4} />` over `<Field rows={2} />`). A frame says "tap me", so a framed write-in is a Field, never a Composer:
+ * the Composer is the one big write-in on the paper, bare (Lh 2026-10-19, timebank's ask sheet).
  */
-export function Field({ icon, action, label, error, format, digits, formatError, mask, className, style, onBlur, onInput, onChange, ...input }) {
+export function Field({ icon, action, label, error, format: formatProp, digits: digitsProp, formatError, mask: maskProp, rows, className, style, onBlur, onInput, onChange, ...input }) {
+    const lines = rows != null;
+    if (lines && (formatProp != null || digitsProp != null || maskProp != null))
+        warnOnce('field-rows-one-line', 'cardds Field: `mask`, `format` and `digits` are for one line — with `rows` they are ignored');
+    const [format, digits, mask] = lines ? [undefined, undefined, undefined] : [formatProp, digitsProp, maskProp];
     const ref = useRef(null);
     const [bad, setBad] = useState(false); // the format check failed, and has not been fixed since
     const wrong = (error != null && error !== false && error !== '') || bad;
@@ -44,8 +51,8 @@ export function Field({ icon, action, label, error, format, digits, formatError,
        and `--_ph-fit` (the share that fits, ≤ 1) scales the placeholder's size — again whenever the box or the font changes */
     useLayoutEffect(() => {
         const el = ref.current, text = input.placeholder;
-        if (!el)
-            return;
+        if (!el || lines)
+            return; // a textarea's placeholder wraps: it never needs to shrink
         if (!text) {
             el.style.removeProperty('--_ph-fit');
             return;
@@ -66,7 +73,7 @@ export function Field({ icon, action, label, error, format, digits, formatError,
         fit();
         document.fonts?.ready.then(fit);
         return watchSize([el], fit);
-    }, [input.placeholder]);
+    }, [input.placeholder, lines]);
     useEffect(() => {
         if (wrong) {
             ref.current?.focus();
@@ -74,23 +81,27 @@ export function Field({ icon, action, label, error, format, digits, formatError,
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- when the app's error comes or changes
     }, [error]);
-    return (_jsxs("label", { className: cx('field', action != null && 'field--action', wrong && 'field--error', className), style: style, children: [icon && _jsx(Icon, { name: icon, size: "sm" }), _jsx("input", { ref: ref, "aria-label": label, "aria-invalid": wrong || undefined, ...input, ...cursor, onBlur: (e) => { onBlur?.(e); if (!checked)
-                    return; const w = verdict(false); setBad(w != null); say(w); }, onChange: (e) => {
-                    if (mask) {
-                        const el = e.currentTarget, before = el.value.slice(0, el.selectionStart ?? el.value.length).replace(/\D/g, '').length;
-                        const shaped = applyMask(el.value, mask);
-                        if (shaped !== el.value) {
-                            el.value = shaped;
-                            let at = 0;
-                            for (let n = 0; at < shaped.length && n < before; at++)
-                                if (/\d/.test(shaped[at]))
-                                    n++; // the caret stays after the same digit
-                            el.setSelectionRange(at, at);
-                        }
-                    }
-                    onChange?.(e);
-                }, onInput: (e) => { onInput?.(e); if (bad && verdict(false) == null) {
-                    setBad(false);
-                    say(null);
-                } } }), action] }));
+    const onBlurField = (e) => { onBlur?.(e); if (!checked)
+        return; const w = verdict(false); setBad(w != null); say(w); };
+    const onInputField = (e) => { onInput?.(e); if (bad && verdict(false) == null) {
+        setBad(false);
+        say(null);
+    } };
+    const onChangeField = (e) => {
+        if (mask) {
+            const el = e.currentTarget, before = el.value.slice(0, el.selectionStart ?? el.value.length).replace(/\D/g, '').length;
+            const shaped = applyMask(el.value, mask);
+            if (shaped !== el.value) {
+                el.value = shaped;
+                let at = 0;
+                for (let n = 0; at < shaped.length && n < before; at++)
+                    if (/\d/.test(shaped[at]))
+                        n++; // the caret stays after the same digit
+                el.setSelectionRange(at, at);
+            }
+        }
+        onChange?.(e);
+    };
+    const shared = { ref, 'aria-label': label, 'aria-invalid': wrong || undefined, ...input, ...cursor, onBlur: onBlurField, onInput: onInputField, onChange: onChangeField };
+    return (_jsxs("label", { className: cx('field', lines && 'field--rows', action != null && 'field--action', wrong && 'field--error', className), style: style, children: [icon && _jsx(Icon, { name: icon, size: "sm" }), lines ? _jsx("textarea", { rows: rows, ...shared }) : _jsx("input", { ...shared }), action] }));
 }

package/dist/index.d.ts

@@ -57,6 +57,7 @@ export * from './forms/Composer.js';
 export * from './choice/Check.js';
 export * from './choice/DayStrip.js';
 export * from './choice/Calendar.js';
+export * from './choice/CalendarWeeks.js';
 export * from './choice/Mood.js';
 export * from './choice/Slider.js';
 export * from './numbers/Ring.js';

package/dist/index.js

@@ -61,6 +61,7 @@ export * from './forms/Composer.js';
 export * from './choice/Check.js';
 export * from './choice/DayStrip.js';
 export * from './choice/Calendar.js';
+export * from './choice/CalendarWeeks.js';
 export * from './choice/Mood.js';
 export * from './choice/Slider.js';
 export * from './numbers/Ring.js';

package/dist/journey/JourneyBadge.d.ts

@@ -10,6 +10,9 @@ export interface JourneyBadgeProps extends ComponentProps<'span'> {
     plain?: boolean;
     /** pinned to a CardMedia's corner (rating, price) */
     corner?: boolean;
+    /** a date in a card's head: as tall as the title block beside it, no taller — two lines beside a one-line title (day over number · month),
+     *  three beside a two-line title (day · number · month). Write it as the head's last child, after the title block */
+    stretch?: boolean;
 }
-/** JourneyBadge — a tiny label over a big value: gate, seat, date, rating. */
-export declare function JourneyBadge({ label, value, sub, plain, corner, className, ...rest }: JourneyBadgeProps): import("react").JSX.Element;
+/** JourneyBadge — a tiny label over a big value: gate, seat, date, rating. `stretch`: a date in a head that takes its form from the title's height. */
+export declare function JourneyBadge({ label, value, sub, plain, corner, stretch, className, ...rest }: JourneyBadgeProps): import("react").JSX.Element;

package/dist/journey/JourneyBadge.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** JourneyBadge — a tiny label over a big value: gate, seat, date, rating. */
-export function JourneyBadge({ label, value, sub, plain, corner, className, ...rest }) {
-    return (_jsxs("span", { className: cx('tile-badge', plain && 'tile-badge--plain', corner && 'tile-badge--corner', className), ...rest, children: [_jsx("span", { className: "tile-badge__label", children: label }), _jsx("span", { className: "tile-badge__value", children: value }), sub != null && _jsx("span", { className: "tile-badge__label", children: sub })] }));
+/** JourneyBadge — a tiny label over a big value: gate, seat, date, rating. `stretch`: a date in a head that takes its form from the title's height. */
+export function JourneyBadge({ label, value, sub, plain, corner, stretch, className, ...rest }) {
+    return (_jsxs("span", { className: cx('tile-badge', plain && 'tile-badge--plain', corner && 'tile-badge--corner', stretch && 'tile-badge--stretch', className), ...rest, children: [_jsx("span", { className: "tile-badge__label", children: label }), _jsx("span", { className: "tile-badge__value", children: value }), sub != null && _jsx("span", { className: "tile-badge__label", children: sub })] }));
 }

package/dist/media/MapArea.d.ts

@@ -7,9 +7,13 @@ export interface MapAreaProps extends ComponentProps<'div'> {
     hint?: ReactNode;
     /** the tile provider's credit, bottom right (OSM requires it) — a caption, never the engine's own control */
     credit?: ReactNode;
-    /** the accessible name of the ring (what the centre means) */
+    /** the shape of the centre mark. `ring` (default) is the rough area the member's neighbours may see; `pin` is an EXACT point, a clear pin
+     *  at the centre, for a meeting place (Lh 2026-10-19: a meeting position is a pin, never the ring) */
+    mark?: 'ring' | 'pin';
+    /** the accessible name of the centre mark, whatever its shape (what the centre means): the rough area for a ring, the meeting point for a pin */
     ringLabel?: string;
-    /** the ring element — the engine reads its position to know which point is the choice */
+    /** the centre mark's element, whatever its shape — the engine reads its position to know which point is the choice: a ring's CENTRE
+     *  (the middle of its box), a pin's TIP (the bottom-centre of its box) */
     ringRef?: Ref<HTMLSpanElement>;
     /** FIRST, the map engine's mount — ONE element, filled to the box (the app hands it to Leaflet or the like); after it, the
      *  places the member may pick (`MapPick`), over the map */
@@ -20,7 +24,9 @@ export interface MapAreaProps extends ComponentProps<'div'> {
  * offline) the box shows the wireframe street pattern, never a hole. Two places: behind a stage sheet (the default), or
  * `inline`, in flow inside a card or a sheet's body — as a SheetBody's only child it fills the body, so the open sheet
  * becomes the map while its head stays. The ring marks the rough area: behind a stage it is centred in the band a half
- * sheet leaves open, inline at the centre of its own box. Dragging the map underneath is that choice, never a pin;
+ * sheet leaves open, inline at the centre of its own box. Dragging the map underneath is that choice, never a pin to place;
  * `ringRef` is how the engine learns where that is. Places to pick go after the mount, as `MapPick`s.
+ * Variation `mark="pin"`: for a meeting place the centre is an exact point, so a clear pin stands there instead of the ring,
+ * its tip on the point the ring's centre would be (the engine reads the pin's bottom-centre). The ring stays for a rough area.
  */
-export declare function MapArea({ inline, hint, credit, ringLabel, ringRef, className, children, ...rest }: MapAreaProps): import("react").JSX.Element;
+export declare function MapArea({ inline, hint, credit, mark, ringLabel, ringRef, className, children, ...rest }: MapAreaProps): import("react").JSX.Element;

package/dist/media/MapArea.js

@@ -1,13 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /**
  * MapArea — the box a map engine draws in: the first child is the engine's mount and fills it; before tiles arrive (or
  * offline) the box shows the wireframe street pattern, never a hole. Two places: behind a stage sheet (the default), or
  * `inline`, in flow inside a card or a sheet's body — as a SheetBody's only child it fills the body, so the open sheet
  * becomes the map while its head stays. The ring marks the rough area: behind a stage it is centred in the band a half
- * sheet leaves open, inline at the centre of its own box. Dragging the map underneath is that choice, never a pin;
+ * sheet leaves open, inline at the centre of its own box. Dragging the map underneath is that choice, never a pin to place;
  * `ringRef` is how the engine learns where that is. Places to pick go after the mount, as `MapPick`s.
+ * Variation `mark="pin"`: for a meeting place the centre is an exact point, so a clear pin stands there instead of the ring,
+ * its tip on the point the ring's centre would be (the engine reads the pin's bottom-centre). The ring stays for a rough area.
  */
-export function MapArea({ inline, hint, credit, ringLabel = 'ย่านของคุณโดยประมาณ', ringRef, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('map', inline && 'map--inline', className), ...rest, children: [children, _jsx("span", { ref: ringRef, className: "map__ring", role: "img", "aria-label": ringLabel }), hint != null && _jsx("span", { className: "map__hint", children: hint }), credit != null && _jsx("span", { className: "map__credit", children: credit })] }));
+export function MapArea({ inline, hint, credit, mark = 'ring', ringLabel = mark === 'pin' ? 'จุดนัด' : 'ย่านของคุณโดยประมาณ', ringRef, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('map', inline && 'map--inline', className), ...rest, children: [children, mark === 'pin'
+                ? _jsx("span", { ref: ringRef, className: "map__pin", role: "img", "aria-label": ringLabel, children: _jsx(Icon, { name: "map-pin" }) })
+                : _jsx("span", { ref: ringRef, className: "map__ring", role: "img", "aria-label": ringLabel }), hint != null && _jsx("span", { className: "map__hint", children: hint }), credit != null && _jsx("span", { className: "map__credit", children: credit })] }));
 }

package/dist/media/Postcard.d.ts

@@ -31,7 +31,7 @@ export interface PostcardProps extends ComponentProps<'div'> {
 }
 /**
  * Postcard — a member's introduction, the shape of a cover card: the photo fills it (or the wireframe box), the band at the
- * bottom holds the name, its line and the heart, and turns WITH the face; a tap on the photo turns it over (`--motion-flip`) to the back: the name a fifth down the paper, its line and the caption after it — or, for a voice note, `voice` (the play control) at the middle; the app plays it.
+ * bottom holds the name, its line and the heart, and turns WITH the face; a tap on the photo turns it over (the shared flip mechanic, `.flip`, at `--motion-flip`) to the back: the name a fifth down the paper, its line and the caption after it — or, for a voice note, `voice` (the play control) at the middle; the app plays it.
  * Which side shows is a state: `flipped` + `onFlip`, or `defaultFlipped`. The heart is the member's own like: `liked` + `onLike`.
  * Who else liked it, a voice note, a reply go OUTSIDE it — a Row under it (`Row more` expands the list).
  */

package/dist/media/Postcard.js

@@ -4,7 +4,7 @@ import { cx } from '../cx.js';
 import { IconBtn } from '../actions/IconBtn.js';
 /**
  * Postcard — a member's introduction, the shape of a cover card: the photo fills it (or the wireframe box), the band at the
- * bottom holds the name, its line and the heart, and turns WITH the face; a tap on the photo turns it over (`--motion-flip`) to the back: the name a fifth down the paper, its line and the caption after it — or, for a voice note, `voice` (the play control) at the middle; the app plays it.
+ * bottom holds the name, its line and the heart, and turns WITH the face; a tap on the photo turns it over (the shared flip mechanic, `.flip`, at `--motion-flip`) to the back: the name a fifth down the paper, its line and the caption after it — or, for a voice note, `voice` (the play control) at the middle; the app plays it.
  * Which side shows is a state: `flipped` + `onFlip`, or `defaultFlipped`. The heart is the member's own like: `liked` + `onLike`.
  * Who else liked it, a voice note, a reply go OUTSIDE it — a Row under it (`Row more` expands the list).
  */
@@ -12,5 +12,5 @@ export function Postcard({ photo, alt = '', name, line, caption, voice, flipped,
     const [back, flip] = useControlled(flipped, defaultFlipped, onFlip);
     const turn = () => flip(!back);
     const words = (_jsxs("div", { className: "postcard__words", children: [_jsx("span", { className: "t-h1", children: name }), line != null && _jsx("span", { className: "t-body", children: line })] }));
-    return (_jsxs("div", { className: cx('postcard', back && 'is-flipped', className), ...rest, children: [_jsxs("div", { className: "postcard__face postcard__front", children: [_jsx("button", { className: "postcard__turn", type: "button", "aria-label": frontLabel, onClick: turn, children: photo ? _jsx("img", { src: photo, alt: alt }) : alt ? _jsx("div", { className: "ph", role: "img", "aria-label": alt }) : _jsx("div", { className: "ph" }) }), _jsxs("div", { className: "postcard__band", children: [words, (liked !== undefined || onLike) && _jsx(IconBtn, { invert: true, icon: "heart", label: likeLabel, "aria-pressed": !!liked, onClick: () => onLike?.(!liked) })] })] }), _jsxs("div", { className: "postcard__face postcard__back", children: [_jsxs("button", { className: "postcard__turn", type: "button", "aria-label": backLabel, onClick: turn, children: [words, caption != null && _jsx("p", { className: "postcard__caption", children: caption })] }), voice != null && _jsx("div", { className: "postcard__voice", children: voice })] })] }));
+    return (_jsxs("div", { className: cx('postcard flip', back && 'is-flipped', className), ...rest, children: [_jsxs("div", { className: "postcard__face flip__face flip__face--front postcard__front", children: [_jsx("button", { className: "postcard__turn", type: "button", "aria-label": frontLabel, onClick: turn, children: photo ? _jsx("img", { src: photo, alt: alt }) : alt ? _jsx("div", { className: "ph", role: "img", "aria-label": alt }) : _jsx("div", { className: "ph" }) }), _jsxs("div", { className: "postcard__band", children: [words, (liked !== undefined || onLike) && _jsx(IconBtn, { invert: true, icon: "heart", label: likeLabel, "aria-pressed": !!liked, onClick: () => onLike?.(!liked) })] })] }), _jsxs("div", { className: "postcard__face flip__face flip__face--back postcard__back", children: [_jsxs("button", { className: "postcard__turn", type: "button", "aria-label": backLabel, onClick: turn, children: [words, caption != null && _jsx("p", { className: "postcard__caption", children: caption })] }), voice != null && _jsx("div", { className: "postcard__voice", children: voice })] })] }));
 }

package/dist/post/PostDesk.d.ts

@@ -53,7 +53,8 @@ export interface PostDeskProps extends ComponentProps<'div'> {
 }
 /**
  * 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 message on ruled lines (typing stops when the half is full — the paper is the limit: an addition that would not fit is refused
+ * where it was typed, the caret stays, the app's `onMessageChange` never hears it and `onFull` is called; the same rule as a `StickyField` on a `Sticky`), 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`).

package/dist/post/PostDesk.js

@@ -2,6 +2,7 @@ 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 { holdRoom } from '../room.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
@@ -20,7 +21,8 @@ function linesOf(ta) {
 }
 /**
  * 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 message on ruled lines (typing stops when the half is full — the paper is the limit: an addition that would not fit is refused
+ * where it was typed, the caret stays, the app's `onMessageChange` never hears it and `onFull` is called; the same rule as a `StickyField` on a `Sticky`), 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`).
@@ -46,10 +48,15 @@ export function PostDesk({ half, defaultHalf = 'message', onHalfChange, message,
         told.current = `${left}/${fits}`;
         lines.current?.(left, fits);
     };
-    useLayoutEffect(measure, [text]);
+    const full = useLatest(onFull);
+    const room = useRef(null);
+    useLayoutEffect(() => { measure(); room.current?.sync(); }, [text]);
     useEffect(() => {
+        const ta = paper.current;
+        room.current = holdRoom(ta.parentElement, () => paper.current, () => ta.scrollHeight > ta.clientHeight + 1, (refused) => refused && full.current?.());
         document.fonts?.ready.then(measure);
-        return watchSize([paper.current], measure);
+        const stop = watchSize([ta], measure);
+        return () => { room.current?.stop(); room.current = null; stop(); };
     }, []);
     useEffect(() => {
         if (at !== 'struck')
@@ -57,15 +64,6 @@ export function PostDesk({ half, defaultHalf = 'message', onHalfChange, message,
         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;
@@ -73,7 +71,7 @@ export function PostDesk({ half, defaultHalf = 'message', onHalfChange, message,
         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))) }))] }));
+    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: (e) => askText(e.currentTarget.value) }) }), _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 }) {

package/dist/room.d.ts

@@ -0,0 +1,12 @@
+/** A field that stops at its paper's room. An input that adds to the field's words while `over()` says they no longer fit is refused:
+ *  the words go back to what they were, the caret stays where it was, and the app's `onChange` never hears it. Taking words away is
+ *  never refused. `after(refused)` runs after every input on the paper, refused or not, so the holder can measure again.
+ *  The listeners sit on `paper`, an element round the field: a native listener there runs before React's own at the root, so stopping
+ *  the event keeps `onChange` from hearing it. A composition (Thai, Japanese) has reached the app already when it ends, so its words
+ *  are put back through the prototype's setter and an input is sent, which tells the app they went back.
+ *  Call `sync()` after the app sets the field's value itself (a cleared field after send); `stop()` takes the listeners off. */
+export interface Room {
+    sync(): void;
+    stop(): void;
+}
+export declare function holdRoom(paper: HTMLElement, fieldOf: () => HTMLTextAreaElement | null, over: () => boolean, after?: (refused: boolean) => void): Room;

package/dist/room.js

@@ -0,0 +1,38 @@
+export function holdRoom(paper, fieldOf, over, after = () => { }) {
+    let last = fieldOf()?.value ?? '', composing = false;
+    const refuse = (field, dropped) => {
+        const added = field.value.length - last.length, at = field.selectionStart - added;
+        if (dropped)
+            Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value').set.call(field, last);
+        else
+            field.value = last; // the prototype's setter, so React's value tracker sees the change and the input dispatched next reaches onChange
+        field.setSelectionRange(Math.max(0, at), Math.max(0, at));
+        if (dropped)
+            field.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    const check = (e, dropped) => {
+        const field = fieldOf();
+        if (!field || e.target !== field)
+            return after(false);
+        const refused = field.value.length >= last.length && over();
+        if (refused) {
+            if (!dropped)
+                e.stopPropagation();
+            refuse(field, dropped);
+        }
+        else
+            last = field.value;
+        after(refused);
+    };
+    const onInput = (e) => (e.isComposing ? after(false) : check(e, false));
+    const onComposing = () => { composing = true; };
+    const onComposed = (e) => { composing = false; check(e, true); };
+    paper.addEventListener('input', onInput);
+    paper.addEventListener('compositionstart', onComposing);
+    paper.addEventListener('compositionend', onComposed);
+    return {
+        sync() { const field = fieldOf(); if (field && !composing)
+            last = field.value; },
+        stop() { paper.removeEventListener('input', onInput); paper.removeEventListener('compositionstart', onComposing); paper.removeEventListener('compositionend', onComposed); },
+    };
+}