@dotcms/client 0.0.1-beta.9 → 1.0.0

package/index.cjs.js

@@ -1,914 +1,1591 @@
 'use strict';
 
-var transforms = require('./transforms.cjs.js');
+var consola = require('consola');
+var internal = require('./internal.cjs.js');
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Default variant identifier used in the application.
+ */
 /**
- * Actions received from the dotcms editor
+ * Fields that should not be formatted when sanitizing the query.
+ * These fields are essential for maintaining the integrity of the content type.
+ */
+const CONTENT_TYPE_MAIN_FIELDS = ['live', 'variant', 'contentType', 'languageId'];
+/**
+ * URL endpoint for the content API search functionality.
+ */
+const CONTENT_API_URL = '/api/content/_search';
+
+/**
+ * @description
+ * Sanitizes the query for the given content type.
+ * It replaces the fields that are not content type fields with the correct format.
+ * Example: +field: -> +contentTypeVar.field:
+ *
+ * @example
+ *
+ * ```ts
+ * const query = '+field: value';
+ * const contentType = 'contentTypeVar';
+ * const sanitizedQuery = sanitizeQueryForContentType(query, contentType); // Output: '+contentTypeVar.field: value'
+ * ```
  *
  * @export
- * @enum {number}
+ * @param {string} query - The query string to be sanitized.
+ * @param {string} contentType - The content type to be used for formatting the fields.
+ * @returns {string} The sanitized query string.
  */
-exports.NOTIFY_CLIENT = void 0;
-(function (NOTIFY_CLIENT) {
+function sanitizeQueryForContentType(query, contentType) {
+    return query.replace(/\+([^+:]*?):/g, (original, field) => {
+        return !CONTENT_TYPE_MAIN_FIELDS.includes(field) // Fields that are not content type fields
+            ? `+${contentType}.${field}:` // Should have this format: +contentTypeVar.field:
+            : original; // Return the field if it is a content type field
+    });
+}
+
+var _Field_query;
+/**
+ * The `Field` class is used to build a query with a specific field.
+ * A Lucene Field is a key used to search for a specific value in a document.
+ *
+ * @export
+ * @class Field
+ */
+class Field {
     /**
-     * Request to page to reload
+     * Creates an instance of the `Field` class.
+     *
+     * @param {string} query - The initial query string.
      */
-    NOTIFY_CLIENT["UVE_RELOAD_PAGE"] = "uve-reload-page";
+    constructor(query) {
+        this.query = query;
+        _Field_query.set(this, '');
+        __classPrivateFieldSet(this, _Field_query, this.query, "f");
+    }
     /**
-     * Request the bounds for the elements
+     * Appends a term to the query that should be included in the search.
+     *
+     * @example
+     * ```typescript
+     * const field = new Field("+myField");
+     * field.equals("myValue");
+     * ```
+     *
+     * @param {string} term - The term that should be included in the search.
+     * @return {Equals} - An instance of `Equals`.
+     * @memberof Field
      */
-    NOTIFY_CLIENT["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
+    equals(term) {
+        return buildEquals(__classPrivateFieldGet(this, _Field_query, "f"), term);
+    }
+}
+_Field_query = new WeakMap();
+
+var _NotOperand_query;
+/**
+ * 'NotOperand' Is a Typescript class that provides the ability to use the NOT operand in the lucene query string.
+ *
+ * @export
+ * @class NotOperand
+ */
+class NotOperand {
+    constructor(query) {
+        this.query = query;
+        _NotOperand_query.set(this, '');
+        __classPrivateFieldSet(this, _NotOperand_query, this.query, "f");
+    }
     /**
-     * Received pong from the editor
+     * This method appends to the query a term that should be included in the search.
+     *
+     * @example
+     * ```typescript
+     * const notOperand = new NotOperand("+myField");
+     * notOperand.equals("myValue");
+     * ```
+     *
+     * @param {string} term - The term that should be included in the search.
+     * @return {*}  {Equals} - An instance of Equals.
+     * @memberof NotOperand
      */
-    NOTIFY_CLIENT["UVE_EDITOR_PONG"] = "uve-editor-pong";
+    equals(term) {
+        return buildEquals(__classPrivateFieldGet(this, _NotOperand_query, "f"), term);
+    }
+}
+_NotOperand_query = new WeakMap();
+
+var _Operand_query;
+/**
+ * 'Operand' Is a Typescript class that provides the ability to use operands in the lucene query string.}
+ * An operand is a logical operator used to join two or more conditions in a query.
+ *
+ * @export
+ * @class Operand
+ */
+class Operand {
+    constructor(query) {
+        this.query = query;
+        _Operand_query.set(this, '');
+        __classPrivateFieldSet(this, _Operand_query, this.query, "f");
+    }
     /**
-     * Received scroll event trigger from the editor
+     * This method appends to the query a term that should be excluded in the search.
+     *
+     * Ex: "-myValue"
+     *
+     * @param {string} field - The field that should be excluded in the search.
+     * @return {*}  {Field} - An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
+     * @memberof Operand
      */
-    NOTIFY_CLIENT["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
+    excludeField(field) {
+        return buildExcludeField(__classPrivateFieldGet(this, _Operand_query, "f"), field);
+    }
     /**
-     * Set the page data
+     * This method appends to the query a field that should be included in the search.
+     *
+     * Ex: "+myField:"
+     *
+     * @param {string} field - The field that should be included in the search.
+     * @return {*}  {Field} -  An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
+     * @memberof Operand
      */
-    NOTIFY_CLIENT["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
+    field(field) {
+        return buildField(__classPrivateFieldGet(this, _Operand_query, "f"), field);
+    }
     /**
-     * Copy contentlet inline editing success
+     * This method appends to the query a term that should be included in the search.
+     *
+     * Ex: myValue or "My value"
+     *
+     * @param {string} term - The term that should be included in the search.
+     * @return {*}  {Equals} - An instance of Equals.
+     * @memberof Operand
      */
-    NOTIFY_CLIENT["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
-})(exports.NOTIFY_CLIENT || (exports.NOTIFY_CLIENT = {}));
+    equals(term) {
+        return buildEquals(__classPrivateFieldGet(this, _Operand_query, "f"), term);
+    }
+}
+_Operand_query = new WeakMap();
 
 /**
- * Calculates the bounding information for each page element within the given containers.
+ * Enum for common Operands
  *
  * @export
- * @param {HTMLDivElement[]} containers - An array of HTMLDivElement representing the containers.
- * @return {ContainerBound[]} An array of objects containing the bounding information for each page element.
- * @example
- * ```ts
- * const containers = document.querySelectorAll('.container');
- * const bounds = getPageElementBound(containers);
- * console.log(bounds);
- * ```
+ * @enum {number}
  */
-function getPageElementBound(containers) {
-    return containers.map((container) => {
-        const containerRect = container.getBoundingClientRect();
-        const contentlets = Array.from(container.querySelectorAll('[data-dot-object="contentlet"]'));
-        return {
-            x: containerRect.x,
-            y: containerRect.y,
-            width: containerRect.width,
-            height: containerRect.height,
-            payload: JSON.stringify({
-                container: getContainerData(container)
-            }),
-            contentlets: getContentletsBound(containerRect, contentlets)
-        };
-    });
-}
+var OPERAND;
+(function (OPERAND) {
+    OPERAND["OR"] = "OR";
+    OPERAND["AND"] = "AND";
+    OPERAND["NOT"] = "NOT";
+})(OPERAND || (OPERAND = {}));
 /**
- * Calculates the bounding information for each contentlet inside a container.
+ * This function removes extra spaces from a string.
  *
- * @export
- * @param {DOMRect} containerRect - The bounding rectangle of the container.
- * @param {HTMLDivElement[]} contentlets - An array of HTMLDivElement representing the contentlets.
- * @return {ContentletBound[]} An array of objects containing the bounding information for each contentlet.
  * @example
  * ```ts
- * const containerRect = container.getBoundingClientRect();
- * const contentlets = container.querySelectorAll('.contentlet');
- * const bounds = getContentletsBound(containerRect, contentlets);
- * console.log(bounds); // Element bounds within the container
+ * sanitizeQuery("  my query  "); // Output: "my query"
  * ```
+ *
+ * @export
+ * @param {string} str
+ * @return {*}  {string}
  */
-function getContentletsBound(containerRect, contentlets) {
-    return contentlets.map((contentlet) => {
-        const contentletRect = contentlet.getBoundingClientRect();
-        return {
-            x: 0,
-            y: contentletRect.y - containerRect.y,
-            width: contentletRect.width,
-            height: contentletRect.height,
-            payload: JSON.stringify({
-                container: contentlet.dataset?.['dotContainer']
-                    ? JSON.parse(contentlet.dataset?.['dotContainer'])
-                    : getClosestContainerData(contentlet),
-                contentlet: {
-                    identifier: contentlet.dataset?.['dotIdentifier'],
-                    title: contentlet.dataset?.['dotTitle'],
-                    inode: contentlet.dataset?.['dotInode'],
-                    contentType: contentlet.dataset?.['dotType']
-                }
-            })
-        };
-    });
+function sanitizeQuery(str) {
+    return str.replace(/\s{2,}/g, ' ').trim();
 }
 /**
- * Get container data from VTLS.
+ * This function sanitizes a term by adding quotes if it contains spaces.
+ * In lucene, a term with spaces should be enclosed in quotes.
  *
- * @export
- * @param {HTMLElement} container - The container element.
- * @return {object} An object containing the container data.
  * @example
  * ```ts
- * const container = document.querySelector('.container');
- * const data = getContainerData(container);
- * console.log(data);
+ * sanitizePhrases(`my term`); // Output: `"my term"`
+ * sanitizePhrases(`myterm`); // Output: `myterm`
  * ```
+ *
+ * @export
+ * @param {string} term
+ * @return {*}  {string}
  */
-function getContainerData(container) {
-    return {
-        acceptTypes: container.dataset?.['dotAcceptTypes'] || '',
-        identifier: container.dataset?.['dotIdentifier'] || '',
-        maxContentlets: container.dataset?.['maxContentlets'] || '',
-        uuid: container.dataset?.['dotUuid'] || ''
-    };
+function sanitizePhrases(term) {
+    return term.includes(' ') ? `'${term}'` : term;
 }
 /**
- * Get the closest container data from the contentlet.
+ * This function builds a term to be used in a lucene query.
+ * We need to sanitize the term before adding it to the query.
  *
- * @export
- * @param {Element} element - The contentlet element.
- * @return {object | null} An object containing the closest container data or null if no container is found.
  * @example
  * ```ts
- * const contentlet = document.querySelector('.contentlet');
- * const data = getClosestContainerData(contentlet);
- * console.log(data);
+ * const equals = buildEquals("+myField: ", "myValue"); // Current query: "+myField: myValue"
  * ```
- */
-function getClosestContainerData(element) {
-    // Find the closest ancestor element with data-dot-object="container" attribute
-    const container = element.closest('[data-dot-object="container"]');
-    // If a container element is found
-    if (container) {
-        // Return the dataset of the container element
-        return getContainerData(container);
-    }
-    else {
-        // If no container element is found, return null
-        console.warn('No container found for the contentlet');
-        return null;
-    }
-}
-/**
- * Find the closest contentlet element based on HTMLElement.
  *
  * @export
- * @param {HTMLElement | null} element - The starting element.
- * @return {HTMLElement | null} The closest contentlet element or null if not found.
- * @example
- * const element = document.querySelector('.some-element');
- * const contentlet = findDotElement(element);
- * console.log(contentlet);
+ * @param {string} query
+ * @param {string} term
+ * @return {*}  {Equals}
  */
-function findDotElement(element) {
-    if (!element)
-        return null;
-    if (element?.dataset?.['dotObject'] === 'contentlet' ||
-        (element?.dataset?.['dotObject'] === 'container' && element.children.length === 0)) {
-        return element;
-    }
-    return findDotElement(element?.['parentElement']);
+function buildEquals(query, term) {
+    const newQuery = query + sanitizePhrases(term);
+    return new Equals(newQuery);
 }
 /**
- * Find VTL data within a target element.
+ * This function builds a term to be used in a lucene query.
+ * We need to sanitize the raw query before adding it to the query.
  *
- * @export
- * @param {HTMLElement} target - The target element to search within.
- * @return {Array<{ inode: string, name: string }> | null} An array of objects containing VTL data or null if none found.
  * @example
  * ```ts
- * const target = document.querySelector('.target-element');
- * const vtlData = findVTLData(target);
- * console.log(vtlData);
+ * const query = "+myField: myValue";
+ * const field = buildRawEquals(query, "-myField2: myValue2"); // Current query: "+myField: myValue -myField2: myValue"
  * ```
+ *
+ * @export
+ * @param {string} query
+ * @param {string} raw
+ * @return {*}  {Equals}
  */
-function findVTLData(target) {
-    const vltElements = target.querySelectorAll('[data-dot-object="vtl-file"]');
-    if (!vltElements.length) {
-        return null;
-    }
-    return Array.from(vltElements).map((vltElement) => {
-        return {
-            inode: vltElement.dataset?.['dotInode'],
-            name: vltElement.dataset?.['dotUrl']
-        };
-    });
+function buildRawEquals(query, raw) {
+    const newQuery = query + ` ${raw}`;
+    return new Equals(sanitizeQuery(newQuery));
 }
 /**
- * Check if the scroll position is at the bottom of the page.
+ * This function builds a field to be used in a lucene query.
+ * We need to format the field before adding it to the query.
  *
- * @export
- * @return {boolean} True if the scroll position is at the bottom, otherwise false.
  * @example
  * ```ts
- * if (scrollIsInBottom()) {
- *     console.log('Scrolled to the bottom');
- * }
+ * const field = buildField("+myField: ", "myValue"); // Current query: "+myField: myValue"
  * ```
- */
-function scrollIsInBottom() {
-    const documentHeight = document.documentElement.scrollHeight;
-    const viewportHeight = window.innerHeight;
-    const scrollY = window.scrollY;
-    return scrollY + viewportHeight >= documentHeight;
-}
-
-/**
- * Represents an array of DotCMSPageEditorSubscription objects.
- * Used to store the subscriptions for the editor and unsubscribe later.
- */
-const subscriptions = [];
-/**
- * Sets the bounds of the containers in the editor.
- * Retrieves the containers from the DOM and sends their position data to the editor.
- * @private
- * @memberof DotCMSPageEditor
- */
-function setBounds() {
-    const containers = Array.from(document.querySelectorAll('[data-dot-object="container"]'));
-    const positionData = getPageElementBound(containers);
-    postMessageToEditor({
-        action: exports.CLIENT_ACTIONS.SET_BOUNDS,
-        payload: positionData
-    });
-}
-/**
- * Listens for editor messages and performs corresponding actions based on the received message.
  *
- * @private
- * @memberof DotCMSPageEditor
+ * @export
+ * @param {string} query
+ * @param {string} field
+ * @return {*}  {Field}
  */
-function listenEditorMessages() {
-    const messageCallback = (event) => {
-        const ACTIONS_NOTIFICATION = {
-            [exports.NOTIFY_CLIENT.UVE_RELOAD_PAGE]: () => {
-                window.location.reload();
-            },
-            [exports.NOTIFY_CLIENT.UVE_REQUEST_BOUNDS]: () => {
-                setBounds();
-            },
-            [exports.NOTIFY_CLIENT.UVE_SCROLL_INSIDE_IFRAME]: () => {
-                const direction = event.data.direction;
-                if ((window.scrollY === 0 && direction === 'up') ||
-                    (scrollIsInBottom() && direction === 'down')) {
-                    // If the iframe scroll is at the top or bottom, do not send anything.
-                    // This avoids losing the scrollend event.
-                    return;
-                }
-                const scrollY = direction === 'up' ? -120 : 120;
-                window.scrollBy({ left: 0, top: scrollY, behavior: 'smooth' });
-            }
-        };
-        ACTIONS_NOTIFICATION[event.data.name]?.();
-    };
-    window.addEventListener('message', messageCallback);
-    subscriptions.push({
-        type: 'listener',
-        event: 'message',
-        callback: messageCallback
-    });
+function buildField(query, field) {
+    const newQuery = query + ` +${field}:`;
+    return new Field(newQuery);
 }
 /**
- * Listens for pointer move events and extracts information about the hovered contentlet.
+ * This function builds an exclude field to be used in a lucene query.
+ * We need to format the field before adding it to the query.
  *
- * @private
- * @memberof DotCMSPageEditor
- */
-function listenHoveredContentlet() {
-    const pointerMoveCallback = (event) => {
-        const foundElement = findDotElement(event.target);
-        if (!foundElement)
-            return;
-        const { x, y, width, height } = foundElement.getBoundingClientRect();
-        const isContainer = foundElement.dataset?.['dotObject'] === 'container';
-        const contentletForEmptyContainer = {
-            identifier: 'TEMP_EMPTY_CONTENTLET',
-            title: 'TEMP_EMPTY_CONTENTLET',
-            contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
-            inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
-            widgetTitle: 'TEMP_EMPTY_CONTENTLET',
-            baseType: 'TEMP_EMPTY_CONTENTLET',
-            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']
-        };
-        const vtlFiles = findVTLData(foundElement);
-        const contentletPayload = {
-            container: 
-            // Here extract dot-container from contentlet if it is Headless
-            // or search in parent container if it is VTL
-            foundElement.dataset?.['dotContainer']
-                ? JSON.parse(foundElement.dataset?.['dotContainer'])
-                : getClosestContainerData(foundElement),
-            contentlet: isContainer ? contentletForEmptyContainer : contentlet,
-            vtlFiles
-        };
-        postMessageToEditor({
-            action: exports.CLIENT_ACTIONS.SET_CONTENTLET,
-            payload: {
-                x,
-                y,
-                width,
-                height,
-                payload: contentletPayload
-            }
-        });
-    };
-    document.addEventListener('pointermove', pointerMoveCallback);
-    subscriptions.push({
-        type: 'listener',
-        event: 'pointermove',
-        callback: pointerMoveCallback
-    });
-}
-/**
- * Attaches a scroll event listener to the window
- * and sends a message to the editor when the window is scrolled.
+ * @example
+ * ```ts
+ * const query = "+myField: myValue";
+ * const field = buildExcludeField(query, "myField2"); // Current query: "+myField: myValue -myField2:"
+ * ```
  *
- * @private
- * @memberof DotCMSPageEditor
- */
-function scrollHandler() {
-    const scrollCallback = () => {
-        postMessageToEditor({
-            action: exports.CLIENT_ACTIONS.IFRAME_SCROLL
-        });
-        // In case it doesn't have a dotUVE object, we create it with the initial values.
-        window.dotUVE = {
-            ...(window.dotUVE ?? INITIAL_DOT_UVE),
-            lastScrollYPosition: window.scrollY
-        };
-    };
-    const scrollEndCallback = () => {
-        postMessageToEditor({
-            action: exports.CLIENT_ACTIONS.IFRAME_SCROLL_END
-        });
-    };
-    window.addEventListener('scroll', scrollCallback);
-    window.addEventListener('scrollend', scrollEndCallback);
-    subscriptions.push({
-        type: 'listener',
-        event: 'scroll',
-        callback: scrollEndCallback
-    });
-    subscriptions.push({
-        type: 'listener',
-        event: 'scroll',
-        callback: scrollCallback
-    });
-}
-/**
- * Sends a message to the editor to get the page data.
- * @param {string} pathname - The pathname of the page.
- * @private
- * @memberof DotCMSPageEditor
+ * @export
+ * @param {string} query
+ * @param {string} field
+ * @return {*}  {Field}
  */
-function fetchPageDataFromInsideUVE(pathname) {
-    postMessageToEditor({
-        action: exports.CLIENT_ACTIONS.GET_PAGE_DATA,
-        payload: {
-            pathname
-        }
-    });
+function buildExcludeField(query, field) {
+    const newQuery = query + ` -${field}:`;
+    return new Field(newQuery);
 }
-
 /**
- * Updates the navigation in the editor.
+ * This function builds an operand to be used in a lucene query.
+ * We need to format the operand before adding it to the query.
  *
- * @param {string} pathname - The pathname to update the navigation with.
- * @memberof DotCMSPageEditor
  * @example
- * updateNavigation('/home'); // Sends a message to the editor to update the navigation to '/home'
- */
-function updateNavigation(pathname) {
-    postMessageToEditor({
-        action: exports.CLIENT_ACTIONS.NAVIGATION_UPDATE,
-        payload: {
-            url: pathname || '/'
-        }
-    });
-}
-/**
- * You can use this function to edit a contentlet in the editor.
- *
- * Calling this function inside the editor, will prompt the UVE to open a dialog to edit the contentlet.
- *
+ * <caption>E.g. Using the AND operand</caption>
+ * ```ts
+ * const query = "+myField: myValue";
+ * const field = buildOperand(query, OPERAND.AND); // Current query: "+myField: myValue AND"
+ * ```
+ * @example
+ * <caption>E.g. Using the OR operand</caption>
+ * ```ts
+ * const query = "+myField: myValue";
+ * const field = buildOperand(query, OPERAND.OR); // Current query: "+myField: myValue OR"
+ * ```
  * @export
- * @template T
- * @param {Contentlet<T>} contentlet - The contentlet to edit.
+ * @param {string} query
+ * @param {OPERAND} operand
+ * @return {*}  {Operand}
  */
-function editContentlet(contentlet) {
-    postMessageToEditor({
-        action: exports.CLIENT_ACTIONS.EDIT_CONTENTLET,
-        payload: contentlet
-    });
+function buildOperand(query, operand) {
+    const newQuery = query + ` ${operand} `;
+    return new Operand(newQuery);
 }
 /**
- * Initializes the inline editing in the editor.
+ * This function builds a NOT operand to be used in a lucene query.
+ * We need to format the operand before adding it to the query.
  *
- * @export
- * @param {INLINE_EDITING_EVENT_KEY} type
- * @param {InlineEditEventData} eventData
- * @return {*}
- *
- *  * @example
- * ```html
- * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
- *      ${My Content}
- * </div>
+ * @example
+ * ```ts
+ * const query = "+myField: myValue";
+ * const field = buildNotOperand(query); // Current query: "+myField: myValue NOT"
  * ```
- */
-function initInlineEditing(type, data) {
-    postMessageToEditor({
-        action: exports.CLIENT_ACTIONS.INIT_INLINE_EDITING,
-        payload: {
-            type,
-            data
-        }
-    });
-}
-/*
- * Reorders the menu based on the provided configuration.
- *
- * @param {ReorderMenuConfig} [config] - Optional configuration for reordering the menu.
- * @param {number} [config.startLevel=1] - The starting level of the menu to reorder.
- * @param {number} [config.depth=2] - The depth of the menu to reorder.
  *
- * This function constructs a URL for the reorder menu page with the specified
- * start level and depth, and sends a message to the editor to perform the reorder action.
+ * @export
+ * @param {string} query
+ * @return {*}  {NotOperand}
  */
-function reorderMenu(config) {
-    const { startLevel = 1, depth = 2 } = config || {};
-    postMessageToEditor({
-        action: exports.CLIENT_ACTIONS.REORDER_MENU,
-        payload: { startLevel, depth }
-    });
+function buildNotOperand(query) {
+    const newQuery = query + ` ${OPERAND.NOT} `;
+    return new NotOperand(newQuery);
 }
+
+var _Equals_query;
 /**
- * @deprecated Use `getUVEState` function on {@link https://npmjs.com/package/@dotcms/uve|@dotcms/uve} instead, this function will be removed on future versions.
- *
- * Checks if the code is running inside the DotCMS Universal Visual Editor (UVE).
+ * 'Equal' Is a Typescript class that provides the ability to use terms in the lucene query string.
+ * A term is a value used to search for a specific value in a document. It can be a word or a phrase.
  *
- * The function checks three conditions:
- * 1. If window is defined (for SSR environments)
- * 2. If the page is not in preview mode
- * 3. If the current window is embedded in a parent frame
+ * Ex: myValue or "My Value"
  *
- * @returns {boolean} Returns true if running inside the UVE editor, false if running standalone or in preview mode
- * @example
- * ```ts
- * // Check if code is running in editor before initializing editor-specific features
- * if (isInsideEditor()) {
- *     initEditor(config);
- * } else {
- *     initStandaloneMode();
- * }
- * ```
+ * @export
+ * @class Equal
  */
-function isInsideEditor() {
-    if (typeof window === 'undefined') {
-        return false;
+class Equals {
+    constructor(query) {
+        this.query = query;
+        _Equals_query.set(this, '');
+        __classPrivateFieldSet(this, _Equals_query, this.query, "f");
+    }
+    /**
+     * This method appends to the query a term that should be excluded in the search.
+     *
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.excludeField("myField2").equals("myValue2"); // Current query: "+myField: myValue -myField2: myValue2"
+     * ```
+     *
+     * @param {string} field - The field that should be excluded in the search.
+     * @return {*}  {Field} - An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
+     * @memberof Equal
+     */
+    excludeField(field) {
+        return buildExcludeField(__classPrivateFieldGet(this, _Equals_query, "f"), field);
+    }
+    /**
+     * This method appends to the query a field that should be included in the search.
+     *
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.field("myField2").equals("myValue2");  // Current query: "+myField: myValue +myField2: myValue2"
+     *```
+     * @param {string} field - The field that should be included in the search.
+     * @return {*}  {Field} - An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
+     * @memberof Equal
+     */
+    field(field) {
+        return buildField(__classPrivateFieldGet(this, _Equals_query, "f"), field);
+    }
+    /**
+     * This method appends to the query an operand to use logic operators in the query.
+     *
+     * @example
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.or().field("myField2").equals("myValue2"); // Current query: "+myField: myValue OR +myField2: myValue2"
+     * ```
+     *
+     * @return {*}  {Operand} - An instance of a Lucene Operand. An operand is a logical operator used to combine terms or phrases in a query.
+     * @memberof Equal
+     */
+    or() {
+        return buildOperand(__classPrivateFieldGet(this, _Equals_query, "f"), OPERAND.OR);
+    }
+    /**
+     * This method appends to the query an operand to use logic operators in the query.
+     *
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.and().field("myField2").equals("myValue2"); // Current query: "+myField: myValue AND +myField2: myValue2"
+     * ```
+     *
+     * @return {*}  {Operand} - An instance of a Lucene Operand. An operand is a logical operator used to combine terms or phrases in a query.
+     * @memberof Equal
+     */
+    and() {
+        return buildOperand(__classPrivateFieldGet(this, _Equals_query, "f"), OPERAND.AND);
+    }
+    /**
+     * This method appends to the query an operand to use logic operators in the query.
+     *
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.not().field("myField").equals("myValue2"); // Current query: "+myField: myValue NOT +myField: myValue2"
+     * ```
+     *
+     * @return {*}  {NotOperand} - An instance of a Lucene Not Operand. A not operand is a logical operator used to exclude terms or phrases in a query.
+     * @memberof Equal
+     */
+    not() {
+        return buildNotOperand(__classPrivateFieldGet(this, _Equals_query, "f"));
+    }
+    /**
+     * This method allows to pass a raw query string to the query builder.
+     * This raw query should end in a Lucene Equal.
+     * This method is useful when you want to append a complex query or an already written query to the query builder.
+     *
+     * @example
+     * ```ts
+     * // This builds the follow raw query "+myField: value AND (someOtherValue OR anotherValue)"
+     * const equals = new Equals("+myField: value");
+     * equals.raw("+myField2: value2"); // Current query: "+myField: value +myField2: anotherValue"
+     * ```
+     *
+     * @param {string} query - A raw query string.
+     * @return {*}  {Equal} - An instance of a Lucene Equal. A term is a value used to search for a specific value in a document.
+     * @memberof QueryBuilder
+     */
+    raw(query) {
+        return buildRawEquals(__classPrivateFieldGet(this, _Equals_query, "f"), query);
+    }
+    /**
+     * This method returns the final query string.
+     *
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.field("myField2").equals("myValue2").build(); // Returns "+myField: myValue +myField2: myValue2"
+     * ```
+     *
+     * @return {*}  {string} - The final query string.
+     * @memberof Equal
+     */
+    build() {
+        return sanitizeQuery(__classPrivateFieldGet(this, _Equals_query, "f"));
     }
-    return window.parent !== window;
-}
-function initDotUVE() {
-    window.dotUVE = INITIAL_DOT_UVE;
 }
+_Equals_query = new WeakMap();
+
+var _QueryBuilder_query;
 /**
- * Initializes the DotCMS page editor.
- *
- * @param {DotCMSPageEditorConfig} config - Optional configuration for the editor.
+ * 'QueryBuilder' Is a Typescript class that provides the ability to build a query string using the Lucene syntax in a more readable way.
  * @example
  * ```ts
- * const config = { pathname: '/home' };
- * initEditor(config); // Initializes the editor with the provided configuration
+ *  const qb = new QueryBuilder();
+ *  const query = qb
+ *          .field('contentType')
+ *          .equals('Blog')
+ *          .field('conhost')
+ *          .equals('my-super-cool-site')
+ *          .build(); // Output: `+contentType:Blog +conhost:my-super-cool-site"`
  * ```
- */
-function initEditor(config) {
-    initDotUVE();
-    fetchPageDataFromInsideUVE(config.pathname);
-    listenEditorMessages();
-    listenHoveredContentlet();
-    scrollHandler();
-}
-/**
- * Destroys the editor by removing event listeners and disconnecting observers.
  *
  * @example
  * ```ts
- * destroyEditor(); // Cleans up the editor by removing all event listeners and disconnecting observers
+ *  const qb = new QueryBuilder();
+ *  const query = qb
+ *          .field('contentType')
+ *          .equals('Blog')
+ *          .field('title')
+ *          .equals('Football')
+ *          .excludeField('summary')
+ *          .equals('Lionel Messi')
+ *          .build(); // Output: `+contentType:Blog +title:Football -summary:"Lionel Messi"`
  * ```
+ * @export
+ * @class QueryBuilder
  */
-function destroyEditor() {
-    subscriptions.forEach((subscription) => {
-        if (subscription.type === 'listener') {
-            window.removeEventListener(subscription.event, subscription.callback);
-        }
-        if (subscription.type === 'observer') {
-            subscription.observer.disconnect();
-        }
-    });
+class QueryBuilder {
+    constructor() {
+        _QueryBuilder_query.set(this, '');
+    }
+    /**
+     * This method appends to the query a field that should be included in the search.
+     *
+     * @example
+     * ```ts
+     * const qb = new QueryBuilder();
+     * qb.field("+myField: ", "myValue"); // Current query: "+myField: myValue"
+     * ```
+     *
+     * @param {string} field - The field that should be included in the search.
+     * @return {*}  {Field} -  An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
+     * @memberof QueryBuilder
+     */
+    field(field) {
+        return buildField(__classPrivateFieldGet(this, _QueryBuilder_query, "f"), field);
+    }
+    /**
+     * This method appends to the query a field that should be excluded from the search.
+     *
+     * @example
+     * ```ts
+     * const qb = new QueryBuilder();
+     * qb.excludeField("myField").equals("myValue"); // Current query: "-myField: myValue"
+     * ```
+     *
+     * @param {string} field - The field that should be excluded from the search.
+     * @return {*}  {Field} -  An instance of a Lucene Exclude Field. An exclude field is a key used to exclude for a specific value in a document.
+     * @memberof QueryBuilder
+     */
+    excludeField(field) {
+        return buildExcludeField(__classPrivateFieldGet(this, _QueryBuilder_query, "f"), field);
+    }
+    /**
+     * This method allows to pass a raw query string to the query builder.
+     * This raw query should end in Equals.
+     * This method is useful when you want to append a complex query or an already written query to the query builder.
+     *
+     * @example
+     * ```ts
+     * const qb = new QueryBuilder();
+     * qb.raw("+myField: value AND (someOtherValue OR anotherValue)"); // Current query: "+myField: value AND (someOtherValue OR anotherValue)"
+     * ```
+     *
+     * @param {string} query - A raw query string.
+     * @return {*}  {Equals} - An instance of Equals. A term is a value used to search for a specific value in a document.
+     * @memberof QueryBuilder
+     */
+    raw(query) {
+        return buildRawEquals(__classPrivateFieldGet(this, _QueryBuilder_query, "f"), query);
+    }
 }
+_QueryBuilder_query = new WeakMap();
 
-const INITIAL_DOT_UVE = {
-    editContentlet,
-    initInlineEditing,
-    reorderMenu,
-    lastScrollYPosition: 0
-};
+var _CollectionBuilder_page, _CollectionBuilder_limit, _CollectionBuilder_depth, _CollectionBuilder_render, _CollectionBuilder_sortBy, _CollectionBuilder_contentType, _CollectionBuilder_defaultQuery, _CollectionBuilder_query, _CollectionBuilder_rawQuery, _CollectionBuilder_languageId, _CollectionBuilder_draft, _CollectionBuilder_serverUrl, _CollectionBuilder_requestOptions;
 /**
- * Actions send to the dotcms editor
+ * Creates a Builder to filter and fetch content from the content API for a specific content type.
  *
  * @export
- * @enum {number}
+ * @class CollectionBuilder
+ * @template T Represents the type of the content type to fetch. Defaults to unknown.
  */
-exports.CLIENT_ACTIONS = void 0;
-(function (CLIENT_ACTIONS) {
+class CollectionBuilder {
     /**
-     * Tell the dotcms editor that page change
+     * Creates an instance of CollectionBuilder.
+     * @param {ClientOptions} requestOptions Options for the client request.
+     * @param {string} serverUrl The server URL.
+     * @param {string} contentType The content type to fetch.
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["NAVIGATION_UPDATE"] = "set-url";
+    constructor(requestOptions, serverUrl, contentType) {
+        _CollectionBuilder_page.set(this, 1);
+        _CollectionBuilder_limit.set(this, 10);
+        _CollectionBuilder_depth.set(this, 0);
+        _CollectionBuilder_render.set(this, false);
+        _CollectionBuilder_sortBy.set(this, void 0);
+        _CollectionBuilder_contentType.set(this, void 0);
+        _CollectionBuilder_defaultQuery.set(this, void 0);
+        _CollectionBuilder_query.set(this, void 0);
+        _CollectionBuilder_rawQuery.set(this, void 0);
+        _CollectionBuilder_languageId.set(this, 1);
+        _CollectionBuilder_draft.set(this, false);
+        _CollectionBuilder_serverUrl.set(this, void 0);
+        _CollectionBuilder_requestOptions.set(this, void 0);
+        __classPrivateFieldSet(this, _CollectionBuilder_requestOptions, requestOptions, "f");
+        __classPrivateFieldSet(this, _CollectionBuilder_serverUrl, serverUrl, "f");
+        __classPrivateFieldSet(this, _CollectionBuilder_contentType, contentType, "f");
+        // Build the default query with the contentType field
+        __classPrivateFieldSet(this, _CollectionBuilder_defaultQuery, new QueryBuilder().field('contentType').equals(__classPrivateFieldGet(this, _CollectionBuilder_contentType, "f")), "f");
+    }
     /**
-     * Send the element position of the rows, columnsm containers and contentlets
+     * Returns the sort query in the format: field order, field order, ...
+     *
+     * @readonly
+     * @private
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["SET_BOUNDS"] = "set-bounds";
+    get sort() {
+        return __classPrivateFieldGet(this, _CollectionBuilder_sortBy, "f")?.map((sort) => `${sort.field} ${sort.order}`).join(',');
+    }
     /**
-     * Send the information of the hovered contentlet
+     * Returns the offset for pagination.
+     *
+     * @readonly
+     * @private
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["SET_CONTENTLET"] = "set-contentlet";
+    get offset() {
+        return __classPrivateFieldGet(this, _CollectionBuilder_limit, "f") * (__classPrivateFieldGet(this, _CollectionBuilder_page, "f") - 1);
+    }
     /**
-     * Tell the editor that the page is being scrolled
+     * Returns the full URL for the content API.
+     *
+     * @readonly
+     * @private
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["IFRAME_SCROLL"] = "scroll";
+    get url() {
+        return `${__classPrivateFieldGet(this, _CollectionBuilder_serverUrl, "f")}${CONTENT_API_URL}`;
+    }
     /**
-     * Tell the editor that the page has stopped scrolling
+     * Returns the current query built.
+     *
+     * @readonly
+     * @private
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["IFRAME_SCROLL_END"] = "scroll-end";
+    get currentQuery() {
+        return __classPrivateFieldGet(this, _CollectionBuilder_query, "f") ?? __classPrivateFieldGet(this, _CollectionBuilder_defaultQuery, "f");
+    }
     /**
-     * Ping the editor to see if the page is inside the editor
+     * Filters the content by the specified language ID.
+     *
+     * @example
+     * ```typescript
+     * const client = new DotCMSClient(config);
+     * const collectionBuilder = client.content.getCollection("Blog");
+     * collectionBuilder.language(1);
+     * ```
+     *
+     * @param {number | string} languageId The language ID to filter the content by.
+     * @return {CollectionBuilder} A CollectionBuilder instance.
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["PING_EDITOR"] = "ping-editor";
+    language(languageId) {
+        __classPrivateFieldSet(this, _CollectionBuilder_languageId, languageId, "f");
+        return this;
+    }
     /**
-     * Tell the editor to init the inline editing editor.
+     * Setting this to true will server side render (using velocity) any widgets that are returned by the content query.
+     *
+     * More information here: {@link https://www.dotcms.com/docs/latest/content-api-retrieval-and-querying#ParamsOptional}
+     *
+     * @return {CollectionBuilder} A CollectionBuilder instance.
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["INIT_INLINE_EDITING"] = "init-inline-editing";
+    render() {
+        __classPrivateFieldSet(this, _CollectionBuilder_render, true, "f");
+        return this;
+    }
     /**
-     * Tell the editor to open the Copy-contentlet dialog
-     * To copy a content and then edit it inline.
+     * Sorts the content by the specified fields and orders.
+     *
+     * @example
+     * ```typescript
+     * const client = new DotCMSClient(config);
+     * const collectionBuilder = client.content.getCollection("Blog");
+     * const sortBy = [{ field: 'title', order: 'asc' }, { field: 'modDate', order: 'desc' }];
+     * collectionBuilder("Blog").sortBy(sortBy);
+     * ```
+     *
+     * @param {SortBy[]} sortBy Array of constraints to sort the content by.
+     * @return {CollectionBuilder} A CollectionBuilder instance.
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["COPY_CONTENTLET_INLINE_EDITING"] = "copy-contentlet-inline-editing";
+    sortBy(sortBy) {
+        __classPrivateFieldSet(this, _CollectionBuilder_sortBy, sortBy, "f");
+        return this;
+    }
     /**
-     * Tell the editor to save inline edited contentlet
+     * Sets the maximum amount of content to fetch.
+     *
+     * @param {number} limit The maximum amount of content to fetch.
+     * @return {CollectionBuilder} A CollectionBuilder instance.
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["UPDATE_CONTENTLET_INLINE_EDITING"] = "update-contentlet-inline-editing";
+    limit(limit) {
+        __classPrivateFieldSet(this, _CollectionBuilder_limit, limit, "f");
+        return this;
+    }
     /**
-     * Tell the editor to trigger a menu reorder
+     * Sets the page number to fetch.
+     *
+     * @param {number} page The page number to fetch.
+     * @return {CollectionBuilder} A CollectionBuilder instance.
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["REORDER_MENU"] = "reorder-menu";
+    page(page) {
+        __classPrivateFieldSet(this, _CollectionBuilder_page, page, "f");
+        return this;
+    }
+    query(arg) {
+        if (typeof arg === 'string') {
+            __classPrivateFieldSet(this, _CollectionBuilder_rawQuery, arg, "f");
+            return this;
+        }
+        if (typeof arg !== 'function') {
+            throw new Error(`Parameter for query method should be a buildQuery function or a string.\nExample:\nclient.content.getCollection('Activity').query((queryBuilder) => queryBuilder.field('title').equals('Hello World'))\nor\nclient.content.getCollection('Activity').query('+Activity.title:"Hello World"') \nSee documentation for more information.`);
+        }
+        const builtQuery = arg(new QueryBuilder());
+        // This can be use in Javascript so we cannot rely on the type checking
+        if (builtQuery instanceof Equals) {
+            __classPrivateFieldSet(this, _CollectionBuilder_query, builtQuery.raw(this.currentQuery.build()), "f");
+        }
+        else {
+            throw new Error('Provided query is not valid. A query should end in an equals method call.\nExample:\n(queryBuilder) => queryBuilder.field("title").equals("Hello World")\nSee documentation for more information.');
+        }
+        return this;
+    }
     /**
-     * Tell the editor to send the page info to iframe
+     * Retrieves draft content.
+     * @example
+     * ```ts
+     * const client = new DotCMSClient(config);
+     * const collectionBuilder = client.content.getCollection("Blog");
+     * collectionBuilder
+     *      .draft() // This will retrieve draft/working content
+     *      .then((response) => // Your code here })
+     *      .catch((error) => // Your code here })
+     * ```
+     *
+     * @return {CollectionBuilder} A CollectionBuilder instance.
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["GET_PAGE_DATA"] = "get-page-data";
+    draft() {
+        __classPrivateFieldSet(this, _CollectionBuilder_draft, true, "f");
+        return this;
+    }
     /**
-     * Tell the editor an user send a graphql query
+     * Filters the content by a variant ID for [Experiments](https://www.dotcms.com/docs/latest/experiments-and-a-b-testing)
+     *
+     * More information here: {@link https://www.dotcms.com/docs/latest/content-api-retrieval-and-querying#ParamsOptional}
+     *
+     * @example
+     * ```ts
+     * const client = new DotCMSClient(config);
+     * const collectionBuilder = client.content.getCollection("Blog");
+     * collectionBuilder
+     *      .variant("YOUR_VARIANT_ID")
+     *      .then((response) => // Your code here })
+     *      .catch((error) => // Your code here })
+     * ```
+     *
+     * @param {string} variantId A string that represents a variant ID.
+     * @return {CollectionBuilder} A CollectionBuilder instance.
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["CLIENT_READY"] = "client-ready";
+    variant(variantId) {
+        __classPrivateFieldSet(this, _CollectionBuilder_query, this.currentQuery.field('variant').equals(variantId), "f");
+        return this;
+    }
     /**
-     * Tell the editor to edit a contentlet
+     * Sets the depth of the relationships of the content.
+     * Specifies the depth of related content to return in the results.
+     *
+     * More information here: {@link https://www.dotcms.com/docs/latest/content-api-retrieval-and-querying#ParamsOptional}
+     *
+     * @example
+     * ```ts
+     * const client = new DotCMSClient(config);
+     * const collectionBuilder = client.content.getCollection("Blog");
+     * collectionBuilder
+     *      .depth(1)
+     *      .then((response) => // Your code here })
+     *      .catch((error) => // Your code here })
+     * ```
+     *
+     * @param {number} depth The depth of the relationships of the content.
+     * @return {CollectionBuilder} A CollectionBuilder instance.
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["EDIT_CONTENTLET"] = "edit-contentlet";
+    depth(depth) {
+        if (depth < 0 || depth > 3) {
+            throw new Error('Depth value must be between 0 and 3');
+        }
+        __classPrivateFieldSet(this, _CollectionBuilder_depth, depth, "f");
+        return this;
+    }
     /**
-     * Tell the editor to do nothing
+     * Executes the fetch and returns a promise that resolves to the content or rejects with an error.
+     *
+     * @example
+     * ```ts
+     * const client = new DotCMSClient(config);
+     * const collectionBuilder = client.content.getCollection("Blog");
+     * collectionBuilder
+     *      .limit(10)
+     *      .then((response) => // Your code here })
+     *      .catch((error) => // Your code here })
+     * ```
+     *
+     * @param {OnFullfilled} [onfulfilled] A callback that is called when the fetch is successful.
+     * @param {OnRejected} [onrejected] A callback that is called when the fetch fails.
+     * @return {Promise<GetCollectionResponse<T> | GetCollectionError>} A promise that resolves to the content or rejects with an error.
+     * @memberof CollectionBuilder
      */
-    CLIENT_ACTIONS["NOOP"] = "noop";
-})(exports.CLIENT_ACTIONS || (exports.CLIENT_ACTIONS = {}));
-/**
- * Post message to dotcms page editor
- *
- * @export
- * @template T
- * @param {PostMessageProps<T>} message
- */
-function postMessageToEditor(message) {
-    window.parent.postMessage(message, '*');
-}
-
-var _DotCmsClient_config, _DotCmsClient_requestOptions, _DotCmsClient_listeners;
-function getHostURL(url) {
-    try {
-        return new URL(url);
+    then(onfulfilled, onrejected) {
+        return this.fetch().then(async (response) => {
+            const data = await response.json();
+            if (response.ok) {
+                const formattedResponse = this.formatResponse(data);
+                const finalResponse = typeof onfulfilled === 'function'
+                    ? onfulfilled(formattedResponse)
+                    : formattedResponse;
+                return finalResponse;
+            }
+            else {
+                return {
+                    status: response.status,
+                    ...data
+                };
+            }
+        }, onrejected);
     }
-    catch (error) {
-        return undefined;
+    /**
+     * Formats the response to the desired format.
+     *
+     * @private
+     * @param {GetCollectionRawResponse<T>} data The raw response data.
+     * @return {GetCollectionResponse<T>} The formatted response.
+     * @memberof CollectionBuilder
+     */
+    formatResponse(data) {
+        const contentlets = data.entity.jsonObjectView.contentlets;
+        const total = data.entity.resultsSize;
+        const mappedResponse = {
+            contentlets,
+            total,
+            page: __classPrivateFieldGet(this, _CollectionBuilder_page, "f"),
+            size: contentlets.length
+        };
+        return __classPrivateFieldGet(this, _CollectionBuilder_sortBy, "f")
+            ? {
+                ...mappedResponse,
+                sortedBy: __classPrivateFieldGet(this, _CollectionBuilder_sortBy, "f")
+            }
+            : mappedResponse;
+    }
+    /**
+     * Calls the content API to fetch the content.
+     *
+     * @private
+     * @return {Promise<Response>} The fetch response.
+     * @memberof CollectionBuilder
+     */
+    fetch() {
+        const finalQuery = this.currentQuery
+            .field('languageId')
+            .equals(__classPrivateFieldGet(this, _CollectionBuilder_languageId, "f").toString())
+            .field('live')
+            .equals((!__classPrivateFieldGet(this, _CollectionBuilder_draft, "f")).toString())
+            .build();
+        const sanitizedQuery = sanitizeQueryForContentType(finalQuery, __classPrivateFieldGet(this, _CollectionBuilder_contentType, "f"));
+        const query = __classPrivateFieldGet(this, _CollectionBuilder_rawQuery, "f") ? `${sanitizedQuery} ${__classPrivateFieldGet(this, _CollectionBuilder_rawQuery, "f")}` : sanitizedQuery;
+        return fetch(this.url, {
+            ...__classPrivateFieldGet(this, _CollectionBuilder_requestOptions, "f"),
+            method: 'POST',
+            headers: {
+                ...__classPrivateFieldGet(this, _CollectionBuilder_requestOptions, "f").headers,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                query,
+                render: __classPrivateFieldGet(this, _CollectionBuilder_render, "f"),
+                sort: this.sort,
+                limit: __classPrivateFieldGet(this, _CollectionBuilder_limit, "f"),
+                offset: this.offset,
+                depth: __classPrivateFieldGet(this, _CollectionBuilder_depth, "f")
+                //userId: This exist but we currently don't use it
+                //allCategoriesInfo: This exist but we currently don't use it
+            })
+        });
     }
 }
+_CollectionBuilder_page = new WeakMap(), _CollectionBuilder_limit = new WeakMap(), _CollectionBuilder_depth = new WeakMap(), _CollectionBuilder_render = new WeakMap(), _CollectionBuilder_sortBy = new WeakMap(), _CollectionBuilder_contentType = new WeakMap(), _CollectionBuilder_defaultQuery = new WeakMap(), _CollectionBuilder_query = new WeakMap(), _CollectionBuilder_rawQuery = new WeakMap(), _CollectionBuilder_languageId = new WeakMap(), _CollectionBuilder_draft = new WeakMap(), _CollectionBuilder_serverUrl = new WeakMap(), _CollectionBuilder_requestOptions = new WeakMap();
+
+var _Content_requestOptions, _Content_serverUrl;
 /**
- * `DotCmsClient` is a TypeScript class that provides methods to interact with the DotCMS REST API.
- * DotCMS is a hybrid-headless CMS and digital experience platform.
- *
- * @class DotCmsClient
- * @property {ClientConfig} config - The configuration object for the DotCMS client.
- * @property {Content} content - Provides methods to interact with content in DotCMS.
+ * Creates a builder to filter and fetch a collection of content items.
+ * @param contentType - The content type to retrieve.
+ * @returns A CollectionBuilder instance for chaining filters and executing the query.
+ * @template T - The type of the content items (defaults to unknown).
  *
- * @method constructor(config: ClientConfig) - Constructs a new instance of the DotCmsClient class.
+ * @example Fetch blog posts with async/await
+ * ```typescript
+ * const response = await client.content
+ *     .getCollection<BlogPost>('Blog')
+ *     .limit(10)
+ *     .page(2)
+ *     .sortBy([{ field: 'title', order: 'asc' }])
+ *     .query(q => q.field('author').equals('John Doe'))
+ *     .depth(1)
  *
- * @method page.get(options: PageApiOptions): Promise<PageApiResponse> - Retrieves all the elements of any Page in your dotCMS system in JSON format.
- * The Page API enables you to retrieve page information, layout, template, content blocks, and more.
- * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
- *
- * @method nav.get(options: NavApiOptions = { depth: 0, path: '/', languageId: 1 }): Promise<NavApiResponse> - Retrieves information about the dotCMS file and folder tree.
- * The Navigation API allows you to fetch the site structure and menu items.
- * @see {@link https://www.dotcms.com/docs/latest/navigation-rest-api}
- *
- * @method content.get(options: ContentApiOptions): Promise<ContentApiResponse> - Retrieves content items based on specified criteria.
- * The Content API allows you to query and retrieve content by ID, inode, or using Lucene queries.
- * @see {@link https://www.dotcms.com/docs/latest/content-api-retrieval-and-querying}
- *
- * @method editor.on(action: string, callbackFn: (payload: unknown) => void) - Allows you to react to actions issued by the Universal Visual Editor (UVE).
- * @method editor.off(action: string) - Stops listening to an action issued by UVE.
+ * console.log(response.contentlets);
+ * ```
  *
- * @static
- * @method init(config: ClientConfig): DotCmsClient - Initializes and returns a DotCmsClient instance.
- * @method dotcmsUrl: string - Retrieves the DotCMS URL from the instance configuration.
+ * @example Fetch blog posts with Promise chain
+ * ```typescript
+ * client.content
+ *     .getCollection<BlogPost>('Blog')
+ *     .limit(10)
+ *     .page(2)
+ *     .sortBy([{ field: 'title', order: 'asc' }])
+ *     .query(q => q.field('author').equals('John Doe'))
+ *     .depth(1)
+ *     .then(response => console.log(response.contentlets))
+ *     .catch(error => console.error(error));
+ * ```
  *
- * @example <caption>Basic usage</caption>
- * ```javascript
- * const client = DotCmsClient.init({ dotcmsUrl: 'https://demo.dotcms.com', authToken: 'your-auth-token' });
+ * @example Using a custom type
+ * ```typescript
+ * interface BlogPost {
+ *     summary: string;
+ *     author: string;
+ *     title: string;
+ * }
  *
- * // Get a page
- * client.page.get({ path: '/about-us' }).then(response => console.log(response));
+ * const posts = await client.content
+ *     .getCollection<BlogPost>('Blog')
+ *     .limit(10)
  *
- * // Get navigation
- * client.nav.get({ path: '/about-us', depth: 2 }).then(response => console.log(response));
+ * posts.contentlets.forEach(post => {
+ *     console.log(post.title, post.author, post.summary);
+ * });
+ * ```
+ */
+class Content {
+    /**
+     * Creates an instance of Content.
+     * @param {RequestOptions} requestOptions - The options for the client request.
+     * @param {string} serverUrl - The server URL.
+     */
+    constructor(requestOptions, serverUrl) {
+        _Content_requestOptions.set(this, void 0);
+        _Content_serverUrl.set(this, void 0);
+        __classPrivateFieldSet(this, _Content_requestOptions, requestOptions, "f");
+        __classPrivateFieldSet(this, _Content_serverUrl, serverUrl, "f");
+    }
+    /**
+     * Takes a content type and returns a builder to filter and fetch the collection.
+     * @param {string} contentType - The content type to get the collection.
+     * @return {CollectionBuilder<T>} CollectionBuilder to filter and fetch the collection.
+     * @template T - Represents the type of the content type to fetch. Defaults to unknown.
+     * @memberof Content
+     *
+     * @example
+     * ```javascript
+     * // Using await and async
+     * const collectionResponse = await client.content
+     *     .getCollection('Blog')
+     *     .limit(10)
+     *     .page(2)
+     *     .sortBy([{ field: 'title', order: 'asc' }])
+     *     .query((queryBuilder) => queryBuilder.field('author').equals('John Doe'))
+     *     .depth(1);
+     * ```
+     * @example
+     * ```javascript
+     * // Using then and catch
+     * client.content
+     *      .getCollection('Blog')
+     *      .limit(10)
+     *      .page(2)
+     *      .sortBy([{ field: 'title', order: 'asc' }])
+     *      .query((queryBuilder) => queryBuilder.field('author').equals('John Doe'))
+     *      .depth(1)
+     *      .then((response) => {
+     *          console.log(response.contentlets);
+     *      })
+     *      .catch((error) => {
+     *          console.error(error);
+     *      });
+     * ```
+     * @example
+     * ```typescript
+     * // Using a specific type for your content
+     *
+     * type Blog = {
+     *     summary: string;
+     *     author: string;
+     *     title: string;
+     * };
+     *
+     * client.content
+     *     .getCollection<Blog>('Blog')
+     *     .limit(10)
+     *     .page(2)
+     *     .sortBy([{ field: 'title', order: 'asc' }])
+     *     .query((queryBuilder) => queryBuilder.field('author').equals('John Doe'))
+     *     .depth(1)
+     *     .then((response) => {
+     *         response.contentlets.forEach((blog) => {
+     *             console.log(blog.title);
+     *             console.log(blog.author);
+     *             console.log(blog.summary);
+     *         });
+     *     })
+     *     .catch((error) => {
+     *         console.error(error);
+     *     });
+     * ```
+     *
+     */
+    getCollection(contentType) {
+        return new CollectionBuilder(__classPrivateFieldGet(this, _Content_requestOptions, "f"), __classPrivateFieldGet(this, _Content_serverUrl, "f"), contentType);
+    }
+}
+_Content_requestOptions = new WeakMap(), _Content_serverUrl = new WeakMap();
+
+class NavigationClient {
+    constructor(config, requestOptions) {
+        this.requestOptions = requestOptions;
+        this.BASE_URL = `${config?.dotcmsUrl}/api/v1/nav`;
+    }
+    /**
+     * Retrieves information about the dotCMS file and folder tree.
+     * @param {NavigationApiOptions} options - The options for the Navigation API call. Defaults to `{ depth: 0, path: '/', languageId: 1 }`.
+     * @returns {Promise<DotCMSNavigationItem[]>} - A Promise that resolves to the response from the DotCMS API.
+     * @throws {Error} - Throws an error if the options are not valid.
+     */
+    async get(path, params) {
+        if (!path) {
+            throw new Error("The 'path' parameter is required for the Navigation API");
+        }
+        const navParams = params ? this.mapToBackendParams(params) : {};
+        const urlParams = new URLSearchParams(navParams).toString();
+        const parsedPath = path.replace(/^\/+/, '/').replace(/\/+$/, '/');
+        const url = `${this.BASE_URL}${parsedPath}${urlParams ? `?${urlParams}` : ''}`;
+        const response = await fetch(url, this.requestOptions);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch navigation data: ${response.statusText} - ${response.status}`);
+        }
+        return response.json().then((data) => data.entity);
+    }
+    mapToBackendParams(params) {
+        const backendParams = {};
+        if (params.depth) {
+            backendParams['depth'] = String(params.depth);
+        }
+        if (params.languageId) {
+            backendParams['language_id'] = String(params.languageId);
+        }
+        return backendParams;
+    }
+}
+
+/**
+ * A record of HTTP status codes and their corresponding error messages.
  *
- * // Get content
- * client.content.get({ query: '+contentType:Blog +languageId:1', limit: 10 }).then(response => console.log(response));
+ * @type {Record<number, string>}
+ * @property {string} 401 - Unauthorized. Check the token and try again.
+ * @property {string} 403 - Forbidden. Check the permissions and try again.
+ * @property {string} 404 - Not Found. Check the URL and try again.
+ * @property {string} 500 - Internal Server Error. Try again later.
+ * @property {string} 502 - Bad Gateway. Try again later.
+ * @property {string} 503 - Service Unavailable. Try again later.
+ */
+const ErrorMessages = {
+    401: 'Unauthorized. Check the token and try again.',
+    403: 'Forbidden. Check the permissions and try again.',
+    404: 'Not Found. Check the URL and try again.',
+    500: 'Internal Server Error. Try again later.',
+    502: 'Bad Gateway. Try again later.',
+    503: 'Service Unavailable. Try again later.'
+};
+
+const DEFAULT_PAGE_CONTENTLETS_CONTENT = `
+          publishDate
+          inode
+          identifier
+          archived
+          urlMap
+          urlMap
+          locked
+          contentType
+          creationDate
+          modDate
+          title
+          baseType
+          working
+          live
+          publishUser {
+            firstName
+            lastName
+          }
+          owner {
+            lastName
+          }
+          conLanguage {
+            language
+            languageCode
+          }
+          modUser {
+            firstName
+            lastName
+          }
+`;
+/**
+ * Builds a GraphQL query for retrieving page content from DotCMS.
  *
- * // Listen to editor changes
- * client.editor.on('changes', (payload) => console.log('Changes detected:', payload));
- * ```
+ * @param {string} pageQuery - Custom fragment fields to include in the ClientPage fragment
+ * @param {string} additionalQueries - Additional GraphQL queries to include in the main query
+ * @returns {string} Complete GraphQL query string for page content
  */
-class DotCmsClient {
-    constructor(config = { dotcmsUrl: '', authToken: '', requestOptions: {}, siteId: '' }) {
-        _DotCmsClient_config.set(this, void 0);
-        _DotCmsClient_requestOptions.set(this, void 0);
-        _DotCmsClient_listeners.set(this, []);
-        this.page = {
-            /**
-             * `page.get` is an asynchronous method of the `DotCmsClient` class that retrieves all the elements of any Page in your dotCMS system in JSON format.
-             * It takes a `PageApiOptions` object as a parameter and returns a Promise that resolves to the response from the DotCMS API.
-             *
-             * The Page API enables you to retrieve all the elements of any Page in your dotCMS system.
-             * The elements may be retrieved in JSON format.
-             *
-             * @link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas
-             * @async
-             * @param {PageApiOptions} options - The options for the Page API call.
-             * @returns {Promise<unknown>} - A Promise that resolves to the response from the DotCMS API.
-             * @throws {Error} - Throws an error if the options are not valid.
-             * @example
-             * ```ts
-             * const client = new DotCmsClient({ dotcmsUrl: 'https://your.dotcms.com', authToken: 'your-auth-token', siteId: 'your-site-id' });
-             * client.page.get({ path: '/about-us' }).then(response => console.log(response));
-             * ```
-             */
-            get: async (options) => {
-                this.validatePageOptions(options);
-                const queryParamsObj = {};
-                for (const [key, value] of Object.entries(options)) {
-                    if (value === undefined || key === 'path' || key === 'siteId')
-                        continue;
-                    if (key === 'personaId') {
-                        queryParamsObj['com.dotmarketing.persona.id'] = String(value);
-                    }
-                    else if (key === 'mode' && value) {
-                        queryParamsObj['mode'] = String(value);
-                    }
-                    else {
-                        queryParamsObj[key] = String(value);
-                    }
-                }
-                const queryHostId = options.siteId ?? transforms.__classPrivateFieldGet(this, _DotCmsClient_config, "f").siteId ?? '';
-                if (queryHostId) {
-                    queryParamsObj['host_id'] = queryHostId;
-                }
-                const queryParams = new URLSearchParams(queryParamsObj).toString();
-                const formattedPath = options.path.startsWith('/') ? options.path : `/${options.path}`;
-                const url = `${transforms.__classPrivateFieldGet(this, _DotCmsClient_config, "f").dotcmsUrl}/api/v1/page/json${formattedPath}${queryParams ? `?${queryParams}` : ''}`;
-                const response = await fetch(url, transforms.__classPrivateFieldGet(this, _DotCmsClient_requestOptions, "f"));
-                if (!response.ok) {
-                    const error = {
-                        status: response.status,
-                        message: transforms.ErrorMessages[response.status] || response.statusText
-                    };
-                    console.error(error);
-                    throw error;
-                }
-                return response.json().then((data) => data.entity);
-            }
-        };
-        this.editor = {
-            /**
-             * `editor.on` is an asynchronous method of the `DotCmsClient` class that allows you to react to actions issued by the UVE.
-             *
-             *  NOTE: This is being used by the development team - This logic is probably varied or moved to another function/object.
-             * @param {string} action - The name of the action emitted by UVE.
-             * @param {function} callbackFn - The function to execute when the UVE emits the action.
-             * @example
-             * ```ts
-             * client.editor.on('changes', (payload) => {
-             *     console.log('Changes detected:', payload);
-             * });
-             * ```
-             */
-            on: (action, callbackFn) => {
-                if (!isInsideEditor()) {
-                    return;
-                }
-                if (action === 'changes') {
-                    const messageCallback = (event) => {
-                        if (event.data.name === exports.NOTIFY_CLIENT.UVE_SET_PAGE_DATA) {
-                            callbackFn(event.data.payload);
-                        }
-                    };
-                    window.addEventListener('message', messageCallback);
-                    transforms.__classPrivateFieldGet(this, _DotCmsClient_listeners, "f").push({ event: 'message', callback: messageCallback, action });
-                }
-            },
-            /**
-             * `editor.off` is a synchronous method of the `DotCmsClient` class that allows you to stop listening and reacting to an action issued by UVE.
-             *
-             * NOTE: This is being used by the development team - This logic is probably varied or moved to another function/object.
-             * @param {string} action - The name of the action to stop listening to.
-             * @example
-             * ```ts
-             * client.editor.off('changes');
-             * ```
-             */
-            off: (action) => {
-                const listenerIndex = transforms.__classPrivateFieldGet(this, _DotCmsClient_listeners, "f").findIndex((listener) => listener.action === action);
-                if (listenerIndex !== -1) {
-                    const listener = transforms.__classPrivateFieldGet(this, _DotCmsClient_listeners, "f")[listenerIndex];
-                    window.removeEventListener(listener.event, listener.callback);
-                    transforms.__classPrivateFieldGet(this, _DotCmsClient_listeners, "f").splice(listenerIndex, 1);
-                }
-            }
-        };
-        this.nav = {
-            /**
-             * `nav.get` is an asynchronous method of the `DotCmsClient` class that retrieves information about the dotCMS file and folder tree.
-             * It takes a `NavApiOptions` object as a parameter (with default values) and returns a Promise that resolves to the response from the DotCMS API.
-             *
-             * The navigation REST API enables you to retrieve information about the dotCMS file and folder tree through REST API calls.
-             * @link https://www.dotcms.com/docs/latest/navigation-rest-api
-             * @async
-             * @param {NavApiOptions} options - The options for the Nav API call. Defaults to `{ depth: 0, path: '/', languageId: 1 }`.
-             * @returns {Promise<unknown>} - A Promise that resolves to the response from the DotCMS API.
-             * @throws {Error} - Throws an error if the options are not valid.
-             * @example
-             * ```ts
-             * const client = new DotCmsClient({ dotcmsUrl: 'https://your.dotcms.com', authToken: 'your-auth-token', siteId: 'your-site-id' }});
-             * client.nav.get({ path: '/about-us', depth: 2 }).then(response => console.log(response));
-             * ```
-             */
-            get: async (options = { depth: 0, path: '/', languageId: 1 }) => {
-                this.validateNavOptions(options);
-                // Extract the 'path' from the options and prepare the rest as query parameters
-                const { path, ...queryParamsOptions } = options;
-                const queryParamsObj = {};
-                Object.entries(queryParamsOptions).forEach(([key, value]) => {
-                    if (value !== undefined) {
-                        queryParamsObj[key] = String(value);
-                    }
-                });
-                const queryParams = new URLSearchParams(queryParamsObj).toString();
-                // Format the URL correctly depending on the 'path' value
-                const formattedPath = path === '/' ? '/' : `/${path}`;
-                const url = `${transforms.__classPrivateFieldGet(this, _DotCmsClient_config, "f").dotcmsUrl}/api/v1/nav${formattedPath}${queryParams ? `?${queryParams}` : ''}`;
-                const response = await fetch(url, transforms.__classPrivateFieldGet(this, _DotCmsClient_requestOptions, "f"));
-                return response.json();
+const buildPageQuery = ({ page, fragments, additionalQueries }) => {
+    if (!page) {
+        consola.consola.warn("[DotCMS Client]: No page query was found, so we're loading all content using _map. This might slow things down. For better performance, we recommend adding a specific query in the page attribute.");
+    }
+    return `
+  fragment DotCMSPage on DotPage {
+    publishDate
+    type
+    httpsRequired
+    inode
+    path
+    identifier
+    hasTitleImage
+    sortOrder
+    extension
+    canRead
+    pageURI
+    canEdit
+    archived
+    friendlyName
+    workingInode
+    url
+    pageURI
+    hasLiveVersion
+    deleted
+    pageUrl
+    shortyWorking
+    mimeType
+    locked
+    stInode
+    contentType
+    creationDate
+    liveInode
+    name
+    shortyLive
+    modDate
+    title
+    baseType
+    working
+    canLock
+    live
+    isContentlet
+    statusIcons
+    canEdit
+    canLock
+    canRead
+    canEdit
+    canLock
+    canRead
+    runningExperimentId
+    urlContentMap {
+      _map
+    }
+    host {
+      identifier
+      hostName
+     	googleMap
+      archived
+      contentType
+    }
+    vanityUrl {
+      action
+      forwardTo
+      uri
+    }
+    conLanguage {
+      id
+      language
+      languageCode
+    }
+    template {
+      drawed
+      anonymous
+      theme
+      identifier
+    }
+    containers {
+      path
+      identifier
+      maxContentlets
+      containerStructures {
+        id
+        code
+        structureId
+        containerId
+        contentTypeVar
+        containerInode
+      }
+      containerContentlets {
+        uuid
+        contentlets {
+          ${page ? DEFAULT_PAGE_CONTENTLETS_CONTENT : '_map'}
+        }
+      }
+    }
+    layout {
+      header
+      footer
+      body {
+        rows {
+          columns {
+            leftOffset
+            styleClass
+            width
+            left
+            containers {
+              identifier
+              uuid
             }
-        };
-        if (!config.dotcmsUrl) {
-            throw new Error("Invalid configuration - 'dotcmsUrl' is required");
+          }
         }
-        this.dotcmsUrl = getHostURL(config.dotcmsUrl)?.origin;
-        if (!this.dotcmsUrl) {
-            throw new Error("Invalid configuration - 'dotcmsUrl' must be a valid URL");
+      }
+    }
+    viewAs {
+      visitor {
+        persona {
+          modDate
+          inode
+          name
+          identifier
+          keyTag
+          photo {
+            versionPath
+          }
         }
-        if (!config.authToken) {
-            throw new Error("Invalid configuration - 'authToken' is required");
+      }
+      persona {
+        modDate
+        inode
+        name
+        identifier
+        keyTag
+        photo {
+         versionPath
         }
-        transforms.__classPrivateFieldSet(this, _DotCmsClient_config, {
-            ...config,
-            dotcmsUrl: this.dotcmsUrl
-        }, "f");
-        transforms.__classPrivateFieldSet(this, _DotCmsClient_requestOptions, {
-            ...transforms.__classPrivateFieldGet(this, _DotCmsClient_config, "f").requestOptions,
-            headers: {
-                Authorization: `Bearer ${transforms.__classPrivateFieldGet(this, _DotCmsClient_config, "f").authToken}`,
-                ...transforms.__classPrivateFieldGet(this, _DotCmsClient_config, "f").requestOptions?.headers
-            }
-        }, "f");
-        this.content = new transforms.Content(transforms.__classPrivateFieldGet(this, _DotCmsClient_requestOptions, "f"), transforms.__classPrivateFieldGet(this, _DotCmsClient_config, "f").dotcmsUrl);
+      }
+      language {
+        id
+        languageCode
+        countryCode
+        language
+        country
+      }
+    }
+  }
+
+  ${page ? ` fragment ClientPage on DotPage { ${page} } ` : ''}
+
+  ${fragments ? fragments.join('\n\n') : ''}
+
+  query PageContent($url: String!, $languageId: String, $mode: String, $personaId: String, $fireRules: Boolean, $publishDate: String, $siteId: String, $variantName: String) {
+    page: page(url: $url, languageId: $languageId, pageMode: $mode, persona: $personaId, fireRules: $fireRules, publishDate: $publishDate, site: $siteId, variantName: $variantName) {
+      ...DotCMSPage
+      ${page ? '...ClientPage' : ''}
+    }
+
+    ${additionalQueries}
+  }
+  `;
+};
+/**
+ * Converts a record of query strings into a single GraphQL query string.
+ *
+ * @param {Record<string, string>} queryData - Object containing named query strings
+ * @returns {string} Combined query string or empty string if no queryData provided
+ */
+function buildQuery(queryData) {
+    if (!queryData)
+        return '';
+    return Object.entries(queryData)
+        .map(([key, query]) => `${key}: ${query}`)
+        .join(' ');
+}
+/**
+ * Filters response data to include only specified keys.
+ *
+ * @param {Record<string, string>} responseData - Original response data object
+ * @param {string[]} keys - Array of keys to extract from the response data
+ * @returns {Record<string, string>} New object containing only the specified keys
+ */
+function mapResponseData(responseData, keys) {
+    return keys.reduce((accumulator, key) => {
+        if (responseData[key] !== undefined) {
+            accumulator[key] = responseData[key];
+        }
+        return accumulator;
+    }, {});
+}
+/**
+ * Executes a GraphQL query against the DotCMS API.
+ *
+ * @param {Object} options - Options for the fetch request
+ * @param {string} options.body - GraphQL query string
+ * @param {Record<string, string>} options.headers - HTTP headers for the request
+ * @returns {Promise<any>} Parsed JSON response from the GraphQL API
+ * @throws {Error} If the HTTP response is not successful
+ */
+async function fetchGraphQL({ baseURL, body, headers }) {
+    const url = new URL(baseURL);
+    url.pathname = '/api/v1/graphql';
+    const response = await fetch(url.toString(), {
+        method: 'POST',
+        body,
+        headers
+    });
+    if (!response.ok) {
+        const error = {
+            status: response.status,
+            message: ErrorMessages[response.status] || response.statusText
+        };
+        throw error;
     }
+    return await response.json();
+}
+
+/**
+ * Client for interacting with the DotCMS Page API.
+ * Provides methods to retrieve and manipulate pages.
+ */
+class PageClient {
     /**
-     * Initializes the DotCmsClient instance with the provided configuration.
-     * If an instance already exists, it returns the existing instance.
+     * Creates a new PageClient instance.
      *
-     * @param {ClientConfig} config - The configuration object for the DotCMS client.
-     * @returns {DotCmsClient} - The initialized DotCmsClient instance.
+     * @param {DotCMSClientConfig} config - Configuration options for the DotCMS client
+     * @param {RequestOptions} requestOptions - Options for fetch requests including authorization headers
      * @example
-     * ```ts
-     * const client = DotCmsClient.init({ dotcmsUrl: 'https://demo.dotcms.com', authToken: 'your-auth-token' });
+     * ```typescript
+     * const pageClient = new PageClient(
+     *   {
+     *     dotcmsUrl: 'https://demo.dotcms.com',
+     *     authToken: 'your-auth-token',
+     *     siteId: 'demo.dotcms.com'
+     *   },
+     *   {
+     *     headers: {
+     *       Authorization: 'Bearer your-auth-token'
+     *     }
+     *   }
+     * );
      * ```
      */
-    static init(config) {
-        if (this.instance) {
-            console.warn('DotCmsClient has already been initialized. Please use the instance to interact with the DotCMS API.');
-        }
-        return this.instance ?? (this.instance = new DotCmsClient(config));
+    constructor(config, requestOptions) {
+        this.requestOptions = requestOptions;
+        this.siteId = config.siteId || '';
+        this.dotcmsUrl = config.dotcmsUrl;
     }
     /**
-     * Retrieves the DotCMS URL from the instance configuration.
+     * Retrieves a page from DotCMS using GraphQL.
      *
-     * @returns {string} - The DotCMS URL.
+     * @param {string} url - The URL of the page to retrieve
+     * @param {DotCMSPageRequestParams} [options] - Options for the request
+     * @template T - The type of the page and content, defaults to DotCMSBasicPage and Record<string, unknown> | unknown
+     * @returns {Promise<DotCMSComposedPageResponse<T>>} A Promise that resolves to the page data
+     *
+     * @example Using GraphQL
+     * ```typescript
+     * const page = await pageClient.get<{ page: MyPageWithBanners; content: { blogPosts: { blogTitle: string } } }>(
+     *     '/index',
+     *     {
+     *         languageId: '1',
+     *         mode: 'LIVE',
+     *         graphql: {
+     *             page: `
+     *              containers {
+     *                  containerContentlets {
+     *                      contentlets {
+     *                          ... on 	Banner {
+     *                              ...bannerFragment
+     *                          }
+     *                      }
+     *                  }
+     *              `,
+     *              content: {
+     *                  blogPosts: `
+     *                      BlogCollection(limit: 3) {
+     *                          ...blogFragment
+     *                      }
+     *                  `,
+     *              },
+     *              fragments: [
+     *                  `
+     *                      fragment bannerFragment on Banner {
+     *                          caption
+     *                      }
+     *                  `,
+     *                  `
+     *                      fragment blogFragment on Blog {
+     *                          title
+     *                          urlTitle
+     *                      }
+     *                  `
+     *              ]
+     *          }
+     *      });
+     * ```
      */
-    static get dotcmsUrl() {
-        return (this.instance && transforms.__classPrivateFieldGet(this.instance, _DotCmsClient_config, "f").dotcmsUrl) || '';
+    async get(url, options) {
+        const { languageId = '1', mode = 'LIVE', siteId = this.siteId, fireRules = false, personaId, publishDate, variantName, graphql = {} } = options || {};
+        const { page, content = {}, variables, fragments } = graphql;
+        const contentQuery = buildQuery(content);
+        const completeQuery = buildPageQuery({
+            page,
+            fragments,
+            additionalQueries: contentQuery
+        });
+        const requestVariables = {
+            // The url is expected to have a leading slash to comply on VanityURL Matching, some frameworks like Angular will not add the leading slash
+            url: url.startsWith('/') ? url : `/${url}`,
+            mode,
+            languageId,
+            personaId,
+            fireRules,
+            publishDate,
+            siteId,
+            variantName,
+            ...variables
+        };
+        const requestHeaders = this.requestOptions.headers;
+        const requestBody = JSON.stringify({ query: completeQuery, variables: requestVariables });
+        try {
+            const { data, errors } = await fetchGraphQL({
+                baseURL: this.dotcmsUrl,
+                body: requestBody,
+                headers: requestHeaders
+            });
+            if (errors) {
+                errors.forEach((error) => {
+                    consola.error('[DotCMS GraphQL Error]: ', error.message);
+                });
+            }
+            const pageResponse = internal.graphqlToPageEntity(data);
+            if (!pageResponse) {
+                throw new Error('No page data found');
+            }
+            const contentResponse = mapResponseData(data, Object.keys(content));
+            return {
+                pageAsset: pageResponse,
+                content: contentResponse,
+                graphql: {
+                    query: completeQuery,
+                    variables: requestVariables
+                }
+            };
+        }
+        catch (error) {
+            const errorMessage = {
+                error,
+                message: 'Failed to retrieve page data',
+                graphql: {
+                    query: completeQuery,
+                    variables: requestVariables
+                }
+            };
+            throw errorMessage;
+        }
     }
+}
+
+/**
+ * Parses a string into a URL object.
+ *
+ * @param url - The URL string to parse
+ * @returns A URL object if parsing is successful, undefined otherwise
+ */
+function parseURL(url) {
+    try {
+        return new URL(url);
+    }
+    catch {
+        consola.consola.error('[DotCMS Client]: Invalid URL:', url);
+        return undefined;
+    }
+}
+/**
+ * Default configuration for the DotCMS client.
+ */
+const defaultConfig = {
+    dotcmsUrl: '',
+    authToken: '',
+    requestOptions: {}
+};
+/**
+ * Client for interacting with the DotCMS REST API.
+ * Provides access to content, page, and navigation functionality.
+ */
+class DotCMSClient {
     /**
-     * Throws an error if the path is not valid.
+     * Creates a new DotCMS client instance.
      *
-     * @returns {string} - The authentication token.
+     * @param config - Configuration options for the client
+     * @throws Warning if dotcmsUrl is invalid or authToken is missing
      */
-    validatePageOptions(options) {
-        if (!options.path) {
-            throw new Error("The 'path' parameter is required for the Page API");
-        }
+    constructor(config = defaultConfig) {
+        this.config = config;
+        this.requestOptions = this.createAuthenticatedRequestOptions(this.config);
+        // Initialize clients
+        this.page = new PageClient(this.config, this.requestOptions);
+        this.nav = new NavigationClient(this.config, this.requestOptions);
+        this.content = new Content(this.requestOptions, this.config.dotcmsUrl);
     }
     /**
-     * Throws an error if the path is not valid.
+     * Creates request options with authentication headers.
      *
-     *  @returns {string} - The authentication token.
+     * @param config - The client configuration
+     * @returns Request options with authorization headers
      */
-    validateNavOptions(options) {
-        if (!options.path) {
-            throw new Error("The 'path' parameter is required for the Nav API");
-        }
+    createAuthenticatedRequestOptions(config) {
+        return {
+            ...config.requestOptions,
+            headers: {
+                ...config.requestOptions?.headers,
+                Authorization: `Bearer ${config.authToken}`
+            }
+        };
     }
 }
-_DotCmsClient_config = new WeakMap(), _DotCmsClient_requestOptions = new WeakMap(), _DotCmsClient_listeners = new WeakMap();
-
 /**
- * Generates the page request parameters to be used in the API call.
+ * Creates and returns a new DotCMS client instance.
  *
- * @param {PageRequestParamsProps} PageRequestParamsProps - The properties for the page request.
- * @returns {PageApiOptions} The options for the page API.
+ * @param config - Configuration options for the client
+ * @returns A configured DotCMS client instance
  * @example
- * ```ts
- * const pageApiOptions = getPageRequestParams({ path: '/api/v1/page', params: queryParams });
+ * ```typescript
+ * const client = dotCMSCreateClient({
+ *   dotcmsUrl: 'https://demo.dotcms.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Use the client to fetch content
+ * const pages = await client.page.get('/about-us');
  * ```
  */
-const getPageRequestParams = ({ path = '', params = {} }) => {
-    const copiedParams = params instanceof URLSearchParams ? Object.fromEntries(params.entries()) : { ...params };
-    const finalParams = {};
-    const dotMarketingPersonaId = copiedParams['com.dotmarketing.persona.id'] || '';
-    finalParams['mode'] = copiedParams['mode'] || 'LIVE';
-    if (copiedParams['language_id']) {
-        finalParams['language_id'] = copiedParams['language_id'];
-    }
-    if (copiedParams['variantName']) {
-        finalParams['variantName'] = copiedParams['variantName'];
-    }
-    if (copiedParams['personaId'] || dotMarketingPersonaId) {
-        finalParams['personaId'] = copiedParams['personaId'] || dotMarketingPersonaId;
-    }
-    if (copiedParams['publishDate']) {
-        finalParams['publishDate'] = copiedParams['publishDate'];
-    }
-    return {
-        path,
-        ...finalParams
+const createDotCMSClient = (clientConfig) => {
+    const { dotcmsUrl, authToken } = clientConfig || {};
+    const instanceUrl = parseURL(dotcmsUrl)?.origin;
+    if (!instanceUrl) {
+        throw new TypeError("Invalid configuration - 'dotcmsUrl' must be a valid URL");
+    }
+    if (!authToken) {
+        throw new TypeError("Invalid configuration - 'authToken' is required");
+    }
+    const config = {
+        ...clientConfig,
+        authToken,
+        dotcmsUrl: instanceUrl
     };
+    return new DotCMSClient(config);
 };
 
-exports.graphqlToPageEntity = transforms.graphqlToPageEntity;
-exports.DotCmsClient = DotCmsClient;
-exports.destroyEditor = destroyEditor;
-exports.editContentlet = editContentlet;
-exports.getPageRequestParams = getPageRequestParams;
-exports.initEditor = initEditor;
-exports.initInlineEditing = initInlineEditing;
-exports.isInsideEditor = isInsideEditor;
-exports.postMessageToEditor = postMessageToEditor;
-exports.reorderMenu = reorderMenu;
-exports.updateNavigation = updateNavigation;
+exports.createDotCMSClient = createDotCMSClient;