@proveanything/smartlinks-utils-ui 0.3.7 → 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",
@@ -455,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 {
@@ -1101,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",
@@ -1139,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",
@@ -1641,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" }),
@@ -1669,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 })
+          ] })
         ]
       }
     ),
@@ -1884,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 })
 ] });
@@ -2004,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,
@@ -2021,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))"
@@ -2050,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,
@@ -2094,7 +2345,7 @@ var PreviewScopePicker = ({
         ]
       }
     ),
-    showBatches && value.productId && batches.items.length > 0 && /* @__PURE__ */ jsxs(
+    showBatchPicker && /* @__PURE__ */ jsxs(
       "select",
       {
         className: SELECT_CLS,
@@ -2241,6 +2492,61 @@ function ShellHeader({
     ] })
   ] });
 }
+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) => {
@@ -2350,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-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: 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);
@@ -2390,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"],
@@ -2434,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(
@@ -2448,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);
@@ -2597,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,
@@ -2640,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;
@@ -2670,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)
       }
     );
@@ -2681,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") {
@@ -2715,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 [{
@@ -2751,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,
@@ -2795,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(
@@ -2842,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: facetBrowse.counts, i18n }),
+                  !isProductTab && /* @__PURE__ */ jsx(
+                    StatusFilterPills,
+                    {
+                      value: filter,
+                      onChange: setFilter,
+                      counts: facetBrowse.counts,
+                      hideZero: ["partial"],
+                      i18n
+                    }
+                  ),
                   cardinality === "collection" && !isProductTab && editingScope && /* @__PURE__ */ jsxs(
                     "button",
                     {
@@ -2891,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(