@parallelworks/ui 0.44.0 → 0.45.0

package/dist/components/Input.d.ts

@@ -1,19 +1,20 @@
 import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
-interface FieldProps {
+interface FramedProps {
+    /** Without a label the box stands alone; name it with `aria-label`. */
     label?: ReactNode;
-    /** Shown beside the label, outside it, so it stays out of the field's name. */
-    labelHint?: ReactNode;
-    /** Help text shown under the label. */
+    /** Beside the label and outside it, so it stays out of the field's name. */
+    hint?: ReactNode;
+    /** Help under the field. */
     description?: ReactNode;
-    error?: string | undefined;
+    error?: ReactNode;
     mono?: boolean;
 }
-interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FieldProps {
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FramedProps {
 }
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldProps {
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FramedProps {
 }
-/** The box a text field draws, for other controls that should look like one. */
-export declare const fieldBoxClasses: string;
+/** A single-line text field. `type="password"` adds a button that shows what was typed. */
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+/** A multi-line text field that grows by hand. */
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/Input.js

@@ -1,109 +1,67 @@
-import { LuEye } from "../icons/lu/LuEye.js";
-import { LuEyeOff } from "../icons/lu/LuEyeOff.js";
-import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
-import { RequiredMark } from "./RequiredMark.js";
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { fieldBox } from "./fieldBox.js";
+import { Field, RevealToggle } from "./Field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useState } from "react";
+import { forwardRef, useState } from "react";
 //#region src/components/Input.tsx
-/** The box a text field draws, for other controls that should look like one. */
-var fieldBoxClasses = clsx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]");
-function LabelRow({ id, label, hint, required }) {
-	const element = /* @__PURE__ */ jsxs("label", {
-		className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
-		htmlFor: id,
-		children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
-	});
-	return hint ? /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-wrap items-baseline gap-x-1.5",
-		children: [element, hint]
-	}) : element;
-}
-function useFieldFrame({ label, labelHint, description, error }, ownId, describedBy, required) {
-	const generatedId = useId();
-	const id = ownId ?? generatedId;
-	const errorId = `${id}-error`;
-	const descriptionId = `${id}-description`;
-	return {
+/** The Field around a control when it has a label; the control alone when it doesn't. */
+function framed({ label, hint, description, error }, { id, required, disabled }, control) {
+	if (label === void 0) return control(error ? { "aria-invalid": true } : {});
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		description,
+		error,
+		required,
+		disabled,
 		id,
-		describedBy: [
-			describedBy,
-			description ? descriptionId : void 0,
-			error ? errorId : void 0
-		].filter(Boolean).join(" ") || void 0,
-		frame: (control) => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-1.5",
-			children: [
-				label && /* @__PURE__ */ jsx(LabelRow, {
-					id,
-					label,
-					hint: labelHint,
-					required
-				}),
-				description && /* @__PURE__ */ jsx("span", {
-					id: descriptionId,
-					className: "-mt-1 text-xs text-(--theme-muted-text-color)",
-					children: description
-				}),
-				control,
-				error && /* @__PURE__ */ jsxs("span", {
-					id: errorId,
-					role: "alert",
-					className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
-					children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-4 h-4" }), error]
-				})
-			]
-		})
-	};
+		children: control
+	});
 }
-var Input = forwardRef(({ label, labelHint, description, error, className = "", mono, type, required, ...props }, ref) => {
-	const [showPassword, setShowPassword] = useState(false);
-	const isPassword = type === "password";
-	const field = useFieldFrame({
+/** A single-line text field. `type="password"` adds a button that shows what was typed. */
+var Input = forwardRef(({ label, hint, description, error, className, mono, type, ...props }, ref) => {
+	const [revealed, setRevealed] = useState(false);
+	const secret = type === "password";
+	return framed({
 		label,
-		labelHint,
+		hint,
 		description,
 		error
-	}, props.id, props["aria-describedby"], required);
-	return field.frame(/* @__PURE__ */ jsxs("div", {
-		className: isPassword ? "relative w-full" : "",
-		children: [/* @__PURE__ */ jsx("input", {
+	}, props, (control) => {
+		const input = /* @__PURE__ */ jsx("input", {
 			ref,
-			type: isPassword && showPassword ? "text" : type,
-			className: clsx(fieldBoxClasses, "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", isPassword && "pr-11", className),
 			...props,
-			id: field.id,
-			required,
-			"aria-invalid": error ? true : props["aria-invalid"],
-			"aria-describedby": field.describedBy
-		}), isPassword && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: "absolute right-3 top-1/2 -translate-y-1/2 bg-transparent border-none text-[var(--theme-muted-text-color)] cursor-pointer p-1 transition-colors duration-200 flex items-center justify-center hover:text-[var(--theme-app)]",
-			onClick: () => setShowPassword(!showPassword),
-			tabIndex: -1,
-			"aria-label": showPassword ? "Hide password" : "Show password",
-			children: showPassword ? /* @__PURE__ */ jsx(LuEyeOff, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(LuEye, { className: "w-5 h-5" })
-		})]
-	}));
+			...control,
+			"aria-invalid": control["aria-invalid"] ?? props["aria-invalid"],
+			"aria-describedby": [props["aria-describedby"], control["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+			type: secret && revealed ? "text" : type,
+			className: cx(fieldBox(), mono && "font-mono", secret && "pr-9", className)
+		});
+		return secret ? /* @__PURE__ */ jsxs("div", {
+			className: "relative w-full",
+			children: [input, /* @__PURE__ */ jsx(RevealToggle, {
+				revealed,
+				onRevealedChange: setRevealed,
+				disabled: props.disabled
+			})]
+		}) : input;
+	});
 });
 Input.displayName = "Input";
-var Textarea = forwardRef(({ label, labelHint, description, error, className = "", mono, required, ...props }, ref) => {
-	const field = useFieldFrame({
-		label,
-		labelHint,
-		description,
-		error
-	}, props.id, props["aria-describedby"], required);
-	return field.frame(/* @__PURE__ */ jsx("textarea", {
-		ref,
-		className: clsx(fieldBoxClasses, "min-h-[140px] resize-y", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", className),
-		...props,
-		id: field.id,
-		required,
-		"aria-invalid": error ? true : props["aria-invalid"],
-		"aria-describedby": field.describedBy
-	}));
-});
+/** A multi-line text field that grows by hand. */
+var Textarea = forwardRef(({ label, hint, description, error, className, mono, ...props }, ref) => framed({
+	label,
+	hint,
+	description,
+	error
+}, props, (control) => /* @__PURE__ */ jsx("textarea", {
+	ref,
+	...props,
+	...control,
+	"aria-invalid": control["aria-invalid"] ?? props["aria-invalid"],
+	"aria-describedby": [props["aria-describedby"], control["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+	className: cx(fieldBox({ multiline: true }), "min-h-24 resize-y", mono && "font-mono", className)
+})));
 Textarea.displayName = "Textarea";
 //#endregion
-export { Input, Textarea, fieldBoxClasses };
+export { Input, Textarea };

package/dist/components/LetterBadge.js

@@ -1,11 +1,11 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/LetterBadge.tsx
 /** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
 * an icon. Size the box and text via className (e.g. "h-5 w-5 text-[8px]"). */
 function LetterBadge({ text, className }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
+		className: cx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
 		children: text
 	});
 }

package/dist/components/Loader.d.ts

@@ -1,11 +1,18 @@
-interface LoaderProps {
+export interface LoaderProps {
+    /** The spinner's size, in pixels or any CSS length. */
     size?: number | string;
-    text?: string | undefined;
-    textSize?: number;
-    color?: string;
-    full?: boolean;
-    loaderStyle?: React.CSSProperties;
+    /** Shown under the spinner, and its accessible name. Without one, the
+     *  loader is named with the provider's `loading` string. */
+    label?: string | undefined;
     variant?: 'spinner' | 'logo';
+    /** Sits in a line of text or a button instead of centring in its own row. */
+    inline?: boolean;
+    /** The spinner's color, such as `currentColor` inside a button. */
+    color?: string | undefined;
+    /** Beside text that already says what is happening, such as a busy button's
+     *  label: hidden from assistive technology, and in the text's color. */
+    decorative?: boolean;
 }
-export default function Loader({ size, text, textSize, full, color, loaderStyle, variant, }: LoaderProps): import("react").JSX.Element;
-export {};
+/** Something on the way that has no shape to sketch yet. When its shape is
+ *  known, such as rows of a list, sketch it with `Skeleton` instead. */
+export declare function Loader({ size, label, variant, inline, color, decorative, }: LoaderProps): import("react").JSX.Element;

package/dist/components/Loader.js

@@ -1,5 +1,6 @@
-import { LoaderIcon } from "./StatusIcons.js";
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { RunningIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Loader.tsx
 var RIPPLE_STAGGER_S = .22;
@@ -9,16 +10,29 @@ var LOGO_RINGS = [
 	"M9.25,52.35V32.14A22.9,22.9,0,1,1,32.14,55H24.89",
 	"M62.68,32.14A30.54,30.54,0,1,1,1.6,32.14,30.54,30.54,0,1,1,62.68,32.14"
 ];
-function Loader({ size = 48, text, textSize = 12, full = true, color = "", loaderStyle = {}, variant = "spinner" }) {
-	const loaderColor = color || "text-(--theme-element,#3b82f6)";
+/** Something on the way that has no shape to sketch yet. When its shape is
+*  known, such as rows of a list, sketch it with `Skeleton` instead. */
+function Loader({ size = 48, label, variant = "spinner", inline = false, color, decorative = false }) {
+	const { loading } = useStrings().common;
 	const dimension = typeof size === "number" ? `${size}px` : size;
-	return /* @__PURE__ */ jsxs("div", {
+	const spinner = /* @__PURE__ */ jsx(RunningIcon, {
+		"aria-hidden": "true",
+		className: "animate-spin motion-reduce:animate-none",
+		style: { fontSize: dimension }
+	});
+	if (decorative) return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "inline-flex shrink-0",
+		style: color ? { color } : void 0,
+		children: spinner
+	});
+	return /* @__PURE__ */ jsxs("span", {
 		role: "status",
-		"aria-label": text || "Loading",
-		className: clsx(full && "w-full", "flex flex-col flex-wrap justify-center items-center gap-y-1"),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: clsx("w-full flex justify-center items-center", loaderColor),
-			style: loaderStyle,
+		"aria-label": label || loading,
+		className: cx("items-center", inline ? "inline-flex gap-2" : "flex w-full flex-col justify-center gap-y-1"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cx("inline-flex", !color && "text-(--theme-accent,#3b82f6)"),
+			style: color ? { color } : void 0,
 			children: variant === "logo" ? /* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 64.29 64.29",
 				width: dimension,
@@ -32,16 +46,12 @@ function Loader({ size = 48, text, textSize = 12, full = true, color = "", loade
 					className: "logo-loader-ring",
 					style: { animationDelay: `${(i * RIPPLE_STAGGER_S).toFixed(2)}s` }
 				}, d))
-			}) : /* @__PURE__ */ jsx(LoaderIcon, {
-				className: "animate-spin",
-				style: { fontSize: dimension }
-			})
-		}), text && /* @__PURE__ */ jsx("div", {
-			className: "text-center italic",
-			style: { fontSize: `${textSize}px` },
-			children: text
+			}) : spinner
+		}), label && /* @__PURE__ */ jsx("span", {
+			className: "text-center text-sm theme-muted-text",
+			children: label
 		})]
 	});
 }
 //#endregion
-export { Loader as default };
+export { Loader };

package/dist/components/Markdown.d.ts

@@ -1,7 +1,13 @@
-import type { ControlsConfig } from 'streamdown';
+import type { Components, ControlsConfig } from 'streamdown';
 export interface MarkdownProps {
     children: string;
+    /** Renders as text still arriving: a caret, and unfinished syntax left open. */
     isStreaming?: boolean;
+    /** The copy and download buttons on code blocks, tables and diagrams. */
     controls?: ControlsConfig;
+    /** Per-tag overrides of the rendered elements. */
+    components?: Components;
 }
+/** Markdown, with highlighted code, math and mermaid diagrams. Links leave in a
+ *  new tab, and inline code breaks after path separators. */
 export default function Markdown(props: MarkdownProps): import("react").JSX.Element;

package/dist/components/Markdown.js

@@ -2,6 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
 //#region src/components/Markdown.tsx
 var MarkdownImpl = lazy(() => import("./MarkdownImpl.js"));
+/** Markdown, with highlighted code, math and mermaid diagrams. Links leave in a
+*  new tab, and inline code breaks after path separators. */
 function Markdown(props) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx("div", {

package/dist/components/MarkdownImpl.d.ts

@@ -1,2 +1,2 @@
 import type { MarkdownProps } from './Markdown.js';
-export default function Markdown({ children, isStreaming, controls }: MarkdownProps): import("react").JSX.Element;
+export default function MarkdownImpl({ children, isStreaming, controls, components, }: MarkdownProps): import("react").JSX.Element;

package/dist/components/MarkdownImpl.js

@@ -1,33 +1,74 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { ExternalLink } from "./ExternalLink.js";
+import { readIsDark } from "./useCssIsDark.js";
+import { CODE_THEMES } from "./codeTheme.js";
+import { rehypeCodeBreaks } from "./markdownCodeBreaks.js";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
-import { Streamdown } from "streamdown";
+import { Streamdown, defaultRehypePlugins } from "streamdown";
 //#region src/components/MarkdownImpl.tsx
-var plugins = {
+var basePlugins = {
 	code,
 	math
 };
-var shikiTheme = ["github-light", "github-dark"];
-function Markdown({ children, isStreaming, controls }) {
+var pluginsWithMermaid;
+var mermaidLoad;
+function loadMermaid() {
+	mermaidLoad ??= import("@streamdown/mermaid").then(({ createMermaidPlugin }) => {
+		const base = createMermaidPlugin();
+		pluginsWithMermaid = {
+			...basePlugins,
+			mermaid: {
+				...base,
+				getMermaid: (config) => base.getMermaid({
+					theme: readIsDark() ? "dark" : "neutral",
+					...config
+				})
+			}
+		};
+	});
+	return mermaidLoad;
+}
+var rehypePlugins = [...Object.values(defaultRehypePlugins), rehypeCodeBreaks];
+function MarkdownImpl({ children, isStreaming, controls, components }) {
+	const needsMermaid = !!children && children.includes("```mermaid");
+	const [, setMermaidReady] = useState(() => !!pluginsWithMermaid);
+	useEffect(() => {
+		if (!needsMermaid || pluginsWithMermaid) return;
+		let live = true;
+		loadMermaid().then(() => {
+			if (live) setMermaidReady(true);
+		});
+		return () => {
+			live = false;
+		};
+	}, [needsMermaid]);
+	const plugins = needsMermaid && pluginsWithMermaid ? pluginsWithMermaid : basePlugins;
 	return /* @__PURE__ */ jsx("div", {
 		className: "markdown whitespace-normal text-start w-full",
 		children: /* @__PURE__ */ jsx(Streamdown, {
 			mode: isStreaming ? "streaming" : "static",
 			isAnimating: isStreaming ?? false,
-			...isStreaming ? { caret: "block" } : {},
+			...isStreaming ? {
+				caret: "block",
+				className: "markdown-streaming"
+			} : {},
 			...controls ? { controls } : {},
 			plugins,
-			shikiTheme,
-			components: { a: ({ node, ...props }) => /* @__PURE__ */ jsx("a", {
-				...props,
-				className: clsx("link wrap-break-word", props.className),
-				target: "_blank",
-				rel: "noopener noreferrer"
-			}) },
+			rehypePlugins,
+			shikiTheme: CODE_THEMES,
+			components: {
+				a: ({ node, ...props }) => /* @__PURE__ */ jsx(ExternalLink, {
+					...props,
+					className: cx("link wrap-break-word", props.className)
+				}),
+				...components
+			},
 			children: children || ""
 		})
 	});
 }
 //#endregion
-export { Markdown as default };
+export { MarkdownImpl as default };

package/dist/components/Menu.js

@@ -1,15 +1,13 @@
-import { FaCheck } from "../icons/fa/FaCheck.js";
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
-import { panelClassName, panelItemClassName, portalContainer, positionerClassName } from "./floating.js";
+import { cx } from "../cx.js";
+import { CheckIcon, ChevronRightIcon } from "../icons.js";
+import { panelClassName, panelItemClassName, positionerClassName } from "./floating.js";
 import { Menu } from "@base-ui/react/menu";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Menu.tsx
 var itemClassName = panelItemClassName;
 /** The portal, positioner and popup every menu needs. */
 function MenuPopup({ children, className, side = "bottom", align = "start", anchor, keepMounted = false }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, {
-		container: portalContainer(),
 		keepMounted,
 		children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			side,
@@ -18,7 +16,7 @@ function MenuPopup({ children, className, side = "bottom", align = "start", anch
 			sideOffset: 4,
 			className: positionerClassName,
 			children: /* @__PURE__ */ jsx(Menu.Popup, {
-				className: clsx("min-w-44 max-h-(--available-height) overflow-y-auto py-1", panelClassName, className),
+				className: cx("min-w-44 max-h-(--available-height) overflow-y-auto py-1", panelClassName, className),
 				children
 			})
 		})
@@ -27,7 +25,7 @@ function MenuPopup({ children, className, side = "bottom", align = "start", anch
 function MenuItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		...props,
-		className: clsx(itemClassName, className)
+		className: cx(itemClassName, className)
 	});
 }
 /** A navigation row; give it `render` for a router link. Closes the menu like any item. */
@@ -35,7 +33,7 @@ function MenuLinkItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.LinkItem, {
 		closeOnClick: true,
 		...props,
-		className: clsx(itemClassName, className)
+		className: cx(itemClassName, className)
 	});
 }
 /** A choice within a Menu.RadioGroup, checked while it holds the group's value. */
@@ -43,10 +41,10 @@ function MenuRadioItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		closeOnClick: true,
 		...props,
-		className: clsx(itemClassName, "pl-2", className),
+		className: cx(itemClassName, "pl-2", className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "flex w-3.5 shrink-0 justify-center",
-			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(FaCheck, { className: "size-3" }) })
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }) })
 		}), children]
 	});
 }
@@ -55,10 +53,10 @@ function MenuCheckboxItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
 		closeOnClick: true,
 		...props,
-		className: clsx(itemClassName, className),
+		className: cx(itemClassName, className),
 		children: [children, /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
 			className: "ml-auto",
-			children: /* @__PURE__ */ jsx(FaCheck, { className: "size-3.5 opacity-80" })
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 opacity-80" })
 		})]
 	});
 }
@@ -66,15 +64,15 @@ function MenuCheckboxItem({ className, children, ...props }) {
 function MenuSubmenuTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
 		...props,
-		className: clsx(itemClassName, "data-popup-open:bg-(--theme-hover)", className),
+		className: cx(itemClassName, "data-popup-open:bg-(--theme-hover)", className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "flex min-w-0 flex-1 items-center gap-2",
 			children
-		}), /* @__PURE__ */ jsx(LuChevronRight, { className: "size-3 shrink-0 opacity-60" })]
+		}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3 shrink-0 opacity-60" })]
 	});
 }
 function MenuSeparator({ className }) {
-	return /* @__PURE__ */ jsx(Menu.Separator, { className: clsx("my-1 h-px bg-(--theme-border)", className) });
+	return /* @__PURE__ */ jsx(Menu.Separator, { className: cx("my-1 h-px bg-(--theme-border)", className) });
 }
 function MenuGroupLabel({ children }) {
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {

package/dist/components/MenuEntries.js

@@ -1,11 +1,13 @@
+import { cx } from "../cx.js";
 import { MenuCheckboxItem, MenuItem, MenuLinkItem, MenuPopup, MenuSeparator, MenuSubmenuTrigger } from "./Menu.js";
 import { safeUrl } from "../safeUrl.js";
+import { EmptyState } from "./EmptyState.js";
 import { keyedByContent } from "./keys.js";
 import { Tooltip } from "./Tooltip.js";
-import { useLink, useNotify, useStrings } from "./Provider.js";
+import { useLink } from "./Provider.js";
 import { useQueryMatch } from "./search.js";
+import { useCopy } from "./useCopy.js";
 import { Menu } from "@base-ui/react/menu";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/components/MenuEntries.tsx
@@ -36,13 +38,13 @@ function MenuEntries({ entries, search, query = "" }) {
 			children: /* @__PURE__ */ jsx(Menu.Input, {
 				"aria-label": search.placeholder,
 				placeholder: search.placeholder,
-				className: "w-full rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-1 text-[13px] text-(--theme-app) outline-none placeholder:text-(--theme-muted-text-color) focus:border-(--theme-element)"
+				className: "w-full rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-1 text-[13px] text-(--theme-app) outline-none placeholder:text-(--theme-muted-text-color) focus:border-(--theme-accent)"
 			})
 		}),
 		/* @__PURE__ */ jsx(Menu.List, { children: /* @__PURE__ */ jsx(EntryRows, { entries: shown }) }),
-		needle && shown.length === 0 && /* @__PURE__ */ jsx("div", {
-			className: "px-3 py-1.5 text-[13px] text-(--theme-muted-text-color)",
-			children: search.empty
+		needle && shown.length === 0 && /* @__PURE__ */ jsx(EmptyState, {
+			variant: "bare",
+			title: search.empty
 		})
 	] });
 }
@@ -74,8 +76,8 @@ function SubmenuRow({ submenu }) {
 var destructiveClassName = "text-(--theme-error) data-highlighted:text-(--theme-error)";
 function ActionRow({ action }) {
 	const Link = useLink();
-	const copy = useCopy();
-	const className = clsx(action.destructive && destructiveClassName);
+	const { copy } = useCopy();
+	const className = cx(action.destructive && destructiveClassName);
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [action.icon, action.label] });
 	if (action.href && !action.disabled) return action.reloadDocument ? /* @__PURE__ */ jsx(MenuLinkItem, {
 		href: safeUrl(action.href),
@@ -87,7 +89,7 @@ function ActionRow({ action }) {
 		children: content
 	});
 	const run = () => {
-		if (action.copy) copy(action.copy);
+		if (action.copy) copy(action.copy.text, { label: action.copy.label });
 		action.onClick?.();
 	};
 	const reason = action.disabled ? action.disabledReason : void 0;
@@ -112,12 +114,5 @@ function ActionRow({ action }) {
 		})
 	});
 }
-function useCopy() {
-	const notify = useNotify();
-	const { list: t } = useStrings();
-	return ({ text, label }) => {
-		navigator.clipboard?.writeText(text).then(() => notify.success(t.copied(label)), () => notify.error(t.couldntCopy(label)));
-	};
-}
 //#endregion
 export { MenuEntries, MenuFilter, isMenuDivider, isMenuSubmenu, menuDivider };

package/dist/components/Meter.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+/** A bar's color: the theme's accent, a status, or muted for something stopped. */
+export type BarTone = 'accent' | 'success' | 'warning' | 'error' | 'muted';
+declare const trackClassName: {
+    readonly sm: 'h-1';
+    readonly md: 'h-1.5';
+    readonly lg: 'h-2';
+};
+export type BarSize = keyof typeof trackClassName;
+interface BarProps {
+    /** Shown above the bar, which it names. */
+    label?: ReactNode;
+    /** Names the bar when nothing visible does. */
+    'aria-label'?: string;
+    /** Shown under the bar, such as the amounts behind it. */
+    detail?: ReactNode;
+    size?: BarSize;
+    className?: string;
+}
+/** The tone for `value` against a warning and an error level, for a measure
+ *  that's worse the higher it reads. */
+export declare function levelTone(value: number, warnAt: number, errorAt: number): BarTone;
+/** How full something is, such as storage used or a quota spent: a reading,
+ *  not a task under way (that's `ProgressBar`). The bar turns amber, then red,
+ *  as it passes `warnAt` and `errorAt`; `tone` overrides that. */
+export declare function Meter({ value, min, max, warnAt, errorAt, tone, format, showValue, label, 'aria-label': ariaLabel, detail, size, className, }: BarProps & {
+    value: number;
+    min?: number;
+    max?: number;
+    /** Levels in the same units as `value`. */
+    warnAt?: number;
+    errorAt?: number;
+    tone?: BarTone;
+    /** How the value itself reads; without it, as a percentage of the range. */
+    format?: Intl.NumberFormatOptions;
+    /** Beside the label, or over the bar on hover when room is short. */
+    showValue?: 'beside' | 'tooltip';
+}): import("react").JSX.Element;
+/** How far a task has come, such as an upload, out of `max`; `null` while
+ *  that's not known. Name it with `label` or `aria-label`. */
+export declare function ProgressBar({ value, max, tone, status, label, 'aria-label': ariaLabel, detail, size, className, }: BarProps & {
+    value: number | null;
+    max?: number;
+    tone?: BarTone;
+    /** Beside the label in place of the percentage, such as "Completed". */
+    status?: ReactNode;
+}): import("react").JSX.Element;
+export {};