@zalify/storefront-kit 0.1.13 → 0.3.0

package/dist/editor/bootstrap.d.ts

@@ -0,0 +1,15 @@
+import type { EditorBootstrap, PreviewContext } from '../schemas/bridge.ts';
+import type { ThemeEditorManifest } from '../schemas/manifest.ts';
+import type { DraftSchema } from './draft.ts';
+export interface EditorDocuments {
+    templates: string;
+    groups: string;
+    settings: string;
+}
+/** Only list routes the app can actually render; never fabricate handles. */
+export declare function createEditorBootstrap(options: {
+    schema: DraftSchema;
+    manifest: ThemeEditorManifest;
+    paths: EditorDocuments;
+    previews: Record<string, PreviewContext>;
+}): EditorBootstrap;

package/dist/editor/bootstrap.js

@@ -0,0 +1,42 @@
+/** Only list routes the app can actually render; never fabricate handles. */
+export function createEditorBootstrap(options) {
+    const { schema, manifest, paths, previews } = options;
+    for (const path of [paths.templates, paths.groups, paths.settings]) {
+        if (!path ||
+            path.startsWith('/') ||
+            path.includes('\\') ||
+            path.split('/').some((p) => p === '..' || p === '.')) {
+            throw new Error('Editor write paths must be repository-relative');
+        }
+    }
+    const templates = {
+        ...schema.templates,
+        ...Object.fromEntries(Object.entries(schema.customerTemplates ?? {}).map(([name, data]) => [
+            `customers/${name}`,
+            data,
+        ])),
+    };
+    return {
+        revision: manifest.hash,
+        manifest,
+        templates: Object.entries(templates)
+            .filter(([name]) => previews[name])
+            .map(([name, data]) => ({
+            name,
+            data: structuredClone(data),
+            writePath: `${paths.templates}/${name}.json`,
+            preview: previews[name],
+        })),
+        groups: Object.entries(schema.sectionGroups).map(([name, data]) => ({
+            name,
+            data: structuredClone(data),
+            writePath: `${paths.groups}/${name}.json`,
+        })),
+        settings: {
+            writePath: paths.settings,
+            schema: manifest.settingsSchema,
+            resolvedData: structuredClone(schema.settingsData),
+        },
+        previewContexts: {},
+    };
+}

package/dist/editor/draft.d.ts

@@ -0,0 +1,17 @@
+import type { SectionGroupData, SettingsData, TemplateData } from '../schemas/data.ts';
+export interface DraftSchema {
+    templates: Record<string, TemplateData>;
+    customerTemplates?: Record<string, TemplateData>;
+    sectionGroups: Record<string, SectionGroupData>;
+    settingsData: SettingsData;
+}
+export interface PreviewApply {
+    templateName: string;
+    template: TemplateData;
+    groups?: Record<string, SectionGroupData>;
+    settingsData?: SettingsData;
+}
+/** Immutable, per-preview data. Never writes into an installed source schema. */
+export declare function createEditorDraft(source: DraftSchema): {
+    apply(payload: PreviewApply): DraftSchema;
+};

package/dist/editor/draft.js

@@ -0,0 +1,32 @@
+/** Immutable, per-preview data. Never writes into an installed source schema. */
+export function createEditorDraft(source) {
+    let current = structuredClone(source);
+    return {
+        apply(payload) {
+            const template = structuredClone(payload.template);
+            const customer = payload.templateName.startsWith('customers/');
+            current = {
+                ...current,
+                ...(customer
+                    ? {
+                        customerTemplates: {
+                            ...current.customerTemplates,
+                            [payload.templateName.slice(10)]: template,
+                        },
+                    }
+                    : {
+                        templates: {
+                            ...current.templates,
+                            [payload.templateName]: template,
+                        },
+                    }),
+                sectionGroups: {
+                    ...current.sectionGroups,
+                    ...structuredClone(payload.groups ?? {}),
+                },
+                settingsData: structuredClone(payload.settingsData ?? current.settingsData),
+            };
+            return current;
+        },
+    };
+}

package/dist/editor/frame.d.ts

@@ -6,11 +6,20 @@
  * sync — and hands app-specific concerns (template hot-apply, device
  * emulation) to callbacks.
  *
- * Editor mode neutralizes the page's own interactivity: clicks,
- * double/middle clicks, form submits, and context menus are captured
- * at the document root and suppressed, so selecting a node never
- * navigates a link, opens a drawer, or submits a form — a click is
- * only ever a selection. (Hover stays live for highlight tracking.)
+ * Editor mode keeps the page interactive — buttons, drawers, variant
+ * pickers, forms all work, so any state can be previewed — while the
+ * bridge takes over two things a click must never do on its own:
+ *
+ * - Leave the storefront. Same-origin links and GET forms are turned
+ *   into `location.replace` navigations that keep the editor-mode
+ *   query param (so the next document mounts the bridge again) and
+ *   add no browser-history entries; off-site links, new-tab links,
+ *   modifier-clicks and off-site paths (checkout, account) are blocked.
+ * - Escape selection: every click still selects the enclosing block.
+ *
+ * Double/middle clicks and context menus stay suppressed. Each mount
+ * reports its URL as a `navigation`, which is how the editor follows
+ * in-preview browsing.
  *
  * Security: the first `bridge:init` pins the editor origin; every
  * later message must match it, and nothing but `bridge:ready` is ever
@@ -47,6 +56,25 @@ export interface FrameBridgeOptions {
 }
 /** True when this document should mount the editor bridge. */
 export declare function isEditorMode(win?: Window): boolean;
+export type NavigationDecision = {
+    kind: 'allow';
+    url: string;
+} | {
+    kind: 'block';
+    reason: 'off-origin' | 'new-tab' | 'modifier' | 'off-site' | 'download';
+};
+/**
+ * Where a click on `anchor` may take the preview. Same-origin page loads are
+ * allowed (with the editor-mode param re-attached); anything that would leave
+ * the sandbox or open another window is blocked.
+ */
+export declare function decideNavigation(href: string, base: string, flags: {
+    target?: string | null;
+    download?: boolean;
+    modifier?: boolean;
+}): NavigationDecision;
+/** The storefront path the editor should remember: no editor-mode param. */
+export declare function previewPathOf(href: string): string;
 export interface FrameBridgeController {
     unmount: () => void;
     /** Report that a persisted write round-tripped (HMR applied `hash`). */

package/dist/editor/frame.js

@@ -6,11 +6,20 @@
  * sync — and hands app-specific concerns (template hot-apply, device
  * emulation) to callbacks.
  *
- * Editor mode neutralizes the page's own interactivity: clicks,
- * double/middle clicks, form submits, and context menus are captured
- * at the document root and suppressed, so selecting a node never
- * navigates a link, opens a drawer, or submits a form — a click is
- * only ever a selection. (Hover stays live for highlight tracking.)
+ * Editor mode keeps the page interactive — buttons, drawers, variant
+ * pickers, forms all work, so any state can be previewed — while the
+ * bridge takes over two things a click must never do on its own:
+ *
+ * - Leave the storefront. Same-origin links and GET forms are turned
+ *   into `location.replace` navigations that keep the editor-mode
+ *   query param (so the next document mounts the bridge again) and
+ *   add no browser-history entries; off-site links, new-tab links,
+ *   modifier-clicks and off-site paths (checkout, account) are blocked.
+ * - Escape selection: every click still selects the enclosing block.
+ *
+ * Double/middle clicks and context menus stay suppressed. Each mount
+ * reports its URL as a `navigation`, which is how the editor follows
+ * in-preview browsing.
  *
  * Security: the first `bridge:init` pins the editor origin; every
  * later message must match it, and nothing but `bridge:ready` is ever
@@ -49,10 +58,51 @@ function visibleRectOf(element) {
     return { x: left, y: top, width: right - left, height: bottom - top };
 }
 function pathNodeOf(target) {
-    if (!(target instanceof Element))
+    if (!isElement(target))
         return null;
     return target.closest(`[${DATA_PATH_ATTR}]`);
 }
+function isElement(target) {
+    return (typeof Element !== 'undefined' && target instanceof Element);
+}
+/** Storefront paths that hand off to Shopify-hosted pages; never previewable. */
+const OFF_SITE_PATHS = [/^\/checkout(?:s)?(?:\/|$)/, /^\/cart\/c\//, /^\/account(?:\/|$)/, /^\/admin(?:\/|$)/];
+/**
+ * Where a click on `anchor` may take the preview. Same-origin page loads are
+ * allowed (with the editor-mode param re-attached); anything that would leave
+ * the sandbox or open another window is blocked.
+ */
+export function decideNavigation(href, base, flags) {
+    if (flags.modifier)
+        return { kind: 'block', reason: 'modifier' };
+    if (flags.download)
+        return { kind: 'block', reason: 'download' };
+    if (flags.target && flags.target !== '_self')
+        return { kind: 'block', reason: 'new-tab' };
+    let url;
+    try {
+        url = new URL(href, base);
+    }
+    catch {
+        return { kind: 'block', reason: 'off-origin' };
+    }
+    if (url.origin !== new URL(base).origin)
+        return { kind: 'block', reason: 'off-origin' };
+    if (OFF_SITE_PATHS.some((pattern) => pattern.test(url.pathname))) {
+        return { kind: 'block', reason: 'off-site' };
+    }
+    url.searchParams.set(EDITOR_MODE_PARAM, '1');
+    return { kind: 'allow', url: url.toString() };
+}
+/** The storefront path the editor should remember: no editor-mode param. */
+export function previewPathOf(href) {
+    const url = new URL(href);
+    url.searchParams.delete(EDITOR_MODE_PARAM);
+    return url.pathname + url.search;
+}
+function anchorOf(target) {
+    return isElement(target) ? target.closest('a[href]') : null;
+}
 /**
  * Mount the frame bridge. Returns a controller with an `unmount`
  * function. Call only when `isEditorMode()` is true.
@@ -82,6 +132,15 @@ export function mountFrameBridge(options) {
             return;
         win.parent.postMessage({ z: BRIDGE_NAMESPACE, v: CONTRACT_VERSION, ...message }, target);
     };
+    // Every mount tells the editor where the preview is now: after an
+    // in-preview link or search the host would otherwise keep showing the
+    // page it originally asked for. Sent once the editor origin is pinned.
+    const reportNavigation = () => {
+        post({
+            type: 'navigation',
+            payload: { templateName: options.templateName, url: previewPathOf(win.location.href) },
+        });
+    };
     const setUnique = (attr, path) => {
         for (const node of doc.querySelectorAll(`[${attr}]`)) {
             node.removeAttribute(attr);
@@ -171,6 +230,7 @@ export function mountFrameBridge(options) {
                 queueMicrotask(() => {
                     lastHeight = 0;
                     measure();
+                    reportNavigation();
                 });
                 break;
             }
@@ -244,20 +304,45 @@ export function mountFrameBridge(options) {
     };
     const handleClick = (event) => {
         const node = pathNodeOf(event.target);
-        // Editor mode owns clicks: no navigation, no dialogs.
+        if (node) {
+            const path = node.getAttribute(DATA_PATH_ATTR);
+            setSelection(path);
+            post({ type: 'block:clicked', payload: { path, rect: rectOf(node) } });
+        }
+        // The page keeps its interactivity; only navigation is policed.
+        const anchor = anchorOf(event.target);
+        if (!anchor)
+            return;
+        const decision = decideNavigation(anchor.getAttribute('href') ?? '', win.location.href, {
+            target: anchor.getAttribute('target'),
+            download: anchor.hasAttribute('download'),
+            modifier: event.metaKey || event.ctrlKey || event.shiftKey || event.altKey,
+        });
         event.preventDefault();
-        event.stopPropagation();
-        if (!node)
+        if (decision.kind === 'allow')
+            win.location.replace(decision.url);
+    };
+    const handleSubmit = (event) => {
+        const form = event.target;
+        if (!(form instanceof win.HTMLFormElement))
+            return;
+        if ((form.getAttribute('method') ?? 'get').toLowerCase() !== 'get')
             return;
-        const path = node.getAttribute(DATA_PATH_ATTR);
-        setSelection(path);
-        post({ type: 'block:clicked', payload: { path, rect: rectOf(node) } });
+        // A GET form is a navigation: route it like a link so the editor-mode
+        // param survives and history stays clean. POST forms run as they are.
+        const action = new URL(form.getAttribute('action') || win.location.pathname, win.location.href);
+        for (const [key, value] of new FormData(form)) {
+            if (typeof value === 'string')
+                action.searchParams.set(key, value);
+        }
+        const decision = decideNavigation(action.toString(), win.location.href, {});
+        event.preventDefault();
+        if (decision.kind === 'allow')
+            win.location.replace(decision.url);
     };
     const handleWheel = (event) => {
-        // Both previews are fixed device viewports. Let ordinary wheel gestures
-        // scroll the storefront; pinch/Ctrl+wheel remains a canvas zoom gesture.
-        if (!event.ctrlKey)
-            return;
+        // Cross-origin iframe wheel events never reach the host canvas. Forward
+        // wheel gestures so the editor can pan its canvas.
         event.preventDefault();
         post({
             type: 'viewport:wheel',
@@ -265,6 +350,7 @@ export function mountFrameBridge(options) {
                 deltaX: event.deltaX,
                 deltaY: event.deltaY,
                 ctrlKey: event.ctrlKey,
+                shiftKey: event.shiftKey,
                 clientX: event.clientX,
                 clientY: event.clientY,
             },
@@ -275,12 +361,7 @@ export function mountFrameBridge(options) {
         event.preventDefault();
         event.stopPropagation();
     };
-    const SUPPRESSED_EVENTS = [
-        'dblclick',
-        'auxclick',
-        'submit',
-        'contextmenu',
-    ];
+    const SUPPRESSED_EVENTS = ['dblclick', 'auxclick', 'contextmenu'];
     const handleMouseMove = (() => {
         let lastPath = null;
         return (event) => {
@@ -316,6 +397,7 @@ export function mountFrameBridge(options) {
     win.addEventListener('resize', syncSelectionHighlight);
     win.addEventListener('scroll', syncSelectionHighlight, true);
     doc.addEventListener('click', handleClick, true);
+    doc.addEventListener('submit', handleSubmit, true);
     doc.addEventListener('mousemove', handleMouseMove, true);
     doc.addEventListener('wheel', handleWheel, { capture: true, passive: false });
     for (const type of SUPPRESSED_EVENTS) {
@@ -337,6 +419,7 @@ export function mountFrameBridge(options) {
             win.removeEventListener('resize', syncSelectionHighlight);
             win.removeEventListener('scroll', syncSelectionHighlight, true);
             doc.removeEventListener('click', handleClick, true);
+            doc.removeEventListener('submit', handleSubmit, true);
             doc.removeEventListener('mousemove', handleMouseMove, true);
             doc.removeEventListener('wheel', handleWheel, true);
             for (const type of SUPPRESSED_EVENTS) {

package/dist/react/engine/CssVariables.js

@@ -8,9 +8,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Static token scales (spacing, type, radii) live in the app's
  * critical.css (synced from the theme).
  */
-import { useMemo } from 'react';
+import { useMemo, useSyncExternalStore } from 'react';
 import { colorSchemes, themeSettings } from './settings';
-import { getThemeStoreVersion } from './store';
+import { getThemeStoreVersion, subscribePreview, getPreviewVersion, getServerPreviewVersion, hasThemePreview, } from './store';
 import { googleFontsHrefsFromSettings, parseFontHandle, } from "../../commerce/google-fonts.js";
 function buildCss() {
     const s = themeSettings;
@@ -107,14 +107,15 @@ const FONT_CSS_LOADER = [
     '})(l[i])}',
 ].join('');
 export function CssVariables({ nonce, fonts, } = {}) {
+    useSyncExternalStore(subscribePreview, getPreviewVersion, getServerPreviewVersion);
     const themeVersion = getThemeStoreVersion();
     const { css, links } = useMemo(() => ({ css: buildCss(), links: googleFontsHrefs() }), [themeVersion]);
     // Server-resolved fonts (the next/font pattern): @font-face rules are
     // inlined and the latin woff2 files preloaded, so the font downloads
     // with the HTML and usually beats first paint — no async stylesheet,
     // no FOUT, no request to fonts.googleapis.com at all.
-    if (fonts) {
+    if (fonts && !hasThemePreview()) {
         return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), fonts.preloadUrls.map((href) => (_jsx("link", { rel: "preload", as: "font", type: "font/woff2", href: href, crossOrigin: "anonymous" }, href))), _jsx("style", { dangerouslySetInnerHTML: { __html: fonts.css } }), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), links.map((href) => (_jsx("link", { rel: "preload", as: "style", href: href, "data-zfy-font-css": "" }, href))), _jsx("script", { nonce: nonce, dangerouslySetInnerHTML: { __html: FONT_CSS_LOADER } }), _jsx("noscript", { children: links.map((href) => (_jsx("link", { rel: "stylesheet", href: href }, href))) }), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), links.map((href) => (_jsx("link", { rel: hasThemePreview() ? 'stylesheet' : 'preload', as: "style", href: href, "data-zfy-font-css": "" }, href))), _jsx("script", { nonce: nonce, dangerouslySetInnerHTML: { __html: FONT_CSS_LOADER } }), _jsx("noscript", { children: links.map((href) => (_jsx("link", { rel: "stylesheet", href: href }, href))) }), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
 }

package/dist/react/engine/render.js

@@ -16,7 +16,8 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  * emitted unconditionally so server and client markup stay identical.
  */
 import { formatThemePath, DATA_PATH_ATTR } from "../../schemas/index.js";
-import { getSectionGroup, getTemplate, getThemeStore } from './store';
+import { getSectionGroup, getTemplate, getThemeStore, subscribePreview, getPreviewVersion, getServerPreviewVersion, } from './store';
+import { useSyncExternalStore } from 'react';
 import { SectionProvider, TemplateProvider } from './context';
 const warned = new Set();
 function warnMissing(kind, type) {
@@ -82,6 +83,7 @@ export function ThemeTemplate({ name, resources = {}, sectionData = {}, }) {
 }
 /** Mirror of `{% sections 'header-group' %}` in layout/theme.liquid. */
 export function SectionGroup({ name, sectionData = {}, }) {
+    useSyncExternalStore(subscribePreview, getPreviewVersion, getServerPreviewVersion);
     const group = getSectionGroup(name);
     return (_jsx(TemplateProvider, { value: { name, kind: 'group', resources: {}, sectionData }, children: _jsx(RenderSections, { template: group, scope: { kind: 'group', name } }) }));
 }

package/dist/react/engine/store.d.ts

@@ -49,6 +49,12 @@ export interface InstallThemeOptions {
 }
 interface ThemeStore extends InstallThemeOptions {
 }
+export declare function subscribePreview(listener: () => void): () => void;
+export declare function getPreviewVersion(): number;
+export declare function getServerPreviewVersion(): number;
+export declare function hasThemePreview(): boolean;
+/** Browser-only overlay; the installed schema and SSR state remain untouched. */
+export declare function setThemePreview(owner: ThemeStore, schema: ThemeSchema | null): void;
 export declare function installTheme(options: InstallThemeOptions): void;
 /** Monotonic install counter — lets derived caches detect re-installs. */
 export declare function getThemeStoreVersion(): number;

package/dist/react/engine/store.js

@@ -1,5 +1,34 @@
 let store = null;
 let version = 0;
+let preview = null;
+let previewVersion = 0;
+const previewListeners = new Set();
+export function subscribePreview(listener) {
+    previewListeners.add(listener);
+    return () => {
+        previewListeners.delete(listener);
+    };
+}
+export function getPreviewVersion() {
+    return previewVersion;
+}
+export function getServerPreviewVersion() {
+    return 0;
+}
+export function hasThemePreview() {
+    return (typeof window !== 'undefined' && preview !== null && preview.owner === store);
+}
+/** Browser-only overlay; the installed schema and SSR state remain untouched. */
+export function setThemePreview(owner, schema) {
+    if (typeof window === 'undefined' || owner !== store)
+        return;
+    preview = schema
+        ? { owner, value: { ...owner, schema, settingsOverride: undefined } }
+        : null;
+    previewVersion++;
+    for (const listener of previewListeners)
+        listener();
+}
 export function installTheme(options) {
     store = options;
     // Bump so derived caches (resolved settings) recompute — multi-tenant
@@ -8,14 +37,16 @@ export function installTheme(options) {
 }
 /** Monotonic install counter — lets derived caches detect re-installs. */
 export function getThemeStoreVersion() {
-    return version;
+    return version + (typeof window === 'undefined' ? 0 : previewVersion);
 }
 export function getThemeStore() {
     if (!store) {
-        throw new Error('[storefront-kit] installTheme() has not been called. Import your app\'s ' +
+        throw new Error("[storefront-kit] installTheme() has not been called. Import your app's " +
             'theme-setup module (which calls installTheme) before rendering.');
     }
-    return store;
+    return typeof window !== 'undefined' && preview?.owner === store
+        ? preview.value
+        : store;
 }
 /** Look up a page template ("index", "product", "customers/login"…). */
 export function getTemplate(name) {

package/dist/react/useEditorTemplate.d.ts

@@ -1,8 +1,14 @@
 import type { TemplateData } from "../schemas/data";
 import type { ThemeEditorManifest } from "../schemas/manifest";
+import type { PreviewContext } from "../schemas/bridge";
+import type { EditorDocuments } from "../editor/bootstrap";
 type Options = {
     origins: readonly string[];
     loadManifest: () => Promise<ThemeEditorManifest>;
+    /** Authoritative, repository-relative merchant data targets. */
+    paths: EditorDocuments;
+    /** Real route targets keyed by template name. */
+    previews: Record<string, PreviewContext>;
 };
 /** No editor code or schema is fetched outside an explicitly allowed preview. */
 export declare function useEditorTemplate(name: string, options: Options): TemplateData | null;

package/dist/react/useEditorTemplate.js

@@ -1,5 +1,6 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
+import { getThemeStore, setThemePreview } from "./engine/store";
 /** No editor code or schema is fetched outside an explicitly allowed preview. */
 export function useEditorTemplate(name, options) {
     const [draft, setDraft] = useState(null);
@@ -20,18 +21,77 @@ export function useEditorTemplate(name, options) {
         if (!options.origins.includes(parentOrigin))
             return;
         let disposed = false;
-        void Promise.all([import("../editor/frame"), options.loadManifest()])
-            .then(([bridge, manifest]) => {
+        const owner = getThemeStore();
+        void Promise.all([
+            import("../editor/frame"),
+            options.loadManifest(),
+            import("../editor/bootstrap"),
+            import("../editor/draft"),
+        ])
+            .then(([bridge, manifest, bootstrapModule, draftModule]) => {
             if (disposed)
                 return;
+            const settings = owner.schema.settingsData;
+            const current = typeof settings.current === "string"
+                ? (settings.presets?.[settings.current] ?? {})
+                : settings.current;
+            const schema = {
+                ...owner.schema,
+                settingsData: {
+                    ...settings,
+                    current: { ...current, ...owner.settingsOverride },
+                },
+            };
+            const previews = { ...options.previews };
+            // The currently rendered route is also a verified context, including locale.
+            const url = new URL(window.location.href);
+            url.searchParams.delete("zalify-editor");
+            const kind = name.split(".")[0];
+            const resourceType = ([
+                "index",
+                "product",
+                "collection",
+                "page",
+                "blog",
+                "article",
+                "cart",
+                "search",
+                "list-collections",
+                "404",
+            ].includes(kind)
+                ? kind
+                : "page");
+            previews[name] = {
+                ...previews[name],
+                id: name,
+                title: previews[name]?.title ?? name,
+                resourceType,
+                url: url.pathname + url.search,
+            };
+            const bootstrap = bootstrapModule.createEditorBootstrap({
+                schema,
+                manifest,
+                paths: options.paths,
+                previews,
+            });
+            const draft = draftModule.createEditorDraft(schema);
             controller.current = bridge.mountFrameBridge({
                 editorOrigin: parentOrigin,
                 templateName: name,
                 hash: manifest.hash,
                 getManifest: () => manifest,
+                capabilities: [
+                    "editor-bootstrap-v1",
+                    "apply-template-v1",
+                    "apply-groups-v1",
+                    "apply-settings-v1",
+                    "preview-navigation-v1",
+                ],
+                getBootstrap: () => bootstrap,
                 applyTemplate(payload) {
                     if (payload.templateName !== name)
                         return false;
+                    setThemePreview(owner, { ...schema, ...draft.apply(payload) });
                     setDraft({ name, template: payload.template });
                     return true;
                 },
@@ -44,6 +104,7 @@ export function useEditorTemplate(name, options) {
             disposed = true;
             controller.current?.unmount();
             controller.current = null;
+            setThemePreview(owner, null);
         };
     }, [name, options]);
     useEffect(() => {

package/dist/schemas/bridge.d.ts

@@ -121,6 +121,7 @@ export type FrameMessage = BridgeEnvelope<'bridge:ready', {
     deltaX: number;
     deltaY: number;
     ctrlKey: boolean;
+    shiftKey?: boolean;
     clientX: number;
     clientY: number;
 }> | BridgeEnvelope<'navigation', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zalify/storefront-kit",
-  "version": "0.1.13",
+  "version": "0.3.0",
   "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",

package/src/editor/bootstrap.ts

@@ -0,0 +1,61 @@
+import type {EditorBootstrap, PreviewContext} from '../schemas/bridge.ts';
+import type {ThemeEditorManifest} from '../schemas/manifest.ts';
+import type {DraftSchema} from './draft.ts';
+
+export interface EditorDocuments {
+  templates: string;
+  groups: string;
+  settings: string;
+}
+
+/** Only list routes the app can actually render; never fabricate handles. */
+export function createEditorBootstrap(options: {
+  schema: DraftSchema;
+  manifest: ThemeEditorManifest;
+  paths: EditorDocuments;
+  previews: Record<string, PreviewContext>;
+}): EditorBootstrap {
+  const {schema, manifest, paths, previews} = options;
+  for (const path of [paths.templates, paths.groups, paths.settings]) {
+    if (
+      !path ||
+      path.startsWith('/') ||
+      path.includes('\\') ||
+      path.split('/').some((p) => p === '..' || p === '.')
+    ) {
+      throw new Error('Editor write paths must be repository-relative');
+    }
+  }
+  const templates = {
+    ...schema.templates,
+    ...Object.fromEntries(
+      Object.entries(schema.customerTemplates ?? {}).map(([name, data]) => [
+        `customers/${name}`,
+        data,
+      ]),
+    ),
+  };
+  return {
+    revision: manifest.hash,
+    manifest,
+    templates: Object.entries(templates)
+      .filter(([name]) => previews[name])
+      .map(([name, data]) => ({
+        name,
+        data: structuredClone(data),
+        writePath: `${paths.templates}/${name}.json`,
+        preview: previews[name],
+      })),
+    groups: Object.entries(schema.sectionGroups).map(([name, data]) => ({
+      name,
+      data: structuredClone(data),
+      writePath: `${paths.groups}/${name}.json`,
+    })),
+    settings: {
+      writePath: paths.settings,
+      schema: manifest.settingsSchema,
+      resolvedData: structuredClone(schema.settingsData),
+    },
+    previewContexts: {},
+  };
+}

package/src/editor/draft.ts

@@ -0,0 +1,54 @@
+import type {
+  SectionGroupData,
+  SettingsData,
+  TemplateData,
+} from '../schemas/data.ts';
+
+export interface DraftSchema {
+  templates: Record<string, TemplateData>;
+  customerTemplates?: Record<string, TemplateData>;
+  sectionGroups: Record<string, SectionGroupData>;
+  settingsData: SettingsData;
+}
+
+export interface PreviewApply {
+  templateName: string;
+  template: TemplateData;
+  groups?: Record<string, SectionGroupData>;
+  settingsData?: SettingsData;
+}
+
+/** Immutable, per-preview data. Never writes into an installed source schema. */
+export function createEditorDraft(source: DraftSchema) {
+  let current = structuredClone(source);
+  return {
+    apply(payload: PreviewApply): DraftSchema {
+      const template = structuredClone(payload.template);
+      const customer = payload.templateName.startsWith('customers/');
+      current = {
+        ...current,
+        ...(customer
+          ? {
+              customerTemplates: {
+                ...current.customerTemplates,
+                [payload.templateName.slice(10)]: template,
+              },
+            }
+          : {
+              templates: {
+                ...current.templates,
+                [payload.templateName]: template,
+              },
+            }),
+        sectionGroups: {
+          ...current.sectionGroups,
+          ...structuredClone(payload.groups ?? {}),
+        },
+        settingsData: structuredClone(
+          payload.settingsData ?? current.settingsData,
+        ),
+      };
+      return current;
+    },
+  };
+}

package/src/editor/frame.ts

@@ -6,11 +6,20 @@
  * sync — and hands app-specific concerns (template hot-apply, device
  * emulation) to callbacks.
  *
- * Editor mode neutralizes the page's own interactivity: clicks,
- * double/middle clicks, form submits, and context menus are captured
- * at the document root and suppressed, so selecting a node never
- * navigates a link, opens a drawer, or submits a form — a click is
- * only ever a selection. (Hover stays live for highlight tracking.)
+ * Editor mode keeps the page interactive — buttons, drawers, variant
+ * pickers, forms all work, so any state can be previewed — while the
+ * bridge takes over two things a click must never do on its own:
+ *
+ * - Leave the storefront. Same-origin links and GET forms are turned
+ *   into `location.replace` navigations that keep the editor-mode
+ *   query param (so the next document mounts the bridge again) and
+ *   add no browser-history entries; off-site links, new-tab links,
+ *   modifier-clicks and off-site paths (checkout, account) are blocked.
+ * - Escape selection: every click still selects the enclosing block.
+ *
+ * Double/middle clicks and context menus stay suppressed. Each mount
+ * reports its URL as a `navigation`, which is how the editor follows
+ * in-preview browsing.
  *
  * Security: the first `bridge:init` pins the editor origin; every
  * later message must match it, and nothing but `bridge:ready` is ever
@@ -102,10 +111,61 @@ function visibleRectOf(element: Element): DOMRectLike | null {
 }
 
 function pathNodeOf(target: EventTarget | null): HTMLElement | null {
-  if (!(target instanceof Element)) return null;
+  if (!isElement(target)) return null;
   return target.closest<HTMLElement>(`[${DATA_PATH_ATTR}]`);
 }
 
+function isElement(target: EventTarget | null): target is Element {
+  return (
+    typeof Element !== 'undefined' && target instanceof Element
+  );
+}
+
+/** Storefront paths that hand off to Shopify-hosted pages; never previewable. */
+const OFF_SITE_PATHS = [/^\/checkout(?:s)?(?:\/|$)/, /^\/cart\/c\//, /^\/account(?:\/|$)/, /^\/admin(?:\/|$)/];
+
+export type NavigationDecision =
+  | {kind: 'allow'; url: string}
+  | {kind: 'block'; reason: 'off-origin' | 'new-tab' | 'modifier' | 'off-site' | 'download'};
+
+/**
+ * Where a click on `anchor` may take the preview. Same-origin page loads are
+ * allowed (with the editor-mode param re-attached); anything that would leave
+ * the sandbox or open another window is blocked.
+ */
+export function decideNavigation(
+  href: string,
+  base: string,
+  flags: {target?: string | null; download?: boolean; modifier?: boolean},
+): NavigationDecision {
+  if (flags.modifier) return {kind: 'block', reason: 'modifier'};
+  if (flags.download) return {kind: 'block', reason: 'download'};
+  if (flags.target && flags.target !== '_self') return {kind: 'block', reason: 'new-tab'};
+  let url: URL;
+  try {
+    url = new URL(href, base);
+  } catch {
+    return {kind: 'block', reason: 'off-origin'};
+  }
+  if (url.origin !== new URL(base).origin) return {kind: 'block', reason: 'off-origin'};
+  if (OFF_SITE_PATHS.some((pattern) => pattern.test(url.pathname))) {
+    return {kind: 'block', reason: 'off-site'};
+  }
+  url.searchParams.set(EDITOR_MODE_PARAM, '1');
+  return {kind: 'allow', url: url.toString()};
+}
+
+/** The storefront path the editor should remember: no editor-mode param. */
+export function previewPathOf(href: string): string {
+  const url = new URL(href);
+  url.searchParams.delete(EDITOR_MODE_PARAM);
+  return url.pathname + url.search;
+}
+
+function anchorOf(target: EventTarget | null): HTMLAnchorElement | null {
+  return isElement(target) ? target.closest<HTMLAnchorElement>('a[href]') : null;
+}
+
 export interface FrameBridgeController {
   unmount: () => void;
   /** Report that a persisted write round-tripped (HMR applied `hash`). */
@@ -152,6 +212,16 @@ export function mountFrameBridge(
     );
   };
 
+  // Every mount tells the editor where the preview is now: after an
+  // in-preview link or search the host would otherwise keep showing the
+  // page it originally asked for. Sent once the editor origin is pinned.
+  const reportNavigation = (): void => {
+    post({
+      type: 'navigation',
+      payload: {templateName: options.templateName, url: previewPathOf(win.location.href)},
+    });
+  };
+
   const setUnique = (attr: string, path: string | null): void => {
     for (const node of doc.querySelectorAll(`[${attr}]`)) {
       node.removeAttribute(attr);
@@ -243,6 +313,7 @@ export function mountFrameBridge(
         queueMicrotask(() => {
           lastHeight = 0;
           measure();
+          reportNavigation();
         });
         break;
       }
@@ -316,19 +387,41 @@ export function mountFrameBridge(
 
   const handleClick = (event: MouseEvent): void => {
     const node = pathNodeOf(event.target);
-    // Editor mode owns clicks: no navigation, no dialogs.
+    if (node) {
+      const path = node.getAttribute(DATA_PATH_ATTR)!;
+      setSelection(path);
+      post({type: 'block:clicked', payload: {path, rect: rectOf(node)}});
+    }
+    // The page keeps its interactivity; only navigation is policed.
+    const anchor = anchorOf(event.target);
+    if (!anchor) return;
+    const decision = decideNavigation(anchor.getAttribute('href') ?? '', win.location.href, {
+      target: anchor.getAttribute('target'),
+      download: anchor.hasAttribute('download'),
+      modifier: event.metaKey || event.ctrlKey || event.shiftKey || event.altKey,
+    });
     event.preventDefault();
-    event.stopPropagation();
-    if (!node) return;
-    const path = node.getAttribute(DATA_PATH_ATTR)!;
-    setSelection(path);
-    post({type: 'block:clicked', payload: {path, rect: rectOf(node)}});
+    if (decision.kind === 'allow') win.location.replace(decision.url);
+  };
+
+  const handleSubmit = (event: Event): void => {
+    const form = event.target;
+    if (!(form instanceof win.HTMLFormElement)) return;
+    if ((form.getAttribute('method') ?? 'get').toLowerCase() !== 'get') return;
+    // A GET form is a navigation: route it like a link so the editor-mode
+    // param survives and history stays clean. POST forms run as they are.
+    const action = new URL(form.getAttribute('action') || win.location.pathname, win.location.href);
+    for (const [key, value] of new FormData(form)) {
+      if (typeof value === 'string') action.searchParams.set(key, value);
+    }
+    const decision = decideNavigation(action.toString(), win.location.href, {});
+    event.preventDefault();
+    if (decision.kind === 'allow') win.location.replace(decision.url);
   };
 
   const handleWheel = (event: WheelEvent): void => {
-    // Both previews are fixed device viewports. Let ordinary wheel gestures
-    // scroll the storefront; pinch/Ctrl+wheel remains a canvas zoom gesture.
-    if (!event.ctrlKey) return;
+    // Cross-origin iframe wheel events never reach the host canvas. Forward
+    // wheel gestures so the editor can pan its canvas.
     event.preventDefault();
     post({
       type: 'viewport:wheel',
@@ -336,6 +429,7 @@ export function mountFrameBridge(
         deltaX: event.deltaX,
         deltaY: event.deltaY,
         ctrlKey: event.ctrlKey,
+        shiftKey: event.shiftKey,
         clientX: event.clientX,
         clientY: event.clientY,
       },
@@ -347,12 +441,7 @@ export function mountFrameBridge(
     event.preventDefault();
     event.stopPropagation();
   };
-  const SUPPRESSED_EVENTS = [
-    'dblclick',
-    'auxclick',
-    'submit',
-    'contextmenu',
-  ] as const;
+  const SUPPRESSED_EVENTS = ['dblclick', 'auxclick', 'contextmenu'] as const;
 
   const handleMouseMove = (() => {
     let lastPath: string | null = null;
@@ -390,6 +479,7 @@ export function mountFrameBridge(
   win.addEventListener('resize', syncSelectionHighlight);
   win.addEventListener('scroll', syncSelectionHighlight, true);
   doc.addEventListener('click', handleClick, true);
+  doc.addEventListener('submit', handleSubmit, true);
   doc.addEventListener('mousemove', handleMouseMove, true);
   doc.addEventListener('wheel', handleWheel, {capture: true, passive: false});
   for (const type of SUPPRESSED_EVENTS) {
@@ -413,6 +503,7 @@ export function mountFrameBridge(
       win.removeEventListener('resize', syncSelectionHighlight);
       win.removeEventListener('scroll', syncSelectionHighlight, true);
       doc.removeEventListener('click', handleClick, true);
+      doc.removeEventListener('submit', handleSubmit, true);
       doc.removeEventListener('mousemove', handleMouseMove, true);
       doc.removeEventListener('wheel', handleWheel, true);
       for (const type of SUPPRESSED_EVENTS) {

package/src/react/engine/CssVariables.tsx

@@ -7,9 +7,15 @@
  * Static token scales (spacing, type, radii) live in the app's
  * critical.css (synced from the theme).
  */
-import {useMemo} from 'react';
+import {useMemo, useSyncExternalStore} from 'react';
 import {colorSchemes, themeSettings} from './settings';
-import {getThemeStoreVersion} from './store';
+import {
+  getThemeStoreVersion,
+  subscribePreview,
+  getPreviewVersion,
+  getServerPreviewVersion,
+  hasThemePreview,
+} from './store';
 import {
   googleFontsHrefsFromSettings,
   parseFontHandle,
@@ -35,7 +41,9 @@ function buildCss(): string {
   const lines: string[] = [];
   lines.push(':root {');
   lines.push(`  --font-body--family: ${bodyFamily};`);
-  lines.push(`  --font-body--style: ${bodyGoogle ? 'normal' : bodyFont.style};`);
+  lines.push(
+    `  --font-body--style: ${bodyGoogle ? 'normal' : bodyFont.style};`,
+  );
   lines.push(`  --font-body--weight: ${bodyGoogle ? 400 : bodyFont.weight};`);
   lines.push(`  --font-heading--family: ${headingFamily};`);
   if (monoGoogle) {
@@ -52,15 +60,23 @@ function buildCss(): string {
   }
   lines.push(`  --page-width: ${s.max_page_width ?? '90rem'};`);
   lines.push(`  --page-margin: ${s.min_page_margin ?? 20}px;`);
-  lines.push(`  --style-border-radius-inputs: ${s.input_corner_radius ?? 0}px;`);
-  lines.push(`  --style-border-radius-buttons: ${s.button_corner_radius ?? 0}px;`);
+  lines.push(
+    `  --style-border-radius-inputs: ${s.input_corner_radius ?? 0}px;`,
+  );
+  lines.push(
+    `  --style-border-radius-buttons: ${s.button_corner_radius ?? 0}px;`,
+  );
   lines.push(`  --style-border-radius-cards: ${s.card_corner_radius ?? 0}px;`);
-  lines.push(`  --style-badge-background: ${s.card_badge_background ?? '#F9EDEF'};`);
+  lines.push(
+    `  --style-badge-background: ${s.card_badge_background ?? '#F9EDEF'};`,
+  );
   lines.push(`  --style-badge-text: ${s.card_badge_text ?? '#1A1A1A'};`);
   lines.push(
     `  --style-badge-sale-background: ${s.card_badge_sale_background ?? '#F26B8A'};`,
   );
-  lines.push(`  --style-badge-sale-text: ${s.card_badge_sale_text ?? '#FFFFFF'};`);
+  lines.push(
+    `  --style-badge-sale-text: ${s.card_badge_sale_text ?? '#FFFFFF'};`,
+  );
   lines.push(
     `  --style-badge-1-background: ${s.badge_style_1_background ?? '#1A1A1A'};`,
   );
@@ -137,6 +153,11 @@ export function CssVariables({
   nonce,
   fonts,
 }: {nonce?: string; fonts?: ResolvedGoogleFontCss | null} = {}) {
+  useSyncExternalStore(
+    subscribePreview,
+    getPreviewVersion,
+    getServerPreviewVersion,
+  );
   const themeVersion = getThemeStoreVersion();
   const {css, links} = useMemo(
     () => ({css: buildCss(), links: googleFontsHrefs()}),
@@ -147,7 +168,7 @@ export function CssVariables({
   // inlined and the latin woff2 files preloaded, so the font downloads
   // with the HTML and usually beats first paint — no async stylesheet,
   // no FOUT, no request to fonts.googleapis.com at all.
-  if (fonts) {
+  if (fonts && !hasThemePreview()) {
     return (
       <>
         <link
@@ -182,13 +203,16 @@ export function CssVariables({
       {links.map((href) => (
         <link
           key={href}
-          rel="preload"
+          rel={hasThemePreview() ? 'stylesheet' : 'preload'}
           as="style"
           href={href}
           data-zfy-font-css=""
         />
       ))}
-      <script nonce={nonce} dangerouslySetInnerHTML={{__html: FONT_CSS_LOADER}} />
+      <script
+        nonce={nonce}
+        dangerouslySetInnerHTML={{__html: FONT_CSS_LOADER}}
+      />
       <noscript>
         {links.map((href) => (
           <link key={href} rel="stylesheet" href={href} />

package/src/react/engine/render.tsx

@@ -15,7 +15,15 @@
  * emitted unconditionally so server and client markup stay identical.
  */
 import {formatThemePath, DATA_PATH_ATTR} from '../../schemas/index.ts';
-import {getSectionGroup, getTemplate, getThemeStore} from './store';
+import {
+  getSectionGroup,
+  getTemplate,
+  getThemeStore,
+  subscribePreview,
+  getPreviewVersion,
+  getServerPreviewVersion,
+} from './store';
+import {useSyncExternalStore} from 'react';
 import {SectionProvider, TemplateProvider} from './context';
 import type {BlockData, SectionData, TemplateData} from './types';
 
@@ -181,6 +189,11 @@ export function SectionGroup({
   name: string;
   sectionData?: Record<string, unknown>;
 }) {
+  useSyncExternalStore(
+    subscribePreview,
+    getPreviewVersion,
+    getServerPreviewVersion,
+  );
   const group = getSectionGroup(name);
   return (
     <TemplateProvider value={{name, kind: 'group', resources: {}, sectionData}}>

package/src/react/engine/store.ts

@@ -26,7 +26,10 @@ export interface ThemeSchema {
   /** sections/*-group.json keyed by file name ("header-group"…). */
   sectionGroups: Record<string, SectionGroupData>;
   /** config/settings_schema.json. */
-  settingsSchema: Array<{name: string; settings?: Array<Record<string, unknown>>}>;
+  settingsSchema: Array<{
+    name: string;
+    settings?: Array<Record<string, unknown>>;
+  }>;
   /** config/settings_data.json. */
   settingsData: {
     current: string | Record<string, unknown>;
@@ -57,6 +60,40 @@ interface ThemeStore extends InstallThemeOptions {}
 
 let store: ThemeStore | null = null;
 let version = 0;
+let preview: {owner: ThemeStore; value: ThemeStore} | null = null;
+let previewVersion = 0;
+const previewListeners = new Set<() => void>();
+
+export function subscribePreview(listener: () => void): () => void {
+  previewListeners.add(listener);
+  return () => {
+    previewListeners.delete(listener);
+  };
+}
+export function getPreviewVersion(): number {
+  return previewVersion;
+}
+export function getServerPreviewVersion(): number {
+  return 0;
+}
+export function hasThemePreview(): boolean {
+  return (
+    typeof window !== 'undefined' && preview !== null && preview.owner === store
+  );
+}
+
+/** Browser-only overlay; the installed schema and SSR state remain untouched. */
+export function setThemePreview(
+  owner: ThemeStore,
+  schema: ThemeSchema | null,
+): void {
+  if (typeof window === 'undefined' || owner !== store) return;
+  preview = schema
+    ? {owner, value: {...owner, schema, settingsOverride: undefined}}
+    : null;
+  previewVersion++;
+  for (const listener of previewListeners) listener();
+}
 
 export function installTheme(options: InstallThemeOptions): void {
   store = options;
@@ -67,17 +104,19 @@ export function installTheme(options: InstallThemeOptions): void {
 
 /** Monotonic install counter — lets derived caches detect re-installs. */
 export function getThemeStoreVersion(): number {
-  return version;
+  return version + (typeof window === 'undefined' ? 0 : previewVersion);
 }
 
 export function getThemeStore(): ThemeStore {
   if (!store) {
     throw new Error(
-      '[storefront-kit] installTheme() has not been called. Import your app\'s ' +
+      "[storefront-kit] installTheme() has not been called. Import your app's " +
         'theme-setup module (which calls installTheme) before rendering.',
     );
   }
-  return store;
+  return typeof window !== 'undefined' && preview?.owner === store
+    ? preview.value
+    : store;
 }
 
 /** Look up a page template ("index", "product", "customers/login"…). */

package/src/react/useEditorTemplate.ts

@@ -3,10 +3,17 @@ import { useEffect, useRef, useState } from "react";
 import type { TemplateData } from "../schemas/data";
 import type { ThemeEditorManifest } from "../schemas/manifest";
 import type { FrameBridgeController } from "../editor/frame";
+import type { PreviewContext } from "../schemas/bridge";
+import type { EditorDocuments } from "../editor/bootstrap";
+import { getThemeStore, setThemePreview } from "./engine/store";
 
 type Options = {
   origins: readonly string[];
   loadManifest: () => Promise<ThemeEditorManifest>;
+  /** Authoritative, repository-relative merchant data targets. */
+  paths: EditorDocuments;
+  /** Real route targets keyed by template name. */
+  previews: Record<string, PreviewContext>;
 };
 
 /** No editor code or schema is fetched outside an explicitly allowed preview. */
@@ -35,16 +42,78 @@ export function useEditorTemplate(
     }
     if (!options.origins.includes(parentOrigin)) return;
     let disposed = false;
-    void Promise.all([import("../editor/frame"), options.loadManifest()])
-      .then(([bridge, manifest]) => {
+    const owner = getThemeStore();
+    void Promise.all([
+      import("../editor/frame"),
+      options.loadManifest(),
+      import("../editor/bootstrap"),
+      import("../editor/draft"),
+    ])
+      .then(([bridge, manifest, bootstrapModule, draftModule]) => {
         if (disposed) return;
+        const settings = owner.schema.settingsData;
+        const current =
+          typeof settings.current === "string"
+            ? (settings.presets?.[settings.current] ?? {})
+            : settings.current;
+        const schema = {
+          ...owner.schema,
+          settingsData: {
+            ...settings,
+            current: { ...current, ...owner.settingsOverride },
+          },
+        };
+        const previews = { ...options.previews };
+        // The currently rendered route is also a verified context, including locale.
+        const url = new URL(window.location.href);
+        url.searchParams.delete("zalify-editor");
+        const kind = name.split(".")[0];
+        const resourceType = (
+          [
+            "index",
+            "product",
+            "collection",
+            "page",
+            "blog",
+            "article",
+            "cart",
+            "search",
+            "list-collections",
+            "404",
+          ].includes(kind)
+            ? kind
+            : "page"
+        ) as PreviewContext["resourceType"];
+        previews[name] = {
+          ...previews[name],
+          id: name,
+          title: previews[name]?.title ?? name,
+          resourceType,
+          url: url.pathname + url.search,
+        };
+        const bootstrap = bootstrapModule.createEditorBootstrap({
+          schema,
+          manifest,
+          paths: options.paths,
+          previews,
+        });
+        const draft = draftModule.createEditorDraft(schema);
         controller.current = bridge.mountFrameBridge({
           editorOrigin: parentOrigin,
           templateName: name,
           hash: manifest.hash,
           getManifest: () => manifest,
+          capabilities: [
+            "editor-bootstrap-v1",
+            "apply-template-v1",
+            "apply-groups-v1",
+            "apply-settings-v1",
+            "preview-navigation-v1",
+          ],
+          getBootstrap: () => bootstrap,
           applyTemplate(payload) {
             if (payload.templateName !== name) return false;
+            setThemePreview(owner, { ...schema, ...draft.apply(payload) });
             setDraft({ name, template: payload.template });
             return true;
           },
@@ -57,6 +126,7 @@ export function useEditorTemplate(
       disposed = true;
       controller.current?.unmount();
       controller.current = null;
+      setThemePreview(owner, null);
     };
   }, [name, options]);
   useEffect(() => {

package/src/schemas/bridge.ts

@@ -185,6 +185,7 @@ export type FrameMessage =
         deltaX: number;
         deltaY: number;
         ctrlKey: boolean;
+        shiftKey?: boolean;
         clientX: number;
         clientY: number;
       }