@flytedan/flytebot-design-system 0.30.0 → 0.32.0

package/dist/index.cjs

@@ -233,6 +233,7 @@ __export(index_exports, {
   useServerTable: () => useServerTable,
   useSessionContext: () => useSessionContext,
   useStagedFiles: () => useStagedFiles,
+  validateFilterValue: () => validateFilterValue,
   visibleMessages: () => visibleMessages
 });
 module.exports = __toCommonJS(index_exports);
@@ -2996,6 +2997,48 @@ function useTriggerLabelling(label, id) {
 
 // src/components/forms/NumberInput.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
+var HOLD_DELAY_MS = 400;
+var HOLD_BIG_AFTER = 6;
+var HOLD_FAST_AFTER = 12;
+var holdInterval = (repeats) => repeats > HOLD_FAST_AFTER ? 40 : repeats > HOLD_BIG_AFTER ? 70 : 120;
+function decimalPlaces(n) {
+  if (!Number.isFinite(n)) return 0;
+  const [mantissa, exp] = String(n).toLowerCase().split("e");
+  const frac = (mantissa.split(".")[1] || "").length;
+  return Math.max(0, frac - (exp ? Number(exp) : 0));
+}
+function parseNumberText(text) {
+  const s = text.replace(/,/g, "").trim();
+  if (s === "") return null;
+  if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
+  return Number(s);
+}
+function allowedRange(min, max, integer) {
+  return integer ? { lo: Math.ceil(min), hi: Math.floor(max) } : { lo: min, hi: max };
+}
+function stepNumber({ from, direction, amount, step, min, max, integer }) {
+  const { lo, hi } = allowedRange(min, max, integer);
+  if (lo > hi) return null;
+  const base = from ?? 0;
+  const anchor = Number.isFinite(lo) ? lo : 0;
+  const unit = step > 0 ? step : 1;
+  const travel = amount > 0 ? amount : unit;
+  const magnitude = Math.max(Math.abs(base), Math.abs(anchor), travel, unit, 1);
+  const maxPlaces = Math.max(0, Math.floor(Math.log10(Number.MAX_SAFE_INTEGER / (4 * magnitude))));
+  const places = Math.min(maxPlaces, Math.max(decimalPlaces(base), decimalPlaces(anchor), decimalPlaces(travel), decimalPlaces(unit)));
+  const scale = 10 ** places;
+  const b = Math.round(base * scale);
+  const a = Math.round(anchor * scale);
+  const s = Math.round(unit * scale);
+  const t = Math.round(travel * scale);
+  const target = b + direction * t;
+  let k = direction > 0 ? Math.floor((target - a) / s) : Math.ceil((target - a) / s);
+  if (direction > 0 && a + k * s <= b) k = Math.floor((b - a) / s) + 1;
+  if (direction < 0 && a + k * s >= b) k = Math.ceil((b - a) / s) - 1;
+  let next = (a + k * s) / scale;
+  if (integer && !Number.isInteger(next)) next = direction > 0 ? Math.ceil(next) : Math.floor(next);
+  return Math.min(hi, Math.max(lo, next));
+}
 function NumberInput({
   label,
   help,
@@ -3008,8 +3051,10 @@ function NumberInput({
   max = Infinity,
   step = 1,
   bigStep,
+  integer = false,
   value,
   onChange,
+  onValidityChange,
   format = true,
   className = "",
   style,
@@ -3019,65 +3064,78 @@ function NumberInput({
 }) {
   const fieldId = useFieldId(id);
   const errorId = fieldId + "-error";
-  const num = (v) => {
-    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 { lo, hi } = allowedRange(min, max, integer);
+  const big = bigStep ?? Number((step * 10).toFixed(decimalPlaces(step)));
+  const toText = (v) => v == null || v === "" ? "" : String(v);
+  const toNumber = (v) => {
+    if (v == null || v === "") return null;
+    const n = typeof v === "number" ? v : parseNumberText(v);
+    return n == null || Number.isNaN(n) ? null : n;
   };
-  const [text, setText] = React21.useState(value == null || value === "" ? "" : String(value));
+  const [text, setText] = React21.useState(() => toText(value));
   const [editing, setEditing] = React21.useState(false);
-  const [invalidMessage, setInvalidMessage] = React21.useState(null);
-  const timer = React21.useRef(null);
+  const parsed = parseNumberText(text);
+  const invalidMessage = parsed == null ? null : Number.isNaN(parsed) ? "Enter a number" : integer && !Number.isInteger(parsed) ? "Enter a whole number" : parsed < lo ? "Must be \u2265 " + lo : parsed > hi ? "Must be \u2264 " + hi : null;
+  const valid = invalidMessage == null;
+  const committedRef = React21.useRef(toNumber(value));
+  const onChangeRef = React21.useRef(onChange);
+  onChangeRef.current = onChange;
+  const onValidityChangeRef = React21.useRef(onValidityChange);
+  onValidityChangeRef.current = onValidityChange;
+  const focusedRef = React21.useRef(false);
   React21.useEffect(() => {
-    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);
+    committedRef.current = toNumber(value);
+    if (!focusedRef.current) setText(toText(value));
+  }, [value]);
+  React21.useLayoutEffect(() => {
+    onValidityChangeRef.current?.(valid);
+  }, [valid]);
+  const fire = (n) => {
+    committedRef.current = n ?? null;
+    onChangeRef.current?.({ target: { value: n } });
+  };
+  const bump = (direction, amount) => {
+    const next = stepNumber({ from: committedRef.current, direction, amount, step, min, max, integer });
+    if (next == null) return false;
     setText(String(next));
+    if (next === committedRef.current) return false;
     fire(next);
+    return true;
   };
-  const hold = (dir) => {
-    bump(dir);
-    let n = 0;
+  const bumpRef = React21.useRef(bump);
+  bumpRef.current = bump;
+  const holdTimer = React21.useRef(null);
+  const release = () => {
+    if (holdTimer.current) clearTimeout(holdTimer.current);
+    holdTimer.current = null;
+  };
+  const hold = (direction) => {
+    release();
+    bump(direction, step);
+    let repeats = 0;
     const tick = () => {
-      n++;
-      bump(dir, n > 6 ? 4 : 1);
-      timer.current = setTimeout(tick, n > 12 ? 40 : n > 6 ? 70 : 120);
+      repeats++;
+      if (!bumpRef.current(direction, repeats > HOLD_BIG_AFTER ? big : step)) {
+        release();
+        return;
+      }
+      holdTimer.current = setTimeout(tick, holdInterval(repeats));
     };
-    timer.current = setTimeout(tick, 420);
-  };
-  const release = () => {
-    if (timer.current) clearTimeout(timer.current);
+    holdTimer.current = setTimeout(tick, HOLD_DELAY_MS);
   };
   React21.useEffect(() => () => {
-    if (timer.current) clearTimeout(timer.current);
+    if (holdTimer.current) clearTimeout(holdTimer.current);
   }, []);
-  const shown = editing ? text : (() => {
-    const n = num(text);
-    return n == null ? "" : format ? n.toLocaleString() : String(n);
-  })();
+  const current2 = committedRef.current;
+  const shown = editing || !valid ? text : parsed == null ? "" : format ? parsed.toLocaleString() : String(parsed);
   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;
+  const noRange = lo > hi;
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
     label ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: box, style: { gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: box, children: [
       prefix ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-input-affix", children: prefix }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "input",
@@ -3090,52 +3148,54 @@ function NumberInput({
           value: shown,
           "aria-invalid": shownError ? "true" : void 0,
           "aria-describedby": shownError ? errorId : void 0,
-          onFocus: () => setEditing(true),
+          onFocus: () => {
+            focusedRef.current = true;
+            setEditing(true);
+          },
           onBlur: () => {
+            focusedRef.current = false;
             setEditing(false);
-            if (text.trim() === "") fire(void 0);
+            if (text.trim() === "" && committedRef.current != null) fire(void 0);
           },
           onChange: (e) => {
             const raw = e.target.value;
             setText(raw);
-            if (raw.trim() === "") {
-              setInvalidMessage(null);
-              fire(void 0);
-              return;
-            }
-            const n = num(raw);
+            const n = parseNumberText(raw);
             if (n == null) {
-              setInvalidMessage("Enter a number");
+              if (committedRef.current != null) fire(void 0);
               return;
             }
-            const message = validationMessage(n);
-            setInvalidMessage(message);
-            if (!message) fire(n);
+            if (Number.isNaN(n) || integer && !Number.isInteger(n) || n < lo || n > hi) return;
+            fire(n);
           },
           onKeyDown: (e) => {
             if (e.key === "ArrowUp") {
               e.preventDefault();
-              bump(1, e.shiftKey ? 2 : 1);
+              bump(1, e.shiftKey ? big : step);
             } else if (e.key === "ArrowDown") {
               e.preventDefault();
-              bump(-1, e.shiftKey ? 2 : 1);
+              bump(-1, e.shiftKey ? big : step);
             }
           }
         }
       ),
       suffix ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-input-affix", children: suffix }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "fd-row", style: { gap: 4, flex: "none" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "fd-input-steppers", children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "button",
           {
             type: "button",
             className: "fd-stepbtn",
             "aria-label": stepperName("Decrease"),
-            disabled: disabled || (num(text) ?? 0) <= min,
+            disabled: disabled || noRange || current2 != null && current2 <= lo,
             onPointerDown: () => hold(-1),
             onPointerUp: release,
             onPointerLeave: release,
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "ph ph-minus" })
+            onPointerCancel: release,
+            onClick: (e) => {
+              if (e.detail === 0) bump(-1, step);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "ph ph-minus", "aria-hidden": "true" })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -3144,11 +3204,15 @@ function NumberInput({
             type: "button",
             className: "fd-stepbtn",
             "aria-label": stepperName("Increase"),
-            disabled: disabled || (num(text) ?? 0) >= max,
+            disabled: disabled || noRange || current2 != null && current2 >= hi,
             onPointerDown: () => hold(1),
             onPointerUp: release,
             onPointerLeave: release,
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "ph ph-plus" })
+            onPointerCancel: release,
+            onClick: (e) => {
+              if (e.detail === 0) bump(1, step);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "ph ph-plus", "aria-hidden": "true" })
           }
         )
       ] })
@@ -3433,6 +3497,97 @@ function isFieldSet(field, value) {
     }
   }
 }
+var MAX_WITHIN_DAYS = 3650;
+function effectiveMaxDays(field) {
+  return Math.min(field.maxDays ?? MAX_WITHIN_DAYS, MAX_WITHIN_DAYS);
+}
+function isIsoDate(v) {
+  if (typeof v !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(v)) return false;
+  const d = /* @__PURE__ */ new Date(v + "T00:00:00Z");
+  return !Number.isNaN(d.getTime()) && d.toISOString().slice(0, 10) === v;
+}
+var isOption = (o) => !!o && typeof o.value === "string" && typeof o.label === "string";
+function validateFilterValue(field, value) {
+  switch (field.type) {
+    case "text":
+      return typeof value === "string" ? { ok: true } : { ok: false, reason: "Enter text" };
+    case "select":
+      return field.options.some((o) => o.value === value) ? { ok: true } : { ok: false, reason: "Pick one of the options" };
+    case "multiSelect": {
+      const v = value;
+      if (!v || !Array.isArray(v.values) || v.values.length === 0) {
+        return { ok: false, reason: "Select at least one value" };
+      }
+      if (!v.values.every(isOption)) return { ok: false, reason: "Each value needs a value and a label" };
+      if (field.maxValues != null && v.values.length > field.maxValues) {
+        return { ok: false, reason: "Select at most " + field.maxValues + " values" };
+      }
+      if (!operatorsFor(field).includes(v.operator)) {
+        return { ok: false, reason: "That operator isn't allowed for " + field.label };
+      }
+      return { ok: true };
+    }
+    case "range": {
+      const v = value;
+      if (!v || v.min == null && v.max == null) {
+        return { ok: false, reason: "Enter at least one bound" };
+      }
+      const lo = field.min ?? -Infinity;
+      const hi = field.max ?? Infinity;
+      for (const n of [v.min, v.max]) {
+        if (n == null) continue;
+        if (typeof n !== "number" || !Number.isFinite(n)) return { ok: false, reason: "Enter a number" };
+        if (field.integer && !Number.isInteger(n)) return { ok: false, reason: "Enter a whole number" };
+        if (n < lo) return { ok: false, reason: "Must be \u2265 " + lo };
+        if (n > hi) return { ok: false, reason: "Must be \u2264 " + hi };
+      }
+      if (v.min != null && v.max != null && v.min > v.max) {
+        return { ok: false, reason: "Must be \u2265 " + v.min };
+      }
+      return { ok: true };
+    }
+    case "date": {
+      const v = value;
+      if (!v) return { ok: false, reason: "Pick a date value" };
+      if (v.kind === "withinDays") {
+        const maxDays = effectiveMaxDays(field);
+        if (v.days == null) return { ok: false, reason: "Enter a number of days" };
+        if (!Number.isInteger(v.days)) return { ok: false, reason: "Enter a whole number" };
+        if (v.days < 1) return { ok: false, reason: "Must be \u2265 1" };
+        if (v.days > maxDays) return { ok: false, reason: "Must be \u2264 " + maxDays };
+        return { ok: true };
+      }
+      if (v.kind !== "between") return { ok: false, reason: "Pick a date value" };
+      if (!v.from || !v.to) return { ok: false, reason: "Pick both dates" };
+      if (!isIsoDate(v.from) || !isIsoDate(v.to)) return { ok: false, reason: "Dates must be YYYY-MM-DD" };
+      if (v.from > v.to) return { ok: false, reason: "The start date must be on or before the end date" };
+      return { ok: true };
+    }
+  }
+}
+function isEmptyCandidate(field, candidate) {
+  return field.type !== "text" && field.type !== "select" && !isFieldSet(field, candidate);
+}
+function assertValidFieldDefinition(field) {
+  if (field.type === "multiSelect" && field.maxValues != null && (!Number.isInteger(field.maxValues) || field.maxValues < 1)) {
+    throw new Error(
+      'FilterBar: multiSelect field "' + field.key + '" has an invalid maxValues (' + field.maxValues + ") \u2014 must be a whole number of at least 1."
+    );
+  }
+  if (field.type !== "date") return;
+  const defaultDays = field.defaultDays ?? 30;
+  const maxDays = field.maxDays ?? MAX_WITHIN_DAYS;
+  if (!Number.isInteger(maxDays) || maxDays < 1 || maxDays > MAX_WITHIN_DAYS) {
+    throw new Error(
+      'FilterBar: date field "' + field.key + '" has an invalid maxDays (' + field.maxDays + ") \u2014 must be a whole number from 1 to " + MAX_WITHIN_DAYS + "."
+    );
+  }
+  if (!Number.isInteger(defaultDays) || defaultDays < 1 || defaultDays > maxDays) {
+    throw new Error(
+      'FilterBar: date field "' + field.key + '" has an invalid defaultDays (' + field.defaultDays + ") \u2014 must be a whole number from 1 to maxDays (" + maxDays + ")."
+    );
+  }
+}
 function chipLabel(field, value) {
   switch (field.type) {
     case "text":
@@ -3485,8 +3640,7 @@ function MultiSelectPanel({
   field,
   value,
   anchorRef,
-  onChange,
-  onRemove,
+  onCommit,
   onClose
 }) {
   const allowedOps = operatorsFor(field);
@@ -3495,13 +3649,21 @@ function MultiSelectPanel({
   const selected = value?.values ?? [];
   const selectedRef = React24.useRef(selected);
   selectedRef.current = selected;
+  const operatorRef = React24.useRef(operator);
+  operatorRef.current = operator;
+  const mountedRef = React24.useRef(true);
+  React24.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
   const commit = (nextValues, nextOperator = operator) => {
-    if (nextValues.length === 0) onRemove();
-    else onChange({ operator: nextOperator, values: nextValues });
+    onCommit({ operator: nextOperator, values: nextValues });
   };
   const setOperator = (op) => {
     setDraftOperator(op);
-    if (selected.length > 0) commit(selected, op);
+    if (selectedRef.current.length > 0) commit(selectedRef.current, op);
   };
   const [mode2, setMode] = React24.useState("search");
   const [query, setQuery] = React24.useState("");
@@ -3541,9 +3703,12 @@ function MultiSelectPanel({
   const showError = !!field.loadOptions && asyncState.error;
   const hasListbox = !showLoading && !showError && options.length > 0;
   const isSelected = (o) => selected.some((s) => s.value === o.value);
+  const atLimit = field.maxValues != null && selected.length >= field.maxValues;
   const toggle = (o) => {
-    const next = isSelected(o) ? selected.filter((s) => s.value !== o.value) : [...selected, o];
-    commit(next);
+    const current2 = selectedRef.current;
+    const on = current2.some((s) => s.value === o.value);
+    if (!on && field.maxValues != null && current2.length >= field.maxValues) return;
+    commit(on ? current2.filter((s) => s.value !== o.value) : [...current2, o]);
   };
   const nav = useListboxNav({ count: options.length, onSelect: (i) => toggle(options[i]) });
   useListboxScrollIntoView(nav.active, listRef, hasListbox);
@@ -3551,8 +3716,7 @@ function MultiSelectPanel({
     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 liveMessage = showLoading ? "Loading\u2026" : showError ? "Couldn't load options." : options.length === 0 ? "No matches" : atLimit ? "Limit reached: at most " + field.maxValues + " values" : "";
   const [pasteText, setPasteText] = React24.useState("");
   const [pasteLoading, setPasteLoading] = React24.useState(false);
   const [unmatchedTokens, setUnmatchedTokens] = React24.useState([]);
@@ -3568,13 +3732,19 @@ function MultiSelectPanel({
     setPasteLoading(true);
     setPasteError(null);
     field.resolve(tokens).then((result) => {
+      if (!mountedRef.current) return;
       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()));
+      if (field.maxValues != null && merged.size > field.maxValues) {
+        setPasteError("This filter allows at most " + field.maxValues + " values; adding this list would make " + merged.size + ".");
+        return;
+      }
+      commit(Array.from(merged.values()), operatorRef.current);
       setPasteText("");
-    }).catch((err) => {
+    }, (err) => {
+      if (!mountedRef.current) return;
       setPasteLoading(false);
       setPasteError(err instanceof Error ? err.message : "Could not resolve the pasted list.");
     });
@@ -3652,14 +3822,14 @@ function MultiSelectPanel({
         selected.length,
         " matched"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-row fd-wrap fd-gap-xs", children: selected.map((v) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Tag, { onRemove: () => commit(selected.filter((s) => s.value !== v.value)), children: v.label }, v.value)) })
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-row fd-wrap fd-gap-xs", children: selected.map((v) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Tag, { onRemove: () => commit(selectedRef.current.filter((s) => s.value !== v.value)), children: v.label }, v.value)) })
     ] }) : null
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack fd-gap-sm", children: [
     /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       "span",
       {
         className: "fd-row fd-gap-xs" + (liveMessage && !showError ? " fd-muted" : ""),
-        role: liveRole,
+        role: "status",
         children: [
           showLoading ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-spinner", "aria-hidden": "true" }) : null,
           liveMessage ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-body-sm", children: liveMessage }) : null
@@ -3669,6 +3839,7 @@ function MultiSelectPanel({
     showError ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: () => setRetryTick((n) => n + 1), children: "Retry" }) : null,
     hasListbox ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("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);
+      const blocked = !on && atLimit;
       return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         "div",
         {
@@ -3677,6 +3848,7 @@ function MultiSelectPanel({
           role: "option",
           tabIndex: -1,
           "aria-selected": on,
+          "aria-disabled": blocked ? "true" : void 0,
           className: ["fd-opt", i === nav.active ? "is-active" : "", on ? "is-selected" : ""].filter(Boolean).join(" "),
           onMouseEnter: () => nav.setActive(i),
           onClick: () => toggle(o),
@@ -3710,22 +3882,24 @@ function RangePanel({
   field,
   value,
   anchorRef,
-  onChange,
-  onRemove,
+  onCommit,
   onClose
 }) {
-  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 });
+  const [draft, setDraft] = React24.useState({ min: value?.min, max: value?.max });
+  const draftRef = React24.useRef(draft);
+  const [minTextValid, setMinTextValid] = React24.useState(true);
+  const [maxTextValid, setMaxTextValid] = React24.useState(true);
+  const draftMin = draft.min;
+  const draftMax = draft.max;
+  const isEmpty = draftMin == null && draftMax == null;
+  const validation = isEmpty ? { ok: true } : validateFilterValue(field, { min: draftMin, max: draftMax });
+  const comboError = !isEmpty && !validation.ok ? validation.reason : void 0;
+  const doneDisabled = !minTextValid || !maxTextValid || !!comboError;
+  const apply = (patch) => {
+    const next = { ...draftRef.current, ...patch };
+    draftRef.current = next;
+    setDraft(next);
+    onCommit(next.min == null && next.max == null ? void 0 : next);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     Popover,
@@ -3737,7 +3911,7 @@ function RangePanel({
       offset: 6,
       width: PANEL_WIDTH.range,
       label: field.label,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: onClose, disabled: invalid, children: "Done" }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: onClose, disabled: doneDisabled, children: "Done" }),
       children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack fd-gap-sm", children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           NumberInput,
@@ -3747,8 +3921,10 @@ function RangePanel({
             min: field.min,
             max: field.max,
             step: field.step,
+            integer: field.integer,
             placeholder: field.minPlaceholder,
-            onChange: (e) => apply(e.target.value, draftMax)
+            onChange: (e) => apply({ min: e.target.value }),
+            onValidityChange: setMinTextValid
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -3759,9 +3935,11 @@ function RangePanel({
             min: field.min,
             max: field.max,
             step: field.step,
-            error: invalid ? "Must be \u2265 " + draftMin : void 0,
+            integer: field.integer,
+            error: comboError,
             placeholder: field.maxPlaceholder,
-            onChange: (e) => apply(draftMin, e.target.value)
+            onChange: (e) => apply({ max: e.target.value }),
+            onValidityChange: setMaxTextValid
           }
         )
       ] })
@@ -3772,12 +3950,12 @@ function DatePanel({
   field,
   value,
   anchorRef,
-  onChange,
-  onRemove,
+  onCommit,
   onClose
 }) {
   const defaultDays = field.defaultDays ?? 30;
-  const maxDays = field.maxDays ?? 3650;
+  const maxDays = effectiveMaxDays(field);
+  const [daysTextValid, setDaysTextValid] = React24.useState(true);
   const [kind, setKind] = React24.useState(value?.kind ?? "withinDays");
   const [daysDraft, setDaysDraft] = React24.useState(
     value?.kind === "withinDays" ? value.days : defaultDays
@@ -3785,42 +3963,26 @@ function DatePanel({
   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();
-    }
+    onCommit(days == null ? void 0 : { kind: "withinDays", days });
   };
   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();
-    }
+    onCommit(from && to ? { kind: "between", from, to } : void 0);
   };
   const switchKind = (next) => {
+    if (next === kind) return;
     setKind(next);
-    if (next === "between") {
-      setBetween({ from: "", to: "" });
-      if (committedRef.current) {
-        committedRef.current = false;
-        onRemove();
-      }
-    }
+    if (next === "between") setBetween({ from: "", to: "" });
+    else setDaysDraft(defaultDays);
+    setDaysTextValid(true);
+    onCommit(void 0);
   };
+  const doneDisabled = kind === "withinDays" && !daysTextValid;
   const confirm = () => {
-    if (kind === "withinDays" && daysDraft != null) {
-      committedRef.current = true;
-      onChange({ kind: "withinDays", days: daysDraft });
-    }
+    if (doneDisabled) return;
+    if (kind === "withinDays" && daysDraft != null) onCommit({ kind: "withinDays", days: daysDraft });
     onClose();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -3833,7 +3995,7 @@ function DatePanel({
       offset: 6,
       width: PANEL_WIDTH.date,
       label: field.label,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: confirm, children: "Done" }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: confirm, disabled: doneDisabled, children: "Done" }),
       children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack fd-gap-sm", children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           SegmentedControl,
@@ -3847,7 +4009,19 @@ function DatePanel({
             onChange: (k) => switchKind(k)
           }
         ),
-        kind === "withinDays" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(NumberInput, { label: "Days", min: 1, max: maxDays, step: 1, value: daysDraft ?? "", onChange: (e) => applyWithinDays(e.target.value) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        kind === "withinDays" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          NumberInput,
+          {
+            label: "Days",
+            min: 1,
+            max: maxDays,
+            step: 1,
+            integer: true,
+            value: daysDraft ?? "",
+            onChange: (e) => applyWithinDays(e.target.value),
+            onValidityChange: setDaysTextValid
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           DatePicker,
           {
             range: true,
@@ -3866,6 +4040,33 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
   const addAnchorRef = React24.useRef(null);
   const textInputRef = React24.useRef(null);
   const optionsRef = React24.useRef(null);
+  if (process.env.NODE_ENV !== "production") {
+    for (const f of fields) assertValidFieldDefinition(f);
+  }
+  const latest = React24.useRef({ fields, filters, onFilterChange, onFilterRemove });
+  latest.current = { fields, filters, onFilterChange, onFilterRemove };
+  const commit = (field, candidate) => {
+    const current2 = latest.current.fields.find((f) => f.key === field.key);
+    if (!current2) return { ok: false, reason: "This filter is no longer available" };
+    if (isEmptyCandidate(current2, candidate)) {
+      removeField(current2);
+      return { ok: true };
+    }
+    const result = validateFilterValue(current2, candidate);
+    if (result.ok) {
+      latest.current.filters = { ...latest.current.filters, [current2.key]: candidate };
+      latest.current.onFilterChange(current2.key, candidate);
+    }
+    return result;
+  };
+  const removeField = (field) => {
+    const { filters: now, onFilterRemove: remove } = latest.current;
+    if (!isFieldSet(field, now[field.key])) return;
+    const next = { ...now };
+    delete next[field.key];
+    latest.current.filters = next;
+    remove(field.key);
+  };
   const editingField = panel && panel.kind === "edit" ? fields.find((f) => f.key === panel.key) : void 0;
   const startEditing = (key) => setPanel({ kind: "edit", key });
   const closeEditing = () => setPanel(null);
@@ -3897,7 +4098,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               value: value ?? "",
               placeholder: field.placeholder || field.label,
               "aria-label": field.label,
-              onChange: (e) => onFilterChange(field.key, e.target.value),
+              onChange: (e) => commit(field, e.target.value),
               onKeyDown: (e) => {
                 if (e.key === "Enter") setPanel(null);
                 else if (e.key === "Escape") {
@@ -3916,7 +4117,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               "aria-label": "Remove " + field.label,
               onClick: (e) => {
                 e.stopPropagation();
-                onFilterRemove(field.key);
+                removeField(field);
                 setPanel(null);
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("i", { className: "ph ph-x", "aria-hidden": "true" })
@@ -3929,7 +4130,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
       const chipRef = editing ? editAnchorRef : void 0;
       const toggleOrClose = () => editing ? closeEditing() : startEditing(field.key);
       const remove = () => {
-        if (set) onFilterRemove(field.key);
+        removeField(field);
         closeEditing();
       };
       const chipText = field.label + (set ? ": " + chipLabel(field, value) : "");
@@ -3959,7 +4160,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
                     "aria-selected": on,
                     className: ["fd-opt", on ? "is-selected" : ""].filter(Boolean).join(" "),
                     onClick: () => {
-                      onFilterChange(field.key, o.value);
+                      commit(field, o.value);
                       setPanel(null);
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-opt-label", children: o.label })
@@ -3980,8 +4181,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               field,
               value,
               anchorRef: editAnchorRef,
-              onChange: (v) => onFilterChange(field.key, v),
-              onRemove: () => onFilterRemove(field.key),
+              onCommit: (v) => commit(field, v),
               onClose: closeEditing
             }
           ) : null
@@ -3996,8 +4196,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               field,
               value,
               anchorRef: editAnchorRef,
-              onChange: (v) => onFilterChange(field.key, v),
-              onRemove: () => onFilterRemove(field.key),
+              onCommit: (v) => commit(field, v),
               onClose: closeEditing
             }
           ) : null
@@ -4012,8 +4211,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               field,
               value,
               anchorRef: editAnchorRef,
-              onChange: (v) => onFilterChange(field.key, v),
-              onRemove: () => onFilterRemove(field.key),
+              onCommit: (v) => commit(field, v),
               onClose: closeEditing
             }
           ) : null
@@ -13862,6 +14060,7 @@ function useDocumentTitle(routeTitle, appName) {
   useServerTable,
   useSessionContext,
   useStagedFiles,
+  validateFilterValue,
   visibleMessages
 });
 //# sourceMappingURL=index.cjs.map