staffa 0.9.0 → 0.10.0

package/src/components/tabs.ts

@@ -16,6 +16,16 @@ export interface Tab {
 	disabled?: boolean;
 }
 
+/** Options for {@link scrollStrip}. */
+export interface ScrollStripOptions {
+	/** The row's content, laid out left to right. */
+	content: Slot;
+	/** Aberdeen attr/style string applied to the outer element. */
+	attrs?: Attributes;
+	/** Aberdeen attr/style string applied to the scrolling row itself. */
+	stripAttrs?: Attributes;
+}
+
 /** Options for {@link tabs}. */
 export interface TabsOptions {
 	/** Aberdeen attr/style string applied to the outermost element. */
@@ -38,25 +48,46 @@ const chevronLeft = mk('<path d="m15 18-6-6 6-6"/>');
 const chevronRight = mk('<path d="m9 18 6-6-6-6"/>');
 
 A.insertGlobalCss({
-	".s-tabs": {
-		"&": "display:flex flex-direction:column gap:$3",
-		// The bar owns the hairline (so it runs the full width, under the scroll
-		// buttons too) and is the positioning context they overlay from.
-		".s-tabbar": "position:relative display:flex border-bottom: 1px solid $s-faint;",
-		// The strip scrolls horizontally when the tabs outgrow it. Its own scrollbar
-		// is hidden — a raw scrollbar under a tab row reads as a mistake — so the
-		// affordance is the pair of buttons below, plus the fade they sit in.
+	// A row that scrolls sideways once its content outgrows it, with a ‹ / ›
+	// button appearing over whichever end still has something to reach. Its own
+	// scrollbar is hidden — a raw scrollbar under a row of chrome reads as a
+	// mistake — so those buttons, and the fade they sit in, are the affordance.
+	// Shared by `tabs()` and the shell's breadcrumb stack; see `scrollStrip()`.
+	".s-strip": {
+		// The positioning context the buttons overlay from.
+		"&": "position:relative display:flex min-width:0",
 		// `overflow-y:hidden` is load-bearing: `overflow-x:auto` alone forces the
 		// computed `overflow-y` off `visible`, which turned the active tab's 1px
 		// overhang into a stray couple of pixels of *vertical* scroll.
+		"> .s-strip-row":
+			"display:flex align-items:center flex:1 min-width:0 " +
+			"overflow-x:auto overflow-y:hidden scrollbar-width:none scroll-behavior:smooth",
+		"> .s-strip-row::-webkit-scrollbar": "display:none",
+		// The buttons overlay the row's ends rather than sitting beside it, so no
+		// width is reserved when there's nothing to scroll — and the content slides
+		// out from under a fade instead of stopping at a hard edge.
+		"> .s-strip-btn":
+			"position:absolute top:0 bottom:0 z-index:1 display:none align-items:center justify-content:center " +
+			"width:2.4em border:0 padding:0 cursor:pointer fg:$s-muted " +
+			"transition: color 0.15s;",
+		"> .s-strip-btn:hover": "fg:$s-text",
+		"> .s-strip-btn-left": "left:0 justify-content:flex-start background: linear-gradient(to right, $s-bg 45%, transparent)",
+		"> .s-strip-btn-right": "right:0 justify-content:flex-end background: linear-gradient(to left, $s-bg 45%, transparent)",
+		// Shown only for the direction there is actually something to scroll towards,
+		// so the pair doubles as a position indicator.
+		"&.s-can-left > .s-strip-btn-left, &.s-can-right > .s-strip-btn-right": "display:flex",
+	},
+	".s-tabs": {
+		"&": "display:flex flex-direction:column gap:$3",
+		// The bar owns the hairline, so it runs the full width — under the scroll
+		// buttons too.
+		".s-tabbar": "border-bottom: 1px solid $s-faint;",
 		".s-tablist":
-			"display:flex gap:$1 align-items:stretch flex:1 min-width:0 " +
-			"overflow-x:auto overflow-y:hidden scrollbar-width:none scroll-behavior:smooth " +
+			"gap:$1 align-items:stretch " +
 			// Pulls the strip 1px down over the bar's hairline, so the active tab's
 			// underline lands *on* it rather than stacking above it. On the strip, not
 			// the tabs: a negative margin inside a scroll container is overflow.
 			"margin-bottom:-1px",
-		".s-tablist::-webkit-scrollbar": "display:none",
 		".s-tab":
 			"display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent " +
 			"border:0 color: $s-muted; font-weight:600 padding: 0.6em 0.9em; white-space:nowrap " +
@@ -67,23 +98,56 @@ A.insertGlobalCss({
 		// painting, and an outset ring on the first/last tab would be shaved off.
 		".s-tab:focus-visible": "outline:none box-shadow: inset 0 0 0 2px $s-focus; r: $s-radius;",
 		".s-tab[aria-selected=true]": "border-image: $s-gradient 1;",
-		// The scroll buttons overlay the strip's ends rather than sitting beside it,
-		// so no width is reserved when there's nothing to scroll — and the tabs slide
-		// out from under a fade instead of stopping at a hard edge.
-		".s-tabscroll":
-			"position:absolute top:0 bottom:0 z-index:1 display:none align-items:center justify-content:center " +
-			"width:2.4em border:0 padding:0 cursor:pointer fg:$s-muted " +
-			"transition: color 0.15s;",
-		".s-tabscroll:hover": "fg:$s-text",
-		".s-tabscroll-left": "left:0 justify-content:flex-start background: linear-gradient(to right, $s-bg 45%, transparent)",
-		".s-tabscroll-right": "right:0 justify-content:flex-end background: linear-gradient(to left, $s-bg 45%, transparent)",
-		// Shown only for the direction there is actually something to scroll towards,
-		// so the pair doubles as a position indicator.
-		".s-tabbar.s-can-left > .s-tabscroll-left, .s-tabbar.s-can-right > .s-tabscroll-right": "display:flex",
 		".s-tabpanel": "display:block",
 	},
 });
 
+/**
+ * A horizontal row that scrolls when its content outgrows it, with a ‹ / ›
+ * button appearing over whichever end still has something left to reach — a
+ * bare scroll area says nothing about itself to a mouse, and a scrollbar under
+ * a row of chrome reads as a mistake. The row's own scrollbar is hidden, and
+ * the buttons scroll it by most of a width at a time.
+ *
+ * This is what {@link tabs} puts its tab strip in, and what the routed
+ * {@link main} shell puts its breadcrumb stack in. Reach for it for any row of
+ * chrome that can outgrow its space: a filter bar, a row of chips, a toolbar.
+ * To bring one of its children into view — after selecting it from elsewhere,
+ * say — call {@link revealInStrip} with that child.
+ *
+ * @example
+ * ```ts
+ * S.scrollStrip({
+ *   attrs: "gap:$1",
+ *   content: () => { for (const tag of tags) S.button({ content: tag, attrs: ".small" }); },
+ * });
+ * ```
+ */
+export function scrollStrip(opts: ScrollStripOptions): void {
+	A("div.s-strip", opts.attrs, () => {
+		const row = A("div.s-strip-row", opts.stripAttrs, () => drawSlot(opts.content)) as HTMLElement;
+		drawScrollButton(row, -1);
+		drawScrollButton(row, 1);
+		watchScroll(row);
+	});
+}
+
+/**
+ * Scroll `el`'s {@link scrollStrip} just far enough to bring it into view,
+ * clearing the buttons that overlay the row's ends. Does nothing when `el`
+ * isn't in a strip, or is already comfortably visible.
+ */
+export function revealInStrip(el: HTMLElement): void {
+	const row = el.parentElement;
+	if (!row || !el.isConnected) return;
+	// The overlays are 2.4em wide; clearing a little more than that keeps the
+	// revealed item from sitting right against one.
+	const pad = parseFloat(getComputedStyle(row).fontSize) * 2.6;
+	const box = el.getBoundingClientRect(), strip = row.getBoundingClientRect();
+	if (box.left < strip.left + pad) row.scrollBy({ left: box.left - strip.left - pad, behavior: "smooth" });
+	else if (box.right > strip.right - pad) row.scrollBy({ left: box.right - strip.right + pad, behavior: "smooth" });
+}
+
 /**
  * A tabbed view. Renders an ARIA `tablist` of buttons and a single live panel
  * for the selected tab. Supports keyboard navigation (left/right/home/end).
@@ -121,12 +185,14 @@ export function tabs(opts: TabsOptions): void {
 	};
 
 	A("div.s-tabs", opts.attrs, () => {
-		A("div.s-tabbar", () => {
-			const listEl = A("div.s-tablist role=tablist", () => {
+		scrollStrip({
+			attrs: ".s-tabbar",
+			stripAttrs: ".s-tablist role=tablist",
+			content: () => {
 				opts.tabs.forEach((tab, index) => {
 					const key = keyOf(tab, index);
 					const tabEl = A("button.s-tab type=button role=tab", () => {
-						A(`id=${groupId}-tab-${key} aria-controls=${groupId}-panel-${key}`);
+						A("id=", `${groupId}-tab-${key}`, "aria-controls=", `${groupId}-panel-${key}`);
 						A(() => {
 							const selected = $sel.value === key;
 							A("aria-selected=", selected ? "true" : "false");
@@ -134,7 +200,7 @@ export function tabs(opts: TabsOptions): void {
 							// Selecting a tab that's (partly) scrolled out brings it into
 							// view, so the strip follows the selection however it was made:
 							// a click, the arrow keys, or a `bind` written from elsewhere.
-							if (selected) requestAnimationFrame(() => reveal(tabEl as HTMLElement));
+							if (selected) requestAnimationFrame(() => revealInStrip(tabEl as HTMLElement));
 						});
 						if (tab.disabled) A("disabled=true");
 						A("click=", () => select(tab, index));
@@ -143,11 +209,7 @@ export function tabs(opts: TabsOptions): void {
 						drawSlot(tab.label);
 					});
 				});
-			}) as HTMLElement;
-
-			drawScrollButton(listEl, -1);
-			drawScrollButton(listEl, 1);
-			watchScroll(listEl);
+			},
 		});
 
 		A("div.s-tabpanel role=tabpanel", opts.contentAttrs, () => {
@@ -156,7 +218,7 @@ export function tabs(opts: TabsOptions): void {
 				const index = opts.tabs.findIndex((t, i) => keyOf(t, i) === selKey);
 				const tab = opts.tabs[index] ?? opts.tabs[0];
 				if (!tab) return;
-				A(`id=${groupId}-panel-${keyOf(tab, index)} aria-labelledby=${groupId}-tab-${keyOf(tab, index)}`);
+				A("id=", `${groupId}-panel-${keyOf(tab, index)}`, "aria-labelledby=", `${groupId}-tab-${keyOf(tab, index)}`);
 				drawSlot(tab.content);
 			});
 		});
@@ -164,60 +226,64 @@ export function tabs(opts: TabsOptions): void {
 }
 
 /**
- * One of the two scroll buttons overlaying the ends of the strip. `dir` is -1 for
- * the left one and 1 for the right. A page at a time (not a tab at a time): the
- * strip scrolls smoothly, so a nudge that moved one tab would read as a twitch.
+ * One of the two scroll buttons overlaying the ends of the row. `dir` is -1 for
+ * the left one and 1 for the right. Most of a width at a time (not one item at a
+ * time): the row scrolls smoothly, so a nudge that moved a single tab or crumb
+ * would read as a twitch.
  */
-function drawScrollButton(list: HTMLElement, dir: -1 | 1): void {
-	A(`button.s-tabscroll.s-tabscroll-${dir < 0 ? "left" : "right"} type=button`, () => {
-		// The tabs themselves are the real control; this is a convenience the strip
-		// offers a mouse. Keeping it out of the tab order means Tab still steps from
-		// the tablist straight into the panel.
+function drawScrollButton(row: HTMLElement, dir: -1 | 1): void {
+	A(`button.s-strip-btn.s-strip-btn-${dir < 0 ? "left" : "right"} type=button`, () => {
+		// The row's own items are the real control; this is a convenience it offers
+		// a mouse. Keeping it out of the tab order means Tab still steps from the
+		// row straight into whatever follows.
 		A("tabindex=-1 aria-hidden=true");
-		A("click=", () => list.scrollBy({ left: dir * list.clientWidth * 0.8, behavior: "smooth" }));
+		A("click=", () => row.scrollBy({ left: dir * row.clientWidth * 0.8, behavior: "smooth" }));
 		(dir < 0 ? chevronLeft : chevronRight)({ size: "1.1em" });
 	});
 }
 
 /**
- * Keep the `.s-can-left` / `.s-can-right` classes on the bar in step with what
+ * Keep the `.s-can-left` / `.s-can-right` classes on the strip in step with what
  * there is left to scroll towards, so each button appears exactly when it has
- * somewhere to go. Watches the strip's own scrolling *and* its size (a resize, or
- * tabs being added or removed, changes the answer without any scrolling at all).
+ * somewhere to go. Watches the row's own scrolling *and* its size — and its
+ * children's, since items arriving or leaving (a pushed page's crumb, a tab)
+ * changes the answer without any scrolling at all.
  */
-function watchScroll(list: HTMLElement): void {
-	const bar = list.parentElement;
-	if (!bar || typeof ResizeObserver === "undefined") return; // No-op outside the browser.
+function watchScroll(row: HTMLElement): void {
+	const strip = row.parentElement;
+	if (!strip || typeof ResizeObserver === "undefined") return; // No-op outside the browser.
 	const update = () => {
 		// A sub-pixel slack: fractional layout widths otherwise leave a permanent
 		// half-pixel of "scrollable" at an end that is plainly already reached.
-		const max = list.scrollWidth - list.clientWidth;
-		bar.classList.toggle("s-can-left", list.scrollLeft > 1);
-		bar.classList.toggle("s-can-right", list.scrollLeft < max - 1);
+		const max = row.scrollWidth - row.clientWidth;
+		strip.classList.toggle("s-can-left", row.scrollLeft > 1);
+		strip.classList.toggle("s-can-right", row.scrollLeft < max - 1);
 	};
-	list.addEventListener("scroll", update, { passive: true });
+	row.addEventListener("scroll", update, { passive: true });
 	const ro = new ResizeObserver(update);
-	ro.observe(list);
-	for (const tab of Array.from(list.children)) ro.observe(tab);
+	ro.observe(row);
+	// The children are watched through one observer that follows the row's live
+	// contents, so a strip whose items come and go keeps answering correctly.
+	// Removed children are unobserved: a strip whose items churn (the breadcrumb
+	// row redraws on navigation) would otherwise grow the observation list — and
+	// retain the detached elements — without bound.
+	const mo = typeof MutationObserver === "undefined" ? undefined : new MutationObserver((records) => {
+		for (const record of records) {
+			for (const el of record.addedNodes) if (el instanceof Element) ro.observe(el);
+			for (const el of record.removedNodes) if (el instanceof Element) ro.unobserve(el);
+		}
+		update();
+	});
+	mo?.observe(row, { childList: true });
+	for (const kid of Array.from(row.children)) ro.observe(kid);
 	update();
 	A.clean(() => {
-		list.removeEventListener("scroll", update);
+		row.removeEventListener("scroll", update);
 		ro.disconnect();
+		mo?.disconnect();
 	});
 }
 
-/** Scroll `el`'s strip just far enough to clear the buttons overlaying its ends. */
-function reveal(el: HTMLElement): void {
-	const list = el.parentElement;
-	if (!list || !el.isConnected) return;
-	// The overlays are 2.4em wide; clearing a little more than that keeps the tab
-	// from sitting right against one.
-	const pad = parseFloat(getComputedStyle(list).fontSize) * 2.6;
-	const tab = el.getBoundingClientRect(), strip = list.getBoundingClientRect();
-	if (tab.left < strip.left + pad) list.scrollBy({ left: tab.left - strip.left - pad, behavior: "smooth" });
-	else if (tab.right > strip.right - pad) list.scrollBy({ left: tab.right - strip.right + pad, behavior: "smooth" });
-}
-
 /** Roving-tabindex keyboard handling for the tab strip. */
 function onKey(
 	e: KeyboardEvent,

package/src/core.ts

@@ -56,7 +56,7 @@ export interface ContentOptions {
 
 /**
  * Shell width — not viewport width — at or below which the app shell goes
- * "narrow": the nav sidebar collapses to a hamburger, and a routed panel stack
+ * "narrow": the nav sidebar collapses to a hamburger, and a routed shell
  * has room for exactly one full-bleed column. Shared by the `@container` queries
  * that do the switching and by the JS that has to agree with them.
  */

package/src/index.ts

@@ -35,17 +35,17 @@
 export { setDarkMode, getDarkMode } from "./theme.js";
 export { autocomplete, type AutocompleteOptions, type AutocompleteOptionInput } from "./components/autocomplete.js";
 export { box, type BoxOptions } from "./components/box.js";
-export { button, type ButtonOptions } from "./components/button.js";
+export { button, iconButton, type ButtonOptions, type IconButtonOptions } from "./components/button.js";
 export { buttonChooser, type ButtonChooserOptions } from "./components/buttonChooser.js";
 export { buttonGroup, type ButtonGroupOptions } from "./components/buttonGroup.js";
 export { checkbox, type CheckboxOptions } from "./components/checkbox.js";
 export { form, type FormOptions } from "./components/form.js";
 export { main, closeNav, type MainOptions } from "./components/main.js";
-export { panels, type Page, type Routes, type RouteHandler, type RouteTable, type AncestorsHandler, type AncestorTable, type PathParams, type SegParams } from "./components/panels.js";
-export { menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, closeFloatingMenu, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions, type ContextMenuOptions } from "./components/menu.js";
+export { type PanelStack, type Panel, type Routes, type RouteHandler, type RouteTable, type AncestorsHandler, type AncestorTable, type PathParams, type SegParams } from "./components/panels.js";
+export { menu, menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, closeFloatingMenu, type MenuListOptions, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions, type ContextMenuOptions } from "./components/menu.js";
 export { dialog, alert, confirm, prompt, isDialogOpen, type DialogOptions } from "./components/dialog.js";
 export { select, type SelectOptions, type SelectOptionInput } from "./components/select.js";
-export { tabs, type Tab, type TabsOptions } from "./components/tabs.js";
+export { tabs, scrollStrip, revealInStrip, type Tab, type TabsOptions, type ScrollStripOptions } from "./components/tabs.js";
 export { textarea, type TextareaOptions } from "./components/textarea.js";
 export { textline, type TextlineOptions, type TextlineType } from "./components/textline.js";
 export { toast, type ToastOptions } from "./components/toast.js";

package/src/theme.ts

@@ -58,6 +58,18 @@ import A from "aberdeen";
  * ```
  */
 
+/**
+ * The surface sheen: the subtle single-colour wash every surface (and the page)
+ * is painted with, as a `background:` declaration. A shared constant rather
+ * than a CSS custom property, deliberately: `var()`s inside a custom property
+ * resolve where the property is *defined*, so a `--s-sheen` at `:root` would
+ * paint every surface with the page's wash instead of its own `$s-bg`'s. Also
+ * used by panels.ts, where the routed columns have to visually *be* the
+ * surface around them.
+ */
+export const SURFACE_SHEEN =
+	"background: linear-gradient(170deg, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%));";
+
 const STORAGE_KEY = "staffa:darkMode";
 
 /** The explicit dark-mode choice; `undefined` follows the OS via {@link A.darkMode}. */
@@ -221,8 +233,7 @@ A.insertGlobalCss({
 		"--s-faint: color-mix(in oklab, $s-text, $s-bg 80%); " +
 		"color:$s-text accent-color:$s-accent scrollbar-width:thin scrollbar-color: $s-faint transparent;",
 	// Subtle single-colour gradient sheen, painted on every surface (and the page).
-	".s-s, body":
-		"background: linear-gradient(170deg, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%));",
+	".s-s, body": SURFACE_SHEEN,
 	".s-s": "r:$s-radius",
 	// Neutral surfaces own a subtle hairline border (a card reads as a card without
 	// any component help). `:where()` keeps it zero-specificity, so a bar/panel that
@@ -263,7 +274,7 @@ A.insertGlobalCss({
 	// Specificity (4 classes) beats the 2-class variant rules — no !important.
 	".s-s:not(.neutral) .s-s.tonal, .s-s:not(.neutral) .s-s.outlined":
 		"--s-text:#fff --s-accent:#fff --s-link-fg:#fff " +
-		"background: linear-gradient(170deg, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%)); border-color: transparent;",
+		SURFACE_SHEEN + " border-color: transparent;",
 });
 
 // ── Suppress transitions during the initial load ─────────────────────────────

package/skill/Page.md

@@ -1,119 +0,0 @@
-## Page · interface
-
-What a route handler gets: the params from its route, plus everything the
-shell needs to know about the panel it is drawing. It's an Aberdeen proxy, so
-you can set things later, such as a `title` that arrives with your data or
-`loading` going back to `false`, and the shell keeps up.
-
-Search params and the `#hash` belong to the top panel only. A panel with
-another one on top of it keeps just its path, so anything a panel needs in
-order to redraw itself has to live in that path.
-
-**Type Parameters:**
-
-- `P = Record<string, string | number | string[]>`
-
-### page.params · member
-
-The params matched from this panel's path, typed per its route key:
-`[x]` is a `string`, `[x=integer]` a `number`, `[...x]` a `string`.
-Read-only.
-
-**Type:** `P`
-
-### page.path · member
-
-This panel's path, e.g. `"/projects/7"`. Read-only.
-
-**Type:** `string`
-
-### page.title · member
-
-Shown in `document.title` while this panel is top-most.
-
-**Type:** `string`
-
-### page.layout · member
-
-How much room this panel takes. The content area is the page, at most
-1280px wide, minus the nav sidebar; the widths below assume a sidebar of
-around 170px, so without one add that back.
-
-- `"small"` is 360 to 540px once two panels fit side by side, which is
-  what makes it right for lists, detail forms, and anything else that
-  reads well at phone width. Below that it takes the whole content area
-  (so up to ~730px), like a medium does. A lone small leaves its other
-  half empty, and that is exactly where the next small lands, without
-  anything on screen moving.
-- `"medium"` (the default) takes the whole content area: up to ~1100px,
-  and the screen width on a phone. The safe default for ordinary screens.
-  Nothing fits beside a medium on a standard 1280px page, though on a wide
-  enough window a small still can.
-- `"large"` takes the whole window, with no upper limit (~1750px on a
-  1920px screen): for boards, wide tables and dense dashboards. While it's
-  open the whole shell (top bar, content and footer) stretches to the
-  screen edges rather than stopping at 1280px.
-
-When more columns fit than the standard page holds (three smalls, or a
-medium and a small) the page itself grows, staying centred, to hold them.
-
-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.
-
-The panel is sized from this **before** your handler runs, so anything that
-measures its own box has a real one from the first frame. What it is sized
-at is whatever this says at that moment, which for a brand-new panel is the
-default: a handler that *assigns* `layout` is drawn at the medium width and
-reflowed immediately after — in time for the frame, but not for a
-measurement taken in the same breath.
-
-Assigning it later works just as well. When your data arrives and you find
-you want the wide one, 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.
-
-**Type:** `"small" | "medium" | "large"`
-
-### page.loading · member
-
-Set this while you're fetching what the panel needs, and back to `false`
-when you're done. A new panel waits a moment before sliding in, so it can
-arrive with real content instead of empty; if the wait drags on it slides
-in anyway and shows a loading indicator until the flag clears. It only
-affects the animation; the stack, the URL and `requestClose` never wait
-for it.
-
-**Type:** `boolean`
-
-### page.requestClose · member
-
-Your chance to say no. Everything that would close this panel waits for
-it: Escape, the panel's own ✕ or Cancel button (`Page.close`, or a
-box with `close: true`), the browser's back button, a link that would
-close it, and `panels`.`close()`. Return `false` to keep the panel
-open, usually after a dirty check and a `confirm`.
-
-**Type:** `() => boolean | Promise<boolean>`
-
-### page.close · member
-
-Closes **this** panel, wherever it sits in the stack. The top panel goes
-back to whatever was underneath it; any other panel is taken out on its
-own, leaving the columns to its right where they are, with their state,
-and the URL alone, since the top panel didn't move. Either way it
-becomes a history entry, so the browser's back button brings it back.
-
-Resolves `false` if the panel didn't close: `Page.requestClose` said
-no, it was the only panel on the stack (so there's nothing to go back to),
-or another navigation got there first. The shell draws no back arrows or
-✕ of its own, so this (or `S.box`'s `close` option) is how a panel gives
-the user a way out.
-
-**Type:** `() => Promise<boolean>`
-
-**Examples:**
-
-```ts
-S.button({ content: "Cancel", attrs: ".neutral", click: () => void $page.close() });
-```

package/skill/panels.md

@@ -1,10 +0,0 @@
-## panels · constant
-
-Navigating the routed `S.main()` shell from code, for the times it isn't a
-link click, such as opening the screen for a record you just created.
-
-The same rules as a link click apply: pushing a path that is already open
-goes back to it rather than opening it twice, and anything that would close a
-panel asks its `Page.requestClose` first.
-
-**Value:** `{ push(path: string): void; replace(path: string): void; open(path: string, beneath?: readonly string[]): void; close(path?: string): Promise<boolean>; readonly stack: readonly string[]; }`