@justai/cuts 0.61.0 → 0.63.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justai/cuts",
-  "version": "0.61.0",
-  "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
+  "version": "0.63.0",
+  "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",

package/src/Toolbar.astro

@@ -17,6 +17,14 @@
 //   • 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.
+//     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.
 //   • 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.
@@ -52,8 +60,28 @@ const { sectionsLabel, profileLabel, kernelLabel, postsLabel, home = true, files
     <div class="tb-left">
       {home && <BackToZone />}
       <nav class="tb-nav-group" aria-label={sectionsLabel}>
-        <a class="tb-nav" id="navProfile" href="#profile" aria-label={profileLabel} title={profileLabel}>
-          <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>
+        {/* 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 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.
+
+            `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>
+          )}
         </a>
         <a class="tb-nav" id="navKernel" href="#kernel" aria-label={kernelLabel} title={kernelLabel}>
           <slot name="kernelIcon" />
@@ -144,6 +172,23 @@ const { sectionsLabel, profileLabel, kernelLabel, postsLabel, home = true, files
   .tb-nav:hover { color: var(--text); }
   .tb-nav:active { transform: scale(0.9); }
   .tb-nav.active { color: var(--accent); }
+
+  /* A MARK IS NOT DIMMED, AND THE PROFILE CUT DOES NOT NEED IT TO BE.
+     It shipped dimmed at rest for one version, on the reasoning that a mark cannot take `currentColor`
+     and so needed opacity to say "you are here". Both halves of that were true and the conclusion was
+     still wrong, because the state was already being said, louder: `titleFor` in @justai/core returns an
+     empty string for `profile`, so the title strip CLOSES on this cut and opens — 26px of layout, naming
+     where you are — the moment you leave it. Against that, tinting an icon adds nothing.
+     And the two are not the same kind of thing. The three stroke icons are generic glyphs whose colour IS
+     a UI state; a mark is an identity. A faded logo does not read as "not current", it reads as disabled.
+     So the mark stays itself. Press feedback is not lost: `.tb-nav:active`'s scale applies to it like any
+     other item. `.tb-mark` remains, because the sizing rule below still needs to know an image is here. */
+  /* The shell sizes the mark and says NOTHING about `display`, deliberately. Two files arrive for the two
+     themes — an SVG's internal `prefers-color-scheme` does not survive <img>, measured — and the persona
+     hides one with a media query. A `display: block` here would be two classes deep against the persona's
+     one and would WIN, showing both marks stacked. That exact mistake shipped once in this shell and the
+     founder counted the duplicate logos before anyone read the CSS. Width and height only. */
+  .tb-nav.tb-mark :global(img) { width: 19px; height: 19px; }
   .tb-nav :global(svg) { width: 19px; height: 19px; }
 </style>