@parallelworks/ui 0.41.0 → 0.43.0

package/dist/components/IconButton.js

@@ -1,34 +1,30 @@
-import { TOOLTIP_ID } from "./Tooltip.js";
-import cx from "classnames";
-import { forwardRef } from "react";
+import { Tooltip } from "./Tooltip.js";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/IconButton.tsx
-var IconButton = forwardRef(({ icon, label, variant = "default", size = "md", active = false, showTooltip = true, className, disabled, ...props }, ref) => {
+function IconButton({ icon, label, variant = "default", size = "md", active = false, showTooltip = true, className, ...props }) {
 	const sizeClasses = {
 		sm: "w-7 h-7 [&_svg]:w-3.5 [&_svg]:h-3.5",
 		md: "w-9 h-9 [&_svg]:w-4 [&_svg]:h-4",
 		lg: "w-11 h-11 [&_svg]:w-5 [&_svg]:h-5"
 	};
 	const variantClasses = {
-		default: cx("bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-border)] hover:text-[var(--theme-app)]", active && "bg-[var(--theme-element)]/10 text-[var(--theme-element)]"),
-		ghost: cx("bg-transparent text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-muted-panel-bg)] hover:text-[var(--theme-app)]", active && "text-[var(--theme-element)]"),
-		primary: cx("bg-[var(--theme-element)] text-white", "hover:bg-[var(--theme-element)]/90", active && "ring-2 ring-[var(--theme-element)]/50"),
-		success: cx("bg-[#22c55e] text-white", "hover:bg-[#22c55e]/90", active && "ring-2 ring-[#22c55e]/50")
+		default: clsx("bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-border)] hover:text-[var(--theme-app)]", active && "bg-[var(--theme-element)]/10 text-[var(--theme-element)]"),
+		ghost: clsx("bg-transparent text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-muted-panel-bg)] hover:text-[var(--theme-app)]", active && "text-[var(--theme-element)]"),
+		primary: clsx("bg-[var(--theme-element)] text-white", "hover:bg-[var(--theme-element)]/90", active && "ring-2 ring-[var(--theme-element)]/50"),
+		success: clsx("bg-[#22c55e] text-white", "hover:bg-[#22c55e]/90", active && "ring-2 ring-[#22c55e]/50")
 	};
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type: "button",
-		"aria-label": label,
-		disabled,
-		...showTooltip ? { "data-tooltip-id": TOOLTIP_ID } : {},
-		"data-tooltip-content": label,
-		"data-tooltip-delay-show": 300,
-		"data-tooltip-class-name": "!bg-[var(--theme-app)] !text-[var(--theme-app-bg)] !text-xs !py-1 !px-2 !rounded-md",
-		className: cx("inline-flex items-center justify-center rounded-lg", "transition-all duration-200 cursor-pointer", "disabled:opacity-50 disabled:cursor-not-allowed", sizeClasses[size], variantClasses[variant], className),
-		...props,
-		children: icon
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		disabled: !showTooltip,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": label,
+			className: clsx("inline-flex items-center justify-center rounded-lg", "transition-all duration-200 cursor-pointer", "disabled:opacity-50 disabled:cursor-not-allowed", sizeClasses[size], variantClasses[variant], className),
+			...props,
+			children: icon
+		})
 	});
-});
-IconButton.displayName = "IconButton";
+}
 //#endregion
 export { IconButton };

package/dist/components/InfoTip.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { TooltipSide } from './Tooltip.js';
+/** Infotip text can come from untrusted sources (workflow YAML), so all markup is literal text — only `[text](url)` links and newlines are parsed. */
+export declare function formatInfoTipContent(content: string): ReactNode;
+interface InfoTipProps {
+    text: string;
+    side?: TooltipSide;
+    className?: string | undefined;
+    /** Replaces the info icon as the trigger, such as a status label the text explains. */
+    children?: ReactNode;
+}
+/** Extra detail behind an info trigger. A popover that also opens on hover, so
+ *  touch and screen reader users can reach it and its links. */
+export declare function InfoTip({ text, side, className, children }: InfoTipProps): import("react").JSX.Element | null;
+export {};

package/dist/components/InfoTip.js

@@ -0,0 +1,60 @@
+import { HiQuestionMarkCircle } from "../icons/hi/HiQuestionMarkCircle.js";
+import { portalContainer, positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
+import { keyedByContent } from "./keys.js";
+import { useStrings } from "./Provider.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/InfoTip.tsx
+var linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
+function formatLine(line) {
+	const nodes = [];
+	let last = 0;
+	for (const match of line.matchAll(linkRegex)) {
+		if (match.index > last) nodes.push(line.slice(last, match.index));
+		nodes.push(/* @__PURE__ */ jsx("a", {
+			href: match[2],
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: "underline",
+			children: match[1]
+		}, match.index));
+		last = match.index + match[0].length;
+	}
+	if (last < line.length) nodes.push(line.slice(last));
+	return nodes;
+}
+/** Infotip text can come from untrusted sources (workflow YAML), so all markup is literal text — only `[text](url)` links and newlines are parsed. */
+function formatInfoTipContent(content) {
+	if (!content) return null;
+	return keyedByContent(content.split(/<br\s*\/?>|\n/i), (l) => l).map(({ key, item: line }, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, key));
+}
+/** Extra detail behind an info trigger. A popover that also opens on hover, so
+*  touch and screen reader users can reach it and its links. */
+function InfoTip({ text, side = "top", className, children }) {
+	const t = useStrings().common;
+	if (!text) return children ? /* @__PURE__ */ jsx("span", {
+		className,
+		children
+	}) : null;
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		openOnHover: true,
+		"aria-label": children ? void 0 : t.moreInfo,
+		className: clsx("inline-flex items-center cursor-help", !children && "tooltip", className),
+		children: children ?? /* @__PURE__ */ jsx(HiQuestionMarkCircle, { "aria-hidden": "true" })
+	}), /* @__PURE__ */ jsx(Popover.Portal, {
+		container: portalContainer(),
+		children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			side,
+			sideOffset: 8,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsxs(Popover.Popup, {
+				className: clsx("max-w-sm text-left", tipClassName),
+				children: [/* @__PURE__ */ jsx(Popover.Arrow, { className: tipArrowClassName }), formatInfoTipContent(text)]
+			})
+		})
+	})] });
+}
+//#endregion
+export { InfoTip, formatInfoTipContent };

package/dist/components/Input.js

@@ -2,12 +2,12 @@ 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 cx from "classnames";
-import { forwardRef, useId, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
 //#region src/components/Input.tsx
 /** The box a text field draws, for other controls that should look like one. */
-var fieldBoxClasses = cx("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)]");
+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)]",
@@ -70,7 +70,7 @@ var Input = forwardRef(({ label, labelHint, description, error, className = "",
 		children: [/* @__PURE__ */ jsx("input", {
 			ref,
 			type: isPassword && showPassword ? "text" : type,
-			className: cx(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),
+			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,
@@ -96,7 +96,7 @@ var Textarea = forwardRef(({ label, labelHint, description, error, className = "
 	}, props.id, props["aria-describedby"], required);
 	return field.frame(/* @__PURE__ */ jsx("textarea", {
 		ref,
-		className: cx(fieldBoxClasses, "min-h-[140px] resize-y", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", className),
+		className: clsx(fieldBoxClasses, "min-h-[140px] resize-y", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", className),
 		...props,
 		id: field.id,
 		required,

package/dist/components/LetterBadge.js

@@ -1,11 +1,11 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 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: cx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
+		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),
 		children: text
 	});
 }

package/dist/components/Loader.js

@@ -1,5 +1,5 @@
 import { LoaderIcon } from "./StatusIcons.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Loader.tsx
 var RIPPLE_STAGGER_S = .22;
@@ -15,9 +15,9 @@ function Loader({ size = 48, text, textSize = 12, full = true, color = "", loade
 	return /* @__PURE__ */ jsxs("div", {
 		role: "status",
 		"aria-label": text || "Loading",
-		className: cx(full && "w-full", "flex flex-col flex-wrap justify-center items-center gap-y-1"),
+		className: clsx(full && "w-full", "flex flex-col flex-wrap justify-center items-center gap-y-1"),
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cx("w-full flex justify-center items-center", loaderColor),
+			className: clsx("w-full flex justify-center items-center", loaderColor),
 			style: loaderStyle,
 			children: variant === "logo" ? /* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 64.29 64.29",

package/dist/components/Markdown.js

@@ -1,5 +1,5 @@
-import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
 //#region src/components/Markdown.tsx
 var MarkdownImpl = lazy(() => import("./MarkdownImpl.js"));
 function Markdown(props) {

package/dist/components/MarkdownImpl.js

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
@@ -21,7 +21,7 @@ function Markdown({ children, isStreaming, controls }) {
 			shikiTheme,
 			components: { a: ({ node, ...props }) => /* @__PURE__ */ jsx("a", {
 				...props,
-				className: cx("link wrap-break-word", props.className),
+				className: clsx("link wrap-break-word", props.className),
 				target: "_blank",
 				rel: "noopener noreferrer"
 			}) },

package/dist/components/Menu.d.ts

@@ -0,0 +1,33 @@
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import type { ReactNode } from 'react';
+type Styled<Props> = Omit<Props, 'className'> & {
+    className?: string | undefined;
+};
+export interface MenuPopupProps {
+    children: ReactNode;
+    className?: string | undefined;
+    side?: BaseMenu.Positioner.Props['side'];
+    align?: BaseMenu.Positioner.Props['align'];
+    /** What it opens against in place of its trigger, such as the point a right-click landed. */
+    anchor?: BaseMenu.Positioner.Props['anchor'];
+    /** Keeps the popup's children mounted while closed, so state they own survives. */
+    keepMounted?: boolean;
+}
+/** The portal, positioner and popup every menu needs. */
+export declare function MenuPopup({ children, className, side, align, anchor, keepMounted, }: MenuPopupProps): import("react").JSX.Element;
+export declare function MenuItem({ className, ...props }: Styled<BaseMenu.Item.Props>): import("react").JSX.Element;
+/** A navigation row; give it `render` for a router link. Closes the menu like any item. */
+export declare function MenuLinkItem({ className, ...props }: Styled<BaseMenu.LinkItem.Props>): import("react").JSX.Element;
+/** A choice within a Menu.RadioGroup, checked while it holds the group's value. */
+export declare function MenuRadioItem({ className, children, ...props }: Styled<BaseMenu.RadioItem.Props>): import("react").JSX.Element;
+/** An on/off choice, checked while `checked` holds; it closes the menu like any item. */
+export declare function MenuCheckboxItem({ className, children, ...props }: Styled<BaseMenu.CheckboxItem.Props>): import("react").JSX.Element;
+/** The row that opens a submenu, inside a Menu.SubmenuRoot. */
+export declare function MenuSubmenuTrigger({ className, children, ...props }: Styled<BaseMenu.SubmenuTrigger.Props>): import("react").JSX.Element;
+export declare function MenuSeparator({ className }: {
+    className?: string | undefined;
+}): import("react").JSX.Element;
+export declare function MenuGroupLabel({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/components/Menu.js

@@ -0,0 +1,86 @@
+import { FaCheck } from "../icons/fa/FaCheck.js";
+import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
+import { panelClassName, panelItemClassName, portalContainer, 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,
+			align,
+			anchor,
+			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),
+				children
+			})
+		})
+	});
+}
+function MenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		...props,
+		className: clsx(itemClassName, className)
+	});
+}
+/** A navigation row; give it `render` for a router link. Closes the menu like any item. */
+function MenuLinkItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.LinkItem, {
+		closeOnClick: true,
+		...props,
+		className: clsx(itemClassName, className)
+	});
+}
+/** A choice within a Menu.RadioGroup, checked while it holds the group's value. */
+function MenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		closeOnClick: true,
+		...props,
+		className: clsx(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]
+	});
+}
+/** An on/off choice, checked while `checked` holds; it closes the menu like any item. */
+function MenuCheckboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		closeOnClick: true,
+		...props,
+		className: clsx(itemClassName, className),
+		children: [children, /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+			className: "ml-auto",
+			children: /* @__PURE__ */ jsx(FaCheck, { className: "size-3.5 opacity-80" })
+		})]
+	});
+}
+/** The row that opens a submenu, inside a Menu.SubmenuRoot. */
+function MenuSubmenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		...props,
+		className: clsx(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" })]
+	});
+}
+function MenuSeparator({ className }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, { className: clsx("my-1 h-px bg-(--theme-border)", className) });
+}
+function MenuGroupLabel({ children }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		className: "px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
+		children
+	});
+}
+//#endregion
+export { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger };

package/dist/components/MenuEntries.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from 'react';
+/** Something a menu row does: navigates with `href`, or runs `onClick`. */
+export interface MenuAction {
+    label: string;
+    icon?: ReactNode;
+    /** Navigates instead of calling onClick. */
+    href?: string | undefined;
+    /** Loads the page instead of routing, for paths the host's router doesn't serve. */
+    reloadDocument?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+    disabled?: boolean | undefined;
+    /** Why the action is disabled, shown on hover and read with its name. */
+    disabledReason?: string | undefined;
+    destructive?: boolean | undefined;
+    /** Makes the row an on/off choice, checked while true. */
+    checked?: boolean | undefined;
+    /** Text the row copies to the clipboard, confirmed with a toast naming `label`. */
+    copy?: {
+        text: string;
+        label: string;
+    } | undefined;
+    /** More text a menu's search matches, beside the label. */
+    keywords?: string | undefined;
+}
+/** A row that opens a menu of its own. */
+export interface MenuSubmenu {
+    label: string;
+    icon?: ReactNode;
+    items: MenuEntry[];
+    search?: MenuSearch | undefined;
+}
+export interface MenuDivider {
+    divider: true;
+}
+export type MenuEntry = MenuAction | MenuSubmenu | MenuDivider;
+export declare const menuDivider: MenuDivider;
+/** A field atop a menu that narrows it, submenus included, to the actions it matches. */
+export interface MenuSearch {
+    placeholder: string;
+    /** Shown when nothing matches. */
+    empty: string;
+}
+export declare const isMenuDivider: (entry: MenuEntry) => entry is MenuDivider;
+export declare const isMenuSubmenu: (entry: MenuEntry) => entry is MenuSubmenu;
+/** Gives a menu root its search's filter; `children` renders the root with the query. */
+export declare function MenuFilter({ search, children, }: {
+    search: MenuSearch | undefined;
+    children: (query: string) => ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+/** A menu's rows, with its search field when it has one. */
+export declare function MenuEntries({ entries, search, query, }: {
+    entries: MenuEntry[];
+    search?: MenuSearch | undefined;
+    /** The search's text, from the MenuFilter around the menu's root. */
+    query?: string;
+}): import("react").JSX.Element;

package/dist/components/MenuEntries.js

@@ -0,0 +1,123 @@
+import { MenuCheckboxItem, MenuItem, MenuLinkItem, MenuPopup, MenuSeparator, MenuSubmenuTrigger } from "./Menu.js";
+import { safeUrl } from "../safeUrl.js";
+import { keyedByContent } from "./keys.js";
+import { Tooltip } from "./Tooltip.js";
+import { useLink, useNotify, useStrings } from "./Provider.js";
+import { useQueryMatch } from "./search.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
+var menuDivider = { divider: true };
+var isMenuDivider = (entry) => "divider" in entry;
+var isMenuSubmenu = (entry) => "items" in entry;
+/** Gives a menu root its search's filter; `children` renders the root with the query. */
+function MenuFilter({ search, children }) {
+	const [query, setQuery] = useState("");
+	if (!search) return children("");
+	return /* @__PURE__ */ jsx(Menu.FilterProvider, {
+		filter: null,
+		value: query,
+		onValueChange: setQuery,
+		autoHighlight: true,
+		children: children(query)
+	});
+}
+/** A menu's rows, with its search field when it has one. */
+function MenuEntries({ entries, search, query = "" }) {
+	const matches = useQueryMatch();
+	if (!search) return /* @__PURE__ */ jsx(EntryRows, { entries });
+	const needle = query.trim();
+	const shown = needle ? searchMatches(entries, (a) => matches(needle, a.label, a.keywords)) : entries;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "sticky top-0 z-[1] bg-(--theme-app-bg) px-2 pt-0.5 pb-1",
+			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)"
+			})
+		}),
+		/* @__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
+		})
+	] });
+}
+function searchMatches(entries, match) {
+	const found = /* @__PURE__ */ new Map();
+	const walk = (list) => {
+		for (const entry of list) if (isMenuSubmenu(entry)) walk(entry.items);
+		else if (!isMenuDivider(entry) && !found.has(entry.label) && match(entry)) found.set(entry.label, entry);
+	};
+	walk(entries);
+	return [...found.values()];
+}
+function EntryRows({ entries }) {
+	return keyedByContent(entries, (entry) => isMenuDivider(entry) ? "divider" : entry.label).map(({ key, item }) => isMenuDivider(item) ? /* @__PURE__ */ jsx(MenuSeparator, {}, key) : isMenuSubmenu(item) ? /* @__PURE__ */ jsx(SubmenuRow, { submenu: item }, key) : /* @__PURE__ */ jsx(ActionRow, { action: item }, key));
+}
+function SubmenuRow({ submenu }) {
+	return /* @__PURE__ */ jsx(MenuFilter, {
+		search: submenu.search,
+		children: (query) => /* @__PURE__ */ jsxs(Menu.SubmenuRoot, { children: [/* @__PURE__ */ jsxs(MenuSubmenuTrigger, { children: [submenu.icon, submenu.label] }), /* @__PURE__ */ jsx(MenuPopup, {
+			side: "inline-end",
+			children: /* @__PURE__ */ jsx(MenuEntries, {
+				entries: submenu.items,
+				search: submenu.search,
+				query
+			})
+		})] })
+	});
+}
+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 content = /* @__PURE__ */ jsxs(Fragment, { children: [action.icon, action.label] });
+	if (action.href && !action.disabled) return action.reloadDocument ? /* @__PURE__ */ jsx(MenuLinkItem, {
+		href: safeUrl(action.href),
+		className,
+		children: content
+	}) : /* @__PURE__ */ jsx(MenuLinkItem, {
+		render: /* @__PURE__ */ jsx(Link, { href: action.href }),
+		className,
+		children: content
+	});
+	const run = () => {
+		if (action.copy) copy(action.copy);
+		action.onClick?.();
+	};
+	const reason = action.disabled ? action.disabledReason : void 0;
+	const label = /* @__PURE__ */ jsxs(Fragment, { children: [content, reason && /* @__PURE__ */ jsxs("span", {
+		className: "sr-only",
+		children: [". ", reason]
+	})] });
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: reason,
+		side: "right",
+		children: action.checked === void 0 ? /* @__PURE__ */ jsx(MenuItem, {
+			disabled: action.disabled,
+			onClick: run,
+			className,
+			children: label
+		}) : /* @__PURE__ */ jsx(MenuCheckboxItem, {
+			checked: action.checked,
+			onCheckedChange: run,
+			disabled: action.disabled,
+			className,
+			children: label
+		})
+	});
+}
+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/Modal.d.ts

@@ -0,0 +1,29 @@
+import { Dialog } from '@base-ui/react/dialog';
+import type { ReactNode } from 'react';
+/** The panel a modal draws by default; pass `panel={false}` to paint your own. */
+export declare const modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
+/** Names the modal for assistive technology; renders an `<h2>`. */
+export declare const ModalTitle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+/** Describes the modal for assistive technology; renders a `<p>`. */
+export declare const ModalDescription: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export interface ModalProps extends Omit<Dialog.Popup.Props, 'className' | 'children' | 'render'> {
+    open: boolean;
+    onClose: () => void;
+    /** A confirmation the person must answer: it takes the alertdialog role and the
+     *  backdrop doesn't close it. Escape still cancels while it's dismissible. */
+    alert?: boolean | undefined;
+    /** False ignores the backdrop and Escape, so typed input isn't lost to a stray
+     *  click; the modal's own buttons still close it. */
+    dismissible?: boolean | undefined;
+    /** Where the panel sits: near the top of the window, or in its middle. */
+    align?: 'top' | 'center' | undefined;
+    /** Draws the default panel surface around `className`. */
+    panel?: boolean;
+    /** The backdrop's dimming, for a modal that needs a darker or blurred stage. */
+    backdropClassName?: string;
+    className?: string;
+    children: ReactNode;
+}
+/** A modal dialog: focus stays inside, the page behind is inert and doesn't scroll,
+ *  and focus returns to where it was on close. Name it with `ModalTitle` or `aria-label`. */
+export declare function Modal({ open, onClose, alert, dismissible, align, panel, backdropClassName, className, children, ...popupProps }: ModalProps): import("react").JSX.Element;

package/dist/components/Modal.js

@@ -0,0 +1,47 @@
+import { portalContainer } from "./floating.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/Modal.tsx
+/** The panel a modal draws by default; pass `panel={false}` to paint your own. */
+var modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
+/** Names the modal for assistive technology; renders an `<h2>`. */
+var ModalTitle = Dialog.Title;
+/** Describes the modal for assistive technology; renders a `<p>`. */
+var ModalDescription = Dialog.Description;
+/** A modal dialog: focus stays inside, the page behind is inert and doesn't scroll,
+*  and focus returns to where it was on close. Name it with `ModalTitle` or `aria-label`. */
+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") {
+			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
+			})
+		})]
+	});
+	return alert ? /* @__PURE__ */ jsx(AlertDialog.Root, {
+		open,
+		onOpenChange,
+		children: content
+	}) : /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		disablePointerDismissal: !dismissible,
+		onOpenChange,
+		children: content
+	});
+}
+//#endregion
+export { Modal, ModalDescription, ModalTitle, modalPanelClassName };

package/dist/components/Overview.js

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