@justai/cuts 0.80.0 → 0.82.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.80.0",
+  "version": "0.82.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,51 +128,76 @@ 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.
 const chrome = face === "page";
 ---
 
-{/* `.pp` IS the child persona. One wrapper, two situations — and `data-presented` is how the kernel
-    inside asks which one it is in without re-deriving it from the URL. */}
-<div class="pp" id="pp" data-child={child} data-face={face}>
-  {/* A PRESENTED CHILD SHOWS NO PROFILE AND NO ROW. It is content inside somebody's sheet, and a
-      biography there is the guest introducing itself while the host is mid-sentence. Standalone it
-      is a full persona page, because then it IS the page. */}
-  {chrome && (
-    <>
-      <Profile
-        name={name}
-        handle={`@${child}`}
-        bio={bio}
-        meta={meta}
-        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))"
-      >
-        <Fragment slot="avatar"><slot name="mark" /></Fragment>
-      </Profile>
+{/* `.pp` IS the child persona — one wrapper, every face. `data-face` is how the kernel inside asks
+    which one it is in without re-deriving it from the URL.
 
-      <div class="below" id="below">
-        <Toolbar
-          sectionsLabel={sectionsLabel}
-          profileLabel={profileLabel ?? name}
-          kernelLabel={kernelLabel ?? name}
-          postsLabel="Posts"
-          parent={{ href: parentHref, label: parentLabel, icon: host?.avatar }}
-          files={false}
+    IT RENDERS THE COLUMN ITSELF. An earlier draft styled `.pp .app` and left the consumer to emit
+    the element, which is precisely the homework law 1 forbids: a shell whose geometry only works if
+    somebody remembers a class name is a template, not a component. */}
+<div class="pp" id="pp" data-child={child} data-face={face}>
+  <main class="app">
+    {/* THE `sheet` FACE SHOWS NO PROFILE AND NO ROW. It is content inside somebody's chrome, and a
+        biography there is the guest introducing itself while the host is mid-sentence. As a `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={`<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={avatarBg}
+          avatarBgLight={avatarBgLight}
+          avatarPad={avatarPad}
+          cover={cover}
         >
-          <Fragment slot="profileIcon"><slot name="mark" /></Fragment>
-          <slot name="langPicker" slot="langPicker" />
-        </Toolbar>
-        <section class="cut kernel" id="kernel"><slot /></section>
-      </div>
-    </>
-  )}
+          <Fragment slot="avatar"><slot name="mark" /></Fragment>
+        </Profile>
+
+        <div class="below" id="below">
+          <Toolbar
+            sectionsLabel={sectionsLabel}
+            profileLabel={profileLabel ?? name}
+            kernelLabel={kernelLabel ?? name}
+            postsLabel="Posts"
+            parent={{ href: parentHref, label: parentLabel, icon: host?.avatar }}
+            files={false}
+          >
+            <Fragment slot="profileIcon"><slot name="mark" /></Fragment>
+            <slot name="langPicker" slot="langPicker" />
+          </Toolbar>
+          <section class="cut kernel" id="kernel"><slot /></section>
+        </div>
+      </>
+    ) : (
+      <section class="cut kernel" id="kernel" data-guest><slot /></section>
+    )}
+  </main>
 
-  {!chrome && <section class="cut kernel" id="kernel" data-guest><slot /></section>}
+  {/* Sheets, toasts, confirmations — inside `.pp` so they take the child's tokens, OUTSIDE `.app`
+      so the column does not clip or centre them. Every child has some; naming the slot is what
+      stops each one inventing a different place to put them. */}
+  <slot name="overlays" />
 </div>
 
 <style>