@justai/cuts 0.119.0 → 0.120.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.119.0",
+  "version": "0.120.0",
   "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -41,8 +41,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.26.0",
-    "@justai/ui": "^0.17.0",
+    "@justai/core": "^0.27.0",
+    "@justai/ui": "^0.18.0",
     "@justai/atrium": "^0.1.9"
   }
 }

package/src/Posts.astro

@@ -118,7 +118,7 @@ const vars = [
      connects every comment & reply (they're all replies to the post). ---- */
   /* the cut owns its own landing offset (was `#kernel, #posts { scroll-margin-top }` in each persona —
      which orphaned once #posts moved here and carried this component's scope cid instead of the persona's). */
-  .posts { border-block-start: 1px solid var(--border); scroll-margin-top: 82px; }
+  .posts { border-block-start: 1px solid var(--border); scroll-margin-top: 82px; scroll-margin-top: var(--shell-top, 82px); }
   /* A post is hoverable because it is a link to its own page, and the hover used to say so with a grey wash
      — `--text` at 3.5% — which reads as dimming rather than as lifting. It now uses the card material, so
      hovering a post looks like the same gesture as hovering a catalogue card.

package/src/Preroll.astro

@@ -209,9 +209,7 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
       radial-gradient(90cqw 52cqh at 8% -12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
       radial-gradient(76cqw 46cqh at 96% 4%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
       radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
-      /* The room's floor and its walls are one colour: @justai/ui declares --game-ground and paints
-         the seam below the kernel with it, and a literal here would be a second black. */
-      var(--game-ground, #080b12);
+      #080b12;
     color: #f5f7fa;
   }
   .pr-door[hidden] { display: none; }

package/src/Toolbar.astro

@@ -166,116 +166,136 @@ import AuthMount from "./AuthMount.astro";
 <!-- The two titles reach the script as data attributes rather than through `define:vars`, which would
      make this script inline and it has an import. Astro drops an attribute whose value is undefined,
      so a persona that passes neither leaves no trace in the markup at all. -->
-<header class="toolbar" data-kernel-title={kernelTitle} data-posts-title={postsTitle}>
-  <div class="tb-row">
-    <div class="tb-left">
-      {home && <BackToZone apex={apex} />}
-      <nav class="tb-nav-group" aria-label={sectionsLabel}>
-        {/* POSITION ONE OF A CHILD'S ROW: the persona this one is mounted inside. `/icon.svg` is the
-            parent's face here, because a child runs in the parent's origin — the same path, read from
-            a different address. `#kernel` rather than `/` so the way back lands on the parent's work
-            and not on its biography, which is where a person who came from there was standing. */}
-        {parent && (
-          <a class="tb-nav tb-mark" id="navParent" href={parent.href ?? "/#kernel"} aria-label={parent.label ?? "Home"} title={parent.label ?? "Home"}>
-            <img src={parent.icon ?? "/icon.svg"} alt="" width="20" height="20" loading="lazy" decoding="async" />
+<div class="tb-slot">
+  <header class="toolbar" data-kernel-title={kernelTitle} data-posts-title={postsTitle}>
+    <div class="tb-row">
+      <div class="tb-left">
+        {home && <BackToZone apex={apex} />}
+        <nav class="tb-nav-group" aria-label={sectionsLabel}>
+          {/* POSITION ONE OF A CHILD'S ROW: the persona this one is mounted inside. `/icon.svg` is the
+              parent's face here, because a child runs in the parent's origin — the same path, read from
+              a different address. `#kernel` rather than `/` so the way back lands on the parent's work
+              and not on its biography, which is where a person who came from there was standing. */}
+          {parent && (
+            <a class="tb-nav tb-mark" id="navParent" href={parent.href ?? "/#kernel"} aria-label={parent.label ?? "Home"} title={parent.label ?? "Home"}>
+              <img src={parent.icon ?? "/icon.svg"} alt="" width="20" height="20" loading="lazy" decoding="async" />
+            </a>
+          )}
+          {/* THE PROFILE ICON IS THE PERSONA'S OWN FACE. Always — the founder's rule, and app.zone and
+              qr had already settled it while thirteen siblings still showed a generic bust.
+  
+              The bust is gone rather than demoted. A fallback that renders something plausible is how a
+              persona ships wearing nobody's face for months: nothing is broken, nothing is red, and the
+              only reader who notices is somebody comparing two personas side by side. `/icon.svg` is
+              not a guess — it is the ecosystem's one-face rule, the same path `persona.yml` declares
+              and the registry stores.
+  
+              `tb-mark` is set whichever way the face arrives, because it is what the sizing rule looks
+              for: a mark runs to the edge of its viewBox and a glyph does not, so they need different
+              boxes to put the same ink on screen. */}
+          {/* `tb-mark` says "a solid MARK is in this box" — it is what the sizing rule looks for, and a
+              mark runs to the edge of its viewBox where a stroke glyph sits inside 75% of one. A
+              persona's face is always a mark, so a persona always carries the class.
+  
+              A CHILD IS THE OTHER CASE, and it was measured rather than assumed: files passes a stroke
+              folder, and with `tb-mark` on it, it rendered at 19px beside a 25.33px bolt — one size
+              smaller, which is exactly the defect the 25.33 rule exists to remove. So in child mode the
+              slotted icon takes the GLYPH box and the row reads level. A child that draws a solid mark
+              instead should say so in its own CSS; every child in the fleet draws a glyph today. */}
+          <a class:list={["tb-nav", { "tb-mark": !parent }]} id="navProfile" href="#profile" aria-label={profileLabel} title={profileLabel}>
+            {/* A CHILD MUST PASS ITS OWN MARK. The default `/icon.svg` is the face of whoever owns this
+                origin — right for a persona, and its PARENT for a child, which would put the same
+                picture in two places and say nothing in either. So when `parent` is given there is no
+                fallback: a child that passes nothing renders an empty box, which is a defect somebody
+                sees, rather than a duplicate face, which is a defect nobody reports. */}
+            {Astro.slots.has("profileIcon")
+              ? <slot name="profileIcon" />
+              : (!parent && <img src={avatar} alt="" width="20" height="20" loading="lazy" decoding="async" />)}
           </a>
-        )}
-        {/* THE PROFILE ICON IS THE PERSONA'S OWN FACE. Always — the founder's rule, and app.zone and
-            qr had already settled it while thirteen siblings still showed a generic bust.
-
-            The bust is gone rather than demoted. A fallback that renders something plausible is how a
-            persona ships wearing nobody's face for months: nothing is broken, nothing is red, and the
-            only reader who notices is somebody comparing two personas side by side. `/icon.svg` is
-            not a guess — it is the ecosystem's one-face rule, the same path `persona.yml` declares
-            and the registry stores.
-
-            `tb-mark` is set whichever way the face arrives, because it is what the sizing rule looks
-            for: a mark runs to the edge of its viewBox and a glyph does not, so they need different
-            boxes to put the same ink on screen. */}
-        {/* `tb-mark` says "a solid MARK is in this box" — it is what the sizing rule looks for, and a
-            mark runs to the edge of its viewBox where a stroke glyph sits inside 75% of one. A
-            persona's face is always a mark, so a persona always carries the class.
-
-            A CHILD IS THE OTHER CASE, and it was measured rather than assumed: files passes a stroke
-            folder, and with `tb-mark` on it, it rendered at 19px beside a 25.33px bolt — one size
-            smaller, which is exactly the defect the 25.33 rule exists to remove. So in child mode the
-            slotted icon takes the GLYPH box and the row reads level. A child that draws a solid mark
-            instead should say so in its own CSS; every child in the fleet draws a glyph today. */}
-        <a class:list={["tb-nav", { "tb-mark": !parent }]} id="navProfile" href="#profile" aria-label={profileLabel} title={profileLabel}>
-          {/* A CHILD MUST PASS ITS OWN MARK. The default `/icon.svg` is the face of whoever owns this
-              origin — right for a persona, and its PARENT for a child, which would put the same
-              picture in two places and say nothing in either. So when `parent` is given there is no
-              fallback: a child that passes nothing renders an empty box, which is a defect somebody
-              sees, rather than a duplicate face, which is a defect nobody reports. */}
-          {Astro.slots.has("profileIcon")
-            ? <slot name="profileIcon" />
-            : (!parent && <img src={avatar} alt="" width="20" height="20" loading="lazy" decoding="async" />)}
-        </a>
-        {/* THE KERNEL IS ALWAYS THE BOLT. The founder's rule, and it is the shell's to draw rather
-            than the persona's to remember.
-
-            It was a bare `<slot name="kernelIcon" />` with NO fallback, which is the worst shape a
-            slot can have: a persona that passed nothing shipped a live, invisible tap target where
-            every sibling showed a mark — no error, no warning, and visible only beside another
-            persona. Fourteen of fifteen passed their own drawing instead, so the row said something
-            different in every repo about the same thing.
-
-            The bolt says WHAT THE SECTION IS — the persona's one job, its live surface — and the
-            profile icon two places to the left already says WHO. An icon that repeats the identity
-            spends the row's only distinction on a thing the row has already said. */}
-        <a class="tb-nav" id="navKernel" href="#kernel" aria-label={kernelLabel} title={kernelLabel}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.9 3L5.7 13.35h5.4L10.2 21l8.1-10.8h-5.4l.9-7.2z"/></svg>
-        </a>
-        {posts && (
-          <a class="tb-nav" id="navPosts" href="#posts" aria-label={postsLabel} title={postsLabel}>
-            <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>
+          {/* THE KERNEL IS ALWAYS THE BOLT. The founder's rule, and it is the shell's to draw rather
+              than the persona's to remember.
+  
+              It was a bare `<slot name="kernelIcon" />` with NO fallback, which is the worst shape a
+              slot can have: a persona that passed nothing shipped a live, invisible tap target where
+              every sibling showed a mark — no error, no warning, and visible only beside another
+              persona. Fourteen of fifteen passed their own drawing instead, so the row said something
+              different in every repo about the same thing.
+  
+              The bolt says WHAT THE SECTION IS — the persona's one job, its live surface — and the
+              profile icon two places to the left already says WHO. An icon that repeats the identity
+              spends the row's only distinction on a thing the row has already said. */}
+          <a class="tb-nav" id="navKernel" href="#kernel" aria-label={kernelLabel} title={kernelLabel}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.9 3L5.7 13.35h5.4L10.2 21l8.1-10.8h-5.4l.9-7.2z"/></svg>
+          </a>
+          {posts && (
+            <a class="tb-nav" id="navPosts" href="#posts" aria-label={postsLabel} title={postsLabel}>
+              <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>
+            </a>
+          )}
+          <slot name="navExtra" />
+        </nav>
+        {files && (
+          // queries: files icon in the toolbar · how do I reach my files from a persona · the folder
+          //          in the toolbar · why is files not in the section nav
+          //
+          // THE PERSONA'S FILES, ONE TAP FROM ANYWHERE IN IT.
+          //
+          // Until this, the only way into `<persona>/files` was to be asked for a file — the room
+          // where your things live could be entered only by a persona's invitation, which is exactly
+          // backwards for a room that is yours.
+          //
+          // OUTSIDE the sections nav, and deliberately: profile, kernel and posts are parts of THIS
+          // page and their links are fragments. `/files` is a different document — a place, not a
+          // section — and putting a navigation to elsewhere inside `<nav aria-label="sections">`
+          // would tell a screen reader it is one of them. Same reasoning the `leftExtra` slot below
+          // already carries, which is why this sits beside it rather than in the group above.
+          //
+          // ON BY DEFAULT, because the edge mounts `/files` on EVERY persona host: a persona that had
+          // to opt in would be a persona whose files exist and cannot be found. One bump here reaches
+          // the whole fleet, which is the only shape that survives a thousand of them.
+          <a class="tb-nav tb-files" id="navFiles" href="/files" aria-label={filesLabel} title={filesLabel}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5A1.5 1.5 0 0 1 4.5 6h4L11 8.5h8.5A1.5 1.5 0 0 1 21 10v7a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17z"/></svg>
           </a>
         )}
-        <slot name="navExtra" />
-      </nav>
-      {files && (
-        // queries: files icon in the toolbar · how do I reach my files from a persona · the folder
-        //          in the toolbar · why is files not in the section nav
-        //
-        // THE PERSONA'S FILES, ONE TAP FROM ANYWHERE IN IT.
-        //
-        // Until this, the only way into `<persona>/files` was to be asked for a file — the room
-        // where your things live could be entered only by a persona's invitation, which is exactly
-        // backwards for a room that is yours.
-        //
-        // OUTSIDE the sections nav, and deliberately: profile, kernel and posts are parts of THIS
-        // page and their links are fragments. `/files` is a different document — a place, not a
-        // section — and putting a navigation to elsewhere inside `<nav aria-label="sections">`
-        // would tell a screen reader it is one of them. Same reasoning the `leftExtra` slot below
-        // already carries, which is why this sits beside it rather than in the group above.
-        //
-        // ON BY DEFAULT, because the edge mounts `/files` on EVERY persona host: a persona that had
-        // to opt in would be a persona whose files exist and cannot be found. One bump here reaches
-        // the whole fleet, which is the only shape that survives a thousand of them.
-        <a class="tb-nav tb-files" id="navFiles" href="/files" aria-label={filesLabel} title={filesLabel}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5A1.5 1.5 0 0 1 4.5 6h4L11 8.5h8.5A1.5 1.5 0 0 1 21 10v7a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17z"/></svg>
-        </a>
-      )}
-      <!-- beside the section nav, but deliberately OUTSIDE it: a link that is not a section of this
-           page (justai.pro carries app.zone's mark here). Keeping it out of <nav aria-label=sections>
-           is the a11y half of the reason it is its own slot. -->
-      <slot name="leftExtra" />
-    </div>
-    <div class="tb-right">
-      <slot name="toolbarRight" />
-      <slot name="langPicker" />
-      <AuthMount />
+        <!-- beside the section nav, but deliberately OUTSIDE it: a link that is not a section of this
+             page (justai.pro carries app.zone's mark here). Keeping it out of <nav aria-label=sections>
+             is the a11y half of the reason it is its own slot. -->
+        <slot name="leftExtra" />
+      </div>
+      <div class="tb-right">
+        <slot name="toolbarRight" />
+        <slot name="langPicker" />
+        <AuthMount />
+      </div>
     </div>
-  </div>
-  <div class="tb-title" id="tbTitle"><span class="tb-title-text" id="tbTitleText"></span></div>
-</header>
+    <div class="tb-title" id="tbTitle"><span class="tb-title-text" id="tbTitleText"></span></div>
+  </header>
+</div>
 
 <style>
   /* ---- app toolbar — sticky to the top of the active region (kernel + posts); it never
      enters the Profile (it lives inside .below). Flat / knife-cut: a left group and a
      right group, no rounded pills. ---- */
+  /* queries: tb-slot · why is the toolbar wrapped · the bar changes height · the kernel is 26px
+   *          short · a band of the feed at the bottom · the toolbar reserves a box · sticky flow
+   *
+   * ── THE SLOT IS WHAT FLOW SEES; THE BAR IS WHAT THE EYE SEES ──────────────────────────────
+   *
+   * `position: sticky` NEVER LEAVES FLOW. It reserves its full border box and paints inside it — so
+   * the bar's LIVE height positioned everything under it (52 with the title strip shut, 78 open)
+   * while `--shell-top` was deliberately frozen at the open height so that nothing would sample the
+   * 0.35s animation. The HEIGHT stopped sampling it. THE POSITION NEVER DID. Two numbers that must
+   * be equal, written a hundred lines apart in two packages, and their difference is a band of the
+   * next section above the fold: measured on the live persona with the scroll untouched, the kernel
+   * sat 52px below `#below` instead of 78 and 25.81px of the feed was on screen.
+   *
+   * The wrapper separates them. The SLOT is sticky and its box is `--shell-top`; the BAR is static
+   * inside it and may be any height it likes. Nothing above the kernel changes size any more, so
+   * there is nothing for an engine to compensate for — which is also why only a device ever showed
+   * it: Blink scroll-anchors the step away and WebKit has no scroll anchoring. */
+  .tb-slot { position: sticky; top: 0; z-index: 40; display: flow-root; }
   .toolbar {
-    position: sticky; top: 0; z-index: 40;
+    /* position, top and z-index live on .tb-slot above — this element is static inside it now. */
     display: flex; flex-direction: column;
     /* full-bleed: the bar (frosted bg + hairline) touches the contained-view edges; the icons stay
        aligned with the body via matching inline padding. --edge is the persona's page inline padding