@flytedan/flytebot-design-system 0.28.0 → 0.30.0

package/dist/index.js

@@ -199,6 +199,15 @@ var ROOT_LAYER = 0;
 var LAYER_STEP = 10;
 var ROOT_STEP = 100;
 var OVERLAY_CEILING = 1e4;
+var openEscapeIds = [];
+var registerEscapeLayer = (id) => {
+  if (openEscapeIds.includes(id)) return;
+  openEscapeIds = [...openEscapeIds, id];
+};
+var unregisterEscapeLayer = (id) => {
+  if (!openEscapeIds.includes(id)) return;
+  openEscapeIds = openEscapeIds.filter((existing) => existing !== id);
+};
 var LayerContext = React2.createContext(ROOT_LAYER);
 var openRootIds = [];
 var rootListeners = /* @__PURE__ */ new Set();
@@ -276,6 +285,12 @@ function Popover({
   });
   const restore = React2.useRef(null);
   const zIndex = useOverlayLayer(!!open);
+  const escapeId = React2.useId();
+  React2.useLayoutEffect(() => {
+    if (!open) return;
+    registerEscapeLayer(escapeId);
+    return () => unregisterEscapeLayer(escapeId);
+  }, [open, escapeId]);
   React2.useEffect(() => {
     if (!open) return;
     restore.current = typeof document !== "undefined" ? document.activeElement : null;
@@ -300,10 +315,10 @@ function Popover({
       onClose && onClose();
     };
     const key = (e) => {
-      if (closeOnEscape && e.key === "Escape") {
-        e.stopPropagation();
-        onClose && onClose();
-      }
+      if (!closeOnEscape || e.key !== "Escape") return;
+      if (openEscapeIds[openEscapeIds.length - 1] !== escapeId) return;
+      e.stopPropagation();
+      onClose && onClose();
     };
     document.addEventListener("pointerdown", away, true);
     document.addEventListener("keydown", key);
@@ -311,7 +326,7 @@ function Popover({
       document.removeEventListener("pointerdown", away, true);
       document.removeEventListener("keydown", key);
     };
-  }, [open, closeOnOutside, closeOnEscape, onClose, anchorRef, triggerRef]);
+  }, [open, closeOnOutside, closeOnEscape, onClose, anchorRef, triggerRef, escapeId]);
   if (!open || !pos) return null;
   return portal(
     /* @__PURE__ */ jsx3(LayerProvider, { zIndex, children: /* @__PURE__ */ jsxs3(
@@ -1500,11 +1515,13 @@ var BANNER_TONE_STYLE = {
     text: "var(--danger-text)"
   }
 };
-function Banner({ tone = "info", title, detail, actions }) {
+function Banner({ tone = "info", title, detail, actions, role }) {
   const t = BANNER_TONE_STYLE[tone];
+  const liveRole = role || (tone === "danger" ? "alert" : "status");
   return /* @__PURE__ */ jsxs19(
     "div",
     {
+      role: liveRole,
       style: {
         display: "flex",
         alignItems: "flex-start",
@@ -2714,7 +2731,7 @@ function DataTable({
 }
 
 // src/components/data/FilterBar.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 
 // src/components/forms/NumberInput.tsx
 import * as React21 from "react";
@@ -2762,21 +2779,36 @@ function NumberInput({
   "aria-label": ariaLabel
 }) {
   const fieldId = useFieldId(id);
+  const errorId = fieldId + "-error";
   const num = (v) => {
-    const n = Number(String(v == null ? "" : v).replace(/[^0-9.-]/g, ""));
+    const s = String(v == null ? "" : v).replace(/[^0-9.-]/g, "");
+    if (s === "" || s === "-") return null;
+    const n = Number(s);
     return isNaN(n) ? null : n;
   };
+  const requiresInteger = Number.isInteger(step);
+  const validationMessage = (n) => {
+    if (requiresInteger && !Number.isInteger(n)) return "Enter a whole number";
+    if (n < min) return "Must be \u2265 " + min;
+    if (n > max) return "Must be \u2264 " + max;
+    return null;
+  };
   const [text, setText] = React21.useState(value == null || value === "" ? "" : String(value));
   const [editing, setEditing] = React21.useState(false);
+  const [invalidMessage, setInvalidMessage] = React21.useState(null);
   const timer = React21.useRef(null);
   React21.useEffect(() => {
-    if (!editing) setText(value == null || value === "" ? "" : String(value));
+    if (!editing) {
+      setText(value == null || value === "" ? "" : String(value));
+      setInvalidMessage(null);
+    }
   }, [value, editing]);
   const clamp = (n) => Math.min(max, Math.max(min, n));
   const fire = (n) => onChange && onChange({ target: { value: n } });
   const bump = (dir, mult = 1) => {
     const cur = num(text) ?? num(value) ?? (min === -Infinity ? 0 : min);
     const next = clamp(cur + dir * (bigStep && mult > 1 ? bigStep : step) * (bigStep ? 1 : mult));
+    setInvalidMessage(null);
     setText(String(next));
     fire(next);
   };
@@ -2800,7 +2832,8 @@ function NumberInput({
     const n = num(text);
     return n == null ? "" : format ? n.toLocaleString() : String(n);
   })();
-  const box = ["fd-input", "fd-input-num", error ? "fd-input-error" : "", disabled ? "fd-input-disabled" : ""].filter(Boolean).join(" ");
+  const shownError = error || invalidMessage || void 0;
+  const box = ["fd-input", "fd-input-num", shownError ? "fd-input-error" : "", disabled ? "fd-input-disabled" : ""].filter(Boolean).join(" ");
   const fieldName = label || ariaLabel;
   const stepperName = (verb) => fieldName ? verb + " " + fieldName : verb;
   return /* @__PURE__ */ jsxs36("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
@@ -2816,20 +2849,29 @@ function NumberInput({
           disabled,
           placeholder,
           value: shown,
+          "aria-invalid": shownError ? "true" : void 0,
+          "aria-describedby": shownError ? errorId : void 0,
           onFocus: () => setEditing(true),
           onBlur: () => {
             setEditing(false);
-            const n = num(text);
-            if (n != null) {
-              const c = clamp(n);
-              setText(String(c));
-              fire(c);
-            }
+            if (text.trim() === "") fire(void 0);
           },
           onChange: (e) => {
-            setText(e.target.value);
-            const n = num(e.target.value);
-            if (n != null) fire(n);
+            const raw = e.target.value;
+            setText(raw);
+            if (raw.trim() === "") {
+              setInvalidMessage(null);
+              fire(void 0);
+              return;
+            }
+            const n = num(raw);
+            if (n == null) {
+              setInvalidMessage("Enter a number");
+              return;
+            }
+            const message = validationMessage(n);
+            setInvalidMessage(message);
+            if (!message) fire(n);
           },
           onKeyDown: (e) => {
             if (e.key === "ArrowUp") {
@@ -2872,9 +2914,9 @@ function NumberInput({
         )
       ] })
     ] }),
-    error ? /* @__PURE__ */ jsxs36("span", { className: "fd-field-error", children: [
+    shownError ? /* @__PURE__ */ jsxs36("span", { id: errorId, className: "fd-field-error", children: [
       /* @__PURE__ */ jsx42("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
-      error
+      shownError
     ] }) : help ? /* @__PURE__ */ jsx42("span", { className: "fd-field-help", children: help }) : null
   ] });
 }
@@ -3096,16 +3138,48 @@ function Textarea({ label, help, error, required = false, rows = 4, disabled = f
   ] });
 }
 
+// src/components/forms/listbox.ts
+import * as React23 from "react";
+function useListboxNav({ count, onSelect }) {
+  const [active, setActive] = React23.useState(-1);
+  return {
+    active,
+    setActive,
+    move: (dir) => setActive((a) => Math.min(count - 1, Math.max(0, a + dir))),
+    first: () => setActive(0),
+    last: () => setActive(count - 1),
+    activate: () => {
+      if (active >= 0 && active < count) onSelect(active);
+    }
+  };
+}
+function useListboxScrollIntoView(active, listRef, enabled) {
+  React23.useEffect(() => {
+    if (!enabled || active < 0 || !listRef.current) return;
+    const list = listRef.current;
+    const el = list.querySelector('[data-i="' + active + '"]');
+    if (!el) return;
+    const top = el.offsetTop - list.offsetTop;
+    if (top < list.scrollTop) list.scrollTop = top - 4;
+    else if (top + el.offsetHeight > list.scrollTop + list.clientHeight) {
+      list.scrollTop = top + el.offsetHeight - list.clientHeight + 4;
+    }
+  }, [active, enabled]);
+}
+
 // src/components/data/FilterBar.tsx
 import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
+var PANEL_WIDTH = { multiSelect: 280, range: 240, date: 300 };
 var isSet = (v) => !(v == null || v === "" || v === false);
+function operatorsFor(field) {
+  return field.operators && field.operators.length ? field.operators : ["in", "notIn"];
+}
 function isFieldSet(field, value) {
   switch (field.type) {
     case "text":
     case "select":
       return isSet(value);
-    case "multiSelect":
-    case "pasteList": {
+    case "multiSelect": {
       const v = value;
       return !!v && Array.isArray(v.values) && v.values.length > 0;
     }
@@ -3116,7 +3190,7 @@ function isFieldSet(field, value) {
     case "date": {
       const v = value;
       if (!v) return false;
-      return v.kind === "withinDays" ? v.days != null : !!(v.from || v.to);
+      return v.kind === "withinDays" ? v.days != null : !!(v.from && v.to);
     }
   }
 }
@@ -3128,8 +3202,7 @@ function chipLabel(field, value) {
       const chosen = field.options.find((o) => o.value === value);
       return chosen ? chosen.label : String(value ?? "");
     }
-    case "multiSelect":
-    case "pasteList": {
+    case "multiSelect": {
       const v = value;
       if (!v || !v.values.length) return "";
       const prefix = v.operator === "notIn" ? "Not " : "";
@@ -3147,7 +3220,7 @@ function chipLabel(field, value) {
       const v = value;
       if (!v) return "";
       if (v.kind === "withinDays") return "Last " + v.days + " day" + (v.days === 1 ? "" : "s");
-      return (v.from || "\u2026") + " \u2192 " + (v.to || "\u2026");
+      return v.from + " \u2192 " + v.to;
     }
   }
 }
@@ -3169,338 +3242,395 @@ function OperatorToggle({
     }
   );
 }
-function EditPopover({ zIndex, width, children }) {
-  return /* @__PURE__ */ jsx45(LayerProvider, { zIndex, children: /* @__PURE__ */ jsx45(
-    "span",
-    {
-      className: "fd-view-enter",
-      style: {
-        position: "absolute",
-        top: "calc(100% + 6px)",
-        left: 0,
-        zIndex,
-        width,
-        maxWidth: "calc(100vw - 32px)",
-        display: "block",
-        background: "var(--surface)",
-        border: "1px solid var(--border)",
-        borderRadius: 10,
-        boxShadow: "0 16px 44px rgba(11,13,17,.18)",
-        padding: "var(--s-8)"
-      },
-      children
-    }
-  ) });
-}
 function MultiSelectPanel({
   field,
   value,
+  anchorRef,
   onChange,
+  onRemove,
   onClose
 }) {
-  const operator = value?.operator ?? "in";
+  const allowedOps = operatorsFor(field);
+  const [draftOperator, setDraftOperator] = React24.useState(value?.operator ?? allowedOps[0]);
+  const operator = allowedOps.length === 1 ? allowedOps[0] : value?.operator ?? draftOperator;
   const selected = value?.values ?? [];
-  const [query, setQuery] = React23.useState("");
-  const [asyncOptions, setAsyncOptions] = React23.useState(null);
-  const [loading, setLoading] = React23.useState(!!field.loadOptions);
-  const [active, setActive] = React23.useState(0);
-  const inputRef = React23.useRef(null);
-  const listId = React23.useId();
-  React23.useEffect(() => {
+  const selectedRef = React24.useRef(selected);
+  selectedRef.current = selected;
+  const commit = (nextValues, nextOperator = operator) => {
+    if (nextValues.length === 0) onRemove();
+    else onChange({ operator: nextOperator, values: nextValues });
+  };
+  const setOperator = (op) => {
+    setDraftOperator(op);
+    if (selected.length > 0) commit(selected, op);
+  };
+  const [mode2, setMode] = React24.useState("search");
+  const [query, setQuery] = React24.useState("");
+  const [asyncState, setAsyncState] = React24.useState(
+    { options: null, loading: !!field.loadOptions, error: false }
+  );
+  const [retryTick, setRetryTick] = React24.useState(0);
+  const inputRef = React24.useRef(null);
+  const listRef = React24.useRef(null);
+  const listId = React24.useId();
+  const loadOptionsRef = React24.useRef(field.loadOptions);
+  loadOptionsRef.current = field.loadOptions;
+  React24.useEffect(() => {
     inputRef.current?.focus();
   }, []);
-  React23.useEffect(() => {
-    if (!field.loadOptions) return;
-    let cancelled = false;
-    setLoading(true);
-    const loadOptions = field.loadOptions;
+  React24.useEffect(() => {
+    const load = loadOptionsRef.current;
+    if (!load) return;
+    const controller = new AbortController();
+    setAsyncState((s) => ({ options: s.options, loading: true, error: false }));
     const t = setTimeout(() => {
-      loadOptions(query).then((opts) => {
-        if (!cancelled) {
-          setAsyncOptions(opts);
-          setLoading(false);
-        }
-      }).catch(() => {
-        if (!cancelled) {
-          setAsyncOptions([]);
-          setLoading(false);
-        }
+      load(query, controller.signal).then((opts) => {
+        if (controller.signal.aborted) return;
+        setAsyncState({ options: opts, loading: false, error: false });
+      }).catch((err) => {
+        if (controller.signal.aborted || err && err.name === "AbortError") return;
+        setAsyncState({ options: null, loading: false, error: true });
       });
     }, 300);
     return () => {
-      cancelled = true;
       clearTimeout(t);
+      controller.abort();
     };
-  }, [query, field.loadOptions]);
-  const options = field.loadOptions ? asyncOptions ?? [] : (field.options ?? []).filter((o) => o.label.toLowerCase().includes(query.toLowerCase()));
-  React23.useEffect(() => {
-    setActive(0);
-  }, [query, options.length]);
+  }, [query, retryTick]);
+  const options = field.loadOptions ? asyncState.options ?? [] : (field.options ?? []).filter((o) => o.label.toLowerCase().includes(query.toLowerCase()));
+  const showLoading = !!field.loadOptions && asyncState.loading;
+  const showError = !!field.loadOptions && asyncState.error;
+  const hasListbox = !showLoading && !showError && options.length > 0;
   const isSelected = (o) => selected.some((s) => s.value === o.value);
   const toggle = (o) => {
     const next = isSelected(o) ? selected.filter((s) => s.value !== o.value) : [...selected, o];
-    onChange({ operator, values: next });
+    commit(next);
+  };
+  const nav = useListboxNav({ count: options.length, onSelect: (i) => toggle(options[i]) });
+  useListboxScrollIntoView(nav.active, listRef, hasListbox);
+  React24.useEffect(() => {
+    nav.setActive(0);
+  }, [query, options.length]);
+  const activeId = hasListbox && options[nav.active] ? listId + "-opt-" + nav.active : void 0;
+  const liveRole = showError ? "alert" : "status";
+  const liveMessage = showLoading ? "Loading\u2026" : showError ? "Couldn't load options." : options.length === 0 ? "No matches" : "";
+  const [pasteText, setPasteText] = React24.useState("");
+  const [pasteLoading, setPasteLoading] = React24.useState(false);
+  const [unmatchedTokens, setUnmatchedTokens] = React24.useState([]);
+  const [pasteError, setPasteError] = React24.useState(null);
+  const pasteWrapRef = React24.useRef(null);
+  React24.useEffect(() => {
+    if (mode2 === "paste") pasteWrapRef.current?.querySelector("textarea")?.focus();
+  }, [mode2]);
+  const doResolve = () => {
+    if (!field.resolve) return;
+    const tokens = Array.from(new Set(pasteText.split(/[\n,]/).map((t) => t.trim()).filter(Boolean)));
+    if (!tokens.length) return;
+    setPasteLoading(true);
+    setPasteError(null);
+    field.resolve(tokens).then((result) => {
+      setPasteLoading(false);
+      setUnmatchedTokens(result.unmatched);
+      const merged = new Map(selectedRef.current.map((s) => [s.value, s]));
+      for (const m of result.matched) merged.set(m.value, { value: m.value, label: m.label });
+      commit(Array.from(merged.values()));
+      setPasteText("");
+    }).catch((err) => {
+      setPasteLoading(false);
+      setPasteError(err instanceof Error ? err.message : "Could not resolve the pasted list.");
+    });
   };
-  const activeId = options[active] ? listId + "-opt-" + active : void 0;
-  return /* @__PURE__ */ jsxs39("span", { className: "fd-stack", style: { gap: "var(--s-8)", width: 260 }, children: [
-    /* @__PURE__ */ jsx45(OperatorToggle, { operator, onChange: (op) => onChange({ operator: op, values: selected }), label: field.label }),
+  const header = /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
+    allowedOps.length > 1 ? /* @__PURE__ */ jsx45(OperatorToggle, { operator, onChange: setOperator, label: field.label }) : null,
+    field.resolve ? /* @__PURE__ */ jsx45(
+      SegmentedControl,
+      {
+        "aria-label": field.label + " \u2014 search or paste a list",
+        options: [{ value: "search", label: "Search" }, { value: "paste", label: "Paste a list" }],
+        value: mode2,
+        onChange: (m) => setMode(m)
+      }
+    ) : null,
+    mode2 === "search" ? /* @__PURE__ */ jsxs39("span", { className: "fd-pop-search", children: [
+      /* @__PURE__ */ jsx45("i", { className: "ph ph-magnifying-glass", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx45(
+        "input",
+        {
+          ref: inputRef,
+          role: "combobox",
+          "aria-expanded": hasListbox,
+          "aria-controls": hasListbox ? listId : void 0,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": activeId,
+          "aria-label": field.label,
+          value: query,
+          placeholder: field.placeholder || "Search\u2026",
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              nav.move(1);
+            } else if (e.key === "ArrowUp") {
+              e.preventDefault();
+              nav.move(-1);
+            } else if (e.key === "Home") {
+              e.preventDefault();
+              nav.first();
+            } else if (e.key === "End") {
+              e.preventDefault();
+              nav.last();
+            } else if (e.key === "Enter") {
+              e.preventDefault();
+              nav.activate();
+            }
+          }
+        }
+      )
+    ] }) : null
+  ] });
+  const body = mode2 === "paste" ? /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", ref: pasteWrapRef, children: [
     /* @__PURE__ */ jsx45(
-      "input",
+      Textarea,
       {
-        ref: inputRef,
-        role: "combobox",
-        "aria-expanded": "true",
-        "aria-controls": listId,
-        "aria-autocomplete": "list",
-        "aria-activedescendant": activeId,
-        "aria-label": field.label,
-        className: "fd-input",
-        style: { width: "100%", padding: "6px 10px" },
-        value: query,
-        placeholder: field.placeholder || "Search\u2026",
-        onChange: (e) => setQuery(e.target.value),
+        "aria-label": field.label + " \u2014 paste a list",
+        rows: 4,
+        placeholder: field.pastePlaceholder || field.placeholder || "Paste names, one per line or comma-separated",
+        value: pasteText,
+        disabled: pasteLoading,
+        onChange: (e) => setPasteText(e.target.value),
         onKeyDown: (e) => {
-          if (e.key === "ArrowDown") {
-            e.preventDefault();
-            setActive((a) => Math.min(a + 1, options.length - 1));
-          } else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            setActive((a) => Math.max(a - 1, 0));
-          } else if (e.key === "Enter") {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
             e.preventDefault();
-            if (options[active]) toggle(options[active]);
-          } else if (e.key === "Escape") {
-            e.stopPropagation();
-            onClose();
+            doResolve();
           }
         }
       }
     ),
-    loading ? /* @__PURE__ */ jsxs39("span", { className: "fd-row fd-body-sm fd-muted", style: { gap: "var(--s-4)" }, children: [
-      /* @__PURE__ */ jsx45("span", { className: "fd-spinner", "aria-hidden": "true" }),
-      " Loading\u2026"
-    ] }) : options.length === 0 ? /* @__PURE__ */ jsx45("span", { className: "fd-body-sm fd-muted", children: "No matches" }) : /* @__PURE__ */ jsx45(
+    pasteError ? /* @__PURE__ */ jsx45(Banner, { tone: "danger", title: "Couldn't resolve the list", detail: pasteError }) : null,
+    unmatchedTokens.length > 0 ? /* @__PURE__ */ jsx45(Banner, { tone: "warn", title: unmatchedTokens.length + " didn't match", detail: unmatchedTokens.join(", ") }) : null,
+    selected.length > 0 ? /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-xs", children: [
+      /* @__PURE__ */ jsxs39("span", { className: "fd-body-sm fd-muted", children: [
+        selected.length,
+        " matched"
+      ] }),
+      /* @__PURE__ */ jsx45("span", { className: "fd-row fd-wrap fd-gap-xs", children: selected.map((v) => /* @__PURE__ */ jsx45(Tag, { onRemove: () => commit(selected.filter((s) => s.value !== v.value)), children: v.label }, v.value)) })
+    ] }) : null
+  ] }) : /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
+    /* @__PURE__ */ jsxs39(
       "span",
       {
-        id: listId,
-        role: "listbox",
-        "aria-label": field.label,
-        "aria-multiselectable": "true",
-        className: "fd-stack",
-        style: { gap: 2, maxHeight: 220, overflowY: "auto" },
-        children: options.map((o, i) => {
-          const on = isSelected(o);
-          return /* @__PURE__ */ jsxs39(
-            "button",
-            {
-              type: "button",
-              id: listId + "-opt-" + i,
-              role: "option",
-              "aria-selected": on,
-              className: "fd-row",
-              onMouseEnter: () => setActive(i),
-              onClick: () => toggle(o),
-              style: {
-                gap: "var(--s-8)",
-                padding: "4px 8px",
-                borderRadius: 7,
-                border: 0,
-                width: "100%",
-                textAlign: "left",
-                cursor: "pointer",
-                background: i === active ? "var(--surface-brand)" : "transparent"
-              },
-              children: [
-                /* @__PURE__ */ jsx45("i", { className: on ? "ph ph-check-square" : "ph ph-square", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx45("span", { className: "fd-body-sm", style: { flex: 1, color: "var(--text)" }, children: o.label })
-              ]
-            },
-            o.value
-          );
-        })
+        className: "fd-row fd-gap-xs" + (liveMessage && !showError ? " fd-muted" : ""),
+        role: liveRole,
+        children: [
+          showLoading ? /* @__PURE__ */ jsx45("span", { className: "fd-spinner", "aria-hidden": "true" }) : null,
+          liveMessage ? /* @__PURE__ */ jsx45("span", { className: "fd-body-sm", children: liveMessage }) : null
+        ]
       }
     ),
-    selected.length > 0 ? /* @__PURE__ */ jsxs39("span", { className: "fd-body-sm fd-muted", children: [
-      selected.length,
-      " selected"
-    ] }) : null
+    showError ? /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: () => setRetryTick((n) => n + 1), children: "Retry" }) : null,
+    hasListbox ? /* @__PURE__ */ jsx45("span", { id: listId, role: "listbox", "aria-label": field.label, "aria-multiselectable": "true", ref: listRef, className: "fd-pop-list", children: options.map((o, i) => {
+      const on = isSelected(o);
+      return /* @__PURE__ */ jsxs39(
+        "div",
+        {
+          id: listId + "-opt-" + i,
+          "data-i": i,
+          role: "option",
+          tabIndex: -1,
+          "aria-selected": on,
+          className: ["fd-opt", i === nav.active ? "is-active" : "", on ? "is-selected" : ""].filter(Boolean).join(" "),
+          onMouseEnter: () => nav.setActive(i),
+          onClick: () => toggle(o),
+          children: [
+            /* @__PURE__ */ jsx45("i", { className: "fd-filterbar-opt-check ph " + (on ? "ph-check-square is-checked" : "ph-square"), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx45("span", { className: "fd-opt-label", children: o.label })
+          ]
+        },
+        o.value
+      );
+    }) }) : null
   ] });
+  const footer = mode2 === "paste" ? /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: doResolve, disabled: pasteLoading || !pasteText.trim(), children: pasteLoading ? "Resolving\u2026" : "Resolve" }) : void 0;
+  return /* @__PURE__ */ jsx45(
+    Popover,
+    {
+      open: true,
+      anchorRef,
+      onClose,
+      placement: "bottom-start",
+      offset: 6,
+      width: PANEL_WIDTH.multiSelect,
+      label: field.label,
+      header,
+      footer,
+      children: body
+    }
+  );
 }
 function RangePanel({
   field,
   value,
+  anchorRef,
   onChange,
+  onRemove,
   onClose
 }) {
-  const min = value?.min;
-  const max = value?.max;
-  const rangeError = min != null && max != null && min > max ? "Must be \u2265 " + (field.minLabel || "min").toLowerCase() : void 0;
-  return /* @__PURE__ */ jsxs39("span", { className: "fd-stack", style: { gap: "var(--s-8)", width: 240 }, children: [
-    /* @__PURE__ */ jsx45(
-      NumberInput,
-      {
-        label: field.minLabel || "At least",
-        value: min ?? "",
-        min: field.min,
-        max: field.max,
-        step: field.step,
-        placeholder: field.minPlaceholder,
-        onChange: (e) => onChange({ min: e.target.value, max })
-      }
-    ),
-    /* @__PURE__ */ jsx45(
-      NumberInput,
-      {
-        label: field.maxLabel || "At most",
-        value: max ?? "",
-        min: field.min,
-        max: field.max,
-        step: field.step,
-        error: rangeError,
-        placeholder: field.maxPlaceholder,
-        onChange: (e) => onChange({ min, max: e.target.value })
-      }
-    ),
-    /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: onClose, children: "Done" })
-  ] });
+  const [draftMin, setDraftMin] = React24.useState(value?.min);
+  const [draftMax, setDraftMax] = React24.useState(value?.max);
+  const invalid = draftMin != null && draftMax != null && draftMin > draftMax;
+  const apply = (nextMin, nextMax) => {
+    setDraftMin(nextMin);
+    setDraftMax(nextMax);
+    if (nextMin == null && nextMax == null) {
+      onRemove();
+      return;
+    }
+    if (nextMin != null && nextMax != null && nextMin > nextMax) return;
+    onChange({ min: nextMin, max: nextMax });
+  };
+  return /* @__PURE__ */ jsx45(
+    Popover,
+    {
+      open: true,
+      anchorRef,
+      onClose,
+      placement: "bottom-start",
+      offset: 6,
+      width: PANEL_WIDTH.range,
+      label: field.label,
+      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: onClose, disabled: invalid, children: "Done" }),
+      children: /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
+        /* @__PURE__ */ jsx45(
+          NumberInput,
+          {
+            label: field.minLabel || "At least",
+            value: draftMin ?? "",
+            min: field.min,
+            max: field.max,
+            step: field.step,
+            placeholder: field.minPlaceholder,
+            onChange: (e) => apply(e.target.value, draftMax)
+          }
+        ),
+        /* @__PURE__ */ jsx45(
+          NumberInput,
+          {
+            label: field.maxLabel || "At most",
+            value: draftMax ?? "",
+            min: field.min,
+            max: field.max,
+            step: field.step,
+            error: invalid ? "Must be \u2265 " + draftMin : void 0,
+            placeholder: field.maxPlaceholder,
+            onChange: (e) => apply(draftMin, e.target.value)
+          }
+        )
+      ] })
+    }
+  );
 }
 function DatePanel({
   field,
   value,
+  anchorRef,
   onChange,
+  onRemove,
   onClose
 }) {
-  const kind = value?.kind ?? "withinDays";
-  return /* @__PURE__ */ jsxs39("span", { className: "fd-stack", style: { gap: "var(--s-8)", width: 300 }, children: [
-    /* @__PURE__ */ jsx45(
-      SegmentedControl,
-      {
-        "aria-label": field.label + " \u2014 relative or between dates",
-        options: [
-          { value: "withinDays", label: "Within last N days" },
-          { value: "between", label: "Between dates" }
-        ],
-        value: kind,
-        onChange: (k) => {
-          if (k === "withinDays") {
-            onChange({ kind: "withinDays", days: value?.kind === "withinDays" ? value.days : field.defaultDays ?? 30 });
-          } else {
-            onChange({ kind: "between", from: value?.kind === "between" ? value.from : "", to: value?.kind === "between" ? value.to : "" });
-          }
-        }
-      }
-    ),
-    kind === "withinDays" ? /* @__PURE__ */ jsx45(
-      NumberInput,
-      {
-        label: "Days",
-        min: 1,
-        value: value?.kind === "withinDays" ? value.days : field.defaultDays ?? 30,
-        onChange: (e) => onChange({ kind: "withinDays", days: e.target.value })
-      }
-    ) : /* @__PURE__ */ jsx45(
-      DatePicker,
-      {
-        range: true,
-        label: "Date range",
-        value: value?.kind === "between" ? { start: value.from, end: value.to } : void 0,
-        onChange: (e) => onChange({ kind: "between", from: e.target.value.start || "", to: e.target.value.end || "" })
+  const defaultDays = field.defaultDays ?? 30;
+  const maxDays = field.maxDays ?? 3650;
+  const [kind, setKind] = React24.useState(value?.kind ?? "withinDays");
+  const [daysDraft, setDaysDraft] = React24.useState(
+    value?.kind === "withinDays" ? value.days : defaultDays
+  );
+  const [between, setBetween] = React24.useState(
+    value?.kind === "between" ? { from: value.from, to: value.to } : { from: "", to: "" }
+  );
+  const committedRef = React24.useRef(!!value);
+  const applyWithinDays = (days) => {
+    setDaysDraft(days);
+    if (days != null) {
+      committedRef.current = true;
+      onChange({ kind: "withinDays", days });
+    } else if (committedRef.current) {
+      committedRef.current = false;
+      onRemove();
+    }
+  };
+  const applyBetween = (from, to) => {
+    setBetween({ from, to });
+    if (from && to) {
+      committedRef.current = true;
+      onChange({ kind: "between", from, to });
+    } else if (committedRef.current) {
+      committedRef.current = false;
+      onRemove();
+    }
+  };
+  const switchKind = (next) => {
+    setKind(next);
+    if (next === "between") {
+      setBetween({ from: "", to: "" });
+      if (committedRef.current) {
+        committedRef.current = false;
+        onRemove();
       }
-    ),
-    /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: onClose, children: "Done" })
-  ] });
-}
-function PasteListPanel({
-  field,
-  value,
-  onChange,
-  onClose
-}) {
-  const operator = value?.operator ?? "in";
-  const selected = value?.values ?? [];
-  const [text, setText] = React23.useState("");
-  const [loading, setLoading] = React23.useState(false);
-  const [unmatched, setUnmatched] = React23.useState([]);
-  const [error, setError] = React23.useState(null);
-  const wrapRef = React23.useRef(null);
-  React23.useEffect(() => {
-    wrapRef.current?.querySelector("textarea")?.focus();
-  }, []);
-  const doResolve = () => {
-    const tokens = text.split(/[\n,]/).map((t) => t.trim()).filter(Boolean);
-    if (!tokens.length) return;
-    setLoading(true);
-    setError(null);
-    field.resolve(tokens).then((result) => {
-      setLoading(false);
-      setUnmatched(result.unmatched);
-      const merged = new Map(selected.map((s) => [s.value, s]));
-      for (const m of result.matched) merged.set(m.value, { value: m.value, label: m.label });
-      onChange({ operator, values: Array.from(merged.values()) });
-      setText("");
-    }).catch((err) => {
-      setLoading(false);
-      setError(err instanceof Error ? err.message : "Could not resolve the pasted list.");
-    });
+    }
   };
-  return /* @__PURE__ */ jsxs39("span", { className: "fd-stack", style: { gap: "var(--s-8)", width: 320 }, children: [
-    /* @__PURE__ */ jsx45(OperatorToggle, { operator, onChange: (op) => onChange({ operator: op, values: selected }), label: field.label }),
-    /* @__PURE__ */ jsx45("span", { ref: wrapRef, children: /* @__PURE__ */ jsx45(
-      Textarea,
-      {
-        "aria-label": field.label + " \u2014 paste a list",
-        rows: 4,
-        placeholder: field.placeholder || "Paste names, one per line or comma-separated",
-        value: text,
-        disabled: loading,
-        onChange: (e) => setText(e.target.value),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-            e.preventDefault();
-            doResolve();
+  const confirm = () => {
+    if (kind === "withinDays" && daysDraft != null) {
+      committedRef.current = true;
+      onChange({ kind: "withinDays", days: daysDraft });
+    }
+    onClose();
+  };
+  return /* @__PURE__ */ jsx45(
+    Popover,
+    {
+      open: true,
+      anchorRef,
+      onClose,
+      placement: "bottom-start",
+      offset: 6,
+      width: PANEL_WIDTH.date,
+      label: field.label,
+      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: confirm, children: "Done" }),
+      children: /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
+        /* @__PURE__ */ jsx45(
+          SegmentedControl,
+          {
+            "aria-label": field.label + " \u2014 relative or between dates",
+            options: [
+              { value: "withinDays", label: "Within last N days" },
+              { value: "between", label: "Between dates" }
+            ],
+            value: kind,
+            onChange: (k) => switchKind(k)
           }
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: doResolve, disabled: loading || !text.trim(), children: loading ? "Resolving\u2026" : "Resolve" }),
-    error ? /* @__PURE__ */ jsx45(Banner, { tone: "danger", title: "Couldn't resolve the list", detail: error }) : null,
-    unmatched.length > 0 ? /* @__PURE__ */ jsx45(Banner, { tone: "warn", title: unmatched.length + " didn't match", detail: unmatched.join(", ") }) : null,
-    selected.length > 0 ? /* @__PURE__ */ jsxs39("span", { className: "fd-stack", style: { gap: "var(--s-4)" }, children: [
-      /* @__PURE__ */ jsxs39("span", { className: "fd-body-sm fd-muted", children: [
-        selected.length,
-        " matched"
-      ] }),
-      /* @__PURE__ */ jsx45("span", { className: "fd-row", style: { flexWrap: "wrap", gap: "var(--s-4)" }, children: selected.map((v) => /* @__PURE__ */ jsx45(Tag, { onRemove: () => onChange({ operator, values: selected.filter((s) => s.value !== v.value) }), children: v.label }, v.value)) })
-    ] }) : null,
-    /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: onClose, children: "Done" })
-  ] });
+        ),
+        kind === "withinDays" ? /* @__PURE__ */ jsx45(NumberInput, { label: "Days", min: 1, max: maxDays, step: 1, value: daysDraft ?? "", onChange: (e) => applyWithinDays(e.target.value) }) : /* @__PURE__ */ jsx45(
+          DatePicker,
+          {
+            range: true,
+            label: "Date range",
+            value: { start: between.from, end: between.to },
+            onChange: (e) => applyBetween(e.target.value.start || "", e.target.value.end || "")
+          }
+        )
+      ] })
+    }
+  );
 }
 function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align = "left", className = "", ...rest }) {
-  const [panel, setPanel] = React23.useState(null);
-  const zIndex = useOverlayLayer(!!panel);
-  const rootRef = React23.useRef(null);
-  const textInputRef = React23.useRef(null);
-  const optionsRef = React23.useRef(null);
+  const [panel, setPanel] = React24.useState(null);
+  const editAnchorRef = React24.useRef(null);
+  const addAnchorRef = React24.useRef(null);
+  const textInputRef = React24.useRef(null);
+  const optionsRef = React24.useRef(null);
   const editingField = panel && panel.kind === "edit" ? fields.find((f) => f.key === panel.key) : void 0;
-  const dismissible = !!panel && (panel.kind === "add" || panel.kind === "edit" && editingField?.type !== "text");
-  React23.useEffect(() => {
-    if (!dismissible) return;
-    const away = (e) => {
-      const target = e.target;
-      if (target.closest && target.closest(".fd-pop")) return;
-      if (rootRef.current && !rootRef.current.contains(e.target)) setPanel(null);
-    };
-    const esc = (e) => {
-      if (e.key === "Escape") setPanel(null);
-    };
-    document.addEventListener("pointerdown", away);
-    document.addEventListener("keydown", esc);
-    return () => {
-      document.removeEventListener("pointerdown", away);
-      document.removeEventListener("keydown", esc);
-    };
-  }, [dismissible]);
-  React23.useEffect(() => {
+  const startEditing = (key) => setPanel({ kind: "edit", key });
+  const closeEditing = () => setPanel(null);
+  React24.useEffect(() => {
     if (!panel || panel.kind !== "edit") return;
     if (editingField?.type === "text") {
       textInputRef.current?.focus();
@@ -3510,72 +3640,77 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
     }
   }, [panel]);
   const addableFields = fields.filter((f) => !isFieldSet(f, filters[f.key]));
-  const startEditing = (key) => setPanel({ kind: "edit", key });
-  return /* @__PURE__ */ jsxs39("span", { className, style: { position: "relative", display: "inline-flex", flexWrap: "wrap", alignItems: "center", gap: 8 }, ref: rootRef, ...rest, children: [
+  const addMenuItems = [
+    { kind: "section", label: "Add filter" },
+    ...addableFields.map((f) => ({ id: f.key, label: f.label, onSelect: () => startEditing(f.key) }))
+  ];
+  return /* @__PURE__ */ jsxs39("span", { className: ["fd-filterbar", className].filter(Boolean).join(" "), ...rest, children: [
     fields.map((field) => {
       const value = filters[field.key];
       const editing = panel?.kind === "edit" && panel.key === field.key;
       if (editing && field.type === "text") {
-        return /* @__PURE__ */ jsxs39(
-          "span",
-          {
-            className: "fd-tag",
-            style: { background: "var(--surface-brand)", borderColor: "var(--border-brand)", cursor: "text" },
-            children: [
-              /* @__PURE__ */ jsx45(
-                "input",
-                {
-                  ref: textInputRef,
-                  value: value ?? "",
-                  placeholder: field.placeholder || field.label,
-                  "aria-label": field.label,
-                  onChange: (e) => onFilterChange(field.key, e.target.value),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") setPanel(null);
-                    else if (e.key === "Escape") {
-                      e.stopPropagation();
-                      setPanel(null);
-                    }
-                  },
-                  onBlur: () => setPanel(null),
-                  style: { all: "unset", minWidth: 90, color: "var(--text-on-surface-brand)" }
-                }
-              ),
-              isSet(value) ? /* @__PURE__ */ jsx45(
-                "span",
-                {
-                  className: "fd-tag-remove",
-                  role: "button",
-                  "aria-label": "Remove " + field.label,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onFilterRemove(field.key);
-                    setPanel(null);
-                  },
-                  children: /* @__PURE__ */ jsx45("i", { className: "ph ph-x", "aria-hidden": "true" })
+        return /* @__PURE__ */ jsxs39("span", { className: ["fd-tag", "fd-filterbar-text"].join(" "), children: [
+          /* @__PURE__ */ jsx45(
+            "input",
+            {
+              ref: textInputRef,
+              className: "fd-filterbar-text-input",
+              value: value ?? "",
+              placeholder: field.placeholder || field.label,
+              "aria-label": field.label,
+              onChange: (e) => onFilterChange(field.key, e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") setPanel(null);
+                else if (e.key === "Escape") {
+                  e.stopPropagation();
+                  setPanel(null);
                 }
-              ) : null
-            ]
-          },
-          field.key
-        );
-      }
-      if (editing && field.type === "select") {
-        const chosen = field.options.find((o) => o.value === value);
-        return /* @__PURE__ */ jsxs39("span", { style: { position: "relative", display: "inline-flex" }, children: [
-          /* @__PURE__ */ jsxs39(Tag, { selected: true, onClick: () => setPanel(null), onRemove: () => {
-            if (isSet(value)) onFilterRemove(field.key);
-            setPanel(null);
-          }, children: [
-            field.label,
-            chosen ? ": " + chosen.label : ""
-          ] }),
-          /* @__PURE__ */ jsx45(LayerProvider, { zIndex, children: /* @__PURE__ */ jsx45(
+              },
+              onBlur: () => setPanel(null)
+            }
+          ),
+          isSet(value) ? /* @__PURE__ */ jsx45(
             "span",
             {
-              className: "fd-view-enter",
-              style: { position: "absolute", top: "calc(100% + 6px)", left: 0, zIndex, minWidth: 200, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 },
-              children: /* @__PURE__ */ jsx45("span", { className: "fd-stack", role: "listbox", "aria-label": field.label, ref: optionsRef, style: { gap: 2 }, children: field.options.map((o) => {
+              className: "fd-tag-remove",
+              role: "button",
+              "aria-label": "Remove " + field.label,
+              onClick: (e) => {
+                e.stopPropagation();
+                onFilterRemove(field.key);
+                setPanel(null);
+              },
+              children: /* @__PURE__ */ jsx45("i", { className: "ph ph-x", "aria-hidden": "true" })
+            }
+          ) : null
+        ] }, field.key);
+      }
+      const set = isFieldSet(field, value);
+      if (!editing && !set) return null;
+      const chipRef = editing ? editAnchorRef : void 0;
+      const toggleOrClose = () => editing ? closeEditing() : startEditing(field.key);
+      const remove = () => {
+        if (set) onFilterRemove(field.key);
+        closeEditing();
+      };
+      const chipText = field.label + (set ? ": " + chipLabel(field, value) : "");
+      if (field.type === "text") {
+        return /* @__PURE__ */ jsx45(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, children: chipText }, field.key);
+      }
+      if (field.type === "select") {
+        return /* @__PURE__ */ jsxs39("span", { children: [
+          /* @__PURE__ */ jsx45("span", { ref: chipRef, children: /* @__PURE__ */ jsx45(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, children: chipText }) }),
+          editing ? /* @__PURE__ */ jsx45(
+            Popover,
+            {
+              open: true,
+              anchorRef: editAnchorRef,
+              onClose: closeEditing,
+              placement: align === "right" ? "bottom-end" : "bottom-start",
+              offset: 6,
+              minWidth: 200,
+              label: field.label,
+              children: /* @__PURE__ */ jsx45("span", { role: "listbox", "aria-label": field.label, ref: optionsRef, className: "fd-pop-list", children: field.options.map((o) => {
                 const on = o.value === value;
                 return /* @__PURE__ */ jsx45(
                   "button",
@@ -3583,84 +3718,72 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
                     type: "button",
                     role: "option",
                     "aria-selected": on,
-                    className: "fd-row",
+                    className: ["fd-opt", on ? "is-selected" : ""].filter(Boolean).join(" "),
                     onClick: () => {
                       onFilterChange(field.key, o.value);
                       setPanel(null);
                     },
-                    style: { gap: 8, padding: "4px 8px", borderRadius: 7, border: 0, width: "100%", textAlign: "left", cursor: "pointer", background: on ? "var(--surface-brand)" : "transparent" },
-                    children: /* @__PURE__ */ jsx45("span", { className: "fd-body-sm", style: { flex: 1, fontWeight: on ? 700 : 500, color: on ? "var(--text-on-surface-brand)" : "var(--text)" }, children: o.label })
+                    children: /* @__PURE__ */ jsx45("span", { className: "fd-opt-label", children: o.label })
                   },
                   o.value
                 );
               }) })
             }
-          ) })
-        ] }, field.key);
-      }
-      if (editing && field.type === "multiSelect") {
-        const mv = value;
-        return /* @__PURE__ */ jsxs39("span", { style: { position: "relative", display: "inline-flex" }, children: [
-          /* @__PURE__ */ jsxs39(Tag, { selected: true, onClick: () => setPanel(null), onRemove: () => {
-            if (isFieldSet(field, value)) onFilterRemove(field.key);
-            setPanel(null);
-          }, children: [
-            field.label,
-            isFieldSet(field, value) ? ": " + chipLabel(field, value) : ""
-          ] }),
-          /* @__PURE__ */ jsx45(EditPopover, { zIndex, width: 260, children: /* @__PURE__ */ jsx45(MultiSelectPanel, { field, value: mv, onChange: (v) => onFilterChange(field.key, v), onClose: () => setPanel(null) }) })
-        ] }, field.key);
-      }
-      if (editing && field.type === "range") {
-        const rv = value;
-        return /* @__PURE__ */ jsxs39("span", { style: { position: "relative", display: "inline-flex" }, children: [
-          /* @__PURE__ */ jsxs39(Tag, { selected: true, onClick: () => setPanel(null), onRemove: () => {
-            if (isFieldSet(field, value)) onFilterRemove(field.key);
-            setPanel(null);
-          }, children: [
-            field.label,
-            isFieldSet(field, value) ? ": " + chipLabel(field, value) : ""
-          ] }),
-          /* @__PURE__ */ jsx45(EditPopover, { zIndex, width: 240, children: /* @__PURE__ */ jsx45(RangePanel, { field, value: rv, onChange: (v) => onFilterChange(field.key, v), onClose: () => setPanel(null) }) })
+          ) : null
         ] }, field.key);
       }
-      if (editing && field.type === "date") {
-        const dv = value;
-        return /* @__PURE__ */ jsxs39("span", { style: { position: "relative", display: "inline-flex" }, children: [
-          /* @__PURE__ */ jsxs39(Tag, { selected: true, onClick: () => setPanel(null), onRemove: () => {
-            if (isFieldSet(field, value)) onFilterRemove(field.key);
-            setPanel(null);
-          }, children: [
-            field.label,
-            isFieldSet(field, value) ? ": " + chipLabel(field, value) : ""
-          ] }),
-          /* @__PURE__ */ jsx45(EditPopover, { zIndex, width: 300, children: /* @__PURE__ */ jsx45(DatePanel, { field, value: dv, onChange: (v) => onFilterChange(field.key, v), onClose: () => setPanel(null) }) })
+      if (field.type === "multiSelect") {
+        return /* @__PURE__ */ jsxs39("span", { children: [
+          /* @__PURE__ */ jsx45("span", { ref: chipRef, children: /* @__PURE__ */ jsx45(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, children: chipText }) }),
+          editing ? /* @__PURE__ */ jsx45(
+            MultiSelectPanel,
+            {
+              field,
+              value,
+              anchorRef: editAnchorRef,
+              onChange: (v) => onFilterChange(field.key, v),
+              onRemove: () => onFilterRemove(field.key),
+              onClose: closeEditing
+            }
+          ) : null
         ] }, field.key);
       }
-      if (editing && field.type === "pasteList") {
-        const pv = value;
-        return /* @__PURE__ */ jsxs39("span", { style: { position: "relative", display: "inline-flex" }, children: [
-          /* @__PURE__ */ jsxs39(Tag, { selected: true, onClick: () => setPanel(null), onRemove: () => {
-            if (isFieldSet(field, value)) onFilterRemove(field.key);
-            setPanel(null);
-          }, children: [
-            field.label,
-            isFieldSet(field, value) ? ": " + chipLabel(field, value) : ""
-          ] }),
-          /* @__PURE__ */ jsx45(EditPopover, { zIndex, width: 320, children: /* @__PURE__ */ jsx45(PasteListPanel, { field, value: pv, onChange: (v) => onFilterChange(field.key, v), onClose: () => setPanel(null) }) })
+      if (field.type === "range") {
+        return /* @__PURE__ */ jsxs39("span", { children: [
+          /* @__PURE__ */ jsx45("span", { ref: chipRef, children: /* @__PURE__ */ jsx45(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, children: chipText }) }),
+          editing ? /* @__PURE__ */ jsx45(
+            RangePanel,
+            {
+              field,
+              value,
+              anchorRef: editAnchorRef,
+              onChange: (v) => onFilterChange(field.key, v),
+              onRemove: () => onFilterRemove(field.key),
+              onClose: closeEditing
+            }
+          ) : null
         ] }, field.key);
       }
-      if (isFieldSet(field, value)) {
-        return /* @__PURE__ */ jsxs39(Tag, { selected: true, onClick: () => startEditing(field.key), onRemove: () => onFilterRemove(field.key), children: [
-          field.label,
-          ": ",
-          chipLabel(field, value)
+      if (field.type === "date") {
+        return /* @__PURE__ */ jsxs39("span", { children: [
+          /* @__PURE__ */ jsx45("span", { ref: chipRef, children: /* @__PURE__ */ jsx45(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, children: chipText }) }),
+          editing ? /* @__PURE__ */ jsx45(
+            DatePanel,
+            {
+              field,
+              value,
+              anchorRef: editAnchorRef,
+              onChange: (v) => onFilterChange(field.key, v),
+              onRemove: () => onFilterRemove(field.key),
+              onClose: closeEditing
+            }
+          ) : null
         ] }, field.key);
       }
       return null;
     }),
-    addableFields.length > 0 ? /* @__PURE__ */ jsxs39("span", { style: { position: "relative", display: "inline-flex" }, children: [
-      /* @__PURE__ */ jsx45(
+    addableFields.length > 0 ? /* @__PURE__ */ jsxs39("span", { children: [
+      /* @__PURE__ */ jsx45("span", { ref: addAnchorRef, children: /* @__PURE__ */ jsx45(
         Button,
         {
           size: "sm",
@@ -3671,29 +3794,20 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
           onClick: () => setPanel(panel?.kind === "add" ? null : { kind: "add" }),
           children: "Filter"
         }
-      ),
-      panel?.kind === "add" ? /* @__PURE__ */ jsx45(LayerProvider, { zIndex, children: /* @__PURE__ */ jsx45(
-        "span",
+      ) }),
+      /* @__PURE__ */ jsx45(
+        Popover,
         {
-          className: "fd-view-enter",
-          style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex, width: 220, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 },
-          children: /* @__PURE__ */ jsxs39("span", { className: "fd-stack", role: "menu", "aria-label": "Add filter", style: { gap: 2 }, children: [
-            /* @__PURE__ */ jsx45("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Add filter" }),
-            addableFields.map((f) => /* @__PURE__ */ jsx45(
-              "button",
-              {
-                type: "button",
-                role: "menuitem",
-                className: "fd-row",
-                onClick: () => startEditing(f.key),
-                style: { gap: 8, padding: "4px 8px", borderRadius: 7, border: 0, width: "100%", textAlign: "left", cursor: "pointer", background: "transparent" },
-                children: /* @__PURE__ */ jsx45("span", { className: "fd-body-sm", style: { flex: 1, color: "var(--text)" }, children: f.label })
-              },
-              f.key
-            ))
-          ] })
+          open: panel?.kind === "add",
+          anchorRef: addAnchorRef,
+          onClose: closeEditing,
+          placement: align === "right" ? "bottom-end" : "bottom-start",
+          minWidth: 200,
+          role: "menu",
+          label: "Add filter",
+          children: /* @__PURE__ */ jsx45(Menu, { items: addMenuItems })
         }
-      ) }) : null
+      )
     ] }) : null
   ] });
 }
@@ -3725,7 +3839,7 @@ function StatTile({ label, value, sub, delta, invert = false, loading = false, c
 }
 
 // src/components/data/CodeBlock.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import { Fragment as Fragment6, jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
 var JS_KW = /^(?:const|let|var|function|return|if|else|for|while|do|new|class|extends|import|from|export|default|await|async|try|catch|finally|throw|typeof|instanceof|of|in|switch|case|break|continue|delete|void|yield|static|get|set|this|super|interface|type|enum|implements|public|private|protected|readonly|abstract|as|satisfies|declare|namespace)$/;
 var RULES = {
@@ -3881,13 +3995,13 @@ function tokenize(src, lang) {
   return out;
 }
 function Highlighted({ code, lang }) {
-  const toks = React24.useMemo(() => tokenize(code, lang), [code, lang]);
+  const toks = React25.useMemo(() => tokenize(code, lang), [code, lang]);
   return /* @__PURE__ */ jsx47(Fragment6, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ jsx47("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
 }
 function useCopy() {
-  const [done, setDone] = React24.useState(false);
-  const timer = React24.useRef(null);
-  React24.useEffect(() => () => {
+  const [done, setDone] = React25.useState(false);
+  const timer = React25.useRef(null);
+  React25.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
   const copy = (text) => {
@@ -3923,8 +4037,8 @@ function CodeBlock({
   actions,
   className = ""
 }) {
-  const [wrap, setWrap] = React24.useState(!!wrapDefault);
-  const [open, setOpen] = React24.useState(false);
+  const [wrap, setWrap] = React25.useState(!!wrapDefault);
+  const [open, setOpen] = React25.useState(false);
   const [copied, copy] = useCopy();
   const body = String(code).replace(/\n$/, "");
   const lines = body.split("\n");
@@ -3953,7 +4067,7 @@ function CodeBlock({
   ] });
 }
 function DiffBlock({ diff = "", filename, collapseAfter = 34, className = "" }) {
-  const [open, setOpen] = React24.useState(false);
+  const [open, setOpen] = React25.useState(false);
   const [copied, copy] = useCopy();
   const raw = String(diff).replace(/\n$/, "");
   const all = raw.split("\n").map((line) => {
@@ -3999,7 +4113,7 @@ function DiffBlock({ diff = "", filename, collapseAfter = 34, className = "" })
 }
 
 // src/components/data/Markdown.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import { jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
 var SAFE = /^(?:https?:|mailto:|tel:|#|\/|\.{1,2}\/)/i;
 var safeHref = (h) => SAFE.test(String(h || "").trim()) ? String(h).trim() : null;
@@ -4038,7 +4152,7 @@ function inlineNodes(src, ctx, keyBase) {
       const href = safeHref(g(2));
       out.push(href ? /* @__PURE__ */ jsx48("a", { href, title: g(3) || void 0, target: /^https?:/i.test(href) ? "_blank" : void 0, rel: "noopener noreferrer", onClick: ctx.onLinkClick, children: inlineNodes(g(1), ctx, key()) }, key()) : /* @__PURE__ */ jsx48("span", { children: g(1) }, key()));
     } else if (kind === "cite") {
-      out.push(ctx.renderCitation ? /* @__PURE__ */ jsx48(React25.Fragment, { children: ctx.renderCitation(g(1)) }, key()) : /* @__PURE__ */ jsx48("sup", { className: "fd-md-cite", children: g(1) }, key()));
+      out.push(ctx.renderCitation ? /* @__PURE__ */ jsx48(React26.Fragment, { children: ctx.renderCitation(g(1)) }, key()) : /* @__PURE__ */ jsx48("sup", { className: "fd-md-cite", children: g(1) }, key()));
     } else if (kind === "strongem") out.push(/* @__PURE__ */ jsx48("strong", { children: /* @__PURE__ */ jsx48("em", { children: inlineNodes(g(1), ctx, key()) }) }, key()));
     else if (kind === "strong") out.push(/* @__PURE__ */ jsx48("strong", { children: inlineNodes(g(1) || g(2), ctx, key()) }, key()));
     else if (kind === "em") out.push(/* @__PURE__ */ jsx48("em", { children: inlineNodes(g(1) || g(2), ctx, key()) }, key()));
@@ -4203,7 +4317,7 @@ function Markdown({
   onLinkClick
 }) {
   const ctx = { allowImages, headingOffset, renderCitation, onLinkClick, codeProps };
-  const blocks = React25.useMemo(() => parseBlocks(source), [source]);
+  const blocks = React26.useMemo(() => parseBlocks(source), [source]);
   return /* @__PURE__ */ jsx48("div", { className: ["fd-md", className].filter(Boolean).join(" "), children: renderBlocks(blocks, ctx, "b") });
 }
 function MarkdownInline({ source = "", className = "", onLinkClick }) {
@@ -4317,7 +4431,7 @@ function Pagination({
 }
 
 // src/components/data/RelativeTime.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { jsxs as jsxs45 } from "react/jsx-runtime";
 var MIN = 6e4;
 var HOUR = 36e5;
@@ -4369,9 +4483,9 @@ function formatDuration(ms) {
   return h + "h" + (m % 60 ? " " + m % 60 + "m" : "");
 }
 function RelativeTime({ value, prefix, className = "", refresh: refresh2 = true, ...rest }) {
-  const [, force] = React26.useState(0);
+  const [, force] = React27.useState(0);
   const t = value instanceof Date ? value.getTime() : Date.parse(value);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!refresh2 || !t || isNaN(t)) return;
     const abs = Math.abs(t - Date.now());
     if (abs > DAY) return;
@@ -4387,7 +4501,7 @@ function RelativeTime({ value, prefix, className = "", refresh: refresh2 = true,
 }
 
 // src/components/data/ScoreMeter.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
 function ScoreMeter({
   score,
@@ -4402,10 +4516,10 @@ function ScoreMeter({
   breakdownWidth = 280,
   className = ""
 }) {
-  const [open, setOpen] = React27.useState(false);
-  const ref = React27.useRef(null);
+  const [open, setOpen] = React28.useState(false);
+  const ref = React28.useRef(null);
   const value = Math.max(0, Math.min(100, Math.round(Number(score) || 0)));
-  const body = /* @__PURE__ */ jsxs46(React27.Fragment, { children: [
+  const body = /* @__PURE__ */ jsxs46(React28.Fragment, { children: [
     /* @__PURE__ */ jsx51("span", { className: "fd-scoremeter-rail", style: { width }, "aria-hidden": "true", children: /* @__PURE__ */ jsx51(SegmentedMeter, { total: 100, segments, height, showTotal: false, showPercent: false, legend: false }) }),
     showScore ? /* @__PURE__ */ jsx51("span", { className: "fd-scoremeter-value fd-tabular", "aria-hidden": "true", children: value }) : null
   ] });
@@ -4424,7 +4538,7 @@ function ScoreMeter({
       }
     );
   }
-  return /* @__PURE__ */ jsxs46(React27.Fragment, { children: [
+  return /* @__PURE__ */ jsxs46(React28.Fragment, { children: [
     /* @__PURE__ */ jsx51(
       "button",
       {
@@ -4455,13 +4569,13 @@ function ScoreMeter({
 }
 
 // src/components/data/SortMenu.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
 function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", className = "", ...rest }) {
-  const [open, setOpen] = React28.useState(false);
+  const [open, setOpen] = React29.useState(false);
   const zIndex = useOverlayLayer(open);
-  const ref = React28.useRef(null);
-  React28.useEffect(() => {
+  const ref = React29.useRef(null);
+  React29.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -4523,7 +4637,7 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
 }
 
 // src/components/data/StepList.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { jsx as jsx53, jsxs as jsxs48 } from "react/jsx-runtime";
 var KIND_ICON = { tool: "wrench", search: "magnifying-glass", read: "file-text", write: "pencil-simple", reasoning: "brain", run: "terminal", fetch: "cloud-arrow-down" };
 function StepList({
@@ -4536,9 +4650,9 @@ function StepList({
   dense = false,
   className = ""
 }) {
-  const [openState, setOpenState] = React29.useState(defaultOpen);
+  const [openState, setOpenState] = React30.useState(defaultOpen);
   const open = openProp == null ? openState : openProp;
-  const [expanded, setExpanded] = React29.useState({});
+  const [expanded, setExpanded] = React30.useState({});
   if (!steps.length) return null;
   const running = steps.some((s) => s.status === "running");
   const failed = steps.filter((s) => s.status === "error").length;
@@ -4596,7 +4710,7 @@ function StepList({
 }
 
 // src/components/data/VirtualList.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 import { jsx as jsx54, jsxs as jsxs49 } from "react/jsx-runtime";
 var VIRTUAL_LIST_BUFFER_ROWS = 20;
 var VIRTUAL_LIST_ROW_GAP = 6;
@@ -4648,35 +4762,35 @@ function VirtualList({
   className = "",
   style
 }) {
-  const [scrollTop, setScrollTop] = React30.useState(0);
-  const loaded = React30.useMemo(
+  const [scrollTop, setScrollTop] = React31.useState(0);
+  const loaded = React31.useMemo(
     () => ({ firstItemIndex, count: items.length }),
     [firstItemIndex, items.length]
   );
   const total = Math.max(totalCount == null ? 0 : totalCount, firstItemIndex + items.length);
   const bandKey = firstItemIndex + ":" + items.length;
-  const win = React30.useMemo(
+  const win = React31.useMemo(
     () => computeVirtualWindow({ scrollTop, viewportHeight: height, itemHeight, itemCount: total, loaded }),
     [scrollTop, height, itemHeight, total, loaded]
   );
-  const need = React30.useMemo(() => computeNeedMore(win, loaded), [win, loaded]);
+  const need = React31.useMemo(() => computeNeedMore(win, loaded), [win, loaded]);
   const wantStart = need.start && hasMore?.start !== false;
   const wantEnd = need.end && hasMore?.end !== false;
   const bucket2 = Math.floor(win.visibleStart / VIRTUAL_LIST_BUFFER_ROWS);
   const askKey = bandKey + "@" + bucket2;
-  const asked = React30.useRef({ start: null, end: null });
-  React30.useEffect(() => {
+  const asked = React31.useRef({ start: null, end: null });
+  React31.useEffect(() => {
     if (loading || !wantStart || asked.current.start === askKey) return;
     asked.current.start = askKey;
     onNeedMore("start", win);
   }, [wantStart, loading, askKey, onNeedMore, win]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (loading || !wantEnd || asked.current.end === askKey) return;
     asked.current.end = askKey;
     onNeedMore("end", win);
   }, [wantEnd, loading, askKey, onNeedMore, win]);
-  const lastKeysRef = React30.useRef(null);
-  const newKeys = React30.useMemo(() => {
+  const lastKeysRef = React31.useRef(null);
+  const newKeys = React31.useMemo(() => {
     const prev = lastKeysRef.current;
     if (!prev) return /* @__PURE__ */ new Set();
     const fresh = /* @__PURE__ */ new Set();
@@ -4686,7 +4800,7 @@ function VirtualList({
     }
     return fresh;
   }, [items]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     lastKeysRef.current = new Set(items.map(keyOf));
   }, [items]);
   const gapStyle = { "--fd-vlist-gap": rowGap + "px" };
@@ -4731,7 +4845,7 @@ function VirtualList({
 }
 
 // src/components/data/EntityRow.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import { jsx as jsx55, jsxs as jsxs50 } from "react/jsx-runtime";
 var ENTITY_ROW_METRIC_WIDTH = 74;
 var METRIC_TONE_COLOR = {
@@ -4744,7 +4858,7 @@ function EntityRowMetrics({ metrics, className = "", style }) {
     const key = m.id || m.label || i;
     const className2 = ["fd-erow-metric", m.tone && m.tone !== "default" ? "is-" + m.tone : "", m.tooltip != null ? "is-described" : ""].filter(Boolean).join(" ");
     const tone = { color: METRIC_TONE_COLOR[m.tone || "default"] };
-    const content = /* @__PURE__ */ jsxs50(React31.Fragment, { children: [
+    const content = /* @__PURE__ */ jsxs50(React32.Fragment, { children: [
       m.icon ? /* @__PURE__ */ jsx55("i", { className: "ph ph-" + m.icon, "aria-hidden": "true" }) : null,
       /* @__PURE__ */ jsx55("span", { className: "fd-erow-metric-value fd-tabular", children: m.value }),
       /* @__PURE__ */ jsx55("span", { className: "fd-sr", children: " " + m.label })
@@ -4836,7 +4950,7 @@ function EntityRow({
 }
 
 // src/components/data/TransferList.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/components/forms/Input.tsx
@@ -4942,12 +5056,12 @@ function TransferList({
   listHeight = 440,
   className = ""
 }) {
-  const [drag, setDrag] = React32.useState(null);
-  const [dragOverSide, setDragOverSide] = React32.useState(null);
-  const dragRef = React32.useRef(null);
-  const armedRef = React32.useRef(null);
-  const sideRefs = React32.useRef({ left: null, right: null });
-  const hitTestSide = React32.useCallback((x, y) => {
+  const [drag, setDrag] = React33.useState(null);
+  const [dragOverSide, setDragOverSide] = React33.useState(null);
+  const dragRef = React33.useRef(null);
+  const armedRef = React33.useRef(null);
+  const sideRefs = React33.useRef({ left: null, right: null });
+  const hitTestSide = React33.useCallback((x, y) => {
     for (const side of ["left", "right"]) {
       const el = sideRefs.current[side];
       if (!el) continue;
@@ -4956,7 +5070,7 @@ function TransferList({
     }
     return null;
   }, []);
-  const findItem = React32.useCallback(
+  const findItem = React33.useCallback(
     (side, key) => (side === "left" ? left.items : right.items).find((it) => keyOf(it) === key),
     [left.items, right.items, keyOf]
   );
@@ -4978,7 +5092,7 @@ function TransferList({
       height: rect.height
     };
   };
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     const onMovePointer = (e) => {
       const armed = armedRef.current;
       if (!armed || e.pointerId !== armed.pointerId) return;
@@ -5031,7 +5145,7 @@ function TransferList({
       window.removeEventListener("pointercancel", endDrag);
     };
   }, [hitTestSide, findItem, onMove]);
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     if (!drag || typeof document === "undefined") return;
     const prev = document.body.style.userSelect;
     document.body.style.userSelect = "none";
@@ -5139,11 +5253,11 @@ function TransferList({
 }
 
 // src/components/forms/Checkbox.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
 function Checkbox({ label, description, card = false, indeterminate = false, className = "", ...rest }) {
-  const ref = React33.useRef(null);
-  React33.useEffect(() => {
+  const ref = React34.useRef(null);
+  React34.useEffect(() => {
     if (ref.current) ref.current.indeterminate = indeterminate;
   }, [indeterminate]);
   return /* @__PURE__ */ jsxs53("label", { className: ["fd-choice", card ? "fd-choice-card" : "", className].filter(Boolean).join(" "), children: [
@@ -5187,7 +5301,7 @@ function Switch({ label, description, className = "", ...rest }) {
 }
 
 // src/components/forms/Select.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 import { jsx as jsx62, jsxs as jsxs56 } from "react/jsx-runtime";
 var norm = (o) => typeof o === "string" ? { value: o, label: o } : o;
 function Select({
@@ -5214,13 +5328,12 @@ function Select({
   const isOn = (v) => multiple ? vals.includes(v) : v === value;
   const hasSearch = searchable === void 0 ? opts.length > 8 : searchable;
   const { fieldId, labelId, ariaLabelledBy } = useTriggerLabelling(label, id);
-  const [open, setOpen] = React34.useState(false);
-  const [q, setQ] = React34.useState("");
-  const [active, setActive] = React34.useState(-1);
-  const rootRef = React34.useRef(null);
-  const boxRef = React34.useRef(null);
-  const listRef = React34.useRef(null);
-  const typeBuf = React34.useRef({ s: "", t: 0 });
+  const [open, setOpen] = React35.useState(false);
+  const [q, setQ] = React35.useState("");
+  const rootRef = React35.useRef(null);
+  const boxRef = React35.useRef(null);
+  const listRef = React35.useRef(null);
+  const typeBuf = React35.useRef({ s: "", t: 0 });
   const selected = multiple ? null : opts.find((o) => o.value === value);
   const chosen = multiple ? opts.filter((o) => vals.includes(o.value)) : [];
   const boxText = multiple ? chosen.length === 0 ? placeholder : chosen.length === 1 ? chosen[0].label : summary ? summary(chosen.map((o) => o.value)) : chosen.length + " selected" : selected ? selected.label : placeholder;
@@ -5237,23 +5350,16 @@ function Select({
     fire(o.value);
     setOpen(false);
   };
+  const nav = useListboxNav({ count: visible.length, onSelect: (i) => pick(visible[i]) });
+  useListboxScrollIntoView(nav.active, listRef, open);
   const toggle = () => {
     if (disabled || loading) return;
     if (!open) {
       setQ("");
-      setActive(Math.max(0, opts.findIndex((o) => isOn(o.value))));
+      nav.setActive(Math.max(0, opts.findIndex((o) => isOn(o.value))));
     }
     setOpen(!open);
   };
-  React34.useEffect(() => {
-    if (!open || active < 0 || !listRef.current) return;
-    const el = listRef.current.querySelector('[data-i="' + active + '"]');
-    if (el) {
-      const L = listRef.current, top = el.offsetTop - L.offsetTop;
-      if (top < L.scrollTop) L.scrollTop = top - 4;
-      else if (top + el.offsetHeight > L.scrollTop + L.clientHeight) L.scrollTop = top + el.offsetHeight - L.clientHeight + 4;
-    }
-  }, [active, open]);
   const onKey = (e) => {
     if (disabled) return;
     if (!open && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp")) {
@@ -5275,19 +5381,19 @@ function Select({
       setOpen(false);
     } else if (e.key === "ArrowDown") {
       e.preventDefault();
-      setActive((a) => Math.min(visible.length - 1, a + 1));
+      nav.move(1);
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      setActive((a) => Math.max(0, a - 1));
+      nav.move(-1);
     } else if (e.key === "Home") {
       e.preventDefault();
-      setActive(0);
+      nav.first();
     } else if (e.key === "End") {
       e.preventDefault();
-      setActive(visible.length - 1);
+      nav.last();
     } else if (e.key === "Enter") {
       e.preventDefault();
-      if (visible[active]) pick(visible[active]);
+      nav.activate();
     } else if (e.key === "Tab") setOpen(false);
   };
   const groups = [];
@@ -5360,13 +5466,13 @@ function Select({
               onKeyDown: onKey,
               onChange: (e) => {
                 setQ(e.target.value);
-                setActive(0);
+                nav.setActive(0);
               }
             }
           ),
           q ? /* @__PURE__ */ jsx62("span", { className: "fd-body-sm fd-muted", children: visible.length }) : null
         ] }) : void 0,
-        footer: multiple ? /* @__PURE__ */ jsxs56(React34.Fragment, { children: [
+        footer: multiple ? /* @__PURE__ */ jsxs56(React35.Fragment, { children: [
           /* @__PURE__ */ jsx62(
             "button",
             {
@@ -5397,7 +5503,7 @@ function Select({
           'Nothing matches "',
           q,
           '".'
-        ] }) : groups.map((grp) => /* @__PURE__ */ jsxs56(React34.Fragment, { children: [
+        ] }) : groups.map((grp) => /* @__PURE__ */ jsxs56(React35.Fragment, { children: [
           grp.g ? /* @__PURE__ */ jsx62("div", { className: "fd-pop-group", children: grp.g }) : null,
           grp.items.map(({ o, i }) => /* @__PURE__ */ jsxs56(
             "button",
@@ -5407,8 +5513,8 @@ function Select({
               role: "option",
               "aria-selected": isOn(o.value),
               "aria-disabled": o.disabled || void 0,
-              className: ["fd-opt", i === active ? "is-active" : "", isOn(o.value) ? "is-selected" : ""].filter(Boolean).join(" "),
-              onMouseEnter: () => setActive(i),
+              className: ["fd-opt", i === nav.active ? "is-active" : "", isOn(o.value) ? "is-selected" : ""].filter(Boolean).join(" "),
+              onMouseEnter: () => nav.setActive(i),
               onClick: () => pick(o),
               children: [
                 multiple ? /* @__PURE__ */ jsx62("span", { "aria-hidden": "true", style: { flex: "none", display: "grid", placeItems: "center", width: 16, height: 16, borderRadius: 4, border: "1.5px solid " + (isOn(o.value) ? "var(--brand)" : "var(--border-strong, var(--border))"), background: isOn(o.value) ? "var(--brand)" : "var(--surface)", color: "#fff" }, children: isOn(o.value) ? /* @__PURE__ */ jsx62("i", { className: "ph ph-check", style: { fontSize: 11 } }) : null }) : null,
@@ -5434,7 +5540,7 @@ function Select({
 }
 
 // src/components/forms/TimePicker.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 import { jsx as jsx63, jsxs as jsxs57 } from "react/jsx-runtime";
 var pad = (n) => String(n).padStart(2, "0");
 function ClockFace({ value = "09:00", onChange }) {
@@ -5443,9 +5549,9 @@ function ClockFace({ value = "09:00", onChange }) {
   if (isNaN(m)) m = 0;
   const pm = h24 >= 12;
   const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
-  const [mode2, setMode] = React35.useState("h");
-  const faceRef = React35.useRef(null);
-  const dragging = React35.useRef(false);
+  const [mode2, setMode] = React36.useState("h");
+  const faceRef = React36.useRef(null);
+  const dragging = React36.useRef(false);
   const set = (h, mm, isPm) => onChange((isPm ? h % 12 + 12 : h % 12) + ":" + pad(mm));
   const R = 108, NR = 80;
   const nums = mode2 === "h" ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 12 }, (_, i) => i * 5);
@@ -5518,9 +5624,9 @@ function ClockFace({ value = "09:00", onChange }) {
 }
 function TimePicker({ label, help, error, required = false, disabled = false, value = "", onChange, placeholder = "Pick a time", id, className = "", style }) {
   const { fieldId, labelId, ariaLabelledBy } = useTriggerLabelling(label, id);
-  const [open, setOpen] = React35.useState(false);
-  const rootRef = React35.useRef(null);
-  const boxRef = React35.useRef(null);
+  const [open, setOpen] = React36.useState(false);
+  const rootRef = React36.useRef(null);
+  const boxRef = React36.useRef(null);
   const disp = () => {
     if (!value) return "";
     const [h, m] = value.split(":").map(Number);
@@ -5563,7 +5669,7 @@ function TimePicker({ label, help, error, required = false, disabled = false, va
         offset: 6,
         width: 262,
         role: "presentation",
-        footer: /* @__PURE__ */ jsxs57(React35.Fragment, { children: [
+        footer: /* @__PURE__ */ jsxs57(React36.Fragment, { children: [
           /* @__PURE__ */ jsx63(
             "button",
             {
@@ -5591,7 +5697,7 @@ function TimePicker({ label, help, error, required = false, disabled = false, va
 }
 
 // src/components/forms/Slider.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import { jsx as jsx64, jsxs as jsxs58 } from "react/jsx-runtime";
 function Slider({
   label,
@@ -5609,7 +5715,7 @@ function Slider({
   ...rest
 }) {
   const fieldId = useFieldId(id);
-  const [dragging, setDragging] = React36.useState(false);
+  const [dragging, setDragging] = React37.useState(false);
   const v = value === void 0 ? min : Number(value);
   const pct = max === min ? 0 : (v - min) / (max - min) * 100;
   return /* @__PURE__ */ jsxs58("div", { className: ["fd-field", className].filter(Boolean).join(" "), children: [
@@ -5643,7 +5749,7 @@ function Slider({
 }
 
 // src/components/forms/RangeSlider.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 import { jsx as jsx65, jsxs as jsxs59 } from "react/jsx-runtime";
 function RangeSlider({
   label,
@@ -5663,9 +5769,9 @@ function RangeSlider({
 }) {
   const fmt2 = format || ((v) => String(v));
   const [a, b] = value || [min, max];
-  const [drag, setDrag] = React37.useState(null);
-  const [focus, setFocus] = React37.useState(null);
-  const railRef = React37.useRef(null);
+  const [drag, setDrag] = React38.useState(null);
+  const [focus, setFocus] = React38.useState(null);
+  const railRef = React38.useRef(null);
   const pct = (v) => max === min ? 0 : (v - min) / (max - min) * 100;
   const clampPair = (i, v) => {
     v = Math.min(max, Math.max(min, Math.round(v / step) * step));
@@ -5680,7 +5786,7 @@ function RangeSlider({
     const r = railRef.current.getBoundingClientRect();
     return min + Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * (max - min);
   };
-  React37.useEffect(() => {
+  React38.useEffect(() => {
     if (drag === null) return;
     const mv = (e) => onChange && onChange(clampPair(drag, fromEvent(e)));
     const upH = () => setDrag(null);
@@ -5761,7 +5867,7 @@ function RangeSlider({
     /* @__PURE__ */ jsxs59("div", { className: "fd-range" + (hasLabels ? " has-labels" : ""), onPointerDown: onRailDown, children: [
       /* @__PURE__ */ jsx65("span", { className: "fd-range-rail", ref: railRef }),
       /* @__PURE__ */ jsx65("span", { className: "fd-range-fill", style: { left: pct(a) + "%", width: pct(b) - pct(a) + "%" } }),
-      marks.map((m) => /* @__PURE__ */ jsxs59(React37.Fragment, { children: [
+      marks.map((m) => /* @__PURE__ */ jsxs59(React38.Fragment, { children: [
         /* @__PURE__ */ jsx65("span", { className: "fd-range-mark" + (m.value >= a && m.value <= b ? " is-in" : ""), style: { left: pct(m.value) + "%" } }),
         m.label ? /* @__PURE__ */ jsx65("span", { className: "fd-range-mark-label", style: { left: pct(m.value) + "%" }, children: m.label }) : null
       ] }, m.value)),
@@ -5790,7 +5896,7 @@ function RangeSlider({
 }
 
 // src/components/forms/Dropzone.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { jsx as jsx66, jsxs as jsxs60 } from "react/jsx-runtime";
 function Dropzone({
   onFiles,
@@ -5805,8 +5911,8 @@ function Dropzone({
   className = "",
   style
 }) {
-  const [over, setOver] = React38.useState(false);
-  const depth = React38.useRef(0);
+  const [over, setOver] = React39.useState(false);
+  const depth = React39.useRef(0);
   const has = (e) => {
     const dt = e.dataTransfer;
     if (!dt) return false;
@@ -5868,8 +5974,8 @@ function FilePickButton({
   className = "",
   children
 }) {
-  const ref = React38.useRef(null);
-  return /* @__PURE__ */ jsxs60(React38.Fragment, { children: [
+  const ref = React39.useRef(null);
+  return /* @__PURE__ */ jsxs60(React39.Fragment, { children: [
     /* @__PURE__ */ jsx66(
       "button",
       {
@@ -5902,10 +6008,10 @@ function FilePickButton({
 }
 function useStagedFiles(upload, opts) {
   const o = opts || {};
-  const [items, setItems] = React38.useState([]);
-  const controllers = React38.useRef({});
+  const [items, setItems] = React39.useState([]);
+  const controllers = React39.useRef({});
   const patch = (id, next) => setItems((list) => list.map((f) => f.id === id ? Object.assign({}, f, next) : f));
-  const run = React38.useCallback((att) => {
+  const run = React39.useCallback((att) => {
     if (!upload) return;
     const ac = typeof AbortController !== "undefined" ? new AbortController() : null;
     controllers.current[att.id] = ac;
@@ -5922,14 +6028,14 @@ function useStagedFiles(upload, opts) {
       delete controllers.current[att.id];
     });
   }, [upload]);
-  const add = React38.useCallback((files) => {
+  const add = React39.useCallback((files) => {
     if (!upload) return [];
     const atts = Array.from(files).map((f) => toAttachment(f));
     setItems((list) => list.concat(atts));
     atts.forEach(run);
     return atts;
   }, [upload, run]);
-  const remove = React38.useCallback((att) => {
+  const remove = React39.useCallback((att) => {
     const ac = controllers.current[att.id];
     if (ac) {
       try {
@@ -5940,10 +6046,10 @@ function useStagedFiles(upload, opts) {
     }
     setItems((list) => list.filter((f) => f.id !== att.id));
   }, []);
-  const retry = React38.useCallback((att) => {
+  const retry = React39.useCallback((att) => {
     run(att);
   }, [run]);
-  const clear = React38.useCallback(() => {
+  const clear = React39.useCallback(() => {
     Object.values(controllers.current).forEach((ac) => {
       try {
         ac && ac.abort();
@@ -6067,7 +6173,7 @@ function FileGrid({ files = [], onOpen, onRemove, onRetry, tiles = true, maxHeig
 }
 
 // src/components/forms/MarkdownEditor.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 import { jsx as jsx68, jsxs as jsxs62 } from "react/jsx-runtime";
 var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || "");
 var INLINE_RE = /(\*\*\*[^*\n]+\*\*\*|\*\*[^*\n]+\*\*|__[^_\n]+__|~~[^~\n]+~~|`[^`\n]+`|\*[^*\s][^*\n]*\*|(?<![A-Za-z0-9_])_[^_\s][^_\n]*_|\[[^\]\n]*\]\([^)\s\n]*\)|https?:\/\/\S+)/g;
@@ -6281,7 +6387,7 @@ function syncDom(root, value) {
   while (root.children.length > lines.length) root.removeChild(root.lastChild);
 }
 var LIST_CONT = RE_LI;
-var MarkdownEditor = React39.forwardRef(function MarkdownEditor2({
+var MarkdownEditor = React40.forwardRef(function MarkdownEditor2({
   value = "",
   onChange,
   onSubmit,
@@ -6300,10 +6406,10 @@ var MarkdownEditor = React39.forwardRef(function MarkdownEditor2({
   className = "",
   id
 }, ref) {
-  const boxRef = React39.useRef(null);
-  const composing = React39.useRef(false);
-  const pendingCaret = React39.useRef(null);
-  React39.useLayoutEffect(() => {
+  const boxRef = React40.useRef(null);
+  const composing = React40.useRef(false);
+  const pendingCaret = React40.useRef(null);
+  React40.useLayoutEffect(() => {
     const root = boxRef.current;
     if (!root || composing.current) return;
     const active = document.activeElement === root || root.contains(document.activeElement);
@@ -6312,7 +6418,7 @@ var MarkdownEditor = React39.forwardRef(function MarkdownEditor2({
     pendingCaret.current = null;
     if (active && caret != null) placeCaret(root, caret);
   }, [value]);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (autoFocus && boxRef.current) boxRef.current.focus();
   }, [autoFocus]);
   const caretNow = () => {
@@ -6379,7 +6485,7 @@ var MarkdownEditor = React39.forwardRef(function MarkdownEditor2({
       api.replaceRange(from, to, next, from + next.length);
     }
   };
-  React39.useImperativeHandle(ref, () => api);
+  React40.useImperativeHandle(ref, () => api);
   function detect(text, caret) {
     if (!onTrigger) return;
     const upto = text.slice(0, caret);
@@ -6531,16 +6637,16 @@ var MarkdownEditor = React39.forwardRef(function MarkdownEditor2({
 });
 
 // src/components/platform/AccountMenu.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 
 // src/kits/sessionContext.tsx
-import * as React40 from "react";
-var SessionContext = React40.createContext(null);
+import * as React41 from "react";
+var SessionContext = React41.createContext(null);
 function SessionProvider({ value, children }) {
-  return React40.createElement(SessionContext.Provider, { value }, children);
+  return React41.createElement(SessionContext.Provider, { value }, children);
 }
 function useSessionContext() {
-  const ctx = React40.useContext(SessionContext);
+  const ctx = React41.useContext(SessionContext);
   if (!ctx) {
     throw new Error(
       "useSessionContext() was called outside a <SessionProvider>. Wrap your app root in <SessionProvider value={...}> with your real session, or \u2014 in the docs site or a demo \u2014 in <DemoSessionProvider>, before rendering AccountMenu, Gate, ProfilePage or AppSwitcher."
@@ -6580,11 +6686,11 @@ function AccountMenu({
   ...rest
 }) {
   const { user, roles, can: can2, signOut: ctxSignOut, demo } = useSessionContext();
-  const [open, setOpen] = React41.useState(false);
-  const [switching, setSwitching] = React41.useState(false);
-  const [signingOut, setSigningOut] = React41.useState(false);
-  const [signOutError, setSignOutError] = React41.useState(null);
-  const ref = React41.useRef(null);
+  const [open, setOpen] = React42.useState(false);
+  const [switching, setSwitching] = React42.useState(false);
+  const [signingOut, setSigningOut] = React42.useState(false);
+  const [signOutError, setSignOutError] = React42.useState(null);
+  const ref = React42.useRef(null);
   const visibleLinks = links.filter((l) => !l.perm || can2(l.perm));
   const visibleGroups = groups.map((g) => ({ label: g.label, links: g.links.filter((l) => !l.perm || can2(l.perm)) })).filter((g) => g.links.length);
   const closeMenu = () => {
@@ -6709,13 +6815,13 @@ function AccountMenu({
 }
 
 // src/components/platform/AppSwitcher.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import { jsx as jsx70, jsxs as jsxs64 } from "react/jsx-runtime";
 function AppSwitcher({ apps: appsProp, onNavigate, className = "" }) {
   const { apps: contextApps } = useSessionContext();
   const apps = appsProp ?? contextApps ?? [];
-  const [open, setOpen] = React42.useState(false);
-  const anchorRef = React42.useRef(null);
+  const [open, setOpen] = React43.useState(false);
+  const anchorRef = React43.useRef(null);
   if (!apps.length) return null;
   const items = apps.map((app) => ({
     id: app.key,
@@ -6729,7 +6835,7 @@ function AppSwitcher({ apps: appsProp, onNavigate, className = "" }) {
       window.location.href = app.url;
     }
   }));
-  return /* @__PURE__ */ jsxs64(React42.Fragment, { children: [
+  return /* @__PURE__ */ jsxs64(React43.Fragment, { children: [
     /* @__PURE__ */ jsx70("span", { ref: anchorRef, className: ["fd-appswitch-anchor", className].filter(Boolean).join(" "), style: { display: "inline-flex" }, children: /* @__PURE__ */ jsx70(
       IconButton,
       {
@@ -6758,10 +6864,10 @@ function AppSwitcher({ apps: appsProp, onNavigate, className = "" }) {
 }
 
 // src/components/platform/AppearanceMenu.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 
 // src/kits/appearance.ts
-import * as React43 from "react";
+import * as React44 from "react";
 var DEFAULT_STORAGE_KEY = "fd-appearance";
 var DEFAULT_PREFS = {
   theme: "system",
@@ -6856,11 +6962,11 @@ function applyPrefs(prefs, root = document.documentElement) {
   else root.removeAttribute("data-motion");
 }
 function useAppearancePrefs(store) {
-  const prefs = React43.useSyncExternalStore(store.subscribe, store.getSnapshot);
-  React43.useEffect(() => {
+  const prefs = React44.useSyncExternalStore(store.subscribe, store.getSnapshot);
+  React44.useEffect(() => {
     applyPrefs(prefs);
   }, [prefs]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (prefs.theme !== "system" || typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return;
     }
@@ -6869,7 +6975,7 @@ function useAppearancePrefs(store) {
     mq.addEventListener("change", onChange);
     return () => mq.removeEventListener("change", onChange);
   }, [prefs]);
-  const update = React43.useCallback(
+  const update = React44.useCallback(
     (patch) => {
       store.write({ ...store.getSnapshot(), ...patch });
     },
@@ -6892,15 +6998,15 @@ var TEXT_SCALE_OPTIONS = [
   { value: "xl", label: "XL" }
 ];
 function AppearanceMenu({ className = "", store: storeProp, storageKey, storage, defaults }) {
-  const store = React44.useMemo(
+  const store = React45.useMemo(
     () => storeProp ?? createLocalStorageAppearanceStore({ storageKey, storage, defaults }),
     [storeProp, storageKey, storage, defaults]
   );
   const [prefs, update] = useAppearancePrefs(store);
-  const [open, setOpen] = React44.useState(false);
-  const anchorRef = React44.useRef(null);
+  const [open, setOpen] = React45.useState(false);
+  const anchorRef = React45.useRef(null);
   const patch = (p) => update(p);
-  return /* @__PURE__ */ jsxs65(React44.Fragment, { children: [
+  return /* @__PURE__ */ jsxs65(React45.Fragment, { children: [
     /* @__PURE__ */ jsx71("span", { ref: anchorRef, className: ["fd-appearance-anchor", className].filter(Boolean).join(" "), style: { display: "inline-flex" }, children: /* @__PURE__ */ jsx71(
       IconButton,
       {
@@ -6969,14 +7075,14 @@ function AppearanceMenu({ className = "", store: storeProp, storageKey, storage,
 }
 
 // src/components/platform/ApiSpecBrowser.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 import { jsx as jsx72, jsxs as jsxs66 } from "react/jsx-runtime";
 var METHOD_TONE = { GET: "success", POST: "info", PATCH: "warning", PUT: "warning", DELETE: "danger" };
 function Json({ obj }) {
   return /* @__PURE__ */ jsx72("pre", { className: "fd-json", children: JSON.stringify(obj, null, 2) });
 }
 function Endpoint({ s, onRequest }) {
-  const [tried, setTried] = React45.useState(null);
+  const [tried, setTried] = React46.useState(null);
   const run = async () => {
     setTried("busy");
     const t0 = (window.performance || Date).now();
@@ -7049,10 +7155,10 @@ function ApiSpecBrowser({
   className = "",
   ...rest
 }) {
-  const [q, setQ] = React45.useState("");
-  const [method, setMethod] = React45.useState(null);
-  const [mod, setMod] = React45.useState(null);
-  const [listOnly, setListOnly] = React45.useState(false);
+  const [q, setQ] = React46.useState("");
+  const [method, setMethod] = React46.useState(null);
+  const [mod, setMod] = React46.useState(null);
+  const [listOnly, setListOnly] = React46.useState(false);
   const activeModule = modules && modules.find((m) => m.id === mod);
   const hits = spec.filter((s) => (!method || s.method === method) && (!listOnly || s.isList) && (!activeModule || activeModule.endpoints.indexOf(s.id) >= 0) && (!q || (s.path + " " + s.title + " " + s.purpose + " " + (s.usedBy || []).join(" ")).toLowerCase().includes(q.toLowerCase())));
   const effGroups = groups && groups.length ? groups : [["All endpoints", spec.map((s) => s.id)]];
@@ -7131,7 +7237,7 @@ function ApiSpecBrowser({
 }
 
 // src/components/platform/ProfilePage.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import { jsx as jsx73, jsxs as jsxs67 } from "react/jsx-runtime";
 function fieldInitialValue(field, user) {
   if (field.value) return field.value(user);
@@ -7167,21 +7273,21 @@ function ProfilePage({
 }) {
   const { user: sessionUser, roles, permissions, saveProfile: saveProfile2 } = useSessionContext();
   const user = userProp || sessionUser;
-  const initialFieldValues = React46.useMemo(() => {
+  const initialFieldValues = React47.useMemo(() => {
     const values2 = {};
     for (const field of fields) values2[field.key] = fieldInitialValue(field, user);
     return values2;
   }, [user.id, fields]);
-  const initialNotify = React46.useMemo(() => {
+  const initialNotify = React47.useMemo(() => {
     const values2 = {};
     for (const n of notifications) values2[n.key] = !!user.notify?.[n.key];
     return values2;
   }, [user.id, notifications]);
-  const [values, setValues] = React46.useState(initialFieldValues);
-  const [notify, setNotify] = React46.useState(initialNotify);
-  const [saving, setSaving] = React46.useState(false);
-  const [saved, setSaved] = React46.useState(false);
-  const [prevUserId, setPrevUserId] = React46.useState(user.id);
+  const [values, setValues] = React47.useState(initialFieldValues);
+  const [notify, setNotify] = React47.useState(initialNotify);
+  const [saving, setSaving] = React47.useState(false);
+  const [saved, setSaved] = React47.useState(false);
+  const [prevUserId, setPrevUserId] = React47.useState(user.id);
   if (user.id !== prevUserId) {
     setPrevUserId(user.id);
     setValues(initialFieldValues);
@@ -7369,11 +7475,11 @@ function ProfilePage({
 }
 
 // src/components/platform/SignInPage.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 import { Fragment as Fragment18, jsx as jsx74, jsxs as jsxs68 } from "react/jsx-runtime";
 function SignInPage({ productName, onSignIn, continueAs, error }) {
-  const [signingIn, setSigningIn] = React47.useState(false);
-  const [resuming, setResuming] = React47.useState(false);
+  const [signingIn, setSigningIn] = React48.useState(false);
+  const [resuming, setResuming] = React48.useState(false);
   function handleSignIn() {
     setSigningIn(true);
     onSignIn();
@@ -7562,10 +7668,10 @@ function GoogleGlyph() {
 }
 
 // src/components/platform/RoadmapTimeline.tsx
-import * as React50 from "react";
+import * as React51 from "react";
 
 // src/kits/session.ts
-import * as React48 from "react";
+import * as React49 from "react";
 var PERMISSION_CATALOG = [
   { group: "Plans", items: [
     { key: "plan.view", label: "View plans", detail: "Read any plan in the workspace." },
@@ -9132,8 +9238,8 @@ function roadmap(overrides) {
   };
 }
 function useSession() {
-  const [s, setS] = React48.useState(getSession);
-  React48.useEffect(() => subscribe(setS), []);
+  const [s, setS] = React49.useState(getSession);
+  React49.useEffect(() => subscribe(setS), []);
   return s;
 }
 var SessionKit = {
@@ -9166,7 +9272,7 @@ var SessionKit = {
 };
 function DemoSessionProvider({ children }) {
   const session = useSession();
-  const value = React48.useMemo(
+  const value = React49.useMemo(
     () => ({
       user: session.user,
       roles: session.roles,
@@ -9182,11 +9288,11 @@ function DemoSessionProvider({ children }) {
     }),
     [session]
   );
-  return React48.createElement(SessionProvider, { value }, children);
+  return React49.createElement(SessionProvider, { value }, children);
 }
 
 // src/kits/runtime.ts
-import * as React49 from "react";
+import * as React50 from "react";
 var WIRED_ENDPOINTS = [
   // Nothing yet. Every id below would come from a real service:
   //   "plan.get", "placements.list", …
@@ -9357,8 +9463,8 @@ var RuntimeKit = {
 };
 RuntimeKit.declare(FEATURE_NEEDS);
 function useRuntimeMode() {
-  const [m, setM] = React49.useState(RuntimeKit.getMode());
-  React49.useEffect(() => RuntimeKit.subscribe(setM), []);
+  const [m, setM] = React50.useState(RuntimeKit.getMode());
+  React50.useEffect(() => RuntimeKit.subscribe(setM), []);
   return m;
 }
 function useFeatureStatus(key) {
@@ -9441,12 +9547,12 @@ function RoadmapCard({ item, byKey, onOpenFlag }) {
 }
 function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
   const session = SessionKit.useSession();
-  const [project, setProject] = React50.useState("");
-  const [q, setQ] = React50.useState("");
-  const scrollRef = React50.useRef(null);
-  const nowRef = React50.useRef(null);
-  const rm = React50.useMemo(() => SessionKit.roadmap({ isComplete: RuntimeKit.isComplete }), [session]);
-  const byKey = React50.useMemo(() => {
+  const [project, setProject] = React51.useState("");
+  const [q, setQ] = React51.useState("");
+  const scrollRef = React51.useRef(null);
+  const nowRef = React51.useRef(null);
+  const rm = React51.useMemo(() => SessionKit.roadmap({ isComplete: RuntimeKit.isComplete }), [session]);
+  const byKey = React51.useMemo(() => {
     const m = {};
     rm.items.forEach((i) => {
       m[i.key] = i;
@@ -9455,7 +9561,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
   }, [rm]);
   const items = rm.items.filter((i) => (!project || i.project === project) && (!q || (i.label + " " + i.description + " " + (i.backend || "") + " " + i.key).toLowerCase().includes(q.toLowerCase())));
   const projects = [...new Set(rm.items.map((i) => i.project))];
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     let raf1 = 0, raf2 = 0;
     const place = () => {
       const box = scrollRef.current, mark = nowRef.current;
@@ -9529,7 +9635,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
         lastPhase = item.phase;
         const inPhase = items.filter((i) => i.phase === item.phase).length;
         const isBoundary = n === firstPending;
-        return /* @__PURE__ */ jsxs69(React50.Fragment, { children: [
+        return /* @__PURE__ */ jsxs69(React51.Fragment, { children: [
           showPhase ? /* @__PURE__ */ jsxs69("div", { className: "fd-rm-era", children: [
             /* @__PURE__ */ jsxs69("span", { className: "fd-row", style: { gap: 8, flexWrap: "wrap", alignItems: "baseline" }, children: [
               /* @__PURE__ */ jsx75("span", { style: { fontWeight: 700 }, children: item.phase === 0 ? "Shipped" : "Phase " + item.phase + " \u2014 " + item.phaseName }),
@@ -9573,7 +9679,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 }
 
 // src/components/platform/ComingSoon.tsx
-import * as React51 from "react";
+import * as React52 from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { Fragment as Fragment20, jsx as jsx76, jsxs as jsxs70 } from "react/jsx-runtime";
 var BYPASS_STORE = "fd.soon.bypass.v1";
@@ -9591,8 +9697,8 @@ function writeBypassed(list) {
   }
 }
 function useBypass(key) {
-  const [on, setOn] = React51.useState(() => !!key && readBypassed().indexOf(key) >= 0);
-  React51.useEffect(() => {
+  const [on, setOn] = React52.useState(() => !!key && readBypassed().indexOf(key) >= 0);
+  React52.useEffect(() => {
     setOn(!!key && readBypassed().indexOf(key) >= 0);
   }, [key]);
   const set = (next) => {
@@ -9639,9 +9745,9 @@ function SoonCard({ label, detail, backend, eta, effort, onRoadmap, allowed, onB
   ] });
 }
 function useHoverCard(open) {
-  const anchor = React51.useRef(null);
-  const [pos, setPos] = React51.useState(null);
-  React51.useLayoutEffect(() => {
+  const anchor = React52.useRef(null);
+  const [pos, setPos] = React52.useState(null);
+  React52.useLayoutEffect(() => {
     if (!open || !anchor.current) {
       setPos(null);
       return;
@@ -9768,10 +9874,10 @@ function ComingSoon({
   ] });
 }
 function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass, blur, tip, className, rest, children }) {
-  const [open, setOpen] = React51.useState(false);
+  const [open, setOpen] = React52.useState(false);
   const [anchor, pos] = useHoverCard(open);
   const zIndex = useOverlayLayer(open);
-  const close = React51.useRef(null);
+  const close = React52.useRef(null);
   const show = () => {
     if (close.current) {
       clearTimeout(close.current);
@@ -9787,7 +9893,7 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
       setOpen(false);
     }, 140);
   };
-  React51.useEffect(() => () => {
+  React52.useEffect(() => () => {
     if (close.current) clearTimeout(close.current);
   }, []);
   return /* @__PURE__ */ jsxs70(
@@ -9958,14 +10064,14 @@ function PermissionHint({ perm, children }) {
 }
 
 // src/components/platform/ModeSwitch.tsx
-import * as React52 from "react";
+import * as React53 from "react";
 import { Fragment as Fragment21, jsx as jsx78, jsxs as jsxs72 } from "react/jsx-runtime";
 function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog, onOpenSpec, summary }) {
   const mode2 = useRuntimeMode();
-  const [open, setOpen] = React52.useState(false);
+  const [open, setOpen] = React53.useState(false);
   const zIndex = useOverlayLayer(open);
-  const ref = React52.useRef(null);
-  React52.useEffect(() => {
+  const ref = React53.useRef(null);
+  React53.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -10221,7 +10327,7 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
 }
 
 // src/components/planner/MixGap.tsx
-import * as React53 from "react";
+import * as React54 from "react";
 import { Fragment as Fragment22, jsx as jsx81, jsxs as jsxs75 } from "react/jsx-runtime";
 var MIX_GAP_LAYOUT = {
   trackHeight: 30,
@@ -10236,7 +10342,7 @@ function mixGapOffset(value, max) {
 }
 function MixGap({ rows = [], loading = false, className = "" }) {
   const max = Math.max(1, ...rows.flatMap((r) => [r.target, r.realized]));
-  const [hover, setHover] = React53.useState(null);
+  const [hover, setHover] = React54.useState(null);
   const toneOf = (gap) => gap >= -1 ? "ok" : gap >= -4 ? "warn" : "danger";
   const TONE = { ok: "var(--ok-solid)", warn: "var(--warn-solid)", danger: "var(--danger-solid)" };
   const { trackHeight, barHeight, targetWidth, labelGap } = MIX_GAP_LAYOUT;
@@ -10379,7 +10485,7 @@ function ChannelContribution({
 }
 
 // src/components/planner/BudgetReallocator.tsx
-import * as React54 from "react";
+import * as React55 from "react";
 import { Fragment as Fragment23, jsx as jsx83, jsxs as jsxs77 } from "react/jsx-runtime";
 var bandFor = (crp) => crp >= 200 ? "dominant" : crp >= 100 ? "strong" : crp >= 50 ? "adequate" : "weak";
 function BudgetReallocator({
@@ -10395,8 +10501,8 @@ function BudgetReallocator({
   onCancel,
   className = ""
 }) {
-  const [draft, setDraft] = React54.useState(spend);
-  React54.useEffect(() => setDraft(spend), [spend]);
+  const [draft, setDraft] = React55.useState(spend);
+  React55.useEffect(() => setDraft(spend), [spend]);
   const dirty = draft !== spend;
   const nextCrp = scoreFor ? scoreFor(draft) : crp;
   const nextBand = bandFor(nextCrp);
@@ -10411,10 +10517,10 @@ function BudgetReallocator({
     setDraft(spend);
     if (onCancel) onCancel();
   };
-  const trackRef = React54.useRef(null);
-  const chipRef = React54.useRef(null);
-  const [chipLeft, setChipLeft] = React54.useState(null);
-  React54.useLayoutEffect(() => {
+  const trackRef = React55.useRef(null);
+  const chipRef = React55.useRef(null);
+  const [chipLeft, setChipLeft] = React55.useState(null);
+  React55.useLayoutEffect(() => {
     const track = trackRef.current;
     if (!dirty || !track) {
       setChipLeft(null);
@@ -10601,7 +10707,7 @@ function ImportanceTag({ level, showLabel = true, size = "sm", className = "" })
 }
 
 // src/components/planner/PreferenceMeter.tsx
-import * as React55 from "react";
+import * as React56 from "react";
 import { jsx as jsx86, jsxs as jsxs80 } from "react/jsx-runtime";
 function preferenceScore(criteria) {
   const earned = criteria.reduce((n, c) => n + (Number(c.earned) || 0), 0);
@@ -10631,7 +10737,7 @@ function PreferenceMeter({
   className = ""
 }) {
   const value = score == null ? preferenceScore(criteria) : score;
-  const segments = React55.useMemo(() => preferenceSegments(criteria), [criteria]);
+  const segments = React56.useMemo(() => preferenceSegments(criteria), [criteria]);
   return /* @__PURE__ */ jsx86(
     ScoreMeter,
     {
@@ -10670,10 +10776,10 @@ function PreferenceMeter({
 }
 
 // src/components/chat/AgentChatPanel.tsx
-import * as React61 from "react";
+import * as React62 from "react";
 
 // src/components/chat/chatEngine.ts
-import * as React56 from "react";
+import * as React57 from "react";
 var CHAT_UNAVAILABLE = "chat_unavailable";
 var JOB_PENDING = ["queued", "running"];
 var JOB_SUCCESS = ["completed", "recovered"];
@@ -10727,22 +10833,22 @@ function useChatEngine(opts) {
     onClear,
     onFeedback
   } = opts || {};
-  const [status, setStatus] = React56.useState("idle");
-  const [threadId, setThreadId] = React56.useState(null);
-  const [messages, setMessages] = React56.useState([]);
-  const [queue, setQueue] = React56.useState([]);
-  const [fatal, setFatal] = React56.useState(null);
-  const [busy, setBusy] = React56.useState(false);
-  const [turnStartedAt, setTurnStartedAt] = React56.useState(null);
-  const listRef = React56.useRef([]);
-  const queueRef = React56.useRef([]);
-  const busyRef = React56.useRef(false);
-  const stoppedRef = React56.useRef(false);
-  const abortRef = React56.useRef(null);
-  const serverCount = React56.useRef(0);
-  const threadRef = React56.useRef(null);
-  const mounted = React56.useRef(true);
-  React56.useEffect(() => {
+  const [status, setStatus] = React57.useState("idle");
+  const [threadId, setThreadId] = React57.useState(null);
+  const [messages, setMessages] = React57.useState([]);
+  const [queue, setQueue] = React57.useState([]);
+  const [fatal, setFatal] = React57.useState(null);
+  const [busy, setBusy] = React57.useState(false);
+  const [turnStartedAt, setTurnStartedAt] = React57.useState(null);
+  const listRef = React57.useRef([]);
+  const queueRef = React57.useRef([]);
+  const busyRef = React57.useRef(false);
+  const stoppedRef = React57.useRef(false);
+  const abortRef = React57.useRef(null);
+  const serverCount = React57.useRef(0);
+  const threadRef = React57.useRef(null);
+  const mounted = React57.useRef(true);
+  React57.useEffect(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -10764,14 +10870,14 @@ function useChatEngine(opts) {
     }
     return false;
   };
-  const loadThread = React56.useCallback(async (id) => {
+  const loadThread = React57.useCallback(async (id) => {
     const data = await apiAdapter.getThread(id);
     const list = [...data && data.messages || []];
     serverCount.current = list.length;
     commit(list);
     return list;
   }, [apiAdapter]);
-  React56.useEffect(() => {
+  React57.useEffect(() => {
     if (!apiAdapter) {
       setStatus("idle");
       setFatal(null);
@@ -10984,7 +11090,7 @@ function useChatEngine(opts) {
       await dispatchTurn(turn);
     }
   }
-  const send = React56.useCallback((text, attachments) => {
+  const send = React57.useCallback((text, attachments) => {
     const body = (text || "").trim();
     if (!body && !(attachments && attachments.length)) return;
     if (status === "disconnected") return;
@@ -10994,7 +11100,7 @@ function useChatEngine(opts) {
     stoppedRef.current = false;
     drain();
   }, [status]);
-  const stop = React56.useCallback(() => {
+  const stop = React57.useCallback(() => {
     stoppedRef.current = true;
     const ac = abortRef.current;
     if (ac) {
@@ -11013,11 +11119,11 @@ function useChatEngine(opts) {
       store.del(STORAGE_PREFIX + threadRef.current);
     }
   }, [apiAdapter]);
-  const removeQueued = React56.useCallback((id) => {
+  const removeQueued = React57.useCallback((id) => {
     queueRef.current = queueRef.current.filter((t) => t.id !== id);
     setQueue(queueRef.current.slice());
   }, []);
-  const retry = React56.useCallback(() => {
+  const retry = React57.useCallback(() => {
     const list = listRef.current;
     let at = -1;
     for (let i = list.length - 1; i >= 0; i--) if (list[i].role === "user") {
@@ -11033,19 +11139,19 @@ function useChatEngine(opts) {
     setQueue(queueRef.current.slice());
     drain();
   }, []);
-  const clear = React56.useCallback(() => {
+  const clear = React57.useCallback(() => {
     commit([]);
     serverCount.current = 0;
     queueRef.current = [];
     setQueue([]);
     onClear && onClear();
   }, [onClear]);
-  const setFeedback = React56.useCallback((id, value) => {
+  const setFeedback = React57.useCallback((id, value) => {
     patch(id, (m) => ({ feedback: m.feedback === value ? null : value }));
     const msg = listRef.current.find((m) => m.id === id);
     onFeedback && onFeedback({ message: msg, feedback: msg ? msg.feedback : value });
   }, [onFeedback]);
-  const reload = React56.useCallback(async () => {
+  const reload = React57.useCallback(async () => {
     if (!threadRef.current) return;
     setStatus("loading");
     try {
@@ -11083,10 +11189,10 @@ var ChatKit = {
 };
 
 // src/components/chat/ChatTranscript.tsx
-import * as React58 from "react";
+import * as React59 from "react";
 
 // src/components/chat/ChatTurn.tsx
-import * as React57 from "react";
+import * as React58 from "react";
 import { jsx as jsx87, jsxs as jsxs81 } from "react/jsx-runtime";
 function JsonView({ value }) {
   let text;
@@ -11123,7 +11229,7 @@ function PacketCard({ packet, schema, render, onApply, applied }) {
   ] });
 }
 function ThinkingBlock({ text, durationMs, streaming, defaultOpen = false }) {
-  const [open, setOpen] = React57.useState(defaultOpen);
+  const [open, setOpen] = React58.useState(defaultOpen);
   if (!text) return null;
   return /* @__PURE__ */ jsxs81("div", { className: "fdc-think" + (open ? " is-open" : ""), children: [
     /* @__PURE__ */ jsxs81("button", { type: "button", className: "fdc-think-head", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
@@ -11140,7 +11246,7 @@ function ThinkingBlock({ text, durationMs, streaming, defaultOpen = false }) {
   ] });
 }
 function Citations({ items = [], onOpen }) {
-  const [open, setOpen] = React57.useState(false);
+  const [open, setOpen] = React58.useState(false);
   if (!items.length) return null;
   return /* @__PURE__ */ jsxs81("div", { className: "fdc-cites", children: [
     /* @__PURE__ */ jsxs81("button", { type: "button", className: "fdc-cites-head", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
@@ -11166,7 +11272,7 @@ function clampText(text, max) {
   return (at > max * 0.6 ? cut.slice(0, at) : cut).trimEnd() + "\u2026";
 }
 function MessageBody({ message: m, ctx }) {
-  const [expanded, setExpanded] = React57.useState(false);
+  const [expanded, setExpanded] = React58.useState(false);
   const isUser = m.role === "user";
   const raw = m.text || "";
   const clamped = !expanded && !m.streaming ? clampText(raw, ctx.maxVisibleChars) : null;
@@ -11233,9 +11339,9 @@ function MessageBody({ message: m, ctx }) {
   ] });
 }
 function useCopyRun() {
-  const [done, setDone] = React57.useState(false);
-  const t = React57.useRef(null);
-  React57.useEffect(() => () => {
+  const [done, setDone] = React58.useState(false);
+  const t = React58.useRef(null);
+  React58.useEffect(() => () => {
     if (t.current) clearTimeout(t.current);
   }, []);
   return [done, (text) => {
@@ -11262,7 +11368,7 @@ function RunActions({ group, ctx }) {
     ] }),
     isAssistant && ctx.onRetry ? /* @__PURE__ */ jsx87("button", { type: "button", className: "fdc-act", onClick: ctx.onRetry, "aria-label": "Retry this turn", children: /* @__PURE__ */ jsx87("i", { className: "ph ph-arrow-clockwise", "aria-hidden": "true" }) }) : null,
     group.role === "user" && ctx.onEdit ? /* @__PURE__ */ jsx87("button", { type: "button", className: "fdc-act", onClick: () => ctx.onEdit(last), "aria-label": "Edit and resend", children: /* @__PURE__ */ jsx87("i", { className: "ph ph-pencil-simple", "aria-hidden": "true" }) }) : null,
-    isAssistant && ctx.onFeedback ? /* @__PURE__ */ jsxs81(React57.Fragment, { children: [
+    isAssistant && ctx.onFeedback ? /* @__PURE__ */ jsxs81(React58.Fragment, { children: [
       /* @__PURE__ */ jsx87("button", { type: "button", className: "fdc-act" + (fb === "up" ? " is-on" : ""), onClick: () => ctx.onFeedback(last.id, "up"), "aria-pressed": fb === "up", "aria-label": "Good response", children: /* @__PURE__ */ jsx87("i", { className: "ph ph-thumbs-up", "aria-hidden": "true" }) }),
       /* @__PURE__ */ jsx87("button", { type: "button", className: "fdc-act" + (fb === "down" ? " is-on" : ""), onClick: () => ctx.onFeedback(last.id, "down"), "aria-pressed": fb === "down", "aria-label": "Bad response", children: /* @__PURE__ */ jsx87("i", { className: "ph ph-thumbs-down", "aria-hidden": "true" }) })
     ] }) : null,
@@ -11357,10 +11463,10 @@ function ChatTranscript({
   renderEmpty,
   className = ""
 }) {
-  const scroller = React58.useRef(null);
-  const stick = React58.useRef(true);
-  const [pill, setPill] = React58.useState(0);
-  const seen = React58.useRef(0);
+  const scroller = React59.useRef(null);
+  const stick = React59.useRef(true);
+  const [pill, setPill] = React59.useState(0);
+  const seen = React59.useRef(0);
   const toBottom = (smooth) => {
     const el = scroller.current;
     if (!el) return;
@@ -11379,7 +11485,7 @@ function ChatTranscript({
       seen.current = messages.length;
     }
   };
-  React58.useLayoutEffect(() => {
+  React59.useLayoutEffect(() => {
     const el = scroller.current;
     if (!el) return;
     if (stick.current) {
@@ -11387,7 +11493,7 @@ function ChatTranscript({
       seen.current = messages.length;
     } else setPill(Math.max(0, messages.length - seen.current));
   }, [messages]);
-  React58.useEffect(() => {
+  React59.useEffect(() => {
     const el = scroller.current;
     const inner = el && el.firstChild;
     if (!el || !inner || typeof ResizeObserver === "undefined") return;
@@ -11397,7 +11503,7 @@ function ChatTranscript({
     ro.observe(inner);
     return () => ro.disconnect();
   }, []);
-  const groups = React58.useMemo(() => groupMessages(messages), [messages]);
+  const groups = React59.useMemo(() => groupMessages(messages), [messages]);
   const empty = !messages.length && status === "ready";
   return /* @__PURE__ */ jsxs82("div", { className: ["fdc-scroll", className].filter(Boolean).join(" "), ref: scroller, onScroll, children: [
     /* @__PURE__ */ jsxs82("div", { className: "fdc-log", role: "log", "aria-label": "Conversation", children: [
@@ -11421,7 +11527,7 @@ function ChatTranscript({
         const prev = groups[i - 1];
         const k = dayKey(g.messages[0].timestamp);
         const showDay = !!k && (!prev || dayKey(prev.messages[0].timestamp) !== k);
-        return /* @__PURE__ */ jsxs82(React58.Fragment, { children: [
+        return /* @__PURE__ */ jsxs82(React59.Fragment, { children: [
           showDay ? /* @__PURE__ */ jsx88("div", { className: "fdc-day", children: /* @__PURE__ */ jsx88("span", { children: dayLabel(k) }) }) : null,
           /* @__PURE__ */ jsx88(ChatTurn, { group: g, ctx })
         ] }, g.key || i);
@@ -11438,7 +11544,7 @@ function ChatTranscript({
 var TranscriptKit = { groupMessages };
 
 // src/components/chat/ChatComposer.tsx
-import * as React59 from "react";
+import * as React60 from "react";
 import { jsx as jsx89, jsxs as jsxs83 } from "react/jsx-runtime";
 function ChatComposer({
   onSubmit,
@@ -11466,17 +11572,17 @@ function ChatComposer({
   onReject,
   onOpenAttachment
 }) {
-  const [text, setText] = React59.useState(draft || "");
-  const [trigger, setTrigger] = React59.useState(null);
-  const [mentionItems, setMentionItems] = React59.useState([]);
-  const [listening, setListening] = React59.useState(false);
-  const [notice, setNotice] = React59.useState(null);
-  const editor = React59.useRef(null);
-  const wrap = React59.useRef(null);
-  const stopVoice = React59.useRef(null);
+  const [text, setText] = React60.useState(draft || "");
+  const [trigger, setTrigger] = React60.useState(null);
+  const [mentionItems, setMentionItems] = React60.useState([]);
+  const [listening, setListening] = React60.useState(false);
+  const [notice, setNotice] = React60.useState(null);
+  const editor = React60.useRef(null);
+  const wrap = React60.useRef(null);
+  const stopVoice = React60.useRef(null);
   const staged = useStagedFiles(fileUploadHandler, { onError: () => {
   } });
-  React59.useEffect(() => {
+  React60.useEffect(() => {
     if (draft != null && draft !== text) setText(draft);
   }, [draft]);
   const change = (v) => {
@@ -11512,7 +11618,7 @@ function ChatComposer({
     e.preventDefault();
     staged.add(found.files);
   };
-  React59.useEffect(() => {
+  React60.useEffect(() => {
     if (!trigger || trigger.type !== "mention" || !mentionSources) {
       setMentionItems([]);
       return;
@@ -11530,7 +11636,7 @@ function ChatComposer({
     const q = (trigger.query || "").toLowerCase();
     setMentionItems(mentionSources.filter((m) => !q || (m.label + " " + (m.description || "")).toLowerCase().includes(q)));
   }, [trigger, mentionSources]);
-  const slashItems = React59.useMemo(() => {
+  const slashItems = React60.useMemo(() => {
     if (!trigger || trigger.type !== "slash" || !slashCommands) return [];
     const q = (trigger.query || "").toLowerCase();
     return slashCommands.filter((c) => !q || (c.id + " " + c.label + " " + (c.description || "")).toLowerCase().includes(q));
@@ -11704,12 +11810,12 @@ function ChatComposer({
 }
 
 // src/components/chat/ChatSessionBar.tsx
-import * as React60 from "react";
+import * as React61 from "react";
 import { jsx as jsx90, jsxs as jsxs84 } from "react/jsx-runtime";
 var compact2 = meterFormats.compact;
 function ChatSessionBar({ sessionStats, contextUsage, usageLimits, onClear, extras }) {
-  const [open, setOpen] = React60.useState(false);
-  const anchor = React60.useRef(null);
+  const [open, setOpen] = React61.useState(false);
+  const anchor = React61.useRef(null);
   const stats = sessionStats || null;
   const cu = contextUsage || null;
   const limits = usageLimits || null;
@@ -11724,7 +11830,7 @@ function ChatSessionBar({ sessionStats, contextUsage, usageLimits, onClear, extr
   if (stats && stats.runningTasks) bits.push(stats.runningTasks + " running task" + (stats.runningTasks === 1 ? "" : "s"));
   if (cu) bits.push(pct + "% context");
   const expandable = !!(cu || limits);
-  return /* @__PURE__ */ jsxs84(React60.Fragment, { children: [
+  return /* @__PURE__ */ jsxs84(React61.Fragment, { children: [
     /* @__PURE__ */ jsxs84("div", { className: "fdc-bar", children: [
       /* @__PURE__ */ jsxs84(
         "button",
@@ -11865,7 +11971,7 @@ function ModelControls({
       ] })
     });
   }
-  return /* @__PURE__ */ jsxs84(React60.Fragment, { children: [
+  return /* @__PURE__ */ jsxs84(React61.Fragment, { children: [
     /* @__PURE__ */ jsx90(
       MenuButton,
       {
@@ -11982,11 +12088,11 @@ function AgentChatPanel({
   onFeedback,
   onEditMessage
 }) {
-  const [panelWidth, setPanelWidth] = React61.useState(width);
-  const [applied, setApplied] = React61.useState({});
-  const [draft, setDraft] = React61.useState("");
-  const dragging = React61.useRef(null);
-  React61.useEffect(() => setPanelWidth(width), [width]);
+  const [panelWidth, setPanelWidth] = React62.useState(width);
+  const [applied, setApplied] = React62.useState({});
+  const [draft, setDraft] = React62.useState("");
+  const dragging = React62.useRef(null);
+  React62.useEffect(() => setPanelWidth(width), [width]);
   const engine = useChatEngine({
     contextType,
     contextId,
@@ -12190,7 +12296,7 @@ function AgentChatPanel({
 }
 
 // src/components/files/FileViewer.tsx
-import * as React62 from "react";
+import * as React63 from "react";
 import { jsx as jsx92, jsxs as jsxs86 } from "react/jsx-runtime";
 function previewKindOf(file) {
   const mime = (file.mime || "").toLowerCase();
@@ -12247,13 +12353,13 @@ function parseDelimited(text, delimiter) {
   return rows;
 }
 function usePreview(file, kind, resolveUrl) {
-  const [state, setState] = React62.useState({ status: "loading" });
-  const [attempt, setAttempt] = React62.useState(0);
-  const resolveRef = React62.useRef(resolveUrl);
-  React62.useEffect(() => {
+  const [state, setState] = React63.useState({ status: "loading" });
+  const [attempt, setAttempt] = React63.useState(0);
+  const resolveRef = React63.useRef(resolveUrl);
+  React63.useEffect(() => {
     resolveRef.current = resolveUrl;
   }, [resolveUrl]);
-  React62.useEffect(() => {
+  React63.useEffect(() => {
     if (kind === "none") {
       setState({ status: "ready" });
       return;
@@ -12283,7 +12389,7 @@ function usePreview(file, kind, resolveUrl) {
       if (ac) ac.abort();
     };
   }, [file.id, kind, attempt]);
-  return { ...state, retry: React62.useCallback(() => setAttempt((a) => a + 1), []) };
+  return { ...state, retry: React63.useCallback(() => setAttempt((a) => a + 1), []) };
 }
 function PreviewBody({ file, kind, state }) {
   if (kind === "image") return /* @__PURE__ */ jsx92("img", { className: "fd-fv-image", src: state.url, alt: file.name || "Preview" });
@@ -12328,13 +12434,13 @@ function PreviewBody({ file, kind, state }) {
   ] });
 }
 function FileViewer({ file, resolveUrl, sidePanel, sidePanelLabel = "Details", onClose, actions, className = "" }) {
-  const kind = React62.useMemo(() => previewKindOf(file), [file]);
+  const kind = React63.useMemo(() => previewKindOf(file), [file]);
   const preview = usePreview(file, kind, resolveUrl);
-  const [tab, setTab] = React62.useState("preview");
-  const [downloading, setDownloading] = React62.useState(false);
-  const [downloadError, setDownloadError] = React62.useState(null);
+  const [tab, setTab] = React63.useState("preview");
+  const [downloading, setDownloading] = React63.useState(false);
+  const [downloadError, setDownloadError] = React63.useState(null);
   const hasSide = sidePanel != null;
-  React62.useEffect(() => {
+  React63.useEffect(() => {
     setTab("preview");
   }, [file.id]);
   const download = () => {
@@ -12401,7 +12507,7 @@ function FileViewer({ file, resolveUrl, sidePanel, sidePanelLabel = "Details", o
 }
 
 // src/components/files/FileBrowser.tsx
-import * as React63 from "react";
+import * as React64 from "react";
 import { Fragment as Fragment27, jsx as jsx93, jsxs as jsxs87 } from "react/jsx-runtime";
 function childrenOf(folders, parentId) {
   return folders.filter((f) => f.parentId === parentId).sort((a, b) => a.name.localeCompare(b.name));
@@ -12472,10 +12578,10 @@ function FolderPickerMenu({
   destinations,
   onPick
 }) {
-  const [open, setOpen] = React63.useState(false);
+  const [open, setOpen] = React64.useState(false);
   const zIndex = useOverlayLayer(open);
-  const ref = React63.useRef(null);
-  React63.useEffect(() => {
+  const ref = React64.useRef(null);
+  React64.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -12527,8 +12633,8 @@ function FolderPickerMenu({
   ] });
 }
 function RowShell({ icon, name, meta, onOpen, draggableId, isDropTarget, onDropPayload, actions, className = "" }) {
-  const [over, setOver] = React63.useState(false);
-  const dragCounter = React63.useRef(0);
+  const [over, setOver] = React64.useState(false);
+  const dragCounter = React64.useRef(0);
   const dropHandlers = isDropTarget ? {
     onDragEnter: (e) => {
       if (!hasInternalPayload(e)) return;
@@ -12576,8 +12682,8 @@ function RowShell({ icon, name, meta, onOpen, draggableId, isDropTarget, onDropP
 }
 function TreeNode({ folder, depth, folders, currentFolderId, onNavigate, onMoveInto, canMove }) {
   const kids = childrenOf(folders, folder.id);
-  const [expanded, setExpanded] = React63.useState(() => currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId));
-  React63.useEffect(() => {
+  const [expanded, setExpanded] = React64.useState(() => currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId));
+  React64.useEffect(() => {
     if (currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId)) setExpanded(true);
   }, [currentFolderId, folder.id, folders]);
   const isCurrent = folder.id === currentFolderId;
@@ -12643,15 +12749,15 @@ function FileBrowser({
   const canUpload = perm.canUpload !== false && !!onUpload;
   const canRemoveFile = perm.canRemoveFile !== false && !!onRemoveFile;
   const canDeleteFolder = perm.canDeleteFolder !== false && !!onDeleteFolder;
-  const [createOpen, setCreateOpen] = React63.useState(false);
-  const [createName, setCreateName] = React63.useState("");
-  const [renameTarget, setRenameTarget] = React63.useState(null);
-  const [renameValue, setRenameValue] = React63.useState("");
-  const [deleteTarget, setDeleteTarget] = React63.useState(null);
-  const uploadInputRef = React63.useRef(null);
-  const crumbFolders = React63.useMemo(() => ancestorsOf(folders, currentFolderId), [folders, currentFolderId]);
-  const subfolders = React63.useMemo(() => childrenOf(folders, currentFolderId), [folders, currentFolderId]);
-  const currentFiles = React63.useMemo(
+  const [createOpen, setCreateOpen] = React64.useState(false);
+  const [createName, setCreateName] = React64.useState("");
+  const [renameTarget, setRenameTarget] = React64.useState(null);
+  const [renameValue, setRenameValue] = React64.useState("");
+  const [deleteTarget, setDeleteTarget] = React64.useState(null);
+  const uploadInputRef = React64.useRef(null);
+  const crumbFolders = React64.useMemo(() => ancestorsOf(folders, currentFolderId), [folders, currentFolderId]);
+  const subfolders = React64.useMemo(() => childrenOf(folders, currentFolderId), [folders, currentFolderId]);
+  const currentFiles = React64.useMemo(
     () => files.filter((f) => f.folderId === currentFolderId).sort((a, b) => a.name.localeCompare(b.name)),
     [files, currentFolderId]
   );
@@ -12883,8 +12989,8 @@ function BreadcrumbCrumb({
   isDropTarget,
   onDropPayload
 }) {
-  const [over, setOver] = React63.useState(false);
-  const dragCounter = React63.useRef(0);
+  const [over, setOver] = React64.useState(false);
+  const dragCounter = React64.useRef(0);
   const dropHandlers = isDropTarget ? {
     onDragEnter: (e) => {
       if (!hasInternalPayload(e)) return;
@@ -12913,9 +13019,27 @@ function BreadcrumbCrumb({
 }
 
 // src/kits/query.ts
-import * as React64 from "react";
+import * as React65 from "react";
+var isMultiSelectShaped = (v) => !!v && typeof v === "object" && Array.isArray(v.values);
+var isRangeShaped = (v) => !!v && typeof v === "object" && ("min" in v || "max" in v);
+var isDateShaped = (v) => !!v && typeof v === "object" && "kind" in v;
+function isActiveFilterValue(v) {
+  if (v == null || v === "" || v === false) return false;
+  if (Array.isArray(v)) return v.length > 0;
+  if (isMultiSelectShaped(v)) return v.values.length > 0;
+  if (isRangeShaped(v)) return v.min != null || v.max != null;
+  if (isDateShaped(v)) return v.kind === "withinDays" ? v.days != null : !!(v.from && v.to);
+  return true;
+}
 function eqFilter(get2) {
-  return (row, value) => Array.isArray(value) ? value.includes(get2(row)) : get2(row) === value;
+  return (row, value) => {
+    if (Array.isArray(value)) return value.includes(get2(row));
+    if (isMultiSelectShaped(value)) {
+      const hit = value.values.some((o) => o.value === get2(row));
+      return value.operator === "notIn" ? !hit : hit;
+    }
+    return get2(row) === value;
+  };
 }
 function anyOfFilter(get2) {
   return (row, value) => {
@@ -12926,10 +13050,15 @@ function anyOfFilter(get2) {
 function rangeFilter(get2) {
   return (row, value) => {
     const n = get2(row);
-    const bounds = Array.isArray(value) ? value : [0, Number.POSITIVE_INFINITY];
-    const lo = Number(bounds[0] ?? 0);
-    const hiRaw = bounds[1];
-    const hi = hiRaw == null ? Number.POSITIVE_INFINITY : Number(hiRaw);
+    let lo = 0;
+    let hi = Number.POSITIVE_INFINITY;
+    if (Array.isArray(value)) {
+      lo = Number(value[0] ?? 0);
+      hi = value[1] == null ? Number.POSITIVE_INFINITY : Number(value[1]);
+    } else if (isRangeShaped(value)) {
+      lo = value.min ?? 0;
+      hi = value.max ?? Number.POSITIVE_INFINITY;
+    }
     return n >= lo && (hi === Number.POSITIVE_INFINITY || n <= hi);
   };
 }
@@ -12945,22 +13074,22 @@ function compare(a, b, dir) {
 var API = null;
 var PREFS = null;
 function useServerTable({ endpoint, params, defaults, deps, prefsKey }) {
-  const [query, setQuery] = React64.useState(() => {
+  const [query, setQuery] = React65.useState(() => {
     const store = PREFS || window.PlannerPrefs;
     const saved = prefsKey && store ? store.getTable(prefsKey) : {};
     return { ...DEFAULTS, ...defaults || {}, ...saved.pageSize ? { pageSize: saved.pageSize } : {}, ...saved.sort ? { sort: saved.sort, dir: saved.dir || "desc" } : {} };
   });
-  const savePref = React64.useCallback((patch2) => {
+  const savePref = React65.useCallback((patch2) => {
     const store = PREFS || window.PlannerPrefs;
     if (prefsKey && store) store.setTable(prefsKey, patch2);
   }, [prefsKey]);
-  const [res, setRes] = React64.useState(null);
-  const [loading, setLoading] = React64.useState(true);
-  const seq2 = React64.useRef(0);
+  const [res, setRes] = React65.useState(null);
+  const [loading, setLoading] = React65.useState(true);
+  const seq2 = React65.useRef(0);
   const depKey = (deps || []).join("|");
   const paramKey = JSON.stringify(params || {});
   const queryKey = JSON.stringify(query);
-  React64.useEffect(() => {
+  React65.useEffect(() => {
     const id = ++seq2.current;
     setLoading(true);
     const t = setTimeout(() => {
@@ -12996,7 +13125,7 @@ function useServerTable({ endpoint, params, defaults, deps, prefsKey }) {
     loading,
     /** True only on the very first load — later loads keep showing stale rows. */
     initialLoading: loading && !res,
-    activeFilterCount: Object.values(query.filters).filter((v) => !(v == null || v === "" || v === false)).length,
+    activeFilterCount: Object.values(query.filters).filter(isActiveFilterValue).length,
     setPage: (page) => patch({ page }, false),
     setPageSize: (pageSize) => {
       savePref({ pageSize });
@@ -13059,7 +13188,6 @@ var QueryKit = {
     const Q = { ...DEFAULTS, ...query || {} };
     const c = cfg;
     const filters = Q.filters || {};
-    const active = (v) => !(v == null || v === "" || v === false || Array.isArray(v) && !v.length);
     let out = rows;
     const term = (Q.q || "").trim().toLowerCase();
     if (term && c.searchKeys) {
@@ -13069,7 +13197,7 @@ var QueryKit = {
     const searched = out;
     Object.entries(filters).forEach(([id, val]) => {
       const fn = c.filters && c.filters[id];
-      if (!active(val) || !fn) return;
+      if (!isActiveFilterValue(val) || !fn) return;
       out = out.filter((r) => fn(r, val));
     });
     const matched = out;
@@ -13116,9 +13244,30 @@ var QueryKit = {
     if (Q.sort) parts.push("sort=" + Q.sort + "&dir=" + Q.dir);
     if (Q.q) parts.push("q=" + encodeURIComponent(Q.q));
     Object.entries(Q.filters || {}).forEach(([k, v]) => {
-      if (v == null || v === "" || v === false || Array.isArray(v) && !v.length) return;
-      if (Array.isArray(v)) v.forEach((x) => parts.push(k + "=" + encodeURIComponent(x === Infinity ? "*" : x)));
-      else parts.push(k + "=" + encodeURIComponent(v));
+      if (!isActiveFilterValue(v)) return;
+      if (Array.isArray(v)) {
+        v.forEach((x) => parts.push(k + "=" + encodeURIComponent(x === Infinity ? "*" : x)));
+        return;
+      }
+      if (isMultiSelectShaped(v)) {
+        const prefix = v.operator === "notIn" ? "notIn:" : "";
+        v.values.forEach((o) => parts.push(k + "=" + encodeURIComponent(prefix + String(o.value))));
+        return;
+      }
+      if (isRangeShaped(v)) {
+        if (v.min != null) parts.push(k + ".min=" + encodeURIComponent(String(v.min)));
+        if (v.max != null) parts.push(k + ".max=" + encodeURIComponent(String(v.max)));
+        return;
+      }
+      if (isDateShaped(v)) {
+        if (v.kind === "withinDays") parts.push(k + "=withinDays:" + encodeURIComponent(String(v.days)));
+        else {
+          parts.push(k + ".from=" + encodeURIComponent(String(v.from)));
+          parts.push(k + ".to=" + encodeURIComponent(String(v.to)));
+        }
+        return;
+      }
+      parts.push(k + "=" + encodeURIComponent(v));
     });
     return parts.join("&");
   },
@@ -13259,12 +13408,12 @@ function createVersionStore(initialState, options) {
 }
 
 // src/kits/documentTitle.ts
-import * as React65 from "react";
+import * as React66 from "react";
 function formatDocumentTitle(routeTitle, appName) {
   return [routeTitle, appName, "Flytedesk"].filter((part) => !!part && part.length > 0).join(" \xB7 ");
 }
 function useDocumentTitle(routeTitle, appName) {
-  React65.useEffect(() => {
+  React66.useEffect(() => {
     if (typeof document === "undefined") return;
     document.title = formatDocumentTitle(routeTitle, appName);
   }, [routeTitle, appName]);