@wular/coder 0.4.8 → 0.4.9

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/button.983daea9e687fc5d.js

@@ -0,0 +1,91 @@
+import "./button.d7f4433f4e7faa80.css.pnext-asset.js";
+import { Link } from "../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
+import { iExternal } from "./icons.a34176f37808cd66.js";
+import { Icon } from "./icon.0874ca2f58f7db14.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+const classOf = ({ variant, danger, size, wide, class: cls }) => [
+	"btn",
+	variant !== "primary" && variant,
+	danger && "danger",
+	size,
+	wide && "wide",
+	cls
+].filter(Boolean).join(" ");
+/** The label between its icons; a spinner takes the left icon's place, else the right one's, else sits over the label. */
+function Content({ leftIcon, rightIcon, loading, children }) {
+	const spin = /* @__PURE__ */ _jsx("i", { class: "btn-spin" });
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		leftIcon ? loading ? spin : /* @__PURE__ */ _jsx(Icon, { d: leftIcon }) : null,
+		children,
+		rightIcon ? loading && !leftIcon ? spin : /* @__PURE__ */ _jsx(Icon, { d: rightIcon }) : null
+	] });
+}
+/** A button, or a plain link to `href` while it is enabled; `loading` disables it and shows a spinner. */
+export function Button({ variant, danger, size, wide, leftIcon, rightIcon, loading, disabled, href, external, as, type = "button", class: cls, children, ...rest }) {
+	const className = classOf({
+		variant,
+		danger,
+		size,
+		wide,
+		class: cls
+	});
+	const content = /* @__PURE__ */ _jsx(Content, {
+		leftIcon,
+		rightIcon: rightIcon ?? (external ? iExternal : undefined),
+		loading,
+		children
+	});
+	if (as === "span") return /* @__PURE__ */ _jsx("span", {
+		class: className,
+		"aria-hidden": "true",
+		children: content
+	});
+	if (href && !disabled && !loading) return /* @__PURE__ */ _jsx("a", {
+		...rest,
+		class: className,
+		href,
+		...external ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : {},
+		children: content
+	});
+	return /* @__PURE__ */ _jsx("button", {
+		"aria-busy": loading || undefined,
+		...rest,
+		type,
+		class: className,
+		disabled: disabled || loading,
+		children: content
+	});
+}
+/** A `Button` that links to an in-app page, with `Link`'s typed route and params. */
+export function LinkButton({ variant, danger, size, wide, leftIcon, rightIcon, class: cls, children, ...link }) {
+	return /* @__PURE__ */ _jsx(Link, {
+		...link,
+		class: classOf({
+			variant,
+			danger,
+			size,
+			wide,
+			class: cls
+		}),
+		children: /* @__PURE__ */ _jsx(Content, {
+			leftIcon,
+			rightIcon,
+			children
+		})
+	});
+}
+/** A square button that shows only an icon, named by `label`. */
+export function IconButton({ icon, label, tip, type = "button", class: cls, children, ...rest }) {
+	return /* @__PURE__ */ _jsx("button", {
+		...rest,
+		type,
+		class: cls ? `icon-btn ${cls}` : "icon-btn",
+		"aria-label": label,
+		title: tip ? undefined : label,
+		"data-tip": tip,
+		children: icon ? /* @__PURE__ */ _jsx(Icon, { d: icon }) : children
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{card.6227f43fc0ae4bd1.js → card.c08471eaa0bc1cec.js}

@@ -1,6 +1,6 @@
 import "./card.15f7435f202831c3.css.pnext-asset.js";
-import { Icon } from "./icon.0874ca2f58f7db14.js";
-import { iPlus } from "./icons.868385119bf2de28.js";
+import { Button } from "./button.983daea9e687fc5d.js";
+import { iPlus } from "./icons.a34176f37808cd66.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 export function Card({ id, title, count, actions, tone, children }) {
 	return /* @__PURE__ */ _jsxs("section", {
@@ -35,14 +35,19 @@ export function FoldCard({ title, note, actions, open = "Add", opened, children
 					class: "bar-r",
 					children: actions
 				}) : null,
-				/* @__PURE__ */ _jsxs("span", {
-					class: "btn outline sm fold-open",
-					"aria-hidden": "true",
-					children: [open === "Add" ? /* @__PURE__ */ _jsx(Icon, { d: iPlus }) : null, open]
+				/* @__PURE__ */ _jsx(Button, {
+					as: "span",
+					variant: "outline",
+					size: "sm",
+					class: "fold-open",
+					leftIcon: open === "Add" ? iPlus : undefined,
+					children: open
 				}),
-				/* @__PURE__ */ _jsx("span", {
-					class: "btn ghost sm fold-close",
-					"aria-hidden": "true",
+				/* @__PURE__ */ _jsx(Button, {
+					as: "span",
+					variant: "ghost",
+					size: "sm",
+					class: "fold-close",
 					children: "Close"
 				})
 			]

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{collapse.dab7f208cbbe6a33.js → collapse.762eba56417214ca.js}

@@ -1,6 +1,7 @@
 "use client";
 import "./collapse.fb687b120ea60247.css.pnext-asset.js";
 import { useLayoutEffect, useRef, useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { Button } from "./button.983daea9e687fc5d.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** Long content cut to its first `lines` lines under a fade, with a Show more toggle. */
 export function Collapse({ lines = 10, class: cls, children }) {
@@ -22,9 +23,10 @@ export function Collapse({ lines = 10, class: cls, children }) {
 			class: cls ? `collapse-box ${cls}` : "collapse-box",
 			ref: box,
 			children
-		}), long ? /* @__PURE__ */ _jsx("button", {
-			type: "button",
-			class: "btn ghost sm more-toggle",
+		}), long ? /* @__PURE__ */ _jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			class: "more-toggle",
 			"aria-expanded": open,
 			onClick: () => setOpen(!open),
 			children: open ? "Show less" : "Show more"

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{combo.0572dd5730c94112.js → combo.efb84f0cca771948.js}

@@ -1,7 +1,7 @@
 import { useId, useLayoutEffect, useRef, useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { Icon } from "./icon.0874ca2f58f7db14.js";
-import { iCheck } from "./icons.868385119bf2de28.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import { MenuOption } from "./menu-items.a8e580a0c90631ff.js";
+import { SelectList } from "./select.36c6f21ce6aa720f.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const SHOWN = 50;
 /** A text input with suggestions under it, filtered as you type; any text is still a value. */
 export function Combo({ label, name, class: className, options, placeholder, value, onChange, onOpen }) {
@@ -89,27 +89,20 @@ export function Combo({ label, name, class: className, options, placeholder, val
 			else return;
 			event.preventDefault();
 		}
-	}), listed ? /* @__PURE__ */ _jsx("div", {
-		ref: list,
-		id: `${id}-list`,
-		class: "pop select-pop",
-		popover: "manual",
-		role: "listbox",
-		"aria-label": label,
-		style: place || "visibility:hidden",
-		onMouseDown: (event) => event.preventDefault(),
-		children: shown.map((option, index) => /* @__PURE__ */ _jsxs("div", {
+	}), listed ? /* @__PURE__ */ _jsx(SelectList, {
+		id,
+		label,
+		listRef: list,
+		place,
+		children: shown.map((option, index) => /* @__PURE__ */ _jsx(MenuOption, {
 			id: `${id}-${index}`,
 			"data-index": index,
-			role: "option",
-			"aria-selected": option === value,
-			class: index === active ? "pop-item on" : "pop-item",
+			active: index === active,
+			selected: option === value,
+			check: true,
 			onPointerMove: () => index !== active && setActive(index),
 			onClick: () => pick(index),
-			children: [/* @__PURE__ */ _jsx("span", {
-				class: "grow",
-				children: option
-			}), /* @__PURE__ */ _jsx(Icon, { d: iCheck })]
+			children: option
 		}, option))
 	}) : null] });
 }

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/confirm.53edc755945b0563.js

@@ -0,0 +1,27 @@
+"use client";
+import { Button } from "./button.983daea9e687fc5d.js";
+import { iTrash } from "./icons.a34176f37808cd66.js";
+import { Modal } from "./modal.b5f74ebf59590fa6.js";
+import { jsx as _jsx } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** A modal question before a destructive step. */
+export function ConfirmDialog({ open, title, body, confirmLabel, onConfirm, onClose, busy }) {
+	return /* @__PURE__ */ _jsx(Modal, {
+		open,
+		class: "confirm",
+		title,
+		busy,
+		onSubmit: (event) => {
+			event.preventDefault();
+			onConfirm();
+		},
+		onClose,
+		actions: /* @__PURE__ */ _jsx(Button, {
+			type: "submit",
+			danger: true,
+			leftIcon: iTrash,
+			loading: busy,
+			children: confirmLabel
+		}),
+		children: body ? /* @__PURE__ */ _jsx("p", { children: body }) : null
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{copy.9be99c94423eb1ca.js → copy.0b23d7dc05757df5.js}

@@ -1,19 +1,17 @@
 "use client";
-import "./copy.991f1efa061e71d6.css.pnext-asset.js";
+import "./copy.fb3240de6c9479cd.css.pnext-asset.js";
 import { useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { iCheck, iCopy } from "./icons.868385119bf2de28.js";
-import { Icon } from "./icon.0874ca2f58f7db14.js";
+import { iCheck, iCopy } from "./icons.a34176f37808cd66.js";
+import { IconButton } from "./button.983daea9e687fc5d.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** An icon button that copies `value` and shows a check once it did. */
 export function CopyButton({ value, label = "Copy" }) {
 	const [copied, setCopied] = useState(false);
-	return /* @__PURE__ */ _jsx("button", {
-		type: "button",
-		class: copied ? "icon-btn copied" : "icon-btn",
-		"aria-label": copied ? "Copied" : label,
-		title: copied ? "Copied" : label,
-		onClick: () => void navigator.clipboard.writeText(value).then(() => setCopied(true)),
-		children: /* @__PURE__ */ _jsx(Icon, { d: copied ? iCheck : iCopy })
+	return /* @__PURE__ */ _jsx(IconButton, {
+		icon: copied ? iCheck : iCopy,
+		label: copied ? "Copied" : label,
+		class: copied ? "copied" : undefined,
+		onClick: () => void navigator.clipboard.writeText(value).then(() => setCopied(true))
 	});
 }
 /** One value to copy, such as a command or an address; `link` also opens it in a new tab. */

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{filter.4f703a4ce7d2a519.js → filter.1983b85dd0679af6.js}

@@ -1,10 +1,13 @@
-import "./filter.e20fbd035f24ed01.css.pnext-asset.js";
+import "./filter.b53f21acc3e2cfef.css.pnext-asset.js";
 import { Fragment } from "../../../../../../../node_modules/preact/dist/preact.mjs";
 import { useEffect, useRef, useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
 import { FILTER_ROWS } from "../../utils/paged.18f5872fc5aebe96.js";
-import { iLeft, iRight, iSearch, iX } from "./icons.868385119bf2de28.js";
+import { iLeft, iRight, iX } from "./icons.a34176f37808cd66.js";
+import { Chip } from "./badge.0851f234f300c694.js";
 import { Icon } from "./icon.0874ca2f58f7db14.js";
-import { Menu, MenuRadio } from "./menu.0f064f75822888be.js";
+import { Menu } from "./menu.a41edd5cde1c90cf.js";
+import { LoadingMenu, MenuItem, MenuLabel, MenuNote, MenuRadio } from "./menu-items.a8e580a0c90631ff.js";
+import { Search } from "./toolbar.9621ef221a896a8e.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const RECENT = "coder:filters";
 /** From this many options a facet's full list gets a find box. */
@@ -90,9 +93,7 @@ export function Filter({ name, facets, values, onChange }) {
 		})
 	}), /* @__PURE__ */ _jsx("span", {
 		class: "filter-chips",
-		children: chips.map((chip) => /* @__PURE__ */ _jsxs("button", {
-			type: "button",
-			class: "chip",
+		children: chips.map((chip) => /* @__PURE__ */ _jsxs(Chip, {
 			title: chip.text,
 			"aria-label": `Clear ${chip.text}`,
 			onClick: () => onChange(chip.key, ""),
@@ -103,6 +104,12 @@ export function Filter({ name, facets, values, onChange }) {
 		}, chip.key))
 	})] });
 }
+/** The Filter button while its list loads, inert. */
+export const LoadingFilter = () => /* @__PURE__ */ _jsx(LoadingMenu, {
+	class: "filter-more",
+	summaryClass: "field-btn",
+	summary: "Filter"
+});
 /** The menu's facets; a long facet opens its own list in place, and Escape steps back out of it. */
 function FilterPanel({ name, facets, values, seen, onFound, onPick }) {
 	const root = useRef(null);
@@ -122,7 +129,7 @@ function FilterPanel({ name, facets, values, seen, onFound, onPick }) {
 	useEffect(() => {
 		const pop = root.current.closest("[popover]");
 		const toggle = (event) => {
-			if (event.newState === "open") focus(".pop-item");
+			if (event.newState === "open") focus("button");
 			else show();
 		};
 		pop.addEventListener("toggle", toggle);
@@ -149,7 +156,7 @@ function FilterPanel({ name, facets, values, seen, onFound, onPick }) {
 	};
 	const searching = Boolean(open?.search && typed && !found);
 	const onKeyDown = (event) => {
-		const items = [...root.current.querySelectorAll("input, .pop-item")];
+		const items = [...root.current.querySelectorAll("input, button")];
 		const at = items.indexOf(document.activeElement);
 		const target = event.target;
 		const key = event.key;
@@ -169,26 +176,17 @@ function FilterPanel({ name, facets, values, seen, onFound, onPick }) {
 		class: "filter-panel",
 		onKeyDown,
 		children: open ? /* @__PURE__ */ _jsxs(_Fragment, { children: [
-			/* @__PURE__ */ _jsxs("button", {
-				type: "button",
-				class: "pop-item",
+			/* @__PURE__ */ _jsx(MenuItem, {
 				"data-keep": true,
-				onClick: () => show(),
-				children: [/* @__PURE__ */ _jsx(Icon, { d: iLeft }), /* @__PURE__ */ _jsx("span", {
-					class: "grow",
-					children: open.label
-				})]
+				icon: iLeft,
+				title: open.label,
+				onClick: () => show()
 			}),
-			findable(open) ? /* @__PURE__ */ _jsxs("label", {
-				class: "search",
-				children: [/* @__PURE__ */ _jsx(Icon, { d: iSearch }), /* @__PURE__ */ _jsx("input", {
-					type: "search",
-					value: q,
-					placeholder: `Find ${open.label.toLowerCase()}`,
-					"aria-label": `Find ${open.label.toLowerCase()}`,
-					autocomplete: "off",
-					onInput: (event) => setQ(event.currentTarget.value)
-				})]
+			findable(open) ? /* @__PURE__ */ _jsx(Search, {
+				value: q,
+				label: `Find ${open.label.toLowerCase()}`,
+				autocomplete: "off",
+				onInput: setQ
 			}) : null,
 			/* @__PURE__ */ _jsx("div", {
 				role: "group",
@@ -201,22 +199,13 @@ function FilterPanel({ name, facets, values, seen, onFound, onPick }) {
 					children: label
 				}, value))
 			}),
-			list.more ? /* @__PURE__ */ _jsx("p", {
-				class: "pop-note",
-				children: "Type to find more."
-			}) : !list.shown.length && !searching ? /* @__PURE__ */ _jsx("p", {
-				class: "pop-note",
-				children: "Nothing matches."
-			}) : null
+			list.more ? /* @__PURE__ */ _jsx(MenuNote, { children: "Type to find more." }) : !list.shown.length && !searching ? /* @__PURE__ */ _jsx(MenuNote, { children: "Nothing matches." }) : null
 		] }) : facets.map((facet) => {
 			const picks = facet.options.filter(([value]) => facet.inline || value);
 			if (!picks.length) return null;
 			const shown = inlineRows(picks, values[facet.key]);
 			return /* @__PURE__ */ _jsxs(Fragment, { children: [
-				/* @__PURE__ */ _jsx("p", {
-					class: "pop-label",
-					children: facet.label
-				}),
+				/* @__PURE__ */ _jsx(MenuLabel, { children: facet.label }),
 				/* @__PURE__ */ _jsx("div", {
 					role: "group",
 					"aria-label": facet.label,
@@ -227,24 +216,16 @@ function FilterPanel({ name, facets, values, seen, onFound, onPick }) {
 						children: label
 					}, value))
 				}),
-				picks.length > shown.length ? /* @__PURE__ */ _jsxs("button", {
-					type: "button",
-					class: "pop-item",
+				picks.length > shown.length ? /* @__PURE__ */ _jsx(MenuItem, {
 					"data-keep": true,
 					"data-facet": facet.key,
 					"aria-haspopup": "true",
-					onClick: () => show(facet),
-					children: [
-						/* @__PURE__ */ _jsx("span", {
-							class: "grow",
-							children: "More"
-						}),
-						/* @__PURE__ */ _jsx("span", {
-							class: "muted",
-							children: picks.length - shown.length
-						}),
-						/* @__PURE__ */ _jsx(Icon, { d: iRight })
-					]
+					title: "More",
+					end: /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+						class: "muted",
+						children: picks.length - shown.length
+					}), /* @__PURE__ */ _jsx(Icon, { d: iRight })] }),
+					onClick: () => show(facet)
 				}) : null
 			] }, facet.key);
 		})

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{icons.868385119bf2de28.js → icons.a34176f37808cd66.js}

@@ -13,6 +13,7 @@ export const iMonitor = "M4 4h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V
 export const iKey = "M2 15.5a5.5 5.5 0 1 0 11 0a5.5 5.5 0 1 0 -11 0M21 2l-9.6 9.6M15.5 7.5l3 3L22 7l-3-3";
 export const iUsers = "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8";
 export const iUser = "M8 8a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M4 21a8 8 0 0 1 16 0";
+export const iExternal = "M7 17 17 7M8 7h9v9";
 export const iOut = "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9";
 export const iSpark = "m12 3 1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9ZM19 3v4M17 5h4";
 export const iGit = "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2ZM10 13a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M14 13h3M7 13h3";

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/menu-items.a8e580a0c90631ff.js

@@ -0,0 +1,145 @@
+import "./menu.25b184f68cba7b46.css.pnext-asset.js";
+import { Link } from "../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
+import { iCheck } from "./icons.a34176f37808cd66.js";
+import { Icon } from "./icon.0874ca2f58f7db14.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+const classOf = (...names) => ["pop-item", ...names].filter(Boolean).join(" ");
+function Content({ icon, sub, end, children }) {
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		typeof icon === "string" ? /* @__PURE__ */ _jsx(Icon, { d: icon }) : icon,
+		/* @__PURE__ */ _jsxs("span", {
+			class: "grow",
+			children: [children, sub ? /* @__PURE__ */ _jsx("small", { children: sub }) : null]
+		}),
+		end
+	] });
+}
+/** A menu row that acts; with `sub` it aligns to its top. */
+export function MenuItem({ icon, title, sub, end, href, type = "button", disabled, danger, ...rest }) {
+	const cls = classOf(sub ? "rich" : false, danger && "danger");
+	const content = /* @__PURE__ */ _jsx(Content, {
+		icon,
+		sub,
+		end,
+		children: title
+	});
+	if (disabled) return /* @__PURE__ */ _jsx("div", {
+		class: cls,
+		"aria-disabled": "true",
+		children: content
+	});
+	if (href) return /* @__PURE__ */ _jsx("a", {
+		...rest,
+		class: cls,
+		href,
+		children: content
+	});
+	return /* @__PURE__ */ _jsx("button", {
+		...rest,
+		type,
+		class: cls,
+		children: content
+	});
+}
+/** A `MenuItem` that links to an in-app page, with `Link`'s typed route and params. */
+export function MenuLink({ icon, sub, end, class: cls, children, ...link }) {
+	return /* @__PURE__ */ _jsx(Link, {
+		...link,
+		class: classOf(sub ? "rich" : false, cls),
+		children: /* @__PURE__ */ _jsx(Content, {
+			icon,
+			sub,
+			end,
+			children
+		})
+	});
+}
+/** One choice in a menu section; the picked one shows its check. */
+export function MenuRadio({ on, onPick, href, disabled, icon, sub, end, children }) {
+	const props = {
+		role: "menuitemradio",
+		"aria-checked": on,
+		class: classOf(on && "on", sub ? "rich" : false)
+	};
+	const content = /* @__PURE__ */ _jsx(Content, {
+		icon,
+		sub,
+		end: /* @__PURE__ */ _jsxs(_Fragment, { children: [end, /* @__PURE__ */ _jsx(Icon, { d: iCheck })] }),
+		children
+	});
+	if (disabled) return /* @__PURE__ */ _jsx("div", {
+		...props,
+		"aria-disabled": "true",
+		children: content
+	});
+	if (href) return /* @__PURE__ */ _jsx("a", {
+		href,
+		...props,
+		children: content
+	});
+	return /* @__PURE__ */ _jsx("button", {
+		type: "button",
+		...props,
+		onClick: onPick,
+		children: content
+	});
+}
+/** One option of a listbox; `active` follows the pointer and arrows, `check` marks the selected one. */
+export function MenuOption({ active, selected, check, icon, sub, end, class: cls, children, ...rest }) {
+	return /* @__PURE__ */ _jsx("div", {
+		...rest,
+		role: "option",
+		"aria-selected": selected,
+		class: classOf(active && "on", cls),
+		children: /* @__PURE__ */ _jsx(Content, {
+			icon,
+			sub,
+			end: /* @__PURE__ */ _jsxs(_Fragment, { children: [end, check ? /* @__PURE__ */ _jsx(Icon, { d: iCheck }) : null] }),
+			children
+		})
+	});
+}
+/** A section title in a menu. */
+export const MenuLabel = ({ children, ...rest }) => /* @__PURE__ */ _jsx("p", {
+	...rest,
+	class: "pop-label",
+	children
+});
+/** A muted line in a menu, like an empty list's explanation. */
+export const MenuNote = ({ children }) => /* @__PURE__ */ _jsx("p", {
+	class: "pop-note",
+	children
+});
+/** Who or what the menu is about, above its sections. */
+export const MenuHead = ({ icon, title, sub }) => /* @__PURE__ */ _jsxs("div", {
+	class: "pop-head",
+	children: [icon, /* @__PURE__ */ _jsxs("div", {
+		class: "grow",
+		children: [/* @__PURE__ */ _jsx("b", { children: title }), /* @__PURE__ */ _jsx("small", { children: sub })]
+	})]
+});
+/** An item with a control beside it, like a chevron that opens more under it. */
+export const MenuRow = ({ children }) => /* @__PURE__ */ _jsx("div", {
+	class: "pop-row",
+	children
+});
+/** A menu's button before its page arrives, inert; a client `Menu` there would hydrate for nothing. */
+export const LoadingMenu = ({ summary, summaryClass, class: cls }) => /* @__PURE__ */ _jsx("span", {
+	class: cls ? `menu ${cls}` : "menu",
+	children: /* @__PURE__ */ _jsx("button", {
+		type: "button",
+		class: summaryClass,
+		disabled: true,
+		tabIndex: -1,
+		children: summary
+	})
+});
+/** A menu's panel that its own code opens, like a select's list; `panelRef` reaches the element. */
+export function MenuPanel({ panelRef, class: cls, children, ...rest }) {
+	return /* @__PURE__ */ _jsx("div", {
+		...rest,
+		ref: panelRef,
+		class: cls ? `pop ${cls}` : "pop",
+		children
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{menu.0f064f75822888be.js → menu.a41edd5cde1c90cf.js}

@@ -1,15 +1,26 @@
 "use client";
-import "./menu.1d42c8d0493e2221.css.pnext-asset.js";
+import "./menu.25b184f68cba7b46.css.pnext-asset.js";
 import { useId, useRef } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { iCheck, iInfo } from "./icons.868385119bf2de28.js";
+import { Button, IconButton } from "./button.983daea9e687fc5d.js";
+import { iInfo } from "./icons.a34176f37808cd66.js";
 import { Icon } from "./icon.0874ca2f58f7db14.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** A button and its popover panel, placed at the button; picking an item, an outside click or Escape closes it. */
-export function Menu({ summary, summaryClass, label, tip, align = "right", wide, class: cls, children }) {
+export function Menu({ summary, summaryClass, button, label, tip, align = "right", wide, class: cls, children }) {
 	const id = useId();
 	return /* @__PURE__ */ _jsxs("span", {
 		class: `menu ${align}${cls ? ` ${cls}` : ""}`,
-		children: [/* @__PURE__ */ _jsx("button", {
+		children: [button === "icon" ? /* @__PURE__ */ _jsx(IconButton, {
+			popovertarget: id,
+			label: label ?? "",
+			children: summary
+		}) : button ? /* @__PURE__ */ _jsx(Button, {
+			...button,
+			popovertarget: id,
+			"aria-label": label,
+			title: tip ? undefined : label,
+			children: summary
+		}) : /* @__PURE__ */ _jsx("button", {
 			popovertarget: id,
 			type: "button",
 			class: summaryClass,
@@ -44,28 +55,6 @@ export function Menu({ summary, summaryClass, label, tip, align = "right", wide,
 		})]
 	});
 }
-export function MenuItem({ icon, title, sub, href, onClick, danger }) {
-	const inner = /* @__PURE__ */ _jsxs(_Fragment, { children: [icon ? /* @__PURE__ */ _jsx(Icon, { d: icon }) : null, /* @__PURE__ */ _jsxs("span", {
-		class: "grow",
-		children: [title, sub ? /* @__PURE__ */ _jsx("small", { children: sub }) : null]
-	})] });
-	const cls = `pop-item${sub ? " rich" : ""}${danger ? " danger" : ""}`;
-	if (href) return /* @__PURE__ */ _jsx("a", {
-		class: cls,
-		href,
-		.../^https?:\/\//.test(href) ? {
-			target: "_blank",
-			rel: "noreferrer"
-		} : {},
-		children: inner
-	});
-	return /* @__PURE__ */ _jsx("button", {
-		type: "button",
-		class: cls,
-		onClick,
-		children: inner
-	});
-}
 /** A fixed "+n more" that opens the rest in a scrolling list, on hover or click; `title` names an icon-only trigger. */
 export function MoreList({ label, title, class: cls, children }) {
 	const id = useId();
@@ -103,21 +92,3 @@ export const InfoTip = ({ label, children }) => /* @__PURE__ */ _jsx(MoreList, {
 	class: "info",
 	children
 });
-/** One choice in a menu section; the picked one shows a check. */
-export function MenuRadio({ on, onPick, icon, children }) {
-	return /* @__PURE__ */ _jsxs("button", {
-		type: "button",
-		role: "menuitemradio",
-		"aria-checked": on,
-		class: on ? "pop-item on" : "pop-item",
-		onClick: onPick,
-		children: [
-			typeof icon === "string" ? /* @__PURE__ */ _jsx(Icon, { d: icon }) : icon,
-			/* @__PURE__ */ _jsx("span", {
-				class: "grow",
-				children
-			}),
-			on ? /* @__PURE__ */ _jsx(Icon, { d: iCheck }) : null
-		]
-	});
-}