@usableapp/cardds 0.7.66 → 0.7.68

package/css/stamp.css

@@ -0,0 +1,183 @@
+/* cardds — stamps: the paper stamp, an empty place for one, the album page, a stamp stuck on a surface.
+   A stamp is its own paper, like a sticky note: it brings its ground and its ink, whatever card or palette it lies on.
+   Its pictures are the APP's (any node); cardds lays them out by how many there are. */
+
+/* ---- stamp: a perforated paper stamp, 4:5 — the picture fills the inner frame, the words sit ON it at the foot ----
+   <span class="stamp stamp--3">
+     <span class="stamp__paper">
+       <span class="stamp__pic sticky--custard">
+         <span class="stamp__art">…svg / img…</span>…
+         <span class="stamp__cap"><span class="stamp__words">กาแฟ · หมา</span><span class="stamp__name">ต้น</span></span>
+       </span>
+     </span>
+   </span>
+   Two boxes, as the sticky note: the OUTER one holds the size and the shadow, the PAPER is the one whose edge is
+   punched (a mask on the outer box would cut its own shadow off). The stamp is a size container: every inner length
+   is a share of its width (cqw), so it reads the same from a tray to a sheet. The ground wears a sticky tone class —
+   one list of tones (src/sticky/tones.ts), one set of tone knobs. */
+.stamp, .stamp-place {
+  --_cap: calc(var(--tap) * 4.5);
+  box-sizing: border-box;
+  width: 100%;                                  /* sized by its column… */
+  max-width: var(--stamp-max-w, var(--_cap));   /* …up to a cap */
+  aspect-ratio: 4 / 5;
+  margin-inline: auto;
+}
+.stamp {
+  position: relative;
+  display: block;
+  container-type: inline-size;
+  color: var(--stamp-ink, #141414);
+  filter: drop-shadow(var(--stamp-drop, 0 var(--sp-1) var(--sp-2) rgb(0 0 0 / 0.16))); /* drop-shadow follows the teeth; a box-shadow would draw the rectangle */
+}
+.stamp__paper {
+  --_pitch: calc(100cqw / 12);  /* one tooth: 12 across, 15 down — the holes land whole on every edge. Fewer and larger than a real stamp's: a small stamp's teeth must still read (Lh 2026-10-07; it was 20 × 25) */
+  --_hole: 2.6cqw;
+  position: absolute;
+  inset: 0;
+  background-color: var(--stamp-paper-bg, #fffdf8);
+  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - var(--_pitch)) calc(100% - var(--_pitch)) no-repeat,
+    radial-gradient(circle, transparent var(--_hole), #000 calc(var(--_hole) + 0.4cqw)) calc(var(--_pitch) / -2) calc(var(--_pitch) / -2) / var(--_pitch) var(--_pitch);
+  mask: linear-gradient(#000 0 0) center / calc(100% - var(--_pitch)) calc(100% - var(--_pitch)) no-repeat,
+    radial-gradient(circle, transparent var(--_hole), #000 calc(var(--_hole) + 0.4cqw)) calc(var(--_pitch) / -2) calc(var(--_pitch) / -2) / var(--_pitch) var(--_pitch);
+}
+.stamp__pic { position: absolute; inset: var(--stamp-frame, 8cqw); overflow: hidden; } /* the white frame round the picture; the ground is the tone class's */
+
+/* the pictures, placed by COUNT: where, how wide, how far turned — the layout is the stamp's look, never the app's.
+   A share of the picture area; the foot stays clear for the words. */
+.stamp__art { position: absolute; left: var(--_x); top: var(--_y); width: var(--_w); aspect-ratio: 1; translate: -50% -50%; rotate: var(--_r); }
+.stamp__art > * { display: block; width: 100%; height: 100%; }
+.stamp--1 .stamp__art { --_x: 50%; --_y: 40%; --_w: 72%; --_r: 0deg; }
+.stamp--2 .stamp__art:nth-child(1) { --_x: 37%; --_y: 27%; --_w: 58%; --_r: -6deg; }
+.stamp--2 .stamp__art:nth-child(2) { --_x: 63%; --_y: 56%; --_w: 54%; --_r: 8deg; }
+.stamp--3 .stamp__art:nth-child(1) { --_x: 30%; --_y: 21%; --_w: 50%; --_r: -8deg; }
+.stamp--3 .stamp__art:nth-child(2) { --_x: 71%; --_y: 31%; --_w: 46%; --_r: 7deg; }
+.stamp--3 .stamp__art:nth-child(3) { --_x: 47%; --_y: 58%; --_w: 54%; --_r: -2deg; }
+.stamp--4 .stamp__art:nth-child(1) { --_x: 29%; --_y: 19%; --_w: 44%; --_r: -8deg; }
+.stamp--4 .stamp__art:nth-child(2) { --_x: 71%; --_y: 24%; --_w: 42%; --_r: 7deg; }
+.stamp--4 .stamp__art:nth-child(3) { --_x: 31%; --_y: 57%; --_w: 42%; --_r: 5deg; }
+.stamp--4 .stamp__art:nth-child(4) { --_x: 70%; --_y: 60%; --_w: 44%; --_r: -6deg; }
+
+/* the words on the picture's foot: a small line, then the big name — one line each (clipped sideways only: Thai tone marks stand above the line box) */
+.stamp__cap { position: absolute; inset-inline: 5cqw; bottom: 3.5cqw; display: grid; gap: 0.4cqw; }
+.stamp__words, .stamp__name { display: block; min-width: 0; white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; }
+.stamp__words { --_words: 4.8cqw; font: 500 var(--_words) / 1.3 var(--font-ui); font-size: var(--stamp-words-font-size, var(--_words)); }
+.stamp__name { --_name: 9.5cqw; font: 900 var(--_name) / 1.15 var(--font-display); font-size: var(--stamp-name-font-size, var(--_name)); }
+/* tiny (a tray, an album cell, a stamp stuck on a note): the small line goes, the name grows */
+/* --bare: the pictures alone, no words — a stamp stuck on something (a note, a postcard). The words belong to the album.
+   The pictures take the foot's room: each sits a little lower, so the group stands in the middle of the frame. */
+.stamp--bare .stamp__cap, .stamp-on .stamp__cap, .post-corner .stamp__cap { display: none; }
+.stamp--bare .stamp__art, .stamp-on .stamp__art, .post-corner .stamp__art { top: calc(var(--_y) + 9%); }
+
+@container (max-width: 6rem) {
+  .stamp__words { display: none; }
+  .stamp__name { --_name: 12cqw; }
+}
+
+/* --tilt: turned a little on its middle — the one stamp a start screen hands over */
+.stamp--tilt-left, .stamp--tilt-right { margin-block: var(--sp-4); } /* the turned corners and the shadow need room: a centre scrolls and would cut them */
+.stamp--tilt-left { rotate: calc(-1 * var(--stamp-tilt, 5deg)); }
+.stamp--tilt-right { rotate: var(--stamp-tilt, 5deg); }
+
+/* --tap: the whole stamp is the button (`onClick`); the press and the ring are the PRESS list's (actions.css) */
+.stamp--tap { appearance: none; border: 0; padding: 0; background: none; font: inherit; text-align: start; -webkit-tap-highlight-color: transparent; }
+
+/* a stamp handed over in a Centre: sized by the SCREEN (a little over half its width inside the inset), its greeting centred under it */
+.screen__centre:has(> .stamp) { justify-items: center; text-align: center; }
+.screen__centre > .stamp { max-width: var(--stamp-centre-max-w, 56cqw); }
+
+/* ---- stamp place: an empty place for a stamp — an album's gap, "make yours" ----
+   <span class="stamp-place">สร้าง</span> · <button class="stamp-place">…</button> · <span class="stamp-place stamp-place--faint"></span> */
+.stamp-place {
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  padding: var(--sp-1);
+  border: var(--rule-w) dashed var(--stamp-place-border, var(--on-surface-muted));
+  border-radius: var(--stamp-place-radius, var(--sp-2));
+  background: none;
+  color: var(--stamp-place-ink, var(--on-surface-muted));
+  font: var(--stamp-place-font, var(--type-caption));
+  text-align: center;
+}
+.card .stamp-place, .post-paper .stamp-place { border-color: var(--stamp-place-border, var(--card-muted)); color: var(--stamp-place-ink, var(--card-muted)); }
+.stamp-place--faint { border-color: var(--stamp-place-faint-border, var(--hairline)); }
+
+/* ---- stamp book: the album page — three stamps across on an album ground, who each is from under it ----
+   <div class="stamp-book">
+     <button class="stamp-cell"><span class="stamp">…</span><span class="stamp-cell__label">ต้น</span></button>
+     <span class="stamp-cell">…</span>
+     <span class="stamp-place stamp-place--faint" aria-hidden="true"></span>…
+   </div> */
+.stamp-book {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: start;
+  gap: var(--stamp-book-row-gap, var(--sp-4)) var(--stamp-book-col-gap, var(--sp-3));
+  padding: var(--stamp-book-pad, var(--sp-4));
+  border-radius: var(--stamp-book-radius, var(--r-media));
+  background-color: var(--stamp-book-bg, var(--ink-tint));
+}
+.stamp-cell {
+  position: relative;
+  display: grid;
+  gap: var(--stamp-cell-gap, var(--sp-2));
+  min-width: 0;
+  appearance: none;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: var(--stamp-cell-ink, inherit);
+  font: var(--stamp-cell-font, var(--type-caption));
+  text-align: center;
+  -webkit-tap-highlight-color: transparent;
+}
+.stamp-cell__label { display: block; min-width: 0; overflow-wrap: anywhere; }
+/* `on`: this one is in use (stuck on the note) — a filled disc with a check on its top corner */
+.stamp-cell__on {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: grid;
+  place-items: center;
+  width: var(--stamp-cell-on-size, var(--icon));
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background-color: var(--stamp-cell-on-bg, var(--accent));
+  color: var(--stamp-cell-on-ink, var(--on-accent));
+}
+.stamp-cell__on > .icon { width: 70%; height: 70%; }
+/* --strip: ONE line of small stamps that scrolls sideways — the tray a member picks from. No ground. */
+.stamp-book--strip {
+  --_strip: calc(var(--tap) * 1.5);
+  display: flex;
+  gap: var(--stamp-book-col-gap, var(--sp-3));
+  padding: var(--sp-2) 0;
+  border-radius: 0;
+  background: none;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+.stamp-book--strip::-webkit-scrollbar { display: none; }
+.stamp-book--strip > * { flex: none; width: var(--stamp-book-strip-w, var(--_strip)); }
+
+/* ---- stamp on: a stamp stuck on a surface where the member put it ----
+   <div class="sticky__stuck"><div class="stamp-on stamp-on--move" style="--stamp-on-x: 0.8; --stamp-on-y: 0.2; --stamp-on-turn: 6"><span class="stamp">…</span></div></div>
+   The surface is the nearest positioned box. --stamp-on-x / -y are the stamp's MIDDLE as a share of the surface (data, written by
+   the component); --move = the member may drag it (StampOn with `onAtChange`). */
+.stamp-on {
+  position: absolute;
+  left: calc(var(--stamp-on-x, 0.5) * 100%);
+  top: calc(var(--stamp-on-y, 0.5) * 100%);
+  width: var(--stamp-on-w, 27%);
+  translate: -50% -50%;
+  rotate: calc(var(--stamp-on-turn, 0) * 1deg);
+  pointer-events: auto; /* the layer it lies in lets a tap through to the surface; the stamp itself takes it */
+}
+.stamp-on > .stamp { max-width: none; }
+.stamp-on--move { will-change: transform; } /* its own layer: Safari left the stamp's shadow behind as a trail along the drag when it was painted with the note (seen on the simulator, 2026-10-07) */
+.stamp-on--move { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transition: scale var(--motion-press) ease-out; }
+.stamp-on--move:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+.stamp-on.is-held { cursor: grabbing; z-index: 1; scale: 1.06; } /* lifted off the paper while the finger holds it */
+@media (prefers-reduced-motion: reduce) { .stamp-on.is-held { scale: 1; } }

package/css/step.css

@@ -95,6 +95,9 @@
    It ends with the bottom layer's room, as a walk's page does: it scrolls only when the layer would cover its words
    (timebank onboard-04, 2026-09-27 — its last Link lay under the bar; Lh: same rule as the walk) */
 .step > .page { margin: var(--_lead, 0) var(--screen-pad) 0; padding-bottom: var(--bottom-h, 0rem); }
+/* --bleed: the page's box runs to the screen's edges, the inset is its own padding — what leans, slides or casts a shadow past
+   the inset (a postcard) is cut at the glass, not at the inset; a little room on top for a turned corner. Nothing pans sideways. */
+.step > .page--bleed { margin-inline: 0; padding-inline: var(--screen-pad); padding-block-start: var(--sp-2); overflow-x: hidden; }
 
 /* a WALK (Pages of Page) — Lh 2026-09-23, third call: no top; the picture and the words are ONE run that scrolls up together
    (the picture is never pinned). Each page starts at the screen's lead and ends with the same room under it — the lead as

package/css/sticky.css

@@ -20,16 +20,37 @@
   --_fold: var(--sticky-fold, var(--sp-6));
   --_min: calc(var(--tap) * 3);
   --_cap: calc(var(--tap) * 7);
+  --_tall: calc(var(--tap) * 4.4);
   position: relative;
   display: grid;
   box-sizing: border-box;
   width: fit-content;                              /* hugs its words… */
   min-width: var(--sticky-min-w, var(--_min));     /* …but a word alone is still a note */
   max-width: var(--sticky-max-w, 100%);
+  min-height: var(--sticky-min-h, var(--_tall));   /* every note is one height, the height of a note being written (Lh 2026-10-07); more words still grow it */
   padding: 0 var(--_fold) var(--_fold) 0; /* = the line above, written whole */
   background-clip: content-box;
-  filter: drop-shadow(var(--sticky-drop, 0 var(--sp-1) var(--sp-2) rgb(0 0 0 / 0.16))); /* drop-shadow follows the cut; a box-shadow would draw the square */
+  isolation: isolate; /* the two layers below stay under this note, over whatever is behind it */
 }
+/* the edge and the shadow: two layers UNDER the paper, each drawn in the note's own shape by a gradient — never a filter on the
+   note (Safari repainted a filtered note as a hard grey band once a stamp on it had moved; Lh 2026-10-07).
+   ::after is the EDGE: the shape one hairline larger all round, so a pale note still ends somewhere on a pale ground.
+   ::before is the SHADOW: the shape set a little down and in, softened on its own layer — short and close, paper lying on a table. */
+.sticky::before, .sticky::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+  border-radius: var(--sticky-radius, var(--sp-1));
+  background-image: linear-gradient(-45deg, transparent calc(var(--_fold) * 0.7071), var(--_ink) 0); /* the folded corner, cut */
+}
+.sticky::after { --_ink: var(--sticky-edge-bg, rgb(0 0 0 / 0.14)); inset: calc(-1 * var(--border-w)); }
+.sticky::before {
+  --_ink: var(--sticky-shadow-bg, rgb(0 0 0 / 0.28));
+  inset: var(--sp-1) var(--sp-0) calc(-1 * var(--sp-0)) var(--sp-0);
+  filter: blur(var(--sticky-shadow-blur, var(--sp-0)));
+}
+.sticky--flat::before, .sticky--flat::after { background: var(--_ink); }
 /* the tones — the names in src/sticky/tones.ts. A swatch of the chooser wears the same class. */
 .sticky--cotton   { background-color: var(--sticky-cotton-bg, #f3efe2); }
 .sticky--blush    { background-color: var(--sticky-blush-bg, #f6d5da); }
@@ -71,6 +92,8 @@
   background-color: var(--sticky-fold-bg, color-mix(in srgb, currentColor 14%, transparent)); /* a darker shade of whatever the paper is */
   box-shadow: calc(-1 * var(--sp-0)) calc(-1 * var(--sp-0)) var(--sp-1) rgb(0 0 0 / 0.08);
 }
+/* things stuck ON the note (a stamp, placed by hand): a layer over the whole paper. A tap between them still reaches the words under it. */
+.sticky__stuck { position: absolute; inset: 0; pointer-events: none; }
 .sticky--flat > .sticky__paper { clip-path: none; }
 .sticky--flat > .sticky__paper > .sticky__foot { padding-inline-end: 0; }
 
@@ -88,8 +111,8 @@
 /* --square: the note to write on — 1:1, as wide as its column up to a cap, in the middle */
 .sticky--square { width: 100%; max-width: var(--sticky-square-max-w, var(--_cap)); aspect-ratio: 1; margin-inline: auto; }
 
-/* --corner: a control stands ON the bottom-right corner, half outside. The paper is notched round it (a mask, so the
-   shadow follows the notch and no ground colour is needed); the note has no fold. */
+/* --corner: a control stands ON the bottom-right corner, half outside. The paper is notched round it (a mask, so no
+   ground colour is needed; the edge and the shadow are notched the same way); the note has no fold. */
 .sticky__corner {
   position: absolute;
   right: 0;
@@ -106,6 +129,7 @@
   max-width: calc(var(--sticky-max-w, 100%) - var(--_corner) / 2);
   margin: 0 calc(var(--_corner) / 2) calc(var(--_corner) / 2) 0;
 }
+.sticky--corner::before, .sticky--corner::after { background-image: radial-gradient(circle at 100% 100%, transparent calc(var(--_corner) / 2 + var(--sp-1)), var(--_ink) 0); }
 .sticky--corner > .sticky__paper {
   --_notch: calc(var(--_corner) / 2 + var(--sp-1));
   clip-path: none;
@@ -171,7 +195,7 @@
      </div>
      <div class="sticky-post sticky-post--right">…</div>
    </div>
-   Two columns: the avatar, then everything else — so the notes start under the NAME. --right swaps the columns. */
+   Two columns: the avatar, then everything else. --right swaps the columns. */
 .sticky-thread { display: grid; gap: var(--sticky-thread-gap, var(--sp-6)); --_thread-gap: var(--sticky-thread-gap, var(--sp-6)); } /* --_thread-gap: the same value, for the rail to run through */
 .sticky-post {
   display: grid;
@@ -189,6 +213,8 @@
 .sticky-post__notes > .sticky { max-width: var(--sticky-post-max-w, 85%); } /* a note leaves the far side open, as a bubble does */
 .sticky-post__rail { display: none; grid-area: 2 / 1; justify-self: center; align-self: stretch; color: var(--sticky-thread-rail-ink, var(--on-surface-muted)); border-inline-start: var(--rule-w) dotted currentColor; margin-block-end: calc(-1 * var(--_thread-gap)); } /* runs on through the gap to the next avatar */
 .sticky-thread--rail > .sticky-post:not(:last-child) > .sticky-post__rail { display: block; }
+/* a chat (no rail): a note leans on its writer's own edge of the thread — it starts under the avatar, not under the name, so theirs and mine stand apart (Lh 2026-10-07: both sat in the middle). With a rail the notes keep clear of it, under the name. */
+.sticky-thread:not(.sticky-thread--rail) > .sticky-post > .sticky-post__notes { grid-column: 1 / -1; }
 .sticky-post--right { grid-template-columns: minmax(0, 1fr) auto; }
 .sticky-post--right > .sticky-post__who { grid-column: 2; }
 .sticky-post--right > .sticky-post__head { grid-column: 1; flex-direction: row-reverse; }