@parallelworks/ui 0.44.0 → 0.46.0

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 {};

package/dist/components/Meter.js

@@ -0,0 +1,94 @@
+import { cx } from "../cx.js";
+import { Tooltip } from "./Tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/Meter.tsx
+var fillClassName = {
+	accent: "bg-(--theme-accent)",
+	success: "bg-green-600",
+	warning: "bg-amber-500",
+	error: "bg-red-600",
+	muted: "bg-(--theme-muted-text-color)"
+};
+var trackClassName = {
+	sm: "h-1",
+	md: "h-1.5",
+	lg: "h-2"
+};
+var labelRowClassName = "mb-1 flex items-baseline justify-between gap-2 text-[13px]";
+var detailClassName = "mt-1 text-[11px] tabular-nums text-(--theme-muted-text-color)";
+/** The tone for `value` against a warning and an error level, for a measure
+*  that's worse the higher it reads. */
+function levelTone(value, warnAt, errorAt) {
+	return value >= errorAt ? "error" : value >= warnAt ? "warning" : "accent";
+}
+/** 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. */
+function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, format, showValue = "beside", label, "aria-label": ariaLabel, detail, size = "md", className }) {
+	const clamped = Math.min(Math.max(value, min), max);
+	const fill = fillClassName[tone ?? levelTone(clamped, warnAt, errorAt)];
+	const shownValue = /* @__PURE__ */ jsx(Meter.Value, { className: "shrink-0 font-medium tabular-nums theme-text" });
+	const track = /* @__PURE__ */ jsx(Meter.Track, {
+		className: cx("w-full overflow-hidden rounded-full bg-(--theme-border)", trackClassName[size]),
+		children: /* @__PURE__ */ jsx(Meter.Indicator, { className: cx("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", fill) })
+	});
+	return /* @__PURE__ */ jsxs(Meter.Root, {
+		value: clamped,
+		min,
+		max,
+		format,
+		"aria-label": ariaLabel,
+		className: cx("min-w-0", className),
+		children: [
+			label !== void 0 && /* @__PURE__ */ jsxs("div", {
+				className: labelRowClassName,
+				children: [/* @__PURE__ */ jsx(Meter.Label, {
+					className: "min-w-0 truncate theme-text",
+					children: label
+				}), showValue === "beside" && shownValue]
+			}),
+			showValue === "tooltip" ? /* @__PURE__ */ jsx(Tooltip, {
+				content: formatShare(clamped, min, max, format),
+				children: track
+			}) : track,
+			detail !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: detailClassName,
+				children: detail
+			})
+		]
+	});
+}
+function formatShare(value, min, max, format) {
+	return format ? new Intl.NumberFormat(void 0, format).format(value) : new Intl.NumberFormat(void 0, { style: "percent" }).format((value - min) / (max - min || 1));
+}
+/** 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`. */
+function ProgressBar({ value, max = 100, tone = "accent", status, label, "aria-label": ariaLabel, detail, size = "md", className }) {
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		value,
+		max,
+		"aria-label": ariaLabel,
+		className: cx("min-w-0", className),
+		children: [
+			(label !== void 0 || status !== void 0) && /* @__PURE__ */ jsxs("div", {
+				className: labelRowClassName,
+				children: [/* @__PURE__ */ jsx(Progress.Label, {
+					className: "min-w-0 truncate theme-muted-text",
+					children: label
+				}), status ?? /* @__PURE__ */ jsx(Progress.Value, { className: "shrink-0 tabular-nums theme-muted-text" })]
+			}),
+			/* @__PURE__ */ jsx(Progress.Track, {
+				className: cx("w-full overflow-hidden rounded-full bg-(--theme-border)", trackClassName[size]),
+				children: /* @__PURE__ */ jsx(Progress.Indicator, { className: cx("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", "data-indeterminate:w-1/3 data-indeterminate:animate-pulse", fillClassName[tone]) })
+			}),
+			detail !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: detailClassName,
+				children: detail
+			})
+		]
+	});
+}
+//#endregion
+export { Meter$1 as Meter, ProgressBar, levelTone };

package/dist/components/Modal.js

@@ -1,5 +1,5 @@
-import { portalContainer } from "./floating.js";
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { pressedToast } from "./Toast.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Dialog } from "@base-ui/react/dialog";
@@ -15,23 +15,20 @@ var ModalDescription = Dialog.Description;
 function Modal({ open, onClose, alert = false, dismissible = true, align = "top", panel = true, backdropClassName = "bg-black/40", className, children, ...popupProps }) {
 	const onOpenChange = (next, details) => {
 		if (next) return;
-		if (!dismissible && details.reason === "escape-key") {
+		if (!dismissible && details.reason === "escape-key" || details.reason === "outside-press" && pressedToast(details.event)) {
 			details.cancel();
 			return;
 		}
 		onClose();
 	};
-	const content = /* @__PURE__ */ jsxs(Dialog.Portal, {
-		container: portalContainer(),
-		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: clsx("fixed inset-0 z-[9990]", backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
-			className: clsx("fixed inset-0 z-[9990] flex justify-center px-4 pb-8", align === "center" ? "items-center" : "items-start pt-[14vh]"),
-			children: /* @__PURE__ */ jsx(Dialog.Popup, {
-				...popupProps,
-				className: clsx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", "outline-none", className),
-				children
-			})
-		})]
-	});
+	const content = /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cx("fixed inset-0 z-(--layer-modal)", backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
+		className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
+		children: /* @__PURE__ */ jsx(Dialog.Popup, {
+			...popupProps,
+			className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", "outline-none", className),
+			children
+		})
+	})] });
 	return alert ? /* @__PURE__ */ jsx(AlertDialog.Root, {
 		open,
 		onOpenChange,

package/dist/components/NumberInput.d.ts

@@ -0,0 +1,25 @@
+import { NumberField } from '@base-ui/react/number-field';
+import { type FieldBoxSize } from './fieldBox.js';
+export interface NumberInputProps extends Omit<NumberField.Root.Props, 'className' | 'children' | 'render'> {
+    /** How the value reads in the box: grouping, currency, units, percent. Intl's own options, so
+     *  `{ style: 'currency', currency: 'USD' }` or `{ style: 'unit', unit: 'gigabyte' }`. Digits
+     *  are kept as typed unless the format limits them, and grouping is off unless it turns it on. */
+    format?: Intl.NumberFormatOptions | undefined;
+    placeholder?: string | undefined;
+    /** Up and down buttons beside the value. */
+    steppers?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: boolean | undefined;
+    /** Marks the field required for assistive technology without the native check `required` adds. */
+    'aria-required'?: boolean | undefined;
+    size?: FieldBoxSize | undefined;
+    /** Applied to the box around the input and its steppers, such as a width. */
+    className?: string | undefined;
+}
+/** A number field: typing, arrow keys and the steppers move the value within `min` and `max`
+ *  by `step`, and `format` shows it as Intl formats it in the reader's locale. The value is a
+ *  number, or null while the box is empty. */
+export declare function NumberInput({ format, placeholder, steppers, autoFocus, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, size, className, ...rootProps }: NumberInputProps): import("react").JSX.Element;

package/dist/components/NumberInput.js

@@ -0,0 +1,55 @@
+import { cx } from "../cx.js";
+import { ChevronDownIcon, ChevronUpIcon } from "../icons.js";
+import { fieldBox } from "./fieldBox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/components/NumberInput.tsx
+var stepperClassName = "flex flex-1 items-center justify-center px-1 text-(--theme-muted-text-color) hover:text-(--theme-app) cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-40";
+/** A number field: typing, arrow keys and the steppers move the value within `min` and `max`
+*  by `step`, and `format` shows it as Intl formats it in the reader's locale. The value is a
+*  number, or null while the box is empty. */
+function NumberInput({ format, placeholder, steppers = true, autoFocus, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, size = "md", className, ...rootProps }) {
+	return /* @__PURE__ */ jsx(NumberField.Root, {
+		...rootProps,
+		format: {
+			maximumFractionDigits: 20,
+			useGrouping: false,
+			...format
+		},
+		children: /* @__PURE__ */ jsxs(NumberField.Group, {
+			className: cx(fieldBox({
+				size,
+				within: true,
+				padded: false
+			}), "relative", className),
+			children: [/* @__PURE__ */ jsx(NumberField.Input, {
+				placeholder,
+				autoFocus,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid || void 0,
+				"aria-required": ariaRequired || void 0,
+				"data-1p-ignore": true,
+				className: cx("h-full w-full min-w-0 bg-transparent tabular-nums outline-none", size === "sm" ? "px-2" : "px-3", steppers && "pr-6")
+			}), steppers && /* @__PURE__ */ jsxs("div", {
+				className: "absolute inset-y-0 right-0 flex flex-col",
+				children: [/* @__PURE__ */ jsx(NumberField.Increment, {
+					className: stepperClassName,
+					children: /* @__PURE__ */ jsx(ChevronUpIcon, {
+						"aria-hidden": "true",
+						className: "size-3"
+					})
+				}), /* @__PURE__ */ jsx(NumberField.Decrement, {
+					className: stepperClassName,
+					children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+						"aria-hidden": "true",
+						className: "size-3"
+					})
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { NumberInput };

package/dist/components/Overview.js

@@ -1,22 +1,24 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { LoadingRegion, Skeleton } from "./Skeleton.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Overview.tsx
 function Overview({ Icon, name, type, children, right, className, loading, iconSize = 75 }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center w-full", className),
+		className: cx("flex items-center w-full", className),
 		children: [
-			loading ? /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 animate-pulse rounded-full bg-(--theme-muted-panel-bg)",
-				style: {
-					width: iconSize,
-					height: iconSize
-				}
+			loading ? /* @__PURE__ */ jsx(Skeleton, {
+				circle: true,
+				height: iconSize,
+				className: "shrink-0"
 			}) : Icon,
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-col min-w-0 flex-1",
-				children: loading ? /* @__PURE__ */ jsxs("div", {
+				children: loading ? /* @__PURE__ */ jsx(LoadingRegion, {
 					className: "space-y-1",
-					children: [/* @__PURE__ */ jsx("div", { className: "h-3 animate-pulse rounded bg-(--theme-muted-panel-bg)" }), /* @__PURE__ */ jsx("div", { className: "h-3 animate-pulse rounded bg-(--theme-muted-panel-bg)" })]
+					children: /* @__PURE__ */ jsx(Skeleton, {
+						count: 2,
+						height: 12
+					})
 				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx("div", {
 						className: "font-semibold text-xl tracking-tight",