@dotcms/uve 0.0.1-beta.14 → 0.0.1-beta.15

package/internal.cjs.js

@@ -210,6 +210,167 @@ function computeScrollIsInBottom() {
   const scrollY = window.scrollY;
   return scrollY + viewportHeight >= documentHeight;
 }
+/**
+ *
+ *
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
+const combineClasses = classes => classes.filter(Boolean).join(' ');
+/**
+ *
+ *
+ * Calculates and returns the CSS Grid positioning classes for a column based on its configuration.
+ * Uses a 12-column grid system where columns are positioned using grid-column-start and grid-column-end.
+ *
+ * @example
+ * ```typescript
+ * const classes = getColumnPositionClasses({
+ *   leftOffset: 1, // Starts at the first column
+ *   width: 6      // Spans 6 columns
+ * });
+ * // Returns: { startClass: 'col-start-1', endClass: 'col-end-7' }
+ * ```
+ *
+ * @param {DotPageAssetLayoutColumn} column - Column configuration object
+ * @param {number} column.leftOffset - Starting position (0-based) in the grid
+ * @param {number} column.width - Number of columns to span
+ * @returns {{ startClass: string, endClass: string }} Object containing CSS class names for grid positioning
+ */
+const getColumnPositionClasses = column => {
+  const {
+    leftOffset,
+    width
+  } = column;
+  const startClass = `${START_CLASS}${leftOffset}`;
+  const endClass = `${END_CLASS}${leftOffset + width}`;
+  return {
+    startClass,
+    endClass
+  };
+};
+/**
+ *
+ *
+ * Helper function that returns an object containing the dotCMS data attributes.
+ * @param {DotCMSContentlet} contentlet - The contentlet to get the attributes for
+ * @param {string} container - The container to get the attributes for
+ * @returns {DotContentletAttributes} The dotCMS data attributes
+ */
+function getDotContentletAttributes(contentlet, container) {
+  return {
+    'data-dot-identifier': contentlet?.identifier,
+    'data-dot-basetype': contentlet?.baseType,
+    'data-dot-title': contentlet?.['widgetTitle'] || contentlet?.title,
+    'data-dot-inode': contentlet?.inode,
+    'data-dot-type': contentlet?.contentType,
+    'data-dot-container': container,
+    'data-dot-on-number-of-pages': contentlet?.['onNumberOfPages']
+  };
+}
+/**
+ *
+ *
+ * Retrieves container data from a DotCMS page asset using the container reference.
+ * This function processes the container information and returns a standardized format
+ * for container editing.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @throws {Error} When page asset is invalid or container is not found
+ * @returns {EditableContainerData} Formatted container data for editing
+ *
+ * @example
+ * const containerData = getContainersData(pageAsset, containerRef);
+ * // Returns: { uuid: '123', identifier: 'cont1', acceptTypes: 'type1,type2', maxContentlets: 5 }
+ */
+const getContainersData = (dotCMSPageAsset, columContainer) => {
+  const {
+    identifier,
+    uuid
+  } = columContainer;
+  const dotContainer = dotCMSPageAsset.containers[identifier];
+  if (!dotContainer) {
+    return null;
+  }
+  const {
+    containerStructures,
+    container
+  } = dotContainer;
+  const acceptTypes = containerStructures?.map(structure => structure.contentTypeVar).join(',') ?? '';
+  const variantId = container?.parentPermissionable?.variantId;
+  const maxContentlets = container?.maxContentlets ?? 0;
+  const path = container?.path;
+  return {
+    uuid,
+    variantId,
+    acceptTypes,
+    maxContentlets,
+    identifier: path ?? identifier
+  };
+};
+/**
+ *
+ *
+ * Retrieves the contentlets (content items) associated with a specific container.
+ * Handles different UUID formats and provides warning for missing contentlets.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @returns {DotCMSContentlet[]} Array of contentlets in the container
+ *
+ * @example
+ * const contentlets = getContentletsInContainer(pageAsset, containerRef);
+ * // Returns: [{ identifier: 'cont1', ... }, { identifier: 'cont2', ... }]
+ */
+const getContentletsInContainer = (dotCMSPageAsset, columContainer) => {
+  const {
+    identifier,
+    uuid
+  } = columContainer;
+  const {
+    contentlets
+  } = dotCMSPageAsset.containers[identifier];
+  const contentletsInContainer = contentlets[`uuid-${uuid}`] || contentlets[`uuid-dotParser_${uuid}`] || [];
+  if (!contentletsInContainer) {
+    console.warn(`We couldn't find the contentlets for the container with the identifier ${identifier} and the uuid ${uuid} becareful by adding content to this container.\nWe recommend to change the container in the layout and add the content again.`);
+  }
+  return contentletsInContainer;
+};
+/**
+ *
+ *
+ * Generates the required DotCMS data attributes for a container element.
+ * These attributes are used by DotCMS for container identification and functionality.
+ *
+ * @param {EditableContainerData} params - Container data including uuid, identifier, acceptTypes, and maxContentlets
+ * @returns {DotContainerAttributes} Object containing all necessary data attributes
+ *
+ * @example
+ * const attributes = getDotContainerAttributes({
+ *   uuid: '123',
+ *   identifier: 'cont1',
+ *   acceptTypes: 'type1,type2',
+ *   maxContentlets: 5
+ * });
+ * // Returns: { 'data-dot-object': 'container', 'data-dot-identifier': 'cont1', ... }
+ */
+function getDotContainerAttributes({
+  uuid,
+  identifier,
+  acceptTypes,
+  maxContentlets
+}) {
+  return {
+    'data-dot-object': 'container',
+    'data-dot-accept-types': acceptTypes,
+    'data-dot-identifier': identifier,
+    'data-max-contentlets': maxContentlets.toString(),
+    'data-dot-uuid': uuid
+  };
+}
 
 /**
  * Subscribes to content changes in the UVE editor
@@ -408,13 +569,84 @@ const __UVE_EVENT_ERROR_FALLBACK__ = event => {
     event
   };
 };
+/**
+ * Development mode
+ *
+ * @internal
+ */
+const DEVELOPMENT_MODE = 'development';
+/**
+ * Production mode
+ *
+ * @internal
+ */
+const PRODUCTION_MODE = 'production';
+/**
+ * End class
+ *
+ * @internal
+ */
+const END_CLASS = 'col-end-';
+/**
+ * Start class
+ *
+ * @internal
+ */
+const START_CLASS = 'col-start-';
+/**
+ * Empty container style for React
+ *
+ * @internal
+ */
+const EMPTY_CONTAINER_STYLE_REACT = {
+  width: '100%',
+  backgroundColor: '#ECF0FD',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '#030E32',
+  height: '10rem'
+};
+/**
+ * Empty container style for Angular
+ *
+ * @internal
+ */
+const EMPTY_CONTAINER_STYLE_ANGULAR = {
+  width: '100%',
+  'background-color': '#ECF0FD',
+  display: 'flex',
+  'justify-content': 'center',
+  'align-items': 'center',
+  color: '#030E32',
+  height: '10rem'
+};
+/**
+ * Custom no component
+ *
+ * @internal
+ */
+const CUSTOM_NO_COMPONENT = 'CustomNoComponent';
 
+exports.CUSTOM_NO_COMPONENT = CUSTOM_NO_COMPONENT;
+exports.DEVELOPMENT_MODE = DEVELOPMENT_MODE;
+exports.EMPTY_CONTAINER_STYLE_ANGULAR = EMPTY_CONTAINER_STYLE_ANGULAR;
+exports.EMPTY_CONTAINER_STYLE_REACT = EMPTY_CONTAINER_STYLE_REACT;
+exports.END_CLASS = END_CLASS;
+exports.PRODUCTION_MODE = PRODUCTION_MODE;
+exports.START_CLASS = START_CLASS;
 exports.__UVE_EVENTS__ = __UVE_EVENTS__;
 exports.__UVE_EVENT_ERROR_FALLBACK__ = __UVE_EVENT_ERROR_FALLBACK__;
+exports.combineClasses = combineClasses;
 exports.computeScrollIsInBottom = computeScrollIsInBottom;
 exports.findDotCMSElement = findDotCMSElement;
 exports.findDotCMSVTLData = findDotCMSVTLData;
 exports.getClosestDotCMSContainerData = getClosestDotCMSContainerData;
+exports.getColumnPositionClasses = getColumnPositionClasses;
+exports.getContainersData = getContainersData;
+exports.getContentletsInContainer = getContentletsInContainer;
 exports.getDotCMSContainerData = getDotCMSContainerData;
 exports.getDotCMSContentletsBound = getDotCMSContentletsBound;
 exports.getDotCMSPageBounds = getDotCMSPageBounds;
+exports.getDotContainerAttributes = getDotContainerAttributes;
+exports.getDotContentletAttributes = getDotContentletAttributes;

package/internal.esm.js

@@ -208,6 +208,167 @@ function computeScrollIsInBottom() {
   const scrollY = window.scrollY;
   return scrollY + viewportHeight >= documentHeight;
 }
+/**
+ *
+ *
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
+const combineClasses = classes => classes.filter(Boolean).join(' ');
+/**
+ *
+ *
+ * Calculates and returns the CSS Grid positioning classes for a column based on its configuration.
+ * Uses a 12-column grid system where columns are positioned using grid-column-start and grid-column-end.
+ *
+ * @example
+ * ```typescript
+ * const classes = getColumnPositionClasses({
+ *   leftOffset: 1, // Starts at the first column
+ *   width: 6      // Spans 6 columns
+ * });
+ * // Returns: { startClass: 'col-start-1', endClass: 'col-end-7' }
+ * ```
+ *
+ * @param {DotPageAssetLayoutColumn} column - Column configuration object
+ * @param {number} column.leftOffset - Starting position (0-based) in the grid
+ * @param {number} column.width - Number of columns to span
+ * @returns {{ startClass: string, endClass: string }} Object containing CSS class names for grid positioning
+ */
+const getColumnPositionClasses = column => {
+  const {
+    leftOffset,
+    width
+  } = column;
+  const startClass = `${START_CLASS}${leftOffset}`;
+  const endClass = `${END_CLASS}${leftOffset + width}`;
+  return {
+    startClass,
+    endClass
+  };
+};
+/**
+ *
+ *
+ * Helper function that returns an object containing the dotCMS data attributes.
+ * @param {DotCMSContentlet} contentlet - The contentlet to get the attributes for
+ * @param {string} container - The container to get the attributes for
+ * @returns {DotContentletAttributes} The dotCMS data attributes
+ */
+function getDotContentletAttributes(contentlet, container) {
+  return {
+    'data-dot-identifier': contentlet?.identifier,
+    'data-dot-basetype': contentlet?.baseType,
+    'data-dot-title': contentlet?.['widgetTitle'] || contentlet?.title,
+    'data-dot-inode': contentlet?.inode,
+    'data-dot-type': contentlet?.contentType,
+    'data-dot-container': container,
+    'data-dot-on-number-of-pages': contentlet?.['onNumberOfPages']
+  };
+}
+/**
+ *
+ *
+ * Retrieves container data from a DotCMS page asset using the container reference.
+ * This function processes the container information and returns a standardized format
+ * for container editing.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @throws {Error} When page asset is invalid or container is not found
+ * @returns {EditableContainerData} Formatted container data for editing
+ *
+ * @example
+ * const containerData = getContainersData(pageAsset, containerRef);
+ * // Returns: { uuid: '123', identifier: 'cont1', acceptTypes: 'type1,type2', maxContentlets: 5 }
+ */
+const getContainersData = (dotCMSPageAsset, columContainer) => {
+  const {
+    identifier,
+    uuid
+  } = columContainer;
+  const dotContainer = dotCMSPageAsset.containers[identifier];
+  if (!dotContainer) {
+    return null;
+  }
+  const {
+    containerStructures,
+    container
+  } = dotContainer;
+  const acceptTypes = containerStructures?.map(structure => structure.contentTypeVar).join(',') ?? '';
+  const variantId = container?.parentPermissionable?.variantId;
+  const maxContentlets = container?.maxContentlets ?? 0;
+  const path = container?.path;
+  return {
+    uuid,
+    variantId,
+    acceptTypes,
+    maxContentlets,
+    identifier: path ?? identifier
+  };
+};
+/**
+ *
+ *
+ * Retrieves the contentlets (content items) associated with a specific container.
+ * Handles different UUID formats and provides warning for missing contentlets.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @returns {DotCMSContentlet[]} Array of contentlets in the container
+ *
+ * @example
+ * const contentlets = getContentletsInContainer(pageAsset, containerRef);
+ * // Returns: [{ identifier: 'cont1', ... }, { identifier: 'cont2', ... }]
+ */
+const getContentletsInContainer = (dotCMSPageAsset, columContainer) => {
+  const {
+    identifier,
+    uuid
+  } = columContainer;
+  const {
+    contentlets
+  } = dotCMSPageAsset.containers[identifier];
+  const contentletsInContainer = contentlets[`uuid-${uuid}`] || contentlets[`uuid-dotParser_${uuid}`] || [];
+  if (!contentletsInContainer) {
+    console.warn(`We couldn't find the contentlets for the container with the identifier ${identifier} and the uuid ${uuid} becareful by adding content to this container.\nWe recommend to change the container in the layout and add the content again.`);
+  }
+  return contentletsInContainer;
+};
+/**
+ *
+ *
+ * Generates the required DotCMS data attributes for a container element.
+ * These attributes are used by DotCMS for container identification and functionality.
+ *
+ * @param {EditableContainerData} params - Container data including uuid, identifier, acceptTypes, and maxContentlets
+ * @returns {DotContainerAttributes} Object containing all necessary data attributes
+ *
+ * @example
+ * const attributes = getDotContainerAttributes({
+ *   uuid: '123',
+ *   identifier: 'cont1',
+ *   acceptTypes: 'type1,type2',
+ *   maxContentlets: 5
+ * });
+ * // Returns: { 'data-dot-object': 'container', 'data-dot-identifier': 'cont1', ... }
+ */
+function getDotContainerAttributes({
+  uuid,
+  identifier,
+  acceptTypes,
+  maxContentlets
+}) {
+  return {
+    'data-dot-object': 'container',
+    'data-dot-accept-types': acceptTypes,
+    'data-dot-identifier': identifier,
+    'data-max-contentlets': maxContentlets.toString(),
+    'data-dot-uuid': uuid
+  };
+}
 
 /**
  * Subscribes to content changes in the UVE editor
@@ -406,5 +567,63 @@ const __UVE_EVENT_ERROR_FALLBACK__ = event => {
     event
   };
 };
+/**
+ * Development mode
+ *
+ * @internal
+ */
+const DEVELOPMENT_MODE = 'development';
+/**
+ * Production mode
+ *
+ * @internal
+ */
+const PRODUCTION_MODE = 'production';
+/**
+ * End class
+ *
+ * @internal
+ */
+const END_CLASS = 'col-end-';
+/**
+ * Start class
+ *
+ * @internal
+ */
+const START_CLASS = 'col-start-';
+/**
+ * Empty container style for React
+ *
+ * @internal
+ */
+const EMPTY_CONTAINER_STYLE_REACT = {
+  width: '100%',
+  backgroundColor: '#ECF0FD',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '#030E32',
+  height: '10rem'
+};
+/**
+ * Empty container style for Angular
+ *
+ * @internal
+ */
+const EMPTY_CONTAINER_STYLE_ANGULAR = {
+  width: '100%',
+  'background-color': '#ECF0FD',
+  display: 'flex',
+  'justify-content': 'center',
+  'align-items': 'center',
+  color: '#030E32',
+  height: '10rem'
+};
+/**
+ * Custom no component
+ *
+ * @internal
+ */
+const CUSTOM_NO_COMPONENT = 'CustomNoComponent';
 
-export { __DOTCMS_UVE_EVENT__, __UVE_EVENTS__, __UVE_EVENT_ERROR_FALLBACK__, computeScrollIsInBottom, findDotCMSElement, findDotCMSVTLData, getClosestDotCMSContainerData, getDotCMSContainerData, getDotCMSContentletsBound, getDotCMSPageBounds };
+export { CUSTOM_NO_COMPONENT, DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_ANGULAR, EMPTY_CONTAINER_STYLE_REACT, END_CLASS, PRODUCTION_MODE, START_CLASS, __DOTCMS_UVE_EVENT__, __UVE_EVENTS__, __UVE_EVENT_ERROR_FALLBACK__, combineClasses, computeScrollIsInBottom, findDotCMSElement, findDotCMSVTLData, getClosestDotCMSContainerData, getColumnPositionClasses, getContainersData, getContentletsInContainer, getDotCMSContainerData, getDotCMSContentletsBound, getDotCMSPageBounds, getDotContainerAttributes, getDotContentletAttributes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/uve",
-  "version": "0.0.1-beta.14",
+  "version": "0.0.1-beta.15",
   "description": "Official JavaScript library for interacting with Universal Visual Editor (UVE)",
   "repository": {
     "type": "git",

package/src/internal/constants.d.ts

@@ -16,3 +16,61 @@ export declare const __UVE_EVENT_ERROR_FALLBACK__: (event: string) => {
     unsubscribe: () => void;
     event: string;
 };
+/**
+ * Development mode
+ *
+ * @internal
+ */
+export declare const DEVELOPMENT_MODE = "development";
+/**
+ * Production mode
+ *
+ * @internal
+ */
+export declare const PRODUCTION_MODE = "production";
+/**
+ * End class
+ *
+ * @internal
+ */
+export declare const END_CLASS = "col-end-";
+/**
+ * Start class
+ *
+ * @internal
+ */
+export declare const START_CLASS = "col-start-";
+/**
+ * Empty container style for React
+ *
+ * @internal
+ */
+export declare const EMPTY_CONTAINER_STYLE_REACT: {
+    width: string;
+    backgroundColor: string;
+    display: string;
+    justifyContent: string;
+    alignItems: string;
+    color: string;
+    height: string;
+};
+/**
+ * Empty container style for Angular
+ *
+ * @internal
+ */
+export declare const EMPTY_CONTAINER_STYLE_ANGULAR: {
+    width: string;
+    'background-color': string;
+    display: string;
+    'justify-content': string;
+    'align-items': string;
+    color: string;
+    height: string;
+};
+/**
+ * Custom no component
+ *
+ * @internal
+ */
+export declare const CUSTOM_NO_COMPONENT = "CustomNoComponent";

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

@@ -1,4 +1,6 @@
 import { DotCMSContainerBound, DotCMSContentletBound } from '../types/editor/internal';
+import { DotContainerAttributes, DotContentletAttributes, EditableContainerData } from '../types/editor/public';
+import { DotCMSColumnContainer, DotCMSContentlet, DotCMSPageAsset, DotPageAssetLayoutColumn } from '../types/page/public';
 /**
  * Calculates the bounding information for each page element within the given containers.
  *
@@ -109,3 +111,96 @@ export declare function findDotCMSVTLData(target: HTMLElement): {
  * ```
  */
 export declare function computeScrollIsInBottom(): boolean;
+/**
+ *
+ *
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
+export declare const combineClasses: (classes: string[]) => string;
+/**
+ *
+ *
+ * Calculates and returns the CSS Grid positioning classes for a column based on its configuration.
+ * Uses a 12-column grid system where columns are positioned using grid-column-start and grid-column-end.
+ *
+ * @example
+ * ```typescript
+ * const classes = getColumnPositionClasses({
+ *   leftOffset: 1, // Starts at the first column
+ *   width: 6      // Spans 6 columns
+ * });
+ * // Returns: { startClass: 'col-start-1', endClass: 'col-end-7' }
+ * ```
+ *
+ * @param {DotPageAssetLayoutColumn} column - Column configuration object
+ * @param {number} column.leftOffset - Starting position (0-based) in the grid
+ * @param {number} column.width - Number of columns to span
+ * @returns {{ startClass: string, endClass: string }} Object containing CSS class names for grid positioning
+ */
+export declare const getColumnPositionClasses: (column: DotPageAssetLayoutColumn) => {
+    startClass: string;
+    endClass: string;
+};
+/**
+ *
+ *
+ * Helper function that returns an object containing the dotCMS data attributes.
+ * @param {DotCMSContentlet} contentlet - The contentlet to get the attributes for
+ * @param {string} container - The container to get the attributes for
+ * @returns {DotContentletAttributes} The dotCMS data attributes
+ */
+export declare function getDotContentletAttributes(contentlet: DotCMSContentlet, container: string): DotContentletAttributes;
+/**
+ *
+ *
+ * Retrieves container data from a DotCMS page asset using the container reference.
+ * This function processes the container information and returns a standardized format
+ * for container editing.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @throws {Error} When page asset is invalid or container is not found
+ * @returns {EditableContainerData} Formatted container data for editing
+ *
+ * @example
+ * const containerData = getContainersData(pageAsset, containerRef);
+ * // Returns: { uuid: '123', identifier: 'cont1', acceptTypes: 'type1,type2', maxContentlets: 5 }
+ */
+export declare const getContainersData: (dotCMSPageAsset: DotCMSPageAsset, columContainer: DotCMSColumnContainer) => EditableContainerData | null;
+/**
+ *
+ *
+ * Retrieves the contentlets (content items) associated with a specific container.
+ * Handles different UUID formats and provides warning for missing contentlets.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @returns {DotCMSContentlet[]} Array of contentlets in the container
+ *
+ * @example
+ * const contentlets = getContentletsInContainer(pageAsset, containerRef);
+ * // Returns: [{ identifier: 'cont1', ... }, { identifier: 'cont2', ... }]
+ */
+export declare const getContentletsInContainer: (dotCMSPageAsset: DotCMSPageAsset, columContainer: DotCMSColumnContainer) => DotCMSContentlet[];
+/**
+ *
+ *
+ * Generates the required DotCMS data attributes for a container element.
+ * These attributes are used by DotCMS for container identification and functionality.
+ *
+ * @param {EditableContainerData} params - Container data including uuid, identifier, acceptTypes, and maxContentlets
+ * @returns {DotContainerAttributes} Object containing all necessary data attributes
+ *
+ * @example
+ * const attributes = getDotContainerAttributes({
+ *   uuid: '123',
+ *   identifier: 'cont1',
+ *   acceptTypes: 'type1,type2',
+ *   maxContentlets: 5
+ * });
+ * // Returns: { 'data-dot-object': 'container', 'data-dot-identifier': 'cont1', ... }
+ */
+export declare function getDotContainerAttributes({ uuid, identifier, acceptTypes, maxContentlets }: EditableContainerData): DotContainerAttributes;

package/src/lib/types/editor/public.d.ts

@@ -1,4 +1,5 @@
 import { ContentTypeMainFields, DotCMSContainerBound } from './internal';
+import { DEVELOPMENT_MODE, PRODUCTION_MODE } from '../../../internal';
 /**
  * Represents the state of the Universal Visual Editor (UVE)
  * @interface
@@ -17,6 +18,11 @@ export interface UVEState {
     publishDate: string | null;
     languageId: string | null;
 }
+/**
+ * The mode of the page renderer component
+ * @enum {string}
+ */
+export type DotCMSPageRendererMode = typeof PRODUCTION_MODE | typeof DEVELOPMENT_MODE;
 /**
  * Possible modes of UVE (Universal Visual Editor)
  * @enum {string}
@@ -179,3 +185,41 @@ export type UVEEventPayloadMap = {
     [UVEEventType.IFRAME_SCROLL]: 'up' | 'down';
     [UVEEventType.CONTENTLET_HOVERED]: unknown;
 };
+/**
+ *
+ * Interface representing the data needed for container editing
+ * @interface EditableContainerData
+ */
+export interface EditableContainerData {
+    uuid: string;
+    identifier: string;
+    acceptTypes: string;
+    maxContentlets: number;
+    variantId?: string;
+}
+/**
+ *
+ * Interface representing the data attributes of a DotCMS container.
+ * @interface DotContainerAttributes
+ */
+export interface DotContainerAttributes {
+    'data-dot-object': string;
+    'data-dot-accept-types': string;
+    'data-dot-identifier': string;
+    'data-max-contentlets': string;
+    'data-dot-uuid': string;
+}
+/**
+ *
+ * Interface representing the data attributes of a DotCMS contentlet.
+ * @interface DotContentletAttributes
+ */
+export interface DotContentletAttributes {
+    'data-dot-identifier': string;
+    'data-dot-basetype': string;
+    'data-dot-title': string;
+    'data-dot-inode': string;
+    'data-dot-type': string;
+    'data-dot-container': string;
+    'data-dot-on-number-of-pages': string;
+}

package/src/lib/types/page/public.d.ts

@@ -0,0 +1,421 @@
+export interface DotCMSPageAsset {
+    canCreateTemplate?: boolean;
+    containers: {
+        [key: string]: DotCMSPageAssetContainer;
+    };
+    layout: DotCMSLayout;
+    page: DotCMSPage;
+    site: DotCMSSite;
+    template: DotCMSTemplate;
+    viewAs?: DotCMSViewAs;
+    vanityUrl?: DotCMSVanityUrl;
+}
+export interface DotPageAssetLayoutRow {
+    identifier: number;
+    value?: string;
+    id?: string;
+    columns: DotPageAssetLayoutColumn[];
+    styleClass?: string;
+}
+export interface DotCMSVanityUrl {
+    pattern: string;
+    vanityUrlId: string;
+    url: string;
+    siteId: string;
+    languageId: number;
+    forwardTo: string;
+    response: number;
+    order: number;
+    temporaryRedirect: boolean;
+    permanentRedirect: boolean;
+    forward: boolean;
+}
+export interface DotPageAssetLayoutColumn {
+    preview: boolean;
+    containers: DotCMSColumnContainer[];
+    widthPercent: number;
+    width: number;
+    leftOffset: number;
+    left: number;
+    styleClass?: string;
+}
+export interface DotCMSColumnContainer {
+    identifier: string;
+    uuid: string;
+    historyUUIDs: string[];
+}
+export interface DotCMSPageAssetContainer {
+    container: DotCMSContainer;
+    containerStructures: DotCMSContainerStructure[];
+    contentlets: {
+        [key: string]: DotCMSContentlet[];
+    };
+}
+export interface DotCMSContainer {
+    identifier: string;
+    uuid: string;
+    iDate: number;
+    type: string;
+    owner?: string;
+    inode: string;
+    source: string;
+    title: string;
+    friendlyName: string;
+    modDate: number;
+    modUser: string;
+    sortOrder: number;
+    showOnMenu: boolean;
+    code?: string;
+    maxContentlets: number;
+    useDiv: boolean;
+    sortContentletsBy?: string;
+    preLoop: string;
+    postLoop: string;
+    staticify: boolean;
+    luceneQuery?: string;
+    notes: string;
+    languageId?: number;
+    path?: string;
+    live: boolean;
+    locked: boolean;
+    working: boolean;
+    deleted: boolean;
+    name: string;
+    archived: boolean;
+    permissionId: string;
+    versionId: string;
+    versionType: string;
+    permissionType: string;
+    categoryId: string;
+    idate: number;
+    new: boolean;
+    acceptTypes: string;
+    contentlets: DotCMSContentlet[];
+    parentPermissionable: DotCMSSiteParentPermissionable;
+}
+export interface DotCMSContentlet {
+    archived: boolean;
+    baseType: string;
+    deleted?: boolean;
+    binary?: string;
+    binaryContentAsset?: string;
+    binaryVersion?: string;
+    contentType: string;
+    file?: string;
+    folder: string;
+    hasLiveVersion?: boolean;
+    hasTitleImage: boolean;
+    host: string;
+    hostName: string;
+    identifier: string;
+    inode: string;
+    image?: any;
+    languageId: number;
+    language?: string;
+    live: boolean;
+    locked: boolean;
+    mimeType?: string;
+    modDate: string;
+    modUser: string;
+    modUserName: string;
+    owner: string;
+    sortOrder: number;
+    stInode: string;
+    title: string;
+    titleImage: string;
+    text?: string;
+    url: string;
+    working: boolean;
+    body?: string;
+    contentTypeIcon?: string;
+    variant?: string;
+    __icon__?: string;
+    [key: string]: any;
+}
+export interface DotcmsNavigationItem {
+    code?: any;
+    folder: string;
+    children?: DotcmsNavigationItem[];
+    host: string;
+    languageId: number;
+    href: string;
+    title: string;
+    type: string;
+    hash: number;
+    target: string;
+    order: number;
+}
+interface DotCMSTemplate {
+    iDate: number;
+    type: string;
+    owner: string;
+    inode: string;
+    identifier: string;
+    source: string;
+    title: string;
+    friendlyName: string;
+    modDate: number;
+    modUser: string;
+    sortOrder: number;
+    showOnMenu: boolean;
+    image: string;
+    drawed: boolean;
+    drawedBody: string;
+    theme: string;
+    anonymous: boolean;
+    template: boolean;
+    name: string;
+    live: boolean;
+    archived: boolean;
+    locked: boolean;
+    working: boolean;
+    permissionId: string;
+    versionId: string;
+    versionType: string;
+    deleted: boolean;
+    permissionType: string;
+    categoryId: string;
+    idate: number;
+    new: boolean;
+    canEdit: boolean;
+}
+interface DotCMSPage {
+    template: string;
+    modDate: number;
+    metadata: string;
+    cachettl: string;
+    pageURI: string;
+    title: string;
+    type: string;
+    showOnMenu: string;
+    httpsRequired: boolean;
+    inode: string;
+    disabledWYSIWYG: any[];
+    seokeywords: string;
+    host: string;
+    lastReview: number;
+    working: boolean;
+    locked: boolean;
+    stInode: string;
+    friendlyName: string;
+    live: boolean;
+    owner: string;
+    identifier: string;
+    nullProperties: any[];
+    friendlyname: string;
+    pagemetadata: string;
+    languageId: number;
+    url: string;
+    seodescription: string;
+    modUserName: string;
+    folder: string;
+    deleted: boolean;
+    sortOrder: number;
+    modUser: string;
+    pageUrl: string;
+    workingInode: string;
+    shortyWorking: string;
+    canEdit: boolean;
+    canRead: boolean;
+    canLock: boolean;
+    lockedOn: number;
+    lockedBy: string;
+    lockedByName: string;
+    liveInode: string;
+    shortyLive: string;
+}
+interface DotCMSViewAs {
+    language: {
+        id: number;
+        languageCode: string;
+        countryCode: string;
+        language: string;
+        country: string;
+    };
+    mode: string;
+}
+interface DotCMSLayout {
+    pageWidth: string;
+    width: string;
+    layout: string;
+    title: string;
+    header: boolean;
+    footer: boolean;
+    body: DotPageAssetLayoutBody;
+    sidebar: DotPageAssetLayoutSidebar;
+}
+interface DotCMSContainerStructure {
+    id: string;
+    structureId: string;
+    containerInode: string;
+    containerId: string;
+    code: string;
+    contentTypeVar: string;
+}
+interface DotPageAssetLayoutSidebar {
+    preview: boolean;
+    containers: DotCMSContainer[];
+    location: string;
+    widthPercent: number;
+    width: string;
+}
+interface DotPageAssetLayoutBody {
+    rows: DotPageAssetLayoutRow[];
+}
+interface DotCMSSite {
+    lowIndexPriority: boolean;
+    name: string;
+    default: boolean;
+    aliases: string;
+    parent: boolean;
+    tagStorage: string;
+    systemHost: boolean;
+    inode: string;
+    versionType: string;
+    structureInode: string;
+    hostname: string;
+    hostThumbnail?: any;
+    owner: string;
+    permissionId: string;
+    permissionType: string;
+    type: string;
+    identifier: string;
+    modDate: number;
+    host: string;
+    live: boolean;
+    indexPolicy: string;
+    categoryId: string;
+    actionId?: any;
+    new: boolean;
+    archived: boolean;
+    locked: boolean;
+    disabledWysiwyg: any[];
+    modUser: string;
+    working: boolean;
+    titleImage: {
+        present: boolean;
+    };
+    folder: string;
+    htmlpage: boolean;
+    fileAsset: boolean;
+    vanityUrl: boolean;
+    keyValue: boolean;
+    structure?: DotCMSSiteStructure;
+    title: string;
+    languageId: number;
+    indexPolicyDependencies: string;
+    contentTypeId: string;
+    versionId: string;
+    lastReview: number;
+    nextReview?: any;
+    reviewInterval?: any;
+    sortOrder: number;
+    contentType: DotCMSSiteContentType;
+}
+interface DotCMSSiteContentType {
+    owner?: any;
+    parentPermissionable: DotCMSSiteParentPermissionable;
+    permissionId: string;
+    permissionType: string;
+}
+export interface DotCMSSiteParentPermissionable {
+    Inode: string;
+    Identifier: string;
+    permissionByIdentifier: boolean;
+    type: string;
+    owner?: any;
+    identifier: string;
+    permissionId: string;
+    parentPermissionable?: any;
+    permissionType: string;
+    inode: string;
+    childrenPermissionable?: any;
+    variantId?: string;
+}
+interface DotCMSSiteStructure {
+    iDate: number;
+    type: string;
+    owner?: any;
+    inode: string;
+    identifier: string;
+    name: string;
+    description: string;
+    defaultStructure: boolean;
+    reviewInterval?: any;
+    reviewerRole?: any;
+    pagedetail?: any;
+    structureType: number;
+    fixed: boolean;
+    system: boolean;
+    velocityVarName: string;
+    urlMapPattern?: any;
+    host: string;
+    folder: string;
+    publishDateVar?: any;
+    expireDateVar?: any;
+    modDate: number;
+    fields: DotCMSSiteField[];
+    widget: boolean;
+    detailPage?: any;
+    fieldsBySortOrder: DotCMSSiteField[];
+    form: boolean;
+    htmlpageAsset: boolean;
+    content: boolean;
+    fileAsset: boolean;
+    persona: boolean;
+    permissionId: string;
+    permissionType: string;
+    live: boolean;
+    categoryId: string;
+    idate: number;
+    new: boolean;
+    archived: boolean;
+    locked: boolean;
+    modUser: string;
+    working: boolean;
+    title: string;
+    versionId: string;
+    versionType: string;
+}
+interface DotCMSSiteField {
+    iDate: number;
+    type: string;
+    owner?: any;
+    inode: string;
+    identifier: string;
+    structureInode: string;
+    fieldName: string;
+    fieldType: string;
+    fieldRelationType?: any;
+    fieldContentlet: string;
+    required: boolean;
+    velocityVarName: string;
+    sortOrder: number;
+    values?: any;
+    regexCheck?: any;
+    hint?: any;
+    defaultValue?: any;
+    indexed: boolean;
+    listed: boolean;
+    fixed: boolean;
+    readOnly: boolean;
+    searchable: boolean;
+    unique: boolean;
+    modDate: number;
+    dataType: string;
+    live: boolean;
+    categoryId: string;
+    idate: number;
+    new: boolean;
+    archived: boolean;
+    locked: boolean;
+    modUser: string;
+    working: boolean;
+    permissionId: string;
+    parentPermissionable?: any;
+    permissionType: string;
+    title: string;
+    versionId: string;
+    versionType: string;
+}
+export {};

package/src/types.d.ts

@@ -1,2 +1,3 @@
 export * from './lib/types/editor/public';
 export * from './lib/types/events/public';
+export * from './lib/types/page/public';