@proveanything/smartlinks-utils-ui 0.10.0 → 0.10.2

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

@@ -2427,8 +2427,17 @@ interface Props<T> {
     selectedItemId?: string;
     isLoading: boolean;
     error: Error | null;
-    /** Retained for API stability — back nav now lives in EditorItemNav. */
+    /** Back to the items list (mirrors the editor-header "Back to list"). */
     onBack?: () => void;
+    /**
+     * Optional context label rendered next to the back arrow. Two parts:
+     *   - `kind`    — short noun ("Rule", "Product", "Global", "Filtered")
+     *   - `summary` — the specific value when relevant (rule summary, product
+     *                 name, …); omitted for kinds that need no qualifier.
+     * The shell composes both from the active scope + selection.
+     */
+    contextKind?: string;
+    contextSummary?: string | null;
     onSelect: (itemId: string) => void;
     /**
      * Set of keys (recordIds + scope refs) currently dirty in the shell-level
@@ -2439,9 +2448,9 @@ interface Props<T> {
     dirtyKeys?: ReadonlySet<string>;
     /** Subset of `dirtyKeys` whose last save attempt failed. */
     errorKeys?: ReadonlySet<string>;
-    i18n: Pick<RecordsAdminI18n, 'backToScopes' | 'siblingsHeading' | 'noItemsTitle' | 'noItemsBody'>;
+    i18n: Pick<RecordsAdminI18n, 'backToScopes' | 'siblingsHeading' | 'noItemsTitle' | 'noItemsBody' | 'backToList'>;
 }
-declare function SiblingRail<T>({ items, selectedItemId, isLoading, error, onSelect, dirtyKeys, errorKeys, i18n, }: Props<T>): react_jsx_runtime.JSX.Element;
+declare function SiblingRail<T>({ items, selectedItemId, isLoading, error, onBack, onSelect, contextKind, contextSummary, dirtyKeys, errorKeys, i18n, }: Props<T>): react_jsx_runtime.JSX.Element;
 
 interface ClipboardEntry<T = unknown> {
     value: T;

package/dist/components/RecordsAdmin/index.js

@@ -5950,67 +5950,92 @@ function SiblingRail({
   selectedItemId,
   isLoading,
   error,
+  onBack,
   onSelect,
+  contextKind,
+  contextSummary,
   dirtyKeys,
   errorKeys,
   i18n
 }) {
   const ruleLabelLookup = useRuleLabelLookup();
-  return /* @__PURE__ */ jsx("div", { className: "ra-sibling-rail", children: /* @__PURE__ */ jsxs("div", { className: "ra-sibling-body", children: [
-    isLoading && /* @__PURE__ */ jsx(LoadingState, {}),
-    !isLoading && error && /* @__PURE__ */ jsx(ErrorState, { error }),
-    !isLoading && !error && items.length === 0 && /* @__PURE__ */ jsx(EmptyState, { title: i18n.noItemsTitle, body: i18n.noItemsBody }),
-    !isLoading && !error && items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ra-sibling-list", children: items.map((item, idx) => {
-      const id = item.itemId ?? "";
-      const key = item.id ?? (id || anchorKey(item.scope) || `pos:${idx}`);
-      const akey = anchorKey(item.scope);
-      const selected = selectedItemId === id;
-      const isDirty = !!(id && dirtyKeys?.has(id) || akey && dirtyKeys?.has(akey));
-      const hasError = !!(id && errorKeys?.has(id) || akey && errorKeys?.has(akey));
-      const ruleClauses = item.facetRule ? summarizeFacetRule(item.facetRule, ruleLabelLookup) : [];
-      const isTargeted = ruleClauses.length > 0;
-      const ruleSummary = isTargeted ? ruleClauses.map((c) => c.label).join(" \xB7 ") : null;
-      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs("div", { className: "ra-sibling-rail", children: [
+    (onBack || contextKind) && /* @__PURE__ */ jsxs("div", { className: "ra-sibling-context", children: [
+      onBack && /* @__PURE__ */ jsx(
         "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 })
-            ] }),
-            isTargeted && /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "ra-row-rule-pip",
-                title: ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
-                "aria-label": ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
-                children: /* @__PURE__ */ jsx(Target, { className: "w-3 h-3", "aria-hidden": "true" })
-              }
-            ),
-            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
-          ]
+          onClick: onBack,
+          className: "ra-sibling-context-back",
+          "aria-label": i18n.backToList,
+          title: i18n.backToList,
+          children: /* @__PURE__ */ jsx(ArrowLeft, { className: "w-3.5 h-3.5", "aria-hidden": "true" })
         }
-      ) }, key);
-    }) })
-  ] }) });
+      ),
+      contextKind && /* @__PURE__ */ jsxs("div", { className: "ra-sibling-context-label", title: contextSummary ? `${contextKind} \xB7 ${contextSummary}` : contextKind, children: [
+        /* @__PURE__ */ jsx("span", { className: "ra-sibling-context-kind", children: contextKind }),
+        contextSummary && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ra-sibling-context-sep", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "ra-sibling-context-summary", children: contextSummary })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ra-sibling-body", children: [
+      isLoading && /* @__PURE__ */ jsx(LoadingState, {}),
+      !isLoading && error && /* @__PURE__ */ jsx(ErrorState, { error }),
+      !isLoading && !error && items.length === 0 && /* @__PURE__ */ jsx(EmptyState, { title: i18n.noItemsTitle, body: i18n.noItemsBody }),
+      !isLoading && !error && items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ra-sibling-list", children: items.map((item, idx) => {
+        const id = item.itemId ?? "";
+        const key = item.id ?? (id || anchorKey(item.scope) || `pos:${idx}`);
+        const akey = anchorKey(item.scope);
+        const selected = selectedItemId === id;
+        const isDirty = !!(id && dirtyKeys?.has(id) || akey && dirtyKeys?.has(akey));
+        const hasError = !!(id && errorKeys?.has(id) || akey && errorKeys?.has(akey));
+        const ruleClauses = item.facetRule ? summarizeFacetRule(item.facetRule, ruleLabelLookup) : [];
+        const isTargeted = ruleClauses.length > 0;
+        const ruleSummary = isTargeted ? ruleClauses.map((c) => c.label).join(" \xB7 ") : null;
+        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 })
+              ] }),
+              isTargeted && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ra-row-rule-pip",
+                  title: ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
+                  "aria-label": ruleSummary ? `Targeted: ${ruleSummary}` : "This item has targeting rules",
+                  children: /* @__PURE__ */ jsx(Target, { className: "w-3 h-3", "aria-hidden": "true" })
+                }
+              ),
+              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
+            ]
+          }
+        ) }, key);
+      }) })
+    ] })
+  ] });
 }
 var TONE_ICON = {
   info: Lightbulb,
@@ -6948,6 +6973,60 @@ var SaveAllProgress = ({
     }
   );
 };
+function PreviewReopenPill({ anchorRef, onClick, ariaLabel, title, children }) {
+  const [pos, setPos] = useState(null);
+  const rafRef = useRef(null);
+  useLayoutEffect(() => {
+    const el = anchorRef.current;
+    if (!el || typeof window === "undefined") return;
+    const measure = () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        const rect = el.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) return;
+        setPos({
+          top: rect.top + rect.height / 2,
+          right: Math.max(0, window.innerWidth - rect.right)
+        });
+      });
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    ro.observe(document.body);
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, true);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, true);
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [anchorRef]);
+  if (typeof document === "undefined" || !pos) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ra-shell ra-preview-reopen ra-preview-reopen--floating",
+        onClick,
+        "aria-label": ariaLabel,
+        title,
+        style: {
+          position: "fixed",
+          top: pos.top,
+          right: pos.right,
+          // Pull half the pill width out into the gutter so it visually
+          // anchors *to* the editor edge rather than sitting inside it.
+          transform: "translate(50%, -50%)"
+        },
+        children
+      }
+    ),
+    document.body
+  );
+}
 var EditorMountPool = ({
   renderSlot,
   keepMountedHidden = true,
@@ -7700,6 +7779,7 @@ function RecordsAdminShellInner(props) {
   ]);
   const onLeftSelectRef = useRef(null);
   const onCreateItemDraftRef = useRef(null);
+  const previewReopenAnchorRef = useRef(null);
   const { runWithGuard } = useDirtyNavigation({
     strategy: dirtyStrategy,
     isDirty: editorCtx.isDirty,
@@ -7807,6 +7887,7 @@ function RecordsAdminShellInner(props) {
   const itemViewCtx = baseItemViewCtx;
   const renderEditorWithPreview = () => {
     if (!editingTargetScope) return null;
+    const previewAnchorRef = previewReopenAnchorRef;
     const previewBody = renderPreview && effectivePreviewScope ? renderPreview({ resolved: editorCtx.value, previewScope: effectivePreviewScope }) : null;
     const scopePicker = previewScopePicker && effectivePreviewScope ? /* @__PURE__ */ jsx(
       PreviewScopePicker,
@@ -7908,15 +7989,14 @@ function RecordsAdminShellInner(props) {
     if (previewMode === "side") {
       if (!sidePreviewOpen) {
         return withNav(
-          /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative h-full", ref: previewAnchorRef, children: [
             baseEditor(),
             /* @__PURE__ */ jsxs(
-              "button",
+              PreviewReopenPill,
               {
-                type: "button",
-                className: "ra-preview-reopen",
+                anchorRef: previewAnchorRef,
                 onClick: () => setSidePreviewOpen(true),
-                "aria-label": i18n.openPreview,
+                ariaLabel: i18n.openPreview,
                 title: i18n.openPreview,
                 children: [
                   /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" }),
@@ -8438,6 +8518,8 @@ function RecordsAdminShellInner(props) {
                   onSelect: onItemOpen,
                   dirtyKeys,
                   errorKeys,
+                  contextKind: activeScope === "rule" ? "Rule" : activeScope === "product" ? "Product" : activeScope === "collection" ? "Global" : activeScope === "all" ? "All records" : activeScope === "variant" ? "Variant" : activeScope === "batch" ? "Batch" : activeScope === "facet" ? "Facet" : void 0,
+                  contextSummary: activeScope === "rule" ? activeRuleSummary : activeScope === "product" ? editorHeaderLabel ?? null : null,
                   i18n
                 }
               ) : /* @__PURE__ */ jsxs(Fragment, { children: [