@uploadcare/file-uploader 1.19.1 → 1.20.0-rc.1

package/abstract/managers/TelemetryManager.js

@@ -0,0 +1,204 @@
+// @ts-check
+import { TelemetryAPIService } from '@uploadcare/quality-insights';
+
+import { Queue } from '@uploadcare/upload-client';
+import { PACKAGE_VERSION, PACKAGE_NAME } from '../../env.js';
+import { initialConfig } from '../../blocks/Config/initialConfig.js';
+import { EventType } from '../../blocks/UploadCtxProvider/EventEmitter.js';
+
+/** @typedef {import('@uploadcare/quality-insights').TelemetryRequest & { eventTimestamp: number }} TelemetryState */
+
+export class TelemetryManager {
+  /** @type {ReturnType<Crypto['randomUUID']>} */
+  _sessionId = crypto.randomUUID();
+
+  /** @type {TelemetryAPIService | null} */
+  _telemetryInstance = null;
+
+  /** @type {import('../Block.js').Block | null} */
+  _block = null;
+
+  _config = initialConfig;
+
+  /** @type {boolean} */
+  _initialized = false;
+
+  /** @type {TelemetryState | null} */
+  _lastPayload = null;
+
+  /** @type {import('@uploadcare/upload-client').Queue | null} */
+  _queue = null;
+
+  /** @param {import('../Block.js').Block} block */
+  constructor(block) {
+    this._block = block;
+
+    this._telemetryInstance = new TelemetryAPIService();
+
+    this._queue = new Queue(10);
+
+    for (const key of /** @type {(keyof import('../../types/exported').ConfigType)[]} */ (Object.keys(initialConfig))) {
+      block.subConfigValue(key, (value) => {
+        if (this._initialized && this._config[key] !== value) {
+          console.log({ key, value });
+
+          this._block?.emit(EventType.CHANGE_CONFIG, undefined);
+        }
+
+        this._setConfig(key, value);
+      });
+    }
+  }
+
+  /** @param {keyof import('../../blocks/UploadCtxProvider/EventEmitter.js').EventPayload | undefined} type */
+  _init(type) {
+    if (type === EventType.INIT_SOLUTION && !this._initialized) {
+      this._initialized = true;
+    }
+  }
+
+  /**
+   * @template {keyof import('../../types').ConfigType} T
+   * @param {T} key
+   * @param {import('../../types').ConfigType[T]} value
+   */
+  _setConfig(key, value) {
+    if (this._config[key] === value) {
+      return;
+    }
+
+    this._config[key] = value;
+  }
+
+  /**
+   * @param {Pick<TelemetryState, 'eventType' | 'payload' | 'config'>} body
+   * @returns {TelemetryState}
+   */
+  _formattingPayload(body) {
+    const payload = body.payload ? { ...body.payload } : {};
+    if (payload.activity) payload.activity = undefined;
+
+    const result = { ...body };
+    if (body.eventType === EventType.INIT_SOLUTION || body.eventType === EventType.CHANGE_CONFIG) {
+      result.config = this._config;
+    }
+
+    return {
+      ...result,
+
+      appVersion: PACKAGE_VERSION,
+      appName: PACKAGE_NAME,
+      sessionId: this._sessionId,
+      component: this._solution,
+      activity: this._activity,
+      projectPubkey: this._config?.pubkey,
+      userAgent: navigator.userAgent,
+      eventType: result.eventType ?? '',
+      eventTimestamp: this._timestamp,
+
+      payload: {
+        ...payload,
+      },
+    };
+  }
+
+  /** @param {keyof import('../../blocks/UploadCtxProvider/EventEmitter.js').EventPayload | undefined} type */
+  _excludedEvents(type) {
+    if (
+      type &&
+      [
+        EventType.CHANGE,
+        EventType.COMMON_UPLOAD_PROGRESS,
+        EventType.FILE_ADDED,
+        EventType.FILE_REMOVED,
+        EventType.FILE_UPLOAD_START,
+        EventType.FILE_UPLOAD_PROGRESS,
+        EventType.FILE_UPLOAD_SUCCESS,
+        EventType.FILE_UPLOAD_FAILED,
+        EventType.FILE_URL_CHANGED,
+        EventType.GROUP_CREATED,
+      ].includes(type)
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * @param {Partial<Pick<TelemetryState, 'eventType' | 'payload'>> & {
+   *   modalId?: string;
+   *   eventType?: keyof import('../../blocks/UploadCtxProvider/EventEmitter.js').EventPayload;
+   * }} body
+   */
+  sendEvent(body) {
+    const payload = this._formattingPayload(
+      /** @type {Pick<TelemetryState, 'eventType' | 'payload' | 'config'>} */ (body),
+    );
+
+    this._init(body.eventType);
+
+    const hasExcludedEvents = this._excludedEvents(body.eventType);
+    if (hasExcludedEvents) return null;
+
+    const hasDataSame = this._lastPayload && this._checkObj(this._lastPayload, payload);
+    if (hasDataSame) return null;
+
+    this._queue?.add(async () => {
+      this._lastPayload = payload;
+      await this._telemetryInstance?.sendEvent(/** @type {TelemetryState} */ (payload));
+    });
+  }
+
+  /**
+   * Method to send telemetry event for Cloud Image Editor.
+   *
+   * @param {MouseEvent} e
+   * @param {string} tabId
+   * @param {Record<string, unknown>} options
+   */
+  sendEventCloudImageEditor(e, tabId, options = {}) {
+    this.sendEvent({
+      payload: {
+        metadata: {
+          tabId,
+          node: /** @type {HTMLElement} */ (e.currentTarget)?.tagName,
+          event: e.type,
+          ...options,
+        },
+      },
+    });
+  }
+
+  /**
+   * Deeply compares two objects and returns true if they are equal, false otherwise.
+   *
+   * @param {any} last
+   * @param {any} current
+   */
+  _checkObj(last, current) {
+    if (JSON.stringify(last) === JSON.stringify(current)) return true;
+    if (typeof last !== 'object' || typeof current !== 'object' || last == null || current == null) return false;
+    const lastKeys = Object.keys(last);
+    const currentKeys = Object.keys(current);
+    if (lastKeys.length !== currentKeys.length) return false;
+    for (const key of lastKeys) {
+      if (!Object.prototype.hasOwnProperty.call(current, key)) return false;
+      if (!this._checkObj(last[key], current[key])) return false;
+    }
+
+    return true;
+  }
+
+  get _timestamp() {
+    return Date.now();
+  }
+
+  get _solution() {
+    return this._block?.has('*solution') ? this._block?.$['*solution'].toLowerCase() : null;
+  }
+
+  get _activity() {
+    return this._block?.has('*currentActivity') ? this._block?.$['*currentActivity'] : null;
+  }
+}

package/abstract/{ValidationManager.d.ts → managers/ValidationManager.d.ts}

@@ -1,16 +1,16 @@
 export class ValidationManager {
-    /** @param {import('./UploaderBlock.js').UploaderBlock} blockInstance */
-    constructor(blockInstance: import("./UploaderBlock.js").UploaderBlock);
+    /** @param {import('../UploaderBlock.js').UploaderBlock} blockInstance */
+    constructor(blockInstance: import("../UploaderBlock.js").UploaderBlock);
     /**
      * @private
-     * @type {import('./UploaderBlock.js').UploaderBlock}
+     * @type {import('../UploaderBlock.js').UploaderBlock}
      */
     private _blockInstance;
     /** @type {FuncFileValidator[]} */
     _fileValidators: FuncFileValidator[];
     /** @type {FuncCollectionValidator[]} */
     _collectionValidators: FuncCollectionValidator[];
-    _uploadCollection: import("./TypedCollection.js").TypedCollection<Readonly<{
+    _uploadCollection: import("../TypedCollection.js").TypedCollection<Readonly<{
         file: Readonly<{
             type: {
                 new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
@@ -135,7 +135,7 @@ export class ValidationManager {
     runCollectionValidators(): void;
     /**
      * @private
-     * @param {import('./TypedData.js').TypedData<typeof import('./uploadEntrySchema.js').uploadEntrySchema>} entry
+     * @param {import('../TypedData.js').TypedData<typeof import('../uploadEntrySchema.js').uploadEntrySchema>} entry
      */
     private _runFileValidatorsForEntry;
     /**
@@ -145,6 +145,6 @@ export class ValidationManager {
      */
     _addCustomTypeToValidators<T>(validators: T[]): T[];
 }
-export type FuncFileValidator = (outputEntry: import("../types").OutputFileEntry, api: import("./UploaderPublicApi.js").UploaderPublicApi) => undefined | import("../types").OutputErrorFile;
-export type FuncCollectionValidator = (collection: ReturnType<typeof import("./buildOutputCollectionState.js").buildOutputCollectionState<import("../types").OutputCollectionStatus>>, api: import("./UploaderPublicApi.js").UploaderPublicApi) => undefined | import("../types").OutputErrorCollection;
+export type FuncFileValidator = (outputEntry: import("../../types/index.js").OutputFileEntry, api: import("../UploaderPublicApi.js").UploaderPublicApi) => undefined | import("../../types/index.js").OutputErrorFile;
+export type FuncCollectionValidator = (collection: ReturnType<typeof import("../buildOutputCollectionState.js").buildOutputCollectionState<import("../../types/index.js").OutputCollectionStatus>>, api: import("../UploaderPublicApi.js").UploaderPublicApi) => undefined | import("../../types/index.js").OutputErrorCollection;
 //# sourceMappingURL=ValidationManager.d.ts.map

package/abstract/{ValidationManager.d.ts.map → managers/ValidationManager.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"ValidationManager.d.ts","sourceRoot":"","sources":["ValidationManager.js"],"names":[],"mappings":"AAkCA;IAaE,wEAAwE;IACxE,2BADY,OAAO,oBAAoB,EAAE,aAAa,EAiBrD;IA7BD;;;OAGG;IACH,uBAAe;IAEf,kCAAkC;IAClC,iBADW,iBAAiB,EAAE,CACmE;IAEjG,wCAAwC;IACxC,uBADW,uBAAuB,EAAE,CACsC;IAMxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAA6D;IAe/D,mCAAmC;IACnC,6BADY,MAAM,EAAE,QASnB;IAED,gCAqCC;IAED;;;OAGG;IACH,mCAyBC;IAED;;;;OAIG;IACH,2BAJa,CAAC,cACH,CAAC,EAAE,GACD,CAAC,EAAE,CAUf;CACF;gCAtJY,CACR,WAAW,EAAE,OAAO,UAAU,EAAE,eAAe,EAC/C,GAAG,EAAE,OAAO,wBAAwB,EAAE,iBAAiB,KACpD,SAAS,GAAG,OAAO,UAAU,EAAE,eAAe;sCAIzC,CACR,UAAU,EAAE,UAAU,CAC1B,cAAoB,iCAAiC,EAAE,0BAA0B,CACjF,OAAe,UAAU,EAAE,sBAAsB,CAC1C,CACF,EACD,GAAG,EAAE,OAAO,wBAAwB,EAAE,iBAAiB,KACpD,SAAS,GAAG,OAAO,UAAU,EAAE,qBAAqB"}
+{"version":3,"file":"ValidationManager.d.ts","sourceRoot":"","sources":["ValidationManager.js"],"names":[],"mappings":"AAkCA;IAaE,yEAAyE;IACzE,2BADY,OAAO,qBAAqB,EAAE,aAAa,EAiBtD;IA7BD;;;OAGG;IACH,uBAAe;IAEf,kCAAkC;IAClC,iBADW,iBAAiB,EAAE,CACmE;IAEjG,wCAAwC;IACxC,uBADW,uBAAuB,EAAE,CACsC;IAMxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAA6D;IAe/D,mCAAmC;IACnC,6BADY,MAAM,EAAE,QASnB;IAED,gCAqCC;IAED;;;OAGG;IACH,mCAyBC;IAED;;;;OAIG;IACH,2BAJa,CAAC,cACH,CAAC,EAAE,GACD,CAAC,EAAE,CAUf;CACF;gCAtJY,CACR,WAAW,EAAE,OAAO,sBAAsB,EAAE,eAAe,EAC3D,GAAG,EAAE,OAAO,yBAAyB,EAAE,iBAAiB,KACrD,SAAS,GAAG,OAAO,sBAAsB,EAAE,eAAe;sCAIrD,CACR,UAAU,EAAE,UAAU,CAC1B,cAAoB,kCAAkC,EAAE,0BAA0B,CAClF,OAAe,sBAAsB,EAAE,sBAAsB,CACtD,CACF,EACD,GAAG,EAAE,OAAO,yBAAyB,EAAE,iBAAiB,KACrD,SAAS,GAAG,OAAO,sBAAsB,EAAE,qBAAqB"}

package/abstract/{ValidationManager.js → managers/ValidationManager.js}

@@ -1,29 +1,29 @@
 // @ts-check
-import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
+import { EventType } from '../../blocks/UploadCtxProvider/EventEmitter.js';
 import {
   validateIsImage,
   validateFileType,
   validateMaxSizeLimit,
   validateUploadError,
-} from '../utils/validators/file/index.js';
-import { validateMultiple, validateCollectionUploadError } from '../utils/validators/collection/index.js';
+} from '../../utils/validators/file/index.js';
+import { validateMultiple, validateCollectionUploadError } from '../../utils/validators/collection/index.js';
 
 /**
  * @typedef {(
- *   outputEntry: import('../types').OutputFileEntry,
- *   api: import('./UploaderPublicApi.js').UploaderPublicApi,
- * ) => undefined | import('../types').OutputErrorFile} FuncFileValidator
+ *   outputEntry: import('../../types/index.js').OutputFileEntry,
+ *   api: import('../UploaderPublicApi.js').UploaderPublicApi,
+ * ) => undefined | import('../../types/index.js').OutputErrorFile} FuncFileValidator
  */
 
 /**
  * @typedef {(
  *   collection: ReturnType<
- *     typeof import('./buildOutputCollectionState.js').buildOutputCollectionState<
- *       import('../types').OutputCollectionStatus
+ *     typeof import('../buildOutputCollectionState.js').buildOutputCollectionState<
+ *       import('../../types/index.js').OutputCollectionStatus
  *     >
  *   >,
- *   api: import('./UploaderPublicApi.js').UploaderPublicApi,
- * ) => undefined | import('../types').OutputErrorCollection} FuncCollectionValidator
+ *   api: import('../UploaderPublicApi.js').UploaderPublicApi,
+ * ) => undefined | import('../../types/index.js').OutputErrorCollection} FuncCollectionValidator
  */
 
 const LOGGER = {
@@ -35,7 +35,7 @@ const LOGGER = {
 export class ValidationManager {
   /**
    * @private
-   * @type {import('./UploaderBlock.js').UploaderBlock}
+   * @type {import('../UploaderBlock.js').UploaderBlock}
    */
   _blockInstance;
 
@@ -45,7 +45,7 @@ export class ValidationManager {
   /** @type {FuncCollectionValidator[]} */
   _collectionValidators = [validateMultiple, validateCollectionUploadError];
 
-  /** @param {import('./UploaderBlock.js').UploaderBlock} blockInstance */
+  /** @param {import('../UploaderBlock.js').UploaderBlock} blockInstance */
   constructor(blockInstance) {
     this._blockInstance = blockInstance;
 
@@ -106,7 +106,7 @@ export class ValidationManager {
       this._blockInstance.emit(
         EventType.COMMON_UPLOAD_FAILED,
         () =>
-          /** @type {import('../types').OutputCollectionState<'failed'>} */ (
+          /** @type {import('../../types/index.js').OutputCollectionState<'failed'>} */ (
             this._blockInstance.api.getOutputCollectionState()
           ),
         { debounce: true },
@@ -116,7 +116,7 @@ export class ValidationManager {
 
   /**
    * @private
-   * @param {import('./TypedData.js').TypedData<typeof import('./uploadEntrySchema.js').uploadEntrySchema>} entry
+   * @param {import('../TypedData.js').TypedData<typeof import('../uploadEntrySchema.js').uploadEntrySchema>} entry
    */
   _runFileValidatorsForEntry(entry) {
     const outputEntry = this._blockInstance.api.getOutputItem(entry.uid);

package/abstract/{a11y.d.ts → managers/a11y.d.ts}

@@ -9,8 +9,8 @@ export class A11y {
      * @type {ScopedMinimalWindow}
      */
     private _scopedWindow;
-    /** @param {import('./Block.js').Block} scope */
-    registerBlock(scope: import("./Block.js").Block): void;
+    /** @param {import('../Block.js').Block} scope */
+    registerBlock(scope: import("../Block.js").Block): void;
     destroy(): void;
 }
 /**

package/abstract/managers/a11y.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["a11y.js"],"names":[],"mappings":"AAqFA;IACE;;;OAGG;IACH,sBAAc;IAEd;;;OAGG;IACH,sBAAc;IAYd,iDAAiD;IACjD,qBADY,OAAO,aAAa,EAAE,KAAK,QAGtC;IAED,gBAGC;CACF;;;;4BA/GY,UAAU,CAAC,OAAO,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC"}

package/abstract/{a11y.js → managers/a11y.js}

@@ -106,7 +106,7 @@ export class A11y {
     ]);
   }
 
-  /** @param {import('./Block.js').Block} scope */
+  /** @param {import('../Block.js').Block} scope */
   registerBlock(scope) {
     this._scopedWindow.registerScope(scope);
   }

package/blocks/CameraSource/CameraSource.d.ts

@@ -68,7 +68,7 @@ export class CameraSource extends UploaderBlock {
         '*collectionState': import("../../index.js").OutputCollectionState | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;
-        '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
+        '*secureUploadsManager': import("../../abstract/managers/SecureUploadsManager.js").SecureUploadsManager | null;
         '*currentActivity': null;
         '*currentActivityParams': {};
         '*history': never[];

package/blocks/CloudImageEditor/src/EditorCropButtonControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorCropButtonControl.d.ts","sourceRoot":"","sources":["EditorCropButtonControl.js"],"names":[],"mappings":"AAkBA;IASM,eAAe;IACf,mBAA2B;CAehC;oCA3CmC,0BAA0B"}
+{"version":3,"file":"EditorCropButtonControl.d.ts","sourceRoot":"","sources":["EditorCropButtonControl.js"],"names":[],"mappings":"AAkBA;IASM,eAAe;IACf,mBAA2B;CAsBhC;oCAlDmC,0BAA0B"}

package/blocks/CloudImageEditor/src/EditorCropButtonControl.js

@@ -35,9 +35,16 @@ export class EditorCropButtonControl extends EditorButtonControl {
       );
     });
 
-    this.$['on.click'] = () => {
+    this.$['on.click'] = (e) => {
       let prev = this.$['*cropperEl'].getValue(this._operation);
       let next = nextValue(this._operation, prev);
+
+      this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+        operation: this._operation,
+        next,
+        prev,
+      });
+
       this.$['*cropperEl'].setValue(this._operation, next);
     };
   }

package/blocks/CloudImageEditor/src/EditorFilterControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorFilterControl.d.ts","sourceRoot":"","sources":["EditorFilterControl.js"],"names":[],"mappings":"AAOA;IAeE,sBA2BC;IAED;;;OAGG;IACH,2BAHW,yBAAyB,EAAE,YAC3B,oBAAoB,iBAuB9B;IAfG,yCAA4B;IAoC1B,+BAA0B;IAC1B,4BAAqB;IAYzB,4CAEE;IAGF,kBAA+B;CAgDlC;;;;oCAjKmC,0BAA0B"}
+{"version":3,"file":"EditorFilterControl.d.ts","sourceRoot":"","sources":["EditorFilterControl.js"],"names":[],"mappings":"AAQA;IAeE,sBA2BC;IAED;;;OAGG;IACH,2BAHW,yBAAyB,EAAE,YAC3B,oBAAoB,iBAuB9B;IAfG,yCAA4B;IAyC1B,+BAA0B;IAC1B,4BAAqB;IAYzB,4CAEE;IAGF,kBAA+B;CAgDlC;;;;oCAvKmC,0BAA0B"}

package/blocks/CloudImageEditor/src/EditorFilterControl.js

@@ -4,6 +4,7 @@ import { EditorButtonControl } from './EditorButtonControl.js';
 import { FAKE_ORIGINAL_FILTER } from './EditorSlider.js';
 import { COMMON_OPERATIONS, transformationsToOperations } from './lib/transformationUtils.js';
 import { preloadImage } from '../../utils/preloadImage.js';
+import { parseFilterValue } from './utils/parseFilterValue.js';
 
 export class EditorFilterControl extends EditorButtonControl {
   constructor() {
@@ -79,7 +80,8 @@ export class EditorFilterControl extends EditorButtonControl {
   initCallback() {
     super.initCallback();
 
-    this.$['on.click'] = () => {
+    /** @param {MouseEvent} e */
+    this.$['on.click'] = (e) => {
       if (!this.$.active) {
         this.$['*sliderEl'].setOperation(this._operation, this._filter);
         this.$['*sliderEl'].apply();
@@ -88,6 +90,10 @@ export class EditorFilterControl extends EditorButtonControl {
         this.$['*showSlider'] = true;
       }
 
+      this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+        operation: parseFilterValue(this.$['*operationTooltip']),
+      });
+
       this.$['*currentFilter'] = this._filter;
     };
 

package/blocks/CloudImageEditor/src/EditorOperationControl.d.ts

@@ -1,7 +1,7 @@
 export class EditorOperationControl extends EditorButtonControl {
     /**
      * @private
-     * @type {String}
+     * @type {import('./toolbar-constants.js').ColorOperation | ''}
      */
     private _operation;
 }

package/blocks/CloudImageEditor/src/EditorOperationControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorOperationControl.d.ts","sourceRoot":"","sources":["EditorOperationControl.js"],"names":[],"mappings":"AAGA;IACE;;;OAGG;IACH,mBAAgB;CAmCjB;oCA3CmC,0BAA0B"}
+{"version":3,"file":"EditorOperationControl.d.ts","sourceRoot":"","sources":["EditorOperationControl.js"],"names":[],"mappings":"AAKA;IACE;;;OAGG;IACH,mBAAgB;CAuCjB;oCAhDmC,0BAA0B"}

package/blocks/CloudImageEditor/src/EditorOperationControl.js

@@ -1,23 +1,29 @@
+//@ts-check
 import { EditorButtonControl } from './EditorButtonControl.js';
 import { COLOR_OPERATIONS_CONFIG } from './toolbar-constants.js';
+import { parseFilterValue } from './utils/parseFilterValue.js';
 
 export class EditorOperationControl extends EditorButtonControl {
   /**
    * @private
-   * @type {String}
+   * @type {import('./toolbar-constants.js').ColorOperation | ''}
    */
   _operation = '';
 
   initCallback() {
     super.initCallback();
 
-    this.$['on.click'] = (e) => {
+    this.$['on.click'] = (/** @type {MouseEvent} */ e) => {
       this.$['*sliderEl'].setOperation(this._operation);
       this.$['*showSlider'] = true;
       this.$['*currentOperation'] = this._operation;
+
+      this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+        operation: parseFilterValue(this.$['*operationTooltip']),
+      });
     };
 
-    this.defineAccessor('operation', (operation) => {
+    this.defineAccessor('operation', (/** @type {import('./toolbar-constants.js').ColorOperation} */ operation) => {
       if (operation) {
         this._operation = operation;
         this.$['icon'] = operation;

package/blocks/CloudImageEditor/src/EditorToolbar.d.ts

@@ -40,10 +40,14 @@ export class EditorToolbar extends Block {
             hidden: string;
             visible: string;
         };
-        'on.cancel': () => void;
-        'on.apply': () => void;
-        'on.applySlider': () => void;
-        'on.cancelSlider': () => void;
+        /** @param {MouseEvent} e */
+        'on.cancel': (e: MouseEvent) => void;
+        /** @param {MouseEvent} e */
+        'on.apply': (e: MouseEvent) => void;
+        /** @param {MouseEvent} e */
+        'on.applySlider': (e: MouseEvent) => void;
+        /** @param {MouseEvent} e */
+        'on.cancelSlider': (e: MouseEvent) => void;
         /** @param {MouseEvent} e */
         'on.clickTab': (e: MouseEvent) => void;
         tab_role: string;

package/blocks/CloudImageEditor/src/EditorToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbar.d.ts","sourceRoot":"","sources":["EditorToolbar.js"],"names":[],"mappings":"AA2DA;IAII;;QAGE,qDAAqD;8BAA1C,OAAO,YAAY,EAAE,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAuDjD,4BAA4B;2BAAhB,UAAU;;;;;;;MAgBvB;IAED,eAAe;IAEf,6BAAsE;IAGxE,eAAe;IACf,uBAKC;IAED;;;OAGG;IACH,gCAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,4BAoCC;IAED;;;;OAIG;IACH,qBAyBC;IAED;;;OAGG;IACH,4BAKC;IAED,eAAe;IACf,0BAIC;IAED,eAAe;IACf,4BAWC;IALG,oBAGC;IAIL;;;OAGG;IACH,oBAEC;IAED;;MAwBM;CAqFP;;;;sBAtZqB,4BAA4B"}
+{"version":3,"file":"EditorToolbar.d.ts","sourceRoot":"","sources":["EditorToolbar.js"],"names":[],"mappings":"AA4DA;IAII;;QAGE,qDAAqD;8BAA1C,OAAO,YAAY,EAAE,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAwCjD,4BAA4B;yBAAhB,UAAU;QAStB,4BAA4B;wBAAhB,UAAU;QAOtB,4BAA4B;8BAAhB,UAAU;QAStB,4BAA4B;+BAAhB,UAAU;QAQtB,4BAA4B;2BAAhB,UAAU;;;;;;;MAiBvB;IAED,eAAe;IAEf,6BAAsE;IAGxE,eAAe;IACf,uBAKC;IAED;;;OAGG;IACH,gCAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,4BAoCC;IAED;;;;OAIG;IACH,qBAyBC;IAED;;;OAGG;IACH,4BAKC;IAED,eAAe;IACf,0BAIC;IAED,eAAe;IACf,4BAWC;IALG,oBAGC;IAIL;;;OAGG;IACH,oBAEC;IAED;;MAwBM;CAqFP;;;;sBA1aqB,4BAA4B"}

package/blocks/CloudImageEditor/src/EditorToolbar.js

@@ -15,6 +15,7 @@ import {
   TabId,
 } from './toolbar-constants.js';
 import { viewerImageSrc } from './util.js';
+import { parseFilterValue } from './utils/parseFilterValue.js';
 
 /** @param {String} id */
 function renderTabToggle(id) {
@@ -104,18 +105,36 @@ export class EditorToolbar extends Block {
         hidden: 'uc-tab-toggles--hidden',
         visible: 'uc-tab-toggles--visible',
       },
-      'on.cancel': () => {
+      /** @param {MouseEvent} e */
+      'on.cancel': (e) => {
+        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+          action: 'cancel',
+        });
+
         this._cancelPreload?.();
         this.$['*on.cancel']();
       },
-      'on.apply': () => {
+      /** @param {MouseEvent} e */
+      'on.apply': (e) => {
+        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+          action: 'apply',
+        });
         this.$['*on.apply'](this.$['*editorTransformations']);
       },
-      'on.applySlider': () => {
+      /** @param {MouseEvent} e */
+      'on.applySlider': (e) => {
+        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+          action: 'apply-slider',
+          operation: parseFilterValue(this.$['*operationTooltip']),
+        });
         this.ref['slider-el'].apply();
         this._onSliderClose();
       },
-      'on.cancelSlider': () => {
+      /** @param {MouseEvent} e */
+      'on.cancelSlider': (e) => {
+        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+          action: 'cancel-slider',
+        });
         this.ref['slider-el'].cancel();
         this._onSliderClose();
       },
@@ -123,6 +142,7 @@ export class EditorToolbar extends Block {
       'on.clickTab': (e) => {
         const id = /** @type {HTMLElement} */ (e.currentTarget).getAttribute('data-id');
         if (id) {
+          this.telemetryManager.sendEventCloudImageEditor(e, id);
           this._activateTab(id, { fromViewer: false });
         }
       },

package/blocks/CloudImageEditor/src/toolbar-constants.d.ts

@@ -55,4 +55,5 @@ export const COLOR_OPERATIONS_CONFIG: Readonly<{
         keypointsNumber: number;
     };
 }>;
+export type ColorOperation = keyof typeof COLOR_OPERATIONS_CONFIG;
 //# sourceMappingURL=toolbar-constants.d.ts.map

package/blocks/CloudImageEditor/src/toolbar-constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-constants.d.ts","sourceRoot":"","sources":["toolbar-constants.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,yDAAkE;AAElE,4CASE;AAEF,mCAyCE;AAEF,2CAAgE;AAEhE,iGAAiG;AACjG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG"}
+{"version":3,"file":"toolbar-constants.d.ts","sourceRoot":"","sources":["toolbar-constants.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,yDAAkE;AAElE,4CASE;AAEF,mCAyCE;AAEF,2CAAgE;AAEhE,iGAAiG;AACjG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;6BAEW,MAAM,OAAO,uBAAuB"}

package/blocks/CloudImageEditor/src/toolbar-constants.js

@@ -112,3 +112,5 @@ export const COLOR_OPERATIONS_CONFIG = Object.freeze({
     keypointsNumber: 1,
   },
 });
+
+/** @typedef {keyof typeof COLOR_OPERATIONS_CONFIG} ColorOperation */

package/blocks/CloudImageEditor/src/utils/parseFilterValue.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Parses a string like "iothari 100" into an object { filter: "iothari", value: 100 }
+ *
+ * @param {string} str
+ * @returns {{ filter: string; value: number } | null}
+ */
+export function parseFilterValue(str: string): {
+    filter: string;
+    value: number;
+} | null;
+//# sourceMappingURL=parseFilterValue.d.ts.map

package/blocks/CloudImageEditor/src/utils/parseFilterValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseFilterValue.d.ts","sourceRoot":"","sources":["parseFilterValue.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,sCAHW,MAAM,GACJ;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAMpD"}

package/blocks/CloudImageEditor/src/utils/parseFilterValue.js

@@ -0,0 +1,11 @@
+/**
+ * Parses a string like "iothari 100" into an object { filter: "iothari", value: 100 }
+ *
+ * @param {string} str
+ * @returns {{ filter: string; value: number } | null}
+ */
+export function parseFilterValue(str) {
+  const match = str.match(/^(\w+)\s+(\d+)$/);
+  if (!match) return null;
+  return { filter: match[1], value: Number(match[2]) };
+}

package/blocks/Config/initialConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,gCAAiC,sBAAsB,CAAC;AACxD,+BAAgC,+BAA+B,CAAC;AAChE,sCAAuC,+BAA+B,CAAC;AACvE,+CAAgD,qBAAqB,CAAC;AAEtE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CA8ElD"}
+{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,gCAAiC,sBAAsB,CAAC;AACxD,+BAAgC,+BAA+B,CAAC;AAChE,sCAAuC,+BAA+B,CAAC;AACvE,+CAAgD,qBAAqB,CAAC;AAEtE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CAgFlD"}

package/blocks/Config/initialConfig.js

@@ -86,4 +86,6 @@ export const initialConfig = {
   cloudImageEditorMaskHref: null,
 
   testMode: false,
+
+  qualityInsights: true,
 };

package/blocks/Config/normalizeConfigValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AAiHO,qCAL+C,CAAC,SAA1C,MAAO,OAAO,aAAa,EAAE,UAAW,OAC1C,CAAC,SACD,OAAO,GACL,OAAO,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,CAa3D"}
+{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AAmHO,qCAL+C,CAAC,SAA1C,MAAO,OAAO,aAAa,EAAE,UAAW,OAC1C,CAAC,SACD,OAAO,GACL,OAAO,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,CAa3D"}

package/blocks/Config/normalizeConfigValue.js

@@ -103,6 +103,8 @@ const mapping = {
   cloudImageEditorMaskHref: asString,
 
   testMode: asBoolean,
+
+  qualityInsights: asBoolean,
 };
 
 /**

package/blocks/DropArea/DropArea.d.ts

@@ -16,7 +16,7 @@ export class DropArea extends UploaderBlock {
         '*collectionState': import("../../index.js").OutputCollectionState | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;
-        '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
+        '*secureUploadsManager': import("../../abstract/managers/SecureUploadsManager.js").SecureUploadsManager | null;
         '*currentActivity': null;
         '*currentActivityParams': {};
         '*history': never[];