@proveanything/smartlinks-utils-ui 0.12.6 → 0.12.8

package/dist/components/RecordsAdmin/index.js

@@ -1,13 +1,13 @@
+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 { useIntroState, AdminPageHeader } from '../../chunk-3RRHM4LP.js';
-import { assertComponentStylesLoaded } from '../../chunk-OLYC54YT.js';
-import '../../chunk-5UQQYXCX.js';
 import { FacetRuleEditor } from '../../chunk-JMCV6FOW.js';
 import { useFacets } from '../../chunk-4LHF5JB7.js';
+import { assertComponentStylesLoaded } from '../../chunk-OLYC54YT.js';
+import '../../chunk-5UQQYXCX.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, useMemo, useState, useEffect, useCallback, useRef, isValidElement, useLayoutEffect, useContext, useSyncExternalStore, 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, Check, Rows3, ChevronRight, Eraser, FilePlus2, CopyPlus, ClipboardPaste, Box, X, Search, Image, Table, ArrowLeft, ChevronLeft, AlertTriangle, Info, HelpCircle, CornerDownLeft, Circle, ArrowUpDown, ArrowUp, ArrowDown, MinusCircle, XCircle, AlertCircle, Undo2, Save, Loader2, Archive, ArrowRight, Globe2, Sparkles, Settings2 } from 'lucide-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, Check, Rows3, ChevronRight, Eraser, FilePlus2, CopyPlus, ClipboardPaste, Box, X, Search, Image, Table, ArrowLeft, ChevronLeft, AlertTriangle, Info, HelpCircle, PanelLeftClose, CornerDownLeft, Circle, ArrowUpDown, ArrowUp, ArrowDown, MinusCircle, XCircle, AlertCircle, Undo2, Save, Loader2, Archive, ArrowRight, Globe2, Sparkles, 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';
@@ -183,6 +183,8 @@ var DEFAULT_I18N = {
   editor: "Editor",
   closePreview: "Close preview",
   openPreview: "Open preview",
+  closeList: "Hide list",
+  openList: "Show list",
   previewAs: "Preview as",
   previewAsDefault: "Same as edited",
   confirmDelete: "Confirm delete",
@@ -276,7 +278,15 @@ var DEFAULT_I18N = {
   conflictArchiveDuplicates: "Archive duplicates",
   conflictDeleteDuplicates: "Delete duplicates",
   conflictDeleteConfirm: "Permanently delete {n} duplicate record(s)? This cannot be undone.",
-  conflictResolveLabel: "Resolve"
+  conflictResolveLabel: "Resolve",
+  ruleSortLabel: "Sort",
+  ruleSortRecent: "Recently updated",
+  ruleSortName: "Name",
+  ruleSortActiveCount: "Active count",
+  ruleSortHasArchived: "Has archived",
+  lifecycleBadgeActive: "{n} active",
+  lifecycleBadgeArchived: "{n} archived",
+  lifecycleBadgeDraft: "{n} draft"
 };
 
 // src/components/RecordsAdmin/types/presentation.ts
@@ -851,6 +861,24 @@ var useRecordList = (args) => {
     }
     return map;
   }, [historyItems]);
+  const ruleLifecycleCounts = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const r of items) {
+      const h = ruleHash(r.facetRule ?? null);
+      if (!h) continue;
+      let bucket = map.get(h);
+      if (!bucket) {
+        bucket = { active: 0, archived: 0, draft: 0, other: 0 };
+        map.set(h, bucket);
+      }
+      const ls = r.lifecycleStatus;
+      if (ls == null || ls === "" || activeStatuses.includes(ls)) bucket.active += 1;
+      else if (ls === "archived") bucket.archived += 1;
+      else if (ls === "draft") bucket.draft += 1;
+      else bucket.other += 1;
+    }
+    return map;
+  }, [items, activeStatuses]);
   const refetch = useCallback(() => queryClient.refetchQueries({
     queryKey: [...QK_BASE2, ctx.collectionId, ctx.appId, ctx.recordType]
   }), [queryClient, ctx.collectionId, ctx.appId, ctx.recordType]);
@@ -861,6 +889,7 @@ var useRecordList = (args) => {
     activeItems,
     historyItems,
     historyBySlot,
+    ruleLifecycleCounts,
     total,
     counts,
     isLoading: query.isLoading,
@@ -2185,10 +2214,54 @@ function useShellClipboard(args) {
   };
 }
 var useShellPreviewPane = (args) => {
-  const { editingScope, activeScope, selectedProductId, productBrowseItems } = args;
+  const {
+    editingScope,
+    activeScope,
+    selectedProductId,
+    productBrowseItems,
+    pinPreviewMinWidth = 1400,
+    preferenceStorageKey = "smartlinks-ui:recordsAdmin:sidePreviewOpen"
+  } = args;
   const [previewScope, setPreviewScope] = useState(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const [sidePreviewOpen, setSidePreviewOpen] = useState(true);
+  const readStoredPref = () => {
+    if (typeof window === "undefined") return null;
+    try {
+      const raw = window.sessionStorage.getItem(preferenceStorageKey);
+      if (raw === "1") return true;
+      if (raw === "0") return false;
+    } catch {
+    }
+    return null;
+  };
+  const initialIsWide = typeof window !== "undefined" ? window.innerWidth >= pinPreviewMinWidth : true;
+  const [isWide, setIsWide] = useState(initialIsWide);
+  const userPrefRef = useRef(readStoredPref());
+  const [sidePreviewOpen, setSidePreviewOpenState] = useState(
+    userPrefRef.current ?? initialIsWide
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(`(min-width: ${pinPreviewMinWidth}px)`);
+    const onChange = () => {
+      const wide = mql.matches;
+      setIsWide(wide);
+      if (userPrefRef.current === null) {
+        setSidePreviewOpenState(wide);
+      }
+    };
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [pinPreviewMinWidth]);
+  const setSidePreviewOpen = useCallback((next) => {
+    userPrefRef.current = next;
+    try {
+      window.sessionStorage.setItem(preferenceStorageKey, next ? "1" : "0");
+    } catch {
+    }
+    setSidePreviewOpenState(next);
+  }, [preferenceStorageKey]);
   useEffect(() => {
     if (!editingScope) return;
     setPreviewScope((cur) => cur === null ? editingScope : cur);
@@ -2222,6 +2295,7 @@ var useShellPreviewPane = (args) => {
     setDrawerOpen,
     sidePreviewOpen,
     setSidePreviewOpen,
+    isPreviewNarrow: !isWide,
     editorHeaderLabel,
     editorHeaderSubtitle,
     editorHeaderMeta
@@ -6881,6 +6955,8 @@ function ItemListView({
   hasNextPage,
   isFetchingNextPage,
   onLoadMore,
+  groupByLifecycle = false,
+  lifecycle,
   i18n
 }) {
   const newLabel = i18n.newItem.includes("{noun}") ? i18n.newItem.replace("{noun}", itemNoun) : i18n.newItem;
@@ -6955,6 +7031,69 @@ function ItemListView({
   }), [ctx]);
   const confirmName = pendingRecord?.label ?? itemNoun;
   const confirmBody = i18n.deleteConfirmBody.includes("{name}") ? i18n.deleteConfirmBody.replace("{name}", confirmName) : i18n.deleteConfirmBody;
+  const activeValues = useMemo(
+    () => getActiveStatusValues(lifecycle),
+    [lifecycle]
+  );
+  const buckets = useMemo(() => {
+    if (!groupByLifecycle) return null;
+    const map = /* @__PURE__ */ new Map();
+    for (const item of visibleItems) {
+      const def = resolveLifecycleStatus(item, lifecycle);
+      const existing = map.get(def.value);
+      if (existing) existing.items.push(item);
+      else map.set(def.value, { label: def.label, items: [item] });
+    }
+    return Array.from(map.entries()).map(([key, v]) => ({
+      key,
+      label: v.label,
+      items: v.items,
+      isActive: activeValues.includes(key)
+    })).sort((a, b) => compareLifecycleBuckets(a.key, b.key)).filter((b) => b.items.length > 0);
+  }, [groupByLifecycle, visibleItems, lifecycle, activeValues]);
+  const [collapsedBuckets, setCollapsedBuckets] = useState(() => /* @__PURE__ */ new Set());
+  const toggleBucket = (key) => {
+    setCollapsedBuckets((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+  const renderBody = (rows) => {
+    if (renderItemList) return renderItemList(rows, guardedCtx);
+    if (view === "table") {
+      return /* @__PURE__ */ jsx(
+        DefaultItemTable,
+        {
+          items: rows,
+          columns: itemColumns,
+          selectedId: guardedCtx.selectedId,
+          onOpen: guardedCtx.onOpen,
+          onDelete: guardedCtx.onDelete,
+          sort,
+          onToggleSort,
+          rowActions,
+          rowClipboard,
+          i18n
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      DefaultItemCards,
+      {
+        items: rows,
+        variant: view,
+        selectedId: guardedCtx.selectedId,
+        ctx: guardedCtx,
+        renderCard: renderItemCard,
+        cardSize,
+        rowActions,
+        rowClipboard,
+        i18n
+      }
+    );
+  };
   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 }),
@@ -7072,39 +7211,62 @@ function ItemListView({
         body: `No ${itemNoun}s match "${search}".`
       }
     );
-  } else if (renderItemList) {
-    body = renderItemList(visibleItems, guardedCtx);
-  } else if (view === "table") {
-    body = /* @__PURE__ */ jsx(
-      DefaultItemTable,
-      {
-        items: visibleItems,
-        columns: itemColumns,
-        selectedId: guardedCtx.selectedId,
-        onOpen: guardedCtx.onOpen,
-        onDelete: guardedCtx.onDelete,
-        sort,
-        onToggleSort,
-        rowActions,
-        rowClipboard,
-        i18n
-      }
-    );
+  } else if (buckets && buckets.length > 0) {
+    body = /* @__PURE__ */ jsx("div", { className: "ra-item-buckets", children: buckets.map((bucket) => {
+      const open = bucket.isActive || !collapsedBuckets.has(bucket.key);
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "ra-item-bucket",
+          "data-bucket": bucket.key,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "ra-item-bucket-header",
+                onClick: () => !bucket.isActive && toggleBucket(bucket.key),
+                "aria-expanded": open,
+                disabled: bucket.isActive,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                  width: "100%",
+                  padding: "6px 12px",
+                  background: "transparent",
+                  border: 0,
+                  borderTop: "1px solid hsl(var(--ra-border))",
+                  font: "inherit",
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.04em",
+                  color: "hsl(var(--ra-muted-text))",
+                  cursor: bucket.isActive ? "default" : "pointer"
+                },
+                children: [
+                  !bucket.isActive ? open ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3", "aria-hidden": "true" }) : null,
+                  /* @__PURE__ */ jsx("span", { children: bucket.label }),
+                  /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", fontWeight: 500 }, children: bucket.items.length })
+                ]
+              }
+            ),
+            open && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ra-item-bucket-body",
+                style: bucket.isActive ? void 0 : { opacity: 0.75 },
+                children: renderBody(bucket.items)
+              }
+            )
+          ]
+        },
+        bucket.key
+      );
+    }) });
   } else {
-    body = /* @__PURE__ */ jsx(
-      DefaultItemCards,
-      {
-        items: visibleItems,
-        variant: view,
-        selectedId: guardedCtx.selectedId,
-        ctx: guardedCtx,
-        renderCard: renderItemCard,
-        cardSize,
-        rowActions,
-        rowClipboard,
-        i18n
-      }
-    );
+    body = renderBody(visibleItems);
   }
   return /* @__PURE__ */ jsxs("div", { className: "ra-item-list", children: [
     toolbar,
@@ -7247,10 +7409,42 @@ function SiblingRail({
   isFetchingNextPage,
   onLoadMore,
   rowClipboard,
-  rowActions
+  rowActions,
+  groupByLifecycle = false,
+  lifecycle
 }) {
   const ruleLabelLookup = useRuleLabelLookup();
   const newLabel = i18n.newItem.includes("{noun}") ? i18n.newItem.replace("{noun}", itemNoun ?? "item") : i18n.newItem;
+  const activeValues = useMemo(
+    () => getActiveStatusValues(lifecycle),
+    [lifecycle]
+  );
+  const buckets = useMemo(() => {
+    if (!groupByLifecycle) return null;
+    const map = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      const def = resolveLifecycleStatus(item, lifecycle);
+      const key = def.value;
+      const existing = map.get(key);
+      if (existing) existing.items.push(item);
+      else map.set(key, { label: def.label, items: [item] });
+    }
+    return Array.from(map.entries()).map(([key, v]) => ({
+      key,
+      label: v.label,
+      items: v.items,
+      isActive: activeValues.includes(key)
+    })).sort((a, b) => compareLifecycleBuckets(a.key, b.key)).filter((b) => b.items.length > 0);
+  }, [groupByLifecycle, items, lifecycle, activeValues]);
+  const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
+  const toggleBucket = (key) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
   return /* @__PURE__ */ jsxs("div", { className: "ra-sibling-rail", children: [
     (onBack || contextKind) && /* @__PURE__ */ jsxs("div", { className: "ra-sibling-context", children: [
       onBack && /* @__PURE__ */ jsx(
@@ -7276,79 +7470,125 @@ function SiblingRail({
       isLoading && /* @__PURE__ */ jsx(LoadingState, {}),
       !isLoading && error && /* @__PURE__ */ jsx(ErrorState, { error }),
       !isLoading && !error && items.length === 0 && /* @__PURE__ */ jsx(EmptyState, { title: i18n.noItemsTitle, body: i18n.noItemsBody }),
-      !isLoading && !error && items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ra-sibling-list", children: items.map((item, idx) => {
-        const id = item.itemId ?? "";
-        const key = item.id ?? (id || anchorKey(item.scope) || `pos:${idx}`);
-        const akey = anchorKey(item.scope);
-        const selected = selectedItemId === id;
-        const isDirty = !!(id && dirtyKeys?.has(id) || akey && dirtyKeys?.has(akey));
-        const hasError = !!(id && errorKeys?.has(id) || akey && errorKeys?.has(akey));
-        const ruleClauses = item.facetRule ? summarizeFacetRule(item.facetRule, ruleLabelLookup) : [];
-        const isTargeted = ruleClauses.length > 0;
-        const ruleSummary = isTargeted ? ruleClauses.map((c) => c.label).join(" \xB7 ") : null;
-        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "ra-row-shell", "data-selected": selected, children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => onSelect(id),
-              className: "ra-row",
-              "data-selected": selected,
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "ra-row-body", children: [
-                  /* @__PURE__ */ jsx("div", { className: "ra-row-title", children: item.label }),
-                  item.subtitle && /* @__PURE__ */ jsx("div", { className: "ra-row-sub", children: item.subtitle })
-                ] }),
-                isTargeted && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "ra-row-rule-pip",
-                    title: ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
-                    "aria-label": ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
-                    children: /* @__PURE__ */ jsx(Target, { className: "w-3 h-3", "aria-hidden": "true" })
-                  }
-                ),
-                hasError ? /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "ra-error-pip",
-                    title: "Save failed",
-                    "aria-label": "Save failed"
-                  }
-                ) : isDirty ? /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "ra-dirty-pip",
-                    title: "Unsaved changes",
-                    "aria-label": "Unsaved changes"
-                  }
-                ) : null
-              ]
-            }
-          ),
-          (() => {
-            const cb = rowClipboard ? rowClipboard(item) : null;
-            const extra = rowActions ? rowActions(item) ?? void 0 : void 0;
-            if (!cb?.onCopy && !cb?.onDuplicate && !cb?.onCopyAndNewRule && !(extra && extra.length)) {
-              return null;
-            }
-            return /* @__PURE__ */ jsx(
-              RowContextMenu,
+      !isLoading && !error && items.length > 0 && (() => {
+        const renderRow = (item, idx, dimmed) => {
+          const id = item.itemId ?? "";
+          const key = item.id ?? (id || anchorKey(item.scope) || `pos:${idx}`);
+          const akey = anchorKey(item.scope);
+          const selected = selectedItemId === id;
+          const isDirty = !!(id && dirtyKeys?.has(id) || akey && dirtyKeys?.has(akey));
+          const hasError = !!(id && errorKeys?.has(id) || akey && errorKeys?.has(akey));
+          const ruleClauses = item.facetRule ? summarizeFacetRule(item.facetRule, ruleLabelLookup) : [];
+          const isTargeted = ruleClauses.length > 0;
+          const ruleSummary = isTargeted ? ruleClauses.map((c) => c.label).join(" \xB7 ") : null;
+          return /* @__PURE__ */ jsx("li", { "data-dimmed": dimmed || void 0, children: /* @__PURE__ */ jsxs("div", { className: "ra-row-shell", "data-selected": selected, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
               {
-                onCopy: cb?.onCopy,
-                onDuplicate: cb?.onDuplicate,
-                onCopyAndNewRule: cb?.onCopyAndNewRule,
-                actions: extra,
-                i18n: {
-                  copy: i18n.copy,
-                  duplicateAction: i18n.duplicateAction,
-                  copyAndNewRuleAction: i18n.copyAndNewRuleAction
+                type: "button",
+                onClick: () => onSelect(id),
+                className: "ra-row",
+                "data-selected": selected,
+                style: dimmed ? { opacity: 0.7 } : void 0,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "ra-row-body", children: [
+                    /* @__PURE__ */ jsx("div", { className: "ra-row-title", children: item.label }),
+                    item.subtitle && /* @__PURE__ */ jsx("div", { className: "ra-row-sub", children: item.subtitle })
+                  ] }),
+                  isTargeted && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "ra-row-rule-pip",
+                      title: ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
+                      "aria-label": ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
+                      children: /* @__PURE__ */ jsx(Target, { className: "w-3 h-3", "aria-hidden": "true" })
+                    }
+                  ),
+                  hasError ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "ra-error-pip",
+                      title: "Save failed",
+                      "aria-label": "Save failed"
+                    }
+                  ) : isDirty ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "ra-dirty-pip",
+                      title: "Unsaved changes",
+                      "aria-label": "Unsaved changes"
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            (() => {
+              const cb = rowClipboard ? rowClipboard(item) : null;
+              const extra = rowActions ? rowActions(item) ?? void 0 : void 0;
+              if (!cb?.onCopy && !cb?.onDuplicate && !cb?.onCopyAndNewRule && !(extra && extra.length)) {
+                return null;
+              }
+              return /* @__PURE__ */ jsx(
+                RowContextMenu,
+                {
+                  onCopy: cb?.onCopy,
+                  onDuplicate: cb?.onDuplicate,
+                  onCopyAndNewRule: cb?.onCopyAndNewRule,
+                  actions: extra,
+                  i18n: {
+                    copy: i18n.copy,
+                    duplicateAction: i18n.duplicateAction,
+                    copyAndNewRuleAction: i18n.copyAndNewRuleAction
+                  }
                 }
+              );
+            })()
+          ] }) }, key);
+        };
+        if (!buckets) {
+          return /* @__PURE__ */ jsx("ul", { className: "ra-sibling-list", children: items.map((item, idx) => renderRow(item, idx, false)) });
+        }
+        return /* @__PURE__ */ jsx("div", { className: "ra-sibling-buckets", children: buckets.map((bucket) => {
+          const open = bucket.isActive || !collapsed.has(bucket.key);
+          return /* @__PURE__ */ jsxs("section", { className: "ra-sibling-bucket", "data-bucket": bucket.key, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "ra-sibling-bucket-header",
+                onClick: () => !bucket.isActive && toggleBucket(bucket.key),
+                "aria-expanded": open,
+                disabled: bucket.isActive,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                  width: "100%",
+                  padding: "6px 10px",
+                  background: "transparent",
+                  border: 0,
+                  borderTop: "1px solid hsl(var(--ra-border))",
+                  font: "inherit",
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.04em",
+                  color: "hsl(var(--ra-muted-text))",
+                  cursor: bucket.isActive ? "default" : "pointer"
+                },
+                children: [
+                  !bucket.isActive ? open ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3", "aria-hidden": "true" }) : null,
+                  /* @__PURE__ */ jsx("span", { children: bucket.label }),
+                  /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", fontWeight: 500 }, children: bucket.items.length })
+                ]
               }
-            );
-          })()
-        ] }) }, key);
-      }) })
+            ),
+            open && /* @__PURE__ */ jsx("ul", { className: "ra-sibling-list", children: bucket.items.map(
+              (item, idx) => renderRow(item, idx, !bucket.isActive)
+            ) })
+          ] }, bucket.key);
+        }) });
+      })()
     ] }),
     onLoadMore && /* @__PURE__ */ jsx(
       LoadMoreFooter,
@@ -8413,14 +8653,21 @@ var SaveAllProgress = ({
     }
   );
 };
-function PreviewReopenPill({ anchorRef, onClick, ariaLabel, title, children }) {
+function PreviewReopenPill({
+  anchorRef,
+  onClick,
+  ariaLabel,
+  title,
+  children,
+  side = "right"
+}) {
   const [pos, setPos] = useState(null);
   const rafRef = useRef(null);
   useLayoutEffect(() => {
     const el = anchorRef.current;
     if (typeof window === "undefined") return;
     if (!el) {
-      setPos({ top: window.innerHeight / 2, right: 8 });
+      setPos({ top: window.innerHeight / 2, right: 8, left: 8 });
       return;
     }
     const measure = () => {
@@ -8428,12 +8675,13 @@ function PreviewReopenPill({ anchorRef, onClick, ariaLabel, title, children }) {
       rafRef.current = requestAnimationFrame(() => {
         const rect = el.getBoundingClientRect();
         if (rect.width === 0 && rect.height === 0) {
-          setPos({ top: window.innerHeight / 2, right: 8 });
+          setPos({ top: window.innerHeight / 2, right: 8, left: 8 });
           return;
         }
         setPos({
           top: rect.top + rect.height / 2,
-          right: Math.max(0, window.innerWidth - rect.right)
+          right: Math.max(0, window.innerWidth - rect.right),
+          left: Math.max(0, rect.left)
         });
       });
     };
@@ -8453,7 +8701,8 @@ function PreviewReopenPill({ anchorRef, onClick, ariaLabel, title, children }) {
   if (typeof document === "undefined") return null;
   const effectivePos = pos ?? {
     top: typeof window !== "undefined" ? window.innerHeight / 2 : 200,
-    right: 8
+    right: 8,
+    left: 8
   };
   return createPortal(
     /* @__PURE__ */ jsx(
@@ -8467,10 +8716,10 @@ function PreviewReopenPill({ anchorRef, onClick, ariaLabel, title, children }) {
         style: {
           position: "fixed",
           top: effectivePos.top,
-          right: effectivePos.right,
+          ...side === "right" ? { right: effectivePos.right } : { left: effectivePos.left },
           // Pull half the pill width out into the gutter so it visually
           // anchors *to* the editor edge rather than sitting inside it.
-          transform: "translate(50%, -50%)"
+          transform: side === "right" ? "translate(50%, -50%)" : "translate(-50%, -50%)"
         },
         children
       }
@@ -8892,6 +9141,7 @@ function RecordsAdminShellInner(props) {
     onTelemetry?.({ type: "presentation.change", recordType, from: presentation, to: next });
     setPresentation(next);
   }, [onTelemetry, recordType, presentation, setPresentation]);
+  const [ruleSort, setRuleSort] = useState("recent");
   const [itemView, setItemView] = useItemViewPref({
     appId,
     recordType,
@@ -9502,6 +9752,25 @@ function RecordsAdminShellInner(props) {
   const ruleCatalogueRef = useRef([]);
   const onCreateRuleFromClipboardRef = useRef(null);
   const previewReopenAnchorRef = useRef(null);
+  const railReopenAnchorRef = useRef(null);
+  const RAIL_OPEN_STORAGE_KEY = "smartlinks-ui:recordsAdmin:railOpen";
+  const [railOpen, setRailOpenState] = useState(() => {
+    if (typeof window === "undefined") return true;
+    try {
+      const raw = window.sessionStorage.getItem(RAIL_OPEN_STORAGE_KEY);
+      if (raw === "0") return false;
+      if (raw === "1") return true;
+    } catch {
+    }
+    return true;
+  });
+  const setRailOpen = useCallback((next) => {
+    try {
+      window.sessionStorage.setItem(RAIL_OPEN_STORAGE_KEY, next ? "1" : "0");
+    } catch {
+    }
+    setRailOpenState(next);
+  }, []);
   const { runWithGuard } = useDirtyNavigation({
     strategy: dirtyStrategy,
     isDirty: editorCtx.isDirty,
@@ -9532,6 +9801,7 @@ function RecordsAdminShellInner(props) {
     setDrawerOpen,
     sidePreviewOpen,
     setSidePreviewOpen,
+    isPreviewNarrow,
     editorHeaderLabel: editorHeaderLabelRaw,
     editorHeaderSubtitle,
     editorHeaderMeta
@@ -9853,6 +10123,23 @@ function RecordsAdminShellInner(props) {
           ] })
         );
       }
+      if (isPreviewNarrow) {
+        return withNav(
+          /* @__PURE__ */ jsxs("div", { className: "relative h-full", ref: previewAnchorRef, children: [
+            baseEditor(),
+            /* @__PURE__ */ jsx(
+              DrawerPreview,
+              {
+                open: true,
+                onClose: () => setSidePreviewOpen(false),
+                label: i18n.preview,
+                scopePicker,
+                children: previewBody
+              }
+            )
+          ] })
+        );
+      }
       return withNav(
         /* @__PURE__ */ jsxs("div", { className: "grid h-full", style: { gridTemplateColumns: "minmax(0, 1fr) minmax(280px, 420px)" }, children: [
           /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: baseEditor() }),
@@ -10070,6 +10357,7 @@ function RecordsAdminShellInner(props) {
     if (cardinality === "collection") {
       setRuleWizardStep(2);
       if (ruleWizardSeedMode) {
+        skipNextItemResetRef.current = true;
         const id = coerceDraftItemId2(generateItemId);
         setSelectedItemId(id);
       }
@@ -10080,7 +10368,7 @@ function RecordsAdminShellInner(props) {
         setSelectedRecordId(DRAFT_ID3);
       }
     }
-  }, [cardinality, ruleWizardSeedMode, mintRuleWizardDraftKey, generateItemId]);
+  }, [cardinality, ruleWizardSeedMode, mintRuleWizardDraftKey, generateItemId, skipNextItemResetRef]);
   const startRuleWizardDraft = useCallback((seed) => {
     setRuleWizardSeedMode(seed);
     setRuleWizardDraftKey(mintRuleWizardDraftKey());
@@ -10134,17 +10422,51 @@ function RecordsAdminShellInner(props) {
         buckets.set(hash, { rep: item, count: 1 });
       }
     }
-    return Array.from(buckets.values()).map(({ rep, count }) => ({
-      ...rep,
-      // Title carries the count + identity; the rule chips below render
-      // the friendly facet/value labels (via the lookup) so we don't
-      // repeat the same information in two places. Without this, a row
-      // had three echoes of the same rule (raw-key title, friendly chip,
-      // and the right-pane "Rule · …" header).
-      label: `${count} ${itemNoun}${count === 1 ? "" : "s"}`,
-      subtitle: void 0
-    }));
-  }, [isRuleTab, isCollection, filteredRuleItems, itemNoun]);
+    const counts = recordList.ruleLifecycleCounts;
+    return Array.from(buckets.entries()).map(([hash, { rep, count }]) => {
+      const lc = counts.get(hash) ?? { active: 0, archived: 0, draft: 0, other: 0 };
+      const lifecycleBadges = [];
+      if (lc.active > 0) lifecycleBadges.push({
+        label: i18n.lifecycleBadgeActive.replace("{n}", String(lc.active)),
+        tone: "success"
+      });
+      if (lc.draft > 0) lifecycleBadges.push({
+        label: i18n.lifecycleBadgeDraft.replace("{n}", String(lc.draft)),
+        tone: "warning"
+      });
+      if (lc.archived > 0) lifecycleBadges.push({
+        label: i18n.lifecycleBadgeArchived.replace("{n}", String(lc.archived)),
+        tone: "neutral"
+      });
+      return {
+        ...rep,
+        // Title carries the count + identity; the rule chips below render
+        // the friendly facet/value labels (via the lookup) so we don't
+        // repeat the same information in two places.
+        label: `${count} ${itemNoun}${count === 1 ? "" : "s"}`,
+        subtitle: void 0,
+        badges: [...rep.badges ?? [], ...lifecycleBadges],
+        // Stash counts on the row for the sort comparator below.
+        __lifecycleCounts: lc
+      };
+    });
+  }, [isRuleTab, isCollection, filteredRuleItems, itemNoun, recordList.ruleLifecycleCounts, i18n]);
+  const sortedCollectionRuleRailItems = useMemo(() => {
+    if (!isRuleTab || !isCollection || ruleSort === "recent") return collectionRuleRailItems;
+    const arr = [...collectionRuleRailItems];
+    const counts = (r) => r.__lifecycleCounts ?? { active: 0, archived: 0 };
+    if (ruleSort === "name") arr.sort((a, b) => a.label.localeCompare(b.label));
+    else if (ruleSort === "activeCount") arr.sort((a, b) => counts(b).active - counts(a).active);
+    else if (ruleSort === "hasArchived") {
+      arr.sort((a, b) => {
+        const ah = counts(a).archived > 0 ? 1 : 0;
+        const bh = counts(b).archived > 0 ? 1 : 0;
+        if (ah !== bh) return bh - ah;
+        return counts(b).archived - counts(a).archived;
+      });
+    }
+    return arr;
+  }, [collectionRuleRailItems, isRuleTab, isCollection, ruleSort]);
   const activeRuleSummary = useMemo(() => {
     if (!isRuleTab || !isCollection) return null;
     if (!selectedRecordId || isDraftId3(selectedRecordId)) return null;
@@ -10283,9 +10605,9 @@ function RecordsAdminShellInner(props) {
     });
   }, [isLifecycleRail, selectedLifecycleKey, lcGroupBy, collectionItems.items]);
   const leftItems = isProductTab ? productListItems : isRuleTab ? applyFacetBrowseFilter(
-    isCollection ? collectionRuleRailItems : filteredRuleItems
+    isCollection ? sortedCollectionRuleRailItems : filteredRuleItems
   ) : isLifecycleRail ? lifecycleRows : (isGlobalTab || isAllTab) && isCollection ? [collectionGlobalAllRow] : isRecordsTab ? applyFacetBrowseFilter(recordList.items) : [];
-  const railShowsHistoryDisclosure = isRecordsTab && !isLifecycleRail && !((isGlobalTab || isAllTab) && isCollection);
+  const railShowsHistoryDisclosure = isRecordsTab && !isLifecycleRail && !isCollection;
   const filteredLeftItems = useMemo(() => {
     if (!railShowsHistoryDisclosure) return leftItems;
     return leftItems.filter((r) => {
@@ -10529,295 +10851,351 @@ function RecordsAdminShellInner(props) {
           {
             className: "flex-1 grid border-t overflow-hidden",
             style: {
-              gridTemplateColumns: railHidden ? "1fr" : "minmax(260px, 320px) 1fr",
+              gridTemplateColumns: railHidden || !railOpen ? "1fr" : "minmax(260px, 320px) 1fr",
               borderColor: "hsl(var(--ra-border))"
             },
             children: [
-              !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: scopedCollectionItemsList,
-                  selectedItemId,
-                  isLoading: collectionItems.isLoading,
-                  error: collectionItems.error,
-                  onBack: onItemBack,
-                  onSelect: onItemOpen,
-                  onCreate: onItemCreate,
-                  itemNoun: itemNounLabel,
-                  dirtyKeys,
-                  errorKeys,
-                  hasNextPage: !!collectionItems.hasNextPage,
-                  isFetchingNextPage: !!collectionItems.isFetchingNextPage,
-                  onLoadMore: () => {
-                    void collectionItems.fetchNextPage();
-                  },
-                  rowClipboard,
-                  rowActions: wrappedRecordActions,
-                  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: [
-                /* @__PURE__ */ jsx("div", { className: "px-1.5 py-2", children: /* @__PURE__ */ jsx(
-                  ScopeTabs,
+              !railHidden && railOpen && /* @__PURE__ */ jsxs("aside", { className: "border-r overflow-hidden flex flex-col relative", style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    scopes: effectiveTopLevelScopes,
-                    active: activeScope,
-                    onChange: (s) => {
-                      void runWithGuard(() => {
-                        onTelemetry?.({ type: "scope.change", recordType, from: activeScope, to: s });
-                        if (ruleWizardStep !== null) {
-                          setRuleWizardStep(null);
-                          setRuleWizardRule(null);
-                          setDraftKind(null);
-                        }
-                        setActiveScope(s);
-                      });
-                    },
-                    loading: probe.isLoading,
-                    counts: {
-                      // Products badge counts DISTINCT products that have at
-                      // least one custom record — same semantics as Global /
-                      // Rules. Catalogue size (which can be 1k–10k+) was
-                      // misleading: "Products: 247" implied 247 customised
-                      // products when in fact zero might be configured. Falls
-                      // back to a lower bound when scope-counts truncated at
-                      // the hard cap.
-                      product: scopeCounts.productIds.size,
-                      // The remaining tabs show actual record counts so hidden
-                      // state (e.g. a rule-scoped competition) is visible from
-                      // any tab. `useScopeCounts` returns 0 while loading, which
-                      // is fine — the badges just appear once data lands.
-                      collection: scopeCounts.counts.collection,
-                      rule: scopeCounts.counts.rule,
-                      variant: scopeCounts.counts.variant,
-                      batch: scopeCounts.counts.batch,
-                      facet: scopeCounts.counts.facet,
-                      all: scopeCounts.counts.all
+                    type: "button",
+                    onClick: () => setRailOpen(false),
+                    "aria-label": i18n.closeList,
+                    title: i18n.closeList,
+                    className: "absolute top-1.5 right-1.5 z-10 p-1 rounded hover:bg-[hsl(var(--ra-muted))]",
+                    style: { color: "hsl(var(--ra-muted-text))" },
+                    children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "w-3.5 h-3.5" })
+                  }
+                ),
+                isCollection && selectedItemId && collectionRailMode === "siblings" && ruleWizardStep === null ? /* @__PURE__ */ jsx(
+                  SiblingRail,
+                  {
+                    items: scopedCollectionItemsList,
+                    selectedItemId,
+                    isLoading: collectionItems.isLoading,
+                    error: collectionItems.error,
+                    onBack: onItemBack,
+                    onSelect: onItemOpen,
+                    onCreate: onItemCreate,
+                    itemNoun: itemNounLabel,
+                    dirtyKeys,
+                    errorKeys,
+                    hasNextPage: !!collectionItems.hasNextPage,
+                    isFetchingNextPage: !!collectionItems.isFetchingNextPage,
+                    onLoadMore: () => {
+                      void collectionItems.fetchNextPage();
                     },
-                    tooltips: { rule: i18n.rulesTabTooltip },
-                    icons: icons.scope
+                    rowClipboard,
+                    rowActions: wrappedRecordActions,
+                    groupByLifecycle: true,
+                    lifecycle: lifecycleConfig,
+                    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("div", { className: "p-3 space-y-2.5 border-b", style: { borderColor: "hsl(var(--ra-border))" }, children: [
-                  isRuleTab && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: /* @__PURE__ */ jsxs(
-                    "button",
+                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "px-1.5 py-2", children: /* @__PURE__ */ jsx(
+                    ScopeTabs,
                     {
-                      type: "button",
-                      onClick: () => onCreateRule(),
-                      className: "ra-btn w-full",
-                      "data-variant": "primary",
-                      "aria-label": "New rule",
-                      children: [
-                        /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5", "aria-hidden": "true" }),
-                        /* @__PURE__ */ jsx("span", { children: "New rule" })
-                      ]
+                      scopes: effectiveTopLevelScopes,
+                      active: activeScope,
+                      onChange: (s) => {
+                        void runWithGuard(() => {
+                          onTelemetry?.({ type: "scope.change", recordType, from: activeScope, to: s });
+                          if (ruleWizardStep !== null) {
+                            setRuleWizardStep(null);
+                            setRuleWizardRule(null);
+                            setDraftKind(null);
+                          }
+                          setActiveScope(s);
+                        });
+                      },
+                      loading: probe.isLoading,
+                      counts: {
+                        // Products badge counts DISTINCT products that have at
+                        // least one custom record — same semantics as Global /
+                        // Rules. Catalogue size (which can be 1k–10k+) was
+                        // misleading: "Products: 247" implied 247 customised
+                        // products when in fact zero might be configured. Falls
+                        // back to a lower bound when scope-counts truncated at
+                        // the hard cap.
+                        product: scopeCounts.productIds.size,
+                        // The remaining tabs show actual record counts so hidden
+                        // state (e.g. a rule-scoped competition) is visible from
+                        // any tab. `useScopeCounts` returns 0 while loading, which
+                        // is fine — the badges just appear once data lands.
+                        collection: scopeCounts.counts.collection,
+                        rule: scopeCounts.counts.rule,
+                        variant: scopeCounts.counts.variant,
+                        batch: scopeCounts.counts.batch,
+                        facet: scopeCounts.counts.facet,
+                        all: scopeCounts.counts.all
+                      },
+                      tooltips: { rule: i18n.rulesTabTooltip },
+                      icons: icons.scope
                     }
                   ) }),
-                  showCreateGlobal && /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: onCreateGlobal,
-                      className: "ra-btn w-full",
-                      "data-variant": "primary",
-                      "aria-label": "New global default",
-                      children: [
-                        /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5", "aria-hidden": "true" }),
-                        /* @__PURE__ */ jsx("span", { children: "New global default" })
-                      ]
-                    }
-                  ),
-                  !(isGlobalTab && !isCollection) && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", children: [
-                        /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 opacity-50" }),
+                  /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-2.5 border-b", style: { borderColor: "hsl(var(--ra-border))" }, children: [
+                    isRuleTab && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => onCreateRule(),
+                        className: "ra-btn w-full",
+                        "data-variant": "primary",
+                        "aria-label": "New rule",
+                        children: [
+                          /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5", "aria-hidden": "true" }),
+                          /* @__PURE__ */ jsx("span", { children: "New rule" })
+                        ]
+                      }
+                    ) }),
+                    showCreateGlobal && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onCreateGlobal,
+                        className: "ra-btn w-full",
+                        "data-variant": "primary",
+                        "aria-label": "New global default",
+                        children: [
+                          /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5", "aria-hidden": "true" }),
+                          /* @__PURE__ */ jsx("span", { children: "New global default" })
+                        ]
+                      }
+                    ),
+                    !(isGlobalTab && !isCollection) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 opacity-50" }),
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "text",
+                              value: search,
+                              onChange: (e) => setSearch(e.target.value),
+                              placeholder: i18n.searchPlaceholder,
+                              className: "w-full pl-8 pr-3 py-1.5 text-xs rounded-md border bg-transparent focus:outline-none focus:ring-1",
+                              style: { borderColor: "hsl(var(--ra-border))", color: "hsl(var(--ra-text))" }
+                            }
+                          )
+                        ] }),
                         /* @__PURE__ */ jsx(
-                          "input",
+                          PresentationSwitcher,
                           {
-                            type: "text",
-                            value: search,
-                            onChange: (e) => setSearch(e.target.value),
-                            placeholder: i18n.searchPlaceholder,
-                            className: "w-full pl-8 pr-3 py-1.5 text-xs rounded-md border bg-transparent focus:outline-none focus:ring-1",
-                            style: { borderColor: "hsl(var(--ra-border))", color: "hsl(var(--ra-text))" }
+                            options: showPresentationSwitcher ? presentations : [],
+                            value: presentation,
+                            onChange: onPresentationChange,
+                            i18n
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx(
-                        PresentationSwitcher,
-                        {
-                          options: showPresentationSwitcher ? presentations : [],
-                          value: presentation,
-                          onChange: onPresentationChange,
-                          i18n
-                        }
-                      )
-                    ] }),
-                    isProductTab && !productPinned && (() => {
-                      const cfg = scopeCounts.productIds;
-                      let configured = 0;
-                      for (const p of productBrowse.items) if (cfg.has(p.id)) configured += 1;
-                      const total = productBrowse.items.length;
-                      return /* @__PURE__ */ jsx(
-                        StatusFilterPills,
+                      isProductTab && !productPinned && (() => {
+                        const cfg = scopeCounts.productIds;
+                        let configured = 0;
+                        for (const p of productBrowse.items) if (cfg.has(p.id)) configured += 1;
+                        const total = productBrowse.items.length;
+                        return /* @__PURE__ */ jsx(
+                          StatusFilterPills,
+                          {
+                            value: filter,
+                            onChange: setFilter,
+                            counts: {
+                              all: total,
+                              configured,
+                              partial: 0,
+                              empty: total - configured
+                            },
+                            hideZero: ["partial"],
+                            i18n
+                          }
+                        );
+                      })(),
+                      isRuleTab && /* @__PURE__ */ jsx(
+                        FacetBrowseFilter,
                         {
-                          value: filter,
-                          onChange: setFilter,
-                          counts: {
-                            all: total,
-                            configured,
-                            partial: 0,
-                            empty: total - configured
-                          },
-                          hideZero: ["partial"],
-                          i18n
+                          facets: facetBrowseFacets,
+                          value: facetBrowseFilter,
+                          onChange: setFacetBrowseFilter,
+                          isLoading: facetBrowse.isLoading
                         }
-                      );
-                    })(),
-                    isRuleTab && /* @__PURE__ */ jsx(
-                      FacetBrowseFilter,
+                      ),
+                      isRuleTab && isCollection && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+                        /* @__PURE__ */ jsx(
+                          "label",
+                          {
+                            htmlFor: "ra-rule-sort",
+                            style: { color: "hsl(var(--ra-text-muted))" },
+                            children: i18n.ruleSortLabel
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "select",
+                          {
+                            id: "ra-rule-sort",
+                            value: ruleSort,
+                            onChange: (e) => setRuleSort(e.target.value),
+                            className: "text-xs px-2 py-1 rounded-md border bg-transparent focus:outline-none focus:ring-1",
+                            style: { borderColor: "hsl(var(--ra-border))", color: "hsl(var(--ra-text))" },
+                            children: [
+                              /* @__PURE__ */ jsx("option", { value: "recent", children: i18n.ruleSortRecent }),
+                              /* @__PURE__ */ jsx("option", { value: "name", children: i18n.ruleSortName }),
+                              /* @__PURE__ */ jsx("option", { value: "activeCount", children: i18n.ruleSortActiveCount }),
+                              /* @__PURE__ */ jsx("option", { value: "hasArchived", children: i18n.ruleSortHasArchived })
+                            ]
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+                    hasSingletonConflicts && /* @__PURE__ */ jsx(
+                      SingletonConflictBanner,
                       {
-                        facets: facetBrowseFacets,
-                        value: facetBrowseFilter,
-                        onChange: setFacetBrowseFilter,
-                        isLoading: facetBrowse.isLoading
-                      }
-                    )
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-                  hasSingletonConflicts && /* @__PURE__ */ jsx(
-                    SingletonConflictBanner,
-                    {
-                      conflictCount: singletonConflicts.length,
-                      duplicateCount: totalDuplicateCount,
-                      onResolve: () => {
-                        const first = singletonConflicts[0]?.duplicates[0] ?? singletonConflicts[0]?.active;
-                        if (first?.id) {
-                          void runWithGuard(() => {
-                            setSelectedRecordId(first.id);
-                          });
-                        }
-                      },
-                      onArchiveDuplicates: enableArchiveDuplicates ? async () => {
-                        const ids = singletonConflicts.flatMap((c) => c.duplicates.map((d) => d.id)).filter((id) => !!id);
-                        for (const id of ids) {
-                          try {
-                            const updated = await SL.app.records.update(collectionId, appId, id, { status: archivedStatusValue }, true);
-                            if (updated) patchRecordIntoCaches(queryClient, ctx, updated);
-                            onTelemetry?.({
-                              type: "recordAction.invoke",
-                              recordType,
-                              key: "conflict.archiveDuplicates",
-                              ref: id
+                        conflictCount: singletonConflicts.length,
+                        duplicateCount: totalDuplicateCount,
+                        onResolve: () => {
+                          const first = singletonConflicts[0]?.duplicates[0] ?? singletonConflicts[0]?.active;
+                          if (first?.id) {
+                            void runWithGuard(() => {
+                              setSelectedRecordId(first.id);
                             });
-                          } catch (err) {
-                            console.warn("[RecordsAdminShell] archive-duplicate failed", id, err);
                           }
-                        }
-                        queryClient.invalidateQueries({
-                          queryKey: scopeCountsQueryKey(ctx.collectionId, ctx.appId, ctx.recordType)
-                        });
-                      } : void 0,
-                      onDeleteDuplicates: enableDeleteDuplicates ? async () => {
-                        const ids = singletonConflicts.flatMap((c) => c.duplicates.map((d) => d.id)).filter((id) => !!id);
-                        for (const id of ids) {
-                          try {
-                            await SL.app.records.remove(collectionId, appId, id, true);
-                            removeRecordFromCaches(queryClient, ctx, id);
-                            onTelemetry?.({
-                              type: "recordAction.invoke",
-                              recordType,
-                              key: "conflict.deleteDuplicates",
-                              ref: id
-                            });
-                          } catch (err) {
-                            console.warn("[RecordsAdminShell] delete-duplicate failed", id, err);
+                        },
+                        onArchiveDuplicates: enableArchiveDuplicates ? async () => {
+                          const ids = singletonConflicts.flatMap((c) => c.duplicates.map((d) => d.id)).filter((id) => !!id);
+                          for (const id of ids) {
+                            try {
+                              const updated = await SL.app.records.update(collectionId, appId, id, { status: archivedStatusValue }, true);
+                              if (updated) patchRecordIntoCaches(queryClient, ctx, updated);
+                              onTelemetry?.({
+                                type: "recordAction.invoke",
+                                recordType,
+                                key: "conflict.archiveDuplicates",
+                                ref: id
+                              });
+                            } catch (err) {
+                              console.warn("[RecordsAdminShell] archive-duplicate failed", id, err);
+                            }
+                          }
+                          queryClient.invalidateQueries({
+                            queryKey: scopeCountsQueryKey(ctx.collectionId, ctx.appId, ctx.recordType)
+                          });
+                        } : void 0,
+                        onDeleteDuplicates: enableDeleteDuplicates ? async () => {
+                          const ids = singletonConflicts.flatMap((c) => c.duplicates.map((d) => d.id)).filter((id) => !!id);
+                          for (const id of ids) {
+                            try {
+                              await SL.app.records.remove(collectionId, appId, id, true);
+                              removeRecordFromCaches(queryClient, ctx, id);
+                              onTelemetry?.({
+                                type: "recordAction.invoke",
+                                recordType,
+                                key: "conflict.deleteDuplicates",
+                                ref: id
+                              });
+                            } catch (err) {
+                              console.warn("[RecordsAdminShell] delete-duplicate failed", id, err);
+                            }
                           }
+                          queryClient.invalidateQueries({
+                            queryKey: scopeCountsQueryKey(ctx.collectionId, ctx.appId, ctx.recordType)
+                          });
+                        } : void 0,
+                        i18n: {
+                          title: i18n.conflictBannerTitle,
+                          bodyOne: i18n.conflictBannerBodyOne,
+                          bodyMany: i18n.conflictBannerBodyMany,
+                          archiveLabel: i18n.conflictArchiveDuplicates,
+                          deleteLabel: i18n.conflictDeleteDuplicates,
+                          deleteConfirm: i18n.conflictDeleteConfirm,
+                          resolveLabel: i18n.conflictResolveLabel
                         }
-                        queryClient.invalidateQueries({
-                          queryKey: scopeCountsQueryKey(ctx.collectionId, ctx.appId, ctx.recordType)
-                        });
-                      } : void 0,
-                      i18n: {
-                        title: i18n.conflictBannerTitle,
-                        bodyOne: i18n.conflictBannerBodyOne,
-                        bodyMany: i18n.conflictBannerBodyMany,
-                        archiveLabel: i18n.conflictArchiveDuplicates,
-                        deleteLabel: i18n.conflictDeleteDuplicates,
-                        deleteConfirm: i18n.conflictDeleteConfirm,
-                        resolveLabel: i18n.conflictResolveLabel
-                      }
-                    }
-                  ),
-                  isGlobalTab && !isCollection && !hasSingletonConflicts ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    leftLoading && /* @__PURE__ */ jsx(LoadingState, {}),
-                    !leftLoading && leftError && /* @__PURE__ */ jsx(ErrorState, { error: leftError }),
-                    !leftLoading && !leftError && decoratedLeftItems.length === 0 && (renderEmptyState ? renderEmptyState({ scope: activeScope }) : /* @__PURE__ */ jsx(
-                      EmptyState,
-                      {
-                        icon: search ? icons.empty.search : icons.empty.default,
-                        title: search ? i18n.noResults : i18n.railEmptyTitle,
-                        body: search ? void 0 : isRuleTab ? i18n.rulesEmptyBody : i18n.railEmptyBody
                       }
-                    )),
-                    !leftLoading && !leftError && decoratedLeftItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(
-                        RecordList,
+                    ),
+                    isGlobalTab && !isCollection && !hasSingletonConflicts ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      leftLoading && /* @__PURE__ */ jsx(LoadingState, {}),
+                      !leftLoading && leftError && /* @__PURE__ */ jsx(ErrorState, { error: leftError }),
+                      !leftLoading && !leftError && decoratedLeftItems.length === 0 && (renderEmptyState ? renderEmptyState({ scope: activeScope }) : /* @__PURE__ */ jsx(
+                        EmptyState,
                         {
-                          items: decoratedLeftItems,
-                          selectedId: leftSelectedId,
-                          selectedAnchorKey: leftSelectedAnchorKey,
-                          onSelect: onLeftSelect,
-                          dirtyId,
-                          dirtyAnchorKey,
-                          dirtyKeys,
-                          errorKeys,
-                          presentation: effectivePresentation,
-                          renderListRow,
-                          groupBy: (
-                            // The synthetic "All items" row in collection mode is a
-                            // navigational anchor, not a real record — applying the
-                            // host's groupBy bucketed it under "Other" (its
-                            // data is null). Skip grouping for that single-row rail.
-                            (isGlobalTab || isAllTab) && isCollection || isLifecycleRail ? void 0 : effectiveGroupBy
-                          ),
-                          renderGroupActions: renderRuleGroupActions,
-                          rowClipboard,
-                          rowActions: wrappedRecordActions,
-                          i18n,
-                          historyBySlot: railHistoryBySlot
+                          icon: search ? icons.empty.search : icons.empty.default,
+                          title: search ? i18n.noResults : i18n.railEmptyTitle,
+                          body: search ? void 0 : isRuleTab ? i18n.rulesEmptyBody : i18n.railEmptyBody
                         }
-                      ),
-                      isProductTab && !productPinned && /* @__PURE__ */ jsx(
-                        LoadMoreFooter,
-                        {
-                          shown: leftItems.length,
-                          hasNextPage: !!productBrowse.hasNextPage,
-                          isFetchingNextPage: !!productBrowse.isFetchingNextPage,
-                          onLoadMore: () => {
-                            void productBrowse.fetchNextPage();
+                      )),
+                      !leftLoading && !leftError && decoratedLeftItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(
+                          RecordList,
+                          {
+                            items: decoratedLeftItems,
+                            selectedId: leftSelectedId,
+                            selectedAnchorKey: leftSelectedAnchorKey,
+                            onSelect: onLeftSelect,
+                            dirtyId,
+                            dirtyAnchorKey,
+                            dirtyKeys,
+                            errorKeys,
+                            presentation: effectivePresentation,
+                            renderListRow,
+                            groupBy: (
+                              // The synthetic "All items" row in collection mode is a
+                              // navigational anchor, not a real record — applying the
+                              // host's groupBy bucketed it under "Other" (its
+                              // data is null). Skip grouping for that single-row rail.
+                              (isGlobalTab || isAllTab) && isCollection || isLifecycleRail ? void 0 : effectiveGroupBy
+                            ),
+                            renderGroupActions: renderRuleGroupActions,
+                            rowClipboard,
+                            rowActions: wrappedRecordActions,
+                            i18n,
+                            historyBySlot: railHistoryBySlot
                           }
-                        }
-                      ),
-                      isRecordsTab && (!isCollection || !(isAllTab || isGlobalTab)) && /* @__PURE__ */ jsx(
-                        LoadMoreFooter,
-                        {
-                          shown: recordList.items.length,
-                          total: recordList.total,
-                          hasNextPage: !!recordList.hasNextPage,
-                          isFetchingNextPage: !!recordList.isFetchingNextPage,
-                          onLoadMore: () => {
-                            void recordList.fetchNextPage();
+                        ),
+                        isProductTab && !productPinned && /* @__PURE__ */ jsx(
+                          LoadMoreFooter,
+                          {
+                            shown: leftItems.length,
+                            hasNextPage: !!productBrowse.hasNextPage,
+                            isFetchingNextPage: !!productBrowse.isFetchingNextPage,
+                            onLoadMore: () => {
+                              void productBrowse.fetchNextPage();
+                            }
                           }
-                        }
-                      )
+                        ),
+                        isRecordsTab && (!isCollection || !(isAllTab || isGlobalTab)) && /* @__PURE__ */ jsx(
+                          LoadMoreFooter,
+                          {
+                            shown: recordList.items.length,
+                            total: recordList.total,
+                            hasNextPage: !!recordList.hasNextPage,
+                            isFetchingNextPage: !!recordList.isFetchingNextPage,
+                            onLoadMore: () => {
+                              void recordList.fetchNextPage();
+                            }
+                          }
+                        )
+                      ] })
                     ] })
                   ] })
                 ] })
-              ] }) }),
-              /* @__PURE__ */ jsxs("main", { className: "overflow-hidden", children: [
+              ] }),
+              /* @__PURE__ */ jsxs("main", { className: "overflow-hidden relative", ref: railReopenAnchorRef, children: [
+                !railHidden && !railOpen && /* @__PURE__ */ jsxs(
+                  PreviewReopenPill,
+                  {
+                    anchorRef: railReopenAnchorRef,
+                    side: "left",
+                    onClick: () => setRailOpen(true),
+                    ariaLabel: i18n.openList,
+                    title: i18n.openList,
+                    children: [
+                      /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }),
+                      i18n.openList
+                    ]
+                  }
+                ),
                 ruleWizardStep !== null && /* @__PURE__ */ jsxs(
                   NewRuleWizard,
                   {
@@ -10920,6 +11298,8 @@ function RecordsAdminShellInner(props) {
                     onLoadMore: () => {
                       void collectionItems.fetchNextPage();
                     },
+                    groupByLifecycle: true,
+                    lifecycle: lifecycleConfig,
                     i18n
                   }
                 ),