@parallelworks/ui 0.92.0 → 0.94.0

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.92.0",
+  "version": "0.94.0",
   "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": {
@@ -76,7 +76,12 @@
       "types": "./dist/ai/adapter/mock/index.d.ts",
       "import": "./dist/ai/adapter/mock/index.js"
     },
-    "./ai.css": "./dist/ai/ai.css"
+    "./ai.css": "./dist/ai/ai.css",
+    "./app-frame": {
+      "types": "./dist/app-frame/index.d.ts",
+      "import": "./dist/app-frame/index.js"
+    },
+    "./app-frame.css": "./dist/app-frame/app-frame.css"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -148,7 +153,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/",
+    "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/",
     "clean": "rm -rf dist",
     "test": "vitest run",
     "lint:package": "publint --strict",