@usableapp/cardds 0.6.16 → 0.7.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.7.0 — 2026-09-24
+
+Breaking — the clean-up promised since 0.6.5. Four renames/removals, one new way.
+
+### A bar on a scrolling screen goes INSIDE the Screen
+- Before: on a screen that is not `fill` (it scrolls), the `ActionBar` was written after `</Screen>`, fixed to the
+  viewport, and the screen reserved `--bar-reserve` at its bottom. After: write it as `<Screen bottom={<ActionBar>…}>`
+  like on a fill screen. The screen becomes a column at least one phone tall; the bar is its last row, `position: sticky`
+  at the viewport's foot (above the keyboard) — in reach while the words scroll, under them when they end.
+  `validateScreen` already reports a bar after `</Screen>`. Story `ActionBar · OnAScrollingScreen`.
+
+### `BaseContent` removed
+- Before: `BaseContent` (an alias that warned). After: `Page` — same props, same markup.
+
+### `--base-content-*` knobs renamed `--page-*` (no fallback)
+- `--base-content-media-h` → `--page-media-h`, and likewise `-gap`, `-pad-y`, `-body-ink`. The old names do nothing now:
+  rename them in your theme.css.
+
+### `Bubble actions` removed
+- Before: small buttons beside a chat message (`actions`, `.bubble__actions`, knob `--bubble-actions-gap`). After: gone —
+  a Bubble is the message and its `meta`. The bubble is one column now.
+
 ## 0.6.16 — 2026-09-24
 
 ### iOS 16.4 supported (was 18.3)

package/README.md

@@ -246,9 +246,10 @@ whose markup has rules, because the sheet's box is the step itself:
   step that follows anything else keeps the screen's gap, and the sheet
   stops under that thing.
 - **The bar is after the step, inside the screen** (the screen's bottom — *Screen: top · content · bottom*). In a
-  `.screen--fill` the step and the bar share one flex column and touch; the step takes the rest. (A bar outside a
-  fill screen — an app shell — is still fixed to the viewport and the step reads `--bar-reserve`: the old way,
-  kept until 0.7.0.)
+  `.screen--fill` the bar is a layer over the content's foot. On a SCROLLING screen (not fill, 0.7.0) the screen is a
+  column at least one phone tall and the bar its last row, `position: sticky` at the viewport's foot (above `--kb`):
+  it stays in reach while the words scroll and sits under them when they end. Either way the bar is written INSIDE
+  the Screen (`bottom`) — a bar after `</Screen>` is an error (`validateScreen`).
 - **Every sheet has one shape** (Lh 2026-09-21): the handle and the head stay at the top and never scroll · the
   foot's button stands at the bottom — above the keyboard when there is one (`--kb`: a step gives the keyboard
   its room, a stage sheet gives it up itself as `--_lift`) · everything between them scrolls, as far as it

package/css/actions.css

@@ -238,6 +238,15 @@
   display: flex;
   gap: var(--sp-2);
 }
+/* a bar INSIDE a scrolling (not fill) screen (Lh 2026-09-24, 0.7.0): the screen is a column at least one phone tall, the bar its
+   last row — at the foot when the words are short, and sticky to the viewport's foot (above the keyboard) while they scroll;
+   it takes the room it needs in the column, so nothing is added to the content for it */
+.screen:not(.screen--fill):has(> .action-bar) { display: flex; flex-direction: column; min-height: 100dvh; }
+.screen:not(.screen--fill) > .action-bar {
+  position: sticky; inset-inline: auto; bottom: var(--kb, 0rem);
+  max-width: none;
+  margin: auto calc(-1 * var(--screen-pad)) 0;
+}
 .action-bar .btn { flex: 1; box-shadow: var(--shadow-float); }
 .action-bar .icon-btn { width: var(--btn-h); height: var(--btn-h); box-shadow: var(--shadow-float); }
 

package/css/base.css

@@ -115,18 +115,18 @@ button { font: inherit; cursor: pointer; }
    In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
 .page {
   display: grid;
-  gap: var(--base-content-gap, var(--sp-3));
+  gap: var(--page-gap, var(--sp-3));
   align-content: start;          /* a tall column never stretches the rows — the words hug the top */
-  padding-block: var(--base-content-pad-y, var(--sp-4));
+  padding-block: var(--page-pad-y, var(--sp-4));
 }
-.page > .t-body { color: var(--base-content-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
+.page > .t-body { color: var(--page-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
 /* an illustration among the words (Lh 2026-09-22): capped, so a tall picture never pushes the words under the bar;
    (the walk's dots are NOT here — they are the Step's, after its Pages: step.css, Lh 2026-09-22) */
 /* the page's ONE heading on the base (a screen with no TopBar: CardHead level="h1") reads at the card heading's size —
    h1 is the semantic level, not a bigger face; --fs-h1 is the bar title's size (Lh 2026-09-22) */
 .page > .card__head > .t-h1 { font-size: var(--fs-h2); }
-.page > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
-.page > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
+.page > :is(img, .ph) { max-height: var(--page-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
+.page > .ph { width: 100%; height: var(--page-media-h, 14rem); }
 .page .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */

package/css/lists.css

@@ -98,29 +98,23 @@
 /* ---- 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.
+   draw it. Under it a caption line (time · a tick). 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"><p class="bubble__body">…</p><span class="bubble__meta">Dec 4 · 8:15</span></div>
      <div class="bubble bubble--right">…</div>
    </div> */
 .thread { display: grid; gap: var(--thread-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 */
+/* one column: the message (max-content, but it gives way — minmax(0) — so a long one shrinks and wraps); the meta under it */
 .bubble {
   display: grid;
-  grid-template-columns: minmax(0, max-content) auto;
+  grid-template-columns: minmax(0, max-content);
   justify-content: start;
   align-items: center;
   gap: var(--sp-1) var(--sp-3);
   max-width: var(--bubble-max-w, 75%); /* a message may run to three quarters of the thread (Lh 2026-09-23) */
   margin-right: auto;            /* theirs: hugs the left */
 }
-.bubble--right { grid-template-columns: auto minmax(0, max-content); justify-content: end; margin-right: 0; margin-left: auto; } /* mine: hugs the right, the actions on its left */
-.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--right { justify-content: end; margin-right: 0; margin-left: auto; } /* mine: hugs the right */
 .bubble__body {
   margin: 0;
   min-width: 0;
@@ -139,7 +133,6 @@
   color: var(--on-accent);
   text-align: right;
 }
-.bubble__actions { display: flex; gap: var(--bubble-actions-gap, var(--sp-1)); flex: none; opacity: 0.7; }
 .bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--on-surface-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
 .bubble__meta > .icon { color: var(--accent); }

package/css/stack.css

@@ -230,7 +230,7 @@
   gap: var(--card-gap, var(--sp-5));
   overflow: clip;
 }
-/* a base that is ONE BaseContent is a page's words (a title, a welcome, the news): it reads from the TOP, like any page —
+/* a base that is ONE Page is a page's words (a title, a welcome, the news): it reads from the TOP, like any page —
    loose things (a picture, a line) still sit against the peeks (Lh 2026-09-23, the home) */
 .sheet-stack__base:has(> .page:only-child) { align-content: start; }
 

package/css/step.css

@@ -145,13 +145,13 @@
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
 /* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
-   the lead + the picture's own height (--base-content-media-h), square — so the words start where they always did */
+   the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
 .step > .pages > .page > :is(img, .ph):first-child {
   width: calc(100% + 2 * var(--screen-pad)); /* the content's width: the page's inset given back */
   max-width: none;
   margin-inline: calc(-1 * var(--screen-pad));
-  height: calc(var(--_lead, 0rem) + var(--base-content-media-h, 14rem));
+  height: calc(var(--_lead, 0rem) + var(--page-media-h, 14rem));
   max-height: none;
   border-radius: 0;
   border-inline: 0;

package/dist/cardds.css

@@ -495,18 +495,18 @@ button { font: inherit; cursor: pointer; }
    In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
 .page {
   display: grid;
-  gap: var(--base-content-gap, var(--sp-3));
+  gap: var(--page-gap, var(--sp-3));
   align-content: start;          /* a tall column never stretches the rows — the words hug the top */
-  padding-block: var(--base-content-pad-y, var(--sp-4));
+  padding-block: var(--page-pad-y, var(--sp-4));
 }
-.page > .t-body { color: var(--base-content-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
+.page > .t-body { color: var(--page-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
 /* an illustration among the words (Lh 2026-09-22): capped, so a tall picture never pushes the words under the bar;
    (the walk's dots are NOT here — they are the Step's, after its Pages: step.css, Lh 2026-09-22) */
 /* the page's ONE heading on the base (a screen with no TopBar: CardHead level="h1") reads at the card heading's size —
    h1 is the semantic level, not a bigger face; --fs-h1 is the bar title's size (Lh 2026-09-22) */
 .page > .card__head > .t-h1 { font-size: var(--fs-h2); }
-.page > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
-.page > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
+.page > :is(img, .ph) { max-height: var(--page-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
+.page > .ph { width: 100%; height: var(--page-media-h, 14rem); }
 .page .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */
@@ -1073,7 +1073,7 @@ button { font: inherit; cursor: pointer; }
   gap: var(--card-gap, var(--sp-5));
   overflow: clip;
 }
-/* a base that is ONE BaseContent is a page's words (a title, a welcome, the news): it reads from the TOP, like any page —
+/* a base that is ONE Page is a page's words (a title, a welcome, the news): it reads from the TOP, like any page —
    loose things (a picture, a line) still sit against the peeks (Lh 2026-09-23, the home) */
 .sheet-stack__base:has(> .page:only-child) { align-content: start; }
 
@@ -1678,13 +1678,13 @@ button { font: inherit; cursor: pointer; }
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
 /* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
-   the lead + the picture's own height (--base-content-media-h), square — so the words start where they always did */
+   the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
 .step > .pages > .page > :is(img, .ph):first-child {
   width: calc(100% + 2 * var(--screen-pad)); /* the content's width: the page's inset given back */
   max-width: none;
   margin-inline: calc(-1 * var(--screen-pad));
-  height: calc(var(--_lead, 0rem) + var(--base-content-media-h, 14rem));
+  height: calc(var(--_lead, 0rem) + var(--page-media-h, 14rem));
   max-height: none;
   border-radius: 0;
   border-inline: 0;
@@ -2070,6 +2070,15 @@ button { font: inherit; cursor: pointer; }
   display: flex;
   gap: var(--sp-2);
 }
+/* a bar INSIDE a scrolling (not fill) screen (Lh 2026-09-24, 0.7.0): the screen is a column at least one phone tall, the bar its
+   last row — at the foot when the words are short, and sticky to the viewport's foot (above the keyboard) while they scroll;
+   it takes the room it needs in the column, so nothing is added to the content for it */
+.screen:not(.screen--fill):has(> .action-bar) { display: flex; flex-direction: column; min-height: 100dvh; }
+.screen:not(.screen--fill) > .action-bar {
+  position: sticky; inset-inline: auto; bottom: var(--kb, 0rem);
+  max-width: none;
+  margin: auto calc(-1 * var(--screen-pad)) 0;
+}
 .action-bar .btn { flex: 1; box-shadow: var(--shadow-float); }
 .action-bar .icon-btn { width: var(--btn-h); height: var(--btn-h); box-shadow: var(--shadow-float); }
 
@@ -2941,29 +2950,23 @@ button { font: inherit; cursor: pointer; }
 /* ---- 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.
+   draw it. Under it a caption line (time · a tick). 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"><p class="bubble__body">…</p><span class="bubble__meta">Dec 4 · 8:15</span></div>
      <div class="bubble bubble--right">…</div>
    </div> */
 .thread { display: grid; gap: var(--thread-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 */
+/* one column: the message (max-content, but it gives way — minmax(0) — so a long one shrinks and wraps); the meta under it */
 .bubble {
   display: grid;
-  grid-template-columns: minmax(0, max-content) auto;
+  grid-template-columns: minmax(0, max-content);
   justify-content: start;
   align-items: center;
   gap: var(--sp-1) var(--sp-3);
   max-width: var(--bubble-max-w, 75%); /* a message may run to three quarters of the thread (Lh 2026-09-23) */
   margin-right: auto;            /* theirs: hugs the left */
 }
-.bubble--right { grid-template-columns: auto minmax(0, max-content); justify-content: end; margin-right: 0; margin-left: auto; } /* mine: hugs the right, the actions on its left */
-.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--right { justify-content: end; margin-right: 0; margin-left: auto; } /* mine: hugs the right */
 .bubble__body {
   margin: 0;
   min-width: 0;
@@ -2982,7 +2985,6 @@ button { font: inherit; cursor: pointer; }
   color: var(--on-accent);
   text-align: right;
 }
-.bubble__actions { display: flex; gap: var(--bubble-actions-gap, var(--sp-1)); flex: none; opacity: 0.7; }
 .bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--on-surface-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
 .bubble__meta > .icon { color: var(--accent); }

package/dist/lists/Bubble.d.ts

@@ -8,11 +8,9 @@ export interface BubbleProps extends ComponentProps<'div'> {
     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.
+ * for mine), no tail. `meta` sits under it on the sender's side. Stack them in a Thread.
  */
-export declare function Bubble({ side, meta, actions, className, children, ...rest }: BubbleProps): import("react").JSX.Element;
+export declare function Bubble({ side, meta, className, children, ...rest }: BubbleProps): import("react").JSX.Element;

package/dist/lists/Bubble.js

@@ -6,8 +6,8 @@ export function 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.
+ * for mine), no tail. `meta` sits under it on the sender's side. 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 })] }));
+export function Bubble({ side = 'left', meta, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('bubble', side === 'right' && 'bubble--right', className), ...rest, children: [_jsx("p", { className: "bubble__body", children: children }), meta != null && _jsx("span", { className: "bubble__meta", children: meta })] }));
 }

package/dist/scaffold/Page.d.ts

@@ -8,9 +8,6 @@ export interface PageProps extends ComponentProps<'section'> {
  * a still, one-scaffold screen, which is gone.
  */
 export declare function Page({ className, ...rest }: PageProps): import("react").JSX.Element;
-/** @deprecated renamed `Page` (2026-09-23) — same props, same markup; kept one version for the move */
-export declare function BaseContent(props: PageProps): import("react").JSX.Element;
-export type BaseContentProps = PageProps;
 export interface CtaPackProps extends ComponentProps<'div'> {
 }
 /** CtaPack — the buttons under a Page's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */

package/dist/scaffold/Page.js

@@ -9,15 +9,6 @@ import { cx } from '../cx.js';
 export function Page({ className, ...rest }) {
     return _jsx("section", { className: cx('page', className), ...rest });
 }
-let warned = false;
-/** @deprecated renamed `Page` (2026-09-23) — same props, same markup; kept one version for the move */
-export function BaseContent(props) {
-    if (!warned) {
-        warned = true;
-        console.warn('cardds: BaseContent is now Page — rename it (same props).');
-    }
-    return _jsx(Page, { ...props });
-}
 /** CtaPack — the buttons under a Page's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */
 export function CtaPack({ className, ...rest }) {
     return _jsx("div", { className: cx('cta-pack', className), ...rest });

package/package.json

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