@usableapp/cardds 0.7.67 → 0.7.68

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 > 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.68 — 2026-10-07
+
+### Changed
+- **A `Sticky` has an edge, and a short shadow** (Lh 2026-10-07) — a hairline edge runs round the note in its own shape (the folded corner, a `corner` notch), so a pale note still ends somewhere on a pale ground; the shadow is short and close under the note. Before: one wide soft shadow all round (8px of blur), which swallowed the edge of a pale note. Nothing to change in a screen. BREAKING for a theme: the knob `--sticky-drop` is gone — set `--sticky-edge-bg` (the edge's colour), `--sticky-shadow-bg` (the shadow's colour) and `--sticky-shadow-blur` instead.
+- **In a chat, a note leans on its writer's own side** (Lh 2026-10-07) — in a `StickyThread` without `rail`, a note starts at the thread's edge under the avatar: theirs against the left, mine (`side="right"`) against the right. Before: notes started under the name, so both sides stood almost one over the other in the middle. A thread WITH `rail` is unchanged (the notes keep clear of the dotted line). Nothing to change in a screen.
+- **A `Stamp` has fewer, larger teeth** (Lh 2026-10-07) — 12 across and 15 down; it was 20 and 25, which ran together into a fuzzy edge on a small stamp. Nothing to change in a screen.
+
+### Fixed
+- **Safari / iPhone: a dragged `StampOn` left its shadow behind as a trail, and the note under it showed a hard grey band** — seen on the iOS Simulator. A draggable stamp is on its own layer now, and the note has no filter (see the edge and shadow above). Nothing to change in a screen.
+
 ## 0.7.67 — 2026-10-07
 
 ### Added

package/css/stamp.css

@@ -31,8 +31,8 @@
   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;
+  --_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);
@@ -176,6 +176,7 @@
   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 */

package/css/sticky.css

@@ -30,8 +30,27 @@
   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); }
@@ -92,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;
@@ -110,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;
@@ -175,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;
@@ -193,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; }

package/dist/cardds.css

@@ -3659,8 +3659,27 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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); }
@@ -3721,8 +3740,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --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;
@@ -3739,6 +3758,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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;
@@ -3804,7 +3824,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
      </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;
@@ -3822,6 +3842,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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; }
@@ -3863,8 +3885,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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;
+  --_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);
@@ -4008,6 +4030,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.67",
+  "version": "0.7.68",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",