react-os-shell 4.63.0 → 4.74.0

package/dist/{chunk-CWA27IGB.js → chunk-S6K37RLY.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 { useIsMobile, useShellStrings, PopupMenu, PopupMenuItem, useShellPrefs } from './chunk-BLLINYDD.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 pad4 = `${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: [pad4, 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()
@@ -638,6 +639,47 @@ function FormField({
     ) : hint ? /* @__PURE__ */ jsx("p", { id: htmlFor ? `${htmlFor}-hint` : void 0, className: "mt-1 text-[11px] text-gray-400", children: hint }) : null
   ] });
 }
+function FormErrorSummary({ errors, title, autoFocus = true, className = "" }) {
+  const strings = useShellStrings();
+  const boxRef = useRef(null);
+  const hadErrors = useRef(false);
+  useEffect(() => {
+    const has = errors.length > 0;
+    if (has && !hadErrors.current && autoFocus) boxRef.current?.focus();
+    hadErrors.current = has;
+  }, [errors.length > 0, autoFocus]);
+  if (errors.length === 0) return null;
+  const focusField = (fieldId) => {
+    const el = document.getElementById(fieldId);
+    if (!el) return;
+    el.scrollIntoView({ block: "center" });
+    el.focus();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: boxRef,
+      role: "alert",
+      tabIndex: -1,
+      className: `rounded-md border border-red-300 bg-red-50 px-4 py-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 ${className}`.trim(),
+      children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-red-800", children: title ?? strings.form.errorSummaryTitle }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-1.5 space-y-1", children: errors.map((e, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `#${e.fieldId}`,
+            onClick: (event) => {
+              event.preventDefault();
+              focusField(e.fieldId);
+            },
+            className: "text-sm text-red-700 underline hover:text-red-900",
+            children: e.message
+          }
+        ) }, `${e.fieldId}-${i}`)) })
+      ]
+    }
+  );
+}
 function Label({ required, children, className = "", ...rest }) {
   return /* @__PURE__ */ jsxs("label", { className: `mb-1 block text-xs font-medium text-gray-600 ${className}`.trim(), ...rest, children: [
     children,
@@ -1098,6 +1140,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 +1417,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 +1432,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 +1458,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 +1483,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 +1516,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 +1540,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 +1595,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,45 +1648,14 @@ function DateRangePicker({
     )
   ] });
 }
-var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
-function toInputValue(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;
-}
-var DatePicker = forwardRef(function DatePicker2({ value, onChange, min, max, invalid, size, className = "", ...rest }, ref) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ref,
-      type: "date",
-      "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)),
-      className: inputClasses({ invalid, size, className }),
-      ...rest
-    }
-  );
-});
-var DatePicker_default = DatePicker;
 var TIME = /^\d{2}:\d{2}(:\d{2})?$/;
-var pad2 = (n) => String(n).padStart(2, "0");
-function toInputValue2(value, withSeconds) {
+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 = `${pad2(value.getHours())}:${pad2(value.getMinutes())}`;
-    return withSeconds ? `${base}:${pad2(value.getSeconds())}` : base;
+    const base = `${pad3(value.getHours())}:${pad3(value.getMinutes())}`;
+    return withSeconds ? `${base}:${pad3(value.getSeconds())}` : base;
   }
   return TIME.test(value) ? value : "";
 }
@@ -1520,9 +1668,9 @@ var TimePicker = forwardRef(function TimePicker2({ value, onChange, min, max, in
       type: "time",
       step,
       "aria-invalid": invalid || void 0,
-      value: toInputValue2(value, withSeconds),
-      min: toInputValue2(min, withSeconds) || void 0,
-      max: toInputValue2(max, withSeconds) || 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
@@ -1530,10 +1678,252 @@ var TimePicker = forwardRef(function TimePicker2({ value, onChange, min, max, in
   );
 });
 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 pad3 = (n) => String(n).padStart(2, "0");
+var pad4 = (n) => String(n).padStart(2, "0");
 function serialise(date) {
-  return `${date.getFullYear()}-${pad3(date.getMonth() + 1)}-${pad3(date.getDate())}T${pad3(date.getHours())}:${pad3(date.getMinutes())}`;
+  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 "";
@@ -1677,8 +2067,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}`;
@@ -2029,58 +2419,7 @@ 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" }) {
+function ClearButton({ onClear, ariaLabel }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -2101,7 +2440,7 @@ function SearchableSelect({
   onChange,
   options,
   placeholder,
-  emptyOptionLabel = "\u2014 None \u2014",
+  emptyOptionLabel,
   className = "",
   disabled,
   id,
@@ -2111,6 +2450,8 @@ function SearchableSelect({
 }) {
   const [open, setOpen] = useState(false);
   const [search, setSearchState] = useState("");
+  const strings = useShellStrings();
+  const noneLabel = emptyOptionLabel ?? strings.select.none;
   const setSearch = (next) => {
     setSearchState(next);
     onSearchChange?.(next);
@@ -2212,13 +2553,13 @@ function SearchableSelect({
             setSearch("");
           }
         },
-        placeholder: placeholder || (emptyOptionLabel || "Select\u2026"),
+        placeholder: placeholder || noneLabel,
         className: `${INPUT_BASE} ${className} ${value ? "pr-8" : ""} ${disabled ? "bg-gray-50 text-gray-400 cursor-not-allowed" : ""} truncate`,
         style: adornPad ? { paddingRight: adornPad } : void 0,
         disabled
       }
     ),
-    value && !disabled && /* @__PURE__ */ jsx(ClearButton, { onClear: () => {
+    value && !disabled && /* @__PURE__ */ jsx(ClearButton, { ariaLabel: strings.select.clear, onClear: () => {
       onChange("");
       setOpen(false);
       setSearch("");
@@ -2229,7 +2570,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,
@@ -2243,7 +2584,7 @@ function SearchableSelect({
             visibility: menuPos ? void 0 : "hidden",
             ...glassStyle()
           },
-          children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", style: { maxHeight: menuPos?.maxHeight ?? MENU_MAX_HEIGHT2 }, children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-3 text-sm text-gray-400 text-center", children: "No matches" }) : filtered.map((o) => /* @__PURE__ */ jsxs(
+          children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", style: { maxHeight: menuPos?.maxHeight ?? MENU_MAX_HEIGHT2 }, children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-3 text-sm text-gray-400 text-center", children: strings.select.noMatches }) : filtered.map((o) => /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
@@ -2279,6 +2620,7 @@ function TagInput({
 }) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
+  const strings = useShellStrings();
   const wrapRef = useRef(null);
   const inputRef = useRef(null);
   const menuRef = useRef(null);
@@ -2342,7 +2684,7 @@ function TagInput({
               "button",
               {
                 type: "button",
-                "aria-label": `Remove ${labelFor(v)}`,
+                "aria-label": `${strings.select.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"
@@ -2398,7 +2740,7 @@ function TagInput({
         "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,
@@ -2412,7 +2754,7 @@ function TagInput({
             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(
+          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 ? strings.select.allSelected : strings.select.noMatches }) : available.map((o) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -2714,23 +3056,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 pad4 = 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: `${pad4} ${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 ? "" : pad4 === "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 ? `${pad4} 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 }),
@@ -4143,8 +4485,9 @@ function HelpCenter({
   onNew,
   onEdit,
   renderBody,
-  emptyMessage = "No help articles yet."
+  emptyMessage
 }) {
+  const strings = useShellStrings();
   const [query, setQuery] = useState("");
   const [selectedSlug, setSelectedSlug] = useState(null);
   const [expanded, setExpanded] = useState({});
@@ -4177,8 +4520,8 @@ function HelpCenter({
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full gap-4 px-4 py-3 min-h-0", children: [
     /* @__PURE__ */ jsxs("aside", { className: "w-64 shrink-0 flex flex-col bg-white rounded-lg shadow overflow-hidden", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-gray-200 bg-gray-50 shrink-0", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-gray-900", children: "Help" }),
-        canEdit && onNew && /* @__PURE__ */ jsx("button", { type: "button", onClick: onNew, className: "text-xs text-blue-600 hover:underline", children: "+ New" })
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-gray-900", children: strings.help.title }),
+        canEdit && onNew && /* @__PURE__ */ jsx("button", { type: "button", onClick: onNew, className: "text-xs text-blue-600 hover:underline", children: strings.help.newArticle })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "px-2.5 py-2 border-b border-gray-100 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsx(
@@ -4204,12 +4547,12 @@ function HelpCenter({
             type: "text",
             value: query,
             onChange: (e) => setQuery(e.target.value),
-            placeholder: "Search help\u2026",
+            placeholder: strings.help.searchPlaceholder,
             className: "w-full rounded-md border border-gray-300 bg-white py-1.5 pl-8 pr-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-1", children: loading ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-gray-400", children: "Loading\u2026" }) : visibleGroups.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-gray-500", children: q ? "No articles match your search." : emptyMessage }) : visibleGroups.map((group) => {
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-1", children: loading ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-gray-400", children: strings.help.loading }) : visibleGroups.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-gray-500", children: q ? strings.help.noResults : emptyMessage ?? strings.help.empty }) : visibleGroups.map((group) => {
         const open = isGroupOpen(group.key);
         return /* @__PURE__ */ jsxs("div", { className: "py-0.5", children: [
           /* @__PURE__ */ jsxs(
@@ -4234,7 +4577,7 @@ function HelpCenter({
                 className: `w-full text-left pl-8 pr-3 py-1.5 text-sm flex items-center gap-1.5 transition-colors ${active ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
                 children: [
                   /* @__PURE__ */ jsx("span", { className: "truncate", children: doc.title }),
-                  doc.is_published === false && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[10px] text-amber-600", children: "Draft" })
+                  doc.is_published === false && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[10px] text-amber-600", children: strings.help.draft })
                 ]
               },
               doc.slug
@@ -4249,7 +4592,10 @@ function HelpCenter({
           /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-gray-900 truncate", children: selected.title }),
           /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 mt-0.5", children: [
             selected.category_label,
-            selected.is_published === false && /* @__PURE__ */ jsx("span", { className: "ml-2 text-amber-600", children: "\xB7 Draft" })
+            selected.is_published === false && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-amber-600", children: [
+              "\xB7 ",
+              strings.help.draft
+            ] })
           ] })
         ] }),
         canEdit && onEdit && /* @__PURE__ */ jsx(
@@ -4258,12 +4604,12 @@ function HelpCenter({
             type: "button",
             onClick: () => onEdit(selected),
             className: "shrink-0 text-sm text-blue-600 hover:underline",
-            children: "Edit"
+            children: strings.help.edit
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto px-5 py-4", children: renderBody ? renderBody(selected) : selected.body ? /* @__PURE__ */ jsx(Markdown, { children: selected.body }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 italic", children: "This article has no body yet." }) })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: loading ? "Loading\u2026" : "Pick a help article from the left." }) }) })
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto px-5 py-4", children: renderBody ? renderBody(selected) : selected.body ? /* @__PURE__ */ jsx(Markdown, { children: selected.body }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 italic", children: strings.help.noBody }) })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: loading ? strings.help.loading : strings.help.pickArticle }) }) })
   ] });
 }
 var VARIANTS = {
@@ -4484,12 +4830,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,
@@ -4500,10 +4862,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(() => {
@@ -4516,7 +4880,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(
@@ -4525,29 +4889,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 })
         ]
@@ -4957,11 +5319,14 @@ function DataTable({
   minWidth,
   rowClassName,
   onRow,
-  emptyText = "Nothing to show",
+  emptyText,
+  selection,
   footer,
   virtualized,
   className = ""
 }) {
+  const strings = useShellStrings();
+  const emptyContent = emptyText ?? strings.table.empty;
   const keyOf = (row, i) => typeof rowKey === "function" ? rowKey(row, i) : String(row[rowKey]);
   const [startRow, setStartRow] = useState(0);
   const overscan = virtualized?.overscan ?? 6;
@@ -4995,6 +5360,27 @@ function DataTable({
   };
   const leaves = columns.flatMap((h) => isGroup(h) ? h.columns : [h]);
   const grouped = columns.some(isGroup);
+  const selectedSet = new Set(selection?.selected ?? []);
+  const pageKeys = selection ? data.map((row, i) => keyOf(row, i)) : [];
+  const allSelected = pageKeys.length > 0 && pageKeys.every((k) => selectedSet.has(k));
+  const someSelected = pageKeys.some((k) => selectedSet.has(k));
+  const toggleRow = (key) => {
+    if (!selection) return;
+    selection.onChange(
+      selectedSet.has(key) ? selection.selected.filter((k) => k !== key) : [...selection.selected, key]
+    );
+  };
+  const toggleAll = () => {
+    if (!selection) return;
+    const page = new Set(pageKeys);
+    selection.onChange(
+      allSelected ? selection.selected.filter((k) => !page.has(k)) : [...selection.selected, ...pageKeys.filter((k) => !selectedSet.has(k))]
+    );
+  };
+  const SELECT_W = 36;
+  const selOffset = selection ? SELECT_W : 0;
+  const colCount = leaves.length + (selection ? 1 : 0);
+  const hasPinned = leaves.some((c) => c.fixed === "left");
   const cellBase = `${PAD[size]} ${size === "sm" ? "text-xs" : "text-sm"}`;
   const headerCell = (col, ci, rowSpan, topOffset = 0) => {
     const dir = directionFor(col);
@@ -5008,7 +5394,7 @@ function DataTable({
         "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : col.sortable && onSortChange ? "none" : void 0,
         style: {
           width: col.width,
-          ...pinned ? { left: offsets[ci] ?? 0 } : {},
+          ...pinned ? { left: (offsets[ci] ?? 0) + selOffset } : {},
           // 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.
@@ -5058,45 +5444,73 @@ function DataTable({
           // 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__ */ jsx("span", { className: "sr-only", children: strings.table.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}`
-                  );
-                }
-                return headerCell(h, leaves.indexOf(h), grouped ? 2 : 1);
-              }) }),
+              /* @__PURE__ */ jsxs("tr", { ref: headRowRef, className: "border-b border-gray-200 bg-gray-50", children: [
+                selection && /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    scope: "col",
+                    rowSpan: grouped ? 2 : void 0,
+                    style: { width: SELECT_W, ...virtualized ? { top: 0 } : {} },
+                    className: [
+                      cellBase,
+                      hasPinned || virtualized ? "sticky z-20 bg-gray-50" : "",
+                      hasPinned ? "left-0" : ""
+                    ].filter(Boolean).join(" "),
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        "aria-label": strings.table.selectAll,
+                        checked: allSelected,
+                        ref: (el) => {
+                          if (el) el.indeterminate = someSelected && !allSelected;
+                        },
+                        onChange: toggleAll,
+                        className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+                      }
+                    )
+                  }
+                ),
+                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}`
+                    );
+                  }
+                  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 } }) }),
+            /* @__PURE__ */ jsx("tbody", { children: data.length === 0 && !loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: `${cellBase} py-10 text-center text-gray-500`, children: emptyContent }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              topPad > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: colCount, 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(
+                return /* @__PURE__ */ jsxs(
                   "tr",
                   {
                     style: virtualized ? { height: virtualized.rowHeight } : void 0,
@@ -5116,32 +5530,55 @@ function DataTable({
                       rowClassName?.(row, i) ?? "",
                       rowProps?.className ?? ""
                     ].filter(Boolean).join(" "),
-                    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
-                      );
-                    })
+                    children: [
+                      selection && (() => {
+                        const key = keyOf(row, i);
+                        return /* @__PURE__ */ jsx(
+                          "td",
+                          {
+                            style: { width: SELECT_W },
+                            onClick: (e) => e.stopPropagation(),
+                            className: [cellBase, hasPinned ? "sticky left-0 z-10 bg-white" : ""].filter(Boolean).join(" "),
+                            children: /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                type: "checkbox",
+                                "aria-label": strings.table.selectRow,
+                                checked: selectedSet.has(key),
+                                onChange: () => toggleRow(key),
+                                className: "h-4 w-4 rounded border-gray-300 text-blue-600"
+                              }
+                            )
+                          }
+                        );
+                      })(),
+                      leaves.map((col, ci) => {
+                        const pinned = col.fixed === "left";
+                        return /* @__PURE__ */ jsx(
+                          "td",
+                          {
+                            style: pinned ? { left: (offsets[ci] ?? 0) + selOffset } : 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
+                        );
+                      })
+                    ]
                   },
                   keyOf(row, i)
                 );
               }),
-              bottomPad > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: leaves.length, style: { height: bottomPad, padding: 0, border: 0 } }) })
+              bottomPad > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: colCount, style: { height: bottomPad, padding: 0, border: 0 } }) })
             ] }) })
           ] }),
           footer
@@ -5204,8 +5641,8 @@ function Sparkline({
   const max = Math.max(...data);
   const min = Math.min(...data);
   const span = max - min || 1;
-  const pad4 = strokeWidth + (showDots ? 2 : 0);
-  const y = (v) => height - pad4 - (v - min) / span * (height - pad4 * 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`;
@@ -6107,6 +6544,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, 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, inputClasses, isMac, isSeverityTone, lastEnabledIndex, matchTypeahead, mediaFileName, nextEnabledIndex, resolveTheme, severityOf, tabButtonId, tabPanelId, toISODate, useClickOutside, useTheme };
-//# sourceMappingURL=chunk-CWA27IGB.js.map
-//# sourceMappingURL=chunk-CWA27IGB.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, FormErrorSummary, 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-S6K37RLY.js.map
+//# sourceMappingURL=chunk-S6K37RLY.js.map