@builder.io/sdk-svelte 5.2.12 → 5.2.14

package/lib/browser/blocks/image/image.svelte

@@ -88,7 +88,6 @@ onMount(() => { });
     fetchpriority={highPriority ? "high" : "auto"}
     alt={altText || ""}
     {title}
-    role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}
     srcset={srcSetToUse()}

package/lib/browser/blocks/personalization-container/helpers/inlined-fns.d.ts

@@ -4,8 +4,14 @@
  */
 import type { Query, UserAttributes } from '../helpers';
 import { type PersonalizationContainerProps } from '../personalization-container.types';
+/**
+ * Mirrors helpers/studio-user-attributes.ts; stringification rules out sharing the code.
+ * Anything referenced from module scope becomes an undefined global at runtime.
+ */
+export declare function getStudioUserAttributes(): Record<string, unknown>;
 export declare function filterWithCustomTargeting(userAttributes: UserAttributes, query: Query[], startDate?: string, endDate?: string): boolean;
 export declare function updateVisibilityStylesScript(variants: PersonalizationContainerProps['variants'], blockId: string, isHydrationTarget: boolean, locale?: string): void;
-export declare const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
+export declare const STUDIO_USER_ATTRIBUTES_SCRIPT = "function getStudioUserAttributes() {\n  const params = new URLSearchParams(window.location.search);\n  if (params.get('builder.preview') !== 'BUILDER_STUDIO') {\n    return {};\n  }\n  const prefix = 'builder.userAttributes.';\n  const attributes = {};\n  params.forEach(function (value, key) {\n    if (key.indexOf(prefix) === 0) {\n      attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;\n    }\n  });\n  return attributes;\n}";
+export declare const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  Object.assign(attributes, window.builderIoStudioUserAttributes());\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
 export declare const 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}";
-export declare const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";
+export declare const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    Object.assign(attributes, window.builderIoStudioUserAttributes());\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";

package/lib/browser/blocks/personalization-container/helpers/inlined-fns.js

@@ -3,6 +3,24 @@
  * They cannot import anything.
  */
 import '../personalization-container.types';
+/**
+ * Mirrors helpers/studio-user-attributes.ts; stringification rules out sharing the code.
+ * Anything referenced from module scope becomes an undefined global at runtime.
+ */
+export function getStudioUserAttributes() {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('builder.preview') !== 'BUILDER_STUDIO') {
+        return {};
+    }
+    const prefix = 'builder.userAttributes.';
+    const attributes = {};
+    params.forEach(function (value, key) {
+        if (key.indexOf(prefix) === 0) {
+            attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;
+        }
+    });
+    return attributes;
+}
 export function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
     function isString(val) {
         return typeof val === 'string';
@@ -112,6 +130,7 @@ export function updateVisibilityStylesScript(variants, blockId, isHydrationTarge
         if (locale) {
             attributes.locale = locale;
         }
+        Object.assign(attributes, window.builderIoStudioUserAttributes());
         const winningVariantIndex = variants?.findIndex(function (variant) {
             return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
         });
@@ -126,6 +145,7 @@ export function updateVisibilityStylesScript(variants, blockId, isHydrationTarge
         }
     }
 }
-export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
+export const STUDIO_USER_ATTRIBUTES_SCRIPT = "function getStudioUserAttributes() {\n  const params = new URLSearchParams(window.location.search);\n  if (params.get('builder.preview') !== 'BUILDER_STUDIO') {\n    return {};\n  }\n  const prefix = 'builder.userAttributes.';\n  const attributes = {};\n  params.forEach(function (value, key) {\n    if (key.indexOf(prefix) === 0) {\n      attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;\n    }\n  });\n  return attributes;\n}";
+export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  Object.assign(attributes, window.builderIoStudioUserAttributes());\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
 export const 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}";
-export const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";
+export const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    Object.assign(attributes, window.builderIoStudioUserAttributes());\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";

package/lib/browser/blocks/personalization-container/helpers.js

@@ -1,11 +1,12 @@
 import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
 import { isEditing } from '../../functions/is-editing';
-import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
+import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, STUDIO_USER_ATTRIBUTES_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
 export const DEFAULT_INDEX = 'default';
 const FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = 'filterWithCustomTargeting';
 const BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = 'builderIoPersonalization';
 const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
+const STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME = 'builderIoStudioUserAttributes';
 const PERSONALIZATION_CONTAINER_COMPONENT_NAME = 'PersonalizationContainer';
 /**
  * SDKs that support Variant Containers
@@ -94,6 +95,9 @@ export const hasPersonalizationContainer = (content) => containsPersonalizationC
 export const getInitPersonalizationVariantsFnsScriptString = () => {
     return `
   (function() {
+    if (!window.${STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME}) {
+      window.${STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME} = ${STUDIO_USER_ATTRIBUTES_SCRIPT};
+    }
     if (!window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME}) {
       window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT};
     }

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.12";
+export declare const SDK_VERSION = "5.2.14";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.12";
+export const SDK_VERSION = "5.2.14";

package/lib/browser/helpers/studio-user-attributes.d.ts

@@ -0,0 +1,6 @@
+import type { UserAttributes } from './user-attributes';
+/**
+ * Studio passes its targeting overrides as query params because it cannot write the
+ * builder.userAttributes cookie on the previewed site's origin.
+ */
+export declare const getStudioUserAttributes: () => UserAttributes;

package/lib/browser/helpers/studio-user-attributes.js

@@ -0,0 +1,31 @@
+import { isBrowser } from '../functions/is-browser';
+const STUDIO_PREVIEW_PARAM = 'builder.preview';
+const STUDIO_PREVIEW_VALUE = 'BUILDER_STUDIO';
+const USER_ATTRIBUTE_PARAM_PREFIX = 'builder.userAttributes.';
+const parseStudioValue = (value) => {
+    if (value === 'true')
+        return true;
+    if (value === 'false')
+        return false;
+    return value;
+};
+/**
+ * Studio passes its targeting overrides as query params because it cannot write the
+ * builder.userAttributes cookie on the previewed site's origin.
+ */
+export const getStudioUserAttributes = () => {
+    if (!isBrowser()) {
+        return {};
+    }
+    const params = new URLSearchParams(window.location.search);
+    if (params.get(STUDIO_PREVIEW_PARAM) !== STUDIO_PREVIEW_VALUE) {
+        return {};
+    }
+    const attributes = {};
+    params.forEach((value, key) => {
+        if (key.startsWith(USER_ATTRIBUTE_PARAM_PREFIX)) {
+            attributes[key.slice(USER_ATTRIBUTE_PARAM_PREFIX.length)] = parseStudioValue(value);
+        }
+    });
+    return attributes;
+};

package/lib/browser/helpers/user-attributes.d.ts

@@ -4,7 +4,9 @@ export interface UserAttributes {
 export declare const USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
 export declare function createUserAttributesService(): {
     setUserAttributes(newAttrs: UserAttributes): void;
-    getUserAttributes(): any;
+    getUserAttributes(): {
+        [x: string]: any;
+    };
     subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
         fireImmediately?: boolean | undefined;
     }): () => void;
@@ -12,7 +14,9 @@ export declare function createUserAttributesService(): {
 };
 export declare const userAttributesService: {
     setUserAttributes(newAttrs: UserAttributes): void;
-    getUserAttributes(): any;
+    getUserAttributes(): {
+        [x: string]: any;
+    };
     subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
         fireImmediately?: boolean | undefined;
     }): () => void;

package/lib/browser/helpers/user-attributes.js

@@ -2,17 +2,25 @@ import { TARGET } from '../constants/target';
 import { isBrowser } from '../functions/is-browser';
 import { getCookieSync, setCookie } from './cookie';
 import { noSerializeWrapper } from './no-serialize-wrapper';
+import { getStudioUserAttributes } from './studio-user-attributes';
 export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
 export function createUserAttributesService() {
     let canTrack = true;
     const subscribers = new Set();
+    const getCookieUserAttributes = () => {
+        const cookie = getCookieSync({
+            name: USER_ATTRIBUTES_COOKIE_NAME,
+            canTrack
+        });
+        return cookie ? JSON.parse(cookie) : {};
+    };
     return {
         setUserAttributes(newAttrs) {
             if (!isBrowser()) {
                 return;
             }
             const userAttributes = {
-                ...this.getUserAttributes(),
+                ...getCookieUserAttributes(),
                 ...newAttrs
             };
             setCookie({
@@ -20,16 +28,22 @@ export function createUserAttributesService() {
                 value: JSON.stringify(userAttributes),
                 canTrack
             });
-            subscribers.forEach(callback => callback(userAttributes));
+            // Kept out of the cookie above so previewing never persists into a real visitor's
+            // session, but re-applied here so the site's own attributes cannot clobber it.
+            const studioAttributes = getStudioUserAttributes();
+            subscribers.forEach(callback => callback({
+                ...userAttributes,
+                ...studioAttributes
+            }));
         },
         getUserAttributes() {
             if (!isBrowser()) {
                 return {};
             }
-            return JSON.parse(getCookieSync({
-                name: USER_ATTRIBUTES_COOKIE_NAME,
-                canTrack
-            }) || '{}');
+            return {
+                ...getCookieUserAttributes(),
+                ...getStudioUserAttributes()
+            };
         },
         subscribeOnUserAttributesChange(callback, { fireImmediately } = {}) {
             subscribers.add(callback);

package/lib/edge/blocks/image/image.svelte

@@ -88,7 +88,6 @@ onMount(() => { });
     fetchpriority={highPriority ? "high" : "auto"}
     alt={altText || ""}
     {title}
-    role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}
     srcset={srcSetToUse()}

package/lib/edge/blocks/personalization-container/helpers/inlined-fns.d.ts

@@ -4,8 +4,14 @@
  */
 import type { Query, UserAttributes } from '../helpers';
 import { type PersonalizationContainerProps } from '../personalization-container.types';
+/**
+ * Mirrors helpers/studio-user-attributes.ts; stringification rules out sharing the code.
+ * Anything referenced from module scope becomes an undefined global at runtime.
+ */
+export declare function getStudioUserAttributes(): Record<string, unknown>;
 export declare function filterWithCustomTargeting(userAttributes: UserAttributes, query: Query[], startDate?: string, endDate?: string): boolean;
 export declare function updateVisibilityStylesScript(variants: PersonalizationContainerProps['variants'], blockId: string, isHydrationTarget: boolean, locale?: string): void;
-export declare const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
+export declare const STUDIO_USER_ATTRIBUTES_SCRIPT = "function getStudioUserAttributes() {\n  const params = new URLSearchParams(window.location.search);\n  if (params.get('builder.preview') !== 'BUILDER_STUDIO') {\n    return {};\n  }\n  const prefix = 'builder.userAttributes.';\n  const attributes = {};\n  params.forEach(function (value, key) {\n    if (key.indexOf(prefix) === 0) {\n      attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;\n    }\n  });\n  return attributes;\n}";
+export declare const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  Object.assign(attributes, window.builderIoStudioUserAttributes());\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
 export declare const 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}";
-export declare const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";
+export declare const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    Object.assign(attributes, window.builderIoStudioUserAttributes());\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";

package/lib/edge/blocks/personalization-container/helpers/inlined-fns.js

@@ -3,6 +3,24 @@
  * They cannot import anything.
  */
 import '../personalization-container.types';
+/**
+ * Mirrors helpers/studio-user-attributes.ts; stringification rules out sharing the code.
+ * Anything referenced from module scope becomes an undefined global at runtime.
+ */
+export function getStudioUserAttributes() {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('builder.preview') !== 'BUILDER_STUDIO') {
+        return {};
+    }
+    const prefix = 'builder.userAttributes.';
+    const attributes = {};
+    params.forEach(function (value, key) {
+        if (key.indexOf(prefix) === 0) {
+            attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;
+        }
+    });
+    return attributes;
+}
 export function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
     function isString(val) {
         return typeof val === 'string';
@@ -112,6 +130,7 @@ export function updateVisibilityStylesScript(variants, blockId, isHydrationTarge
         if (locale) {
             attributes.locale = locale;
         }
+        Object.assign(attributes, window.builderIoStudioUserAttributes());
         const winningVariantIndex = variants?.findIndex(function (variant) {
             return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
         });
@@ -126,6 +145,7 @@ export function updateVisibilityStylesScript(variants, blockId, isHydrationTarge
         }
     }
 }
-export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
+export const STUDIO_USER_ATTRIBUTES_SCRIPT = "function getStudioUserAttributes() {\n  const params = new URLSearchParams(window.location.search);\n  if (params.get('builder.preview') !== 'BUILDER_STUDIO') {\n    return {};\n  }\n  const prefix = 'builder.userAttributes.';\n  const attributes = {};\n  params.forEach(function (value, key) {\n    if (key.indexOf(prefix) === 0) {\n      attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;\n    }\n  });\n  return attributes;\n}";
+export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  Object.assign(attributes, window.builderIoStudioUserAttributes());\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
 export const 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}";
-export const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";
+export const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    Object.assign(attributes, window.builderIoStudioUserAttributes());\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";

package/lib/edge/blocks/personalization-container/helpers.js

@@ -1,11 +1,12 @@
 import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
 import { isEditing } from '../../functions/is-editing';
-import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
+import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, STUDIO_USER_ATTRIBUTES_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
 export const DEFAULT_INDEX = 'default';
 const FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = 'filterWithCustomTargeting';
 const BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = 'builderIoPersonalization';
 const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
+const STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME = 'builderIoStudioUserAttributes';
 const PERSONALIZATION_CONTAINER_COMPONENT_NAME = 'PersonalizationContainer';
 /**
  * SDKs that support Variant Containers
@@ -94,6 +95,9 @@ export const hasPersonalizationContainer = (content) => containsPersonalizationC
 export const getInitPersonalizationVariantsFnsScriptString = () => {
     return `
   (function() {
+    if (!window.${STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME}) {
+      window.${STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME} = ${STUDIO_USER_ATTRIBUTES_SCRIPT};
+    }
     if (!window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME}) {
       window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT};
     }

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.12";
+export declare const SDK_VERSION = "5.2.14";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.12";
+export const SDK_VERSION = "5.2.14";

package/lib/edge/helpers/studio-user-attributes.d.ts

@@ -0,0 +1,6 @@
+import type { UserAttributes } from './user-attributes';
+/**
+ * Studio passes its targeting overrides as query params because it cannot write the
+ * builder.userAttributes cookie on the previewed site's origin.
+ */
+export declare const getStudioUserAttributes: () => UserAttributes;

package/lib/edge/helpers/studio-user-attributes.js

@@ -0,0 +1,31 @@
+import { isBrowser } from '../functions/is-browser';
+const STUDIO_PREVIEW_PARAM = 'builder.preview';
+const STUDIO_PREVIEW_VALUE = 'BUILDER_STUDIO';
+const USER_ATTRIBUTE_PARAM_PREFIX = 'builder.userAttributes.';
+const parseStudioValue = (value) => {
+    if (value === 'true')
+        return true;
+    if (value === 'false')
+        return false;
+    return value;
+};
+/**
+ * Studio passes its targeting overrides as query params because it cannot write the
+ * builder.userAttributes cookie on the previewed site's origin.
+ */
+export const getStudioUserAttributes = () => {
+    if (!isBrowser()) {
+        return {};
+    }
+    const params = new URLSearchParams(window.location.search);
+    if (params.get(STUDIO_PREVIEW_PARAM) !== STUDIO_PREVIEW_VALUE) {
+        return {};
+    }
+    const attributes = {};
+    params.forEach((value, key) => {
+        if (key.startsWith(USER_ATTRIBUTE_PARAM_PREFIX)) {
+            attributes[key.slice(USER_ATTRIBUTE_PARAM_PREFIX.length)] = parseStudioValue(value);
+        }
+    });
+    return attributes;
+};

package/lib/edge/helpers/user-attributes.d.ts

@@ -4,7 +4,9 @@ export interface UserAttributes {
 export declare const USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
 export declare function createUserAttributesService(): {
     setUserAttributes(newAttrs: UserAttributes): void;
-    getUserAttributes(): any;
+    getUserAttributes(): {
+        [x: string]: any;
+    };
     subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
         fireImmediately?: boolean | undefined;
     }): () => void;
@@ -12,7 +14,9 @@ export declare function createUserAttributesService(): {
 };
 export declare const userAttributesService: {
     setUserAttributes(newAttrs: UserAttributes): void;
-    getUserAttributes(): any;
+    getUserAttributes(): {
+        [x: string]: any;
+    };
     subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
         fireImmediately?: boolean | undefined;
     }): () => void;

package/lib/edge/helpers/user-attributes.js

@@ -2,17 +2,25 @@ import { TARGET } from '../constants/target';
 import { isBrowser } from '../functions/is-browser';
 import { getCookieSync, setCookie } from './cookie';
 import { noSerializeWrapper } from './no-serialize-wrapper';
+import { getStudioUserAttributes } from './studio-user-attributes';
 export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
 export function createUserAttributesService() {
     let canTrack = true;
     const subscribers = new Set();
+    const getCookieUserAttributes = () => {
+        const cookie = getCookieSync({
+            name: USER_ATTRIBUTES_COOKIE_NAME,
+            canTrack
+        });
+        return cookie ? JSON.parse(cookie) : {};
+    };
     return {
         setUserAttributes(newAttrs) {
             if (!isBrowser()) {
                 return;
             }
             const userAttributes = {
-                ...this.getUserAttributes(),
+                ...getCookieUserAttributes(),
                 ...newAttrs
             };
             setCookie({
@@ -20,16 +28,22 @@ export function createUserAttributesService() {
                 value: JSON.stringify(userAttributes),
                 canTrack
             });
-            subscribers.forEach(callback => callback(userAttributes));
+            // Kept out of the cookie above so previewing never persists into a real visitor's
+            // session, but re-applied here so the site's own attributes cannot clobber it.
+            const studioAttributes = getStudioUserAttributes();
+            subscribers.forEach(callback => callback({
+                ...userAttributes,
+                ...studioAttributes
+            }));
         },
         getUserAttributes() {
             if (!isBrowser()) {
                 return {};
             }
-            return JSON.parse(getCookieSync({
-                name: USER_ATTRIBUTES_COOKIE_NAME,
-                canTrack
-            }) || '{}');
+            return {
+                ...getCookieUserAttributes(),
+                ...getStudioUserAttributes()
+            };
         },
         subscribeOnUserAttributesChange(callback, { fireImmediately } = {}) {
             subscribers.add(callback);

package/lib/node/blocks/image/image.svelte

@@ -88,7 +88,6 @@ onMount(() => { });
     fetchpriority={highPriority ? "high" : "auto"}
     alt={altText || ""}
     {title}
-    role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}
     srcset={srcSetToUse()}

package/lib/node/blocks/personalization-container/helpers/inlined-fns.d.ts

@@ -4,8 +4,14 @@
  */
 import type { Query, UserAttributes } from '../helpers';
 import { type PersonalizationContainerProps } from '../personalization-container.types';
+/**
+ * Mirrors helpers/studio-user-attributes.ts; stringification rules out sharing the code.
+ * Anything referenced from module scope becomes an undefined global at runtime.
+ */
+export declare function getStudioUserAttributes(): Record<string, unknown>;
 export declare function filterWithCustomTargeting(userAttributes: UserAttributes, query: Query[], startDate?: string, endDate?: string): boolean;
 export declare function updateVisibilityStylesScript(variants: PersonalizationContainerProps['variants'], blockId: string, isHydrationTarget: boolean, locale?: string): void;
-export declare const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
+export declare const STUDIO_USER_ATTRIBUTES_SCRIPT = "function getStudioUserAttributes() {\n  const params = new URLSearchParams(window.location.search);\n  if (params.get('builder.preview') !== 'BUILDER_STUDIO') {\n    return {};\n  }\n  const prefix = 'builder.userAttributes.';\n  const attributes = {};\n  params.forEach(function (value, key) {\n    if (key.indexOf(prefix) === 0) {\n      attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;\n    }\n  });\n  return attributes;\n}";
+export declare const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  Object.assign(attributes, window.builderIoStudioUserAttributes());\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
 export declare const 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}";
-export declare const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";
+export declare const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    Object.assign(attributes, window.builderIoStudioUserAttributes());\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";

package/lib/node/blocks/personalization-container/helpers/inlined-fns.js

@@ -3,6 +3,24 @@
  * They cannot import anything.
  */
 import '../personalization-container.types';
+/**
+ * Mirrors helpers/studio-user-attributes.ts; stringification rules out sharing the code.
+ * Anything referenced from module scope becomes an undefined global at runtime.
+ */
+export function getStudioUserAttributes() {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('builder.preview') !== 'BUILDER_STUDIO') {
+        return {};
+    }
+    const prefix = 'builder.userAttributes.';
+    const attributes = {};
+    params.forEach(function (value, key) {
+        if (key.indexOf(prefix) === 0) {
+            attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;
+        }
+    });
+    return attributes;
+}
 export function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
     function isString(val) {
         return typeof val === 'string';
@@ -112,6 +130,7 @@ export function updateVisibilityStylesScript(variants, blockId, isHydrationTarge
         if (locale) {
             attributes.locale = locale;
         }
+        Object.assign(attributes, window.builderIoStudioUserAttributes());
         const winningVariantIndex = variants?.findIndex(function (variant) {
             return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
         });
@@ -126,6 +145,7 @@ export function updateVisibilityStylesScript(variants, blockId, isHydrationTarge
         }
     }
 }
-export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
+export const STUDIO_USER_ATTRIBUTES_SCRIPT = "function getStudioUserAttributes() {\n  const params = new URLSearchParams(window.location.search);\n  if (params.get('builder.preview') !== 'BUILDER_STUDIO') {\n    return {};\n  }\n  const prefix = 'builder.userAttributes.';\n  const attributes = {};\n  params.forEach(function (value, key) {\n    if (key.indexOf(prefix) === 0) {\n      attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;\n    }\n  });\n  return attributes;\n}";
+export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  Object.assign(attributes, window.builderIoStudioUserAttributes());\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
 export const 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}";
-export const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";
+export const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    Object.assign(attributes, window.builderIoStudioUserAttributes());\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";

package/lib/node/blocks/personalization-container/helpers.js

@@ -1,11 +1,12 @@
 import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
 import { isEditing } from '../../functions/is-editing';
-import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
+import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, STUDIO_USER_ATTRIBUTES_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
 export const DEFAULT_INDEX = 'default';
 const FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = 'filterWithCustomTargeting';
 const BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = 'builderIoPersonalization';
 const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
+const STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME = 'builderIoStudioUserAttributes';
 const PERSONALIZATION_CONTAINER_COMPONENT_NAME = 'PersonalizationContainer';
 /**
  * SDKs that support Variant Containers
@@ -94,6 +95,9 @@ export const hasPersonalizationContainer = (content) => containsPersonalizationC
 export const getInitPersonalizationVariantsFnsScriptString = () => {
     return `
   (function() {
+    if (!window.${STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME}) {
+      window.${STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME} = ${STUDIO_USER_ATTRIBUTES_SCRIPT};
+    }
     if (!window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME}) {
       window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT};
     }

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.12";
+export declare const SDK_VERSION = "5.2.14";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.12";
+export const SDK_VERSION = "5.2.14";

package/lib/node/helpers/studio-user-attributes.d.ts

@@ -0,0 +1,6 @@
+import type { UserAttributes } from './user-attributes';
+/**
+ * Studio passes its targeting overrides as query params because it cannot write the
+ * builder.userAttributes cookie on the previewed site's origin.
+ */
+export declare const getStudioUserAttributes: () => UserAttributes;

package/lib/node/helpers/studio-user-attributes.js

@@ -0,0 +1,31 @@
+import { isBrowser } from '../functions/is-browser';
+const STUDIO_PREVIEW_PARAM = 'builder.preview';
+const STUDIO_PREVIEW_VALUE = 'BUILDER_STUDIO';
+const USER_ATTRIBUTE_PARAM_PREFIX = 'builder.userAttributes.';
+const parseStudioValue = (value) => {
+    if (value === 'true')
+        return true;
+    if (value === 'false')
+        return false;
+    return value;
+};
+/**
+ * Studio passes its targeting overrides as query params because it cannot write the
+ * builder.userAttributes cookie on the previewed site's origin.
+ */
+export const getStudioUserAttributes = () => {
+    if (!isBrowser()) {
+        return {};
+    }
+    const params = new URLSearchParams(window.location.search);
+    if (params.get(STUDIO_PREVIEW_PARAM) !== STUDIO_PREVIEW_VALUE) {
+        return {};
+    }
+    const attributes = {};
+    params.forEach((value, key) => {
+        if (key.startsWith(USER_ATTRIBUTE_PARAM_PREFIX)) {
+            attributes[key.slice(USER_ATTRIBUTE_PARAM_PREFIX.length)] = parseStudioValue(value);
+        }
+    });
+    return attributes;
+};

package/lib/node/helpers/user-attributes.d.ts

@@ -4,7 +4,9 @@ export interface UserAttributes {
 export declare const USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
 export declare function createUserAttributesService(): {
     setUserAttributes(newAttrs: UserAttributes): void;
-    getUserAttributes(): any;
+    getUserAttributes(): {
+        [x: string]: any;
+    };
     subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
         fireImmediately?: boolean | undefined;
     }): () => void;
@@ -12,7 +14,9 @@ export declare function createUserAttributesService(): {
 };
 export declare const userAttributesService: {
     setUserAttributes(newAttrs: UserAttributes): void;
-    getUserAttributes(): any;
+    getUserAttributes(): {
+        [x: string]: any;
+    };
     subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
         fireImmediately?: boolean | undefined;
     }): () => void;

package/lib/node/helpers/user-attributes.js

@@ -2,17 +2,25 @@ import { TARGET } from '../constants/target';
 import { isBrowser } from '../functions/is-browser';
 import { getCookieSync, setCookie } from './cookie';
 import { noSerializeWrapper } from './no-serialize-wrapper';
+import { getStudioUserAttributes } from './studio-user-attributes';
 export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
 export function createUserAttributesService() {
     let canTrack = true;
     const subscribers = new Set();
+    const getCookieUserAttributes = () => {
+        const cookie = getCookieSync({
+            name: USER_ATTRIBUTES_COOKIE_NAME,
+            canTrack
+        });
+        return cookie ? JSON.parse(cookie) : {};
+    };
     return {
         setUserAttributes(newAttrs) {
             if (!isBrowser()) {
                 return;
             }
             const userAttributes = {
-                ...this.getUserAttributes(),
+                ...getCookieUserAttributes(),
                 ...newAttrs
             };
             setCookie({
@@ -20,16 +28,22 @@ export function createUserAttributesService() {
                 value: JSON.stringify(userAttributes),
                 canTrack
             });
-            subscribers.forEach(callback => callback(userAttributes));
+            // Kept out of the cookie above so previewing never persists into a real visitor's
+            // session, but re-applied here so the site's own attributes cannot clobber it.
+            const studioAttributes = getStudioUserAttributes();
+            subscribers.forEach(callback => callback({
+                ...userAttributes,
+                ...studioAttributes
+            }));
         },
         getUserAttributes() {
             if (!isBrowser()) {
                 return {};
             }
-            return JSON.parse(getCookieSync({
-                name: USER_ATTRIBUTES_COOKIE_NAME,
-                canTrack
-            }) || '{}');
+            return {
+                ...getCookieUserAttributes(),
+                ...getStudioUserAttributes()
+            };
         },
         subscribeOnUserAttributesChange(callback, { fireImmediately } = {}) {
             subscribers.add(callback);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "5.2.12",
+  "version": "5.2.14",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/image/image.svelte

@@ -97,7 +97,6 @@
     fetchpriority={highPriority ? "high" : "auto"}
     alt={altText || ""}
     {title}
-    role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}
     srcset={srcSetToUse()}

package/src/blocks/personalization-container/helpers/inlined-fns.ts

@@ -5,6 +5,25 @@
 
 import type { Query, UserAttributes } from '../helpers';
 import { type PersonalizationContainerProps } from '../personalization-container.types';
+
+/**
+ * Mirrors helpers/studio-user-attributes.ts; stringification rules out sharing the code.
+ * Anything referenced from module scope becomes an undefined global at runtime.
+ */
+export function getStudioUserAttributes() {
+  const params = new URLSearchParams(window.location.search);
+  if (params.get('builder.preview') !== 'BUILDER_STUDIO') {
+    return {};
+  }
+  const prefix = 'builder.userAttributes.';
+  const attributes: Record<string, unknown> = {};
+  params.forEach(function (value, key) {
+    if (key.indexOf(prefix) === 0) {
+      attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;
+    }
+  });
+  return attributes;
+}
 export function filterWithCustomTargeting(userAttributes: UserAttributes, query: Query[], startDate?: string, endDate?: string) {
   function isString(val: unknown): val is string {
     return typeof val === 'string';
@@ -110,6 +129,7 @@ export function updateVisibilityStylesScript(variants: PersonalizationContainerP
     if (locale) {
       attributes.locale = locale;
     }
+    Object.assign(attributes, (window as any).builderIoStudioUserAttributes());
     const winningVariantIndex = variants?.findIndex(function (variant) {
       return (window as any).filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
     });
@@ -123,6 +143,7 @@ export function updateVisibilityStylesScript(variants: PersonalizationContainerP
     }
   }
 }
-export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
+export const STUDIO_USER_ATTRIBUTES_SCRIPT = "function getStudioUserAttributes() {\n  const params = new URLSearchParams(window.location.search);\n  if (params.get('builder.preview') !== 'BUILDER_STUDIO') {\n    return {};\n  }\n  const prefix = 'builder.userAttributes.';\n  const attributes = {};\n  params.forEach(function (value, key) {\n    if (key.indexOf(prefix) === 0) {\n      attributes[key.slice(prefix.length)] = value === 'true' ? true : value === 'false' ? false : value;\n    }\n  });\n  return attributes;\n}";
+export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  Object.assign(attributes, window.builderIoStudioUserAttributes());\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
 export const 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}";
-export const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";
+export const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    Object.assign(attributes, window.builderIoStudioUserAttributes());\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";

package/src/blocks/personalization-container/helpers.ts

@@ -4,12 +4,13 @@ import { isEditing } from '../../functions/is-editing';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { BuilderContent } from '../../types/builder-content';
 import type { Target } from '../../types/targets';
-import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
+import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, STUDIO_USER_ATTRIBUTES_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
 import type { PersonalizationContainerProps } from './personalization-container.types';
 export const DEFAULT_INDEX = 'default';
 const FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = 'filterWithCustomTargeting';
 const BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = 'builderIoPersonalization';
 const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
+const STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME = 'builderIoStudioUserAttributes';
 const PERSONALIZATION_CONTAINER_COMPONENT_NAME = 'PersonalizationContainer';
 export type UserAttributes = {
   date?: string | Date;
@@ -126,6 +127,9 @@ export const hasPersonalizationContainer = (content: BuilderContent | null | und
 export const getInitPersonalizationVariantsFnsScriptString = () => {
   return `
   (function() {
+    if (!window.${STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME}) {
+      window.${STUDIO_USER_ATTRIBUTES_SCRIPT_FN_NAME} = ${STUDIO_USER_ATTRIBUTES_SCRIPT};
+    }
     if (!window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME}) {
       window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT};
     }

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.12"
+export const SDK_VERSION = "5.2.14"

package/src/helpers/studio-user-attributes.ts

@@ -0,0 +1,31 @@
+import { isBrowser } from '../functions/is-browser';
+import type { UserAttributes } from './user-attributes';
+const STUDIO_PREVIEW_PARAM = 'builder.preview';
+const STUDIO_PREVIEW_VALUE = 'BUILDER_STUDIO';
+const USER_ATTRIBUTE_PARAM_PREFIX = 'builder.userAttributes.';
+const parseStudioValue = (value: string) => {
+  if (value === 'true') return true;
+  if (value === 'false') return false;
+  return value;
+};
+
+/**
+ * Studio passes its targeting overrides as query params because it cannot write the
+ * builder.userAttributes cookie on the previewed site's origin.
+ */
+export const getStudioUserAttributes = (): UserAttributes => {
+  if (!isBrowser()) {
+    return {};
+  }
+  const params = new URLSearchParams(window.location.search);
+  if (params.get(STUDIO_PREVIEW_PARAM) !== STUDIO_PREVIEW_VALUE) {
+    return {};
+  }
+  const attributes: UserAttributes = {};
+  params.forEach((value, key) => {
+    if (key.startsWith(USER_ATTRIBUTE_PARAM_PREFIX)) {
+      attributes[key.slice(USER_ATTRIBUTE_PARAM_PREFIX.length)] = parseStudioValue(value);
+    }
+  });
+  return attributes;
+}

package/src/helpers/user-attributes.ts

@@ -2,6 +2,7 @@ import { TARGET } from '../constants/target';
 import { isBrowser } from '../functions/is-browser';
 import { getCookieSync, setCookie } from './cookie';
 import { noSerializeWrapper } from './no-serialize-wrapper';
+import { getStudioUserAttributes } from './studio-user-attributes';
 export interface UserAttributes {
   [key: string]: any;
 }
@@ -9,13 +10,20 @@ export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
 export function createUserAttributesService() {
   let canTrack = true;
   const subscribers = new Set<(attrs: UserAttributes) => void>();
+  const getCookieUserAttributes = (): UserAttributes => {
+    const cookie = getCookieSync({
+      name: USER_ATTRIBUTES_COOKIE_NAME,
+      canTrack
+    });
+    return cookie ? JSON.parse(cookie) : {};
+  };
   return {
     setUserAttributes(newAttrs: UserAttributes) {
       if (!isBrowser()) {
         return;
       }
       const userAttributes: UserAttributes = {
-        ...this.getUserAttributes(),
+        ...getCookieUserAttributes(),
         ...newAttrs
       };
       setCookie({
@@ -23,16 +31,22 @@ export function createUserAttributesService() {
         value: JSON.stringify(userAttributes),
         canTrack
       });
-      subscribers.forEach(callback => callback(userAttributes));
+      // Kept out of the cookie above so previewing never persists into a real visitor's
+      // session, but re-applied here so the site's own attributes cannot clobber it.
+      const studioAttributes = getStudioUserAttributes();
+      subscribers.forEach(callback => callback({
+        ...userAttributes,
+        ...studioAttributes
+      }));
     },
     getUserAttributes() {
       if (!isBrowser()) {
         return {};
       }
-      return JSON.parse(getCookieSync({
-        name: USER_ATTRIBUTES_COOKIE_NAME,
-        canTrack
-      }) || '{}');
+      return {
+        ...getCookieUserAttributes(),
+        ...getStudioUserAttributes()
+      };
     },
     subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, {
       fireImmediately