storefront-layouts 1.0.0

package/dist/preview/canvas/PreviewCanvasStyles.d.ts

@@ -0,0 +1,4 @@
+/** Section highlight styles shared by iframe preview and inline mobile canvas. */
+export declare const PREVIEW_CANVAS_STYLES = "\n  [data-section] {\n    position: relative;\n    cursor: pointer !important;\n  }\n  [data-section-hover=\"true\"]:not([data-section-selected=\"true\"])::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border: 1px dashed rgba(68, 0, 102, 0.35);\n    pointer-events: none;\n    z-index: 50;\n    background: rgba(68, 0, 102, 0.02);\n    border-radius: 2px;\n  }\n  [data-section-selected=\"true\"]::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border: 1px solid #3858e9;\n    pointer-events: none;\n    z-index: 51;\n    background: rgba(56, 88, 233, 0.04);\n    box-shadow: inset 0 0 0 1px rgba(56, 88, 233, 0.12);\n    border-radius: 2px;\n  }\n  [data-section-selected=\"true\"]::before {\n    content: attr(data-section);\n    position: absolute;\n    top: -24px;\n    left: 0;\n    background: #1e1e1e;\n    color: #f0f0f0;\n    font-size: 11px;\n    font-weight: 600;\n    padding: 2px 8px;\n    border-radius: 2px;\n    text-transform: none;\n    z-index: 52;\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n";
+export declare function PreviewCanvasStyles(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PreviewCanvasStyles.d.ts.map

package/dist/preview/canvas/PreviewCanvasStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewCanvasStyles.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/PreviewCanvasStyles.tsx"],"names":[],"mappings":"AAEA,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,0mCA4CjC,CAAC;AAEF,wBAAgB,mBAAmB,4CAElC"}

package/dist/preview/canvas/PreviewCanvasStyles.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Section highlight styles shared by iframe preview and inline mobile canvas. */
+export const PREVIEW_CANVAS_STYLES = `
+  [data-section] {
+    position: relative;
+    cursor: pointer !important;
+  }
+  [data-section-hover="true"]:not([data-section-selected="true"])::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 1px dashed rgba(68, 0, 102, 0.35);
+    pointer-events: none;
+    z-index: 50;
+    background: rgba(68, 0, 102, 0.02);
+    border-radius: 2px;
+  }
+  [data-section-selected="true"]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 1px solid #3858e9;
+    pointer-events: none;
+    z-index: 51;
+    background: rgba(56, 88, 233, 0.04);
+    box-shadow: inset 0 0 0 1px rgba(56, 88, 233, 0.12);
+    border-radius: 2px;
+  }
+  [data-section-selected="true"]::before {
+    content: attr(data-section);
+    position: absolute;
+    top: -24px;
+    left: 0;
+    background: #1e1e1e;
+    color: #f0f0f0;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 2px;
+    text-transform: none;
+    z-index: 52;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+export function PreviewCanvasStyles() {
+    return _jsx("style", { dangerouslySetInnerHTML: { __html: PREVIEW_CANVAS_STYLES } });
+}

package/dist/preview/canvas/extract-editable-plain-text.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Extract plain text from a contenteditable host while preserving intentional line breaks.
+ * `textContent` collapses `<br>` and block layout into spaces, which breaks multiline
+ * headings (e.g. booking hero titles with last-line emphasis).
+ */
+export declare function extractPlainTextPreservingLineBreaks(root: HTMLElement): string;
+/** Prefer innerText when available (maps layout breaks), with DOM walk fallback. */
+export declare function extractEditablePlainText(root: HTMLElement): string;
+/** Flatten decorated multiline markup to plain `\n` text before contenteditable. */
+export declare function flattenMultilineEditableElement(el: HTMLElement): void;
+//# sourceMappingURL=extract-editable-plain-text.d.ts.map

package/dist/preview/canvas/extract-editable-plain-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract-editable-plain-text.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/extract-editable-plain-text.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,oCAAoC,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CA2C9E;AAED,oFAAoF;AACpF,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAelE;AAED,oFAAoF;AACpF,wBAAgB,+BAA+B,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAIrE"}

package/dist/preview/canvas/extract-editable-plain-text.js

@@ -0,0 +1,65 @@
+/**
+ * Extract plain text from a contenteditable host while preserving intentional line breaks.
+ * `textContent` collapses `<br>` and block layout into spaces, which breaks multiline
+ * headings (e.g. booking hero titles with last-line emphasis).
+ */
+export function extractPlainTextPreservingLineBreaks(root) {
+    const chunks = [];
+    const pushNewline = () => {
+        if (chunks.length === 0 || !chunks[chunks.length - 1]?.endsWith('\n')) {
+            chunks.push('\n');
+        }
+    };
+    const walk = (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            chunks.push(node.textContent ?? '');
+            return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return;
+        const el = node;
+        const tag = el.tagName.toLowerCase();
+        if (tag === 'br') {
+            pushNewline();
+            return;
+        }
+        const isBlock = /^(p|div|h[1-6]|li|tr|section|article)$/i.test(tag);
+        if (isBlock)
+            pushNewline();
+        el.childNodes.forEach(walk);
+        if (isBlock)
+            pushNewline();
+    };
+    root.childNodes.forEach(walk);
+    return chunks
+        .join('')
+        .replace(/\r\n/g, '\n')
+        .replace(/^\n+/, '')
+        .replace(/\n{3,}/g, '\n\n')
+        .replace(/[ \t]+\n/g, '\n')
+        .replace(/\n[ \t]+/g, '\n')
+        .replace(/[ \t]{2,}/g, ' ')
+        .trimEnd();
+}
+/** Prefer innerText when available (maps layout breaks), with DOM walk fallback. */
+export function extractEditablePlainText(root) {
+    const isMultiline = root.getAttribute('data-payaza-multiline') === 'true' || root.querySelector('br') != null;
+    if (isMultiline) {
+        const walked = extractPlainTextPreservingLineBreaks(root);
+        if (walked.length > 0)
+            return walked;
+    }
+    if (typeof root.innerText === 'string' && root.innerText.length > 0) {
+        return root.innerText.replace(/\r\n/g, '\n').trimEnd();
+    }
+    const walked = extractPlainTextPreservingLineBreaks(root);
+    if (walked.length > 0)
+        return walked;
+    return (root.textContent ?? '').replace(/\r\n/g, '\n').trimEnd();
+}
+/** Flatten decorated multiline markup to plain `\n` text before contenteditable. */
+export function flattenMultilineEditableElement(el) {
+    const plain = extractPlainTextPreservingLineBreaks(el);
+    el.textContent = plain;
+    el.classList.add('whitespace-pre-line');
+}

package/dist/preview/canvas/field-key.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Encode/decode inline-edit targets: `hero|title` or `features|items|0|title` → sectionKey + path.
+ * Numeric segments stay as strings for updateOverlayData paths.
+ */
+export declare function encodePayazaFieldKey(sectionKey: string, fieldPathSegments: string[]): string;
+export type PayazaInlineBindingOptions = {
+    /** When `'inline'`, canvas commits sanitized HTML payloads */
+    rich?: 'inline' | false;
+    /** Multiline plain-text fields (booking hero/team titles) — flatten before contenteditable */
+    multiline?: boolean;
+};
+/**
+ * Props for `[data-payaza-edit]` bindings in layout components (preview only).
+ */
+export declare function payazaInlineBindingProps(isPreview: boolean, sectionKey: string, fieldPathSegments: string[], opts?: PayazaInlineBindingOptions): Record<string, string | undefined>;
+export declare function parsePayazaFieldKey(key: string): {
+    sectionKey: string;
+    fieldPath: string[];
+} | null;
+/**
+ * Props for `[data-payaza-rating]` bindings on star rating controls (preview only).
+ */
+export declare function payazaRatingBindingProps(isPreview: boolean, sectionKey: string, fieldPathSegments: string[]): Record<string, string | undefined>;
+/**
+ * Props for `[data-payaza-icon]` bindings on icon wrapper elements (preview only).
+ * Enables icon-level click selection and icon picker in the sidebar inspector.
+ */
+export declare function payazaIconBindingProps(isPreview: boolean, sectionKey: string, fieldPathSegments: string[]): Record<string, string | undefined>;
+/**
+ * Props for `[data-payaza-group]` bindings on group container divs (preview only).
+ * Enables group-level click selection in the canvas editor.
+ */
+export declare function payazaGroupBindingProps(isPreview: boolean, sectionKey: string, blockPath: string[]): Record<string, string | undefined>;
+//# sourceMappingURL=field-key.d.ts.map

package/dist/preview/canvas/field-key.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-key.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/field-key.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,GAAG,MAAM,CAE5F;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,wBAAgB,wBAAwB,CACtC,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,MAAM,EAClB,iBAAiB,EAAE,MAAM,EAAE,EAC3B,IAAI,CAAC,EAAE,0BAA0B,GAChC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAYpC;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,EAAE,CAAA;CAAE,GAAG,IAAI,CAInG;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CACtC,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,MAAM,EAClB,iBAAiB,EAAE,MAAM,EAAE,GAC1B,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAKpC;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,MAAM,EAClB,iBAAiB,EAAE,MAAM,EAAE,GAC1B,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAKpC;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EAAE,GAClB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAKpC"}

package/dist/preview/canvas/field-key.js

@@ -0,0 +1,62 @@
+/**
+ * Encode/decode inline-edit targets: `hero|title` or `features|items|0|title` → sectionKey + path.
+ * Numeric segments stay as strings for updateOverlayData paths.
+ */
+export function encodePayazaFieldKey(sectionKey, fieldPathSegments) {
+    return [sectionKey, ...fieldPathSegments].join('|');
+}
+/**
+ * Props for `[data-payaza-edit]` bindings in layout components (preview only).
+ */
+export function payazaInlineBindingProps(isPreview, sectionKey, fieldPathSegments, opts) {
+    if (!isPreview)
+        return {};
+    const out = {
+        'data-payaza-edit': encodePayazaFieldKey(sectionKey, fieldPathSegments),
+    };
+    if (opts?.rich === 'inline') {
+        out['data-payaza-rich'] = 'inline';
+    }
+    if (opts?.multiline) {
+        out['data-payaza-multiline'] = 'true';
+    }
+    return out;
+}
+export function parsePayazaFieldKey(key) {
+    const parts = key.split('|').map((p) => p.trim());
+    if (parts.length < 1 || !parts[0])
+        return null;
+    return { sectionKey: parts[0], fieldPath: parts.slice(1) };
+}
+/**
+ * Props for `[data-payaza-rating]` bindings on star rating controls (preview only).
+ */
+export function payazaRatingBindingProps(isPreview, sectionKey, fieldPathSegments) {
+    if (!isPreview)
+        return {};
+    return {
+        'data-payaza-rating': encodePayazaFieldKey(sectionKey, fieldPathSegments),
+    };
+}
+/**
+ * Props for `[data-payaza-icon]` bindings on icon wrapper elements (preview only).
+ * Enables icon-level click selection and icon picker in the sidebar inspector.
+ */
+export function payazaIconBindingProps(isPreview, sectionKey, fieldPathSegments) {
+    if (!isPreview)
+        return {};
+    return {
+        'data-payaza-icon': encodePayazaFieldKey(sectionKey, fieldPathSegments),
+    };
+}
+/**
+ * Props for `[data-payaza-group]` bindings on group container divs (preview only).
+ * Enables group-level click selection in the canvas editor.
+ */
+export function payazaGroupBindingProps(isPreview, sectionKey, blockPath) {
+    if (!isPreview)
+        return {};
+    return {
+        'data-payaza-group': encodePayazaFieldKey(sectionKey, blockPath),
+    };
+}

package/dist/preview/canvas/preview-editable-commit.util.d.ts

@@ -0,0 +1,3 @@
+/** Whether focusout on a canvas contenteditable should defer commit (handled elsewhere). */
+export declare function shouldDeferEditableFocusOutCommit(relatedTarget: EventTarget | null): boolean;
+//# sourceMappingURL=preview-editable-commit.util.d.ts.map

package/dist/preview/canvas/preview-editable-commit.util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-editable-commit.util.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/preview-editable-commit.util.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,wBAAgB,iCAAiC,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAM5F"}

package/dist/preview/canvas/preview-editable-commit.util.js

@@ -0,0 +1,11 @@
+/** Whether focusout on a canvas contenteditable should defer commit (handled elsewhere). */
+export function shouldDeferEditableFocusOutCommit(relatedTarget) {
+    if (!(relatedTarget instanceof HTMLElement))
+        return false;
+    if (relatedTarget.closest('[role="toolbar"]'))
+        return true;
+    // Another bound field: pointerdown will commit before selection moves.
+    if (relatedTarget.closest('[data-payaza-edit]'))
+        return true;
+    return false;
+}

package/dist/preview/canvas/preview-flush-await.d.ts

@@ -0,0 +1,6 @@
+/** Resolves when preview canvas acknowledges PREVIEW_FLUSH_EDITS (save/publish gate). */
+import { PREVIEW_FLUSH_ACK_TIMEOUT_MS } from './preview-flush-handle';
+export { PREVIEW_FLUSH_ACK_TIMEOUT_MS };
+export declare function awaitPreviewFlushAck(timeoutMs?: number): Promise<void>;
+export declare function resolvePreviewFlushAck(): void;
+//# sourceMappingURL=preview-flush-await.d.ts.map

package/dist/preview/canvas/preview-flush-await.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-flush-await.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/preview-flush-await.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,OAAO,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAItE,OAAO,EAAE,4BAA4B,EAAE,CAAC;AAExC,wBAAgB,oBAAoB,CAClC,SAAS,SAA+B,GACvC,OAAO,CAAC,IAAI,CAAC,CAef;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAE7C"}

package/dist/preview/canvas/preview-flush-await.js

@@ -0,0 +1,23 @@
+/** Resolves when preview canvas acknowledges PREVIEW_FLUSH_EDITS (save/publish gate). */
+import { PREVIEW_FLUSH_ACK_TIMEOUT_MS } from './preview-flush-handle.js';
+let pendingAckResolve = null;
+export { PREVIEW_FLUSH_ACK_TIMEOUT_MS };
+export function awaitPreviewFlushAck(timeoutMs = PREVIEW_FLUSH_ACK_TIMEOUT_MS) {
+    return new Promise((resolve) => {
+        if (pendingAckResolve) {
+            pendingAckResolve();
+        }
+        const timer = setTimeout(() => {
+            pendingAckResolve = null;
+            resolve();
+        }, timeoutMs);
+        pendingAckResolve = () => {
+            clearTimeout(timer);
+            pendingAckResolve = null;
+            resolve();
+        };
+    });
+}
+export function resolvePreviewFlushAck() {
+    pendingAckResolve?.();
+}

package/dist/preview/canvas/preview-flush-handle.d.ts

@@ -0,0 +1,13 @@
+/** Imperative flush surface for inline preview (save/publish without blur). */
+export interface PreviewFlushHandle {
+    /** Commit active contenteditable if any. Returns true when a commit ran. */
+    flushActiveEdits: () => boolean;
+}
+export interface IframePreviewFlushHandle {
+    /** Post FLUSH_EDITS into the preview iframe immediately (no React effect delay). */
+    flushEdits: () => void;
+}
+/** Default wait for preview FLUSH_EDITS_ACK during save/publish. */
+export declare const PREVIEW_FLUSH_ACK_TIMEOUT_MS = 400;
+export declare const PREVIEW_ACTIVE_EDITABLE_SELECTOR = "[data-payaza-edit][contenteditable=\"true\"]";
+//# sourceMappingURL=preview-flush-handle.d.ts.map

package/dist/preview/canvas/preview-flush-handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-flush-handle.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/preview-flush-handle.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,gBAAgB,EAAE,MAAM,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,wBAAwB;IACvC,oFAAoF;IACpF,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD,eAAO,MAAM,gCAAgC,iDACC,CAAC"}

package/dist/preview/canvas/preview-flush-handle.js

@@ -0,0 +1,3 @@
+/** Default wait for preview FLUSH_EDITS_ACK during save/publish. */
+export const PREVIEW_FLUSH_ACK_TIMEOUT_MS = 400;
+export const PREVIEW_ACTIVE_EDITABLE_SELECTOR = '[data-payaza-edit][contenteditable="true"]';

package/dist/preview/canvas/preview-isolation.d.ts

@@ -0,0 +1,9 @@
+export type PayazaPreviewContext = {
+    layoutId: string;
+    pageId: string;
+};
+export declare function previewCommitsMatchEditorContext(commit: PayazaPreviewContext & {
+    layoutId?: string;
+    pageId?: string;
+}, editor: PayazaPreviewContext): boolean;
+//# sourceMappingURL=preview-isolation.d.ts.map

package/dist/preview/canvas/preview-isolation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-isolation.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/preview-isolation.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,gCAAgC,CAC9C,MAAM,EAAE,oBAAoB,GAAG;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,EACrE,MAAM,EAAE,oBAAoB,GAC3B,OAAO,CAOT"}

package/dist/preview/canvas/preview-isolation.js

@@ -0,0 +1,10 @@
+import { normalizeEditorLayoutId } from '../../editor/document/layout-id.js';
+export function previewCommitsMatchEditorContext(commit, editor) {
+    const ca = normalizeEditorLayoutId(commit.layoutId ?? '');
+    const eb = normalizeEditorLayoutId(editor.layoutId ?? '');
+    if (!ca || !eb || ca !== eb)
+        return false;
+    const cp = String(commit.pageId ?? '').trim();
+    const ep = String(editor.pageId ?? '').trim();
+    return cp.length > 0 && ep.length > 0 && cp === ep;
+}

package/dist/preview/canvas/preview-messages.d.ts

@@ -0,0 +1,65 @@
+/** postMessage types between preview iframe and parent editor */
+import type { PayazaRichTextStored } from '../../lib/rich-html';
+export declare const PREVIEW_MSG: {
+    readonly FIELD_COMMIT: "PREVIEW_FIELD_COMMIT";
+    readonly IMAGE_ACTIVATE: "PREVIEW_IMAGE_ACTIVATE";
+    readonly SECTION_REORDER: "PREVIEW_SECTION_REORDER";
+    readonly CONTEXT: "PREVIEW_CONTEXT";
+    /** Element-level focus (canvas → sidebar / breadcrumb) */
+    readonly ELEMENT_FOCUS: "PREVIEW_ELEMENT_FOCUS";
+    /** Parent → iframe: highlight a specific field element (triggered by List View click) */
+    readonly FIELD_SELECTED_SYNC: "PREVIEW_FIELD_SELECTED_SYNC";
+    /** Parent → iframe: sync hero carousel to active slide index */
+    readonly SLIDE_INDEX_SYNC: "PREVIEW_SLIDE_INDEX_SYNC";
+    /** Parent → iframe: commit any in-flight contenteditable before navigation */
+    readonly FLUSH_EDITS: "PREVIEW_FLUSH_EDITS";
+    /** iframe/inline → parent: flush completed (with or without active editor) */
+    readonly FLUSH_EDITS_ACK: "PREVIEW_FLUSH_EDITS_ACK";
+};
+export type PreviewSlideIndexSyncPayload = {
+    type: typeof PREVIEW_MSG.SLIDE_INDEX_SYNC;
+    sectionKey: string;
+    arrayField: string;
+    index: number;
+};
+export type PreviewFlushEditsPayload = {
+    type: typeof PREVIEW_MSG.FLUSH_EDITS;
+};
+export type PreviewFlushEditsAckPayload = {
+    type: typeof PREVIEW_MSG.FLUSH_EDITS_ACK;
+};
+export type PreviewFieldCommitPayload = {
+    type: typeof PREVIEW_MSG.FIELD_COMMIT;
+    layoutId: string;
+    pageId: string;
+    sectionKey: string;
+    fieldPath: string[];
+    /** Plain string (legacy / non-rich) or image URL */
+    value: string;
+    /** Rich-text persistence shape when committing HTML fields */
+    richText?: PayazaRichTextStored;
+    elementKind?: 'plainText' | 'richHtml' | 'image' | 'rating';
+};
+export type PreviewImageActivatePayload = {
+    type: typeof PREVIEW_MSG.IMAGE_ACTIVATE;
+    layoutId: string;
+    pageId: string;
+    sectionKey: string;
+    fieldPath: string[];
+};
+export type PreviewSectionReorderPayload = {
+    type: typeof PREVIEW_MSG.SECTION_REORDER;
+    layoutId: string;
+    pageId: string;
+    sectionKey: string;
+    direction: 'up' | 'down';
+};
+export type PreviewElementFocusPayload = {
+    type: typeof PREVIEW_MSG.ELEMENT_FOCUS;
+    layoutId: string;
+    pageId: string;
+    sectionKey: string;
+    fieldPath: string[];
+    elementKind: 'plainText' | 'richHtml' | 'image' | 'section' | 'group' | 'icon' | 'rating';
+};
+//# sourceMappingURL=preview-messages.d.ts.map

package/dist/preview/canvas/preview-messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-messages.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/preview-messages.ts"],"names":[],"mappings":"AAAA,iEAAiE;AAEjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,eAAO,MAAM,WAAW;;;;;IAKtB,0DAA0D;;IAE1D,yFAAyF;;IAEzF,gEAAgE;;IAEhE,8EAA8E;;IAE9E,8EAA8E;;CAEtE,CAAC;AAEX,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,EAAE,OAAO,WAAW,CAAC,gBAAgB,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,OAAO,WAAW,CAAC,WAAW,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,OAAO,WAAW,CAAC,eAAe,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,OAAO,WAAW,CAAC,YAAY,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,OAAO,WAAW,CAAC,cAAc,CAAC;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,EAAE,OAAO,WAAW,CAAC,eAAe,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,EAAE,OAAO,WAAW,CAAC,aAAa,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC3F,CAAC"}

package/dist/preview/canvas/preview-messages.js

@@ -0,0 +1,17 @@
+/** postMessage types between preview iframe and parent editor */
+export const PREVIEW_MSG = {
+    FIELD_COMMIT: 'PREVIEW_FIELD_COMMIT',
+    IMAGE_ACTIVATE: 'PREVIEW_IMAGE_ACTIVATE',
+    SECTION_REORDER: 'PREVIEW_SECTION_REORDER',
+    CONTEXT: 'PREVIEW_CONTEXT',
+    /** Element-level focus (canvas → sidebar / breadcrumb) */
+    ELEMENT_FOCUS: 'PREVIEW_ELEMENT_FOCUS',
+    /** Parent → iframe: highlight a specific field element (triggered by List View click) */
+    FIELD_SELECTED_SYNC: 'PREVIEW_FIELD_SELECTED_SYNC',
+    /** Parent → iframe: sync hero carousel to active slide index */
+    SLIDE_INDEX_SYNC: 'PREVIEW_SLIDE_INDEX_SYNC',
+    /** Parent → iframe: commit any in-flight contenteditable before navigation */
+    FLUSH_EDITS: 'PREVIEW_FLUSH_EDITS',
+    /** iframe/inline → parent: flush completed (with or without active editor) */
+    FLUSH_EDITS_ACK: 'PREVIEW_FLUSH_EDITS_ACK',
+};

package/dist/preview/canvas/preview-route.d.ts

@@ -0,0 +1,4 @@
+import type { StoreConfig } from '../../lib/store-types';
+export declare function previewPageIdToRoute(layoutId: string, pageId: string, config?: Partial<StoreConfig>): string;
+export declare function previewRouteToPageId(route: string, layoutId?: string): string;
+//# sourceMappingURL=preview-route.d.ts.map

package/dist/preview/canvas/preview-route.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-route.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/preview-route.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AA6CzD,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAC5B,MAAM,CAsBR;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAoB7E"}

package/dist/preview/canvas/preview-route.js

@@ -0,0 +1,76 @@
+import { getLayoutMetadata } from '../../editor/alignment-schemas/metadata.js';
+import { normalizeEditorLayoutId } from '../../editor/document/layout-id.js';
+/**
+ * Maps preview router path to overlay page id (`home`, `products`, …).
+ */
+function normalizeRoute(route) {
+    const trimmed = String(route || '/').trim();
+    if (!trimmed)
+        return '/';
+    const withoutQuery = trimmed.split(/[?#]/, 1)[0] || '/';
+    if (withoutQuery === '/')
+        return '/';
+    const withLeadingSlash = withoutQuery.startsWith('/') ? withoutQuery : `/${withoutQuery}`;
+    return withLeadingSlash.replace(/\/+$/, '') || '/';
+}
+function doesRouteMatchPath(route, path) {
+    const normalizedRoute = normalizeRoute(route);
+    const normalizedPath = normalizeRoute(path);
+    if (!normalizedPath.includes(':')) {
+        return normalizedRoute === normalizedPath;
+    }
+    const routeSegments = normalizedRoute.replace(/^\/+/, '').split('/');
+    const pathSegments = normalizedPath.replace(/^\/+/, '').split('/');
+    if (routeSegments.length !== pathSegments.length)
+        return false;
+    return pathSegments.every((segment, index) => {
+        if (segment.startsWith(':')) {
+            return Boolean(routeSegments[index]);
+        }
+        return routeSegments[index] === segment;
+    });
+}
+function resolveFirstSlug(items, fallbackSlug) {
+    const firstMatch = items?.find((item) => typeof item?.slug === 'string' && item.slug.trim().length > 0);
+    return firstMatch?.slug?.trim() || fallbackSlug;
+}
+export function previewPageIdToRoute(layoutId, pageId, config) {
+    const normalizedLayoutId = normalizeEditorLayoutId(layoutId) ?? layoutId;
+    const metadata = getLayoutMetadata(normalizedLayoutId);
+    const page = metadata?.pages.find((entry) => entry.id === pageId);
+    if (!page) {
+        return pageId === 'home' ? '/' : `/${pageId}`;
+    }
+    if (!page.path.includes(':slug')) {
+        return page.path || (pageId === 'home' ? '/' : `/${pageId}`);
+    }
+    if (pageId === 'productDetail') {
+        return page.path.replace(':slug', resolveFirstSlug(config?.products, 'preview-item'));
+    }
+    if (pageId === 'categoryDetail') {
+        return page.path.replace(':slug', resolveFirstSlug(config?.categories, 'preview-category'));
+    }
+    return page.path.replace(':slug', 'preview-item');
+}
+export function previewRouteToPageId(route, layoutId) {
+    const normalizedRoute = normalizeRoute(route);
+    if (normalizedRoute === '/')
+        return 'home';
+    if (layoutId) {
+        const normalizedLayoutId = normalizeEditorLayoutId(layoutId) ?? layoutId;
+        const metadata = getLayoutMetadata(normalizedLayoutId);
+        const matchedPage = metadata?.pages.find((page) => doesRouteMatchPath(normalizedRoute, page.path));
+        if (matchedPage) {
+            return matchedPage.id;
+        }
+    }
+    const segments = normalizedRoute.replace(/^\/+/, '').split('/');
+    if (segments[0] === 'products' && segments[1])
+        return 'productDetail';
+    if (segments[0] === 'categories' && segments[1])
+        return 'categoryDetail';
+    const seg = segments[0] ?? 'home';
+    if (!seg)
+        return 'home';
+    return seg;
+}

package/dist/preview/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Preview Components
+ *
+ * Components for previewing layouts with embedded dummy data.
+ * These components demonstrate that layouts are self-sustaining
+ * and can work independently with embedded preview data.
+ */
+export { LayoutPreview } from './LayoutPreview';
+export { ShadowDOMWrapper } from './ShadowDOMWrapper';
+export { PreviewRouter } from './PreviewRouter';
+export * from './route-audit';
+export * from '../lib/preview-data';
+//# sourceMappingURL=index.d.ts.map

package/dist/preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preview/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}

package/dist/preview/index.js

@@ -0,0 +1,12 @@
+/**
+ * Preview Components
+ *
+ * Components for previewing layouts with embedded dummy data.
+ * These components demonstrate that layouts are self-sustaining
+ * and can work independently with embedded preview data.
+ */
+export { LayoutPreview } from './LayoutPreview.js';
+export { ShadowDOMWrapper } from './ShadowDOMWrapper.js';
+export { PreviewRouter } from './PreviewRouter.js';
+export * from './route-audit.js';
+export * from '../lib/preview-data.js';

package/dist/preview/route-audit.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Three-way parity reference: storefront-app catch-all routes vs PreviewRouter vs editor metadata.pages.
+ * Keep in sync when adding store routes or PayazaForm pages.
+ *
+ * Platform + custom-domain + templates use the same segment keys as listed under `sharedSegments`.
+ * PreviewRouter in this package should handle every segment (with feature-flag behavior aligned to the app).
+ * Editor metadata (alignment-schemas/metadata.ts) lists merchant-editable pages; transactional/legal
+ * routes are preview-only unless added to metadata.
+ */
+/** First path segments handled by storefront-app [...slug] for store pages (excluding 404 fallback). */
+export declare const STOREFRONT_APP_SEGMENTS: readonly ["products", "categories", "menu", "cart", "wishlist", "checkout", "book", "services", "subscription", "team", "portfolio", "help-center", "shipping-returns", "track-order", "about", "contact", "account", "terms", "terms-of-service", "privacy", "privacy-policy", "cookie-policy", "size-guide", "style-guide", "mentorship", "order"];
+/** Aliases PreviewRouter accepts for parity with marketing links / SEO. */
+export declare const PREVIEW_ROUTE_ALIASES: Record<string, string>;
+/** Suggested quick-jump routes for admin preview QA (per layout family). */
+export declare const PREVIEW_QUICK_ROUTES: Record<string, string[]>;
+export declare function normalizePreviewSegment(segment: string): string;
+//# sourceMappingURL=route-audit.d.ts.map

package/dist/preview/route-audit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-audit.d.ts","sourceRoot":"","sources":["../../src/preview/route-audit.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,wGAAwG;AACxG,eAAO,MAAM,uBAAuB,sVA2B1B,CAAC;AAEX,2EAA2E;AAC3E,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAGxD,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAMzD,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAE/D"}

package/dist/preview/route-audit.js

@@ -0,0 +1,54 @@
+/**
+ * Three-way parity reference: storefront-app catch-all routes vs PreviewRouter vs editor metadata.pages.
+ * Keep in sync when adding store routes or PayazaForm pages.
+ *
+ * Platform + custom-domain + templates use the same segment keys as listed under `sharedSegments`.
+ * PreviewRouter in this package should handle every segment (with feature-flag behavior aligned to the app).
+ * Editor metadata (alignment-schemas/metadata.ts) lists merchant-editable pages; transactional/legal
+ * routes are preview-only unless added to metadata.
+ */
+/** First path segments handled by storefront-app [...slug] for store pages (excluding 404 fallback). */
+export const STOREFRONT_APP_SEGMENTS = [
+    'products',
+    'categories',
+    'menu',
+    'cart',
+    'wishlist',
+    'checkout',
+    'book',
+    'services',
+    'subscription',
+    'team',
+    'portfolio',
+    'help-center',
+    'shipping-returns',
+    'track-order',
+    'about',
+    'contact',
+    'account',
+    'terms',
+    'terms-of-service',
+    'privacy',
+    'privacy-policy',
+    'cookie-policy',
+    'size-guide',
+    'style-guide',
+    'mentorship',
+    'order',
+];
+/** Aliases PreviewRouter accepts for parity with marketing links / SEO. */
+export const PREVIEW_ROUTE_ALIASES = {
+    'terms-of-service': 'terms',
+    'privacy-policy': 'privacy',
+};
+/** Suggested quick-jump routes for admin preview QA (per layout family). */
+export const PREVIEW_QUICK_ROUTES = {
+    default: ['/', '/products', '/categories', '/cart', '/checkout', '/account', '/about', '/contact'],
+    food: ['/', '/menu', '/categories', '/about', '/contact', '/cart', '/checkout'],
+    booking: ['/', '/book', '/services', '/about', '/contact'],
+    motivational: ['/', '/services', '/subscription', '/about', '/contact', '/account'],
+    electronics: ['/', '/products', '/categories', '/cart', '/checkout', '/help-center'],
+};
+export function normalizePreviewSegment(segment) {
+    return PREVIEW_ROUTE_ALIASES[segment] ?? segment;
+}