@justai/cuts 0.76.0 → 0.77.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.77.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

@@ -163,14 +163,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 +252,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>