@justai/cuts 0.65.0 → 0.67.0

package/package.json

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

package/src/ActionRow.astro

@@ -114,8 +114,18 @@ const { id, label, tone = "plain", detail, hidden, i18n, ...rest } = Astro.props
   .jal-label { flex: 1; min-width: 0; }
   .jal-detail { color: var(--text-dim); font-size: var(--fs-xs); flex: none; }
 
-  .jal-row.is-accent { color: var(--accent); font-weight: 600; }
-  .jal-row.is-accent .jal-ico { color: var(--accent); }
+  /* queries: the accent row is unreadable in light mode · is-accent contrast · accent as text ·
+     my persona's accent is too bright to read in a sheet
+     THE ACCENT AS INK IS NOT THE ACCENT AS PAINT. A fill only has to be SEEN; a word has to be READ,
+     and a persona whose accent is light fails contrast here while looking perfect as a button — tts's
+     amber measures 1.67:1 on the light surface against the 4.5 a word needs.
+     This is the same problem ConfirmSheet already solved with `--confirm-accent`, one component over,
+     for the same stated reason ("the action reads as TEXT"). The hook is additive: a consumer that
+     sets nothing gets exactly what it got before, and one that sets `--accent-text` gets a readable
+     row. Prefer fixing it here over a persona globalising this class — that is what tts had to do
+     while this shipped, and a persona reaching into a cut's internals is a fix that rots. */
+  .jal-row.is-accent { color: var(--accent-text, var(--accent)); font-weight: 600; }
+  .jal-row.is-accent .jal-ico { color: var(--accent-text, var(--accent)); }
   .jal-row.is-danger { color: var(--danger); }
   .jal-row.is-danger .jal-ico { color: var(--danger); }
   .jal-row.is-danger:active { background: color-mix(in srgb, var(--danger) 12%, transparent); }

package/src/LangPicker.astro

@@ -119,7 +119,8 @@ const ordered = orderLocales(locales);
   .item:active { background: color-mix(in srgb, var(--text) 12%, transparent); }
   @media (hover: hover) { .item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } }
   .item:focus-visible { outline: none; background: color-mix(in srgb, var(--accent) 16%, transparent); }
-  .item.active { color: var(--accent); font-weight: 600; }
+  /* The chosen locale reads as TEXT — see ActionRow for why this takes the ink hook. */
+  .item.active { color: var(--accent-text, var(--accent)); font-weight: 600; }
   .item svg { width: 17px; height: 17px; flex: none; }
 </style>
 

package/src/Posts.astro

@@ -248,14 +248,14 @@ const vars = [
   .phandle, .dot, .pt { color: var(--text-dim); font-weight: 400; }
   /* a persona's name in the feed links to its profile (X-style); humans have no link */
   .pn { color: inherit; text-decoration: none; }
-  .pn:hover b { color: var(--accent); }
+  .pn:hover b { color: var(--accent-text, var(--accent)); }
   a.pt { text-decoration: none; }
   a.pt:hover { text-decoration: underline; }
   .pbd { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 4px; }
   .pact { display: flex; gap: 22px; margin-block-start: 12px; color: var(--text-dim); }
   .pact svg { width: 17px; height: 17px; }
   .pact span { cursor: pointer; transition: color 0.2s; }
-  .pact span:hover { color: var(--accent); }
+  .pact span:hover { color: var(--accent-text, var(--accent)); }
   .ch { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); }
   .ch b { font-weight: 600; }
   .ch .muted { color: var(--text-dim); font-weight: 400; }

package/src/Toolbar.astro

@@ -170,7 +170,9 @@ import AuthMount from "./AuthMount.astro";
   }
   .tb-nav:hover { color: var(--text); }
   .tb-nav:active { transform: scale(0.9); }
-  .tb-nav.active { color: var(--accent); }
+  /* The active glyph is a graphic, so it wants 3:1 rather than 4.5 — which a light accent still
+     misses. Same ink hook as everywhere the accent stops being paint. */
+  .tb-nav.active { color: var(--accent-text, var(--accent)); }
 
   /* A MARK IS NOT DIMMED, AND THE PROFILE CUT DOES NOT NEED IT TO BE.
      It shipped dimmed at rest for one version, on the reasoning that a mark cannot take `currentColor`
@@ -188,15 +190,14 @@ import AuthMount from "./AuthMount.astro";
      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.
 
-     14.5px, NOT the 19px the stroke icons get, and the difference is the whole point. A glyph carries its
-     own padding: measured in this toolbar, the bubble and the folder draw 14.3px of ink inside a 19px box,
-     and the grid 14.25px. A mark has no padding — it is artwork whose coordinates fill its viewBox
-     (favicon.svg 101%, appzone-mark.svg 111%), so a 19px box gives it 19px of ink and it reads about a
-     third larger than everything beside it at the same nominal size. Equal boxes are not equal icons.
-     Sizing the box to the neighbours' INK is what makes the row look level. The founder saw this before
-     it was measured, and the same correction already exists in the Profile cut, where the bare mark sits
-     at 72% of its tile for the same reason. */
-  .tb-nav.tb-mark :global(img) { width: 14.5px; height: 14.5px; }
+     19px, the same box the stroke icons get. 0.65.0 set this to 14.5px to make the mark's INK match the
+     neighbours' — a glyph carries padding and a mark does not, so at an equal box the mark reads about a
+     third larger. The measurement was right and the conclusion was the founder's to make, not mine: he
+     wants the mark at its own size. A logo is allowed to be more present than a glyph.
+     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; }
   .tb-nav :global(svg) { width: 19px; height: 19px; }
 </style>