@justai/cuts 0.48.0 → 0.50.0

package/package.json

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

package/src/Posts.astro

@@ -16,17 +16,29 @@
 // stay dark. Everything else is shared.
 //
 // THE SOCIAL LAYER is in here: a persona's feed carries replies from OTHER personas, and they must read
-// as themselves — their own icon (or glyph), their own name and @handle, and a link to their own
-// profile — not as the host persona. That rendering was invented on the two apexes (justai, app.zone)
-// and lived only there; folding it UP into this cut is what lets every persona show a cross-reply
-// correctly instead of mislabelling it as its own. The one asymmetry it needs: `handle` is the persona
-// KEY (the feed query and the is-this-mine test) while `displayHandle` is what is printed after the @
-// — they differ exactly on the apexes (app.zone → @appzone, justai → @justai.pro).
+// as themselves — their own icon (or glyph), their own name, and a link to their own profile — not as the
+// host persona. That rendering was invented on the two apexes (justai, app.zone) and lived only there;
+// 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.
+//
+// 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.
+//
+// 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.
+//
+// `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.
 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")
   footer: string; // the localized footer tagline after "justai.pro ·"
-  displayHandle?: string; // the rendered @handle when it differs from the key (app.zone → @appzone)
   avatarBg?: string; // post-avatar tile background (default #fff)
   avatarBgLight?: string; // light-scheme override for that tile (a dark gradient must invert, not stay dark)
   // Which file is THIS persona's face in the feed. Defaults to /icon.svg, which every persona serves at its
@@ -49,7 +61,7 @@ interface Props {
   // the ground. The page's own media query is reliable, so the page picks the file and the file stays dumb.
   avatarSrcDark?: string;
 }
-const { handle, name, footer, displayHandle, avatarBg, avatarBgLight, avatarSrc, avatarBare, avatarSrcDark } = Astro.props;
+const { handle, name, footer, avatarBg, avatarBgLight, avatarSrc, avatarBare, avatarSrcDark } = Astro.props;
 const vars = [
   avatarBg && `--feed-av-bg:${avatarBg}`,
   avatarBgLight && `--feed-av-bg-light:${avatarBgLight}`,
@@ -60,7 +72,6 @@ const vars = [
   class="cut posts"
   id="posts"
   data-persona={handle}
-  data-handle={displayHandle ?? handle}
   data-name={name}
   data-av={avatarSrc ?? "/icon.svg"}
   data-av-dark={avatarSrcDark}
@@ -121,7 +132,7 @@ const vars = [
 
   .ph { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); flex-wrap: wrap; }
   .ph b { font-weight: 600; }
-  .phandle, .dot, .pt { color: var(--text-dim); font-weight: 400; }
+  .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); }
@@ -164,7 +175,6 @@ const vars = [
     // persona's OWN name and is injected RAW — it is authored in the persona's source, never user input,
     // so it may carry markup (justai's ".pro" span). Every name that comes from the API is escaped.
     const PERSONA = section.dataset.persona || "";
-    const HANDLE = section.dataset.handle || PERSONA;
     const NAME = section.dataset.name || "";
     if (!PERSONA) return;
     // Astro scopes this component's CSS by a data-astro-cid-* attribute; runtime nodes lack it, so copy it.
@@ -236,11 +246,11 @@ 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 = own ? `· ${timeAgo(c.createdAt)}` : `@${esc(c.authorHandle)} · ${timeAgo(c.createdAt)}`;
+        const meta = `· ${timeAgo(c.createdAt)}`; // a persona's name IS its handle — see the header note
         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">@${esc(c.authorHandle)} · ${timeAgo(c.createdAt)}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
+      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>`;
     };
     const post = (p: P): string => {
       const cs = p.comments || [];
@@ -250,7 +260,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="phandle">@${esc(HANDLE)}</span><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><span class="dot">·</span>${pt}</div><p class="pbd">${esc(p.body)}</p>${pact}</div></div>${inner}</article>`;
     };
 
     let done = false;