@proveanything/smartlinks-utils-ui 0.10.0 → 0.10.3

package/dist/components/RecordsAdmin/index.d.ts

@@ -2055,6 +2055,15 @@ declare const useProductBrowse: (args: UseProductBrowseArgs) => {
     refetch: () => Promise<void>;
 };
 
+interface FacetValueShape {
+    key?: string;
+    name?: string;
+}
+interface FacetShape {
+    key?: string;
+    name?: string;
+    values?: FacetValueShape[];
+}
 interface UseFacetBrowseArgs {
     SL: SmartLinksSDK;
     collectionId: string;
@@ -2075,6 +2084,12 @@ declare const useFacetBrowse: ({ SL, collectionId, existing, search, filter, ena
     isLoading: boolean;
     error: Error | null;
     refetch: () => void;
+    /** Raw canonical facet vocabulary as returned by the SDK. Use this
+     *  (NOT `items`) when you need the authoritative list of facets and
+     *  their values — `items` is the record-merged list and may include
+     *  rows whose scope's `facetId` doesn't match a canonical key, which
+     *  would otherwise show up as duplicate facet groups. */
+    vocabulary: FacetShape[];
 };
 
 interface CollectedRecord<T = unknown> {
@@ -2427,8 +2442,17 @@ interface Props<T> {
     selectedItemId?: string;
     isLoading: boolean;
     error: Error | null;
-    /** Retained for API stability — back nav now lives in EditorItemNav. */
+    /** Back to the items list (mirrors the editor-header "Back to list"). */
     onBack?: () => void;
+    /**
+     * Optional context label rendered next to the back arrow. Two parts:
+     *   - `kind`    — short noun ("Rule", "Product", "Global", "Filtered")
+     *   - `summary` — the specific value when relevant (rule summary, product
+     *                 name, …); omitted for kinds that need no qualifier.
+     * The shell composes both from the active scope + selection.
+     */
+    contextKind?: string;
+    contextSummary?: string | null;
     onSelect: (itemId: string) => void;
     /**
      * Set of keys (recordIds + scope refs) currently dirty in the shell-level
@@ -2439,9 +2463,9 @@ interface Props<T> {
     dirtyKeys?: ReadonlySet<string>;
     /** Subset of `dirtyKeys` whose last save attempt failed. */
     errorKeys?: ReadonlySet<string>;
-    i18n: Pick<RecordsAdminI18n, 'backToScopes' | 'siblingsHeading' | 'noItemsTitle' | 'noItemsBody'>;
+    i18n: Pick<RecordsAdminI18n, 'backToScopes' | 'siblingsHeading' | 'noItemsTitle' | 'noItemsBody' | 'backToList'>;
 }
-declare function SiblingRail<T>({ items, selectedItemId, isLoading, error, onSelect, dirtyKeys, errorKeys, i18n, }: Props<T>): react_jsx_runtime.JSX.Element;
+declare function SiblingRail<T>({ items, selectedItemId, isLoading, error, onBack, onSelect, contextKind, contextSummary, dirtyKeys, errorKeys, i18n, }: Props<T>): react_jsx_runtime.JSX.Element;
 
 interface ClipboardEntry<T = unknown> {
     value: T;

package/dist/components/RecordsAdmin/index.js

@@ -817,7 +817,13 @@ var useFacetBrowse = ({
     counts,
     isLoading: query.isLoading,
     error: query.error ?? null,
-    refetch
+    refetch,
+    /** Raw canonical facet vocabulary as returned by the SDK. Use this
+     *  (NOT `items`) when you need the authoritative list of facets and
+     *  their values — `items` is the record-merged list and may include
+     *  rows whose scope's `facetId` doesn't match a canonical key, which
+     *  would otherwise show up as duplicate facet groups. */
+    vocabulary: query.data ?? []
   };
 };
 var QK2 = ["records-admin", "product-browse"];
@@ -3697,6 +3703,8 @@ var FacetList = RecordList;
 var VariantList = RecordList;
 var BatchList = RecordList;
 var COLLAPSED_FACET_CAP = 6;
+var COLLAPSED_VALUE_CAP = 12;
+var VALUE_SEARCH_THRESHOLD = 12;
 function FacetBrowseFilter({
   facets,
   value,
@@ -3710,12 +3718,33 @@ function FacetBrowseFilter({
   );
   const [openKey, setOpenKey] = useState(value?.facetKey ?? firstUsable ?? null);
   const [allExpanded, setAllExpanded] = useState(false);
+  const [valuesExpanded, setValuesExpanded] = useState({});
+  const [valueSearch, setValueSearch] = useState({});
   const effectiveOpen = value?.facetKey ?? openKey ?? firstUsable ?? null;
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "ra-rule-filters", "aria-busy": "true", children: /* @__PURE__ */ jsx("div", { className: "ra-rule-filters-row", children: /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip", "data-active": "false", children: "Loading facets\u2026" }) }) });
   }
   if (!facets.length) return null;
   const openFacet = facets.find((f) => f.key === effectiveOpen) ?? null;
+  const openValuesExpanded = openFacet ? !!valuesExpanded[openFacet.key] : false;
+  const openValueSearch = openFacet ? valueSearch[openFacet.key] ?? "" : "";
+  const openValuesFiltered = useMemo(() => {
+    if (!openFacet) return [];
+    const q = openValueSearch.trim().toLowerCase();
+    if (!q) return openFacet.values;
+    return openFacet.values.filter(
+      (v) => `${v.label ?? ""} ${v.key}`.toLowerCase().includes(q)
+    );
+  }, [openFacet, openValueSearch]);
+  const valueOverflow = openFacet ? openValuesFiltered.length - COLLAPSED_VALUE_CAP : 0;
+  const visibleValues = openFacet ? openValuesExpanded || valueOverflow <= 0 ? openValuesFiltered : (() => {
+    const head = openValuesFiltered.slice(0, COLLAPSED_VALUE_CAP);
+    const activeVal = value && value.facetKey === openFacet.key ? openFacet.values.find((v) => v.key === value.facetValue) : null;
+    if (activeVal && !head.includes(activeVal)) {
+      return [...head.slice(0, COLLAPSED_VALUE_CAP - 1), activeVal];
+    }
+    return head;
+  })() : [];
   const overflow = facets.length - COLLAPSED_FACET_CAP;
   let visibleFacets = facets;
   if (!allExpanded && overflow > 0) {
@@ -3764,30 +3793,57 @@ function FacetBrowseFilter({
         }
       )
     ] }),
-    openFacet && openFacet.values.length > 0 && /* @__PURE__ */ jsx(
+    openFacet && openFacet.values.length > 0 && /* @__PURE__ */ jsxs(
       "div",
       {
         className: "ra-rule-filters-row",
         role: "group",
         "aria-label": `Pick a ${openFacet.label ?? openFacet.key} value`,
-        style: { paddingLeft: "0.25rem" },
-        children: openFacet.values.map((v) => {
-          const active = value?.facetKey === openFacet.key && value?.facetValue === v.key;
-          return /* @__PURE__ */ jsx(
+        style: { paddingLeft: "0.25rem", maxHeight: "8.5rem", overflowY: "auto" },
+        children: [
+          openFacet.values.length > VALUE_SEARCH_THRESHOLD && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "search",
+              value: openValueSearch,
+              onChange: (e) => setValueSearch((s) => ({ ...s, [openFacet.key]: e.target.value })),
+              placeholder: `Search ${openFacet.label ?? openFacet.key}\u2026`,
+              "aria-label": `Search ${openFacet.label ?? openFacet.key} values`,
+              className: "ra-rule-filter-chip",
+              style: { minWidth: "8rem", writingMode: "horizontal-tb" }
+            }
+          ),
+          visibleValues.map((v) => {
+            const active = value?.facetKey === openFacet.key && value?.facetValue === v.key;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ra-rule-filter-chip",
+                "data-tone": "complexity",
+                "data-active": active ? "true" : "false",
+                "aria-pressed": active,
+                onClick: () => onChange(active ? null : { facetKey: openFacet.key, facetValue: v.key }),
+                title: `Filter to ${openFacet.label ?? openFacet.key} = ${v.label ?? v.key}`,
+                children: /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-label", children: v.label ?? v.key })
+              },
+              v.key
+            );
+          }),
+          valueOverflow > 0 && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
+              onClick: () => setValuesExpanded((s) => ({ ...s, [openFacet.key]: !openValuesExpanded })),
               className: "ra-rule-filter-chip",
-              "data-tone": "complexity",
-              "data-active": active ? "true" : "false",
-              "aria-pressed": active,
-              onClick: () => onChange(active ? null : { facetKey: openFacet.key, facetValue: v.key }),
-              title: `Filter to ${openFacet.label ?? openFacet.key} = ${v.label ?? v.key}`,
-              children: /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-label", children: v.label ?? v.key })
-            },
-            v.key
-          );
-        })
+              "data-active": "false",
+              "aria-expanded": openValuesExpanded,
+              title: openValuesExpanded ? "Show fewer values" : `Show all ${openValuesFiltered.length} values`,
+              children: /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-label", children: openValuesExpanded ? "Show fewer" : `Show all (${openValuesFiltered.length})` })
+            }
+          ),
+          openValuesFiltered.length === 0 && /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-clear", style: { cursor: "default", textDecoration: "none" }, children: "No values match." })
+        ]
       }
     ),
     value && /* @__PURE__ */ jsx(
@@ -5950,67 +6006,92 @@ function SiblingRail({
   selectedItemId,
   isLoading,
   error,
+  onBack,
   onSelect,
+  contextKind,
+  contextSummary,
   dirtyKeys,
   errorKeys,
   i18n
 }) {
   const ruleLabelLookup = useRuleLabelLookup();
-  return /* @__PURE__ */ jsx("div", { className: "ra-sibling-rail", children: /* @__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, idx) => {
-      const id = item.itemId ?? "";
-      const key = item.id ?? (id || anchorKey(item.scope) || `pos:${idx}`);
-      const akey = anchorKey(item.scope);
-      const selected = selectedItemId === id;
-      const isDirty = !!(id && dirtyKeys?.has(id) || akey && dirtyKeys?.has(akey));
-      const hasError = !!(id && errorKeys?.has(id) || akey && errorKeys?.has(akey));
-      const ruleClauses = item.facetRule ? summarizeFacetRule(item.facetRule, ruleLabelLookup) : [];
-      const isTargeted = ruleClauses.length > 0;
-      const ruleSummary = isTargeted ? ruleClauses.map((c) => c.label).join(" \xB7 ") : null;
-      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs("div", { className: "ra-sibling-rail", children: [
+    (onBack || contextKind) && /* @__PURE__ */ jsxs("div", { className: "ra-sibling-context", children: [
+      onBack && /* @__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 })
-            ] }),
-            isTargeted && /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "ra-row-rule-pip",
-                title: ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
-                "aria-label": ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
-                children: /* @__PURE__ */ jsx(Target, { className: "w-3 h-3", "aria-hidden": "true" })
-              }
-            ),
-            hasError ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "ra-error-pip",
-                title: "Save failed",
-                "aria-label": "Save failed"
-              }
-            ) : isDirty ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "ra-dirty-pip",
-                title: "Unsaved changes",
-                "aria-label": "Unsaved changes"
-              }
-            ) : null
-          ]
+          onClick: onBack,
+          className: "ra-sibling-context-back",
+          "aria-label": i18n.backToList,
+          title: i18n.backToList,
+          children: /* @__PURE__ */ jsx(ArrowLeft, { className: "w-3.5 h-3.5", "aria-hidden": "true" })
         }
-      ) }, key);
-    }) })
-  ] }) });
+      ),
+      contextKind && /* @__PURE__ */ jsxs("div", { className: "ra-sibling-context-label", title: contextSummary ? `${contextKind} \xB7 ${contextSummary}` : contextKind, children: [
+        /* @__PURE__ */ jsx("span", { className: "ra-sibling-context-kind", children: contextKind }),
+        contextSummary && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ra-sibling-context-sep", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "ra-sibling-context-summary", children: contextSummary })
+        ] })
+      ] })
+    ] }),
+    /* @__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, idx) => {
+        const id = item.itemId ?? "";
+        const key = item.id ?? (id || anchorKey(item.scope) || `pos:${idx}`);
+        const akey = anchorKey(item.scope);
+        const selected = selectedItemId === id;
+        const isDirty = !!(id && dirtyKeys?.has(id) || akey && dirtyKeys?.has(akey));
+        const hasError = !!(id && errorKeys?.has(id) || akey && errorKeys?.has(akey));
+        const ruleClauses = item.facetRule ? summarizeFacetRule(item.facetRule, ruleLabelLookup) : [];
+        const isTargeted = ruleClauses.length > 0;
+        const ruleSummary = isTargeted ? ruleClauses.map((c) => c.label).join(" \xB7 ") : null;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "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 })
+              ] }),
+              isTargeted && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ra-row-rule-pip",
+                  title: ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
+                  "aria-label": ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
+                  children: /* @__PURE__ */ jsx(Target, { className: "w-3 h-3", "aria-hidden": "true" })
+                }
+              ),
+              hasError ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ra-error-pip",
+                  title: "Save failed",
+                  "aria-label": "Save failed"
+                }
+              ) : isDirty ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ra-dirty-pip",
+                  title: "Unsaved changes",
+                  "aria-label": "Unsaved changes"
+                }
+              ) : null
+            ]
+          }
+        ) }, key);
+      }) })
+    ] })
+  ] });
 }
 var TONE_ICON = {
   info: Lightbulb,
@@ -6948,6 +7029,60 @@ var SaveAllProgress = ({
     }
   );
 };
+function PreviewReopenPill({ anchorRef, onClick, ariaLabel, title, children }) {
+  const [pos, setPos] = useState(null);
+  const rafRef = useRef(null);
+  useLayoutEffect(() => {
+    const el = anchorRef.current;
+    if (!el || typeof window === "undefined") return;
+    const measure = () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        const rect = el.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) return;
+        setPos({
+          top: rect.top + rect.height / 2,
+          right: Math.max(0, window.innerWidth - rect.right)
+        });
+      });
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    ro.observe(document.body);
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, true);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, true);
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [anchorRef]);
+  if (typeof document === "undefined" || !pos) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ra-shell ra-preview-reopen ra-preview-reopen--floating",
+        onClick,
+        "aria-label": ariaLabel,
+        title,
+        style: {
+          position: "fixed",
+          top: pos.top,
+          right: pos.right,
+          // Pull half the pill width out into the gutter so it visually
+          // anchors *to* the editor edge rather than sitting inside it.
+          transform: "translate(50%, -50%)"
+        },
+        children
+      }
+    ),
+    document.body
+  );
+}
 var EditorMountPool = ({
   renderSlot,
   keepMountedHidden = true,
@@ -7700,6 +7835,7 @@ function RecordsAdminShellInner(props) {
   ]);
   const onLeftSelectRef = useRef(null);
   const onCreateItemDraftRef = useRef(null);
+  const previewReopenAnchorRef = useRef(null);
   const { runWithGuard } = useDirtyNavigation({
     strategy: dirtyStrategy,
     isDirty: editorCtx.isDirty,
@@ -7807,6 +7943,7 @@ function RecordsAdminShellInner(props) {
   const itemViewCtx = baseItemViewCtx;
   const renderEditorWithPreview = () => {
     if (!editingTargetScope) return null;
+    const previewAnchorRef = previewReopenAnchorRef;
     const previewBody = renderPreview && effectivePreviewScope ? renderPreview({ resolved: editorCtx.value, previewScope: effectivePreviewScope }) : null;
     const scopePicker = previewScopePicker && effectivePreviewScope ? /* @__PURE__ */ jsx(
       PreviewScopePicker,
@@ -7908,15 +8045,14 @@ function RecordsAdminShellInner(props) {
     if (previewMode === "side") {
       if (!sidePreviewOpen) {
         return withNav(
-          /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative h-full", ref: previewAnchorRef, children: [
             baseEditor(),
             /* @__PURE__ */ jsxs(
-              "button",
+              PreviewReopenPill,
               {
-                type: "button",
-                className: "ra-preview-reopen",
+                anchorRef: previewAnchorRef,
                 onClick: () => setSidePreviewOpen(true),
-                "aria-label": i18n.openPreview,
+                ariaLabel: i18n.openPreview,
                 title: i18n.openPreview,
                 children: [
                   /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" }),
@@ -8212,25 +8348,18 @@ function RecordsAdminShellInner(props) {
     [facetBrowseFilter]
   );
   const facetBrowseFacets = useMemo(() => {
-    if (!facetBrowse.items.length) return [];
-    const byKey = /* @__PURE__ */ new Map();
-    for (const it of facetBrowse.items) {
-      const key = it.scope.facetId;
-      const value = it.scope.facetValue;
-      if (!key || !value) continue;
-      const facetLabel = it.subtitle ?? key;
-      const valueLabel = it.label ?? value;
-      const existing = byKey.get(key);
-      if (existing) {
-        if (!existing.values.some((v) => v.key === value)) {
-          existing.values.push({ key: value, label: valueLabel });
-        }
-      } else {
-        byKey.set(key, { key, label: facetLabel, values: [{ key: value, label: valueLabel }] });
-      }
+    const vocab = facetBrowse.vocabulary ?? [];
+    if (!vocab.length) return [];
+    const out = [];
+    for (const facet of vocab) {
+      const key = facet.key;
+      if (!key) continue;
+      const values = (facet.values ?? []).filter((v) => !!v.key).map((v) => ({ key: v.key, label: v.name ?? v.key }));
+      if (!values.length) continue;
+      out.push({ key, label: facet.name ?? key, values });
     }
-    return Array.from(byKey.values());
-  }, [facetBrowse.items]);
+    return out;
+  }, [facetBrowse.vocabulary]);
   const collectionGlobalAllRow = useMemo(
     () => ({
       id: null,
@@ -8438,6 +8567,8 @@ function RecordsAdminShellInner(props) {
                   onSelect: onItemOpen,
                   dirtyKeys,
                   errorKeys,
+                  contextKind: activeScope === "rule" ? "Rule" : activeScope === "product" ? "Product" : activeScope === "collection" ? "Global" : activeScope === "all" ? "All records" : activeScope === "variant" ? "Variant" : activeScope === "batch" ? "Batch" : activeScope === "facet" ? "Facet" : void 0,
+                  contextSummary: activeScope === "rule" ? activeRuleSummary : activeScope === "product" ? editorHeaderLabel ?? null : null,
                   i18n
                 }
               ) : /* @__PURE__ */ jsxs(Fragment, { children: [