@proveanything/smartlinks-utils-ui 0.7.3 → 0.7.4

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

@@ -2140,9 +2140,18 @@ interface Props<T> {
     error: Error | null;
     onBack: () => void;
     onSelect: (itemId: string) => void;
+    /**
+     * Set of keys (recordIds + scope refs) currently dirty in the shell-level
+     * draft store. Used to paint a per-row pip on items the user has edited
+     * but isn't currently looking at — mirrors the affordance the scope rail
+     * gets via `RecordList.dirtyKeys`.
+     */
+    dirtyKeys?: ReadonlySet<string>;
+    /** Subset of `dirtyKeys` whose last save attempt failed. */
+    errorKeys?: ReadonlySet<string>;
     i18n: Pick<RecordsAdminI18n, 'backToScopes' | 'siblingsHeading' | 'noItemsTitle' | 'noItemsBody'>;
 }
-declare function SiblingRail<T>({ items, selectedItemId, isLoading, error, onBack, onSelect, i18n, }: Props<T>): react_jsx_runtime.JSX.Element;
+declare function SiblingRail<T>({ items, selectedItemId, isLoading, error, onBack, onSelect, dirtyKeys, errorKeys, i18n, }: Props<T>): react_jsx_runtime.JSX.Element;
 
 interface ClipboardEntry<T = unknown> {
     value: T;

package/dist/components/RecordsAdmin/index.js

@@ -713,6 +713,7 @@ function useRecordEditor(args) {
   const [savedFacetRule, setSavedFacetRule] = useState(
     initialDraft ? initialDraft.baselineFacetRule : initialFacetRule
   );
+  const [userInteracted, setUserInteracted] = useState(!!initialDraft);
   const [optimisticSource, setOptimisticSource] = useState(null);
   const [isSaving, setIsSaving] = useState(false);
   const [saveError, setSaveError] = useState(null);
@@ -732,8 +733,18 @@ function useRecordEditor(args) {
     setFacetRule(initialFacetRule);
     setSavedFacetRule(initialFacetRule);
     setOptimisticSource(null);
+    setUserInteracted(false);
   }, [scope.raw, resolved.source, resolved.sourceRef]);
-  const isDirty = !isEqual(value, savedSnapshot) || !isEqual(facetRule, savedFacetRule);
+  const valueDiff = !isEqual(value, savedSnapshot) || !isEqual(facetRule, savedFacetRule);
+  const isDirty = userInteracted && valueDiff;
+  const handleChange = useCallback((next) => {
+    setUserInteracted(true);
+    setValue(next);
+  }, []);
+  const handleFacetRuleChange = useCallback((next) => {
+    setUserInteracted(true);
+    setFacetRule(next);
+  }, []);
   const save = useCallback(async () => {
     const anchors = parsedRefToScope(scope);
     const hasAnchors = !!(anchors.productId || anchors.variantId || anchors.batchId || anchors.proofId);
@@ -817,6 +828,7 @@ function useRecordEditor(args) {
   const reset = useCallback(() => {
     setValue(savedSnapshot);
     setFacetRule(savedFacetRule);
+    setUserInteracted(false);
     draftStore.clearDraft(draftKey);
   }, [savedSnapshot, savedFacetRule]);
   const remove = useCallback(async () => {
@@ -826,15 +838,42 @@ function useRecordEditor(args) {
     draftStore.clearDraft(draftKey);
     onDeleted?.();
   }, [resolved.source, resolved.recordId]);
+  const prevDraftKeyRef = useRef(draftKey);
+  const prevScopeRawRef = useRef(scope.raw);
+  useEffect(() => {
+    const prevKey = prevDraftKeyRef.current;
+    const prevScopeRaw = prevScopeRawRef.current;
+    if (prevKey && prevKey !== draftKey && prevScopeRaw === scope.raw) {
+      const stale = draftStore.get(prevKey);
+      if (stale) draftStore.clearDraft(prevKey);
+    }
+    prevDraftKeyRef.current = draftKey;
+    prevScopeRawRef.current = scope.raw;
+  }, [draftKey, scope.raw]);
   useEffect(() => {
     if (!isDirty) {
       return;
     }
     const anchors = parsedRefToScope(scope);
     const saveKind = resolved.recordId && resolved.source === "self" ? "update" : createMode ? "create" : "upsert";
+    const deriveLabel = () => {
+      const v = value;
+      if (v && typeof v === "object") {
+        for (const key of ["title", "name", "label", "heading", "question"]) {
+          const raw = v[key];
+          if (typeof raw === "string" && raw.trim()) return raw.trim();
+        }
+      }
+      if (scope.raw?.startsWith("item:")) return "Untitled item";
+      if (scope.kind === "rule") return "Rule";
+      if (scope.kind && scope.kind !== "collection") {
+        return scope.kind.charAt(0).toUpperCase() + scope.kind.slice(1);
+      }
+      return "Default";
+    };
     draftStore.upsertDraft({
       key: draftKey,
-      label: scope.raw || "Default",
+      label: deriveLabel(),
       context: scope.kind,
       scopeRaw: scope.raw,
       recordId: resolved.recordId,
@@ -858,7 +897,7 @@ function useRecordEditor(args) {
   const cannotSaveReason = !ruleValid ? "Pick at least one value for every facet in the rule before saving." : void 0;
   return {
     value,
-    onChange: setValue,
+    onChange: handleChange,
     source: effectiveSource,
     recordId: resolved.recordId,
     parentValue: resolved.parentValue,
@@ -873,7 +912,7 @@ function useRecordEditor(args) {
     isSaving,
     saveError,
     facetRule,
-    onFacetRuleChange: setFacetRule
+    onFacetRuleChange: handleFacetRuleChange
   };
 }
 var RT_KEY = (recordType) => recordType ?? "_default";
@@ -3722,6 +3761,8 @@ function SiblingRail({
   error,
   onBack,
   onSelect,
+  dirtyKeys,
+  errorKeys,
   i18n
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "ra-sibling-rail", children: [
@@ -3745,17 +3786,36 @@ function SiblingRail({
       !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(
+        const isDirty = !!(id && dirtyKeys?.has(id) || item.ref && dirtyKeys?.has(item.ref));
+        const hasError = !!(id && errorKeys?.has(id) || item.ref && errorKeys?.has(item.ref));
+        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 })
-            ] })
+            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 })
+              ] }),
+              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
+            ]
           }
         ) }, item.ref);
       }) })
@@ -4202,8 +4262,23 @@ var UnsavedTray = ({
   const wrapRef = useRef(null);
   const SI = SaveIcon ?? Save;
   const DI = DiscardIcon ?? Undo2;
-  const total = drafts.length;
-  const errors = drafts.filter((d) => d.status === "error").length;
+  const uniqueDrafts = useMemo(() => {
+    const byBucket = /* @__PURE__ */ new Map();
+    for (const d of drafts) {
+      const bucket = d.recordId || d.scopeRaw || d.key;
+      const existing = byBucket.get(bucket);
+      if (!existing) {
+        byBucket.set(bucket, d);
+        continue;
+      }
+      const existingSynthetic = existing.key.startsWith("draft:");
+      const incomingSynthetic = d.key.startsWith("draft:");
+      if (existingSynthetic && !incomingSynthetic) byBucket.set(bucket, d);
+    }
+    return Array.from(byBucket.values()).sort((a, b) => a.order - b.order);
+  }, [drafts]);
+  const total = uniqueDrafts.length;
+  const errors = uniqueDrafts.filter((d) => d.status === "error").length;
   const isSingle = total === 1;
   useEffect(() => {
     if (!open) return;
@@ -4214,7 +4289,7 @@ var UnsavedTray = ({
     return () => window.removeEventListener("mousedown", onDoc);
   }, [open]);
   if (total === 0) return null;
-  const countLabel = isSingle ? drafts[0].label || "this record" : countTemplate.replace("{n}", String(total));
+  const countLabel = isSingle ? uniqueDrafts[0].label || "this record" : countTemplate.replace("{n}", String(total));
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4284,7 +4359,7 @@ var UnsavedTray = ({
             }
           )
         ] }),
-        open && !isSingle && /* @__PURE__ */ jsx("div", { className: "ra-unsaved-popover", role: "menu", children: drafts.map((d) => /* @__PURE__ */ jsxs(
+        open && !isSingle && /* @__PURE__ */ jsx("div", { className: "ra-unsaved-popover", role: "menu", children: uniqueDrafts.map((d) => /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
@@ -5833,6 +5908,8 @@ function RecordsAdminShellInner(props) {
                   error: collectionItems.error,
                   onBack: onItemBack,
                   onSelect: onItemOpen,
+                  dirtyKeys,
+                  errorKeys,
                   i18n
                 }
               ) : /* @__PURE__ */ jsxs(Fragment, { children: [