@zohofinance/commerce 1.1.0 → 2.1.0

package/public/iframe-bridge.js

@@ -0,0 +1,1303 @@
+(function(global) {
+  'use strict';
+
+  if (global.parent === global) {
+    return;
+  }
+
+  if (global.__sbBridgeActive) {
+    return;
+  }
+  global.__sbBridgeActive = true;
+
+  let PARENT_SRC  = 'sb-parent';
+  let BRIDGE_SRC  = 'sb-bridge';
+  let BADGE_H     = 32;
+  let OFFSET      = 5;
+
+  let selectedEl       = null;
+  let hoveredEl        = null;
+  let canShowAddIcons  = false;
+  let addAboveClicked  = null;
+  let badgeInfo        = null;   // { svgHtml, svgClass, name }
+  let svgs             = {};
+  let _bodyObserver    = null;
+  let i18n = {
+    blocks: 'Blocks',
+    extensions: 'Extensions',
+    loading: 'Loading…',
+    noExtensions: 'No extensions found'
+  };
+
+  let overlayEl       = null;
+  let hoverEl         = null;
+  let actionPanelEl   = null;
+  let nameBadgeEl     = null;
+  let addTopEl        = null;
+  let addBottomEl     = null;
+  let blocksListEl    = null;
+  let resizeObs       = null;
+
+  let fetchPatched     = false;
+
+  let previewModeEnabled = false;
+  let previewPagePatterns = [];
+  let previewClickHandler = null;
+
+  function readSessionValue(key) {
+    try {
+      let value = global.sessionStorage.getItem(key);
+      return value;
+    } catch(_e) {
+      return '';
+    }
+  }
+
+  function writeSessionValue(key, value) {
+    try {
+      global.sessionStorage.setItem(key, String(value));
+    } catch(_e) {
+      return null;
+    }
+  }
+
+  function send(type, payload) {
+    let msg = { source: BRIDGE_SRC, type };
+    if (payload) {
+      for (let k in payload) {
+        if (Object.prototype.hasOwnProperty.call(payload, k)) {
+          msg[k] = payload[k];
+        }
+      }
+    }
+    try {
+      global.parent.postMessage(msg, '*');
+    } catch(e) {
+      // no operation
+    }
+  }
+
+  // ─── DOM helpers ──────────────────────────────────────────────────────────
+  function getAttrs(el) {
+    if (!el) {
+      return {};
+    }
+    let raw = el.getAttribute && el.getAttribute('data-zcommerce-component');
+    if (!raw) {
+      return {};
+    }
+    try {
+      let p = JSON.parse(raw);
+      return {
+        dataid: p.id,
+        sectionid: p['data-zcommerce-section-id'],
+        name: p['data-zcommerce-component-name'],
+        key: p['data-zcommerce-component-key'],
+        jsonType: p['data-zcommerce-json-type'],
+        blockPath: p['data-zcommerce-block-path']
+      };
+    } catch(e) {
+      return {};
+    }
+  }
+
+  function isSection(dataid) {
+    return dataid && /^section_/.test(dataid);
+  }
+
+  function getSectionKey(sectionid, blockPath) {
+    if (blockPath) {
+      let dot = blockPath.indexOf('.');
+      return dot === -1 ? blockPath : blockPath.slice(0, dot);
+    }
+    return (sectionid || '').replace('section_', '');
+  }
+
+  function isCustomSection(name) {
+    return typeof name === 'string' && name.indexOf('custom_section_') === 0;
+  }
+
+  // "sectionKey.blockKey1.blockKey2" → "sectionKey.blockKey1" (or undefined for direct section blocks)
+  function getParentBlockPath(blockPath) {
+    if (!blockPath) {
+      return undefined;
+    }
+    let firstDot = blockPath.indexOf('.');
+    if (firstDot === -1) {
+      return undefined;
+    }
+    let rest = blockPath.slice(firstDot + 1);
+    if (rest.indexOf('.') === -1) {
+      return undefined;
+    } // only one block key — parent is section
+    let lastDot = blockPath.lastIndexOf('.');
+    return blockPath.slice(0, lastDot);
+  }
+
+  function buildPagePatterns(pages) {
+    return (pages || []).filter(function(p) {
+      return p.url;
+    }).map(function(p) {
+      let hasParam = /\{[^}]+\}/.test(p.url);
+      let pattern  = p.url.replace(/\{[^}]+\}/g, '([^/?#]+)');
+      return { key: p.key, regex: new RegExp(`^${pattern}(?:[/?#]|$)`), hasParam };
+    });
+  }
+
+  function matchPreviewPage(pathname) {
+    for (let i = 0; i < previewPagePatterns.length; i++) {
+      let pat = previewPagePatterns[i];
+      let m   = pathname.match(pat.regex);
+      if (m) {
+        return { key: pat.key, value: pat.hasParam ? m[1] || '' : '' };
+      }
+    }
+    return null;
+  }
+
+  function enterPreviewMode(pages) {
+    previewModeEnabled = true;
+    previewPagePatterns = buildPagePatterns(pages);
+    [overlayEl, hoverEl, nameBadgeEl, addTopEl, addBottomEl, blocksListEl, actionPanelEl].forEach(function(el) {
+      if (el) {
+        el.style.display = 'none';
+      }
+    });
+    selectedEl = null;
+    hoveredEl  = null;
+    document.removeEventListener('click',     onClick);
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('keydown',   onKeyDown);
+    previewClickHandler = function(e) {
+      let anchor = e.target.closest('a[href]');
+      if (!anchor) {
+        return;
+      }
+      let href = anchor.getAttribute('href');
+      if (!href
+          || href.startsWith('#')
+          || href.startsWith('javascript:')
+          || href.startsWith('mailto:')
+          || href.startsWith('tel:')) {
+        return;
+      }
+      let url;
+      try {
+        url = new URL(href);
+        if (url.origin !== global.location.origin) {
+          let storefrontOrigin = global._zcStorefrontDomain;
+          if (storefrontOrigin && url.origin === storefrontOrigin) {
+            url = new URL(url.pathname + url.search + url.hash, global.location.origin);
+          } else {
+            e.preventDefault();
+            return;
+          }
+        }
+      } catch(_e) {
+        try {
+          url = new URL(href, global.location.href);
+        } catch(_e2) {
+          e.preventDefault();
+          return;
+        }
+      }
+      let matched = matchPreviewPage(url.pathname);
+      if (!matched) {
+        e.preventDefault();
+        return;
+      }
+      e.preventDefault();
+      send('PAGE_NAVIGATE', { pageKey: matched.key, pageValue: matched.value });
+    };
+    document.addEventListener('click', previewClickHandler, true);
+  }
+
+  function exitPreviewMode() {
+    previewModeEnabled = false;
+    previewPagePatterns = [];
+    if (previewClickHandler) {
+      document.removeEventListener('click', previewClickHandler, true);
+      previewClickHandler = null;
+    }
+    document.addEventListener('click',     onClick);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('keydown',   onKeyDown);
+  }
+
+  function patchFetch() {
+    if (fetchPatched) {
+      return;
+    }
+    fetchPatched = true;
+    let originalFetch = global.fetch;
+    global.fetch = function(input, init) {
+      let isRequest = input instanceof Request;
+      let rawUrl = isRequest ? input.url : String(input);
+
+      let url, isRelative;
+      try {
+        url = new URL(rawUrl);
+        isRelative = false;
+      } catch(_e) {
+        isRelative = true;
+        try {
+          url = new URL(rawUrl, global.location.origin);
+        } catch(_e2) {
+          return originalFetch.call(this, input, init);
+        }
+      }
+
+      let storefrontOrigin = readSessionValue('_zcStorefrontDomain', '');
+      if (!isRelative && !(storefrontOrigin && url.origin === storefrontOrigin)) {
+        return originalFetch.call(this, input, init);
+      }
+
+      if (!isRelative) {
+        url = new URL(url.pathname + url.search + url.hash, global.location.origin);
+      }
+
+      let rawFetchParams = readSessionValue('_zcFetchExtraParams', '');
+      if (!rawFetchParams) {
+        return {};
+      }
+      let params = JSON.parse(rawFetchParams);
+      Object.keys(params).forEach(function(k) {
+        if (params[k] !== null && params[k] !== undefined) {
+          url.searchParams.set(k, String(params[k]));
+        }
+      });
+
+      let finalInput = isRequest ? new Request(url.toString(), input) : url.toString();
+      return originalFetch.call(this, finalInput, init);
+    };
+  }
+
+  function getElementById(id) {
+    let el = document.querySelector(`[data-zcommerce-component*='"data-zcommerce-component-key":"${id}"']`);
+    if (el) {
+      return el;
+    }
+    // CLI (dev mode) prefixes section keys with "section_"
+    el = document.querySelector(`[data-zcommerce-component*='"data-zcommerce-component-key":"section_${id}"']`);
+    if (el) {
+      return el;
+    }
+    el = document.querySelector(`[data-zcommerce-component*='"id":"${id}"']`);
+    if (el) {
+      return el;
+    }
+    return document.querySelector(`[data-zcommerce-component*='"id":"section_${id}"']`);
+  }
+
+  var NON_VISUAL_TAGS = { style: true, script: true, link: true, meta: true, noscript: true };
+  function getEffectiveEl(el) {
+    if (!el || global.getComputedStyle(el).display !== 'contents') {
+      return el;
+    }
+    for (var i = 0; i < el.children.length; i++) {
+      var child = el.children[i];
+      if (!NON_VISUAL_TAGS[child.tagName.toLowerCase()]) {
+        return child;
+      }
+    }
+    return el;
+  }
+
+  function updateOverlayPos(targetEl, overlay) {
+    if (targetEl && overlay) {
+      let effectiveEl = getEffectiveEl(targetEl);
+      let r      = effectiveEl.getBoundingClientRect();
+      let off    = effectiveEl.tagName.toLowerCase() === 'section' ? 0 : OFFSET;
+      let sx     = global.scrollX !== undefined ? global.scrollX : global.pageXOffset;
+      let sy     = global.scrollY !== undefined ? global.scrollY : global.pageYOffset;
+      Object.assign(overlay.style, {
+        display: 'block',
+        width: `${r.width  + off * 2}px`,
+        height: `${r.height + off * 2}px`,
+        transform: `translate(${r.left + sx - off}px, ${r.top + sy - off}px)`
+      });
+    }
+    if (selectedEl && canShowAddIcons) {
+      addTopEl.style.display    = 'flex';
+      addBottomEl.style.display = 'flex';
+      let sr  = overlayEl.getBoundingClientRect();
+      let sx2 = global.scrollX !== undefined ? global.scrollX : global.pageXOffset;
+      let sy2 = global.scrollY !== undefined ? global.scrollY : global.pageYOffset;
+      let tx  = sr.right - (selectedEl.offsetWidth / 2) - (addTopEl.offsetWidth / 2) + sx2;
+      let ty  = sr.top   - (addTopEl.offsetHeight / 2)  + sy2;
+      Object.assign(addTopEl.style, {
+        alignItems: 'center',
+        justifyContent: 'center',
+        transform: `translate(${tx}px, ${ty}px)`,
+        borderRadius: '5px'
+      });
+      Object.assign(addBottomEl.style, {
+        alignItems: 'center',
+        justifyContent: 'center',
+        transform: `translate(${tx}px, ${sr.bottom - (addBottomEl.offsetHeight / 2) + sy2}px)`,
+        borderRadius: '5px'
+      });
+    } else {
+      addTopEl.style.display    = 'none';
+      addBottomEl.style.display = 'none';
+    }
+    if (!targetEl && overlay) {
+      overlay.style.display = 'none';
+    }
+  }
+
+  function updateBadgePos() {
+    if (!selectedEl && !hoveredEl) {
+      nameBadgeEl.style.display = 'none';
+      return;
+    }
+    let refEl   = hoveredEl ? hoverEl     : overlayEl;
+    let srcEl   = hoveredEl ? hoveredEl   : selectedEl;
+    let rect    = refEl.getBoundingClientRect();
+    let vpH     = global.innerHeight || document.documentElement.clientHeight;
+    if (rect.bottom < 0 || rect.top > vpH) {
+      nameBadgeEl.style.display = 'none';
+      return;
+    }
+
+    if (badgeInfo) {
+      nameBadgeEl.innerHTML = (badgeInfo.svgHtml || '') + (badgeInfo.name || '');
+      let svgEl = nameBadgeEl.querySelector('svg');
+      if (svgEl && badgeInfo.svgClass) {
+        badgeInfo.svgClass.split(' ').forEach(function(c) {
+          if (c) {
+            svgEl.classList.add(c);
+          }
+        });
+      }
+    } else {
+      let a = getAttrs(srcEl);
+      nameBadgeEl.textContent = a.name || '';
+    }
+
+    let sx  = global.scrollX !== undefined ? global.scrollX : global.pageXOffset;
+    let sy  = global.scrollY !== undefined ? global.scrollY : global.pageYOffset;
+    let lp  = rect.left + sx + 10;
+    let tp, brStyle;
+
+    if (rect.top >= 0 && rect.top >= BADGE_H) {
+      tp      = rect.top + sy - BADGE_H;
+      brStyle = { borderTopLeftRadius: '4px', borderTopRightRadius: '4px', borderBottomLeftRadius: '0', borderBottomRightRadius: '0' };
+    } else if (rect.top >= 0) {
+      tp      = rect.top + sy;
+      brStyle = { borderTopLeftRadius: '0', borderTopRightRadius: '0', borderBottomLeftRadius: '4px', borderBottomRightRadius: '4px' };
+    } else {
+      nameBadgeEl.style.display = 'none';
+      return;
+    }
+
+    Object.assign(nameBadgeEl.style, {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transform: `translate(${lp}px, ${tp + 1}px)`
+    }, brStyle);
+
+    if (srcEl === selectedEl && canShowAddIcons) {
+      let addRect = addTopEl.getBoundingClientRect();
+      if (lp + nameBadgeEl.offsetWidth + OFFSET > addRect.left + sx) {
+        nameBadgeEl.style.display = 'none';
+      }
+    }
+  }
+
+  function updatePanelPos() {
+    if (!selectedEl) {
+      actionPanelEl.style.display = 'none';
+      return;
+    }
+    let rect = overlayEl.getBoundingClientRect();
+    let sx   = global.scrollX !== undefined ? global.scrollX : global.pageXOffset;
+    let sy   = global.scrollY !== undefined ? global.scrollY : global.pageYOffset;
+    let vpH  = global.innerHeight || document.documentElement.clientHeight;
+    let vpW  = global.innerWidth  || document.documentElement.clientWidth;
+
+    if (rect.bottom < 0 || rect.top > vpH) {
+      actionPanelEl.style.display = 'none';
+      return;
+    }
+
+    actionPanelEl.style.display = 'flex';
+    let editBtn = actionPanelEl.querySelector('#action-edit-custom-code-btn');
+    if (editBtn) {
+      let atd = getAttrs(selectedEl);
+      let skey = (atd.dataid || '').replace('section_', '');
+      editBtn.style.display = isSection(atd.dataid) && isCustomSection(skey) ? 'flex' : 'none';
+    }
+
+    let pw  = actionPanelEl.offsetWidth;
+    let ph  = actionPanelEl.offsetHeight;
+    let topR  = addTopEl.getBoundingClientRect();
+    let botR  = addBottomEl.getBoundingClientRect();
+    let lp  = rect.right + sx - pw - OFFSET;
+    let aboveAddSection = false;
+
+    if (lp - 10 < botR.right + sx) {
+      lp = botR.right + sx + 10;
+    }
+    if (lp - 10 < topR.right + sx) {
+      lp = topR.right + sx + 10;
+    }
+    if (lp + pw > vpW + sx) {
+      lp = rect.right + sx - pw - OFFSET;
+      aboveAddSection = true;
+    }
+
+    let tp;
+    let hasBottomRoom = rect.bottom > 0 && rect.bottom + ph + 10 <= vpH;
+    let hasTopRoom    = rect.top    > 0 && rect.top    > ph + 10;
+
+    if (hasBottomRoom) {
+      tp = rect.bottom + OFFSET + sy;
+      if (aboveAddSection) {
+        tp = botR.bottom + OFFSET + sy;
+      }
+    } else if (hasTopRoom) {
+      tp = rect.top + sy - ph - OFFSET;
+      if (aboveAddSection) {
+        tp = topR.top - ph - OFFSET + sy;
+      }
+    } else if (rect.top >= 0) {
+      tp = rect.top + sy + OFFSET;
+      if (aboveAddSection) {
+        tp = topR.bottom + OFFSET + sy;
+      }
+    } else {
+      actionPanelEl.style.display = 'none';
+      return;
+    }
+
+    Object.assign(actionPanelEl.style, { display: 'flex', transform: `translate(${lp}px, ${tp}px)` });
+  }
+
+  function updateBlocksListPos() {
+    if (blocksListEl.style.display === 'none') {
+      return;
+    }
+    let sx   = global.scrollX !== undefined ? global.scrollX : global.pageXOffset;
+    let sy   = global.scrollY !== undefined ? global.scrollY : global.pageYOffset;
+    let vpH  = global.innerHeight || document.documentElement.clientHeight;
+    let vpW  = global.innerWidth  || document.documentElement.clientWidth;
+    let topR = addTopEl.getBoundingClientRect();
+    let botR = addBottomEl.getBoundingClientRect();
+    let px, py;
+
+    if (addAboveClicked) {
+      px = topR.right + sx + 10;
+      if (px + blocksListEl.offsetWidth > vpW) {
+        px = topR.left + sx - blocksListEl.offsetWidth - 10;
+      }
+      py = topR.bottom + sy - blocksListEl.offsetHeight;
+      if (py < 0) {
+        py = topR.top + sy;
+      }
+    } else {
+      px = botR.left + sx - blocksListEl.offsetWidth - 10;
+      if (px < 0) {
+        px = botR.right + sx + 10;
+      }
+      py = botR.top + sy;
+      if (py + blocksListEl.offsetHeight > vpH) {
+        py = botR.bottom + sy - blocksListEl.offsetHeight;
+      }
+    }
+    Object.assign(blocksListEl.style, { transform: `translate(${px}px, ${py}px)` });
+  }
+
+  function syncAll() {
+    updateOverlayPos(selectedEl, overlayEl);
+    updateOverlayPos(hoveredEl, hoverEl);
+    updateBlocksListPos();
+    updateBadgePos();
+    updatePanelPos();
+  }
+
+  // ─── Selection helpers ────────────────────────────────────────────────────
+  function doHover(el) {
+    let style = global.getComputedStyle(el);
+    if (style.display !== 'none' && el !== selectedEl) {
+      hoveredEl = el;
+      badgeInfo = null;
+      requestAnimationFrame(syncAll);
+      updateBadgePos();
+      updatePanelPos();
+      send('COMPONENT_HOVERED', getAttrs(el));
+    } else {
+      doUnhover();
+    }
+  }
+
+  function doUnhover() {
+    hoveredEl = null;
+    updateOverlayPos(hoveredEl, hoverEl);
+    updateBadgePos();
+    updatePanelPos();
+  }
+
+  function doSelect(el, fromCanvas) {
+    if (selectedEl) {
+      resizeObs.unobserve(selectedEl);
+    }
+    selectedEl  = el;
+    badgeInfo   = null;
+    canShowAddIcons = false;
+    resizeObs.observe(selectedEl);
+    doUnhover();
+    requestAnimationFrame(syncAll);
+    updateBadgePos();
+    updatePanelPos();
+    let attrs = getAttrs(el);
+    attrs.isSelectFromCanvas = !!fromCanvas;
+    attrs.childrenCount = el.children ? el.children.length : 0;
+    send('COMPONENT_SELECTED', attrs);
+    scrollIntoView(el);
+    closeBlocksList();
+  }
+
+  function doUnselect() {
+    if (selectedEl) {
+      resizeObs.unobserve(selectedEl);
+    }
+    selectedEl = null;
+    updateOverlayPos(selectedEl, overlayEl);
+    updateBadgePos();
+    updatePanelPos();
+  }
+
+  function scrollIntoView(el) {
+    let effectiveEl = getEffectiveEl(el);
+    let r   = effectiveEl.getBoundingClientRect();
+    let vpH = global.innerHeight || document.documentElement.clientHeight;
+    let inView = r.top >= 0 && r.bottom <= vpH;
+    if (!inView) {
+      effectiveEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }
+
+  function attachOverlays() {
+    [overlayEl, hoverEl, nameBadgeEl, addTopEl, addBottomEl, blocksListEl, actionPanelEl].forEach(function(el) {
+      if (el) {
+        document.body.appendChild(el);
+      }
+    });
+  }
+
+  function dropStaleSelection() {
+    if (selectedEl && !document.body.contains(selectedEl)) {
+      if (resizeObs) {
+        resizeObs.unobserve(selectedEl);
+      }
+      selectedEl = null;
+    }
+    if (hoveredEl && !document.body.contains(hoveredEl)) {
+      hoveredEl = null;
+    }
+  }
+
+  function replaceElement(id, html) {
+    let parser = new DOMParser();
+    let newEl  = parser.parseFromString(html, 'text/html').body.firstElementChild;
+    let oldEl  = getElementById(id);
+    if (oldEl && newEl) {
+      // Selection/hover may live inside the subtree we are about to discard.
+      if (selectedEl && oldEl.contains(selectedEl)) {
+        doUnselect();
+      }
+      if (hoveredEl  && oldEl.contains(hoveredEl))  {
+        doUnhover();
+      }
+      oldEl.innerHTML = newEl.innerHTML;
+      dispatchPageLoad();
+    }
+  }
+
+  function insertElement(id, html, position) {
+    let parser = new DOMParser();
+    let newEl  = parser.parseFromString(html, 'text/html').body.firstElementChild;
+    if (!newEl) {
+      return;
+    }
+    let refEl  = getElementById(id);
+    let parent = refEl && refEl.parentElement;
+    if (!parent) {
+      return;
+    }
+    if (position === 'before') {
+      parent.insertBefore(newEl, refEl);
+    } else if (position === 'after') {
+      let next = refEl.nextSibling;
+      next ? parent.insertBefore(newEl, next) : parent.appendChild(newEl);
+    } else {
+      parent.appendChild(newEl);
+    }
+    doSelect(newEl, false);
+    dispatchPageLoad();
+  }
+
+  function changePosition(movingId, refId, shouldSelect) {
+    let movingEl = getElementById(movingId);
+    let par      = movingEl && movingEl.parentElement;
+    if (par && movingEl) {
+      par.removeChild(movingEl);
+      if (refId) {
+        let refEl = getElementById(refId);
+        refEl ? par.insertBefore(movingEl, refEl) : par.appendChild(movingEl);
+      } else {
+        par.appendChild(movingEl);
+      }
+    }
+    if (shouldSelect !== false && movingEl) {
+      doSelect(movingEl, false);
+    }
+  }
+
+  function syncOrder(orderedKeys, draggedKey) {
+    if (!orderedKeys || !orderedKeys.length) {
+      return;
+    }
+    let elements = orderedKeys.map(getElementById).filter(Boolean);
+    if (elements.length !== orderedKeys.length) {
+      return;
+    }
+    let par = elements[0].parentElement;
+    if (!par || !elements.every(function(el) {
+      return el.parentElement === par;
+    })) {
+      return;
+    }
+
+    let prefersReduced = global.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    function relToParent(el) {
+      let er = el.getBoundingClientRect();
+      let pr = par.getBoundingClientRect();
+      return { x: er.left - pr.left, y: er.top - pr.top };
+    }
+
+    let firstPos = elements.map(relToParent);
+    let frag = document.createDocumentFragment();
+    elements.forEach(function(el) {
+      frag.appendChild(el);
+    });
+    par.appendChild(frag);
+
+    if (draggedKey) {
+      let dEl = getElementById(draggedKey);
+      if (dEl) {
+        dEl.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'nearest' });
+      }
+    }
+
+    let lastPos = elements.map(relToParent);
+    syncAll();
+
+    if (!prefersReduced) {
+      elements.forEach(function(el, i) {
+        let dx = firstPos[i].x - lastPos[i].x;
+        let dy = firstPos[i].y - lastPos[i].y;
+        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) {
+          return;
+        }
+        el.style.transition = 'none';
+        el.style.transform  = `translate(${dx}px, ${dy}px)`;
+        requestAnimationFrame(function() {
+          el.style.transition = 'transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1)';
+          el.style.transform  = '';
+          function onEnd(e) {
+            if (e.propertyName !== 'transform') {
+              return;
+            }
+            el.removeEventListener('transitionend', onEnd);
+            el.style.transition = '';
+            el.style.transform  = '';
+            syncAll();
+          }
+          el.addEventListener('transitionend', onEnd);
+        });
+      });
+    }
+
+    if (draggedKey) {
+      requestAnimationFrame(function() {
+        requestAnimationFrame(syncAll);
+      });
+      if (!prefersReduced) {
+        global.setTimeout(syncAll, 260);
+      }
+    }
+  }
+
+  function dispatchPageLoad() {
+    document.dispatchEvent(new Event('DOMContentLoaded', { bubbles: true, cancelable: false }));
+    global.dispatchEvent(new Event('load', { bubbles: false, cancelable: false }));
+  }
+
+  function closeBlocksList() {
+    if (!blocksListEl) {
+      return;
+    }
+    blocksListEl.style.display = 'none';
+  }
+
+  function openBlocksList(blocks, addAbove, blockOrder, fromButtons, hasExtensions) {
+    if (!blocksListEl) {
+      return;
+    }
+    let alreadyOpen = blocksListEl.style.display !== 'none';
+    let directionChanged = fromButtons && (addAboveClicked !== addAbove);
+
+    if (!alreadyOpen || directionChanged) {
+      addAboveClicked = addAbove;
+      if (!selectedEl || !blocks) {
+        return;
+      }
+
+      let attrs = getAttrs(selectedEl);
+      let sId = getSectionKey(attrs.sectionid, attrs.blockPath);
+      let parentBP = getParentBlockPath(attrs.blockPath);
+
+      blocksListEl.innerHTML = '';
+      if (hasExtensions) {
+        buildBlocksWithTabs(blocks, addAbove, sId, attrs.jsonType, attrs.key, parentBP);
+      } else {
+        blocks.forEach(function(b) {
+          blocksListEl.appendChild(makeBlockBtn(b, sId, attrs.jsonType, attrs.key, addAbove, parentBP));
+        });
+      }
+      blocksListEl.style.display = 'flex';
+      updateBlocksListPos();
+    } else {
+      closeBlocksList();
+    }
+  }
+
+  function makeBlockBtn(block, sectionId, jsonType, key, addAbove, blockPath) {
+    let btn = document.createElement('button');
+    btn.innerHTML = (block.svgHtml || '') + (block.display_name || '');
+    let svgEl = btn.querySelector('svg');
+    if (svgEl && block.svgClass) {
+      block.svgClass.split(' ').forEach(function(c) {
+        if (c) {
+          svgEl.classList.add(c);
+        }
+      });
+    }
+    btn.classList.add('storefront-available-blocks-button');
+    btn.addEventListener('click', function() {
+      send('ADD_BLOCK', { blockName: block.block_name, sectionId, jsonType, key, addAbove, blockPath });
+      closeBlocksList();
+    });
+    return btn;
+  }
+
+  function buildBlocksWithTabs(blocks, addAbove, sectionId, jsonType, key, blockPath) {
+    let header = document.createElement('div');
+    header.className = 'storefront-bl-header';
+    let blocksTab = document.createElement('button');
+    blocksTab.type      = 'button';
+    blocksTab.className = 'storefront-bl-tab active';
+    blocksTab.textContent = i18n.blocks;
+    let extTab = document.createElement('button');
+    extTab.type      = 'button';
+    extTab.className = 'storefront-bl-tab';
+    extTab.textContent = i18n.extensions;
+
+    let scroll = document.createElement('div');
+    scroll.className = 'storefront-bl-scroll';
+    blocksListEl._scrollEl  = scroll;
+    blocksListEl._sectionId = sectionId;
+    blocksListEl._jsonType  = jsonType;
+    blocksListEl._blockPath = blockPath;
+
+    function fillBlocks() {
+      scroll.innerHTML = '';
+      let inner = document.createElement('div');
+      inner.className = 'storefront-bl-blocks-inner';
+      blocks.forEach(function(b) {
+        inner.appendChild(makeBlockBtn(b, sectionId, jsonType, key, addAbove, blockPath));
+      });
+      scroll.appendChild(inner);
+    }
+
+    function fillExtensions() {
+      scroll.innerHTML = '';
+      let loadEl = document.createElement('div');
+      loadEl.className   = 'storefront-bl-msg';
+      loadEl.textContent = i18n.loading;
+      scroll.appendChild(loadEl);
+      send('GET_EXTENSIONS', {
+        sectionId, jsonType, blockPath
+      });
+    }
+
+    blocksTab.addEventListener('click', function(e) {
+      e.stopPropagation();
+      blocksTab.classList.add('active');
+      extTab.classList.remove('active');
+      fillBlocks();
+    });
+    extTab.addEventListener('click',    function(e) {
+      e.stopPropagation();
+      extTab.classList.add('active');
+      blocksTab.classList.remove('active');
+      fillExtensions();
+    });
+
+    header.append(blocksTab, extTab);
+    fillBlocks();
+    blocksListEl.append(header, scroll);
+  }
+
+  function rebuildActionPanel() {
+    if (actionPanelEl) {
+      actionPanelEl.remove();
+    }
+    actionPanelEl = document.createElement('div');
+    actionPanelEl.classList.add('storefront-editor-action-panel');
+    actionPanelEl.style.display = 'none';
+
+    function makeBtn(id, svgKey, extraClass) {
+      let btn = document.createElement('button');
+      btn.id        = id;
+      btn.innerHTML = svgs[svgKey] || '';
+      btn.classList.add('action-panel-button');
+      if (extraClass) {
+        btn.classList.add(extraClass);
+      }
+      let svgEl = btn.querySelector('svg');
+      if (svgEl) {
+        svgEl.classList.add('action-panel-svg');
+      }
+      return btn;
+    }
+
+    let copyBtn = makeBtn('action-copy-btn', 'copy');
+    let toggleBtn = makeBtn('action-toggle-btn', 'eye');
+    let editBtn = makeBtn('action-edit-custom-code-btn', 'edit');
+    editBtn.style.display = 'none';
+    let delBtn = makeBtn('action-delete-btn', 'delete', 'delete-button');
+    let upBtn = makeBtn('action-move-up-btn', 'editor-arrow-up');
+    let downBtn = makeBtn('action-move-down-btn', 'editor-arrow-down');
+
+    function sendAction(type) {
+      if (!selectedEl) {
+        return;
+      }
+      send(type, getAttrs(selectedEl));
+    }
+
+    copyBtn.addEventListener('click',   function(e) {
+      e.stopPropagation();
+      sendAction('ACTION_COPY');
+    });
+    toggleBtn.addEventListener('click', function(e) {
+      e.stopPropagation();
+      sendAction('ACTION_TOGGLE');
+    });
+    editBtn.addEventListener('click',   function(e) {
+      e.stopPropagation();
+      if (!selectedEl) {
+        return;
+      }
+      let a = getAttrs(selectedEl);
+      send('ACTION_EDIT_CUSTOM_CODE', { sectionKey: (a.dataid || '').replace('section_', ''), jsonType: a.jsonType });
+    });
+    delBtn.addEventListener('click', function(e) {
+      e.stopPropagation();
+      sendAction('ACTION_DELETE');
+    });
+    upBtn.addEventListener('click', function(e) {
+      e.stopPropagation();
+      sendAction('ACTION_MOVE_UP');
+    });
+    downBtn.addEventListener('click', function(e) {
+      e.stopPropagation();
+      sendAction('ACTION_MOVE_DOWN');
+    });
+
+    actionPanelEl.append(copyBtn, toggleBtn, editBtn, upBtn, downBtn, delBtn);
+    document.body.appendChild(actionPanelEl);
+  }
+
+  function onMouseMove(e) {
+    requestAnimationFrame(function() {
+      if (!addBottomEl || !addTopEl) {
+        return;
+      }
+      let { target } = e;
+      let compEl = target.closest('[data-zcommerce-component], [data-zcommerce-block-path]');
+      if (!compEl && !addBottomEl.matches(':hover') && !addTopEl.matches(':hover')) {
+        doUnhover();
+        return;
+      }
+      if (compEl && hoveredEl !== compEl) {
+        doHover(compEl);
+      }
+    });
+  }
+
+  function onClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    let compEl = e.target.closest('[data-zcommerce-component]');
+    if (compEl) {
+      doSelect(compEl, true);
+    }
+  }
+
+  function onScroll()  {
+    requestAnimationFrame(syncAll);
+  }
+  function onResize()  {
+    requestAnimationFrame(syncAll);
+  }
+
+  function onKeyDown(e) {
+    let active = document.activeElement;
+    if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable)) {
+      return;
+    }
+    send('KEYDOWN', { key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey });
+  }
+
+  function onAddTop() {
+    if (!selectedEl) {
+      return;
+    }
+    send('ADD_SECTION_TOP_CLICKED', getAttrs(selectedEl));
+  }
+
+  function onAddBottom() {
+    if (!selectedEl) {
+      return;
+    }
+    let attrs = getAttrs(selectedEl);
+    let next = selectedEl.nextElementSibling;
+    let nextSibKey = null;
+    while (next) {
+      if (next.hasAttribute('data-zcommerce-component') || next.hasAttribute('data-zcommerce-block-path')) {
+        let na = getAttrs(next);
+        nextSibKey = na.jsonType === attrs.jsonType ? na.key : null;
+        break;
+      }
+      next = next.nextElementSibling;
+    }
+    send('ADD_SECTION_BOTTOM_CLICKED', { dataid: attrs.dataid, sectionid: attrs.sectionid, jsonType: attrs.jsonType, key: attrs.key, blockPath: attrs.blockPath, nextSiblingKey: nextSibKey });
+  }
+
+  function onMessage(e) {
+    let msg = e.data;
+    if (!msg || msg.source !== PARENT_SRC) {
+      return;
+    }
+    let { type } = msg;
+
+    if (type === 'INIT') {
+      if (msg.svgs) {
+        svgs  = msg.svgs;
+      }
+      if (msg.i18n) {
+        Object.assign(i18n, msg.i18n);
+      }
+      if (msg.storefrontDomain) {
+        global._zcStorefrontDomain = msg.storefrontDomain;
+        writeSessionValue('_zcStorefrontDomain', msg.storefrontDomain);
+      }
+      if (msg.fetchParams) {
+        writeSessionValue('_zcFetchExtraParams', JSON.stringify(msg.fetchParams));
+      }
+      if (msg.previewMode) {
+        enterPreviewMode(msg.allowedPages || []);
+      } else if (previewModeEnabled) {
+        exitPreviewMode();
+      }
+      rebuildActionPanel();
+      if (svgs['thick-plus']) {
+        addTopEl.innerHTML    = svgs['thick-plus'];
+        addBottomEl.innerHTML = svgs['thick-plus'];
+      }
+      send('READY', {});
+
+    } else if (type === 'SET_BADGE_INFO') {
+      badgeInfo = { svgHtml: msg.svgHtml, svgClass: msg.svgClass, name: msg.name };
+      updateBadgePos();
+
+    } else if (type === 'SET_CAN_SHOW_ADD_ICONS') {
+      canShowAddIcons = !!msg.canShow;
+      updateOverlayPos(selectedEl, overlayEl);
+      updateBadgePos();
+
+    } else if (type === 'SELECT_BY_ID') {
+      let el = getElementById(msg.id);
+      if (el) {
+        doSelect(el, false);
+      }
+
+    } else if (type === 'UNSELECT') {
+      doUnselect();
+
+    } else if (type === 'UNHOVER') {
+      doUnhover();
+
+    } else if (type === 'SET_INNER_HTML') {
+      let targetEl = getElementById(msg.id);
+      if (targetEl) {
+        targetEl.innerHTML = msg.html;
+      }
+
+    } else if (type === 'REPLACE_HTML') {
+      let parser = new DOMParser();
+      let newDoc = parser.parseFromString(msg.html || '', 'text/html');
+      document.head.innerHTML = newDoc.head.innerHTML; // scripts in innerHTML are inert — bridge unaffected
+      injectStyles(); // bridge styles were wiped by head swap; re-inject them
+      document.body.innerHTML = newDoc.body.innerHTML;
+      attachOverlays();
+      doUnselect();
+      doUnhover();
+      dispatchPageLoad();
+
+    } else if (type === 'REPLACE_ELEMENT') {
+      replaceElement(msg.id, msg.html);
+
+    } else if (type === 'INSERT_ELEMENT') {
+      insertElement(msg.id, msg.html, msg.position || 'before');
+
+    } else if (type === 'DELETE_SECTION') {
+      let delEl = getElementById(msg.id);
+      if (delEl) {
+        delEl.remove();
+        dropStaleSelection();
+      }
+
+    } else if (type === 'CHANGE_POSITION') {
+      changePosition(msg.movingId, msg.refId, msg.isSelect);
+
+    } else if (type === 'SYNC_ORDER') {
+      syncOrder(msg.orderedKeys, msg.draggedSectionKey);
+
+    } else if (type === 'TOGGLE_SECTION') {
+      let toggledEl = getElementById(msg.id);
+      if (toggledEl) {
+        toggledEl.style.display = msg.isHidden ? 'none' : '';
+      }
+
+    } else if (type === 'SCROLL_TO') {
+      let scrollEl = getElementById(msg.id);
+      if (scrollEl) {
+        let reduced = global.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        scrollEl.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'center', inline: 'nearest' });
+      }
+
+    } else if (type === 'DISPATCH_PAGE_LOAD') {
+      dispatchPageLoad();
+
+    } else if (type === 'TOGGLE_BLOCKS_LIST') {
+      openBlocksList(msg.available_blocks, msg.addAbove, msg.block_order || [], msg.fromAddButtons, msg.hasExtensions);
+
+    } else if (type === 'SET_EXTENSIONS') {
+      let scroll = blocksListEl._scrollEl;
+      if (!scroll) {
+        return;
+      }
+      scroll.innerHTML = '';
+      let exts = msg.extensions || [];
+      if (!exts.length) {
+        let emptyEl = document.createElement('div');
+        emptyEl.className   = 'storefront-bl-msg';
+        emptyEl.textContent = i18n.noExtensions;
+        scroll.appendChild(emptyEl);
+      } else {
+        let sId2 = blocksListEl._sectionId;
+        let jt = blocksListEl._jsonType;
+        let bp = blocksListEl._blockPath;
+        exts.forEach(function(ext) {
+          let btn = document.createElement('button');
+          btn.type = 'button';
+          btn.classList.add('storefront-available-blocks-button');
+          btn.textContent = ext.name || '';
+          btn.addEventListener('click', function() {
+            if (!ext.storefront_extension_id || !ext.block_json) {
+              return;
+            }
+            send('ADD_EXTENSION', { extensionId: ext.storefront_extension_id, extensionJson: ext.block_json, sectionId: sId2, jsonType: jt, blockPath: bp });
+            closeBlocksList();
+          });
+          scroll.appendChild(btn);
+        });
+      }
+
+    } else if (type === 'GET_IMAGE_ASPECT_RATIO') {
+      let img = null;
+      try {
+        img = document.querySelector(`img[src="${msg.imageSrc}"]`);
+      } catch(err) {
+        img = null;
+      }
+      if (!img) {
+        img = selectedEl;
+      }
+      let ratio = img ? img.clientWidth / img.clientHeight : 1;
+      send('IMAGE_ASPECT_RATIO', { requestId: msg.requestId, ratio });
+
+    } else if (type === 'SYNC_OVERLAYS') {
+      syncAll();
+
+    } else if (type === 'ENTER_PREVIEW') {
+      enterPreviewMode(msg.allowedPages);
+
+    } else if (type === 'EXIT_PREVIEW') {
+      exitPreviewMode();
+    }
+  }
+
+  function injectStyles() {
+    let existing = document.getElementById('__sb-bridge-styles');
+    if (existing) {
+      existing.remove();
+    }
+    let style = document.createElement('style');
+    style.id   = '__sb-bridge-styles';
+    style.textContent = [
+      '.storefront-overlay-element,.storefront-hover-element{position:absolute;border:2px solid #1b6de0;z-index:99997;pointer-events:none;display:none;border-radius:10px;top:0;left:0}',
+      '.storefront-hover-element{border-style:dashed;background-color:rgba(27,109,224,.1)}',
+      '.storefront-name-badge{position:absolute;display:none;z-index:99999;background-color:#1b6de0;color:#fff;padding:6px 12px;font-size:13px;font-weight:500;font-family:sans-serif;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15);height:32px;top:0;left:0}',
+      '.storefront-name-badge svg{height:14px;width:14px;margin-right:5px}',
+      '.storefront-name-badge .color-with-fill path,.storefront-name-badge .color-with-fill rect,.storefront-name-badge .color-with-fill circle{fill:#fff}',
+      '.storefront-name-badge .color-with-stroke path,.storefront-name-badge .color-with-stroke rect,.storefront-name-badge .color-with-stroke circle{stroke:#fff}',
+      '.storefront-add-section{cursor:pointer;position:absolute;display:none;z-index:99998;background-color:#14253e;color:#fff;font-size:11px;font-weight:500;padding:5px;top:0;left:0}',
+      '.storefront-add-section svg{fill:#fff;width:12px;height:12px}',
+      '.storefront-available-blocks-list{cursor:default;position:absolute;display:none;z-index:100000;background-color:#fff;flex-direction:column;padding:5px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.15);min-width:220px;max-height:300px;top:0;left:0}',
+      '.storefront-bl-header{display:flex;justify-content:space-between;background-color:#f2f2f9;border-radius:6px;padding:4px;gap:4px;flex-shrink:0;margin-bottom:4px}',
+      '.storefront-bl-tab{flex:1;border:1px solid transparent;border-radius:8px;background:transparent;color:#454c67;font-size:13px;font-weight:400;font-family:sans-serif;padding:8px 6px;cursor:pointer}',
+      '.storefront-bl-tab.active{background-color:#fff;color:#202432;border-color:#eeeded}',
+      '.storefront-bl-scroll{display:flex;flex-direction:column;overflow-y:auto;max-height:220px;flex:1;min-height:80px;gap:2px}',
+      '.storefront-bl-msg{color:#6c757d;font-size:13px;padding:12px 8px;text-align:center;font-family:sans-serif}',
+      '.storefront-available-blocks-button{padding:5px;border-radius:6px;font-size:13px;font-weight:300;font-family:sans-serif;width:100%;min-width:70px;text-align:start;display:flex;align-items:center}',
+      '.storefront-available-blocks-button svg{height:14px;width:14px;margin-right:5px;fill:none}',
+      '.storefront-available-blocks-button:hover{background-color:#558BF3;color:#fff}',
+      '.storefront-available-blocks-button:hover .color-with-fill path,.storefront-available-blocks-button:hover .color-with-fill rect,.storefront-available-blocks-button:hover .color-with-fill circle{fill:#fff}',
+      '.storefront-available-blocks-button:hover .color-with-stroke path,.storefront-available-blocks-button:hover .color-with-stroke rect,.storefront-available-blocks-button:hover .color-with-stroke circle{stroke:#fff}',
+      '.storefront-editor-action-panel{position:absolute;display:flex;z-index:100000;background-color:#fff;border:1px solid #dfdfed;border-radius:7px;padding:8px 0;flex-direction:row;align-items:center;box-shadow:0 3px 8px 0 rgba(0,0,0,.24);top:0;left:0}',
+      '.action-panel-button{background:transparent;cursor:pointer;padding:0 8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s,border-radius .2s;border-right:1px solid #dfdfed}',
+      '.action-panel-button:hover .action-panel-svg{fill:#1b6de0}',
+      '.action-panel-button.delete-button{border:0}',
+      '.action-panel-button.delete-button .action-panel-svg{fill:#dc3545}',
+      '.action-panel-button.delete-button:hover .action-panel-svg{fill:#c72121}',
+      '.action-panel-svg{width:18px;height:18px;fill:#58627f;transition:fill .2s}'
+    ].join('\n');
+    document.head.appendChild(style);
+  }
+
+  function mount() {
+    patchFetch();
+    injectStyles();
+
+    overlayEl   = document.createElement('div');
+    overlayEl.className   = 'storefront-overlay-element';
+    hoverEl     = document.createElement('div');
+    hoverEl.className     = 'storefront-hover-element';
+    nameBadgeEl = document.createElement('div');
+    nameBadgeEl.className = 'storefront-name-badge';
+    addTopEl    = document.createElement('div');
+    addTopEl.className    = 'storefront-add-section';
+    addBottomEl = document.createElement('div');
+    addBottomEl.className = 'storefront-add-section';
+    blocksListEl = document.createElement('div');
+    blocksListEl.className = 'storefront-available-blocks-list';
+    blocksListEl.style.display = 'none';
+
+    attachOverlays();
+
+    _bodyObserver = new MutationObserver(function() {
+      let detached = [overlayEl, hoverEl, nameBadgeEl, addTopEl, addBottomEl, blocksListEl, actionPanelEl]
+        .some(function(el) {
+          return el && !document.body.contains(el);
+        });
+      if (detached) {
+        attachOverlays();
+        dropStaleSelection();
+        syncAll();
+      }
+    });
+    _bodyObserver.observe(document.body, { childList: true });
+
+    actionPanelEl = document.createElement('div');
+    actionPanelEl.classList.add('storefront-editor-action-panel');
+    actionPanelEl.style.display = 'none';
+    document.body.appendChild(actionPanelEl);
+
+    resizeObs = new ResizeObserver(syncAll);
+
+    addTopEl.addEventListener('click',    onAddTop);
+    addBottomEl.addEventListener('click', onAddBottom);
+    if (!previewModeEnabled) {
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('click',     onClick);
+      document.addEventListener('keydown',   onKeyDown);
+      global.addEventListener('scroll',  onScroll);
+      global.addEventListener('resize',  onResize);
+    }
+    global.addEventListener('message', onMessage);
+
+    send('BRIDGE_MOUNTED', {});
+  }
+
+  function unmount() {
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('click',     onClick);
+    document.removeEventListener('keydown',   onKeyDown);
+    global.removeEventListener('scroll',   onScroll);
+    global.removeEventListener('resize',   onResize);
+    global.removeEventListener('message',  onMessage);
+
+    if (addTopEl) {
+      addTopEl.removeEventListener('click', onAddTop);
+    }
+    if (addBottomEl) {
+      addBottomEl.removeEventListener('click', onAddBottom);
+    }
+
+    if (_bodyObserver) {
+      _bodyObserver.disconnect();
+      _bodyObserver = null;
+    }
+    if (resizeObs) {
+      resizeObs.disconnect();
+      resizeObs = null;
+    }
+
+    [overlayEl, hoverEl, actionPanelEl, nameBadgeEl, addTopEl, addBottomEl, blocksListEl].forEach(function(el) {
+      if (el && el.parentNode) {
+        el.parentNode.removeChild(el);
+      }
+    });
+
+    let styleEl = document.getElementById('__sb-bridge-styles');
+    if (styleEl) {
+      styleEl.remove();
+    }
+
+    global.__sbBridgeActive = false;
+  }
+
+  try {
+    global.parent.postMessage({ source: 'sb-bridge', type: 'BRIDGE_SCRIPT_STARTED' }, '*');
+  } catch(e) {
+    // no operation
+  }
+
+  global.addEventListener('pagehide',     unmount, { once: true });
+  global.addEventListener('beforeunload', unmount, { once: true });
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', mount, { once: true });
+  } else {
+    mount();
+  }
+
+})(window);