@justai/cuts 0.73.0 → 0.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.73.0",
+  "version": "0.75.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/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. */}
@@ -288,7 +288,11 @@ const { id, title = "Choose a file", src = "/files" } = Astro.props;
         bus.proxy({
           service: "files",
           method: "pick",
-          args: { accept: req.accept },
+          // `hostExit`: this cut draws the way out in its own sheet's bar, so the kernel must not
+          // draw a second one in its footer beside the three sources. TOLD, never inferred — the
+          // kernel is also embedded by hosts that frame it bare and give it no chrome at all, and
+          // one that hid its own exit on a guess would leave that person unable to answer "nowhere".
+          args: { accept: req.accept, hostExit: true },
           options: { timeout: req.timeout ?? 300000 },
         }));
       if (!result) return null;

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>();