@usableapp/cardds 0.6.8 → 0.6.10

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 > 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.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)
+- **Swipe:** a sideways swipe turns the page (left = next, right = back). The walk still scrolls up and down; a drag must be mostly sideways and at least 48px to count.
+- **Page turn:** the new page slides in from the side as itself, unscrolled. There is no vertical glide, because the leaving and arriving pages now have two separate transition names (`centre-card-out` / `centre-card-in`, was one `centre-card`).
+- **Picture:** a page that opens on a picture shows it full width from the top edge, as tall as the lead (15%) + `--base-content-media-h`; the words start where they did.
+- **Width:** the walk's scroll box is the whole content, edge to edge. The words keep the screen's inset inside each `Page`.
+- **Scroll room:** each page's bottom padding is exactly the bottom layer's height (`--bottom-h`). A page scrolls only when the layer would cover words; at 100% text nothing scrolls.
+
 ## 0.6.8 — 2026-09-23
 
 - **`Walkthrough`: a new page starts at its lead.** On a page turn (the pager, or the app changing `at`), the walk scrolls back to the top, so the next page never opens where the last one was scrolled to (Lh 2026-09-23).

package/css/card.css

@@ -236,21 +236,21 @@
      <section class="page" inert>…</section>
    </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
-::view-transition-old(centre-card), ::view-transition-new(centre-card) {
+::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) {
   animation-duration: var(--motion-slide);
   animation-timing-function: ease-out;
   mix-blend-mode: normal;
 }
-:root[data-slide="next"]::view-transition-old(centre-card) { animation-name: centre-card-out-left; }
-:root[data-slide="next"]::view-transition-new(centre-card) { animation-name: centre-card-in-right; }
-:root[data-slide="back"]::view-transition-old(centre-card) { animation-name: centre-card-out-right; }
-:root[data-slide="back"]::view-transition-new(centre-card) { animation-name: centre-card-in-left; }
+:root[data-slide="next"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-left; }
 @keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
 @keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-left   { from { translate: -100% 0; opacity: 0; } }
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-old(centre-card), ::view-transition-new(centre-card) { animation: none; }
+  ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) { animation: none; }
 }
 /* the page dots under the card sit centred under it — the indicator belongs
    with the page that changes, never in the bar (Lh, 2026-09-12) */

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/step.css

@@ -107,11 +107,12 @@
    (the picture is never pinned). Each page starts at the screen's lead and ends with the same room under it — the lead as
    padding above AND below — so the words begin near the middle and, when a big text size runs them long, scroll up clear.
    The walk shows no scrollbar. */
-.step > .pages { margin-top: 0; scrollbar-width: none; } /* the scrolling box starts at the step's top edge (Lh 2026-09-23) */
+.step > .pages { margin: 0; scrollbar-width: none; touch-action: pan-y; } /* pan-y: the walk scrolls itself up and down; a sideways swipe is the Walkthrough's (it turns the page) */ /* the scrolling box is the whole content: from the step's top edge, edge to edge — no margin (Lh 2026-09-23) */
+.step > .pages > .page { padding-inline: var(--screen-pad); } /* the words keep the inset INSIDE it */
 .step > .pages > .page { margin-top: var(--_lead, 0rem); } /* the lead is each PAGE's margin (15% with no top, the screen's gap under a bar): the words start there and scroll up to the box's edge */
 .step > .pages::-webkit-scrollbar { display: none; }
 .step > .pages > .page {
-  padding-bottom: calc(var(--screen-lead, 15cqh) + var(--bottom-h, 0rem)); /* + the bottom layer, measured by Screen: the last word scrolls clear of it */
+  padding-bottom: var(--bottom-h, 0rem); /* exactly the bottom layer (measured by Screen): a page scrolls ONLY when the layer would cover its words, and then just far enough to clear them — at 100% nothing scrolls (Lh 2026-09-23) */
 }
 
 /* ============================================================
@@ -143,3 +144,17 @@
    them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
+/* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
+   the lead + the picture's own height (--base-content-media-h), square — so the words start where they always did */
+.step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
+.step > .pages > .page > :is(img, .ph):first-child {
+  width: calc(100% + 2 * var(--screen-pad)); /* the content's width: the page's inset given back */
+  max-width: none;
+  margin-inline: calc(-1 * var(--screen-pad));
+  height: calc(var(--_lead, 0rem) + var(--base-content-media-h, 14rem));
+  max-height: none;
+  border-radius: 0;
+  border-inline: 0;
+  border-top: 0;
+  object-fit: cover;
+}

package/dist/cardds.css

@@ -768,21 +768,21 @@ button { font: inherit; cursor: pointer; }
      <section class="page" inert>…</section>
    </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
-::view-transition-old(centre-card), ::view-transition-new(centre-card) {
+::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) {
   animation-duration: var(--motion-slide);
   animation-timing-function: ease-out;
   mix-blend-mode: normal;
 }
-:root[data-slide="next"]::view-transition-old(centre-card) { animation-name: centre-card-out-left; }
-:root[data-slide="next"]::view-transition-new(centre-card) { animation-name: centre-card-in-right; }
-:root[data-slide="back"]::view-transition-old(centre-card) { animation-name: centre-card-out-right; }
-:root[data-slide="back"]::view-transition-new(centre-card) { animation-name: centre-card-in-left; }
+:root[data-slide="next"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-left; }
 @keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
 @keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-left   { from { translate: -100% 0; opacity: 0; } }
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-old(centre-card), ::view-transition-new(centre-card) { animation: none; }
+  ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) { animation: none; }
 }
 /* the page dots under the card sit centred under it — the indicator belongs
    with the page that changes, never in the bar (Lh, 2026-09-12) */
@@ -1633,11 +1633,12 @@ button { font: inherit; cursor: pointer; }
    (the picture is never pinned). Each page starts at the screen's lead and ends with the same room under it — the lead as
    padding above AND below — so the words begin near the middle and, when a big text size runs them long, scroll up clear.
    The walk shows no scrollbar. */
-.step > .pages { margin-top: 0; scrollbar-width: none; } /* the scrolling box starts at the step's top edge (Lh 2026-09-23) */
+.step > .pages { margin: 0; scrollbar-width: none; touch-action: pan-y; } /* pan-y: the walk scrolls itself up and down; a sideways swipe is the Walkthrough's (it turns the page) */ /* the scrolling box is the whole content: from the step's top edge, edge to edge — no margin (Lh 2026-09-23) */
+.step > .pages > .page { padding-inline: var(--screen-pad); } /* the words keep the inset INSIDE it */
 .step > .pages > .page { margin-top: var(--_lead, 0rem); } /* the lead is each PAGE's margin (15% with no top, the screen's gap under a bar): the words start there and scroll up to the box's edge */
 .step > .pages::-webkit-scrollbar { display: none; }
 .step > .pages > .page {
-  padding-bottom: calc(var(--screen-lead, 15cqh) + var(--bottom-h, 0rem)); /* + the bottom layer, measured by Screen: the last word scrolls clear of it */
+  padding-bottom: var(--bottom-h, 0rem); /* exactly the bottom layer (measured by Screen): a page scrolls ONLY when the layer would cover its words, and then just far enough to clear them — at 100% nothing scrolls (Lh 2026-09-23) */
 }
 
 /* ============================================================
@@ -1669,6 +1670,20 @@ button { font: inherit; cursor: pointer; }
    them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
+/* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
+   the lead + the picture's own height (--base-content-media-h), square — so the words start where they always did */
+.step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
+.step > .pages > .page > :is(img, .ph):first-child {
+  width: calc(100% + 2 * var(--screen-pad)); /* the content's width: the page's inset given back */
+  max-width: none;
+  margin-inline: calc(-1 * var(--screen-pad));
+  height: calc(var(--_lead, 0rem) + var(--base-content-media-h, 14rem));
+  max-height: none;
+  border-radius: 0;
+  border-inline: 0;
+  border-top: 0;
+  object-fit: cover;
+}
 
 /* ---- css/forms.css — outlined fields, add-row ---- */
 /* ============================================================
@@ -1747,15 +1762,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; }
@@ -1764,7 +1785,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 {
@@ -2901,7 +2922,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 */
@@ -3135,14 +3156,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/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/Centre.js

@@ -41,11 +41,14 @@ export function slideTo(direction, update, scope = document) {
     const moving = () => scope.querySelector('.pages > [aria-current], .screen__centre > .card');
     const name = (el, v) => { if (el)
         el.style.viewTransitionName = v; };
+    /* the leaving page and the arriving one are TWO names, never one: one name makes the browser morph the box from where the old
+       page was (scrolled up) to where the new one is (at its top) — a vertical glide. Two names = each only slides sideways, the new
+       one arriving as itself, unscrolled (Lh 2026-09-23). */
     const before = moving();
-    name(before, 'centre-card');
+    name(before, 'centre-card-out');
     root.dataset.slide = direction;
     let after = null;
-    const transition = document.startViewTransition(() => { flushSync(update); name(before, ''); after = moving(); name(after, 'centre-card'); });
+    const transition = document.startViewTransition(() => { flushSync(update); name(before, ''); after = moving(); name(after, 'centre-card-in'); });
     void transition.finished.finally(() => {
         delete root.dataset.slide;
         name(after, '');

package/dist/templates/CallSheet.d.ts

@@ -0,0 +1,36 @@
+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;
+}
+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 && _jsx(CardFoot, { children: sheet.foot })] })] }), children] }));
+}

package/dist/templates/Walkthrough.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { Screen } from '../scaffold/Screen.js';
 import { Step } from '../sheets/Step.js';
 import { Page } from '../scaffold/Page.js';
@@ -19,8 +19,9 @@ export function Walkthrough({ pages, at: atProp, defaultAt = 0, onAtChange, cta,
     const [own, setOwn] = useState(defaultAt);
     const at = atProp ?? own;
     const step = useRef(null);
-    // a new page starts where a page starts — at its lead, not where the last one was scrolled to (Lh 2026-09-23)
-    useEffect(() => { const p = step.current?.querySelector(':scope > .pages'); if (p)
+    // a new page starts where a page starts — at its lead, not where the last one was scrolled to (Lh 2026-09-23). A LAYOUT effect:
+    // it runs inside the page turn's commit, before the view transition takes its picture — only the sideways slide shows, no scroll
+    useLayoutEffect(() => { const p = step.current?.querySelector(':scope > .pages'); if (p)
         p.scrollTop = 0; }, [at]);
     const count = pages.length;
     const go = (to) => {
@@ -29,10 +30,27 @@ export function Walkthrough({ pages, at: atProp, defaultAt = 0, onAtChange, cta,
         slideTo(to > at ? 'next' : 'back', () => { if (atProp === undefined)
             setOwn(to); onAtChange?.(to); }, step.current ?? document);
     };
+    /* a sideways SWIPE turns the page (Lh 2026-09-23): left = next, right = back. The walk still scrolls up and down itself
+       (touch-action: pan-y); a swipe must be mostly sideways and long enough, so a scroll never turns a page */
+    const start = useRef(null);
+    const swipe = {
+        onPointerDown: (e) => { start.current = { x: e.clientX, y: e.clientY }; },
+        onPointerUp: (e) => {
+            const s0 = start.current;
+            start.current = null;
+            if (!s0)
+                return;
+            const dx = e.clientX - s0.x, dy = e.clientY - s0.y;
+            if (Math.abs(dx) < 48 || Math.abs(dx) < 1.5 * Math.abs(dy))
+                return;
+            go(dx < 0 ? at + 1 : at - 1);
+        },
+        onPointerCancel: () => { start.current = null; },
+    };
     const row = typeof cta === 'function' ? cta({ at, count, go }) : cta;
     const custom = row !== undefined && row !== null;
     const pager = (_jsxs(_Fragment, { children: [_jsx(IconBtn, { icon: "arrow-left", label: backLabel, disabled: at === 0, onClick: () => go(at - 1) }), _jsx(IconBtn, { invert: true, icon: "arrow-right", label: nextLabel, disabled: at === count - 1, onClick: () => go(at + 1) })] }));
     const dots = count > 1 ? _jsx(PagerAt, { at: at + 1, of: count }) : null;
     const bottom = dots || controls.length || ctaLink != null ? (_jsxs(ActionBar, { variant: "tiers", children: [dots, controls.map((c, i) => _jsx(ActionBarTier, { children: c }, i)), _jsx(ActionBarTier, { pager: true, children: custom ? row : pager }), ctaLink != null && _jsx(ActionBarTier, { className: "action-bar__tier--link", children: ctaLink })] })) : (_jsx(ActionBar, { variant: "pager", children: custom ? row : pager }));
-    return (_jsxs(Screen, { fill: true, bottom: bottom, ...rest, children: [_jsx(Step, { ref: step, children: _jsx(Pages, { children: pages.map((p, i) => (_jsxs(Page, { "aria-current": i === at ? 'step' : undefined, inert: i !== at || undefined, children: [p.media, _jsx(CardHead, { level: "h1", heading: p.heading }), typeof p.body === 'string' ? _jsx(Text, { level: "body", children: p.body }) : p.body] }, i))) }) }), children] }));
+    return (_jsxs(Screen, { fill: true, bottom: bottom, ...rest, children: [_jsx(Step, { ref: step, children: _jsx(Pages, { ...swipe, children: pages.map((p, i) => (_jsxs(Page, { "aria-current": i === at ? 'step' : undefined, inert: i !== at || undefined, children: [p.media, _jsx(CardHead, { level: "h1", heading: p.heading }), typeof p.body === 'string' ? _jsx(Text, { level: "body", children: p.body }) : p.body] }, i))) }) }), children] }));
 }

package/package.json

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