@justai/cuts 0.61.0 → 0.62.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.62.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,12 @@
 //   • 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. Slot presence adds `.tb-mark`, which carries "you are here" as opacity instead.
 //   • 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 +58,29 @@ 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 because a mark cannot take `currentColor`: an <img> ignores it, so the accent that says
+            "you are here" would never reach it. The class moves that signal to opacity instead. */}
+        <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 +171,22 @@ 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 SAYS "YOU ARE HERE" WITH OPACITY, BECAUSE IT CANNOT SAY IT WITH COLOUR.
+     The three stroke icons are painted by `currentColor`, so `.active` turning them accent is enough. An
+     <img> mark ignores `currentColor` entirely — it carries its own paint — so on the mark that rule is a
+     declaration with no effect, and the one icon a person is looking at would be the one that never lit.
+     Opacity is the same answer BackToZone reached when it took the mark: dimmed at rest, whole when
+     current. `!important`-free, because these are more specific than the colour rules above. */
+  .tb-nav.tb-mark { opacity: 0.72; transition: opacity 0.25s var(--ease-out); }
+  .tb-nav.tb-mark:hover,
+  .tb-nav.tb-mark.active { opacity: 1; }
+  /* 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>