@parallelworks/ui 0.93.0 → 0.94.1

package/README.md

@@ -228,6 +228,14 @@ A page declares its header in one place, and the shell shows it:
   such as a log's follow and refresh: its buttons are outlined, and `primary`
   fills the one, if any, the panel leads to.
   **`toolbar`** is a row under the bar, such as tabs or a time range.
+- A list's controls may sit in **`actions`**: a `ListToolbar` there, with its
+  filter, display options and search, leaves the list's count under its rows.
+  Where its search field, opened, wouldn't fit beside the trail, as on a phone,
+  the open search takes the whole bar until it closes; the rest of the bar
+  stays as it was underneath, hidden and `inert`, and focus returns to the
+  search button. While a search term narrows the list with the field closed,
+  the button shows a dot and its name says so (`searchActive`). Nothing to set
+  up: the bar measures it.
 - **`hidden`** takes the bar away while the page is mounted, for a page that
   fills the window.
 
@@ -1318,3 +1326,20 @@ link; put page content inside it without nesting a second `<main>`.
 Frame styles use the `pw-ui` cascade layer. Put broad host element defaults
 (such as anchor colors and scrollbar styling) in a lower-priority layer declared
 before the package styles, so they do not replace navigation states.
+
+Applications that supply their own navigation items can load only the layout:
+
+```tsx
+import { AppFrame, AppFrameToggle } from '@parallelworks/ui/app-frame'
+import '@parallelworks/ui/app-frame/layout.css'
+```
+
+This includes the sidebar, scrolling regions, resize handle, mobile drawer,
+toggle and close buttons, focus indicators, and skip link. Style custom navigation
+items in the host, including their selected, hover, rail, and mobile states.
+
+When using `AppFrameNavItem`, also import
+`@parallelworks/ui/app-frame/navigation.css`. The existing
+`@parallelworks/ui/app-frame.css` import includes both stylesheets and continues
+to work without changes. Use either the combined import or the two separate
+imports; there is no need to load both forms.

package/dist/app-frame/app-frame.css

@@ -60,66 +60,6 @@
     flex-shrink: 0;
     padding: 8px 12px;
   }
-  .pw-frame-nav-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-height: 36px;
-    min-width: 0;
-    width: 100%;
-    border: 0;
-    border-radius: 8px;
-    padding: 8px;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    cursor: pointer;
-    text-decoration: none;
-    text-align: start;
-    transition: background-color 150ms ease-out;
-  }
-  .pw-frame-nav-item:hover,
-  .pw-frame-toggle:hover {
-    background: var(--theme-sidebar-hover, var(--theme-hover));
-  }
-  .pw-frame-nav-item[aria-current] {
-    background: var(--theme-sidebar-active-bg, var(--theme-accent-subtle));
-    color: var(--theme-sidebar-active-text, var(--theme-accent));
-  }
-  .pw-frame-nav-item:is(:disabled, [aria-disabled]) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  .pw-frame-nav-icon {
-    display: flex;
-    flex: 0 0 18px;
-    align-items: center;
-    justify-content: center;
-  }
-  .pw-frame-nav-icon svg {
-    width: 18px;
-    height: 18px;
-  }
-  .pw-frame-nav-label {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .pw-frame-nav-badge {
-    flex-shrink: 0;
-    font-size: 12px;
-    font-variant-numeric: tabular-nums;
-  }
-  [data-sidebar-mode="rail"] .pw-frame-nav-item {
-    padding-inline: 0;
-    justify-content: center;
-    height: 40px;
-  }
   .pw-frame-toggle {
     display: inline-flex;
     align-items: center;
@@ -134,6 +74,9 @@
     cursor: pointer;
     flex-shrink: 0;
   }
+  .pw-frame-toggle:hover {
+    background: var(--theme-sidebar-hover, var(--theme-hover));
+  }
   .pw-frame-toggle svg {
     width: 18px;
     height: 18px;
@@ -249,7 +192,6 @@
   .pw-frame-drawer .pw-frame-brand {
     padding-top: 0;
   }
-  .pw-frame-drawer .pw-frame-nav-item,
   .pw-app-frame[data-mobile] .pw-frame-toggle {
     min-height: 44px;
   }
@@ -273,7 +215,75 @@
   @media (prefers-reduced-motion: reduce) {
     .pw-frame-sidebar,
     .pw-frame-backdrop,
-    .pw-frame-drawer,
+    .pw-frame-drawer {
+      transition: none;
+    }
+  }
+}
+@layer pw-ui {
+  .pw-frame-nav-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 36px;
+    min-width: 0;
+    width: 100%;
+    border: 0;
+    border-radius: 8px;
+    padding: 8px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    cursor: pointer;
+    text-decoration: none;
+    text-align: start;
+    transition: background-color 150ms ease-out;
+  }
+  .pw-frame-nav-item:hover {
+    background: var(--theme-sidebar-hover, var(--theme-hover));
+  }
+  .pw-frame-nav-item[aria-current] {
+    background: var(--theme-sidebar-active-bg, var(--theme-accent-subtle));
+    color: var(--theme-sidebar-active-text, var(--theme-accent));
+  }
+  .pw-frame-nav-item:is(:disabled, [aria-disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .pw-frame-nav-icon {
+    display: flex;
+    flex: 0 0 18px;
+    align-items: center;
+    justify-content: center;
+  }
+  .pw-frame-nav-icon svg {
+    width: 18px;
+    height: 18px;
+  }
+  .pw-frame-nav-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .pw-frame-nav-badge {
+    flex-shrink: 0;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+  [data-sidebar-mode="rail"] .pw-frame-nav-item {
+    padding-inline: 0;
+    justify-content: center;
+    height: 40px;
+  }
+  .pw-frame-drawer .pw-frame-nav-item {
+    min-height: 44px;
+  }
+  @media (prefers-reduced-motion: reduce) {
     .pw-frame-nav-item {
       transition: none;
     }

package/dist/app-frame/layout.css

@@ -0,0 +1,222 @@
+@layer pw-ui {
+  /* The frame uses the same sidebar tokens as the theme generator. */
+  .pw-app-frame {
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+    min-height: 0;
+    isolation: isolate;
+    background: var(--theme-sidebar-bg, var(--theme-muted-panel-bg));
+    color: var(--theme-app);
+  }
+  .pw-frame-body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    overflow: hidden;
+  }
+  .pw-frame-sidebar,
+  .pw-frame-drawer {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    min-height: 0;
+    background: var(--theme-sidebar-bg, var(--theme-muted-panel-bg));
+    color: var(--theme-sidebar-text, var(--theme-app));
+  }
+  .pw-frame-sidebar {
+    position: relative;
+    transition: width 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+  .pw-frame-sidebar[data-resizing] {
+    transition: none;
+    user-select: none;
+  }
+  .pw-frame-brand {
+    padding: 12px 12px 4px;
+    flex-shrink: 0;
+    min-width: 0;
+    overflow: hidden;
+  }
+  .pw-frame-links {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 12px;
+    min-width: 0;
+    min-height: 0;
+    scrollbar-width: none;
+  }
+  .pw-frame-links::-webkit-scrollbar {
+    display: none;
+  }
+  .pw-frame-links nav {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 4px;
+  }
+  .pw-frame-footer {
+    flex-shrink: 0;
+    padding: 8px 12px;
+  }
+  .pw-frame-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: 0;
+    border-radius: 8px;
+    padding: 0;
+    color: inherit;
+    background: transparent;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .pw-frame-toggle:hover {
+    background: var(--theme-sidebar-hover, var(--theme-hover));
+  }
+  .pw-frame-toggle svg {
+    width: 18px;
+    height: 18px;
+  }
+  .pw-frame-sidebar :focus-visible,
+  .pw-frame-drawer :focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+  .pw-frame-resize {
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    inset-inline-end: -4px;
+    width: 8px;
+    cursor: col-resize;
+    touch-action: none;
+  }
+  .pw-frame-resize::after {
+    content: "";
+    position: absolute;
+    inset-block: 8px;
+    inset-inline-start: 3px;
+    width: 2px;
+    border-radius: 2px;
+  }
+  .pw-frame-resize:hover::after,
+  .pw-frame-resize:focus-visible::after {
+    background: var(--theme-sidebar-text, var(--theme-accent));
+    opacity: 0.5;
+  }
+  .pw-frame-surface-wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    padding: 8px;
+    padding-inline-start: 0;
+  }
+  .pw-frame-surface {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    isolation: isolate;
+    border: 1px solid var(--theme-border);
+    border-radius: 12px;
+    background: var(--theme-app-bg);
+    background-clip: padding-box;
+  }
+  .pw-frame-header,
+  .pw-frame-banner {
+    flex-shrink: 0;
+  }
+  .pw-frame-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+  .pw-app-frame[data-full-bleed] .pw-frame-surface-wrap {
+    padding: 0;
+  }
+  .pw-app-frame[data-full-bleed] .pw-frame-surface {
+    border: 0;
+    border-radius: 0;
+  }
+  .pw-app-frame[data-mobile] .pw-frame-surface-wrap {
+    padding: 8px;
+  }
+  .pw-app-frame[data-mobile][data-full-bleed] .pw-frame-surface-wrap {
+    padding: 0;
+  }
+  .pw-frame-backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: var(--layer-drawer, 1100);
+    background: var(--theme-backdrop, rgb(0 0 0 / 0.35));
+    transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+  .pw-frame-backdrop[data-starting-style],
+  .pw-frame-backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  .pw-frame-drawer {
+    position: absolute;
+    inset-block: 8px;
+    inset-inline-start: 8px;
+    max-width: calc(100% - 48px);
+    z-index: var(--layer-drawer, 1100);
+    border-radius: 12px;
+    box-shadow: 0 12px 32px rgb(0 0 0 / 0.2);
+    outline: none;
+    transform: translateX(0);
+    transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+  .pw-frame-drawer[data-starting-style],
+  .pw-frame-drawer[data-ending-style] {
+    transform: translateX(calc(-100% - 16px));
+  }
+  .pw-frame-drawer:dir(rtl)[data-starting-style],
+  .pw-frame-drawer:dir(rtl)[data-ending-style] {
+    transform: translateX(calc(100% + 16px));
+  }
+  .pw-frame-mobile-close {
+    display: flex;
+    justify-content: flex-end;
+    padding: 4px 4px 0;
+  }
+  .pw-frame-drawer .pw-frame-brand {
+    padding-top: 0;
+  }
+  .pw-app-frame[data-mobile] .pw-frame-toggle {
+    min-height: 44px;
+  }
+  .pw-app-frame[data-mobile] .pw-frame-toggle {
+    width: 44px;
+    height: 44px;
+  }
+  .pw-frame-skip {
+    position: fixed;
+    inset-block-start: -100px;
+    inset-inline-start: 8px;
+    padding: 8px 16px;
+    border-radius: 6px;
+    background: var(--theme-panel-bg);
+    color: var(--theme-app);
+    z-index: var(--layer-popover, 1400);
+  }
+  .pw-frame-skip:focus {
+    inset-block-start: 8px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pw-frame-sidebar,
+    .pw-frame-backdrop,
+    .pw-frame-drawer {
+      transition: none;
+    }
+  }
+}

package/dist/app-frame/navigation.css

@@ -0,0 +1,69 @@
+@layer pw-ui {
+  .pw-frame-nav-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 36px;
+    min-width: 0;
+    width: 100%;
+    border: 0;
+    border-radius: 8px;
+    padding: 8px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    cursor: pointer;
+    text-decoration: none;
+    text-align: start;
+    transition: background-color 150ms ease-out;
+  }
+  .pw-frame-nav-item:hover {
+    background: var(--theme-sidebar-hover, var(--theme-hover));
+  }
+  .pw-frame-nav-item[aria-current] {
+    background: var(--theme-sidebar-active-bg, var(--theme-accent-subtle));
+    color: var(--theme-sidebar-active-text, var(--theme-accent));
+  }
+  .pw-frame-nav-item:is(:disabled, [aria-disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .pw-frame-nav-icon {
+    display: flex;
+    flex: 0 0 18px;
+    align-items: center;
+    justify-content: center;
+  }
+  .pw-frame-nav-icon svg {
+    width: 18px;
+    height: 18px;
+  }
+  .pw-frame-nav-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .pw-frame-nav-badge {
+    flex-shrink: 0;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+  [data-sidebar-mode="rail"] .pw-frame-nav-item {
+    padding-inline: 0;
+    justify-content: center;
+    height: 40px;
+  }
+  .pw-frame-drawer .pw-frame-nav-item {
+    min-height: 44px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pw-frame-nav-item {
+      transition: none;
+    }
+  }
+}

package/dist/components/PageHeader.js

@@ -151,47 +151,62 @@ function HeaderLayout({ breadcrumbs, heading, titleActions, actions, toolbar, fi
 	const [row, setRow] = useState(null);
 	const [lead, setLead] = useState(null);
 	const [end, setEnd] = useState(null);
+	const [cover, setCover] = useState(null);
 	useActionsFit(fit, row, lead, end);
+	useLayoutEffect(() => {
+		fit.setCoverNode(cover);
+		return () => fit.setCoverNode(null);
+	}, [fit, cover]);
 	useSyncExternalStore(fit.subscribe, fit.getVersion, fit.getVersion);
 	const moved = fit.menu();
 	const hasTrail = breadcrumbs.length > 0;
+	const covered = fit.isCovered();
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("@container w-full shrink-0", !inPlace && "bg-(--theme-app-bg)", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			ref: setRow,
-			className: cx("flex items-center justify-between gap-4 border-b border-(--theme-border) px-4", compact ? "h-8" : "h-12"),
-			children: [/* @__PURE__ */ jsxs("div", {
-				ref: setLead,
-				className: "flex min-w-0 flex-1 items-center gap-2",
-				children: [
-					navToggle?.(),
-					hasTrail && /* @__PURE__ */ jsx(Breadcrumbs, {
-						crumbs: breadcrumbs,
-						heading
-					}),
-					present(titleActions) && /* @__PURE__ */ jsx("div", {
-						className: "flex shrink-0 items-center gap-0.5",
-						children: titleActions
-					}),
-					hasTrail && breadcrumbPin?.({ crumbs: breadcrumbs })
-				]
-			}), present(actions) && /* @__PURE__ */ jsxs("div", {
-				ref: setEnd,
-				className: "flex shrink-0 items-center gap-1",
-				children: [/* @__PURE__ */ jsx(HeaderActionsFitContext, {
-					value: fit,
-					children: actions
-				}), moved.length > 0 && /* @__PURE__ */ jsx(ActionMenu, {
-					items: moved,
-					label: t.moreActions,
-					triggerClassName: buttonClasses({
-						variant: "ghost",
-						size: "xs",
-						iconOnly: true
-					}),
-					children: /* @__PURE__ */ jsx(MoreIcon, {})
-				})]
-			})]
+			className: cx("relative flex items-center justify-between gap-4 border-b border-(--theme-border) px-4", compact ? "h-8" : "h-12"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					ref: setLead,
+					inert: covered,
+					className: cx("flex min-w-0 flex-1 items-center gap-2", covered && "invisible"),
+					children: [
+						navToggle?.(),
+						hasTrail && /* @__PURE__ */ jsx(Breadcrumbs, {
+							crumbs: breadcrumbs,
+							heading
+						}),
+						present(titleActions) && /* @__PURE__ */ jsx("div", {
+							className: "flex shrink-0 items-center gap-0.5",
+							children: titleActions
+						}),
+						hasTrail && breadcrumbPin?.({ crumbs: breadcrumbs })
+					]
+				}),
+				present(actions) && /* @__PURE__ */ jsxs("div", {
+					ref: setEnd,
+					inert: covered,
+					className: cx("flex shrink-0 items-center gap-1", covered && "invisible"),
+					children: [/* @__PURE__ */ jsx(HeaderActionsFitContext, {
+						value: fit,
+						children: actions
+					}), moved.length > 0 && /* @__PURE__ */ jsx(ActionMenu, {
+						items: moved,
+						label: t.moreActions,
+						triggerClassName: buttonClasses({
+							variant: "ghost",
+							size: "xs",
+							iconOnly: true
+						}),
+						children: /* @__PURE__ */ jsx(MoreIcon, {})
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: setCover,
+					className: "pointer-events-none absolute inset-0 flex items-center px-4"
+				})
+			]
 		}), present(toolbar) && /* @__PURE__ */ jsx("div", {
 			className: "px-4",
 			children: toolbar
@@ -243,10 +258,13 @@ function useActionsFit(fit, row, lead, end) {
 			}
 			leadMin += Math.max(0, leadItems - 1) * LEAD_GAP;
 			const room = rowWidth - Number.parseFloat(style.paddingLeft || "0") - Number.parseFloat(style.paddingRight || "0") - leadMin - ROW_GAP;
+			const shown = end.getBoundingClientRect().width;
+			const moved = items.filter((id) => fit.isOverflowed(id));
 			fit.setOverflow(overflowingActions(items.map((id) => ({
 				id,
 				width: width(id)
-			})), end.getBoundingClientRect().width, items.filter((id) => fit.isOverflowed(id)), room));
+			})), shown, moved, room));
+			fit.setSearchCovers(searchCovers(end, items, moved, width, shown, room));
 		};
 		measure();
 		const resize = new ResizeObserver(measure);
@@ -270,5 +288,23 @@ function useActionsFit(fit, row, lead, end) {
 		widths
 	]);
 }
+var SEARCH_FIELD_WIDTH = 288;
+/**
+* Whether a search in the actions, opened in place, would leave the trail too little room even
+* with every action in the "…" menu, so it takes the whole bar instead. It works from the
+* actions' width as they are now, whether the search shows as its button or its field, so the
+* answer is the same either way.
+*/
+function searchCovers(end, items, moved, width, shown, room) {
+	const control = end.querySelector("[data-header-search]")?.firstElementChild;
+	if (!control) return false;
+	let least = shown - control.getBoundingClientRect().width + SEARCH_FIELD_WIDTH;
+	const still = items.filter((id) => !moved.includes(id));
+	if (still.length > 0) {
+		least -= still.reduce((sum, id) => sum + width(id) + 4, 0);
+		if (moved.length === 0) least += 28;
+	}
+	return least > room + .5;
+}
 //#endregion
 export { PageHeader, PageHeaderBar, PageHeaderProvider };

package/dist/components/Provider.d.ts

@@ -653,6 +653,8 @@ export interface UIStrings {
         /** Where the page sits, for `Pagination` too narrow for page numbers: it shows "5 / 12". */
         pageOfTotal: (page: number, total: number) => string;
         removeSearchTerm: (term: string) => string;
+        /** The search button's name while a query it holds narrows the list, its field closed. */
+        searchActive: (label: string) => string;
     };
     /** The chip row of a list's active filters, its Filter menu and its pickers. Field and option
      *  labels come from the host's fields, already translated. */

package/dist/components/Provider.js

@@ -634,7 +634,8 @@ var DEFAULTS = {
 			pagination: "Pagination",
 			page: (page) => `Page ${page}`,
 			pageOfTotal: (page, total) => `Page ${page} of ${total}`,
-			removeSearchTerm: (term) => `Remove filter ${term}`
+			removeSearchTerm: (term) => `Remove filter ${term}`,
+			searchActive: (label) => `${label}, on`
 		},
 		filters: {
 			addFilter: "Filter",

package/dist/components/headerActionsFit.d.ts

@@ -9,6 +9,9 @@ import type { MenuEntry } from './MenuEntries.js';
 export declare class HeaderActionsFit {
     private entries;
     private overflow;
+    private covers;
+    private cover;
+    private coverers;
     private version;
     private listeners;
     subscribe: (listener: () => void) => (() => void);
@@ -20,11 +23,23 @@ export declare class HeaderActionsFit {
     /** The moved actions' rows, in the bar's order. */
     menu(): MenuEntry[];
     setOverflow(ids: readonly string[]): void;
+    /** Whether an open search would take the whole bar: its field, opened in place, wouldn't fit
+     *  beside the trail even with every action in the "…" menu. The bar measures it. */
+    searchCovers(): boolean;
+    setSearchCovers(covers: boolean): void;
+    /** Where a search that takes the bar renders its field: a layer over the bar's row. */
+    coverNode(): HTMLElement | null;
+    setCoverNode(node: HTMLElement | null): void;
+    /** Whether a search has the bar now, so the bar hides and disables what it covers. */
+    isCovered(): boolean;
+    setCovering(id: string, covering: boolean): void;
     private changed;
 }
 /** Set around the header's `actions`, so the actions there can move into its
  *  menu; title actions sit beside the title and never do. */
 export declare const HeaderActionsFitContext: import("react").Context<HeaderActionsFit | null>;
+export declare const ACTION_GAP = 4;
+export declare const MENU_BUTTON_WIDTH = 24;
 /**
  * The trailing actions to move into the "…" menu so the rest fit in `room`
  * pixels, last first, or none when everything fits. `shown` is the actions'

package/dist/components/headerActionsFit.js

@@ -10,6 +10,9 @@ import { createContext } from "react";
 var HeaderActionsFit = class {
 	entries = /* @__PURE__ */ new Map();
 	overflow = [];
+	covers = false;
+	cover = null;
+	coverers = /* @__PURE__ */ new Set();
 	version = 0;
 	listeners = /* @__PURE__ */ new Set();
 	subscribe = (listener) => {
@@ -46,6 +49,37 @@ var HeaderActionsFit = class {
 		this.overflow = ids;
 		this.changed();
 	}
+	/** Whether an open search would take the whole bar: its field, opened in place, wouldn't fit
+	*  beside the trail even with every action in the "…" menu. The bar measures it. */
+	searchCovers() {
+		return this.covers;
+	}
+	setSearchCovers(covers) {
+		if (covers !== this.covers) {
+			this.covers = covers;
+			this.changed();
+		}
+	}
+	/** Where a search that takes the bar renders its field: a layer over the bar's row. */
+	coverNode() {
+		return this.cover;
+	}
+	setCoverNode(node) {
+		if (node !== this.cover) {
+			this.cover = node;
+			this.changed();
+		}
+	}
+	/** Whether a search has the bar now, so the bar hides and disables what it covers. */
+	isCovered() {
+		return this.coverers.size > 0;
+	}
+	setCovering(id, covering) {
+		if (covering === this.coverers.has(id)) return;
+		if (covering) this.coverers.add(id);
+		else this.coverers.delete(id);
+		this.changed();
+	}
 	changed() {
 		this.version++;
 		for (const listener of this.listeners) listener();
@@ -54,7 +88,6 @@ var HeaderActionsFit = class {
 /** Set around the header's `actions`, so the actions there can move into its
 *  menu; title actions sit beside the title and never do. */
 var HeaderActionsFitContext = createContext(null);
-var ACTION_GAP = 4;
 /**
 * The trailing actions to move into the "…" menu so the rest fit in `room`
 * pixels, last first, or none when everything fits. `shown` is the actions'
@@ -65,14 +98,14 @@ function overflowingActions(items, shown, moved, room) {
 	const width = new Map(items.map((item) => [item.id, item.width]));
 	let total = shown;
 	if (moved.length > 0) {
-		total += moved.reduce((sum, id) => sum + (width.get(id) ?? 0) + ACTION_GAP, 0);
+		total += moved.reduce((sum, id) => sum + (width.get(id) ?? 0) + 4, 0);
 		total -= 28;
 	}
 	const next = [];
 	for (let i = items.length - 1; i >= 0 && total > room + .5; i--) {
 		const item = items[i];
 		if (next.length === 0) total += 28;
-		total -= item.width + ACTION_GAP;
+		total -= item.width + 4;
 		next.unshift(item.id);
 	}
 	return next;

package/dist/list/ListPage.js

@@ -5,7 +5,7 @@ import { useNavigation } from "../components/Provider.js";
 import { AppLink, isPlainClick } from "../components/AppLink.js";
 import { isMenuDivider, isMenuGroup, isMenuSubmenu, useRunAction, warnIfInert } from "../components/MenuEntries.js";
 import { CellPlacementContext, STACKED_ITEM, Table, hasContent } from "../components/Table.js";
-import { ListCountText, ListFooterCountContext } from "./listSearch.js";
+import { ListCountStatus, ListFooterCountContext } from "./listSearch.js";
 import { ListFilterBar } from "./ListFilterBar.js";
 import { ListActionsHeader, ListError, ListSkeleton, StretchRowLinkContext } from "./ListTable.js";
 import { ListToolbar, toolbarCount } from "./ListToolbar.js";
@@ -69,7 +69,8 @@ function ListPage({ bleed = false, toolbar, filterBar, view, loading = false, er
 		nounPlural: count.nounPlural
 	} : fromToolbar;
 	const showsRows = !loading && !failed && !isEmpty && !noneMatch && (!counted || counted.matches > 0);
-	const footerCount = showsRows ? counted : void 0;
+	const countable = !!count || fromToolbar !== void 0;
+	const spokenCount = loading || failed ? void 0 : counted;
 	const shareLine = counted !== void 0 && !!toolbar && isValidElement(givenBar) && givenBar.type === ListFilterBar;
 	const bar = shareLine ? cloneElement(givenBar, { end: toolbar }) : givenBar;
 	let body = children;
@@ -102,18 +103,21 @@ function ListPage({ bleed = false, toolbar, filterBar, view, loading = false, er
 			children: [/* @__PURE__ */ jsx(ListRowActionsProvider, {
 				view,
 				children: body
-			}), (footerCount || showsRows && !!pager) && /* @__PURE__ */ jsx(ListFooter, {
-				count: footerCount,
-				pager
+			}), (countable || showsRows && !!pager) && /* @__PURE__ */ jsx(ListFooter, {
+				count: spokenCount,
+				countable,
+				pager: showsRows ? pager : null,
+				shown: showsRows && (counted !== void 0 || !!pager)
 			})]
 		})]
 	});
 }
-/** The line under a list's last row: its count at the rows' start, its pager at their end. */
-function ListFooter({ count, pager }) {
+/** The line under a list's last row: its count at the rows' start, its pager at their end. With no
+*  rows to show, only a screen reader finds it, so the count's status stays mounted. */
+function ListFooter({ count, countable, pager, shown }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-10 flex-wrap items-center gap-x-3 px-4 empty:hidden [&>:not([role=status])]:ml-auto [&>nav]:flex-1 [&>nav]:px-0 [&>nav>div:first-child]:justify-end",
-		children: [count && /* @__PURE__ */ jsx(ListCountText, { ...count }), pager]
+		className: shown ? "flex min-h-10 flex-wrap items-center gap-x-3 px-4 empty:hidden [&>:not([role=status])]:ml-auto [&>nav]:flex-1 [&>nav]:px-0 [&>nav>div:first-child]:justify-end" : "sr-only",
+		children: [countable && /* @__PURE__ */ jsx(ListCountStatus, { count }), pager]
 	});
 }
 var STACKED = { stacked: true };

package/dist/list/listSearch.d.ts

@@ -35,7 +35,14 @@ export declare const ListFooterCountContext: import("react").Context<boolean>;
 export declare const ListToolbarInlineContext: import("react").Context<boolean>;
 /** The count's words, "7 tokens" or "2 of 7 tokens", as a status so a screen reader hears the
  *  count change as a filter narrows it. */
-export declare function ListCountText({ total, matches, filterActive, noun, nounPlural }: ListCountProps): import("react").JSX.Element;
+export declare function ListCountText(props: ListCountProps): import("react").JSX.Element;
+/** A list's count as a status that can say nothing yet: kept mounted while its text is empty, so
+ *  a screen reader hears the count when it arrives, as it would not from a status that mounts
+ *  with its text already in. */
+export declare function ListCountStatus({ count, className, }: {
+    count: ListCountProps | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;
 /** A list's count, placed by hand.
  *  @deprecated Give `ListPage` a `count` instead (with its `total` and `matches`): it shows the
  *  count under the last row, beside a `pager`, and hides it while the list shows its empty or

package/dist/list/listSearch.js

@@ -1,12 +1,15 @@
+import { cx } from "../cx.js";
 import { buttonClasses } from "../components/buttonClasses.js";
 import { CloseIcon, RemoveIcon, SearchIcon } from "../icons.js";
 import { ariaKeyShortcuts } from "../components/Kbd.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useLocale, usePersistedState, useStrings } from "../components/Provider.js";
 import { isTextEntryContext } from "../components/shortcutKey.js";
+import { HeaderActionsFitContext } from "../components/headerActionsFit.js";
 import { formatInteger } from "../format.js";
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
 //#region src/list/listSearch.tsx
 var NO_TERMS = [];
 /** Pass `enabled: false` to suspend the global ⌘F/`/` hijack (e.g. when search isn't shown and browser Find should stay active). */
@@ -69,67 +72,149 @@ function useListSearch(enabled = true, storageKey) {
 function ListSearchControl({ search, placeholder, label: labelProp }) {
 	const { common, list } = useStrings();
 	const label = labelProp ?? common.search;
-	if (search.searchOpen || search.terms.length > 0) return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-7 w-72 max-w-[55vw] flex-wrap items-center gap-1.5 rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-0.5",
-		children: [
-			/* @__PURE__ */ jsx(SearchIcon, { className: "w-3.5 h-3.5 shrink-0 text-(--theme-muted-text-color)" }),
-			search.terms.map((term) => /* @__PURE__ */ jsxs("span", {
-				className: "flex max-w-40 items-center gap-1 rounded border border-(--theme-border) bg-(--theme-app-bg) px-1.5 py-px text-[12px] text-(--theme-app)",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: term
-				}), /* @__PURE__ */ jsx("button", {
+	const fit = use(HeaderActionsFitContext);
+	useSyncExternalStore(fit?.subscribe ?? subscribeNever, fit?.getVersion ?? zero, zero);
+	const covers = fit?.searchCovers() ?? false;
+	const coverNode = fit?.coverNode() ?? null;
+	const covering = covers && search.searchOpen && coverNode !== null;
+	const field = covering || !covers && (search.searchOpen || search.terms.length > 0);
+	const active = search.terms.length > 0 || search.filter.trim() !== "";
+	const id = useId();
+	useLayoutEffect(() => {
+		fit?.setCovering(id, covering);
+	}, [
+		fit,
+		id,
+		covering
+	]);
+	useLayoutEffect(() => fit ? () => fit.setCovering(id, false) : void 0, [fit, id]);
+	const button = useRef(null);
+	const returnFocus = useRef(false);
+	useLayoutEffect(() => {
+		if (!field && returnFocus.current) {
+			returnFocus.current = false;
+			queueMicrotask(() => button.current?.focus());
+		}
+	});
+	const { inputRef, searchOpen } = search;
+	const wasCovering = useRef(covering);
+	useLayoutEffect(() => {
+		if (wasCovering.current === covering) return;
+		wasCovering.current = covering;
+		if (!searchOpen) return;
+		queueMicrotask(() => {
+			const focused = document.activeElement;
+			if (!focused || focused === document.body || coverNode?.parentElement?.contains(focused)) inputRef.current?.focus();
+		});
+	});
+	if (field) {
+		const close = () => {
+			returnFocus.current = true;
+			search.clearSearch();
+		};
+		const closeOnEscape = (e) => {
+			if (e.key === "Escape" && search.searchOpen) {
+				e.preventDefault();
+				returnFocus.current = covering || search.terms.length === 0;
+				search.closeSearch();
+				return true;
+			}
+			return false;
+		};
+		const box = /* @__PURE__ */ jsxs("div", {
+			className: cx("flex flex-wrap items-center gap-1.5 rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-0.5", covering ? "pointer-events-auto min-h-8 w-full" : "min-h-7 w-72 max-w-[55vw]"),
+			children: [
+				/* @__PURE__ */ jsx(SearchIcon, { className: "w-3.5 h-3.5 shrink-0 text-(--theme-muted-text-color)" }),
+				search.terms.map((term) => /* @__PURE__ */ jsxs("span", {
+					className: "flex max-w-40 items-center gap-1 rounded border border-(--theme-border) bg-(--theme-app-bg) px-1.5 py-px text-[12px] text-(--theme-app)",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: term
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => search.removeTerm(term),
+						"aria-label": list.removeSearchTerm(term),
+						className: "shrink-0 rounded p-0.5 text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
+						children: /* @__PURE__ */ jsx(RemoveIcon, { className: "w-2.5 h-2.5" })
+					})]
+				}, term)),
+				/* @__PURE__ */ jsx("input", {
+					ref: search.inputRef,
+					value: search.filter,
+					onChange: (e) => search.setFilter(e.target.value),
+					onFocus: search.openSearch,
+					"aria-label": label,
+					onKeyDown: (e) => {
+						if (closeOnEscape(e)) return;
+						if (e.key === "Enter") {
+							e.preventDefault();
+							search.addTerm(search.filter);
+						} else if (e.key === "Backspace" && !search.filter) {
+							const lastTerm = search.terms.at(-1);
+							if (lastTerm) search.removeTerm(lastTerm);
+						}
+					},
+					placeholder,
+					className: "min-w-24 flex-1 bg-transparent text-[13px] text-(--theme-app) placeholder:text-(--theme-placeholder) focus:outline-none"
+				}),
+				/* @__PURE__ */ jsx("button", {
 					type: "button",
-					onClick: () => search.removeTerm(term),
-					"aria-label": list.removeSearchTerm(term),
-					className: "shrink-0 rounded p-0.5 text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
-					children: /* @__PURE__ */ jsx(RemoveIcon, { className: "w-2.5 h-2.5" })
-				})]
-			}, term)),
-			/* @__PURE__ */ jsx("input", {
-				ref: search.inputRef,
-				value: search.filter,
-				onChange: (e) => search.setFilter(e.target.value),
-				onFocus: search.openSearch,
-				"aria-label": label,
-				onKeyDown: (e) => {
-					if (e.key === "Escape" && search.searchOpen) {
-						e.preventDefault();
-						search.closeSearch();
-					} else if (e.key === "Enter") {
-						e.preventDefault();
-						search.addTerm(search.filter);
-					} else if (e.key === "Backspace" && !search.filter) {
-						const lastTerm = search.terms.at(-1);
-						if (lastTerm) search.removeTerm(lastTerm);
-					}
-				},
-				placeholder,
-				className: "min-w-24 flex-1 bg-transparent text-[13px] text-(--theme-app) placeholder:text-(--theme-placeholder) focus:outline-none"
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: search.clearSearch,
-				"aria-label": common.clearSearch,
-				className: "shrink-0 rounded p-0.5 text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
-				children: /* @__PURE__ */ jsx(CloseIcon, { className: "w-3 h-3" })
+					onClick: close,
+					onKeyDown: closeOnEscape,
+					"aria-label": common.clearSearch,
+					className: cx("shrink-0 rounded text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors", covering ? "-me-1 inline-flex size-6 items-center justify-center" : "p-0.5"),
+					children: /* @__PURE__ */ jsx(CloseIcon, { className: "w-3 h-3" })
+				})
+			]
+		});
+		if (covering && coverNode) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			"data-header-search": "",
+			className: "contents",
+			children: /* @__PURE__ */ jsx(SearchButton, {
+				label,
+				name: active ? list.searchActive(label) : label,
+				active,
+				onOpen: search.openSearch
 			})
-		]
+		}), createPortal(box, coverNode)] });
+		return fit ? /* @__PURE__ */ jsx("span", {
+			"data-header-search": "",
+			className: "contents",
+			children: box
+		}) : box;
+	}
+	const control = /* @__PURE__ */ jsx(SearchButton, {
+		ref: button,
+		label,
+		name: active ? list.searchActive(label) : label,
+		active,
+		onOpen: search.openSearch
 	});
+	return fit ? /* @__PURE__ */ jsx("span", {
+		"data-header-search": "",
+		className: "contents",
+		children: control
+	}) : control;
+}
+var subscribeNever = () => () => {};
+var zero = () => 0;
+/** The search closed: a button, with a dot while a query it holds narrows the list. */
+function SearchButton({ ref, label, name = label, active, onOpen }) {
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: label,
 		shortcut: "/",
-		children: /* @__PURE__ */ jsx("button", {
+		children: /* @__PURE__ */ jsxs("button", {
+			ref,
 			type: "button",
-			onClick: search.openSearch,
-			"aria-label": label,
+			onClick: onOpen,
+			"aria-label": name,
 			"aria-keyshortcuts": `/ ${ariaKeyShortcuts("Mod+F")}`,
 			className: buttonClasses({
 				variant: "outline",
 				size: "sm",
 				iconOnly: true
 			}),
-			children: /* @__PURE__ */ jsx(SearchIcon, {})
+			children: [/* @__PURE__ */ jsx(SearchIcon, {}), active && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" })]
 		})
 	});
 }
@@ -141,14 +226,25 @@ var ListFooterCountContext = createContext(false);
 var ListToolbarInlineContext = createContext(false);
 /** The count's words, "7 tokens" or "2 of 7 tokens", as a status so a screen reader hears the
 *  count change as a filter narrows it. */
-function ListCountText({ total, matches, filterActive, noun, nounPlural }) {
+function ListCountText(props) {
+	return /* @__PURE__ */ jsx(ListCountStatus, { count: props });
+}
+/** A list's count as a status that can say nothing yet: kept mounted while its text is empty, so
+*  a screen reader hears the count when it arrives, as it would not from a status that mounts
+*  with its text already in. */
+function ListCountStatus({ count, className = "text-[13px] text-(--theme-muted-text-color)" }) {
 	const { list: t } = useStrings();
 	const locale = useLocale();
-	const count = (n) => formatInteger(n, locale);
+	const n = (value) => formatInteger(value, locale);
+	let words = "";
+	if (count) {
+		const { total, matches, filterActive, noun, nounPlural } = count;
+		words = filterActive ? t.matchCount(n(matches), n(total), nounPlural) : t.count(n(total), total === 1 ? noun : nounPlural);
+	}
 	return /* @__PURE__ */ jsx("span", {
 		role: "status",
-		className: "text-[13px] text-(--theme-muted-text-color)",
-		children: filterActive ? t.matchCount(count(matches), count(total), nounPlural) : t.count(count(total), total === 1 ? noun : nounPlural)
+		className,
+		children: words
 	});
 }
 /** A list's count, placed by hand.
@@ -163,4 +259,4 @@ function ListCount(props) {
 	});
 }
 //#endregion
-export { ListCount, ListCountText, ListFooterCountContext, ListSearchControl, ListToolbarInlineContext, useListSearch };
+export { ListCount, ListCountStatus, ListCountText, ListFooterCountContext, ListSearchControl, ListToolbarInlineContext, useListSearch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.93.0",
+  "version": "0.94.1",
   "description": "React UI components: a theme contract, icons, brand logos, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {
@@ -81,7 +81,9 @@
       "types": "./dist/app-frame/index.d.ts",
       "import": "./dist/app-frame/index.js"
     },
-    "./app-frame.css": "./dist/app-frame/app-frame.css"
+    "./app-frame.css": "./dist/app-frame/app-frame.css",
+    "./app-frame/layout.css": "./dist/app-frame/layout.css",
+    "./app-frame/navigation.css": "./dist/app-frame/navigation.css"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -153,7 +155,7 @@
   "scripts": {
     "build": "vite build && pnpm build:types && pnpm build:css",
     "build:types": "tsc -p tsconfig.build.json && node scripts/declaration-extensions.mjs",
-    "build:css": "mkdir -p dist/styles dist/logviewer dist/ai && cp src/styles/theme.css src/styles/base.css src/styles/fonts.css src/styles/*.woff2 dist/styles/ && tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify && cp src/logviewer/logviewer.css dist/logviewer/ && cp src/ai/ai.css dist/ai/ && mkdir -p dist/app-frame && cp src/app-frame/app-frame.css dist/app-frame/",
+    "build:css": "mkdir -p dist/styles dist/logviewer dist/ai && cp src/styles/theme.css src/styles/base.css src/styles/fonts.css src/styles/*.woff2 dist/styles/ && tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify && cp src/logviewer/logviewer.css dist/logviewer/ && cp src/ai/ai.css dist/ai/ && mkdir -p dist/app-frame && cp src/app-frame/*.css dist/app-frame/ && cat src/app-frame/layout.css src/app-frame/navigation.css > dist/app-frame/app-frame.css",
     "clean": "rm -rf dist",
     "test": "vitest run",
     "lint:package": "publint --strict",