@justai/cuts 0.76.0 → 0.78.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justai/cuts",
-  "version": "0.76.0",
-  "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
+  "version": "0.78.0",
+  "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@justai/core": "^0.10.0",
-    "@justai/ui": "^0.4.0",
+    "@justai/ui": "^0",
     "@justai/atrium": "^0.1.9"
   }
 }

package/src/Toolbar.astro

@@ -8,7 +8,6 @@
 //
 //   <Toolbar sectionsLabel={t.chromeSections} profileLabel={t.chromeProfile}
 //            kernelLabel={t.chromeApp} postsLabel={t.chromePosts}>
-//     <svg slot="kernelIcon" .../>
 //     <LangPicker slot="langPicker" current={lang} locales={locales} ... />
 //   </Toolbar>
 //
@@ -16,11 +15,23 @@
 // data-coupled ones are slots):
 //   • BackToZone — takes no props → internalised here (the persona no longer imports it).
 //   • the three nav aria-labels — resolved strings (like every other cut: Posts, LangPicker) → props.
-//   • kernelIcon — the ONE per-persona nav glyph (⚡ / clock / globe …) → required slot.
-//   • profileIcon — OPTIONAL. The persona's own mark, in place of the generic bust. The Profile cut is
-//     WHO, so its icon may say *whose* profile this is rather than that a profile exists; the face is the
-//     persona's, so it comes from the persona. Omit it and the bust stays — adopting this is each
-//     persona's own decision, taken when its mark exists, and nothing moves in the fleet without it.
+//   • THE FOUR POSITIONS SAY FOUR DIFFERENT KINDS OF THING, and that is the whole design of the row:
+//     home is where you came FROM, the mark is WHO, the bolt is WHAT IT DOES, the bubble is what it
+//     SAYS. Neither of the middle two is a per-persona drawing any more, and the reason is not
+//     tidiness — an icon that repeats the identity spends the row's only distinction on something the
+//     row has already said two places to its left, and then neither icon means anything.
+//   • kernelIcon — GONE. It was a per-persona glyph (⚡ / clock / globe …) in a slot with NO fallback,
+//     which is the worst shape a slot can have: omit it and the persona shipped a live, invisible tap
+//     target. It is always the bolt now, drawn here.
+//     The kernel is the only section whose CONTENT differs between personas, which is exactly why its
+//     LABEL must not — otherwise there is nothing stable to navigate by, and somebody moving from qr
+//     to lendcam has to re-learn the row. A bolt is a state ("something runs here"), not a picture of
+//     a subject; a clock is true for one persona and a lie in the next.
+//   • profileIcon — OPTIONAL, and the DEFAULT is now the persona's own face rather than a generic
+//     bust: `avatar` (default `/icon.svg`) is the ecosystem's one-face path, the same one persona.yml
+//     declares and the registry stores. The bust is gone rather than demoted — a fallback that renders
+//     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
@@ -67,9 +78,24 @@ interface Props {
   // thing — names or sections, not one of each — so the API says so out loud.
   kernelTitle?: 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
+  //
+  // THE PERSONA'S OWN FACE, BY DEFAULT RATHER THAN BY DECISION.
+  //
+  // This used to be a slot with a generic bust behind it, so a persona showed its own mark only if
+  // somebody remembered to pass one — and thirteen of fifteen never did. But the shell already knows
+  // where a persona's face is: ONE icon, everywhere, at `/icon.svg`. `persona.yml` declares it, the
+  // registry stores it, the catalog draws it. There was nothing to decide; there was only something
+  // to look up.
+  //
+  // The `profileIcon` slot still wins when a persona passes one — an inline SVG can take
+  // `currentColor` where an <img> cannot, which is why qr passes its mark rather than pointing at it.
+  avatar?: string;
 }
 import BackToZone from "./BackToZone.astro";
-const { sectionsLabel, profileLabel, kernelLabel, postsLabel, home = true, files = true, filesLabel = "Files", kernelTitle, postsTitle } = Astro.props;
+const { sectionsLabel, profileLabel, kernelLabel, postsLabel, home = true, files = true, filesLabel = "Files", kernelTitle, postsTitle, avatar = "/icon.svg" } = Astro.props;
 import AuthMount from "./AuthMount.astro";
 ---
 
@@ -81,31 +107,35 @@ import AuthMount from "./AuthMount.astro";
     <div class="tb-left">
       {home && <BackToZone />}
       <nav class="tb-nav-group" aria-label={sectionsLabel}>
-        {/* The Profile cut is WHO, so a persona may put its OWN FACE here instead of the generic bust —
-            the icon then says whose profile this is rather than that a profile exists. Passed as a slot
-            for the same reason `kernelIcon` is: the face belongs to the persona, not to the shell.
+        {/* 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 fallback matters as much as the slot. A persona that passes nothing keeps the bust it has
-            today, so adopting this is a decision each persona makes when its own mark is ready — nothing
-            in the fleet moves on the day this ships.
+            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 from slot PRESENCE, not from a prop somebody could forget to keep in step. It
-            exists so the sizing rule can find the image; it deliberately does NOT restyle the mark. */}
-        <a
-          class:list={["tb-nav", { "tb-mark": Astro.slots.has("profileIcon") }]}
-          id="navProfile"
-          href="#profile"
-          aria-label={profileLabel}
-          title={profileLabel}
-        >
-          {Astro.slots.has("profileIcon") ? (
-            <slot name="profileIcon" />
-          ) : (
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
-          )}
+            `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. */}
+        <a class="tb-nav tb-mark" id="navProfile" href="#profile" aria-label={profileLabel} title={profileLabel}>
+          {Astro.slots.has("profileIcon") ? <slot name="profileIcon" /> : <img src={avatar} alt="" width="19" height="19" 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}>
-          <slot name="kernelIcon" />
+          <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>
         <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>
@@ -163,14 +193,47 @@ import AuthMount from "./AuthMount.astro";
     margin-inline: calc(-1 * max(var(--edge, 16px), env(safe-area-inset-left))) calc(-1 * max(var(--edge, 16px), env(safe-area-inset-right)));
     padding-block: max(8px, env(safe-area-inset-top)) 8px;
     padding-inline: max(var(--edge, 16px), env(safe-area-inset-left)) max(var(--edge, 16px), env(safe-area-inset-right));
-    background: color-mix(in srgb, var(--bg) 70%, transparent);
-    backdrop-filter: blur(22px) saturate(1.5);
-    -webkit-backdrop-filter: blur(22px) saturate(1.5);
-    /* a very faint hairline always; it firms up once content scrolls under the bar */
-    border-block-end: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
-    transition: border-color 0.3s var(--ease-out);
+
+    /* ── THE BAR IS A SHELF, NOT A TINT ──────────────────────────────────────────────────────
+     *
+     * queries: the toolbar reads as a black strip · why is the bar darker in dark than in light ·
+     *          the bar looks flat against the column · toolbar material · --toolbar-bg
+     *
+     * It used to derive its fill from `--bg` — `color-mix(--bg 70%, transparent)` under a blur.
+     * One declaration, but it meant two different things: `--bg` is a near-white in light and #000
+     * in dark, so the same rule read "lighten a near-white a little" on one ground and "pull a
+     * lifted surface to pure black" on the other. Measured against the column it sits on: **-6 in
+     * light, -17 in dark.** That asymmetry was a by-product of the token, never a decision.
+     *
+     * So it takes the CARD's material instead, and the light comes from above like everything else:
+     * an opaque fill with a shadow cast downward, and the page sliding under it. The fill is opaque
+     * ON PURPOSE — the blur was inert in light anyway, because the column is 92% opaque and there is
+     * nothing behind it to refract.
+     *
+     * WHY IT IS HERE NOW. app.zone settled this, qr copied it verbatim — same two hex values, same
+     * two shadows — and BOTH left a comment saying it belongs in cuts. Two consumers is the
+     * promotion trigger, and the note the second one wrote is the specification:
+     *
+     *     "the right end state is cuts reading `var(--toolbar-bg, <its current expression>)`,
+     *      after which these four declarations delete themselves and the tokens alone do the work."
+     *
+     * The token remains the seam: a persona whose ground is genuinely different sets `--toolbar-bg`
+     * and `--toolbar-shadow` and this rule steps aside. */
+    background: var(--toolbar-bg, #1e202a);
+    box-shadow: var(--toolbar-shadow, 0 2px 12px -2px rgba(0, 0, 0, 0.55));
+    /* No hairline: it was the only thing separating the bar from the column, and the shadow does
+       that now. A line under an OPAQUE shelf reads as a seam rather than as a separation. */
+    border-block-end: none;
+  }
+  @media (prefers-color-scheme: light) {
+    .toolbar {
+      background: var(--toolbar-bg, #fbfcfe);
+      box-shadow: var(--toolbar-shadow, 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 20px -8px rgba(16, 24, 40, 0.16));
+    }
   }
-  .toolbar.stuck { border-block-end-color: var(--border); }
+  /* `.stuck` is still set by the script below and still means "content is under the bar" — it simply
+     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: 768px) { .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; }
@@ -219,6 +282,37 @@ import AuthMount from "./AuthMount.astro";
      shrink the identity. */
   .tb-nav.tb-mark :global(img) { width: 19px; height: 19px; }
   .tb-nav :global(svg) { width: 19px; height: 19px; }
+
+  /* ── EQUAL INK, TWO BOXES ────────────────────────────────────────────────────────────────────
+   *
+   * queries: the toolbar icons are not the same size · the mark looks bigger than the glyphs ·
+   *          the row is not level · 25.33px
+   *
+   * The paragraph above ends by naming the way out — *"grow the GLYPHS, not the identity"* — and
+   * this is that, arriving from the two repos that measured it.
+   *
+   * "19px" means two different things in this row. A Lucide glyph is drawn in a 24 viewBox with its
+   * ink between 3 and 21, so a 19px box puts **14.25px** of ink on screen; a mark runs to the edge
+   * of its own viewBox and puts **18.65px**. The mark therefore reads about a third larger, which is
+   * exactly what it did — and while the mark was still coloured, colour carried part of that
+   * difference. Now that it is monochrome at rest, the size gap is the only thing left and it shows.
+   *
+   * 19 × 24/18 = 25.33px is the box at which a glyph's INK measures 19px, the same 19px the mark
+   * occupies. `:not(.tb-mark)` is not a special case — it is the same rule read the other way: a
+   * glyph carries padding inside its viewBox and a mark does not, so equal ink needs unequal boxes.
+   *
+   * app.zone settled it, qr arrived at the identical number, and qr's own comment says why it is
+   * here: *"otherwise every persona has to remember to carry it, which is precisely the thing the
+   * shared shell exists to prevent."* */
+  .tb-nav:not(.tb-mark) :global(svg) { width: 25.33px; height: 25.33px; }
+
+  /* THE BUBBLE HANGS. Its silhouette's centre measures 1.05px below the line the other three sit on
+     (39.05 against 38.0) because the tail is part of the shape and pulls the box down with it — the
+     glyph is centred while the thing you SEE is not. A pixel is inside the noise on most rows; on
+     four icons at one size sharing one baseline it is the only thing left that is not level.
+     Nudged rather than redrawn, and `transform` on the svg never collides with the press feedback:
+     `.tb-nav:active`'s scale lives on the anchor. Both repos carry this verbatim. */
+  #navPosts :global(svg) { transform: translateY(-1px); }
 </style>
 
 <script>