@parallelworks/ui 0.80.0 → 0.82.0

package/dist/components/Modal.js

@@ -10,7 +10,8 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/Modal.tsx
 /** The panel a modal draws by default; pass `panel={false}` to paint your own. */
-var modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
+var modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-2xl";
+var phoneFooterClassName = "max-sm:flex-wrap max-sm:[&>:is(button,a)]:h-10 max-sm:[&>:is(button,a)]:flex-1 max-sm:[&>:not(button,a)]:basis-full";
 /** Names the modal for assistive technology; renders an `<h2>`. */
 var ModalTitle = Dialog.Title;
 /** Describes the modal for assistive technology; renders a `<p>`. */
@@ -32,7 +33,7 @@ function firstControlIn(panel) {
 *  and focus returns to where it was on close. Give it a `title`, a `description`
 *  and a `footer` for the standard layout, as a Drawer has, or lay out the whole
 *  panel with the children. */
-function Modal({ open, onClose, title, description, footer, size, alert = false, dismissible = true, align = "top", panel = true, backdropClassName = "bg-black/40", closeButton = false, onSubmit, className, children, initialFocus, ...popupProps }) {
+function Modal({ open, onClose, title, description, footer, size, alert = false, dismissible = true, align = "top", panel = true, backdropClassName = "bg-(--theme-backdrop)", closeButton = false, onSubmit, className, children, initialFocus, ...popupProps }) {
 	const portal = usePopupContainer();
 	const { common } = useStrings();
 	const panelElement = useRef(null);
@@ -67,14 +68,14 @@ function Modal({ open, onClose, title, description, footer, size, alert = false,
 			children
 		}),
 		footer !== void 0 && /* @__PURE__ */ jsx("div", {
-			className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3",
+			className: cx("flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3", phoneFooterClassName),
 			children: footer
 		})
 	] });
 	const content = /* @__PURE__ */ jsxs(Dialog.Portal, {
 		...portal,
 		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cx("fixed inset-0 z-(--layer-modal)", backdropMotion, backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
-			className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
+			className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8 max-sm:px-2 max-sm:pb-[max(8px,env(safe-area-inset-bottom))]", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
 			children: /* @__PURE__ */ jsx(Dialog.Popup, {
 				...popupProps,
 				ref: (element) => {
@@ -84,7 +85,7 @@ function Modal({ open, onClose, title, description, footer, size, alert = false,
 					else if (forward) forward.current = element;
 				},
 				initialFocus: initialFocus ?? (closeButton ? () => firstControlIn(panelElement.current) : void 0),
-				className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], laidOut && "flex max-h-full flex-col", "outline-none", popupMotion, className),
+				className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], panel && (size || laidOut) && "max-sm:w-full", laidOut && "flex max-h-full flex-col", "outline-none", popupMotion, className),
 				children: !laidOut ? children : onSubmit ? /* @__PURE__ */ jsx("form", {
 					className: "flex min-h-0 flex-1 flex-col",
 					onSubmit: (event) => {

package/dist/components/PageHeader.d.ts

@@ -13,6 +13,10 @@ export interface PageHeaderProps {
      *  `h1`. A crumb with an empty label, such as a name still loading, shows a
      *  placeholder. */
     breadcrumbs?: readonly Breadcrumb[] | undefined;
+    /** False keeps the last crumb out of the page's outline, for a page whose `h1` is in its
+     *  body, such as a title field or a section's heading: the crumb still says it is the
+     *  current page, and the page has one `h1`. */
+    heading?: boolean | undefined;
     /** Beside the title: actions on the page's subject, such as edit, rename or
      *  favorite, or its `PageHeaderMenu`. */
     titleActions?: ReactNode;
@@ -29,7 +33,9 @@ export interface PageHeaderProps {
  * toolbar. Under a `PageHeaderProvider` it renders nothing in place: the
  * shell's `PageHeaderBar` shows it, while the actions stay in the page's React
  * tree, with its context and state. Without a provider it renders the bar
- * itself, for a page with no shell.
+ * itself, for a page with no shell, with no fill of its own, so it shows the
+ * surface it sits on. A host that pins it gives its pinned wrapper the page's
+ * surface, so content scrolling under it is covered.
  *
  * Any component may render one, such as a form adding its Save button: the bar
  * shows the actions of all of them, outermost first, and the trail of the last

package/dist/components/PageHeader.js

@@ -42,7 +42,9 @@ function createRegionNodes() {
 * toolbar. Under a `PageHeaderProvider` it renders nothing in place: the
 * shell's `PageHeaderBar` shows it, while the actions stay in the page's React
 * tree, with its context and state. Without a provider it renders the bar
-* itself, for a page with no shell.
+* itself, for a page with no shell, with no fill of its own, so it shows the
+* surface it sits on. A host that pins it gives its pinned wrapper the page's
+* surface, so content scrolling under it is covered.
 *
 * Any component may render one, such as a form adding its Save button: the bar
 * shows the actions of all of them, outermost first, and the trail of the last
@@ -51,7 +53,9 @@ function createRegionNodes() {
 function PageHeader(props) {
 	const store = use(StoreContext);
 	if (!store) return props.hidden ? null : /* @__PURE__ */ jsx(HeaderLayout, {
+		inPlace: true,
 		breadcrumbs: props.breadcrumbs ?? [],
+		heading: props.heading ?? true,
 		titleActions: props.titleActions,
 		actions: props.actions,
 		toolbar: props.toolbar
@@ -61,7 +65,7 @@ function PageHeader(props) {
 		...props
 	});
 }
-function DeclaredHeader({ store, breadcrumbs, titleActions, actions, toolbar, hidden = false }) {
+function DeclaredHeader({ store, breadcrumbs, heading = true, titleActions, actions, toolbar, hidden = false }) {
 	const [order] = useState(() => ++renderOrder);
 	const [nodes] = useState(createRegionNodes);
 	const client = useSyncExternalStore(subscribeNever, () => true, () => false);
@@ -73,6 +77,7 @@ function DeclaredHeader({ store, breadcrumbs, titleActions, actions, toolbar, hi
 	useLayoutEffect(() => {
 		store.set(order, {
 			breadcrumbs,
+			heading,
 			hidden,
 			nodes,
 			fills
@@ -105,6 +110,7 @@ function PageHeaderBar({ compact = false, persistent = false, className }) {
 	if (header.hidden || empty && !persistent) return null;
 	return /* @__PURE__ */ jsx(HeaderLayout, {
 		breadcrumbs: header.breadcrumbs,
+		heading: header.heading,
 		titleActions: header.titleActions.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.titleActions }),
 		actions: header.actions.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.actions }),
 		toolbar: header.toolbar.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.toolbar }),
@@ -137,7 +143,7 @@ function Mount({ node }) {
 		className: "contents"
 	});
 }
-function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, fit: sharedFit, compact = false, className }) {
+function HeaderLayout({ breadcrumbs, heading, titleActions, actions, toolbar, fit: sharedFit, compact = false, inPlace = false, className }) {
 	const { breadcrumbPin, navToggle } = useSlots();
 	const { list: t } = useStrings();
 	const [ownFit] = useState(() => new HeaderActionsFit());
@@ -150,7 +156,7 @@ function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, fit: shared
 	const moved = fit.menu();
 	const hasTrail = breadcrumbs.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("@container w-full shrink-0 bg-(--theme-app-bg)", className),
+		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"),
@@ -161,7 +167,7 @@ function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, fit: shared
 					navToggle?.(),
 					hasTrail && /* @__PURE__ */ jsx(Breadcrumbs, {
 						crumbs: breadcrumbs,
-						heading: true
+						heading
 					}),
 					present(titleActions) && /* @__PURE__ */ jsx("div", {
 						className: "flex shrink-0 items-center gap-0.5",

package/dist/components/Provider.d.ts

@@ -102,6 +102,9 @@ export interface UIStrings {
         opensInNewTab: string;
         /** Names a code editor that has no label of its own. */
         codeEditor: string;
+        /** Names a block of code that has no title of its own, by its language,
+         *  such as "yaml code"; `language` is empty when it has none. */
+        codeOf: (language: string) => string;
         /** Shown when someone types in a read-only code editor. */
         readOnlyText: string;
         /** Names the handle that resizes a panel. */

package/dist/components/Provider.js

@@ -148,6 +148,7 @@ var DEFAULTS = {
 			no: "No",
 			opensInNewTab: "(opens in a new tab)",
 			codeEditor: "Code editor",
+			codeOf: (language) => language ? `${language} code` : "Code",
 			readOnlyText: "This text is read-only.",
 			resizePanel: "Resize panel",
 			panelWidth: (px) => `${px} pixels wide`,

package/dist/components/Select.js

@@ -59,7 +59,7 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 				content: tip,
 				children: /* @__PURE__ */ jsxs(Select.Trigger, {
 					...triggerProps,
-					className: cx(fieldBox({ size }), triggerClassName, content && "w-fit max-w-full", explained && explainedDisabledClassName, className),
+					className: cx(fieldBox({ size }), triggerClassName, content && "w-fit max-w-full shrink-0", explained && explainedDisabledClassName, className),
 					children: [/* @__PURE__ */ jsx(Select.Value, {
 						placeholder,
 						className: cx("truncate data-placeholder:text-(--theme-placeholder)", content && !rootProps.multiple && "grid"),

package/dist/components/SettingsCard.d.ts

@@ -17,7 +17,9 @@ export interface SettingsCardProps {
     children: ReactNode;
 }
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
- *  the next. Cards stack with room between them. */
+ *  the next. Cards stack with room between them. An error about one setting, such as its
+ *  Save failing, is its row's `error`; one about the whole card goes outside it, such as
+ *  an ErrorText under the card, since every child of the card is ruled off as a row. */
 export declare function SettingsCard({ title, description, action, actionAlign, headingLevel, overflowVisible, className, children, }: SettingsCardProps): import("react").JSX.Element;
 /** A heading between groups of rows inside a SettingsCard, a level below the card's title. */
 export declare function SettingsHeading({ children }: {
@@ -25,7 +27,7 @@ export declare function SettingsHeading({ children }: {
 }): import("react").JSX.Element;
 /** One setting in a SettingsCard: its name and help on the left, its control on
  *  the right, or under the name across the row with `fill`. */
-export declare function SettingRow({ label, htmlFor, helpText, fill, onClick, children, }: {
+export declare function SettingRow({ label, htmlFor, helpText, fill, onClick, error, children, }: {
     label: string;
     /** The control's id, so the name labels it. */
     htmlFor?: string | undefined;
@@ -35,5 +37,8 @@ export declare function SettingRow({ label, htmlFor, helpText, fill, onClick, ch
     /** Makes the whole row press its control, such as a switch. The control still
      *  handles its own press; stop it propagating there so it doesn't toggle twice. */
     onClick?: (() => void) | undefined;
+    /** An error about this setting, such as its Save failing: under the control, at its start,
+     *  announced, and describing the control that `htmlFor` names. */
+    error?: ReactNode;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/SettingsCard.js

@@ -1,10 +1,13 @@
 import { cx } from "../cx.js";
-import { createContext, useContext } from "react";
+import { ErrorText } from "./Field.js";
+import { createContext, useContext, useId, useLayoutEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingsCard.tsx
 var HeadingLevel = createContext(3);
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
-*  the next. Cards stack with room between them. */
+*  the next. Cards stack with room between them. An error about one setting, such as its
+*  Save failing, is its row's `error`; one about the whole card goes outside it, such as
+*  an ErrorText under the card, since every child of the card is ruled off as a row. */
 function SettingsCard({ title, description, action, actionAlign = "beside", headingLevel = 2, overflowVisible = false, className, children }) {
 	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsx(HeadingLevel, {
@@ -40,7 +43,34 @@ function SettingsHeading({ children }) {
 }
 /** One setting in a SettingsCard: its name and help on the left, its control on
 *  the right, or under the name across the row with `fill`. */
-function SettingRow({ label, htmlFor, helpText, fill = false, onClick, children }) {
+function SettingRow({ label, htmlFor, helpText, fill = false, onClick, error, children }) {
+	const errorId = useId();
+	const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+	useLayoutEffect(() => {
+		const control = hasError && htmlFor ? document.getElementById(htmlFor) : null;
+		if (!control) return;
+		const ids = (control.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+		if (!ids.includes(errorId)) control.setAttribute("aria-describedby", [...ids, errorId].join(" "));
+		return () => {
+			const rest = (control.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((id) => id && id !== errorId);
+			if (rest.length > 0) control.setAttribute("aria-describedby", rest.join(" "));
+			else control.removeAttribute("aria-describedby");
+		};
+	}, [
+		hasError,
+		htmlFor,
+		errorId
+	]);
+	const control = /* @__PURE__ */ jsx("div", {
+		className: cx("min-w-0", !fill && [
+			"flex items-center justify-end",
+			"max-md:has-[input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox]]:justify-start",
+			"max-md:has-[input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox]]:*:grow",
+			"max-md:[&_:is(input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox])]:min-w-0",
+			"max-md:[&_:is(input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox])]:flex-1"
+		]),
+		children
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		role: "none",
 		onClick,
@@ -55,10 +85,15 @@ function SettingRow({ label, htmlFor, helpText, fill = false, onClick, children
 				className: "text-xs leading-snug theme-muted-text",
 				children: helpText
 			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: cx("min-w-0", !fill && "flex items-center justify-end"),
-			children
-		})]
+		}), hasError ? /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-y-2",
+			children: [control, /* @__PURE__ */ jsx(ErrorText, {
+				id: errorId,
+				size: "md",
+				className: "md:w-0 md:min-w-full",
+				children: error
+			})]
+		}) : control]
 	});
 }
 //#endregion

package/dist/components/ToggleGroup.d.ts

@@ -25,6 +25,8 @@ export interface ToggleGroupProps<T extends string> {
     all?: boolean | {
         count?: number | undefined;
     } | undefined;
+    /** The All option's words, for one that names what it covers, such as "All types". */
+    allLabel?: ReactNode;
     size?: 'sm' | 'md' | undefined;
     disabled?: boolean | undefined;
     /** Names an element that says more about the group, such as a live summary
@@ -42,4 +44,4 @@ export interface ToggleGroupProps<T extends string> {
  *  value, such as a time range, what to group by, or which view of the same
  *  data to show. A filter that may be off, or takes several values, is a
  *  `ToggleGroup`. */
-export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, size, disabled, 'aria-describedby': describedBy, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;
+export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, allLabel, size, disabled, 'aria-describedby': describedBy, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;

package/dist/components/ToggleGroup.js

@@ -18,7 +18,7 @@ var ALL = "\0all";
 *  value, such as a time range, what to group by, or which view of the same
 *  data to show. A filter that may be off, or takes several values, is a
 *  `ToggleGroup`. */
-function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, size = "sm", disabled = false, "aria-describedby": describedBy, testId }) {
+function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, allLabel, size = "sm", disabled = false, "aria-describedby": describedBy, testId }) {
 	const strings = useStrings();
 	const allCount = typeof all === "object" ? all.count : void 0;
 	const pressed = all && value.length === 0 ? [ALL] : value;
@@ -40,7 +40,7 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 		children: [
 			all && /* @__PURE__ */ jsx(Chip, {
 				value: ALL,
-				label: strings.common.all,
+				label: allLabel ?? strings.common.all,
 				count: allCount,
 				size
 			}),

package/dist/components/Tooltip.js

@@ -1,7 +1,7 @@
 import { positionerClassName, tipClassName } from "./floating.js";
 import { usePopupContainer } from "./popupContainer.js";
 import { Kbd } from "./Kbd.js";
-import { cloneElement, createContext, use, useId, useState } from "react";
+import { cloneElement, createContext, use, useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/components/Tooltip.tsx
@@ -52,12 +52,44 @@ function skipUnclipped(open, details) {
 	const anchor = details.trigger;
 	if (open && anchor instanceof HTMLElement && anchor.hasAttribute("data-overflow-only") && anchor.scrollWidth <= anchor.clientWidth) details.cancel();
 }
+/** True from when the anchor's own popup, such as its menu, closes until the pointer leaves the
+*  anchor or focus does. Closing the popup hands focus back to the anchor, and a tip opening
+*  then would take the next Escape, meant for the dialog around it, and repeat a label the
+*  reader has just seen. */
+function useRestAfterPopup(anchor) {
+	const [resting, setResting] = useState(false);
+	useEffect(() => {
+		if (!anchor || typeof MutationObserver === "undefined") return;
+		let expanded = anchor.getAttribute("aria-expanded") === "true";
+		const observer = new MutationObserver(() => {
+			const now = anchor.getAttribute("aria-expanded") === "true";
+			if (expanded && !now) setResting(true);
+			else if (now) setResting(false);
+			expanded = now;
+		});
+		observer.observe(anchor, {
+			attributes: true,
+			attributeFilter: ["aria-expanded"]
+		});
+		const wake = () => setResting(false);
+		anchor.addEventListener("blur", wake);
+		anchor.addEventListener("pointerleave", wake);
+		return () => {
+			observer.disconnect();
+			anchor.removeEventListener("blur", wake);
+			anchor.removeEventListener("pointerleave", wake);
+		};
+	}, [anchor]);
+	return resting;
+}
 /** A visual hint for sighted pointer and keyboard users. The anchor still needs
 *  its own accessible name; `describesAnchor` also gives assistive technology the
 *  hint. Use InfoTip for content everyone must reach, such as on a touch screen. */
 function Tooltip$1({ content, children, side = "top", shortcut, disabled = false, overflowOnly = false, describesAnchor = false, ...anchorProps }) {
 	const handle = use(TooltipHandleContext);
 	const descriptionId = useId();
+	const [anchorElement, setAnchorElement] = useState(null);
+	const resting = useRestAfterPopup(anchorElement);
 	const payload = {
 		content,
 		shortcut,
@@ -75,7 +107,8 @@ function Tooltip$1({ content, children, side = "top", shortcut, disabled = false
 		...!handle && anchorProps.delay === void 0 && { delay: OPEN_DELAY },
 		handle: handle ?? void 0,
 		payload,
-		disabled: disabled || !content,
+		ref: setAnchorElement,
+		disabled: disabled || !content || resting,
 		"data-overflow-only": overflowOnly || void 0,
 		render: described ? cloneElement(anchor, { "aria-describedby": describedBy }) : children
 	});

package/dist/components/codeHighlight.d.ts

@@ -0,0 +1,9 @@
+export interface CodeToken {
+    content: string;
+    color?: string;
+    fontStyle?: 'italic';
+}
+/** Tokens for each line of `source`, at once when they are cached, otherwise
+ *  null now and `onReady` once the language has loaded. A language the
+ *  highlighter doesn't know reads as plain text. */
+export declare function highlightCode(source: string, language: string, incomplete: boolean, onReady: (lines: CodeToken[][]) => void): CodeToken[][] | null;

package/dist/components/codeHighlight.js

@@ -0,0 +1,29 @@
+import { CODE_THEMES } from "./codeTheme.js";
+import { code } from "@streamdown/code";
+//#region src/components/codeHighlight.ts
+var ITALIC = 1;
+function toLines(tokens) {
+	return tokens.map((line) => line.map((token) => {
+		const color = token.htmlStyle?.["color"] ?? token.color;
+		const italic = token.htmlStyle?.["font-style"] === "italic" || ((token.fontStyle ?? 0) & ITALIC) === ITALIC;
+		return {
+			content: token.content,
+			...color ? { color } : {},
+			...italic ? { fontStyle: "italic" } : {}
+		};
+	}));
+}
+/** Tokens for each line of `source`, at once when they are cached, otherwise
+*  null now and `onReady` once the language has loaded. A language the
+*  highlighter doesn't know reads as plain text. */
+function highlightCode(source, language, incomplete, onReady) {
+	const result = code.highlight({
+		code: source,
+		language: language || "text",
+		themes: CODE_THEMES,
+		isIncomplete: incomplete
+	}, (later) => onReady(toLines(later.tokens)));
+	return result ? toLines(result.tokens) : null;
+}
+//#endregion
+export { highlightCode };

package/dist/components/pageHeaderStore.d.ts

@@ -7,12 +7,16 @@ export type PageHeaderRegion = 'titleActions' | 'actions' | 'toolbar';
 export type RegionNodes = Readonly<Record<PageHeaderRegion, HTMLElement>>;
 export interface Declaration {
     breadcrumbs: readonly Breadcrumb[] | undefined;
+    /** Whether the trail's last crumb is the page's `h1`. */
+    heading: boolean;
     hidden: boolean;
     nodes: RegionNodes | null;
     fills: Readonly<Record<PageHeaderRegion, boolean>>;
 }
 export interface PageHeaderSnapshot {
     breadcrumbs: readonly Breadcrumb[];
+    /** Whether the trail's last crumb is the page's `h1`, as the page whose trail it is says. */
+    heading: boolean;
     hidden: boolean;
     titleActions: readonly HTMLElement[];
     actions: readonly HTMLElement[];

package/dist/components/pageHeaderStore.js

@@ -4,6 +4,7 @@ var NO_NODES = [];
 var NO_CRUMBS = [];
 var EMPTY = {
 	breadcrumbs: NO_CRUMBS,
+	heading: true,
 	hidden: false,
 	titleActions: NO_NODES,
 	actions: NO_NODES,
@@ -15,7 +16,7 @@ function sameCrumbs(a, b) {
 	return a.every((crumb, i) => crumb.label === b[i]?.label && crumb.href === b[i]?.href);
 }
 function sameDeclaration(a, b) {
-	return sameCrumbs(a.breadcrumbs, b.breadcrumbs) && a.hidden === b.hidden && a.nodes === b.nodes && a.fills.titleActions === b.fills.titleActions && a.fills.actions === b.fills.actions && a.fills.toolbar === b.fills.toolbar;
+	return sameCrumbs(a.breadcrumbs, b.breadcrumbs) && a.heading === b.heading && a.hidden === b.hidden && a.nodes === b.nodes && a.fills.titleActions === b.fills.titleActions && a.fills.actions === b.fills.actions && a.fills.toolbar === b.fills.toolbar;
 }
 function sameNodes(a, b) {
 	return a.length === b.length && a.every((node, i) => node === b[i]);
@@ -54,10 +55,12 @@ var PageHeaderStore = class {
 			const next = ordered.flatMap((d) => d.nodes && d.fills[region] ? [d.nodes[region]] : []);
 			return sameNodes(next, prev) ? prev : next;
 		};
-		const trail = ordered.findLast((d) => d.breadcrumbs !== void 0)?.breadcrumbs ?? NO_CRUMBS;
+		const owner = ordered.findLast((d) => d.breadcrumbs !== void 0);
+		const trail = owner?.breadcrumbs ?? NO_CRUMBS;
 		const prev = this.snapshot;
 		this.snapshot = {
 			breadcrumbs: sameCrumbs(trail, prev.breadcrumbs) ? prev.breadcrumbs : trail,
+			heading: owner?.heading ?? true,
 			hidden: ordered.some((d) => d.hidden),
 			titleActions: regionNodes("titleActions", prev.titleActions),
 			actions: regionNodes("actions", prev.actions),

package/dist/file-explorer/FileExplorer.js

@@ -13,9 +13,9 @@ import { useCopy } from "../components/useCopy.js";
 import { Breadcrumbs } from "../components/Breadcrumbs.js";
 import { Button } from "../components/Button.js";
 import { Callout } from "../components/Callout.js";
+import { CopyButton, CopyCodeBlock } from "../components/CopyButton.js";
 import { InfoTip } from "../components/InfoTip.js";
 import { ConfirmModal } from "../components/ConfirmModal.js";
-import { CopyButton, CopyCodeBlock } from "../components/CopyButton.js";
 import { CreateModal } from "../components/CreateModal.js";
 import { useSplitter } from "../components/splitter.js";
 import { formatBytes, formatDateTime } from "../format.js";

package/dist/index.d.ts

@@ -5,8 +5,9 @@ export { type Breadcrumb, Breadcrumbs, type BreadcrumbsProps } from './component
 export { Button, type ButtonProps, MethodButton } from './components/Button.js';
 export { type ButtonSize, type ButtonStyle, type ButtonVariant, buttonClasses, } from './components/buttonClasses.js';
 export { Callout, type CalloutProps, type CalloutTone } from './components/Callout.js';
-export { Card, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardSize, } from './components/Card.js';
+export { Card, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardSize, type CardTone, } from './components/Card.js';
 export { Checkbox, CheckboxGroup, type CheckboxProps } from './components/Checkbox.js';
+export { CodeBlock, type CodeBlockProps } from './components/CodeBlock.js';
 export { ColorInput, type ColorInputProps } from './components/ColorInput.js';
 export { Autocomplete, type AutocompleteProps, Combobox, type ComboboxGroup, type ComboboxItem, type ComboboxItems, type ComboboxProps, } from './components/Combobox.js';
 export { ConfirmModal, type ConfirmModalProps, type ConfirmRequest, useConfirm, } from './components/ConfirmModal.js';

package/dist/index.js

@@ -23,6 +23,8 @@ import { Callout } from "./components/Callout.js";
 import { Card, CardHeader } from "./components/Card.js";
 import { fieldBox } from "./components/fieldBox.js";
 import { Checkbox, CheckboxGroup } from "./components/Checkbox.js";
+import { CopyButton, CopyCodeBlock } from "./components/CopyButton.js";
+import { CodeBlock } from "./components/CodeBlock.js";
 import { JND, composite, deltaE, parseColor, toHex, toP3 } from "./theme/color.js";
 import { apcaContrast, contrastRatio, isDarkColor } from "./theme/contrast.js";
 import { CODE_STYLES, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, resolveMode, schemeFor, serializeTheme } from "./theme/model.js";
@@ -40,7 +42,6 @@ import { Tag, TagList, normalizeTags, tagClasses } from "./components/Tag.js";
 import { Autocomplete, Combobox } from "./components/Combobox.js";
 import { Modal, ModalDescription, ModalTitle, modalPanelClassName } from "./components/Modal.js";
 import { ConfirmModal, useConfirm } from "./components/ConfirmModal.js";
-import { CopyButton, CopyCodeBlock } from "./components/CopyButton.js";
 import { Disclosure, DisclosurePanel, collapsePanelClassName } from "./components/Disclosure.js";
 import { Switch } from "./components/Switch.js";
 import { CreateModal, CreateModalSelect, CreateModalSwitch } from "./components/CreateModal.js";
@@ -83,4 +84,4 @@ import { ToggleGroup } from "./components/ToggleGroup.js";
 import { useClosingValue } from "./components/useClosingValue.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartTooltipContent, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useCloseMenu, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartTooltipContent, Checkbox, CheckboxGroup, CodeBlock, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useCloseMenu, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/list/ListFilterBar.js

@@ -9,7 +9,7 @@ import { Input } from "../components/Input.js";
 import { Combobox } from "../components/Combobox.js";
 import { Calendar } from "../components/DatePicker.js";
 import { Drawer } from "../components/Drawer.js";
-import { DATE_PRESETS, fieldOperators, isDatePreset, isMultiple, parseDay, toDay } from "./filterModel.js";
+import { DATE_PRESETS, fieldOperators, isDatePreset, isMultiple, operatorCount, parseDay, toDay } from "./filterModel.js";
 import { Menu } from "@base-ui/react/menu";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -81,7 +81,7 @@ function FilterChip({ filters, filter, field, stretch = false, answers, onRemove
 	const shown = all.slice(0, 2);
 	const hidden = all.length - shown.length;
 	const valueText = unset ? showsAny ? t.any : t.pending : t.list(shown);
-	const operatorText = t.operator(filter.op, filter.values.length);
+	const operatorText = t.operator(filter.op, operatorCount(field, filter));
 	const noValuePart = filter.op === "isSet" || filter.op === "isNotSet" || field.kind === "boolean" && filter.values[0] !== "false";
 	const noOperatorPart = showsAny || field.kind === "boolean" && filter.values[0] !== "false";
 	const readAll = unset ? valueText : t.list(all);
@@ -121,6 +121,7 @@ function FilterChip({ filters, filter, field, stretch = false, answers, onRemove
 			}),
 			!noOperatorPart && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Divider, {}), operators.length > 1 ? /* @__PURE__ */ jsx(OperatorMenu, {
 				filters,
+				field,
 				filter,
 				operators,
 				open: open === "operator",
@@ -218,9 +219,9 @@ function FieldMenu({ filters, field, open, onOpenChange }) {
 		})]
 	});
 }
-function OperatorMenu({ filters, filter, operators, open, onOpenChange }) {
+function OperatorMenu({ filters, field, filter, operators, open, onOpenChange }) {
 	const t = useStrings().filters;
-	const count = filter.values.length;
+	const count = operatorCount(field, filter);
 	const text = t.operator(filter.op, count);
 	return /* @__PURE__ */ jsxs(Menu.Root, {
 		open,
@@ -246,7 +247,7 @@ function OperatorMenu({ filters, filter, operators, open, onOpenChange }) {
 			},
 			children: operators.map((op) => /* @__PURE__ */ jsx(MenuRadioItem, {
 				value: op,
-				children: t.operator(op, Math.max(count, 1))
+				children: t.operator(op, count)
 			}, op))
 		}) })]
 	});

package/dist/list/filterModel.d.ts

@@ -79,6 +79,10 @@ export type DatePreset = (typeof DATE_PRESETS)[number];
 type AnyField = FilterField<any>;
 export declare function fieldOperators(field: AnyField): readonly FilterOperator[];
 export declare function isMultiple(field: AnyField): boolean;
+/** How many values a condition's words are for: the values chosen, and one while none is, so a
+ *  chip just added reads "is" rather than "is any of"; never more than one where only one can be
+ *  chosen. Hosts that word the condition by count, as a plural rule does, get the right form. */
+export declare function operatorCount(field: AnyField, filter: ActiveFilter): number;
 /** Whether a filter narrows anything yet: a value chosen, or a condition that needs none. */
 export declare function isComplete(filter: ActiveFilter): boolean;
 /** Whether two sets of filters say the same, ignoring order, as Save or Update buttons ask. */

package/dist/list/filterModel.js

@@ -25,6 +25,12 @@ function fieldOperators(field) {
 function isMultiple(field) {
 	return (field.kind === "enum" || field.kind === "people") && field.multiple !== false;
 }
+/** How many values a condition's words are for: the values chosen, and one while none is, so a
+*  chip just added reads "is" rather than "is any of"; never more than one where only one can be
+*  chosen. Hosts that word the condition by count, as a plural rule does, get the right form. */
+function operatorCount(field, filter) {
+	return isMultiple(field) ? Math.max(filter.values.length, 1) : 1;
+}
 /** Whether a filter narrows anything yet: a value chosen, or a condition that needs none. */
 function isComplete(filter) {
 	if (filter.op === "isSet" || filter.op === "isNotSet") return true;
@@ -305,4 +311,4 @@ function applyFilterList(rows, filters, fields, now = /* @__PURE__ */ new Date()
 	return rows.filter((row) => checks.every(({ field, filter }) => matchFilter(field, filter, row, now)));
 }
 //#endregion
-export { DATE_PRESETS, applyFilterList, dateFilterRange, decodeFilters, encodeFilters, fieldOperators, filterParamKeys, fromStored, isComplete, isDatePreset, isMultiple, matchFilter, parseDay, sameFilters, toDay, toStored, withFilterParams };
+export { DATE_PRESETS, applyFilterList, dateFilterRange, decodeFilters, encodeFilters, fieldOperators, filterParamKeys, fromStored, isComplete, isDatePreset, isMultiple, matchFilter, operatorCount, parseDay, sameFilters, toDay, toStored, withFilterParams };

package/dist/styles/theme.css

@@ -61,6 +61,7 @@
   --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-backdrop: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.65));
   --theme-code-bg: light-dark(#e7eaee, #1c242c);
   --theme-code-text: light-dark(#1c2330, #e1e9f2);
   --theme-code-comment: light-dark(#555d6c, #c0c8d1);