react-os-shell 4.55.0 → 4.67.0

package/dist/{chunk-CTTHBTOX.js → chunk-B3IYV7JN.js}

@@ -1,7 +1,7 @@
 import { Breadcrumbs } from './chunk-HNH7FOYB.js';
 import { SidebarLayout } from './chunk-YG45DAUT.js';
 import { useIsMobile, PopupMenu, PopupMenuItem, useShellPrefs } from './chunk-ZCDFNZQS.js';
-import { registerModalEscapeInterceptor, useFocusTrap, useScrollLock } from './chunk-OXLLRKBC.js';
+import { registerModalEscapeInterceptor, useFocusTrap, useScrollLock } from './chunk-CDR2Q64Q.js';
 import { glassStyle } from './chunk-3CUSBZWG.js';
 import { forwardRef, useId, useCallback, useState, useRef, useEffect, createContext, useLayoutEffect, useMemo, Children, isValidElement, cloneElement, useContext, Fragment as Fragment$1, Component, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -164,7 +164,7 @@ function inputClasses(opts) {
   return [shape, opts?.invalid ? INPUT_INVALID : "", INPUT_DISABLED, opts?.className ?? ""].filter(Boolean).join(" ");
 }
 var Input = forwardRef(function Input2({ invalid, leftIcon, rightAdornment, size, className = "", ...rest }, ref) {
-  const pad2 = `${leftIcon ? "pl-9" : ""} ${rightAdornment ? "pr-9" : ""}`.trim();
+  const pad5 = `${leftIcon ? "pl-9" : ""} ${rightAdornment ? "pr-9" : ""}`.trim();
   const field = (
     // `inputMode` needs no plumbing — it rides the native spread onto the
     // <input>, which is how a till sets inputMode="none" to keep the OS
@@ -174,7 +174,7 @@ var Input = forwardRef(function Input2({ invalid, leftIcon, rightAdornment, size
       {
         ref,
         "aria-invalid": invalid || void 0,
-        className: inputClasses({ invalid, size, className: [pad2, className].filter(Boolean).join(" ") }),
+        className: inputClasses({ invalid, size, className: [pad5, className].filter(Boolean).join(" ") }),
         ...rest
       }
     )
@@ -282,7 +282,8 @@ function useAnchoredPosition(triggerRef, open) {
       const placeAbove = spaceBelow < Math.min(MENU_MAX_HEIGHT, 160) && spaceAbove > spaceBelow;
       const maxHeight = Math.max(96, Math.min(MENU_MAX_HEIGHT, placeAbove ? spaceAbove : spaceBelow));
       const left = Math.max(VIEWPORT_MARGIN, Math.min(rect.left, window.innerWidth - rect.width - VIEWPORT_MARGIN));
-      const next = { left, minWidth: rect.width, maxHeight };
+      const width = Math.min(rect.width, window.innerWidth - 2 * VIEWPORT_MARGIN);
+      const next = { left, width, maxHeight };
       if (placeAbove) next.bottom = window.innerHeight - rect.top + MENU_GAP;
       else next.top = rect.bottom + MENU_GAP;
       setPos(next);
@@ -497,12 +498,12 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
           ref: listRef,
           id: listboxId,
           role: "listbox",
-          className: "fixed z-[400] overflow-y-auto rounded-2xl py-1",
+          className: "fixed z-[10000] overflow-y-auto rounded-2xl py-1",
           style: {
             left: menuPos?.left,
             top: menuPos?.top,
             bottom: menuPos?.bottom,
-            minWidth: menuPos?.minWidth,
+            width: menuPos?.width,
             maxHeight: menuPos?.maxHeight ?? MENU_MAX_HEIGHT,
             visibility: menuPos ? void 0 : "hidden",
             ...glassStyle()
@@ -1098,6 +1099,273 @@ function MediaUploadGrid({
     }
   ) });
 }
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+var DAY_SHORT = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var pad = (n) => String(n).padStart(2, "0");
+function toKey(d) {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function fromKey(key) {
+  if (!key) return null;
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(key);
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+var monthKey = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}`;
+var YEARS_PER_PAGE = 12;
+var yearPageStart = (y) => Math.floor(y / YEARS_PER_PAGE) * YEARS_PER_PAGE;
+function monthStart(key) {
+  const m = /^(\d{4})-(\d{2})$/.exec(key);
+  return m ? new Date(Number(m[1]), Number(m[2]) - 1, 1) : /* @__PURE__ */ new Date();
+}
+function buildCells(view, weekStartsOn) {
+  const first = new Date(view.getFullYear(), view.getMonth(), 1);
+  const lead = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = new Date(first.getFullYear(), first.getMonth(), 1 - lead);
+  return Array.from({ length: 42 }, (_, i) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + i));
+}
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var addMonths = (d, n) => {
+  const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), lastDay));
+};
+function Calendar({
+  value,
+  endValue,
+  mode = "single",
+  onSelect,
+  min,
+  max,
+  month,
+  defaultMonth,
+  onMonthChange,
+  weekStartsOn = 0,
+  quickJump = true,
+  "aria-label": ariaLabel,
+  className = ""
+}) {
+  const selected = fromKey(value);
+  const today = /* @__PURE__ */ new Date();
+  const todayKey = toKey(today);
+  const [innerMonth, setInnerMonth] = useState(() => {
+    if (defaultMonth) return defaultMonth;
+    if (selected) return monthKey(selected);
+    const here = monthKey(today);
+    if (min && here < min.slice(0, 7)) return min.slice(0, 7);
+    if (max && here > max.slice(0, 7)) return max.slice(0, 7);
+    return here;
+  });
+  const viewMonth = month ?? innerMonth;
+  const view = monthStart(viewMonth);
+  const [active, setActive] = useState(() => value ?? todayKey);
+  const gridRef = useRef(null);
+  const shouldFocus = useRef(false);
+  const [panel, setPanel] = useState("days");
+  const cells = useMemo(() => buildCells(view, weekStartsOn), [viewMonth, weekStartsOn]);
+  const outOfRange = (key) => !!min && key < min || !!max && key > max;
+  const activeInView = cells.some((c) => toKey(c) === active);
+  const fallbackActive = toKey(cells.find((c) => c.getMonth() === view.getMonth()) ?? cells[0]);
+  const activeKey = activeInView ? active : fallbackActive;
+  useEffect(() => {
+    if (!shouldFocus.current) return;
+    shouldFocus.current = false;
+    gridRef.current?.querySelector('[data-active="true"]')?.focus();
+  }, [activeKey, viewMonth]);
+  const pageBy = (n) => {
+    if (panel === "years") return new Date(view.getFullYear() + n * YEARS_PER_PAGE, view.getMonth(), 1);
+    if (panel === "months") return new Date(view.getFullYear() + n, view.getMonth(), 1);
+    return addMonths(view, n);
+  };
+  const pageBack = () => pageBy(-1);
+  const pageForward = () => pageBy(1);
+  const goToMonth = (next) => {
+    const key = monthKey(next);
+    if (month === void 0) setInnerMonth(key);
+    onMonthChange?.(key);
+  };
+  const moveTo = (next) => {
+    shouldFocus.current = true;
+    setActive(toKey(next));
+    if (monthKey(next) !== viewMonth) goToMonth(next);
+  };
+  const onKeyDown = (e) => {
+    const current = fromKey(activeKey) ?? today;
+    const step = {
+      ArrowLeft: () => addDays(current, -1),
+      ArrowRight: () => addDays(current, 1),
+      ArrowUp: () => addDays(current, -7),
+      ArrowDown: () => addDays(current, 7),
+      // Home and End are the week, not the month: the grid's rows are weeks, and
+      // this is what the ARIA date-grid pattern asks for.
+      Home: () => addDays(current, -((current.getDay() - weekStartsOn + 7) % 7)),
+      End: () => addDays(current, 6 - (current.getDay() - weekStartsOn + 7) % 7),
+      PageUp: () => addMonths(current, e.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(current, e.shiftKey ? 12 : 1)
+    };
+    if (step[e.key]) {
+      e.preventDefault();
+      moveTo(step[e.key]());
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (!outOfRange(activeKey)) onSelect(activeKey);
+    }
+  };
+  const inRange = (key) => {
+    if (mode !== "range" || !value || !endValue) return false;
+    return key > value && key < endValue;
+  };
+  const label = ariaLabel ?? `${MONTH_NAMES[view.getMonth()]} ${view.getFullYear()}`;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between px-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": panel === "years" ? "Previous years" : panel === "months" ? "Previous year" : "Previous month",
+          onClick: () => goToMonth(pageBack()),
+          className: "rounded-full p-1 text-gray-600 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+          children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "flex items-center gap-1 text-sm font-semibold text-gray-800", children: quickJump ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        panel !== "years" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Choose a month, currently ${MONTH_NAMES[view.getMonth()]}`,
+            onClick: () => setPanel((p) => p === "months" ? "days" : "months"),
+            className: "rounded-md px-1.5 py-0.5 transition-colors hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+            children: MONTH_NAMES[view.getMonth()]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Choose a year, currently ${view.getFullYear()}`,
+            onClick: () => setPanel((p) => p === "years" ? "days" : "years"),
+            className: "rounded-md px-1.5 py-0.5 transition-colors hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+            children: view.getFullYear()
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs("span", { children: [
+        MONTH_NAMES[view.getMonth()],
+        " ",
+        view.getFullYear()
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": panel === "years" ? "Next years" : panel === "months" ? "Next year" : "Next month",
+          onClick: () => goToMonth(pageForward()),
+          className: "rounded-full p-1 text-gray-600 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+          children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+        }
+      )
+    ] }),
+    panel === "months" && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Choose a month", className: "grid grid-cols-3 gap-1 text-center text-sm", children: MONTH_NAMES.map((name, m) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": m === view.getMonth(),
+        onClick: () => {
+          goToMonth(new Date(view.getFullYear(), m, 1));
+          setPanel("days");
+        },
+        className: [
+          "rounded-md py-4 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+          m === view.getMonth() ? "bg-blue-600 font-semibold text-white" : m === today.getMonth() && view.getFullYear() === today.getFullYear() ? "font-medium text-blue-600 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"
+        ].join(" "),
+        children: name.slice(0, 3)
+      },
+      name
+    )) }),
+    panel === "years" && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Choose a year", className: "grid grid-cols-3 gap-1 text-center text-sm", children: Array.from({ length: YEARS_PER_PAGE }, (_, i) => yearPageStart(view.getFullYear()) + i).map((y) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": y === view.getFullYear(),
+        onClick: () => {
+          goToMonth(new Date(y, view.getMonth(), 1));
+          setPanel("months");
+        },
+        className: [
+          "rounded-md py-4 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+          y === view.getFullYear() ? "bg-blue-600 font-semibold text-white" : y === today.getFullYear() ? "font-medium text-blue-600 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"
+        ].join(" "),
+        children: y
+      },
+      y
+    )) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: gridRef,
+        role: "grid",
+        "aria-label": label,
+        onKeyDown,
+        hidden: panel !== "days",
+        children: [
+          /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 text-center text-xs font-medium text-gray-500", children: Array.from({ length: 7 }, (_, i) => (i + weekStartsOn) % 7).map((d) => (
+            // abbr carries the full name: "Su" is read as a word otherwise.
+            /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": DAY_NAMES[d], className: "py-1", children: /* @__PURE__ */ jsx("abbr", { title: DAY_NAMES[d], className: "no-underline", children: DAY_SHORT[d] }) }, d)
+          )) }),
+          Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 text-center text-sm", children: cells.slice(row * 7, row * 7 + 7).map((cell) => {
+            const key = toKey(cell);
+            const outside = cell.getMonth() !== view.getMonth();
+            const isSelected = key === value || mode === "range" && key === endValue;
+            const between = inRange(key);
+            const disabled = outOfRange(key);
+            return /* @__PURE__ */ jsx("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-active": key === activeKey,
+                tabIndex: key === activeKey ? 0 : -1,
+                disabled,
+                "aria-label": `${cell.getDate()} ${MONTH_NAMES[cell.getMonth()]} ${cell.getFullYear()}`,
+                "aria-current": key === todayKey ? "date" : void 0,
+                onClick: () => {
+                  setActive(key);
+                  onSelect(key);
+                },
+                className: [
+                  // 44px below `sm`, compact above it. A 32px cell is under
+                  // every touch-target guideline there is, and a date grid
+                  // is seven of them side by side — the case where missing
+                  // by four pixels picks the wrong day rather than nothing.
+                  "w-full rounded-md py-1.5 min-h-11 sm:min-h-0 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+                  disabled ? "cursor-not-allowed text-gray-300" : isSelected ? "bg-blue-600 font-semibold text-white" : between ? "bg-blue-100 text-blue-800" : outside ? "text-gray-300 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100",
+                  key === todayKey && !isSelected ? "font-semibold text-blue-600" : ""
+                ].filter(Boolean).join(" "),
+                children: cell.getDate()
+              }
+            ) }, key);
+          }) }, row))
+        ]
+      }
+    )
+  ] });
+}
 function useClickOutside(ref, onClose) {
   useEffect(() => {
     const handler = (e) => {
@@ -1108,10 +1376,8 @@ function useClickOutside(ref, onClose) {
   }, [ref, onClose]);
 }
 var PRESET_LABELS = ["Last 2 Weeks", "Last Month", "Last 3 Months", "Last 6 Months", "Last 12 Months"];
-var MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-var YEARS_PER_PAGE = 12;
-var yearPageStart = (y) => Math.floor(y / YEARS_PER_PAGE) * YEARS_PER_PAGE;
-var pad = (n) => String(n).padStart(2, "0");
+var monthKeyOf = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}`;
+var pad2 = (n) => String(n).padStart(2, "0");
 var EDGE_MARGIN = 8;
 function clipBounds(el) {
   for (let node = el.parentElement; node; node = node.parentElement) {
@@ -1125,7 +1391,7 @@ function clipBounds(el) {
   return { left: 0, right: window.innerWidth };
 }
 function toISODate(d) {
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
 }
 function parseDate(s) {
   const [y, m, d] = s.split("-").map(Number);
@@ -1151,10 +1417,7 @@ function DateRangePicker({
   const panelRef = useRef(null);
   const [align, setAlign] = useState("left");
   const now = /* @__PURE__ */ new Date();
-  const [month, setMonth] = useState(from ? parseDate(from).getMonth() : now.getMonth());
-  const [year, setYear] = useState(from ? parseDate(from).getFullYear() : now.getFullYear());
-  const [view, setView] = useState("days");
-  const [yearPage, setYearPage] = useState(() => yearPageStart(year));
+  const [viewMonth, setViewMonth] = useState(() => monthKeyOf(from ? parseDate(from) : now));
   const displayDate = (s) => s ? formatDisplay(s) : "";
   useClickOutside(ref, useCallback(() => {
     if (open) setOpen(false);
@@ -1179,11 +1442,7 @@ function DateRangePicker({
     setTempFrom(from);
     setTempTo(to);
     setActivePreset(null);
-    const anchor = from ? parseDate(from) : now;
-    setMonth(anchor.getMonth());
-    setYear(anchor.getFullYear());
-    setYearPage(yearPageStart(anchor.getFullYear()));
-    setView("days");
+    setViewMonth(monthKeyOf(from ? parseDate(from) : now));
     setOpen(true);
   };
   const handlePreset = (label) => {
@@ -1216,10 +1475,7 @@ function DateRangePicker({
     setTempFrom(toISODate(start));
     setTempTo(toISODate(end));
     setActivePreset(label);
-    setMonth(start.getMonth());
-    setYear(start.getFullYear());
-    setYearPage(yearPageStart(start.getFullYear()));
-    setView("days");
+    setViewMonth(monthKeyOf(start));
   };
   const handleCalendarSelect = (date) => {
     setActivePreset("Custom");
@@ -1243,57 +1499,6 @@ function DateRangePicker({
     onChange("", "");
     setOpen(false);
   };
-  const changeMonth = (delta) => {
-    let m = month + delta, y = year;
-    if (m < 0) {
-      m = 11;
-      y--;
-    } else if (m > 11) {
-      m = 0;
-      y++;
-    }
-    setMonth(m);
-    setYear(y);
-  };
-  const handleStep = (delta) => {
-    if (view === "days") changeMonth(delta);
-    else if (view === "months") setYear(year + delta);
-    else setYearPage(yearPage + delta * YEARS_PER_PAGE);
-  };
-  const selectMonth = (m) => {
-    setMonth(m);
-    setView("days");
-  };
-  const selectYear = (y) => {
-    setYear(y);
-    setView("months");
-  };
-  const openYears = () => {
-    setYearPage(yearPageStart(year));
-    setView("years");
-  };
-  const firstDay = new Date(year, month, 1).getDay();
-  const daysInMonth = new Date(year, month + 1, 0).getDate();
-  const prevDays = new Date(year, month, 0).getDate();
-  const monthName = new Date(year, month).toLocaleString("default", { month: "long" });
-  const cells = [];
-  for (let i = firstDay - 1; i >= 0; i--) {
-    const d = new Date(year, month - 1, prevDays - i);
-    cells.push({ day: prevDays - i, current: false, date: toISODate(d) });
-  }
-  for (let d = 1; d <= daysInMonth; d++) {
-    cells.push({ day: d, current: true, date: toISODate(new Date(year, month, d)) });
-  }
-  const remaining = 42 - cells.length;
-  for (let d = 1; d <= remaining; d++) {
-    cells.push({ day: d, current: false, date: toISODate(new Date(year, month + 1, d)) });
-  }
-  const isInRange = (date) => {
-    if (!tempFrom || !tempTo) return false;
-    const s = tempFrom < tempTo ? tempFrom : tempTo;
-    const e = tempFrom < tempTo ? tempTo : tempFrom;
-    return date > s && date < e;
-  };
   const displayText = from && to ? `${displayDate(from)} \u2014 ${displayDate(to)}` : from ? `From ${displayDate(from)}` : to ? `To ${displayDate(to)}` : "";
   return /* @__PURE__ */ jsxs("div", { className: "relative", ref, children: [
     /* @__PURE__ */ jsxs(
@@ -1349,85 +1554,18 @@ function DateRangePicker({
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "w-64", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2 px-1", children: [
-                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => handleStep(-1), "aria-label": "Previous", className: "p-1 rounded-full hover:bg-gray-100 text-gray-600", children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) }) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm font-semibold text-gray-800", children: [
-                  view === "days" && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setView("months"),
-                      className: "px-1.5 py-0.5 rounded-md hover:bg-gray-100 transition-colors",
-                      children: monthName
-                    }
-                  ),
-                  view === "years" ? /* @__PURE__ */ jsxs("span", { className: "px-1.5 py-0.5", children: [
-                    yearPage,
-                    " \u2013 ",
-                    yearPage + YEARS_PER_PAGE - 1
-                  ] }) : /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: openYears,
-                      className: "px-1.5 py-0.5 rounded-md hover:bg-gray-100 transition-colors",
-                      children: year
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => handleStep(1), "aria-label": "Next", className: "p-1 rounded-full hover:bg-gray-100 text-gray-600", children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) }) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "min-h-[13.75rem]", children: [
-                view === "days" && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 text-center text-xs font-medium text-gray-500 mb-1", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsx("div", { className: "py-1", children: d }, d)) }),
-                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 text-center text-sm", children: cells.map((c, i) => {
-                    const isStart = c.date === tempFrom;
-                    const isEnd = c.date === tempTo;
-                    const isSelected = isStart || isEnd;
-                    const inRange = isInRange(c.date);
-                    return /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => handleCalendarSelect(c.date),
-                        className: `py-1.5 rounded-md transition-colors ${!c.current ? "text-gray-300" : isSelected ? "bg-blue-600 text-white font-semibold" : inRange ? "bg-blue-100 text-blue-800" : "text-gray-700 hover:bg-gray-100"}`,
-                        children: c.day
-                      },
-                      i
-                    );
-                  }) })
-                ] }),
-                view === "months" && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 text-center text-sm", children: MONTH_NAMES.map((name, m) => {
-                  const isCurrent = m === month;
-                  const isThisMonth = m === now.getMonth() && year === now.getFullYear();
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => selectMonth(m),
-                      className: `py-4 rounded-md transition-colors ${isCurrent ? "bg-blue-600 text-white font-semibold" : isThisMonth ? "text-blue-600 font-medium hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"}`,
-                      children: name
-                    },
-                    name
-                  );
-                }) }),
-                view === "years" && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 text-center text-sm", children: Array.from({ length: YEARS_PER_PAGE }, (_, i) => yearPage + i).map((y) => {
-                  const isCurrent = y === year;
-                  const isThisYear = y === now.getFullYear();
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => selectYear(y),
-                      className: `py-4 rounded-md transition-colors ${isCurrent ? "bg-blue-600 text-white font-semibold" : isThisYear ? "text-blue-600 font-medium hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"}`,
-                      children: y
-                    },
-                    y
-                  );
-                }) })
-              ] })
-            ] }),
+            /* @__PURE__ */ jsx("div", { className: "w-64", children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "range",
+                value: tempFrom || null,
+                endValue: tempTo || null,
+                month: viewMonth,
+                onMonthChange: setViewMonth,
+                onSelect: handleCalendarSelect,
+                "aria-label": "Date range"
+              }
+            ) }),
             /* @__PURE__ */ jsxs("div", { className: "border-l border-gray-200 pl-4 flex flex-col gap-1 min-w-[130px]", children: [
               PRESET_LABELS.map((label) => /* @__PURE__ */ jsx(
                 "button",
@@ -1469,37 +1607,315 @@ function DateRangePicker({
     )
   ] });
 }
-var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
-function toInputValue(value) {
+var TIME = /^\d{2}:\d{2}(:\d{2})?$/;
+var pad3 = (n) => String(n).padStart(2, "0");
+function toInputValue(value, withSeconds) {
+  if (value === null || value === void 0 || value === "") return "";
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) return "";
+    const base = `${pad3(value.getHours())}:${pad3(value.getMinutes())}`;
+    return withSeconds ? `${base}:${pad3(value.getSeconds())}` : base;
+  }
+  return TIME.test(value) ? value : "";
+}
+var TimePicker = forwardRef(function TimePicker2({ value, onChange, min, max, invalid, size, className = "", step, ...rest }, ref) {
+  const withSeconds = step != null && Number(step) < 60;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "time",
+      step,
+      "aria-invalid": invalid || void 0,
+      value: toInputValue(value, withSeconds),
+      min: toInputValue(min, withSeconds) || void 0,
+      max: toInputValue(max, withSeconds) || void 0,
+      onChange: (event) => onChange?.(TIME.test(event.target.value) ? event.target.value : null),
+      className: inputClasses({ invalid, size, className }),
+      ...rest
+    }
+  );
+});
+var TimePicker_default = TimePicker;
+var POPUP_MAX_WIDTH = 448;
+var MENU_MAX_HEIGHT2 = 240;
+var MENU_GAP2 = 4;
+var VIEWPORT_MARGIN2 = 8;
+function useDropdownPosition(triggerRef, open) {
+  const [pos, setPos] = useState(null);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    let lastLeft = NaN, lastTop = NaN, lastRight = NaN, lastBottom = NaN;
+    const compute = () => {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      lastLeft = rect.left;
+      lastTop = rect.top;
+      lastRight = rect.right;
+      lastBottom = rect.bottom;
+      const spaceBelow = window.innerHeight - rect.bottom - MENU_GAP2 - VIEWPORT_MARGIN2;
+      const spaceAbove = rect.top - MENU_GAP2 - VIEWPORT_MARGIN2;
+      const placeAbove = spaceBelow < Math.min(MENU_MAX_HEIGHT2, 160) && spaceAbove > spaceBelow;
+      const maxHeight = Math.max(96, Math.min(MENU_MAX_HEIGHT2, placeAbove ? spaceAbove : spaceBelow));
+      const next = { minWidth: rect.width, maxHeight };
+      if (window.innerWidth - rect.left < POPUP_MAX_WIDTH) {
+        next.right = Math.max(VIEWPORT_MARGIN2, window.innerWidth - rect.right);
+      } else {
+        next.left = Math.max(VIEWPORT_MARGIN2, rect.left);
+      }
+      if (placeAbove) next.bottom = window.innerHeight - rect.top + MENU_GAP2;
+      else next.top = rect.bottom + MENU_GAP2;
+      setPos(next);
+    };
+    compute();
+    let raf = requestAnimationFrame(function tick() {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (rect && (rect.left !== lastLeft || rect.top !== lastTop || rect.right !== lastRight || rect.bottom !== lastBottom)) {
+        compute();
+      }
+      raf = requestAnimationFrame(tick);
+    });
+    window.addEventListener("scroll", compute, true);
+    window.addEventListener("resize", compute);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("scroll", compute, true);
+      window.removeEventListener("resize", compute);
+    };
+  }, [open, triggerRef]);
+  return pos;
+}
+var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+var MONTH_NAMES2 = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function toInputValue2(value) {
+  if (value === null || value === void 0 || value === "") return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : toISODate(value);
+  if (ISO_DATE.test(value)) return value;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? "" : toISODate(parsed);
+}
+function fromInputValue(raw) {
+  if (!ISO_DATE.test(raw)) return null;
+  const [year, month, day] = raw.split("-").map(Number);
+  const date = new Date(year, month - 1, day);
+  return date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+}
+function display(key) {
+  const d = fromInputValue(key);
+  return d ? `${d.getDate()} ${MONTH_NAMES2[d.getMonth()]} ${d.getFullYear()}` : "";
+}
+var DatePicker = forwardRef(function DatePicker2({
+  value,
+  onChange,
+  min,
+  max,
+  invalid,
+  size,
+  native,
+  weekStartsOn,
+  className = "",
+  "aria-label": ariaLabel,
+  "aria-describedby": describedBy,
+  id,
+  name,
+  disabled,
+  placeholder,
+  ...rest
+}, ref) {
+  const current = toInputValue2(value);
+  const lo = toInputValue2(min);
+  const hi = toInputValue2(max);
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const panelId = useId();
+  const pos = useDropdownPosition(triggerRef, open);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (wrapRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    return registerModalEscapeInterceptor((event) => {
+      if (event.key !== "Escape") return false;
+      setOpen(false);
+      triggerRef.current?.focus();
+      return true;
+    });
+  }, [open]);
+  if (native) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "date",
+        id,
+        name,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid || void 0,
+        value: current,
+        min: lo || void 0,
+        max: hi || void 0,
+        onChange: (event) => onChange?.(fromInputValue(event.target.value)),
+        className: inputClasses({ invalid, size, className }),
+        ...rest
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "relative", children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "hidden", name, value: current }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        id,
+        disabled,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? panelId : void 0,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid || void 0,
+        "aria-label": ariaLabel ? `${ariaLabel}${current ? `, ${display(current)}` : ""}` : void 0,
+        onClick: () => setOpen((o) => !o),
+        className: `${inputClasses({ invalid, size, className })} flex items-center justify-between text-left`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: current ? "text-gray-900" : "text-gray-400", children: current ? display(current) : placeholder ?? "Select a date" }),
+          /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 shrink-0 text-gray-400", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3M4 11h16M5 7h14a1 1 0 011 1v11a1 1 0 01-1 1H5a1 1 0 01-1-1V8a1 1 0 011-1z" }) })
+        ]
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          id: panelId,
+          role: "dialog",
+          "aria-label": ariaLabel ?? "Choose a date",
+          className: "fixed z-[400] w-72 rounded-xl border border-gray-200 bg-white p-3 shadow-lg",
+          style: {
+            left: pos?.left,
+            right: pos?.right,
+            top: pos?.top,
+            bottom: pos?.bottom,
+            // Hidden for the first paint until the layout effect measures the
+            // trigger, so the panel never flashes at (0,0).
+            visibility: pos ? void 0 : "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                value: current || null,
+                min: lo || null,
+                max: hi || null,
+                weekStartsOn,
+                onSelect: (key) => {
+                  setOpen(false);
+                  triggerRef.current?.focus();
+                  onChange?.(fromInputValue(key));
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between border-t border-gray-100 pt-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                    onChange?.(null);
+                  },
+                  className: "rounded-md px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700",
+                  children: "Clear"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                    onChange?.(/* @__PURE__ */ new Date());
+                  },
+                  className: "rounded-md px-2 py-1 text-sm font-medium text-blue-600 hover:bg-blue-50",
+                  children: "Today"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+var DatePicker_default = DatePicker;
+var ISO_LOCAL = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/;
+var pad4 = (n) => String(n).padStart(2, "0");
+function serialise(date) {
+  return `${date.getFullYear()}-${pad4(date.getMonth() + 1)}-${pad4(date.getDate())}T${pad4(date.getHours())}:${pad4(date.getMinutes())}`;
+}
+function toInputValue3(value) {
   if (value === null || value === void 0 || value === "") return "";
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : toISODate(value);
-  if (ISO_DATE.test(value)) return value;
-  const parsed = new Date(value);
-  return Number.isNaN(parsed.getTime()) ? "" : toISODate(parsed);
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : serialise(value);
+  if (ISO_LOCAL.test(value)) return value;
+  return "";
 }
-function fromInputValue(raw) {
-  if (!ISO_DATE.test(raw)) return null;
-  const [year, month, day] = raw.split("-").map(Number);
-  const date = new Date(year, month - 1, day);
+function fromInputValue2(raw) {
+  if (!ISO_LOCAL.test(raw)) return null;
+  const [datePart, timePart] = raw.split("T");
+  const [year, month, day] = datePart.split("-").map(Number);
+  const [hours, minutes, seconds = 0] = timePart.split(":").map(Number);
+  if (hours > 23 || minutes > 59 || seconds > 59) return null;
+  const date = new Date(year, month - 1, day, hours, minutes, seconds);
   return date.getMonth() === month - 1 && date.getDate() === day ? date : null;
 }
-var DatePicker = forwardRef(function DatePicker2({ value, onChange, min, max, invalid, size, className = "", ...rest }, ref) {
+var DateTimePicker = forwardRef(function DateTimePicker2({ value, onChange, min, max, invalid, size, className = "", ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "input",
     {
       ref,
-      type: "date",
+      type: "datetime-local",
       "aria-invalid": invalid || void 0,
-      value: toInputValue(value),
-      min: toInputValue(min) || void 0,
-      max: toInputValue(max) || void 0,
-      onChange: (event) => onChange?.(fromInputValue(event.target.value)),
+      value: toInputValue3(value),
+      min: toInputValue3(min) || void 0,
+      max: toInputValue3(max) || void 0,
+      onChange: (event) => onChange?.(fromInputValue2(event.target.value)),
       className: inputClasses({ invalid, size, className }),
       ...rest
     }
   );
 });
-var DatePicker_default = DatePicker;
+var DateTimePicker_default = DateTimePicker;
 
 // src/forms/keypadInput.ts
 var MAX_FRACTION_DIGITS = 2;
@@ -1610,8 +2026,8 @@ function Segmented({
   className = ""
 }) {
   const groupId = useId();
-  const track = `inline-flex items-center gap-1 rounded-lg bg-gray-100 p-1 ${block ? "w-full" : ""} ${className}`.trim();
-  const itemBase = `inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors ${block ? "flex-1" : ""}`;
+  const track = `inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-lg bg-gray-100 p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden ${block ? "w-full" : ""} ${className}`.trim();
+  const itemBase = `inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium transition-colors ${block ? "flex-1" : ""}`;
   if (name) {
     return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label, className: track, children: options.map((opt) => {
       const id = `${groupId}-${opt.value}`;
@@ -1962,57 +2378,6 @@ function FilePicker({
     error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-red-600", children: error })
   ] });
 }
-var POPUP_MAX_WIDTH = 448;
-var MENU_MAX_HEIGHT2 = 240;
-var MENU_GAP2 = 4;
-var VIEWPORT_MARGIN2 = 8;
-function useDropdownPosition(triggerRef, open) {
-  const [pos, setPos] = useState(null);
-  useLayoutEffect(() => {
-    if (!open) {
-      setPos(null);
-      return;
-    }
-    let lastLeft = NaN, lastTop = NaN, lastRight = NaN, lastBottom = NaN;
-    const compute = () => {
-      const rect = triggerRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      lastLeft = rect.left;
-      lastTop = rect.top;
-      lastRight = rect.right;
-      lastBottom = rect.bottom;
-      const spaceBelow = window.innerHeight - rect.bottom - MENU_GAP2 - VIEWPORT_MARGIN2;
-      const spaceAbove = rect.top - MENU_GAP2 - VIEWPORT_MARGIN2;
-      const placeAbove = spaceBelow < Math.min(MENU_MAX_HEIGHT2, 160) && spaceAbove > spaceBelow;
-      const maxHeight = Math.max(96, Math.min(MENU_MAX_HEIGHT2, placeAbove ? spaceAbove : spaceBelow));
-      const next = { minWidth: rect.width, maxHeight };
-      if (window.innerWidth - rect.left < POPUP_MAX_WIDTH) {
-        next.right = Math.max(VIEWPORT_MARGIN2, window.innerWidth - rect.right);
-      } else {
-        next.left = Math.max(VIEWPORT_MARGIN2, rect.left);
-      }
-      if (placeAbove) next.bottom = window.innerHeight - rect.top + MENU_GAP2;
-      else next.top = rect.bottom + MENU_GAP2;
-      setPos(next);
-    };
-    compute();
-    let raf = requestAnimationFrame(function tick() {
-      const rect = triggerRef.current?.getBoundingClientRect();
-      if (rect && (rect.left !== lastLeft || rect.top !== lastTop || rect.right !== lastRight || rect.bottom !== lastBottom)) {
-        compute();
-      }
-      raf = requestAnimationFrame(tick);
-    });
-    window.addEventListener("scroll", compute, true);
-    window.addEventListener("resize", compute);
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("scroll", compute, true);
-      window.removeEventListener("resize", compute);
-    };
-  }, [open, triggerRef]);
-  return pos;
-}
 function ClearButton({ onClear, ariaLabel = "Clear selection" }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -2162,7 +2527,7 @@ function SearchableSelect({
         "div",
         {
           ref: menuRef,
-          className: "fixed z-[400] rounded-2xl overflow-hidden",
+          className: "fixed z-[10000] rounded-2xl overflow-hidden",
           style: {
             left: menuPos?.left,
             right: menuPos?.right,
@@ -2199,6 +2564,171 @@ function SearchableSelect({
     )
   ] });
 }
+function TagInput({
+  value,
+  onChange,
+  options = [],
+  placeholder,
+  allowFreeText = false,
+  invalid,
+  disabled,
+  id,
+  className = ""
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const wrapRef = useRef(null);
+  const inputRef = useRef(null);
+  const menuRef = useRef(null);
+  const menuPos = useDropdownPosition(wrapRef, open);
+  const labelFor = (v) => options.find((o) => o.value === v)?.label ?? v;
+  const available = useMemo(() => {
+    const seen = new Set(value);
+    const out = [];
+    const q = search.trim().toLowerCase();
+    for (const o of options) {
+      if (seen.has(o.value)) continue;
+      seen.add(o.value);
+      if (!q || o.label.toLowerCase().includes(q)) out.push(o);
+    }
+    return out;
+  }, [options, value, search]);
+  const add = (v) => {
+    if (!v || value.includes(v)) {
+      setSearch("");
+      return;
+    }
+    onChange([...value, v]);
+    setSearch("");
+  };
+  const remove = (v) => onChange(value.filter((x) => x !== v));
+  const commitFreeText = () => {
+    const t = search.trim();
+    if (allowFreeText && t) add(t);
+    else setSearch("");
+  };
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const t = e.target;
+      if (wrapRef.current?.contains(t) || menuRef.current?.contains(t)) return;
+      commitFreeText();
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  });
+  const hasMenu = options.length > 0;
+  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onMouseDown: (e) => {
+          if (disabled) return;
+          if (e.target.closest("button")) return;
+          e.preventDefault();
+          inputRef.current?.focus();
+        },
+        className: inputClasses({
+          invalid,
+          className: `flex flex-wrap items-center gap-1 cursor-text focus-within:border-blue-400 focus-within:ring-2 focus-within:ring-blue-400/30 ${disabled ? "bg-gray-50 cursor-not-allowed" : ""} ${className}`
+        }),
+        children: [
+          value.map((v) => /* @__PURE__ */ jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded bg-blue-50 px-1.5 py-0.5 text-xs font-medium text-blue-700", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: labelFor(v) }),
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${labelFor(v)}`,
+                onClick: () => remove(v),
+                className: "text-blue-400 hover:text-red-500 focus:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 rounded leading-none",
+                children: "\xD7"
+              }
+            )
+          ] }, v)),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id,
+              ref: inputRef,
+              type: "text",
+              autoComplete: "off",
+              role: "combobox",
+              "aria-expanded": open && hasMenu,
+              "aria-invalid": invalid || void 0,
+              disabled,
+              value: search,
+              placeholder: value.length === 0 ? placeholder : void 0,
+              onChange: (e) => {
+                setSearch(e.target.value);
+                setOpen(true);
+              },
+              onFocus: () => {
+                if (!disabled && hasMenu) setOpen(true);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === "," && allowFreeText) {
+                  e.preventDefault();
+                  const q = search.trim();
+                  const matches = q ? available.filter((o) => o.label.toLowerCase().includes(q.toLowerCase())) : [];
+                  if (matches.length === 1) add(matches[0].value);
+                  else commitFreeText();
+                } else if (e.key === "Backspace" && search === "" && value.length > 0) {
+                  remove(value[value.length - 1]);
+                } else if (e.key === "Escape") {
+                  setOpen(false);
+                  setSearch("");
+                  inputRef.current?.blur();
+                } else if (e.key === "Tab") {
+                  commitFreeText();
+                  setOpen(false);
+                }
+              },
+              className: "min-w-[8ch] flex-1 border-none bg-transparent p-0 text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-0 disabled:cursor-not-allowed"
+            }
+          )
+        ]
+      }
+    ),
+    open && hasMenu && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          className: "fixed z-[10000] rounded-2xl overflow-hidden",
+          style: {
+            left: menuPos?.left,
+            right: menuPos?.right,
+            top: menuPos?.top,
+            bottom: menuPos?.bottom,
+            minWidth: menuPos?.minWidth,
+            maxWidth: POPUP_MAX_WIDTH,
+            width: "max-content",
+            // Hidden for the first paint until the layout effect measures the
+            // trigger, so the menu never flashes at (0,0).
+            visibility: menuPos ? void 0 : "hidden",
+            ...glassStyle()
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", style: { maxHeight: menuPos?.maxHeight ?? MENU_MAX_HEIGHT2 }, children: available.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-3 text-sm text-gray-400 text-center", children: options.length > 0 && value.length >= options.length ? "All options selected" : "No matches" }) : available.map((o) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                add(o.value);
+              },
+              className: "w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50 text-gray-700 whitespace-nowrap",
+              children: o.label
+            },
+            o.value
+          )) })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 var PADDING = {
   none: { body: "", edge: "px-4 py-3" },
   sm: { body: "p-3", edge: "px-3 py-2" },
@@ -2482,23 +3012,23 @@ function DescriptionList({
   const resolved = typeof columns === "number" ? { base: columns } : columns;
   const base = resolved.base ?? 1;
   const widest = Math.max(base, resolved.sm ?? 0, resolved.lg ?? 0);
-  const pad2 = size === "sm" ? "px-3 py-2" : "px-4 py-3";
+  const pad5 = size === "sm" ? "px-3 py-2" : "px-4 py-3";
   const text = size === "sm" ? "text-xs" : "text-sm";
   return /* @__PURE__ */ jsxs("div", { className: [bordered ? "rounded-lg border border-gray-200 bg-white" : "", className].filter(Boolean).join(" "), children: [
-    title && /* @__PURE__ */ jsx("div", { className: `${pad2} ${bordered ? "border-b border-gray-100" : ""} text-sm font-semibold text-gray-900`.trim(), children: title }),
+    title && /* @__PURE__ */ jsx("div", { className: `${pad5} ${bordered ? "border-b border-gray-100" : ""} text-sm font-semibold text-gray-900`.trim(), children: title }),
     /* @__PURE__ */ jsx("dl", { className: [
       "grid",
       COLS2[base],
       resolved.sm ? SM[resolved.sm] : "",
       resolved.lg ? LG[resolved.lg] : "",
       bordered ? "" : "gap-x-6 gap-y-3",
-      bordered ? "" : pad2 === "px-4 py-3" ? "py-1" : ""
+      bordered ? "" : pad5 === "px-4 py-3" ? "py-1" : ""
     ].filter(Boolean).join(" "), children: items.map((item, i) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: [
           item.span ? SPAN[widest] : "",
-          bordered ? `${pad2} border-b border-gray-100 last:border-b-0` : ""
+          bordered ? `${pad5} border-b border-gray-100 last:border-b-0` : ""
         ].filter(Boolean).join(" "),
         children: [
           /* @__PURE__ */ jsx("dt", { className: `${text} text-gray-500`, children: item.label }),
@@ -2867,6 +3397,69 @@ function Tabs({
     }
   );
 }
+var Check = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: "h-3.5 w-3.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.5 6.5L5 9l4.5-5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function Stepper({
+  items,
+  value,
+  onChange,
+  "aria-label": ariaLabel,
+  className = ""
+}) {
+  const currentIndex = Math.max(0, items.findIndex((s) => s.id === value));
+  return /* @__PURE__ */ jsx("ol", { "aria-label": ariaLabel, className: `flex items-start ${className}`.trim(), children: items.map((step, i) => {
+    const state = i < currentIndex ? "complete" : i === currentIndex ? "current" : "upcoming";
+    const clickable = state === "complete" && !!onChange;
+    const circle = /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: [
+          "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-colors",
+          state === "complete" ? "bg-blue-600 text-white" : "",
+          state === "current" ? "border-2 border-blue-600 bg-white text-blue-600" : "",
+          state === "upcoming" ? "border-2 border-gray-300 bg-white text-gray-400" : ""
+        ].filter(Boolean).join(" "),
+        children: state === "complete" ? /* @__PURE__ */ jsx(Check, {}) : i + 1
+      }
+    );
+    const text = /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("span", { className: `block text-sm font-medium ${state === "upcoming" ? "text-gray-400" : "text-gray-900"}`, children: step.label }),
+      step.description && /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-500", children: step.description })
+    ] });
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "aria-current": state === "current" ? "step" : void 0,
+        className: `flex items-start gap-2 ${i > 0 ? "flex-1" : ""}`,
+        children: [
+          i > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `mt-3.5 h-0.5 flex-1 rounded ${i <= currentIndex ? "bg-blue-600" : "bg-gray-200"}`
+            }
+          ),
+          clickable ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange?.(step.id),
+              className: "flex items-start gap-2 text-left rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+              children: [
+                circle,
+                text
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-2", children: [
+            circle,
+            text
+          ] })
+        ]
+      },
+      step.id
+    );
+  }) });
+}
 function Accordion({
   items,
   defaultOpenIds = [],
@@ -3287,8 +3880,8 @@ function formatDate(value) {
   const dd = String(d).padStart(2, "0");
   const mm = String(m).padStart(2, "0");
   const yyyy = String(y);
-  const fmt = getUserDateFormat();
-  switch (fmt) {
+  const fmt2 = getUserDateFormat();
+  switch (fmt2) {
     case "MM/DD/YYYY":
       return `${mm}/${dd}/${yyyy}`;
     case "YYYY-MM-DD":
@@ -4189,12 +4782,28 @@ function DropdownMenu({
     )
   ] });
 }
-var SIZE_PX2 = { sm: 320, md: 448, lg: 640 };
+var SIZE_CLASS = {
+  sm: "sm:w-[320px]",
+  md: "sm:w-[448px]",
+  lg: "sm:w-[640px]"
+};
 var SIDE_POSITION = {
   right: "inset-y-0 right-0",
   left: "inset-y-0 left-0",
   bottom: "inset-x-0 bottom-0"
 };
+function CloseButton({ onClose }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onClose,
+      "aria-label": "Close",
+      className: "rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+      children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l8 8M14 6l-8 8" }) })
+    }
+  );
+}
 function Drawer({
   open,
   onClose,
@@ -4205,10 +4814,12 @@ function Drawer({
   children,
   blocking = false,
   initialFocus,
+  "aria-label": ariaLabel,
   className = ""
 }) {
   const panelRef = useRef(null);
   const bodyId = useId();
+  const titleId = useId();
   useFocusTrap(panelRef, open, initialFocus);
   useScrollLock(open);
   useEffect(() => {
@@ -4221,7 +4832,7 @@ function Drawer({
   }, [open, blocking, onClose]);
   if (!open) return null;
   const isBottom = side === "bottom";
-  const panelStyle = isBottom ? { maxHeight: "85vh" } : { width: SIZE_PX2[size], maxWidth: "100vw" };
+  const panelStyle = isBottom ? { maxHeight: "85vh" } : void 0;
   return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[9999]", role: "presentation", children: [
     /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/30", onClick: blocking ? void 0 : onClose, "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs(
@@ -4230,29 +4841,27 @@ function Drawer({
         ref: panelRef,
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": typeof title === "string" ? title : void 0,
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel,
         "aria-describedby": children ? bodyId : void 0,
         style: panelStyle,
         className: [
           "fixed flex flex-col bg-white shadow-xl",
+          // Full width on a phone, the asked-for width from `sm` up. A 320px
+          // drawer on a 375px screen leaves a 55px strip of scrim: too narrow
+          // to aim at, too wide to read as an edge, and it makes the panel look
+          // like a desktop rail that was squeezed rather than a sheet built for
+          // the screen it is on.
+          isBottom ? "" : `w-full max-w-full ${SIZE_CLASS[size]}`,
           SIDE_POSITION[side],
           isBottom ? "rounded-t-xl" : "",
           className
         ].filter(Boolean).join(" "),
         children: [
-          (title || !blocking) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-4 border-b border-gray-100 px-4 py-3", children: [
-            title ? /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-900", children: title }) : /* @__PURE__ */ jsx("span", {}),
-            !blocking && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: onClose,
-                "aria-label": "Close",
-                className: "rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600",
-                children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l8 8M14 6l-8 8" }) })
-              }
-            )
-          ] }),
+          title ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-4 border-b border-gray-100 px-4 py-3", children: [
+            /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-base font-semibold text-gray-900", children: title }),
+            !blocking && /* @__PURE__ */ jsx(CloseButton, { onClose })
+          ] }) : !blocking && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 z-10", children: /* @__PURE__ */ jsx(CloseButton, { onClose }) }),
           /* @__PURE__ */ jsx("div", { id: bodyId, className: "min-h-0 flex-1 overflow-y-auto px-4 py-4", children }),
           footer && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 justify-end gap-3 border-t border-gray-100 px-4 py-3", children: footer })
         ]
@@ -4664,9 +5273,28 @@ function DataTable({
   onRow,
   emptyText = "Nothing to show",
   footer,
+  virtualized,
   className = ""
 }) {
   const keyOf = (row, i) => typeof rowKey === "function" ? rowKey(row, i) : String(row[rowKey]);
+  const [startRow, setStartRow] = useState(0);
+  const overscan = virtualized?.overscan ?? 6;
+  const onBodyScroll = virtualized ? (e) => {
+    const next = Math.max(0, Math.floor(e.currentTarget.scrollTop / virtualized.rowHeight) - overscan);
+    setStartRow((prev) => prev === next ? prev : next);
+  } : void 0;
+  const windowSize = virtualized ? Math.ceil(virtualized.height / virtualized.rowHeight) + overscan * 2 : data.length;
+  const start = virtualized ? Math.min(startRow, Math.max(0, data.length - windowSize)) : 0;
+  const end = Math.min(data.length, start + windowSize);
+  const topPad = virtualized ? start * virtualized.rowHeight : 0;
+  const bottomPad = virtualized ? (data.length - end) * virtualized.rowHeight : 0;
+  const headRowRef = useRef(null);
+  const [headRowH, setHeadRowH] = useState(0);
+  useLayoutEffect(() => {
+    if (!virtualized) return;
+    const h = headRowRef.current?.offsetHeight ?? 0;
+    setHeadRowH((prev) => prev === h ? prev : h);
+  });
   const fieldOf = (col) => col.sortField ?? col.key;
   const directionFor = (col) => sort && sort.field === fieldOf(col) ? sort.direction : null;
   const toggleSort = (col) => {
@@ -4682,7 +5310,7 @@ function DataTable({
   const leaves = columns.flatMap((h) => isGroup(h) ? h.columns : [h]);
   const grouped = columns.some(isGroup);
   const cellBase = `${PAD[size]} ${size === "sm" ? "text-xs" : "text-sm"}`;
-  const headerCell = (col, ci, rowSpan) => {
+  const headerCell = (col, ci, rowSpan, topOffset = 0) => {
     const dir = directionFor(col);
     const align = ALIGN2[col.align ?? (col.numeric ? "right" : "left")];
     const pinned = col.fixed === "left";
@@ -4692,13 +5320,20 @@ function DataTable({
         scope: "col",
         rowSpan: rowSpan > 1 ? rowSpan : void 0,
         "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : col.sortable && onSortChange ? "none" : void 0,
-        style: { width: col.width, ...pinned ? { left: offsets[ci] ?? 0 } : {} },
+        style: {
+          width: col.width,
+          ...pinned ? { left: offsets[ci] ?? 0 } : {},
+          // A virtualized header pins to the top of the vertical scroll; one
+          // sticky box can hold both axes, so a pinned column's header corner
+          // stays put in both directions.
+          ...virtualized ? { top: topOffset } : {}
+        },
         className: [
           cellBase,
           align,
           "font-semibold uppercase tracking-wide text-gray-500",
           size === "sm" ? "text-[10px]" : "text-xs",
-          pinned ? "sticky z-10 bg-gray-50" : "",
+          pinned ? virtualized ? "sticky z-20 bg-gray-50" : "sticky z-10 bg-gray-50" : virtualized ? "sticky z-10 bg-gray-50" : "",
           col.headerClassName ?? ""
         ].filter(Boolean).join(" "),
         children: col.sortable && onSortChange ? /* @__PURE__ */ jsxs(
@@ -4725,92 +5360,108 @@ function DataTable({
     return at;
   });
   return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxs("div", { className: `relative overflow-x-auto ${bordered ? "rounded-lg border border-gray-200" : ""}`.trim(), children: [
-      loading && // An overlay rather than replacing the rows: the table keeps its
-      // height and its scroll position, so re-sorting does not throw the
-      // page around under the user.
-      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-20 flex items-start justify-center bg-white/60 pt-8", role: "status", "aria-live": "polite", children: [
-        /* @__PURE__ */ jsx("span", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-blue-600" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
-      ] }),
-      /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse tabular-nums", style: minWidth ? { minWidth } : void 0, children: [
-        caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
-        /* @__PURE__ */ jsxs("thead", { children: [
-          /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-200 bg-gray-50", children: columns.map((h, hi) => {
-            if (isGroup(h)) {
-              return /* @__PURE__ */ jsx(
-                "th",
-                {
-                  scope: "colgroup",
-                  colSpan: h.columns.length,
-                  className: [
-                    cellBase,
-                    "text-center",
-                    "font-semibold uppercase tracking-wide text-gray-500",
-                    size === "sm" ? "text-[10px]" : "text-xs",
-                    "border-b border-gray-200",
-                    h.headerClassName ?? ""
-                  ].filter(Boolean).join(" "),
-                  children: h.title
-                },
-                h.key ?? `group-${hi}`
-              );
-            }
-            return headerCell(h, leaves.indexOf(h), grouped ? 2 : 1);
-          }) }),
-          grouped && /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-200 bg-gray-50", children: columns.flatMap((h) => isGroup(h) ? h.columns : []).map(
-            (col) => headerCell(col, leaves.indexOf(col), 1)
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx("tbody", { children: data.length === 0 && !loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: leaves.length, className: `${cellBase} py-10 text-center text-gray-500`, children: emptyText }) }) : data.map((row, i) => {
-          const rowProps = onRow?.(row, i);
-          return /* @__PURE__ */ jsx(
-            "tr",
-            {
-              onClick: rowProps?.onClick,
-              ...rowProps?.onClick ? {
-                tabIndex: 0,
-                onKeyDown: (e) => {
-                  if (e.target !== e.currentTarget) return;
-                  if (e.key !== "Enter" && e.key !== " ") return;
-                  e.preventDefault();
-                  rowProps.onClick?.();
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onScroll: onBodyScroll,
+        style: virtualized ? { maxHeight: virtualized.height } : void 0,
+        className: `relative overflow-x-auto ${virtualized ? "overflow-y-auto" : ""} ${bordered ? "rounded-lg border border-gray-200" : ""}`.trim(),
+        children: [
+          loading && // An overlay rather than replacing the rows: the table keeps its
+          // height and its scroll position, so re-sorting does not throw the
+          // page around under the user.
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-20 flex items-start justify-center bg-white/60 pt-8", role: "status", "aria-live": "polite", children: [
+            /* @__PURE__ */ jsx("span", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-blue-600" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+          ] }),
+          /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse tabular-nums", style: minWidth ? { minWidth } : void 0, children: [
+            caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+            /* @__PURE__ */ jsxs("thead", { children: [
+              /* @__PURE__ */ jsx("tr", { ref: headRowRef, className: "border-b border-gray-200 bg-gray-50", children: columns.map((h, hi) => {
+                if (isGroup(h)) {
+                  return /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      scope: "colgroup",
+                      colSpan: h.columns.length,
+                      style: virtualized ? { top: 0 } : void 0,
+                      className: [
+                        cellBase,
+                        "text-center",
+                        "font-semibold uppercase tracking-wide text-gray-500",
+                        size === "sm" ? "text-[10px]" : "text-xs",
+                        "border-b border-gray-200",
+                        virtualized ? "sticky z-10 bg-gray-50" : "",
+                        h.headerClassName ?? ""
+                      ].filter(Boolean).join(" "),
+                      children: h.title
+                    },
+                    h.key ?? `group-${hi}`
+                  );
                 }
-              } : {},
-              className: [
-                "border-b border-gray-100 last:border-b-0",
-                rowProps?.onClick ? "cursor-pointer hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400" : "",
-                rowClassName?.(row, i) ?? "",
-                rowProps?.className ?? ""
-              ].filter(Boolean).join(" "),
-              children: leaves.map((col, ci) => {
-                const pinned = col.fixed === "left";
+                return headerCell(h, leaves.indexOf(h), grouped ? 2 : 1);
+              }) }),
+              grouped && /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-200 bg-gray-50", children: columns.flatMap((h) => isGroup(h) ? h.columns : []).map(
+                (col) => headerCell(col, leaves.indexOf(col), 1, headRowH)
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx("tbody", { children: data.length === 0 && !loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: leaves.length, className: `${cellBase} py-10 text-center text-gray-500`, children: emptyText }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              topPad > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: leaves.length, style: { height: topPad, padding: 0, border: 0 } }) }),
+              data.slice(start, end).map((row, si) => {
+                const i = start + si;
+                const rowProps = onRow?.(row, i);
                 return /* @__PURE__ */ jsx(
-                  "td",
+                  "tr",
                   {
-                    style: pinned ? { left: offsets[ci] ?? 0 } : void 0,
+                    style: virtualized ? { height: virtualized.rowHeight } : void 0,
+                    onClick: rowProps?.onClick,
+                    ...rowProps?.onClick ? {
+                      tabIndex: 0,
+                      onKeyDown: (e) => {
+                        if (e.target !== e.currentTarget) return;
+                        if (e.key !== "Enter" && e.key !== " ") return;
+                        e.preventDefault();
+                        rowProps.onClick?.();
+                      }
+                    } : {},
                     className: [
-                      cellBase,
-                      ALIGN2[col.align ?? (col.numeric ? "right" : "left")],
-                      col.numeric ? "font-mono" : "",
-                      "text-gray-900",
-                      col.ellipsis ? "max-w-0 truncate" : "",
-                      // A pinned cell needs its own background or the
-                      // scrolling columns show through it.
-                      pinned ? "sticky z-10 bg-white" : ""
+                      "border-b border-gray-100 last:border-b-0",
+                      rowProps?.onClick ? "cursor-pointer hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400" : "",
+                      rowClassName?.(row, i) ?? "",
+                      rowProps?.className ?? ""
                     ].filter(Boolean).join(" "),
-                    children: col.render ? col.render(row, i) : col.dataIndex ? row[col.dataIndex] : null
+                    children: leaves.map((col, ci) => {
+                      const pinned = col.fixed === "left";
+                      return /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          style: pinned ? { left: offsets[ci] ?? 0 } : void 0,
+                          className: [
+                            cellBase,
+                            ALIGN2[col.align ?? (col.numeric ? "right" : "left")],
+                            col.numeric ? "font-mono" : "",
+                            "text-gray-900",
+                            col.ellipsis ? "max-w-0 truncate" : "",
+                            // A pinned cell needs its own background or the
+                            // scrolling columns show through it.
+                            pinned ? "sticky z-10 bg-white" : ""
+                          ].filter(Boolean).join(" "),
+                          children: col.render ? col.render(row, i) : col.dataIndex ? row[col.dataIndex] : null
+                        },
+                        col.key
+                      );
+                    })
                   },
-                  col.key
+                  keyOf(row, i)
                 );
-              })
-            },
-            keyOf(row, i)
-          );
-        }) })
-      ] }),
-      footer
-    ] }),
+              }),
+              bottomPad > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: leaves.length, style: { height: bottomPad, padding: 0, border: 0 } }) })
+            ] }) })
+          ] }),
+          footer
+        ]
+      }
+    ),
     pagination && pagination.pageCount > 1 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-end", children: /* @__PURE__ */ jsx(
       Pagination,
       {
@@ -4867,8 +5518,8 @@ function Sparkline({
   const max = Math.max(...data);
   const min = Math.min(...data);
   const span = max - min || 1;
-  const pad2 = strokeWidth + (showDots ? 2 : 0);
-  const y = (v) => height - pad2 - (v - min) / span * (height - pad2 * 2);
+  const pad5 = strokeWidth + (showDots ? 2 : 0);
+  const y = (v) => height - pad5 - (v - min) / span * (height - pad5 * 2);
   const pts = data.length === 1 ? [[0, height / 2], [width, height / 2]] : data.map((v, i) => [i * width / (data.length - 1), y(v)]);
   const line = pts.map(([x, yy], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${yy.toFixed(2)}`).join(" ");
   const area = `${line} L${width.toFixed(2)},${height} L0,${height} Z`;
@@ -4960,6 +5611,73 @@ function DonutChart({ segments, size = 120, thickness = 16, centerLabel, classNa
     }
   );
 }
+function toPoints(data, min, span) {
+  if (data.length === 1) return [[0, 100 - (data[0] - min) / span * 100], [100, 100 - (data[0] - min) / span * 100]];
+  return data.map((v, i) => [i * 100 / (data.length - 1), 100 - (v - min) / span * 100]);
+}
+function pathFor(pts) {
+  return pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+}
+var fmt = (v) => Number.isInteger(v) ? String(v) : v.toFixed(1);
+function LineChart({
+  series,
+  labels,
+  height = 160,
+  strokeWidth = 2,
+  showDots = false,
+  max,
+  min,
+  showScale = false,
+  showLegend = false,
+  className,
+  style
+}) {
+  const drawn = series.filter((s) => s.data.length > 0);
+  if (drawn.length === 0) return null;
+  const all = drawn.flatMap((s) => s.data);
+  const top = max ?? Math.max(...all);
+  const bottom = min ?? Math.min(...all);
+  const span = top - bottom || 1;
+  const color = (s) => s.color ?? "currentColor";
+  return /* @__PURE__ */ jsxs("div", { className, style, children: [
+    showLegend && drawn.some((s) => s.label) && /* @__PURE__ */ jsx("div", { className: "mb-1.5 flex flex-wrap items-center gap-x-3 gap-y-0.5", children: drawn.map((s, i) => s.label && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-gray-500", children: [
+      /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full", style: { backgroundColor: color(s) } }),
+      s.label
+    ] }, i)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+      showScale && /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between pr-1.5 text-right text-[10px] leading-none text-gray-400", style: { height }, children: [
+        /* @__PURE__ */ jsx("span", { children: fmt(top) }),
+        /* @__PURE__ */ jsx("span", { children: fmt(bottom + span / 2) }),
+        /* @__PURE__ */ jsx("span", { children: fmt(bottom) })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "min-w-0 flex-1",
+          width: "100%",
+          height,
+          viewBox: "0 0 100 100",
+          preserveAspectRatio: "none",
+          role: "img",
+          "aria-hidden": "true",
+          children: [
+            showScale && [0, 50, 100].map((y) => /* @__PURE__ */ jsx("line", { x1: 0, y1: y, x2: 100, y2: y, stroke: "currentColor", strokeOpacity: 0.12, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, y)),
+            drawn.map((s, si) => {
+              const pts = toPoints(s.data, bottom, span);
+              const line = pathFor(pts);
+              return /* @__PURE__ */ jsxs("g", { children: [
+                s.fill && /* @__PURE__ */ jsx("path", { d: `${line} L100,100 L0,100 Z`, fill: s.fill, stroke: "none" }),
+                /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: color(s), strokeWidth, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }),
+                showDots && s.data.length > 1 && pts.map(([x, y], i) => /* @__PURE__ */ jsx("path", { d: `M${x.toFixed(2)},${y.toFixed(2)} h0.01`, stroke: color(s), strokeWidth: strokeWidth * 2.5, strokeLinecap: "round", vectorEffect: "non-scaling-stroke", children: /* @__PURE__ */ jsx("title", { children: `${labels?.[i] != null ? `${labels[i]}: ` : ""}${s.label ? `${s.label} ` : ""}${s.data[i]}` }) }, i))
+              ] }, si);
+            })
+          ]
+        }
+      )
+    ] }),
+    labels && /* @__PURE__ */ jsx("div", { className: `mt-1 flex justify-between ${showScale ? "pl-6" : ""}`, children: labels.map((l, i) => /* @__PURE__ */ jsx("div", { className: "truncate text-[10px] text-gray-400", children: l }, i)) })
+  ] });
+}
 var STATUS_GROUPS = {
   paid: "success",
   shipped: "active",
@@ -5703,6 +6421,6 @@ var ALT_SHIFT_D = isMac ? "\u2325\u21E7D" : "Alt+Shift+D";
 var ALT_SHIFT_E = isMac ? "\u2325\u21E7E" : "Alt+Shift+E";
 var ALT_SHIFT_N = isMac ? "\u2325\u21E7N" : "Alt+Shift+N";
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, Button_default, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CMD_SHIFT_Z, CMD_Z, Card, ChatTemplate, Checkbox_default, CheckoutTemplate, ColoredBadge, ContainerFillChart, CountBadge, DashboardTemplate, DataTable, DataTablePage, DatePicker_default, DateRangePicker, DescriptionList, Divider, DonutChart, Drawer, DropdownMenu, ENTER, EmailTemplate, EmptyState, ErrorBoundary, ErrorPage, FilePicker, FormField, FormLayoutPage, GROUP_COLORS, GalleryTemplate, GlobalSearch, Grid, HelpCenter, INPUT_BASE, INPUT_SIZES, IconButton_default, Inline, InputNumber_default, Input_default, Kanban, Label, ListFooter, ListLoadError, LoadingSpinner, MAX_FRACTION_DIGITS, MOD, Markdown, MediaUploadField, MediaUploadGrid, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, PageHeader, Pagination, Paragraph, Radio_default, Result, SHIFT, SearchableSelect, Segmented, Select_default, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Sparkline, Stack, StatCard, Statistic, StatusBadge, StatusBadgeProvider, Switch_default, Tabs, Text, Textarea_default, TileButton_default, Title, Tooltip, TopNav, appendKey, applyThemePrefs, backspace, firstEnabledIndex, formatDate, inputClasses, isMac, isSeverityTone, lastEnabledIndex, matchTypeahead, mediaFileName, nextEnabledIndex, resolveTheme, severityOf, tabButtonId, tabPanelId, toISODate, useClickOutside, useTheme };
-//# sourceMappingURL=chunk-CTTHBTOX.js.map
-//# sourceMappingURL=chunk-CTTHBTOX.js.map
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, Accordion, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, Button_default, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CMD_SHIFT_Z, CMD_Z, Calendar, Card, ChatTemplate, Checkbox_default, CheckoutTemplate, ColoredBadge, ContainerFillChart, CountBadge, DashboardTemplate, DataTable, DataTablePage, DatePicker_default, DateRangePicker, DateTimePicker_default, DescriptionList, Divider, DonutChart, Drawer, DropdownMenu, ENTER, EmailTemplate, EmptyState, ErrorBoundary, ErrorPage, FilePicker, FormField, FormLayoutPage, GROUP_COLORS, GalleryTemplate, GlobalSearch, Grid, HelpCenter, INPUT_BASE, INPUT_SIZES, IconButton_default, Inline, InputNumber_default, Input_default, Kanban, Label, LineChart, ListFooter, ListLoadError, LoadingSpinner, MAX_FRACTION_DIGITS, MOD, Markdown, MediaUploadField, MediaUploadGrid, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, PageHeader, Pagination, Paragraph, Radio_default, Result, SHIFT, SearchableSelect, Segmented, Select_default, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Sparkline, Stack, StatCard, Statistic, StatusBadge, StatusBadgeProvider, Stepper, Switch_default, Tabs, TagInput, Text, Textarea_default, TileButton_default, TimePicker_default, Title, Tooltip, TopNav, appendKey, applyThemePrefs, backspace, firstEnabledIndex, formatDate, fromKey, inputClasses, isMac, isSeverityTone, lastEnabledIndex, matchTypeahead, mediaFileName, nextEnabledIndex, resolveTheme, severityOf, tabButtonId, tabPanelId, toISODate, toKey, useClickOutside, useTheme };
+//# sourceMappingURL=chunk-B3IYV7JN.js.map
+//# sourceMappingURL=chunk-B3IYV7JN.js.map