@flytedan/flytebot-design-system 0.29.0 → 0.30.0

package/dist/index.d.cts

@@ -692,10 +692,11 @@ interface BannerProps {
     title: React.ReactNode;
     detail?: React.ReactNode;
     actions?: React.ReactNode;
-    /** MP-243 Q3: a Banner reporting a failure (danger) or something invalid the user must
-     *  fix (warn) is a live-region announcement, not decoration — `role="alert"` for those
-     *  interrupts and announces immediately, `role="status"` for info/ok announces politely
-     *  once idle. Defaults by tone; a caller can still override either way. */
+    /** A Banner reporting a failure (danger) is a live-region announcement that interrupts
+     *  and announces immediately (`role="alert"`); every other tone — warn, info, ok —
+     *  announces politely once idle (`role="status"`), since a static warning or advisory
+     *  banner isn't urgent enough to talk over whatever the user is doing. Defaults by
+     *  tone; a caller can still override either way. */
     role?: "alert" | "status";
 }
 declare function Banner({ tone, title, detail, actions, role }: BannerProps): React.JSX.Element;
@@ -1080,7 +1081,7 @@ interface FilterFieldSelect extends FilterFieldBase {
     type: "select";
     options: FilterFieldOption[];
 }
-/** MP-243: include/exclude, shared by every field whose value is a set of options. */
+/** Include/exclude, shared by every field whose value is a set of options. */
 type FilterOperator = "in" | "notIn";
 interface FilterMultiSelectValue {
     operator: FilterOperator;
@@ -1102,27 +1103,27 @@ interface FilterFieldMultiSelect extends FilterFieldBase {
     options?: FilterFieldOption[];
     /** Async option source for long lists (schools, imports, …), called ~300ms after the
      *  last keystroke with the current query (possibly "") and an AbortSignal that fires
-     *  once a newer query has superseded this call (MP-243 A6) — pass it straight to
-     *  `fetch`/whatever transport does the lookup so a superseded request is actually
-     *  cancelled, not just ignored on arrival. A rejection (that isn't the abort itself)
-     *  renders as a visible error with a Retry action; it is never folded into "no
-     *  matches", since a search that FAILED is a different thing to tell the user than a
-     *  search that found nothing. */
+     *  once a newer query has superseded this call — pass it straight to `fetch`/whatever
+     *  transport does the lookup so a superseded request is actually cancelled, not just
+     *  ignored on arrival. A rejection (that isn't the abort itself) renders as a visible
+     *  error with a Retry action; it is never folded into "no matches", since a search
+     *  that FAILED is a different thing to tell the user than a search that found
+     *  nothing. */
     loadOptions?: (query: string, signal: AbortSignal) => Promise<FilterFieldOption[]>;
-    /** MP-243 A1: paste-a-list as a second input mode for THIS SAME field — search and
-     *  paste both build one FilterMultiSelectValue for one dimension, so a school found by
-     *  typing and a school found by pasting a list land as two entries in the same set
-     *  instead of two separate filters that would AND together. Presence of `resolve` is
-     *  what turns on the Search/Paste mode switch; omit it for a search-only field. Never
-     *  called with an empty token list, and tokens are de-duplicated before the call. */
+    /** Paste-a-list as a second input mode for THIS SAME field — search and paste both
+     *  build one FilterMultiSelectValue for one dimension, so a school found by typing and
+     *  a school found by pasting a list land as two entries in the same set instead of two
+     *  separate filters that would AND together. Presence of `resolve` is what turns on
+     *  the Search/Paste mode switch; omit it for a search-only field. Never called with an
+     *  empty token list, and tokens are de-duplicated before the call. */
     resolve?: (tokens: string[]) => Promise<FilterResolveResult>;
     placeholder?: string;
     /** Placeholder for the paste textarea, when `resolve` is given. Falls back to `placeholder`. */
     pastePlaceholder?: string;
-    /** MP-243 A2: restrict which operators this field's toggle offers, e.g. `["in"]` for a
-     *  dimension that only ever means "is any of" and never "is none of" — a single-operator
-     *  list hides the toggle entirely and that operator applies unconditionally, so an app
-     *  can express an "any"/"is"-only dimension exactly rather than showing a switch with
+    /** Restrict which operators this field's toggle offers, e.g. `["in"]` for a dimension
+     *  that only ever means "is any of" and never "is none of" — a single-operator list
+     *  hides the toggle entirely and that operator applies unconditionally, so an app can
+     *  express an "any"/"is"-only dimension exactly rather than showing a switch with
      *  nothing to switch to. Defaults to both `["in", "notIn"]`. */
     operators?: FilterOperator[];
 }
@@ -1153,16 +1154,20 @@ type FilterDateValue = {
 interface FilterFieldDate extends FilterFieldBase {
     type: "date";
     /** Default days shown the first time "within the last N days" is picked — shown, not
-     *  written: nothing is set until the user changes it or confirms it (MP-243 A4). */
+     *  written: nothing is set until the user changes it or confirms it. */
     defaultDays?: number;
+    /** Upper bound enforced on the "within the last N days" input. Default 3650 (ten
+     *  years) — generous enough for any real "recent activity" window while still
+     *  guaranteeing a plausible, in-range value ever reaches `onFilterChange`. */
+    maxDays?: number;
 }
 /** A declared filter field. Add a variant here (and a branch below) for a new value
  *  picker. text/select keep their original bare-string value shape unchanged, so an
  *  existing consumer needs no migration; every other variant's value is a small typed
  *  object of its own (see FilterValue). */
 type FilterField = FilterFieldText | FilterFieldSelect | FilterFieldMultiSelect | FilterFieldRange | FilterFieldDate;
-/** MP-243 A7: the value shape a given declared field reads/writes, so a consumer can type
- *  its own `filters` record precisely instead of `Record<string, unknown>` — e.g.
+/** The value shape a given declared field reads/writes, so a consumer can type its own
+ *  `filters` record precisely instead of `Record<string, unknown>` — e.g.
  *  `Record<"schools", FilterValue<typeof schoolsField>>`. */
 type FilterValue<F extends FilterField> = F extends FilterFieldText ? string : F extends FilterFieldSelect ? string : F extends FilterFieldMultiSelect ? FilterMultiSelectValue : F extends FilterFieldRange ? FilterRangeValue : F extends FilterFieldDate ? FilterDateValue : never;
 interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onChange"> {
@@ -1175,7 +1180,7 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
     /** Fires on every value edit. Maps 1:1 onto useServerTable's setFilter(id, value).
      *  FilterBar only ever calls this with a COMPLETE, valid value for the field — an
      *  emptied selection, a one-sided date range, an invalid numeric range or a cleared
-     *  bound go through onFilterRemove (or nothing) instead (MP-243 A3). */
+     *  bound go through onFilterRemove (or nothing) instead. */
     onFilterChange: (key: string, value: unknown) => void;
     /** Fires when a chip's × is clicked, or when an edit leaves a field with no valid
      *  value. Maps 1:1 onto useServerTable's clearFilter(id). */
@@ -1196,18 +1201,17 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
  * (`panel`), the same way SortMenu holds `open` but never sort state itself.
  *
  * Every floating surface — a field's edit panel and the "add filter" menu — is a real
- * Popover (or Menu-in-a-Popover) from this kit's own actions module (MP-243 A5): viewport
- * clamping, nested-layer handling, Escape, and focus-return-to-the-chip all come from
- * there, so FilterBar itself runs no document-level dismissal listener of its own. Only
- * the text field's inline input manages its own dismissal (blur/Enter/Escape), since it
- * isn't a floating panel at all.
+ * Popover (or Menu-in-a-Popover) from this kit's own actions module: viewport clamping,
+ * nested-layer handling, Escape, and focus-return-to-the-chip all come from there, so
+ * FilterBar itself runs no document-level dismissal listener of its own. Only the text
+ * field's inline input manages its own dismissal (blur/Enter/Escape), since it isn't a
+ * floating panel at all.
  *
- * MP-243 adds three variants on top of the original text/select, for audiences too big or
- * too shaped for a single free-text box or a short dropdown: multiSelect (searchable, sync
- * or async, with an optional paste-a-list mode for the same value), range (numeric
- * min/max), and date ("within the last N days" or "between two dates"). text/select are
- * unchanged and keep their bare-string value shape, so an existing consumer needs no
- * migration.
+ * FilterBar supports five field kinds: text, select, multiSelect (searchable, sync or
+ * async, with an optional paste-a-list mode for the same value), range (numeric min/max),
+ * and date ("within the last N days" or "between two dates"). text and select keep a bare
+ * string value; multiSelect/range/date each read/write a small typed object of their own
+ * (see FilterValue).
  */
 declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, className, ...rest }: FilterBarProps): React.JSX.Element;
 

package/dist/index.d.ts

@@ -692,10 +692,11 @@ interface BannerProps {
     title: React.ReactNode;
     detail?: React.ReactNode;
     actions?: React.ReactNode;
-    /** MP-243 Q3: a Banner reporting a failure (danger) or something invalid the user must
-     *  fix (warn) is a live-region announcement, not decoration — `role="alert"` for those
-     *  interrupts and announces immediately, `role="status"` for info/ok announces politely
-     *  once idle. Defaults by tone; a caller can still override either way. */
+    /** A Banner reporting a failure (danger) is a live-region announcement that interrupts
+     *  and announces immediately (`role="alert"`); every other tone — warn, info, ok —
+     *  announces politely once idle (`role="status"`), since a static warning or advisory
+     *  banner isn't urgent enough to talk over whatever the user is doing. Defaults by
+     *  tone; a caller can still override either way. */
     role?: "alert" | "status";
 }
 declare function Banner({ tone, title, detail, actions, role }: BannerProps): React.JSX.Element;
@@ -1080,7 +1081,7 @@ interface FilterFieldSelect extends FilterFieldBase {
     type: "select";
     options: FilterFieldOption[];
 }
-/** MP-243: include/exclude, shared by every field whose value is a set of options. */
+/** Include/exclude, shared by every field whose value is a set of options. */
 type FilterOperator = "in" | "notIn";
 interface FilterMultiSelectValue {
     operator: FilterOperator;
@@ -1102,27 +1103,27 @@ interface FilterFieldMultiSelect extends FilterFieldBase {
     options?: FilterFieldOption[];
     /** Async option source for long lists (schools, imports, …), called ~300ms after the
      *  last keystroke with the current query (possibly "") and an AbortSignal that fires
-     *  once a newer query has superseded this call (MP-243 A6) — pass it straight to
-     *  `fetch`/whatever transport does the lookup so a superseded request is actually
-     *  cancelled, not just ignored on arrival. A rejection (that isn't the abort itself)
-     *  renders as a visible error with a Retry action; it is never folded into "no
-     *  matches", since a search that FAILED is a different thing to tell the user than a
-     *  search that found nothing. */
+     *  once a newer query has superseded this call — pass it straight to `fetch`/whatever
+     *  transport does the lookup so a superseded request is actually cancelled, not just
+     *  ignored on arrival. A rejection (that isn't the abort itself) renders as a visible
+     *  error with a Retry action; it is never folded into "no matches", since a search
+     *  that FAILED is a different thing to tell the user than a search that found
+     *  nothing. */
     loadOptions?: (query: string, signal: AbortSignal) => Promise<FilterFieldOption[]>;
-    /** MP-243 A1: paste-a-list as a second input mode for THIS SAME field — search and
-     *  paste both build one FilterMultiSelectValue for one dimension, so a school found by
-     *  typing and a school found by pasting a list land as two entries in the same set
-     *  instead of two separate filters that would AND together. Presence of `resolve` is
-     *  what turns on the Search/Paste mode switch; omit it for a search-only field. Never
-     *  called with an empty token list, and tokens are de-duplicated before the call. */
+    /** Paste-a-list as a second input mode for THIS SAME field — search and paste both
+     *  build one FilterMultiSelectValue for one dimension, so a school found by typing and
+     *  a school found by pasting a list land as two entries in the same set instead of two
+     *  separate filters that would AND together. Presence of `resolve` is what turns on
+     *  the Search/Paste mode switch; omit it for a search-only field. Never called with an
+     *  empty token list, and tokens are de-duplicated before the call. */
     resolve?: (tokens: string[]) => Promise<FilterResolveResult>;
     placeholder?: string;
     /** Placeholder for the paste textarea, when `resolve` is given. Falls back to `placeholder`. */
     pastePlaceholder?: string;
-    /** MP-243 A2: restrict which operators this field's toggle offers, e.g. `["in"]` for a
-     *  dimension that only ever means "is any of" and never "is none of" — a single-operator
-     *  list hides the toggle entirely and that operator applies unconditionally, so an app
-     *  can express an "any"/"is"-only dimension exactly rather than showing a switch with
+    /** Restrict which operators this field's toggle offers, e.g. `["in"]` for a dimension
+     *  that only ever means "is any of" and never "is none of" — a single-operator list
+     *  hides the toggle entirely and that operator applies unconditionally, so an app can
+     *  express an "any"/"is"-only dimension exactly rather than showing a switch with
      *  nothing to switch to. Defaults to both `["in", "notIn"]`. */
     operators?: FilterOperator[];
 }
@@ -1153,16 +1154,20 @@ type FilterDateValue = {
 interface FilterFieldDate extends FilterFieldBase {
     type: "date";
     /** Default days shown the first time "within the last N days" is picked — shown, not
-     *  written: nothing is set until the user changes it or confirms it (MP-243 A4). */
+     *  written: nothing is set until the user changes it or confirms it. */
     defaultDays?: number;
+    /** Upper bound enforced on the "within the last N days" input. Default 3650 (ten
+     *  years) — generous enough for any real "recent activity" window while still
+     *  guaranteeing a plausible, in-range value ever reaches `onFilterChange`. */
+    maxDays?: number;
 }
 /** A declared filter field. Add a variant here (and a branch below) for a new value
  *  picker. text/select keep their original bare-string value shape unchanged, so an
  *  existing consumer needs no migration; every other variant's value is a small typed
  *  object of its own (see FilterValue). */
 type FilterField = FilterFieldText | FilterFieldSelect | FilterFieldMultiSelect | FilterFieldRange | FilterFieldDate;
-/** MP-243 A7: the value shape a given declared field reads/writes, so a consumer can type
- *  its own `filters` record precisely instead of `Record<string, unknown>` — e.g.
+/** The value shape a given declared field reads/writes, so a consumer can type its own
+ *  `filters` record precisely instead of `Record<string, unknown>` — e.g.
  *  `Record<"schools", FilterValue<typeof schoolsField>>`. */
 type FilterValue<F extends FilterField> = F extends FilterFieldText ? string : F extends FilterFieldSelect ? string : F extends FilterFieldMultiSelect ? FilterMultiSelectValue : F extends FilterFieldRange ? FilterRangeValue : F extends FilterFieldDate ? FilterDateValue : never;
 interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onChange"> {
@@ -1175,7 +1180,7 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
     /** Fires on every value edit. Maps 1:1 onto useServerTable's setFilter(id, value).
      *  FilterBar only ever calls this with a COMPLETE, valid value for the field — an
      *  emptied selection, a one-sided date range, an invalid numeric range or a cleared
-     *  bound go through onFilterRemove (or nothing) instead (MP-243 A3). */
+     *  bound go through onFilterRemove (or nothing) instead. */
     onFilterChange: (key: string, value: unknown) => void;
     /** Fires when a chip's × is clicked, or when an edit leaves a field with no valid
      *  value. Maps 1:1 onto useServerTable's clearFilter(id). */
@@ -1196,18 +1201,17 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
  * (`panel`), the same way SortMenu holds `open` but never sort state itself.
  *
  * Every floating surface — a field's edit panel and the "add filter" menu — is a real
- * Popover (or Menu-in-a-Popover) from this kit's own actions module (MP-243 A5): viewport
- * clamping, nested-layer handling, Escape, and focus-return-to-the-chip all come from
- * there, so FilterBar itself runs no document-level dismissal listener of its own. Only
- * the text field's inline input manages its own dismissal (blur/Enter/Escape), since it
- * isn't a floating panel at all.
+ * Popover (or Menu-in-a-Popover) from this kit's own actions module: viewport clamping,
+ * nested-layer handling, Escape, and focus-return-to-the-chip all come from there, so
+ * FilterBar itself runs no document-level dismissal listener of its own. Only the text
+ * field's inline input manages its own dismissal (blur/Enter/Escape), since it isn't a
+ * floating panel at all.
  *
- * MP-243 adds three variants on top of the original text/select, for audiences too big or
- * too shaped for a single free-text box or a short dropdown: multiSelect (searchable, sync
- * or async, with an optional paste-a-list mode for the same value), range (numeric
- * min/max), and date ("within the last N days" or "between two dates"). text/select are
- * unchanged and keep their bare-string value shape, so an existing consumer needs no
- * migration.
+ * FilterBar supports five field kinds: text, select, multiSelect (searchable, sync or
+ * async, with an optional paste-a-list mode for the same value), range (numeric min/max),
+ * and date ("within the last N days" or "between two dates"). text and select keep a bare
+ * string value; multiSelect/range/date each read/write a small typed object of their own
+ * (see FilterValue).
  */
 declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, className, ...rest }: FilterBarProps): React.JSX.Element;
 

package/dist/index.js

@@ -1517,7 +1517,7 @@ var BANNER_TONE_STYLE = {
 };
 function Banner({ tone = "info", title, detail, actions, role }) {
   const t = BANNER_TONE_STYLE[tone];
-  const liveRole = role || (tone === "danger" || tone === "warn" ? "alert" : "status");
+  const liveRole = role || (tone === "danger" ? "alert" : "status");
   return /* @__PURE__ */ jsxs19(
     "div",
     {
@@ -2786,17 +2786,29 @@ function NumberInput({
     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);
   };
@@ -2820,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: [
@@ -2836,30 +2849,29 @@ function NumberInput({
           disabled,
           placeholder,
           value: shown,
-          "aria-invalid": error ? "true" : void 0,
-          "aria-describedby": error ? errorId : void 0,
+          "aria-invalid": shownError ? "true" : void 0,
+          "aria-describedby": shownError ? errorId : void 0,
           onFocus: () => setEditing(true),
           onBlur: () => {
             setEditing(false);
-            if (text.trim() === "") {
-              fire(void 0);
-              return;
-            }
-            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);
-            if (e.target.value.trim() === "") {
+            const raw = e.target.value;
+            setText(raw);
+            if (raw.trim() === "") {
+              setInvalidMessage(null);
               fire(void 0);
               return;
             }
-            const n = num(e.target.value);
-            if (n != null) fire(n);
+            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") {
@@ -2902,9 +2914,9 @@ function NumberInput({
         )
       ] })
     ] }),
-    error ? /* @__PURE__ */ jsxs36("span", { id: errorId, 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
   ] });
 }
@@ -3239,7 +3251,8 @@ function MultiSelectPanel({
   onClose
 }) {
   const allowedOps = operatorsFor(field);
-  const operator = allowedOps.length === 1 ? allowedOps[0] : value?.operator ?? allowedOps[0];
+  const [draftOperator, setDraftOperator] = React24.useState(value?.operator ?? allowedOps[0]);
+  const operator = allowedOps.length === 1 ? allowedOps[0] : value?.operator ?? draftOperator;
   const selected = value?.values ?? [];
   const selectedRef = React24.useRef(selected);
   selectedRef.current = selected;
@@ -3247,6 +3260,10 @@ function MultiSelectPanel({
     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(
@@ -3283,18 +3300,20 @@ function MultiSelectPanel({
   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 showListbox = !showLoading && !showError;
+  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];
     commit(next);
   };
   const nav = useListboxNav({ count: options.length, onSelect: (i) => toggle(options[i]) });
-  useListboxScrollIntoView(nav.active, listRef, showListbox);
+  useListboxScrollIntoView(nav.active, listRef, hasListbox);
   React24.useEffect(() => {
     nav.setActive(0);
   }, [query, options.length]);
-  const activeId = showListbox && options[nav.active] ? listId + "-opt-" + nav.active : void 0;
+  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([]);
@@ -3322,7 +3341,7 @@ function MultiSelectPanel({
     });
   };
   const header = /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
-    allowedOps.length > 1 ? /* @__PURE__ */ jsx45(OperatorToggle, { operator, onChange: (op) => commit(selected, op), label: field.label }) : null,
+    allowedOps.length > 1 ? /* @__PURE__ */ jsx45(OperatorToggle, { operator, onChange: setOperator, label: field.label }) : null,
     field.resolve ? /* @__PURE__ */ jsx45(
       SegmentedControl,
       {
@@ -3339,8 +3358,8 @@ function MultiSelectPanel({
         {
           ref: inputRef,
           role: "combobox",
-          "aria-expanded": showListbox,
-          "aria-controls": showListbox ? listId : void 0,
+          "aria-expanded": hasListbox,
+          "aria-controls": hasListbox ? listId : void 0,
           "aria-autocomplete": "list",
           "aria-activedescendant": activeId,
           "aria-label": field.label,
@@ -3396,33 +3415,41 @@ function MultiSelectPanel({
       ] }),
       /* @__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
-  ] }) : showLoading ? /* @__PURE__ */ jsxs39("span", { className: "fd-row fd-gap-xs", role: "status", children: [
-    /* @__PURE__ */ jsx45("span", { className: "fd-spinner", "aria-hidden": "true" }),
-    " Loading\u2026"
-  ] }) : showError ? /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
-    /* @__PURE__ */ jsx45("span", { className: "fd-body-sm", role: "alert", children: "Couldn't load options." }),
-    /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: () => setRetryTick((n) => n + 1), children: "Retry" })
-  ] }) : options.length === 0 ? /* @__PURE__ */ jsx45("span", { className: "fd-body-sm fd-muted", role: "status", children: "No matches" }) : /* @__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",
+  ] }) : /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
+    /* @__PURE__ */ jsxs39(
+      "span",
       {
-        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),
+        className: "fd-row fd-gap-xs" + (liveMessage && !showError ? " fd-muted" : ""),
+        role: liveRole,
         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 })
+          showLoading ? /* @__PURE__ */ jsx45("span", { className: "fd-spinner", "aria-hidden": "true" }) : null,
+          liveMessage ? /* @__PURE__ */ jsx45("span", { className: "fd-body-sm", children: liveMessage }) : null
         ]
-      },
-      o.value
-    );
-  }) });
+      }
+    ),
+    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,
@@ -3471,7 +3498,7 @@ function RangePanel({
       offset: 6,
       width: PANEL_WIDTH.range,
       label: field.label,
-      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", onClick: onClose, children: "Done" }),
+      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,
@@ -3511,33 +3538,39 @@ function DatePanel({
   onClose
 }) {
   const defaultDays = field.defaultDays ?? 30;
-  const [draft, setDraft] = React24.useState(value ?? { kind: "withinDays", days: defaultDays });
+  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) => {
-    const next = { kind: "withinDays", days: days ?? defaultDays };
-    setDraft(next);
+    setDaysDraft(days);
     if (days != null) {
       committedRef.current = true;
-      onChange(next);
+      onChange({ kind: "withinDays", days });
+    } else if (committedRef.current) {
+      committedRef.current = false;
+      onRemove();
     }
   };
   const applyBetween = (from, to) => {
-    const next = { kind: "between", from, to };
-    setDraft(next);
+    setBetween({ from, to });
     if (from && to) {
       committedRef.current = true;
-      onChange(next);
+      onChange({ kind: "between", from, to });
     } else if (committedRef.current) {
       committedRef.current = false;
       onRemove();
     }
   };
-  const switchKind = (kind) => {
-    if (kind === "withinDays") {
-      const days = draft.kind === "withinDays" ? draft.days : defaultDays;
-      setDraft({ kind: "withinDays", days });
-    } else {
-      setDraft({ kind: "between", from: "", to: "" });
+  const switchKind = (next) => {
+    setKind(next);
+    if (next === "between") {
+      setBetween({ from: "", to: "" });
       if (committedRef.current) {
         committedRef.current = false;
         onRemove();
@@ -3545,9 +3578,9 @@ function DatePanel({
     }
   };
   const confirm = () => {
-    if (draft.kind === "withinDays") {
+    if (kind === "withinDays" && daysDraft != null) {
       committedRef.current = true;
-      onChange(draft);
+      onChange({ kind: "withinDays", days: daysDraft });
     }
     onClose();
   };
@@ -3571,16 +3604,16 @@ function DatePanel({
               { value: "withinDays", label: "Within last N days" },
               { value: "between", label: "Between dates" }
             ],
-            value: draft.kind,
+            value: kind,
             onChange: (k) => switchKind(k)
           }
         ),
-        draft.kind === "withinDays" ? /* @__PURE__ */ jsx45(NumberInput, { label: "Days", min: 1, value: draft.days, onChange: (e) => applyWithinDays(e.target.value) }) : /* @__PURE__ */ jsx45(
+        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: draft.from, end: draft.to },
+            value: { start: between.from, end: between.to },
             onChange: (e) => applyBetween(e.target.value.start || "", e.target.value.end || "")
           }
         )