@contentful/experiences-core 1.5.0 → 1.5.1-beta.0

package/README.md

@@ -1,7 +1,17 @@
 # @contentful/experiences-core
 
-This package provides core internal functionality for the [Experiences SDK](https://www.contentful.com/developers/docs/experiences/set-up-experiences-sdk/).
+### Purpose
+- To contain shared code and utilities across the Experiences packages such as constants, types, transformers, and hooks.
+- This means additions to core should be framework agnostic. For example, code that is only compatible with React does not belong in the core package.
 
-## Documentation
+### Concepts
+- **Deep binding**: Relates to the ability to resolve multiple references. Such an entry containing a reference to another entry which may also contain a reference to another entry and so on.
+- **Component definition** Baseline definition to outline what is needed to define all component types whether it is a structure, built-in, or custom component.
+- **Entity**: Contentful entries that get converted into an experience object that can be used within the experiences packages.
+- **Fetchers**: The helper classes and functions in the Entity directory get consumed by the fetchers which get bundled up into either `fetchBySlug` or `fetchById`. The listed fetchers are the two main functions that are exposed to the end user in the SDK to fetch a user's experience which is stored in Contentful as an entry.
+- **Registries**: An in-memory storage technique that the user can decide to provide for themselves or other personas in the editor canvas. Design tokens is an useful example where a user can provide their own thematic values with regards to text size, component sizes, spacing, colors, and borders in a JSON format that is resolved by the registry and provided as options in the UI editor sidebar.
+- **Exporting types and constants**: Notice in the `package.json` there is a `typesVersions` definition that separates the constants and types as separated bundled packages where the rollup is defined in the `rollup.config.mjs` file. This effectively means in practice consuming the types and constants have different imports - namely `@contentful/experiences-core/constants` and `@contentful/experiences-core/types`.
 
-Please refer to our [Documentation](https://www.contentful.com/developers/docs/experiences/) to learn more about it.
+### Relevant Contentful documentation links
+- [Data structures](https://www.contentful.com/developers/docs/experiences/data-structures/)
+- [Design tokens](https://www.contentful.com/developers/docs/experiences/design-tokens/)

package/dist/constants.d.ts

@@ -6,6 +6,7 @@ declare const SCROLL_STATES: {
 declare const OUTGOING_EVENTS: {
     Connected: string;
     DesignTokens: string;
+    RegisteredBreakpoints: string;
     HoveredSection: string;
     MouseMove: string;
     NewHoveredElement: string;

package/dist/constants.js

@@ -6,6 +6,7 @@ const SCROLL_STATES = {
 const OUTGOING_EVENTS = {
     Connected: 'connected',
     DesignTokens: 'registerDesignTokens',
+    RegisteredBreakpoints: 'registeredBreakpoints',
     HoveredSection: 'hoveredSection',
     MouseMove: 'mouseMove',
     NewHoveredElement: 'newHoveredElement',

package/dist/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export const SCROLL_STATES = {\n  Start: 'scrollStart',\n  IsScrolling: 'isScrolling',\n  End: 'scrollEnd',\n};\n\nexport const OUTGOING_EVENTS = {\n  Connected: 'connected',\n  DesignTokens: 'registerDesignTokens',\n  HoveredSection: 'hoveredSection',\n  MouseMove: 'mouseMove',\n  NewHoveredElement: 'newHoveredElement',\n  ComponentSelected: 'componentSelected',\n  RegisteredComponents: 'registeredComponents',\n  RequestComponentTreeUpdate: 'requestComponentTreeUpdate',\n  ComponentDragCanceled: 'componentDragCanceled',\n  ComponentDropped: 'componentDropped',\n  ComponentMoved: 'componentMoved',\n  CanvasReload: 'canvasReload',\n  UpdateSelectedComponentCoordinates: 'updateSelectedComponentCoordinates',\n  UpdateHoveredComponentCoordinates: 'updateHoveredComponentCoordinates',\n  CanvasScroll: 'canvasScrolling',\n  CanvasError: 'canvasError',\n  ComponentMoveStarted: 'componentMoveStarted',\n  ComponentMoveEnded: 'componentMoveEnded',\n  OutsideCanvasClick: 'outsideCanvasClick',\n};\n\nexport const INCOMING_EVENTS = {\n  RequestEditorMode: 'requestEditorMode',\n  ExperienceUpdated: 'componentTreeUpdated',\n  ComponentDraggingChanged: 'componentDraggingChanged',\n  ComponentDragCanceled: 'componentDragCanceled',\n  ComponentDragStarted: 'componentDragStarted',\n  ComponentDragEnded: 'componentDragEnded',\n  ComponentMoveEnded: 'componentMoveEnded',\n  CanvasResized: 'canvasResized',\n  SelectComponent: 'selectComponent',\n  HoverComponent: 'hoverComponent',\n  UpdatedEntity: 'updatedEntity',\n  AssembliesAdded: 'assembliesAdded',\n  AssembliesRegistered: 'assembliesRegistered',\n  InitEditor: 'initEditor',\n  MouseMove: 'mouseMove',\n};\n\nexport const INTERNAL_EVENTS = {\n  ComponentsRegistered: 'cfComponentsRegistered',\n  VisualEditorInitialize: 'cfVisualEditorInitialize',\n};\n\nexport const VISUAL_EDITOR_EVENTS = {\n  Ready: 'cfVisualEditorReady',\n};\n\nexport const VISUAL_EDITOR_CONTAINER_ID = 'cf-visual-editor';\nexport const CONTENTFUL_COMPONENT_CATEGORY = 'contentful-component';\nexport const CONTENTFUL_DEFAULT_CATEGORY = 'Contentful';\n\nexport const CONTENTFUL_COMPONENTS = {\n  section: {\n    id: 'contentful-section',\n    name: 'Section',\n  },\n  container: {\n    id: 'contentful-container',\n    name: 'Container',\n  },\n  columns: {\n    id: 'contentful-columns',\n    name: 'Columns',\n  },\n  singleColumn: {\n    id: 'contentful-single-column',\n    name: 'Column',\n  },\n  button: {\n    id: 'contentful-button',\n    name: 'Button',\n  },\n  heading: {\n    id: 'contentful-heading',\n    name: 'Heading',\n  },\n  image: {\n    id: 'contentful-image',\n    name: 'Image',\n  },\n  richText: {\n    id: 'contentful-richText',\n    name: 'Rich Text',\n  },\n  text: {\n    id: 'contentful-text',\n    name: 'Text',\n  },\n  divider: {\n    id: 'contentful-divider',\n    name: 'Divider',\n  },\n};\n\nexport const ASSEMBLY_NODE_TYPE = 'assembly';\nexport const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';\nexport const ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';\nexport const ASSEMBLY_NODE_TYPES = [ASSEMBLY_NODE_TYPE, ASSEMBLY_BLOCK_NODE_TYPE];\nexport const LATEST_SCHEMA_VERSION = '2023-09-28';\nexport const CF_STYLE_ATTRIBUTES = [\n  'cfHorizontalAlignment',\n  'cfVerticalAlignment',\n  'cfMargin',\n  'cfPadding',\n  'cfBackgroundColor',\n  'cfWidth',\n  'cfMaxWidth',\n  'cfHeight',\n  'cfImageAsset',\n  'cfImageOptions',\n  'cfBackgroundImageUrl',\n  'cfBackgroundImageOptions',\n  'cfFlexDirection',\n  'cfFlexWrap',\n  'cfBorder',\n  'cfBorderRadius',\n  'cfGap',\n  'cfFontSize',\n  'cfFontWeight',\n  'cfLineHeight',\n  'cfLetterSpacing',\n  'cfTextColor',\n  'cfTextAlign',\n  'cfTextTransform',\n  'cfTextBold',\n  'cfTextItalic',\n  'cfTextUnderline',\n  // For backwards compatibility\n  // we need to keep those in this constant array\n  // so that omit() in <VisualEditorBlock> and <CompositionBlock>\n  // can filter them out and not pass as props\n  'cfBackgroundImageScaling',\n  'cfBackgroundImageAlignment',\n  'cfBackgroundImageAlignmentVertical',\n  'cfBackgroundImageAlignmentHorizontal',\n];\n\nexport const EMPTY_CONTAINER_HEIGHT = '80px';\n\nexport const HYPERLINK_DEFAULT_PATTERN = `/{locale}/{entry.fields.slug}/`;\n\nexport const DEFAULT_IMAGE_WIDTH = '500px';\n\nexport enum PostMessageMethods {\n  REQUEST_ENTITIES = 'REQUEST_ENTITIES',\n  REQUESTED_ENTITIES = 'REQUESTED_ENTITIES',\n}\n\nexport const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'] as const;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export const SCROLL_STATES = {\n  Start: 'scrollStart',\n  IsScrolling: 'isScrolling',\n  End: 'scrollEnd',\n};\n\nexport const OUTGOING_EVENTS = {\n  Connected: 'connected',\n  DesignTokens: 'registerDesignTokens',\n  RegisteredBreakpoints: 'registeredBreakpoints',\n  HoveredSection: 'hoveredSection',\n  MouseMove: 'mouseMove',\n  NewHoveredElement: 'newHoveredElement',\n  ComponentSelected: 'componentSelected',\n  RegisteredComponents: 'registeredComponents',\n  RequestComponentTreeUpdate: 'requestComponentTreeUpdate',\n  ComponentDragCanceled: 'componentDragCanceled',\n  ComponentDropped: 'componentDropped',\n  ComponentMoved: 'componentMoved',\n  CanvasReload: 'canvasReload',\n  UpdateSelectedComponentCoordinates: 'updateSelectedComponentCoordinates',\n  UpdateHoveredComponentCoordinates: 'updateHoveredComponentCoordinates',\n  CanvasScroll: 'canvasScrolling',\n  CanvasError: 'canvasError',\n  ComponentMoveStarted: 'componentMoveStarted',\n  ComponentMoveEnded: 'componentMoveEnded',\n  OutsideCanvasClick: 'outsideCanvasClick',\n};\n\nexport const INCOMING_EVENTS = {\n  RequestEditorMode: 'requestEditorMode',\n  ExperienceUpdated: 'componentTreeUpdated',\n  ComponentDraggingChanged: 'componentDraggingChanged',\n  ComponentDragCanceled: 'componentDragCanceled',\n  ComponentDragStarted: 'componentDragStarted',\n  ComponentDragEnded: 'componentDragEnded',\n  ComponentMoveEnded: 'componentMoveEnded',\n  CanvasResized: 'canvasResized',\n  SelectComponent: 'selectComponent',\n  HoverComponent: 'hoverComponent',\n  UpdatedEntity: 'updatedEntity',\n  AssembliesAdded: 'assembliesAdded',\n  AssembliesRegistered: 'assembliesRegistered',\n  InitEditor: 'initEditor',\n  MouseMove: 'mouseMove',\n};\n\nexport const INTERNAL_EVENTS = {\n  ComponentsRegistered: 'cfComponentsRegistered',\n  VisualEditorInitialize: 'cfVisualEditorInitialize',\n};\n\nexport const VISUAL_EDITOR_EVENTS = {\n  Ready: 'cfVisualEditorReady',\n};\n\nexport const VISUAL_EDITOR_CONTAINER_ID = 'cf-visual-editor';\nexport const CONTENTFUL_COMPONENT_CATEGORY = 'contentful-component';\nexport const CONTENTFUL_DEFAULT_CATEGORY = 'Contentful';\n\nexport const CONTENTFUL_COMPONENTS = {\n  section: {\n    id: 'contentful-section',\n    name: 'Section',\n  },\n  container: {\n    id: 'contentful-container',\n    name: 'Container',\n  },\n  columns: {\n    id: 'contentful-columns',\n    name: 'Columns',\n  },\n  singleColumn: {\n    id: 'contentful-single-column',\n    name: 'Column',\n  },\n  button: {\n    id: 'contentful-button',\n    name: 'Button',\n  },\n  heading: {\n    id: 'contentful-heading',\n    name: 'Heading',\n  },\n  image: {\n    id: 'contentful-image',\n    name: 'Image',\n  },\n  richText: {\n    id: 'contentful-richText',\n    name: 'Rich Text',\n  },\n  text: {\n    id: 'contentful-text',\n    name: 'Text',\n  },\n  divider: {\n    id: 'contentful-divider',\n    name: 'Divider',\n  },\n};\n\nexport const ASSEMBLY_NODE_TYPE = 'assembly';\nexport const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';\nexport const ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';\nexport const ASSEMBLY_NODE_TYPES = [ASSEMBLY_NODE_TYPE, ASSEMBLY_BLOCK_NODE_TYPE];\nexport const LATEST_SCHEMA_VERSION = '2023-09-28';\nexport const CF_STYLE_ATTRIBUTES = [\n  'cfHorizontalAlignment',\n  'cfVerticalAlignment',\n  'cfMargin',\n  'cfPadding',\n  'cfBackgroundColor',\n  'cfWidth',\n  'cfMaxWidth',\n  'cfHeight',\n  'cfImageAsset',\n  'cfImageOptions',\n  'cfBackgroundImageUrl',\n  'cfBackgroundImageOptions',\n  'cfFlexDirection',\n  'cfFlexWrap',\n  'cfBorder',\n  'cfBorderRadius',\n  'cfGap',\n  'cfFontSize',\n  'cfFontWeight',\n  'cfLineHeight',\n  'cfLetterSpacing',\n  'cfTextColor',\n  'cfTextAlign',\n  'cfTextTransform',\n  'cfTextBold',\n  'cfTextItalic',\n  'cfTextUnderline',\n  // For backwards compatibility\n  // we need to keep those in this constant array\n  // so that omit() in <VisualEditorBlock> and <CompositionBlock>\n  // can filter them out and not pass as props\n  'cfBackgroundImageScaling',\n  'cfBackgroundImageAlignment',\n  'cfBackgroundImageAlignmentVertical',\n  'cfBackgroundImageAlignmentHorizontal',\n];\n\nexport const EMPTY_CONTAINER_HEIGHT = '80px';\n\nexport const HYPERLINK_DEFAULT_PATTERN = `/{locale}/{entry.fields.slug}/`;\n\nexport const DEFAULT_IMAGE_WIDTH = '500px';\n\nexport enum PostMessageMethods {\n  REQUEST_ENTITIES = 'REQUEST_ENTITIES',\n  REQUESTED_ENTITIES = 'REQUESTED_ENTITIES',\n}\n\nexport const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'] as const;\n"],"names":[],"mappings":"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"}

package/dist/entity/EntityStore.d.ts

@@ -22,6 +22,7 @@ declare class EntityStore extends EntityStoreBase {
         displayName: string;
         query: string;
         previewSize: string;
+        displayIconUrl?: string | undefined;
     }[];
     get dataSource(): Record<string, {
         sys: {

package/dist/index.d.ts

@@ -22,4 +22,5 @@ export { fetchBySlug } from './fetchers/fetchBySlug.js';
 export { fetchById } from './fetchers/fetchById.js';
 export { createExperience } from './fetchers/createExperience.js';
 export { defineDesignTokens, designTokensRegistry, getDesignTokenRegistration, resetDesignTokenRegistry } from './registries/designTokenRegistry.js';
+export { breakpointsRegistry, defineBreakpoints, getBreakpointRegistration, resetBreakpointsRegistry, runBreakpointsValidation } from './registries/breakpointsRegistry.js';
 export { DeepReference, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree } from './deep-binding/DeepReference.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
+import { z, ZodIssueCode } from 'zod';
 import { uniqBy } from 'lodash-es';
 
 const INCOMING_EVENTS = {
@@ -1262,6 +1263,361 @@ const resetDesignTokenRegistry = () => {
     designTokensRegistry = {};
 };
 
+// If more than one version is supported, use z.union
+const SchemaVersions = z.literal('2023-09-28');
+// Keep deprecated versions here just for reference
+z.union([
+    z.literal('2023-08-23'),
+    z.literal('2023-07-26'),
+    z.literal('2023-06-27'),
+]);
+
+const DefinitionPropertyTypeSchema = z.enum([
+    'Text',
+    'RichText',
+    'Number',
+    'Date',
+    'Boolean',
+    'Location',
+    'Media',
+    'Object',
+    'Hyperlink',
+]);
+const DefinitionPropertyKeySchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,32}$/, { message: 'Property needs to match: /^[a-zA-Z0-9-_]{1,32}$/' });
+z.object({
+    id: DefinitionPropertyKeySchema,
+    variables: z.record(DefinitionPropertyKeySchema, z.object({
+        // TODO - extend with definition of validations and defaultValue
+        displayName: z.string().optional(),
+        type: DefinitionPropertyTypeSchema,
+        description: z.string().optional(),
+        group: z.string().optional(),
+    })),
+});
+
+const uuidKeySchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,21}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,21}$/' });
+/**
+ * Property keys for imported components have a limit of 32 characters (to be implemented) while
+ * property keys for patterns have a limit of 54 characters (<32-char-variabl-name>_<21-char-nanoid-id>).
+ * Because we cannot distinguish between the two in the componentTree, we will use the larger limit for both.
+ */
+const propertyKeySchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,54}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,54}$/' });
+const DataSourceSchema = z.record(uuidKeySchema, z.object({
+    sys: z.object({
+        type: z.literal('Link'),
+        id: z.string(),
+        linkType: z.enum(['Entry', 'Asset']),
+    }),
+}));
+const PrimitiveValueSchema = z.union([
+    z.string(),
+    z.boolean(),
+    z.number(),
+    z.record(z.any(), z.any()),
+    z.undefined(),
+]);
+const ValuesByBreakpointSchema = z.record(z.lazy(() => PrimitiveValueSchema));
+const DesignValueSchema = z
+    .object({
+    type: z.literal('DesignValue'),
+    valuesByBreakpoint: ValuesByBreakpointSchema,
+})
+    .strict();
+const BoundValueSchema = z
+    .object({
+    type: z.literal('BoundValue'),
+    path: z.string(),
+})
+    .strict();
+const HyperlinkValueSchema = z
+    .object({
+    type: z.literal('HyperlinkValue'),
+    linkTargetKey: z.string(),
+    overrides: z.object({}).optional(),
+})
+    .strict();
+const UnboundValueSchema = z
+    .object({
+    type: z.literal('UnboundValue'),
+    key: z.string(),
+})
+    .strict();
+const ComponentValueSchema = z
+    .object({
+    type: z.literal('ComponentValue'),
+    key: z.string(),
+})
+    .strict();
+const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
+    DesignValueSchema,
+    BoundValueSchema,
+    UnboundValueSchema,
+    HyperlinkValueSchema,
+    ComponentValueSchema,
+]);
+const BreakpointSchema = z
+    .object({
+    id: propertyKeySchema,
+    query: z.string().regex(/^\*$|^<[0-9*]+px$/),
+    previewSize: z.string(),
+    displayName: z.string(),
+    displayIconUrl: z.string().optional(),
+})
+    .strict();
+const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
+    value: PrimitiveValueSchema,
+}));
+// Use helper schema to define a recursive schema with its type correctly below
+const BaseComponentTreeNodeSchema = z.object({
+    definitionId: DefinitionPropertyKeySchema,
+    displayName: z.string().optional(),
+    slotId: z.string().optional(),
+    variables: z.record(propertyKeySchema, ComponentPropertyValueSchema),
+});
+const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
+    children: z.lazy(() => ComponentTreeNodeSchema.array()),
+});
+const ComponentSettingsSchema = z.object({
+    variableDefinitions: z.record(z.string().regex(/^[a-zA-Z0-9-_]{1,54}$/), // Here the key is <variableName>_<nanoidId> so we need to allow for a longer length
+    z.object({
+        displayName: z.string().optional(),
+        type: DefinitionPropertyTypeSchema,
+        defaultValue: PrimitiveValueSchema.or(ComponentPropertyValueSchema).optional(),
+        description: z.string().optional(),
+        group: z.string().optional(),
+        validations: z
+            .object({
+            required: z.boolean().optional(),
+            format: z.literal('URL').optional(),
+            in: z
+                .array(z.object({
+                value: z.union([z.string(), z.number()]),
+                displayName: z.string().optional(),
+            }))
+                .optional(),
+        })
+            .optional(),
+    })),
+});
+const UsedComponentsSchema = z.array(z.object({
+    sys: z.object({
+        type: z.literal('Link'),
+        id: z.string(),
+        linkType: z.literal('Entry'),
+    }),
+}));
+const breakpointsRefinement = (value, ctx) => {
+    if (!value.length || value[0].query !== '*') {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `The first breakpoint should include the following attributes: { "query": "*" }`,
+        });
+    }
+    const hasDuplicateIds = value.some((currentBreakpoint, currentBreakpointIndex) => {
+        // check if the current breakpoint id is found in the rest of the array
+        const breakpointIndex = value.findIndex((breakpoint) => breakpoint.id === currentBreakpoint.id);
+        return breakpointIndex !== currentBreakpointIndex;
+    });
+    if (hasDuplicateIds) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Breakpoint IDs must be unique`,
+        });
+    }
+    // Extract the queries boundary by removing the special characters around it
+    const queries = value.map((bp) => bp.query === '*' ? bp.query : parseInt(bp.query.replace(/px|<|>/, '')));
+    // sort updates queries array in place so we need to create a copy
+    const originalQueries = [...queries];
+    queries.sort((q1, q2) => {
+        if (q1 === '*') {
+            return -1;
+        }
+        if (q2 === '*') {
+            return 1;
+        }
+        return q1 > q2 ? -1 : 1;
+    });
+    if (originalQueries.join('') !== queries.join('')) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Breakpoints should be ordered from largest to smallest pixel value`,
+        });
+    }
+};
+const componentSettingsRefinement = (value, ctx) => {
+    const { componentSettings, usedComponents } = value;
+    if (!componentSettings || !usedComponents) {
+        return;
+    }
+    const localeKey = Object.keys(componentSettings ?? {})[0];
+    if (componentSettings[localeKey] !== undefined && usedComponents[localeKey] !== undefined) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `'componentSettings' field cannot be used in conjunction with 'usedComponents' field`,
+            path: ['componentSettings', localeKey],
+        });
+    }
+};
+const ComponentTreeSchema = z
+    .object({
+    breakpoints: z.array(BreakpointSchema).superRefine(breakpointsRefinement),
+    children: z.array(ComponentTreeNodeSchema),
+    schemaVersion: SchemaVersions,
+})
+    .strict();
+const localeWrapper = (fieldSchema) => z.record(z.string(), fieldSchema);
+z
+    .object({
+    componentTree: localeWrapper(ComponentTreeSchema),
+    dataSource: localeWrapper(DataSourceSchema),
+    unboundValues: localeWrapper(UnboundValuesSchema),
+    usedComponents: localeWrapper(UsedComponentsSchema).optional(),
+    componentSettings: localeWrapper(ComponentSettingsSchema).optional(),
+})
+    .superRefine(componentSettingsRefinement);
+
+var CodeNames;
+(function (CodeNames) {
+    CodeNames["Type"] = "type";
+    CodeNames["Required"] = "required";
+    CodeNames["Unexpected"] = "unexpected";
+    CodeNames["Regex"] = "regex";
+    CodeNames["In"] = "in";
+    CodeNames["Size"] = "size";
+    CodeNames["Custom"] = "custom";
+})(CodeNames || (CodeNames = {}));
+const convertInvalidType = (issue) => {
+    const name = issue.received === 'undefined' ? CodeNames.Required : CodeNames.Type;
+    const details = issue.received === 'undefined'
+        ? `The property "${issue.path.slice(-1)}" is required here`
+        : `The type of "${issue.path.slice(-1)}" is incorrect, expected type: ${issue.expected}`;
+    return {
+        details: details,
+        name: name,
+        path: issue.path,
+        value: issue.received.toString(),
+    };
+};
+const convertUnrecognizedKeys = (issue) => {
+    const missingProperties = issue.keys.map((k) => `"${k}"`).join(', ');
+    return {
+        details: issue.keys.length > 1
+            ? `The properties ${missingProperties} are not expected`
+            : `The property ${missingProperties} is not expected`,
+        name: CodeNames.Unexpected,
+        path: issue.path,
+    };
+};
+const convertInvalidString = (issue) => {
+    return {
+        details: issue.message || 'Invalid string',
+        name: issue.validation === 'regex' ? CodeNames.Regex : CodeNames.Unexpected,
+        path: issue.path,
+    };
+};
+const convertInvalidEnumValue = (issue) => {
+    return {
+        details: issue.message || 'Value must be one of expected values',
+        name: CodeNames.In,
+        path: issue.path,
+        value: issue.received.toString(),
+        expected: issue.options,
+    };
+};
+const convertInvalidLiteral = (issue) => {
+    return {
+        details: issue.message || 'Value must be one of expected values',
+        name: CodeNames.In,
+        path: issue.path,
+        value: issue.received,
+        expected: [issue.expected],
+    };
+};
+const convertTooBig = (issue) => {
+    return {
+        details: issue.message || `Size should be at most ${issue.maximum}`,
+        name: CodeNames.Size,
+        path: issue.path,
+        max: issue.maximum,
+    };
+};
+const convertTooSmall = (issue) => {
+    return {
+        details: issue.message || `Size should be at least ${issue.minimum}`,
+        name: CodeNames.Size,
+        path: issue.path,
+        min: issue.minimum,
+    };
+};
+const defaultConversion = (issue) => {
+    return {
+        details: issue.message || 'An unexpected error occurred',
+        name: CodeNames.Custom,
+        path: issue.path.map(String),
+    };
+};
+const zodToContentfulError = (issue) => {
+    switch (issue.code) {
+        case ZodIssueCode.invalid_type:
+            return convertInvalidType(issue);
+        case ZodIssueCode.unrecognized_keys:
+            return convertUnrecognizedKeys(issue);
+        case ZodIssueCode.invalid_enum_value:
+            return convertInvalidEnumValue(issue);
+        case ZodIssueCode.invalid_string:
+            return convertInvalidString(issue);
+        case ZodIssueCode.too_small:
+            return convertTooSmall(issue);
+        case ZodIssueCode.too_big:
+            return convertTooBig(issue);
+        case ZodIssueCode.invalid_literal:
+            return convertInvalidLiteral(issue);
+        default:
+            return defaultConversion(issue);
+    }
+};
+const validateBreakpointsDefinition = (breakpoints) => {
+    const result = z
+        .array(BreakpointSchema)
+        .superRefine(breakpointsRefinement)
+        .safeParse(breakpoints);
+    if (!result.success) {
+        return {
+            success: false,
+            errors: result.error.issues.map(zodToContentfulError),
+        };
+    }
+    return { success: true };
+};
+
+let breakpointsRegistry = [];
+/**
+ * Register custom breakpoints
+ * @param breakpoints - [{[key:string]: string}]
+ * @returns void
+ */
+const defineBreakpoints = (breakpoints) => {
+    Object.assign(breakpointsRegistry, breakpoints);
+};
+const runBreakpointsValidation = () => {
+    const validation = validateBreakpointsDefinition(breakpointsRegistry);
+    if (!validation.success) {
+        throw new Error(`Invalid breakpoints definition. Failed with errors: \n${JSON.stringify(validation.errors, null, 2)}`);
+    }
+};
+// Used in the tests to get a breakpoint registration
+const getBreakpointRegistration = (id) => breakpointsRegistry.find((breakpoint) => breakpoint.id === id);
+// Used in the tests to reset the registry
+const resetBreakpointsRegistry = () => {
+    breakpointsRegistry = [];
+};
+
 const MEDIA_QUERY_REGEXP = /(<|>)(\d{1,})(px|cm|mm|in|pt|pc)$/;
 const toCSSMediaQuery = ({ query }) => {
     if (query === '*')
@@ -2539,5 +2895,5 @@ async function fetchById({ client, experienceTypeId, id, localeCode, }) {
     }
 }
 
-export { DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, columnsDefinition, containerBuiltInStyles, containerDefinition, createExperience, defineDesignTokens, designTokensRegistry, dividerBuiltInStyles, dividerDefinition, doesMismatchMessageSchema, fetchById, fetchBySlug, findOutermostCoordinates, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTemplateValue, getValueForBreakpoint, isComponentAllowedOnRoot, isContentfulStructureComponent, isDeepPath, isEmptyStructureWithRelativeHeight, isExperienceEntry, isLink, isLinkToAsset, lastPathNamedSegmentEq, mediaQueryMatcher, optionalBuiltInStyles, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetDesignTokenRegistry, resolveHyperlinkPattern, sectionBuiltInStyles, sectionDefinition, sendMessage, singleColumnBuiltInStyles, singleColumnDefinition, supportedModes, toCSSAttribute, transformBoundContentValue, tryParseMessage, validateExperienceBuilderConfig };
+export { DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, columnsDefinition, containerBuiltInStyles, containerDefinition, createExperience, defineBreakpoints, defineDesignTokens, designTokensRegistry, dividerBuiltInStyles, dividerDefinition, doesMismatchMessageSchema, fetchById, fetchBySlug, findOutermostCoordinates, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTemplateValue, getValueForBreakpoint, isComponentAllowedOnRoot, isContentfulStructureComponent, isDeepPath, isEmptyStructureWithRelativeHeight, isExperienceEntry, isLink, isLinkToAsset, lastPathNamedSegmentEq, mediaQueryMatcher, optionalBuiltInStyles, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveHyperlinkPattern, runBreakpointsValidation, sectionBuiltInStyles, sectionDefinition, sendMessage, singleColumnBuiltInStyles, singleColumnDefinition, supportedModes, toCSSAttribute, transformBoundContentValue, tryParseMessage, validateExperienceBuilderConfig };
 //# sourceMappingURL=index.js.map