@usableapp/cardds 0.1.6 → 0.2.0

package/README.md

@@ -105,8 +105,8 @@ cp -R ~/Sites/cardds/css ~/Sites/cardds/fonts ~/Sites/cardds/cardds.css \
 folder next to it, and `fonts/` beside that (`css/fonts.css` reaches the faces
 as `../fonts/`). `icons.svg` is referenced by path from your markup
 (`<use href="icons.svg#bell">`), so put it where those references resolve.
-Then follow the rules below — the short version is: tune `palette.css` and
-nothing else, and never write a raw hex or px in a component.
+Then follow the rules below — the short version is: tune your own `theme.css`
+(a copy of `css/theme.template.css`, see "A project's theme") and nothing else, and never write a raw hex or px in a component.
 
 The repo is private, so cloning needs an account with access (`everysundays`
 on GitHub) — set that up as an SSH host alias if you already use a different
@@ -297,6 +297,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 |---|---|---|
 | `css/fonts.css` + `fonts/` | the two `@font-face`s: PK Nonthaburi (body, `--font-ui`), FC Pride (display, `--font-display`); the font files and their licences | when swapping a face |
 | `css/tokens.css` | spacing, radius, type levels, motion (`--motion-sheet`), the human centre (`--screen-centre`), grayscale role defaults; registers the two sheet tokens (`--sheet-peek`, `--sheet-half`) so script can read them resolved | rarely |
+| `css/theme.template.css` | **a project's theme** — the four size bases + the colour roles, at their defaults; NOT in the bundle: copied into the project as its `theme.css`, loaded after `cardds.css` | copy it, don't edit it |
 | `css/palette.css` | **color settings — palettes as role-token overrides** | yes, this one |
 | `css/base.css` | reset, surface, typography classes, `.base-content` | rarely |
 | `css/card.css` | `.card` + its skeleton (`.card__head` / content / `.card__foot`), `.card-list`, `.card--row`, `.icon-row`, stats, `.card--centre` (one card at the human centre of a fill screen) and `.screen__centre` (a small group there) | when adding variants |
@@ -308,10 +309,10 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 | `css/actions.css` | topbar, chips, buttons (`.btn--xl`), `.dropdown` (the standard select: pill + `.menu` popover), `.action-bar` (+ `--pager` for previous/next, two round icon buttons, never labels; `--tiers` for a control row above the buttons), `.fab` | when adding actions |
 | `css/numbers.css` | `.ring` gauge, `.track` steps, `.card--band` + `.band-stack`, `.dotgrid`, `.picker`, `.badge`, `.bars` | big numbers |
 | `css/people.css` | `.avatar` (sm/lg/xl, outline, add, on, halo), `.avatar-stack`, `.avatar-pick` | people |
-| `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/choice.css` | `.check`, `.toggle`, `.chip-grid` + `.chip--pick` (+ `--sign`), `.day-strip`, `.calendar`, `.mood`, `.pin`, `.composer`, `.slider` | choice controls |
+| `css/lists.css` | `.row` / `.rows` (frameless rows in a card), `.kv`, `.kv-grid`, `.thread` + `.bubble` (chat: theirs left, mine right, no tail), `.timeline`, `.legend`, `.link` | lists inside cards |
 | `css/media.css` | `.card--cover`, `.quote`, `.tile-grid` + `.tile`, `.card--fold`, `.mosaic`, `.wave` | media & display |
-| `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 |
+| `css/layover.css` | `.modal` (the ask: `__lift` + `__drawer`, closes on any drawer button → `cardds:modal`), `.menu` (popover), `.banner` (details), `.float-bar`, `.callout`, `.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 |
 | `gallery/` | the gallery site: `npm run dev` → `/` every story, `/:Name` one component (`gallery/src/Gallery.tsx` globs `.design-sync/previews/`) | the demo |
@@ -502,6 +503,63 @@ Demo: the *skeleton* block at the top of `elements.html`.
     `--on-accent` to its own ink and bg, so every accent consumer (buttons,
     checks, toggles, rings, selected days) inverts without extra rules.
 
+## A project's theme
+
+A project retunes cardds from ONE file of its own, and nothing else. Copy
+`css/theme.template.css` into the project as `theme.css`, load it **after**
+`cardds.css`, change values:
+
+```css
+:root {
+  --sp-base: 0.3rem;   /* roomier */
+  --r-base: 0.5rem;    /* tighter corners */
+  --color-surface: #faf6ee;  --color-ink: #1f1b16;  --color-paper: #fff;
+  --color-brand: #c2410c;    --color-on-brand: #fff;
+}
+```
+
+```html
+<html data-palette="own">   <!-- colours of your own = coloured mode; any value no stock palette uses -->
+```
+
+That file is the whole public surface:
+
+| what | tokens | moves |
+|---|---|---|
+| room **between** things | `--sp-base` (0.25rem = 4) | every `--sp-N` = base × N → paddings, gaps, the screen's inset, the bar's reserve, the sheet's peek |
+| type | `--fs-base` (1rem = 16) | every `--fs-*`, `--badge`, `--icon-xs` |
+| corners | `--r-base` (1rem = 16) | every `--r-*`; `0` = square. `--r-chip` stays fully round |
+| the size **of** things | `--tap-base` (3rem = 48) | `--tap*`, `--btn-h`, `--chip-h`, `--bar-h`, `--header-h`, `--fab`, `--icon*`, `--avatar*`, `--dot*`, `--ring*`, `--tile-*`. `--tap*` never under `--tap-floor` (44px) |
+| faces | `--font-ui`, `--font-display` | |
+| colour | `--color-surface`, `--color-ink`, `--color-paper`, `--color-brand`, `--color-on-brand` — no default: unset = the wireframe | every role: surface / words, the three card tones (paper · the brand washed 14% into the surface · the brand), the muted inks (the ink washed into their ground), accent, neutral actions, `--dot-a` |
+| colour roles (the escape hatch) | `--surface`, `--on-surface(-muted)`, `--card-{1,2,3}-{bg,ink}`, `--card-border`, `--card-muted`, `--card-2-muted`, `--accent`, `--on-accent`, `--action-{bg,ink,border}`, `--pos`, `--neg`, `--dot-{a,b}` | a role set directly wins over its derivation; the tints derive from the roles |
+
+Rules:
+
+- **A base, never a multiplier.** Every size token is `calc(base × multiplier)`
+  in `tokens.css`; the multipliers are the system's proportions. A project
+  never sets a derived token (`--sp-4`, `--fs-h1`, `--r-card`, `--tap`…), a
+  private one (`--_*`), or a published one (`--card-pad`, `--bar-reserve`, `--sheet-*`).
+- **On `:root` only.** The derived tokens are computed where they are declared
+  (`:root`), so a base set on a subtree does not reach them.
+- **After `cardds.css`.** A stock palette's block and a project's `:root` weigh
+  the same; the later file wins.
+- **Coloured mode is the attribute.** `data-palette`, whatever its value, is what
+  trades the wireframe's borders for the card's shadow and the controls' soft
+  edge (`palette.css`, `forms.css`). Colours of your own → `<html data-palette="own">`.
+  Without it the colours still apply, on wireframe borders.
+- **cardds does not judge the colours.** No contrast check, no warning — a
+  theme's values are the project's call. The derivations are only starting points;
+  any role can be set outright.
+- `--text-scale` (below) is the member's setting, not the theme's: it scales
+  everything, the bases included.
+
+Try it live: the gallery's nav (`npm run dev`) has a slider per size base, and
+palette `own` shows a colour well per colour base.
+`tests/tokens.spec.js` holds the defaults to the px they always were and the
+template to the defaults; the step / centre geometry runs at two extreme
+themes (`tight`, `loose`).
+
 ## New palette
 
 Copy any block in `palette.css`, rename, retune:
@@ -517,9 +575,10 @@ Copy any block in `palette.css`, rename, retune:
 
 ## Scale: everything is rem
 
-Every length token is rem (`--sp-4: 1rem`, `--tap: 3rem`, `--r-card: 2rem`,
-`--fs-h1: 1.75rem` …), so the whole system resizes from one number: the root
-font size. `base.css` keeps it at `100%` (the user's text-size setting, 16px by
+Every length token resolves to rem — a multiplier × one of four rem bases
+(`--sp-4` = `--sp-base` × 4 = 1rem, `--tap` = `--tap-base` = 3rem, `--r-card` =
+`--r-base` × 2, `--fs-h1` = `--fs-base` × 1.75; see "A project's theme") — so the
+whole system still resizes from one number: the root font size. `base.css` keeps it at `100%` (the user's text-size setting, 16px by
 default) and steps narrow phones (≤360px) to `93.75%`, which keeps the 25rem
 column, its 48px taps and its type in proportion on 320–360 screens. Only
 `--border-w`, `--rule-w` and the focus ring stay in px, so edges stay crisp.

package/css/actions.css

@@ -58,7 +58,7 @@
 .appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
 /* the bar's trailing controls (one or two: a labelled switch chip, a wallet button — home,
    Lh 2026-09-13) stand on the tap floor: a chip that is a switch grows to --tap here */
-.appbar .chip--toggle { min-height: var(--tap); }
+.appbar .chip--pick { min-height: var(--tap); }
 
 /* ---- icon button (round) ---- */
 .icon-btn {

package/css/base.css

@@ -8,7 +8,7 @@
    in cards, rows and bodies stay selectable (an address, a code, a number
    the member wants to copy), and inputs are untouched. Native buttons and
    links are matched by element; the rest by the class that makes them one */
-button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--toggle, .chip--pick,
+button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--pick,
 .segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .dropdown__trigger, .track__step, .pager__at {
   user-select: none;
   -webkit-user-select: none;

package/css/choice.css

@@ -71,27 +71,11 @@
 .toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); opacity: 1; }
 .toggle:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 
-/* ---- toggle chip: interest / filter picker — shows + off, × on ----
-   <label class="chip chip--toggle"><input type="checkbox">Nature</label> */
-.chip--toggle { cursor: pointer; padding-right: var(--sp-2); }
-.chip--toggle > input { appearance: none; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
-.chip--toggle::after {
-  content: "";
-  width: var(--icon-xs);
-  height: var(--icon-xs);
-  flex: none;
-  background: currentColor;
-  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
-  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
-}
-.chip--toggle:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
-/* checked: the same plus turns 45° into an x — one mask, one rotate, no swap (Lh 2026-09-16) */
-.chip--toggle:has(:checked)::after { rotate: 45deg; }
-@media (prefers-reduced-motion: no-preference) { .chip--toggle::after { transition: rotate var(--motion-slide); } }
-.chip--toggle:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
-
-/* ---- chip grid: pick one slot / many options in a grid ----
-   <div class="chip-grid"><label class="chip chip--pick"><input type="radio" name="t">9:00</label>…</div> */
+/* ---- chip pick: a chip that is a choice — a native radio/checkbox inside the label, the picked one filled with accent.
+   Full-width in a .chip-grid (one slot / many options), or hugging its word on a .chip-row with --sign (an interest
+   picker: + off, × on). Was two things, .chip--toggle and .chip--pick — one chip, one state, the sign is a variant (Lh 2026-09-16).
+   <div class="chip-grid"><label class="chip chip--pick"><input type="radio" name="t">9:00</label>…</div>
+   <div class="chip-row"><label class="chip chip--pick chip--sign"><input type="checkbox">Nature</label>…</div> */
 .chip-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
@@ -102,10 +86,23 @@
    Matters most in scripts without word spaces (Thai): min-content is the
    whole string, tracks get wide, and hugging chips leave a ragged grid. */
 .chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); position: relative; }
-.chip--pick { cursor: pointer; }
+.chip--pick { cursor: pointer; position: relative; } /* the input covers the whole chip, on a row as in a grid */
 .chip--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
 .chip--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 .chip--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+/* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
+.chip--sign { padding-right: var(--sp-2); }
+.chip--sign::after {
+  content: "";
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  flex: none;
+  background: currentColor;
+  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
+  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
+}
+.chip--sign:has(:checked)::after { rotate: 45deg; }
+@media (prefers-reduced-motion: no-preference) { .chip--sign::after { transition: rotate var(--motion-slide); } }
 
 /* ---- day strip: a week, one day selected ----
    <div class="day-strip" role="tablist"><button class="day" role="tab" aria-selected="true"><span class="day__name">Thu</span><span class="day__num">16</span></button>…</div> */

package/css/layover.css

@@ -271,22 +271,6 @@
 }
 .callout__title { font: var(--type-title); }
 .callout__sub { font: var(--type-caption); opacity: 0.7; }
-/* speech chip: a chip with the same tail (mascot / greeting) */
-.chip--bubble { position: relative; }
-.chip--bubble::after {
-  content: "";
-  position: absolute;
-  left: var(--sp-4);
-  bottom: calc(-1 * var(--sp-2) + var(--border-w));
-  width: var(--sp-3);
-  height: var(--sp-3);
-  rotate: 45deg;
-  background: inherit;
-  border: inherit;
-  border-top: 0;
-  border-left: 0;
-}
-
 /* ---- deck: swipe cards; the last child is on top ----
    <div class="deck"><article class="card">…</article><article class="card">…</article><article class="card card--fold">front</article></div>
    <div class="deck__actions"><button class="icon-btn">×</button><button class="icon-btn icon-btn--invert">✓</button></div> */

package/css/lists.css

@@ -87,6 +87,56 @@
 .kv-cell__key { font: var(--type-caption); color: var(--card-muted); }
 .card--3 .kv-cell__key { color: inherit; opacity: 0.7; }
 
+/* ---- bubble: a chat message — theirs on the left, mine on the right (Lh 2026-09-18, replaces the chip's tail) ----
+   No tail: a rounded block whose corner nearest the sender is square-ish
+   (bottom-left for theirs, bottom-right for mine), the way messaging apps
+   draw it. Under it a caption line (time · a tick), beside it small round
+   actions (a heart, more). A .thread stacks them.
+   <div class="thread">
+     <div class="bubble"><p class="bubble__body">…</p><span class="bubble__actions">…icon-btns…</span><span class="bubble__meta">Dec 4 · 8:15</span></div>
+     <div class="bubble bubble--right">…</div>
+   </div> */
+.thread { display: grid; gap: var(--sp-4); }
+/* two columns: the message (max-content, but it gives way — minmax(0) — so a long one shrinks
+   and wraps while the actions stay beside it) and the actions; the meta on a second row under the message */
+.bubble {
+  display: grid;
+  grid-template-columns: minmax(0, max-content) auto;
+  justify-content: start;
+  align-items: center;
+  gap: var(--sp-1) var(--sp-3);
+  max-width: 88%;
+  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 */
+.bubble__body, .bubble__meta { grid-column: 1; }
+.bubble__actions { grid-column: 2; grid-row: 1; }
+.bubble--right > :is(.bubble__body, .bubble__meta) { grid-column: 2; }
+.bubble--right > .bubble__actions { grid-column: 1; }
+.bubble__body {
+  margin: 0;
+  min-width: 0;
+  padding: var(--sp-3) var(--sp-4);
+  border-radius: var(--r-card);
+  border-bottom-left-radius: var(--r-control);
+  background: var(--card-2-bg);
+  color: var(--card-2-ink);
+  font: var(--type-body);
+  overflow-wrap: anywhere;
+}
+.bubble--right > .bubble__body {
+  border-bottom-left-radius: var(--r-card);
+  border-bottom-right-radius: var(--r-control);
+  background: var(--accent);
+  color: var(--on-accent);
+  text-align: right;
+}
+.bubble__actions { display: flex; gap: var(--sp-1); flex: none; opacity: 0.7; }
+.bubble__meta { display: flex; align-items: center; gap: var(--sp-1); font: var(--type-caption); color: var(--on-surface-muted); }
+.bubble--right > .bubble__meta { justify-self: end; }
+.bubble__meta > .icon { color: var(--accent); }
+.card--3 .bubble__meta { color: inherit; opacity: 0.7; }
+
 /* ---- timeline: a hairline with date chips, entries to the right ----
    <ol class="timeline"><li class="timeline__item"><span class="timeline__mark">Wed 14</span><p class="t-body">…</p></li>…</ol> */
 .timeline {

package/css/palette.css

@@ -108,5 +108,10 @@
 
 /* Colored palettes trade wireframe outlines for soft elevation. */
 [data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
+/* COLOURED MODE is the attribute, whatever its value: a project with colours of its own (the five
+   --color-* bases, or roles, in its theme.css) writes <html data-palette="own"> — no block here matches
+   "own", so only the three generic rules apply: the card's shadow, the soft outline, the field's soft
+   edge (forms.css); and the two wireframe borders step back, as in every stock palette. */
+[data-palette] { --card-border: transparent; --action-border: transparent; }
 /* …but controls keep a faint edge so they still read as controls */
 [data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }

package/css/theme.template.css

@@ -0,0 +1,49 @@
+/* ============================================================
+   cardds/theme.template.css — A PROJECT'S THEME. Copy, rename, retune.
+
+   Not part of the bundle: copy this file into the project as its own
+   `theme.css` and load it AFTER cardds.css. It is the whole public
+   surface of the system — the four size bases and the colour roles.
+   Everything else in tokens.css is derived from these; a project never
+   sets a derived token (--sp-4, --fs-h1, --r-card, --tap, --sheet-*…)
+   and never a multiplier.
+
+   The values below are the defaults (the wireframe): as shipped, this
+   file changes nothing (tests/tokens.spec.js holds it to that).
+
+   On :root only. The size tokens are computed where tokens.css declares
+   them (:root), so a base set on a subtree does not reach them.
+   A stock palette's colours and this file's have the same weight — the
+   later file wins, so: after cardds.css.
+   ============================================================ */
+
+:root {
+  /* ---- size: four bases, the multipliers stay the system's ---- */
+  --sp-base: 0.25rem;  /* 4  the room BETWEEN things: every --sp-N = base × N, so paddings and gaps */
+  --fs-base: 1rem;     /* 16 the type: every --fs-*, the count badge, the inline icon */
+  --r-base: 1rem;      /* 16 the corners: every --r-* (0 = square; chips and buttons stay fully round) */
+  --tap-base: 3rem;    /* 48 the size of THINGS: touch targets, control heights, icons, avatars, ring, tiles
+                             (a touch target never goes under 44px, whatever this says) */
+  /* the whole system at once (a member's text-size setting) is --text-scale, a unitless number — not a theme's job */
+
+  /* ---- faces ---- */
+  --font-ui: "PK Nonthaburi", -apple-system, system-ui, sans-serif;
+  --font-display: "FC Pride", var(--font-ui);
+
+  /* ---- colour: five bases, the roles derive (tone 2, the muted inks, the tints) ----
+     No default — unset = the wireframe. With colours of your own, put the page in coloured mode:
+     <html data-palette="own"> (any value no stock palette uses): cards take a shadow for their
+     wireframe border, controls a soft edge. */
+  /* --color-surface: #f9e8dc; */   /* the app's ground */
+  /* --color-ink: #241f1b; */       /* the words */
+  /* --color-paper: #ffffff; */     /* the plain card, neutral buttons and fields */
+  /* --color-brand: #ef4e0b; */     /* the primary action, the strong card */
+  /* --color-on-brand: #fff4ec; */  /* the words on the brand */
+
+  /* ---- colour roles: only where a derivation is not what you want — a role set here wins over it ----
+     --surface  --on-surface  --on-surface-muted
+     --card-1-bg --card-1-ink  --card-2-bg --card-2-ink  --card-3-bg --card-3-ink   (three card tones)
+     --card-border  --card-muted  --card-2-muted
+     --accent --on-accent  --action-bg --action-ink --action-border
+     --pos --neg  --dot-a --dot-b */
+}

package/css/tokens.css

@@ -15,56 +15,69 @@
   --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
   --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
 
-  /* ---- spacing (4pt grid) ---- */
-  --sp-0: 0.125rem;  /* 2  hairline gaps (title→meta) */
-  --sp-1: 0.25rem;   /* 4 */
-  --sp-2: 0.5rem;    /* 8 */
-  --sp-3: 0.75rem;   /* 12 */
-  --sp-4: 1rem;      /* 16 */
-  --sp-5: 1.25rem;   /* 20 */
-  --sp-6: 1.5rem;    /* 24 */
-  --sp-8: 2rem;      /* 32 */
-  --sp-10: 2.5rem;   /* 40 */
-  --sp-12: 3rem;     /* 48 */
+  /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----
+     Every size token below is multiplier × its family's base. A project sets a BASE
+     and never a multiplier, so the proportions of the system hold at any size.
+     The px in the comments are at these defaults (1rem = 16px). */
+  --sp-base: 0.25rem;  /* 4  spacing: --sp-N = base × N */
+  --fs-base: 1rem;     /* 16 type: --fs-* */
+  --r-base: 1rem;      /* 16 radius: --r-* (--r-chip stays fully round) */
+  --tap-base: 3rem;    /* 48 the size of THINGS: touch targets and control heights (--tap*, --btn-h, --chip-h, --bar-h,
+                          --header-h, --fab), icons, avatars, dots, the ring and the tiles. --sp-base is the room BETWEEN things.
+                          Text-holders follow the type instead: --badge and --icon-xs (inline with captions) are on --fs-base.
+                          Not on a base: --screen-w (the column), borders / rules / focus (px, crisp), shadows, motion. */
+
+  /* ---- spacing (4pt grid): the number in the name is the multiplier ---- */
+  --sp-0: calc(var(--sp-base) * 0.5);  /* 2  hairline gaps (title→meta) */
+  --sp-1: var(--sp-base);              /* 4 */
+  --sp-2: calc(var(--sp-base) * 2);    /* 8 */
+  --sp-3: calc(var(--sp-base) * 3);    /* 12 */
+  --sp-4: calc(var(--sp-base) * 4);    /* 16 */
+  --sp-5: calc(var(--sp-base) * 5);    /* 20 */
+  --sp-6: calc(var(--sp-base) * 6);    /* 24 */
+  --sp-8: calc(var(--sp-base) * 8);    /* 32 */
+  --sp-10: calc(var(--sp-base) * 10);  /* 40 */
+  --sp-12: calc(var(--sp-base) * 12);  /* 48 */
 
   /* ---- touch & control sizes ---- */
-  --tap: 3rem;        /* 48 primary touch target */
-  --tap-sm: 2.75rem;  /* 44 minimum touch target (Apple HIG floor) */
-  --tap-lg: 3.5rem;   /* 56 hero controls: track steps, send, field with action */
-  --btn-h: 3.25rem;   /* 52 button height */
-  --btn-xl-h: 5.5rem; /* 88 the one giant CTA */
-  --chip-h: 2.375rem; /* 38 chip height */
-  --bar-h: 4rem;      /* 64 float bar, day cell, deck actions */
-  --header-h: 3.75rem;/* 60 top bar — .topbar and .appbar alike */
+  --tap-floor: 2.75rem; /* 44 the HIG floor — no --tap-base takes a touch target under it */
+  --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
+  --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
+  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: track steps, send, field with action */
+  --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
+  --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
+  --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 */
   --screen-pad: var(--sp-4); /* 16 the screen's inset — .sheet-stack cancels it */
-  --map-ring: 10rem;    /* the rough-area ring on a map (sheet.css .map__ring) — a neighbourhood, not a house */
-  --fab: 4.5rem;      /* 72 square floating action */
-  --badge: 1.625rem;  /* 26 count badge */
-  --dot: 0.625rem;    /* 10 signal dot */
-  --dot-xs: 0.375rem; /* 6  marker dot */
+  --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 */
+  --badge: calc(var(--fs-base) * 1.625);  /* 26 count badge */
+  --dot: calc(var(--tap-base) * 5 / 24);    /* 10 signal dot */
+  --dot-xs: calc(var(--tap-base) / 8); /* 6  marker dot */
 
   /* ---- icons (icons.svg sprite, Lucide) ---- */
-  --icon: 1.75rem;    /* 28 default */
-  --icon-sm: 1.75rem; /* one size everywhere; retune if small contexts appear */
-  --icon-lg: 2rem;    /* 32 empty states */
-  --icon-xs: 1rem;    /* 16 inline with captions/chips only (row meta, link arrows) */
+  --icon: calc(var(--tap-base) * 7 / 12);    /* 28 default */
+  --icon-sm: calc(var(--tap-base) * 7 / 12); /* one size everywhere; retune if small contexts appear */
+  --icon-lg: calc(var(--tap-base) * 2 / 3);    /* 32 empty states */
+  --icon-xs: var(--fs-base);    /* 16 inline with captions/chips only (row meta, link arrows) */
 
   /* ---- people & big elements ---- */
-  --avatar-sm: 2.5rem;  /* 40 row lead */
-  --avatar: 3.5rem;     /* 56 card head, person row */
-  --avatar-lg: 5rem;    /* 80 chooser row */
-  --avatar-xl: 6rem;    /* 96 sheet head icon ring */
-  --ring: 11rem;        /* 176 .ring gauge diameter */
-  --ring-w: 1.375rem;   /* 22 .ring stroke */
-  --tile-min: 7.5rem;   /* 120 .tile-grid column floor */
-  --tile-h: 8.25rem;    /* 132 tile / band height */
+  --avatar-sm: calc(var(--tap-base) * 5 / 6);  /* 40 row lead */
+  --avatar: calc(var(--tap-base) * 7 / 6);     /* 56 card head, person row */
+  --avatar-lg: calc(var(--tap-base) * 5 / 3);    /* 80 chooser row */
+  --avatar-xl: calc(var(--tap-base) * 2);    /* 96 sheet head icon ring */
+  --ring: calc(var(--tap-base) * 11 / 3);        /* 176 .ring gauge diameter */
+  --ring-w: calc(var(--tap-base) * 11 / 24);   /* 22 .ring stroke */
+  --tile-min: calc(var(--tap-base) * 5 / 2);   /* 120 .tile-grid column floor */
+  --tile-h: calc(var(--tap-base) * 11 / 4);    /* 132 tile / band height */
 
   /* ---- radius ---- */
   --r-chip: 999px;        /* pills, chips, buttons — always fully round */
-  --r-card: 2rem;         /* 32 the one card radius: every card, row, tile, menu, sheet, fab */
-  --r-media: 1rem;        /* 16 images inside cards */
-  --r-control: 0.875rem;  /* 14 fields, thumbs, menu rows */
-  --r-badge: 0.625rem;    /* 10 tile badge, bars */
+  --r-card: calc(var(--r-base) * 2);         /* 32 the one card radius: every card, row, tile, menu, sheet, fab */
+  --r-media: var(--r-base);        /* 16 images inside cards */
+  --r-control: calc(var(--r-base) * 0.875);  /* 14 fields, thumbs, menu rows */
+  --r-badge: calc(var(--r-base) * 0.625);    /* 10 tile badge, bars */
 
   /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
   --border-w: 1.5px;
@@ -85,22 +98,22 @@
   --font-display: "FC Pride", var(--font-ui); /* the character face for headings and big numbers (fonts.css) */
   --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
 
-  --fs-xs: 0.6875rem;      /* 11 overline */
-  --fs-caption: 0.75rem;   /* 12 */
-  --fs-label: 0.8125rem;   /* 13 */
-  --fs-sm: 0.875rem;       /* 14 chips, segments */
-  --fs-body: 0.9375rem;    /* 15 */
-  --fs-md: 1rem;           /* 16 buttons */
-  --fs-title: 1.0625rem;   /* 17 */
-  --fs-lg: 1.25rem;        /* 20 day numbers, tile values */
-  --fs-h2: 1.375rem;       /* 22 */
-  --fs-2xl: 1.5rem;        /* 24 composer, small ring */
-  --fs-h1: 1.75rem;        /* 28 */
-  --fs-3xl: 2rem;          /* 32 xl button */
-  --fs-display: clamp(2.125rem, 9vw, 2.625rem); /* 34–42 */
-  --fs-stat: clamp(1.875rem, 8vw, 2.375rem);    /* 30–38 big numbers */
-  --fs-hero: 3.5rem;                            /* 56 the one number on a sheet */
-  --fs-giant: clamp(3rem, 15vw, 4rem);          /* 48–64 data bands */
+  --fs-xs: calc(var(--fs-base) * 0.6875);      /* 11 overline */
+  --fs-caption: calc(var(--fs-base) * 0.75);   /* 12 */
+  --fs-label: calc(var(--fs-base) * 0.8125);   /* 13 */
+  --fs-sm: calc(var(--fs-base) * 0.875);       /* 14 chips, segments */
+  --fs-body: calc(var(--fs-base) * 0.9375);    /* 15 */
+  --fs-md: var(--fs-base);           /* 16 buttons */
+  --fs-title: calc(var(--fs-base) * 1.0625);   /* 17 */
+  --fs-lg: calc(var(--fs-base) * 1.25);        /* 20 day numbers, tile values */
+  --fs-h2: calc(var(--fs-base) * 1.375);       /* 22 */
+  --fs-2xl: calc(var(--fs-base) * 1.5);        /* 24 composer, small ring */
+  --fs-h1: calc(var(--fs-base) * 1.75);        /* 28 */
+  --fs-3xl: calc(var(--fs-base) * 2);          /* 32 xl button */
+  --fs-display: clamp(calc(var(--fs-base) * 2.125), 9vw, calc(var(--fs-base) * 2.625)); /* 34–42 */
+  --fs-stat: clamp(calc(var(--fs-base) * 1.875), 8vw, calc(var(--fs-base) * 2.375));    /* 30–38 big numbers */
+  --fs-hero: calc(var(--fs-base) * 3.5);                            /* 56 the one number on a sheet */
+  --fs-giant: clamp(calc(var(--fs-base) * 3), 15vw, calc(var(--fs-base) * 4));          /* 48–64 data bands */
 
   /* level      weight size / line-height family */
   --type-display: 800 var(--fs-display) / 1.15 var(--font-display); /* leading: Thai marks stack to 1.1em up and 0.3em down in FC Pride — 1.02 clipped them (2026-09-10) */
@@ -120,35 +133,53 @@
   /* ============================================================
      COLOR ROLES — wireframe defaults (grayscale).
      palette.css overrides these under [data-palette="…"].
+
+     THE FIVE COLOUR BASES (Lh, 2026-09-20) — a project's own colours, the
+     same idea as the size bases: set a base, the roles follow.
+       --color-surface   the app's ground
+       --color-ink       the words
+       --color-paper     the plain card, neutral buttons and fields
+       --color-brand     the primary action, the strong card, the signal dot
+       --color-on-brand  the words on the brand
+     They have NO default: unset, every role below is its exact wireframe
+     value. That is what the fallbacks are for — a private mix (--_*) that
+     reads an unset base is invalid, so var(--_x, #grey) lands on the grey.
+     Set, the roles derive: tone 2 = the brand washed into the surface, the
+     muted inks = the ink washed into their ground. A role set directly
+     (a palette, or a project's theme.css) always wins over its derivation.
      ============================================================ */
+  --_muted-on-surface: color-mix(in srgb, var(--color-ink) 66%, var(--color-surface, #f2f2f0));
+  --_muted-on-paper: color-mix(in srgb, var(--color-ink) 66%, var(--color-paper, #ffffff));
+  --_tone-2: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface, #f2f2f0));
+  --_muted-on-tone-2: color-mix(in srgb, var(--color-ink, #141414) 72%, var(--_tone-2));
 
   /* app background ("earth-toned surface or shiny color, up to the app") */
-  --surface: #f2f2f0;
-  --on-surface: #141414;
-  --on-surface-muted: #6b6b6b;
+  --surface: var(--color-surface, #f2f2f0);
+  --on-surface: var(--color-ink, #141414);
+  --on-surface-muted: var(--_muted-on-surface, #6b6b6b);
 
   /* card boundaries — 3 slots so stacked/adjacent cards can differ */
-  --card-1-bg: #ffffff;  --card-1-ink: #141414;
-  --card-2-bg: #e6e6e3;  --card-2-ink: #141414;
-  --card-3-bg: #141414;  --card-3-ink: #ffffff;
+  --card-1-bg: var(--color-paper, #ffffff);  --card-1-ink: var(--color-ink, #141414);
+  --card-2-bg: var(--_tone-2, #e6e6e3);  --card-2-ink: var(--color-ink, #141414);
+  --card-3-bg: var(--color-brand, #141414);  --card-3-ink: var(--color-on-brand, #ffffff);
 
   --card-border: #141414;      /* wireframe: visible outline; palettes may set transparent */
-  --card-muted: #6b6b6b;       /* secondary text inside cards (the default, tone-1 card) */
-  --card-2-muted: #5f5f5f;     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
+  --card-muted: var(--_muted-on-paper, #6b6b6b);       /* secondary text inside cards (the default, tone-1 card) */
+  --card-2-muted: var(--_muted-on-tone-2, #5f5f5f);     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
                                   a palette whose tone-2 ground is strong
                                   sets this to its tone-2 ink — a muted shade cannot reach AA there (clay) */
 
   /* actions */
-  --accent: #141414;           /* primary CTA fill */
-  --on-accent: #ffffff;
-  --action-bg: #ffffff;        /* neutral buttons/chips/inputs */
-  --action-ink: #141414;
+  --accent: var(--color-brand, #141414);           /* primary CTA fill */
+  --on-accent: var(--color-on-brand, #ffffff);
+  --action-bg: var(--color-paper, #ffffff);        /* neutral buttons/chips/inputs */
+  --action-ink: var(--color-ink, #141414);
   --action-border: #141414;
 
   /* signals (chip dots, deltas) */
   --pos: #8a8a8a;
   --neg: #3d3d3d;
-  --dot-a: #141414;
+  --dot-a: var(--color-brand, #141414);
   --dot-b: #8a8a8a;
 
   /* derived tints — read the element's own ink, so they work on any slot */

package/dist/actions/Chip.d.ts

@@ -4,15 +4,13 @@ export interface ChipProps extends ComponentPropsWithoutRef<'span'> {
     on?: boolean;
     /** a leading signal dot: `a` (the accent signal) or `b` (the secondary) */
     dot?: 'a' | 'b';
-    /** a speech tail under the chip (a mascot's greeting) */
-    bubble?: boolean;
     /** the element: span (default), a link, or a button */
     as?: 'span' | 'a' | 'button';
     href?: string;
     children?: ReactNode;
 }
-/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For pickers use ChipToggle / ChipPick. */
-export declare function Chip({ on, dot, bubble, as, href, className, children, ...rest }: ChipProps): import("react").DetailedReactHTMLElement<{
+/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
+export declare function Chip({ on, dot, as, href, className, children, ...rest }: ChipProps): import("react").DetailedReactHTMLElement<{
     slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined | undefined;
@@ -296,26 +294,20 @@ export declare function Chip({ on, dot, bubble, as, href, className, children, .
     type: string | undefined;
     className: string;
 }, HTMLElement>;
-export interface ChipToggleProps extends Omit<ComponentPropsWithoutRef<'label'>, 'onChange'> {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    name?: string;
-    value?: string;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
-/** ChipToggle — an interest / filter chip: shows + off and × on; the state is a native checkbox inside the label. */
-export declare function ChipToggle({ checked, defaultChecked, name, value, onChange, className, children, ...rest }: ChipToggleProps): import("react").JSX.Element;
 export interface ChipPickProps extends Omit<ComponentPropsWithoutRef<'label'>, 'onChange'> {
-    /** radio for pick-one (a time slot), checkbox for pick-many (skills) */
+    /** radio for pick-one (a time slot), checkbox for pick-many (skills); `sign` defaults to checkbox */
     type?: 'radio' | 'checkbox';
+    /** the +/× at the end: an interest / filter chip on a row, hugging its word (was ChipToggle) */
+    sign?: boolean;
     name?: string;
     value?: string;
     checked?: boolean;
     defaultChecked?: boolean;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
-/** ChipPick — a full-width pick target in a ChipGrid (9:00 · 9:30 · …); the picked one fills with accent. */
-export declare function ChipPick({ type, name, value, checked, defaultChecked, onChange, className, children, ...rest }: ChipPickProps): import("react").JSX.Element;
+/** ChipPick — a chip that is a choice: full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
+ *  interest picker); the picked one fills with accent. A native radio/checkbox inside the label carries the state. */
+export declare function ChipPick({ type, sign, name, value, checked, defaultChecked, onChange, className, children, ...rest }: ChipPickProps): import("react").JSX.Element;
 export interface ChipRowProps extends ComponentPropsWithoutRef<'div'> {
     /** run the row to the card's edges as a one-line scrolling strip (`.bleed`: nowrap, overflow, the hairline ink scrollbar) */
     bleed?: boolean;

package/dist/actions/Chip.js

@@ -2,18 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
 import { cx } from '../cx.js';
 import { Dot } from './Dot.js';
-/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For pickers use ChipToggle / ChipPick. */
-export function Chip({ on, dot, bubble, as, href, className, children, ...rest }) {
+/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
+export function Chip({ on, dot, as, href, className, children, ...rest }) {
     const el = as ?? (href ? 'a' : 'span');
-    return createElement(el, { href, type: el === 'button' ? 'button' : undefined, className: cx('chip', on && 'chip--on', bubble && 'chip--bubble', className), ...rest }, dot && _jsx(Dot, { b: dot === 'b' }), children);
+    return createElement(el, { href, type: el === 'button' ? 'button' : undefined, className: cx('chip', on && 'chip--on', className), ...rest }, dot && _jsx(Dot, { b: dot === 'b' }), children);
 }
-/** ChipToggle — an interest / filter chip: shows + off and × on; the state is a native checkbox inside the label. */
-export function ChipToggle({ checked, defaultChecked, name, value, onChange, className, children, ...rest }) {
-    return (_jsxs("label", { className: cx('chip chip--toggle', className), ...rest, children: [_jsx("input", { type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, value: value, onChange: onChange }), children] }));
-}
-/** ChipPick — a full-width pick target in a ChipGrid (9:00 · 9:30 · …); the picked one fills with accent. */
-export function ChipPick({ type = 'radio', name, value, checked, defaultChecked, onChange, className, children, ...rest }) {
-    return (_jsxs("label", { className: cx('chip chip--pick', className), ...rest, children: [_jsx("input", { type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: onChange }), children] }));
+/** ChipPick — a chip that is a choice: full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
+ *  interest picker); the picked one fills with accent. A native radio/checkbox inside the label carries the state. */
+export function ChipPick({ type, sign, name, value, checked, defaultChecked, onChange, className, children, ...rest }) {
+    return (_jsxs("label", { className: cx('chip chip--pick', sign && 'chip--sign', className), ...rest, children: [_jsx("input", { type: type ?? (sign ? 'checkbox' : 'radio'), name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: onChange }), children] }));
 }
 /** ChipRow — chips on a wrapping line (or a bleeding strip). */
 export function ChipRow({ bleed, className, ...rest }) {

package/dist/cardds.css

@@ -56,56 +56,69 @@
   --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
   --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
 
-  /* ---- spacing (4pt grid) ---- */
-  --sp-0: 0.125rem;  /* 2  hairline gaps (title→meta) */
-  --sp-1: 0.25rem;   /* 4 */
-  --sp-2: 0.5rem;    /* 8 */
-  --sp-3: 0.75rem;   /* 12 */
-  --sp-4: 1rem;      /* 16 */
-  --sp-5: 1.25rem;   /* 20 */
-  --sp-6: 1.5rem;    /* 24 */
-  --sp-8: 2rem;      /* 32 */
-  --sp-10: 2.5rem;   /* 40 */
-  --sp-12: 3rem;     /* 48 */
+  /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----
+     Every size token below is multiplier × its family's base. A project sets a BASE
+     and never a multiplier, so the proportions of the system hold at any size.
+     The px in the comments are at these defaults (1rem = 16px). */
+  --sp-base: 0.25rem;  /* 4  spacing: --sp-N = base × N */
+  --fs-base: 1rem;     /* 16 type: --fs-* */
+  --r-base: 1rem;      /* 16 radius: --r-* (--r-chip stays fully round) */
+  --tap-base: 3rem;    /* 48 the size of THINGS: touch targets and control heights (--tap*, --btn-h, --chip-h, --bar-h,
+                          --header-h, --fab), icons, avatars, dots, the ring and the tiles. --sp-base is the room BETWEEN things.
+                          Text-holders follow the type instead: --badge and --icon-xs (inline with captions) are on --fs-base.
+                          Not on a base: --screen-w (the column), borders / rules / focus (px, crisp), shadows, motion. */
+
+  /* ---- spacing (4pt grid): the number in the name is the multiplier ---- */
+  --sp-0: calc(var(--sp-base) * 0.5);  /* 2  hairline gaps (title→meta) */
+  --sp-1: var(--sp-base);              /* 4 */
+  --sp-2: calc(var(--sp-base) * 2);    /* 8 */
+  --sp-3: calc(var(--sp-base) * 3);    /* 12 */
+  --sp-4: calc(var(--sp-base) * 4);    /* 16 */
+  --sp-5: calc(var(--sp-base) * 5);    /* 20 */
+  --sp-6: calc(var(--sp-base) * 6);    /* 24 */
+  --sp-8: calc(var(--sp-base) * 8);    /* 32 */
+  --sp-10: calc(var(--sp-base) * 10);  /* 40 */
+  --sp-12: calc(var(--sp-base) * 12);  /* 48 */
 
   /* ---- touch & control sizes ---- */
-  --tap: 3rem;        /* 48 primary touch target */
-  --tap-sm: 2.75rem;  /* 44 minimum touch target (Apple HIG floor) */
-  --tap-lg: 3.5rem;   /* 56 hero controls: track steps, send, field with action */
-  --btn-h: 3.25rem;   /* 52 button height */
-  --btn-xl-h: 5.5rem; /* 88 the one giant CTA */
-  --chip-h: 2.375rem; /* 38 chip height */
-  --bar-h: 4rem;      /* 64 float bar, day cell, deck actions */
-  --header-h: 3.75rem;/* 60 top bar — .topbar and .appbar alike */
+  --tap-floor: 2.75rem; /* 44 the HIG floor — no --tap-base takes a touch target under it */
+  --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
+  --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
+  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: track steps, send, field with action */
+  --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
+  --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
+  --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 */
   --screen-pad: var(--sp-4); /* 16 the screen's inset — .sheet-stack cancels it */
-  --map-ring: 10rem;    /* the rough-area ring on a map (sheet.css .map__ring) — a neighbourhood, not a house */
-  --fab: 4.5rem;      /* 72 square floating action */
-  --badge: 1.625rem;  /* 26 count badge */
-  --dot: 0.625rem;    /* 10 signal dot */
-  --dot-xs: 0.375rem; /* 6  marker dot */
+  --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 */
+  --badge: calc(var(--fs-base) * 1.625);  /* 26 count badge */
+  --dot: calc(var(--tap-base) * 5 / 24);    /* 10 signal dot */
+  --dot-xs: calc(var(--tap-base) / 8); /* 6  marker dot */
 
   /* ---- icons (icons.svg sprite, Lucide) ---- */
-  --icon: 1.75rem;    /* 28 default */
-  --icon-sm: 1.75rem; /* one size everywhere; retune if small contexts appear */
-  --icon-lg: 2rem;    /* 32 empty states */
-  --icon-xs: 1rem;    /* 16 inline with captions/chips only (row meta, link arrows) */
+  --icon: calc(var(--tap-base) * 7 / 12);    /* 28 default */
+  --icon-sm: calc(var(--tap-base) * 7 / 12); /* one size everywhere; retune if small contexts appear */
+  --icon-lg: calc(var(--tap-base) * 2 / 3);    /* 32 empty states */
+  --icon-xs: var(--fs-base);    /* 16 inline with captions/chips only (row meta, link arrows) */
 
   /* ---- people & big elements ---- */
-  --avatar-sm: 2.5rem;  /* 40 row lead */
-  --avatar: 3.5rem;     /* 56 card head, person row */
-  --avatar-lg: 5rem;    /* 80 chooser row */
-  --avatar-xl: 6rem;    /* 96 sheet head icon ring */
-  --ring: 11rem;        /* 176 .ring gauge diameter */
-  --ring-w: 1.375rem;   /* 22 .ring stroke */
-  --tile-min: 7.5rem;   /* 120 .tile-grid column floor */
-  --tile-h: 8.25rem;    /* 132 tile / band height */
+  --avatar-sm: calc(var(--tap-base) * 5 / 6);  /* 40 row lead */
+  --avatar: calc(var(--tap-base) * 7 / 6);     /* 56 card head, person row */
+  --avatar-lg: calc(var(--tap-base) * 5 / 3);    /* 80 chooser row */
+  --avatar-xl: calc(var(--tap-base) * 2);    /* 96 sheet head icon ring */
+  --ring: calc(var(--tap-base) * 11 / 3);        /* 176 .ring gauge diameter */
+  --ring-w: calc(var(--tap-base) * 11 / 24);   /* 22 .ring stroke */
+  --tile-min: calc(var(--tap-base) * 5 / 2);   /* 120 .tile-grid column floor */
+  --tile-h: calc(var(--tap-base) * 11 / 4);    /* 132 tile / band height */
 
   /* ---- radius ---- */
   --r-chip: 999px;        /* pills, chips, buttons — always fully round */
-  --r-card: 2rem;         /* 32 the one card radius: every card, row, tile, menu, sheet, fab */
-  --r-media: 1rem;        /* 16 images inside cards */
-  --r-control: 0.875rem;  /* 14 fields, thumbs, menu rows */
-  --r-badge: 0.625rem;    /* 10 tile badge, bars */
+  --r-card: calc(var(--r-base) * 2);         /* 32 the one card radius: every card, row, tile, menu, sheet, fab */
+  --r-media: var(--r-base);        /* 16 images inside cards */
+  --r-control: calc(var(--r-base) * 0.875);  /* 14 fields, thumbs, menu rows */
+  --r-badge: calc(var(--r-base) * 0.625);    /* 10 tile badge, bars */
 
   /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
   --border-w: 1.5px;
@@ -126,22 +139,22 @@
   --font-display: "FC Pride", var(--font-ui); /* the character face for headings and big numbers (fonts.css) */
   --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
 
-  --fs-xs: 0.6875rem;      /* 11 overline */
-  --fs-caption: 0.75rem;   /* 12 */
-  --fs-label: 0.8125rem;   /* 13 */
-  --fs-sm: 0.875rem;       /* 14 chips, segments */
-  --fs-body: 0.9375rem;    /* 15 */
-  --fs-md: 1rem;           /* 16 buttons */
-  --fs-title: 1.0625rem;   /* 17 */
-  --fs-lg: 1.25rem;        /* 20 day numbers, tile values */
-  --fs-h2: 1.375rem;       /* 22 */
-  --fs-2xl: 1.5rem;        /* 24 composer, small ring */
-  --fs-h1: 1.75rem;        /* 28 */
-  --fs-3xl: 2rem;          /* 32 xl button */
-  --fs-display: clamp(2.125rem, 9vw, 2.625rem); /* 34–42 */
-  --fs-stat: clamp(1.875rem, 8vw, 2.375rem);    /* 30–38 big numbers */
-  --fs-hero: 3.5rem;                            /* 56 the one number on a sheet */
-  --fs-giant: clamp(3rem, 15vw, 4rem);          /* 48–64 data bands */
+  --fs-xs: calc(var(--fs-base) * 0.6875);      /* 11 overline */
+  --fs-caption: calc(var(--fs-base) * 0.75);   /* 12 */
+  --fs-label: calc(var(--fs-base) * 0.8125);   /* 13 */
+  --fs-sm: calc(var(--fs-base) * 0.875);       /* 14 chips, segments */
+  --fs-body: calc(var(--fs-base) * 0.9375);    /* 15 */
+  --fs-md: var(--fs-base);           /* 16 buttons */
+  --fs-title: calc(var(--fs-base) * 1.0625);   /* 17 */
+  --fs-lg: calc(var(--fs-base) * 1.25);        /* 20 day numbers, tile values */
+  --fs-h2: calc(var(--fs-base) * 1.375);       /* 22 */
+  --fs-2xl: calc(var(--fs-base) * 1.5);        /* 24 composer, small ring */
+  --fs-h1: calc(var(--fs-base) * 1.75);        /* 28 */
+  --fs-3xl: calc(var(--fs-base) * 2);          /* 32 xl button */
+  --fs-display: clamp(calc(var(--fs-base) * 2.125), 9vw, calc(var(--fs-base) * 2.625)); /* 34–42 */
+  --fs-stat: clamp(calc(var(--fs-base) * 1.875), 8vw, calc(var(--fs-base) * 2.375));    /* 30–38 big numbers */
+  --fs-hero: calc(var(--fs-base) * 3.5);                            /* 56 the one number on a sheet */
+  --fs-giant: clamp(calc(var(--fs-base) * 3), 15vw, calc(var(--fs-base) * 4));          /* 48–64 data bands */
 
   /* level      weight size / line-height family */
   --type-display: 800 var(--fs-display) / 1.15 var(--font-display); /* leading: Thai marks stack to 1.1em up and 0.3em down in FC Pride — 1.02 clipped them (2026-09-10) */
@@ -161,35 +174,53 @@
   /* ============================================================
      COLOR ROLES — wireframe defaults (grayscale).
      palette.css overrides these under [data-palette="…"].
+
+     THE FIVE COLOUR BASES (Lh, 2026-09-20) — a project's own colours, the
+     same idea as the size bases: set a base, the roles follow.
+       --color-surface   the app's ground
+       --color-ink       the words
+       --color-paper     the plain card, neutral buttons and fields
+       --color-brand     the primary action, the strong card, the signal dot
+       --color-on-brand  the words on the brand
+     They have NO default: unset, every role below is its exact wireframe
+     value. That is what the fallbacks are for — a private mix (--_*) that
+     reads an unset base is invalid, so var(--_x, #grey) lands on the grey.
+     Set, the roles derive: tone 2 = the brand washed into the surface, the
+     muted inks = the ink washed into their ground. A role set directly
+     (a palette, or a project's theme.css) always wins over its derivation.
      ============================================================ */
+  --_muted-on-surface: color-mix(in srgb, var(--color-ink) 66%, var(--color-surface, #f2f2f0));
+  --_muted-on-paper: color-mix(in srgb, var(--color-ink) 66%, var(--color-paper, #ffffff));
+  --_tone-2: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface, #f2f2f0));
+  --_muted-on-tone-2: color-mix(in srgb, var(--color-ink, #141414) 72%, var(--_tone-2));
 
   /* app background ("earth-toned surface or shiny color, up to the app") */
-  --surface: #f2f2f0;
-  --on-surface: #141414;
-  --on-surface-muted: #6b6b6b;
+  --surface: var(--color-surface, #f2f2f0);
+  --on-surface: var(--color-ink, #141414);
+  --on-surface-muted: var(--_muted-on-surface, #6b6b6b);
 
   /* card boundaries — 3 slots so stacked/adjacent cards can differ */
-  --card-1-bg: #ffffff;  --card-1-ink: #141414;
-  --card-2-bg: #e6e6e3;  --card-2-ink: #141414;
-  --card-3-bg: #141414;  --card-3-ink: #ffffff;
+  --card-1-bg: var(--color-paper, #ffffff);  --card-1-ink: var(--color-ink, #141414);
+  --card-2-bg: var(--_tone-2, #e6e6e3);  --card-2-ink: var(--color-ink, #141414);
+  --card-3-bg: var(--color-brand, #141414);  --card-3-ink: var(--color-on-brand, #ffffff);
 
   --card-border: #141414;      /* wireframe: visible outline; palettes may set transparent */
-  --card-muted: #6b6b6b;       /* secondary text inside cards (the default, tone-1 card) */
-  --card-2-muted: #5f5f5f;     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
+  --card-muted: var(--_muted-on-paper, #6b6b6b);       /* secondary text inside cards (the default, tone-1 card) */
+  --card-2-muted: var(--_muted-on-tone-2, #5f5f5f);     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
                                   a palette whose tone-2 ground is strong
                                   sets this to its tone-2 ink — a muted shade cannot reach AA there (clay) */
 
   /* actions */
-  --accent: #141414;           /* primary CTA fill */
-  --on-accent: #ffffff;
-  --action-bg: #ffffff;        /* neutral buttons/chips/inputs */
-  --action-ink: #141414;
+  --accent: var(--color-brand, #141414);           /* primary CTA fill */
+  --on-accent: var(--color-on-brand, #ffffff);
+  --action-bg: var(--color-paper, #ffffff);        /* neutral buttons/chips/inputs */
+  --action-ink: var(--color-ink, #141414);
   --action-border: #141414;
 
   /* signals (chip dots, deltas) */
   --pos: #8a8a8a;
   --neg: #3d3d3d;
-  --dot-a: #141414;
+  --dot-a: var(--color-brand, #141414);
   --dot-b: #8a8a8a;
 
   /* derived tints — read the element's own ink, so they work on any slot */
@@ -330,6 +361,11 @@
 
 /* Colored palettes trade wireframe outlines for soft elevation. */
 [data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
+/* COLOURED MODE is the attribute, whatever its value: a project with colours of its own (the five
+   --color-* bases, or roles, in its theme.css) writes <html data-palette="own"> — no block here matches
+   "own", so only the three generic rules apply: the card's shadow, the soft outline, the field's soft
+   edge (forms.css); and the two wireframe borders step back, as in every stock palette. */
+[data-palette] { --card-border: transparent; --action-border: transparent; }
 /* …but controls keep a faint edge so they still read as controls */
 [data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }
 
@@ -344,7 +380,7 @@
    in cards, rows and bodies stay selectable (an address, a code, a number
    the member wants to copy), and inputs are untouched. Native buttons and
    links are matched by element; the rest by the class that makes them one */
-button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--toggle, .chip--pick,
+button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--pick,
 .segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .dropdown__trigger, .track__step, .pager__at {
   user-select: none;
   -webkit-user-select: none;
@@ -1603,7 +1639,7 @@ button { font: inherit; cursor: pointer; }
 .appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
 /* the bar's trailing controls (one or two: a labelled switch chip, a wallet button — home,
    Lh 2026-09-13) stand on the tap floor: a chip that is a switch grows to --tap here */
-.appbar .chip--toggle { min-height: var(--tap); }
+.appbar .chip--pick { min-height: var(--tap); }
 
 /* ---- icon button (round) ---- */
 .icon-btn {
@@ -2237,27 +2273,11 @@ button { font: inherit; cursor: pointer; }
 .toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); opacity: 1; }
 .toggle:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 
-/* ---- toggle chip: interest / filter picker — shows + off, × on ----
-   <label class="chip chip--toggle"><input type="checkbox">Nature</label> */
-.chip--toggle { cursor: pointer; padding-right: var(--sp-2); }
-.chip--toggle > input { appearance: none; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
-.chip--toggle::after {
-  content: "";
-  width: var(--icon-xs);
-  height: var(--icon-xs);
-  flex: none;
-  background: currentColor;
-  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
-  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
-}
-.chip--toggle:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
-/* checked: the same plus turns 45° into an x — one mask, one rotate, no swap (Lh 2026-09-16) */
-.chip--toggle:has(:checked)::after { rotate: 45deg; }
-@media (prefers-reduced-motion: no-preference) { .chip--toggle::after { transition: rotate var(--motion-slide); } }
-.chip--toggle:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
-
-/* ---- chip grid: pick one slot / many options in a grid ----
-   <div class="chip-grid"><label class="chip chip--pick"><input type="radio" name="t">9:00</label>…</div> */
+/* ---- chip pick: a chip that is a choice — a native radio/checkbox inside the label, the picked one filled with accent.
+   Full-width in a .chip-grid (one slot / many options), or hugging its word on a .chip-row with --sign (an interest
+   picker: + off, × on). Was two things, .chip--toggle and .chip--pick — one chip, one state, the sign is a variant (Lh 2026-09-16).
+   <div class="chip-grid"><label class="chip chip--pick"><input type="radio" name="t">9:00</label>…</div>
+   <div class="chip-row"><label class="chip chip--pick chip--sign"><input type="checkbox">Nature</label>…</div> */
 .chip-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
@@ -2268,10 +2288,23 @@ button { font: inherit; cursor: pointer; }
    Matters most in scripts without word spaces (Thai): min-content is the
    whole string, tracks get wide, and hugging chips leave a ragged grid. */
 .chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); position: relative; }
-.chip--pick { cursor: pointer; }
+.chip--pick { cursor: pointer; position: relative; } /* the input covers the whole chip, on a row as in a grid */
 .chip--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
 .chip--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 .chip--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+/* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
+.chip--sign { padding-right: var(--sp-2); }
+.chip--sign::after {
+  content: "";
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  flex: none;
+  background: currentColor;
+  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
+  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
+}
+.chip--sign:has(:checked)::after { rotate: 45deg; }
+@media (prefers-reduced-motion: no-preference) { .chip--sign::after { transition: rotate var(--motion-slide); } }
 
 /* ---- day strip: a week, one day selected ----
    <div class="day-strip" role="tablist"><button class="day" role="tab" aria-selected="true"><span class="day__name">Thu</span><span class="day__num">16</span></button>…</div> */
@@ -2550,6 +2583,56 @@ button { font: inherit; cursor: pointer; }
 .kv-cell__key { font: var(--type-caption); color: var(--card-muted); }
 .card--3 .kv-cell__key { color: inherit; opacity: 0.7; }
 
+/* ---- bubble: a chat message — theirs on the left, mine on the right (Lh 2026-09-18, replaces the chip's tail) ----
+   No tail: a rounded block whose corner nearest the sender is square-ish
+   (bottom-left for theirs, bottom-right for mine), the way messaging apps
+   draw it. Under it a caption line (time · a tick), beside it small round
+   actions (a heart, more). A .thread stacks them.
+   <div class="thread">
+     <div class="bubble"><p class="bubble__body">…</p><span class="bubble__actions">…icon-btns…</span><span class="bubble__meta">Dec 4 · 8:15</span></div>
+     <div class="bubble bubble--right">…</div>
+   </div> */
+.thread { display: grid; gap: var(--sp-4); }
+/* two columns: the message (max-content, but it gives way — minmax(0) — so a long one shrinks
+   and wraps while the actions stay beside it) and the actions; the meta on a second row under the message */
+.bubble {
+  display: grid;
+  grid-template-columns: minmax(0, max-content) auto;
+  justify-content: start;
+  align-items: center;
+  gap: var(--sp-1) var(--sp-3);
+  max-width: 88%;
+  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 */
+.bubble__body, .bubble__meta { grid-column: 1; }
+.bubble__actions { grid-column: 2; grid-row: 1; }
+.bubble--right > :is(.bubble__body, .bubble__meta) { grid-column: 2; }
+.bubble--right > .bubble__actions { grid-column: 1; }
+.bubble__body {
+  margin: 0;
+  min-width: 0;
+  padding: var(--sp-3) var(--sp-4);
+  border-radius: var(--r-card);
+  border-bottom-left-radius: var(--r-control);
+  background: var(--card-2-bg);
+  color: var(--card-2-ink);
+  font: var(--type-body);
+  overflow-wrap: anywhere;
+}
+.bubble--right > .bubble__body {
+  border-bottom-left-radius: var(--r-card);
+  border-bottom-right-radius: var(--r-control);
+  background: var(--accent);
+  color: var(--on-accent);
+  text-align: right;
+}
+.bubble__actions { display: flex; gap: var(--sp-1); flex: none; opacity: 0.7; }
+.bubble__meta { display: flex; align-items: center; gap: var(--sp-1); font: var(--type-caption); color: var(--on-surface-muted); }
+.bubble--right > .bubble__meta { justify-self: end; }
+.bubble__meta > .icon { color: var(--accent); }
+.card--3 .bubble__meta { color: inherit; opacity: 0.7; }
+
 /* ---- timeline: a hairline with date chips, entries to the right ----
    <ol class="timeline"><li class="timeline__item"><span class="timeline__mark">Wed 14</span><p class="t-body">…</p></li>…</ol> */
 .timeline {
@@ -3122,22 +3205,6 @@ button { font: inherit; cursor: pointer; }
 }
 .callout__title { font: var(--type-title); }
 .callout__sub { font: var(--type-caption); opacity: 0.7; }
-/* speech chip: a chip with the same tail (mascot / greeting) */
-.chip--bubble { position: relative; }
-.chip--bubble::after {
-  content: "";
-  position: absolute;
-  left: var(--sp-4);
-  bottom: calc(-1 * var(--sp-2) + var(--border-w));
-  width: var(--sp-3);
-  height: var(--sp-3);
-  rotate: 45deg;
-  background: inherit;
-  border: inherit;
-  border-top: 0;
-  border-left: 0;
-}
-
 /* ---- deck: swipe cards; the last child is on top ----
    <div class="deck"><article class="card">…</article><article class="card">…</article><article class="card card--fold">front</article></div>
    <div class="deck__actions"><button class="icon-btn">×</button><button class="icon-btn icon-btn--invert">✓</button></div> */

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export * from './lists/Row.js';
 export * from './lists/Kv.js';
 export * from './lists/Timeline.js';
 export * from './lists/Legend.js';
+export * from './lists/Bubble.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';
 export * from './media/MapArea.js';

package/dist/index.js

@@ -62,6 +62,7 @@ export * from './lists/Row.js';
 export * from './lists/Kv.js';
 export * from './lists/Timeline.js';
 export * from './lists/Legend.js';
+export * from './lists/Bubble.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';
 export * from './media/MapArea.js';

package/dist/lists/Bubble.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface ThreadProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Thread — a stack of Bubbles: a conversation. */
+export declare function Thread({ className, ...rest }: ThreadProps): import("react").JSX.Element;
+export interface BubbleProps extends ComponentPropsWithoutRef<'div'> {
+    /** whose: theirs on the left (default), mine on the right */
+    side?: 'left' | 'right';
+    /** the caption under the message — a time, a tick (an Icon) */
+    meta?: ReactNode;
+    /** small round buttons beside the message (a heart, more) */
+    actions?: ReactNode;
+}
+/**
+ * Bubble — a chat message: a rounded block, its corner nearest the sender squared (bottom-left for theirs, bottom-right
+ * for mine), no tail. `meta` sits under it on the sender's side, `actions` beside it. Stack them in a Thread.
+ */
+export declare function Bubble({ side, meta, actions, className, children, ...rest }: BubbleProps): import("react").JSX.Element;

package/dist/lists/Bubble.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/** Thread — a stack of Bubbles: a conversation. */
+export function Thread({ className, ...rest }) {
+    return _jsx("div", { className: cx('thread', className), ...rest });
+}
+/**
+ * Bubble — a chat message: a rounded block, its corner nearest the sender squared (bottom-left for theirs, bottom-right
+ * for mine), no tail. `meta` sits under it on the sender's side, `actions` beside it. Stack them in a Thread.
+ */
+export function Bubble({ side = 'left', meta, actions, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('bubble', side === 'right' && 'bubble--right', className), ...rest, children: [_jsx("p", { className: "bubble__body", children: children }), actions != null && _jsx("span", { className: "bubble__actions", children: actions }), meta != null && _jsx("span", { className: "bubble__meta", children: meta })] }));
+}

package/dist/scaffold/AppBar.d.ts

@@ -7,7 +7,7 @@ export interface AppBarProps extends Omit<ComponentPropsWithoutRef<'header'>, 't
     /** the second line under the title */
     sub?: ReactNode;
     /** the trailing control(s) — an IconBtn with a chevron-down to switch context; on the home bar a labelled
-     * switch chip (ChipToggle, --tap tall here) and the wallet Btn, side by side (Lh 2026-09-13) */
+     * switch chip (ChipPick sign, --tap tall here) and the wallet Btn, side by side (Lh 2026-09-13) */
     action?: ReactNode;
 }
 /**

package/package.json

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