@uploadcare/file-uploader 0.50.1-alpha.2

package/abstract/UploaderPublicApi.js

@@ -0,0 +1,316 @@
+// @ts-check
+import { ActivityBlock } from './ActivityBlock.js';
+
+import { Data } from '@symbiotejs/symbiote';
+import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
+import { UploadSource } from '../blocks/utils/UploadSource.js';
+import { serializeCsv } from '../blocks/utils/comma-separated.js';
+import { IMAGE_ACCEPT_LIST, fileIsImage, mergeFileTypes } from '../utils/fileTypes.js';
+import { parseCdnUrl } from '../utils/parseCdnUrl.js';
+import { buildOutputCollectionState } from './buildOutputCollectionState.js';
+import { stringToArray } from '../utils/stringToArray.js';
+
+export class UploaderPublicApi {
+  /**
+   * @private
+   * @type {import('./UploaderBlock.js').UploaderBlock}
+   */
+  _ctx;
+
+  /** @param {import('./UploaderBlock.js').UploaderBlock} ctx */
+  constructor(ctx) {
+    this._ctx = ctx;
+  }
+
+  /** @private */
+  get _uploadCollection() {
+    return this._ctx.uploadCollection;
+  }
+
+  get cfg() {
+    return this._ctx.cfg;
+  }
+
+  get l10n() {
+    return this._ctx.l10n.bind(this._ctx);
+  }
+
+  /**
+   * TODO: Probably we should not allow user to override `source` property
+   *
+   * @param {string} url
+   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
+   * @returns {import('../types').OutputFileEntry<'idle'>}
+   */
+  addFileFromUrl = (url, { silent, fileName, source } = {}) => {
+    const internalId = this._uploadCollection.add({
+      externalUrl: url,
+      fileName: fileName ?? null,
+      silent: silent ?? false,
+      source: source ?? UploadSource.API,
+    });
+    return this.getOutputItem(internalId);
+  };
+
+  /**
+   * @param {string} uuid
+   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
+   * @returns {import('../types').OutputFileEntry<'idle'>}
+   */
+  addFileFromUuid = (uuid, { silent, fileName, source } = {}) => {
+    const internalId = this._uploadCollection.add({
+      uuid,
+      fileName: fileName ?? null,
+      silent: silent ?? false,
+      source: source ?? UploadSource.API,
+    });
+    return this.getOutputItem(internalId);
+  };
+
+  /**
+   * @param {string} cdnUrl
+   * @param {{ silent?: boolean; fileName?: string; source?: string }} [options]
+   * @returns {import('../types').OutputFileEntry<'idle'>}
+   */
+  addFileFromCdnUrl = (cdnUrl, { silent, fileName, source } = {}) => {
+    const parsedCdnUrl = parseCdnUrl({ url: cdnUrl, cdnBase: this.cfg.cdnCname });
+    if (!parsedCdnUrl) {
+      throw new Error('Invalid CDN URL');
+    }
+    const internalId = this._uploadCollection.add({
+      uuid: parsedCdnUrl.uuid,
+      cdnUrl,
+      cdnUrlModifiers: parsedCdnUrl.cdnUrlModifiers,
+      fileName: fileName ?? parsedCdnUrl.filename ?? null,
+      silent: silent ?? false,
+      source: source ?? UploadSource.API,
+    });
+    return this.getOutputItem(internalId);
+  };
+
+  /**
+   * @param {File} file
+   * @param {{ silent?: boolean; fileName?: string; source?: string; fullPath?: string }} [options]
+   * @returns {import('../types').OutputFileEntry<'idle'>}
+   */
+  addFileFromObject = (file, { silent, fileName, source, fullPath } = {}) => {
+    const internalId = this._uploadCollection.add({
+      file,
+      isImage: fileIsImage(file),
+      mimeType: file.type,
+      fileName: fileName ?? file.name,
+      fileSize: file.size,
+      silent: silent ?? false,
+      source: source ?? UploadSource.API,
+      fullPath: fullPath ?? null,
+    });
+    return this.getOutputItem(internalId);
+  };
+
+  /** @param {string} internalId */
+  removeFileByInternalId = (internalId) => {
+    if (!this._uploadCollection.read(internalId)) {
+      throw new Error(`File with internalId ${internalId} not found`);
+    }
+    this._uploadCollection.remove(internalId);
+  };
+
+  removeAllFiles() {
+    this._uploadCollection.clearAll();
+  }
+
+  uploadAll = () => {
+    const itemsToUpload = this._uploadCollection.items().filter((id) => {
+      const entry = this._uploadCollection.read(id);
+      return !entry.getValue('isRemoved') && !entry.getValue('isUploading') && !entry.getValue('fileInfo');
+    });
+
+    if (itemsToUpload.length === 0) {
+      return;
+    }
+
+    this._ctx.$['*uploadTrigger'] = new Set(itemsToUpload);
+    this._ctx.emit(
+      EventType.COMMON_UPLOAD_START,
+      /** @type {import('../types').OutputCollectionState<'uploading'>} */ (this.getOutputCollectionState()),
+    );
+  };
+
+  /** @param {{ captureCamera?: boolean }} options */
+  openSystemDialog = (options = {}) => {
+    let accept = serializeCsv(mergeFileTypes([this.cfg.accept ?? '', ...(this.cfg.imgOnly ? IMAGE_ACCEPT_LIST : [])]));
+
+    if (this.cfg.accept && !!this.cfg.imgOnly) {
+      console.warn(
+        'There could be a mistake.\n' +
+          'Both `accept` and `imgOnly` parameters are set.\n' +
+          'The value of `accept` will be concatenated with the internal image mime types list.',
+      );
+    }
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.multiple = this.cfg.multiple;
+    if (options.captureCamera) {
+      fileInput.capture = this.cfg.cameraCapture;
+      fileInput.accept = 'image/*';
+    } else {
+      fileInput.accept = accept;
+    }
+    fileInput.dispatchEvent(new MouseEvent('click'));
+    fileInput.onchange = () => {
+      // @ts-ignore TODO: fix this
+      [...fileInput['files']].forEach((file) =>
+        this.addFileFromObject(file, { source: options.captureCamera ? UploadSource.CAMERA : UploadSource.LOCAL }),
+      );
+      // To call uploadTrigger UploadList should draw file items first:
+      this._ctx.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+      this._ctx.setOrAddState('*modalActive', true);
+      // @ts-ignore TODO: fix this
+      fileInput['value'] = '';
+    };
+  };
+
+  /**
+   * @template {import('../types').OutputFileStatus} TStatus
+   * @param {string} entryId
+   * @returns {import('../types/exported.js').OutputFileEntry<TStatus>}
+   */
+  getOutputItem = (entryId) => {
+    const uploadEntryData = /** @type {import('./uploadEntrySchema.js').UploadEntry} */ (Data.getCtx(entryId).store);
+
+    /** @type {import('@uploadcare/upload-client').UploadcareFile?} */
+    const fileInfo = uploadEntryData.fileInfo;
+
+    /** @type {import('../types').OutputFileEntry['status']} */
+    let status = uploadEntryData.isRemoved
+      ? 'removed'
+      : uploadEntryData.errors.length > 0
+        ? 'failed'
+        : !!uploadEntryData.fileInfo
+          ? 'success'
+          : uploadEntryData.isUploading
+            ? 'uploading'
+            : 'idle';
+
+    /** @type {unknown} */
+    const outputItem = {
+      uuid: fileInfo?.uuid ?? uploadEntryData.uuid ?? null,
+      internalId: entryId,
+      name: fileInfo?.originalFilename ?? uploadEntryData.fileName,
+      size: fileInfo?.size ?? uploadEntryData.fileSize,
+      isImage: fileInfo?.isImage ?? uploadEntryData.isImage,
+      mimeType: fileInfo?.mimeType ?? uploadEntryData.mimeType,
+      file: uploadEntryData.file,
+      externalUrl: uploadEntryData.externalUrl,
+      cdnUrlModifiers: uploadEntryData.cdnUrlModifiers,
+      cdnUrl: uploadEntryData.cdnUrl ?? fileInfo?.cdnUrl ?? null,
+      fullPath: uploadEntryData.fullPath,
+      uploadProgress: uploadEntryData.uploadProgress,
+      fileInfo: fileInfo ?? null,
+      metadata: uploadEntryData.metadata ?? fileInfo?.metadata ?? null,
+      isSuccess: status === 'success',
+      isUploading: status === 'uploading',
+      isFailed: status === 'failed',
+      isRemoved: status === 'removed',
+      errors: /** @type {import('../types/exported.js').OutputFileEntry['errors']} */ (uploadEntryData.errors),
+      status,
+    };
+
+    return /** @type {import('../types/exported.js').OutputFileEntry<TStatus>} */ (outputItem);
+  };
+
+  /** @template {import('../types').OutputCollectionStatus} TStatus */
+  getOutputCollectionState = () => {
+    return /** @type {ReturnType<typeof buildOutputCollectionState<TStatus>>} */ (
+      buildOutputCollectionState(this._ctx)
+    );
+  };
+
+  /** @param {Boolean} [force] */
+  initFlow = (force = false) => {
+    if (this._uploadCollection.size > 0 && !force) {
+      this._ctx.set$({
+        '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
+      });
+      this._ctx.setOrAddState('*modalActive', true);
+    } else {
+      if (this._sourceList?.length === 1) {
+        const srcKey = this._sourceList[0];
+
+        // TODO: We should refactor those handlers
+        if (srcKey === 'local') {
+          this._ctx.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+          this.openSystemDialog();
+          return;
+        }
+
+        /** @type {Set<import('./Block').Block>} */
+        const blocksRegistry = this._ctx.$['*blocksRegistry'];
+        /**
+         * @param {import('./Block').Block} block
+         * @returns {block is import('../blocks/SourceBtn/SourceBtn.js').SourceBtn}
+         */
+        const isSourceBtn = (block) => 'type' in block && block.type === srcKey;
+        const sourceBtnBlock = [...blocksRegistry].find(isSourceBtn);
+        // TODO: This is weird that we have this logic inside UI component, we should consider to move it somewhere else
+        sourceBtnBlock?.activate();
+        if (this._ctx.$['*currentActivity']) {
+          this._ctx.setOrAddState('*modalActive', true);
+        }
+      } else {
+        // Multiple sources case:
+        this._ctx.set$({
+          '*currentActivity': ActivityBlock.activities.START_FROM,
+        });
+        this._ctx.setOrAddState('*modalActive', true);
+      }
+    }
+  };
+
+  doneFlow = () => {
+    this._ctx.set$({
+      '*currentActivity': this._ctx.doneActivity,
+      '*history': this._ctx.doneActivity ? [this._ctx.doneActivity] : [],
+    });
+    if (!this._ctx.$['*currentActivity']) {
+      this._ctx.setOrAddState('*modalActive', false);
+    }
+  };
+
+  /**
+   * @param {import('./ActivityBlock.js').ActivityType} activityType
+   * @param {import('../blocks/ExternalSource/ExternalSource.js').ActivityParams | {}} [params]
+   */
+  setCurrentActivity = (activityType, params = {}) => {
+    if (this._ctx.hasBlockInCtx((b) => b.activityType === activityType)) {
+      this._ctx.set$({
+        '*currentActivityParams': params,
+        '*currentActivity': activityType,
+      });
+      return;
+    }
+    console.warn(`Activity type "${activityType}" not found in the context`);
+  };
+
+  /** @param {boolean} opened */
+  setModalState = (opened) => {
+    if (opened && !this._ctx.$['*currentActivity']) {
+      console.warn(`Can't open modal without current activity. Please use "setCurrentActivity" method first.`);
+      return;
+    }
+    this._ctx.setOrAddState('*modalActive', opened);
+  };
+
+  /**
+   * @private
+   * @type {string[]}
+   */
+  get _sourceList() {
+    /** @type {string[]} */
+    let list = [];
+    if (this.cfg.sourceList) {
+      list = stringToArray(this.cfg.sourceList);
+    }
+    return list;
+  }
+}

package/abstract/ValidationManager.d.ts

@@ -0,0 +1,31 @@
+export class ValidationManager {
+    /** @param {import('./UploaderBlock.js').UploaderBlock} blockInstance */
+    constructor(blockInstance: import('./UploaderBlock.js').UploaderBlock);
+    /**
+     * @private
+     * @type {import('./UploaderBlock.js').UploaderBlock}
+     */
+    private _blockInstance;
+    /** @type {FuncFileValidator[]} */
+    _fileValidators: FuncFileValidator[];
+    /** @type {FuncCollectionValidator[]} */
+    _collectionValidators: FuncCollectionValidator[];
+    _uploadCollection: import("./TypedCollection.js").TypedCollection;
+    /** @param {string[]} [entryIds] */
+    runFileValidators(entryIds?: string[] | undefined): void;
+    runCollectionValidators(): void;
+    /**
+     * @private
+     * @param {import('./TypedData.js').TypedData} entry
+     */
+    private _runFileValidatorsForEntry;
+    /**
+     * @template T
+     * @param {T[]} validators
+     * @returns {T[]}
+     */
+    _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;
+//# sourceMappingURL=ValidationManager.d.ts.map

package/abstract/ValidationManager.d.ts.map

@@ -0,0 +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,kEAA6D;IAe/D,mCAAmC;IACnC,yDAQC;IAED,gCAqCC;IAED;;;OAGG;IACH,mCAyBC;IAED;;;;OAIG;IACH,oDAQC;CACF;8CArJiB,OAAO,UAAU,EAAE,eAAe,OAC1C,OAAO,wBAAwB,EAAE,iBAAiB,KACpD,SAAS,GAAG,OAAO,UAAU,EAAE,eAAe;mDAKrC,WAChB,cAAoB,iCAAiC,EAAE,0BAA0B,CACjF,OAAe,UAAU,EAAE,sBAAsB,CAC1C,CACF,OACI,OAAO,wBAAwB,EAAE,iBAAiB,KACpD,SAAS,GAAG,OAAO,UAAU,EAAE,qBAAqB"}

package/abstract/ValidationManager.js

@@ -0,0 +1,162 @@
+// @ts-check
+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';
+
+/**
+ * @typedef {(
+ *   outputEntry: import('../types').OutputFileEntry,
+ *   api: import('./UploaderPublicApi.js').UploaderPublicApi,
+ * ) => undefined | import('../types').OutputErrorFile} FuncFileValidator
+ */
+
+/**
+ * @typedef {(
+ *   collection: ReturnType<
+ *     typeof import('./buildOutputCollectionState.js').buildOutputCollectionState<
+ *       import('../types').OutputCollectionStatus
+ *     >
+ *   >,
+ *   api: import('./UploaderPublicApi.js').UploaderPublicApi,
+ * ) => undefined | import('../types').OutputErrorCollection} FuncCollectionValidator
+ */
+
+const LOGGER = {
+  file: 'File validator execution has failed',
+  collection: 'Collection validator execution has failed',
+  message: 'Missing message. We recommend adding message: value.',
+};
+
+export class ValidationManager {
+  /**
+   * @private
+   * @type {import('./UploaderBlock.js').UploaderBlock}
+   */
+  _blockInstance;
+
+  /** @type {FuncFileValidator[]} */
+  _fileValidators = [validateIsImage, validateFileType, validateMaxSizeLimit, validateUploadError];
+
+  /** @type {FuncCollectionValidator[]} */
+  _collectionValidators = [validateMultiple, validateCollectionUploadError];
+
+  /** @param {import('./UploaderBlock.js').UploaderBlock} blockInstance */
+  constructor(blockInstance) {
+    this._blockInstance = blockInstance;
+
+    this._uploadCollection = this._blockInstance.uploadCollection;
+
+    const runAllValidators = () => {
+      this.runFileValidators();
+      this.runCollectionValidators();
+    };
+
+    this._blockInstance.subConfigValue('maxLocalFileSizeBytes', runAllValidators);
+    this._blockInstance.subConfigValue('multipleMin', runAllValidators);
+    this._blockInstance.subConfigValue('multipleMax', runAllValidators);
+    this._blockInstance.subConfigValue('multiple', runAllValidators);
+    this._blockInstance.subConfigValue('imgOnly', runAllValidators);
+    this._blockInstance.subConfigValue('accept', runAllValidators);
+  }
+
+  /** @param {string[]} [entryIds] */
+  runFileValidators(entryIds) {
+    const ids = entryIds ?? this._uploadCollection.items();
+    for (const id of ids) {
+      const entry = this._uploadCollection.read(id);
+      if (entry) {
+        this._runFileValidatorsForEntry(entry);
+      }
+    }
+  }
+
+  runCollectionValidators() {
+    const collection = this._blockInstance.api.getOutputCollectionState();
+    const errors = [];
+
+    for (const validator of [
+      ...this._collectionValidators,
+      ...this._addCustomTypeToValidators(this._blockInstance.cfg.collectionValidators),
+    ]) {
+      try {
+        const errorOrErrors = validator(collection, this._blockInstance.api);
+        if (!errorOrErrors) {
+          continue;
+        }
+        if (errorOrErrors) {
+          errors.push(errorOrErrors);
+
+          if (!errorOrErrors.message) {
+            console.warn(LOGGER.message);
+          }
+        }
+      } catch (error) {
+        console.warn(LOGGER.collection, error);
+      }
+    }
+
+    this._blockInstance.$['*collectionErrors'] = errors;
+
+    if (errors.length > 0) {
+      this._blockInstance.emit(
+        EventType.COMMON_UPLOAD_FAILED,
+        () =>
+          /** @type {import('../types').OutputCollectionState<'failed'>} */ (
+            this._blockInstance.api.getOutputCollectionState()
+          ),
+        { debounce: true },
+      );
+    }
+  }
+
+  /**
+   * @private
+   * @param {import('./TypedData.js').TypedData} entry
+   */
+  _runFileValidatorsForEntry(entry) {
+    const outputEntry = this._blockInstance.api.getOutputItem(entry.uid);
+    const errors = [];
+
+    for (const validator of [
+      ...this._fileValidators,
+      ...this._addCustomTypeToValidators(this._blockInstance.cfg.fileValidators),
+    ]) {
+      try {
+        const error = validator(outputEntry, this._blockInstance.api);
+        if (!error) {
+          continue;
+        }
+        if (error) {
+          errors.push(error);
+
+          if (!error.message) {
+            console.warn(LOGGER.message);
+          }
+        }
+      } catch (error) {
+        console.warn(LOGGER.file, error);
+      }
+    }
+    entry.setValue('errors', errors);
+  }
+
+  /**
+   * @template T
+   * @param {T[]} validators
+   * @returns {T[]}
+   */
+  _addCustomTypeToValidators(validators) {
+    // @ts-ignore
+    return validators.map((fn) => (...args) => {
+      // @ts-ignore
+      const result = fn(...args);
+
+      return result ? { ...result, ...{ type: 'CUSTOM_ERROR' } } : undefined;
+    });
+  }
+}

package/abstract/a11y.d.ts

@@ -0,0 +1,20 @@
+export class A11y {
+    /**
+     * @private
+     * @type {(() => void) | undefined}
+     */
+    private _destroyKeyUX;
+    /**
+     * @private
+     * @type {ScopedMinimalWindow}
+     */
+    private _scopedWindow;
+    /** @param {import('./Block.js').Block} scope */
+    registerBlock(scope: import('./Block.js').Block): void;
+    destroy(): void;
+}
+/**
+ * MinimalWindow interface is not exported by keyux, so we import it here using tricky way.
+ */
+export type MinimalWindow = Parameters<import('keyux').KeyUXModule>[0];
+//# sourceMappingURL=a11y.d.ts.map

package/abstract/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,gDAAgD;IAChD,qBADY,OAAO,YAAY,EAAE,KAAK,QAGrC;IAED,gBAGC;CACF;;;;4BA/GY,WAAW,OAAO,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC"}

package/abstract/a11y.js

@@ -0,0 +1,118 @@
+// @ts-check
+import { startKeyUX, hiddenKeyUX, jumpKeyUX, focusGroupKeyUX, pressKeyUX } from 'keyux';
+
+/**
+ * MinimalWindow interface is not exported by keyux, so we import it here using tricky way.
+ *
+ * @typedef {Parameters<import('keyux').KeyUXModule>[0]} MinimalWindow
+ */
+
+/**
+ * This is global window wrapper that allows to scope event listeners to a specific part of the DOM.
+ *
+ * It is used to scope the key UX to the widget.
+ *
+ * @implements {MinimalWindow}
+ */
+class ScopedMinimalWindow {
+  /**
+   * @private
+   * @type {Map<Function, (event: Event) => void>}
+   */
+  _listeners = new Map();
+
+  /**
+   * @private
+   * @type {Node[]}
+   */
+  _scope = [];
+
+  /**
+   * @param {'keydown' | 'keyup'} type
+   * @param {(event: Event) => void} listener
+   */
+  addEventListener(type, listener) {
+    /** @param {Event} e */
+    const wrappedListener = (e) => {
+      const target = e.target;
+      if (!target) return;
+      if (this._scope.some((el) => el === e.target || el.contains(/** @type {Node} */ (target)))) {
+        listener(e);
+      }
+    };
+    this._listeners.set(listener, wrappedListener);
+    window.addEventListener(type, wrappedListener);
+  }
+
+  /**
+   * @param {'keydown' | 'keyup'} type
+   * @param {(event: {}) => void} listener
+   */
+  removeEventListener(type, listener) {
+    const wrappedListener = this._listeners.get(listener);
+    if (wrappedListener) {
+      window.removeEventListener(type, wrappedListener);
+    }
+    this._listeners.delete(listener);
+  }
+
+  get CustomEvent() {
+    return window.CustomEvent;
+  }
+
+  get document() {
+    return window.document;
+  }
+
+  get navigator() {
+    return window.navigator;
+  }
+
+  /** @param {Node} scope */
+  registerScope(scope) {
+    this._scope.push(scope);
+  }
+
+  destroy() {
+    this._scope = [];
+    this._listeners.forEach((listener, originalListener) => {
+      window.removeEventListener('keydown', listener);
+      window.removeEventListener('keyup', listener);
+      this._listeners.delete(originalListener);
+    });
+  }
+}
+
+export class A11y {
+  /**
+   * @private
+   * @type {(() => void) | undefined}
+   */
+  _destroyKeyUX;
+
+  /**
+   * @private
+   * @type {ScopedMinimalWindow}
+   */
+  _scopedWindow;
+
+  constructor() {
+    this._scopedWindow = new ScopedMinimalWindow();
+    this._destroyKeyUX = startKeyUX(this._scopedWindow, [
+      focusGroupKeyUX(),
+      pressKeyUX('is-pressed'),
+      jumpKeyUX(),
+      hiddenKeyUX(),
+    ]);
+  }
+
+  /** @param {import('./Block.js').Block} scope */
+  registerBlock(scope) {
+    this._scopedWindow.registerScope(scope);
+  }
+
+  destroy() {
+    this._destroyKeyUX?.();
+    this._scopedWindow.destroy();
+  }
+}

package/abstract/buildOutputCollectionState.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @template {import('../index.js').OutputCollectionStatus} TCollectionStatus
+ * @template {import('../index.js').GroupFlag} [TGroupFlag='maybe-has-group'] Default is `'maybe-has-group'`
+ * @param {import('./UploaderBlock.js').UploaderBlock} uploaderBlock
+ * @returns {import('../index.js').OutputCollectionState<TCollectionStatus, TGroupFlag>}
+ */
+export function buildOutputCollectionState<TCollectionStatus extends import("../index.js").OutputCollectionStatus, TGroupFlag extends import("../index.js").GroupFlag = "maybe-has-group">(uploaderBlock: import('./UploaderBlock.js').UploaderBlock): import("../index.js").OutputCollectionState<TCollectionStatus, TGroupFlag>;
+//# sourceMappingURL=buildOutputCollectionState.d.ts.map

package/abstract/buildOutputCollectionState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildOutputCollectionState.d.ts","sourceRoot":"","sources":["buildOutputCollectionState.js"],"names":[],"mappings":"AAiCA;;;;;GAKG;AACH,0MAHW,OAAO,oBAAoB,EAAE,aAAa,8EAmGpD"}