@flytedan/flytebot-design-system 0.27.1 → 0.28.0

package/dist/index.cjs

@@ -2953,20 +2953,780 @@ function DataTable({
 }
 
 // src/components/data/FilterBar.tsx
+var React23 = __toESM(require("react"), 1);
+
+// src/components/forms/NumberInput.tsx
+var React21 = __toESM(require("react"), 1);
+
+// src/components/forms/field.tsx
 var React20 = __toESM(require("react"), 1);
 var import_jsx_runtime41 = require("react/jsx-runtime");
+function useFieldId(id) {
+  const generated = React20.useId();
+  return id || generated;
+}
+function FieldLabel({ htmlFor, id, required = false, onClick, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { className: "fd-field-label", htmlFor, id, onClick, children: [
+    children,
+    required ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fd-field-req", "aria-hidden": "true", children: "*" }) : null
+  ] });
+}
+function useTriggerLabelling(label, id) {
+  const fieldId = useFieldId(id);
+  const labelId = fieldId + "-label";
+  return { fieldId, labelId, ariaLabelledBy: label ? labelId + " " + fieldId : void 0 };
+}
+
+// src/components/forms/NumberInput.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function NumberInput({
+  label,
+  help,
+  error,
+  prefix,
+  suffix,
+  required = false,
+  disabled = false,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  bigStep,
+  value,
+  onChange,
+  format = true,
+  className = "",
+  style,
+  placeholder,
+  id,
+  "aria-label": ariaLabel
+}) {
+  const fieldId = useFieldId(id);
+  const num = (v) => {
+    const n = Number(String(v == null ? "" : v).replace(/[^0-9.-]/g, ""));
+    return isNaN(n) ? null : n;
+  };
+  const [text, setText] = React21.useState(value == null || value === "" ? "" : String(value));
+  const [editing, setEditing] = React21.useState(false);
+  const timer = React21.useRef(null);
+  React21.useEffect(() => {
+    if (!editing) setText(value == null || value === "" ? "" : String(value));
+  }, [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));
+    setText(String(next));
+    fire(next);
+  };
+  const hold = (dir) => {
+    bump(dir);
+    let n = 0;
+    const tick = () => {
+      n++;
+      bump(dir, n > 6 ? 4 : 1);
+      timer.current = setTimeout(tick, n > 12 ? 40 : n > 6 ? 70 : 120);
+    };
+    timer.current = setTimeout(tick, 420);
+  };
+  const release = () => {
+    if (timer.current) clearTimeout(timer.current);
+  };
+  React21.useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  const shown = editing ? text : (() => {
+    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 fieldName = label || ariaLabel;
+  const stepperName = (verb) => fieldName ? verb + " " + fieldName : verb;
+  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: [
+      prefix ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-input-affix", children: prefix }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "input",
+        {
+          id: fieldId,
+          "aria-label": ariaLabel,
+          inputMode: "numeric",
+          disabled,
+          placeholder,
+          value: shown,
+          onFocus: () => setEditing(true),
+          onBlur: () => {
+            setEditing(false);
+            const n = num(text);
+            if (n != null) {
+              const c = clamp(n);
+              setText(String(c));
+              fire(c);
+            }
+          },
+          onChange: (e) => {
+            setText(e.target.value);
+            const n = num(e.target.value);
+            if (n != null) fire(n);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "ArrowUp") {
+              e.preventDefault();
+              bump(1, e.shiftKey ? 2 : 1);
+            } else if (e.key === "ArrowDown") {
+              e.preventDefault();
+              bump(-1, e.shiftKey ? 2 : 1);
+            }
+          }
+        }
+      ),
+      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.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "fd-stepbtn",
+            "aria-label": stepperName("Decrease"),
+            disabled: disabled || (num(text) ?? 0) <= min,
+            onPointerDown: () => hold(-1),
+            onPointerUp: release,
+            onPointerLeave: release,
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "ph ph-minus" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "fd-stepbtn",
+            "aria-label": stepperName("Increase"),
+            disabled: disabled || (num(text) ?? 0) >= max,
+            onPointerDown: () => hold(1),
+            onPointerUp: release,
+            onPointerLeave: release,
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "ph ph-plus" })
+          }
+        )
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "fd-field-error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
+      error
+    ] }) : help ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-field-help", children: help }) : null
+  ] });
+}
+
+// src/components/forms/DatePicker.tsx
+var React22 = __toESM(require("react"), 1);
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var iso = (d) => d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
+var parse = (s) => {
+  if (!s) return null;
+  const [y, m, d] = s.split("-").map(Number);
+  return new Date(y, m - 1, d);
+};
+var fmt = (s) => {
+  const d = parse(s);
+  return d ? MONTHS[d.getMonth()].slice(0, 3) + " " + d.getDate() + ", " + d.getFullYear() : "";
+};
+function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
+  const today = /* @__PURE__ */ new Date();
+  const sel = range ? value || {} : { start: value, end: value };
+  const anchor = parse(sel.start) || parse(initialMonth) || today;
+  const [vy, setVy] = React22.useState(anchor.getFullYear());
+  const [vm, setVm] = React22.useState(anchor.getMonth());
+  const [mode2, setMode] = React22.useState("days");
+  const [hover, setHover] = React22.useState(null);
+  const s = parse(sel.start), e = parse(sel.end);
+  const hoverEnd = range && s && !e && hover ? parse(hover) : null;
+  const inRange = (d) => {
+    const lo = s, hi = e || hoverEnd;
+    return lo && hi && d > (lo < hi ? lo : hi) && d < (lo < hi ? hi : lo);
+  };
+  const isEdge = (d) => s && iso(d) === iso(s) || e && iso(d) === iso(e);
+  const clickDay = (d) => {
+    const v = iso(d);
+    if (!range) {
+      onPick(v);
+      return;
+    }
+    if (!sel.start || sel.start && sel.end) onPick({ start: v, end: "" });
+    else {
+      const a = parse(sel.start);
+      onPick(d < a ? { start: v, end: sel.start } : { start: sel.start, end: v });
+    }
+  };
+  const nav = (d) => {
+    let m = vm + d, y = vy;
+    if (m < 0) {
+      m = 11;
+      y--;
+    }
+    if (m > 11) {
+      m = 0;
+      y++;
+    }
+    setVm(m);
+    setVy(y);
+  };
+  const monthGrid = (y, m) => {
+    const startPad = new Date(y, m, 1).getDay();
+    const cells = [];
+    for (let i = 0; i < 42; i++) cells.push(new Date(y, m, i - startPad + 1));
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "fd-cal-grid", style: { width: months > 1 ? 252 : "auto", flex: "none" }, onMouseLeave: () => setHover(null), children: [
+      DOW.map((d) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-cal-dow", children: d }, d)),
+      cells.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "button",
+        {
+          type: "button",
+          className: ["fd-cal-day", d.getMonth() !== m ? "is-out" : "", iso(d) === iso(today) ? "is-today" : "", inRange(d) ? "in-range" : "", isEdge(d) ? "is-edge" : ""].filter(Boolean).join(" "),
+          onClick: () => clickDay(d),
+          onMouseEnter: () => range && setHover(iso(d)),
+          children: d.getDate()
+        },
+        i
+      ))
+    ] });
+  };
+  const nextY = vm === 11 ? vy + 1 : vy, nextM = (vm + 1) % 12;
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "fd-cal", style: { width: months > 1 && mode2 === "days" ? "auto" : void 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "fd-cal-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Previous", onClick: () => mode2 === "years" ? setVy(vy - 12) : mode2 === "months" ? setVy(vy - 1) : nav(-1), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-caret-left" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("button", { type: "button", className: "fd-cal-title", onClick: () => setMode(mode2 === "days" ? "months" : mode2 === "months" ? "years" : "days"), children: [
+        mode2 === "days" ? MONTHS[vm] + " " + vy : mode2 === "months" ? vy : vy - 5 + " \u2013 " + (vy + 6),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-caret-down", style: { fontSize: 10, marginLeft: 6, color: "var(--text-muted)" } })
+      ] }),
+      months > 1 && mode2 === "days" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-cal-title", style: { cursor: "default", background: "none" }, children: MONTHS[nextM] + " " + nextY }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Next", onClick: () => mode2 === "years" ? setVy(vy + 12) : mode2 === "months" ? setVy(vy + 1) : nav(1), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-caret-right" }) })
+    ] }),
+    mode2 === "days" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { display: "flex", gap: 18 }, children: [
+      monthGrid(vy, vm),
+      months > 1 ? monthGrid(nextY, nextM) : null
+    ] }) : mode2 === "months" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "fd-cal-grid-months", children: MONTHS.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "fd-cal-cell" + (i === vm && s && s.getFullYear() === vy ? " is-sel" : ""),
+        onClick: () => {
+          setVm(i);
+          setMode("days");
+        },
+        children: m.slice(0, 3)
+      },
+      m
+    )) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "fd-cal-grid-months", children: Array.from({ length: 12 }, (_, i) => vy - 5 + i).map((y) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "fd-cal-cell" + (y === vy ? " is-sel" : ""),
+        onClick: () => {
+          setVy(y);
+          setMode("months");
+        },
+        children: y
+      },
+      y
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "fd-cal-foot", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "fd-btn fd-btn-link",
+          style: { fontSize: 12.5 },
+          onClick: () => {
+            setVy(today.getFullYear());
+            setVm(today.getMonth());
+            setMode("days");
+          },
+          children: "Today"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { style: { flex: 1 } }),
+      range && sel.start ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "fd-body-sm fd-muted", children: [
+        fmt(sel.start),
+        sel.end ? " \u2192 " + fmt(sel.end) : " \u2192 pick an end"
+      ] }) : null
+    ] })
+  ] });
+}
+function DatePicker({ label, help, error, required = false, disabled = false, range = false, value, onChange, placeholder, id, className = "", style, ...rest }) {
+  const { fieldId, labelId, ariaLabelledBy } = useTriggerLabelling(label, id);
+  const [open, setOpen] = React22.useState(false);
+  const rootRef = React22.useRef(null);
+  const boxRef = React22.useRef(null);
+  const display = range ? value && value.start ? fmt(value.start) + (value.end ? "  \u2192  " + fmt(value.end) : "  \u2192  \u2026") : "" : fmt(value);
+  const toggle = () => {
+    if (!disabled) setOpen(!open);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: ["fd-field", "fd-popfield", open ? "is-open" : "", className].filter(Boolean).join(" "), style, ref: rootRef, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FieldLabel, { id: labelId, required, onClick: toggle, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: ["fd-input", error ? "fd-input-error" : "", disabled ? "fd-input-disabled" : ""].filter(Boolean).join(" "), style: { cursor: disabled ? "not-allowed" : "pointer" }, onClick: toggle, ref: boxRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-input-icon", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-calendar-blank", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "button",
+        {
+          type: "button",
+          id: fieldId,
+          "aria-labelledby": ariaLabelledBy,
+          title: truncationTitle(display),
+          disabled,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              toggle();
+            }
+          },
+          style: { all: "unset", flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: "inherit", color: display ? "var(--text)" : "var(--text-muted)" },
+          ...rest,
+          children: display || placeholder || (range ? "Pick a date range" : "Pick a date")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-select-caret", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-caret-down", "aria-hidden": "true" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      Popover,
+      {
+        open,
+        anchorRef: boxRef,
+        triggerRef: rootRef,
+        onClose: () => setOpen(false),
+        placement: "bottom-start",
+        offset: 6,
+        role: "presentation",
+        style: { width: "max-content" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          Calendar,
+          {
+            range,
+            months: range ? 2 : 1,
+            value,
+            onPick: (v) => {
+              onChange && onChange({ target: { value: v } });
+              if (!range || v.start && v.end) setOpen(false);
+            }
+          }
+        )
+      }
+    ),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "fd-field-error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
+      error
+    ] }) : help ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-field-help", children: help }) : null
+  ] });
+}
+
+// src/components/forms/Textarea.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function Textarea({ label, help, error, required = false, rows = 4, disabled = false, id, className = "", style, ...rest }) {
+  const fieldId = useFieldId(id);
+  const box = ["fd-input", "fd-input-textarea", error ? "fd-input-error" : "", disabled ? "fd-input-disabled" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: box, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("textarea", { id: fieldId, rows, disabled, "aria-invalid": error ? "true" : void 0, ...rest }) }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "fd-field-error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
+      error
+    ] }) : help ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-field-help", children: help }) : null
+  ] });
+}
+
+// src/components/data/FilterBar.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var isSet = (v) => !(v == null || v === "" || v === false);
+function isFieldSet(field, value) {
+  switch (field.type) {
+    case "text":
+    case "select":
+      return isSet(value);
+    case "multiSelect":
+    case "pasteList": {
+      const v = value;
+      return !!v && Array.isArray(v.values) && v.values.length > 0;
+    }
+    case "range": {
+      const v = value;
+      return !!v && (v.min != null || v.max != null);
+    }
+    case "date": {
+      const v = value;
+      if (!v) return false;
+      return v.kind === "withinDays" ? v.days != null : !!(v.from || v.to);
+    }
+  }
+}
+function chipLabel(field, value) {
+  switch (field.type) {
+    case "text":
+      return String(value ?? "");
+    case "select": {
+      const chosen = field.options.find((o) => o.value === value);
+      return chosen ? chosen.label : String(value ?? "");
+    }
+    case "multiSelect":
+    case "pasteList": {
+      const v = value;
+      if (!v || !v.values.length) return "";
+      const prefix = v.operator === "notIn" ? "Not " : "";
+      return v.values.length <= 2 ? prefix + v.values.map((o) => o.label).join(", ") : prefix + v.values.length + " selected";
+    }
+    case "range": {
+      const v = value;
+      if (!v) return "";
+      if (v.min != null && v.max != null) return v.min + "\u2013" + v.max;
+      if (v.min != null) return "\u2265 " + v.min;
+      if (v.max != null) return "\u2264 " + v.max;
+      return "";
+    }
+    case "date": {
+      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");
+    }
+  }
+}
+function OperatorToggle({
+  operator,
+  onChange,
+  label
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    SegmentedControl,
+    {
+      "aria-label": label + " \u2014 include or exclude",
+      options: [
+        { value: "in", label: "Is any of" },
+        { value: "notIn", label: "Is none of" }
+      ],
+      value: operator,
+      onChange: (v) => onChange(v)
+    }
+  );
+}
+function EditPopover({ zIndex, width, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    "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,
+  onChange,
+  onClose
+}) {
+  const operator = value?.operator ?? "in";
+  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(() => {
+    inputRef.current?.focus();
+  }, []);
+  React23.useEffect(() => {
+    if (!field.loadOptions) return;
+    let cancelled = false;
+    setLoading(true);
+    const loadOptions = field.loadOptions;
+    const t = setTimeout(() => {
+      loadOptions(query).then((opts) => {
+        if (!cancelled) {
+          setAsyncOptions(opts);
+          setLoading(false);
+        }
+      }).catch(() => {
+        if (!cancelled) {
+          setAsyncOptions([]);
+          setLoading(false);
+        }
+      });
+    }, 300);
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [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]);
+  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 });
+  };
+  const activeId = options[active] ? listId + "-opt-" + active : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack", style: { gap: "var(--s-8)", width: 260 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OperatorToggle, { operator, onChange: (op) => onChange({ operator: op, values: selected }), label: field.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "input",
+      {
+        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),
+        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") {
+            e.preventDefault();
+            if (options[active]) toggle(options[active]);
+          } else if (e.key === "Escape") {
+            e.stopPropagation();
+            onClose();
+          }
+        }
+      }
+    ),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-row fd-body-sm fd-muted", style: { gap: "var(--s-4)" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-spinner", "aria-hidden": "true" }),
+      " Loading\u2026"
+    ] }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-body-sm fd-muted", children: "No matches" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "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__ */ (0, import_jsx_runtime45.jsxs)(
+            "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__ */ (0, import_jsx_runtime45.jsx)("i", { className: on ? "ph ph-check-square" : "ph ph-square", "aria-hidden": "true" }),
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-body-sm", style: { flex: 1, color: "var(--text)" }, children: o.label })
+              ]
+            },
+            o.value
+          );
+        })
+      }
+    ),
+    selected.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-body-sm fd-muted", children: [
+      selected.length,
+      " selected"
+    ] }) : null
+  ] });
+}
+function RangePanel({
+  field,
+  value,
+  onChange,
+  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__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack", style: { gap: "var(--s-8)", width: 240 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      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__ */ (0, import_jsx_runtime45.jsx)(
+      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__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: onClose, children: "Done" })
+  ] });
+}
+function DatePanel({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  const kind = value?.kind ?? "withinDays";
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack", style: { gap: "var(--s-8)", width: 300 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      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__ */ (0, import_jsx_runtime45.jsx)(
+      NumberInput,
+      {
+        label: "Days",
+        min: 1,
+        value: value?.kind === "withinDays" ? value.days : field.defaultDays ?? 30,
+        onChange: (e) => onChange({ kind: "withinDays", days: e.target.value })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      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 || "" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(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__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack", style: { gap: "var(--s-8)", width: 320 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OperatorToggle, { operator, onChange: (op) => onChange({ operator: op, values: selected }), label: field.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { ref: wrapRef, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      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();
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: doResolve, disabled: loading || !text.trim(), children: loading ? "Resolving\u2026" : "Resolve" }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Banner, { tone: "danger", title: "Couldn't resolve the list", detail: error }) : null,
+    unmatched.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Banner, { tone: "warn", title: unmatched.length + " didn't match", detail: unmatched.join(", ") }) : null,
+    selected.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack", style: { gap: "var(--s-4)" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-body-sm fd-muted", children: [
+        selected.length,
+        " matched"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-row", style: { flexWrap: "wrap", gap: "var(--s-4)" }, children: selected.map((v) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Tag, { onRemove: () => onChange({ operator, values: selected.filter((s) => s.value !== v.value) }), children: v.label }, v.value)) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", onClick: onClose, children: "Done" })
+  ] });
+}
 function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align = "left", className = "", ...rest }) {
-  const [panel, setPanel] = React20.useState(null);
+  const [panel, setPanel] = React23.useState(null);
   const zIndex = useOverlayLayer(!!panel);
-  const rootRef = React20.useRef(null);
-  const textInputRef = React20.useRef(null);
-  const optionsRef = React20.useRef(null);
+  const rootRef = React23.useRef(null);
+  const textInputRef = React23.useRef(null);
+  const optionsRef = React23.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 === "select");
-  React20.useEffect(() => {
+  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) => {
@@ -2979,7 +3739,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
       document.removeEventListener("keydown", esc);
     };
   }, [dismissible]);
-  React20.useEffect(() => {
+  React23.useEffect(() => {
     if (!panel || panel.kind !== "edit") return;
     if (editingField?.type === "text") {
       textInputRef.current?.focus();
@@ -2988,20 +3748,20 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
       target?.focus();
     }
   }, [panel]);
-  const addableFields = fields.filter((f) => !isSet(filters[f.key]));
+  const addableFields = fields.filter((f) => !isFieldSet(f, filters[f.key]));
   const startEditing = (key) => setPanel({ kind: "edit", key });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className, style: { position: "relative", display: "inline-flex", flexWrap: "wrap", alignItems: "center", gap: 8 }, ref: rootRef, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className, style: { position: "relative", display: "inline-flex", flexWrap: "wrap", alignItems: "center", gap: 8 }, ref: rootRef, ...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__ */ (0, import_jsx_runtime41.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "span",
           {
             className: "fd-tag",
             style: { background: "var(--surface-brand)", borderColor: "var(--border-brand)", cursor: "text" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 "input",
                 {
                   ref: textInputRef,
@@ -3020,7 +3780,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
                   style: { all: "unset", minWidth: 90, color: "var(--text-on-surface-brand)" }
                 }
               ),
-              isSet(value) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              isSet(value) ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 "span",
                 {
                   className: "fd-tag-remove",
@@ -3031,7 +3791,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
                     onFilterRemove(field.key);
                     setPanel(null);
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("i", { className: "ph ph-x", "aria-hidden": "true" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("i", { className: "ph ph-x", "aria-hidden": "true" })
                 }
               ) : null
             ]
@@ -3041,22 +3801,22 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
       }
       if (editing && field.type === "select") {
         const chosen = field.options.find((o) => o.value === value);
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tag, { selected: true, onClick: () => setPanel(null), onRemove: () => {
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Tag, { selected: true, onClick: () => setPanel(null), onRemove: () => {
             if (isSet(value)) onFilterRemove(field.key);
             setPanel(null);
           }, children: [
             field.label,
             chosen ? ": " + chosen.label : ""
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "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__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fd-stack", role: "listbox", "aria-label": field.label, ref: optionsRef, style: { gap: 2 }, children: field.options.map((o) => {
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-stack", role: "listbox", "aria-label": field.label, ref: optionsRef, style: { gap: 2 }, children: field.options.map((o) => {
                 const on = o.value === value;
-                return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3068,7 +3828,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
                       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__ */ (0, import_jsx_runtime41.jsx)("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__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-body-sm", style: { flex: 1, fontWeight: on ? 700 : 500, color: on ? "var(--text-on-surface-brand)" : "var(--text)" }, children: o.label })
                   },
                   o.value
                 );
@@ -3077,19 +3837,69 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
           ) })
         ] }, field.key);
       }
-      if (isSet(value)) {
-        const chosen = field.type === "select" ? field.options.find((o) => o.value === value) : void 0;
-        const display = chosen ? chosen.label : String(value);
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tag, { selected: true, onClick: () => startEditing(field.key), onRemove: () => onFilterRemove(field.key), children: [
+      if (editing && field.type === "multiSelect") {
+        const mv = value;
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(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__ */ (0, import_jsx_runtime45.jsx)(EditPopover, { zIndex, width: 260, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(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__ */ (0, import_jsx_runtime45.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(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__ */ (0, import_jsx_runtime45.jsx)(EditPopover, { zIndex, width: 240, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RangePanel, { field, value: rv, onChange: (v) => onFilterChange(field.key, v), onClose: () => setPanel(null) }) })
+        ] }, field.key);
+      }
+      if (editing && field.type === "date") {
+        const dv = value;
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(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__ */ (0, import_jsx_runtime45.jsx)(EditPopover, { zIndex, width: 300, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DatePanel, { field, value: dv, onChange: (v) => onFilterChange(field.key, v), onClose: () => setPanel(null) }) })
+        ] }, field.key);
+      }
+      if (editing && field.type === "pasteList") {
+        const pv = value;
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(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__ */ (0, import_jsx_runtime45.jsx)(EditPopover, { zIndex, width: 320, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PasteListPanel, { field, value: pv, onChange: (v) => onFilterChange(field.key, v), onClose: () => setPanel(null) }) })
+        ] }, field.key);
+      }
+      if (isFieldSet(field, value)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Tag, { selected: true, onClick: () => startEditing(field.key), onRemove: () => onFilterRemove(field.key), children: [
           field.label,
           ": ",
-          display
+          chipLabel(field, value)
         ] }, field.key);
       }
       return null;
     }),
-    addableFields.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    addableFields.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         Button,
         {
           size: "sm",
@@ -3101,14 +3911,14 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
           children: "Filter"
         }
       ),
-      panel?.kind === "add" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      panel?.kind === "add" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "span",
         {
           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__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "fd-stack", role: "menu", "aria-label": "Add filter", style: { gap: 2 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Add filter" }),
-            addableFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack", role: "menu", "aria-label": "Add filter", style: { gap: 2 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Add filter" }),
+            addableFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "button",
               {
                 type: "button",
@@ -3116,7 +3926,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
                 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__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fd-body-sm", style: { flex: 1, color: "var(--text)" }, children: f.label })
+                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-body-sm", style: { flex: 1, color: "var(--text)" }, children: f.label })
               },
               f.key
             ))
@@ -3128,7 +3938,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
 }
 
 // src/components/data/StatTile.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function isZeroDelta(delta) {
   if (!delta) return false;
   const match = delta.match(/[\d.]+/);
@@ -3139,23 +3949,23 @@ function StatTile({ label, value, sub, delta, invert = false, loading = false, c
   const isZero = isZeroDelta(delta);
   const isGood = invert ? isDecrease : !isDecrease;
   const deltaToneClass = isZero ? "fd-stat-delta-neutral" : isGood ? "fd-stat-delta-up" : "fd-stat-delta-down";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: ["fd-stat", compact3 ? "fd-stat-compact" : "", className].filter(Boolean).join(" "), ...rest, children: [
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-skel fd-skel-text", style: { display: "block", height: compact3 ? 20 : 28, width: "62%" } }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "fd-stat-top", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-stat-figure", children: value }),
-      delta ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: deltaToneClass, style: { fontWeight: 600, fontSize: "var(--body-sm-size)", flex: "none" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "ph ph-" + (isZero ? "minus" : "arrow-" + (isDecrease ? "down" : "up") + "-right"), "aria-hidden": "true" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: ["fd-stat", compact3 ? "fd-stat-compact" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "fd-skel fd-skel-text", style: { display: "block", height: compact3 ? 20 : 28, width: "62%" } }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "fd-stat-top", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "fd-stat-figure", children: value }),
+      delta ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: deltaToneClass, style: { fontWeight: 600, fontSize: "var(--body-sm-size)", flex: "none" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("i", { className: "ph ph-" + (isZero ? "minus" : "arrow-" + (isDecrease ? "down" : "up") + "-right"), "aria-hidden": "true" }),
         " ",
         delta
       ] }) : null
     ] }),
-    !loading && sub ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-stat-sub", children: sub }) : null,
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-skel fd-skel-text", style: { display: "block", height: 10, width: "40%", marginTop: 8 } }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-stat-label", style: { display: "block" }, children: label })
+    !loading && sub ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "fd-stat-sub", children: sub }) : null,
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "fd-skel fd-skel-text", style: { display: "block", height: 10, width: "40%", marginTop: 8 } }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "fd-stat-label", style: { display: "block" }, children: label })
   ] });
 }
 
 // src/components/data/CodeBlock.tsx
-var React21 = __toESM(require("react"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var React24 = __toESM(require("react"), 1);
+var import_jsx_runtime47 = require("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 = {
   js: [
@@ -3310,13 +4120,13 @@ function tokenize(src, lang) {
   return out;
 }
 function Highlighted({ code, lang }) {
-  const toks = React21.useMemo(() => tokenize(code, lang), [code, lang]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
+  const toks = React24.useMemo(() => tokenize(code, lang), [code, lang]);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
 }
 function useCopy() {
-  const [done, setDone] = React21.useState(false);
-  const timer = React21.useRef(null);
-  React21.useEffect(() => () => {
+  const [done, setDone] = React24.useState(false);
+  const timer = React24.useRef(null);
+  React24.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
   const copy = (text) => {
@@ -3352,37 +4162,37 @@ function CodeBlock({
   actions,
   className = ""
 }) {
-  const [wrap, setWrap] = React21.useState(!!wrapDefault);
-  const [open, setOpen] = React21.useState(false);
+  const [wrap, setWrap] = React24.useState(!!wrapDefault);
+  const [open, setOpen] = React24.useState(false);
   const [copied, copy] = useCopy();
   const body = String(code).replace(/\n$/, "");
   const lines = body.split("\n");
   const foldable = collapseAfter > 0 && lines.length > collapseAfter + 6;
   const shown = foldable && !open ? lines.slice(0, collapseAfter).join("\n") : body;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: ["fd-code", wrap ? "is-wrap" : "", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "fd-code-head", children: [
-      filename ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-code-file", children: filename }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-code-lang", children: languageLabel(language) }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-code-spacer" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: ["fd-code", wrap ? "is-wrap" : "", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fd-code-head", children: [
+      filename ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "fd-code-file", children: filename }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "fd-code-lang", children: languageLabel(language) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "fd-code-spacer" }),
       actions,
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", className: "fd-code-act", onClick: () => setWrap((v) => !v), "aria-pressed": wrap, title: wrap ? "No wrap" : "Soft wrap", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-text-" + (wrap ? "columns" : "align-left"), "aria-hidden": "true" }) }),
-      copyable ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("button", { type: "button", className: "fd-code-act" + (copied ? " is-done" : ""), onClick: () => copy(body), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-" + (copied ? "check" : "copy"), "aria-hidden": "true" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: copied ? "Copied" : "Copy" })
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { type: "button", className: "fd-code-act", onClick: () => setWrap((v) => !v), "aria-pressed": wrap, title: wrap ? "No wrap" : "Soft wrap", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("i", { className: "ph ph-text-" + (wrap ? "columns" : "align-left"), "aria-hidden": "true" }) }),
+      copyable ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("button", { type: "button", className: "fd-code-act" + (copied ? " is-done" : ""), onClick: () => copy(body), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("i", { className: "ph ph-" + (copied ? "check" : "copy"), "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: copied ? "Copied" : "Copy" })
       ] }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "fd-code-body", children: [
-      lineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("pre", { className: "fd-code-gutter", "aria-hidden": "true", children: shown.split("\n").map((_, i) => i + 1 + "\n").join("") }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("pre", { className: "fd-code-pre", tabIndex: 0, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("code", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Highlighted, { code: shown, lang: language }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fd-code-body", children: [
+      lineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("pre", { className: "fd-code-gutter", "aria-hidden": "true", children: shown.split("\n").map((_, i) => i + 1 + "\n").join("") }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("pre", { className: "fd-code-pre", tabIndex: 0, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("code", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Highlighted, { code: shown, lang: language }) }) })
     ] }),
-    foldable ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("button", { type: "button", className: "fd-code-fold", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-caret-" + (open ? "up" : "down"), "aria-hidden": "true" }),
+    foldable ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("button", { type: "button", className: "fd-code-fold", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("i", { className: "ph ph-caret-" + (open ? "up" : "down"), "aria-hidden": "true" }),
       open ? "Collapse" : "Show all " + lines.length + " lines"
     ] }) : null
   ] });
 }
 function DiffBlock({ diff = "", filename, collapseAfter = 34, className = "" }) {
-  const [open, setOpen] = React21.useState(false);
+  const [open, setOpen] = React24.useState(false);
   const [copied, copy] = useCopy();
   const raw = String(diff).replace(/\n$/, "");
   const all = raw.split("\n").map((line) => {
@@ -3396,40 +4206,40 @@ function DiffBlock({ diff = "", filename, collapseAfter = 34, className = "" })
   const dels = all.filter((l) => l.k === "del").length;
   const foldable = collapseAfter > 0 && all.length > collapseAfter + 6;
   const rows = foldable && !open ? all.slice(0, collapseAfter) : all;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: ["fd-code", "fd-diff", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "fd-code-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-git-diff fd-code-icon", "aria-hidden": "true" }),
-      filename ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-code-file", children: filename }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-code-lang", children: "Diff" }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "fd-diff-stat fd-tabular", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "is-add", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: ["fd-code", "fd-diff", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fd-code-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("i", { className: "ph ph-git-diff fd-code-icon", "aria-hidden": "true" }),
+      filename ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "fd-code-file", children: filename }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "fd-code-lang", children: "Diff" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "fd-diff-stat fd-tabular", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "is-add", children: [
           "+",
           adds
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "is-del", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "is-del", children: [
           "\u2212",
           dels
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-code-spacer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("button", { type: "button", className: "fd-code-act" + (copied ? " is-done" : ""), onClick: () => copy(raw), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-" + (copied ? "check" : "copy"), "aria-hidden": "true" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: copied ? "Copied" : "Copy" })
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "fd-code-spacer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("button", { type: "button", className: "fd-code-act" + (copied ? " is-done" : ""), onClick: () => copy(raw), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("i", { className: "ph ph-" + (copied ? "check" : "copy"), "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: copied ? "Copied" : "Copy" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "fd-diff-body", children: rows.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "fd-diff-line is-" + r.k, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fd-diff-mark", "aria-hidden": "true", children: r.k === "add" ? "+" : r.k === "del" ? "\u2212" : "" }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("code", { children: r.k === "add" || r.k === "del" ? r.line.slice(1) : r.line })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fd-diff-body", children: rows.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fd-diff-line is-" + r.k, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "fd-diff-mark", "aria-hidden": "true", children: r.k === "add" ? "+" : r.k === "del" ? "\u2212" : "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("code", { children: r.k === "add" || r.k === "del" ? r.line.slice(1) : r.line })
     ] }, i)) }),
-    foldable ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("button", { type: "button", className: "fd-code-fold", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "ph ph-caret-" + (open ? "up" : "down"), "aria-hidden": "true" }),
+    foldable ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("button", { type: "button", className: "fd-code-fold", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("i", { className: "ph ph-caret-" + (open ? "up" : "down"), "aria-hidden": "true" }),
       open ? "Collapse" : "Show all " + all.length + " lines"
     ] }) : null
   ] });
 }
 
 // src/components/data/Markdown.tsx
-var React22 = __toESM(require("react"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var React25 = __toESM(require("react"), 1);
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var SAFE = /^(?:https?:|mailto:|tel:|#|\/|\.{1,2}\/)/i;
 var safeHref = (h) => SAFE.test(String(h || "").trim()) ? String(h).trim() : null;
 var INLINE = [
@@ -3459,22 +4269,22 @@ function inlineNodes(src, ctx, keyBase) {
     const { kind, m } = best;
     if (m.index > 0) out.push(rest.slice(0, m.index));
     const g = (i) => m[i];
-    if (kind === "code") out.push(/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("code", { className: "fd-md-code", children: g(1) }, key()));
+    if (kind === "code") out.push(/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("code", { className: "fd-md-code", children: g(1) }, key()));
     else if (kind === "image") {
       const src2 = safeHref(g(2));
-      out.push(ctx.allowImages && src2 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("img", { className: "fd-md-img", src: src2, alt: g(1) || "", title: g(3) || void 0, loading: "lazy" }, key()) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-md-imgalt", children: g(1) || "image" }, key()));
+      out.push(ctx.allowImages && src2 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("img", { className: "fd-md-img", src: src2, alt: g(1) || "", title: g(3) || void 0, loading: "lazy" }, key()) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "fd-md-imgalt", children: g(1) || "image" }, key()));
     } else if (kind === "link") {
       const href = safeHref(g(2));
-      out.push(href ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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__ */ (0, import_jsx_runtime44.jsx)("span", { children: g(1) }, key()));
+      out.push(href ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("span", { children: g(1) }, key()));
     } else if (kind === "cite") {
-      out.push(ctx.renderCitation ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(React22.Fragment, { children: ctx.renderCitation(g(1)) }, key()) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("sup", { className: "fd-md-cite", children: g(1) }, key()));
-    } else if (kind === "strongem") out.push(/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("strong", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("em", { children: inlineNodes(g(1), ctx, key()) }) }, key()));
-    else if (kind === "strong") out.push(/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("strong", { children: inlineNodes(g(1) || g(2), ctx, key()) }, key()));
-    else if (kind === "em") out.push(/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("em", { children: inlineNodes(g(1) || g(2), ctx, key()) }, key()));
-    else if (kind === "del") out.push(/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("del", { children: inlineNodes(g(1), ctx, key()) }, key()));
+      out.push(ctx.renderCitation ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(React25.Fragment, { children: ctx.renderCitation(g(1)) }, key()) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("sup", { className: "fd-md-cite", children: g(1) }, key()));
+    } else if (kind === "strongem") out.push(/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("strong", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("em", { children: inlineNodes(g(1), ctx, key()) }) }, key()));
+    else if (kind === "strong") out.push(/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("strong", { children: inlineNodes(g(1) || g(2), ctx, key()) }, key()));
+    else if (kind === "em") out.push(/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("em", { children: inlineNodes(g(1) || g(2), ctx, key()) }, key()));
+    else if (kind === "del") out.push(/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("del", { children: inlineNodes(g(1), ctx, key()) }, key()));
     else if (kind === "autolink" || kind === "bare") {
       const href = safeHref(g(1));
-      out.push(href ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", onClick: ctx.onLinkClick, children: g(1).replace(/^mailto:/, "") }, key()) : g(1));
+      out.push(href ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", onClick: ctx.onLinkClick, children: g(1).replace(/^mailto:/, "") }, key()) : g(1));
     }
     rest = rest.slice(m.index + m[0].length);
   }
@@ -3592,33 +4402,33 @@ function renderBlocks(blocks, ctx, path) {
     const k = path + "-" + i;
     switch (b.t) {
       case "code": {
-        if ((b.lang || "").toLowerCase() === "diff") return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DiffBlock, { diff: b.code, filename: b.file || void 0 }, k);
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CodeBlock, { code: b.code, language: b.lang, filename: b.file || void 0, ...ctx.codeProps || {} }, k);
+        if ((b.lang || "").toLowerCase() === "diff") return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DiffBlock, { diff: b.code, filename: b.file || void 0 }, k);
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CodeBlock, { code: b.code, language: b.lang, filename: b.file || void 0, ...ctx.codeProps || {} }, k);
       }
       case "h": {
         const lvl = Math.min(6, Math.max(1, b.level + (ctx.headingOffset || 0)));
         const Tag2 = "h" + lvl;
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Tag2, { className: "fd-md-h fd-md-h" + lvl, children: inlineNodes(b.text, ctx, k) }, k);
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Tag2, { className: "fd-md-h fd-md-h" + lvl, children: inlineNodes(b.text, ctx, k) }, k);
       }
       case "hr":
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("hr", { className: "fd-md-hr" }, k);
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("hr", { className: "fd-md-hr" }, k);
       case "quote":
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("blockquote", { className: "fd-md-quote", children: renderBlocks(b.children, ctx, k) }, k);
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("blockquote", { className: "fd-md-quote", children: renderBlocks(b.children, ctx, k) }, k);
       case "list": {
         const Tag2 = b.ordered ? "ol" : "ul";
         const isTask = b.items.some((it) => it.checked != null);
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Tag2, { className: "fd-md-list" + (isTask ? " is-task" : ""), start: b.ordered && b.start !== 1 ? b.start : void 0, children: b.items.map((it, j) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { className: it.checked != null ? it.checked ? "is-done" : "is-todo" : void 0, children: [
-          it.checked != null ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-md-task", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "ph ph-" + (it.checked ? "check-square" : "square") }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-md-li", children: renderBlocks(it.children, ctx, k + "-" + j) })
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Tag2, { className: "fd-md-list" + (isTask ? " is-task" : ""), start: b.ordered && b.start !== 1 ? b.start : void 0, children: b.items.map((it, j) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("li", { className: it.checked != null ? it.checked ? "is-done" : "is-todo" : void 0, children: [
+          it.checked != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "fd-md-task", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("i", { className: "ph ph-" + (it.checked ? "check-square" : "square") }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "fd-md-li", children: renderBlocks(it.children, ctx, k + "-" + j) })
         ] }, k + "-" + j)) }, k);
       }
       case "table":
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-md-tablewrap", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("table", { className: "fd-md-table", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tr", { children: b.head.map((c, j) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("th", { style: { textAlign: b.align[j] || "left" }, children: inlineNodes(c, ctx, k + "h" + j) }, j)) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tbody", { children: b.rows.map((r, ri) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tr", { children: b.head.map((_, ci) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { style: { textAlign: b.align[ci] || "left" }, children: inlineNodes(r[ci] || "", ctx, k + ri + "c" + ci) }, ci)) }, ri)) })
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "fd-md-tablewrap", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("table", { className: "fd-md-table", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tr", { children: b.head.map((c, j) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { style: { textAlign: b.align[j] || "left" }, children: inlineNodes(c, ctx, k + "h" + j) }, j)) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tbody", { children: b.rows.map((r, ri) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tr", { children: b.head.map((_, ci) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { style: { textAlign: b.align[ci] || "left" }, children: inlineNodes(r[ci] || "", ctx, k + ri + "c" + ci) }, ci)) }, ri)) })
         ] }) }, k);
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "fd-md-p", children: inlineNodes(b.text, ctx, k) }, k);
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "fd-md-p", children: inlineNodes(b.text, ctx, k) }, k);
     }
   });
 }
@@ -3632,25 +4442,25 @@ function Markdown({
   onLinkClick
 }) {
   const ctx = { allowImages, headingOffset, renderCitation, onLinkClick, codeProps };
-  const blocks = React22.useMemo(() => parseBlocks(source), [source]);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: ["fd-md", className].filter(Boolean).join(" "), children: renderBlocks(blocks, ctx, "b") });
+  const blocks = React25.useMemo(() => parseBlocks(source), [source]);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: ["fd-md", className].filter(Boolean).join(" "), children: renderBlocks(blocks, ctx, "b") });
 }
 function MarkdownInline({ source = "", className = "", onLinkClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: ["fd-md-inline", className].filter(Boolean).join(" "), children: inlineNodes(source, { allowImages: false, onLinkClick }, "i") });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: ["fd-md-inline", className].filter(Boolean).join(" "), children: inlineNodes(source, { allowImages: false, onLinkClick }, "i") });
 }
 function markdownToText(src) {
   return String(src == null ? "" : src).replace(/```[\w+#-]*\n?([\s\S]*?)```/g, "$1").replace(/`([^`]+)`/g, "$1").replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\[([^\]]+)\]\([^)]*\)/g, "$1").replace(/^\s{0,3}#{1,6}\s+/gm, "").replace(/\*\*\*([^*]+)\*\*\*|\*\*([^*]+)\*\*|__([^_]+)__/g, "$1$2$3").replace(/(^|\W)[*_]([^*_\n]+)[*_](\W|$)/g, "$1$2$3").replace(/~~([^~]+)~~/g, "$1").replace(/^\s*>\s?/gm, "").trim();
 }
 
 // src/components/data/Meter.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Meter({ segments = [], unallocated = 0, height = 8, label, legend = false, className = "" }) {
   const total = segments.reduce((s, x) => s + x.value, 0) + unallocated;
   const pct = (v) => total ? v / total * 100 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 8 }, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-label-lg fd-secondary", children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "fd-meterbar", style: { height }, children: [
-      segments.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 8 }, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fd-label-lg fd-secondary", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "fd-meterbar", style: { height }, children: [
+      segments.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "span",
         {
           className: "fd-meterbar-seg",
@@ -3659,15 +4469,15 @@ function Meter({ segments = [], unallocated = 0, height = 8, label, legend = fal
         },
         i
       )),
-      unallocated > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-meterbar-seg fd-meterbar-unallocated", title: "Unallocated", style: { width: pct(unallocated) + "%" } }) : null
+      unallocated > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fd-meterbar-seg fd-meterbar-unallocated", title: "Unallocated", style: { width: pct(unallocated) + "%" } }) : null
     ] }),
-    legend ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "fd-row", style: { gap: 16, flexWrap: "wrap" }, children: [
-      segments.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-row fd-body-sm fd-secondary", style: { gap: 7 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { style: { width: 9, height: 9, borderRadius: 2, background: s.color || "var(--chart-" + (i % 8 + 1) + ")" } }),
+    legend ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "fd-row", style: { gap: 16, flexWrap: "wrap" }, children: [
+      segments.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "fd-row fd-body-sm fd-secondary", style: { gap: 7 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { style: { width: 9, height: 9, borderRadius: 2, background: s.color || "var(--chart-" + (i % 8 + 1) + ")" } }),
         s.label
       ] }, i)),
-      unallocated > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-row fd-body-sm fd-secondary", style: { gap: 7 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fd-meterbar-unallocated", style: { width: 9, height: 9, borderRadius: 2 } }),
+      unallocated > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "fd-row fd-body-sm fd-secondary", style: { gap: 7 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fd-meterbar-unallocated", style: { width: 9, height: 9, borderRadius: 2 } }),
         "Unallocated"
       ] }) : null
     ] }) : null
@@ -3675,7 +4485,7 @@ function Meter({ segments = [], unallocated = 0, height = 8, label, legend = fal
 }
 
 // src/components/data/Pagination.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var unitPluralRules = new Intl.PluralRules("en-US");
 function pluralizeUnit(n, singular, irregularPlural) {
   return unitPluralRules.select(n) === "one" ? singular : irregularPlural ?? `${singular}s`;
@@ -3706,12 +4516,12 @@ function Pagination({
     if (i === 1 || i === totalPages || Math.abs(i - page) <= span) nums.push(i);
     else if (nums[nums.length - 1] !== "\u2026") nums.push("\u2026");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: ["fd-pag", className].filter(Boolean).join(" "), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "fd-pag-count", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 12, width: 108 } }) : total === 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: ["fd-pag", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-pag-count", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 12, width: 108 } }) : total === 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
       "No ",
       unitLabel
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("strong", { children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("strong", { children: [
         from.toLocaleString(),
         "\u2013",
         to.toLocaleString()
@@ -3721,14 +4531,14 @@ function Pagination({
       " ",
       unitLabel
     ] }) }),
-    onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("label", { className: "fd-pag-size", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "Rows" }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("select", { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), "aria-label": "Rows per page", children: pageSizes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: n, children: n }, n)) })
+    onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("label", { className: "fd-pag-size", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: "Rows" }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("select", { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), "aria-label": "Rows per page", children: pageSizes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("option", { value: n, children: n }, n)) })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "fd-pag-nav", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", onClick: () => go(1), disabled: page <= 1, "aria-label": "First page", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("i", { className: "ph ph-caret-double-left" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("i", { className: "ph ph-caret-left" }) }),
-      nums.map((n, i) => n === "\u2026" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "fd-pag-gap", "aria-hidden": "true", children: "\u2026" }, "e" + i) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "fd-pag-nav", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { type: "button", onClick: () => go(1), disabled: page <= 1, "aria-label": "First page", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-caret-double-left" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { type: "button", onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-caret-left" }) }),
+      nums.map((n, i) => n === "\u2026" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-pag-gap", "aria-hidden": "true", children: "\u2026" }, "e" + i) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "button",
         {
           type: "button",
@@ -3739,15 +4549,15 @@ function Pagination({
         },
         n
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", onClick: () => go(page + 1), disabled: page >= totalPages, "aria-label": "Next page", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("i", { className: "ph ph-caret-right" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", onClick: () => go(totalPages), disabled: page >= totalPages, "aria-label": "Last page", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("i", { className: "ph ph-caret-double-right" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { type: "button", onClick: () => go(page + 1), disabled: page >= totalPages, "aria-label": "Next page", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-caret-right" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { type: "button", onClick: () => go(totalPages), disabled: page >= totalPages, "aria-label": "Last page", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-caret-double-right" }) })
     ] })
   ] });
 }
 
 // src/components/data/RelativeTime.tsx
-var React23 = __toESM(require("react"), 1);
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var React26 = __toESM(require("react"), 1);
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var MIN = 6e4;
 var HOUR = 36e5;
 var DAY = 864e5;
@@ -3798,9 +4608,9 @@ function formatDuration(ms) {
   return h + "h" + (m % 60 ? " " + m % 60 + "m" : "");
 }
 function RelativeTime({ value, prefix, className = "", refresh: refresh2 = true, ...rest }) {
-  const [, force] = React23.useState(0);
+  const [, force] = React26.useState(0);
   const t = value instanceof Date ? value.getTime() : Date.parse(value);
-  React23.useEffect(() => {
+  React26.useEffect(() => {
     if (!refresh2 || !t || isNaN(t)) return;
     const abs = Math.abs(t - Date.now());
     if (abs > DAY) return;
@@ -3809,15 +4619,15 @@ function RelativeTime({ value, prefix, className = "", refresh: refresh2 = true,
     return () => clearInterval(id);
   }, [t, refresh2]);
   if (!t || isNaN(t)) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("time", { className, dateTime: new Date(t).toISOString(), title: formatAbsolute(new Date(t)), ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("time", { className, dateTime: new Date(t).toISOString(), title: formatAbsolute(new Date(t)), ...rest, children: [
     prefix ? prefix + " " : "",
     formatRelative(new Date(t))
   ] });
 }
 
 // src/components/data/ScoreMeter.tsx
-var React24 = __toESM(require("react"), 1);
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var React27 = __toESM(require("react"), 1);
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function ScoreMeter({
   score,
   segments,
@@ -3831,15 +4641,15 @@ function ScoreMeter({
   breakdownWidth = 280,
   className = ""
 }) {
-  const [open, setOpen] = React24.useState(false);
-  const ref = React24.useRef(null);
+  const [open, setOpen] = React27.useState(false);
+  const ref = React27.useRef(null);
   const value = Math.max(0, Math.min(100, Math.round(Number(score) || 0)));
-  const body = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(React24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "fd-scoremeter-rail", style: { width }, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SegmentedMeter, { total: 100, segments, height, showTotal: false, showPercent: false, legend: false }) }),
-    showScore ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "fd-scoremeter-value fd-tabular", "aria-hidden": "true", children: value }) : null
+  const body = /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(React27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fd-scoremeter-rail", style: { width }, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SegmentedMeter, { total: 100, segments, height, showTotal: false, showPercent: false, legend: false }) }),
+    showScore ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fd-scoremeter-value fd-tabular", "aria-hidden": "true", children: value }) : null
   ] });
   if (!breakdown) {
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "span",
       {
         className: ["fd-scoremeter", className].filter(Boolean).join(" "),
@@ -3853,8 +4663,8 @@ function ScoreMeter({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(React24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(React27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "button",
       {
         type: "button",
@@ -3867,7 +4677,7 @@ function ScoreMeter({
         children: body
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       Popover,
       {
         open,
@@ -3884,13 +4694,13 @@ function ScoreMeter({
 }
 
 // src/components/data/SortMenu.tsx
-var React25 = __toESM(require("react"), 1);
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var React28 = __toESM(require("react"), 1);
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", className = "", ...rest }) {
-  const [open, setOpen] = React25.useState(false);
+  const [open, setOpen] = React28.useState(false);
   const zIndex = useOverlayLayer(open);
-  const ref = React25.useRef(null);
-  React25.useEffect(() => {
+  const ref = React28.useRef(null);
+  React28.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -3910,7 +4720,7 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
   const arrow = (f, d) => {
     const on = cur && cur.key === f.key && dir === d;
     const label = d === "asc" ? f.numeric ? "lowest first" : "A to Z" : f.numeric ? "highest first" : "Z to A";
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "button",
       {
         type: "button",
@@ -3928,21 +4738,21 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
           background: on ? "var(--brand)" : "var(--surface)",
           color: on ? "#fff" : "var(--text-muted)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("i", { className: "ph ph-arrow-" + (d === "asc" ? "up" : "down"), style: { fontSize: 13 } })
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("i", { className: "ph ph-arrow-" + (d === "asc" ? "up" : "down"), style: { fontSize: 13 } })
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className, style: { position: "relative", display: "inline-flex" }, ref, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Button, { size, variant: "secondary", icon: dir === "asc" ? "sort-ascending" : "sort-descending", onClick: () => setOpen(!open), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className, style: { position: "relative", display: "inline-flex" }, ref, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Button, { size, variant: "secondary", icon: dir === "asc" ? "sort-ascending" : "sort-descending", onClick: () => setOpen(!open), children: [
       cur ? cur.label : "Unsorted",
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("i", { className: "ph ph-" + (dir === "asc" ? "arrow-up" : "arrow-down"), style: { fontSize: 12, marginLeft: 6, opacity: 0.75 } })
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("i", { className: "ph ph-" + (dir === "asc" ? "arrow-up" : "arrow-down"), style: { fontSize: 12, marginLeft: 6, opacity: 0.75 } })
     ] }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fd-view-enter", style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex, width: 280, 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__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "fd-stack", style: { gap: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sort by" }),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "fd-view-enter", style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex, width: 280, 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__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "fd-stack", style: { gap: 2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sort by" }),
       fields.map((f) => {
         const active = cur && cur.key === f.key;
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "fd-row", style: { gap: 8, padding: "4px 8px", borderRadius: 7, background: active ? "var(--surface-brand)" : "transparent" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fd-body-sm", style: { flex: 1, fontWeight: active ? 700 : 500, color: active ? "var(--text-on-surface-brand)" : "var(--text)" }, children: f.label }),
+        return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "fd-row", style: { gap: 8, padding: "4px 8px", borderRadius: 7, background: active ? "var(--surface-brand)" : "transparent" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "fd-body-sm", style: { flex: 1, fontWeight: active ? 700 : 500, color: active ? "var(--text-on-surface-brand)" : "var(--text)" }, children: f.label }),
           arrow(f, "asc"),
           arrow(f, "desc")
         ] }, f.key);
@@ -3952,8 +4762,8 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
 }
 
 // src/components/data/StepList.tsx
-var React26 = __toESM(require("react"), 1);
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var React29 = __toESM(require("react"), 1);
+var import_jsx_runtime54 = require("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({
   steps = [],
@@ -3965,9 +4775,9 @@ function StepList({
   dense = false,
   className = ""
 }) {
-  const [openState, setOpenState] = React26.useState(defaultOpen);
+  const [openState, setOpenState] = React29.useState(defaultOpen);
   const open = openProp == null ? openState : openProp;
-  const [expanded, setExpanded] = React26.useState({});
+  const [expanded, setExpanded] = React29.useState({});
   if (!steps.length) return null;
   const running = steps.some((s) => s.status === "running");
   const failed = steps.filter((s) => s.status === "error").length;
@@ -3979,30 +4789,30 @@ function StepList({
     if (openProp == null) setOpenState(next);
     onToggle && onToggle(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: ["fd-steps", dense ? "is-dense" : "", open ? "is-open" : "", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("button", { type: "button", className: "fd-steps-head", onClick: toggle, "aria-expanded": open, children: [
-      running ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-steps-spin", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-" + (failed ? "warning-circle" : "check-circle"), "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-steps-title", title: truncationTitle(summary), children: summary }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "fd-steps-count fd-tabular", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: ["fd-steps", dense ? "is-dense" : "", open ? "is-open" : "", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", { type: "button", className: "fd-steps-head", onClick: toggle, "aria-expanded": open, children: [
+      running ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-steps-spin", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("i", { className: "ph ph-" + (failed ? "warning-circle" : "check-circle"), "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-steps-title", title: truncationTitle(summary), children: summary }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "fd-steps-count fd-tabular", children: [
         steps.length,
         " step",
         steps.length === 1 ? "" : "s",
-        failed ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "fd-steps-failed", children: [
+        failed ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "fd-steps-failed", children: [
           " \xB7 ",
           failed,
           " failed"
         ] }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-caret-" + (open ? "up" : "down") + " fd-steps-caret", "aria-hidden": "true" })
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("i", { className: "ph ph-caret-" + (open ? "up" : "down") + " fd-steps-caret", "aria-hidden": "true" })
     ] }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ol", { className: "fd-steps-list", children: steps.map((s, i) => {
+    open ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ol", { className: "fd-steps-list", children: steps.map((s, i) => {
       const id = s.id || i;
       const isOpen = !!expanded[id];
       const icon = KIND_ICON[s.kind || ""] || "dot-outline";
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("li", { className: "fd-step is-" + (s.status || "ok"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "fd-step-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-step-icon", "aria-hidden": "true", children: s.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-steps-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-" + icon }) }),
-          s.detail ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("li", { className: "fd-step is-" + (s.status || "ok"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "fd-step-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-step-icon", "aria-hidden": "true", children: s.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-steps-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("i", { className: "ph ph-" + icon }) }),
+          s.detail ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
             "button",
             {
               type: "button",
@@ -4010,23 +4820,23 @@ function StepList({
               "aria-expanded": isOpen,
               onClick: () => setExpanded((m) => Object.assign({}, m, { [id]: !isOpen })),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { title: truncationTitle(s.label), children: s.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-caret-" + (isOpen ? "up" : "down"), "aria-hidden": "true" })
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { title: truncationTitle(s.label), children: s.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("i", { className: "ph ph-caret-" + (isOpen ? "up" : "down"), "aria-hidden": "true" })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-step-label is-static", title: truncationTitle(s.label), children: s.label }),
-          s.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-step-badge is-error", children: "failed" }) : null,
-          showDurations && s.durationMs ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-step-dur fd-tabular", children: formatDuration(s.durationMs) }) : null
+          ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-step-label is-static", title: truncationTitle(s.label), children: s.label }),
+          s.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-step-badge is-error", children: "failed" }) : null,
+          showDurations && s.durationMs ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-step-dur fd-tabular", children: formatDuration(s.durationMs) }) : null
         ] }),
-        s.detail && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("pre", { className: "fd-step-detail", children: s.detail }) : null
+        s.detail && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("pre", { className: "fd-step-detail", children: s.detail }) : null
       ] }, id);
     }) }) : null
   ] });
 }
 
 // src/components/data/VirtualList.tsx
-var React27 = __toESM(require("react"), 1);
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var React30 = __toESM(require("react"), 1);
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var VIRTUAL_LIST_BUFFER_ROWS = 20;
 var VIRTUAL_LIST_ROW_GAP = 6;
 function computeVirtualWindow(opts) {
@@ -4077,35 +4887,35 @@ function VirtualList({
   className = "",
   style
 }) {
-  const [scrollTop, setScrollTop] = React27.useState(0);
-  const loaded = React27.useMemo(
+  const [scrollTop, setScrollTop] = React30.useState(0);
+  const loaded = React30.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 = React27.useMemo(
+  const win = React30.useMemo(
     () => computeVirtualWindow({ scrollTop, viewportHeight: height, itemHeight, itemCount: total, loaded }),
     [scrollTop, height, itemHeight, total, loaded]
   );
-  const need = React27.useMemo(() => computeNeedMore(win, loaded), [win, loaded]);
+  const need = React30.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 = React27.useRef({ start: null, end: null });
-  React27.useEffect(() => {
+  const asked = React30.useRef({ start: null, end: null });
+  React30.useEffect(() => {
     if (loading || !wantStart || asked.current.start === askKey) return;
     asked.current.start = askKey;
     onNeedMore("start", win);
   }, [wantStart, loading, askKey, onNeedMore, win]);
-  React27.useEffect(() => {
+  React30.useEffect(() => {
     if (loading || !wantEnd || asked.current.end === askKey) return;
     asked.current.end = askKey;
     onNeedMore("end", win);
   }, [wantEnd, loading, askKey, onNeedMore, win]);
-  const lastKeysRef = React27.useRef(null);
-  const newKeys = React27.useMemo(() => {
+  const lastKeysRef = React30.useRef(null);
+  const newKeys = React30.useMemo(() => {
     const prev = lastKeysRef.current;
     if (!prev) return /* @__PURE__ */ new Set();
     const fresh = /* @__PURE__ */ new Set();
@@ -4115,12 +4925,12 @@ function VirtualList({
     }
     return fresh;
   }, [items]);
-  React27.useEffect(() => {
+  React30.useEffect(() => {
     lastKeysRef.current = new Set(items.map(keyOf));
   }, [items]);
   const gapStyle = { "--fd-vlist-gap": rowGap + "px" };
   if (!items.length && !loading && !refreshing && emptyState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ["fd-vlist-wrap", className].filter(Boolean).join(" "), style: { height, position: "relative", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "fd-vlist fd-scrollbar", style: { height: "100%", overflow: "auto" }, children: emptyState }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: ["fd-vlist-wrap", className].filter(Boolean).join(" "), style: { height, position: "relative", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "fd-vlist fd-scrollbar", style: { height: "100%", overflow: "auto" }, children: emptyState }) });
   }
   const rows = [];
   for (let i = win.startIndex; i <= win.endIndex; i++) {
@@ -4128,40 +4938,40 @@ function VirtualList({
     if (item === void 0) continue;
     const key = keyOf(item);
     rows.push(
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "div",
         {
           className: "fd-vlist-row",
           style: { height: itemHeight, boxSizing: "border-box", transform: "translateY(" + i * itemHeight + "px)" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: newKeys.has(key) ? "fd-vlist-row-content fd-vlist-row-enter" : "fd-vlist-row-content", children: renderItem(item, i) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: newKeys.has(key) ? "fd-vlist-row-content fd-vlist-row-enter" : "fd-vlist-row-content", children: renderItem(item, i) })
         },
         key
       )
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: ["fd-vlist-wrap", className].filter(Boolean).join(" "), style: { height, position: "relative", ...gapStyle, ...style }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: ["fd-vlist-wrap", className].filter(Boolean).join(" "), style: { height, position: "relative", ...gapStyle, ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "div",
       {
         className: "fd-vlist fd-scrollbar",
         style: { height: "100%", overflowY: "auto", overflowX: "hidden", position: "relative" },
         onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: { height: win.totalHeight, position: "relative" }, children: rows }),
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: { position: "sticky", bottom: 0, left: 0, right: 0, display: "grid", placeItems: "center", padding: "8px 0", background: "var(--surface)" }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "fd-spinner", "aria-hidden": "true" }) }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { height: win.totalHeight, position: "relative" }, children: rows }),
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { position: "sticky", bottom: 0, left: 0, right: 0, display: "grid", placeItems: "center", padding: "8px 0", background: "var(--surface)" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "fd-spinner", "aria-hidden": "true" }) }) : null
         ]
       }
     ),
-    refreshing ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "fd-vlist-refresh-scrim", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "fd-vlist-refresh-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "fd-spinner", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "fd-body-sm", children: refreshingLabel })
+    refreshing ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "fd-vlist-refresh-scrim", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "fd-vlist-refresh-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "fd-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "fd-body-sm", children: refreshingLabel })
     ] }) }) : null
   ] });
 }
 
 // src/components/data/EntityRow.tsx
-var React28 = __toESM(require("react"), 1);
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var React31 = __toESM(require("react"), 1);
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var ENTITY_ROW_METRIC_WIDTH = 74;
 var METRIC_TONE_COLOR = {
   default: "var(--text-2)",
@@ -4169,16 +4979,16 @@ var METRIC_TONE_COLOR = {
   danger: "var(--danger-text)"
 };
 function EntityRowMetrics({ metrics, className = "", style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: ["fd-erow-metrics", className].filter(Boolean).join(" "), style, children: metrics.map((m, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: ["fd-erow-metrics", className].filter(Boolean).join(" "), style, children: metrics.map((m, i) => {
     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__ */ (0, import_jsx_runtime52.jsxs)(React28.Fragment, { children: [
-      m.icon ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("i", { className: "ph ph-" + m.icon, "aria-hidden": "true" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fd-erow-metric-value fd-tabular", children: m.value }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fd-sr", children: " " + m.label })
+    const content = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(React31.Fragment, { children: [
+      m.icon ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("i", { className: "ph ph-" + m.icon, "aria-hidden": "true" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fd-erow-metric-value fd-tabular", children: m.value }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fd-sr", children: " " + m.label })
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fd-erow-cell", style: { "--erow-metric-w": (m.width || ENTITY_ROW_METRIC_WIDTH) + "px" }, children: m.tooltip == null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: className2, style: tone, title: m.label, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Tooltip, { label: m.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { type: "button", className: className2, style: tone, children: content }) }) }, key);
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fd-erow-cell", style: { "--erow-metric-w": (m.width || ENTITY_ROW_METRIC_WIDTH) + "px" }, children: m.tooltip == null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: className2, style: tone, title: m.label, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Tooltip, { label: m.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("button", { type: "button", className: className2, style: tone, children: content }) }) }, key);
   }) });
 }
 function EntityRow({
@@ -4195,7 +5005,7 @@ function EntityRow({
   className = ""
 }) {
   const hasStrip = metrics && metrics.length > 0 || accessory != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       onPointerDown,
@@ -4221,33 +5031,33 @@ function EntityRow({
           // font-size moved to the .fd-erow-grip stylesheet rule, same reason as the
           // row's own padding above: .fd-tlist-footer's indent reads it back as
           // --erow-grip-size.
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("i", { className: "ph ph-dots-six-vertical fd-erow-grip", "aria-hidden": "true", style: { flex: "none", color: "var(--text-muted)" } })
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("i", { className: "ph ph-dots-six-vertical fd-erow-grip", "aria-hidden": "true", style: { flex: "none", color: "var(--text-muted)" } })
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "fd-erow-body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "fd-erow-titleline", children: [
-            titleIcon ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Tooltip, { label: titleIcon.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "fd-erow-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "fd-erow-titleline", children: [
+            titleIcon ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Tooltip, { label: titleIcon.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
               "button",
               {
                 type: "button",
                 className: ["fd-erow-title-icon", titleIcon.tone ? "is-" + titleIcon.tone : ""].filter(Boolean).join(" "),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("i", { className: "ph ph-" + titleIcon.icon, "aria-hidden": "true" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fd-erow-title fd-body-sm", children: title })
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("i", { className: "ph ph-" + titleIcon.icon, "aria-hidden": "true" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fd-erow-title fd-body-sm", children: title })
                 ]
               }
             ) }) : (
               // MP-141: dense-row identifier, no Tooltip wrapper in this branch — a native
               // `title` is the exposure mechanism, same rule as every other identifier.
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fd-erow-title fd-body-sm", title: truncationTitle(title), children: title })
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fd-erow-title fd-body-sm", title: truncationTitle(title), children: title })
             ),
-            meta ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fd-erow-meta", title: truncationTitle(meta), children: meta }) : null
+            meta ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fd-erow-meta", title: truncationTitle(meta), children: meta }) : null
           ] }),
-          hasStrip ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "fd-erow-strip", children: [
-            metrics && metrics.length ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EntityRowMetrics, { metrics }) : null,
-            accessory ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fd-erow-accessory", children: accessory }) : null
+          hasStrip ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "fd-erow-strip", children: [
+            metrics && metrics.length ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(EntityRowMetrics, { metrics }) : null,
+            accessory ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fd-erow-accessory", children: accessory }) : null
           ] }) : null
         ] }),
-        action ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        action ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           IconButton,
           {
             icon: action.icon,
@@ -4265,30 +5075,11 @@ function EntityRow({
 }
 
 // src/components/data/TransferList.tsx
-var React30 = __toESM(require("react"), 1);
+var React32 = __toESM(require("react"), 1);
 var import_react_dom5 = require("react-dom");
 
-// src/components/forms/field.tsx
-var React29 = __toESM(require("react"), 1);
-var import_jsx_runtime53 = require("react/jsx-runtime");
-function useFieldId(id) {
-  const generated = React29.useId();
-  return id || generated;
-}
-function FieldLabel({ htmlFor, id, required = false, onClick, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("label", { className: "fd-field-label", htmlFor, id, onClick, children: [
-    children,
-    required ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "fd-field-req", "aria-hidden": "true", children: "*" }) : null
-  ] });
-}
-function useTriggerLabelling(label, id) {
-  const fieldId = useFieldId(id);
-  const labelId = fieldId + "-label";
-  return { fieldId, labelId, ariaLabelledBy: label ? labelId + " " + fieldId : void 0 };
-}
-
 // src/components/forms/Input.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function Input({
   label,
   help,
@@ -4315,24 +5106,24 @@ function Input({
     disabled ? "fd-input-disabled" : "",
     size === "lg" ? "fd-input-lg" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: box, children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-input-icon", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("i", { className: "ph ph-" + icon, "aria-hidden": "true" }) }) : null,
-      prefix ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-input-affix", children: prefix }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("input", { id: fieldId, disabled, style: inputStyle, "aria-invalid": error ? "true" : void 0, ...rest }),
-      loading ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-spinner", style: { color: "var(--text-muted)" }, "aria-label": "Loading" }) : null,
-      suffix && !loading ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-input-affix", children: suffix }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: box, children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "fd-input-icon", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("i", { className: "ph ph-" + icon, "aria-hidden": "true" }) }) : null,
+      prefix ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "fd-input-affix", children: prefix }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("input", { id: fieldId, disabled, style: inputStyle, "aria-invalid": error ? "true" : void 0, ...rest }),
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "fd-spinner", style: { color: "var(--text-muted)" }, "aria-label": "Loading" }) : null,
+      suffix && !loading ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "fd-input-affix", children: suffix }) : null
     ] }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "fd-field-error", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "fd-field-error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       error
-    ] }) : help ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-field-help", children: help }) : null
+    ] }) : help ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "fd-field-help", children: help }) : null
   ] });
 }
 
 // src/components/forms/SearchField.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function SearchField({
   value,
   onChange,
@@ -4347,7 +5138,7 @@ function SearchField({
   ...rest
 }) {
   const clear = onClear || (() => onChange(""));
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     Input,
     {
       id,
@@ -4360,14 +5151,14 @@ function SearchField({
       style,
       className,
       onChange: (e) => onChange(e.target.value),
-      suffix: value ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      suffix: value ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         "button",
         {
           type: "button",
           "aria-label": "Clear search",
           onClick: clear,
           style: { all: "unset", cursor: "pointer", color: "var(--text-muted)", display: "grid", placeItems: "center", padding: 2 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("i", { className: "ph ph-x-circle", style: { fontSize: 15 }, "aria-hidden": "true" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-x-circle", style: { fontSize: 15 }, "aria-hidden": "true" })
         }
       ) : void 0,
       ...rest
@@ -4376,7 +5167,7 @@ function SearchField({
 }
 
 // src/components/data/TransferList.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var emptyHasMore = {};
 var DRAG_THRESHOLD_PX = 5;
 function TransferList({
@@ -4390,12 +5181,12 @@ function TransferList({
   listHeight = 440,
   className = ""
 }) {
-  const [drag, setDrag] = React30.useState(null);
-  const [dragOverSide, setDragOverSide] = React30.useState(null);
-  const dragRef = React30.useRef(null);
-  const armedRef = React30.useRef(null);
-  const sideRefs = React30.useRef({ left: null, right: null });
-  const hitTestSide = React30.useCallback((x, y) => {
+  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) => {
     for (const side of ["left", "right"]) {
       const el = sideRefs.current[side];
       if (!el) continue;
@@ -4404,7 +5195,7 @@ function TransferList({
     }
     return null;
   }, []);
-  const findItem = React30.useCallback(
+  const findItem = React32.useCallback(
     (side, key) => (side === "left" ? left.items : right.items).find((it) => keyOf(it) === key),
     [left.items, right.items, keyOf]
   );
@@ -4426,7 +5217,7 @@ function TransferList({
       height: rect.height
     };
   };
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     const onMovePointer = (e) => {
       const armed = armedRef.current;
       if (!armed || e.pointerId !== armed.pointerId) return;
@@ -4479,7 +5270,7 @@ function TransferList({
       window.removeEventListener("pointercancel", endDrag);
     };
   }, [hitTestSide, findItem, onMove]);
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     if (!drag || typeof document === "undefined") return;
     const prev = document.body.style.userSelect;
     document.body.style.userSelect = "none";
@@ -4489,7 +5280,7 @@ function TransferList({
   }, [drag]);
   const renderSide = (side, cfg, opposite) => {
     const showOverlay = drag != null && dragOverSide === side;
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
       "div",
       {
         ref: (el) => {
@@ -4497,16 +5288,16 @@ function TransferList({
         },
         className: ["fd-tlist-side", dragOverSide === side ? "is-drop-target" : ""].filter(Boolean).join(" "),
         children: [
-          cfg.label ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "fd-overline fd-muted", children: [
+          cfg.label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "fd-overline fd-muted", children: [
             cfg.label,
             cfg.total != null ? " (" + cfg.total.toLocaleString() + ")" : ""
           ] }) : null,
-          cfg.header ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "fd-tlist-header", children: cfg.header }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "fd-row", style: { gap: 8 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SearchField, { value: cfg.search, onChange: cfg.onSearchChange, placeholder: "Search", "aria-label": (cfg.label || side) + " search", style: { flex: 1 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SortMenu, { fields: cfg.sortFields, sort: cfg.sort, onSort: cfg.onSort, align: side === "left" ? "left" : "right" })
+          cfg.header ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "fd-tlist-header", children: cfg.header }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "fd-row", style: { gap: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SearchField, { value: cfg.search, onChange: cfg.onSearchChange, placeholder: "Search", "aria-label": (cfg.label || side) + " search", style: { flex: 1 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SortMenu, { fields: cfg.sortFields, sort: cfg.sort, onSort: cfg.onSort, align: side === "left" ? "left" : "right" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             VirtualList,
             {
               items: cfg.items,
@@ -4520,15 +5311,15 @@ function TransferList({
               firstItemIndex: cfg.firstItemIndex,
               totalCount: cfg.totalCount,
               onNeedMore: cfg.onNeedMore,
-              emptyState: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(EmptyState, { icon: "tray", title: "Nothing here" }),
+              emptyState: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(EmptyState, { icon: "tray", title: "Nothing here" }),
               renderItem: (item) => {
                 const isBeingDragged = drag != null && drag.from === side && drag.key === keyOf(item);
                 if (isBeingDragged) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "fd-erow-placeholder", "aria-hidden": "true" });
+                  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "fd-erow-placeholder", "aria-hidden": "true" });
                 }
                 const content = renderRow(item);
                 const destination = (side === "left" ? right : left).label || "the other list";
-                return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   EntityRow,
                   {
                     ...content,
@@ -4548,252 +5339,95 @@ function TransferList({
               }
             }
           ),
-          cfg.footer ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "fd-tlist-footer", children: cfg.footer }) : null,
-          showOverlay ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "fd-tlist-drop-overlay", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "fd-tlist-drop-card", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("i", { className: "ph ph-tray-arrow-down", style: { fontSize: 18 }, "aria-hidden": "true" }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fd-body-sm", style: { fontWeight: 600 }, children: cfg.dropLabel || "Drop here" + (cfg.label ? " \u2014 " + cfg.label : "") })
+          cfg.footer ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "fd-tlist-footer", children: cfg.footer }) : null,
+          showOverlay ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "fd-tlist-drop-overlay", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "fd-tlist-drop-card", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("i", { className: "ph ph-tray-arrow-down", style: { fontSize: 18 }, "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "fd-body-sm", style: { fontWeight: 600 }, children: cfg.dropLabel || "Drop here" + (cfg.label ? " \u2014 " + cfg.label : "") })
           ] }) }) : null
         ]
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: ["fd-tlist", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "fd-tlist-panes", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ["fd-tlist", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "fd-tlist-panes", children: [
       renderSide("left", left, "right"),
       renderSide("right", right, "left")
     ] }),
     drag ? (0, import_react_dom5.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "div",
         {
-          "aria-hidden": "true",
-          className: "fd-erow-ghost",
-          style: {
-            position: "fixed",
-            left: 0,
-            top: 0,
-            width: drag.width,
-            height: drag.height,
-            transform: `translate(${drag.x - drag.offsetX}px, ${drag.y - drag.offsetY}px) rotate(-3deg)`,
-            pointerEvents: "none",
-            zIndex: OVERLAY_CEILING
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(EntityRow, { ...renderRow(drag.item), draggable: true, className: "fd-erow-dragging" })
-        }
-      ),
-      document.body
-    ) : null
-  ] });
-}
-
-// src/components/forms/Checkbox.tsx
-var React31 = __toESM(require("react"), 1);
-var import_jsx_runtime57 = require("react/jsx-runtime");
-function Checkbox({ label, description, card = false, indeterminate = false, className = "", ...rest }) {
-  const ref = React31.useRef(null);
-  React31.useEffect(() => {
-    if (ref.current) ref.current.indeterminate = indeterminate;
-  }, [indeterminate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("label", { className: ["fd-choice", card ? "fd-choice-card" : "", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "fd-choice-input", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("input", { ref, type: "checkbox", ...rest }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "fd-choice-box", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("i", { className: indeterminate ? "ph ph-minus" : "ph ph-check" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "fd-choice-text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "fd-choice-title", children: label }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "fd-choice-desc", children: description }) : null
-    ] })
-  ] });
-}
-
-// src/components/forms/Radio.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
-function Radio({ label, description, card = false, className = "", ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("label", { className: ["fd-choice", card ? "fd-choice-card" : "", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-choice-input", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("input", { type: "radio", ...rest }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-choice-box fd-choice-box-round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-choice-dot" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-choice-text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-choice-title", children: label }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-choice-desc", children: description }) : null
-    ] })
-  ] });
-}
-
-// src/components/forms/Switch.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
-function Switch({ label, description, className = "", ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("label", { className: ["fd-switch", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("input", { type: "checkbox", role: "switch", ...rest }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "fd-switch-track", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "fd-switch-thumb" }) }),
-    label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "fd-choice-text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "fd-switch-label", children: label }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "fd-choice-desc", children: description }) : null
-    ] }) : null
-  ] });
-}
-
-// src/components/forms/Textarea.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
-function Textarea({ label, help, error, required = false, rows = 4, disabled = false, id, className = "", style, ...rest }) {
-  const fieldId = useFieldId(id);
-  const box = ["fd-input", "fd-input-textarea", error ? "fd-input-error" : "", disabled ? "fd-input-disabled" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: box, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("textarea", { id: fieldId, rows, disabled, "aria-invalid": error ? "true" : void 0, ...rest }) }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "fd-field-error", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
-      error
-    ] }) : help ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "fd-field-help", children: help }) : null
-  ] });
-}
-
-// src/components/forms/NumberInput.tsx
-var React32 = __toESM(require("react"), 1);
-var import_jsx_runtime61 = require("react/jsx-runtime");
-function NumberInput({
-  label,
-  help,
-  error,
-  prefix,
-  suffix,
-  required = false,
-  disabled = false,
-  min = -Infinity,
-  max = Infinity,
-  step = 1,
-  bigStep,
-  value,
-  onChange,
-  format = true,
-  className = "",
-  style,
-  placeholder,
-  id,
-  "aria-label": ariaLabel
-}) {
-  const fieldId = useFieldId(id);
-  const num = (v) => {
-    const n = Number(String(v == null ? "" : v).replace(/[^0-9.-]/g, ""));
-    return isNaN(n) ? null : n;
-  };
-  const [text, setText] = React32.useState(value == null || value === "" ? "" : String(value));
-  const [editing, setEditing] = React32.useState(false);
-  const timer = React32.useRef(null);
-  React32.useEffect(() => {
-    if (!editing) setText(value == null || value === "" ? "" : String(value));
-  }, [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));
-    setText(String(next));
-    fire(next);
-  };
-  const hold = (dir) => {
-    bump(dir);
-    let n = 0;
-    const tick = () => {
-      n++;
-      bump(dir, n > 6 ? 4 : 1);
-      timer.current = setTimeout(tick, n > 12 ? 40 : n > 6 ? 70 : 120);
-    };
-    timer.current = setTimeout(tick, 420);
-  };
-  const release = () => {
-    if (timer.current) clearTimeout(timer.current);
-  };
-  React32.useEffect(() => () => {
-    if (timer.current) clearTimeout(timer.current);
-  }, []);
-  const shown = editing ? text : (() => {
-    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 fieldName = label || ariaLabel;
-  const stepperName = (verb) => fieldName ? verb + " " + fieldName : verb;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: box, style: { gap: 8 }, children: [
-      prefix ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "fd-input-affix", children: prefix }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-        "input",
-        {
-          id: fieldId,
-          "aria-label": ariaLabel,
-          inputMode: "numeric",
-          disabled,
-          placeholder,
-          value: shown,
-          onFocus: () => setEditing(true),
-          onBlur: () => {
-            setEditing(false);
-            const n = num(text);
-            if (n != null) {
-              const c = clamp(n);
-              setText(String(c));
-              fire(c);
-            }
-          },
-          onChange: (e) => {
-            setText(e.target.value);
-            const n = num(e.target.value);
-            if (n != null) fire(n);
+          "aria-hidden": "true",
+          className: "fd-erow-ghost",
+          style: {
+            position: "fixed",
+            left: 0,
+            top: 0,
+            width: drag.width,
+            height: drag.height,
+            transform: `translate(${drag.x - drag.offsetX}px, ${drag.y - drag.offsetY}px) rotate(-3deg)`,
+            pointerEvents: "none",
+            zIndex: OVERLAY_CEILING
           },
-          onKeyDown: (e) => {
-            if (e.key === "ArrowUp") {
-              e.preventDefault();
-              bump(1, e.shiftKey ? 2 : 1);
-            } else if (e.key === "ArrowDown") {
-              e.preventDefault();
-              bump(-1, e.shiftKey ? 2 : 1);
-            }
-          }
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(EntityRow, { ...renderRow(drag.item), draggable: true, className: "fd-erow-dragging" })
         }
       ),
-      suffix ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "fd-input-affix", children: suffix }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "fd-row", style: { gap: 4, flex: "none" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "fd-stepbtn",
-            "aria-label": stepperName("Decrease"),
-            disabled: disabled || (num(text) ?? 0) <= min,
-            onPointerDown: () => hold(-1),
-            onPointerUp: release,
-            onPointerLeave: release,
-            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("i", { className: "ph ph-minus" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "fd-stepbtn",
-            "aria-label": stepperName("Increase"),
-            disabled: disabled || (num(text) ?? 0) >= max,
-            onPointerDown: () => hold(1),
-            onPointerUp: release,
-            onPointerLeave: release,
-            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("i", { className: "ph ph-plus" })
-          }
-        )
-      ] })
-    ] }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "fd-field-error", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
-      error
-    ] }) : help ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "fd-field-help", children: help }) : null
+      document.body
+    ) : null
   ] });
 }
 
-// src/components/forms/Select.tsx
+// src/components/forms/Checkbox.tsx
 var React33 = __toESM(require("react"), 1);
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function Checkbox({ label, description, card = false, indeterminate = false, className = "", ...rest }) {
+  const ref = React33.useRef(null);
+  React33.useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("label", { className: ["fd-choice", card ? "fd-choice-card" : "", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "fd-choice-input", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("input", { ref, type: "checkbox", ...rest }),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "fd-choice-box", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("i", { className: indeterminate ? "ph ph-minus" : "ph ph-check" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "fd-choice-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "fd-choice-title", children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "fd-choice-desc", children: description }) : null
+    ] })
+  ] });
+}
+
+// src/components/forms/Radio.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+function Radio({ label, description, card = false, className = "", ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("label", { className: ["fd-choice", card ? "fd-choice-card" : "", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "fd-choice-input", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("input", { type: "radio", ...rest }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "fd-choice-box fd-choice-box-round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "fd-choice-dot" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "fd-choice-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "fd-choice-title", children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "fd-choice-desc", children: description }) : null
+    ] })
+  ] });
+}
+
+// src/components/forms/Switch.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
+function Switch({ label, description, className = "", ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("label", { className: ["fd-switch", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("input", { type: "checkbox", role: "switch", ...rest }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-switch-track", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-switch-thumb" }) }),
+    label ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-choice-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-switch-label", children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-choice-desc", children: description }) : null
+    ] }) : null
+  ] });
+}
+
+// src/components/forms/Select.tsx
+var React34 = __toESM(require("react"), 1);
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var norm = (o) => typeof o === "string" ? { value: o, label: o } : o;
 function Select({
   label,
@@ -4819,13 +5453,13 @@ 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] = React33.useState(false);
-  const [q, setQ] = React33.useState("");
-  const [active, setActive] = React33.useState(-1);
-  const rootRef = React33.useRef(null);
-  const boxRef = React33.useRef(null);
-  const listRef = React33.useRef(null);
-  const typeBuf = React33.useRef({ s: "", t: 0 });
+  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 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;
@@ -4850,7 +5484,7 @@ function Select({
     }
     setOpen(!open);
   };
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     if (!open || active < 0 || !listRef.current) return;
     const el = listRef.current.querySelector('[data-i="' + active + '"]');
     if (el) {
@@ -4903,10 +5537,10 @@ function Select({
     else last.items.push({ o, i });
   });
   const box = ["fd-input", "fd-select", error ? "fd-input-error" : "", disabled ? "fd-input-disabled" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: ["fd-field", "fd-popfield", open ? "is-open" : "", className].filter(Boolean).join(" "), style, ref: rootRef, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(FieldLabel, { id: labelId, required, onClick: toggle, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: box, style: { cursor: disabled ? "not-allowed" : "pointer" }, ref: boxRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ["fd-field", "fd-popfield", open ? "is-open" : "", className].filter(Boolean).join(" "), style, ref: rootRef, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FieldLabel, { id: labelId, required, onClick: toggle, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: box, style: { cursor: disabled ? "not-allowed" : "pointer" }, ref: boxRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
         "button",
         {
           type: "button",
@@ -4920,13 +5554,13 @@ function Select({
           "aria-labelledby": ariaLabelledBy,
           style: { all: "unset", flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 8, cursor: "inherit", overflow: "hidden" },
           children: [
-            selected && selected.icon ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-" + selected.icon, style: { flex: "none", color: "var(--text-2)" } }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { title: truncationTitle(boxText), style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: (multiple ? chosen.length : selected) ? "var(--text)" : "var(--text-muted)" }, children: boxText }),
-            multiple && chosen.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-mono", style: { flex: "none", fontSize: 11, fontWeight: 700, padding: "1px 6px", borderRadius: 99, background: "var(--brand)", color: "#fff" }, children: chosen.length }) : null
+            selected && selected.icon ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-" + selected.icon, style: { flex: "none", color: "var(--text-2)" } }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { title: truncationTitle(boxText), style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: (multiple ? chosen.length : selected) ? "var(--text)" : "var(--text-muted)" }, children: boxText }),
+            multiple && chosen.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-mono", style: { flex: "none", fontSize: 11, fontWeight: 700, padding: "1px 6px", borderRadius: 99, background: "var(--brand)", color: "#fff" }, children: chosen.length }) : null
           ]
         }
       ),
-      clearable && (multiple ? chosen.length > 0 : selected) && !loading ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      clearable && (multiple ? chosen.length > 0 : selected) && !loading ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         "button",
         {
           type: "button",
@@ -4936,12 +5570,12 @@ function Select({
             fire(multiple ? [] : "");
           },
           style: { all: "unset", cursor: "pointer", color: "var(--text-muted)", display: "grid", placeItems: "center", padding: 2 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-x-circle", style: { fontSize: 15 } })
+          children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-x-circle", style: { fontSize: 15 } })
         }
       ) : null,
-      loading ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-spinner", style: { color: "var(--text-muted)" }, "aria-label": "Loading options" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-select-caret", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-caret-down", "aria-hidden": "true" }) })
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-spinner", style: { color: "var(--text-muted)" }, "aria-label": "Loading options" }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-select-caret", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-caret-down", "aria-hidden": "true" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       Popover,
       {
         open,
@@ -4954,9 +5588,9 @@ function Select({
         minWidth: 260,
         role: "presentation",
         style: { maxWidth: 380 },
-        header: hasSearch ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "fd-pop-search", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-magnifying-glass", style: { color: "var(--text-muted)", fontSize: 14 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        header: hasSearch ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "fd-pop-search", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-magnifying-glass", style: { color: "var(--text-muted)", fontSize: 14 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "input",
             {
               autoFocus: true,
@@ -4969,10 +5603,10 @@ function Select({
               }
             }
           ),
-          q ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-body-sm fd-muted", children: visible.length }) : null
+          q ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-body-sm fd-muted", children: visible.length }) : null
         ] }) : void 0,
-        footer: multiple ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(React33.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        footer: multiple ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(React34.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "button",
             {
               type: "button",
@@ -4981,13 +5615,13 @@ function Select({
               children: "Select all"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: { flex: 1 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-body-sm fd-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { style: { flex: 1 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "fd-body-sm fd-muted", children: [
             vals.length,
             " of ",
             opts.length
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "button",
             {
               type: "button",
@@ -4998,13 +5632,13 @@ function Select({
             }
           )
         ] }) : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fd-pop-list", role: "listbox", "aria-multiselectable": multiple || void 0, ref: listRef, children: visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "fd-pop-empty", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fd-pop-list", role: "listbox", "aria-multiselectable": multiple || void 0, ref: listRef, children: visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "fd-pop-empty", children: [
           'Nothing matches "',
           q,
           '".'
-        ] }) : groups.map((grp) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(React33.Fragment, { children: [
-          grp.g ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fd-pop-group", children: grp.g }) : null,
-          grp.items.map(({ o, i }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+        ] }) : groups.map((grp) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(React34.Fragment, { children: [
+          grp.g ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fd-pop-group", children: grp.g }) : null,
+          grp.items.map(({ o, i }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
             "button",
             {
               type: "button",
@@ -5016,14 +5650,14 @@ function Select({
               onMouseEnter: () => setActive(i),
               onClick: () => pick(o),
               children: [
-                multiple ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("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__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-check", style: { fontSize: 11 } }) : null }) : null,
-                o.icon ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-opt-icon", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-" + o.icon }) }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { style: { flex: 1, minWidth: 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-opt-label", children: o.label }),
-                  o.description ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-opt-desc", children: o.description }) : null
+                multiple ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("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__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-check", style: { fontSize: 11 } }) : null }) : null,
+                o.icon ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-opt-icon", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-" + o.icon }) }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-opt-label", children: o.label }),
+                  o.description ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-opt-desc", children: o.description }) : null
                 ] }),
-                o.meta ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-opt-meta", children: o.meta }) : null,
-                multiple ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-opt-check", children: o.value === value ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-check" }) : null })
+                o.meta ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-opt-meta", children: o.meta }) : null,
+                multiple ? null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-opt-check", children: o.value === value ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-check" }) : null })
               ]
             },
             String(o.value)
@@ -5031,208 +5665,6 @@ function Select({
         ] }, grp.g || "_")) })
       }
     ),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-field-error", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
-      error
-    ] }) : help ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-field-help", children: help }) : null
-  ] });
-}
-
-// src/components/forms/DatePicker.tsx
-var React34 = __toESM(require("react"), 1);
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-var DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-var iso = (d) => d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
-var parse = (s) => {
-  if (!s) return null;
-  const [y, m, d] = s.split("-").map(Number);
-  return new Date(y, m - 1, d);
-};
-var fmt = (s) => {
-  const d = parse(s);
-  return d ? MONTHS[d.getMonth()].slice(0, 3) + " " + d.getDate() + ", " + d.getFullYear() : "";
-};
-function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
-  const today = /* @__PURE__ */ new Date();
-  const sel = range ? value || {} : { start: value, end: value };
-  const anchor = parse(sel.start) || parse(initialMonth) || today;
-  const [vy, setVy] = React34.useState(anchor.getFullYear());
-  const [vm, setVm] = React34.useState(anchor.getMonth());
-  const [mode2, setMode] = React34.useState("days");
-  const [hover, setHover] = React34.useState(null);
-  const s = parse(sel.start), e = parse(sel.end);
-  const hoverEnd = range && s && !e && hover ? parse(hover) : null;
-  const inRange = (d) => {
-    const lo = s, hi = e || hoverEnd;
-    return lo && hi && d > (lo < hi ? lo : hi) && d < (lo < hi ? hi : lo);
-  };
-  const isEdge = (d) => s && iso(d) === iso(s) || e && iso(d) === iso(e);
-  const clickDay = (d) => {
-    const v = iso(d);
-    if (!range) {
-      onPick(v);
-      return;
-    }
-    if (!sel.start || sel.start && sel.end) onPick({ start: v, end: "" });
-    else {
-      const a = parse(sel.start);
-      onPick(d < a ? { start: v, end: sel.start } : { start: sel.start, end: v });
-    }
-  };
-  const nav = (d) => {
-    let m = vm + d, y = vy;
-    if (m < 0) {
-      m = 11;
-      y--;
-    }
-    if (m > 11) {
-      m = 0;
-      y++;
-    }
-    setVm(m);
-    setVy(y);
-  };
-  const monthGrid = (y, m) => {
-    const startPad = new Date(y, m, 1).getDay();
-    const cells = [];
-    for (let i = 0; i < 42; i++) cells.push(new Date(y, m, i - startPad + 1));
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "fd-cal-grid", style: { width: months > 1 ? 252 : "auto", flex: "none" }, onMouseLeave: () => setHover(null), children: [
-      DOW.map((d) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-cal-dow", children: d }, d)),
-      cells.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-        "button",
-        {
-          type: "button",
-          className: ["fd-cal-day", d.getMonth() !== m ? "is-out" : "", iso(d) === iso(today) ? "is-today" : "", inRange(d) ? "in-range" : "", isEdge(d) ? "is-edge" : ""].filter(Boolean).join(" "),
-          onClick: () => clickDay(d),
-          onMouseEnter: () => range && setHover(iso(d)),
-          children: d.getDate()
-        },
-        i
-      ))
-    ] });
-  };
-  const nextY = vm === 11 ? vy + 1 : vy, nextM = (vm + 1) % 12;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "fd-cal", style: { width: months > 1 && mode2 === "days" ? "auto" : void 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "fd-cal-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Previous", onClick: () => mode2 === "years" ? setVy(vy - 12) : mode2 === "months" ? setVy(vy - 1) : nav(-1), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-caret-left" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("button", { type: "button", className: "fd-cal-title", onClick: () => setMode(mode2 === "days" ? "months" : mode2 === "months" ? "years" : "days"), children: [
-        mode2 === "days" ? MONTHS[vm] + " " + vy : mode2 === "months" ? vy : vy - 5 + " \u2013 " + (vy + 6),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-caret-down", style: { fontSize: 10, marginLeft: 6, color: "var(--text-muted)" } })
-      ] }),
-      months > 1 && mode2 === "days" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-cal-title", style: { cursor: "default", background: "none" }, children: MONTHS[nextM] + " " + nextY }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Next", onClick: () => mode2 === "years" ? setVy(vy + 12) : mode2 === "months" ? setVy(vy + 1) : nav(1), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-caret-right" }) })
-    ] }),
-    mode2 === "days" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { style: { display: "flex", gap: 18 }, children: [
-      monthGrid(vy, vm),
-      months > 1 ? monthGrid(nextY, nextM) : null
-    ] }) : mode2 === "months" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fd-cal-grid-months", children: MONTHS.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "fd-cal-cell" + (i === vm && s && s.getFullYear() === vy ? " is-sel" : ""),
-        onClick: () => {
-          setVm(i);
-          setMode("days");
-        },
-        children: m.slice(0, 3)
-      },
-      m
-    )) }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fd-cal-grid-months", children: Array.from({ length: 12 }, (_, i) => vy - 5 + i).map((y) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "fd-cal-cell" + (y === vy ? " is-sel" : ""),
-        onClick: () => {
-          setVy(y);
-          setMode("months");
-        },
-        children: y
-      },
-      y
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "fd-cal-foot", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-        "button",
-        {
-          type: "button",
-          className: "fd-btn fd-btn-link",
-          style: { fontSize: 12.5 },
-          onClick: () => {
-            setVy(today.getFullYear());
-            setVm(today.getMonth());
-            setMode("days");
-          },
-          children: "Today"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { style: { flex: 1 } }),
-      range && sel.start ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "fd-body-sm fd-muted", children: [
-        fmt(sel.start),
-        sel.end ? " \u2192 " + fmt(sel.end) : " \u2192 pick an end"
-      ] }) : null
-    ] })
-  ] });
-}
-function DatePicker({ label, help, error, required = false, disabled = false, range = false, value, onChange, placeholder, id, className = "", style, ...rest }) {
-  const { fieldId, labelId, ariaLabelledBy } = useTriggerLabelling(label, id);
-  const [open, setOpen] = React34.useState(false);
-  const rootRef = React34.useRef(null);
-  const boxRef = React34.useRef(null);
-  const display = range ? value && value.start ? fmt(value.start) + (value.end ? "  \u2192  " + fmt(value.end) : "  \u2192  \u2026") : "" : fmt(value);
-  const toggle = () => {
-    if (!disabled) setOpen(!open);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ["fd-field", "fd-popfield", open ? "is-open" : "", className].filter(Boolean).join(" "), style, ref: rootRef, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FieldLabel, { id: labelId, required, onClick: toggle, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ["fd-input", error ? "fd-input-error" : "", disabled ? "fd-input-disabled" : ""].filter(Boolean).join(" "), style: { cursor: disabled ? "not-allowed" : "pointer" }, onClick: toggle, ref: boxRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-input-icon", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-calendar-blank", "aria-hidden": "true" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-        "button",
-        {
-          type: "button",
-          id: fieldId,
-          "aria-labelledby": ariaLabelledBy,
-          title: truncationTitle(display),
-          disabled,
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              toggle();
-            }
-          },
-          style: { all: "unset", flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: "inherit", color: display ? "var(--text)" : "var(--text-muted)" },
-          ...rest,
-          children: display || placeholder || (range ? "Pick a date range" : "Pick a date")
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fd-select-caret", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-caret-down", "aria-hidden": "true" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-      Popover,
-      {
-        open,
-        anchorRef: boxRef,
-        triggerRef: rootRef,
-        onClose: () => setOpen(false),
-        placement: "bottom-start",
-        offset: 6,
-        role: "presentation",
-        style: { width: "max-content" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-          Calendar,
-          {
-            range,
-            months: range ? 2 : 1,
-            value,
-            onPick: (v) => {
-              onChange && onChange({ target: { value: v } });
-              if (!range || v.start && v.end) setOpen(false);
-            }
-          }
-        )
-      }
-    ),
     error ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "fd-field-error", children: [
       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       error