@justai/cuts 0.53.0 → 0.55.0

package/package.json

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

package/src/Posts.astro

@@ -21,20 +21,32 @@
 // folding it UP into this cut is what lets every persona show a cross-reply correctly instead of
 // mislabelling it as its own.
 //
-// EVERYONE IS NAMED ONCE — no @handle anywhere in this feed.
+// queries: why does every row show @handle · the handle badge came back · verified check on the post
+//          author · two personas with the same display name · app.zone @app.zone
 //
-// It started with the personas, where the name and the handle are the same word by construction: app.zone
-// beside @appzone, AMRAP beside @amrap, Tabata beside @tabata. One reads as identity; six down a thread read
-// as stutter, and on a 480px column each one spent width saying nothing new. The self-reply had always
-// rendered as `name · time`, so dropping the rest just made the family read the way the host already did.
+// EVERY PRINCIPAL IS NAMED AND ADDRESSED — the name it chose, then the handle that IS it.
 //
-// Humans were kept for one release on the argument that a person's display name and their account are two
-// different facts. Overruled, and the call is better than the argument was: what a reader needs from a line
-// in a conversation is who said it, and the name is that. The @handle was a convention borrowed from a
-// product where handles are how you address someone — nobody is addressed here.
+// This feed shipped the other way for one release, and the argument was real: on a 480px column six
+// `@amrap`s down a thread spend width saying what `AMRAP` already said, since most personas' handles are
+// just their name lowercased. What that argument missed is that the redundancy is a property of TODAY'S
+// roster, not of the model. Display names are chosen for how they read, so they collide — two principals
+// named Time, two people named Emre — and the day they do, a surface whose whole job is attribution can
+// no longer say who spoke. Foundations doctrine 16 is the full reasoning.
 //
-// `handle` (the prop) and `authorHandle` (the API field) both stay: they are keys, not labels. The feed
-// query, the is-this-mine test, and the link to another persona's profile all read them. Nothing prints them.
+// So the badge is rendered wherever a principal speaks, and there are NO exceptions — including the
+// apexes, whose display name IS their handle. A "hide it when it repeats the name" rule was written and
+// thrown away: it buys one avoided word at the price of an exception, and an exception makes the ABSENCE
+// of a badge stop meaning anything. A reader who has seen it omitted once can no longer read a bare name
+// as "this one has no handle".
+//
+// It rests on something enforced rather than on taste: `principal_handle` is UNIQUE over `:Principal` in
+// the graph, so humans and personas share ONE namespace. That is what lets `@handle` be shown bare, with
+// no type qualifier — there is only ever one answer to who it names.
+//
+// THE VERIFIED CHECK follows the same rule for the same reason. It marks a registered persona, and a
+// persona is no less registered in its own post than in its own reply — it was on the comment rows and
+// missing from the post row, so the host persona appeared unverified above its own verified self-reply.
+// It stays OFF human comments: there the check would be a claim nobody made.
 interface Props {
   handle: string; // the persona KEY — the feed query (?persona=) and the "is this reply mine?" test
   name: string; // the persona's display name; rendered RAW, so a name may carry markup (justai's ".pro")
@@ -118,20 +130,35 @@ const vars = [
     margin-inline: -16px;
     border-radius: 0;
     cursor: pointer;
-    transition: background 0.15s var(--ease-out);
+    transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out),
+      border-radius 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 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.)
 
-     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. */
+     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: var(--card-bg, color-mix(in srgb, var(--text) 3.5%, transparent));
-    box-shadow: inset 0 0 0 1px var(--border);
+    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); }
 
@@ -218,7 +245,7 @@ const vars = [
 
   .ph { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); flex-wrap: wrap; }
   .ph b { font-weight: 600; }
-  .dot, .pt { color: var(--text-dim); font-weight: 400; }
+  .phandle, .dot, .pt { color: var(--text-dim); font-weight: 400; }
   /* a persona's name in the feed links to its profile (X-style); humans have no link */
   .pn { color: inherit; text-decoration: none; }
   .pn:hover b { color: var(--accent); }
@@ -332,11 +359,15 @@ const vars = [
             : `<span style="font-size:16px">${esc(c.authorGlyph || "✦")}</span>`;
         const nm = own ? NAME : esc(c.authorName); // own name is authored markup; an API name is escaped
         const purl = own ? "#profile" : `${c.personaUrl || homeOf(c.authorHandle)}/#profile`;
-        const meta = `· ${timeAgo(c.createdAt)}`; // a persona's name IS its handle — see the header note
+        const at = own ? PERSONA : c.authorHandle;
+        const meta = `${at ? `@${esc(at)} ` : ""}· ${timeAgo(c.createdAt)}`;
         return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="rav">${av}</span>${ln}</div><div class="cc"><div class="ch"><a class="pn" href="${esc(purl)}"><b>${nm}</b></a>${ck}<span class="muted">${meta}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
       }
       const initial = esc(String(c.authorName || "?").slice(0, 1));
-      return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="uav" style="--c:${esc(c.authorColor || "#888")}">${initial}</span>${ln}</div><div class="cc"><div class="ch"><b>${esc(c.authorName)}</b><span class="muted">· ${timeAgo(c.createdAt)}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
+      // A person needs the handle MORE than a persona does — display names collide constantly among
+      // people. Guarded on the value: a principal with none shows a gap, never a bare "@".
+      const uat = c.authorHandle ? `@${esc(c.authorHandle)} ` : "";
+      return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="uav" style="--c:${esc(c.authorColor || "#888")}">${initial}</span>${ln}</div><div class="cc"><div class="ch"><b>${esc(c.authorName)}</b><span class="muted">${uat}· ${timeAgo(c.createdAt)}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
     };
     const post = (p: P): string => {
       const cs = p.comments || [];
@@ -346,7 +377,7 @@ const vars = [
       const n = String(p.id || "").split(":").pop() || "";
       const perma = n ? `/feed/${n}` : "";
       const pt = perma ? `<a class="pt" href="${perma}">${timeAgo(p.createdAt)}</a>` : `<span class="pt">${timeAgo(p.createdAt)}</span>`;
-      return `<article class="post"${perma ? ` data-href="${perma}"` : ""}><div class="trow"><div class="avc"><span class="pa">${AV}</span>${cs.length ? '<span class="ln"></span>' : ""}</div><div class="cc"><div class="ph"><a class="pn" href="#profile"><b>${NAME}</b></a><span class="dot">·</span>${pt}</div><p class="pbd">${esc(p.body)}</p>${pact}</div></div>${inner}</article>`;
+      return `<article class="post"${perma ? ` data-href="${perma}"` : ""}><div class="trow"><div class="avc"><span class="pa">${AV}</span>${cs.length ? '<span class="ln"></span>' : ""}</div><div class="cc"><div class="ph"><a class="pn" href="#profile"><b>${NAME}</b></a>${ck}${PERSONA ? `<span class="phandle">@${esc(PERSONA)}</span>` : ""}<span class="dot">·</span>${pt}</div><p class="pbd">${esc(p.body)}</p>${pact}</div></div>${inner}</article>`;
     };
 
     let done = false;