@justai/cuts 0.29.0 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -21,11 +21,10 @@
     "./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": {
-    "@justai/ui": ">=0.2.0",
+    "@justai/ui": ">=0.3.0",
     "astro": ">=5"
   },
   "publishConfig": {

package/src/LangPicker.astro

@@ -13,10 +13,13 @@
 // 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.
+// 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[];
@@ -26,6 +29,7 @@ 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>
@@ -40,7 +44,7 @@ const { current, locales, localeNames, localePath, label, searchLabel } = Astro.
     aria-label={`${label}: ${current.toUpperCase()}`}
     title={label}>{current.toUpperCase()}</button>
 
-  <Sheet id="lang-sheet" title={label} detent="large" anchor="[data-trigger]">
+  <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
@@ -48,7 +52,7 @@ const { current, locales, localeNames, localePath, label, searchLabel } = Astro.
         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" role="listbox" aria-label={label} data-list>
-      {locales.map((l) => (
+      {ordered.map((l) => (
         <a
           href={localePath(l)}
           role="option"
@@ -117,7 +121,7 @@ const { current, locales, localeNames, localePath, label, searchLabel } = Astro.
 
 <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>.
+  // dismissing and dragging all belong to <Sheet>.
   const picker = document.querySelector<HTMLElement>("[data-picker]");
   if (picker) {
     const trigger = picker.querySelector<HTMLButtonElement>("[data-trigger]")!;
@@ -137,9 +141,11 @@ const { current, locales, localeNames, localePath, label, searchLabel } = Astro.
       trigger.setAttribute("aria-expanded", "true");
       search.value = "";
       filter();
-      // 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.
+      // 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);
     });
     sheet?.addEventListener("close", () => trigger.setAttribute("aria-expanded", "false"));

package/src/Sheet.astro

@@ -14,16 +14,30 @@ import "./ground.css";
  * 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.
+ * 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.
  *
- * 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.
+ * ── 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.
@@ -43,16 +57,11 @@ interface Props {
   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;
+const { id, title, detent = "medium" } = Astro.props;
 ---
 
-<dialog class="sheet" id={id} data-detent={detent} data-anchor={anchor} aria-label={title}>
+<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.
@@ -73,9 +82,8 @@ const { id, title, detent = "medium", anchor } = Astro.props;
     /* 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. */
+       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%;
@@ -87,7 +95,7 @@ const { id, title, detent = "medium", anchor } = Astro.props;
     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
+    /* 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;
@@ -97,6 +105,7 @@ const { id, title, detent = "medium", anchor } = Astro.props;
     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
@@ -115,10 +124,10 @@ const { id, title, detent = "medium", anchor } = Astro.props;
   .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%;
+    /* 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);
@@ -127,8 +136,8 @@ const { id, title, detent = "medium", anchor } = Astro.props;
     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. */
+       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;
@@ -177,48 +186,17 @@ const { id, title, detent = "medium", anchor } = Astro.props;
     /* 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); }
+    /* 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));
   }
 
-  /* ── 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; }
-  }
+  /* 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; }
@@ -229,27 +207,15 @@ const { id, title, detent = "medium", anchor } = Astro.props;
 <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 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);
@@ -264,10 +230,9 @@ const { id, title, detent = "medium", anchor } = Astro.props;
         panel.style.transform = "";
       });
 
-      // ── drag: the grabber follows the finger, and the release decides ──
+      // ── 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) => {
-        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", "");
@@ -294,26 +259,17 @@ const { id, title, detent = "medium", anchor } = Astro.props;
       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);
+      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/Menu.astro

@@ -1,216 +0,0 @@
----
-// 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>