@builder.io/sdk-qwik 0.17.6 → 0.17.8

package/lib/browser/blocks/custom-code/custom-code.qwik.cjs

@@ -7,7 +7,7 @@ const CustomCode = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
     scriptsInserted: [],
     scriptsRun: []
   });
-  qwik.useOn("qvisible", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
+  qwik.useOn("readystatechange", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
     const [state2] = qwik.useLexicalScope();
     if (!(element == null ? void 0 : element.getElementsByTagName) || typeof window === "undefined")
       return;

package/lib/browser/blocks/custom-code/custom-code.qwik.mjs

@@ -5,7 +5,7 @@ const CustomCode = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     scriptsInserted: [],
     scriptsRun: []
   });
-  useOn("qvisible", /* @__PURE__ */ inlinedQrl((event, element) => {
+  useOn("readystatechange", /* @__PURE__ */ inlinedQrl((event, element) => {
     const [state2] = useLexicalScope();
     if (!(element == null ? void 0 : element.getElementsByTagName) || typeof window === "undefined")
       return;

package/lib/browser/components/block/components/block-styles.qwik.cjs

@@ -21,15 +21,17 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     props
   ]));
   const css$1 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const [props2] = qwik.useLexicalScope();
     const processedBlock = props2.block;
     const styles = processedBlock.responsiveStyles;
     const content = props2.context.content;
     const sizesWithUpdatedBreakpoints = deviceSizes.getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
+    const contentHasXSmallBreakpoint = Boolean((_c = (_b = content == null ? void 0 : content.meta) == null ? void 0 : _b.breakpoints) == null ? void 0 : _c.xsmall);
     const largeStyles = styles == null ? void 0 : styles.large;
     const mediumStyles = styles == null ? void 0 : styles.medium;
     const smallStyles = styles == null ? void 0 : styles.small;
+    const xsmallStyles = styles == null ? void 0 : styles.xsmall;
     const className = processedBlock.id;
     if (!className)
       return "";
@@ -47,10 +49,15 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       styles: smallStyles,
       mediaQuery: deviceSizes.getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? css.createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: deviceSizes.getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
-      const hoverStyles = ((_c = (_b = hoverAnimation.steps) == null ? void 0 : _b[1]) == null ? void 0 : _c.styles) || {};
+      const hoverStyles = ((_e = (_d = hoverAnimation.steps) == null ? void 0 : _d[1]) == null ? void 0 : _e.styles) || {};
       hoverStylesClass = css.createCssClass({
         className: `${className}:hover`,
         styles: {
@@ -64,6 +71,7 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   }, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [

package/lib/browser/components/block/components/block-styles.qwik.mjs

@@ -19,15 +19,17 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     props
   ]));
   const css = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const [props2] = useLexicalScope();
     const processedBlock = props2.block;
     const styles = processedBlock.responsiveStyles;
     const content = props2.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
+    const contentHasXSmallBreakpoint = Boolean((_c = (_b = content == null ? void 0 : content.meta) == null ? void 0 : _b.breakpoints) == null ? void 0 : _c.xsmall);
     const largeStyles = styles == null ? void 0 : styles.large;
     const mediumStyles = styles == null ? void 0 : styles.medium;
     const smallStyles = styles == null ? void 0 : styles.small;
+    const xsmallStyles = styles == null ? void 0 : styles.xsmall;
     const className = processedBlock.id;
     if (!className)
       return "";
@@ -45,10 +47,15 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       styles: smallStyles,
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
-      const hoverStyles = ((_c = (_b = hoverAnimation.steps) == null ? void 0 : _b[1]) == null ? void 0 : _c.styles) || {};
+      const hoverStyles = ((_e = (_d = hoverAnimation.steps) == null ? void 0 : _d[1]) == null ? void 0 : _e.styles) || {};
       hoverStylesClass = createCssClass({
         className: `${className}:hover`,
         styles: {
@@ -62,6 +69,7 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   }, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [

package/lib/browser/components/blocks/blocks-wrapper.qwik.cjs

@@ -41,8 +41,9 @@ const BlocksWrapper = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
     const [props2] = qwik.useLexicalScope();
     if (!props2.path)
       return void 0;
+    const thisPrefix = "this.";
     const pathPrefix = "component.options.";
-    return props2.path.startsWith(pathPrefix) ? props2.path : `${pathPrefix}${props2.path || ""}`;
+    return props2.path.startsWith(thisPrefix) ? props2.path.replace(thisPrefix, "") : props2.path.startsWith(pathPrefix) ? props2.path : `${pathPrefix}${props2.path || ""}`;
   }, "BlocksWrapper_component_dataPath_useComputed_csBNeJbWH7k", [
     props
   ]));

package/lib/browser/components/blocks/blocks-wrapper.qwik.mjs

@@ -39,8 +39,9 @@ const BlocksWrapper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     const [props2] = useLexicalScope();
     if (!props2.path)
       return void 0;
+    const thisPrefix = "this.";
     const pathPrefix = "component.options.";
-    return props2.path.startsWith(pathPrefix) ? props2.path : `${pathPrefix}${props2.path || ""}`;
+    return props2.path.startsWith(thisPrefix) ? props2.path.replace(thisPrefix, "") : props2.path.startsWith(pathPrefix) ? props2.path : `${pathPrefix}${props2.path || ""}`;
   }, "BlocksWrapper_component_dataPath_useComputed_csBNeJbWH7k", [
     props
   ]));

package/lib/browser/components/content/components/enable-editor.qwik.cjs

@@ -211,7 +211,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     showContentProps,
     state
   ]));
-  qwik.useOn("qvisible", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
+  qwik.useOnDocument("readystatechange", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
     var _a2, _b2, _c, _d;
     const [props2] = qwik.useLexicalScope();
     if (isBrowser.isBrowser()) {
@@ -238,7 +238,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
           element.dispatchEvent(new CustomEvent("initpreviewingbldr"));
       }
     }
-  }, "EnableEditor_component_useOn_2_FyR0YPSlJlw", [
+  }, "EnableEditor_component_useOnDocument_H7syEGJXM4Y", [
     props
   ]));
   qwik.useContextProvider(builder_context, props.builderContextSignal);

package/lib/browser/components/content/components/enable-editor.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxBranch, useComputedQrl, useLexicalScope, useSignal, useStore, useOn, useContextProvider, useTaskQrl, _jsxC, Slot, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxBranch, useComputedQrl, useLexicalScope, useSignal, useStore, useOn, useOnDocument, useContextProvider, useTaskQrl, _jsxC, Slot, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 import builderContext from "../../../context/builder.context.qwik.mjs";
 import { evaluate } from "../../../functions/evaluate/evaluate.qwik.mjs";
@@ -209,7 +209,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     showContentProps,
     state
   ]));
-  useOn("qvisible", /* @__PURE__ */ inlinedQrl((event, element) => {
+  useOnDocument("readystatechange", /* @__PURE__ */ inlinedQrl((event, element) => {
     var _a2, _b2, _c, _d;
     const [props2] = useLexicalScope();
     if (isBrowser()) {
@@ -236,7 +236,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
           element.dispatchEvent(new CustomEvent("initpreviewingbldr"));
       }
     }
-  }, "EnableEditor_component_useOn_2_FyR0YPSlJlw", [
+  }, "EnableEditor_component_useOnDocument_H7syEGJXM4Y", [
     props
   ]));
   useContextProvider(builderContext, props.builderContextSignal);

package/lib/browser/constants/builder-registered-components.qwik.cjs

@@ -10,6 +10,11 @@ const componentInfo$2 = require("../blocks/fragment/component-info.qwik.cjs");
 const fragment = require("../blocks/fragment/fragment.qwik.cjs");
 const componentInfo$3 = require("../blocks/image/component-info.qwik.cjs");
 const image = require("../blocks/image/image.qwik.cjs");
+require("@builder.io/qwik");
+require("@builder.io/qwik/jsx-runtime");
+require("../context/builder.context.qwik.cjs");
+require("../context/components.context.qwik.cjs");
+require("@builder.io/qwik/build");
 const componentInfo$4 = require("../blocks/section/component-info.qwik.cjs");
 const section = require("../blocks/section/section.qwik.cjs");
 const componentInfo$5 = require("../blocks/slot/component-info.qwik.cjs");
@@ -54,6 +59,7 @@ const getDefaultRegisteredComponents = () => [
     component: text.Text,
     ...componentInfo$7.componentInfo
   },
+  ...[],
   ...[
     {
       component: tabs.Tabs,

package/lib/browser/constants/builder-registered-components.qwik.mjs

@@ -8,6 +8,11 @@ import { componentInfo as componentInfo$2 } from "../blocks/fragment/component-i
 import { FragmentComponent } from "../blocks/fragment/fragment.qwik.mjs";
 import { componentInfo as componentInfo$3 } from "../blocks/image/component-info.qwik.mjs";
 import { Image } from "../blocks/image/image.qwik.mjs";
+import "@builder.io/qwik";
+import "@builder.io/qwik/jsx-runtime";
+import "../context/builder.context.qwik.mjs";
+import "../context/components.context.qwik.mjs";
+import "@builder.io/qwik/build";
 import { componentInfo as componentInfo$4 } from "../blocks/section/component-info.qwik.mjs";
 import { SectionComponent } from "../blocks/section/section.qwik.mjs";
 import { componentInfo as componentInfo$5 } from "../blocks/slot/component-info.qwik.mjs";
@@ -52,6 +57,7 @@ const getDefaultRegisteredComponents = () => [
     component: Text,
     ...componentInfo$7
   },
+  ...[],
   ...[
     {
       component: Tabs,

package/lib/browser/constants/device-sizes.qwik.cjs

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fastClone = require("../functions/fast-clone.qwik.cjs");
 const SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -19,11 +24,22 @@ const SIZES = {
   }
 };
 const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-const getSizesForBreakpoints = ({ small, medium }) => {
+const getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone.fastClone(SIZES);
+  if (!breakpoints)
+    return newSizes;
+  const { xsmall, small, medium } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium)
     return newSizes;
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,

package/lib/browser/constants/device-sizes.qwik.mjs

@@ -1,7 +1,12 @@
 import { fastClone } from "../functions/fast-clone.qwik.mjs";
 const SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -17,11 +22,22 @@ const SIZES = {
   }
 };
 const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-const getSizesForBreakpoints = ({ small, medium }) => {
+const getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints)
+    return newSizes;
+  const { xsmall, small, medium } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium)
     return newSizes;
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,

package/lib/browser/constants/sdk-version.qwik.cjs

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const SDK_VERSION = "0.17.6";
+const SDK_VERSION = "0.17.8";
 exports.SDK_VERSION = SDK_VERSION;

package/lib/browser/constants/sdk-version.qwik.mjs

@@ -1,4 +1,4 @@
-const SDK_VERSION = "0.17.6";
+const SDK_VERSION = "0.17.8";
 export {
   SDK_VERSION
 };

package/lib/browser/helpers/canTrack.qwik.cjs

@@ -1,5 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const nullable = require("./nullable.qwik.cjs");
-const getDefaultCanTrack = (canTrack) => nullable.checkIsDefined(canTrack) ? canTrack : true;
+const userAttributes = require("./user-attributes.qwik.cjs");
+const getDefaultCanTrack = (canTrack) => {
+  const result = nullable.checkIsDefined(canTrack) ? canTrack : true;
+  userAttributes.userAttributesService.setCanTrack(result);
+  return result;
+};
 exports.getDefaultCanTrack = getDefaultCanTrack;

package/lib/browser/helpers/canTrack.qwik.mjs

@@ -1,5 +1,10 @@
 import { checkIsDefined } from "./nullable.qwik.mjs";
-const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
+import { userAttributesService } from "./user-attributes.qwik.mjs";
+const getDefaultCanTrack = (canTrack) => {
+  const result = checkIsDefined(canTrack) ? canTrack : true;
+  userAttributesService.setCanTrack(result);
+  return result;
+};
 export {
   getDefaultCanTrack
 };

package/lib/browser/helpers/user-attributes.qwik.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const isBrowser = require("../functions/is-browser.qwik.cjs");
+const cookie = require("./cookie.qwik.cjs");
+const USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
+function createUserAttributesService() {
+  let canTrack = true;
+  const subscribers = /* @__PURE__ */ new Set();
+  return {
+    setUserAttributes(newAttrs) {
+      if (!isBrowser.isBrowser())
+        return;
+      const userAttributes = {
+        ...this.getUserAttributes(),
+        ...newAttrs
+      };
+      cookie.setCookie({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        value: JSON.stringify(userAttributes),
+        canTrack
+      });
+      subscribers.forEach((callback) => callback(userAttributes));
+    },
+    getUserAttributes() {
+      if (!isBrowser.isBrowser())
+        return {};
+      return JSON.parse(cookie.getCookieSync({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        canTrack
+      }) || "{}");
+    },
+    subscribeOnUserAttributesChange(callback) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    },
+    setCanTrack(value) {
+      canTrack = value;
+    }
+  };
+}
+const userAttributesService = createUserAttributesService();
+const setClientUserAttributes = (attributes) => {
+  userAttributesService.setUserAttributes(attributes);
+};
+exports.USER_ATTRIBUTES_COOKIE_NAME = USER_ATTRIBUTES_COOKIE_NAME;
+exports.createUserAttributesService = createUserAttributesService;
+exports.setClientUserAttributes = setClientUserAttributes;
+exports.userAttributesService = userAttributesService;

package/lib/browser/helpers/user-attributes.qwik.mjs

@@ -0,0 +1,50 @@
+import { isBrowser } from "../functions/is-browser.qwik.mjs";
+import { setCookie, getCookieSync } from "./cookie.qwik.mjs";
+const USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
+function createUserAttributesService() {
+  let canTrack = true;
+  const subscribers = /* @__PURE__ */ new Set();
+  return {
+    setUserAttributes(newAttrs) {
+      if (!isBrowser())
+        return;
+      const userAttributes = {
+        ...this.getUserAttributes(),
+        ...newAttrs
+      };
+      setCookie({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        value: JSON.stringify(userAttributes),
+        canTrack
+      });
+      subscribers.forEach((callback) => callback(userAttributes));
+    },
+    getUserAttributes() {
+      if (!isBrowser())
+        return {};
+      return JSON.parse(getCookieSync({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        canTrack
+      }) || "{}");
+    },
+    subscribeOnUserAttributesChange(callback) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    },
+    setCanTrack(value) {
+      canTrack = value;
+    }
+  };
+}
+const userAttributesService = createUserAttributesService();
+const setClientUserAttributes = (attributes) => {
+  userAttributesService.setUserAttributes(attributes);
+};
+export {
+  USER_ATTRIBUTES_COOKIE_NAME,
+  createUserAttributesService,
+  setClientUserAttributes,
+  userAttributesService
+};

package/lib/browser/index.qwik.cjs

@@ -11,6 +11,7 @@ const video = require("./blocks/video/video.qwik.cjs");
 const blocks = require("./components/blocks/blocks.qwik.cjs");
 const contentVariants = require("./components/content-variants/content-variants.qwik.cjs");
 const builder_context = require("./context/builder.context.qwik.cjs");
+const userAttributes = require("./helpers/user-attributes.qwik.cjs");
 const isEditing = require("./functions/is-editing.qwik.cjs");
 const isPreviewing = require("./functions/is-previewing.qwik.cjs");
 const registerComponent = require("./functions/register-component.qwik.cjs");
@@ -32,6 +33,7 @@ exports.Video = video.Video;
 exports.Blocks = blocks.Blocks;
 exports.Content = contentVariants.ContentVariants;
 exports.BuilderContext = builder_context;
+exports.setClientUserAttributes = userAttributes.setClientUserAttributes;
 exports.isEditing = isEditing.isEditing;
 exports.isPreviewing = isPreviewing.isPreviewing;
 exports.createRegisterComponentMessage = registerComponent.createRegisterComponentMessage;

package/lib/browser/index.qwik.mjs

@@ -9,6 +9,7 @@ import { Video } from "./blocks/video/video.qwik.mjs";
 import { Blocks } from "./components/blocks/blocks.qwik.mjs";
 import { ContentVariants } from "./components/content-variants/content-variants.qwik.mjs";
 import { default as default2 } from "./context/builder.context.qwik.mjs";
+import { setClientUserAttributes } from "./helpers/user-attributes.qwik.mjs";
 import { isEditing } from "./functions/is-editing.qwik.mjs";
 import { isPreviewing } from "./functions/is-previewing.qwik.mjs";
 import { createRegisterComponentMessage } from "./functions/register-component.qwik.mjs";
@@ -40,6 +41,7 @@ export {
   isEditing,
   isPreviewing,
   register,
+  setClientUserAttributes,
   setEditorSettings,
   subscribeToEditor,
   track

package/lib/browser/scripts/init-editing.qwik.cjs

@@ -55,7 +55,9 @@ const setupBrowserForEditing = (options = {}) => {
         // Supports builder-model="..." attribute which is needed to
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
-        supportsCustomBreakpoints: true
+        supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: true,
+        blockLevelPersonalization: true
       }
     }, "*");
     (_b = window.parent) == null ? void 0 : _b.postMessage({

package/lib/browser/scripts/init-editing.qwik.mjs

@@ -53,7 +53,9 @@ const setupBrowserForEditing = (options = {}) => {
         // Supports builder-model="..." attribute which is needed to
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
-        supportsCustomBreakpoints: true
+        supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: true,
+        blockLevelPersonalization: true
       }
     }, "*");
     (_b = window.parent) == null ? void 0 : _b.postMessage({

package/lib/edge/blocks/custom-code/custom-code.qwik.cjs

@@ -7,7 +7,7 @@ const CustomCode = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
     scriptsInserted: [],
     scriptsRun: []
   });
-  qwik.useOn("qvisible", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
+  qwik.useOn("readystatechange", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
     const [state2] = qwik.useLexicalScope();
     if (!(element == null ? void 0 : element.getElementsByTagName) || typeof window === "undefined")
       return;

package/lib/edge/blocks/custom-code/custom-code.qwik.mjs

@@ -5,7 +5,7 @@ const CustomCode = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     scriptsInserted: [],
     scriptsRun: []
   });
-  useOn("qvisible", /* @__PURE__ */ inlinedQrl((event, element) => {
+  useOn("readystatechange", /* @__PURE__ */ inlinedQrl((event, element) => {
     const [state2] = useLexicalScope();
     if (!(element == null ? void 0 : element.getElementsByTagName) || typeof window === "undefined")
       return;

package/lib/edge/components/block/components/block-styles.qwik.cjs

@@ -21,15 +21,17 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     props
   ]));
   const css$1 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const [props2] = qwik.useLexicalScope();
     const processedBlock = props2.block;
     const styles = processedBlock.responsiveStyles;
     const content = props2.context.content;
     const sizesWithUpdatedBreakpoints = deviceSizes.getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
+    const contentHasXSmallBreakpoint = Boolean((_c = (_b = content == null ? void 0 : content.meta) == null ? void 0 : _b.breakpoints) == null ? void 0 : _c.xsmall);
     const largeStyles = styles == null ? void 0 : styles.large;
     const mediumStyles = styles == null ? void 0 : styles.medium;
     const smallStyles = styles == null ? void 0 : styles.small;
+    const xsmallStyles = styles == null ? void 0 : styles.xsmall;
     const className = processedBlock.id;
     if (!className)
       return "";
@@ -47,10 +49,15 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       styles: smallStyles,
       mediaQuery: deviceSizes.getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? css.createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: deviceSizes.getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
-      const hoverStyles = ((_c = (_b = hoverAnimation.steps) == null ? void 0 : _b[1]) == null ? void 0 : _c.styles) || {};
+      const hoverStyles = ((_e = (_d = hoverAnimation.steps) == null ? void 0 : _d[1]) == null ? void 0 : _e.styles) || {};
       hoverStylesClass = css.createCssClass({
         className: `${className}:hover`,
         styles: {
@@ -64,6 +71,7 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   }, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [

package/lib/edge/components/block/components/block-styles.qwik.mjs

@@ -19,15 +19,17 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     props
   ]));
   const css = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const [props2] = useLexicalScope();
     const processedBlock = props2.block;
     const styles = processedBlock.responsiveStyles;
     const content = props2.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
+    const contentHasXSmallBreakpoint = Boolean((_c = (_b = content == null ? void 0 : content.meta) == null ? void 0 : _b.breakpoints) == null ? void 0 : _c.xsmall);
     const largeStyles = styles == null ? void 0 : styles.large;
     const mediumStyles = styles == null ? void 0 : styles.medium;
     const smallStyles = styles == null ? void 0 : styles.small;
+    const xsmallStyles = styles == null ? void 0 : styles.xsmall;
     const className = processedBlock.id;
     if (!className)
       return "";
@@ -45,10 +47,15 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       styles: smallStyles,
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
-      const hoverStyles = ((_c = (_b = hoverAnimation.steps) == null ? void 0 : _b[1]) == null ? void 0 : _c.styles) || {};
+      const hoverStyles = ((_e = (_d = hoverAnimation.steps) == null ? void 0 : _d[1]) == null ? void 0 : _e.styles) || {};
       hoverStylesClass = createCssClass({
         className: `${className}:hover`,
         styles: {
@@ -62,6 +69,7 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   }, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [

package/lib/edge/components/blocks/blocks-wrapper.qwik.cjs

@@ -41,8 +41,9 @@ const BlocksWrapper = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
     const [props2] = qwik.useLexicalScope();
     if (!props2.path)
       return void 0;
+    const thisPrefix = "this.";
     const pathPrefix = "component.options.";
-    return props2.path.startsWith(pathPrefix) ? props2.path : `${pathPrefix}${props2.path || ""}`;
+    return props2.path.startsWith(thisPrefix) ? props2.path.replace(thisPrefix, "") : props2.path.startsWith(pathPrefix) ? props2.path : `${pathPrefix}${props2.path || ""}`;
   }, "BlocksWrapper_component_dataPath_useComputed_csBNeJbWH7k", [
     props
   ]));

package/lib/edge/components/blocks/blocks-wrapper.qwik.mjs

@@ -39,8 +39,9 @@ const BlocksWrapper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     const [props2] = useLexicalScope();
     if (!props2.path)
       return void 0;
+    const thisPrefix = "this.";
     const pathPrefix = "component.options.";
-    return props2.path.startsWith(pathPrefix) ? props2.path : `${pathPrefix}${props2.path || ""}`;
+    return props2.path.startsWith(thisPrefix) ? props2.path.replace(thisPrefix, "") : props2.path.startsWith(pathPrefix) ? props2.path : `${pathPrefix}${props2.path || ""}`;
   }, "BlocksWrapper_component_dataPath_useComputed_csBNeJbWH7k", [
     props
   ]));

package/lib/edge/components/content/components/enable-editor.qwik.cjs

@@ -211,7 +211,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     showContentProps,
     state
   ]));
-  qwik.useOn("qvisible", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
+  qwik.useOnDocument("readystatechange", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
     var _a2, _b2, _c, _d;
     const [props2] = qwik.useLexicalScope();
     if (isBrowser.isBrowser()) {
@@ -238,7 +238,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
           element.dispatchEvent(new CustomEvent("initpreviewingbldr"));
       }
     }
-  }, "EnableEditor_component_useOn_2_FyR0YPSlJlw", [
+  }, "EnableEditor_component_useOnDocument_H7syEGJXM4Y", [
     props
   ]));
   qwik.useContextProvider(builder_context, props.builderContextSignal);