@uploadcare/file-uploader 1.27.0 → 1.28.0-alpha.0

package/dist/CloudImageEditor-BIxf1V4M.js

@@ -0,0 +1,2162 @@
+/**
+* @license
+* Package: @uploadcare/file-uploader@1.28.0-alpha.0 (MIT)
+* License: https://github.com/uploadcare/blob/main/LICENSE
+* Built: 2026-03-02T14:46:15.080Z
+*/
+import { $ as createCdnUrl, C as MIN_CROP_SIZE, D as THUMB_STROKE_WIDTH, E as THUMB_SIDE_SIZE, F as InternalEventType, G as ALL_FILTERS, J as TabId, K as ALL_TABS, S as MAX_INTERACTION_SIZE, T as THUMB_CORNER_SIZE, U as ALL_COLOR_OPERATIONS, W as ALL_CROP_OPERATIONS, X as operationsToTransformations, Y as COMMON_OPERATIONS, Z as transformationsToOperations, _ as sidePath, a as clamp, b as GUIDE_STROKE_WIDTH, c as createSvgNode, ct as __decorate, d as moveRect, et as createCdnUrlModifiers, f as rectContainsPoint, g as setSvgNodeAttrs, h as roundRect, j as LitBlock, l as isRectInsideRect, lt as debounce, m as rotateSize, n as getClosestAspectRatio, nt as extractOperations, o as constraintRect, ot as UID, p as resizeRect, q as COLOR_OPERATIONS_CONFIG, r as parseCropPreset, rt as extractUuid, s as cornerPath, tt as createOriginalUrl, u as isRectMatchesAspectRatio, v as thumbCursor, w as MIN_INTERACTION_SIZE, x as GUIDE_THIRD, y as CROP_PADDING } from "./Icon-CqTVC82Q.js";
+import { f as deserializeCsv, p as serializeCsv } from "./plugins-DxjsQUa8.js";
+import { n as PACKAGE_VERSION, t as PACKAGE_NAME } from "./env-B1nfXy9i.js";
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
+import { classMap } from "lit/directives/class-map.js";
+const throttle = (d, B) => {
+	let V = !1, H, U = 0, W = ((...W) => {
+		V ? (H && clearTimeout(H), H = setTimeout(() => {
+			Date.now() - U >= B && (d(...W), U = Date.now());
+		}, Math.max(B - (Date.now() - U), 0))) : (d(...W), U = Date.now(), V = !0);
+	});
+	return Object.defineProperty(W, "cancel", {
+		configurable: !1,
+		writable: !1,
+		enumerable: !1,
+		value: () => {
+			H && clearTimeout(H);
+		}
+	}), W;
+}, TRANSPARENT_PIXEL_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+function preloadImage(d) {
+	let B = new Image();
+	return {
+		promise: new Promise((V, H) => {
+			B.src = d, B.onload = () => V(), B.onerror = (d) => H(d);
+		}),
+		image: B,
+		cancel: () => {
+			B.naturalWidth === 0 && (B.src = TRANSPARENT_PIXEL_SRC);
+		}
+	};
+}
+function batchPreloadImages(d) {
+	let B = [];
+	for (let V of d) {
+		let d = preloadImage(V);
+		B.push(d);
+	}
+	let V = B.map((d) => d.image);
+	return {
+		promise: Promise.allSettled(B.map((d) => d.promise)),
+		images: V,
+		cancel: () => {
+			B.forEach((d) => {
+				d.cancel();
+			});
+		}
+	};
+}
+function normalize(...d) {
+	return d.reduce((d, B) => {
+		if (typeof B == "string") return d[B] = !0, d;
+		for (let V of Object.keys(B)) d[V] = B[V];
+		return d;
+	}, {});
+}
+function classNames(...d) {
+	let B = normalize(...d);
+	return Object.keys(B).reduce((d, V) => (B[V] && d.push(V), d), []).join(" ");
+}
+function applyClassNames(d, ...B) {
+	let V = normalize(...B);
+	for (let B of Object.keys(V)) d.classList.toggle(B, !!V[B]);
+}
+var isTabIdValue = (d) => ALL_TABS.includes(d);
+const parseTabs = (d) => {
+	if (!d) return ALL_TABS;
+	let B = deserializeCsv(d).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 d = B.querySelectorAll("img");
+			for (let B of d) {
+				let d = B.src;
+				B.src = TRANSPARENT_PIXEL_SRC, B.src = d;
+			}
+			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(...d) {
+		super(...d), 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(d) {
+		this._visible = d, this._handleVisible();
+	}
+	get visible() {
+		return this._visible;
+	}
+	set styles(d) {
+		this._styles = d, this._externalTransitions = !0, this._visibleStyle = d.visible ?? DEFAULT_STYLE.visible, this._hiddenStyle = d.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([property({ type: Boolean })], PresenceToggle.prototype, "visible", null), __decorate([property({ attribute: !1 })], PresenceToggle.prototype, "styles", null);
+var LineLoaderUi = class extends LitBlock {
+	constructor(...d) {
+		super(...d), this.active = !1, this._lineRef = createRef(), this._isAnimating = !1, this._handleTransitionEndRight = () => {
+			let d = this._lineRef.value;
+			d && (this._resetLine(d), this._isAnimating && this.active && this._start());
+		};
+	}
+	firstUpdated(d) {
+		super.firstUpdated(d), this.active && this._start();
+	}
+	updated(d) {
+		super.updated(d), d.has("active") && (this.active ? this._start() : this._stop());
+	}
+	_start() {
+		let d = this._lineRef.value;
+		if (!d) return;
+		this._isAnimating = !0;
+		let { width: B } = this.getBoundingClientRect();
+		d.removeEventListener("transitionend", this._handleTransitionEndRight), d.style.transition = "transform 1s", d.style.opacity = "1", d.style.transform = `translateX(${B}px)`, d.addEventListener("transitionend", this._handleTransitionEndRight, { once: !0 });
+	}
+	_stop() {
+		let d = this._lineRef.value;
+		d && (this._isAnimating = !1, d.removeEventListener("transitionend", this._handleTransitionEndRight), this._resetLine(d));
+	}
+	_resetLine(d) {
+		d.style.transition = "initial", d.style.opacity = "0", d.style.transform = "translateX(-101%)";
+	}
+	render() {
+		return html`
+      <div class="uc-inner">
+        <div class="uc-line" ${ref(this._lineRef)}></div>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: !0
+})], LineLoaderUi.prototype, "active", void 0);
+var BtnUi = class extends LitBlock {
+	constructor(...d) {
+		super(...d), this.text = "", this.icon = "", this.reverse = !1, this.theme = "default", this.ariaRole = void 0, this.ariaControls = "", this.titleProp = "", this.active = !1;
+	}
+	firstUpdated(d) {
+		super.firstUpdated(d), this._applyReverse(), this._applyThemeClass();
+	}
+	updated(d) {
+		super.updated(d), d.has("reverse") && this._applyReverse(), d.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 d = this._computedIconHidden;
+		return {
+			"uc-icon": !0,
+			"uc-icon_left": !this.reverse,
+			"uc-icon_right": this.reverse,
+			"uc-icon_hidden": d,
+			"uc-icon_single": this._computedIconSingle
+		};
+	}
+	get _computedIconHidden() {
+		return !this.icon;
+	}
+	get _computedIconSingle() {
+		return !this.text && !this._computedIconHidden;
+	}
+	render() {
+		return html`
+      <button
+        type="button"
+        role=${ifDefined(this.ariaRole || void 0)}
+        aria-controls=${ifDefined(this.ariaControls || void 0)}
+        aria-label=${ifDefined(this.l10n(this.titleProp))}
+        title=${ifDefined(this.l10n(this.titleProp))}
+      >
+        <uc-icon
+          class=${classMap(this._iconClassMap)}
+          name=${ifDefined(this.icon || void 0)}
+          ?hidden=${this._computedIconHidden}
+        ></uc-icon>
+        <div class="uc-text">${this.text}</div>
+      </button>
+    `;
+	}
+};
+__decorate([property({ type: String })], BtnUi.prototype, "text", void 0), __decorate([property({ type: String })], BtnUi.prototype, "icon", void 0), __decorate([property({
+	type: Boolean,
+	reflect: !0
+})], BtnUi.prototype, "reverse", void 0), __decorate([property({
+	type: String,
+	reflect: !0
+})], BtnUi.prototype, "theme", void 0), __decorate([property({ attribute: "aria-role" })], BtnUi.prototype, "ariaRole", void 0), __decorate([property({ attribute: "aria-controls" })], BtnUi.prototype, "ariaControls", void 0), __decorate([property({ attribute: "title-prop" })], BtnUi.prototype, "titleProp", void 0), __decorate([property({
+	type: Boolean,
+	noAccessor: !0
+})], BtnUi.prototype, "active", void 0);
+function pick(d, B) {
+	let V = {};
+	for (let H of B) {
+		let B = d[H];
+		(Object.hasOwn(d, 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(...d) {
+		super(...d), this._backdropMaskId = `uc-backdrop-mask-${UID.generateFastUid()}`, this._guidesHidden = !1, this._draggingValue = !1, this._svgRef = createRef(), this._svgReady = !1, this._pendingMaskHref = null, this._handlePointerUp = (d) => {
+			this._updateCursor(), this._dragging &&= (d.stopPropagation(), d.preventDefault(), !1);
+		}, this._handlePointerMove = (d) => {
+			if (!this._dragging || !this._dragStartPoint || !this._draggingThumb) return;
+			d.stopPropagation(), d.preventDefault();
+			let B = this._svgElement;
+			if (!B) return;
+			let { x: V, y: H } = B.getBoundingClientRect(), U = d.x - V, W = d.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 = (d) => {
+			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
+				}, [d.x, d.y]);
+			}), this._updateCursor());
+		};
+	}
+	get _svgElement() {
+		return this._svgRef.value ?? null;
+	}
+	get _dragging() {
+		return this._draggingValue;
+	}
+	set _dragging(d) {
+		this._draggingValue !== d && (this._draggingValue = d, 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(d) {
+		let B = this.$["*imageBox"];
+		if (!B) return !1;
+		if (d === "" && B.height <= 1 && B.width <= 1) return !0;
+		let V = B.height <= 1 && (d.includes("n") || d.includes("s")), H = B.width <= 1 && (d.includes("e") || d.includes("w"));
+		return V || H;
+	}
+	_createBackdrop() {
+		let d = this.$["*cropBox"];
+		if (!d) return;
+		let { x: B, y: V, width: H, height: U } = d, 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 d = this.$["*cropBox"];
+		if (!d) return;
+		let { x: B, y: V, width: H, height: U } = d;
+		this._backdropMaskInner && setSvgNodeAttrs(this._backdropMaskInner, {
+			x: B,
+			y: V,
+			width: H,
+			height: U
+		});
+	}
+	_updateFrame() {
+		let d = this.$["*cropBox"];
+		if (!(!d || !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 } = d;
+				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(d, V, B) : sidePath(d, 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: d.x - 1 * .5,
+				y: d.y - 1 * .5,
+				width: d.width + 1,
+				height: d.height + 1
+			});
+		}
+	}
+	_createThumb(d, 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), d[B] = {
+			direction: B,
+			pathNode: U,
+			interactionNode: H,
+			groupNode: V
+		}, B === "" && (V.style.cursor = "move"), H.addEventListener("pointerdown", this._handlePointerDown.bind(this, B));
+	}
+	_createThumbs() {
+		let d = {};
+		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(d, H);
+		}
+		return this._createThumb(d, ""), d;
+	}
+	_createGuides() {
+		let d = createSvgNode("svg"), B = createSvgNode("rect", {
+			x: 0,
+			y: 0,
+			width: "100%",
+			height: "100%",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": 1,
+			"stroke-opacity": .5
+		});
+		d.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
+			});
+			d.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
+			});
+			d.appendChild(V);
+		}
+		return d.classList.add("uc-guides", "uc-guides--semi-hidden"), d;
+	}
+	_createFrame() {
+		let d = this._svgElement;
+		if (!d) return;
+		let B = document.createDocumentFragment(), V = this._createGuides();
+		B.appendChild(V);
+		let H = this._createThumbs();
+		for (let { groupNode: d } of Object.values(H)) B.appendChild(d);
+		d.appendChild(B), this._frameThumbs = H, this._frameGuides = V, this._applyGuidesDragState();
+	}
+	_handlePointerDown(d, B) {
+		if (!this._frameThumbs) return;
+		let V = this._frameThumbs[d];
+		if (!V || this._shouldThumbBeDisabled(d)) 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(d, 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 = d === "" ? moveRect({
+			rect: W,
+			delta: [V, H],
+			imageBox: U
+		}) : resizeRect({
+			rect: W,
+			delta: [V, H],
+			direction: d,
+			aspectRatio: K,
+			imageBox: U
+		}), !Object.values(W).every((d) => Number.isFinite(d) && d >= 0)) {
+			console.error("CropFrame is trying to create invalid rectangle", { payload: W });
+			return;
+		}
+		return constraintRect(roundRect(W), U);
+	}
+	_updateCursor() {
+		let d = this._hoverThumb, B = this._svgElement;
+		B && (B.style.cursor = d ? thumbCursor(d.direction) : "initial");
+	}
+	_createMask(d) {
+		if (this._frameImage) {
+			this._frameImage.setAttribute("href", d);
+			return;
+		}
+		let B = this._svgElement;
+		if (!B) {
+			this._pendingMaskHref = d;
+			return;
+		}
+		this._pendingMaskHref = null;
+		let V = document.createDocumentFragment(), H = createSvgNode("image", { href: d });
+		H.setAttribute("class", "uc-cloud-mask"), V.appendChild(H), B.appendChild(V), this._frameImage = H;
+	}
+	_updateMask() {
+		let d = this.$["*cropBox"];
+		if (!d || !this._frameImage) return;
+		let { x: B, y: V, width: H, height: U } = d;
+		setSvgNodeAttrs(this._frameImage, {
+			x: B,
+			y: V,
+			height: U,
+			width: H
+		});
+	}
+	_render() {
+		this._svgReady && (this._updateBackdrop(), this._updateFrame(), this._updateMask());
+	}
+	toggleThumbs(d) {
+		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": !d,
+				"uc-thumb--visible": d
+			}));
+		}
+	}
+	initCallback() {
+		super.initCallback(), this.sub("*imageBox", () => {
+			this._resizeBackdrop(), this._svgReady && window.requestAnimationFrame(() => {
+				this._render();
+			});
+		}), this.sub("*cropBox", (d) => {
+			d && (this._guidesHidden = d.height <= 1 || d.width <= 1, this._applyGuidesDragState(), this._svgReady && window.requestAnimationFrame(() => {
+				this._render();
+			}));
+		}), this.subConfigValue("cloudImageEditorMaskHref", (d) => {
+			d && this._createMask(d);
+		}), document.addEventListener("pointermove", this._handlePointerMove, !0), document.addEventListener("pointerup", this._handlePointerUp, !0);
+	}
+	firstUpdated(d) {
+		super.firstUpdated(d), this._initializeSvg();
+	}
+	_initializeSvg() {
+		let d = this._svgElement;
+		if (!(!d || this._svgReady)) {
+			if (this._createBackdrop(), this._createFrame(), this._svgReady = !0, d.addEventListener("pointermove", this._handleSvgPointerMove, !0), this._pendingMaskHref) {
+				let d = this._pendingMaskHref;
+				this._pendingMaskHref = null, this._createMask(d);
+			}
+			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 html`<svg class="uc-svg" xmlns="http://www.w3.org/2000/svg" ${ref(this._svgRef)}></svg>`;
+	}
+};
+__decorate([state()], CropFrame.prototype, "_draggingValue", void 0);
+function validateCrop(d) {
+	return d ? [({ dimensions: d, coords: B }) => [...d, ...B].every((d) => Number.isInteger(d) && Number.isFinite(d)), ({ dimensions: d, coords: B }) => d.every((d) => d > 0) && B.every((d) => d >= 0)].every((B) => B(d)) : !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 = createRef(), this._frameRef = createRef(), 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(d) {
+		super.firstUpdated(d), this._initCanvas();
+	}
+	_syncTransformations() {
+		let d = this.$["*editorTransformations"], B = pick(d, Object.keys(this.$["*operations"])), V = {
+			...this.$["*operations"],
+			...B
+		};
+		this.$["*operations"] = V;
+	}
+	_initCanvas() {
+		let d = this._canvasRef.value;
+		if (!d) return;
+		let B = d.getContext("2d"), V = this.offsetWidth, H = this.offsetHeight, U = window.devicePixelRatio;
+		d.style.width = `${V}px`, d.style.height = `${H}px`, d.width = V * U, d.height = H * U, B?.scale(U, U), this._canvas = d, this._ctx = B;
+	}
+	_alignImage() {
+		if (!this._isActive || !this._image) return;
+		let d = this._image, B = this.$["*padding"], { rotate: V } = this.$["*operations"], H = {
+			width: this.offsetWidth,
+			height: this.offsetHeight
+		}, U = rotateSize({
+			width: d.naturalWidth,
+			height: d.naturalHeight
+		}, V), W;
+		if (U.width > H.width - B * 2 || U.height > H.height - B * 2) {
+			let d = U.width / U.height;
+			if (d > H.width / H.height) {
+				let V = H.width - B * 2, U = V / d;
+				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 * d;
+				W = {
+					x: B + (H.width - B * 2) / 2 - U / 2,
+					y: 0 + B,
+					width: U,
+					height: V
+				};
+			}
+		} else {
+			let { width: d, height: V } = U;
+			W = {
+				x: B + (H.width - B * 2) / 2 - d / 2,
+				y: B + (H.height - B * 2) / 2 - V / 2,
+				width: d,
+				height: V
+			};
+		}
+		this.$["*imageBox"] = roundRect(W);
+	}
+	_alignCrop() {
+		let d = 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;
+			d = 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(d, B) || q && !isRectMatchesAspectRatio(d, 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)), d = {
+				x: B.x + B.width / 2 - H / 2,
+				y: B.y + B.height / 2 - U / 2,
+				width: H,
+				height: U
+			};
+		}
+		this.$["*cropBox"] = constraintRect(roundRect(d), B);
+	}
+	_drawImage() {
+		let d = this._ctx;
+		if (!d) 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);
+		d.save(), d.translate(V.x + V.width / 2, V.y + V.height / 2), d.rotate(W * Math.PI * -1 / 180), d.scale(H ? -1 : 1, U ? -1 : 1), d.drawImage(B, -G.width / 2, -G.height / 2, G.width, G.height), d.restore();
+	}
+	_draw() {
+		if (!this._isActive || !this._image || !this._canvas || !this._ctx) return;
+		let d = this._canvas;
+		this._ctx.clearRect(0, 0, d.width, d.height), this._drawImage();
+	}
+	_animateIn({ fromViewer: d }) {
+		this._image && (this._frameRef.value?.toggleThumbs(!0), this._transitionToImage(), setTimeout(() => {
+			this.className = classNames({
+				"uc-active_from_viewer": d,
+				"uc-active_from_editor": !d,
+				"uc-inactive_to_editor": !1
+			});
+		}));
+	}
+	_getCropDimensions() {
+		let d = 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 } = d, J = H / W, Y = U / G;
+		return [clamp(Math.round(K / J), 1, W), clamp(Math.round(q / Y), 1, G)];
+	}
+	_getCropTransformation() {
+		let d = 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 } = d, 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: d, mirror: B, flip: V } = this.$["*operations"], H = this._getCropTransformation(), U = {
+			...this.$["*editorTransformations"],
+			crop: H,
+			rotate: d,
+			mirror: B,
+			flip: V
+		};
+		this.$["*editorTransformations"] = U;
+	}
+	setValue(d, B) {
+		this.$["*operations"] = {
+			...this.$["*operations"],
+			[d]: B
+		}, this._isActive && (this._alignImage(), this._alignCrop(), this._draw());
+	}
+	getValue(d) {
+		return this.$["*operations"][d];
+	}
+	async activate(d, { fromViewer: B } = {}) {
+		if (!this._isActive) {
+			this._isActive = !0, await this.updateComplete, this._initCanvas(), this._imageSize = d, this.removeEventListener("transitionend", this._reset);
+			try {
+				let d = this.$["*originalUrl"], V = this.$["*editorTransformations"];
+				this._image = await this._waitForImage(d, V), this._syncTransformations(), this._handleResizeThrottled(), this._animateIn({ fromViewer: B });
+			} catch (d) {
+				console.error("Failed to activate cropper", { error: d }), this.telemetryManager.sendEventError(d, "cloud editor image. Failed to activate cropper");
+			}
+			this._observer = new ResizeObserver((d) => {
+				let [B] = d;
+				B && B.contentRect.width > 0 && B.contentRect.height > 0 && this._isActive && this._image && this._handleResizeThrottled();
+			}), this._observer.observe(this);
+		}
+	}
+	deactivate({ reset: d = !1 } = {}) {
+		this._isActive && (!d && 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 d = this._getCropDimensions(), B = this.$["*cropBox"], V = Math.min(this.offsetWidth, d[0]) / B.width, H = Math.min(this.offsetHeight, d[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 d = this.$["*cropBox"], B = d.x + d.width / 2, V = d.y + d.height / 2;
+		this.style.transform = "scale(1)", this.style.transformOrigin = `${B}px ${V}px`;
+	}
+	_reset() {
+		this._isActive || (this._image = null);
+	}
+	async _waitForImage(d, 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(d, 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((d) => (console.error("Failed to load image", { error: d }), this.$["*networkProblems"] = !0, G));
+	}
+	_handleImageLoading(d) {
+		let B = "crop", V = this.$["*loadingOperations"], H = V.get(B);
+		return H || (H = /* @__PURE__ */ new Map(), V.set(B, H)), H.get(d) || (H.set(d, !0), this.$["*loadingOperations"] = V), () => {
+			let H = V.get(B);
+			H?.has(d) && (H.delete(d), 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", (d) => {
+				d || this._isActive && this._imageSize && this.activate(this._imageSize, { fromViewer: !1 });
+			});
+		}, 0);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._observer?.disconnect(), this._image &&= null;
+	}
+	render() {
+		return html`
+      <canvas class="uc-canvas" ${ref(this._canvasRef)}></canvas>
+      <uc-crop-frame ${ref(this._frameRef)}></uc-crop-frame>
+    `;
+	}
+};
+__decorate([state()], EditorImageCropper.prototype, "_image", void 0);
+function linspace(d, 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) * d) / U);
+	return W;
+}
+function isOperationKey(d) {
+	return typeof d == "string" && d in COLOR_OPERATIONS_CONFIG;
+}
+function splitBySections(d) {
+	let B = [];
+	for (let V = 0; V < d.length - 1; V += 1) {
+		let H = d[V], U = d[V + 1];
+		typeof H == "number" && typeof U == "number" && B.push([H, U]);
+	}
+	return B;
+}
+function calculateOpacities(d, B, V) {
+	let H = splitBySections(d).find(([d, V]) => d <= B && B <= V);
+	if (!H) return d.map(() => 0);
+	let [U, W] = H;
+	return d.map((d) => {
+		let H = Math.abs(U - W) || 1, G = Math.abs(B - U) / H;
+		return U === d ? B > V ? 1 : 1 - G : W === d ? B >= V ? G : 1 : 0;
+	});
+}
+function calculateZIndices(d, B) {
+	return d.map((V, H) => V < B ? d.length - H : H);
+}
+function keypointsRange(d, B) {
+	let V = COLOR_OPERATIONS_CONFIG[d].keypointsNumber, { range: H, zero: U } = COLOR_OPERATIONS_CONFIG[d];
+	return [...new Set([
+		...linspace(H[0], U, V + 1),
+		...linspace(U, H[1], V + 1),
+		U,
+		B
+	])].sort((d, B) => d - 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 = createRef(), this._layersHostRef = createRef(), this.classList.add("uc-inactive_to_cropper"), this._addKeypointDebounced = debounce(async (d, B, V) => {
+			let H = () => !this._isSame(d, B) || this._value !== V || !!this._keypoints.find((d) => d.value === V);
+			if (H()) return;
+			let U = await this._constructKeypoint(d, 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((d) => d.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(d, V));
+			}, { once: !0 }), W.addEventListener("error", () => {
+				this.$["*networkProblems"] = !0;
+			}, { once: !0 });
+		}, 600);
+	}
+	_handleImageLoading(d) {
+		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(d) && (H.set(d, !0), this.$["*loadingOperations"] = V), () => {
+			let H = V.get(B);
+			H?.has(d) && (H.delete(d), this.$["*loadingOperations"] = V);
+		};
+	}
+	_flush() {
+		window.cancelAnimationFrame(this._raf), this._raf = window.requestAnimationFrame(() => {
+			for (let d of this._keypoints) {
+				let { image: B } = d;
+				B && (B.style.opacity = d.opacity.toString(), B.style.zIndex = d.zIndex.toString());
+			}
+		});
+	}
+	_imageSrc({ url: d = this._url, filter: B = this._filter ?? void 0, operation: V, value: H } = {}) {
+		if (!d) 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(d, W, U));
+	}
+	async _constructKeypoint(d, B) {
+		return {
+			src: await this._imageSrc({
+				operation: d,
+				value: B
+			}),
+			image: void 0,
+			opacity: 0,
+			zIndex: 0,
+			value: B
+		};
+	}
+	_isSame(d, B) {
+		return this._operation === d && this._filter === B;
+	}
+	set(d) {
+		let B = typeof d == "string" ? parseInt(d, 10) : d;
+		!isOperationKey(this._operation) || !Number.isFinite(B) || (this._update(this._operation, B), this._addKeypointDebounced(this._operation, this._filter, B));
+	}
+	_update(d, B) {
+		this._operation = d, this._value = B;
+		let { zero: V } = COLOR_OPERATIONS_CONFIG[d], H = this._keypoints.map((d) => d.value), U = calculateOpacities(H, B, V), W = calculateZIndices(H, V);
+		this._keypoints.forEach((d, B) => {
+			let V = U[B], H = W[B];
+			typeof V == "number" && (d.opacity = V), typeof H == "number" && (d.zIndex = H);
+		}), this._flush();
+	}
+	_createPreviewImage() {
+		let d = new Image();
+		return d.classList.add("uc-fader-image", "uc-fader-image--preview"), d.style.opacity = "0", d;
+	}
+	async _initNodes() {
+		this._previewImage = this._previewImage || this._createPreviewImage();
+		let d = this._previewImage;
+		d && this._ensurePreviewAttached(d);
+		let { images: B, promise: V, cancel: H } = batchPreloadImages(this._keypoints.map((d) => d.src));
+		B.forEach((d) => {
+			let B = this._handleImageLoading(d.src);
+			d.addEventListener("load", B), d.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 d = this._layersHostRef.value;
+			if (!d) return;
+			d.replaceChildren(), this._keypoints.forEach((V, H) => {
+				let U = B[H];
+				U && (U.classList.add("uc-fader-image"), V.image = U, d.appendChild(U));
+			}), this._flush();
+		}
+	}
+	async setTransformations(d) {
+		if (this._transformations = d, this._previewImage) {
+			let d = await this._imageSrc(), B = this._handleImageLoading(d);
+			this._previewImage.src = d, 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: d, 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: d,
+			filter: B,
+			operation: V,
+			value: H
+		}))));
+		this._cancelBatchPreload = W;
+	}
+	_setOriginalSrc(d) {
+		let B = this._previewImage || this._createPreviewImage();
+		if (this._ensurePreviewAttached(B), this._previewImage = B, B.src === d) {
+			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(d);
+		B.addEventListener("error", V, { once: !0 }), B.src = d, 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: d, operation: B, value: V, filter: H, fromViewer: U }) {
+		if (this._isActive = !0, this._hidden = !1, await this.updateComplete, this._url = d, this._operation = B ?? "initial", this._value = V, this._filter = H, this._fromViewer = U, typeof V != "number" && !H) {
+			let d = await this._imageSrc({
+				operation: B,
+				value: V
+			});
+			this._setOriginalSrc(d), this._clearLayersHost();
+			return;
+		}
+		!B || typeof V != "number" || (this._keypoints = await Promise.all(keypointsRange(B, V).map((d) => this._constructKeypoint(B, d))), this._update(B, V), this._initNodes());
+	}
+	deactivate({ hide: d = !0 } = {}) {
+		this._isActive = !1, this._cancelLastImages?.(), this._cancelBatchPreload?.(), d && !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(d) {
+		let B = this._previewHostRef.value;
+		B && (B.contains(d) || B.appendChild(d));
+	}
+	_clearLayersHost() {
+		this._layersHostRef.value?.replaceChildren();
+	}
+	render() {
+		return html`
+      <div class="uc-fader-preview-host" ${ref(this._previewHostRef)}></div>
+      <div class="uc-fader-layers-host" ${ref(this._layersHostRef)}></div>
+    `;
+	}
+}, SliderUi = class extends LitBlock {
+	constructor() {
+		super(), this._thumbSize = 0, this._inputRef = createRef(), this._thumbRef = createRef(), this._stepsRef = createRef(), this.disabled = !1, this.min = 0, this.max = 100, this.defaultValue = 0, this.zero = 0, this._currentValue = 0, this._handleSliderInput = (d) => {
+			d.stopPropagation();
+			let B = this._extractEventValue(d);
+			B !== null && (this._setCurrentValue(B), this._emitSliderEvent("slider-input", B));
+		}, this._handleSliderChange = (d) => {
+			d.stopPropagation();
+			let B = this._extractEventValue(d);
+			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(d, B) {
+		this.dispatchEvent(new CustomEvent(d, {
+			detail: { value: B },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	firstUpdated(d) {
+		super.firstUpdated(d), 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(d) {
+		super.willUpdate(d), d.has("defaultValue") && this.defaultValue !== this._currentValue && this._setCurrentValue(this.defaultValue), (d.has("min") || d.has("max")) && this.hasUpdated && (this._updateSteps(), this._updateValue(this._currentValue)), d.has("zero") && this.hasUpdated && this._updateZeroDot(this._currentValue);
+	}
+	_updateValue(d) {
+		this._updateZeroDot(d);
+		let B = this.max - this.min;
+		if (B === 0) return;
+		let { width: V } = this.getBoundingClientRect(), H = 100 / B * (d - this.min) * (V - this._thumbSize) / 100;
+		window.requestAnimationFrame(() => {
+			let d = this._thumbRef.value;
+			d && (d.style.transform = `translateX(${H}px)`);
+		});
+	}
+	_updateZeroDot(d) {
+		if (!this._zeroDotEl) return;
+		let B = this.max - this.min;
+		if (B === 0) return;
+		this._zeroDotEl.style.opacity = d === 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 d = this._stepsRef.value;
+		if (!d) return;
+		let { width: B } = d.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 d = 0; d < H; d += 1) U.appendChild(W.cloneNode());
+		U.appendChild(G.cloneNode());
+		for (let d = 0; d < H; d += 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, d.innerHTML = "", d.appendChild(U), this._stepsCount = H;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		let d = this._inputRef.value;
+		d?.removeEventListener("focus", this._handleInputFocus), d?.removeEventListener("blur", this._handleInputBlur), this._observer?.disconnect(), this._observer = void 0;
+	}
+	_setCurrentValue(d) {
+		Number.isFinite(d) && (this._currentValue = d, this.hasUpdated && (this._syncInputValue(d), this._updateValue(d)));
+	}
+	_syncInputValue(d) {
+		let B = this._inputRef.value;
+		B && (B.value = String(d));
+	}
+	_extractEventValue(d) {
+		let B = d.currentTarget;
+		if (!B) return null;
+		let V = Number.parseInt(B.value, 10);
+		return Number.isFinite(V) ? V : null;
+	}
+	render() {
+		return html`
+      <div class="uc-steps" ${ref(this._stepsRef)}></div>
+      <div class="uc-thumb" ${ref(this._thumbRef)}></div>
+      <input
+        class="uc-input"
+        type="range"
+        ${ref(this._inputRef)}
+        .min=${String(this.min)}
+        .max=${String(this.max)}
+        .value=${String(this._currentValue)}
+        ?disabled=${this.disabled}
+        @input=${this._handleSliderInput}
+        @change=${this._handleSliderChange}
+      />
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: !0
+})], SliderUi.prototype, "disabled", void 0), __decorate([property({ type: Number })], SliderUi.prototype, "min", void 0), __decorate([property({ type: Number })], SliderUi.prototype, "max", void 0), __decorate([property({
+	type: Number,
+	attribute: !1
+})], SliderUi.prototype, "defaultValue", void 0), __decorate([property({ type: Number })], SliderUi.prototype, "zero", void 0), __decorate([state()], SliderUi.prototype, "_currentValue", void 0);
+const FAKE_ORIGINAL_FILTER = "original";
+var EditorSlider = class extends LitBlock {
+	constructor(...d) {
+		super(...d), this.state = {
+			operation: "filter",
+			filter: void 0,
+			originalUrl: "",
+			disabled: !1,
+			min: 0,
+			max: 100,
+			value: 0,
+			defaultValue: 0,
+			zero: 0
+		}, this._handleInput = (d) => {
+			let { value: B } = d.detail;
+			this.$["*faderEl"]?.set(B), this.state = {
+				...this.state,
+				value: B
+			};
+		};
+	}
+	setOperation(d, B) {
+		this.state = {
+			...this.state,
+			operation: d,
+			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 d = this.state.operation, { range: B, zero: V } = COLOR_OPERATIONS_CONFIG[d], [H, U] = B;
+		this.state = {
+			...this.state,
+			min: H,
+			max: U,
+			zero: V
+		};
+		let W = this.$["*editorTransformations"][d];
+		if (d === "filter") {
+			let d = Number(U), B = W;
+			if (B) {
+				let { name: V, amount: H } = B;
+				d = V === this.state.filter ? H : U;
+			}
+			this.state = {
+				...this.state,
+				value: d,
+				defaultValue: d
+			};
+			return;
+		}
+		let G = W === void 0 ? V : W;
+		this.state = {
+			...this.state,
+			value: G,
+			defaultValue: G
+		};
+	}
+	apply() {
+		let d = { ...this.$["*editorTransformations"] };
+		this.state.operation === "filter" ? !this.state.filter || this.state.filter === "original" ? delete d.filter : d.filter = {
+			name: this.state.filter,
+			amount: this.state.value
+		} : d[this.state.operation] = this.state.value, this.$["*editorTransformations"] = d;
+	}
+	cancel() {
+		this.$["*faderEl"]?.deactivate({ hide: !1 });
+	}
+	initCallback() {
+		super.initCallback(), this.sub("*originalUrl", (d) => {
+			d && (this.state = {
+				...this.state,
+				originalUrl: d
+			});
+		});
+	}
+	updated(d) {
+		if (super.updated(d), d.has("state")) {
+			let d = `${this.state.filter ?? this.state.operation} ${this.state.value}`;
+			this.$["*operationTooltip"] = d;
+		}
+	}
+	render() {
+		return html`
+      <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([state()], EditorSlider.prototype, "state", void 0);
+function parseFilterValue(d) {
+	if (!d) return null;
+	let B = d.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(...d) {
+		super(...d), this.active = !1, this.title = "", this.icon = "", this.titleProp = "";
+	}
+	get buttonClasses() {
+		let d = this.active;
+		return {
+			"uc-active": d,
+			"uc-not_active": !d
+		};
+	}
+	_updateHostStateClasses() {
+		let d = this.buttonClasses;
+		for (let [B, V] of Object.entries(d)) this.classList.toggle(B, V);
+	}
+	onClick(d) {}
+	connectedCallback() {
+		super.connectedCallback(), this._updateHostStateClasses();
+	}
+	updated(d) {
+		super.updated(d), d.has("active") && this._updateHostStateClasses();
+	}
+	render() {
+		let d = this.onClick, B = this.title;
+		return html`
+      <button
+        role="option"
+        type="button"
+        aria-label=${ifDefined(this.titleProp)}
+        title=${ifDefined(this.titleProp)}
+        @click=${d}
+      >
+        <uc-icon name=${this.icon}></uc-icon>
+        <div class="uc-title" ?hidden=${!B}>${B}</div>
+      </button>
+    `;
+	}
+};
+__decorate([state()], EditorButtonControl.prototype, "active", void 0), __decorate([state()], EditorButtonControl.prototype, "title", void 0), __decorate([state()], EditorButtonControl.prototype, "icon", void 0), __decorate([state()], EditorButtonControl.prototype, "titleProp", void 0);
+var SIZE_RECT_FIXED = 12, SIZE_SVG_WRAPPER = 16, getAdjustResolutions = (d) => {
+	let B = 12, V = 12;
+	return d.width / d.height >= 1 ? (B = SIZE_RECT_FIXED, V = Math.round(SIZE_RECT_FIXED * d.height / d.width)) : (V = SIZE_RECT_FIXED, B = Math.round(SIZE_RECT_FIXED * d.width / d.height)), {
+		width: B,
+		height: V
+	};
+}, EditorFreeformButtonControl = class extends EditorButtonControl {
+	initCallback() {
+		super.initCallback(), this.icon = "arrow-dropdown", this.sub("*currentAspectRatio", (d) => {
+			let B = this._computeTitle(d);
+			this.title = B, this.titleProp = B;
+		});
+	}
+	onClick() {
+		this.$["*showListAspectRatio"] = !0;
+	}
+	_computeTitle(d) {
+		return d ? d.hasFreeform ? this.l10n("freeform-crop") : this.l10n("crop-to-shape", { value: `${d.width}:${d.height}` }) : "";
+	}
+	render() {
+		let d = this.onClick, B = this.title;
+		return html`
+      <button
+        role="option"
+        type="button"
+        class=${classMap(this.buttonClasses)}
+        aria-label=${ifDefined(this.titleProp)}
+        title=${ifDefined(this.titleProp)}
+        @click=${d}
+      >
+        <div class="uc-title" ?hidden=${!B}>${B}</div>
+        <uc-icon name=${this.icon}></uc-icon>
+      </button>
+    `;
+	}
+}, EditorAspectRatioButtonControl = class extends EditorButtonControl {
+	constructor(...d) {
+		super(...d), this._aspectRatio = null;
+	}
+	get aspectRatio() {
+		return this._aspectRatio;
+	}
+	set aspectRatio(d) {
+		if (this._aspectRatio === d) return;
+		let B = this._aspectRatio;
+		this._aspectRatio = d, this.requestUpdate("aspectRatio", B), d ? this._updateAspectRatioPresentation(d) : (this.removeAttribute("uc-aspect-ratio-freeform"), this.title = "", this.titleProp = "");
+	}
+	initCallback() {
+		super.initCallback(), this._aspectRatio && this._updateAspectRatioPresentation(this._aspectRatio), this.sub("*currentAspectRatio", (d) => {
+			this.active = d && d.id === this._aspectRatio?.id || d?.width === this._aspectRatio?.width && d?.height === this._aspectRatio?.height;
+		});
+	}
+	onClick() {
+		this.$["*currentAspectRatio"]?.id !== this._aspectRatio?.id && (this.$["*currentAspectRatio"] = this._aspectRatio);
+	}
+	_updateAspectRatioPresentation(d) {
+		if (!this.isConnected) return;
+		let B = !!d.hasFreeform;
+		this.toggleAttribute("uc-aspect-ratio-freeform", B), (() => {
+			let V = B ? this.l10n("custom") : `${d.width}:${d.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: `${d.width}:${d.height}` }).toLowerCase(),
+				value: ""
+			});
+			return this.titleProp = V, V;
+		})(), B || this.requestUpdate();
+	}
+	_renderIcon() {
+		let d = this._aspectRatio;
+		if (!d || d.hasFreeform) return html`<uc-icon name=${this.icon}></uc-icon>`;
+		let { width: B, height: V } = getAdjustResolutions(d);
+		return html`
+      <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 d = this.onClick, B = this.title;
+		return html`
+      <button
+        role="option"
+        type="button"
+        class=${classMap(this.buttonClasses)}
+        aria-label=${ifDefined(this.titleProp)}
+        title=${ifDefined(this.titleProp)}
+        @click=${d}
+      >
+        ${this._renderIcon()}
+        <div class="uc-title" ?hidden=${!B}>${B}</div>
+      </button>
+    `;
+	}
+};
+__decorate([property({ attribute: !1 })], EditorAspectRatioButtonControl.prototype, "aspectRatio", null);
+function nextAngle(d) {
+	let B = d + 90;
+	return B = B >= 360 ? 0 : B, B;
+}
+function nextValue(d, B) {
+	if (d === "rotate") return nextAngle(typeof B == "number" ? B : 0);
+	if (d === "mirror" || d === "flip") return !B;
+	throw Error(`Unsupported operation: ${d}`);
+}
+var EditorCropButtonControl = class extends EditorButtonControl {
+	constructor(...d) {
+		super(...d), this.operation = void 0;
+	}
+	willUpdate(d) {
+		super.willUpdate(d), 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(d) {
+		if (!this.operation) return;
+		let B = this.$["*cropperEl"], V = B.getValue(this.operation), H = nextValue(this.operation, V);
+		this.telemetryManager.sendEventCloudImageEditor(d, this.$["*tabId"], {
+			operation: this.operation,
+			next: H,
+			prev: V
+		}), B.setValue(this.operation, H);
+	}
+};
+__decorate([property({ type: String })], EditorCropButtonControl.prototype, "operation", void 0);
+var EditorFilterControl = class extends EditorButtonControl {
+	constructor(...d) {
+		super(...d), 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(d) {
+		let B = d ?? "";
+		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(d) {
+		if (this.active) this.isOriginal || (this.$["*sliderEl"].setOperation(this._operation, this._filter), this.$["*showSlider"] = !0);
+		else {
+			let d = this.$["*sliderEl"];
+			d.setOperation(this._operation, this._filter), d.apply();
+		}
+		this.telemetryManager.sendEventCloudImageEditor(d, 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(d, B) {
+		d[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", (d) => {
+			this._originalUrl = d ?? "", !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", (d) => {
+			this.active = !!(d && d === this._filter);
+		}), this.sub("*networkProblems", async (d) => {
+			d || (this._previewImage ? await this._loadPreview() : this._schedulePreviewVisibilityCheck());
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._observer?.disconnect(), this._cancelPreload?.(), this._clearPreviewVisibilityChecks();
+	}
+	updated(d) {
+		super.updated(d), d.has("isOriginal") && (this.isOriginal ? this._observer?.unobserve(this) : (this._observer?.observe(this), this._schedulePreviewVisibilityCheck()));
+	}
+	_updateFilterLabels(d) {
+		if (!d) {
+			this.titleProp = "";
+			return;
+		}
+		this.titleProp = this.l10n("a11y-cloud-editor-apply-filter", { name: d.toLowerCase() });
+	}
+	async _loadPreview(d) {
+		if (!this.isConnected) {
+			d?.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 (d) {
+			this.$["*networkProblems"] = !0, console.error("Failed to resolve preview URL", { error: d });
+			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(), (d ?? this._observer)?.unobserve(this);
+		} catch (d) {
+			this.$["*networkProblems"] = !0, console.error("Failed to load image", { error: d }), 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 d = this.getBoundingClientRect(), B = d.width > 0 && d.height > 0, V = window.innerWidth || document.documentElement.clientWidth, H = window.innerHeight || document.documentElement.clientHeight;
+			if (B && d.bottom > 0 && d.right > 0 && d.top < H && d.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 d = 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 html`
+      <button
+        role="option"
+        type="button"
+        class=${classMap(this.buttonClasses)}
+        aria-label=${ifDefined(this.titleProp)}
+        title=${ifDefined(this.titleProp)}
+        @click=${d}
+      >
+        <div class="uc-preview" ?data-loaded=${this._previewLoaded} style=${styleMap(B)}></div>
+        <uc-icon
+          class=${classMap({ "uc-original-icon": this.isOriginal })}
+          name=${this.icon}
+          style=${styleMap(V)}
+        ></uc-icon>
+      </button>
+    `;
+	}
+};
+__decorate([state()], EditorFilterControl.prototype, "_previewImage", void 0), __decorate([state()], EditorFilterControl.prototype, "_previewLoaded", void 0), __decorate([state()], EditorFilterControl.prototype, "isOriginal", void 0), __decorate([state()], EditorFilterControl.prototype, "_iconSize", void 0), __decorate([property({ type: String })], EditorFilterControl.prototype, "filter", null);
+var EditorOperationControl = class extends EditorButtonControl {
+	constructor(...d) {
+		super(...d), this._operation = "";
+	}
+	get operation() {
+		return this._operation;
+	}
+	set operation(d) {
+		let B = d ?? "";
+		if (this._operation === B) return;
+		let V = this._operation;
+		this._operation = B, this.requestUpdate("operation", V), this.isConnected && B && this._updateOperationMetadata(B);
+	}
+	_updateOperationMetadata(d) {
+		this.icon = d, (() => {
+			let B = this.l10n("a11y-cloud-editor-apply-tuning", { name: this.l10n(d).toLowerCase() });
+			return this.titleProp = B, B;
+		})(), (() => {
+			let B = this.l10n(d);
+			return this.title = B, B;
+		})();
+	}
+	initCallback() {
+		super.initCallback(), this._operation && this._updateOperationMetadata(this._operation), this.sub("*editorTransformations", (d) => {
+			if (!this._operation) return;
+			let { zero: B } = COLOR_OPERATIONS_CONFIG[this._operation], V = d[this._operation];
+			this.active = V === void 0 ? !1 : V !== B;
+		});
+	}
+	onClick(d) {
+		this.$["*sliderEl"]?.setOperation(this._operation), this.$["*showSlider"] = !0, this.$["*currentOperation"] = this._operation, this.telemetryManager.sendEventCloudImageEditor(d, this.$["*tabId"], { operation: parseFilterValue(this.$["*operationTooltip"]) });
+	}
+};
+__decorate([property({ type: String })], EditorOperationControl.prototype, "operation", null);
+var X_THRESHOLD = 1, noopScrollListener = () => {}, EditorScroller = class extends LitBlock {
+	constructor(...d) {
+		super(...d), this.hiddenScrollbar = !1, this._handleWheel = (d) => {
+			d.preventDefault();
+			let { deltaY: B, deltaX: V } = d;
+			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([property({
+	type: Boolean,
+	noAccessor: !0,
+	attribute: "hidden-scrollbar"
+})], EditorScroller.prototype, "hiddenScrollbar", void 0);
+var EditorToolbar = class extends LitBlock {
+	constructor(...d) {
+		super(...d), 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 = createRef(), this._tabIndicatorRef = createRef(), this.tabToggleRefs = {
+			[TabId.CROP]: createRef(),
+			[TabId.TUNING]: createRef(),
+			[TabId.FILTERS]: createRef()
+		}, this._handleWindowResize = () => {
+			this._syncTabIndicator();
+		}, this._cropPresets = [], this._debouncedShowLoader = debounce((d) => {
+			this._showLoader = d;
+		}, 500), this._updateInfoTooltip = debounce(() => {
+			let d = this.$["*editorTransformations"], B = this.$["*currentOperation"], V = "", H = !1;
+			if (this.$["*tabId"] === TabId.FILTERS) if (H = !0, this.$["*currentFilter"] && d?.filter?.name === this.$["*currentFilter"]) {
+				let B = d?.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 = d?.[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 = (d) => {
+			this.telemetryManager.sendEventCloudImageEditor(d, this.$["*tabId"], { action: "cancel" }), this._cancelPreload?.();
+			let B = this.$["*on.cancel"];
+			B?.();
+		}, this._handleApply = (d) => {
+			this.telemetryManager.sendEventCloudImageEditor(d, this.$["*tabId"], { action: "apply" });
+			let B = this.$["*on.apply"];
+			B?.(this.$["*editorTransformations"]);
+		}, this._handleApplySlider = (d) => {
+			this.telemetryManager.sendEventCloudImageEditor(d, this.$["*tabId"], {
+				action: "apply-slider",
+				operation: parseFilterValue(this.$["*operationTooltip"])
+			}), this._sliderRef.value?.apply(), this._onSliderClose();
+		}, this._handleCancelSlider = (d) => {
+			this.telemetryManager.sendEventCloudImageEditor(d, this.$["*tabId"], { action: "cancel-slider" }), this._sliderRef.value?.cancel(), this._onSliderClose();
+		}, this._handleTabClick = (d) => {
+			let B = d.currentTarget?.getAttribute("data-id");
+			B && (this.telemetryManager.sendEventCloudImageEditor(d, 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(d, { fromViewer: B = !1, force: V = !1 } = {}) {
+		this.$["*tabId"] !== d && (this.$["*tabId"] = d), this._applyTabState(d, {
+			fromViewer: B,
+			force: V
+		});
+	}
+	_applyTabState(d, { fromViewer: B, force: V = !1 }) {
+		if (!V && this.activeTab === d) {
+			this._syncTabIndicator();
+			return;
+		}
+		this.activeTab = d;
+		let H = this.$["*faderEl"], U = this.$["*cropperEl"];
+		d === 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 === d, H = this.tabToggleRefs[B]?.value;
+			H && (H.active = V), V && this._syncTabIndicator();
+		}
+	}
+	_syncTabIndicator() {
+		let d = this.tabToggleRefs[this.activeTab]?.value, B = this._tabIndicatorRef.value;
+		if (!d || !B) return;
+		let V = d.offsetLeft, H = d.offsetWidth || Number(getComputedStyle(d).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(d) {
+		switch (d) {
+			case TabId.CROP: return this._renderCropTabControls();
+			case TabId.FILTERS: return this._renderFilterTabControls();
+			case TabId.TUNING: return this._renderTuningTabControls();
+			default: return [];
+		}
+	}
+	_renderCropTabControls() {
+		let d = [];
+		if (this._hasAspectRatioPicker) d.push(() => this._renderFreeformControl());
+		else for (let B of this._cropPresets) d.push(() => this._renderAspectRatioControl(B));
+		for (let B of ALL_CROP_OPERATIONS) d.push(() => this._renderCropOperationControl(B));
+		return this._renderControlGroup(d);
+	}
+	_renderFilterTabControls() {
+		let d = [FAKE_ORIGINAL_FILTER, ...ALL_FILTERS].map((d) => () => this._renderFilterControl(d));
+		return this._renderControlGroup(d);
+	}
+	_renderTuningTabControls() {
+		let d = ALL_COLOR_OPERATIONS.map((d) => () => this._renderOperationControl(d));
+		return this._renderControlGroup(d);
+	}
+	_renderControlGroup(d) {
+		return d.length ? d.map((d) => d()) : [];
+	}
+	_renderFreeformControl() {
+		return html`<uc-editor-freeform-button-control></uc-editor-freeform-button-control>`;
+	}
+	_renderAspectRatioControl(d) {
+		return html`<uc-editor-aspect-ratio-button-control .aspectRatio=${d}></uc-editor-aspect-ratio-button-control>`;
+	}
+	_renderCropOperationControl(d) {
+		return html`<uc-editor-crop-button-control .operation=${d}></uc-editor-crop-button-control>`;
+	}
+	_renderFilterControl(d) {
+		return html`<uc-editor-filter-control .filter=${d}></uc-editor-filter-control>`;
+	}
+	_renderOperationControl(d) {
+		return html`<uc-editor-operation-control .operation=${d}></uc-editor-operation-control>`;
+	}
+	_renderAspectRatioList() {
+		return this._hasAspectRatioPicker ? this._cropPresets.map((d) => this._renderAspectRatioControl(d)) : [];
+	}
+	async _preloadEditedImage() {
+		if (this.$["*imgContainerEl"] && this.$["*originalUrl"]) {
+			let d = this.$["*imgContainerEl"].offsetWidth, B = await this.proxyUrl(viewerImageSrc(this.$["*originalUrl"], d, 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", (d) => {
+			this._cropPresets = [...d ?? []];
+		}), this.sub("*imageSize", (d) => {
+			d && setTimeout(() => {
+				this._activateTab(this.$["*tabId"], { fromViewer: !0 });
+			}, 0);
+		}), this.sub("*editorTransformations", (d) => {
+			let B = d?.filter?.name;
+			this.$["*currentFilter"] !== B && (this.$["*currentFilter"] = B ?? "");
+		}), this.sub("*currentFilter", () => {
+			this._updateInfoTooltip();
+		}), this.sub("*currentOperation", () => {
+			this._updateInfoTooltip();
+		}), this.sub("*tabId", (d) => {
+			this._applyTabState(d, {
+				fromViewer: !1,
+				force: !0
+			}), this._updateInfoTooltip();
+		}), this.sub("*originalUrl", () => {
+			this.$["*faderEl"]?.deactivate();
+		}), this.sub("*editorTransformations", (d) => {
+			this._preloadEditedImage(), this.$["*faderEl"]?.setTransformations(d);
+		}), this.sub("*loadingOperations", (d) => {
+			let B = !1;
+			for (let [, V] of d.entries()) {
+				if (B) break;
+				for (let [, d] of V.entries()) if (d) {
+					B = !0;
+					break;
+				}
+			}
+			this._debouncedShowLoader(B);
+		}), this.sub("*showSlider", (d) => {
+			d ? (this.showSubToolbar = !0, this.showMainToolbar = !1, this._useSliderPanel = !0) : this.$["*showListAspectRatio"] || (this.showSubToolbar = !1, this.showMainToolbar = !0);
+		}), this.sub("*showListAspectRatio", (d) => {
+			d ? (this.showSubToolbar = !0, this.showMainToolbar = !1, this._useSliderPanel = !1) : this.$["*showSlider"] || (this.showSubToolbar = !1, this.showMainToolbar = !0);
+		}), this.sub("*tabList", (d) => {
+			if (this.tabList = d, this._showTabToggles = d.length > 1, !d.includes(this.$["*tabId"]) && d.length > 0) {
+				let [B] = d;
+				B && this._activateTab(B, { fromViewer: !1 });
+				return;
+			}
+			this._syncTabIndicator();
+		}), this.sub("*operationTooltip", (d) => {
+			this._operationTooltip = d;
+		}), this._updateInfoTooltip();
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("resize", this._handleWindowResize);
+	}
+	firstUpdated(d) {
+		super.firstUpdated(d), this._assignSharedElements(), this._syncTabIndicator();
+	}
+	updated(d) {
+		super.updated(d), (d.has("activeTab") || d.has("tabList")) && this.updateComplete.then(() => this._syncTabIndicator()), (d.has("showSubToolbar") || d.has("showMainToolbar")) && this._assignSharedElements();
+	}
+	disconnectedCallback() {
+		window.removeEventListener("resize", this._handleWindowResize), super.disconnectedCallback(), this.$["*showSlider"] = !1, this.$["*showListAspectRatio"] = !1;
+	}
+	_assignSharedElements() {
+		let d = this._sliderRef.value;
+		d && (this.$["*sliderEl"] = d);
+	}
+	_renderTabToggle(d) {
+		let B = this.tabList.includes(d), V = this.activeTab === d, H = this.tabList.indexOf(d), U = H >= 0 ? styleMap({ gridColumn: `${H + 1}` }) : nothing;
+		return html`
+      <uc-presence-toggle class="uc-tab-toggle" .visible=${B} .styles=${this._tabToggleStyles}>
+        <uc-btn-ui
+          theme="tab"
+          data-id=${d}
+          icon=${d}
+          role="tab"
+          aria-controls=${`tab_${d}`}
+          aria-selected=${V ? "true" : "false"}
+          title-prop=${`a11y-editor-tab-${d}`}
+          .active=${V}
+          style=${U}
+          @click=${this._handleTabClick}
+          ${ref(this.tabToggleRefs[d])}
+        ></uc-btn-ui>
+      </uc-presence-toggle>
+    `;
+	}
+	_renderTabContent(d) {
+		let B = this._renderControlsByTab(d);
+		return html`
+      <div
+        id=${`tab_${d}`}
+        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 : nothing}
+            </div>
+          </div>
+        </uc-editor-scroller>
+      </div>
+    `;
+	}
+	render() {
+		let d = ["uc-info-tooltip", this._tooltipVisible ? "uc-info-tooltip_visible" : "uc-info-tooltip_hidden"].join(" "), B = this._hasAspectRatioPicker;
+		return html`
+      <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=${d}>${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((d) => when(this.activeTab === d, () => this._renderTabContent(d)))}
+          </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"
+                ${ref(this._tabIndicatorRef)}
+              ></div>
+              ${ALL_TABS.map((d) => this._renderTabToggle(d))}
+            </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 ${ref(this._sliderRef)}></uc-editor-slider>
+          </div>
+
+          <div class="uc-list-aspect-ratio-container" ?hidden=${this._useSliderPanel || !B}>
+            ${B ? html`<div class="uc-list-aspect-ratio">${this._renderAspectRatioList()}</div>` : nothing}
+          </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([state()], EditorToolbar.prototype, "_showLoader", void 0), __decorate([state()], EditorToolbar.prototype, "showMainToolbar", void 0), __decorate([state()], EditorToolbar.prototype, "showSubToolbar", void 0), __decorate([state()], EditorToolbar.prototype, "_showTabToggles", void 0), __decorate([state()], EditorToolbar.prototype, "tabList", void 0), __decorate([state()], EditorToolbar.prototype, "activeTab", void 0), __decorate([state()], EditorToolbar.prototype, "_useSliderPanel", void 0), __decorate([state()], EditorToolbar.prototype, "_tooltipVisible", void 0), __decorate([state()], EditorToolbar.prototype, "_operationTooltip", void 0), __decorate([state()], EditorToolbar.prototype, "_cropPresets", void 0);
+var DEFAULT_TABS = serializeCsv([...ALL_TABS]), CloudImageEditorBlock = class extends LitBlock {
+	constructor(...d) {
+		super(...d), 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((d) => {
+			this._showLoader = d;
+		}, 300), this._imgRef = createRef(), this._cropperRef = createRef(), this._faderRef = createRef(), this._imgContainerRef = createRef(), 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 d = this.$["*on.retryNetwork"];
+			d?.();
+		}, 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 d = this._faderRef.value;
+		d && (this.$["*faderEl"] = d);
+		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 d = this._imgRef.value;
+		d && (d.addEventListener("load", this._handleImageLoad), d.addEventListener("error", this._handleImageError));
+	}
+	_detachImageListeners() {
+		let d = this._imgRef.value;
+		d && (d.removeEventListener("load", this._handleImageLoad), d.removeEventListener("error", this._handleImageError));
+	}
+	get _imageClassName() {
+		let d = this.$["*tabId"];
+		return classNames("uc-image", {
+			"uc-image_hidden_to_cropper": d === TabId.CROP,
+			"uc-image_hidden_effects": d !== TabId.CROP
+		});
+	}
+	_waitForSize() {
+		return new Promise((d, 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(() => d(), 0));
+			});
+			H.observe(this);
+		});
+	}
+	firstUpdated(d) {
+		super.firstUpdated(d), this._assignSharedElements(), this._attachImageListeners(), this.initEditor();
+		let B = !!(this.uuid || this.cdnUrl), V = d.has("uuid") || d.has("cdnUrl");
+		B && !V && this.updateImage();
+	}
+	disconnectedCallback() {
+		this._detachImageListeners(), super.disconnectedCallback();
+	}
+	render() {
+		let d = this._fileType ?? "", B = this._statusMessage ?? "", V = this._imageSrc || "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=", H = this._showLoader, U = this._hasNetworkProblems;
+		return html`
+      ${unsafeSVG(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">${d}</div>
+          </div>
+          <div class="uc-image_container" ${ref(this._imgContainerRef)}>
+            <img src=${V} class=${this._imageClassName} ${ref(this._imgRef)} />
+            ${when(this._isInitialized, () => html`<uc-editor-image-cropper ${ref(this._cropperRef)}></uc-editor-image-cropper>`)}
+            <uc-editor-image-fader ${ref(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">
+            ${when(this._isInitialized, () => html`<uc-editor-toolbar></uc-editor-toolbar>`)}
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	updated(d) {
+		super.updated(d), d.has("uuid") && this.uuid && this.updateImage(), d.has("cdnUrl") && this.cdnUrl && this.updateImage(), d.has("tabs") && this._syncTabListFromProp(), (d.has("cropPreset") || d.has("cdnUrl")) && this._syncCropPresetState();
+	}
+	_syncTabListFromProp() {
+		let d = this.tabs || DEFAULT_TABS;
+		this.$["*tabList"] = parseTabs(d);
+	}
+	_syncCropPresetState() {
+		let d = parseCropPreset(this.cropPreset ?? ""), B = null;
+		if (this.cdnUrl) {
+			let V = operationsToTransformations(extractOperations(this.cdnUrl));
+			if (Array.isArray(V?.crop?.dimensions)) {
+				let [H, U] = V.crop.dimensions;
+				B = getClosestAspectRatio(H, U, d, .1);
+			}
+		}
+		this.$["*cropPresetList"] = d, this.$["*currentAspectRatio"] = B ?? d?.[0] ?? null;
+	}
+	async updateImage() {
+		if (this.isConnected) {
+			if (await this._waitForSize(), this.cdnUrl) {
+				let d = this.cdnUrl, B = createOriginalUrl(d, extractUuid(d));
+				if (B === this.$["*originalUrl"]) return;
+				this.$["*originalUrl"] = B;
+				let V = operationsToTransformations(extractOperations(d));
+				this.$["*editorTransformations"] = V;
+			} else if (this.uuid) {
+				let d = createOriginalUrl(this.cfg.cdnCname, this.uuid);
+				if (d === this.$["*originalUrl"]) return;
+				this.$["*originalUrl"] = d, 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 B = this.$["*originalUrl"], V = await this.proxyUrl(createCdnUrl(B, createCdnUrlModifiers("json"))), { width: H, height: U } = await fetch(V).then((d) => d.json());
+				this.$["*imageSize"] = {
+					width: H,
+					height: U
+				}, this.$["*tabId"] === TabId.CROP ? this.$["*cropperEl"]?.activate(this.$["*imageSize"]) : this.$["*faderEl"]?.activate({ url: B });
+			} catch (d) {
+				d && (this.telemetryManager.sendEventError(d, "cloud editor image. Failed to load image info"), console.error("Failed to load image info", d));
+			}
+			this._scheduleInitialization();
+		}
+	}
+	async initEditor() {
+		try {
+			await this._waitForSize();
+		} catch (d) {
+			this.isConnected && console.error(d.message);
+			return;
+		}
+		this.classList.add("uc-editor_ON"), this.sub("*networkProblems", (d) => {
+			this._hasNetworkProblems = !!d;
+		}), 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([state()], CloudImageEditorBlock.prototype, "_statusMessage", void 0), __decorate([state()], CloudImageEditorBlock.prototype, "_imageSrc", void 0), __decorate([state()], CloudImageEditorBlock.prototype, "_fileType", void 0), __decorate([state()], CloudImageEditorBlock.prototype, "_showLoader", void 0), __decorate([property({
+	type: String,
+	reflect: !0
+})], CloudImageEditorBlock.prototype, "uuid", void 0), __decorate([property({
+	type: String,
+	attribute: "cdn-url",
+	reflect: !0
+})], CloudImageEditorBlock.prototype, "cdnUrl", void 0), __decorate([property({
+	type: String,
+	attribute: "crop-preset",
+	reflect: !0
+})], CloudImageEditorBlock.prototype, "cropPreset", void 0), __decorate([property({
+	type: String,
+	reflect: !0
+})], CloudImageEditorBlock.prototype, "tabs", void 0), __decorate([state()], CloudImageEditorBlock.prototype, "_hasNetworkProblems", void 0), __decorate([state()], 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 { PresenceToggle as _, EditorOperationControl as a, EditorAspectRatioButtonControl as c, SliderUi as d, EditorImageFader as f, LineLoaderUi 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, throttle as v };