@proveanything/smartlinks-utils-ui 0.7.0 → 0.7.1

package/dist/components/RecordsAdmin/index.js

@@ -1,11 +1,11 @@
-import { styleInject } from '../../chunk-HXJLROC2.js';
+import { styleInject } from '../../chunk-RBKJ4LZG.js';
 import { FacetRuleEditor } from '../../chunk-JMCV6FOW.js';
 import { useFacets } from '../../chunk-4LHF5JB7.js';
 import { cn } from '../../chunk-L7FQ52F5.js';
 import { listRecords, parsedRefToTarget, parsedRefToScope, matchRecords, scopesEqual, getRecordById, updateRecord, createRecord, upsertRecord, removeRecord } from '../../chunk-KFKVGUUP.js';
 export { bulkDelete, bulkUpsert, createRecord, getRecordById, listRecords, matchRecords, parsedRefToScope, parsedRefToTarget, removeRecord, restoreRecord, scopesEqual, upsertRecord } from '../../chunk-KFKVGUUP.js';
 import { createContext, useMemo, useState, useEffect, useCallback, useRef, useContext, createElement, useId } from 'react';
-import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, SlidersHorizontal, 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, BookOpen, Target, Settings2 } from 'lucide-react';
+import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, SlidersHorizontal, 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, ArrowRight, BookOpen, Target, Settings2 } from 'lucide-react';
 import { useQueryClient, useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1883,6 +1883,7 @@ function applyRuleFilters(items, filters) {
     return true;
   });
 }
+var COLLAPSED_FACET_CAP = 6;
 function FacetBrowseFilter({
   facets,
   value,
@@ -1895,39 +1896,61 @@ function FacetBrowseFilter({
     [facets]
   );
   const [openKey, setOpenKey] = useState(value?.facetKey ?? firstUsable ?? null);
+  const [allExpanded, setAllExpanded] = useState(false);
   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 overflow = facets.length - COLLAPSED_FACET_CAP;
+  let visibleFacets = facets;
+  if (!allExpanded && overflow > 0) {
+    const head = facets.slice(0, COLLAPSED_FACET_CAP);
+    const activeFacet = value ? facets.find((f) => f.key === value.facetKey) : null;
+    visibleFacets = activeFacet && !head.includes(activeFacet) ? [...head.slice(0, COLLAPSED_FACET_CAP - 1), activeFacet] : head;
+  }
   return /* @__PURE__ */ jsxs("div", { className: "ra-rule-filters", role: "group", "aria-label": "Browse by facet", children: [
-    /* @__PURE__ */ jsx("div", { className: "ra-rule-filters-row", children: facets.map((f) => {
-      const active = effectiveOpen === f.key;
-      const isFiltered = value?.facetKey === f.key;
-      return /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs("div", { className: "ra-rule-filters-row", children: [
+      visibleFacets.map((f) => {
+        const active = effectiveOpen === f.key;
+        const isFiltered = value?.facetKey === f.key;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ra-rule-filter-chip",
+            "data-active": isFiltered ? "true" : "false",
+            "aria-pressed": active,
+            onClick: () => {
+              if (isFiltered) {
+                onChange(null);
+                return;
+              }
+              setOpenKey(f.key);
+            },
+            title: `Browse ${f.label ?? f.key} values`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-label", children: f.label ?? f.key }),
+              /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-count", children: f.values.length })
+            ]
+          },
+          f.key
+        );
+      }),
+      overflow > 0 && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
+          onClick: () => setAllExpanded((v) => !v),
           className: "ra-rule-filter-chip",
-          "data-active": isFiltered ? "true" : "false",
-          "aria-pressed": active,
-          onClick: () => {
-            if (isFiltered) {
-              onChange(null);
-              return;
-            }
-            setOpenKey(f.key);
-          },
-          title: `Browse ${f.label ?? f.key} values`,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-label", children: f.label ?? f.key }),
-            /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-count", children: f.values.length })
-          ]
-        },
-        f.key
-      );
-    }) }),
+          "data-active": "false",
+          "aria-expanded": allExpanded,
+          title: allExpanded ? "Show fewer facets" : `Show all ${facets.length} facets`,
+          children: /* @__PURE__ */ jsx("span", { className: "ra-rule-filter-chip-label", children: allExpanded ? "Show fewer" : `Show all (${facets.length})` })
+        }
+      )
+    ] }),
     openFacet && openFacet.values.length > 0 && /* @__PURE__ */ jsx(
       "div",
       {
@@ -3794,6 +3817,198 @@ function ShellHeader({
     }
   ) });
 }
+function NewRuleWizard({
+  SL,
+  collectionId,
+  appId,
+  step,
+  rule,
+  onRuleChange,
+  onCancel,
+  onNext,
+  onBack,
+  children,
+  itemNoun = "record"
+}) {
+  const preview = useRulePreview({ SL, collectionId, appId, rule });
+  const canProceed = isFacetRuleValid(rule);
+  if (step === 1) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        WizardStepHeader,
+        {
+          step: 1,
+          totalSteps: 2,
+          title: "Configure rule",
+          description: "Pick the facet conditions that decide which products this rule applies to.",
+          onCancel
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-auto px-5 py-4", children: /* @__PURE__ */ jsx(
+        FacetRuleEditor,
+        {
+          value: rule,
+          onChange: onRuleChange,
+          collectionId,
+          preview,
+          description: "The new rule will apply to every product whose facets match every clause below."
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        WizardFooter,
+        {
+          left: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onCancel,
+              className: "ra-btn",
+              "data-variant": "ghost",
+              children: "Cancel"
+            }
+          ),
+          right: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onNext,
+              disabled: !canProceed,
+              className: "ra-btn",
+              "data-variant": "primary",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: "Next" }),
+                /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": "true", className: "w-4 h-4" })
+              ]
+            }
+          ),
+          hint: !canProceed ? "Add at least one facet clause with values to continue." : preview.totalMatches != null ? `${preview.totalMatches} product${preview.totalMatches === 1 ? "" : "s"} currently match this rule.` : void 0
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      WizardStepHeader,
+      {
+        step: 2,
+        totalSteps: 2,
+        title: `Configure ${itemNoun}`,
+        description: preview.totalMatches != null ? `This rule currently matches ${preview.totalMatches} product${preview.totalMatches === 1 ? "" : "s"}.` : "Fill in the details for this rule.",
+        onCancel,
+        onBack
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children })
+  ] });
+}
+function WizardStepHeader({
+  step,
+  totalSteps,
+  title,
+  description,
+  onCancel,
+  onBack
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-start gap-3 px-5 py-3 border-b",
+      style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-muted) / 0.4)" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-0.5", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded",
+                style: {
+                  color: "hsl(var(--ra-accent))",
+                  background: "hsl(var(--ra-accent) / 0.12)"
+                },
+                children: [
+                  "Step ",
+                  step,
+                  " of ",
+                  totalSteps
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: "text-sm font-semibold m-0",
+                style: { color: "hsl(var(--ra-text))" },
+                children: title
+              }
+            )
+          ] }),
+          description ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-xs m-0",
+              style: { color: "hsl(var(--ra-muted-text))" },
+              children: description
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+          onBack ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onBack,
+              className: "ra-btn",
+              "data-variant": "ghost",
+              "aria-label": "Back to rule",
+              children: [
+                /* @__PURE__ */ jsx(ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" }),
+                /* @__PURE__ */ jsx("span", { children: "Back" })
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onCancel,
+              className: "ra-btn",
+              "data-variant": "ghost",
+              "aria-label": "Cancel new rule",
+              title: "Cancel",
+              style: { width: "2rem", height: "2rem", padding: 0, justifyContent: "center" },
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "w-4 h-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function WizardFooter({
+  left,
+  right,
+  hint
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-3 px-5 py-3 border-t",
+      style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: left }),
+        hint ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-xs flex-1 min-w-0 truncate",
+            style: { color: "hsl(var(--ra-muted-text))" },
+            children: hint
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0", children: right })
+      ]
+    }
+  );
+}
 var UnsavedBanner = ({
   label,
   context,
@@ -4157,6 +4372,8 @@ function RecordsAdminShell(props) {
   const [facetBrowseFilter, setFacetBrowseFilter] = useState(null);
   const [selectedRecordId, setSelectedRecordId] = useState(null);
   const [draftKind, setDraftKind] = useState(null);
+  const [ruleWizardStep, setRuleWizardStep] = useState(null);
+  const [ruleWizardRule, setRuleWizardRule] = useState(null);
   const [selectedProductId, setSelectedProductId] = useState(
     contextScope?.productId
   );
@@ -4260,6 +4477,9 @@ function RecordsAdminShell(props) {
         return null;
       }
       if (selectedRecordId === DRAFT_ID) {
+        if (draftKind === "rule") {
+          return { ...parseRef(""), kind: "rule", raw: "rule:__draft__" };
+        }
         return parseRef("");
       }
       const hit = recordList.items.find((it) => it.id === selectedRecordId);
@@ -4276,7 +4496,7 @@ function RecordsAdminShell(props) {
       return parseRef(buildRef({ productId: selectedProductId, batchId: selectedBatchId }));
     }
     return parseRef(buildRef({ productId: selectedProductId }));
-  }, [activeScope, cardinality, selectedRecordId, recordList.items, selectedProductId, drillTab, selectedVariantId, selectedBatchId]);
+  }, [activeScope, cardinality, selectedRecordId, draftKind, recordList.items, selectedProductId, drillTab, selectedVariantId, selectedBatchId]);
   const isCollection = cardinality === "collection";
   const editingItemRecordId = isCollection ? selectedItemId : null;
   const collectionItems = useCollectionItems({
@@ -4401,9 +4621,14 @@ function RecordsAdminShell(props) {
     // section can render its empty-state picker. For existing rule records
     // pull the saved rule off the resolved record. Pinned scopes get `null`
     // and the Targeting section stays hidden.
-    initialFacetRule: editingTargetScope?.kind === "rule" ? resolved.facetRule ?? { all: [] } : null,
+    initialFacetRule: editingTargetScope?.kind === "rule" ? ruleWizardStep === 2 && ruleWizardRule ? ruleWizardRule : resolved.facetRule ?? { all: [] } : ruleWizardStep === 2 && ruleWizardRule && isCollection && !!selectedItemId ? ruleWizardRule : null,
     onSaved: () => {
       onTelemetry?.({ type: "record.save", recordType, ref: editingTargetScope?.raw ?? "", isCreate: resolved.source !== "self" });
+      if (ruleWizardStep !== null) {
+        setRuleWizardStep(null);
+        setRuleWizardRule(null);
+        setDraftKind(null);
+      }
       refetchAll();
     },
     onDeleted: () => {
@@ -4910,10 +5135,38 @@ function RecordsAdminShell(props) {
   const onCreateRule = useCallback(() => {
     void runWithGuard(() => {
       if (activeScope !== "rule") setActiveScope("rule");
-      setSelectedRecordId(DRAFT_ID);
+      setSelectedRecordId(null);
+      setSelectedItemId(null);
       setDraftKind("rule");
+      setRuleWizardRule({ all: [] });
+      setRuleWizardStep(1);
     });
   }, [runWithGuard, activeScope]);
+  const onCancelRuleWizard = useCallback(() => {
+    setRuleWizardStep(null);
+    setRuleWizardRule(null);
+    setSelectedRecordId(null);
+    setSelectedItemId(null);
+    setDraftKind(null);
+  }, []);
+  const onRuleWizardNext = useCallback(() => {
+    if (cardinality === "collection") {
+      setRuleWizardStep(2);
+    } else {
+      setRuleWizardStep(2);
+      setSelectedRecordId(DRAFT_ID);
+    }
+  }, [cardinality]);
+  const onRuleWizardBack = useCallback(() => {
+    setRuleWizardStep(1);
+    setSelectedRecordId(null);
+    setSelectedItemId(null);
+  }, []);
+  const onRuleWizardCreateItem = useCallback(() => {
+    if (!isCollection) return;
+    const id = generateItemId ? generateItemId() : DRAFT_ID;
+    setSelectedItemId(id);
+  }, [isCollection, generateItemId]);
   const hasGlobalRecord = useMemo(
     () => recordList.items.some((it) => !it.scope.productId && !it.scope.facetId && !it.scope.variantId && !it.scope.batchId && !it.scope.proofId),
     [recordList.items]
@@ -4994,6 +5247,10 @@ function RecordsAdminShell(props) {
       } else {
         setSelectedRecordId(item.id ?? null);
         setDraftKind(null);
+        if (ruleWizardStep !== null) {
+          setRuleWizardStep(null);
+          setRuleWizardRule(null);
+        }
       }
     });
   };
@@ -5140,6 +5397,11 @@ function RecordsAdminShell(props) {
                     onChange: (s) => {
                       void runWithGuard(() => {
                         onTelemetry?.({ type: "scope.change", recordType, from: activeScope, to: s });
+                        if (ruleWizardStep !== null) {
+                          setRuleWizardStep(null);
+                          setRuleWizardRule(null);
+                          setDraftKind(null);
+                        }
                         setActiveScope(s);
                       });
                     },
@@ -5277,7 +5539,68 @@ function RecordsAdminShell(props) {
                 ] })
               ] }) }),
               /* @__PURE__ */ jsxs("main", { className: "overflow-hidden", children: [
-                isCollection && editingScope && !selectedItemId && /* @__PURE__ */ jsx(
+                ruleWizardStep !== null && /* @__PURE__ */ jsxs(
+                  NewRuleWizard,
+                  {
+                    SL,
+                    collectionId,
+                    appId,
+                    step: ruleWizardStep,
+                    rule: ruleWizardRule,
+                    onRuleChange: setRuleWizardRule,
+                    onCancel: onCancelRuleWizard,
+                    onNext: onRuleWizardNext,
+                    onBack: onRuleWizardBack,
+                    itemNoun,
+                    children: [
+                      ruleWizardStep === 2 && !isCollection && editingTargetScope && renderEditorWithPreview(),
+                      ruleWizardStep === 2 && isCollection && !selectedItemId && /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center px-6 py-10", children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm text-center space-y-3", children: [
+                        /* @__PURE__ */ jsxs(
+                          "h3",
+                          {
+                            className: "text-base font-semibold m-0",
+                            style: { color: "hsl(var(--ra-text))" },
+                            children: [
+                              "Create your first ",
+                              itemNoun,
+                              " for this rule"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "p",
+                          {
+                            className: "text-sm m-0",
+                            style: { color: "hsl(var(--ra-muted-text))" },
+                            children: [
+                              "The rule is set up. Now add the first ",
+                              itemNoun,
+                              " that should apply to every product matching it. You can add more later."
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: onRuleWizardCreateItem,
+                            className: "ra-btn",
+                            "data-variant": "primary",
+                            children: [
+                              /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true", className: "w-4 h-4" }),
+                              /* @__PURE__ */ jsxs("span", { children: [
+                                "Create first ",
+                                itemNoun
+                              ] })
+                            ]
+                          }
+                        )
+                      ] }) }),
+                      ruleWizardStep === 2 && isCollection && !!selectedItemId && editingTargetScope && renderEditorWithPreview()
+                    ]
+                  }
+                ),
+                ruleWizardStep === null && isCollection && editingScope && !selectedItemId && /* @__PURE__ */ jsx(
                   ItemListView,
                   {
                     items: collectionItems.items,
@@ -5295,8 +5618,8 @@ function RecordsAdminShell(props) {
                     i18n
                   }
                 ),
-                !isCollection && !editingScope && activeScope === "product" && !selectedProductId && /* @__PURE__ */ jsx(EmptyState, { title: i18n.emptyTitle, body: i18n.emptyBody }),
-                isProductTab && selectedProductId && (!isCollection || selectedItemId) && /* @__PURE__ */ jsx(
+                ruleWizardStep === null && !isCollection && !editingScope && activeScope === "product" && !selectedProductId && /* @__PURE__ */ jsx(EmptyState, { title: i18n.emptyTitle, body: i18n.emptyBody }),
+                ruleWizardStep === null && isProductTab && selectedProductId && (!isCollection || selectedItemId) && /* @__PURE__ */ jsx(
                   ProductDrillDown,
                   {
                     productLabel: productBrowse.items.find((p) => p.id === selectedProductId)?.name ?? selectedProductId,
@@ -5333,7 +5656,7 @@ function RecordsAdminShell(props) {
                     )
                   }
                 ),
-                !isProductTab && editingTargetScope && (!isCollection || selectedItemId) && renderEditorWithPreview()
+                ruleWizardStep === null && !isProductTab && editingTargetScope && (!isCollection || selectedItemId) && renderEditorWithPreview()
               ] })
             ]
           }