@justai/cuts 0.52.0 → 0.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.52.0",
+  "version": "0.54.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,59 @@ 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), transform 0.15s var(--ease-out),
+      border-radius 0.15s var(--ease-out);
+  }
+  /* THE FILL LIVES IN ITS OWN PROPERTY, and that is not tidiness — it is the difference between a hover and
+     no hover. A color-mix over a bare --card-bg (no fallback) written straight into `background` is an
+     INVALID declaration for a persona that never defined --card-bg, and an invalid declaration is dropped, so
+     those pages would answer the cursor with nothing at all. Here the fallback sits inside the mix, so the
+     value is always valid; the defaults mirror app.zone's own tokens per scheme.
+     (app.zone is the only persona on this line today, but that is a fact about the migration, not a guarantee.)
+
+     55% rather than the full card colour, and no hairline. The full-strength version was measured at 7
+     luminance steps of lift in light, and it read as a slab competing with the text — the inset hairline was
+     doing most of that. At 55% the lift is 4 in light and still 9 in dark, so it calms down where it was loud
+     without disappearing where it was already subtle. 35% was tried and rejected: 2 steps in dark, which on a
+     bright screen is nothing.
+
+     The radius and the scale are why it now invites rather than announces. They only exist on hover — at rest
+     the post has no box to round. */
+  .post:hover {
+    background: color-mix(in srgb, var(--card-bg, rgba(255, 255, 255, 0.06)) 55%, transparent);
+    backdrop-filter: var(--card-blur, none);
+    -webkit-backdrop-filter: var(--card-blur, none);
+    border-radius: 14px;
+    transform: scale(1.006);
+  }
+  /* The light default is white because that is what --card-bg is there; the dark default is a faint white
+     overlay because on dark --card-bg equals --surface, which is the column, so copying it would vanish. */
+  @media (prefers-color-scheme: light) {
+    .post:hover { background: color-mix(in srgb, var(--card-bg, #fff) 55%, transparent); }
+  }
   .post + .post { border-block-start: 1px solid var(--border); }
 
   .trow { display: flex; gap: 12px; }