@usableapp/cardds 0.7.105 → 0.7.106

package/dist/lists/Row.d.ts

@@ -1,29 +1,13 @@
 import { type ComponentProps, type ReactNode } from 'react';
 import { type IconName } from '../type/Icon.js';
 export interface RowProps extends Omit<ComponentProps<'div'>, 'title'> {
-    /** the leading visual: an Avatar, an AvatarStack, an Icon */
-    lead?: ReactNode;
-    /** an icon in the outlined 48px lead box (menu rows) */
-    leadIcon?: IconName;
-    /** the title line */
-    title?: ReactNode;
-    /** the caption under it (may hold a Dot) */
-    meta?: ReactNode;
-    /** custom body content instead of (or under) title/meta — a Wave for a voice note */
-    body?: ReactNode;
-    /** the trailing control: an IconBtn, a Chip, a Check, a Toggle, a caption */
-    end?: ReactNode;
-    /** a trailing value, right-aligned (title type) */
-    endValue?: ReactNode;
-    /** the muted caption under `endValue` */
-    endCaption?: ReactNode;
     /** menu row: more air, a bigger title */
     lg?: boolean;
-    /** a finished checklist item: muted words, a filled tick at the end, no longer a tap target (aria-disabled) — pass no `end` */
+    /** a finished checklist item: muted words, a filled tick at the end, no longer a tap target (aria-disabled) — give it no control at the end */
     done?: boolean;
     /** div (default), a link, a label wrapping a Check/Toggle, li */
     as?: 'div' | 'a' | 'label' | 'li';
-    /** with `as="label"`: the `id` of the control the row presses (its `Check`). Needed when the `end` holds a button BEFORE the check (a picked row's own move, "open the map"): a label presses the first control inside it, so without this a touch on the row's words would press that button */
+    /** with `as="label"`: the `id` of the control the row presses (its `Check`). Needed when a button stands BEFORE the check (a picked row's own move, "open the map"): a label presses the first control inside it, so without this a touch on the row's words would press that button */
     htmlFor?: string;
     /** makes the row a link (an `a`); not with `more`, whose row is a summary */
     href?: string;
@@ -37,13 +21,40 @@ export interface RowProps extends Omit<ComponentProps<'div'>, 'title'> {
     onOpenChange?: (open: boolean) => void;
 }
 /**
- * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
+ * Row — a frameless row inside a card: lead · body · end, its children in that order. 48px+ tall, a tap target.
+ * The lead is a `RowLead` box, or a bare Avatar / AvatarStack; the words are a `RowBody`; the end is a `RowEnd` (a value and its caption)
+ * or a bare control (two side by side).
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
  * `done` is the checklist's finished line: ticked, muted, not tappable any more.
  * `more` makes it expand: the row is the summary of a `<details class="row-expand">`, `more` comes out under it; `open` + `onOpenChange`, or `defaultOpen`.
- * An `end` chevron turns when it is open — the app fetches whatever `more` lists; the row only shows it.
+ * A chevron at the end turns when it is open — the app fetches whatever `more` lists; the row only shows it.
  */
-export declare function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }: RowProps): import("react").JSX.Element;
+export declare function Row({ lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }: RowProps): import("react").JSX.Element;
+export interface RowLeadProps extends ComponentProps<'span'> {
+    /** an icon drawn in the box; without it, the box holds its children */
+    icon?: IconName;
+}
+/** RowLead — a Row's lead: the outlined 48px box of a menu row, holding an `icon` or its children.
+ *  A person's or a group's lead takes no box: an Avatar or an AvatarStack goes straight in the Row as its first child. */
+export declare function RowLead({ icon, className, children, ...rest }: RowLeadProps): import("react").JSX.Element;
+export interface RowBodyProps extends Omit<ComponentProps<'div'>, 'title'> {
+    /** the title line */
+    title?: ReactNode;
+    /** the caption under it (may hold a Dot) */
+    meta?: ReactNode;
+}
+/** RowBody — a Row's words, filling the room between lead and end: a `title` over a `meta` caption;
+ *  its children come under them, or instead of them (a Wave for a voice note). */
+export declare function RowBody({ title, meta, className, children, ...rest }: RowBodyProps): import("react").JSX.Element;
+export interface RowEndProps extends ComponentProps<'span'> {
+    /** the trailing value, right-aligned (title type) */
+    value?: ReactNode;
+    /** the muted caption under `value` */
+    caption?: ReactNode;
+}
+/** RowEnd — a Row's trailing value: a `value` over its muted `caption`, right-aligned (+1.0 h over Tue); or its children.
+ *  A control at the end (an IconBtn, a Chip, a Check) takes no RowEnd: it goes straight in the Row after the RowBody. */
+export declare function RowEnd({ value, caption, className, children, ...rest }: RowEndProps): import("react").JSX.Element;
 export interface RowsProps extends ComponentProps<'div'> {
     /** the group's name, above its rows (Today · Tomorrow · Later): a long list is GROUPED, not spaced out — several Rows one after another.
      *  Words = the small label; an ELEMENT (`<Text level="title" as="h3">`) is used as the heading itself — the group is labelled by it. */

package/dist/lists/Row.js

@@ -4,20 +4,37 @@ import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 import { glide, reducedMotion, setRefs, stopMoves, useDisclosure } from '../state.js';
 /**
- * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
+ * Row — a frameless row inside a card: lead · body · end, its children in that order. 48px+ tall, a tap target.
+ * The lead is a `RowLead` box, or a bare Avatar / AvatarStack; the words are a `RowBody`; the end is a `RowEnd` (a value and its caption)
+ * or a bare control (two side by side).
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
  * `done` is the checklist's finished line: ticked, muted, not tappable any more.
  * `more` makes it expand: the row is the summary of a `<details class="row-expand">`, `more` comes out under it; `open` + `onOpenChange`, or `defaultOpen`.
- * An `end` chevron turns when it is open — the app fetches whatever `more` lists; the row only shows it.
+ * A chevron at the end turns when it is open — the app fetches whatever `more` lists; the row only shows it.
  */
-export function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }) {
+export function Row({ lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }) {
     const disclosure = useDisclosure(open, defaultOpen, onOpenChange);
     const el = more !== undefined ? 'summary' : as ?? (href ? 'a' : 'div');
-    const row = createElement(el, { href, className: cx('row', lg && 'row--lg', done && 'row--done', className), 'aria-disabled': done || undefined, ...(more === undefined ? rest : {}) }, leadIcon ? _jsx("span", { className: "row__lead", children: _jsx(Icon, { name: leadIcon }) }) : lead, (title != null || meta != null || body != null) && (_jsxs("div", { className: "row__body", children: [title != null && _jsx("span", { className: "row__title", children: title }), meta != null && _jsx("span", { className: "row__meta", children: meta }), body] })), children, (endValue != null || endCaption != null) && (_jsxs("span", { className: "row__end", children: [endValue != null && _jsx("span", { className: "t-title", children: endValue }), endCaption != null && _jsx("span", { className: "t-caption t-muted", children: endCaption })] })), end, done && _jsx("span", { className: "row__done", children: _jsx(Icon, { name: "check", size: "sm" }) }));
+    const row = createElement(el, { href, className: cx('row', lg && 'row--lg', done && 'row--done', className), 'aria-disabled': done || undefined, ...(more === undefined ? rest : {}) }, children, done && _jsx("span", { className: "row__done", children: _jsx(Icon, { name: "check", size: "sm" }) }));
     if (more === undefined)
         return row;
     return (_jsxs("details", { className: "row-expand", ...rest, ...disclosure, children: [row, _jsx("div", { className: "row-expand__more", children: more })] }));
 }
+/** RowLead — a Row's lead: the outlined 48px box of a menu row, holding an `icon` or its children.
+ *  A person's or a group's lead takes no box: an Avatar or an AvatarStack goes straight in the Row as its first child. */
+export function RowLead({ icon, className, children, ...rest }) {
+    return _jsx("span", { className: cx('row__lead', className), ...rest, children: icon ? _jsx(Icon, { name: icon }) : children });
+}
+/** RowBody — a Row's words, filling the room between lead and end: a `title` over a `meta` caption;
+ *  its children come under them, or instead of them (a Wave for a voice note). */
+export function RowBody({ title, meta, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('row__body', className), ...rest, children: [title != null && _jsx("span", { className: "row__title", children: title }), meta != null && _jsx("span", { className: "row__meta", children: meta }), children] }));
+}
+/** RowEnd — a Row's trailing value: a `value` over its muted `caption`, right-aligned (+1.0 h over Tue); or its children.
+ *  A control at the end (an IconBtn, a Chip, a Check) takes no RowEnd: it goes straight in the Row after the RowBody. */
+export function RowEnd({ value, caption, className, children, ...rest }) {
+    return (_jsxs("span", { className: cx('row__end', className), ...rest, children: [value != null && _jsx("span", { className: "t-title", children: value }), caption != null && _jsx("span", { className: "t-caption t-muted", children: caption }), children] }));
+}
 /** Rows — a list of Rows separated by hairlines; `heading` names the group (a `role="group"` labelled by it).
  *  REORDERED (the app renders the same keyed rows in another order): each row SLIDES to its new place — the one going up passes
  *  over the others — instead of jumping (Lh 2026-10-01). The order is the app's; the move is the list's. */

package/dist/media/MapArea.d.ts

@@ -3,6 +3,9 @@ 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;
+    /** with `inline`: EDGE TO EDGE of what holds it, the sheet's or the card's inset given back, no corner — the map under a step's
+     *  controls (Lh 2026-10-19, the ask sheet's จุดนัด step). In a `SheetStep` it reaches the sheet's edges; ignored without `inline` */
+    bleed?: 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 */
@@ -28,5 +31,6 @@ export interface MapAreaProps extends ComponentProps<'div'> {
  * `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.
+ * Variation `bleed` (with `inline`): the map edge to edge of what holds it, no corner, for the map under a step's controls.
  */
-export declare function MapArea({ inline, hint, credit, mark, ringLabel, ringRef, className, children, ...rest }: MapAreaProps): import("react").JSX.Element;
+export declare function MapArea({ inline, bleed, hint, credit, mark, ringLabel, ringRef, className, children, ...rest }: MapAreaProps): import("react").JSX.Element;

package/dist/media/MapArea.js

@@ -10,9 +10,10 @@ import { Icon } from '../type/Icon.js';
  * `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.
+ * Variation `bleed` (with `inline`): the map edge to edge of what holds it, no corner, for the map under a step's controls.
  */
-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'
+export function MapArea({ inline, bleed, hint, credit, mark = 'ring', ringLabel = mark === 'pin' ? 'จุดนัด' : 'ย่านของคุณโดยประมาณ', ringRef, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('map', inline && 'map--inline', inline && bleed && 'map--bleed', 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/numbers/Spinner.d.ts

@@ -8,6 +8,6 @@ export interface SpinnerProps extends Omit<ComponentProps<'span'>, 'children'> {
     children?: ReactNode;
 }
 /** Spinner — "working on it": a ring that turns, alone or with a line of words beside it. For a wait of unknown length — a known
- *  share is a `Progress`. `role="status"`: the words (or `label`) are read out when it appears. In a row's `end`, a card, a
+ *  share is a `Progress`. `role="status"`: the words (or `label`) are read out when it appears. At a row's end, a card, a
  *  sheet's body, an `EmptyState`'s `icon`; a whole SCREEN that is not known yet shows nothing instead (`Screen ready`). */
 export declare function Spinner({ size, label, className, children, ...rest }: SpinnerProps): import("react").JSX.Element;

package/dist/numbers/Spinner.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 /** Spinner — "working on it": a ring that turns, alone or with a line of words beside it. For a wait of unknown length — a known
- *  share is a `Progress`. `role="status"`: the words (or `label`) are read out when it appears. In a row's `end`, a card, a
+ *  share is a `Progress`. `role="status"`: the words (or `label`) are read out when it appears. At a row's end, a card, a
  *  sheet's body, an `EmptyState`'s `icon`; a whole SCREEN that is not known yet shows nothing instead (`Screen ready`). */
 export function Spinner({ size = 'md', label, className, children, ...rest }) {
     return (_jsxs("span", { className: cx('spinner', className), role: "status", "aria-label": children == null ? label : undefined, ...rest, children: [_jsx(Icon, { name: "loader-circle", size: size }), children] }));

package/lib/catalog.mjs

@@ -76,6 +76,8 @@ export function get(cat, name, { html = false, all = false } = {}) {
     ...(c.params && { params: c.params }),
     composes: c.composes,
     composedBy: c.composedBy,
+    parts: c.parts ?? [],
+    partOf: c.partOf ?? null,
     knobs: c.knobs,
     variations: [...own, ...elsewhere.filter((s) => shown.includes(s))].map(show),
     ...(elsewhere.length > shown.length && { alsoUsedIn: elsewhere.filter((s) => !shown.includes(s)).map((s) => s.id) }),

package/lib/mcp.mjs

@@ -42,7 +42,7 @@ const TOOLS = [
   },
   {
     name: 'get_component',
-    description: 'One component in full: what it is, its props (a prop marked slot takes children: ReactNode), what it composes and what composes it (composes · composedBy: the catalog names its source renders or calls, and the inverse), its knobs (the CSS custom properties a theme sets to retune it, each with its default, what it sets and the selector that reads it — joined by the classes the component emits, so a knob named for an old name is listed under the component that has it now), and its variations, each a working story with its code. Call it before you use a component you have not used yet, and copy a variation rather than guessing a prop. A component used everywhere (Btn, Text) comes with a few of its stories and the ids of the rest (pass all for their code). Names are case-insensitive; a miss returns the closest names.',
+    description: 'One component in full: what it is, its props (a prop marked slot takes children: ReactNode), what it composes and what composes it (composes · composedBy: the catalog names its source renders or calls, and the inverse), its parts (parts · partOf: the exports a whole is built of as children, and the whole a part belongs to), its knobs (the CSS custom properties a theme sets to retune it, each with its default, what it sets and the selector that reads it — joined by the classes the component emits, so a knob named for an old name is listed under the component that has it now), and its variations, each a working story with its code. Call it before you use a component you have not used yet, and copy a variation rather than guessing a prop. A component used everywhere (Btn, Text) comes with a few of its stories and the ids of the rest (pass all for their code). Names are case-insensitive; a miss returns the closest names.',
     inputSchema: { type: 'object', properties: { name: str('component name, e.g. Menu'), html: bool('also return each variation\'s rendered HTML — only to see the markup it makes'), all: bool('include the code of every story that uses the component') }, required: ['name'] },
     run: (cat, a) => catalog.get(cat, a.name, { html: a.html, all: a.all }),
   },

package/lint/rules.mjs

@@ -218,7 +218,7 @@ export function checkSource(source, file, { classes = carddsClasses() } = {}) {
   // 8 · a label presses the FIRST control inside it: a button before the row's Check takes the press meant for the row
   for (const m of text.matchAll(/<Row\b/g)) {
     const tag = tagAt(text, m.index);
-    if (/\sas\s*=\s*\{?\s*["']label["']/.test(tag) && /<(?:IconBtn|Btn|Link)\b/.test(tag) && !/\shtmlFor\s*=/.test(tag))
+    if (/\sas\s*=\s*\{?\s*["']label["']/.test(tag) && /<(?:IconBtn|Btn|Link)\b/.test(elementAt(text, m.index)) && !/\shtmlFor\s*=/.test(tag))
       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}.');
   }
 
@@ -294,6 +294,13 @@ export function checkSource(source, file, { classes = carddsClasses() } = {}) {
     });
   }
 
+  // 12 · MapArea bleed is read only with inline (the map in flow): alone it does nothing, and the map stays in its inset
+  for (const m of text.matchAll(/<MapArea\b(?![\w.])/g)) {
+    const tag = tagAt(text, m.index);
+    if (/\sbleed\b(?!\s*=\s*\{\s*false)/.test(tag) && !/\sinline\b(?!\s*=\s*\{\s*false)/.test(tag))
+      add('map-bleed-without-inline', 'warn', m.index, '<MapArea bleed> without inline: bleed is read only with inline (the map in flow), so the map stays in its inset. Add inline, or drop bleed.');
+  }
+
   return findings.sort((a, b) => a.line - b.line);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.105",
+  "version": "0.7.106",
   "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.",