@usableapp/cardds 0.7.86 → 0.7.87

package/dist/cardds.css

@@ -307,6 +307,12 @@
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
 @property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }
 
+/* the ring that turns while waiting: Spinner, FormNote busy */
+@keyframes turn { to { rotate: 1turn; } }
+/* a mark struck onto paper — shown large and faint, pressed a little past its size, then at rest: StampOn `arrive`, the post desk's
+   postmark (Lh 2026-10-12: one strike for both; the postmark used to slide in from up-left, turning). Both read --stamp-on-arrive-time */
+@keyframes strike { from { scale: 2; opacity: 0; } 60% { scale: 0.92; opacity: 1; } }
+
 /* ---- css/palette.css — color settings — the file you tune ---- */
 /* ============================================================
    cardds/palette.css — COLOR SETTINGS. The only file you tune.
@@ -898,12 +904,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    actions.css) and scrolls up like any page — nothing is capped, nothing
    shrinks, no scroll box inside a box.
    So on a .screen that is NOT --fill the group is in flow: the column is at
-   least one phone tall, the group takes the room after the top bar and
+   least one phone tall (step.css), the group takes the room after the top bar and
    centres its children in it. The screen's own inset stays the inset.
    <div class="screen"><header class="topbar">…</header>
      <div class="screen__centre"><article class="card">…</article><div class="pager__at">…</div></div>
    </div><div class="action-bar">…</div> */
-.screen:not(.screen--fill):has(> .screen__centre) { min-height: 100dvh; display: flex; flex-direction: column; }
 .screen:not(.screen--fill) > .screen__centre { flex: 1; padding-inline: 0; align-content: center; }
 
 /* ---- the card that changes slides: out one side, the next in from the other ----
@@ -1387,7 +1392,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 /* a card standing in this room is FLAT (Lh 2026-10-09): the room clips at its own edges, and a card's shadow cut there drew a straight
    line under the bar and along the first sheet. Its ground and its radius are what say "card" here. */
-:is([data-palette], [data-finish="lit"]) .sheet-stack__base .card { box-shadow: none; }
+:is([data-palette], [data-finish]) .sheet-stack__base .card { box-shadow: none; }
 
 /* ============================================================
    .sheet-stack--flood — a closed stack whose open sheet FLOODS the screen: it rises over the top bar and fills the whole screen
@@ -2207,6 +2212,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   padding-bottom: var(--bottom-h, 0rem); /* exactly the bottom layer (measured by Screen): a page scrolls ONLY when the layer would cover its words, and then just far enough to clear them — at 100% nothing scrolls (Lh 2026-09-23) */
 }
 
+/* a SCROLLING (not fill) screen becomes a column at least one phone tall when it holds a bottom or a centre:
+   an .action-bar as its last child (Lh 2026-09-24, 0.7.0: the bar is the column's last row — at the foot when the words are short,
+   sticky to the viewport's foot while they scroll; actions.css) or a .screen__centre (Lh 2026-09-12: the group is in flow, takes the
+   room after the top bar and centres its children in it; a long one makes the page longer and runs under the bar; card.css) */
+.screen:not(.screen--fill):has(> .action-bar:last-child, > .screen__centre) { display: flex; flex-direction: column; min-height: 100dvh; }
+
 /* ============================================================
    TOP + CONTENT in one flex column; BOTTOM is a LAYER over them (Lh 2026-09-23, second call — replaces "the bar is a row"):
    in a .screen--fill the content runs to the screen's bottom edge, and the bar lies over it at the foot — it covers what is
@@ -2362,8 +2373,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .form-note { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: 0; font: var(--form-note-font, var(--type-caption)); color: var(--form-note-ink, var(--card-muted)); text-align: center; }
 .form-note > .icon { flex: none; }
 .form-note--error { color: var(--form-note-error-ink, var(--signal-error)); }
-@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { animation: form-note-turn 0.9s linear infinite; } }
-@keyframes form-note-turn { to { rotate: 1turn; } }
+@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { animation: turn 0.9s linear infinite; } } /* `turn`: tokens.css */
 
 /* ---- css/journey.css — route, tile badge, note row ---- */
 /* ============================================================
@@ -2702,10 +2712,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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
+/* 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 (step.css), 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:last-child) { display: flex; flex-direction: column; min-height: 100dvh; }
 .screen:not(.screen--fill) > .action-bar:last-child {
   position: sticky; bottom: var(--kb, 0rem);
   max-width: none;
@@ -3121,8 +3130,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    The ring turns; words beside it are optional and take the caption's look. Still when motion is reduced. */
 .spinner { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); vertical-align: middle; font: var(--type-caption); color: var(--spinner-ink, currentColor); }
 .spinner > .icon { flex: none; }
-@media (prefers-reduced-motion: no-preference) { .spinner > .icon { animation: spinner-turn 0.9s linear infinite; } }
-@keyframes spinner-turn { to { rotate: 1turn; } }
+@media (prefers-reduced-motion: no-preference) { .spinner > .icon { animation: turn 0.9s linear infinite; } } /* `turn`: tokens.css */
 
 /* ---- progress: one straight line, the done share solid, the rest faint (Lh 2026-09-22) — a voice note's
    timeline, a download, a step count as a line. <div class="progress" role="progressbar" style="--progress-at: 0.4"></div>
@@ -3309,8 +3317,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); }
 .chip--pick { position: relative; } /* the input covers the whole chip, on a row as in a grid */
 /* the hidden input, the same shape wherever a native radio/checkbox drives a picked look:
-   a chip, a mood dot, a tile (media.css) */
-:is(.chip--pick, .mood__opt, .tile--pick) > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
+   a chip, a mood dot, a tile (media.css), a sticky's tone swatch (sticky.css) — the native input lies over its whole box, unseen */
+:is(.chip--pick, .mood__opt, .tile--pick, .sticky-pick__swatch) > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
 :is(.chip--pick, .tile--pick):has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 /* --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); }
@@ -3956,7 +3964,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   box-shadow: inset 0 0 0 var(--border-w) var(--ink-tint); /* a pale tone still has an edge on a pale ground */
   cursor: pointer;
 }
-.sticky-pick__swatch > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
+/* its hidden input: the picks' one rule, choice.css */
 .sticky-pick__swatch:has(> :checked) { outline: var(--rule-w) solid currentColor; outline-offset: var(--sp-0); }
 .sticky-pick__swatch:has(> :focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 
@@ -4411,12 +4419,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 @media (prefers-reduced-motion: no-preference) { .stamp-on__remove { animation: stamp-on-remove-in var(--motion-press) ease-out; } }
 @keyframes stamp-on-remove-in { from { opacity: 0; scale: 0.6; } }
 
-/* --arrive: the stamp sticks ITSELF (StampOn `arrive`) — struck onto its place: shown large and faint, pressed a little past its
-   size, then at rest. The component reads the animation's name to tell the app it has landed. Knob: --stamp-on-arrive-time */
+/* --arrive: the stamp sticks ITSELF (StampOn `arrive`) — struck onto its place (`strike`: tokens.css). The component reads the
+   animation's name to tell the app it has landed. Knob: --stamp-on-arrive-time */
 @media (prefers-reduced-motion: no-preference) {
-  .stamp-on--arrive { animation: stamp-on-strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; }
+  .stamp-on--arrive { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; }
 }
-@keyframes stamp-on-strike { from { scale: 2; opacity: 0; } 60% { scale: 0.92; opacity: 1; } }
 
 /* ---- css/post.css — the post: postmark, a postcard read (letter), written (desk), kept (box) ---- */
 /* cardds — the post: a postcard read (post-letter), written (post-desk) and kept (post-box), the postmark, the card stock.
@@ -4655,10 +4662,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .post-desk__slot { border: 0; background: transparent; color: inherit; }
 @media (prefers-reduced-motion: no-preference) {
   .post-desk__slot > .stamp { animation: post-desk-stick var(--motion-quick) ease-out both; }
-  .post-desk .postmark { animation: post-desk-strike var(--motion-press) ease-in both; }
+  .post-desk .postmark { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; } /* struck as a StampOn is (`strike`: tokens.css), in the same time */
 }
 @keyframes post-desk-stick { from { translate: 0 calc(-1 * var(--sp-8)); rotate: 14deg; opacity: 0; } }
-@keyframes post-desk-strike { from { translate: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-6)); rotate: -24deg; opacity: 0; } }
 /* the other half's showing edge brings it across: a tap-wide strip out to the screen's edge */
 .post-desk__reach { position: absolute; inset-block: 0; width: var(--tap); border: 0; background: transparent; }
 .post-desk__reach--address { inset-inline-end: calc(-1 * var(--screen-pad)); }
@@ -5402,19 +5408,37 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- css/finish.css — light, shadow, edges — only under data-finish="lit" ---- */
 /* ============================================================
-   cardds/finish.css — FINISH: light, shadow and edges. A style of its own (Lh 2026-10-02: the plain
-   look read flat, "not finished"), apart from colour: palette.css says WHICH colours, this says how
-   the material is lit. Apply with <html data-finish="lit"> beside any palette (or none, or "own").
-   No attribute = nothing here applies — the flat look, unchanged.
+   cardds/finish.css — FINISH: the finish of a card's paper. A style of its own (Lh 2026-10-02: the plain
+   look read flat, "not finished"), apart from colour: palette.css says WHICH colours, this says what the
+   material is and how it is lit. Apply with <html data-finish="…"> (or on any ancestor) beside any palette,
+   or none, or "own". No attribute = nothing here applies — the flat look, unchanged.
+
+   FINISHES — four values of the one attribute (Lh 2026-10-12, from the timebank home with each injected:
+   four finishes, variations of one concept, never new pieces; teeth · tape · ticket · slab were rejected):
+     lit     = lit from above: a lit top edge, a hairline ring and a layered shadow that grows with height; filled buttons stand up and go down under the finger; fields and pin cells are sunk.
+     print   = printed paper: an ink line in the card's own ink, a hard misregistered offset instead of a blurred shadow, paper grain over the card, a dotted rule under the head as on a printed form; information inside stays flat.
+     sticker = a die-cut sticker: a white cut line round the card, a short hard drop, a slight tilt on a lone card, buttons with a bottom edge that press down.
+     ink     = a poster / comic print: a thick line in the surface's ink round every boundary and control, a hard offset in the same ink.
+   KNOBS (set in a theme, as any knob; docs/knobs.md lists them):
+     print   --print-off (the misregistration: how far the second pass missed) · --print-grain (the grain's opacity; a ::after, so the knob walk cannot probe it)
+     sticker --sticker-cut (the paper left round the print) · --sticker-tilt (a lone card's lean; 0deg for none — a card in a stack or a list never leans)
+     ink     --ink-w (the line) · --ink-off (the offset)
+
+   Information inside a card stays flat under every finish: only a container or a control gets an edge.
+   Colours are mixes of the roles (--on-surface, --card-ink, --accent, currentColor), never plain black,
+   so a finish sits in any palette; the one plain white is the sticker's backing paper and the lit edge's light.
+   ============================================================ */
+
+/* every finish: the finish IS the edge, so the wireframe's two borders step back (as [data-palette] in palette.css); ink puts its own line there below */
+[data-finish] { --card-border: transparent; --action-border: transparent; }
 
-   The light comes from above:
+/* ============================================================
+   lit — the light comes from above:
      - a thing that stands UP (card, sheet, button) has a lit top edge, a hairline ring and a shadow
        that grows with its height: card 1 · sheet / float 2 — the layers cardds already has;
-     - a thing that is SUNK (a field, a pin cell) has its shadow inside, under its top edge;
-     - information inside a card stays flat: only a container or a control gets an edge.
+     - a thing that is SUNK (a field, a pin cell) has its shadow inside, under its top edge.
    Shadows are mixed from the ink (--on-surface), never plain black, so they sit in the palette.
    ============================================================ */
-
 [data-finish="lit"] {
   --_shade: var(--on-surface);
   --finish-edge: inset 0 1px 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
@@ -5440,9 +5464,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --finish-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%);
   --finish-sunk: inset 0 1px 2px color-mix(in srgb, var(--_shade) 14%, transparent), 0 1px 0 rgb(255 255 255 / 0.5);
 
-  /* the shadow is the edge: the wireframe's lines step back (as in every colour palette) */
-  --card-border: transparent;
-  --action-border: transparent;
   --outline: color-mix(in srgb, currentColor 14%, transparent);
 }
 
@@ -5484,3 +5505,74 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* ---- sunk: what the member types into ---- */
 [data-finish="lit"] :is(.field, .pin__cell) { box-shadow: var(--finish-sunk); }
 
+/* ============================================================
+   print — printed paper (riso / zine): the second pass missed by --print-off, so the card's shadow is a
+   hard offset in its own ink; a line in that ink round the card; grain over the whole card; the head
+   underlined by a dotted rule as on a printed form. A lone card's head is a form's head; a stacked
+   sheet's, a row card's, a cover's (controls over a picture) and a folded feed card's (the head is the
+   whole card) have no rule.
+   ============================================================ */
+[data-finish="print"] {
+  --_ink: color-mix(in srgb, currentColor 70%, transparent);
+  --outline: var(--_ink);
+}
+[data-finish="print"] .card {
+  border: var(--border-w) solid var(--_ink);
+  box-shadow: var(--print-off, 3px) var(--print-off, 3px) 0 0 color-mix(in srgb, var(--card-ink) 28%, transparent);
+  isolation: isolate; /* the grain's blend stays inside the card */
+}
+/* the grain: a ::after, not ::before — .card--cover's scrim is its ::before. Over everything in the card (z-index 1, the foot's own level), touches pass through it */
+[data-finish="print"] .card::after {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
+  opacity: var(--print-grain, 0.32); mix-blend-mode: multiply;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+/* a dark card (the brand tone, a cover): multiply would only blacken it, so the grain lightens, fainter */
+[data-finish="print"] :is(.card--3, .card--cover)::after { mix-blend-mode: screen; opacity: calc(var(--print-grain, 0.32) * 0.56); }
+[data-finish="print"] .card:not(.card--row, .card--cover, .feed-card--small, .sheet-stack > *, .sheet-stack > :not(.sheet-stack__base) > *) > .card__head {
+  padding-bottom: var(--sp-2);
+  border-bottom: var(--rule-w) dotted color-mix(in srgb, currentColor 45%, transparent);
+}
+[data-finish="print"] :is(.btn, .chip) {
+  border-color: var(--_ink);
+  box-shadow: 2px 2px 0 0 color-mix(in srgb, currentColor 35%, transparent);
+}
+[data-finish="print"] .btn--primary { box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--card-ink) 60%, transparent); }
+[data-finish="print"] :is(.btn, .chip):active { box-shadow: none; translate: 2px 2px; }
+[data-finish="print"] .card__thumb { border-style: dashed; }
+
+/* ============================================================
+   sticker — a die-cut sticker on a sheet: --sticker-cut of white paper left round the print, a short hard
+   drop under it, a lone card leans by --sticker-tilt (the next one the other way); chunky buttons with a
+   bottom edge that press down. A card in a stack, in a list, in a feed, a sheet or a modal never leans:
+   those are placed by their holder, a lean would cut or cross them.
+   ============================================================ */
+[data-finish="sticker"] { --outline: color-mix(in srgb, currentColor 18%, transparent); }
+[data-finish="sticker"] .card {
+  box-shadow:
+    0 0 0 var(--sticker-cut, 5px) #fff,
+    0 calc(var(--sticker-cut, 5px) + 4px) 0 0 color-mix(in srgb, var(--on-surface) 16%, transparent),
+    0 calc(var(--sticker-cut, 5px) + 12px) 20px -8px color-mix(in srgb, var(--on-surface) 22%, transparent);
+}
+[data-finish="sticker"] .card:not(.sheet, .modal, .sheet-stack *, .card-list > *, .card-feed > *) { rotate: var(--sticker-tilt, 0.8deg); }
+[data-finish="sticker"] .card:not(.sheet, .modal, .sheet-stack *, .card-list > *, .card-feed > *):nth-of-type(even) { rotate: calc(-1 * var(--sticker-tilt, 0.8deg)); }
+[data-finish="sticker"] .card-list { gap: var(--sp-5); }
+[data-finish="sticker"] .btn {
+  box-shadow: 0 3px 0 0 color-mix(in srgb, currentColor 30%, transparent);
+  border-color: color-mix(in srgb, currentColor 25%, transparent);
+}
+[data-finish="sticker"] .btn--primary { box-shadow: 0 3px 0 0 color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 55%, var(--on-surface)); }
+[data-finish="sticker"] .btn:active { box-shadow: none; translate: 0 3px; }
+[data-finish="sticker"] .chip { box-shadow: 0 0 0 3px #fff; }
+
+/* ============================================================
+   ink — a poster / comic print: --ink-w of the surface's ink round every boundary and control, and a hard
+   offset of --ink-off in the same ink. The two wireframe borders come back as that line.
+   ============================================================ */
+[data-finish="ink"] { --card-border: var(--on-surface); --action-border: var(--on-surface); --outline: currentColor; }
+[data-finish="ink"] .card { border: var(--ink-w, 2.5px) solid var(--on-surface); box-shadow: var(--ink-off, 5px) var(--ink-off, 5px) 0 0 var(--on-surface); }
+[data-finish="ink"] :is(.btn, .chip, .icon-btn:not(.icon-btn-group > *)) { border: var(--ink-w, 2.5px) solid currentColor; box-shadow: 3px 3px 0 0 currentColor; }
+[data-finish="ink"] .btn--primary { border-color: var(--on-surface); box-shadow: 3px 3px 0 0 var(--on-surface); }
+[data-finish="ink"] .toggle { box-shadow: 2px 2px 0 0 var(--on-surface); }
+[data-finish="ink"] .card__thumb { border-width: var(--ink-w, 2.5px); }
+

package/dist/cards/CardFeed.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, createContext, isValidElement, useContext, useId, useLayoutEffect, useRef } from 'react';
 import { cx } from '../cx.js';
-import { reducedMotion, useControlled, warnOnce } from '../state.js';
+import { reducedMotion, setRefs, useControlled, warnOnce } from '../state.js';
 import { Card } from './Card.js';
 import { CardHead } from './CardHead.js';
 import { CardFoot } from './CardFoot.js';
@@ -53,16 +53,9 @@ export function CardFeed({ big: bigProp, defaultBig, onBigChange, className, chi
         }
         tops.current = at;
     });
-    const setRef = (node) => {
-        own.current = node;
-        if (typeof ref === 'function')
-            ref(node);
-        else if (ref)
-            ref.current = node;
-    };
     if (!shown.length)
         return null;
-    return (_jsx(FeedCtx.Provider, { value: { big, grow: (id) => request(id, 'tap') }, children: _jsx("div", { ref: setRef, className: cx('card-feed', className), ...rest, children: shown }) }));
+    return (_jsx(FeedCtx.Provider, { value: { big, grow: (id) => request(id, 'tap') }, children: _jsx("div", { ref: setRefs(own, ref), className: cx('card-feed', className), ...rest, children: shown }) }));
 }
 const onSmallKey = (e) => {
     if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' '))