@builder.io/sdk-solid 3.0.5 → 3.0.6

package/lib/edge/index.jsx

@@ -4639,8 +4639,9 @@ function BlocksWrapper(props) {
     if (!props.path) {
       return void 0;
     }
+    const thisPrefix = "this.";
     const pathPrefix = "component.options.";
-    return props.path.startsWith(pathPrefix) ? props.path : `${pathPrefix}${props.path || ""}`;
+    return props.path.startsWith(thisPrefix) ? props.path.replace(thisPrefix, "") : props.path.startsWith(pathPrefix) ? props.path : `${pathPrefix}${props.path || ""}`;
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -4675,7 +4676,7 @@ function BlocksWrapper(props) {
   });
   return <>
     <Dynamic4
-      class={className() + " dynamic-3c4beb0c"}
+      class={className() + " dynamic-3d7ff108"}
       ref={blocksWrapperRef}
       builder-path={dataPath()}
       builder-parent-id={props.parent}
@@ -4687,7 +4688,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-3c4beb0c {
+    <style>{`.dynamic-3d7ff108 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -5059,10 +5060,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount7, on as on4, createEffect as createEffect4, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
+import { onMount as onMount8, on as on4, createEffect as createEffect4, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show15, For as For8, onMount as onMount6, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
+import { Show as Show16, For as For9, onMount as onMount7, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -5252,11 +5253,61 @@ var handleABTesting = async ({
   };
 };
 
+// src/helpers/user-attributes.ts
+var 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;
+    }
+  };
+}
+var userAttributesService = createUserAttributesService();
+var setClientUserAttributes = (attributes) => {
+  userAttributesService.setUserAttributes(attributes);
+};
+
 // src/helpers/canTrack.ts
-var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
+var getDefaultCanTrack = (canTrack) => {
+  const result = checkIsDefined(canTrack) ? canTrack : true;
+  userAttributesService.setCanTrack(result);
+  return result;
+};
 
 // src/components/content/content.tsx
-import { Show as Show14, createSignal as createSignal17 } from "solid-js";
+import { Show as Show15, createSignal as createSignal18 } from "solid-js";
 
 // src/blocks/accordion/component-info.ts
 var defaultTitle = {
@@ -5950,8 +6001,388 @@ var componentInfo5 = {
   }
 };
 
-// src/blocks/section/component-info.ts
+// src/blocks/personalization-container/component-info.ts
 var componentInfo6 = {
+  name: "PersonalizationContainer",
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+    builderContext: true
+  },
+  noWrap: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F37229ed30d8c41dfb10b8cca1992053a",
+  canHaveChildren: true,
+  inputs: [{
+    name: "variants",
+    defaultValue: [],
+    behavior: "personalizationVariantList",
+    type: "list",
+    subFields: [{
+      name: "name",
+      type: "text"
+    }, {
+      name: "query",
+      friendlyName: "Targeting rules",
+      type: "BuilderQuery",
+      defaultValue: []
+    }, {
+      name: "startDate",
+      type: "date"
+    }, {
+      name: "endDate",
+      type: "date"
+    }, {
+      name: "blocks",
+      type: "uiBlocks",
+      hideFromUI: true,
+      defaultValue: []
+    }]
+  }]
+};
+
+// src/blocks/personalization-container/personalization-container.tsx
+import { Show as Show10, For as For6, onMount as onMount4, createSignal as createSignal10, createMemo as createMemo10 } from "solid-js";
+
+// src/components/inlined-script.tsx
+function InlinedScript(props) {
+  return <><script
+    innerHTML={props.scriptStr}
+    data-id={props.id}
+    nonce={props.nonce || ""}
+  /></>;
+}
+var Inlined_script_default = InlinedScript;
+
+// src/functions/is-previewing.ts
+function isPreviewing(_search) {
+  const search = _search || (isBrowser() ? window.location.search : void 0);
+  if (!search) {
+    return false;
+  }
+  const normalizedSearch = getSearchString(search);
+  return Boolean(normalizedSearch.indexOf("builder.preview=") !== -1);
+}
+
+// src/blocks/personalization-container/helpers/inlined-fns.ts
+function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
+  function isString(val) {
+    return typeof val === "string";
+  }
+  function isNumber(val) {
+    return typeof val === "number";
+  }
+  function objectMatchesQuery(userattr, query2) {
+    const result = (() => {
+      const property = query2.property;
+      const operator = query2.operator;
+      let testValue = query2.value;
+      if (query2 && query2.property === "urlPath" && query2.value && typeof query2.value === "string" && query2.value !== "/" && query2.value.endsWith("/")) {
+        testValue = query2.value.slice(0, -1);
+      }
+      if (!(property && operator)) {
+        return true;
+      }
+      if (Array.isArray(testValue)) {
+        if (operator === "isNot") {
+          return testValue.every((val) => objectMatchesQuery(userattr, {
+            property,
+            operator,
+            value: val
+          }));
+        }
+        return !!testValue.find((val) => objectMatchesQuery(userattr, {
+          property,
+          operator,
+          value: val
+        }));
+      }
+      const value = userattr[property];
+      if (Array.isArray(value)) {
+        return value.includes(testValue);
+      }
+      switch (operator) {
+        case "is":
+          return value === testValue;
+        case "isNot":
+          return value !== testValue;
+        case "contains":
+          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));
+        case "startsWith":
+          return isString(value) && value.startsWith(String(testValue));
+        case "endsWith":
+          return isString(value) && value.endsWith(String(testValue));
+        case "greaterThan":
+          return isNumber(value) && isNumber(testValue) && value > testValue;
+        case "lessThan":
+          return isNumber(value) && isNumber(testValue) && value < testValue;
+        case "greaterThanOrEqualTo":
+          return isNumber(value) && isNumber(testValue) && value >= testValue;
+        case "lessThanOrEqualTo":
+          return isNumber(value) && isNumber(testValue) && value <= testValue;
+        default:
+          return false;
+      }
+    })();
+    return result;
+  }
+  const item = {
+    query,
+    startDate,
+    endDate
+  };
+  const now = userAttributes.date && new Date(userAttributes.date) || /* @__PURE__ */ new Date();
+  if (item.startDate && new Date(item.startDate) > now) {
+    return false;
+  } else if (item.endDate && new Date(item.endDate) < now) {
+    return false;
+  }
+  if (!item.query || !item.query.length) {
+    return true;
+  }
+  return item.query.every((filter) => {
+    return objectMatchesQuery(userAttributes, filter);
+  });
+}
+var PERSONALIZATION_SCRIPT = `function getPersonalizedVariant(variants, blockId, locale) {
+  if (!navigator.cookieEnabled) {
+    return;
+  }
+  function getCookie(name) {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  function removeVariants() {
+    variants?.forEach(function (_, index) {
+      document.querySelector('template[data-variant-id="' + blockId + '-' + index + '"]')?.remove();
+    });
+    document.querySelector('script[data-id="variants-script-' + blockId + '"]')?.remove();
+    document.querySelector('style[data-id="variants-styles-' + blockId + '"]')?.remove();
+  }
+  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');
+  if (locale) {
+    attributes.locale = locale;
+  }
+  const winningVariantIndex = variants?.findIndex(function (variant) {
+    return filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
+  });
+  const isDebug = location.href.includes('builder.debug=true');
+  if (isDebug) {
+    console.debug('PersonalizationContainer', {
+      attributes,
+      variants,
+      winningVariantIndex
+    });
+  }
+  if (winningVariantIndex !== -1) {
+    const winningVariant = document.querySelector('template[data-variant-id="' + blockId + '-' + winningVariantIndex + '"]');
+    if (winningVariant) {
+      const parentNode = winningVariant.parentNode;
+      if (parentNode) {
+        const newParent = parentNode.cloneNode(false);
+        newParent.appendChild(winningVariant.content.firstChild);
+        newParent.appendChild(winningVariant.content.lastChild);
+        parentNode.parentNode?.replaceChild(newParent, parentNode);
+      }
+      if (isDebug) {
+        console.debug('PersonalizationContainer', 'Winning variant Replaced:', winningVariant);
+      }
+    }
+  } else if (variants && variants.length > 0) {
+    removeVariants();
+  }
+}`;
+var FILTER_WITH_CUSTOM_TARGETING_SCRIPT = "function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {\n  function isString(val) {\n    return typeof val === 'string';\n  }\n  function isNumber(val) {\n    return typeof val === 'number';\n  }\n  function objectMatchesQuery(userattr, query) {\n    const result = (() => {\n      const property = query.property;\n      const operator = query.operator;\n      let testValue = query.value;\n      if (query && query.property === 'urlPath' && query.value && typeof query.value === 'string' && query.value !== '/' && query.value.endsWith('/')) {\n        testValue = query.value.slice(0, -1);\n      }\n      if (!(property && operator)) {\n        return true;\n      }\n      if (Array.isArray(testValue)) {\n        if (operator === 'isNot') {\n          return testValue.every(val => objectMatchesQuery(userattr, {\n            property,\n            operator,\n            value: val\n          }));\n        }\n        return !!testValue.find(val => objectMatchesQuery(userattr, {\n          property,\n          operator,\n          value: val\n        }));\n      }\n      const value = userattr[property];\n      if (Array.isArray(value)) {\n        return value.includes(testValue);\n      }\n      switch (operator) {\n        case 'is':\n          return value === testValue;\n        case 'isNot':\n          return value !== testValue;\n        case 'contains':\n          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));\n        case 'startsWith':\n          return isString(value) && value.startsWith(String(testValue));\n        case 'endsWith':\n          return isString(value) && value.endsWith(String(testValue));\n        case 'greaterThan':\n          return isNumber(value) && isNumber(testValue) && value > testValue;\n        case 'lessThan':\n          return isNumber(value) && isNumber(testValue) && value < testValue;\n        case 'greaterThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value >= testValue;\n        case 'lessThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value <= testValue;\n        default:\n          return false;\n      }\n    })();\n    return result;\n  }\n  const item = {\n    query,\n    startDate,\n    endDate\n  };\n  const now = userAttributes.date && new Date(userAttributes.date) || new Date();\n  if (item.startDate && new Date(item.startDate) > now) {\n    return false;\n  } else if (item.endDate && new Date(item.endDate) < now) {\n    return false;\n  }\n  if (!item.query || !item.query.length) {\n    return true;\n  }\n  return item.query.every(filter => {\n    return objectMatchesQuery(userAttributes, filter);\n  });\n}";
+
+// src/blocks/personalization-container/helpers.ts
+function checkShouldRenderVariants(variants, canTrack) {
+  const hasVariants = variants && variants.length > 0;
+  if (TARGET === "reactNative")
+    return false;
+  if (!hasVariants)
+    return false;
+  if (!canTrack)
+    return false;
+  if (TARGET === "vue" || TARGET === "svelte")
+    return true;
+  if (isBrowser())
+    return false;
+  return true;
+}
+function getBlocksToRender({
+  variants,
+  previewingIndex,
+  isHydrated,
+  filteredVariants,
+  fallbackBlocks
+}) {
+  const fallback = {
+    blocks: fallbackBlocks ?? [],
+    path: "this.children"
+  };
+  if (isHydrated && isEditing()) {
+    if (typeof previewingIndex === "number" && previewingIndex < (variants?.length ?? 0)) {
+      const variant = variants[previewingIndex];
+      return {
+        blocks: variant.blocks,
+        path: `component.options.variants.${previewingIndex}.blocks`
+      };
+    }
+    return fallback;
+  }
+  if (isBrowser()) {
+    const winningVariant = filteredVariants?.[0];
+    if (winningVariant) {
+      return {
+        blocks: winningVariant.blocks,
+        path: `component.options.variants.${variants?.indexOf(winningVariant)}.blocks`
+      };
+    }
+  }
+  return fallback;
+}
+var getPersonalizationScript = (variants, blockId, locale) => {
+  return `
+  (function() {
+    ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
+    ${PERSONALIZATION_SCRIPT}
+    getPersonalizedVariant(${JSON.stringify(variants)}, "${blockId}"${locale ? `, "${locale}"` : ""})
+  })();
+  `;
+};
+
+// src/blocks/personalization-container/personalization-container.tsx
+function PersonalizationContainer(props) {
+  const [userAttributes, setUserAttributes] = createSignal10(
+    userAttributesService.getUserAttributes()
+  );
+  const [scriptStr, setScriptStr] = createSignal10(
+    getPersonalizationScript(
+      props.variants,
+      props.builderBlock?.id || "none",
+      props.builderContext?.rootState?.locale
+    )
+  );
+  const [unsubscribers, setUnsubscribers] = createSignal10([]);
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal10(
+    checkShouldRenderVariants(
+      props.variants,
+      getDefaultCanTrack(props.builderContext?.canTrack)
+    )
+  );
+  const [isHydrated, setIsHydrated] = createSignal10(false);
+  const filteredVariants = createMemo10(() => {
+    return (props.variants || []).filter((variant) => {
+      return filterWithCustomTargeting(
+        {
+          ...props.builderContext?.rootState?.locale ? {
+            locale: props.builderContext?.rootState?.locale
+          } : {},
+          ...userAttributes()
+        },
+        variant.query,
+        variant.startDate,
+        variant.endDate
+      );
+    });
+  });
+  const blocksToRender = createMemo10(() => {
+    return getBlocksToRender({
+      variants: props.variants,
+      fallbackBlocks: props.builderBlock?.children,
+      isHydrated: isHydrated(),
+      filteredVariants: filteredVariants(),
+      previewingIndex: props.previewingIndex
+    });
+  });
+  const hideVariantsStyleString = createMemo10(() => {
+    return (props.variants || []).map(
+      (_, index) => `[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none; } `
+    ).join("");
+  });
+  let rootRef;
+  onMount4(() => {
+    setIsHydrated(true);
+    const unsub = userAttributesService.subscribeOnUserAttributesChange(
+      (attrs) => {
+        setUserAttributes(attrs);
+      }
+    );
+    if (!(isEditing() || isPreviewing())) {
+      const variant = filteredVariants()[0];
+      if (rootRef) {
+        rootRef.dispatchEvent(
+          new CustomEvent("builder.variantLoaded", {
+            detail: {
+              variant: variant || "default",
+              content: props.builderContext?.content
+            },
+            bubbles: true
+          })
+        );
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && rootRef) {
+              rootRef.dispatchEvent(
+                new CustomEvent("builder.variantDisplayed", {
+                  detail: {
+                    variant: variant || "default",
+                    content: props.builderContext?.content
+                  },
+                  bubbles: true
+                })
+              );
+            }
+          });
+        });
+        observer.observe(rootRef);
+      }
+    }
+    unsubscribers().push(unsub);
+  });
+  return <><div
+    class={`builder-personalization-container ${props.attributes?.className || ""}`}
+    ref={rootRef}
+    {...props.attributes}
+  >
+    <Show10 when={shouldRenderVariants()}>
+      <For6 each={props.variants}>{(variant, _index) => {
+        const index = _index();
+        return <template
+          key={index}
+          data-variant-id={`${props.builderBlock?.id}-${index}`}
+        ><Blocks_default
+          blocks={variant.blocks}
+          parent={props.builderBlock?.id}
+          path={`component.options.variants.${index}.blocks`}
+        /></template>;
+      }}</For6>
+      <Inlined_styles_default
+        nonce={props.builderContext?.nonce || ""}
+        styles={hideVariantsStyleString()}
+        id={`variants-styles-${props.builderBlock?.id}`}
+      />
+      <Inlined_script_default
+        nonce={props.builderContext?.nonce || ""}
+        scriptStr={scriptStr()}
+        id={`variants-script-${props.builderBlock?.id}`}
+      />
+    </Show10>
+    <Blocks_default
+      blocks={blocksToRender().blocks}
+      parent={props.builderBlock?.id}
+      path={blocksToRender().path}
+    />
+  </div></>;
+}
+var personalization_container_default = PersonalizationContainer;
+
+// src/blocks/section/component-info.ts
+var componentInfo7 = {
   name: "Core:Section",
   static: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -5993,7 +6424,7 @@ var componentInfo6 = {
 };
 
 // src/blocks/slot/component-info.ts
-var componentInfo7 = {
+var componentInfo8 = {
   name: "Slot",
   isRSC: true,
   description: "Allow child blocks to be inserted into this content when used as a Symbol",
@@ -6032,7 +6463,7 @@ function Slot(props) {
 var slot_default = Slot;
 
 // src/blocks/symbol/component-info.ts
-var componentInfo8 = {
+var componentInfo9 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -6114,7 +6545,7 @@ var defaultElement = {
     }
   }
 };
-var componentInfo9 = {
+var componentInfo10 = {
   name: "Builder: Tabs",
   inputs: [{
     name: "tabs",
@@ -6220,9 +6651,9 @@ var componentInfo9 = {
 };
 
 // src/blocks/tabs/tabs.tsx
-import { Show as Show10, For as For6, createSignal as createSignal10 } from "solid-js";
+import { Show as Show11, For as For7, createSignal as createSignal11 } from "solid-js";
 function Tabs(props) {
-  const [activeTab, setActiveTab] = createSignal10(
+  const [activeTab, setActiveTab] = createSignal11(
     props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
   );
   function activeTabContent(active) {
@@ -6244,7 +6675,7 @@ function Tabs(props) {
         "justify-content": props.tabHeaderLayout || "flex-start",
         overflow: "auto"
       }}
-    ><For6 each={props.tabs}>{(tab, _index) => {
+    ><For7 each={props.tabs}>{(tab, _index) => {
       const index = _index();
       return <span
         class={`builder-tab-wrap ${activeTab() === index ? "builder-tab-active" : ""}`}
@@ -6261,21 +6692,21 @@ function Tabs(props) {
         registeredComponents={props.builderComponents}
         linkComponent={props.builderLinkComponent}
       /></span>;
-    }}</For6></div>
-    <Show10 when={activeTabContent(activeTab())}><div><Blocks_default
+    }}</For7></div>
+    <Show11 when={activeTabContent(activeTab())}><div><Blocks_default
       parent={props.builderBlock.id}
       path={`tabs.${activeTab()}.content`}
       blocks={activeTabContent(activeTab())}
       context={props.builderContext}
       registeredComponents={props.builderComponents}
       linkComponent={props.builderLinkComponent}
-    /></div></Show10>
+    /></div></Show11>
   </div></>;
 }
 var tabs_default = Tabs;
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   shouldReceiveBuilderProps: {
     builderBlock: TARGET === "reactNative" ? true : false,
     builderContext: true
@@ -6312,7 +6743,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/custom-code/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Custom Code",
   static: true,
   requiredPermissions: ["editCode"],
@@ -6337,12 +6768,12 @@ var componentInfo11 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount4, createSignal as createSignal11 } from "solid-js";
+import { onMount as onMount5, createSignal as createSignal12 } from "solid-js";
 function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal11([]);
-  const [scriptsRun, setScriptsRun] = createSignal11([]);
+  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
+  const [scriptsRun, setScriptsRun] = createSignal12([]);
   let elementRef;
-  onMount4(() => {
+  onMount5(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
       return;
     }
@@ -6383,7 +6814,7 @@ function CustomCode(props) {
 var custom_code_default = CustomCode;
 
 // src/blocks/embed/component-info.ts
-var componentInfo12 = {
+var componentInfo13 = {
   name: "Embed",
   static: true,
   inputs: [{
@@ -6401,7 +6832,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on as on2, createEffect as createEffect2, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
+import { on as on2, createEffect as createEffect2, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -6409,9 +6840,9 @@ var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
 function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal12([]);
-  const [scriptsRun, setScriptsRun] = createSignal12([]);
-  const [ranInitFn, setRanInitFn] = createSignal12(false);
+  const [scriptsInserted, setScriptsInserted] = createSignal13([]);
+  const [scriptsRun, setScriptsRun] = createSignal13([]);
+  const [ranInitFn, setRanInitFn] = createSignal13(false);
   function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
       return;
@@ -6434,8 +6865,8 @@ function Embed(props) {
     }
   }
   let elem;
-  const onUpdateFn_0_elem = createMemo12(() => elem);
-  const onUpdateFn_0_ranInitFn__ = createMemo12(() => ranInitFn());
+  const onUpdateFn_0_elem = createMemo13(() => elem);
+  const onUpdateFn_0_ranInitFn__ = createMemo13(() => ranInitFn());
   function onUpdateFn_0() {
     if (elem && !ranInitFn()) {
       setRanInitFn(true);
@@ -6450,7 +6881,7 @@ function Embed(props) {
 var embed_default = Embed;
 
 // src/blocks/form/form/component-info.ts
-var componentInfo13 = {
+var componentInfo14 = {
   name: "Form:Form",
   // editableTags: ['builder-form-error']
   defaults: {
@@ -6690,7 +7121,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/form/form/form.tsx
-import { Show as Show11, createSignal as createSignal13 } from "solid-js";
+import { Show as Show12, createSignal as createSignal14 } from "solid-js";
 
 // src/functions/get-env.ts
 var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
@@ -6710,9 +7141,9 @@ function logFetch(url) {
 
 // src/blocks/form/form/form.tsx
 function FormComponent(props) {
-  const [formState, setFormState] = createSignal13("unsubmitted");
-  const [responseData, setResponseData] = createSignal13(null);
-  const [formErrorMessage, setFormErrorMessage] = createSignal13("");
+  const [formState, setFormState] = createSignal14("unsubmitted");
+  const [responseData, setResponseData] = createSignal14(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal14("");
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContext.rootState,
@@ -6908,22 +7339,22 @@ function FormComponent(props) {
       {...props.attributes}
     >
       {props.children}
-      <Show11 when={submissionState() === "error"}><Blocks_default
+      <Show12 when={submissionState() === "error"}><Blocks_default
         path="errorMessage"
         blocks={props.errorMessage}
         context={props.builderContext}
-      /></Show11>
-      <Show11 when={submissionState() === "sending"}><Blocks_default
+      /></Show12>
+      <Show12 when={submissionState() === "sending"}><Blocks_default
         path="sendingMessage"
         blocks={props.sendingMessage}
         context={props.builderContext}
-      /></Show11>
-      <Show11 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-04a43b72">{JSON.stringify(responseData(), null, 2)}</pre></Show11>
-      <Show11 when={submissionState() === "success"}><Blocks_default
+      /></Show12>
+      <Show12 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-04a43b72">{JSON.stringify(responseData(), null, 2)}</pre></Show12>
+      <Show12 when={submissionState() === "success"}><Blocks_default
         path="successMessage"
         blocks={props.successMessage}
         context={props.builderContext}
-      /></Show11>
+      /></Show12>
     </form>
     <style>{`.pre-04a43b72 {
   padding: 10px;
@@ -6935,7 +7366,7 @@ function FormComponent(props) {
 var form_default = FormComponent;
 
 // src/blocks/form/input/component-info.ts
-var componentInfo14 = {
+var componentInfo15 = {
   name: "Form:Input",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
   inputs: [
@@ -7005,7 +7436,7 @@ function FormInputComponent(props) {
 var input_default = FormInputComponent;
 
 // src/blocks/form/select/component-info.ts
-var componentInfo15 = {
+var componentInfo16 = {
   name: "Form:Select",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045",
   defaultStyles: {
@@ -7050,7 +7481,7 @@ var componentInfo15 = {
 };
 
 // src/blocks/form/select/select.tsx
-import { For as For7 } from "solid-js";
+import { For as For8 } from "solid-js";
 function SelectComponent(props) {
   return <><select
     {...{}}
@@ -7060,15 +7491,15 @@ function SelectComponent(props) {
     defaultValue={props.defaultValue}
     name={props.name}
     required={props.required}
-  ><For7 each={props.options}>{(option, _index) => {
+  ><For8 each={props.options}>{(option, _index) => {
     const index = _index();
     return <option key={`${option.name}-${index}`} value={option.value}>{option.name || option.value}</option>;
-  }}</For7></select></>;
+  }}</For8></select></>;
 }
 var select_default = SelectComponent;
 
 // src/blocks/form/submit-button/component-info.ts
-var componentInfo16 = {
+var componentInfo17 = {
   name: "Form:SubmitButton",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
   defaultStyles: {
@@ -7102,7 +7533,7 @@ function SubmitButton(props) {
 var submit_button_default = SubmitButton;
 
 // src/blocks/form/textarea/component-info.ts
-var componentInfo17 = {
+var componentInfo18 = {
   name: "Form:TextArea",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
   inputs: [{
@@ -7155,7 +7586,7 @@ function Textarea(props) {
 var textarea_default = Textarea;
 
 // src/blocks/img/component-info.ts
-var componentInfo18 = {
+var componentInfo19 = {
   // friendlyName?
   name: "Raw:Img",
   hideFromInsertMenu: true,
@@ -7188,7 +7619,7 @@ function ImgComponent(props) {
 var img_default = ImgComponent;
 
 // src/blocks/video/component-info.ts
-var componentInfo19 = {
+var componentInfo20 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -7275,9 +7706,9 @@ var componentInfo19 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show12, createMemo as createMemo14 } from "solid-js";
+import { Show as Show13, createMemo as createMemo15 } from "solid-js";
 function Video(props) {
-  const videoProps = createMemo14(() => {
+  const videoProps = createMemo15(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -7296,7 +7727,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo14(() => {
+  const spreadProps = createMemo15(() => {
     return {
       ...videoProps()
     };
@@ -7325,8 +7756,8 @@ function Video(props) {
       }}
       src={props.video || "no-src"}
       poster={props.posterImage}
-    ><Show12 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show12></video>
-    <Show12
+    ><Show13 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show13></video>
+    <Show13
       when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}
     ><div
       style={{
@@ -7335,15 +7766,15 @@ function Video(props) {
         "pointer-events": "none",
         "font-size": "0px"
       }}
-    /></Show12>
-    <Show12 when={props.builderBlock?.children?.length && props.fitContent}><div
+    /></Show13>
+    <Show13 when={props.builderBlock?.children?.length && props.fitContent}><div
       style={{
         display: "flex",
         "flex-direction": "column",
         "align-items": "stretch"
       }}
-    >{props.children}</div></Show12>
-    <Show12 when={props.builderBlock?.children?.length && !props.fitContent}><div
+    >{props.children}</div></Show13>
+    <Show13 when={props.builderBlock?.children?.length && !props.fitContent}><div
       style={{
         "pointer-events": "none",
         display: "flex",
@@ -7355,7 +7786,7 @@ function Video(props) {
         width: "100%",
         height: "100%"
       }}
-    >{props.children}</div></Show12>
+    >{props.children}</div></Show13>
   </div></>;
 }
 var video_default = Video;
@@ -7363,31 +7794,31 @@ var video_default = Video;
 // src/constants/extra-components.ts
 var getExtraComponents = () => [{
   component: custom_code_default,
-  ...componentInfo11
+  ...componentInfo12
 }, {
   component: embed_default,
-  ...componentInfo12
+  ...componentInfo13
 }, ...TARGET === "rsc" ? [] : [{
   component: form_default,
-  ...componentInfo13
+  ...componentInfo14
 }, {
   component: input_default,
-  ...componentInfo14
+  ...componentInfo15
 }, {
   component: submit_button_default,
-  ...componentInfo16
+  ...componentInfo17
 }, {
   component: select_default,
-  ...componentInfo15
+  ...componentInfo16
 }, {
   component: textarea_default,
-  ...componentInfo17
+  ...componentInfo18
 }], {
   component: img_default,
-  ...componentInfo18
+  ...componentInfo19
 }, {
   component: video_default,
-  ...componentInfo19
+  ...componentInfo20
 }];
 
 // src/constants/builder-registered-components.ts
@@ -7405,19 +7836,22 @@ var getDefaultRegisteredComponents = () => [{
   ...componentInfo5
 }, {
   component: section_default,
-  ...componentInfo6
+  ...componentInfo7
 }, {
   component: slot_default,
-  ...componentInfo7
+  ...componentInfo8
 }, {
   component: symbol_default,
-  ...componentInfo8
+  ...componentInfo9
 }, {
   component: text_default,
-  ...componentInfo10
-}, ...TARGET === "rsc" ? [] : [{
+  ...componentInfo11
+}, ...TARGET === "react" ? [{
+  component: personalization_container_default,
+  ...componentInfo6
+}] : [], ...TARGET === "rsc" ? [] : [{
   component: tabs_default,
-  ...componentInfo9
+  ...componentInfo10
 }, {
   component: accordion_default,
   ...componentInfo
@@ -7455,7 +7889,7 @@ var getVariants = (content) => Object.values(content?.variations || {}).map((var
   testVariationId: variant.id,
   id: content?.id
 }));
-var checkShouldRenderVariants = ({
+var checkShouldRenderVariants2 = ({
   canTrack,
   content
 }) => {
@@ -7489,24 +7923,14 @@ var getUpdateVariantVisibilityScript = ({
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
 
-// src/components/inlined-script.tsx
-function InlinedScript(props) {
-  return <><script
-    innerHTML={props.scriptStr}
-    data-id={props.id}
-    nonce={props.nonce || ""}
-  /></>;
-}
-var Inlined_script_default = InlinedScript;
-
 // src/components/content/components/enable-editor.tsx
 import {
-  Show as Show13,
-  onMount as onMount5,
+  Show as Show14,
+  onMount as onMount6,
   on as on3,
   createEffect as createEffect3,
-  createMemo as createMemo15,
-  createSignal as createSignal15
+  createMemo as createMemo16,
+  createSignal as createSignal16
 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
@@ -7516,7 +7940,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.5";
+var SDK_VERSION = "3.0.6";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -7811,16 +8235,6 @@ async function fetchEntries(options) {
   return _processContentResult(options, content);
 }
 
-// src/functions/is-previewing.ts
-function isPreviewing(_search) {
-  const search = _search || (isBrowser() ? window.location.search : void 0);
-  if (!search) {
-    return false;
-  }
-  const normalizedSearch = getSearchString(search);
-  return Boolean(normalizedSearch.indexOf("builder.preview=") !== -1);
-}
-
 // src/helpers/uuid.ts
 function uuidv4() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
@@ -8143,7 +8557,8 @@ var setupBrowserForEditing = (options = {}) => {
         // Supports builder-model="..." attribute which is needed to
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
-        supportsCustomBreakpoints: true
+        supportsCustomBreakpoints: true,
+        blockLevelPersonalization: true
       }
     }, "*");
     window.parent?.postMessage({
@@ -8358,12 +8773,12 @@ var getWrapperClassName = (variationId) => {
 
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
-  const [ContentWrapper, setContentWrapper] = createSignal15(
+  const [ContentWrapper, setContentWrapper] = createSignal16(
     props.contentWrapper || "div"
   );
-  const [httpReqsData, setHttpReqsData] = createSignal15({});
-  const [httpReqsPending, setHttpReqsPending] = createSignal15({});
-  const [clicked, setClicked] = createSignal15(false);
+  const [httpReqsData, setHttpReqsData] = createSignal16({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal16({});
+  const [clicked, setClicked] = createSignal16(false);
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -8397,7 +8812,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo15(() => {
+  const showContentProps = createMemo16(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -8503,7 +8918,7 @@ function EnableEditor(props) {
   let elementRef;
   runHttpRequests();
   emitStateUpdate();
-  onMount5(() => {
+  onMount6(() => {
     if (isBrowser()) {
       if (isEditing() && !props.isNestedRender) {
         window.addEventListener("message", processMessage);
@@ -8572,14 +8987,14 @@ function EnableEditor(props) {
       }
     }
   });
-  const onUpdateFn_0_props_content = createMemo15(() => props.content);
+  const onUpdateFn_0_props_content = createMemo16(() => 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 = createMemo15(
+  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo16(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_1() {
@@ -8591,14 +9006,14 @@ function EnableEditor(props) {
       onUpdateFn_1
     )
   );
-  const onUpdateFn_2_props_data = createMemo15(() => props.data);
+  const onUpdateFn_2_props_data = createMemo16(() => props.data);
   function onUpdateFn_2() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
   createEffect3(on3(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
-  const onUpdateFn_3_props_locale = createMemo15(() => props.locale);
+  const onUpdateFn_3_props_locale = createMemo16(() => props.locale);
   function onUpdateFn_3() {
     if (props.locale) {
       mergeNewRootState({
@@ -8607,7 +9022,7 @@ function EnableEditor(props) {
     }
   }
   createEffect3(on3(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
-  return <><builder_context_default.Provider value={props.builderContextSignal}><Show13
+  return <><builder_context_default.Provider value={props.builderContextSignal}><Show14
     when={props.builderContextSignal.content || needsElementRefDivForEditing()}
   ><Dynamic5
     class={getWrapperClassName(
@@ -8625,14 +9040,14 @@ function EnableEditor(props) {
     {...showContentProps()}
     {...props.contentWrapperProps}
     component={ContentWrapper()}
-  >{props.children}</Dynamic5></Show13></builder_context_default.Provider></>;
+  >{props.children}</Dynamic5></Show14></builder_context_default.Provider></>;
 }
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal16 } from "solid-js";
+import { createSignal as createSignal17 } from "solid-js";
 function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal16(
+  const [injectedStyles, setInjectedStyles] = createSignal17(
     `
 ${getCss({
       cssCode: props.cssCode,
@@ -8690,7 +9105,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal17(
+  const [scriptStr, setScriptStr] = createSignal18(
     getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: props.content?.testVariationId,
@@ -8698,7 +9113,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal17(
+  const [registeredComponents, setRegisteredComponents] = createSignal18(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents || []
@@ -8713,7 +9128,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal17({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -8797,18 +9212,18 @@ function ContentComponent(props) {
       setBuilderContextSignal
     }}
   >
-    <Show14 when={props.isSsrAbTest}><Inlined_script_default
+    <Show15 when={props.isSsrAbTest}><Inlined_script_default
       id="builderio-variant-visibility"
       scriptStr={scriptStr()}
       nonce={props.nonce || ""}
-    /></Show14>
-    <Show14 when={TARGET !== "reactNative"}><Styles_default
+    /></Show15>
+    <Show15 when={TARGET !== "reactNative"}><Styles_default
       nonce={props.nonce || ""}
       isNestedRender={props.isNestedRender}
       contentId={builderContextSignal().content?.id}
       cssCode={builderContextSignal().content?.data?.cssCode}
       customFonts={builderContextSignal().content?.data?.customFonts}
-    /></Show14>
+    /></Show15>
     <Blocks_default
       blocks={builderContextSignal().content?.data?.blocks}
       context={builderContextSignal()}
@@ -8821,13 +9236,13 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal18(
-    checkShouldRenderVariants({
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal19(
+    checkShouldRenderVariants2({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  const updateCookieAndStylesScriptStr = createMemo18(() => {
+  const updateCookieAndStylesScriptStr = createMemo19(() => {
     return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
@@ -8836,10 +9251,10 @@ function ContentVariants(props) {
       props.content?.id || ""
     );
   });
-  const hideVariantsStyleString = createMemo18(() => {
+  const hideVariantsStyleString = createMemo19(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
   });
-  const defaultContent = createMemo18(() => {
+  const defaultContent = createMemo19(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -8848,16 +9263,16 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount6(() => {
+  onMount7(() => {
     setShouldRenderVariants(false);
   });
   return <><>
-    <Show15 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
+    <Show16 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
       id="builderio-init-variants-fns"
       scriptStr={getInitVariantsFnsScriptString()}
       nonce={props.nonce || ""}
-    /></Show15>
-    <Show15 when={shouldRenderVariants()}>
+    /></Show16>
+    <Show16 when={shouldRenderVariants()}>
       <Inlined_styles_default
         id="builderio-variants"
         styles={hideVariantsStyleString()}
@@ -8868,7 +9283,7 @@ function ContentVariants(props) {
         scriptStr={updateCookieAndStylesScriptStr()}
         nonce={props.nonce || ""}
       />
-      <For8 each={getVariants(props.content)}>{(variant, _index) => {
+      <For9 each={getVariants(props.content)}>{(variant, _index) => {
         const index = _index();
         return <Content_default
           apiHost={props.apiHost}
@@ -8895,8 +9310,8 @@ function ContentVariants(props) {
           trustedHosts={props.trustedHosts}
           {...{}}
         />;
-      }}</For8>
-    </Show15>
+      }}</For9>
+    </Show16>
     <Content_default
       apiHost={props.apiHost}
       nonce={props.nonce}
@@ -8951,14 +9366,14 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol2(props) {
-  const [contentToUse, setContentToUse] = createSignal19(props.symbol?.content);
-  const blocksWrapper = createMemo19(() => {
+  const [contentToUse, setContentToUse] = createSignal20(props.symbol?.content);
+  const blocksWrapper = createMemo20(() => {
     return "div";
   });
-  const contentWrapper = createMemo19(() => {
+  const contentWrapper = createMemo20(() => {
     return "div";
   });
-  const className = createMemo19(() => {
+  const className = createMemo20(() => {
     return [
       ...[props.attributes[getClassPropName()]],
       "builder-symbol",
@@ -8978,9 +9393,9 @@ function Symbol2(props) {
       }
     });
   }
-  onMount7(() => {
+  onMount8(() => {
   });
-  const onUpdateFn_0_props_symbol = createMemo19(() => props.symbol);
+  const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }
@@ -9065,6 +9480,7 @@ export {
   isEditing,
   isPreviewing,
   register,
+  setClientUserAttributes,
   setEditorSettings,
   subscribeToEditor,
   track