@justai/cuts 0.30.0 → 0.30.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.30.0",
+  "version": "0.30.2",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -24,13 +24,13 @@
     "./ground.css": "./src/ground.css"
   },
   "peerDependencies": {
-    "@justai/ui": ">=0.3.0",
     "astro": ">=5"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.5.0"
+    "@justai/core": "^0.5.0",
+    "@justai/ui": "^0.3.0"
   }
 }

package/src/Posts.astro

@@ -73,7 +73,25 @@ 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 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 stops at L+22 / L+4 / L−11, so light falls from the upper left.
+     The recipe's specular is omitted on purpose — the doc defines it as "what makes it a sphere rather than
+     a lighter disc", which is right for howlong's beads and wrong for an avatar, where it read as a ball.
+     Stops are derived in CSS because the colour arrives from the API at runtime; hue and saturation pass
+     through untouched and lightness does all the shading. NO % on those numbers: inside relative colour
+     syntax `l` is a <number>, so `calc(l + 22%)` mixes types, the declaration is dropped, and the disc
+     renders flat while looking finished. `background-color` is separate so an unsupporting browser loses
+     the light rather than the disc. `max(0, 39 - l)` is the L28 floor as a lift on all three stops. */
+  .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; }
@@ -187,11 +205,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 — no @ in this feed
         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 || [];
@@ -201,7 +219,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;