react-os-shell 4.54.0 → 4.63.0

package/dist/{chunk-3SUSQHOW.js → chunk-CWA27IGB.js}

@@ -3,7 +3,7 @@ import { SidebarLayout } from './chunk-YG45DAUT.js';
 import { useIsMobile, PopupMenu, PopupMenuItem, useShellPrefs } from './chunk-ZCDFNZQS.js';
 import { registerModalEscapeInterceptor, useFocusTrap, useScrollLock } from './chunk-OXLLRKBC.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, useSyncExternalStore } from 'react';
+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';
 import { createPortal } from 'react-dom';
 
@@ -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 pad4 = `${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: [pad4, className].filter(Boolean).join(" ") }),
         ...rest
       }
     )
@@ -1500,6 +1500,73 @@ var DatePicker = forwardRef(function DatePicker2({ value, onChange, min, max, in
   );
 });
 var DatePicker_default = DatePicker;
+var TIME = /^\d{2}:\d{2}(:\d{2})?$/;
+var pad2 = (n) => String(n).padStart(2, "0");
+function toInputValue2(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;
+  }
+  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: toInputValue2(value, withSeconds),
+      min: toInputValue2(min, withSeconds) || void 0,
+      max: toInputValue2(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 ISO_LOCAL = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/;
+var pad3 = (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())}`;
+}
+function toInputValue3(value) {
+  if (value === null || value === void 0 || value === "") return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : serialise(value);
+  if (ISO_LOCAL.test(value)) return value;
+  return "";
+}
+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 DateTimePicker = forwardRef(function DateTimePicker2({ value, onChange, min, max, invalid, size, className = "", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "datetime-local",
+      "aria-invalid": invalid || void 0,
+      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 DateTimePicker_default = DateTimePicker;
 
 // src/forms/keypadInput.ts
 var MAX_FRACTION_DIGITS = 2;
@@ -2199,6 +2266,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-[400] 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 +2714,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 pad4 = 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: `${pad4} ${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 ? "" : pad4 === "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 ? `${pad4} 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 +3099,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 +3582,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":
@@ -4664,9 +4959,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 +4996,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 +5006,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 +5046,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 +5204,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 pad4 = strokeWidth + (showDots ? 2 : 0);
+  const y = (v) => height - pad4 - (v - min) / span * (height - pad4 * 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 +5297,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",
@@ -5523,6 +5927,53 @@ function ErrorPage({ code = 404, actions }) {
     actions && /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center gap-2", children: actions })
   ] });
 }
+var ErrorBoundary = class extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error("ErrorBoundary caught an error:", error, info);
+    this.props.onError?.(error, info);
+  }
+  componentDidUpdate(prev) {
+    if (!this.state.error) return;
+    const a = prev.resetKeys ?? [];
+    const b = this.props.resetKeys ?? [];
+    if (a.length !== b.length || a.some((k, i) => !Object.is(k, b[i]))) {
+      this.reset();
+    }
+  }
+  reset = () => this.setState({ error: null });
+  render() {
+    const { error } = this.state;
+    if (!error) return this.props.children;
+    if (this.props.fallback) return this.props.fallback(error, this.reset);
+    return (
+      // A column, not a bare wrapper: `ErrorPage` is `h-full`, so a `<details>`
+      // rendered as its sibling inside an `h-full` box starts at the 100% mark
+      // and sits below the fold — unreachable under an `overflow-hidden`
+      // ancestor, which is the usual app shell. As a flex child it takes the
+      // room it needs and the page gives it back.
+      /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+        /* @__PURE__ */ jsx("div", { role: "alert", className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+          ErrorPage,
+          {
+            code: 500,
+            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button_default, { onClick: this.reset, children: "Try again" }),
+              this.props.actions
+            ] })
+          }
+        ) }),
+        this.props.showDetails && /* @__PURE__ */ jsxs("details", { className: "mx-auto w-full max-w-2xl shrink-0 px-6 pb-6", children: [
+          /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-sm font-medium text-gray-600", children: "Error details" }),
+          /* @__PURE__ */ jsx("pre", { className: "mt-2 overflow-auto rounded-md bg-gray-100 p-3 text-xs text-gray-700", children: error.stack ?? error.message })
+        ] })
+      ] })
+    );
+  }
+};
 function subscribeMediaQuery(cb) {
   const mq = window.matchMedia("(prefers-color-scheme: dark)");
   mq.addEventListener("change", cb);
@@ -5656,6 +6107,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, 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-3SUSQHOW.js.map
-//# sourceMappingURL=chunk-3SUSQHOW.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, 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