@builder.io/sdk-svelte 5.2.11 → 5.2.13

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

@@ -78,7 +78,9 @@ onMount(() => { });
     <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
   {/if}<img
     style={stringifyStyles({
-      objectPosition: backgroundPosition || "center",
+      objectPosition: `var(--builder-image-position, ${
+        backgroundPosition || "center"
+      })`,
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
     })}

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/components/block/components/block-styles.svelte

@@ -3,7 +3,7 @@
 <script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes";
 import { TARGET } from "../../../constants/target";
 import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
-import { createCssClass } from "../../../helpers/css";
+import { createCssClass, getResponsiveStylesWithImagePosition, } from "../../../helpers/css";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
 export let block;
@@ -21,7 +21,7 @@ $: canShowBlock = () => {
 };
 $: css = () => {
     const processedBlock = block;
-    const styles = processedBlock.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(processedBlock.responsiveStyles, processedBlock.component?.name === "Image");
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);

package/lib/node/components/block/components/live-edit-block-styles.svelte

@@ -4,7 +4,7 @@
 import { TARGET } from "../../../constants/target";
 import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
 import { getProcessedBlock } from "../../../functions/get-processed-block";
-import { createCssClass } from "../../../helpers/css";
+import { createCssClass, getResponsiveStylesWithImagePosition, } from "../../../helpers/css";
 import { findBlockById } from "../../../helpers/find-block";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
@@ -39,7 +39,7 @@ $: canShowBlock = () => {
     return true;
 };
 $: css = () => {
-    const styles = processedBlock?.()?.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(processedBlock?.()?.responsiveStyles, processedBlock?.()?.component?.name === "Image");
     const content = contextProvider.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.11";
+export declare const SDK_VERSION = "5.2.13";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.11";
+export const SDK_VERSION = "5.2.13";

package/lib/node/helpers/css.d.ts

@@ -1,3 +1,5 @@
+import type { BuilderBlock } from '../types/builder-block';
+export declare const getResponsiveStylesWithImagePosition: (styles: BuilderBlock['responsiveStyles'], isBuilderImage: boolean) => BuilderBlock['responsiveStyles'];
 export declare const convertStyleMapToCSSArray: (style: Partial<CSSStyleDeclaration>) => string[];
 export declare const convertStyleMapToCSS: (style: Partial<CSSStyleDeclaration>) => string;
 export declare const createCssClass: ({ mediaQuery, className, styles }: {

package/lib/node/helpers/css.js

@@ -1,5 +1,19 @@
 import { camelToKebabCase } from '../functions/camel-to-kebab-case';
 import { checkIsDefined } from './nullable';
+const withBuilderImagePosition = (style, fallback) => {
+    const imagePosition = style?.objectPosition || fallback;
+    return imagePosition ? {
+        ...style,
+        '--builder-image-position': imagePosition
+    } : style;
+};
+export const getResponsiveStylesWithImagePosition = (styles, isBuilderImage) => isBuilderImage ? {
+    ...styles,
+    large: withBuilderImagePosition(styles?.large, 'initial'),
+    medium: withBuilderImagePosition(styles?.medium),
+    small: withBuilderImagePosition(styles?.small),
+    xsmall: withBuilderImagePosition(styles?.xsmall)
+} : styles;
 export const convertStyleMapToCSSArray = (style) => {
     const cssProps = Object.entries(style).map(([key, value]) => {
         if (typeof value === 'string') {

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.11",
+  "version": "5.2.13",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/image/image.svelte

@@ -87,7 +87,9 @@
     <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
   {/if}<img
     style={stringifyStyles({
-      objectPosition: backgroundPosition || "center",
+      objectPosition: `var(--builder-image-position, ${
+        backgroundPosition || "center"
+      })`,
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
     })}

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/components/block/components/block-styles.svelte

@@ -13,7 +13,10 @@
   import { TARGET } from "../../../constants/target";
   import type { BuilderContextInterface } from "../../../context/types";
   import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
-  import { createCssClass } from "../../../helpers/css";
+  import {
+    createCssClass,
+    getResponsiveStylesWithImagePosition,
+  } from "../../../helpers/css";
   import { checkIsDefined } from "../../../helpers/nullable";
   import type { BuilderBlock } from "../../../types/builder-block";
   import InlinedStyles from "../../inlined-styles.svelte";
@@ -34,7 +37,10 @@
   };
   $: css = () => {
     const processedBlock = block;
-    const styles = processedBlock.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(
+      processedBlock.responsiveStyles,
+      processedBlock.component?.name === "Image"
+    );
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}

package/src/components/block/components/live-edit-block-styles.svelte

@@ -13,7 +13,10 @@
   import { TARGET } from "../../../constants/target";
   import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
   import { getProcessedBlock } from "../../../functions/get-processed-block";
-  import { createCssClass } from "../../../helpers/css";
+  import {
+    createCssClass,
+    getResponsiveStylesWithImagePosition,
+  } from "../../../helpers/css";
   import { findBlockById } from "../../../helpers/find-block";
   import { checkIsDefined } from "../../../helpers/nullable";
   import type {
@@ -54,7 +57,10 @@
     return true;
   };
   $: css = () => {
-    const styles = processedBlock?.()?.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(
+      processedBlock?.()?.responsiveStyles,
+      processedBlock?.()?.component?.name === "Image"
+    );
     const content = contextProvider.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.11"
+export const SDK_VERSION = "5.2.13"

package/src/helpers/css.ts

@@ -1,5 +1,20 @@
 import { camelToKebabCase } from '../functions/camel-to-kebab-case';
+import type { BuilderBlock } from '../types/builder-block';
 import { checkIsDefined } from './nullable';
+const withBuilderImagePosition = (style: Partial<CSSStyleDeclaration> | undefined, fallback?: string): Partial<CSSStyleDeclaration> | undefined => {
+  const imagePosition = style?.objectPosition || fallback;
+  return imagePosition ? ({
+    ...style,
+    '--builder-image-position': imagePosition
+  } as Partial<CSSStyleDeclaration>) : style;
+};
+export const getResponsiveStylesWithImagePosition = (styles: BuilderBlock['responsiveStyles'], isBuilderImage: boolean): BuilderBlock['responsiveStyles'] => isBuilderImage ? {
+  ...styles,
+  large: withBuilderImagePosition(styles?.large, 'initial'),
+  medium: withBuilderImagePosition(styles?.medium),
+  small: withBuilderImagePosition(styles?.small),
+  xsmall: withBuilderImagePosition(styles?.xsmall)
+} : styles;
 export const convertStyleMapToCSSArray = (style: Partial<CSSStyleDeclaration>): string[] => {
   const cssProps = Object.entries(style).map(([key, value]) => {
     if (typeof value === 'string') {