@usableapp/cardds 0.1.4 → 0.1.5

package/README.md

@@ -2,12 +2,12 @@
 
 Card-first mobile design system, **React-first**: `src/` is the component
 library — one thin component per pattern, emitting exactly the markup the CSS
-documents — and `app/` is the Commons Time Bank PWA built from it (the twelve
-screens of the Claude Design handoff, as real routes). The CSS (`css/*.css`)
+documents. The CSS (`css/*.css`)
 stays the only truth: a component never styles anything, it only picks classes
 from props. The CSS also works alone, with no build, for a host that wants
-class names rather than components; `demo/` keeps the CSS spec pages the
-acceptance tests drive.
+class names rather than components. The demo is `/gallery` (`npm run dev`):
+every component's stories, live, searchable; `tests/fixtures/` holds the
+HTML pages the acceptance tests drive (not a demo — nobody reads them).
 
 Repo: **https://github.com/everysundays/cardds** (private — this is the
 source of truth; every consuming project vendors a copy from here, never
@@ -23,10 +23,9 @@ licences (`fonts/LICENSES.md`).
 
 ```bash
 npm install
-npm run dev          # the app (app/) on http://localhost:5174 — the twelve screens, /screens lists them
+npm run dev          # the gallery on http://localhost:5174 — every story, searchable
 npm run build        # the library: icons → src/type/icons.ts · tsc → dist/ (ESM + .d.ts) · dist/cardds.css (flattened)
-npm run build:app    # the PWA → app/dist (manifest, service worker, icons)
-npm test             # Playwright: the step/sheet/centre geometry on demo/, the app's screens and the four handoff upgrades
+npm test             # Playwright: the step/sheet/centre geometry on tests/fixtures/, the app's screens and the four handoff upgrades
 ```
 
 ```tsx
@@ -42,12 +41,13 @@ the code), a card heading that needs more than two lines squeezing its type
 (see *Anatomy*), and the `.dropdown` writing its picked value back. `Icon`
 inlines the 56 symbols of `icons.svg` at build time, so no sprite file ships.
 
-**The app** (`app/`): Vite + React Router, `cardds` aliased to `src/` so the
-app and the package share one truth with no build between them. Twelve
-screens from `docs/handoff/commons-time-bank-SPEC.md` — welcome, install (the
-real `beforeinstallprompt`), verify phone, home, browse, detail, matches,
-empty, the two menus (sheet stacks), post, profile. `app/README.md` records
-what the port changed against the mockups and why.
+**The gallery** (`gallery/`): Vite + React Router, `cardds` aliased to `src/`
+so the gallery and the package share one truth with no build between them.
+`/` lists every story of every component, `/:Name` one component. (The
+Commons Time Bank app that used to live here — twelve screens from
+`docs/handoff/commons-time-bank-SPEC.md` — was dropped on 2026-09-16; nobody
+looked at it, the gallery is the demo. The type scale is the `Text · Scale`
+story.)
 
 **CSS only** (no React, no build):
 
@@ -62,14 +62,12 @@ popover) but won't update its label, a stack still displays but won't open, a
 sheet renders every state but only moves when a class changes, a pin is six
 plain inputs.
 
-`demo/index.html` is the CSS spec — every component in one page, palette
-switcher top-right. `demo/sheet.html` — the single sheet at phone height: a step
-that reads, a step that acts, the overlay stage; `demo/stack.html` — the sheet
-stack: the menu and the display variant; `demo/elements.html` — in-card
-elements and layovers grown from the timebanking board. Serve the repo root
-(`python3 -m http.server 4174`) and open `/demo/`. These pages are the fixtures
-of `tests/step.spec.js` and `tests/centre.spec.js`; `tests/app.spec.js` drives
-the app. Nothing here is verified by eye.
+The one place to look is `/gallery` (`npm run dev` → `http://localhost:5174/gallery`):
+every `.design-sync/previews/<Name>.tsx` story, live, grouped by `src/<group>/`,
+searchable, in a 375×812 phone cell, with a palette switch and an inspect
+switch (box outlines + dimensions on hover). `tests/fixtures/*.html` (ex
+`demo/`) are the pages `tests/step.spec.js` and `tests/centre.spec.js` measure;
+`tests/gallery.spec.js` drives the gallery. Nothing here is verified by eye.
 
 ### In another project
 
@@ -187,19 +185,19 @@ A step is one screen, one task (see *Anatomy*). It is the other component
 whose markup has rules, because the sheet's box is the step itself:
 
 ```html
-<!-- reads: card only -->
+<!-- reads: the words only -->
 <section class="step">
-  <article class="card step__card">
-    <div class="card__head"><div><span class="t-overline t-muted">ขั้นที่ 2 จาก 4</span><h2 class="t-h2">…</h2></div></div>
+  <article class="step__card">
+    <div class="card__head"><span class="t-overline t-muted">ขั้นที่ 2 จาก 4</span><h2 class="t-h2">…</h2></div>
     <p class="t-body">…</p>
   </article>
 </section>
 <div class="action-bar action-bar--pager">…</div>
 
-<!-- acts: card + sheet -->
+<!-- acts: the words + a sheet -->
 <section class="step">
-  <article class="card step__card">…the words…</article>
-  <article class="card sheet sheet--half" data-sheet-states="peek half full">
+  <article class="step__card">…the words…</article>
+  <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
     <button class="sheet__handle" type="button" aria-label="ปรับความสูง"></button>
     <div class="card__head"><h2 class="t-h2">…</h2><span class="chip">…</span></div>
     <div class="sheet__body">
@@ -221,8 +219,10 @@ whose markup has rules, because the sheet's box is the step itself:
   card takes the inset back as its side margins — so the card and the bar's
   buttons stand on the inset line, and the sheet runs edge to edge like the
   bar and like a sheet in a `.sheet-stage`.
-- **`.step__card` first, `.sheet` last.** The card carries the step's words
-  and is a normal card: head · content · optional foot. The sheet is
+- **`.step__card` first, `.sheet` last.** The block carries the step's words
+  ON THE BASE — no frame, no area colour (it was a `.card` until 2026-09-16;
+  Lh: a step reads like a page, not a card in a page). It keeps a card's
+  rhythm: a `.card__head`, `--card-gap` between things. The sheet is
   **handle · head · body**: the handle, then a `.card__head` title row (that
   row is what `peek` shows — heading left, the contextual thing right), then
   `.sheet__body` with what the member acts on. The handle and the head are
@@ -311,12 +311,12 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 | `css/choice.css` | `.check`, `.toggle`, `.chip--toggle`, `.chip-grid` + `.chip--pick`, `.day-strip`, `.calendar`, `.mood`, `.pin`, `.composer`, `.slider` | choice controls |
 | `css/lists.css` | `.row` / `.rows` (frameless rows in a card), `.kv`, `.kv-grid`, `.timeline`, `.legend`, `.link` | lists inside cards |
 | `css/media.css` | `.card--cover`, `.quote`, `.tile-grid` + `.tile`, `.card--fold`, `.mosaic`, `.wave` | media & display |
-| `css/layover.css` | `.drawer` (ask), `.menu` (popover), `.banner` (details), `.float-bar`, `.callout`, `.chip--bubble`, `.deck` | cards over content |
+| `css/layover.css` | `.modal` (the ask: `__lift` + `__drawer`, closes on any drawer button → `cardds:modal`), `.menu` (popover), `.banner` (details), `.float-bar`, `.callout`, `.chip--bubble`, `.deck` | cards over content |
 | `icons.svg` | Lucide sprite (ISC), 56 minimal stroke icons | add symbols as needed |
 | `src/` → `dist/` | the React library: `src/<group>/<Name>.tsx`, one thin component per pattern, JSDoc = the rule; built by `npm run build` (tsc) into `dist/` with `.d.ts`; `src/type/icons.ts` is generated from `icons.svg` | when adding a component |
-| `app/` | the Commons Time Bank PWA: `app/src/screens/*.tsx` (the twelve screens), `App.tsx` (the routes), `install.ts` (the install prompt), `public/` (manifest, `sw.js`, icons); `npm run dev` / `build:app` | the product |
-| `demo/` | the CSS spec pages (`index`, `sheet`, `stack`, `elements`) — CSS only, and the fixtures of the geometry tests | when the CSS contract changes |
-| `docs/handoff/` | the Claude Design handoff spec the app was ported from | reference |
+| `gallery/` | the gallery site: `npm run dev` → `/` every story, `/:Name` one component (`gallery/src/Gallery.tsx` globs `.design-sync/previews/`) | the demo |
+| `tests/fixtures/` | the HTML pages (`index`, `sheet`, `stack`, `elements`) the geometry tests measure — ex `demo/`, not a demo | when a geometry test needs a new case |
+| `docs/handoff/` | the Claude Design handoff spec (the Commons Time Bank app built from it was dropped 2026-09-16) | reference |
 | `scripts/` | `build-icons.mjs` (icons.svg → `src/type/icons.ts`), `flatten-css.mjs` (`cardds.css` + imports → `dist/cardds.css`) | rarely |
 | `docs/guides/` | `building-with-cardds.md` — the anatomy, the step, the two sheet systems and the vocabulary in React terms; shipped to Claude Design as its guidelines | when the contract changes |
 | `cardds.js` | the behaviours (delegated, class/property toggles only — everything renders without it): dropdown value sync, `.sheet-stack--tap` open/close (tolerates one wrapper per sheet; close reads the tapped sheet), `.pin` auto-advance / Backspace / paste + `cardds:pin`, the sheet handle (tap / drag-snap / Enter / Space), the focus and keyboard raises (`--kb`), `cardds:sheet` | rarely |
@@ -356,7 +356,7 @@ Every screen is the same four things, and every card the same three:
 - **Two sheet systems, one material.** *Sheet single* (`.sheet`, `sheet.css`)
   is ONE sheet the member acts in, whatever it holds: a short entry in front
   of a step's card, a place on a map, a payment on a dim page — in a `.step`
-  or a `.sheet-stage`, and its state is how far it slid (peek / half / full).
+  or a `.sheet-stage`, and its state is how far it slid (peek / half / 3q / full).
   *Sheet stack* (`.sheet-stack`, `stack.css`) is MANY sheets, each a main
   section of the app, stacked like paper at the middle of the home screen:
   the menu. Heads peek, a tap brings one sheet to the front, back returns it;
@@ -365,8 +365,8 @@ Every screen is the same four things, and every card the same three:
   sheet is `.card.sheet` — and both obey rule 8: rigid, full height, moved
   by `translate` only. (The stack was first named "card stack": wrong, and
   retired.) Demos: `sheet.html`, `stack.html`.
-- **A step is one screen, one task: `.step`.** What the member reads is a
-  card (`.step__card`); what the member does, if the step asks for it, is a
+- **A step is one screen, one task: `.step`.** What the member reads is
+  words on the base (`.step__card` — the name stayed, the frame went); what the member does, if the step asks for it, is a
   `.sheet` in front of it; the screen's one move is `.action-bar`, outside
   the step, below it. A step where the member only READS is the card alone.
   A step where the member ACTS (types, picks, shoots a photo, records) adds
@@ -469,9 +469,12 @@ Demo: the *skeleton* block at the top of `elements.html`.
 8. **A single sheet is rigid material, like a sheet in the stack.** It is always the full
    height of the box that holds it (`inset: 0`, set once, never written
    again) and a state is nothing but how far that full card slid:
-   `sheet--full` slid nowhere, `sheet--half` slid down by `--sheet-half`
-   (50% of itself), `sheet--peek` slid down until only `--sheet-peek` shows —
-   the handle and the title row. `translate` is the only animated property
+   `sheet--full` slid nowhere, `sheet--3q` slid down by `--sheet-3q` (a
+   quarter of itself — three quarters show), `sheet--half` by `--sheet-half`
+   (50%), `sheet--peek` slid down until only `--sheet-peek` shows — the
+   handle and the title row. A tap on the handle toggles between the sheet's
+   own state and peek (never a step-by-step climb, Lh 2026-09-16); a drag
+   snaps to any listed state, and where it lands is what a tap returns to. `translate` is the only animated property
    (`--motion-sheet`), and nothing toggles height, display or z-index for a
    state — the stack's rule, inherited. The box clips whatever slid below its
    bottom edge, so a sheet at any height is still a card: rounded top, a
@@ -484,7 +487,7 @@ Demo: the *skeleton* block at the top of `elements.html`.
    padding. Two boxes hold sheets and the states
    mean the same in both: `.step` (an app screen, the bar outside — Anatomy)
    and `.sheet-stage` (a page-level overlay: a sheet over a map, the dim page
-   sheet `--dim` + `--raised`, the ask drawer `--ask` + `.lift` + `.drawer`).
+   sheet `--dim` + `--raised`, the ask `--ask` + `.modal` = `__lift` + `__drawer`).
    A stage keeps the top bar's line free (`--_top`), so `--full` stops under
    `--header-h` and keeps its corners. Both sheet tokens are published — a
    sheet with a taller head retunes `--sheet-peek` — and registered in

package/cardds.js

@@ -177,8 +177,12 @@ function carddsCloseStack(stack, card) {
    without it; this adds the handle's click and drag, the focus raise, the
    keyboard room, and one event. Delegated: any sheet on the page, no ids.
 
-   - click / Enter / Space on .sheet__handle cycles the states named in
-     data-sheet-states (default "peek half full"), wrapping round
+   - click / Enter / Space on .sheet__handle TOGGLES the sheet between its
+     own state and peek (Lh 2026-09-16 — never a step-by-step climb). "Its
+     own state" is the last non-peek state it rested in (authored, dragged
+     to, or set), kept in data-sheet-home
+   - data-sheet-states (default "peek half 3q full") lists the states a
+     drag snaps to
    - drag on the handle writes the offset to --_drag (the CSS adds it to the
      state's translate) and on release snaps to the nearest state; a move
      shorter than --sp-2 is a tap. The snap is the one place the sheet's
@@ -194,7 +198,7 @@ function carddsCloseStack(stack, card) {
 
    carddsSheetSet(sheet, state) is the one entry point; an app that sets
    the state itself calls it rather than swapping classes, so listeners hear. */
-const CARDDS_SHEET_STATES = ['peek', 'half', 'full'];
+const CARDDS_SHEET_STATES = ['peek', 'half', '3q', 'full'];
 const CARDDS_SHEET_TAP_REM = 0.5; /* = --sp-2: a move shorter than this is a tap, not a drag */
 
 function carddsSheetStates(sheet) {
@@ -210,6 +214,10 @@ function carddsSheetSet(sheet, state) {
   if (!CARDDS_SHEET_STATES.includes(state)) return;
   const was = carddsSheetState(sheet);
   CARDDS_SHEET_STATES.forEach(s => sheet.classList.toggle('sheet--' + s, s === state));
+  /* where a tap from peek returns to: the non-peek state it is going to, or the
+     one it is leaving (an authored state never passed through here before) */
+  const home = state !== 'peek' ? state : was !== 'peek' ? was : null;
+  if (home) sheet.dataset.sheetHome = home;
   if (was !== state) sheet.dispatchEvent(new CustomEvent('cardds:sheet', { bubbles: true, detail: { state } }));
 }
 
@@ -224,10 +232,19 @@ document.addEventListener('click', e => {
   if (handle === carddsSheetSkipClick) { carddsSheetSkipClick = null; return; }
   const sheet = handle.closest('.sheet');
   if (!sheet) return;
-  const states = carddsSheetStates(sheet);
-  carddsSheetSet(sheet, states[(states.indexOf(carddsSheetState(sheet)) + 1) % states.length]);
+  carddsSheetSet(sheet, carddsSheetState(sheet) === 'peek' ? carddsSheetHome(sheet) : 'peek');
 });
 
+/* the state a tap from peek returns to: the last non-peek state it rested in,
+   else the authored one, else the first non-peek state it snaps to */
+function carddsSheetHome(sheet) {
+  const states = carddsSheetStates(sheet);
+  const home = sheet.dataset.sheetHome;
+  if (home && states.includes(home)) return home;
+  const now = carddsSheetState(sheet);
+  return now !== 'peek' ? now : states.find(s => s !== 'peek') ?? 'half';
+}
+
 /* how far the sheet has slid, in px: its rendered top against its resting top
    at full (the box's padding edge + its own offset). Read from geometry, not
    from the computed translate — that keeps percentages and calcs as text. */
@@ -243,6 +260,7 @@ function carddsSheetStops(sheet) {
   return {
     full: 0,
     half: height * (parseFloat(cs.getPropertyValue('--sheet-half')) || 0), // a share of the height
+    '3q': height * (parseFloat(cs.getPropertyValue('--sheet-3q')) || 0),
     peek: height - (parseFloat(cs.getPropertyValue('--sheet-peek')) || 0),  // a length, resolved
   };
 }
@@ -299,18 +317,17 @@ document.addEventListener('pointerup', carddsSheetRelease);
 document.addEventListener('pointercancel', carddsSheetRelease);
 
 /* focus in a peeked sheet: a control under the cut cannot be used, so raise
-   the sheet first — to the state after peek at least, further if that one
-   has no room for the control under the pinned head (a small phone at a
-   large text size). The browser's own reveal scrolled the body against the
+   the sheet first — to its own state (the one a tap returns to) at least,
+   further if that one has no room for the control under the pinned head (a
+   small phone at a large text size). The browser's own reveal scrolled the body against the
    peek strip before this fired; start over from the top and let the reveal,
    with the raised state's scroll-padding, do the least. */
 document.addEventListener('focusin', e => {
   const sheet = e.target.closest?.('.sheet');
   if (!sheet || !sheet.classList.contains('sheet--peek') || e.target.closest('.sheet__handle')) return;
-  const states = carddsSheetStates(sheet);
   const body = sheet.querySelector(':scope > .sheet__body');
   if (body) body.scrollTop = 0;
-  carddsSheetReveal(e.target, states[states.indexOf('peek') + 1] ?? states[states.length - 1]);
+  carddsSheetReveal(e.target, carddsSheetHome(sheet));
 });
 
 /* --kb: the height of the viewport an on-screen keyboard covers. iOS keeps
@@ -377,3 +394,23 @@ document.addEventListener('scroll', e => {
   clearTimeout(carddsScrollTimers.get(t));
   carddsScrollTimers.set(t, setTimeout(() => t.classList.remove('is-scrolling'), 700));
 }, true);
+
+/* ---- Modal (layover.css, .sheet-stage--ask): a click on any button in the
+   drawer closes the modal by playing its open animations backwards —
+   Animation.reverse() on every animation in the card, the same keyframes, no
+   closing keyframes to keep in step — then fires "cardds:modal" on the stage
+   (bubbles, detail.answer = the button's data-answer) so the app removes the
+   stage. Reduced motion (no animations): the event fires at once. */
+document.addEventListener('click', e => {
+  const btn = e.target.closest('.modal__drawer button');
+  if (!btn) return;
+  const stage = btn.closest('.sheet-stage--ask');
+  const modal = btn.closest('.modal');
+  if (!stage || !modal || stage.classList.contains('is-closing')) return;
+  stage.classList.add('is-closing');
+  const anims = modal.getAnimations({ subtree: true });
+  anims.forEach(a => a.reverse());
+  Promise.all(anims.map(a => a.finished)).then(() => {
+    stage.dispatchEvent(new CustomEvent('cardds:modal', { bubbles: true, detail: { answer: btn.dataset.answer ?? null } }));
+  });
+});

package/css/layover.css

@@ -1,48 +1,93 @@
 /* ============================================================
    cardds/layover.css — cards that lay OVER other content:
-   ask drawer · popover menu · expanding banner · float bar ·
+   Modal (ask) · popover menu · expanding banner · float bar ·
    callout · swipe deck. The sheet (peek / half / full / page)
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
-/* ---- ask drawer: the content card lifts, a dark drawer asks ----
+/* ---- ask: the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
    <div class="sheet-stage sheet-stage--ask">
-     <article class="card lift">…page content…</article>
-     <div class="drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
-       <div class="btn-trio"><button class="icon-btn">×</button><span class="btn-trio__dots"></span><button class="icon-btn icon-btn--invert">?</button><span class="btn-trio__dots"></span><button class="icon-btn">✓</button></div>
-     </div></div> */
+     <article class="card modal">
+       <div class="modal__lift">…the card's content (a head, rows, a timeline)…</div>
+       <div class="modal__drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
+         <div class="btn-trio">…</div>
+       </div>
+     </article>
+   </div>
+   .modal is the card — no border (the shadow is its edge on the scrim);
+   .modal__lift the light part that holds the thing being asked about (it
+   scrolls when tall); .modal__drawer the dark end that asks. The ground is
+   the page under a scrim (like --dim). Two beats (2 × --motion-sheet) when
+   the stage appears, and the same two backwards when it closes:
+     1. the card drops in from above the stage to the screen's centre — its
+        drawer still inside it, height 0: nothing of the ask shows yet
+     2. the drawer comes out of the card's bottom edge while the lift moves
+        up, both at once: the card grows from its centre, which never moves
+        (the stage centres it; a growing card keeps its middle where it is)
+   Closing: a click on any button in the drawer plays the same animations in
+   reverse (cardds.js: Animation.reverse() on each — nothing duplicated), then
+   fires "cardds:modal" on the .sheet-stage (bubbles, detail.answer from the
+   button's data-answer) for the app to remove the stage.
+   Reduced motion: the finished state, no beats; closing fires at once. */
 .sheet-stage--ask {
   --drawer-h: 14rem;
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
+  display: grid;
+  align-content: center;          /* the card at the screen's centre — and kept there as it grows */
+  padding-inline: var(--screen-pad);
 }
-.lift {
-  position: absolute;
-  inset: 0 0 var(--drawer-h) 0;
-  border: 0;
-  border-radius: 0 0 var(--r-card) var(--r-card);
-  overflow: hidden;
-  overscroll-behavior: contain;
+.sheet-stage--ask::after { content: ""; position: absolute; inset: 0; background: var(--scrim); } /* the page dimmed */
+.sheet-stage--ask > .sheet-stage__bg { filter: blur(var(--sp-2)); }
+.modal {
+  position: relative;
+  z-index: 1;                     /* over the scrim */
+  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) — a % here would be of the grid area, which is the card itself */
+  padding: 0;                     /* the parts pad themselves */
+  border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: clip;
   box-shadow: var(--shadow-sheet);
+}
+.modal__lift {
+  padding: var(--card-pad);
+  display: grid;
+  gap: var(--card-gap);
   align-content: start;
+  min-height: 0;
+  overflow-y: auto;               /* tall content scrolls inside; the drawer stays */
+  overscroll-behavior: contain;
 }
-.drawer {
-  position: absolute;
-  inset-inline: 0;
-  bottom: 0;
+.modal__drawer {
   height: var(--drawer-h);
+  box-sizing: border-box;
   padding: var(--sp-5);
+  overflow: clip;
   display: grid;
   align-content: center;
   justify-items: center;
   gap: var(--sp-1);
   text-align: center;
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
-.drawer .t-caption { opacity: 0.7; }
-.drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
-.drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+.modal__drawer .t-caption { opacity: 0.7; }
+.modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
+.modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+@media (prefers-reduced-motion: no-preference) {
+  .modal { animation: modal-drop calc(2 * var(--motion-sheet)) ease both; }
+  .modal__drawer { animation: modal-open calc(2 * var(--motion-sheet)) ease both; }
+  @keyframes modal-drop {
+    0%        { translate: 0 -100cqh; }   /* above the stage */
+    50%, 100% { translate: 0 0; }         /* 1. at the centre — and it stays: beat 2 is the drawer's */
+  }
+  @keyframes modal-open {
+    0%, 50%   { height: 0; padding-block: 0; }                       /* inside the card */
+    100%      { height: var(--drawer-h); padding-block: var(--sp-5); } /* 2. out below, the lift up, together */
+  }
+}
+
 .btn-trio { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
 .btn-trio__dots {
   width: var(--sp-5);

package/css/sheet.css

@@ -1,14 +1,14 @@
 /* ============================================================
    cardds/sheet.css — sheet single: one card as a bottom sheet.
-   Three states: .sheet--peek · .sheet--half · .sheet--full
+   Four states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full
 
    A sheet is rigid material, exactly like a sheet in .sheet-stack--tap
    (stack.css): it is ALWAYS the full height of the box that holds it —
    set once by inset: 0, never written again, never transitioned — and
    a state is nothing but how far that full card has slid up. Peek is
    a full sheet that slid down until only its handle and title show;
-   half is one that slid down by half of itself; full is one that has
-   not slid at all. The box clips whatever slid below its bottom edge,
+   half is one that slid down by half of itself; 3q (three quarters,
+   Lh 2026-09-16) by a quarter; full is one that has not slid at all. The box clips whatever slid below its bottom edge,
    so a sheet at any height is still a card: rounded top, a straight
    cut at the box's edge, its content scrolling inside.
 
@@ -28,7 +28,11 @@
    page. Many sheets stacked as the app's menu are the other system,
    .sheet-stack (stack.css): the same material, its own class and file.
 
-   <article class="card sheet sheet--half" data-sheet-states="peek half full">
+   <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
+   A tap on the handle TOGGLES the sheet between its own state and peek
+   (Lh 2026-09-16) — never a step-by-step climb; a drag snaps to any of
+   the listed states, and the state it lands on becomes the one a tap
+   returns to.
      <button class="sheet__handle" type="button" aria-label="…"></button>
      <div class="card__head"><h2 class="t-h2">…</h2>…</div>
      <div class="sheet__body">…controls, or small content cards…</div>
@@ -51,6 +55,7 @@
      retune it: .my-sheet { --sheet-peek: … } */
   --sheet-peek: calc(var(--card-pad) + var(--_handle) + 2 * var(--card-gap) + var(--tap));
   --sheet-half: 0.5;              /* a share of the sheet's own height */
+  --sheet-3q: 0.25;               /* three quarters showing: slid by a quarter */
   /* the sheet's own height, seen from inside it: the box it slides in is the
      size container (.step, .sheet-stage), so 100cqh is that box, less what
      the sheet gives up at its top (--_top) and bottom (--_lift). The sheet
@@ -81,6 +86,7 @@
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
+.sheet--3q { --_y: calc(var(--sheet-3q) * 100%); --_cover: calc(var(--sheet-3q) * var(--_box)); }
 .sheet--peek { --_y: calc(100% - var(--sheet-peek)); --_cover: calc(var(--_box) - var(--sheet-peek)); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
 

package/css/step.css

@@ -1,11 +1,11 @@
 /* ============================================================
    cardds/step.css — .step: one screen, one task.
-   What the member reads (a card), what the member does when the
+   What the member reads (words on the base — not a card, Lh 2026-09-16), what the member does when the
    step asks for it (a sheet, sheet.css), and the screen's one
    move (.action-bar, actions.css) OUTSIDE the step, below it.
 
    <section class="step">
-     <article class="card step__card">…the words…</article>           ← first
+     <article class="step__card">…the words…</article>                ← first
      <article class="card sheet sheet--half">…the controls…</article>  ← last, optional
    </section>
    <div class="action-bar">…</div>
@@ -59,10 +59,19 @@
    frame — the bar is fixed to the viewport wherever it sits. */
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
 
-/* the reading card: a plain card with a flex rule — it hugs its content,
-   and when the column runs out (a short phone, large text) it shrinks and
-   scrolls inside itself instead of pushing the bar or the sheet */
+/* the reading block: the words on the base — no frame, no area colour (it was
+   a .card until 2026-09-16; Lh: a step reads like a page, not a card in a
+   page). It keeps a card's inner rhythm (a head, --card-gap between things,
+   the tokens .card publishes for the head and .bleed) and the flex rule: it
+   hugs its content, and when the column runs out (a short phone, large text)
+   it shrinks and scrolls inside itself instead of pushing the bar or the sheet */
 .step__card {
+  --card-pad: 0rem;              /* published for .bleed: nothing to cancel */
+  --card-gap: var(--sp-4);
+  display: grid;
+  gap: var(--card-gap);
+  align-content: start;
+  color: var(--on-surface);
   flex: 0 1 auto;
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */

package/css/tokens.css

@@ -176,3 +176,4 @@
    ============================================================ */
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
+@property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }

package/dist/cardds.css

@@ -217,6 +217,7 @@
    ============================================================ */
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
+@property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }
 
 /* ---- css/palette.css — color settings — the file you tune ---- */
 /* ============================================================
@@ -1020,15 +1021,15 @@ button { font: inherit; cursor: pointer; }
 /* ---- css/sheet.css — sheet single: .sheet — one card as a bottom sheet, peek / half / full ---- */
 /* ============================================================
    cardds/sheet.css — sheet single: one card as a bottom sheet.
-   Three states: .sheet--peek · .sheet--half · .sheet--full
+   Four states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full
 
    A sheet is rigid material, exactly like a sheet in .sheet-stack--tap
    (stack.css): it is ALWAYS the full height of the box that holds it —
    set once by inset: 0, never written again, never transitioned — and
    a state is nothing but how far that full card has slid up. Peek is
    a full sheet that slid down until only its handle and title show;
-   half is one that slid down by half of itself; full is one that has
-   not slid at all. The box clips whatever slid below its bottom edge,
+   half is one that slid down by half of itself; 3q (three quarters,
+   Lh 2026-09-16) by a quarter; full is one that has not slid at all. The box clips whatever slid below its bottom edge,
    so a sheet at any height is still a card: rounded top, a straight
    cut at the box's edge, its content scrolling inside.
 
@@ -1048,7 +1049,11 @@ button { font: inherit; cursor: pointer; }
    page. Many sheets stacked as the app's menu are the other system,
    .sheet-stack (stack.css): the same material, its own class and file.
 
-   <article class="card sheet sheet--half" data-sheet-states="peek half full">
+   <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
+   A tap on the handle TOGGLES the sheet between its own state and peek
+   (Lh 2026-09-16) — never a step-by-step climb; a drag snaps to any of
+   the listed states, and the state it lands on becomes the one a tap
+   returns to.
      <button class="sheet__handle" type="button" aria-label="…"></button>
      <div class="card__head"><h2 class="t-h2">…</h2>…</div>
      <div class="sheet__body">…controls, or small content cards…</div>
@@ -1071,6 +1076,7 @@ button { font: inherit; cursor: pointer; }
      retune it: .my-sheet { --sheet-peek: … } */
   --sheet-peek: calc(var(--card-pad) + var(--_handle) + 2 * var(--card-gap) + var(--tap));
   --sheet-half: 0.5;              /* a share of the sheet's own height */
+  --sheet-3q: 0.25;               /* three quarters showing: slid by a quarter */
   /* the sheet's own height, seen from inside it: the box it slides in is the
      size container (.step, .sheet-stage), so 100cqh is that box, less what
      the sheet gives up at its top (--_top) and bottom (--_lift). The sheet
@@ -1101,6 +1107,7 @@ button { font: inherit; cursor: pointer; }
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
+.sheet--3q { --_y: calc(var(--sheet-3q) * 100%); --_cover: calc(var(--sheet-3q) * var(--_box)); }
 .sheet--peek { --_y: calc(100% - var(--sheet-peek)); --_cover: calc(var(--_box) - var(--sheet-peek)); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
 
@@ -1317,12 +1324,12 @@ button { font: inherit; cursor: pointer; }
 /* ---- css/step.css — .step: one screen, one task — card, optional sheet, bar outside ---- */
 /* ============================================================
    cardds/step.css — .step: one screen, one task.
-   What the member reads (a card), what the member does when the
+   What the member reads (words on the base — not a card, Lh 2026-09-16), what the member does when the
    step asks for it (a sheet, sheet.css), and the screen's one
    move (.action-bar, actions.css) OUTSIDE the step, below it.
 
    <section class="step">
-     <article class="card step__card">…the words…</article>           ← first
+     <article class="step__card">…the words…</article>                ← first
      <article class="card sheet sheet--half">…the controls…</article>  ← last, optional
    </section>
    <div class="action-bar">…</div>
@@ -1376,10 +1383,19 @@ button { font: inherit; cursor: pointer; }
    frame — the bar is fixed to the viewport wherever it sits. */
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
 
-/* the reading card: a plain card with a flex rule — it hugs its content,
-   and when the column runs out (a short phone, large text) it shrinks and
-   scrolls inside itself instead of pushing the bar or the sheet */
+/* the reading block: the words on the base — no frame, no area colour (it was
+   a .card until 2026-09-16; Lh: a step reads like a page, not a card in a
+   page). It keeps a card's inner rhythm (a head, --card-gap between things,
+   the tokens .card publishes for the head and .bleed) and the flex rule: it
+   hugs its content, and when the column runs out (a short phone, large text)
+   it shrinks and scrolls inside itself instead of pushing the bar or the sheet */
 .step__card {
+  --card-pad: 0rem;              /* published for .bleed: nothing to cancel */
+  --card-gap: var(--sp-4);
+  display: grid;
+  gap: var(--card-gap);
+  align-content: start;
+  color: var(--on-surface);
   flex: 0 1 auto;
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */
@@ -2834,49 +2850,94 @@ button { font: inherit; cursor: pointer; }
 /* ---- css/layover.css — ask drawer, popover menu, banner, float bar, callout, deck ---- */
 /* ============================================================
    cardds/layover.css — cards that lay OVER other content:
-   ask drawer · popover menu · expanding banner · float bar ·
+   Modal (ask) · popover menu · expanding banner · float bar ·
    callout · swipe deck. The sheet (peek / half / full / page)
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
-/* ---- ask drawer: the content card lifts, a dark drawer asks ----
+/* ---- ask: the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
    <div class="sheet-stage sheet-stage--ask">
-     <article class="card lift">…page content…</article>
-     <div class="drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
-       <div class="btn-trio"><button class="icon-btn">×</button><span class="btn-trio__dots"></span><button class="icon-btn icon-btn--invert">?</button><span class="btn-trio__dots"></span><button class="icon-btn">✓</button></div>
-     </div></div> */
+     <article class="card modal">
+       <div class="modal__lift">…the card's content (a head, rows, a timeline)…</div>
+       <div class="modal__drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
+         <div class="btn-trio">…</div>
+       </div>
+     </article>
+   </div>
+   .modal is the card — no border (the shadow is its edge on the scrim);
+   .modal__lift the light part that holds the thing being asked about (it
+   scrolls when tall); .modal__drawer the dark end that asks. The ground is
+   the page under a scrim (like --dim). Two beats (2 × --motion-sheet) when
+   the stage appears, and the same two backwards when it closes:
+     1. the card drops in from above the stage to the screen's centre — its
+        drawer still inside it, height 0: nothing of the ask shows yet
+     2. the drawer comes out of the card's bottom edge while the lift moves
+        up, both at once: the card grows from its centre, which never moves
+        (the stage centres it; a growing card keeps its middle where it is)
+   Closing: a click on any button in the drawer plays the same animations in
+   reverse (cardds.js: Animation.reverse() on each — nothing duplicated), then
+   fires "cardds:modal" on the .sheet-stage (bubbles, detail.answer from the
+   button's data-answer) for the app to remove the stage.
+   Reduced motion: the finished state, no beats; closing fires at once. */
 .sheet-stage--ask {
   --drawer-h: 14rem;
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
+  display: grid;
+  align-content: center;          /* the card at the screen's centre — and kept there as it grows */
+  padding-inline: var(--screen-pad);
 }
-.lift {
-  position: absolute;
-  inset: 0 0 var(--drawer-h) 0;
-  border: 0;
-  border-radius: 0 0 var(--r-card) var(--r-card);
-  overflow: hidden;
-  overscroll-behavior: contain;
+.sheet-stage--ask::after { content: ""; position: absolute; inset: 0; background: var(--scrim); } /* the page dimmed */
+.sheet-stage--ask > .sheet-stage__bg { filter: blur(var(--sp-2)); }
+.modal {
+  position: relative;
+  z-index: 1;                     /* over the scrim */
+  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) — a % here would be of the grid area, which is the card itself */
+  padding: 0;                     /* the parts pad themselves */
+  border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: clip;
   box-shadow: var(--shadow-sheet);
+}
+.modal__lift {
+  padding: var(--card-pad);
+  display: grid;
+  gap: var(--card-gap);
   align-content: start;
+  min-height: 0;
+  overflow-y: auto;               /* tall content scrolls inside; the drawer stays */
+  overscroll-behavior: contain;
 }
-.drawer {
-  position: absolute;
-  inset-inline: 0;
-  bottom: 0;
+.modal__drawer {
   height: var(--drawer-h);
+  box-sizing: border-box;
   padding: var(--sp-5);
+  overflow: clip;
   display: grid;
   align-content: center;
   justify-items: center;
   gap: var(--sp-1);
   text-align: center;
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
-.drawer .t-caption { opacity: 0.7; }
-.drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
-.drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+.modal__drawer .t-caption { opacity: 0.7; }
+.modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
+.modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+@media (prefers-reduced-motion: no-preference) {
+  .modal { animation: modal-drop calc(2 * var(--motion-sheet)) ease both; }
+  .modal__drawer { animation: modal-open calc(2 * var(--motion-sheet)) ease both; }
+  @keyframes modal-drop {
+    0%        { translate: 0 -100cqh; }   /* above the stage */
+    50%, 100% { translate: 0 0; }         /* 1. at the centre — and it stays: beat 2 is the drawer's */
+  }
+  @keyframes modal-open {
+    0%, 50%   { height: 0; padding-block: 0; }                       /* inside the card */
+    100%      { height: var(--drawer-h); padding-block: var(--sp-5); } /* 2. out below, the lift up, together */
+  }
+}
+
 .btn-trio { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
 .btn-trio__dots {
   width: var(--sp-5);

package/dist/sheets/Drawer.d.ts

@@ -1,7 +1,11 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-export interface LiftProps extends ComponentPropsWithoutRef<'article'> {
+export interface ModalProps extends ComponentPropsWithoutRef<'article'> {
 }
-/** Lift — the page content card lifted above a Drawer on an `SheetStage ask`. */
+/** Modal — the ask: ONE card at the centre of a `SheetStage ask`, two parts — a `Lift` (the thing being asked about, light, scrolls when tall) and a `Drawer` (the dark end that asks). No border. Two beats on appearing: drops in from above to the centre · the drawer comes out below while the lift moves up. A click on any button in the Drawer plays them backwards and fires `cardds:modal` on the stage (`detail.answer` = the button's `data-answer`) for the app to remove it. */
+export declare function Modal({ className, ...rest }: ModalProps): import("react").JSX.Element;
+export interface LiftProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Lift — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
 export declare function Lift({ className, ...rest }: LiftProps): import("react").JSX.Element;
 export interface DrawerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /** the question */
@@ -9,7 +13,7 @@ export interface DrawerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'titl
     /** the fine print under it */
     caption?: ReactNode;
 }
-/** Drawer — the dark strip at the bottom of an ask stage: a question, a caption, a BtnTrio (no · ask · yes). */
+/** Drawer — the dark end of a `Modal`: the question, its fine print, and a `BtnTrio` (or two buttons); give each button a `data-answer` — any of them closes the modal. */
 export declare function Drawer({ title, caption, className, children, ...rest }: DrawerProps): import("react").JSX.Element;
 export interface BtnTrioProps extends ComponentPropsWithoutRef<'div'> {
 }

package/dist/sheets/Drawer.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, Fragment } from 'react';
 import { cx } from '../cx.js';
-/** Lift — the page content card lifted above a Drawer on an `SheetStage ask`. */
+/** Modal — the ask: ONE card at the centre of a `SheetStage ask`, two parts — a `Lift` (the thing being asked about, light, scrolls when tall) and a `Drawer` (the dark end that asks). No border. Two beats on appearing: drops in from above to the centre · the drawer comes out below while the lift moves up. A click on any button in the Drawer plays them backwards and fires `cardds:modal` on the stage (`detail.answer` = the button's `data-answer`) for the app to remove it. */
+export function Modal({ className, ...rest }) {
+    return _jsx("article", { className: cx('card modal', className), ...rest });
+}
+/** Lift — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
 export function Lift({ className, ...rest }) {
-    return _jsx("article", { className: cx('card lift', className), ...rest });
+    return _jsx("div", { className: cx('modal__lift', className), ...rest });
 }
-/** Drawer — the dark strip at the bottom of an ask stage: a question, a caption, a BtnTrio (no · ask · yes). */
+/** Drawer — the dark end of a `Modal`: the question, its fine print, and a `BtnTrio` (or two buttons); give each button a `data-answer` — any of them closes the modal. */
 export function Drawer({ title, caption, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('drawer', className), ...rest, children: [_jsx("h2", { className: "t-h2", children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
+    return (_jsxs("div", { className: cx('modal__drawer', className), ...rest, children: [_jsx("h2", { className: "t-h2", children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
 }
 /** BtnTrio — three round buttons with dotted connectors between them (× · ? · ✓); the middle one inverted. */
 export function BtnTrio({ className, children, ...rest }) {

package/dist/sheets/Sheet.d.ts

@@ -1,13 +1,13 @@
 import type { ComponentPropsWithoutRef } from 'react';
-export type SheetState = 'peek' | 'half' | 'full';
+export type SheetState = 'peek' | 'half' | '3q' | 'full';
 export interface SheetProps extends ComponentPropsWithoutRef<'article'> {
-    /** how far the sheet slid: `peek` (handle + title row) · `half` (default) · `full` (its top edge at the top bar) — a class, never a height */
+    /** how far the sheet slid: `peek` (handle + title row) · `half` (default) · `3q` (three quarters showing) · `full` (its top edge at the top bar) — a class, never a height. A tap on the handle toggles between this state and peek; a drag snaps to any of `states` */
     state?: SheetState;
     /** floats above a footnote strip on a dim stage (bottom corners and border back) */
     raised?: boolean;
     /** the grab handle (tap / drag / keyboard via cardds.js); `false` for a sheet with no handle, a string sets its accessible name */
     handle?: boolean | string;
-    /** which states the handle cycles through, e.g. "peek half full" (default all three) */
+    /** which states a drag snaps to, e.g. "peek half full" (default all four: peek half 3q full) */
     states?: string;
 }
 /**

package/dist/sheets/SheetStage.d.ts

@@ -6,7 +6,7 @@ export interface SheetStageProps extends ComponentPropsWithoutRef<'div'> {
     hero?: ReactNode;
     /** blur and darken the background (the dim page sheet) */
     dim?: boolean;
-    /** the ask drawer stage: a Lift card over a dark Drawer */
+    /** the ask stage: the page under a scrim, one Modal (Lift + Drawer) at the centre */
     ask?: boolean;
     /** a footnote strip on the scrim under a raised sheet */
     foot?: ReactNode;

package/dist/sheets/Step.d.ts

@@ -2,14 +2,13 @@ import type { ComponentPropsWithoutRef } from 'react';
 export interface StepProps extends ComponentPropsWithoutRef<'section'> {
 }
 /**
- * Step — one screen, one task. Children: a StepCard first (what the member READS), an optional Sheet last
+ * Step — one screen, one task. Children: a StepCard first (what the member READS — words on the base, not a card), an optional Sheet last
  * (what the member DOES); the ActionBar goes OUTSIDE, after the Step. It fills a `Screen fill` between the top bar
  * and the bar's room, bleeds to the screen's edges (the sheet is full-width), and follows its TopBar/AppBar directly.
  * Reads → StepCard only. Acts → StepCard + Sheet. Never hand-lay a step, never write a sheet height.
  */
 export declare function Step({ className, ...rest }: StepProps): import("react").JSX.Element;
 export interface StepCardProps extends ComponentPropsWithoutRef<'article'> {
-    tone?: 1 | 2 | 3;
 }
-/** StepCard — the reading card of a Step: a normal Card (CardHead · content) that hugs its words and scrolls inside itself when the column runs out. */
-export declare function StepCard({ tone, className, ...rest }: StepCardProps): import("react").JSX.Element;
+/** StepCard — the reading block of a Step: the words on the base, no frame, no area colour (a CardHead · content, with a card's rhythm); it hugs its words and scrolls inside itself when the column runs out. */
+export declare function StepCard({ className, ...rest }: StepCardProps): import("react").JSX.Element;

package/dist/sheets/Step.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /**
- * Step — one screen, one task. Children: a StepCard first (what the member READS), an optional Sheet last
+ * Step — one screen, one task. Children: a StepCard first (what the member READS — words on the base, not a card), an optional Sheet last
  * (what the member DOES); the ActionBar goes OUTSIDE, after the Step. It fills a `Screen fill` between the top bar
  * and the bar's room, bleeds to the screen's edges (the sheet is full-width), and follows its TopBar/AppBar directly.
  * Reads → StepCard only. Acts → StepCard + Sheet. Never hand-lay a step, never write a sheet height.
@@ -9,7 +9,7 @@ import { cx } from '../cx.js';
 export function Step({ className, ...rest }) {
     return _jsx("section", { className: cx('step', className), ...rest });
 }
-/** StepCard — the reading card of a Step: a normal Card (CardHead · content) that hugs its words and scrolls inside itself when the column runs out. */
-export function StepCard({ tone, className, ...rest }) {
-    return _jsx("article", { className: cx('card step__card', tone && tone !== 1 && `card--${tone}`, className), ...rest });
+/** StepCard — the reading block of a Step: the words on the base, no frame, no area colour (a CardHead · content, with a card's rhythm); it hugs its words and scrolls inside itself when the column runs out. */
+export function StepCard({ className, ...rest }) {
+    return _jsx("article", { className: cx('step__card', className), ...rest });
 }

package/package.json

@@ -1,18 +1,16 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "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), app/ is the Commons Time Bank PWA built from them, demo/ the CSS spec pages the acceptance tests (tests/) drive.",
+  "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.",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/everysundays/cardds.git"
   },
   "scripts": {
-    "dev": "vite --config app/vite.config.ts",
+    "dev": "vite --config gallery/vite.config.ts",
     "build": "node scripts/build-icons.mjs && tsc -p tsconfig.json && node scripts/flatten-css.mjs",
-    "build:app": "node scripts/build-icons.mjs && vite build --config app/vite.config.ts",
-    "preview:app": "vite preview --config app/vite.config.ts",
     "test": "playwright test",
     "validate:inbox": "node scripts/validate-inbox.mjs",
     "mcp:verify": "cd mcp-server && npm run verify && npm run verify:http",