staffa 0.8.0 → 0.9.0

package/README.md

@@ -158,7 +158,9 @@ The first key that matches wins, and a segment a param refuses simply doesn't ma
 - A link to something that's already open goes back to it instead of opening it twice. The same path is never in the stack twice.
 - A link that isn't inside a panel (a nav item, or one in a dialog) has no panel to build on, so it replaces the stack as a whole: the page you asked for, with its ancestor pages opened beneath it (see [below](#ancestors)). Panels that the new stack also contains stay as they are, so clicking the nav item for the section you're already in won't reset it. Clicking a nav item and opening that same URL in a fresh tab therefore give you the same columns.
 
-From code, `S.panels.push(path)` opens a panel on top of the top one, `.replace(path)` opens one in place of the top one, and `.close(path?)` closes the top panel (or a named one). `S.panels.stack` is the list of open paths.
+From code, `S.panels.push(path)` opens a panel on top of the top one, `.replace(path)` opens one in place of the top one, `.open(path, beneath?)` opens a whole arrangement at once (the way a nav item does — see [below](#ancestors)), and `.close(path?)` closes the top panel (or a named one). `S.panels.stack` is the list of open paths.
+
+Navigating faster than the shell can settle is fine: closing travels through the browser's history, so it takes a moment to land, and anything asked for in the meantime waits for it rather than being dropped. Two quick Escapes (or back gestures) peel two panels, each aimed at the stack the one before it was heading for. A `requestClose` that says no clears what was queued behind it, so an Escape can't sail past the panel that just refused to close.
 
 **How much room a panel takes** is up to `$page.layout`. The content area is the page, at most 1280px wide, minus the nav sidebar:
 
@@ -172,11 +174,13 @@ Those numbers assume a nav sidebar of around 170px; without a sidebar, add that
 
 A panel's width depends only on the size of the window, never on what else is open. So opening or closing a panel never resizes the ones already on screen, and never reflows what someone was reading. A lone small leaves its other half empty, and that is exactly where the next small lands. When more columns fit than the standard 1280px page holds (three smalls, say), the page itself grows, staying centred, to hold them.
 
+The panel is sized before your handler runs, so anything inside it that measures its own box — a chart, a virtualised list, a column count — gets a real one from the first frame rather than a zero-width one. A new panel starts at whatever `layout` says at that point, which is the default, so a handler that *assigns* `layout` is drawn at the medium width and reflowed immediately after. Assigning it later works too: the panel reflows to its new width without being redrawn, so nothing in it is rebuilt or loses its state, and the columns beside it move over.
+
 **The rest of `$page`:**
 
 - `params` and `path`: read-only.
 - `title`: shown in `document.title` while this panel is the top one.
-- `layout`: as above. It's read once, right after your handler runs, so set it there.
+- `layout`: as above, and live — set it whenever you like and the panel reflows.
 - `loading`: set it while you're fetching. A new panel waits a moment before sliding in, so it can arrive with real content instead of empty, and shows a loading indicator if the wait drags on.
 - `close()`: closes this panel, wherever it sits in the stack.
 - `requestClose`: your chance to say no. Everything that would close the panel waits for it: Escape, the panel's own ✕ or Cancel button, the browser's back button, a link that would close it, `S.panels.close()`. Return `false` to keep the panel open.
@@ -198,6 +202,8 @@ S.panels.close("/projects/7"); // that panel, wherever it is
 
 Closing the top panel goes back to whatever was underneath it. Closing one that *isn't* on top takes just that one away: the columns to its right stay where they are and keep their state, and the URL doesn't change, because the top panel didn't move. Either way it becomes a history entry, so the browser's back button brings the panel back.
 
+A closed panel is torn down at once: its `A.clean()` hooks run the moment it closes, so subscriptions, timers and requests stop there and then. Only its element hangs around, inert and frozen, for the length of the exit animation.
+
 Staffa itself contributes two things: the Escape key, which closes the top panel (and jumps to the navigation once you're at the bottom of the stack), and making the browser's back button do the right thing. Both ask `requestClose` first.
 
 <a id="ancestors"></a>
@@ -206,6 +212,26 @@ Staffa itself contributes two things: the Escape key, which closes the top panel
 
 A URL that arrives without any of that (a shared link, a bookmark, a new tab) has nothing to restore, so Staffa builds the stack from the path: it walks the parent paths and opens each one you have a route for. With the routes above, `/projects/7/tasks/42` opens as three panels: the project list, project 7, and task 42. A parent path you have no route for is skipped, so if you don't want one screen appearing under another, just don't give it a route.
 
+That only works for URLs that spell their own context out. A flat one — `/thread/[id]`, where a push notification lands — has no parent path to walk, so it would open as a lone column with nothing beneath it and nothing for Escape to do. `ancestors` is where you say what belongs under it. It's keyed by the same path templates as `routes`, so each entry gets that key's params, matched and typed:
+
+```ts
+S.main({
+  routes: {
+    "/mailbox/[id]": drawMailbox,
+    "/thread/[id=integer]": drawThread,
+  },
+  ancestors: {
+    "/thread/[id=integer]": ({ id }) => [`/mailbox/${mailboxOf(id)}`],   // id is a number
+  },
+});
+```
+
+Return the paths shallowest first, or nothing to leave that path to the parent-path walk — which is also what a route you don't list gets, so you only name the ones whose URL doesn't say where they belong. It's asked for every navigation that has no panel to build on, so a nav item and a fresh tab still agree.
+
+It has to answer without drawing anything, which is why it lives here rather than on `$page`: the panels being replaced are asked their `requestClose` *before* the navigation is applied, and that is before any route handler could have run.
+
+From code, `S.panels.open(path, beneath?)` opens the same kind of arrangement, either asking `ancestors` for the stack or taking the one you hand it.
+
 Search params and the `#hash` belong to the top panel only. Anything a panel deeper in the stack needs in order to redraw itself has to live in its path.
 
 **A few more things.**
@@ -267,7 +293,7 @@ Components share naming conventions for options: `attrs` (outermost element), `c
 
 ### Layout & containers
 
-- **`S.main(opts)`**: app shell, a sticky header with `icon`, `title`, `subtitle`, `menu`; scrollable content area; footer. Set `maxWidth` to center the content. Give it a `nav` for a sidebar that collapses to a hamburger below 640 px — where the nav becomes a full page sliding in from the left, handing over to the chosen screen with a matching slide in from the right. Instead of a single `content` slot it can take a `routes` table — see [Panel-stack navigation](#panel-stack-navigation).
+- **`S.main(opts)`**: app shell, a sticky header with `icon`, `title`, `subtitle`, `menu`; scrollable content area; footer. Set `maxWidth` to center the content. Give it a `nav` for a sidebar that collapses to a hamburger below 640 px — where the nav becomes a full page sliding in from the left, handing over to the chosen screen with a matching slide in from the right. Its `items` may be a reactive array; adding or removing one redraws just the sidebar, never the content beside it. A navigation dismisses the collapsed nav by itself, links in your own custom rows included; `S.closeNav()` does it for the rows that *don't* navigate. Instead of a single `content` slot it can take a `routes` table — see [Panel-stack navigation](#panel-stack-navigation).
 - **`S.box(opts | content)`**: surface with optional `header`/`footer` and padded body. Pass a function for shorthand `{ content }`. `close: true` adds a ✕ that closes the panel the box is in (see [Panel-stack navigation](#panel-stack-navigation)); `close: fn` runs your own dismissal.
 - **`S.tabs(opts)`**: tablist with live panels and keyboard navigation. More tabs than fit make the strip scroll, with a ‹ / › button appearing at whichever end still has something to reach — so it's not just a swipe target. Selecting a tab any other way (the arrow keys, a `bind` written from elsewhere) scrolls it into view.
 - **`S.form(opts | content)`**: form aligning fields in a column or responsive grid, with an `actions` bar. Prevents the default page reload.
@@ -309,7 +335,8 @@ Options: `size`, `color` (defaults to `currentColor`), `strokeWidth`, `cap`, `jo
 
 ### Other
 
-- **`S.menuButton(opts)` / `S.addContextMenu(opts)` / `S.showFloatingMenu(opts)`**: dropdown menus from a button, right-click/long-press context menus, and the underlying floating menu primitive — with keyboard navigation.
+- **`S.menuButton(opts)` / `S.addContextMenu(opts)` / `S.showFloatingMenu(opts)`**: dropdown menus from a button, right-click/long-press context menus, and the underlying floating menu primitive — with keyboard navigation. A menu closes itself when the page navigates.
+- **`S.closeNav()`**: dismisses `S.main`'s navigation when it's showing as an overlay (the full page on a phone, the dropdown on a wider screen). For custom nav rows that act without navigating.
 - **`S.toast(opts)`**: transient notification at the bottom of the viewport.
 - **`S.addTooltip(el, opts)`**: tooltip on hover, attached to an existing element.
 
@@ -401,23 +428,8 @@ mkdir -p .claude/skills
 ln -s ../../node_modules/staffa/skill .claude/skills/staffa
 ```
 
-## Breaking changes
-
-- **0.7** — the surface model was reduced to two families: **neutral** (`.neutral`) and **accent** (`.primary`/`.danger`/`.success`/`.warning`/`.link`). Apps that only use the high-level `S.*` components need no changes. Code that uses surface classes or tokens directly must update:
-  - **Surface levels gone.** Replace `.base`/`.panel`/`.raised`/`.neutral`/`.nest` with the single `.neutral` class.
-  - **`.secondary` and `.gradient` gone.** Drop any `s-secondary` colour override; there's no `s-secondary` anymore. The default button is now `.primary`.
-  - **Tokens renamed.** `--s-fg`→`--s-text`, `--s-fg-muted`→`--s-muted`, `--s-border`→`--s-faint`. Removed: `--s-fg-faint`, `--s-border-strong`, `--s-ink`, `--s-on-accent`, `--s-page`/`--s-panel`/`--s-raised`, `--s-neutral`, `--s-tint`, `--s-glow`, `--s-shadow`, `--s-gradient-surface`. A custom surface now sets `--s-bg`/`--s-text` (was the `--s-a`/`--s-b` anchors).
-  - **Borders/shadows moved onto surfaces.** Components no longer draw their own border/shadow. If you relied on `S.box`/`S.dialog`/etc. elevation, it now comes from the surface; pass `.no-shadow` to drop it, or `.shadow`/`.extra-shadow` to add it on any surface.
-
-- **0.6**: None.
+## Changelog
 
-- **0.5**
-  - Surfaces (`.s-s`) now apply `border-radius` and — for `.tonal` and `.outlined` variants — `border` automatically. Custom surfaces or components that previously set these manually may see doubled or conflicting styles; remove the manual declarations.
-  - `border:0` is now applied to `.s-btn` by default (overriding the browser's 2px button border). Custom button-like components built on `.s-btn` that relied on the browser default border should add an explicit border.
+What changed in each release, and what to do about the breaking ones, is in [CHANGELOG.md](CHANGELOG.md).
 
-- **0.4**
-  - There is no default export anymore: replace `import S from "staffa"` with `import * as S from "staffa"`.
-  - `S.button` no longer has a `text` option: use `content` instead (it accepts a string or a draw function).
-  - The `Content` type is gone: use `Slot` instead. The `Styling` type alias is now exported as `Attributes`.
-  - `S.buttonChooser` uses `undefined` instead of `null` for "nothing selected" (in `bind` and with `allowDeselect`).
-  
+*Hint:* the recommended update strategy for a library this young is: don't. Pin it, and read the changelog before you move.

package/dist/components/main.d.ts

@@ -1,6 +1,6 @@
 import { type Slot, type Attributes } from "../core.js";
 import { type MenuOptions } from "./menu.js";
-import { type RouteHandler, type RouteTable, type Routes } from "./panels.js";
+import { type AncestorTable, type RouteHandler, type RouteTable, type Routes } from "./panels.js";
 /** Options for {@link main}. */
 export interface MainOptions<R = Routes> {
     /** Aberdeen attr/style string applied to the outermost shell element. */
@@ -80,6 +80,45 @@ export interface MainOptions<R = Routes> {
      * `$page.path`.
      */
     notFound?: RouteHandler<{}>;
+    /**
+     * What to open **beneath** a path that arrives cold — a shared link, a
+     * bookmark, a push notification, a nav item — with no stack of its own to
+     * restore. Keyed by path template exactly like {@link MainOptions.routes}, so
+     * each entry gets that key's params, matched and typed, rather than taking
+     * the path apart a second time.
+     *
+     * Without this, the stack is derived from the path: every prefix that has a
+     * route becomes a column, so `/projects/7/tasks/42` opens three deep. That
+     * only works for URLs that spell their own context out. A flat one —
+     * `/thread/[id]`, where a notification lands — has no prefix to walk, so it
+     * opens as a single column with nothing under it and nothing to close back
+     * to. This is where you say what that context is:
+     *
+     * ```ts
+     * S.main({
+     *   routes: {
+     *     "/mailbox/[id]": drawMailbox,
+     *     "/thread/[id=integer]": drawThread,
+     *   },
+     *   ancestors: {
+     *     "/thread/[id=integer]": ({ id }) => [`/mailbox/${mailboxOf(id)}`],  // id: number
+     *   },
+     * });
+     * ```
+     *
+     * Return the paths shallowest first; the path itself goes on top. Return
+     * nothing to leave a path to the prefix derivation, which is also what an
+     * unlisted one gets — so you only list the routes whose URL doesn't say where
+     * it belongs. Paths you have no route for are skipped, as they are there.
+     *
+     * This is asked for every origin-less navigation, so a nav item and a fresh
+     * tab still land on the same columns; a link *inside* a panel builds on that
+     * panel instead and never asks. It has to answer without drawing anything,
+     * since the panels being replaced are asked their {@link Page.requestClose}
+     * before the navigation is applied — before any handler could run. From code,
+     * {@link panels}.`open()` takes the same list directly.
+     */
+    ancestors?: AncestorTable<NoInfer<R>>;
     /**
      * Set `false` to show only the top panel, however wide the screen (the nav
      * sidebar still sits beside it). Everything else behaves the same: the URL,
@@ -111,6 +150,11 @@ export interface MainOptions<R = Routes> {
      * mode) or a button+dropdown (in `"button"` mode). The sidebar automatically
      * collapses to a button when the shell is too narrow — which there opens the
      * nav as a full page sliding in from the left, not as a dropdown.
+     *
+     * `items` may be a reactive array: the shell reads it inside the sidebar's own
+     * scope, so an item arriving or leaving redraws the sidebar and nothing else.
+     * The content beside it — in routed mode, the whole panel stack — is left
+     * alone.
      */
     nav?: MenuOptions;
     /**
@@ -168,3 +212,24 @@ export interface MainOptions<R = Routes> {
  * ```
  */
 export declare function main<R extends RouteTable<R>>(opts?: MainOptions<R>): void;
+/**
+ * Close the navigation, if it's showing as an overlay: the full page it becomes
+ * on a narrow shell, or the dropdown its button opens on a wider one. A sidebar
+ * isn't an overlay and has nothing to dismiss, so there it does nothing.
+ *
+ * A navigation closes the nav by itself, links in your own custom rows included,
+ * so this is for the items that *don't* navigate — one that opens a dialog, or
+ * flips a setting, and should still get the nav out of the way.
+ *
+ * @example
+ * ```ts
+ * S.main({
+ *   nav: { items: [
+ *     { label: "Inbox", href: "/inbox" },
+ *     () => S.button({ content: "New message", click: () => { S.closeNav(); compose(); } }),
+ *   ]},
+ *   routes: { ... },
+ * });
+ * ```
+ */
+export declare function closeNav(): void;

package/dist/components/main.js

@@ -1,4 +1,5 @@
 import A from "aberdeen";
+import { current as currentRoute } from "aberdeen/route";
 import { drawSlot, focusFirst, NARROW_PX } from "../core.js";
 import { drawMenu, showFloatingMenu, isFloatingMenuOpen, closeFloatingMenu, menuGlyph, closeGlyph } from "./menu.js";
 import { button } from "./button.js";
@@ -169,10 +170,14 @@ A.insertGlobalCss({
 // silently degrades to `any`. Callers that pass no `routes` are unaffected —
 // `MainOptions`'s own default kicks in there.
 export function main(opts = {}) {
+    // Whether there is a nav to show is deliberately NOT worked out here: `items`
+    // may well be a reactive array, and reading it in the shell's own scope would
+    // subscribe *the whole shell* to it — an item arriving later would redraw the
+    // lot, and in routed mode that means tearing the panel stack down and building
+    // it again from the URL. So every use below reads `nav.items` inside its own
+    // scope, and only that scope redraws.
     const nav = opts.nav;
     const navPos = opts.navPosition ?? "left";
-    const hasNav = nav != null && nav.items.length > 0;
-    const navCls = hasNav ? (navPos === "button" ? ".s-nav-btn-only" : `.s-nav-${navPos}`) : "";
     // Whether the narrow-screen full-page nav is showing. Per shell, so nested or
     // sibling `main()`s can't fight over it.
     const $nav = A.proxy({ open: false });
@@ -182,19 +187,38 @@ export function main(opts = {}) {
     }
     // The panel stack owns the routing, so it starts observing (and building its
     // stack from) the URL before any of the shell is drawn — the top bar's back
-    // button already needs to know how deep we are.
-    const ctl = routes ? new PanelController({ ...opts, routes, title: opts.title }) : null;
+    // button already needs to know how deep we are. Its options are listed one by
+    // one rather than spread from `opts`: a spread reads every key, which on a
+    // proxied options object subscribes this scope to all of them.
+    const ctl = routes
+        ? new PanelController({
+            routes,
+            notFound: opts.notFound,
+            ancestors: opts.ancestors,
+            stacking: opts.stacking,
+            title: opts.title,
+        })
+        : null;
     // Routed mode caps the shell to the ensemble width the layout engine publishes,
     // rather than to `maxWidth`.
     const capWidth = ctl ? null : opts.maxWidth;
-    const root = A(`div.s-main${navCls}${ctl ? ".s-routed" : ""}`, opts.attrs, () => {
+    const root = A(`div.s-main${ctl ? ".s-routed" : ""}`, opts.attrs, () => {
+        // Which nav mode the shell is in — sidebar or button — as a class on the
+        // shell, for the CSS below to hang the responsive collapse off. Its own
+        // scope (see `nav` above), so a nav appearing or emptying out only retags
+        // the shell rather than redrawing it.
+        A(() => {
+            if (nav == null || !nav.items.length)
+                return;
+            A(navPos === "button" ? ".s-nav-btn-only" : `.s-nav-${navPos}`);
+        });
         // Top bar.
         A(() => {
             const hasBar = opts.title != null ||
                 opts.subtitle != null ||
                 opts.icon != null ||
                 opts.menu != null ||
-                hasNav;
+                (nav != null && nav.items.length > 0);
             if (!hasBar)
                 return;
             A("header.s-s.neutral", opts.topbarAttrs, () => {
@@ -206,7 +230,7 @@ export function main(opts = {}) {
                     });
                     // Nav trigger button — visible when sidebar is hidden (button mode or narrow viewport).
                     A(() => {
-                        if (!hasNav)
+                        if (nav == null || !nav.items.length)
                             return;
                         // .s-nav-trigger: CSS toggles display based on sidebar visibility.
                         A("div.s-nav-trigger", () => drawNavTrigger(nav, $nav));
@@ -240,17 +264,21 @@ export function main(opts = {}) {
                     if (capWidth != null)
                         A("max-width:", capWidth);
                 });
-                if (hasNav && navPos !== "button") {
+                // The sidebar, in its own scope so a changing item list redraws just
+                // it — never the content area beside it (see `nav` above).
+                A(() => {
+                    if (nav == null || !nav.items.length || navPos === "button")
+                        return;
                     A(`nav.s-nav-panel.s-nav-${navPos}`, opts.navAttrs, () => {
                         drawMenu(nav.items);
                     });
                     A("div.s-nav-sep aria-hidden=true");
-                }
+                });
                 drawMainContent(opts, ctl);
             });
             // The narrow-screen nav page, laid over the body it slides across.
             A(() => {
-                if (hasNav && $nav.open)
+                if (nav != null && nav.items.length && $nav.open)
                     drawNavPage(nav, opts.navPageAttrs, $nav);
             });
         });
@@ -275,7 +303,7 @@ export function main(opts = {}) {
     // shell width calls for), which focuses its current item. Listens on
     // `document` so it works wherever focus is, but bows out while another overlay
     // (a dialog, or an already-open menu) is up — those handle Escape themselves.
-    if (hasNav || ctl) {
+    if (nav != null || ctl) {
         const onKey = (e) => {
             if (e.key !== "Escape" || e.defaultPrevented)
                 return;
@@ -298,8 +326,9 @@ export function main(opts = {}) {
                 void ctl.closeTop();
                 return;
             }
-            if (!hasNav)
-                return;
+            // Whether there is a nav at all is asked of the DOM, not of `nav.items`:
+            // a subscription here would be one on the shell's own scope again, and
+            // an empty nav simply has neither of the two elements below.
             // `offsetParent` is null when the sidebar is hidden (display:none).
             const panel = root.querySelector(".s-nav-panel");
             if (panel?.offsetParent != null) {
@@ -320,6 +349,35 @@ export function main(opts = {}) {
         A.clean(() => document.removeEventListener("keydown", onKey));
     }
 }
+/**
+ * Dismisses whichever collapsed nav is showing, if either is: at most one shell
+ * has its nav up as an overlay at a time, so this needs nothing passed in. Set
+ * by the two things that open one (see {@link closeNav}).
+ */
+let openNav = null;
+/**
+ * Close the navigation, if it's showing as an overlay: the full page it becomes
+ * on a narrow shell, or the dropdown its button opens on a wider one. A sidebar
+ * isn't an overlay and has nothing to dismiss, so there it does nothing.
+ *
+ * A navigation closes the nav by itself, links in your own custom rows included,
+ * so this is for the items that *don't* navigate — one that opens a dialog, or
+ * flips a setting, and should still get the nav out of the way.
+ *
+ * @example
+ * ```ts
+ * S.main({
+ *   nav: { items: [
+ *     { label: "Inbox", href: "/inbox" },
+ *     () => S.button({ content: "New message", click: () => { S.closeNav(); compose(); } }),
+ *   ]},
+ *   routes: { ... },
+ * });
+ * ```
+ */
+export function closeNav() {
+    openNav?.();
+}
 /**
  * The hamburger in the top bar, shown whenever the sidebar isn't. What it opens
  * depends on how much room the shell has: a dropdown when there's plenty, and —
@@ -330,6 +388,11 @@ function drawNavTrigger(nav, $nav) {
     let myEl = null;
     A.clean(() => { if (myEl)
         closeFloatingMenu(myEl); });
+    // The dropdown form of the same overlay, for `closeNav()` (see `openNav`).
+    // The floating menu bows out on a navigation by itself, so this is only ever
+    // asked to dismiss one that isn't going anywhere.
+    const dismiss = () => { if (myEl)
+        closeFloatingMenu(myEl); };
     button({
         // The glyph doubles as the state: ☰ to open the page, ✕ to dismiss it. Its
         // own scope, so toggling doesn't rebuild (and re-focus) the button.
@@ -351,8 +414,10 @@ function drawNavTrigger(nav, $nav) {
             // the menu's own outside-click handler, so toggle it here.
             if (isFloatingMenuOpen(myEl))
                 closeFloatingMenu(myEl);
-            else
+            else {
+                openNav = dismiss;
                 showFloatingMenu({ items: nav.items, anchor: myEl, dropdownAttrs: nav.dropdownAttrs });
+            }
         },
     });
 }
@@ -366,7 +431,19 @@ function drawNavPage(nav, attrs, $nav) {
     // Whether this close is a *navigation* — the only kind that hands over to an
     // incoming screen. Dismissing the page just uncovers the content again.
     let navigated = false;
-    const pageEl = A("nav.s-nav-page.s-s.neutral aria-label=Navigation create=s-nav-page-off destroy=s-nav-page-off", attrs, () => drawMenu(nav.items, () => { navigated = true; $nav.open = false; }));
+    const dismiss = () => { navigated = true; $nav.open = false; };
+    const pageEl = A("nav.s-nav-page.s-s.neutral aria-label=Navigation create=s-nav-page-off destroy=s-nav-page-off", attrs, () => drawMenu(nav.items, dismiss));
+    // This is the shell's one nav overlay, so `closeNav()` knows where to aim.
+    openNav = dismiss;
+    A.clean(() => { if (openNav === dismiss)
+        openNav = null; });
+    // Whatever the page navigated to, it hands over to: the items do that
+    // themselves (`dismiss` above), but custom slot content — a link in a row the
+    // shell knows nothing about — doesn't, and neither does a navigation from
+    // anywhere else. Its own scope, so it can't redraw the page it closes.
+    const openedAt = A.peek(currentRoute, "path");
+    A(() => { if (currentRoute.path !== openedAt)
+        dismiss(); });
     const shell = pageEl.closest(".s-main");
     const behind = pageEl.parentElement?.querySelector(":scope > .s-body-inner");
     // Content mode's incoming half of the hand-off. In routed mode there is no

package/dist/components/menu.js

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { matchCurrent } from "aberdeen/route";
+import { matchCurrent, current as currentRoute } from "aberdeen/route";
 import { drawSlot, mountPortal, focusFirst } from "../core.js";
 import { mk } from "../icons-helpers.js";
 import { button } from "./button.js";
@@ -181,6 +181,13 @@ mountPortal(() => {
             closeFloating();
         }
     };
+    // A menu is a transient overlay: whatever navigation it started, it hands over
+    // to. Items do that themselves (`closeFloating` is `drawMenu`'s `onActivate`
+    // above), but custom slot content — a link in a row the menu knows nothing
+    // about — doesn't, and neither does a navigation from anywhere else.
+    const openedAt = A.peek(currentRoute, "path");
+    A(() => { if (currentRoute.path !== openedAt)
+        closeFloating(); });
     document.addEventListener("click", onClick, true);
     document.addEventListener("keydown", onKey, true);
     A.clean(() => {