@justai/cuts 0.81.0 → 0.83.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.81.0",
+  "version": "0.83.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -37,7 +37,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.11.0",
+    "@justai/core": "^0.12.0",
     "@justai/ui": "^0",
     "@justai/atrium": "^0.1.9"
   }

package/src/ChildPersona.astro

@@ -103,6 +103,13 @@ interface Props {
   bio?: string;
   /** The small print under the bio — what it costs, what it keeps. */
   meta?: string;
+  /** The child's own colours for its avatar well. Genuinely per-child taste: /me is a dark vault,
+   *  /files is a light sheet of paper. */
+  avatarBg?: string;
+  avatarBgLight?: string;
+  avatarPad?: string;
+  /** The cover behind the profile. Defaults to the host persona's accent, which is the point. */
+  cover?: string;
   /** The host persona's face, if the page already resolved it server-side. Otherwise `childFace()`
    *  fills it in at runtime from /api/face — see @justai/core. */
   host?: { name?: string; avatar?: string; accent?: string };
@@ -121,6 +128,10 @@ const {
   child, name, bio, meta, host,
   parentHref = "/#kernel", parentLabel = "Home",
   sectionsLabel = "Sections", profileLabel, kernelLabel, face = "page",
+  avatarBg = "linear-gradient(160deg, #1f2740, #11141f)",
+  avatarBgLight = "linear-gradient(160deg, #f4f6fb, #fff)",
+  avatarPad = "15px",
+  cover = "linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #000))",
 } = Astro.props;
 // `page` is the default because it is the face a child shows when nobody asked for one — somebody
 // typed the address. A guest is always ASKED for, which is why the caller names it.
@@ -140,15 +151,25 @@ const chrome = face === "page";
         it IS the page, so it wears the whole persona shape. */}
     {chrome ? (
       <>
+        {/* queries: pnName pnHandle pnMeta · the child persona shows the wrong name · host identity
+                     in a child's profile · why are there spans in these strings
+            THE IDS ARE THE CONTRACT, and they are here rather than in each child because both
+            children were already doing this identically.
+            A child persona ADOPTS ITS HOST'S IDENTITY at runtime: the page is built once and mounted
+            on every persona's host, so the name, the handle and the small print cannot be known at
+            build time. They are rendered as spans with stable ids and rewritten by `childFace()` in
+            @justai/core once /api/face answers. What the server renders is the honest fallback — the
+            child's own words, correct if the lookup never returns. */}
         <Profile
-          name={name}
-          handle={`@${child}`}
-          bio={bio}
-          meta={meta}
+          name={`<span id="pnName">${name}</span><span class="pro" id="pnFacet"></span>`}
+          handle={`<span id="pnHandle">@${child}</span>`}
+          bio={bio ? `<span id="pnBio">${bio}</span>` : undefined}
+          meta={`<span id="pnMeta">${meta ?? ""}</span>`}
           kernelLabel={name}
-          avatarBg="#fff"
-          avatarPad="14px"
-          cover="linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #000))"
+          avatarBg={avatarBg}
+          avatarBgLight={avatarBgLight}
+          avatarPad={avatarPad}
+          cover={cover}
         >
           <Fragment slot="avatar"><slot name="mark" /></Fragment>
         </Profile>
@@ -166,6 +187,13 @@ const chrome = face === "page";
             <slot name="langPicker" slot="langPicker" />
           </Toolbar>
           <section class="cut kernel" id="kernel"><slot /></section>
+          {/* queries: where does the footer go · z-foot · content after the kernel
+              AFTER the kernel, still inside `.below`. The kernel is `min-height: 100dvh`, so anything
+              placed in its flow sits inside that screenful rather than below it — measured when
+              /files' footer was swept into the default slot and jumped 465px up the page. A named
+              slot is the difference between "after the kernel" and "at the end of the kernel", and
+              only the child knows which it meant. */}
+          <slot name="foot" />
         </div>
       </>
     ) : (