@proveanything/smartlinks-utils-ui 0.12.6 → 0.12.7

package/dist/components/RecordsAdmin/index.js

@@ -1,11 +1,11 @@
+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 { useQuery, useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
@@ -276,7 +276,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 +859,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 +887,7 @@ var useRecordList = (args) => {
     activeItems,
     historyItems,
     historyBySlot,
+    ruleLifecycleCounts,
     total,
     counts,
     isLoading: query.isLoading,
@@ -6881,6 +6908,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 +6984,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 +7164,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 +7362,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 +7423,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,
@@ -8892,6 +9085,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,
@@ -10070,6 +10264,7 @@ function RecordsAdminShellInner(props) {
     if (cardinality === "collection") {
       setRuleWizardStep(2);
       if (ruleWizardSeedMode) {
+        skipNextItemResetRef.current = true;
         const id = coerceDraftItemId2(generateItemId);
         setSelectedItemId(id);
       }
@@ -10080,7 +10275,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 +10329,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 +10512,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) => {
@@ -10553,6 +10782,8 @@ function RecordsAdminShellInner(props) {
                   },
                   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
@@ -10683,7 +10914,33 @@ function RecordsAdminShellInner(props) {
                         onChange: setFacetBrowseFilter,
                         isLoading: facetBrowse.isLoading
                       }
-                    )
+                    ),
+                    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: [
@@ -10920,6 +11177,8 @@ function RecordsAdminShellInner(props) {
                     onLoadMore: () => {
                       void collectionItems.fetchNextPage();
                     },
+                    groupByLifecycle: true,
+                    lifecycle: lifecycleConfig,
                     i18n
                   }
                 ),