@hearthscale/app-ui 0.2.4 → 0.4.0-rc.1

package/dist/index.js

@@ -10,7 +10,7 @@ import {
   PackageGlyph,
   SearchGlyph,
   TrashGlyph
-} from "./chunks/chunk-UDXTR7UW.js";
+} from "./chunks/chunk-K3W7YUMY.js";
 
 // ../ui/dist/Button.js
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
@@ -206,7 +206,8 @@ function anchorFrom(key, e) {
     element: e.currentTarget
   };
 }
-function MenuSurface({ anchor, align = "auto", dir = "down", minWidth = 180, maxWidth, maxHeight, fit = false, keyboard = false, onDismiss, children }) {
+var spaces = (n) => `calc(var(--space) * ${n})`;
+function MenuSurface({ anchor, align = "auto", dir = "down", minWidth = spaces(45), maxWidth, maxHeight, fit = false, keyboard = false, onDismiss, children }) {
   const menu = useRef2(null);
   const [root] = useState(() => popupRoot(anchor.element));
   const grace = useSafeTriangle(anchor.element, menu, root, onDismiss, !keyboard);
@@ -276,10 +277,14 @@ function MenuSurface({ anchor, align = "auto", dir = "down", minWidth = 180, max
             padding: 8,
             apply({ availableWidth, availableHeight, elements, rects }) {
               const surface = elements.floating.firstElementChild;
-              const wanted = fit ? rects.reference.width : Math.max(minWidth, rects.reference.width);
-              surface.style.minWidth = `${Math.max(0, Math.min(wanted, availableWidth))}px`;
-              surface.style.maxWidth = `${Math.max(0, Math.min(fit ? wanted : Math.max(wanted, maxWidth ?? Infinity), availableWidth))}px`;
-              surface.style.maxHeight = `${Math.max(0, Math.min(maxHeight ?? Infinity, availableHeight))}px`;
+              const room = `${Math.max(0, availableWidth)}px`;
+              const tall = `${Math.max(0, availableHeight)}px`;
+              const own = `${rects.reference.width}px`;
+              const wanted = fit ? own : `max(${minWidth}, ${own})`;
+              const most = fit ? wanted : maxWidth === void 0 ? null : `max(${wanted}, ${maxWidth})`;
+              surface.style.minWidth = `min(${wanted}, ${room})`;
+              surface.style.maxWidth = most ? `min(${most}, ${room})` : room;
+              surface.style.maxHeight = maxHeight === void 0 ? tall : `min(${maxHeight}, ${tall})`;
               if (fit)
                 surface.style.borderRadius = getComputedStyle(anchor.element).borderRadius;
             }
@@ -299,9 +304,13 @@ function MenuSurface({ anchor, align = "auto", dir = "down", minWidth = 180, max
   useEffect2(() => {
     const floating = menu.current;
     const wheel = (e) => {
-      const surface = floating.firstElementChild;
-      if (surface.scrollHeight <= surface.clientHeight)
-        e.preventDefault();
+      for (let at = e.target; at; at = at.parentElement) {
+        if (at.scrollHeight > at.clientHeight && getComputedStyle(at).overflowY !== "hidden")
+          return;
+        if (at === floating)
+          break;
+      }
+      e.preventDefault();
     };
     floating.addEventListener("wheel", wheel, { passive: false });
     return () => floating.removeEventListener("wheel", wheel);
@@ -330,7 +339,10 @@ function MenuSurface({ anchor, align = "auto", dir = "down", minWidth = 180, max
       event.preventDefault();
       choices[next]?.focus();
     }
-  }, style: pos, children: _jsx5("div", { className: "hs-menu hs-menu-surface", role: keyboard ? "menu" : void 0, style: { minWidth: `min(${minWidth}px, calc(100vw - var(--space) * 4))`, maxWidth }, children: _jsx5(PopupNest.Provider, { value: grace.nest, children: _jsx5(OpenSubmenu.Provider, { value: submenu, children }) }) }) }), root);
+  }, style: pos, children: _jsx5("div", { className: "hs-menu hs-menu-surface", role: keyboard ? "menu" : void 0, style: {
+    minWidth: `min(${minWidth}, calc(100vw - var(--space) * 4))`,
+    ...maxWidth !== void 0 && { maxWidth }
+  }, children: _jsx5(PopupNest.Provider, { value: grace.nest, children: _jsx5(OpenSubmenu.Provider, { value: submenu, children }) }) }) }), root);
 }
 var OpenSubmenu = createContext2(null);
 function MItem({ icon, label, sub, chip, checked, selected, danger, disabled, onClick, trailing }) {
@@ -341,7 +353,7 @@ function MItem({ icon, label, sub, chip, checked, selected, danger, disabled, on
     }
   }, children: [icon, _jsxs3("span", { className: "hs-menu-label", children: [_jsx5("span", { className: "hs-menu-title", children: label }), sub && _jsx5("span", { className: "hs-menu-sub", children: sub })] }), chip && _jsx5("span", { className: "hs-menu-chip", children: chip }), checked && _jsx5(CheckGlyph, { size: 13 }), trailing] });
 }
-function MSub({ icon, label, minWidth = 220, children }) {
+function MSub({ icon, label, minWidth = spaces(55), children }) {
   const id = useId();
   const open = useContext(OpenSubmenu);
   const [anchor, setAnchor] = useState(null);
@@ -399,6 +411,8 @@ function useFloatingTips(placement) {
   const [shown, setShown] = useState(null);
   const [hide] = useState(() => () => setShown(null));
   return (key, text, more) => ({
+    show: (anchor) => setShown({ key, anchor }),
+    hide,
     hover: {
       onMouseEnter: (e) => setShown({ key, anchor: e.currentTarget }),
       onFocus: (e) => {
@@ -511,7 +525,7 @@ function SegmentedControl({ value, options, onChange, label, disabled = false })
 
 // ../ui/dist/settings.js
 import { jsx as _jsx13, jsxs as _jsxs7, Fragment as _Fragment4 } from "react/jsx-runtime";
-import { createContext as createContext3, useContext as useContext2, useLayoutEffect as useLayoutEffect2, useState as useState2 } from "react";
+import { createContext as createContext3, useContext as useContext2, useLayoutEffect as useLayoutEffect2, useEffect as useEffect4, useState as useState2 } from "react";
 function SettingsCard({ children }) {
   return _jsx13("div", { className: "hs-settings-card", children });
 }
@@ -523,27 +537,30 @@ function HelpTip({ text, onOpen }) {
   const inner = _jsxs7(_Fragment4, { children: [_jsx13(HelpGlyph, { size: 13 }), tip] });
   return onOpen ? _jsx13("button", { type: "button", className: "hs-help-button", onClick: onOpen, ...hover, children: inner }) : _jsx13("span", { className: "hs-help-mark", ...hover, children: inner });
 }
-function SettingsSearch({ value, placeholder, onChange }) {
-  return _jsxs7("label", { className: "hs-url hs-settings-search", children: [_jsx13(SearchGlyph, { size: 12 }), _jsx13("input", { className: "hs-in hs-urlin", "aria-label": placeholder, placeholder, spellCheck: false, value, onChange: (e) => onChange(e.target.value) }), _jsx13("span", { "aria-hidden": "true", className: "hs-urlph hs-ph-icon", children: placeholder })] });
+function SettingsSearch({ value, placeholder, onChange, autoFocus }) {
+  return _jsxs7("label", { className: "hs-url hs-settings-search", children: [_jsx13(SearchGlyph, { size: 12 }), _jsx13("input", { className: "hs-in hs-urlin", "aria-label": placeholder, placeholder, spellCheck: false, value, ...autoFocus && { autoFocus: true }, onChange: (e) => onChange(e.target.value) }), _jsx13("span", { "aria-hidden": "true", className: "hs-urlph hs-ph-icon", children: placeholder })] });
 }
-function SettingsSelect({ value, options, onPick, minWidth = 180, menuHeight, menuWidth, placeholder, disabled, label }) {
+function SettingsSelect({ value, options, onPick, minWidth = spaces(45), menuHeight, menuWidth, placeholder, disabled, label, note }) {
   const [anchor, setAnchor] = useState2(null);
   const current = options.find((o) => o.value === value);
   return _jsxs7("span", { className: "hs-select-wrap", children: [_jsxs7("button", { type: "button", className: "hs-glassbtn hs-hovink hs-inktext hs-select", "aria-label": label, "aria-haspopup": "menu", "aria-expanded": anchor !== null, disabled, "data-open": anchor ? "true" : "false", onClick: (e) => {
     const next = anchorFrom("select", e);
     setAnchor((current2) => current2 ? null : next);
-  }, children: [current?.label ?? (value || placeholder), _jsx13(ChevronDownGlyph, { size: 11 })] }), anchor && _jsx13(MenuSurface, { keyboard: true, anchor, onDismiss: () => setAnchor(null), minWidth, ...menuHeight !== void 0 && { maxHeight: menuHeight }, ...menuWidth !== void 0 && { maxWidth: menuWidth }, children: options.map((option) => _jsx13(MItem, { label: option.label, ...option.sub && { sub: option.sub }, ...option.trailing && { trailing: option.trailing }, ...option.disabled && { disabled: true }, checked: option.value === value, onClick: () => {
+  }, children: [_jsx13("span", { className: "hs-select-label", children: current?.label ?? (value || placeholder) }), note && _jsx13("span", { className: "hs-select-note", children: note }), _jsx13(ChevronDownGlyph, { size: 11 })] }), anchor && _jsx13(MenuSurface, { keyboard: true, anchor, onDismiss: () => setAnchor(null), minWidth, ...menuHeight !== void 0 && { maxHeight: menuHeight }, ...menuWidth !== void 0 && { maxWidth: menuWidth }, children: options.map((option) => _jsx13(MItem, { label: option.label, ...option.sub && { sub: option.sub }, ...option.trailing && { trailing: option.trailing }, ...option.disabled && { disabled: true }, checked: option.value === value, onClick: () => {
     anchor.element.focus();
     setAnchor(null);
     onPick(option.value);
   } }, option.value)) })] });
 }
-function ToggleRow({ id, title, sub, help, on, onFlip }) {
+function ToggleRow({ id, mark, title, sub, help, actions, on, onFlip }) {
   const docs = useContext2(SettingsDocs);
   const open = id ? docs(id) : void 0;
-  return _jsxs7("div", { className: "hs-setrow hs-toggle-row", "data-row": id, children: [_jsxs7("span", { className: "hs-setting-label", children: [_jsxs7("span", { className: "hs-setting-label-line", children: [_jsx13("span", { className: "hs-setting-title", children: title }), help && _jsx13(HelpTip, { text: help, ...open && { onOpen: open } })] }), sub && _jsx13("span", { className: "hs-setting-sub", children: sub })] }), _jsx13(Toggle, { checked: on, "aria-label": title, disabled: !onFlip, ...onFlip && { onChange: onFlip } })] });
+  return _jsxs7("div", { className: "hs-setrow hs-toggle-row", "data-row": id, children: [mark && _jsx13("span", { className: "hs-row-mark", children: mark }), _jsxs7("span", { className: "hs-setting-label", children: [_jsxs7("span", { className: "hs-setting-label-line", children: [_jsx13("span", { className: "hs-setting-title", children: title }), help && _jsx13(HelpTip, { text: help, ...open && { onOpen: open } })] }), sub && _jsx13("span", { className: "hs-setting-sub", children: sub })] }), actions && _jsx13(SettingControls, { children: actions }), _jsx13(Toggle, { checked: on, "aria-label": title, disabled: !onFlip, ...onFlip && { onChange: onFlip } })] });
 }
 var SettingsDocs = createContext3(() => void 0);
+function SettingControls({ children }) {
+  return _jsx13("span", { className: "hs-setting-controls", children });
+}
 function InfoRow({ id, title, sub, help, helpOpen, value }) {
   const docs = useContext2(SettingsDocs);
   const open = helpOpen ?? (id ? docs(id) : void 0);
@@ -573,53 +590,63 @@ function SettingsTabs({ label, value, tabs, onPick, panelRef }) {
   }, children: tab.label }, tab.value)) });
 }
 
-// ../ui/dist/ShellConfirm.js
+// ../ui/dist/Modal.js
 import { jsx as _jsx14, jsxs as _jsxs8 } from "react/jsx-runtime";
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
 
-// ../ui/dist/asking.js
-import { useEffect as useEffect4, useSyncExternalStore } from "react";
-var asking = 0;
-var hearers = /* @__PURE__ */ new Set();
-function tell() {
-  for (const hear of hearers)
-    hear();
-}
-function useAsksPerson(on) {
-  useEffect4(() => {
-    if (!on)
-      return;
-    asking += 1;
-    tell();
-    return () => {
-      asking -= 1;
-      tell();
-    };
-  }, [on]);
-}
-
-// ../ui/dist/ShellConfirm.js
-function ShellConfirm({ title, body, action, tone = "danger", icon = tone === "danger" ? _jsx14(TrashGlyph, { size: 13 }) : void 0, onConfirm, onCancel }) {
-  useAsksPerson(true);
+// ../ui/dist/escape.js
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
+function useEscape(onEscape) {
+  const live = useRef5(onEscape);
+  live.current = onEscape;
   useEffect5(() => {
     const onKey = (e) => {
-      if (e.key !== "Escape")
-        return;
-      e.preventDefault();
-      onCancel();
+      if (e.key === "Escape" && !e.defaultPrevented)
+        live.current();
     };
-    window.addEventListener("keydown", onKey, true);
-    return () => window.removeEventListener("keydown", onKey, true);
-  }, [onCancel]);
-  return _jsx14("div", { className: "hs-confirm", onClick: (e) => {
-    e.stopPropagation();
-    onCancel();
-  }, children: _jsxs8("div", { className: "hs-confirm-box", role: "dialog", onClick: (e) => e.stopPropagation(), children: [_jsx14("span", { className: "hs-confirm-title", children: title }), _jsx14("span", { className: "hs-confirm-body", children: body }), _jsxs8("div", { className: "hs-confirm-footer", children: [_jsx14(Button, { className: "hs-confirm-cancel", onClick: onCancel, children: "Cancel" }), _jsx14(Button, { className: "hs-confirm-action", variant: tone, icon, onClick: onConfirm, children: action })] })] }) });
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+}
+
+// ../ui/dist/Modal.js
+function Modal({ title, children, onClose, width = 460, scrim = true }) {
+  const panel = useRef6(null);
+  useEffect6(() => {
+    const previous = document.activeElement;
+    panel.current?.focus();
+    return () => previous?.focus();
+  }, []);
+  useEscape(onClose);
+  return _jsx14("div", { onClick: onClose, className: scrim ? "hs-modal-backdrop hs-scrim" : "hs-modal-backdrop", children: _jsxs8("div", { ref: panel, tabIndex: -1, role: "dialog", "aria-modal": "true", "aria-label": title, onKeyDown: (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      onClose();
+    }
+    if (event.key !== "Tab")
+      return;
+    const controls = [
+      ...event.currentTarget.querySelectorAll('button:not(:disabled), input:not(:disabled), textarea:not(:disabled), a[href], [tabindex="0"]')
+    ];
+    const first = controls[0];
+    const last = controls.at(-1);
+    if (event.shiftKey && (document.activeElement === first || document.activeElement === panel.current)) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first?.focus();
+    }
+  }, onClick: (event) => event.stopPropagation(), className: "hs-modal", style: { width }, children: [_jsxs8("div", { className: "hs-modal-head", children: [_jsx14("p", { className: "hs-modal-title", children: title }), _jsx14(IconButton, { "aria-label": `Close ${title.toLowerCase()}`, onClick: onClose, className: "hs-push-end", children: _jsx14(CloseGlyph, { size: 14 }) })] }), children] }) });
 }
 
+// ../ui/dist/MultiSelect.js
+import { jsx as _jsx16, jsxs as _jsxs10 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+
 // ../ui/dist/OverlayScroll.js
 import { jsx as _jsx15, jsxs as _jsxs9 } from "react/jsx-runtime";
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef5 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef7 } from "react";
 function overlayThumb(scroller, thumb) {
   let inset = 0;
   let least = 0;
@@ -691,57 +718,125 @@ function overlayThumb(scroller, thumb) {
   };
 }
 function OverlayScroll({ className, children }) {
-  const scroller = useRef5(null);
-  const thumb = useRef5(null);
+  const scroller = useRef7(null);
+  const thumb = useRef7(null);
   useLayoutEffect3(() => overlayThumb(scroller.current, thumb.current), []);
   return _jsxs9("div", { className: "hs-overlay-scroll", children: [_jsx15("div", { ref: scroller, className, children }), _jsx15("div", { ref: thumb, className: "hs-overlay-thumb", "aria-hidden": "true" })] });
 }
 
+// ../ui/dist/MultiSelect.js
+var NAMED_MOST = 2;
+var MENU_WIDTH = spaces(62.5);
+function MultiSelect({ label, options, labelOf, picked, onPick, searchWords, countWord, onOpen, align, all }) {
+  const [anchor, setAnchor] = useState3(null);
+  const [search, setSearch] = useState3("");
+  const needle = search.trim().toLowerCase();
+  const shown = [...picked, ...options.filter((value) => !picked.includes(value))].filter((value) => !needle || value.includes(needle) || labelOf(value).toLowerCase().includes(needle));
+  const toggle = (value) => {
+    if (!picked.includes(value))
+      onPick([...picked, value]);
+    else if (all !== void 0 || picked.length > 1)
+      onPick(picked.filter((one) => one !== value));
+  };
+  const words = picked.length === 0 ? all : picked.length > NAMED_MOST ? `${picked.length} ${countWord}` : picked.map(labelOf).join(", ");
+  return _jsxs10("span", { className: "hs-select-wrap", children: [_jsxs10("button", { type: "button", className: "hs-glassbtn hs-hovink hs-inktext hs-select", "aria-label": label, "aria-haspopup": "menu", "aria-expanded": anchor !== null, "data-open": anchor ? "true" : "false", onClick: (e) => {
+    const next = anchorFrom(label, e);
+    if (!anchor)
+      onOpen?.();
+    setAnchor(anchor ? null : next);
+    setSearch("");
+  }, children: [_jsx16("span", { className: "hs-select-label", children: words }), _jsx16(ChevronDownGlyph, { size: 11 })] }), anchor && _jsx16(MenuSurface, { keyboard: true, anchor, ...align && { align }, minWidth: MENU_WIDTH, maxWidth: MENU_WIDTH, onDismiss: () => setAnchor(null), children: _jsxs10("div", { className: "hs-multi-select-menu", children: [_jsx16("div", { className: "hs-menu-search", children: _jsx16(SettingsSearch, { value: search, placeholder: searchWords, onChange: setSearch }) }), _jsxs10(OverlayScroll, { className: "hs-scroll hs-multi-select-list", children: [all !== void 0 && !needle && _jsx16(MItem, { label: all, checked: picked.length === 0, onClick: () => onPick([]) }), shown.map((value) => _jsx16(MItem, { label: labelOf(value), checked: picked.includes(value), onClick: () => toggle(value) }, value))] })] }) })] });
+}
+
+// ../ui/dist/ShellConfirm.js
+import { jsx as _jsx17, jsxs as _jsxs11 } from "react/jsx-runtime";
+import { useEffect as useEffect8 } from "react";
+
+// ../ui/dist/asking.js
+import { useEffect as useEffect7, useSyncExternalStore } from "react";
+var asking = 0;
+var hearers = /* @__PURE__ */ new Set();
+function tell() {
+  for (const hear of hearers)
+    hear();
+}
+function useAsksPerson(on) {
+  useEffect7(() => {
+    if (!on)
+      return;
+    asking += 1;
+    tell();
+    return () => {
+      asking -= 1;
+      tell();
+    };
+  }, [on]);
+}
+
+// ../ui/dist/ShellConfirm.js
+function ShellConfirm({ title, body, action, tone = "danger", icon = tone === "danger" ? _jsx17(TrashGlyph, { size: 13 }) : void 0, onConfirm, onCancel }) {
+  useAsksPerson(true);
+  useEffect8(() => {
+    const onKey = (e) => {
+      if (e.key !== "Escape")
+        return;
+      e.preventDefault();
+      onCancel();
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [onCancel]);
+  return _jsx17("div", { className: "hs-confirm", onClick: (e) => {
+    e.stopPropagation();
+    onCancel();
+  }, children: _jsxs11("div", { className: "hs-confirm-box", role: "dialog", onClick: (e) => e.stopPropagation(), children: [_jsx17("span", { className: "hs-confirm-title", children: title }), _jsx17("span", { className: "hs-confirm-body", children: body }), _jsxs11("div", { className: "hs-confirm-footer", children: [_jsx17(Button, { className: "hs-confirm-cancel", onClick: onCancel, children: "Cancel" }), _jsx17(Button, { className: "hs-confirm-action", variant: tone, icon, onClick: onConfirm, children: action })] })] }) });
+}
+
 // ../ui/dist/Kbd.js
-import { jsx as _jsx16 } from "react/jsx-runtime";
+import { jsx as _jsx18 } from "react/jsx-runtime";
 function Kbd({ children }) {
-  return _jsx16("kbd", { className: "hs-kbd", children });
+  return _jsx18("kbd", { className: "hs-kbd", children });
 }
 
 // ../ui/dist/Meter.js
-import { jsx as _jsx17, jsxs as _jsxs10 } from "react/jsx-runtime";
+import { jsx as _jsx19, jsxs as _jsxs12 } from "react/jsx-runtime";
 var RADIUS = 7.5;
 var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 function Meter({ value, label, variant = "bar", tone }) {
   const share = Math.max(0, Math.min(1, value));
-  return _jsx17("span", { className: "hs-meter", "data-variant": variant, "data-tone": tone, role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(share * 100), children: variant === "ring" ? _jsx17("svg", { width: 20, height: 20, viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsxs10("g", { transform: "rotate(-90 10 10)", children: [_jsx17("circle", { className: "hs-meter-track", cx: 10, cy: 10, r: RADIUS }), _jsx17("circle", { className: "hs-meter-fill", cx: 10, cy: 10, r: RADIUS, strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE * (1 - share) })] }) }) : _jsx17("span", { className: "hs-meter-fill", style: { width: `${share * 100}%` } }) });
+  return _jsx19("span", { className: "hs-meter", "data-variant": variant, "data-tone": tone, role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(share * 100), children: variant === "ring" ? _jsx19("svg", { width: 20, height: 20, viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsxs12("g", { transform: "rotate(-90 10 10)", children: [_jsx19("circle", { className: "hs-meter-track", cx: 10, cy: 10, r: RADIUS }), _jsx19("circle", { className: "hs-meter-fill", cx: 10, cy: 10, r: RADIUS, strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE * (1 - share) })] }) }) : _jsx19("span", { className: "hs-meter-fill", style: { width: `${share * 100}%` } }) });
 }
 
 // ../ui/dist/Lightbox.js
-import { jsx as _jsx18, jsxs as _jsxs11, Fragment as _Fragment5 } from "react/jsx-runtime";
-import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState3 } from "react";
+import { jsx as _jsx20, jsxs as _jsxs13, Fragment as _Fragment5 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState4 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 var MAX_ZOOM = 8;
 var CLICK_ZOOM = 2;
 var DRAG_SLOP = 4;
 var FIT = { scale: 1, x: 0, y: 0 };
 function Lightbox({ items, start, onClose }) {
-  const [index, setIndex] = useState3(start);
-  const [view, setView] = useState3(FIT);
-  const [broken, setBroken] = useState3(false);
-  const [host, setHost] = useState3(null);
-  const anchor = useRef6(null);
-  const stage = useRef6(null);
-  const closer = useRef6(null);
-  const drag = useRef6(null);
+  const [index, setIndex] = useState4(start);
+  const [view, setView] = useState4(FIT);
+  const [broken, setBroken] = useState4(false);
+  const [host, setHost] = useState4(null);
+  const anchor = useRef8(null);
+  const stage = useRef8(null);
+  const closer = useRef8(null);
+  const drag = useRef8(null);
   const item = items[index];
   const many = items.length > 1;
   useLayoutEffect4(() => {
     setHost(anchor.current?.closest(".hs-shell") ?? document.body);
   }, []);
-  useEffect6(() => {
+  useEffect9(() => {
     if (!host)
       return;
     const opener = document.activeElement;
     closer.current?.focus();
     return () => opener?.focus();
   }, [host]);
-  useEffect6(() => {
+  useEffect9(() => {
     setView(FIT);
     setBroken(false);
   }, [index]);
@@ -757,7 +852,7 @@ function Lightbox({ items, start, onClose }) {
     return { px: clientX - box.left - box.width / 2, py: clientY - box.top - box.height / 2 };
   };
   const step = (delta) => setIndex((i) => (i + delta + items.length) % items.length);
-  useEffect6(() => {
+  useEffect9(() => {
     const onKey = (event) => {
       if (event.key === "Escape")
         onClose();
@@ -779,7 +874,7 @@ function Lightbox({ items, start, onClose }) {
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
   });
-  useEffect6(() => {
+  useEffect9(() => {
     const box = stage.current;
     if (!box)
       return;
@@ -822,34 +917,34 @@ function Lightbox({ items, start, onClose }) {
   };
   if (!item)
     return null;
-  const dialog = _jsxs11("div", { className: "hs-lightbox", role: "dialog", "aria-modal": "true", "aria-label": item.name, onClick: onClose, children: [_jsxs11("div", { className: "hs-lightbox-bar", onClick: (e) => e.stopPropagation(), children: [item.onSave && _jsx18("button", { type: "button", className: "hs-lightbox-button", "aria-label": "Save", onClick: item.onSave, children: _jsx18(DownloadGlyph, { size: 16 }) }), item.onOpen && _jsx18("button", { type: "button", className: "hs-lightbox-button", "aria-label": "Open", onClick: (e) => item.onOpen?.(e.currentTarget), children: _jsx18(ExternalGlyph, { size: 16 }) }), _jsx18("button", { ref: closer, type: "button", className: "hs-lightbox-button", "aria-label": "Close", onClick: onClose, children: _jsx18(CloseGlyph, { size: 16 }) })] }), many && _jsx18("button", { type: "button", className: "hs-lightbox-step", "data-side": "previous", "aria-label": "Previous picture", onClick: (e) => {
+  const dialog = _jsxs13("div", { className: "hs-lightbox", role: "dialog", "aria-modal": "true", "aria-label": item.name, onClick: onClose, children: [_jsxs13("div", { className: "hs-lightbox-bar", onClick: (e) => e.stopPropagation(), children: [item.onSave && _jsx20("button", { type: "button", className: "hs-lightbox-button", "aria-label": "Save", onClick: item.onSave, children: _jsx20(DownloadGlyph, { size: 16 }) }), item.onOpen && _jsx20("button", { type: "button", className: "hs-lightbox-button", "aria-label": "Open", onClick: (e) => item.onOpen?.(e.currentTarget), children: _jsx20(ExternalGlyph, { size: 16 }) }), _jsx20("button", { ref: closer, type: "button", className: "hs-lightbox-button", "aria-label": "Close", onClick: onClose, children: _jsx20(CloseGlyph, { size: 16 }) })] }), many && _jsx20("button", { type: "button", className: "hs-lightbox-step", "data-side": "previous", "aria-label": "Previous picture", onClick: (e) => {
     e.stopPropagation();
     step(-1);
-  }, children: _jsx18(ChevronLeftGlyph, { size: 20 }) }), _jsxs11("div", { className: "hs-lightbox-body", onClick: (e) => e.stopPropagation(), children: [_jsx18("div", { ref: stage, className: "hs-lightbox-stage", "data-zoomed": view.scale > 1 ? "true" : "false", onPointerDown, onPointerMove, onPointerUp, children: broken ? _jsx18("span", { className: "hs-lightbox-broken", children: "This picture could not be loaded." }) : _jsx18("img", { src: item.src, alt: item.name, draggable: false, onError: () => setBroken(true), style: { transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` } }) }), _jsxs11("span", { className: "hs-lightbox-caption", "aria-live": "polite", children: [item.name, many && ` (${index + 1} of ${items.length})`] }), item.note && _jsx18("div", { className: "hs-lightbox-note", children: item.note })] }), many && _jsx18("button", { type: "button", className: "hs-lightbox-step", "data-side": "next", "aria-label": "Next picture", onClick: (e) => {
+  }, children: _jsx20(ChevronLeftGlyph, { size: 20 }) }), _jsxs13("div", { className: "hs-lightbox-body", onClick: (e) => e.stopPropagation(), children: [_jsx20("div", { ref: stage, className: "hs-lightbox-stage", "data-zoomed": view.scale > 1 ? "true" : "false", onPointerDown, onPointerMove, onPointerUp, children: broken ? _jsx20("span", { className: "hs-lightbox-broken", children: "This picture could not be loaded." }) : _jsx20("img", { src: item.src, alt: item.name, draggable: false, onError: () => setBroken(true), style: { transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` } }) }), _jsxs13("span", { className: "hs-lightbox-caption", "aria-live": "polite", children: [item.name, many && ` (${index + 1} of ${items.length})`] }), item.note && _jsx20("div", { className: "hs-lightbox-note", children: item.note })] }), many && _jsx20("button", { type: "button", className: "hs-lightbox-step", "data-side": "next", "aria-label": "Next picture", onClick: (e) => {
     e.stopPropagation();
     step(1);
-  }, children: _jsx18(ChevronRightGlyph, { size: 20 }) })] });
-  return _jsxs11(_Fragment5, { children: [_jsx18("span", { ref: anchor, hidden: true }), host && createPortal2(dialog, host)] });
+  }, children: _jsx20(ChevronRightGlyph, { size: 20 }) })] });
+  return _jsxs13(_Fragment5, { children: [_jsx20("span", { ref: anchor, hidden: true }), host && createPortal2(dialog, host)] });
 }
 
 // ../ui/dist/Slider.js
-import { jsx as _jsx19, jsxs as _jsxs12 } from "react/jsx-runtime";
+import { jsx as _jsx21, jsxs as _jsxs14 } from "react/jsx-runtime";
 function Slider({ value, onChange, min = 0, max = 1, step = 0.01, label, shown, disabled }) {
-  return _jsxs12("span", { className: "hs-slider", children: [_jsx19("input", { type: "range", className: "hs-range", "aria-label": label, "aria-valuetext": shown, min, max, step, value, disabled, onChange: (event) => onChange(Number(event.target.value)) }), shown !== void 0 && _jsx19("span", { className: "hs-slider-value", children: shown })] });
+  return _jsxs14("span", { className: "hs-slider", children: [_jsx21("input", { type: "range", className: "hs-range", "aria-label": label, "aria-valuetext": shown, min, max, step, value, disabled, onChange: (event) => onChange(Number(event.target.value)) }), shown !== void 0 && _jsx21("span", { className: "hs-slider-value", children: shown })] });
 }
 
 // ../ui/dist/Popover.js
-import { jsx as _jsx20 } from "react/jsx-runtime";
-import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect5, useRef as useRef7, useState as useState4 } from "react";
+import { jsx as _jsx22 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect5, useRef as useRef9, useState as useState5 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { autoUpdate as autoUpdate2, computePosition as computePosition2, flip as flip2, offset as offset2, shift as shift2, size as size2 } from "@floating-ui/dom";
 var tabbable = (panel) => [...panel.querySelectorAll(FOCUSABLE)].filter((control) => control.tabIndex >= 0);
 var FOCUSABLE = 'button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
 function Popover({ anchor, placement = "bottom-start", label, onDismiss, children }) {
-  const panel = useRef7(null);
-  const [root] = useState4(() => popupRoot(anchor));
-  const [pos, setPos] = useState4({ visibility: "hidden" });
-  const dismiss = useRef7(onDismiss);
+  const panel = useRef9(null);
+  const [root] = useState5(() => popupRoot(anchor));
+  const [pos, setPos] = useState5({ visibility: "hidden" });
+  const dismiss = useRef9(onDismiss);
   dismiss.current = onDismiss;
   useLayoutEffect5(() => {
     const floating = panel.current;
@@ -891,8 +986,8 @@ function Popover({ anchor, placement = "bottom-start", label, onDismiss, childre
         anchor.focus();
     };
   }, [shown, anchor]);
-  const pressed = useRef7(null);
-  useEffect7(() => {
+  const pressed = useRef9(null);
+  useEffect10(() => {
     const outside = (event) => {
       if (pressed.current !== event && !anchor.contains(event.target))
         dismiss.current();
@@ -905,7 +1000,7 @@ function Popover({ anchor, placement = "bottom-start", label, onDismiss, childre
       window.removeEventListener("blur", blur);
     };
   }, [anchor]);
-  return createPortal3(_jsx20("div", { ref: panel, className: "hs-popover", role: "dialog", "aria-label": label, tabIndex: -1, style: pos, onPointerDown: (event) => {
+  return createPortal3(_jsx22("div", { ref: panel, className: "hs-popover", role: "dialog", "aria-label": label, tabIndex: -1, style: pos, onPointerDown: (event) => {
     pressed.current = event.nativeEvent;
   }, onKeyDown: (event) => {
     if (event.key === "Escape") {
@@ -935,15 +1030,15 @@ function Popover({ anchor, placement = "bottom-start", label, onDismiss, childre
 }
 
 // ../ui/dist/Toast.js
-import { jsx as _jsx21, jsxs as _jsxs13 } from "react/jsx-runtime";
-import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect6, useRef as useRef8, useState as useState5 } from "react";
+import { jsx as _jsx23, jsxs as _jsxs15 } from "react/jsx-runtime";
+import { useEffect as useEffect11, useLayoutEffect as useLayoutEffect6, useRef as useRef10, useState as useState6 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 function Toast({ children, action, duration = 6e3, above, onClose }) {
-  const [root, setRoot] = useState5(null);
-  const place = useRef8(null);
-  const [held, setHeld] = useState5({ pointer: false, focus: false });
-  const [anchor, setAnchor] = useState5(null);
-  const close = useRef8(onClose);
+  const [root, setRoot] = useState6(null);
+  const place = useRef10(null);
+  const [held, setHeld] = useState6({ pointer: false, focus: false });
+  const [anchor, setAnchor] = useState6(null);
+  const close = useRef10(onClose);
   close.current = onClose;
   useLayoutEffect6(() => {
     setRoot(place.current?.closest(".hs-shell") ?? document.body);
@@ -965,31 +1060,31 @@ function Toast({ children, action, duration = 6e3, above, onClose }) {
     return () => cancelAnimationFrame(frame);
   }, [above]);
   const waiting = !held.pointer && !held.focus;
-  useEffect8(() => {
+  useEffect11(() => {
     if (!waiting)
       return;
     const timer = setTimeout(() => close.current(), duration);
     return () => clearTimeout(timer);
   }, [waiting, duration]);
-  return _jsx21("span", { ref: place, hidden: true, children: root && createPortal4(_jsx21("div", { className: "hs-toast-place", ...anchor && {
+  return _jsx23("span", { ref: place, hidden: true, children: root && createPortal4(_jsx23("div", { className: "hs-toast-place", ...anchor && {
     "data-above": "true",
     style: {
       bottom: `calc(${anchor.bottom}px + var(--space) * 4)`,
       left: `${anchor.left}px`,
       width: `${anchor.width}px`
     }
-  }, children: _jsxs13("div", { className: "hs-toast", role: "status", "aria-live": "polite", onPointerEnter: () => setHeld((h) => ({ ...h, pointer: true })), onPointerLeave: () => setHeld((h) => ({ ...h, pointer: false })), onFocus: () => setHeld((h) => ({ ...h, focus: true })), onBlur: (event) => {
+  }, children: _jsxs15("div", { className: "hs-toast", role: "status", "aria-live": "polite", onPointerEnter: () => setHeld((h) => ({ ...h, pointer: true })), onPointerLeave: () => setHeld((h) => ({ ...h, pointer: false })), onFocus: () => setHeld((h) => ({ ...h, focus: true })), onBlur: (event) => {
     if (!event.currentTarget.contains(event.relatedTarget))
       setHeld((h) => ({ ...h, focus: false }));
-  }, children: [_jsx21("span", { className: "hs-toast-text", children }), action && _jsx21(Button, { variant: "ghost", size: "sm", onClick: () => {
+  }, children: [_jsx23("span", { className: "hs-toast-text", children }), action && _jsx23(Button, { variant: "ghost", size: "sm", onClick: () => {
     action.onPress();
     close.current();
-  }, children: action.label }), _jsx21(IconButton, { size: "sm", "aria-label": "Close", onClick: () => close.current(), children: _jsx21(CloseGlyph, {}) })] }) }), root) });
+  }, children: action.label }), _jsx23(IconButton, { size: "sm", "aria-label": "Close", onClick: () => close.current(), children: _jsx23(CloseGlyph, {}) })] }) }), root) });
 }
 
 // ../ui/dist/DatePicker.js
-import { jsx as _jsx22, jsxs as _jsxs14, Fragment as _Fragment6 } from "react/jsx-runtime";
-import { useEffect as useEffect9, useMemo, useRef as useRef9, useState as useState6 } from "react";
+import { jsx as _jsx24, jsxs as _jsxs16, Fragment as _Fragment6 } from "react/jsx-runtime";
+import { useEffect as useEffect12, useMemo, useRef as useRef11, useState as useState7 } from "react";
 var pad = (n, width = 2) => String(n).padStart(width, "0");
 function instant(date) {
   const [year, month, day] = date.split("-").map(Number);
@@ -1023,15 +1118,15 @@ function firstDayOfWeek(locale) {
 var STEPS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
 function DateGrid({ value, onChange, locale, min, max }) {
   const now = today();
-  const [focus, setFocus] = useState6(value ?? now);
+  const [focus, setFocus] = useState7(value ?? now);
   const month = monthOf(focus);
-  const keyed = useRef9(false);
-  const days = useRef9(/* @__PURE__ */ new Map());
-  useEffect9(() => {
+  const keyed = useRef11(false);
+  const days = useRef11(/* @__PURE__ */ new Map());
+  useEffect12(() => {
     if (value)
       setFocus(value);
   }, [value]);
-  useEffect9(() => {
+  useEffect12(() => {
     if (!keyed.current)
       return;
     keyed.current = false;
@@ -1057,7 +1152,7 @@ function DateGrid({ value, onChange, locale, min, max }) {
     keyed.current = true;
     setFocus(min && next < min ? min : max && next > max ? max : next);
   };
-  return _jsxs14("div", { className: "hs-date-grid", children: [_jsxs14("div", { className: "hs-date-grid-head", children: [_jsx22("span", { className: "hs-date-grid-month", "aria-live": "polite", children: words.month.format(instant(month)) }), _jsx22(IconButton, { size: "sm", "aria-label": "Previous month", onClick: () => setFocus(addMonths(focus, -1)), children: _jsx22(ChevronLeftGlyph, {}) }), _jsx22(IconButton, { size: "sm", "aria-label": "Next month", onClick: () => setFocus(addMonths(focus, 1)), children: _jsx22(ChevronRightGlyph, {}) })] }), _jsxs14("div", { className: "hs-date-grid-days", role: "grid", "aria-label": words.month.format(instant(month)), children: [_jsx22("div", { role: "row", className: "hs-date-grid-row", children: weeks[0].map((day) => _jsx22("span", { className: "hs-date-grid-weekday", role: "columnheader", "aria-label": words.long.format(instant(day)), children: words.narrow.format(instant(day)) }, day)) }), weeks.map((week) => _jsx22("div", { role: "row", className: "hs-date-grid-row", children: week.map((day) => _jsx22("button", { ref: (button) => {
+  return _jsxs16("div", { className: "hs-date-grid", children: [_jsxs16("div", { className: "hs-date-grid-head", children: [_jsx24("span", { className: "hs-date-grid-month", "aria-live": "polite", children: words.month.format(instant(month)) }), _jsx24(IconButton, { size: "sm", "aria-label": "Previous month", onClick: () => setFocus(addMonths(focus, -1)), children: _jsx24(ChevronLeftGlyph, {}) }), _jsx24(IconButton, { size: "sm", "aria-label": "Next month", onClick: () => setFocus(addMonths(focus, 1)), children: _jsx24(ChevronRightGlyph, {}) })] }), _jsxs16("div", { className: "hs-date-grid-days", role: "grid", "aria-label": words.month.format(instant(month)), children: [_jsx24("div", { role: "row", className: "hs-date-grid-row", children: weeks[0].map((day) => _jsx24("span", { className: "hs-date-grid-weekday", role: "columnheader", "aria-label": words.long.format(instant(day)), children: words.narrow.format(instant(day)) }, day)) }), weeks.map((week) => _jsx24("div", { role: "row", className: "hs-date-grid-row", children: week.map((day) => _jsx24("button", { ref: (button) => {
     if (button)
       days.current.set(day, button);
     else
@@ -1068,20 +1163,20 @@ function DateGrid({ value, onChange, locale, min, max }) {
   }, onKeyDown: (event) => key(event, day), children: words.day.format(instant(day)) }, day)) }, week[0]))] })] });
 }
 function DatePicker({ value, onChange, locale, min, max, label, placeholder, disabled }) {
-  const [anchor, setAnchor] = useState6(null);
+  const [anchor, setAnchor] = useState7(null);
   const shown = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }), [locale]);
-  return _jsxs14(_Fragment6, { children: [_jsx22("button", { type: "button", className: "hs-input hs-picker-field", "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": anchor !== null, "data-empty": value === null, disabled, onClick: (event) => setAnchor(anchor ? null : event.currentTarget), children: value ? shown.format(instant(value)) : placeholder }), anchor && _jsx22(Popover, { anchor, label, onDismiss: () => setAnchor(null), children: _jsx22(DateGrid, { value, locale, ...min && { min }, ...max && { max }, onChange: (date) => {
+  return _jsxs16(_Fragment6, { children: [_jsx24("button", { type: "button", className: "hs-input hs-picker-field", "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": anchor !== null, "data-empty": value === null, disabled, onClick: (event) => setAnchor(anchor ? null : event.currentTarget), children: value ? shown.format(instant(value)) : placeholder }), anchor && _jsx24(Popover, { anchor, label, onDismiss: () => setAnchor(null), children: _jsx24(DateGrid, { value, locale, ...min && { min }, ...max && { max }, onChange: (date) => {
     onChange(date);
     setAnchor(null);
   } }) })] });
 }
 
 // ../ui/dist/TimePicker.js
-import { jsx as _jsx23, Fragment as _Fragment7, jsxs as _jsxs15 } from "react/jsx-runtime";
-import { useMemo as useMemo2, useState as useState7 } from "react";
+import { jsx as _jsx25, Fragment as _Fragment7, jsxs as _jsxs17 } from "react/jsx-runtime";
+import { useMemo as useMemo2, useState as useState8 } from "react";
 var pad2 = (n) => String(n).padStart(2, "0");
 function TimePicker({ value, onChange, locale, label, step = 15, placeholder, disabled }) {
-  const [anchor, setAnchor] = useState7(null);
+  const [anchor, setAnchor] = useState8(null);
   const shown = useMemo2(() => new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", timeZone: "UTC" }), [locale]);
   const words = (time) => {
     const [hours, minutes] = time.split(":").map(Number);
@@ -1094,7 +1189,7 @@ function TimePicker({ value, onChange, locale, label, step = 15, placeholder, di
     });
     return value && !steps.includes(value) ? [...steps, value].sort() : steps;
   }, [step, value]);
-  return _jsxs15(_Fragment7, { children: [_jsx23("button", { type: "button", className: "hs-input hs-picker-field", "aria-label": label, "aria-haspopup": "menu", "aria-expanded": anchor !== null, "data-empty": value === null, disabled, onClick: (event) => setAnchor(anchor ? null : { key: "time", element: event.currentTarget }), children: value ? words(value) : placeholder }), anchor && _jsx23(MenuSurface, { anchor, fit: true, keyboard: true, maxHeight: 280, onDismiss: () => setAnchor(null), children: times.map((time) => _jsx23(MItem, { label: words(time), checked: time === value, onClick: () => {
+  return _jsxs17(_Fragment7, { children: [_jsx25("button", { type: "button", className: "hs-input hs-picker-field", "aria-label": label, "aria-haspopup": "menu", "aria-expanded": anchor !== null, "data-empty": value === null, disabled, onClick: (event) => setAnchor(anchor ? null : { key: "time", element: event.currentTarget }), children: value ? words(value) : placeholder }), anchor && _jsx25(MenuSurface, { anchor, fit: true, keyboard: true, maxHeight: spaces(70), onDismiss: () => setAnchor(null), children: times.map((time) => _jsx25(MItem, { label: words(time), checked: time === value, onClick: () => {
     onChange(time);
     setAnchor(null);
     anchor.element.focus();
@@ -1102,8 +1197,8 @@ function TimePicker({ value, onChange, locale, label, step = 15, placeholder, di
 }
 
 // ../ui/dist/SwatchPicker.js
-import { jsx as _jsx24 } from "react/jsx-runtime";
-import { useRef as useRef10 } from "react";
+import { jsx as _jsx26 } from "react/jsx-runtime";
+import { useRef as useRef12 } from "react";
 var SWATCHES = [
   "rose",
   "ember",
@@ -1136,7 +1231,7 @@ var NAMES = {
 };
 var STEPS2 = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
 function SwatchPicker({ value, onChange, label }) {
-  const dots = useRef10([]);
+  const dots = useRef12([]);
   const tips = useFloatingTips();
   const step = (event, index) => {
     const by = STEPS2[event.key];
@@ -1147,17 +1242,17 @@ function SwatchPicker({ value, onChange, label }) {
     onChange(SWATCHES[next]);
     dots.current[next]?.focus();
   };
-  return _jsx24("div", { className: "hs-swatch-picker", role: "radiogroup", "aria-label": label, children: SWATCHES.map((swatch, index) => {
+  return _jsx26("div", { className: "hs-swatch-picker", role: "radiogroup", "aria-label": label, children: SWATCHES.map((swatch, index) => {
     const tip = tips(swatch, NAMES[swatch]);
-    return _jsx24("button", { ref: (dot) => {
+    return _jsx26("button", { ref: (dot) => {
       dots.current[index] = dot;
     }, type: "button", role: "radio", "aria-checked": swatch === value, "aria-label": NAMES[swatch], tabIndex: swatch === value ? 0 : -1, className: "hs-swatch-choice", "data-swatch": swatch, onClick: () => onChange(swatch), onKeyDown: (event) => step(event, index), ...tip.hover, children: tip.tip }, swatch);
   }) });
 }
 
 // ../ui/dist/PersonMark.js
-import { jsx as _jsx25 } from "react/jsx-runtime";
-import { useEffect as useEffect10, useState as useState8 } from "react";
+import { jsx as _jsx27 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useState as useState9 } from "react";
 function initials(name) {
   const trimmed = name.trim();
   const words = (/\s/.test(trimmed) ? trimmed : trimmed.split("@")[0]).split(/[\s._-]+/).filter(Boolean);
@@ -1173,17 +1268,17 @@ function hueOf(name) {
   return SWATCHES[(hash >>> 0) % 12];
 }
 function PersonMark({ name, picture, size: size3 = "md", swatch }) {
-  const [broken, setBroken] = useState8(false);
-  useEffect10(() => setBroken(false), [picture]);
-  return _jsx25("span", { className: "hs-person-mark", "data-size": size3, "data-swatch": swatch ?? hueOf(name), role: "img", "aria-label": name, children: picture && !broken ? _jsx25("img", { src: picture, alt: "", onError: () => setBroken(true) }) : initials(name) });
+  const [broken, setBroken] = useState9(false);
+  useEffect13(() => setBroken(false), [picture]);
+  return _jsx27("span", { className: "hs-person-mark", "data-size": size3, "data-swatch": swatch ?? hueOf(name), role: "img", "aria-label": name, children: picture && !broken ? _jsx27("img", { src: picture, alt: "", onError: () => setBroken(true) }) : initials(name) });
 }
 
 // ../ui/dist/ModelAvatar.js
-import { jsx as _jsx27, jsxs as _jsxs16 } from "react/jsx-runtime";
-import { createContext as createContext4, useContext as useContext3, useState as useState9 } from "react";
+import { jsx as _jsx29, jsxs as _jsxs18 } from "react/jsx-runtime";
+import { createContext as createContext4, useContext as useContext3, useState as useState10 } from "react";
 
 // ../ui/dist/brand-marks.js
-import { jsx as _jsx26 } from "react/jsx-runtime";
+import { jsx as _jsx28 } from "react/jsx-runtime";
 
 // ../ui/dist/brand-svg.js
 var BRAND_FILES = ["linux"];
@@ -1247,7 +1342,8 @@ var BRAND_SVG = {
   vercel: '<svg viewBox="0 0 24 24" fill="currentColor" style="display:block;width:100%;height:100%"><path d="m12 1.608 12 20.784H0Z"/></svg>',
   sentry: '<svg viewBox="0 0 24 24" fill="currentColor" style="display:block;width:100%;height:100%"><path d="M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.478 15.478 0 0 1 8.53 12.811h-2.221A13.301 13.301 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.16 5.16 0 0 0-1.614-.913L.296 19.275a2.182 2.182 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.322 9.322 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.242 17.242 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287c.029.612.029 1.223 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z"/></svg>',
   apple: '<svg viewBox="0 0 24 24" fill="currentColor" style="display:block;width:100%;height:100%"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>',
-  windows: `<svg viewBox="0 0 22 22" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:block;width:100%;height:100%"><!-- The Microsoft squares on a white square. The white edge around them is one unit, the same as the gap between them, so the tile reads as the mark with its own margin. Drawn once, so every place shows the same tile. The colours are Microsoft's, as @lobehub/icons-static-svg carries them. --><rect width="22" height="22" fill="#fff"/><rect x="1" y="1" width="9.5" height="9.5" fill="#F25022"/><rect x="11.5" y="1" width="9.5" height="9.5" fill="#7FBA00"/><rect x="1" y="11.5" width="9.5" height="9.5" fill="#00A4EF"/><rect x="11.5" y="11.5" width="9.5" height="9.5" fill="#FFB900"/></svg>`
+  windows: `<svg viewBox="0 0 22 22" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:block;width:100%;height:100%"><!-- The Microsoft squares on a white square. The white edge around them is one unit, the same as the gap between them, so the tile reads as the mark with its own margin. Drawn once, so every place shows the same tile. The colours are Microsoft's, as @lobehub/icons-static-svg carries them. --><rect width="22" height="22" fill="#fff"/><rect x="1" y="1" width="9.5" height="9.5" fill="#F25022"/><rect x="11.5" y="1" width="9.5" height="9.5" fill="#7FBA00"/><rect x="1" y="11.5" width="9.5" height="9.5" fill="#00A4EF"/><rect x="11.5" y="11.5" width="9.5" height="9.5" fill="#FFB900"/></svg>`,
+  docker: '<svg viewBox="0 0 24 24" fill="#2496ED" style="display:block;width:100%;height:100%"><path d="M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"/></svg>'
 };
 
 // ../ui/dist/brand-marks.js
@@ -1312,7 +1408,8 @@ var BRAND_NAMES = {
   sentry: "Sentry",
   apple: "Apple",
   linux: "Linux",
-  windows: "Windows"
+  windows: "Windows",
+  docker: "Docker"
 };
 function BrandMark({ brand, size: size3 = 16, style }) {
   const props = {
@@ -1321,7 +1418,7 @@ function BrandMark({ brand, size: size3 = 16, style }) {
     "aria-label": BRAND_NAMES[brand],
     style: { width: size3, height: size3, ...style }
   };
-  return isFileBrand(brand) ? _jsx26("span", { ...props, "data-brand": brand }) : _jsx26("span", { ...props, dangerouslySetInnerHTML: { __html: BRAND_SVG[brand] } });
+  return isFileBrand(brand) ? _jsx28("span", { ...props, "data-brand": brand }) : _jsx28("span", { ...props, dangerouslySetInnerHTML: { __html: BRAND_SVG[brand] } });
 }
 function isFileBrand(brand) {
   return BRAND_FILES.includes(brand);
@@ -1368,25 +1465,25 @@ function brandOfPublisher(owner) {
 // ../ui/dist/ModelAvatar.js
 var PublisherPicturesContext = createContext4(() => void 0);
 function ModelAvatar({ identity, server, size: size3 = 24 }) {
-  return _jsx27(PublisherAvatar, { identity, server, size: size3 }, `${server}:${identity.repository}:${identity.publisher}`);
+  return _jsx29(PublisherAvatar, { identity, server, size: size3 }, `${server}:${identity.repository}:${identity.publisher}`);
 }
 function PublisherAvatar({ identity, server, size: size3 }) {
   const pictures = useContext3(PublisherPicturesContext);
   const owner = identity.repository?.split("/")[0];
   const picture = owner ? pictures(server, owner) : void 0;
-  const [failed, setFailed] = useState9(false);
+  const [failed, setFailed] = useState10(false);
   const brand = brandOfPublisher(identity.publisher);
   const tips = useFloatingTips();
   const { hover, tip } = tips("avatar", identity.publisher);
-  return _jsxs16("span", { className: "hs-model-avatar", style: { width: size3, height: size3 }, role: "img", "aria-label": identity.publisher, ...hover, children: [tip, picture && !failed ? _jsx27("img", { src: picture, alt: "", width: size3, height: size3, loading: "lazy", decoding: "async", onError: () => setFailed(true) }) : brand ? _jsx27(BrandMark, { brand, size: size3 }) : identity.publisher ? _jsx27("span", { className: "hs-model-avatar-initial", children: identity.publisher.slice(0, 1) }) : _jsx27(PackageGlyph, { size: size3 })] });
+  return _jsxs18("span", { className: "hs-model-avatar", style: { width: size3, height: size3 }, role: "img", "aria-label": identity.publisher, ...hover, children: [tip, picture && !failed ? _jsx29("img", { src: picture, alt: "", width: size3, height: size3, loading: "lazy", decoding: "async", onError: () => setFailed(true) }) : brand ? _jsx29(BrandMark, { brand, size: size3 }) : identity.publisher ? _jsx29("span", { className: "hs-model-avatar-initial", children: identity.publisher.slice(0, 1) }) : _jsx29(PackageGlyph, { size: size3 })] });
 }
 
 // ../ui/dist/VirtualList.js
-import { jsx as _jsx28 } from "react/jsx-runtime";
-import { useImperativeHandle, useRef as useRef11 } from "react";
+import { jsx as _jsx30 } from "react/jsx-runtime";
+import { useImperativeHandle, useRef as useRef13 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 function VirtualList({ count, estimate, row, rowKey, className, ref }) {
-  const scroller = useRef11(null);
+  const scroller = useRef13(null);
   const list = useVirtualizer({
     count,
     getScrollElement: () => scroller.current,
@@ -1395,21 +1492,21 @@ function VirtualList({ count, estimate, row, rowKey, className, ref }) {
     ...rowKey && { getItemKey: rowKey }
   });
   useImperativeHandle(ref, () => ({ scrollToIndex: (index, align = "auto") => list.scrollToIndex(index, { align }) }), [list]);
-  return _jsx28("div", { ref: scroller, className: className ? `hs-virtual-list ${className}` : "hs-virtual-list", children: _jsx28("div", { className: "hs-virtual-list-rows", style: { height: list.getTotalSize() }, children: list.getVirtualItems().map((item) => _jsx28("div", { ref: list.measureElement, "data-index": item.index, className: "hs-virtual-list-row", style: { transform: `translateY(${item.start}px)` }, children: row(item.index) }, item.key)) }) });
+  return _jsx30("div", { ref: scroller, className: className ? `hs-virtual-list ${className}` : "hs-virtual-list", children: _jsx30("div", { className: "hs-virtual-list-rows", style: { height: list.getTotalSize() }, children: list.getVirtualItems().map((item) => _jsx30("div", { ref: list.measureElement, "data-index": item.index, className: "hs-virtual-list-row", style: { transform: `translateY(${item.start}px)` }, children: row(item.index) }, item.key)) }) });
 }
 
 // ../ui/dist/PictureCompare.js
-import { jsx as _jsx29, jsxs as _jsxs17 } from "react/jsx-runtime";
-import { useRef as useRef12, useState as useState10 } from "react";
+import { jsx as _jsx31, jsxs as _jsxs19 } from "react/jsx-runtime";
+import { useRef as useRef14, useState as useState11 } from "react";
 var KEY_STEP = 5;
 function PictureCompare({ before, after }) {
-  const [split, setSplit] = useState10(50);
-  const box = useRef12(null);
+  const [split, setSplit] = useState11(50);
+  const box = useRef14(null);
   const follow = (event) => {
     const rect = box.current.getBoundingClientRect();
     setSplit(Math.max(0, Math.min(100, (event.clientX - rect.left) / rect.width * 100)));
   };
-  return _jsxs17("div", { ref: box, className: "hs-picture-compare", onPointerDown: (event) => {
+  return _jsxs19("div", { ref: box, className: "hs-picture-compare", onPointerDown: (event) => {
     if (event.button !== 0)
       return;
     event.currentTarget.setPointerCapture(event.pointerId);
@@ -1417,13 +1514,13 @@ function PictureCompare({ before, after }) {
   }, onPointerMove: (event) => {
     if (event.currentTarget.hasPointerCapture(event.pointerId))
       follow(event);
-  }, children: [_jsx29("img", { src: before.src, alt: before.name, draggable: false }), _jsx29("div", { className: "hs-picture-compare-after", style: { clipPath: `inset(0 0 0 ${split}%)` }, children: _jsx29("img", { src: after.src, alt: after.name, draggable: false }) }), _jsx29("span", { className: "hs-picture-compare-name", "data-side": "before", children: before.name }), _jsx29("span", { className: "hs-picture-compare-name", "data-side": "after", children: after.name }), _jsx29("div", { className: "hs-picture-compare-handle", role: "slider", tabIndex: 0, "aria-label": `${before.name} and ${after.name}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(split), style: { left: `${split}%` }, onKeyDown: (event) => {
+  }, children: [_jsx31("img", { src: before.src, alt: before.name, draggable: false }), _jsx31("div", { className: "hs-picture-compare-after", style: { clipPath: `inset(0 0 0 ${split}%)` }, children: _jsx31("img", { src: after.src, alt: after.name, draggable: false }) }), _jsx31("span", { className: "hs-picture-compare-name", "data-side": "before", children: before.name }), _jsx31("span", { className: "hs-picture-compare-name", "data-side": "after", children: after.name }), _jsx31("div", { className: "hs-picture-compare-handle", role: "slider", tabIndex: 0, "aria-label": `${before.name} and ${after.name}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(split), style: { left: `${split}%` }, onKeyDown: (event) => {
     const next = event.key === "ArrowLeft" || event.key === "ArrowDown" ? split - KEY_STEP : event.key === "ArrowRight" || event.key === "ArrowUp" ? split + KEY_STEP : event.key === "Home" ? 0 : event.key === "End" ? 100 : null;
     if (next === null)
       return;
     event.preventDefault();
     setSplit(Math.max(0, Math.min(100, next)));
-  }, children: _jsx29("span", { className: "hs-picture-compare-knob" }) })] });
+  }, children: _jsx31("span", { className: "hs-picture-compare-knob" }) })] });
 }
 
 // src/Icon.tsx
@@ -1462,8 +1559,10 @@ export {
   MSub,
   MenuSurface,
   Meter,
+  Modal,
   ModelAvatar,
   Mono,
+  MultiSelect,
   Notice,
   OverlayScroll,
   PageTitle,
@@ -1490,5 +1589,6 @@ export {
   ToggleRow,
   VirtualList,
   anchorFrom,
+  spaces,
   useFloatingTips
 };