@usableapp/cardds 0.7.65 → 0.7.67

package/css/stamp.css

@@ -0,0 +1,182 @@
+/* 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: 5cqw;  /* one tooth: 20 across, 25 down — the holes land whole on every edge */
+  --_hole: 1.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 { 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,12 +20,14 @@
   --_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 */
@@ -71,6 +73,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; }
 
@@ -113,6 +117,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; }