@wular/coder 0.4.7 → 0.4.9

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{filter.f19b6d5ebd6a3c2b.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.7e5713a82abf0211.js";
-import { iLeft, iRight, iSearch, iX } from "./icons.1777c0350d5d215e.js";
+import { FILTER_ROWS } from "../../utils/paged.18f5872fc5aebe96.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.a4dd9fb9f566689a.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.1777c0350d5d215e.js → icons.a34176f37808cd66.js}

@@ -13,12 +13,16 @@ 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";
 export const iMenu = "M4 6h16M4 12h16M4 18h16";
 export const iX = "M18 6 6 18M6 6l12 12";
 export const iCheck = "M20 6 9 17l-5-5";
+export const iTrash = "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6";
+export const iUpload = "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12";
+export const iInfo = "M12 16v-4M12 8h.01M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0";
 export const iDots = "M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0";
 export const iPlus = "M12 5v14M5 12h14";
 export const iPencil = "M4 20h4L19 9l-4-4L4 16v4ZM13 7l4 4";

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.a41edd5cde1c90cf.js

@@ -0,0 +1,94 @@
+"use client";
+import "./menu.25b184f68cba7b46.css.pnext-asset.js";
+import { useId, useRef } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+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 } 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, button, label, tip, align = "right", wide, class: cls, children }) {
+	const id = useId();
+	return /* @__PURE__ */ _jsxs("span", {
+		class: `menu ${align}${cls ? ` ${cls}` : ""}`,
+		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,
+			"aria-label": label,
+			title: tip ? undefined : label,
+			"data-tip": tip,
+			children: summary
+		}), /* @__PURE__ */ _jsx("div", {
+			id,
+			class: wide ? "pop wide" : "pop",
+			popover: "auto",
+			onBeforeToggle: (event) => {
+				// Opens on its side of the button when it fits there, else on the roomier side, scrolling only within that room.
+				if (event.newState !== "open") return;
+				const pop = event.currentTarget;
+				const box = pop.parentElement?.querySelector("button")?.getBoundingClientRect();
+				if (!box) return;
+				pop.style.cssText = "display: block; visibility: hidden; max-height: none";
+				const height = pop.offsetHeight;
+				pop.style.cssText = "";
+				const below = window.innerHeight - box.bottom - 20;
+				const above = box.top - 20;
+				const [own, other] = align === "up" ? [above, below] : [below, above];
+				const flip = height > own && other > own;
+				pop.classList.toggle("flip", flip);
+				pop.style.maxHeight = `${Math.max(120, Math.round(flip ? other : own))}px`;
+			},
+			onClick: (event) => {
+				if (event.target.closest("a, button:not([data-keep])")) event.currentTarget.hidePopover();
+			},
+			children
+		})]
+	});
+}
+/** 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();
+	const list = useRef(null);
+	const closing = useRef();
+	// Closing waits a beat, so the pointer can cross the gap into the list.
+	const hover = (open) => (event) => {
+		if (event.pointerType !== "mouse") return;
+		clearTimeout(closing.current);
+		if (open) list.current.togglePopover(true);
+		else closing.current = setTimeout(() => list.current?.togglePopover(false), 150);
+	};
+	return /* @__PURE__ */ _jsxs("span", {
+		class: cls ? `more ${cls}` : "more",
+		onPointerEnter: hover(true),
+		onPointerLeave: hover(false),
+		children: [/* @__PURE__ */ _jsx("button", {
+			popovertarget: id,
+			type: "button",
+			"aria-label": title,
+			children: label
+		}), /* @__PURE__ */ _jsx("div", {
+			id,
+			ref: list,
+			class: "more-list scroll-box",
+			popover: "auto",
+			children
+		})]
+	});
+}
+/** An i that opens its explanation in the same hover card as "+n more". */
+export const InfoTip = ({ label, children }) => /* @__PURE__ */ _jsx(MoreList, {
+	label: /* @__PURE__ */ _jsx(Icon, { d: iInfo }),
+	title: label,
+	class: "info",
+	children
+});

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/modal.b5f74ebf59590fa6.js

@@ -0,0 +1,66 @@
+"use client";
+import "./modal.9db07d368dcf5981.css.pnext-asset.js";
+import { toChildArray } from "../../../../../../../node_modules/preact/dist/preact.mjs";
+import { useEffect, useId, useRef } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { Button, IconButton } from "./button.983daea9e687fc5d.js";
+import { iX } from "./icons.a34176f37808cd66.js";
+import { Icon } from "./icon.0874ca2f58f7db14.js";
+import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** A modal with a title, a body and its actions after a cancel button; Escape, Cancel or a backdrop click closes it, never while busy. */
+export function Modal({ open = true, class: className, tone, title, icon, dismiss, busy, cancel = "Cancel", cancelDanger, focus = "cancel", actions, onSubmit, onClose, children }) {
+	const dialog = useRef(null);
+	const id = useId();
+	useEffect(() => {
+		const el = dialog.current;
+		if (open && !el.open) el.showModal();
+		else if (!open && el.open) el.close();
+	}, [open]);
+	const close = () => !busy && dialog.current.close();
+	// Alone, the cancel button is the one action.
+	const alone = toChildArray(actions).length === 0;
+	return /* @__PURE__ */ _jsx("dialog", {
+		ref: dialog,
+		class: [
+			"modal",
+			className,
+			tone && `tone ${tone}`
+		].filter(Boolean).join(" "),
+		"aria-labelledby": id,
+		onClose,
+		onCancel: (event) => {
+			event.preventDefault();
+			close();
+		},
+		onClick: (event) => event.target === event.currentTarget && close(),
+		children: /* @__PURE__ */ _jsxs("form", {
+			method: onSubmit ? undefined : "dialog",
+			onSubmit,
+			children: [
+				/* @__PURE__ */ _jsxs("header", { children: [
+					icon ? /* @__PURE__ */ _jsx(Icon, { d: icon }) : null,
+					/* @__PURE__ */ _jsx("h2", {
+						id,
+						children: title
+					}),
+					dismiss ? /* @__PURE__ */ _jsx(IconButton, {
+						icon: iX,
+						label: "Close",
+						onClick: close
+					}) : null
+				] }),
+				children,
+				/* @__PURE__ */ _jsxs("div", {
+					class: "actions",
+					children: [/* @__PURE__ */ _jsx(Button, {
+						variant: alone ? "primary" : "ghost",
+						danger: !alone && cancelDanger,
+						disabled: busy,
+						autofocus: focus === "cancel",
+						onClick: close,
+						children: cancel
+					}), actions]
+				})
+			]
+		})
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/notice.f395f231cbb96445.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** An alert bar, neutral unless given a tone; `slim` keeps it to one line. */
+export function Notice({ tone, slim, children }) {
+	return /* @__PURE__ */ _jsx("div", {
+		class: [
+			"notice",
+			slim && "slim",
+			tone
+		].filter(Boolean).join(" "),
+		role: "status",
+		children
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{segmented.5ac52bb38fb64ae5.js → segmented.a08dc08338d080e9.js}

@@ -1,7 +1,18 @@
 import "./segmented.0bd8652fdbc05eb0.css.pnext-asset.js";
-import { jsx as _jsx } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import { Link } from "../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
+import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** One-click choices in a row, a radio group to the keyboard: arrows move and pick, Enter submits the form. */
-export function Segmented({ label, options, value, onChange, class: cls, disabled }) {
+export function Segmented({ label, options, value, onChange, link, class: cls, disabled, children }) {
+	if (!onChange) return /* @__PURE__ */ _jsxs("div", {
+		class: cls ? `seg-btns ${cls}` : "seg-btns",
+		role: "group",
+		"aria-label": label,
+		children: [options.map(([key, text]) => link ? /* @__PURE__ */ _jsx(Link, {
+			...link(key),
+			"aria-current": key === value ? "page" : undefined,
+			children: text
+		}, key) : /* @__PURE__ */ _jsx("a", { children: text }, key)), children]
+	});
 	const at = Math.max(0, options.findIndex(([key]) => key === value));
 	return /* @__PURE__ */ _jsx("div", {
 		class: cls ? `seg-btns ${cls}` : "seg-btns",

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{select.f036fdc3fce02b92.js → select.36c6f21ce6aa720f.js}

@@ -1,12 +1,13 @@
-import "./select.03a695573b914d6f.css.pnext-asset.js";
+import "./select.419208bb34700af2.css.pnext-asset.js";
 import { Fragment } from "../../../../../../../node_modules/preact/dist/preact.mjs";
 import { useId, useLayoutEffect, useRef, useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { iCheck, iDown, iPlus } from "./icons.1777c0350d5d215e.js";
+import { iDown, iPlus } from "./icons.a34176f37808cd66.js";
 import { Icon } from "./icon.0874ca2f58f7db14.js";
+import { MenuLabel, MenuOption, MenuPanel } from "./menu-items.a8e580a0c90631ff.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const PAGE = 10;
 /** A select in the menu style, with keyboard, type-ahead and touch; `name` posts its value. */
-export function Select({ label, options, value, defaultValue, onChange, name, disabled, headings, subs, action }) {
+export function Select({ label, options, value, defaultValue, onChange, onFocus, name, disabled, headings, subs, icons, action }) {
 	const [own, setOwn] = useState(defaultValue ?? options[0]?.[0] ?? "");
 	// A value the options no longer hold falls back to the first, as a native select does.
 	const selected = Math.max(0, options.findIndex(([key]) => key === (value ?? own)));
@@ -144,75 +145,80 @@ export function Select({ label, options, value, defaultValue, onChange, name, di
 				"aria-controls": `${id}-list`,
 				"aria-activedescendant": open ? `${id}-${active}` : undefined,
 				disabled,
+				onFocus,
+				onPointerDown: onFocus,
 				onClick: (event) => {
 					event.preventDefault();
 					if (open) close();
 					else show();
 				},
 				onKeyDown,
-				children: [/* @__PURE__ */ _jsx("span", {
-					class: "grow",
-					children: options[selected]?.[1] ?? ""
-				}), /* @__PURE__ */ _jsx(Icon, { d: iDown })]
+				children: [
+					icons?.[current] ?? null,
+					/* @__PURE__ */ _jsx("span", {
+						class: "grow",
+						children: options[selected]?.[1] ?? ""
+					}),
+					/* @__PURE__ */ _jsx(Icon, { d: iDown })
+				]
 			}),
 			name ? /* @__PURE__ */ _jsx("input", {
 				type: "hidden",
 				name,
 				value: current
 			}) : null,
-			open ? /* @__PURE__ */ _jsxs("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: [options.map(([key, text], index) => /* @__PURE__ */ _jsxs(Fragment, { children: [headings?.[key] ? /* @__PURE__ */ _jsx("p", {
-					class: "pop-label",
-					children: headings[key]
-				}) : null, /* @__PURE__ */ _jsxs("div", {
+			open ? /* @__PURE__ */ _jsxs(SelectList, {
+				id,
+				label,
+				listRef: list,
+				place,
+				children: [options.map(([key, text], index) => /* @__PURE__ */ _jsxs(Fragment, { children: [headings?.[key] ? /* @__PURE__ */ _jsx(MenuLabel, { children: headings[key] }) : null, /* @__PURE__ */ _jsx(MenuOption, {
 					id: `${id}-${index}`,
 					"data-index": index,
-					role: "option",
-					"aria-selected": index === selected,
-					class: index === active ? "pop-item on" : "pop-item",
+					active: index === active,
+					selected: index === selected,
+					check: true,
+					icon: icons?.[key],
+					sub: subs?.[key] ? /* @__PURE__ */ _jsx("bdi", {
+						dir: "ltr",
+						children: subs[key]
+					}) : null,
 					onPointerMove: () => index !== active && setActive(index),
 					// Picks without letting a wrapping label re-open the list.
 					onClick: (event) => {
 						event.preventDefault();
 						pick(index);
 					},
-					children: [/* @__PURE__ */ _jsxs("span", {
-						class: "grow",
-						children: [text, subs?.[key] ? /* @__PURE__ */ _jsx("small", {
-							class: "pop-path",
-							children: /* @__PURE__ */ _jsx("bdi", {
-								dir: "ltr",
-								children: subs[key]
-							})
-						}) : null]
-					}), /* @__PURE__ */ _jsx(Icon, { d: iCheck })]
-				})] }, key)), action ? /* @__PURE__ */ _jsxs("div", {
+					children: text
+				})] }, key)), action ? /* @__PURE__ */ _jsx(MenuOption, {
 					id: `${id}-${options.length}`,
 					"data-index": options.length,
-					role: "option",
-					"aria-selected": false,
-					class: active === options.length ? "pop-item action on" : "pop-item action",
+					active: active === options.length,
+					selected: false,
+					class: "action",
+					icon: action.icon ?? iPlus,
 					onPointerMove: () => active !== options.length && setActive(options.length),
 					onClick: (event) => {
 						event.preventDefault();
 						pick(options.length);
 					},
-					children: [/* @__PURE__ */ _jsx(Icon, { d: action.icon ?? iPlus }), /* @__PURE__ */ _jsx("span", {
-						class: "grow",
-						children: action.label
-					})]
+					children: action.label
 				}) : null]
 			}) : null
 		]
 	});
 }
+/** A select's list in the top layer at `place`; the field keeps focus, so the mouse never takes it. */
+export const SelectList = ({ id, label, listRef, place, children }) => /* @__PURE__ */ _jsx(MenuPanel, {
+	panelRef: listRef,
+	id: `${id}-list`,
+	class: "select-pop",
+	popover: "manual",
+	role: "listbox",
+	"aria-label": label,
+	style: place || "visibility:hidden",
+	onMouseDown: (event) => event.preventDefault(),
+	children
+});
 /** The label a filter's value shows. */
 export const labelOf = (options, value) => (options.find(([key]) => key === value) ?? options[0])[1];