@builder.io/sdk-qwik 0.17.0 → 0.17.2

package/lib/browser/blocks/image/component-info.qwik.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileTypes = require("../../constants/file-types.qwik.cjs");
 const componentInfo = {
   name: "Image",
   static: true,
@@ -16,13 +17,7 @@ const componentInfo = {
       name: "image",
       type: "file",
       bubble: true,
-      allowedFileTypes: [
-        "jpeg",
-        "jpg",
-        "png",
-        "svg",
-        "webp"
-      ],
+      allowedFileTypes: fileTypes.IMAGE_FILE_TYPES,
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
       onChange: (options) => {

package/lib/browser/blocks/image/component-info.qwik.mjs

@@ -1,3 +1,4 @@
+import { IMAGE_FILE_TYPES } from "../../constants/file-types.qwik.mjs";
 const componentInfo = {
   name: "Image",
   static: true,
@@ -14,13 +15,7 @@ const componentInfo = {
       name: "image",
       type: "file",
       bubble: true,
-      allowedFileTypes: [
-        "jpeg",
-        "jpg",
-        "png",
-        "svg",
-        "webp"
-      ],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
       onChange: (options) => {

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

@@ -13,7 +13,7 @@ const Image = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
     const url = imageToUse;
     if (!url || // We can auto add srcset for cdn.builder.io and shopify
     // images, otherwise you can supply this prop manually
-    !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/)))
+    !(typeof url === "string" && (url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))))
       return props2.srcset;
     if (props2.noWebp)
       return void 0;

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

@@ -11,7 +11,7 @@ const Image = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     const url = imageToUse;
     if (!url || // We can auto add srcset for cdn.builder.io and shopify
     // images, otherwise you can supply this prop manually
-    !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/)))
+    !(typeof url === "string" && (url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))))
       return props2.srcset;
     if (props2.noWebp)
       return void 0;

package/lib/browser/blocks/img/component-info.qwik.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileTypes = require("../../constants/file-types.qwik.cjs");
 const componentInfo = {
   // friendlyName?
   name: "Raw:Img",
@@ -10,14 +11,7 @@ const componentInfo = {
       name: "image",
       bubble: true,
       type: "file",
-      allowedFileTypes: [
-        "jpeg",
-        "jpg",
-        "png",
-        "svg",
-        "gif",
-        "webp"
-      ],
+      allowedFileTypes: fileTypes.IMAGE_FILE_TYPES,
       required: true
     }
   ],

package/lib/browser/blocks/img/component-info.qwik.mjs

@@ -1,3 +1,4 @@
+import { IMAGE_FILE_TYPES } from "../../constants/file-types.qwik.mjs";
 const componentInfo = {
   // friendlyName?
   name: "Raw:Img",
@@ -8,14 +9,7 @@ const componentInfo = {
       name: "image",
       bubble: true,
       type: "file",
-      allowedFileTypes: [
-        "jpeg",
-        "jpg",
-        "png",
-        "svg",
-        "gif",
-        "webp"
-      ],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       required: true
     }
   ],

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

@@ -1,28 +1,15 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const qwik = require("@builder.io/qwik");
-const evaluate = require("../../functions/evaluate/evaluate.qwik.cjs");
 const Text = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  const processedText = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
-    var _a;
-    const [props2] = qwik.useLexicalScope();
-    const context = props2.builderContext;
-    const { context: contextContext, localState, rootState, rootSetState } = context;
-    return String(((_a = props2.text) == null ? void 0 : _a.toString()) || "").replace(/{{([^}]+)}}/g, (match, group) => evaluate.evaluate({
-      code: group,
-      context: contextContext,
-      localState,
-      rootState,
-      rootSetState
-    }));
-  }, "Text_component_processedText_useComputed_FbQ0o8kZPCU", [
-    props
-  ]));
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
     class: "builder-text",
-    dangerouslySetInnerHTML: qwik._fnSignal((p0) => p0.value, [
-      processedText
-    ], "p0.value"),
+    dangerouslySetInnerHTML: qwik._fnSignal((p0) => {
+      var _a;
+      return ((_a = p0.text) == null ? void 0 : _a.toString()) || "";
+    }, [
+      props
+    ], 'p0.text?.toString()||""'),
     style: {
       outline: "none"
     }

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

@@ -1,26 +1,13 @@
-import { componentQrl, inlinedQrl, useComputedQrl, useLexicalScope, _jsxQ, _fnSignal } from "@builder.io/qwik";
-import { evaluate } from "../../functions/evaluate/evaluate.qwik.mjs";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal } from "@builder.io/qwik";
 const Text = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const processedText = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    var _a;
-    const [props2] = useLexicalScope();
-    const context = props2.builderContext;
-    const { context: contextContext, localState, rootState, rootSetState } = context;
-    return String(((_a = props2.text) == null ? void 0 : _a.toString()) || "").replace(/{{([^}]+)}}/g, (match, group) => evaluate({
-      code: group,
-      context: contextContext,
-      localState,
-      rootState,
-      rootSetState
-    }));
-  }, "Text_component_processedText_useComputed_FbQ0o8kZPCU", [
-    props
-  ]));
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "builder-text",
-    dangerouslySetInnerHTML: _fnSignal((p0) => p0.value, [
-      processedText
-    ], "p0.value"),
+    dangerouslySetInnerHTML: _fnSignal((p0) => {
+      var _a;
+      return ((_a = p0.text) == null ? void 0 : _a.toString()) || "";
+    }, [
+      props
+    ], 'p0.text?.toString()||""'),
     style: {
       outline: "none"
     }

package/lib/browser/blocks/video/component-info.qwik.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileTypes = require("../../constants/file-types.qwik.cjs");
 const componentInfo = {
   name: "Video",
   canHaveChildren: true,
@@ -12,9 +13,7 @@ const componentInfo = {
     {
       name: "video",
       type: "file",
-      allowedFileTypes: [
-        "mp4"
-      ],
+      allowedFileTypes: fileTypes.VIDEO_FILE_TYPES,
       bubble: true,
       defaultValue: "https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd27731a526464deba0016216f5f9e570%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=d27731a526464deba0016216f5f9e570&alt=media&optimized=true",
       required: true
@@ -22,10 +21,7 @@ const componentInfo = {
     {
       name: "posterImage",
       type: "file",
-      allowedFileTypes: [
-        "jpeg",
-        "png"
-      ],
+      allowedFileTypes: fileTypes.IMAGE_FILE_TYPES,
       helperText: "Image to show before the video plays"
     },
     {

package/lib/browser/blocks/video/component-info.qwik.mjs

@@ -1,3 +1,4 @@
+import { VIDEO_FILE_TYPES, IMAGE_FILE_TYPES } from "../../constants/file-types.qwik.mjs";
 const componentInfo = {
   name: "Video",
   canHaveChildren: true,
@@ -10,9 +11,7 @@ const componentInfo = {
     {
       name: "video",
       type: "file",
-      allowedFileTypes: [
-        "mp4"
-      ],
+      allowedFileTypes: VIDEO_FILE_TYPES,
       bubble: true,
       defaultValue: "https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd27731a526464deba0016216f5f9e570%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=d27731a526464deba0016216f5f9e570&alt=media&optimized=true",
       required: true
@@ -20,10 +19,7 @@ const componentInfo = {
     {
       name: "posterImage",
       type: "file",
-      allowedFileTypes: [
-        "jpeg",
-        "png"
-      ],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       helperText: "Image to show before the video plays"
     },
     {

package/lib/browser/components/block/block.helpers.qwik.cjs

@@ -1,13 +1,20 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const evaluate = require("../../functions/evaluate/evaluate.qwik.cjs");
-const getComponent = ({ block, registeredComponents }) => {
+const checkIsComponentRestricted = (component, model) => {
+  if (!component)
+    return true;
+  if (!model)
+    return false;
+  return component.models && component.models.length > 0 && !component.models.includes(model);
+};
+const getComponent = ({ block, registeredComponents, model }) => {
   var _a;
   const componentName = (_a = block.component) == null ? void 0 : _a.name;
   if (!componentName)
     return null;
   const ref = registeredComponents[componentName];
-  if (!ref) {
+  if (!ref || checkIsComponentRestricted(ref, model)) {
     console.warn(`
       Could not find a registered component named "${componentName}". 
       If you registered it, is the file that registered it imported by the file that needs to render it?`);
@@ -53,12 +60,16 @@ const provideLinkComponent = (block, linkComponent) => {
     };
   return {};
 };
-const provideRegisteredComponents = (block, registeredComponents) => {
+const provideRegisteredComponents = (block, registeredComponents, model) => {
   var _a;
-  if ((_a = block == null ? void 0 : block.shouldReceiveBuilderProps) == null ? void 0 : _a.builderComponents)
+  if ((_a = block == null ? void 0 : block.shouldReceiveBuilderProps) == null ? void 0 : _a.builderComponents) {
+    const filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
+      return !checkIsComponentRestricted(component, model);
+    }));
     return {
-      builderComponents: registeredComponents
+      builderComponents: filteredRegisteredComponents
     };
+  }
   return {};
 };
 const provideBuilderBlock = (block, builderBlock) => {

package/lib/browser/components/block/block.helpers.qwik.mjs

@@ -1,11 +1,18 @@
 import { evaluate } from "../../functions/evaluate/evaluate.qwik.mjs";
-const getComponent = ({ block, registeredComponents }) => {
+const checkIsComponentRestricted = (component, model) => {
+  if (!component)
+    return true;
+  if (!model)
+    return false;
+  return component.models && component.models.length > 0 && !component.models.includes(model);
+};
+const getComponent = ({ block, registeredComponents, model }) => {
   var _a;
   const componentName = (_a = block.component) == null ? void 0 : _a.name;
   if (!componentName)
     return null;
   const ref = registeredComponents[componentName];
-  if (!ref) {
+  if (!ref || checkIsComponentRestricted(ref, model)) {
     console.warn(`
       Could not find a registered component named "${componentName}". 
       If you registered it, is the file that registered it imported by the file that needs to render it?`);
@@ -51,12 +58,16 @@ const provideLinkComponent = (block, linkComponent) => {
     };
   return {};
 };
-const provideRegisteredComponents = (block, registeredComponents) => {
+const provideRegisteredComponents = (block, registeredComponents, model) => {
   var _a;
-  if ((_a = block == null ? void 0 : block.shouldReceiveBuilderProps) == null ? void 0 : _a.builderComponents)
+  if ((_a = block == null ? void 0 : block.shouldReceiveBuilderProps) == null ? void 0 : _a.builderComponents) {
+    const filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
+      return !checkIsComponentRestricted(component, model);
+    }));
     return {
-      builderComponents: registeredComponents
+      builderComponents: filteredRegisteredComponents
     };
+  }
   return {};
 };
 const provideBuilderBlock = (block, builderBlock) => {

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

@@ -37,8 +37,7 @@ const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
       localState: props2.context.localState,
       rootState: props2.context.rootState,
       rootSetState: props2.context.rootSetState,
-      context: props2.context.context,
-      shouldEvaluateBindings: true
+      context: props2.context.context
     });
     return blockToUse;
   }, "Block_component_processedBlock_useComputed_ESKw0l5FcBc", [
@@ -48,7 +47,8 @@ const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
     const [processedBlock2, props2] = qwik.useLexicalScope();
     return block_helpers.getComponent({
       block: processedBlock2.value,
-      registeredComponents: props2.registeredComponents
+      registeredComponents: props2.registeredComponents,
+      model: props2.context.model
     });
   }, "Block_component_blockComponent_useComputed_83sGy9Xlsi0", [
     processedBlock,
@@ -98,11 +98,11 @@ const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
       blockChildren: processedBlock2.value.children ?? [],
       componentRef: (_a2 = blockComponent2.value) == null ? void 0 : _a2.component,
       componentOptions: {
-        ...getBlockComponentOptions.getBlockComponentOptions(processedBlock2.value),
+        ...getBlockComponentOptions.getBlockComponentOptions(processedBlock2.value, props2.context),
         ...block_helpers.provideBuilderBlock(blockComponent2.value, processedBlock2.value),
         ...block_helpers.provideBuilderContext(blockComponent2.value, props2.context),
         ...block_helpers.provideLinkComponent(blockComponent2.value, props2.linkComponent),
-        ...block_helpers.provideRegisteredComponents(blockComponent2.value, props2.registeredComponents)
+        ...block_helpers.provideRegisteredComponents(blockComponent2.value, props2.registeredComponents, props2.context.model)
       },
       context: props2.context,
       linkComponent: props2.linkComponent,

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

@@ -35,8 +35,7 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
       localState: props2.context.localState,
       rootState: props2.context.rootState,
       rootSetState: props2.context.rootSetState,
-      context: props2.context.context,
-      shouldEvaluateBindings: true
+      context: props2.context.context
     });
     return blockToUse;
   }, "Block_component_processedBlock_useComputed_ESKw0l5FcBc", [
@@ -46,7 +45,8 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     const [processedBlock2, props2] = useLexicalScope();
     return getComponent({
       block: processedBlock2.value,
-      registeredComponents: props2.registeredComponents
+      registeredComponents: props2.registeredComponents,
+      model: props2.context.model
     });
   }, "Block_component_blockComponent_useComputed_83sGy9Xlsi0", [
     processedBlock,
@@ -96,11 +96,11 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
       blockChildren: processedBlock2.value.children ?? [],
       componentRef: (_a2 = blockComponent2.value) == null ? void 0 : _a2.component,
       componentOptions: {
-        ...getBlockComponentOptions(processedBlock2.value),
+        ...getBlockComponentOptions(processedBlock2.value, props2.context),
         ...provideBuilderBlock(blockComponent2.value, processedBlock2.value),
         ...provideBuilderContext(blockComponent2.value, props2.context),
         ...provideLinkComponent(blockComponent2.value, props2.linkComponent),
-        ...provideRegisteredComponents(blockComponent2.value, props2.registeredComponents)
+        ...provideRegisteredComponents(blockComponent2.value, props2.registeredComponents, props2.context.model)
       },
       context: props2.context,
       linkComponent: props2.linkComponent,

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const target = require("../../../constants/target.qwik.cjs");
+const isEditing = require("../../../functions/is-editing.qwik.cjs");
+const isPreviewing = require("../../../functions/is-previewing.qwik.cjs");
+const SDKS_USING_ELEMENT_REF_APPROACH = [
+  "svelte",
+  "qwik",
+  "vue"
+];
+const needsElementRefDivForEditing = () => {
+  return SDKS_USING_ELEMENT_REF_APPROACH.includes(target.TARGET) && (isEditing.isEditing() || isPreviewing.isPreviewing());
+};
+exports.SDKS_USING_ELEMENT_REF_APPROACH = SDKS_USING_ELEMENT_REF_APPROACH;
+exports.needsElementRefDivForEditing = needsElementRefDivForEditing;

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

@@ -0,0 +1,15 @@
+import { TARGET } from "../../../constants/target.qwik.mjs";
+import { isEditing } from "../../../functions/is-editing.qwik.mjs";
+import { isPreviewing } from "../../../functions/is-previewing.qwik.mjs";
+const SDKS_USING_ELEMENT_REF_APPROACH = [
+  "svelte",
+  "qwik",
+  "vue"
+];
+const needsElementRefDivForEditing = () => {
+  return SDKS_USING_ELEMENT_REF_APPROACH.includes(TARGET) && (isEditing() || isPreviewing());
+};
+export {
+  SDKS_USING_ELEMENT_REF_APPROACH,
+  needsElementRefDivForEditing
+};

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

@@ -17,6 +17,7 @@ const canTrack = require("../../../helpers/canTrack.qwik.cjs");
 const subscribeToEditor = require("../../../helpers/subscribe-to-editor.qwik.cjs");
 const initEditing = require("../../../scripts/init-editing.qwik.cjs");
 const animator = require("../../block/animator.qwik.cjs");
+const enableEditor_helpers = require("./enable-editor.helpers.qwik.cjs");
 const styles_helpers = require("./styles.helpers.qwik.cjs");
 const mergeNewRootState = function mergeNewRootState2(props, state, showContentProps, elementRef, newData) {
   var _a, _b;
@@ -170,9 +171,11 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
       } : {}
     });
     Object.values(props2.builderContextSignal.componentInfos).forEach((registeredComponent) => {
-      var _a2;
-      const message = registerComponent.createRegisterComponentMessage(registeredComponent);
-      (_a2 = window.parent) == null ? void 0 : _a2.postMessage(message, "*");
+      var _a2, _b2;
+      if (!props2.model || !((_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, "*");
+      }
     });
     window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, showContentProps2, elementRef2));
   }, "EnableEditor_component_useOn_Qs8c0yql2i0", [
@@ -182,16 +185,22 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     state
   ]));
   qwik.useOn("initpreviewingbldr", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
+    var _a2;
     const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
     const searchParams = new URL(location.href).searchParams;
     const searchParamPreviewModel = searchParams.get("builder.preview");
     const searchParamPreviewId = searchParams.get(`builder.overrides.${searchParamPreviewModel}`);
     const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
-    if (searchParamPreviewModel === props2.model && previewApiKey === props2.apiKey && (!props2.content || searchParamPreviewId === props2.content.id))
+    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
+        apiVersion: props2.builderContextSignal.apiVersion,
+        ...searchParamPreviewModel === "BUILDER_STUDIO" && ((_a2 = props2.context) == null ? void 0 : _a2.symbolId) ? {
+          query: {
+            id: props2.context.symbolId
+          }
+        } : {}
       }).then((content) => {
         if (content)
           mergeNewContent(props2, state2, showContentProps2, elementRef2, content);
@@ -289,7 +298,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     state
   ]));
   return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
-    children: props.builderContextSignal.content ? /* @__PURE__ */ qwik._jsxC(state.ContentWrapper, {
+    children: props.builderContextSignal.content || enableEditor_helpers.needsElementRefDivForEditing() ? /* @__PURE__ */ qwik._jsxC(state.ContentWrapper, {
       get apiKey() {
         return props.apiKey;
       },
@@ -320,6 +329,9 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
         return props.model;
       },
       className: styles_helpers.getWrapperClassName(((_a = props.content) == null ? void 0 : _a.testVariationId) || ((_b = props.content) == null ? void 0 : _b.id)),
+      style: {
+        display: !props.builderContextSignal.content && enableEditor_helpers.needsElementRefDivForEditing() ? "none" : void 0
+      },
       ...showContentProps.value,
       ...props.contentWrapperProps,
       children: /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "06_0"),

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

@@ -15,6 +15,7 @@ import { getDefaultCanTrack } from "../../../helpers/canTrack.qwik.mjs";
 import { createEditorListener } from "../../../helpers/subscribe-to-editor.qwik.mjs";
 import { registerInsertMenu, setupBrowserForEditing } from "../../../scripts/init-editing.qwik.mjs";
 import { triggerAnimation } from "../../block/animator.qwik.mjs";
+import { needsElementRefDivForEditing } from "./enable-editor.helpers.qwik.mjs";
 import { getWrapperClassName } from "./styles.helpers.qwik.mjs";
 const mergeNewRootState = function mergeNewRootState2(props, state, showContentProps, elementRef, newData) {
   var _a, _b;
@@ -168,9 +169,11 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       } : {}
     });
     Object.values(props2.builderContextSignal.componentInfos).forEach((registeredComponent) => {
-      var _a2;
-      const message = createRegisterComponentMessage(registeredComponent);
-      (_a2 = window.parent) == null ? void 0 : _a2.postMessage(message, "*");
+      var _a2, _b2;
+      if (!props2.model || !((_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, "*");
+      }
     });
     window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, showContentProps2, elementRef2));
   }, "EnableEditor_component_useOn_Qs8c0yql2i0", [
@@ -180,16 +183,22 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     state
   ]));
   useOn("initpreviewingbldr", /* @__PURE__ */ inlinedQrl((event, element) => {
+    var _a2;
     const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
     const searchParams = new URL(location.href).searchParams;
     const searchParamPreviewModel = searchParams.get("builder.preview");
     const searchParamPreviewId = searchParams.get(`builder.overrides.${searchParamPreviewModel}`);
     const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
-    if (searchParamPreviewModel === props2.model && previewApiKey === props2.apiKey && (!props2.content || searchParamPreviewId === props2.content.id))
+    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
+        apiVersion: props2.builderContextSignal.apiVersion,
+        ...searchParamPreviewModel === "BUILDER_STUDIO" && ((_a2 = props2.context) == null ? void 0 : _a2.symbolId) ? {
+          query: {
+            id: props2.context.symbolId
+          }
+        } : {}
       }).then((content) => {
         if (content)
           mergeNewContent(props2, state2, showContentProps2, elementRef2, content);
@@ -287,7 +296,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     state
   ]));
   return /* @__PURE__ */ _jsxC(Fragment, {
-    children: props.builderContextSignal.content ? /* @__PURE__ */ _jsxC(state.ContentWrapper, {
+    children: props.builderContextSignal.content || needsElementRefDivForEditing() ? /* @__PURE__ */ _jsxC(state.ContentWrapper, {
       get apiKey() {
         return props.apiKey;
       },
@@ -318,6 +327,9 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
         return props.model;
       },
       className: getWrapperClassName(((_a = props.content) == null ? void 0 : _a.testVariationId) || ((_b = props.content) == null ? void 0 : _b.id)),
+      style: {
+        display: !props.builderContextSignal.content && needsElementRefDivForEditing() ? "none" : void 0
+      },
       ...showContentProps.value,
       ...props.contentWrapperProps,
       children: /* @__PURE__ */ _jsxC(Slot, null, 3, "06_0"),

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

@@ -13,7 +13,7 @@ const enableEditor = require("./components/enable-editor.qwik.cjs");
 const styles = require("./components/styles.qwik.cjs");
 const content_helpers = require("./content.helpers.qwik.cjs");
 const ContentComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  var _a, _b, _c, _d;
+  var _a, _b;
   qwik._jsxBranch();
   const state = qwik.useStore({
     builderContextSignal: {
@@ -34,13 +34,7 @@ const ContentComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.
       apiVersion: props.apiVersion,
       componentInfos: [
         ...builderRegisteredComponents.getDefaultRegisteredComponents(),
-        ...((_a = props.customComponents) == null ? void 0 : _a.filter(({ models }) => {
-          if (!(models == null ? void 0 : models.length))
-            return true;
-          if (!props.model)
-            return true;
-          return models.includes(props.model);
-        })) || []
+        ...props.customComponents || []
       ].reduce((acc, { component: _, ...info }) => ({
         ...acc,
         [info.name]: registerComponent.serializeIncludingFunctions(info)
@@ -48,17 +42,12 @@ const ContentComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.
       inheritedStyles: {},
       BlocksWrapper: props.blocksWrapper || "div",
       BlocksWrapperProps: props.blocksWrapperProps || {},
-      nonce: props.nonce || ""
+      nonce: props.nonce || "",
+      model: props.model || ""
     },
     registeredComponents: [
       ...builderRegisteredComponents.getDefaultRegisteredComponents(),
-      ...((_b = props.customComponents) == null ? void 0 : _b.filter(({ models }) => {
-        if (!(models == null ? void 0 : models.length))
-          return true;
-        if (!props.model)
-          return true;
-        return models.includes(props.model);
-      })) || []
+      ...props.customComponents || []
     ].reduce((acc, { component, ...info }) => ({
       ...acc,
       [info.name]: {
@@ -68,9 +57,9 @@ const ContentComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.
     }), {}),
     scriptStr: helpers.getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-      variationId: (_c = props.content) == null ? void 0 : _c.testVariationId,
+      variationId: (_a = props.content) == null ? void 0 : _a.testVariationId,
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-      contentId: (_d = props.content) == null ? void 0 : _d.id
+      contentId: (_b = props.content) == null ? void 0 : _b.id
     })
   }, {
     deep: true