@proveanything/smartlinks-utils-ui 0.3.7 → 0.3.9

package/dist/components/RecordsAdmin/index.js

@@ -1,8 +1,9 @@
-import { styleInject } from '../../chunk-WFNEZQCD.js';
+import { styleInject } from '../../chunk-IGFYMNKL.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, ClipboardPaste, 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",
@@ -91,7 +93,20 @@ var DEFAULT_I18N = {
   noItemsTitle: "No items yet",
   noItemsBody: "Create your first item to get started.",
   railEmptyTitle: "No records yet",
-  railEmptyBody: "Records you create will appear here."
+  railEmptyBody: "Records you create will appear here.",
+  copy: "Copy",
+  paste: "Paste",
+  pasteFrom: "Paste from {name}",
+  pasteReplace: "Paste (replace)",
+  clipboardEmpty: "Nothing to paste",
+  copyToast: "Copied {name}. Pick a destination to paste.",
+  pasteToast: "Pasted from {name}. Review and Save.",
+  pasteConfirmTitle: "Replace existing values?",
+  pasteConfirmBody: "{destination} already has saved values. Replace them with the copied values?",
+  pasteConfirmReplace: "Replace",
+  pasteConfirmCancel: "Cancel",
+  pasteWarnTitle: "Cross-scope paste",
+  pasteWarnContinue: "Continue"
 };
 
 // src/components/RecordsAdmin/types/presentation.ts
@@ -455,12 +470,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 +1128,260 @@ 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
+                    }
+                  ),
+                  saveLabel ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      ref: saveBtnRef,
+                      className: "ra-confirm-btn ra-confirm-btn-primary",
+                      onClick: () => onChoice("save"),
+                      children: saveLabel
+                    }
+                  ) : null
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    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 DEFAULTS2 = {
+  title: "Replace existing values?",
+  body: "This destination already has saved values. Replace them?",
+  confirmLabel: "Replace",
+  cancelLabel: "Cancel"
+};
+var usePasteConfirm = () => {
+  const [open, setOpen] = useState(false);
+  const [state, setState] = useState(DEFAULTS2);
+  const resolverRef = useRef(null);
+  const confirm = useCallback((i18n) => {
+    setState({ ...DEFAULTS2, ...i18n ?? {} });
+    setOpen(true);
+    return new Promise((resolve) => {
+      resolverRef.current = resolve;
+    });
+  }, []);
+  const handleChoice = useCallback((choice) => {
+    setOpen(false);
+    const r = resolverRef.current;
+    resolverRef.current = null;
+    r?.(choice === "discard");
+  }, []);
+  return {
+    confirm,
+    dialog: /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open,
+        title: state.title,
+        body: state.body,
+        saveLabel: "",
+        discardLabel: state.confirmLabel,
+        cancelLabel: state.cancelLabel,
+        onChoice: handleChoice
+      }
+    )
+  };
+};
+var stores = /* @__PURE__ */ new Map();
+var storageKey = (key) => `ra:clipboard:${key}`;
+var getStore = (key) => {
+  let s = stores.get(key);
+  if (!s) {
+    s = { entry: null, listeners: /* @__PURE__ */ new Set() };
+    if (typeof window !== "undefined") {
+      try {
+        const raw = window.sessionStorage.getItem(storageKey(key));
+        if (raw) s.entry = JSON.parse(raw);
+      } catch {
+      }
+    }
+    stores.set(key, s);
+  }
+  return s;
+};
+var persist = (key, entry) => {
+  if (typeof window === "undefined") return;
+  try {
+    if (entry) window.sessionStorage.setItem(storageKey(key), JSON.stringify(entry));
+    else window.sessionStorage.removeItem(storageKey(key));
+  } catch {
+  }
+};
+var notify = (store) => {
+  store.listeners.forEach((l) => l());
+};
+var composeKey = (appId, recordType) => `${appId}::${recordType}`;
+function useRecordClipboard(args) {
+  const key = composeKey(args.appId, args.recordType);
+  const store = getStore(key);
+  const [entry, setEntry] = useState(
+    store.entry
+  );
+  useEffect(() => {
+    const listener = () => setEntry(store.entry);
+    store.listeners.add(listener);
+    listener();
+    return () => {
+      store.listeners.delete(listener);
+    };
+  }, [store]);
+  const set = useCallback((next) => {
+    const full = { ...next, copiedAt: (/* @__PURE__ */ new Date()).toISOString() };
+    store.entry = full;
+    persist(key, full);
+    notify(store);
+  }, [store, key]);
+  const clear = useCallback(() => {
+    store.entry = null;
+    persist(key, null);
+    notify(store);
+  }, [store, key]);
+  return { entry, hasEntry: entry != null, set, clear };
+}
+function checkPasteCompatibility(source, destination) {
+  const from = source.kind;
+  const to = destination.kind;
+  if (from === to) return { status: "allowed" };
+  if ((from === "variant" || from === "batch") && to === "product") {
+    return { status: "warn", reason: "This will overwrite product-level values." };
+  }
+  return { status: "allowed" };
+}
+function cloneValue(value) {
+  if (value == null) return value;
+  try {
+    return structuredClone(value);
+  } catch {
+    try {
+      return JSON.parse(JSON.stringify(value));
+    } catch {
+      return value;
+    }
+  }
+}
 var LABELS = {
   product: "Products",
   facet: "Shared",
@@ -1139,14 +1420,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",
@@ -1177,8 +1461,90 @@ var StatusDot = ({ source, status, className }) => {
   else if (source === "inherited" || status === "partial") cls = "ra-status-shared";
   return /* @__PURE__ */ jsx("span", { className: cn("ra-status-dot", cls, className), "aria-hidden": "true" });
 };
+var RowContextMenu = ({
+  onCopy,
+  onPaste,
+  canPaste,
+  pasteWillReplace,
+  pasteSourceLabel,
+  i18n
+}) => {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (!wrapperRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  if (!onCopy && !onPaste) return null;
+  const pasteLabel = !canPaste ? i18n.clipboardEmpty : pasteSourceLabel ? i18n.pasteFrom.replace("{name}", pasteSourceLabel) : pasteWillReplace ? i18n.pasteReplace : i18n.paste;
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: "ra-row-menu-wrap relative", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ra-row-menu-trigger",
+        "aria-label": "Row actions",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((v) => !v);
+        },
+        children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-3.5 h-3.5", "aria-hidden": "true" })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { role: "menu", className: "ra-row-menu", onClick: (e) => e.stopPropagation(), children: [
+      onCopy && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          className: "ra-row-menu-item",
+          onClick: (e) => {
+            e.stopPropagation();
+            setOpen(false);
+            onCopy();
+          },
+          children: [
+            /* @__PURE__ */ jsx(Copy, { className: "w-3 h-3", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: i18n.copy })
+          ]
+        }
+      ),
+      onPaste && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          className: "ra-row-menu-item",
+          disabled: !canPaste,
+          onClick: (e) => {
+            e.stopPropagation();
+            setOpen(false);
+            if (canPaste) onPaste();
+          },
+          children: [
+            /* @__PURE__ */ jsx(ClipboardPaste, { className: "w-3 h-3", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: pasteLabel })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
 var DefaultRecordRow = ({ record, ctx, compact = false }) => {
-  const { selected, onSelect, isDirty } = ctx;
+  const { selected, onSelect, isDirty, onCopy, onPaste, canPaste, pasteWillReplace, clipboardSourceLabel } = ctx;
   const ScopeIcon = record.scope.kind && record.scope.kind !== "collection" ? DEFAULT_ICONS.scope[record.scope.kind] : DEFAULT_ICONS.scope.product;
   return /* @__PURE__ */ jsxs(
     "button",
@@ -1203,6 +1569,23 @@ var DefaultRecordRow = ({ record, ctx, compact = false }) => {
             "aria-label": "Unsaved changes",
             className: "ra-status-dot ra-status-shared shrink-0"
           }
+        ),
+        (onCopy || onPaste) && /* @__PURE__ */ jsx(
+          RowContextMenu,
+          {
+            onCopy,
+            onPaste,
+            canPaste,
+            pasteWillReplace,
+            pasteSourceLabel: clipboardSourceLabel,
+            i18n: {
+              copy: DEFAULT_I18N.copy,
+              paste: DEFAULT_I18N.paste,
+              pasteFrom: DEFAULT_I18N.pasteFrom,
+              pasteReplace: DEFAULT_I18N.pasteReplace,
+              clipboardEmpty: DEFAULT_I18N.clipboardEmpty
+            }
+          }
         )
       ]
     }
@@ -1210,7 +1593,7 @@ var DefaultRecordRow = ({ record, ctx, compact = false }) => {
 };
 var initials = (s) => s.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("") || "?";
 var DefaultRecordCard = ({ record, ctx, variant = "grid" }) => {
-  const { selected, onSelect, isDirty } = ctx;
+  const { selected, onSelect, isDirty, onCopy, onPaste, canPaste, pasteWillReplace, clipboardSourceLabel } = ctx;
   const aspect = variant === "gallery" ? "aspect-video" : "aspect-square";
   return /* @__PURE__ */ jsxs(
     "button",
@@ -1262,7 +1645,26 @@ var DefaultRecordCard = ({ record, ctx, variant = "grid" }) => {
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "p-2.5 min-w-0", children: [
-          /* @__PURE__ */ jsx("div", { className: "ra-row-title", children: record.label }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "ra-row-title flex-1 min-w-0", children: record.label }),
+            (onCopy || onPaste) && /* @__PURE__ */ jsx(
+              RowContextMenu,
+              {
+                onCopy,
+                onPaste,
+                canPaste,
+                pasteWillReplace,
+                pasteSourceLabel: clipboardSourceLabel,
+                i18n: {
+                  copy: DEFAULT_I18N.copy,
+                  paste: DEFAULT_I18N.paste,
+                  pasteFrom: DEFAULT_I18N.pasteFrom,
+                  pasteReplace: DEFAULT_I18N.pasteReplace,
+                  clipboardEmpty: DEFAULT_I18N.clipboardEmpty
+                }
+              }
+            )
+          ] }),
           variant === "gallery" && record.subtitle && /* @__PURE__ */ jsx("div", { className: "ra-row-sub", children: record.subtitle }),
           record.badges && record.badges.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-1 mt-1.5 flex-wrap", children: record.badges.slice(0, 3).map((b, i) => /* @__PURE__ */ jsx("span", { className: "ra-chip", "data-tone": "muted", children: b.label }, `${b.label}-${i}`)) })
         ] })
@@ -1278,13 +1680,18 @@ var RecordList = ({
   presentation = "list",
   renderListRow,
   renderCard,
-  groupBy
+  groupBy,
+  rowClipboard
 }) => {
-  const buildCtx = (item) => ({
-    selected: item.ref === selectedRef,
-    onSelect: () => onSelect(item),
-    isDirty: !!dirtyRef && item.ref === dirtyRef
-  });
+  const buildCtx = (item) => {
+    const cb = rowClipboard ? rowClipboard(item) : null;
+    return {
+      selected: item.ref === selectedRef,
+      onSelect: () => onSelect(item),
+      isDirty: !!dirtyRef && item.ref === dirtyRef,
+      ...cb ?? {}
+    };
+  };
   const groups = useMemo(() => {
     if (!groupBy) return null;
     const buckets = /* @__PURE__ */ new Map();
@@ -1566,8 +1973,10 @@ var DeleteButton = ({
   label = "Delete record",
   confirmLabel = "Confirm delete",
   revertMs = 3e3,
-  disabled
+  disabled,
+  icon
 }) => {
+  const Icon = icon ?? Trash2;
   const [armed, setArmed] = useState(false);
   const [busy, setBusy] = useState(false);
   const timerRef = useRef(null);
@@ -1628,7 +2037,7 @@ var DeleteButton = ({
         color: "hsl(var(--ra-danger, var(--ra-text)))"
       },
       children: [
-        /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" }),
+        /* @__PURE__ */ jsx(Icon, { className: "w-3.5 h-3.5" }),
         label
       ]
     }
@@ -1641,25 +2050,58 @@ function RecordEditor({
   preview,
   bulkActions,
   footerExtra,
-  onBeforeDelete
+  onBeforeDelete,
+  headerLabel,
+  headerSubtitle,
+  headerMeta,
+  clipboard,
+  actionLabels,
+  actionIcons
 }) {
-  const sourceLabel = ctx.source === "self" ? "Own" : ctx.source === "inherited" ? "Inherited" : "New";
+  const saveLabel = actionLabels?.save ?? i18n.save;
+  const discardLabel = actionLabels?.discard ?? i18n.discard;
+  const deleteLabel = actionLabels?.delete ?? i18n.delete;
+  const SaveIcon = actionIcons?.save;
+  const DiscardIcon = actionIcons?.discard;
+  const DeleteIcon = actionIcons?.delete;
+  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 +2111,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 })
+          ] })
         ]
       }
     ),
@@ -1684,15 +2141,18 @@ function RecordEditor({
         style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
                 onClick: ctx.reset,
                 disabled: !ctx.isDirty || !!ctx.isSaving,
-                className: "text-xs px-3 py-1.5 rounded-md border transition-opacity disabled:opacity-40 hover:bg-[hsl(var(--ra-muted))]",
+                className: "text-xs px-3 py-1.5 rounded-md border transition-opacity disabled:opacity-40 hover:bg-[hsl(var(--ra-muted))] inline-flex items-center gap-1.5",
                 style: { borderColor: "hsl(var(--ra-border))", color: "hsl(var(--ra-text))" },
-                children: i18n.discard
+                children: [
+                  DiscardIcon && /* @__PURE__ */ jsx(DiscardIcon, { className: "h-4 w-4" }),
+                  discardLabel
+                ]
               }
             ),
             ctx.canRemove && /* @__PURE__ */ jsx(
@@ -1700,10 +2160,45 @@ function RecordEditor({
               {
                 onConfirm: () => ctx.remove(),
                 onBeforeDelete,
-                label: i18n.delete,
-                confirmLabel: i18n.confirmDelete
+                label: deleteLabel,
+                confirmLabel: i18n.confirmDelete,
+                icon: DeleteIcon
               }
             ),
+            clipboard && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: clipboard.onCopy,
+                  disabled: !clipboard.canCopy || !!ctx.isSaving,
+                  title: i18n.copy,
+                  "aria-label": i18n.copy,
+                  className: "text-xs px-2.5 py-1.5 rounded-md border transition-opacity disabled:opacity-40 hover:bg-[hsl(var(--ra-muted))] inline-flex items-center gap-1.5",
+                  style: { borderColor: "hsl(var(--ra-border))", color: "hsl(var(--ra-text))" },
+                  children: [
+                    /* @__PURE__ */ jsx(Copy, { className: "w-3 h-3" }),
+                    i18n.copy
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: clipboard.onPaste,
+                  disabled: !clipboard.canPaste || !!ctx.isSaving,
+                  title: !clipboard.canPaste ? i18n.clipboardEmpty : clipboard.pasteSourceLabel ? i18n.pasteFrom.replace("{name}", clipboard.pasteSourceLabel) : i18n.paste,
+                  "aria-label": i18n.paste,
+                  className: "text-xs px-2.5 py-1.5 rounded-md border transition-opacity disabled:opacity-40 hover:bg-[hsl(var(--ra-muted))] inline-flex items-center gap-1.5",
+                  style: { borderColor: "hsl(var(--ra-border))", color: "hsl(var(--ra-text))" },
+                  children: [
+                    /* @__PURE__ */ jsx(ClipboardPaste, { className: "w-3 h-3" }),
+                    clipboard.pasteWillReplace ? i18n.pasteReplace : i18n.paste
+                  ]
+                }
+              )
+            ] }),
             footerExtra,
             ctx.saveError != null && !ctx.isSaving && /* @__PURE__ */ jsx(
               "span",
@@ -1715,7 +2210,7 @@ function RecordEditor({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
@@ -1724,9 +2219,12 @@ function RecordEditor({
                 });
               },
               disabled: !ctx.isDirty || !!ctx.isSaving,
-              className: "text-xs px-3 py-1.5 rounded-md font-medium transition-opacity disabled:opacity-40",
+              className: "text-xs px-3 py-1.5 rounded-md font-medium transition-opacity disabled:opacity-40 inline-flex items-center gap-1.5",
               style: { background: "hsl(var(--ra-accent))", color: "hsl(var(--ra-surface))" },
-              children: ctx.isSaving ? i18n.saving ?? "Saving\u2026" : i18n.save
+              children: [
+                SaveIcon && !ctx.isSaving && /* @__PURE__ */ jsx(SaveIcon, { className: "h-4 w-4" }),
+                ctx.isSaving ? i18n.saving ?? "Saving\u2026" : saveLabel
+              ]
             }
           )
         ]
@@ -1751,16 +2249,18 @@ var ProductDrillDown = ({
   batches,
   variantsLoading,
   batchesLoading,
-  children
+  children,
+  hideSingleTab
 }) => {
   const tabs = ["product"];
   if (showVariants) tabs.push("variant");
   if (showBatches) tabs.push("batch");
+  const showTabStrip = tabs.length > 1 || !hideSingleTab;
   const childList = active === "variant" ? variants : active === "batch" ? batches : [];
   const childLoading = active === "variant" ? variantsLoading : active === "batch" ? batchesLoading : false;
   const childEmptyLabel = active === "variant" ? "No variants" : "No batches";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsx(
+    showTabStrip && /* @__PURE__ */ jsx(
       "div",
       {
         className: "flex items-center gap-1 px-4 pt-3 border-b",
@@ -1884,13 +2384,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 +2520,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 +2543,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 +2593,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 +2651,7 @@ var PreviewScopePicker = ({
         ]
       }
     ),
-    showBatches && value.productId && batches.items.length > 0 && /* @__PURE__ */ jsxs(
+    showBatchPicker && /* @__PURE__ */ jsxs(
       "select",
       {
         className: SELECT_CLS,
@@ -2241,6 +2798,84 @@ function ShellHeader({
     ] })
   ] });
 }
+var UnsavedBanner = ({
+  label,
+  context,
+  isSaving,
+  saveError,
+  onSave,
+  onDiscard,
+  saveLabel,
+  discardLabel,
+  bodyTemplate,
+  savingLabel,
+  errorLabel,
+  SaveIcon,
+  DiscardIcon
+}) => {
+  const SI = SaveIcon ?? Save;
+  const DI = DiscardIcon ?? Undo2;
+  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(DI, { 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(SI, { className: "w-3 h-3" }),
+            isSaving ? savingLabel ?? "Saving\u2026" : saveLabel
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var ClipboardToast = ({ message, variant = "copy", onDismiss }) => {
+  useEffect(() => {
+    const t = window.setTimeout(onDismiss, 2500);
+    return () => window.clearTimeout(t);
+  }, [message, onDismiss]);
+  const Icon = variant === "paste" ? ClipboardPaste : Copy;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "ra-clipboard-toast",
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: message })
+      ]
+    }
+  );
+};
 
 // src/components/RecordsAdmin/data/csv.ts
 var escapeCell = (s) => {
@@ -2350,8 +2985,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.ra-shell .ra-clipboard-toast {\n  position: fixed;\n  bottom: 1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 90;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  max-width: min(28rem, calc(100vw - 2rem));\n  padding: 0.55rem 0.85rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-text));\n  color: hsl(var(--ra-surface));\n  font-size: 0.75rem;\n  line-height: 1;\n  box-shadow: 0 8px 24px -10px hsl(0 0% 0% / 0.45);\n  animation: ra-clipboard-pop 0.18s ease-out both;\n  pointer-events: none;\n}\n@keyframes ra-clipboard-pop {\n  from {\n    opacity: 0;\n    transform: translate(-50%, 6px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, 0);\n  }\n}\n.ra-shell .ra-row-menu-wrap {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.25rem;\n}\n.ra-shell .ra-row-menu-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: 0.35rem;\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  opacity: 0;\n  transition:\n    opacity .15s ease,\n    background .15s ease,\n    color .15s ease;\n  border: 1px solid transparent;\n}\n.ra-shell .ra-row:hover .ra-row-menu-trigger,\n.ra-shell .ra-card-hover:hover .ra-row-menu-trigger,\n.ra-shell .ra-row-menu-trigger:focus-visible,\n.ra-shell .ra-row-menu-trigger[aria-expanded=true] {\n  opacity: 1;\n}\n.ra-shell .ra-row-menu-trigger:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-row-menu {\n  position: absolute;\n  right: 0;\n  top: calc(100% + 4px);\n  z-index: 50;\n  min-width: 11rem;\n  padding: 0.25rem;\n  border-radius: 0.5rem;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  box-shadow: 0 12px 28px -10px hsl(0 0% 0% / 0.25);\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n.ra-shell .ra-row-menu-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.4rem 0.55rem;\n  border-radius: 0.35rem;\n  font-size: 0.75rem;\n  color: hsl(var(--ra-text));\n  background: transparent;\n  border: 0;\n  text-align: left;\n  width: 100%;\n  cursor: pointer;\n}\n.ra-shell .ra-row-menu-item:hover:not(:disabled) {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-row-menu-item:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\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 +3025,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"],
@@ -2414,10 +3053,23 @@ function RecordsAdminShell(props) {
     icons: iconsOverride,
     groupBy,
     renderEmptyState,
-    density = "comfortable"
+    density = "comfortable",
+    enableClipboard = true,
+    onCopy: onCopyOverride,
+    onPaste: onPasteOverride,
+    actionLabels,
+    actionIcons,
+    editorTabs = "off"
   } = props;
   const i18n = { ...DEFAULT_I18N, ...i18nOverride ?? {} };
   const icons = useMemo(() => mergeIcons(iconsOverride), [iconsOverride]);
+  const multiOpenWarnedRef = useRef(false);
+  if (editorTabs === "multi" && !multiOpenWarnedRef.current) {
+    multiOpenWarnedRef.current = true;
+    console.warn(
+      '[RecordsAdminShell] editorTabs="multi" is reserved for a future release and currently behaves like "off". Track in records-admin-shell.md.'
+    );
+  }
   const [presentation, setPresentation] = usePresentationPref({
     appId,
     recordType,
@@ -2434,7 +3086,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 +3100,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 +3250,25 @@ 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 pasteConfirm = usePasteConfirm();
+  const clipboard = useRecordClipboard({
+    appId,
+    recordType: recordType ?? "__default"
   });
+  const [clipboardNotice, setClipboardNotice] = useState(null);
   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 +3305,195 @@ 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 copyCurrent = useCallback(() => {
+    if (!enableClipboard || !editingScope) return;
+    const sourceValue = onCopyOverride ? onCopyOverride({ value: editorCtx.value, scope: editingScope }) : cloneValue(editorCtx.value);
+    clipboard.set({
+      value: sourceValue,
+      sourceScope: editingScope.kind,
+      sourceRef: editingScope.raw,
+      sourceLabel: editorHeaderLabel
+    });
+    onTelemetry?.({ type: "clipboard.copy", recordType, sourceRef: editingScope.raw });
+    setClipboardNotice({
+      message: i18n.copyToast.replace("{name}", editorHeaderLabel ?? editingScope.raw),
+      variant: "copy"
+    });
+  }, [
+    enableClipboard,
+    editingScope,
+    onCopyOverride,
+    editorCtx.value,
+    clipboard,
+    editorHeaderLabel,
+    onTelemetry,
+    recordType,
+    i18n.copyToast
+  ]);
+  const pasteCurrent = useCallback(async () => {
+    if (!enableClipboard || !editingScope || !clipboard.entry) return;
+    const compat = checkPasteCompatibility(
+      { kind: clipboard.entry.sourceScope, raw: clipboard.entry.sourceRef },
+      editingScope
+    );
+    if (compat.status === "denied") {
+      setClipboardNotice({ message: compat.reason ?? "Paste not allowed here", variant: "paste" });
+      return;
+    }
+    if (compat.status === "warn") {
+      const ok = await pasteConfirm.confirm({
+        title: i18n.pasteWarnTitle,
+        body: compat.reason ?? "",
+        confirmLabel: i18n.pasteWarnContinue,
+        cancelLabel: i18n.pasteConfirmCancel
+      });
+      if (!ok) return;
+    }
+    const willReplace = resolved.source === "self";
+    if (willReplace) {
+      const ok = await pasteConfirm.confirm({
+        title: i18n.pasteConfirmTitle,
+        body: i18n.pasteConfirmBody.replace(
+          "{destination}",
+          editorHeaderLabel ?? editingScope.raw
+        ),
+        confirmLabel: i18n.pasteConfirmReplace,
+        cancelLabel: i18n.pasteConfirmCancel
+      });
+      if (!ok) return;
+    }
+    const sourceParsed = { kind: clipboard.entry.sourceScope, raw: clipboard.entry.sourceRef };
+    const transformed = onPasteOverride ? onPasteOverride(
+      { value: clipboard.entry.value, sourceScope: sourceParsed },
+      { scope: editingScope, currentValue: editorCtx.value ?? null }
+    ) : cloneValue(clipboard.entry.value);
+    if (transformed === null) return;
+    editorCtx.onChange(transformed);
+    onTelemetry?.({
+      type: "clipboard.paste",
+      recordType,
+      sourceRef: clipboard.entry.sourceRef,
+      destinationRef: editingScope.raw,
+      replaced: willReplace
+    });
+    setClipboardNotice({
+      message: i18n.pasteToast.replace("{name}", clipboard.entry.sourceLabel ?? clipboard.entry.sourceRef),
+      variant: "paste"
+    });
+  }, [
+    enableClipboard,
+    editingScope,
+    clipboard.entry,
+    pasteConfirm,
+    resolved.source,
+    onPasteOverride,
+    editorCtx,
+    onTelemetry,
+    recordType,
+    editorHeaderLabel,
+    i18n.pasteWarnTitle,
+    i18n.pasteWarnContinue,
+    i18n.pasteConfirmCancel,
+    i18n.pasteConfirmTitle,
+    i18n.pasteConfirmBody,
+    i18n.pasteConfirmReplace,
+    i18n.pasteToast
+  ]);
+  const editorPasteCompat = useMemo(() => {
+    if (!enableClipboard || !clipboard.entry || !editingScope) return null;
+    if (clipboard.entry.sourceRef === editingScope.raw) return { status: "denied" };
+    return checkPasteCompatibility(
+      { kind: clipboard.entry.sourceScope, raw: clipboard.entry.sourceRef },
+      editingScope
+    );
+  }, [enableClipboard, clipboard.entry, editingScope]);
+  const editorClipboard = enableClipboard && editingScope ? {
+    onCopy: copyCurrent,
+    onPaste: () => {
+      void pasteCurrent();
+    },
+    canCopy: true,
+    canPaste: !!clipboard.entry && editorPasteCompat?.status !== "denied",
+    pasteSourceLabel: clipboard.entry?.sourceLabel,
+    pasteWillReplace: resolved.source === "self" && !!clipboard.entry
+  } : void 0;
+  const [pendingPasteRef, setPendingPasteRef] = useState(null);
+  useEffect(() => {
+    if (!pendingPasteRef) return;
+    if (!editingScope || editingScope.raw !== pendingPasteRef) return;
+    const t = window.setTimeout(() => {
+      setPendingPasteRef(null);
+      void pasteCurrent();
+    }, 0);
+    return () => window.clearTimeout(t);
+  }, [pendingPasteRef, editingScope, pasteCurrent]);
+  const rowClipboard = enableClipboard ? (record) => {
+    const summaryHasData = record.data != null;
+    const sourceParsed = record.scope;
+    const compat = clipboard.entry ? checkPasteCompatibility(
+      { kind: clipboard.entry.sourceScope, raw: clipboard.entry.sourceRef },
+      sourceParsed
+    ) : null;
+    const sameRef = clipboard.entry?.sourceRef === record.ref;
+    return {
+      onCopy: summaryHasData ? () => {
+        const value = onCopyOverride ? onCopyOverride({ value: record.data, scope: sourceParsed }) : cloneValue(record.data);
+        clipboard.set({
+          value,
+          sourceScope: sourceParsed.kind,
+          sourceRef: record.ref,
+          sourceLabel: record.label
+        });
+        onTelemetry?.({ type: "clipboard.copy", recordType, sourceRef: record.ref });
+        setClipboardNotice({
+          message: i18n.copyToast.replace("{name}", record.label),
+          variant: "copy"
+        });
+      } : void 0,
+      onPaste: () => {
+        onLeftSelectRef.current?.(record);
+        setPendingPasteRef(record.ref);
+      },
+      canPaste: !!clipboard.entry && !sameRef && compat?.status !== "denied",
+      pasteWillReplace: record.status === "configured",
+      clipboardSourceLabel: clipboard.entry?.sourceLabel
+    };
+  } : void 0;
+  const onLeftSelectRef = useRef(null);
   const renderEditorWithPreview = () => {
     if (!editingScope) return null;
     const previewBody = renderPreview && effectivePreviewScope ? renderPreview({ resolved: editorCtx.value, previewScope: effectivePreviewScope }) : null;
@@ -2670,6 +3519,12 @@ function RecordsAdminShell(props) {
         preview: inlinePreviewBody,
         footerExtra: extraFooter,
         onBeforeDelete: onBeforeDelete && editingScope ? () => onBeforeDelete(editingScope) : void 0,
+        headerLabel: editorHeaderLabel,
+        headerSubtitle: editorHeaderSubtitle,
+        headerMeta: editorHeaderMeta,
+        clipboard: editorClipboard,
+        actionLabels,
+        actionIcons,
         children: renderEditor(editorCtx)
       }
     );
@@ -2681,9 +3536,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 +3589,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 [{
@@ -2745,12 +3631,23 @@ function RecordsAdminShell(props) {
       }
     });
   };
+  onLeftSelectRef.current = onLeftSelect;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: `ra-shell flex flex-col h-full ${className ?? ""}`,
       "data-density": density,
       children: [
+        dirtyConfirm.dialog,
+        pasteConfirm.dialog,
+        clipboardNotice && /* @__PURE__ */ jsx(
+          ClipboardToast,
+          {
+            message: clipboardNotice.message,
+            variant: clipboardNotice.variant,
+            onDismiss: () => setClipboardNotice(null)
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 space-y-3", children: [
           intro && !dismissed && /* @__PURE__ */ jsx(
             IntroCard,
@@ -2795,6 +3692,27 @@ 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: actionLabels?.save ?? i18n.save,
+              discardLabel: actionLabels?.discard ?? i18n.discard,
+              SaveIcon: actionIcons?.save,
+              DiscardIcon: actionIcons?.discard,
+              savingLabel: i18n.saving,
+              errorLabel: i18n.saveError,
+              bodyTemplate: i18n.unsavedBannerBody
+            }
           )
         ] }),
         /* @__PURE__ */ jsxs(
@@ -2842,14 +3760,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 +3818,11 @@ function RecordsAdminShell(props) {
                         selectedRef: leftSelectedRef,
                         onSelect: onLeftSelect,
                         dirtyRef: editorCtx.isDirty ? editingScope?.raw : void 0,
-                        presentation,
+                        presentation: effectivePresentation,
                         renderListRow,
                         renderCard,
-                        groupBy
+                        groupBy: effectiveGroupBy,
+                        rowClipboard
                       }
                     ),
                     isProductTab && !productPinned && productBrowse.hasNextPage && /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
@@ -2922,6 +3850,7 @@ function RecordsAdminShell(props) {
                     productLabel: productBrowse.items.find((p) => p.id === selectedProductId)?.name ?? selectedProductId,
                     showVariants: drillVariantsAllowed,
                     showBatches: drillBatchesAllowed,
+                    hideSingleTab: editorTabs === "off" || editorTabs === "multi",
                     active: drillTab,
                     onChange: (t) => {
                       void runWithGuard(() => {
@@ -3354,6 +4283,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, useFacetBrowse, 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, checkPasteCompatibility, cloneValue, 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, useRecordClipboard, useRecordEditor, useRecordList, useResolveAllRecords, useResolvedRecord, useRulePreview, useScopeProbe, useUnsavedGuard };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map