@uploadcare/file-uploader 1.6.0 → 1.8.0

package/README.md

@@ -8,66 +8,57 @@
   </a>
 </p>
 <p align="center">
-  <a href="https://uploadcare.com?ref=github-readme">Website</a> • 
-  <a href="https://uploadcare.com/docs/start/quickstart?ref=github-readme">Quick Start</a> • 
-  <a href="https://uploadcare.com/docs?ref=github-readme">Docs</a> • 
+  <a href="https://uploadcare.com/?ref=github-readme">Website</a> •
+  <a href="https://uploadcare.com/docs/file-uploader?ref=github-readme">Docs</a> • 
   <a href="https://uploadcare.com/blog?ref=github-readme">Blog</a> • 
   <a href="https://discord.gg/mKWRgRsVz8?ref=github-readme">Discord</a> •
   <a href="https://twitter.com/Uploadcare?ref=github-readme">Twitter</a>
 </p>
 
-# 📦 Uploadcare File Uploader: stack-agnostic library for uploading, processing, and editing images on-the-fly
+# Uploadcare File Uploader
 
 [![npm version](https://badge.fury.io/js/@uploadcare%2Ffile-uploader.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)
+[![minzipped size](https://img.shields.io/bundlephobia/minzip/@uploadcare/file-uploader@latest)](https://bundlephobia.com/package/@uploadcare/file-uploader@latest)
 
-_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,
-including [smart CDN](https://uploadcare.com/docs/delivery/cdn/#content-delivery-network/?ref=github-readme),
-[MIME-type filtering](https://uploadcare.com/docs/moderation/#file-types/?ref=github-readme),
-[signed uploads](https://uploadcare.com/docs/security/secure-uploads/?ref=github-readme),
-and [even more](<(https://uploadcare.com/features/?ref=github-readme)>).
+Add file uploads to your app and configure behavior and appearance as needed. Process and transform files before and after uploading. Compatible with any framework or environment.
 
-See Uploadcare File Uploader [in action](https://codesandbox.io/p/devbox/github/uploadcare/blocks-examples/tree/main/examples/js-uploader)!
+<img alt="Uploadcare File Uploader examples" src="https://ucarecdn.com/916a1054-ca44-4c4a-9f7b-99fa499043d9/-/preview/">
 
-<img alt="Uploadcare File Uploader examples" src="https://ucarecdn.com/2883da9f-6962-49db-9947-f91a3e25be2f/-/preview/">
+## Features
 
-## Core features
+- **Multiple upload sources:** Drop files, select from the filesystem, use a link, camera, Dropbox, Google Drive, add them via the upload API, and more.
+- **Large file handling:** Upload faster with chunking, retries, and resumable uploads.
+- **Customizable appearance:** Use pre-built themes or modify styles with CSS to fit your project.
+- **Responsive and cross-browser:** Fits any device; supports the latest desktop and mobile versions of Chrome, Edge, Firefox, Opera, and Safari.
+- **Fully accessible:** A11Y options, including keyboard navigation, screen reader support, and color contrast settings.
+- **Advanced image editing:** Optimize images and apply smart transformations like cropping, resizing, or color filters via the built-in image editor, REST, or URL API.
+- **Secure uploads:** Protect your app by automatically detecting inappropriate content, malicious files, or unauthorized uploads.
+- **Typescript support:** Full Typescript support with autocompletion, type checking, and more for a better developer experience.
 
-- [File Uploader](https://uploadcare.com/docs/file-uploader/?ref=github-readme) — implement file-managing functionality with minimal or comprehensive interfaces in just a few minutes.
-<!-- - [Advanced Customization](/blocks/) — create unique file-uploading interfaces by reorganizing pre-built components and styles with custom based on your needs. -->
-- [Adaptive Images](https://uploadcare.com/docs/adaptive-image/?ref=github-readme) — build responsive user interfaces that adapt to various screen sizes and devices, ensuring a performant experience across platforms.
-- [Cloud Image Editor](https://uploadcare.com/docs/file-uploader/image-editor/?ref=github-readme) — edit, transform, and process images right from a browser on-the-fly.
-- [Uploadcare power and features](https://uploadcare.com/features/?ref=github-readme) — upload, process, deliver, and manage images without building custom infrastructure.
-
-* **Coming soon!** Web Components for any media content management like audio, video, image galleries, and more.
-
-## Why Uploadcare File Uploader?
-
-### Rapid integration
-
-We provide a ready-to-use set of UI components for file handling. It saves you valuable development time and effort, allowing you to focus on other core aspects of your application. You even don't need to build a stage while developing — just run the code directly from the browser.
-
-### Cross-platform compatibility
+## Framework support
 
-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.
+Uploadcare File Uploader is built with [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), meaning you can integrate it into any environment—no adapters required.
 
-### Developer-friendly
+For hands-on examples, visit our live sandboxes:
 
-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.
+- [React](https://github.com/uploadcare/file-uploader-examples/tree/main/examples/react-uploader)
+- [Next.js](https://github.com/uploadcare/file-uploader-examples/tree/main/examples/next-uploader)
+- [JavaScript](https://github.com/uploadcare/file-uploader-examples/tree/main/examples/js-uploader)
+- [Angular](https://github.com/uploadcare/file-uploader-examples/tree/main/examples/angular-uploader)
+- [Vue](https://github.com/uploadcare/file-uploader-examples/tree/main/examples/vue-uploader)
+- [Svelte](https://github.com/uploadcare/file-uploader-examples/tree/main/examples/svelte-uploader)
 
-### Typescript support
+Check out the [documentation](https://uploadcare.com/docs/integrations/?ref=github-readme) for quickstart guides tailored to your framework or tool.
 
-We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html) and type definitions ([\*.d.ts files](https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html)) for TypeScript static analysis support during development.
+Explore more tutorials in our [blog](https://uploadcare.com/blog/category/uploading/?ref=github-readme).
 
-## 🚀 Getting started
+## Quick Start
 
 ### From CDN
 
-1. Connect Uploadcare File Uploader directly from your document:
+1. Connect File Uploader directly from your document:
 
 ```html
 <script type="module">
@@ -77,7 +68,7 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
 </script>
 ```
 
-2. Start using Uploadcare File Uploader in your application markup:
+2. Add File Uploader in your application markup:
 
 ```html
 <link
@@ -88,12 +79,12 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
 <uc-file-uploader-regular ctx-name="my-uploader"> </uc-file-uploader-regular>
 ```
 
-3. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
+3. Configure File Uploader and add your personal public key to the project. [Learn more](#configuration).
 
 ### From NPM
 
-1. Install Uploadcare File Uploader package: `npm i @uploadcare/file-uploader`
-2. Connect `Blocks` from your script file:
+1. Install the package: `npm i @uploadcare/file-uploader`
+2. Connect File Uploader from your script file:
 
 ```js
 import * as UC from '@uploadcare/file-uploader';
@@ -101,7 +92,7 @@ import * as UC from '@uploadcare/file-uploader';
 UC.defineComponents(UC);
 ```
 
-3. Start using Uploadcare File Uploader in your application markup:
+3. Add File Uploader in your application markup:
 
 ```html
 <link
@@ -112,11 +103,11 @@ UC.defineComponents(UC);
 <uc-file-uploader-inline ctx-name="my-uploader"> </uc-file-uploader-inline>
 ```
 
-4. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
+4. Configure File Uploader and add your personal public key to the project. [Learn more](#configuration).
 
 ### Configuration
 
-All configurations in Uploadcare File Uploader are managed from `uc-config` block.
+All configurations in File Uploader are managed from `uc-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).
@@ -126,13 +117,9 @@ All configurations in Uploadcare File Uploader are managed from `uc-config` bloc
 <uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>
 ```
 
-4. Make sure that your config block uses the same `ctx-name` attribute value as your solution block.
-
-Discover more about Uploadcare File Uploader configuration in [our documentation](https://uploadcare.com/docs/file-uploader/configuration/?ref=github-readme).
+4. Make sure that your config uses the same `ctx-name` attribute value as your solution block.
 
-### 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 File Uploader in a few minutes and set it up based on your needs.
+Discover more about configuration options in [our documentation](https://uploadcare.com/docs/file-uploader/configuration/?ref=github-readme).
 
 ## Browser support
 
@@ -140,18 +127,6 @@ Latest desktop and mobile stable versions of Chrome, Edge, Firefox, Opera, and S
 
 Internet Explorer is outdated and [not supported anymore](https://uploadcare.com/blog/uploadcare-stops-internet-explorer-support/?ref=github-readme).
 
-## Framework support
-
-_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)
-- [Vue](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/vue-uploader)
-- [Angular](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/angular-uploader)
-- [Svelte](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/svelte-uploader)
-
-All the source code is accessible and works in raw mode. Use _developer tools_ to dive into details.
-
 ## Contribution
 
 You’re always welcome to contribute:

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

@@ -26,6 +26,11 @@ export class CropFrame extends Block {
     private _updateBackdrop;
     /** @private */
     private _updateFrame;
+    /**
+     * @param {import('./types.js').FrameThumbs} frameThumbs
+     * @param {import('./types.js').Direction} direction
+     */
+    _createThumb(frameThumbs: import('./types.js').FrameThumbs, direction: import('./types.js').Direction): void;
     /** @private */
     private _createThumbs;
     /** @private */
@@ -34,55 +39,55 @@ export class CropFrame extends Block {
     private _createFrame;
     _frameThumbs: Partial<{
         "": {
-            direction: import('./types.js').Direction;
+            direction: import("./types.js").Direction;
             pathNode: SVGElement;
             interactionNode: SVGElement;
             groupNode: SVGElement;
         };
         n: {
-            direction: import('./types.js').Direction;
+            direction: import("./types.js").Direction;
             pathNode: SVGElement;
             interactionNode: SVGElement;
             groupNode: SVGElement;
         };
         s: {
-            direction: import('./types.js').Direction;
+            direction: import("./types.js").Direction;
             pathNode: SVGElement;
             interactionNode: SVGElement;
             groupNode: SVGElement;
         };
         e: {
-            direction: import('./types.js').Direction;
+            direction: import("./types.js").Direction;
             pathNode: SVGElement;
             interactionNode: SVGElement;
             groupNode: SVGElement;
         };
         w: {
-            direction: import('./types.js').Direction;
+            direction: import("./types.js").Direction;
             pathNode: SVGElement;
             interactionNode: SVGElement;
             groupNode: SVGElement;
         };
         ne: {
-            direction: import('./types.js').Direction;
+            direction: import("./types.js").Direction;
             pathNode: SVGElement;
             interactionNode: SVGElement;
             groupNode: SVGElement;
         };
         nw: {
-            direction: import('./types.js').Direction;
+            direction: import("./types.js").Direction;
             pathNode: SVGElement;
             interactionNode: SVGElement;
             groupNode: SVGElement;
         };
         se: {
-            direction: import('./types.js').Direction;
+            direction: import("./types.js").Direction;
             pathNode: SVGElement;
             interactionNode: SVGElement;
             groupNode: SVGElement;
         };
         sw: {
-            direction: import('./types.js').Direction;
+            direction: import("./types.js").Direction;
             pathNode: SVGElement;
             interactionNode: SVGElement;
             groupNode: SVGElement;
@@ -96,7 +101,7 @@ export class CropFrame extends Block {
      */
     private _handlePointerDown;
     _draggingThumb: {
-        direction: import('./types.js').Direction;
+        direction: import("./types.js").Direction;
         pathNode: SVGElement;
         interactionNode: SVGElement;
         groupNode: SVGElement;
@@ -126,7 +131,7 @@ export class CropFrame extends Block {
      */
     private _handleSvgPointerMove_;
     _hoverThumb: {
-        direction: import('./types.js').Direction;
+        direction: import("./types.js").Direction;
         pathNode: SVGElement;
         interactionNode: SVGElement;
         groupNode: SVGElement;

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

@@ -1 +1 @@
-{"version":3,"file":"CropFrame.d.ts","sourceRoot":"","sources":["CropFrame.js"],"names":[],"mappings":"AA2BA;IAII;;MAGC;IAED,eAAe;IACf,yBAAyD;IAEzD,eAAe;IACf,2BAA6D;IAE7D,eAAe;IACf,8BAAmE;IAGrE;;;OAGG;IACH,+BAaC;IAED,eAAe;IACf,wBAyCC;IAFC,sCAAyB;IACzB,2CAAuC;IAGzC;;;OAGG;IACH,wBAUC;IAED,eAAe;IACf,wBASC;IAED,eAAe;IACf,qBAgEC;IAED,eAAe;IACf,sBAyCC;IAED,eAAe;IACf,sBA4CC;IAED,eAAe;IACf,qBAeC;IAFC;;uBApGkB,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;mBAiGG;IAC/B,qCAA+B;IAGjC;;;;OAIG;IACH,2BAiBC;IAJC;mBA1HkB,OAAO,YAAY,EAAE,SAAS;kBAC/B,UAAU;yBACH,UAAU;mBAChB,UAAU;kBAuHD;IAC3B,sCAA6B;IAC7B,6CAA6C;IAC7C,2DAAoC;IAGtC;;;OAGG;IACH,0BAUC;IAED;;;OAGG;IACH,4BAmBC;IAED;;;;OAIG;IACH,qBAsBC;IAED;;;OAGG;IACH,+BAqBC;IAFC;mBA7NkB,OAAO,YAAY,EAAE,SAAS;kBAC/B,UAAU;yBACH,UAAU;mBAChB,UAAU;kBA0NC;IAI/B,eAAe;IACf,sBAGC;IAED,eAAe;IACf,gBAGC;IAED,+BAA+B;IAC/B,sBADY,OAAO,QAclB;IAmBG,mCAAsF;CA6B3F;;;;sBA3fqB,4BAA4B"}
+{"version":3,"file":"CropFrame.d.ts","sourceRoot":"","sources":["CropFrame.js"],"names":[],"mappings":"AA2BA;IAII;;MAGC;IAED,eAAe;IACf,yBAAyD;IAEzD,eAAe;IACf,2BAA6D;IAE7D,eAAe;IACf,8BAAmE;IAGrE;;;OAGG;IACH,+BAaC;IAED,eAAe;IACf,wBAyCC;IAFC,sCAAyB;IACzB,2CAAuC;IAGzC;;;OAGG;IACH,wBAUC;IAED,eAAe;IACf,wBASC;IAED,eAAe;IACf,qBAgEC;IAED;;;OAGG;IACH,0BAHW,OAAO,YAAY,EAAE,WAAW,aAChC,OAAO,YAAY,EAAE,SAAS,QA4BxC;IAED,eAAe;IACf,sBAiBC;IAED,eAAe;IACf,sBA4CC;IAED,eAAe;IACf,qBAeC;IAFC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAA+B;IAC/B,qCAA+B;IAGjC;;;;OAIG;IACH,2BAiBC;IAJC;;;;;kBAA2B;IAC3B,sCAA6B;IAC7B,6CAA6C;IAC7C,2DAAoC;IAGtC;;;OAGG;IACH,0BAUC;IAED;;;OAGG;IACH,4BAmBC;IAED;;;;OAIG;IACH,qBAsBC;IAED;;;OAGG;IACH,+BAqBC;IAFC;;;;;kBAA6B;IAI/B,eAAe;IACf,sBAGC;IAED,eAAe;IACf,gBAGC;IAED,+BAA+B;IAC/B,sBADY,OAAO,QAclB;IAmBG,mCAAsF;CA6B3F;;;;sBAngBqB,4BAA4B"}

package/blocks/CloudImageEditor/src/CropFrame.js

@@ -151,10 +151,10 @@ export class CropFrame extends Block {
 
       if (isCenter) {
         const moveThumbRect = {
-          x: x + width / 3,
-          y: y + height / 3,
-          width: width / 3,
-          height: height / 3,
+          x,
+          y,
+          width,
+          height,
         };
         setSvgNodeAttrs(interactionNode, moveThumbRect);
       } else {
@@ -202,47 +202,55 @@ export class CropFrame extends Block {
     });
   }
 
+  /**
+   * @param {import('./types.js').FrameThumbs} frameThumbs
+   * @param {import('./types.js').Direction} direction
+   */
+  _createThumb(frameThumbs, direction) {
+    let groupNode = createSvgNode('g');
+    groupNode.classList.add('uc-thumb');
+    groupNode.setAttribute('with-effects', '');
+    let interactionNode = createSvgNode('rect', {
+      fill: 'transparent',
+    });
+    let pathNode = createSvgNode('path', {
+      stroke: 'currentColor',
+      fill: 'none',
+      'stroke-width': THUMB_STROKE_WIDTH,
+    });
+    groupNode.appendChild(pathNode);
+    groupNode.appendChild(interactionNode);
+    frameThumbs[direction] = {
+      direction,
+      pathNode,
+      interactionNode,
+      groupNode,
+    };
+
+    if (direction === '') {
+      groupNode.style.cursor = 'move';
+    }
+
+    interactionNode.addEventListener('pointerdown', this._handlePointerDown.bind(this, direction));
+  }
+
   /** @private */
   _createThumbs() {
-    /**
-     * @type {Partial<{
-     *   [K in import('./types.js').Direction]: {
-     *     direction: import('./types.js').Direction;
-     *     pathNode: SVGElement;
-     *     interactionNode: SVGElement;
-     *     groupNode: SVGElement;
-     *   };
-     * }>}
-     */
+    /** @type {import('./types.js').FrameThumbs} */
     const frameThumbs = {};
 
     for (let i = 0; i < 3; i++) {
       for (let j = 0; j < 3; j++) {
         let direction = /** @type {import('./types.js').Direction} */ (`${['n', '', 's'][i]}${['w', '', 'e'][j]}`);
-        let groupNode = createSvgNode('g');
-        groupNode.classList.add('uc-thumb');
-        groupNode.setAttribute('with-effects', '');
-        let interactionNode = createSvgNode('rect', {
-          fill: 'transparent',
-        });
-        let pathNode = createSvgNode('path', {
-          stroke: 'currentColor',
-          fill: 'none',
-          'stroke-width': THUMB_STROKE_WIDTH,
-        });
-        groupNode.appendChild(pathNode);
-        groupNode.appendChild(interactionNode);
-        frameThumbs[direction] = {
-          direction,
-          pathNode,
-          interactionNode,
-          groupNode,
-        };
+        if (direction === '') {
+          continue;
+        }
 
-        interactionNode.addEventListener('pointerdown', this._handlePointerDown.bind(this, direction));
+        this._createThumb(frameThumbs, direction);
       }
     }
 
+    this._createThumb(frameThumbs, '');
     return frameThumbs;
   }
 

package/blocks/CloudImageEditor/src/css/common.css

@@ -348,6 +348,8 @@ uc-editor-operation-control {
   --down-opacity: 1;
   --down-filter: 0.6;
   --down-background: var(--uc-secondary);
+
+  border-radius: var(--uc-radius);
 }
 
 uc-editor-button-control > button,
@@ -384,11 +386,11 @@ uc-editor-button-control.uc-active,
 uc-editor-operation-control.uc-active,
 uc-editor-crop-button-control.uc-active,
 uc-editor-filter-control.uc-active {
-  --idle-color-rgb: var(--uc-primary);
-  --idle-background: var(--uc-primary-transparent);
-  --idle-opacity: 0.9;
-  --hover-color-rgb: var(--uc-primary);
-  --hover-background: var(--uc-primary-transparent);
+  --idle-color-rgb: var(--uc-primary-foreground);
+  --idle-background: var(--uc-primary);
+  --idle-opacity: 1;
+  --hover-color-rgb: var(--uc-primary-foreground);
+  --hover-background: var(--uc-primary);
   --hover-opacity: 1;
 }
 
@@ -407,6 +409,17 @@ uc-editor-filter-control.uc-not_active {
   --idle-color-rgb: var(--uc-secondary-foreground);
 }
 
+:where(.uc-contrast) uc-editor-button-control.uc-not_active,
+:where(.uc-contrast) uc-editor-operation-control.uc-not_active,
+:where(.uc-contrast) uc-editor-crop-button-control.uc-not_active,
+:where(.uc-contrast) uc-editor-filter-control.uc-not_active {
+  --idle-background: transparent;
+  --hover-background: var(--uc-secondary);
+
+  outline: 1px solid var(--uc-border);
+  outline-offset: -1px;
+}
+
 uc-editor-button-control > button::before,
 uc-editor-operation-control > button::before,
 uc-editor-crop-button-control > button::before,
@@ -973,6 +986,10 @@ uc-btn-ui.uc-secondary > button {
   --active-background: transparent;
 }
 
+:where(.uc-contrast) uc-btn-ui.uc-secondary > button {
+  border: 1px solid var(--uc-border);
+}
+
 uc-btn-ui.uc-secondary-icon > button {
   --idle-color-rgb: var(--uc-secondary-foreground);
   --idle-brightness: 1;
@@ -1036,6 +1053,13 @@ uc-btn-ui.uc-default > button {
   --active-background: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) uc-btn-ui.uc-default > button {
+  --idle-background: transparent;
+  --hover-background: var(--uc-secondary);
+  --active-background: var(--uc-foreground);
+  --active-color-rgb: var(--uc-background);
+}
+
 uc-line-loader-ui {
   position: absolute;
   top: 0px;
@@ -1107,16 +1131,16 @@ uc-slider-ui .uc-steps {
 uc-slider-ui .uc-border-step {
   width: 0px;
   height: 10px;
-  border-right: 1px solid var(--l-color);
-  opacity: 0.6;
+  border-right: 1px solid var(--uc-foreground);
+  opacity: 1;
   transition: border-color var(--transition-duration-2);
 }
 
 uc-slider-ui .uc-minor-step {
   width: 0px;
   height: 4px;
-  border-right: 1px solid var(--l-color);
-  opacity: 0.2;
+  border-right: 1px solid var(--uc-foreground);
+  opacity: 0.6;
   transition: border-color var(--transition-duration-2);
 }
 

package/blocks/CloudImageEditor/src/elements/slider/SliderUi.js

@@ -114,7 +114,7 @@ export class SliderUi extends Block {
     if (value === this._zero) {
       this._zeroDotEl.style.opacity = '0';
     } else {
-      this._zeroDotEl.style.opacity = '0.2';
+      this._zeroDotEl.style.opacity = '1';
     }
     let { width } = this.getBoundingClientRect();
     let slope = 100 / (this.$.max - this.$.min);

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

@@ -54,5 +54,61 @@ export type CropAspectRatio = {
     height: number;
 };
 export type CropPresetList = CropAspectRatio[];
+export type FrameThumbs = {
+    ""?: {
+        direction: Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+    n?: {
+        direction: Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+    s?: {
+        direction: Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+    e?: {
+        direction: Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+    w?: {
+        direction: Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+    ne?: {
+        direction: Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+    nw?: {
+        direction: Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+    se?: {
+        direction: Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+    sw?: {
+        direction: Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+};
 export type Direction = '' | 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.js"],"names":[],"mappings":";;;gCAGa,YAAY,YAAY,OAAO,CAAC,CAAC;;;;wBAMjC;IAAE,KAAK,SAAS;IAAC,MAAM,SAAQ;CAAE;;;;;;;8BAYjC;IACZ,OAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAU,CAAC,EAAE;QAAE,MAAM,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,IAAQ,CAAC,EAAE;QAAE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;CACnE;;iBAKU,MAAM;qBACN,MAAM;YACN,MAAM;qBACN,eAAe;;;iBAKf,MAAM;qBACN,MAAM;YACN,MAAM;qBACN,eAAe;;8BAGf;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;6BAEvD,eAAe,EAAE;wBAEjB,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.js"],"names":[],"mappings":";;;gCAGa,YAAY,YAAY,OAAO,CAAC,CAAC;;;;wBAMjC;IAAE,KAAK,SAAS;IAAC,MAAM,SAAQ;CAAE;;;;;;;8BAYjC;IACZ,OAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAU,CAAC,EAAE;QAAE,MAAM,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,IAAQ,CAAC,EAAE;QAAE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;CACnE;;iBAKU,MAAM;qBACN,MAAM;YACN,MAAM;qBACN,eAAe;;;iBAKf,MAAM;qBACN,MAAM;YACN,MAAM;qBACN,eAAe;;8BAGf;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;6BAEvD,eAAe,EAAE;;;mBAKb,SAAS;kBACV,UAAU;yBACH,UAAU;mBAChB,UAAU;;;mBAHV,SAAS;kBACV,UAAU;yBACH,UAAU;mBAChB,UAAU;;;mBAHV,SAAS;kBACV,UAAU;yBACH,UAAU;mBAChB,UAAU;;;mBAHV,SAAS;kBACV,UAAU;yBACH,UAAU;mBAChB,UAAU;;;mBAHV,SAAS;kBACV,UAAU;yBACH,UAAU;mBAChB,UAAU;;;mBAHV,SAAS;kBACV,UAAU;yBACH,UAAU;mBAChB,UAAU;;;mBAHV,SAAS;kBACV,UAAU;yBACH,UAAU;mBAChB,UAAU;;;mBAHV,SAAS;kBACV,UAAU;yBACH,UAAU;mBAChB,UAAU;;;mBAHV,SAAS;kBACV,UAAU;yBACH,UAAU;mBAChB,UAAU;;;wBAKd,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI"}

package/blocks/CloudImageEditor/src/types.js

@@ -56,6 +56,17 @@
 
 /** @typedef {CropAspectRatio[]} CropPresetList */
 
+/**
+ * @typedef {Partial<{
+ *   [K in Direction]: {
+ *     direction: Direction;
+ *     pathNode: SVGElement;
+ *     interactionNode: SVGElement;
+ *     groupNode: SVGElement;
+ *   };
+ * }>} FrameThumbs
+ */
+
 /** @typedef {'' | 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'} Direction */
 
 export {};

package/blocks/DropArea/drop-area.css

@@ -32,18 +32,19 @@
   background: var(--uc-background);
 }
 
-:where([uc-drop-area])[with-icon]
-  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  :is(.uc-text, .uc-icon-container) {
-  color: var(--uc-primary);
-}
-
 :where([uc-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
-  color: var(--uc-primary);
   background: var(--uc-primary-transparent);
   border-color: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) :where([uc-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
+  color: var(--uc-foreground);
+  background: transparent;
+  border-color: var(--uc-foreground);
+  border-width: 2px;
+  border-style: solid;
+}
+
 :where([uc-drop-area]):is([drag-state='active'], [drag-state='near']) {
   opacity: 1;
 }
@@ -95,15 +96,19 @@
   transform: translateY(48px);
 }
 
-:where([uc-drop-area])[with-icon]:hover .uc-icon-container,
-:where([uc-drop-area])[with-icon]:hover .uc-text {
-  color: var(--uc-primary);
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container,
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-text {
+  color: var(--uc-foreground);
 }
 
 :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
   background-color: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
+  background-color: var(--uc-muted);
+}
+
 :where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   .uc-icon-container {
@@ -114,7 +119,13 @@
 :where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   .uc-text {
-  color: var(--uc-primary);
+  color: var(--uc-foreground);
+}
+
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  .uc-text {
+  color: var(--uc-foreground);
 }
 
 :where([uc-drop-area])[with-icon]

package/blocks/FileItem/file-item.css

@@ -127,11 +127,15 @@ uc-file-item .uc-badge uc-icon svg {
 }
 
 uc-file-item .uc-progress-bar {
-  opacity: 0.5;
+  opacity: 0.7;
   top: calc(100% - 2px);
   height: 2px;
 }
 
+:where(.uc-contrast) uc-file-item .uc-progress-bar {
+  opacity: 1;
+}
+
 uc-file-item .uc-file-actions {
   display: flex;
   gap: 2px;