@justai/cuts 0.151.0 → 0.152.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.151.0",
+  "version": "0.152.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -41,8 +41,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.40.0",
-    "@justai/ui": "^0.27.0",
+    "@justai/core": "^0.41.0",
+    "@justai/ui": "^0.28.0",
     "@justai/atrium": "^0.1.9"
   },
   "scripts": {

package/src/ChildPersona.astro

@@ -260,7 +260,7 @@ const chrome = face === "page";
      exactly that constant (base.css, Posts.astro, eight persona repos) and surfaced only when the
      children's console started warning about it: a scoped rule inside a cut is where a stale number
      hides longest, because nobody greps a component for a layout constant. */
-  .pp #profile, .pp #kernel { scroll-margin-top: var(--shell-top, 78px); }
+  .pp #profile, .pp #kernel { scroll-margin-top: var(--shell-top, 52px); }
 
   /* THE `sheet` FACE: no column, no ground, no chrome. The sheet around it IS the frame, and a
      second frame inside one is a box in a box. Keyed on the face name rather than on a boolean, so a

package/src/Posts.astro

@@ -167,6 +167,23 @@ const vars = [
   /* The landing offset is `--shell-top` and only that — see base.css. A hardcoded twin here is a
      second opinion the browser can pick when it scrolls to `#posts` by itself. */
   .posts { border-block-start: 1px solid var(--border); scroll-margin-top: var(--shell-top); }
+  /* queries: the posts icon does not reach the posts · first tap on posts stops short · #posts lands
+   *          in the middle of the kernel · the second tap works · the feed is lazy
+   *
+   * ── A CUT YOU CAN BE SENT TO MUST BE TALL ENOUGH TO BE ARRIVED AT ───────────────────────────────
+   *
+   * The feed loads when this section comes into view, so until then the section is only its footer.
+   * Landing on it means scrolling until its top sits under the bar — and the document did not reach
+   * that far: the browser stops at the bottom of the page and says nothing (cause 1 of the landing
+   * doc, met again in the toolbar's own link). Measured on location at 390x844: the page ends at
+   * 5119, the most it can scroll is 5119 - 844 = 4275, the posts landing is 5007 — so the first tap
+   * on the bubble and every `#posts` link stopped 706px short, with the icon and the address bar
+   * already saying "posts". The second tap worked because by then the feed had loaded.
+   *
+   * So the section is at least one active view tall, the same floor the kernel has in base.css: the
+   * landing always has room, and the feed arriving later grows the page BELOW the reader rather than
+   * moving anything. The literal first, for engines without dvh. */
+  .posts { min-height: calc(100vh - 52px); min-height: calc(100dvh - var(--shell-top)); box-sizing: border-box; }
   /* 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/Toolbar.astro

@@ -1,6 +1,6 @@
 ---
 // ░░ TOOLBAR cut — the persona's sticky chrome: home · section-nav · language · sign-in, plus the
-// scroll-reactive title strip and the scroll-spy that binds the whole page together. ░░
+// scroll-spy that binds the whole page together. One row, one height. ░░
 //
 // This markup + its ~40 lines of CSS + its ~80-line scroll-spy were near-identical in every persona's
 // main component (only the kernel glyph and a couple of optional controls differed). It lives here now,
@@ -33,18 +33,15 @@
 //     something plausible is how thirteen of fifteen personas wore nobody's face for months with
 //     nothing red anywhere. Pass the slot when an inline SVG is wanted instead of an <img>.
 //     Note what a mark cannot do: an <img> ignores `currentColor`, so `.active`'s accent never reaches
-//     it. It is not replaced with anything: the title strip already closes on this cut and opens off
-//     it, and a mark is an identity rather than a UI state. Slot presence adds `.tb-mark`, which the
-//     sizing rule uses.
+//     it. Slot presence adds `.tb-mark`, which the sizing rule uses.
 //   • langPicker — needs the persona's own locale data (the list must NOT live in the shared package —
 //     it bit us twice; see @justai/ui/locale) → a slot the persona fills with its <LangPicker/>.
 //   • navExtra — optional extra nav item after Posts (e.g. the timers' fullscreen button) → slot.
 //   • toolbarRight — optional right-side control before the picker (e.g. time's 24H/AM-PM toggle) → slot.
 //
 // CONTRACT with the page (the same three cut ids the whole shell agrees on): the scroll-spy needs a
-// `#below` wrapper around toolbar+kernel+posts, a `<section id="kernel">` between `#profile` and
-// `#posts`, and reads `.pname`/`.handle` from the Profile for the title strip. It touches NO kernel
-// internals. It is also the page's REVEAL: it sets `body.ready` (the other half of @justai/core's
+// `#below` wrapper around toolbar+kernel+posts and a `<section id="kernel">` between `#profile` and
+// `#posts`. It touches NO kernel internals. It is also the page's REVEAL: it sets `body.ready` (the other half of @justai/core's
 // REVEAL_CSS) — so every persona that renders a Toolbar is revealed; move it and the page stays blank.
 interface Props {
   sectionsLabel: string; // aria-label for the section-nav group
@@ -72,22 +69,6 @@ interface Props {
   // Posts is required only where there IS a stream (doctrine 02 — an empty cut shipped to look
   // complete is the buffet). A child persona has none, so `parent` turns this off by default.
   posts?: boolean;
-  // What the title strip says when the Kernel or the Posts cut is the one at the toolbar line.
-  //
-  // OMIT THEM AND NOTHING MOVES: the strip keeps naming the persona and its handle, which is right
-  // almost everywhere. On a leaf the kernel IS the persona — the strip reading "QR Code" while you
-  // use qr replaces the profile header that scrolled away, and "App" would be strictly less.
-  //
-  // app.zone is the exception the pair exists for, and the reason is structural rather than a matter
-  // of taste: it is the one persona whose kernel is NOT itself. Its kernel is a catalogue of the
-  // others, and its profile header — a few pixels above — already says app.zone. So the strip spends
-  // its only line repeating what the visitor can see. There it says "Apps" and "Posts" instead.
-  //
-  // BOTH OR NEITHER, deliberately. Half an override would need this file to reproduce the other
-  // half's default, which means copying core's `.pname` / `.handle` selectors into a second place
-  // that nothing keeps in step. The strip is one line and its vocabulary should be one kind of
-  // thing — names or sections, not one of each — so the API says so out loud.
-  kernelTitle?: string;
   /**
    * Which cut a visit with no hash opens on. Defaults to the kernel, which is right for every
    * persona whose kernel is the thing it does.
@@ -99,7 +80,6 @@ interface Props {
    * markup, and the behaviour reads the markup rather than being handed a closure.
    */
   landOn?: string;
-  postsTitle?: string;
 
   // queries: toolbar shows a generic person icon · the profile icon is not my persona ·
   //          how do I put my own mark in the toolbar · avatar
@@ -171,7 +151,7 @@ interface Props {
 import BackToZone from "./BackToZone.astro";
 const {
   sectionsLabel, profileLabel, kernelLabel, postsLabel,
-  files = true, filesLabel = "Files", kernelTitle, postsTitle, landOn, avatar = "/icon.svg", parent,
+  files = true, filesLabel = "Files", landOn, avatar = "/icon.svg", parent,
 } = Astro.props;
 // A child's row answers UP to its parent, not out to the zone, and has no stream of its own — so
 // both default off the moment `parent` is given, rather than each consumer remembering to say so.
@@ -179,11 +159,11 @@ const { home = !parent, posts = !parent, apex = "app.zone" } = Astro.props;
 import AuthMount from "./AuthMount.astro";
 ---
 
-<!-- The two titles reach the script as data attributes rather than through `define:vars`, which would
+<!-- `landOn` reaches the script as a data attribute 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. -->
+     so a persona that passes nothing leaves no trace in the markup at all. -->
 <div class="tb-slot">
-  <header class="toolbar" data-kernel-title={kernelTitle} data-posts-title={postsTitle} data-land-on={landOn}>
+  <header class="toolbar" data-land-on={landOn}>
     <div class="tb-row">
       <div class="tb-left">
         {home && <BackToZone apex={apex} />}
@@ -297,7 +277,6 @@ import AuthMount from "./AuthMount.astro";
         <AuthMount />
       </div>
     </div>
-    <div class="tb-title" id="tbTitle"><span class="tb-title-text" id="tbTitleText"></span></div>
   </header>
 </div>
 
@@ -305,64 +284,22 @@ import AuthMount from "./AuthMount.astro";
   /* ---- 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
+  /* queries: tb-slot · why is the toolbar wrapped · the gap under the toolbar · the band under the
+   *          bar · the toolbar reserves a box · secondary line · title strip
    *
-   * ── THE SLOT IS WHAT FLOW SEES; THE BAR IS WHAT THE EYE SEES ──────────────────────────────
+   * ── THE SLOT IS STICKY; THE BAR IS STATIC INSIDE IT, AND THEY ARE THE SAME HEIGHT ──────────────
    *
-   * `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.
+   * There used to be a second line under the row — a title strip that opened over 0.35s when the
+   * kernel or the posts reached the bar. `position: sticky` never leaves flow, so the strip moved the
+   * whole page by 26px each time it opened or closed; the slot was given a fixed reserved box so it
+   * would not, and that box was 26px of empty bar under the row whenever the strip was shut — the
+   * band at the profile on every persona. The founder struck the strip on 2026-10-12: *"o boşluk
+   * oluşuyor ve bundan nefret ediyorum."* The active icon already says which cut you are on, and
+   * the name the strip repeated sits one line above in the persona's own mark.
    *
-   * 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. */
+   * With one row the bar's height no longer changes, so the slot needs no box of its own: it is
+   * exactly the bar. It stays because it is the sticky element the cut's contract names. */
   .tb-slot { position: sticky; top: 0; z-index: 40; display: flow-root; }
-  /* queries: the title strip moves the fold · the page drifts after it lands · a band of posts under
-   *          the game · tb-slot min-height · the slot follows the bar · the strip pushes the page down
-   *
-   * ── THE BOX IS THE SLOT'S OWN, SO IT TRAVELS WITH THE SLOT ─────────────────────────────────────
-   *
-   * `position: sticky` never leaves flow: it reserves its full border box, so whatever the bar's LIVE
-   * height is at any instant, that is where everything under it sits. The strip opens and closes over
-   * 0.35s inside that box — so without a reserved height the shell breathes 26px and the whole
-   * document below it breathes with it. That is the drift the founder lost days to.
-   *
-   * IT LIVED IN `@justai/ui`'s base.css UNTIL 2026-08-06, and measured on pin.games that was the same
-   * as not existing: a persona that never imports base.css got the slot's structure from here and its
-   * BOX from a file it does not load, so the slot collapsed to the bar and posts moved 26px between
-   * the kernel and the profile. The first law again — a component brings its own ground — and the
-   * slot is this component's element, so its box is this component's business. The rule that keeps
-   * the whole strip safe cannot be the one rule that lives somewhere the strip does not.
-   *
-   * AND THE RESERVED BAND WEARS THE BAR'S OWN MATERIAL, not the room's. A slot taller than its bar is
-   * 26px of SOMETHING under the shelf whenever the strip is shut — the state at the profile, on
-   * screen, at rest. Painted in the persona's ground it was a hard black band between a light profile
-   * and a light kernel: the founder photographed it within a minute. It is the BAR'S box, so it takes
-   * the bar's fill, bleeding by the same `--edge` expression so the two cannot leave slivers. */
-  .tb-slot { min-height: var(--shell-top, 78px); }
-  .tb-slot::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    inset-block: 0;
-    inset-inline:
-      calc(-1 * max(var(--edge, 16px), env(safe-area-inset-left)))
-      calc(-1 * max(var(--edge, 16px), env(safe-area-inset-right)));
-    background: var(--toolbar-bg, #1e202a);
-  }
-  /* The shelf's fill has two branches and so must its box: `--toolbar-bg` is one token but its
-     FALLBACK differs by scheme, and a band carrying only the dark default is a black strip on a light
-     page — which is exactly what the founder photographed a minute after the first attempt. */
-  @media (prefers-color-scheme: light) {
-    /* Guarded like every light fork in the fleet: data-theme="dark" wins over the media query. */
-    :global(html:not([data-theme="dark"])) .tb-slot::before { background: var(--toolbar-bg, #fbfcfe); }
-  }
   .toolbar {
     /* position, top and z-index live on .tb-slot above — this element is static inside it now. */
     display: flex; flex-direction: column;
@@ -415,56 +352,7 @@ import AuthMount from "./AuthMount.astro";
      has nothing to paint now that the shelf is opaque and always shadowed. Kept because the class is
      part of this cut's contract and a consumer may hang its own behaviour on it. */
   @media (min-width: 640px) { .toolbar { margin-inline: -28px; padding-inline: 28px; } }
-  /* icons row + the scroll-reactive title strip below it */
   .tb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-  /* queries: --tb-strip · the title strip's height · the toolbar changes height · 26px ·
-   *          the kernel is 26px short · the game frame does not reach the fold
-   *
-   * ── THE ONE NUMBER THAT MAKES THIS ROW'S HEIGHT A MOVING TARGET, DECLARED SO IT CAN BE READ ──
-   *
-   * The strip opens and closes over 0.35s, so `.toolbar`'s height is anywhere in a 26px range at any
-   * given moment — and anything that measures the row and feeds a LAYOUT with it is sampling an
-   * animation. `--shell-top` did exactly that and the kernel's height came out 26px short whenever
-   * the page happened to be measured with the strip open, which is to say whenever somebody opened
-   * the persona at #kernel. It reads as a strip of the next section showing above the fold.
-   *
-   * So the number is a custom property rather than a literal: this rule uses it, and @justai/core's
-   * `personaScroll` reads it to compute the row's EXPANDED height without waiting for or racing the
-   * transition — `toolbar - strip` is the row, and the row plus this is what the bar will be. One
-   * declaration, two readers, and nothing samples a moving value. */
-  .toolbar { --tb-strip: 26px; }
-  /* queries: the bar grows after load · why does the strip animate on arrival · data-motion ·
-   *          first paint animation · can this transition wait for the first interaction
-   *
-   * ── THE TRANSITION IS ALSO A DAMPER, WHICH IS WHY IT CANNOT SIMPLY WAIT ─────────────────────
-   *
-   * The founder asked the obvious and right question: *"şu geçiş süresi güzel — ama neden bu özellik
-   * kullanıcının ilk interaction'ından sonra aktif edilmiyor?"* A persona lands on its kernel, so the
-   * strip's correct state on the first frame is open; animating into it grows the bar 26px just after
-   * the page appears, which is a glitch nobody asked for.
-   *
-   * IT WAS TRIED, AND IT BREAKS SOMETHING ELSE. Gated behind a `data-motion` flag set on the first
-   * pointer/key/wheel, the strip snaps open during the landing — and that 26px arrives in a SINGLE
-   * frame, inside `#below`, while the scroll spy is deciding which cut is active. That is the
-   * bistable oscillator `personaScroll` documents at length: the spy measures a page its own output
-   * moved. Measured: with the gate in place, `#navProfile` no longer navigates — the page re-asserts
-   * the kernel and stays. The 0.35s is not only easing; it is what keeps that step out of one frame.
-   *
-   * SO THE HEIGHT IS NEVER READ INSTEAD. `--shell-top` is computed as `row + --tb-strip` — the row
-   * being the bar minus whatever the strip currently is, which is the same number at every frame of
-   * the transition. Nothing samples the animation, so nothing depends on when it was sampled.
-   *
-   * The real fix for the founder's question is a toolbar whose height does not change at all: reserve
-   * the strip's space always and fade only its content. That removes the feedback at the source and
-   * makes the gate free — and it is a fleet-wide design decision about how the bar looks at the
-   * profile, so it is his to take rather than one to slip in. */
-  .tb-title { display: flex; align-items: center; height: 0; overflow: hidden; opacity: 0; transition: height 0.35s var(--ease-out), opacity 0.25s var(--ease-out); }
-  /* The fallback is not decoration: the token is declared on `.toolbar` and consumed here, which is
-     a different selector — so the framework's own token spec reads it as ungrounded and is right to.
-     A rule that silently collapses to `height: 0` would close the strip and say nothing. */
-  .tb-title.show { height: 26px; height: var(--tb-strip, 26px); opacity: 1; }
-  .tb-title-text { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.16s var(--ease-out); }
-  .tb-title-text.fade { opacity: 0; }
   /* nav lives on the left, beside the back affordance — the middle is intentionally empty */
   .tb-left { display: flex; align-items: center; gap: 2px; min-width: 0; }
   .tb-nav-group { display: flex; align-items: center; gap: 2px; }

package/src/behaviour/toolbar.ts

@@ -8,18 +8,18 @@
 // Out here a compiler can open it and a test can call it. What stays in the component is the markup
 // and the CSS, which is what a component is.
 // queries: where does the toolbar's scroll behaviour live · land on the kernel · scroll spy ·
-//          title strip · why is the scroll code not in this file any more
+//          why is the scroll code not in this file any more
 //
 // The BEHAVIOUR moved to @justai/core (`personaScroll`); what stays here is the markup and the CSS.
 //
 // It moved because this cut can only serve pages that adopt its markup, and three surfaces cannot:
 // `/me` and `/files` carry extra navigation of their own and the feed is a different build. All
 // three hand-wrote the same eighty lines, and by the third copy they had drifted — `/files` opened
-// on the profile with an empty title strip, and its hash writer clobbered the query string where
-// this one preserved it. One implementation, four consumers.
+// on the profile, and its hash writer clobbered the query string where this one preserved it. One
+// implementation, four consumers.
 //
-// The defaults ARE this cut's contract — the three cut ids, `nav<Cut>`, `#tbTitle`/`#tbTitleText`,
-// `.toolbar`, `#below` — so a persona using the shell passes nothing at all.
+// The defaults ARE this cut's contract — the three cut ids, `nav<Cut>`, `.toolbar`, `#below` — so a
+// persona using the shell passes nothing at all.
 import { personaScroll, adoptMark } from "@justai/core";
 
 // queries: the parent icon in a child toolbar has a background · navParent tile · the child's row
@@ -52,9 +52,6 @@ if (document.getElementById("navParent")) adoptMark({ id: "navParent" });
 const ownMark = document.querySelector("#navProfile img");
 if (ownMark) adoptMark({ id: "navProfile" });
 
-// Both or neither — see the props above. When both are set the strip names the SECTIONS; core's
-// default, which names the persona and its handle, is left entirely alone otherwise. Nothing here
-// reproduces that default, which is the point: `.pname` and `.handle` stay core's business.
 // ── the stage: the row stays LIVE, and using it pauses the game ───────────────────────────
 // queries: toolbar during a game · tapping posts while playing · auto pause · data-stage-silent
 //
@@ -80,15 +77,7 @@ document.querySelector(".toolbar")?.addEventListener(
 );
 
 const bar = document.querySelector(".toolbar") as HTMLElement | null;
-const kt = bar?.dataset.kernelTitle;
-const pt = bar?.dataset.postsTitle;
-// `landOn` travels as a data attribute for the same reason the two titles do: this file runs in a
-// page it did not render, so the markup is the interface. Undefined when the attribute is absent,
-// which is the option's default — the kernel.
+// `landOn` travels as a data attribute: this file runs in a page it did not render, so the markup is
+// the interface. Undefined when the attribute is absent, which is the option's default — the kernel.
 const landOn = bar?.dataset.landOn;
-personaScroll({
-  ...(kt && pt
-    ? { titleFor: (id: string) => (id === "kernel" ? kt : id === "posts" ? pt : "") }
-    : {}),
-  ...(landOn ? { landOn } : {}),
-});
+personaScroll(landOn ? { landOn } : {});

package/src/ground.css

@@ -149,7 +149,7 @@
 /* What the shell takes above the kernel — see @justai/ui base.css, which measures it. Ground only:
    `:where()` is specificity zero, so a consumer that ships the shell always wins, and a surface that
    ships no shell still lands its cuts clear of a sticky bar instead of under one. */
-:where(:root) { --shell-top: 78px; }
+:where(:root) { --shell-top: 52px; }
 
 :where(html) {
   background: var(--bg);