@surfside/ads-core-web 0.1.22 → 0.3.0-c2d1d13c.0

package/lib/esm/helpers/WebTelemetryCollector.js

@@ -0,0 +1,52 @@
+import { ITelemetryCollector } from '@surfside/ads-core';
+export class WebTelemetryCollector extends ITelemetryCollector {
+    _endpoint;
+    _tags;
+    _batchIntervalMs;
+    _pageUrl;
+    _queue = [];
+    _flushTimer;
+    _device;
+    constructor(options) {
+        super(options.accountId, options.siteId, options.channelId, options.locationId, options.device);
+        this._endpoint = options.endpoint;
+        this._tags = { pageSessionId: crypto.randomUUID(), ...(options.tags ?? {}) };
+        this._batchIntervalMs = options.batchIntervalMs ?? 1000;
+        this._pageUrl = options.url ?? globalThis.location?.href;
+    }
+    record(entry) {
+        this._queue.push({
+            device: this.device,
+            pageUrl: this._pageUrl ?? globalThis?.window?.location?.href,
+            ...entry,
+            tags: { ...this._tags, ...(entry.tags ?? {}) },
+        });
+        if (this._batchIntervalMs === 0) {
+            this.flush();
+            return;
+        }
+        clearTimeout(this._flushTimer);
+        this._flushTimer = setTimeout(() => this.flush(), this._batchIntervalMs);
+        if (this._queue.length >= 100) {
+            this.flush();
+        }
+    }
+    flush() {
+        if (this._queue.length === 0) {
+            return;
+        }
+        const payload = JSON.stringify(this._queue.splice(0));
+        clearTimeout(this._flushTimer);
+        this._flushTimer = undefined;
+        const sent = globalThis.navigator.sendBeacon(this._endpoint, new Blob([payload], { type: 'application/json' }));
+        if (!sent) {
+            fetch(this._endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: payload,
+                keepalive: true,
+            }).catch(() => { });
+        }
+    }
+}
+//# sourceMappingURL=WebTelemetryCollector.js.map

package/lib/esm/helpers/WebTelemetryCollector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebTelemetryCollector.js","sourceRoot":"../@surfside-ads-core-web/","sources":["helpers/WebTelemetryCollector.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,mBAAmB,EAGtB,MAAM,oBAAoB,CAAC;AAc5B,MAAM,OAAO,qBAAsB,SAAQ,mBAAmB;IACzC,SAAS,CAAS;IAClB,KAAK,CAAyB;IAC9B,gBAAgB,CAAS;IACzB,QAAQ,CAAqB;IACtC,MAAM,GAAsB,EAAE,CAAC;IAC/B,WAAW,CAA4C;IACvD,OAAO,CAA+B;IAE9C,YAAY,OAAsC;QAC9C,KAAK,CACD,OAAO,CAAC,SAAS,EACjB,OAAO,CAAC,MAAM,EACd,OAAO,CAAC,SAAS,EACjB,OAAO,CAAC,UAAU,EAClB,OAAO,CAAC,MAAM,CACjB,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC;QAClC,IAAI,CAAC,KAAK,GAAG,EAAE,aAAa,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,CAAC;QAC7E,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,eAAe,IAAI,IAAI,CAAC;QACxD,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,GAAG,IAAI,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC;IAC7D,CAAC;IAED,MAAM,CAAC,KAAsB;QACzB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACb,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI;YAC5D,GAAG,KAAK;YACR,IAAI,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE;SACjD,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,OAAO;QACX,CAAC;QACD,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;IACL,CAAC;IAED,KAAK;QACD,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC3B,OAAO;QACX,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAC;QAChH,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;gBAClB,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE,EAAE,cAAc,EAAE,kBAAkB,EAAE;gBAC/C,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,IAAI;aAClB,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACvB,CAAC;IACL,CAAC;CACJ"}

package/lib/esm/helpers/index.js

@@ -1,4 +1,5 @@
 export * from './Dom';
 export * from './Trackers';
 export * from './UserId';
+export * from './WebTelemetryCollector';
 //# sourceMappingURL=index.js.map

package/lib/esm/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"src/","sources":["helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../@surfside-ads-core-web/","sources":["helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,yBAAyB,CAAC"}

package/lib/esm/index.js

@@ -3,17 +3,19 @@ import { RenderCarousel } from './rendering/Carousel';
 import { RenderBanner } from './rendering';
 import { RenderProductCard } from './rendering/ProductCard';
 import { RenderVideo } from './rendering/Video';
+import { GetSurfUserIdCookie } from './helpers';
+export const PROD_TELEMETRY_SERVICE = '//telemetry.surfside.io/v1/ingest';
 export * from './rendering';
 export * from './helpers';
-export * from './BuildInfo';
+export * as SurfsideAdsCoreWebVersionInfo from './BuildInfo';
+export * from './Init';
 export const InitSurfAdsWebInternal = async (apiResAsync) => {
     const apiRes = await apiResAsync;
     if (!apiRes.ok) {
         return apiRes;
     }
     const { logger, configuration, device, geo, evaluateProductCardTemplate, navigator } = apiRes.value;
-    evaluateProductCardTemplate({});
-    const isMobile = () => typeof window !== 'undefined' ? (window.ontouchstart !== undefined) : false;
+    const isMobile = () => typeof globalThis.window !== 'undefined' ? (globalThis.ontouchstart !== undefined) : false;
     const renderBanner = RenderBanner.bind(undefined, logger, isMobile());
     const renderProductCard = RenderProductCard.bind(undefined, logger, configuration.templates.productCardStylesheet, configuration.templates.javascriptCallbacks, evaluateProductCardTemplate);
     const renderCarousel = RenderCarousel.bind(undefined, logger, evaluateProductCardTemplate, configuration.settings.sponsoredByEnabled === true, configuration.templates.productCardStylesheet, configuration.templates.carouselStylesheet, configuration.templates.javascriptCallbacks);
@@ -27,6 +29,6 @@ export const InitSurfAdsWebInternal = async (apiResAsync) => {
     });
 };
 export const InitSurfAdsWeb = async (accountId, siteId, channelId, locationId, userId, logger) => {
-    return InitSurfAdsWebInternal(InitSurfAdsCoreClient(accountId, siteId, channelId, locationId, userId, logger));
+    return await InitSurfAdsWebInternal(InitSurfAdsCoreClient(accountId, siteId, channelId, locationId, userId ?? await GetSurfUserIdCookie(logger), logger));
 };
 //# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,qBAAqB,EACrB,EAAE,GAIL,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,cAAc,EAAyB,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAuB,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAA4B,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,WAAW,EAAsB,MAAM,mBAAmB,CAAC;AAEpE,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAS5B,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,EACvC,WAA4C,EAChB,EAAE;IAC9B,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC;IACjC,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;QACb,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,MAAM,EACF,MAAM,EACN,aAAa,EACb,MAAM,EACN,GAAG,EACH,2BAA2B,EAC3B,SAAS,EACZ,GAAG,MAAM,CAAC,KAAK,CAAC;IAEjB,2BAA2B,CAAC,EAAE,CAAC,CAAC;IAEhC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnG,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtE,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAC9D,aAAa,CAAC,SAAS,CAAC,qBAAqB,EAC7C,aAAa,CAAC,SAAS,CAAC,mBAAmB,EAC3C,2BAA2B,CAC9B,CAAC;IACF,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EACxD,2BAA2B,EAC3B,aAAa,CAAC,QAAQ,CAAC,kBAAkB,KAAK,IAAI,EAClD,aAAa,CAAC,SAAS,CAAC,qBAAqB,EAC7C,aAAa,CAAC,SAAS,CAAC,kBAAkB,EAC1C,aAAa,CAAC,SAAS,CAAC,mBAAmB,CAC9C,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1F,OAAO,EAAE,CAAC;QACN,GAAG,MAAM,CAAC,KAAK;QACf,YAAY;QACZ,iBAAiB;QACjB,cAAc;QACd,WAAW;KACd,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,EAC/B,SAAiB,EACjB,MAAc,EACd,SAAiB,EACjB,UAAkB,EAClB,MAA0B,EAC1B,MAAgB,EACY,EAAE;IAC9B,OAAO,sBAAsB,CAAC,qBAAqB,CAC/C,SAAS,EACT,MAAM,EACN,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,CACT,CAAC,CAAC;AACP,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../@surfside-ads-core-web/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,qBAAqB,EACrB,EAAE,GAIL,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,cAAc,EAAyB,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAuB,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAA4B,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,WAAW,EAAsB,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,CAAC,MAAM,sBAAsB,GAAG,mCAAmC,CAAC;AAE1E,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,OAAO,KAAK,6BAA6B,MAAM,aAAa,CAAC;AAC7D,cAAc,QAAQ,CAAC;AASvB,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,EACvC,WAA4C,EAChB,EAAE;IAC9B,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC;IACjC,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;QACb,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,MAAM,EACF,MAAM,EACN,aAAa,EACb,MAAM,EACN,GAAG,EACH,2BAA2B,EAC3B,SAAS,EACZ,GAAG,MAAM,CAAC,KAAK,CAAC;IAEjB,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,OAAO,UAAU,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElH,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtE,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAC9D,aAAa,CAAC,SAAS,CAAC,qBAAqB,EAC7C,aAAa,CAAC,SAAS,CAAC,mBAAmB,EAC3C,2BAA2B,CAC9B,CAAC;IACF,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EACxD,2BAA2B,EAC3B,aAAa,CAAC,QAAQ,CAAC,kBAAkB,KAAK,IAAI,EAClD,aAAa,CAAC,SAAS,CAAC,qBAAqB,EAC7C,aAAa,CAAC,SAAS,CAAC,kBAAkB,EAC1C,aAAa,CAAC,SAAS,CAAC,mBAAmB,CAC9C,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1F,OAAO,EAAE,CAAC;QACN,GAAG,MAAM,CAAC,KAAK;QACf,YAAY;QACZ,iBAAiB;QACjB,cAAc;QACd,WAAW;KACd,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,EAC/B,SAAiB,EACjB,MAAc,EACd,SAAiB,EACjB,UAAkB,EAClB,MAA0B,EAC1B,MAAgB,EACY,EAAE;IAC9B,OAAO,MAAM,sBAAsB,CAAC,qBAAqB,CACrD,SAAS,EACT,MAAM,EACN,SAAS,EACT,UAAU,EACV,MAAM,IAAI,MAAM,mBAAmB,CAAC,MAAM,CAAC,EAC3C,MAAM,CACT,CAAC,CAAC;AACP,CAAC,CAAC"}

package/lib/esm/rendering/Banner.js

@@ -6,8 +6,9 @@ export const RenderBanner = (logger, isMobile, builtBanner) => {
     const log = Ctx(logger)?.with('RenderBanner');
     log?.info('Rendering banner');
     log?.debug(builtBanner);
+    const stopTimer = log?.time?.('render banner');
     /* Create container dom element */
-    const bannerContainer = document.createElement('div');
+    const bannerContainer = globalThis.document.createElement('div');
     const shadow = bannerContainer.attachShadow({ mode: 'open' });
     const creativeContainerRes = Template(log, 'surfside-banner', template, style);
     if (!creativeContainerRes.ok) {
@@ -47,6 +48,7 @@ export const RenderBanner = (logger, isMobile, builtBanner) => {
     }
     log?.debug('Appending banner win pixel', tracker);
     creativeContainer.appendChild(PixelTracker(tracker));
+    stopTimer?.();
     return Ok(bannerContainer);
 };
 export class MissingNurlError extends Error {
@@ -57,34 +59,34 @@ export class MissingNurlError extends Error {
     }
 }
 ;
-const template = `<div>
-    <div class="surfside-banner-adm">
-
-    </div>
-    <div class="surfside-banner-watermark">
-
-    </div>
-</div>
+const template = `<div>
+    <div class="surfside-banner-adm">
+
+    </div>
+    <div class="surfside-banner-watermark">
+
+    </div>
+</div>
 `;
-const style = `.surfside-banner {
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    max-width: 100%;
-    height: auto;
-    width: 100%;
-}
-
-.surfside-banner-adm {
-    display: flex;
-
-    a {
-        width: 100%;
-
-        img {
-            width: 100%;
-            height: auto;
-        }
-    }
+const style = `.surfside-banner {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    max-width: 100%;
+    height: auto;
+    width: 100%;
+}
+
+.surfside-banner-adm {
+    display: flex;
+
+    a {
+        width: 100%;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
 }`;
 //# sourceMappingURL=Banner.js.map

package/lib/esm/rendering/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"src/","sources":["rendering/Banner.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Banner.js","sourceRoot":"../@surfside-ads-core-web/","sources":["rendering/Banner.ts"],"names":[],"mappings":"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"}

package/lib/esm/rendering/Carousel.js

@@ -2,12 +2,15 @@ import { ConsumeNAsync, Ctx, Err, Ok, } from '@surfside/ads-core-client';
 import { RenderProductCard } from './ProductCard';
 import { GetNumberAttributeOr } from '../helpers/Dom';
 import { MissingTemplateElementError, Template } from './Framework';
+const SURF_CARD_SIZE = '--surf-card-size';
 ;
 ;
 ;
+const smoothStop3 = (t) => 1 - ((1 - t) * (1 - t) * (1 - t));
 export const RenderCarousel = async (logger, evaluateProductCardTemplate, sponsoredByEnabled, productCardStylesheet, carouselStylesheet, callbacks, carousel, cardMinWidth, carouselLimits, nextType, cardMaxWidth) => {
     const log = Ctx(logger)?.with('RenderCarousel');
     log?.info('Rendering Carousel', cardMinWidth, cardMaxWidth, carouselLimits);
+    const stopTimer = log?.time?.('render banner');
     const container = Template(log, 'surf-carousel', template, style + '\n' + carouselStylesheet);
     if (!container.ok) {
         return container;
@@ -15,7 +18,7 @@ export const RenderCarousel = async (logger, evaluateProductCardTemplate, sponso
     log?.debug(container.value.outerHTML);
     const rightArrow = container.value.querySelector('.arrow.right') ?? null;
     const leftArrow = container.value.querySelector('.arrow.left') ?? null;
-    const items = container.value.querySelector('.items') ?? null;
+    const items = container.value.querySelector('.items');
     if (rightArrow === null || leftArrow === null || items === null) {
         return Err(new MalformedCarouselError(container.value));
     }
@@ -47,11 +50,60 @@ export const RenderCarousel = async (logger, evaluateProductCardTemplate, sponso
         }
         handleBackPage(log, sponsoredByEnabled, container.value, items, cardMinWidth, cardMaxWidth);
     });
+    let touchStart;
+    let lastTouch;
+    items.addEventListener('touchstart', (e) => {
+        log?.debug('touchstart');
+        const touch = e.touches[0];
+        if (touch === undefined) {
+            return;
+        }
+        touchStart = touch.clientX;
+    });
+    items.addEventListener('touchmove', e => {
+        const touch = e.touches[0];
+        if (touch === undefined || touchStart === undefined) {
+            touchStart = undefined;
+            lastTouch = undefined;
+            return;
+        }
+        lastTouch = touch.clientX;
+        const maxSwipe = items.children[0]?.clientWidth ?? cardMaxWidth;
+        const sign = Math.sign(lastTouch - touchStart);
+        const distance = Math.min(maxSwipe, Math.abs(lastTouch - touchStart));
+        const smooth = smoothStop3(Math.min(distance / maxSwipe, 1));
+        const diff = smooth * distance * sign;
+        items.style.marginLeft = `${diff}px`;
+        log?.debug(`${diff}px`);
+    });
+    items.addEventListener('touchend', () => {
+        log?.debug('touchend');
+        items.style.marginLeft = '0px';
+        if (lastTouch !== undefined && touchStart !== undefined) {
+            const diff = lastTouch - touchStart;
+            log?.info('Touch Diff', diff);
+            if (diff < -16) {
+                handleNextPage(log, evaluateProductCardTemplate, sponsoredByEnabled, productCardStylesheet, callbacks, container.value, items, cardMinWidth, cardMaxWidth, carouselLimits, nextType, generator);
+            }
+            else if (diff > 16) {
+                handleBackPage(log, sponsoredByEnabled, container.value, items, cardMinWidth, cardMaxWidth);
+            }
+            return;
+        }
+        touchStart = undefined;
+        lastTouch = undefined;
+    });
+    stopTimer?.();
     return Ok(carouselState);
 };
 const addItems = (logger, stylesheet, sponsoredByEnabled, callbacks, evaluateProductCardTemplate, items, itemsDiv, availableSlots, minWidth, maxWidth) => {
     const log = Ctx(logger)?.with('addItems');
     log?.info('Adding items to carousel', items.length);
+    const cardSizeRes = getCardSizeOverride(itemsDiv);
+    log?.debug('Item mobile scale', cardSizeRes);
+    const cardSize = cardSizeRes.ok
+        ? cardSizeRes.value
+        : maxWidth ?? minWidth;
     const renderedCards = [];
     for (const item of items) {
         const productCard = RenderProductCard(log, stylesheet, callbacks, evaluateProductCardTemplate, item);
@@ -73,7 +125,8 @@ const addItems = (logger, stylesheet, sponsoredByEnabled, callbacks, evaluatePro
         const cardIndex = itemsDiv.children.length;
         productCard.value.classList.add(`card-${cardIndex}`);
         productCard.value.classList.add('surf-product-card');
-        productCard.value.style.width = `${(maxWidth ?? minWidth)}px`;
+        productCard.value.style.minWidth = `${cardSize}px`;
+        productCard.value.style.maxWidth = `${cardSize}px`;
         log?.debug('Flex value', `1 0 ${Math.ceil((1 / availableSlots) * 100000) / 1000}%`);
         productCard.value.style.flex = `1 0 ${Math.ceil((1 / availableSlots) * 100000) / 1000}%`;
         itemsDiv.appendChild(productCard.value);
@@ -81,19 +134,34 @@ const addItems = (logger, stylesheet, sponsoredByEnabled, callbacks, evaluatePro
     }
     return renderedCards;
 };
+const getCardSizeOverride = (element) => {
+    const windowStyle = globalThis.getComputedStyle(element);
+    const cardSizeRes = Number(windowStyle.getPropertyValue(SURF_CARD_SIZE));
+    const cardSize = Number.isNaN(cardSizeRes) || cardSizeRes === 0
+        ? Err(new Error('Not a valid card size'))
+        : Ok(cardSizeRes);
+    return cardSize;
+};
 const handleNextPage = async (logger, evaluateProductCardTemplate, sponsoredByEnabled, stylesheet, callbacks, rootElement, itemsDiv, cardMinWidth, cardMaxWidth, carouselLimits, nextType, carouselGenerator) => {
     const log = Ctx(logger)?.with('handleNextPage');
     log?.info('Handling next page request');
     log?.debug(cardMinWidth, carouselLimits);
+    log?.debug('root', rootElement);
     /* Get the card which the carousel is currently scrolled to (i.e, the left-most card) */
     const currentIndex = GetNumberAttributeOr(itemsDiv, 'current-index', 0);
     /* Get the total number of cards which have been rendered so far */
     const totalRendered = itemsDiv.childElementCount;
     log?.debug('currentIndex', currentIndex);
     log?.debug('totalRendered', totalRendered);
+    const cardSizeRes = getCardSizeOverride(rootElement);
+    log?.debug('Card Size Result', cardSizeRes);
+    const cardSize = cardSizeRes.ok
+        ? cardSizeRes.value
+        : (cardMaxWidth ?? cardMinWidth);
     /* Calculate how many cards fit into view currently */
     log?.debug('Root clientWidth: ', rootElement.clientWidth);
-    const slotsAvailable = Math.floor(rootElement.clientWidth / (cardMaxWidth ?? cardMinWidth));
+    log?.debug('Card size', cardSize);
+    const slotsAvailable = Math.floor(rootElement.clientWidth / cardSize);
     log?.debug('slotsAvailable', slotsAvailable);
     /* Calculate the total number of cards which have already been rendered to the RIGHT of the current page */
     const totalSlotsRenderedAfterThisPage = Math.max(0, Math.min(totalRendered, totalRendered - (currentIndex + slotsAvailable)));
@@ -127,7 +195,7 @@ const handleNextPage = async (logger, evaluateProductCardTemplate, sponsoredByEn
     })() - totalSlotsRenderedAfterThisPage); /* Finally, remove the slots which have already been rendered within the
                                               * next visible page scroll */
     log?.debug('numberOfCardsToAdd', numberOfCardsToAdd);
-    const slotsVisible = Math.floor(rootElement.clientWidth / (cardMaxWidth ?? cardMinWidth));
+    const slotsVisible = Math.floor(rootElement.clientWidth / cardSize);
     if (numberOfCardsToAdd === 0) {
         /* Scroll either to the calculated next page index, or to the last page, depending on which is smaller */
         log?.info('No new cards requested');
@@ -139,7 +207,9 @@ const handleNextPage = async (logger, evaluateProductCardTemplate, sponsoredByEn
         return Ok([]);
     }
     log?.debug('nextCardToScrollTo, either', currentIndex + slotsVisible, itemsDiv.childElementCount);
+    const stopTimer = log?.time?.('fetch n products');
     const [builtProducts, finished] = await ConsumeNAsync(carouselGenerator, numberOfCardsToAdd);
+    stopTimer?.();
     if (finished) {
         log?.debug('Finished with generator - no more products available');
     }
@@ -156,7 +226,12 @@ const handleBackPage = (logger, sponsoredByEnabled, rootElement, itemsDiv, cardM
     const log = Ctx(logger)?.with('handleBackPage');
     log?.info('scrolling back');
     const currentIndex = GetNumberAttributeOr(itemsDiv, 'current-index', 0);
-    const slotsInView = Math.floor(rootElement.clientWidth / (cardMaxWidth ?? cardMinWidth));
+    const cardSizeRes = getCardSizeOverride(rootElement);
+    log?.debug('Card Size Result', cardSizeRes);
+    const cardSize = cardSizeRes.ok
+        ? cardSizeRes.value
+        : (cardMaxWidth ?? cardMinWidth);
+    const slotsInView = Math.floor(rootElement.clientWidth / cardSize);
     const nextIndex = Math.max(0, currentIndex - slotsInView);
     const arrowsDiv = rootElement.querySelector('div.arrows');
     if (arrowsDiv === null) {
@@ -198,7 +273,12 @@ const scrollTo = (logger, itemsDiv, arrowsDiv, index, slotsVisible, finished) =>
 const checkSponsored = (logger, sponsoredByEnabled, root, itemsDiv, index, cardMinWidth, cardMaxWidth) => {
     const log = Ctx(logger)?.with('checkSponsored');
     log?.info('Checking sponsored tags');
-    const totalVisibleCards = Math.floor(root.clientWidth / (cardMaxWidth ?? cardMinWidth));
+    const cardSizeRes = getCardSizeOverride(root);
+    log?.debug('Card Size Result', cardSizeRes);
+    const cardSize = cardSizeRes.ok
+        ? cardSizeRes.value
+        : (cardMaxWidth ?? cardMinWidth);
+    const totalVisibleCards = Math.floor(root.clientWidth / cardSize);
     const visibleCards = [];
     for (let i = index; i < index + totalVisibleCards; i++) {
         const card = itemsDiv.querySelector(`.card-${i}`);
@@ -279,126 +359,127 @@ export class EmptyFirstPageError extends Error {
     }
 }
 ;
-const template = `<div class="carousel-wrapper">
-    <div class="sponsored-carousel"></div>
-    <div class="surf-carousel">
-        <div class="items"></div>
-        <div class="arrows">
-            <div class="arrow left"></div>
-            <div class="arrow right"></div>
-        </div>
-    </div>
+const template = `<div class="carousel-wrapper surf-v3">
+    <div class="sponsored-carousel"></div>
+    <div class="surf-carousel">
+        <div class="items"></div>
+        <div class="arrows">
+            <div class="arrow left"></div>
+            <div class="arrow right"></div>
+        </div>
+    </div>
 </div>`;
-const style = `
-.surf-carousel {
-    display: flex;
-    position: relative;
-    flex-grow: 1;
-
-    .sponsored-carousel {
-        font-family: 'Helvetica', Verdana, Geneva, Tahoma, sans-serif;
-        margin: 10px 0;
-        font-size: 24px;
-
-        &::before {
-            content: 'For you';
-        }
-
-        &.sponsoredByOne::before {
-            content: 'Sponsored by ';
-        }
-
-        &.recommended::before {
-            content: 'Recommended';
-        }
-
-        &.sponsoredByMany::before {
-            content: 'Sponsored';
-        }
-    }
-
-    .carousel-wrapper {
-        width: 100%;
-        overflow-x: clip;
-        position: relative;
-    }
-
-    .items {
-        z-index: 1;
-        display: flex;
-        flex-direction: row;
-        flex-grow: 1;
-        flex-wrap: nowrap;
-        align-items: stretch;
-        padding: 0 37px;
-        box-sizing: border-box;
-        transition: transform 0.4s ease-out;
-        width: 100%;
-
-        .surf-product-card {
-            flex: 1;
-            display: flex;
-            padding: 5px;
-            box-sizing: border-box;
-        }
-    }
-
-    
-}
-
-.arrows {
-
-    .arrow {
-        z-index: 2;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 40px;
-        height: 40px;
-        display: flex;
-        background-color: rgba(0, 0, 0, 0.5);
-        margin: 0 1rem;
-        justify-content: center;
-        align-items: center;
-        border-radius: 50%;
-        cursor: pointer;
-        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2),
-                    0 2px 8px 0 rgba(0, 0, 0, 0.2);
-
-        &:hover {
-            background-color: rgba(0, 0, 0, 0.6);
-        }
-
-        &.disabled {
-            cursor: not-allowed;
-            filter: grayscale(100%);
-            opacity: 0.2;
-        }
-
-        &.left {
-            left: -10px;
-
-            &:before {
-                content: "";
-                background: url('//cdn.surfside.io/icons/left-arrow.svg')
-                no-repeat center;
-                width: 40px;
-                height: 40px;
-            }
-        }
-
-        &.right {
-            right: 0;
-
-            &:before {
-                content: "";
-                background: url('//cdn.surfside.io/icons/right-arrow.svg')
-                no-repeat center;
-                width: 40px;
-                height: 40px;
-            }
-
-        }
-    }
+const style = `
+.surf-carousel {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex-grow: 1;
+
+    .sponsored-carousel {
+        font-family: 'Helvetica', Verdana, Geneva, Tahoma, sans-serif;
+        margin: 10px 0;
+        font-size: 24px;
+
+        &::before {
+            content: 'For you';
+        }
+
+        &.sponsoredByOne::before {
+            content: 'Sponsored by ';
+        }
+
+        &.recommended::before {
+            content: 'Recommended';
+        }
+
+        &.sponsoredByMany::before {
+            content: 'Sponsored';
+        }
+    }
+
+    .carousel-wrapper {
+        width: 100%;
+        overflow-x: clip;
+        position: relative;
+    }
+
+    .items {
+        z-index: 1;
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        padding: 0 37px;
+        box-sizing: border-box;
+        transition: transform 0.4s ease-out, margin-left 0.3s ease;
+        width: 100%;
+
+        .surf-product-card {
+            flex: 1;
+            display: flex;
+            padding: 5px;
+            box-sizing: border-box;
+        }
+    }
+
+    
+}
+
+.arrows {
+
+    .arrow {
+        z-index: 2;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 40px;
+        height: 40px;
+        display: flex;
+        background-color: rgba(0, 0, 0, 0.5);
+        margin: 0 1rem;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2),
+                    0 2px 8px 0 rgba(0, 0, 0, 0.2);
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+
+        &.disabled {
+            cursor: not-allowed;
+            filter: grayscale(100%);
+            opacity: 0.2;
+        }
+
+        &.left {
+            left: -10px;
+
+            &:before {
+                content: "";
+                background: url('//cdn.surfside.io/icons/left-arrow.svg')
+                no-repeat center;
+                width: 40px;
+                height: 40px;
+            }
+        }
+
+        &.right {
+            right: 0;
+
+            &:before {
+                content: "";
+                background: url('//cdn.surfside.io/icons/right-arrow.svg')
+                no-repeat center;
+                width: 40px;
+                height: 40px;
+            }
+
+        }
+    }
 }`;
 //# sourceMappingURL=Carousel.js.map