@dotcms/uve 1.5.2 → 1.5.4-next.33

package/internal.cjs.js

@@ -378,6 +378,8 @@ exports.EMPTY_CONTAINER_STYLE_REACT = _public.EMPTY_CONTAINER_STYLE_REACT;
 exports.END_CLASS = _public.END_CLASS;
 exports.PRODUCTION_MODE = _public.PRODUCTION_MODE;
 exports.START_CLASS = _public.START_CLASS;
+exports.TEMP_EMPTY_CONTENTLET = _public.TEMP_EMPTY_CONTENTLET;
+exports.TEMP_EMPTY_CONTENTLET_TYPE = _public.TEMP_EMPTY_CONTENTLET_TYPE;
 exports.__UVE_EVENTS__ = _public.__UVE_EVENTS__;
 exports.__UVE_EVENT_ERROR_FALLBACK__ = _public.__UVE_EVENT_ERROR_FALLBACK__;
 exports.combineClasses = _public.combineClasses;
@@ -396,7 +398,7 @@ exports.getDotContainerAttributes = _public.getDotContainerAttributes;
 exports.getDotContentletAttributes = _public.getDotContentletAttributes;
 exports.getUVEState = _public.getUVEState;
 exports.isValidBlocks = _public.isValidBlocks;
-exports.observeDocumentHeight = _public.observeDocumentHeight;
+exports.readContentletDataset = _public.readContentletDataset;
 exports.setBounds = _public.setBounds;
 exports.__BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ = __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__;
 exports.__DEFAULT_TINYMCE_CONFIG__ = __DEFAULT_TINYMCE_CONFIG__;

package/internal.esm.js

@@ -1,5 +1,5 @@
 import { g as getUVEState, s as sendMessageToUVE } from './public.esm.js';
-export { C as CUSTOM_NO_COMPONENT, D as DEVELOPMENT_MODE, f as DOT_SECTION_ID_PREFIX, E as EMPTY_CONTAINER_STYLE_ANGULAR, h as EMPTY_CONTAINER_STYLE_REACT, j as END_CLASS, P as PRODUCTION_MODE, S as START_CLASS, _ as __UVE_EVENTS__, k as __UVE_EVENT_ERROR_FALLBACK__, l as combineClasses, m as computeScrollIsInBottom, a as createUVESubscription, n as findDotCMSElement, o as findDotCMSVTLData, p as getClosestDotCMSContainerData, q as getColumnPositionClasses, t as getContainersData, v as getContentletsInContainer, w as getDotCMSContainerData, x as getDotCMSContentletsBound, y as getDotCMSPageBounds, z as getDotContainerAttributes, A as getDotContentletAttributes, B as isValidBlocks, F as observeDocumentHeight, G as setBounds } from './public.esm.js';
+export { C as CUSTOM_NO_COMPONENT, D as DEVELOPMENT_MODE, f as DOT_SECTION_ID_PREFIX, E as EMPTY_CONTAINER_STYLE_ANGULAR, h as EMPTY_CONTAINER_STYLE_REACT, j as END_CLASS, P as PRODUCTION_MODE, S as START_CLASS, T as TEMP_EMPTY_CONTENTLET, k as TEMP_EMPTY_CONTENTLET_TYPE, _ as __UVE_EVENTS__, l as __UVE_EVENT_ERROR_FALLBACK__, m as combineClasses, n as computeScrollIsInBottom, a as createUVESubscription, o as findDotCMSElement, p as findDotCMSVTLData, q as getClosestDotCMSContainerData, t as getColumnPositionClasses, v as getContainersData, w as getContentletsInContainer, x as getDotCMSContainerData, y as getDotCMSContentletsBound, z as getDotCMSPageBounds, A as getDotContainerAttributes, B as getDotContentletAttributes, F as isValidBlocks, G as readContentletDataset, H as setBounds } from './public.esm.js';
 import { UVE_MODE, DotCMSUVEAction } from '@dotcms/types';
 import '@dotcms/types/internal';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/uve",
-  "version": "1.5.2",
+  "version": "1.5.4-next.33",
   "description": "Official JavaScript library for interacting with Universal Visual Editor (UVE)",
   "repository": {
     "type": "git",
@@ -50,4 +50,4 @@
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
   "types": "./index.d.ts"
-}
+}

package/public.cjs.js

@@ -3,6 +3,20 @@
 var types = require('@dotcms/types');
 var internal = require('@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.
  *
@@ -342,6 +356,27 @@ 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'])
+    })
+  };
+}
 
 /**
  * Subscribes to content changes in the UVE editor
@@ -389,29 +424,124 @@ function onPageReload(callback) {
     event: types.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 === internal.__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 inside the iframe doesn't change layout, so ResizeObserver
+  // doesn't fire, but every contentlet's viewport-relative position
+  // (getBoundingClientRect) does change. Re-emit bounds after each
+  // scroll burst settles so the editor's pinned selected overlay
+  // re-anchors to the on-screen position.
+  const onScroll = () => scheduleEmit();
+  window.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 !== internal.__DOTCMS_UVE_EVENT__.UVE_FLUSH_BOUNDS) return;
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer);
+      debounceTimer = null;
+    }
+    emit();
+  };
+  window.addEventListener('message', onFlush);
   return {
     unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
+      if (debounceTimer !== null) {
+        clearTimeout(debounceTimer);
+        debounceTimer = null;
+      }
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('message', onFlush);
+      observed = [];
     },
-    event: types.UVEEventType.REQUEST_BOUNDS
+    event: types.UVEEventType.AUTO_BOUNDS
   };
 }
 /**
@@ -472,18 +602,34 @@ function onScrollToSection(callback) {
   };
 }
 /**
- * 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,
@@ -492,26 +638,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:
@@ -528,8 +663,15 @@ function onContentletHovered(callback) {
       height,
       payload: contentletPayload
     };
+    hasHover = true;
     callback(contentletHoveredPayload);
   };
+  // We intentionally do not fire null on document `pointerleave`: the
+  // editor's hover toolbar lives in the parent window (outside the
+  // iframe), so leaving the iframe usually means the user is heading
+  // for the toolbar. Killing the overlay there would yank the toolbar
+  // away just as the user reaches for it. Dead-space-inside-iframe
+  // is already covered by the `pointermove` null branch above.
   document.addEventListener('pointermove', pointerMoveCallback);
   return {
     unsubscribe: () => {
@@ -538,6 +680,91 @@ function onContentletHovered(callback) {
     event: types.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 === internal.__DOTCMS_UVE_EVENT__.UVE_SELECTION_CLEARED) {
+      lastSelectedInode = undefined;
+    }
+  };
+  // Capture phase so we run BEFORE the page's own click handlers and can
+  // preventDefault/stopPropagation effectively.
+  document.addEventListener('click', clickCallback, {
+    capture: true
+  });
+  window.addEventListener('message', selectionClearedCallback);
+  return {
+    unsubscribe: () => {
+      document.removeEventListener('click', clickCallback, {
+        capture: true
+      });
+      window.removeEventListener('message', selectionClearedCallback);
+    },
+    event: types.UVEEventType.CONTENTLET_CLICKED
+  };
+}
 
 /**
  * Events that can be subscribed to in the UVE
@@ -552,17 +779,31 @@ const __UVE_EVENTS__ = {
   [types.UVEEventType.PAGE_RELOAD]: callback => {
     return onPageReload(callback);
   },
-  [types.UVEEventType.REQUEST_BOUNDS]: callback => {
-    return onRequestBounds(callback);
-  },
   [types.UVEEventType.IFRAME_SCROLL]: callback => {
     return onIframeScroll(callback);
   },
   [types.UVEEventType.CONTENTLET_HOVERED]: callback => {
     return onContentletHovered(callback);
   },
+  [types.UVEEventType.CONTENTLET_CLICKED]: callback => {
+    return onContentletClicked(callback);
+  },
   [types.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.
+  [types.UVEEventType.SELECTION_CLEARED]: _callback => {
+    return {
+      unsubscribe: () => {
+        /* no-op: SELECTION_CLEARED has no consumer-facing subscription */
+      },
+      event: types.UVEEventType.SELECTION_CLEARED
+    };
+  },
+  [types.UVEEventType.AUTO_BOUNDS]: callback => {
+    return onAutoBounds(callback);
   }
 };
 /**
@@ -730,97 +971,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.
@@ -985,9 +1135,6 @@ function registerUVEEvents() {
   const pageReloadSubscription = createUVESubscription(types.UVEEventType.PAGE_RELOAD, () => {
     window.location.reload();
   });
-  const requestBoundsSubscription = createUVESubscription(types.UVEEventType.REQUEST_BOUNDS, bounds => {
-    setBounds(bounds);
-  });
   const iframeScrollSubscription = createUVESubscription(types.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.
@@ -1007,14 +1154,30 @@ function registerUVEEvents() {
       payload: contentletHovered
     });
   });
+  const contentletClickedSubscription = createUVESubscription(types.UVEEventType.CONTENTLET_CLICKED, contentletClicked => {
+    sendMessageToUVE({
+      action: types.DotCMSUVEAction.SET_SELECTED_CONTENTLET,
+      payload: contentletClicked
+    });
+  });
   const scrollToSectionSubscription = createUVESubscription(types.UVEEventType.SCROLL_TO_SECTION, payload => {
     sendMessageToUVE({
       action: types.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(types.UVEEventType.AUTO_BOUNDS, bounds => {
+    setBounds(bounds);
+  });
   return {
-    subscriptions: [pageReloadSubscription, requestBoundsSubscription, iframeScrollSubscription, contentletHoveredSubscription, scrollToSectionSubscription]
+    subscriptions: [pageReloadSubscription, iframeScrollSubscription, contentletHoveredSubscription, contentletClickedSubscription, scrollToSectionSubscription, autoBoundsSubscription]
   };
 }
 /**
@@ -1057,60 +1220,6 @@ function listenBlockEditorInlineEvent() {
     }
   };
 }
-/**
- * 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: types.DotCMSUVEAction.IFRAME_HEIGHT,
-        payload: {
-          height
-        }
-      });
-    }
-  });
-  return {
-    destroyHeightReporter: () => {
-      destroy();
-    }
-  };
-}
 const listenBlockEditorClick = () => {
   const editBlockEditorNodes = document.querySelectorAll('[data-block-editor-content]');
   if (!editBlockEditorNodes.length) {
@@ -1316,17 +1425,11 @@ function initUVE(config = {}) {
   const {
     destroyListenBlockEditorInlineEvent
   } = listenBlockEditorInlineEvent();
-  const {
-    destroyHeightReporter
-  } = shouldReportIframeHeightToParent() ? reportIframeHeight() : {
-    destroyHeightReporter: () => undefined
-  };
   return {
     destroyUVESubscriptions: () => {
       subscriptions.forEach(subscription => subscription.unsubscribe());
       destroyScrollHandler();
       destroyListenBlockEditorInlineEvent();
-      destroyHeightReporter();
     }
   };
 }
@@ -1339,6 +1442,8 @@ exports.EMPTY_CONTAINER_STYLE_REACT = EMPTY_CONTAINER_STYLE_REACT;
 exports.END_CLASS = END_CLASS;
 exports.PRODUCTION_MODE = PRODUCTION_MODE;
 exports.START_CLASS = START_CLASS;
+exports.TEMP_EMPTY_CONTENTLET = TEMP_EMPTY_CONTENTLET;
+exports.TEMP_EMPTY_CONTENTLET_TYPE = TEMP_EMPTY_CONTENTLET_TYPE;
 exports.__UVE_EVENTS__ = __UVE_EVENTS__;
 exports.__UVE_EVENT_ERROR_FALLBACK__ = __UVE_EVENT_ERROR_FALLBACK__;
 exports.combineClasses = combineClasses;
@@ -1362,7 +1467,7 @@ exports.getUVEState = getUVEState;
 exports.initInlineEditing = initInlineEditing;
 exports.initUVE = initUVE;
 exports.isValidBlocks = isValidBlocks;
-exports.observeDocumentHeight = observeDocumentHeight;
+exports.readContentletDataset = readContentletDataset;
 exports.reorderMenu = reorderMenu;
 exports.sendMessageToUVE = sendMessageToUVE;
 exports.setBounds = setBounds;