@builder.io/sdk-qwik 0.17.7 → 0.18.0

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/blocks/symbol/symbol.qwik.cjs

@@ -85,7 +85,7 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
       },
       get model() {
         var _a2;
-        return (_a2 = props.symbol) == null ? void 0 : _a2.model;
+        return ((_a2 = props.symbol) == null ? void 0 : _a2.model) ?? "";
       },
       get content() {
         return state.contentToUse;
@@ -147,10 +147,10 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
         ], "p0.builderLinkComponent"),
         model: qwik._fnSignal((p0) => {
           var _a2;
-          return (_a2 = p0.symbol) == null ? void 0 : _a2.model;
+          return ((_a2 = p0.symbol) == null ? void 0 : _a2.model) ?? "";
         }, [
           props
-        ], "p0.symbol?.model"),
+        ], 'p0.symbol?.model??""'),
         nonce: qwik._fnSignal((p0) => p0.builderContext.nonce, [
           props
         ], "p0.builderContext.nonce")

package/lib/browser/blocks/symbol/symbol.qwik.mjs

@@ -83,7 +83,7 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
       },
       get model() {
         var _a2;
-        return (_a2 = props.symbol) == null ? void 0 : _a2.model;
+        return ((_a2 = props.symbol) == null ? void 0 : _a2.model) ?? "";
       },
       get content() {
         return state.contentToUse;
@@ -145,10 +145,10 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
         ], "p0.builderLinkComponent"),
         model: _fnSignal((p0) => {
           var _a2;
-          return (_a2 = p0.symbol) == null ? void 0 : _a2.model;
+          return ((_a2 = p0.symbol) == null ? void 0 : _a2.model) ?? "";
         }, [
           props
-        ], "p0.symbol?.model"),
+        ], 'p0.symbol?.model??""'),
         nonce: _fnSignal((p0) => p0.builderContext.nonce, [
           props
         ], "p0.builderContext.nonce")

package/lib/browser/blocks/video/video.qwik.cjs

@@ -34,6 +34,40 @@ const Video = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
   }, "Video_component_spreadProps_useComputed_ZdLsx18NYH4", [
     videoProps
   ]));
+  const videoRef = qwik.useSignal();
+  const state = qwik.useStore({
+    lazyVideoObserver: void 0
+  });
+  qwik.useVisibleTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2, state2, videoRef2] = qwik.useLexicalScope();
+    if (props2.lazyLoad) {
+      const oberver = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
+          if (!entry.isIntersecting)
+            return;
+          const videoElement = entry.target;
+          try {
+            Array.from(videoElement.children).filter((child) => child instanceof HTMLElement && child.tagName === "SOURCE").forEach((source) => {
+              const src = source.dataset.src;
+              if (src)
+                source.src = src;
+            });
+            videoElement.load();
+            oberver.unobserve(videoElement);
+          } catch (error) {
+            console.error("Error loading lazy video:", error);
+          }
+        });
+      });
+      if (videoRef2.value)
+        oberver.observe(videoRef2.value);
+      state2.lazyVideoObserver = oberver;
+    }
+  }, "Video_component_useVisibleTask_LdYTuni7vo4", [
+    props,
+    state,
+    videoRef
+  ]));
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
     style: {
       position: "relative"
@@ -41,12 +75,16 @@ const Video = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
   }, [
     /* @__PURE__ */ qwik._jsxS("video", {
       ...spreadProps.value,
-      children: !props.lazyLoad ? /* @__PURE__ */ qwik._jsxQ("source", null, {
-        src: qwik._fnSignal((p0) => p0.video, [
-          props
-        ], "p0.video"),
+      children: /* @__PURE__ */ qwik._jsxS("source", {
+        ...props.lazyLoad ? {
+          "data-src": props.video
+        } : {
+          src: props.video
+        }
+      }, {
         type: "video/mp4"
-      }, null, 3, "j7_0") : null,
+      }, 0, null),
+      ref: videoRef,
       style: {
         width: "100%",
         height: "100%",
@@ -65,12 +103,9 @@ const Video = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
       poster: qwik._fnSignal((p0) => p0.posterImage, [
         props
       ], "p0.posterImage"),
-      preload: qwik._fnSignal((p0) => p0.preload || "metadata", [
-        props
-      ], 'p0.preload||"metadata"'),
-      src: qwik._fnSignal((p0) => p0.video || "no-src", [
+      preload: qwik._fnSignal((p0) => p0.lazyLoad ? "none" : p0.preload || "metadata", [
         props
-      ], 'p0.video||"no-src"')
+      ], 'p0.lazyLoad?"none":p0.preload||"metadata"')
     }, 0, null),
     props.aspectRatio && !(props.fitContent && ((_c = (_b = props.builderBlock) == null ? void 0 : _b.children) == null ? void 0 : _c.length)) ? /* @__PURE__ */ qwik._jsxQ("div", null, {
       style: qwik._fnSignal((p0) => ({
@@ -81,14 +116,14 @@ const Video = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
       }), [
         props
       ], '{width:"100%",paddingTop:p0.aspectRatio*100+"%",pointerEvents:"none",fontSize:"0px"}')
-    }, null, 3, "j7_1") : null,
+    }, null, 3, "j7_0") : null,
     ((_e = (_d = props.builderBlock) == null ? void 0 : _d.children) == null ? void 0 : _e.length) && props.fitContent ? /* @__PURE__ */ qwik._jsxQ("div", null, {
       style: {
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch"
       }
-    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "j7_2"), 1, "j7_3") : null,
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "j7_1"), 1, "j7_2") : null,
     ((_g = (_f = props.builderBlock) == null ? void 0 : _f.children) == null ? void 0 : _g.length) && !props.fitContent ? /* @__PURE__ */ qwik._jsxQ("div", null, {
       style: {
         pointerEvents: "none",
@@ -101,8 +136,8 @@ const Video = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
         width: "100%",
         height: "100%"
       }
-    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "j7_4"), 1, "j7_5") : null
-  ], 1, "j7_6");
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "j7_3"), 1, "j7_4") : null
+  ], 1, "j7_5");
 }, "Video_component_qdcTZflYyoQ"));
 exports.Video = Video;
 exports.default = Video;

package/lib/browser/blocks/video/video.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxBranch, useComputedQrl, useLexicalScope, _jsxQ, _jsxS, _fnSignal, _jsxC, Slot } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxBranch, useComputedQrl, useLexicalScope, useSignal, useStore, useVisibleTaskQrl, _jsxQ, _jsxS, _fnSignal, _jsxC, Slot } from "@builder.io/qwik";
 const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   var _a, _b, _c, _d, _e, _f, _g;
   _jsxBranch();
@@ -32,6 +32,40 @@ const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   }, "Video_component_spreadProps_useComputed_ZdLsx18NYH4", [
     videoProps
   ]));
+  const videoRef = useSignal();
+  const state = useStore({
+    lazyVideoObserver: void 0
+  });
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, state2, videoRef2] = useLexicalScope();
+    if (props2.lazyLoad) {
+      const oberver = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
+          if (!entry.isIntersecting)
+            return;
+          const videoElement = entry.target;
+          try {
+            Array.from(videoElement.children).filter((child) => child instanceof HTMLElement && child.tagName === "SOURCE").forEach((source) => {
+              const src = source.dataset.src;
+              if (src)
+                source.src = src;
+            });
+            videoElement.load();
+            oberver.unobserve(videoElement);
+          } catch (error) {
+            console.error("Error loading lazy video:", error);
+          }
+        });
+      });
+      if (videoRef2.value)
+        oberver.observe(videoRef2.value);
+      state2.lazyVideoObserver = oberver;
+    }
+  }, "Video_component_useVisibleTask_LdYTuni7vo4", [
+    props,
+    state,
+    videoRef
+  ]));
   return /* @__PURE__ */ _jsxQ("div", null, {
     style: {
       position: "relative"
@@ -39,12 +73,16 @@ const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   }, [
     /* @__PURE__ */ _jsxS("video", {
       ...spreadProps.value,
-      children: !props.lazyLoad ? /* @__PURE__ */ _jsxQ("source", null, {
-        src: _fnSignal((p0) => p0.video, [
-          props
-        ], "p0.video"),
+      children: /* @__PURE__ */ _jsxS("source", {
+        ...props.lazyLoad ? {
+          "data-src": props.video
+        } : {
+          src: props.video
+        }
+      }, {
         type: "video/mp4"
-      }, null, 3, "j7_0") : null,
+      }, 0, null),
+      ref: videoRef,
       style: {
         width: "100%",
         height: "100%",
@@ -63,12 +101,9 @@ const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
       poster: _fnSignal((p0) => p0.posterImage, [
         props
       ], "p0.posterImage"),
-      preload: _fnSignal((p0) => p0.preload || "metadata", [
-        props
-      ], 'p0.preload||"metadata"'),
-      src: _fnSignal((p0) => p0.video || "no-src", [
+      preload: _fnSignal((p0) => p0.lazyLoad ? "none" : p0.preload || "metadata", [
         props
-      ], 'p0.video||"no-src"')
+      ], 'p0.lazyLoad?"none":p0.preload||"metadata"')
     }, 0, null),
     props.aspectRatio && !(props.fitContent && ((_c = (_b = props.builderBlock) == null ? void 0 : _b.children) == null ? void 0 : _c.length)) ? /* @__PURE__ */ _jsxQ("div", null, {
       style: _fnSignal((p0) => ({
@@ -79,14 +114,14 @@ const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
       }), [
         props
       ], '{width:"100%",paddingTop:p0.aspectRatio*100+"%",pointerEvents:"none",fontSize:"0px"}')
-    }, null, 3, "j7_1") : null,
+    }, null, 3, "j7_0") : null,
     ((_e = (_d = props.builderBlock) == null ? void 0 : _d.children) == null ? void 0 : _e.length) && props.fitContent ? /* @__PURE__ */ _jsxQ("div", null, {
       style: {
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch"
       }
-    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "j7_2"), 1, "j7_3") : null,
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "j7_1"), 1, "j7_2") : null,
     ((_g = (_f = props.builderBlock) == null ? void 0 : _f.children) == null ? void 0 : _g.length) && !props.fitContent ? /* @__PURE__ */ _jsxQ("div", null, {
       style: {
         pointerEvents: "none",
@@ -99,8 +134,8 @@ const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
         width: "100%",
         height: "100%"
       }
-    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "j7_4"), 1, "j7_5") : null
-  ], 1, "j7_6");
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "j7_3"), 1, "j7_4") : null
+  ], 1, "j7_5");
 }, "Video_component_qdcTZflYyoQ"));
 export {
   Video,

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/content/components/enable-editor.qwik.cjs

@@ -168,11 +168,13 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
       } : {},
       ...props2.trustedHosts ? {
         trustedHosts: props2.trustedHosts
-      } : {}
+      } : {},
+      modelName: props2.model ?? "",
+      apiKey: props2.apiKey
     });
     Object.values(props2.builderContextSignal.componentInfos).forEach((registeredComponent) => {
       var _a2, _b2;
-      if (!props2.model || !((_a2 = registeredComponent.models) == null ? void 0 : _a2.length) || registeredComponent.models.includes(props2.model)) {
+      if (!((_a2 = registeredComponent.models) == null ? void 0 : _a2.length) || registeredComponent.models.includes(props2.model)) {
         const message = registerComponent.createRegisterComponentMessage(registeredComponent);
         (_b2 = window.parent) == null ? void 0 : _b2.postMessage(message, "*");
       }
@@ -193,7 +195,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
     if (searchParamPreviewModel === "BUILDER_STUDIO" || searchParamPreviewModel === props2.model && previewApiKey === props2.apiKey && (!props2.content || searchParamPreviewId === props2.content.id))
       index.fetchOneEntry({
-        model: props2.model || "",
+        model: props2.model,
         apiKey: props2.apiKey,
         apiVersion: props2.builderContextSignal.apiVersion,
         ...searchParamPreviewModel === "BUILDER_STUDIO" && ((_a2 = props2.context) == null ? void 0 : _a2.symbolId) ? {
@@ -211,7 +213,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 +240,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";
@@ -166,11 +166,13 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       } : {},
       ...props2.trustedHosts ? {
         trustedHosts: props2.trustedHosts
-      } : {}
+      } : {},
+      modelName: props2.model ?? "",
+      apiKey: props2.apiKey
     });
     Object.values(props2.builderContextSignal.componentInfos).forEach((registeredComponent) => {
       var _a2, _b2;
-      if (!props2.model || !((_a2 = registeredComponent.models) == null ? void 0 : _a2.length) || registeredComponent.models.includes(props2.model)) {
+      if (!((_a2 = registeredComponent.models) == null ? void 0 : _a2.length) || registeredComponent.models.includes(props2.model)) {
         const message = createRegisterComponentMessage(registeredComponent);
         (_b2 = window.parent) == null ? void 0 : _b2.postMessage(message, "*");
       }
@@ -191,7 +193,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
     if (searchParamPreviewModel === "BUILDER_STUDIO" || searchParamPreviewModel === props2.model && previewApiKey === props2.apiKey && (!props2.content || searchParamPreviewId === props2.content.id))
       fetchOneEntry({
-        model: props2.model || "",
+        model: props2.model,
         apiKey: props2.apiKey,
         apiVersion: props2.builderContextSignal.apiVersion,
         ...searchParamPreviewModel === "BUILDER_STUDIO" && ((_a2 = props2.context) == null ? void 0 : _a2.symbolId) ? {
@@ -209,7 +211,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 +238,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/components/content/content.qwik.cjs

@@ -43,7 +43,7 @@ const ContentComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.
       BlocksWrapper: props.blocksWrapper || "div",
       BlocksWrapperProps: props.blocksWrapperProps || {},
       nonce: props.nonce || "",
-      model: props.model || ""
+      model: props.model
     },
     registeredComponents: [
       ...builderRegisteredComponents.getDefaultRegisteredComponents(),

package/lib/browser/components/content/content.qwik.mjs

@@ -41,7 +41,7 @@ const ContentComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl
       BlocksWrapper: props.blocksWrapper || "div",
       BlocksWrapperProps: props.blocksWrapperProps || {},
       nonce: props.nonce || "",
-      model: props.model || ""
+      model: props.model
     },
     registeredComponents: [
       ...getDefaultRegisteredComponents(),

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.7";
+const SDK_VERSION = "0.18.0";
 exports.SDK_VERSION = SDK_VERSION;

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

@@ -1,4 +1,4 @@
-const SDK_VERSION = "0.17.7";
+const SDK_VERSION = "0.18.0";
 export {
   SDK_VERSION
 };

package/lib/browser/helpers/subscribe-to-editor.qwik.cjs

@@ -28,13 +28,16 @@ const createEditorListener = ({ model, trustedHosts, callbacks }) => {
       }
   };
 };
-const subscribeToEditor = (model, callback, options) => {
+const subscribeToEditor = ({ model, apiKey, callback, trustedHosts }) => {
   if (!isBrowser.isBrowser) {
     logger.logger.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server.");
     return () => {
     };
   }
-  initEditing.setupBrowserForEditing();
+  initEditing.setupBrowserForEditing({
+    modelName: model,
+    apiKey
+  });
   const listener = createEditorListener({
     callbacks: {
       contentUpdate: callback,
@@ -44,7 +47,7 @@ const subscribeToEditor = (model, callback, options) => {
       }
     },
     model,
-    trustedHosts: options == null ? void 0 : options.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {

package/lib/browser/helpers/subscribe-to-editor.qwik.mjs

@@ -26,13 +26,16 @@ const createEditorListener = ({ model, trustedHosts, callbacks }) => {
       }
   };
 };
-const subscribeToEditor = (model, callback, options) => {
+const subscribeToEditor = ({ model, apiKey, callback, trustedHosts }) => {
   if (!isBrowser) {
     logger.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server.");
     return () => {
     };
   }
-  setupBrowserForEditing();
+  setupBrowserForEditing({
+    modelName: model,
+    apiKey
+  });
   const listener = createEditorListener({
     callbacks: {
       contentUpdate: callback,
@@ -42,7 +45,7 @@ const subscribeToEditor = (model, callback, options) => {
       }
     },
     model,
-    trustedHosts: options == null ? void 0 : options.trustedHosts
+    trustedHosts
   });
   window.addEventListener("message", listener);
   return () => {

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

@@ -40,7 +40,7 @@ const registerInsertMenu = () => {
   });
 };
 let isSetupForEditing = false;
-const setupBrowserForEditing = (options = {}) => {
+const setupBrowserForEditing = (options) => {
   var _a, _b;
   if (isSetupForEditing)
     return;
@@ -56,6 +56,9 @@ const setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        modelName: options.modelName,
+        apiKey: options.apiKey,
+        supportsXSmallBreakpoint: true,
         blockLevelPersonalization: true
       }
     }, "*");