@proveanything/smartlinks-utils-ui 0.7.3 → 0.7.5

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

@@ -727,6 +727,14 @@ interface RecordsAdminShellProps<TData = unknown> {
     csvSchema?: CsvSchema<TData>;
     classify?: (record: RecordSummary<TData>) => RecordStatus;
     defaultData?: () => TData;
+    /**
+     * Optional derivation for the label that represents an in-flight draft
+     * in the unsaved-changes tray. Receives the editor's current value and
+     * its scope; return a short, human-readable title (or `undefined` to
+     * defer to the built-in heuristic). Useful when your record shape nests
+     * the title under a custom key the heuristic doesn't know about.
+     */
+    deriveDraftLabel?: (value: TData, scope: ParsedRef) => string | undefined;
     /**
      * Which layouts the rail offers. Default `['list']`. When more than one is
      * supplied, a switcher appears above the list and the choice persists
@@ -1566,6 +1574,15 @@ interface UseRecordEditorArgs<T> {
      * back a concrete `recordId`.
      */
     createMode?: boolean;
+    /**
+     * Optional host-supplied derivation for the label this editor registers
+     * with the unsaved-changes tray. Receives the in-flight value and the
+     * scope; should return a short, human-readable title. When omitted (or
+     * when it returns `undefined`), the hook falls back to a built-in heuristic
+     * that scans common title-shaped fields (`title`, `display.title`,
+     * `name`, `label`, `heading`, `question`, `slug`).
+     */
+    deriveDraftLabel?: (value: T, scope: ParsedRef) => string | undefined;
 }
 declare function useRecordEditor<T>(args: UseRecordEditorArgs<T>): EditorContext<T>;
 
@@ -2140,9 +2157,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

@@ -692,7 +692,8 @@ function useRecordEditor(args) {
     onSaveError,
     reseed = "always",
     initialFacetRule = null,
-    createMode = false
+    createMode = false,
+    deriveDraftLabel
   } = args;
   const queryClient = useQueryClient();
   const draftStore = useDirtyDraftStore();
@@ -713,6 +714,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 +734,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 +829,7 @@ function useRecordEditor(args) {
   const reset = useCallback(() => {
     setValue(savedSnapshot);
     setFacetRule(savedFacetRule);
+    setUserInteracted(false);
     draftStore.clearDraft(draftKey);
   }, [savedSnapshot, savedFacetRule]);
   const remove = useCallback(async () => {
@@ -826,15 +839,60 @@ 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 = () => {
+      if (deriveDraftLabel) {
+        try {
+          const custom = deriveDraftLabel(value, scope);
+          if (typeof custom === "string" && custom.trim()) return custom.trim();
+        } catch {
+        }
+      }
+      const KEYS = ["title", "name", "label", "heading", "question", "slug"];
+      const pickString = (obj) => {
+        if (!obj || typeof obj !== "object") return void 0;
+        for (const key of KEYS) {
+          const raw = obj[key];
+          if (typeof raw === "string" && raw.trim()) return raw.trim();
+        }
+        return void 0;
+      };
+      const v = value;
+      const top = pickString(v);
+      if (top) return top;
+      if (v && typeof v === "object") {
+        for (const wrapper of ["display", "content", "meta", "data"]) {
+          const nested = pickString(v[wrapper]);
+          if (nested) return nested;
+        }
+      }
+      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 +916,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 +931,7 @@ function useRecordEditor(args) {
     isSaving,
     saveError,
     facetRule,
-    onFacetRuleChange: setFacetRule
+    onFacetRuleChange: handleFacetRuleChange
   };
 }
 var RT_KEY = (recordType) => recordType ?? "_default";
@@ -3722,6 +3780,8 @@ function SiblingRail({
   error,
   onBack,
   onSelect,
+  dirtyKeys,
+  errorKeys,
   i18n
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "ra-sibling-rail", children: [
@@ -3745,17 +3805,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 +4281,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 +4308,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 +4378,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",
@@ -4593,6 +4687,11 @@ styleInject(".ra-shell {\n  color: hsl(var(--ra-text));\n  background: hsl(var(-
 var TOP_LEVEL_SCOPES = ["collection", "rule", "product"];
 var WARNED_FACET_DEPRECATED = false;
 var DRAFT_ID = "__draft__";
+var isDraftId = (id) => !!id && (id === DRAFT_ID || id.startsWith("draft:"));
+var mintDraftItemId = () => {
+  const rand = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  return `draft:${rand}`;
+};
 var productItemToSummary = (p) => {
   const ref = buildRef({ productId: p.id });
   return {
@@ -4674,7 +4773,8 @@ function RecordsAdminShellInner(props) {
     renderItemEmpty,
     collectionRailMode = "siblings",
     // Deep linking
-    deepLink
+    deepLink,
+    deriveDraftLabel
   } = props;
   const i18n = { ...DEFAULT_I18N, ...i18nOverride ?? {} };
   const icons = useMemo(() => mergeIcons(iconsOverride), [iconsOverride]);
@@ -4985,7 +5085,7 @@ function RecordsAdminShellInner(props) {
     // fall back to anchor-based `match()` at the collection root and the
     // editor would mount against `null` data — surfacing as the host's
     // "Select a {noun} from the list to edit" placeholder.
-    recordId: isCollection && selectedItemId && selectedItemId !== DRAFT_ID ? selectedItemId : selectedRecordId && selectedRecordId !== DRAFT_ID ? selectedRecordId : void 0,
+    recordId: isCollection && selectedItemId && !isDraftId(selectedItemId) ? selectedItemId : selectedRecordId && !isDraftId(selectedRecordId) ? selectedRecordId : void 0,
     supportedScopes: supportedForResolution,
     enabled: !!editingTargetScope
   });
@@ -5040,7 +5140,8 @@ function RecordsAdminShellInner(props) {
         setSelectedBatchId(void 0);
       }
       refetchAll();
-    }
+    },
+    deriveDraftLabel
   });
   useUnsavedGuard({
     isDirty: editorCtx.isDirty,
@@ -5311,7 +5412,7 @@ function RecordsAdminShellInner(props) {
   const onItemCreate = useCallback(() => {
     if (!isCollection) return;
     void runWithGuard(() => {
-      const id = generateItemId ? generateItemId() : DRAFT_ID;
+      const id = generateItemId ? generateItemId() : mintDraftItemId();
       setSelectedItemId(id);
       onTelemetry?.({ type: "item.create", recordType, scopeRef: baseScopeRef });
       deepLinkState.emit({ recordId: null, scope: baseScopeRef || null }, "record.open");
@@ -5319,7 +5420,7 @@ function RecordsAdminShellInner(props) {
   }, [isCollection, runWithGuard, generateItemId, onTelemetry, recordType, baseScopeRef, deepLinkState, buildItemUrlValue]);
   const onItemDelete = useCallback(async (itemId) => {
     if (!isCollection) return;
-    if (itemId === DRAFT_ID) return;
+    if (isDraftId(itemId)) return;
     if (onBeforeDelete) {
       const ok = await onBeforeDelete(editingScope ?? parseRef(""));
       if (!ok) return;
@@ -5400,7 +5501,7 @@ function RecordsAdminShellInner(props) {
         i18n: { previewAs: i18n.previewAs, previewAsDefault: i18n.previewAsDefault }
       }
     ) : null;
-    const itemNav = isCollection && selectedItemId && itemPosition ? /* @__PURE__ */ jsx(
+    const itemNav = isCollection && selectedItemId && itemPosition && ruleWizardStep === null ? /* @__PURE__ */ jsx(
       EditorItemNav,
       {
         label: editorHeaderLabel,
@@ -5574,7 +5675,7 @@ function RecordsAdminShellInner(props) {
   }, []);
   const onRuleWizardCreateItem = useCallback(() => {
     if (!isCollection) return;
-    const id = generateItemId ? generateItemId() : DRAFT_ID;
+    const id = generateItemId ? generateItemId() : mintDraftItemId();
     setSelectedItemId(id);
   }, [isCollection, generateItemId]);
   const hasGlobalRecord = useMemo(
@@ -5824,7 +5925,7 @@ function RecordsAdminShellInner(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__ */ 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(
+              /* @__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" && ruleWizardStep === null ? /* @__PURE__ */ jsx(
                 SiblingRail,
                 {
                   items: collectionItems.items,
@@ -5833,6 +5934,8 @@ function RecordsAdminShellInner(props) {
                   error: collectionItems.error,
                   onBack: onItemBack,
                   onSelect: onItemOpen,
+                  dirtyKeys,
+                  errorKeys,
                   i18n
                 }
               ) : /* @__PURE__ */ jsxs(Fragment, { children: [