gridsmith-ui 0.11.0 → 0.13.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useAppShell, ControlSizeContext, Button, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, useDirtyGuard, DiscardConfirm, defaultMaxWidth } from './chunk-YMUCTZXS.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-YMUCTZXS.js';
+import { useAppShell, ControlSizeContext, Button, Spinner, OverlayCloseCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, useDirtyGuard, DiscardConfirm, defaultMaxWidth } from './chunk-KKTIRPNZ.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-KKTIRPNZ.js';
 import { Skeleton } from './chunk-M3AARGLI.js';
 export { Skeleton } from './chunk-M3AARGLI.js';
 import { useOverlayLayer, useCloseOnFocusOut, focusInitial, rovingTabStop, OVERLAY_CLOSE_ATTR, useNonModalDialog, useFocusTrap } from './chunk-NHQCMOAN.js';
@@ -8,8 +8,8 @@ export { CodeBlock, Divider, Link } from './chunk-QJBCZ7BR.js';
 import { Badge } from './chunk-U2JT37GJ.js';
 export { Badge } from './chunk-U2JT37GJ.js';
 import { inferColumnKinds, CardValue } from './chunk-CR2KF73R.js';
-import { SplitPaneCtx, usePreferences, TableCardCtx, preferenceActionKey } from './chunk-QNVSMY4R.js';
-export { PreferencesContext, preferenceActionKey, usePreferences } from './chunk-QNVSMY4R.js';
+import { SplitPaneCtx, useShellPreferences, TableCardCtx, PREFERENCE_HOUSE_DEFAULTS, preferenceActionKey } from './chunk-TKVTZWBN.js';
+export { PreferencesContext, preferenceActionKey, usePreferences } from './chunk-TKVTZWBN.js';
 import { useBreakpoint } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
 import { useTextOverflow, Tooltip, usePosition } from './chunk-IYD6ZDM2.js';
@@ -3859,10 +3859,19 @@ function collectInvalidFields(form) {
   }
   return out;
 }
-function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions, actionsAlign: actionsAlignProp, focusFirstError = true, errorSummary = true, className, ref }) {
-  const preferences = usePreferences();
+function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions: actionsProp, actionsAlign: actionsAlignProp, onCancel, cancelLabel = "Cancel", focusFirstError = true, errorSummary = true, className, ref }) {
+  const preferences = useShellPreferences();
   const validationMode = validationModeProp ?? preferences.validationTiming ?? "onSubmit";
   const actionsAlign = actionsAlignProp ?? preferences.formActions?.align ?? "end";
+  const overlayClose = useContext(OverlayCloseCtx);
+  const actions = useMemo(() => {
+    if (!onCancel) return actionsProp;
+    const cancel = /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => (overlayClose ?? onCancel)(), children: cancelLabel }, "gs-form-cancel");
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      cancel,
+      actionsProp
+    ] });
+  }, [actionsProp, onCancel, overlayClose, cancelLabel]);
   const [errors, setErrors] = useState({});
   const [submitted, setSubmitted] = useState(false);
   const [submitCount, setSubmitCount] = useState(0);
@@ -4201,6 +4210,17 @@ function PanelCheckbox({ checked, indeterminate, onClick, label }) {
     }
   );
 }
+
+// ../../showcase/src/lib/initials.ts
+function initialsOf(name) {
+  return name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((word) => Array.from(word)[0] ?? "").join("").toUpperCase();
+}
+function toInitials(value) {
+  const s = value.trim();
+  if (!s) return "";
+  if (!/\s/.test(s) && Array.from(s).length <= 3) return s;
+  return initialsOf(s);
+}
 var variantColors = {
   success: "bg-[var(--ds-status-success)]",
   warning: "bg-[var(--ds-status-warning)]",
@@ -4309,7 +4329,7 @@ function Avatar({ initials, src, alt, size = "md", status, color = "auto", class
         colorStyles(color, alt ?? initials ?? ""),
         "border-[length:var(--ds-border-width)] border-transparent"
       ),
-      children: initials
+      children: initials != null ? toInitials(initials) : null
     }
   );
   if (!status) return avatarElement;
@@ -5243,17 +5263,17 @@ function Table({
     (col) => col.kind ?? inferredKinds.get(col.key),
     [inferredKinds]
   );
-  const preferences = usePreferences();
+  const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
   const isMobile = useBreakpoint(mobileBreakpoint);
   if (isMobile) {
     if (loading) {
-      return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
+      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
     }
     if (data.length === 0 && emptyState) {
-      return /* @__PURE__ */ jsx("div", { ref, className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
+      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
     }
-    return /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-ds-3 overflow-y-auto", className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
+    return /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", className: cn("flex flex-col gap-ds-3 overflow-y-auto", className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
       const isSelected = selectedSet.has(originalIdx);
       return /* @__PURE__ */ jsxs(
         "div",
@@ -5291,6 +5311,7 @@ function Table({
     "div",
     {
       ref,
+      "data-ds-list": "",
       className: cn(
         "w-full overflow-x-auto",
         "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -7208,7 +7229,7 @@ function renderIcon(icon) {
   return icon;
 }
 function EmptyState({ icon, iconFrame = "circle", title, description, action, variant = "empty", bordered = false, style: styleProp, className }) {
-  const preferences = usePreferences();
+  const preferences = useShellPreferences();
   const style = styleProp ?? (preferences.emptyStyle === "text-cta" ? "text" : "illustration");
   const iconNode = style === "text" ? void 0 : icon === void 0 || icon === null ? void 0 : renderIcon(icon);
   return /* @__PURE__ */ jsxs(
@@ -7231,9 +7252,6 @@ function EmptyState({ icon, iconFrame = "circle", title, description, action, va
     }
   );
 }
-function initialsOf(name) {
-  return name.trim().split(/\s+/).slice(0, 2).map((w) => w[0] ?? "").join("").toUpperCase();
-}
 function looksLikeUrl(s) {
   return /^(?:https?:|data:|blob:|\/|\.{1,2}\/)/.test(s) || /\.[a-z]{2,5}(?:$|[?#])/i.test(s);
 }
@@ -7289,6 +7307,7 @@ function TableToolbar({
   onClearAll,
   resultCount,
   resultNoun = ["result", "results"],
+  pagination,
   actions,
   size = "sm",
   compactBreakpoint = 680,
@@ -7308,8 +7327,16 @@ function TableToolbar({
   const hasChips = !!activeFilters?.length;
   const inPane = useContext(SplitPaneCtx);
   const searchFills = inPane || !primaryFilter && !filters && !actions;
-  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-3 min-w-0", className), "data-table-toolbar": "", children: [
-    /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex items-center gap-ds-2 flex-wrap", children: [
+  const hasControls = !!(search || primaryFilter || filters || actions);
+  const noun = (n) => n === 1 ? resultNoun[0] : resultNoun[1];
+  const total = resultCount ?? pagination?.totalItems;
+  const grows = !!pagination?.style && pagination.style !== "pagination";
+  const shown = grows ? Math.min(pagination.shown ?? pagination.page * pagination.pageSize, total ?? Infinity) : 0;
+  const paged = total !== void 0 && !!pagination && pagination.pageSize > 0 && total > pagination.pageSize;
+  const countText = total === void 0 ? null : grows ? shown < total ? `Showing ${shown} of ${total} ${noun(total)}` : resultCount !== void 0 ? `${resultCount} ${noun(resultCount)}` : null : paged ? `Showing ${Math.min((pagination.page - 1) * pagination.pageSize + 1, total)}\u2013${Math.min(pagination.page * pagination.pageSize, total)} of ${total} ${noun(total)}` : resultCount !== void 0 ? `${resultCount} ${noun(resultCount)}` : null;
+  if (!hasControls && countText === null && !hasChips) return null;
+  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-3 min-w-0 mb-ds-3 last:mb-0", className), "data-table-toolbar": "", children: [
+    hasControls && /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex items-center gap-ds-2 flex-wrap", children: [
       search && /* @__PURE__ */ jsx(
         Input,
         {
@@ -7362,17 +7389,29 @@ function TableToolbar({
       ] })
     ] }),
     filters && open && /* @__PURE__ */ jsx("div", { id: filterRowId, className: "flex items-center gap-ds-3 flex-wrap", children: filters }),
-    (resultCount !== void 0 || hasChips) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-wrap", children: [
-      resultCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--ds-text-muted)]", "aria-live": "polite", children: [
-        resultCount,
-        " ",
-        resultCount === 1 ? resultNoun[0] : resultNoun[1]
-      ] }),
+    (countText !== null || hasChips) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-wrap", children: [
+      countText !== null && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)]", "aria-live": "polite", "data-result-count": "", children: countText }),
       activeFilters?.map((f) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "subtle", onRemove: f.onRemove, children: f.label }, f.id)),
       hasChips && onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })
     ] })
   ] }) });
 }
+var ICON_TEXT_OFFSET = "calc((2rem - 1.25rem) / 2)";
+function Marker({ item, vertical }) {
+  if (item.icon) {
+    return /* @__PURE__ */ jsx("div", { "data-timeline-icon": "", className: "shrink-0 w-8 h-8 flex items-center justify-center", children: item.icon });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "shrink-0 w-3 h-3 rounded-[var(--ds-radius-full)]",
+        vertical && "mt-ds-1",
+        dotVariant[item.variant ?? "default"]
+      )
+    }
+  );
+}
 var dotVariant = {
   default: "bg-[var(--ds-accent-primary)] shadow-[0_0_0_3px_var(--ds-accent-primary)]/20",
   success: "bg-[var(--ds-status-success)] shadow-[0_0_0_3px_var(--ds-status-success)]/20",
@@ -7421,15 +7460,7 @@ function HorizontalLayout({ items, minItemWidth, className }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "shrink-0 w-3 h-3 rounded-[var(--ds-radius-full)]",
-              dotVariant[item.variant ?? "default"]
-            )
-          }
-        ),
+        /* @__PURE__ */ jsx(Marker, { item, vertical: false }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -7451,18 +7482,10 @@ function HorizontalLayout({ items, minItemWidth, className }) {
 function VerticalLayout({ items, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-ds-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "shrink-0 w-3 h-3 rounded-[var(--ds-radius-full)] mt-ds-1",
-            dotVariant[item.variant ?? "default"]
-          )
-        }
-      ),
+      /* @__PURE__ */ jsx(Marker, { item, vertical: true }),
       i < items.length - 1 && /* @__PURE__ */ jsx("div", { className: "w-[2px] flex-1 bg-[var(--ds-border-subtle)] my-ds-1" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn("pb-ds-6", i === items.length - 1 && "pb-0"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("pb-ds-6 min-w-0", i === items.length - 1 && "pb-0"), style: item.icon ? { paddingTop: ICON_TEXT_OFFSET } : void 0, children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: item.title }),
       item.description && /* @__PURE__ */ jsx(ExpandableDescription, { children: item.description }),
       item.timestamp && /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: item.timestamp })
@@ -7479,7 +7502,7 @@ function Timeline({ items, orientation = "vertical", minItemWidth = 200, classNa
   }, [ref]);
   const fits = width === 0 || width >= items.length * minItemWidth;
   const horizontal = orientation === "horizontal" || orientation === "responsive" && fits;
-  return /* @__PURE__ */ jsx("div", { ref: setRefs, "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) });
+  return /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) });
 }
 var CollapsibleContext = createContext(null);
 function useCollapsible() {
@@ -8397,16 +8420,18 @@ var TOAST_INSET_VARS = {
   "bottom-right": "--ds-toast-inset-bottom-right",
   "bottom-left": "--ds-toast-inset-bottom-left",
   right: "--ds-toast-inset-right",
-  left: "--ds-toast-inset-left"
+  left: "--ds-toast-inset-left",
+  top: "--ds-toast-inset-top"
 };
 var LAUNCHER_INSET_PRIORITY = 1;
 var PANEL_INSET_PRIORITY = 2;
+var NAVBAR_INSET_PRIORITY = 1;
 var registry = /* @__PURE__ */ new WeakMap();
 var seq = 0;
 function claimsFor(target) {
   let entry = registry.get(target);
   if (!entry) {
-    entry = { "bottom-right": [], "bottom-left": [], right: [], left: [] };
+    entry = { "bottom-right": [], "bottom-left": [], right: [], left: [], top: [] };
     registry.set(target, entry);
   }
   return entry;
@@ -8744,6 +8769,7 @@ var StackedList = forwardRef(function StackedList2({
     "ul",
     {
       ref,
+      "data-ds-list": "",
       className: cn(
         divided && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
         className
@@ -9825,11 +9851,50 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
     )
   ] });
 }
-function Pagination({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, className }) {
+function Pagination(props) {
+  if ((props.mode === "load-more" || props.mode === "infinite-scroll") && props.onLoadMore) return /* @__PURE__ */ jsx(LoadMore, { ...props, onLoadMore: props.onLoadMore, scroll: props.mode === "infinite-scroll" });
+  return /* @__PURE__ */ jsx(PageNumbers, { ...props });
+}
+function contentTop(el) {
+  let top = el.getBoundingClientRect().top + window.scrollY;
+  for (let n = el.parentElement; n; n = n.parentElement) top += n.scrollTop;
+  return top;
+}
+function LoadMore({ hasMore, onLoadMore, loadMoreLabel, currentPage, scroll, className }) {
+  const marker = useRef(null);
+  const load = useLatest(onLoadMore);
+  const loadedAt = useRef(null);
+  useEffect(() => {
+    const el = marker.current;
+    if (!scroll || !hasMore || !el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((entries) => {
+      if (!entries.some((e) => e.isIntersecting)) return;
+      const at = contentTop(el);
+      if (loadedAt.current !== null && Math.abs(at - loadedAt.current) < 1) return;
+      loadedAt.current = at;
+      load.current();
+    }, { rootMargin: "200px 0px" });
+    observer.observe(el);
+    const rearm = () => {
+      loadedAt.current = null;
+    };
+    window.addEventListener("scroll", rearm, { capture: true, passive: true });
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("scroll", rearm, { capture: true });
+    };
+  }, [scroll, hasMore, currentPage, load]);
+  if (!hasMore) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-ds-pager": "", "data-pagination-mode": scroll ? "infinite-scroll" : "load-more", className: cn("flex flex-col items-center", className), children: [
+    scroll && /* @__PURE__ */ jsx("div", { ref: marker, "data-load-more-trigger": "", "aria-hidden": "true", className: "h-px w-full" }),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onLoadMore, children: loadMoreLabel ?? "Load more" })
+  ] });
+}
+function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, className }) {
   const pages = buildPageRange(currentPage, totalPages);
-  const preferences = usePreferences();
+  const preferences = useShellPreferences();
   const pageSize = pageSizeProp ?? preferences.itemsPerPage;
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", className: cn("flex flex-wrap items-center gap-ds-3", className), children: [
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", "data-ds-pager": "", className: cn("flex flex-wrap items-center gap-ds-3", className), children: [
     pageSizeOptions && pageSize != null && onPageSizeChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
       /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ds-text-muted)] whitespace-nowrap", children: "Rows per page" }),
       /* @__PURE__ */ jsx(
@@ -12612,6 +12677,31 @@ var Navbar = forwardRef(function Navbar2({
     ro.observe(header);
     return () => ro.disconnect();
   }, [mobileHidesLinks, links]);
+  const [topInset, setTopInset] = useState(null);
+  const shellEl = appShell?.container ?? null;
+  useLayoutEffect(() => {
+    const header = headerRef.current;
+    if (!shellEl || !header) {
+      setTopInset(null);
+      return;
+    }
+    const measure = () => {
+      const shell = shellEl.getBoundingClientRect();
+      const fillsWindow = shell.top <= 1 && shell.height >= window.innerHeight - 1;
+      const bottom = Math.round(header.getBoundingClientRect().bottom);
+      setTopInset(fillsWindow && bottom > 0 ? `calc(${bottom}px + var(--ds-space-3))` : null);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    ro?.observe(header);
+    ro?.observe(shellEl);
+    return () => {
+      window.removeEventListener("resize", measure);
+      ro?.disconnect();
+    };
+  }, [shellEl]);
+  useCornerInset(topInset ? "top" : null, topInset, NAVBAR_INSET_PRIORITY);
   const hidden = useMemo(() => {
     if (visibleCount === null || links.length === 0) return /* @__PURE__ */ new Set();
     return new Set(links.map((_, i) => i).filter((i) => i >= visibleCount));
@@ -12961,7 +13051,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                             }
                           ),
                           description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
-                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children })
+                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) })
                         ] })
                       ] }) }),
                       /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
@@ -13838,11 +13928,11 @@ var variantIcons = {
   error: { name: "error", className: "text-[var(--ds-status-error)]" }
 };
 var TOAST_POSITION_CLASSES = {
-  "top-right": "top-ds-4 right-[var(--ds-toast-inset-right)]",
-  "top-left": "top-ds-4 left-[var(--ds-toast-inset-left)]",
+  "top-right": "top-[var(--ds-toast-inset-top)] right-[var(--ds-toast-inset-right)]",
+  "top-left": "top-[var(--ds-toast-inset-top)] left-[var(--ds-toast-inset-left)]",
   "bottom-right": "bottom-[var(--ds-toast-inset-bottom-right)] right-[var(--ds-toast-inset-right)]",
   "bottom-left": "bottom-[var(--ds-toast-inset-bottom-left)] left-[var(--ds-toast-inset-left)]",
-  "top-center": "top-ds-4 left-1/2 -translate-x-1/2",
+  "top-center": "top-[var(--ds-toast-inset-top)] left-1/2 -translate-x-1/2",
   "bottom-center": "bottom-ds-4 left-1/2 -translate-x-1/2"
 };
 function Toast({ variant = "default", message, visible, onDismiss, duration = 5e3, pauseOnHover = false, action, position = "bottom-right", mode, container, inline = false }) {
@@ -14040,9 +14130,70 @@ function ToastProvider({ children, maxVisible = 1, position = "bottom-right", du
     )
   ] });
 }
+function firstKey(item) {
+  if (item !== null && typeof item === "object") return "id" in item ? item.id : void 0;
+  return item;
+}
+function signature(list, resetOn) {
+  let reset = "";
+  try {
+    reset = JSON.stringify(resetOn ?? null);
+  } catch {
+    reset = String(resetOn);
+  }
+  let first = "";
+  try {
+    first = JSON.stringify(firstKey(list[0]) ?? null);
+  } catch {
+    first = "";
+  }
+  return `${list.length}|${first}|${reset}`;
+}
+function usePagination(list, options = {}) {
+  const shell = useShellPreferences();
+  const style = options.style ?? shell.paginationStyle ?? PREFERENCE_HOUSE_DEFAULTS.paginationStyle;
+  const [chosenSize, setChosenSize] = useState(null);
+  const pageSize = Math.max(1, Math.floor(chosenSize ?? options.pageSize ?? shell.itemsPerPage ?? PREFERENCE_HOUSE_DEFAULTS.itemsPerPage));
+  const [page, setPageState] = useState(1);
+  const sig = signature(list, options.resetOn);
+  const [seen, setSeen] = useState(sig);
+  if (seen !== sig) {
+    setSeen(sig);
+    if (page !== 1) setPageState(1);
+  }
+  const totalItems = list.length;
+  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const current = Math.min(Math.max(1, seen !== sig ? 1 : page), totalPages);
+  const grows = style !== "pagination";
+  const start = grows ? 0 : (current - 1) * pageSize;
+  const items = list.slice(start, current * pageSize);
+  const range = items.length === 0 ? [0, 0] : [start + 1, start + items.length];
+  const hasMore = current < totalPages;
+  const setPage = (next) => setPageState(Math.min(Math.max(1, Math.floor(next)), totalPages));
+  const loadMore = () => setPageState((p) => Math.min(p + 1, totalPages));
+  const setPageSize = (size) => {
+    setChosenSize(Math.max(1, Math.floor(size)));
+    setPageState(1);
+  };
+  return {
+    style,
+    items,
+    page: current,
+    pageSize,
+    totalItems,
+    totalPages,
+    range,
+    shown: items.length,
+    hasMore,
+    loadMore,
+    setPage,
+    setPageSize,
+    props: { currentPage: current, totalPages, onPageChange: setPage, pageSize, onPageSizeChange: setPageSize, mode: style, hasMore, onLoadMore: loadMore }
+  };
+}
 function useDestructiveAction(options) {
   const { action, title, description, confirmLabel, typeToConfirm, onConfirm, onUndo, undoMessage, severity } = options;
-  const preferences = usePreferences();
+  const preferences = useShellPreferences();
   const toast = useToastOptional();
   const [open, setOpen] = useState(false);
   const [typed, setTyped] = useState("");
@@ -14248,6 +14399,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useContentWidth, useDestructiveAction, useFormContext, useSidebar, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useContentWidth, useDestructiveAction, useFormContext, usePagination, useSidebar, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map