@proveanything/smartlinks-utils-ui 0.12.7 → 0.12.8

package/dist/components/RecordsAdmin/index.js

@@ -7,7 +7,7 @@ import { assertComponentStylesLoaded } from '../../chunk-OLYC54YT.js';
 import '../../chunk-5UQQYXCX.js';
 import { cn } from '../../chunk-L7FQ52F5.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",
@@ -2212,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);
@@ -2249,6 +2295,7 @@ var useShellPreviewPane = (args) => {
     setDrawerOpen,
     sidePreviewOpen,
     setSidePreviewOpen,
+    isPreviewNarrow: !isWide,
     editorHeaderLabel,
     editorHeaderSubtitle,
     editorHeaderMeta
@@ -8606,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 = () => {
@@ -8621,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)
         });
       });
     };
@@ -8646,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(
@@ -8660,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
       }
@@ -9696,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,
@@ -9726,6 +9801,7 @@ function RecordsAdminShellInner(props) {
     setDrawerOpen,
     sidePreviewOpen,
     setSidePreviewOpen,
+    isPreviewNarrow,
     editorHeaderLabel: editorHeaderLabelRaw,
     editorHeaderSubtitle,
     editorHeaderMeta
@@ -10047,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() }),
@@ -10758,323 +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,
-                  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(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,
-                        {
-                          value: filter,
-                          onChange: setFilter,
-                          counts: {
-                            all: total,
-                            configured,
-                            partial: 0,
-                            empty: total - configured
-                          },
-                          hideZero: ["partial"],
-                          i18n
-                        }
-                      );
-                    })(),
-                    isRuleTab && /* @__PURE__ */ jsx(
-                      FacetBrowseFilter,
-                      {
-                        facets: facetBrowseFacets,
-                        value: facetBrowseFilter,
-                        onChange: setFacetBrowseFilter,
-                        isLoading: facetBrowse.isLoading
-                      }
-                    ),
-                    isRuleTab && isCollection && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
-                      /* @__PURE__ */ jsx(
-                        "label",
+                      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,
                         {
-                          htmlFor: "ra-rule-sort",
-                          style: { color: "hsl(var(--ra-text-muted))" },
-                          children: i18n.ruleSortLabel
+                          facets: facetBrowseFacets,
+                          value: facetBrowseFilter,
+                          onChange: setFacetBrowseFilter,
+                          isLoading: facetBrowse.isLoading
                         }
                       ),
-                      /* @__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 })
-                          ]
-                        }
-                      )
+                      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,
-                    {
-                      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
+                  ] }),
+                  /* @__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);
                             });
-                          } 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,
                   {