@justai/cuts 0.50.0 → 0.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.50.0",
+  "version": "0.52.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {

package/src/Base.astro

@@ -66,7 +66,7 @@ interface Props {
   themeLight?: string;
   /** app.zone's property by default. justai.pro passes its own. Pass `null` for a persona that runs
    *  NO analytics at all — the whole GA block and the consent banner are then not rendered. The
-   *  privacy/terms sub-personas use this: the surface that proves it collects nothing by running
+   *  privacy/terms child personas use this: the surface that proves it collects nothing by running
    *  nothing. */
   gaId?: string | null;
 }
@@ -200,7 +200,7 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
          request and no console error, which is the only kind of analytics bug nobody finds. */}
     {/* gaId can be null: a persona that measures NOTHING. Pass gaId={null} and the entire analytics
         block below and the consent banner in the body are simply not rendered — no gtag, no cookie,
-        no request. The privacy/terms sub-personas run this way, and it is not an exception but their
+        no request. The privacy/terms child personas run this way, and it is not an exception but their
         character: the one surface that can prove it collects nothing by running nothing (doctrine 15).
         The default stays app.zone's property, so every existing persona is unchanged — this costs the
         ten that measure themselves exactly nothing. */}

package/src/Posts.astro

@@ -106,7 +106,43 @@ const vars = [
   .trow.last .cc { padding-block-end: 0; }
 
   .pa { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 22px; background: var(--feed-av-bg, #fff); border: 1px solid var(--border); overflow: hidden; }
-  .uav { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: var(--c, #888); }
+  /* A human's avatar: their initial on a disc in their own colour, which arrives from the API as --c.
+     It was the last flat-filled object in the family, so it takes the house FILL recipe
+     (app-zone/.justai/expert/how-an-app-zone-icon-is-lit.md): an off-centre radial at 37% 31% with three
+     stops at L+22 / L+4 / L−11, so the light falls from the upper left and the lower right carries the
+     shade.
+
+     THE SPECULAR IS DELIBERATELY OMITTED, which is the one place this departs from the recipe. The doc
+     defines it as "what makes it a sphere rather than a lighter disc" — exactly right for howlong's beads,
+     which are beads, and wrong here. With it the disc read as a ball; without it the same three stops read
+     as a flat disc with light across it, which is what an avatar should be. Measured on Dana's #0a84ff: the
+     highlight sits 63 luminance steps above the flat colour instead of 94, and the rim is untouched at L99
+     either way — only the middle came down.
+
+     The stops are derived in CSS rather than precomputed, because the colour only exists at runtime.
+     `hsl(from var(--c) h s calc(l ± n))` is the rule stated literally: hue and saturation are passed
+     through untouched and lightness does all the shading. Measured — lit end 210.2° S100, shaded end
+     210.1° S100, so nothing drifts.
+
+     NO % ON THOSE NUMBERS. Inside relative colour syntax `l` resolves to a <number>, so `calc(l + 22%)`
+     mixes types, the declaration is dropped, and the disc silently renders flat — it looked finished and
+     measured as zero light-to-shadow difference until the units came off. `background-color` is kept as a
+     separate declaration for the same reason: where the syntax is unsupported the disc loses its light
+     rather than disappearing.
+
+     `max(0, 39 - l)` is the doc's L28 floor as a LIFT applied to all three stops, not a clamp on the dark
+     end: clamping compresses the spread and weakens the emboss unevenly. 39 is the shortfall threshold
+     (28 + 11), so a colour light enough to clear it adds nothing. */
+  .uav {
+    flex: none; width: 30px; height: 30px; border-radius: 50%;
+    display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff;
+    background-color: var(--c, #888);
+    background-image:
+      radial-gradient(ellipse 80% 80% at 37% 31%,
+        hsl(from var(--c, #888) h s calc(l + 22 + max(0, 39 - l))) 0%,
+        hsl(from var(--c, #888) h s calc(l + 4 + max(0, 39 - l))) 40%,
+        hsl(from var(--c, #888) h s calc(l - 11 + max(0, 39 - l))) 100%);
+  }
   .rav { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 15px; background: var(--feed-av-bg, #fff); border: 1px solid var(--border); overflow: hidden; }
   .pa :global(svg), .rav :global(svg) { display: block; }
   .pa .mk, .rav .mk { width: 100%; height: 100%; object-fit: cover; display: block; }
@@ -118,8 +154,22 @@ const vars = [
      go from the CONTAINER, which is why this reads upward from the image with :has(). Scoping it to the image
      is what keeps a sibling persona's tiled icon tiled: .rav wraps their reply as well as a self-reply.
      `contain` rather than `cover`, because a mark with transparent margins must not be cropped to fill. */
-  .pa:has(.mk.bare), .rav:has(.mk.bare) { background: none; border-color: transparent; }
-  .pa .mk.bare, .rav .mk.bare { object-fit: contain; }
+  .pa:has(.mk.bare), .rav:has(.mk.bare) {
+    background: none; border-color: transparent;
+    /* The slot rounds its corners and clips, which is right for a tile whose own corners are round and wrong
+       for a mark with no tile: the arms reach the corners, so the radius sliced their round outer tips flat.
+       Measured before the fix — 27.5px wide against 28.0 tall inside a square 30px slot, the asymmetry being
+       the clipping showing up as numbers. Nothing is left to clip once the mark is inset below, but both go
+       anyway, or a later change to the inset brings the slicing back silently. */
+    border-radius: 0; overflow: visible;
+  }
+  /* 72%, measured rather than judged. Filling the slot, the arms painted 92% of it; a sibling's tiled icon
+     paints its glyph across 61%, because the glyph sits inset within its own tile. So app.zone carried half
+     again the painted width of every persona it was replying to, in a thread where it is one speaker among
+     peers rather than the platform above them. At 72% the arms land near 67% — a shade above the siblings,
+     which suits a bracket form being lighter than a filled ring. The feed permalink page uses the same number
+     for the same reason; the two surfaces render one conversation and must not disagree about it. */
+  .pa .mk.bare, .rav .mk.bare { width: 72%; height: 72%; object-fit: contain; }
   /* The scheme pair: the page decides, because the SVG's own media query does not survive <img>.
      Written as `.pa .mk.av-*` rather than `.av-*` deliberately — `.pa .mk { display: block }` above is two
      classes deep, so a single-class `.av-light { display: none }` loses on specificity and the toggle silently