@contentful/experiences-visual-editor-react 1.39.0-alpha-20250528T1342-e28bc3d.0 → 1.39.0-alpha-20250603T1404-5a5eb4e.0

package/dist/renderApp.js

@@ -35291,6 +35291,40 @@ function baseToString(value) {
   return (result == '0' && (1 / value) == -INFINITY$1) ? '-0' : result;
 }
 
+/** Used to match a single whitespace character. */
+var reWhitespace = /\s/;
+
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -35321,6 +35355,65 @@ function isObject(value) {
   return value != null && (type == 'object' || type == 'function');
 }
 
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
 /**
  * This method returns the first argument it receives.
  *
@@ -35812,7 +35905,7 @@ function copyObject(source, props, object, customizer) {
 }
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max;
+var nativeMax$1 = Math.max;
 
 /**
  * A specialized version of `baseRest` which transforms the rest array.
@@ -35824,11 +35917,11 @@ var nativeMax = Math.max;
  * @returns {Function} Returns the new function.
  */
 function overRest(func, start, transform) {
-  start = nativeMax(start === undefined ? (func.length - 1) : start, 0);
+  start = nativeMax$1(start === undefined ? (func.length - 1) : start, 0);
   return function() {
     var args = arguments,
         index = -1,
-        length = nativeMax(args.length - start, 0),
+        length = nativeMax$1(args.length - start, 0),
         array = Array(length);
 
     while (++index < length) {
@@ -36768,7 +36861,7 @@ MapCache.prototype.has = mapCacheHas;
 MapCache.prototype.set = mapCacheSet;
 
 /** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
+var FUNC_ERROR_TEXT$1 = 'Expected a function';
 
 /**
  * Creates a function that memoizes the result of `func`. If `resolver` is
@@ -36816,7 +36909,7 @@ var FUNC_ERROR_TEXT = 'Expected a function';
  */
 function memoize(func, resolver) {
   if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {
-    throw new TypeError(FUNC_ERROR_TEXT);
+    throw new TypeError(FUNC_ERROR_TEXT$1);
   }
   var memoized = function() {
     var args = arguments,
@@ -38433,6 +38526,212 @@ function baseIsEqual(value, other, bitmask, customizer, stack) {
   return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);
 }
 
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now = function() {
+  return root.Date.now();
+};
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+
+  function debounced() {
+    var time = now(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
 /**
  * Gets the last element of `array`.
  *
@@ -38710,6 +39009,7 @@ const OUTGOING_EVENTS = {
     OutsideCanvasClick: 'outsideCanvasClick',
     SDKFeatures: 'sdkFeatures',
     RequestEntities: 'REQUEST_ENTITIES',
+    CanvasGeometryUpdated: 'canvasGeometryUpdated',
 };
 const INCOMING_EVENTS$1 = {
     RequestEditorMode: 'requestEditorMode',
@@ -44712,17 +45012,16 @@ const PrimitiveValueSchema$1 = z.union([
     z.record(z.any(), z.any()),
     z.undefined(),
 ]);
+const UsedComponentsSchema$1 = z.array(z.object({
+    sys: z.object({
+        type: z.literal('Link'),
+        id: z.string(),
+        linkType: z.literal('Entry'),
+    }),
+}));
 const uuidKeySchema$1 = 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$1 = z
-    .string()
-    .regex(/^[a-zA-Z0-9-_]{1,54}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,54}$/' });
 const DataSourceSchema$1 = z.record(uuidKeySchema$1, z.object({
     sys: z.object({
         type: z.literal('Link'),
@@ -44730,7 +45029,62 @@ const DataSourceSchema$1 = z.record(uuidKeySchema$1, z.object({
         linkType: z.enum(['Entry', 'Asset']),
     }),
 }));
+const UnboundValuesSchema$1 = z.record(uuidKeySchema$1, z.object({
+    value: PrimitiveValueSchema$1,
+}));
+/**
+ * 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-variable-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$1 = z
+    .string()
+    .regex(/^[a-zA-Z0-9-_]{1,54}$/, { message: 'Does not match /^[a-zA-Z0-9-_]{1,54}$/' });
+const ComponentTreeNodeIdSchema$1 = z
+    .string()
+    .regex(/^[a-zA-Z0-9]{1,8}$/, { message: 'Does not match /^[a-zA-Z0-9]{1,8}$/' });
+const breakpointsRefinement$1 = (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 ValuesByBreakpointSchema$1 = z.record(z.lazy(() => PrimitiveValueSchema$1));
+const BindingSourceTypeEnumSchema$1 = z
+    .array(z.enum(['entry', 'asset', 'manual', 'experience']))
+    .nonempty();
 const DesignValueSchema$1 = z
     .object({
     type: z.literal('DesignValue'),
@@ -44763,8 +45117,6 @@ const ComponentValueSchema$1 = z
     key: z.string(),
 })
     .strict();
-// TODO: finalize schema structure before release
-// https://contentful.atlassian.net/browse/LUMOS-523
 const NoValueSchema$1 = z.object({ type: z.literal('NoValue') }).strict();
 const ComponentPropertyValueSchema$1 = z.discriminatedUnion('type', [
     DesignValueSchema$1,
@@ -44776,41 +45128,12 @@ const ComponentPropertyValueSchema$1 = z.discriminatedUnion('type', [
 ]);
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
-const VariableMappingSchema$1 = z.object({
-    patternPropertyDefinitionId: propertyKeySchema$1,
-    type: z.literal('ContentTypeMapping'),
-    pathsByContentType: z.record(z.string(), z.object({ path: z.string() })),
-});
-const VariableMappingsSchema$1 = z.record(propertyKeySchema$1, VariableMappingSchema$1);
-// TODO: finalize schema structure before release
-// https://contentful.atlassian.net/browse/LUMOS-523
-const PatternPropertyDefinitionSchema$1 = z.object({
-    defaultValue: z
-        .record(z.string(), z.object({
-        sys: z.object({
-            type: z.literal('Link'),
-            id: z.string(),
-            linkType: z.enum(['Entry']),
-        }),
-    }))
-        .optional(),
-    contentTypes: z.record(z.string(), z.object({
-        sys: z.object({
-            type: z.literal('Link'),
-            id: z.string(),
-            linkType: z.enum(['ContentType']),
-        }),
-    })),
-});
-const PatternPropertyDefinitionsSchema$1 = z.record(propertyKeySchema$1, PatternPropertyDefinitionSchema$1);
-// TODO: finalize schema structure before release
-// https://contentful.atlassian.net/browse/LUMOS-523
 const PatternPropertySchema$1 = z.object({
     type: z.literal('BoundValue'),
     path: z.string(),
     contentType: z.string(),
 });
-const PatternPropertysSchema$1 = z.record(propertyKeySchema$1, PatternPropertySchema$1);
+const PatternPropertiesSchema$1 = z.record(propertyKeySchema$1, PatternPropertySchema$1);
 const BreakpointSchema$1 = z
     .object({
     id: propertyKeySchema$1,
@@ -44820,12 +45143,6 @@ const BreakpointSchema$1 = z
     displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
 })
     .strict();
-const UnboundValuesSchema$1 = z.record(uuidKeySchema$1, z.object({
-    value: PrimitiveValueSchema$1,
-}));
-const ComponentTreeNodeIdSchema$1 = z
-    .string()
-    .regex(/^[a-zA-Z0-9]{1,8}$/, { message: 'Does not match /^[a-zA-Z0-9]{1,8}$/' });
 // Use helper schema to define a recursive schema with its type correctly below
 const BaseComponentTreeNodeSchema$1 = z.object({
     id: ComponentTreeNodeIdSchema$1.optional(),
@@ -44833,14 +45150,8 @@ const BaseComponentTreeNodeSchema$1 = z.object({
     displayName: z.string().optional(),
     slotId: z.string().optional(),
     variables: z.record(propertyKeySchema$1, ComponentPropertyValueSchema$1),
-    patternProperties: PatternPropertysSchema$1.optional(),
-});
-const ComponentTreeNodeSchema$1 = BaseComponentTreeNodeSchema$1.extend({
-    children: z.lazy(() => ComponentTreeNodeSchema$1.array()),
+    patternProperties: PatternPropertiesSchema$1.optional(),
 });
-const BindingSourceTypeEnumSchema$1 = z
-    .array(z.enum(['entry', 'asset', 'manual', 'experience']))
-    .nonempty();
 const ComponentVariableSchema$1 = z.object({
     displayName: z.string().optional(),
     type: DefinitionPropertyTypeSchema$1,
@@ -44861,8 +45172,25 @@ const ComponentVariableSchema$1 = z.object({
     })
         .optional(),
 });
-const ComponentVariablesSchema$1 = 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
-ComponentVariableSchema$1);
+const ComponentTreeNodeSchema$1 = BaseComponentTreeNodeSchema$1.extend({
+    children: z.lazy(() => ComponentTreeNodeSchema$1.array()),
+});
+const ComponentTreeSchema$1 = z
+    .object({
+    breakpoints: z.array(BreakpointSchema$1).superRefine(breakpointsRefinement$1),
+    children: z.array(ComponentTreeNodeSchema$1),
+    schemaVersion: SchemaVersions$1,
+})
+    .strict();
+const localeWrapper$1 = (fieldSchema) => z.record(z.string(), fieldSchema);
+
+z.object({
+    componentTree: localeWrapper$1(ComponentTreeSchema$1),
+    dataSource: localeWrapper$1(DataSourceSchema$1),
+    unboundValues: localeWrapper$1(UnboundValuesSchema$1),
+    usedComponents: localeWrapper$1(UsedComponentsSchema$1).optional(),
+});
+
 const THUMBNAIL_IDS$1 = [
     'columns',
     'columnsPlusRight',
@@ -44888,72 +45216,50 @@ const THUMBNAIL_IDS$1 = [
     'textColumns',
     'duplex',
 ];
-const ComponentSettingsSchema$1 = z.object({
-    variableDefinitions: ComponentVariablesSchema$1,
-    thumbnailId: z.enum(THUMBNAIL_IDS$1).optional(),
-    category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
-    variableMappings: VariableMappingsSchema$1.optional(),
-    patternPropertyDefinitions: PatternPropertyDefinitionsSchema$1.optional(),
-});
-const UsedComponentsSchema$1 = z.array(z.object({
-    sys: z.object({
-        type: z.literal('Link'),
-        id: z.string(),
-        linkType: z.literal('Entry'),
-    }),
-}));
-const breakpointsRefinement$1 = (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 ComponentTreeSchema$1 = z
-    .object({
-    breakpoints: z.array(BreakpointSchema$1).superRefine(breakpointsRefinement$1),
-    children: z.array(ComponentTreeNodeSchema$1),
-    schemaVersion: SchemaVersions$1,
-})
-    .strict();
-const localeWrapper$1 = (fieldSchema) => z.record(z.string(), fieldSchema);
+// TODO: finalize schema structure before release
+// https://contentful.atlassian.net/browse/LUMOS-523
+const VariableMappingSchema$1 = z.object({
+    patternPropertyDefinitionId: propertyKeySchema$1,
+    type: z.literal('ContentTypeMapping'),
+    pathsByContentType: z.record(z.string(), z.object({ path: z.string() })),
+});
+// TODO: finalize schema structure before release
+// https://contentful.atlassian.net/browse/LUMOS-523
+const PatternPropertyDefinitionSchema$1 = z.object({
+    defaultValue: z
+        .record(z.string(), z.object({
+        sys: z.object({
+            type: z.literal('Link'),
+            id: z.string(),
+            linkType: z.enum(['Entry']),
+        }),
+    }))
+        .optional(),
+    contentTypes: z.record(z.string(), z.object({
+        sys: z.object({
+            type: z.literal('Link'),
+            id: z.string(),
+            linkType: z.enum(['ContentType']),
+        }),
+    })),
+});
+const PatternPropertyDefinitionsSchema$1 = z.record(propertyKeySchema$1, PatternPropertyDefinitionSchema$1);
+const VariableMappingsSchema$1 = z.record(propertyKeySchema$1, VariableMappingSchema$1);
+const ComponentVariablesSchema$1 = 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
+ComponentVariableSchema$1);
+const ComponentSettingsSchema$1 = z.object({
+    variableDefinitions: ComponentVariablesSchema$1,
+    thumbnailId: z.enum(THUMBNAIL_IDS$1).optional(),
+    category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
+    variableMappings: VariableMappingsSchema$1.optional(),
+    patternPropertyDefinitions: PatternPropertyDefinitionsSchema$1.optional(),
+});
 z.object({
     componentTree: localeWrapper$1(ComponentTreeSchema$1),
     dataSource: localeWrapper$1(DataSourceSchema$1),
     unboundValues: localeWrapper$1(UnboundValuesSchema$1),
     usedComponents: localeWrapper$1(UsedComponentsSchema$1).optional(),
-    componentSettings: localeWrapper$1(ComponentSettingsSchema$1).optional(),
+    componentSettings: localeWrapper$1(ComponentSettingsSchema$1),
 });
 
 z.object({
@@ -45237,6 +45543,51 @@ let DebugLogger$1 = class DebugLogger {
 DebugLogger$1.instance = null;
 DebugLogger$1.getInstance();
 
+const findOutermostCoordinates = (first, second) => {
+    return {
+        top: Math.min(first.top, second.top),
+        right: Math.max(first.right, second.right),
+        bottom: Math.max(first.bottom, second.bottom),
+        left: Math.min(first.left, second.left),
+    };
+};
+const getElementCoordinates = (element) => {
+    const rect = element.getBoundingClientRect();
+    /**
+     * If element does not have children, or element has it's own width or height,
+     * return the element's coordinates.
+     */
+    if (element.children.length === 0 || rect.width !== 0 || rect.height !== 0) {
+        return rect;
+    }
+    const rects = [];
+    /**
+     * If element has children, or element does not have it's own width and height,
+     * we find the cordinates of the children, and assume the outermost coordinates of the children
+     * as the coordinate of the element.
+     *
+     * E.g child1 => {top: 2, bottom: 3, left: 4, right: 6} & child2 => {top: 1, bottom: 8, left: 12, right: 24}
+     * The final assumed coordinates of the element would be => { top: 1, right: 24, bottom: 8, left: 4 }
+     */
+    for (const child of element.children) {
+        const childRect = getElementCoordinates(child);
+        if (childRect.width !== 0 || childRect.height !== 0) {
+            const { top, right, bottom, left } = childRect;
+            rects.push({ top, right, bottom, left });
+        }
+    }
+    if (rects.length === 0) {
+        return rect;
+    }
+    const { top, right, bottom, left } = rects.reduce(findOutermostCoordinates);
+    return DOMRect.fromRect({
+        x: left,
+        y: top,
+        height: bottom - top,
+        width: right - left,
+    });
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isLinkToAsset = (variable) => {
     if (!variable)
@@ -48097,17 +48448,16 @@ const PrimitiveValueSchema = z.union([
     z.record(z.any(), z.any()),
     z.undefined(),
 ]);
+const UsedComponentsSchema = z.array(z.object({
+    sys: z.object({
+        type: z.literal('Link'),
+        id: z.string(),
+        linkType: z.literal('Entry'),
+    }),
+}));
 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'),
@@ -48115,7 +48465,62 @@ const DataSourceSchema = z.record(uuidKeySchema, z.object({
         linkType: z.enum(['Entry', 'Asset']),
     }),
 }));
+const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
+    value: PrimitiveValueSchema,
+}));
+/**
+ * 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-variable-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 ComponentTreeNodeIdSchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9]{1,8}$/, { message: 'Does not match /^[a-zA-Z0-9]{1,8}$/' });
+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 ValuesByBreakpointSchema = z.record(z.lazy(() => PrimitiveValueSchema));
+const BindingSourceTypeEnumSchema = z
+    .array(z.enum(['entry', 'asset', 'manual', 'experience']))
+    .nonempty();
 const DesignValueSchema = z
     .object({
     type: z.literal('DesignValue'),
@@ -48148,8 +48553,6 @@ const ComponentValueSchema = z
     key: z.string(),
 })
     .strict();
-// TODO: finalize schema structure before release
-// https://contentful.atlassian.net/browse/LUMOS-523
 const NoValueSchema = z.object({ type: z.literal('NoValue') }).strict();
 const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
     DesignValueSchema,
@@ -48161,41 +48564,12 @@ const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
 ]);
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
-const VariableMappingSchema = z.object({
-    patternPropertyDefinitionId: propertyKeySchema,
-    type: z.literal('ContentTypeMapping'),
-    pathsByContentType: z.record(z.string(), z.object({ path: z.string() })),
-});
-const VariableMappingsSchema = z.record(propertyKeySchema, VariableMappingSchema);
-// TODO: finalize schema structure before release
-// https://contentful.atlassian.net/browse/LUMOS-523
-const PatternPropertyDefinitionSchema = z.object({
-    defaultValue: z
-        .record(z.string(), z.object({
-        sys: z.object({
-            type: z.literal('Link'),
-            id: z.string(),
-            linkType: z.enum(['Entry']),
-        }),
-    }))
-        .optional(),
-    contentTypes: z.record(z.string(), z.object({
-        sys: z.object({
-            type: z.literal('Link'),
-            id: z.string(),
-            linkType: z.enum(['ContentType']),
-        }),
-    })),
-});
-const PatternPropertyDefinitionsSchema = z.record(propertyKeySchema, PatternPropertyDefinitionSchema);
-// TODO: finalize schema structure before release
-// https://contentful.atlassian.net/browse/LUMOS-523
 const PatternPropertySchema = z.object({
     type: z.literal('BoundValue'),
     path: z.string(),
     contentType: z.string(),
 });
-const PatternPropertysSchema = z.record(propertyKeySchema, PatternPropertySchema);
+const PatternPropertiesSchema = z.record(propertyKeySchema, PatternPropertySchema);
 const BreakpointSchema = z
     .object({
     id: propertyKeySchema,
@@ -48205,12 +48579,6 @@ const BreakpointSchema = z
     displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
 })
     .strict();
-const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
-    value: PrimitiveValueSchema,
-}));
-const ComponentTreeNodeIdSchema = z
-    .string()
-    .regex(/^[a-zA-Z0-9]{1,8}$/, { message: 'Does not match /^[a-zA-Z0-9]{1,8}$/' });
 // Use helper schema to define a recursive schema with its type correctly below
 const BaseComponentTreeNodeSchema = z.object({
     id: ComponentTreeNodeIdSchema.optional(),
@@ -48218,14 +48586,8 @@ const BaseComponentTreeNodeSchema = z.object({
     displayName: z.string().optional(),
     slotId: z.string().optional(),
     variables: z.record(propertyKeySchema, ComponentPropertyValueSchema),
-    patternProperties: PatternPropertysSchema.optional(),
-});
-const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
-    children: z.lazy(() => ComponentTreeNodeSchema.array()),
+    patternProperties: PatternPropertiesSchema.optional(),
 });
-const BindingSourceTypeEnumSchema = z
-    .array(z.enum(['entry', 'asset', 'manual', 'experience']))
-    .nonempty();
 const ComponentVariableSchema = z.object({
     displayName: z.string().optional(),
     type: DefinitionPropertyTypeSchema,
@@ -48246,8 +48608,25 @@ const ComponentVariableSchema = z.object({
     })
         .optional(),
 });
-const ComponentVariablesSchema = 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
-ComponentVariableSchema);
+const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
+    children: z.lazy(() => ComponentTreeNodeSchema.array()),
+});
+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(),
+});
+
 const THUMBNAIL_IDS = [
     'columns',
     'columnsPlusRight',
@@ -48273,6 +48652,37 @@ const THUMBNAIL_IDS = [
     'textColumns',
     'duplex',
 ];
+// TODO: finalize schema structure before release
+// https://contentful.atlassian.net/browse/LUMOS-523
+const VariableMappingSchema = z.object({
+    patternPropertyDefinitionId: propertyKeySchema,
+    type: z.literal('ContentTypeMapping'),
+    pathsByContentType: z.record(z.string(), z.object({ path: z.string() })),
+});
+// TODO: finalize schema structure before release
+// https://contentful.atlassian.net/browse/LUMOS-523
+const PatternPropertyDefinitionSchema = z.object({
+    defaultValue: z
+        .record(z.string(), z.object({
+        sys: z.object({
+            type: z.literal('Link'),
+            id: z.string(),
+            linkType: z.enum(['Entry']),
+        }),
+    }))
+        .optional(),
+    contentTypes: z.record(z.string(), z.object({
+        sys: z.object({
+            type: z.literal('Link'),
+            id: z.string(),
+            linkType: z.enum(['ContentType']),
+        }),
+    })),
+});
+const PatternPropertyDefinitionsSchema = z.record(propertyKeySchema, PatternPropertyDefinitionSchema);
+const VariableMappingsSchema = z.record(propertyKeySchema, VariableMappingSchema);
+const ComponentVariablesSchema = 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
+ComponentVariableSchema);
 const ComponentSettingsSchema = z.object({
     variableDefinitions: ComponentVariablesSchema,
     thumbnailId: z.enum(THUMBNAIL_IDS).optional(),
@@ -48280,65 +48690,12 @@ const ComponentSettingsSchema = z.object({
     variableMappings: VariableMappingsSchema.optional(),
     patternPropertyDefinitions: PatternPropertyDefinitionsSchema.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 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(),
+    componentSettings: localeWrapper(ComponentSettingsSchema),
 });
 
 z.object({
@@ -49132,18 +49489,115 @@ const EmptyCanvasMessage = () => {
         React$1.createElement("span", { className: styles['empty-canvas-label'] }, "Add components to begin")));
 };
 
+/**
+ * This function gets the element co-ordinates of a specified component in the DOM and its parent
+ * and sends the DOM Rect to the client app.
+ */
+const sendCanvasGeometryUpdatedMessage = async (tree, sourceEvent) => {
+    const nodeToCoordinatesMap = {};
+    await waitForAllImagesToBeLoaded();
+    collectNodeCoordinates(tree.root, nodeToCoordinatesMap);
+    sendMessage(OUTGOING_EVENTS.CanvasGeometryUpdated, {
+        size: {
+            width: document.documentElement.scrollWidth,
+            height: document.documentElement.scrollHeight,
+        },
+        nodes: nodeToCoordinatesMap,
+        sourceEvent,
+    });
+};
+const collectNodeCoordinates = (node, nodeToCoordinatesMap) => {
+    const selectedElement = document.querySelector(`[data-cf-node-id="${node.data.id}"]`);
+    if (selectedElement) {
+        const rect = getElementCoordinates(selectedElement);
+        nodeToCoordinatesMap[node.data.id] = {
+            coordinates: {
+                x: rect.x + window.scrollX,
+                y: rect.y + window.scrollY,
+                width: rect.width,
+                height: rect.height,
+            },
+        };
+    }
+    node.children.forEach((child) => collectNodeCoordinates(child, nodeToCoordinatesMap));
+};
+const waitForAllImagesToBeLoaded = () => {
+    // If the document contains an image, wait for this image to be loaded before collecting & sending all geometry data.
+    const allImageNodes = document.querySelectorAll('img');
+    return Promise.all(Array.from(allImageNodes).map((imageNode) => {
+        if (imageNode.complete) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve, reject) => {
+            const handleImageLoad = (event) => {
+                imageNode.removeEventListener('load', handleImageLoad);
+                imageNode.removeEventListener('error', handleImageLoad);
+                if (event.type === 'error') {
+                    console.warn('Image failed to load:', imageNode);
+                    reject();
+                }
+                else {
+                    resolve();
+                }
+            };
+            imageNode.addEventListener('load', handleImageLoad);
+            imageNode.addEventListener('error', handleImageLoad);
+        });
+    }));
+};
+
+const useCanvasGeometryUpdates = ({ tree, rootContainerRef, }) => {
+    const debouncedUpdateGeometry = reactExports.useMemo(() => debounce((tree, sourceEvent) => {
+        // When the DOM changed, we still need to wait for the next frame to ensure that
+        // rendering is complete (e.g. this is required when deleting a node).
+        window.requestAnimationFrame(() => {
+            sendCanvasGeometryUpdatedMessage(tree, sourceEvent);
+        });
+    }, 100, {
+        leading: true,
+        // To be sure, we recalculate it at the end of the frame again. Though, we couldn't
+        // yet show the need for this. So we might be able to drop this later to boost performance.
+        trailing: true,
+    }), []);
+    // Store tree in a ref to avoid the need to deactivate & reactivate the mutation observer
+    // when the tree changes. This is important to avoid missing out on some mutation events.
+    const treeRef = reactExports.useRef(tree);
+    reactExports.useEffect(() => {
+        treeRef.current = tree;
+    }, [tree]);
+    // Handling window resize events
+    reactExports.useEffect(() => {
+        const resizeEventListener = () => debouncedUpdateGeometry(treeRef.current, 'resize');
+        window.addEventListener('resize', resizeEventListener);
+        return () => window.removeEventListener('resize', resizeEventListener);
+    }, [debouncedUpdateGeometry]);
+    // Handling DOM mutations
+    reactExports.useEffect(() => {
+        if (!rootContainerRef.current)
+            return;
+        const observer = new MutationObserver(() => debouncedUpdateGeometry(treeRef.current, 'mutation'));
+        observer.observe(rootContainerRef.current, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+        });
+        return () => observer.disconnect();
+    }, [debouncedUpdateGeometry, rootContainerRef]);
+};
+
 const RootRenderer = () => {
+    const rootContainerRef = reactExports.useRef(null);
+    const tree = useTreeStore((state) => state.tree);
+    useCanvasGeometryUpdates({ tree, rootContainerRef });
     useEditorSubscriber();
     const breakpoints = useTreeStore((state) => state.breakpoints);
-    const containerRef = reactExports.useRef(null);
     const { resolveDesignValue } = useBreakpoints(breakpoints);
-    const tree = useTreeStore((state) => state.tree);
     // If the root blockId is defined but not the default string, it is the entry ID
     // of the experience/ pattern to properly detect circular dependencies.
     const rootBlockId = tree.root.data.blockId ?? ROOT_ID;
     const wrappingPatternIds = rootBlockId !== ROOT_ID ? new Set([rootBlockId]) : new Set();
     return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement("div", { "data-ctfl-root": true, className: styles$2.rootContainer, ref: containerRef }, !tree.root.children.length ? (React$1.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React$1.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds })))))));
+        React$1.createElement("div", { "data-ctfl-root": true, className: styles$2.rootContainer, ref: rootContainerRef }, !tree.root.children.length ? (React$1.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React$1.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds })))))));
 };
 
 const useInitializeEditor = () => {