@proveanything/smartlinks-utils-ui 0.3.9 → 0.3.11

package/dist/components/RecordsAdmin/index.js

@@ -1,13 +1,22 @@
-import { styleInject } from '../../chunk-IGFYMNKL.js';
+import { styleInject } from '../../chunk-3BLWNYM4.js';
 import { cn } from '../../chunk-L7FQ52F5.js';
+import { listRecords, parsedRefToTarget, parsedRefToScope, matchRecords, scopesEqual, upsertRecord, deleteRecord } from '../../chunk-TY2UIZ24.js';
+export { bulkDelete, bulkUpsert, deleteRecord, getRecordByRef, listRecords, matchRecords, parsedRefToScope, parsedRefToTarget, restoreRecord, scopesEqual, upsertRecord } from '../../chunk-TY2UIZ24.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, ClipboardPaste, Box, X, AlertTriangle, Info, HelpCircle, Search, CornerDownLeft, Circle, AlertCircle, Undo2, Save } 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, List, ChevronRight, Eraser, ClipboardPaste, Box, X, Image, Table, ArrowLeft, ChevronLeft, 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 = {
-  scope: { product: Package, variant: Layers, batch: Boxes, facet: Tag, universal: Globe },
+  scope: {
+    collection: Globe,
+    product: Package,
+    variant: Layers,
+    batch: Boxes,
+    facet: Tag,
+    universal: Globe
+  },
   status: { own: CheckCircle2, inherited: ArrowDownLeft, missing: CircleDashed },
   action: {
     add: Plus,
@@ -86,12 +95,22 @@ var DEFAULT_I18N = {
   unsavedPromptSave: "Save & continue",
   unsavedBannerBody: "Unsaved changes on {name}",
   presentationList: "List",
-  presentationGrid: "Grid",
-  presentationGallery: "Gallery",
   presentationCompact: "Compact",
+  itemViewTable: "Table",
+  itemViewCards: "Cards",
+  itemViewGallery: "Gallery",
   newItem: "New item",
   noItemsTitle: "No items yet",
   noItemsBody: "Create your first item to get started.",
+  backToList: "Back to list",
+  prevItem: "Previous",
+  nextItem: "Next",
+  itemListTitle: "Items",
+  itemColumnLabel: "Name",
+  itemColumnUpdated: "Updated",
+  itemActions: "Actions",
+  backToScopes: "\u2190 All scopes",
+  siblingsHeading: "Items in this scope",
   railEmptyTitle: "No records yet",
   railEmptyBody: "Records you create will appear here.",
   copy: "Copy",
@@ -110,7 +129,15 @@ var DEFAULT_I18N = {
 };
 
 // src/components/RecordsAdmin/types/presentation.ts
-var ALL_PRESENTATIONS = ["list", "grid", "gallery", "compact"];
+var ALL_PRESENTATIONS = ["list", "compact"];
+var ALL_ITEM_VIEWS = ["table", "cards", "gallery"];
+
+// src/components/RecordsAdmin/types/deepLink.ts
+var DEFAULT_DEEP_LINK_PARAM_NAMES = {
+  item: "item",
+  scope: "scope",
+  view: "view"
+};
 
 // src/components/RecordsAdmin/data/refs.ts
 var KIND_KEYS = {
@@ -139,6 +166,9 @@ var parseRef = (raw) => {
       } else {
         parsed.facetId = id;
       }
+    } else if (k === "item") {
+      parsed.itemId = id;
+      continue;
     } else if (k in KIND_KEYS) {
       parsed[KIND_KEYS[k]] = id;
     }
@@ -156,6 +186,7 @@ var buildRef = (a) => {
   if (a.variantId) parts.push(`variant:${a.variantId}`);
   if (a.batchId) parts.push(`batch:${a.batchId}`);
   if (a.proofId) parts.push(`proof:${a.proofId}`);
+  if (a.itemId) parts.push(`item:${a.itemId}`);
   return parts.join("/");
 };
 var resolutionChain = (target, supportedScopes) => {
@@ -172,173 +203,23 @@ var resolutionChain = (target, supportedScopes) => {
   if (supportedScopes.includes("facet") && target.facetId) {
     chain.push(buildRef({ facetId: target.facetId, facetValue: target.facetValue }));
   }
-  return Array.from(new Set(chain));
-};
-
-// src/components/RecordsAdmin/data/scopeBridge.ts
-var parsedRefToScope = (ref) => {
-  const scope = {};
-  if (ref.productId) scope.productId = ref.productId;
-  if (ref.variantId) scope.variantId = ref.variantId;
-  if (ref.batchId) scope.batchId = ref.batchId;
-  if (ref.proofId) scope.proofId = ref.proofId;
-  if (ref.facetId) {
-    scope.facets = [{
-      key: ref.facetId,
-      valueKeys: ref.facetValue ? [ref.facetValue] : []
-    }];
-  }
-  return scope;
-};
-var parsedRefToTarget = (ref) => {
-  const target = {};
-  if (ref.productId) target.productId = ref.productId;
-  if (ref.variantId) target.variantId = ref.variantId;
-  if (ref.batchId) target.batchId = ref.batchId;
-  if (ref.proofId) target.proofId = ref.proofId;
-  if (ref.facetId && ref.facetValue) {
-    target.facets = { [ref.facetId]: [ref.facetValue] };
-  }
-  return target;
-};
-var scopesEqual = (a, b) => {
-  if ((a.productId ?? null) !== (b.productId ?? null)) return false;
-  if ((a.variantId ?? null) !== (b.variantId ?? null)) return false;
-  if ((a.batchId ?? null) !== (b.batchId ?? null)) return false;
-  if ((a.proofId ?? null) !== (b.proofId ?? null)) return false;
-  const af = a.facets ?? [];
-  const bf = b.facets ?? [];
-  if (af.length !== bf.length) return false;
-  const norm = (xs) => xs.map((f) => `${f.key}:${[...f.valueKeys].sort().join(",")}`).sort().join("|");
-  return norm(af) === norm(bf);
-};
-
-// src/components/RecordsAdmin/data/records.ts
-var listRecords = async (ctx, params = {}) => {
-  const { limit = 100, offset, ref, refPrefix, q, sort } = params;
-  const res = await ctx.SL.app.records.list(
-    ctx.collectionId,
-    ctx.appId,
-    {
-      ...ctx.recordType ? { recordType: ctx.recordType } : {},
-      limit,
-      offset,
-      ref,
-      refPrefix,
-      q,
-      sort
-    },
-    true
-  );
-  return {
-    data: res?.data ?? [],
-    total: res?.pagination?.total ?? (res?.data?.length ?? 0),
-    hasMore: res?.pagination?.hasMore ?? false
-  };
-};
-var getRecordByRef = async (ctx, ref) => {
-  const res = await ctx.SL.app.records.list(
-    ctx.collectionId,
-    ctx.appId,
-    { ...ctx.recordType ? { recordType: ctx.recordType } : {}, ref, limit: 1 },
-    true
-  );
-  return res?.data?.[0] ?? null;
-};
-var upsertRecord = async (ctx, write) => {
-  const ref = write.ref ?? deriveRefFromScope(write.scope);
-  const res = await ctx.SL.app.records.upsert(ctx.collectionId, ctx.appId, {
-    ref,
-    ...ctx.recordType ? { recordType: ctx.recordType } : {},
-    scope: write.scope,
-    data: write.data,
-    status: write.status,
-    startsAt: write.startsAt,
-    expiresAt: write.expiresAt,
-    customId: write.customId,
-    sourceSystem: write.sourceSystem
-  });
-  return { record: res, isCreate: !!res?.created };
-};
-var deleteRecord = async (ctx, ref) => {
-  const existing = await getRecordByRef(ctx, ref).catch(() => null);
-  if (!existing) return false;
-  await ctx.SL.app.records.remove(ctx.collectionId, ctx.appId, existing.id, true);
-  return true;
-};
-var restoreRecord = async (ctx, recordId) => ctx.SL.app.records.restore(ctx.collectionId, ctx.appId, recordId);
-var matchRecords = async (ctx, target, opts = {}) => ctx.SL.app.records.match(
-  ctx.collectionId,
-  ctx.appId,
-  {
-    target,
-    ...ctx.recordType ? { recordType: ctx.recordType } : {},
-    strategy: opts.strategy ?? "all",
-    at: opts.at,
-    includeScheduled: opts.includeScheduled,
-    includeExpired: opts.includeExpired,
-    limit: opts.limit
-  },
-  true
-);
-var bulkUpsert = async (ctx, entries) => {
-  const CHUNK = 500;
-  let saved = 0;
-  let failed = 0;
-  for (let i = 0; i < entries.length; i += CHUNK) {
-    const slice = entries.slice(i, i + CHUNK);
-    const items = slice.map((e) => ({
-      ref: e.ref ?? deriveRefFromScope(e.scope),
-      ...ctx.recordType ? { recordType: ctx.recordType } : {},
-      scope: e.scope,
-      data: e.data,
-      status: e.status
-    }));
-    const res = await ctx.SL.app.records.bulkUpsert(ctx.collectionId, ctx.appId, items).catch(() => ({ saved: 0, failed: items.length }));
-    saved += res.saved ?? 0;
-    failed += res.failed ?? 0;
+  if (supportedScopes.includes("collection")) {
+    chain.push("");
   }
-  return { saved, failed };
+  return Array.from(new Set(chain));
 };
-var bulkDelete = async (ctx, input) => {
-  if ("scope" in input) {
-    const res = await ctx.SL.app.records.bulkDelete(
-      ctx.collectionId,
-      ctx.appId,
-      { scope: input.scope, ...ctx.recordType ? { recordType: ctx.recordType } : {} }
-    );
-    return { removed: res.deleted ?? 0 };
-  }
-  const CHUNK = 1e3;
-  let removed = 0;
-  for (let i = 0; i < input.refs.length; i += CHUNK) {
-    const slice = input.refs.slice(i, i + CHUNK);
-    const res = await ctx.SL.app.records.bulkDelete(
-      ctx.collectionId,
-      ctx.appId,
-      { refs: slice, ...ctx.recordType ? { recordType: ctx.recordType } : {} }
-    );
-    removed += res.deleted ?? 0;
+var splitItemRef = (raw) => {
+  if (!raw) return { scopeRef: "" };
+  const segs = raw.split("/").filter(Boolean);
+  const last = segs[segs.length - 1];
+  if (last && last.startsWith("item:")) {
+    return { scopeRef: segs.slice(0, -1).join("/"), itemId: last.slice("item:".length) };
   }
-  return { removed };
+  return { scopeRef: raw };
 };
-var deriveRefFromScope = (scope) => {
-  const parts = [];
-  if (scope.facets && scope.facets.length > 0) {
-    const sorted = [...scope.facets].sort((a, b) => a.key.localeCompare(b.key));
-    for (const f of sorted) {
-      const vals = [...f.valueKeys].sort().join(",");
-      parts.push(vals ? `facet:${f.key}=${vals}` : `facet:${f.key}`);
-    }
-  }
-  if (scope.productId) parts.push(`product:${scope.productId}`);
-  if (scope.variantId) parts.push(`variant:${scope.variantId}`);
-  if (scope.batchId) parts.push(`batch:${scope.batchId}`);
-  if (scope.proofId) parts.push(`proof:${scope.proofId}`);
-  return parts.join("/");
+var buildItemRef = (scopeRef, itemId) => {
+  return scopeRef ? `${scopeRef}/item:${itemId}` : `item:${itemId}`;
 };
-
-// src/components/RecordsAdmin/hooks/useRecordList.ts
 var defaultClassify = (r) => {
   if (!r.data) return "empty";
   const keys = Object.keys(r.data);
@@ -379,7 +260,7 @@ var useRecordList = (args) => {
     scopeKind,
     search = "",
     filter = "all",
-    classify,
+    classify: classify2,
     enabled = true,
     scaffolder,
     contextScope,
@@ -414,9 +295,9 @@ var useRecordList = (args) => {
   const [scaffolded, setScaffolded] = useState(null);
   const rawItems = useMemo(() => {
     const all = query.data?.pages.flatMap((p) => p.data) ?? [];
-    const cls = classify ?? defaultClassify;
+    const cls = classify2 ?? defaultClassify;
     return all.map(toSummary).filter((s) => matchesScope(scopeKind, s.scope)).filter((s) => matchesContext(s.scope, contextScope)).map((s) => ({ ...s, status: cls(s) }));
-  }, [query.data, scopeKind, classify, contextScope]);
+  }, [query.data, scopeKind, classify2, contextScope]);
   useEffect(() => {
     if (!scaffolder) {
       setScaffolded(null);
@@ -1383,6 +1264,7 @@ function cloneValue(value) {
   }
 }
 var LABELS = {
+  collection: "Global",
   product: "Products",
   facet: "Shared",
   variant: "Variants",
@@ -1591,87 +1473,6 @@ 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, onCopy, onPaste, canPaste, pasteWillReplace, clipboardSourceLabel } = ctx;
-  const aspect = variant === "gallery" ? "aspect-video" : "aspect-square";
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: onSelect,
-      className: cn(
-        "group flex flex-col text-left rounded-md overflow-hidden border ra-card-hover",
-        selected && "ring-2"
-      ),
-      style: {
-        background: "hsl(var(--ra-surface))",
-        borderColor: selected ? "var(--ra-row-active-bd)" : "hsl(var(--ra-border))",
-        boxShadow: selected ? `0 0 0 2px hsl(var(--ra-accent) / 0.45), var(--ra-card-shadow)` : "var(--ra-card-shadow)"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(aspect, "relative w-full flex items-center justify-center overflow-hidden"),
-            style: { background: "hsl(var(--ra-muted))" },
-            children: [
-              record.thumbnail ? /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: record.thumbnail,
-                  alt: "",
-                  loading: "lazy",
-                  className: "w-full h-full object-cover"
-                }
-              ) : /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "text-2xl ra-display",
-                  style: { color: "hsl(var(--ra-muted-text))" },
-                  children: initials(record.label)
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 left-1.5", children: /* @__PURE__ */ jsx(StatusDot, { status: record.status }) }),
-              isDirty && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  title: "Unsaved changes",
-                  "aria-label": "Unsaved changes",
-                  className: "ra-status-dot ra-status-shared absolute top-1.5 right-1.5"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "p-2.5 min-w-0", children: [
-          /* @__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}`)) })
-        ] })
-      ]
-    }
-  );
-};
 var RecordList = ({
   items,
   selectedRef,
@@ -1679,7 +1480,6 @@ var RecordList = ({
   dirtyRef,
   presentation = "list",
   renderListRow,
-  renderCard,
   groupBy,
   rowClipboard
 }) => {
@@ -1707,20 +1507,6 @@ var RecordList = ({
     return orderedKeys.map((k) => buckets.get(k));
   }, [items, groupBy]);
   const renderItems = (rows) => {
-    if (presentation === "grid" || presentation === "gallery") {
-      const minColPx = presentation === "gallery" ? 200 : 120;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "grid gap-2 p-2",
-          style: { gridTemplateColumns: `repeat(auto-fill, minmax(${minColPx}px, 1fr))` },
-          children: rows.map((item) => {
-            const ctx = buildCtx(item);
-            return /* @__PURE__ */ jsx("div", { children: renderCard ? renderCard(item, ctx) : /* @__PURE__ */ jsx(DefaultRecordCard, { record: item, ctx, variant: presentation }) }, item.ref);
-          })
-        }
-      );
-    }
     const compact = presentation === "compact";
     return /* @__PURE__ */ jsx("ul", { children: rows.map((item) => {
       const ctx = buildCtx(item);
@@ -1803,18 +1589,12 @@ var ErrorState = ({ error }) => /* @__PURE__ */ jsxs("div", { className: "ra-emp
 ] });
 var ICONS = {
   list: List,
-  grid: LayoutGrid,
-  gallery: Image,
   compact: Rows3
 };
 var labelFor = (p, i18n) => {
   switch (p) {
     case "list":
       return i18n.presentationList;
-    case "grid":
-      return i18n.presentationGrid;
-    case "gallery":
-      return i18n.presentationGallery;
     case "compact":
       return i18n.presentationCompact;
   }
@@ -1853,6 +1633,7 @@ var PresentationSwitcher = ({ options, value, onChange, i18n }) => {
   );
 };
 var KEY_PREFIX = "smartlinks-ui:records-admin:presentation";
+var ITEM_VIEW_KEY_PREFIX = "smartlinks-ui:records-admin:item-view";
 var safeRead = (key) => {
   try {
     return typeof window === "undefined" ? null : window.localStorage.getItem(key);
@@ -1884,6 +1665,195 @@ function usePresentationPref(args) {
   }, [key]);
   return [value, set];
 }
+function useItemViewPref(args) {
+  const { appId, recordType, options, defaultValue } = args;
+  const key = `${ITEM_VIEW_KEY_PREFIX}:${appId}:${recordType ?? "_default"}`;
+  const initial = () => {
+    const stored = safeRead(key);
+    if (stored && options.includes(stored)) return stored;
+    return options.includes(defaultValue) ? defaultValue : options[0];
+  };
+  const [value, setValue] = useState(initial);
+  useEffect(() => {
+    if (!options.includes(value)) setValue(options[0]);
+  }, [options, value]);
+  const set = useCallback((next) => {
+    setValue(next);
+    safeWrite(key, next);
+  }, [key]);
+  return [value, set];
+}
+var QK_BASE2 = ["records-admin", "collection-items"];
+var defaultToSummary = (rec, base) => {
+  const data = rec.data;
+  if (!data) return base;
+  const label = data.title ?? data.name ?? data.label ?? data.question ?? base.label;
+  const subtitle = data.subtitle ?? data.summary ?? data.description ?? base.subtitle;
+  const thumbnail = data.thumbnail ?? data.image ?? data.cover ?? base.thumbnail;
+  return { ...base, label, subtitle, thumbnail };
+};
+function useCollectionItems(args) {
+  const {
+    ctx,
+    scope,
+    pageSize = 100,
+    toSummary: toSummary2 = defaultToSummary,
+    enabled = true
+  } = args;
+  const queryClient = useQueryClient();
+  const scopeRef = scope?.raw ?? "";
+  const refPrefix = scopeRef ? `${scopeRef}/item:` : "item:";
+  const queryKey = useMemo(
+    () => [...QK_BASE2, ctx.collectionId, ctx.appId, ctx.recordType, scopeRef],
+    [ctx.collectionId, ctx.appId, ctx.recordType, scopeRef]
+  );
+  const query = useInfiniteQuery({
+    queryKey,
+    enabled: enabled && !!scope,
+    initialPageParam: 0,
+    queryFn: async ({ pageParam }) => {
+      const offset = pageParam;
+      const { data, total, hasMore } = await listRecords(ctx, {
+        limit: pageSize,
+        offset,
+        refPrefix
+      });
+      return { data, total, hasMore, nextOffset: offset + data.length };
+    },
+    getNextPageParam: (last) => last.hasMore ? last.nextOffset : void 0,
+    staleTime: 15e3
+  });
+  const items = useMemo(() => {
+    const all = query.data?.pages.flatMap((p) => p.data) ?? [];
+    return all.map((rec) => {
+      const ref = rec.ref ?? "";
+      const parsed = parseRef(ref);
+      const { itemId } = splitItemRef(ref);
+      if (!itemId) return null;
+      const base = {
+        id: rec.id,
+        ref,
+        scope: parsed,
+        data: rec.data ?? null,
+        status: rec.data ? "configured" : "empty",
+        label: itemId,
+        updatedAt: rec.updatedAt,
+        itemId
+      };
+      return toSummary2(rec, base);
+    }).filter((x) => x !== null);
+  }, [query.data, toSummary2]);
+  const refetch = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey });
+  }, [queryClient, queryKey]);
+  return {
+    items,
+    total: query.data?.pages[query.data.pages.length - 1]?.total ?? items.length,
+    isLoading: query.isLoading,
+    error: query.error ?? null,
+    hasNextPage: query.hasNextPage,
+    isFetchingNextPage: query.isFetchingNextPage,
+    fetchNextPage: query.fetchNextPage,
+    refetch
+  };
+}
+
+// src/components/RecordsAdmin/data/deepLinkAdapter.ts
+var findQueryHost = (loc) => {
+  if (loc.search && loc.search.length > 1) return "search";
+  if (loc.hash && loc.hash.includes("?")) return "hash";
+  return "search";
+};
+var getQueryString = (loc) => {
+  const host = findQueryHost(loc);
+  if (host === "search") return loc.search.startsWith("?") ? loc.search.slice(1) : loc.search;
+  const idx = loc.hash.indexOf("?");
+  return idx >= 0 ? loc.hash.slice(idx + 1) : "";
+};
+var buildUrl = (loc, nextQuery) => {
+  const host = findQueryHost(loc);
+  const qs = nextQuery ? `?${nextQuery}` : "";
+  if (host === "search") {
+    return `${loc.pathname}${qs}${loc.hash}`;
+  }
+  const hashPath = loc.hash.includes("?") ? loc.hash.slice(0, loc.hash.indexOf("?")) : loc.hash;
+  return `${loc.pathname}${loc.search}${hashPath}${qs}`;
+};
+var createDefaultDeepLinkAdapter = (paramNames) => ({
+  read() {
+    if (typeof window === "undefined") return {};
+    const params = new URLSearchParams(getQueryString(window.location));
+    return {
+      item: params.get(paramNames.item),
+      scope: params.get(paramNames.scope),
+      view: params.get(paramNames.view)
+    };
+  },
+  write(partial, mode) {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(getQueryString(window.location));
+    const apply = (key, value) => {
+      if (value == null || value === "") params.delete(key);
+      else params.set(key, value);
+    };
+    if ("item" in partial) apply(paramNames.item, partial.item);
+    if ("scope" in partial) apply(paramNames.scope, partial.scope);
+    if ("view" in partial) apply(paramNames.view, partial.view);
+    const nextUrl = buildUrl(window.location, params.toString());
+    if (mode === "push") window.history.pushState({}, "", nextUrl);
+    else window.history.replaceState({}, "", nextUrl);
+  },
+  subscribe(listener) {
+    if (typeof window === "undefined") return () => {
+    };
+    window.addEventListener("popstate", listener);
+    window.addEventListener("hashchange", listener);
+    return () => {
+      window.removeEventListener("popstate", listener);
+      window.removeEventListener("hashchange", listener);
+    };
+  }
+});
+
+// src/components/RecordsAdmin/hooks/useDeepLinkState.ts
+var SMART_PUSH = ["item.open", "item.close", "scope"];
+var classify = (mode, kind) => {
+  if (mode === "push") return "push";
+  if (mode === "replace") return "replace";
+  return SMART_PUSH.includes(kind) ? "push" : "replace";
+};
+function useDeepLinkState(options) {
+  const enabled = !!options?.enabled;
+  const history = options?.history ?? "smart";
+  const paramNames = useMemo(() => ({
+    ...DEFAULT_DEEP_LINK_PARAM_NAMES,
+    ...options?.paramNames ?? {}
+  }), [options?.paramNames]);
+  const defaultAdapterRef = useRef(null);
+  const adapter = useMemo(() => {
+    if (!enabled) return null;
+    if (options?.adapter) return options.adapter;
+    if (!defaultAdapterRef.current) {
+      defaultAdapterRef.current = createDefaultDeepLinkAdapter(paramNames);
+    }
+    return defaultAdapterRef.current;
+  }, [enabled, options?.adapter, paramNames]);
+  const [urlState, setUrlState] = useState(
+    () => adapter ? adapter.read() : {}
+  );
+  useEffect(() => {
+    if (!adapter) return;
+    setUrlState(adapter.read());
+    return adapter.subscribe(() => setUrlState(adapter.read()));
+  }, [adapter]);
+  const emit = useCallback((partial, kind) => {
+    if (!adapter) return;
+    const mode = classify(history, kind);
+    adapter.write(partial, mode);
+    setUrlState((prev) => ({ ...prev, ...partial }));
+  }, [adapter, history]);
+  return { urlState, emit, paramNames, enabled };
+}
 var segmentsFor = (s) => {
   const out = [];
   if (s.facetId) out.push({ label: s.facetValue ? `${s.facetId}: ${s.facetValue}` : `Facet: ${s.facetId}`, key: "facet" });
@@ -2673,55 +2643,442 @@ var PreviewScopePicker = ({
     )
   ] });
 };
-var TONE_ICON = {
-  info: Lightbulb,
-  success: CheckCircle2,
-  warning: AlertTriangle
+var ICONS2 = {
+  table: Table,
+  cards: LayoutGrid,
+  gallery: Image
 };
-var IntroCard = ({ title, body, onDismiss, tone = "info", action }) => {
-  const Icon = TONE_ICON[tone] ?? Info;
-  return /* @__PURE__ */ jsxs("div", { className: "ra-intro", "data-tone": tone, role: "note", children: [
-    /* @__PURE__ */ jsx("div", { className: "ra-intro-icon", children: /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "ra-intro-body", children: [
-      /* @__PURE__ */ jsx("h4", { className: "ra-intro-title", children: title }),
-      /* @__PURE__ */ jsxs("div", { className: "ra-intro-text", children: [
-        body,
-        action && /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: action })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
+var labelFor2 = (v, i18n) => {
+  if (v === "table") return i18n.itemViewTable;
+  if (v === "cards") return i18n.itemViewCards;
+  return i18n.itemViewGallery;
+};
+var ItemViewSwitcher = ({ options, value, onChange, i18n }) => {
+  if (options.length < 2) return null;
+  return /* @__PURE__ */ jsx("div", { role: "tablist", className: "ra-tabs", "aria-label": "Item view", style: { padding: "0.15rem" }, children: options.map((opt) => {
+    const Icon = ICONS2[opt];
+    const active = value === opt;
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        onClick: onDismiss,
-        "aria-label": "Dismiss",
-        className: "ra-intro-dismiss",
-        children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
-      }
-    )
-  ] });
+        role: "tab",
+        "aria-selected": active,
+        onClick: () => onChange(opt),
+        className: "ra-tab",
+        title: labelFor2(opt, i18n),
+        style: { padding: "0.3rem 0.55rem" },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: cn("ra-tab-icon w-3.5 h-3.5") }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: labelFor2(opt, i18n) })
+        ]
+      },
+      opt
+    );
+  }) });
 };
-var UtilityRow = ({ label, introHidden, onShowIntro }) => {
-  if (!introHidden || !onShowIntro) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "flex items-center justify-end gap-2 text-xs",
-      style: { color: "hsl(var(--ra-muted-text))" },
-      children: /* @__PURE__ */ jsxs(
-        "button",
+var formatDate = (iso) => {
+  if (!iso) return "\u2014";
+  try {
+    const d = new Date(iso);
+    return d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+  } catch {
+    return iso;
+  }
+};
+function DefaultItemTable({
+  items,
+  columns,
+  selectedId,
+  onOpen,
+  onDelete,
+  i18n
+}) {
+  const cols = columns ?? [];
+  const useFallback = cols.length === 0;
+  return /* @__PURE__ */ jsx("div", { className: "ra-item-table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "ra-item-table", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      useFallback ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("th", { children: i18n.itemColumnLabel }),
+        /* @__PURE__ */ jsx("th", { style: { width: "12rem" }, children: i18n.itemColumnUpdated })
+      ] }) : cols.map((c) => /* @__PURE__ */ jsx("th", { style: { width: c.width, textAlign: c.align ?? "left" }, children: c.header }, c.key)),
+      /* @__PURE__ */ jsx(
+        "th",
         {
-          type: "button",
-          onClick: onShowIntro,
-          className: "ra-btn",
-          "data-variant": "ghost",
-          style: { padding: "0.25rem 0.55rem", fontSize: "0.7rem" },
-          children: [
-            /* @__PURE__ */ jsx(HelpCircle, { className: "w-3 h-3" }),
-            "How ",
-            label.toLowerCase(),
-            " works"
-          ]
+          style: { width: "6.5rem", textAlign: "right" },
+          "aria-label": i18n.itemActions
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: items.map((item) => {
+      const id = item.itemId ?? "";
+      const isSelected = !!selectedId && selectedId === id;
+      return /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          "data-selected": isSelected,
+          onClick: () => onOpen(id),
+          className: "ra-item-row",
+          children: [
+            useFallback ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("td", { children: [
+                /* @__PURE__ */ jsx("div", { className: "ra-item-row-title", children: item.label }),
+                item.subtitle && /* @__PURE__ */ jsx("div", { className: "ra-item-row-sub", children: item.subtitle })
+              ] }),
+              /* @__PURE__ */ jsx("td", { className: "ra-item-row-meta", children: formatDate(item.updatedAt) })
+            ] }) : cols.map((c) => /* @__PURE__ */ jsx("td", { style: { textAlign: c.align ?? "left" }, children: c.render(item) }, c.key)),
+            /* @__PURE__ */ jsxs("td", { className: "ra-item-row-actions", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ra-row-action",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onOpen(id);
+                  },
+                  "aria-label": "Edit",
+                  children: /* @__PURE__ */ jsx(Pencil, { className: "w-3.5 h-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ra-row-action",
+                  "data-tone": "danger",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete(id);
+                  },
+                  "aria-label": i18n.delete,
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ] })
+          ]
+        },
+        item.ref
+      );
+    }) })
+  ] }) });
+}
+var initials = (label) => label.split(/\s+/).slice(0, 2).map((s) => s[0]?.toUpperCase() ?? "").join("") || "?";
+function DefaultItemCards({
+  items,
+  variant,
+  selectedId,
+  ctx,
+  renderCard,
+  i18n
+}) {
+  const isGallery = variant === "gallery";
+  return /* @__PURE__ */ jsx("div", { className: isGallery ? "ra-item-gallery" : "ra-item-cards", children: items.map((item) => {
+    const id = item.itemId ?? "";
+    const slotCtx = {
+      ...ctx,
+      selected: selectedId === id
+    };
+    if (renderCard) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          onClick: () => ctx.onOpen(id),
+          className: "ra-item-card-wrap",
+          "data-selected": slotCtx.selected,
+          children: renderCard(item, slotCtx)
+        },
+        item.ref
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => ctx.onOpen(id),
+        className: `ra-item-card ${isGallery ? "ra-item-card--gallery" : ""}`,
+        "data-selected": slotCtx.selected,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `ra-item-card-thumb ${isGallery ? "ra-item-card-thumb--gallery" : ""}`, children: item.thumbnail ? /* @__PURE__ */ jsx("img", { src: item.thumbnail, alt: "", loading: "lazy" }) : /* @__PURE__ */ jsx("span", { className: "ra-item-card-initials", children: initials(item.label) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ra-item-card-body", children: [
+            /* @__PURE__ */ jsx("div", { className: "ra-item-card-title", children: item.label }),
+            item.subtitle && /* @__PURE__ */ jsx("div", { className: "ra-item-card-sub", children: item.subtitle })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ra-row-action ra-item-card-delete",
+              "data-tone": "danger",
+              onClick: (e) => {
+                e.stopPropagation();
+                ctx.onDelete(id);
+              },
+              "aria-label": i18n.delete,
+              children: /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ]
+      },
+      item.ref
+    );
+  }) });
+}
+function ItemListView({
+  items,
+  isLoading,
+  error,
+  ctx,
+  itemNoun,
+  view,
+  views,
+  onViewChange,
+  renderItemList,
+  renderItemCard,
+  renderItemEmpty,
+  itemColumns,
+  i18n
+}) {
+  const newLabel = i18n.newItem.includes("{noun}") ? i18n.newItem.replace("{noun}", itemNoun) : i18n.newItem;
+  const toolbar = /* @__PURE__ */ jsxs("div", { className: "ra-item-toolbar", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ra-item-toolbar-title", children: [
+      /* @__PURE__ */ jsx("h2", { className: "ra-display", style: { fontSize: "0.95rem", margin: 0 }, children: i18n.itemListTitle }),
+      /* @__PURE__ */ jsx("span", { className: "ra-item-toolbar-count", children: items.length })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ra-item-toolbar-actions", children: [
+      !renderItemList && /* @__PURE__ */ jsx(
+        ItemViewSwitcher,
+        {
+          options: views,
+          value: view,
+          onChange: onViewChange,
+          i18n
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: ctx.onCreate,
+          className: "ra-btn",
+          "data-variant": "primary",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5" }),
+            newLabel
+          ]
+        }
+      )
+    ] })
+  ] });
+  let body;
+  if (isLoading) {
+    body = /* @__PURE__ */ jsx(LoadingState, {});
+  } else if (error) {
+    body = /* @__PURE__ */ jsx(ErrorState, { error });
+  } else if (items.length === 0) {
+    body = renderItemEmpty ? renderItemEmpty(ctx) : /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: i18n.noItemsTitle,
+        body: i18n.noItemsBody,
+        action: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: ctx.onCreate,
+            className: "ra-btn",
+            "data-variant": "primary",
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5" }),
+              newLabel
+            ]
+          }
+        )
+      }
+    );
+  } else if (renderItemList) {
+    body = renderItemList(items, ctx);
+  } else if (view === "table") {
+    body = /* @__PURE__ */ jsx(
+      DefaultItemTable,
+      {
+        items,
+        columns: itemColumns,
+        selectedId: ctx.selectedId,
+        onOpen: ctx.onOpen,
+        onDelete: ctx.onDelete,
+        i18n
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsx(
+      DefaultItemCards,
+      {
+        items,
+        variant: view,
+        selectedId: ctx.selectedId,
+        ctx,
+        renderCard: renderItemCard,
+        i18n
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "ra-item-list", children: [
+    toolbar,
+    /* @__PURE__ */ jsx("div", { className: "ra-item-list-body", children: body })
+  ] });
+}
+var EditorItemNav = ({
+  label,
+  position,
+  total,
+  onBack,
+  onPrev,
+  onNext,
+  canPrev,
+  canNext,
+  i18n
+}) => /* @__PURE__ */ jsxs("div", { className: "ra-item-nav", children: [
+  /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onBack,
+      className: "ra-btn",
+      "data-variant": "ghost",
+      children: [
+        /* @__PURE__ */ jsx(ArrowLeft, { className: "w-3.5 h-3.5" }),
+        i18n.backToList
+      ]
+    }
+  ),
+  typeof position === "number" && typeof total === "number" && total > 0 && /* @__PURE__ */ jsxs("span", { className: "ra-item-nav-position", "aria-label": label, children: [
+    position,
+    " / ",
+    total
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "ra-item-nav-arrows", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onPrev,
+        disabled: !canPrev,
+        className: "ra-row-action",
+        "aria-label": i18n.prevItem,
+        title: i18n.prevItem,
+        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onNext,
+        disabled: !canNext,
+        className: "ra-row-action",
+        "aria-label": i18n.nextItem,
+        title: i18n.nextItem,
+        children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+      }
+    )
+  ] })
+] });
+function SiblingRail({
+  items,
+  selectedItemId,
+  isLoading,
+  error,
+  onBack,
+  onSelect,
+  i18n
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "ra-sibling-rail", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: "ra-sibling-back",
+        children: [
+          /* @__PURE__ */ jsx(ArrowLeft, { className: "w-3.5 h-3.5" }),
+          i18n.backToScopes
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "ra-sibling-heading", children: i18n.siblingsHeading }),
+    /* @__PURE__ */ jsxs("div", { className: "ra-sibling-body", children: [
+      isLoading && /* @__PURE__ */ jsx(LoadingState, {}),
+      !isLoading && error && /* @__PURE__ */ jsx(ErrorState, { error }),
+      !isLoading && !error && items.length === 0 && /* @__PURE__ */ jsx(EmptyState, { title: i18n.noItemsTitle, body: i18n.noItemsBody }),
+      !isLoading && !error && items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ra-sibling-list", children: items.map((item) => {
+        const id = item.itemId ?? "";
+        const selected = selectedItemId === id;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect(id),
+            className: "ra-row",
+            "data-selected": selected,
+            children: /* @__PURE__ */ jsxs("div", { className: "ra-row-body", children: [
+              /* @__PURE__ */ jsx("div", { className: "ra-row-title", children: item.label }),
+              item.subtitle && /* @__PURE__ */ jsx("div", { className: "ra-row-sub", children: item.subtitle })
+            ] })
+          }
+        ) }, item.ref);
+      }) })
+    ] })
+  ] });
+}
+var TONE_ICON = {
+  info: Lightbulb,
+  success: CheckCircle2,
+  warning: AlertTriangle
+};
+var IntroCard = ({ title, body, onDismiss, tone = "info", action }) => {
+  const Icon = TONE_ICON[tone] ?? Info;
+  return /* @__PURE__ */ jsxs("div", { className: "ra-intro", "data-tone": tone, role: "note", children: [
+    /* @__PURE__ */ jsx("div", { className: "ra-intro-icon", children: /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "ra-intro-body", children: [
+      /* @__PURE__ */ jsx("h4", { className: "ra-intro-title", children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "ra-intro-text", children: [
+        body,
+        action && /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: action })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onDismiss,
+        "aria-label": "Dismiss",
+        className: "ra-intro-dismiss",
+        children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+      }
+    )
+  ] });
+};
+var UtilityRow = ({ label, customLabel, introHidden, onShowIntro }) => {
+  if (!introHidden || !onShowIntro) return null;
+  const text = customLabel ?? `How ${label.toLowerCase()} works`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex items-center justify-end gap-2 text-xs",
+      style: { color: "hsl(var(--ra-muted-text))" },
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onShowIntro,
+          className: "ra-btn",
+          "data-variant": "ghost",
+          style: { padding: "0.25rem 0.55rem", fontSize: "0.7rem" },
+          children: [
+            /* @__PURE__ */ jsx(HelpCircle, { className: "w-3 h-3" }),
+            text
+          ]
         }
       )
     }
@@ -2739,7 +3096,8 @@ function ShellHeader({
   stats,
   statsItems,
   statsTitle,
-  statsIcon
+  statsIcon,
+  trailingSlot
 }) {
   let iconNode = null;
   if (showHeaderIcon) {
@@ -2794,7 +3152,10 @@ function ShellHeader({
           ]
         }
       ) : null,
-      headerActions ? /* @__PURE__ */ jsx("div", { className: "ra-header-actions", children: headerActions }) : null
+      headerActions || trailingSlot ? /* @__PURE__ */ jsxs("div", { className: "ra-header-actions", children: [
+        headerActions,
+        trailingSlot
+      ] }) : null
     ] })
   ] });
 }
@@ -2985,7 +3346,7 @@ 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: 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");
+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.ra-shell .ra-item-list {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n.ra-shell .ra-item-list-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 1rem 1.25rem 1.5rem;\n}\n.ra-shell .ra-item-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  padding: 0.75rem 1.25rem;\n  border-bottom: 1px solid hsl(var(--ra-border));\n  background: hsl(var(--ra-surface));\n}\n.ra-shell .ra-item-toolbar-title {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ra-shell .ra-item-toolbar-count {\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-muted));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: 999px;\n  padding: 0.05rem 0.45rem;\n}\n.ra-shell .ra-item-toolbar-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-item-table-wrap {\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  background: hsl(var(--ra-surface));\n  overflow: hidden;\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-item-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.85rem;\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-item-table thead th {\n  text-align: left;\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  padding: 0.65rem 0.85rem;\n  background: hsl(var(--ra-muted) / 0.55);\n  border-bottom: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-item-table tbody td {\n  padding: 0.65rem 0.85rem;\n  border-bottom: 1px solid hsl(var(--ra-border) / 0.7);\n  vertical-align: middle;\n}\n.ra-shell .ra-item-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n.ra-shell .ra-item-row {\n  cursor: pointer;\n  transition: background .12s ease;\n}\n.ra-shell .ra-item-row:hover {\n  background: var(--ra-row-hover);\n}\n.ra-shell .ra-item-row[data-selected=true] {\n  background: var(--ra-row-active-bg);\n}\n.ra-shell .ra-item-row-title {\n  font-weight: var(--ra-title-weight);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-item-row-sub {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n}\n.ra-shell .ra-item-row-meta {\n  font-size: 0.78rem;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-item-row-actions {\n  text-align: right;\n  white-space: nowrap;\n}\n.ra-shell .ra-item-row-actions .ra-row-action + .ra-row-action {\n  margin-left: 0.15rem;\n}\n.ra-shell .ra-item-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 0.85rem;\n}\n.ra-shell .ra-item-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n  gap: 1rem;\n}\n.ra-shell .ra-item-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  text-align: left;\n  padding: 0;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    box-shadow .18s ease,\n    transform .12s ease,\n    border-color .15s ease;\n  box-shadow: var(--ra-card-shadow);\n  font-family: inherit;\n  color: inherit;\n}\n.ra-shell .ra-item-card:hover {\n  box-shadow: var(--ra-card-shadow-hover);\n  border-color: hsl(var(--ra-accent) / 0.30);\n}\n.ra-shell .ra-item-card[data-selected=true] {\n  border-color: hsl(var(--ra-accent) / 0.55);\n  box-shadow: var(--ra-card-shadow-hover);\n}\n.ra-shell .ra-item-card-thumb {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  background:\n    linear-gradient(\n      135deg,\n      hsl(var(--ra-accent) / 0.12),\n      hsl(var(--ra-accent) / 0.04));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--ra-accent));\n  overflow: hidden;\n}\n.ra-shell .ra-item-card-thumb--gallery {\n  aspect-ratio: 16 / 9;\n}\n.ra-shell .ra-item-card-thumb img {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n.ra-shell .ra-item-card-initials {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 1.5rem;\n  letter-spacing: 0.02em;\n}\n.ra-shell .ra-item-card-body {\n  padding: 0.65rem 0.8rem 0.85rem;\n  min-width: 0;\n}\n.ra-shell .ra-item-card-title {\n  font-weight: var(--ra-title-weight);\n  font-size: 0.85rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-item-card-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-item-card-delete {\n  position: absolute;\n  top: 0.4rem;\n  right: 0.4rem;\n  background: hsl(var(--ra-surface) / 0.85);\n  backdrop-filter: blur(4px);\n  opacity: 0;\n  transition: opacity .15s ease;\n}\n.ra-shell .ra-item-card:hover .ra-item-card-delete,\n.ra-shell .ra-item-card:focus-within .ra-item-card-delete {\n  opacity: 1;\n}\n.ra-shell .ra-item-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.5rem 1.25rem;\n  border-bottom: 1px solid hsl(var(--ra-border));\n  background: hsl(var(--ra-surface));\n}\n.ra-shell .ra-item-nav-position {\n  font-size: 0.72rem;\n  color: hsl(var(--ra-muted-text));\n  font-variant-numeric: tabular-nums;\n}\n.ra-shell .ra-item-nav-arrows {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.15rem;\n}\n.ra-shell .ra-item-nav-arrows .ra-row-action[disabled] {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n.ra-shell .ra-sibling-rail {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n.ra-shell .ra-sibling-back {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.6rem 0.85rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-muted) / 0.5);\n  border: 0;\n  border-bottom: 1px solid hsl(var(--ra-border));\n  cursor: pointer;\n  text-align: left;\n  transition: background .12s ease, color .12s ease;\n}\n.ra-shell .ra-sibling-back:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-sibling-heading {\n  padding: 0.6rem 0.85rem 0.4rem;\n  font-size: 0.65rem;\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-sibling-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n.ra-shell .ra-sibling-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n");
 var TOP_LEVEL_SCOPES = ["facet", "product"];
 var defaultItemId = () => {
   const time = Date.now().toString(36);
@@ -3018,7 +3379,7 @@ function RecordsAdminShell(props) {
     renderPreview,
     intro,
     csvSchema,
-    classify,
+    classify: classify2,
     defaultData,
     i18n: i18nOverride,
     onTelemetry,
@@ -3034,7 +3395,6 @@ function RecordsAdminShell(props) {
     disableBeforeUnload = false,
     presentations = ["list"],
     defaultPresentation,
-    renderCard,
     renderListRow,
     renderEmpty,
     cardinality = "singleton",
@@ -3059,10 +3419,22 @@ function RecordsAdminShell(props) {
     onPaste: onPasteOverride,
     actionLabels,
     actionIcons,
-    editorTabs = "off"
+    editorTabs = "off",
+    // Right-pane item view (collection cardinality)
+    itemViews = ["table"],
+    defaultItemView,
+    itemColumns,
+    renderItemList,
+    renderItemCard,
+    renderItemEmpty,
+    collectionRailMode = "siblings",
+    // Deep linking
+    deepLink
   } = props;
   const i18n = { ...DEFAULT_I18N, ...i18nOverride ?? {} };
   const icons = useMemo(() => mergeIcons(iconsOverride), [iconsOverride]);
+  const deepLinkState = useDeepLinkState(deepLink);
+  const lastAppliedDLRef = useRef("");
   const multiOpenWarnedRef = useRef(false);
   if (editorTabs === "multi" && !multiOpenWarnedRef.current) {
     multiOpenWarnedRef.current = true;
@@ -3080,6 +3452,25 @@ function RecordsAdminShell(props) {
     onTelemetry?.({ type: "presentation.change", recordType, from: presentation, to: next });
     setPresentation(next);
   }, [onTelemetry, recordType, presentation, setPresentation]);
+  const [itemView, setItemView] = useItemViewPref({
+    appId,
+    recordType,
+    options: itemViews,
+    defaultValue: defaultItemView ?? itemViews[0] ?? "table"
+  });
+  const onItemViewChange = useCallback((next) => {
+    onTelemetry?.({
+      type: "item.view.change",
+      recordType,
+      scopeRef: "",
+      // populated below if a scope is active
+      from: itemView,
+      to: next
+    });
+    setItemView(next);
+    deepLinkState.emit({ view: next }, "view");
+  }, [onTelemetry, recordType, itemView, setItemView, deepLinkState]);
+  const [selectedItemId, setSelectedItemId] = useState(null);
   const ctx = useMemo(
     () => ({ SL, collectionId, appId, recordType }),
     [SL, collectionId, appId, recordType]
@@ -3138,6 +3529,15 @@ function RecordsAdminShell(props) {
     }
   }, [contextScope?.batchId]);
   const { dismissed, dismiss, undismiss } = useIntroDismissed(SL, collectionId, appId, recordType);
+  const headerWillRender = useMemo(() => {
+    const headerCustomised = !!title || !!subtitle || !!headerIcon || !!headerActions || showStats || !!statsItems || !!statsTitle || !!statsIcon;
+    return showHeader === true || showHeader !== false && headerCustomised;
+  }, [showHeader, title, subtitle, headerIcon, headerActions, showStats, statsItems, statsTitle, statsIcon]);
+  const resolvedReopenAffordance = useMemo(() => {
+    const requested = intro?.reopenAffordance ?? "header";
+    if (requested === "header" && !headerWillRender) return "footer";
+    return requested;
+  }, [intro?.reopenAffordance, headerWillRender]);
   const productBrowse = useProductBrowse({
     SL,
     collectionId,
@@ -3149,7 +3549,7 @@ function RecordsAdminShell(props) {
     scopeKind: activeScope,
     search,
     filter,
-    classify,
+    classify: classify2,
     contextScope,
     enabled: activeScope === "facet" && !probe.isLoading
   });
@@ -3204,19 +3604,82 @@ function RecordsAdminShell(props) {
     }
     return parseRef(buildRef({ productId: selectedProductId }));
   }, [activeScope, selectedFacetRef, selectedProductId, drillTab, selectedVariantId, selectedBatchId]);
+  const isCollection = cardinality === "collection";
+  const editingItemRef = useMemo(() => {
+    if (!isCollection) return null;
+    if (!selectedItemId) return null;
+    const baseRef = editingScope?.raw ?? "";
+    return buildItemRef(baseRef, selectedItemId);
+  }, [isCollection, selectedItemId, editingScope]);
+  const editingTargetScope = useMemo(() => {
+    if (!isCollection) return editingScope;
+    if (!editingItemRef) return null;
+    return parseRef(editingItemRef);
+  }, [isCollection, editingScope, editingItemRef]);
+  const skipNextItemResetRef = useRef(false);
+  useEffect(() => {
+    if (skipNextItemResetRef.current) {
+      skipNextItemResetRef.current = false;
+      return;
+    }
+    setSelectedItemId(null);
+  }, [editingScope?.raw]);
+  const collectionItems = useCollectionItems({
+    ctx,
+    scope: isCollection ? editingScope : null,
+    enabled: isCollection
+  });
+  useEffect(() => {
+    if (!deepLinkState.enabled) return;
+    if (selectedItemId) return;
+    deepLinkState.emit({ scope: editingScope?.raw ?? null, item: null }, "scope");
+    lastAppliedDLRef.current = `${""}|${editingScope?.raw ?? ""}|${itemView}`;
+  }, [deepLinkState.enabled, editingScope?.raw, selectedItemId, itemView]);
+  useEffect(() => {
+    if (!deepLinkState.enabled) return;
+    const { item, scope, view } = deepLinkState.urlState;
+    const sig = `${item ?? ""}|${scope ?? ""}|${view ?? ""}`;
+    if (sig === lastAppliedDLRef.current) return;
+    lastAppliedDLRef.current = sig;
+    if (view && itemViews.includes(view) && view !== itemView) {
+      setItemView(view);
+    }
+    const railRef = item ? item.includes("item:") ? item.slice(0, item.lastIndexOf("item:")).replace(/\/$/, "") : "" : scope ?? "";
+    const itemId = item ? item.includes("item:") ? item.slice(item.lastIndexOf("item:") + "item:".length) : item : null;
+    const parsed = railRef ? parseRef(railRef) : null;
+    if (parsed?.productId) {
+      if (activeScope !== "product") setActiveScope("product");
+      if (selectedProductId !== parsed.productId) setSelectedProductId(parsed.productId);
+      const nextDrill = parsed.batchId ? "batch" : parsed.variantId ? "variant" : "product";
+      if (drillTab !== nextDrill) setDrillTab(nextDrill);
+      if (parsed.variantId && selectedVariantId !== parsed.variantId) setSelectedVariantId(parsed.variantId);
+      if (parsed.batchId && selectedBatchId !== parsed.batchId) setSelectedBatchId(parsed.batchId);
+    } else if (parsed?.facetId) {
+      if (activeScope !== "facet") setActiveScope("facet");
+      if (selectedFacetRef !== railRef) setSelectedFacetRef(railRef);
+    } else {
+      if (selectedFacetRef) setSelectedFacetRef(void 0);
+    }
+    if (itemId !== selectedItemId) {
+      if (railRef && railRef !== editingScope?.raw) {
+        skipNextItemResetRef.current = true;
+      }
+      setSelectedItemId(itemId);
+    }
+  }, [deepLinkState.enabled, deepLinkState.urlState]);
   const supportedForResolution = useMemo(() => requestedScopes, [requestedScopes]);
   const resolved = useResolvedRecord({
     SL,
     appId,
     recordType,
     collectionId,
-    productId: editingScope?.productId,
-    variantId: editingScope?.variantId,
-    batchId: editingScope?.batchId,
-    facetId: editingScope?.facetId,
-    facetValue: editingScope?.facetValue,
+    productId: editingTargetScope?.productId,
+    variantId: editingTargetScope?.variantId,
+    batchId: editingTargetScope?.batchId,
+    facetId: editingTargetScope?.facetId,
+    facetValue: editingTargetScope?.facetValue,
     supportedScopes: supportedForResolution,
-    enabled: !!editingScope
+    enabled: !!editingTargetScope
   });
   const refetchAll = useCallback(() => {
     productBrowse.refetch();
@@ -3224,20 +3687,23 @@ function RecordsAdminShell(props) {
     facetBrowse.refetch();
     variantChildren.refetch();
     batchChildren.refetch();
-  }, [productBrowse, recordList, facetBrowse, variantChildren, batchChildren]);
+    if (isCollection) collectionItems.refetch();
+  }, [productBrowse, recordList, facetBrowse, variantChildren, batchChildren, isCollection, collectionItems]);
   const editorCtx = useRecordEditor({
     ctx,
-    scope: editingScope ?? parseRef(""),
+    scope: editingTargetScope ?? parseRef(""),
     resolved: { data: resolved.data, source: resolved.source, sourceRef: resolved.sourceRef, parentValue: resolved.parentValue },
     defaultData,
     reseed: dirtyStrategy === "keep" ? "preserve-dirty" : "always",
     onSaved: () => {
-      onTelemetry?.({ type: "record.save", recordType, ref: editingScope?.raw ?? "", isCreate: resolved.source !== "self" });
+      onTelemetry?.({ type: "record.save", recordType, ref: editingTargetScope?.raw ?? "", isCreate: resolved.source !== "self" });
       refetchAll();
     },
     onDeleted: () => {
-      onTelemetry?.({ type: "record.delete", recordType, ref: editingScope?.raw ?? "" });
-      if (activeScope === "facet") {
+      onTelemetry?.({ type: "record.delete", recordType, ref: editingTargetScope?.raw ?? "" });
+      if (isCollection && selectedItemId) {
+        setSelectedItemId(null);
+      } else if (activeScope === "facet") {
         setSelectedFacetRef(void 0);
       } else if (drillTab === "variant") {
         setSelectedVariantId(void 0);
@@ -3494,15 +3960,104 @@ function RecordsAdminShell(props) {
     };
   } : void 0;
   const onLeftSelectRef = useRef(null);
+  const baseScopeRef = editingScope?.raw ?? "";
+  const itemNounLabel = itemNoun || "item";
+  const buildItemUrlValue = useCallback((id) => {
+    return baseScopeRef ? `${baseScopeRef}/item:${id}` : id;
+  }, [baseScopeRef]);
+  const onItemOpen = useCallback((itemId) => {
+    if (!isCollection) return;
+    void runWithGuard(() => {
+      setSelectedItemId(itemId);
+      onTelemetry?.({ type: "item.open", recordType, scopeRef: baseScopeRef, itemId });
+      deepLinkState.emit({ item: buildItemUrlValue(itemId) }, "item.open");
+    });
+  }, [isCollection, runWithGuard, onTelemetry, recordType, baseScopeRef, deepLinkState, buildItemUrlValue]);
+  const onItemCreate = useCallback(() => {
+    if (!isCollection) return;
+    void runWithGuard(() => {
+      const id = generateItemId ? generateItemId() : defaultItemId();
+      setSelectedItemId(id);
+      onTelemetry?.({ type: "item.create", recordType, scopeRef: baseScopeRef });
+      deepLinkState.emit({ item: buildItemUrlValue(id) }, "item.open");
+    });
+  }, [isCollection, runWithGuard, generateItemId, onTelemetry, recordType, baseScopeRef, deepLinkState, buildItemUrlValue]);
+  const onItemDelete = useCallback(async (itemId) => {
+    if (!isCollection) return;
+    const ref = buildItemRef(baseScopeRef, itemId);
+    if (onBeforeDelete) {
+      const ok = await onBeforeDelete(parseRef(ref));
+      if (!ok) return;
+    }
+    try {
+      const { deleteRecord: deleteRecord2 } = await import('../../records-66QWR67J.js');
+      await deleteRecord2(ctx, ref);
+      onTelemetry?.({ type: "item.delete", recordType, scopeRef: baseScopeRef, itemId });
+      if (selectedItemId === itemId) setSelectedItemId(null);
+      if (selectedItemId === itemId) deepLinkState.emit({ item: null }, "item.close");
+      collectionItems.refetch();
+    } catch (err) {
+      console.error("[RecordsAdminShell] item delete failed", err);
+    }
+  }, [
+    isCollection,
+    baseScopeRef,
+    ctx,
+    onBeforeDelete,
+    onTelemetry,
+    recordType,
+    selectedItemId,
+    collectionItems,
+    deepLinkState
+  ]);
+  const itemViewCtx = useMemo(() => ({
+    onOpen: onItemOpen,
+    onCreate: onItemCreate,
+    onDelete: (id) => {
+      void onItemDelete(id);
+    },
+    scope: editingScope ?? parseRef(""),
+    selectedId: selectedItemId ?? void 0,
+    isLoading: collectionItems.isLoading
+  }), [onItemOpen, onItemCreate, onItemDelete, editingScope, selectedItemId, collectionItems.isLoading]);
+  const itemPosition = useMemo(() => {
+    if (!isCollection || !selectedItemId) return null;
+    const idx = collectionItems.items.findIndex((it) => it.itemId === selectedItemId);
+    if (idx < 0) return null;
+    return { index: idx, total: collectionItems.items.length };
+  }, [isCollection, selectedItemId, collectionItems.items]);
+  const onItemBack = useCallback(() => {
+    void runWithGuard(() => {
+      setSelectedItemId(null);
+      deepLinkState.emit({ item: null }, "item.close");
+    });
+  }, [runWithGuard, deepLinkState]);
+  const stepToItem = useCallback((id) => {
+    void runWithGuard(() => {
+      setSelectedItemId(id);
+      onTelemetry?.({ type: "item.open", recordType, scopeRef: baseScopeRef, itemId: id });
+      deepLinkState.emit({ item: buildItemUrlValue(id) }, "item.step");
+    });
+  }, [runWithGuard, onTelemetry, recordType, baseScopeRef, deepLinkState, buildItemUrlValue]);
+  const onItemPrev = useCallback(() => {
+    if (!itemPosition || itemPosition.index <= 0) return;
+    const next = collectionItems.items[itemPosition.index - 1];
+    if (next?.itemId) stepToItem(next.itemId);
+  }, [itemPosition, collectionItems.items, stepToItem]);
+  const onItemNext = useCallback(() => {
+    if (!itemPosition || itemPosition.index >= itemPosition.total - 1) return;
+    const next = collectionItems.items[itemPosition.index + 1];
+    if (next?.itemId) stepToItem(next.itemId);
+  }, [itemPosition, collectionItems.items, stepToItem]);
   const renderEditorWithPreview = () => {
-    if (!editingScope) return null;
+    if (!editingTargetScope) return null;
     const previewBody = renderPreview && effectivePreviewScope ? renderPreview({ resolved: editorCtx.value, previewScope: effectivePreviewScope }) : null;
     const scopePicker = previewScopePicker && effectivePreviewScope ? /* @__PURE__ */ jsx(
       PreviewScopePicker,
       {
         SL,
         collectionId,
-        editingScope,
+        editingScope: editingTargetScope,
         value: effectivePreviewScope,
         onChange: setPreviewScope,
         showVariants: drillVariantsAllowed,
@@ -3510,6 +4065,20 @@ function RecordsAdminShell(props) {
         i18n: { previewAs: i18n.previewAs, previewAsDefault: i18n.previewAsDefault }
       }
     ) : null;
+    const itemNav = isCollection && selectedItemId && itemPosition ? /* @__PURE__ */ jsx(
+      EditorItemNav,
+      {
+        label: editorHeaderLabel,
+        position: itemPosition.index + 1,
+        total: itemPosition.total,
+        onBack: onItemBack,
+        onPrev: onItemPrev,
+        onNext: onItemNext,
+        canPrev: itemPosition.index > 0,
+        canNext: itemPosition.index < itemPosition.total - 1,
+        i18n
+      }
+    ) : null;
     const baseEditor = (extraFooter, inlinePreviewBody) => /* @__PURE__ */ jsx(
       RecordEditor,
       {
@@ -3518,7 +4087,7 @@ function RecordsAdminShell(props) {
         bulkActions: { ...csvBulk, i18n },
         preview: inlinePreviewBody,
         footerExtra: extraFooter,
-        onBeforeDelete: onBeforeDelete && editingScope ? () => onBeforeDelete(editingScope) : void 0,
+        onBeforeDelete: onBeforeDelete && editingTargetScope ? () => onBeforeDelete(editingTargetScope) : void 0,
         headerLabel: editorHeaderLabel,
         headerSubtitle: editorHeaderSubtitle,
         headerMeta: editorHeaderMeta,
@@ -3528,64 +4097,76 @@ function RecordsAdminShell(props) {
         children: renderEditor(editorCtx)
       }
     );
-    if (!previewBody) return baseEditor();
+    const withNav = (node) => itemNav ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full min-h-0", children: [
+      itemNav,
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: node })
+    ] }) : node;
+    if (!previewBody) return withNav(baseEditor());
     if (previewMode === "inline") {
-      return baseEditor(
+      return withNav(baseEditor(
         void 0,
         /* @__PURE__ */ jsx(InlinePreview, { label: i18n.preview, scopePicker, children: previewBody })
-      );
+      ));
     }
     if (previewMode === "side") {
       if (!sidePreviewOpen) {
-        return /* @__PURE__ */ jsx("div", { className: "relative h-full", children: baseEditor(
+        return withNav(
+          /* @__PURE__ */ jsx("div", { className: "relative h-full", children: baseEditor(
+            /* @__PURE__ */ jsx(
+              PreviewToggleButton,
+              {
+                onClick: () => setSidePreviewOpen(true),
+                label: i18n.openPreview
+              }
+            )
+          ) })
+        );
+      }
+      return withNav(
+        /* @__PURE__ */ jsxs("div", { className: "grid h-full", style: { gridTemplateColumns: "minmax(0, 1fr) minmax(280px, 420px)" }, children: [
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: baseEditor() }),
           /* @__PURE__ */ jsx(
-            PreviewToggleButton,
+            SidePreview,
             {
-              onClick: () => setSidePreviewOpen(true),
-              label: i18n.openPreview
+              label: i18n.preview,
+              scopePicker,
+              onClose: () => setSidePreviewOpen(false),
+              children: previewBody
             }
           )
-        ) });
-      }
-      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() }),
+        ] })
+      );
+    }
+    if (previewMode === "tab") {
+      return withNav(
         /* @__PURE__ */ jsx(
-          SidePreview,
+          TabbedPreview,
           {
-            label: i18n.preview,
+            editor: baseEditor(),
+            preview: previewBody,
             scopePicker,
-            onClose: () => setSidePreviewOpen(false),
-            children: previewBody
+            i18n: { editor: i18n.editor, preview: i18n.preview }
           }
         )
-      ] });
-    }
-    if (previewMode === "tab") {
-      return /* @__PURE__ */ jsx(
-        TabbedPreview,
-        {
-          editor: baseEditor(),
-          preview: previewBody,
-          scopePicker,
-          i18n: { editor: i18n.editor, preview: i18n.preview }
-        }
       );
     }
-    return /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
-      baseEditor(
-        /* @__PURE__ */ jsx(PreviewToggleButton, { onClick: () => setDrawerOpen(true), label: i18n.openPreview })
-      ),
-      /* @__PURE__ */ jsx(
-        DrawerPreview,
-        {
-          open: drawerOpen,
-          onClose: () => setDrawerOpen(false),
-          label: i18n.preview,
-          scopePicker,
-          children: previewBody
-        }
-      )
-    ] });
+    return withNav(
+      /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
+        baseEditor(
+          /* @__PURE__ */ jsx(PreviewToggleButton, { onClick: () => setDrawerOpen(true), label: i18n.openPreview })
+        ),
+        /* @__PURE__ */ jsx(
+          DrawerPreview,
+          {
+            open: drawerOpen,
+            onClose: () => setDrawerOpen(false),
+            label: i18n.preview,
+            scopePicker,
+            children: previewBody
+          }
+        )
+      ] })
+    );
   };
   const isProductTab = activeScope === "product";
   const productPinned = !!contextScope?.productId;
@@ -3661,9 +4242,9 @@ function RecordsAdminShell(props) {
             }
           ),
           (() => {
-            const headerCustomised = !!title || !!subtitle || !!headerIcon || !!headerActions || showStats || !!statsItems || !!statsTitle || !!statsIcon;
-            const renderHeader = showHeader === true || showHeader !== false && headerCustomised;
-            if (!renderHeader) return null;
+            if (!headerWillRender) return null;
+            const showHeaderReopen = !!intro && dismissed && resolvedReopenAffordance === "header";
+            const reopenLabel = intro?.reopenLabel ?? `How ${label.toLowerCase()} works`;
             return /* @__PURE__ */ jsx(
               ShellHeader,
               {
@@ -3681,18 +4262,32 @@ function RecordsAdminShell(props) {
                 },
                 statsItems,
                 statsTitle,
-                statsIcon
+                statsIcon,
+                trailingSlot: showHeaderReopen ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: undismiss,
+                    className: "ra-btn",
+                    "data-variant": "ghost",
+                    "aria-label": reopenLabel,
+                    title: reopenLabel,
+                    style: { width: "2rem", height: "2rem", padding: 0, justifyContent: "center" },
+                    children: /* @__PURE__ */ jsx(HelpCircle, { className: "w-4 h-4" })
+                  }
+                ) : void 0
               }
             );
           })(),
-          /* @__PURE__ */ jsx(
+          resolvedReopenAffordance === "inline" || resolvedReopenAffordance === "footer" ? /* @__PURE__ */ jsx(
             UtilityRow,
             {
-              label,
+              label: intro?.reopenLabel ? "" : label,
+              customLabel: intro?.reopenLabel,
               introHidden: dismissed && !!intro,
               onShowIntro: undismiss
             }
-          ),
+          ) : null,
           editorCtx.isDirty && /* @__PURE__ */ jsx(
             UnsavedBanner,
             {
@@ -3721,7 +4316,18 @@ function RecordsAdminShell(props) {
             className: "flex-1 grid border-t overflow-hidden",
             style: { gridTemplateColumns: "minmax(260px, 320px) 1fr", borderColor: "hsl(var(--ra-border))", marginTop: "0.75rem" },
             children: [
-              /* @__PURE__ */ jsxs("aside", { className: "border-r overflow-hidden flex flex-col", style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" }, children: [
+              /* @__PURE__ */ jsx("aside", { className: "border-r overflow-hidden flex flex-col", style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" }, children: isCollection && selectedItemId && collectionRailMode === "siblings" ? /* @__PURE__ */ jsx(
+                SiblingRail,
+                {
+                  items: collectionItems.items,
+                  selectedItemId,
+                  isLoading: collectionItems.isLoading,
+                  error: collectionItems.error,
+                  onBack: onItemBack,
+                  onSelect: onItemOpen,
+                  i18n
+                }
+              ) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
                   ScopeTabs,
                   {
@@ -3776,27 +4382,6 @@ function RecordsAdminShell(props) {
                       hideZero: ["partial"],
                       i18n
                     }
-                  ),
-                  cardinality === "collection" && !isProductTab && editingScope && /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        void runWithGuard(() => {
-                          const id = generateItemId ? generateItemId() : defaultItemId();
-                          const baseRef = editingScope.raw;
-                          const itemRef = baseRef ? `${baseRef}/item:${id}` : `item:${id}`;
-                          setSelectedFacetRef(itemRef);
-                          onTelemetry?.({ type: "item.create", recordType, scopeRef: baseRef });
-                        });
-                      },
-                      className: "w-full inline-flex items-center justify-center gap-1.5 text-xs py-1.5 rounded-md border transition-colors hover:bg-[hsl(var(--ra-muted))]",
-                      style: { borderColor: "hsl(var(--ra-border))", color: "hsl(var(--ra-text))" },
-                      children: [
-                        /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5" }),
-                        i18n.newItem || `New ${itemNoun}`
-                      ]
-                    }
                   )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
@@ -3820,7 +4405,6 @@ function RecordsAdminShell(props) {
                         dirtyRef: editorCtx.isDirty ? editingScope?.raw : void 0,
                         presentation: effectivePresentation,
                         renderListRow,
-                        renderCard,
                         groupBy: effectiveGroupBy,
                         rowClipboard
                       }
@@ -3840,11 +4424,29 @@ function RecordsAdminShell(props) {
                     ) })
                   ] })
                 ] })
-              ] }),
+              ] }) }),
               /* @__PURE__ */ jsxs("main", { className: "overflow-hidden", children: [
-                !editingScope && activeScope === "product" && !selectedProductId && /* @__PURE__ */ jsx(EmptyState, { title: i18n.emptyTitle, body: i18n.emptyBody }),
-                !editingScope && activeScope === "facet" && /* @__PURE__ */ jsx(EmptyState, { title: i18n.emptyTitle, body: i18n.emptyBody }),
-                isProductTab && selectedProductId && /* @__PURE__ */ jsx(
+                isCollection && editingScope && !selectedItemId && /* @__PURE__ */ jsx(
+                  ItemListView,
+                  {
+                    items: collectionItems.items,
+                    isLoading: collectionItems.isLoading,
+                    error: collectionItems.error,
+                    ctx: itemViewCtx,
+                    itemNoun: itemNounLabel,
+                    view: itemView,
+                    views: itemViews,
+                    onViewChange: onItemViewChange,
+                    renderItemList,
+                    renderItemCard,
+                    renderItemEmpty,
+                    itemColumns,
+                    i18n
+                  }
+                ),
+                !isCollection && !editingScope && activeScope === "product" && !selectedProductId && /* @__PURE__ */ jsx(EmptyState, { title: i18n.emptyTitle, body: i18n.emptyBody }),
+                !isCollection && !editingScope && activeScope === "facet" && /* @__PURE__ */ jsx(EmptyState, { title: i18n.emptyTitle, body: i18n.emptyBody }),
+                isProductTab && selectedProductId && (!isCollection || selectedItemId) && /* @__PURE__ */ jsx(
                   ProductDrillDown,
                   {
                     productLabel: productBrowse.items.find((p) => p.id === selectedProductId)?.name ?? selectedProductId,
@@ -3872,7 +4474,7 @@ function RecordsAdminShell(props) {
                     batches: batchChildren.items,
                     variantsLoading: variantChildren.isLoading,
                     batchesLoading: batchChildren.isLoading,
-                    children: editingScope ? renderEditorWithPreview() : /* @__PURE__ */ jsx(
+                    children: editingTargetScope ? renderEditorWithPreview() : /* @__PURE__ */ jsx(
                       EmptyState,
                       {
                         title: drillTab === "variant" ? "Pick a variant" : "Pick a batch",
@@ -3881,7 +4483,7 @@ function RecordsAdminShell(props) {
                     )
                   }
                 ),
-                !isProductTab && editingScope && renderEditorWithPreview()
+                !isProductTab && editingTargetScope && (!isCollection || selectedItemId) && renderEditorWithPreview()
               ] })
             ]
           }
@@ -3953,6 +4555,87 @@ var RecordBrowser = ({
     ] })
   ] });
 };
+var initials2 = (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, onCopy, onPaste, canPaste, pasteWillReplace, clipboardSourceLabel } = ctx;
+  const aspect = variant === "gallery" ? "aspect-video" : "aspect-square";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onSelect,
+      className: cn(
+        "group flex flex-col text-left rounded-md overflow-hidden border ra-card-hover",
+        selected && "ring-2"
+      ),
+      style: {
+        background: "hsl(var(--ra-surface))",
+        borderColor: selected ? "var(--ra-row-active-bd)" : "hsl(var(--ra-border))",
+        boxShadow: selected ? `0 0 0 2px hsl(var(--ra-accent) / 0.45), var(--ra-card-shadow)` : "var(--ra-card-shadow)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(aspect, "relative w-full flex items-center justify-center overflow-hidden"),
+            style: { background: "hsl(var(--ra-muted))" },
+            children: [
+              record.thumbnail ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: record.thumbnail,
+                  alt: "",
+                  loading: "lazy",
+                  className: "w-full h-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-2xl ra-display",
+                  style: { color: "hsl(var(--ra-muted-text))" },
+                  children: initials2(record.label)
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 left-1.5", children: /* @__PURE__ */ jsx(StatusDot, { status: record.status }) }),
+              isDirty && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  title: "Unsaved changes",
+                  "aria-label": "Unsaved changes",
+                  className: "ra-status-dot ra-status-shared absolute top-1.5 right-1.5"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "p-2.5 min-w-0", children: [
+          /* @__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}`)) })
+        ] })
+      ]
+    }
+  );
+};
 var Ctx = createContext({});
 var InheritanceProvider = ({
   parentValue,
@@ -4283,6 +4966,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, 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 };
+export { ALL_ITEM_VIEWS, ALL_PRESENTATIONS, BatchList, BulkActionsMenu, DEFAULT_DEEP_LINK_PARAM_NAMES, DEFAULT_I18N, DEFAULT_ICONS, DefaultItemCards, DefaultItemTable, DefaultRecordCard, DefaultRecordRow, DeleteButton, DrawerPreview, EditorItemNav, EmptyState, ErrorState, FacetList, InheritanceMarker, InheritanceProvider, InlinePreview, IntroCard, ItemListView, ItemViewSwitcher, LoadingState, PresentationSwitcher, PreviewScopePicker, PreviewToggleButton, ProductDrillDown, ProductList, RecordBrowser, RecordEditor, RecordList, RecordsAdminShell, ResolvedPreview, ScopeBreadcrumb, ScopeTabs, SiblingRail, SidePreview, StatusDot, StatusFilterPills, TabbedPreview, UtilityRow, VariantList, buildItemRef, buildRef, checkPasteCompatibility, cloneValue, createDefaultDeepLinkAdapter, downloadBlob, exportCsv, importCsv, mergeIcons, parseRef, pickHeaderIcon, resolutionChain, resolveRecord, splitItemRef, useCollectedRecords, useCollectionItems, useDeepLinkState, useDirtyNavigation, useFacetBrowse, useIntroDismissed, useItemViewPref, useMergedRecord, usePresentationPref, useProductBrowse, useProductChildren, useRecordClipboard, useRecordEditor, useRecordList, useResolveAllRecords, useResolvedRecord, useRulePreview, useScopeProbe, useUnsavedGuard };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map