@justai/cuts 0.14.0 → 0.16.0

package/package.json

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

package/src/Posts.astro

@@ -11,8 +11,9 @@
 // script framework-free in spirit: the day a Next persona (auth's home feed) wants the same feed, this
 // exact logic lifts into @justai/core unchanged. Until then, YAGNI — it stays an Astro cut.
 //
-// `avatarBg` is the only real per-persona knob (the post-avatar tile behind /icon.svg, matching the
-// profile). Everything else is shared.
+// The per-persona knobs are the post-avatar tile behind /icon.svg (matching the profile): `avatarBg`,
+// plus `avatarBgLight` when that ground is a dark gradient that must invert in light mode rather than
+// 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
@@ -27,8 +28,13 @@ interface Props {
   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)
 }
-const { handle, name, footer, displayHandle, avatarBg } = Astro.props;
+const { handle, name, footer, displayHandle, avatarBg, avatarBgLight } = Astro.props;
+const vars = [
+  avatarBg && `--feed-av-bg:${avatarBg}`,
+  avatarBgLight && `--feed-av-bg-light:${avatarBgLight}`,
+].filter(Boolean).join(";");
 ---
 
 <section
@@ -37,7 +43,7 @@ const { handle, name, footer, displayHandle, avatarBg } = Astro.props;
   data-persona={handle}
   data-handle={displayHandle ?? handle}
   data-name={name}
-  style={avatarBg ? `--feed-av-bg:${avatarBg}` : undefined}
+  style={vars || undefined}
 >
   <!-- filled at runtime by the loader below (lazy, on Posts-cut intersection) — single source: the console -->
   <div id="feed"></div>
@@ -65,6 +71,9 @@ const { handle, name, footer, displayHandle, avatarBg } = Astro.props;
   .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; }
+  /* a dark tile must invert in light mode, not stay dark — personas whose avatar ground is a gradient
+     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)); } }
 
   .ph { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); flex-wrap: wrap; }
   .ph b { font-weight: 600; }

package/src/Profile.astro

@@ -59,10 +59,13 @@ const vars = [
     <h1 class="pname" set:html={name} />
     <p class="handle">{handle}</p>
     <p class="bio">{bio}</p>
+    <!-- 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>}
-    <!-- anything else this persona's face carries (justai's purpose line, the apexes' privacy/terms
-         nav). It stays the PERSONA's markup — and therefore the persona's scope — so its styling lives
-         in the persona, while the frame above stays shared. -->
+    <!-- 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. -->
     <slot />
   </div>
 </section>