@usableapp/cardds 0.6.9 → 0.6.11

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.6.11 — 2026-09-23
+
+### A small link under a foot's buttons: `CardFoot link` (new, like an ActionBar's `ctaLink`)
+- `CardFoot` has a new `link` slot: a `Link sm` on its own short row under the buttons, centred. It never shares the buttons'
+  line, and a sheet's foot strip grows by that row.
+- `CallSheet` passes it as `sheet.footLink`.
+- A `Link` put straight in a `CardFoot` is misuse: it takes a button's share and squeezes the button.
+
+### EmptyState, redone for the new anatomy
+- `Screen top={TopBar} › Step › EmptyState`. It is a component in the content and no longer sits in a `Centre` over the
+  screen.
+- Alone in a Step, it stands at the content's human centre (about 40% down).
+- The TopBar names the page; the EmptyState heading says what is (not) there.
+
+## 0.6.10 — 2026-09-23
+
+### New template: `CallSheet` (layout-3)
+- No top · content = a `Step` holding ONE `Page` (media · `heading`, the page's h1 · `body` · one button, `action`) plus
+  the `Sheet` that button calls · no bottom.
+- The page starts at the lead (15%).
+- The sheet waits `away`; the button brings it up full; its handle takes it down to peek (`states`, default "peek full").
+  Its body is rendered only while it is up.
+- State: `open` + `onOpenChange`, or `defaultOpen`. `sheet={{ title, body, foot }}`.
+- Gallery: layout-3, and screen → Install.
+
+### Changed
+- **`Route`:** both ends and the plane share one grid, so the codes, the dotted runs and the plane sit on one line even
+  when a place name wraps on one side.
+- **`Bubble`:** runs to 75% of the thread (knob `--bubble-max-w`, was 88% incl. the actions). The gallery stories no
+  longer show actions.
+- **`Wave`:** rounded bars, one width, heights from `levels` (0–1; default a mock-up shape). Only whole bars show,
+  spread edge to edge. Knobs `--wave-bar-width` (2px), `--wave-gap` (2px), `--wave-h`.
+
 ## 0.6.9 — 2026-09-23
 
 ### Walkthrough (Lh 2026-09-23)

package/css/card.css

@@ -121,6 +121,10 @@
 .card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; }
 .card__foot > .btn { flex: 1 1 0; min-width: 0; }
 .card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
+/* a small link under the buttons (CardFoot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
+   whole short row of its own, centred — it never shares the buttons' line */
+.card__foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--card-foot-link-gap, var(--sp-1)); }
+.card__foot-link { flex: 1 0 100%; display: flex; justify-content: center; }
 
 /* media placeholder for wireframes — currentColor so it survives any palette */
 .ph {

package/css/journey.css

@@ -5,15 +5,21 @@
    ============================================================ */
 
 /* ---- route: endpoint · dotted connector (icon in middle) · endpoint ---- */
-.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--route-col-gap, var(--sp-1)); } /* line → icon: --sp-1, as the via always had; code → line is the code row's own --sp-3 */
+.route { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto; align-items: end; column-gap: var(--route-col-gap, var(--sp-1)); row-gap: var(--route-point-gap, var(--sp-0)); }
+/* ONE grid for both ends (Lh 2026-09-23): place · code · time are rows shared by the two ends, so the codes — and the dotted runs
+   on them — sit on one line even when a long place name wraps on one side; the plane sits on that code row */ /* line → icon: --sp-1, as the via always had; code → line is the code row's own --sp-3 */
 /* the two endpoints get EQUAL columns whatever their words measure, so the via
    (the icon alone) sits at the card's centre; each dotted run lives on ITS
    endpoint's code row and fills that side's leftover — with short names the
    runs are long and equal, a long place name wraps in its half instead of
    pushing the plane (Lh 2026-09-16) */
 
-.route__point { display: grid; gap: var(--route-point-gap, var(--sp-0)); min-width: 0; }
-.route__point--end { text-align: right; }
+.route__point { display: contents; }
+.route__point > * { grid-column: 1; min-width: 0; }
+.route__point--end > * { grid-column: 3; text-align: right; }
+.route__place { grid-row: 1; }
+.route__code { grid-row: 2; align-self: center; }
+.route__time { grid-row: 3; align-self: start; }
 
 .route__code { font: var(--route-code-font, var(--type-h2)); letter-spacing: var(--track-h2); display: flex; align-items: center; gap: var(--route-code-gap, var(--sp-3)); }
 .route__code::after, .route__point--end .route__code::before { content: ""; flex: 1; border-top: var(--rule-w) dotted currentColor; opacity: 0.65; }
@@ -22,7 +28,7 @@
 .route__place { font: var(--route-place-font, var(--type-caption)); color: var(--route-place-ink, var(--card-muted)); }
 .card--3 .route__place { color: inherit; opacity: 0.7; }
 
-.route__via { display: flex; align-items: center; opacity: 0.65; font-size: var(--route-via-font-size, var(--fs-body)); }
+.route__via { grid-column: 2; grid-row: 2; align-self: center; display: flex; align-items: center; opacity: 0.65; font-size: var(--route-via-font-size, var(--fs-body)); }
 
 /* ---- tile badge: tiny label over a big value (gate, seat, zone) ---- */
 .tile-badge {

package/css/lists.css

@@ -113,7 +113,7 @@
   justify-content: start;
   align-items: center;
   gap: var(--sp-1) var(--sp-3);
-  max-width: 88%;
+  max-width: var(--bubble-max-w, 75%); /* a message may run to three quarters of the thread (Lh 2026-09-23) */
   margin-right: auto;            /* theirs: hugs the left */
 }
 .bubble--right { grid-template-columns: auto minmax(0, max-content); justify-content: end; margin-right: 0; margin-left: auto; } /* mine: hugs the right, the actions on its left */

package/css/media.css

@@ -132,14 +132,25 @@
 /* ---- wave: audio waveform stand-in for voice rows ----
    <span class="wave"></span> — sits in a .row__body, fills the width */
 .wave {
-  display: block;
+  /* only WHOLE bars show (Lh 2026-09-23 — a clipped last bar read thinner): the columns are as many whole bar-widths as fit
+     (auto-fill), spread edge to edge; bars that do not fit go to rows of no height, clipped away */
+  display: grid;
+  grid-template-columns: repeat(auto-fit, var(--wave-bar-width, 0.125rem)); /* auto-FIT: columns no bar fills collapse, so a wide row still spreads its bars edge to edge */
+  grid-template-rows: 100%;
+  grid-auto-rows: 0;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: var(--wave-gap, 0.125rem);
   height: var(--wave-h, var(--icon));
   width: 100%;
-  background: repeating-linear-gradient(90deg, currentColor 0 var(--sp-1), transparent var(--sp-1) var(--sp-2));
-  /* masks only read alpha: currentColor = "opaque" without naming a color */
-  mask: radial-gradient(ellipse 60% 100% at 50% 50%, currentColor 55%, transparent 58%) 0 0 / var(--tap-lg) 100% repeat-x;
-  -webkit-mask: radial-gradient(ellipse 60% 100% at 50% 50%, currentColor 55%, transparent 58%) 0 0 / var(--tap-lg) 100% repeat-x;
-  opacity: 0.8;
+  overflow: hidden;
+}
+/* a bar: as tall as its level (--wave-at, 0–1 — DATA, set by Wave), rounded ends, the ink of whatever it sits on (Lh 2026-09-23) */
+.wave > i {
+  width: 100%; /* its column: every bar one width, only the height tells the level (Lh 2026-09-23) */
+  height: calc(var(--wave-at, 0.5) * 100%);
+  border-radius: var(--r-chip);
+  background: currentColor;
 }
 
 /* ---- mosaic: one big photo + two small, inside a card ----

package/css/sheet.css

@@ -147,9 +147,12 @@
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
 .sheet { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); }
+/* …and the link row under the button, when there is one (its line + the gap over it) */
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + calc(var(--tap-base) * 7 / 12) + var(--card-pad)); }
 .sheet > .card__foot {
   position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
   align-items: end;
+  align-content: end;
   padding: 0 var(--card-pad) var(--card-pad);
   background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
   pointer-events: none;

package/css/step.css

@@ -158,3 +158,8 @@
   border-top: 0;
   object-fit: cover;
 }
+/* an EMPTY STATE is a component in the content box too (Lh 2026-09-23 — it no longer floats in a Centre over the screen): alone in a
+   Step it stands at the human centre of the content, 40% down (two parts of room above it, three below) */
+.step:has(> .empty-state)::before { content: ""; flex: 2 1 0; }
+.step:has(> .empty-state)::after { content: ""; flex: 3 1 0; }
+.step > .empty-state { flex: none; }

package/dist/cardds.css

@@ -653,6 +653,10 @@ button { font: inherit; cursor: pointer; }
 .card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; }
 .card__foot > .btn { flex: 1 1 0; min-width: 0; }
 .card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
+/* a small link under the buttons (CardFoot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
+   whole short row of its own, centred — it never shares the buttons' line */
+.card__foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--card-foot-link-gap, var(--sp-1)); }
+.card__foot-link { flex: 1 0 100%; display: flex; justify-content: center; }
 
 /* media placeholder for wireframes — currentColor so it survives any palette */
 .ph {
@@ -1301,9 +1305,12 @@ button { font: inherit; cursor: pointer; }
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
 .sheet { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); }
+/* …and the link row under the button, when there is one (its line + the gap over it) */
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + calc(var(--tap-base) * 7 / 12) + var(--card-pad)); }
 .sheet > .card__foot {
   position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
   align-items: end;
+  align-content: end;
   padding: 0 var(--card-pad) var(--card-pad);
   background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
   pointer-events: none;
@@ -1684,6 +1691,11 @@ button { font: inherit; cursor: pointer; }
   border-top: 0;
   object-fit: cover;
 }
+/* an EMPTY STATE is a component in the content box too (Lh 2026-09-23 — it no longer floats in a Centre over the screen): alone in a
+   Step it stands at the human centre of the content, 40% down (two parts of room above it, three below) */
+.step:has(> .empty-state)::before { content: ""; flex: 2 1 0; }
+.step:has(> .empty-state)::after { content: ""; flex: 3 1 0; }
+.step > .empty-state { flex: none; }
 
 /* ---- css/forms.css — outlined fields, add-row ---- */
 /* ============================================================
@@ -1762,15 +1774,21 @@ button { font: inherit; cursor: pointer; }
    ============================================================ */
 
 /* ---- route: endpoint · dotted connector (icon in middle) · endpoint ---- */
-.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--route-col-gap, var(--sp-1)); } /* line → icon: --sp-1, as the via always had; code → line is the code row's own --sp-3 */
+.route { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto; align-items: end; column-gap: var(--route-col-gap, var(--sp-1)); row-gap: var(--route-point-gap, var(--sp-0)); }
+/* ONE grid for both ends (Lh 2026-09-23): place · code · time are rows shared by the two ends, so the codes — and the dotted runs
+   on them — sit on one line even when a long place name wraps on one side; the plane sits on that code row */ /* line → icon: --sp-1, as the via always had; code → line is the code row's own --sp-3 */
 /* the two endpoints get EQUAL columns whatever their words measure, so the via
    (the icon alone) sits at the card's centre; each dotted run lives on ITS
    endpoint's code row and fills that side's leftover — with short names the
    runs are long and equal, a long place name wraps in its half instead of
    pushing the plane (Lh 2026-09-16) */
 
-.route__point { display: grid; gap: var(--route-point-gap, var(--sp-0)); min-width: 0; }
-.route__point--end { text-align: right; }
+.route__point { display: contents; }
+.route__point > * { grid-column: 1; min-width: 0; }
+.route__point--end > * { grid-column: 3; text-align: right; }
+.route__place { grid-row: 1; }
+.route__code { grid-row: 2; align-self: center; }
+.route__time { grid-row: 3; align-self: start; }
 
 .route__code { font: var(--route-code-font, var(--type-h2)); letter-spacing: var(--track-h2); display: flex; align-items: center; gap: var(--route-code-gap, var(--sp-3)); }
 .route__code::after, .route__point--end .route__code::before { content: ""; flex: 1; border-top: var(--rule-w) dotted currentColor; opacity: 0.65; }
@@ -1779,7 +1797,7 @@ button { font: inherit; cursor: pointer; }
 .route__place { font: var(--route-place-font, var(--type-caption)); color: var(--route-place-ink, var(--card-muted)); }
 .card--3 .route__place { color: inherit; opacity: 0.7; }
 
-.route__via { display: flex; align-items: center; opacity: 0.65; font-size: var(--route-via-font-size, var(--fs-body)); }
+.route__via { grid-column: 2; grid-row: 2; align-self: center; display: flex; align-items: center; opacity: 0.65; font-size: var(--route-via-font-size, var(--fs-body)); }
 
 /* ---- tile badge: tiny label over a big value (gate, seat, zone) ---- */
 .tile-badge {
@@ -2916,7 +2934,7 @@ button { font: inherit; cursor: pointer; }
   justify-content: start;
   align-items: center;
   gap: var(--sp-1) var(--sp-3);
-  max-width: 88%;
+  max-width: var(--bubble-max-w, 75%); /* a message may run to three quarters of the thread (Lh 2026-09-23) */
   margin-right: auto;            /* theirs: hugs the left */
 }
 .bubble--right { grid-template-columns: auto minmax(0, max-content); justify-content: end; margin-right: 0; margin-left: auto; } /* mine: hugs the right, the actions on its left */
@@ -3150,14 +3168,25 @@ button { font: inherit; cursor: pointer; }
 /* ---- wave: audio waveform stand-in for voice rows ----
    <span class="wave"></span> — sits in a .row__body, fills the width */
 .wave {
-  display: block;
+  /* only WHOLE bars show (Lh 2026-09-23 — a clipped last bar read thinner): the columns are as many whole bar-widths as fit
+     (auto-fill), spread edge to edge; bars that do not fit go to rows of no height, clipped away */
+  display: grid;
+  grid-template-columns: repeat(auto-fit, var(--wave-bar-width, 0.125rem)); /* auto-FIT: columns no bar fills collapse, so a wide row still spreads its bars edge to edge */
+  grid-template-rows: 100%;
+  grid-auto-rows: 0;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: var(--wave-gap, 0.125rem);
   height: var(--wave-h, var(--icon));
   width: 100%;
-  background: repeating-linear-gradient(90deg, currentColor 0 var(--sp-1), transparent var(--sp-1) var(--sp-2));
-  /* masks only read alpha: currentColor = "opaque" without naming a color */
-  mask: radial-gradient(ellipse 60% 100% at 50% 50%, currentColor 55%, transparent 58%) 0 0 / var(--tap-lg) 100% repeat-x;
-  -webkit-mask: radial-gradient(ellipse 60% 100% at 50% 50%, currentColor 55%, transparent 58%) 0 0 / var(--tap-lg) 100% repeat-x;
-  opacity: 0.8;
+  overflow: hidden;
+}
+/* a bar: as tall as its level (--wave-at, 0–1 — DATA, set by Wave), rounded ends, the ink of whatever it sits on (Lh 2026-09-23) */
+.wave > i {
+  width: 100%; /* its column: every bar one width, only the height tells the level (Lh 2026-09-23) */
+  height: calc(var(--wave-at, 0.5) * 100%);
+  border-radius: var(--r-chip);
+  background: currentColor;
 }
 
 /* ---- mosaic: one big photo + two small, inside a card ----

package/dist/cards/CardFoot.d.ts

@@ -1,5 +1,9 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 export interface CardFootProps extends ComponentProps<'div'> {
+    /** a SMALL LINK under the buttons, centred on its own short row (a `Link sm` — "details for developers") — the same as an
+     *  ActionBar's ctaLink (Lh 2026-09-23). It never takes a share of the buttons' line */
+    link?: ReactNode;
 }
-/** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only. */
-export declare function CardFoot({ className, ...rest }: CardFootProps): import("react").JSX.Element;
+/** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
+ *  link goes in `link`, under it. */
+export declare function CardFoot({ link, className, children, ...rest }: CardFootProps): import("react").JSX.Element;

package/dist/cards/CardFoot.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only. */
-export function CardFoot({ className, ...rest }) {
-    return _jsx("div", { className: cx('card__foot', className), ...rest });
+/** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
+ *  link goes in `link`, under it. */
+export function CardFoot({ link, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('card__foot', link != null && 'card__foot--link', className), ...rest, children: [children, link != null && _jsx("div", { className: "card__foot-link", children: link })] }));
 }

package/dist/index.d.ts

@@ -75,3 +75,4 @@ export * from './journey/NoteRow.js';
 export * from './templates/Walkthrough.js';
 export * from './templates/Home.js';
 export * from './sheets/StackSheet.js';
+export * from './templates/CallSheet.js';

package/dist/index.js

@@ -78,3 +78,4 @@ export * from './journey/NoteRow.js';
 export * from './templates/Walkthrough.js';
 export * from './templates/Home.js';
 export * from './sheets/StackSheet.js';
+export * from './templates/CallSheet.js';

package/dist/media/Mosaic.d.ts

@@ -6,6 +6,8 @@ export interface MosaicProps extends ComponentProps<'div'> {
 export declare function Mosaic({ label, className, ...rest }: MosaicProps): import("react").JSX.Element;
 export interface WaveProps extends ComponentProps<'span'> {
     label?: string;
+    /** the bars' heights, 0–1, left to right — a real recording's levels; default: a mock-up shape */
+    levels?: number[];
 }
-/** Wave — the waveform stand-in for a voice note, filling a Row's body. */
-export declare function Wave({ label, className, ...rest }: WaveProps): import("react").JSX.Element;
+/** Wave — a voice note's waveform: rounded bars, short and tall, filling a Row's body. `levels` draws a real one; without it, a mock-up. */
+export declare function Wave({ label, levels, className, ...rest }: WaveProps): import("react").JSX.Element;

package/dist/media/Mosaic.js

@@ -4,7 +4,10 @@ import { cx } from '../cx.js';
 export function Mosaic({ label = 'Photos', className, ...rest }) {
     return _jsx("div", { className: cx('mosaic', className), role: "img", "aria-label": label, ...rest });
 }
-/** Wave — the waveform stand-in for a voice note, filling a Row's body. */
-export function Wave({ label = 'Voice note', className, ...rest }) {
-    return _jsx("span", { className: cx('wave', className), role: "img", "aria-label": label, ...rest });
+/* a MOCK voice shape (Lh 2026-09-23): short and tall rounded bars, loud in bursts, quiet between — not a real recording */
+const MOCK = [0.25, 0.45, 0.3, 0.6, 0.4, 0.2, 0.5, 0.85, 0.35, 0.7, 1, 0.55, 0.3, 0.75, 0.9, 0.45, 0.25, 0.6, 0.8, 0.4,
+    0.2, 0.5, 0.7, 0.35, 0.95, 0.6, 0.3, 0.45, 0.8, 0.5, 0.25, 0.65, 0.9, 0.4, 0.2, 0.55, 0.75, 0.35, 0.5, 0.3];
+/** Wave — a voice note's waveform: rounded bars, short and tall, filling a Row's body. `levels` draws a real one; without it, a mock-up. */
+export function Wave({ label = 'Voice note', levels = MOCK, className, ...rest }) {
+    return (_jsx("span", { className: cx('wave', className), role: "img", "aria-label": label, ...rest, children: levels.map((v, i) => _jsx("i", { style: { '--wave-at': Math.max(0.12, Math.min(1, v)) } }, i)) }));
 }

package/dist/scaffold/EmptyState.d.ts

@@ -9,6 +9,6 @@ export interface EmptyStateProps extends Omit<ComponentProps<'div'>, 'title'> {
     /** the heading's level: h2 on a surface (default) · h3 inside a card's section, under its h3 heading */
     level?: 'h2' | 'h3';
 }
-/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. On the surface (always in a `Centre`)
+/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. A component in the content: alone in a `Step` it stands at the content's human centre, 40% down (Lh 2026-09-23 — no longer a `Centre` over the screen)
  *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in; full ink throughout, never muted (Lh 2026-09-16). */
 export declare function EmptyState({ icon, title, action, level, className, children, ...rest }: EmptyStateProps): import("react").JSX.Element;

package/dist/scaffold/EmptyState.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. On the surface (always in a `Centre`)
+/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. A component in the content: alone in a `Step` it stands at the content's human centre, 40% down (Lh 2026-09-23 — no longer a `Centre` over the screen)
  *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in; full ink throughout, never muted (Lh 2026-09-16). */
 export function EmptyState({ icon, title, action, level = 'h2', className, children, ...rest }) {
     const H = level;

package/dist/templates/CallSheet.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { Screen } from '../scaffold/Screen.js';
+export interface CallSheetSheet {
+    /** the sheet head's title */
+    title: ReactNode;
+    /** the sheet body — rendered only while the sheet is up; a function is called then */
+    body: ReactNode | (() => ReactNode);
+    /** the sheet foot: the one button that finishes the sheet */
+    foot?: ReactNode;
+    /** a small link UNDER that button (a `Link sm`, e.g. details for developers) */
+    footLink?: ReactNode;
+}
+export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'children' | 'fill' | 'top' | 'bottom' | 'title'> {
+    /** a picture above the words (optional) */
+    media?: ReactNode;
+    /** the page's one heading — its h1 (there is no top) */
+    heading: ReactNode;
+    /** the words: a string is one paragraph */
+    body?: ReactNode;
+    /** the button that calls the sheet */
+    action: ReactNode;
+    /** what comes up */
+    sheet: CallSheetSheet;
+    /** CONTROLLED: the sheet is up — with `onOpenChange`; or `defaultOpen` */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** the sheet's resting states once up (default "peek full") */
+    states?: string;
+    /** layers over the screen */
+    children?: ReactNode;
+}
+/**
+ * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
+ * words · the button) and the `Sheet` that button calls · no bottom (the sheet finishes on its own foot). The page starts at the
+ * screen's lead (15%). The sheet waits `away`; the button brings it up full; its handle takes it down to peek.
+ */
+export declare function CallSheet({ media, heading, body, action, sheet, open: openProp, defaultOpen, onOpenChange, states, children, ...rest }: CallSheetProps): import("react").JSX.Element;

package/dist/templates/CallSheet.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Screen } from '../scaffold/Screen.js';
+import { Step } from '../sheets/Step.js';
+import { Page, CtaPack } from '../scaffold/Page.js';
+import { Sheet } from '../sheets/Sheet.js';
+import { SheetBody } from '../sheets/SheetBody.js';
+import { CardHead } from '../cards/CardHead.js';
+import { CardFoot } from '../cards/CardFoot.js';
+import { Text } from '../type/Text.js';
+import { Btn } from '../actions/Btn.js';
+/**
+ * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
+ * words · the button) and the `Sheet` that button calls · no bottom (the sheet finishes on its own foot). The page starts at the
+ * screen's lead (15%). The sheet waits `away`; the button brings it up full; its handle takes it down to peek.
+ */
+export function CallSheet({ media, heading, body, action, sheet, open: openProp, defaultOpen = false, onOpenChange, states = 'peek full', children, ...rest }) {
+    const [own, setOwn] = useState(defaultOpen);
+    const open = openProp ?? own;
+    const [at, setAt] = useState('full');
+    const set = (next) => { if (openProp === undefined)
+        setOwn(next); onOpenChange?.(next); };
+    return (_jsxs(Screen, { fill: true, ...rest, children: [_jsxs(Step, { children: [_jsxs(Page, { children: [media, _jsx(CardHead, { level: "h1", heading: heading }), typeof body === 'string' ? _jsx(Text, { level: "body", children: body }) : body, _jsx(CtaPack, { children: _jsx(Btn, { primary: true, "aria-expanded": open, onClick: () => { setAt('full'); set(true); }, children: action }) })] }), _jsxs(Sheet, { state: open ? at : 'away', onStateChange: (s) => { if (s === 'away')
+                            set(false);
+                        else
+                            setAt(s); }, states: states, children: [_jsx(CardHead, { heading: sheet.title }), _jsx(SheetBody, { children: open ? (typeof sheet.body === 'function' ? sheet.body() : sheet.body) : null }), (sheet.foot != null || sheet.footLink != null) && _jsx(CardFoot, { link: sheet.footLink, children: sheet.foot })] })] }), children] }));
+}

package/package.json

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