@parallelworks/ui 0.60.0 → 0.62.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/Field.js

@@ -49,6 +49,7 @@ var labelSizes = {
 };
 var labelClassName = "flex items-center gap-1 font-medium";
 var actionsClassName = "ml-auto flex shrink-0 items-center gap-1";
+var controlFirstExtrasClassName = "ms-1 inline-flex items-center gap-1 align-[-0.125em]";
 var errorTextClassName = "flex items-center gap-1.5 text-xs text-(--theme-error-text)";
 /** An error in the look a Field gives its own, for a control outside a Field, or for a part of
 *  one rather than the whole of it, such as a row of a list editor. Give it an `id` and name it
@@ -188,7 +189,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 				className: "w-52 shrink-0"
 			}), /* @__PURE__ */ jsxs("div", {
 				ref: help ? setControlBox : void 0,
-				className: cx("flex w-fit max-w-full min-w-0 items-start gap-2", lined && labelSize.inlineLine, inRow && "row-start-2"),
+				className: cx("flex w-fit max-w-full min-w-0 items-start gap-2", lined ? labelSize.inlineLine : "py-0.5", inRow && "row-start-2"),
 				children: [/* @__PURE__ */ jsx("div", {
 					className: cx("flex h-lh shrink-0 items-center", labelSize.text),
 					...helpFocus,
@@ -197,10 +198,21 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 					className: "flex min-w-0 flex-col gap-1",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: cx("font-medium", labelSize.text, disabled && "opacity-60"),
-						children: [fieldLabel(disabled ? "cursor-not-allowed" : "cursor-pointer"), (help || hint || actions) && /* @__PURE__ */ jsx("span", {
-							className: "ms-1 inline-flex items-center gap-1 align-[-0.125em]",
-							children: labelExtras
-						})]
+						children: [
+							fieldLabel(disabled ? "cursor-not-allowed" : "cursor-pointer"),
+							helpTip && /* @__PURE__ */ jsx("span", {
+								className: controlFirstExtrasClassName,
+								children: helpTip
+							}),
+							hint && /* @__PURE__ */ jsx("span", {
+								className: "ms-1",
+								children: hint
+							}),
+							actions && /* @__PURE__ */ jsx("span", {
+								className: controlFirstExtrasClassName,
+								children: actions
+							})
+						]
 					}), messages]
 				})]
 			})]

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

@@ -641,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/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

package/dist/file-explorer/FileExplorer.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
 import { buttonClasses } from "../components/buttonClasses.js";
-import { AccessIcon, ChevronDownIcon, ChevronRightIcon, CollapseIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, FolderTreeIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon } from "../icons.js";
+import { AccessIcon, ChevronDownIcon, CollapseIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, FolderTreeIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon } from "../icons.js";
 import { MenuItem, MenuPopup, MenuSeparator } from "../components/Menu.js";
 import { safeUrl } from "../safeUrl.js";
 import { Loader } from "../components/Loader.js";
@@ -8,8 +8,8 @@ import { toast } from "../components/Toast.js";
 import { keyedByContent } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useNavigation, usePersistedState, useSlots, useStrings } from "../components/Provider.js";
-import { AppLink } from "../components/AppLink.js";
 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 { InfoTip } from "../components/InfoTip.js";
@@ -68,7 +68,6 @@ function UriCard({ value }) {
 		]
 	});
 }
-var breadcrumbClass = "max-w-[16rem] cursor-pointer truncate text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)";
 /** `href` resolved against the page, as the browser's "Copy link" gives it. */
 function absoluteUrl(href) {
 	const url = safeUrl(href);
@@ -720,36 +719,17 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			cur = treeMap[getParentPath(cur.path)];
 		}
 		if (chain.length === 0) return null;
-		return /* @__PURE__ */ jsx("nav", {
-			"aria-label": t.chrome.location,
-			className: "flex min-w-0 flex-1 overflow-hidden text-[13px]",
-			children: /* @__PURE__ */ jsx("ol", {
-				className: "flex min-w-0 items-center gap-1",
-				children: chain.map((node, i) => {
-					const isLast = i === chain.length - 1;
-					const label = node.displayName || node.name;
-					return /* @__PURE__ */ jsxs("li", {
-						className: "flex min-w-0 items-center gap-1",
-						children: [i > 0 && /* @__PURE__ */ jsx(ChevronRightIcon, {
-							"aria-hidden": "true",
-							className: "h-3 w-3 shrink-0 text-(--theme-muted-text-color) rtl:rotate-180"
-						}), isLast ? /* @__PURE__ */ jsx("span", {
-							"aria-current": "location",
-							className: "truncate font-semibold text-(--theme-app)",
-							children: label
-						}) : pathHref ? /* @__PURE__ */ jsx(AppLink, {
-							href: pathHref(node.path),
-							className: breadcrumbClass,
-							children: label
-						}) : /* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: () => handleSelectTreeItem(node.path, node),
-							className: breadcrumbClass,
-							children: label
-						})]
-					}, node.path);
-				})
-			})
+		return /* @__PURE__ */ jsx(Breadcrumbs, {
+			label: t.chrome.location,
+			current: "location",
+			crumbs: chain.map((node) => ({
+				label: node.displayName || node.name,
+				href: pathHref?.(node.path)
+			})),
+			onSelect: (_, i) => {
+				const node = chain[i];
+				if (node) handleSelectTreeItem(node.path, node);
+			}
 		});
 	};
 	const generateDownloadCommand = () => {

package/dist/file-explorer/helpers.js

@@ -2,10 +2,10 @@ import { cx } from "../cx.js";
 import { CustomizeIcon, DiskIcon, FileIcon, FileTextIcon, FolderIcon, ImageIcon, PdfIcon, RefreshIcon, RetryIcon, ShareIcon, SpreadsheetIcon, UserIcon, VideoIcon, WarningIcon, ZipIcon } from "../icons.js";
 import { toast } from "../components/Toast.js";
 import { usePersistedState, useProvisionCorsRules, useSlots, useStrings } from "../components/Provider.js";
+import { Skeleton } from "../components/Skeleton.js";
 import { Button } from "../components/Button.js";
 import { Callout } from "../components/Callout.js";
 import { ProgressBar } from "../components/Meter.js";
-import { Skeleton } from "../components/Skeleton.js";
 import { formatBytes } from "../format.js";
 import { useElapsed } from "../components/relativeTime.js";
 import { ListSkeleton } from "../list/ListTable.js";