@407dev/cms-astro 0.1.0

package/src/preview/bridge-script.ts

@@ -0,0 +1,763 @@
+import { chromeTokens } from '@407dev/design-tokens/tokens';
+import { resolveEditorOrigins } from './origins';
+
+export const BRIDGE_PROTOCOL_VERSION = 1;
+
+export interface BridgeScriptOptions {
+  editorOrigins?: string[];
+}
+
+export function buildBridgeScript(options: BridgeScriptOptions = {}): string {
+  const allowedOrigins = resolveEditorOrigins(options.editorOrigins);
+  const allowedOriginsJson = JSON.stringify(allowedOrigins);
+
+  return `(function() {
+  if (typeof window === 'undefined') return;
+  if (window.__CMS_BRIDGE_INITIALIZED__) return;
+  window.__CMS_BRIDGE_INITIALIZED__ = true;
+
+  var PROTOCOL_VERSION = ${BRIDGE_PROTOCOL_VERSION};
+  var allowedOrigins = ${allowedOriginsJson};
+  var connectedOrigin = null;
+  var connectedSource = null;
+  var activeKey = null;
+  var watchedAnchors = [];
+  var rafScheduled = false;
+  var isPatchingDom = false;
+  var debounceRescanTimer = null;
+
+  function normalizeOrigin(raw) {
+    if (!raw || typeof raw !== 'string') return null;
+    var trimmed = raw.trim();
+    if (!trimmed) return null;
+    try {
+      var withScheme = /^[a-zA-Z][a-zA-Z0-9+.-]*:\\/\\//.test(trimmed) ? trimmed : 'https://' + trimmed;
+      var url = new URL(withScheme);
+      if (!url.protocol || !url.host) return null;
+      return (url.protocol + '//' + url.host).toLowerCase();
+    } catch (e) {
+      return null;
+    }
+  }
+
+  var normalizedAllowed = allowedOrigins.map(normalizeOrigin).filter(Boolean);
+
+  function isOriginAllowed(origin) {
+    var norm = normalizeOrigin(origin);
+    if (!norm) return false;
+    return normalizedAllowed.indexOf(norm) !== -1;
+  }
+
+  function postToEditor(msg) {
+    if (!connectedSource || !connectedOrigin) return;
+    try {
+      connectedSource.postMessage(msg, connectedOrigin);
+    } catch (err) {
+      // Failed to post
+    }
+  }
+
+  // Inject Bridge Styles
+  var isEmbedded = false;
+  try {
+    isEmbedded = window.self !== window.top || window.parent !== window;
+  } catch (_e) {
+    isEmbedded = true;
+  }
+
+  var toolbarTag = 'astro-' + 'dev-toolbar';
+
+  function ensureBridgeStyles() {
+    if (typeof document === 'undefined' || !document || typeof document.getElementById !== 'function') return;
+    if (document.getElementById('cms-bridge-styles')) return;
+    var style = document.createElement('style');
+    style.id = 'cms-bridge-styles';
+    style.textContent = [
+      isEmbedded ? toolbarTag + ' { display: none !important; }' : '',
+      'html[data-cms-comment-mode],',
+      'html[data-cms-comment-mode] * {',
+      '  cursor: crosshair !important;',
+      '}',
+      'html[data-cms-edit-mode] [data-cms-field],',
+      'html[data-cms-edit-mode] [data-cms-entry-field] {',
+      '  cursor: pointer !important;',
+      '  outline: 1px dashed rgba(99, 102, 241, 0.5) !important;',
+      '  outline-offset: 2px !important;',
+      '  transition: outline 0.15s ease-in-out !important;',
+      '}',
+      'html[data-cms-edit-mode] [data-cms-field]:hover,',
+      'html[data-cms-edit-mode] [data-cms-entry-field]:hover {',
+      '  outline: 2px solid ${chromeTokens.primary} !important;',
+      '  outline-offset: 2px !important;',
+      '}',
+      'html[data-cms-edit-mode] [data-cms-group] {',
+      '  outline: 1px dashed rgba(16, 185, 129, 0.4) !important;',
+      '  outline-offset: 3px !important;',
+      '}',
+      'html[data-cms-edit-mode] [data-cms-group]:hover {',
+      '  outline: 2px solid ${chromeTokens.success} !important;',
+      '  outline-offset: 3px !important;',
+      '}'
+    ].filter(Boolean).join('\\n');
+
+    var target = document.head || document.documentElement;
+    if (target) {
+      target.appendChild(style);
+    }
+  }
+
+  function hideDevToolbar() {
+    if (!isEmbedded) return;
+    ensureBridgeStyles();
+    if (typeof document === 'undefined' || !document || typeof document.querySelector !== 'function') return;
+    try {
+      var tb = document.querySelector(toolbarTag);
+      if (tb && tb instanceof HTMLElement) {
+        tb.style.setProperty('display', 'none', 'important');
+      }
+    } catch (_e) {}
+  }
+
+  ensureBridgeStyles();
+  hideDevToolbar();
+
+  function inferFieldKind(el) {
+    if (!el) return 'unknown';
+    var tag = el.tagName ? el.tagName.toLowerCase() : '';
+    if (tag === 'img') return 'image';
+    if (tag === 'video') return 'video';
+    var explicitKind = el.getAttribute('data-cms-kind');
+    if (explicitKind) return explicitKind;
+    if (el.classList.contains('rich-body') || el.classList.contains('cms-richtext') || el.getAttribute('data-cms-richtext') === 'true') {
+      return 'richtext';
+    }
+    return 'text';
+  }
+
+  function getElementRect(el) {
+    var r = el.getBoundingClientRect();
+    return {
+      top: r.top,
+      left: r.left,
+      width: r.width,
+      height: r.height
+    };
+  }
+
+  function parseGroupAttr(raw) {
+    if (!raw) return undefined;
+    var idx = raw.indexOf(':');
+    if (idx === -1) return { group: raw, scope: '' };
+    return {
+      group: raw.slice(0, idx),
+      scope: raw.slice(idx + 1)
+    };
+  }
+
+  function scanRenderedFields() {
+    var fieldEls = document.querySelectorAll('[data-cms-field], [data-cms-entry-field]');
+    var fieldMap = {};
+
+    for (var i = 0; i < fieldEls.length; i++) {
+      var el = fieldEls[i];
+      var key = el.getAttribute('data-cms-field') || el.getAttribute('data-cms-entry-field') || '';
+      if (!key) continue;
+
+      var isEntry = el.hasAttribute('data-cms-entry-field');
+      var groupEl = el.closest('[data-cms-group]');
+      var collectionEl = el.closest('[data-cms-collection]');
+      var groupName = undefined;
+      if (groupEl) {
+        var g = parseGroupAttr(groupEl.getAttribute('data-cms-group'));
+        if (g) groupName = g.group;
+      }
+
+      var entryRef = undefined;
+      if (isEntry || collectionEl) {
+        entryRef = {
+          collection: collectionEl ? collectionEl.getAttribute('data-cms-collection') || '' : '',
+          slug: collectionEl ? collectionEl.getAttribute('data-cms-entry') || '' : '',
+          path: isEntry ? key : key
+        };
+      }
+
+      var uniqueId = (isEntry && entryRef ? entryRef.collection + ':' + entryRef.slug + ':' : '') + key;
+
+      if (!fieldMap[uniqueId]) {
+        fieldMap[uniqueId] = {
+          key: key,
+          kind: inferFieldKind(el),
+          group: groupName,
+          entryRef: entryRef,
+          instances: 1
+        };
+      } else {
+        fieldMap[uniqueId].instances++;
+      }
+    }
+
+    var fields = [];
+    for (var k in fieldMap) {
+      if (Object.prototype.hasOwnProperty.call(fieldMap, k)) {
+        fields.push(fieldMap[k]);
+      }
+    }
+
+    window.__CMS_FIELDS__ = fields;
+    window.__CMS_RESCAN__ = scanRenderedFields;
+
+    try {
+      document.dispatchEvent(new CustomEvent('cms:fields-updated', { detail: fields }));
+    } catch (_e) {}
+
+    postToEditor({
+      source: 'cms-preview',
+      v: PROTOCOL_VERSION,
+      type: 'rendered-fields',
+      fields: fields
+    });
+  }
+
+  function debouncedRescan() {
+    if (isPatchingDom) return;
+    if (debounceRescanTimer) clearTimeout(debounceRescanTimer);
+    debounceRescanTimer = setTimeout(function() {
+      scanRenderedFields();
+      scheduleRectsUpdate();
+    }, 150);
+  }
+
+  var currentObserver = null;
+  function setupMutationObserver() {
+    if (typeof MutationObserver === 'undefined' || !document.body) return;
+    if (currentObserver) {
+      try {
+        currentObserver.disconnect();
+      } catch (_e) {}
+    }
+    currentObserver = new MutationObserver(function(mutations) {
+      if (isPatchingDom) return;
+      hideDevToolbar();
+      debouncedRescan();
+    });
+    currentObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributeFilter: ['data-cms-field', 'data-cms-entry-field', 'data-cms-group', 'data-cms-collection', 'data-cms-entry']
+    });
+  }
+
+  function buildStableSelector(target) {
+    if (!target || !target.tagName) return '';
+    if (target === document.documentElement) return 'html';
+    if (target === document.body) return 'body';
+
+    var parts = [];
+    var curr = target;
+    var maxLevels = 8;
+
+    while (curr && curr !== document.documentElement && parts.length < maxLevels) {
+      if (curr === document.body) {
+        parts.unshift('body');
+        break;
+      }
+      var id = curr.getAttribute('id');
+      if (id && id.trim()) {
+        var escapedId = (typeof CSS !== 'undefined' && CSS.escape) ? CSS.escape(id.trim()) : id.trim();
+        parts.unshift('#' + escapedId);
+        break;
+      }
+      var tag = curr.tagName ? curr.tagName.toLowerCase() : '';
+      if (!tag) break;
+      var count = 1;
+      var sib = curr.previousElementSibling;
+      while (sib) {
+        if (sib.tagName && sib.tagName.toLowerCase() === tag) {
+          count++;
+        }
+        sib = sib.previousElementSibling;
+      }
+      parts.unshift(tag + ':nth-of-type(' + count + ')');
+      curr = curr.parentElement;
+    }
+
+    return parts.join(' > ');
+  }
+
+  function buildElementLabel(el) {
+    if (!el || !el.tagName) return 'element';
+
+    var ariaLabel = el.getAttribute('aria-label');
+    if (ariaLabel && ariaLabel.trim()) {
+      return ariaLabel.trim();
+    }
+
+    var id = el.getAttribute('id');
+    if (id && id.trim()) {
+      return '#' + id.trim();
+    }
+
+    var tag = el.tagName.toLowerCase();
+
+    if (tag === 'nav') return 'Navigation';
+    if (tag === 'header') return 'Header';
+    if (tag === 'footer') return 'Footer';
+    if (tag === 'aside') return 'Sidebar';
+    if (tag === 'form') return 'Form';
+
+    if (tag === 'img') {
+      var alt = el.getAttribute('alt');
+      if (alt && alt.trim()) return alt.trim();
+      return 'img';
+    }
+
+    if (tag === 'a' || tag === 'button') {
+      var text = (el.textContent || '').trim().replace(/\\s+/g, ' ');
+      if (text) {
+        return text.length > 40 ? text.slice(0, 37) + '...' : text;
+      }
+      return tag;
+    }
+
+    return tag || 'element';
+  }
+
+  function buildCandidateEntry(targetEl, clientX, clientY) {
+    if (!targetEl || !targetEl.tagName) return null;
+    var selector = buildStableSelector(targetEl);
+    if (!selector) return null;
+    var all = Array.prototype.slice.call(document.querySelectorAll(selector));
+    var instance = Math.max(0, all.indexOf(targetEl));
+    var hitRect = targetEl.getBoundingClientRect();
+    var offsetX = typeof clientX === 'number' ? Math.round(clientX - hitRect.left) : 0;
+    var offsetY = typeof clientY === 'number' ? Math.round(clientY - hitRect.top) : 0;
+    return {
+      selector: selector,
+      instance: instance,
+      kind: 'element',
+      label: buildElementLabel(targetEl),
+      offsetX: offsetX,
+      offsetY: offsetY,
+      rect: getElementRect(targetEl)
+    };
+  }
+
+  function buildAnchorChain(el, clientX, clientY) {
+    var chain = [];
+    var curr = el;
+    while (curr && curr !== document.documentElement && curr !== document.body) {
+      var hit = curr.closest('[data-cms-field], [data-cms-entry-field], [data-cms-group], [data-cms-collection][data-cms-entry]');
+      if (!hit) break;
+
+      var selector = '';
+      var kind = 'unknown';
+      var label = '';
+
+      if (hit.hasAttribute('data-cms-field')) {
+        var fieldKey = hit.getAttribute('data-cms-field') || '';
+        selector = '[data-cms-field="' + fieldKey + '"]';
+        kind = inferFieldKind(hit);
+        label = fieldKey;
+      } else if (hit.hasAttribute('data-cms-entry-field')) {
+        var entryFieldKey = hit.getAttribute('data-cms-entry-field') || '';
+        selector = '[data-cms-entry-field="' + entryFieldKey + '"]';
+        kind = inferFieldKind(hit);
+        label = entryFieldKey;
+      } else if (hit.hasAttribute('data-cms-group')) {
+        var groupAttr = hit.getAttribute('data-cms-group') || '';
+        selector = '[data-cms-group="' + groupAttr + '"]';
+        kind = 'group';
+        var parsed = parseGroupAttr(groupAttr);
+        label = parsed ? parsed.group : groupAttr;
+      } else if (hit.hasAttribute('data-cms-collection') && hit.hasAttribute('data-cms-entry')) {
+        var col = hit.getAttribute('data-cms-collection') || '';
+        var ent = hit.getAttribute('data-cms-entry') || '';
+        selector = '[data-cms-collection="' + col + '"][data-cms-entry="' + ent + '"]';
+        kind = 'entry';
+        label = col + '/' + ent;
+      }
+
+      if (selector) {
+        var all = Array.prototype.slice.call(document.querySelectorAll(selector));
+        var instance = Math.max(0, all.indexOf(hit));
+        var hitRect = hit.getBoundingClientRect();
+        var offsetX = typeof clientX === 'number' ? Math.round(clientX - hitRect.left) : 0;
+        var offsetY = typeof clientY === 'number' ? Math.round(clientY - hitRect.top) : 0;
+        chain.push({
+          selector: selector,
+          instance: instance,
+          kind: kind,
+          label: label,
+          offsetX: offsetX,
+          offsetY: offsetY,
+          rect: getElementRect(hit)
+        });
+      }
+
+      curr = hit.parentElement;
+    }
+
+    if (chain.length > 0) {
+      return chain;
+    }
+
+    if (!el || !el.tagName) return chain;
+
+    var interactiveEl = el.closest ? el.closest('a, button') : null;
+    var selfEl = interactiveEl || (el.closest ? el.closest('a, button, nav, header, footer, aside, main, section, article, form, img, svg, [role]') : null) || el;
+    var landmarkEl = selfEl.closest ? selfEl.closest('nav, header, footer, aside, main, section, article, form, [role="navigation"], [role="banner"], [role="contentinfo"]') : null;
+
+    var selfEntry = buildCandidateEntry(selfEl, clientX, clientY);
+    if (selfEntry) {
+      chain.push(selfEntry);
+    }
+
+    if (landmarkEl && landmarkEl !== selfEl) {
+      var landmarkEntry = buildCandidateEntry(landmarkEl, clientX, clientY);
+      if (landmarkEntry) {
+        chain.push(landmarkEntry);
+      }
+    }
+
+    return chain;
+  }
+
+  function resolveAnchorEl(anchor) {
+    if (!anchor || !anchor.selector) return null;
+    try {
+      var els = document.querySelectorAll(anchor.selector);
+      if (!els || els.length === 0) return null;
+      var inst = typeof anchor.instance === 'number' ? anchor.instance : 0;
+      if (inst >= 0 && inst < els.length) return els[inst];
+      return els[0];
+    } catch (_e) {
+      return null;
+    }
+  }
+
+  function scheduleRectsUpdate() {
+    if (rafScheduled) return;
+    rafScheduled = true;
+    requestAnimationFrame(function() {
+      rafScheduled = false;
+      var rects = {};
+      if (activeKey) {
+        var el = document.querySelector('[data-cms-field="' + activeKey + '"], [data-cms-entry-field="' + activeKey + '"]');
+        if (el) {
+          rects[activeKey] = getElementRect(el);
+        }
+      }
+      postToEditor({
+        source: 'cms-preview',
+        v: PROTOCOL_VERSION,
+        type: 'rects-update',
+        rects: rects,
+        scrollY: window.scrollY || window.pageYOffset || 0
+      });
+
+      if (watchedAnchors && watchedAnchors.length > 0) {
+        var anchorRects = {};
+        for (var a = 0; a < watchedAnchors.length; a++) {
+          var wAnchor = watchedAnchors[a];
+          var resolvedEl = resolveAnchorEl(wAnchor);
+          if (resolvedEl) {
+            anchorRects[wAnchor.id] = getElementRect(resolvedEl);
+          } else {
+            anchorRects[wAnchor.id] = null;
+          }
+        }
+        postToEditor({
+          source: 'cms-preview',
+          v: PROTOCOL_VERSION,
+          type: 'anchor-rects',
+          rects: anchorRects
+        });
+      }
+    });
+  }
+
+  // Click handler
+  document.addEventListener('click', function(e) {
+    if (document.documentElement.hasAttribute('data-cms-comment-mode')) {
+      e.preventDefault();
+      e.stopPropagation();
+      var target = e.target;
+      if (!target || !(target instanceof Element)) return;
+
+      var docWidth = Math.max(
+        document.documentElement.scrollWidth || 0,
+        document.body ? document.body.scrollWidth : 0,
+        window.innerWidth || 0
+      );
+      var docHeight = Math.max(
+        document.documentElement.scrollHeight || 0,
+        document.body ? document.body.scrollHeight : 0,
+        window.innerHeight || 0
+      );
+      var pageX = e.pageX !== undefined ? e.pageX : (e.clientX + (window.scrollX || window.pageXOffset || 0));
+      var pageY = e.pageY !== undefined ? e.pageY : (e.clientY + (window.scrollY || window.pageYOffset || 0));
+      var pageXPct = docWidth > 0 ? Math.round((pageX / docWidth) * 10000) / 100 : 0;
+      var pageYPct = docHeight > 0 ? Math.round((pageY / docHeight) * 10000) / 100 : 0;
+
+      var chain = buildAnchorChain(target, e.clientX, e.clientY);
+      var clickRect = chain.length > 0 ? chain[0].rect : {
+        top: e.clientY,
+        left: e.clientX,
+        width: 0,
+        height: 0
+      };
+
+      postToEditor({
+        source: 'cms-preview',
+        v: PROTOCOL_VERSION,
+        type: 'comment-click',
+        chain: chain,
+        point: { pageXPct: pageXPct, pageYPct: pageYPct },
+        rect: clickRect
+      });
+      return;
+    }
+
+    if (!document.documentElement.hasAttribute('data-cms-edit-mode')) return;
+    var target = e.target;
+    if (!target || !(target instanceof Element)) return;
+
+    var fieldEl = target.closest('[data-cms-field], [data-cms-entry-field]');
+    var groupEl = target.closest('[data-cms-group]');
+
+    if (fieldEl) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var isEntry = fieldEl.hasAttribute('data-cms-entry-field');
+      var key = fieldEl.getAttribute('data-cms-field') || fieldEl.getAttribute('data-cms-entry-field') || '';
+      var kind = inferFieldKind(fieldEl);
+      var rect = getElementRect(fieldEl);
+      activeKey = key;
+
+      var selector = isEntry ? '[data-cms-entry-field="' + key + '"]' : '[data-cms-field="' + key + '"]';
+      var all = Array.prototype.slice.call(document.querySelectorAll(selector));
+      var instance = Math.max(0, all.indexOf(fieldEl));
+
+      var collectionEl = fieldEl.closest('[data-cms-collection]');
+      var entryRef = (isEntry || collectionEl) ? {
+        collection: collectionEl ? collectionEl.getAttribute('data-cms-collection') || '' : '',
+        slug: collectionEl ? collectionEl.getAttribute('data-cms-entry') || '' : '',
+        path: isEntry ? key : key
+      } : undefined;
+
+      var groupPath = groupEl ? parseGroupAttr(groupEl.getAttribute('data-cms-group')) : undefined;
+
+      try {
+        document.dispatchEvent(new CustomEvent('cms:field-selected', {
+          detail: {
+            key: key,
+            kind: kind,
+            entryRef: entryRef,
+            groupPath: groupPath
+          }
+        }));
+      } catch (_e) {}
+
+      postToEditor({
+        source: 'cms-preview',
+        v: PROTOCOL_VERSION,
+        type: 'field-click',
+        key: key,
+        kind: kind,
+        rect: rect,
+        instance: instance,
+        entryRef: entryRef,
+        groupPath: groupPath
+      });
+      return;
+    }
+
+    if (groupEl) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var g = parseGroupAttr(groupEl.getAttribute('data-cms-group'));
+      if (g) {
+        var gRect = getElementRect(groupEl);
+        postToEditor({
+          source: 'cms-preview',
+          v: PROTOCOL_VERSION,
+          type: 'group-click',
+          group: g.group,
+          scope: g.scope,
+          rect: gRect
+        });
+      }
+    }
+  }, true);
+
+  // Message handler
+  window.addEventListener('message', function(e) {
+    var data = e.data;
+    if (!data || typeof data !== 'object') return;
+    if (data.source !== 'cms-editor') return;
+
+    if (data.type === 'hello') {
+      if (!isOriginAllowed(e.origin)) return;
+      connectedOrigin = e.origin;
+      connectedSource = e.source;
+
+      postToEditor({
+        source: 'cms-preview',
+        v: PROTOCOL_VERSION,
+        type: 'ready',
+        protocolVersion: PROTOCOL_VERSION,
+        capabilities: ['comments']
+      });
+
+      scanRenderedFields();
+      return;
+    }
+
+    if (!connectedOrigin || e.origin !== connectedOrigin) return;
+
+    if (data.type === 'highlight-mode') {
+      if (data.on) {
+        document.documentElement.setAttribute('data-cms-edit-mode', 'true');
+      } else {
+        document.documentElement.removeAttribute('data-cms-edit-mode');
+      }
+      return;
+    }
+
+    if (data.type === 'comment-mode') {
+      if (data.on) {
+        document.documentElement.setAttribute('data-cms-comment-mode', 'true');
+      } else {
+        document.documentElement.removeAttribute('data-cms-comment-mode');
+      }
+      return;
+    }
+
+    if (data.type === 'watch-anchors') {
+      watchedAnchors = Array.isArray(data.anchors) ? data.anchors : [];
+      scheduleRectsUpdate();
+      return;
+    }
+
+    if (data.type === 'scroll-to-anchor') {
+      var sId = data.id;
+      var targetItem = null;
+      for (var si = 0; si < watchedAnchors.length; si++) {
+        if (watchedAnchors[si].id === sId) {
+          targetItem = watchedAnchors[si];
+          break;
+        }
+      }
+      if (targetItem) {
+        var elToScroll = resolveAnchorEl(targetItem);
+        if (elToScroll) {
+          elToScroll.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          scheduleRectsUpdate();
+        }
+      }
+      return;
+    }
+
+    if (data.type === 'patch') {
+      isPatchingDom = true;
+      var patchKey = data.key;
+      var patchKind = data.kind;
+      var patchVal = data.value;
+      var patchEntry = data.entryRef;
+
+      var patchSelector;
+      var fPath = patchEntry && patchEntry.path ? patchEntry.path : patchKey;
+      if (patchEntry && (patchEntry.collection || patchEntry.slug)) {
+        var colAttr = patchEntry.collection ? '[data-cms-collection="' + patchEntry.collection + '"]' : '';
+        var entryAttr = patchEntry.slug ? '[data-cms-entry="' + patchEntry.slug + '"]' : '';
+        var scopeSel = colAttr + entryAttr;
+        patchSelector = scopeSel + ' [data-cms-entry-field="' + fPath + '"], ' +
+                        scopeSel + '[data-cms-entry-field="' + fPath + '"]';
+      } else if (patchEntry) {
+        patchSelector = '[data-cms-entry-field="' + fPath + '"]';
+      } else {
+        patchSelector = '[data-cms-field="' + patchKey + '"]';
+      }
+
+      var matchingEls = document.querySelectorAll(patchSelector);
+      for (var j = 0; j < matchingEls.length; j++) {
+        var mEl = matchingEls[j];
+        var isStructured = patchKind === 'geo.area' || patchKind === 'geoArea' ||
+                           patchKind === 'address' || patchKind === 'address.list' ||
+                           patchKind === 'media.videoList' || patchKind === 'videoList' ||
+                           mEl.getAttribute('data-cms-kind') === 'geo.area' ||
+                           mEl.getAttribute('data-cms-kind') === 'address.list' ||
+                           mEl.getAttribute('data-cms-kind') === 'media.videoList';
+
+        if (patchKind === 'image' || mEl.tagName.toLowerCase() === 'img') {
+          if (patchVal && typeof patchVal === 'object') {
+            if (patchVal.url) mEl.setAttribute('src', patchVal.url);
+            if (patchVal.alt !== undefined) mEl.setAttribute('alt', patchVal.alt);
+          } else if (typeof patchVal === 'string') {
+            mEl.setAttribute('src', patchVal);
+          }
+        } else if (patchKind === 'video' || mEl.tagName.toLowerCase() === 'video') {
+          if (patchVal && typeof patchVal === 'object') {
+            if (patchVal.url) mEl.setAttribute('src', patchVal.url);
+            if (patchVal.poster !== undefined) mEl.setAttribute('poster', patchVal.poster);
+          } else if (typeof patchVal === 'string') {
+            mEl.setAttribute('src', patchVal);
+          }
+          if (typeof mEl.load === 'function') mEl.load();
+        } else if (isStructured || (patchVal && typeof patchVal === 'object')) {
+          // Structured non-image field values (e.g. videoList, geoArea, address) cannot be rendered
+          // via simple textContent replacement without producing [object Object].
+          // Skip the text write and leave server-rendered markup intact; structured fields refresh via reload.
+        } else {
+          mEl.textContent = patchVal !== null && patchVal !== undefined ? String(patchVal) : '';
+        }
+      }
+
+      isPatchingDom = false;
+      scanRenderedFields();
+      scheduleRectsUpdate();
+      return;
+    }
+
+    if (data.type === 'scroll-to') {
+      var scrollKey = data.key;
+      var scrollInstance = typeof data.instance === 'number' ? data.instance : 0;
+      var scrollEls = document.querySelectorAll('[data-cms-field="' + scrollKey + '"], [data-cms-entry-field="' + scrollKey + '"]');
+      if (scrollEls.length > scrollInstance) {
+        scrollEls[scrollInstance].scrollIntoView({ behavior: 'smooth', block: 'center' });
+        activeKey = scrollKey;
+        scheduleRectsUpdate();
+      }
+      return;
+    }
+
+    if (data.type === 'reload') {
+      window.location.reload();
+      return;
+    }
+  });
+
+  function handlePageTransition() {
+    hideDevToolbar();
+    scanRenderedFields();
+    setupMutationObserver();
+  }
+
+  window.addEventListener('scroll', scheduleRectsUpdate, { passive: true });
+  window.addEventListener('resize', scheduleRectsUpdate, { passive: true });
+
+  document.addEventListener('astro:page-load', handlePageTransition);
+  document.addEventListener('astro:after-swap', handlePageTransition);
+  window.addEventListener('popstate', handlePageTransition);
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      handlePageTransition();
+    });
+  } else {
+    handlePageTransition();
+  }
+})();`;
+}