@zalify/storefront-kit 0.4.0 → 0.5.1

package/dist/editor/bootstrap.d.ts

@@ -6,6 +6,16 @@ export interface EditorDocuments {
     groups: string;
     settings: string;
 }
+/** Template types the editor can group, icon and offer an entity picker for. */
+export declare const TEMPLATE_TYPES: readonly ["index", "product", "collection", "list-collections", "page", "blog", "article", "cart", "search", "404", "password", "gift_card"];
+/**
+ * What is wrong with a set of template names, for a storefront's own tests:
+ * names must be `<type>` or `<type>.<suffix>` with a known type. A default is
+ * not required next to alternates — a site with `page.about` but no generic
+ * page route must not invent one; the editor groups such alternates itself.
+ * Empty means the editor can lay them out.
+ */
+export declare function templateNameProblems(names: readonly string[]): string[];
 /** Only list routes the app can actually render; never fabricate handles. */
 export declare function createEditorBootstrap(options: {
     schema: DraftSchema;

package/dist/editor/bootstrap.js

@@ -1,3 +1,37 @@
+/** Template types the editor can group, icon and offer an entity picker for. */
+export const TEMPLATE_TYPES = [
+    'index',
+    'product',
+    'collection',
+    'list-collections',
+    'page',
+    'blog',
+    'article',
+    'cart',
+    'search',
+    '404',
+    'password',
+    'gift_card',
+];
+/**
+ * What is wrong with a set of template names, for a storefront's own tests:
+ * names must be `<type>` or `<type>.<suffix>` with a known type. A default is
+ * not required next to alternates — a site with `page.about` but no generic
+ * page route must not invent one; the editor groups such alternates itself.
+ * Empty means the editor can lay them out.
+ */
+export function templateNameProblems(names) {
+    const problems = [];
+    for (const name of names) {
+        if (name.startsWith('customers/'))
+            continue;
+        const type = name.split('.')[0];
+        if (!TEMPLATE_TYPES.includes(type)) {
+            problems.push(`"${name}": unknown template type "${type}" — use <type>.<suffix>, e.g. "page.${name.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}"`);
+        }
+    }
+    return problems;
+}
 /** Only list routes the app can actually render; never fabricate handles. */
 export function createEditorBootstrap(options) {
     const { schema, manifest, paths, previews } = options;

package/dist/editor/selection.d.ts

@@ -0,0 +1,3 @@
+/** Observe the same authenticated parent selection as the SDK. Components can
+ * reveal the selected tab/menu before the SDK measures its DOM node. */
+export declare function mountEditorSelection(win: Window, onSelect: (path: string | null) => void): () => void;

package/dist/editor/selection.js

@@ -0,0 +1,42 @@
+import { BRIDGE_NAMESPACE, CONTRACT_VERSION, isCompatibleVersion, } from "../schemas/index.js";
+/** Observe the same authenticated parent selection as the SDK. Components can
+ * reveal the selected tab/menu before the SDK measures its DOM node. */
+export function mountEditorSelection(win, onSelect) {
+    let origin;
+    const listener = (event) => {
+        if (event.source !== win.parent)
+            return;
+        const data = event.data;
+        if (!data ||
+            data.z !== BRIDGE_NAMESPACE ||
+            typeof data.v !== "string" ||
+            !isCompatibleVersion(CONTRACT_VERSION, data.v) ||
+            !data.payload)
+            return;
+        if (!origin &&
+            data.type === "bridge:init" &&
+            event.origin === data.payload.editorOrigin)
+            origin = event.origin;
+        if (!origin || event.origin !== origin)
+            return;
+        const path = data.type === "bridge:init"
+            ? data.payload.selectedPath
+            : data.type === "block:select"
+                ? data.payload.path
+                : undefined;
+        if (path === null || typeof path === "string")
+            onSelect(path);
+    };
+    const click = (event) => {
+        const target = event.target;
+        const path = target?.closest?.("[data-z-path]")?.getAttribute("data-z-path") ?? null;
+        if (path)
+            onSelect(path);
+    };
+    win.addEventListener("message", listener);
+    win.document.addEventListener("click", click, true);
+    return () => {
+        win.removeEventListener("message", listener);
+        win.document.removeEventListener("click", click, true);
+    };
+}

package/dist/editor/visible-paths.d.ts

@@ -0,0 +1,6 @@
+/** The SDK selects the first matching path. Responsive copies must not let a
+ * hidden desktop node shadow its visible mobile counterpart (or vice versa). */
+export declare function syncVisiblePaths(doc: Document): void;
+export declare function restoreHiddenPaths(doc: Document): void;
+/** Mounted only in the editor, before the SDK's message/resize listeners. */
+export declare function mountVisiblePaths(win: Window, onChange: () => void): () => void;

package/dist/editor/visible-paths.js

@@ -0,0 +1,88 @@
+const PATH = "data-z-path";
+const HIDDEN_PATH = "data-z-editor-hidden-path";
+/** The SDK selects the first matching path. Responsive copies must not let a
+ * hidden desktop node shadow its visible mobile counterpart (or vice versa). */
+export function syncVisiblePaths(doc) {
+    for (const node of doc.querySelectorAll(`[${PATH}], [${HIDDEN_PATH}]`)) {
+        const path = node.getAttribute(PATH) ?? node.getAttribute(HIDDEN_PATH);
+        if (!path)
+            continue;
+        // display:contents has no own box; a visible child still makes it selectable.
+        const visible = node.getClientRects().length > 0 ||
+            Array.from(node.children).some((child) => child.getClientRects().length > 0);
+        if (visible) {
+            if (node.getAttribute(PATH) !== path)
+                node.setAttribute(PATH, path);
+            if (node.getAttribute(HIDDEN_PATH) !== null)
+                node.removeAttribute(HIDDEN_PATH);
+        }
+        else {
+            if (node.getAttribute(HIDDEN_PATH) !== path)
+                node.setAttribute(HIDDEN_PATH, path);
+            if (node.getAttribute(PATH) !== null)
+                node.removeAttribute(PATH);
+        }
+    }
+}
+export function restoreHiddenPaths(doc) {
+    for (const node of doc.querySelectorAll(`[${HIDDEN_PATH}]`)) {
+        const path = node.getAttribute(HIDDEN_PATH);
+        if (path && !node.hasAttribute(PATH))
+            node.setAttribute(PATH, path);
+        node.removeAttribute(HIDDEN_PATH);
+    }
+}
+/** Mounted only in the editor, before the SDK's message/resize listeners. */
+export function mountVisiblePaths(win, onChange) {
+    let frame = 0;
+    const sync = () => syncVisiblePaths(win.document);
+    const schedule = () => {
+        if (frame)
+            return;
+        frame = win.requestAnimationFrame(() => {
+            frame = 0;
+            sync();
+            onChange();
+        });
+    };
+    // Transform/opacity animations do not change which responsive copy has a box.
+    // Scanning every path for each animation frame makes long previews expensive.
+    const boxStyle = (style) => ["display", "content-visibility"]
+        .map((property) => new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*([^;]+)`, "i")
+        .exec(style ?? "")?.[1]
+        .trim() ?? "")
+        .join("|");
+    const observer = new MutationObserver((records) => {
+        if (records.some((record) => {
+            const target = record.target;
+            if (target.id === "zalify-editor-highlight")
+                return false;
+            if (record.type === "attributes" && record.attributeName === "style")
+                return (boxStyle(record.oldValue) !== boxStyle(target.getAttribute("style")));
+            return true;
+        }))
+            schedule();
+    });
+    observer.observe(win.document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: [PATH, "class", "style", "hidden"],
+    });
+    const onMessage = (event) => {
+        if (event.data?.z === "zalify-editor-bridge" &&
+            ["bridge:init", "block:select", "device:set", "template:apply"].includes(event.data.type))
+            sync();
+    };
+    win.addEventListener("resize", sync);
+    win.addEventListener("message", onMessage);
+    sync();
+    return () => {
+        observer.disconnect();
+        win.cancelAnimationFrame(frame);
+        win.removeEventListener("resize", sync);
+        win.removeEventListener("message", onMessage);
+        restoreHiddenPaths(win.document);
+    };
+}

package/dist/react/design-mode.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Design mode is the SDK's to declare, not each storefront's: the editor
+ * sizes the iframe to its content, so `100vh` inside it grows with every
+ * height report. Themes read `--editor-viewport-height` under
+ * `html[data-z-design-mode='1']` instead. Fixed per mount on purpose.
+ */
+export declare function enterDesignMode(): () => void;

package/dist/react/design-mode.js

@@ -0,0 +1,17 @@
+/** Cap for `--editor-viewport-height`: a tall editor pane is not a tall phone. */
+const MAX_EDITOR_VIEWPORT_HEIGHT = 1000;
+/**
+ * Design mode is the SDK's to declare, not each storefront's: the editor
+ * sizes the iframe to its content, so `100vh` inside it grows with every
+ * height report. Themes read `--editor-viewport-height` under
+ * `html[data-z-design-mode='1']` instead. Fixed per mount on purpose.
+ */
+export function enterDesignMode() {
+    const root = document.documentElement;
+    root.style.setProperty("--editor-viewport-height", `${Math.min(window.innerHeight, MAX_EDITOR_VIEWPORT_HEIGHT)}px`);
+    root.setAttribute("data-z-design-mode", "1");
+    return () => {
+        root.removeAttribute("data-z-design-mode");
+        root.style.removeProperty("--editor-viewport-height");
+    };
+}

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

@@ -1 +1,3 @@
+/** Editors allowed to frame a storefront unless the app narrows the list. */
+export declare const ZALIFY_EDITOR_ORIGINS: readonly string[];
 export declare function resolveEditorOrigin(origins: readonly string[], win?: Window): string | null;

package/dist/react/editor-origin.js

@@ -9,6 +9,11 @@
  * still present — always checked against the allowlist, never trusted bare.
  */
 const STORAGE_KEY = "zalify-editor-origin";
+/** Editors allowed to frame a storefront unless the app narrows the list. */
+export const ZALIFY_EDITOR_ORIGINS = [
+    "https://app.zalify.com",
+    "http://localhost:3000",
+];
 export function resolveEditorOrigin(origins, win = window) {
     if (!origins.length || win.self === win.top)
         return null;

package/dist/react/server-preview.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Editor preview for storefronts that render templates on the server (React
+ * Server Components) instead of through the client theme engine.
+ *
+ * The app supplies two server functions — one returning its bootstrap, one
+ * rendering a draft template to React nodes — and wraps each editable region.
+ * Everything else (trust, bridge, design mode, selection, responsive-copy
+ * paths, error surface) is here, so a storefront repo never writes it again.
+ *
+ *   <EditorPreviewProvider getBootstrap={…} renderTemplate={…}>
+ *     <EditorGroupRegion name="header-group">…</EditorGroupRegion>
+ *     <EditorTemplateRegion name="page.about">…</EditorTemplateRegion>
+ *   </EditorPreviewProvider>
+ */
+import { type ReactNode } from "react";
+import type { EditorBootstrap } from "../schemas/bridge";
+import type { SectionGroupData, SettingsData, TemplateData } from "../schemas/data";
+export interface RenderTemplateInput {
+    templateName: string;
+    template: TemplateData;
+    groups?: Record<string, SectionGroupData>;
+    /** Path + query of the page being previewed, without the editor param. */
+    pathname: string;
+}
+/** Keys are `template:<name>` and `group:<name>`. */
+export type RenderedRegions = Record<string, ReactNode>;
+export interface EditorPreviewProviderProps {
+    children: ReactNode;
+    /** Server function: the app's bootstrap (see `createEditorBootstrap`). */
+    getBootstrap: () => Promise<EditorBootstrap>;
+    /** Server function: render a draft. Must be read-only. */
+    renderTemplate: (input: RenderTemplateInput) => Promise<RenderedRegions>;
+    /** Map draft theme settings onto the page (CSS variables, usually). */
+    applySettings?: (settings: SettingsData, root: HTMLElement) => void;
+    /** Defaults to {@link ZALIFY_EDITOR_ORIGINS}. */
+    origins?: readonly string[];
+    /** A render slower than this fails the edit instead of hanging it. */
+    renderTimeoutMs?: number;
+}
+/** No bootstrap payload or bridge code is downloaded by ordinary visitors. */
+export declare function EditorPreviewProvider({ children, getBootstrap, renderTemplate, applySettings, origins, renderTimeoutMs, }: EditorPreviewProviderProps): import("react").JSX.Element;
+/** The page's template. Also tells the provider which template this route is. */
+export declare function EditorTemplateRegion({ name, children, }: {
+    name: string;
+    children: ReactNode;
+}): ReactNode;
+/** A section group (header-group, footer-group). */
+export declare function EditorGroupRegion({ name, children, }: {
+    name: string;
+    children: ReactNode;
+}): ReactNode;
+/** True inside a trusted editor frame, after hydration. */
+export declare function useEditorPreview(): boolean;
+/** The editor's selected `data-z-path`, so a component can reveal it. */
+export declare function useEditorSelection(): string | null;

package/dist/react/server-preview.js

@@ -0,0 +1,216 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Editor preview for storefronts that render templates on the server (React
+ * Server Components) instead of through the client theme engine.
+ *
+ * The app supplies two server functions — one returning its bootstrap, one
+ * rendering a draft template to React nodes — and wraps each editable region.
+ * Everything else (trust, bridge, design mode, selection, responsive-copy
+ * paths, error surface) is here, so a storefront repo never writes it again.
+ *
+ *   <EditorPreviewProvider getBootstrap={…} renderTemplate={…}>
+ *     <EditorGroupRegion name="header-group">…</EditorGroupRegion>
+ *     <EditorTemplateRegion name="page.about">…</EditorTemplateRegion>
+ *   </EditorPreviewProvider>
+ */
+import { createContext, useContext, useEffect, useRef, useState, } from "react";
+import { flushSync } from "react-dom";
+import { enterDesignMode } from "./design-mode";
+import { resolveEditorOrigin, ZALIFY_EDITOR_ORIGINS } from "./editor-origin";
+const PreviewContext = createContext(null);
+const CONNECT_TIMEOUT_MS = 30_000;
+const GUARDED_EVENTS = ["click", "auxclick", "dblclick", "submit"];
+async function withDeadline(request, ms) {
+    let timer;
+    try {
+        return await Promise.race([
+            request,
+            new Promise((_, reject) => {
+                timer = setTimeout(() => reject(new Error("Preview update timed out. Retry the edit.")), ms);
+            }),
+        ]);
+    }
+    finally {
+        clearTimeout(timer);
+    }
+}
+/** No bootstrap payload or bridge code is downloaded by ordinary visitors. */
+export function EditorPreviewProvider({ children, getBootstrap, renderTemplate, applySettings, origins = ZALIFY_EDITOR_ORIGINS, renderTimeoutMs = 20_000, }) {
+    const [editorOrigin, setEditorOrigin] = useState(null);
+    const [selectedPath, setSelectedPath] = useState(null);
+    const [templateName, setTemplateName] = useState(null);
+    const [regions, setRegions] = useState({});
+    const [error, setError] = useState(null);
+    const [retry, setRetry] = useState(0);
+    const controllerRef = useRef(null);
+    const sequenceRef = useRef(0);
+    // Server functions and callbacks may be new identities on every render;
+    // they must not reconnect the bridge.
+    const handlers = useRef({ getBootstrap, renderTemplate, applySettings });
+    handlers.current = { getBootstrap, renderTemplate, applySettings };
+    const enabled = editorOrigin !== null;
+    useEffect(() => {
+        setEditorOrigin(resolveEditorOrigin(origins));
+    }, [origins]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const guard = (event) => {
+            if (event.type === "click" &&
+                event.target instanceof Element &&
+                event.target.closest("[data-z-editor-retry]")) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                setRetry((value) => value + 1);
+                return;
+            }
+            // The bridge owns clicks once connected. Until then nothing in the shop
+            // may run; and a preview never submits a real lead, order or login.
+            if (event.type === "submit" || !controllerRef.current) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        };
+        for (const type of GUARDED_EVENTS)
+            document.addEventListener(type, guard, true);
+        return () => {
+            for (const type of GUARDED_EVENTS)
+                document.removeEventListener(type, guard, true);
+        };
+    }, [enabled]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: retry intentionally tears down and reconnects the bridge.
+    useEffect(() => {
+        if (!editorOrigin || !templateName)
+            return;
+        let disposed = false;
+        let unmountObservers = () => { };
+        const leaveDesignMode = enterDesignMode();
+        setError(null);
+        const timeout = window.setTimeout(() => setError("Editor connection timed out. Retry the preview connection."), CONNECT_TIMEOUT_MS);
+        void (async () => {
+            const [{ mountFrameBridge }, selection, visiblePaths, bootstrap] = await Promise.all([
+                import("../editor/frame"),
+                import("../editor/selection"),
+                import("../editor/visible-paths"),
+                handlers.current.getBootstrap(),
+            ]);
+            if (disposed)
+                return;
+            // Both must listen before the bridge does: selection so a component can
+            // reveal the selected tab before it is measured, visible paths so a
+            // hidden responsive copy never shadows the visible one.
+            const unmountSelection = selection.mountEditorSelection(window, (path) => flushSync(() => setSelectedPath(path)));
+            const unmountVisiblePaths = visiblePaths.mountVisiblePaths(window, () => controllerRef.current?.reportRects());
+            unmountObservers = () => {
+                unmountVisiblePaths();
+                unmountSelection();
+            };
+            window.clearTimeout(timeout);
+            setError(null);
+            controllerRef.current = mountFrameBridge({
+                editorOrigin,
+                templateName,
+                hash: bootstrap.manifest.hash,
+                capabilities: [
+                    "editor-bootstrap-v1",
+                    "apply-template-v1",
+                    "apply-groups-v1",
+                    "apply-settings-v1",
+                    "preview-navigation-v1",
+                ],
+                getManifest: () => bootstrap.manifest,
+                getBootstrap: () => bootstrap,
+                applyTemplate: async (payload) => {
+                    if (payload.templateName !== templateName)
+                        return false;
+                    const sequence = ++sequenceRef.current;
+                    try {
+                        const content = await withDeadline(handlers.current.renderTemplate({
+                            templateName,
+                            template: payload.template,
+                            groups: payload.groups,
+                            pathname: window.location.pathname + window.location.search,
+                        }), renderTimeoutMs);
+                        // A newer edit is already rendering: this result is stale.
+                        if (disposed || sequence !== sequenceRef.current)
+                            return true;
+                        setRegions((current) => ({ ...current, ...content }));
+                        if (payload.settingsData)
+                            handlers.current.applySettings?.(payload.settingsData, document.documentElement);
+                        setError(null);
+                        return true;
+                    }
+                    catch (cause) {
+                        if (!disposed && sequence === sequenceRef.current)
+                            setError(cause instanceof Error
+                                ? cause.message
+                                : "Preview could not update");
+                        throw cause;
+                    }
+                },
+            });
+        })().catch((cause) => {
+            window.clearTimeout(timeout);
+            if (!disposed)
+                setError(cause instanceof Error ? cause.message : "Editor connection failed");
+        });
+        return () => {
+            disposed = true;
+            sequenceRef.current++;
+            window.clearTimeout(timeout);
+            controllerRef.current?.unmount();
+            controllerRef.current = null;
+            unmountObservers();
+            leaveDesignMode();
+        };
+    }, [editorOrigin, templateName, retry, renderTimeoutMs]);
+    // Measure after each committed region replacement.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: regions is the trigger.
+    useEffect(() => {
+        controllerRef.current?.reportRects();
+    }, [regions]);
+    const register = (name) => {
+        setTemplateName(name);
+        return () => setTemplateName((current) => (current === name ? null : current));
+    };
+    return (_jsxs(PreviewContext.Provider, { value: { enabled, selectedPath, regions, register }, children: [children, enabled && error ? (_jsxs("div", { role: "alert", style: {
+                    position: "fixed",
+                    left: 16,
+                    right: 16,
+                    bottom: 16,
+                    zIndex: 2147483647,
+                    padding: 16,
+                    background: "#fff1f0",
+                    color: "#8b1b16",
+                    border: "1px solid #c63225",
+                }, children: [error, " ", _jsx("button", { type: "button", "data-z-editor-retry": true, onClick: () => setRetry((value) => value + 1), children: "Retry" })] })) : null] }));
+}
+function useRegion(key, children) {
+    const context = useContext(PreviewContext);
+    return context?.enabled && Object.hasOwn(context.regions, key)
+        ? context.regions[key]
+        : children;
+}
+/** The page's template. Also tells the provider which template this route is. */
+export function EditorTemplateRegion({ name, children, }) {
+    const context = useContext(PreviewContext);
+    // Registration follows route identity, not every update of preview state.
+    const registerRef = useRef(context?.register);
+    registerRef.current = context?.register;
+    useEffect(() => registerRef.current?.(name), [name]);
+    return useRegion(`template:${name}`, children);
+}
+/** A section group (header-group, footer-group). */
+export function EditorGroupRegion({ name, children, }) {
+    return useRegion(`group:${name}`, children);
+}
+/** True inside a trusted editor frame, after hydration. */
+export function useEditorPreview() {
+    return useContext(PreviewContext)?.enabled ?? false;
+}
+/** The editor's selected `data-z-path`, so a component can reveal it. */
+export function useEditorSelection() {
+    const context = useContext(PreviewContext);
+    return context?.enabled ? context.selectedPath : null;
+}

package/dist/react/useEditorTemplate.d.ts

@@ -2,8 +2,8 @@ import type { TemplateData } from "../schemas/data";
 import type { ThemeEditorManifest } from "../schemas/manifest";
 import type { PreviewContext } from "../schemas/bridge";
 import type { EditorDocuments } from "../editor/bootstrap";
-/** Editors allowed to frame a storefront unless the app narrows the list. */
-export declare const ZALIFY_EDITOR_ORIGINS: readonly string[];
+import { ZALIFY_EDITOR_ORIGINS } from "./editor-origin";
+export { ZALIFY_EDITOR_ORIGINS };
 type Options = {
     /** Defaults to {@link ZALIFY_EDITOR_ORIGINS}. */
     origins?: readonly string[];
@@ -15,4 +15,3 @@ type Options = {
 };
 /** No editor code or schema is fetched outside an explicitly allowed preview. */
 export declare function useEditorTemplate(name: string, options: Options): TemplateData | null;
-export {};

package/dist/react/useEditorTemplate.js

@@ -1,29 +1,9 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 import { getThemeStore, setThemePreview } from "./engine/store";
-import { resolveEditorOrigin } from "./editor-origin";
-/** Editors allowed to frame a storefront unless the app narrows the list. */
-export const ZALIFY_EDITOR_ORIGINS = [
-    "https://app.zalify.com",
-    "http://localhost:3000",
-];
-/** Cap for `--editor-viewport-height`: a tall editor pane is not a tall phone. */
-const MAX_EDITOR_VIEWPORT_HEIGHT = 1000;
-/**
- * Design mode is the SDK's to declare, not each storefront's: the editor
- * sizes the iframe to its content, so `100vh` inside it grows with every
- * height report. Themes read `--editor-viewport-height` under
- * `html[data-z-design-mode='1']` instead. Fixed per mount on purpose.
- */
-function enterDesignMode() {
-    const root = document.documentElement;
-    root.style.setProperty("--editor-viewport-height", `${Math.min(window.innerHeight, MAX_EDITOR_VIEWPORT_HEIGHT)}px`);
-    root.setAttribute("data-z-design-mode", "1");
-    return () => {
-        root.removeAttribute("data-z-design-mode");
-        root.style.removeProperty("--editor-viewport-height");
-    };
-}
+import { resolveEditorOrigin, ZALIFY_EDITOR_ORIGINS } from "./editor-origin";
+export { ZALIFY_EDITOR_ORIGINS };
+import { enterDesignMode } from "./design-mode";
 /** No editor code or schema is fetched outside an explicitly allowed preview. */
 export function useEditorTemplate(name, options) {
     const [draft, setDraft] = useState(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zalify/storefront-kit",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "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",
@@ -18,6 +18,10 @@
       "types": "./dist/editor/index.d.ts",
       "default": "./dist/editor/index.js"
     },
+    "./editor/bootstrap": {
+      "types": "./dist/editor/bootstrap.d.ts",
+      "default": "./dist/editor/bootstrap.js"
+    },
     "./editor/frame": {
       "types": "./dist/editor/frame.d.ts",
       "default": "./dist/editor/frame.js"
@@ -26,10 +30,18 @@
       "types": "./dist/editor/host.d.ts",
       "default": "./dist/editor/host.js"
     },
+    "./editor/selection": {
+      "types": "./dist/editor/selection.d.ts",
+      "default": "./dist/editor/selection.js"
+    },
     "./react": {
       "types": "./dist/react/index.d.ts",
       "default": "./dist/react/index.js"
     },
+    "./react/preview": {
+      "types": "./dist/react/server-preview.d.ts",
+      "default": "./dist/react/server-preview.js"
+    },
     "./react/server": {
       "types": "./dist/react/server.d.ts",
       "default": "./dist/react/server.js"
@@ -49,17 +61,22 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
+    },
+    "react-dom": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
     "@types/react": "^18.3.28",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.2",
+    "@types/react-dom": "^18.3.7"
   },
   "repository": {
     "type": "git",

package/skills/zalify-storefront-editor/SKILL.md

@@ -23,6 +23,18 @@ is SDK code and must be imported, never re-implemented:
 | Allowed editor origins | `ZALIFY_EDITOR_ORIGINS` (default) | a copied origin list |
 | Design-mode flag + `--editor-viewport-height` | set by `useEditorTemplate` | a per-repo effect that sets them |
 | Draft application | `createEditorDraft` | mutating template JSON in components |
+| Preview for server-rendered (RSC) storefronts | `EditorPreviewProvider`, `EditorTemplateRegion`, `EditorGroupRegion`, `useEditorPreview`, `useEditorSelection` from `@zalify/storefront-kit/react/preview` | a local provider, selection listener or visible-path observer |
+
+Two integration shapes exist, pick by how the storefront renders:
+
+- **Client theme engine** (`installTheme` + `ThemeTemplate`): call
+  `useEditorTemplate(name, {paths, previews, loadManifest})`.
+- **Server-rendered templates** (RSC): wrap the layout in
+  `<EditorPreviewProvider getBootstrap={…} renderTemplate={…}>`, where both
+  props are server functions of the app — `getBootstrap` returns
+  `createEditorBootstrap(...)`, `renderTemplate` renders a draft read-only —
+  and wrap each page in `<EditorTemplateRegion name="…">`, each header/footer
+  in `<EditorGroupRegion name="…">`.
 
 If the kit cannot express what the storefront needs, the fix is a kit change
 (open a PR on `zalify/zalify-theme-2026`, bump the version), not a local
@@ -38,8 +50,11 @@ and from the editor.
   `product-drawing-projector` or `luka-features` is an unknown type: the editor
   cannot group it, icon it, or offer an entity picker for it. Landing pages are
   `page.<suffix>`.
-- A type that has alternates also registers its default (`page` next to
-  `page.about`). The editor nests alternates under the default.
+- Assert `templateNameProblems(names)` (from
+  `@zalify/storefront-kit/editor/bootstrap`) is empty in the repo's tests.
+- Register a type's default (`page`) only when the app has a route that renders
+  it. Alternates without a default are fine: the editor groups them under the
+  type. Never add a template just to satisfy the picker.
 - `writePath` is `<templates dir>/<name>.json`; the file on disk has the same
   name. Renaming a template renames the file and every route that loads it.
 - Only advertise a preview route the app can really render. Resource routes

package/src/editor/bootstrap.ts

@@ -8,6 +8,43 @@ export interface EditorDocuments {
   settings: string;
 }
 
+/** Template types the editor can group, icon and offer an entity picker for. */
+export const TEMPLATE_TYPES = [
+  'index',
+  'product',
+  'collection',
+  'list-collections',
+  'page',
+  'blog',
+  'article',
+  'cart',
+  'search',
+  '404',
+  'password',
+  'gift_card',
+] as const;
+
+/**
+ * What is wrong with a set of template names, for a storefront's own tests:
+ * names must be `<type>` or `<type>.<suffix>` with a known type. A default is
+ * not required next to alternates — a site with `page.about` but no generic
+ * page route must not invent one; the editor groups such alternates itself.
+ * Empty means the editor can lay them out.
+ */
+export function templateNameProblems(names: readonly string[]): string[] {
+  const problems: string[] = [];
+  for (const name of names) {
+    if (name.startsWith('customers/')) continue;
+    const type = name.split('.')[0];
+    if (!(TEMPLATE_TYPES as readonly string[]).includes(type)) {
+      problems.push(
+        `"${name}": unknown template type "${type}" — use <type>.<suffix>, e.g. "page.${name.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}"`,
+      );
+    }
+  }
+  return problems;
+}
+
 /** Only list routes the app can actually render; never fabricate handles. */
 export function createEditorBootstrap(options: {
   schema: DraftSchema;

package/src/editor/selection.ts

@@ -0,0 +1,52 @@
+import {
+  BRIDGE_NAMESPACE,
+  CONTRACT_VERSION,
+  isCompatibleVersion,
+} from "../schemas/index.ts";
+
+/** Observe the same authenticated parent selection as the SDK. Components can
+ * reveal the selected tab/menu before the SDK measures its DOM node. */
+export function mountEditorSelection(
+  win: Window,
+  onSelect: (path: string | null) => void,
+) {
+  let origin: string | undefined;
+  const listener = (event: MessageEvent) => {
+    if (event.source !== win.parent) return;
+    const data = event.data;
+    if (
+      !data ||
+      data.z !== BRIDGE_NAMESPACE ||
+      typeof data.v !== "string" ||
+      !isCompatibleVersion(CONTRACT_VERSION, data.v) ||
+      !data.payload
+    )
+      return;
+    if (
+      !origin &&
+      data.type === "bridge:init" &&
+      event.origin === data.payload.editorOrigin
+    )
+      origin = event.origin;
+    if (!origin || event.origin !== origin) return;
+    const path =
+      data.type === "bridge:init"
+        ? data.payload.selectedPath
+        : data.type === "block:select"
+          ? data.payload.path
+          : undefined;
+    if (path === null || typeof path === "string") onSelect(path);
+  };
+  const click = (event: Event) => {
+    const target = event.target as Element | null;
+    const path =
+      target?.closest?.("[data-z-path]")?.getAttribute("data-z-path") ?? null;
+    if (path) onSelect(path);
+  };
+  win.addEventListener("message", listener);
+  win.document.addEventListener("click", click, true);
+  return () => {
+    win.removeEventListener("message", listener);
+    win.document.removeEventListener("click", click, true);
+  };
+}

package/src/editor/visible-paths.ts

@@ -0,0 +1,99 @@
+const PATH = "data-z-path";
+const HIDDEN_PATH = "data-z-editor-hidden-path";
+
+/** The SDK selects the first matching path. Responsive copies must not let a
+ * hidden desktop node shadow its visible mobile counterpart (or vice versa). */
+export function syncVisiblePaths(doc: Document) {
+  for (const node of doc.querySelectorAll(`[${PATH}], [${HIDDEN_PATH}]`)) {
+    const path = node.getAttribute(PATH) ?? node.getAttribute(HIDDEN_PATH);
+    if (!path) continue;
+    // display:contents has no own box; a visible child still makes it selectable.
+    const visible =
+      node.getClientRects().length > 0 ||
+      Array.from(node.children).some(
+        (child) => child.getClientRects().length > 0,
+      );
+    if (visible) {
+      if (node.getAttribute(PATH) !== path) node.setAttribute(PATH, path);
+      if (node.getAttribute(HIDDEN_PATH) !== null)
+        node.removeAttribute(HIDDEN_PATH);
+    } else {
+      if (node.getAttribute(HIDDEN_PATH) !== path)
+        node.setAttribute(HIDDEN_PATH, path);
+      if (node.getAttribute(PATH) !== null) node.removeAttribute(PATH);
+    }
+  }
+}
+
+export function restoreHiddenPaths(doc: Document) {
+  for (const node of doc.querySelectorAll(`[${HIDDEN_PATH}]`)) {
+    const path = node.getAttribute(HIDDEN_PATH);
+    if (path && !node.hasAttribute(PATH)) node.setAttribute(PATH, path);
+    node.removeAttribute(HIDDEN_PATH);
+  }
+}
+
+/** Mounted only in the editor, before the SDK's message/resize listeners. */
+export function mountVisiblePaths(win: Window, onChange: () => void) {
+  let frame = 0;
+  const sync = () => syncVisiblePaths(win.document);
+  const schedule = () => {
+    if (frame) return;
+    frame = win.requestAnimationFrame(() => {
+      frame = 0;
+      sync();
+      onChange();
+    });
+  };
+  // Transform/opacity animations do not change which responsive copy has a box.
+  // Scanning every path for each animation frame makes long previews expensive.
+  const boxStyle = (style: string | null) =>
+    ["display", "content-visibility"]
+      .map(
+        (property) =>
+          new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*([^;]+)`, "i")
+            .exec(style ?? "")?.[1]
+            .trim() ?? "",
+      )
+      .join("|");
+  const observer = new MutationObserver((records) => {
+    if (
+      records.some((record) => {
+        const target = record.target as Element;
+        if (target.id === "zalify-editor-highlight") return false;
+        if (record.type === "attributes" && record.attributeName === "style")
+          return (
+            boxStyle(record.oldValue) !== boxStyle(target.getAttribute("style"))
+          );
+        return true;
+      })
+    )
+      schedule();
+  });
+  observer.observe(win.document.documentElement, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeOldValue: true,
+    attributeFilter: [PATH, "class", "style", "hidden"],
+  });
+  const onMessage = (event: MessageEvent) => {
+    if (
+      event.data?.z === "zalify-editor-bridge" &&
+      ["bridge:init", "block:select", "device:set", "template:apply"].includes(
+        event.data.type,
+      )
+    )
+      sync();
+  };
+  win.addEventListener("resize", sync);
+  win.addEventListener("message", onMessage);
+  sync();
+  return () => {
+    observer.disconnect();
+    win.cancelAnimationFrame(frame);
+    win.removeEventListener("resize", sync);
+    win.removeEventListener("message", onMessage);
+    restoreHiddenPaths(win.document);
+  };
+}

package/src/react/design-mode.ts

@@ -0,0 +1,21 @@
+/** Cap for `--editor-viewport-height`: a tall editor pane is not a tall phone. */
+const MAX_EDITOR_VIEWPORT_HEIGHT = 1000;
+
+/**
+ * Design mode is the SDK's to declare, not each storefront's: the editor
+ * sizes the iframe to its content, so `100vh` inside it grows with every
+ * height report. Themes read `--editor-viewport-height` under
+ * `html[data-z-design-mode='1']` instead. Fixed per mount on purpose.
+ */
+export function enterDesignMode(): () => void {
+  const root = document.documentElement;
+  root.style.setProperty(
+    "--editor-viewport-height",
+    `${Math.min(window.innerHeight, MAX_EDITOR_VIEWPORT_HEIGHT)}px`,
+  );
+  root.setAttribute("data-z-design-mode", "1");
+  return () => {
+    root.removeAttribute("data-z-design-mode");
+    root.style.removeProperty("--editor-viewport-height");
+  };
+}

package/src/react/editor-origin.ts

@@ -10,6 +10,13 @@
  */
 const STORAGE_KEY = "zalify-editor-origin";
 
+/** Editors allowed to frame a storefront unless the app narrows the list. */
+export const ZALIFY_EDITOR_ORIGINS: readonly string[] = [
+  "https://app.zalify.com",
+  "http://localhost:3000",
+];
+
+
 export function resolveEditorOrigin(
   origins: readonly string[],
   win: Window = window,

package/src/react/server-preview.tsx

@@ -0,0 +1,333 @@
+"use client";
+/**
+ * Editor preview for storefronts that render templates on the server (React
+ * Server Components) instead of through the client theme engine.
+ *
+ * The app supplies two server functions — one returning its bootstrap, one
+ * rendering a draft template to React nodes — and wraps each editable region.
+ * Everything else (trust, bridge, design mode, selection, responsive-copy
+ * paths, error surface) is here, so a storefront repo never writes it again.
+ *
+ *   <EditorPreviewProvider getBootstrap={…} renderTemplate={…}>
+ *     <EditorGroupRegion name="header-group">…</EditorGroupRegion>
+ *     <EditorTemplateRegion name="page.about">…</EditorTemplateRegion>
+ *   </EditorPreviewProvider>
+ */
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { flushSync } from "react-dom";
+import type { FrameBridgeController } from "../editor/frame";
+import type { EditorBootstrap } from "../schemas/bridge";
+import type {
+  SectionGroupData,
+  SettingsData,
+  TemplateData,
+} from "../schemas/data";
+import { enterDesignMode } from "./design-mode";
+import { resolveEditorOrigin, ZALIFY_EDITOR_ORIGINS } from "./editor-origin";
+
+export interface RenderTemplateInput {
+  templateName: string;
+  template: TemplateData;
+  groups?: Record<string, SectionGroupData>;
+  /** Path + query of the page being previewed, without the editor param. */
+  pathname: string;
+}
+
+/** Keys are `template:<name>` and `group:<name>`. */
+export type RenderedRegions = Record<string, ReactNode>;
+
+export interface EditorPreviewProviderProps {
+  children: ReactNode;
+  /** Server function: the app's bootstrap (see `createEditorBootstrap`). */
+  getBootstrap: () => Promise<EditorBootstrap>;
+  /** Server function: render a draft. Must be read-only. */
+  renderTemplate: (input: RenderTemplateInput) => Promise<RenderedRegions>;
+  /** Map draft theme settings onto the page (CSS variables, usually). */
+  applySettings?: (settings: SettingsData, root: HTMLElement) => void;
+  /** Defaults to {@link ZALIFY_EDITOR_ORIGINS}. */
+  origins?: readonly string[];
+  /** A render slower than this fails the edit instead of hanging it. */
+  renderTimeoutMs?: number;
+}
+
+type PreviewContextValue = {
+  enabled: boolean;
+  selectedPath: string | null;
+  regions: RenderedRegions;
+  register: (name: string) => () => void;
+};
+const PreviewContext = createContext<PreviewContextValue | null>(null);
+
+const CONNECT_TIMEOUT_MS = 30_000;
+const GUARDED_EVENTS = ["click", "auxclick", "dblclick", "submit"];
+
+async function withDeadline<T>(request: Promise<T>, ms: number): Promise<T> {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  try {
+    return await Promise.race([
+      request,
+      new Promise<never>((_, reject) => {
+        timer = setTimeout(
+          () => reject(new Error("Preview update timed out. Retry the edit.")),
+          ms,
+        );
+      }),
+    ]);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/** No bootstrap payload or bridge code is downloaded by ordinary visitors. */
+export function EditorPreviewProvider({
+  children,
+  getBootstrap,
+  renderTemplate,
+  applySettings,
+  origins = ZALIFY_EDITOR_ORIGINS,
+  renderTimeoutMs = 20_000,
+}: EditorPreviewProviderProps) {
+  const [editorOrigin, setEditorOrigin] = useState<string | null>(null);
+  const [selectedPath, setSelectedPath] = useState<string | null>(null);
+  const [templateName, setTemplateName] = useState<string | null>(null);
+  const [regions, setRegions] = useState<RenderedRegions>({});
+  const [error, setError] = useState<string | null>(null);
+  const [retry, setRetry] = useState(0);
+  const controllerRef = useRef<FrameBridgeController | null>(null);
+  const sequenceRef = useRef(0);
+  // Server functions and callbacks may be new identities on every render;
+  // they must not reconnect the bridge.
+  const handlers = useRef({ getBootstrap, renderTemplate, applySettings });
+  handlers.current = { getBootstrap, renderTemplate, applySettings };
+  const enabled = editorOrigin !== null;
+
+  useEffect(() => {
+    setEditorOrigin(resolveEditorOrigin(origins));
+  }, [origins]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const guard = (event: Event) => {
+      if (
+        event.type === "click" &&
+        event.target instanceof Element &&
+        event.target.closest("[data-z-editor-retry]")
+      ) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        setRetry((value) => value + 1);
+        return;
+      }
+      // The bridge owns clicks once connected. Until then nothing in the shop
+      // may run; and a preview never submits a real lead, order or login.
+      if (event.type === "submit" || !controllerRef.current) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    for (const type of GUARDED_EVENTS)
+      document.addEventListener(type, guard, true);
+    return () => {
+      for (const type of GUARDED_EVENTS)
+        document.removeEventListener(type, guard, true);
+    };
+  }, [enabled]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: retry intentionally tears down and reconnects the bridge.
+  useEffect(() => {
+    if (!editorOrigin || !templateName) return;
+    let disposed = false;
+    let unmountObservers = () => {};
+    const leaveDesignMode = enterDesignMode();
+    setError(null);
+    const timeout = window.setTimeout(
+      () =>
+        setError("Editor connection timed out. Retry the preview connection."),
+      CONNECT_TIMEOUT_MS,
+    );
+    void (async () => {
+      const [{ mountFrameBridge }, selection, visiblePaths, bootstrap] =
+        await Promise.all([
+          import("../editor/frame"),
+          import("../editor/selection"),
+          import("../editor/visible-paths"),
+          handlers.current.getBootstrap(),
+        ]);
+      if (disposed) return;
+      // Both must listen before the bridge does: selection so a component can
+      // reveal the selected tab before it is measured, visible paths so a
+      // hidden responsive copy never shadows the visible one.
+      const unmountSelection = selection.mountEditorSelection(window, (path) =>
+        flushSync(() => setSelectedPath(path)),
+      );
+      const unmountVisiblePaths = visiblePaths.mountVisiblePaths(window, () =>
+        controllerRef.current?.reportRects(),
+      );
+      unmountObservers = () => {
+        unmountVisiblePaths();
+        unmountSelection();
+      };
+      window.clearTimeout(timeout);
+      setError(null);
+      controllerRef.current = mountFrameBridge({
+        editorOrigin,
+        templateName,
+        hash: bootstrap.manifest.hash,
+        capabilities: [
+          "editor-bootstrap-v1",
+          "apply-template-v1",
+          "apply-groups-v1",
+          "apply-settings-v1",
+          "preview-navigation-v1",
+        ],
+        getManifest: () => bootstrap.manifest,
+        getBootstrap: () => bootstrap,
+        applyTemplate: async (payload) => {
+          if (payload.templateName !== templateName) return false;
+          const sequence = ++sequenceRef.current;
+          try {
+            const content = await withDeadline(
+              handlers.current.renderTemplate({
+                templateName,
+                template: payload.template,
+                groups: payload.groups,
+                pathname: window.location.pathname + window.location.search,
+              }),
+              renderTimeoutMs,
+            );
+            // A newer edit is already rendering: this result is stale.
+            if (disposed || sequence !== sequenceRef.current) return true;
+            setRegions((current) => ({ ...current, ...content }));
+            if (payload.settingsData)
+              handlers.current.applySettings?.(
+                payload.settingsData,
+                document.documentElement,
+              );
+            setError(null);
+            return true;
+          } catch (cause) {
+            if (!disposed && sequence === sequenceRef.current)
+              setError(
+                cause instanceof Error
+                  ? cause.message
+                  : "Preview could not update",
+              );
+            throw cause;
+          }
+        },
+      });
+    })().catch((cause: unknown) => {
+      window.clearTimeout(timeout);
+      if (!disposed)
+        setError(
+          cause instanceof Error ? cause.message : "Editor connection failed",
+        );
+    });
+    return () => {
+      disposed = true;
+      sequenceRef.current++;
+      window.clearTimeout(timeout);
+      controllerRef.current?.unmount();
+      controllerRef.current = null;
+      unmountObservers();
+      leaveDesignMode();
+    };
+  }, [editorOrigin, templateName, retry, renderTimeoutMs]);
+
+  // Measure after each committed region replacement.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: regions is the trigger.
+  useEffect(() => {
+    controllerRef.current?.reportRects();
+  }, [regions]);
+
+  const register = (name: string) => {
+    setTemplateName(name);
+    return () =>
+      setTemplateName((current) => (current === name ? null : current));
+  };
+
+  return (
+    <PreviewContext.Provider
+      value={{ enabled, selectedPath, regions, register }}
+    >
+      {children}
+      {enabled && error ? (
+        <div
+          role="alert"
+          style={{
+            position: "fixed",
+            left: 16,
+            right: 16,
+            bottom: 16,
+            zIndex: 2147483647,
+            padding: 16,
+            background: "#fff1f0",
+            color: "#8b1b16",
+            border: "1px solid #c63225",
+          }}
+        >
+          {error}{" "}
+          <button
+            type="button"
+            data-z-editor-retry
+            onClick={() => setRetry((value) => value + 1)}
+          >
+            Retry
+          </button>
+        </div>
+      ) : null}
+    </PreviewContext.Provider>
+  );
+}
+
+function useRegion(key: string, children: ReactNode): ReactNode {
+  const context = useContext(PreviewContext);
+  return context?.enabled && Object.hasOwn(context.regions, key)
+    ? context.regions[key]
+    : children;
+}
+
+/** The page's template. Also tells the provider which template this route is. */
+export function EditorTemplateRegion({
+  name,
+  children,
+}: {
+  name: string;
+  children: ReactNode;
+}) {
+  const context = useContext(PreviewContext);
+  // Registration follows route identity, not every update of preview state.
+  const registerRef = useRef(context?.register);
+  registerRef.current = context?.register;
+  useEffect(() => registerRef.current?.(name), [name]);
+  return useRegion(`template:${name}`, children);
+}
+
+/** A section group (header-group, footer-group). */
+export function EditorGroupRegion({
+  name,
+  children,
+}: {
+  name: string;
+  children: ReactNode;
+}) {
+  return useRegion(`group:${name}`, children);
+}
+
+/** True inside a trusted editor frame, after hydration. */
+export function useEditorPreview(): boolean {
+  return useContext(PreviewContext)?.enabled ?? false;
+}
+
+/** The editor's selected `data-z-path`, so a component can reveal it. */
+export function useEditorSelection(): string | null {
+  const context = useContext(PreviewContext);
+  return context?.enabled ? context.selectedPath : null;
+}

package/src/react/useEditorTemplate.ts

@@ -6,35 +6,10 @@ 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";
+import { resolveEditorOrigin, ZALIFY_EDITOR_ORIGINS } from "./editor-origin";
 
-/** Editors allowed to frame a storefront unless the app narrows the list. */
-export const ZALIFY_EDITOR_ORIGINS: readonly string[] = [
-  "https://app.zalify.com",
-  "http://localhost:3000",
-];
-
-/** Cap for `--editor-viewport-height`: a tall editor pane is not a tall phone. */
-const MAX_EDITOR_VIEWPORT_HEIGHT = 1000;
-
-/**
- * Design mode is the SDK's to declare, not each storefront's: the editor
- * sizes the iframe to its content, so `100vh` inside it grows with every
- * height report. Themes read `--editor-viewport-height` under
- * `html[data-z-design-mode='1']` instead. Fixed per mount on purpose.
- */
-function enterDesignMode(): () => void {
-  const root = document.documentElement;
-  root.style.setProperty(
-    "--editor-viewport-height",
-    `${Math.min(window.innerHeight, MAX_EDITOR_VIEWPORT_HEIGHT)}px`,
-  );
-  root.setAttribute("data-z-design-mode", "1");
-  return () => {
-    root.removeAttribute("data-z-design-mode");
-    root.style.removeProperty("--editor-viewport-height");
-  };
-}
+export { ZALIFY_EDITOR_ORIGINS };
+import { enterDesignMode } from "./design-mode";
 
 type Options = {
   /** Defaults to {@link ZALIFY_EDITOR_ORIGINS}. */