@justai/cuts 0.51.0 → 0.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {

package/src/Posts.astro

@@ -95,8 +95,44 @@ const vars = [
   /* the cut owns its own landing offset (was `#kernel, #posts { scroll-margin-top }` in each persona —
      which orphaned once #posts moved here and carried this component's scope cid instead of the persona's). */
   .posts { border-block-start: 1px solid var(--border); scroll-margin-top: 82px; }
-  .post { padding-block: 18px; cursor: pointer; transition: background 0.15s var(--ease-out); }
-  .post:hover { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
+  /* A post is hoverable because it is a link to its own page, and the hover used to say so with a grey wash
+     — `--text` at 3.5% — which reads as dimming rather than as lifting. It now uses the card material, so
+     hovering a post looks like the same gesture as hovering a catalogue card.
+
+     `var(--card-bg, ...)` with the old wash as the fallback ON PURPOSE. Those tokens exist in app.zone only;
+     the other eleven personas have no catalogue and never defined them, and their column already uses
+     `--surface` as its own background, so falling back to that would have made the hover invisible. This way
+     app.zone gets the material and nobody else changes at all, which is the difference between an
+     improvement and a regression in eleven repos.
+
+     16px of horizontal padding with a matching negative margin, so the box grows outward and the text does
+     not move. 16 rather than the 18 above it because the column's own padding is 16px on a phone and 28px
+     from 768px up: at 18 the box would overflow the narrow case by 2px. Two pixels of asymmetry nobody can
+     see beats a horizontal scrollbar on a phone.
+
+     Square corners, stated rather than inherited — a radius here would make it a card, and it is not one:
+     it spans the column and sits directly against its neighbours. */
+  .post {
+    padding-block: 18px;
+    padding-inline: 16px;
+    margin-inline: -16px;
+    border-radius: 0;
+    cursor: pointer;
+    transition: background 0.15s var(--ease-out);
+  }
+  /* The card's own material, and all three ingredients of it rather than just the fill — because on dark
+     `--card-bg` and `--surface` are THE SAME VALUE (#1c1c228c), so a fill alone would have been invisible
+     against the column it sits in. The catalogue cards get away with it because their border, their blur and
+     their shadow do the separating there; measured from tokens.css, not guessed.
+
+     The hairline is an INSET shadow rather than a border: a real border would add a pixel to the box on
+     hover and nudge everything below it. */
+  .post:hover {
+    background: var(--card-bg, color-mix(in srgb, var(--text) 3.5%, transparent));
+    box-shadow: inset 0 0 0 1px var(--border);
+    backdrop-filter: var(--card-blur, none);
+    -webkit-backdrop-filter: var(--card-blur, none);
+  }
   .post + .post { border-block-start: 1px solid var(--border); }
 
   .trow { display: flex; gap: 12px; }
@@ -154,8 +190,22 @@ const vars = [
      go from the CONTAINER, which is why this reads upward from the image with :has(). Scoping it to the image
      is what keeps a sibling persona's tiled icon tiled: .rav wraps their reply as well as a self-reply.
      `contain` rather than `cover`, because a mark with transparent margins must not be cropped to fill. */
-  .pa:has(.mk.bare), .rav:has(.mk.bare) { background: none; border-color: transparent; }
-  .pa .mk.bare, .rav .mk.bare { object-fit: contain; }
+  .pa:has(.mk.bare), .rav:has(.mk.bare) {
+    background: none; border-color: transparent;
+    /* The slot rounds its corners and clips, which is right for a tile whose own corners are round and wrong
+       for a mark with no tile: the arms reach the corners, so the radius sliced their round outer tips flat.
+       Measured before the fix — 27.5px wide against 28.0 tall inside a square 30px slot, the asymmetry being
+       the clipping showing up as numbers. Nothing is left to clip once the mark is inset below, but both go
+       anyway, or a later change to the inset brings the slicing back silently. */
+    border-radius: 0; overflow: visible;
+  }
+  /* 72%, measured rather than judged. Filling the slot, the arms painted 92% of it; a sibling's tiled icon
+     paints its glyph across 61%, because the glyph sits inset within its own tile. So app.zone carried half
+     again the painted width of every persona it was replying to, in a thread where it is one speaker among
+     peers rather than the platform above them. At 72% the arms land near 67% — a shade above the siblings,
+     which suits a bracket form being lighter than a filled ring. The feed permalink page uses the same number
+     for the same reason; the two surfaces render one conversation and must not disagree about it. */
+  .pa .mk.bare, .rav .mk.bare { width: 72%; height: 72%; object-fit: contain; }
   /* The scheme pair: the page decides, because the SVG's own media query does not survive <img>.
      Written as `.pa .mk.av-*` rather than `.av-*` deliberately — `.pa .mk { display: block }` above is two
      classes deep, so a single-class `.av-light { display: none }` loses on specificity and the toggle silently