@inappstory/slide-api 0.1.41 → 0.1.43

package/dist/index.cjs

@@ -1202,6 +1202,9 @@ class EsModuleSdkApi {
     isSdkSupportCorrectPauseResumeLifecycle() {
         return true;
     }
+    isSdkSupportVerticalSwipeGestureControl() {
+        return true;
+    }
     emitEvent(name, event) {
         this.sdkBinding.onEvent(name, event);
     }
@@ -3469,6 +3472,62 @@ class Reactions {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `typeof WidgetReactions.api`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
+class ScratchCard {
+    _elementNodeRef;
+    _widgetApi;
+    _widgetCallbacks;
+    _widgetDeps;
+    static _className = "narrative-element-scratch-card";
+    static className() {
+        return ScratchCard._className;
+    }
+    static isTypeOf(element) {
+        return element instanceof ScratchCard;
+    }
+    constructor(_elementNodeRef, _widgetApi, _widgetCallbacks, _widgetDeps) {
+        this._elementNodeRef = _elementNodeRef;
+        this._widgetApi = _widgetApi;
+        this._widgetCallbacks = _widgetCallbacks;
+        this._widgetDeps = _widgetDeps;
+        const mediaElements = Array.from(this._elementNodeRef.querySelectorAll("img"));
+        this.mediaElementsLoadingPromises = mediaElements.map(waitForImageHtmlElementLoad);
+    }
+    mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    get isClickCaptured() {
+        return this._widgetApi.isClickCaptured(this._elementNodeRef);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `typeof WidgetScratchCard.api`, `WidgetCallbacks`, `WidgetDeps`]; }
+}
+
 // export const tryCreateAtLayer = (layerNodeRef: HTMLElement): IElement {
 //     const
 // }
@@ -3537,6 +3596,8 @@ const tryCreateFromHtmlElement = (nodeRef, layer, widgetCallbacks, widgetDeps) =
                 return layoutApi.widgetTimerApi ? new Timer(nodeRef, layer, layersNodesRefs, layoutApi.widgetTimerApi, widgetCallbacks, widgetDeps) : null;
             case Reactions.className():
                 return layoutApi.widgetReactionsApi ? new Reactions(nodeRef, layoutApi.widgetReactionsApi, widgetCallbacks, widgetDeps) : null;
+            case ScratchCard.className():
+                return layoutApi.widgetScratchCardApi ? new ScratchCard(nodeRef, layoutApi.widgetScratchCardApi, widgetCallbacks, widgetDeps) : null;
         }
     }
     return null;
@@ -3744,6 +3805,7 @@ class SlideTimeline {
             if (this.isSDKSupportUpdateTimeline) {
                 this.timelineDisabledState = TimelineDisabledState.enabled;
                 this.timeSpent = 0;
+                this.resumedAt = new Date().getTime();
                 this.updateTimeline("start" /* TIMELINE_ACTION.START */);
             }
             else {
@@ -3988,6 +4050,9 @@ class Layer {
         }
         return null;
     }
+    get scratchCardElements() {
+        return this._elements.filter(element => ScratchCard.isTypeOf(element));
+    }
     get quizElement() {
         for (const element of this._elements) {
             if (Quiz.isTypeOf(element)) {
@@ -5499,10 +5564,10 @@ let SlideApi$1 = class SlideApi {
                 return result; // disable all clicks
             }
         }
-        if (this.activeLayer.rangeSliderElement) {
-            if (this.activeLayer.rangeSliderElement.isClickCapturedBySlider) {
+        if (this.activeLayer.scratchCardElements.length > 0) {
+            if (this.activeLayer.scratchCardElements.some(element => element.isClickCaptured)) {
                 result.canClickNext = false;
-                return result; // disable all clicks if event captured by slider
+                return result; // disable all clicks if event captured
             }
         }
         if (this.activeLayer.productsElement) {
@@ -5789,6 +5854,9 @@ class SlideApiDepsMultiSlideMode {
     enableVerticalSwipeGesture() {
         this.sdkApi.enableVerticalSwipeGesture();
     }
+    isSdkSupportVerticalSwipeGestureControl() {
+        return this.sdkApi.isSdkSupportVerticalSwipeGestureControl();
+    }
     disableBackpress() {
         this.sdkApi.disableBackpress();
     }
@@ -5963,6 +6031,9 @@ class SlideApiDepsSingleSlideMode {
     enableVerticalSwipeGesture() {
         this.sdkApi.enableVerticalSwipeGesture();
     }
+    isSdkSupportVerticalSwipeGestureControl() {
+        return this.sdkApi.isSdkSupportVerticalSwipeGestureControl();
+    }
     disableBackpress() {
         this.sdkApi.disableBackpress();
     }
@@ -20727,7 +20798,7 @@ class ProductDetailsBottomSheet extends RenderableComponent {
         });
     }
     renderTemplate() {
-        return h("div", { class: "ias-products-container-view" }, this.bottomSheet.render());
+        return this.bottomSheet.render();
     }
     open(params) {
         this.showProductDetails(params);
@@ -20805,7 +20876,7 @@ class ProductCheckoutBottomSheet extends RenderableComponent {
         });
     }
     renderTemplate() {
-        return h("div", { class: "ias-products-container-view" }, this.bottomSheet.render());
+        return this.bottomSheet.render();
     }
     open() {
         const productCheckout = this.factory.createProductCheckout(this.bottomSheet);
@@ -21582,6 +21653,7 @@ class WidgetProductCarousel extends WidgetBase {
     $carousel = null;
     $track = null;
     isTouchListenersInit = false;
+    productsView = null;
     constructor(element, options, widgetCallbacks, widgetDeps) {
         super(element, options, widgetCallbacks, widgetDeps);
         this.captionView = this.element.querySelector(".narrative-element-text-lines");
@@ -21799,10 +21871,7 @@ class WidgetProductCarousel extends WidgetBase {
     }
     showProductDetails = ({ offer, card }) => {
         const bs = new ProductDetailsBottomSheet(this.widgetDeps, this.getBottomSheetParams());
-        const bsNode = bs.render();
-        if (!bsNode)
-            throw new BottomSheetMountingError();
-        this.slide.appendChild(bsNode);
+        this.mountBottomSheet(bs);
         bs.open({ offer, isCartSupported: this.isCartSupported() });
         this.isBottomSheetOpened = true;
         this.disableHostUIInteraction();
@@ -21873,6 +21942,22 @@ class WidgetProductCarousel extends WidgetBase {
         });
         return button;
     }
+    mountBottomSheet(bs) {
+        if (this.productsView)
+            return;
+        const bsNode = bs.render();
+        if (!bsNode)
+            throw new BottomSheetMountingError();
+        this.productsView = this.createProductsView();
+        this.productsView.appendChild(bsNode);
+        this.slide.appendChild(this.productsView);
+    }
+    createProductsView() {
+        const containerView = document.createElement("div");
+        containerView.classList.add("ias-products-container-view");
+        containerView.dir = this.layoutDirection;
+        return containerView;
+    }
     async withTimeout(promise, timeout) {
         await Promise.race([promise, new Promise((resolve, reject) => setTimeout(reject, timeout))]);
     }
@@ -21888,10 +21973,7 @@ class WidgetProductCarousel extends WidgetBase {
                 offerId: offerDto.offerId,
                 quantity: 1,
             }), ADD_TO_CART_TIMEOUT);
-            const bsNode = bs.render();
-            if (!bsNode)
-                throw new BottomSheetMountingError();
-            this.slide.appendChild(bsNode);
+            this.mountBottomSheet(bs);
             bs.open();
             this.isBottomSheetOpened = true;
             this.disableHostUIInteraction();
@@ -21929,6 +22011,10 @@ class WidgetProductCarousel extends WidgetBase {
                 }
                 this.isBottomSheetOpened = false;
                 this.enableHostUIInteraction();
+                if (this.productsView) {
+                    this.slide.removeChild(this.productsView);
+                    this.productsView = null;
+                }
             },
         };
     }
@@ -25307,6 +25393,1314 @@ class WidgetReactions extends WidgetBase {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
+var BrushType;
+(function (BrushType) {
+    BrushType["Circle"] = "circle";
+    BrushType["Line"] = "line";
+    BrushType["Spray"] = "spray";
+})(BrushType || (BrushType = {}));
+var ScratchImageObjectFit;
+(function (ScratchImageObjectFit) {
+    ScratchImageObjectFit["Cover"] = "cover";
+    ScratchImageObjectFit["Contain"] = "contain";
+    ScratchImageObjectFit["Fill"] = "fill";
+})(ScratchImageObjectFit || (ScratchImageObjectFit = {}));
+
+/** Эталонная площадь холста (px²) для масштаба числа частиц spray. */
+const SPRAY_PARTICLE_CANVAS_REF_AREA = 800 * 600;
+/** Верхняя граница частиц за одно событие spray. */
+const SPRAY_PARTICLE_MAX = 12000;
+/** Шаг интерполяции вдоль отрезка LineBrush как доля радиуса (перекрытие дисков → ровные края). */
+const LINE_BRUSH_STEP_FACTOR = 0.42;
+/** Минимальный шаг в пикселях для очень маленьких кистей. */
+const LINE_BRUSH_STEP_MIN_PX = 1;
+class Brush {
+    renderer;
+    mask;
+    constructor(renderer, mask) {
+        this.renderer = renderer;
+        this.mask = mask;
+    }
+    /** Круглая кисть в координатах bitmap (радиус = brushSize). */
+    scratchDisc(x, y, radius) {
+        const radiusSq = radius * radius;
+        let newScratchedPixels = 0;
+        for (let i = -radius; i <= radius; i++) {
+            for (let j = -radius; j <= radius; j++) {
+                if (i * i + j * j <= radiusSq) {
+                    newScratchedPixels += this.scratchPixelAt(x + i, y + j);
+                }
+            }
+        }
+        return newScratchedPixels;
+    }
+    scratchPixelAt(px, py) {
+        return this.mask.scratchPixelXY(px, py, this.renderer.width, this.renderer.height);
+    }
+    get bitmapPixelCount() {
+        return this.renderer.width * this.renderer.height;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ScratchRenderer`, `ScratchMask`]; }
+}
+class CircleBrush extends Brush {
+    apply(x, y, radius, _prev) {
+        return this.scratchDisc(x, y, radius);
+    }
+}
+class SprayBrush extends Brush {
+    apply(x, y, radius, _prev) {
+        const canvasScale = Math.sqrt(Math.max(1, this.bitmapPixelCount / SPRAY_PARTICLE_CANVAS_REF_AREA));
+        const particleCount = Math.min(SPRAY_PARTICLE_MAX, Math.max(16, Math.floor(radius * 8 * canvasScale)));
+        let newScratchedPixels = 0;
+        for (let i = 0; i < particleCount; i++) {
+            const angle = Math.random() * Math.PI * 2;
+            const r = Math.sqrt(Math.random()) * radius;
+            const px = x + Math.cos(angle) * r;
+            const py = y + Math.sin(angle) * r;
+            newScratchedPixels += this.scratchPixelAt(px, py);
+        }
+        return newScratchedPixels;
+    }
+}
+class LineBrush extends Brush {
+    apply(x, y, radius, prev) {
+        if (prev != null) {
+            return this.scratchAlongLineSegment(prev.x, prev.y, x, y, radius);
+        }
+        return this.scratchDisc(x, y, radius);
+    }
+    /**
+     * Линейная интерполяция вдоль отрезка: плотные круговые штампы перекрываются
+     */
+    scratchAlongLineSegment(x0, y0, x1, y1, radius) {
+        const dx = x1 - x0;
+        const dy = y1 - y0;
+        const len = Math.hypot(dx, dy);
+        if (len < 1e-6) {
+            return this.scratchDisc(x1, y1, radius);
+        }
+        const step = Math.max(LINE_BRUSH_STEP_MIN_PX, radius * LINE_BRUSH_STEP_FACTOR);
+        const ux = dx / len;
+        const uy = dy / len;
+        let newScratchedPixels = 0;
+        for (let d = 0; d < len; d += step) {
+            newScratchedPixels += this.scratchDisc(x0 + ux * d, y0 + uy * d, radius);
+        }
+        newScratchedPixels += this.scratchDisc(x1, y1, radius);
+        return newScratchedPixels;
+    }
+}
+function createBrush(type, renderer, mask) {
+    switch (type) {
+        case BrushType.Spray:
+            return new SprayBrush(renderer, mask);
+        case BrushType.Line:
+            return new LineBrush(renderer, mask);
+        case BrushType.Circle:
+        default:
+            return new CircleBrush(renderer, mask);
+    }
+}
+
+/** Парсинг первого значения border-radius в px (поддержка % от меньшей стороны прямоугольника). */
+function parseBorderRadiusPx(cssRadius, boxWidth, boxHeight) {
+    const token = cssRadius.trim().split(/\s+/)[0];
+    if (!token || token === "0" || token === "none") {
+        return 0;
+    }
+    if (token.endsWith("%")) {
+        const p = parseFloat(token) / 100;
+        if (Number.isNaN(p))
+            return 0;
+        return p * Math.min(boxWidth, boxHeight);
+    }
+    if (token.endsWith("px")) {
+        const v = parseFloat(token);
+        return Number.isNaN(v) ? 0 : v;
+    }
+    return 0;
+}
+function isPointInRoundedRect(px, py, left, top, right, bottom, r) {
+    const w = right - left;
+    const h = bottom - top;
+    if (w <= 0 || h <= 0) {
+        return false;
+    }
+    r = Math.min(Math.max(0, r), w / 2, h / 2);
+    if (px < left || px > right || py < top || py > bottom) {
+        return false;
+    }
+    if (px >= left + r && px <= right - r) {
+        return true;
+    }
+    if (py >= top + r && py <= bottom - r) {
+        return true;
+    }
+    let cx;
+    let cy;
+    if (px < left + r && py < top + r) {
+        cx = left + r;
+        cy = top + r;
+    }
+    else if (px > right - r && py < top + r) {
+        cx = right - r;
+        cy = top + r;
+    }
+    else if (px < left + r && py > bottom - r) {
+        cx = left + r;
+        cy = bottom - r;
+    }
+    else {
+        cx = right - r;
+        cy = bottom - r;
+    }
+    const dx = px - cx;
+    const dy = py - cy;
+    return dx * dx + dy * dy <= r * r;
+}
+/**
+ * Преобразование client ↔ layout ↔ bitmap и проверки попадания (в т.ч. с geometryAngleRad).
+ */
+class CoordinateTransformer {
+    canvas;
+    getAngleRad;
+    constructor(canvas, getAngleRad) {
+        this.canvas = canvas;
+        this.getAngleRad = getAngleRad;
+    }
+    /** Точка в клиенте → координаты в bitmap (целочисленные границы ячеек). */
+    toCanvas(clientX, clientY) {
+        const layout = this.getCanvasLayoutSizeCss();
+        if (!layout) {
+            return { x: 0, y: 0 };
+        }
+        const rect = this.canvas.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const vx = clientX - cx;
+        const vy = clientY - cy;
+        const angle = this.getAngleRad();
+        const c = Math.cos(angle);
+        const s = Math.sin(angle);
+        const { lx, ly } = this.clientDeltaToLayoutLocal(vx, vy, c, s);
+        const xCss = lx + layout.w / 2;
+        const yCss = ly + layout.h / 2;
+        const { x, y } = this.layoutCssToCanvas(xCss, yCss, layout);
+        return this.clampToCanvasBitmap(x, y);
+    }
+    /** Точка в клиенте попадает в прямоугольник canvas в layout-пространстве (с учётом поворота). */
+    isInside(clientX, clientY) {
+        const layout = this.getCanvasLayoutSizeCss();
+        if (!layout) {
+            return false;
+        }
+        const rect = this.canvas.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const vx = clientX - cx;
+        const vy = clientY - cy;
+        const angle = this.getAngleRad();
+        const c = Math.cos(angle);
+        const s = Math.sin(angle);
+        const { lx, ly } = this.clientDeltaToLayoutLocal(vx, vy, c, s);
+        const xCss = lx + layout.w / 2;
+        const yCss = ly + layout.h / 2;
+        return xCss >= 0 && xCss <= layout.w && yCss >= 0 && yCss <= layout.h;
+    }
+    /**
+     * Центры ячеек bitmap: учитываются в прогрессе, если центр в viewport (slide) и в скруглённой карте (clipElement).
+     * Без скругления и без viewport — null (прогресс по всем scratchable).
+     */
+    buildProgressRegionFlags(viewportElement, clipElement, width, height) {
+        if (width <= 0 || height <= 0) {
+            return null;
+        }
+        const layout = this.getCanvasLayoutSizeCss();
+        if (!layout) {
+            return null;
+        }
+        const clipRect = clipElement.getBoundingClientRect();
+        const clipStyle = getComputedStyle(clipElement);
+        const radiusPx = parseBorderRadiusPx(clipStyle.borderRadius || "0", clipRect.width, clipRect.height);
+        let vr = null;
+        if (viewportElement) {
+            const viewportRect = viewportElement.getBoundingClientRect();
+            if (viewportRect.width > 0 && viewportRect.height > 0) {
+                vr = viewportRect;
+            }
+        }
+        if (!vr && radiusPx <= 0) {
+            return null;
+        }
+        const n = width * height;
+        const flags = new Uint8Array(n);
+        const rect = this.canvas.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const angle = this.getAngleRad();
+        const c = Math.cos(angle);
+        const s = Math.sin(angle);
+        let minIx = 0;
+        let maxIx = width - 1;
+        let minIy = 0;
+        let maxIy = height - 1;
+        if (vr) {
+            const corners = [
+                [vr.left, vr.top],
+                [vr.right, vr.top],
+                [vr.left, vr.bottom],
+                [vr.right, vr.bottom],
+            ];
+            let mix = Infinity;
+            let maxx = -Infinity;
+            let miy = Infinity;
+            let may = -Infinity;
+            for (let i = 0; i < corners.length; i++) {
+                const [ccx, ccy] = corners[i];
+                const { ix, iy } = this.clientToBitmapIndicesFloat(ccx, ccy, layout, cx, cy, c, s);
+                if (ix < mix)
+                    mix = ix;
+                if (ix > maxx)
+                    maxx = ix;
+                if (iy < miy)
+                    miy = iy;
+                if (iy > may)
+                    may = iy;
+            }
+            minIx = Math.max(0, Math.floor(mix));
+            maxIx = Math.min(width - 1, Math.ceil(maxx));
+            minIy = Math.max(0, Math.floor(miy));
+            maxIy = Math.min(height - 1, Math.ceil(may));
+        }
+        const cl = clipRect.left;
+        const ct = clipRect.top;
+        const cr = clipRect.right;
+        const cb = clipRect.bottom;
+        for (let iy = minIy; iy <= maxIy; iy++) {
+            const row = iy * width;
+            for (let ix = minIx; ix <= maxIx; ix++) {
+                const client = this.bitmapCellCenterClientFromLayout(ix, iy, layout, cx, cy, c, s);
+                const idx = row + ix;
+                const inViewport = vr === null || (client.x >= vr.left && client.x < vr.right && client.y >= vr.top && client.y < vr.bottom);
+                const inRounded = radiusPx <= 0 || isPointInRoundedRect(client.x, client.y, cl, ct, cr, cb, radiusPx);
+                flags[idx] = inViewport && inRounded ? 1 : 0;
+            }
+        }
+        return flags;
+    }
+    getCanvasLayoutSizeCss() {
+        const w = this.canvas.offsetWidth;
+        const h = this.canvas.offsetHeight;
+        if (w <= 0 || h <= 0) {
+            return null;
+        }
+        return { w, h };
+    }
+    canvasToLayoutCss(x, y, layout) {
+        const w = this.canvas.width;
+        const h = this.canvas.height;
+        return {
+            xCss: (x * layout.w) / w,
+            yCss: (y * layout.h) / h,
+        };
+    }
+    layoutCssToCanvas(xCss, yCss, layout) {
+        const w = this.canvas.width;
+        const h = this.canvas.height;
+        return {
+            x: (xCss * w) / layout.w,
+            y: (yCss * h) / layout.h,
+        };
+    }
+    clientDeltaToLayoutLocal(vx, vy, c, s) {
+        return {
+            lx: vx * c + vy * s,
+            ly: -vx * s + vy * c,
+        };
+    }
+    layoutLocalDeltaToClientDelta(lx, ly, c, s) {
+        return {
+            vx: lx * c - ly * s,
+            vy: lx * s + ly * c,
+        };
+    }
+    clampToCanvasBitmap(x, y) {
+        return {
+            x: Math.max(0, Math.min(this.canvas.width - 1, x)),
+            y: Math.max(0, Math.min(this.canvas.height - 1, y)),
+        };
+    }
+    bitmapCellCenterClientFromLayout(ix, iy, layout, cx, cy, c, s) {
+        const { xCss, yCss } = this.canvasToLayoutCss(ix + 0.5, iy + 0.5, layout);
+        const lx = xCss - layout.w / 2;
+        const ly = yCss - layout.h / 2;
+        const { vx, vy } = this.layoutLocalDeltaToClientDelta(lx, ly, c, s);
+        return { x: cx + vx, y: cy + vy };
+    }
+    clientToBitmapIndicesFloat(clientX, clientY, layout, cx, cy, c, s) {
+        const vx = clientX - cx;
+        const vy = clientY - cy;
+        const { lx, ly } = this.clientDeltaToLayoutLocal(vx, vy, c, s);
+        const xCss = lx + layout.w / 2;
+        const yCss = ly + layout.h / 2;
+        const { x, y } = this.layoutCssToCanvas(xCss, yCss, layout);
+        return { ix: x - 0.5, iy: y - 0.5 };
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLCanvasElement`, `() => number`]; }
+}
+
+class Effect {
+    cancel() { }
+}
+/**
+ * Плавное исчезновение нестёртых пикселей после достижения порога стирания.
+ */
+class FadeOutEffect extends Effect {
+    context;
+    options;
+    timeoutId = null;
+    rafId = null;
+    constructor(context, options) {
+        super();
+        this.context = context;
+        this.options = options;
+    }
+    start() {
+        this.cancel();
+        this.timeoutId = setTimeout(() => {
+            this.timeoutId = null;
+            this.runFadeAnimation();
+        }, this.options.fadeTimeout());
+    }
+    cancel() {
+        if (this.timeoutId != null) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+        if (this.rafId != null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+    }
+    runFadeAnimation() {
+        const context = this.context;
+        const ctx2d = context.ctx();
+        const startTime = performance.now();
+        const startMask = new Uint8Array(context.mask);
+        const total = context.totalPixels;
+        const fadeDuration = this.options.fadeDuration();
+        const animate = (currentTime) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(1, elapsed / fadeDuration);
+            this.applyFadeFrame(ctx2d, context.canvasWidth, context.canvasHeight, total, progress, startMask, context.scratchablePixelFlags);
+            if (progress < 1) {
+                this.rafId = requestAnimationFrame(animate);
+            }
+            else {
+                this.rafId = null;
+                this.completeFade(context);
+                this.options.onComplete();
+            }
+        };
+        this.rafId = requestAnimationFrame(animate);
+    }
+    applyFadeFrame(ctx2d, width, height, totalPixels, progress, startMask, scratchablePixelFlags) {
+        const imageData = ctx2d.getImageData(0, 0, width, height);
+        const data = imageData.data;
+        const easedProgress = 1 - Math.pow(1 - progress, 2);
+        for (let i = 0; i < totalPixels; i++) {
+            if (scratchablePixelFlags !== undefined && scratchablePixelFlags[i] === 0) {
+                continue;
+            }
+            if (startMask[i] === 0) {
+                const alpha = Math.floor(255 * (1 - easedProgress));
+                data[i * 4 + 3] = alpha;
+            }
+            else if (startMask[i] === 1) {
+                data[i * 4 + 3] = 0;
+            }
+        }
+        ctx2d.putImageData(imageData, 0, 0);
+    }
+    completeFade(context) {
+        const ctx2d = context.ctx();
+        const imageData = ctx2d.getImageData(0, 0, context.canvasWidth, context.canvasHeight);
+        const data = imageData.data;
+        const total = context.totalPixels;
+        for (let i = 0; i < total; i++) {
+            data[i * 4 + 3] = 0;
+        }
+        ctx2d.putImageData(imageData, 0, 0);
+        for (let i = 0; i < total; i++) {
+            context.mask[i] = 1;
+        }
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ScratchEffectContext`, `FadeOutEffectOptions`]; }
+}
+
+/** Обёртка над завершающим fade-эффектом (таймаут + анимация). */
+class EffectController {
+    effect;
+    constructor(context, options) {
+        this.effect = new FadeOutEffect(context, options);
+    }
+    startComplete() {
+        this.effect.start();
+    }
+    cancel() {
+        this.effect.cancel();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ScratchEffectContext`, `FadeOutEffectOptions`]; }
+}
+
+class Pixel {
+    constructor() { }
+    static index(x, y, bitmapWidth) {
+        return y * bitmapWidth + x;
+    }
+    static x(index, bitmapWidth) {
+        return index % bitmapWidth;
+    }
+    static y(index, bitmapWidth) {
+        return Math.floor(index / bitmapWidth);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return []; }
+}
+
+/**
+ * Маска стирания, флаги «стираемых» пикселей (alpha слоя) и viewport для подсчёта прогресса.
+ */
+class ScratchMask {
+    _mask;
+    _scratchablePixelFlags;
+    _inViewportFlags;
+    _totalPixels;
+    /** Пиксели слоя с alpha > 0 после отрисовки. */
+    scratchablePixelTotal = 0;
+    /** Стираемые пиксели внутри viewport. */
+    viewportPixelTotal = 0;
+    constructor(width, height, viewportFlags) {
+        this._totalPixels = width * height;
+        this._mask = new Uint8Array(this._totalPixels);
+        this._inViewportFlags = viewportFlags;
+    }
+    get mask() {
+        return this._mask;
+    }
+    get scratchablePixelFlags() {
+        return this._scratchablePixelFlags;
+    }
+    get totalPixels() {
+        return this._totalPixels;
+    }
+    get inViewportFlags() {
+        return this._inViewportFlags;
+    }
+    /**
+     * После отрисовки базового слоя: помечаем ячейки с ненулевым alpha (учёт PNG).
+     */
+    loadScratchableFromImageData(imageData, width, height) {
+        if (width <= 0 || height <= 0) {
+            this._scratchablePixelFlags = new Uint8Array(0);
+            this.scratchablePixelTotal = 0;
+            return;
+        }
+        const n = width * height;
+        if (!this._scratchablePixelFlags || this._scratchablePixelFlags.length !== n) {
+            this._scratchablePixelFlags = new Uint8Array(n);
+        }
+        const data = imageData.data;
+        let total = 0;
+        for (let i = 0; i < n; i++) {
+            const scratchable = data[i * 4 + 3] > 0 ? 1 : 0;
+            this._scratchablePixelFlags[i] = scratchable;
+            total += scratchable;
+        }
+        this.scratchablePixelTotal = total;
+    }
+    /** Пересчитать знаменатель прогресса по scratchable ∩ viewport. */
+    updateViewportDenominator() {
+        if (!this._inViewportFlags) {
+            this.viewportPixelTotal = 0;
+            return;
+        }
+        let den = 0;
+        const n = this._totalPixels;
+        const scratchable = this._scratchablePixelFlags;
+        const inVp = this._inViewportFlags;
+        for (let i = 0; i < n; i++) {
+            if (scratchable[i] && inVp[i]) {
+                den++;
+            }
+        }
+        this.viewportPixelTotal = den;
+    }
+    /**
+     * Стирание по индексу буфера; возвращает вклад в прогресс (0 или 1).
+     */
+    scratchPixel(index) {
+        return this.scratchPixelIndexIfUnset(index);
+    }
+    scratchPixelXY(x, y, bitmapWidth, bitmapHeight) {
+        const pixelX = Math.floor(x);
+        const pixelY = Math.floor(y);
+        if (pixelX < 0 || pixelX >= bitmapWidth || pixelY < 0 || pixelY >= bitmapHeight) {
+            return 0;
+        }
+        const idx = Pixel.index(pixelX, pixelY, bitmapWidth);
+        return this.scratchPixelIndexIfUnset(idx);
+    }
+    scratchPixelIndexIfUnset(pixelIndex) {
+        if (pixelIndex < 0 || pixelIndex >= this._totalPixels) {
+            return 0;
+        }
+        if (this._mask[pixelIndex] === 0) {
+            this._mask[pixelIndex] = 1;
+            if (this._scratchablePixelFlags[pixelIndex] === 0) {
+                return 0;
+            }
+            if (!this._inViewportFlags) {
+                return 1;
+            }
+            return this._inViewportFlags[pixelIndex] !== 0 ? 1 : 0;
+        }
+        return 0;
+    }
+    /** Число стёртых «учитываемых» пикселей в viewport (для синхронизации после reset маски). */
+    countScratchedForProgress() {
+        const inVp = this._inViewportFlags;
+        if (!inVp) {
+            return 0;
+        }
+        let num = 0;
+        const n = this._totalPixels;
+        const mask = this._mask;
+        const scratchable = this._scratchablePixelFlags;
+        for (let i = 0; i < n; i++) {
+            if (mask[i] && scratchable[i] && inVp[i]) {
+                num++;
+            }
+        }
+        return num;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`number`, `number`, `Uint8Array | null`]; }
+}
+
+const NOISE_DENSITY_AT_FULL = 800;
+/**
+ * Отрисовка базового слоя и применение маски к ImageData
+ */
+class ScratchRenderer {
+    canvas;
+    _ctx;
+    constructor(canvas) {
+        this.canvas = canvas;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+            throw new Error("Unable to get 2D context");
+        }
+        this._ctx = ctx;
+    }
+    get width() {
+        return this.canvas.width;
+    }
+    get height() {
+        return this.canvas.height;
+    }
+    getContext() {
+        return this._ctx;
+    }
+    setupSizeFromContainer(container) {
+        const w = container.offsetWidth;
+        const h = container.offsetHeight;
+        this.canvas.width = w;
+        this.canvas.height = h;
+        this.canvas.style.width = `${w}px`;
+        this.canvas.style.height = `${h}px`;
+    }
+    drawBaseLayer(background, options = {}) {
+        this.clearCanvas();
+        const imageFit = options.imageObjectFit ?? ScratchImageObjectFit.Cover;
+        this.drawBackground(background, imageFit);
+        this.addTextureNoise(options.texture?.noiseDensity ?? 0);
+    }
+    applyMask(mask, totalPixels) {
+        if (this.width <= 0 || this.height <= 0)
+            return;
+        const imageData = this.getImageData();
+        const data = imageData.data;
+        for (let i = 0; i < totalPixels; i++) {
+            if (mask[i] === 0)
+                continue;
+            data[i * 4 + 3] = 0;
+        }
+        this._ctx.putImageData(imageData, 0, 0);
+    }
+    getImageData() {
+        const w = this.canvas.width;
+        const h = this.canvas.height;
+        /** Нулевые размеры canvas — не вызываем ctx.getImageData. */
+        if (w <= 0 || h <= 0) {
+            return new ImageData(1, 1);
+        }
+        return this._ctx.getImageData(0, 0, w, h);
+    }
+    clearCanvas() {
+        this._ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    drawBackground(background, imageObjectFit) {
+        if (!background)
+            return;
+        switch (background.type) {
+            case "color":
+                this.drawSolidBackground(background.value);
+                break;
+            case "gradient":
+                this.drawGradientBackground(background.start, background.end);
+                break;
+            case "image":
+                this.drawImageBackground(background.value, imageObjectFit);
+                break;
+        }
+    }
+    drawSolidBackground(color) {
+        this._ctx.fillStyle = color;
+        this._ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    drawGradientBackground(startColor, endColor) {
+        const gradient = this._ctx.createLinearGradient(0, 0, this.canvas.width, this.canvas.height);
+        gradient.addColorStop(0, startColor);
+        gradient.addColorStop(1, endColor);
+        this._ctx.fillStyle = gradient;
+        this._ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    drawImageBackground(image, fit) {
+        const cw = this.canvas.width;
+        const ch = this.canvas.height;
+        const iw = image.naturalWidth || image.width;
+        const ih = image.naturalHeight || image.height;
+        if (iw <= 0 || ih <= 0 || cw <= 0 || ch <= 0) {
+            return;
+        }
+        if (fit === ScratchImageObjectFit.Fill) {
+            this._ctx.drawImage(image, 0, 0, cw, ch);
+            return;
+        }
+        let scale;
+        if (fit === ScratchImageObjectFit.Contain) {
+            scale = Math.min(cw / iw, ch / ih);
+        }
+        else {
+            scale = Math.max(cw / iw, ch / ih);
+        }
+        const dw = iw * scale;
+        const dh = ih * scale;
+        const dx = (cw - dw) / 2;
+        const dy = (ch - dh) / 2;
+        this._ctx.drawImage(image, 0, 0, iw, ih, dx, dy, dw, dh);
+    }
+    addTextureNoise(noiseDensityPercent) {
+        const percent = Math.min(100, Math.max(0, noiseDensityPercent));
+        const iterations = Math.round((percent / 100) * NOISE_DENSITY_AT_FULL);
+        for (let i = 0; i < iterations; i++) {
+            this.drawNoisePixel();
+        }
+    }
+    drawNoisePixel() {
+        this._ctx.fillStyle = `rgba(0,0,0,${Math.random() * 0.3})`;
+        const x = Math.random() * this.canvas.width;
+        const y = Math.random() * this.canvas.height;
+        this._ctx.fillRect(x, y, 2, 2);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLCanvasElement`]; }
+}
+
+class ScratchLayer {
+    canvas;
+    renderer;
+    maskModel;
+    transformer;
+    mouseContainer;
+    inputAttached = false;
+    scratchedPixels = 0;
+    brush;
+    completeEffect;
+    options = {
+        brushSize: 35,
+        brushType: BrushType.Circle,
+        scratchThreshold: 0.7,
+        onComplete: () => { },
+        onProgress: () => { },
+        onMouseDown: () => { },
+        onMouseUp: () => { },
+        backgroundColor: null,
+        backgroundGradient: null,
+        texture: {
+            noiseDensity: 0,
+        },
+        backgroundImage: null,
+        imageObjectFit: ScratchImageObjectFit.Cover,
+        fadeTimeout: 0,
+        onFadeComplete: null,
+        fadeDuration: 300,
+        mouseContainer: null,
+        geometryAngleRad: null,
+        viewportElement: null,
+        progressClipElement: null,
+    };
+    background = null;
+    isDrawing = false;
+    isRevealed = false;
+    isAnimating = false;
+    lastScratchX = null;
+    lastScratchY = null;
+    container;
+    _enabled = true;
+    geometryAngleRad = 0;
+    viewportElement = null;
+    get canvasWidth() {
+        return this.renderer.width;
+    }
+    get canvasHeight() {
+        return this.renderer.height;
+    }
+    get totalPixels() {
+        return this.maskModel.totalPixels;
+    }
+    get mask() {
+        return this.maskModel.mask;
+    }
+    get scratchablePixelFlags() {
+        return this.maskModel.scratchablePixelFlags;
+    }
+    ctx() {
+        return this.renderer.getContext();
+    }
+    constructor(container, options = {}) {
+        this.container = container;
+        this.canvas = this.mountCanvas(this.container);
+        this.renderer = new ScratchRenderer(this.canvas);
+        this.transformer = new CoordinateTransformer(this.canvas, () => this.geometryAngleRad);
+        this.updateOptions(options);
+        const mouseContainer = this.options.mouseContainer;
+        if (!mouseContainer) {
+            throw new Error("ScratchLayer: mouseContainer is required");
+        }
+        this.mouseContainer = mouseContainer;
+        const layer = this;
+        const fadeOptions = {
+            fadeTimeout: () => layer.options.fadeTimeout,
+            fadeDuration: () => layer.options.fadeDuration,
+            onComplete: () => {
+                layer.isAnimating = false;
+                layer.options.onFadeComplete?.();
+            },
+        };
+        this.completeEffect = new EffectController(this, fadeOptions);
+        void this.init();
+    }
+    reset() {
+        this.completeEffect.cancel();
+        this.removeTransientMouseListeners();
+        this.removeTransientTouchListeners();
+        this.isDrawing = false;
+        this.isRevealed = false;
+        this.isAnimating = false;
+        this.lastScratchX = null;
+        this.lastScratchY = null;
+        this.scratchedPixels = 0;
+        this.renderer.setupSizeFromContainer(this.container);
+        this.renderer.drawBaseLayer(this.background, {
+            texture: this.options.texture,
+            imageObjectFit: this.options.imageObjectFit,
+        });
+        this.rebuildMaskAfterBaseDraw();
+    }
+    enable() {
+        this._enabled = true;
+    }
+    disable() {
+        this._enabled = false;
+    }
+    updateOptions(options) {
+        this.options = {
+            brushSize: options.brushSize ?? this.options.brushSize,
+            brushType: options.brushType ?? this.options.brushType,
+            scratchThreshold: options.scratchThreshold ?? this.options.scratchThreshold,
+            onComplete: options.onComplete ?? this.options.onComplete,
+            onProgress: options.onProgress ?? this.options.onProgress,
+            onMouseDown: options.onMouseDown ?? this.options.onMouseDown,
+            onMouseUp: options.onMouseUp ?? this.options.onMouseUp,
+            backgroundColor: options.backgroundColor ?? this.options.backgroundColor,
+            backgroundGradient: options.backgroundGradient ?? this.options.backgroundGradient,
+            texture: options.texture ?? this.options.texture,
+            backgroundImage: options.backgroundImage ?? this.options.backgroundImage,
+            imageObjectFit: options.imageObjectFit ?? this.options.imageObjectFit,
+            fadeTimeout: options.fadeTimeout ?? this.options.fadeTimeout,
+            onFadeComplete: options.onFadeComplete ?? this.options.onFadeComplete,
+            fadeDuration: options.fadeDuration ?? this.options.fadeDuration,
+            mouseContainer: options.mouseContainer ?? this.options.mouseContainer,
+            geometryAngleRad: options.geometryAngleRad ?? this.options.geometryAngleRad,
+            viewportElement: options.viewportElement !== undefined ? options.viewportElement : this.options.viewportElement,
+            progressClipElement: options.progressClipElement !== undefined ? options.progressClipElement : this.options.progressClipElement,
+        };
+        const rawAngle = this.options.geometryAngleRad;
+        this.geometryAngleRad = rawAngle != null && !Number.isNaN(rawAngle) ? rawAngle : 0;
+        this.viewportElement = this.options.viewportElement;
+        if (options.mouseContainer != null && options.mouseContainer !== this.mouseContainer) {
+            const wasAttached = this.inputAttached;
+            if (wasAttached) {
+                this.detachInputListeners();
+            }
+            this.mouseContainer = options.mouseContainer;
+            if (wasAttached) {
+                this.attachInputListeners();
+            }
+        }
+    }
+    updateSize() {
+        this.destroy();
+        void this.init();
+    }
+    destroy() {
+        this.completeEffect.cancel();
+        if (this.isAnimating) {
+            this.isAnimating = false;
+        }
+        this.detachInputListeners();
+    }
+    mountCanvas(container) {
+        const canvas = document.createElement("canvas");
+        canvas.style.cursor = "pointer";
+        canvas.style.display = "block";
+        container.appendChild(canvas);
+        return canvas;
+    }
+    attachInputListeners() {
+        if (this.inputAttached)
+            return;
+        this.inputAttached = true;
+        this.canvas.addEventListener("mousedown", this.handleLayerMouseDown);
+        this.canvas.addEventListener("touchstart", this.handleLayerTouchStart);
+    }
+    detachInputListeners() {
+        if (!this.inputAttached)
+            return;
+        this.inputAttached = false;
+        this.removeTransientMouseListeners();
+        this.removeTransientTouchListeners();
+        this.canvas.removeEventListener("mousedown", this.handleLayerMouseDown);
+        this.canvas.removeEventListener("touchstart", this.handleLayerTouchStart);
+    }
+    removeTransientMouseListeners() {
+        this.mouseContainer.removeEventListener("mousemove", this.handleLayerMouseMove);
+        this.mouseContainer.removeEventListener("mouseup", this.handleLayerMouseUpOnce);
+    }
+    removeTransientTouchListeners() {
+        this.canvas.removeEventListener("touchmove", this.handleLayerTouchMove);
+        this.canvas.removeEventListener("touchend", this.handleLayerTouchEndOnce);
+        this.mouseContainer.removeEventListener("touchcancel", this.handleLayerTouchEndOnce);
+    }
+    handleLayerMouseDown = (e) => {
+        this.onPointerStart(e);
+        if (this.isDrawing) {
+            this.removeTransientMouseListeners();
+            this.mouseContainer.addEventListener("mousemove", this.handleLayerMouseMove);
+            this.mouseContainer.addEventListener("mouseup", this.handleLayerMouseUpOnce);
+        }
+    };
+    handleLayerMouseMove = (e) => {
+        this.onPointerMove(e);
+    };
+    handleLayerMouseUpOnce = (_e) => {
+        this.removeTransientMouseListeners();
+        this.onPointerEnd();
+    };
+    handleLayerTouchStart = (e) => {
+        this.onPointerStart(e);
+        if (this.isDrawing) {
+            this.removeTransientTouchListeners();
+            this.canvas.addEventListener("touchmove", this.handleLayerTouchMove);
+            this.canvas.addEventListener("touchend", this.handleLayerTouchEndOnce);
+            this.mouseContainer.addEventListener("touchcancel", this.handleLayerTouchEndOnce);
+        }
+    };
+    handleLayerTouchMove = (e) => {
+        this.onPointerMove(e);
+    };
+    handleLayerTouchEndOnce = (_e) => {
+        this.removeTransientTouchListeners();
+        this.onPointerEnd();
+    };
+    async init() {
+        await this.resolveBackgroundImage();
+        this.renderer.setupSizeFromContainer(this.container);
+        this.renderer.drawBaseLayer(this.background, {
+            texture: this.options.texture,
+            imageObjectFit: this.options.imageObjectFit,
+        });
+        this.rebuildMaskAfterBaseDraw();
+        this.attachInputListeners();
+    }
+    /** После `drawBaseLayer`: viewport-флаги → новая маска → scratchable → прогресс → кисть → отрисовка маски на canvas. */
+    rebuildMaskAfterBaseDraw() {
+        const w = this.renderer.width;
+        const h = this.renderer.height;
+        const clipEl = this.options.progressClipElement ?? this.container;
+        const vpFlags = this.transformer.buildProgressRegionFlags(this.viewportElement, clipEl, w, h);
+        this.maskModel = new ScratchMask(w, h, vpFlags);
+        this.maskModel.loadScratchableFromImageData(this.renderer.getImageData(), w, h);
+        this.maskModel.updateViewportDenominator();
+        this.syncProgressFromMask();
+        this.brush = createBrush(this.options.brushType, this.renderer, this.maskModel);
+        this.renderer.applyMask(this.maskModel.mask, this.maskModel.totalPixels);
+    }
+    syncProgressFromMask() {
+        if (this.maskModel.inViewportFlags) {
+            this.scratchedPixels = this.maskModel.countScratchedForProgress();
+        }
+        else {
+            this.scratchedPixels = 0;
+        }
+    }
+    async resolveBackgroundImage() {
+        if (this.options.backgroundImage) {
+            this.background = { type: "image", value: this.options.backgroundImage };
+            return;
+        }
+        if (this.options.backgroundGradient) {
+            this.background = {
+                type: "gradient",
+                start: this.options.backgroundGradient.start,
+                end: this.options.backgroundGradient.end,
+            };
+            return;
+        }
+        if (this.options.backgroundColor) {
+            this.background = { type: "color", value: this.options.backgroundColor };
+            return;
+        }
+        this.background = {
+            type: "gradient",
+            start: "#c0c0c0",
+            end: "#808080",
+        };
+    }
+    onPointerStart(e) {
+        if (!this._enabled)
+            return;
+        e.preventDefault();
+        if (this.isTouchEvent(e)) {
+            this.startDrawingTouch(e);
+        }
+        else {
+            this.startDrawingMouse(e);
+        }
+        this.options.onMouseDown?.();
+    }
+    onPointerMove(e) {
+        if (!this._enabled)
+            return;
+        if (e instanceof MouseEvent) {
+            if (!this.transformer.isInside(e.clientX, e.clientY))
+                return;
+            this.handleDrawingMouse(e);
+        }
+        else {
+            this.handleDrawingTouch(e);
+        }
+    }
+    onPointerEnd() {
+        this.isDrawing = false;
+        this.lastScratchX = null;
+        this.lastScratchY = null;
+        this.options.onMouseUp?.();
+    }
+    isTouchEvent(e) {
+        return "touches" in e;
+    }
+    startDrawingMouse(e) {
+        if (this.isRevealed || this.isAnimating)
+            return;
+        e.preventDefault();
+        this.isDrawing = true;
+        this.handleDrawingMouse(e);
+    }
+    startDrawingTouch(e) {
+        if (this.isRevealed || this.isAnimating)
+            return;
+        e.preventDefault();
+        this.isDrawing = true;
+        this.handleDrawingTouch(e);
+    }
+    handleDrawingMouse(e) {
+        if (!this.isDrawing || this.isRevealed || this.isAnimating)
+            return;
+        e.preventDefault();
+        const { x, y } = this.transformer.toCanvas(e.clientX, e.clientY);
+        this.processScratch(x, y);
+    }
+    handleDrawingTouch(e) {
+        if (!this.isDrawing || this.isRevealed || this.isAnimating)
+            return;
+        e.preventDefault();
+        let x = 0;
+        let y = 0;
+        if (e.touches.length > 0) {
+            const p = this.transformer.toCanvas(e.touches[0].clientX, e.touches[0].clientY);
+            x = p.x;
+            y = p.y;
+        }
+        this.processScratch(x, y);
+    }
+    processScratch(x, y) {
+        const radius = this.options.brushSize;
+        const prev = this.lastScratchX != null && this.lastScratchY != null ? { x: this.lastScratchX, y: this.lastScratchY } : null;
+        const newScratchedPixels = this.brush.apply(x, y, radius, prev);
+        if (this.options.brushType === BrushType.Line) {
+            this.lastScratchX = x;
+            this.lastScratchY = y;
+        }
+        if (newScratchedPixels > 0) {
+            this.handleScratchProgress(newScratchedPixels);
+        }
+    }
+    handleScratchProgress(newScratchedPixels) {
+        this.scratchedPixels += newScratchedPixels;
+        this.renderer.applyMask(this.maskModel.mask, this.maskModel.totalPixels);
+        const percent = this.calculateScratchPercentage();
+        this.options.onProgress?.(Math.floor(percent));
+        if (this.isComplete(percent)) {
+            this.startCompleteReveal();
+        }
+    }
+    isComplete(percent) {
+        return !this.isRevealed && !this.isAnimating && percent >= this.options.scratchThreshold * 100;
+    }
+    calculateScratchPercentage() {
+        if (this.maskModel.inViewportFlags) {
+            if (this.maskModel.viewportPixelTotal <= 0) {
+                return this.maskModel.scratchablePixelTotal <= 0 ? 100 : 0;
+            }
+            return (this.scratchedPixels / this.maskModel.viewportPixelTotal) * 100;
+        }
+        if (this.maskModel.scratchablePixelTotal <= 0) {
+            return 100;
+        }
+        return (this.scratchedPixels / this.maskModel.scratchablePixelTotal) * 100;
+    }
+    startCompleteReveal() {
+        if (this.isRevealed || this.isAnimating)
+            return;
+        this.isRevealed = true;
+        this.isAnimating = true;
+        this.options.onComplete?.();
+        this.completeEffect.startComplete();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `ScratchLayerOptions`]; }
+}
+
+class LocalDataKeys {
+    doneAt;
+    constructor(elementId) {
+        this.doneAt = `_sc_${elementId}_done_at`;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`string`]; }
+}
+const toPixelFromSlideEmRelativeFactor = 19.5; // 390 / 20; // (390 - slide width) / (20px - show in input)
+class ScratchCardModel {
+    brushSize;
+    brushType;
+    scratchThreshold;
+    noiseDensity;
+    constructor(element) {
+        this.brushSize = parseFloat(getTagData(element, "brushSize") || "30");
+        this.brushType = getTagData(element, "brushType") ?? BrushType.Line;
+        this.scratchThreshold = parseFloat(getTagData(element, "scratchThreshold") ?? "70") / 100;
+        this.noiseDensity = parseFloat(getTagData(element, "noiseDensity") ?? "100");
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`]; }
+}
+class WidgetScratchCard extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-scratch-card";
+    scratchContainer = null;
+    scratchLayer = null;
+    localDataKeys;
+    model;
+    _isClickCaptured = false;
+    constructor(element, options, widgetCallbacks, widgetDeps) {
+        super(element, options, widgetCallbacks, widgetDeps);
+        this.localDataKeys = new LocalDataKeys(this.elementId);
+        this.model = new ScratchCardModel(this.element);
+    }
+    get isClickCaptured() {
+        return this._isClickCaptured;
+    }
+    onRefreshUserData(localData) {
+        super.onRefreshUserData(localData);
+        this.firstOpenTime = new Date().getTime();
+        if (this.isDone()) {
+            this.hideGeometry();
+            /*  this.startReadyPromise.then(() => {
+                if (this.disableTimer) {
+                    this.onWidgetComplete();
+                }
+            }); */
+        }
+    }
+    isDone() {
+        return this.localData[this.localDataKeys.doneAt] != null;
+    }
+    onStart() {
+        super.onStart();
+        this.init();
+        this.scratchLayer?.enable();
+        this.env.addEventListener("resize", this.handleResize);
+    }
+    onStop() {
+        super.onStop();
+        this.env.removeEventListener("resize", this.handleResize);
+        if (!this.scratchLayer)
+            return;
+        this.scratchLayer.disable();
+        if (!this.isDone()) {
+            this.scratchLayer.reset();
+        }
+        this._isClickCaptured = false;
+    }
+    init() {
+        if (this.isDone() || this.scratchContainer)
+            return;
+        this.scratchContainer = this.mountScratchContainer();
+        this.renderScratchLayer(this.scratchContainer);
+    }
+    calcBrushSize() {
+        const emBrushSize = this.model.brushSize / toPixelFromSlideEmRelativeFactor;
+        return emBrushSize * (parseFloat(this.widgetDeps.slideRoot.style.fontSize) || toPixelFromSlideEmRelativeFactor);
+    }
+    handleResize = () => {
+        if (!this.scratchLayer)
+            return;
+        this.scratchLayer.updateOptions({
+            brushSize: this.calcBrushSize(),
+            brushType: this.model.brushType,
+        });
+        this.scratchLayer.updateSize();
+    };
+    mountScratchContainer() {
+        const container = document.createElement("div");
+        container.classList.add("narrative-element-scratch-card-container");
+        container.style.width = "100%";
+        container.style.height = "100%";
+        this.element.appendChild(container);
+        return container;
+    }
+    renderScratchLayer(container) {
+        const image = this.getImage();
+        const geometryParent = this.element.parentElement;
+        const angleRaw = geometryParent ? getTagData(geometryParent, "angle") : null;
+        const geometryAngleRad = angleRaw != null && angleRaw !== "" ? parseFloat(angleRaw) : null;
+        this.scratchLayer = new ScratchLayer(container, {
+            backgroundImage: image,
+            imageObjectFit: ScratchImageObjectFit.Cover,
+            brushSize: this.calcBrushSize(),
+            brushType: this.model.brushType,
+            scratchThreshold: this.model.scratchThreshold,
+            texture: { noiseDensity: 0 },
+            mouseContainer: this.widgetDeps.slideRoot,
+            viewportElement: this.slide,
+            progressClipElement: this.element,
+            geometryAngleRad: geometryAngleRad != null && !Number.isNaN(geometryAngleRad) ? geometryAngleRad : null,
+            onMouseDown: () => {
+                this.handleMouseDown();
+            },
+            onMouseUp: () => {
+                this.handleMouseUp();
+            },
+            onComplete: () => {
+                this.completeWidget();
+            },
+            onFadeComplete: () => {
+                this.hideGeometry();
+            },
+            fadeDuration: 300,
+            fadeTimeout: 0,
+        });
+        image.parentElement?.remove();
+    }
+    getImage() {
+        const img = this.element.querySelector("img");
+        if (!img)
+            throw new Error("Scratch image not found");
+        return img;
+    }
+    hideGeometry() {
+        this.element.parentElement.style.display = "none";
+    }
+    completeWidget() {
+        this.disablePointerEventsOnGeometry();
+        this.sendStatEvent();
+        this.saveToLocalData();
+        /*         if (this.disableTimer) {
+            this.onWidgetComplete();
+        } */
+    }
+    disablePointerEventsOnGeometry() {
+        this.element.parentElement.style.pointerEvents = "none";
+    }
+    sendStatEvent() {
+        const duration = new Date().getTime() - this.firstOpenTime;
+        this.sendStatisticEventToApp("w-scratch-card-complete", {
+            ...this.statisticEventBaseFieldsShortForm,
+            wi: this.elementId,
+            d: duration,
+        });
+    }
+    saveToLocalData() {
+        const time = Math.round(new Date().getTime() / 1000);
+        this.localData[this.localDataKeys.doneAt] = time;
+        this.setLocalData(this.localData, true);
+    }
+    handleMouseUp() {
+        this.env.requestAnimationFrame(() => {
+            this.widgetDeps.slideApiDeps.enableHorizontalSwipeGesture();
+            this.widgetDeps.slideApiDeps.enableVerticalSwipeGesture();
+            this._isClickCaptured = false;
+        });
+    }
+    handleMouseDown() {
+        this.widgetDeps.slideApiDeps.disableHorizontalSwipeGesture();
+        this.widgetDeps.slideApiDeps.disableVerticalSwipeGesture();
+        this._isClickCaptured = true;
+        if (!this.widgetDeps.slideApiDeps.isSdkSupportVerticalSwipeGestureControl()) {
+            this.scratchLayer?.startCompleteReveal();
+        }
+    }
+    static api = {
+        widgetClassName: WidgetScratchCard.widgetClassName,
+        onRefreshUserData: WidgetScratchCard.onRefreshUserData,
+        init: function (element, localData, widgetCallbacks, widgetDeps) {
+            WidgetScratchCard.initWidget(element, localData, (element, options) => new WidgetScratchCard(element, options, widgetCallbacks, widgetDeps));
+        },
+        onStart: function (element) {
+            WidgetScratchCard.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetScratchCard.getInstance(element)?.onStop();
+        },
+        isClickCaptured: function (element) {
+            return WidgetScratchCard.getInstance(element)?.isClickCaptured ?? false;
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`, `WidgetCallbacks`, `WidgetDeps`]; }
+}
+
 class EsModuleLayoutApi {
     slideApiPeerDeps;
     constructor(slideApiPeerDeps) {
@@ -25372,6 +26766,9 @@ class EsModuleLayoutApi {
     get widgetReactionsApi() {
         return WidgetReactions.api;
     }
+    get widgetScratchCardApi() {
+        return WidgetScratchCard.api;
+    }
     get VideoPlayer() {
         return this.slideApiPeerDeps().VODPlayer;
     }