@justai/cuts 0.74.0 → 0.76.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.74.0",
+  "version": "0.76.0",
   "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -36,7 +36,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.9.0",
+    "@justai/core": "^0.10.0",
     "@justai/ui": "^0.4.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/FilePicker.astro

@@ -93,7 +93,7 @@ const { id, title = "Choose a file", src = "/files" } = Astro.props;
     shape — relying on Done alone "implies that completing the task is the only way to exit the
     sheet" — and the leading edge of the bar is where iOS puts the way out. The kernel inside stops
     drawing its own while it is somebody's guest; one exit, in the place a person already looks. */}
-<Sheet id={`${id}-sheet`} title={title} detent="large" done={false} cancel="Cancel">
+<Sheet id={`${id}-sheet`} title={title} detent="large" done={false} cancel>
   <div class="jfp" id={id} data-picker={id} data-src={src}>
     {/* Empty until the first open. `title` is the accessible name of the document inside — a frame
         announced as "frame" is the one control on the page that says nothing about itself. */}

package/src/Sheet.astro

@@ -69,7 +69,10 @@ interface Props {
   //
   // Default off: a sheet that only SHOWS something already has a grabber and a backdrop, and a
   // labelled exit on a surface with nothing to abandon is a control asking a question nobody has.
-  cancel?: string | false;
+  //
+  // `true` asks for THE ECOSYSTEM'S WORD, translated into the page's language by this cut — which
+  // is what a consumer wants almost every time. Pass a string only to say something else on purpose.
+  cancel?: string | boolean;
   /** Shown at the top of the panel, beside the grabber. Omit for a bare sheet. */
   title?: string;
   /** How tall it opens. `medium` is iOS's half-height default; drag up promotes it to large. */
@@ -110,14 +113,26 @@ interface Props {
   // Hence the rule this cut applies: **offered at `large`, absent at `medium`.** A consumer that
   // wants it anyway passes a label; one that wants it gone passes `done={false}`.
   //
-  // It is a LABEL rather than a boolean because the fleet speaks thirteen languages, and a cut that
-  // hardcoded the English would be a component making its consumer's copy decisions.
-  done?: string | false;
+  // It used to be a LABEL rather than a boolean, reasoned as "the fleet speaks thirteen languages,
+  // and a cut that hardcoded the English would be a component making its consumer's copy decisions".
+  // That was backwards, and its own default proved it: `"Done"`, hardcoded, in English. Handing the
+  // word out does not avoid the decision — it makes it thirteen times per repo and leaves the wrong
+  // answer as the default. `Done` is the ECOSYSTEM'S word, and the cut now carries it (law 1).
+  done?: string | boolean;
 }
 const { id, title, detent = "medium", done, cancel, floorToParent = true } = Astro.props;
 // Default: shown at large, absent at medium. `false` removes it, a string replaces the word.
-const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done" : null));
-const cancelLabel = cancel === false || cancel === undefined ? null : cancel;
+//
+// THREE ANSWERS, AND THE MIDDLE ONE IS THE POINT. `true` asks for the ecosystem's word — rendered
+// English here and corrected to the page's language by the script below. A STRING is a consumer
+// making a deliberate copy decision ("Not now", "Discard") and is left exactly as written. `false`
+// removes the control. Only the ecosystem's own word carries `data-chrome`, so a consumer's never
+// gets overwritten.
+const doneDefault = done === undefined && detent === "large";
+const doneLabel = done === false ? null : (doneDefault || done === true ? "Done" : (done as string | undefined) ?? null);
+const cancelLabel = cancel === false || cancel === undefined ? null : (cancel === true ? "Cancel" : cancel);
+const cancelIsOurs = cancel === true;
+const doneIsOurs = doneDefault || done === true;
 ---
 
 {/* aria-labelledby over aria-label when there IS a title, so the accessible name and the visible
@@ -155,7 +170,7 @@ const cancelLabel = cancel === false || cancel === undefined ? null : cancel;
         NO HOMEWORK: a consumer writes markup and two attributes. No script, and the sheet still
         works exactly as before for the consumers that never declare a page. */}
     {cancelLabel && (
-      <button class="sheet-cancel" id={`${id}-cancel`} type="button" data-sheet-cancel>{cancelLabel}</button>
+      <button class="sheet-cancel" id={`${id}-cancel`} type="button" data-sheet-cancel data-chrome={cancelIsOurs ? "cancel" : undefined}>{cancelLabel}</button>
     )}
     <button class="sheet-back" id={`${id}-back`} type="button" data-sheet-back hidden>
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
@@ -165,7 +180,7 @@ const cancelLabel = cancel === false || cancel === undefined ? null : cancel;
     {/* `id`-suffixed for the same reason the title is: a surface that translates at RUNTIME needs a
         stable hook to re-label it from its own dictionary. */}
     {doneLabel && (
-      <button class="sheet-done" id={`${id}-done`} type="button" data-sheet-done>{doneLabel}</button>
+      <button class="sheet-done" id={`${id}-done`} type="button" data-sheet-done data-chrome={doneIsOurs ? "done" : undefined}>{doneLabel}</button>
     )}
     <div class="sheet-body"><slot /></div>
   </div>
@@ -227,12 +242,20 @@ const cancelLabel = cancel === false || cancel === undefined ? null : cancel;
     :global([data-sheet-page].is-current), :global([data-sheet-page].is-popping) { animation: none; }
   }
 
-  /* MIRRORS DONE ACROSS THE BAR — same band, same weight, opposite edge — and it is not tinted
-     like a commit: leaving without answering is an ordinary thing to do, not the reason you came. */
+  /* queries: cancel colour · should Cancel be tinted · cancel looks disabled · grey cancel ·
+     accent on the sheet bar · cancel vs done weight
+     MIRRORS DONE ACROSS THE BAR — same band, opposite edge, SAME TINT, LIGHTER WEIGHT.
+
+     This was grey (`--text-dim`), argued as "leaving without answering is an ordinary thing to do,
+     not the reason you came". True about the hierarchy, wrong about the means: on iOS a bar button
+     is TINTED, and grey text on a bar is what the platform uses to say UNAVAILABLE. Mail, Calendar
+     and Photos all put Cancel in the tint colour beside a bolder Done — the hierarchy is carried by
+     WEIGHT, 500 against 600, which is the one channel that does not collide with an existing
+     meaning. A dimmed way out reads as a door that will not open. */
   .sheet-cancel {
     position: absolute; inset-block-start: 0; inset-inline-start: 0;
     background: none; border: 0; cursor: pointer; padding: 12px 16px;
-    font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--text-dim);
+    font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--accent);
   }
   .sheet-cancel:active { opacity: 0.6; }
   .sheet-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
@@ -388,6 +411,8 @@ const cancelLabel = cancel === false || cancel === undefined ? null : cancel;
 </style>
 
 <script>
+  import { chromeCopy } from "@justai/core";
+
   // The sheet's behaviour, once, for every persona that mounts one. Consumers write no JavaScript:
   // an element with data-sheet-open="<id>" is a trigger, and that is the whole contract.
   //
@@ -395,6 +420,37 @@ const cancelLabel = cancel === false || cancel === undefined ? null : cancel;
   // component still had a desktop branch; now that there is one behaviour, there is one code path,
   // and a mouse can pull the grabber exactly as a finger does.
   (function () {
+    // queries: sheet says Cancel in English · the picker's cancel is not translated · Done stays
+    //          English · translate the sheet bar · why does the cut translate itself
+    //
+    // THE BAR SAYS ITS OWN WORDS, IN THE PAGE'S LANGUAGE.
+    //
+    // Found on an Arabic page: every word in the picker in Arabic, and `Cancel` in English in the
+    // sheet's own bar — because the cut rendered the literal and left translating it to whoever
+    // mounted it.
+    //
+    // WHY AT RUNTIME rather than at build. There is no locale to read at build. The fleet routes
+    // languages through a `[lang]` PARAMETER, not Astro's i18n config, so `Astro.currentLocale` is
+    // undefined in every persona that has one — and the two surfaces that need this most (`files`
+    // and `/me`) are ONE bundle serving thirteen languages, so no build-time answer could be right
+    // for them anyway. `<html lang>` is the one place every one of them agrees.
+    //
+    // A CONSUMER'S WORD ALWAYS WINS. `<Sheet cancel="Not now">` is a deliberate choice and this must
+    // not overwrite it — so only the DEFAULTS carry `data-chrome`, and only those are rewritten.
+    // That is also what keeps the runtime-translating surfaces working: they re-label by id from
+    // their own dictionary, which is the older contract and still the more specific one.
+    const say = () => {
+      const w = chromeCopy(document.documentElement.lang);
+      for (const el of document.querySelectorAll<HTMLElement>("[data-chrome]")) {
+        const word = w[el.dataset.chrome as "cancel" | "done"];
+        if (word) el.textContent = word;
+      }
+    };
+    say();
+    // The child personas set `<html lang>` from their own storage AFTER this module runs — a sheet
+    // translated only at load would be correct on a host and English inside a guest. Cheaper than a
+    // MutationObserver and exact: the attribute cannot change without the element being replaced.
+    new MutationObserver(say).observe(document.documentElement, { attributeFilter: ["lang"] });
     const DRAG_CLOSE = 0.28;   // fraction of the panel's height that dismisses on release
     const FLICK = 0.55;        // px/ms — a fast flick dismisses regardless of distance
     const wired = new WeakSet<HTMLDialogElement>();