@proveanything/smartlinks-utils-ui 0.10.8 → 0.11.0

package/dist/components/RecordsAdmin/index.js

@@ -1,4 +1,4 @@
-import { AdminPageHeader } from '../../chunk-2MW54ZVG.js';
+import { useIntroState, AdminPageHeader } from '../../chunk-BNC6Z6WB.js';
 import { assertComponentStylesLoaded } from '../../chunk-OLYC54YT.js';
 import '../../chunk-5UQQYXCX.js';
 import { FacetRuleEditor } from '../../chunk-JMCV6FOW.js';
@@ -6,12 +6,105 @@ import { useFacets } from '../../chunk-4LHF5JB7.js';
 import { cn } from '../../chunk-L7FQ52F5.js';
 import { parsedRefToTarget, parsedRefToScope, matchRecords, scopesEqual, getRecordById, listRecords, upsertRecord, updateRecord, createRecord, removeRecord } from '../../chunk-KA4MKRHL.js';
 export { bulkDelete, bulkUpsert, createRecord, getRecordById, listRecords, matchRecords, parsedRefToScope, parsedRefToTarget, removeRecord, restoreRecord, scopesEqual, upsertRecord } from '../../chunk-KA4MKRHL.js';
-import { createContext, useState, useEffect, useCallback, useMemo, useRef, useContext, useSyncExternalStore, useLayoutEffect, createElement } from 'react';
-import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, List, SlidersHorizontal, Globe, Tag, Boxes, Layers, Package, Target, Rows3, ChevronRight, Eraser, ClipboardPaste, Box, X, Search, Image, Table, ArrowLeft, ChevronLeft, AlertTriangle, Info, HelpCircle, CornerDownLeft, Circle, CopyPlus, AlertCircle, Undo2, Save, Loader2, XCircle, ArrowRight, Globe2, Check, Settings2 } from 'lucide-react';
+import { createContext, useMemo, useState, useEffect, useCallback, useRef, isValidElement, useContext, useSyncExternalStore, useLayoutEffect, createElement } from 'react';
+import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, List, SlidersHorizontal, Globe, Tag, Boxes, Layers, Package, Target, Rows3, ChevronRight, Eraser, ClipboardPaste, Box, X, Search, Image, Table, ArrowLeft, ChevronLeft, AlertTriangle, Info, HelpCircle, CornerDownLeft, Circle, ArrowUpDown, ArrowUp, ArrowDown, MinusCircle, XCircle, CopyPlus, AlertCircle, Undo2, Save, Loader2, ArrowRight, Globe2, Check, Settings2 } from 'lucide-react';
 import { useQuery, useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
+// src/components/RecordsAdmin/data/recordCache.ts
+var RECORD_LIST_QK = ["records-admin", "list"];
+var COLLECTION_ITEMS_QK = ["records-admin", "collection-items"];
+var matchesCtx = (queryKey, prefix, ctx) => {
+  if (queryKey.length < prefix.length + 3) return false;
+  for (let i = 0; i < prefix.length; i += 1) {
+    if (queryKey[i] !== prefix[i]) return false;
+  }
+  if (queryKey[prefix.length] !== ctx.collectionId) return false;
+  if (queryKey[prefix.length + 1] !== ctx.appId) return false;
+  if (queryKey[prefix.length + 2] !== (ctx.recordType ?? void 0) && queryKey[prefix.length + 2] !== ctx.recordType) {
+    const slot = queryKey[prefix.length + 2];
+    if (slot !== void 0 && slot !== ctx.recordType) return false;
+    if (slot === void 0 && ctx.recordType) return false;
+  }
+  return true;
+};
+var replaceOrAppend = (cache, record) => {
+  let replaced = false;
+  const nextPages = cache.pages.map((page) => {
+    const idx = page.data.findIndex((r) => r.id === record.id);
+    if (idx === -1) return page;
+    replaced = true;
+    const nextData = [...page.data];
+    nextData[idx] = record;
+    return { ...page, data: nextData };
+  });
+  if (replaced) return { ...cache, pages: nextPages };
+  if (nextPages.length === 0) {
+    return {
+      pageParams: [0],
+      pages: [{ data: [record], total: 1, hasMore: false, nextOffset: 1 }]
+    };
+  }
+  const last = nextPages[nextPages.length - 1];
+  const updatedLast = {
+    ...last,
+    data: [...last.data, record],
+    total: (last.total ?? 0) + 1,
+    nextOffset: (last.nextOffset ?? last.data.length) + 1
+  };
+  const bumped = nextPages.map((p, i) => i === nextPages.length - 1 ? updatedLast : { ...p, total: (p.total ?? 0) + 1 });
+  return { ...cache, pages: bumped };
+};
+var removeFromPages = (cache, recordId) => {
+  let found = false;
+  const nextPages = cache.pages.map((page) => {
+    const idx = page.data.findIndex((r) => r.id === recordId);
+    if (idx === -1) return page;
+    found = true;
+    return {
+      ...page,
+      data: page.data.filter((r) => r.id !== recordId),
+      total: Math.max(0, (page.total ?? 0) - 1)
+    };
+  });
+  if (!found) return null;
+  const bumped = nextPages.map((p) => p.data.some((r) => r.id === recordId) ? p : { ...p, total: Math.max(0, p.total ?? 0) });
+  return { ...cache, pages: bumped };
+};
+function patchRecordIntoCaches(queryClient, ctx, record) {
+  if (!record || !record.id) return;
+  const all = [
+    ...queryClient.getQueriesData({ queryKey: RECORD_LIST_QK }),
+    ...queryClient.getQueriesData({ queryKey: COLLECTION_ITEMS_QK })
+  ];
+  for (const [key, cache] of all) {
+    if (!cache || !Array.isArray(cache.pages)) continue;
+    const prefix = key[0] === RECORD_LIST_QK[0] && key[1] === RECORD_LIST_QK[1] ? RECORD_LIST_QK : COLLECTION_ITEMS_QK;
+    if (!matchesCtx(key, prefix, ctx)) continue;
+    queryClient.setQueryData(key, (prev) => {
+      if (!prev || !Array.isArray(prev.pages)) return prev;
+      return replaceOrAppend(prev, record);
+    });
+  }
+}
+function removeRecordFromCaches(queryClient, ctx, recordId) {
+  if (!recordId) return;
+  const all = [
+    ...queryClient.getQueriesData({ queryKey: RECORD_LIST_QK }),
+    ...queryClient.getQueriesData({ queryKey: COLLECTION_ITEMS_QK })
+  ];
+  for (const [key, cache] of all) {
+    if (!cache || !Array.isArray(cache.pages)) continue;
+    const prefix = key[0] === RECORD_LIST_QK[0] && key[1] === RECORD_LIST_QK[1] ? RECORD_LIST_QK : COLLECTION_ITEMS_QK;
+    if (!matchesCtx(key, prefix, ctx)) continue;
+    queryClient.setQueryData(key, (prev) => {
+      if (!prev || !Array.isArray(prev.pages)) return prev;
+      const next = removeFromPages(prev, recordId);
+      return next ?? prev;
+    });
+  }
+}
 var DEFAULT_ICONS = {
   scope: {
     collection: Globe,
@@ -412,58 +505,12 @@ function useResolvedRecord(args) {
     error: query.error ?? null
   };
 }
-var RT_KEY = (recordType) => recordType ?? "_default";
-var lsKey = (appId, recordType) => `ra:intro:${appId}:${RT_KEY(recordType)}`;
-var useIntroDismissed = (SL, collectionId, appId, recordType) => {
-  const [dismissed, setDismissed] = useState(() => {
-    try {
-      return localStorage.getItem(lsKey(appId, recordType)) === "1";
-    } catch {
-      return false;
-    }
-  });
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const cfg = await SL?.appConfiguration?.getConfig?.({ collectionId, appId, admin: true });
-        if (cancelled) return;
-        const flag = cfg?._meta?.introDismissed?.[RT_KEY(recordType)];
-        if (flag) setDismissed(true);
-      } catch {
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [SL, collectionId, appId, recordType]);
-  const dismiss = useCallback(async () => {
-    setDismissed(true);
-    try {
-      localStorage.setItem(lsKey(appId, recordType), "1");
-    } catch {
-    }
-    try {
-      const cfg = await SL?.appConfiguration?.getConfig?.({ collectionId, appId, admin: true }).catch(() => ({}));
-      const next = {
-        ...cfg ?? {},
-        _meta: {
-          ...cfg?._meta ?? {},
-          introDismissed: { ...cfg?._meta?.introDismissed ?? {}, [RT_KEY(recordType)]: true }
-        }
-      };
-      await SL?.appConfiguration?.setConfig?.({ collectionId, appId, admin: true, config: next });
-    } catch {
-    }
-  }, [SL, collectionId, appId, recordType]);
-  const undismiss = useCallback(() => {
-    setDismissed(false);
-    try {
-      localStorage.removeItem(lsKey(appId, recordType));
-    } catch {
-    }
-  }, [appId, recordType]);
-  return { dismissed, dismiss, undismiss };
+
+// src/components/RecordsAdmin/hooks/useIntroDismissed.ts
+var useIntroDismissed = (SL, _collectionId, appId, recordType) => {
+  const persistKey = recordType ? `${appId}:${recordType}` : appId;
+  const { dismissed, onDismiss, onReopen } = useIntroState({ SL, persistKey });
+  return { dismissed, dismiss: onDismiss, undismiss: onReopen };
 };
 var useScopeProbe = ({ SL, collectionId, admin = true, enabled = true }) => {
   const query = useQuery({
@@ -1055,7 +1102,8 @@ function useShellBrowser(opts) {
     probeIsLoading,
     selectedProductId,
     drillTab,
-    classify: classify3
+    classify: classify3,
+    pageSize
   } = opts;
   const [search, setSearch] = useState("");
   const [filter, setFilter] = useState("all");
@@ -1081,7 +1129,8 @@ function useShellBrowser(opts) {
     filter,
     classify: classify3,
     contextScope,
-    enabled: recordListEnabled
+    enabled: recordListEnabled,
+    pageSize
   });
   const facetBrowse = useFacetBrowse({
     SL,
@@ -2352,6 +2401,7 @@ var createEditorStore = () => {
   let nextOrder = 0;
   let hooksBundle = null;
   let notifier = null;
+  let recordChangeNotifier = null;
   const buildRecordSummary = (entry, value) => ({
     id: entry.recordId ?? null,
     ref: entry.spec.scope.raw,
@@ -2557,8 +2607,9 @@ var createEditorStore = () => {
       });
       try {
         let nextRecordId = entry.recordId;
+        let savedRecord = null;
         if (entry.recordId && entry.source === "self") {
-          await updateRecord(ctx, entry.recordId, {
+          savedRecord = await updateRecord(ctx, entry.recordId, {
             data: persistedValue,
             facetRule: persistedFacetRule
           });
@@ -2577,6 +2628,7 @@ var createEditorStore = () => {
             facetRule: persistedFacetRule
           });
           nextRecordId = created?.id ?? nextRecordId;
+          savedRecord = created;
         } else {
           const upserted = await upsertRecord(ctx, {
             ref: spec.ref,
@@ -2585,6 +2637,7 @@ var createEditorStore = () => {
             facetRule: persistedFacetRule
           });
           nextRecordId = upserted.record?.id ?? nextRecordId;
+          savedRecord = upserted.record;
         }
         update(editorId, (e) => {
           if (persistedValue !== entry.value) {
@@ -2597,6 +2650,12 @@ var createEditorStore = () => {
           e.status = "saved";
           e.error = void 0;
         });
+        if (savedRecord && savedRecord.id) {
+          try {
+            recordChangeNotifier?.({ kind: "saved", record: savedRecord, isCreate, ctx });
+          } catch {
+          }
+        }
         if (hooksBundle?.afterSave) {
           const refreshed = map.get(editorId);
           const hookCtx = {
@@ -2654,6 +2713,10 @@ var createEditorStore = () => {
       await removeRecord(entry.saveSpec.ctx, entry.recordId);
       map.delete(editorId);
       emit();
+      try {
+        recordChangeNotifier?.({ kind: "deleted", recordId: entry.recordId, ctx: entry.saveSpec.ctx });
+      } catch {
+      }
       if (hooksBundle?.afterDelete && deletedSnapshot) {
         try {
           await hooksBundle.afterDelete(deletedSnapshot);
@@ -2688,6 +2751,9 @@ var createEditorStore = () => {
     },
     setNotifier(notify2) {
       notifier = notify2 ?? null;
+    },
+    setRecordChangeNotifier(notify2) {
+      recordChangeNotifier = notify2 ?? null;
     }
   };
 };
@@ -2711,12 +2777,14 @@ var EditorSessionProvider = ({
   maxOpenEditors = 8,
   defaultValueFactory,
   hooks,
-  onHookNotice
+  onHookNotice,
+  onRecordChange
 }) => {
   const storeRef = useRef(null);
   if (!storeRef.current) storeRef.current = createEditorStore();
   storeRef.current.setHooks(hooks ?? null);
   storeRef.current.setNotifier(onHookNotice ?? null);
+  storeRef.current.setRecordChangeNotifier(onRecordChange ?? null);
   const currentRef = useRef(void 0);
   const listenersRef = useRef(/* @__PURE__ */ new Set());
   const subscribeCurrent = useCallback((cb) => {
@@ -3250,7 +3318,43 @@ var resolveTone = (source, status) => {
   if (source === "inherited" || status === "partial") return "shared";
   return "missing";
 };
-var StatusIcon = ({ source, status, className, size = "1.05rem", label }) => {
+var SEMANTIC_DEFAULT_ICONS = {
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  danger: XCircle,
+  muted: MinusCircle,
+  info: Info
+};
+var StatusIcon = ({
+  source,
+  status,
+  className,
+  size = "1.05rem",
+  label,
+  iconHint,
+  semanticTone
+}) => {
+  if (semanticTone || iconHint) {
+    const toneClass = semanticTone && semanticTone !== "default" ? `ra-status-icon--${semanticTone}` : "ra-status-icon--muted";
+    let content;
+    if (iconHint) {
+      content = isValidElement(iconHint) ? iconHint : /* @__PURE__ */ jsx(Fragment, { children: iconHint });
+    } else {
+      const Icon2 = semanticTone && semanticTone !== "default" ? SEMANTIC_DEFAULT_ICONS[semanticTone] : MinusCircle;
+      content = /* @__PURE__ */ jsx(Icon2, { className: "w-full h-full" });
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("ra-status-icon", toneClass, className),
+        style: { width: size, height: size },
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : "true",
+        children: content
+      }
+    );
+  }
   const tone = resolveTone(source, status);
   const Icon = DEFAULT_ICONS.status[tone === "own" ? "own" : tone === "shared" ? "inherited" : "missing"];
   return /* @__PURE__ */ jsx(
@@ -3483,7 +3587,9 @@ var DefaultRecordRow = ({ record, ctx, compact = false }) => {
             StatusIcon,
             {
               status: record.status,
-              label: statusToneLabel(tone)
+              label: statusToneLabel(tone),
+              iconHint: record.iconHint,
+              semanticTone: record.toneHint
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "ra-row-body", children: [
@@ -3711,6 +3817,56 @@ var ProductList = RecordList;
 var FacetList = RecordList;
 var VariantList = RecordList;
 var BatchList = RecordList;
+function LoadMoreFooter({
+  shown,
+  total,
+  hasNextPage,
+  isFetchingNextPage,
+  onLoadMore,
+  label
+}) {
+  if (!hasNextPage && (total === void 0 || total <= shown)) return null;
+  const knownTotal = typeof total === "number" && total >= shown;
+  const summary = knownTotal ? `Showing ${shown} of ${total}` : `${shown} shown`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ra-loadmore",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "8px 12px",
+        borderTop: "1px solid hsl(var(--ra-border))",
+        background: "hsl(var(--ra-surface))"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: "11px",
+              color: "hsl(var(--ra-muted-text))",
+              flex: 1
+            },
+            children: summary
+          }
+        ),
+        hasNextPage && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onLoadMore,
+            disabled: isFetchingNextPage,
+            className: "ra-btn",
+            style: { fontSize: "11px", padding: "4px 10px" },
+            children: isFetchingNextPage ? "Loading\u2026" : label ?? "Load more"
+          }
+        )
+      ]
+    }
+  );
+}
 var COLLAPSED_FACET_CAP = 6;
 var COLLAPSED_VALUE_CAP = 12;
 var VALUE_SEARCH_THRESHOLD = 12;
@@ -5621,18 +5777,52 @@ function DefaultItemTable({
   selectedId,
   onOpen,
   onDelete,
+  sort,
+  onToggleSort,
   rowActions,
   rowClipboard,
   i18n
 }) {
   const cols = columns ?? [];
   const useFallback = cols.length === 0;
+  const renderSortIcon = (key, sortable) => {
+    if (!sortable) return null;
+    if (sort?.key !== key || !sort?.dir) {
+      return /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-40", "aria-hidden": "true" });
+    }
+    return sort.dir === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3", "aria-hidden": "true" });
+  };
   return /* @__PURE__ */ jsx("div", { className: "ra-item-table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "ra-item-table", children: [
     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
       useFallback ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("th", { children: i18n.itemColumnLabel }),
-        /* @__PURE__ */ jsx("th", { style: { width: "12rem" }, children: i18n.itemColumnUpdated })
-      ] }) : cols.map((c) => /* @__PURE__ */ jsx("th", { style: { width: c.width, textAlign: c.align ?? "left" }, children: c.header }, c.key)),
+        /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx(
+          SortableHeader,
+          {
+            label: i18n.itemColumnLabel,
+            sortable: !!onToggleSort,
+            icon: renderSortIcon("__label", !!onToggleSort),
+            onClick: () => onToggleSort?.("__label")
+          }
+        ) }),
+        /* @__PURE__ */ jsx("th", { style: { width: "12rem" }, children: /* @__PURE__ */ jsx(
+          SortableHeader,
+          {
+            label: i18n.itemColumnUpdated,
+            sortable: !!onToggleSort,
+            icon: renderSortIcon("__updated", !!onToggleSort),
+            onClick: () => onToggleSort?.("__updated")
+          }
+        ) })
+      ] }) : cols.map((c) => /* @__PURE__ */ jsx("th", { style: { width: c.width, textAlign: c.align ?? "left" }, children: /* @__PURE__ */ jsx(
+        SortableHeader,
+        {
+          label: c.header,
+          sortable: !!c.sortBy && !!onToggleSort,
+          icon: renderSortIcon(c.key, !!c.sortBy && !!onToggleSort),
+          onClick: () => onToggleSort?.(c.key),
+          align: c.align ?? "left"
+        }
+      ) }, c.key)),
       /* @__PURE__ */ jsx(
         "th",
         {
@@ -5720,6 +5910,39 @@ function DefaultItemTable({
     }) })
   ] }) });
 }
+function SortableHeader({
+  label,
+  sortable,
+  icon,
+  onClick,
+  align = "left"
+}) {
+  if (!sortable) return /* @__PURE__ */ jsx(Fragment, { children: label });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "ra-item-th-sort",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        background: "transparent",
+        border: 0,
+        padding: 0,
+        font: "inherit",
+        color: "inherit",
+        cursor: "pointer",
+        textAlign: align
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        icon
+      ]
+    }
+  );
+}
 var initials = (label) => label.split(/\s+/).slice(0, 2).map((s) => s[0]?.toUpperCase() ?? "").join("") || "?";
 function DefaultItemCards({
   items,
@@ -5834,9 +6057,75 @@ function ItemListView({
   cardSize = "md",
   rowActions,
   rowClipboard,
+  searchableFields,
+  searchable = true,
+  total,
+  hasNextPage,
+  isFetchingNextPage,
+  onLoadMore,
   i18n
 }) {
   const newLabel = i18n.newItem.includes("{noun}") ? i18n.newItem.replace("{noun}", itemNoun) : i18n.newItem;
+  const [search, setSearch] = useState("");
+  const [sort, setSort] = useState({ key: null, dir: null });
+  const onToggleSort = (key) => {
+    setSort((cur) => {
+      if (cur.key !== key) return { key, dir: "asc" };
+      const next = cur.dir === "asc" ? "desc" : cur.dir === "desc" ? null : "asc";
+      return { key: next ? key : null, dir: next };
+    });
+  };
+  const wantsFullSet = search.trim().length > 0 || sort.dir !== null;
+  const loadingNextRef = useRef(false);
+  useEffect(() => {
+    if (!wantsFullSet || !hasNextPage || !onLoadMore) return;
+    if (isFetchingNextPage || loadingNextRef.current) return;
+    loadingNextRef.current = true;
+    onLoadMore();
+  }, [wantsFullSet, hasNextPage, onLoadMore, isFetchingNextPage]);
+  useEffect(() => {
+    if (!isFetchingNextPage) loadingNextRef.current = false;
+  }, [isFetchingNextPage]);
+  const lookupColumn = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    (itemColumns ?? []).forEach((c) => m.set(c.key, c));
+    return m;
+  }, [itemColumns]);
+  const visibleItems = useMemo(() => {
+    let out = items;
+    const q = search.trim().toLowerCase();
+    if (q) {
+      out = out.filter((it) => {
+        const fields = [it.label, it.subtitle];
+        if (searchableFields) fields.push(...searchableFields(it));
+        return fields.some((f) => typeof f === "string" && f.toLowerCase().includes(q));
+      });
+    }
+    if (sort.key && sort.dir) {
+      const dir = sort.dir === "asc" ? 1 : -1;
+      const getter = (it) => {
+        if (sort.key === "__label") return it.label;
+        if (sort.key === "__updated") return it.updatedAt;
+        const col = lookupColumn.get(sort.key);
+        return col?.sortBy ? col.sortBy(it) : void 0;
+      };
+      const norm = (v) => {
+        if (v == null) return Number.POSITIVE_INFINITY;
+        if (v instanceof Date) return v.getTime();
+        if (typeof v === "boolean") return v ? 1 : 0;
+        if (typeof v === "number") return v;
+        return String(v).toLowerCase();
+      };
+      out = [...out].sort((a, b) => {
+        const av = norm(getter(a));
+        const bv = norm(getter(b));
+        if (av < bv) return -1 * dir;
+        if (av > bv) return 1 * dir;
+        return 0;
+      });
+    }
+    return out;
+  }, [items, search, sort, lookupColumn, searchableFields]);
   const [pendingDeleteId, setPendingDeleteId] = useState(null);
   const pendingRecord = useMemo(
     () => pendingDeleteId ? items.find((it) => (it.itemId ?? "") === pendingDeleteId) ?? null : null,
@@ -5851,9 +6140,62 @@ function ItemListView({
   const toolbar = /* @__PURE__ */ jsxs("div", { className: "ra-item-toolbar", children: [
     /* @__PURE__ */ jsxs("div", { className: "ra-item-toolbar-title", children: [
       /* @__PURE__ */ jsx("h2", { className: "ra-display", style: { fontSize: "0.95rem", margin: 0 }, children: i18n.itemListTitle }),
-      /* @__PURE__ */ jsx("span", { className: "ra-item-toolbar-count", children: items.length })
+      /* @__PURE__ */ jsx("span", { className: "ra-item-toolbar-count", children: visibleItems.length === items.length ? items.length : `${visibleItems.length} / ${items.length}` })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ra-item-toolbar-actions", children: [
+      searchable && items.length > 0 && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "ra-item-search",
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "6px",
+            padding: "4px 8px",
+            border: "1px solid hsl(var(--ra-border))",
+            borderRadius: "6px",
+            background: "hsl(var(--ra-surface))"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Search, { className: "w-3.5 h-3.5", "aria-hidden": "true", style: { opacity: 0.6 } }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                placeholder: `Search ${itemNoun}s`,
+                "aria-label": `Search ${itemNoun}s`,
+                style: {
+                  background: "transparent",
+                  border: 0,
+                  outline: "none",
+                  font: "inherit",
+                  fontSize: "12px",
+                  color: "inherit",
+                  width: "160px"
+                }
+              }
+            ),
+            search && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSearch(""),
+                "aria-label": "Clear search",
+                style: {
+                  background: "transparent",
+                  border: 0,
+                  padding: 0,
+                  cursor: "pointer",
+                  color: "hsl(var(--ra-muted-text))"
+                },
+                children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5", "aria-hidden": "true" })
+              }
+            )
+          ]
+        }
+      ),
       !renderItemList && /* @__PURE__ */ jsx(
         ItemViewSwitcher,
         {
@@ -5904,17 +6246,27 @@ function ItemListView({
         )
       }
     );
+  } else if (visibleItems.length === 0) {
+    body = /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No matches",
+        body: `No ${itemNoun}s match "${search}".`
+      }
+    );
   } else if (renderItemList) {
-    body = renderItemList(items, guardedCtx);
+    body = renderItemList(visibleItems, guardedCtx);
   } else if (view === "table") {
     body = /* @__PURE__ */ jsx(
       DefaultItemTable,
       {
-        items,
+        items: visibleItems,
         columns: itemColumns,
         selectedId: guardedCtx.selectedId,
         onOpen: guardedCtx.onOpen,
         onDelete: guardedCtx.onDelete,
+        sort,
+        onToggleSort,
         rowActions,
         rowClipboard,
         i18n
@@ -5924,7 +6276,7 @@ function ItemListView({
     body = /* @__PURE__ */ jsx(
       DefaultItemCards,
       {
-        items,
+        items: visibleItems,
         variant: view,
         selectedId: guardedCtx.selectedId,
         ctx: guardedCtx,
@@ -5960,6 +6312,29 @@ function ItemListView({
       }
     ) : null,
     /* @__PURE__ */ jsx("div", { className: "ra-item-list-body", children: body }),
+    wantsFullSet && hasNextPage && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "6px 12px",
+          fontSize: "11px",
+          color: "hsl(var(--ra-muted-text))",
+          borderTop: "1px solid hsl(var(--ra-border))",
+          background: "hsl(var(--ra-muted) / 0.4)"
+        },
+        children: isFetchingNextPage ? `Loading more ${itemNoun}s to ${search ? "search" : "sort"}\u2026` : `${search ? "Searching" : "Sorting"} the ${items.length} ${itemNoun}s loaded so far. More available \u2014 keep loading for the full set.`
+      }
+    ),
+    onLoadMore && /* @__PURE__ */ jsx(
+      LoadMoreFooter,
+      {
+        shown: items.length,
+        total,
+        hasNextPage: !!hasNextPage,
+        isFetchingNextPage: !!isFetchingNextPage,
+        onLoadMore
+      }
+    ),
     /* @__PURE__ */ jsx(
       ConfirmDialog,
       {
@@ -6048,7 +6423,11 @@ function SiblingRail({
   itemNoun,
   dirtyKeys,
   errorKeys,
-  i18n
+  i18n,
+  total,
+  hasNextPage,
+  isFetchingNextPage,
+  onLoadMore
 }) {
   const ruleLabelLookup = useRuleLabelLookup();
   const newLabel = i18n.newItem.includes("{noun}") ? i18n.newItem.replace("{noun}", itemNoun ?? "item") : i18n.newItem;
@@ -6128,6 +6507,16 @@ function SiblingRail({
         ) }, key);
       }) })
     ] }),
+    onLoadMore && /* @__PURE__ */ jsx(
+      LoadMoreFooter,
+      {
+        shown: items.length,
+        total,
+        hasNextPage: !!hasNextPage,
+        isFetchingNextPage: !!isFetchingNextPage,
+        onLoadMore
+      }
+    ),
     onCreate && /* @__PURE__ */ jsx("div", { className: "ra-sibling-footer", children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -7296,12 +7685,17 @@ function RecordsAdminShell(props) {
     }),
     [props.SL, props.collectionId, props.appId, props.recordType]
   );
+  const recordChangeRef = useRef(null);
+  const onRecordChange = useCallback((notice) => {
+    recordChangeRef.current?.(notice);
+  }, []);
   return /* @__PURE__ */ jsx(
     EditorSessionProvider,
     {
       ctx,
       defaultValueFactory: props.defaultData,
       hooks: props.hooks,
+      onRecordChange,
       onHookNotice: (notice) => {
         console.warn(`[RecordsAdmin] ${notice.kind} hook failed`, notice.error);
         try {
@@ -7314,7 +7708,7 @@ function RecordsAdminShell(props) {
         } catch {
         }
       },
-      children: /* @__PURE__ */ jsx(RecordsAdminShellInner, { ...props })
+      children: /* @__PURE__ */ jsx(RecordsAdminShellInner, { ...props, recordChangeRef })
     }
   );
 }
@@ -7347,7 +7741,8 @@ function RecordsAdminShellInner(props) {
     recordActions,
     icons: iconsOverride,
     // Deep linking
-    deepLink
+    deepLink,
+    recordChangeRef
   } = props;
   const {
     show: showHeader,
@@ -7374,7 +7769,8 @@ function RecordsAdminShellInner(props) {
     groupBy,
     defaultGroupKey,
     onGroupExpanded,
-    density = "comfortable"
+    density = "comfortable",
+    pageSize: railPageSize
   } = rail ?? {};
   const {
     tabs: editorTabs = "off",
@@ -7396,7 +7792,11 @@ function RecordsAdminShellInner(props) {
     renderCard: renderItemCard,
     renderEmpty: renderItemEmpty,
     cardSize: itemCardSize = "md",
-    railMode: collectionRailMode = "siblings"
+    railMode: collectionRailMode = "siblings",
+    toSummary: itemToSummary,
+    pageSize: itemsPageSize,
+    searchableFields: itemsSearchableFields,
+    searchable: itemsSearchable
   } = items ?? {};
   const {
     strategy: dirtyStrategy = "keep",
@@ -7456,6 +7856,21 @@ function RecordsAdminShellInner(props) {
     [SL, collectionId, appId, recordType]
   );
   const queryClient = useQueryClient();
+  useEffect(() => {
+    recordChangeRef.current = (notice) => {
+      if (notice.kind === "saved") {
+        patchRecordIntoCaches(queryClient, notice.ctx, notice.record);
+      } else {
+        removeRecordFromCaches(queryClient, notice.ctx, notice.recordId);
+      }
+      queryClient.invalidateQueries({
+        queryKey: scopeCountsQueryKey(notice.ctx.collectionId, notice.ctx.appId, notice.ctx.recordType)
+      });
+    };
+    return () => {
+      recordChangeRef.current = null;
+    };
+  }, [queryClient, recordChangeRef]);
   const probe = useScopeProbe({ SL, collectionId });
   const scopeCounts = useScopeCounts({ ctx });
   const topLevelScopes = useMemo(() => {
@@ -7538,7 +7953,8 @@ function RecordsAdminShellInner(props) {
     probeIsLoading: probe.isLoading,
     selectedProductId,
     drillTab,
-    classify: classify3
+    classify: classify3,
+    pageSize: railPageSize
   });
   const {
     search,
@@ -7618,7 +8034,9 @@ function RecordsAdminShellInner(props) {
     // record across the whole collection (anchored, ruled, global) so
     // host-supplied lifecycle grouping has the full picture.
     includeAll: isCollection && activeScope === "all",
-    enabled: isCollection
+    enabled: isCollection,
+    toSummary: itemToSummary,
+    pageSize: itemsPageSize
   });
   useEffect(() => {
     if (skipNextItemResetRef.current) {
@@ -7627,6 +8045,36 @@ function RecordsAdminShellInner(props) {
     }
     setSelectedItemId(null);
   }, [editingScope?.raw]);
+  const isLifecycleRailEarly = (activeScope === "all" || activeScope === "collection") && isCollection && !!groupBy;
+  const lifecycleBucketLabel = useMemo(() => {
+    if (!isLifecycleRailEarly || !selectedLifecycleKey || !groupBy) return null;
+    for (const it of collectionItems.items) {
+      const g = groupBy(it);
+      if (g && g.key === selectedLifecycleKey) return g.label ?? null;
+    }
+    return null;
+  }, [isLifecycleRailEarly, selectedLifecycleKey, groupBy, collectionItems.items]);
+  const scopedCollectionItemsList = useMemo(() => {
+    if (!isLifecycleRailEarly || !selectedLifecycleKey || !groupBy) return collectionItems.items;
+    return collectionItems.items.filter((it) => {
+      const g = groupBy(it);
+      return g?.key === selectedLifecycleKey;
+    });
+  }, [isLifecycleRailEarly, selectedLifecycleKey, groupBy, collectionItems.items]);
+  useEffect(() => {
+    if (!isLifecycleRailEarly || !groupBy) return;
+    if (selectedLifecycleKey || !selectedItemId) return;
+    const row = collectionItems.items.find(
+      (it) => it.itemId === selectedItemId || it.id === selectedItemId
+    );
+    if (!row) return;
+    const g = groupBy(row);
+    if (g?.key) setSelectedLifecycleKey(g.key);
+  }, [isLifecycleRailEarly, groupBy, selectedItemId, selectedLifecycleKey, collectionItems.items, setSelectedLifecycleKey]);
+  const scopedCollectionItems = useMemo(() => ({
+    ...collectionItems,
+    items: scopedCollectionItemsList
+  }), [collectionItems, scopedCollectionItemsList]);
   const { lastAppliedDLRef } = useShellDeepLink({
     deepLinkState,
     editingScope,
@@ -7729,7 +8177,6 @@ function RecordsAdminShellInner(props) {
       if (isCreate && isCollection && savedRecordId && isDraftId3(selectedItemId)) {
         setSelectedItemId(savedRecordId);
       }
-      await refetchAll();
       if (!isCollection && isCreate && activeScope === "collection") {
         setSelectedRecordId(savedRecordId ?? null);
       }
@@ -7748,7 +8195,6 @@ function RecordsAdminShellInner(props) {
         setSelectedRecordId(null);
         setDraftKind(null);
       }
-      await refetchAll();
       setIsReconcilingRecordSelection(false);
     }
   });
@@ -7914,7 +8360,7 @@ function RecordsAdminShellInner(props) {
     setSelectedItemId,
     editingScope,
     baseScopeRef,
-    collectionItems,
+    collectionItems: scopedCollectionItems,
     queryClient,
     ctx,
     collectionId,
@@ -8404,8 +8850,11 @@ function RecordsAdminShellInner(props) {
         status: b.items.length ? "configured" : "empty",
         label: b.label,
         subtitle: `${b.items.length} ${itemNoun}${b.items.length === 1 ? "" : "s"}`,
-        // Tone surfaces as a chip; we reuse `badges` for that.
-        badges: b.tone && b.tone !== "default" ? [{ label: b.tone, tone: b.tone === "success" ? "success" : b.tone === "warning" ? "warning" : b.tone === "danger" ? "danger" : "neutral" }] : void 0
+        // Tone + icon drive the row's leading status icon (replacing the
+        // generic green tick / dotted circle for these synthetic rows).
+        // Hosts can override the icon entirely via `groupBy(...).icon`.
+        iconHint: b.icon,
+        toneHint: b.tone
       });
     }
     return rows;
@@ -8627,7 +9076,7 @@ function RecordsAdminShellInner(props) {
               !railHidden && /* @__PURE__ */ jsx("aside", { className: "border-r overflow-hidden flex flex-col", style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" }, children: isCollection && selectedItemId && collectionRailMode === "siblings" && ruleWizardStep === null ? /* @__PURE__ */ jsx(
                 SiblingRail,
                 {
-                  items: collectionItems.items,
+                  items: scopedCollectionItemsList,
                   selectedItemId,
                   isLoading: collectionItems.isLoading,
                   error: collectionItems.error,
@@ -8637,8 +9086,13 @@ function RecordsAdminShellInner(props) {
                   itemNoun: itemNounLabel,
                   dirtyKeys,
                   errorKeys,
-                  contextKind: activeScope === "rule" ? "Rule" : activeScope === "product" ? "Product" : activeScope === "collection" ? "Global" : activeScope === "all" ? "All records" : activeScope === "variant" ? "Variant" : activeScope === "batch" ? "Batch" : activeScope === "facet" ? "Facet" : void 0,
-                  contextSummary: activeScope === "rule" ? activeRuleSummary : activeScope === "product" ? editorHeaderLabel ?? null : null,
+                  hasNextPage: !!collectionItems.hasNextPage,
+                  isFetchingNextPage: !!collectionItems.isFetchingNextPage,
+                  onLoadMore: () => {
+                    void collectionItems.fetchNextPage();
+                  },
+                  contextKind: isLifecycleRailEarly && lifecycleBucketLabel ? lifecycleBucketLabel : activeScope === "rule" ? "Rule" : activeScope === "product" ? "Product" : activeScope === "collection" ? "Global" : activeScope === "all" ? "All records" : activeScope === "variant" ? "Variant" : activeScope === "batch" ? "Batch" : activeScope === "facet" ? "Facet" : void 0,
+                  contextSummary: isLifecycleRailEarly && lifecycleBucketLabel ? `${scopedCollectionItemsList.length} ${itemNounLabel}${scopedCollectionItemsList.length === 1 ? "" : "s"}` : activeScope === "rule" ? activeRuleSummary : activeScope === "product" ? editorHeaderLabel ?? null : null,
                   i18n
                 }
               ) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8816,19 +9270,29 @@ function RecordsAdminShellInner(props) {
                         i18n
                       }
                     ),
-                    isProductTab && !productPinned && productBrowse.hasNextPage && /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
-                      "button",
+                    isProductTab && !productPinned && /* @__PURE__ */ jsx(
+                      LoadMoreFooter,
                       {
-                        type: "button",
-                        onClick: () => {
+                        shown: leftItems.length,
+                        hasNextPage: !!productBrowse.hasNextPage,
+                        isFetchingNextPage: !!productBrowse.isFetchingNextPage,
+                        onLoadMore: () => {
                           void productBrowse.fetchNextPage();
-                        },
-                        disabled: productBrowse.isFetchingNextPage,
-                        className: "w-full text-xs py-2 rounded-md border transition-opacity disabled:opacity-50 hover:bg-[hsl(var(--ra-muted))]",
-                        style: { borderColor: "hsl(var(--ra-border))", color: "hsl(var(--ra-text))" },
-                        children: productBrowse.isFetchingNextPage ? "Loading\u2026" : `Load more (${leftItems.length} shown)`
+                        }
                       }
-                    ) })
+                    ),
+                    isRecordsTab && (!isCollection || !(isAllTab || isGlobalTab)) && /* @__PURE__ */ jsx(
+                      LoadMoreFooter,
+                      {
+                        shown: recordList.items.length,
+                        total: recordList.total,
+                        hasNextPage: !!recordList.hasNextPage,
+                        isFetchingNextPage: !!recordList.isFetchingNextPage,
+                        onLoadMore: () => {
+                          void recordList.fetchNextPage();
+                        }
+                      }
+                    )
                   ] })
                 ] }) })
               ] }) }),
@@ -8913,6 +9377,14 @@ function RecordsAdminShellInner(props) {
                     ruleSummary: activeRuleSummary,
                     rowActions: wrappedRecordActions,
                     rowClipboard,
+                    searchableFields: itemsSearchableFields,
+                    searchable: itemsSearchable,
+                    total: collectionItems.total,
+                    hasNextPage: !!collectionItems.hasNextPage,
+                    isFetchingNextPage: !!collectionItems.isFetchingNextPage,
+                    onLoadMore: () => {
+                      void collectionItems.fetchNextPage();
+                    },
                     i18n
                   }
                 ),