@proveanything/smartlinks-utils-ui 0.12.4 → 0.12.5

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

@@ -455,6 +455,14 @@ interface RecordsAdminI18n {
     duplicateAction: string;
     /** Toast shown after a successful Duplicate. `{name}` = source label. */
     duplicateToast: string;
+    /** Duplicate-to picker labels. */
+    duplicateDialogTitle: string;
+    duplicateTargetGlobal: string;
+    duplicateTargetSameRule: string;
+    duplicateTargetExistingRules: string;
+    duplicateTargetNewRule: string;
+    duplicateConfirm: string;
+    duplicateCancel: string;
     /**
      * Row-menu label for the "Copy and start new rule" action — shown on
      * the rules tab in singleton mode. One-click flow: copies the row to

package/dist/components/RecordsAdmin/index.js

@@ -7,7 +7,7 @@ import { cn } from '../../chunk-L7FQ52F5.js';
 import { parsedRefToTarget, parsedRefToScope, matchRecords, scopesEqual, getRecordById, listRecords, upsertRecord, updateRecord, createRecord, removeRecord } from '../../chunk-KA4MKRHL.js';
 export { bulkDelete, bulkUpsert, createRecord, getRecordById, listRecords, matchRecords, parsedRefToScope, parsedRefToTarget, removeRecord, restoreRecord, scopesEqual, upsertRecord } from '../../chunk-KA4MKRHL.js';
 import { createContext, useMemo, useState, useEffect, useCallback, useRef, isValidElement, useLayoutEffect, useContext, useSyncExternalStore, createElement } from 'react';
-import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, List, SlidersHorizontal, Globe, Tag, Boxes, Layers, Package, Target, Check, Rows3, ChevronRight, Eraser, FilePlus2, CopyPlus, ClipboardPaste, Box, X, Search, Image, Table, ArrowLeft, ChevronLeft, AlertTriangle, Info, HelpCircle, CornerDownLeft, Circle, ArrowUpDown, ArrowUp, ArrowDown, MinusCircle, XCircle, AlertCircle, Undo2, Save, Loader2, Archive, ArrowRight, Globe2, Settings2 } from 'lucide-react';
+import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, List, SlidersHorizontal, Globe, Tag, Boxes, Layers, Package, Target, Check, Rows3, ChevronRight, Eraser, FilePlus2, CopyPlus, ClipboardPaste, Box, X, Search, Image, Table, ArrowLeft, ChevronLeft, AlertTriangle, Info, HelpCircle, CornerDownLeft, Circle, ArrowUpDown, ArrowUp, ArrowDown, MinusCircle, XCircle, AlertCircle, Undo2, Save, Loader2, Archive, ArrowRight, Globe2, Sparkles, Settings2 } from 'lucide-react';
 import { useQuery, useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -240,6 +240,13 @@ var DEFAULT_I18N = {
   pasteWarnContinue: "Continue",
   duplicateAction: "Duplicate",
   duplicateToast: "Duplicated {name}. Review and Save.",
+  duplicateDialogTitle: 'Duplicate "{name}" to:',
+  duplicateTargetGlobal: "Global",
+  duplicateTargetSameRule: "Same rule as source",
+  duplicateTargetExistingRules: "Existing rules",
+  duplicateTargetNewRule: "New rule\u2026",
+  duplicateConfirm: "Duplicate",
+  duplicateCancel: "Cancel",
   copyAndNewRuleAction: "Copy and start new rule",
   itemsAllLabel: "All items",
   subtitleEmpty: "Not set",
@@ -1621,6 +1628,199 @@ var ClipboardToast = ({ message, variant = "copy", onDismiss }) => {
     }
   );
 };
+var DEFAULT_I18N2 = {
+  title: 'Duplicate "{name}" to:',
+  global: "Global",
+  sameRule: "Same rule as source",
+  existingRules: "Existing rules",
+  newRule: "New rule\u2026",
+  confirm: "Duplicate",
+  cancel: "Cancel"
+};
+function DuplicateTargetPicker({
+  open,
+  sourceLabel,
+  sourceHasRule,
+  rules,
+  supportsRules,
+  supportsGlobal = true,
+  onCancel,
+  onConfirm,
+  i18n
+}) {
+  const t = { ...DEFAULT_I18N2, ...i18n ?? {} };
+  const [picked, setPicked] = useState(null);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!open) {
+      setPicked(null);
+      return;
+    }
+    setPicked(sourceHasRule && supportsRules ? { kind: "sameRule" } : supportsGlobal ? { kind: "global" } : null);
+  }, [open, sourceHasRule, supportsRules, supportsGlobal]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onCancel]);
+  const sortedRules = useMemo(() => rules.slice().sort((a, b) => {
+    if (b.count !== a.count) return b.count - a.count;
+    return a.summary.localeCompare(b.summary);
+  }), [rules]);
+  if (!open || typeof document === "undefined") return null;
+  const stop = (e) => {
+    e.stopPropagation();
+  };
+  const isSame = (a, b) => {
+    if (!a || a.kind !== b.kind) return false;
+    if (a.kind === "existingRule" && b.kind === "existingRule") {
+      return a.ruleHash === b.ruleHash;
+    }
+    return true;
+  };
+  const RadioRow = ({
+    target,
+    label,
+    sublabel,
+    icon: Icon
+  }) => {
+    const checked = isSame(picked, target);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setPicked(target),
+        className: "w-full text-left px-3 py-2 rounded-md border transition-colors flex items-start gap-2.5",
+        style: {
+          borderColor: checked ? "hsl(var(--ra-accent))" : "hsl(var(--ra-border))",
+          background: checked ? "hsl(var(--ra-accent) / 0.08)" : "transparent",
+          color: "hsl(var(--ra-text))"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "mt-0.5 inline-flex items-center justify-center h-4 w-4 rounded-full shrink-0",
+              style: {
+                border: `2px solid ${checked ? "hsl(var(--ra-accent))" : "hsl(var(--ra-border))"}`
+              },
+              children: checked && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "h-2 w-2 rounded-full",
+                  style: { background: "hsl(var(--ra-accent))" }
+                }
+              )
+            }
+          ),
+          Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 mt-0.5 shrink-0" }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block text-sm", children: label }),
+            sublabel && /* @__PURE__ */ jsx("span", { className: "block text-xs truncate", style: { color: "hsl(var(--ra-muted-text))" }, children: sublabel })
+          ] })
+        ]
+      }
+    );
+  };
+  const showRuleSection = supportsRules && (sortedRules.length > 0 || sourceHasRule);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-[1000] flex items-center justify-center",
+        style: { background: "hsl(0 0% 0% / 0.4)" },
+        onClick: onCancel,
+        onMouseDown: stop,
+        onTouchStart: stop,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            role: "dialog",
+            "aria-modal": "true",
+            className: "w-[min(28rem,calc(100vw-2rem))] max-h-[min(36rem,calc(100vh-2rem))] flex flex-col rounded-lg shadow-xl",
+            style: { background: "hsl(var(--ra-surface))", border: "1px solid hsl(var(--ra-border))" },
+            onClick: stop,
+            onMouseDown: stop,
+            onTouchStart: stop,
+            children: [
+              /* @__PURE__ */ jsx("header", { className: "px-4 py-3 border-b", style: { borderColor: "hsl(var(--ra-border))" }, children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", style: { color: "hsl(var(--ra-text))" }, children: t.title.replace("{name}", sourceLabel) }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3", children: [
+                supportsGlobal && /* @__PURE__ */ jsx(RadioRow, { target: { kind: "global" }, label: t.global, icon: Globe2 }),
+                showRuleSection && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  sourceHasRule && /* @__PURE__ */ jsx(RadioRow, { target: { kind: "sameRule" }, label: t.sameRule, icon: Target }),
+                  sortedRules.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "text-[10px] uppercase tracking-wide mb-1.5 px-1",
+                        style: { color: "hsl(var(--ra-muted-text))" },
+                        children: t.existingRules
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: sortedRules.map((r) => /* @__PURE__ */ jsx(
+                      RadioRow,
+                      {
+                        target: { kind: "existingRule", ruleHash: r.hash },
+                        label: r.summary,
+                        sublabel: `${r.count} record${r.count === 1 ? "" : "s"}`,
+                        icon: Target
+                      },
+                      r.hash
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsx(RadioRow, { target: { kind: "newRule" }, label: t.newRule, icon: Sparkles })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "footer",
+                {
+                  className: "px-4 py-3 border-t flex items-center justify-end gap-2",
+                  style: { borderColor: "hsl(var(--ra-border))" },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onCancel,
+                        className: "text-xs px-3 py-1.5 rounded-md border hover:bg-[hsl(var(--ra-muted))]",
+                        style: { borderColor: "hsl(var(--ra-border))", color: "hsl(var(--ra-text))" },
+                        children: t.cancel
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: !picked,
+                        onClick: () => {
+                          if (picked) onConfirm(picked);
+                        },
+                        className: "text-xs px-3 py-1.5 rounded-md font-medium transition-opacity disabled:opacity-40 inline-flex items-center gap-1.5",
+                        style: { background: "hsl(var(--ra-accent))", color: "hsl(var(--ra-surface))" },
+                        children: [
+                          /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+                          t.confirm
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
 function useShellClipboard(args) {
   const {
     enabled,
@@ -1640,7 +1840,11 @@ function useShellClipboard(args) {
     onLeftSelectRef,
     onCreateItemDraftRef,
     onCreateRuleFromClipboardRef,
-    isRuleTab
+    isRuleTab,
+    ruleCatalogue,
+    ruleCatalogueRef,
+    supportsRules = true,
+    onCreateItemDraftAtScopeRef
   } = args;
   const clipboard = useRecordClipboard({
     appId,
@@ -1770,17 +1974,98 @@ function useShellClipboard(args) {
     // wired item-draft creation. Pushes the editor value to the clipboard
     // (so the existing pendingPasteTarget effect lands it on the new
     // draft) and mints a fresh draft.
-    onDuplicate: isCollection && !!onCreateItemDraftRef ? () => {
-      copyCurrent();
-      window.setTimeout(() => {
-        const create = onCreateItemDraftRef?.current;
-        if (!create) return;
-        const newId = create();
-        if (newId) setPendingPasteTarget({ kind: "record", recordId: newId });
-      }, 0);
+    // Collection-cardinality clone affordance — opens the Duplicate-To
+    // picker so the admin chooses the destination scope (Global, an
+    // existing rule, a new rule, or the source's own rule). We only show
+    // this when the host wired the at-scope draft creator, since without
+    // it we have nowhere to mint the duplicate.
+    onDuplicate: isCollection && !!onCreateItemDraftAtScopeRef ? () => {
+      if (!editingScope) return;
+      openDuplicatePicker({
+        value: editorCtx.value,
+        scope: editingScope,
+        label: editorHeaderLabel ?? editingScope.raw,
+        facetRule: resolved.facetRule ?? null,
+        recordId: resolved.recordId
+      });
     } : void 0
   } : void 0;
   const [pendingPasteTarget, setPendingPasteTarget] = useState(null);
+  const [pendingSeed, setPendingSeed] = useState(null);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const pickerSourceRef = useRef(null);
+  const openDuplicatePicker = useCallback((source) => {
+    pickerSourceRef.current = {
+      value: source.value,
+      scope: source.scope,
+      label: source.label,
+      facetRule: source.facetRule ?? null,
+      recordId: source.recordId
+    };
+    setPickerOpen(true);
+  }, []);
+  const onDuplicatePickerCancel = useCallback(() => {
+    setPickerOpen(false);
+    pickerSourceRef.current = null;
+  }, []);
+  const onDuplicatePickerConfirm = useCallback((target) => {
+    const source = pickerSourceRef.current;
+    setPickerOpen(false);
+    pickerSourceRef.current = null;
+    if (!source) return;
+    const transformed = onCopyOverride ? onCopyOverride({ value: source.value, scope: source.scope }) : cloneValue(source.value);
+    if (target.kind === "newRule") {
+      clipboard.set({
+        value: transformed,
+        sourceScope: source.scope,
+        sourceRecordId: source.recordId,
+        sourceLabel: source.label
+      });
+      onTelemetry?.({
+        type: "clipboard.copy",
+        recordType,
+        sourceRef: anchorKey(source.scope)
+      });
+      window.setTimeout(() => onCreateRuleFromClipboardRef?.current?.(), 0);
+      return;
+    }
+    const create = onCreateItemDraftAtScopeRef?.current;
+    if (!create) return;
+    let scopeArg;
+    if (target.kind === "global") {
+      scopeArg = { kind: "global" };
+    } else if (target.kind === "sameRule") {
+      if (!source.facetRule) return;
+      scopeArg = { kind: "rule", rule: source.facetRule };
+    } else {
+      const list = ruleCatalogueRef?.current ?? ruleCatalogue ?? [];
+      const hit = list.find((r) => r.hash === target.ruleHash);
+      if (!hit) return;
+      scopeArg = { kind: "rule", rule: hit.rule };
+    }
+    const newId = create(scopeArg);
+    if (!newId) return;
+    setPendingPasteTarget({ kind: "record", recordId: newId });
+    setPendingSeed({ value: transformed, sourceLabel: source.label });
+    onTelemetry?.({
+      type: "clipboard.copy",
+      recordType,
+      sourceRef: anchorKey(source.scope)
+    });
+    setNotice({
+      message: i18n.duplicateToast.replace("{name}", source.label),
+      variant: "copy"
+    });
+  }, [
+    onCopyOverride,
+    clipboard,
+    onTelemetry,
+    recordType,
+    onCreateRuleFromClipboardRef,
+    onCreateItemDraftAtScopeRef,
+    ruleCatalogue,
+    i18n.duplicateToast
+  ]);
   useEffect(() => {
     if (!pendingPasteTarget) return;
     if (!editingScope) return;
@@ -1788,14 +2073,27 @@ function useShellClipboard(args) {
     if (!matched) return;
     const t = window.setTimeout(() => {
       setPendingPasteTarget(null);
+      if (pendingSeed) {
+        const seed = pendingSeed;
+        setPendingSeed(null);
+        editorCtx.onChange(seed.value);
+        onTelemetry?.({
+          type: "clipboard.paste",
+          recordType,
+          sourceRef: anchorKey(editingScope),
+          destinationRef: editingScope.raw,
+          replaced: false
+        });
+        return;
+      }
       void pasteCurrent();
     }, 0);
     return () => window.clearTimeout(t);
-  }, [pendingPasteTarget, editingScope, isCollection, selectedItemId, selectedRecordId, pasteCurrent]);
+  }, [pendingPasteTarget, editingScope, isCollection, selectedItemId, selectedRecordId, pasteCurrent, pendingSeed, editorCtx, onTelemetry, recordType]);
   const rowClipboard = enabled ? (record) => {
     const summaryHasData = record.data != null;
     const sourceParsed = record.scope;
-    const canDuplicate = summaryHasData && isCollection;
+    const canDuplicate = summaryHasData && isCollection && !!onCreateItemDraftAtScopeRef;
     const canCopyAndNewRule = summaryHasData && !isCollection && !!isRuleTab && !!onCreateRuleFromClipboardRef;
     return {
       onCopy: summaryHasData ? () => {
@@ -1826,24 +2124,12 @@ function useShellClipboard(args) {
         }, 0);
       } : void 0,
       onDuplicate: canDuplicate ? () => {
-        const value = onCopyOverride ? onCopyOverride({ value: record.data, scope: sourceParsed }) : cloneValue(record.data);
-        clipboard.set({
-          value,
-          sourceScope: sourceParsed,
-          sourceRecordId: record.id ?? void 0,
-          sourceLabel: record.label
-        });
-        onTelemetry?.({ type: "clipboard.copy", recordType, sourceRef: anchorKey(record.scope) });
-        onLeftSelectRef.current?.(record);
-        const create = onCreateItemDraftRef?.current;
-        if (!create) return;
-        window.setTimeout(() => {
-          const newId = create();
-          if (newId) setPendingPasteTarget({ kind: "record", recordId: newId });
-        }, 0);
-        setNotice({
-          message: i18n.duplicateToast.replace("{name}", record.label),
-          variant: "copy"
+        openDuplicatePicker({
+          value: record.data,
+          scope: sourceParsed,
+          label: record.label,
+          facetRule: record.facetRule ?? null,
+          recordId: record.id ?? void 0
         });
       } : void 0
     };
@@ -1856,10 +2142,36 @@ function useShellClipboard(args) {
       onDismiss: () => setNotice(null)
     }
   ) : null;
+  const duplicatePicker = enabled ? /* @__PURE__ */ jsx(
+    DuplicateTargetPicker,
+    {
+      open: pickerOpen,
+      sourceLabel: pickerSourceRef.current?.label ?? "",
+      sourceHasRule: !!pickerSourceRef.current?.facetRule,
+      rules: (ruleCatalogueRef?.current ?? ruleCatalogue ?? []).map((r) => ({
+        hash: r.hash,
+        summary: r.summary,
+        count: r.count
+      })),
+      supportsRules,
+      onCancel: onDuplicatePickerCancel,
+      onConfirm: onDuplicatePickerConfirm,
+      i18n: {
+        title: i18n.duplicateDialogTitle,
+        global: i18n.duplicateTargetGlobal,
+        sameRule: i18n.duplicateTargetSameRule,
+        existingRules: i18n.duplicateTargetExistingRules,
+        newRule: i18n.duplicateTargetNewRule,
+        confirm: i18n.duplicateConfirm,
+        cancel: i18n.duplicateCancel
+      }
+    }
+  ) : null;
   return {
     editorClipboard,
     rowClipboard,
     confirmDialog: pasteConfirm.dialog,
+    duplicatePicker,
     toast,
     store: clipboard
   };
@@ -9178,6 +9490,8 @@ function RecordsAdminShellInner(props) {
   ]);
   const onLeftSelectRef = useRef(null);
   const onCreateItemDraftRef = useRef(null);
+  const onCreateItemDraftAtScopeRef = useRef(null);
+  const ruleCatalogueRef = useRef([]);
   const onCreateRuleFromClipboardRef = useRef(null);
   const previewReopenAnchorRef = useRef(null);
   const { runWithGuard } = useDirtyNavigation({
@@ -9230,14 +9544,17 @@ function RecordsAdminShellInner(props) {
     isCollection,
     selectedItemId,
     selectedRecordId,
-    resolved: { source: resolved.source, recordId: resolved.recordId },
+    resolved: { source: resolved.source, recordId: resolved.recordId, facetRule: resolved.facetRule ?? null },
     onTelemetry,
     onCopyOverride,
     onPasteOverride,
     onLeftSelectRef,
     onCreateItemDraftRef,
     onCreateRuleFromClipboardRef,
-    isRuleTab: activeScope === "rule" || activeScope === "collection"
+    isRuleTab: activeScope === "rule" || activeScope === "collection",
+    ruleCatalogueRef,
+    supportsRules: effectiveTopLevelScopes.includes("rule"),
+    onCreateItemDraftAtScopeRef
   });
   const editorClipboard = shellClipboard.editorClipboard;
   const rowClipboard = shellClipboard.rowClipboard;
@@ -10019,6 +10336,26 @@ function RecordsAdminShellInner(props) {
   onLeftSelectRef.current = onLeftSelect;
   onCreateItemDraftRef.current = onItemCreate;
   onCreateRuleFromClipboardRef.current = () => onCreateRule("paste");
+  ruleCatalogueRef.current = ruleCatalogue;
+  onCreateItemDraftAtScopeRef.current = (target) => {
+    if (!isCollection) return null;
+    if (target.kind === "global") {
+      if (activeScope !== "collection") setActiveScope("collection");
+      setSelectedRecordId(null);
+      setDraftKind(null);
+      const id2 = onItemCreate();
+      return id2 ?? null;
+    }
+    if (activeScope !== "rule") setActiveScope("rule");
+    setRuleWizardRule(target.rule);
+    setRuleWizardSeedMode(null);
+    setRuleWizardDraftKey(null);
+    setRuleWizardStep(2);
+    setDraftKind("rule");
+    setSelectedRecordId(null);
+    const id = onItemCreate();
+    return id ?? null;
+  };
   return /* @__PURE__ */ jsx(RuleLabelLookupProvider, { value: ruleLabelLookup, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -10027,6 +10364,7 @@ function RecordsAdminShellInner(props) {
       children: [
         dirtyConfirm.dialog,
         shellClipboard.confirmDialog,
+        shellClipboard.duplicatePicker,
         shellClipboard.toast,
         (() => {
           const showFloatHelp = !!intro && dismissed && resolvedReopenAffordance === "footer" && !headerWillRender;