@usableapp/cardds 0.7.39 → 0.7.40

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 > 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.40 — 2026-10-01
+
+### Changed
+- **`--screen-w`: 30rem → 34.375rem (550px)** (Lh 2026-10-01). A screen 540 wide (a phone set to a small display size, a fold's outer screen) showed a 30px strip each side; it now fills edge to edge. A window wider than 550px is still held to a centred column. Check a full-width picture and a wide button on your widest device; a project that sets `--screen-w` itself is not touched.
+
 ## 0.7.39 — 2026-10-01
 
 ### Fixed

package/css/tokens.css

@@ -12,9 +12,9 @@
 
 :root {
   /* ---- layout ---- */
-  --screen-w: 30rem;      /* 480: the column's CAP — .screen, .action-bar, .sheet-stage. A phone never reaches it (the widest are ~450 CSS px):
-                             on a phone the screen is the device, edge to edge; the cap only keeps a tablet / desktop window to a phone-sized
-                             column. Was 25rem: a 412px phone showed a strip each side (Lh 2026-10-01) */
+  --screen-w: 34.375rem;  /* 550: the column's CAP — .screen, .action-bar, .sheet-stage. On a phone the screen is the device, edge to edge —
+                             also a phone set to a small display size, a fold's outer screen (540 was seen, Lh 2026-10-01); the cap only keeps
+                             a tablet / desktop window to a phone-sized column. Was 25rem (a 412px phone showed a strip each side), then 30rem */
   --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 */
 
   /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----

package/dist/cardds.css

@@ -53,9 +53,9 @@
 
 :root {
   /* ---- layout ---- */
-  --screen-w: 30rem;      /* 480: the column's CAP — .screen, .action-bar, .sheet-stage. A phone never reaches it (the widest are ~450 CSS px):
-                             on a phone the screen is the device, edge to edge; the cap only keeps a tablet / desktop window to a phone-sized
-                             column. Was 25rem: a 412px phone showed a strip each side (Lh 2026-10-01) */
+  --screen-w: 34.375rem;  /* 550: the column's CAP — .screen, .action-bar, .sheet-stage. On a phone the screen is the device, edge to edge —
+                             also a phone set to a small display size, a fold's outer screen (540 was seen, Lh 2026-10-01); the cap only keeps
+                             a tablet / desktop window to a phone-sized column. Was 25rem (a 412px phone showed a strip each side), then 30rem */
   --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 */
 
   /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----

package/dist/scaffold/Screen.d.ts

@@ -20,7 +20,7 @@ export interface ScreenProps extends ComponentProps<'div'> {
  * Screen — the mobile screen in THREE parts: **top** and **content** (the children) in one flex column, the content down to the
  * screen's foot; **bottom** a LAYER over it there (Lh 2026-09-23). Top = `TopBar` / `AppBar`, or `top="lead"` (no bar, the words start
  * 15% down). Content = a box of components one after another — a `Step` (`Pages` of `Page`s / a `Page` [+ `Sheet`]), a `Centre`, a
- * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 30rem wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
+ * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 34.375rem (550px) wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
  * ONE OUTCOME, DRAWN ONCE (Lh 2026-10-01): a screen that can come out more than one way is not drawn until the app knows which —
  * `ready={false}` until then.
  * The slots set the order; children laid by hand in the same order still work.

package/dist/scaffold/Screen.js

@@ -5,7 +5,7 @@ import { cx } from '../cx.js';
  * Screen — the mobile screen in THREE parts: **top** and **content** (the children) in one flex column, the content down to the
  * screen's foot; **bottom** a LAYER over it there (Lh 2026-09-23). Top = `TopBar` / `AppBar`, or `top="lead"` (no bar, the words start
  * 15% down). Content = a box of components one after another — a `Step` (`Pages` of `Page`s / a `Page` [+ `Sheet`]), a `Centre`, a
- * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 30rem wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
+ * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 34.375rem (550px) wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
  * ONE OUTCOME, DRAWN ONCE (Lh 2026-10-01): a screen that can come out more than one way is not drawn until the app knows which —
  * `ready={false}` until then.
  * The slots set the order; children laid by hand in the same order still work.

package/package.json

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