import { A as e, F as t, M as n, N as r, X as i, at as a, b as o, d as s, f as c, h as l, l as u, m as d, ot as f, p, rt as m, s as h, st as g, t as ee, v as _, z as te } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
import { t as v } from "./dist-BzRLLpfq.js";
import { t as ne } from "./useI18n-CWX9ZTCW.js";
import { h as y, i as b, m as x, p as S, u as C } from "./styleConstants-DkfOPzGu.js";
//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
var w = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, T = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
360 / (Math.PI * 2);
var re = (e) => j(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
	r: parseInt(e[0] + e[0], 16),
	g: parseInt(e[1] + e[1], 16),
	b: parseInt(e[2] + e[2], 16),
	a: e.length === 4 ? T(parseInt(e[3] + e[3], 16) / 255, 2) : 1
} : {
	r: parseInt(e.substring(0, 2), 16),
	g: parseInt(e.substring(2, 4), 16),
	b: parseInt(e.substring(4, 6), 16),
	a: e.length === 8 ? T(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
}), ie = (e) => A(O(e)), ae = ({ h: e, s: t, v: n, a: r }) => {
	let i = (200 - t) * n / 100;
	return {
		h: T(e),
		s: T(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
		l: T(i / 2),
		a: T(r, 2)
	};
}, D = (e) => {
	let { h: t, s: n, l: r } = ae(e);
	return `hsl(${t}, ${n}%, ${r}%)`;
}, O = ({ h: e, s: t, v: n, a: r }) => {
	e = e / 360 * 6, t /= 100, n /= 100;
	let i = Math.floor(e), a = n * (1 - t), o = n * (1 - (e - i) * t), s = n * (1 - (1 - e + i) * t), c = i % 6;
	return {
		r: T([
			n,
			o,
			a,
			a,
			s,
			n
		][c] * 255),
		g: T([
			s,
			n,
			n,
			o,
			a,
			a
		][c] * 255),
		b: T([
			a,
			a,
			s,
			n,
			n,
			o
		][c] * 255),
		a: T(r, 2)
	};
}, k = (e) => {
	let t = e.toString(16);
	return t.length < 2 ? "0" + t : t;
}, A = ({ r: e, g: t, b: n, a: r }) => {
	let i = r < 1 ? k(T(r * 255)) : "";
	return "#" + k(e) + k(t) + k(n) + i;
}, j = ({ r: e, g: t, b: n, a: r }) => {
	let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = a ? i === e ? (t - n) / a : i === t ? 2 + (n - e) / a : 4 + (e - t) / a : 0;
	return {
		h: T(60 * (o < 0 ? o + 6 : o)),
		s: T(i ? a / i * 100 : 0),
		v: T(i / 255 * 100),
		a: r
	};
}, M = (e, t) => {
	if (e === t) return !0;
	for (let n in e) if (e[n] !== t[n]) return !1;
	return !0;
}, oe = (e, t) => e.toLowerCase() === t.toLowerCase() ? !0 : M(E(e), E(t)), N = {}, P = (e) => {
	let t = N[e];
	return t || (t = document.createElement("template"), t.innerHTML = e, N[e] = t), t;
}, F = (e, t, n) => {
	e.dispatchEvent(new CustomEvent(t, {
		bubbles: !0,
		detail: n
	}));
}, I = !1, L = (e) => "touches" in e, R = (e) => I && !L(e) ? !1 : (I ||= L(e), !0), z = (e, t) => {
	let n = L(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
	F(e.el, "move", e.getMove({
		x: w((n.pageX - (r.left + window.pageXOffset)) / r.width),
		y: w((n.pageY - (r.top + window.pageYOffset)) / r.height)
	}));
}, B = (e, t) => {
	let n = t.keyCode;
	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), F(e.el, "move", e.getMove({
		x: n === 39 ? .01 : n === 37 ? -.01 : n === 34 ? .05 : n === 33 ? -.05 : n === 35 ? 1 : n === 36 ? -1 : 0,
		y: n === 40 ? .01 : n === 38 ? -.01 : 0
	}, !0)));
}, V = class {
	constructor(e, t, n, r) {
		let i = P(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
		e.appendChild(i.content.cloneNode(!0));
		let a = e.querySelector(`[part=${t}]`);
		a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = r, this.nodes = [a.firstChild, a];
	}
	set dragging(e) {
		let t = e ? document.addEventListener : document.removeEventListener;
		t(I ? "touchmove" : "mousemove", this), t(I ? "touchend" : "mouseup", this);
	}
	handleEvent(e) {
		switch (e.type) {
			case "mousedown":
			case "touchstart":
				if (e.preventDefault(), !R(e) || !I && e.button != 0) return;
				this.el.focus(), z(this, e), this.dragging = !0;
				break;
			case "mousemove":
			case "touchmove":
				e.preventDefault(), z(this, e);
				break;
			case "mouseup":
			case "touchend":
				this.dragging = !1;
				break;
			case "keydown":
				B(this, e);
				break;
		}
	}
	style(e) {
		e.forEach((e, t) => {
			for (let n in e) this.nodes[t].style.setProperty(n, e[n]);
		});
	}
}, H = class extends V {
	constructor(e) {
		super(e, "hue", "aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"", !1);
	}
	update({ h: e }) {
		this.h = e, this.style([{
			left: `${e / 360 * 100}%`,
			color: D({
				h: e,
				s: 100,
				v: 100,
				a: 1
			})
		}]), this.el.setAttribute("aria-valuenow", `${T(e)}`);
	}
	getMove(e, t) {
		return { h: t ? w(this.h + e.x * 360, 0, 360) : 360 * e.x };
	}
}, U = class extends V {
	constructor(e) {
		super(e, "saturation", "aria-label=\"Color\"", !0);
	}
	update(e) {
		this.hsva = e, this.style([{
			top: `${100 - e.v}%`,
			left: `${e.s}%`,
			color: D(e)
		}, { "background-color": D({
			h: e.h,
			s: 100,
			v: 100,
			a: 1
		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${T(e.s)}%, Brightness ${T(e.v)}%`);
	}
	getMove(e, t) {
		return {
			s: t ? w(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
			v: t ? w(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
		};
	}
}, W = ":host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}", G = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", K = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", q = Symbol("same"), J = Symbol("color"), Y = Symbol("hsva"), X = Symbol("update"), Z = Symbol("parts"), Q = Symbol("css"), $ = Symbol("sliders"), se = class extends HTMLElement {
	static get observedAttributes() {
		return ["color"];
	}
	get [Q]() {
		return [
			W,
			G,
			K
		];
	}
	get [$]() {
		return [U, H];
	}
	get color() {
		return this[J];
	}
	set color(e) {
		if (!this[q](e)) {
			let t = this.colorModel.toHsva(e);
			this[X](t), this[J] = e;
		}
	}
	constructor() {
		super();
		let e = P(`<style>${this[Q].join("")}</style>`), t = this.attachShadow({ mode: "open" });
		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[Z] = this[$].map((e) => new e(t));
	}
	connectedCallback() {
		if (this.hasOwnProperty("color")) {
			let e = this.color;
			delete this.color, this.color = e;
		} else this.color ||= this.colorModel.defaultColor;
	}
	attributeChangedCallback(e, t, n) {
		let r = this.colorModel.fromAttr(n);
		this[q](r) || (this.color = r);
	}
	handleEvent(e) {
		let t = this[Y], n = {
			...t,
			...e.detail
		};
		this[X](n);
		let r;
		!M(n, t) && !this[q](r = this.colorModel.fromHsva(n)) && (this[J] = r, F(this, "color-changed", { value: r }));
	}
	[q](e) {
		return this.color && this.colorModel.equal(e, this.color);
	}
	[X](e) {
		this[Y] = e, this[Z].forEach((t) => t.update(e));
	}
}, ce = {
	defaultColor: "#000",
	toHsva: re,
	fromHsva: ({ h: e, s: t, v: n }) => ie({
		h: e,
		s: t,
		v: n,
		a: 1
	}),
	equal: oe,
	fromAttr: (e) => e
}, le = class extends se {
	get colorModel() {
		return ce;
	}
}, ue = class extends le {};
customElements.define("hex-color-picker", ue);
//#endregion
//#region src/components/ColorPicker.vue?vue&type=script&setup=true&lang.ts
var de = [
	"disabled",
	"aria-label",
	"aria-expanded"
], fe = [
	"value",
	"placeholder",
	"disabled",
	"aria-label"
], pe = ["color", "aria-label"], me = /* @__PURE__ */ o({
	__name: "ColorPicker",
	props: {
		modelValue: {},
		placeholder: { default: b },
		size: { default: "default" },
		swatchOnly: {
			type: Boolean,
			default: !1
		},
		disabled: {
			type: Boolean,
			default: !1
		}
	},
	emits: ["update:modelValue"],
	setup(t, { emit: n }) {
		let r = t, o = n, { t: u } = ne(), p = i(!1), g = i(), y = i();
		v(g, () => {
			p.value = !1;
		}, { ignore: [y] });
		let b = s({
			get: () => r.modelValue || "#000000",
			set: (e) => o("update:modelValue", e)
		});
		function x(e) {
			b.value = e.detail.value;
		}
		function S(e) {
			b.value = e.target.value;
		}
		return (n, r) => (e(), l("div", { class: a(["tpl:flex tpl:gap-2 tpl:relative", t.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
			c("button", {
				ref_key: "swatchRef",
				ref: y,
				type: "button",
				disabled: t.disabled,
				"aria-label": m(u).colorPicker.pickColor,
				"aria-expanded": p.value,
				class: a([
					"tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
					t.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
					p.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !t.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
					t.size === "large" ? "tpl:size-12" : "tpl:size-10"
				]),
				onClick: r[0] ||= (e) => !t.disabled && (p.value = !p.value)
			}, [c("span", {
				class: "tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]",
				style: f({ backgroundColor: b.value })
			}, null, 4)], 10, de),
			t.swatchOnly ? d("", !0) : (e(), l("input", {
				key: 0,
				type: "text",
				class: a(m(C)),
				value: t.modelValue,
				placeholder: t.placeholder,
				disabled: t.disabled,
				"aria-label": m(u).colorPicker.hexValue,
				onInput: S
			}, null, 42, fe)),
			_(ee, {
				"enter-active-class": "tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
				"enter-from-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1",
				"enter-to-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
				"leave-active-class": "tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
				"leave-from-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
				"leave-to-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1"
			}, {
				default: te(() => [p.value ? (e(), l("div", {
					key: 0,
					ref_key: "popoverRef",
					ref: g,
					class: "tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg"
				}, [c("hex-color-picker", {
					color: b.value,
					"aria-label": m(u).colorPicker.pickColor,
					onColorChanged: x,
					onKeydown: r[1] ||= h((e) => p.value = !1, ["escape"])
				}, null, 40, pe)], 512)) : d("", !0)]),
				_: 1
			})
		], 2));
	}
}), he = [
	"aria-checked",
	"aria-label",
	"title",
	"onClick"
], ge = { key: 1 }, _e = /* @__PURE__ */ o({
	__name: "SlidingPillSelect",
	props: {
		options: {},
		modelValue: {}
	},
	emits: ["update:modelValue"],
	setup(r, { emit: i }) {
		let a = r, o = i, c = s(() => a.options.findIndex((e) => e.value === a.modelValue)), m = s(() => `translateX(${Math.max(c.value, 0) * 100}%)`);
		return (i, a) => (e(), l("div", {
			role: "radiogroup",
			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
			style: f({
				gridTemplateColumns: `repeat(${r.options.length}, 1fr)`,
				backgroundColor: "var(--tpl-bg-hover)"
			})
		}, [c.value >= 0 ? (e(), l("div", {
			key: 0,
			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
			style: f({
				left: "4px",
				width: `calc((100% - 8px) / ${r.options.length})`,
				transform: m.value,
				backgroundColor: "var(--tpl-bg)",
				boxShadow: "var(--tpl-shadow)",
				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
			})
		}, null, 4)) : d("", !0), (e(!0), l(u, null, n(r.options, (n) => (e(), l("button", {
			key: n.value,
			role: "radio",
			"aria-checked": r.modelValue === n.value,
			"aria-label": n.label,
			class: "tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium",
			style: f({
				color: r.modelValue === n.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
			}),
			title: n.label,
			onClick: (e) => o("update:modelValue", n.value)
		}, [n.icon ? (e(), p(t(n.icon), {
			key: 0,
			size: 14,
			"stroke-width": 2
		})) : (e(), l("span", ge, g(n.label), 1))], 12, he))), 128))], 4));
	}
}), ve = { class: "tpl:mb-3.5" }, ye = /* @__PURE__ */ o({
	__name: "FieldRow",
	props: { label: {} },
	setup(t) {
		return (n, i) => (e(), l("div", ve, [t.label ? (e(), l("label", {
			key: 0,
			class: a(m(y))
		}, g(t.label), 3)) : d("", !0), r(n.$slots, "default")]));
	}
}), be = { class: "tpl:flex tpl:items-stretch" }, xe = [
	"value",
	"min",
	"max"
], Se = /* @__PURE__ */ o({
	__name: "NumberWithSuffix",
	props: {
		modelValue: {},
		min: {},
		max: {},
		suffix: {}
	},
	emits: ["update:modelValue"],
	setup(t, { emit: n }) {
		let r = n;
		return (n, i) => (e(), l("div", be, [c("input", {
			type: "number",
			class: a(m(S)),
			value: t.modelValue,
			min: t.min,
			max: t.max,
			onInput: i[0] ||= (e) => r("update:modelValue", Number(e.target.value))
		}, null, 42, xe), c("span", { class: a(m(x)) }, g(t.suffix), 3)]));
	}
});
//#endregion
export { me as i, ye as n, _e as r, Se as t };
