@usableapp/cardds 0.7.76 → 0.7.77

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 > 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.77 — 2026-10-10
+
+### Added
+- **A neighbour as one card: `Card heading caption end={<Stamp/>} foot`** (timebank, 2026-10-09) — the words at the left, a large stamp at the right, the one button in the foot. Before → after: a `CardHead` with a hand-written `<div>` of two `Text`s and a `Stamp` with `--stamp-max-w` in a `style` (the stamp had no width in a head: it takes the head's whole width up to its cap) → `<Card heading={name} caption={greeting} end={<Stamp bare {...art} />} foot={<Btn primary block>…</Btn>} />`, no markup and no `style`. The stamp is as tall as the heading and the caption together. New knob `--card-head-stamp-w` (the stamp's width in a head; default two taps). The card's only control is the foot's button, so a touch anywhere presses it; the stamp is a picture, not a button. The same goes for a `CardHead` of your own with a `Stamp` as a direct child. Story `StampScreens · Neighbours`.
+- **`StampPlace` in a `Centre`** — a neighbour with no stamp yet: `<Centre><StampPlace>…</StampPlace><Text>…</Text><Link>…</Link></Centre>`. Before → after: the frame was centred but the name and the link stood at the left, and its size was the plain cap → it takes the size a `Stamp` takes there (`--stamp-centre-max-w`) and the words and the link centre under it, as under a stamp. Story `StampScreens · NoStampYet`.
+- **`--stamp-place-dash`, `--stamp-place-gap`** — the dashes of a `StampPlace`'s edge: how long each dash is, and the gap between (defaults `--sp-2` and `--sp-3`).
+
+### Changed
+- **The dashes of a `StampPlace` stand further apart** (Lh 2026-10-09) — the edge was a CSS dashed border (the browser's dash and gap: 6px dash and 4px gap in Chrome, 6px and 6px in Safari, at 2px wide). Before → after: the same edge drawn as a stroke with a gap of 12px and a dash of 8px, still round at `--stamp-place-radius`, the same colours (`--stamp-place-border`, `--stamp-place-faint-border`, a card's muted ink), the same 4:5 size, the words and icon inside where they were. A project that drew the edge itself with `border-style` on `.stamp-place` sets `--stamp-place-border` or the two new knobs instead: its border is now clear. A `StampPlace` has an `<svg aria-hidden>` as its first child.
+
+### Fixed
+- **`StampBook places={9}` drew eight places when a child was `false` or `null`** (timebank, 2026-10-09) — `{owned && <StampCell/>}` that was `false` still counted as a place, so one empty place too few was drawn. Before → after: nine boxes (the cells that render, the rest empty). Story `StampBook · Conditional`.
+
 ## 0.7.76 — 2026-10-09
 
 ### Changed

package/README.md

@@ -543,10 +543,16 @@ it up. cardds draws the paper; the pictures, their words and which stamp a membe
   `words` the small line above it. `tilt` turns it, `onClick` makes the whole stamp a button. It fills its column up to
   `--stamp-max-w`, and every inner length follows its width, so one stamp reads in a tray and in a sheet.
 - **`StampPlace`** — an empty dashed place the size of a stamp: a word inside, `onClick` for "make yours", `faint` for a
-  gap nobody is asked to fill.
+  gap nobody is asked to fill. The edge is a drawn stroke, so its dashes are yours: `--stamp-place-dash` and
+  `--stamp-place-gap` (defaults 8px and 12px), its corner is `--stamp-place-radius`.
 - **`StampBook`** + **`StampCell`** — the album page: cells three across on an album ground, a `label` under each stamp,
   the free places drawn up to `places`. A cell with `onClick` is a button; `on` marks it pressed. `strip` is one line
-  of small stamps that scrolls sideways, the tray a member picks from.
+  of small stamps that scrolls sideways, the tray a member picks from. A `false` or `null` child holds no place.
+- A stamp stands for a person in three more places. In a `Centre` — a `Stamp` or a `StampPlace` — it takes the screen's
+  size and the words and link under it centre. In a card's head — `<Card heading={name} caption={greeting}
+  end={<Stamp bare …/>} foot={<Btn primary block>…</Btn>} />` — the words stand at the left and the stamp at the right,
+  as tall as both lines, `--card-head-stamp-w` wide (default two taps); the card's one button presses it whole. In an
+  `AvatarStack` it is a head (`more="+9"` for the count).
 - **`StampOn`** — a stamp stuck on a surface. `at` is the stamp's middle as a share of the surface (`{ x, y }`, 0 to 1),
   `turn` its angle in degrees. With `onAtChange` the member drags it (the arrow keys move it too) and it asks with the
   new place when the finger lets go; without it the stamp is still. The surface is the nearest positioned box:

package/css/card.css

@@ -84,6 +84,15 @@
    height, only the row gap. */
 .card__head :is(h1, h2, h3) { overflow-wrap: anywhere; }
 
+/* a Stamp in a card's head (`Card end={<Stamp …/>}`): the words stand at the left, the stamp at the right and AS TALL AS BOTH LINES — the heading and the
+   caption pair up beside it, not the stamp beside the heading alone with the caption left under it. A stamp has no size of its own in a flex
+   row (a width of 100% of the head, up to its cap), so it takes --card-head-stamp-w here, as a stamp in an AvatarStack takes a width of its own.
+   <div class="card__head"><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><span class="stamp">…</span></div> */
+.card__head:has(> .stamp) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
+.card__head:has(> .stamp) > :is(h1, h2, h3) { grid-column: 1; grid-row: 1; align-self: end; }
+.card__head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
+.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; width: var(--card-head-stamp-w, calc(var(--tap) * 2)); margin-inline: 0; }
+
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
    a tile grid: the TRACK reaches the edges so it reads as scrollable, while

package/css/stamp.css

@@ -82,29 +82,52 @@
 /* --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); }
+/* a stamp — or the empty place for one — 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(> :is(.stamp, .stamp-place)) { justify-items: center; text-align: center; }
+.screen__centre > :is(.stamp, .stamp-place) { max-width: var(--stamp-centre-max-w, 56cqw); }
 /* in the room above a closed stack's heads the stamp is held by that room's HEIGHT too: its height at most 45% of it, so two lines of words under it
    still fit on a short phone (320×568 left 253px for a group 314 tall — reported by timebank, 2026-10-07). cqh reads the base, a size container. */
-.sheet-stack__base > .screen__centre > .stamp { max-width: min(var(--stamp-centre-max-w, 56cqw), 36cqh); }
+.sheet-stack__base > .screen__centre > :is(.stamp, .stamp-place) { max-width: min(var(--stamp-centre-max-w, 56cqw), 36cqh); }
 
 /* ---- 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> */
+   <span class="stamp-place"><svg class="stamp-place__edge" aria-hidden="true"><rect/></svg>สร้าง</span> · <button class="stamp-place">…</button> · <span class="stamp-place stamp-place--faint">…</span>
+   The dashed edge is a <rect> of its own, not a border: a dashed border's dash and gap are the browser's to choose, a stroke's are two
+   knobs (--stamp-place-dash, --stamp-place-gap) and its corners still follow --stamp-place-radius. The element keeps a clear border
+   of the same width so what is inside sits where it did; the svg lies on that border, over it, and takes no part in the layout. */
 .stamp-place {
+  position: relative;
   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: var(--rule-w) solid transparent;
   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;
+  --_edge: var(--stamp-place-border, var(--on-surface-muted));
+}
+.stamp-place__edge {
+  position: absolute;
+  inset: calc(var(--rule-w) / -2) auto auto calc(var(--rule-w) / -2);
+  width: calc(100% + var(--rule-w));
+  height: calc(100% + var(--rule-w));
+  max-width: none;                      /* base.css caps every svg at its box */
+  overflow: visible;                    /* the stroke is centred on the rect's own edge: half of it falls outside the svg */
+  pointer-events: none;
+}
+.stamp-place__edge > rect {
+  width: 100%;
+  height: 100%;
+  rx: calc(var(--stamp-place-radius, var(--sp-2)) - var(--rule-w) / 2);   /* the corner of the stroke's middle, so its outer edge is the radius */
+  fill: none;
+  stroke: var(--_edge);
+  stroke-width: var(--rule-w);
+  stroke-dasharray: var(--stamp-place-dash, var(--sp-2)) var(--stamp-place-gap, var(--sp-3));
 }
-.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)); }
+.card .stamp-place, .post-paper .stamp-place { --_edge: var(--stamp-place-border, var(--card-muted)); color: var(--stamp-place-ink, var(--card-muted)); }
+.stamp-place--faint { --_edge: 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">

package/dist/cardds.css

@@ -770,6 +770,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    height, only the row gap. */
 .card__head :is(h1, h2, h3) { overflow-wrap: anywhere; }
 
+/* a Stamp in a card's head (`Card end={<Stamp …/>}`): the words stand at the left, the stamp at the right and AS TALL AS BOTH LINES — the heading and the
+   caption pair up beside it, not the stamp beside the heading alone with the caption left under it. A stamp has no size of its own in a flex
+   row (a width of 100% of the head, up to its cap), so it takes --card-head-stamp-w here, as a stamp in an AvatarStack takes a width of its own.
+   <div class="card__head"><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><span class="stamp">…</span></div> */
+.card__head:has(> .stamp) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
+.card__head:has(> .stamp) > :is(h1, h2, h3) { grid-column: 1; grid-row: 1; align-self: end; }
+.card__head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
+.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; width: var(--card-head-stamp-w, calc(var(--tap) * 2)); margin-inline: 0; }
+
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
    a tile grid: the TRACK reaches the edges so it reads as scrollable, while
@@ -3996,29 +4005,52 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --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); }
+/* a stamp — or the empty place for one — 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(> :is(.stamp, .stamp-place)) { justify-items: center; text-align: center; }
+.screen__centre > :is(.stamp, .stamp-place) { max-width: var(--stamp-centre-max-w, 56cqw); }
 /* in the room above a closed stack's heads the stamp is held by that room's HEIGHT too: its height at most 45% of it, so two lines of words under it
    still fit on a short phone (320×568 left 253px for a group 314 tall — reported by timebank, 2026-10-07). cqh reads the base, a size container. */
-.sheet-stack__base > .screen__centre > .stamp { max-width: min(var(--stamp-centre-max-w, 56cqw), 36cqh); }
+.sheet-stack__base > .screen__centre > :is(.stamp, .stamp-place) { max-width: min(var(--stamp-centre-max-w, 56cqw), 36cqh); }
 
 /* ---- 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> */
+   <span class="stamp-place"><svg class="stamp-place__edge" aria-hidden="true"><rect/></svg>สร้าง</span> · <button class="stamp-place">…</button> · <span class="stamp-place stamp-place--faint">…</span>
+   The dashed edge is a <rect> of its own, not a border: a dashed border's dash and gap are the browser's to choose, a stroke's are two
+   knobs (--stamp-place-dash, --stamp-place-gap) and its corners still follow --stamp-place-radius. The element keeps a clear border
+   of the same width so what is inside sits where it did; the svg lies on that border, over it, and takes no part in the layout. */
 .stamp-place {
+  position: relative;
   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: var(--rule-w) solid transparent;
   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;
+  --_edge: var(--stamp-place-border, var(--on-surface-muted));
 }
-.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-place__edge {
+  position: absolute;
+  inset: calc(var(--rule-w) / -2) auto auto calc(var(--rule-w) / -2);
+  width: calc(100% + var(--rule-w));
+  height: calc(100% + var(--rule-w));
+  max-width: none;                      /* base.css caps every svg at its box */
+  overflow: visible;                    /* the stroke is centred on the rect's own edge: half of it falls outside the svg */
+  pointer-events: none;
+}
+.stamp-place__edge > rect {
+  width: 100%;
+  height: 100%;
+  rx: calc(var(--stamp-place-radius, var(--sp-2)) - var(--rule-w) / 2);   /* the corner of the stroke's middle, so its outer edge is the radius */
+  fill: none;
+  stroke: var(--_edge);
+  stroke-width: var(--rule-w);
+  stroke-dasharray: var(--stamp-place-dash, var(--sp-2)) var(--stamp-place-gap, var(--sp-3));
+}
+.card .stamp-place, .post-paper .stamp-place { --_edge: var(--stamp-place-border, var(--card-muted)); color: var(--stamp-place-ink, var(--card-muted)); }
+.stamp-place--faint { --_edge: 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">