@justai/cuts 0.75.0 → 0.77.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justai/cuts",
-  "version": "0.75.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/BackToZone.astro

@@ -2,10 +2,46 @@
 // Home affordance → app.zone (the platform / App Store home). Standard on every app:
 // always visible at the top-left of the toolbar. Also tidies the ?ref / ?lang hints
 // from the URL so shared links stay clean.
+//
+// IT IS THE ZONE'S MARK NOW, NOT A HOUSE. The generic roof-and-walls said "home" in the abstract and
+// nothing about WHERE home is — every app in the fleet drew the same house, so a visitor who had not
+// already seen app.zone learned nothing from it. The four-bracket mark names the destination.
+//
+// INLINE, and it has to be. A shared component cannot reference `/appzone-mark.svg`: every persona
+// serves its own host, so that path would resolve to a file each one had to carry. Inline also buys
+// what an <img> forecloses — an <img> ignores `currentColor`, and this mark has to be able to speak
+// in the toolbar's ink.
+//
+// MONOCHROME AT REST, ITS OWN COLOURS ON HOVER. app.zone's own toolbar does the same thing against a
+// different state: there the mark is ink until the Profile cut is current, because there the mark IS
+// the persona. Here it can never become current — it is a link OUT — so the idea is mapped onto the
+// only state this control has. At rest it sits level with the row it stands in; engage with it and
+// the zone shows itself. `:focus-visible` counts as the same event: somebody arriving by Tab should
+// be shown what a pointer shows.
+// On touch there is no hover and it stays ink, which is the correct resting appearance rather than a
+// degraded one. Press feedback is untouched: `:active`'s scale applies to the whole anchor.
+//
+// HOUSE-LIGHTING: EXCEPTION — inline, and unlit. The mark carries double inner shadows in
+// app.zone's own appzone-mark.svg; at 20px a `stdDeviation` of 3.84 in a 928 box is 0.08px, so the
+// lighting was never visible at this size, and in one flat ink there is nothing to shade. The
+// geometry here is a second copy of the one in that file, which is authored by hand and generated by
+// nothing — a redraw has to be carried across to this component as well.
 ---
 
 <a class="home" href="https://app.zone" data-home aria-label="app.zone" title="app.zone">
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V20h14V9.5"/></svg>
+  <svg class="azmark" viewBox="-8.5 0 928 928" aria-hidden="true">
+    <path class="arm a1" d="M360.365 0C372.599 0 382.517 9.91778 382.517 22.152V97.7555C382.517 109.99 372.599 119.907 360.365 119.907H203.398C157.082 119.907 119.537 157.453 119.537 203.769V353.64C119.537 370.244 106.077 383.704 89.4732 383.704H22.152C9.91778 383.704 0 373.786 0 361.552V175.633C0 78.6337 78.6338 0 175.634 0H360.365Z"/>
+    <path class="arm a2" d="M550.635 2.37305C538.401 2.37305 528.483 12.2908 528.483 24.525V100.129C528.483 112.363 538.401 122.28 550.635 122.28H707.602C753.918 122.28 791.463 159.826 791.463 206.142V356.013C791.463 372.617 804.923 386.077 821.527 386.077H888.848C901.082 386.077 911 376.159 911 363.925V178.006C911 81.0068 832.366 2.37305 735.366 2.37305H550.635Z"/>
+    <path class="arm a3" d="M550.635 928.009C538.401 928.009 528.483 918.092 528.483 905.857V830.254C528.483 818.02 538.401 808.102 550.635 808.102H707.602C753.918 808.102 791.463 770.556 791.463 724.241V574.369C791.463 557.765 804.923 544.305 821.527 544.305H888.848C901.082 544.305 911 554.223 911 566.457V752.376C911 849.376 832.366 928.009 735.366 928.009H550.635Z"/>
+    <path class="arm a4" d="M360.365 928.009C372.599 928.009 382.517 918.092 382.517 905.857V830.254C382.517 818.02 372.599 808.102 360.365 808.102L203.398 808.102C157.082 808.102 119.537 770.556 119.537 724.241L119.537 574.369C119.537 557.765 106.077 544.305 89.4732 544.305H22.152C9.91778 544.305 0 554.223 0 566.457L0 752.376C0 849.376 78.6338 928.009 175.634 928.009L360.365 928.009Z"/>
+    <rect class="ctr" x="348.103" y="367.09" width="203.323" height="203.323" rx="16.614"/>
+    <defs>
+      <linearGradient id="azHome1" x1="435.524" y1="-60.9179" x2="6.32917" y2="377.375" gradientUnits="userSpaceOnUse"><stop stop-color="#CCDA3E"/><stop offset="1" stop-color="#5FA82C"/></linearGradient>
+      <linearGradient id="azHome2" x1="460.049" y1="-96.9153" x2="904.671" y2="379.748" gradientUnits="userSpaceOnUse"><stop stop-color="#F2694A"/><stop offset="1" stop-color="#E04A30"/></linearGradient>
+      <linearGradient id="azHome3" x1="425.634" y1="1029.67" x2="904.671" y2="550.635" gradientUnits="userSpaceOnUse"><stop stop-color="#F8C24A"/><stop offset="1" stop-color="#EFA229"/></linearGradient>
+      <linearGradient id="azHome4" x1="450.555" y1="993.674" x2="6.32921" y2="550.635" gradientUnits="userSpaceOnUse"><stop stop-color="#5285DC"/><stop offset="1" stop-color="#2E62C6"/></linearGradient>
+    </defs>
+  </svg>
 </a>
 
 <style>
@@ -17,7 +53,26 @@
   }
   .home:hover { color: var(--text); }
   .home:active { transform: scale(0.9); }
-  .home svg { width: 20px; height: 20px; }
+  .home svg { width: 20px; height: 20px; display: block; }
+
+  /* At rest every part of the mark is the row's ink, so the silhouette reads as one shape rather than
+     a logo parked in a toolbar. The centre is FILLED rather than knocked out: in the coloured drawing
+     it is a counter-shape separating four saturated arms, and in one colour there is nothing to
+     separate — a hole there would be a gap the mark does not have. */
+  .azmark .arm,
+  .azmark .ctr { fill: currentColor; }
+
+  .home:hover .azmark .a1, .home:focus-visible .azmark .a1 { fill: url(#azHome1); }
+  .home:hover .azmark .a2, .home:focus-visible .azmark .a2 { fill: url(#azHome2); }
+  .home:hover .azmark .a3, .home:focus-visible .azmark .a3 { fill: url(#azHome3); }
+  .home:hover .azmark .a4, .home:focus-visible .azmark .a4 { fill: url(#azHome4); }
+  /* The centre follows the ground, and both values are the project's own: #F5F1E8 is the centre of
+     Logo Black, drawn for dark grounds, and #2B2724 the centre of Logo White, drawn for pale ones.
+     Dark is the un-queried default because the fleet's tokens are dark-first. */
+  .home:hover .azmark .ctr, .home:focus-visible .azmark .ctr { fill: #F5F1E8; }
+  @media (prefers-color-scheme: light) {
+    .home:hover .azmark .ctr, .home:focus-visible .azmark .ctr { fill: #2B2724; }
+  }
 </style>
 
 <script>

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>