@usableapp/cardds 0.7.64 → 0.7.66

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 > 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.66 — 2026-10-06
+
+### Added
+- **`Sticky onClick`: the whole note is the button** (Lh 2026-10-06) — pass `onClick` and the note renders a `<button>`: a tap anywhere on it, a focus ring, and it KEEPS its folded corner. Before: only an `IconBtn` in `corner` could be pressed, and a note with `corner` has no fold. `<Sticky onClick={open}>…</Sticky>`. With `corner` the note stays a plain box (a button cannot hold a button).
+- **A `Centre` as a closed stack's `base` stands in the middle** (Lh 2026-10-06) — `Home base={<Centre>…</Centre>}` / `SheetStack base`: the block sits in the middle of the room above the sheet heads. Before it sat against the heads, as loose things in a base do. A base that is one `Page` still reads from the top.
+
+### Changed
+- **A tilted `square` note is sized by the screen** (Lh 2026-10-06) — `<Sticky square tilt>` is three quarters of the screen's width inside its inset (255px on a 375 phone), on any phone. Before: `--sticky-square-max-w` (336px at the defaults), which a screen had to cut down with `style`. Remove that `style`; to tune it, set `--sticky-tilt-max-w` in your `theme.css`. A straight `square` note is unchanged.
+
+## 0.7.65 — 2026-10-06
+
+### Changed
+- **A `paper` stack sheet's head band is 4px taller** (Lh 2026-10-06) — the white starts 12px (`--sp-3`) under the head, it was 8px (`--sp-2`): the coloured band of an open sheet is 81.5px tall at the defaults, it was 77.5. `SheetStack` / `Home` sheets with `paper` only; a single paper `Sheet`, a stack sheet without `paper`, and the peeked heads are unchanged. Nothing to change in a screen; a test that measured the gap under the head reads 12.
+
 ## 0.7.64 — 2026-10-06
 
 ### Added

package/css/stack.css

@@ -289,6 +289,10 @@
 /* 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; }
+/* a base that is ONE Centre is one thing handed over (a note, an empty state): it stands in the MIDDLE of the room above the peeks
+   (Lh 2026-10-06). The base already keeps the screen's inset, so the centre block gives its own back. */
+.sheet-stack__base:has(> .screen__centre:only-child) { align-content: center; }
+.sheet-stack__base > .screen__centre { padding-inline: 0; }
 
 /* back button: lives in a slot the header reserves once open, and DISSOLVES
    into it — an opacity fade in place, never a slide in from the left (the
@@ -336,10 +340,10 @@
    sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
    at the moment the sheet stops. Rising, the body is white at once. */
 /* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the white starts
-   --sp-2 under the head, not a whole --card-gap. The body is pulled up by the difference — the card's gap is left alone, the
+   --sp-3 under the head, not a whole --card-gap (--sp-2 at first; Lh added 4 the same day). The body is pulled up by the difference — the card's gap is left alone, the
    stack's step and the body's own rows read it. */
 .sheet-stack > .card.sheet--paper > .sheet__body {
-  margin-top: calc(var(--sp-2) - var(--card-gap));
+  margin-top: calc(var(--sp-3) - var(--card-gap));
   padding-top: calc(var(--sp-6) + var(--_refresh, 0px));
   transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
 }

package/css/sticky.css

@@ -113,6 +113,16 @@
   mask: radial-gradient(circle at 100% 100%, transparent calc(var(--_notch) - var(--border-w)), #000 var(--_notch));
 }
 
+/* a tilted square is sized by the SCREEN, not by a length: three quarters of its width inside the inset, about two thirds of the glass (Lh 2026-10-06) — the turned corners
+   keep clear of the edges on any phone. cqw reads the fill screen (the size container). After --square, so it wins. */
+.sticky--square.sticky--tilt-left, .sticky--square.sticky--tilt-right { max-width: var(--sticky-tilt-max-w, 75cqw); }
+
+/* --tap: the whole note is the button (`onClick`). The fold stays; the ring follows the note's turn. */
+.sticky--tap { appearance: none; border: 0; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.sticky--tap .sticky__body, .sticky--tap .sticky__foot { display: block; }
+.sticky--tap:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+.sticky--tap:active > .sticky__paper { translate: 0 var(--sp-0); }
+
 /* ---- sticky field: the words written ON a note — a bare textarea in the note's type and ink, filling it ----
    <div class="sticky__body"><textarea class="sticky-field" aria-label="Note" placeholder="Add text to this note"></textarea></div> */
 .sticky__body:has(> .sticky-field) { display: grid; }

package/dist/cardds.css

@@ -1291,6 +1291,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* 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; }
+/* a base that is ONE Centre is one thing handed over (a note, an empty state): it stands in the MIDDLE of the room above the peeks
+   (Lh 2026-10-06). The base already keeps the screen's inset, so the centre block gives its own back. */
+.sheet-stack__base:has(> .screen__centre:only-child) { align-content: center; }
+.sheet-stack__base > .screen__centre { padding-inline: 0; }
 
 /* back button: lives in a slot the header reserves once open, and DISSOLVES
    into it — an opacity fade in place, never a slide in from the left (the
@@ -1338,10 +1342,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
    at the moment the sheet stops. Rising, the body is white at once. */
 /* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the white starts
-   --sp-2 under the head, not a whole --card-gap. The body is pulled up by the difference — the card's gap is left alone, the
+   --sp-3 under the head, not a whole --card-gap (--sp-2 at first; Lh added 4 the same day). The body is pulled up by the difference — the card's gap is left alone, the
    stack's step and the body's own rows read it. */
 .sheet-stack > .card.sheet--paper > .sheet__body {
-  margin-top: calc(var(--sp-2) - var(--card-gap));
+  margin-top: calc(var(--sp-3) - var(--card-gap));
   padding-top: calc(var(--sp-6) + var(--_refresh, 0px));
   transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
 }
@@ -3713,6 +3717,16 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   mask: radial-gradient(circle at 100% 100%, transparent calc(var(--_notch) - var(--border-w)), #000 var(--_notch));
 }
 
+/* a tilted square is sized by the SCREEN, not by a length: three quarters of its width inside the inset, about two thirds of the glass (Lh 2026-10-06) — the turned corners
+   keep clear of the edges on any phone. cqw reads the fill screen (the size container). After --square, so it wins. */
+.sticky--square.sticky--tilt-left, .sticky--square.sticky--tilt-right { max-width: var(--sticky-tilt-max-w, 75cqw); }
+
+/* --tap: the whole note is the button (`onClick`). The fold stays; the ring follows the note's turn. */
+.sticky--tap { appearance: none; border: 0; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.sticky--tap .sticky__body, .sticky--tap .sticky__foot { display: block; }
+.sticky--tap:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+.sticky--tap:active > .sticky__paper { translate: 0 var(--sp-0); }
+
 /* ---- sticky field: the words written ON a note — a bare textarea in the note's type and ink, filling it ----
    <div class="sticky__body"><textarea class="sticky-field" aria-label="Note" placeholder="Add text to this note"></textarea></div> */
 .sticky__body:has(> .sticky-field) { display: grid; }

package/dist/sticky/Sticky.d.ts

@@ -1,6 +1,8 @@
 import type { ComponentProps, ReactNode } from 'react';
 import type { StickyTone } from './tones.js';
-export interface StickyProps extends ComponentProps<'div'> {
+export interface StickyProps extends Omit<ComponentProps<'div'>, 'onClick'> {
+    /** the whole note is a button: it renders a `<button>` and keeps its fold. Not with `corner` (a button cannot hold a button) */
+    onClick?: () => void;
     /** the paper's colour — one of STICKY_TONES (default custard) */
     tone?: StickyTone;
     /** no folded corner */
@@ -22,4 +24,4 @@ export interface StickyProps extends ComponentProps<'div'> {
  * Sticky — a paper note: a flat pastel block, straight, its bottom-right corner folded over, a soft shadow under it.
  * The outer box holds the tone and the shadow; the paper inside is the part that is cut (a clip would cut the shadow too).
  */
-export declare function Sticky({ tone, flat, square, head, date, tilt, foot, corner, className, children, ...rest }: StickyProps): import("react").JSX.Element;
+export declare function Sticky({ tone, flat, square, head, date, tilt, foot, corner, onClick, className, children, ...rest }: StickyProps): import("react").JSX.Element;

package/dist/sticky/Sticky.js

@@ -4,7 +4,11 @@ import { cx } from '../cx.js';
  * Sticky — a paper note: a flat pastel block, straight, its bottom-right corner folded over, a soft shadow under it.
  * The outer box holds the tone and the shadow; the paper inside is the part that is cut (a clip would cut the shadow too).
  */
-export function Sticky({ tone = 'custard', flat, square, head, date, tilt, foot, corner, className, children, ...rest }) {
+export function Sticky({ tone = 'custard', flat, square, head, date, tilt, foot, corner, onClick, className, children, ...rest }) {
     const notched = corner != null;
-    return (_jsxs("div", { className: cx('sticky', `sticky--${tone}`, flat && 'sticky--flat', square && 'sticky--square', notched && 'sticky--corner', tilt && `sticky--tilt-${tilt}`, className), ...rest, children: [_jsxs("div", { className: "sticky__paper", children: [(head != null || date != null) && _jsxs("div", { className: "sticky__head", children: [head, date] }), _jsx("div", { className: "sticky__body", children: children }), foot != null && _jsx("div", { className: "sticky__foot", children: foot }), !flat && !notched && _jsx("span", { className: "sticky__fold", "aria-hidden": "true" })] }), notched && _jsx("div", { className: "sticky__corner", children: corner })] }));
+    const tap = onClick != null && !notched;
+    const Box = (tap ? 'button' : 'div');
+    const Part = tap ? 'span' : 'div';
+    const boxProps = (tap ? { type: 'button', onClick, ...rest } : rest);
+    return (_jsxs(Box, { className: cx('sticky', `sticky--${tone}`, flat && 'sticky--flat', square && 'sticky--square', notched && 'sticky--corner', tilt && `sticky--tilt-${tilt}`, tap && 'sticky--tap', className), ...boxProps, children: [_jsxs(Part, { className: "sticky__paper", children: [(head != null || date != null) && _jsxs(Part, { className: "sticky__head", children: [head, date] }), _jsx(Part, { className: "sticky__body", children: children }), foot != null && _jsx(Part, { className: "sticky__foot", children: foot }), !flat && !notched && _jsx("span", { className: "sticky__fold", "aria-hidden": "true" })] }), notched && _jsx("div", { className: "sticky__corner", children: corner })] }));
 }

package/package.json

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