@builder.io/sdk-solid 3.0.0 → 3.0.2

package/lib/browser/dev.jsx

@@ -95,7 +95,8 @@ var builder_context_default = createContext({
   inheritedStyles: {},
   BlocksWrapper: "div",
   BlocksWrapperProps: {},
-  nonce: ""
+  nonce: "",
+  model: ""
 });
 
 // src/context/components.context.ts
@@ -111,23 +112,6 @@ import {
   createSignal as createSignal5
 } from "solid-js";
 
-// src/functions/get-block-component-options.ts
-function getBlockComponentOptions(block) {
-  return {
-    ...block.component?.options,
-    ...block.options
-  };
-}
-
-// src/helpers/omit.ts
-function omit(obj, ...values) {
-  const newObject = Object.assign({}, obj);
-  for (const key of values) {
-    delete newObject[key];
-  }
-  return newObject;
-}
-
 // src/helpers/logger.ts
 var MSG_PREFIX = "[Builder.io]: ";
 var logger = {
@@ -394,6 +378,109 @@ function evaluate({
   }
 }
 
+// src/functions/get-block-component-options.ts
+function getBlockComponentOptions(block, context) {
+  return {
+    ...block.component?.options,
+    ...block.options,
+    ...evaluateTextComponentTextOption(block, context)
+  };
+}
+var evaluateTextComponentTextOption = (block, context) => {
+  if (block.component?.name === "Text" && block.component.options?.text && typeof block.component.options.text === "string") {
+    return {
+      ...block.component.options,
+      text: block.component.options.text.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+        code: group,
+        context,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState
+      }))
+    };
+  }
+};
+
+// src/helpers/omit.ts
+function omit(obj, ...values) {
+  const newObject = Object.assign({}, obj);
+  for (const key of values) {
+    delete newObject[key];
+  }
+  return newObject;
+}
+
+// src/functions/traverse.ts
+function traverse(obj, callback, parent2 = null, key = null, visited = /* @__PURE__ */ new WeakSet()) {
+  if (obj == null || typeof obj !== "object") {
+    callback(obj, (newValue) => {
+      if (parent2 !== null && key !== null) {
+        parent2[key] = newValue;
+      }
+    });
+    return;
+  }
+  if (visited.has(obj)) {
+    return;
+  }
+  visited.add(obj);
+  if (Array.isArray(obj)) {
+    obj.forEach((item, index) => {
+      const update = (newValue) => {
+        obj[index] = newValue;
+      };
+      callback(item, update);
+      traverse(item, callback, obj, index, visited);
+    });
+  } else {
+    Object.entries(obj).forEach(([key2, value]) => {
+      const update = (newValue) => {
+        obj[key2] = newValue;
+      };
+      callback(value, update);
+      traverse(value, callback, obj, key2, visited);
+    });
+  }
+}
+
+// src/functions/extract-localized-values.ts
+function isLocalizedField(value) {
+  return value && typeof value === "object" && value["@type"] === "@builder.io/core:LocalizedValue";
+}
+function containsLocalizedValues(data) {
+  if (!data || !Object.getOwnPropertyNames(data).length) {
+    return false;
+  }
+  let hasLocalizedValues = false;
+  traverse(data, (value) => {
+    if (isLocalizedField(value)) {
+      hasLocalizedValues = true;
+      return;
+    }
+  });
+  return hasLocalizedValues;
+}
+function extractLocalizedValues(data, locale) {
+  if (!data || !Object.getOwnPropertyNames(data).length) {
+    return {};
+  }
+  traverse(data, (value, update) => {
+    if (isLocalizedField(value)) {
+      update(value[locale] ?? void 0);
+    }
+  });
+  return data;
+}
+function resolveLocalizedValues(block, locale) {
+  if (block.component?.options && containsLocalizedValues(block.component?.options)) {
+    if (!locale) {
+      console.warn("[Builder.io] In order to use localized fields in Builder, you must pass a locale prop to the BuilderComponent or to options object while fetching the content to resolve localized fields. Learn more: https://www.builder.io/c/docs/localization-inline#targeting-and-inline-localization");
+    }
+    block.component.options = extractLocalizedValues(block.component.options, locale ?? "Default");
+  }
+  return block;
+}
+
 // src/functions/fast-clone.ts
 var fastClone = (obj) => JSON.parse(JSON.stringify(obj));
 
@@ -487,23 +574,19 @@ var evaluateBindings = ({
 function getProcessedBlock({
   block,
   context,
-  shouldEvaluateBindings,
   localState,
   rootState,
   rootSetState
 }) {
-  const transformedBlock = transformBlock(block);
-  if (shouldEvaluateBindings) {
-    return evaluateBindings({
-      block: transformedBlock,
-      localState,
-      rootState,
-      rootSetState,
-      context
-    });
-  } else {
-    return transformedBlock;
-  }
+  let transformedBlock = resolveLocalizedValues(block, rootState.locale);
+  transformedBlock = transformBlock(transformedBlock);
+  return evaluateBindings({
+    block: transformedBlock,
+    localState,
+    rootState,
+    rootSetState,
+    context
+  });
 }
 
 // src/functions/camel-to-kebab-case.ts
@@ -750,16 +833,24 @@ function mapStyleObjToStrIfNeeded(style) {
 }
 
 // src/components/block/block.helpers.ts
+var checkIsComponentRestricted = (component, model) => {
+  if (!component)
+    return true;
+  if (!model)
+    return false;
+  return component.models && component.models.length > 0 && !component.models.includes(model);
+};
 var getComponent = ({
   block,
-  registeredComponents
+  registeredComponents,
+  model
 }) => {
   const componentName = block.component?.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?`);
@@ -813,11 +904,15 @@ var provideLinkComponent = (block, linkComponent) => {
     };
   return {};
 };
-var provideRegisteredComponents = (block, registeredComponents) => {
-  if (block?.shouldReceiveBuilderProps?.builderComponents)
+var provideRegisteredComponents = (block, registeredComponents, model) => {
+  if (block?.shouldReceiveBuilderProps?.builderComponents) {
+    const filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
+      return !checkIsComponentRestricted(component, model);
+    }));
     return {
-      builderComponents: registeredComponents
+      builderComponents: filteredRegisteredComponents
     };
+  }
   return {};
 };
 var provideBuilderBlock = (block, builderBlock) => {
@@ -1213,15 +1308,15 @@ function Block(props) {
       localState: props.context.localState,
       rootState: props.context.rootState,
       rootSetState: props.context.rootSetState,
-      context: props.context.context,
-      shouldEvaluateBindings: true
+      context: props.context.context
     });
     return blockToUse;
   });
   const blockComponent = createMemo5(() => {
     return getComponent({
       block: processedBlock(),
-      registeredComponents: props.registeredComponents
+      registeredComponents: props.registeredComponents,
+      model: props.context.model
     });
   });
   const Tag = createMemo5(() => {
@@ -1250,13 +1345,14 @@ function Block(props) {
       blockChildren: processedBlock().children ?? [],
       componentRef: blockComponent()?.component,
       componentOptions: {
-        ...getBlockComponentOptions(processedBlock()),
+        ...getBlockComponentOptions(processedBlock(), props.context),
         ...provideBuilderBlock(blockComponent(), processedBlock()),
         ...provideBuilderContext(blockComponent(), props.context),
         ...provideLinkComponent(blockComponent(), props.linkComponent),
         ...provideRegisteredComponents(
           blockComponent(),
-          props.registeredComponents
+          props.registeredComponents,
+          props.context.model
         )
       },
       context: props.context,
@@ -1680,7 +1776,7 @@ function Image(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 props.srcset;
     }
     if (props.noWebp) {
@@ -1721,7 +1817,7 @@ function Image(props) {
       <picture>
         <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-7e6ffddc"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-070d7e88"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -1739,22 +1835,22 @@ function Image(props) {
       <Show8
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-7e6ffddc"
+        class="builder-image-sizer div-070d7e88"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
       /></Show8>
       <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
-      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-7e6ffddc-2">{props.children}</div></Show8>
+      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-070d7e88-2">{props.children}</div></Show8>
     </>
-    <style>{`.img-7e6ffddc {
+    <style>{`.img-070d7e88 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-7e6ffddc {
+}.div-070d7e88 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-7e6ffddc-2 {
+}.div-070d7e88-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1790,10 +1886,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount8, on as on4, createEffect as createEffect4, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
+import { onMount as onMount8, on as on4, createEffect as createEffect4, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show15, For as For9, onMount as onMount7, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
+import { Show as Show15, For as For9, onMount as onMount7, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -1987,7 +2083,7 @@ var handleABTesting = async ({
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
 // src/components/content/content.tsx
-import { Show as Show14, createSignal as createSignal18 } from "solid-js";
+import { Show as Show14, createSignal as createSignal17 } from "solid-js";
 
 // src/blocks/accordion/component-info.ts
 var defaultTitle = {
@@ -2547,6 +2643,10 @@ var componentInfo4 = {
   noWrap: true
 };
 
+// src/constants/file-types.ts
+var IMAGE_FILE_TYPES = ["jpeg", "jpg", "png", "svg", "webp", "gif", "jfif", "pjpeg", "pjp", "apng", "avif", "tif", "tiff", "heif", "bmp", "eps", "raw", "cr2", "nef", "orf", "sr2", "psd", "heic", "dib", "ai"];
+var VIDEO_FILE_TYPES = ["mp4", "webm", "mkv", "flv", "vob", "ogv", "ogg", "drc", "gif", "gifv", "mng", "avi", "mov", "qt", "mts", "m2ts", "ts", "wmv", "yuv", "rm", "rmvb", "viv", "asf", "amv", "m4p", "mpeg", "mpe", "m2v", "m4v", "svi", "3gp", "3g2", "mxf", "roq", "nsv", "f4v", "f4p", "f4a", "f4b"];
+
 // src/blocks/image/component-info.ts
 var componentInfo5 = {
   name: "Image",
@@ -2563,7 +2663,7 @@ var componentInfo5 = {
     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) => {
@@ -3028,30 +3128,10 @@ var componentInfo10 = {
 };
 
 // src/blocks/text/text.tsx
-import { createMemo as createMemo11 } from "solid-js";
 function Text(props) {
-  const processedText = createMemo11(() => {
-    const context = props.builderContext;
-    const {
-      context: contextContext,
-      localState,
-      rootState,
-      rootSetState
-    } = context;
-    return String(props.text?.toString() || "").replace(
-      /{{([^}]+)}}/g,
-      (match, group) => evaluate({
-        code: group,
-        context: contextContext,
-        localState,
-        rootState,
-        rootSetState
-      })
-    );
-  });
   return <><div
     class="builder-text"
-    innerHTML={processedText()}
+    innerHTML={props.text?.toString() || ""}
     style={{
       outline: "none"
     }}
@@ -3085,10 +3165,10 @@ var componentInfo11 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount5, createSignal as createSignal12 } from "solid-js";
+import { onMount as onMount5, createSignal as createSignal11 } from "solid-js";
 function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
-  const [scriptsRun, setScriptsRun] = createSignal12([]);
+  const [scriptsInserted, setScriptsInserted] = createSignal11([]);
+  const [scriptsRun, setScriptsRun] = createSignal11([]);
   let elementRef;
   onMount5(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
@@ -3150,7 +3230,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on as on2, createEffect as createEffect2, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
+import { on as on2, createEffect as createEffect2, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -3158,9 +3238,9 @@ var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
 function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal13([]);
-  const [scriptsRun, setScriptsRun] = createSignal13([]);
-  const [ranInitFn, setRanInitFn] = createSignal13(false);
+  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
+  const [scriptsRun, setScriptsRun] = createSignal12([]);
+  const [ranInitFn, setRanInitFn] = createSignal12(false);
   function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
       return;
@@ -3184,8 +3264,8 @@ function Embed(props) {
     }
   }
   let elem;
-  const onUpdateFn_0_elem = createMemo13(() => elem);
-  const onUpdateFn_0_ranInitFn__ = createMemo13(() => ranInitFn());
+  const onUpdateFn_0_elem = createMemo12(() => elem);
+  const onUpdateFn_0_ranInitFn__ = createMemo12(() => ranInitFn());
   function onUpdateFn_0() {
     if (elem && !ranInitFn()) {
       setRanInitFn(true);
@@ -3440,7 +3520,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/form/form/form.tsx
-import { Show as Show11, For as For7, createSignal as createSignal14 } from "solid-js";
+import { Show as Show11, For as For7, createSignal as createSignal13 } from "solid-js";
 
 // src/functions/get-env.ts
 var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
@@ -3460,9 +3540,9 @@ function logFetch(url) {
 
 // src/blocks/form/form/form.tsx
 function FormComponent(props) {
-  const [formState, setFormState] = createSignal14("unsubmitted");
-  const [responseData, setResponseData] = createSignal14(null);
-  const [formErrorMessage, setFormErrorMessage] = createSignal14("");
+  const [formState, setFormState] = createSignal13("unsubmitted");
+  const [responseData, setResponseData] = createSignal13(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal13("");
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContext.rootState,
@@ -3923,7 +4003,7 @@ var componentInfo18 = {
     name: "image",
     bubble: true,
     type: "file",
-    allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
+    allowedFileTypes: IMAGE_FILE_TYPES,
     required: true
   }],
   noWrap: true,
@@ -3958,14 +4038,14 @@ var componentInfo19 = {
   inputs: [{
     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
   }, {
     name: "posterImage",
     type: "file",
-    allowedFileTypes: ["jpeg", "png"],
+    allowedFileTypes: IMAGE_FILE_TYPES,
     helperText: "Image to show before the video plays"
   }, {
     name: "autoPlay",
@@ -4034,9 +4114,9 @@ var componentInfo19 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show12, createMemo as createMemo15 } from "solid-js";
+import { Show as Show12, createMemo as createMemo14 } from "solid-js";
 function Video(props) {
-  const videoProps = createMemo15(() => {
+  const videoProps = createMemo14(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -4055,7 +4135,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo15(() => {
+  const spreadProps = createMemo14(() => {
     return {
       ...videoProps()
     };
@@ -4191,7 +4271,7 @@ var createRegisterComponentMessage = (info) => ({
 var serializeFn = (fnValue) => {
   const fnStr = fnValue.toString().trim();
   const isArrowWithoutParens = /^[a-zA-Z0-9_]+\s*=>/i.test(fnStr);
-  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(") && !isArrowWithoutParens;
+  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("async") && !fnStr.startsWith("(") && !isArrowWithoutParens;
   return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
 };
 function serializeIncludingFunctions(info) {
@@ -4265,8 +4345,8 @@ import {
   onMount as onMount6,
   on as on3,
   createEffect as createEffect3,
-  createMemo as createMemo16,
-  createSignal as createSignal16
+  createMemo as createMemo15,
+  createSignal as createSignal15
 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
@@ -4276,7 +4356,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.0";
+var SDK_VERSION = "3.0.2";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -4341,6 +4421,23 @@ function flattenMongoQuery(obj, _current, _res = {}) {
   }
   return _res;
 }
+function unflatten(obj) {
+  const result = {};
+  for (const key in obj) {
+    const parts = key.split(".");
+    let current = result;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (i === parts.length - 1) {
+        current[part] = obj[key];
+      } else {
+        current[part] = current[part] || {};
+        current = current[part];
+      }
+    }
+  }
+  return result;
+}
 
 // src/types/api-version.ts
 var DEFAULT_API_VERSION = "v3";
@@ -4405,7 +4502,7 @@ var generateContentUrl = (options) => {
   url.searchParams.set("noTraverse", String(noTraverse));
   url.searchParams.set("includeRefs", String(true));
   const finalLocale = locale || userAttributes?.locale;
-  let finalUserAttributes = userAttributes;
+  let finalUserAttributes = userAttributes || {};
   if (finalLocale) {
     url.searchParams.set("locale", finalLocale);
     finalUserAttributes = {
@@ -4443,11 +4540,15 @@ var generateContentUrl = (options) => {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(options.options || {})
   };
+  finalUserAttributes = {
+    ...finalUserAttributes,
+    ...getUserAttributesAsJSON(queryOptions)
+  };
   const flattened = flatten(queryOptions);
   for (const key in flattened) {
     url.searchParams.set(key, String(flattened[key]));
   }
-  if (finalUserAttributes) {
+  if (Object.keys(finalUserAttributes).length > 0) {
     url.searchParams.set("userAttributes", JSON.stringify(finalUserAttributes));
   }
   if (query) {
@@ -4460,6 +4561,28 @@ var generateContentUrl = (options) => {
   }
   return url;
 };
+var getUserAttributesFromQueryOptions = (queryOptions) => {
+  const newUserAttributes = {};
+  for (const key in queryOptions) {
+    if (key.startsWith("userAttributes.")) {
+      newUserAttributes[key] = queryOptions[key];
+      delete queryOptions[key];
+    }
+  }
+  return newUserAttributes;
+};
+var getUserAttributesAsJSON = (queryOptions) => {
+  if (isBrowser() && queryOptions["preview"] === "BUILDER_STUDIO") {
+    queryOptions["userAttributes.urlPath"] = window.location.pathname;
+    queryOptions["userAttributes.host"] = window.location.host;
+    const queryOptionsForUserAttributes = getUserAttributesFromQueryOptions(queryOptions);
+    const {
+      userAttributes
+    } = unflatten(queryOptionsForUserAttributes);
+    return userAttributes;
+  }
+  return {};
+};
 
 // src/functions/get-content/index.ts
 var checkContentHasResults = (content) => "results" in content;
@@ -4994,6 +5117,12 @@ var subscribeToEditor = (model, callback, options) => {
   };
 };
 
+// src/components/content/components/enable-editor.helpers.ts
+var SDKS_USING_ELEMENT_REF_APPROACH = ["svelte", "qwik", "vue"];
+var needsElementRefDivForEditing = () => {
+  return SDKS_USING_ELEMENT_REF_APPROACH.includes(TARGET) && (isEditing() || isPreviewing());
+};
+
 // src/components/content/components/styles.helpers.ts
 var getCssFromFont = (font) => {
   const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
@@ -5075,12 +5204,12 @@ var getWrapperClassName = (variationId) => {
 
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
-  const [ContentWrapper, setContentWrapper] = createSignal16(
+  const [ContentWrapper, setContentWrapper] = createSignal15(
     props.contentWrapper || "div"
   );
-  const [httpReqsData, setHttpReqsData] = createSignal16({});
-  const [httpReqsPending, setHttpReqsPending] = createSignal16({});
-  const [clicked, setClicked] = createSignal16(false);
+  const [httpReqsData, setHttpReqsData] = createSignal15({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal15({});
+  const [clicked, setClicked] = createSignal15(false);
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -5114,7 +5243,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo16(() => {
+  const showContentProps = createMemo15(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -5240,8 +5369,10 @@ function EnableEditor(props) {
         Object.values(
           props.builderContextSignal.componentInfos
         ).forEach((registeredComponent) => {
-          const message = createRegisterComponentMessage(registeredComponent);
-          window.parent?.postMessage(message, "*");
+          if (!props.model || !registeredComponent.models?.length || registeredComponent.models.includes(props.model)) {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
         });
         window.addEventListener(
           "builder:component:stateChangeListenerActivated",
@@ -5269,11 +5400,16 @@ function EnableEditor(props) {
           `builder.overrides.${searchParamPreviewModel}`
         );
         const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
-        if (searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
+        if (searchParamPreviewModel === "BUILDER_STUDIO" || searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
           fetchOneEntry({
-            model: props.model,
+            model: props.model || "",
             apiKey: props.apiKey,
-            apiVersion: props.builderContextSignal.apiVersion
+            apiVersion: props.builderContextSignal.apiVersion,
+            ...searchParamPreviewModel === "BUILDER_STUDIO" && props.context?.symbolId ? {
+              query: {
+                id: props.context.symbolId
+              }
+            } : {}
           }).then((content) => {
             if (content) {
               mergeNewContent(content);
@@ -5283,14 +5419,14 @@ function EnableEditor(props) {
       }
     }
   });
-  const onUpdateFn_0_props_content = createMemo16(() => props.content);
+  const onUpdateFn_0_props_content = createMemo15(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
       mergeNewContent(props.content);
     }
   }
   createEffect3(on3(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
-  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo16(
+  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo15(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_1() {
@@ -5302,14 +5438,14 @@ function EnableEditor(props) {
       onUpdateFn_1
     )
   );
-  const onUpdateFn_2_props_data = createMemo16(() => props.data);
+  const onUpdateFn_2_props_data = createMemo15(() => props.data);
   function onUpdateFn_2() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
   createEffect3(on3(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
-  const onUpdateFn_3_props_locale = createMemo16(() => props.locale);
+  const onUpdateFn_3_props_locale = createMemo15(() => props.locale);
   function onUpdateFn_3() {
     if (props.locale) {
       mergeNewRootState({
@@ -5318,7 +5454,9 @@ function EnableEditor(props) {
     }
   }
   createEffect3(on3(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
-  return <><builder_context_default.Provider value={props.builderContextSignal}><Show13 when={props.builderContextSignal.content}><Dynamic5
+  return <><builder_context_default.Provider value={props.builderContextSignal}><Show13
+    when={props.builderContextSignal.content || needsElementRefDivForEditing()}
+  ><Dynamic5
     class={getWrapperClassName(
       props.content?.testVariationId || props.content?.id
     )}
@@ -5327,6 +5465,9 @@ function EnableEditor(props) {
     onClick={(event) => onClick(event)}
     builder-content-id={props.builderContextSignal.content?.id}
     builder-model={props.model}
+    style={{
+      display: !props.builderContextSignal.content && needsElementRefDivForEditing() ? "none" : void 0
+    }}
     {...{}}
     {...showContentProps()}
     {...props.contentWrapperProps}
@@ -5336,9 +5477,9 @@ function EnableEditor(props) {
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal17 } from "solid-js";
+import { createSignal as createSignal16 } from "solid-js";
 function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal17(
+  const [injectedStyles, setInjectedStyles] = createSignal16(
     `
 ${getCss({
       cssCode: props.cssCode,
@@ -5396,7 +5537,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal18(
+  const [scriptStr, setScriptStr] = createSignal17(
     getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: props.content?.testVariationId,
@@ -5404,16 +5545,10 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal18(
+  const [registeredComponents, setRegisteredComponents] = createSignal17(
     [
       ...getDefaultRegisteredComponents(),
-      ...props.customComponents?.filter(({ models }) => {
-        if (!models?.length)
-          return true;
-        if (!props.model)
-          return true;
-        return models.includes(props.model);
-      }) || []
+      ...props.customComponents || []
     ].reduce(
       (acc, { component, ...info }) => ({
         ...acc,
@@ -5425,7 +5560,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal17({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -5443,13 +5578,7 @@ function ContentComponent(props) {
     apiVersion: props.apiVersion,
     componentInfos: [
       ...getDefaultRegisteredComponents(),
-      ...props.customComponents?.filter(({ models }) => {
-        if (!models?.length)
-          return true;
-        if (!props.model)
-          return true;
-        return models.includes(props.model);
-      }) || []
+      ...props.customComponents || []
     ].reduce(
       (acc, { component: _, ...info }) => ({
         ...acc,
@@ -5460,7 +5589,8 @@ function ContentComponent(props) {
     inheritedStyles: {},
     BlocksWrapper: props.blocksWrapper || "div",
     BlocksWrapperProps: props.blocksWrapperProps || {},
-    nonce: props.nonce || ""
+    nonce: props.nonce || "",
+    model: props.model || ""
   });
   function contentSetState(newRootState) {
     setBuilderContextSignal((PREVIOUS_VALUE) => ({
@@ -5538,13 +5668,13 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal19(
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal18(
     checkShouldRenderVariants({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  const updateCookieAndStylesScriptStr = createMemo19(() => {
+  const updateCookieAndStylesScriptStr = createMemo18(() => {
     return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
@@ -5553,10 +5683,10 @@ function ContentVariants(props) {
       props.content?.id || ""
     );
   });
-  const hideVariantsStyleString = createMemo19(() => {
+  const hideVariantsStyleString = createMemo18(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
   });
-  const defaultContent = createMemo19(() => {
+  const defaultContent = createMemo18(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -5668,14 +5798,14 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol(props) {
-  const [contentToUse, setContentToUse] = createSignal20(props.symbol?.content);
-  const blocksWrapper = createMemo20(() => {
+  const [contentToUse, setContentToUse] = createSignal19(props.symbol?.content);
+  const blocksWrapper = createMemo19(() => {
     return "div";
   });
-  const contentWrapper = createMemo20(() => {
+  const contentWrapper = createMemo19(() => {
     return "div";
   });
-  const className = createMemo20(() => {
+  const className = createMemo19(() => {
     return [
       ...[props.attributes[getClassPropName()]],
       "builder-symbol",
@@ -5697,7 +5827,7 @@ function Symbol(props) {
   }
   onMount8(() => {
   });
-  const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
+  const onUpdateFn_0_props_symbol = createMemo19(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }