@justai/cuts 0.47.0 → 0.48.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.48.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

@@ -29,8 +29,27 @@ interface Props {
   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, displayHandle, avatarBg, avatarBgLight, avatarSrc, avatarBare, avatarSrcDark } = Astro.props;
 const vars = [
   avatarBg && `--feed-av-bg:${avatarBg}`,
   avatarBgLight && `--feed-av-bg-light:${avatarBgLight}`,
@@ -43,6 +62,9 @@ const vars = [
   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,6 +103,22 @@ 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; }
@@ -142,8 +180,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>`;