import "../chunks/Ch2Ub8FX.js";
import {
	v as Ct,
	b as A,
	at as la,
	p as ia,
	y as ca,
	g as e,
	au as U,
	aw as u,
	ay as ht,
	ax as z,
	a as Te,
	c as da,
	bm as O,
	u as N,
	f as ce,
	d as o,
	r as a,
	s as n,
	n as xt,
	t as Re,
} from "../chunks/CMvZtFtm.js";
import { s as k } from "../chunks/DVA6u9-7.js";
import { r as Tt, i as Me } from "../chunks/BF50aS-j.js";
import { e as ua } from "../chunks/CXkjfmFU.js";
import {
	b as Rt,
	c as wt,
	a as K,
	s as ie,
	e as yt,
	r as va,
} from "../chunks/C5yqZvKC.js";
import { b as _a } from "../chunks/Dpga8uG-.js";
import { b as Pe } from "../chunks/0wx1llIh.js";
import { g as pa } from "../chunks/CyB--sFG.js";
import {
	S as kt,
	u as h,
	g as It,
	t as Ee,
	P as fa,
	c as ma,
} from "../chunks/BRM3t761.js";
import {
	r as ga,
	P as Le,
	D as ba,
	a as ha,
	I as xa,
	b as wa,
	e as ya,
	c as ka,
} from "../chunks/BA2Qx8r3.js";
import { P as W } from "../chunks/D3yaN7Zl.js";
import { A as Ia, c as Da } from "../chunks/Dt3xBOvm.js";
import { g as C } from "../chunks/CV9xcpLq.js";
import { c as $a } from "../chunks/CHGjpGz-.js";
import { c as Ua } from "../chunks/C4yB2Gnm.js";
import { a as za } from "../chunks/CZlv7MYe.js";
import { h as Ca, r as Ta } from "../chunks/lE0oaQc5.js";
(function () {
	try {
		var r =
			typeof window < "u"
				? window
				: typeof global < "u"
				? global
				: typeof globalThis < "u"
				? globalThis
				: typeof self < "u"
				? self
				: {};
		r.SENTRY_RELEASE = { id: "9ccec90dcd6b8d85831cf2b37643f1564d033383" };
	} catch {}
})();
try {
	(function () {
		var r =
				typeof window < "u"
					? window
					: typeof global < "u"
					? global
					: typeof globalThis < "u"
					? globalThis
					: typeof self < "u"
					? self
					: {},
			t = new r.Error().stack;
		t &&
			((r._sentryDebugIds = r._sentryDebugIds || {}),
			(r._sentryDebugIds[t] = "b645305a-a2bb-4f20-862e-8d4e8a88cafe"),
			(r._sentryDebugIdIdentifier =
				"sentry-dbid-b645305a-a2bb-4f20-862e-8d4e8a88cafe"));
	})();
} catch {}
const Ra = (r) => `unexpected url format: ${r.url}`,
	Ma = (r) => `formato da url inesperado: ${r.url}`,
	Pa = (r, t = {}) => ((t.locale ?? C()) === "en" ? Ra(r) : Ma(r)),
	La = () => "Canvas does not have 2d context",
	Ea = () => "A tela não tem contexto 2D",
	Sa = (r = {}, t = {}) => ((t.locale ?? C()) === "en" ? La() : Ea()),
	Aa = () => "Failed to upload the image. Check the file uploaded.",
	Ha = () => "Falha ao enviar a imagem. Verifique o arquivo enviado.",
	qa = (r = {}, t = {}) => ((t.locale ?? C()) === "en" ? Aa() : Ha()),
	Ba = () =>
		"Disclaimer: inappropriate pictures may be removed without notice.",
	Ya = () =>
		"Aviso: Imagens inapropriadas podem ser removidas sem aviso prévio.",
	Fa = (r = {}, t = {}) => ((t.locale ?? C()) === "en" ? Ba() : Ya()),
	Xa = () => "Failed to send image to the server.",
	Za = () => "Falha ao enviar imagem para o servidor.",
	Oa = (r = {}, t = {}) => ((t.locale ?? C()) === "en" ? Xa() : Za()),
	Wa = () => "You are not logged in",
	ja = () => "Você não está logado",
	Na = (r = {}, t = {}) => ((t.locale ?? C()) === "en" ? Wa() : ja()),
	Ka = () => "Home",
	Va = () => "Início",
	Ga = (r = {}, t = {}) => ((t.locale ?? C()) === "en" ? Ka() : Va()),
	Ja = () => "Preferably, use a 16x16 image",
	Qa = () => "De preferência uma imagem 16x16",
	er = (r = {}, t = {}) => ((t.locale ?? C()) === "en" ? Ja() : Qa()),
	tr = () => "Upload",
	ar = () => "Upload",
	rr = (r = {}, t = {}) => ((t.locale ?? C()) === "en" ? tr() : ar()),
	sr = () => "Draw profile picture",
	or = () => "Imagem de perfil",
	nr = (r = {}, t = {}) => ((t.locale ?? C()) === "en" ? sr() : or()),
	lr = () => "Preview",
	ir = () => "Prévia",
	Dt = (r = {}, t = {}) => ((t.locale ?? C()) === "en" ? lr() : ir());
var cr = Ct(
	'<svg><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"></path></svg>'
);
function $t(r, t) {
	let c = Tt(t, ["$$slots", "$$events", "$$legacy"]);
	var m = cr();
	Rt(m, () => ({
		xmlns: "http://www.w3.org/2000/svg",
		viewBox: "0 -960 960 960",
		fill: "currentColor",
		...c,
	})),
		A(r, m);
}
var dr = Ct(
	'<svg><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>'
);
function Ut(r, t) {
	let c = Tt(t, ["$$slots", "$$events", "$$legacy"]);
	var m = dr();
	Rt(m, () => ({
		xmlns: "http://www.w3.org/2000/svg",
		viewBox: "0 -960 960 960",
		fill: "currentColor",
		...c,
	})),
		A(r, m);
}
async function zt(r, t, c, m, L) {
	var H;
	try {
		const q = (H = r.currentTarget.files) == null ? void 0 : H[0];
		if (q) {
			const T = await t(q);
			c(T, e(m)), u(L, e(m).toDataURL("image/png"), !0), T.remove();
		}
	} catch (q) {
		console.error(q), Ee.error(qa());
	}
}
var ur = (r, t) => t(),
	vr = (r, t) => {
		const c = r.offsetX,
			m = r.offsetY;
		t(c, m, c, m);
	},
	_r = (r, t) => t(),
	pr = (r, t, c, m) => {
		u(t, e(c), !0), u(m, !1);
	},
	fr = ce("<div><button></button></div>"),
	mr = (r, t) => {
		u(t, !1);
	},
	gr = (r, t) => {
		e(t).show();
	},
	br = (r, t) => {
		u(t, !e(t));
	},
	hr = (r, t) => {
		var c;
		(c = e(t)) == null || c.close();
	},
	xr = (r, t, c) => {
		u(t, !0),
			e(c).toBlob(async (m) => {
				try {
					if (!m) {
						Ee.error(Oa());
						return;
					}
					const L = new FormData();
					if (
						(L.set("image", m),
						(
							await fetch(`${fa}/me/profile-picture`, {
								method: "POST",
								credentials: "include",
								body: L,
							})
						).status !== 200)
					) {
						Ee.error(ma());
						return;
					}
					await h.refresh(), pa("/");
				} finally {
					u(t, !1);
				}
				u(t, !0);
			});
	},
	wr = ce(
		'<span class="center-absolute loading loading-spinner absolute"></span>'
	),
	yr = ce(
		'<div class="relative mx-auto flex h-full max-w-[1920px] flex-col gap-2 p-4 max-sm:overflow-hidden sm:gap-4"><header class="relative flex items-center justify-between"><div class="flex items-center gap-2"><a href="/" class="btn btn-ghost btn-circle"><!></a> <h2 class="text-xl font-bold sm:text-2xl"> </h2> <div class="ml-2 max-sm:hidden"><div class="tooltip tooltip-bottom"><label class="btn"><!> <input class="hidden" type="file" accept="image/*"/></label></div></div> <button class="btn btn-circle max-sm:hidden"><!></button></div> <div class="absolute left-1/2 -translate-x-1/2 max-lg:pointer-events-none max-sm:hidden"><div class="flex items-center gap-2"><span class="text-base-content/80 mr-2 max-lg:invisible"> </span> <!> <!> <!></div></div> <!></header> <div class="grid grid-cols-1 gap-4 sm:grow sm:grid-cols-[auto_1fr] sm:gap-6"><section class="bg-base-200 border-base-content/30 relative aspect-square w-full touch-none border-2 sm:h-[min(50vw,85vh)]"><canvas width="16" height="16"></canvas> <canvas width="16" height="16"></canvas> <svg class="text-base-content/20 pointer-events-none absolute left-0 top-0 size-full" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><mask id="circleMask"><rect width="100%" height="100%" fill="white"></rect><circle cx="50" cy="50" r="50" fill="black"></circle></mask></defs><rect x="0" y="0" width="100" height="100" fill="currentColor" mask="url(#circleMask)"></rect></svg></section> <section class="flex items-center justify-between sm:hidden"><div class="flex items-center gap-2"><span class="text-base-content/80 mr-2"> </span> <!> <!> <!></div> <div class="flex gap-2"><button class="btn btn-circle"><!></button> <div class="tooltip tooltip-bottom before:-translate-x-1/3" data-tip="Preferably a 16x16 image"><label class="btn btn-circle"><!> <input class="hidden" type="file" accept="image/*"/></label></div></div></section> <section class="flex flex-col justify-between max-sm:absolute max-sm:bottom-4 max-sm:w-[calc(100%-2rem)]"><div class="grid grid-cols-8 gap-0.5 sm:grid-cols-6 sm:gap-1"></div> <div class="flex justify-between gap-2 max-sm:mt-4"><label class="btn btn-lg btn-square sm:btn-xl relative shadow-md"><span class="border-base-content/20 size-6 rounded-full border-2"></span> <input class="absolute left-0 top-0 size-0" type="color"/></label> <div data-tip="Not enough droplets"><button class="btn btn-primary btn-lg sm:btn-xl relative"> <span class="flex items-center gap-1 text-base"><!> </span></button></div> <div class="tooltip"><div class="tooltip-content not-touchscreen:-translate-x-[10%]"> <kbd class="kbd kbd-xs text-base-content touchscreen:hidden ml-0.5 rounded-md">E</kbd></div> <button><!></button></div></div></section></div></div> <!> <dialog class="modal"><div class="modal-box max-w-sm"><form method="dialog"><button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button></form> <h3 class="flex items-center gap-1.5 text-lg font-bold"> </h3> <div class="mt-2 flex items-center gap-2"><!> <!> <!> <!></div> <p class="text-base-content/80 mt-2 text-sm"> </p> <div class="mt-4 flex justify-end gap-2"><button class="btn btn-soft"> </button> <button class="btn btn-primary relative"> <!></button></div></div> <form method="dialog" class="modal-backdrop"><button> </button></form></dialog>',
		1
	),
	kr = ce(
		'<div class="flex size-full flex-col items-center justify-center gap-2"><span class="text-lg"> </span> <a class="btn btn-primary" href="/"> </a></div>'
	);
function Fr(r, t) {
	ia(t, !0);
	const c = kt.products[120];
	let m = U(!1),
		L = U(!1),
		H = U(!1);
	const q = N(() => e(m) || e(L) || e(H));
	let T = U("#000000"),
		de = U(!1),
		y = U(!1),
		w = U(""),
		D = [0, 0],
		ue = U(!1);
	const Se = N(() => {
			var s;
			return (((s = h.data) == null ? void 0 : s.droplets) ?? 0) >= c.price;
		}),
		Mt = N(() => {
			if (e(y)) return [0, 0, 0, 0];
			const { r: s, g: d, b: l } = Ca(e(T));
			return [s, d, l, 255];
		});
	let _ = U(null),
		B = U(null),
		ee = U(null);
	const Pt = new Set([
			1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
			22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 52,
		]),
		Lt = [
			1, 2, 3, 32, 4, 5, 6, 33, 7, 34, 35, 8, 36, 9, 10, 11, 37, 38, 39, 40, 41,
			42, 12, 13, 14, 15, 16, 17, 43, 20, 44, 18, 19, 45, 46, 21, 22, 47, 48,
			49, 23, 24, 25, 26, 27, 28, 53, 54, 55, 56, 57, 29, 30, 50, 51, 31, 52,
			61, 62, 63, 58, 59, 60,
		].map((s) => ({ ...kt.colors[s], idx: s }));
	ca(() => {
		e(_) && u(w, e(_).toDataURL("image/png"), !0);
	});
	function j(s, d, l, v) {
		const p = Math.floor((s / e(_).clientWidth) * e(_).width),
			f = Math.floor((d / e(_).clientHeight) * e(_).height),
			g = Math.floor((l / e(_).clientWidth) * e(_).width),
			b = Math.floor((v / e(_).clientHeight) * e(_).height),
			R = ga([p, f], [g, b]);
		for (const [M, Y] of R) {
			const F = e(_).getContext("2d"),
				E = F.createImageData(1, 1),
				[te, _e, V, pe] = e(Mt);
			(E.data[0] = te),
				(E.data[1] = _e),
				(E.data[2] = V),
				(E.data[3] = pe),
				F.putImageData(E, M, Y);
		}
		u(w, e(_).toDataURL("image/png"), !0);
	}
	function ve(s, d) {
		const l = e(B).width,
			v = e(B).height,
			p = Math.floor((s / e(B).clientWidth) * l),
			f = Math.floor((d / e(B).clientHeight) * v);
		if (!isFinite(p) || !isFinite(f)) return;
		const g = e(B).getContext("2d"),
			b = g.createImageData(1, 1);
		(b.data[0] = 128),
			(b.data[1] = 128),
			(b.data[2] = 128),
			(b.data[3] = 60),
			g.clearRect(0, 0, l, v),
			g.putImageData(b, p, f);
	}
	async function Ae(s) {
		return new Promise((d, l) => {
			const v = new FileReader();
			(v.onload = (p) => {
				var b;
				const f = new Image();
				(f.onload = () => d(f)), (f.onerror = (R) => l(R));
				const g = (b = p.target) == null ? void 0 : b.result;
				g && typeof g == "string"
					? (f.src = g)
					: l(new Error(Pa({ url: g ?? "" })));
			}),
				(v.onerror = (p) => l(p)),
				v.readAsDataURL(s);
		});
	}
	function He(s, d) {
		const l = d.getContext("2d");
		if (!l) throw new Error(Sa());
		const v = d.width,
			p = d.height;
		l.clearRect(0, 0, v, p);
		const f = Math.min(v / s.width, p / s.height),
			g = s.width * f,
			b = s.height * f,
			R = (v - g) / 2,
			M = (p - b) / 2;
		l.drawImage(s, R, M, g, b);
	}
	function qe(s, d, l) {
		const v = s.getBoundingClientRect(),
			p = d - v.left,
			f = l - v.top;
		return [p, f];
	}
	function Be() {
		const s = e(_).getContext("2d");
		s == null || s.clearRect(0, 0, e(_).width, e(_).height),
			u(w, e(_).toDataURL("image/png"), !0);
	}
	var Ye = ht();
	z("mousedown", O, (s) => {
		u(m, !0);
		const [d, l] = qe(e(_), s.clientX, s.clientY);
		j(d, l, d, l), (D = [d, l]);
	}),
		z("mouseup", O, () => {
			u(m, !1);
		}),
		z(
			"touchstart",
			O,
			(s) => {
				u(H, !0);
				const d = s.touches.item(0),
					[l, v] = qe(e(_), d.clientX, d.clientY);
				j(l, v, l, v), (D = [l, v]);
			},
			void 0,
			!0
		),
		z("touchend", O, () => {
			u(H, !1);
		}),
		z("keypress", O, (s) => {
			s.code === "KeyE" && u(y, !e(y));
		}),
		z("keydown", O, (s) => {
			if (s.code === "Space") {
				u(L, !0);
				const d = D[0],
					l = D[1];
				j(d, l, d, l), s.preventDefault();
			}
		}),
		z("keyup", O, (s) => {
			s.code === "Space" && u(L, !1);
		});
	var Et = Te(Ye);
	{
		var St = (s) => {
				var d = yr(),
					l = Te(d),
					v = o(l),
					p = o(v),
					f = o(p),
					g = o(f);
				Ia(g, { class: "size-5" }), a(f);
				var b = n(f, 2),
					R = o(b, !0);
				a(b);
				var M = n(b, 2),
					Y = o(M),
					F = o(Y),
					E = o(F);
				Ut(E, { class: "size-5" });
				var te = n(E),
					_e = n(te);
				(_e.__change = [zt, Ae, He, _, w]), a(F), a(Y), a(M);
				var V = n(M, 2);
				V.__click = [ur, Be];
				var pe = o(V);
				$t(pe, { class: "size-5" }), a(V), a(p);
				var fe = n(p, 2),
					Fe = o(fe),
					me = o(Fe),
					Ht = o(me);
				a(me);
				var Xe = n(me, 2);
				Le(Xe, {
					get userId() {
						return h.data.id;
					},
					get level() {
						return h.data.level;
					},
					get pictureUrl() {
						return e(w);
					},
				});
				var Ze = n(Xe, 2);
				W(Ze, {
					class: "size-10 border",
					get userId() {
						return h.data.id;
					},
					get pictureUrl() {
						return e(w);
					},
				});
				var qt = n(Ze, 2);
				W(qt, {
					class: "size-5 border-0",
					get userId() {
						return h.data.id;
					},
					get pictureUrl() {
						return e(w);
					},
				}),
					a(Fe),
					a(fe);
				var Bt = n(fe, 2);
				ba(Bt, {
					get value() {
						return h.data.droplets;
					},
				}),
					a(v);
				var Oe = n(v, 2),
					ge = o(Oe),
					X = o(ge);
				let We;
				(X.__touchmove = (i) => {
					u(de, !0);
					const x = i.targetTouches.item(0),
						$ = i.currentTarget.getBoundingClientRect(),
						I = x.clientX - $.left,
						P = x.clientY - $.top;
					e(q) && j(D[0], D[1], I, P), ve(I, P), (D = [I, P]);
				}),
					(X.__mousemove = (i) => {
						u(de, !1);
						const x = i.offsetX,
							$ = i.offsetY;
						e(q) && j(D[0], D[1], x, $), ve(x, $), (D = [x, $]);
					}),
					(X.__click = [vr, j]),
					Pe(
						X,
						(i) => u(_, i),
						() => e(_)
					);
				var je = n(X, 2);
				let Ne;
				Pe(
					je,
					(i) => u(B, i),
					() => e(B)
				),
					xt(2),
					a(ge);
				var be = n(ge, 2),
					he = o(be),
					xe = o(he),
					Yt = o(xe);
				a(xe);
				var Ke = n(xe, 2);
				Le(Ke, {
					get userId() {
						return h.data.id;
					},
					get level() {
						return h.data.level;
					},
					get pictureUrl() {
						return e(w);
					},
				});
				var Ve = n(Ke, 2);
				W(Ve, {
					class: "size-10 border",
					get userId() {
						return h.data.id;
					},
					get pictureUrl() {
						return e(w);
					},
				});
				var Ft = n(Ve, 2);
				W(Ft, {
					class: "size-5 border-0",
					get userId() {
						return h.data.id;
					},
					get pictureUrl() {
						return e(w);
					},
				}),
					a(he);
				var Ge = n(he, 2),
					ae = o(Ge);
				ae.__click = [_r, Be];
				var Xt = o(ae);
				$t(Xt, { class: "size-5" }), a(ae);
				var Je = n(ae, 2),
					Qe = o(Je),
					et = o(Qe);
				Ut(et, { class: "size-5" });
				var Zt = n(et, 2);
				(Zt.__change = [zt, Ae, He, _, w]), a(Qe), a(Je), a(Ge), a(be);
				var tt = n(be, 2),
					we = o(tt);
				ua(
					we,
					23,
					() => Lt,
					(i) => i.idx,
					(i, x, $) => {
						const I = N(() => {
								const [Q, ze, Ce] = e(x).rgb;
								return { r: Q, g: ze, b: Ce };
							}),
							P = N(() => Ta({ r: e(I).r, g: e(I).g, b: e(I).b })),
							le = N(() => e(T) === e(P) && !e(y));
						var Z = fr(),
							S = o(Z);
						(S.__click = [pr, T, P, y]),
							a(Z),
							Re(
								(Q) => {
									K(Z, 1, Q),
										ie(Z, "data-tip", e(x).name),
										K(
											S,
											1,
											wt({
												"btn relative aspect-square w-full rounded-xl": !0,
												"border-primary ring-primary ring-2": e(le),
												"border-base-content/20": !e(le),
												"max-sm:h-6 max-sm:rounded-md": !0,
											})
										),
										yt(S, `background: rgb(${e(I).r} ${e(I).g} ${e(I).b})`),
										ie(S, "aria-label", e(x).name),
										ie(S, "id", `color-${e(x).idx ?? ""}`);
								},
								[
									() =>
										wt({
											tooltip: !0,
											"max-sm:hidden": !Pt.has(e(x).idx),
											"max-sm:before:-translate-x-1/4":
												e($) % 8 === 0 && e(x).name.length > 7,
											"max-sm:before:translate-x-1/4":
												(e($) - 7) % 8 === 0 && e(x).name.length > 7,
										}),
								]
							),
							z("focus", S, () => {
								u(T, e(P), !0), u(y, !1);
							}),
							A(i, Z);
					}
				),
					a(we);
				var at = n(we, 2),
					G = o(at);
				G.__click = [mr, y];
				var rt = o(G),
					st = n(rt, 2);
				va(st), a(G);
				var re = n(G, 2);
				let ot;
				var se = o(re);
				se.__click = [gr, ee];
				var nt = o(se),
					lt = n(nt),
					it = o(lt);
				ha(it, { class: "size-4.5" });
				var Ot = n(it);
				a(lt), a(se), a(re);
				var ct = n(re, 2),
					ye = o(ct),
					Wt = o(ye);
				xt(), a(ye);
				var J = n(ye, 2);
				let dt;
				J.__click = [br, y];
				var jt = o(J);
				xa(jt, {
					class: "size-5",
					get filled() {
						return e(y);
					},
				}),
					a(J),
					a(ct),
					a(at),
					a(tt),
					a(Oe),
					a(l);
				var ut = n(l, 2);
				wa(ut, {
					get open() {
						return It.dropletsDialogOpen;
					},
					set open(i) {
						It.dropletsDialogOpen = i;
					},
				});
				var ke = n(ut, 2),
					Ie = o(ke),
					De = n(o(Ie), 2),
					Nt = o(De, !0);
				a(De);
				var $e = n(De, 2),
					vt = o($e);
				W(vt, {
					class: "size-20",
					get userId() {
						return h.data.id;
					},
					get pictureUrl() {
						return e(w);
					},
				});
				var _t = n(vt, 2);
				Le(_t, {
					get userId() {
						return h.data.id;
					},
					get level() {
						return h.data.level;
					},
					get pictureUrl() {
						return e(w);
					},
				});
				var pt = n(_t, 2);
				W(pt, {
					class: "size-10 border",
					get userId() {
						return h.data.id;
					},
					get pictureUrl() {
						return e(w);
					},
				});
				var Kt = n(pt, 2);
				W(Kt, {
					class: "size-5 border-0",
					get userId() {
						return h.data.id;
					},
					get pictureUrl() {
						return e(w);
					},
				}),
					a($e);
				var Ue = n($e, 2),
					Vt = o(Ue, !0);
				a(Ue);
				var ft = n(Ue, 2),
					oe = o(ft);
				oe.__click = [hr, ee];
				var Gt = o(oe, !0);
				a(oe);
				var ne = n(oe, 2);
				ne.__click = [xr, ue, _];
				var mt = o(ne),
					Jt = n(mt);
				{
					var Qt = (i) => {
						var x = wr();
						A(i, x);
					};
					Me(Jt, (i) => {
						e(ue) && i(Qt);
					});
				}
				a(ne), a(ft), a(Ie);
				var gt = n(Ie, 2),
					bt = o(gt),
					ea = o(bt, !0);
				a(bt),
					a(gt),
					a(ke),
					Pe(
						ke,
						(i) => u(ee, i),
						() => e(ee)
					),
					Re(
						(i, x, $, I, P, le, Z, S, Q, ze, Ce, ta, aa, ra, sa, oa, na) => {
							k(R, i),
								ie(Y, "data-tip", x),
								k(te, `${$ ?? ""} `),
								k(Ht, `${I ?? ""}:`),
								(We = K(X, 1, "pixelated size-full", null, We, P)),
								(Ne = K(
									je,
									1,
									"pixelated pointer-events-none absolute left-0 top-0 size-full",
									null,
									Ne,
									le
								)),
								k(Yt, `${Z ?? ""}:`),
								yt(rt, `background: ${e(T)}`),
								(ot = K(re, 1, "", null, ot, S)),
								(se.disabled = !e(Se)),
								k(nt, `${Q ?? ""} `),
								k(Ot, ` ${ze ?? ""}`),
								k(Wt, `${Ce ?? ""} `),
								(dt = K(
									J,
									1,
									"btn btn-lg btn-square sm:btn-xl shadow-md",
									null,
									dt,
									ta
								)),
								k(Nt, aa),
								k(Vt, ra),
								k(Gt, sa),
								(ne.disabled = e(ue)),
								k(mt, `${oa ?? ""} `),
								k(ea, na);
						},
						[
							() => nr(),
							() => er(),
							() => rr(),
							() => Dt(),
							() => ({ "cursor-pencil": !e(y), "cursor-eraser": e(y) }),
							() => ({ hidden: e(de) }),
							() => Dt(),
							() => ({ tooltip: !e(Se) }),
							() => za(),
							() => c.price.toLocaleString("en-US"),
							() => ya(),
							() => ({ "btn-primary": e(y) }),
							() => ka(),
							() => Fa(),
							() => $a(),
							() => Ua(),
							() => Da(),
						]
					),
					z("mouseleave", X, (i) => {
						ve(i.offsetX, i.offsetY), (D = [i.offsetX, i.offsetY]);
					}),
					z("focus", G, () => {
						u(y, !1);
					}),
					_a(
						st,
						() => e(T),
						(i) => u(T, i)
					),
					z("focus", J, () => {
						u(y, !0);
					}),
					A(s, d);
			},
			At = (s) => {
				var d = ht(),
					l = Te(d);
				{
					var v = (p) => {
						var f = kr(),
							g = o(f),
							b = o(g, !0);
						a(g);
						var R = n(g, 2),
							M = o(R, !0);
						a(R),
							a(f),
							Re(
								(Y, F) => {
									k(b, Y), k(M, F);
								},
								[() => Na(), () => Ga()]
							),
							A(p, f);
					};
					Me(
						l,
						(p) => {
							!h.data && !h.loading && p(v);
						},
						!0
					);
				}
				A(s, d);
			};
		Me(Et, (s) => {
			h.data ? s(St) : s(At, !1);
		});
	}
	A(r, Ye), da();
}
la(["change", "click", "touchmove", "mousemove"]);
export { Fr as component };
