npm - @justai/cuts - Versions diffs - 0.44.0 → 0.46.0 - Mend

@justai/cuts 0.44.0 → 0.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +1 -1
package/src/Sheet.astro +112 -3

package/package.json CHANGED Viewed

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

package/src/Sheet.astro CHANGED Viewed

@@ -57,6 +57,24 @@ interface Props {
   title?: string;
   /** How tall it opens. `medium` is iOS's half-height default; drag up promotes it to large. */
   detent?: "medium" | "large";
+  // queries: a sheet opened over another looks like going back · stacked sheet height · floor ·
+  //          why is the second sheet shorter · going deeper should not look like retreating
+  //
+  // A STACK MUST NEVER APPEAR TO MOVE BACKWARDS (founder, 2026-07-28).
+  //
+  // A sheet that opens SHORTER than the one beneath it reads as a retreat: the content area
+  // shrinks, the dim jumps, and the feeling is "something closed" rather than "I went deeper".
+  // So an opened sheet takes the height of the one below as a FLOOR.
+  //
+  // It does not make depth visible on its own — two `large` sheets are still the same height —
+  // and it is not meant to. Paired with the ceiling of two, it guarantees the only thing that
+  // matters at two levels: the movement always reads forward.
+  //
+  // `false` opts out, and ConfirmSheet does. A question that must be READ is served by being
+  // small and focused; stretching an alert to match whatever it was asked from would weaken the
+  // one surface whose whole job is to be taken seriously. Apple keeps alerts small regardless of
+  // context, for the same reason.
+  floorToParent?: boolean;
   // queries: should a sheet have a Done button · how do I close a full height sheet · sheet done ·
   //          the exit is not obvious · dismiss a large sheet
   //
@@ -79,7 +97,7 @@ interface Props {
   // hardcoded the English would be a component making its consumer's copy decisions.
   done?: string | false;
 }
-const { id, title, detent = "medium", done } = Astro.props;
+const { id, title, detent = "medium", done, 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));
 ---
@@ -89,7 +107,7 @@ const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done"
     exposes. A surface that translates at RUNTIME (the vault, the feed — one bundle, thirteen
     languages, no per-locale routes) renders this cut in English and re-labels it from its own
     dictionary. Without the hook such a consumer cannot adopt the cut at all, and writes its own. */}
-<dialog class="sheet" id={id} data-detent={detent} aria-labelledby={title ? `${id}-title` : undefined} aria-label={title ? undefined : "Sheet"}>
+<dialog class="sheet" id={id} data-detent={detent} data-floor={floorToParent ? "" : undefined} aria-labelledby={title ? `${id}-title` : undefined} aria-label={title ? undefined : "Sheet"}>
   {/* tabindex="-1" so the PANEL can take the focus when the sheet opens. Without it, showModal()
       hands focus to the first focusable descendant — which for a picker is the search field, and on
       a phone that throws the software keyboard over the list the visitor opened the sheet to read.
@@ -111,6 +129,18 @@ const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done"
 </dialog>
 <style>
+  /* queries: the page scrolls behind an open sheet · background scroll lock · the sheet feels
+     inactive · scroll behind the dialog
+     THE PAGE BEHIND MUST NOT MOVE. `showModal()` makes the rest of the document INERT — it cannot
+     be clicked or focused — but it does not stop it SCROLLING, and a person swiping over the dim
+     watches the page slide under a sheet they thought they were using. The founder named the
+     feeling exactly: "aktif sheet sanki aktif degilmis hissi veriyor". Measured before fixing:
+     scrollY went 2244 → 1644 with a sheet open.
+     Set by script on <html> and reference-counted, because sheets nest: unlocking on the first
+     close would free the page while a second sheet is still up. */
+  :global(html[data-sheet-locked]) { overflow: hidden; }
   /* Trailing and level with the title, where a navigation bar's right-hand action lives — the one
      place a thumb looks for "I am finished here". */
   .sheet-done {
@@ -227,6 +257,18 @@ const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done"
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
+    /* queries: the sheet scrolls sideways · horizontal scroll in a sheet · long text pushes the
+       panel wider · content wider than the sheet
+       NOTHING SCROLLS SIDEWAYS. A sheet is a column with a known width, and a person dragging it
+       left to read the end of a mime type has been handed a defect rather than a feature —
+       measured at 867px of content in a 390px panel, from one unbroken string.
+       Two halves, and both are needed: `overflow-x` stops the panel itself from becoming a
+       horizontal scroller, and `overflow-wrap` makes a long unbroken token WRAP instead of being
+       silently clipped by it. Content that is genuinely wide — a table, a code block — carries its
+       own scroller; the sheet never becomes one. */
+    overflow-x: hidden;
+    overflow-wrap: anywhere;
     /* A scroll that reaches its end must not become the page's scroll behind the sheet. */
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
@@ -260,9 +302,55 @@ const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done"
     const FLICK = 0.55;        // px/ms — a fast flick dismisses regardless of distance
     const wired = new WeakSet<HTMLDialogElement>();
+    // queries: background scroll lock · html data-sheet-locked · nested sheets unlock too early ·
+    //          how does the sheet know it opened
+    //
+    // COUNTED, NOT TOGGLED. Sheets nest — qr's share sheet opens the file door on top of itself —
+    // so unlocking on the first `close` would free the page while a second sheet is still up. The
+    // count goes 0→1 to lock and 1→0 to unlock, and nothing in between touches it.
+    //
+    // WATCHED WITH A MutationObserver, because `<dialog>` has no "opened" event and consumers call
+    // `showModal()` themselves (qr does, from its own script). Hooking only the delegated opener
+    // would lock for sheets opened one way and not the other — which is worse than not locking at
+    // all, because it would work in testing and fail in the persona.
+    const locked = new WeakSet<HTMLDialogElement>();
+    let openCount = 0;
+    const relock = (delta: number) => {
+      openCount = Math.max(0, openCount + delta);
+      if (openCount > 0) document.documentElement.setAttribute("data-sheet-locked", "");
+      else document.documentElement.removeAttribute("data-sheet-locked");
+    };
+    // Measure the tallest sheet ALREADY open and use it as this one's floor. Measured rather than
+    // derived from the detent, because a `medium` sheet whose content is short is shorter than its
+    // detent allows — the floor has to be what is actually on the screen, not what was permitted.
+    function floorOnto(sheet: HTMLDialogElement) {
+      if (!sheet.hasAttribute("data-floor")) return;
+      const panel = sheet.querySelector<HTMLElement>("[data-panel]");
+      if (!panel) return;
+      let floor = 0;
+      for (const other of document.querySelectorAll<HTMLDialogElement>("dialog.sheet[open]")) {
+        if (other === sheet) continue;
+        const p = other.querySelector<HTMLElement>("[data-panel]");
+        if (p) floor = Math.max(floor, p.getBoundingClientRect().height);
+      }
+      // Never taller than the screen, and never a floor of zero — this is the first sheet then.
+      if (floor > 0) panel.style.minHeight = Math.min(floor, window.innerHeight) + "px";
+      else panel.style.removeProperty("min-height");
+    }
     function wire(sheet: HTMLDialogElement) {
       if (wired.has(sheet) || !sheet.showModal) return;
       wired.add(sheet);
+      let wasOpen = sheet.open;
+      if (wasOpen) relock(1);
+      new MutationObserver(() => {
+        if (sheet.open === wasOpen) return;
+        wasOpen = sheet.open;
+        relock(wasOpen ? 1 : -1);
+        if (wasOpen) floorOnto(sheet);
+        else sheet.querySelector<HTMLElement>("[data-panel]")?.style.removeProperty("min-height");
+      }).observe(sheet, { attributes: true, attributeFilter: ["open"] });
       const panel = sheet.querySelector<HTMLElement>("[data-panel]");
       const grip = sheet.querySelector<HTMLElement>("[data-grip]");
       if (!panel) return;
@@ -310,7 +398,28 @@ const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done"
     // because its sheet opens when a persona ASKS for a file rather than when a person presses a
     // button. A sheet opened that way had no backdrop-dismiss and no drag: two of the three ways out
     // of it, missing, with nothing to indicate it. The laziness saved nothing worth that.
-    const wireAll = () => document.querySelectorAll<HTMLDialogElement>("dialog.sheet").forEach(wire);
+    // queries: does the confirm dialog lock the page too · scroll behind ConfirmSheet
+    //
+    // ConfirmSheet is its own `<dialog class="confirm">` rather than a `<Sheet>` — deliberately, it
+    // is an alert and not a surface. But the page scrolling behind it is the same defect on the
+    // same person's thumb, so the LOCK covers it while the floor and the drag do not. A rule about
+    // how a modal feels belongs to every modal, not to one component.
+    function lockOnly(d: HTMLDialogElement) {
+      if (locked.has(d)) return;
+      locked.add(d);
+      let was = d.open;
+      if (was) relock(1);
+      new MutationObserver(() => {
+        if (d.open === was) return;
+        was = d.open;
+        relock(was ? 1 : -1);
+      }).observe(d, { attributes: true, attributeFilter: ["open"] });
+    }
+    const wireAll = () => {
+      document.querySelectorAll<HTMLDialogElement>("dialog.sheet").forEach(wire);
+      document.querySelectorAll<HTMLDialogElement>("dialog.confirm").forEach(lockOnly);
+    };
     if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", wireAll);
     else wireAll();