@justai/cuts 0.28.1 → 0.30.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justai/cuts",
-  "version": "0.28.1",
-  "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
+  "version": "0.30.0",
+  "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -20,10 +20,11 @@
     "./Toolbar.astro": "./src/Toolbar.astro",
     "./Profile.astro": "./src/Profile.astro",
     "./ConfirmSheet.astro": "./src/ConfirmSheet.astro",
+    "./Sheet.astro": "./src/Sheet.astro",
     "./ground.css": "./src/ground.css"
   },
   "peerDependencies": {
-    "@justai/ui": ">=0.2.0",
+    "@justai/ui": ">=0.3.0",
     "astro": ">=5"
   },
   "publishConfig": {

package/src/ConfirmSheet.astro

@@ -136,7 +136,7 @@ const { id, title, body, actionLabel, cancelLabel, destructive = false, ask = fa
      whisper of its own colour instead (currentColor: accent, red, or text alike) */
   .confirm-act:focus-visible { box-shadow: none; outline: none; background: color-mix(in srgb, currentColor 12%, transparent); }
   /* iOS system red — the one colour that means "this ends something" on every persona alike */
-  .confirm-act.destructive { color: #ff453a; }
+  .confirm-act.destructive { color: var(--danger); }
   /* the ASK genre: the invitation is the preferred path (Apple's bold preferredAction)… */
   .confirm-act.preferred { font-weight: 700; }
   /* …and the safe choice answers in a calm, full-contrast regular voice — equal size, equal tap,

package/src/LangPicker.astro

@@ -1,7 +1,7 @@
 ---
 // The language picker — the shared app.zone chrome, extracted from the eleven byte-identical copies
-// (they differed only in comments). The markup, the style and the dropdown behaviour are the SAME for
-// every persona; only the DATA differs, so the data is passed in, never imported.
+// (they differed only in comments). The markup, the style and the presentation are the SAME for every
+// persona; only the DATA differs, so the data is passed in, never imported.
 //
 // It deliberately does NOT own the locale list. @justai/ui/locale is explicit that the list belongs to
 // the consuming repo's src/i18n — this ecosystem has been bitten twice by a second copy of it — so the
@@ -9,6 +9,17 @@
 // component holds the shape; the persona holds the list. It localize-routes to /xx/ (localePath),
 // remembers the choice in localStorage (the @justai/cuts head router reads it to auto-route next
 // visit), and preserves the section hash (Profile/Kernel/Posts) across the switch.
+//
+// 2026-07-26 — WHY THIS IS A SHEET AND NO LONGER A DROPDOWN. It used to be a panel absolutely
+// positioned under its button: a desktop metaphor, in an ecosystem whose personas are born
+// mobile/app-souled. Thirteen rows with a search field is not a menu, it is a list you choose from,
+// and iOS presents that from the bottom edge — grabber, drag-to-dismiss. <Sheet> owns all of that at
+// EVERY screen width (there is no wide-screen variant, deliberately — see its header); this file is
+// back to being only what it always claimed to be: the persona's list, in the ecosystem's shape.
+import Sheet from "./Sheet.astro";
+// The persona owns the LIST; the framework owns the ORDER. See @justai/ui/locale — one sequence
+// across the fleet, so a language sits in the same place on every persona a visitor meets.
+import { orderLocales } from "@justai/ui/locale";
 interface Props {
   current: string;
   locales: readonly string[];
@@ -18,22 +29,30 @@ interface Props {
   searchLabel: string; // the persona's t.chromeLangSearch
 }
 const { current, locales, localeNames, localePath, label, searchLabel } = Astro.props;
+const ordered = orderLocales(locales);
 ---
 
 <div class="picker" data-picker>
-  <button class="trigger" type="button" aria-haspopup="listbox" aria-expanded="false" data-trigger aria-label={`${label}: ${current.toUpperCase()}`} title={label}>{current.toUpperCase()}</button>
+  {/* `data-sheet-open` is the whole wiring — <Sheet> finds the trigger; no script here opens it. */}
+  <button
+    class="trigger"
+    type="button"
+    data-sheet-open="lang-sheet"
+    data-trigger
+    aria-haspopup="dialog"
+    aria-expanded="false"
+    aria-label={`${label}: ${current.toUpperCase()}`}
+    title={label}>{current.toUpperCase()}</button>
 
-  <div class="menu" role="listbox" data-menu hidden>
+  <Sheet id="lang-sheet" title={label} detent="large">
     {/* `name` and not `id`: a form field with neither makes the browser complain that it cannot
         autofill (Chrome's Issues panel flags it on every page of the fleet, since this cut is on
         every page). `name` answers it without the one risk an `id` would carry — an id must be
-        unique in a document, so a persona that ever renders two pickers would ship invalid HTML,
-        and a shared cut must be safe to place twice. Prefixed `lang-` so it cannot collide with a
-        persona's own field of the same idea. The value is never submitted: this input lives in no
-        form and filters the list client-side. */}
+        unique in a document. The value is never submitted: this input lives in no form and filters
+        the list client-side. */}
     <input type="search" class="search" name="lang-search" placeholder={searchLabel} autocomplete="off" spellcheck="false" data-search aria-label={searchLabel} />
-    <div class="list" data-list>
-      {locales.map((l) => (
+    <div class="list" role="listbox" aria-label={label} data-list>
+      {ordered.map((l) => (
         <a
           href={localePath(l)}
           role="option"
@@ -50,11 +69,15 @@ const { current, locales, localeNames, localePath, label, searchLabel } = Astro.
         </a>
       ))}
     </div>
-  </div>
+  </Sheet>
 </div>
 
 <style>
-  .picker { position: relative; }
+  /* No `position: relative` any more, and that absence is the point: nothing here is positioned
+     against the trigger. <Sheet> presents in the top layer, so the picker can no longer be clipped
+     by an overflow on the toolbar the way an absolutely-positioned dropdown could be. */
+  .picker { display: contents; }
+
   /* most minimalist: just the 2-letter code, flush to the right edge */
   .trigger {
     display: inline-grid; place-items: center; min-width: 36px; height: 36px;
@@ -66,47 +89,43 @@ const { current, locales, localeNames, localePath, label, searchLabel } = Astro.
   .trigger:hover { color: var(--text); }
   .trigger:active { transform: scale(0.9); }
 
-  .menu {
-    position: absolute;
-    inset-block-start: calc(100% + 8px);
-    inset-inline-end: 0;
-    width: 230px;
-    /* Near-opaque: the toolbar's own backdrop-filter breaks this menu's, so don't rely on it
-       for legibility — the blur is a bonus when it works, the solid fill is the guarantee. */
-    background: color-mix(in srgb, var(--bg) 97%, transparent);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(40px) saturate(1.6);
-    -webkit-backdrop-filter: blur(40px) saturate(1.6);
-    padding: 8px;
-    z-index: 200;
-    animation: pop 0.2s var(--ease-out) both;
-  }
-  @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
-
+  /* iOS's search field: a filled pill rather than an outlined box, sitting above the list. */
   .search {
-    width: 100%; font: inherit; font-size: var(--fs-base); color: var(--text);
-    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
-    padding: 9px 12px; outline: none; margin-block-end: 6px;
+    width: 100%;
+    font: inherit; font-size: var(--fs-base); color: var(--text);
+    background: color-mix(in srgb, var(--text) 7%, transparent);
+    border: 1px solid transparent; border-radius: 10px;
+    padding: 10px 12px; outline: none;
+    margin: 0 0 6px;
   }
-  .list { max-height: min(54vh, 360px); overflow-y: auto; scrollbar-width: thin; }
+  .search::placeholder { color: var(--text-dim); }
+  .search:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
+
+  .list { padding-block-end: 2px; }
   .item {
-    display: flex; align-items: center; justify-content: space-between;
+    display: flex; align-items: center; justify-content: space-between; gap: 12px;
+    /* 44px — the platform's touch target. The old 9px padding made a mouse's row, and row height is
+       the clearest single tell of a web dropdown wearing an app's clothes. */
+    min-height: 44px;
+    padding: 0 12px; border-radius: 10px;
     text-decoration: none; color: var(--text); font-size: var(--fs-sm);
-    padding: 9px 12px; border-radius: var(--radius-sm);
-    transition: background 0.15s;
+    transition: background 0.12s var(--ease-out);
   }
-  .item:hover { background: var(--surface-2); }
+  /* :active before :hover — a finger never hovers, and the feedback must not be desktop-only. */
+  .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; }
-  .item svg { width: 16px; height: 16px; flex: none; }
+  .item svg { width: 17px; height: 17px; flex: none; }
 </style>
 
 <script>
+  // What is left here is only what the LIST does: filter, and remember the choice. Opening,
+  // dismissing and dragging all belong to <Sheet>.
   const picker = document.querySelector<HTMLElement>("[data-picker]");
   if (picker) {
     const trigger = picker.querySelector<HTMLButtonElement>("[data-trigger]")!;
-    const menu = picker.querySelector<HTMLElement>("[data-menu]")!;
+    const sheet = document.getElementById("lang-sheet") as HTMLDialogElement | null;
     const search = picker.querySelector<HTMLInputElement>("[data-search]")!;
     const items = Array.from(picker.querySelectorAll<HTMLAnchorElement>(".item"));
 
@@ -116,26 +135,21 @@ const { current, locales, localeNames, localePath, label, searchLabel } = Astro.
         it.style.display = (it.dataset.name ?? "").includes(q) ? "" : "none";
       }
     }
-    function open() {
-      menu.hidden = false;
+    search.addEventListener("input", filter);
+
+    trigger.addEventListener("click", () => {
       trigger.setAttribute("aria-expanded", "true");
       search.value = "";
       filter();
-      setTimeout(() => search.focus(), 0);
-    }
-    function close() {
-      menu.hidden = true;
-      trigger.setAttribute("aria-expanded", "false");
-    }
-
-    trigger.addEventListener("click", () => (menu.hidden ? open() : close()));
-    document.addEventListener("click", (e) => {
-      if (!picker.contains(e.target as Node)) close();
+      // Focus the search ONLY where a hardware keyboard is already present. On a touch device,
+      // focusing would throw the software keyboard over the list you opened the sheet to read — iOS
+      // shows the list first and lets you reach for search. This is NOT a desktop/mobile branch of
+      // the EXPERIENCE (the sheet is identical everywhere); it is a fact about input hardware, which
+      // is why it asks about the pointer rather than about the viewport.
+      if (matchMedia("(pointer: fine)").matches) setTimeout(() => search.focus(), 60);
     });
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") close();
-    });
-    search.addEventListener("input", filter);
+    sheet?.addEventListener("close", () => trigger.setAttribute("aria-expanded", "false"));
+
     // Remember the chosen language for auto-routing on the next visit.
     for (const it of items) {
       it.addEventListener("click", (e) => {

package/src/Sheet.astro

@@ -0,0 +1,275 @@
+---
+// THE GROUND rides with the sheet. Without this line every token below resolves to nothing on a
+// page that defines none, `color-mix(in srgb, var(--bg) 93%, transparent)` becomes an invalid
+// declaration, and the panel presents as a transparent hole with unstyled text — which is exactly
+// what the harness caught on the bare page the first time this file was written. Law 1 is not a
+// promise a component makes, it is a file it imports.
+import "./ground.css";
+/**
+ * <Sheet> — the ecosystem's SHEET, in iOS grammar.
+ *
+ * WHY THIS EXISTS (founder, 2026-07-26): justai carries an Apple iOS app experience to the web. A
+ * persona is born mobile/app-souled and desktop is the EXTENSION — so the question here is never
+ * "is it mobile compatible", it is "does it have desktop compatibility". A panel absolutely
+ * positioned under its button is a DESKTOP metaphor: it is what the language picker and the profile
+ * menu both were, and on a phone it reads as a website, not an app.
+ *
+ * WHAT APPLE DOES: a sheet is what a screen presents ON TOP of itself — a list to choose from, a
+ * short set of actions, a form. It arrives from the bottom edge with a grabber you can pull. An
+ * anchored menu was tried alongside this for one day and removed; see the catalogue in
+ * .justai/expert/the-components-the-framework-offers.md for why the ecosystem has ONE shape here.
+ *
+ * ── ONE BEHAVIOUR AT EVERY WIDTH ─────────────────────────────────────────────────────────────
+ *
+ * The first version of this file carried a `@media (min-width: 768px)` branch that turned the sheet
+ * into a panel anchored to its control, on the reasoning that UIKit adapts a sheet into a popover on
+ * regular width. The founder rejected it on sight, and he was right — it contradicted the very
+ * thesis written six lines above:
+ *
+ *     "neden desktop da tavrini degistiriyorsun. Mobile neyse desktop tavri da ayni olacak? …
+ *      default behaviour mobile. yani ekran cozunurlugu yuksek olsa bile ux deneyimi mobile."
+ *
+ * "Desktop is the EXTENSION" cannot mean "desktop gets a different component". A visitor on a large
+ * screen is not a different visitor. So there is NO width branch here, and there must not be one
+ * added: the sheet rises from the bottom edge at 390px and at 3840px alike.
+ *
+ * What a wide screen changes is only how much room surrounds it. **The persona's COLUMN is the
+ * active view** — that is the founder's frame, and it is what the panel is sized to: 480px, which is
+ * not a chosen number but the fleet's measured one (every persona's page column is `max-width:
+ * 480px`). On a phone `min(100%, 480px)` is the whole screen; on a desk it is the persona's own
+ * width, centred, with the page dimmed around it. One rule, both cases, no query.
+ *
+ * NATIVE <dialog>, not a scrim div: the top layer, ::backdrop, Escape and focus containment are the
+ * platform's already, and the fleet's ConfirmSheet set that precedent.
+ *
+ * NO HOMEWORK (law 1): any element carrying `data-sheet-open="<id>"` opens this sheet — the consumer
+ * writes no JavaScript, and every token this file consumes is grounded in ground.css.
+ *
+ * WHAT IT DELIBERATELY DOES NOT DO: iOS scales the presenting screen back behind a sheet. On the web
+ * that means transforming the page under a position:fixed toolbar, which breaks the toolbar's
+ * containing block. The dim and the blur carry the depth instead; the scale-back is skipped
+ * knowingly rather than approximated badly.
+ */
+interface Props {
+  /** DOM id — the handle `data-sheet-open` points at. */
+  id: string;
+  /** 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. */
+  detent?: "medium" | "large";
+}
+const { id, title, detent = "medium" } = Astro.props;
+---
+
+<dialog class="sheet" id={id} data-detent={detent} aria-label={title}>
+  {/* 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.
+      The dialog still owns the focus (Escape, containment, screen-reader context all intact); it
+      simply starts on the sheet rather than inside a control the visitor did not reach for. */}
+  <div class="sheet-panel" data-panel tabindex="-1">
+    {/* The grabber is the affordance AND the drag handle — iOS puts them in the same 44pt band, so
+        the thing you see is the thing you can grab. Hidden from AX: Escape and the backdrop are the
+        keyboard/assistive paths, and a decorative pill announced as a control is noise. */}
+    <div class="sheet-grip" data-grip aria-hidden="true"><span></span></div>
+    {title && <h2 class="sheet-title">{title}</h2>}
+    <div class="sheet-body"><slot /></div>
+  </div>
+</dialog>
+
+<style>
+  .sheet {
+    /* The dialog is the full-screen STAGE; the PANEL is the sheet.
+       `position: fixed` is written out rather than inherited: the UA gives a dialog
+       `position: absolute`, and an absolutely-positioned top-layer element resolves against the
+       initial containing block — which is document-relative, so on a scrolled page the sheet would
+       be placed at coordinates the visitor is no longer looking at. */
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    overflow: visible;
+    /* The stage seats the panel on the BOTTOM edge, centred. It has to be written as a
+       display:none/display:flex pair, because a `display` of our own on a <dialog> would defeat the
+       UA rule that hides it while closed — a sheet permanently visible on every page. */
+    display: none;
+  }
+  .sheet[open] {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  /* Entry motion is written with @starting-style, not with an [open] toggle. A dialog enters from
+     display:none, and a property that had no previous computed value does not transition — the
+     "from" state has to be declared, or the sheet simply appears where it belongs with no travel at
+     all. That silent no-op is the class of failure the harness exists to catch. */
+  .sheet::backdrop {
+    background: rgba(0, 0, 0, 0.4);
+    -webkit-backdrop-filter: blur(3px);
+    backdrop-filter: blur(3px);
+    opacity: 1;
+    transition: opacity 0.3s var(--ease-out);
+  }
+  @starting-style {
+    .sheet[open]::backdrop { opacity: 0; }
+  }
+
+  .sheet-panel {
+    display: flex;
+    flex-direction: column;
+    /* THE ONE SIZING RULE, and there is no media query anywhere in this file. The persona's column
+       is the active view: 480px is the fleet's measured page width, not a chosen breakpoint. On a
+       phone this is the whole screen; on a desk it is the persona's own width, centred. */
+    width: min(100%, var(--sheet-width, 480px));
+    max-height: min(92dvh, 100dvh - 24px);
+    /* The material the fleet already agreed reads as legible glass (ConfirmSheet, 93%). */
+    background: color-mix(in srgb, var(--bg) 93%, transparent);
+    -webkit-backdrop-filter: blur(30px) saturate(1.5);
+    backdrop-filter: blur(30px) saturate(1.5);
+    border-top: 1px solid var(--border);
+    border-radius: 20px 20px 0 0;
+    /* Sliding UP with an overshoot spring would bounce the panel past the screen edge and back —
+       iOS decelerates into place instead — an overshoot spring belongs to something that scales,
+       not to something that travels to an edge. */
+    transform: translateY(0);
+    transition: transform 0.34s var(--ease-out);
+    will-change: transform;
+  }
+  @starting-style {
+    .sheet[open] .sheet-panel { transform: translateY(100%); }
+  }
+  /* The panel takes focus programmatically, so it must not wear a focus ring — it is a surface, not
+     a control. Focus a visitor MOVES lands on the rows, which do show one. */
+  .sheet-panel:focus { outline: none; }
+  /* While a finger is on it, the panel follows the finger with no transition — a 0.34s ease between
+     every pointermove is what makes a web sheet feel like a web page. */
+  .sheet[data-dragging] .sheet-panel { transition: none; }
+
+  .sheet-grip {
+    flex: none;
+    display: grid;
+    place-items: center;
+    height: 28px;
+    cursor: grab;
+    touch-action: none; /* the browser must not claim the vertical gesture we are reading */
+  }
+  .sheet-grip span {
+    width: 36px;
+    height: 5px;
+    border-radius: 2.5px;
+    background: color-mix(in srgb, var(--text) 22%, transparent);
+  }
+  .sheet:not([data-dragging]) .sheet-grip:active { cursor: grabbing; }
+
+  .sheet-title {
+    flex: none;
+    margin: 0;
+    padding: 2px 20px 10px;
+    font-size: var(--fs-md);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--text);
+    text-align: center;
+  }
+
+  .sheet-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    /* A scroll that reaches its end must not become the page's scroll behind the sheet. */
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    /* The top padding is not spacing, it is CLEARANCE. This is a scroll container, so it clips at
+       its own edge — and a focused first child draws its ring OUTSIDE its border box, which lands
+       exactly on that edge and gets cut. The founder saw it on the picker's search field: the ring
+       reads as sliced along the top. 6px is a focus ring's width plus its offset, which is the only
+       number that makes the clipping impossible rather than unlikely. */
+    padding: 6px 12px max(14px, env(safe-area-inset-bottom));
+  }
+
+  /* The medium detent — half height, promoted to large by a pull upwards. It applies at EVERY width
+     now, because the gesture that changes it does too: the grabber is never hidden. */
+  .sheet[data-detent="medium"]:not([data-expanded]) .sheet-panel { max-height: min(56dvh, 100dvh - 24px); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sheet-panel, .sheet::backdrop { transition: none; }
+    .sheet-panel { transform: none; opacity: 1; }
+  }
+</style>
+
+<script>
+  // 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.
+  //
+  // Note what is NOT here any more: a matchMedia guard. The drag worked only below 768px while this
+  // 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 () {
+    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>();
+
+    function wire(sheet: HTMLDialogElement) {
+      if (wired.has(sheet) || !sheet.showModal) return;
+      wired.add(sheet);
+      const panel = sheet.querySelector<HTMLElement>("[data-panel]");
+      const grip = sheet.querySelector<HTMLElement>("[data-grip]");
+      if (!panel) return;
+
+      // A tap on the stage (outside the panel) dismisses — the one behaviour <dialog> lacks.
+      sheet.addEventListener("click", (e) => { if (e.target === sheet) sheet.close(); });
+      sheet.addEventListener("close", () => {
+        sheet.removeAttribute("data-expanded");
+        panel.style.transform = "";
+      });
+
+      // ── drag: the grabber follows the pointer, and the release decides ──
+      let id: number | null = null, y0 = 0, t0 = 0, dy = 0;
+      grip?.addEventListener("pointerdown", (e: PointerEvent) => {
+        id = e.pointerId; y0 = e.clientY; t0 = e.timeStamp; dy = 0;
+        grip.setPointerCapture(id);
+        sheet.setAttribute("data-dragging", "");
+      });
+      grip?.addEventListener("pointermove", (e: PointerEvent) => {
+        if (id !== e.pointerId) return;
+        dy = e.clientY - y0;
+        // Downward drag travels 1:1. Upward is RUBBER-BANDED rather than free: pulling up past the
+        // detent must feel like resistance, not like a second scroll surface.
+        panel.style.transform = dy > 0 ? `translateY(${dy}px)` : `translateY(${dy / 4}px)`;
+      });
+      const release = (e: PointerEvent) => {
+        if (id !== e.pointerId) return;
+        const dt = Math.max(1, e.timeStamp - t0);
+        const v = dy / dt;
+        sheet.removeAttribute("data-dragging");
+        panel.style.transform = "";
+        id = null;
+        if (dy > panel.offsetHeight * DRAG_CLOSE || v > FLICK) sheet.close();
+        // A decisive pull upwards promotes the medium detent to large — iOS's two-detent sheet.
+        else if (dy < -40) sheet.setAttribute("data-expanded", "");
+      };
+      grip?.addEventListener("pointerup", release);
+      grip?.addEventListener("pointercancel", release);
+    }
+
+    document.addEventListener("click", (e) => {
+      const t = (e.target as HTMLElement)?.closest?.("[data-sheet-open]");
+      if (!t) return;
+      const sheet = document.getElementById(t.getAttribute("data-sheet-open") || "") as HTMLDialogElement | null;
+      if (!sheet) return;
+      e.preventDefault();
+      wire(sheet);
+      if (!sheet.open) sheet.showModal();
+      // Land the focus on the PANEL, not on whatever control happens to be first inside it — the
+      // keyboard-over-the-list failure described on the tabindex attribute above.
+      sheet.querySelector<HTMLElement>("[data-panel]")?.focus({ preventScroll: true });
+    });
+  })();
+</script>

package/src/ground.css

@@ -21,8 +21,10 @@
  * (the same values feed's public-persona.css carries). Change ui's tokens and this file must
  * follow — the harness pins the skeleton halves equal.
  *
- * Imported by Base.astro AND ConfirmSheet.astro (the one cut consumed standalone), so the ground
- * travels with whichever of the two reaches a page first; the bundler dedupes when both do.
+ * Imported by Base.astro and by every cut a persona can mount WITHOUT the shell — ConfirmSheet,
+ * Sheet, Menu. The ground travels with whichever of them reaches a page first; the bundler dedupes
+ * when several do. A new standalone-capable cut must add the import as its first line: the harness
+ * checks the tokens statically, but only a bare-page render proves it.
  */
 
 :where(:root) {
@@ -52,6 +54,12 @@
   --surface: rgba(255, 255, 255, 0.04);
   --surface-2: rgba(255, 255, 255, 0.07);
   --accent: #0a84ff;
+  /* THE ecosystem's destructive red — Apple's system red, and one of it. Written here rather than
+     in each component because a confirmation sheet and a Sign Out row saying "this ends something"
+     in two different reds is exactly the drift the ConfirmSheet's own header warns about. It is
+     scheme-aware: Apple lightens red on dark backgrounds (#FF453A) and deepens it on light
+     (#FF3B30), and a single value would read wrong on one of them. */
+  --danger: #ff453a;
 }
 
 @media (prefers-color-scheme: light) {
@@ -62,6 +70,7 @@
     --border: rgba(0, 0, 0, 0.08);
     --surface: rgba(255, 255, 255, 0.7);
     --surface-2: rgba(0, 0, 0, 0.05);
+    --danger: #ff3b30;
   }
 }