@justai/cuts 0.49.0 → 0.51.0

package/package.json

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

package/src/Base.astro

@@ -66,7 +66,7 @@ interface Props {
   themeLight?: string;
   /** app.zone's property by default. justai.pro passes its own. Pass `null` for a persona that runs
    *  NO analytics at all — the whole GA block and the consent banner are then not rendered. The
-   *  privacy/terms sub-personas use this: the surface that proves it collects nothing by running
+   *  privacy/terms child personas use this: the surface that proves it collects nothing by running
    *  nothing. */
   gaId?: string | null;
 }
@@ -200,7 +200,7 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
          request and no console error, which is the only kind of analytics bug nobody finds. */}
     {/* gaId can be null: a persona that measures NOTHING. Pass gaId={null} and the entire analytics
         block below and the consent banner in the body are simply not rendered — no gtag, no cookie,
-        no request. The privacy/terms sub-personas run this way, and it is not an exception but their
+        no request. The privacy/terms child personas run this way, and it is not an exception but their
         character: the one surface that can prove it collects nothing by running nothing (doctrine 15).
         The default stays app.zone's property, so every existing persona is unchanged — this costs the
         ten that measure themselves exactly nothing. */}

package/src/Posts.astro

@@ -21,12 +21,20 @@
 // folding it UP into this cut is what lets every persona show a cross-reply correctly instead of
 // mislabelling it as its own.
 //
-// A PERSONA IS NAMED ONCE. Personas used to carry a name and an @handle, and for a persona those are the
-// same word: app.zone beside @appzone, AMRAP beside @amrap, Tabata beside @tabata. Six names down a thread
-// it read as stutter rather than as identity, and it cost a line of width on a narrow column for nothing.
-// The self-reply had already been rendering without one, so the whole family now reads the way the host
-// always did. A HUMAN keeps theirs (see the last line of comment()): a person's display name and their
-// account are genuinely different facts that happen to coincide here.
+// 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")
@@ -98,7 +106,43 @@ const vars = [
   .trow.last .cc { padding-block-end: 0; }
 
   .pa { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 22px; background: var(--feed-av-bg, #fff); border: 1px solid var(--border); overflow: hidden; }
-  .uav { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: var(--c, #888); }
+  /* A human's avatar: their initial on a disc in their own colour, which arrives from the API as --c.
+     It was the last flat-filled object in the family, so it takes the house FILL recipe
+     (app-zone/.justai/expert/how-an-app-zone-icon-is-lit.md): an off-centre radial at 37% 31% with three
+     stops at L+22 / L+4 / L−11, so the light falls from the upper left and the lower right carries the
+     shade.
+
+     THE SPECULAR IS DELIBERATELY OMITTED, which is the one place this departs from the recipe. The doc
+     defines it as "what makes it a sphere rather than a lighter disc" — exactly right for howlong's beads,
+     which are beads, and wrong here. With it the disc read as a ball; without it the same three stops read
+     as a flat disc with light across it, which is what an avatar should be. Measured on Dana's #0a84ff: the
+     highlight sits 63 luminance steps above the flat colour instead of 94, and the rim is untouched at L99
+     either way — only the middle came down.
+
+     The stops are derived in CSS rather than precomputed, because the colour only exists at runtime.
+     `hsl(from var(--c) h s calc(l ± n))` is the rule stated literally: hue and saturation are passed
+     through untouched and lightness does all the shading. Measured — lit end 210.2° S100, shaded end
+     210.1° S100, so nothing drifts.
+
+     NO % ON THOSE NUMBERS. Inside relative colour syntax `l` resolves to a <number>, so `calc(l + 22%)`
+     mixes types, the declaration is dropped, and the disc silently renders flat — it looked finished and
+     measured as zero light-to-shadow difference until the units came off. `background-color` is kept as a
+     separate declaration for the same reason: where the syntax is unsupported the disc loses its light
+     rather than disappearing.
+
+     `max(0, 39 - l)` is the doc's L28 floor as a LIFT applied to all three stops, not a clamp on the dark
+     end: clamping compresses the spread and weakens the emboss unevenly. 39 is the shortfall threshold
+     (28 + 11), so a colour light enough to clear it adds nothing. */
+  .uav {
+    flex: none; width: 30px; height: 30px; border-radius: 50%;
+    display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff;
+    background-color: var(--c, #888);
+    background-image:
+      radial-gradient(ellipse 80% 80% at 37% 31%,
+        hsl(from var(--c, #888) h s calc(l + 22 + max(0, 39 - l))) 0%,
+        hsl(from var(--c, #888) h s calc(l + 4 + max(0, 39 - l))) 40%,
+        hsl(from var(--c, #888) h s calc(l - 11 + max(0, 39 - l))) 100%);
+  }
   .rav { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 15px; background: var(--feed-av-bg, #fff); border: 1px solid var(--border); overflow: hidden; }
   .pa :global(svg), .rav :global(svg) { display: block; }
   .pa .mk, .rav .mk { width: 100%; height: 100%; object-fit: cover; display: block; }
@@ -242,7 +286,7 @@ const vars = [
         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 || [];