@uploadcare/file-uploader 1.28.0-alpha.1 → 1.28.0-alpha.111

package/web/CloudImageEditor-MXcaDtMx.js

@@ -1,2187 +0,0 @@
-/**
-* @license
-* Package: @uploadcare/file-uploader@1.28.0-alpha.1 (MIT)
-* License: https://github.com/uploadcare/blob/main/LICENSE
-* Built: 2026-03-02T20:26:12.501Z
-*/
-import { $ as transformationsToOperations, A as parseCropPreset, C as MIN_CROP_SIZE, Ct as E, D as THUMB_STROKE_WIDTH, E as THUMB_SIDE_SIZE, F as debounce, G as ALL_COLOR_OPERATIONS, J as ALL_TABS, K as ALL_CROP_OPERATIONS, L as UID, M as __decorate, Q as operationsToTransformations, R as PACKAGE_NAME, S as MAX_INTERACTION_SIZE, St as A, T as THUMB_CORNER_SIZE, V as InternalEventType, X as TabId, Y as COLOR_OPERATIONS_CONFIG, Z as COMMON_OPERATIONS, _ as sidePath, _t as e$2, a as clamp, at as extractUuid, b as GUIDE_STROKE_WIDTH, bt as r, c as createSvgNode, d as moveRect, f as rectContainsPoint, g as setSvgNodeAttrs, gt as n$1, h as roundRect, ht as e, it as extractOperations, j as LitBlock, k as getClosestAspectRatio, l as isRectInsideRect, m as rotateSize, mt as o, nt as createCdnUrlModifiers, o as constraintRect, p as resizeRect, q as ALL_FILTERS, rt as createOriginalUrl, s as cornerPath, tt as createCdnUrl, u as isRectMatchesAspectRatio, v as thumbCursor, vt as i, w as MIN_INTERACTION_SIZE, wt as b, x as GUIDE_THIRD, xt as n, y as CROP_PADDING, yt as t, z as PACKAGE_VERSION } from "./constants-BCfCF0cJ.js";
-import { f as deserializeCsv, p as serializeCsv } from "./plugins-DS0hIs2V.js";
-import { t as o$1 } from "./style-map-tw1yUEaj.js";
-/**
-* @license
-* Copyright 2021 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/
-function n$2(p, B, V) {
-	return p ? B(p) : V?.(p);
-}
-const TRANSPARENT_PIXEL_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
-function normalize(...p) {
-	return p.reduce((p, B) => {
-		if (typeof B == "string") return p[B] = !0, p;
-		for (let V of Object.keys(B)) p[V] = B[V];
-		return p;
-	}, {});
-}
-function classNames(...p) {
-	let B = normalize(...p);
-	return Object.keys(B).reduce((p, V) => (B[V] && p.push(V), p), []).join(" ");
-}
-function applyClassNames(p, ...B) {
-	let V = normalize(...B);
-	for (let B of Object.keys(V)) p.classList.toggle(B, !!V[B]);
-}
-var isTabIdValue = (p) => ALL_TABS.includes(p);
-const parseTabs = (p) => {
-	if (!p) return ALL_TABS;
-	let B = deserializeCsv(p).filter(isTabIdValue);
-	return B.length === 0 ? ALL_TABS : B;
-};
-function initState(B) {
-	return {
-		"*originalUrl": null,
-		"*loadingOperations": /* @__PURE__ */ new Map(),
-		"*faderEl": null,
-		"*cropperEl": null,
-		"*imgEl": null,
-		"*imgContainerEl": null,
-		"*networkProblems": !1,
-		"*imageSize": null,
-		"*editorTransformations": {},
-		"*cropPresetList": [],
-		"*currentAspectRatio": null,
-		"*tabList": ALL_TABS,
-		"*tabId": TabId.CROP,
-		"*on.retryNetwork": () => {
-			let p = B.querySelectorAll("img");
-			for (let B of p) {
-				let p = B.src;
-				B.src = TRANSPARENT_PIXEL_SRC, B.src = p;
-			}
-			B.$["*networkProblems"] = !1;
-		},
-		"*on.apply": (V) => {
-			if (!V) return;
-			let H = B.$["*originalUrl"];
-			if (!H) {
-				console.warn("Original URL is null, cannot apply transformations");
-				return;
-			}
-			let U = createCdnUrlModifiers(transformationsToOperations(V), "preview"), W = {
-				originalUrl: H,
-				cdnUrlModifiers: U,
-				cdnUrl: createCdnUrl(H, U),
-				transformations: V
-			};
-			B.dispatchEvent(new CustomEvent("apply", {
-				detail: W,
-				bubbles: !0,
-				composed: !0
-			})), B.remove();
-		},
-		"*on.cancel": () => {
-			B.remove(), B.dispatchEvent(new CustomEvent("cancel", {
-				bubbles: !0,
-				composed: !0
-			}));
-		}
-	};
-}
-var svg_sprite_default = "<svg width='0' height='0' style='position:absolute'><symbol fill='none' viewBox='0 0 9 6' id='uc-icon-arrow-dropdown' xmlns='http://www.w3.org/2000/svg'><path stroke='currentColor' d='m1.5 1.667 3 2.666 3-2.666' opacity='.5'/></symbol><symbol viewBox='0 0 24 24' id='uc-icon-aspect-ratio' xmlns='http://www.w3.org/2000/svg'/><symbol viewBox='0 0 20 20' id='uc-icon-brightness' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M15 10a5 5 0 0 1-5 5m5-5a5 5 0 0 0-5-5m5 5h-5m0 5a5 5 0 0 1 0-10m0 10V5m0 15v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05m-.626 2.45H10m4.324 5H10'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-closeMax' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8.232 10 3.585 5.353l1.768-1.768L10 8.232l4.648-4.647 1.767 1.768L11.768 10l4.647 4.648-1.767 1.767L10 11.768l-4.647 4.647-1.768-1.767L8.232 10Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-contrast' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 10a8 8 0 1 0 16 0 8 8 0 1 0-16 0m8-8v16m8-8h-8m7.598 2.5H10m6.24 2.5H10m7.6-7.5H10M16.242 5H10'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-crop' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M20 14H7.005C6.45 14 6 13.55 6 12.995V0M0 6h13.067c.515 0 .933.418.933.933V20M14.5.4 13 2l1.5 1.6M13 2h2a3 3 0 0 1 3 3v2M5.5 19.6 7 18l-1.5-1.6M7 18H5a3 3 0 0 1-3-3v-2'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-done' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='m18.057 6.333-9.365 9.125a1.25 1.25 0 0 1-1.768-.023L1.92 10.296l1.791-1.744 4.132 4.243 8.47-8.253 1.744 1.79Z' clip-rule='evenodd'/></symbol><symbol fill='currentColor' viewBox='0 0 25 24' id='uc-icon-edit-file' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M18.558 2.804a.78.78 0 0 0-.557.235l-.008.007-2.472 2.46 3.847 3.848 2.46-2.473.004-.003a.78.78 0 0 0 0-1.108l-.004-.003-2.712-2.728a.78.78 0 0 0-.558-.235Zm-.248 7.613-3.852-3.852-8.93 8.887-1.516 5.41 5.41-1.515 8.888-8.93Zm-.636-8.934a2.28 2.28 0 0 1 2.512.505l2.702 2.717.002.002a2.278 2.278 0 0 1 0 3.234l-.002.002-12.541 12.602a.75.75 0 0 1-.33.193l-6.884 1.928a.75.75 0 0 1-.925-.924l1.928-6.885a.75.75 0 0 1 .193-.33l12.603-12.54a2.28 2.28 0 0 1 .742-.504Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-enhance' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19 13h-2m0 0a4 4 0 0 1-4-4m4 4a4 4 0 0 0-4 4m0-8V7m0 2a4 4 0 0 1-4 4m-2 0h2m0 0a4 4 0 0 1 4 4m0 0v2M8 8.5H6.5m0 0a2 2 0 0 1-2-2m2 2a2 2 0 0 0-2 2m0-4V5m0 1.5a2 2 0 0 1-2 2M1 8.5h1.5m0 0a2 2 0 0 1 2 2m0 0V12M12 3h-1m0 0a1 1 0 0 1-1-1m1 1a1 1 0 0 0-1 1m0-2V1m0 1a1 1 0 0 1-1 1M8 3h1m0 0a1 1 0 0 1 1 1m0 0v1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-exposure' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M10 20v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05M5 10a5 5 0 1 0 10 0 5 5 0 1 0-10 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-filters' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M4.5 6.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m-3.5 6a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m7 0a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-flip' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19.6 5 18 3.5 16.4 5m3.2 10L18 16.5 16.4 15M18 3.523v12.954M3.3 8.5h10.654c.301 0 .415-.395.159-.554L3.459 1.286A.3.3 0 0 0 3 1.542V8.2a.3.3 0 0 0 .3.3zm0 3h10.654c.301 0 .415.395.159.554l-10.654 6.66A.3.3 0 0 1 3 18.458v-6.66a.3.3 0 0 1 .3-.3z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-gamma' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M17 3C9 6 2.5 11.5 2.5 17.5m0 0h1m-1 0v-1m14 1h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3-14v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-mirror' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M5 .4 3.5 2 5 3.6M15 .4 16.5 2 15 3.6M3.52 2h12.957M8.5 16.7V6.046c0-.301-.394-.415-.554-.159L1.287 16.541a.3.3 0 0 0 .255.459H8.2a.3.3 0 0 0 .3-.3zm3 0V6.046c0-.301.395-.415.555-.159l6.659 10.654a.3.3 0 0 1-.255.459H11.8a.3.3 0 0 1-.3-.3z'/></symbol><symbol viewBox='0 0 40 40' id='uc-icon-original' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.5' d='M0 40 40 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-rotate' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M13.5.4 12 2l1.5 1.6M12.023 2H14.4A3.6 3.6 0 0 1 18 5.6V8M4 17h9a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-sad' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 17c4.418-4 11.582-4 16 0M16.5 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-11 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-saturation' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='ruc-icon-id__a' x1='10.001' y1='1' x2='10.001' y2='19' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs><circle cx='10.001' cy='10' r='9' transform='rotate(90 10 10)' fill='url(#ruc-icon-id__a)'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-slider' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M0 10h11m0 0a2 2 0 1 0 4 0m-4 0a2 2 0 1 1 4 0m0 0h5'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-tuning' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M8 10h11M1 10h4M1 4.5h11m3 0h4m-18 11h11m3 0h4m-7-11a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M5 10a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0m7 5.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-vibrance' xmlns='http://www.w3.org/2000/svg'><path d='M2.125 5.64A8.96 8.96 0 0 0 1.001 10a8.96 8.96 0 0 0 1.124 4.36V5.64z' fill='url(#uuc-icon-id__a)'/><path d='M2.875 15.499V4.502a9.053 9.053 0 0 1 1.75-1.72v14.437a9.05 9.05 0 0 1-1.75-1.72z' fill='url(#uuc-icon-id__b)'/><path d='M5.375 17.722c.548.33 1.134.601 1.75.809V1.469a8.956 8.956 0 0 0-1.75.81v15.443z' fill='url(#uuc-icon-id__c)'/><path d='M7.875 1.253v17.495c.564.136 1.15.22 1.75.244V1.008a9 9 0 0 0-1.75.245z' fill='url(#uuc-icon-id__d)'/><path d='M10.375 1.008v17.984a9 9 0 0 0 1.75-.244V1.252a9 9 0 0 0-1.75-.244z' fill='url(#uuc-icon-id__e)'/><path d='M12.875 1.469V18.53a8.957 8.957 0 0 0 1.75-.808V2.277a8.957 8.957 0 0 0-1.75-.808z' fill='url(#uuc-icon-id__f)'/><path d='M15.375 2.78v14.44a9.053 9.053 0 0 0 1.75-1.72v-11a9.054 9.054 0 0 0-1.75-1.72z' fill='url(#uuc-icon-id__g)'/><path d='M17.875 5.638v8.724A8.959 8.959 0 0 0 19.001 10a8.96 8.96 0 0 0-1.126-4.362z' fill='url(#uuc-icon-id__h)'/><defs><linearGradient id='uuc-icon-id__a' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__b' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__c' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__d' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__e' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__f' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__g' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='uuc-icon-id__h' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs></symbol><symbol viewBox='0 0 20 20' id='uc-icon-warmth' xmlns='http://www.w3.org/2000/svg'><path d='m7.5 13.05.429.42.171-.175v-.244h-.6zm5 0h-.6v.245l.172.175.428-.42zM8.1 3.5c0-1.05.85-1.9 1.9-1.9V.4a3.1 3.1 0 0 0-3.1 3.1h1.2zm0 9.55V3.5H6.9v9.55h1.2zm-1 2.45c0-.79.315-1.506.829-2.03l-.858-.84A4.088 4.088 0 0 0 5.9 15.5h1.2zm2.9 2.9a2.9 2.9 0 0 1-2.9-2.9H5.9a4.1 4.1 0 0 0 4.1 4.1v-1.2zm2.9-2.9a2.9 2.9 0 0 1-2.9 2.9v1.2a4.1 4.1 0 0 0 4.1-4.1h-1.2zm-.829-2.03c.514.524.829 1.24.829 2.03h1.2c0-1.117-.447-2.13-1.171-2.87l-.858.84zM11.9 3.5v9.55h1.2V3.5h-1.2zM10 1.6c1.05 0 1.9.85 1.9 1.9h1.2A3.1 3.1 0 0 0 10 .4v1.2z' fill='currentColor'/><path d='M10 14V8' stroke='currentColor' stroke-width='1.2' stroke-linecap='round'/><path d='M14 3h3m-3 3h3m-3 3h3m-8 6.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0' stroke='currentColor' stroke-width='1.2'/></symbol></svg>", DEFAULT_STYLE = {
-	transition: "uc-transition",
-	visible: "uc-visible",
-	hidden: "uc-hidden"
-}, PresenceToggle = class extends LitBlock {
-	constructor(...p) {
-		super(...p), this._visible = !1, this._styles = DEFAULT_STYLE, this._visibleStyle = DEFAULT_STYLE.visible, this._hiddenStyle = DEFAULT_STYLE.hidden, this._externalTransitions = !1, this._initialRenderComplete = !1;
-	}
-	set visible(p) {
-		this._visible = p, this._handleVisible();
-	}
-	get visible() {
-		return this._visible;
-	}
-	set styles(p) {
-		this._styles = p, this._externalTransitions = !0, this._visibleStyle = p.visible ?? DEFAULT_STYLE.visible, this._hiddenStyle = p.hidden ?? DEFAULT_STYLE.hidden;
-	}
-	get styles() {
-		return this._styles;
-	}
-	_handleVisible() {
-		this.style.visibility = this._visible ? "inherit" : "hidden", applyClassNames(this, {
-			[DEFAULT_STYLE.transition]: !this._externalTransitions,
-			[this._visibleStyle]: this._visible,
-			[this._hiddenStyle]: !this._visible
-		}), this.toggleAttribute("inert", !this._visible);
-	}
-	_dispatchInitialRenderEvent() {
-		this._initialRenderComplete || (this._initialRenderComplete = !0, this.dispatchEvent(new CustomEvent("initial-render", {
-			bubbles: !0,
-			composed: !0
-		})));
-	}
-	initCallback() {
-		super.initCallback(), this.classList.toggle("uc-initial", !0), this._externalTransitions || this.classList.add(DEFAULT_STYLE.transition), this._handleVisible(), setTimeout(() => {
-			this.classList.toggle("uc-initial", !1), this._dispatchInitialRenderEvent();
-		}, 0);
-	}
-};
-__decorate([n({ type: Boolean })], PresenceToggle.prototype, "visible", null), __decorate([n({ attribute: !1 })], PresenceToggle.prototype, "styles", null);
-var LineLoaderUi = class extends LitBlock {
-	constructor(...p) {
-		super(...p), this.active = !1, this._lineRef = e(), this._isAnimating = !1, this._handleTransitionEndRight = () => {
-			let p = this._lineRef.value;
-			p && (this._resetLine(p), this._isAnimating && this.active && this._start());
-		};
-	}
-	firstUpdated(p) {
-		super.firstUpdated(p), this.active && this._start();
-	}
-	updated(p) {
-		super.updated(p), p.has("active") && (this.active ? this._start() : this._stop());
-	}
-	_start() {
-		let p = this._lineRef.value;
-		if (!p) return;
-		this._isAnimating = !0;
-		let { width: B } = this.getBoundingClientRect();
-		p.removeEventListener("transitionend", this._handleTransitionEndRight), p.style.transition = "transform 1s", p.style.opacity = "1", p.style.transform = `translateX(${B}px)`, p.addEventListener("transitionend", this._handleTransitionEndRight, { once: !0 });
-	}
-	_stop() {
-		let p = this._lineRef.value;
-		p && (this._isAnimating = !1, p.removeEventListener("transitionend", this._handleTransitionEndRight), this._resetLine(p));
-	}
-	_resetLine(p) {
-		p.style.transition = "initial", p.style.opacity = "0", p.style.transform = "translateX(-101%)";
-	}
-	render() {
-		return b`
-      <div class="uc-inner">
-        <div class="uc-line" ${n$1(this._lineRef)}></div>
-      </div>
-    `;
-	}
-};
-__decorate([n({
-	type: Boolean,
-	reflect: !0
-})], LineLoaderUi.prototype, "active", void 0);
-/**
-* @license
-* Copyright 2018 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/ var e$1 = e$2(class extends i {
-	constructor(p) {
-		if (super(p), p.type !== t.ATTRIBUTE || p.name !== "class" || p.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
-	}
-	render(p) {
-		return " " + Object.keys(p).filter((B) => p[B]).join(" ") + " ";
-	}
-	update(p, [B]) {
-		if (this.st === void 0) {
-			for (let V in this.st = /* @__PURE__ */ new Set(), p.strings !== void 0 && (this.nt = new Set(p.strings.join(" ").split(/\s/).filter((p) => p !== ""))), B) B[V] && !this.nt?.has(V) && this.st.add(V);
-			return this.render(B);
-		}
-		let V = p.element.classList;
-		for (let p of this.st) p in B || (V.remove(p), this.st.delete(p));
-		for (let p in B) {
-			let H = !!B[p];
-			H === this.st.has(p) || this.nt?.has(p) || (H ? (V.add(p), this.st.add(p)) : (V.remove(p), this.st.delete(p)));
-		}
-		return E;
-	}
-}), o$2 = (p) => p ?? A, BtnUi = class extends LitBlock {
-	constructor(...p) {
-		super(...p), this.text = "", this.icon = "", this.reverse = !1, this.theme = "default", this.ariaRole = void 0, this.ariaControls = "", this.titleProp = "", this.active = !1;
-	}
-	firstUpdated(p) {
-		super.firstUpdated(p), this._applyReverse(), this._applyThemeClass();
-	}
-	updated(p) {
-		super.updated(p), p.has("reverse") && this._applyReverse(), p.has("theme") && this._applyThemeClass();
-	}
-	_applyReverse() {
-		this.style.flexDirection = this.reverse ? "row-reverse" : "";
-	}
-	_applyThemeClass() {
-		this.theme && this.theme !== "custom" && (this.className = `uc-${this.theme}`);
-	}
-	get _iconClassMap() {
-		let p = this._computedIconHidden;
-		return {
-			"uc-icon": !0,
-			"uc-icon_left": !this.reverse,
-			"uc-icon_right": this.reverse,
-			"uc-icon_hidden": p,
-			"uc-icon_single": this._computedIconSingle
-		};
-	}
-	get _computedIconHidden() {
-		return !this.icon;
-	}
-	get _computedIconSingle() {
-		return !this.text && !this._computedIconHidden;
-	}
-	render() {
-		return b`
-      <button
-        type="button"
-        role=${o$2(this.ariaRole || void 0)}
-        aria-controls=${o$2(this.ariaControls || void 0)}
-        aria-label=${o$2(this.l10n(this.titleProp))}
-        title=${o$2(this.l10n(this.titleProp))}
-      >
-        <uc-icon
-          class=${e$1(this._iconClassMap)}
-          name=${o$2(this.icon || void 0)}
-          ?hidden=${this._computedIconHidden}
-        ></uc-icon>
-        <div class="uc-text">${this.text}</div>
-      </button>
-    `;
-	}
-};
-__decorate([n({ type: String })], BtnUi.prototype, "text", void 0), __decorate([n({ type: String })], BtnUi.prototype, "icon", void 0), __decorate([n({
-	type: Boolean,
-	reflect: !0
-})], BtnUi.prototype, "reverse", void 0), __decorate([n({
-	type: String,
-	reflect: !0
-})], BtnUi.prototype, "theme", void 0), __decorate([n({ attribute: "aria-role" })], BtnUi.prototype, "ariaRole", void 0), __decorate([n({ attribute: "aria-controls" })], BtnUi.prototype, "ariaControls", void 0), __decorate([n({ attribute: "title-prop" })], BtnUi.prototype, "titleProp", void 0), __decorate([n({
-	type: Boolean,
-	noAccessor: !0
-})], BtnUi.prototype, "active", void 0);
-function preloadImage(p) {
-	let B = new Image();
-	return {
-		promise: new Promise((V, H) => {
-			B.src = p, B.onload = () => V(), B.onerror = (p) => H(p);
-		}),
-		image: B,
-		cancel: () => {
-			B.naturalWidth === 0 && (B.src = TRANSPARENT_PIXEL_SRC);
-		}
-	};
-}
-function batchPreloadImages(p) {
-	let B = [];
-	for (let V of p) {
-		let p = preloadImage(V);
-		B.push(p);
-	}
-	let V = B.map((p) => p.image);
-	return {
-		promise: Promise.allSettled(B.map((p) => p.promise)),
-		images: V,
-		cancel: () => {
-			B.forEach((p) => {
-				p.cancel();
-			});
-		}
-	};
-}
-const throttle = (p, B) => {
-	let V = !1, H, U = 0, W = ((...W) => {
-		V ? (H && clearTimeout(H), H = setTimeout(() => {
-			Date.now() - U >= B && (p(...W), U = Date.now());
-		}, Math.max(B - (Date.now() - U), 0))) : (p(...W), U = Date.now(), V = !0);
-	});
-	return Object.defineProperty(W, "cancel", {
-		configurable: !1,
-		writable: !1,
-		enumerable: !1,
-		value: () => {
-			H && clearTimeout(H);
-		}
-	}), W;
-};
-function pick(p, B) {
-	let V = {};
-	for (let H of B) {
-		let B = p[H];
-		(Object.hasOwn(p, H) || B !== void 0) && (V[H] = B);
-	}
-	return V;
-}
-function viewerImageSrc(B, V, H) {
-	let U = window.devicePixelRatio, W = Math.min(Math.ceil(V * U), 3e3), G = U >= 2 ? "lightest" : "normal";
-	return createCdnUrl(B, createCdnUrlModifiers(COMMON_OPERATIONS, transformationsToOperations(H), `quality/${G}`, `stretch/off/-/resize/${W}x`, `@clib/${PACKAGE_NAME}/${PACKAGE_VERSION}/uc-cloud-image-editor/`));
-}
-var CropFrame = class extends LitBlock {
-	constructor(...p) {
-		super(...p), this._backdropMaskId = `uc-backdrop-mask-${UID.generateFastUid()}`, this._guidesHidden = !1, this._draggingValue = !1, this._svgRef = e(), this._svgReady = !1, this._pendingMaskHref = null, this._handlePointerUp = (p) => {
-			this._updateCursor(), this._dragging &&= (p.stopPropagation(), p.preventDefault(), !1);
-		}, this._handlePointerMove = (p) => {
-			if (!this._dragging || !this._dragStartPoint || !this._draggingThumb) return;
-			p.stopPropagation(), p.preventDefault();
-			let B = this._svgElement;
-			if (!B) return;
-			let { x: V, y: H } = B.getBoundingClientRect(), U = p.x - V, W = p.y - H, G = U - this._dragStartPoint[0], K = W - this._dragStartPoint[1], { direction: q } = this._draggingThumb, J = this._calcCropBox(q, [G, K]);
-			J && (this.$["*cropBox"] = J);
-		}, this._handleSvgPointerMove = (p) => {
-			this._frameThumbs && (this._hoverThumb = Object.values(this._frameThumbs).find((B) => {
-				if (!B || this._shouldThumbBeDisabled(B.direction)) return !1;
-				let V = B.interactionNode.getBoundingClientRect();
-				return rectContainsPoint({
-					x: V.x,
-					y: V.y,
-					width: V.width,
-					height: V.height
-				}, [p.x, p.y]);
-			}), this._updateCursor());
-		};
-	}
-	get _svgElement() {
-		return this._svgRef.value ?? null;
-	}
-	get _dragging() {
-		return this._draggingValue;
-	}
-	set _dragging(p) {
-		this._draggingValue !== p && (this._draggingValue = p, this._applyGuidesDragState());
-	}
-	_applyGuidesDragState() {
-		this._frameGuides && this._frameGuides.setAttribute("class", classNames({
-			"uc-guides--hidden": this._guidesHidden,
-			"uc-guides--visible": !this._guidesHidden && this._draggingValue,
-			"uc-guides--semi-hidden": !this._guidesHidden && !this._draggingValue
-		}));
-	}
-	_shouldThumbBeDisabled(p) {
-		let B = this.$["*imageBox"];
-		if (!B) return !1;
-		if (p === "" && B.height <= 1 && B.width <= 1) return !0;
-		let V = B.height <= 1 && (p.includes("n") || p.includes("s")), H = B.width <= 1 && (p.includes("e") || p.includes("w"));
-		return V || H;
-	}
-	_createBackdrop() {
-		let p = this.$["*cropBox"];
-		if (!p) return;
-		let { x: B, y: V, width: H, height: U } = p, W = this._svgElement;
-		if (!W) return;
-		let G = createSvgNode("mask", { id: this._backdropMaskId }), K = createSvgNode("rect", {
-			x: 0,
-			y: 0,
-			width: "100%",
-			height: "100%",
-			fill: "white"
-		}), q = createSvgNode("rect", {
-			x: B,
-			y: V,
-			width: H,
-			height: U,
-			fill: "black"
-		});
-		G.appendChild(K), G.appendChild(q);
-		let J = createSvgNode("rect", {
-			x: 0,
-			y: 0,
-			width: "100%",
-			height: "100%",
-			fill: "var(--color-image-background)",
-			"fill-opacity": .85,
-			mask: `url(#${this._backdropMaskId})`
-		});
-		W.appendChild(J), W.appendChild(G), this._backdropMask = G, this._backdropMaskInner = q;
-	}
-	_resizeBackdrop() {
-		this._backdropMask && (this._backdropMask.style.display = "none", window.requestAnimationFrame(() => {
-			this._backdropMask && (this._backdropMask.style.display = "block");
-		}));
-	}
-	_updateBackdrop() {
-		let p = this.$["*cropBox"];
-		if (!p) return;
-		let { x: B, y: V, width: H, height: U } = p;
-		this._backdropMaskInner && setSvgNodeAttrs(this._backdropMaskInner, {
-			x: B,
-			y: V,
-			width: H,
-			height: U
-		});
-	}
-	_updateFrame() {
-		let p = this.$["*cropBox"];
-		if (!(!p || !this._frameGuides || !this._frameThumbs)) {
-			for (let B of Object.values(this._frameThumbs)) {
-				if (!B) continue;
-				let { direction: V, pathNode: H, interactionNode: U, groupNode: W } = B, G = V === "", K = V.length === 2, { x: q, y: J, width: Y, height: X } = p;
-				if (G) setSvgNodeAttrs(U, {
-					x: q,
-					y: J,
-					width: Y,
-					height: X
-				});
-				else {
-					let B = clamp(Math.min(Y, X) / 82 / 2, 0, 1), W = K ? cornerPath(p, V, B) : sidePath(p, V, B), G = W.center;
-					if (!G) continue;
-					let q = Math.max(24 * clamp(Math.min(Y, X) / 24 / 3, 0, 1), 6);
-					setSvgNodeAttrs(U, {
-						x: G[0] - q,
-						y: G[1] - q,
-						width: q * 2,
-						height: q * 2
-					}), setSvgNodeAttrs(H, { d: W.d });
-				}
-				let Z = this._shouldThumbBeDisabled(V);
-				W.setAttribute("class", classNames("uc-thumb", {
-					"uc-thumb--hidden": Z,
-					"uc-thumb--visible": !Z
-				}));
-			}
-			setSvgNodeAttrs(this._frameGuides, {
-				x: p.x - 1 * .5,
-				y: p.y - 1 * .5,
-				width: p.width + 1,
-				height: p.height + 1
-			});
-		}
-	}
-	_createThumb(p, B) {
-		let V = createSvgNode("g");
-		V.classList.add("uc-thumb"), V.setAttribute("with-effects", "");
-		let H = createSvgNode("rect", { fill: "transparent" }), U = createSvgNode("path", {
-			stroke: "currentColor",
-			fill: "none",
-			"stroke-width": 3
-		});
-		V.appendChild(U), V.appendChild(H), p[B] = {
-			direction: B,
-			pathNode: U,
-			interactionNode: H,
-			groupNode: V
-		}, B === "" && (V.style.cursor = "move"), H.addEventListener("pointerdown", this._handlePointerDown.bind(this, B));
-	}
-	_createThumbs() {
-		let p = {};
-		for (let B = 0; B < 3; B++) for (let V = 0; V < 3; V++) {
-			let H = `${[
-				"n",
-				"",
-				"s"
-			][B]}${[
-				"w",
-				"",
-				"e"
-			][V]}`;
-			H !== "" && this._createThumb(p, H);
-		}
-		return this._createThumb(p, ""), p;
-	}
-	_createGuides() {
-		let p = createSvgNode("svg"), B = createSvgNode("rect", {
-			x: 0,
-			y: 0,
-			width: "100%",
-			height: "100%",
-			fill: "none",
-			stroke: "currentColor",
-			"stroke-width": 1,
-			"stroke-opacity": .5
-		});
-		p.appendChild(B);
-		for (let B = 1; B <= 2; B++) {
-			let V = createSvgNode("line", {
-				x1: `${GUIDE_THIRD * B}%`,
-				y1: "0%",
-				x2: `${GUIDE_THIRD * B}%`,
-				y2: "100%",
-				stroke: "currentColor",
-				"stroke-width": 1,
-				"stroke-opacity": .3
-			});
-			p.appendChild(V);
-		}
-		for (let B = 1; B <= 2; B++) {
-			let V = createSvgNode("line", {
-				x1: "0%",
-				y1: `${GUIDE_THIRD * B}%`,
-				x2: "100%",
-				y2: `${GUIDE_THIRD * B}%`,
-				stroke: "currentColor",
-				"stroke-width": 1,
-				"stroke-opacity": .3
-			});
-			p.appendChild(V);
-		}
-		return p.classList.add("uc-guides", "uc-guides--semi-hidden"), p;
-	}
-	_createFrame() {
-		let p = this._svgElement;
-		if (!p) return;
-		let B = document.createDocumentFragment(), V = this._createGuides();
-		B.appendChild(V);
-		let H = this._createThumbs();
-		for (let { groupNode: p } of Object.values(H)) B.appendChild(p);
-		p.appendChild(B), this._frameThumbs = H, this._frameGuides = V, this._applyGuidesDragState();
-	}
-	_handlePointerDown(p, B) {
-		if (!this._frameThumbs) return;
-		let V = this._frameThumbs[p];
-		if (!V || this._shouldThumbBeDisabled(p)) return;
-		let H = this.$["*cropBox"], U = this._svgElement;
-		if (!U) return;
-		let { x: W, y: G } = U.getBoundingClientRect(), K = B.x - W, q = B.y - G;
-		this._dragging = !0, this._draggingThumb = V, this._dragStartPoint = [K, q], this._dragStartCrop = { ...H };
-	}
-	_calcCropBox(p, B) {
-		let [V, H] = B, U = this.$["*imageBox"], W = this._dragStartCrop ?? this.$["*cropBox"], G = this.$["*currentAspectRatio"], K = G ? G.width / G.height : void 0;
-		if (W = p === "" ? moveRect({
-			rect: W,
-			delta: [V, H],
-			imageBox: U
-		}) : resizeRect({
-			rect: W,
-			delta: [V, H],
-			direction: p,
-			aspectRatio: K,
-			imageBox: U
-		}), !Object.values(W).every((p) => Number.isFinite(p) && p >= 0)) {
-			console.error("CropFrame is trying to create invalid rectangle", { payload: W });
-			return;
-		}
-		return constraintRect(roundRect(W), U);
-	}
-	_updateCursor() {
-		let p = this._hoverThumb, B = this._svgElement;
-		B && (B.style.cursor = p ? thumbCursor(p.direction) : "initial");
-	}
-	_createMask(p) {
-		if (this._frameImage) {
-			this._frameImage.setAttribute("href", p);
-			return;
-		}
-		let B = this._svgElement;
-		if (!B) {
-			this._pendingMaskHref = p;
-			return;
-		}
-		this._pendingMaskHref = null;
-		let V = document.createDocumentFragment(), H = createSvgNode("image", { href: p });
-		H.setAttribute("class", "uc-cloud-mask"), V.appendChild(H), B.appendChild(V), this._frameImage = H;
-	}
-	_updateMask() {
-		let p = this.$["*cropBox"];
-		if (!p || !this._frameImage) return;
-		let { x: B, y: V, width: H, height: U } = p;
-		setSvgNodeAttrs(this._frameImage, {
-			x: B,
-			y: V,
-			height: U,
-			width: H
-		});
-	}
-	_render() {
-		this._svgReady && (this._updateBackdrop(), this._updateFrame(), this._updateMask());
-	}
-	toggleThumbs(p) {
-		if (this._frameThumbs) for (let B of Object.values(this._frameThumbs)) {
-			if (!B) continue;
-			let { groupNode: V } = B;
-			V.setAttribute("class", classNames("uc-thumb", {
-				"uc-thumb--hidden": !p,
-				"uc-thumb--visible": p
-			}));
-		}
-	}
-	initCallback() {
-		super.initCallback(), this.sub("*imageBox", () => {
-			this._resizeBackdrop(), this._svgReady && window.requestAnimationFrame(() => {
-				this._render();
-			});
-		}), this.sub("*cropBox", (p) => {
-			p && (this._guidesHidden = p.height <= 1 || p.width <= 1, this._applyGuidesDragState(), this._svgReady && window.requestAnimationFrame(() => {
-				this._render();
-			}));
-		}), this.subConfigValue("cloudImageEditorMaskHref", (p) => {
-			p && this._createMask(p);
-		}), document.addEventListener("pointermove", this._handlePointerMove, !0), document.addEventListener("pointerup", this._handlePointerUp, !0);
-	}
-	firstUpdated(p) {
-		super.firstUpdated(p), this._initializeSvg();
-	}
-	_initializeSvg() {
-		let p = this._svgElement;
-		if (!(!p || this._svgReady)) {
-			if (this._createBackdrop(), this._createFrame(), this._svgReady = !0, p.addEventListener("pointermove", this._handleSvgPointerMove, !0), this._pendingMaskHref) {
-				let p = this._pendingMaskHref;
-				this._pendingMaskHref = null, this._createMask(p);
-			}
-			this._render();
-		}
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this._svgElement?.removeEventListener("pointermove", this._handleSvgPointerMove, !0), document.removeEventListener("pointermove", this._handlePointerMove, !0), document.removeEventListener("pointerup", this._handlePointerUp, !0);
-	}
-	render() {
-		return b`<svg class="uc-svg" xmlns="http://www.w3.org/2000/svg" ${n$1(this._svgRef)}></svg>`;
-	}
-};
-__decorate([r()], CropFrame.prototype, "_draggingValue", void 0);
-function validateCrop(p) {
-	return p ? [({ dimensions: p, coords: B }) => [...p, ...B].every((p) => Number.isInteger(p) && Number.isFinite(p)), ({ dimensions: p, coords: B }) => p.every((p) => p > 0) && B.every((p) => p >= 0)].every((B) => B(p)) : !0;
-}
-var EditorImageCropper = class extends LitBlock {
-	constructor() {
-		super(), this.ctxOwner = !0, this._imageSize = {
-			width: 0,
-			height: 0
-		}, this._ctx = null, this._isActive = !1, this._image = null, this._canvasRef = e(), this._frameRef = e(), this.init$ = {
-			...this.init$,
-			"*padding": 20,
-			"*operations": {
-				rotate: 0,
-				mirror: !1,
-				flip: !1
-			},
-			"*imageBox": {
-				x: 0,
-				y: 0,
-				width: 0,
-				height: 0
-			},
-			"*cropBox": {
-				x: 0,
-				y: 0,
-				width: 0,
-				height: 0
-			}
-		}, this._commitDebounced = debounce(this._commit.bind(this), 300), this._handleResizeThrottled = throttle(() => {
-			!this.isConnected || !this._isActive || (this._initCanvas(), this._syncTransformations(), this._alignImage(), this._alignCrop(), this._draw());
-		}, 100);
-	}
-	firstUpdated(p) {
-		super.firstUpdated(p), this._initCanvas();
-	}
-	_syncTransformations() {
-		let p = this.$["*editorTransformations"], B = pick(p, Object.keys(this.$["*operations"])), V = {
-			...this.$["*operations"],
-			...B
-		};
-		this.$["*operations"] = V;
-	}
-	_initCanvas() {
-		let p = this._canvasRef.value;
-		if (!p) return;
-		let B = p.getContext("2d"), V = this.offsetWidth, H = this.offsetHeight, U = window.devicePixelRatio;
-		p.style.width = `${V}px`, p.style.height = `${H}px`, p.width = V * U, p.height = H * U, B?.scale(U, U), this._canvas = p, this._ctx = B;
-	}
-	_alignImage() {
-		if (!this._isActive || !this._image) return;
-		let p = this._image, B = this.$["*padding"], { rotate: V } = this.$["*operations"], H = {
-			width: this.offsetWidth,
-			height: this.offsetHeight
-		}, U = rotateSize({
-			width: p.naturalWidth,
-			height: p.naturalHeight
-		}, V), W;
-		if (U.width > H.width - B * 2 || U.height > H.height - B * 2) {
-			let p = U.width / U.height;
-			if (p > H.width / H.height) {
-				let V = H.width - B * 2, U = V / p;
-				W = {
-					x: 0 + B,
-					y: B + (H.height - B * 2) / 2 - U / 2,
-					width: V,
-					height: U
-				};
-			} else {
-				let V = H.height - B * 2, U = V * p;
-				W = {
-					x: B + (H.width - B * 2) / 2 - U / 2,
-					y: 0 + B,
-					width: U,
-					height: V
-				};
-			}
-		} else {
-			let { width: p, height: V } = U;
-			W = {
-				x: B + (H.width - B * 2) / 2 - p / 2,
-				y: B + (H.height - B * 2) / 2 - V / 2,
-				width: p,
-				height: V
-			};
-		}
-		this.$["*imageBox"] = roundRect(W);
-	}
-	_alignCrop() {
-		let p = this.$["*cropBox"], B = this.$["*imageBox"], { rotate: V } = this.$["*operations"], H = this.$["*editorTransformations"].crop, { width: U, x: W, y: G } = B;
-		if (H) {
-			let { dimensions: [K, q], coords: [J, Y] } = H, { width: X } = rotateSize(this._imageSize, V), Z = U / X;
-			p = constraintRect(roundRect({
-				x: W + J * Z,
-				y: G + Y * Z,
-				width: K * Z,
-				height: q * Z
-			}), B);
-		}
-		let K = this.$["*currentAspectRatio"], q = K ? K.width / K.height : void 0;
-		if (!isRectInsideRect(p, B) || q && !isRectMatchesAspectRatio(p, q)) {
-			let V = B.width / B.height, H = B.width, U = B.height;
-			q && (V > q ? H = Math.min(B.height * q, B.width) : U = Math.min(B.width / q, B.height)), p = {
-				x: B.x + B.width / 2 - H / 2,
-				y: B.y + B.height / 2 - U / 2,
-				width: H,
-				height: U
-			};
-		}
-		this.$["*cropBox"] = constraintRect(roundRect(p), B);
-	}
-	_drawImage() {
-		let p = this._ctx;
-		if (!p) return;
-		let B = this._image;
-		if (!B) return;
-		let V = this.$["*imageBox"], { mirror: H, flip: U, rotate: W } = this.$["*operations"], G = rotateSize({
-			width: V.width,
-			height: V.height
-		}, W);
-		p.save(), p.translate(V.x + V.width / 2, V.y + V.height / 2), p.rotate(W * Math.PI * -1 / 180), p.scale(H ? -1 : 1, U ? -1 : 1), p.drawImage(B, -G.width / 2, -G.height / 2, G.width, G.height), p.restore();
-	}
-	_draw() {
-		if (!this._isActive || !this._image || !this._canvas || !this._ctx) return;
-		let p = this._canvas;
-		this._ctx.clearRect(0, 0, p.width, p.height), this._drawImage();
-	}
-	_animateIn({ fromViewer: p }) {
-		this._image && (this._frameRef.value?.toggleThumbs(!0), this._transitionToImage(), setTimeout(() => {
-			this.className = classNames({
-				"uc-active_from_viewer": p,
-				"uc-active_from_editor": !p,
-				"uc-inactive_to_editor": !1
-			});
-		}));
-	}
-	_getCropDimensions() {
-		let p = this.$["*cropBox"], B = this.$["*imageBox"], { rotate: V } = this.$["*operations"], { width: H, height: U } = B, { width: W, height: G } = rotateSize(this._imageSize, V), { width: K, height: q } = p, J = H / W, Y = U / G;
-		return [clamp(Math.round(K / J), 1, W), clamp(Math.round(q / Y), 1, G)];
-	}
-	_getCropTransformation() {
-		let p = this.$["*cropBox"], B = this.$["*imageBox"], { rotate: V } = this.$["*operations"], { width: H, height: U, x: W, y: G } = B, { width: K, height: q } = rotateSize(this._imageSize, V), { x: J, y: Y } = p, X = H / K, Z = U / q, Q = this._getCropDimensions(), $ = {
-			dimensions: Q,
-			coords: [clamp(Math.round((J - W) / X), 0, K - Q[0]), clamp(Math.round((Y - G) / Z), 0, q - Q[1])]
-		};
-		if (!validateCrop($)) {
-			console.error("Cropper is trying to create invalid crop object", { payload: $ });
-			return;
-		}
-		if (!(Q[0] === K && Q[1] === q)) return $;
-	}
-	_commit() {
-		if (!this.isConnected || !this._imageSize) return;
-		let { rotate: p, mirror: B, flip: V } = this.$["*operations"], H = this._getCropTransformation(), U = {
-			...this.$["*editorTransformations"],
-			crop: H,
-			rotate: p,
-			mirror: B,
-			flip: V
-		};
-		this.$["*editorTransformations"] = U;
-	}
-	setValue(p, B) {
-		this.$["*operations"] = {
-			...this.$["*operations"],
-			[p]: B
-		}, this._isActive && (this._alignImage(), this._alignCrop(), this._draw());
-	}
-	getValue(p) {
-		return this.$["*operations"][p];
-	}
-	async activate(p, { fromViewer: B } = {}) {
-		if (!this._isActive) {
-			this._isActive = !0, await this.updateComplete, this._initCanvas(), this._imageSize = p, this.removeEventListener("transitionend", this._reset);
-			try {
-				let p = this.$["*originalUrl"], V = this.$["*editorTransformations"];
-				this._image = await this._waitForImage(p, V), this._syncTransformations(), this._handleResizeThrottled(), this._animateIn({ fromViewer: B });
-			} catch (p) {
-				console.error("Failed to activate cropper", { error: p }), this.telemetryManager.sendEventError(p, "cloud editor image. Failed to activate cropper");
-			}
-			this._observer = new ResizeObserver((p) => {
-				let [B] = p;
-				B && B.contentRect.width > 0 && B.contentRect.height > 0 && this._isActive && this._image && this._handleResizeThrottled();
-			}), this._observer.observe(this);
-		}
-	}
-	deactivate({ reset: p = !1 } = {}) {
-		this._isActive && (!p && this._commit(), this._isActive = !1, this._transitionToCrop(), this.className = classNames({
-			"uc-active_from_viewer": !1,
-			"uc-active_from_editor": !1,
-			"uc-inactive_to_editor": !0
-		}), this._frameRef.value?.toggleThumbs(!1), this.addEventListener("transitionend", this._reset, { once: !0 }), this._observer?.disconnect());
-	}
-	_transitionToCrop() {
-		let p = this._getCropDimensions(), B = this.$["*cropBox"], V = Math.min(this.offsetWidth, p[0]) / B.width, H = Math.min(this.offsetHeight, p[1]) / B.height, U = Math.min(V, H), W = B.x + B.width / 2, G = B.y + B.height / 2;
-		this.style.transform = `scale(${U}) translate(${(this.offsetWidth / 2 - W) / U}px, ${(this.offsetHeight / 2 - G) / U}px)`, this.style.transformOrigin = `${W}px ${G}px`;
-	}
-	_transitionToImage() {
-		let p = this.$["*cropBox"], B = p.x + p.width / 2, V = p.y + p.height / 2;
-		this.style.transform = "scale(1)", this.style.transformOrigin = `${B}px ${V}px`;
-	}
-	_reset() {
-		this._isActive || (this._image = null);
-	}
-	async _waitForImage(p, B) {
-		let V = this.offsetWidth;
-		B = {
-			...B,
-			crop: void 0,
-			rotate: void 0,
-			flip: void 0,
-			mirror: void 0
-		};
-		let H = await this.proxyUrl(viewerImageSrc(p, V, B)), { promise: U, cancel: W, image: G } = preloadImage(H), K = this._handleImageLoading(H);
-		return G.addEventListener("load", K, { once: !0 }), G.addEventListener("error", K, { once: !0 }), this._cancelPreload?.(), this._cancelPreload = W, U.then(() => G).catch((p) => (console.error("Failed to load image", { error: p }), this.$["*networkProblems"] = !0, G));
-	}
-	_handleImageLoading(p) {
-		let B = "crop", V = this.$["*loadingOperations"], H = V.get(B);
-		return H || (H = /* @__PURE__ */ new Map(), V.set(B, H)), H.get(p) || (H.set(p, !0), this.$["*loadingOperations"] = V), () => {
-			let H = V.get(B);
-			H?.has(p) && (H.delete(p), this.$["*loadingOperations"] = V);
-		};
-	}
-	initCallback() {
-		super.initCallback(), this.sub("*imageBox", () => {
-			this._draw();
-		}), this.sub("*cropBox", () => {
-			this._image && this._commitDebounced();
-		}), this.sub("*currentAspectRatio", () => {
-			this._alignCrop();
-		}), setTimeout(() => {
-			this.sub("*networkProblems", (p) => {
-				p || this._isActive && this._imageSize && this.activate(this._imageSize, { fromViewer: !1 });
-			});
-		}, 0);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this._observer?.disconnect(), this._image &&= null;
-	}
-	render() {
-		return b`
-      <canvas class="uc-canvas" ${n$1(this._canvasRef)}></canvas>
-      <uc-crop-frame ${n$1(this._frameRef)}></uc-crop-frame>
-    `;
-	}
-};
-__decorate([r()], EditorImageCropper.prototype, "_image", void 0);
-function linspace(p, B, V) {
-	let H = V, U = V - 1, W = Array(H);
-	for (let V = U; V >= 0; --V) W[V] = Math.ceil((V * B + (U - V) * p) / U);
-	return W;
-}
-function isOperationKey(p) {
-	return typeof p == "string" && p in COLOR_OPERATIONS_CONFIG;
-}
-function splitBySections(p) {
-	let B = [];
-	for (let V = 0; V < p.length - 1; V += 1) {
-		let H = p[V], U = p[V + 1];
-		typeof H == "number" && typeof U == "number" && B.push([H, U]);
-	}
-	return B;
-}
-function calculateOpacities(p, B, V) {
-	let H = splitBySections(p).find(([p, V]) => p <= B && B <= V);
-	if (!H) return p.map(() => 0);
-	let [U, W] = H;
-	return p.map((p) => {
-		let H = Math.abs(U - W) || 1, G = Math.abs(B - U) / H;
-		return U === p ? B > V ? 1 : 1 - G : W === p ? B >= V ? G : 1 : 0;
-	});
-}
-function calculateZIndices(p, B) {
-	return p.map((V, H) => V < B ? p.length - H : H);
-}
-function keypointsRange(p, B) {
-	let V = COLOR_OPERATIONS_CONFIG[p].keypointsNumber, { range: H, zero: U } = COLOR_OPERATIONS_CONFIG[p];
-	return [...new Set([
-		...linspace(H[0], U, V + 1),
-		...linspace(U, H[1], V + 1),
-		U,
-		B
-	])].sort((p, B) => p - B);
-}
-var EditorImageFader = class extends LitBlock {
-	constructor() {
-		super(), this._isActive = !1, this._hidden = !0, this._operation = "initial", this._transformations = {}, this._keypoints = [], this._raf = 0, this._previewHostRef = e(), this._layersHostRef = e(), this.classList.add("uc-inactive_to_cropper"), this._addKeypointDebounced = debounce(async (p, B, V) => {
-			let H = () => !this._isSame(p, B) || this._value !== V || !!this._keypoints.find((p) => p.value === V);
-			if (H()) return;
-			let U = await this._constructKeypoint(p, V), W = new Image();
-			W.src = U.src;
-			let G = this._handleImageLoading(U.src);
-			W.addEventListener("load", G, { once: !0 }), W.addEventListener("error", G, { once: !0 }), U.image = W, W.classList.add("uc-fader-image"), W.addEventListener("load", () => {
-				if (H()) return;
-				let B = this._keypoints, G = B.findIndex((p) => p.value > V);
-				G === -1 && (G = B.length);
-				let K = B[G]?.image, q = this._layersHostRef.value;
-				!q || K && !q.contains(K) || (B.splice(G, 0, U), K ? q.insertBefore(W, K) : q.appendChild(W), this._update(p, V));
-			}, { once: !0 }), W.addEventListener("error", () => {
-				this.$["*networkProblems"] = !0;
-			}, { once: !0 });
-		}, 600);
-	}
-	_handleImageLoading(p) {
-		let B = this._operation, V = this.$["*loadingOperations"];
-		V.has(B) || V.set(B, /* @__PURE__ */ new Map());
-		let H = V.get(B);
-		return H && !H.get(p) && (H.set(p, !0), this.$["*loadingOperations"] = V), () => {
-			let H = V.get(B);
-			H?.has(p) && (H.delete(p), this.$["*loadingOperations"] = V);
-		};
-	}
-	_flush() {
-		window.cancelAnimationFrame(this._raf), this._raf = window.requestAnimationFrame(() => {
-			for (let p of this._keypoints) {
-				let { image: B } = p;
-				B && (B.style.opacity = p.opacity.toString(), B.style.zIndex = p.zIndex.toString());
-			}
-		});
-	}
-	_imageSrc({ url: p = this._url, filter: B = this._filter ?? void 0, operation: V, value: H } = {}) {
-		if (!p) throw Error("URL is not defined");
-		let U = { ...this._transformations };
-		V && (V === "filter" ? B && typeof H == "number" && (U.filter = {
-			name: B,
-			amount: H
-		}) : typeof H == "number" && (U[V] = H));
-		let W = this.offsetWidth;
-		return this.proxyUrl(viewerImageSrc(p, W, U));
-	}
-	async _constructKeypoint(p, B) {
-		return {
-			src: await this._imageSrc({
-				operation: p,
-				value: B
-			}),
-			image: void 0,
-			opacity: 0,
-			zIndex: 0,
-			value: B
-		};
-	}
-	_isSame(p, B) {
-		return this._operation === p && this._filter === B;
-	}
-	set(p) {
-		let B = typeof p == "string" ? parseInt(p, 10) : p;
-		!isOperationKey(this._operation) || !Number.isFinite(B) || (this._update(this._operation, B), this._addKeypointDebounced(this._operation, this._filter, B));
-	}
-	_update(p, B) {
-		this._operation = p, this._value = B;
-		let { zero: V } = COLOR_OPERATIONS_CONFIG[p], H = this._keypoints.map((p) => p.value), U = calculateOpacities(H, B, V), W = calculateZIndices(H, V);
-		this._keypoints.forEach((p, B) => {
-			let V = U[B], H = W[B];
-			typeof V == "number" && (p.opacity = V), typeof H == "number" && (p.zIndex = H);
-		}), this._flush();
-	}
-	_createPreviewImage() {
-		let p = new Image();
-		return p.classList.add("uc-fader-image", "uc-fader-image--preview"), p.style.opacity = "0", p;
-	}
-	async _initNodes() {
-		this._previewImage = this._previewImage || this._createPreviewImage();
-		let p = this._previewImage;
-		p && this._ensurePreviewAttached(p);
-		let { images: B, promise: V, cancel: H } = batchPreloadImages(this._keypoints.map((p) => p.src));
-		B.forEach((p) => {
-			let B = this._handleImageLoading(p.src);
-			p.addEventListener("load", B), p.addEventListener("error", B);
-		}), this._cancelLastImages = () => {
-			H(), this._cancelLastImages = void 0;
-		};
-		let U = this._operation, W = this._filter;
-		if (await V, this._isActive && this._isSame(U, W)) {
-			let p = this._layersHostRef.value;
-			if (!p) return;
-			p.replaceChildren(), this._keypoints.forEach((V, H) => {
-				let U = B[H];
-				U && (U.classList.add("uc-fader-image"), V.image = U, p.appendChild(U));
-			}), this._flush();
-		}
-	}
-	async setTransformations(p) {
-		if (this._transformations = p, this._previewImage) {
-			let p = await this._imageSrc(), B = this._handleImageLoading(p);
-			this._previewImage.src = p, this._previewImage.addEventListener("load", B, { once: !0 }), this._previewImage.addEventListener("error", B, { once: !0 }), this._previewImage.style.opacity = "1", this._previewImage.addEventListener("error", () => {
-				this.$["*networkProblems"] = !0;
-			}, { once: !0 });
-		}
-	}
-	async preload({ url: p, filter: B, operation: V, value: H }) {
-		if (!V || typeof H != "number") return;
-		this._cancelBatchPreload?.();
-		let U = keypointsRange(V, H), { cancel: W } = batchPreloadImages(await Promise.all(U.map((H) => this._imageSrc({
-			url: p,
-			filter: B,
-			operation: V,
-			value: H
-		}))));
-		this._cancelBatchPreload = W;
-	}
-	_setOriginalSrc(p) {
-		let B = this._previewImage || this._createPreviewImage();
-		if (this._ensurePreviewAttached(B), this._previewImage = B, B.src === p) {
-			B.style.opacity = "1", B.style.transform = "scale(1)", this.className = classNames({
-				"uc-active_from_viewer": this._fromViewer,
-				"uc-active_from_cropper": !this._fromViewer,
-				"uc-inactive_to_cropper": !1
-			});
-			return;
-		}
-		B.style.opacity = "0";
-		let V = this._handleImageLoading(p);
-		B.addEventListener("error", V, { once: !0 }), B.src = p, B.addEventListener("load", () => {
-			V(), B && (B.style.opacity = "1", B.style.transform = "scale(1)", this.className = classNames({
-				"uc-active_from_viewer": this._fromViewer,
-				"uc-active_from_cropper": !this._fromViewer,
-				"uc-inactive_to_cropper": !1
-			}));
-		}, { once: !0 }), B.addEventListener("error", () => {
-			this.$["*networkProblems"] = !0;
-		}, { once: !0 });
-	}
-	async activate({ url: p, operation: B, value: V, filter: H, fromViewer: U }) {
-		if (this._isActive = !0, this._hidden = !1, await this.updateComplete, this._url = p, this._operation = B ?? "initial", this._value = V, this._filter = H, this._fromViewer = U, typeof V != "number" && !H) {
-			let p = await this._imageSrc({
-				operation: B,
-				value: V
-			});
-			this._setOriginalSrc(p), this._clearLayersHost();
-			return;
-		}
-		!B || typeof V != "number" || (this._keypoints = await Promise.all(keypointsRange(B, V).map((p) => this._constructKeypoint(B, p))), this._update(B, V), this._initNodes());
-	}
-	deactivate({ hide: p = !0 } = {}) {
-		this._isActive = !1, this._cancelLastImages?.(), this._cancelBatchPreload?.(), p && !this._hidden ? (this._hidden = !0, this._previewImage && (this._previewImage.style.transform = "scale(1)"), this.className = classNames({
-			"uc-active_from_viewer": !1,
-			"uc-active_from_cropper": !1,
-			"uc-inactive_to_cropper": !0
-		}), this.addEventListener("transitionend", () => {
-			this._clearLayersHost();
-		}, { once: !0 })) : this._clearLayersHost();
-	}
-	_ensurePreviewAttached(p) {
-		let B = this._previewHostRef.value;
-		B && (B.contains(p) || B.appendChild(p));
-	}
-	_clearLayersHost() {
-		this._layersHostRef.value?.replaceChildren();
-	}
-	render() {
-		return b`
-      <div class="uc-fader-preview-host" ${n$1(this._previewHostRef)}></div>
-      <div class="uc-fader-layers-host" ${n$1(this._layersHostRef)}></div>
-    `;
-	}
-}, SliderUi = class extends LitBlock {
-	constructor() {
-		super(), this._thumbSize = 0, this._inputRef = e(), this._thumbRef = e(), this._stepsRef = e(), this.disabled = !1, this.min = 0, this.max = 100, this.defaultValue = 0, this.zero = 0, this._currentValue = 0, this._handleSliderInput = (p) => {
-			p.stopPropagation();
-			let B = this._extractEventValue(p);
-			B !== null && (this._setCurrentValue(B), this._emitSliderEvent("slider-input", B));
-		}, this._handleSliderChange = (p) => {
-			p.stopPropagation();
-			let B = this._extractEventValue(p);
-			B !== null && this._setCurrentValue(B);
-		}, this._handleInputFocus = () => {
-			this.style.setProperty("--color-effect", "var(--hover-color-rgb)");
-		}, this._handleInputBlur = () => {
-			this.style.setProperty("--color-effect", "var(--idle-color-rgb)");
-		}, this.setAttribute("with-effects", "");
-	}
-	_emitSliderEvent(p, B) {
-		this.dispatchEvent(new CustomEvent(p, {
-			detail: { value: B },
-			bubbles: !0,
-			composed: !0
-		}));
-	}
-	firstUpdated(p) {
-		super.firstUpdated(p), this._thumbSize = Number.parseInt(window.getComputedStyle(this).getPropertyValue("--l-thumb-size"), 10) || 0, this._syncInputValue(this._currentValue), this._updateSteps(), this._observer = new ResizeObserver(() => {
-			this._updateSteps(), this._updateValue(this._currentValue);
-		}), this._observer.observe(this);
-		let B = this._inputRef.value;
-		B?.addEventListener("focus", this._handleInputFocus), B?.addEventListener("blur", this._handleInputBlur), window.setTimeout(() => {
-			this._updateValue(this._currentValue);
-		}, 0);
-	}
-	willUpdate(p) {
-		super.willUpdate(p), p.has("defaultValue") && this.defaultValue !== this._currentValue && this._setCurrentValue(this.defaultValue), (p.has("min") || p.has("max")) && this.hasUpdated && (this._updateSteps(), this._updateValue(this._currentValue)), p.has("zero") && this.hasUpdated && this._updateZeroDot(this._currentValue);
-	}
-	_updateValue(p) {
-		this._updateZeroDot(p);
-		let B = this.max - this.min;
-		if (B === 0) return;
-		let { width: V } = this.getBoundingClientRect(), H = 100 / B * (p - this.min) * (V - this._thumbSize) / 100;
-		window.requestAnimationFrame(() => {
-			let p = this._thumbRef.value;
-			p && (p.style.transform = `translateX(${H}px)`);
-		});
-	}
-	_updateZeroDot(p) {
-		if (!this._zeroDotEl) return;
-		let B = this.max - this.min;
-		if (B === 0) return;
-		this._zeroDotEl.style.opacity = p === this.zero ? "0" : "1";
-		let { width: V } = this.getBoundingClientRect(), H = 100 / B * (this.zero - this.min) * (V - this._thumbSize) / 100;
-		window.requestAnimationFrame(() => {
-			this._zeroDotEl && (this._zeroDotEl.style.transform = `translateX(${H}px)`);
-		});
-	}
-	_updateSteps() {
-		let p = this._stepsRef.value;
-		if (!p) return;
-		let { width: B } = p.getBoundingClientRect(), V = Math.ceil(B / 2), H = Math.ceil(V / 15) - 2;
-		if (this._stepsCount === H) return;
-		let U = document.createDocumentFragment(), W = document.createElement("div"), G = document.createElement("div");
-		W.className = "uc-minor-step", G.className = "uc-border-step", U.appendChild(G);
-		for (let p = 0; p < H; p += 1) U.appendChild(W.cloneNode());
-		U.appendChild(G.cloneNode());
-		for (let p = 0; p < H; p += 1) U.appendChild(W.cloneNode());
-		U.appendChild(G.cloneNode());
-		let K = document.createElement("div");
-		K.className = "uc-zero-dot", U.appendChild(K), this._zeroDotEl = K, p.innerHTML = "", p.appendChild(U), this._stepsCount = H;
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		let p = this._inputRef.value;
-		p?.removeEventListener("focus", this._handleInputFocus), p?.removeEventListener("blur", this._handleInputBlur), this._observer?.disconnect(), this._observer = void 0;
-	}
-	_setCurrentValue(p) {
-		Number.isFinite(p) && (this._currentValue = p, this.hasUpdated && (this._syncInputValue(p), this._updateValue(p)));
-	}
-	_syncInputValue(p) {
-		let B = this._inputRef.value;
-		B && (B.value = String(p));
-	}
-	_extractEventValue(p) {
-		let B = p.currentTarget;
-		if (!B) return null;
-		let V = Number.parseInt(B.value, 10);
-		return Number.isFinite(V) ? V : null;
-	}
-	render() {
-		return b`
-      <div class="uc-steps" ${n$1(this._stepsRef)}></div>
-      <div class="uc-thumb" ${n$1(this._thumbRef)}></div>
-      <input
-        class="uc-input"
-        type="range"
-        ${n$1(this._inputRef)}
-        .min=${String(this.min)}
-        .max=${String(this.max)}
-        .value=${String(this._currentValue)}
-        ?disabled=${this.disabled}
-        @input=${this._handleSliderInput}
-        @change=${this._handleSliderChange}
-      />
-    `;
-	}
-};
-__decorate([n({
-	type: Boolean,
-	reflect: !0
-})], SliderUi.prototype, "disabled", void 0), __decorate([n({ type: Number })], SliderUi.prototype, "min", void 0), __decorate([n({ type: Number })], SliderUi.prototype, "max", void 0), __decorate([n({
-	type: Number,
-	attribute: !1
-})], SliderUi.prototype, "defaultValue", void 0), __decorate([n({ type: Number })], SliderUi.prototype, "zero", void 0), __decorate([r()], SliderUi.prototype, "_currentValue", void 0);
-const FAKE_ORIGINAL_FILTER = "original";
-var EditorSlider = class extends LitBlock {
-	constructor(...p) {
-		super(...p), this.state = {
-			operation: "filter",
-			filter: void 0,
-			originalUrl: "",
-			disabled: !1,
-			min: 0,
-			max: 100,
-			value: 0,
-			defaultValue: 0,
-			zero: 0
-		}, this._handleInput = (p) => {
-			let { value: B } = p.detail;
-			this.$["*faderEl"]?.set(B), this.state = {
-				...this.state,
-				value: B
-			};
-		};
-	}
-	setOperation(p, B) {
-		this.state = {
-			...this.state,
-			operation: p,
-			filter: B
-		}, this._initializeValues();
-		let V = this.$["*faderEl"], H = this.state.originalUrl || this.$["*originalUrl"];
-		V && H && V.activate({
-			url: H,
-			operation: this.state.operation,
-			value: this.state.filter === "original" ? void 0 : this.state.value,
-			filter: this.state.filter === "original" ? void 0 : this.state.filter,
-			fromViewer: !1
-		});
-	}
-	_initializeValues() {
-		let p = this.state.operation, { range: B, zero: V } = COLOR_OPERATIONS_CONFIG[p], [H, U] = B;
-		this.state = {
-			...this.state,
-			min: H,
-			max: U,
-			zero: V
-		};
-		let W = this.$["*editorTransformations"][p];
-		if (p === "filter") {
-			let p = Number(U), B = W;
-			if (B) {
-				let { name: V, amount: H } = B;
-				p = V === this.state.filter ? H : U;
-			}
-			this.state = {
-				...this.state,
-				value: p,
-				defaultValue: p
-			};
-			return;
-		}
-		let G = W === void 0 ? V : W;
-		this.state = {
-			...this.state,
-			value: G,
-			defaultValue: G
-		};
-	}
-	apply() {
-		let p = { ...this.$["*editorTransformations"] };
-		this.state.operation === "filter" ? !this.state.filter || this.state.filter === "original" ? delete p.filter : p.filter = {
-			name: this.state.filter,
-			amount: this.state.value
-		} : p[this.state.operation] = this.state.value, this.$["*editorTransformations"] = p;
-	}
-	cancel() {
-		this.$["*faderEl"]?.deactivate({ hide: !1 });
-	}
-	initCallback() {
-		super.initCallback(), this.sub("*originalUrl", (p) => {
-			p && (this.state = {
-				...this.state,
-				originalUrl: p
-			});
-		});
-	}
-	updated(p) {
-		if (super.updated(p), p.has("state")) {
-			let p = `${this.state.filter ?? this.state.operation} ${this.state.value}`;
-			this.$["*operationTooltip"] = p;
-		}
-	}
-	render() {
-		return b`
-      <uc-slider-ui
-        .disabled=${this.state.disabled}
-        .min=${this.state.min}
-        .max=${this.state.max}
-        .defaultValue=${this.state.defaultValue}
-        .zero=${this.state.zero}
-        @slider-input=${this._handleInput}
-      ></uc-slider-ui>
-    `;
-	}
-};
-__decorate([r()], EditorSlider.prototype, "state", void 0);
-function parseFilterValue(p) {
-	if (!p) return null;
-	let B = p.match(/^([A-Za-z]+)\s+(\d+)$/);
-	if (!B) return null;
-	let [, V, H] = B;
-	return !V || H === void 0 ? null : {
-		filter: V,
-		value: Number(H)
-	};
-}
-var EditorButtonControl = class extends LitBlock {
-	constructor(...p) {
-		super(...p), this.active = !1, this.title = "", this.icon = "", this.titleProp = "";
-	}
-	get buttonClasses() {
-		let p = this.active;
-		return {
-			"uc-active": p,
-			"uc-not_active": !p
-		};
-	}
-	_updateHostStateClasses() {
-		let p = this.buttonClasses;
-		for (let [B, V] of Object.entries(p)) this.classList.toggle(B, V);
-	}
-	onClick(p) {}
-	connectedCallback() {
-		super.connectedCallback(), this._updateHostStateClasses();
-	}
-	updated(p) {
-		super.updated(p), p.has("active") && this._updateHostStateClasses();
-	}
-	render() {
-		let p = this.onClick, B = this.title;
-		return b`
-      <button
-        role="option"
-        type="button"
-        aria-label=${o$2(this.titleProp)}
-        title=${o$2(this.titleProp)}
-        @click=${p}
-      >
-        <uc-icon name=${this.icon}></uc-icon>
-        <div class="uc-title" ?hidden=${!B}>${B}</div>
-      </button>
-    `;
-	}
-};
-__decorate([r()], EditorButtonControl.prototype, "active", void 0), __decorate([r()], EditorButtonControl.prototype, "title", void 0), __decorate([r()], EditorButtonControl.prototype, "icon", void 0), __decorate([r()], EditorButtonControl.prototype, "titleProp", void 0);
-var SIZE_RECT_FIXED = 12, SIZE_SVG_WRAPPER = 16, getAdjustResolutions = (p) => {
-	let B = 12, V = 12;
-	return p.width / p.height >= 1 ? (B = SIZE_RECT_FIXED, V = Math.round(SIZE_RECT_FIXED * p.height / p.width)) : (V = SIZE_RECT_FIXED, B = Math.round(SIZE_RECT_FIXED * p.width / p.height)), {
-		width: B,
-		height: V
-	};
-}, EditorFreeformButtonControl = class extends EditorButtonControl {
-	initCallback() {
-		super.initCallback(), this.icon = "arrow-dropdown", this.sub("*currentAspectRatio", (p) => {
-			let B = this._computeTitle(p);
-			this.title = B, this.titleProp = B;
-		});
-	}
-	onClick() {
-		this.$["*showListAspectRatio"] = !0;
-	}
-	_computeTitle(p) {
-		return p ? p.hasFreeform ? this.l10n("freeform-crop") : this.l10n("crop-to-shape", { value: `${p.width}:${p.height}` }) : "";
-	}
-	render() {
-		let p = this.onClick, B = this.title;
-		return b`
-      <button
-        role="option"
-        type="button"
-        class=${e$1(this.buttonClasses)}
-        aria-label=${o$2(this.titleProp)}
-        title=${o$2(this.titleProp)}
-        @click=${p}
-      >
-        <div class="uc-title" ?hidden=${!B}>${B}</div>
-        <uc-icon name=${this.icon}></uc-icon>
-      </button>
-    `;
-	}
-}, EditorAspectRatioButtonControl = class extends EditorButtonControl {
-	constructor(...p) {
-		super(...p), this._aspectRatio = null;
-	}
-	get aspectRatio() {
-		return this._aspectRatio;
-	}
-	set aspectRatio(p) {
-		if (this._aspectRatio === p) return;
-		let B = this._aspectRatio;
-		this._aspectRatio = p, this.requestUpdate("aspectRatio", B), p ? this._updateAspectRatioPresentation(p) : (this.removeAttribute("uc-aspect-ratio-freeform"), this.title = "", this.titleProp = "");
-	}
-	initCallback() {
-		super.initCallback(), this._aspectRatio && this._updateAspectRatioPresentation(this._aspectRatio), this.sub("*currentAspectRatio", (p) => {
-			this.active = p && p.id === this._aspectRatio?.id || p?.width === this._aspectRatio?.width && p?.height === this._aspectRatio?.height;
-		});
-	}
-	onClick() {
-		this.$["*currentAspectRatio"]?.id !== this._aspectRatio?.id && (this.$["*currentAspectRatio"] = this._aspectRatio);
-	}
-	_updateAspectRatioPresentation(p) {
-		if (!this.isConnected) return;
-		let B = !!p.hasFreeform;
-		this.toggleAttribute("uc-aspect-ratio-freeform", B), (() => {
-			let V = B ? this.l10n("custom") : `${p.width}:${p.height}`;
-			return this.title = V, V;
-		})(), (() => {
-			let V = this.l10n("a11y-cloud-editor-apply-aspect-ratio", {
-				name: B ? this.l10n("custom").toLowerCase() : this.l10n("crop-to-shape", { value: `${p.width}:${p.height}` }).toLowerCase(),
-				value: ""
-			});
-			return this.titleProp = V, V;
-		})(), B || this.requestUpdate();
-	}
-	_renderIcon() {
-		let p = this._aspectRatio;
-		if (!p || p.hasFreeform) return b`<uc-icon name=${this.icon}></uc-icon>`;
-		let { width: B, height: V } = getAdjustResolutions(p);
-		return b`
-      <uc-icon>
-      <svg
-        viewBox="0 0 ${SIZE_SVG_WRAPPER} ${SIZE_SVG_WRAPPER}"
-        aria-hidden="true"
-        focusable="false"
-      >
-        <rect
-          x=${(SIZE_SVG_WRAPPER - B) / 2}
-          y=${(SIZE_SVG_WRAPPER - V) / 2}
-          width=${B}
-          height=${V}
-          rx="2"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.2"
-          stroke-linejoin="round"
-        ></rect>
-      </svg>
-      </uc-icon>
-    `;
-	}
-	render() {
-		let p = this.onClick, B = this.title;
-		return b`
-      <button
-        role="option"
-        type="button"
-        class=${e$1(this.buttonClasses)}
-        aria-label=${o$2(this.titleProp)}
-        title=${o$2(this.titleProp)}
-        @click=${p}
-      >
-        ${this._renderIcon()}
-        <div class="uc-title" ?hidden=${!B}>${B}</div>
-      </button>
-    `;
-	}
-};
-__decorate([n({ attribute: !1 })], EditorAspectRatioButtonControl.prototype, "aspectRatio", null);
-function nextAngle(p) {
-	let B = p + 90;
-	return B = B >= 360 ? 0 : B, B;
-}
-function nextValue(p, B) {
-	if (p === "rotate") return nextAngle(typeof B == "number" ? B : 0);
-	if (p === "mirror" || p === "flip") return !B;
-	throw Error(`Unsupported operation: ${p}`);
-}
-var EditorCropButtonControl = class extends EditorButtonControl {
-	constructor(...p) {
-		super(...p), this.operation = void 0;
-	}
-	willUpdate(p) {
-		super.willUpdate(p), this.operation ? (this.titleProp = this.l10n("a11y-cloud-editor-apply-crop", { name: this.l10n(this.operation).toLowerCase() }), this.icon = this.operation) : (this.icon = "", this.titleProp = "");
-	}
-	onClick(p) {
-		if (!this.operation) return;
-		let B = this.$["*cropperEl"], V = B.getValue(this.operation), H = nextValue(this.operation, V);
-		this.telemetryManager.sendEventCloudImageEditor(p, this.$["*tabId"], {
-			operation: this.operation,
-			next: H,
-			prev: V
-		}), B.setValue(this.operation, H);
-	}
-};
-__decorate([n({ type: String })], EditorCropButtonControl.prototype, "operation", void 0);
-var EditorFilterControl = class extends EditorButtonControl {
-	constructor(...p) {
-		super(...p), this._operation = "", this._filter = "", this._originalUrl = "", this._lastPreviewRequestId = 0, this._previewImage = null, this._previewLoaded = !1, this.isOriginal = !1, this._iconSize = 20;
-	}
-	get filter() {
-		return this._filter;
-	}
-	set filter(p) {
-		let B = p ?? "";
-		if (this._filter === B) return;
-		let V = this._filter;
-		this._filter = B, this._operation = "filter", this.isOriginal = B === FAKE_ORIGINAL_FILTER, this.icon = this.isOriginal ? "original" : "slider", this._iconSize = this.isOriginal ? 40 : 20, this.requestUpdate("filter", V), this.isConnected && this._updateFilterLabels(B);
-	}
-	onClick(p) {
-		if (this.active) this.isOriginal || (this.$["*sliderEl"].setOperation(this._operation, this._filter), this.$["*showSlider"] = !0);
-		else {
-			let p = this.$["*sliderEl"];
-			p.setOperation(this._operation, this._filter), p.apply();
-		}
-		this.telemetryManager.sendEventCloudImageEditor(p, this.$["*tabId"], { operation: parseFilterValue(this.$["*operationTooltip"]) }), this.$["*currentFilter"] = this._filter;
-	}
-	_previewSrc() {
-		let B = parseInt(window.getComputedStyle(this).getPropertyValue("--l-base-min-width"), 10), V = Number.isFinite(B) && B > 0 ? B : this._iconSize || 32, H = window.devicePixelRatio, U = Math.ceil(H * V), W = H >= 2 ? "lightest" : "normal", G = { ...this.$["*editorTransformations"] };
-		return G[this._operation] = this._filter === "original" ? void 0 : {
-			name: this._filter,
-			amount: 100
-		}, createCdnUrl(this._originalUrl, createCdnUrlModifiers(COMMON_OPERATIONS, transformationsToOperations(G), `quality/${W}`, `scale_crop/${U}x${U}/center`, `@clib/${PACKAGE_NAME}/${PACKAGE_VERSION}/uc-cloud-image-editor/`));
-	}
-	async _observerCallback(p, B) {
-		p[0]?.isIntersecting ? await this._loadPreview(B) : this._cancelPreload?.();
-	}
-	initCallback() {
-		super.initCallback(), this._observer = new window.IntersectionObserver(this._observerCallback.bind(this), { threshold: [0, 1] }), this._originalUrl = this.$["*originalUrl"] ?? "", this.sub("*originalUrl", (p) => {
-			this._originalUrl = p ?? "", !this.isOriginal && this._originalUrl && this.isConnected && !this._previewImage && (this._observer?.observe(this), this._schedulePreviewVisibilityCheck());
-		}), this.isOriginal || (this._observer?.observe(this), this._schedulePreviewVisibilityCheck()), this._filter && this._updateFilterLabels(this._filter), this.sub("*currentFilter", (p) => {
-			this.active = !!(p && p === this._filter);
-		}), this.sub("*networkProblems", async (p) => {
-			p || (this._previewImage ? await this._loadPreview() : this._schedulePreviewVisibilityCheck());
-		});
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this._observer?.disconnect(), this._cancelPreload?.(), this._clearPreviewVisibilityChecks();
-	}
-	updated(p) {
-		super.updated(p), p.has("isOriginal") && (this.isOriginal ? this._observer?.unobserve(this) : (this._observer?.observe(this), this._schedulePreviewVisibilityCheck()));
-	}
-	_updateFilterLabels(p) {
-		if (!p) {
-			this.titleProp = "";
-			return;
-		}
-		this.titleProp = this.l10n("a11y-cloud-editor-apply-filter", { name: p.toLowerCase() });
-	}
-	async _loadPreview(p) {
-		if (!this.isConnected) {
-			p?.unobserve(this), this._cancelPreload?.(), this._cancelPreload = void 0;
-			return;
-		}
-		if (!this._originalUrl) {
-			!this._previewVisibilityCheckTimeout && !this._previewVisibilityCheckRaf && this._schedulePreviewVisibilityCheck();
-			return;
-		}
-		let B = ++this._lastPreviewRequestId, V = "";
-		try {
-			V = await this.proxyUrl(this._previewSrc());
-		} catch (p) {
-			this.$["*networkProblems"] = !0, console.error("Failed to resolve preview URL", { error: p });
-			return;
-		}
-		this._previewLoaded = !1, this._cancelPreload?.();
-		let { promise: H, cancel: U } = preloadImage(V);
-		this._cancelPreload = () => {
-			U(), this._lastPreviewRequestId === B && (this._cancelPreload = void 0);
-		};
-		try {
-			if (await H, this._lastPreviewRequestId !== B || !this.isConnected) return;
-			this._previewImage = V, this._previewLoaded = !0, this._clearPreviewVisibilityChecks(), (p ?? this._observer)?.unobserve(this);
-		} catch (p) {
-			this.$["*networkProblems"] = !0, console.error("Failed to load image", { error: p }), this._schedulePreviewVisibilityCheck();
-		} finally {
-			this._lastPreviewRequestId === B && (this._cancelPreload = void 0);
-		}
-	}
-	_schedulePreviewVisibilityCheck() {
-		if (!this.isConnected || this._previewImage || this._previewLoaded || this.isOriginal || this.$["*networkProblems"]) {
-			this._clearPreviewVisibilityChecks();
-			return;
-		}
-		this._previewVisibilityCheckRaf && cancelAnimationFrame(this._previewVisibilityCheckRaf), this._previewVisibilityCheckRaf = requestAnimationFrame(() => {
-			if (this._previewVisibilityCheckRaf = void 0, !this.isConnected || this._previewImage || this._previewLoaded || this.isOriginal) {
-				this._clearPreviewVisibilityChecks();
-				return;
-			}
-			let p = this.getBoundingClientRect(), B = p.width > 0 && p.height > 0, V = window.innerWidth || document.documentElement.clientWidth, H = window.innerHeight || document.documentElement.clientHeight;
-			if (B && p.bottom > 0 && p.right > 0 && p.top < H && p.left < V) {
-				this._loadPreview();
-				return;
-			}
-			this._previewVisibilityCheckTimeout = window.setTimeout(() => {
-				this._previewVisibilityCheckTimeout = void 0, this._schedulePreviewVisibilityCheck();
-			}, 500);
-		});
-	}
-	_clearPreviewVisibilityChecks() {
-		this._previewVisibilityCheckRaf &&= (cancelAnimationFrame(this._previewVisibilityCheckRaf), void 0), this._previewVisibilityCheckTimeout &&= (window.clearTimeout(this._previewVisibilityCheckTimeout), void 0);
-	}
-	get _shouldShowPreview() {
-		return !!(this._previewLoaded && !this.active && !this.isOriginal);
-	}
-	render() {
-		let p = this.onClick, B = { opacity: this._shouldShowPreview ? "1" : "0" };
-		this._previewImage && (B.backgroundImage = `url(${this._previewImage})`);
-		let V = { opacity: this.active || this.isOriginal ? "1" : "0" };
-		return b`
-      <button
-        role="option"
-        type="button"
-        class=${e$1(this.buttonClasses)}
-        aria-label=${o$2(this.titleProp)}
-        title=${o$2(this.titleProp)}
-        @click=${p}
-      >
-        <div class="uc-preview" ?data-loaded=${this._previewLoaded} style=${o$1(B)}></div>
-        <uc-icon
-          class=${e$1({ "uc-original-icon": this.isOriginal })}
-          name=${this.icon}
-          style=${o$1(V)}
-        ></uc-icon>
-      </button>
-    `;
-	}
-};
-__decorate([r()], EditorFilterControl.prototype, "_previewImage", void 0), __decorate([r()], EditorFilterControl.prototype, "_previewLoaded", void 0), __decorate([r()], EditorFilterControl.prototype, "isOriginal", void 0), __decorate([r()], EditorFilterControl.prototype, "_iconSize", void 0), __decorate([n({ type: String })], EditorFilterControl.prototype, "filter", null);
-var EditorOperationControl = class extends EditorButtonControl {
-	constructor(...p) {
-		super(...p), this._operation = "";
-	}
-	get operation() {
-		return this._operation;
-	}
-	set operation(p) {
-		let B = p ?? "";
-		if (this._operation === B) return;
-		let V = this._operation;
-		this._operation = B, this.requestUpdate("operation", V), this.isConnected && B && this._updateOperationMetadata(B);
-	}
-	_updateOperationMetadata(p) {
-		this.icon = p, (() => {
-			let B = this.l10n("a11y-cloud-editor-apply-tuning", { name: this.l10n(p).toLowerCase() });
-			return this.titleProp = B, B;
-		})(), (() => {
-			let B = this.l10n(p);
-			return this.title = B, B;
-		})();
-	}
-	initCallback() {
-		super.initCallback(), this._operation && this._updateOperationMetadata(this._operation), this.sub("*editorTransformations", (p) => {
-			if (!this._operation) return;
-			let { zero: B } = COLOR_OPERATIONS_CONFIG[this._operation], V = p[this._operation];
-			this.active = V === void 0 ? !1 : V !== B;
-		});
-	}
-	onClick(p) {
-		this.$["*sliderEl"]?.setOperation(this._operation), this.$["*showSlider"] = !0, this.$["*currentOperation"] = this._operation, this.telemetryManager.sendEventCloudImageEditor(p, this.$["*tabId"], { operation: parseFilterValue(this.$["*operationTooltip"]) });
-	}
-};
-__decorate([n({ type: String })], EditorOperationControl.prototype, "operation", null);
-var X_THRESHOLD = 1, noopScrollListener = () => {}, EditorScroller = class extends LitBlock {
-	constructor(...p) {
-		super(...p), this.hiddenScrollbar = !1, this._handleWheel = (p) => {
-			p.preventDefault();
-			let { deltaY: B, deltaX: V } = p;
-			if (Math.abs(V) > X_THRESHOLD) {
-				this.scrollLeft += V;
-				return;
-			}
-			this.scrollLeft += B;
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.addEventListener("wheel", this._handleWheel, { passive: !1 }), this.addEventListener("scroll", noopScrollListener, { passive: !0 });
-	}
-	disconnectedCallback() {
-		this.removeEventListener("wheel", this._handleWheel), this.removeEventListener("scroll", noopScrollListener), super.disconnectedCallback();
-	}
-};
-__decorate([n({
-	type: Boolean,
-	noAccessor: !0,
-	attribute: "hidden-scrollbar"
-})], EditorScroller.prototype, "hiddenScrollbar", void 0);
-var EditorToolbar = class extends LitBlock {
-	constructor(...p) {
-		super(...p), this._showLoader = !1, this.showMainToolbar = !0, this.showSubToolbar = !1, this._showTabToggles = !0, this.tabList = [...ALL_TABS], this.activeTab = TabId.CROP, this._useSliderPanel = !0, this._tooltipVisible = !1, this._operationTooltip = null, this._tabIndicatorOffset = 0, this._tabIndicatorWidth = 0, this._sliderRef = e(), this._tabIndicatorRef = e(), this.tabToggleRefs = {
-			[TabId.CROP]: e(),
-			[TabId.TUNING]: e(),
-			[TabId.FILTERS]: e()
-		}, this._handleWindowResize = () => {
-			this._syncTabIndicator();
-		}, this._cropPresets = [], this._debouncedShowLoader = debounce((p) => {
-			this._showLoader = p;
-		}, 500), this._updateInfoTooltip = debounce(() => {
-			let p = this.$["*editorTransformations"], B = this.$["*currentOperation"], V = "", H = !1;
-			if (this.$["*tabId"] === TabId.FILTERS) if (H = !0, this.$["*currentFilter"] && p?.filter?.name === this.$["*currentFilter"]) {
-				let B = p?.filter?.amount || 100;
-				V = `${this.$["*currentFilter"]} ${B}`;
-			} else V = this.l10n(FAKE_ORIGINAL_FILTER);
-			else if (this.showSubToolbar && this.$["*tabId"] === TabId.TUNING && B) {
-				H = !0;
-				let U = p?.[B] || COLOR_OPERATIONS_CONFIG[B].zero;
-				V = `${this.l10n(B)} ${U}`;
-			}
-			H && (this.$["*operationTooltip"] = V), this._tooltipVisible = H;
-		}, 0), this._subTopToolbarStyles = {
-			hidden: "uc-sub-toolbar--top-hidden",
-			visible: "uc-sub-toolbar--visible"
-		}, this._subBottomToolbarStyles = {
-			hidden: "uc-sub-toolbar--bottom-hidden",
-			visible: "uc-sub-toolbar--visible"
-		}, this._tabToggleStyles = {
-			hidden: "uc-tab-toggle--hidden",
-			visible: "uc-tab-toggle--visible"
-		}, this._tabTogglesStyles = {
-			hidden: "uc-tab-toggles--hidden",
-			visible: "uc-tab-toggles--visible"
-		}, this.init$ = {
-			...this.init$,
-			"*sliderEl": null,
-			"*showSlider": !1,
-			"*showListAspectRatio": !1,
-			"*currentFilter": FAKE_ORIGINAL_FILTER,
-			"*currentOperation": null,
-			"*operationTooltip": null
-		}, this._handleCancel = (p) => {
-			this.telemetryManager.sendEventCloudImageEditor(p, this.$["*tabId"], { action: "cancel" }), this._cancelPreload?.();
-			let B = this.$["*on.cancel"];
-			B?.();
-		}, this._handleApply = (p) => {
-			this.telemetryManager.sendEventCloudImageEditor(p, this.$["*tabId"], { action: "apply" });
-			let B = this.$["*on.apply"];
-			B?.(this.$["*editorTransformations"]);
-		}, this._handleApplySlider = (p) => {
-			this.telemetryManager.sendEventCloudImageEditor(p, this.$["*tabId"], {
-				action: "apply-slider",
-				operation: parseFilterValue(this.$["*operationTooltip"])
-			}), this._sliderRef.value?.apply(), this._onSliderClose();
-		}, this._handleCancelSlider = (p) => {
-			this.telemetryManager.sendEventCloudImageEditor(p, this.$["*tabId"], { action: "cancel-slider" }), this._sliderRef.value?.cancel(), this._onSliderClose();
-		}, this._handleTabClick = (p) => {
-			let B = p.currentTarget?.getAttribute("data-id");
-			B && (this.telemetryManager.sendEventCloudImageEditor(p, B), this._activateTab(B, { fromViewer: !1 }));
-		};
-	}
-	_onSliderClose() {
-		this.$["*showSlider"] = !1, this.$["*tabId"] === TabId.CROP && (this.$["*showListAspectRatio"] = !1), this.$["*tabId"] === TabId.TUNING && (this._tooltipVisible = !1);
-	}
-	_activateTab(p, { fromViewer: B = !1, force: V = !1 } = {}) {
-		this.$["*tabId"] !== p && (this.$["*tabId"] = p), this._applyTabState(p, {
-			fromViewer: B,
-			force: V
-		});
-	}
-	_applyTabState(p, { fromViewer: B, force: V = !1 }) {
-		if (!V && this.activeTab === p) {
-			this._syncTabIndicator();
-			return;
-		}
-		this.activeTab = p;
-		let H = this.$["*faderEl"], U = this.$["*cropperEl"];
-		p === TabId.CROP ? (H?.deactivate(), this.$["*imageSize"] && U?.activate(this.$["*imageSize"], { fromViewer: B })) : (H?.activate({
-			url: this.$["*originalUrl"],
-			fromViewer: B
-		}), U?.deactivate());
-		for (let B of ALL_TABS) {
-			let V = B === p, H = this.tabToggleRefs[B]?.value;
-			H && (H.active = V), V && this._syncTabIndicator();
-		}
-	}
-	_syncTabIndicator() {
-		let p = this.tabToggleRefs[this.activeTab]?.value, B = this._tabIndicatorRef.value;
-		if (!p || !B) return;
-		let V = p.offsetLeft, H = p.offsetWidth || Number(getComputedStyle(p).width.replace("px", ""));
-		(this._tabIndicatorOffset !== V || this._tabIndicatorWidth !== H) && (this._tabIndicatorOffset = V, this._tabIndicatorWidth = H, B.style.transform = `translateX(${V}px)`, B.style.width = `${H}px`);
-	}
-	get _hasAspectRatioPicker() {
-		return this._cropPresets.length >= 3;
-	}
-	_renderControlsByTab(p) {
-		switch (p) {
-			case TabId.CROP: return this._renderCropTabControls();
-			case TabId.FILTERS: return this._renderFilterTabControls();
-			case TabId.TUNING: return this._renderTuningTabControls();
-			default: return [];
-		}
-	}
-	_renderCropTabControls() {
-		let p = [];
-		if (this._hasAspectRatioPicker) p.push(() => this._renderFreeformControl());
-		else for (let B of this._cropPresets) p.push(() => this._renderAspectRatioControl(B));
-		for (let B of ALL_CROP_OPERATIONS) p.push(() => this._renderCropOperationControl(B));
-		return this._renderControlGroup(p);
-	}
-	_renderFilterTabControls() {
-		let p = [FAKE_ORIGINAL_FILTER, ...ALL_FILTERS].map((p) => () => this._renderFilterControl(p));
-		return this._renderControlGroup(p);
-	}
-	_renderTuningTabControls() {
-		let p = ALL_COLOR_OPERATIONS.map((p) => () => this._renderOperationControl(p));
-		return this._renderControlGroup(p);
-	}
-	_renderControlGroup(p) {
-		return p.length ? p.map((p) => p()) : [];
-	}
-	_renderFreeformControl() {
-		return b`<uc-editor-freeform-button-control></uc-editor-freeform-button-control>`;
-	}
-	_renderAspectRatioControl(p) {
-		return b`<uc-editor-aspect-ratio-button-control .aspectRatio=${p}></uc-editor-aspect-ratio-button-control>`;
-	}
-	_renderCropOperationControl(p) {
-		return b`<uc-editor-crop-button-control .operation=${p}></uc-editor-crop-button-control>`;
-	}
-	_renderFilterControl(p) {
-		return b`<uc-editor-filter-control .filter=${p}></uc-editor-filter-control>`;
-	}
-	_renderOperationControl(p) {
-		return b`<uc-editor-operation-control .operation=${p}></uc-editor-operation-control>`;
-	}
-	_renderAspectRatioList() {
-		return this._hasAspectRatioPicker ? this._cropPresets.map((p) => this._renderAspectRatioControl(p)) : [];
-	}
-	async _preloadEditedImage() {
-		if (this.$["*imgContainerEl"] && this.$["*originalUrl"]) {
-			let p = this.$["*imgContainerEl"].offsetWidth, B = await this.proxyUrl(viewerImageSrc(this.$["*originalUrl"], p, this.$["*editorTransformations"]));
-			this._cancelPreload?.();
-			let { cancel: V } = batchPreloadImages([B]);
-			this._cancelPreload = () => {
-				V(), this._cancelPreload = void 0;
-			};
-		}
-	}
-	initCallback() {
-		super.initCallback(), this._cropPresets = [...this.$["*cropPresetList"] ?? []], this.sub("*cropPresetList", (p) => {
-			this._cropPresets = [...p ?? []];
-		}), this.sub("*imageSize", (p) => {
-			p && setTimeout(() => {
-				this._activateTab(this.$["*tabId"], { fromViewer: !0 });
-			}, 0);
-		}), this.sub("*editorTransformations", (p) => {
-			let B = p?.filter?.name;
-			this.$["*currentFilter"] !== B && (this.$["*currentFilter"] = B ?? "");
-		}), this.sub("*currentFilter", () => {
-			this._updateInfoTooltip();
-		}), this.sub("*currentOperation", () => {
-			this._updateInfoTooltip();
-		}), this.sub("*tabId", (p) => {
-			this._applyTabState(p, {
-				fromViewer: !1,
-				force: !0
-			}), this._updateInfoTooltip();
-		}), this.sub("*originalUrl", () => {
-			this.$["*faderEl"]?.deactivate();
-		}), this.sub("*editorTransformations", (p) => {
-			this._preloadEditedImage(), this.$["*faderEl"]?.setTransformations(p);
-		}), this.sub("*loadingOperations", (p) => {
-			let B = !1;
-			for (let [, V] of p.entries()) {
-				if (B) break;
-				for (let [, p] of V.entries()) if (p) {
-					B = !0;
-					break;
-				}
-			}
-			this._debouncedShowLoader(B);
-		}), this.sub("*showSlider", (p) => {
-			p ? (this.showSubToolbar = !0, this.showMainToolbar = !1, this._useSliderPanel = !0) : this.$["*showListAspectRatio"] || (this.showSubToolbar = !1, this.showMainToolbar = !0);
-		}), this.sub("*showListAspectRatio", (p) => {
-			p ? (this.showSubToolbar = !0, this.showMainToolbar = !1, this._useSliderPanel = !1) : this.$["*showSlider"] || (this.showSubToolbar = !1, this.showMainToolbar = !0);
-		}), this.sub("*tabList", (p) => {
-			if (this.tabList = p, this._showTabToggles = p.length > 1, !p.includes(this.$["*tabId"]) && p.length > 0) {
-				let [B] = p;
-				B && this._activateTab(B, { fromViewer: !1 });
-				return;
-			}
-			this._syncTabIndicator();
-		}), this.sub("*operationTooltip", (p) => {
-			this._operationTooltip = p;
-		}), this._updateInfoTooltip();
-	}
-	connectedCallback() {
-		super.connectedCallback(), window.addEventListener("resize", this._handleWindowResize);
-	}
-	firstUpdated(p) {
-		super.firstUpdated(p), this._assignSharedElements(), this._syncTabIndicator();
-	}
-	updated(p) {
-		super.updated(p), (p.has("activeTab") || p.has("tabList")) && this.updateComplete.then(() => this._syncTabIndicator()), (p.has("showSubToolbar") || p.has("showMainToolbar")) && this._assignSharedElements();
-	}
-	disconnectedCallback() {
-		window.removeEventListener("resize", this._handleWindowResize), super.disconnectedCallback(), this.$["*showSlider"] = !1, this.$["*showListAspectRatio"] = !1;
-	}
-	_assignSharedElements() {
-		let p = this._sliderRef.value;
-		p && (this.$["*sliderEl"] = p);
-	}
-	_renderTabToggle(p) {
-		let B = this.tabList.includes(p), V = this.activeTab === p, H = this.tabList.indexOf(p), U = H >= 0 ? o$1({ gridColumn: `${H + 1}` }) : A;
-		return b`
-      <uc-presence-toggle class="uc-tab-toggle" .visible=${B} .styles=${this._tabToggleStyles}>
-        <uc-btn-ui
-          theme="tab"
-          data-id=${p}
-          icon=${p}
-          role="tab"
-          aria-controls=${`tab_${p}`}
-          aria-selected=${V ? "true" : "false"}
-          title-prop=${`a11y-editor-tab-${p}`}
-          .active=${V}
-          style=${U}
-          @click=${this._handleTabClick}
-          ${n$1(this.tabToggleRefs[p])}
-        ></uc-btn-ui>
-      </uc-presence-toggle>
-    `;
-	}
-	_renderTabContent(p) {
-		let B = this._renderControlsByTab(p);
-		return b`
-      <div
-        id=${`tab_${p}`}
-        class="uc-tab-content"
-      >
-        <uc-editor-scroller hidden-scrollbar>
-          <div class="uc-controls-list_align">
-            <div role="listbox" aria-orientation="horizontal" class="uc-controls-list_inner">
-              ${B.length ? B : A}
-            </div>
-          </div>
-        </uc-editor-scroller>
-      </div>
-    `;
-	}
-	render() {
-		let p = ["uc-info-tooltip", this._tooltipVisible ? "uc-info-tooltip_visible" : "uc-info-tooltip_hidden"].join(" "), B = this._hasAspectRatioPicker;
-		return b`
-      <uc-line-loader-ui .active=${this._showLoader}></uc-line-loader-ui>
-      <div class="uc-info-tooltip_container">
-        <div class="uc-info-tooltip_wrapper">
-          <div class=${p}>${this._operationTooltip ?? ""}</div>
-        </div>
-      </div>
-      <div class="uc-toolbar-container">
-        <uc-presence-toggle
-          role="tablist"
-          class="uc-sub-toolbar"
-          .visible=${this.showMainToolbar}
-          .styles=${this._subTopToolbarStyles}
-        >
-          <div class="uc-tab-content-row">
-            ${ALL_TABS.map((p) => n$2(this.activeTab === p, () => this._renderTabContent(p)))}
-          </div>
-          <div class="uc-controls-row">
-            <uc-presence-toggle
-              class="uc-tab-toggles"
-              .visible=${this._showTabToggles}
-              .styles=${this._tabTogglesStyles}
-              @initial-render=${() => this._syncTabIndicator()}
-            >
-              <div
-                class="uc-tab-toggles_indicator"
-                ${n$1(this._tabIndicatorRef)}
-              ></div>
-              ${ALL_TABS.map((p) => this._renderTabToggle(p))}
-            </uc-presence-toggle>
-            <uc-btn-ui
-              style="order: -1"
-              theme="secondary-icon"
-              icon="closeMax"
-              title-prop="cancel"
-              @click=${this._handleCancel}
-            ></uc-btn-ui>
-            <uc-btn-ui theme="primary-icon" icon="done" title-prop="apply" @click=${this._handleApply}></uc-btn-ui>
-          </div>
-        </uc-presence-toggle>
-        <uc-presence-toggle class="uc-sub-toolbar" .visible=${this.showSubToolbar} .styles=${this._subBottomToolbarStyles}>
-          <div class="uc-slider" ?hidden=${!this._useSliderPanel}>
-            <uc-editor-slider ${n$1(this._sliderRef)}></uc-editor-slider>
-          </div>
-
-          <div class="uc-list-aspect-ratio-container" ?hidden=${this._useSliderPanel || !B}>
-            ${B ? b`<div class="uc-list-aspect-ratio">${this._renderAspectRatioList()}</div>` : A}
-          </div>
-          <div class="uc-controls-row">
-            <uc-btn-ui theme="secondary" @click=${this._handleCancelSlider} text=${this.l10n("cancel")}></uc-btn-ui>
-            <uc-btn-ui theme="primary" @click=${this._handleApplySlider} text=${this.l10n("apply")}></uc-btn-ui>
-          </div>
-        </uc-presence-toggle>
-      </div>
-    `;
-	}
-};
-__decorate([r()], EditorToolbar.prototype, "_showLoader", void 0), __decorate([r()], EditorToolbar.prototype, "showMainToolbar", void 0), __decorate([r()], EditorToolbar.prototype, "showSubToolbar", void 0), __decorate([r()], EditorToolbar.prototype, "_showTabToggles", void 0), __decorate([r()], EditorToolbar.prototype, "tabList", void 0), __decorate([r()], EditorToolbar.prototype, "activeTab", void 0), __decorate([r()], EditorToolbar.prototype, "_useSliderPanel", void 0), __decorate([r()], EditorToolbar.prototype, "_tooltipVisible", void 0), __decorate([r()], EditorToolbar.prototype, "_operationTooltip", void 0), __decorate([r()], EditorToolbar.prototype, "_cropPresets", void 0);
-var DEFAULT_TABS = serializeCsv([...ALL_TABS]), CloudImageEditorBlock = class extends LitBlock {
-	constructor(...p) {
-		super(...p), this.ctxOwner = !0, this._statusMessage = "", this._imageSrc = TRANSPARENT_PIXEL_SRC, this._fileType = "", this._showLoader = !1, this.uuid = null, this.cdnUrl = null, this.cropPreset = "", this.tabs = DEFAULT_TABS, this._hasNetworkProblems = !1, this._isInitialized = !1, this._pendingInitUpdate = null, this._debouncedShowLoader = debounce((p) => {
-			this._showLoader = p;
-		}, 300), this._imgRef = e(), this._cropperRef = e(), this._faderRef = e(), this._imgContainerRef = e(), this._handleImageLoad = () => {
-			this._debouncedShowLoader(!1), this._imageSrc !== "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" && (this.$["*networkProblems"] = !1);
-		}, this._handleImageError = () => {
-			this._debouncedShowLoader(!1), this.$["*networkProblems"] = !0;
-		}, this._handleRetryNetwork = () => {
-			let p = this.$["*on.retryNetwork"];
-			p?.();
-		}, this.init$ = {
-			...this.init$,
-			...initState(this)
-		};
-	}
-	static {
-		this.styleAttrs = ["uc-cloud-image-editor"];
-	}
-	_scheduleInitialization() {
-		this._isInitialized || this._pendingInitUpdate || (this._pendingInitUpdate = this.updateComplete.then(() => {
-			this._pendingInitUpdate = null, this._isInitialized = !0;
-		}));
-	}
-	initCallback() {
-		super.initCallback(), this._syncTabListFromProp(), this._syncCropPresetState();
-	}
-	_assignSharedElements() {
-		let p = this._faderRef.value;
-		p && (this.$["*faderEl"] = p);
-		let B = this._cropperRef.value;
-		B && (this.$["*cropperEl"] = B);
-		let V = this._imgContainerRef.value;
-		V && (this.$["*imgContainerEl"] = V);
-		let H = this._imgRef.value;
-		H && (this.$["*imgEl"] = H);
-	}
-	_attachImageListeners() {
-		let p = this._imgRef.value;
-		p && (p.addEventListener("load", this._handleImageLoad), p.addEventListener("error", this._handleImageError));
-	}
-	_detachImageListeners() {
-		let p = this._imgRef.value;
-		p && (p.removeEventListener("load", this._handleImageLoad), p.removeEventListener("error", this._handleImageError));
-	}
-	get _imageClassName() {
-		let p = this.$["*tabId"];
-		return classNames("uc-image", {
-			"uc-image_hidden_to_cropper": p === TabId.CROP,
-			"uc-image_hidden_effects": p !== TabId.CROP
-		});
-	}
-	_waitForSize() {
-		return new Promise((p, B) => {
-			let V = window.setTimeout(() => {
-				B(/* @__PURE__ */ Error("[cloud-image-editor] timeout waiting for non-zero container size"));
-			}, 3e3), H = new ResizeObserver((B) => {
-				let [U] = B;
-				U && U.contentRect.width > 0 && U.contentRect.height > 0 && (window.clearTimeout(V), H.disconnect(), window.setTimeout(() => p(), 0));
-			});
-			H.observe(this);
-		});
-	}
-	firstUpdated(p) {
-		super.firstUpdated(p), this._assignSharedElements(), this._attachImageListeners(), this.initEditor();
-		let B = !!(this.uuid || this.cdnUrl), V = p.has("uuid") || p.has("cdnUrl");
-		B && !V && this.updateImage();
-	}
-	disconnectedCallback() {
-		this._detachImageListeners(), super.disconnectedCallback();
-	}
-	render() {
-		let p = this._fileType ?? "", B = this._statusMessage ?? "", V = this._imageSrc || "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=", H = this._showLoader, U = this._hasNetworkProblems;
-		return b`
-      ${o(svg_sprite_default)}
-      <div class="uc-wrapper uc-wrapper_desktop">
-        <uc-presence-toggle class="uc-network_problems_splash" .visible=${U}>
-          <div class="uc-network_problems_content">
-            <div class="uc-network_problems_icon">
-              <uc-icon name="sad"></uc-icon>
-            </div>
-            <div class="uc-network_problems_text">Network error</div>
-          </div>
-          <div class="uc-network_problems_footer">
-            <uc-btn-ui theme="primary" text="Retry" @click=${this._handleRetryNetwork}></uc-btn-ui>
-          </div>
-        </uc-presence-toggle>
-        <div class="uc-viewport">
-          <div class="uc-file_type_outer">
-            <div class="uc-file_type">${p}</div>
-          </div>
-          <div class="uc-image_container" ${n$1(this._imgContainerRef)}>
-            <img src=${V} class=${this._imageClassName} ${n$1(this._imgRef)} />
-            ${n$2(this._isInitialized, () => b`<uc-editor-image-cropper ${n$1(this._cropperRef)}></uc-editor-image-cropper>`)}
-            <uc-editor-image-fader ${n$1(this._faderRef)}></uc-editor-image-fader>
-          </div>
-          <div class="uc-info_pan">${B}</div>
-        </div>
-        <div class="uc-toolbar">
-          <uc-line-loader-ui .active=${H}></uc-line-loader-ui>
-          <div class="uc-toolbar_content uc-toolbar_content__editor">
-            ${n$2(this._isInitialized, () => b`<uc-editor-toolbar></uc-editor-toolbar>`)}
-          </div>
-        </div>
-      </div>
-    `;
-	}
-	updated(p) {
-		super.updated(p), p.has("uuid") && this.uuid && this.updateImage(), p.has("cdnUrl") && this.cdnUrl && this.updateImage(), p.has("tabs") && this._syncTabListFromProp(), (p.has("cropPreset") || p.has("cdnUrl")) && this._syncCropPresetState();
-	}
-	_syncTabListFromProp() {
-		let p = this.tabs || DEFAULT_TABS;
-		this.$["*tabList"] = parseTabs(p);
-	}
-	_syncCropPresetState() {
-		let p = parseCropPreset(this.cropPreset ?? ""), V = null;
-		if (this.cdnUrl) {
-			let B = operationsToTransformations(extractOperations(this.cdnUrl));
-			if (Array.isArray(B?.crop?.dimensions)) {
-				let [H, U] = B.crop.dimensions;
-				V = getClosestAspectRatio(H, U, p, .1);
-			}
-		}
-		this.$["*cropPresetList"] = p, this.$["*currentAspectRatio"] = V ?? p?.[0] ?? null;
-	}
-	async updateImage() {
-		if (this.isConnected) {
-			if (await this._waitForSize(), this.cdnUrl) {
-				let p = this.cdnUrl, B = createOriginalUrl(p, extractUuid(p));
-				if (B === this.$["*originalUrl"]) return;
-				this.$["*originalUrl"] = B;
-				let V = operationsToTransformations(extractOperations(p));
-				this.$["*editorTransformations"] = V;
-			} else if (this.uuid) {
-				let p = createOriginalUrl(this.cfg.cdnCname, this.uuid);
-				if (p === this.$["*originalUrl"]) return;
-				this.$["*originalUrl"] = p, Object.keys(this.$["*editorTransformations"]).length > 0 && (this.$["*editorTransformations"] = {});
-			} else throw Error("No UUID nor CDN URL provided");
-			this.$["*tabId"] === TabId.CROP ? this.$["*cropperEl"]?.deactivate({ reset: !0 }) : this.$["*faderEl"]?.deactivate();
-			try {
-				let p = this.$["*originalUrl"], B = await this.proxyUrl(createCdnUrl(p, createCdnUrlModifiers("json"))), { width: V, height: H } = await fetch(B).then((p) => p.json());
-				this.$["*imageSize"] = {
-					width: V,
-					height: H
-				}, this.$["*tabId"] === TabId.CROP ? this.$["*cropperEl"]?.activate(this.$["*imageSize"]) : this.$["*faderEl"]?.activate({ url: p });
-			} catch (p) {
-				p && (this.telemetryManager.sendEventError(p, "cloud editor image. Failed to load image info"), console.error("Failed to load image info", p));
-			}
-			this._scheduleInitialization();
-		}
-	}
-	async initEditor() {
-		try {
-			await this._waitForSize();
-		} catch (p) {
-			this.isConnected && console.error(p.message);
-			return;
-		}
-		this.classList.add("uc-editor_ON"), this.sub("*networkProblems", (p) => {
-			this._hasNetworkProblems = !!p;
-		}), this.sub("*editorTransformations", (B) => {
-			if (Object.keys(B).length === 0) return;
-			let V = this.$["*originalUrl"], H = createCdnUrlModifiers(transformationsToOperations(B), "preview"), U = {
-				originalUrl: V,
-				cdnUrlModifiers: H,
-				cdnUrl: createCdnUrl(V, H),
-				transformations: B
-			};
-			this.dispatchEvent(new CustomEvent("change", {
-				detail: U,
-				bubbles: !0,
-				composed: !0
-			}));
-		}, !1);
-	}
-};
-__decorate([r()], CloudImageEditorBlock.prototype, "_statusMessage", void 0), __decorate([r()], CloudImageEditorBlock.prototype, "_imageSrc", void 0), __decorate([r()], CloudImageEditorBlock.prototype, "_fileType", void 0), __decorate([r()], CloudImageEditorBlock.prototype, "_showLoader", void 0), __decorate([n({
-	type: String,
-	reflect: !0
-})], CloudImageEditorBlock.prototype, "uuid", void 0), __decorate([n({
-	type: String,
-	attribute: "cdn-url",
-	reflect: !0
-})], CloudImageEditorBlock.prototype, "cdnUrl", void 0), __decorate([n({
-	type: String,
-	attribute: "crop-preset",
-	reflect: !0
-})], CloudImageEditorBlock.prototype, "cropPreset", void 0), __decorate([n({
-	type: String,
-	reflect: !0
-})], CloudImageEditorBlock.prototype, "tabs", void 0), __decorate([r()], CloudImageEditorBlock.prototype, "_hasNetworkProblems", void 0), __decorate([r()], CloudImageEditorBlock.prototype, "_isInitialized", void 0);
-var CloudImageEditor = class extends CloudImageEditorBlock {
-	static {
-		this.styleAttrs = [...super.styleAttrs, "uc-wgt-common"];
-	}
-	constructor() {
-		super(), this.init$ = {
-			...this.init$,
-			"*solution": this.tagName
-		};
-	}
-	initCallback() {
-		super.initCallback(), this.telemetryManager.sendEvent({ eventType: InternalEventType.INIT_SOLUTION }), this.a11y?.registerBlock(this);
-	}
-};
-export { LineLoaderUi as _, EditorOperationControl as a, EditorAspectRatioButtonControl as c, SliderUi as d, EditorImageFader as f, o$2 as g, BtnUi as h, EditorScroller as i, EditorFreeformButtonControl as l, CropFrame as m, CloudImageEditorBlock as n, EditorFilterControl as o, EditorImageCropper as p, EditorToolbar as r, EditorCropButtonControl as s, CloudImageEditor as t, EditorSlider as u, PresenceToggle as v };