@usableapp/cardds 0.6.9 → 0.6.10

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 > 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)

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/dist/cardds.css

@@ -1762,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; }
@@ -1779,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 {
@@ -2916,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 */
@@ -3150,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/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/package.json

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