@justai/cuts 0.28.1 → 0.29.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.29.0",
+  "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -20,6 +20,8 @@
     "./Toolbar.astro": "./src/Toolbar.astro",
     "./Profile.astro": "./src/Profile.astro",
     "./ConfirmSheet.astro": "./src/ConfirmSheet.astro",
+    "./Sheet.astro": "./src/Sheet.astro",
+    "./Menu.astro": "./src/Menu.astro",
     "./ground.css": "./src/ground.css"
   },
   "peerDependencies": {

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,14 @@
 // 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, and on a wide screen the
+// same sheet adapts to a panel anchored to the button. <Sheet> owns all of that; 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";
 interface Props {
   current: string;
   locales: readonly string[];
@@ -21,18 +29,25 @@ const { current, locales, localeNames, localePath, label, searchLabel } = Astro.
 ---
 
 <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" anchor="[data-trigger]">
     {/* `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>
+    <div class="list" role="listbox" aria-label={label} data-list>
       {locales.map((l) => (
         <a
           href={localePath(l)}
@@ -50,11 +65,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 +85,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, dragging and the wide-screen adaptation 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 +131,19 @@ 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 keyboard is already present. On a phone, 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. The same restraint, expressed as a pointer query.
+      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/Menu.astro

@@ -0,0 +1,216 @@
+---
+// THE GROUND rides with the menu — see <Sheet> for the failure this line prevents. Law 1 is not a
+// promise a component makes, it is a file it imports.
+import "./ground.css";
+/**
+ * <Menu> — the ecosystem's ACTION MENU, in iOS grammar.
+ *
+ * THE LINE BETWEEN THIS AND <Sheet>, which is Apple's line and not ours: a short list of ACTIONS is a
+ * menu, anchored to the control that opened it — that is what iOS shows when you tap an avatar or a
+ * toolbar button. A list you CHOOSE from, long enough to scroll or carrying a search field, is a
+ * sheet from the bottom edge. Account actions are the first thing; thirteen languages are the second.
+ *
+ * A DESKTOP DROPDOWN IS NOT AN iOS MENU, and the difference is not the position — both are anchored.
+ * It is everything else, and each line below is one of them:
+ *   • it SPRINGS FROM THE CONTROL. transform-origin is set to the corner the menu grew out of, so the
+ *     thing that opened it is visibly where it came from. A dropdown fades in place.
+ *   • the screen behind it DIMS. A menu is modal on iOS; a dropdown is a layer.
+ *   • rows are 44px. That is the platform's touch minimum, and it is why an iOS menu reads roomy
+ *     next to a web dropdown built for a mouse.
+ *   • the icon sits AFTER the label. iOS menus are trailing-icon; web menus are leading-icon. This is
+ *     the single most recognisable tell of the two grammars.
+ *   • hover is a bonus, never the affordance — :active carries the feedback so a finger gets the same
+ *     answer as a cursor.
+ *
+ * THE PLATFORM PRIMITIVE IS `popover`, not <dialog>: a menu must light-dismiss and must NOT trap
+ * focus (a modal dialog would fight the page behind it, and Apple's menus do not trap either). The
+ * top layer, Escape, and dismiss-on-outside-click all come free and correct.
+ *
+ * NO HOMEWORK (law 1): `data-menu-open="<id>"` on any control opens it, positioning included; every
+ * token consumed is grounded in ground.css.
+ */
+interface Props {
+  /** DOM id — the handle `data-menu-open` points at. */
+  id: string;
+  /** Accessible name for the menu itself, e.g. "Account". */
+  label?: string;
+}
+const { id, label } = Astro.props;
+---
+
+<div class="menu" id={id} popover="auto" role="menu" aria-label={label} data-menu>
+  <slot />
+</div>
+
+<style is:global>
+  /* GLOBAL, not scoped, and deliberately: a menu's rows are almost always written by the CONSUMER
+     (the persona knows what its actions are; the framework knows what a menu looks like). Scoped
+     styles would reach the panel and miss every row inside it — the same class of failure as a cut
+     that keeps its selectors but loses the ground it fed on. The class names are prefixed so this
+     can never be mistaken for a page's own vocabulary. */
+
+  .menu[popover] {
+    position: fixed;
+    inset: auto;
+    top: var(--menu-top, 50%);
+    left: var(--menu-left, 50%);
+    margin: 0;
+    padding: 6px;
+    width: max-content;
+    min-width: 232px;
+    max-width: min(300px, calc(100vw - 24px));
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: color-mix(in srgb, var(--bg) 93%, transparent);
+    -webkit-backdrop-filter: blur(30px) saturate(1.5);
+    backdrop-filter: blur(30px) saturate(1.5);
+    box-shadow: 0 22px 60px -18px rgba(0, 0, 0, 0.5);
+    color: var(--text);
+    font-family: var(--font);
+    overflow: visible;
+    /* It grows OUT OF the control: the script writes the origin to the corner it was summoned from. */
+    transform-origin: var(--menu-origin, top right);
+    transform: scale(0.92);
+    opacity: 0;
+    transition: transform 0.22s var(--ease-spring), opacity 0.16s var(--ease-out), overlay 0.22s allow-discrete, display 0.22s allow-discrete;
+  }
+  .menu[popover]:popover-open { transform: scale(1); opacity: 1; }
+  @starting-style {
+    .menu[popover]:popover-open { transform: scale(0.92); opacity: 0; }
+  }
+  .menu[popover]::backdrop {
+    background: rgba(0, 0, 0, 0.28);
+    opacity: 0;
+    transition: opacity 0.22s var(--ease-out), overlay 0.22s allow-discrete, display 0.22s allow-discrete;
+  }
+  .menu[popover]:popover-open::backdrop { opacity: 1; }
+  @starting-style {
+    .menu[popover]:popover-open::backdrop { opacity: 0; }
+  }
+
+  /* ── a row ── */
+  .menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    width: 100%;
+    min-height: 44px; /* the platform's touch target, and the reason this reads as an app */
+    padding: 0 12px;
+    border: 0;
+    border-radius: 10px;
+    background: none;
+    color: inherit;
+    font: 600 var(--fs-sm) / 1.3 var(--font);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.12s var(--ease-out);
+  }
+  /* :active first — a finger never hovers, and the feedback must not be a desktop-only privilege. */
+  .menu-item:active { background: color-mix(in srgb, var(--text) 12%, transparent); }
+  @media (hover: hover) {
+    .menu-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
+  }
+  .menu-item:focus-visible {
+    outline: none;
+    background: color-mix(in srgb, var(--accent) 16%, transparent);
+  }
+  /* The icon FOLLOWS the label — the iOS tell. */
+  .menu-item svg { flex: none; width: 17px; height: 17px; color: var(--text-dim); }
+  .menu-item .menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  .menu-item.destructive { color: var(--danger); }
+  .menu-item.destructive svg { color: currentColor; }
+  .menu-item[aria-checked="true"] { color: var(--confirm-accent, var(--accent)); }
+  .menu-item[aria-checked="true"] svg { color: currentColor; }
+
+  /* A hairline between GROUPS — inset nowhere, because iOS separates menu sections edge to edge. */
+  .menu-sep { height: 1px; margin: 5px -6px; background: var(--border); }
+
+  /* An identity block at the head of a menu: avatar, name, secondary line. Not a row — it does
+     nothing when tapped, so it must not look tappable. */
+  .menu-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px 10px;
+  }
+  .menu-head .menu-name { font: 700 var(--fs-sm) / 1.25 var(--font); color: var(--text); }
+  .menu-head .menu-sub { font: 400 var(--fs-xs) / 1.3 var(--font); color: var(--text-dim); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .menu[popover], .menu[popover]::backdrop { transition: none; }
+    .menu[popover]:popover-open { transform: none; }
+  }
+</style>
+
+<script>
+  // Positioning and the trigger contract, once for every menu in the ecosystem.
+  (function () {
+    const GAP = 8;
+    const triggerOf = new WeakMap<HTMLElement, HTMLElement>();
+    const wired = new WeakSet<HTMLElement>();
+
+    // aria-expanded is mirrored from the popover's OWN toggle event, once per menu and permanently.
+    // The first version set it to "true" by hand on click and attached a {once: true} toggle listener
+    // for the close — which never fired: showPopover() QUEUES its toggle event, so the listener
+    // registered a line later was consumed by the OPENING toggle and removed before any close
+    // happened. The trigger then announced an expanded menu forever, to exactly the visitors who
+    // depend on that announcement. It passed on the desk and failed in CI, where one worker changed
+    // the timing — a scheduling race, not a slow machine.
+    function wire(menu: HTMLElement) {
+      if (wired.has(menu)) return;
+      wired.add(menu);
+      menu.addEventListener("toggle", (ev) => {
+        const t = triggerOf.get(menu);
+        if (t) t.setAttribute("aria-expanded", (ev as ToggleEvent).newState === "open" ? "true" : "false");
+      });
+    }
+
+    function place(menu: HTMLElement, trigger: HTMLElement) {
+      const r = trigger.getBoundingClientRect();
+      const w = menu.offsetWidth || 232;
+      const h = menu.offsetHeight || 200;
+      // Trailing-aligned by default (the control is usually at the end of a toolbar), then clamped
+      // into the viewport — a menu that runs off the screen edge is the desktop bug we are leaving.
+      let left = Math.min(Math.max(12, r.right - w), window.innerWidth - w - 12);
+      let top = r.bottom + GAP;
+      let originY = "top";
+      // Not enough room below → flip above, which is what iOS does rather than shrinking the menu.
+      if (top + h > window.innerHeight - 12 && r.top - GAP - h > 12) {
+        top = r.top - GAP - h;
+        originY = "bottom";
+      }
+      const originX = left + w / 2 > r.left + r.width / 2 ? "left" : "right";
+      menu.style.setProperty("--menu-top", `${Math.round(top)}px`);
+      menu.style.setProperty("--menu-left", `${Math.round(left)}px`);
+      menu.style.setProperty("--menu-origin", `${originY} ${originX}`);
+    }
+
+    document.addEventListener("click", (e) => {
+      const t = (e.target as HTMLElement)?.closest?.("[data-menu-open]") as HTMLElement | null;
+      if (!t) return;
+      const menu = document.getElementById(t.getAttribute("data-menu-open") || "");
+      if (!menu || !("showPopover" in menu)) return;
+      e.preventDefault();
+      wire(menu);
+      triggerOf.set(menu, t);
+      if (menu.matches(":popover-open")) { menu.hidePopover(); return; }
+      // Measure BEFORE showing: an unpositioned popover would paint at its fallback spot for one
+      // frame and then jump — the flash is small and it is exactly what makes a UI feel unfinished.
+      menu.style.visibility = "hidden";
+      menu.showPopover();
+      place(menu, t);
+      menu.style.visibility = "";
+    });
+
+    // Choosing an item closes the menu — every menu, without each consumer remembering to.
+    document.addEventListener("click", (e) => {
+      const item = (e.target as HTMLElement)?.closest?.(".menu-item") as HTMLElement | null;
+      if (!item) return;
+      const menu = item.closest<HTMLElement>("[data-menu]");
+      if (menu?.matches(":popover-open")) menu.hidePopover();
+    });
+  })();
+</script>

package/src/Sheet.astro

@@ -0,0 +1,319 @@
+---
+// 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, and the line this component draws with <Menu>: a short list of ACTIONS is a menu,
+ * anchored to its button. A LIST TO CHOOSE FROM — long enough to scroll, or carrying a search field —
+ * is a sheet, presented from the bottom edge with a grabber and drag-to-dismiss. Thirteen languages
+ * with a search box is the second thing, which is why the LangPicker is a Sheet and the account
+ * actions are a Menu.
+ *
+ * ADAPTIVE THE WAY UIKIT IS: a sheet on compact width becomes, on regular width, a panel anchored to
+ * the control that summoned it (UIKit turns a sheet into a popover exactly there). Same component,
+ * same markup, one media query — because "extended to desktop" is a presentation change, not a
+ * second component.
+ *
+ * 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";
+  /**
+   * Selector for the control this sheet belongs to. On regular width the panel anchors to it
+   * instead of centering — UIKit's sheet→popover adaptation. Omit to centre on large screens.
+   */
+  anchor?: string;
+}
+const { id, title, detent = "medium", anchor } = Astro.props;
+---
+
+<dialog class="sheet" id={id} data-detent={detent} data-anchor={anchor} 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 regular-width
+       branch below would place the panel at coordinates the visitor is no longer looking at. Fixed
+       makes both branches mean the same thing by the viewport. */
+    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 is a flex box that seats the panel on the BOTTOM edge. 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;
+    /* Edge to edge on a phone. The stage is a flex box, so without this the panel would shrink to
+       its content and present as a floating card — which is a modal, not a sheet. The regular-width
+       branch is where it becomes a card, deliberately. */
+    width: 100%;
+    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. The spring belongs to <Menu>, which scales rather than
+       travels. */
+    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;
+    padding: 0 12px max(14px, env(safe-area-inset-bottom));
+  }
+  /* DETENTS ARE A COMPACT-WIDTH IDEA, and the media query says so. A detent is only half a design
+     without the gesture that changes it: on regular width the grabber is gone, so a `medium` sheet
+     would sit at 56dvh forever with no way to ask for more — a panel cropped mid-list, permanently.
+     There the panel's own max-height governs instead. */
+  @media (max-width: 767.98px) {
+    .sheet[data-detent="medium"]:not([data-expanded]) .sheet-panel { max-height: min(56dvh, 100dvh - 24px); }
+  }
+
+  /* ── regular width: the sheet becomes a panel, anchored to whatever summoned it ── */
+  @media (min-width: 768px) {
+    .sheet {
+      /* no longer a full-viewport stage — the box IS the panel's position */
+      inset: auto;
+      width: auto;
+      height: auto;
+      margin: 0;
+      /* written by the script from the anchor's rect; these are the fallbacks when centring */
+      top: var(--sheet-top, 50%);
+      left: var(--sheet-left, 50%);
+      translate: var(--sheet-translate, -50% -50%);
+    }
+    .sheet[open] { display: block; }
+    .sheet-panel {
+      width: min(360px, calc(100vw - 32px));
+      max-height: min(70dvh, 560px);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.45);
+      transform: none;
+      opacity: 1;
+      transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
+    }
+    @starting-style {
+      .sheet[open] .sheet-panel { transform: translateY(-8px) scale(0.98); opacity: 0; }
+    }
+    .sheet::backdrop { background: rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: none; backdrop-filter: none; }
+    .sheet-grip { display: none; } /* nothing to drag when it is a popover */
+    /* — see .sheet-panel:focus below — */
+    .sheet-title { text-align: start; padding-top: 14px; }
+  }
+
+  @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.
+  (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 place(sheet: HTMLDialogElement) {
+      // Anchored presentation is a regular-width affair; on compact the CSS owns the position.
+      if (!window.matchMedia("(min-width: 768px)").matches) return;
+      const sel = sheet.getAttribute("data-anchor");
+      const el = sel ? (document.querySelector(sel) as HTMLElement | null) : null;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const panel = sheet.querySelector<HTMLElement>("[data-panel]");
+      const w = panel ? panel.getBoundingClientRect().width || 360 : 360;
+      // Keep the panel on screen: prefer aligning its trailing edge to the control's, then clamp.
+      const left = Math.min(Math.max(12, r.right - w), window.innerWidth - w - 12);
+      sheet.style.setProperty("--sheet-top", `${r.bottom + 10}px`);
+      sheet.style.setProperty("--sheet-left", `${left}px`);
+      sheet.style.setProperty("--sheet-translate", "0 0");
+    }
+
+    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 finger, and the release decides ──
+      let id: number | null = null, y0 = 0, t0 = 0, dy = 0;
+      grip?.addEventListener("pointerdown", (e: PointerEvent) => {
+        if (window.matchMedia("(min-width: 768px)").matches) return;
+        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);
+    }
+
+    function open(sheet: HTMLDialogElement) {
+      wire(sheet);
+      place(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 });
+    }
+
+    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();
+      open(sheet);
+    });
+    // A resize can move the control the panel is pinned to; re-place only what is on screen.
+    addEventListener("resize", () => {
+      document.querySelectorAll<HTMLDialogElement>("dialog.sheet[open]").forEach(place);
+    });
+  })();
+</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;
   }
 }