@dotcms/react 26.9.18-1 → 26.9.23-1

package/README.md

@@ -308,23 +308,70 @@ The layout renders the pre-rendered slot node for a contentlet if one exists, ot
 
 #### Component Mapping
 
-The `DotCMSLayoutBody` component uses a `components` prop to map content type variable names to React components. This allows you to render different components for different content types. Example:
+The `DotCMSLayoutBody` component uses a `components` prop to map content type variable names to React components. This allows you to render different components for different content types.
 
-```typescript
-const DYNAMIC_COMPONENTS = {
-    Blog: MyBlogCard,
-    Product: DotCMSProductComponent
+**Load the mapped components dynamically.** A static map makes every component reachable from the client entry, so a visitor downloads all of them on every route — even the ones that page never renders. Wrapping each in a dynamic import gives each component its own chunk, fetched only when a page actually contains that content type.
+
+In Next.js, use `next/dynamic`:
+
+```tsx
+import dynamic from 'next/dynamic';
+
+import { CustomNoComponent } from './Empty';
+
+export const pageComponents = {
+    Blog: dynamic(() => import('./MyBlogCard')),
+    Product: dynamic(() => import('./DotCMSProductComponent')),
+    // The fallback for unmapped content types stays eager: it should render without
+    // waiting on a network round-trip, and it is small.
+    CustomNoComponent
+};
+```
+
+Anywhere else — Astro, Vite, plain React — use `React.lazy`:
+
+```tsx
+import { lazy } from 'react';
+
+export const pageComponents = {
+    Blog: lazy(() => import('./MyBlogCard')),
+    Product: lazy(() => import('./DotCMSProductComponent'))
 };
 ```
 
+`next/dynamic` brings its own Suspense boundary. `React.lazy` does not, but you do not need to add one: `DotCMSLayoutBody` wraps every contentlet in a Suspense boundary, so a lazy component can be mapped directly.
+
 -   Keys (e.g., `Blog`, `Product`): Match your [content type variable names](https://dev.dotcms.com/docs/content-types#VariableNames) in dotCMS
--   Values: Dynamic imports of your React components that render each content type
--   Supports lazy loading through dynamic imports
--   Components must be standalone or declared in a module
+-   Values: any React component type — including the result of `next/dynamic` or `React.lazy`
 
 > [!TIP]
 > Always use the exact content type variable name from dotCMS as the key. You can find this in the Content Types section of your dotCMS admin panel.
 
+> [!WARNING]
+> Avoid re-exporting your content-type components from a barrel (`export * from './Banner'`). Anything importing that barrel makes every component statically reachable, which puts them all back in the initial bundle no matter how the map loads them.
+
+#### Migrating an existing app to dynamic mapping
+
+Earlier versions of our examples showed a static component map, so an app built from them ships **every** mapped component on **every** route. If you have dozens of content types, that is the single biggest thing you can fix — and upgrading the SDK does not fix it for you, because the map lives in your code.
+
+Measured on the Next.js example with 135 mapped content types, one realistic component each:
+
+| Component map | Initial route JS | Mapped components in the initial bundle |
+| --- | --- | --- |
+| Static imports | 892.7 KB raw / 250.4 KB gzip | **135 of 135** |
+| `next/dynamic` | 792.6 KB raw / 238.1 KB gzip | **0 of 135** |
+
+Every mapped component leaves the initial route and is fetched only when a page contains that content type. How much weight that removes depends on your components: the 100 KB above is what 135 modest ones cost, and real component libraries are usually heavier.
+
+To migrate:
+
+1. Wrap each entry in the map with `next/dynamic` (or `React.lazy` outside Next.js). Keep the unmatched-type fallback eager.
+2. Delete any barrel that re-exports your content-type components, and import them directly where you need them elsewhere. A single `export * from './Banner'` re-exports every component from one module and undoes the whole change.
+3. Do the same for the `customRenderers` map you pass to `DotCMSBlockEditorRenderer` if it maps more than a handful of components.
+4. Rebuild and confirm. The quickest check is to map a component no page uses, give it a unique string, and grep the production client chunks for that string — it should appear only in its own chunk. `examples/scripts/check-initial-bundle.mjs` in this repository does exactly that for the Next.js and Astro examples and can be pointed at your build.
+
+`next/dynamic` keeps server rendering on by default, so this does not change what the crawler sees.
+
 
 ### DotCMSEditableText
 

package/lib/next/components/Column/Column.module.css.esm.js

@@ -1,8 +1,15 @@
-import { styleInject } from '../../../../_virtual/_style-inject.esm.js';
-
-var css = "._col-start-1_1myqa_1 {\n    grid-column-start: 1;\n}\n\n._col-start-2_1myqa_5 {\n    grid-column-start: 2;\n}\n\n._col-start-3_1myqa_9 {\n    grid-column-start: 3;\n}\n\n._col-start-4_1myqa_13 {\n    grid-column-start: 4;\n}\n\n._col-start-5_1myqa_17 {\n    grid-column-start: 5;\n}\n\n._col-start-6_1myqa_21 {\n    grid-column-start: 6;\n}\n\n._col-start-7_1myqa_25 {\n    grid-column-start: 7;\n}\n\n._col-start-8_1myqa_29 {\n    grid-column-start: 8;\n}\n\n._col-start-9_1myqa_33 {\n    grid-column-start: 9;\n}\n\n._col-start-10_1myqa_37 {\n    grid-column-start: 10;\n}\n\n._col-start-11_1myqa_41 {\n    grid-column-start: 11;\n}\n\n._col-start-12_1myqa_45 {\n    grid-column-start: 12;\n}\n\n._col-end-1_1myqa_49 {\n    grid-column-end: 1;\n}\n\n._col-end-2_1myqa_53 {\n    grid-column-end: 2;\n}\n\n._col-end-3_1myqa_57 {\n    grid-column-end: 3;\n}\n\n._col-end-4_1myqa_61 {\n    grid-column-end: 4;\n}\n\n._col-end-5_1myqa_65 {\n    grid-column-end: 5;\n}\n\n._col-end-6_1myqa_69 {\n    grid-column-end: 6;\n}\n\n._col-end-7_1myqa_73 {\n    grid-column-end: 7;\n}\n\n._col-end-8_1myqa_77 {\n    grid-column-end: 8;\n}\n\n._col-end-9_1myqa_81 {\n    grid-column-end: 9;\n}\n\n._col-end-10_1myqa_85 {\n    grid-column-end: 10;\n}\n\n._col-end-11_1myqa_89 {\n    grid-column-end: 11;\n}\n\n._col-end-12_1myqa_93 {\n    grid-column-end: 12;\n}\n\n._col-end-13_1myqa_97 {\n    grid-column-end: 13;\n}\n";
-
-styleInject(css);
-var styles = {"col-start-1":"_col-start-1_1myqa_1","col-start-2":"_col-start-2_1myqa_5","col-start-3":"_col-start-3_1myqa_9","col-start-4":"_col-start-4_1myqa_13","col-start-5":"_col-start-5_1myqa_17","col-start-6":"_col-start-6_1myqa_21","col-start-7":"_col-start-7_1myqa_25","col-start-8":"_col-start-8_1myqa_29","col-start-9":"_col-start-9_1myqa_33","col-start-10":"_col-start-10_1myqa_37","col-start-11":"_col-start-11_1myqa_41","col-start-12":"_col-start-12_1myqa_45","col-end-1":"_col-end-1_1myqa_49","col-end-2":"_col-end-2_1myqa_53","col-end-3":"_col-end-3_1myqa_57","col-end-4":"_col-end-4_1myqa_61","col-end-5":"_col-end-5_1myqa_65","col-end-6":"_col-end-6_1myqa_69","col-end-7":"_col-end-7_1myqa_73","col-end-8":"_col-end-8_1myqa_77","col-end-9":"_col-end-9_1myqa_81","col-end-10":"_col-end-10_1myqa_85","col-end-11":"_col-end-11_1myqa_89","col-end-12":"_col-end-12_1myqa_93","col-end-13":"_col-end-13_1myqa_97"};
+var css_248z = ".Column-module_col-start-1__ZjXIT {\n    grid-column-start: 1;\n}\n\n.Column-module_col-start-2__pKXk4 {\n    grid-column-start: 2;\n}\n\n.Column-module_col-start-3__9jDkG {\n    grid-column-start: 3;\n}\n\n.Column-module_col-start-4__nKEgb {\n    grid-column-start: 4;\n}\n\n.Column-module_col-start-5__ybSmQ {\n    grid-column-start: 5;\n}\n\n.Column-module_col-start-6__oMag- {\n    grid-column-start: 6;\n}\n\n.Column-module_col-start-7__B3Gyy {\n    grid-column-start: 7;\n}\n\n.Column-module_col-start-8__jLDTT {\n    grid-column-start: 8;\n}\n\n.Column-module_col-start-9__CtwzK {\n    grid-column-start: 9;\n}\n\n.Column-module_col-start-10__7wGuq {\n    grid-column-start: 10;\n}\n\n.Column-module_col-start-11__hFAC7 {\n    grid-column-start: 11;\n}\n\n.Column-module_col-start-12__yl9H8 {\n    grid-column-start: 12;\n}\n\n.Column-module_col-end-1__8NXpa {\n    grid-column-end: 1;\n}\n\n.Column-module_col-end-2__PNIHf {\n    grid-column-end: 2;\n}\n\n.Column-module_col-end-3__tYgN- {\n    grid-column-end: 3;\n}\n\n.Column-module_col-end-4__kfbI3 {\n    grid-column-end: 4;\n}\n\n.Column-module_col-end-5__E8Gsl {\n    grid-column-end: 5;\n}\n\n.Column-module_col-end-6__SpIXw {\n    grid-column-end: 6;\n}\n\n.Column-module_col-end-7__0nOh1 {\n    grid-column-end: 7;\n}\n\n.Column-module_col-end-8__iOzUU {\n    grid-column-end: 8;\n}\n\n.Column-module_col-end-9__xSt6O {\n    grid-column-end: 9;\n}\n\n.Column-module_col-end-10__naTtw {\n    grid-column-end: 10;\n}\n\n.Column-module_col-end-11__b6utR {\n    grid-column-end: 11;\n}\n\n.Column-module_col-end-12__D18ty {\n    grid-column-end: 12;\n}\n\n.Column-module_col-end-13__5rTLe {\n    grid-column-end: 13;\n}\n";
+var styles = {"col-start-1":"Column-module_col-start-1__ZjXIT","col-start-2":"Column-module_col-start-2__pKXk4","col-start-3":"Column-module_col-start-3__9jDkG","col-start-4":"Column-module_col-start-4__nKEgb","col-start-5":"Column-module_col-start-5__ybSmQ","col-start-6":"Column-module_col-start-6__oMag-","col-start-7":"Column-module_col-start-7__B3Gyy","col-start-8":"Column-module_col-start-8__jLDTT","col-start-9":"Column-module_col-start-9__CtwzK","col-start-10":"Column-module_col-start-10__7wGuq","col-start-11":"Column-module_col-start-11__hFAC7","col-start-12":"Column-module_col-start-12__yl9H8","col-end-1":"Column-module_col-end-1__8NXpa","col-end-2":"Column-module_col-end-2__PNIHf","col-end-3":"Column-module_col-end-3__tYgN-","col-end-4":"Column-module_col-end-4__kfbI3","col-end-5":"Column-module_col-end-5__E8Gsl","col-end-6":"Column-module_col-end-6__SpIXw","col-end-7":"Column-module_col-end-7__0nOh1","col-end-8":"Column-module_col-end-8__iOzUU","col-end-9":"Column-module_col-end-9__xSt6O","col-end-10":"Column-module_col-end-10__naTtw","col-end-11":"Column-module_col-end-11__b6utR","col-end-12":"Column-module_col-end-12__D18ty","col-end-13":"Column-module_col-end-13__5rTLe"};
+(function () {
+    if (typeof document === 'undefined') return;
+    var existing = document.head.querySelectorAll('style[data-dotcms-style]');
+    for (var i = 0; i < existing.length; i++) {
+        if (existing[i].textContent === css_248z) return;
+    }
+    var style = document.createElement('style');
+    style.setAttribute('data-dotcms-style', '');
+    style.appendChild(document.createTextNode(css_248z));
+    document.head.appendChild(style);
+})();
 
 export { styles as default };

package/lib/next/components/Contentlet/Contentlet.esm.js

@@ -1,11 +1,9 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useMemo, useContext } from 'react';
+import { useRef, useContext, useMemo, Suspense } from 'react';
 import { getDotContentletAttributes, getAnalyticsContentletAttributes, CUSTOM_NO_COMPONENT } from '@dotcms/uve/internal';
 import { DotCMSPageContext } from '../../contexts/DotCMSPageContext.esm.js';
 import { useCheckVisibleContent } from '../../hooks/useCheckVisibleContent.esm.js';
-import { useIsAnalyticsActive } from '../../hooks/useIsAnalyticsActive.esm.js';
-import { useIsDevMode } from '../../hooks/useIsDevMode.esm.js';
 import { FallbackComponent } from '../FallbackComponent/FallbackComponent.esm.js';
 
 /**
@@ -34,9 +32,16 @@ function Contentlet({
   container
 }) {
   const ref = useRef(null);
-  const isDevMode = useIsDevMode();
-  const isAnalyticsActive = useIsAnalyticsActive();
-  const haveContent = useCheckVisibleContent(ref);
+  // Both flags are resolved once per layout tree by DotCMSPageProvider. Reading them from
+  // context keeps this component free of its own UVE lookup and analytics listener, which
+  // previously ran once per contentlet on the page.
+  const {
+    isDevMode,
+    isAnalyticsActive
+  } = useContext(DotCMSPageContext);
+  // The measurement only feeds the editor's empty-contentlet placeholder, so skip the
+  // forced layout entirely outside development mode.
+  const haveContent = useCheckVisibleContent(ref, isDevMode);
   const style = useMemo(() => isDevMode ? {
     minHeight: haveContent ? undefined : '4rem'
   } : {}, [isDevMode, haveContent]);
@@ -58,8 +63,11 @@ function Contentlet({
     className: CONTENTLET_CLASS,
     ref: ref,
     style: style,
-    children: jsx(CustomComponent, {
-      contentlet: contentlet
+    children: jsx(Suspense, {
+      fallback: null,
+      children: jsx(CustomComponent, {
+        contentlet: contentlet
+      })
     })
   }));
 }

package/lib/next/components/DotCMSEditableText/DotCMSEditableText.esm.js

@@ -1,12 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
-import { Editor } from '@tinymce/tinymce-react';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, Suspense, lazy } from 'react';
 import { UVE_MODE, DotCMSUVEAction } from '@dotcms/types';
 import { __DOTCMS_UVE_EVENT__ } from '@dotcms/types/internal';
 import { getUVEState, sendMessageToUVE } from '@dotcms/uve';
 import { __TINYMCE_PATH_ON_DOTCMS__ } from '@dotcms/uve/internal';
-import { TINYMCE_CONFIG } from './utils.esm.js';
 
+/**
+ * TinyMCE is only ever rendered once the UVE is in edit mode, so the integration is split
+ * into its own chunk and fetched at that point. Importing it statically put the whole editor
+ * — and the TinyMCE React wrapper — into every consumer bundle, including live-mode pages
+ * that can never show it.
+ */
+const TinyMCEEditor = /*#__PURE__*/lazy(() => import('./TinyMCEEditor.esm.js'));
 /**
  * Allows inline edit content pulled from dotCMS API using TinyMCE editor
  *
@@ -171,14 +176,20 @@ function DotCMSEditableText({
       outline: '2px solid #006ce7',
       borderRadius: '4px'
     },
-    children: jsx(Editor, {
-      tinymceScriptSrc: scriptSrc,
-      inline: true,
-      onInit: (_, editor) => editorRef.current = editor,
-      init: TINYMCE_CONFIG[mode],
-      initialValue: content,
-      onMouseDown: onMouseDown,
-      onFocusOut: onFocusOut
+    children: jsx(Suspense, {
+      fallback: jsx("span", {
+        dangerouslySetInnerHTML: {
+          __html: content
+        }
+      }),
+      children: jsx(TinyMCEEditor, {
+        scriptSrc: scriptSrc,
+        mode: mode,
+        initialValue: content,
+        onEditorInit: editor => editorRef.current = editor,
+        onMouseDown: onMouseDown,
+        onFocusOut: onFocusOut
+      })
     })
   });
 }

package/lib/next/components/DotCMSEditableText/TinyMCEEditor.esm.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Editor } from '@tinymce/tinymce-react';
+import { TINYMCE_CONFIG } from './utils.esm.js';
+
+/**
+ * @internal
+ *
+ * Thin wrapper around `@tinymce/tinymce-react`, kept in its own module so it is the *only*
+ * place that imports the TinyMCE integration. `DotCMSEditableText` pulls it in with a dynamic
+ * import once the UVE actually enters edit mode, so live-mode consumers never download it.
+ *
+ * Do not import this module statically from anywhere else — doing so puts TinyMCE back in
+ * the main bundle and undoes the split.
+ */
+function TinyMCEEditor({
+  scriptSrc,
+  mode,
+  initialValue,
+  onEditorInit,
+  onMouseDown,
+  onFocusOut
+}) {
+  return jsx(Editor, {
+    tinymceScriptSrc: scriptSrc,
+    inline: true,
+    onInit: (_, editor) => onEditorInit(editor),
+    init: TINYMCE_CONFIG[mode],
+    initialValue: initialValue,
+    onMouseDown: onMouseDown,
+    onFocusOut: onFocusOut
+  });
+}
+
+export { TinyMCEEditor, TinyMCEEditor as default };

package/lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.esm.js

@@ -20,11 +20,18 @@ import { Row } from '../Row/Row.esm.js';
  * @returns {JSX.Element} The rendered DotCMS page body or an error message if the layout body is missing.
  *
  */
+/**
+ * Hoisted so the defaults keep a stable identity across renders. As inline `= {}` defaults
+ * they produced a fresh object on every render, which invalidated the page context's useMemo
+ * and re-rendered every container and contentlet in the tree.
+ */
+const NO_COMPONENTS = {};
+const NO_SLOTS = {};
 const DotCMSLayoutBody = ({
   page,
-  components: _components = {},
+  components: _components = NO_COMPONENTS,
   mode: _mode = 'production',
-  slots: _slots = {}
+  slots: _slots = NO_SLOTS
 }) => {
   var _page$layout;
   const dotCMSPageBody = page == null || (_page$layout = page.layout) == null ? void 0 : _page$layout.body;

package/lib/next/components/DotCMSLayoutBody/DotCMSPageProvider.esm.js

@@ -1,6 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { DotCMSPageContext } from '../../contexts/DotCMSPageContext.esm.js';
+import { useIsAnalyticsActive } from '../../hooks/useIsAnalyticsActive.esm.js';
+import { useResolvedDevMode } from '../../hooks/useIsDevMode.esm.js';
 
 /**
  * @internal
@@ -8,6 +11,11 @@ import { DotCMSPageContext } from '../../contexts/DotCMSPageContext.esm.js';
  * Client boundary that provides the DotCMS page context to the layout tree.
  * Keeping this separate from DotCMSLayoutBody allows the layout to remain
  * a server component while only the context provider runs on the client.
+ *
+ * Development mode and the Analytics-active flag are resolved here, once per layout tree,
+ * and shared through the context. Resolving them per contentlet meant one
+ * `dotcms:analytics:ready` window listener and one UVE-state lookup for every piece of
+ * content on the page.
  */
 function DotCMSPageProvider({
   page,
@@ -16,13 +24,18 @@ function DotCMSPageProvider({
   slots,
   children
 }) {
+  const isDevMode = useResolvedDevMode(mode);
+  const isAnalyticsActive = useIsAnalyticsActive();
+  const value = useMemo(() => ({
+    pageAsset: page,
+    userComponents: components,
+    mode,
+    slots,
+    isDevMode,
+    isAnalyticsActive
+  }), [page, components, mode, slots, isDevMode, isAnalyticsActive]);
   return jsx(DotCMSPageContext.Provider, {
-    value: {
-      pageAsset: page,
-      userComponents: components,
-      mode,
-      slots
-    },
+    value: value,
     children: children
   });
 }

package/lib/next/components/Row/Row.module.css.esm.js

@@ -1,8 +1,15 @@
-import { styleInject } from '../../../../_virtual/_style-inject.esm.js';
-
-var css = "._row_1e5l5_1 {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    gap: 1rem;\n}\n";
-
-styleInject(css);
-var styles = {"row":"_row_1e5l5_1"};
+var css_248z = ".Row-module_row__fJF2K {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    gap: 1rem;\n}\n";
+var styles = {"row":"Row-module_row__fJF2K"};
+(function () {
+    if (typeof document === 'undefined') return;
+    var existing = document.head.querySelectorAll('style[data-dotcms-style]');
+    for (var i = 0; i < existing.length; i++) {
+        if (existing[i].textContent === css_248z) return;
+    }
+    var style = document.createElement('style');
+    style.setAttribute('data-dotcms-style', '');
+    style.appendChild(document.createTextNode(css_248z));
+    document.head.appendChild(style);
+})();
 
 export { styles as default };

package/lib/next/contexts/DotCMSPageContext.esm.js

@@ -10,7 +10,9 @@ const DotCMSPageContext = /*#__PURE__*/createContext({
   pageAsset: undefined,
   mode: 'production',
   userComponents: {},
-  slots: {}
+  slots: {},
+  isDevMode: false,
+  isAnalyticsActive: false
 });
 
 export { DotCMSPageContext };

package/lib/next/hooks/useCheckVisibleContent.esm.js

@@ -4,7 +4,13 @@ import { useState, useLayoutEffect } from 'react';
  * @internal
  * A custom React hook that checks whether a referenced HTMLDivElement has visible content based on its height.
  *
+ * The measurement is only used to reserve space for the editor's empty-contentlet placeholder,
+ * so it is gated behind `enabled`. `getBoundingClientRect()` forces a synchronous layout, and
+ * running it from a layout effect on every contentlet of a page is expensive — in production
+ * the result was measured and then discarded.
+ *
  * @param {RefObject<HTMLDivElement>} ref - A React ref object pointing to an HTMLDivElement.
+ * @param {boolean} [enabled=true] - When false the element is never measured and the hook returns false.
  * @returns {boolean} - Returns true if the element's height is greater than zero (indicating visible content), otherwise false.
  *
  * @example
@@ -22,9 +28,12 @@ import { useState, useLayoutEffect } from 'react';
  *   );
  * }
  */
-const useCheckVisibleContent = ref => {
+const useCheckVisibleContent = (ref, enabled = true) => {
   const [haveContent, setHaveContent] = useState(false);
   useLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
     if (!ref.current) {
       setHaveContent(false);
       return;
@@ -33,7 +42,7 @@ const useCheckVisibleContent = ref => {
       height
     } = ref.current.getBoundingClientRect();
     setHaveContent(height > 0);
-  }, [ref]);
+  }, [ref, enabled]);
   return haveContent;
 };
 

package/lib/next/hooks/useIsDevMode.esm.js

@@ -1,4 +1,5 @@
-import { useContext, useState, useEffect } from 'react';
+"use client";
+import { useState, useEffect, useContext } from 'react';
 import { UVE_MODE } from '@dotcms/types';
 import { getUVEState } from '@dotcms/uve';
 import { DEVELOPMENT_MODE } from '@dotcms/uve/internal';
@@ -6,30 +7,60 @@ import { DotCMSPageContext } from '../contexts/DotCMSPageContext.esm.js';
 
 /**
  * @internal
+ *
+ * Resolve whether we are rendering in "development" mode — i.e. whether editor metadata
+ * (`data-dot-*` attributes, empty-state placeholders, fallback components) should be emitted.
+ * Inside the UVE it follows the UVE state (dev when the mode is EDIT); otherwise it follows
+ * the renderer `mode` passed to `DotCMSLayoutBody`.
+ *
+ * @param mode the renderer mode from the page context
+ * @returns `true` when editor metadata should be emitted
+ */
+const resolveDevMode = mode => {
+  var _getUVEState;
+  const uveMode = (_getUVEState = getUVEState()) == null ? void 0 : _getUVEState.mode;
+  if (uveMode) {
+    return uveMode === UVE_MODE.EDIT;
+  }
+  return mode === DEVELOPMENT_MODE;
+};
+/**
+ * @internal
+ *
+ * Owns the development-mode state for one layout tree. Called once by `DotCMSPageProvider`;
+ * the result travels down through the page context.
+ *
+ * `getUVEState()` reads the browser, so it is deliberately resolved in an effect rather than
+ * during render: on the server it would always report "not in the editor", and resolving it
+ * synchronously on the client would make the first render disagree with the server-rendered
+ * markup and trip React's hydration check inside the UVE.
+ *
+ * @param mode the renderer mode passed to `DotCMSLayoutBody`
+ * @returns `true` when editor metadata should be emitted
+ */
+const useResolvedDevMode = mode => {
+  const [isDevMode, setIsDevMode] = useState(mode === DEVELOPMENT_MODE);
+  useEffect(() => {
+    setIsDevMode(resolveDevMode(mode));
+  }, [mode]);
+  return isDevMode;
+};
+/**
+ * @internal
+ *
  * A React hook that determines if the current environment is in development mode.
  *
- * The hook returns `true` if either:
- *   - The application is running inside the DotCMS editor (as determined by `getUVEState()`).
+ * The value is resolved once per layout tree by `DotCMSPageProvider` and shared through the
+ * page context, so a page with many containers and contentlets resolves it a single time
+ * instead of once per component.
  *
  * @returns {boolean} - `true` if in development mode or inside the editor; otherwise, `false`.
  */
 const useIsDevMode = () => {
   const {
-    mode
+    isDevMode
   } = useContext(DotCMSPageContext);
-  const [isDevMode, setIsDevMode] = useState(mode === 'development');
-  useEffect(() => {
-    var _getUVEState;
-    // Inside UVE we rely on the UVE state to determine if we are in development mode
-    if ((_getUVEState = getUVEState()) != null && _getUVEState.mode) {
-      var _getUVEState2;
-      const isUVEInEditor = ((_getUVEState2 = getUVEState()) == null ? void 0 : _getUVEState2.mode) === UVE_MODE.EDIT;
-      setIsDevMode(isUVEInEditor);
-      return;
-    }
-    setIsDevMode(mode === DEVELOPMENT_MODE);
-  }, [mode]);
   return isDevMode;
 };
 
-export { useIsDevMode };
+export { resolveDevMode, useIsDevMode, useResolvedDevMode };

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@dotcms/react",
-  "version": "26.9.18-1",
+  "version": "26.9.23-1",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/uve": "26.9.18-1",
-    "@dotcms/client": "26.9.18-1"
+    "@dotcms/uve": "26.9.23-1",
+    "@dotcms/client": "26.9.23-1",
+    "@dotcms/types": "26.9.23-1"
   },
   "dependencies": {
     "@tinymce/tinymce-react": "6.2.1"
   },
   "devDependencies": {
-    "@dotcms/types": "26.9.18-1"
+    "@dotcms/types": "26.9.23-1"
   },
   "description": "Official React Components library to render a dotCMS page.",
   "repository": {
@@ -30,15 +31,15 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./index.d.ts",
       "react-server": "./index.server.esm.js",
-      "import": "./index.esm.js",
-      "types": "./index.d.ts"
+      "import": "./index.esm.js"
     }
   },
   "typesVersions": {
     "*": {
       ".": [
-        "./src/index.d.ts"
+        "./index.d.ts"
       ]
     }
   },
@@ -48,8 +49,12 @@
     "url": "https://github.com/dotCMS/core/issues"
   },
   "homepage": "https://github.com/dotCMS/core/tree/main/core-web/libs/sdk/react/README.md",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.css.esm.js"
+  ],
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "types": "./index.d.ts"
-}
+}

package/src/lib/next/components/DotCMSEditableText/TinyMCEEditor.d.ts

@@ -0,0 +1,35 @@
+import { Editor } from '@tinymce/tinymce-react';
+import { DOT_EDITABLE_TEXT_MODE } from './utils';
+/**
+ * @internal
+ *
+ * The TinyMCE editor instance handed back by `onInit`.
+ */
+export type TinyMCEEditorInstance = NonNullable<Editor['editor']>;
+/**
+ * @internal
+ */
+export interface TinyMCEEditorProps {
+    /** URL of the TinyMCE script served by the dotCMS host. */
+    scriptSrc: string;
+    /** Toolbar preset to load: `plain`, `minimal` or `full`. */
+    mode: DOT_EDITABLE_TEXT_MODE;
+    /** Field content to seed the editor with. */
+    initialValue: string;
+    /** Called once the editor is ready, with the live editor instance. */
+    onEditorInit: (editor: TinyMCEEditorInstance) => void;
+    onMouseDown: (event: MouseEvent) => void;
+    onFocusOut: () => void;
+}
+/**
+ * @internal
+ *
+ * Thin wrapper around `@tinymce/tinymce-react`, kept in its own module so it is the *only*
+ * place that imports the TinyMCE integration. `DotCMSEditableText` pulls it in with a dynamic
+ * import once the UVE actually enters edit mode, so live-mode consumers never download it.
+ *
+ * Do not import this module statically from anywhere else — doing so puts TinyMCE back in
+ * the main bundle and undoes the split.
+ */
+export declare function TinyMCEEditor({ scriptSrc, mode, initialValue, onEditorInit, onMouseDown, onFocusOut }: Readonly<TinyMCEEditorProps>): import("react/jsx-runtime").JSX.Element;
+export default TinyMCEEditor;

package/src/lib/next/components/DotCMSEditableText/utils.d.ts

@@ -1,5 +1,5 @@
-import { IAllProps } from '@tinymce/tinymce-react';
 import { DotCMSBasicContentlet } from '@dotcms/types';
+import type { IAllProps } from '@tinymce/tinymce-react';
 export type DOT_EDITABLE_TEXT_FORMAT = 'html' | 'text';
 export type DOT_EDITABLE_TEXT_MODE = 'minimal' | 'full' | 'plain';
 export interface DotCMSEditableTextProps<T extends DotCMSBasicContentlet> {

package/src/lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.d.ts

@@ -29,21 +29,4 @@ export interface DotCMSLayoutBodyProps<TContentlet extends DotCMSBasicContentlet
      */
     slots?: Record<string, ReactNode>;
 }
-/**
- * DotCMSLayoutBody component renders the layout body for a DotCMS page.
- *
- * It utilizes the dotCMS page asset's layout body to render the page body.
- * If the layout body does not exist, it renders an error message in the mode is `development`.
- *
- * @public
- * @component
- * @param {Object} props - Component properties.
- * @param {DotCMSPageAsset} props.page - The DotCMS page asset containing the layout information.
- * @param {Record<string, React.ComponentType<DotCMSContentlet>>} [props.components] - mapping of custom components for content rendering.
- * @param {DotCMSPageRendererMode} [props.mode='production'] - The renderer mode; defaults to 'production'. Alternate modes might trigger different behaviors.
- * @param {Record<string, ReactNode>} [props.slots] - Pre-rendered server component nodes keyed by contentlet identifier.
- *
- * @returns {JSX.Element} The rendered DotCMS page body or an error message if the layout body is missing.
- *
- */
 export declare const DotCMSLayoutBody: ({ page, components, mode, slots }: DotCMSLayoutBodyProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/next/components/DotCMSLayoutBody/DotCMSPageProvider.d.ts

@@ -13,6 +13,11 @@ interface DotCMSPageProviderProps {
  * Client boundary that provides the DotCMS page context to the layout tree.
  * Keeping this separate from DotCMSLayoutBody allows the layout to remain
  * a server component while only the context provider runs on the client.
+ *
+ * Development mode and the Analytics-active flag are resolved here, once per layout tree,
+ * and shared through the context. Resolving them per contentlet meant one
+ * `dotcms:analytics:ready` window listener and one UVE-state lookup for every piece of
+ * content on the page.
  */
 export declare function DotCMSPageProvider({ page, components, mode, slots, children }: DotCMSPageProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/next/contexts/DotCMSPageContext.d.ts

@@ -19,6 +19,17 @@ export interface DotCMSPageContextProps {
     mode: DotCMSPageRendererMode;
     userComponents: Record<string, React.ComponentType<DotCMSBasicContentlet>>;
     slots?: Record<string, ReactNode>;
+    /**
+     * Whether editor metadata (`data-dot-*` attributes, placeholders, fallbacks) should be
+     * emitted. Resolved once at the layout root and shared with the whole tree so it isn't
+     * recomputed by every container and contentlet.
+     */
+    isDevMode: boolean;
+    /**
+     * Whether dotCMS Analytics is active. Resolved once at the layout root — a single
+     * `dotcms:analytics:ready` listener for the tree instead of one per contentlet.
+     */
+    isAnalyticsActive: boolean;
 }
 /**
  * The `PageContext` is a React context that provides access to the DotCMS page context.

package/src/lib/next/hooks/useCheckVisibleContent.d.ts

@@ -3,7 +3,13 @@ import { RefObject } from 'react';
  * @internal
  * A custom React hook that checks whether a referenced HTMLDivElement has visible content based on its height.
  *
+ * The measurement is only used to reserve space for the editor's empty-contentlet placeholder,
+ * so it is gated behind `enabled`. `getBoundingClientRect()` forces a synchronous layout, and
+ * running it from a layout effect on every contentlet of a page is expensive — in production
+ * the result was measured and then discarded.
+ *
  * @param {RefObject<HTMLDivElement>} ref - A React ref object pointing to an HTMLDivElement.
+ * @param {boolean} [enabled=true] - When false the element is never measured and the hook returns false.
  * @returns {boolean} - Returns true if the element's height is greater than zero (indicating visible content), otherwise false.
  *
  * @example
@@ -21,4 +27,4 @@ import { RefObject } from 'react';
  *   );
  * }
  */
-export declare const useCheckVisibleContent: (ref: RefObject<HTMLDivElement>) => boolean;
+export declare const useCheckVisibleContent: (ref: RefObject<HTMLDivElement>, enabled?: boolean) => boolean;

package/src/lib/next/hooks/useIsDevMode.d.ts

@@ -1,9 +1,39 @@
+import { DotCMSPageRendererMode } from '@dotcms/types';
 /**
  * @internal
+ *
+ * Resolve whether we are rendering in "development" mode — i.e. whether editor metadata
+ * (`data-dot-*` attributes, empty-state placeholders, fallback components) should be emitted.
+ * Inside the UVE it follows the UVE state (dev when the mode is EDIT); otherwise it follows
+ * the renderer `mode` passed to `DotCMSLayoutBody`.
+ *
+ * @param mode the renderer mode from the page context
+ * @returns `true` when editor metadata should be emitted
+ */
+export declare const resolveDevMode: (mode: DotCMSPageRendererMode | undefined) => boolean;
+/**
+ * @internal
+ *
+ * Owns the development-mode state for one layout tree. Called once by `DotCMSPageProvider`;
+ * the result travels down through the page context.
+ *
+ * `getUVEState()` reads the browser, so it is deliberately resolved in an effect rather than
+ * during render: on the server it would always report "not in the editor", and resolving it
+ * synchronously on the client would make the first render disagree with the server-rendered
+ * markup and trip React's hydration check inside the UVE.
+ *
+ * @param mode the renderer mode passed to `DotCMSLayoutBody`
+ * @returns `true` when editor metadata should be emitted
+ */
+export declare const useResolvedDevMode: (mode: DotCMSPageRendererMode | undefined) => boolean;
+/**
+ * @internal
+ *
  * A React hook that determines if the current environment is in development mode.
  *
- * The hook returns `true` if either:
- *   - The application is running inside the DotCMS editor (as determined by `getUVEState()`).
+ * The value is resolved once per layout tree by `DotCMSPageProvider` and shared through the
+ * page context, so a page with many containers and contentlets resolves it a single time
+ * instead of once per component.
  *
  * @returns {boolean} - `true` if in development mode or inside the editor; otherwise, `false`.
  */

package/src/lib/next/shared/types.d.ts

@@ -1,4 +1,4 @@
-import { createDotCMSClient } from '@dotcms/client';
+import type { createDotCMSClient } from '@dotcms/client';
 import { DotCMSAISearchContentletData, DotCMSAISearchParams, DotCMSAISearchResponse, DotCMSBasicContentlet, DotCMSEntityStatus } from '@dotcms/types';
 /**
  * Return type of the AI Search context

package/_virtual/_style-inject.esm.js

@@ -1,30 +0,0 @@
-function styleInject(css, ref) {
-  if (ref === void 0) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') {
-    return;
-  }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-export { styleInject as default, styleInject };