@justai/cuts 0.80.0 → 0.81.0

package/package.json

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

package/src/ChildPersona.astro

@@ -127,45 +127,56 @@ const {
 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 ? (
+      <>
+        <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="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>