@dotcms/uve 1.5.1-next.2011 → 1.5.1-next.2023

package/internal.cjs.js

@@ -398,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, 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 observeDocumentHeight, H 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.1-next.2011",
+  "version": "1.5.1-next.2023",
   "description": "Official JavaScript library for interacting with Universal Visual Editor (UVE)",
   "repository": {
     "type": "git",

package/public.cjs.js

@@ -356,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
@@ -403,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);
+  };
+  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);
     }
   };
-  window.addEventListener('message', messageCallback);
+  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
   };
 }
 /**
@@ -486,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,
@@ -514,18 +646,7 @@ function onContentletHovered(callback) {
       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:
@@ -542,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: () => {
@@ -552,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
@@ -566,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);
   }
 };
 /**
@@ -744,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.
@@ -999,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.
@@ -1021,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]
   };
 }
 /**
@@ -1071,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) {
@@ -1330,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();
     }
   };
 }
@@ -1378,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;

package/public.esm.js

@@ -354,6 +354,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
@@ -401,29 +422,124 @@ function onPageReload(callback) {
     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);
+  };
+  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);
     }
   };
-  window.addEventListener('message', messageCallback);
+  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 !== __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: UVEEventType.REQUEST_BOUNDS
+    event: UVEEventType.AUTO_BOUNDS
   };
 }
 /**
@@ -484,18 +600,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,
@@ -512,18 +644,7 @@ function onContentletHovered(callback) {
       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:
@@ -540,8 +661,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: () => {
@@ -550,6 +678,91 @@ function onContentletHovered(callback) {
     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 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: UVEEventType.CONTENTLET_CLICKED
+  };
+}
 
 /**
  * Events that can be subscribed to in the UVE
@@ -564,17 +777,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);
   }
 };
 /**
@@ -742,97 +969,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.
@@ -997,9 +1133,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.
@@ -1019,14 +1152,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]
   };
 }
 /**
@@ -1069,60 +1218,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: DotCMSUVEAction.IFRAME_HEIGHT,
-        payload: {
-          height
-        }
-      });
-    }
-  });
-  return {
-    destroyHeightReporter: () => {
-      destroy();
-    }
-  };
-}
 const listenBlockEditorClick = () => {
   const editBlockEditorNodes = document.querySelectorAll('[data-block-editor-content]');
   if (!editBlockEditorNodes.length) {
@@ -1328,19 +1423,13 @@ function initUVE(config = {}) {
   const {
     destroyListenBlockEditorInlineEvent
   } = listenBlockEditorInlineEvent();
-  const {
-    destroyHeightReporter
-  } = shouldReportIframeHeightToParent() ? reportIframeHeight() : {
-    destroyHeightReporter: () => undefined
-  };
   return {
     destroyUVESubscriptions: () => {
       subscriptions.forEach(subscription => subscription.unsubscribe());
       destroyScrollHandler();
       destroyListenBlockEditorInlineEvent();
-      destroyHeightReporter();
     }
   };
 }
 
-export { getDotContainerAttributes as A, getDotContentletAttributes as B, CUSTOM_NO_COMPONENT as C, DEVELOPMENT_MODE as D, EMPTY_CONTAINER_STYLE_ANGULAR as E, isValidBlocks as F, observeDocumentHeight as G, setBounds as H, PRODUCTION_MODE as P, START_CLASS as S, TEMP_EMPTY_CONTENTLET as T, __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, TEMP_EMPTY_CONTENTLET_TYPE as k, __UVE_EVENT_ERROR_FALLBACK__ as l, combineClasses as m, computeScrollIsInBottom as n, findDotCMSElement as o, findDotCMSVTLData as p, getClosestDotCMSContainerData as q, reorderMenu as r, sendMessageToUVE as s, getColumnPositionClasses as t, updateNavigation as u, getContainersData as v, getContentletsInContainer as w, getDotCMSContainerData as x, getDotCMSContentletsBound as y, getDotCMSPageBounds as z };
+export { getDotContainerAttributes as A, getDotContentletAttributes as B, CUSTOM_NO_COMPONENT as C, DEVELOPMENT_MODE as D, EMPTY_CONTAINER_STYLE_ANGULAR as E, isValidBlocks as F, readContentletDataset as G, setBounds as H, PRODUCTION_MODE as P, START_CLASS as S, TEMP_EMPTY_CONTENTLET as T, __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, TEMP_EMPTY_CONTENTLET_TYPE as k, __UVE_EVENT_ERROR_FALLBACK__ as l, combineClasses as m, computeScrollIsInBottom as n, findDotCMSElement as o, findDotCMSVTLData as p, getClosestDotCMSContainerData as q, reorderMenu as r, sendMessageToUVE as s, getColumnPositionClasses as t, updateNavigation as u, getContainersData as v, getContentletsInContainer as w, getDotCMSContainerData as x, getDotCMSContentletsBound as y, getDotCMSPageBounds as z };

package/src/internal/events.d.ts

@@ -26,15 +26,22 @@ export declare function onPageReload(callback: UVEEventHandler): {
     event: UVEEventType;
 };
 /**
- * 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
  */
-export declare function onRequestBounds(callback: UVEEventHandler): {
+export declare function onAutoBounds(callback: UVEEventHandler): {
     unsubscribe: () => void;
     event: UVEEventType;
 };
@@ -66,9 +73,15 @@ export declare function onScrollToSection(callback: UVEEventHandler): {
     event: UVEEventType;
 };
 /**
- * Subscribes to contentlet hover events in the UVE editor
+ * Subscribes to contentlet hover events in the UVE editor.
  *
- * @param {UVEEventHandler} callback - Function to be called when a contentlet is hovered
+ * 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 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
@@ -78,3 +91,18 @@ export declare function onContentletHovered(callback: UVEEventHandler): {
     unsubscribe: () => void;
     event: UVEEventType;
 };
+/**
+ * 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
+ */
+export declare function onContentletClicked(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};

package/src/internal.d.ts

@@ -1,6 +1,5 @@
 export * from './internal/index';
 export * from './lib/core/core.utils';
-export * from './lib/dom/document-height-observer';
 export * from './lib/dom/dom.utils';
 export * from './lib/editor/internal';
 export { defineStyleEditorSchema, normalizeForm, registerStyleEditorSchemas } from './lib/style-editor/internal';

package/src/lib/dom/dom.utils.d.ts

@@ -203,3 +203,19 @@ export declare const getContentletsInContainer: (dotCMSPageAsset: DotCMSPageAsse
  * // Returns: { 'data-dot-object': 'container', 'data-dot-identifier': 'cont1', ... }
  */
 export declare function getDotContainerAttributes({ uuid, identifier, acceptTypes, maxContentlets }: EditableContainerData): DotContainerAttributes;
+/**
+ * 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.
+ */
+export declare function readContentletDataset(element: HTMLElement): {
+    dotStyleProperties?: any;
+    identifier: string | undefined;
+    title: string | undefined;
+    inode: string | undefined;
+    contentType: string | undefined;
+    baseType: string | undefined;
+    widgetTitle: string | undefined;
+    onNumberOfPages: string | undefined;
+};

package/src/script/utils.d.ts

@@ -51,34 +51,6 @@ export declare function setClientIsReady(config?: DotCMSPageResponse): void;
 export declare function listenBlockEditorInlineEvent(): {
     destroyListenBlockEditorInlineEvent: () => void;
 };
-/**
- * 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.
- */
-export declare function shouldReportIframeHeightToParent(): boolean;
-/**
- * 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.
- */
-export declare function reportIframeHeight(): {
-    destroyHeightReporter: () => void;
-};
 /**
  * Injects UVE editor styles for empty containers and contentlets into the page.
  * Provides visual placeholders so editors can identify and interact with empty areas.

package/src/lib/dom/document-height-observer.d.ts

@@ -1,18 +0,0 @@
-export interface ObserveDocumentHeightOptions {
-    onHeightChange: (height: number) => void;
-    documentRef?: Document;
-    windowRef?: Window;
-    debounceMs?: number;
-}
-export interface DocumentHeightObserverHandle {
-    destroy: () => void;
-}
-/**
- * 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.
- */
-export declare function observeDocumentHeight({ onHeightChange, documentRef, windowRef, debounceMs }: ObserveDocumentHeightOptions): DocumentHeightObserverHandle;