@parallelworks/ui 0.59.0 → 0.61.0

package/README.md

@@ -74,6 +74,7 @@ Each need has one component. Reach for it before styling markup by hand.
 | Free text with suggestions, or tags | `Autocomplete`; `Combobox` with `multiple creatable` |
 | A range | `Slider` |
 | A page's breadcrumbs, title and commands | `PageHeader`, shown by the shell's `PageHeaderBar` (see [Page header](#page-header)) |
+| A trail anywhere else, such as a folder's path in a panel | `Breadcrumbs`, which folds as the header's trail does |
 | An action in the page header | `PageHeaderAction`; `PageHeaderAddButton` for "+ Add" or "+ Create"; `PageHeaderMenu` for the "…" menu |
 | A titled part of a page or form | `Section` |
 | More detail under a line | `Disclosure` |
@@ -173,7 +174,12 @@ A page declares its header in one place, and the shell shows it:
   trail is a list in a `nav` landmark named by the strings' `breadcrumb`. A
   trail too wide for its bar folds its ancestors into a "…" menu of links
   (named by `showFullPath`), keeping the parent when it fits beside the page's
-  name; the name truncates last, with the full name on hover.
+  name; the name truncates last, with the full name on hover. The bar draws it
+  with `Breadcrumbs`, which renders the same trail anywhere else: in a flex
+  row it takes the room the row's other items leave it, and elsewhere its
+  container's width. `current="location"` marks a place within the page, such
+  as the open folder, and `heading` makes the last crumb the page's `h1`, as
+  the bar does.
 - **`titleActions`** sit beside the title, for actions on the page's subject.
   **`actions`** sit at the end of the bar, for the page's commands: a detail
   page's Start, Stop or Terminal go here, not in a row of buttons below it.
@@ -479,6 +485,7 @@ where it opens elsewhere, and renders it through `AppLink`:
 | `Button`, `IconButton`, `Card` | `href` |
 | Menu rows, `RowAction`s (a list row's menu and pinned buttons), `ToolbarAction`s | `href` on the action, with `target: '_blank'` for a new tab |
 | `PageHeaderAction`, `PageHeaderAddButton`, `PageHeader` breadcrumbs | `href`; `external` opens a new tab |
+| `Breadcrumbs` | `href` on the crumb; `onSelect` only for a place with no URL, as the explorer's trail without `pathHref` |
 | `Tabs` that are pages, `Pagination` | `href` on the item, `pageHref` |
 | A list row | `ListRow` `href` with a `NameCell` of the same `href`: the name's link covers the row |
 | A toast's action | `action: { label, href }` |

package/dist/access/AccessDrawer.js

@@ -2,10 +2,10 @@ import { AddIcon, LockIcon, UsersIcon } from "../icons.js";
 import { toast } from "../components/Toast.js";
 import { EmptyState } from "../components/EmptyState.js";
 import { useQueryMatch } from "../components/search.js";
+import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { Button } from "../components/Button.js";
 import { Callout } from "../components/Callout.js";
 import { Drawer } from "../components/Drawer.js";
-import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { SearchInput } from "../components/SearchInput.js";
 import { SegmentedControl } from "../components/SegmentedControl.js";
 import { buildModel, invert, key, principalsWithAccess, warnAboutMisuse } from "./model.js";

package/dist/access/PrincipalPicker.js

@@ -3,9 +3,9 @@ import { OrganizationIcon, RefreshIcon, UsersIcon } from "../icons.js";
 import { useQueryMatch } from "../components/search.js";
 import { categoryClasses } from "../components/category.js";
 import { Avatar } from "../components/Avatar.js";
+import { Skeleton } from "../components/Skeleton.js";
 import { Callout } from "../components/Callout.js";
 import { Combobox } from "../components/Combobox.js";
-import { Skeleton } from "../components/Skeleton.js";
 import { useRelativeTime } from "../components/relativeTime.js";
 import { StatusBadge } from "../components/StatusBadge.js";
 import { covers, isOwner } from "./model.js";

package/dist/ai/ui/ConversationSidebar.js

@@ -1,9 +1,9 @@
 import { cx } from "../../cx.js";
 import { positionKeys } from "../../components/keys.js";
 import { usePersistedState } from "../../components/Provider.js";
+import { LoadingRegion, Skeleton } from "../../components/Skeleton.js";
 import { useSplitter } from "../../components/splitter.js";
 import { Drawer } from "../../components/Drawer.js";
-import { LoadingRegion, Skeleton } from "../../components/Skeleton.js";
 import { SidebarGroupHeading, SidebarPanel, SidebarToggle } from "./sidebar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, useEffect, useRef } from "react";

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,33 @@
+/** One step of the trail to the current page. */
+export interface Breadcrumb {
+    /** Empty while the name is still loading: the trail shows a placeholder. */
+    label: string;
+    href?: string | undefined;
+}
+export interface BreadcrumbsProps {
+    /** The trail, ending with where the reader is. A crumb with an empty label,
+     *  such as a name still loading, shows a placeholder. */
+    crumbs: readonly Breadcrumb[];
+    /** Goes to a crumb that has no `href`: a place with no URL, such as a folder
+     *  in a view that keeps its path out of the URL. A crumb with a URL takes
+     *  `href` instead, so it opens in a new tab. Without either, a crumb is
+     *  text. */
+    onSelect?: ((crumb: Breadcrumb, index: number) => void) | undefined;
+    /** What the last crumb is: the page itself, or a place within the page, such
+     *  as the open folder. */
+    current?: 'page' | 'location' | undefined;
+    /** Makes the last crumb the page's `h1`, as `PageHeader` does. A page has
+     *  one. */
+    heading?: boolean | undefined;
+    /** Names the landmark; the strings' `breadcrumb` by default. */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * The trail to where the reader is, as a list in a `nav` landmark. A trail too
+ * wide for its room folds its ancestors into a "…" menu, keeping the parent
+ * when it fits beside the last crumb, which truncates last, with its full name
+ * on hover. In a flex row its room is what the row's other items leave it;
+ * elsewhere it fills its container's width.
+ */
+export declare function Breadcrumbs({ crumbs, onSelect, current, heading, label, className, }: BreadcrumbsProps): import("react").JSX.Element;

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,203 @@
+import { cx } from "../cx.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { ChevronRightIcon, MoreIcon } from "../icons.js";
+import { keyedByContent } from "./keys.js";
+import { Tooltip } from "./Tooltip.js";
+import { useStrings } from "./Provider.js";
+import { AppLink } from "./AppLink.js";
+import { ActionMenu } from "./ActionMenu.js";
+import { Skeleton } from "./Skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useState } from "react";
+//#region src/components/Breadcrumbs.tsx
+/**
+* The trail to where the reader is, as a list in a `nav` landmark. A trail too
+* wide for its room folds its ancestors into a "…" menu, keeping the parent
+* when it fits beside the last crumb, which truncates last, with its full name
+* on hover. In a flex row its room is what the row's other items leave it;
+* elsewhere it fills its container's width.
+*/
+function Breadcrumbs({ crumbs, onSelect, current = "page", heading = false, label, className }) {
+	const { common } = useStrings();
+	const [nav, setNav] = useState(null);
+	const [natural, setNatural] = useState(null);
+	const fit = useTrailFit(nav, natural);
+	const last = crumbs[crumbs.length - 1];
+	const ancestors = crumbs.slice(0, -1);
+	const folded = fit === "none" ? ancestors : fit === "parent" ? ancestors.slice(0, -1) : [];
+	const shown = ancestors.slice(folded.length);
+	const Last = heading ? "h1" : "span";
+	const menuItem = (crumb, index) => {
+		const name = crumb.label || common.loading;
+		if (crumb.href) return {
+			label: name,
+			href: crumb.href
+		};
+		if (onSelect) return {
+			label: name,
+			onClick: () => onSelect(crumb, index)
+		};
+		return {
+			label: name,
+			disabled: true,
+			onClick: () => {}
+		};
+	};
+	return /* @__PURE__ */ jsxs("nav", {
+		ref: setNav,
+		"aria-label": label ?? common.breadcrumb,
+		className: cx("relative min-w-0", className),
+		children: [/* @__PURE__ */ jsxs("ol", {
+			className: "m-0 flex min-w-0 list-none items-center gap-1.5 p-0 text-[13px] leading-none",
+			children: [
+				folded.length > 0 && /* @__PURE__ */ jsxs("li", {
+					className: "flex shrink-0 items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(ActionMenu, {
+						label: common.showFullPath,
+						align: "start",
+						items: folded.map(menuItem),
+						triggerClassName: buttonClasses({
+							variant: "ghost",
+							size: "xs",
+							iconOnly: true
+						}),
+						children: /* @__PURE__ */ jsx(MoreIcon, {})
+					}), /* @__PURE__ */ jsx(Separator, {})]
+				}),
+				keyedByContent(shown, (c) => c.href ?? c.label).map(({ key, item: crumb }, i) => {
+					const index = folded.length + i;
+					return /* @__PURE__ */ jsxs("li", {
+						className: cx("flex items-center gap-1.5", folded.length > 0 ? "min-w-0 max-w-36 shrink-0" : "min-w-0"),
+						children: [crumb.label === "" ? /* @__PURE__ */ jsx(CrumbPlaceholder, {}) : /* @__PURE__ */ jsx(Tooltip, {
+							content: crumb.label,
+							overflowOnly: true,
+							children: crumb.href ? /* @__PURE__ */ jsx(AppLink, {
+								href: crumb.href,
+								className: cx(crumbText, crumbLink, "max-w-48"),
+								children: crumb.label
+							}) : onSelect ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => onSelect(crumb, index),
+								className: cx(crumbText, crumbLink, "max-w-48 cursor-pointer text-start"),
+								children: crumb.label
+							}) : /* @__PURE__ */ jsx("span", {
+								className: cx(crumbText, "max-w-48"),
+								children: crumb.label
+							})
+						}), /* @__PURE__ */ jsx(Separator, {})]
+					}, key);
+				}),
+				last && /* @__PURE__ */ jsx("li", {
+					className: "flex min-w-0 items-center",
+					children: last.label === "" ? /* @__PURE__ */ jsx(Last, {
+						"aria-current": current,
+						className: "m-0",
+						children: /* @__PURE__ */ jsx(CrumbPlaceholder, {})
+					}) : /* @__PURE__ */ jsx(Tooltip, {
+						content: last.label,
+						overflowOnly: true,
+						children: /* @__PURE__ */ jsx(Last, {
+							"aria-current": current,
+							className: "m-0 block truncate text-[13px] font-medium leading-none text-(--theme-app)",
+							children: last.label
+						})
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			className: "pointer-events-none invisible absolute inset-0 overflow-hidden",
+			children: /* @__PURE__ */ jsx("div", {
+				ref: setNatural,
+				className: "flex w-max items-center gap-1.5 whitespace-nowrap text-[13px] leading-none",
+				children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx(i < crumbs.length - 1 && "max-w-48 truncate", i === crumbs.length - 1 && "font-medium"),
+						children: crumb.label || " ".repeat(6)
+					}), i < crumbs.length - 1 && /* @__PURE__ */ jsx(Separator, {})]
+				}, i))
+			})
+		})]
+	});
+}
+var crumbText = "block truncate text-(--theme-muted-text-color)";
+var crumbLink = "rounded-sm transition-colors hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-link)";
+function Separator() {
+	return /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3 shrink-0 text-(--theme-muted-text-color) opacity-60 rtl:rotate-180" });
+}
+function CrumbPlaceholder() {
+	const { common } = useStrings();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center",
+		children: [/* @__PURE__ */ jsx(Skeleton, {
+			width: "6rem",
+			height: "0.8125rem"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: common.loading
+		})]
+	});
+}
+var FOLD_WIDTH = 48;
+var PARENT_MAX_WIDTH = 144;
+var LAST_MIN_WIDTH = 128;
+var px = (value) => Number.parseFloat(value) || 0;
+/** The width the trail may take. A flex row sizes the trail to its content, so
+*  its room is what the row leaves beside its other items; anywhere else the
+*  `nav` is a block that fills its container. */
+function roomFor(nav, row) {
+	const style = getComputedStyle(row);
+	if (!style.display.endsWith("flex") || style.flexDirection.startsWith("column")) return nav.clientWidth;
+	const gap = px(style.columnGap);
+	let room = row.clientWidth - px(style.paddingLeft) - px(style.paddingRight);
+	for (const child of row.children) if (child !== nav) room -= child.getBoundingClientRect().width + gap;
+	return room;
+}
+/**
+* Fits the trail to its room. It measures a hidden copy of the trail at its
+* natural width, so the answer doesn't depend on how the trail is folded at the
+* moment.
+*/
+function useTrailFit(nav, natural) {
+	const [fit, setFit] = useState("all");
+	useLayoutEffect(() => {
+		const row = nav?.parentElement;
+		if (!nav || !natural || !row) return;
+		const measure = () => {
+			const room = roomFor(nav, row);
+			if (natural.scrollWidth <= room) {
+				setFit("all");
+				return;
+			}
+			const steps = [...natural.children];
+			const width = (el) => el?.getBoundingClientRect().width ?? 0;
+			const parent = Math.min(width(steps[steps.length - 2]), PARENT_MAX_WIDTH);
+			const last = Math.min(width(steps[steps.length - 1]), LAST_MIN_WIDTH);
+			setFit(FOLD_WIDTH + parent + last <= room ? "parent" : "none");
+		};
+		const resize = new ResizeObserver(measure);
+		const observe = () => {
+			for (const el of [
+				row,
+				nav,
+				natural,
+				...row.children
+			]) resize.observe(el);
+		};
+		const added = new MutationObserver(() => {
+			observe();
+			measure();
+		});
+		measure();
+		observe();
+		added.observe(row, { childList: true });
+		return () => {
+			resize.disconnect();
+			added.disconnect();
+		};
+	}, [nav, natural]);
+	return fit;
+}
+//#endregion
+export { Breadcrumbs };

package/dist/components/ColorInput.d.ts

@@ -9,6 +9,8 @@ export interface ColorInputProps {
     label?: ReactNode;
     /** Beside the label and outside it, so it stays out of the field's name. */
     hint?: ReactNode;
+    /** Buttons at the far end of the label's row that act on the color, as Field's `actions`. */
+    actions?: ReactNode;
     /** Help under the field. */
     description?: ReactNode;
     error?: ReactNode;
@@ -33,4 +35,4 @@ export interface ColorInputProps {
  * in. A half-typed color stays in the field, marked invalid, until it parses; leaving the field
  * puts back the last color that did.
  */
-export declare function ColorInput({ value, onValueChange, label, hint, description, error, size, id, name, disabled, required, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, }: ColorInputProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export declare function ColorInput({ value, onValueChange, label, hint, actions, description, error, size, id, name, disabled, required, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, }: ColorInputProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/components/ColorInput.js

@@ -14,7 +14,7 @@ var swatchClassName = cx("shrink-0 cursor-pointer p-0.5", "[&::-webkit-color-swa
 * in. A half-typed color stays in the field, marked invalid, until it parses; leaving the field
 * puts back the last color that did.
 */
-function ColorInput({ value, onValueChange, label, hint, description, error, size = "md", id, name, disabled, required, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className }) {
+function ColorInput({ value, onValueChange, label, hint, actions, description, error, size = "md", id, name, disabled, required, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className }) {
 	const t = useStrings().colorInput;
 	const [draft, setDraft] = useState(null);
 	const errorId = useId();
@@ -25,6 +25,7 @@ function ColorInput({ value, onValueChange, label, hint, description, error, siz
 	return framed({
 		label,
 		hint,
+		actions,
 		description,
 		error: error ?? (unparsed ? t.invalid : void 0),
 		size

package/dist/components/Input.d.ts

@@ -22,7 +22,9 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     ref?: Ref<HTMLTextAreaElement> | undefined;
 }
 /** The Field around a control when it has a label; the control alone when it doesn't. */
-export declare function framed({ label, hint, help, description, error, size }: Omit<FramedProps, 'mono'>, { id, required, disabled, }: {
+export declare function framed({ label, hint, help, actions, description, error, size, }: Omit<FramedProps, 'mono'> & {
+    actions?: ReactNode;
+}, { id, required, disabled, }: {
     id?: string | undefined;
     required?: boolean | undefined;
     disabled?: boolean | undefined;

package/dist/components/Input.js

@@ -6,12 +6,13 @@ import { useState } from "react";
 import { Input } from "@base-ui/react/input";
 //#region src/components/Input.tsx
 /** The Field around a control when it has a label; the control alone when it doesn't. */
-function framed({ label, hint, help, description, error, size }, { id, required, disabled }, control) {
+function framed({ label, hint, help, actions, description, error, size }, { id, required, disabled }, control) {
 	if (label === void 0) return control(error ? { "aria-invalid": true } : {});
 	return /* @__PURE__ */ jsx(Field, {
 		label,
 		hint,
 		help,
+		actions,
 		description,
 		error,
 		required,

package/dist/components/PageHeader.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import { type Breadcrumb } from './pageHeaderStore.js';
-export type { Breadcrumb } from './pageHeaderStore.js';
+import { type Breadcrumb } from './Breadcrumbs.js';
+export type { Breadcrumb } from './Breadcrumbs.js';
 /**
  * Holds the header the current page declares, for the `PageHeaderBar` the
  * shell renders. Wrap the shell, above both the bar and the routes.

package/dist/components/PageHeader.js

@@ -1,12 +1,6 @@
 import { cx } from "../cx.js";
-import { buttonClasses } from "./buttonClasses.js";
-import { ChevronRightIcon, MoreIcon } from "../icons.js";
-import { keyedByContent } from "./keys.js";
-import { Tooltip } from "./Tooltip.js";
-import { useSlots, useStrings } from "./Provider.js";
-import { AppLink } from "./AppLink.js";
-import { ActionMenu } from "./ActionMenu.js";
-import { Skeleton } from "./Skeleton.js";
+import { useSlots } from "./Provider.js";
+import { Breadcrumbs } from "./Breadcrumbs.js";
 import { PageHeaderStore } from "./pageHeaderStore.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useLayoutEffect, useState, useSyncExternalStore } from "react";
@@ -146,7 +140,10 @@ function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, compact = f
 				className: "flex min-w-0 flex-1 items-center gap-2",
 				children: [
 					navToggle?.(),
-					hasTrail && /* @__PURE__ */ jsx(BreadcrumbTrail, { crumbs: breadcrumbs }),
+					hasTrail && /* @__PURE__ */ jsx(Breadcrumbs, {
+						crumbs: breadcrumbs,
+						heading: true
+					}),
 					present(titleActions) && /* @__PURE__ */ jsx("div", {
 						className: "flex shrink-0 items-center gap-0.5",
 						children: titleActions
@@ -163,141 +160,5 @@ function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, compact = f
 		})]
 	});
 }
-var crumbText = "block truncate text-(--theme-muted-text-color)";
-var crumbLink = "rounded-sm transition-colors hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-link)";
-function Separator() {
-	return /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3 shrink-0 text-(--theme-muted-text-color) opacity-60" });
-}
-var FOLD_WIDTH = 48;
-var PARENT_MAX_WIDTH = 144;
-var TITLE_MIN_WIDTH = 128;
-/**
-* Fits the trail to the room its row leaves it. It measures a hidden copy of
-* the trail at its natural width against the row's width less its other items,
-* so the answer doesn't depend on how the trail is folded at the moment.
-*/
-function useTrailFit(nav, natural) {
-	const [fit, setFit] = useState("all");
-	useLayoutEffect(() => {
-		const row = nav?.parentElement;
-		if (!nav || !natural || !row) return;
-		const measure = () => {
-			const gap = Number.parseFloat(getComputedStyle(row).columnGap) || 0;
-			let room = row.clientWidth;
-			for (const child of row.children) if (child !== nav) room -= child.getBoundingClientRect().width + gap;
-			if (natural.scrollWidth <= room) {
-				setFit("all");
-				return;
-			}
-			const steps = [...natural.children];
-			const width = (el) => el?.getBoundingClientRect().width ?? 0;
-			const parent = Math.min(width(steps[steps.length - 2]), PARENT_MAX_WIDTH);
-			const title = Math.min(width(steps[steps.length - 1]), TITLE_MIN_WIDTH);
-			setFit(FOLD_WIDTH + parent + title <= room ? "parent" : "none");
-		};
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(row);
-		observer.observe(natural);
-		return () => observer.disconnect();
-	}, [nav, natural]);
-	return fit;
-}
-function BreadcrumbTrail({ crumbs }) {
-	const { common } = useStrings();
-	const [nav, setNav] = useState(null);
-	const [natural, setNatural] = useState(null);
-	const fit = useTrailFit(nav, natural);
-	const current = crumbs[crumbs.length - 1];
-	const ancestors = crumbs.slice(0, -1);
-	const folded = fit === "none" ? ancestors : fit === "parent" ? ancestors.slice(0, -1) : [];
-	const shown = ancestors.slice(folded.length);
-	return /* @__PURE__ */ jsxs("nav", {
-		ref: setNav,
-		"aria-label": common.breadcrumb,
-		className: "relative min-w-0",
-		children: [/* @__PURE__ */ jsxs("ol", {
-			className: "m-0 flex min-w-0 list-none items-center gap-1.5 p-0 text-[13px] leading-none",
-			children: [
-				folded.length > 0 && /* @__PURE__ */ jsxs("li", {
-					className: "flex shrink-0 items-center gap-1.5",
-					children: [/* @__PURE__ */ jsx(ActionMenu, {
-						label: common.showFullPath,
-						align: "start",
-						items: folded.map((crumb) => crumb.href ? {
-							label: crumb.label,
-							href: crumb.href
-						} : {
-							label: crumb.label,
-							disabled: true,
-							onClick: () => {}
-						}),
-						triggerClassName: buttonClasses({
-							variant: "ghost",
-							size: "xs",
-							iconOnly: true
-						}),
-						children: /* @__PURE__ */ jsx(MoreIcon, {})
-					}), /* @__PURE__ */ jsx(Separator, {})]
-				}),
-				keyedByContent(shown, (c) => c.href ?? c.label).map(({ key, item: crumb }) => /* @__PURE__ */ jsxs("li", {
-					className: cx("flex items-center gap-1.5", folded.length > 0 ? "min-w-0 max-w-36 shrink-0" : "min-w-0"),
-					children: [crumb.label === "" ? /* @__PURE__ */ jsx(CrumbPlaceholder, {}) : /* @__PURE__ */ jsx(Tooltip, {
-						content: crumb.label,
-						overflowOnly: true,
-						children: crumb.href ? /* @__PURE__ */ jsx(AppLink, {
-							href: crumb.href,
-							className: cx(crumbText, crumbLink, "max-w-48"),
-							children: crumb.label
-						}) : /* @__PURE__ */ jsx("span", {
-							className: cx(crumbText, "max-w-48"),
-							children: crumb.label
-						})
-					}), /* @__PURE__ */ jsx(Separator, {})]
-				}, key)),
-				current && /* @__PURE__ */ jsx("li", {
-					className: "flex min-w-0 items-center",
-					children: current.label === "" ? /* @__PURE__ */ jsx("h1", {
-						"aria-current": "page",
-						className: "m-0",
-						children: /* @__PURE__ */ jsx(CrumbPlaceholder, {})
-					}) : /* @__PURE__ */ jsx(Tooltip, {
-						content: current.label,
-						overflowOnly: true,
-						children: /* @__PURE__ */ jsx("h1", {
-							"aria-current": "page",
-							className: "m-0 truncate text-[13px] font-medium leading-none text-(--theme-app)",
-							children: current.label
-						})
-					})
-				})
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			ref: setNatural,
-			"aria-hidden": true,
-			className: "invisible absolute top-0 left-0 flex items-center gap-1.5 whitespace-nowrap text-[13px] leading-none",
-			children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs("span", {
-				className: "flex items-center gap-1.5",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: cx(i < crumbs.length - 1 && "max-w-48 truncate", i === crumbs.length - 1 && "font-medium"),
-					children: crumb.label || " ".repeat(6)
-				}), i < crumbs.length - 1 && /* @__PURE__ */ jsx(Separator, {})]
-			}, i))
-		})]
-	});
-}
-function CrumbPlaceholder() {
-	const { common } = useStrings();
-	return /* @__PURE__ */ jsxs("span", {
-		className: "flex items-center",
-		children: [/* @__PURE__ */ jsx(Skeleton, {
-			width: "6rem",
-			height: "0.8125rem"
-		}), /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: common.loading
-		})]
-	});
-}
 //#endregion
 export { PageHeader, PageHeaderBar, PageHeaderProvider };

package/dist/components/Provider.d.ts

@@ -153,6 +153,8 @@ export interface UIStrings {
         /** The background a theme is generated from. */
         base: string;
         accent: string;
+        /** Exchanges the background and the accent. */
+        swap: string;
         contrast: string;
         /** Under the contrast slider. */
         contrastHelp: string;
@@ -639,7 +641,7 @@ export interface UIData {
     usePersistedState: PersistedStateHook;
 }
 import type { FieldComponent } from '../form/fieldRegistry.js';
-import type { Breadcrumb } from './pageHeaderStore.js';
+import type { Breadcrumb } from './Breadcrumbs.js';
 /** An internal navigation link, which hosts bind to their router's Link. Its
  *  `href` is a full in-app URL that may carry a search and a hash, such as
  *  `/runs/42?tab=logs#step-3`, and the host routes all of it client-side on a

package/dist/components/Provider.js

@@ -153,6 +153,7 @@ var DEFAULTS = {
 			presets: "Presets",
 			base: "Background",
 			accent: "Accent",
+			swap: "Swap background and accent",
 			contrast: "Contrast",
 			contrastHelp: "Separates surfaces and strengthens text. Text always meets WCAG AA.",
 			customSidebar: "Custom sidebar",

package/dist/components/ThemeEditor.js

@@ -1,7 +1,9 @@
 import { cx } from "../cx.js";
+import { SwapIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
 import { useCopy } from "./useCopy.js";
 import { Button } from "./Button.js";
+import { IconButton } from "./IconButton.js";
 import { fieldBox } from "./fieldBox.js";
 import { parseColor, toHex } from "../theme/color.js";
 import { CODE_STYLES, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, schemeFor, serializeTheme } from "../theme/model.js";
@@ -110,6 +112,14 @@ function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPrefer
 				}),
 				/* @__PURE__ */ jsx(ColorInput, {
 					label: t.accent,
+					actions: /* @__PURE__ */ jsx(IconButton, {
+						icon: /* @__PURE__ */ jsx(SwapIcon, { className: "rotate-90" }),
+						label: t.swap,
+						onClick: () => setSeed({
+							base: seed.accent,
+							accent: seed.base
+						})
+					}),
 					value: seed.accent,
 					onValueChange: (accent) => setSeed({ accent })
 				}),

package/dist/components/pageHeaderStore.d.ts

@@ -1,9 +1,4 @@
-/** One step of the trail to the current page. */
-export interface Breadcrumb {
-    /** Empty while the name is still loading: the bar shows a placeholder. */
-    label: string;
-    href?: string | undefined;
-}
+import type { Breadcrumb } from './Breadcrumbs.js';
 export type PageHeaderRegion = 'titleActions' | 'actions' | 'toolbar';
 /** The nodes a declaration portals its regions into. They are created with the
  *  declaration, before any bar exists, so its content renders on the first pass