@zalify/storefront-kit 0.3.1 → 0.3.2

package/dist/react/editor-origin.d.ts

@@ -0,0 +1 @@
+export declare function resolveEditorOrigin(origins: readonly string[], win?: Window): string | null;

package/dist/react/editor-origin.js

@@ -0,0 +1,45 @@
+/**
+ * Which editor, if any, is framing this document.
+ *
+ * `document.referrer` names the editor only on the first document the editor
+ * loads. In `interact` mode the bridge navigates the frame with
+ * `location.replace`, so the next document's referrer is the storefront
+ * itself. The trusted origin is therefore remembered for the tab on first
+ * contact, and later documents accept it as long as the editor-mode param is
+ * still present — always checked against the allowlist, never trusted bare.
+ */
+const STORAGE_KEY = "zalify-editor-origin";
+export function resolveEditorOrigin(origins, win = window) {
+    if (!origins.length || win.self === win.top)
+        return null;
+    try {
+        if (new URL(win.location.href).searchParams.get("zalify-editor") !== "1")
+            return null;
+    }
+    catch {
+        return null;
+    }
+    let referrer = null;
+    try {
+        referrer = new URL(win.document.referrer).origin;
+    }
+    catch {
+        referrer = null;
+    }
+    if (referrer && origins.includes(referrer)) {
+        try {
+            win.sessionStorage.setItem(STORAGE_KEY, referrer);
+        }
+        catch {
+            /* private mode: the first document still works */
+        }
+        return referrer;
+    }
+    try {
+        const remembered = win.sessionStorage.getItem(STORAGE_KEY);
+        return remembered && origins.includes(remembered) ? remembered : null;
+    }
+    catch {
+        return null;
+    }
+}

package/dist/react/index.d.ts

@@ -37,3 +37,4 @@ export * from './components/VideoModal';
 export { Facets, COLLECTION_SORT_OPTIONS, SEARCH_SORT_OPTIONS, } from './components/Facets';
 export { builtinSections, builtinBlocks } from './registries';
 export { useEditorTemplate } from './useEditorTemplate';
+export { resolveEditorOrigin } from './editor-origin';

package/dist/react/index.js

@@ -38,3 +38,4 @@ export { Facets, COLLECTION_SORT_OPTIONS, SEARCH_SORT_OPTIONS, } from './compone
 // Server-only loaders live in '@zalify/storefront-kit/react/server'.
 export { builtinSections, builtinBlocks } from './registries';
 export { useEditorTemplate } from './useEditorTemplate';
+export { resolveEditorOrigin } from './editor-origin';

package/dist/react/useEditorTemplate.js

@@ -1,24 +1,15 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 import { getThemeStore, setThemePreview } from "./engine/store";
+import { resolveEditorOrigin } from "./editor-origin";
 /** No editor code or schema is fetched outside an explicitly allowed preview. */
 export function useEditorTemplate(name, options) {
     const [draft, setDraft] = useState(null);
     const controller = useRef(null);
     useEffect(() => {
         setDraft(null);
-        if (!options.origins.length ||
-            window.self === window.top ||
-            new URL(window.location.href).searchParams.get("zalify-editor") !== "1")
-            return;
-        let parentOrigin;
-        try {
-            parentOrigin = new URL(document.referrer).origin;
-        }
-        catch {
-            return;
-        }
-        if (!options.origins.includes(parentOrigin))
+        const parentOrigin = resolveEditorOrigin(options.origins);
+        if (!parentOrigin)
             return;
         let disposed = false;
         const owner = getThemeStore();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zalify/storefront-kit",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "description": "The Zalify storefront SDK: framework-agnostic commerce logic (/commerce), the theme contract types and validators (/schemas), the canvas-editor bridge (/editor), and the React theme engine + shared components (/ui, /react/server). Consumed as TypeScript source inside the zalify-storefronts monorepo; published as compiled ESM + d.ts.",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -78,7 +78,7 @@
   ],
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
-    "test": "node --test \"src/schemas/*.test.ts\" \"src/editor/*.test.ts\"",
+    "test": "node --test \"src/schemas/*.test.ts\" \"src/editor/*.test.ts\" \"src/react/*.test.ts\"",
     "typecheck": "tsc -p tsconfig.json"
   }
 }

package/src/react/editor-origin.ts

@@ -0,0 +1,44 @@
+/**
+ * Which editor, if any, is framing this document.
+ *
+ * `document.referrer` names the editor only on the first document the editor
+ * loads. In `interact` mode the bridge navigates the frame with
+ * `location.replace`, so the next document's referrer is the storefront
+ * itself. The trusted origin is therefore remembered for the tab on first
+ * contact, and later documents accept it as long as the editor-mode param is
+ * still present — always checked against the allowlist, never trusted bare.
+ */
+const STORAGE_KEY = "zalify-editor-origin";
+
+export function resolveEditorOrigin(
+  origins: readonly string[],
+  win: Window = window,
+): string | null {
+  if (!origins.length || win.self === win.top) return null;
+  try {
+    if (new URL(win.location.href).searchParams.get("zalify-editor") !== "1")
+      return null;
+  } catch {
+    return null;
+  }
+  let referrer: string | null = null;
+  try {
+    referrer = new URL(win.document.referrer).origin;
+  } catch {
+    referrer = null;
+  }
+  if (referrer && origins.includes(referrer)) {
+    try {
+      win.sessionStorage.setItem(STORAGE_KEY, referrer);
+    } catch {
+      /* private mode: the first document still works */
+    }
+    return referrer;
+  }
+  try {
+    const remembered = win.sessionStorage.getItem(STORAGE_KEY);
+    return remembered && origins.includes(remembered) ? remembered : null;
+  } catch {
+    return null;
+  }
+}

package/src/react/index.ts

@@ -79,3 +79,4 @@ export {
 export {builtinSections, builtinBlocks} from './registries';
 
 export {useEditorTemplate} from './useEditorTemplate';
+export {resolveEditorOrigin} from './editor-origin';

package/src/react/useEditorTemplate.ts

@@ -6,6 +6,7 @@ import type { FrameBridgeController } from "../editor/frame";
 import type { PreviewContext } from "../schemas/bridge";
 import type { EditorDocuments } from "../editor/bootstrap";
 import { getThemeStore, setThemePreview } from "./engine/store";
+import { resolveEditorOrigin } from "./editor-origin";
 
 type Options = {
   origins: readonly string[];
@@ -28,19 +29,8 @@ export function useEditorTemplate(
   const controller = useRef<FrameBridgeController | null>(null);
   useEffect(() => {
     setDraft(null);
-    if (
-      !options.origins.length ||
-      window.self === window.top ||
-      new URL(window.location.href).searchParams.get("zalify-editor") !== "1"
-    )
-      return;
-    let parentOrigin: string;
-    try {
-      parentOrigin = new URL(document.referrer).origin;
-    } catch {
-      return;
-    }
-    if (!options.origins.includes(parentOrigin)) return;
+    const parentOrigin = resolveEditorOrigin(options.origins);
+    if (!parentOrigin) return;
     let disposed = false;
     const owner = getThemeStore();
     void Promise.all([