@contentful/experiences-core 3.7.0-dev-20250918T1641-6da833a.0 → 3.7.0-dev-20250918T1653-d735f6f.0

package/dist/entity/EntityStore.d.ts

@@ -53,8 +53,8 @@ declare class EntityStore extends EntityStoreBase {
     get breakpoints(): {
         id: string;
         query: "*" | `>${number}px` | `<${number}px`;
-        previewSize: string;
         displayName: string;
+        previewSize?: string | undefined;
         displayIcon?: "desktop" | "tablet" | "mobile" | undefined;
     }[];
     get dataSource(): Record<string, {

package/dist/index.cjs

@@ -1000,7 +1000,7 @@ const BreakpointSchema = zod.z
     id: propertyKeySchema,
     // Can be replace with z.templateLiteral when upgrading to zod v4
     query: zod.z.string().refine((s) => BREAKPOINT_QUERY_REGEX.test(s)),
-    previewSize: zod.z.string(),
+    previewSize: zod.z.string().optional(),
     displayName: zod.z.string(),
     displayIcon: zod.z.enum(['desktop', 'tablet', 'mobile']).optional(),
 })
@@ -1521,29 +1521,54 @@ const validateBreakpointsDefinition = (breakpoints) => {
     return { success: true };
 };
 
-exports.breakpointsRegistry = [];
+const breakpointsRegistry = [];
 /**
- * Register custom breakpoints
- * @param breakpoints - [{[key:string]: string}]
- * @returns void
+ * Define custom breakpoints that should be used for all your experiences.
+ * A breakpoint consists of:
+ * - id: a unique identifier for this breakpoint
+ * - query: a media query string that defines when this breakpoint is active
+ * - previewSize: an optional fixed preview size to be used in the Studio editor when selecting this breakpoint
+ * - displayName: the name to be displayed in the Studio editor for this breakpoint
+ * - displayIcon: an optional icon to be displayed in the Studio editor for this breakpoint
+ *
+ * The first breakpoint must use a wildcard query (`*`) to match all sizes.
+ *
+ * Every subsequent breakpoint inherits the designs of the previous ones by default.
+ *
+ * The order of breakpoints must be either:
+ * - desktop first: from largest to smallest, using `<` operators
+ * - mobile first: from smallest to largest, using `>` operators
+ *
+ * @note changing breakpoints after you have created experiences may break those experiences
+ * @example
+ * defineBreakpoints([{
+ *    id: 'desktop',
+ *    query: '*',
+ *    displayName: 'Desktop',
+ *    displayIcon: 'desktop',
+ * }, {
+ *    id: 'tablet',
+ *    query: '<992px',
+ *    displayName: 'Tablet',
+ *    displayIcon: 'tablet',
+ * }, {
+ *    id: 'mobile',
+ *    query: '<576px',
+ *    displayName: 'Mobile',
+ *    displayIcon: 'mobile',
+ * }]);
  */
 const defineBreakpoints = (breakpoints) => {
-    Object.assign(exports.breakpointsRegistry, breakpoints);
+    Object.assign(breakpointsRegistry, breakpoints);
 };
 const runBreakpointsValidation = () => {
-    if (!exports.breakpointsRegistry.length)
+    if (!breakpointsRegistry.length)
         return;
-    const validation = validateBreakpointsDefinition(exports.breakpointsRegistry);
+    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) => exports.breakpointsRegistry.find((breakpoint) => breakpoint.id === id);
-// Used in the tests to reset the registry
-const resetBreakpointsRegistry = () => {
-    exports.breakpointsRegistry = [];
-};
 
 const sdkOptionsRegistry = {};
 /**
@@ -5262,6 +5287,7 @@ exports.EntityStoreBase = EntityStoreBase;
 exports.MEDIA_QUERY_REGEXP = MEDIA_QUERY_REGEXP;
 exports.addLocale = addLocale;
 exports.addMinHeightForEmptyStructures = addMinHeightForEmptyStructures;
+exports.breakpointsRegistry = breakpointsRegistry;
 exports.buildCfStyles = buildCfStyles;
 exports.buildStyleTag = buildStyleTag;
 exports.buildTemplate = buildTemplate;
@@ -5303,7 +5329,6 @@ exports.gatherDeepReferencesFromTree = gatherDeepReferencesFromTree;
 exports.generateDefaultDataSourceForPrebindingDefinition = generateDefaultDataSourceForPrebindingDefinition;
 exports.generateRandomId = generateRandomId;
 exports.getActiveBreakpointIndex = getActiveBreakpointIndex;
-exports.getBreakpointRegistration = getBreakpointRegistration;
 exports.getDataFromTree = getDataFromTree;
 exports.getDesignTokenRegistration = getDesignTokenRegistration;
 exports.getElementCoordinates = getElementCoordinates;
@@ -5346,7 +5371,6 @@ exports.parseCSSValue = parseCSSValue;
 exports.parseDataSourcePathIntoFieldset = parseDataSourcePathIntoFieldset;
 exports.parseDataSourcePathWithL1DeepBindings = parseDataSourcePathWithL1DeepBindings;
 exports.referencesOf = referencesOf;
-exports.resetBreakpointsRegistry = resetBreakpointsRegistry;
 exports.resetDesignTokenRegistry = resetDesignTokenRegistry;
 exports.resolveBackgroundImageBinding = resolveBackgroundImageBinding;
 exports.resolveHyperlinkPattern = resolveHyperlinkPattern;