@parallelworks/ui 0.58.0 → 0.60.0

package/dist/components/Field.js

@@ -37,12 +37,14 @@ var labelSizes = {
 	sm: {
 		text: "text-xs text-(--theme-muted-text-color)",
 		inlineHeight: "min-h-7",
-		stackGap: "gap-1"
+		stackGap: "gap-1",
+		inlineLine: "py-1.5"
 	},
 	md: {
 		text: "text-sm text-(--theme-app)",
 		inlineHeight: "min-h-9",
-		stackGap: "gap-1.5"
+		stackGap: "gap-1.5",
+		inlineLine: "py-2"
 	}
 };
 var labelClassName = "flex items-center gap-1 font-medium";
@@ -64,7 +66,7 @@ function ErrorText({ id, children }) {
 }
 /** A control with its label, help and error, tied to it for assistive technology. One frame
 *  for every field, in a form or standing alone. */
-function Field$1({ label, hint, help, actions, description, error, invalid, required = false, disabled = false, layout = "stacked", compact = false, size = "md", group = false, id: ownId, className, children }) {
+function Field$1({ label, hint, help, actions, description, error, invalid, required = false, disabled = false, layout = "stacked", compact = false, size = "md", group = false, controlFirst = false, id: ownId, className, children }) {
 	const uid = useId();
 	const id = ownId ?? `${uid}control`;
 	const labelId = `${uid}label`;
@@ -125,8 +127,8 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 		}
 	} : {};
 	const labelBox = cx(labelClassName, labelSize.text, inline && cx(labelSize.inlineHeight, "shrink-0", compact ? "mr-2 w-fit" : "w-52 pr-3"), inRow && "row-start-1 self-end");
-	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("span", { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] }),
+	const nameContent = /* @__PURE__ */ jsxs(Fragment, { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] });
+	const labelExtras = /* @__PURE__ */ jsxs(Fragment, { children: [
 		helpTip,
 		hint,
 		actions && /* @__PURE__ */ jsx("span", {
@@ -135,42 +137,83 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 		})
 	] });
 	const placed = typeof children === "function" ? children(control) : children;
+	const controlInContext = /* @__PURE__ */ jsx(FieldRowContext, {
+		value: false,
+		children: /* @__PURE__ */ jsx(ControlContext, {
+			value: controlContext,
+			children: placed
+		})
+	});
+	const messages = /* @__PURE__ */ jsxs(Fragment, { children: [
+		description && /* @__PURE__ */ jsx(Field.Description, {
+			id: descriptionId,
+			className: "text-xs leading-relaxed text-(--theme-muted-text-color)",
+			children: description
+		}),
+		help && /* @__PURE__ */ jsx(Field.Description, {
+			id: helpId,
+			hidden: true,
+			children: formatInfoTipContent(help)
+		}),
+		error && /* @__PURE__ */ jsxs(Field.Error, {
+			id: errorId,
+			match: true,
+			role: "alert",
+			className: errorTextClassName,
+			children: [/* @__PURE__ */ jsx(WarningIcon, {
+				"aria-hidden": "true",
+				className: "size-3.5 shrink-0"
+			}), error]
+		})
+	] });
+	const fieldLabel = (className) => /* @__PURE__ */ jsx(Field.Label, {
+		...labelledBy > 0 ? {
+			htmlFor: void 0,
+			onClick: () => document.getElementById(id)?.focus()
+		} : typeof children === "function" || ownId !== void 0 ? { htmlFor: id } : {},
+		id: labelId,
+		className,
+		"data-field-label": true,
+		children: nameContent
+	});
+	if (controlFirst && !group) {
+		const lined = inline || inRow;
+		return /* @__PURE__ */ jsxs(Field.Root, {
+			invalid: isInvalid,
+			disabled,
+			className: inRow ? cx("contents", className) : cx("flex w-full items-start", className),
+			"data-field-row": inRow || void 0,
+			children: [inline && !compact && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				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"),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cx("flex h-lh shrink-0 items-center", labelSize.text),
+					...helpFocus,
+					children: controlInContext
+				}), /* @__PURE__ */ jsxs("div", {
+					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
+						})]
+					}), messages]
+				})]
+			})]
+		});
+	}
 	const body = /* @__PURE__ */ jsxs("div", {
 		ref: help ? setControlBox : void 0,
 		className: cx("flex w-full min-w-0 flex-col gap-1", inRow && "row-start-2"),
 		...helpFocus,
-		children: [
-			/* @__PURE__ */ jsx(FieldRowContext, {
-				value: false,
-				children: /* @__PURE__ */ jsx(ControlContext, {
-					value: controlContext,
-					children: inline ? /* @__PURE__ */ jsx("div", {
-						className: cx("grid items-center", labelSize.inlineHeight),
-						children: placed
-					}) : placed
-				})
-			}),
-			description && /* @__PURE__ */ jsx(Field.Description, {
-				id: descriptionId,
-				className: "text-xs leading-relaxed text-(--theme-muted-text-color)",
-				children: description
-			}),
-			help && /* @__PURE__ */ jsx(Field.Description, {
-				id: helpId,
-				hidden: true,
-				children: formatInfoTipContent(help)
-			}),
-			error && /* @__PURE__ */ jsxs(Field.Error, {
-				id: errorId,
-				match: true,
-				role: "alert",
-				className: errorTextClassName,
-				children: [/* @__PURE__ */ jsx(WarningIcon, {
-					"aria-hidden": "true",
-					className: "size-3.5 shrink-0"
-				}), error]
-			})
-		]
+		children: [inline ? /* @__PURE__ */ jsx("div", {
+			className: cx("grid items-center", labelSize.inlineHeight),
+			children: controlInContext
+		}) : controlInContext, messages]
 	});
 	const frame = inRow ? cx("contents", className) : cx("flex w-full", inline ? "items-start" : cx("flex-col", labelSize.stackGap), className);
 	if (group) return /* @__PURE__ */ jsx(Field.Root, {
@@ -182,10 +225,10 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 		}),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: frame,
-			children: [/* @__PURE__ */ jsx(Fieldset.Legend, {
+			children: [/* @__PURE__ */ jsxs(Fieldset.Legend, {
 				id: labelId,
 				className: labelBox,
-				children: labelContent
+				children: [/* @__PURE__ */ jsx("span", { children: nameContent }), labelExtras]
 			}), body]
 		})
 	});
@@ -196,23 +239,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 		"data-field-row": inRow || void 0,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: labelBox,
-			children: [
-				/* @__PURE__ */ jsxs(Field.Label, {
-					...labelledBy > 0 ? {
-						htmlFor: void 0,
-						onClick: () => document.getElementById(id)?.focus()
-					} : typeof children === "function" || ownId !== void 0 ? { htmlFor: id } : {},
-					id: labelId,
-					"data-field-label": true,
-					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
-				}),
-				helpTip,
-				hint,
-				actions && /* @__PURE__ */ jsx("span", {
-					className: actionsClassName,
-					children: actions
-				})
-			]
+			children: [fieldLabel(), labelExtras]
 		}), body]
 	});
 }

package/dist/components/HoverCard.js

@@ -3,6 +3,17 @@ import { useFullscreenContainer } from "./fullscreen.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/HoverCard.tsx
+var stop = (event) => event.stopPropagation();
+var pressHandlers = {
+	onClick: stop,
+	onAuxClick: stop,
+	onDoubleClick: stop,
+	onContextMenu: stop,
+	onPointerDown: stop,
+	onPointerUp: stop,
+	onMouseDown: stop,
+	onMouseUp: stop
+};
 /** Detail about its anchor, such as a person's profile, after a short hover or
 *  on focus. A visual enhancement: whatever the card shows must also be
 *  reachable another way, such as the page the anchor links to. The card
@@ -25,6 +36,7 @@ function HoverCard({ card, children, defaultOpen = false }) {
 				className: positionerClassName,
 				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
 					className: cardClassName,
+					...pressHandlers,
 					children: card
 				})
 			})

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/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;
@@ -744,7 +746,12 @@ export interface UIProviderProps {
     /** The engine, or a loader that resolves to it. A loader is called once, the first one
      *  passed, so it may be written inline. */
     engine?: WorkflowEngineSource | undefined;
+    /** The nonce the page's Content Security Policy allows inline scripts by,
+     *  for a host that renders on the server: a few components emit a script
+     *  that places them before hydration. The components render no inline
+     *  `<style>`, so a policy without 'unsafe-inline' styles needs none. */
+    nonce?: string | undefined;
     children: React.ReactNode;
 }
-export declare function UIProvider({ strings, navigation, data, slots, engine: engineProp, children, }: UIProviderProps): import("react").JSX.Element;
+export declare function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonce, children, }: UIProviderProps): import("react").JSX.Element;
 export {};

package/dist/components/Provider.js

@@ -4,6 +4,7 @@ import { Toaster } from "./Toast.js";
 import { TooltipProvider } from "./Tooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { CSPProvider } from "@base-ui/react/csp-provider";
 import { dequal } from "dequal";
 //#region src/components/Provider.tsx
 var isGroup = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
@@ -152,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",
@@ -694,7 +696,7 @@ function useMerged(compute, input) {
 	};
 	return ref.current.value;
 }
-function UIProvider({ strings, navigation, data, slots, engine: engineProp, children }) {
+function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonce, children }) {
 	const [firstLoader] = useState(() => typeof engineProp === "function" ? engineProp : void 0);
 	const engine = typeof engineProp === "function" ? firstLoader ?? engineProp : engineProp;
 	useEffect(() => {
@@ -721,9 +723,13 @@ function UIProvider({ strings, navigation, data, slots, engine: engineProp, chil
 				value: mergedData,
 				children: /* @__PURE__ */ jsx(SlotsContext, {
 					value: stableSlots,
-					children: /* @__PURE__ */ jsxs(EngineContext, {
+					children: /* @__PURE__ */ jsx(EngineContext, {
 						value: engine,
-						children: [/* @__PURE__ */ jsx(TooltipProvider, { children }), /* @__PURE__ */ jsx(Toaster, {})]
+						children: /* @__PURE__ */ jsxs(CSPProvider, {
+							nonce,
+							disableStyleElements: true,
+							children: [/* @__PURE__ */ jsx(TooltipProvider, { children }), /* @__PURE__ */ jsx(Toaster, {})]
+						})
 					})
 				})
 			})

package/dist/components/StickyBar.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+export interface StickyBarProps {
+    /** Padding, borders and layout; the bar sets its own position, `top`,
+     *  layer and background. */
+    className?: string | undefined;
+    testId?: string | undefined;
+    children?: ReactNode;
+}
+/** A strip of a page's own controls, such as a row of filters or a page's
+ *  actions, pinned as the page scrolls. It stops just below whatever its
+ *  scroller already pins at the top, such as the page header, and moves with
+ *  it as that wraps or changes height. For an `ActionToolbar` or `Tabs` alone,
+ *  give them `sticky` instead. */
+export declare function StickyBar({ className, testId, children }: StickyBarProps): import("react").JSX.Element;

package/dist/components/StickyBar.js

@@ -0,0 +1,22 @@
+import { cx } from "../cx.js";
+import { stickyClasses, useStickyTop } from "./stickyTop.js";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/StickyBar.tsx
+/** A strip of a page's own controls, such as a row of filters or a page's
+*  actions, pinned as the page scrolls. It stops just below whatever its
+*  scroller already pins at the top, such as the page header, and moves with
+*  it as that wraps or changes height. For an `ActionToolbar` or `Tabs` alone,
+*  give them `sticky` instead. */
+function StickyBar({ className, testId, children }) {
+	const [el, setEl] = useState(null);
+	useStickyTop(el, true);
+	return /* @__PURE__ */ jsx("div", {
+		ref: setEl,
+		"data-testid": testId,
+		className: cx(stickyClasses, className),
+		children
+	});
+}
+//#endregion
+export { StickyBar };

package/dist/components/Table.js

@@ -3,7 +3,7 @@ import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
 import { Loader } from "./Loader.js";
 import { useStickyTop } from "./stickyTop.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useRef } from "react";
+import React, { createContext, useContext, useState } from "react";
 //#region src/components/Table.tsx
 var DensityContext = createContext("comfortable");
 var cellX = "px-3";
@@ -48,7 +48,7 @@ var isHeaderChild = (child) => {
 *  the children, then `<tr>`s of `Table.Item`s. */
 function Table({ density = "comfortable", borderless = false, panel = true, className, wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, stickyHeader = false, tableProps }) {
 	const childList = React.Children.toArray(children);
-	const thead = useRef(null);
+	const [thead, setThead] = useState(null);
 	useStickyTop(thead, stickyHeader && !isLoading);
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx(DensityContext, {
@@ -65,7 +65,7 @@ function Table({ density = "comfortable", borderless = false, panel = true, clas
 					className: cx("min-w-full divide-y theme-border", className),
 					...tableProps,
 					children: [/* @__PURE__ */ jsx("thead", {
-						ref: thead,
+						ref: setThead,
 						className: cx(stickyHeader && "sticky top-0 z-(--layer-sticky) border-b-0 shadow-[inset_0_-1px_0_var(--theme-border)]", theadClassName),
 						children: /* @__PURE__ */ jsx("tr", { children: childList.filter(isHeaderChild) })
 					}), /* @__PURE__ */ jsx("tbody", {

package/dist/components/Tabs.d.ts

@@ -25,8 +25,8 @@ export interface TabsProps<Value extends string> extends SegmentLayout {
     variant?: 'line' | 'segmented' | undefined;
     /** At the tab row's far end, such as a picker for what the tabs show. */
     end?: ReactNode;
-    /** Pins the tab row to the top of the page's scroller as it scrolls; give it a
-     *  `top-*` in `className` to pin it under something else pinned there. */
+    /** Pins the tab row as the page scrolls, just below whatever the page's
+     *  scroller already pins at the top, such as the page header and a toolbar. */
     sticky?: boolean | undefined;
     /** On the tab row. */
     className?: string | undefined;

package/dist/components/Tabs.js

@@ -2,11 +2,11 @@ import { cx } from "../cx.js";
 import { Tooltip } from "./Tooltip.js";
 import { AppLink } from "./AppLink.js";
 import { SegmentContent, segmentClassName, segmentGroupClassName } from "./segmented.js";
+import { useStickyTop } from "./stickyTop.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/Tabs.tsx
-var stickyClassName = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
 /** Views of one thing, one shown at a time: panels below the tabs, or pages
 *  the tabs link to. A lone tab would only repeat the page's title, so the row
 *  hides unless there are two or more, or something at its end. */
@@ -19,6 +19,8 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 	const [own, setOwn] = useState(defaultValue ?? items[0]?.value);
 	const current = value ?? own;
 	const showRow = items.length > 1 || !!end;
+	const [row, setRow] = useState(null);
+	useStickyTop(row, !!sticky);
 	const tabs = items.map((item) => {
 		const tab = /* @__PURE__ */ jsx(Tabs.Tab, {
 			value: item.value,
@@ -50,7 +52,8 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 		"data-testid": testId,
 		className: children ? void 0 : "contents",
 		children: [showRow && /* @__PURE__ */ jsxs("div", {
-			className: cx("flex items-center justify-between gap-2", !segmented && "border-b border-(--theme-border)", sticky && stickyClassName, className),
+			ref: setRow,
+			className: cx("flex items-center justify-between gap-2", !segmented && "border-b border-(--theme-border)", sticky && "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)", className),
 			children: [/* @__PURE__ */ jsxs(Tabs.List, {
 				"aria-label": label,
 				className: cx(segmented ? segmentGroupClassName(layout) : "relative flex min-w-0 overflow-x-auto"),

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/stickyTop.d.ts

@@ -1,10 +1,14 @@
-import { type RefObject } from 'react';
+/** Pins a bar to the top of its scroller, over what scrolls under it.
+ *  `useStickyTop` moves it below whatever else is pinned there. */
+export declare const stickyClasses = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
 /**
  * Pins a `sticky` element just below whatever its scroller already pins at
  * the top, such as a page header, a toolbar and a tab row, rather than at
  * `top: 0` behind them. It finds them in the page, so neither they nor the
  * host declare anything, and it follows them as they change height (a toolbar
- * wrapping on a narrow screen) or come and go, before the browser paints.
+ * wrapping on a narrow screen), move, or come and go, before the browser
+ * paints. Chrome that uses it stacks: each piece pins under the ones before
+ * it, and its own `top` moving is a change the pieces after it follow.
  * In a box that scrolls on its own, nothing sits above, so it pins at 0.
  */
-export declare function useStickyTop(ref: RefObject<HTMLElement | null>, enabled: boolean): void;
+export declare function useStickyTop(el: HTMLElement | null, enabled: boolean): void;

package/dist/components/stickyTop.js

@@ -1,5 +1,8 @@
 import { useLayoutEffect } from "react";
 //#region src/components/stickyTop.ts
+/** Pins a bar to the top of its scroller, over what scrolls under it.
+*  `useStickyTop` moves it below whatever else is pinned there. */
+var stickyClasses = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
 var scrolls = (style) => /auto|scroll|hidden|overlay/.test(`${style.overflow} ${style.overflowX} ${style.overflowY}`);
 /** The box a sticky element sticks to: its nearest ancestor that scrolls, or
 *  the document's when none does. */
@@ -49,16 +52,18 @@ function pinnedBottom(chrome) {
 * the top, such as a page header, a toolbar and a tab row, rather than at
 * `top: 0` behind them. It finds them in the page, so neither they nor the
 * host declare anything, and it follows them as they change height (a toolbar
-* wrapping on a narrow screen) or come and go, before the browser paints.
+* wrapping on a narrow screen), move, or come and go, before the browser
+* paints. Chrome that uses it stacks: each piece pins under the ones before
+* it, and its own `top` moving is a change the pieces after it follow.
 * In a box that scrolls on its own, nothing sits above, so it pins at 0.
 */
-function useStickyTop(ref, enabled) {
+function useStickyTop(el, enabled) {
 	useLayoutEffect(() => {
-		const el = ref.current;
 		if (!enabled || !el) return;
 		let chrome = [];
 		const place = () => {
-			el.style.top = `${Math.max(0, ...chrome.map(pinnedBottom))}px`;
+			const top = `${Math.max(0, ...chrome.map(pinnedBottom))}px`;
+			if (el.style.top !== top) el.style.top = top;
 		};
 		const resizes = new ResizeObserver(place);
 		const changes = new MutationObserver(gather);
@@ -82,7 +87,7 @@ function useStickyTop(ref, enabled) {
 			changes.disconnect();
 			el.style.top = "";
 		};
-	}, [ref, enabled]);
+	}, [el, enabled]);
 }
 //#endregion
-export { useStickyTop };
+export { stickyClasses, useStickyTop };

package/dist/file-explorer/FileExplorer.js

@@ -681,7 +681,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			extra: [
 				{
 					label: t.preview.path,
-					value: node.root ? void 0 : getObjectKeyFromNode(node),
+					value: node.root ? void 0 : getObjectKeyFromNode(node).replace(/\/$/, ""),
 					icon: /* @__PURE__ */ jsx(FolderTreeIcon, {})
 				},
 				{

package/dist/index.d.ts

@@ -56,6 +56,7 @@ export { SettingRow, SettingsCard, type SettingsCardProps, SettingsHeading, } fr
 export { LoadingRegion, Skeleton, type SkeletonProps } from './components/Skeleton.js';
 export { Slider, type SliderProps } from './components/Slider.js';
 export { type BadgeVariant, StatusBadge, StatusDot, statusTextClass, } from './components/StatusBadge.js';
+export { StickyBar, type StickyBarProps } from './components/StickyBar.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
 export { isTextEntryContext, useShortcutKey } from './components/shortcutKey.js';
 export { type SortDirection, Table, type TableDensity } from './components/Table.js';

package/dist/index.js

@@ -67,10 +67,11 @@ import { SettingModeOption } from "./components/SettingModeOption.js";
 import { SettingRow, SettingsCard, SettingsHeading } from "./components/SettingsCard.js";
 import { Slider } from "./components/Slider.js";
 import { StatusBadge, StatusDot, statusTextClass } from "./components/StatusBadge.js";
+import { StickyBar } from "./components/StickyBar.js";
 import { Table } from "./components/Table.js";
 import { TabPanel, Tabs } from "./components/Tabs.js";
 import { ThemeEditor, ThemePreview } from "./components/ThemeEditor.js";
 import { ToggleGroup } from "./components/ToggleGroup.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, AppLink, Autocomplete, Avatar, Button, CODE_STYLES, Callout, Card, CardHeader, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, CopyButton, CopyCodeBlock, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorText, ExternalLink, Field, FieldOption, FieldValue, HoverCard, IconButton, InfoTip, Input, JND, LetterBadge, 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, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Textarea, ThemeEditor, ThemePreview, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, avatarInitials, buttonClasses, categoryClasses, categoryOf, composite, contrastRatio, cx, deltaE, deriveTheme, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatTimeLeft, generateTheme, isDarkColor, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, statusTextClass, themeStylesheet, toHex, toP3, toast, useApplyTheme, useClock, useClosePopover, useColorMode, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, Button, CODE_STYLES, Callout, Card, CardHeader, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, CopyButton, CopyCodeBlock, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorText, ExternalLink, Field, FieldOption, FieldValue, HoverCard, IconButton, InfoTip, Input, JND, LetterBadge, 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, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Textarea, ThemeEditor, ThemePreview, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, avatarInitials, buttonClasses, categoryClasses, categoryOf, composite, contrastRatio, cx, deltaE, deriveTheme, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatTimeLeft, generateTheme, isDarkColor, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, statusTextClass, themeStylesheet, toHex, toP3, toast, useApplyTheme, useClock, useClosePopover, useColorMode, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/list/ActionToolbar.d.ts

@@ -42,8 +42,6 @@ export interface ItemWidth {
  * moves, and its label folds only once nothing else is left to try.
  */
 export declare function fitToolbar(groups: ItemWidth[][], right: ItemWidth[], available: number): ToolbarFit;
-/** Pins a toolbar to the top of the page's scroll area while the content scrolls under it. */
-export declare const stickyToolbarClasses = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
 /** A view's controls in one WAI-ARIA toolbar: a single tab stop, with the arrow
  *  keys moving between its items, the `…` menu and disabled ones included, so
  *  their reasons stay reachable. Action groups sit on the left and `right` holds
@@ -55,7 +53,8 @@ export declare const stickyToolbarClasses = "sticky top-0 z-(--layer-sticky) bg-
 export declare function ActionToolbar({ groups, right, sticky, label, }: {
     groups: ToolbarItem[][];
     right?: ToolbarItem[];
-    /** Pins it to the top of the page's scroll area while the page scrolls. */
+    /** Pins it as the page scrolls, just below whatever the page's scroller
+     *  already pins at the top, such as the page header. */
     sticky?: boolean;
     /** Names the toolbar for assistive technology, such as "Log controls";
      *  defaults to "Actions". */

package/dist/list/ActionToolbar.js

@@ -7,6 +7,7 @@ import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
 import { AppLink } from "../components/AppLink.js";
 import { MenuEntries, useRunAction, warnIfInert } from "../components/MenuEntries.js";
+import { useStickyTop } from "../components/stickyTop.js";
 import { Menu } from "@base-ui/react/menu";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, cloneElement, createContext, isValidElement, use, useLayoutEffect, useRef, useState } from "react";
@@ -264,8 +265,6 @@ function ItemSlot({ item, folded }) {
 		}) : /* @__PURE__ */ jsx(ToolbarButton, { action: item })
 	});
 }
-/** Pins a toolbar to the top of the page's scroll area while the content scrolls under it. */
-var stickyToolbarClasses = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
 /** A view's controls in one WAI-ARIA toolbar: a single tab stop, with the arrow
 *  keys moving between its items, the `…` menu and disabled ones included, so
 *  their reasons stay reachable. Action groups sit on the left and `right` holds
@@ -284,6 +283,7 @@ function ActionToolbar({ groups, right = [], sticky = false, label }) {
 	warnIfManyPrimary(all);
 	warnIfIconsRepeat(all);
 	const fit = useToolbarFit(root, copy, visibleGroups, visibleRight);
+	useStickyTop(root, sticky);
 	const overflow = new Set(fit.overflow);
 	const folded = new Set(fit.folded);
 	const shown = (items) => items.filter((item) => !overflow.has(item.key));
@@ -347,4 +347,4 @@ function warnIfIconsRepeat(items) {
 	}
 }
 //#endregion
-export { ActionToolbar, ToolbarButton, fitToolbar, stickyToolbarClasses };
+export { ActionToolbar, ToolbarButton, fitToolbar };

package/dist/list/index.d.ts

@@ -1,4 +1,4 @@
-export { ActionToolbar, stickyToolbarClasses, type ToolbarAction, ToolbarButton, type ToolbarItem, } from './ActionToolbar.js';
+export { ActionToolbar, type ToolbarAction, ToolbarButton, type ToolbarItem, } from './ActionToolbar.js';
 export { ListColumns, ListPage, type ListPageProps, ListRow, ListRowActionsProvider, useListNavigate, } from './ListPage.js';
 export { actionsColumnWidth, GroupRow, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
 export { ListDisplayMenu, ListFilterMenu } from './ListViewControls.js';

package/dist/list/index.js

@@ -1,4 +1,4 @@
-import { ActionToolbar, ToolbarButton, stickyToolbarClasses } from "./ActionToolbar.js";
+import { ActionToolbar, ToolbarButton } from "./ActionToolbar.js";
 import { GroupRow, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
 import { MoreButton, assembleRowMenu, rowContextMenuProps, useCopySubmenu, useRowMenuActive } from "./rowMenu.js";
 import { ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
@@ -6,4 +6,4 @@ import { ListDisplayMenu, ListFilterMenu } from "./ListViewControls.js";
 import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
 import { DEFAULT_ORDER, FAVORITE_ORDER, useListView } from "./listView.js";
 import { HoverCardRow, UserHoverCard } from "./UserHoverCard.js";
-export { ActionToolbar, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListRow, ListRowActionsProvider, ListSearchControl, ListSelectAllHeader, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, listTableFixedProps, listTableProps, rowContextMenuProps, stickyToolbarClasses, useCopySubmenu, useListNavigate, useListSearch, useListView, useRowMenuActive };
+export { ActionToolbar, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListRow, ListRowActionsProvider, ListSearchControl, ListSelectAllHeader, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, listTableFixedProps, listTableProps, rowContextMenuProps, useCopySubmenu, useListNavigate, useListSearch, useListView, useRowMenuActive };

package/dist/styles/theme.css

@@ -183,6 +183,17 @@
   text-align: left !important;
 }
 
+/* Base UI hides the native scrollbar of a select or scroll area with this
+ * class, and would inject the rule as an inline <style>, which a same-origin
+ * style policy blocks. UIProvider turns that off, so the rule ships here. */
+.base-ui-disable-scrollbar {
+  scrollbar-width: none;
+}
+
+.base-ui-disable-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
 /* Theme-aware scrollbars */
 .theme-scrollbar {
   scrollbar-width: thin;