@wular/coder 0.4.8 → 0.4.10

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{filter.4f703a4ce7d2a519.js → filter.3a452a262f040973.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 { FILTER_ROWS } from "../../utils/paged.0e54c3044f8ca567.js";
+import { iLeft, iRight, iX } from "./icons.e36c72f54750663a.js";
+import { Chip } from "./badge.c0bc352791a95fd6.js";
 import { Icon } from "./icon.0874ca2f58f7db14.js";
-import { Menu, MenuRadio } from "./menu.0f064f75822888be.js";
+import { Menu } from "./menu.ee45bace979944b6.js";
+import { LoadingMenu, MenuItem, MenuLabel, MenuNote, MenuRadio } from "./menu-items.1d082ac4dae8f3d4.js";
+import { Search } from "./toolbar.24036899654de6df.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.e36c72f54750663a.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";
@@ -27,7 +28,6 @@ export const iPlus = "M12 5v14M5 12h14";
 export const iPencil = "M4 20h4L19 9l-4-4L4 16v4ZM13 7l4 4";
 export const iMessage = "M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z";
 export const iSteer = "M4 12h12M12 6l6 6-6 6";
-export const iAsk = "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5M12 17h.01";
 export const iShuffle = "M16 4h4v4M20 4l-7 7M4 20l6-6M16 20h4v-4M20 20l-5-5M4 4l5 5";
 export const iSearch = "M4 11a7 7 0 1 0 14 0a7 7 0 1 0 -14 0M20 20l-3.5-3.5";
 export const iAlert = "m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3M12 9v4M12 17h.01";

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/menu-items.1d082ac4dae8f3d4.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.e36c72f54750663a.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.ee45bace979944b6.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.ce9e6cdb08ca86db.js";
+import { iInfo } from "./icons.e36c72f54750663a.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
-		]
-	});
-}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/ui/{modal.92432959e3a3e2c0.js → modal.25d53e5b41b9c4e5.js}

@@ -2,11 +2,12 @@
 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 { iX } from "./icons.868385119bf2de28.js";
+import { Button, IconButton } from "./button.ce9e6cdb08ca86db.js";
+import { iX } from "./icons.e36c72f54750663a.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", focus = "cancel", actions, onSubmit, onClose, children }) {
+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(() => {
@@ -41,20 +42,18 @@ export function Modal({ open = true, class: className, tone, title, icon, dismis
 						id,
 						children: title
 					}),
-					dismiss ? /* @__PURE__ */ _jsx("button", {
-						type: "button",
-						class: "icon-btn",
-						"aria-label": "Close",
-						onClick: close,
-						children: /* @__PURE__ */ _jsx(Icon, { d: iX })
+					dismiss ? /* @__PURE__ */ _jsx(IconButton, {
+						icon: iX,
+						label: "Close",
+						onClick: close
 					}) : null
 				] }),
 				children,
 				/* @__PURE__ */ _jsxs("div", {
 					class: "actions",
-					children: [/* @__PURE__ */ _jsx("button", {
-						type: "button",
-						class: alone ? "btn" : "btn ghost",
+					children: [/* @__PURE__ */ _jsx(Button, {
+						variant: alone ? "primary" : "ghost",
+						danger: !alone && cancelDanger,
 						disabled: busy,
 						autofocus: focus === "cancel",
 						onClick: close,

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.7f481669998074f8.js → select.2eb33e5bea28d804.js}

@@ -1,10 +1,35 @@
-import "./select.32a95ad31c0436ad.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.868385119bf2de28.js";
+import { iDown, iPlus } from "./icons.e36c72f54750663a.js";
 import { Icon } from "./icon.0874ca2f58f7db14.js";
+import { MenuLabel, MenuOption, MenuPanel } from "./menu-items.1d082ac4dae8f3d4.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const PAGE = 10;
+/** A top-layer list's place at `anchor`, flipped up near the bottom, following scrolls and resizes; a dialog or scroll box never clips it. */
+export function usePlace(anchor, list, open, max, deps = []) {
+	const [place, setPlace] = useState("");
+	useLayoutEffect(() => {
+		if (!open) return;
+		list.current?.showPopover();
+		const position = () => {
+			const box = anchor.current?.getBoundingClientRect();
+			const menu = list.current;
+			if (!box || !menu) return;
+			const below = innerHeight - box.bottom - 12;
+			const up = below < Math.min(menu.scrollHeight, 240) && box.top > below;
+			setPlace(`left:${Math.round(Math.min(box.left, innerWidth - menu.offsetWidth - 8))}px;min-width:${Math.round(box.width)}px;` + (up ? `bottom:${Math.round(innerHeight - box.top + 4)}px;max-height:${Math.round(Math.min(max, box.top - 12))}px` : `top:${Math.round(box.bottom + 4)}px;max-height:${Math.round(Math.min(max, below))}px`));
+		};
+		position();
+		addEventListener("resize", position);
+		addEventListener("scroll", position, true);
+		return () => {
+			removeEventListener("resize", position);
+			removeEventListener("scroll", position, true);
+		};
+	}, [open, ...deps]);
+	return place;
+}
 /** A select in the menu style, with keyboard, type-ahead and touch; `name` posts its value. */
 export function Select({ label, options, value, defaultValue, onChange, onFocus, name, disabled, headings, subs, icons, action }) {
 	const [own, setOwn] = useState(defaultValue ?? options[0]?.[0] ?? "");
@@ -13,9 +38,9 @@ export function Select({ label, options, value, defaultValue, onChange, onFocus,
 	const current = options[selected]?.[0] ?? "";
 	const [open, setOpen] = useState(false);
 	const [active, setActive] = useState(selected);
-	const [place, setPlace] = useState("");
 	const button = useRef(null);
 	const list = useRef(null);
+	const place = usePlace(button, list, open, 560);
 	const typed = useRef({
 		text: "",
 		at: 0
@@ -97,31 +122,14 @@ export function Select({ label, options, value, defaultValue, onChange, onFocus,
 		} else return;
 		event.preventDefault();
 	};
-	// In the top layer, so a dialog or scroll box never clips it; flips up near the bottom.
 	useLayoutEffect(() => {
 		if (!open) return;
-		list.current?.showPopover();
-		const position = () => {
-			const box = button.current?.getBoundingClientRect();
-			const menu = list.current;
-			if (!box || !menu) return;
-			const below = innerHeight - box.bottom - 12;
-			const up = below < Math.min(menu.scrollHeight, 240) && box.top > below;
-			setPlace(`left:${Math.round(Math.min(box.left, innerWidth - menu.offsetWidth - 8))}px;min-width:${Math.round(box.width)}px;` + (up ? `bottom:${Math.round(innerHeight - box.top + 4)}px;max-height:${Math.round(Math.min(560, box.top - 12))}px` : `top:${Math.round(box.bottom + 4)}px;max-height:${Math.round(Math.min(560, below))}px`));
-		};
-		position();
 		const outside = (event) => {
 			const target = event.target;
 			if (!button.current?.contains(target) && !list.current?.contains(target)) close(false);
 		};
-		addEventListener("resize", position);
-		addEventListener("scroll", position, true);
 		document.addEventListener("pointerdown", outside);
-		return () => {
-			removeEventListener("resize", position);
-			removeEventListener("scroll", position, true);
-			document.removeEventListener("pointerdown", outside);
-		};
+		return () => document.removeEventListener("pointerdown", outside);
 	}, [open]);
 	useLayoutEffect(() => {
 		if (open) list.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
@@ -166,63 +174,56 @@ export function Select({ label, options, value, defaultValue, onChange, onFocus,
 				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: [
-						icons?.[key] ?? null,
-						/* @__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
 		]
 	});
 }
-/** The label a filter's value shows. */
-export const labelOf = (options, value) => (options.find(([key]) => key === value) ?? options[0])[1];
+/** 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
+});