@usableapp/cardds 0.7.81 → 0.7.82

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 > 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.82 — 2026-10-10
+
+### Changed
+- **The edge of a `StampPlace` is round dots, close together** (Lh 2026-10-10: the dashes stood too far apart) — before → after: a stroke of 8px dashes with a gap of 12px → 2px round dots with 4px clear between them (a pitch of 6px from one centre to the next), 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. The ring closes wherever its length ends, so one gap, at the top left, is a little shorter or longer than the rest. A project that set `--stamp-place-dash` and `--stamp-place-gap` for 0.7.77's dashes keeps them, now with round ends (each dash is longer by one dot, each gap shorter by one dot); unset them for dots.
+
+### Added
+- **`--stamp-place-dot`** — how wide each dot of a `StampPlace`'s edge is (default `--rule-w`). The place's clear border, the edge's inset and its corner follow it, so the dots' outer edge stays the box's edge and the words stay where they are.
+
+### Fixed
+- **`docs/knobs.md` listed 13 knobs too few** — a knob whose default is a `calc()` with a `var()` inside (`--btn-form-pad-x`, `--card-head-stamp-w`, `--stack-back-size`…) was missed by `npm run knobs`, so the doc and the knob test never saw it. The script now reads one more level of brackets.
+
 ## 0.7.81 — 2026-10-10
 
 ### Added

package/README.md

@@ -579,9 +579,11 @@ it up. cardds draws the paper; the pictures, their words and which stamp a membe
   same list and the same `--sticky-<tone>-bg` knobs as a note's paper). `name` is the big line on the picture's foot,
   `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. 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`.
+- **`StampPlace`** — an empty place the size of a stamp, its edge a ring of round dots: a word inside, `onClick` for "make
+  yours", `faint` for a gap nobody is asked to fill. The edge is a drawn stroke, so the dots are yours: `--stamp-place-dot`
+  is how wide each is (default `--rule-w`, 2px), `--stamp-place-gap` the distance from one dot's centre to the next
+  (default 6px), and a `--stamp-place-dash` above 0 stretches each dot into a round-ended dash. Its corner is
+  `--stamp-place-radius`. The dots' outer edge is the box's edge whatever their width.
 - **`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. A `false` or `null` child holds no place.

package/css/post.css

@@ -230,7 +230,7 @@
 .post-desk__line > span { font: var(--type-caption); color: var(--_muted); }
 .post-desk__line > input { width: 100%; min-width: 0; min-height: var(--tap); border: 0; outline: none; background: transparent; color: inherit; font: var(--type-title); }
 .post-desk__line > input::placeholder { color: var(--_muted); }
-/* the stamp box: empty it is a dashed place to press; pressed, the chosen stamp lies in it */
+/* the stamp box: empty it is a place of dots to press; pressed, the chosen stamp lies in it */
 .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; }

package/css/stamp.css

@@ -91,28 +91,32 @@
 
 /* ---- stamp place: an empty place for a stamp — an album's gap, "make yours" ----
    <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. */
+   The edge is a row of round dots drawn on 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 knobs and its corners still follow --stamp-place-radius. A dot is a zero-length dash under a round cap, --stamp-place-dot
+   wide; --stamp-place-gap is the distance from one dot's centre to the next, and a --stamp-place-dash above 0 makes round-ended dashes
+   of it. The pattern closes wherever the perimeter ends, so the last gap is shorter or longer than the rest by less than one pitch.
+   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) solid transparent;
+  border: var(--_dot) 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));
+  --_dot: var(--stamp-place-dot, var(--rule-w));
 }
 .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));
+  inset: calc(var(--_dot) / -2) auto auto calc(var(--_dot) / -2);
+  width: calc(100% + var(--_dot));
+  height: calc(100% + var(--_dot));
   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;
@@ -120,11 +124,12 @@
 .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 */
+  rx: calc(var(--stamp-place-radius, var(--sp-2)) - var(--_dot) / 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));
+  stroke-width: var(--_dot);
+  stroke-linecap: round;
+  stroke-dasharray: var(--stamp-place-dash, 0) var(--stamp-place-gap, calc(var(--sp-0) * 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)); }

package/dist/cardds.css

@@ -4080,28 +4080,32 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- stamp place: an empty place for a stamp — an album's gap, "make yours" ----
    <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. */
+   The edge is a row of round dots drawn on 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 knobs and its corners still follow --stamp-place-radius. A dot is a zero-length dash under a round cap, --stamp-place-dot
+   wide; --stamp-place-gap is the distance from one dot's centre to the next, and a --stamp-place-dash above 0 makes round-ended dashes
+   of it. The pattern closes wherever the perimeter ends, so the last gap is shorter or longer than the rest by less than one pitch.
+   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) solid transparent;
+  border: var(--_dot) 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));
+  --_dot: var(--stamp-place-dot, var(--rule-w));
 }
 .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));
+  inset: calc(var(--_dot) / -2) auto auto calc(var(--_dot) / -2);
+  width: calc(100% + var(--_dot));
+  height: calc(100% + var(--_dot));
   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;
@@ -4109,11 +4113,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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 */
+  rx: calc(var(--stamp-place-radius, var(--sp-2)) - var(--_dot) / 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));
+  stroke-width: var(--_dot);
+  stroke-linecap: round;
+  stroke-dasharray: var(--stamp-place-dash, 0) var(--stamp-place-gap, calc(var(--sp-0) * 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)); }
@@ -4434,7 +4439,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .post-desk__line > span { font: var(--type-caption); color: var(--_muted); }
 .post-desk__line > input { width: 100%; min-width: 0; min-height: var(--tap); border: 0; outline: none; background: transparent; color: inherit; font: var(--type-title); }
 .post-desk__line > input::placeholder { color: var(--_muted); }
-/* the stamp box: empty it is a dashed place to press; pressed, the chosen stamp lies in it */
+/* the stamp box: empty it is a place of dots to press; pressed, the chosen stamp lies in it */
 .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; }