@parallelworks/ui 0.53.0 → 0.54.0

package/dist/components/Drawer.js

@@ -1,5 +1,5 @@
 import { cx } from "../cx.js";
-import { CloseIcon } from "../icons.js";
+import { ArrowLeftIcon, CloseIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
 import { IconButton } from "./IconButton.js";
 import { closeHandler } from "./dismiss.js";
@@ -15,7 +15,7 @@ import { Drawer } from "@base-ui/react/drawer";
 *  `--app-inset-top` (a top bar's height), and at its widest leaves the strip
 *  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
 *  on the document root. */
-function Drawer$1({ open, onClose, title, description, footer, side = "right", width = 480, resizable = false, minWidth = 320, dismissible = true, modal = true, closeButton = true, contained = false, keepMounted = false, padded = true, className, children, ...popupProps }) {
+function Drawer$1({ open, onClose, title, description, onBack, backLabel, footer, side = "right", width = 480, resizable = false, minWidth = 320, dismissible = true, modal = true, closeButton = true, contained = false, keepMounted = false, padded = true, className, children, ...popupProps }) {
 	const { common } = useStrings();
 	const container = useRef(null);
 	const viewport = useRef(null);
@@ -61,20 +61,29 @@ function Drawer$1({ open, onClose, title, description, footer, side = "right", w
 						children: [
 							header && /* @__PURE__ */ jsxs("div", {
 								className: "flex shrink-0 items-start gap-3 border-b border-(--theme-border) px-4 py-3",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "min-w-0 flex-1",
-									children: [title !== void 0 && /* @__PURE__ */ jsx(Drawer.Title, {
-										className: "m-0 text-sm font-semibold wrap-break-word",
-										children: title
-									}), description !== void 0 && /* @__PURE__ */ jsx(Drawer.Description, {
-										className: "mt-0.5 text-xs text-(--theme-muted-text-color)",
-										children: description
-									})]
-								}), closeButton && /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
-									icon: /* @__PURE__ */ jsx(CloseIcon, {}),
-									label: common.close,
-									className: "-my-1 -me-1.5"
-								}) })]
+								children: [
+									onBack && /* @__PURE__ */ jsx(IconButton, {
+										icon: /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+										label: backLabel ?? common.back,
+										onClick: onBack,
+										className: "-my-1 -ms-1.5"
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "min-w-0 flex-1",
+										children: [title !== void 0 && /* @__PURE__ */ jsx(Drawer.Title, {
+											className: "m-0 text-sm font-semibold wrap-break-word",
+											children: title
+										}), description !== void 0 && /* @__PURE__ */ jsx(Drawer.Description, {
+											className: "mt-0.5 text-xs text-(--theme-muted-text-color)",
+											children: description
+										})]
+									}),
+									closeButton && /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+										icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+										label: common.close,
+										className: "-my-1 -me-1.5"
+									}) })
+								]
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: cx("relative flex min-h-0 flex-1 flex-col overflow-y-auto", padded && "p-4", className),

package/dist/components/Menu.js

@@ -16,7 +16,7 @@ function MenuPopup({ children, className, side = "bottom", align = "start", anch
 			sideOffset: 4,
 			className: positionerClassName,
 			children: /* @__PURE__ */ jsx(Menu.Popup, {
-				className: cx("min-w-44 max-h-(--available-height) overflow-y-auto py-1", panelClassName, className),
+				className: cx("min-w-44 max-h-(--available-height) overflow-y-auto", "p-1", panelClassName, className),
 				children
 			})
 		})
@@ -41,7 +41,7 @@ function MenuRadioItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		closeOnClick: true,
 		...props,
-		className: cx(itemClassName, "pl-2", className),
+		className: cx(itemClassName, "pl-1", className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "flex w-3.5 shrink-0 justify-center",
 			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }) })
@@ -72,11 +72,11 @@ function MenuSubmenuTrigger({ className, children, ...props }) {
 	});
 }
 function MenuSeparator({ className }) {
-	return /* @__PURE__ */ jsx(Menu.Separator, { className: cx("my-1 h-px bg-(--theme-border)", className) });
+	return /* @__PURE__ */ jsx(Menu.Separator, { className: cx("-mx-1 my-1 h-px bg-(--theme-border)", className) });
 }
 function MenuGroupLabel({ children }) {
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
-		className: "px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
+		className: "px-2 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
 		children
 	});
 }

package/dist/components/MenuEntries.js

@@ -34,7 +34,7 @@ function MenuEntries({ entries, search, query = "" }) {
 	const shown = needle ? searchMatches(entries, (a) => matches(needle, a.label, a.keywords)) : entries;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			className: "sticky top-0 z-[1] bg-(--theme-app-bg) px-2 pt-0.5 pb-1",
+			className: "sticky top-0 z-[1] bg-(--theme-app-bg) px-1 pt-0.5 pb-1",
 			children: /* @__PURE__ */ jsx(Menu.Input, {
 				"aria-label": search.placeholder,
 				placeholder: search.placeholder,

package/dist/components/OptionDescription.d.ts

@@ -0,0 +1,7 @@
+import type { ComboboxItem } from './comboboxItems.js';
+/** An option's description under its label. An `accessibleDescription` is read in its place,
+ *  so the shown one is then hidden from assistive technology rather than read twice. */
+export declare function OptionDescription({ id, item, }: {
+    id: string;
+    item: Pick<ComboboxItem<unknown>, 'description' | 'accessibleDescription'>;
+}): import("react").JSX.Element;

package/dist/components/OptionDescription.js

@@ -0,0 +1,19 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/OptionDescription.tsx
+/** An option's description under its label. An `accessibleDescription` is read in its place,
+*  so the shown one is then hidden from assistive technology rather than read twice. */
+function OptionDescription({ id, item }) {
+	const spoken = item.accessibleDescription;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [item.description && /* @__PURE__ */ jsx("span", {
+		id: spoken ? void 0 : id,
+		"aria-hidden": spoken ? true : void 0,
+		className: "text-xs leading-snug text-(--theme-muted-text-color)",
+		children: item.description
+	}), spoken && /* @__PURE__ */ jsx("span", {
+		id,
+		hidden: true,
+		children: spoken
+	})] });
+}
+//#endregion
+export { OptionDescription };

package/dist/components/Provider.d.ts

@@ -1,4 +1,5 @@
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { AccessText } from '../access/strings.js';
 import type { WorkflowAction, WorkflowEditing } from '../editing.js';
 import type { WorkflowEngine } from '../engine.js';
 import type { GraphEditorText, InputsEditorText } from '../graph/editorStrings.js';
@@ -14,6 +15,8 @@ export interface UIStrings {
         favoriteHintOff: string;
     };
     common: {
+        /** Returns to the view a drawer or panel showed before. */
+        back: string;
         cancel: string;
         close: string;
         save: string;
@@ -110,6 +113,8 @@ export interface UIStrings {
     dropdown: {
         select: (type: string) => string;
         noOptionsFound: string;
+        /** While a search for options is under way. */
+        searching: string;
         showOptions: string;
         /** The row that adds typed text as a new value. */
         add: (text: string) => string;
@@ -259,6 +264,8 @@ export interface UIStrings {
     };
     /** The visual editor's text a host translates; the editor fills in the rest in English. */
     graphEditor: Partial<GraphEditorText>;
+    /** The access drawer's text, over its English defaults. */
+    access: Partial<AccessText>;
     inputsEditor: Partial<InputsEditorText>;
     fileExplorer: {
         preview: {

package/dist/components/Provider.js

@@ -41,6 +41,7 @@ var DEFAULTS = {
 			favoriteHintOff: "Favorite your item when it's created"
 		},
 		common: {
+			back: "Back",
 			cancel: "Cancel",
 			close: "Close",
 			save: "Save",
@@ -125,6 +126,7 @@ var DEFAULTS = {
 		dropdown: {
 			select: (type) => `Select ${type}`,
 			noOptionsFound: "No options found",
+			searching: "Searching…",
 			showOptions: "Show options",
 			add: (text) => `Add “${text}”`,
 			limitReached: (max) => `Up to ${max}`,
@@ -276,6 +278,7 @@ var DEFAULTS = {
 			openInNewGraph: "Open in new graph"
 		},
 		graphEditor: {},
+		access: {},
 		inputsEditor: {},
 		fileExplorer: {
 			preview: {

package/dist/components/Select.js

@@ -3,7 +3,8 @@ import { CheckIcon, ChevronDownIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
 import { Tooltip } from "./Tooltip.js";
 import { fieldBox } from "./fieldBox.js";
-import { pickerItemClassName } from "./comboboxItems.js";
+import { optionNaming, pickerItemClassName } from "./comboboxItems.js";
+import { OptionDescription } from "./OptionDescription.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Select } from "@base-ui/react/select";
@@ -52,12 +53,11 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 			children: /* @__PURE__ */ jsx(Select.Popup, {
 				className: cx("min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]", panelClassName),
 				children: /* @__PURE__ */ jsx(Select.List, {
-					className: "max-h-[min(15rem,var(--available-height))] overflow-y-auto py-1",
+					className: cx("max-h-[min(15rem,var(--available-height))] overflow-y-auto", "p-1"),
 					children: items.map((item, index) => /* @__PURE__ */ jsxs(Select.Item, {
 						value: item.value,
 						disabled: item.disabled,
-						"aria-labelledby": `${uid}${index}label`,
-						"aria-describedby": item.description && `${uid}${index}description`,
+						...optionNaming(`${uid}${index}`, item),
 						onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
 						className: pickerItemClassName,
 						children: [
@@ -67,14 +67,16 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 							}),
 							/* @__PURE__ */ jsxs("span", {
 								className: "flex min-w-0 flex-col",
-								children: [/* @__PURE__ */ jsx(Select.ItemText, {
-									id: `${uid}${index}label`,
-									className: "truncate",
-									children: item.label
-								}), item.description && /* @__PURE__ */ jsx("span", {
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 items-center gap-2",
+									children: [/* @__PURE__ */ jsx(Select.ItemText, {
+										id: `${uid}${index}label`,
+										className: "truncate",
+										children: item.label
+									}), item.badge]
+								}), /* @__PURE__ */ jsx(OptionDescription, {
 									id: `${uid}${index}description`,
-									className: "text-xs leading-snug text-(--theme-muted-text-color)",
-									children: item.description
+									item
 								})]
 							}),
 							/* @__PURE__ */ jsx(Select.ItemIndicator, {

package/dist/components/comboboxItems.d.ts

@@ -7,7 +7,12 @@ export interface ComboboxItem<Value = string> {
     value: Value;
     label: string;
     description?: string | undefined;
+    /** Read after the label in place of `description`, for what the row shows in more than
+     *  words, such as a count and a status: "24 members, synced". */
+    accessibleDescription?: string | undefined;
     icon?: ReactNode;
+    /** Beside the label, such as a tag that marks the option out. */
+    badge?: ReactNode;
     disabled?: boolean | undefined;
 }
 export interface ComboboxGroup<Value = string> {
@@ -23,6 +28,11 @@ export interface ComboboxGroup<Value = string> {
 export type ComboboxLeaf<Value = string> = ComboboxItem<Value> | (Value & string);
 /** Items, groups under headings, or both: items between groups list where they sit, without a heading. */
 export type ComboboxItems<Value = string> = readonly (ComboboxLeaf<Value> | ComboboxGroup<Value>)[];
+/** How an option is named and described: by its label, with its description read after it. */
+export declare function optionNaming(id: string, item: Pick<ComboboxItem<unknown>, 'description' | 'accessibleDescription'>): {
+    'aria-labelledby': string;
+    'aria-describedby': string | undefined;
+};
 export declare function isComboboxGroup<Value>(item: ComboboxLeaf<Value> | ComboboxGroup<Value>): item is ComboboxGroup<Value>;
 /** Every item, out of their groups. */
 export declare function comboboxLeaves<Value>(items: ComboboxItems<Value>): ComboboxLeaf<Value>[];

package/dist/components/comboboxItems.js

@@ -4,6 +4,13 @@ import { panelItemClassName } from "./floating.js";
 /** An option's row in a Select's or a Combobox's list, so both lists look alike: the icon, the
 *  label over its description, and the check at the end. */
 var pickerItemClassName = cx(panelItemClassName, "data-selected:font-medium");
+/** How an option is named and described: by its label, with its description read after it. */
+function optionNaming(id, item) {
+	return {
+		"aria-labelledby": `${id}label`,
+		"aria-describedby": item.accessibleDescription || item.description ? `${id}description` : void 0
+	};
+}
 function isComboboxGroup(item) {
 	return typeof item === "object" && "items" in item;
 }
@@ -12,4 +19,4 @@ function comboboxLeaves(items) {
 	return items.flatMap((item) => isComboboxGroup(item) ? item.items : [item]);
 }
 //#endregion
-export { comboboxLeaves, isComboboxGroup, pickerItemClassName };
+export { comboboxLeaves, isComboboxGroup, optionNaming, pickerItemClassName };

package/dist/components/floating.d.ts

@@ -2,8 +2,11 @@
 export declare const positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
 export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
-/** A row in a panel. */
-export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A panel's rows inset by the same gutter on every side, so a highlighted first or last row
+ *  keeps the margin it has at its sides rather than leaving a strip against the border. */
+export declare const panelListClassName = "p-1";
+/** A row in a panel, inside its `panelListClassName` gutter; its text lines up with a field's. */
+export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /** A tooltip's or infotip's small inverted surface. */
 export declare const tipClassName = "rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 export declare const tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";

package/dist/components/floating.js

@@ -4,8 +4,8 @@ var positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:i
 var enterExit = "origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
 var panelClassName = `rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
-/** A row in a panel. */
-var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A row in a panel, inside its `panelListClassName` gutter; its text lines up with a field's. */
+var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /** A tooltip's or infotip's small inverted surface. */
 var tipClassName = `rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none ${enterExit}`;
 var tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";

package/dist/editor/themes.d.ts

@@ -1,5 +1,10 @@
 import type * as monaco from 'monaco-editor';
+import { type Mode } from '../theme/index.js';
 export declare function expandShorthandHex(color: string): string;
+/** The arm of a `light-dark()` value for a mode, or the value itself. A token the host leaves to
+ *  theme.css reads as `light-dark(light, dark)`, which CSS resolves by the color-scheme of where it
+ *  is used; Monaco takes one color per theme, so each theme takes its own mode's arm. */
+export declare function forMode(value: string, mode: Mode): string;
 /**
  * Defines the light and dark Monaco themes from the document's tokens. Call it again after the
  * host applies other tokens; it returns whether anything changed.

package/dist/editor/themes.js

@@ -6,11 +6,26 @@ function expandShorthandHex(color) {
 	return /^#([0-9a-fA-F]{3,4})$/.test(color) ? "#" + color.slice(1).split("").map((c) => c + c).join("") : color;
 }
 var fallbacks = {};
+/** The arm of a `light-dark()` value for a mode, or the value itself. A token the host leaves to
+*  theme.css reads as `light-dark(light, dark)`, which CSS resolves by the color-scheme of where it
+*  is used; Monaco takes one color per theme, so each theme takes its own mode's arm. */
+function forMode(value, mode) {
+	const inner = /^light-dark\((.*)\)$/s.exec(value.trim())?.[1];
+	if (inner === void 0) return value;
+	let depth = 0;
+	for (let i = 0; i < inner.length; i++) {
+		const ch = inner[i];
+		if (ch === "(") depth++;
+		else if (ch === ")") depth--;
+		else if (ch === "," && depth === 0) return (mode === "light" ? inner.slice(0, i) : inner.slice(i + 1)).trim();
+	}
+	return value;
+}
 /** A token as Monaco takes it: a 6-digit hex. Monaco can't read display-p3, so
 *  a wide-gamut value is mapped back into sRGB; the default theme fills in for
 *  a host that sets no tokens. */
 function token(style, name, mode) {
-	const color = parseColor(expandShorthandHex(style?.getPropertyValue(name).trim() ?? ""));
+	const color = parseColor(expandShorthandHex(forMode(style?.getPropertyValue(name) ?? "", mode).trim()));
 	if (color) return toHex(color);
 	fallbacks[mode] ??= deriveTheme(schemeFor(DEFAULT_THEME, mode));
 	return fallbacks[mode][name];
@@ -120,4 +135,4 @@ function getThemeName(isDark) {
 	return `app-${isDark ? "dark" : "light"}`;
 }
 //#endregion
-export { defineEditorThemes, expandShorthandHex, followThemeTokens, getThemeName };
+export { defineEditorThemes, expandShorthandHex, followThemeTokens, forMode, getThemeName };

package/dist/file-explorer/FileExplorer.js

@@ -37,7 +37,7 @@ import { FilePreviewInline } from "./FilePreview/Inline.js";
 import { UserRow } from "./FileRow.js";
 import { FileTableHeaders } from "./FileTableHeaders.js";
 import { FileTable } from "./FileTable.js";
-import { advanceListing, beginLoadingMore, canAutoLoadMore, clearListingError, clearListingsUnder, hasMore, incompletePaths, isListed, isLoadingMore, loadMoreError, nextHydrationStep, recordListingError, replaceListing } from "./lib/paging.js";
+import { advanceListing, beginLoadingMore, canAutoLoadMore, clearListingError, clearListingsUnder, hasMore, incompletePaths, isListed, isLoadingMore, loadMoreError, nextHydrationStep, recordListingError, replaceListing, retainListings } from "./lib/paging.js";
 import { TreeView } from "./TreeView.js";
 import { Menu } from "@base-ui/react/menu";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -949,6 +949,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const handleRefresh = async (opts) => {
 		const dirs = [...expandedPaths].map((path) => treeMap[path]).filter((node) => !!node && node.type === "directory" && !!node.storageId);
 		if (selectedNode?.type === "directory" && selectedNode.storageId && !dirs.some((dir) => dir.path === selectedNode.path)) dirs.push(selectedNode);
+		setListings((prev) => retainListings(prev, new Set(dirs.map((dir) => dir.path))));
 		if (dirs.length > 0) return { corsError: (await Promise.all(dirs.map((dir) => fetchNodeChildren(dir, {
 			replace: true,
 			silent: opts?.silent

package/dist/file-explorer/lib/paging.d.ts

@@ -47,6 +47,7 @@ export declare function recordListingError(listings: TListings, path: string, er
 /** Keeps the cursor and pages, so a retry resumes paging instead of starting over. */
 export declare function clearListingError(listings: TListings, path: string): TListings;
 export declare function clearListingsUnder(listings: TListings, path: string): TListings;
+export declare function retainListings(listings: TListings, paths: ReadonlySet<string>): TListings;
 /** Tree paths whose children should keep arrival order, since sorting them would
  *  reshuffle rows under the user mid-scroll. */
 export declare function incompletePaths(listings: TListings): Set<string>;

package/dist/file-explorer/lib/paging.js

@@ -83,6 +83,10 @@ function clearListingsUnder(listings, path) {
 	for (const key of listings.keys()) if (key === path || key.startsWith(prefix)) next.delete(key);
 	return next;
 }
+function retainListings(listings, paths) {
+	if ([...listings.keys()].every((path) => paths.has(path))) return listings;
+	return new Map([...listings].filter(([path]) => paths.has(path)));
+}
 /** Tree paths whose children should keep arrival order, since sorting them would
 *  reshuffle rows under the user mid-scroll. */
 function incompletePaths(listings) {
@@ -121,4 +125,4 @@ function nextHydrationStep({ targetResolved, ancestors, isListableDir, listings,
 	};
 }
 //#endregion
-export { LIST_PAGE_SIZE, advanceListing, beginLoadingMore, canAutoLoadMore, clearListingError, clearListingsUnder, hasMore, incompletePaths, isListed, isLoadingMore, loadMoreError, nextHydrationStep, recordListingError, replaceListing };
+export { LIST_PAGE_SIZE, advanceListing, beginLoadingMore, canAutoLoadMore, clearListingError, clearListingsUnder, hasMore, incompletePaths, isListed, isLoadingMore, loadMoreError, nextHydrationStep, recordListingError, replaceListing, retainListings };

package/dist/styles/theme.css

@@ -1,8 +1,9 @@
 /* The theme contract: `theme-*` utilities over the `--theme-*` tokens, which
  * src/theme generates from a scheme of three choices (base, accent, contrast).
  * Hosts set the tokens at runtime with applyTheme; the defaults below are the
- * default theme's light scheme, for standalone use, with display-p3 values for
- * wide-gamut screens.
+ * default theme's light and dark schemes, for standalone use and for any token
+ * a host leaves unset, with display-p3 values for wide-gamut screens. Each pairs
+ * its modes with light-dark(), so it follows the CSS color-scheme a host sets.
  *
  * Sidebar tokens (--theme-sidebar-*) are part of the contract but have no
  * defaults here: hosts supply per-site fallbacks at the use sites, and a global
@@ -10,75 +11,94 @@
 
 /* generated:start (src/theme/derive.test.ts checks this; UPDATE_THEME_CSS=1 rewrites it) */
 :root {
-  --theme-app-bg: #f3f4f6;
-  --theme-panel-bg: #fcfeff;
-  --theme-panel-hover: #f2f5f9;
-  --theme-muted-panel-bg: #e7eaee;
-  --theme-hover: #e3e5e9;
-  --theme-input-bg: #fafcfe;
-  --theme-input-disabled-bg: #ebeef1;
-  --theme-app: #0a101b;
-  --theme-muted-text-color: #4e5664;
-  --theme-placeholder: #7e8796;
-  --theme-link: #06354f;
-  --theme-border: #cacdd0;
-  --theme-border-strong: #a3a6a9;
-  --theme-accent: #06354f;
-  --theme-accent-text: #ffffff;
-  --theme-accent-hover: #002841;
-  --theme-accent-subtle: #d3ebfc;
-  --theme-focus: #06354f;
-  --theme-focus-ring: rgba(6, 53, 79, 0.25);
-  --theme-success: #00973d;
-  --theme-success-text: #006226;
+  --theme-app-bg: light-dark(#f3f4f6, #111418);
+  --theme-panel-bg: light-dark(#fcfeff, #151c25);
+  --theme-panel-hover: light-dark(#f2f5f9, #1e262e);
+  --theme-muted-panel-bg: light-dark(#e7eaee, #1c242c);
+  --theme-hover: light-dark(#e3e5e9, #1f2730);
+  --theme-input-bg: light-dark(#fafcfe, #182028);
+  --theme-input-disabled-bg: light-dark(#ebeef1, #131a22);
+  --theme-app: light-dark(#0a101b, #e2eaf3);
+  --theme-muted-text-color: light-dark(#4e5664, #c1c9d2);
+  --theme-placeholder: light-dark(#7e8796, #9da5ad);
+  --theme-link: light-dark(#06354f, #8dcfff);
+  --theme-border: light-dark(#cacdd0, #30363d);
+  --theme-border-strong: light-dark(#a3a6a9, #4f565d);
+  --theme-accent: light-dark(#06354f, #5b9ccf);
+  --theme-accent-text: light-dark(#ffffff, #000000);
+  --theme-accent-hover: light-dark(#002841, #6aace0);
+  --theme-accent-subtle: light-dark(#d3ebfc, #0f2638);
+  --theme-focus: light-dark(#06354f, #5b9ccf);
+  --theme-focus-ring: light-dark(rgba(6, 53, 79, 0.25), rgba(91, 156, 207, 0.35));
+  --theme-success: light-dark(#00973d, #00bf54);
+  --theme-success-text: light-dark(#006226, #65e387);
   --theme-success-solid: #00873c;
-  --theme-success-muted: rgba(0, 151, 61, 0.1);
-  --theme-error: #ea4841;
-  --theme-error-text: #a11a1b;
+  --theme-success-muted: light-dark(rgba(0, 151, 61, 0.1), rgba(0, 191, 84, 0.15));
+  --theme-error: light-dark(#ea4841, #ff6056);
+  --theme-error-text: light-dark(#a11a1b, #ffb8af);
   --theme-error-solid: #db3934;
-  --theme-error-muted: rgba(234, 72, 65, 0.1);
-  --theme-warning: #bd7100;
-  --theme-warning-text: #7b4a00;
+  --theme-error-muted: light-dark(rgba(234, 72, 65, 0.1), rgba(255, 96, 86, 0.15));
+  --theme-warning: light-dark(#bd7100, #dd8900);
+  --theme-warning-text: light-dark(#7b4a00, #ffbe6a);
   --theme-warning-solid: #a76900;
-  --theme-warning-muted: rgba(189, 113, 0, 0.1);
-  --theme-info: #0681f8;
-  --theme-info-text: #0050af;
-  --theme-info-solid: #0073e8;
-  --theme-info-muted: rgba(6, 129, 248, 0.1);
-  --theme-favorite: #e7457a;
-  --theme-favorite-text: #9e174b;
+  --theme-warning-muted: light-dark(rgba(189, 113, 0, 0.1), rgba(221, 137, 0, 0.15));
+  --theme-info: light-dark(#0681f8, #499fff);
+  --theme-info-text: light-dark(#0050af, #a6cfff);
+  --theme-info-solid: light-dark(#0073e8, #0073e9);
+  --theme-info-muted: light-dark(rgba(6, 129, 248, 0.1), rgba(73, 159, 255, 0.15));
+  --theme-favorite: light-dark(#e7457a, #fe5c8e);
+  --theme-favorite-text: light-dark(#9e174b, #ffb7c7);
   --theme-favorite-solid: #d7366e;
-  --theme-favorite-muted: rgba(231, 69, 122, 0.1);
-  --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.07);
-  --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
-  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
-  --theme-shadow-xl: 0 25px 80px -20px rgba(0, 0, 0, 0.2), 0 10px 30px -10px rgba(0, 0, 0, 0.1);
-  --theme-code-bg: #e7eaee;
-  --theme-code-text: #1c2330;
-  --theme-code-comment: #555d6c;
-  --theme-code-keyword: #36617d;
-  --theme-code-string: #196a24;
-  --theme-code-number: #944500;
-  --theme-code-function: #6c4b9e;
-  --theme-code-type: #006565;
-  --theme-code-property: #5a51a5;
-  --theme-ansi-black: #1c2330;
-  --theme-ansi-red: #a3322d;
-  --theme-ansi-green: #006a12;
-  --theme-ansi-yellow: #755800;
-  --theme-ansi-blue: #0b5aae;
-  --theme-ansi-magenta: #8d3a88;
-  --theme-ansi-cyan: #00666c;
-  --theme-ansi-white: #555d6c;
+  --theme-favorite-muted: light-dark(rgba(231, 69, 122, 0.1), rgba(254, 92, 142, 0.15));
+  --theme-shadow-sm: 0 1px 2px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35));
+  --theme-shadow:
+    0 4px 6px -1px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35)),
+    0 2px 4px -2px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35));
+  --theme-shadow-lg:
+    0 10px 15px -3px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35)),
+    0 4px 6px -4px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35));
+  --theme-shadow-xl:
+    0 25px 80px -20px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)),
+    0 10px 30px -10px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
+  --theme-code-bg: light-dark(#e7eaee, #1c242c);
+  --theme-code-text: light-dark(#1c2330, #e1e9f2);
+  --theme-code-comment: light-dark(#555d6c, #c0c8d1);
+  --theme-code-keyword: light-dark(#36617d, #8cceff);
+  --theme-code-string: light-dark(#196a24, #8bd98d);
+  --theme-code-number: light-dark(#944500, #ffb882);
+  --theme-code-function: light-dark(#6c4b9e, #d3bcff);
+  --theme-code-type: light-dark(#006565, #31dbdb);
+  --theme-code-property: light-dark(#5a51a5, #31dbdb);
+  --theme-ansi-black: light-dark(#1c2330, #c0c8d1);
+  --theme-ansi-red: light-dark(#a3322d, #ffb5ab);
+  --theme-ansi-green: light-dark(#006a12, #7fdb83);
+  --theme-ansi-yellow: light-dark(#755800, #edc23e);
+  --theme-ansi-blue: light-dark(#0b5aae, #9ecbff);
+  --theme-ansi-magenta: light-dark(#8d3a88, #ffaafe);
+  --theme-ansi-cyan: light-dark(#00666c, #00dbe5);
+  --theme-ansi-white: light-dark(#555d6c, #e1e9f2);
 }
 
 @media (color-gamut: p3) {
   :root {
-    --theme-success: color(display-p3 0.1559 0.5942 0.2459);
+    --theme-success: light-dark(color(display-p3 0.1559 0.5942 0.2459), #00bf54);
     --theme-success-solid: color(display-p3 0.0738 0.5422 0.1959);
-    --theme-success-muted: color(display-p3 0.1559 0.5942 0.2459 / 0.1);
-    --theme-warning-solid: color(display-p3 0.6474 0.4089 0);
-    --theme-ansi-cyan: color(display-p3 0 0.4024 0.4329);
+    --theme-success-muted: light-dark(
+      color(display-p3 0.1559 0.5942 0.2459 / 0.1),
+      rgba(0, 191, 84, 0.15)
+    );
+    --theme-warning: light-dark(#bd7100, color(display-p3 0.8343 0.5429 0));
+    --theme-warning-solid: light-dark(
+      color(display-p3 0.6474 0.4089 0),
+      color(display-p3 0.6478 0.4092 0)
+    );
+    --theme-warning-muted: light-dark(
+      rgba(189, 113, 0, 0.1),
+      color(display-p3 0.8343 0.5429 0 / 0.15)
+    );
+    --theme-code-number: light-dark(#944500, color(display-p3 1 0.7209 0.5024));
+    --theme-ansi-red: light-dark(#a3322d, color(display-p3 1 0.7032 0.6565));
+    --theme-ansi-cyan: light-dark(color(display-p3 0 0.4024 0.4329), #00dbe5);
   }
 }
 /* generated:end */