@proveanything/smartlinks-utils-ui 0.9.7 → 0.9.8

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

@@ -1235,6 +1235,14 @@ interface Props$a<T> {
     headerLabel?: string;
     /** Optional subtitle shown beneath `headerLabel` (e.g. facet name). */
     headerSubtitle?: string;
+    /**
+     * Optional content rendered at the very start of the header's left
+     * cluster, before the title/breadcrumb. Used by the shell to embed the
+     * collection-mode `EditorItemNav` (Back / position / arrows) inline so
+     * it shares the row with the Global / scope chip instead of consuming
+     * its own strip above the editor.
+     */
+    headerLeading?: ReactNode;
     /**
      * Optional technical reference (e.g. productId / SKU) shown as a tiny muted
      * caption pinned to the top-right of the header. Power users can scan it
@@ -1259,7 +1267,7 @@ interface Props$a<T> {
     /** Host-provided icons rendered before save / discard / delete labels. */
     actionIcons?: Partial<Record<RecordsAdminActionKey, RecordsAdminActionIcon>>;
 }
-declare function RecordEditor<T>({ ctx, i18n, children, preview, targeting, targetingControl, bulkActions, footerExtra, onBeforeDelete, headerLabel, headerSubtitle, headerMeta, clipboard, actionLabels, actionIcons, }: Props$a<T>): react_jsx_runtime.JSX.Element;
+declare function RecordEditor<T>({ ctx, i18n, children, preview, targeting, targetingControl, bulkActions, footerExtra, onBeforeDelete, headerLabel, headerSubtitle, headerMeta, headerLeading, clipboard, actionLabels, actionIcons, }: Props$a<T>): react_jsx_runtime.JSX.Element;
 
 interface InheritanceCtx {
     parentValue?: Record<string, unknown> | null;
@@ -1897,6 +1905,16 @@ interface UseScopeCountsResult {
     error: Error | null;
     /** True when we hit `maxRecords` and stopped paginating. */
     truncated: boolean;
+    /**
+     * Set of distinct `productId`s observed across the scanned records.
+     * Used by the rail to:
+     *   • surface "X products configured" as the Products tab badge
+     *     (consistent with Global/Rules counts — never catalogue size);
+     *   • sort configured products to the top of the browse rail;
+     *   • back the Configured/Not-configured filter pills.
+     * Lower bound when `truncated` is true.
+     */
+    productIds: ReadonlySet<string>;
 }
 declare const useScopeCounts: (args: UseScopeCountsArgs) => UseScopeCountsResult;
 /** React Query key factory for cache invalidation from save/delete sites. */
@@ -2283,8 +2301,15 @@ interface Props$1 {
     canPrev: boolean;
     canNext: boolean;
     i18n: Pick<RecordsAdminI18n, 'backToList' | 'prevItem' | 'nextItem'>;
+    /**
+     * When true, render without the row-level border/background/padding so
+     * the nav can sit inline inside another header strip (the shell embeds
+     * it in `RecordEditor`'s header to avoid a dedicated row of whitespace
+     * above the editor).
+     */
+    embedded?: boolean;
 }
-declare const EditorItemNav: ({ label, position, total, onBack, onPrev, onNext, canPrev, canNext, i18n, }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const EditorItemNav: ({ label, position, total, onBack, onPrev, onNext, canPrev, canNext, i18n, embedded, }: Props$1) => react_jsx_runtime.JSX.Element;
 
 interface Props<T> {
     items: RecordSummary<T>[];

package/dist/components/RecordsAdmin/index.js

@@ -531,14 +531,20 @@ var useScopeCounts = (args) => {
       rule: 0,
       all: 0
     };
-    for (const rec of records) counts[classify(rec)] += 1;
+    const productIds = /* @__PURE__ */ new Set();
+    for (const rec of records) {
+      counts[classify(rec)] += 1;
+      const pid = rec.productId ?? void 0;
+      if (pid) productIds.add(pid);
+    }
     counts.all = records.length;
     return {
       counts,
       total: records.length,
       isLoading: query.isLoading,
       error: query.error ?? null,
-      truncated
+      truncated,
+      productIds
     };
   }, [query.data, query.isLoading, query.error]);
   return result;
@@ -4245,6 +4251,7 @@ function RecordEditor({
   headerLabel,
   headerSubtitle,
   headerMeta,
+  headerLeading,
   clipboard,
   actionLabels,
   actionIcons
@@ -4261,7 +4268,7 @@ function RecordEditor({
     const s = ctx.scope;
     return Boolean(s?.facetId || s?.productId || s?.variantId || s?.batchId);
   })();
-  const hasLeftContent = Boolean(headerLabel) || hasBreadcrumb;
+  const hasLeftContent = Boolean(headerLabel) || hasBreadcrumb || Boolean(headerLeading);
   const hasRightContent = showInherited || showEmpty || Boolean(headerMeta) || Boolean(bulkActions) || Boolean(targetingControl);
   const showHeader = hasLeftContent || hasRightContent;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
@@ -4271,26 +4278,29 @@ function RecordEditor({
         className: "sticky top-0 z-40 px-5 py-3 border-b flex items-start justify-between gap-3",
         style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" },
         children: [
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: headerLabel ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "text-sm font-medium truncate",
-                style: { color: "hsl(var(--ra-text))" },
-                title: headerLabel,
-                children: headerLabel
-              }
-            ),
-            headerSubtitle && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "text-xs truncate",
-                style: { color: "hsl(var(--ra-muted-text))" },
-                title: headerSubtitle,
-                children: headerSubtitle
-              }
-            )
-          ] }) : /* @__PURE__ */ jsx(ScopeBreadcrumb, { scope: ctx.scope }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 flex items-center gap-3", children: [
+            headerLeading && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: headerLeading }),
+            headerLabel ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-sm font-medium truncate",
+                  style: { color: "hsl(var(--ra-text))" },
+                  title: headerLabel,
+                  children: headerLabel
+                }
+              ),
+              headerSubtitle && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-xs truncate",
+                  style: { color: "hsl(var(--ra-muted-text))" },
+                  title: headerSubtitle,
+                  children: headerSubtitle
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(ScopeBreadcrumb, { scope: ctx.scope })
+          ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 shrink-0", children: [
             showInherited && /* @__PURE__ */ jsxs(
               "span",
@@ -5759,8 +5769,9 @@ var EditorItemNav = ({
   onNext,
   canPrev,
   canNext,
-  i18n
-}) => /* @__PURE__ */ jsxs("div", { className: "ra-item-nav", children: [
+  i18n,
+  embedded
+}) => /* @__PURE__ */ jsxs("div", { className: "ra-item-nav", "data-embedded": embedded ? "true" : void 0, children: [
   /* @__PURE__ */ jsxs(
     "button",
     {
@@ -5774,12 +5785,7 @@ var EditorItemNav = ({
       ]
     }
   ),
-  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__ */ jsxs("div", { className: "ra-item-nav-cluster", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -5792,6 +5798,11 @@ var EditorItemNav = ({
         children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
       }
     ),
+    typeof position === "number" && typeof total === "number" && total > 0 && /* @__PURE__ */ jsxs("span", { className: "ra-item-nav-position", "aria-label": label, children: [
+      position,
+      " / ",
+      total
+    ] }),
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -7665,6 +7676,7 @@ function RecordsAdminShellInner(props) {
     const itemNav = isCollection && selectedItemId && itemPosition && ruleWizardStep === null ? /* @__PURE__ */ jsx(
       EditorItemNav,
       {
+        embedded: true,
         label: editorHeaderLabel,
         position: itemPosition.index + 1,
         total: itemPosition.total,
@@ -7717,6 +7729,7 @@ function RecordsAdminShellInner(props) {
         headerLabel: editorHeaderLabel,
         headerSubtitle: editorHeaderSubtitle,
         headerMeta: editorHeaderMeta,
+        headerLeading: itemNav,
         clipboard: editorClipboard,
         actionLabels,
         actionIcons,
@@ -7735,10 +7748,7 @@ function RecordsAdminShellInner(props) {
         )
       }
     );
-    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;
+    const withNav = (node) => node;
     if (!previewBody) return withNav(baseEditor());
     if (previewMode === "inline") {
       return withNav(baseEditor(
@@ -7841,8 +7851,26 @@ function RecordsAdminShellInner(props) {
         subtitle: pinnedProduct.item?.sku ?? void 0
       }];
     }
-    return productBrowse.items.map(productItemToSummary);
-  }, [productPinned, contextScope, productBrowse.items, pinnedProduct.item]);
+    const configured = scopeCounts.productIds;
+    const all = productBrowse.items.map(productItemToSummary);
+    const isConfigured = (s) => {
+      const pid = s.scope.productId;
+      return !!pid && configured.has(pid);
+    };
+    if (filter === "configured") return all.filter(isConfigured);
+    if (filter === "empty") return all.filter((s) => !isConfigured(s));
+    const yes = [];
+    const no = [];
+    for (const s of all) (isConfigured(s) ? yes : no).push(s);
+    return [...yes, ...no];
+  }, [
+    productPinned,
+    contextScope,
+    productBrowse.items,
+    pinnedProduct.item,
+    scopeCounts.productIds,
+    filter
+  ]);
   const isRuleTab = activeScope === "rule";
   const isGlobalTab = activeScope === "collection";
   const isAllTab = activeScope === "all";
@@ -8281,10 +8309,14 @@ function RecordsAdminShellInner(props) {
                     },
                     loading: probe.isLoading,
                     counts: {
-                      // `product` continues to show the catalogue size (browse
-                      // affordance), not the per-product record count — that's
-                      // the long-standing semantics for the Products tab.
-                      product: productBrowse.items.length,
+                      // Products badge counts DISTINCT products that have at
+                      // least one custom record — same semantics as Global /
+                      // Rules. Catalogue size (which can be 1k–10k+) was
+                      // misleading: "Products: 247" implied 247 customised
+                      // products when in fact zero might be configured. Falls
+                      // back to a lower bound when scope-counts truncated at
+                      // the hard cap.
+                      product: scopeCounts.productIds.size,
                       // The remaining tabs show actual record counts so hidden
                       // state (e.g. a rule-scoped competition) is visible from
                       // any tab. `useScopeCounts` returns 0 while loading, which
@@ -8365,6 +8397,27 @@ function RecordsAdminShellInner(props) {
                         i18n
                       }
                     ),
+                    isProductTab && !productPinned && (() => {
+                      const cfg = scopeCounts.productIds;
+                      let configured = 0;
+                      for (const p of productBrowse.items) if (cfg.has(p.id)) configured += 1;
+                      const total = productBrowse.items.length;
+                      return /* @__PURE__ */ jsx(
+                        StatusFilterPills,
+                        {
+                          value: filter,
+                          onChange: setFilter,
+                          counts: {
+                            all: total,
+                            configured,
+                            partial: 0,
+                            empty: total - configured
+                          },
+                          hideZero: ["partial"],
+                          i18n
+                        }
+                      );
+                    })(),
                     isRuleTab && /* @__PURE__ */ jsx(
                       RuleFilterChips,
                       {