@proveanything/smartlinks-utils-ui 0.3.5 → 0.3.8

package/dist/components/RecordsAdmin/index.js

@@ -1,8 +1,9 @@
-import { styleInject } from '../../chunk-WFNEZQCD.js';
+import { styleInject } from '../../chunk-NIAIQRFC.js';
 import { cn } from '../../chunk-L7FQ52F5.js';
 import { createContext, useMemo, useState, useEffect, useCallback, useRef, useContext, createElement } from 'react';
-import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, Globe, Tag, Boxes, Layers, Package, Rows3, Image, List, ChevronRight, Eraser, Box, AlertTriangle, Info, X, HelpCircle, Search, CornerDownLeft, Circle } from 'lucide-react';
+import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, Globe, Tag, Boxes, Layers, Package, Rows3, Image, List, ChevronRight, Eraser, Box, X, AlertTriangle, Info, HelpCircle, Search, CornerDownLeft, Circle, AlertCircle, Undo2, Save } from 'lucide-react';
 import { useQueryClient, useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DEFAULT_ICONS = {
@@ -83,6 +84,7 @@ var DEFAULT_I18N = {
   unsavedPromptDiscard: "Discard changes",
   unsavedPromptCancel: "Stay here",
   unsavedPromptSave: "Save & continue",
+  unsavedBannerBody: "Unsaved changes on {name}",
   presentationList: "List",
   presentationGrid: "Grid",
   presentationGallery: "Gallery",
@@ -436,6 +438,7 @@ var useRecordList = (args) => {
   }, [queryClient, ctx.collectionId, ctx.appId, ctx.recordType]);
   const total = query.data?.pages[query.data.pages.length - 1]?.total ?? items.length;
   return {
+    allItems: items,
     items: filtered,
     total,
     counts,
@@ -454,12 +457,24 @@ var resolveRecord = async (args) => {
   const editingScope = parsedRefToScope(args.target);
   const result = await matchRecords(args.ctx, target, { strategy: "all" }).catch(() => null);
   const records = result?.records ?? [];
+  console.info("[RecordsAdmin/resolveRecord]", {
+    editingScope,
+    target,
+    matchCount: records.length,
+    winnerScope: records[0]?.record?.scope,
+    winnerRef: records[0]?.record?.ref
+  });
   if (records.length === 0) {
     return { data: null, source: "empty" };
   }
   const winnerEntry = records[0];
   const winner = winnerEntry.record;
   const winnerIsSelf = scopesEqual(winner.scope, editingScope);
+  console.info("[RecordsAdmin/resolveRecord] classification", {
+    winnerIsSelf,
+    winnerScope: winner.scope,
+    editingScope
+  });
   if (winnerIsSelf) {
     const parent = records[1]?.record;
     return {
@@ -750,7 +765,133 @@ var useScopeProbe = ({ SL, collectionId, admin = true, enabled = true }) => {
     error: query.error ?? null
   };
 };
-var QK = ["records-admin", "product-browse"];
+var LOG = "[RecordsAdmin/useFacetBrowse]";
+var QK = ["records-admin", "facet-browse"];
+var toScaffoldSummary = (facet, value) => {
+  const facetKey = facet.key ?? "";
+  const valueKey = value.key ?? "";
+  const ref = buildRef({ facetId: facetKey, facetValue: valueKey });
+  return {
+    id: null,
+    ref,
+    scope: parseRef(ref),
+    data: null,
+    status: "empty",
+    label: value.name ?? valueKey ?? "Untitled value",
+    subtitle: facet.name ?? facetKey ?? void 0
+  };
+};
+var useFacetBrowse = ({
+  SL,
+  collectionId,
+  existing,
+  search = "",
+  filter = "all",
+  enabled = true
+}) => {
+  const queryClient = useQueryClient();
+  const hasAdminList = !!SL?.facets?.list;
+  const hasPublicList = !!SL?.facets?.publicList;
+  const hasAnyList = hasAdminList || hasPublicList;
+  const queryEnabled = enabled && !!collectionId && hasAnyList;
+  const query = useQuery({
+    queryKey: [...QK, collectionId],
+    enabled: queryEnabled,
+    staleTime: 3e4,
+    queryFn: async () => {
+      const t0 = performance.now();
+      try {
+        if (SL?.facets?.list) {
+          console.info(`${LOG} \u2192 SL.facets.list("${collectionId}", { includeValues: true })`);
+          const res = await SL.facets.list(collectionId, { includeValues: true });
+          const items = res?.items ?? [];
+          console.info(
+            `${LOG} \u2190 SL.facets.list ok in ${Math.round(performance.now() - t0)}ms \u2014 ${items.length} facet(s)`,
+            items
+          );
+          return items;
+        }
+        if (SL?.facets?.publicList) {
+          console.info(`${LOG} \u2192 SL.facets.publicList("${collectionId}", { includeValues: true })`);
+          const res = await SL.facets.publicList(collectionId, { includeValues: true });
+          const items = res?.items ?? [];
+          console.info(
+            `${LOG} \u2190 SL.facets.publicList ok in ${Math.round(performance.now() - t0)}ms \u2014 ${items.length} facet(s)`,
+            items
+          );
+          return items;
+        }
+        console.warn(`${LOG} queryFn ran but no facets API is available on SL`);
+        return [];
+      } catch (err) {
+        console.error(`${LOG} \u2716 facets fetch failed`, err);
+        throw err;
+      }
+    }
+  });
+  const lastLoggedRef = useRef("");
+  useEffect(() => {
+    const signature = `${enabled}|${collectionId}|${hasAdminList}|${hasPublicList}`;
+    if (signature === lastLoggedRef.current) return;
+    lastLoggedRef.current = signature;
+    if (!enabled) {
+      console.info(`${LOG} skipped \u2014 enabled=false (shell not on facet tab yet)`);
+      return;
+    }
+    if (!collectionId) {
+      console.warn(`${LOG} skipped \u2014 no collectionId provided`);
+      return;
+    }
+    if (!hasAnyList) {
+      console.warn(
+        `${LOG} skipped \u2014 SDK is missing both SL.facets.list and SL.facets.publicList. Update @proveanything/smartlinks (>=1.8) or check the SDK build.`,
+        { facetsNamespace: SL?.facets ? Object.keys(SL.facets) : null }
+      );
+      return;
+    }
+    console.info(
+      `${LOG} will fetch facets for collection "${collectionId}" via ${hasAdminList ? "SL.facets.list (admin)" : "SL.facets.publicList (fallback)"}`
+    );
+  }, [enabled, collectionId, hasAdminList, hasPublicList, hasAnyList, SL]);
+  const mergedItems = useMemo(() => {
+    const existingByRef = new Map(existing.map((item) => [item.ref, item]));
+    const scaffolded = (query.data ?? []).flatMap(
+      (facet) => (facet.values ?? []).filter((value) => !!facet.key && !!value.key).map((value) => {
+        const scaffold = toScaffoldSummary(facet, value);
+        return existingByRef.get(scaffold.ref) ?? scaffold;
+      })
+    );
+    const extras = existing.filter((item) => !scaffolded.some((scaffold) => scaffold.ref === item.ref));
+    return [...scaffolded, ...extras];
+  }, [existing, query.data]);
+  const filteredItems = useMemo(() => {
+    let next = mergedItems;
+    if (filter !== "all") next = next.filter((item) => item.status === filter);
+    if (search.trim()) {
+      const q = search.trim().toLowerCase();
+      next = next.filter((item) => `${item.label} ${item.subtitle ?? ""} ${item.ref}`.toLowerCase().includes(q));
+    }
+    return next;
+  }, [mergedItems, filter, search]);
+  const counts = useMemo(() => ({
+    all: mergedItems.length,
+    configured: mergedItems.filter((item) => item.status === "configured").length,
+    partial: mergedItems.filter((item) => item.status === "partial").length,
+    empty: mergedItems.filter((item) => item.status === "empty").length
+  }), [mergedItems]);
+  const refetch = () => {
+    queryClient.invalidateQueries({ queryKey: [...QK, collectionId] });
+  };
+  return {
+    items: filteredItems,
+    total: mergedItems.length,
+    counts,
+    isLoading: query.isLoading,
+    error: query.error ?? null,
+    refetch
+  };
+};
+var QK2 = ["records-admin", "product-browse"];
 var toBrowseItem = (p) => ({
   id: p.id ?? p.productId ?? "",
   name: p.name ?? p.id ?? "Untitled",
@@ -761,12 +902,12 @@ var useProductBrowse = (args) => {
   const { SL, collectionId, search = "", pageSize = 50, enabled = true, admin = true } = args;
   const queryClient = useQueryClient();
   const queryKey = useMemo(
-    () => [...QK, collectionId, search.trim(), pageSize, admin],
+    () => [...QK2, collectionId, search.trim(), pageSize, admin],
     [collectionId, search, pageSize, admin]
   );
   const query = useInfiniteQuery({
     queryKey,
-    enabled: enabled && !!collectionId && !!SL?.product?.query,
+    enabled: enabled && !!collectionId && !!(SL?.products?.query || SL?.product?.query || SL?.products?.list || SL?.product?.list),
     initialPageParam: { offset: 0, cursor: null },
     queryFn: async ({ pageParam }) => {
       const body = {
@@ -774,7 +915,23 @@ var useProductBrowse = (args) => {
         sort: [{ field: "sortOrder", direction: "asc" }, { field: "name", direction: "asc" }]
       };
       if (search.trim()) body.query = { search: search.trim() };
-      const res = await SL.product.query(collectionId, body, admin);
+      let res = null;
+      if (SL?.products?.query) {
+        res = await SL.products.query(collectionId, body);
+      } else if (SL?.product?.query) {
+        res = await SL.product.query(collectionId, body, admin);
+      } else {
+        const legacy = SL?.products?.list ? await SL.products.list(collectionId, admin) : SL?.product?.list ? await SL.product.list(collectionId, admin) : [];
+        const filteredLegacy = search.trim() ? legacy.filter((item) => `${item?.name ?? ""} ${item?.sku ?? ""} ${item?.id ?? ""}`.toLowerCase().includes(search.trim().toLowerCase())) : legacy;
+        const pageItems = filteredLegacy.slice(pageParam.offset, pageParam.offset + pageSize);
+        return {
+          items: pageItems.map(toBrowseItem),
+          nextOffset: pageParam.offset + pageItems.length,
+          nextCursor: null,
+          hasMore: pageParam.offset + pageItems.length < filteredLegacy.length,
+          total: filteredLegacy.length
+        };
+      }
       const items2 = (res?.items ?? []).map(toBrowseItem);
       const page = res?.page ?? {};
       return {
@@ -796,7 +953,7 @@ var useProductBrowse = (args) => {
     () => query.data?.pages.flatMap((p) => p.items) ?? [],
     [query.data]
   );
-  const refetch = () => queryClient.invalidateQueries({ queryKey: [...QK, collectionId] });
+  const refetch = () => queryClient.invalidateQueries({ queryKey: [...QK2, collectionId] });
   return {
     items,
     total: query.data?.pages[query.data.pages.length - 1]?.total,
@@ -808,7 +965,7 @@ var useProductBrowse = (args) => {
     refetch
   };
 };
-var QK2 = ["records-admin", "product-children"];
+var QK3 = ["records-admin", "product-children"];
 var variantToItem = (v) => ({
   id: v.id ?? v.variantId ?? "",
   name: v.name ?? v.label ?? v.id ?? "Untitled variant",
@@ -823,7 +980,7 @@ var useProductChildren = (args) => {
   const { SL, collectionId, productId, kind, enabled = true } = args;
   const queryClient = useQueryClient();
   const queryKey = useMemo(
-    () => [...QK2, collectionId, productId ?? null, kind],
+    () => [...QK3, collectionId, productId ?? null, kind],
     [collectionId, productId, kind]
   );
   const query = useQuery({
@@ -841,7 +998,7 @@ var useProductChildren = (args) => {
     }
   });
   const refetch = () => queryClient.invalidateQueries({
-    queryKey: [...QK2, collectionId, productId ?? null]
+    queryKey: [...QK3, collectionId, productId ?? null]
   });
   return {
     items: query.data ?? [],
@@ -958,6 +1115,144 @@ var useDirtyNavigation = ({
   );
   return { runWithGuard };
 };
+var ConfirmDialog = ({
+  open,
+  title,
+  body,
+  saveLabel,
+  discardLabel,
+  cancelLabel,
+  onChoice
+}) => {
+  const saveBtnRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const t = window.setTimeout(() => saveBtnRef.current?.focus(), 0);
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onChoice("cancel");
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => {
+      window.clearTimeout(t);
+      window.removeEventListener("keydown", onKey, true);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onChoice]);
+  if (!open || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "ra-shell ra-confirm-root",
+        role: "presentation",
+        onMouseDown: (e) => e.stopPropagation(),
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ra-confirm-backdrop", onClick: () => onChoice("cancel") }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "alertdialog",
+              "aria-modal": "true",
+              "aria-labelledby": "ra-confirm-title",
+              "aria-describedby": "ra-confirm-body",
+              className: "ra-confirm-card",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "ra-confirm-header", children: [
+                  /* @__PURE__ */ jsx("span", { className: "ra-confirm-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "w-4 h-4" }) }),
+                  /* @__PURE__ */ jsx("h2", { id: "ra-confirm-title", className: "ra-confirm-title", children: title })
+                ] }),
+                /* @__PURE__ */ jsx("p", { id: "ra-confirm-body", className: "ra-confirm-body", children: body }),
+                /* @__PURE__ */ jsxs("div", { className: "ra-confirm-actions", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ra-confirm-btn ra-confirm-btn-ghost",
+                      onClick: () => onChoice("cancel"),
+                      children: cancelLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ra-confirm-btn ra-confirm-btn-danger",
+                      onClick: () => onChoice("discard"),
+                      children: discardLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      ref: saveBtnRef,
+                      className: "ra-confirm-btn ra-confirm-btn-primary",
+                      onClick: () => onChoice("save"),
+                      children: saveLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+var DEFAULTS = {
+  title: "Unsaved changes",
+  body: "You have unsaved changes. Save them, discard them, or stay on this record?",
+  saveLabel: "Save & continue",
+  discardLabel: "Discard",
+  cancelLabel: "Stay here"
+};
+var useConfirmDialog = () => {
+  const [open, setOpen] = useState(false);
+  const [state, setState] = useState(DEFAULTS);
+  const resolverRef = useRef(null);
+  const confirm = useCallback((i18n) => {
+    setState({
+      title: i18n?.title ?? DEFAULTS.title,
+      body: i18n?.body ?? DEFAULTS.body,
+      saveLabel: i18n?.save ?? DEFAULTS.saveLabel,
+      discardLabel: i18n?.discard ?? DEFAULTS.discardLabel,
+      cancelLabel: i18n?.cancel ?? DEFAULTS.cancelLabel
+    });
+    setOpen(true);
+    return new Promise((resolve) => {
+      resolverRef.current = resolve;
+    });
+  }, []);
+  const handleChoice = useCallback((choice) => {
+    setOpen(false);
+    const r = resolverRef.current;
+    resolverRef.current = null;
+    r?.(choice);
+  }, []);
+  return {
+    confirm,
+    dialog: /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open,
+        title: state.title,
+        body: state.body,
+        saveLabel: state.saveLabel,
+        discardLabel: state.discardLabel,
+        cancelLabel: state.cancelLabel,
+        onChoice: handleChoice
+      }
+    )
+  };
+};
 var LABELS = {
   product: "Products",
   facet: "Shared",
@@ -996,14 +1291,17 @@ var ScopeTabs = ({
     );
   }) });
 };
-var StatusFilterPills = ({ value, onChange, counts, i18n }) => {
+var StatusFilterPills = ({ value, onChange, counts, i18n, hideZero }) => {
   const opts = [
     { key: "all", label: i18n.filterAll, count: counts.all },
     { key: "configured", label: i18n.filterConfigured, count: counts.configured },
     { key: "partial", label: i18n.filterPartial, count: counts.partial },
     { key: "empty", label: i18n.filterEmpty, count: counts.empty }
   ];
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: opts.map((o) => {
+  const visible = opts.filter(
+    (o) => o.key === value || !hideZero?.includes(o.key) || o.count > 0
+  );
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: visible.map((o) => {
     const active = value === o.key;
     return /* @__PURE__ */ jsxs(
       "button",
@@ -1498,25 +1796,49 @@ function RecordEditor({
   preview,
   bulkActions,
   footerExtra,
-  onBeforeDelete
+  onBeforeDelete,
+  headerLabel,
+  headerSubtitle,
+  headerMeta
 }) {
-  const sourceLabel = ctx.source === "self" ? "Own" : ctx.source === "inherited" ? "Inherited" : "New";
+  const sourceLabel = ctx.source === "self" ? "Customised" : ctx.source === "inherited" ? "Inherited" : null;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxs(
       "header",
       {
-        className: "sticky top-0 z-10 px-5 py-3 border-b flex items-center justify-between gap-3",
+        className: "sticky top-0 z-40 px-5 py-3 border-b flex items-start justify-between gap-3",
         style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx(ScopeBreadcrumb, { scope: ctx.scope }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mt-1", children: [
-              /* @__PURE__ */ jsx(StatusDot, { source: ctx.source }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide", style: { color: "hsl(var(--ra-muted-text))" }, children: sourceLabel }),
+            headerLabel ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-sm font-medium truncate",
+                  style: { color: "hsl(var(--ra-text))" },
+                  title: headerLabel,
+                  children: headerLabel
+                }
+              ),
+              headerSubtitle && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-xs truncate",
+                  style: { color: "hsl(var(--ra-muted-text))" },
+                  title: headerSubtitle,
+                  children: headerSubtitle
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(ScopeBreadcrumb, { scope: ctx.scope }),
+            (sourceLabel || ctx.isDirty) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mt-1", children: [
+              sourceLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(StatusDot, { source: ctx.source }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide", style: { color: "hsl(var(--ra-muted-text))" }, children: sourceLabel })
+              ] }),
               ctx.isDirty && /* @__PURE__ */ jsxs(
                 "span",
                 {
-                  className: "ml-2 flex items-center gap-1 text-[10px] uppercase tracking-wide",
+                  className: `flex items-center gap-1 text-[10px] uppercase tracking-wide ${sourceLabel ? "ml-2" : ""}`,
                   style: { color: "hsl(var(--ra-accent))" },
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "ra-status-dot ra-status-shared", "aria-hidden": "true" }),
@@ -1526,7 +1848,22 @@ function RecordEditor({
               )
             ] })
           ] }),
-          bulkActions && /* @__PURE__ */ jsx(BulkActionsMenu, { ...bulkActions, i18n })
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 shrink-0", children: [
+            headerMeta && /* @__PURE__ */ jsx(
+              "code",
+              {
+                className: "text-[10px] font-mono px-1.5 py-0.5 rounded truncate max-w-[14rem] mt-0.5",
+                style: {
+                  color: "hsl(var(--ra-muted-text) / 0.85)",
+                  background: "hsl(var(--ra-muted) / 0.5)",
+                  border: "1px solid hsl(var(--ra-border) / 0.6)"
+                },
+                title: headerMeta,
+                children: headerMeta
+              }
+            ),
+            bulkActions && /* @__PURE__ */ jsx(BulkActionsMenu, { ...bulkActions, i18n })
+          ] })
         ]
       }
     ),
@@ -1741,13 +2078,29 @@ var InlinePreview = ({ children, scopePicker, label = "Preview" }) => /* @__PURE
   ] }),
   children
 ] });
-var SidePreview = ({ children, scopePicker, label = "Preview" }) => /* @__PURE__ */ jsxs("div", { className: "ra-preview-rail", children: [
+var SidePreview = ({
+  children,
+  scopePicker,
+  label = "Preview",
+  onClose
+}) => /* @__PURE__ */ jsxs("div", { className: "ra-preview-rail", children: [
   /* @__PURE__ */ jsxs("header", { className: "ra-preview-rail-header", children: [
     /* @__PURE__ */ jsxs("div", { className: "ra-preview-rail-title", children: [
       /* @__PURE__ */ jsx(Eye, { className: "w-3 h-3" }),
       label
     ] }),
-    scopePicker && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: scopePicker })
+    scopePicker && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: scopePicker }),
+    onClose && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        "aria-label": "Close preview",
+        className: scopePicker ? "p-1 rounded hover:bg-[hsl(var(--ra-muted))]" : "ml-auto p-1 rounded hover:bg-[hsl(var(--ra-muted))]",
+        style: { color: "hsl(var(--ra-muted-text))" },
+        children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+      }
+    )
   ] }),
   /* @__PURE__ */ jsx("div", { className: "ra-preview-rail-body", children })
 ] });
@@ -1861,7 +2214,13 @@ var PreviewScopePicker = ({
   showBatches,
   i18n
 }) => {
-  const products = useProductBrowse({ SL, collectionId, pageSize: 100 });
+  const productPinned = !!editingScope.productId;
+  const products = useProductBrowse({
+    SL,
+    collectionId,
+    pageSize: 100,
+    enabled: !productPinned
+  });
   const variants = useProductChildren({
     SL,
     collectionId,
@@ -1878,6 +2237,27 @@ var PreviewScopePicker = ({
     () => value.raw === editingScope.raw,
     [value.raw, editingScope.raw]
   );
+  useEffect(() => {
+    if (productPinned) return;
+    if (value.productId) return;
+    const first = products.items[0];
+    if (!first) return;
+    onChange({
+      ...value,
+      productId: first.id,
+      variantId: void 0,
+      batchId: void 0,
+      raw: `product:${first.id}`
+    });
+  }, [productPinned, value.productId, products.items]);
+  const [productPickerOpen, setProductPickerOpen] = useState(false);
+  const showProductPicker = !productPinned && products.items.length > 1;
+  const showVariantPicker = showVariants && !!value.productId && variants.items.length > 0;
+  const showBatchPicker = showBatches && !!value.productId && batches.items.length > 0;
+  if (!showProductPicker && !showVariantPicker && !showBatchPicker) {
+    return null;
+  }
+  const currentProductName = products.items.find((p) => p.id === value.productId)?.name ?? value.productId ?? "";
   const selectStyle = {
     borderColor: "hsl(var(--ra-border))",
     color: "hsl(var(--ra-text))"
@@ -1907,30 +2287,44 @@ var PreviewScopePicker = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(
+    showProductPicker && !productPickerOpen && currentProductName && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setProductPickerOpen(true),
+        className: "text-[10px] px-2 py-1 rounded-md border hover:bg-[hsl(var(--ra-muted))] inline-flex items-center gap-1 max-w-[12rem] truncate",
+        style: selectStyle,
+        title: `Preview as ${currentProductName} \u2014 click to change`,
+        children: [
+          "as ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: currentProductName }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 opacity-60" })
+        ]
+      }
+    ),
+    showProductPicker && productPickerOpen && /* @__PURE__ */ jsx(
       "select",
       {
         className: SELECT_CLS,
         style: selectStyle,
+        autoFocus: true,
+        onBlur: () => setProductPickerOpen(false),
         value: value.productId ?? "",
         onChange: (e) => {
           const productId = e.target.value || void 0;
           onChange({
             ...value,
             productId,
-            // Clear variant/batch when switching products.
             variantId: void 0,
             batchId: void 0,
             raw: productId ? `product:${productId}` : ""
           });
+          setProductPickerOpen(false);
         },
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 Any product \u2014" }),
-          products.items.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
-        ]
+        children: products.items.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
       }
     ),
-    showVariants && value.productId && variants.items.length > 0 && /* @__PURE__ */ jsxs(
+    showVariantPicker && /* @__PURE__ */ jsxs(
       "select",
       {
         className: SELECT_CLS,
@@ -1951,7 +2345,7 @@ var PreviewScopePicker = ({
         ]
       }
     ),
-    showBatches && value.productId && batches.items.length > 0 && /* @__PURE__ */ jsxs(
+    showBatchPicker && /* @__PURE__ */ jsxs(
       "select",
       {
         className: SELECT_CLS,
@@ -2037,7 +2431,9 @@ function ShellHeader({
   recordType,
   icons,
   stats,
-  statsItems
+  statsItems,
+  statsTitle,
+  statsIcon
 }) {
   let iconNode = null;
   if (showHeaderIcon) {
@@ -2061,6 +2457,7 @@ function ShellHeader({
     return items;
   })();
   const hasStats = resolvedItems.length > 0;
+  const hasStatsHeading = !!(statsTitle || statsIcon);
   return /* @__PURE__ */ jsxs("header", { className: "ra-header", children: [
     /* @__PURE__ */ jsxs("div", { className: "ra-header__main", children: [
       iconNode ? /* @__PURE__ */ jsx("div", { className: "ra-header-icon", "aria-hidden": "true", children: iconNode }) : null,
@@ -2070,17 +2467,86 @@ function ShellHeader({
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ra-header-aside", children: [
-      hasStats ? /* @__PURE__ */ jsx("div", { className: "ra-header-stats", role: "group", "aria-label": "Record counts", children: resolvedItems.map((item, idx) => /* @__PURE__ */ jsxs("span", { style: { display: "contents" }, children: [
-        idx > 0 && /* @__PURE__ */ jsx("span", { className: "ra-stat-divider", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs("span", { className: "ra-stat", children: [
-          /* @__PURE__ */ jsx("span", { className: "ra-stat-value", children: item.value }),
-          /* @__PURE__ */ jsx("span", { className: "ra-stat-label", children: item.label })
-        ] })
-      ] }, `${item.label}-${idx}`)) }) : null,
+      hasStats ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `ra-header-stats${hasStatsHeading ? " ra-header-stats--titled" : ""}`,
+          role: "group",
+          "aria-label": statsTitle ?? "Record counts",
+          children: [
+            hasStatsHeading ? /* @__PURE__ */ jsxs("div", { className: "ra-stats-heading", children: [
+              statsIcon ? /* @__PURE__ */ jsx("span", { className: "ra-stats-heading-icon", "aria-hidden": "true", children: statsIcon }) : null,
+              statsTitle ? /* @__PURE__ */ jsx("span", { className: "ra-stats-heading-label", children: statsTitle }) : null
+            ] }) : null,
+            /* @__PURE__ */ jsx("div", { className: "ra-stats-items", children: resolvedItems.map((item, idx) => /* @__PURE__ */ jsxs("span", { style: { display: "contents" }, children: [
+              idx > 0 && /* @__PURE__ */ jsx("span", { className: "ra-stat-divider", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs("span", { className: "ra-stat", children: [
+                /* @__PURE__ */ jsx("span", { className: "ra-stat-value", children: item.value }),
+                /* @__PURE__ */ jsx("span", { className: "ra-stat-label", children: item.label })
+              ] })
+            ] }, `${item.label}-${idx}`)) })
+          ]
+        }
+      ) : null,
       headerActions ? /* @__PURE__ */ jsx("div", { className: "ra-header-actions", children: headerActions }) : null
     ] })
   ] });
 }
+var UnsavedBanner = ({
+  label,
+  context,
+  isSaving,
+  saveError,
+  onSave,
+  onDiscard,
+  saveLabel,
+  discardLabel,
+  bodyTemplate,
+  savingLabel,
+  errorLabel
+}) => {
+  const name = label ?? context ?? "this record";
+  const message = bodyTemplate.replace("{name}", name);
+  return /* @__PURE__ */ jsxs("div", { className: "ra-unsaved-banner", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx("span", { className: "ra-unsaved-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5" }) }),
+    /* @__PURE__ */ jsxs("span", { className: "ra-unsaved-text", children: [
+      message,
+      context && label && /* @__PURE__ */ jsxs("span", { className: "ra-unsaved-context", children: [
+        " \xB7 ",
+        context
+      ] })
+    ] }),
+    saveError != null && !isSaving && /* @__PURE__ */ jsx("span", { className: "ra-unsaved-error", role: "alert", children: errorLabel ?? "Save failed" }),
+    /* @__PURE__ */ jsxs("div", { className: "ra-unsaved-actions", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "ra-unsaved-btn ra-unsaved-btn-ghost",
+          onClick: onDiscard,
+          disabled: isSaving,
+          children: [
+            /* @__PURE__ */ jsx(Undo2, { className: "w-3 h-3" }),
+            discardLabel
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "ra-unsaved-btn ra-unsaved-btn-primary",
+          onClick: onSave,
+          disabled: isSaving,
+          children: [
+            /* @__PURE__ */ jsx(Save, { className: "w-3 h-3" }),
+            isSaving ? savingLabel ?? "Saving\u2026" : saveLabel
+          ]
+        }
+      )
+    ] })
+  ] });
+};
 
 // src/components/RecordsAdmin/data/csv.ts
 var escapeCell = (s) => {
@@ -2190,8 +2656,8 @@ var downloadBlob = (blob, filename) => {
 styleInject(':root {\n  --ra-status-own: var(--ra-emerald, 142 71% 45%);\n  --ra-status-shared: var(--ra-amber, 38 92% 50%);\n  --ra-status-missing: var(--muted-foreground, 220 9% 46%);\n  --ra-accent: var(--primary, 222 47% 11%);\n  --ra-surface: var(--card, 0 0% 100%);\n  --ra-border: var(--border, 220 13% 91%);\n  --ra-text: var(--foreground, 222 47% 11%);\n  --ra-muted: var(--muted, 220 14% 96%);\n  --ra-muted-text: var(--muted-foreground, 220 9% 46%);\n  --ra-radius: var(--radius, 0.625rem);\n  --ra-dot-size: 0.5rem;\n  --ra-page-bg: var(--background, 220 14% 98%);\n  --ra-card-shadow: 0 1px 2px hsl(var(--ra-accent) / 0.04), 0 4px 12px hsl(var(--ra-accent) / 0.05);\n  --ra-card-shadow-hover: 0 2px 4px hsl(var(--ra-accent) / 0.06), 0 8px 24px hsl(var(--ra-accent) / 0.08);\n  --ra-row-hover: hsl(var(--ra-accent) / 0.05);\n  --ra-row-active-bg: hsl(var(--ra-accent) / 0.10);\n  --ra-row-active-bd: hsl(var(--ra-accent) / 0.45);\n  --ra-focus-ring: hsl(var(--ra-accent) / 0.35);\n  --ra-font-display: var(--font-display, var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));\n  --ra-font-ui: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);\n  --ra-title-weight: 600;\n  --ra-display-weight: 700;\n  --ra-info: var(--ra-blue, 214 95% 55%);\n  --ra-success: var(--ra-emerald, 142 71% 45%);\n  --ra-warning: var(--ra-amber, 38 92% 50%);\n  --ra-danger: var(--destructive, 0 72% 51%);\n}\n.ra-status-dot {\n  display: inline-block;\n  width: var(--ra-dot-size);\n  height: var(--ra-dot-size);\n  border-radius: 9999px;\n  flex-shrink: 0;\n}\n.ra-status-own {\n  background: hsl(var(--ra-status-own));\n}\n.ra-status-shared {\n  background: hsl(var(--ra-status-shared));\n}\n.ra-status-missing {\n  background: hsl(var(--ra-status-missing) / 0.4);\n  border: 1px solid hsl(var(--ra-status-missing) / 0.6);\n}\n.ra-row-active {\n  background: var(--ra-row-active-bg);\n  border-color: var(--ra-row-active-bd) !important;\n}\n');
 
 // src/components/RecordsAdmin/shell/shell.css
-styleInject(".ra-shell {\n  color: hsl(var(--ra-text));\n  background: hsl(var(--ra-page-bg));\n  font-family: var(--ra-font-ui);\n}\n.ra-shell *,\n.ra-shell *::before,\n.ra-shell *::after {\n  box-sizing: border-box;\n}\n.ra-shell .ra-card {\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-card-hover {\n  transition:\n    box-shadow .18s ease,\n    transform .18s ease,\n    border-color .18s ease;\n}\n.ra-shell .ra-card-hover:hover {\n  box-shadow: var(--ra-card-shadow-hover);\n}\n.ra-shell .ra-display {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  letter-spacing: -0.01em;\n}\n.ra-shell .ra-title {\n  font-weight: var(--ra-title-weight);\n}\n.ra-shell :where(button, [role=button], input, select, textarea, a):focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--ra-focus-ring);\n  border-radius: calc(var(--ra-radius) * 0.6);\n}\n.ra-shell .ra-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.65rem 0.9rem;\n  border-radius: var(--ra-radius);\n  border: 1px solid hsl(var(--ra-accent) / 0.12);\n  background:\n    linear-gradient(\n      135deg,\n      hsl(var(--ra-accent) / 0.08),\n      hsl(var(--ra-accent) / 0.02) 60%,\n      hsl(var(--ra-surface)) 100%);\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-header__main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n}\n.ra-shell .ra-header-aside {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-header-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  border-radius: calc(var(--ra-radius) * 0.9);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: hsl(var(--ra-accent) / 0.12);\n  color: hsl(var(--ra-accent));\n  border: 1px solid hsl(var(--ra-accent) / 0.18);\n}\n.ra-shell .ra-header-text {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-header-title {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 1rem;\n  line-height: 1.2;\n  color: hsl(var(--ra-text));\n  letter-spacing: -0.01em;\n  margin: 0;\n}\n.ra-shell .ra-header-subtitle {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.125rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-header-stats {\n  display: flex;\n  align-items: stretch;\n  gap: 0.15rem;\n  padding: 0.15rem 0.4rem;\n  border-radius: calc(var(--ra-radius) * 0.75);\n  background: hsl(var(--ra-surface) / 0.7);\n  border: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-stat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0.15rem 0.45rem;\n  min-width: 2.5rem;\n}\n.ra-shell .ra-stat-value {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 0.85rem;\n  color: hsl(var(--ra-text));\n  line-height: 1;\n}\n.ra-shell .ra-stat-label {\n  font-size: 0.6rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n}\n.ra-shell .ra-stat-divider {\n  width: 1px;\n  background: hsl(var(--ra-border));\n  margin: 0.25rem 0;\n}\n.ra-shell .ra-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ra-shell .ra-tabs {\n  display: flex;\n  gap: 0.25rem;\n  padding: 0.25rem;\n  background: hsl(var(--ra-muted));\n  border-radius: calc(var(--ra-radius) * 0.85);\n  border: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.4rem 0.7rem;\n  border-radius: calc(var(--ra-radius) * 0.65);\n  font-size: 0.78rem;\n  font-weight: 500;\n  color: hsl(var(--ra-muted-text));\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  transition:\n    background .15s ease,\n    color .15s ease,\n    transform .15s ease;\n  white-space: nowrap;\n}\n.ra-shell .ra-tab:hover {\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-tab[aria-selected=true] {\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  box-shadow: var(--ra-card-shadow);\n  font-weight: var(--ra-title-weight);\n}\n.ra-shell .ra-tab[aria-selected=true] .ra-tab-icon {\n  color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-tab[disabled] {\n  opacity: .5;\n  cursor: not-allowed;\n}\n.ra-shell .ra-tab-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  padding: 0 0.35rem;\n  height: 1.1rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-accent) / 0.12);\n  color: hsl(var(--ra-accent));\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1;\n}\n.ra-shell .ra-tab[aria-selected=false] .ra-tab-count {\n  background: hsl(var(--ra-muted-text) / 0.15);\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell[data-density=compact] .ra-row {\n  padding-block: 0.4rem;\n}\n.ra-shell[data-density=compact] .ra-header {\n  padding: 0.75rem 1rem;\n}\n.ra-shell[data-density=compact] .ra-header-icon {\n  width: 2.25rem;\n  height: 2.25rem;\n}\n.ra-shell .ra-row {\n  display: flex;\n  align-items: center;\n  gap: 0.65rem;\n  width: 100%;\n  text-align: left;\n  padding: 0.65rem 0.85rem;\n  border-left: 3px solid transparent;\n  background: transparent;\n  border-bottom: 1px solid transparent;\n  transition: background .12s ease, border-color .12s ease;\n  cursor: pointer;\n  color: hsl(var(--ra-text));\n  font-family: inherit;\n}\n.ra-shell .ra-row + .ra-row {\n  border-top: 1px solid hsl(var(--ra-border) / 0.6);\n}\n.ra-shell .ra-row:hover {\n  background: var(--ra-row-hover);\n}\n.ra-shell .ra-row[data-selected=true] {\n  background: var(--ra-row-active-bg);\n  border-left-color: var(--ra-row-active-bd);\n}\n.ra-shell .ra-row-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: calc(var(--ra-radius) * 0.6);\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  flex-shrink: 0;\n}\n.ra-shell .ra-row[data-selected=true] .ra-row-icon {\n  background: hsl(var(--ra-accent) / 0.15);\n  color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-row-body {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-row-title {\n  font-weight: var(--ra-title-weight);\n  font-size: 0.875rem;\n  line-height: 1.25;\n  color: hsl(var(--ra-text));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-row-sub {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-row-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.15rem;\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity .15s ease;\n}\n.ra-shell .ra-row:hover .ra-row-actions,\n.ra-shell .ra-row:focus-within .ra-row-actions {\n  opacity: 1;\n}\n.ra-shell .ra-row-action {\n  width: 1.6rem;\n  height: 1.6rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999px;\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border: 0;\n  cursor: pointer;\n  transition: background .15s ease, color .15s ease;\n}\n.ra-shell .ra-row-action:hover {\n  background: hsl(var(--ra-accent) / 0.10);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-row-action[data-tone=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.12);\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.15rem 0.5rem;\n  border-radius: 999px;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  border: 1px solid hsl(var(--ra-border));\n  white-space: nowrap;\n  max-width: 14rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-chip[data-tone=success] {\n  background: hsl(var(--ra-success) / 0.12);\n  color: hsl(var(--ra-success));\n  border-color: hsl(var(--ra-success) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=warning] {\n  background: hsl(var(--ra-warning) / 0.14);\n  color: hsl(var(--ra-warning));\n  border-color: hsl(var(--ra-warning) / 0.35);\n}\n.ra-shell .ra-chip[data-tone=info] {\n  background: hsl(var(--ra-info) / 0.10);\n  color: hsl(var(--ra-info));\n  border-color: hsl(var(--ra-info) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=danger] {\n  background: hsl(var(--ra-danger) / 0.10);\n  color: hsl(var(--ra-danger));\n  border-color: hsl(var(--ra-danger) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=muted] {\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border-style: dashed;\n}\n.ra-shell .ra-group {\n  border-bottom: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-group:last-child {\n  border-bottom: 0;\n}\n.ra-shell .ra-group-summary {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.5rem 0.85rem;\n  background: hsl(var(--ra-muted) / 0.6);\n  font-size: 0.7rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: hsl(var(--ra-muted-text));\n  border: 0;\n  cursor: pointer;\n  transition: background .12s ease;\n}\n.ra-shell .ra-group-summary:hover {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-group-summary .ra-group-chevron {\n  transition: transform .15s ease;\n}\n.ra-shell .ra-group[data-open=false] .ra-group-chevron {\n  transform: rotate(-90deg);\n}\n.ra-shell .ra-group-name {\n  flex: 1;\n  text-align: left;\n}\n.ra-shell .ra-group-count {\n  font-size: 0.65rem;\n  font-weight: 600;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: 999px;\n  padding: 0.05rem 0.4rem;\n}\n.ra-shell .ra-group[data-open=false] .ra-group-body {\n  display: none;\n}\n.ra-shell .ra-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 2.5rem 1.5rem;\n  gap: 0.75rem;\n}\n.ra-shell .ra-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.25rem;\n  height: 3.25rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-accent) / 0.08);\n  color: hsl(var(--ra-accent));\n  margin-bottom: 0.25rem;\n}\n.ra-shell .ra-empty-title {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 1rem;\n  color: hsl(var(--ra-text));\n  margin: 0;\n  letter-spacing: -0.01em;\n}\n.ra-shell .ra-empty-body {\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-muted-text));\n  max-width: 22rem;\n  line-height: 1.45;\n}\n.ra-shell .ra-empty-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n.ra-shell .ra-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.45rem 0.85rem;\n  border-radius: calc(var(--ra-radius) * 0.7);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  border: 1px solid hsl(var(--ra-border));\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  cursor: pointer;\n  transition:\n    background .15s ease,\n    border-color .15s ease,\n    box-shadow .15s ease,\n    transform .1s ease;\n}\n.ra-shell .ra-btn:hover {\n  background: hsl(var(--ra-muted));\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-btn:active {\n  transform: translateY(1px);\n}\n.ra-shell .ra-btn[data-variant=primary] {\n  background: hsl(var(--ra-accent));\n  color: hsl(var(--ra-surface));\n  border-color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-btn[data-variant=primary]:hover {\n  background: hsl(var(--ra-accent) / 0.92);\n}\n.ra-shell .ra-btn[data-variant=ghost] {\n  background: transparent;\n  border-color: transparent;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-btn[data-variant=ghost]:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-btn[data-variant=danger] {\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-btn[data-variant=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.10);\n  border-color: hsl(var(--ra-danger) / 0.40);\n}\n.ra-shell .ra-intro {\n  position: relative;\n  display: flex;\n  gap: 0.85rem;\n  padding: 0.9rem 1rem;\n  border-radius: var(--ra-radius);\n  border: 1px solid hsl(var(--ra-info) / 0.30);\n  background: hsl(var(--ra-info) / 0.08);\n  margin-bottom: 1rem;\n}\n.ra-shell .ra-intro[data-tone=success] {\n  border-color: hsl(var(--ra-success) / 0.30);\n  background: hsl(var(--ra-success) / 0.08);\n}\n.ra-shell .ra-intro[data-tone=warning] {\n  border-color: hsl(var(--ra-warning) / 0.35);\n  background: hsl(var(--ra-warning) / 0.10);\n}\n.ra-shell .ra-intro-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: hsl(var(--ra-info) / 0.18);\n  color: hsl(var(--ra-info));\n}\n.ra-shell .ra-intro[data-tone=success] .ra-intro-icon {\n  background: hsl(var(--ra-success) / 0.18);\n  color: hsl(var(--ra-success));\n}\n.ra-shell .ra-intro[data-tone=warning] .ra-intro-icon {\n  background: hsl(var(--ra-warning) / 0.20);\n  color: hsl(var(--ra-warning));\n}\n.ra-shell .ra-intro-body {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-intro-title {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-title-weight);\n  font-size: 0.875rem;\n  color: hsl(var(--ra-text));\n  margin: 0 0 0.2rem 0;\n}\n.ra-shell .ra-intro-text {\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text) / 0.85);\n  line-height: 1.45;\n}\n.ra-shell .ra-intro-dismiss {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  width: 1.6rem;\n  height: 1.6rem;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 0;\n  color: hsl(var(--ra-muted-text));\n  cursor: pointer;\n}\n.ra-shell .ra-intro-dismiss:hover {\n  background: hsl(var(--ra-text) / 0.06);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-bulk-menu {\n  min-width: 12rem;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: calc(var(--ra-radius) * 0.85);\n  box-shadow: var(--ra-card-shadow-hover);\n  padding: 0.3rem;\n  z-index: 30;\n}\n.ra-shell .ra-bulk-item {\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n  width: 100%;\n  padding: 0.45rem 0.6rem;\n  border-radius: calc(var(--ra-radius) * 0.6);\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text));\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  text-align: left;\n  transition: background .12s ease, color .12s ease;\n}\n.ra-shell .ra-bulk-item:hover {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-bulk-item[data-tone=danger] {\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-bulk-item[data-tone=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.10);\n}\n.ra-shell .ra-bulk-divider {\n  height: 1px;\n  background: hsl(var(--ra-border));\n  margin: 0.25rem 0;\n}\n.ra-shell .ra-preview-rail {\n  background: hsl(var(--ra-surface));\n  border-left: 1px solid hsl(var(--ra-border));\n  box-shadow: -4px 0 16px hsl(var(--ra-accent) / 0.04);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n.ra-shell .ra-preview-rail-header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background:\n    linear-gradient(\n      180deg,\n      hsl(var(--ra-surface)) 0%,\n      hsl(var(--ra-surface) / 0.92) 100%);\n  border-bottom: 1px solid hsl(var(--ra-border));\n  backdrop-filter: blur(6px);\n}\n.ra-shell .ra-preview-rail-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-preview-rail-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n}\n");
-var TOP_LEVEL_SCOPES = ["product", "facet"];
+styleInject(".ra-shell {\n  color: hsl(var(--ra-text));\n  background: hsl(var(--ra-page-bg));\n  font-family: var(--ra-font-ui);\n}\n.ra-shell *,\n.ra-shell *::before,\n.ra-shell *::after {\n  box-sizing: border-box;\n}\n.ra-shell .ra-card {\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-card-hover {\n  transition:\n    box-shadow .18s ease,\n    transform .18s ease,\n    border-color .18s ease;\n}\n.ra-shell .ra-card-hover:hover {\n  box-shadow: var(--ra-card-shadow-hover);\n}\n.ra-shell .ra-display {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  letter-spacing: -0.01em;\n}\n.ra-shell .ra-title {\n  font-weight: var(--ra-title-weight);\n}\n.ra-shell :where(button, [role=button], input, select, textarea, a):focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--ra-focus-ring);\n  border-radius: calc(var(--ra-radius) * 0.6);\n}\n.ra-shell .ra-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.65rem 0.9rem;\n  border-radius: var(--ra-radius);\n  border: 1px solid hsl(var(--ra-accent) / 0.12);\n  background:\n    linear-gradient(\n      135deg,\n      hsl(var(--ra-accent) / 0.08),\n      hsl(var(--ra-accent) / 0.02) 60%,\n      hsl(var(--ra-surface)) 100%);\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-header__main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n}\n.ra-shell .ra-header-aside {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-header-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  border-radius: calc(var(--ra-radius) * 0.9);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: hsl(var(--ra-accent) / 0.12);\n  color: hsl(var(--ra-accent));\n  border: 1px solid hsl(var(--ra-accent) / 0.18);\n}\n.ra-shell .ra-header-text {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-header-title {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 1rem;\n  line-height: 1.2;\n  color: hsl(var(--ra-text));\n  letter-spacing: -0.01em;\n  margin: 0;\n}\n.ra-shell .ra-header-subtitle {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.125rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-header-stats {\n  display: flex;\n  align-items: stretch;\n  gap: 0.15rem;\n  padding: 0.15rem 0.4rem;\n  border-radius: calc(var(--ra-radius) * 0.75);\n  background: hsl(var(--ra-surface) / 0.7);\n  border: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-header-stats--titled {\n  flex-direction: column;\n  align-items: stretch;\n  padding: 0.4rem 0.55rem;\n  gap: 0.3rem;\n}\n.ra-shell .ra-header-stats .ra-stats-items {\n  display: flex;\n  align-items: stretch;\n  gap: 0.15rem;\n}\n.ra-shell .ra-header-stats .ra-stats-heading {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.65rem;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n.ra-shell .ra-header-stats .ra-stats-heading-icon {\n  display: inline-flex;\n  align-items: center;\n  color: hsl(var(--ra-text));\n  opacity: 0.75;\n}\n.ra-shell .ra-header-stats .ra-stats-heading-icon > svg {\n  width: 0.85rem;\n  height: 0.85rem;\n}\n.ra-shell .ra-stat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0.15rem 0.45rem;\n  min-width: 2.5rem;\n}\n.ra-shell .ra-stat-value {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 0.85rem;\n  color: hsl(var(--ra-text));\n  line-height: 1;\n}\n.ra-shell .ra-stat-label {\n  font-size: 0.6rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n}\n.ra-shell .ra-stat-divider {\n  width: 1px;\n  background: hsl(var(--ra-border));\n  margin: 0.25rem 0;\n}\n.ra-shell .ra-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ra-shell .ra-tabs {\n  display: flex;\n  gap: 0.25rem;\n  padding: 0.25rem;\n  background: hsl(var(--ra-muted));\n  border-radius: calc(var(--ra-radius) * 0.85);\n  border: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.4rem 0.7rem;\n  border-radius: calc(var(--ra-radius) * 0.65);\n  font-size: 0.78rem;\n  font-weight: 500;\n  color: hsl(var(--ra-muted-text));\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  transition:\n    background .15s ease,\n    color .15s ease,\n    transform .15s ease;\n  white-space: nowrap;\n}\n.ra-shell .ra-tab:hover {\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-tab[aria-selected=true] {\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  box-shadow: var(--ra-card-shadow);\n  font-weight: var(--ra-title-weight);\n}\n.ra-shell .ra-tab[aria-selected=true] .ra-tab-icon {\n  color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-tab[disabled] {\n  opacity: .5;\n  cursor: not-allowed;\n}\n.ra-shell .ra-tab-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  padding: 0 0.35rem;\n  height: 1.1rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-accent) / 0.12);\n  color: hsl(var(--ra-accent));\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1;\n}\n.ra-shell .ra-tab[aria-selected=false] .ra-tab-count {\n  background: hsl(var(--ra-muted-text) / 0.15);\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell[data-density=compact] .ra-row {\n  padding-block: 0.4rem;\n}\n.ra-shell[data-density=compact] .ra-header {\n  padding: 0.75rem 1rem;\n}\n.ra-shell[data-density=compact] .ra-header-icon {\n  width: 2.25rem;\n  height: 2.25rem;\n}\n.ra-shell .ra-row {\n  display: flex;\n  align-items: center;\n  gap: 0.65rem;\n  width: 100%;\n  text-align: left;\n  padding: 0.65rem 0.85rem;\n  border-left: 3px solid transparent;\n  background: transparent;\n  border-bottom: 1px solid transparent;\n  transition: background .12s ease, border-color .12s ease;\n  cursor: pointer;\n  color: hsl(var(--ra-text));\n  font-family: inherit;\n}\n.ra-shell .ra-row + .ra-row {\n  border-top: 1px solid hsl(var(--ra-border) / 0.6);\n}\n.ra-shell .ra-row:hover {\n  background: var(--ra-row-hover);\n}\n.ra-shell .ra-row[data-selected=true] {\n  background: var(--ra-row-active-bg);\n  border-left-color: var(--ra-row-active-bd);\n}\n.ra-shell .ra-row-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: calc(var(--ra-radius) * 0.6);\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  flex-shrink: 0;\n}\n.ra-shell .ra-row[data-selected=true] .ra-row-icon {\n  background: hsl(var(--ra-accent) / 0.15);\n  color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-row-body {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-row-title {\n  font-weight: var(--ra-title-weight);\n  font-size: 0.875rem;\n  line-height: 1.25;\n  color: hsl(var(--ra-text));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-row-sub {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-row-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.15rem;\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity .15s ease;\n}\n.ra-shell .ra-row:hover .ra-row-actions,\n.ra-shell .ra-row:focus-within .ra-row-actions {\n  opacity: 1;\n}\n.ra-shell .ra-row-action {\n  width: 1.6rem;\n  height: 1.6rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999px;\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border: 0;\n  cursor: pointer;\n  transition: background .15s ease, color .15s ease;\n}\n.ra-shell .ra-row-action:hover {\n  background: hsl(var(--ra-accent) / 0.10);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-row-action[data-tone=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.12);\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.15rem 0.5rem;\n  border-radius: 999px;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  border: 1px solid hsl(var(--ra-border));\n  white-space: nowrap;\n  max-width: 14rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-chip[data-tone=success] {\n  background: hsl(var(--ra-success) / 0.12);\n  color: hsl(var(--ra-success));\n  border-color: hsl(var(--ra-success) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=warning] {\n  background: hsl(var(--ra-warning) / 0.14);\n  color: hsl(var(--ra-warning));\n  border-color: hsl(var(--ra-warning) / 0.35);\n}\n.ra-shell .ra-chip[data-tone=info] {\n  background: hsl(var(--ra-info) / 0.10);\n  color: hsl(var(--ra-info));\n  border-color: hsl(var(--ra-info) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=danger] {\n  background: hsl(var(--ra-danger) / 0.10);\n  color: hsl(var(--ra-danger));\n  border-color: hsl(var(--ra-danger) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=muted] {\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border-style: dashed;\n}\n.ra-shell .ra-group {\n  border-bottom: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-group:last-child {\n  border-bottom: 0;\n}\n.ra-shell .ra-group-summary {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.5rem 0.85rem;\n  background: hsl(var(--ra-muted) / 0.6);\n  font-size: 0.7rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: hsl(var(--ra-muted-text));\n  border: 0;\n  cursor: pointer;\n  transition: background .12s ease;\n}\n.ra-shell .ra-group-summary:hover {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-group-summary .ra-group-chevron {\n  transition: transform .15s ease;\n}\n.ra-shell .ra-group[data-open=false] .ra-group-chevron {\n  transform: rotate(-90deg);\n}\n.ra-shell .ra-group-name {\n  flex: 1;\n  text-align: left;\n}\n.ra-shell .ra-group-count {\n  font-size: 0.65rem;\n  font-weight: 600;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: 999px;\n  padding: 0.05rem 0.4rem;\n}\n.ra-shell .ra-group[data-open=false] .ra-group-body {\n  display: none;\n}\n.ra-shell .ra-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 2.5rem 1.5rem;\n  gap: 0.75rem;\n}\n.ra-shell .ra-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.25rem;\n  height: 3.25rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-accent) / 0.08);\n  color: hsl(var(--ra-accent));\n  margin-bottom: 0.25rem;\n}\n.ra-shell .ra-empty-title {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 1rem;\n  color: hsl(var(--ra-text));\n  margin: 0;\n  letter-spacing: -0.01em;\n}\n.ra-shell .ra-empty-body {\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-muted-text));\n  max-width: 22rem;\n  line-height: 1.45;\n}\n.ra-shell .ra-empty-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n.ra-shell .ra-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.45rem 0.85rem;\n  border-radius: calc(var(--ra-radius) * 0.7);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  border: 1px solid hsl(var(--ra-border));\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  cursor: pointer;\n  transition:\n    background .15s ease,\n    border-color .15s ease,\n    box-shadow .15s ease,\n    transform .1s ease;\n}\n.ra-shell .ra-btn:hover {\n  background: hsl(var(--ra-muted));\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-btn:active {\n  transform: translateY(1px);\n}\n.ra-shell .ra-btn[data-variant=primary] {\n  background: hsl(var(--ra-accent));\n  color: hsl(var(--ra-surface));\n  border-color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-btn[data-variant=primary]:hover {\n  background: hsl(var(--ra-accent) / 0.92);\n}\n.ra-shell .ra-btn[data-variant=ghost] {\n  background: transparent;\n  border-color: transparent;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-btn[data-variant=ghost]:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-btn[data-variant=danger] {\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-btn[data-variant=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.10);\n  border-color: hsl(var(--ra-danger) / 0.40);\n}\n.ra-shell .ra-intro {\n  position: relative;\n  display: flex;\n  gap: 0.85rem;\n  padding: 0.9rem 1rem;\n  border-radius: var(--ra-radius);\n  border: 1px solid hsl(var(--ra-info) / 0.30);\n  background: hsl(var(--ra-info) / 0.08);\n  margin-bottom: 1rem;\n}\n.ra-shell .ra-intro[data-tone=success] {\n  border-color: hsl(var(--ra-success) / 0.30);\n  background: hsl(var(--ra-success) / 0.08);\n}\n.ra-shell .ra-intro[data-tone=warning] {\n  border-color: hsl(var(--ra-warning) / 0.35);\n  background: hsl(var(--ra-warning) / 0.10);\n}\n.ra-shell .ra-intro-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: hsl(var(--ra-info) / 0.18);\n  color: hsl(var(--ra-info));\n}\n.ra-shell .ra-intro[data-tone=success] .ra-intro-icon {\n  background: hsl(var(--ra-success) / 0.18);\n  color: hsl(var(--ra-success));\n}\n.ra-shell .ra-intro[data-tone=warning] .ra-intro-icon {\n  background: hsl(var(--ra-warning) / 0.20);\n  color: hsl(var(--ra-warning));\n}\n.ra-shell .ra-intro-body {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-intro-title {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-title-weight);\n  font-size: 0.875rem;\n  color: hsl(var(--ra-text));\n  margin: 0 0 0.2rem 0;\n}\n.ra-shell .ra-intro-text {\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text) / 0.85);\n  line-height: 1.45;\n}\n.ra-shell .ra-intro-dismiss {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  width: 1.6rem;\n  height: 1.6rem;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 0;\n  color: hsl(var(--ra-muted-text));\n  cursor: pointer;\n}\n.ra-shell .ra-intro-dismiss:hover {\n  background: hsl(var(--ra-text) / 0.06);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-bulk-menu {\n  min-width: 12rem;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: calc(var(--ra-radius) * 0.85);\n  box-shadow: var(--ra-card-shadow-hover);\n  padding: 0.3rem;\n  z-index: 60;\n}\n.ra-shell .ra-bulk-item {\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n  width: 100%;\n  padding: 0.45rem 0.6rem;\n  border-radius: calc(var(--ra-radius) * 0.6);\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text));\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  text-align: left;\n  transition: background .12s ease, color .12s ease;\n}\n.ra-shell .ra-bulk-item:hover {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-bulk-item[data-tone=danger] {\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-bulk-item[data-tone=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.10);\n}\n.ra-shell .ra-bulk-divider {\n  height: 1px;\n  background: hsl(var(--ra-border));\n  margin: 0.25rem 0;\n}\n.ra-shell .ra-preview-rail {\n  background: hsl(var(--ra-surface));\n  border-left: 1px solid hsl(var(--ra-border));\n  box-shadow: -4px 0 16px hsl(var(--ra-accent) / 0.04);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n.ra-shell .ra-preview-rail-header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background:\n    linear-gradient(\n      180deg,\n      hsl(var(--ra-surface)) 0%,\n      hsl(var(--ra-surface) / 0.92) 100%);\n  border-bottom: 1px solid hsl(var(--ra-border));\n  backdrop-filter: blur(6px);\n}\n.ra-shell .ra-preview-rail-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-preview-rail-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n}\n.ra-confirm-root {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n.ra-confirm-root .ra-confirm-backdrop {\n  position: absolute;\n  inset: 0;\n  background: hsl(0 0% 0% / 0.45);\n  backdrop-filter: blur(2px);\n  animation: ra-confirm-fade .12s ease-out;\n}\n.ra-confirm-root .ra-confirm-card {\n  position: relative;\n  width: min(440px, 100%);\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.08), 0 24px 48px -12px hsl(0 0% 0% / 0.32);\n  padding: 1.25rem;\n  animation: ra-confirm-pop .14s ease-out;\n}\n.ra-confirm-root .ra-confirm-header {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  margin-bottom: 0.5rem;\n}\n.ra-confirm-root .ra-confirm-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-warning, 38 92% 50%) / 0.12);\n  color: hsl(var(--ra-warning, 38 92% 50%));\n}\n.ra-confirm-root .ra-confirm-title {\n  font-family: var(--ra-font-display);\n  font-weight: 600;\n  font-size: 1rem;\n  margin: 0;\n}\n.ra-confirm-root .ra-confirm-body {\n  font-size: 0.875rem;\n  color: hsl(var(--ra-muted-text));\n  margin: 0 0 1.1rem;\n  line-height: 1.45;\n}\n.ra-confirm-root .ra-confirm-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.ra-confirm-root .ra-confirm-btn {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: calc(var(--ra-radius) - 2px);\n  padding: 0.45rem 0.85rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background-color .12s ease,\n    border-color .12s ease,\n    color .12s ease;\n}\n.ra-confirm-root .ra-confirm-btn:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--ra-focus-ring);\n}\n.ra-confirm-root .ra-confirm-btn-ghost {\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border-color: hsl(var(--ra-border));\n}\n.ra-confirm-root .ra-confirm-btn-ghost:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-confirm-root .ra-confirm-btn-danger {\n  background: transparent;\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  border-color: hsl(var(--ra-danger, 0 72% 51%) / 0.45);\n}\n.ra-confirm-root .ra-confirm-btn-danger:hover {\n  background: hsl(var(--ra-danger, 0 72% 51%) / 0.08);\n  border-color: hsl(var(--ra-danger, 0 72% 51%));\n}\n.ra-confirm-root .ra-confirm-btn-primary {\n  background: hsl(var(--ra-accent));\n  color: hsl(var(--ra-accent-fg, 0 0% 100%));\n  border-color: hsl(var(--ra-accent));\n}\n.ra-confirm-root .ra-confirm-btn-primary:hover {\n  filter: brightness(0.95);\n}\n@keyframes ra-confirm-fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes ra-confirm-pop {\n  from {\n    opacity: 0;\n    transform: translateY(4px) scale(.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.ra-shell .ra-unsaved-banner {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid hsl(var(--ra-warning, 38 92% 50%) / 0.35);\n  background: hsl(var(--ra-warning, 38 92% 50%) / 0.08);\n  border-radius: var(--ra-radius);\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text));\n  animation: ra-unsaved-slide .14s ease-out;\n}\n.ra-shell .ra-unsaved-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--ra-warning, 38 92% 50%));\n  flex-shrink: 0;\n}\n.ra-shell .ra-unsaved-text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ra-shell .ra-unsaved-context {\n  color: hsl(var(--ra-muted-text));\n  font-weight: 400;\n}\n.ra-shell .ra-unsaved-error {\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  font-weight: 500;\n}\n.ra-shell .ra-unsaved-actions {\n  display: inline-flex;\n  gap: 0.4rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-unsaved-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: calc(var(--ra-radius) - 2px);\n  padding: 0.3rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background-color .12s ease,\n    border-color .12s ease,\n    color .12s ease,\n    opacity .12s ease;\n}\n.ra-shell .ra-unsaved-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ra-shell .ra-unsaved-btn:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--ra-focus-ring);\n}\n.ra-shell .ra-unsaved-btn-ghost {\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border-color: hsl(var(--ra-border));\n}\n.ra-shell .ra-unsaved-btn-ghost:hover:not(:disabled) {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-unsaved-btn-primary {\n  background: hsl(var(--ra-accent));\n  color: hsl(var(--ra-accent-fg, 0 0% 100%));\n  border-color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-unsaved-btn-primary:hover:not(:disabled) {\n  filter: brightness(0.95);\n}\n@keyframes ra-unsaved-slide {\n  from {\n    opacity: 0;\n    transform: translateY(-3px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n");
+var TOP_LEVEL_SCOPES = ["facet", "product"];
 var defaultItemId = () => {
   const time = Date.now().toString(36);
   const rand = Math.random().toString(36).slice(2, 8);
@@ -2230,7 +2696,11 @@ function RecordsAdminShell(props) {
     className,
     previewMode = "inline",
     previewScopePicker = false,
-    dirtyStrategy = "prompt",
+    // Default to `keep` — admins can tab around freely while edits are
+    // preserved per editor mount, and the inline UnsavedBanner surfaces the
+    // dirty state at the top of the shell with Save/Discard buttons. Hosts
+    // that want the old blocking behaviour can opt back into `'prompt'`.
+    dirtyStrategy = "keep",
     onBeforeDelete,
     disableBeforeUnload = false,
     presentations = ["list"],
@@ -2248,6 +2718,9 @@ function RecordsAdminShell(props) {
     showStats = false,
     showHeaderIcon = true,
     statsItems,
+    statsTitle,
+    statsIcon,
+    showHeader,
     icons: iconsOverride,
     groupBy,
     renderEmptyState,
@@ -2271,7 +2744,7 @@ function RecordsAdminShell(props) {
   );
   const probe = useScopeProbe({ SL, collectionId });
   const topLevelScopes = useMemo(
-    () => requestedScopes.filter((s) => TOP_LEVEL_SCOPES.includes(s)),
+    () => TOP_LEVEL_SCOPES.filter((s) => requestedScopes.includes(s)),
     [requestedScopes]
   );
   const drillVariantsAllowed = useMemo(
@@ -2285,6 +2758,7 @@ function RecordsAdminShell(props) {
   const initialScope = useMemo(() => {
     if (contextScope?.productId && topLevelScopes.includes("product")) return "product";
     if (defaultScope && topLevelScopes.includes(defaultScope)) return defaultScope;
+    if (topLevelScopes.includes("facet")) return "facet";
     return topLevelScopes[0] ?? "product";
   }, [contextScope?.productId, defaultScope, topLevelScopes]);
   const [activeScope, setActiveScope] = useState(initialScope);
@@ -2337,6 +2811,14 @@ function RecordsAdminShell(props) {
     contextScope,
     enabled: activeScope === "facet" && !probe.isLoading
   });
+  const facetBrowse = useFacetBrowse({
+    SL,
+    collectionId,
+    existing: recordList.allItems,
+    search,
+    filter,
+    enabled: activeScope === "facet" && !probe.isLoading
+  });
   const variantChildren = useProductChildren({
     SL,
     collectionId,
@@ -2358,9 +2840,9 @@ function RecordsAdminShell(props) {
   useEffect(() => {
     if (activeScope !== "facet") return;
     if (selectedFacetRef) return;
-    const first = recordList.items[0];
+    const first = facetBrowse.items[0];
     if (first) setSelectedFacetRef(first.ref);
-  }, [activeScope, selectedFacetRef, recordList.items]);
+  }, [activeScope, selectedFacetRef, facetBrowse.items]);
   useEffect(() => {
     setSearch("");
     setFilter("all");
@@ -2397,9 +2879,10 @@ function RecordsAdminShell(props) {
   const refetchAll = useCallback(() => {
     productBrowse.refetch();
     recordList.refetch();
+    facetBrowse.refetch();
     variantChildren.refetch();
     batchChildren.refetch();
-  }, [productBrowse, recordList, variantChildren, batchChildren]);
+  }, [productBrowse, recordList, facetBrowse, variantChildren, batchChildren]);
   const editorCtx = useRecordEditor({
     ctx,
     scope: editingScope ?? parseRef(""),
@@ -2425,13 +2908,19 @@ function RecordsAdminShell(props) {
   useUnsavedGuard({
     isDirty: editorCtx.isDirty,
     label: recordType,
-    disableBeforeUnload
+    disableBeforeUnload,
+    // In `keep` mode we don't want the host iframe to pop its own native
+    // confirm — the banner is the canonical surface. Hosts on `prompt` /
+    // `autosave` opt back into platform notifications.
+    disableParentMessage: dirtyStrategy === "keep"
   });
+  const dirtyConfirm = useConfirmDialog();
   const { runWithGuard } = useDirtyNavigation({
     strategy: dirtyStrategy,
     isDirty: editorCtx.isDirty,
     save: editorCtx.save,
     reset: editorCtx.reset,
+    confirm: dirtyConfirm.confirm,
     i18n: {
       title: i18n.unsavedPromptTitle,
       body: i18n.unsavedPromptBody,
@@ -2468,11 +2957,40 @@ function RecordsAdminShell(props) {
   const csvBulk = csvSchema ? { onImportCsv: handleImport, onExportCsv: handleExport } : {};
   const [previewScope, setPreviewScope] = useState(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [sidePreviewOpen, setSidePreviewOpen] = useState(true);
   useEffect(() => {
     if (!editingScope) return;
     setPreviewScope((cur) => cur === null ? editingScope : cur);
   }, [editingScope]);
   const effectivePreviewScope = previewScope ?? editingScope;
+  const editorHeaderLabel = useMemo(() => {
+    if (!editingScope) return void 0;
+    if (activeScope === "facet" && selectedFacetRef) {
+      const hit = facetBrowse.items.find((it) => it.ref === selectedFacetRef);
+      return hit?.label;
+    }
+    if (activeScope === "product" && selectedProductId) {
+      const hit = productBrowse.items.find((it) => it.id === selectedProductId);
+      return hit?.name ?? selectedProductId;
+    }
+    return void 0;
+  }, [activeScope, editingScope, selectedFacetRef, selectedProductId, facetBrowse.items, productBrowse.items]);
+  const editorHeaderSubtitle = useMemo(() => {
+    if (!editingScope) return void 0;
+    if (activeScope === "facet" && selectedFacetRef) {
+      const hit = facetBrowse.items.find((it) => it.ref === selectedFacetRef);
+      return hit?.subtitle;
+    }
+    return void 0;
+  }, [activeScope, editingScope, selectedFacetRef, selectedProductId, facetBrowse.items, productBrowse.items]);
+  const editorHeaderMeta = useMemo(() => {
+    if (!editingScope) return void 0;
+    if (activeScope === "product" && selectedProductId) {
+      const hit = productBrowse.items.find((it) => it.id === selectedProductId);
+      return hit?.sku ?? selectedProductId;
+    }
+    return void 0;
+  }, [activeScope, editingScope, selectedProductId, productBrowse.items]);
   const renderEditorWithPreview = () => {
     if (!editingScope) return null;
     const previewBody = renderPreview && effectivePreviewScope ? renderPreview({ resolved: editorCtx.value, previewScope: effectivePreviewScope }) : null;
@@ -2498,6 +3016,9 @@ function RecordsAdminShell(props) {
         preview: inlinePreviewBody,
         footerExtra: extraFooter,
         onBeforeDelete: onBeforeDelete && editingScope ? () => onBeforeDelete(editingScope) : void 0,
+        headerLabel: editorHeaderLabel,
+        headerSubtitle: editorHeaderSubtitle,
+        headerMeta: editorHeaderMeta,
         children: renderEditor(editorCtx)
       }
     );
@@ -2509,9 +3030,28 @@ function RecordsAdminShell(props) {
       );
     }
     if (previewMode === "side") {
+      if (!sidePreviewOpen) {
+        return /* @__PURE__ */ jsx("div", { className: "relative h-full", children: baseEditor(
+          /* @__PURE__ */ jsx(
+            PreviewToggleButton,
+            {
+              onClick: () => setSidePreviewOpen(true),
+              label: i18n.openPreview
+            }
+          )
+        ) });
+      }
       return /* @__PURE__ */ jsxs("div", { className: "grid h-full", style: { gridTemplateColumns: "minmax(0, 1fr) minmax(280px, 420px)" }, children: [
         /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: baseEditor() }),
-        /* @__PURE__ */ jsx(SidePreview, { label: i18n.preview, scopePicker, children: previewBody })
+        /* @__PURE__ */ jsx(
+          SidePreview,
+          {
+            label: i18n.preview,
+            scopePicker,
+            onClose: () => setSidePreviewOpen(false),
+            children: previewBody
+          }
+        )
       ] });
     }
     if (previewMode === "tab") {
@@ -2543,6 +3083,18 @@ function RecordsAdminShell(props) {
   };
   const isProductTab = activeScope === "product";
   const productPinned = !!contextScope?.productId;
+  const effectivePresentation = isProductTab ? presentation : "list";
+  const showPresentationSwitcher = isProductTab && presentations.length > 1;
+  const effectiveGroupBy = useMemo(() => {
+    if (groupBy) return groupBy;
+    if (isProductTab) return void 0;
+    return (record) => {
+      const key = record.scope.facetId;
+      if (!key) return null;
+      const label2 = record.subtitle ?? key;
+      return { key, label: label2 };
+    };
+  }, [groupBy, isProductTab]);
   const productListItems = useMemo(() => {
     if (productPinned) {
       return [{
@@ -2557,9 +3109,9 @@ function RecordsAdminShell(props) {
     }
     return productBrowse.items.map(productItemToSummary);
   }, [productPinned, contextScope, productBrowse.items]);
-  const leftItems = isProductTab ? productListItems : recordList.items;
-  const leftLoading = isProductTab ? !productPinned && productBrowse.isLoading : recordList.isLoading || probe.isLoading;
-  const leftError = isProductTab ? productBrowse.error : recordList.error;
+  const leftItems = isProductTab ? productListItems : facetBrowse.items;
+  const leftLoading = isProductTab ? !productPinned && productBrowse.isLoading : facetBrowse.isLoading || recordList.isLoading || probe.isLoading;
+  const leftError = isProductTab ? productBrowse.error : facetBrowse.error ?? recordList.error;
   const leftSelectedRef = isProductTab ? selectedProductId ? buildRef({ productId: selectedProductId }) : void 0 : selectedFacetRef;
   const onLeftSelect = (item) => {
     void runWithGuard(() => {
@@ -2579,6 +3131,7 @@ function RecordsAdminShell(props) {
       className: `ra-shell flex flex-col h-full ${className ?? ""}`,
       "data-density": density,
       children: [
+        dirtyConfirm.dialog,
         /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 space-y-3", children: [
           intro && !dismissed && /* @__PURE__ */ jsx(
             IntroCard,
@@ -2591,24 +3144,31 @@ function RecordsAdminShell(props) {
               }
             }
           ),
-          /* @__PURE__ */ jsx(
-            ShellHeader,
-            {
-              title: title ?? label ?? recordType,
-              subtitle,
-              headerIcon,
-              headerActions,
-              showStats,
-              showHeaderIcon,
-              recordType,
-              icons,
-              stats: {
-                products: productBrowse.items.length,
-                shared: recordList.items.length
-              },
-              statsItems
-            }
-          ),
+          (() => {
+            const headerCustomised = !!title || !!subtitle || !!headerIcon || !!headerActions || showStats || !!statsItems || !!statsTitle || !!statsIcon;
+            const renderHeader = showHeader === true || showHeader !== false && headerCustomised;
+            if (!renderHeader) return null;
+            return /* @__PURE__ */ jsx(
+              ShellHeader,
+              {
+                title: title ?? label ?? recordType ?? "",
+                subtitle,
+                headerIcon,
+                headerActions,
+                showStats,
+                showHeaderIcon,
+                recordType,
+                icons,
+                stats: {
+                  products: productBrowse.items.length,
+                  shared: recordList.items.length
+                },
+                statsItems,
+                statsTitle,
+                statsIcon
+              }
+            );
+          })(),
           /* @__PURE__ */ jsx(
             UtilityRow,
             {
@@ -2616,6 +3176,25 @@ function RecordsAdminShell(props) {
               introHidden: dismissed && !!intro,
               onShowIntro: undismiss
             }
+          ),
+          editorCtx.isDirty && /* @__PURE__ */ jsx(
+            UnsavedBanner,
+            {
+              label: editorHeaderLabel,
+              context: editorHeaderSubtitle,
+              isSaving: !!editorCtx.isSaving,
+              saveError: editorCtx.saveError,
+              onSave: () => {
+                void editorCtx.save().catch(() => {
+                });
+              },
+              onDiscard: editorCtx.reset,
+              saveLabel: i18n.save,
+              discardLabel: i18n.discard,
+              savingLabel: i18n.saving,
+              errorLabel: i18n.saveError,
+              bodyTemplate: i18n.unsavedBannerBody
+            }
           )
         ] }),
         /* @__PURE__ */ jsxs(
@@ -2639,7 +3218,7 @@ function RecordsAdminShell(props) {
                     loading: probe.isLoading,
                     counts: {
                       product: productBrowse.items.length,
-                      facet: recordList.items.length
+                      facet: facetBrowse.items.length
                     },
                     icons: icons.scope
                   }
@@ -2663,14 +3242,23 @@ function RecordsAdminShell(props) {
                     /* @__PURE__ */ jsx(
                       PresentationSwitcher,
                       {
-                        options: presentations,
+                        options: showPresentationSwitcher ? presentations : [],
                         value: presentation,
                         onChange: onPresentationChange,
                         i18n
                       }
                     )
                   ] }),
-                  !isProductTab && /* @__PURE__ */ jsx(StatusFilterPills, { value: filter, onChange: setFilter, counts: recordList.counts, i18n }),
+                  !isProductTab && /* @__PURE__ */ jsx(
+                    StatusFilterPills,
+                    {
+                      value: filter,
+                      onChange: setFilter,
+                      counts: facetBrowse.counts,
+                      hideZero: ["partial"],
+                      i18n
+                    }
+                  ),
                   cardinality === "collection" && !isProductTab && editingScope && /* @__PURE__ */ jsxs(
                     "button",
                     {
@@ -2712,10 +3300,10 @@ function RecordsAdminShell(props) {
                         selectedRef: leftSelectedRef,
                         onSelect: onLeftSelect,
                         dirtyRef: editorCtx.isDirty ? editingScope?.raw : void 0,
-                        presentation,
+                        presentation: effectivePresentation,
                         renderListRow,
                         renderCard,
-                        groupBy
+                        groupBy: effectiveGroupBy
                       }
                     ),
                     isProductTab && !productPinned && productBrowse.hasNextPage && /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
@@ -3175,6 +3763,6 @@ function useMergedRecord(args) {
   };
 }
 
-export { ALL_PRESENTATIONS, BatchList, BulkActionsMenu, DEFAULT_I18N, DEFAULT_ICONS, DefaultRecordCard, DefaultRecordRow, DeleteButton, DrawerPreview, EmptyState, ErrorState, FacetList, InheritanceMarker, InheritanceProvider, InlinePreview, IntroCard, LoadingState, PresentationSwitcher, PreviewScopePicker, PreviewToggleButton, ProductDrillDown, ProductList, RecordBrowser, RecordEditor, RecordList, RecordsAdminShell, ResolvedPreview, ScopeBreadcrumb, ScopeTabs, SidePreview, StatusDot, StatusFilterPills, TabbedPreview, UtilityRow, VariantList, buildRef, bulkDelete, bulkUpsert, deleteRecord, downloadBlob, exportCsv, getRecordByRef, importCsv, listRecords, matchRecords, mergeIcons, parseRef, parsedRefToScope, parsedRefToTarget, pickHeaderIcon, resolutionChain, resolveRecord, restoreRecord, scopesEqual, upsertRecord, useCollectedRecords, useDirtyNavigation, useIntroDismissed, useMergedRecord, usePresentationPref, useProductBrowse, useProductChildren, useRecordEditor, useRecordList, useResolveAllRecords, useResolvedRecord, useRulePreview, useScopeProbe, useUnsavedGuard };
+export { ALL_PRESENTATIONS, BatchList, BulkActionsMenu, DEFAULT_I18N, DEFAULT_ICONS, DefaultRecordCard, DefaultRecordRow, DeleteButton, DrawerPreview, EmptyState, ErrorState, FacetList, InheritanceMarker, InheritanceProvider, InlinePreview, IntroCard, LoadingState, PresentationSwitcher, PreviewScopePicker, PreviewToggleButton, ProductDrillDown, ProductList, RecordBrowser, RecordEditor, RecordList, RecordsAdminShell, ResolvedPreview, ScopeBreadcrumb, ScopeTabs, SidePreview, StatusDot, StatusFilterPills, TabbedPreview, UtilityRow, VariantList, buildRef, bulkDelete, bulkUpsert, deleteRecord, downloadBlob, exportCsv, getRecordByRef, importCsv, listRecords, matchRecords, mergeIcons, parseRef, parsedRefToScope, parsedRefToTarget, pickHeaderIcon, resolutionChain, resolveRecord, restoreRecord, scopesEqual, upsertRecord, useCollectedRecords, useDirtyNavigation, useFacetBrowse, useIntroDismissed, useMergedRecord, usePresentationPref, useProductBrowse, useProductChildren, useRecordEditor, useRecordList, useResolveAllRecords, useResolvedRecord, useRulePreview, useScopeProbe, useUnsavedGuard };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map