@justai/cuts 0.86.0 → 0.88.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.86.0",
+  "version": "0.88.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -37,7 +37,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.12.0",
+    "@justai/core": "^0.13.0",
     "@justai/ui": "^0",
     "@justai/atrium": "^0.1.9"
   }

package/src/Toolbar.astro

@@ -94,6 +94,26 @@ interface Props {
   // registry stores it, the catalog draws it. There was nothing to decide; there was only something
   // to look up.
   //
+  // ── AND THE `<img>` FALLBACK IS THE WORSE OF THE TWO ANSWERS ────────────────────────────────
+  //
+  // queries: the persona icon has a background in the toolbar · a filled tile in the row ·
+  //          the mark looks like a little card · toolbarMark
+  //
+  // `icon.svg` is a TILE — a squircle ground with the mark on it, drawn for an avatar well or a Home
+  // Screen. Dropped into the row as an `<img>` it keeps that ground, and becomes the only object in
+  // a line of four inks with a background behind it. Correct enough to ship and wrong to look at,
+  // which is why it took a founder opening two personas side by side to name it.
+  //
+  // THE RIGHT ANSWER IS qr'S, and it is derive-never-redraw: pass `profileIcon` an INLINE svg made
+  // from the same `icon.svg` with its ground removed and its ids namespaced —
+  //
+  //     import iconSvg from "../../public/icon.svg?raw";
+  //     import { toolbarMark } from "@justai/core";
+  //     <Fragment slot="profileIcon" set:html={toolbarMark(iconSvg, { id: "qr" })} />
+  //
+  // The `<img>` stays as the fallback because a persona that has not done this should still show
+  // its own face rather than a stranger's bust — but it is the floor, not the destination.
+  //
   // 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;
@@ -349,51 +369,47 @@ import AuthMount from "./AuthMount.astro";
      So the difference stays, and it is a difference in ink rather than in box: mark ~19px, glyphs ~14.3px
      inside the same 19px. If the row is ever to read level, the way there is to grow the GLYPHS, not to
      shrink the identity. */
-  .tb-nav.tb-mark :global(img) { width: 19px; height: 19px; }
-
-  /* ── WHATEVER IS FIRST IN THE ROW READS AT 20; EVERYTHING AFTER IT AT 19 ────────────────────
+  /* ── EVERY ICON READS AT 20 ─────────────────────────────────────────────────────────────────
    *
-   * queries: toolbar icon sizes · why is the first icon bigger · 20 and 19 · first position
+   * queries: toolbar icon size · 20 · why is my icon smaller than the others · 26.67 · the mark
+   *          looks small · icon ink
    *
-   * The founder's rule, with app.zone's own mark as the reference every icon is measured against.
-   * It is POSITIONAL, not about which icon happens to be there — the row is saying that the first
-   * thing in it is not one of the sections, and that is true whatever fills the slot:
+   * The founder's rule, and it is about the DRAWING rather than the box: an icon's picture hits 20
+   * on its longer side, whichever side its design naturally uses. A bolt is tall and narrow and hits
+   * 20 on its height; a folder hits it on its width. The container is whatever that takes.
    *
-   *   a persona          `BackToZone` — the way out to app.zone
-   *   a child persona    the parent's face — the way up
-   *   app.zone itself    its OWN mark, because there is no way out of the zone from the zone
+   * One number, two boxes, because a viewBox is not a drawing:
    *
-   * Written structurally for that reason. `BackToZone` sizes itself; when it is absent the nav group
-   * becomes the first child of `.tb-left`, and its first item is what a person sees first. Expressed
-   * as a selector rather than a list of ids, a fourth arrangement is right without anyone editing
-   * this file — which is what "positional" has to mean to be worth the words.
+   *   a MARK fills its own viewBox        → a 20px box puts 20px on screen
+   *   a GLYPH sits inside 18 of 24 (0.75) → 20 / 0.75 = 26.67px
    *
-   * Measured across nine live surfaces first: `home` was 20 on eleven personas and 19 on qr, which
-   * had overridden it; the three children's parent icon was 19; auth's was 19 because I set it there
-   * an hour earlier having read the drift backwards; app.zone's own mark was 19 while being the
-   * first thing in its row. `BackToZone`'s default was right the whole time.
+   * A persona whose mark does NOT fill its viewBox needs its own number, and that is where the
+   * confusion came from: those marks looked small in the same box as everything else because their
+   * drawing occupies less of it. The box is derived — 20 divided by how much of the viewBox the
+   * drawing uses — so a redraw changes it, and the comment beside each one says so.
    *
-   * The first slot always holds a MARK — a drawing that fills its own viewBox — so a 20px box is
-   * 20px of ink. A glyph there would need 26.67 to read the same, and if one ever lands in that slot
-   * this rule is where the exception belongs. */
-  .tb-left > .tb-nav-group:first-child > .tb-nav:first-child :global(svg),
-  .tb-left > .tb-nav-group:first-child > .tb-nav:first-child :global(img) { width: 20px; height: 20px; }
+   * (This replaced a 19-with-a-20-in-front rule that lasted an afternoon. The distinction was real —
+   * the first slot is not one of the sections — but it is said by POSITION and the -7px pull above,
+   * not by a pixel of size nobody can see and everybody can drift.) */
+  .tb-nav.tb-mark :global(img) { width: 20px; height: 20px; }
 
-  /* ── AND IT STARTS WHERE BackToZone STARTS ──────────────────────────────────────────────────
+  /* ── THE FIRST POSITION STARTS WHERE THE ROW STARTS ─────────────────────────────────────────
    *
-   * queries: the first icon is further in on a child persona · the row starts in a different place ·
-   *          navParent inset · margin-inline-start -7px
+   * queries: the first icon is further in on a child persona · navParent inset · -7px ·
+   *          the row starts in a different place
    *
-   * `BackToZone` pulls itself 7px left so the row begins flush with the bar's edge rather than a
-   * tap target's worth inside it. Anything standing in the first position has the same job and needs
-   * the same pull — measured on a live child before this landed: the parent's face sat 26px from the
-   * bar's edge where a persona's way out sits at 17. Nine pixels, and the founder saw it by opening
-   * one and then the other.
+   * `BackToZone` pulls itself 7px left so the row begins flush with the bar's edge rather than a tap
+   * target's worth inside it. Anything standing in the first position has the same job and needs the
+   * same pull — measured on a live child, the parent's face sat 26px from the bar's edge where a
+   * persona's way out sits at 17. Nine pixels, found by eye before any probe looked: a person moving
+   * between two surfaces sees a difference no single page can show.
    *
-   * Same selector as the size above, for the same reason: the first slot is a POSITION, and its two
-   * properties should be decided in one place or they will drift apart again. */
+   * POSITION IS WHAT MAKES THE FIRST SLOT DIFFERENT — not size. Every icon reads at 20; what says
+   * "this one is the way out rather than a section" is where it sits, flush to the edge, before the
+   * group. Structural for that reason: BackToZone sizes and pulls itself, and when it is absent the
+   * nav group becomes the first child of `.tb-left` and its first item inherits the job. */
   .tb-left > .tb-nav-group:first-child > .tb-nav:first-child { margin-inline-start: -7px; }
-  .tb-nav :global(svg) { width: 19px; height: 19px; }
+  .tb-nav :global(svg) { width: 20px; height: 20px; }
 
   /* ── EQUAL INK, TWO BOXES ────────────────────────────────────────────────────────────────────
    *
@@ -416,7 +432,7 @@ import AuthMount from "./AuthMount.astro";
    * 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; }
+  .tb-nav:not(.tb-mark) :global(svg) { width: 26.67px; height: 26.67px; }
 
   /* 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