@usableapp/cardds 0.2.2 → 0.3.0

package/cardds.js

@@ -1,337 +1,10 @@
-/* cardds.js — optional behaviour helpers (the CSS works without it).
-   Dropdown: clicking a .menu__item marks it current, copies its label into the
-   .dropdown__label of the enclosing .dropdown, closes the popover and fires
-   "change" (detail.value) on the .dropdown. */
-document.addEventListener('click', e => {
-  const item = e.target.closest('.menu__item');
-  if (!item) return;
-  const menu = item.closest('.menu');
-  const dd = menu && menu.closest('.dropdown');
-  if (!menu.classList.contains('menu--actions')) { /* an actions menu holds no value: nothing stays current */
-    menu.querySelectorAll('.menu__item').forEach(i => i.removeAttribute('aria-current'));
-    item.setAttribute('aria-current', 'true');
-  }
-  if (dd) {
-    const label = dd.querySelector('.dropdown__label');
-    const value = item.dataset.value ?? item.textContent.trim();
-    if (label) label.textContent = item.dataset.label ?? item.textContent.trim();
-    dd.dataset.value = value;
-    dd.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value } }));
-  }
-  if (menu.matches(':popover-open')) menu.hidePopover();
-});
+/* cardds.js — the little that is not (yet) a component's own code. Nothing here ties one component to another. */
 
-/* Pin (.pin, choice.css): one digit per cell. Typing a digit moves focus to
-   the next cell; Backspace in an empty cell moves it back (and clears that
-   one); a paste of the whole code fills the cells from the one it landed in.
-   Only digits stay. Delegated, so a Pin rendered by any host — the React
-   adapter, plain HTML — gets it; the cells stay ordinary inputs. */
-/* Postcard (.postcard, media.css): a tap on either face turns the card over.
-   Delegated; the faces are buttons, so Enter and Space arrive as clicks. */
-document.addEventListener('click', e => {
-  const face = e.target instanceof Element && e.target.closest('.postcard__face');
-  if (!face) return;
-  const card = face.closest('.postcard');
-  if (!card) return;
-  const flipped = card.classList.toggle('is-flipped');
-  card.dispatchEvent(new CustomEvent('cardds:flip', { bubbles: true, detail: { flipped } }));
-});
-
-/* Slider (.slider, choice.css): the knob's place along the rail, published on
-   the .slider as --slider-at (0..1) so the .slider__glyph can ride the knob.
-   Delegated, and run once for every slider already on the page. */
-function carddsSliderAt(range) {
-  const min = Number(range.min) || 0, max = Number(range.max) || 100;
-  const at = max > min ? (Number(range.value) - min) / (max - min) : 0;
-  range.closest('.slider')?.style.setProperty('--slider-at', String(Math.min(1, Math.max(0, at))));
-}
-document.addEventListener('input', e => {
-  if (e.target instanceof HTMLInputElement && e.target.classList.contains('slider__range')) carddsSliderAt(e.target);
-});
-document.addEventListener('input', e => {
-  const cell = e.target;
-  if (!(cell instanceof HTMLInputElement) || !cell.classList.contains('pin__cell')) return;
-  const cells = [...cell.closest('.pin').querySelectorAll('.pin__cell')];
-  const i = cells.indexOf(cell);
-  const digits = cell.value.replace(/\D/g, '');
-  // a paste (or a typed run) spills over the cells that follow
-  digits.split('').forEach((d, k) => { if (cells[i + k]) cells[i + k].value = d; });
-  if (!digits) cell.value = '';
-  else {
-    const next = cells[Math.min(i + digits.length, cells.length - 1)];
-    if (next !== cell) next.focus();
-    else if (cell.value !== digits.slice(-1)) cell.value = digits.slice(-1);
-  }
-  carddsPinPublish(cells);
-});
-/* "cardds:pin" (bubbles, detail.code = the digits so far, detail.complete)
-   after every change — the one thing a host listens to; the React adapter's
-   Pin turns it into onChange */
-function carddsPinPublish(cells) {
-  const code = cells.map(c => c.value).join('');
-  cells[0].closest('.pin').dispatchEvent(new CustomEvent('cardds:pin', { bubbles: true, detail: { code, complete: code.length === cells.length } }));
-}
-/* a cell holds one digit; typing into a full one replaces it — select the
-   digit before the insert lands (a paste of a whole code still spills over
-   the cells that follow, above). No maxlength on the cells: the browser
-   would truncate a pasted code before this ever saw it. */
-document.addEventListener('beforeinput', e => {
-  const cell = e.target;
-  if (!(cell instanceof HTMLInputElement) || !cell.classList.contains('pin__cell')) return;
-  if (e.inputType === 'insertText' && cell.value && cell.selectionStart === cell.selectionEnd) cell.select();
-});
-document.addEventListener('focusin', e => {
-  const cell = e.target;
-  if (cell instanceof HTMLInputElement && cell.classList.contains('pin__cell') && cell.value) cell.select();
-});
-document.addEventListener('keydown', e => {
-  const cell = e.target;
-  if (!(cell instanceof HTMLInputElement) || !cell.classList.contains('pin__cell')) return;
-  const cells = [...cell.closest('.pin').querySelectorAll('.pin__cell')];
-  const i = cells.indexOf(cell);
-  if (e.key === 'Backspace' && !cell.value && i > 0) {
-    e.preventDefault();
-    cells[i - 1].value = '';
-    cells[i - 1].focus();
-    carddsPinPublish(cells);
-  } else if (e.key === 'ArrowLeft' && i > 0) { e.preventDefault(); cells[i - 1].focus(); }
-  else if (e.key === 'ArrowRight' && i < cells.length - 1) { e.preventDefault(); cells[i + 1].focus(); }
-});
-
-/* Sheet stack (.sheet-stack--tap, stack.css): tap a peeked sheet to open it, its back
-   button returns it. Sheets are rigid material — they move in, move out, or
-   get covered, never morph — so the only animated property is translate;
-   see the --tap block in stack.css for the whole model.
-
-   This only ever toggles classes. Every card's resting slot, offset and
-   paint order is declared in CSS, so a stack still renders correctly with
-   this file absent — it just won't open. Works for any number of stacks on
-   a page, with no ids or per-page wiring. */
-const CARDDS_STACK_PHASE = 380; /* ms before the before-pack un-tucks on
-  close, so the after-pack is clear first */
-
-/* the stack's sheets, in slot order. Normally the stack's direct children;
-   a host that wraps each child in one box of its own (a design tool's
-   per-component frame, a router's element) is tolerated: the first .card
-   inside each child then counts. Never deeper — a card inside a sheet's
-   content is content, not a sheet. */
-function carddsStackCards(stack) {
-  return [...stack.children]
-    .filter(c => !c.classList.contains('sheet-stack__base')) // the base is what shows behind the sheets, never a sheet (a Card in it is content)
-    .map(c => c.classList.contains('card') ? c : c.querySelector(':scope > .card')).filter(Boolean);
-}
-
-document.addEventListener('click', e => {
-  const stack = e.target.closest('.sheet-stack--tap');
-  if (!stack) return;
-  const cards = carddsStackCards(stack);
-  // the sheet this tap landed in: the member the target sits in, not the
-  // nearest .card (a content card inside an open sheet must not count)
-  const card = cards.find(c => c.contains(e.target));
-  if (e.target.closest('.card__back')) { carddsCloseStack(stack, card); return; }
-  if (card && !cards.some(c => c.classList.contains('is-open'))) {
-    carddsOpenStack(stack, card);
-  }
-});
-
-function carddsOpenStack(stack, card) {
-  const cards = carddsStackCards(stack);
-  const idx = cards.indexOf(card);
-  cards.forEach((c, i) => {
-    c.classList.remove('is-before', 'is-after');
-    c.style.setProperty('--stagger', 0); // only is-before overrides this
-    if (i < idx) {
-      // already behind the tapped card — tuck under the next card's strip,
-      // nearest one first, and let the opening card cover them
-      c.style.setProperty('--stagger', idx - 1 - i);
-      c.classList.add('is-before');
-    } else if (i > idx) {
-      c.classList.add('is-after'); // in front of it, so these must leave
-    }
-  });
-  card.classList.add('is-open');
-}
-
-/* close: the sheet whose back button was tapped, read from the tap itself
-   (a page with several stacks, or a re-render mid-animation, can leave a
-   stale .is-open elsewhere); without one, the stack's open sheet */
-function carddsCloseStack(stack, card) {
-  const cards = carddsStackCards(stack);
-  card = card && cards.includes(card) ? card : cards.find(c => c.classList.contains('is-open'));
-  if (!card) return;
-  const idx = cards.indexOf(card);
-  // phase 1: the after-pack moves back in from below while the opened card
-  // drops into its own slot, passing down over the still-covered before-pack
-  cards.filter((c, i) => i > idx).forEach(c => c.classList.remove('is-after'));
-  card.classList.remove('is-open'); // back button starts its own crop-out now
-  // phase 2: then the before-pack slides back up out from behind it, same
-  // order it tucked away — nearest to the card first
-  const before = cards.filter((c, i) => i < idx);
-  setTimeout(() => before.forEach(c => c.classList.remove('is-before')), CARDDS_STACK_PHASE);
-}
-
-/* ---- sheet (.sheet, sheet.css): peek / half / full ----
-   A sheet is rigid material, like a sheet in the stack (stack.css) — it never changes size, a
-   state is only how far it slid — so this, like the stack code, only ever
-   toggles classes and two custom properties. The CSS renders every state
-   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 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
-     geometry is read, once per release: its height, and the two state
-     tokens — registered in tokens.css so they read back resolved
-   - focus inside a peeked sheet raises it to half (or full, if the sheet has
-     no half) and reveals the control — the sheet's own scroll-padding
-     already knows how much of it slid under the box's edge
-   - the visual viewport's height is published on :root as --kb, the height
-     the on-screen keyboard covers, so the bar (actions.css) and the step
-     (step.css) can stay above it on iOS
-   - "cardds:sheet" (bubbles, detail.state) after every state change
-
-   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', '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) {
-  const list = (sheet.dataset.sheetStates || '').split(/\s+/).filter(s => CARDDS_SHEET_STATES.includes(s));
-  return list.length ? list : CARDDS_SHEET_STATES;
-}
-
-function carddsSheetState(sheet) {
-  if (sheet.classList.contains('sheet--away')) return 'away'; // a called sheet not on the screen — a state to set, never one to snap or tap to
-  return CARDDS_SHEET_STATES.find(s => sheet.classList.contains('sheet--' + s)) ?? 'half'; // the CSS default
-}
-
-function carddsSheetSet(sheet, state) {
-  if (state !== 'away' && !CARDDS_SHEET_STATES.includes(state)) return;
-  const was = carddsSheetState(sheet);
-  [...CARDDS_SHEET_STATES, 'away'].forEach(s => sheet.classList.toggle('sheet--' + s, s === state));
-  sheet.inert = state === 'away';
-  /* 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 rests = s => s !== 'peek' && s !== 'away';
-  const home = rests(state) ? state : rests(was) ? was : null;
-  if (home) sheet.dataset.sheetHome = home;
-  if (was !== state) sheet.dispatchEvent(new CustomEvent('cardds:sheet', { bubbles: true, detail: { state } }));
-}
-
-/* the click that follows a drag on the same handle is not a tap — the drag
-   already chose the state. Cleared on the next frame, so a drag that ends
-   without a click (pointercancel) cannot eat a later, real one. */
-let carddsSheetSkipClick = null;
-
-document.addEventListener('click', e => {
-  const handle = e.target.closest('.sheet__handle');
-  if (!handle) return;
-  if (handle === carddsSheetSkipClick) { carddsSheetSkipClick = null; return; }
-  const sheet = handle.closest('.sheet');
-  if (!sheet) return;
-  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. */
-function carddsSheetY(sheet) {
-  const box = sheet.offsetParent ?? sheet.parentElement;
-  return sheet.getBoundingClientRect().top - (box.getBoundingClientRect().top + box.clientTop + sheet.offsetTop);
-}
-
-/* drag: where each state rests, in px from the sheet's top at full */
-function carddsSheetStops(sheet) {
-  const cs = getComputedStyle(sheet);
-  const height = sheet.getBoundingClientRect().height;
-  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
-  };
-}
-
-let carddsSheetDrag = null;
-
-document.addEventListener('pointerdown', e => {
-  const handle = e.target.closest('.sheet__handle');
-  if (!handle || !e.isPrimary || e.button !== 0) return;
-  const sheet = handle.closest('.sheet');
-  if (!sheet) return;
-  const stops = carddsSheetStops(sheet);
-  const states = carddsSheetStates(sheet);
-  const y = carddsSheetY(sheet); // where it is now — mid-slide too, so a grab never jumps
-  carddsSheetDrag = {
-    sheet, handle, states, stops,
-    startY: e.clientY,
-    y0: y,
-    y,
-    min: Math.min(...states.map(s => stops[s])),
-    max: Math.max(...states.map(s => stops[s])),
-    tap: CARDDS_SHEET_TAP_REM * parseFloat(getComputedStyle(document.documentElement).fontSize),
-    moved: false,
-  };
-  handle.setPointerCapture(e.pointerId);
-});
-
-document.addEventListener('pointermove', e => {
-  const d = carddsSheetDrag;
-  if (!d || !e.isPrimary) return;
-  const dy = e.clientY - d.startY;
-  if (!d.moved) {
-    if (Math.abs(dy) < d.tap) return;
-    d.moved = true;
-    d.sheet.classList.add('is-dragging');
-  }
-  d.y = Math.min(Math.max(d.y0 + dy, d.min), d.max); // never above full, never below the lowest state
-  d.sheet.style.setProperty('--_drag', (d.y - d.y0) + 'px');
-});
-
-function carddsSheetRelease() {
-  const d = carddsSheetDrag;
-  if (!d) return;
-  carddsSheetDrag = null;
-  d.sheet.classList.remove('is-dragging');
-  if (!d.moved) return; // a tap: the click that follows cycles the state
-  d.sheet.style.removeProperty('--_drag');
-  const nearest = d.states.reduce((a, b) => Math.abs(d.stops[b] - d.y) < Math.abs(d.stops[a] - d.y) ? b : a);
-  carddsSheetSet(d.sheet, nearest); // same state: --_drag is gone, so it eases back on its own
-  carddsSheetSkipClick = d.handle;
-  requestAnimationFrame(() => { carddsSheetSkipClick = null; });
-}
-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 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 body = sheet.querySelector(':scope > .sheet__body');
-  if (body) body.scrollTop = 0;
-  carddsSheetReveal(e.target, carddsSheetHome(sheet));
-});
+/* ---- the sheet is a React component now (src/sheets/Sheet.tsx, 2026-09-21) ----
+   cardds gives components; the app owns their state and wires them to each other. The handle's tap and
+   drag, the focus raise and the keyboard reveal are the Sheet's own behaviour and live in it; what one
+   component does to another — a button calling a sheet, a bar standing down beside one — is the app's.
+   What stays here is the environment: --kb. */
 
 /* --kb: the height of the viewport an on-screen keyboard covers. iOS keeps
    the layout viewport as it was and shrinks only the visual one, so a fixed
@@ -344,51 +17,12 @@ if (window.visualViewport) {
   const publish = () => {
     const covered = vv.scale > 1.01 ? 0 : Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop));
     document.documentElement.style.setProperty('--kb', covered + 'px');
-    /* the keyboard just moved the cut: a sheet's box shrank with the step (or
-       the viewport did), and the control being typed into may now sit under
-       it. Half was enough before the keyboard; it may not be now — raise the
-       sheet as far as its states go and reveal the control. This is the one
-       listener that reads layout, and it reads it after the change it made. */
-    carddsSheetReveal(document.activeElement);
   };
   vv.addEventListener('resize', publish);
   vv.addEventListener('scroll', publish);
   publish();
 }
 
-/* bring a control in a sheet into the visible part — the part of its body
-   between the pinned head and the cut (the box's bottom edge, or the keyboard
-   above it). The sheet goes to the lowest of its states, from the current one
-   (or `atLeast`) upward, whose visible body has room for the control; if none
-   has, to its highest; then the body scrolls the control into view. An app
-   that moves the cut itself (its own keyboard handling, a bar it shows late)
-   calls this with the control; the keyboard listener and the focus raise call
-   it. It reads layout — after the change that moved the cut — and reasons
-   from the resting offsets, so it is right mid-slide too. */
-function carddsSheetReveal(el, atLeast) {
-  const sheet = el?.closest?.('.sheet');
-  if (!sheet || el.closest('.sheet__handle')) return;
-  el = el.closest('.field') ?? el; // the control's box, not the bare input inside a .field
-  const states = carddsSheetStates(sheet);
-  const from = Math.max(states.indexOf(carddsSheetState(sheet)), states.indexOf(atLeast), 0);
-  const stops = carddsSheetStops(sheet);
-  const sheetRect = sheet.getBoundingClientRect();
-  const restTop = sheetRect.top - carddsSheetY(sheet); // where the sheet's top sits at full
-  const bodyTop = (sheet.querySelector(':scope > .sheet__body') ?? sheet).getBoundingClientRect().top - sheetRect.top; // the scrollport, from the sheet's top
-  const box = sheet.parentElement.getBoundingClientRect(); // the box that clips it: .step or .sheet-stage
-  const vv = window.visualViewport;
-  const cut = vv ? Math.min(box.bottom, vv.offsetTop + vv.height) : box.bottom;
-  const foot = sheet.querySelector(':scope > .card__foot'); // the sheet's own button stands on the cut (sheet.css): the control has to clear it too
-  const button = foot?.firstElementChild; // the foot is a layer as tall as the sheet: what the control must clear is its strip
-  const need = (el.closest('.field') ?? el).getBoundingClientRect().height + (button ? box.bottom - button.getBoundingClientRect().top : 0); // from the button's top to the box's bottom edge, where it stands
-  let to = states[states.length - 1];
-  for (let i = from; i < states.length; i++) {
-    if (cut - (restTop + stops[states[i]] + bodyTop) >= need) { to = states[i]; break; }
-  }
-  carddsSheetSet(sheet, to);
-  el.scrollIntoView({ block: 'nearest' });
-}
-
 /* .bleed track: .is-scrolling while it scrolls (and a beat after), so its
    hairline scrollbar shows only while hovered or moving (card.css). */
 const carddsScrollTimers = new WeakMap();
@@ -399,80 +33,3 @@ 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 } }));
-  });
-});
-
-/* the two calls an app makes are on window: a bundler loads this file as a module, where a top-level
-   function is not a global — and README has always said "call carddsSheetSet(sheet, state)". */
-if (typeof window !== 'undefined') Object.assign(window, { carddsSheetSet, carddsSheetReveal });
-
-/* ---- called sheets (sheet.css): a button in a step's words names a sheet with aria-controls ----
-   (The base offers ways in — sign in · new phone · join — each sheet holds that way's whole form and
-   its own submit on its foot.) A tap on it sends every other sheet of that step away and raises its own to the top state it snaps
-   to (full) — from away, and from peek alike. The step then publishes --sheet-room, the strip the
-   sheet keeps at peek, so the words can scroll their buttons clear of it (step.css); the buttons say
-   aria-expanded. */
-function carddsSheetCall(sheet) {
-  const step = sheet.parentElement;
-  step.querySelectorAll(':scope > .sheet').forEach(s => { if (s !== sheet && carddsSheetState(s) !== 'away') carddsSheetSet(s, 'away'); });
-  const states = carddsSheetStates(sheet);
-  const top = states.includes('full') ? 'full' : states[states.length - 1];
-  const was = carddsSheetState(sheet);
-  if (was !== top) carddsSheetSet(sheet, top);
-  if (was === 'away') sheet.querySelector(':scope > .sheet__handle')?.focus({ preventScroll: true });
-}
-function carddsStepSync(step) {
-  const callers = [...step.querySelectorAll('[aria-controls]')].filter(b => document.getElementById(b.getAttribute('aria-controls'))?.matches('.step > .sheet'));
-  if (!callers.length) return; // a plain step: one sheet, nothing calls it, nothing to publish
-  const on = [...step.querySelectorAll(':scope > .sheet')].find(s => carddsSheetState(s) !== 'away');
-  if (on) step.style.setProperty('--sheet-room', getComputedStyle(on).getPropertyValue('--sheet-peek')); // registered: reads back in px
-  else step.style.removeProperty('--sheet-room');
-  callers.forEach(b => b.setAttribute('aria-expanded', String(carddsSheetState(document.getElementById(b.getAttribute('aria-controls'))) !== 'away')));
-}
-document.addEventListener('click', e => {
-  const caller = e.target.closest('[aria-controls]');
-  const sheet = caller && document.getElementById(caller.getAttribute('aria-controls'));
-  if (sheet && sheet.matches('.step > .sheet')) carddsSheetCall(sheet);
-});
-document.addEventListener('cardds:sheet', e => { const step = e.target.closest?.('.step'); if (step) carddsStepSync(step); });
-
-/* ---- bar guard: a bar is the base's, never in front of a sheet (actions.css, Lh 2026-09-20) ----
-   A sheet on the screen covers the bar and CSS takes the pointer away; `inert` takes the keyboard and
-   the accessibility tree too. Re-checked when a sheet changes state and when the page changes. */
-function carddsPagerGuard() {
-  document.querySelectorAll('.action-bar').forEach((bar) => {
-    const host = bar.parentElement;
-    bar.inert = !!(host && host.querySelector('.step > .sheet:not(.sheet--away)'));
-  });
-}
-if (typeof document !== 'undefined') {
-  document.addEventListener('cardds:sheet', carddsPagerGuard);
-  const start = () => {
-    carddsPagerGuard();
-    let queued = false;
-    new MutationObserver(() => {
-      if (queued) return;
-      queued = true;
-      requestAnimationFrame(() => { queued = false; carddsPagerGuard(); });
-    }).observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });
-  };
-  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start); else start();
-}

package/css/actions.css

@@ -239,14 +239,9 @@
      <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
    </div>   — or the same two in an .action-bar__tier--pager under a control  */
 .action-bar--pager { align-items: center; }
-/* The bar belongs to the BASE (Lh, 2026-09-20): it is the move of a page of words — a pager turning
-   them, or one wide button. It is never in front of a sheet: a sheet that is on the screen covers it
-   (step.css, "layers"), a peeking one included, and the button that finishes a sheet is the sheet's own
-   foot (sheet.css). So a pager never works beside a sheet — that screen has work that cannot be walked
-   past — and neither does any other bar: while a sheet is on (only .sheet--away, a sheet not called yet,
-   is not), the bar takes no pointer here and cardds.js makes it inert, so the keyboard cannot reach what
-   the eye cannot see. */
-:has(.step > .sheet:not(.sheet--away)) > .action-bar { pointer-events: none; }
+/* The bar belongs to the BASE: the move of a page of words — a pager turning them, or one wide button. A screen
+   with a sheet finishes on the sheet's own foot instead (sheet.css). Guidance for composing, not a rule the
+   CSS enforces: a component never changes because another one is there. */
 /* the page dots: under the card in a .screen__centre group; tight gaps */
 .pager__at { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--sp-1); }
 .pager__at > * {

package/css/card.css

@@ -6,8 +6,8 @@
 .card {
   --card-bg: var(--card-1-bg);   /* the slot, readable by children (avatar rings, fold) */
   --card-ink: var(--card-1-ink);
-  --card-pad: var(--sp-5);       /* published so .bleed can cancel it exactly */
-  --card-gap: var(--sp-4);       /* published so a sheet's peek strip (sheet.css) is exact */
+  --card-pad: var(--card-pad-rest);       /* published so .bleed can cancel it exactly */
+  --card-gap: var(--card-gap-rest);       /* published so a sheet's peek strip (sheet.css) is exact */
   background: var(--card-bg);
   color: var(--card-ink);
   border: var(--border-w) solid var(--card-border);

package/css/sheet.css

@@ -28,7 +28,7 @@
    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 3q full">
+   <article class="card sheet sheet--half">
    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
@@ -46,14 +46,12 @@
    ============================================================ */
 
 .sheet {
-  --_handle: var(--sp-1);
   /* the strip a peeked sheet shows: the card's own top padding, the handle,
      the gap, one title row (--tap — the head rule below makes every head at
      least that tall) and the gap under it, so the cut lands exactly where
      the first control starts and nothing of it leaks through. Published
      (and registered in tokens.css) so a sheet whose head is taller can
      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
@@ -88,14 +86,16 @@
 .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-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
+   have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
+   inherits it. A sheet whose head is taller retunes it on the box. */
+:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--tap)); }
+
 /* ---- called sheets (Lh, 2026-09-20): a .step whose .base-content has buttons that each CALL a sheet ----
    .sheet--away = not on the screen: slid all the way out (translate, like every state — the material never
    changes), and hidden once it has left so its shadow does not lie on the step's bottom edge; write it
-   with `inert`. A button names its sheet — <button aria-controls="when"> … <article id="when" class="card
-   sheet sheet--away" inert data-sheet-states="peek full"> — and cardds.js does the rest: a tap slides that
-   sheet up to full and sends any other one away; the handle takes it down to peek, never further, so the
-   words and the other buttons are back in reach; the same button again raises it from peek to full.
-   Nothing waits at peek before the first call. No bar on such a screen (actions.css).
+   with `inert` (the React Sheet does). WHO brings it onto the screen is the app's business — a button, a route:
+   cardds ties no component to another. Nothing waits at peek before the first call.
    WHAT IT IS FOR: the base offers WAYS IN — sign in · new phone · join — and each button calls a sheet
    that holds that way's WHOLE form, its submit on the sheet's foot, leading to the next page. The base
    carries no control. It is NOT for a form taken apart — one sheet per field, a "send" left on the base:

package/css/step.css

@@ -62,8 +62,9 @@
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
 /* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
    move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
-   (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. Should a bar be written
-   beside a sheet anyway it stands down (actions.css + cardds.js) — a net for a mistake, not a layout. */
+   (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. That is how cardds's
+   own screens are composed (the guide); the framework does not police it — a component never changes
+   because another one is there. */
 
 /* the reading block: a .base-content (base.css) — the same words-on-the-base
    block as anywhere else (it was .step__card, and a .card before 2026-09-16;
@@ -82,11 +83,10 @@
   color: var(--on-surface);
 }
 /* the reading block is the .base-content — or the .pages that holds several of them, a walk of words
-   (card.css). --sheet-room: the strip a CALLED sheet keeps at peek (sheet.css, "called sheets"), published
-   on the step by cardds.js while one is on the screen, so the buttons under it can scroll clear of it;
-   nothing without one. */
+   (card.css). Behind a PEEKED sheet the words keep the strip's room under them, so whatever is down there
+   (the buttons that call the other sheets) scrolls clear of it — CSS alone: the box declares --sheet-peek. */
+.step:has(> .sheet--peek) > :is(.base-content, .pages) { padding-bottom: var(--sheet-peek); }
 .step > :is(.base-content, .pages) {
-  padding-bottom: var(--sheet-room, 0rem);
   flex: 0 1 auto;
 }
 .step > :is(.base-content, .pages) {

package/css/tokens.css

@@ -49,6 +49,8 @@
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */
   --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell, deck actions */
   --header-h: calc(var(--tap-base) * 5 / 4);  /* 60 top bar — .topbar and .appbar alike */
+  --card-pad-rest: var(--sp-5);  /* 20 a card's padding before any variant — .card publishes it as --card-pad; the sheet's peek strip is built from it where no card is in scope */
+  --card-gap-rest: var(--sp-4);  /* 16 …and its gap */
   --screen-pad: var(--sp-4); /* 16 the screen's inset — .sheet-stack cancels it */
   --map-ring: calc(var(--tap-base) * 10 / 3);    /* the rough-area ring on a map (sheet.css .map__ring) — a neighbourhood, not a house */
   --fab: calc(var(--tap-base) * 3 / 2); /* 72 square floating action */