@justai/cuts 0.71.0 → 0.73.0

package/package.json

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

package/src/ActionList.astro

@@ -45,7 +45,15 @@ const { title, note } = Astro.props;
 </div>
 
 <style>
+  /* queries: two action lists touching · no gap between groups · the second group sits on the first
+     THE BREAK IS THE GRAMMAR, so the component owns it.
+     A group carried its INTERNAL 7px and nothing between itself and the next one, which left the
+     break — the thing that separates "things you might do" from "the door with no way back" — to
+     whichever consumer remembered a wrapper. files did in one sheet and not in another, and the
+     second one read as one long list with a red row at the end.
+     `:last-child` so a lone group adds no trailing space it did not ask for. */
   .jal-group { display: flex; flex-direction: column; gap: 7px; }
+  .jal-group + .jal-group { margin-block-start: 22px; }
   /* Inset and grouped: the card is the group, and `overflow: hidden` is what lets a row's own
      background reach the rounded corner instead of squaring it off on press. */
   .jal {

package/src/FilePicker.astro

@@ -85,9 +85,15 @@ const { id, title = "Choose a file", src = "/files" } = Astro.props;
 
 {/* NO `Done` here, deliberately. This sheet is a QUESTION, and its answer is a row being
     tapped inside the frame — so a Done that merely closed would be a Cancel wearing the word for
-    finishing, on the one surface where the difference decides what the caller receives. The kernel
-    inside shows its own Cancel, worded as the choice it actually is. */}
-<Sheet id={`${id}-sheet`} title={title} detent="large" done={false}>
+    finishing, on the one surface where the difference decides what the caller receives.
+
+    CANCEL IS IN THE BAR (2026-08-01). It used to be the kernel's own, in a footer beside Upload,
+    Camera and Record — which put it at the rank of the three SOURCES when it is not one of them:
+    those answer "where shall I get it", and this answers "nowhere". Apple's guidance is the same
+    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">
   <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

@@ -53,6 +53,23 @@ import "./ground.css";
 interface Props {
   /** DOM id — the handle `data-sheet-open` points at. */
   id: string;
+  // queries: cancel button on a sheet · how do I get out of a sheet without answering · sheet
+  //          cancel top left · Cancel Done and Back together · dismiss a question
+  //
+  // ── THE WAY OUT, IN THE BAR ──────────────────────────────────────────────────────────────
+  //
+  // A sheet that ASKS something needs a visible way to answer "neither" — and Apple's own guidance
+  // is that relying on Done alone "implies that completing the task is the only way to exit the
+  // sheet, which can feel restrictive or misleading". So a question carries a leading dismiss.
+  //
+  // It is the LEADING edge because that is where iOS puts it and because Done owns the trailing
+  // one; a cancel on the right would be a control that looks like a commit. And it gives way to the
+  // BACK button when a page is pushed — the same guidance says not to show Cancel, Done and Back
+  // together, and going back is the way out of a page that has one.
+  //
+  // 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;
   /** 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. */
@@ -97,9 +114,10 @@ interface Props {
   // hardcoded the English would be a component making its consumer's copy decisions.
   done?: string | false;
 }
-const { id, title, detent = "medium", done, floorToParent = true } = Astro.props;
+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;
 ---
 
 {/* aria-labelledby over aria-label when there IS a title, so the accessible name and the visible
@@ -136,6 +154,9 @@ const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done"
 
         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-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>
       <span data-sheet-back-label></span>
@@ -186,6 +207,17 @@ const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done"
      Only one page is in the layout at a time, so the body's height is the CURRENT page's — which is
      what makes the sheet grow and shrink around the content the way a navigation stack does. The
      slide is 220ms and is skipped for reduced motion, where the pages simply swap. */
+  /* queries: the second sheet page appears BELOW the first · pushing shows both pages · the history
+     list is squeezed at the bottom · a page does not hide · consumer css beats the sheet
+     HIDING A PAGE IS A MECHANISM, NOT A SUGGESTION, so it is written where a class cannot outrank
+     it. `[data-sheet-page] { display: none }` is one attribute — specificity (0,1,0) — and any
+     consumer rule naming two classes beats it. files styles its detail page as `.pp .fd { display:
+     flex }`, which is ordinary and correct, and it meant the root page NEVER HID: pushing to the
+     versions drew them one under the other, so a person who tapped History got a cramped strip at
+     the bottom of a sheet still showing everything they had just left.
+     Qualified by the dialog it lives in, which raises this to (0,2,1) and keeps the rule honest —
+     a page outside a sheet is nobody's business here. */
+  :global(dialog [data-sheet-page]:not(.is-current):not(.is-popping)) { display: none; }
   :global([data-sheet-page]) { display: none; }
   :global([data-sheet-page].is-current) { display: block; animation: sheet-push 0.22s var(--ease-out) both; }
   :global([data-sheet-page].is-popping) { display: block; animation: sheet-pop 0.22s var(--ease-out) both; }
@@ -195,6 +227,19 @@ const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done"
     :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. */
+  .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);
+  }
+  .sheet-cancel:active { opacity: 0.6; }
+  .sheet-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
+  /* Cancel, Done and Back must never stand together — going back IS the way out of a pushed page,
+     so the leading slot belongs to whichever of the two is meaningful right now. */
+  .sheet:has(.sheet-back:not([hidden])) .sheet-cancel { display: none; }
+
   .sheet-done {
     position: absolute; inset-block-start: 0; inset-inline-end: 0;
     background: none; border: 0; cursor: pointer; padding: 12px 16px;
@@ -575,6 +620,16 @@ const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done"
       (d.closest("dialog.sheet") as HTMLDialogElement | null)?.close();
     });
 
+    // Cancel closes too, and the difference is not in what it DOES — it is in what the caller may
+    // conclude. A sheet that resolves a promise reads its own `close` event and settles null there,
+    // so a cancel, a backdrop tap and a drag down are one path with one answer. Two words, one exit,
+    // and no second place for a caller to be told something different.
+    document.addEventListener("click", (e) => {
+      const c = (e.target as HTMLElement)?.closest?.("[data-sheet-cancel]");
+      if (!c) return;
+      (c.closest("dialog.sheet") as HTMLDialogElement | null)?.close();
+    });
+
     document.addEventListener("click", (e) => {
       const t = (e.target as HTMLElement)?.closest?.("[data-sheet-open]");
       if (!t) return;