@uploadcare/file-uploader 0.50.1-alpha.2 → 0.50.1

package/README.md

@@ -16,13 +16,13 @@
   <a href="https://twitter.com/Uploadcare?ref=github-readme">Twitter</a>
 </p>
 
-# 📦 Uploadcare Blocks: stack-agnostic library for uploading, processing, and editing images on-the-fly
+# 📦 Uploadcare File Uploader: stack-agnostic library for uploading, processing, and editing images on-the-fly
 
-[![npm version](https://badge.fury.io/js/@uploadcare%2Fblocks.svg)](https://www.npmjs.com/package/@uploadcare/blocks)
+[![npm version](https://badge.fury.io/js/@uploadcare%2Fblocks.svg)](https://www.npmjs.com/package/@uploadcare/file-uploader)
 [![GitHub Actions](https://github.com/uploadcare/blocks/workflows/checks/badge.svg)](https://github.com/uploadcare/blocks/actions?query=workflow%3ABuild+branch%3Amaster)
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-_Uploadcare Blocks_ is a powerful JavaScript library for creating custom file-handling services.
+_Uploadcare File Uploader_ is a powerful JavaScript library for creating custom file-handling services.
 It includes various interactive and customizable UI components to enhance users' file uploading
 and processing experience. As a bonus, you receive all the
 [Uploadcare's](https://uploadcare.com/?ref=github-readme) versatile file-handling capabilities,
@@ -31,9 +31,9 @@ including [smart CDN](https://uploadcare.com/docs/delivery/cdn/#content-delivery
 [signed uploads](https://uploadcare.com/docs/security/secure-uploads/?ref=github-readme),
 and [even more](<(https://uploadcare.com/features/?ref=github-readme)>).
 
-See Uploadcare Blocks [in action](https://codesandbox.io/p/devbox/github/uploadcare/blocks-examples/tree/main/examples/js-uploader)!
+See Uploadcare File Uploader [in action](https://codesandbox.io/p/devbox/github/uploadcare/blocks-examples/tree/main/examples/js-uploader)!
 
-<img alt="Uploadcare Blocks examples" src="https://ucarecdn.com/2883da9f-6962-49db-9947-f91a3e25be2f/-/preview/">
+<img alt="Uploadcare File Uploader examples" src="https://ucarecdn.com/2883da9f-6962-49db-9947-f91a3e25be2f/-/preview/">
 
 ## Core features
 
@@ -45,7 +45,7 @@ See Uploadcare Blocks [in action](https://codesandbox.io/p/devbox/github/uploadc
 
 * **Coming soon!** Web Components for any media content management like audio, video, image galleries, and more.
 
-## Why Uploadcare Blocks?
+## Why Uploadcare File Uploader?
 
 ### Rapid integration
 
@@ -53,11 +53,11 @@ We provide a ready-to-use set of UI components for file handling. It saves you v
 
 ### Cross-platform compatibility
 
-Uploadcare Blocks are designed to work seamlessly across various platforms and frameworks. Whether you're building a web application using React, Vue.js, Angular, Svelte, or other frameworks, you get [integrations and support](https://uploadcare.com/docs/integrations/?ref=github-readme) for various development environments.
+Uploadcare File Uploader are designed to work seamlessly across various platforms and frameworks. Whether you're building a web application using React, Vue.js, Angular, Svelte, or other frameworks, you get [integrations and support](https://uploadcare.com/docs/integrations/?ref=github-readme) for various development environments.
 
 ### Developer-friendly
 
-The library comes with modern technologies at your fingertips, like [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), [ESM-level](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) code sharing, and other cutting-edge web standards. _Uploadcare Blocks_ is designed lightweight with minimum external dependencies for a cheap security audit.
+The library comes with modern technologies at your fingertips, like [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), [ESM-level](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) code sharing, and other cutting-edge web standards. _Uploadcare File Uploader_ is designed lightweight with minimum external dependencies for a cheap security audit.
 
 ### Typescript support
 
@@ -67,72 +67,72 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
 
 ### From CDN
 
-1. Connect Uploadcare Blocks directly from your document replacing `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package:
+1. Connect Uploadcare File Uploader directly from your document replacing `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package:
 
 ```html
 <script type="module">
-  import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/blocks.min.js';
+  import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/blocks.min.js';
 
-  UC.registerBlocks(UC);
+  LR.registerBlocks(LR);
 </script>
 ```
 
-2. Start using Uploadcare Blocks in your application markup (don't forget to specify `{{PACKAGE_VERSION}}` with the [latest one](https://github.com/uploadcare/file-uploader/releases)):
+2. Start using Uploadcare File Uploader in your application markup (don't forget to specify `{{PACKAGE_VERSION}}` with the [latest one](https://github.com/uploadcare/blocks/releases)):
 
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/uc-file-uploader-regular.min.css"
+  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/lr-file-uploader-regular.min.css"
 />
 
-<uc-file-uploader-regular ctx-name="my-uploader"> </uc-file-uploader-regular>
+<lr-file-uploader-regular ctx-name="my-uploader"> </lr-file-uploader-regular>
 ```
 
-3. Configure Uploadcare Blocks and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
+3. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
 
 ### From NPM
 
-1. Install Uploadcare Blocks package: `npm i --save-exact @uploadcare/file-uploader`
+1. Install Uploadcare File Uploader package: `npm i --save-exact @uploadcare/file-uploader`
 2. Connect `Blocks` from your script file:
 
 ```js
-import * as UC from '@uploadcare/file-uploader';
+import * as LR from '@uploadcare/file-uploader';
 
-UC.registerBlocks(UC);
+LR.registerBlocks(LR);
 ```
 
-3. Start using Uploadcare Blocks in your application markup and replace `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/file-uploader/releases) of the package:
+3. Start using Uploadcare File Uploader in your application markup and replace `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package:
 
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/uc-file-uploader-regular.min.css"
+  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/lr-file-uploader-regular.min.css"
 />
 
-<uc-file-uploader-inline ctx-name="my-uploader"> </uc-file-uploader-inline>
+<lr-file-uploader-inline ctx-name="my-uploader"> </lr-file-uploader-inline>
 ```
 
-4. Configure Uploadcare Blocks and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
+4. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
 
 ### Configuration
 
-All configurations in Uploadcare Blocks are managed from `uc-config` block.
+All configurations in Uploadcare File Uploader are managed from `lr-config` block.
 
 1. Sign up to [Uploadcare](https://app.uploadcare.com/accounts/signup/?ref=github-readme).
 2. Get a Public API key in [Uploadcare project's dashboard](https://app.uploadcare.com/projects/-/api-keys/?ref=github-readme).
-3. Add a `uc-config` block to your markup and replace `YOUR_PUBLIC_KEY` with your own public key:
+3. Add a `lr-config` block to your markup and replace `YOUR_PUBLIC_KEY` with your own public key:
 
 ```html
-<uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>
+<lr-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></lr-config>
 ```
 
 4. Make sure that your config block uses the same `ctx-name` attribute value as your solution block.
 
-Discover more about Uploadcare Blocks configuration in [our documentation](https://uploadcare.com/docs/file-uploader/configuration/?ref=github-readme).
+Discover more about Uploadcare File Uploader configuration in [our documentation](https://uploadcare.com/docs/file-uploader/configuration/?ref=github-readme).
 
-### Deep dive in Uploadcare Blocks 🛠
+### Deep dive in Uploadcare File Uploader 🛠
 
-Follow our [step-by-step installation guide](https://uploadcare.com/docs/file-uploader/installation/?ref=github-readme) to launch Uploadcare Blocks in a few minutes and set it up based on your needs.
+Follow our [step-by-step installation guide](https://uploadcare.com/docs/file-uploader/installation/?ref=github-readme) to launch Uploadcare File Uploader in a few minutes and set it up based on your needs.
 
 ## Browser support
 
@@ -142,7 +142,7 @@ Internet Explorer is outdated and [not supported anymore](https://uploadcare.com
 
 ## Framework support
 
-_Uploadcare Blocks_ is a framework-agnostic solution, so you can use it with **any** runtime you like. Discover the integration examples:
+_Uploadcare File Uploader_ is a framework-agnostic solution, so you can use it with **any** runtime you like. Discover the integration examples:
 <br/>
 
 - [React](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/react-uploader)
@@ -156,7 +156,7 @@ All the source code is accessible and works in raw mode. Use _developer tools_ t
 
 You’re always welcome to contribute:
 
-- Create [issues](https://github.com/uploadcare/file-uploader/issues) every time you feel something is missing or goes wrong.
+- Create [issues](https://github.com/uploadcare/blocks/issues) every time you feel something is missing or goes wrong.
 - Provide your feedback or drop us a support request at <a href="mailto:hello@uploadcare.com">hello@uploadcare.com</a>.
 - Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well.
 - Fork project, make changes and send it as pull request. For launching the developing mode follow these commands:

package/abstract/Block.d.ts

@@ -3,6 +3,8 @@ export class Block extends BaseComponent<any> {
     static StateConsumerScope: string | null;
     /** @type {string[]} */
     static styleAttrs: string[];
+    /** @param {String} [name] */
+    static reg(name?: string | undefined): void;
     constructor();
     /** @protected */
     protected requireCtxName: boolean;
@@ -76,10 +78,10 @@ export class Block extends BaseComponent<any> {
     protected destroyCtxCallback(): void;
     /**
      * @param {String} url
-     * @returns {String}
+     * @returns {Promise<String>}
      * @protected
      */
-    protected proxyUrl(url: string): string;
+    protected proxyUrl(url: string): Promise<string>;
     /** @returns {import('../types').ConfigType} } */
     get cfg(): import("../types").ConfigType;
     /** @private */

package/abstract/Block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["Block.js"],"names":[],"mappings":"AAoBA;IACE,4BAA4B;IAC5B,2BADW,MAAM,GAAG,IAAI,CACS;IAEjC,uBAAuB;IACvB,mBADW,MAAM,EAAE,CACI;IAoDvB,cAMC;IAxDD,iBAAiB;IACjB,kCAAuB;IAEvB,wDAAwD;IACxD,cADW,OAAO,oBAAoB,EAAE,YAAY,CAChC;IAEpB,UAAmB;IAEnB;;;;OAIG;IACH;;eAcC;IAED;;;;;OAKG;IACH,kBAIC;IAED;;;;OAIG;IACH,wBAJW,MAAM,YACN,MAAM,IAAI,QAKpB;IAIC,uDAAuD;IACvD,mBADW,IAAI,MAAM,EAAE,IAAI;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CACjB;IAKpC;;;;OAIG;IACH,WAJW;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,QASnG;IAED;;;OAGG;IACH,gCAHmB,KAAK,KAAK,OAAO,WAUnC;IAED;;;OAGG;IACH,oCAFW,GAAG,QASb;IAkED;;;OAGG;IACH,4BAEC;IAED;;;OAGG;IACH,kCAEC;IAED,yBAAyB;IACzB,iCAEC;IAsBD;;;;OAIG;IACH,qCAKC;IAED;;;;OAIG;IACH,wCAqBC;IAED,iDAAiD;IACjD,yCA8BC;IA3BG,eAAe;IACf,mBAuBE;IAKN;;;;OAIG;IACH,6HAFwD,IAAI,QAQ3D;IAED,8BAA8B;IAC9B,oBADY,OAAO,EAAE,QAWpB;CAmBF;;8BAzVmC,sBAAsB;qBAarC,WAAW"}
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["Block.js"],"names":[],"mappings":"AAmBA;IACE,4BAA4B;IAC5B,2BADW,MAAM,GAAG,IAAI,CACS;IAEjC,uBAAuB;IACvB,mBADW,MAAM,EAAE,CACI;IAoTvB,6BAA6B;IAC7B,4CAMC;IAvQD,cAMC;IAxDD,iBAAiB;IACjB,kCAAuB;IAEvB,wDAAwD;IACxD,cADW,OAAO,oBAAoB,EAAE,YAAY,CAChC;IAEpB,UAAmB;IAEnB;;;;OAIG;IACH;;eAcC;IAED;;;;;OAKG;IACH,kBAIC;IAED;;;;OAIG;IACH,wBAJW,MAAM,YACN,MAAM,IAAI,QAKpB;IAIC,uDAAuD;IACvD,mBADW,IAAI,MAAM,EAAE,IAAI;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CACjB;IAKpC;;;;OAIG;IACH,WAJW;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,QASnG;IAED;;;OAGG;IACH,gCAHmB,KAAK,KAAK,OAAO,WAUnC;IAED;;;OAGG;IACH,oCAFW,GAAG,QASb;IAkED;;;OAGG;IACH,4BAEC;IAED;;;OAGG;IACH,kCAEC;IAED,yBAAyB;IACzB,iCAEC;IAsBD;;;;OAIG;IACH,qCAIC;IAED;;;;OAIG;IACH,iCAHa,eAAe,CA6B3B;IAED,iDAAiD;IACjD,yCA8BC;IA3BG,eAAe;IACf,mBAuBE;IAKN;;;;OAIG;IACH,6HAFwD,IAAI,QAQ3D;IAED,8BAA8B;IAC9B,oBADY,OAAO,EAAE,QAWpB;CAUF;;8BAnVmC,sBAAsB;qBAarC,WAAW"}

package/abstract/Block.js

@@ -14,8 +14,7 @@ import { l10nProcessor } from './l10nProcessor.js';
 import { sharedConfigKey } from './sharedConfigKey.js';
 import { A11y } from './a11y.js';
 
-const TAG_PREFIX = 'uc-';
-const LEGACY_TAG_PREFIX = 'lr-';
+const TAG_PREFIX = 'lr-';
 
 // @ts-ignore TODO: fix this
 export class Block extends BaseComponent {
@@ -237,26 +236,30 @@ export class Block extends BaseComponent {
     Data.deleteCtx(this.ctxName);
 
     this.localeManager?.destroy();
-    this.a11y?.destroy();
   }
 
   /**
    * @param {String} url
-   * @returns {String}
+   * @returns {Promise<String>}
    * @protected
    */
-  proxyUrl(url) {
+  async proxyUrl(url) {
     if (this.cfg.secureDeliveryProxy && this.cfg.secureDeliveryProxyUrlResolver) {
       console.warn(
         'Both secureDeliveryProxy and secureDeliveryProxyUrlResolver are set. The secureDeliveryProxyUrlResolver will be used.',
       );
     }
     if (this.cfg.secureDeliveryProxyUrlResolver) {
-      return this.cfg.secureDeliveryProxyUrlResolver(url, {
-        uuid: extractUuid(url),
-        cdnUrlModifiers: extractCdnUrlModifiers(url),
-        fileName: extractFilename(url),
-      });
+      try {
+        return await this.cfg.secureDeliveryProxyUrlResolver(url, {
+          uuid: extractUuid(url),
+          cdnUrlModifiers: extractCdnUrlModifiers(url),
+          fileName: extractFilename(url),
+        });
+      } catch (err) {
+        console.error('Failed to resolve secure delivery proxy URL. Falling back to the default URL.', err);
+        return url;
+      }
     }
     if (this.cfg.secureDeliveryProxy) {
       return applyTemplateData(
@@ -327,22 +330,13 @@ export class Block extends BaseComponent {
     console.log(`[${this.ctxName}]`, ...consoleArgs);
   }
 
-  /**
-   * @param {String} [name]
-   * @param {Boolean} [isAlias]
-   */
-  static reg(name, isAlias = false) {
+  /** @param {String} [name] */
+  static reg(name) {
     if (!name) {
       super.reg();
       return;
     }
-    if (name.startsWith(TAG_PREFIX)) {
-      super.reg(name, isAlias);
-    }
-
-    if (name.startsWith(LEGACY_TAG_PREFIX)) {
-      super.reg(name, isAlias);
-    }
+    super.reg(name.startsWith(TAG_PREFIX) ? name : TAG_PREFIX + name);
   }
 }
 

package/abstract/SolutionBlock.js

@@ -1,9 +1,9 @@
-import svgIconsSprite from '../blocks/themes/uc-basic/svg-sprite.js';
+import svgIconsSprite from '../blocks/themes/lr-basic/svg-sprite.js';
 import { Block } from './Block.js';
 import { uploaderBlockCtx } from './CTX.js';
 
 export class SolutionBlock extends Block {
-  static styleAttrs = ['uc-wgt-common'];
+  static styleAttrs = ['lr-wgt-common'];
   requireCtxName = true;
   init$ = uploaderBlockCtx(this);
   _template = null;

package/abstract/UploaderBlock.js

@@ -281,10 +281,10 @@ export class UploaderBlock extends ActivityBlock {
         return entry.getValue('errors').length > 0;
       });
       if (
-          uploadCollection.size > 0 &&
-          errorItems.length === 0 &&
-          uploadCollection.size === loadedItems.length &&
-          this.$['*collectionErrors'].length === 0
+        uploadCollection.size > 0 &&
+        errorItems.length === 0 &&
+        uploadCollection.size === loadedItems.length &&
+        this.$['*collectionErrors'].length === 0
       ) {
         this.emit(
           EventType.COMMON_UPLOAD_SUCCESS,

package/abstract/connectBlocksFrom.d.ts

@@ -4,5 +4,5 @@
  * @returns {Promise<import('../index.js')>}
  */
 export function connectBlocksFrom(url: string, register?: boolean | undefined): Promise<typeof import("../index.js")>;
-export const UC_WINDOW_KEY: "UC";
+export const LR_WINDOW_KEY: "LR";
 //# sourceMappingURL=connectBlocksFrom.d.ts.map

package/abstract/connectBlocksFrom.js

@@ -1,6 +1,6 @@
 import { registerBlocks } from './registerBlocks.js';
 
-export const UC_WINDOW_KEY = 'UC';
+export const LR_WINDOW_KEY = 'LR';
 
 /**
  * @param {String} url Blocks pack url
@@ -13,8 +13,8 @@ export async function connectBlocksFrom(url, register = false) {
       resolve(null);
       return;
     }
-    if (typeof window === 'object' && window[UC_WINDOW_KEY]) {
-      resolve(window[UC_WINDOW_KEY]);
+    if (typeof window === 'object' && window[LR_WINDOW_KEY]) {
+      resolve(window[LR_WINDOW_KEY]);
       return;
     }
     let script = document.createElement('script');
@@ -25,7 +25,7 @@ export async function connectBlocksFrom(url, register = false) {
     };
     script.onload = () => {
       /** @type {import('../index.js')} */
-      let blocks = window[UC_WINDOW_KEY];
+      let blocks = window[LR_WINDOW_KEY];
       register && registerBlocks(blocks);
       resolve(blocks);
     };

package/abstract/registerBlocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registerBlocks.d.ts","sourceRoot":"","sources":["registerBlocks.js"],"names":[],"mappings":"AAAA,gDAAgD;AAChD;QADmB,MAAM,GAAE,GAAG;SA4B7B"}
+{"version":3,"file":"registerBlocks.d.ts","sourceRoot":"","sources":["registerBlocks.js"],"names":[],"mappings":"AAAA,gDAAgD;AAChD;QADmB,MAAM,GAAE,GAAG;SAmB7B"}

package/abstract/registerBlocks.js

@@ -10,22 +10,11 @@ export function registerBlocks(blockExports) {
     if (tagName.startsWith('-')) {
       tagName = tagName.replace('-', '');
     }
-
-    let currentTagName = '';
-    if (!tagName.startsWith('uc-')) {
-      currentTagName = addPrefix('uc-', tagName);
-    }
-
-    let legacyTagName = '';
     if (!tagName.startsWith('lr-')) {
-      legacyTagName = addPrefix('lr-', tagName);
+      tagName = 'lr-' + tagName;
     }
-
     if (blockExports[blockName].reg) {
-      blockExports[blockName].reg(currentTagName);
-      blockExports[blockName].reg(legacyTagName, true);
+      blockExports[blockName].reg(tagName);
     }
   }
 }
-
-const addPrefix = (prefix, name) => prefix + name;

package/blocks/ActivityHeader/activity-header.css

@@ -1,4 +1,4 @@
-uc-activity-header {
+lr-activity-header {
   display: flex;
   justify-content: space-between;
   gap: var(--uc-padding);
@@ -8,7 +8,7 @@ uc-activity-header {
   font-size: 1em;
 }
 
-uc-activity-header > * {
+lr-activity-header > * {
   display: flex;
   align-items: center;
 }

package/blocks/CameraSource/CameraSource.js

@@ -214,23 +214,23 @@ export class CameraSource extends UploaderBlock {
 }
 
 CameraSource.template = /* HTML */ `
-  <uc-activity-header>
+  <lr-activity-header>
     <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
-      <uc-icon name="back"></uc-icon>
+      <lr-icon name="back"></lr-icon>
     </button>
     <div set="@hidden: !cameraSelectHidden">
-      <uc-icon name="camera"></uc-icon>
+      <lr-icon name="camera"></lr-icon>
       <span l10n="caption-camera"></span>
     </div>
-    <uc-select
+    <lr-select
       class="uc-camera-select"
       set="$.options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
     >
-    </uc-select>
+    </lr-select>
     <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
-      <uc-icon name="close"></uc-icon>
+      <lr-icon name="close"></lr-icon>
     </button>
-  </uc-activity-header>
+  </lr-activity-header>
   <div class="uc-content">
     <video
       autoplay
@@ -247,7 +247,7 @@ CameraSource.template = /* HTML */ `
       ></button>
     </div>
     <button type="button" class="uc-shot-btn" set="onclick: onShot; @disabled: shotBtnDisabled">
-      <uc-icon name="camera"></uc-icon>
+      <lr-icon name="camera"></lr-icon>
     </button>
   </div>
 `;

package/blocks/CameraSource/camera-source.css

@@ -1,4 +1,4 @@
-uc-camera-source {
+lr-camera-source {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -10,24 +10,24 @@ uc-camera-source {
   border-radius: var(--uc-radius);
 }
 
-[uc-modal] uc-camera-source {
+[lr-modal] lr-camera-source {
   width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
   height: 100vh;
   max-height: var(--modal-max-content-height);
 }
 
-uc-camera-source.uc-initialized {
+lr-camera-source.uc-initialized {
   height: max-content;
 }
 
 @media only screen and (max-width: 430px) {
-  uc-camera-source {
+  lr-camera-source {
     width: calc(100vw - var(--uc-padding) * 2);
     height: var(--modal-content-height-fill, 100%);
   }
 }
 
-uc-camera-source video {
+lr-camera-source video {
   display: block;
   width: 100%;
   max-height: 100%;
@@ -37,7 +37,7 @@ uc-camera-source video {
   border-radius: var(--uc-radius);
 }
 
-uc-camera-source .uc-toolbar {
+lr-camera-source .uc-toolbar {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -47,7 +47,7 @@ uc-camera-source .uc-toolbar {
   background-color: var(--uc-background);
 }
 
-uc-camera-source .uc-content {
+lr-camera-source .uc-content {
   display: flex;
   flex: 1;
   justify-content: center;
@@ -57,7 +57,7 @@ uc-camera-source .uc-content {
   overflow: hidden;
 }
 
-uc-camera-source .uc-message-box {
+lr-camera-source .uc-message-box {
   display: flex;
   flex-direction: column;
   grid-gap: 40px;
@@ -67,12 +67,12 @@ uc-camera-source .uc-message-box {
   color: var(--uc-foreground);
 }
 
-uc-camera-source .uc-message-box button {
+lr-camera-source .uc-message-box button {
   color: var(--uc-primary-foreground);
   background-color: var(--uc-primary);
 }
 
-uc-camera-source .uc-shot-btn {
+lr-camera-source .uc-shot-btn {
   position: absolute;
   bottom: 20px;
   width: 58px;
@@ -87,21 +87,21 @@ uc-camera-source .uc-shot-btn {
     transform var(--uc-transition);
 }
 
-uc-camera-source .uc-shot-btn:hover {
+lr-camera-source .uc-shot-btn:hover {
   transform: scale(1.05);
   opacity: 1;
 }
 
-uc-camera-source .uc-shot-btn:active {
+lr-camera-source .uc-shot-btn:active {
   transform: scale(1);
   opacity: 1;
 }
 
-uc-camera-source .uc-shot-btn[disabled] {
+lr-camera-source .uc-shot-btn[disabled] {
   bottom: -80px;
 }
 
-uc-camera-source .uc-shot-btn uc-icon svg {
+lr-camera-source .uc-shot-btn lr-icon svg {
   width: 20px;
   height: 20px;
 }

package/blocks/CloudImageEditor/src/CloudImageEditorBlock.js

@@ -19,7 +19,7 @@ import { TabId } from './toolbar-constants.js';
 
 export class CloudImageEditorBlock extends Block {
   ctxOwner = true;
-  static styleAttrs = ['uc-cloud-image-editor'];
+  static styleAttrs = ['lr-cloud-image-editor'];
 
   constructor() {
     super();
@@ -108,7 +108,7 @@ export class CloudImageEditorBlock extends Block {
     }
 
     try {
-      const cdnUrl = createCdnUrl(this.$['*originalUrl'], createCdnUrlModifiers('json'));
+      const cdnUrl = await this.proxyUrl(createCdnUrl(this.$['*originalUrl'], createCdnUrlModifiers('json')));
       const json = await fetch(cdnUrl).then((response) => response.json());
 
       const { width, height } = /** @type {{ width: number; height: number }} */ (json);

package/blocks/CloudImageEditor/src/EditorButtonControl.js

@@ -38,7 +38,7 @@ export class EditorButtonControl extends Block {
 
 EditorButtonControl.template = /* HTML */ `
   <button type="button" role="option">
-    <uc-icon set="@name: icon;"></uc-icon>
+    <lr-icon set="@name: icon;"></lr-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>
   </button>
 `;

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

@@ -4,10 +4,10 @@ export class EditorFilterControl extends EditorButtonControl {
      * @param {IntersectionObserverEntry[]} entries
      * @param {IntersectionObserver} observer
      */
-    _observerCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
+    _observerCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): Promise<void>;
     _cancelPreload: (() => void) | undefined;
     _operation: string | undefined;
-    _filter: any;
+    _filter: string | undefined;
     _observer: IntersectionObserver | undefined;
     _originalUrl: any;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"EditorFilterControl.d.ts","sourceRoot":"","sources":["EditorFilterControl.js"],"names":[],"mappings":"AAMA;IAWE,sBA0BC;IAED;;;OAGG;IACH,2BAHW,yBAAyB,EAAE,YAC3B,oBAAoB,QAuB9B;IAfG,yCAA4B;IAiC5B,+BAA0B;IAC1B,aAAqB;IAKvB,4CAEE;IAGF,kBAA+B;CAgDlC;;;;oCAlJmC,0BAA0B"}
+{"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;IAMzB,4CAEE;IAGF,kBAA+B;CAgDlC;;;;oCA3JmC,0BAA0B"}