Merge branch 'main' into feat/events-refactor

# Conflicts:
#	CHANGELOG.md

CHANGELOG.md

@@ -10,10 +10,21 @@
   - Console debugging output now enabled with the `debug` attribute on `lr-config`
 - `lr-message-box` block is removed.
 
+## [0.31.1](https://github.com/uploadcare/blocks/compare/v0.31.0...v0.31.1) (2024-01-30)
+
+### Bug Fixes
+
+- **image-editor:** fix flip operation serialization ([#595](https://github.com/uploadcare/blocks/issues/595)) ([140df3a](https://github.com/uploadcare/blocks/commit/140df3a71df6008faa363c99767c87c0640d492b))
+
+# [0.31.0](https://github.com/uploadcare/blocks/compare/v0.30.9...v0.31.0) (2024-01-29)
+
+### Bug Fixes
+
+- **file-item:** file status icon align ([#593](https://github.com/uploadcare/blocks/issues/593)) ([1539abe](https://github.com/uploadcare/blocks/commit/1539abe5a75b2673415e999a8ad63aaff664776f))
+
 ### Features
 
-- New option `debug` that enables debugging output in the console. See the [documentation](#) for more details.
-- New `getOutputCollectionState` API method that returns the current state of the upload collection. See the [documentation](#) for more details.
+- **lr-img:** preview blur ([f42967a](https://github.com/uploadcare/blocks/commit/f42967aec0b77c454750286dae74f4aa00124d3f))
 
 ## [0.30.9](https://github.com/uploadcare/blocks/compare/v0.30.8...v0.30.9) (2024-01-18)
 

blocks/CloudImageEditor/src/lib/transformationUtils.js

@@ -2,7 +2,8 @@
 import { joinCdnOperations } from '../../../../utils/cdn-utils.js';
 import { stringToArray } from '../../../../utils/stringToArray.js';
 
-export const OPERATIONS_ZEROS = Object.freeze({
+/** @type {Record<keyof import('../types').Transformations, unknown>} */
+export const OPERATIONS_DEFAULTS = Object.freeze({
   brightness: 0,
   exposure: 0,
   gamma: 100,
@@ -14,8 +15,11 @@ export const OPERATIONS_ZEROS = Object.freeze({
   filter: 0,
   rotate: 0,
   mirror: false,
+  flip: false,
+  crop: undefined,
 });
 
+/** @type {readonly (keyof import('../types').Transformations)[]} */
 const SUPPORTED_OPERATIONS_ORDERED = /** @type {const} */ ([
   'enhance',
   'brightness',
@@ -40,19 +44,17 @@ const SUPPORTED_OPERATIONS_ORDERED = /** @type {const} */ ([
 function transformationToStr(operation, options) {
   if (typeof options === 'number') {
     const value = options;
-    return OPERATIONS_ZEROS[/** @type {keyof typeof OPERATIONS_ZEROS} */ (operation)] !== value
-      ? `${operation}/${value}`
-      : '';
+    return OPERATIONS_DEFAULTS[operation] !== value ? `${operation}/${value}` : '';
   }
 
   if (typeof options === 'boolean') {
     const value = options;
-    return OPERATIONS_ZEROS[/** @type {keyof typeof OPERATIONS_ZEROS} */ (operation)] !== value ? `${operation}` : '';
+    return OPERATIONS_DEFAULTS[operation] !== value ? `${operation}` : '';
   }
 
   if (operation === 'filter' && options) {
     const { name, amount } = /** @type {NonNullable<import('../types').Transformations['filter']>} */ (options);
-    if (OPERATIONS_ZEROS.filter === amount) {
+    if (OPERATIONS_DEFAULTS.filter === amount) {
       return '';
     }
     return `${operation}/${name}/${amount}`;
@@ -156,7 +158,7 @@ export function operationsToTransformations(operations) {
           `Failed to parse URL operation "${operation}". It will be ignored.`,
           err instanceof Error ? `Error message: "${err.message}"` : err,
           'If you need this functionality, please feel free to open an issue at https://github.com/uploadcare/blocks/issues/new',
-        ].join('\n')
+        ].join('\n'),
       );
     }
   }

blocks/CloudImageEditor/src/toolbar-constants.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { OPERATIONS_ZEROS } from './lib/transformationUtils.js';
+import { OPERATIONS_DEFAULTS } from './lib/transformationUtils.js';
 
 export const TabId = Object.freeze({
   CROP: 'crop',
@@ -67,47 +67,47 @@ export const ALL_CROP_OPERATIONS = ['rotate', 'mirror', 'flip'];
 /** KeypointsNumber is the number of keypoints loaded from each side of zero, not total number */
 export const COLOR_OPERATIONS_CONFIG = Object.freeze({
   brightness: {
-    zero: OPERATIONS_ZEROS.brightness,
+    zero: OPERATIONS_DEFAULTS.brightness,
     range: [-100, 100],
     keypointsNumber: 2,
   },
   exposure: {
-    zero: OPERATIONS_ZEROS.exposure,
+    zero: OPERATIONS_DEFAULTS.exposure,
     range: [-500, 500],
     keypointsNumber: 2,
   },
   gamma: {
-    zero: OPERATIONS_ZEROS.gamma,
+    zero: OPERATIONS_DEFAULTS.gamma,
     range: [0, 1000],
     keypointsNumber: 2,
   },
   contrast: {
-    zero: OPERATIONS_ZEROS.contrast,
+    zero: OPERATIONS_DEFAULTS.contrast,
     range: [-100, 500],
     keypointsNumber: 2,
   },
   saturation: {
-    zero: OPERATIONS_ZEROS.saturation,
+    zero: OPERATIONS_DEFAULTS.saturation,
     range: [-100, 500],
     keypointsNumber: 1,
   },
   vibrance: {
-    zero: OPERATIONS_ZEROS.vibrance,
+    zero: OPERATIONS_DEFAULTS.vibrance,
     range: [-100, 500],
     keypointsNumber: 1,
   },
   warmth: {
-    zero: OPERATIONS_ZEROS.warmth,
+    zero: OPERATIONS_DEFAULTS.warmth,
     range: [-100, 100],
     keypointsNumber: 1,
   },
   enhance: {
-    zero: OPERATIONS_ZEROS.enhance,
+    zero: OPERATIONS_DEFAULTS.enhance,
     range: [0, 100],
     keypointsNumber: 1,
   },
   filter: {
-    zero: OPERATIONS_ZEROS.filter,
+    zero: OPERATIONS_DEFAULTS.filter,
     range: [0, 100],
     keypointsNumber: 1,
   },

blocks/FileItem/file-item.css

@@ -95,6 +95,9 @@ lr-file-item .badge {
   transform: scale(0.3);
   opacity: 0;
   transition: var(--transition-duration) ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 lr-file-item > .inner:where([failed], [limit-overflow], [finished]) .badge {

env.js

@@ -1,3 +1,3 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME = 'blocks';
-export const PACKAGE_VERSION = '0.30.9';
+export const PACKAGE_VERSION = '0.31.1';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/blocks",
-  "version": "0.30.9",
+  "version": "0.31.1",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",