react-os-shell 0.3.9 → 0.3.10

package/dist/index.js

@@ -13,19 +13,19 @@ import './chunk-KUIPWCTJ.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
 export { EditableGrid } from './chunk-F3XQURUE.js';
-import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, ModalActions, useIsMobile, useModalActive, WINDOW_REGISTRY, isPageEntry, LoadingSpinner, ThumbCard, activateModal } from './chunk-CNOME73V.js';
+import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, ModalActions, useIsMobile, useModalActive, client_default, LoadingSpinner, WINDOW_REGISTRY, isPageEntry, ThumbCard, activateModal } from './chunk-CNOME73V.js';
 export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-CNOME73V.js';
 import { confirm } from './chunk-PLGHQ7QW.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-PLGHQ7QW.js';
-import { useAuth } from './chunk-ADJ3CERD.js';
+import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
 export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
 import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons } from './chunk-SSA762W5.js';
 export { GLASS_DIVIDER, GLASS_INPUT_BG, glassStyle, setShellNavIcons } from './chunk-SSA762W5.js';
-import { createContext, lazy, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, useSyncExternalStore, useMemo } from 'react';
+import { createContext, lazy, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, useMemo, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
 import { createPortal } from 'react-dom';
-import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
+import { useQueryClient, useQuery, useMutation, useInfiniteQuery } from '@tanstack/react-query';
 import 'react-router-dom';
 
 // src/windowRegistry/createWindowRegistry.ts
@@ -915,7 +915,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.3.9" ;
+var VERSION = "0.3.10" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -5083,6 +5083,666 @@ function SoundSettings() {
     ] }) }) })
   ] });
 }
+function useTableNav(items, onSelect, onToggle, onSelectAll, onSelectRange) {
+  const [focusIdx, setFocusIdx] = useState(-1);
+  const itemsRef = useRef(items);
+  const onSelectRef = useRef(onSelect);
+  const onToggleRef = useRef(onToggle);
+  const onSelectAllRef = useRef(onSelectAll);
+  const onSelectRangeRef = useRef(onSelectRange);
+  const focusRef = useRef(focusIdx);
+  const lastToggledRef = useRef(-1);
+  const isActive = useModalActive();
+  const isActiveRef = useRef(isActive);
+  itemsRef.current = items;
+  onSelectRef.current = onSelect;
+  onToggleRef.current = onToggle;
+  onSelectAllRef.current = onSelectAll;
+  onSelectRangeRef.current = onSelectRange;
+  focusRef.current = focusIdx;
+  isActiveRef.current = isActive;
+  const prevLen = useRef(items.length);
+  useEffect(() => {
+    if (items.length !== prevLen.current) {
+      setFocusIdx(-1);
+      lastToggledRef.current = -1;
+      prevLen.current = items.length;
+    }
+  }, [items.length]);
+  useEffect(() => {
+    const handler = (e) => {
+      if (!isActiveRef.current) return;
+      if (e.shiftKey) return;
+      const target = e.target;
+      const row = target?.closest?.("[data-row-idx]");
+      if (!row) return;
+      if (target.tagName !== "INPUT" || target.type !== "checkbox") return;
+      const idx = parseInt(row.getAttribute("data-row-idx"), 10);
+      if (!isNaN(idx)) {
+        lastToggledRef.current = idx;
+        setFocusIdx(idx);
+      }
+    };
+    document.addEventListener("click", handler);
+    return () => document.removeEventListener("click", handler);
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      if (!isActiveRef.current) return;
+      const tag = e.target?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+      if (e.target?.isContentEditable) return;
+      if ((e.metaKey || e.ctrlKey) && e.key === "a") {
+        e.preventDefault();
+        onSelectAllRef.current?.();
+        return;
+      }
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      const len = itemsRef.current.length;
+      if (len === 0) return;
+      const isDown = e.code === "KeyJ" || e.key === "j" || e.key === "J" || e.key === "ArrowDown";
+      const isUp = e.code === "KeyK" || e.key === "k" || e.key === "K" || e.key === "ArrowUp";
+      if (isDown || isUp) {
+        e.preventDefault();
+        const prev = focusRef.current;
+        const next = isDown ? Math.min(prev + 1, len - 1) : Math.max(prev - 1, 0);
+        if (next !== prev) {
+          setFocusIdx(next);
+          scrollRowIntoView(next);
+          if (e.shiftKey && onToggleRef.current) {
+            onToggleRef.current(itemsRef.current[next]);
+            lastToggledRef.current = next;
+          }
+        }
+      } else if (e.key === "Enter" && focusRef.current >= 0 && focusRef.current < len) {
+        e.preventDefault();
+        onSelectRef.current(itemsRef.current[focusRef.current]);
+      } else if (e.key === " " && focusRef.current >= 0 && focusRef.current < len) {
+        e.preventDefault();
+        if (e.shiftKey && lastToggledRef.current >= 0 && onSelectRangeRef.current) {
+          const from = Math.min(lastToggledRef.current, focusRef.current);
+          const to = Math.max(lastToggledRef.current, focusRef.current);
+          onSelectRangeRef.current(from, to);
+        } else {
+          onToggleRef.current?.(itemsRef.current[focusRef.current]);
+        }
+        lastToggledRef.current = focusRef.current;
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      if (!isActiveRef.current) return;
+      if (!e.shiftKey) return;
+      const target = e.target;
+      const row = target?.closest?.("[data-row-idx]");
+      if (!row) return;
+      const clickedIdx = parseInt(row.getAttribute("data-row-idx"), 10);
+      if (isNaN(clickedIdx)) return;
+      const anchor = lastToggledRef.current;
+      if (anchor < 0) {
+        onToggleRef.current?.(itemsRef.current[clickedIdx]);
+        lastToggledRef.current = clickedIdx;
+        setFocusIdx(clickedIdx);
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      const from = Math.min(anchor, clickedIdx);
+      const to = Math.max(anchor, clickedIdx);
+      if (onSelectRangeRef.current) {
+        onSelectRangeRef.current(from, to);
+      } else if (onToggleRef.current) {
+        for (let i = from; i <= to; i++) {
+          onToggleRef.current(itemsRef.current[i]);
+        }
+      }
+      lastToggledRef.current = clickedIdx;
+      setFocusIdx(clickedIdx);
+    };
+    document.addEventListener("click", handler, true);
+    return () => document.removeEventListener("click", handler, true);
+  }, []);
+  return focusIdx;
+}
+function scrollRowIntoView(idx) {
+  requestAnimationFrame(() => {
+    const row = document.querySelector(`[data-row-idx="${idx}"]`);
+    row?.scrollIntoView({ block: "nearest" });
+  });
+}
+function pinSelectColumn(cols) {
+  const selectIdx = cols.findIndex((c) => c.key === "_select");
+  if (selectIdx >= 0) {
+    const [sel] = cols.splice(selectIdx, 1);
+    sel.hidden = false;
+    cols.unshift(sel);
+  }
+  return cols;
+}
+function useColumnConfig(tableId, defaultColumns) {
+  const [columns, setColumns] = useState(() => {
+    const cached = localStorage.getItem(`col-config-${tableId}`);
+    if (cached) {
+      try {
+        const parsed = JSON.parse(cached);
+        const existing = new Set(parsed.map((c) => c.key));
+        const merged = pinSelectColumn([
+          ...parsed.filter((c) => defaultColumns.some((d) => d.key === c.key)),
+          ...defaultColumns.filter((d) => !existing.has(d.key)).map((d) => ({ key: d.key, width: d.defaultWidth || 150 }))
+        ]);
+        return merged;
+      } catch {
+      }
+    }
+    return pinSelectColumn(defaultColumns.map((d) => ({ key: d.key, width: d.defaultWidth || 150, hidden: d.defaultHidden })));
+  });
+  const [draggedIdx, setDraggedIdx] = useState(null);
+  const [dropGap, setDropGap] = useState(null);
+  const resizingRef = useRef(null);
+  const saveTimer = useRef(null);
+  const saveMut = useMutation({
+    mutationFn: (cols) => client_default.patch("/auth/me/", {
+      preferences: { [`columns_${tableId}`]: cols }
+    })
+  });
+  const persistColumns = useCallback((cols) => {
+    localStorage.setItem(`col-config-${tableId}`, JSON.stringify(cols));
+    if (saveTimer.current) clearTimeout(saveTimer.current);
+    saveTimer.current = setTimeout(() => saveMut.mutate(cols), 1e3);
+  }, [tableId, saveMut]);
+  useEffect(() => {
+    const viewport = typeof window !== "undefined" && window.matchMedia("(max-width: 767px), (pointer: coarse)").matches ? "mobile" : "desktop";
+    Promise.all([
+      client_default.get("/auth/me/").catch(() => null),
+      client_default.get(`/auth/default-columns/${tableId}/`, { params: { viewport } }).catch(() => null)
+    ]).then(([userRes, defaultRes]) => {
+      const prefs = userRes?.data?.preferences;
+      const userSaved = prefs?.[`columns_${tableId}`];
+      if (userSaved && Array.isArray(userSaved)) {
+        const existing = new Set(userSaved.map((c) => c.key));
+        const merged = pinSelectColumn([
+          ...userSaved.filter((c) => defaultColumns.some((d) => d.key === c.key)),
+          ...defaultColumns.filter((d) => !existing.has(d.key)).map((d) => ({ key: d.key, width: d.defaultWidth || 150, hidden: d.defaultHidden }))
+        ]);
+        setColumns(merged);
+        localStorage.setItem(`col-config-${tableId}`, JSON.stringify(merged));
+      } else if (Array.isArray(defaultRes?.data?.visible_columns) && defaultRes.data.visible_columns.length > 0) {
+        const visibleSet = new Set(defaultRes.data.visible_columns);
+        const systemCols = pinSelectColumn(defaultColumns.map((d) => ({
+          key: d.key,
+          width: d.defaultWidth || 150,
+          hidden: !visibleSet.has(d.key)
+        })));
+        setColumns(systemCols);
+        localStorage.setItem(`col-config-${tableId}`, JSON.stringify(systemCols));
+      }
+    });
+  }, [tableId]);
+  const visibleColumns = columns.filter((c) => !c.hidden);
+  const onResizeStart = useCallback((idx, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const visCol = visibleColumns[idx];
+    const realIdx = columns.findIndex((c) => c.key === visCol.key);
+    resizingRef.current = { idx: realIdx, startX: e.clientX, startWidth: columns[realIdx].width };
+    const onMouseMove = (ev) => {
+      if (!resizingRef.current) return;
+      const { idx: i, startX, startWidth } = resizingRef.current;
+      const minW = defaultColumns.find((d) => d.key === columns[i].key)?.minWidth || 30;
+      const newWidth = Math.max(minW, startWidth + ev.clientX - startX);
+      setColumns((prev) => {
+        const updated = [...prev];
+        updated[i] = { ...updated[i], width: newWidth };
+        return updated;
+      });
+    };
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      resizingRef.current = null;
+      setColumns((prev) => {
+        persistColumns(prev);
+        return prev;
+      });
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  }, [columns, visibleColumns, defaultColumns, persistColumns]);
+  const onDragStart = useCallback((idx) => {
+    setDraggedIdx(idx);
+  }, []);
+  const onDragOver = useCallback((visIdx, e) => {
+    e.preventDefault();
+    if (draggedIdx === null) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    let gap = e.clientX < rect.left + rect.width / 2 ? visIdx : visIdx + 1;
+    const vis = columns.filter((c) => !c.hidden);
+    if (vis[0]?.key === "_select" && gap === 0) gap = 1;
+    setDropGap(gap);
+  }, [draggedIdx, columns]);
+  const onDrop = useCallback((_visIdx, e) => {
+    e.preventDefault();
+    if (draggedIdx === null || dropGap === null) {
+      setDraggedIdx(null);
+      setDropGap(null);
+      return;
+    }
+    if (dropGap === draggedIdx || dropGap === draggedIdx + 1) {
+      setDraggedIdx(null);
+      setDropGap(null);
+      return;
+    }
+    setColumns((prev) => {
+      const visible = prev.filter((c) => !c.hidden);
+      const moved = visible[draggedIdx];
+      if (!moved) return prev;
+      const fromReal = prev.findIndex((c) => c.key === moved.key);
+      let toReal;
+      if (dropGap < visible.length) {
+        toReal = prev.findIndex((c) => c.key === visible[dropGap].key);
+      } else {
+        toReal = prev.findIndex((c) => c.key === visible[visible.length - 1].key) + 1;
+      }
+      const updated = [...prev];
+      const [item] = updated.splice(fromReal, 1);
+      updated.splice(toReal > fromReal ? toReal - 1 : toReal, 0, item);
+      persistColumns(updated);
+      return updated;
+    });
+    setDraggedIdx(null);
+    setDropGap(null);
+  }, [draggedIdx, dropGap, persistColumns]);
+  const onDragEnd = useCallback(() => {
+    setDraggedIdx(null);
+    setDropGap(null);
+  }, []);
+  const toggleColumn = useCallback((key) => {
+    setColumns((prev) => {
+      const updated = prev.map((c) => c.key === key ? { ...c, hidden: !c.hidden } : c);
+      if (updated.filter((c) => !c.hidden).length === 0) return prev;
+      persistColumns(updated);
+      return updated;
+    });
+  }, [persistColumns]);
+  const resetColumns = useCallback(() => {
+    const defaults = defaultColumns.map((d) => ({ key: d.key, width: d.defaultWidth || 150 }));
+    setColumns(defaults);
+    persistColumns(defaults);
+  }, [defaultColumns, persistColumns]);
+  const orderedColumns = visibleColumns.map((c) => {
+    const def = defaultColumns.find((d) => d.key === c.key);
+    return { ...def, width: c.width };
+  }).filter(Boolean);
+  const allColumns = columns.map((c) => {
+    const def = defaultColumns.find((d) => d.key === c.key);
+    return { key: c.key, label: def?.label || c.key, hidden: !!c.hidden };
+  });
+  return {
+    orderedColumns,
+    allColumns,
+    onResizeStart,
+    onDragStart,
+    onDragOver,
+    onDrop,
+    onDragEnd,
+    toggleColumn,
+    resetColumns,
+    draggedIdx,
+    dropGap
+  };
+}
+function ResizableTable({
+  tableId,
+  columns,
+  sort,
+  onSort,
+  footer,
+  afterBody,
+  saveDefaultPerms = ["change_numberingconfig"],
+  children
+}) {
+  const isMobile = useIsMobile();
+  const [selectionMode, setSelectionMode] = useState(false);
+  const effectiveColumns = useMemo(
+    () => isMobile && !selectionMode ? columns.filter((c) => c.key !== "_select") : columns,
+    [columns, isMobile, selectionMode]
+  );
+  const {
+    orderedColumns,
+    allColumns,
+    onResizeStart,
+    onDragStart,
+    onDragOver,
+    onDrop,
+    onDragEnd,
+    toggleColumn,
+    resetColumns,
+    draggedIdx,
+    dropGap
+  } = useColumnConfig(tableId, effectiveColumns);
+  const { hasAnyPerm } = useShellAuth();
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [savingDefault, setSavingDefault] = useState(false);
+  const [savedDefault, setSavedDefault] = useState(false);
+  const pickerRef = useRef(null);
+  const isAdmin = saveDefaultPerms.length > 0 && hasAnyPerm(saveDefaultPerms);
+  useClickOutside(pickerRef, useCallback(() => {
+    if (pickerOpen) setPickerOpen(false);
+  }, [pickerOpen]));
+  const totalWidth = orderedColumns.reduce((sum, col) => sum + col.width, 0);
+  const colWidths = orderedColumns.map((col) => `${col.width / totalWidth * 100}%`);
+  const saveAsDefault = async () => {
+    setSavingDefault(true);
+    const visibleKeys = allColumns.filter((c) => !c.hidden).map((c) => c.key);
+    const viewport = isMobile ? "mobile" : "desktop";
+    try {
+      await client_default.patch(`/auth/default-columns/${tableId}/`, { visible_columns: visibleKeys }, { params: { viewport } }).catch(
+        () => client_default.post("/auth/default-columns/", { table_id: tableId, viewport, visible_columns: visibleKeys })
+      );
+      setSavedDefault(true);
+      setTimeout(() => setSavedDefault(false), 2e3);
+    } catch {
+    }
+    setSavingDefault(false);
+  };
+  const supportsSelection = useMemo(() => columns.some((c) => c.key === "_select"), [columns]);
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col flex-1 min-h-0 ${isMobile ? "-mx-4" : ""}`, children: [
+    /* @__PURE__ */ jsxs("table", { className: "w-full divide-y divide-gray-200 shrink-0", style: { tableLayout: "fixed" }, children: [
+      /* @__PURE__ */ jsx("colgroup", { children: orderedColumns.map((col, i) => /* @__PURE__ */ jsx("col", { style: { width: colWidths[i] } }, col.key)) }),
+      /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsx("tr", { children: orderedColumns.map((col, idx) => {
+        const colDef = columns.find((c) => c.key === col.key);
+        const sortField = colDef?.sortField ?? (col.key !== "_select" ? col.key : void 0);
+        const isSorted = sort && sortField && sort.field === sortField;
+        const isFixed = col.key === "_select";
+        return /* @__PURE__ */ jsxs(
+          "th",
+          {
+            className: `px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase select-none relative ${draggedIdx === idx ? "bg-blue-50" : ""}`,
+            draggable: !isFixed,
+            onDragStart: isFixed ? void 0 : () => onDragStart(idx),
+            onDragOver: isFixed ? void 0 : (e) => onDragOver(idx, e),
+            onDrop: isFixed ? void 0 : (e) => onDrop(idx, e),
+            onDragEnd: isFixed ? void 0 : onDragEnd,
+            style: isFixed ? void 0 : { cursor: "grab" },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: `${isFixed ? "" : "truncate pr-3"} block ${sortField && onSort ? "cursor-pointer hover:text-gray-700" : ""}`,
+                  onClick: sortField && onSort ? (e) => {
+                    e.stopPropagation();
+                    onSort(sortField);
+                  } : void 0,
+                  children: [
+                    col.headerNode ?? col.label,
+                    isSorted && /* @__PURE__ */ jsx("span", { className: "ml-1", children: sort.direction === "asc" ? "\u25B2" : "\u25BC" })
+                  ]
+                }
+              ),
+              !isFixed && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute right-0 top-0 bottom-0 w-4 cursor-col-resize flex items-center justify-center z-10",
+                  onMouseDown: (e) => onResizeStart(idx, e),
+                  style: { marginRight: -8 },
+                  children: /* @__PURE__ */ jsx("div", { className: "w-0.5 h-full bg-gray-200 hover:bg-blue-500 transition-colors" })
+                }
+              ),
+              dropGap === idx && /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 bottom-0 w-0.5 bg-blue-500 z-20 pointer-events-none" }),
+              idx === orderedColumns.length - 1 && dropGap === orderedColumns.length && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-0 bottom-0 w-0.5 bg-blue-500 z-20 pointer-events-none" })
+            ]
+          },
+          col.key
+        );
+      }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-auto min-h-0", children: [
+      /* @__PURE__ */ jsxs("table", { className: "w-full divide-y divide-gray-200", style: { tableLayout: "fixed" }, children: [
+        /* @__PURE__ */ jsx("colgroup", { children: orderedColumns.map((col, i) => /* @__PURE__ */ jsx("col", { style: { width: colWidths[i] } }, col.key)) }),
+        children(orderedColumns)
+      ] }),
+      afterBody
+    ] }),
+    footer !== void 0 && /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 px-4 py-2 text-sm text-gray-500 shrink-0 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { children: footer }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 relative", ref: pickerRef, children: [
+        isMobile && supportsSelection && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setSelectionMode((s) => !s),
+            className: `text-[11px] px-2 py-0.5 rounded ${selectionMode ? "bg-blue-600 text-white" : "text-gray-500 hover:text-gray-700 border border-gray-300"}`,
+            title: selectionMode ? "Hide selection column" : "Show selection column",
+            children: selectionMode ? "Done" : "Select"
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { onClick: resetColumns, className: "text-[10px] text-gray-400 hover:text-gray-600", children: "Reset" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setPickerOpen(!pickerOpen), className: "text-gray-400 hover:text-gray-600", title: "Choose columns", children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" }) }) }),
+        pickerOpen && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 mb-1 w-52 rounded-2xl z-50 py-1 max-h-80 overflow-y-auto", style: glassStyle(), children: [
+          /* @__PURE__ */ jsx("p", { className: "px-3 py-1.5 text-[10px] font-semibold text-gray-400 uppercase", children: "Columns" }),
+          allColumns.filter((col) => col.key !== "_select").map((col) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 px-3 py-1 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: !col.hidden,
+                onChange: () => toggleColumn(col.key),
+                className: "h-3.5 w-3.5 rounded border-gray-300 text-blue-600"
+              }
+            ),
+            col.label
+          ] }, col.key)),
+          isAdmin && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-100 mt-1 pt-1 px-3 pb-1", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: saveAsDefault,
+              disabled: savingDefault,
+              className: `text-[10px] w-full text-center py-1 rounded ${savedDefault ? "text-green-600" : "text-gray-500 hover:text-blue-600"}`,
+              children: savingDefault ? "..." : savedDefault ? "Saved as default" : "Save as default for all users"
+            }
+          ) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ListFooter({
+  selectedCount,
+  loadedCount,
+  totalCount,
+  label,
+  isFetchingMore,
+  extra
+}) {
+  const total = totalCount ?? loadedCount;
+  const allLoaded = loadedCount >= total;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    extra,
+    selectedCount > 0 ? `${selectedCount} selected \u2014 ` : "",
+    allLoaded ? totalCount != null ? `All ${total.toLocaleString()} ${label} loaded` : `${total.toLocaleString()} ${label}` : `${loadedCount.toLocaleString()} of ${total.toLocaleString()} ${label}`,
+    isFetchingMore ? " \xB7 Loading more..." : ""
+  ] });
+}
+function EntityList(props) {
+  const {
+    items,
+    isLoading,
+    emptyState,
+    totalCount,
+    tableId,
+    columns,
+    renderCell,
+    getRowId = (item) => item.id,
+    sort,
+    onSort,
+    selected,
+    setSelected,
+    onRowClick,
+    onRowHover,
+    getRowClassName,
+    footerLabel,
+    footerExtra,
+    sentinelRef,
+    isFetchingNextPage,
+    saveDefaultPerms
+  } = props;
+  const toggleItem = (item) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      const id = getRowId(item);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const toggleAll = () => {
+    setSelected((prev) => prev.size === items.length ? /* @__PURE__ */ new Set() : new Set(items.map(getRowId)));
+  };
+  const selectRange = (from, to) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      for (let i = from; i <= to; i++) next.add(getRowId(items[i]));
+      return next;
+    });
+  };
+  const focusIdx = useTableNav(items, onRowClick, toggleItem, toggleAll, selectRange);
+  if (isLoading) return /* @__PURE__ */ jsx(LoadingSpinner, {});
+  if (items.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: emptyState });
+  const allSelected = items.length > 0 && selected.size === items.length;
+  const fullColumns = [
+    {
+      key: "_select",
+      label: "",
+      defaultWidth: 52,
+      minWidth: 52,
+      headerNode: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: allSelected,
+          onChange: toggleAll,
+          className: "h-3.5 w-3.5 rounded border-gray-300 text-blue-600"
+        }
+      )
+    },
+    ...columns
+  ];
+  const footer = /* @__PURE__ */ jsx(
+    ListFooter,
+    {
+      selectedCount: selected.size,
+      loadedCount: items.length,
+      totalCount,
+      label: footerLabel,
+      isFetchingMore: isFetchingNextPage,
+      extra: footerExtra
+    }
+  );
+  const afterBody = sentinelRef ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: sentinelRef }),
+    isFetchingNextPage && /* @__PURE__ */ jsx("div", { className: "text-center py-3", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: "Loading more..." }) })
+  ] }) : void 0;
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col mb-1 bg-white rounded-lg shadow overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ jsx(
+    ResizableTable,
+    {
+      tableId,
+      columns: fullColumns,
+      sort,
+      onSort,
+      footer,
+      afterBody,
+      saveDefaultPerms,
+      children: (cols) => /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-100", children: items.map((item, rowIdx) => {
+        const id = getRowId(item);
+        return /* @__PURE__ */ jsx(
+          "tr",
+          {
+            "data-row-idx": rowIdx,
+            className: `cursor-pointer ${focusIdx === rowIdx ? "bg-blue-50 ring-1 ring-inset ring-blue-300" : selected.has(id) ? "bg-blue-50 hover:bg-blue-100" : "hover:bg-gray-50"} ${getRowClassName?.(item) ?? ""}`,
+            onClick: () => onRowClick(item),
+            onMouseEnter: onRowHover ? () => onRowHover(item) : void 0,
+            children: cols.map((col) => /* @__PURE__ */ jsx("td", { className: "px-4 py-3 whitespace-nowrap text-sm overflow-hidden", children: col.key === "_select" ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: selected.has(id),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggleItem(item);
+                },
+                readOnly: true,
+                className: "h-3.5 w-3.5 rounded border-gray-300 text-blue-600"
+              }
+            ) : renderCell(item, col.key) }, col.key))
+          },
+          id
+        );
+      }) })
+    }
+  ) }) });
+}
+function useInfiniteScroll({
+  queryKey,
+  fetchFn,
+  extraParams = {},
+  pageSize: _pageSize = 25
+}) {
+  const sentinelRef = useRef(null);
+  const cleanExtra = Object.fromEntries(
+    Object.entries(extraParams).filter(([, v]) => v !== void 0)
+  );
+  const query = useInfiniteQuery({
+    queryKey,
+    queryFn: ({ pageParam = 1 }) => fetchFn({ page: String(pageParam), ...cleanExtra }),
+    getNextPageParam: (lastPage, allPages) => {
+      if (lastPage.next) {
+        return allPages.length + 1;
+      }
+      return void 0;
+    },
+    initialPageParam: 1
+  });
+  const { fetchNextPage, hasNextPage, isFetchingNextPage } = query;
+  const handleObserver = useCallback(
+    (entries) => {
+      const [entry] = entries;
+      if (entry.isIntersecting && hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    },
+    [fetchNextPage, hasNextPage, isFetchingNextPage]
+  );
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el) return;
+    let scrollParent = el.parentElement;
+    while (scrollParent) {
+      const overflow = getComputedStyle(scrollParent).overflowY;
+      if (overflow === "auto" || overflow === "scroll") break;
+      scrollParent = scrollParent.parentElement;
+    }
+    const observer = new IntersectionObserver(handleObserver, {
+      root: scrollParent,
+      rootMargin: "200px",
+      threshold: 0
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [handleObserver]);
+  const allItems = (query.data?.pages.flatMap((page) => page?.results ?? []) ?? []).filter((x) => x != null);
+  const totalCount = query.data?.pages[0]?.count ?? 0;
+  return {
+    items: allItems,
+    totalCount,
+    isLoading: query.isLoading,
+    isFetchingNextPage,
+    hasNextPage: !!hasNextPage,
+    sentinelRef,
+    refetch: query.refetch
+  };
+}
 var EntityFetcherContext = createContext(null);
 function ShellEntityFetcherProvider({
   value,
@@ -5129,6 +5789,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, Desktop, DesktopHostProvider, ENTER, GlobalSearch, Layout, MOD, MailConnectModal, NotificationBell, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, StartMenu, StatusBadge, StatusBadgeProvider, VERSION, createWindowRegistry, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useDesktopHost, useEditHotkey, useNewHotkey, useShellEntityFetcher };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, Desktop, DesktopHostProvider, ENTER, EntityList, GlobalSearch, Layout, ListFooter, MOD, MailConnectModal, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, StartMenu, StatusBadge, StatusBadgeProvider, VERSION, createWindowRegistry, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map