@usableapp/cardds 0.7.93 → 0.7.94

package/dist/choice/DayStrip.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react';
 export interface DayStripProps extends ComponentProps<'div'> {
 }
-/** DayStrip — a week of Days, one selected. */
+/** DayStrip — a week of Days, one selected, today marked. */
 export declare function DayStrip({ className, ...rest }: DayStripProps): import("react").JSX.Element;
 export interface DayProps extends Omit<ComponentProps<'button'>, 'name'> {
     /** weekday name (Thu) */
@@ -12,6 +12,8 @@ export interface DayProps extends Omit<ComponentProps<'button'>, 'name'> {
     selected?: boolean;
     /** a mark under the number (something is on) */
     dot?: boolean;
+    /** this day is today (aria-current="date"; the app says which): a light tone, quieter than the selected pill, which wins when it is both */
+    today?: boolean;
 }
-/** Day — one day in a DayStrip: name · number · optional dot; the selected one is a filled pill. */
-export declare function Day({ name, num, selected, dot, className, ...rest }: DayProps): import("react").JSX.Element;
+/** Day — one day in a DayStrip: name · number · optional dot; the selected one is a filled pill, today a light tone (--day-today-bg / --day-today-ink). */
+export declare function Day({ name, num, selected, dot, today, className, ...rest }: DayProps): import("react").JSX.Element;

package/dist/choice/DayStrip.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** DayStrip — a week of Days, one selected. */
+/** DayStrip — a week of Days, one selected, today marked. */
 export function DayStrip({ className, ...rest }) {
     return _jsx("div", { className: cx('day-strip', className), role: "tablist", ...rest });
 }
-/** Day — one day in a DayStrip: name · number · optional dot; the selected one is a filled pill. */
-export function Day({ name, num, selected, dot, className, ...rest }) {
-    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": selected ? 'true' : undefined, className: cx('day', className), ...rest, children: [_jsx("span", { className: "day__name", children: name }), _jsx("span", { className: "day__num", children: num }), dot && _jsx("span", { className: "day__dot" })] }));
+/** Day — one day in a DayStrip: name · number · optional dot; the selected one is a filled pill, today a light tone (--day-today-bg / --day-today-ink). */
+export function Day({ name, num, selected, dot, today, className, ...rest }) {
+    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": selected ? 'true' : undefined, "aria-current": today ? 'date' : undefined, className: cx('day', today && 'day--today', className), ...rest, children: [_jsx("span", { className: "day__name", children: name }), _jsx("span", { className: "day__num", children: num }), dot && _jsx("span", { className: "day__dot" })] }));
 }

package/dist/forms/Composer.d.ts

@@ -1,15 +1,21 @@
 import type { ComponentProps, ReactNode } from 'react';
-export interface ComposerProps extends Omit<ComponentProps<'textarea'>, 'className' | 'style'> {
+export interface ComposerProps extends Omit<ComponentProps<'textarea'>, 'className' | 'style' | 'children'> {
     /** the caption between the two buttons ("Your request is born") */
     hint?: ReactNode;
     /** the left button of the bar (an IconBtn — voice) */
     lead?: ReactNode;
     /** the right button of the bar (an `IconBtn invert` — send) */
     send?: ReactNode;
+    /** more writing areas under the first, each a `ComposerArea` (the reason under the request), above the bar */
+    children?: ReactNode;
     /** classes for the composer's wrapper, not the textarea */
     className?: string;
     /** 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. */
-export declare function Composer({ hint, lead, send, className, style, ...textarea }: ComposerProps): import("react").JSX.Element;
+/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. A second thing to write in the same card (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. */
+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'> {
+}
+/** ComposerArea — a further writing area inside a Composer (an optional reason or need under the request): the Composer's own type and look, shorter, with a dashed rule above it that the area draws itself. Controlled like any textarea (value + onChange); give it its own aria-label. */
+export declare function ComposerArea(props: ComposerAreaProps): import("react").JSX.Element;

package/dist/forms/Composer.js

@@ -1,8 +1,13 @@
 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. */
-export function Composer({ hint, lead, send, className, style, ...textarea }) {
+/** Composer — a big write-in area (display type) with a bottom bar: icon · hint · send. The write-in step's sheet content. A second thing to write in the same card (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. */
+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 }), _jsxs("div", { className: "composer__bar", children: [lead, hint != null && _jsx("span", { className: "composer__hint", children: hint }), send] })] }));
+    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] }))] }));
+}
+/** ComposerArea — a further writing area inside a Composer (an optional reason or need under the request): the Composer's own type and look, shorter, with a dashed rule above it that the area draws itself. Controlled like any textarea (value + onChange); give it its own aria-label. */
+export function ComposerArea(props) {
+    const cursor = useStepCursor();
+    return _jsx("textarea", { className: "composer__input composer__area", ...props, ...cursor });
 }

package/dist/index.d.ts

@@ -94,6 +94,7 @@ export * from './post/PostBox.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';
 export * from './media/MapArea.js';
+export * from './media/MapPick.js';
 export * from './media/Tile.js';
 export * from './media/Mosaic.js';
 export * from './layover/Banner.js';

package/dist/index.js

@@ -98,6 +98,7 @@ export * from './post/PostBox.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';
 export * from './media/MapArea.js';
+export * from './media/MapPick.js';
 export * from './media/Tile.js';
 export * from './media/Mosaic.js';
 export * from './layover/Banner.js';

package/dist/media/MapArea.d.ts

@@ -1,5 +1,8 @@
 import type { ComponentProps, ReactNode, Ref } from 'react';
 export interface MapAreaProps extends ComponentProps<'div'> {
+    /** IN FLOW instead of behind a stage: the map is a box in a card or a sheet's body, the ring and the hint in its own box.
+     *  The only thing in a SheetBody, it fills the body: the sheet's head stays on top, its foot under it */
+    inline?: boolean;
     /** the words over the map, under the bar's line */
     hint?: ReactNode;
     /** the tile provider's credit, bottom right (OSM requires it) — a caption, never the engine's own control */
@@ -8,13 +11,16 @@ export interface MapAreaProps extends ComponentProps<'div'> {
     ringLabel?: string;
     /** the ring element — the engine reads its position to know which point is the choice */
     ringRef?: Ref<HTMLSpanElement>;
-    /** the map engine's mount — ONE element, filled to the box (the app hands it to Leaflet or the like) */
+    /** 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 */
     children?: ReactNode;
 }
 /**
- * MapArea — the box a map engine draws in, behind a stage sheet: the child is the engine's mount and fills it;
- * before tiles arrive (or offline) the box shows the wireframe street pattern, never a hole. The ring marks the
- * rough area being chosen and stays where the CSS puts it (centred in the band a half sheet leaves open) —
- * dragging the map underneath is the choice, never a pin; `ringRef` is how the engine learns where that is.
+ * 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;
+ * `ringRef` is how the engine learns where that is. Places to pick go after the mount, as `MapPick`s.
  */
-export declare function MapArea({ hint, credit, ringLabel, ringRef, className, children, ...rest }: MapAreaProps): import("react").JSX.Element;
+export declare function MapArea({ inline, hint, credit, ringLabel, ringRef, className, children, ...rest }: MapAreaProps): import("react").JSX.Element;

package/dist/media/MapArea.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /**
- * MapArea — the box a map engine draws in, behind a stage sheet: the child is the engine's mount and fills it;
- * before tiles arrive (or offline) the box shows the wireframe street pattern, never a hole. The ring marks the
- * rough area being chosen and stays where the CSS puts it (centred in the band a half sheet leaves open) —
- * dragging the map underneath is the choice, never a pin; `ringRef` is how the engine learns where that is.
+ * 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;
+ * `ringRef` is how the engine learns where that is. Places to pick go after the mount, as `MapPick`s.
  */
-export function MapArea({ hint, credit, ringLabel = 'ย่านของคุณโดยประมาณ', ringRef, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('map', 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, 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 })] }));
 }

package/dist/media/MapPick.d.ts

@@ -0,0 +1,32 @@
+import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react';
+import { type IconName } from '../type/Icon.js';
+export interface MapPickProps extends Omit<ComponentProps<'label'>, 'onChange'> {
+    /** the place's short name, under its mark (a library, a village hall): the radio's accessible name */
+    children: ReactNode;
+    /** the icon inside the mark (store, house…); without one the mark is a plain round point */
+    icon?: IconName;
+    /** the place's point, from the top of the map's box (a CSS length / percentage): the mark's centre stands on it */
+    top: string;
+    /** the place's point, from the left of the map's box (a CSS length / percentage) */
+    left: string;
+    /** the input's name: the marks of one choice share it (that is what makes them one group) */
+    name?: string;
+    /** what the input reports when this place is picked */
+    value?: string;
+    /** CONTROLLED: this place is the one picked. The app owns it — pair it with `onChange` */
+    checked?: boolean;
+    /** UNCONTROLLED: picked on arrival; the input then keeps its own */
+    defaultChecked?: boolean;
+    /** the native radio's change event: the member picked this place */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** this place cannot be picked now */
+    disabled?: boolean;
+}
+/**
+ * MapPick — a place on a map the member taps to choose it: a small round mark with its short name under it, standing on
+ * its point (`top` / `left` in the map's box, as a Callout). Drawn small, so five fit on a phone's map; the tap is the
+ * full `--tap` square round the point, and the name takes a tap too. The marks of one choice share a `name` and are one
+ * radio group (arrow keys move between them); the picked one fills with accent. It knows nothing of the map or the sheet:
+ * it goes in a `MapArea` after the engine's mount, and the app owns which place is picked.
+ */
+export declare function MapPick({ children, icon, top, left, name, value, checked, defaultChecked, onChange, disabled, className, style, ...rest }: MapPickProps): import("react").JSX.Element;

package/dist/media/MapPick.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
+/**
+ * MapPick — a place on a map the member taps to choose it: a small round mark with its short name under it, standing on
+ * its point (`top` / `left` in the map's box, as a Callout). Drawn small, so five fit on a phone's map; the tap is the
+ * full `--tap` square round the point, and the name takes a tap too. The marks of one choice share a `name` and are one
+ * radio group (arrow keys move between them); the picked one fills with accent. It knows nothing of the map or the sheet:
+ * it goes in a `MapArea` after the engine's mount, and the app owns which place is picked.
+ */
+export function MapPick({ children, icon, top, left, name, value, checked, defaultChecked, onChange, disabled, className, style, ...rest }) {
+    return (_jsxs("label", { className: cx('map-pick', className), style: { top, left, ...style }, ...rest, children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled }), _jsx("span", { className: "map-pick__mark", children: icon && _jsx(Icon, { name: icon, size: "xs" }) }), _jsx("span", { className: "map-pick__name", children: children })] }));
+}

package/dist/scaffold/ActionBar.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 export interface ActionBarProps extends ComponentProps<'div'> {
-    /** `pager`: previous / next as two equal buttons at the edges (a Link may sit between them) · `tiers`: rows stacked — a control tier above the buttons */
+    /** `pager`: previous / next as two equal buttons at the edges — two round IconBtns, or two Btns that name the step they lead to, each at its own size (a Link may sit between them) · `tiers`: rows stacked — a control tier above the buttons */
     variant?: 'pager' | 'tiers';
     /** a bare bar for a preview: no position, full width, no side padding (a real bar is a Screen's `bottom`) */
     inline?: boolean;
@@ -9,13 +9,17 @@ export interface ActionBarProps extends ComponentProps<'div'> {
  * ActionBar — the screen's ONE move: the Screen's `bottom` (`<Screen fill bottom={<ActionBar…>}>`), the last part of its flex
  * column, as tall as its rows. Never after `</Screen>`, never positioned by hand.
  * Plain: one wide primary Btn (the step that commits).
- * `pager`: the pager bar — Back + Next as peers, buttons only. The `Pager` (the dots that say where the walk is) is a different thing: it may be the bar's first row (a Walkthrough).
+ * `pager`: the pager bar — Back + Next as peers, buttons only: two round `IconBtn`s (`arrow-left` · `invert arrow-right`) at the
+ * edges, or two `Btn`s that SAY the step each leads to, the arrow at the round pager's size (`<Btn><Icon name="arrow-left" /> คำขอ</Btn>` ·
+ * `<Btn primary>วันเวลา <Icon name="arrow-right" /></Btn>`): each hugs its edge at its own size, open ground between — left and
+ * right, never two halves (Lh 2026-10-17). A Link between stays in the middle.
+ * A word that commits ("Done") is not a pager button: that step is the plain bar's one wide Btn. The `Pager` (the dots that say where the walk is) is a different thing: it may be the bar's first row (a Walkthrough).
  * `tiers`: an ActionBarTier with a control (a Slider) above the button tier.
  * In a `Screen fill` it is a layer over the content's foot; on a scrolling Screen a sticky last row.
  */
 export declare function ActionBar({ variant, inline, className, style, ...rest }: ActionBarProps): import("react").JSX.Element;
 export interface ActionBarTierProps extends ComponentProps<'div'> {
-    /** the tier that holds the round pager bar (two IconBtns at the edges) */
+    /** the tier that holds the pager (two IconBtns at the edges, or two worded Btns, each at its edge at its own size) */
     pager?: boolean;
 }
 /** ActionBarTier — one row inside an `ActionBar variant="tiers"`: a control row, or the pager row. */

package/dist/scaffold/ActionBar.js

@@ -4,7 +4,11 @@ import { cx } from '../cx.js';
  * ActionBar — the screen's ONE move: the Screen's `bottom` (`<Screen fill bottom={<ActionBar…>}>`), the last part of its flex
  * column, as tall as its rows. Never after `</Screen>`, never positioned by hand.
  * Plain: one wide primary Btn (the step that commits).
- * `pager`: the pager bar — Back + Next as peers, buttons only. The `Pager` (the dots that say where the walk is) is a different thing: it may be the bar's first row (a Walkthrough).
+ * `pager`: the pager bar — Back + Next as peers, buttons only: two round `IconBtn`s (`arrow-left` · `invert arrow-right`) at the
+ * edges, or two `Btn`s that SAY the step each leads to, the arrow at the round pager's size (`<Btn><Icon name="arrow-left" /> คำขอ</Btn>` ·
+ * `<Btn primary>วันเวลา <Icon name="arrow-right" /></Btn>`): each hugs its edge at its own size, open ground between — left and
+ * right, never two halves (Lh 2026-10-17). A Link between stays in the middle.
+ * A word that commits ("Done") is not a pager button: that step is the plain bar's one wide Btn. The `Pager` (the dots that say where the walk is) is a different thing: it may be the bar's first row (a Walkthrough).
  * `tiers`: an ActionBarTier with a control (a Slider) above the button tier.
  * In a `Screen fill` it is a layer over the content's foot; on a scrolling Screen a sticky last row.
  */

package/lint/eslint.mjs

@@ -18,7 +18,7 @@ const rule = (level, description) => ({
     };
   },
 });
-const check = rule('error', 'cardds used through its components: no hand-written cardds class, no native <select>; the bar is the Screen\'s bottom');
+const check = rule('error', 'cardds used through its components: no hand-written cardds class, no native <select>; the bar is the Screen\'s bottom; a card never wraps a card');
 const advice = rule('warn', 'cardds behaviour kept: a Sheet that can move and slides out; no bar in front of a sheet; the cursor, the control names and the look are cardds\'s and the theme\'s, not the element\'s');
 
 const plugin = { meta: { name: '@usableapp/cardds/eslint' }, rules: { check, advice } };

package/lint/rules.mjs

@@ -216,5 +216,16 @@ export function checkSource(source, file, { classes = carddsClasses() } = {}) {
       add('row-label-button', 'warn', m.index, '<Row as="label"> holding a button and no htmlFor: a label presses the first control inside it, so a touch on the row\'s words presses that button, not its Check. Give the Check an id and the row htmlFor={id}.');
   }
 
+  // 9 · a card never wraps a card (Lh 2026-10-17): a CardList, a CardFeed and a row card stand on the base or in a sheet's body, each card its own boundary.
+  //     `Card sm` inside a card is left alone: its own doc still names that place (not ruled yet)
+  for (const m of text.matchAll(/<Card\b(?![\w.])/g)) {
+    const el = elementAt(text, m.index);
+    const inner = el.slice(tagAt(text, m.index).length);
+    for (const c of inner.matchAll(/<(Card|CardList|CardFeed|FeedCard)\b(?![\w.])/g)) {
+      if (c[1] === 'Card' && /\ssm\b(?!\s*=\s*\{\s*false)/.test(tagAt(inner, c.index))) continue;
+      add('card-in-card', 'error', m.index + tagAt(text, m.index).length + c.index, `<${c[1]}> inside a <Card>: a card never wraps a card — stand the ${c[1] === 'Card' ? 'card' : c[1]} on the base or in a sheet's body, without a card round it. Rows inside a card are <Rows>/<Row>, which draw no boundary.`);
+    }
+  }
+
   return findings.sort((a, b) => a.line - b.line);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.93",
+  "version": "0.7.94",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",