@justai/cuts 0.54.0 → 0.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.54.0",
+  "version": "0.56.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")
@@ -233,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); }
@@ -347,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 || [];
@@ -361,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;

package/src/Profile.astro

@@ -22,8 +22,12 @@
 //                  full-bleed cover reaches the SAME edge as the body — see Toolbar for the same knob.
 //
 // The AVATAR content is a slot (an <img>, or a build-time SVG via set:html) because it is the most
-// persona-specific thing on the page; the tile that frames it is shared. `avatarLabel` gives the tile
-// its accessible name (role="img"); omit it and the tile is inert.
+// persona-specific thing on the page; the tile that frames it is shared. The tile is a LINK to `#kernel`
+// — see `kernelLabel` below for why it carries two labels.
+//
+// EVERY persona and child persona has a Profile and a Kernel (foundations 02), which is what lets that
+// href stay local with no per-consumer escape hatch. `files`, `me` and `feed` each hand-rolled this
+// entire section before; they are child personas, and a child persona is a persona.
 //
 // CONTRACT: the shell's scroll-spy reads `.pname` and `.handle` from here to name the title strip, and
 // the section id `#profile` is one of the three cut anchors. Nothing else depends on the profile.
@@ -32,17 +36,41 @@ interface Props {
   // input, so a name may carry markup (justai's "justai<span class='pro'>.pro</span>"). Same rule as the
   // Posts cut: a persona's OWN name is authored; anything from the API is escaped.
   name: string;
-  handle: string;        // the @handle line, e.g. "@qr"
+  // The other three follow the SAME rule as `name`, and for a reason that only shows up on the child
+  // personas: `files`, `me` and `feed` are mounted on a HOST persona and adopt its identity at runtime,
+  // so each of these lines carries an id (`#pnHandle`, `#pnMeta`) or a translation hook (`data-i`) that
+  // a script rewrites once it knows whose page it is standing on. Text-only props forced all three to
+  // hand-roll the whole section — which is exactly how a shared layer becomes twelve copies.
+  //
+  // Authored, never user input: these strings come from the persona's own source. Anything arriving from
+  // the API is escaped instead — the Posts cut keeps the same split.
+  handle: string;        // the @handle line, e.g. "@qr" or "@app.zone · files"
   bio: string;           // the one-line bio
   meta?: string;         // the small meta line under the bio (optional)
-  avatarLabel?: string;  // accessible name for the avatar tile (role="img"); omit → inert tile
+  avatarLabel?: string;  // what the avatar DEPICTS (qr's tile is a scannable QR); omit → the tile is inert
+  // queries: clicking the profile avatar · the big icon goes to the kernel · what does the avatar link to
+  //
+  // The tile is the face, and a face is the natural thing to press to meet what the persona actually
+  // DOES — so it carries you down to the kernel, the same destination as the toolbar's own glyph. One
+  // vocabulary: pass the SAME string you already give `<Toolbar kernelLabel=…>` and the two agree.
+  //
+  // Optional, and English when omitted, because the cut brings its own ground — a consumer that adopts a
+  // newer cuts and changes nothing must still get a working, labelled link, never a blank one.
+  //
+  // Two labels rather than one: `avatarLabel` says what the picture IS, this says where pressing it GOES.
+  // A link announced as "QR code linking to qr.app.zone" that scrolls to the kernel would be a lie to
+  // anyone who cannot see where they landed.
+  kernelLabel?: string;
   cover?: string;        // CSS background for .cover
   coverHeight?: string;  // e.g. "118px"
   avatarBg?: string;     // CSS background for the avatar tile
   avatarBgLight?: string;// light-scheme override for the avatar tile
   avatarPad?: string;    // padding inside the avatar tile, e.g. "7px"
 }
-const { name, handle, bio, meta, avatarLabel, cover, coverHeight, avatarBg, avatarBgLight, avatarPad } = Astro.props;
+const { name, handle, bio, meta, avatarLabel, kernelLabel, cover, coverHeight, avatarBg, avatarBgLight, avatarPad } = Astro.props;
+// What the picture is, then where it takes you — in that order, because a screen reader reads the link's
+// name before its role and the destination is the part that decides whether to press it.
+const avatarA11y = [avatarLabel, kernelLabel ?? "What I do"].filter(Boolean).join(" — ");
 const vars = [
   cover && `--cover:${cover}`,
   coverHeight && `--cover-h:${coverHeight}`,
@@ -55,14 +83,14 @@ const vars = [
 <section class="cut profile" id="profile" style={vars || undefined}>
   <div class="cover"></div>
   <div class="pbody">
-    <div class="avatar" role={avatarLabel ? "img" : undefined} aria-label={avatarLabel}><slot name="avatar" /></div>
+    <a class="avatar" href="#kernel" aria-label={avatarA11y}><slot name="avatar" /></a>
     <h1 class="pname" set:html={name} />
-    <p class="handle">{handle}</p>
-    <p class="bio">{bio}</p>
+    <p class="handle" set:html={handle} />
+    <p class="bio" set:html={bio} />
     <!-- prose the face adds under its bio and ABOVE the small print (justai's purpose line). Order is
          the point: a mission line that falls below the meta reads as a footnote. -->
     <slot name="belowBio" />
-    {meta && <p class="meta">{meta}</p>}
+    {meta && <p class="meta" set:html={meta} />}
     <!-- and whatever follows the small print — the apexes' privacy/terms nav. Both slots stay the
          PERSONA's markup, and therefore the persona's scope, so their styling lives in the persona
          while the frame around them stays shared. -->
@@ -87,7 +115,16 @@ const vars = [
     background: var(--avatar-bg, #fff);
     border: 3px solid var(--bg); box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.22);
     position: relative;
+    /* it is an <a> now — undo the link ground, or a slotted SVG drawn in currentColor turns accent */
+    color: inherit; text-decoration: none;
+    transition: transform 0.15s var(--ease-out, ease-out);
   }
+  /* Pressed, not hovered. The tile is the persona's FACE: growing it under the cursor would animate the
+     one object on the page that should hold still. Depressing it on press is the iOS answer — it says
+     "this responds" at the moment of contact, on touch as well, where there is no hover to say it. */
+  .avatar:active { transform: scale(0.97); }
+  .avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+  @media (prefers-reduced-motion: reduce) { .avatar { transition: none; } }
   /* the avatar content is slotted (persona-owned) → style it globally */
   .avatar :global(svg) { width: 100%; height: 100%; display: block; }
   .avatar :global(img) { width: 100%; height: 100%; display: block; object-fit: cover; }