@justai/cuts 0.47.0 → 0.49.0

package/package.json

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

package/src/Posts.astro

@@ -16,21 +16,44 @@
 // 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.
+//
+// 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.
 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
+  // root, and which is a tile-with-a-mark-inside — right for an app, and what the tile knobs above are for.
+  avatarSrc?: string;
+  // A mark with no tile of its own, shown on the feed's ground rather than on a tile. app.zone is the case
+  // this exists for: the platform mark is a different kind of object from an app icon (the house rule is in
+  // app-zone/.justai/expert/how-an-app-zone-icon-is-lit.md — the platform mark is inset, app marks are
+  // raised), so wrapping it in a tile states a sibling relationship that is not true.
+  //
+  // Measured, because it decides the size too: /icon.svg puts its coloured ink across 72% of a 42px box,
+  // since the mark sits inset within its own tile. A bare mark spans 98% of the same box. So dropping the
+  // tile does not shrink the mark — it renders it about a third larger, which is why nothing here scales it.
+  avatarBare?: boolean;
+  // The dark-scheme twin of avatarSrc, for a bare mark whose centre has to invert.
+  //
+  // Two files rather than one file with `@media (prefers-color-scheme)` inside it, and that is a measurement
+  // rather than a preference: an SVG referenced by <img> renders in its own document, and the embedding page's
+  // scheme did NOT reach it — the centre stayed #2B2724 on a dark feed, where it is all but invisible against
+  // 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 } = 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}`,
@@ -41,8 +64,10 @@ 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}
+  data-av-bare={avatarBare ? "" : undefined}
   style={vars || undefined}
 >
   <!-- filled at runtime by the loader below (lazy, on Posts-cut intersection) — single source: the console -->
@@ -81,9 +106,25 @@ const vars = [
      pass avatarBgLight; the rest fall back to their single background. */
   @media (prefers-color-scheme: light) { .pa, .rav { background: var(--feed-av-bg-light, var(--feed-av-bg, #fff)); } }
 
+  /* A bare mark stands on the feed's own ground, so the tile and its hairline have to go — and they have to
+     go from the CONTAINER, which is why this reads upward from the image with :has(). Scoping it to the image
+     is what keeps a sibling persona's tiled icon tiled: .rav wraps their reply as well as a self-reply.
+     `contain` rather than `cover`, because a mark with transparent margins must not be cropped to fill. */
+  .pa:has(.mk.bare), .rav:has(.mk.bare) { background: none; border-color: transparent; }
+  .pa .mk.bare, .rav .mk.bare { object-fit: contain; }
+  /* The scheme pair: the page decides, because the SVG's own media query does not survive <img>.
+     Written as `.pa .mk.av-*` rather than `.av-*` deliberately — `.pa .mk { display: block }` above is two
+     classes deep, so a single-class `.av-light { display: none }` loses on specificity and the toggle silently
+     does nothing. Measured: it showed the pale-ground file in both schemes until these selectors matched. */
+  .pa .mk.av-dark, .rav .mk.av-dark { display: none; }
+  @media (prefers-color-scheme: dark) {
+    .pa .mk.av-light, .rav .mk.av-light { display: none; }
+    .pa .mk.av-dark, .rav .mk.av-dark { display: block; }
+  }
+
   .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); }
@@ -126,7 +167,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.
@@ -142,8 +182,19 @@ const vars = [
 
     const esc = (s: unknown): string =>
       String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c] as string);
-    // every persona signs its posts with its own /icon.svg (each app serves one at its root)
-    const AV = `<img class="mk" src="/icon.svg" alt="">`;
+    // Every persona signs its posts with its own face, /icon.svg by default (each app serves one at its
+    // root). The path is a data attribute rather than a literal because a persona may sign with a mark that
+    // has no tile — see avatarSrc / avatarBare above. `bare` rides on the IMAGE, not on the container:
+    // .rav wraps both a self-reply and ANOTHER persona's reply, so a container rule would strip the tile
+    // from siblings who legitimately have one.
+    const bare = section.hasAttribute("data-av-bare") ? " bare" : "";
+    const avLight = esc(section.dataset.av || "/icon.svg");
+    // When a dark twin is declared, BOTH are in the markup and CSS shows one. The alternative — one <img>
+    // whose src is chosen in JS off matchMedia — would be a second source of truth for the same decision and
+    // would not follow a scheme change without a listener.
+    const AV = section.dataset.avDark
+      ? `<img class="mk${bare} av-light" src="${avLight}" alt=""><img class="mk${bare} av-dark" src="${esc(section.dataset.avDark)}" alt="">`
+      : `<img class="mk${bare}" src="${avLight}" alt="">`;
     const ck = `<svg class="ck" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.4 1.8 3 .2.9 2.8 2.3 1.9-1 2.8 1 2.8-2.3 1.9-.9 2.8-3 .2L12 22l-2.4-1.8-3-.2-.9-2.8L3.4 14l1-2.8-1-2.8 2.3-1.9.9-2.8 3-.2z" fill="var(--accent)"/><path d="M9 12.5l2 2 4-4.5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
     const pact = `<div class="pact"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8.5a5.5 5.5 0 0 0-9-4.2A5.5 5.5 0 0 0 3 8.5c0 5 9 11 9 11s9-6 9-11z"/></svg></span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.3 9.6 9.6 0 0 1-4-.9L3 21l1.1-5A8.4 8.4 0 1 1 21 11.5z"/></svg></span></div>`;
 
@@ -187,7 +238,7 @@ 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));
@@ -201,7 +252,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;