npm - @dotcms/uve - Versions diffs - 1.6.0 → 1.7.0 - Mend

@dotcms/uve 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md +24 -22
package/index.esm.js +1 -1
package/internal.cjs.js +8 -1
package/internal.esm.js +1 -1
package/package.json +1 -1
package/public.cjs.js +434 -211
package/public.esm.js +427 -211
package/src/internal/constants.d.ts +23 -0
package/src/internal/contentlet-sentinel.constants.d.ts +13 -0
package/src/internal/events.d.ts +36 -8
package/src/internal/index.d.ts +1 -0
package/src/internal.d.ts +0 -1
package/src/lib/dom/dom.utils.d.ts +60 -1
package/src/script/utils.d.ts +0 -28
package/src/lib/dom/document-height-observer.d.ts +0 -18

package/public.esm.js CHANGED Viewed

@@ -1,6 +1,20 @@
 import { UVEEventType, UVE_MODE, DotCMSUVEAction } from '@dotcms/types';
 import { __DOTCMS_UVE_EVENT__ } from '@dotcms/types/internal';
+/**
+ * Sentinel values for the placeholder contentlet used when the UVE represents
+ * an empty container (e.g. hover / selection without a real contentlet).
+ *
+ * @internal
+ */
+const TEMP_EMPTY_CONTENTLET = 'TEMP_EMPTY_CONTENTLET';
+/**
+ * Placeholder `contentType` for {@link TEMP_EMPTY_CONTENTLET}.
+ *
+ * @internal
+ */
+const TEMP_EMPTY_CONTENTLET_TYPE = 'TEMP_EMPTY_CONTENTLET_TYPE';
 /**
  * Calculates the bounding information for each page element within the given containers.
  *
@@ -241,6 +255,38 @@ function getDotContentletAttributes(contentlet, container) {
     })
   };
 }
+/**
+ *
+ * Returns the minimal set of contentlet data attributes required by DotCMS
+ * Analytics (impression & click tracking) to identify a contentlet.
+ *
+ * Used in live mode where the full editor metadata is stripped but Analytics
+ * still needs to resolve the contentlet behind an impression/click.
+ *
+ * @param {DotCMSBasicContentlet} contentlet - The contentlet to get the attributes for
+ * @returns {DotAnalyticsContentletAttributes} The Analytics-required data attributes
+ */
+function getAnalyticsContentletAttributes(contentlet) {
+  return {
+    'data-dot-identifier': contentlet?.identifier,
+    'data-dot-inode': contentlet?.inode,
+    'data-dot-title': contentlet?.['widgetTitle'] || contentlet?.title,
+    'data-dot-type': contentlet?.contentType,
+    'data-dot-basetype': contentlet?.baseType
+  };
+}
+/**
+ *
+ * Checks whether DotCMS Analytics is initialized and active on the page.
+ *
+ * The SDKs use this in live mode to decide whether to keep the minimal
+ * contentlet attributes Analytics depends on.
+ *
+ * @returns {boolean} `true` when analytics is active, otherwise `false`
+ */
+function isDotAnalyticsActive() {
+  return typeof window !== 'undefined' && window[ANALYTICS_ACTIVE_WINDOW_KEY] === true;
+}
 /**
  *
  *
@@ -340,6 +386,59 @@ function getDotContainerAttributes({
     'data-dot-uuid': uuid
   };
 }
+/**
+ * Read a contentlet's dataset attributes off a DOM element and return a
+ * normalized contentlet object. Mirrors the shape consumed by the editor's
+ * SET_BOUNDS and CONTENTLET_CLICKED events. Optionally parses the
+ * `dotStyleProperties` JSON when present.
+ */
+function readContentletDataset(element) {
+  const dataset = element.dataset ?? {};
+  return {
+    identifier: dataset['dotIdentifier'],
+    title: dataset['dotTitle'],
+    inode: dataset['dotInode'],
+    contentType: dataset['dotType'],
+    baseType: dataset['dotBasetype'],
+    widgetTitle: dataset['dotWidgetTitle'],
+    onNumberOfPages: dataset['dotOnNumberOfPages'],
+    ...(dataset['dotStyleProperties'] && {
+      dotStyleProperties: JSON.parse(dataset['dotStyleProperties'])
+    })
+  };
+}
+/**
+ * Returns Zone.js's *unpatched* native `addEventListener` / `removeEventListener`
+ * bound to `target`, falling back to the standard methods when Zone.js is absent.
+ *
+ * UVE reuses a single iframe and rewrites it with `document.open()/write()/close()`
+ * on every in-editor navigation. When Zone.js is loaded inside that iframe it runs
+ * in global-events mode: one native "gateway" listener per (target, eventType)
+ * plus a JS-level task list stored on the target node. `document.open()` tears down
+ * the native gateway on the persistent `window`/`document` nodes, but the task list
+ * survives on them, so Zone sees "already registered" on re-init and skips
+ * re-installing the native gateway — the listener silently goes dead after the
+ * first navigation.
+ *
+ * Hover/click dodge this by binding to `document.documentElement`, a node that
+ * `write()` recreates fresh. `scroll`/`message` (on `window`) and
+ * `DOMContentLoaded` (on `document`) can't: none of them fire on `<html>`, so
+ * there is no fresh node to rebind to. Going through Zone's native (untracked)
+ * methods sidesteps the dedup entirely, so the listener rebinds cleanly after
+ * every rewrite.
+ */
+function getNativeEventBinder(target) {
+  const zone = globalThis.Zone;
+  const symbolFor = name => typeof zone?.__symbol__ === 'function' ? zone.__symbol__(name) : `__zone_symbol__${name}`;
+  const source = target;
+  const base = target;
+  const nativeAdd = source[symbolFor('addEventListener')];
+  const nativeRemove = source[symbolFor('removeEventListener')];
+  return {
+    addEventListener: (nativeAdd ?? base.addEventListener).bind(base),
+    removeEventListener: (nativeRemove ?? base.removeEventListener).bind(base)
+  };
+}
 /**
  * Subscribes to content changes in the UVE editor
@@ -356,10 +455,12 @@ function onContentChanges(callback) {
       callback(event.data.payload);
     }
   };
-  window.addEventListener('message', messageCallback);
+  // Native binder: survives the iframe rewrite under Zone.js. See getNativeEventBinder.
+  const nativeWindow = getNativeEventBinder(window);
+  nativeWindow.addEventListener('message', messageCallback);
   return {
     unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
+      nativeWindow.removeEventListener('message', messageCallback);
     },
     event: UVEEventType.CONTENT_CHANGES
   };
@@ -379,37 +480,135 @@ function onPageReload(callback) {
       callback();
     }
   };
-  window.addEventListener('message', messageCallback);
+  // Native binder: survives the iframe rewrite under Zone.js. See getNativeEventBinder.
+  const nativeWindow = getNativeEventBinder(window);
+  nativeWindow.addEventListener('message', messageCallback);
   return {
     unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
+      nativeWindow.removeEventListener('message', messageCallback);
     },
     event: UVEEventType.PAGE_RELOAD
   };
 }
+const AUTO_BOUNDS_DEBOUNCE_MS = 100;
 /**
- * Subscribes to request bounds events in the UVE editor
+ * The single bounds-sync channel. Observes the iframe document and
+ * every `[data-dot-object="container"]` with a single ResizeObserver,
+ * debounces the trailing edge by {@link AUTO_BOUNDS_DEBOUNCE_MS}ms, and
+ * emits the full `getDotCMSPageBounds(...)` payload whenever the layout
+ * settles. Also listens on `scroll` (since scrolling moves contentlets
+ * without changing layout) and on `UVE_FLUSH_BOUNDS` (the editor's
+ * "give me bounds NOW, skip the debounce" message used during drag).
+ *
+ * Re-runs `querySelectorAll` and the observer wiring whenever a
+ * MutationObserver detects child changes that touch container nodes,
+ * so containers that mount/unmount after page-load are picked up
+ * automatically.
  *
- * @param {UVEEventHandler} callback - Function to be called when bounds are requested
- * @returns {Object} Object containing unsubscribe function and event type
- * @returns {Function} .unsubscribe - Function to remove the event listener
- * @returns {UVEEventType} .event - The event type being subscribed to
  * @internal
  */
-function onRequestBounds(callback) {
-  const messageCallback = event => {
-    if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_REQUEST_BOUNDS) {
-      const containers = Array.from(document.querySelectorAll('[data-dot-object="container"]'));
-      const positionData = getDotCMSPageBounds(containers);
-      callback(positionData);
+function onAutoBounds(callback) {
+  let debounceTimer = null;
+  let observed = [];
+  const emit = () => {
+    const containers = Array.from(document.querySelectorAll('[data-dot-object="container"]'));
+    callback(getDotCMSPageBounds(containers));
+  };
+  const scheduleEmit = () => {
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer);
     }
+    debounceTimer = setTimeout(() => {
+      debounceTimer = null;
+      emit();
+    }, AUTO_BOUNDS_DEBOUNCE_MS);
   };
-  window.addEventListener('message', messageCallback);
+  const resizeObserver = new ResizeObserver(() => {
+    scheduleEmit();
+  });
+  const observeAll = () => {
+    // Tear down previous observations before re-wiring.
+    for (const el of observed) {
+      resizeObserver.unobserve(el);
+    }
+    observed = Array.from(document.querySelectorAll('[data-dot-object="container"]'));
+    resizeObserver.observe(document.documentElement);
+    for (const container of observed) {
+      resizeObserver.observe(container);
+    }
+  };
+  observeAll();
+  // Containers can mount/unmount after the page first paints (route
+  // changes in headless apps, lazy-loaded sections, etc.). Re-wire only
+  // when a node carrying [data-dot-object="container"] is added or
+  // removed — ignoring text/attribute churn keeps this observer cheap on
+  // busy pages.
+  const containsContainerNode = nodes => {
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        continue;
+      }
+      const el = node;
+      if (el.matches?.('[data-dot-object="container"]') || el.querySelector?.('[data-dot-object="container"]')) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const mutationObserver = new MutationObserver(mutations => {
+    for (const m of mutations) {
+      if (m.type !== 'childList') continue;
+      if (containsContainerNode(m.addedNodes) || containsContainerNode(m.removedNodes)) {
+        observeAll();
+        scheduleEmit();
+        return;
+      }
+    }
+  });
+  // The SDK script can run from <head> before <body> exists. Fall back to
+  // <html> in that case — childList+subtree on the documentElement still
+  // catches container nodes that mount once <body> arrives.
+  mutationObserver.observe(document.body ?? document.documentElement, {
+    childList: true,
+    subtree: true
+  });
+  // Scrolling doesn't change layout (ResizeObserver won't fire) but moves
+  // every contentlet, so re-emit bounds after the scroll settles to re-anchor
+  // the selected overlay. Native binder so it survives the iframe rewrite
+  // under Zone.js. See getNativeEventBinder.
+  const nativeWindow = getNativeEventBinder(window);
+  const onScroll = () => scheduleEmit();
+  nativeWindow.addEventListener('scroll', onScroll, {
+    passive: true
+  });
+  // Flush channel: the editor occasionally needs an immediate snapshot
+  // of bounds (drag enter, where the dropzone has to know container
+  // rectangles before the user moves another pixel). Bypass the
+  // debounce timer and emit synchronously.
+  const onFlush = event => {
+    if (event?.data?.name !== __DOTCMS_UVE_EVENT__.UVE_FLUSH_BOUNDS) return;
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer);
+      debounceTimer = null;
+    }
+    emit();
+  };
+  // Native binder (reused from `scroll` above): survives the iframe rewrite too.
+  nativeWindow.addEventListener('message', onFlush);
   return {
     unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
+      if (debounceTimer !== null) {
+        clearTimeout(debounceTimer);
+        debounceTimer = null;
+      }
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      nativeWindow.removeEventListener('scroll', onScroll);
+      nativeWindow.removeEventListener('message', onFlush);
+      observed = [];
     },
-    event: UVEEventType.REQUEST_BOUNDS
+    event: UVEEventType.AUTO_BOUNDS
   };
 }
 /**
@@ -428,10 +627,12 @@ function onIframeScroll(callback) {
       callback(direction);
     }
   };
-  window.addEventListener('message', messageCallback);
+  // Native binder: survives the iframe rewrite under Zone.js. See getNativeEventBinder.
+  const nativeWindow = getNativeEventBinder(window);
+  nativeWindow.addEventListener('message', messageCallback);
   return {
     unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
+      nativeWindow.removeEventListener('message', messageCallback);
     },
     event: UVEEventType.IFRAME_SCROLL
   };
@@ -461,27 +662,45 @@ function onScrollToSection(callback) {
       offsetTop: el.offsetTop
     });
   };
-  window.addEventListener('message', messageCallback);
+  // Native binder: survives the iframe rewrite under Zone.js. See getNativeEventBinder.
+  const nativeWindow = getNativeEventBinder(window);
+  nativeWindow.addEventListener('message', messageCallback);
   return {
     unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
+      nativeWindow.removeEventListener('message', messageCallback);
     },
     event: UVEEventType.SCROLL_TO_SECTION
   };
 }
 /**
- * Subscribes to contentlet hover events in the UVE editor
+ * Subscribes to contentlet hover events in the UVE editor.
+ *
+ * The callback is invoked with a payload while the pointer is over a
+ * DotCMS element, and once with `null` when the pointer leaves the last
+ * reported element (transitions onto dead space). The editor uses the
+ * `null` signal to clear the hover overlay so it doesn't linger over
+ * areas that no longer have a contentlet under the pointer.
  *
- * @param {UVEEventHandler} callback - Function to be called when a contentlet is hovered
+ * @param {UVEEventHandler} callback - Function to be called when hover state changes
  * @returns {Object} Object containing unsubscribe function and event type
  * @returns {Function} .unsubscribe - Function to remove the event listener
  * @returns {UVEEventType} .event - The event type being subscribed to
  * @internal
  */
 function onContentletHovered(callback) {
+  let hasHover = false;
   const pointerMoveCallback = event => {
     const foundElement = findDotCMSElement(event.target);
-    if (!foundElement) return;
+    if (!foundElement) {
+      // Transitioning from a hovered contentlet to dead space — emit
+      // a single null so the editor can clear its hover overlay.
+      // Subsequent moves over dead space are no-ops.
+      if (hasHover) {
+        hasHover = false;
+        callback(null);
+      }
+      return;
+    }
     const {
       x,
       y,
@@ -490,26 +709,15 @@ function onContentletHovered(callback) {
     } = foundElement.getBoundingClientRect();
     const isContainer = foundElement.dataset?.['dotObject'] === 'container';
     const contentletForEmptyContainer = {
-      identifier: 'TEMP_EMPTY_CONTENTLET',
-      title: 'TEMP_EMPTY_CONTENTLET',
-      contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
+      identifier: TEMP_EMPTY_CONTENTLET,
+      title: TEMP_EMPTY_CONTENTLET,
+      contentType: TEMP_EMPTY_CONTENTLET_TYPE,
       inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
-      widgetTitle: 'TEMP_EMPTY_CONTENTLET',
-      baseType: 'TEMP_EMPTY_CONTENTLET',
+      widgetTitle: TEMP_EMPTY_CONTENTLET,
+      baseType: TEMP_EMPTY_CONTENTLET,
       onNumberOfPages: 1
     };
-    const contentlet = {
-      identifier: foundElement.dataset?.['dotIdentifier'],
-      title: foundElement.dataset?.['dotTitle'],
-      inode: foundElement.dataset?.['dotInode'],
-      contentType: foundElement.dataset?.['dotType'],
-      baseType: foundElement.dataset?.['dotBasetype'],
-      widgetTitle: foundElement.dataset?.['dotWidgetTitle'],
-      onNumberOfPages: foundElement.dataset?.['dotOnNumberOfPages'],
-      ...(foundElement.dataset?.['dotStyleProperties'] && {
-        dotStyleProperties: JSON.parse(foundElement.dataset['dotStyleProperties'])
-      })
-    };
+    const contentlet = readContentletDataset(foundElement);
     const vtlFiles = findDotCMSVTLData(foundElement);
     const contentletPayload = {
       container:
@@ -526,16 +734,114 @@ function onContentletHovered(callback) {
       height,
       payload: contentletPayload
     };
+    hasHover = true;
     callback(contentletHoveredPayload);
   };
-  document.addEventListener('pointermove', pointerMoveCallback);
+  // We intentionally do not fire null on `pointerleave`: the editor's hover
+  // toolbar lives in the parent window, so leaving the iframe usually means
+  // the user is reaching for it — killing the overlay would yank it away.
+  //
+  // Bind to `document.documentElement` (a fresh node on each iframe rewrite)
+  // rather than `document`, which goes dead under Zone.js after a rewrite.
+  // `pointermove` bubbles to <html>, so no-Zone behavior is identical. See
+  // getNativeEventBinder for the full rationale.
+  document.documentElement.addEventListener('pointermove', pointerMoveCallback);
   return {
     unsubscribe: () => {
-      document.removeEventListener('pointermove', pointerMoveCallback);
+      document.documentElement.removeEventListener('pointermove', pointerMoveCallback);
     },
     event: UVEEventType.CONTENTLET_HOVERED
   };
 }
+/**
+ * Subscribes to contentlet click events in the UVE editor.
+ *
+ * The editor's hover overlay is `pointer-events: none` so wheel events pass
+ * through to the iframe. We detect the user's selection click here instead and
+ * post it back to the editor.
+ *
+ * @param {UVEEventHandler} callback - Function to be called when a contentlet is clicked
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @internal
+ */
+function onContentletClicked(callback) {
+  // Track the last selected contentlet so a second click on the same one
+  // lets the page's native click through (links, accordions, etc.). The
+  // first click is "select"; subsequent clicks on the selected contentlet
+  // are "interact with the page".
+  let lastSelectedInode;
+  const clickCallback = event => {
+    const foundElement = findDotCMSElement(event.target);
+    if (!foundElement) return;
+    const isContainer = foundElement.dataset?.['dotObject'] === 'container';
+    // Only emit for contentlet clicks; an empty container click is a no-op
+    // for selection purposes (there's nothing to select).
+    if (isContainer) return;
+    const inode = foundElement.dataset?.['dotInode'];
+    // If the user is clicking the already-selected contentlet, let the
+    // page handle the click natively (link navigation, button handlers,
+    // form submission). The editor selection toolbar already exposes the
+    // edit/delete/etc actions; the contentlet's own UI should still work.
+    if (inode && inode === lastSelectedInode) {
+      return;
+    }
+    // First click on this contentlet (or a different one) — select it in
+    // the editor and block the page's natural click. Capture phase +
+    // preventDefault + stopPropagation suppresses both the default action
+    // and any subscribers further down the tree.
+    event.preventDefault();
+    event.stopPropagation();
+    lastSelectedInode = inode;
+    const {
+      x,
+      y,
+      width,
+      height
+    } = foundElement.getBoundingClientRect();
+    const contentlet = readContentletDataset(foundElement);
+    const vtlFiles = findDotCMSVTLData(foundElement);
+    callback({
+      x,
+      y,
+      width,
+      height,
+      payload: {
+        container: foundElement.dataset?.['dotContainer'] ? JSON.parse(foundElement.dataset?.['dotContainer']) : getClosestDotCMSContainerData(foundElement),
+        contentlet,
+        vtlFiles
+      }
+    });
+  };
+  // The editor clears its selection on canvas resize / scroll. When that
+  // happens, our lastSelectedInode is stale: a click on what used to be the
+  // selected contentlet would be treated as a passthrough (page click) even
+  // though the editor no longer has it selected. Listen for the
+  // UVE_SELECTION_CLEARED message and reset the tracker.
+  const selectionClearedCallback = event => {
+    if (event?.data?.name === __DOTCMS_UVE_EVENT__.UVE_SELECTION_CLEARED) {
+      lastSelectedInode = undefined;
+    }
+  };
+  // Capture phase so we run BEFORE the page's own click handlers. Bound to
+  // `document.documentElement` (a fresh node on each iframe rewrite) rather
+  // than `document`, which goes dead under Zone.js after a rewrite; capture on
+  // <html> still runs first. See getNativeEventBinder for the full rationale.
+  document.documentElement.addEventListener('click', clickCallback, {
+    capture: true
+  });
+  // Native binder: survives the iframe rewrite under Zone.js. See getNativeEventBinder.
+  const nativeWindow = getNativeEventBinder(window);
+  nativeWindow.addEventListener('message', selectionClearedCallback);
+  return {
+    unsubscribe: () => {
+      document.documentElement.removeEventListener('click', clickCallback, {
+        capture: true
+      });
+      nativeWindow.removeEventListener('message', selectionClearedCallback);
+    },
+    event: UVEEventType.CONTENTLET_CLICKED
+  };
+}
 /**
  * Events that can be subscribed to in the UVE
@@ -550,17 +856,31 @@ const __UVE_EVENTS__ = {
   [UVEEventType.PAGE_RELOAD]: callback => {
     return onPageReload(callback);
   },
-  [UVEEventType.REQUEST_BOUNDS]: callback => {
-    return onRequestBounds(callback);
-  },
   [UVEEventType.IFRAME_SCROLL]: callback => {
     return onIframeScroll(callback);
   },
   [UVEEventType.CONTENTLET_HOVERED]: callback => {
     return onContentletHovered(callback);
   },
+  [UVEEventType.CONTENTLET_CLICKED]: callback => {
+    return onContentletClicked(callback);
+  },
   [UVEEventType.SCROLL_TO_SECTION]: callback => {
     return onScrollToSection(callback);
+  },
+  // SELECTION_CLEARED is editor→SDK only. No public subscriber surface;
+  // onContentletClicked listens for the underlying postMessage internally
+  // to reset its lastSelectedInode tracker.
+  [UVEEventType.SELECTION_CLEARED]: _callback => {
+    return {
+      unsubscribe: () => {
+        /* no-op: SELECTION_CLEARED has no consumer-facing subscription */
+      },
+      event: UVEEventType.SELECTION_CLEARED
+    };
+  },
+  [UVEEventType.AUTO_BOUNDS]: callback => {
+    return onAutoBounds(callback);
   }
 };
 /**
@@ -642,6 +962,29 @@ const CUSTOM_NO_COMPONENT = 'CustomNoComponent';
  * @internal
  */
 const DOT_SECTION_ID_PREFIX = 'dot-section-';
+/**
+ * Window flag set by `@dotcms/analytics` when content analytics is initialized
+ * and active on the page.
+ *
+ * @important This value is intentionally duplicated from `@dotcms/analytics`
+ * (`ANALYTICS_WINDOWS_ACTIVE_KEY` in dot-analytics.constants.ts). The SDKs read
+ * it in live mode to decide whether to keep the minimal contentlet attributes
+ * Analytics depends on. Both constants MUST stay in sync.
+ *
+ * @internal
+ */
+const ANALYTICS_ACTIVE_WINDOW_KEY = '__dotAnalyticsActive__';
+/**
+ * Event dispatched by `@dotcms/analytics` once analytics is ready. The SDKs
+ * listen for it so live-mode contentlets can re-render with the attributes
+ * Analytics needs, regardless of initialization order.
+ *
+ * @important Kept in sync with the `dotcms:analytics:ready` event dispatched by
+ * `@dotcms/analytics` (initializeContentAnalytics).
+ *
+ * @internal
+ */
+const ANALYTICS_READY_EVENT = 'dotcms:analytics:ready';
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
@@ -728,97 +1071,6 @@ function createUVESubscription(eventType, callback) {
   return eventCallback(callback);
 }
-/**
- * Observes rendered document height changes and notifies the caller after layout settles.
- *
- * Uses ResizeObserver on <html> for layout/viewport-driven changes and MutationObserver
- * on <body> to catch DOM additions/removals that may shrink the page without a resize.
- * Measurement reads `body.offsetHeight`, which tracks actual content height and
- * decreases correctly after DOM removals, unaffected by CSS min-height on the html element.
- */
-function observeDocumentHeight({
-  onHeightChange,
-  documentRef = document,
-  windowRef = window,
-  debounceMs = 50
-}) {
-  const html = documentRef.documentElement;
-  const body = documentRef.body;
-  let debounceTimer = null;
-  let rafOuter = null;
-  let rafInner = null;
-  let lastHeight = null;
-  let destroyed = false;
-  const measureAndNotify = () => {
-    const height = body.offsetHeight;
-    if (!height || height === lastHeight) {
-      return;
-    }
-    lastHeight = height;
-    onHeightChange(height);
-  };
-  const scheduleNotify = () => {
-    if (destroyed) {
-      return;
-    }
-    if (debounceTimer !== null) {
-      clearTimeout(debounceTimer);
-    }
-    debounceTimer = setTimeout(() => {
-      debounceTimer = null;
-      if (destroyed) {
-        return;
-      }
-      rafOuter = windowRef.requestAnimationFrame(() => {
-        rafOuter = null;
-        if (destroyed) {
-          return;
-        }
-        rafInner = windowRef.requestAnimationFrame(() => {
-          rafInner = null;
-          if (!destroyed) {
-            measureAndNotify();
-          }
-        });
-      });
-    }, debounceMs);
-  };
-  const onLoad = () => scheduleNotify();
-  if (documentRef.readyState === 'complete' || documentRef.readyState === 'interactive') {
-    scheduleNotify();
-  } else {
-    windowRef.addEventListener('load', onLoad);
-  }
-  const resizeObserver = new ResizeObserver(() => scheduleNotify());
-  resizeObserver.observe(html);
-  const mutationObserver = new MutationObserver(() => scheduleNotify());
-  mutationObserver.observe(documentRef.body ?? html, {
-    childList: true,
-    subtree: true
-  });
-  return {
-    destroy: () => {
-      destroyed = true;
-      if (debounceTimer !== null) {
-        clearTimeout(debounceTimer);
-        debounceTimer = null;
-      }
-      if (rafOuter !== null) {
-        windowRef.cancelAnimationFrame(rafOuter);
-        rafOuter = null;
-      }
-      if (rafInner !== null) {
-        windowRef.cancelAnimationFrame(rafInner);
-        rafInner = null;
-      }
-      lastHeight = null;
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-      windowRef.removeEventListener('load', onLoad);
-    }
-  };
-}
 /**
  * Sets the bounds of the containers in the editor.
  * Retrieves the containers from the DOM and sends their position data to the editor.
@@ -921,7 +1173,6 @@ const isValidBlocks = blocks => {
   };
 };
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Sets up scroll event handlers for the window to notify the editor about scroll events.
  * Adds listeners for both 'scroll' and 'scrollend' events, sending appropriate messages
@@ -938,12 +1189,19 @@ function scrollHandler() {
       action: DotCMSUVEAction.IFRAME_SCROLL_END
     });
   };
-  window.addEventListener('scroll', scrollCallback);
-  window.addEventListener('scrollend', scrollEndCallback);
+  // Native binder: scroll survives the iframe rewrite under Zone.js. It can't
+  // move to a fresh `documentElement` like hover/click (viewport scroll only
+  // fires on `window`). See getNativeEventBinder.
+  const {
+    addEventListener,
+    removeEventListener
+  } = getNativeEventBinder(window);
+  addEventListener('scroll', scrollCallback);
+  addEventListener('scrollend', scrollEndCallback);
   return {
     destroyScrollHandler: () => {
-      window.removeEventListener('scroll', scrollCallback);
-      window.removeEventListener('scrollend', scrollEndCallback);
+      removeEventListener('scroll', scrollCallback);
+      removeEventListener('scrollend', scrollEndCallback);
     }
   };
 }
@@ -983,9 +1241,6 @@ function registerUVEEvents() {
   const pageReloadSubscription = createUVESubscription(UVEEventType.PAGE_RELOAD, () => {
     window.location.reload();
   });
-  const requestBoundsSubscription = createUVESubscription(UVEEventType.REQUEST_BOUNDS, bounds => {
-    setBounds(bounds);
-  });
   const iframeScrollSubscription = createUVESubscription(UVEEventType.IFRAME_SCROLL, direction => {
     if (window.scrollY === 0 && direction === 'up' || computeScrollIsInBottom() && direction === 'down') {
       // If the iframe scroll is at the top or bottom, do not send anything.
@@ -1005,14 +1260,30 @@ function registerUVEEvents() {
       payload: contentletHovered
     });
   });
+  const contentletClickedSubscription = createUVESubscription(UVEEventType.CONTENTLET_CLICKED, contentletClicked => {
+    sendMessageToUVE({
+      action: DotCMSUVEAction.SET_SELECTED_CONTENTLET,
+      payload: contentletClicked
+    });
+  });
   const scrollToSectionSubscription = createUVESubscription(UVEEventType.SCROLL_TO_SECTION, payload => {
     sendMessageToUVE({
       action: DotCMSUVEAction.SECTION_OFFSET,
       payload
     });
   });
+  // The single bounds-sync channel. The SDK observes layout changes
+  // inside the iframe (media-query reflows, image/font load shifts,
+  // container mount/unmount, scroll, etc.) and emits SET_BOUNDS on the
+  // trailing edge of a debounce window. The editor can also send a
+  // UVE_FLUSH_BOUNDS message to request an immediate synchronous emit
+  // (used during drag/drop, where the dropzone needs current bounds
+  // before the user moves another pixel).
+  const autoBoundsSubscription = createUVESubscription(UVEEventType.AUTO_BOUNDS, bounds => {
+    setBounds(bounds);
+  });
   return {
-    subscriptions: [pageReloadSubscription, requestBoundsSubscription, iframeScrollSubscription, contentletHoveredSubscription, scrollToSectionSubscription]
+    subscriptions: [pageReloadSubscription, iframeScrollSubscription, contentletHoveredSubscription, contentletClickedSubscription, scrollToSectionSubscription, autoBoundsSubscription]
   };
 }
 /**
@@ -1044,68 +1315,19 @@ function listenBlockEditorInlineEvent() {
       }
     };
   }
-  // If the page is not fully loaded, listen for the DOMContentLoaded event
+  // Native binder: `DOMContentLoaded` fires on `document` (not `<html>`), so
+  // it survives the iframe rewrite under Zone.js. See getNativeEventBinder.
   const handleDOMContentLoaded = () => {
     listenBlockEditorClick();
   };
-  document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
-  return {
-    destroyListenBlockEditorInlineEvent: () => {
-      document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
-    }
-  };
-}
-/**
- * Returns whether iframe height must be synchronized via postMessage.
- *
- * Same-origin parents can measure iframe content directly, so they do not need
- * child-driven height reporting. Cross-origin parents cannot access the iframe
- * DOM, so they still need the reporter fallback.
- */
-function shouldReportIframeHeightToParent() {
-  if (window.parent === window) {
-    return false;
-  }
-  try {
-    const parentDocument = window.parent.document;
-    return !parentDocument;
-  } catch {
-    return true;
-  }
-}
-/**
- * Reports the iframe document height to the parent UVE shell via postMessage.
- *
- * Uses ResizeObserver on <html> for viewport/font/image-driven size changes, and
- * MutationObserver on <body> to catch DOM removals (e.g. contentlets deleted by
- * the editor) that shrink the page without triggering a resize event.
- *
- * Measurement reads `document.documentElement.offsetHeight` — the actual rendered
- * height of the <html> element after layout. `scrollHeight` is intentionally avoided
- * because it does not reliably decrease when content is removed from the DOM.
- *
- * Height sends are coalesced to at most one per double-requestAnimationFrame pair
- * so they always run after layout and paint have settled.
- *
- * @returns {{ destroyHeightReporter: () => void }} Cleanup function that removes
- * all listeners and disconnects the observers.
- */
-function reportIframeHeight() {
   const {
-    destroy
-  } = observeDocumentHeight({
-    onHeightChange: height => {
-      sendMessageToUVE({
-        action: DotCMSUVEAction.IFRAME_HEIGHT,
-        payload: {
-          height
-        }
-      });
-    }
-  });
+    addEventListener,
+    removeEventListener
+  } = getNativeEventBinder(document);
+  addEventListener('DOMContentLoaded', handleDOMContentLoaded);
   return {
-    destroyHeightReporter: () => {
-      destroy();
+    destroyListenBlockEditorInlineEvent: () => {
+      removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     }
   };
 }
@@ -1314,19 +1536,13 @@ function initUVE(config = {}) {
   const {
     destroyListenBlockEditorInlineEvent
   } = listenBlockEditorInlineEvent();
-  const {
-    destroyHeightReporter
-  } = shouldReportIframeHeightToParent() ? reportIframeHeight() : {
-    destroyHeightReporter: () => undefined
-  };
   return {
     destroyUVESubscriptions: () => {
       subscriptions.forEach(subscription => subscription.unsubscribe());
       destroyScrollHandler();
       destroyListenBlockEditorInlineEvent();
-      destroyHeightReporter();
     }
   };
 }
-export { getDotContentletAttributes as A, isValidBlocks as B, CUSTOM_NO_COMPONENT as C, DEVELOPMENT_MODE as D, EMPTY_CONTAINER_STYLE_ANGULAR as E, observeDocumentHeight as F, setBounds as G, PRODUCTION_MODE as P, START_CLASS as S, __UVE_EVENTS__ as _, createUVESubscription as a, enableBlockEditorInline as b, createContentlet as c, initUVE as d, editContentlet as e, DOT_SECTION_ID_PREFIX as f, getUVEState as g, EMPTY_CONTAINER_STYLE_REACT as h, initInlineEditing as i, END_CLASS as j, __UVE_EVENT_ERROR_FALLBACK__ as k, combineClasses as l, computeScrollIsInBottom as m, findDotCMSElement as n, findDotCMSVTLData as o, getClosestDotCMSContainerData as p, getColumnPositionClasses as q, reorderMenu as r, sendMessageToUVE as s, getContainersData as t, updateNavigation as u, getContentletsInContainer as v, getDotCMSContainerData as w, getDotCMSContentletsBound as x, getDotCMSPageBounds as y, getDotContainerAttributes as z };
+export { ANALYTICS_ACTIVE_WINDOW_KEY as A, getAnalyticsContentletAttributes as B, CUSTOM_NO_COMPONENT as C, DEVELOPMENT_MODE as D, END_CLASS as E, isDotAnalyticsActive as F, getContainersData as G, getContentletsInContainer as H, getDotContainerAttributes as I, readContentletDataset as J, getNativeEventBinder as K, setBounds as L, isValidBlocks as M, PRODUCTION_MODE as P, START_CLASS as S, TEMP_EMPTY_CONTENTLET as T, __UVE_EVENTS__ as _, enableBlockEditorInline as a, createContentlet as b, createUVESubscription as c, initUVE as d, editContentlet as e, __UVE_EVENT_ERROR_FALLBACK__ as f, getUVEState as g, EMPTY_CONTAINER_STYLE_REACT as h, initInlineEditing as i, EMPTY_CONTAINER_STYLE_ANGULAR as j, DOT_SECTION_ID_PREFIX as k, ANALYTICS_READY_EVENT as l, TEMP_EMPTY_CONTENTLET_TYPE as m, getDotCMSPageBounds as n, getDotCMSContentletsBound as o, getDotCMSContainerData as p, getClosestDotCMSContainerData as q, reorderMenu as r, sendMessageToUVE as s, findDotCMSElement as t, updateNavigation as u, findDotCMSVTLData as v, computeScrollIsInBottom as w, combineClasses as x, getColumnPositionClasses as y, getDotContentletAttributes as z };