storefront-layouts 1.0.0

package/dist/preview/canvas/PreviewCanvasEnhancer.js

@@ -0,0 +1,741 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PreviewBlockToolbar } from './PreviewBlockToolbar.js';
+import { parsePayazaFieldKey } from './field-key.js';
+import { PREVIEW_MSG } from './preview-messages.js';
+import { buildPayazaRichCommitFromEditorHtml, coercePayazaRichLinkHref, sanitizePayazaRichHtml, wrapPlainTextAsParagraph, } from '../../lib/rich-html.js';
+import { extractEditablePlainText, flattenMultilineEditableElement } from './extract-editable-plain-text.js';
+import { shouldDeferEditableFocusOutCommit } from './preview-editable-commit.util.js';
+import { prefersInlineCanvasTextEdit } from '../../lib/utils/mobile-editor.js';
+import { PREVIEW_ACTIVE_EDITABLE_SELECTOR, } from './preview-flush-handle.js';
+function schemaSectionKeyFromElement(el) {
+    const root = el?.closest('[data-section]');
+    if (!root)
+        return null;
+    const mapped = root.getAttribute('data-payaza-section-key');
+    return mapped || root.getAttribute('data-section');
+}
+function postToParent(payload) {
+    if (typeof window !== 'undefined' && window.parent && window.parent !== window) {
+        window.parent.postMessage(payload, '*');
+    }
+}
+export function PreviewCanvasEnhancer({ enabled, interactionMode, children, previewContext = null, onPreviewEvent, scrollRootRef, previewFlushRef, }) {
+    const [toolbarVisible, setToolbarVisible] = useState(false);
+    const [toolbarRect, setToolbarRect] = useState(null);
+    const [toolbarMode, setToolbarMode] = useState('text');
+    const selectedElRef = useRef(null);
+    const imageFieldRef = useRef(null);
+    const editingRef = useRef(false);
+    const [isRichFormatting, setIsRichFormatting] = useState(false);
+    const [toolbarEditableActive, setToolbarEditableActive] = useState(false);
+    const commitEditableElementRef = useRef(null);
+    const previewCtxRef = useRef(null);
+    useEffect(() => {
+        const next = previewContext?.layoutId && previewContext?.pageId ? previewContext : null;
+        previewCtxRef.current = next;
+        if (typeof window !== 'undefined' && next) {
+            window.__PAYAZA_PREVIEW_CTX__ =
+                next;
+        }
+    }, [previewContext]);
+    const dispatchPreviewEvent = useCallback((payload) => {
+        if (onPreviewEvent) {
+            onPreviewEvent(payload);
+        }
+        else {
+            postToParent(payload);
+        }
+    }, [onPreviewEvent]);
+    const resolveCtx = useCallback(() => {
+        if (previewCtxRef.current?.layoutId && previewCtxRef.current.pageId)
+            return previewCtxRef.current;
+        if (typeof window !== 'undefined') {
+            const w = window;
+            if (w.__PAYAZA_PREVIEW_CTX__?.layoutId && w.__PAYAZA_PREVIEW_CTX__.pageId)
+                return w.__PAYAZA_PREVIEW_CTX__;
+        }
+        return null;
+    }, []);
+    const clearSelection = useCallback(() => {
+        if (selectedElRef.current) {
+            const el = selectedElRef.current;
+            if (el.getAttribute('contenteditable') === 'true') {
+                commitEditableElementRef.current?.(el);
+            }
+            el.removeAttribute('data-payaza-selected');
+            if (el.getAttribute('contenteditable') === 'true') {
+                el.removeAttribute('contenteditable');
+            }
+        }
+        selectedElRef.current = null;
+        imageFieldRef.current = null;
+        setToolbarVisible(false);
+        setToolbarRect(null);
+        editingRef.current = false;
+        setIsRichFormatting(false);
+        setToolbarEditableActive(false);
+    }, []);
+    const updateToolbarPos = useCallback(() => {
+        const el = selectedElRef.current;
+        if (!el)
+            return;
+        setToolbarRect(el.getBoundingClientRect());
+    }, []);
+    useEffect(() => {
+        if (!enabled || interactionMode !== 'edit') {
+            clearSelection();
+            return;
+        }
+        const onScrollOrResize = () => updateToolbarPos();
+        const scrollRoot = scrollRootRef?.current;
+        if (scrollRoot) {
+            scrollRoot.addEventListener('scroll', onScrollOrResize, { passive: true });
+        }
+        else {
+            window.addEventListener('scroll', onScrollOrResize, true);
+        }
+        window.addEventListener('resize', onScrollOrResize);
+        return () => {
+            if (scrollRoot) {
+                scrollRoot.removeEventListener('scroll', onScrollOrResize);
+            }
+            else {
+                window.removeEventListener('scroll', onScrollOrResize, true);
+            }
+            window.removeEventListener('resize', onScrollOrResize);
+        };
+    }, [enabled, interactionMode, clearSelection, updateToolbarPos, scrollRootRef]);
+    const postElementFocus = useCallback((sectionKey, fieldPath, kind) => {
+        const ctx = resolveCtx();
+        if (!ctx)
+            return;
+        dispatchPreviewEvent({
+            type: PREVIEW_MSG.ELEMENT_FOCUS,
+            layoutId: ctx.layoutId,
+            pageId: ctx.pageId,
+            sectionKey,
+            fieldPath,
+            elementKind: kind,
+        });
+    }, [resolveCtx]);
+    useEffect(() => {
+        if (!enabled || interactionMode !== 'edit')
+            return;
+        const commitEditableElement = (t, opts) => {
+            const key = t.getAttribute('data-payaza-edit');
+            if (!key)
+                return;
+            const parsed = parsePayazaFieldKey(key);
+            if (!parsed)
+                return;
+            const ctx = resolveCtx();
+            if (!ctx?.layoutId || !ctx.pageId)
+                return;
+            const rich = t.getAttribute('data-payaza-rich') === 'inline';
+            const inner = t.innerHTML ?? '';
+            if (!opts?.keepEditing) {
+                t.removeAttribute('contenteditable');
+                editingRef.current = false;
+                setToolbarEditableActive(false);
+            }
+            if (rich) {
+                const payload = buildPayazaRichCommitFromEditorHtml(inner, { keepRaw: true });
+                dispatchPreviewEvent({
+                    type: PREVIEW_MSG.FIELD_COMMIT,
+                    layoutId: ctx.layoutId,
+                    pageId: ctx.pageId,
+                    sectionKey: parsed.sectionKey,
+                    fieldPath: parsed.fieldPath,
+                    value: payload.plainText ?? '',
+                    richText: payload,
+                    elementKind: 'richHtml',
+                });
+                return;
+            }
+            const value = extractEditablePlainText(t);
+            dispatchPreviewEvent({
+                type: PREVIEW_MSG.FIELD_COMMIT,
+                layoutId: ctx.layoutId,
+                pageId: ctx.pageId,
+                sectionKey: parsed.sectionKey,
+                fieldPath: parsed.fieldPath,
+                value,
+                elementKind: 'plainText',
+            });
+        };
+        commitEditableElementRef.current = commitEditableElement;
+        const deselectPrevious = (nextEl) => {
+            const prev = selectedElRef.current;
+            if (!prev || prev === nextEl)
+                return;
+            if (prev.getAttribute('contenteditable') === 'true') {
+                commitEditableElement(prev);
+            }
+            prev.removeAttribute('data-payaza-selected');
+        };
+        const dispatchFlushAck = () => {
+            dispatchPreviewEvent({ type: PREVIEW_MSG.FLUSH_EDITS_ACK });
+        };
+        const onPasteEditable = (e) => {
+            const t = e.target;
+            const editable = t?.closest?.('[data-payaza-edit][contenteditable="true"]');
+            if (!editable)
+                return;
+            e.preventDefault();
+            const plain = e.clipboardData?.getData('text/plain') ?? '';
+            const rich = editable.getAttribute('data-payaza-rich') === 'inline';
+            if (rich) {
+                const html = e.clipboardData?.getData('text/html');
+                if (html?.trim()) {
+                    document.execCommand('insertHTML', false, sanitizePayazaRichHtml(html));
+                }
+                else {
+                    document.execCommand('insertHTML', false, wrapPlainTextAsParagraph(plain));
+                }
+            }
+            else {
+                document.execCommand('insertText', false, plain);
+            }
+        };
+        let inputCommitTimer = null;
+        const onFlushEditsMessage = (event) => {
+            if (event.data?.type !== PREVIEW_MSG.FLUSH_EDITS)
+                return;
+            if (inputCommitTimer) {
+                clearTimeout(inputCommitTimer);
+                inputCommitTimer = null;
+            }
+            const active = document.querySelector(PREVIEW_ACTIVE_EDITABLE_SELECTOR);
+            if (active) {
+                commitEditableElement(active);
+                active.blur();
+            }
+            // Defer ACK one macrotask so FIELD_COMMIT postMessages are processed before save reads overlay.
+            setTimeout(() => dispatchFlushAck(), 0);
+        };
+        const flushActiveEditsSync = () => {
+            if (inputCommitTimer) {
+                clearTimeout(inputCommitTimer);
+                inputCommitTimer = null;
+            }
+            const active = document.querySelector(PREVIEW_ACTIVE_EDITABLE_SELECTOR);
+            if (!active)
+                return false;
+            commitEditableElement(active);
+            active.blur();
+            return true;
+        };
+        if (previewFlushRef) {
+            previewFlushRef.current = { flushActiveEdits: flushActiveEditsSync };
+        }
+        document.addEventListener('paste', onPasteEditable, true);
+        window.addEventListener('message', onFlushEditsMessage);
+        const beginTextEditing = (textEl) => {
+            if (textEl.getAttribute('data-payaza-multiline') === 'true') {
+                flattenMultilineEditableElement(textEl);
+            }
+            editingRef.current = true;
+            setToolbarEditableActive(true);
+            textEl.setAttribute('contenteditable', 'true');
+            textEl.focus();
+        };
+        const onPointerDown = (e) => {
+            const ctx = resolveCtx();
+            const t = e.target;
+            if (t.closest('[role="toolbar"]'))
+                return;
+            const sectionEl = t.closest('[data-section]');
+            const ratingStarEl = t.closest('[data-payaza-rating-star]');
+            const ratingEl = (ratingStarEl?.closest('[data-payaza-rating]') ??
+                t.closest('[data-payaza-rating]'));
+            const textEl = t.closest('[data-payaza-edit]');
+            const imgEl = t.closest('[data-payaza-image]');
+            const iconEl = t.closest('[data-payaza-icon]');
+            const groupEl = t.closest('[data-payaza-group]');
+            if (!textEl && !imgEl && !iconEl && !ratingEl && !groupEl && !sectionEl) {
+                if (editingRef.current && selectedElRef.current?.contains(t))
+                    return;
+                clearSelection();
+                return;
+            }
+            // Icon elements open the icon picker in the sidebar (highest priority after images).
+            if (iconEl && !imgEl) {
+                deselectPrevious(iconEl);
+                selectedElRef.current = iconEl;
+                imageFieldRef.current = null;
+                setToolbarMode('image'); // reuse image toolbar (no inline editing needed)
+                setIsRichFormatting(false);
+                setToolbarEditableActive(false);
+                iconEl.setAttribute('data-payaza-selected', 'true');
+                setToolbarRect(iconEl.getBoundingClientRect());
+                setToolbarVisible(true);
+                const iconKey = iconEl.getAttribute('data-payaza-icon');
+                const parsedIcon = iconKey ? parsePayazaFieldKey(iconKey) : null;
+                if (parsedIcon && ctx) {
+                    postElementFocus(parsedIcon.sectionKey, parsedIcon.fieldPath, 'icon');
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: parsedIcon.sectionKey, sectionKey: parsedIcon.sectionKey });
+                }
+                else {
+                    const iconSk = schemaSectionKeyFromElement(iconEl);
+                    if (iconSk)
+                        dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: iconSk, sectionKey: iconSk });
+                }
+                return;
+            }
+            // Star rating controls — click a star to set 1–5 and focus the card in the sidebar.
+            if (ratingEl && !imgEl) {
+                e.preventDefault();
+                deselectPrevious(ratingEl);
+                selectedElRef.current = ratingEl;
+                imageFieldRef.current = null;
+                setToolbarMode('text');
+                setIsRichFormatting(false);
+                setToolbarEditableActive(false);
+                ratingEl.setAttribute('data-payaza-selected', 'true');
+                setToolbarRect(ratingEl.getBoundingClientRect());
+                setToolbarVisible(true);
+                const ratingKey = ratingEl.getAttribute('data-payaza-rating');
+                const parsedRating = ratingKey ? parsePayazaFieldKey(ratingKey) : null;
+                const ratingSk = schemaSectionKeyFromElement(ratingEl);
+                if (ratingSk) {
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: ratingSk, sectionKey: ratingSk });
+                }
+                if (parsedRating && ctx) {
+                    postElementFocus(parsedRating.sectionKey, parsedRating.fieldPath, 'rating');
+                    const starValue = ratingStarEl
+                        ? Number(ratingStarEl.getAttribute('data-payaza-rating-star'))
+                        : NaN;
+                    if (Number.isFinite(starValue) && starValue >= 1 && starValue <= 5) {
+                        dispatchPreviewEvent({
+                            type: PREVIEW_MSG.FIELD_COMMIT,
+                            layoutId: ctx.layoutId,
+                            pageId: ctx.pageId,
+                            sectionKey: parsedRating.sectionKey,
+                            fieldPath: parsedRating.fieldPath,
+                            value: String(starValue),
+                            elementKind: 'rating',
+                        });
+                    }
+                }
+                return;
+            }
+            // Prefer explicit image bindings over nested section/text targets (e.g. hero photo vs whole block).
+            if (imgEl) {
+                deselectPrevious(imgEl);
+                selectedElRef.current = imgEl;
+                const imgKey = imgEl.getAttribute('data-payaza-image');
+                const parsedImg = imgKey ? parsePayazaFieldKey(imgKey) : null;
+                if (parsedImg) {
+                    imageFieldRef.current = { sectionKey: parsedImg.sectionKey, fieldPath: parsedImg.fieldPath };
+                    const skImg = schemaSectionKeyFromElement(imgEl);
+                    if (skImg && ctx)
+                        postElementFocus(parsedImg.sectionKey, parsedImg.fieldPath, 'image');
+                }
+                setToolbarMode('image');
+                setIsRichFormatting(false);
+                setToolbarEditableActive(false);
+                imgEl.setAttribute('data-payaza-selected', 'true');
+                setToolbarRect(imgEl.getBoundingClientRect());
+                setToolbarVisible(true);
+                const imgSk = schemaSectionKeyFromElement(imgEl);
+                if (imgSk)
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: imgSk, sectionKey: imgSk });
+                return;
+            }
+            if (textEl) {
+                const wasSelected = selectedElRef.current === textEl;
+                const inlineEditFirstTap = prefersInlineCanvasTextEdit();
+                deselectPrevious(textEl);
+                selectedElRef.current = textEl;
+                imageFieldRef.current = null;
+                setToolbarMode('text');
+                const richFmt = textEl.getAttribute('data-payaza-rich') === 'inline';
+                setIsRichFormatting(richFmt);
+                textEl.setAttribute('data-payaza-selected', 'true');
+                setToolbarRect(textEl.getBoundingClientRect());
+                setToolbarVisible(true);
+                const key = textEl.getAttribute('data-payaza-edit');
+                const parsed = key ? parsePayazaFieldKey(key) : null;
+                const sk = schemaSectionKeyFromElement(textEl);
+                // Mobile: first tap edits inline on canvas — do not raise SECTION_SELECTED (opens inspector).
+                if (sk && !inlineEditFirstTap) {
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: sk, sectionKey: sk });
+                }
+                if (parsed && ctx) {
+                    postElementFocus(parsed.sectionKey, parsed.fieldPath, richFmt ? 'richHtml' : 'plainText');
+                }
+                if (inlineEditFirstTap || (wasSelected && textEl.getAttribute('contenteditable') !== 'true')) {
+                    beginTextEditing(textEl);
+                }
+                else {
+                    setToolbarEditableActive(false);
+                    editingRef.current = false;
+                }
+                return;
+            }
+            if (groupEl && !textEl && !imgEl) {
+                deselectPrevious(groupEl);
+                selectedElRef.current = groupEl;
+                imageFieldRef.current = null;
+                setToolbarMode('group');
+                setIsRichFormatting(false);
+                setToolbarEditableActive(false);
+                groupEl.setAttribute('data-payaza-selected', 'group-block');
+                setToolbarRect(groupEl.getBoundingClientRect());
+                setToolbarVisible(true);
+                const groupKey = groupEl.getAttribute('data-payaza-group');
+                const parsedGroup = groupKey ? parsePayazaFieldKey(groupKey) : null;
+                if (parsedGroup && ctx) {
+                    postElementFocus(parsedGroup.sectionKey, parsedGroup.fieldPath, 'group');
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: parsedGroup.sectionKey, sectionKey: parsedGroup.sectionKey });
+                }
+                else {
+                    const gs = schemaSectionKeyFromElement(groupEl);
+                    if (gs)
+                        dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: gs, sectionKey: gs });
+                }
+                return;
+            }
+            if (sectionEl) {
+                deselectPrevious(sectionEl);
+                selectedElRef.current = sectionEl;
+                imageFieldRef.current = null;
+                setToolbarMode('section');
+                setIsRichFormatting(false);
+                setToolbarEditableActive(false);
+                sectionEl.setAttribute('data-payaza-selected', 'section');
+                setToolbarRect(sectionEl.getBoundingClientRect());
+                setToolbarVisible(true);
+                const ss = schemaSectionKeyFromElement(sectionEl);
+                if (ss) {
+                    dispatchPreviewEvent({ type: 'SECTION_SELECTED', section: ss, sectionKey: ss });
+                    if (ctx)
+                        postElementFocus(ss, [], 'section');
+                }
+            }
+        };
+        const onDblClick = (e) => {
+            const t = e.target;
+            const textEl = t.closest('[data-payaza-edit]');
+            if (!textEl || interactionMode !== 'edit')
+                return;
+            e.preventDefault();
+            beginTextEditing(textEl);
+            const richFmt = textEl.getAttribute('data-payaza-rich') === 'inline';
+            setIsRichFormatting(Boolean(richFmt));
+            const range = document.createRange();
+            range.selectNodeContents(textEl);
+            const sel = window.getSelection();
+            sel?.removeAllRanges();
+            sel?.addRange(range);
+        };
+        const onFocusOut = (e) => {
+            const t = e.target;
+            if (!t?.hasAttribute?.('data-payaza-edit') || t.getAttribute('contenteditable') !== 'true')
+                return;
+            if (shouldDeferEditableFocusOutCommit(e.relatedTarget))
+                return;
+            const ctx = resolveCtx();
+            if (!ctx?.layoutId || !ctx.pageId) {
+                t.removeAttribute('contenteditable');
+                editingRef.current = false;
+                setToolbarEditableActive(false);
+                return;
+            }
+            commitEditableElement(t);
+        };
+        const onInputEditable = (e) => {
+            const t = e.target;
+            if (!t?.hasAttribute?.('data-payaza-edit') || t.getAttribute('contenteditable') !== 'true')
+                return;
+            if (inputCommitTimer)
+                clearTimeout(inputCommitTimer);
+            inputCommitTimer = setTimeout(() => {
+                inputCommitTimer = null;
+                commitEditableElement(t, { keepEditing: true });
+            }, 300);
+        };
+        /** Edit mode: never follow links — selection & inline edit only (matches WordPress / Elementor UX). */
+        const onAnchorClickCapture = (e) => {
+            const t = e.target;
+            if (!t || t.closest('[role="toolbar"]'))
+                return;
+            const a = t.closest('a[href]');
+            if (!a?.getAttribute('href'))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        document.addEventListener('mousedown', onPointerDown, true);
+        document.addEventListener('dblclick', onDblClick, true);
+        document.addEventListener('focusout', onFocusOut, true);
+        document.addEventListener('input', onInputEditable, true);
+        document.addEventListener('click', onAnchorClickCapture, true);
+        return () => {
+            if (inputCommitTimer)
+                clearTimeout(inputCommitTimer);
+            commitEditableElementRef.current = null;
+            if (previewFlushRef) {
+                previewFlushRef.current = null;
+            }
+            document.removeEventListener('paste', onPasteEditable, true);
+            window.removeEventListener('message', onFlushEditsMessage);
+            document.removeEventListener('mousedown', onPointerDown, true);
+            document.removeEventListener('dblclick', onDblClick, true);
+            document.removeEventListener('focusout', onFocusOut, true);
+            document.removeEventListener('input', onInputEditable, true);
+            document.removeEventListener('click', onAnchorClickCapture, true);
+        };
+    }, [enabled, interactionMode, clearSelection, resolveCtx, postElementFocus, dispatchPreviewEvent, previewFlushRef]);
+    const runOnEditable = useCallback((fn) => {
+        const el = selectedElRef.current;
+        if (!el || el.getAttribute('contenteditable') !== 'true')
+            return;
+        el.focus();
+        fn();
+        updateToolbarPos();
+    }, [updateToolbarPos]);
+    const onBold = useCallback(() => runOnEditable(() => document.execCommand('bold')), [runOnEditable]);
+    const onItalic = useCallback(() => runOnEditable(() => document.execCommand('italic')), [runOnEditable]);
+    const onUnderline = useCallback(() => runOnEditable(() => document.execCommand('underline')), [runOnEditable]);
+    const onLinkApply = useCallback((url, savedRange) => {
+        const el = selectedElRef.current;
+        if (!el || el.getAttribute('contenteditable') !== 'true')
+            return;
+        const safe = coercePayazaRichLinkHref(url);
+        if (!safe)
+            return;
+        el.focus();
+        if (savedRange) {
+            const sel = window.getSelection();
+            sel?.removeAllRanges();
+            sel?.addRange(savedRange);
+        }
+        document.execCommand('createLink', false, safe);
+        updateToolbarPos();
+    }, [updateToolbarPos]);
+    const onUnlink = useCallback(() => runOnEditable(() => document.execCommand('unlink')), [runOnEditable]);
+    const onBullets = useCallback(() => runOnEditable(() => document.execCommand('insertUnorderedList')), [runOnEditable]);
+    const onOrdered = useCallback(() => runOnEditable(() => document.execCommand('insertOrderedList')), [runOnEditable]);
+    const onClearFormatting = useCallback(() => {
+        runOnEditable(() => {
+            document.execCommand('removeFormat');
+            document.execCommand('unlink');
+        });
+    }, [runOnEditable]);
+    const onMoveUp = useCallback(() => {
+        const ctx = resolveCtx();
+        if (!ctx?.layoutId)
+            return;
+        const sk = schemaSectionKeyFromElement(selectedElRef.current);
+        if (!sk)
+            return;
+        dispatchPreviewEvent({
+            type: PREVIEW_MSG.SECTION_REORDER,
+            layoutId: ctx.layoutId,
+            pageId: ctx.pageId,
+            sectionKey: sk,
+            direction: 'up',
+        });
+    }, [resolveCtx]);
+    const onMoveDown = useCallback(() => {
+        const ctx = resolveCtx();
+        if (!ctx?.layoutId)
+            return;
+        const sk = schemaSectionKeyFromElement(selectedElRef.current);
+        if (!sk)
+            return;
+        dispatchPreviewEvent({
+            type: PREVIEW_MSG.SECTION_REORDER,
+            layoutId: ctx.layoutId,
+            pageId: ctx.pageId,
+            sectionKey: sk,
+            direction: 'down',
+        });
+    }, [resolveCtx]);
+    const onReplaceImage = useCallback(() => {
+        const ctx = resolveCtx();
+        if (!imageFieldRef.current || !ctx?.layoutId)
+            return;
+        const { sectionKey, fieldPath } = imageFieldRef.current;
+        dispatchPreviewEvent({
+            type: PREVIEW_MSG.IMAGE_ACTIVATE,
+            layoutId: ctx.layoutId,
+            pageId: ctx.pageId,
+            sectionKey,
+            fieldPath,
+        });
+    }, [resolveCtx]);
+    const onMore = useCallback(() => {
+        const sk = schemaSectionKeyFromElement(selectedElRef.current);
+        if (sk) {
+            dispatchPreviewEvent({ type: 'PREVIEW_FOCUS_SIDEBAR', sectionKey: sk });
+        }
+    }, [dispatchPreviewEvent]);
+    // Sync canvas selection when List View clicks a section or block element.
+    // Refs and setState setters are stable so empty deps is correct.
+    useEffect(() => {
+        const clearCanvasSelection = () => {
+            if (selectedElRef.current) {
+                const el = selectedElRef.current;
+                if (el.getAttribute('contenteditable') === 'true') {
+                    commitEditableElementRef.current?.(el);
+                }
+                el.removeAttribute('data-payaza-selected');
+                if (el.getAttribute('contenteditable') === 'true') {
+                    el.removeAttribute('contenteditable');
+                }
+            }
+            document.querySelectorAll('[data-payaza-section-active]').forEach((el) => el.removeAttribute('data-payaza-section-active'));
+            selectedElRef.current = null;
+            imageFieldRef.current = null;
+            editingRef.current = false;
+            setIsRichFormatting(false);
+            setToolbarEditableActive(false);
+            setToolbarVisible(false);
+            setToolbarRect(null);
+        };
+        const onSectionSync = (e) => {
+            if (e.data?.type !== 'SECTION_SELECTED_SYNC')
+                return;
+            const key = e.data?.section;
+            // If a child element within this section is already the active selection, leave it alone —
+            // this message fires after every canvas click too, not just List View clicks.
+            if (key && selectedElRef.current) {
+                const withinSection = selectedElRef.current.closest(`[data-payaza-section-key="${key}"], [data-section="${key}"]`);
+                if (withinSection)
+                    return;
+            }
+            clearCanvasSelection();
+            if (!key)
+                return;
+            const sectionEl = document.querySelector(`[data-payaza-section-key="${key}"], [data-section="${key}"]`);
+            if (!sectionEl)
+                return;
+            selectedElRef.current = sectionEl;
+            sectionEl.setAttribute('data-payaza-selected', 'section');
+            setToolbarMode('section');
+            setToolbarRect(sectionEl.getBoundingClientRect());
+            setToolbarVisible(true);
+            sectionEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        };
+        const onFieldSync = (e) => {
+            if (e.data?.type !== PREVIEW_MSG.FIELD_SELECTED_SYNC)
+                return;
+            const field = e.data?.field;
+            if (!field?.sectionKey || !field.fieldPath?.length)
+                return;
+            if (field.elementKind === 'section')
+                return; // handled by SECTION_SELECTED_SYNC
+            const { sectionKey, fieldPath, elementKind } = field;
+            const encodedKey = [sectionKey, ...fieldPath].join('|');
+            const isImage = elementKind === 'image';
+            const isGroup = elementKind === 'group';
+            const targetEl = isImage
+                ? document.querySelector(`[data-payaza-image="${encodedKey}"]`)
+                : isGroup
+                    ? document.querySelector(`[data-payaza-group="${encodedKey}"]`)
+                    : document.querySelector(`[data-payaza-edit="${encodedKey}"]`);
+            if (!targetEl)
+                return;
+            // Already selected from a direct canvas click — nothing to do.
+            if (selectedElRef.current === targetEl)
+                return;
+            clearCanvasSelection();
+            selectedElRef.current = targetEl;
+            if (isImage) {
+                targetEl.setAttribute('data-payaza-selected', 'true');
+                imageFieldRef.current = { sectionKey, fieldPath };
+                setToolbarMode('image');
+                setIsRichFormatting(false);
+            }
+            else if (isGroup) {
+                targetEl.setAttribute('data-payaza-selected', 'group-block');
+                imageFieldRef.current = null;
+                setToolbarMode('group');
+                setIsRichFormatting(false);
+            }
+            else {
+                targetEl.setAttribute('data-payaza-selected', 'true');
+                imageFieldRef.current = null;
+                setToolbarMode('text');
+                const richFmt = targetEl.getAttribute('data-payaza-rich') === 'inline';
+                setIsRichFormatting(richFmt);
+            }
+            setToolbarRect(targetEl.getBoundingClientRect());
+            setToolbarVisible(true);
+            targetEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        };
+        window.addEventListener('message', onSectionSync);
+        window.addEventListener('message', onFieldSync);
+        return () => {
+            window.removeEventListener('message', onSectionSync);
+            window.removeEventListener('message', onFieldSync);
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        /* Hover discoverability for editable text fields */
+        [data-payaza-edit]:not([data-payaza-selected="true"]):not([contenteditable="true"]) {
+          cursor: text;
+          border-radius: 2px;
+          transition: outline 0.1s ease, box-shadow 0.1s ease;
+        }
+        [data-payaza-edit]:not([data-payaza-selected="true"]):not([contenteditable="true"]):hover {
+          outline: 1px dashed rgba(56, 88, 233, 0.45);
+          outline-offset: 2px;
+          box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.08);
+        }
+        /* Hover discoverability for image fields */
+        [data-payaza-image]:not([data-payaza-selected="true"]):hover,
+        [data-payaza-icon]:not([data-payaza-selected="true"]):hover,
+        [data-payaza-rating]:not([data-payaza-selected="true"]):hover {
+          cursor: pointer;
+          outline: 1px dashed rgba(56, 88, 233, 0.45);
+          outline-offset: 2px;
+        }
+        [data-payaza-rating-star]:hover {
+          transform: scale(1.12);
+        }
+        /* Selected states */
+        [data-payaza-selected="true"] {
+          outline: 2px solid rgba(56, 88, 233, 0.65);
+          outline-offset: 2px;
+          box-shadow: 0 0 0 4px rgba(56, 88, 233, 0.16);
+        }
+        [data-payaza-icon][data-payaza-selected="true"] {
+          outline: 2px solid rgba(56, 88, 233, 0.70);
+          outline-offset: 3px;
+          box-shadow: 0 0 0 5px rgba(56, 88, 233, 0.15);
+          background-color: transparent !important;
+        }
+        [data-payaza-selected="group-block"] {
+          outline: 2px solid rgba(56, 88, 233, 0.55);
+          outline-offset: 2px;
+        }
+        [data-payaza-selected="section"] {
+          outline: 2px dashed rgba(68, 0, 102, 0.22);
+          outline-offset: 2px;
+        }
+        [data-payaza-section-active="true"] {
+          outline: 2px solid rgba(68, 0, 102, 0.18);
+          outline-offset: 2px;
+        }
+        /* Active editing state — outline only on host; typography preserved on outer tags */
+        [data-payaza-edit][contenteditable="true"] {
+          cursor: text;
+          outline: 2px solid rgba(56, 88, 233, 0.8);
+          outline-offset: 2px;
+          box-shadow: 0 0 0 4px rgba(56, 88, 233, 0.2);
+        }
+        /* Inner edit wrappers inherit styled parent typography (Fashion Hub / booking pattern) */
+        span[data-payaza-edit][contenteditable="true"],
+        [data-payaza-edit][contenteditable="true"] > span:only-child {
+          font: inherit;
+          letter-spacing: inherit;
+          line-height: inherit;
+          color: inherit;
+        }
+      ` }), children, _jsx(PreviewBlockToolbar, { visible: Boolean(enabled && interactionMode === 'edit' && toolbarVisible), mode: toolbarMode, anchorRect: toolbarRect, richField: toolbarMode === 'text' ? isRichFormatting : false, richEditingActive: toolbarMode === 'text' && toolbarEditableActive, onBold: toolbarMode === 'text' ? onBold : undefined, onItalic: toolbarMode === 'text' ? onItalic : undefined, onUnderline: toolbarMode === 'text' ? onUnderline : undefined, onLinkApply: toolbarMode === 'text' ? onLinkApply : undefined, onUnlink: toolbarMode === 'text' ? onUnlink : undefined, onBullets: toolbarMode === 'text' ? onBullets : undefined, onOrderedList: toolbarMode === 'text' ? onOrdered : undefined, onClearFormatting: toolbarMode === 'text' ? onClearFormatting : undefined, onReplaceImage: toolbarMode === 'image' ? onReplaceImage : undefined })] }));
+}