@aham.ro/ui-designer 0.1.8 → 0.1.10

package/dist/ui-designer.js

@@ -1,7 +1,119 @@
-import { Fragment as e, Teleport as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createStaticVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, getCurrentInstance as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, onMounted as g, onUnmounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveComponent as S, resolveDynamicComponent as C, shallowRef as w, toDisplayString as T, toRefs as E, unref as D, vModelText as O, watch as k, watchPostEffect as A, withCtx as j, withDirectives as M, withKeys as ee, withModifiers as N } from "vue";
-import { defineStore as te } from "pinia";
+import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, getCurrentInstance as d, guardReactiveProps as f, nextTick as p, normalizeClass as m, normalizeProps as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as v, onUnmounted as y, openBlock as b, ref as x, renderList as S, renderSlot as C, resolveDirective as w, resolveDynamicComponent as T, shallowRef as E, toDisplayString as D, toRefs as O, unref as k, vModelText as A, watch as j, watchPostEffect as M, withCtx as N, withDirectives as P, withKeys as F, withModifiers as I } from "vue";
+import { defineStore as L } from "pinia";
+//#region src/stores/translations.ts
+function R(e) {
+	return {
+		...e,
+		key: e.key ?? e.id,
+		translations: {
+			...e.value === void 0 ? {} : { en: e.value },
+			...e.translations
+		}
+	};
+}
+var z = L("translations", {
+	state: () => ({ items: [] }),
+	getters: { fields: (e) => e.items },
+	actions: {
+		setItems(e) {
+			this.items = e.map(R);
+		},
+		setScreenItems(e, t) {
+			this.items = [...this.items.filter((t) => t.screenId !== e), ...t.map((t) => R({
+				...t,
+				screenId: e
+			}))];
+		},
+		setComponentItems(e, t) {
+			this.items = [...this.items.filter((t) => t.componentId !== e), ...t.map((t) => R({
+				...t,
+				componentId: e
+			}))];
+		},
+		updateValue(e, t, n = "en") {
+			let r = this.items.find((t) => t.id === e);
+			r && (r.translations[n] = t, n === "en" && (r.source = t));
+		},
+		ensureValue(e, t, n) {
+			let r = this.items.find((t) => t.id === e);
+			if (r) {
+				r.translations.en || (r.translations.en = t);
+				return;
+			}
+			this.items.push(R({
+				id: e,
+				path: e,
+				source: t,
+				value: t,
+				componentId: n
+			}));
+		},
+		getValue(e, t = "en") {
+			return this.items.find((t) => t.id === e)?.translations[t] ?? "";
+		},
+		remove(e) {
+			this.items = this.items.filter((t) => t.id !== e);
+		},
+		clear() {
+			this.items = [];
+		}
+	}
+}), B = L("workspace", {
+	state: () => ({
+		components: [],
+		selectedId: void 0,
+		activeTemplateId: void 0,
+		activeTemplateName: "",
+		templateComponents: {}
+	}),
+	getters: {
+		selectedIndex: (e) => e.components.findIndex(({ id: t }) => t === e.selectedId),
+		selectedComponent: (e) => e.components.find(({ id: t }) => t === e.selectedId)
+	},
+	actions: {
+		setActiveTemplate(e, t = "") {
+			e && e !== this.activeTemplateId && (this.activeTemplateId && (this.templateComponents[this.activeTemplateId] = this.components), this.activeTemplateId = e, this.activeTemplateName = t, this.components = this.templateComponents[e] ?? [], this.selectedId = void 0);
+		},
+		addComponent(e, t, n = {}) {
+			let r = {
+				id: `${e}-${Date.now()}-${this.components.length}`,
+				type: e,
+				props: n
+			};
+			return t === void 0 || t >= this.components.length ? this.components.push(r) : this.components.splice(Math.max(0, t), 0, r), this.selectedId = r.id, r;
+		},
+		updateComponentProps(e, t) {
+			let n = this.components.find((t) => t.id === e);
+			n && (n.props = {
+				...n.props,
+				...t
+			});
+		},
+		selectComponent(e) {
+			let t = this.components[e];
+			if (t) return this.selectedId = this.selectedId === t.id ? void 0 : t.id, this.selectedId ? t : void 0;
+		},
+		deselect() {
+			this.selectedId = void 0;
+		},
+		deleteSelected() {
+			let e = this.selectedIndex;
+			e < 0 || (this.components.splice(e, 1), this.deselect());
+		},
+		move(e, t) {
+			if (e < 0 || t < 0 || e >= this.components.length || t >= this.components.length) return;
+			let [n] = this.components.splice(e, 1);
+			this.components.splice(t, 0, n);
+		},
+		remove(e) {
+			let t = this.components.findIndex((t) => t.id === e);
+			t < 0 || (this.components.splice(t, 1), this.selectedId === e && this.deselect());
+		}
+	}
+});
+//#endregion
 //#region src/composables/useTranslation.ts
-function P() {
+function V() {
 	let e = d()?.appContext.config.globalProperties, t = e?.$t, n = typeof t == "function" ? t.bind(e) : void 0;
 	return (e, t) => {
 		let r = n?.(e);
@@ -10,7 +122,7 @@ function P() {
 }
 //#endregion
 //#region node_modules/overlayscrollbars/overlayscrollbars.mjs
-var F = (e, t) => {
+var H = (e, t) => {
 	let { o: n, i: r, u: i } = e, a = n, o, s = (e, t) => {
 		let n = a, s = e, c = t || (r ? !r(n, s) : n !== s);
 		return (c || i) && (a = s, o = n), [
@@ -24,42 +136,42 @@ var F = (e, t) => {
 		!!e,
 		o
 	]];
-}, I = typeof window < "u" && typeof HTMLElement < "u" && window.document ? window : {}, L = Math.max, R = Math.min, z = Math.round, B = Math.abs, V = Math.sign, ne = I.cancelAnimationFrame, re = I.requestAnimationFrame, ie = I.setTimeout, ae = I.clearTimeout, oe = (e) => I[e] === void 0 ? void 0 : I[e], se = oe("MutationObserver"), ce = oe("IntersectionObserver"), le = oe("ResizeObserver"), ue = oe("ScrollTimeline"), de = (e) => e === void 0, fe = (e) => e === null, pe = (e) => typeof e == "number", me = (e) => typeof e == "string", he = (e) => typeof e == "boolean", H = (e) => typeof e == "function", U = (e) => Array.isArray(e), ge = (e) => typeof e == "object" && !U(e) && !fe(e), _e = (e) => {
-	let t = !!e && e.length, n = pe(t) && t > -1 && t % 1 == 0;
-	return U(e) || !H(e) && n ? t > 0 && ge(e) ? t - 1 in e : !0 : !1;
-}, ve = (e) => !!e && e.constructor === Object, ye = (e) => e instanceof HTMLElement, W = (e) => e instanceof Element;
-function G(e, t) {
-	if (_e(e)) for (let n = 0; n < e.length && t(e[n], n, e) !== !1; n++);
-	else e && G(Object.keys(e), ((n) => t(e[n], n, e)));
+}, U = typeof window < "u" && typeof HTMLElement < "u" && window.document ? window : {}, ee = Math.max, te = Math.min, ne = Math.round, W = Math.abs, re = Math.sign, ie = U.cancelAnimationFrame, ae = U.requestAnimationFrame, oe = U.setTimeout, se = U.clearTimeout, ce = (e) => U[e] === void 0 ? void 0 : U[e], le = ce("MutationObserver"), ue = ce("IntersectionObserver"), de = ce("ResizeObserver"), fe = ce("ScrollTimeline"), pe = (e) => e === void 0, me = (e) => e === null, he = (e) => typeof e == "number", ge = (e) => typeof e == "string", _e = (e) => typeof e == "boolean", ve = (e) => typeof e == "function", G = (e) => Array.isArray(e), ye = (e) => typeof e == "object" && !G(e) && !me(e), be = (e) => {
+	let t = !!e && e.length, n = he(t) && t > -1 && t % 1 == 0;
+	return G(e) || !ve(e) && n ? t > 0 && ye(e) ? t - 1 in e : !0 : !1;
+}, xe = (e) => !!e && e.constructor === Object, Se = (e) => e instanceof HTMLElement, Ce = (e) => e instanceof Element;
+function K(e, t) {
+	if (be(e)) for (let n = 0; n < e.length && t(e[n], n, e) !== !1; n++);
+	else e && K(Object.keys(e), ((n) => t(e[n], n, e)));
 	return e;
 }
-var be = (e, t) => e.indexOf(t) >= 0, xe = (e, t) => e.concat(t), K = (e, t, n) => (!me(t) && _e(t) ? Array.prototype.push.apply(e, t) : e.push(t), e), Se = (e) => Array.from(e || []), Ce = (e) => U(e) ? e : !me(e) && _e(e) ? Se(e) : [e], we = (e) => !!e && !e.length, Te = (e) => Se(new Set(e)), q = (e, t, n) => {
-	G(e, (e) => !e || e.apply(void 0, t || [])), n || (e.length = 0);
-}, Ee = "paddingTop", De = "paddingRight", Oe = "paddingLeft", ke = "paddingBottom", Ae = "marginLeft", je = "marginRight", Me = "marginBottom", Ne = "overflowX", Pe = "overflowY", Fe = "width", Ie = "height", Le = "visible", Re = "hidden", ze = "scroll", Be = (e) => {
+var we = (e, t) => e.indexOf(t) >= 0, Te = (e, t) => e.concat(t), q = (e, t, n) => (!ge(t) && be(t) ? Array.prototype.push.apply(e, t) : e.push(t), e), Ee = (e) => Array.from(e || []), De = (e) => G(e) ? e : !ge(e) && be(e) ? Ee(e) : [e], Oe = (e) => !!e && !e.length, ke = (e) => Ee(new Set(e)), Ae = (e, t, n) => {
+	K(e, (e) => !e || e.apply(void 0, t || [])), n || (e.length = 0);
+}, je = "paddingTop", Me = "paddingRight", Ne = "paddingLeft", Pe = "paddingBottom", Fe = "marginLeft", Ie = "marginRight", Le = "marginBottom", Re = "overflowX", ze = "overflowY", Be = "width", Ve = "height", He = "visible", Ue = "hidden", We = "scroll", Ge = (e) => {
 	let t = String(e || "");
 	return t ? t[0].toUpperCase() + t.slice(1) : "";
-}, Ve = (e, t, n, r) => {
+}, Ke = (e, t, n, r) => {
 	if (e && t) {
 		let r = !0;
-		return G(n, ((n) => {
+		return K(n, ((n) => {
 			e[n] !== t[n] && (r = !1);
 		})), r;
 	}
 	return !1;
-}, He = (e, t) => Ve(e, t, ["w", "h"]), Ue = (e, t) => Ve(e, t, ["x", "y"]), We = (e, t) => Ve(e, t, [
+}, qe = (e, t) => Ke(e, t, ["w", "h"]), Je = (e, t) => Ke(e, t, ["x", "y"]), Ye = (e, t) => Ke(e, t, [
 	"t",
 	"r",
 	"b",
 	"l"
-]), J = (e, ...t) => e.bind(0, ...t), Ge = (e) => {
-	let t, n = e ? ie : re, r = e ? ae : ne;
+]), J = (e, ...t) => e.bind(0, ...t), Xe = (e) => {
+	let t, n = e ? oe : ae, r = e ? se : ie;
 	return [(i) => {
-		r(t), t = n((() => i()), H(e) ? e() : e);
+		r(t), t = n((() => i()), ve(e) ? e() : e);
 	}, () => r(t)];
-}, Ke = (e) => {
-	let t = H(e) ? e() : e;
-	if (pe(t)) {
-		let e = t ? ie : re, n = t ? ae : ne;
+}, Ze = (e) => {
+	let t = ve(e) ? e() : e;
+	if (he(t)) {
+		let e = t ? oe : ae, n = t ? se : ie;
 		return (r) => {
 			let i = e((() => r()), t);
 			return () => {
@@ -68,20 +180,20 @@ var be = (e, t) => e.indexOf(t) >= 0, xe = (e, t) => e.concat(t), K = (e, t, n)
 		};
 	}
 	return t && t._;
-}, qe = (e, t) => {
+}, Qe = (e, t) => {
 	let { p: n, v: r, S: i, m: a } = t || {}, o, s, c, l, u = function(t) {
 		s && s(), o && o(), l = s = o = c = void 0, e.apply(this, t);
 	}, d = (e) => a && c ? a(c, e) : e, f = () => {
 		s && c && u(d(c) || c);
 	}, p = function() {
-		let e = Se(arguments), t = Ke(n);
+		let e = Ee(arguments), t = Ze(n);
 		if (t) {
-			let n = typeof i == "function" ? i() : i, a = Ke(r), p = d(e) || e, m = u.bind(0, p);
+			let n = typeof i == "function" ? i() : i, a = Ze(r), p = d(e) || e, m = u.bind(0, p);
 			s && s(), n && !l ? (m(), l = !0, s = t((() => l = void 0))) : (s = t(m), a && !o && (o = a(f))), c = p;
 		} else u(e);
 	};
 	return p.O = f, p;
-}, Je = (e, t) => Object.prototype.hasOwnProperty.call(e, t), Y = (e) => e ? Object.keys(e) : [], X = (e, t, n, r, i, a, o) => {
+}, $e = (e, t) => Object.prototype.hasOwnProperty.call(e, t), Y = (e) => e ? Object.keys(e) : [], X = (e, t, n, r, i, a, o) => {
 	let s = [
 		t,
 		n,
@@ -90,139 +202,139 @@ var be = (e, t) => e.indexOf(t) >= 0, xe = (e, t) => e.concat(t), K = (e, t, n)
 		a,
 		o
 	];
-	return (typeof e != "object" || fe(e)) && !H(e) && (e = {}), G(s, ((t) => {
-		G(t, ((n, r) => {
+	return (typeof e != "object" || me(e)) && !ve(e) && (e = {}), K(s, ((t) => {
+		K(t, ((n, r) => {
 			let i = t[r];
 			if (e === i) return !0;
-			let a = U(i);
-			if (i && ve(i)) {
+			let a = G(i);
+			if (i && xe(i)) {
 				let t = e[r], n = t;
-				a && !U(t) ? n = [] : !a && !ve(t) && (n = {}), e[r] = X(n, i);
+				a && !G(t) ? n = [] : !a && !xe(t) && (n = {}), e[r] = X(n, i);
 			} else e[r] = a ? i.slice() : i;
 		}));
 	})), e;
-}, Ye = (e, t) => G(X({}, e), ((e, t, n) => {
-	e === void 0 ? delete n[t] : e && ve(e) && (n[t] = Ye(e));
-})), Xe = (e) => !Y(e).length, Ze = () => {}, Qe = (e, t, n) => L(e, R(t, n)), $e = (e) => Te((U(e) ? e : (e || "").split(" ")).filter(((e) => e))), et = (e, t) => e && e.getAttribute(t), tt = (e, t) => e && e.hasAttribute(t), nt = (e, t, n) => {
-	G($e(t), ((t) => {
+}, et = (e, t) => K(X({}, e), ((e, t, n) => {
+	e === void 0 ? delete n[t] : e && xe(e) && (n[t] = et(e));
+})), tt = (e) => !Y(e).length, nt = () => {}, rt = (e, t, n) => ee(e, te(t, n)), it = (e) => ke((G(e) ? e : (e || "").split(" ")).filter(((e) => e))), at = (e, t) => e && e.getAttribute(t), ot = (e, t) => e && e.hasAttribute(t), st = (e, t, n) => {
+	K(it(t), ((t) => {
 		e && e.setAttribute(t, String(n || ""));
 	}));
-}, rt = (e, t) => {
-	G($e(t), ((t) => e && e.removeAttribute(t)));
-}, it = (e, t) => {
-	let n = $e(et(e, t)), r = J(nt, e, t), i = (e, t) => {
+}, ct = (e, t) => {
+	K(it(t), ((t) => e && e.removeAttribute(t)));
+}, lt = (e, t) => {
+	let n = it(at(e, t)), r = J(st, e, t), i = (e, t) => {
 		let r = new Set(n);
-		return G($e(e), ((e) => {
+		return K(it(e), ((e) => {
 			r[t](e);
-		})), Se(r).join(" ");
+		})), Ee(r).join(" ");
 	};
 	return {
 		C: (e) => r(i(e, "delete")),
 		$: (e) => r(i(e, "add")),
 		H: (e) => {
-			let t = $e(e);
+			let t = it(e);
 			return t.reduce(((e, t) => e && n.includes(t)), t.length > 0);
 		}
 	};
-}, at = (e, t, n) => (it(e, t).C(n), J(ot, e, t, n)), ot = (e, t, n) => (it(e, t).$(n), J(at, e, t, n)), st = (e, t, n, r) => (r ? ot : at)(e, t, n), ct = (e, t, n) => it(e, t).H(n), lt = (e) => it(e, "class"), ut = (e, t) => {
-	lt(e).C(t);
-}, dt = (e, t) => (lt(e).$(t), J(ut, e, t)), ft = (e, t) => {
-	let n = t ? W(t) && t : document;
-	return n ? Se(n.querySelectorAll(e)) : [];
-}, pt = (e, t) => {
-	let n = t ? W(t) && t : document;
+}, ut = (e, t, n) => (lt(e, t).C(n), J(dt, e, t, n)), dt = (e, t, n) => (lt(e, t).$(n), J(ut, e, t, n)), ft = (e, t, n, r) => (r ? dt : ut)(e, t, n), pt = (e, t, n) => lt(e, t).H(n), mt = (e) => lt(e, "class"), ht = (e, t) => {
+	mt(e).C(t);
+}, gt = (e, t) => (mt(e).$(t), J(ht, e, t)), _t = (e, t) => {
+	let n = t ? Ce(t) && t : document;
+	return n ? Ee(n.querySelectorAll(e)) : [];
+}, vt = (e, t) => {
+	let n = t ? Ce(t) && t : document;
 	return n && n.querySelector(e);
-}, mt = (e, t) => W(e) && e.matches(t), ht = (e) => mt(e, "body"), gt = (e) => e ? Se(e.childNodes) : [], _t = (e) => e && e.parentElement, vt = (e, t) => W(e) && e.closest(t), yt = (e) => document.activeElement, bt = (e, t, n) => {
-	let r = vt(e, t), i = e && pt(n, r), a = vt(i, t) === r;
-	return r && i ? r === e || i === e || a && vt(vt(e, n), t) !== r : !1;
-}, xt = (e) => {
-	G(Ce(e), ((e) => {
-		let t = _t(e);
+}, yt = (e, t) => Ce(e) && e.matches(t), bt = (e) => yt(e, "body"), xt = (e) => e ? Ee(e.childNodes) : [], St = (e) => e && e.parentElement, Ct = (e, t) => Ce(e) && e.closest(t), wt = (e) => document.activeElement, Tt = (e, t, n) => {
+	let r = Ct(e, t), i = e && vt(n, r), a = Ct(i, t) === r;
+	return r && i ? r === e || i === e || a && Ct(Ct(e, n), t) !== r : !1;
+}, Et = (e) => {
+	K(De(e), ((e) => {
+		let t = St(e);
 		e && t && t.removeChild(e);
 	}));
-}, Z = (e, t) => J(xt, e && t && G(Ce(t), ((t) => {
+}, Dt = (e, t) => J(Et, e && t && K(De(t), ((t) => {
 	t && e.appendChild(t);
-}))), St, Ct = () => St, wt = (e) => {
-	St = e;
-}, Tt = (e) => {
+}))), Ot, kt = () => Ot, At = (e) => {
+	Ot = e;
+}, jt = (e) => {
 	let t = document.createElement("div");
-	return nt(t, "class", e), t;
-}, Et = (e) => {
-	let t = Tt(), n = Ct(), r = e.trim();
-	return t.innerHTML = n ? n.createHTML(r) : r, G(gt(t), ((e) => xt(e)));
-}, Dt = (e, t) => e.getPropertyValue(t) || e[t] || "", Ot = (e) => {
+	return st(t, "class", e), t;
+}, Mt = (e) => {
+	let t = jt(), n = kt(), r = e.trim();
+	return t.innerHTML = n ? n.createHTML(r) : r, K(xt(t), ((e) => Et(e)));
+}, Nt = (e, t) => e.getPropertyValue(t) || e[t] || "", Pt = (e) => {
 	let t = e || 0;
 	return isFinite(t) ? t : 0;
-}, kt = (e) => Ot(parseFloat(e || "")), At = (e) => Math.round(e * 1e4) / 1e4, jt = (e) => `${At(Ot(e))}px`;
-function Mt(e, t) {
-	e && t && G(t, ((t, n) => {
+}, Ft = (e) => Pt(parseFloat(e || "")), It = (e) => Math.round(e * 1e4) / 1e4, Lt = (e) => `${It(Pt(e))}px`;
+function Rt(e, t) {
+	e && t && K(t, ((t, n) => {
 		try {
-			let r = e.style, i = fe(t) || he(t) ? "" : pe(t) ? jt(t) : t;
+			let r = e.style, i = me(t) || _e(t) ? "" : he(t) ? Lt(t) : t;
 			n.indexOf("--") === 0 ? r.setProperty(n, i) : r[n] = i;
 		} catch {}
 	}));
 }
-function Nt(e, t, n) {
-	let r = me(t), i = r ? "" : {};
+function zt(e, t, n) {
+	let r = ge(t), i = r ? "" : {};
 	if (e) {
-		let a = I.getComputedStyle(e, n) || e.style;
-		i = r ? Dt(a, t) : Se(t).reduce(((e, t) => (e[t] = Dt(a, t), e)), i);
+		let a = U.getComputedStyle(e, n) || e.style;
+		i = r ? Nt(a, t) : Ee(t).reduce(((e, t) => (e[t] = Nt(a, t), e)), i);
 	}
 	return i;
 }
-var Pt = (e, t, n) => {
-	let r = t ? `${t}-` : "", i = n ? `-${n}` : "", a = `${r}top${i}`, o = `${r}right${i}`, s = `${r}bottom${i}`, c = `${r}left${i}`, l = Nt(e, [
+var Bt = (e, t, n) => {
+	let r = t ? `${t}-` : "", i = n ? `-${n}` : "", a = `${r}top${i}`, o = `${r}right${i}`, s = `${r}bottom${i}`, c = `${r}left${i}`, l = zt(e, [
 		a,
 		o,
 		s,
 		c
 	]);
 	return {
-		t: kt(l[a]),
-		r: kt(l[o]),
-		b: kt(l[s]),
-		l: kt(l[c])
+		t: Ft(l[a]),
+		r: Ft(l[o]),
+		b: Ft(l[s]),
+		l: Ft(l[c])
 	};
-}, Ft = (e, t) => `translate${ge(e) ? `(${e.x},${e.y})` : `${t ? "X" : "Y"}(${e})`}`, It = (e) => !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length), Lt = {
+}, Vt = (e, t) => `translate${ye(e) ? `(${e.x},${e.y})` : `${t ? "X" : "Y"}(${e})`}`, Ht = (e) => !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length), Ut = {
 	w: 0,
 	h: 0
-}, Rt = (e, t) => t ? {
+}, Wt = (e, t) => t ? {
 	w: t[`${e}Width`],
 	h: t[`${e}Height`]
-} : Lt, zt = (e) => Rt("inner", e || I), Bt = J(Rt, "offset"), Vt = J(Rt, "client"), Ht = J(Rt, "scroll"), Ut = (e) => {
-	let t = parseFloat(Nt(e, Fe)) || 0, n = parseFloat(Nt(e, Ie)) || 0;
+} : Ut, Gt = (e) => Wt("inner", e || U), Kt = J(Wt, "offset"), qt = J(Wt, "client"), Jt = J(Wt, "scroll"), Yt = (e) => {
+	let t = parseFloat(zt(e, Be)) || 0, n = parseFloat(zt(e, Ve)) || 0;
 	return {
-		w: t - z(t),
-		h: n - z(n)
+		w: t - ne(t),
+		h: n - ne(n)
 	};
-}, Wt = (e) => e.getBoundingClientRect(), Gt = (e) => !!e && It(e), Kt = (e) => !!(e && (e[Ie] || e[Fe])), qt = (e, t) => {
-	let n = Kt(e);
-	return !Kt(t) && n;
-}, Jt = (e, t, n, r) => {
-	G($e(t), ((t) => {
+}, Xt = (e) => e.getBoundingClientRect(), Zt = (e) => !!e && Ht(e), Qt = (e) => !!(e && (e[Ve] || e[Be])), $t = (e, t) => {
+	let n = Qt(e);
+	return !Qt(t) && n;
+}, en = (e, t, n, r) => {
+	K(it(t), ((t) => {
 		e && e.removeEventListener(t, n, r);
 	}));
-}, Q = (e, t, n, r) => {
+}, Z = (e, t, n, r) => {
 	let i = (r && r.D) ?? !0, a = r && r.I || !1, o = r && r.A || !1, s = {
 		passive: i,
 		capture: a
 	};
-	return J(q, $e(t).map(((t) => {
+	return J(Ae, it(t).map(((t) => {
 		let r = o ? (i) => {
-			Jt(e, t, r, a), n && n(i);
+			en(e, t, r, a), n && n(i);
 		} : n;
-		return e && e.addEventListener(t, r, s), J(Jt, e, t, r, a);
+		return e && e.addEventListener(t, r, s), J(en, e, t, r, a);
 	})));
-}, Yt = (e) => e.stopPropagation(), Xt = (e) => e.preventDefault(), Zt = (e) => Yt(e) || Xt(e), Qt = (e, t) => {
-	let { x: n, y: r } = pe(t) ? {
+}, tn = (e) => e.stopPropagation(), nn = (e) => e.preventDefault(), rn = (e) => tn(e) || nn(e), an = (e, t) => {
+	let { x: n, y: r } = he(t) ? {
 		x: t,
 		y: t
 	} : t || {};
-	pe(n) && (e.scrollLeft = n), pe(r) && (e.scrollTop = r);
-}, $t = (e) => ({
+	he(n) && (e.scrollLeft = n), he(r) && (e.scrollTop = r);
+}, on = (e) => ({
 	x: e.scrollLeft,
 	y: e.scrollTop
-}), en = () => ({
+}), sn = () => ({
 	T: {
 		x: 0,
 		y: 0
@@ -231,11 +343,11 @@ var Pt = (e, t, n) => {
 		x: 0,
 		y: 0
 	}
-}), tn = (e, t) => {
+}), cn = (e, t) => {
 	let { T: n, k: r } = e, { w: i, h: a } = t, o = (e, t, n) => {
-		let r = V(e) * n, i = V(t) * n;
+		let r = re(e) * n, i = re(t) * n;
 		if (r === i) {
-			let n = B(e), a = B(t);
+			let n = W(e), a = W(t);
 			i = n > a ? 0 : i, r = n < a ? 0 : r;
 		}
 		return r = r === i ? 0 : r, [r + 0, i + 0];
@@ -250,104 +362,104 @@ var Pt = (e, t, n) => {
 			y: u
 		}
 	};
-}, nn = ({ T: e, k: t }) => {
+}, ln = ({ T: e, k: t }) => {
 	let n = (e, t) => e === 0 && e <= t;
 	return {
 		x: n(e.x, t.x),
 		y: n(e.y, t.y)
 	};
-}, rn = ({ T: e, k: t }, n) => {
-	let r = (e, t, n) => Qe(0, 1, (e - n) / (e - t) || 0);
+}, un = ({ T: e, k: t }, n) => {
+	let r = (e, t, n) => rt(0, 1, (e - n) / (e - t) || 0);
 	return {
 		x: r(e.x, t.x, n.x),
 		y: r(e.y, t.y, n.y)
 	};
-}, an = (e) => {
+}, dn = (e) => {
 	e && e.focus && e.focus({
 		preventScroll: !0,
 		focusVisible: !1
 	});
-}, on = (e, t) => {
-	G(Ce(t), e);
-}, sn = (e) => {
+}, fn = (e, t) => {
+	K(De(t), e);
+}, pn = (e) => {
 	let t = /* @__PURE__ */ new Map(), n = (e, n) => {
 		if (e) {
 			let r = t.get(e);
-			on(((e) => {
+			fn(((e) => {
 				r && r[e ? "delete" : "clear"](e);
 			}), n);
 		} else t.forEach(((e) => {
 			e.clear();
 		})), t.clear();
 	}, r = (e, i) => {
-		if (me(e)) {
+		if (ge(e)) {
 			let r = t.get(e) || /* @__PURE__ */ new Set();
-			return t.set(e, r), on(((e) => {
-				H(e) && r.add(e);
+			return t.set(e, r), fn(((e) => {
+				ve(e) && r.add(e);
 			}), i), J(n, e, i);
 		}
-		he(i) && i && n();
+		_e(i) && i && n();
 		let a = Y(e), o = [];
-		return G(a, ((t) => {
+		return K(a, ((t) => {
 			let n = e[t];
-			n && K(o, r(t, n));
-		})), J(q, o);
+			n && q(o, r(t, n));
+		})), J(Ae, o);
 	};
 	return r(e || {}), [
 		r,
 		n,
 		(e, n) => {
-			G(Se(t.get(e)), ((e) => {
-				n && !we(n) ? e.apply(0, n) : e();
+			K(Ee(t.get(e)), ((e) => {
+				n && !Oe(n) ? e.apply(0, n) : e();
 			}));
 		}
 	];
-}, cn = {}, ln = {}, un = (e) => {
-	G(e, ((e) => G(e, ((t, n) => {
-		cn[n] = e[n];
+}, mn = {}, hn = {}, gn = (e) => {
+	K(e, ((e) => K(e, ((t, n) => {
+		mn[n] = e[n];
 	}))));
-}, dn = (e, t, n) => Y(e).map(((r) => {
+}, _n = (e, t, n) => Y(e).map(((r) => {
 	let { static: i, instance: a } = e[r], [o, s, c] = n || [], l = n ? a : i;
 	if (l) {
 		let e = n ? l(o, s, t) : l(t);
-		return (c || ln)[r] = e;
+		return (c || hn)[r] = e;
 	}
-})), fn = (e, t) => e[t], pn = (e) => fn(ln, e), mn = "__osOptionsValidationPlugin", hn = "data-overlayscrollbars", gn = "os-environment", _n = `${gn}-scrollbar-hidden`, vn = `${hn}-initialize`, yn = "noClipping", bn = `${hn}-body`, xn = hn, Sn = "host", Cn = `${hn}-viewport`, wn = Ne, Tn = Pe, En = "arrange", Dn = "measuring", On = "scrolling", kn = "scrollbarHidden", An = "noContent", jn = `${hn}-padding`, Mn = `${hn}-content`, Nn = "os-size-observer", Pn = `${Nn}-appear`, Fn = `${Nn}-listener`;
-`${Fn}`, `${Fn}`;
-var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn = `${Rn}-rtl`, Bn = `${Rn}-horizontal`, Vn = `${Rn}-vertical`, Hn = `${Rn}-track`, Un = `${Rn}-handle`, Wn = `${Rn}-visible`, Gn = `${Rn}-cornerless`, Kn = `${Rn}-interaction`, qn = `${Rn}-unusable`, Jn = `${Rn}-auto-hide`, Yn = `${Jn}-hidden`, Xn = `${Rn}-wheel`, Zn = `${Hn}-interactive`, Qn = `${Un}-interactive`, $n = "__osSizeObserverPlugin", er = (e, t) => {
+})), vn = (e, t) => e[t], yn = (e) => vn(hn, e), bn = "__osOptionsValidationPlugin", xn = "data-overlayscrollbars", Sn = "os-environment", Cn = `${Sn}-scrollbar-hidden`, wn = `${xn}-initialize`, Tn = "noClipping", En = `${xn}-body`, Dn = xn, On = "host", kn = `${xn}-viewport`, An = Re, jn = ze, Mn = "arrange", Nn = "measuring", Pn = "scrolling", Fn = "scrollbarHidden", In = "noContent", Ln = `${xn}-padding`, Rn = `${xn}-content`, zn = "os-size-observer", Bn = `${zn}-appear`, Vn = `${zn}-listener`;
+`${Vn}`, `${Vn}`;
+var Hn = "os-trinsic-observer", Un = "os-theme-none", Wn = "os-scrollbar", Gn = `${Wn}-rtl`, Kn = `${Wn}-horizontal`, qn = `${Wn}-vertical`, Jn = `${Wn}-track`, Yn = `${Wn}-handle`, Xn = `${Wn}-visible`, Zn = `${Wn}-cornerless`, Qn = `${Wn}-interaction`, $n = `${Wn}-unusable`, er = `${Wn}-auto-hide`, tr = `${er}-hidden`, nr = `${Wn}-wheel`, rr = `${Jn}-interactive`, ir = `${Yn}-interactive`, ar = "__osSizeObserverPlugin", or = (e, t) => {
 	let { M: n } = t, [r, i] = e("showNativeOverlaidScrollbars");
 	return [r && n.x && n.y, i];
-}, tr = (e) => e.indexOf(Le) === 0, nr = (e) => e.replace(`${Le}-`, ""), rr = (e, t) => {
-	if (e === "auto") return t ? ze : Re;
-	let n = e || Re;
+}, sr = (e) => e.indexOf(He) === 0, cr = (e) => e.replace(`${He}-`, ""), lr = (e, t) => {
+	if (e === "auto") return t ? We : Ue;
+	let n = e || Ue;
 	return [
-		Re,
-		ze,
-		Le
-	].includes(n) ? n : Re;
-}, ir = (e, t) => {
-	let { overflowX: n, overflowY: r } = Nt(e, [Ne, Pe]);
+		Ue,
+		We,
+		He
+	].includes(n) ? n : Ue;
+}, ur = (e, t) => {
+	let { overflowX: n, overflowY: r } = zt(e, [Re, ze]);
 	return {
-		x: rr(n, t.x),
-		y: rr(r, t.y)
+		x: lr(n, t.x),
+		y: lr(r, t.y)
 	};
-}, ar = "__osScrollbarsHidingPlugin", or = "__osClickScrollPlugin", sr = (e) => JSON.stringify(e, ((e, t) => {
-	if (H(t)) throw 0;
+}, dr = "__osScrollbarsHidingPlugin", fr = "__osClickScrollPlugin", pr = (e) => JSON.stringify(e, ((e, t) => {
+	if (ve(t)) throw 0;
 	return t;
-})), cr = (e, t) => e ? `${t}`.split(".").reduce(((e, t) => e && Je(e, t) ? e[t] : void 0), e) : void 0, lr = [0, 33], ur = [33, 99], dr = [
+})), mr = (e, t) => e ? `${t}`.split(".").reduce(((e, t) => e && $e(e, t) ? e[t] : void 0), e) : void 0, hr = [0, 33], gr = [33, 99], _r = [
 	222,
 	666,
 	!0
-], fr = {
+], vr = {
 	paddingAbsolute: !1,
 	showNativeOverlaidScrollbars: !1,
 	update: {
 		elementEvents: [["img", "load"]],
 		debounce: {
-			mutation: lr,
+			mutation: hr,
 			resize: null,
-			event: ur,
-			env: dr
+			event: gr,
+			env: _r
 		},
 		attributes: null,
 		ignoreMutation: null,
@@ -371,40 +483,40 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 			"pen"
 		]
 	}
-}, pr = (e, t) => {
+}, yr = (e, t) => {
 	let n = {};
-	return G(xe(Y(t), Y(e)), ((r) => {
+	return K(Te(Y(t), Y(e)), ((r) => {
 		let i = e[r], a = t[r];
-		if (ge(i) && ge(a)) X(n[r] = {}, pr(i, a)), Xe(n[r]) && delete n[r];
-		else if (Je(t, r) && a !== i) {
+		if (ye(i) && ye(a)) X(n[r] = {}, yr(i, a)), tt(n[r]) && delete n[r];
+		else if ($e(t, r) && a !== i) {
 			let e = !0;
-			if (U(i) || U(a)) try {
-				sr(i) === sr(a) && (e = !1);
+			if (G(i) || G(a)) try {
+				pr(i) === pr(a) && (e = !1);
 			} catch {}
 			e && (n[r] = a);
 		}
 	})), n;
-}, mr = (e, t, n) => (r) => [cr(e, r), n || cr(t, r) !== void 0], hr, gr = () => hr, _r = (e) => {
-	hr = e;
-}, vr, yr = () => {
+}, br = (e, t, n) => (r) => [mr(e, r), n || mr(t, r) !== void 0], xr, Sr = () => xr, Cr = (e) => {
+	xr = e;
+}, wr, Tr = () => {
 	let e = (e, t, n) => {
-		Z(document.body, e), Z(document.body, e);
-		let r = Vt(e), i = Bt(e), a = Ut(t);
-		return n && xt(e), {
+		Dt(document.body, e), Dt(document.body, e);
+		let r = qt(e), i = Kt(e), a = Yt(t);
+		return n && Et(e), {
 			x: i.h - r.h + a.h,
 			y: i.w - r.w + a.w
 		};
 	}, t = (e) => {
-		let t = !1, n = dt(e, _n);
+		let t = !1, n = gt(e, Cn);
 		try {
-			t = Nt(e, "scrollbar-width") === "none" || Nt(e, "display", "::-webkit-scrollbar") === "none";
+			t = zt(e, "scrollbar-width") === "none" || zt(e, "display", "::-webkit-scrollbar") === "none";
 		} catch {}
 		return n(), t;
-	}, n = Et(`<div class="${gn}"><div></div><style>${`.${gn}{scroll-behavior:auto!important;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:-1}.${gn} div{width:200%;height:200%;margin:10px 0}.${_n}{scrollbar-width:none!important}.${_n}::-webkit-scrollbar,.${_n}::-webkit-scrollbar-corner{appearance:none!important;display:none!important;width:0!important;height:0!important}`}</style></div>`)[0], r = n.firstChild, i = n.lastChild, a = gr();
+	}, n = Mt(`<div class="${Sn}"><div></div><style>${`.${Sn}{scroll-behavior:auto!important;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:-1}.${Sn} div{width:200%;height:200%;margin:10px 0}.${Cn}{scrollbar-width:none!important}.${Cn}::-webkit-scrollbar,.${Cn}::-webkit-scrollbar-corner{appearance:none!important;display:none!important;width:0!important;height:0!important}`}</style></div>`)[0], r = n.firstChild, i = n.lastChild, a = Sr();
 	a && (i.nonce = a);
-	let [o, , s] = sn(), [c, l] = F({
+	let [o, , s] = pn(), [c, l] = H({
 		o: e(n, r),
-		i: Ue
+		i: Je
 	}, J(e, n, r, !0)), [u] = l(), d = t(n), f = {
 		x: u.x === 0,
 		y: u.y === 0
@@ -412,7 +524,7 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		elements: {
 			host: null,
 			padding: !d,
-			viewport: (e) => d && ht(e) && e,
+			viewport: (e) => d && bt(e) && e,
 			content: !1
 		},
 		scrollbars: { slot: !0 },
@@ -420,11 +532,11 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 			nativeScrollbarsOverlaid: !1,
 			body: null
 		}
-	}, m = X({}, fr), h = J(X, {}, m), g = J(X, {}, p), _ = {
+	}, m = X({}, vr), h = J(X, {}, m), g = J(X, {}, p), _ = {
 		U: u,
 		M: f,
 		P: d,
-		J: !!ue,
+		J: !!fe,
 		G: J(o, "r"),
 		K: g,
 		Z: (e) => X(p, e) && g(),
@@ -433,11 +545,11 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		ot: X({}, p),
 		st: X({}, m)
 	};
-	if (rt(n, "style"), xt(n), Q(I, "resize", (() => {
+	if (ct(n, "style"), Et(n), Z(U, "resize", (() => {
 		s("r", []);
-	})), H(I.matchMedia) && !d && (!f.x || !f.y)) {
+	})), ve(U.matchMedia) && !d && (!f.x || !f.y)) {
 		let e = (t) => {
-			Q(I.matchMedia(`(resolution: ${I.devicePixelRatio}dppx)`), "change", (() => {
+			Z(U.matchMedia(`(resolution: ${U.devicePixelRatio}dppx)`), "change", (() => {
 				t(), e(t);
 			}), { A: !0 });
 		};
@@ -447,42 +559,42 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		}));
 	}
 	return _;
-}, br = () => (vr ||= yr(), vr), xr = (e, t, n) => {
+}, Er = () => (wr ||= Tr(), wr), Dr = (e, t, n) => {
 	let r = !1, i = n ? /* @__PURE__ */ new WeakMap() : !1, a = () => {
 		r = !0;
 	}, o = (a) => {
-		i && n && G(n.map(((t) => {
+		i && n && K(n.map(((t) => {
 			let [n, r] = t || [];
-			return [r && n ? (a || ft)(n, e) : [], r];
-		})), ((n) => G(n[0], ((a) => {
+			return [r && n ? (a || _t)(n, e) : [], r];
+		})), ((n) => K(n[0], ((a) => {
 			let o = n[1], s = i.get(a) || [];
 			if (e.contains(a) && o) {
-				let e = Q(a, o, ((n) => {
+				let e = Z(a, o, ((n) => {
 					r ? (e(), i.delete(a)) : t(n);
 				}));
-				i.set(a, K(s, e));
-			} else q(s), i.delete(a);
+				i.set(a, q(s, e));
+			} else Ae(s), i.delete(a);
 		}))));
 	};
 	return o(), [a, o];
-}, Sr = (e, t, n, r) => {
-	let i = !1, { et: a, ct: o, rt: s, it: c, lt: l, ut: u } = r || {}, [d, f] = xr(e, (() => i && n(!0)), s), p = a || [], m = o || [], h = xe(p, m), g = (i, a) => {
-		if (!we(a)) {
-			let o = l || Ze, s = u || Ze, d = [], p = [], h = !1, g = !1;
-			if (G(a, ((n) => {
-				let { attributeName: i, target: a, type: l, oldValue: u, addedNodes: f, removedNodes: _ } = n, v = l === "attributes", y = l === "childList", b = e === a, x = v && i, S = x && et(a, i || ""), C = me(S) ? S : null, w = x && u !== C, T = be(m, i) && w;
+}, Or = (e, t, n, r) => {
+	let i = !1, { et: a, ct: o, rt: s, it: c, lt: l, ut: u } = r || {}, [d, f] = Dr(e, (() => i && n(!0)), s), p = a || [], m = o || [], h = Te(p, m), g = (i, a) => {
+		if (!Oe(a)) {
+			let o = l || nt, s = u || nt, d = [], p = [], h = !1, g = !1;
+			if (K(a, ((n) => {
+				let { attributeName: i, target: a, type: l, oldValue: u, addedNodes: f, removedNodes: _ } = n, v = l === "attributes", y = l === "childList", b = e === a, x = v && i, S = x && at(a, i || ""), C = ge(S) ? S : null, w = x && u !== C, T = we(m, i) && w;
 				if (t && (y || !b)) {
-					let t = v && w, l = t && c && mt(a, c), p = (l ? !o(a, i, u, C) : !v || t) && !s(n, !!l, e, r);
-					G(f, ((e) => K(d, e))), G(_, ((e) => K(d, e))), g ||= p;
+					let t = v && w, l = t && c && yt(a, c), p = (l ? !o(a, i, u, C) : !v || t) && !s(n, !!l, e, r);
+					K(f, ((e) => q(d, e))), K(_, ((e) => q(d, e))), g ||= p;
 				}
-				!t && b && w && !o(a, i, u, C) && (K(p, i), h ||= T);
-			})), f(((e) => Te(d).reduce(((t, n) => (K(t, ft(e, n)), mt(n, e) ? K(t, n) : t)), []))), t) return !i && g && n(!1), [!1];
-			if (!we(p) || h) {
-				let e = [Te(p), h];
+				!t && b && w && !o(a, i, u, C) && (q(p, i), h ||= T);
+			})), f(((e) => ke(d).reduce(((t, n) => (q(t, _t(e, n)), yt(n, e) ? q(t, n) : t)), []))), t) return !i && g && n(!1), [!1];
+			if (!Oe(p) || h) {
+				let e = [ke(p), h];
 				return i || n.apply(0, e), e;
 			}
 		}
-	}, _ = new se(J(g, !1));
+	}, _ = new le(J(g, !1));
 	return [() => (_.observe(e, {
 		attributes: !0,
 		attributeOldValue: !0,
@@ -495,52 +607,52 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 	}), () => {
 		if (i) return g(!0, _.takeRecords());
 	}];
-}, Cr = null, wr = (e, t, n) => {
-	let { ft: r } = n || {}, i = pn($n), [a] = F({
+}, kr = null, Ar = (e, t, n) => {
+	let { ft: r } = n || {}, i = yn(ar), [a] = H({
 		o: !1,
 		u: !0
 	});
 	return () => {
-		let n = [], o = Et(`<div class="${Nn}"><div class="${Fn}"></div></div>`)[0], s = o.firstChild, c = (e) => {
-			let n = U(e) && !we(e), r = !1, i = !1;
+		let n = [], o = Mt(`<div class="${zn}"><div class="${Vn}"></div></div>`)[0], s = o.firstChild, c = (e) => {
+			let n = G(e) && !Oe(e), r = !1, i = !1;
 			if (n) {
-				let t = e[0], [n, , o] = a(t.contentRect), s = Kt(n);
-				i = qt(n, o), r = !i && !s;
+				let t = e[0], [n, , o] = a(t.contentRect), s = Qt(n);
+				i = $t(n, o), r = !i && !s;
 			} else i = e === !0;
 			r || t({
 				_t: !0,
 				ft: i
 			});
 		};
-		if (le) {
-			if (!he(Cr)) {
-				let t = new le(Ze);
+		if (de) {
+			if (!_e(kr)) {
+				let t = new de(nt);
 				t.observe(e, { get box() {
-					Cr = !0;
-				} }), Cr ||= !1, t.disconnect();
+					kr = !0;
+				} }), kr ||= !1, t.disconnect();
 			}
-			let t = qe(c, {
+			let t = Qe(c, {
 				p: 0,
 				v: 0
-			}), r = (e) => t(e), i = new le(r);
-			if (i.observe(Cr ? e : s), K(n, [() => {
+			}), r = (e) => t(e), i = new de(r);
+			if (i.observe(kr ? e : s), q(n, [() => {
 				i.disconnect();
-			}, !Cr && Z(e, o)]), Cr) {
-				let t = new le(r);
-				t.observe(e, { box: "border-box" }), K(n, (() => t.disconnect()));
+			}, !kr && Dt(e, o)]), kr) {
+				let t = new de(r);
+				t.observe(e, { box: "border-box" }), q(n, (() => t.disconnect()));
 			}
 		} else if (i) {
 			let [t, a] = i(s, c, r);
-			K(n, xe([
-				dt(o, Pn),
-				Q(o, "animationstart", t),
-				Z(e, o)
+			q(n, Te([
+				gt(o, Bn),
+				Z(o, "animationstart", t),
+				Dt(e, o)
 			], a));
-		} else return Ze;
-		return J(q, n);
+		} else return nt;
+		return J(Ae, n);
 	};
-}, Tr = (e, t) => {
-	let n, r = (e) => e.h === 0 || e.isIntersecting || e.intersectionRatio > 0, i = Tt(In), [a] = F({ o: !1 }), o = (e, n) => {
+}, jr = (e, t) => {
+	let n, r = (e) => e.h === 0 || e.isIntersecting || e.intersectionRatio > 0, i = jt(Hn), [a] = H({ o: !1 }), o = (e, n) => {
 		if (e) {
 			let i = a(r(e)), [, o] = i;
 			return o && !n && t(i) && [i];
@@ -548,20 +660,20 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 	}, s = (e, t) => o(t.pop(), e);
 	return [() => {
 		let t = [];
-		if (ce) n = new ce(J(s, !1), { root: e }), n.observe(i), K(t, (() => {
+		if (ue) n = new ue(J(s, !1), { root: e }), n.observe(i), q(t, (() => {
 			n.disconnect();
 		}));
 		else {
 			let e = () => {
-				let e = Bt(i);
+				let e = Kt(i);
 				o(e);
 			};
-			K(t, wr(i, e)()), e();
+			q(t, Ar(i, e)()), e();
 		}
-		return J(q, K(t, Z(e, i)));
+		return J(Ae, q(t, Dt(e, i)));
 	}, () => n && s(!0, n.takeRecords())];
-}, Er = (e, t, n, r) => {
-	let i, a, o, s, c, l, u, d, f = `[${xn}]`, p = `[${Cn}]`, m = [
+}, Mr = (e, t, n, r) => {
+	let i, a, o, s, c, l, u, d, f = `[${Dn}]`, p = `[${kn}]`, m = [
 		"id",
 		"class",
 		"style",
@@ -569,70 +681,70 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		"wrap",
 		"cols",
 		"rows"
-	], { dt: h, vt: g, L: _, gt: v, ht: y, V: b, bt: x, yt: S, wt: C, St: w } = e, T = (e) => Nt(e, "direction") === "rtl", E = () => {
-		let e, t, n, i = qe(r, {
+	], { dt: h, vt: g, L: _, gt: v, ht: y, V: b, bt: x, yt: S, wt: C, St: w } = e, T = (e) => zt(e, "direction") === "rtl", E = () => {
+		let e, t, n, i = Qe(r, {
 			p: () => e,
 			v: () => t,
 			S: () => n,
 			m(e, t) {
 				let [n] = e, [r] = t;
-				return [xe(Y(n), Y(r)).reduce(((e, t) => (e[t] = n[t] || r[t], e)), {})];
+				return [Te(Y(n), Y(r)).reduce(((e, t) => (e[t] = n[t] || r[t], e)), {})];
 			}
 		}), a = (r, a) => {
-			if (U(a)) {
+			if (G(a)) {
 				let [r, i, o] = a;
 				e = r, t = i, n = o;
-			} else pe(a) ? (e = a, t = !1, n = !1) : (e = !1, t = !1, n = !1);
+			} else he(a) ? (e = a, t = !1, n = !1) : (e = !1, t = !1, n = !1);
 			i(r);
 		};
 		return a.O = i.O, a;
 	}, D = {
 		Ot: !1,
 		B: T(h)
-	}, O = br(), k = pn(ar), [A] = F({
-		i: He,
+	}, O = Er(), k = yn(dr), [A] = H({
+		i: qe,
 		o: {
 			w: 0,
 			h: 0
 		}
 	}, (() => {
-		let r = k && k.R(e, t, D, O, n).Y, i = !(x && b) && ct(g, xn, yn), a = !b && S(En), o = a && $t(v), s = o && w(), c = C(Dn, i), l = a && r && r(), u = Ht(_), d = Ut(_);
-		return l && l(), Qt(v, o), s && s(), i && c(), {
+		let r = k && k.R(e, t, D, O, n).Y, i = !(x && b) && pt(g, Dn, Tn), a = !b && S(Mn), o = a && on(v), s = o && w(), c = C(Nn, i), l = a && r && r(), u = Jt(_), d = Yt(_);
+		return l && l(), an(v, o), s && s(), i && c(), {
 			w: u.w + d.w,
 			h: u.h + d.h
 		};
 	})), j = E(), M = (e) => {
 		let t = T(h);
 		X(e, { Ct: d !== t }), X(D, { B: t }), d = t;
-	}, ee = (e, t) => {
+	}, N = (e, t) => {
 		let [n, i] = e, a = { $t: i };
 		return X(D, { Ot: n }), t || r(a), a;
-	}, N = ({ _t: e, ft: t }) => {
+	}, P = ({ _t: e, ft: t }) => {
 		let n = t ? r : j, i = {
 			_t: e || t,
 			ft: t
 		};
 		M(i), n(i, a);
-	}, te = (e, t) => {
+	}, F = (e, t) => {
 		let [, n] = A(), r = { xt: n };
 		return M(r), n && !t && j(r, e ? o : i), r;
-	}, P = (e, t, n) => {
+	}, I = (e, t, n) => {
 		let r = { Ht: t };
 		return M(r), t && !n && j(r, i), r;
-	}, [I, L] = y ? Tr(g, ee) : [], R = !b && wr(g, N, { ft: !0 }), [z, B] = Sr(g, !1, P, {
+	}, [L, R] = y ? jr(g, N) : [], z = !b && Ar(g, P, { ft: !0 }), [B, V] = Or(g, !1, I, {
 		ct: m,
 		et: m
-	}), V = b && le && new le(((e) => {
+	}), U = b && de && new de(((e) => {
 		let t = e[e.length - 1].contentRect;
-		N({
+		P({
 			_t: !0,
-			ft: qt(t, u)
+			ft: $t(t, u)
 		}), u = t;
 	}));
 	return [
 		() => {
-			V && V.observe(g);
-			let e = R && R(), t = I && I(), n = z(), r = O.G(((e) => {
+			U && U.observe(g);
+			let e = z && z(), t = L && L(), n = B(), r = O.G(((e) => {
 				let [, t] = A();
 				j({
 					Et: e,
@@ -641,53 +753,53 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 				}, s);
 			}));
 			return () => {
-				V && V.disconnect(), e && e(), t && t(), l && l(), n(), r();
+				U && U.disconnect(), e && e(), t && t(), l && l(), n(), r();
 			};
 		},
 		({ Dt: e, zt: t, It: n }) => {
-			let r = {}, [u] = e("update.ignoreMutation"), [d, h] = e("update.attributes"), [g, v] = e("update.elementEvents"), [x, S] = e("update.debounce"), C = v || h, w = t || n, T = (e) => H(u) && !!u(e);
+			let r = {}, [u] = e("update.ignoreMutation"), [d, h] = e("update.attributes"), [g, v] = e("update.elementEvents"), [x, S] = e("update.debounce"), C = v || h, w = t || n, T = (e) => ve(u) && !!u(e);
 			if (C) {
 				c && c(), l && l();
-				let [e, t] = Sr(y || _, !0, te, {
-					et: xe(m, d || []),
+				let [e, t] = Or(y || _, !0, F, {
+					et: Te(m, d || []),
 					rt: g,
 					it: f,
 					ut: (e, t) => {
 						let { target: n, attributeName: r } = e;
-						return (!t && r && !b ? bt(n, f, p) : !1) || !!vt(n, `.${Rn}`) || T(e);
+						return (!t && r && !b ? Tt(n, f, p) : !1) || !!Ct(n, `.${Wn}`) || T(e);
 					}
 				});
 				l = e(), c = t;
 			}
-			if (S && (j.O(), U(x) || pe(x) ? (i = x, a = !1, o = ur, s = dr) : ve(x) ? (i = x.mutation, a = x.resize, o = x.event, s = x.env) : (i = !1, a = !1, o = !1, s = !1)), w) {
-				let e = B(), t = L && L(), n = c && c();
-				e && X(r, P(e[0], e[1], w)), t && X(r, ee(t[0], w)), n && X(r, te(n[0], w));
+			if (S && (j.O(), G(x) || he(x) ? (i = x, a = !1, o = gr, s = _r) : xe(x) ? (i = x.mutation, a = x.resize, o = x.event, s = x.env) : (i = !1, a = !1, o = !1, s = !1)), w) {
+				let e = V(), t = R && R(), n = c && c();
+				e && X(r, I(e[0], e[1], w)), t && X(r, N(t[0], w)), n && X(r, F(n[0], w));
 			}
 			return M(r), r;
 		},
 		D
 	];
-}, Dr = (e, t) => H(t) ? t.apply(0, e) : t, Or = (e, t, n, r) => Dr(e, de(r) ? n : r) || t.apply(0, e), kr = (e, t, n, r) => {
-	let i = Dr(e, de(r) ? n : r);
-	return !!i && (ye(i) ? i : t.apply(0, e));
-}, Ar = (e, t) => {
-	let { nativeScrollbarsOverlaid: n, body: r } = t || {}, { M: i, P: a, K: o } = br(), { nativeScrollbarsOverlaid: s, body: c } = o().cancel, l = n ?? s, u = de(r) ? c : r, d = (i.x || i.y) && l, f = e && (fe(u) ? !a : u);
+}, Nr = (e, t) => ve(t) ? t.apply(0, e) : t, Pr = (e, t, n, r) => Nr(e, pe(r) ? n : r) || t.apply(0, e), Fr = (e, t, n, r) => {
+	let i = Nr(e, pe(r) ? n : r);
+	return !!i && (Se(i) ? i : t.apply(0, e));
+}, Ir = (e, t) => {
+	let { nativeScrollbarsOverlaid: n, body: r } = t || {}, { M: i, P: a, K: o } = Er(), { nativeScrollbarsOverlaid: s, body: c } = o().cancel, l = n ?? s, u = pe(r) ? c : r, d = (i.x || i.y) && l, f = e && (me(u) ? !a : u);
 	return !!d || !!f;
-}, jr = (e, t, n, r) => {
-	let { K: i } = br(), { scrollbars: a } = i(), { slot: o } = a, { dt: s, vt: c, L: l, At: u, gt: d, bt: f, V: p } = t, { scrollbars: m } = u ? {} : e, { slot: h } = m || {}, g = [], _ = [], v = [], y = kr([
+}, Lr = (e, t, n, r) => {
+	let { K: i } = Er(), { scrollbars: a } = i(), { slot: o } = a, { dt: s, vt: c, L: l, At: u, gt: d, bt: f, V: p } = t, { scrollbars: m } = u ? {} : e, { slot: h } = m || {}, g = [], _ = [], v = [], y = Fr([
 		s,
 		c,
 		l
 	], (() => p && f ? s : c), o, h), b = (e) => {
-		if (ue) {
-			let t = null, r = [], i = new ue({
+		if (fe) {
+			let t = null, r = [], i = new fe({
 				source: d,
 				axis: e
 			}), a = () => {
 				t && t.cancel(), t = null;
 			};
 			return { Mt: (o) => {
-				let { Tt: s } = n, c = nn(s)[e], l = e === "x", u = [Ft(0, l), Ft(`calc(-100% + 100cq${l ? "w" : "h"})`, l)], d = c ? u : u.reverse();
+				let { Tt: s } = n, c = ln(s)[e], l = e === "x", u = [Vt(0, l), Vt(`calc(-100% + 100cq${l ? "w" : "h"})`, l)], d = c ? u : u.reverse();
 				return r[0] === d[0] && r[1] === d[1] ? a : (r = d, a(), t = o.kt.animate({
 					clear: ["left"],
 					transform: d
@@ -698,43 +810,43 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		x: b("x"),
 		y: b("y")
 	}, S = () => {
-		let { Rt: e, Vt: t } = n, r = (e, t) => Qe(0, 1, e / (e + t) || 0);
+		let { Rt: e, Vt: t } = n, r = (e, t) => rt(0, 1, e / (e + t) || 0);
 		return {
 			x: r(t.x, e.x),
 			y: r(t.y, e.y)
 		};
 	}, C = (e, t, n) => {
-		let r = n ? dt : ut;
-		G(e, ((e) => {
+		let r = n ? gt : ht;
+		K(e, ((e) => {
 			r(e.Lt, t);
 		}));
 	}, w = (e, t) => {
-		G(e, ((e) => {
+		K(e, ((e) => {
 			let [n, r] = t(e);
-			Mt(n, r);
+			Rt(n, r);
 		}));
 	}, T = (e, t, n) => {
-		let r = he(n), i = !r || n, a = !r || !n;
+		let r = _e(n), i = !r || n, a = !r || !n;
 		i && C(_, e, t), a && C(v, e, t);
 	}, E = () => {
-		let e = S(), t = (e) => (t) => [t.Lt, { "--os-viewport-percent": At(e) + "" }];
+		let e = S(), t = (e) => (t) => [t.Lt, { "--os-viewport-percent": It(e) + "" }];
 		w(_, t(e.x)), w(v, t(e.y));
 	}, D = () => {
-		if (!ue) {
-			let { Tt: e } = n, t = rn(e, $t(d)), r = (e) => (t) => [t.Lt, { "--os-scroll-percent": At(e) + "" }];
+		if (!fe) {
+			let { Tt: e } = n, t = un(e, on(d)), r = (e) => (t) => [t.Lt, { "--os-scroll-percent": It(e) + "" }];
 			w(_, r(t.x)), w(v, r(t.y));
 		}
 	}, O = () => {
-		let { Tt: e } = n, t = nn(e), r = (e) => (t) => [t.Lt, { "--os-scroll-direction": e ? "0" : "1" }];
-		w(_, r(t.x)), w(v, r(t.y)), ue && (_.forEach(x.x.Mt), v.forEach(x.y.Mt));
+		let { Tt: e } = n, t = ln(e), r = (e) => (t) => [t.Lt, { "--os-scroll-direction": e ? "0" : "1" }];
+		w(_, r(t.x)), w(v, r(t.y)), fe && (_.forEach(x.x.Mt), v.forEach(x.y.Mt));
 	}, k = () => {
 		if (p && !f) {
-			let { Rt: e, Tt: t } = n, r = nn(t), i = rn(t, $t(d)), a = (t) => {
-				let { Lt: n } = t, a = _t(n) === l && n, o = (e, t, n) => {
+			let { Rt: e, Tt: t } = n, r = ln(t), i = un(t, on(d)), a = (t) => {
+				let { Lt: n } = t, a = St(n) === l && n, o = (e, t, n) => {
 					let r = t * e;
-					return jt(n ? r : -r);
+					return Lt(n ? r : -r);
 				};
-				return [a, a && { transform: Ft({
+				return [a, a && { transform: Vt({
 					x: o(i.x, e.x, r.x),
 					y: o(i.y, e.y, r.y)
 				}) }];
@@ -742,15 +854,15 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 			w(_, a), w(v, a);
 		}
 	}, A = (e) => {
-		let t = e ? "x" : "y", n = Tt(`${Rn} ${e ? Bn : Vn}`), i = Tt(Hn), a = Tt(Un), o = {
+		let t = e ? "x" : "y", n = jt(`${Wn} ${e ? Kn : qn}`), i = jt(Jn), a = jt(Yn), o = {
 			Lt: n,
 			Pt: i,
 			kt: a
 		}, s = x[t];
-		return K(e ? _ : v, o), K(g, [
-			Z(n, i),
-			Z(i, a),
-			J(xt, n),
+		return q(e ? _ : v, o), q(g, [
+			Dt(n, i),
+			Dt(i, a),
+			J(Et, n),
 			s && s.Mt(o),
 			r(o, T, e)
 		]), o;
@@ -771,87 +883,87 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 			Yt: M,
 			Wt: J(w, v)
 		}
-	}, () => (Z(y, _[0].Lt), Z(y, v[0].Lt), J(q, g))];
-}, Mr = (e, t, n, r, i) => (a, o, s) => {
-	let { vt: c, L: l, V: u, gt: d, Gt: f, St: p } = t, { Lt: m, Pt: h, kt: g } = a, [_, v] = Ge(333), [y, b] = Ge(444), x = (e) => {
-		H(d.scrollBy) && d.scrollBy({
+	}, () => (Dt(y, _[0].Lt), Dt(y, v[0].Lt), J(Ae, g))];
+}, Rr = (e, t, n, r, i) => (a, o, s) => {
+	let { vt: c, L: l, V: u, gt: d, Gt: f, St: p } = t, { Lt: m, Pt: h, kt: g } = a, [_, v] = Xe(333), [y, b] = Xe(444), x = (e) => {
+		ve(d.scrollBy) && d.scrollBy({
 			behavior: "smooth",
 			left: e.x,
 			top: e.y
 		});
 	}, S = () => {
-		let t = "pointerup pointercancel lostpointercapture", i = `client${s ? "X" : "Y"}`, a = s ? Fe : Ie, o = s ? "left" : "top", c = s ? "w" : "h", l = s ? "x" : "y", u = [];
-		return Q(h, "pointerdown", r(((r) => {
-			let m = vt(r.target, `.${Un}`) === g, _ = m ? g : h, v = e.scrollbars, S = v[m ? "dragScroll" : "clickScroll"], { button: C, isPrimary: w, pointerType: T } = r, { pointers: E } = v;
+		let t = "pointerup pointercancel lostpointercapture", i = `client${s ? "X" : "Y"}`, a = s ? Be : Ve, o = s ? "left" : "top", c = s ? "w" : "h", l = s ? "x" : "y", u = [];
+		return Z(h, "pointerdown", r(((r) => {
+			let m = Ct(r.target, `.${Yn}`) === g, _ = m ? g : h, v = e.scrollbars, S = v[m ? "dragScroll" : "clickScroll"], { button: C, isPrimary: w, pointerType: T } = r, { pointers: E } = v;
 			if (C === 0 && w && S && (E || []).includes(T)) {
-				q(u), b();
-				let e = !m && (r.shiftKey || S === "instant"), v = J(Wt, g), C = J(Wt, h), w = (e, t) => (e || v())[o] - (t || C())[o], T = z(Wt(d)[a]) / Bt(d)[c] || 1, E = $t(d)[l], D = (e) => {
-					Qt(d, { [l]: E + e });
+				Ae(u), b();
+				let e = !m && (r.shiftKey || S === "instant"), v = J(Xt, g), C = J(Xt, h), w = (e, t) => (e || v())[o] - (t || C())[o], T = ne(Xt(d)[a]) / Kt(d)[c] || 1, E = on(d)[l], D = (e) => {
+					an(d, { [l]: E + e });
 				}, O = (e) => {
-					let { Rt: t } = n, r = Bt(h)[c] - Bt(g)[c], i = 1 / T * e / r;
+					let { Rt: t } = n, r = Kt(h)[c] - Kt(g)[c], i = 1 / T * e / r;
 					D(i * t[l]);
-				}, k = r[i], A = v(), j = C(), M = A[a], ee = w(A, j) + M / 2, N = k - j[o] - ee, te = m ? 0 : N, P = (e) => {
-					q(L), _.releasePointerCapture(e.pointerId);
-				}, F = m || e, I = p(), L = [
-					Q(f, t, P),
-					Q(f, "selectstart", ((e) => Xt(e)), { D: !1 }),
-					Q(h, t, P),
-					F && Q(h, "pointermove", ((e) => O(te + e[i] - k))),
-					F && (() => {
-						let e = $t(d);
-						I();
-						let t = $t(d), n = {
+				}, k = r[i], A = v(), j = C(), M = A[a], N = w(A, j) + M / 2, P = k - j[o] - N, F = m ? 0 : P, I = (e) => {
+					Ae(z), _.releasePointerCapture(e.pointerId);
+				}, L = m || e, R = p(), z = [
+					Z(f, t, I),
+					Z(f, "selectstart", ((e) => nn(e)), { D: !1 }),
+					Z(h, t, I),
+					L && Z(h, "pointermove", ((e) => O(F + e[i] - k))),
+					L && (() => {
+						let e = on(d);
+						R();
+						let t = on(d), n = {
 							x: t.x - e.x,
 							y: t.y - e.y
 						};
-						(B(n.x) > 3 || B(n.y) > 3) && (p(), Qt(d, e), x(n), y(I));
+						(W(n.x) > 3 || W(n.y) > 3) && (p(), an(d, e), x(n), y(R));
 					})
 				];
-				if (_.setPointerCapture(r.pointerId), e) O(N);
+				if (_.setPointerCapture(r.pointerId), e) O(P);
 				else if (!m) {
-					let e = pn(or);
+					let e = yn(fr);
 					if (e) {
-						let { Vt: t } = n, r = e(D, O, J(w), N, t[l], S, !!s, ((e) => {
-							e ? I() : K(L, I);
+						let { Vt: t } = n, r = e(D, O, J(w), P, t[l], S, !!s, ((e) => {
+							e ? R() : q(z, R);
 						}));
-						K(L, r), K(u, J(r, !0));
+						q(z, r), q(u, J(r, !0));
 					}
 				}
 			}
 		})));
 	}, C = !0;
-	return J(q, [
-		Q(g, "pointermove pointerleave", r(i)),
-		Q(m, "pointerenter", r((() => {
-			o(Kn, !0);
+	return J(Ae, [
+		Z(g, "pointermove pointerleave", r(i)),
+		Z(m, "pointerenter", r((() => {
+			o(Qn, !0);
 		}))),
-		Q(m, "pointerleave pointercancel", r((() => {
-			o(Kn, !1);
+		Z(m, "pointerleave pointercancel", r((() => {
+			o(Qn, !1);
 		}))),
-		Q(m, "wheel", r(((e) => {
+		Z(m, "wheel", r(((e) => {
 			let { deltaX: t, deltaY: n, deltaMode: r } = e;
-			C && r === 0 && _t(m) === c && x({
+			C && r === 0 && St(m) === c && x({
 				x: t,
 				y: n
-			}), C = !1, o(Xn, !0), _((() => {
-				C = !0, o(Xn);
-			})), Xt(e);
+			}), C = !1, o(nr, !0), _((() => {
+				C = !0, o(nr);
+			})), nn(e);
 		})), {
 			D: !1,
 			I: !0
 		}),
-		!u && Q(m, "mousedown", r((() => {
-			let e = yt();
-			(tt(e, Cn) || tt(e, xn) || e === document.body) && ie(J(an, l), 25);
+		!u && Z(m, "mousedown", r((() => {
+			let e = wt();
+			(ot(e, kn) || ot(e, Dn) || e === document.body) && oe(J(dn, l), 25);
 		}))),
-		Q(m, "pointerdown", (() => {
-			let e = Q(f, "click", ((e) => {
-				t(), Zt(e);
+		Z(m, "pointerdown", (() => {
+			let e = Z(f, "click", ((e) => {
+				t(), rn(e);
 			}), {
 				A: !0,
 				I: !0,
 				D: !1
-			}), t = Q(f, "pointerup pointercancel", (() => {
+			}), t = Z(f, "pointerup pointercancel", (() => {
 				t(), setTimeout(e, 150);
 			}), {
 				I: !0,
@@ -865,144 +977,144 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		v,
 		b
 	]);
-}, Nr = (e, t, n, r, i, a, o) => {
-	let s, c, l, u, d, f = Ze, p = 0, m = ["mouse", "pen"], h = (e) => (t) => {
+}, zr = (e, t, n, r, i, a, o) => {
+	let s, c, l, u, d, f = nt, p = 0, m = ["mouse", "pen"], h = (e) => (t) => {
 		n.Kt || e(t);
-	}, g = (e) => m.includes(e.pointerType), [_, v] = Ge(), [y, b] = Ge(100), [x, S] = Ge(50), [C, w] = Ge((() => p)), [T, E] = jr(e, a, i, Mr(t, a, i, h, ((e) => g(e) && P()))), { vt: D, Qt: O, bt: k } = a, { Ft: A, Ut: j, Nt: M, qt: ee, Bt: N } = T, te = (e, t) => {
+	}, g = (e) => m.includes(e.pointerType), [_, v] = Xe(), [y, b] = Xe(100), [x, S] = Xe(50), [C, w] = Xe((() => p)), [T, E] = Lr(e, a, i, Rr(t, a, i, h, ((e) => g(e) && I()))), { vt: D, Qt: O, bt: k } = a, { Ft: A, Ut: j, Nt: M, qt: N, Bt: P } = T, F = (e, t) => {
 		w();
 		let r = (e) => {
-			n.Kt || A(Yn, e);
+			n.Kt || A(tr, e);
 		};
 		if (e) r();
 		else {
 			let e = !l || !s;
 			p > 0 && !t ? C(J(r, e)) : r(e);
 		}
-	}, P = () => {
-		(l ? !s : !u) && (te(!0), y((() => {
-			te(!1);
+	}, I = () => {
+		(l ? !s : !u) && (F(!0), y((() => {
+			F(!1);
 		})));
-	}, F = (e) => {
-		g(e) && (s = !0, !n.Kt && l && te(!0));
-	}, I = (e) => {
-		g(e) && (s = !1, !n.Kt && l && te(!1));
 	}, L = (e) => {
-		A(Jn, e, !0), A(Jn, e, !1);
-	}, R = [
+		g(e) && (s = !0, !n.Kt && l && F(!0));
+	}, R = (e) => {
+		g(e) && (s = !1, !n.Kt && l && F(!1));
+	}, z = (e) => {
+		A(er, e, !0), A(er, e, !1);
+	}, B = [
 		w,
 		b,
 		S,
 		v,
 		() => f(),
-		Q(D, "pointerover", F, { A: !0 }),
-		Q(D, "pointerenter", F),
-		Q(D, "pointerleave", I),
-		Q(D, "pointermove", h(((e) => {
-			g(e) && c && P();
+		Z(D, "pointerover", L, { A: !0 }),
+		Z(D, "pointerenter", L),
+		Z(D, "pointerleave", R),
+		Z(D, "pointermove", h(((e) => {
+			g(e) && c && I();
 		}))),
-		Q(O, "scroll", h(((e) => {
+		Z(O, "scroll", h(((e) => {
 			_((() => {
-				M(), P();
-			})), o(e), N();
+				M(), I();
+			})), o(e), P();
 		})))
-	], z = pn(ar);
+	], V = yn(dr);
 	return [
-		() => J(q, K(R, E())),
+		() => J(Ae, q(B, E())),
 		({ Dt: e, It: t, Zt: n, tn: a }) => {
-			let { nn: o, sn: s, en: m, cn: g } = a || {}, { Ct: _, ft: v } = n || {}, { B: y } = r, { M: b, P: S } = br(), { rn: C, j: w } = i, [T, E] = e("showNativeOverlaidScrollbars"), [D, P] = e("scrollbars.theme"), [F, I] = e("scrollbars.visibility"), [R, B] = e("scrollbars.autoHide"), [V, ne] = e("scrollbars.autoHideSuspend"), [re] = e("scrollbars.autoHideDelay"), [ie, ae] = e("scrollbars.dragScroll"), [oe, se] = e("scrollbars.clickScroll"), [ce, le] = e("overflow"), ue = v && !t, de = o || s || g || _ || t, fe = m || I || le, pe = T && b.x && b.y, me = !S && !z, he = pe || me, H = (e, t, n) => {
-				let r = e.includes(ze) && (F === Le || F === "auto" && t === ze);
-				return A(Wn, r, n), r;
+			let { nn: o, sn: s, en: m, cn: g } = a || {}, { Ct: _, ft: v } = n || {}, { B: y } = r, { M: b, P: S } = Er(), { rn: C, j: w } = i, [T, E] = e("showNativeOverlaidScrollbars"), [D, I] = e("scrollbars.theme"), [L, R] = e("scrollbars.visibility"), [B, H] = e("scrollbars.autoHide"), [U, ee] = e("scrollbars.autoHideSuspend"), [te] = e("scrollbars.autoHideDelay"), [ne, W] = e("scrollbars.dragScroll"), [re, ie] = e("scrollbars.clickScroll"), [ae, oe] = e("overflow"), se = v && !t, ce = o || s || g || _ || t, le = m || R || oe, ue = T && b.x && b.y, de = !S && !V, fe = ue || de, pe = (e, t, n) => {
+				let r = e.includes(We) && (L === He || L === "auto" && t === We);
+				return A(Xn, r, n), r;
 			};
-			if (p = re, (E || me) && A(Ln, he), P && (A(d), A(D, !0), d = D), (ne || ue) && (L(!V), ue && V && (w.x || w.y ? (f(), x((() => {
-				f = Q(O, ze, h(J(L, !0)), { A: !0 });
-			}))) : L(!0))), B && (c = R === "move", l = R === "leave", u = R === "never", te(u, !0)), ae && A(Qn, ie), se && A(Zn, !!oe), fe) {
-				let e = H(ce.x, C.x, !0), t = H(ce.y, C.y, !1);
-				A(Gn, !(e && t));
+			if (p = te, (E || de) && A(Un, fe), I && (A(d), A(D, !0), d = D), (ee || se) && (z(!U), se && U && (w.x || w.y ? (f(), x((() => {
+				f = Z(O, We, h(J(z, !0)), { A: !0 });
+			}))) : z(!0))), H && (c = B === "move", l = B === "leave", u = B === "never", F(u, !0)), W && A(ir, ne), ie && A(rr, !!re), le) {
+				let e = pe(ae.x, C.x, !0), t = pe(ae.y, C.y, !1);
+				A(Zn, !(e && t));
 			}
-			de && (M(), j(), N(), g && ee(), A(qn, !w.x, !0), A(qn, !w.y, !1), A(zn, y && !k));
+			ce && (M(), j(), P(), g && N(), A($n, !w.x, !0), A($n, !w.y, !1), A(Gn, y && !k));
 		},
 		{},
 		T
 	];
-}, Pr = (e) => {
-	let { K: t, P: n } = br(), { elements: r } = t(), { padding: i, viewport: a, content: o } = r, s = ye(e), c = s ? {} : e, { elements: l } = c, { padding: u, viewport: d, content: f } = l || {}, p = s ? e : c.target, m = ht(p), h = p.ownerDocument, g = h.documentElement, _ = () => h.defaultView || I, v = J(Or, [p]), y = J(kr, [p]), b = J(Tt, ""), x = J(v, b, a), S = J(y, b, o), C = (e) => {
-		let t = Bt(e), n = Ht(e), r = Nt(e, Ne), i = Nt(e, Pe);
-		return n.w - t.w > 0 && !tr(r) || n.h - t.h > 0 && !tr(i);
-	}, w = x(d), T = w === p, E = T && m, D = !T && S(f), O = !T && w === D, k = E ? g : w, A = E ? k : p, j = !T && y(b, i, u), M = !O && D, ee = [
+}, Br = (e) => {
+	let { K: t, P: n } = Er(), { elements: r } = t(), { padding: i, viewport: a, content: o } = r, s = Se(e), c = s ? {} : e, { elements: l } = c, { padding: u, viewport: d, content: f } = l || {}, p = s ? e : c.target, m = bt(p), h = p.ownerDocument, g = h.documentElement, _ = () => h.defaultView || U, v = J(Pr, [p]), y = J(Fr, [p]), b = J(jt, ""), x = J(v, b, a), S = J(y, b, o), C = (e) => {
+		let t = Kt(e), n = Jt(e), r = zt(e, Re), i = zt(e, ze);
+		return n.w - t.w > 0 && !sr(r) || n.h - t.h > 0 && !sr(i);
+	}, w = x(d), T = w === p, E = T && m, D = !T && S(f), O = !T && w === D, k = E ? g : w, A = E ? k : p, j = !T && y(b, i, u), M = !O && D, N = [
 		M,
 		k,
 		j,
 		A
-	].map(((e) => ye(e) && !_t(e) && e)), N = (e) => e && be(ee, e), te = !N(k) && C(k) ? k : p, P = E ? g : k, F = {
+	].map(((e) => Se(e) && !St(e) && e)), P = (e) => e && we(N, e), F = !P(k) && C(k) ? k : p, I = E ? g : k, L = {
 		dt: p,
 		vt: A,
 		L: k,
 		ln: j,
 		ht: M,
-		gt: P,
+		gt: I,
 		Qt: E ? h : k,
-		an: m ? g : te,
+		an: m ? g : F,
 		Gt: h,
 		bt: m,
 		At: s,
 		V: T,
 		un: _,
-		yt: (e) => ct(k, Cn, e),
-		wt: (e, t) => st(k, Cn, e, t),
-		St: () => st(P, Cn, On, !0)
-	}, { dt: L, vt: R, ln: z, L: B, ht: V } = F, ne = [() => {
-		rt(R, [xn, vn]), rt(L, vn), m && rt(g, [vn, xn]);
-	}], re = gt([
+		yt: (e) => pt(k, kn, e),
+		wt: (e, t) => ft(k, kn, e, t),
+		St: () => ft(I, kn, Pn, !0)
+	}, { dt: R, vt: z, ln: B, L: V, ht: H } = L, ee = [() => {
+		ct(z, [Dn, wn]), ct(R, wn), m && ct(g, [wn, Dn]);
+	}], te = xt([
+		H,
 		V,
 		B,
 		z,
-		R,
-		L
-	].find(((e) => e && !N(e)))), ie = E ? L : V || B, ae = J(q, ne);
+		R
+	].find(((e) => e && !P(e)))), ne = E ? R : H || V, W = J(Ae, ee);
 	return [
-		F,
+		L,
 		() => {
-			let e = _(), t = yt(), r = (e) => {
-				Z(_t(e), gt(e)), xt(e);
-			}, i = (e) => Q(e, "focusin focusout focus blur", Zt, {
+			let e = _(), t = wt(), r = (e) => {
+				Dt(St(e), xt(e)), Et(e);
+			}, i = (e) => Z(e, "focusin focusout focus blur", rn, {
 				I: !0,
 				D: !1
-			}), a = "tabindex", o = et(B, a), s = i(t);
-			return nt(R, xn, T ? "" : Sn), nt(z, jn, ""), nt(B, Cn, ""), nt(V, Mn, ""), T || (nt(B, a, o || "-1"), m && nt(g, bn, "")), Z(ie, re), Z(R, z), Z(z || R, !T && B), Z(B, V), K(ne, [s, () => {
-				let e = yt(), t = N(B), n = t && e === B ? L : e, s = i(n);
-				rt(z, jn), rt(V, Mn), rt(B, Cn), m && rt(g, bn), o ? nt(B, a, o) : rt(B, a), N(V) && r(V), t && r(B), N(z) && r(z), an(n), s();
-			}]), n && !T && (ot(B, Cn, kn), K(ne, J(rt, B, Cn))), an(!T && m && t === L && e.top === e ? B : t), s(), re = 0, ae;
+			}), a = "tabindex", o = at(V, a), s = i(t);
+			return st(z, Dn, T ? "" : On), st(B, Ln, ""), st(V, kn, ""), st(H, Rn, ""), T || (st(V, a, o || "-1"), m && st(g, En, "")), Dt(ne, te), Dt(z, B), Dt(B || z, !T && V), Dt(V, H), q(ee, [s, () => {
+				let e = wt(), t = P(V), n = t && e === V ? R : e, s = i(n);
+				ct(B, Ln), ct(H, Rn), ct(V, kn), m && ct(g, En), o ? st(V, a, o) : ct(V, a), P(H) && r(H), t && r(V), P(B) && r(B), dn(n), s();
+			}]), n && !T && (dt(V, kn, Fn), q(ee, J(ct, V, kn))), dn(!T && m && t === R && e.top === e ? V : t), s(), te = 0, W;
 		},
-		ae
+		W
 	];
-}, Fr = ({ ht: e }) => ({ Zt: t, fn: n, It: r }) => {
+}, Vr = ({ ht: e }) => ({ Zt: t, fn: n, It: r }) => {
 	let { $t: i } = t || {}, { Ot: a } = n;
-	e && (i || r) && Mt(e, { [Ie]: a && "100%" });
-}, Ir = ({ vt: e, ln: t, L: n, V: r }, i) => {
-	let [a, o] = F({
-		i: We,
-		o: Pt()
-	}, J(Pt, e, "padding", ""));
+	e && (i || r) && Rt(e, { [Ve]: a && "100%" });
+}, Hr = ({ vt: e, ln: t, L: n, V: r }, i) => {
+	let [a, o] = H({
+		i: Ye,
+		o: Bt()
+	}, J(Bt, e, "padding", ""));
 	return ({ Dt: e, Zt: s, fn: c, It: l }) => {
-		let [u, d] = o(l), { P: f } = br(), { _t: p, xt: m, Ct: h } = s || {}, { B: g } = c, [_, v] = e("paddingAbsolute");
+		let [u, d] = o(l), { P: f } = Er(), { _t: p, xt: m, Ct: h } = s || {}, { B: g } = c, [_, v] = e("paddingAbsolute");
 		(p || d || l || m) && ([u, d] = a(l));
 		let y = !r && (v || h || d);
 		if (y) {
 			let e = !_ || !t && !f, r = u.r + u.l, a = u.t + u.b, o = {
-				[je]: e && !g ? -r : 0,
-				[Me]: e ? -a : 0,
-				[Ae]: e && g ? -r : 0,
+				[Ie]: e && !g ? -r : 0,
+				[Le]: e ? -a : 0,
+				[Fe]: e && g ? -r : 0,
 				top: e ? -u.t : 0,
 				right: e ? g ? -u.r : "auto" : 0,
 				left: e ? g ? "auto" : -u.l : 0,
-				[Fe]: e && `calc(100% + ${r}px)`
+				[Be]: e && `calc(100% + ${r}px)`
 			}, s = {
-				[Ee]: e ? u.t : 0,
-				[De]: e ? u.r : 0,
-				[ke]: e ? u.b : 0,
-				[Oe]: e ? u.l : 0
+				[je]: e ? u.t : 0,
+				[Me]: e ? u.r : 0,
+				[Pe]: e ? u.b : 0,
+				[Ne]: e ? u.l : 0
 			};
-			Mt(t || n, o), Mt(n, s), X(i, {
+			Rt(t || n, o), Rt(n, s), X(i, {
 				ln: u,
 				_n: !e,
 				F: t ? s : X({}, o, s)
@@ -1010,29 +1122,29 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		}
 		return { dn: y };
 	};
-}, Lr = (e, t) => {
-	let n = br(), { vt: r, ln: i, L: a, V: o, Qt: s, gt: c, bt: l, wt: u, un: d } = e, { P: f } = n, p = l && o, m = J(L, 0), h = {
+}, Ur = (e, t) => {
+	let n = Er(), { vt: r, ln: i, L: a, V: o, Qt: s, gt: c, bt: l, wt: u, un: d } = e, { P: f } = n, p = l && o, m = J(ee, 0), h = {
 		display: () => !1,
 		direction: (e) => e !== "ltr",
 		flexDirection: (e) => e.endsWith("-reverse"),
 		writingMode: (e) => e !== "horizontal-tb"
 	}, g = Y(h), _ = {
-		i: He,
+		i: qe,
 		o: {
 			w: 0,
 			h: 0
 		}
 	}, v = {
-		i: Ue,
+		i: Je,
 		o: {}
 	}, y = (e) => {
-		u(Dn, !p && e);
-	}, b = () => Nt(a, g), x = (e, t) => {
+		u(Nn, !p && e);
+	}, b = () => zt(a, g), x = (e, t) => {
 		let n = !Y(e).length, r = t ? !0 : g.some(((t) => {
 			let n = e[t];
-			return me(n) && h[t](n);
+			return ge(n) && h[t](n);
 		}));
-		if (n || !r || !Gt(a)) return {
+		if (n || !r || !Zt(a)) return {
 			T: {
 				x: 0,
 				y: 0
@@ -1043,43 +1155,43 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 			}
 		};
 		y(!0);
-		let i = $t(c), o = Q(s, ze, ((e) => {
-			let t = $t(c);
-			e.isTrusted && t.x === i.x && t.y === i.y && Yt(e);
+		let i = on(c), o = Z(s, We, ((e) => {
+			let t = on(c);
+			e.isTrusted && t.x === i.x && t.y === i.y && tn(e);
 		}), {
 			I: !0,
 			A: !0
-		}), l = u(An, !0);
-		Qt(c, {
+		}), l = u(In, !0);
+		an(c, {
 			x: 0,
 			y: 0
 		}), l();
-		let d = $t(c), f = Ht(c);
-		Qt(c, {
+		let d = on(c), f = Jt(c);
+		an(c, {
 			x: f.w,
 			y: f.h
 		});
-		let p = $t(c), m = {
+		let p = on(c), m = {
 			x: p.x - d.x,
 			y: p.y - d.y
 		};
-		Qt(c, {
+		an(c, {
 			x: -f.w,
 			y: -f.h
 		});
-		let _ = $t(c), v = {
+		let _ = on(c), v = {
 			x: _.x - d.x,
 			y: _.y - d.y
 		}, b = {
-			x: B(m.x) >= B(v.x) ? p.x : _.x,
-			y: B(m.y) >= B(v.y) ? p.y : _.y
+			x: W(m.x) >= W(v.x) ? p.x : _.x,
+			y: W(m.y) >= W(v.y) ? p.y : _.y
 		};
-		return Qt(c, i), re((() => o())), {
+		return an(c, i), ae((() => o())), {
 			T: d,
 			k: b
 		};
 	}, S = (e, t) => {
-		let n = I.devicePixelRatio % 1 == 0 ? 0 : 1, r = {
+		let n = U.devicePixelRatio % 1 == 0 ? 0 : 1, r = {
 			w: m(e.w - t.w),
 			h: m(e.h - t.h)
 		};
@@ -1089,8 +1201,8 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		};
 	}, C = (e, t) => {
 		let n = (e, t, n, r) => {
-			let i = e === Le ? Re : nr(e), a = tr(e), o = tr(n);
-			return !t && !r ? Re : a && o ? Le : a ? t && r ? i : t ? Le : Re : t ? i : o && r ? Le : Re;
+			let i = e === He ? Ue : cr(e), a = sr(e), o = sr(n);
+			return !t && !r ? Ue : a && o ? He : a ? t && r ? i : t ? He : Ue : t ? i : o && r ? He : Ue;
 		};
 		return {
 			x: n(t.x, e.x, t.y, e.y),
@@ -1098,58 +1210,58 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		};
 	}, w = (e) => {
 		let t = (e) => [
-			Le,
-			Re,
-			ze
-		].map(((t) => V(rr(t), e))), n = t(!0).concat(t()).join(" ");
-		u(n), u(Y(e).map(((t) => V(e[t], t === "x"))).join(" "), !0);
-	}, [T, E] = F(_, J(Ut, a)), [D, O] = F(_, J(Ht, a)), [k, A] = F(_), [j] = F(v), [M, ee] = F(_), [N] = F(v), [te] = F({
-		i: (e, t) => Ve(e, t, Te(xe(Y(e), Y(t)))),
+			He,
+			Ue,
+			We
+		].map(((t) => z(lr(t), e))), n = t(!0).concat(t()).join(" ");
+		u(n), u(Y(e).map(((t) => z(e[t], t === "x"))).join(" "), !0);
+	}, [T, E] = H(_, J(Yt, a)), [D, O] = H(_, J(Jt, a)), [k, A] = H(_), [j] = H(v), [M, N] = H(_), [P] = H(v), [F] = H({
+		i: (e, t) => Ke(e, t, ke(Te(Y(e), Y(t)))),
 		o: {}
-	}), [P, R] = F({
-		i: (e, t) => Ue(e.T, t.T) && Ue(e.k, t.k),
-		o: en()
-	}), z = pn(ar), V = (e, t) => `${t ? wn : Tn}${Be(e)}`;
+	}), [I, L] = H({
+		i: (e, t) => Je(e.T, t.T) && Je(e.k, t.k),
+		o: sn()
+	}), R = yn(dr), z = (e, t) => `${t ? An : jn}${Ge(e)}`;
 	return ({ Dt: o, Zt: s, fn: c, It: l }, { dn: h }) => {
-		let { _t: g, Ht: _, xt: v, Ct: F, ft: I, Et: L } = s || {}, { X: B, Y: V, W: ne } = z && z.R(e, t, c, n, o) || {}, [re, ie] = er(o, n), [ae, oe] = o("overflow"), se = tr(ae.x), ce = tr(ae.y), le = g || h || v || F || L || ie, ue = E(l), de = O(l), fe = A(l), pe = ee(l);
-		if (ie && f && u(kn, !re), le) {
-			ct(r, xn, yn) && y(!0);
-			let e = V && V(), [t] = ue = T(l), [n] = de = D(l), i = Vt(a), o = p && zt(d()), s = {
+		let { _t: g, Ht: _, xt: v, Ct: z, ft: B, Et: V } = s || {}, { X: H, Y: U, W: ee } = R && R.R(e, t, c, n, o) || {}, [te, ne] = or(o, n), [W, re] = o("overflow"), ie = sr(W.x), ae = sr(W.y), oe = g || h || v || z || V || ne, se = E(l), ce = O(l), le = A(l), ue = N(l);
+		if (ne && f && u(Fn, !te), oe) {
+			pt(r, Dn, Tn) && y(!0);
+			let e = U && U(), [t] = se = T(l), [n] = ce = D(l), i = qt(a), o = p && Gt(d()), s = {
 				w: m(n.w + t.w),
 				h: m(n.h + t.h)
 			}, c = {
 				w: m((o ? o.w : i.w + m(i.w - n.w)) + t.w),
 				h: m((o ? o.h : i.h + m(i.h - n.h)) + t.h)
 			};
-			e && e(), pe = M(c), fe = k(S(s, c), l);
-		}
-		let [me, he] = pe, [H, U] = fe, [ge, _e] = de, [ve, ye] = ue, [W] = j({
-			x: H.w > 0,
-			y: H.h > 0
-		}), G = se && ce && (W.x || W.y) || se && W.x && !W.y || ce && W.y && !W.x, be = h || F || L || ye || _e || he || U || oe || ie || le || _ && p, [xe] = o("update.flowDirectionStyles"), [K, Se] = te(xe ? xe(a) || {} : b(), l), [Ce, we] = F || I || Se || l ? P(x(K, !!xe), l) : R(), Te = C(W, ae);
-		y(!1), be && (w(Te), Te = ir(a, W), ne && B && (B(Te, ge, ve), Mt(a, ne(Te))));
-		let [q, Ee] = N(Te);
-		return st(r, xn, yn, G), st(i, jn, yn, G), X(t, {
+			e && e(), ue = M(c), le = k(S(s, c), l);
+		}
+		let [de, fe] = ue, [pe, me] = le, [he, ge] = ce, [_e, ve] = se, [G] = j({
+			x: pe.w > 0,
+			y: pe.h > 0
+		}), ye = ie && ae && (G.x || G.y) || ie && G.x && !G.y || ae && G.y && !G.x, be = h || z || V || ve || ge || fe || me || re || ne || oe || _ && p, [xe] = o("update.flowDirectionStyles"), [Se, Ce] = F(xe ? xe(a) || {} : b(), l), [K, we] = z || B || Ce || l ? I(x(Se, !!xe), l) : L(), Te = C(G, W);
+		y(!1), be && (w(Te), Te = ur(a, G), ee && H && (H(Te, he, _e), Rt(a, ee(Te))));
+		let [q, Ee] = P(Te);
+		return ft(r, Dn, Tn, ye), ft(i, Ln, Tn, ye), X(t, {
 			rn: q,
 			Vt: {
-				x: me.w,
-				y: me.h
+				x: de.w,
+				y: de.h
 			},
 			Rt: {
-				x: H.w,
-				y: H.h
+				x: pe.w,
+				y: pe.h
 			},
-			j: W,
-			Tt: tn(Ce, H)
+			j: G,
+			Tt: cn(K, pe)
 		}), {
 			en: Ee,
-			nn: he,
-			sn: U,
-			cn: we || U
+			nn: fe,
+			sn: me,
+			cn: we || me
 		};
 	};
-}, Rr = (e) => {
-	let [t, n, r] = Pr(e), i = {
+}, Wr = (e) => {
+	let [t, n, r] = Br(e), i = {
 		ln: {
 			t: 0,
 			r: 0,
@@ -1158,13 +1270,13 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		},
 		_n: !1,
 		F: {
+			[Ie]: 0,
+			[Le]: 0,
+			[Fe]: 0,
 			[je]: 0,
 			[Me]: 0,
-			[Ae]: 0,
-			[Ee]: 0,
-			[De]: 0,
-			[ke]: 0,
-			[Oe]: 0
+			[Pe]: 0,
+			[Ne]: 0
 		},
 		Vt: {
 			x: 0,
@@ -1175,42 +1287,42 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 			y: 0
 		},
 		rn: {
-			x: Re,
-			y: Re
+			x: Ue,
+			y: Ue
 		},
 		j: {
 			x: !1,
 			y: !1
 		},
-		Tt: en()
-	}, { dt: a, gt: o, V: s, St: c } = t, { P: l, M: u } = br(), d = !l && (u.x || u.y), f = [
-		Fr(t),
-		Ir(t, i),
-		Lr(t, i)
+		Tt: sn()
+	}, { dt: a, gt: o, V: s, St: c } = t, { P: l, M: u } = Er(), d = !l && (u.x || u.y), f = [
+		Vr(t),
+		Hr(t, i),
+		Ur(t, i)
 	];
 	return [
 		n,
 		(e) => {
-			let t = {}, n = d && $t(o), r = n && c();
-			return G(f, ((n) => {
+			let t = {}, n = d && on(o), r = n && c();
+			return K(f, ((n) => {
 				X(t, n(e, t) || {});
-			})), Qt(o, n), r && r(), s || Qt(a, 0), t;
+			})), an(o, n), r && r(), s || an(a, 0), t;
 		},
 		i,
 		t,
 		r
 	];
-}, zr = (e, t, n, r) => {
+}, Gr = (e, t, n, r) => {
 	let i = !1, a = {
 		Kt: !1,
 		pn: !1
-	}, o = mr(t, {}), [s, c, l, u, d] = Rr(e), [f, p, m] = Er(u, l, o, ((e) => {
+	}, o = br(t, {}), [s, c, l, u, d] = Wr(e), [f, p, m] = Mr(u, l, o, ((e) => {
 		y({}, e);
-	})), [h, g, , _] = Nr(e, t, a, m, l, u, r), v = (e) => Y(e).some(((t) => !!e[t])), y = (e, r) => {
+	})), [h, g, , _] = zr(e, t, a, m, l, u, r), v = (e) => Y(e).some(((t) => !!e[t])), y = (e, r) => {
 		let { Kt: o, pn: s } = a;
 		if (s || o && i) return !1;
 		let { vn: l, It: u, zt: d } = e, f = l || {}, h = !!u || !i, _ = {
-			Dt: mr(t, f, h),
+			Dt: br(t, f, h),
 			vn: f,
 			It: h
 		}, y = r || p(X({}, _, { zt: d })), b = c(X({}, _, {
@@ -1221,7 +1333,7 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 			Zt: y,
 			tn: b
 		}));
-		let x = v(y), S = v(b), C = x || S || !Xe(f) || h;
+		let x = v(y), S = v(b), C = x || S || !tt(f) || h;
 		return i = !0, C && n(e, {
 			Zt: y,
 			tn: b
@@ -1229,7 +1341,7 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 	};
 	return [
 		() => {
-			let { an: e, gt: t, St: n } = u, r = $t(e), i = [
+			let { an: e, gt: t, St: n } = u, r = on(e), i = [
 				f(),
 				s(),
 				h(),
@@ -1237,7 +1349,7 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 					a.pn = !0;
 				}
 			], o = n();
-			return Qt(t, r), o(), J(q, i);
+			return an(t, r), o(), J(Ae, i);
 		},
 		y,
 		(e) => {
@@ -1249,7 +1361,7 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		},
 		() => {
 			g({
-				Dt: mr(t, {}, !1),
+				Dt: br(t, {}, !1),
 				vn: {},
 				It: !1
 			});
@@ -1265,19 +1377,19 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 		},
 		d
 	];
-}, Br = /* @__PURE__ */ new WeakMap(), Vr = (e, t) => {
-	Br.set(e, t);
-}, Hr = (e) => {
-	Br.delete(e);
-}, Ur = (e) => Br.get(e), Wr = (e, t, n) => {
-	let { tt: r } = br(), i = ye(e), a = i ? e : e.target, o = Ur(a);
+}, Kr = /* @__PURE__ */ new WeakMap(), qr = (e, t) => {
+	Kr.set(e, t);
+}, Jr = (e) => {
+	Kr.delete(e);
+}, Yr = (e) => Kr.get(e), Xr = (e, t, n) => {
+	let { tt: r } = Er(), i = Se(e), a = i ? e : e.target, o = Yr(a);
 	if (t && !o) {
 		let o = [], s = {}, c = (e) => {
-			let t = Ye(e), n = pn(mn);
+			let t = et(e), n = yn(bn);
 			return n ? n(t, !0) : t;
-		}, l = X({}, r(), c(t)), [u, d, f] = sn(), [p, m, h] = sn(n), g = (e, t) => {
+		}, l = X({}, r(), c(t)), [u, d, f] = pn(), [p, m, h] = pn(n), g = (e, t) => {
 			h(e, t), f(e, t);
-		}, [_, v, y, b, x, S, C] = zr(e, l, (({ vn: e, It: t }, { Zt: n, tn: r }) => {
+		}, [_, v, y, b, x, S, C] = Gr(e, l, (({ vn: e, It: t }, { Zt: n, tn: r }) => {
 			let { _t: i, Ct: a, $t: o, xt: s, Ht: c, ft: l } = n, { nn: u, sn: d, en: f, cn: p } = r;
 			g("updated", [T, {
 				updateHints: {
@@ -1297,12 +1409,12 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 			}]);
 		}), ((e) => g("scroll", [T, e]))), w = (e) => {
 			let { gn: t } = x(), { pn: n } = t;
-			n || (Hr(a), q(o), g("destroyed", [T, e]), d(), m());
+			n || (Jr(a), Ae(o), g("destroyed", [T, e]), d(), m());
 		}, T = {
 			options(e, t) {
 				if (e) {
-					let n = t ? r() : {}, i = pr(l, X(n, c(e)));
-					Xe(i) || (X(l, i), v({ vn: i }));
+					let n = t ? r() : {}, i = yr(l, X(n, c(e)));
+					tt(i) || (X(l, i), v({ vn: i }));
 				}
 				return X({}, l);
 			},
@@ -1363,22 +1475,22 @@ var In = "os-trinsic-observer", Ln = "os-theme-none", Rn = "os-scrollbar", zn =
 			sleep: y,
 			plugin: (e) => s[Y(e)[0]]
 		};
-		return K(o, [C]), Vr(a, T), dn(cn, Wr, [
+		return q(o, [C]), qr(a, T), _n(mn, Xr, [
 			T,
 			u,
 			s
-		]), Ar(S.yn.bt, !i && e.cancel) ? (w(!0), T) : (K(o, _()), g("initialized", [T]), T.update(), T);
+		]), Ir(S.yn.bt, !i && e.cancel) ? (w(!0), T) : (q(o, _()), g("initialized", [T]), T.update(), T);
 	}
 	return o;
 };
-Wr.plugin = (e) => {
-	let t = U(e), n = t ? e : [e], r = n.map(((e) => dn(e, Wr)[0]));
-	return un(n), t ? r : r[0];
-}, Wr.valid = (e) => {
-	let t = e && e.elements, n = H(t) && t();
-	return ve(n) && !!Ur(n.target);
-}, Wr.env = () => {
-	let { U: e, M: t, P: n, J: r, ot: i, st: a, K: o, Z: s, tt: c, nt: l } = br();
+Xr.plugin = (e) => {
+	let t = G(e), n = t ? e : [e], r = n.map(((e) => _n(e, Xr)[0]));
+	return gn(n), t ? r : r[0];
+}, Xr.valid = (e) => {
+	let t = e && e.elements, n = ve(t) && t();
+	return xe(n) && !!Yr(n.target);
+}, Xr.env = () => {
+	let { U: e, M: t, P: n, J: r, ot: i, st: a, K: o, Z: s, tt: c, nt: l } = Er();
 	return X({}, {
 		scrollbarsSize: e,
 		scrollbarsOverlaid: t,
@@ -1391,10 +1503,10 @@ Wr.plugin = (e) => {
 		getDefaultOptions: c,
 		setDefaultOptions: l
 	});
-}, Wr.nonce = _r, Wr.trustedTypePolicy = wt;
+}, Xr.nonce = Cr, Xr.trustedTypePolicy = At;
 //#endregion
 //#region node_modules/overlayscrollbars-vue/overlayscrollbars-vue.mjs
-var Gr = () => {
+var Zr = () => {
 	if (typeof window > "u") {
 		let e = () => {};
 		return [e, e];
@@ -1407,20 +1519,20 @@ var Gr = () => {
 			c(), t = i(n);
 		} : n, typeof a == "object" ? a : { timeout: 2233 });
 	}, c];
-}, Kr = (e) => {
-	let t = null, n, r, i, a = w(e || {}), [o, s] = Gr();
-	return k(() => D(a.value?.defer), (e) => {
+}, Qr = (e) => {
+	let t = null, n, r, i, a = E(e || {}), [o, s] = Zr();
+	return j(() => k(a.value?.defer), (e) => {
 		i = e;
 	}, {
 		deep: !0,
 		immediate: !0
-	}), k(() => D(a.value?.options), (e) => {
-		n = e, Wr.valid(t) && t.options(n || {}, !0);
+	}), j(() => k(a.value?.options), (e) => {
+		n = e, Xr.valid(t) && t.options(n || {}, !0);
 	}, {
 		deep: !0,
 		immediate: !0
-	}), k(() => D(a.value?.events), (e) => {
-		r = e, Wr.valid(t) && t.on(
+	}), j(() => k(a.value?.events), (e) => {
+		r = e, Xr.valid(t) && t.on(
 			/* c8 ignore next */
 			r || {},
 			!0
@@ -1428,14 +1540,14 @@ var Gr = () => {
 	}, {
 		deep: !0,
 		immediate: !0
-	}), _(() => {
+	}), y(() => {
 		s(), t?.destroy();
 	}), [(e) => {
-		if (Wr.valid(t)) return t;
-		let a = () => t = Wr(e, n || {}, r || {});
+		if (Xr.valid(t)) return t;
+		let a = () => t = Xr(e, n || {}, r || {});
 		i ? o(a, i) : a();
 	}, () => t];
-}, qr = /* @__PURE__ */ u({
+}, $r = /* @__PURE__ */ u({
 	__name: "OverlayScrollbarsComponent",
 	props: {
 		element: {
@@ -1453,12 +1565,12 @@ var Gr = () => {
 		"osScroll"
 	],
 	setup(e, { expose: t, emit: n }) {
-		let i = e, o = {
+		let r = e, a = {
 			initialized: "osInitialized",
 			updated: "osUpdated",
 			destroyed: "osDestroyed",
 			scroll: "osScroll"
-		}, { element: s, options: c, events: l, defer: u } = E(i), d = w(null), f = w(null), p = y(), [m, h] = Kr({
+		}, { element: s, options: c, events: l, defer: u } = O(r), d = E(null), f = E(null), p = x(), [m, h] = Qr({
 			options: c,
 			events: p,
 			defer: u
@@ -1466,7 +1578,7 @@ var Gr = () => {
 		return t({
 			osInstance: h,
 			getElement: () => d.value
-		}), A((e) => {
+		}), M((e) => {
 			let { value: t } = d, { value: n } = f;
 			t && (m(s.value === "body" ? {
 				target: t,
@@ -1478,30 +1590,30 @@ var Gr = () => {
 					content: n
 				}
 			}), e(() => h()?.destroy()));
-		}), k(() => D(l), (e) => {
+		}), j(() => k(l), (e) => {
 			let t = e || {};
-			p.value = Object.keys(o).reduce((e, r) => {
+			p.value = Object.keys(a).reduce((e, r) => {
 				let i = t[r];
-				return e[r] = [(...e) => n(o[r], ...e), ...(Array.isArray(i) ? i : [i]).filter(Boolean)], e;
+				return e[r] = [(...e) => n(a[r], ...e), ...(Array.isArray(i) ? i : [i]).filter(Boolean)], e;
 			}, {});
 		}, {
 			deep: !0,
 			immediate: !0
-		}), (e, t) => (v(), r(C(D(s)), {
+		}), (e, t) => (b(), i(T(k(s)), {
 			"data-overlayscrollbars-initialize": "",
 			ref_key: "elementRef",
 			ref: d
 		}, {
-			default: j(() => [D(s) === "body" ? x(e.$slots, "default", { key: 0 }) : (v(), a("div", {
+			default: N(() => [k(s) === "body" ? C(e.$slots, "default", { key: 0 }) : (b(), o("div", {
 				key: 1,
 				"data-overlayscrollbars-contents": "",
 				ref_key: "slotRef",
 				ref: f
-			}, [x(e.$slots, "default")], 512))]),
+			}, [C(e.$slots, "default")], 512))]),
 			_: 3
 		}, 512));
 	}
-}), Jr = /*@__PURE__*/ u({
+}), ei = /*@__PURE__*/ u({
 	__name: "TextScroller",
 	props: {
 		delay: { default: 500 },
@@ -1513,69 +1625,70 @@ var Gr = () => {
 		}
 	},
 	setup(e) {
-		let t = e, n = y(), r = y(), i = y(!1), s = y(0), c = y(!1), l;
+		let t = e, n = x(), r = x(), i = x(!1), a = x(0), c = x(!1), l;
 		function u() {
 			return c.value || t.active;
 		}
 		function d() {
-			l &&= (clearTimeout(l), void 0), i.value = !1, s.value = 0;
+			l &&= (clearTimeout(l), void 0), i.value = !1, a.value = 0;
 		}
-		function g() {
+		function f() {
 			let e = n.value?.clientWidth ?? 0, t = r.value?.scrollWidth ?? 0;
-			s.value = Math.max(0, t - e), i.value = s.value > 0;
+			a.value = Math.max(0, t - e), i.value = a.value > 0;
 		}
-		function _() {
+		function h() {
 			d(), l = setTimeout(async () => {
-				await f(), u() && g();
+				await p(), u() && f();
 			}, t.delay);
 		}
-		function b() {
+		function v() {
 			u() && (i.value = !1, l = setTimeout(() => {
-				u() && g();
+				u() && f();
 			}, t.repeatDelay));
 		}
-		return k(() => t.active, (e) => {
-			e ? _() : c.value || d();
-		}), h(d), (e, l) => (v(), a("span", {
+		return j(() => t.active, (e) => {
+			e ? h() : c.value || d();
+		}), _(d), (e, l) => (b(), o("span", {
 			ref_key: "viewport",
 			ref: n,
-			class: p(["text-scroller", { scrolling: i.value }]),
-			style: m({
-				"--scroll-distance": `${s.value}px`,
-				"--scroll-duration": `${Math.max(2, s.value / t.speed)}s`
+			class: m(["text-scroller", { scrolling: i.value }]),
+			style: g({
+				"--scroll-distance": `${a.value}px`,
+				"--scroll-duration": `${Math.max(2, a.value / t.speed)}s`
 			}),
 			onMouseenter: l[0] ||= (e) => {
-				c.value = !0, t.active || _();
+				c.value = !0, t.active || h();
 			},
 			onMouseleave: l[1] ||= (e) => {
 				c.value = !1, t.active || d();
 			}
-		}, [o("span", {
+		}, [s("span", {
 			ref_key: "content",
 			ref: r,
 			class: "text-scroller-content",
-			onAnimationend: b
-		}, [x(e.$slots, "default", {}, void 0, !0)], 544)], 38));
+			onAnimationend: v
+		}, [C(e.$slots, "default", {}, void 0, !0)], 544)], 38));
 	}
-}), $ = (e, t) => {
+}), Q = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, Yr = /*#__PURE__*/ $(Jr, [["__scopeId", "data-v-8fac895b"]]), Xr = { class: "component-list" }, Zr = { class: "component-head" }, Qr = ["title"], $r = { class: "palette-search" }, ei = {
+}, ti = /*#__PURE__*/ Q(ei, [["__scopeId", "data-v-8fac895b"]]), ni = { class: "component-list" }, ri = { class: "component-head" }, ii = ["title"], ai = { class: "palette-search" }, oi = {
 	key: 0,
 	class: "component-groups"
-}, ti = { class: "group-label" }, ni = { class: "component-items" }, ri = [
+}, si = { class: "group-label" }, ci = { class: "component-items" }, li = [
 	"aria-label",
+	"onDragstart",
 	"onMouseenter",
 	"onClick"
-], ii = { class: "component-icon icon" }, ai = {
+], ui = { class: "component-icon icon" }, di = {
 	key: 1,
 	class: "component-empty"
-}, oi = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}, fi = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "ComponenList",
 	emits: ["select"],
-	setup(t, { emit: r }) {
-		let i = r, s = P(), u = y(""), d = y(), f = {
+	setup(t, { emit: n }) {
+		let i = n, a = V(), u = x(""), d = x(), f = {
 			overflow: {
 				x: "hidden",
 				y: "scroll"
@@ -1753,10 +1866,10 @@ var Gr = () => {
 				groupKey: "component-oauth",
 				icon: "checklist"
 			}
-		], m = n(() => {
+		], m = r(() => {
 			let e = u.value.trim().toLowerCase();
 			return e ? p.filter((t) => `${t.label} ${t.type}`.toLowerCase().includes(e)) : p;
-		}), h = n(() => {
+		}), h = r(() => {
 			let e = /* @__PURE__ */ new Map();
 			for (let t of m.value) {
 				let n = e.get(t.group) ?? [];
@@ -1768,49 +1881,54 @@ var Gr = () => {
 				items: t
 			}));
 		});
-		return (t, n) => (v(), a("section", Xr, [
-			o("div", Zr, [o("span", { title: D(s)("components", "Components") }, T(D(s)("components", "Components")), 9, Qr)]),
-			o("div", $r, [n[2] ||= o("span", { class: "icon" }, "search", -1), M(o("input", {
+		function g(e, t) {
+			e.dataTransfer && (e.dataTransfer.effectAllowed = "copy", e.dataTransfer.setData("application/x-aham-designer-component", t));
+		}
+		return (t, n) => (b(), o("section", ni, [
+			s("div", ri, [s("span", { title: k(a)("components", "Components") }, D(k(a)("components", "Components")), 9, ii)]),
+			s("div", ai, [n[2] ||= s("span", { class: "icon" }, "search", -1), P(s("input", {
 				"onUpdate:modelValue": n[0] ||= (e) => u.value = e,
 				type: "search",
 				placeholder: "Search components...",
 				"aria-label": "Search components"
-			}, null, 512), [[O, u.value]])]),
-			l(D(qr), {
+			}, null, 512), [[A, u.value]])]),
+			l(k($r), {
 				class: "component-content",
 				options: f,
 				defer: ""
 			}, {
-				default: j(() => [h.value.length ? (v(), a("div", ei, [(v(!0), a(e, null, b(h.value, (t) => (v(), a("section", {
+				default: N(() => [h.value.length ? (b(), o("div", oi, [(b(!0), o(e, null, S(h.value, (t) => (b(), o("section", {
 					key: t.name,
 					class: "component-group"
-				}, [o("div", ti, T(D(s)(t.key, t.name)), 1), o("div", ni, [(v(!0), a(e, null, b(t.items, (e) => (v(), a("button", {
+				}, [s("div", si, D(k(a)(t.key, t.name)), 1), s("div", ci, [(b(!0), o(e, null, S(t.items, (e) => (b(), o("button", {
 					key: e.type,
 					type: "button",
 					class: "component-item",
-					"aria-label": `${D(s)("add-component", "Add")} ${D(s)(e.key, e.label)}`,
+					"aria-label": `${k(a)("add-component", "Add")} ${k(a)(e.key, e.label)}`,
+					draggable: "true",
+					onDragstart: (t) => g(t, e.type),
 					onMouseenter: (t) => d.value = e.type,
 					onMouseleave: n[1] ||= (e) => d.value = void 0,
 					onClick: (t) => i("select", e.type)
-				}, [o("span", ii, T(e.icon), 1), l(Yr, {
+				}, [s("span", ui, D(e.icon), 1), l(ti, {
 					class: "component-label",
 					active: d.value === e.type
 				}, {
-					default: j(() => [c(T(D(s)(e.key, e.label)), 1)]),
+					default: N(() => [c(D(k(a)(e.key, e.label)), 1)]),
 					_: 2
-				}, 1032, ["active"])], 40, ri))), 128))])]))), 128))])) : (v(), a("span", ai, T(D(s)("no-components-found", "No components found.")), 1))]),
+				}, 1032, ["active"])], 40, li))), 128))])]))), 128))])) : (b(), o("span", di, D(k(a)("no-components-found", "No components found.")), 1))]),
 				_: 1
 			})
 		]));
 	}
-}), [["__scopeId", "data-v-931b78ec"]]), si = [
+}), [["__scopeId", "data-v-4ebaf9de"]]), pi = [
 	"title",
 	"aria-label",
 	"disabled"
-], ci = {
+], mi = {
 	class: "icon",
 	"aria-hidden": "true"
-}, li = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}, hi = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "IconButton",
 	props: {
 		icon: { default: "settings" },
@@ -1818,38 +1936,42 @@ var Gr = () => {
 		disabled: {
 			type: Boolean,
 			default: !1
+		},
+		active: {
+			type: Boolean,
+			default: !1
 		}
 	},
 	setup(e) {
-		return (t, n) => (v(), a("button", {
-			class: "icon-button",
+		return (t, n) => (b(), o("button", {
+			class: m(["icon-button", { active: e.active }]),
 			type: "button",
 			title: e.title,
 			"aria-label": e.title,
 			disabled: e.disabled
-		}, [o("span", ci, T(e.icon), 1)], 8, si));
+		}, [s("span", mi, D(e.icon), 1)], 10, pi));
 	}
-}), [["__scopeId", "data-v-b3b6390f"]]), ui = [
+}), [["__scopeId", "data-v-5184fa46"]]), gi = [
 	"title",
 	"aria-label",
 	"aria-expanded"
-], di = ["disabled", "onClick"], fi = {
+], _i = ["disabled", "onClick"], vi = {
 	key: 0,
 	class: "icon",
 	"aria-hidden": "true"
-}, pi = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}, yi = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "MoreButton",
 	props: { items: {} },
 	emits: ["select"],
-	setup(n, { emit: s }) {
-		let c = s, l = y(!1), u = y(), d = y(), p = y(), _ = y({
+	setup(n, { emit: r }) {
+		let c = r, l = x(!1), u = x(), d = x(), f = x(), m = x({
 			top: 0,
 			right: 0
-		}), S = P()("tooltip-sidebar-more", "More");
-		function C() {
+		}), h = V()("tooltip-sidebar-more", "More");
+		function y() {
 			if (!d.value) return;
 			let e = d.value.getBoundingClientRect();
-			_.value = {
+			m.value = {
 				top: e.bottom + 6,
 				right: Math.max(8, window.innerWidth - e.right)
 			};
@@ -1857,63 +1979,63 @@ var Gr = () => {
 		function w() {
 			l.value = !l.value;
 		}
-		function E(e) {
+		function T(e) {
 			e.disabled || (c("select", e.id), l.value = !1);
 		}
-		function O(e) {
+		function E(e) {
 			let t = e.target;
-			u.value && !u.value.contains(t) && !p.value?.contains(t) && (l.value = !1);
+			u.value && !u.value.contains(t) && !f.value?.contains(t) && (l.value = !1);
 		}
-		function A(e) {
+		function O(e) {
 			e.key === "Escape" && (l.value = !1);
 		}
-		return g(() => {
-			document.addEventListener("click", O), document.addEventListener("keydown", A), window.addEventListener("resize", C), window.addEventListener("scroll", C, !0);
-		}), h(() => {
-			document.removeEventListener("click", O), document.removeEventListener("keydown", A), window.removeEventListener("resize", C), window.removeEventListener("scroll", C, !0);
-		}), k(l, async (e) => {
-			e && (await f(), C());
-		}), (s, c) => (v(), a("div", {
+		return v(() => {
+			document.addEventListener("click", E), document.addEventListener("keydown", O), window.addEventListener("resize", y), window.addEventListener("scroll", y, !0);
+		}), _(() => {
+			document.removeEventListener("click", E), document.removeEventListener("keydown", O), window.removeEventListener("resize", y), window.removeEventListener("scroll", y, !0);
+		}), j(l, async (e) => {
+			e && (await p(), y());
+		}), (r, c) => (b(), o("div", {
 			ref_key: "root",
 			ref: u,
 			class: "more-menu"
-		}, [o("button", {
+		}, [s("button", {
 			ref_key: "button",
 			ref: d,
 			class: "more-button",
 			type: "button",
-			title: D(S),
-			"aria-label": D(S),
+			title: k(h),
+			"aria-label": k(h),
 			"aria-expanded": l.value,
 			"aria-haspopup": "menu",
-			onClick: N(w, ["stop"])
-		}, [...c[0] ||= [o("span", {
+			onClick: I(w, ["stop"])
+		}, [...c[0] ||= [s("span", {
 			class: "icon",
 			"aria-hidden": "true"
-		}, "more_vert", -1)]], 8, ui), (v(), r(t, { to: "body" }, [l.value ? (v(), a("div", {
+		}, "more_vert", -1)]], 8, gi), (b(), i(t, { to: "body" }, [l.value ? (b(), o("div", {
 			key: 0,
 			ref_key: "dropdown",
-			ref: p,
+			ref: f,
 			class: "dropdown",
 			role: "menu",
-			style: m({
-				top: `${_.value.top}px`,
-				right: `${_.value.right}px`
+			style: g({
+				top: `${m.value.top}px`,
+				right: `${m.value.right}px`
 			})
-		}, [n.items?.length ? (v(!0), a(e, { key: 0 }, b(n.items, (e) => (v(), a("button", {
+		}, [n.items?.length ? (b(!0), o(e, { key: 0 }, S(n.items, (e) => (b(), o("button", {
 			key: e.id,
 			class: "menu-item",
 			type: "button",
 			role: "menuitem",
 			disabled: e.disabled,
-			onClick: (t) => E(e)
-		}, [e.icon ? (v(), a("span", fi, T(e.icon), 1)) : i("", !0), o("span", null, T(e.label), 1)], 8, di))), 128)) : x(s.$slots, "menu", { close: () => l.value = !1 }, void 0, !0, 1)], 4)) : i("", !0)]))], 512));
+			onClick: (t) => T(e)
+		}, [e.icon ? (b(), o("span", vi, D(e.icon), 1)) : a("", !0), s("span", null, D(e.label), 1)], 8, _i))), 128)) : C(r.$slots, "menu", { close: () => l.value = !1 }, void 0, !0, 1)], 4)) : a("", !0)]))], 512));
 	}
-}), [["__scopeId", "data-v-923fea1e"]]), mi = ["disabled", "aria-busy"], hi = {
+}), [["__scopeId", "data-v-923fea1e"]]), bi = ["disabled", "aria-busy"], xi = {
 	key: 0,
 	class: "spinner",
 	"aria-hidden": "true"
-}, gi = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}, Si = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "SaveButton",
 	props: {
 		disabled: {
@@ -1926,363 +2048,81 @@ var Gr = () => {
 		}
 	},
 	setup(e) {
-		let t = P();
-		return (n, r) => (v(), a("button", {
+		let t = V();
+		return (n, r) => (b(), o("button", {
 			class: "save-button",
 			type: "button",
 			disabled: e.disabled || e.working,
 			"aria-busy": e.working
-		}, [e.working ? (v(), a("span", hi)) : i("", !0), o("span", null, T(D(t)("save-changes", "Save changes")), 1)], 8, mi));
+		}, [e.working ? (b(), o("span", xi)) : a("", !0), s("span", null, D(k(t)("save-changes", "Save changes")), 1)], 8, bi));
 	}
-}), [["__scopeId", "data-v-4a359870"]]), _i = { class: "branding" }, vi = { class: "title" }, yi = { class: "subject" }, bi = { class: "document-name" }, xi = ["title"], Si = { class: "actions" }, Ci = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-4a359870"]]), Ci = { class: "branding" }, wi = { class: "title" }, Ti = { class: "subject" }, Ei = { class: "document-name" }, Di = ["title"], Oi = { class: "actions" }, ki = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Header",
 	props: {
 		subject: {},
 		shared: { type: Boolean },
-		themeChangeable: { type: Boolean },
-		moreItems: {}
+		darkModeChangeable: { type: Boolean },
+		moreItems: {},
+		darkMode: { type: Boolean },
+		translationsOpen: { type: Boolean },
+		themeOpen: { type: Boolean }
 	},
-	emits: ["moreSelect"],
+	emits: [
+		"moreSelect",
+		"toggleTheme",
+		"toggleTranslations",
+		"toggleThemePanel"
+	],
 	setup(e, { emit: t }) {
-		let n = e, s = t, c = P();
-		return (t, u) => (v(), a("header", null, [
-			o("div", _i, [u[1] ||= o("span", { class: "icon" }, "design_services", -1), o("span", vi, T(D(c)("designer", "Designer")), 1)]),
-			o("div", yi, [o("span", bi, T(e.subject), 1), e.shared ? (v(), a("span", {
+		let n = e, r = t, c = V();
+		return (t, u) => (b(), o("header", null, [
+			s("div", Ci, [u[4] ||= s("span", { class: "icon" }, "design_services", -1), s("span", wi, D(k(c)("designer", "Designer")), 1)]),
+			s("div", Ti, [s("span", Ei, D(e.subject), 1), e.shared ? (b(), o("span", {
 				key: 0,
 				class: "shared icon",
-				title: D(c)("shared", "Shared")
-			}, "groups", 8, xi)) : i("", !0)]),
-			o("div", Si, [
-				l(li, {
+				title: k(c)("shared", "Shared")
+			}, "groups", 8, Di)) : a("", !0)]),
+			s("div", Oi, [
+				l(hi, {
 					icon: "translate",
-					title: D(c)("translations", "Translations")
-				}, null, 8, ["title"]),
-				l(li, {
+					title: k(c)("translations", "Translations"),
+					active: n.translationsOpen,
+					onClick: u[0] ||= (e) => r("toggleTranslations")
+				}, null, 8, ["title", "active"]),
+				l(hi, {
 					icon: "palette",
-					title: D(c)("change-theme", "Change theme")
-				}, null, 8, ["title"]),
-				n.themeChangeable === !1 ? i("", !0) : (v(), r(li, {
+					title: k(c)("change-theme", "Change theme"),
+					active: n.themeOpen,
+					onClick: u[1] ||= (e) => r("toggleThemePanel")
+				}, null, 8, ["title", "active"]),
+				n.darkModeChangeable === !1 ? a("", !0) : (b(), i(hi, {
 					key: 0,
-					icon: "dark_mode",
-					title: D(c)("toggle-theme", "Toggle theme")
-				}, null, 8, ["title"])),
-				l(li, {
+					icon: n.darkMode ? "light_mode" : "dark_mode",
+					title: k(c)("toggle-theme", "Toggle theme"),
+					onClick: u[2] ||= (e) => r("toggleTheme")
+				}, null, 8, ["icon", "title"])),
+				l(hi, {
 					icon: "visibility",
-					title: D(c)("preview", "Preview")
+					title: k(c)("preview", "Preview")
 				}, null, 8, ["title"]),
-				l(gi, {
+				l(Si, {
 					disabled: !1,
 					working: !1
 				}),
-				l(pi, {
+				l(yi, {
 					items: n.moreItems,
-					onSelect: u[0] ||= (e) => s("moreSelect", e)
+					onSelect: u[3] ||= (e) => r("moreSelect", e)
 				}, null, 8, ["items"])
 			])
 		]));
 	}
-}), [["__scopeId", "data-v-b6ce5e30"]]), wi = {}, Ti = { class: "properties-panel" };
-function Ei(e, t) {
-	return v(), a("section", Ti, [...t[0] ||= [s("<div class=\"properties-head\" data-v-d42babf5><span class=\"property-icon icon\" data-v-d42babf5>radio_button_unchecked</span><strong data-v-d42babf5>No selection</strong></div><div class=\"properties-empty\" data-v-d42babf5>Select an element on the canvas, or add one from the left, to edit its properties here.</div><div class=\"layers\" data-v-d42babf5><div class=\"layers-title\" data-v-d42babf5>Layers</div><div class=\"layer-empty\" data-v-d42babf5>No layers yet.</div></div>", 3)]]);
-}
-var Di = /*#__PURE__*/ $(wi, [["render", Ei], ["__scopeId", "data-v-d42babf5"]]), Oi = {
-	key: 0,
-	class: "side-info"
-}, ki = { class: "info-title" }, Ai = 102, ji = /*#__PURE__*/ $(/* @__PURE__ */ u({
-	__name: "SideInfo",
-	props: { items: {} },
-	setup(t) {
-		let s = t, c = P(), l = y(), u = y(0), d = n(() => (s.items?.length ?? 0) > 1 && u.value > Ai), m;
-		function _() {
-			u.value = l.value?.scrollHeight ?? 0;
-		}
-		return k(() => s.items, () => void f(_), { deep: !0 }), g(() => {
-			f(() => {
-				_(), m = new ResizeObserver(_), l.value && m.observe(l.value);
-			});
-		}), h(() => m?.disconnect()), (t, n) => s.items?.length ? (v(), a("section", Oi, [o("div", ki, T(D(c)("checklist", "Checklist")), 1), d.value ? (v(), r(D(qr), {
-			key: 0,
-			class: "info-list scrollable",
-			options: {
-				overflow: {
-					x: "hidden",
-					y: "scroll"
-				},
-				scrollbars: { autoHide: "never" }
-			},
-			defer: ""
-		}, {
-			default: j(() => [o("div", {
-				ref_key: "listElement",
-				ref: l
-			}, [(v(!0), a(e, null, b(s.items, (e) => (v(), a("div", {
-				key: e.id,
-				class: "info-row"
-			}, [o("span", { class: p(["info-dot", { complete: e.complete }]) }, null, 2), o("span", null, T(e.label), 1)]))), 128))], 512)]),
-			_: 1
-		})) : (v(), a("div", {
-			key: 1,
-			ref_key: "listElement",
-			ref: l,
-			class: "info-list"
-		}, [(v(!0), a(e, null, b(s.items, (e) => (v(), a("div", {
-			key: e.id,
-			class: "info-row"
-		}, [o("span", { class: p(["info-dot", { complete: e.complete }]) }, null, 2), o("span", null, T(e.label), 1)]))), 128))], 512))])) : i("", !0);
-	}
-}), [["__scopeId", "data-v-ee9b479a"]]), Mi = { class: "template-list" }, Ni = { class: "section-head" }, Pi = ["title"], Fi = ["aria-label", "title"], Ii = ["onClick"], Li = {
-	class: "tab-icon icon",
-	"aria-hidden": "true"
-}, Ri = ["onKeydown", "onBlur"], zi = { class: "tab-channel" }, Bi = { class: "tab-version" }, Vi = {
-	key: 2,
-	class: "tab-changed",
-	"aria-label": "Unsaved changes"
-}, Hi = {
-	key: 0,
-	class: "empty-list"
-}, Ui = /*#__PURE__*/ $(/* @__PURE__ */ u({
-	__name: "TemplateList",
-	props: {
-		templates: {},
-		focusedTemplateId: {}
-	},
-	emits: [
-		"add",
-		"rename",
-		"select"
-	],
-	setup(t, { emit: n }) {
-		let s = t, u = n, d = P(), m = /* @__PURE__ */ new Map(), h = y(), g = y(""), _ = y();
-		function x(e, t) {
-			t instanceof HTMLElement ? m.set(e, t) : m.delete(e);
-		}
-		async function S(e) {
-			await f(), m.get(e)?.scrollIntoView({ block: "nearest" });
-		}
-		function C(e) {
-			h.value = e.id, g.value = e.name, f(() => _.value?.select());
-		}
-		function w(e) {
-			let t = g.value.trim();
-			h.value = void 0, t && t !== e.name && u("rename", e.id, t);
-		}
-		function E() {
-			h.value = void 0;
-		}
-		return k(() => s.focusedTemplateId, (e) => {
-			e && S(e);
-		}, { immediate: !0 }), (n, s) => (v(), a("section", Mi, [o("div", Ni, [o("span", { title: D(d)("screens", "Screens") }, T(D(d)("screens", "Screens")), 9, Pi), o("button", {
-			type: "button",
-			"aria-label": D(d)("add-screen", "Add screen"),
-			title: D(d)("add-screen", "Add screen"),
-			onClick: s[0] ||= (e) => u("add")
-		}, [...s[4] ||= [o("span", { "aria-hidden": "true" }, "+", -1)]], 8, Fi)]), l(D(qr), {
-			class: "template-tabs",
-			options: {
-				overflow: {
-					x: "hidden",
-					y: "scroll"
-				},
-				scrollbars: { autoHide: "never" }
-			},
-			defer: ""
-		}, {
-			default: j(() => [(v(!0), a(e, null, b(t.templates ?? [], (e, n) => (v(), a("button", {
-				key: e.id,
-				ref_for: !0,
-				ref: (t) => x(e.id, t),
-				type: "button",
-				class: p(["template-tab", { active: t.focusedTemplateId ? e.id === t.focusedTemplateId : n === 0 }]),
-				onClick: (t) => u("select", e.id)
-			}, [
-				o("span", Li, T(e.icon), 1),
-				h.value === e.id ? M((v(), a("input", {
-					key: 0,
-					ref_for: !0,
-					ref_key: "editInput",
-					ref: _,
-					"onUpdate:modelValue": s[1] ||= (e) => g.value = e,
-					class: "tab-label tab-label-input",
-					type: "text",
-					onClick: s[2] ||= N(() => {}, ["stop"]),
-					onDblclick: s[3] ||= N(() => {}, ["stop"]),
-					onKeydown: [ee(N((t) => w(e), ["prevent"]), ["enter"]), ee(N(E, ["prevent"]), ["esc"])],
-					onBlur: (t) => w(e)
-				}, null, 40, Ri)), [[O, g.value]]) : (v(), r(Yr, {
-					key: 1,
-					class: "tab-label",
-					onDblclick: N((t) => e.type === "dynamic" && C(e), ["stop"])
-				}, {
-					default: j(() => [c(T(e.name), 1)]),
-					_: 2
-				}, 1032, ["onDblclick"])),
-				o("span", zi, T(e.channel.charAt(0).toUpperCase()), 1),
-				o("span", Bi, T(e.version), 1),
-				e.changed ? (v(), a("span", Vi)) : i("", !0)
-			], 10, Ii))), 128)), t.templates?.length ? i("", !0) : (v(), a("p", Hi, "No screens yet."))]),
-			_: 1
-		})]));
-	}
-}), [["__scopeId", "data-v-927e0835"]]), Wi = { class: "ui-designer" }, Gi = { class: "contents" }, Ki = "aham-ui-designer-screens-height", qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
-	__name: "Designer",
-	props: {
-		value: {},
-		options: {}
-	},
-	emits: [
-		"moreSelect",
-		"screenSelect",
-		"screenAdd",
-		"screenRename"
-	],
-	setup(e, { emit: t }) {
-		let r = e, i = t, s = y(), c = y([]), u = y(), d = y(50), f = !1, p = n(() => r.options?.checklist?.map((e) => ({
-			...e,
-			complete: e.check ? e.check({ templates: c.value }) : e.complete
-		})));
-		k(() => r.options?.templates, (e) => {
-			c.value = e ? [...e] : [], !u.value && c.value[0] && (u.value = c.value[0].id);
-		}, { immediate: !0 });
-		function _() {
-			let e = c.value.filter((e) => e.icon === "view_column").length, t = `layout-${Date.now()}`, n = {
-				id: t,
-				name: e ? `New Layout ${e + 1}` : "New Layout",
-				version: "1",
-				channel: "ui",
-				icon: "view_column",
-				changed: !0,
-				type: "dynamic"
-			};
-			c.value.push(n), u.value = t, i("screenAdd", n), i("screenSelect", n);
-		}
-		function b(e, t) {
-			let n = c.value.find((t) => t.id === e);
-			n && (n.name = t, i("screenRename", e, t));
-		}
-		function x(e) {
-			let t = c.value.find((t) => t.id === e);
-			t && (u.value = e, i("screenSelect", t));
-		}
-		function C(e) {
-			i("moreSelect", e);
-		}
-		function w() {
-			f && (f = !1, document.body.style.removeProperty("cursor"), document.removeEventListener("pointermove", T), document.removeEventListener("pointerup", w));
-		}
-		function T(e) {
-			let t = s.value?.getBoundingClientRect();
-			if (!t) return;
-			let n = (e.clientY - t.top) / t.height * 100;
-			d.value = Math.min(80, Math.max(20, n));
-		}
-		function E(e) {
-			f = !0, document.body.style.cursor = "row-resize", document.addEventListener("pointermove", T), document.addEventListener("pointerup", w), e.currentTarget.setPointerCapture?.(e.pointerId);
-		}
-		return g(() => {
-			let e = Number(localStorage.getItem(Ki));
-			Number.isFinite(e) && (d.value = Math.min(80, Math.max(20, e)));
-		}), k(d, (e) => {
-			localStorage.setItem(Ki, String(e));
-		}), h(w), (t, n) => {
-			let r = S("Workspace");
-			return v(), a("section", Wi, [l(Ci, {
-				subject: e.options?.subject ?? "",
-				shared: e.options?.shared,
-				"theme-changeable": e.options?.theme?.changeable,
-				"more-items": e.options?.moreItems,
-				onMoreSelect: C
-			}, null, 8, [
-				"subject",
-				"shared",
-				"theme-changeable",
-				"more-items"
-			]), o("div", Gi, [
-				o("aside", null, [o("div", {
-					ref_key: "sidebarPanels",
-					ref: s,
-					class: "sidebar-panels",
-					style: m({ "--screens-height": `${d.value}%` })
-				}, [
-					l(Ui, {
-						templates: c.value,
-						"focused-template-id": u.value,
-						onAdd: _,
-						onRename: b,
-						onSelect: x
-					}, null, 8, ["templates", "focused-template-id"]),
-					o("button", {
-						type: "button",
-						class: "panel-resizer",
-						"aria-label": "Resize screens and components panels",
-						onPointerdown: E
-					}, [...n[0] ||= [o("span", { "aria-hidden": "true" }, null, -1)]], 32),
-					l(oi)
-				], 4), l(ji, { items: p.value }, null, 8, ["items"])]),
-				l(r, {
-					class: "workspace",
-					subject: e.options?.subject ?? ""
-				}, null, 8, ["subject"]),
-				l(Di, { class: "properties" })
-			])]);
-		};
-	}
-}), [["__scopeId", "data-v-9c3240d0"]]), Ji = te("checklist", {
-	state: () => ({ items: [{
-		id: "all-screens-completed",
-		label: "All screens completed",
-		complete: !1,
-		check: ({ templates: e }) => e.length > 0 && e.every((e) => !e.changed)
-	}] }),
-	actions: {
-		setComplete(e, t = !0) {
-			let n = this.items.find((t) => t.id === e);
-			n && (n.complete = t);
-		},
-		reset() {
-			this.items.forEach((e) => {
-				e.complete = !1;
-			});
-		}
-	}
-}), Yi = te("screens", {
-	state: () => ({
-		screens: [],
-		screen: null
-	}),
-	actions: {
-		setScreens(e) {
-			this.screens = e, this.screen = e[0] ?? null;
-		},
-		setActive(e) {
-			this.screen = this.screens.find((t) => t.id === e) ?? this.screen;
-		},
-		addDynamicLayout(e) {
-			let t = this.screens.filter((e) => e.type === "dynamic").length, n = e ?? {
-				id: `layout-${Date.now()}`,
-				name: t ? `New Layout ${t + 1}` : "New Layout",
-				icon: "view_column",
-				channel: "ui",
-				version: "1",
-				changed: !0,
-				type: "dynamic"
-			};
-			this.screens.push(n), this.screen = n;
-		},
-		rename(e, t) {
-			let n = this.screens.find((t) => t.id === e);
-			n && (n.name = t);
-		},
-		clear() {
-			this.screens = [], this.screen = null;
-		}
-	}
-});
+}), [["__scopeId", "data-v-4d3e05c9"]]);
 //#endregion
 //#region src/widgets/components/types.ts
-function Xi(e) {
+function Ai(e) {
 	if (e !== void 0 && e !== "") return typeof e == "number" || /^-?\d+(?:\.\d+)?$/.test(String(e)) ? `${e}px` : String(e);
 }
-function Zi(e) {
+function ji(e) {
 	let t = {};
 	for (let n of [
 		"width",
@@ -2293,10 +2133,10 @@ function Zi(e) {
 		"borderWidth",
 		"radius"
 	]) {
-		let r = Xi(e[n]);
+		let r = Ai(e[n]);
 		r && (t[n === "radius" ? "borderRadius" : n] = r);
 	}
-	if (e.background && (t.background = e.background), e.layout === "grid" ? (t.display = "grid", t.gridTemplateColumns = e.columns || "1fr 1fr", t.alignItems = e.align || "stretch") : e.layout === "block" ? t.display = "block" : (t.display = "flex", t.flexDirection = e.direction || "column", t.alignItems = e.align || "stretch", t.justifyContent = e.justify || "flex-start"), e.layout !== "block" && e.gap !== void 0 && (t.gap = Xi(e.gap) || "0"), e.borderStyle && e.borderStyle !== "none" && (t.border = `${Xi(e.borderWidth) || "1px"} ${e.borderStyle} ${e.borderColor || "currentColor"}`), e.position) {
+	if (e.background && (t.background = e.background), e.layout === "grid" ? (t.display = "grid", t.gridTemplateColumns = e.columns || "1fr 1fr", t.alignItems = e.align || "stretch") : e.layout === "block" ? t.display = "block" : (t.display = "flex", t.flexDirection = e.direction || "column", t.alignItems = e.align || "stretch", t.justifyContent = e.justify || "flex-start"), e.layout !== "block" && e.gap !== void 0 && (t.gap = Ai(e.gap) || "0"), e.borderStyle && e.borderStyle !== "none" && (t.border = `${Ai(e.borderWidth) || "1px"} ${e.borderStyle} ${e.borderColor || "currentColor"}`), e.position) {
 		t.position = e.position;
 		for (let n of [
 			"left",
@@ -2304,15 +2144,25 @@ function Zi(e) {
 			"right",
 			"bottom"
 		]) {
-			let r = Xi(e[n]);
+			let r = Ai(e[n]);
 			r && (t[n] = r);
 		}
 	}
 	return t;
 }
 //#endregion
+//#region src/widgets/workspace/editable.ts
+var Mi = {};
+function $(e, t) {
+	return Mi[e] = Object.entries(t).map(([e, t]) => ({
+		key: e,
+		label: t.label ?? e.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (e) => e.toUpperCase()),
+		...t
+	})), t;
+}
+//#endregion
 //#region src/widgets/components/Container.vue
-var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
+var Ni = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Container",
 	props: {
 		width: {},
@@ -2337,13 +2187,28 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 		bottom: {}
 	},
 	setup(e) {
-		let t = e, r = n(() => Zi(t));
-		return (e, t) => (v(), a("div", {
+		$("container", {
+			padding: {
+				type: "number",
+				defaultValue: 18
+			},
+			direction: {
+				type: "select",
+				options: ["column", "row"],
+				defaultValue: "column"
+			},
+			gap: {
+				type: "number",
+				defaultValue: 12
+			}
+		});
+		let t = e, n = r(() => ji(t));
+		return (e, t) => (b(), o("div", {
 			class: "container-component",
-			style: m(r.value)
-		}, [x(e.$slots, "default", {}, () => [t[0] ||= o("div", { class: "empty" }, "Drop components here", -1)], !0)], 4));
+			style: g(n.value)
+		}, [C(e.$slots, "default", {}, () => [t[0] ||= s("div", { class: "empty" }, "Drop components here", -1)], !0)], 4));
 	}
-}), [["__scopeId", "data-v-42c23412"]]), $i = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-679aff3f"]]), Pi = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Card",
 	props: {
 		shadow: {
@@ -2372,32 +2237,59 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 		bottom: {}
 	},
 	setup(e) {
-		let t = e, r = n(() => ({
-			...Zi(t),
-			boxShadow: t.shadow ? "var(--shadow-soft, 0 8px 24px rgb(0 0 0 / 10%))" : "none"
-		}));
-		return (e, t) => (v(), a("div", {
+		$("card", {
+			padding: {
+				type: "number",
+				defaultValue: 18
+			},
+			direction: {
+				type: "select",
+				options: ["column", "row"],
+				defaultValue: "column"
+			},
+			gap: {
+				type: "number",
+				defaultValue: 12
+			},
+			shadow: {
+				type: "boolean",
+				defaultValue: !0
+			}
+		});
+		let t = e, n = r(() => ({
+			...ji(t),
+			boxShadow: t.shadow ? "var(--shadow-soft, 0 8px 24px rgb(0 0 0 / 10%))" : "none"
+		}));
+		return (e, t) => (b(), o("div", {
 			class: "card-component",
-			style: m(r.value)
-		}, [x(e.$slots, "default", {}, () => [t[0] ||= o("div", { class: "empty" }, "Drop components here", -1)], !0)], 4));
+			style: g(n.value)
+		}, [C(e.$slots, "default", {}, () => [t[0] ||= s("div", { class: "empty" }, "Drop components here", -1)], !0)], 4));
 	}
-}), [["__scopeId", "data-v-b06c1052"]]), ea = /* @__PURE__ */ u({
+}), [["__scopeId", "data-v-0a1967b2"]]), Fi = /* @__PURE__ */ u({
 	__name: "Spacer",
 	props: { height: { default: 20 } },
 	setup(e) {
-		return (t, n) => (v(), a("div", {
+		return $("spacer", { height: {
+			label: "Height",
+			type: "number",
+			defaultValue: 20
+		} }), (t, n) => (b(), o("div", {
 			class: "spacer-component",
-			style: m({ height: typeof e.height == "number" ? `${e.height}px` : e.height }),
+			style: g({ height: typeof e.height == "number" ? `${e.height}px` : e.height }),
 			"aria-hidden": "true"
 		}, null, 4));
 	}
-}), ta = { class: "divider-component" }, na = { key: 0 }, ra = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), Ii = { class: "divider-component" }, Li = { key: 0 }, Ri = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Divider",
 	props: { label: { default: "or" } },
 	setup(e) {
-		return (t, n) => (v(), a("div", ta, [e.label ? (v(), a("span", na, T(e.label), 1)) : i("", !0)]));
+		return $("divider", { label: {
+			type: "string",
+			defaultValue: "or",
+			translations: !0
+		} }), (t, n) => (b(), o("div", Ii, [e.label ? (b(), o("span", Li, D(e.label), 1)) : a("", !0)]));
 	}
-}), [["__scopeId", "data-v-a6e861b8"]]), ia = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-28326356"]]), zi = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Layout",
 	props: {
 		direction: { default: "column" },
@@ -2405,27 +2297,51 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 		padding: { default: 12 }
 	},
 	setup(e) {
-		let t = e, r = n(() => ({
+		$("layout", {
+			direction: {
+				label: "Direction",
+				type: "select",
+				options: ["column", "row"],
+				defaultValue: "column"
+			},
+			gap: {
+				label: "Gap",
+				type: "number",
+				defaultValue: 12
+			},
+			padding: {
+				label: "Padding",
+				type: "number",
+				defaultValue: 12
+			}
+		});
+		let t = e, n = r(() => ({
 			display: "flex",
 			flexDirection: t.direction,
 			gap: typeof t.gap == "number" ? `${t.gap}px` : t.gap,
 			padding: typeof t.padding == "number" ? `${t.padding}px` : t.padding
 		}));
-		return (e, t) => (v(), a("div", {
+		return (e, t) => (b(), o("div", {
 			class: "layout-component",
-			style: m(r.value)
-		}, [x(e.$slots, "default", {}, () => [t[0] ||= o("div", { class: "empty" }, "Drop components here", -1)], !0)], 4));
+			style: g(n.value)
+		}, [C(e.$slots, "default", {}, () => [t[0] ||= s("div", { class: "empty" }, "Drop components here", -1)], !0)], 4));
 	}
-}), [["__scopeId", "data-v-be209bd5"]]), aa = { class: "layout-ref-component" }, oa = { class: "badge" }, sa = { key: 0 }, ca = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-2aeaf70d"]]), Bi = { class: "layout-ref-component" }, Vi = { class: "badge" }, Hi = { key: 0 }, Ui = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "LayoutRef",
 	props: {
 		layoutKey: { default: "" },
 		label: { default: "Layout" }
 	},
 	setup(e) {
-		return (t, n) => (v(), a("div", aa, [o("div", oa, [c("◆ " + T(e.label), 1), e.layoutKey ? (v(), a("span", sa, " · " + T(e.layoutKey), 1)) : i("", !0)]), x(t.$slots, "default", {}, () => [n[0] ||= o("div", { class: "empty" }, "Drop components here", -1)], !0)]));
+		return $("layoutRef", {
+			layoutKey: { type: "string" },
+			label: {
+				type: "string",
+				defaultValue: "Layout"
+			}
+		}), (t, n) => (b(), o("div", Bi, [s("div", Vi, [c("◆ " + D(e.label), 1), e.layoutKey ? (b(), o("span", Hi, " · " + D(e.layoutKey), 1)) : a("", !0)]), C(t.$slots, "default", {}, () => [n[0] ||= s("div", { class: "empty" }, "Drop components here", -1)], !0)]));
 	}
-}), [["__scopeId", "data-v-d41ee6eb"]]), la = { class: "field-component" }, ua = { class: "label" }, da = { key: 0 }, fa = ["value", "placeholder"], pa = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-00fc31a3"]]), Wi = { class: "field-component" }, Gi = { class: "label" }, Ki = { key: 0 }, qi = ["value", "placeholder"], Ji = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "EmailInput",
 	props: {
 		label: { default: "Email" },
@@ -2437,14 +2353,30 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 		modelValue: {}
 	},
 	setup(e) {
-		return (t, n) => (v(), a("label", la, [o("span", ua, [c(T(e.label), 1), e.required ? (v(), a("b", da, "*")) : i("", !0)]), o("input", {
+		return $("emailInput", {
+			label: {
+				type: "string",
+				defaultValue: "Email",
+				translations: !0
+			},
+			placeholder: {
+				type: "string",
+				defaultValue: "you@example.com",
+				translations: !0
+			},
+			required: {
+				type: "boolean",
+				defaultValue: !0
+			},
+			modelValue: { type: "string" }
+		}), (t, n) => (b(), o("label", Wi, [s("span", Gi, [c(D(e.label), 1), e.required ? (b(), o("b", Ki, "*")) : a("", !0)]), s("input", {
 			value: e.modelValue,
 			type: "email",
 			placeholder: e.placeholder,
 			readonly: ""
-		}, null, 8, fa)]));
+		}, null, 8, qi)]));
 	}
-}), [["__scopeId", "data-v-c7f2e797"]]), ma = { class: "field-component" }, ha = { class: "label" }, ga = { key: 0 }, _a = ["value", "placeholder"], va = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-e0ab26e2"]]), Yi = { class: "field-component" }, Xi = { class: "label" }, Zi = { key: 0 }, Qi = ["value", "placeholder"], $i = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "TextInput",
 	props: {
 		label: { default: "Full name" },
@@ -2456,14 +2388,25 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 		modelValue: {}
 	},
 	setup(e) {
-		return (t, n) => (v(), a("label", ma, [o("span", ha, [c(T(e.label), 1), e.required ? (v(), a("b", ga, "*")) : i("", !0)]), o("input", {
+		return $("textInput", {
+			label: {
+				type: "string",
+				defaultValue: "Name"
+			},
+			placeholder: { type: "string" },
+			required: {
+				type: "boolean",
+				defaultValue: !1
+			},
+			modelValue: { type: "string" }
+		}), (t, n) => (b(), o("label", Yi, [s("span", Xi, [c(D(e.label), 1), e.required ? (b(), o("b", Zi, "*")) : a("", !0)]), s("input", {
 			value: e.modelValue,
 			type: "text",
 			placeholder: e.placeholder,
 			readonly: ""
-		}, null, 8, _a)]));
+		}, null, 8, Qi)]));
 	}
-}), [["__scopeId", "data-v-b5ed7071"]]), ya = { class: "field-component" }, ba = { class: "field-row" }, xa = { class: "label" }, Sa = { key: 0 }, Ca = ["value", "placeholder"], wa = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-28c44a99"]]), ea = { class: "field-component" }, ta = { class: "field-row" }, na = { class: "label" }, ra = { key: 0 }, ia = ["value", "placeholder"], aa = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "PasswordInput",
 	props: {
 		label: { default: "Password" },
@@ -2479,31 +2422,65 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 		modelValue: {}
 	},
 	setup(e) {
-		return (t, n) => (v(), a("label", ya, [o("span", ba, [o("span", xa, [c(T(e.label), 1), e.required ? (v(), a("b", Sa, "*")) : i("", !0)]), e.showForgot ? (v(), a("a", {
+		return $("passwordInput", {
+			label: {
+				type: "string",
+				defaultValue: "Password",
+				translations: !0
+			},
+			placeholder: {
+				type: "string",
+				defaultValue: "••••••••",
+				translations: !0
+			},
+			required: {
+				type: "boolean",
+				defaultValue: !0
+			},
+			showForgot: {
+				type: "boolean",
+				defaultValue: !1
+			},
+			modelValue: { type: "string" }
+		}), (t, n) => (b(), o("label", ea, [s("span", ta, [s("span", na, [c(D(e.label), 1), e.required ? (b(), o("b", ra, "*")) : a("", !0)]), e.showForgot ? (b(), o("a", {
 			key: 0,
 			href: "#",
-			onClick: n[0] ||= N(() => {}, ["prevent"])
-		}, "Forgot?")) : i("", !0)]), o("input", {
+			onClick: n[0] ||= I(() => {}, ["prevent"])
+		}, "Forgot?")) : a("", !0)]), s("input", {
 			value: e.modelValue,
+			name: "designer-password-preview",
 			type: "password",
+			autocomplete: "off",
+			"data-lpignore": "true",
+			"data-1p-ignore": "true",
 			placeholder: e.placeholder,
 			readonly: ""
-		}, null, 8, Ca)]));
+		}, null, 8, ia)]));
 	}
-}), [["__scopeId", "data-v-ad9dff41"]]), Ta = { class: "field-component" }, Ea = { class: "label" }, Da = { class: "otp-row" }, Oa = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-6e3c9aa9"]]), oa = { class: "field-component" }, sa = { class: "label" }, ca = { class: "otp-row" }, la = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "OtpInput",
 	props: {
 		label: { default: "Verification code" },
 		digits: { default: 6 }
 	},
 	setup(t) {
-		let r = t, i = n(() => Array.from({ length: Math.max(1, r.digits) }));
-		return (n, r) => (v(), a("div", Ta, [o("span", Ea, T(t.label), 1), o("div", Da, [(v(!0), a(e, null, b(i.value, (e, t) => (v(), a("span", {
+		$("otpInput", {
+			label: {
+				type: "string",
+				defaultValue: "Verification code"
+			},
+			digits: {
+				type: "number",
+				defaultValue: 6
+			}
+		});
+		let n = t, i = r(() => Array.from({ length: Math.max(1, n.digits) }));
+		return (n, r) => (b(), o("div", oa, [s("span", sa, D(t.label), 1), s("div", ca, [(b(!0), o(e, null, S(i.value, (e, t) => (b(), o("span", {
 			key: t,
 			class: "otp-box"
 		}))), 128))])]));
 	}
-}), [["__scopeId", "data-v-1914959e"]]), ka = { class: "checkbox-component" }, Aa = ["checked"], ja = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-f06ab992"]]), ua = { class: "checkbox-component" }, da = ["checked"], fa = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Checkbox",
 	props: {
 		label: { default: "Remember me" },
@@ -2514,35 +2491,75 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 		modelValue: { type: Boolean }
 	},
 	setup(e) {
-		return (t, n) => (v(), a("label", ka, [o("input", {
+		return $("checkbox", {
+			label: {
+				type: "string",
+				defaultValue: "Remember me",
+				translations: !0
+			},
+			checked: {
+				type: "boolean",
+				defaultValue: !1
+			},
+			modelValue: {
+				type: "boolean",
+				defaultValue: !1
+			}
+		}), (t, n) => (b(), o("label", ua, [s("input", {
 			type: "checkbox",
 			checked: e.modelValue ?? e.checked,
 			readonly: ""
-		}, null, 8, Aa), o("span", null, T(e.label), 1)]));
+		}, null, 8, da), s("span", null, D(e.label), 1)]));
 	}
-}), [["__scopeId", "data-v-3d492d6d"]]), Ma = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-d6f8dcbc"]]), pa = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "SubmitButton",
 	props: {
 		text: { default: "Sign in" },
 		style: { default: "primary" }
 	},
 	setup(e) {
-		return (t, n) => (v(), a("button", {
+		return $("submitButton", {
+			text: {
+				type: "string",
+				defaultValue: "Sign in",
+				translations: !0
+			},
+			style: {
+				type: "select",
+				options: ["primary", "secondary"],
+				defaultValue: "primary"
+			}
+		}), (t, n) => (b(), o("button", {
 			type: "button",
-			class: p(["submit-button", e.style])
-		}, T(e.text), 3));
+			class: m(["submit-button", e.style])
+		}, D(e.text), 3));
 	}
-}), [["__scopeId", "data-v-9807299a"]]), Na = {
+}), [["__scopeId", "data-v-e8246c1e"]]), ma = {
 	type: "button",
 	class: "social-button"
-}, Pa = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}, ha = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "SocialButton",
 	props: {
 		provider: { default: "google" },
 		text: { default: "Continue with Google" }
 	},
 	setup(e) {
-		let t = e, r = {
+		$("socialButton", {
+			provider: {
+				type: "select",
+				options: [
+					"google",
+					"github",
+					"microsoft"
+				],
+				defaultValue: "google"
+			},
+			text: {
+				type: "string",
+				defaultValue: "Continue with Google"
+			}
+		});
+		let t = e, n = {
 			google: {
 				letter: "G",
 				color: "#4285f4"
@@ -2559,17 +2576,17 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 				letter: "●",
 				color: "#111"
 			}
-		}, i = n(() => r[t.provider]);
-		return (t, n) => (v(), a("button", Na, [o("span", {
+		}, i = r(() => n[t.provider]);
+		return (t, n) => (b(), o("button", ma, [s("span", {
 			class: "social-icon",
-			style: m({ background: i.value.color })
-		}, T(i.value.letter), 5), c(T(e.text), 1)]));
+			style: g({ background: i.value.color })
+		}, D(i.value.letter), 5), c(D(e.text), 1)]));
 	}
-}), [["__scopeId", "data-v-3045616f"]]), Fa = [
+}), [["__scopeId", "data-v-9af640f6"]]), ga = [
 	"href",
 	"target",
 	"rel"
-], Ia = /*#__PURE__*/ $(/* @__PURE__ */ u({
+], _a = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "TextLink",
 	props: {
 		text: { default: "Forgot password?" },
@@ -2577,37 +2594,73 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 		target: { default: "_self" }
 	},
 	setup(e) {
-		return (t, n) => (v(), a("a", {
+		return $("textLink", {
+			text: {
+				type: "string",
+				defaultValue: "Forgot password?",
+				translations: !0
+			},
+			href: {
+				type: "string",
+				defaultValue: "#"
+			},
+			target: {
+				type: "select",
+				options: ["_self", "_blank"],
+				defaultValue: "_self"
+			}
+		}), (t, n) => (b(), o("a", {
 			class: "text-link",
 			href: e.href,
 			target: e.target,
 			rel: e.target === "_blank" ? "noopener noreferrer" : void 0
-		}, T(e.text), 9, Fa));
+		}, D(e.text), 9, ga));
 	}
-}), [["__scopeId", "data-v-8d18edb1"]]), La = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-38f46d00"]]), va = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Heading",
 	props: {
 		text: { default: "Welcome back" },
 		size: { default: "lg" }
 	},
 	setup(e) {
-		let t = e, i = n(() => t.size === "xl" ? "h1" : t.size === "lg" ? "h2" : t.size === "md" ? "h3" : "h4");
-		return (t, n) => (v(), r(C(i.value), { class: p(["heading-component", e.size]) }, {
-			default: j(() => [c(T(e.text), 1)]),
+		$("heading", {
+			text: {
+				type: "string",
+				defaultValue: "Welcome back",
+				translations: !0
+			},
+			size: {
+				type: "select",
+				options: [
+					"sm",
+					"md",
+					"lg",
+					"xl"
+				],
+				defaultValue: "lg"
+			}
+		});
+		let t = e, n = r(() => t.size === "xl" ? "h1" : t.size === "lg" ? "h2" : t.size === "md" ? "h3" : "h4");
+		return (t, r) => (b(), i(T(n.value), { class: m(["heading-component", e.size]) }, {
+			default: N(() => [c(D(e.text), 1)]),
 			_: 1
 		}, 8, ["class"]));
 	}
-}), [["__scopeId", "data-v-1c78b10f"]]), Ra = { class: "text-component" }, za = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-4838593c"]]), ya = { class: "text-component" }, ba = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Text",
 	props: { text: { default: "Enter your details to continue." } },
 	setup(e) {
-		return (t, n) => (v(), a("p", Ra, T(e.text), 1));
+		return $("text", { text: {
+			type: "text",
+			defaultValue: "Enter your details to continue.",
+			translations: !0
+		} }), (t, n) => (b(), o("p", ya, D(e.text), 1));
 	}
-}), [["__scopeId", "data-v-3be0c0c9"]]), Ba = [
+}), [["__scopeId", "data-v-a48907c6"]]), xa = [
 	"href",
 	"target",
 	"rel"
-], Va = ["src", "alt"], Ha = { key: 1 }, Ua = ["src", "alt"], Wa = { key: 1 }, Ga = /*#__PURE__*/ $(/* @__PURE__ */ u({
+], Sa = ["src", "alt"], Ca = { key: 1 }, wa = ["src", "alt"], Ta = { key: 1 }, Ea = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Image",
 	props: {
 		src: { default: "" },
@@ -2619,63 +2672,113 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 		hrefTarget: { default: "_self" }
 	},
 	setup(e) {
-		let t = e, r = (e) => typeof e == "number" || /^-?\d+(?:\.\d+)?$/.test(String(e)) ? `${e}px` : String(e), i = n(() => ({
-			width: r(t.width),
+		$("image", {
+			src: { type: "string" },
+			alt: {
+				type: "string",
+				defaultValue: "Illustration"
+			},
+			width: {
+				type: "string",
+				defaultValue: "100%"
+			},
+			height: {
+				type: "string",
+				defaultValue: 120
+			},
+			radius: {
+				type: "string",
+				defaultValue: 0
+			},
+			href: { type: "string" },
+			hrefTarget: {
+				type: "select",
+				options: ["_self", "_blank"],
+				defaultValue: "_self"
+			}
+		});
+		let t = e, n = (e) => typeof e == "number" || /^-?\d+(?:\.\d+)?$/.test(String(e)) ? `${e}px` : String(e), i = r(() => ({
+			width: n(t.width),
 			maxWidth: "100%",
-			height: r(t.height),
-			borderRadius: r(t.radius)
+			height: n(t.height),
+			borderRadius: n(t.radius)
 		}));
-		return (t, n) => e.href ? (v(), a("a", {
+		return (t, n) => e.href ? (b(), o("a", {
 			key: 0,
 			class: "image-link",
 			href: e.href,
 			target: e.hrefTarget,
 			rel: e.hrefTarget === "_blank" ? "noopener noreferrer" : void 0
-		}, [o("div", {
+		}, [s("div", {
 			class: "image-component",
-			style: m(i.value)
-		}, [e.src ? (v(), a("img", {
+			style: g(i.value)
+		}, [e.src ? (b(), o("img", {
 			key: 0,
 			src: e.src,
 			alt: e.alt
-		}, null, 8, Va)) : (v(), a("span", Ha, T(e.alt), 1))], 4)], 8, Ba)) : (v(), a("div", {
+		}, null, 8, Sa)) : (b(), o("span", Ca, D(e.alt), 1))], 4)], 8, xa)) : (b(), o("div", {
 			key: 1,
 			class: "image-component",
-			style: m(i.value)
-		}, [e.src ? (v(), a("img", {
+			style: g(i.value)
+		}, [e.src ? (b(), o("img", {
 			key: 0,
 			src: e.src,
 			alt: e.alt
-		}, null, 8, Ua)) : (v(), a("span", Wa, T(e.alt), 1))], 4));
+		}, null, 8, wa)) : (b(), o("span", Ta, D(e.alt), 1))], 4));
 	}
-}), [["__scopeId", "data-v-ecc98881"]]), Ka = { "aria-hidden": "true" }, qa = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-09c5bdec"]]), Da = { "aria-hidden": "true" }, Oa = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Alert",
 	props: {
 		tone: { default: "info" },
 		text: { default: "Check your inbox for the reset link." }
 	},
 	setup(e) {
-		return (t, n) => (v(), a("div", { class: p(["alert-component", e.tone]) }, [o("span", Ka, T(e.tone === "error" ? "⚠" : e.tone === "success" ? "✓" : "ⓘ"), 1), o("span", null, T(e.text), 1)], 2));
+		return $("alert", {
+			tone: {
+				type: "string",
+				defaultValue: "info"
+			},
+			text: {
+				type: "text",
+				defaultValue: "Check your inbox for the reset link.",
+				translations: !0
+			}
+		}), (t, n) => (b(), o("div", { class: m(["alert-component", e.tone]) }, [s("span", Da, D(e.tone === "error" ? "⚠" : e.tone === "success" ? "✓" : "ⓘ"), 1), s("span", null, D(e.text), 1)], 2));
 	}
-}), [["__scopeId", "data-v-bf171873"]]), Ja = { class: "content-component" }, Ya = { class: "empty" }, Xa = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-ddfdb165"]]), ka = { class: "content-component" }, Aa = { class: "empty" }, ja = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "Content",
 	props: { note: { default: "Page content goes here" } },
 	setup(e) {
-		return (t, n) => (v(), a("div", Ja, [x(t.$slots, "default", {}, () => [o("div", Ya, T(e.note), 1)], !0)]));
+		return $("content", { note: {
+			type: "text",
+			defaultValue: "Page content goes here",
+			translations: !0
+		} }), (t, n) => (b(), o("div", ka, [C(t.$slots, "default", {}, () => [s("div", Aa, D(e.note), 1)], !0)]));
 	}
-}), [["__scopeId", "data-v-1c551f9d"]]), Za = { class: "consent-card" }, Qa = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-ed1632f3"]]), Ma = { class: "consent-card" }, Na = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "ConsentCard",
 	props: {
 		appName: { default: "Acme Analytics" },
 		requestedBy: { default: "acme.io" }
 	},
 	setup(e) {
-		return (t, n) => (v(), a("div", Za, [n[0] ||= o("span", {
+		return $("consentCard", {
+			appName: {
+				type: "string",
+				defaultValue: "Acme Analytics",
+				translations: !0
+			},
+			requestedBy: {
+				type: "string",
+				defaultValue: "acme.io",
+				translations: !0
+			}
+		}), (t, n) => (b(), o("div", Ma, [n[0] ||= s("span", {
 			class: "icon",
 			"aria-hidden": "true"
-		}, "✓", -1), o("div", null, [o("strong", null, T(e.appName), 1), o("span", null, "wants to access your account · " + T(e.requestedBy), 1)])]));
+		}, "✓", -1), s("div", null, [s("strong", null, D(e.appName), 1), s("span", null, "wants to access your account · " + D(e.requestedBy), 1)])]));
 	}
-}), [["__scopeId", "data-v-9008f821"]]), $a = { class: "scope-list" }, eo = /*#__PURE__*/ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-c3ef9d86"]]), Pa = { class: "scope-list" }, Fa = /*#__PURE__*/ Q(/* @__PURE__ */ u({
 	__name: "ScopeList",
 	props: { scopes: { default: () => [
 		"Read your profile",
@@ -2683,12 +2786,1268 @@ var Qi = /*#__PURE__*/ $(/* @__PURE__ */ u({
 		"Access your workspace list"
 	] } },
 	setup(t) {
-		let r = t, i = n(() => Array.isArray(r.scopes) ? r.scopes : r.scopes.split("\n").filter(Boolean));
-		return (t, n) => (v(), a("div", $a, [(v(!0), a(e, null, b(i.value, (e) => (v(), a("div", {
+		$("scopeList", { scopes: { type: "text" } });
+		let n = t, i = r(() => Array.isArray(n.scopes) ? n.scopes : n.scopes.split("\n").filter(Boolean));
+		return (t, n) => (b(), o("div", Pa, [(b(!0), o(e, null, S(i.value, (e) => (b(), o("div", {
 			key: e,
 			class: "scope"
-		}, [n[0] ||= o("span", { "aria-hidden": "true" }, "✓", -1), o("span", null, T(e), 1)]))), 128))]));
+		}, [n[0] ||= s("span", { "aria-hidden": "true" }, "✓", -1), s("span", null, D(e), 1)]))), 128))]));
+	}
+}), [["__scopeId", "data-v-1760fb81"]]), Ia = {
+	consentCard: "Consent Card",
+	emailInput: "Email Input",
+	layoutRef: "Layout Reference",
+	otpInput: "OTP Input",
+	passwordInput: "Password Input",
+	scopeList: "Scope List",
+	socialButton: "Social Button",
+	submitButton: "Submit Button",
+	textInput: "Text Input",
+	textLink: "Text Link"
+}, La = {
+	alert: "warning",
+	card: "web_asset",
+	checkbox: "check_box",
+	consentCard: "verified_user",
+	container: "view_agenda",
+	content: "dashboard",
+	divider: "horizontal_rule",
+	emailInput: "mail",
+	heading: "title",
+	image: "image",
+	layout: "view_column",
+	layoutRef: "view_quilt",
+	otpInput: "pin",
+	passwordInput: "lock",
+	scopeList: "checklist",
+	socialButton: "group",
+	spacer: "height",
+	submitButton: "send",
+	text: "subject",
+	textInput: "text_fields",
+	textLink: "link"
+};
+function Ra(e) {
+	return Ia[e] ?? e.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (e) => e.toUpperCase());
+}
+var za = {
+	alert: Oa,
+	card: Pi,
+	checkbox: fa,
+	consentCard: Na,
+	container: Ni,
+	content: ja,
+	divider: Ri,
+	emailInput: Ji,
+	heading: va,
+	image: Ea,
+	layout: zi,
+	layoutRef: Ui,
+	otpInput: la,
+	passwordInput: aa,
+	scopeList: Fa,
+	socialButton: ha,
+	spacer: Fi,
+	submitButton: pa,
+	text: ba,
+	textInput: $i,
+	textLink: _a
+}, Ba = Mi, Va = { class: "properties-panel" }, Ha = { class: "properties-head" }, Ua = { class: "property-icon icon" }, Wa = {
+	key: 0,
+	class: "property-fields"
+}, Ga = { class: "property-field" }, Ka = ["value"], qa = { class: "property-label" }, Ja = ["aria-label", "onClick"], Ya = ["value", "onChange"], Xa = ["value"], Za = ["checked", "onInput"], Qa = ["value", "onInput"], $a = [
+	"type",
+	"value",
+	"onInput"
+], eo = {
+	key: 0,
+	class: "property-no-props"
+}, to = {
+	key: 1,
+	class: "properties-empty"
+}, no = { class: "layers" }, ro = {
+	key: 0,
+	class: "layers-tree",
+	role: "tree",
+	"aria-label": "Layers"
+}, io = {
+	class: "layer-icon icon",
+	"aria-hidden": "true"
+}, ao = { class: "layer-label" }, oo = {
+	key: 1,
+	class: "layer-empty"
+}, so = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "Properties",
+	props: {
+		layers: {},
+		selectedComponent: {}
+	},
+	emits: ["updateProps", "focusTranslation"],
+	setup(t, { emit: n }) {
+		let i = t, l = n, u = z(), d = V(), f = r(() => {
+			let e = i.selectedComponent;
+			return e ? (Ba[e.type] ?? Object.keys(e.props).map((e) => ({
+				key: e,
+				label: e.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (e) => e.toUpperCase()),
+				type: "string"
+			}))).map((t) => ({
+				...t,
+				value: t.translations ? (() => {
+					let n = g(e.id, t.key);
+					return u.fields.find((e) => e.id === n) ? u.getValue(n) : String(e.props[t.key] ?? t.defaultValue ?? "");
+				})() : e.props[t.key] ?? t.defaultValue ?? "",
+				translationId: g(e.id, t.key)
+			})) : [];
+		});
+		j(f, (e) => {
+			let t = i.selectedComponent?.id;
+			t && e.forEach((e) => {
+				e.translations && u.ensureValue(e.translationId, String(e.value), t);
+			});
+		}, { immediate: !0 });
+		function p(e, t) {
+			l("updateProps", { [e]: t });
+		}
+		function m(e, t, n, r) {
+			u.ensureValue(e, n, r), u.updateValue(e, n), l("updateProps", { [t]: n });
+		}
+		function h(e) {
+			e.target.select();
+		}
+		function g(e, t) {
+			return `${e}.${t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`)}`;
+		}
+		function _(e) {
+			l("focusTranslation", e);
+		}
+		return (n, r) => {
+			let i = w("tooltip");
+			return b(), o("section", Va, [
+				s("div", Ha, [s("span", Ua, D(t.selectedComponent ? k(La)[t.selectedComponent.type] ?? "widgets" : "radio_button_unchecked"), 1), s("strong", null, D(t.selectedComponent ? k(Ra)(t.selectedComponent.type) : "No selection"), 1)]),
+				t.selectedComponent ? (b(), o("div", Wa, [
+					s("label", Ga, [r[2] ||= s("span", null, "Component ID", -1), s("input", {
+						value: t.selectedComponent.id,
+						readonly: "",
+						"aria-readonly": "true",
+						onClick: h
+					}, null, 8, Ka)]),
+					r[4] ||= s("div", { class: "property-section-title" }, "Component props", -1),
+					(b(!0), o(e, null, S(f.value, (n) => (b(), o("label", {
+						key: n.key,
+						class: "property-field"
+					}, [s("span", qa, [s("span", null, D(n.label), 1), n.translations ? P((b(), o("button", {
+						key: 0,
+						type: "button",
+						class: "translation-icon icon",
+						"aria-label": k(d)("translate-this-value", "Translate this value"),
+						onPointerdown: r[0] ||= I(() => {}, ["stop", "prevent"]),
+						onMousedown: r[1] ||= I(() => {}, ["stop", "prevent"]),
+						onClick: I((e) => _(n.translationId), ["stop", "prevent"])
+					}, [...r[3] ||= [c("translate", -1)]], 40, Ja)), [[i, k(d)("translate-this-value", "Translate this value")]]) : a("", !0)]), n.type === "select" ? (b(), o("select", {
+						key: 0,
+						value: n.value,
+						onChange: (e) => p(n.key, e.target.value)
+					}, [(b(!0), o(e, null, S(n.options, (e) => (b(), o("option", {
+						key: e,
+						value: e
+					}, D(e), 9, Xa))), 128))], 40, Ya)) : n.type === "boolean" ? (b(), o("input", {
+						key: 1,
+						class: "property-toggle",
+						type: "checkbox",
+						checked: n.value === !0 || n.value === "true",
+						onInput: (e) => p(n.key, e.target.checked)
+					}, null, 40, Za)) : n.type === "text" ? (b(), o("textarea", {
+						key: 2,
+						rows: "3",
+						value: String(n.value),
+						onInput: (e) => n.translations ? m(n.translationId, n.key, e.target.value, t.selectedComponent.id) : p(n.key, e.target.value)
+					}, null, 40, Qa)) : (b(), o("input", {
+						key: 3,
+						type: n.type === "number" ? "number" : "text",
+						value: n.value,
+						onInput: (e) => n.translations ? m(n.translationId, n.key, e.target.value, t.selectedComponent.id) : p(n.key, n.type === "number" ? Number(e.target.value) : e.target.value)
+					}, null, 40, $a))]))), 128)),
+					f.value.length ? a("", !0) : (b(), o("div", eo, "No configurable props."))
+				])) : (b(), o("div", to, "Select an element on the canvas, or add one from the left, to edit its properties here.")),
+				s("div", no, [r[6] ||= s("div", { class: "layers-title" }, "Layers", -1), t.layers?.length ? (b(), o("div", ro, [(b(!0), o(e, null, S(t.layers, (e) => (b(), o("div", {
+					key: e.id,
+					class: "layer-item",
+					role: "treeitem"
+				}, [
+					r[5] ||= s("span", {
+						class: "layer-branch",
+						"aria-hidden": "true"
+					}, "└", -1),
+					s("span", io, D(e.icon), 1),
+					s("span", ao, D(e.label), 1)
+				]))), 128))])) : (b(), o("div", oo, "No layers yet."))])
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-6f45a1fd"]]), co = {
+	key: 0,
+	class: "side-info"
+}, lo = { class: "info-title" }, uo = 102, fo = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "SideInfo",
+	props: { items: {} },
+	setup(t) {
+		let n = t, c = V(), l = x(), u = x(0), d = r(() => (n.items?.length ?? 0) > 1 && u.value > uo), f;
+		function h() {
+			u.value = l.value?.scrollHeight ?? 0;
+		}
+		return j(() => n.items, () => void p(h), { deep: !0 }), v(() => {
+			p(() => {
+				h(), f = new ResizeObserver(h), l.value && f.observe(l.value);
+			});
+		}), _(() => f?.disconnect()), (t, r) => n.items?.length ? (b(), o("section", co, [s("div", lo, D(k(c)("checklist", "Checklist")), 1), d.value ? (b(), i(k($r), {
+			key: 0,
+			class: "info-list scrollable",
+			options: {
+				overflow: {
+					x: "hidden",
+					y: "scroll"
+				},
+				scrollbars: { autoHide: "never" }
+			},
+			defer: ""
+		}, {
+			default: N(() => [s("div", {
+				ref_key: "listElement",
+				ref: l
+			}, [(b(!0), o(e, null, S(n.items, (e) => (b(), o("div", {
+				key: e.id,
+				class: "info-row"
+			}, [s("span", { class: m(["info-dot", { complete: e.complete }]) }, null, 2), s("span", null, D(e.label), 1)]))), 128))], 512)]),
+			_: 1
+		})) : (b(), o("div", {
+			key: 1,
+			ref_key: "listElement",
+			ref: l,
+			class: "info-list"
+		}, [(b(!0), o(e, null, S(n.items, (e) => (b(), o("div", {
+			key: e.id,
+			class: "info-row"
+		}, [s("span", { class: m(["info-dot", { complete: e.complete }]) }, null, 2), s("span", null, D(e.label), 1)]))), 128))], 512))])) : a("", !0);
+	}
+}), [["__scopeId", "data-v-ee9b479a"]]), po = { class: "template-list" }, mo = { class: "section-head" }, ho = ["title"], go = ["aria-label", "title"], _o = ["onClick"], vo = {
+	class: "tab-icon icon",
+	"aria-hidden": "true"
+}, yo = ["onKeydown", "onBlur"], bo = { class: "tab-channel" }, xo = { class: "tab-version" }, So = {
+	key: 2,
+	class: "tab-changed",
+	"aria-label": "Unsaved changes"
+}, Co = {
+	key: 0,
+	class: "empty-list"
+}, wo = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "TemplateList",
+	props: {
+		templates: {},
+		focusedTemplateId: {}
+	},
+	emits: [
+		"add",
+		"rename",
+		"select"
+	],
+	setup(t, { emit: n }) {
+		let r = t, u = n, d = V(), f = /* @__PURE__ */ new Map(), h = x(), g = x(""), _ = x();
+		function v(e, t) {
+			t instanceof HTMLElement ? f.set(e, t) : f.delete(e);
+		}
+		async function y(e) {
+			await p(), f.get(e)?.scrollIntoView({ block: "nearest" });
+		}
+		function C(e) {
+			h.value = e.id, g.value = e.name, p(() => _.value?.select());
+		}
+		function w(e) {
+			let t = g.value.trim();
+			h.value = void 0, t && t !== e.name && u("rename", e.id, t);
+		}
+		function T() {
+			h.value = void 0;
+		}
+		return j(() => r.focusedTemplateId, (e) => {
+			e && y(e);
+		}, { immediate: !0 }), (n, r) => (b(), o("section", po, [s("div", mo, [s("span", { title: k(d)("screens", "Screens") }, D(k(d)("screens", "Screens")), 9, ho), s("button", {
+			type: "button",
+			"aria-label": k(d)("add-screen", "Add screen"),
+			title: k(d)("add-screen", "Add screen"),
+			onClick: r[0] ||= (e) => u("add")
+		}, [...r[4] ||= [s("span", { "aria-hidden": "true" }, "+", -1)]], 8, go)]), l(k($r), {
+			class: "template-tabs",
+			options: {
+				overflow: {
+					x: "hidden",
+					y: "scroll"
+				},
+				scrollbars: { autoHide: "never" }
+			},
+			defer: ""
+		}, {
+			default: N(() => [(b(!0), o(e, null, S(t.templates ?? [], (e, n) => (b(), o("button", {
+				key: e.id,
+				ref_for: !0,
+				ref: (t) => v(e.id, t),
+				type: "button",
+				class: m(["template-tab", { active: t.focusedTemplateId ? e.id === t.focusedTemplateId : n === 0 }]),
+				onClick: (t) => u("select", e.id)
+			}, [
+				s("span", vo, D(e.icon), 1),
+				h.value === e.id ? P((b(), o("input", {
+					key: 0,
+					ref_for: !0,
+					ref_key: "editInput",
+					ref: _,
+					"onUpdate:modelValue": r[1] ||= (e) => g.value = e,
+					class: "tab-label tab-label-input",
+					type: "text",
+					onClick: r[2] ||= I(() => {}, ["stop"]),
+					onDblclick: r[3] ||= I(() => {}, ["stop"]),
+					onKeydown: [F(I((t) => w(e), ["prevent"]), ["enter"]), F(I(T, ["prevent"]), ["esc"])],
+					onBlur: (t) => w(e)
+				}, null, 40, yo)), [[A, g.value]]) : (b(), i(ti, {
+					key: 1,
+					class: "tab-label",
+					onDblclick: I((t) => e.type === "dynamic" && C(e), ["stop"])
+				}, {
+					default: N(() => [c(D(e.name), 1)]),
+					_: 2
+				}, 1032, ["onDblclick"])),
+				s("span", bo, D(e.channel.charAt(0).toUpperCase()), 1),
+				s("span", xo, D(e.version), 1),
+				e.changed ? (b(), o("span", So)) : a("", !0)
+			], 10, _o))), 128)), t.templates?.length ? a("", !0) : (b(), o("p", Co, "No screens yet."))]),
+			_: 1
+		})]));
 	}
-}), [["__scopeId", "data-v-cdebac9d"]]);
+}), [["__scopeId", "data-v-927e0835"]]), To = {
+	class: "theme-sidebar",
+	"aria-label": "Theme"
+}, Eo = { class: "theme-header" }, Do = { class: "theme-heading" }, Oo = ["title"], ko = { class: "theme-body" }, Ao = { class: "theme-label" }, jo = { class: "theme-presets" }, Mo = ["aria-label", "onClick"], No = {
+	class: "theme-label",
+	for: "designer-theme-color"
+}, Po = { class: "theme-color-row" }, Fo = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "ThemeSidebar",
+	props: {
+		open: { type: Boolean },
+		color: {}
+	},
+	emits: ["close", "update"],
+	setup(t, { emit: r }) {
+		let c = t, l = r, u = V(), d = [
+			"#3d7a68",
+			"#2563eb",
+			"#8b6fae",
+			"#c9973f",
+			"#b8564a"
+		], f = x(c.color ?? d[0]);
+		function p(e) {
+			f.value = e, l("update", e);
+		}
+		return (r, c) => (b(), i(n, { name: "theme" }, {
+			default: N(() => [t.open ? (b(), o("div", {
+				key: 0,
+				class: "theme-overlay",
+				onClick: c[5] ||= I((e) => l("close"), ["self"])
+			}, [s("aside", To, [s("div", Eo, [
+				c[6] ||= s("span", {
+					class: "theme-icon icon",
+					"aria-hidden": "true"
+				}, "palette", -1),
+				s("div", Do, [s("strong", null, D(k(u)("theme", "Theme")), 1), s("span", null, D(k(u)("theme-subtitle", "Colors used across every screen")), 1)]),
+				s("button", {
+					type: "button",
+					class: "theme-close icon",
+					title: k(u)("close", "Close"),
+					onClick: c[0] ||= (e) => l("close")
+				}, "close", 8, Oo)
+			]), s("div", ko, [
+				s("span", Ao, D(k(u)("presets", "Presets")), 1),
+				s("div", jo, [(b(), o(e, null, S(d, (e) => s("button", {
+					key: e,
+					type: "button",
+					class: m({ active: f.value === e }),
+					style: g({ "--theme-color": e }),
+					"aria-label": e,
+					onClick: (t) => p(e)
+				}, [...c[7] ||= [s("span", null, null, -1)]], 14, Mo)), 64))]),
+				s("label", No, D(k(u)("primary-color", "Primary color")), 1),
+				s("div", Po, [P(s("input", {
+					id: "designer-theme-color",
+					"onUpdate:modelValue": c[1] ||= (e) => f.value = e,
+					type: "color",
+					onInput: c[2] ||= (e) => p(f.value)
+				}, null, 544), [[A, f.value]]), P(s("input", {
+					"onUpdate:modelValue": c[3] ||= (e) => f.value = e,
+					type: "text",
+					onChange: c[4] ||= (e) => p(f.value)
+				}, null, 544), [[A, f.value]])])
+			])])])) : a("", !0)]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-2b2352d5"]]), Io = {
+	class: "translation-sidebar",
+	"aria-label": "Translations"
+}, Lo = { class: "translation-header" }, Ro = { class: "translation-heading" }, zo = ["title"], Bo = { class: "translation-body" }, Vo = { class: "translation-controls" }, Ho = { class: "language-row" }, Uo = { class: "language-heading" }, Wo = ["disabled", "title"], Go = {
+	key: 0,
+	class: "translate-spinner",
+	"aria-hidden": "true"
+}, Ko = { key: 1 }, qo = [
+	"aria-keyshortcuts",
+	"onClick",
+	"onKeydown"
+], Jo = { class: "translation-search" }, Yo = {
+	key: 0,
+	class: "translation-fields"
+}, Xo = { class: "translation-field-heading" }, Zo = { class: "field-language" }, Qo = { class: "field-path" }, $o = [
+	"value",
+	"aria-label",
+	"onInput"
+], es = {
+	key: 1,
+	class: "translation-empty"
+}, ts = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "TranslationSidebar",
+	props: {
+		open: { type: Boolean },
+		fields: {},
+		focusedFieldId: {}
+	},
+	emits: ["close", "update"],
+	setup(t, { emit: c }) {
+		let u = t, d = c, f = V(), h = z(), g = x(["en"]), y = x("en"), C = x(""), w = x(!1), T = x(""), E = x(!1), O = x(), M = x(), L = x(), R = x(), B = r(() => h.fields), H = r(() => {
+			let e = C.value.trim().toLowerCase();
+			return e ? B.value.filter((t) => [
+				t.id,
+				t.key,
+				t.path,
+				t.source
+			].some((t) => t?.toLowerCase().includes(e))) : B.value;
+		});
+		function U(e) {
+			e && (C.value = e);
+		}
+		j(() => u.focusedFieldId, U, { immediate: !0 }), j(() => u.fields, (e) => {
+			e && h.setItems(e);
+		}, { immediate: !0 });
+		function ee(e, t) {
+			return h.getValue(e.id, t);
+		}
+		function te() {
+			E.value = !1, T.value = "", O.value = void 0;
+		}
+		function ne() {
+			let e = T.value.trim().toLowerCase();
+			if (!e || g.value.includes(e)) {
+				te();
+				return;
+			}
+			g.value.push(e), y.value = e, te();
+		}
+		function W(e) {
+			if (e === "en") return;
+			let t = g.value.indexOf(e);
+			if (t !== -1) {
+				if (O.value !== e) {
+					O.value = e;
+					return;
+				}
+				g.value.splice(t, 1), O.value = void 0, y.value === e && (y.value = g.value[Math.max(0, t - 1)] ?? "en");
+			}
+		}
+		function re() {
+			E.value = !0, p(() => L.value?.focus());
+		}
+		function ie(e) {
+			E.value && !M.value?.contains(e.target) && te(), R.value?.contains(e.target) || (O.value = void 0);
+		}
+		function ae(e) {
+			if (e.key === "Escape") {
+				O.value = void 0, E.value && te();
+				return;
+			}
+			!u.open || E.value || e.key !== "Delete" && e.key !== "Backspace" || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || W(y.value);
+		}
+		async function oe() {
+			if (y.value === "en" || w.value || !B.value.length) return;
+			w.value = !0;
+			let e = B.value, t = e.map((e) => ee(e, "en")).join("\n"), n = new URL("https://translate.googleapis.com/translate_a/single");
+			n.searchParams.set("client", "gtx"), n.searchParams.set("sl", "en"), n.searchParams.set("tl", y.value), n.searchParams.set("dt", "t"), n.searchParams.set("q", t);
+			try {
+				let t = await fetch(n);
+				if (!t.ok) throw Error(`Translation request failed with status ${t.status}.`);
+				let r = await t.json();
+				if (!Array.isArray(r) || !Array.isArray(r[0])) throw Error("Translation response has an unexpected format.");
+				let i = r[0].map((e) => Array.isArray(e) && typeof e[0] == "string" ? e[0] : "").join("").split("\n");
+				if (i.length !== e.length) throw Error("Translation response did not contain one value per label.");
+				i.forEach((t, n) => {
+					h.updateValue(e[n].id, t, y.value), d("update", e[n].id, t, y.value);
+				});
+			} finally {
+				w.value = !1;
+			}
+		}
+		return v(() => {
+			document.addEventListener("pointerdown", ie), document.addEventListener("keydown", ae);
+		}), _(() => {
+			document.removeEventListener("pointerdown", ie), document.removeEventListener("keydown", ae);
+		}), (r, c) => (b(), i(n, { name: "translation" }, {
+			default: N(() => [t.open ? (b(), o("div", {
+				key: 0,
+				class: "translation-overlay",
+				onClick: c[3] ||= I((e) => d("close"), ["self"])
+			}, [s("aside", Io, [s("div", Lo, [
+				c[4] ||= s("span", {
+					class: "translation-icon icon",
+					"aria-hidden": "true"
+				}, "translate", -1),
+				s("div", Ro, [s("strong", null, D(k(f)("translations", "Translations")), 1), s("span", null, D(k(f)("translations-subtitle", "Translate this screen")), 1)]),
+				s("button", {
+					type: "button",
+					class: "translation-close icon",
+					title: k(f)("close", "Close"),
+					onClick: c[0] ||= (e) => d("close")
+				}, "close", 8, zo)
+			]), s("div", Bo, [s("div", Vo, [s("div", Ho, [s("div", Uo, [s("span", null, D(k(f)("language", "Language")), 1), s("button", {
+				type: "button",
+				class: "translate-labels-button",
+				disabled: y.value === "en" || w.value,
+				title: k(f)("auto-translate", "Auto-translate"),
+				onClick: oe
+			}, [c[5] ||= s("span", {
+				class: "icon",
+				"aria-hidden": "true"
+			}, "translate", -1), w.value ? (b(), o("span", Go)) : (b(), o("span", Ko, D(k(f)("auto-translate", "Auto-translate")), 1))], 8, Wo)]), s("div", {
+				ref_key: "languageChips",
+				ref: R,
+				class: "language-chips"
+			}, [(b(!0), o(e, null, S(g.value, (e) => (b(), o("button", {
+				key: e,
+				type: "button",
+				class: m({
+					active: y.value === e,
+					"delete-armed": O.value === e
+				}),
+				"aria-keyshortcuts": e === "en" ? void 0 : "Delete",
+				onClick: (t) => {
+					y.value = e, O.value = void 0;
+				},
+				onKeydown: [F(I((t) => W(e), ["prevent"]), ["delete"]), F(I((t) => W(e), ["prevent"]), ["backspace"])]
+			}, D(e), 43, qo))), 128)), E.value ? (b(), o("span", {
+				key: 0,
+				ref_key: "languageAdder",
+				ref: M,
+				class: "add-language"
+			}, [s("form", { onSubmit: I(ne, ["prevent"]) }, [P(s("input", {
+				ref_key: "languageInput",
+				ref: L,
+				"onUpdate:modelValue": c[1] ||= (e) => T.value = e,
+				"aria-label": "New language"
+			}, null, 512), [[A, T.value]])], 32)], 512)) : (b(), o("button", {
+				key: 1,
+				type: "button",
+				class: "add-language-button",
+				"aria-label": "Add language",
+				onClick: re
+			}, "+"))], 512)]), s("div", Jo, [c[6] ||= s("span", {
+				class: "icon",
+				"aria-hidden": "true"
+			}, "search", -1), P(s("input", {
+				"onUpdate:modelValue": c[2] ||= (e) => C.value = e,
+				type: "search",
+				"aria-label": "Search translations",
+				placeholder: "Search translations..."
+			}, null, 512), [[A, C.value]])])]), l(k($r), {
+				class: "translation-scroll",
+				options: {
+					overflow: {
+						x: "hidden",
+						y: "scroll"
+					},
+					scrollbars: { autoHide: "never" }
+				},
+				defer: ""
+			}, {
+				default: N(() => [H.value.length ? (b(), o("div", Yo, [(b(!0), o(e, null, S(H.value, (e) => (b(), o("div", {
+					key: e.id,
+					class: "translation-field"
+				}, [s("div", Xo, [s("span", Zo, D(ee(e, "en")), 1), s("span", Qo, D(e.key ?? e.path), 1)]), s("input", {
+					value: ee(e, y.value),
+					"aria-label": e.source,
+					onInput: (t) => d("update", e.id, t.target.value, y.value)
+				}, null, 40, $o)]))), 128))])) : (b(), o("p", es, D(k(f)("no-translations", "No translatable fields are available for this screen.")), 1))]),
+				_: 1
+			})])])])) : a("", !0)]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-19047d8f"]]), ns = { class: "breadcrumb-label" }, rs = { class: "breadcrumb-selection" }, is = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "Breadcrumb",
+	setup(t) {
+		let n = B();
+		function i() {
+			n.deselect();
+		}
+		let c = {
+			consentCard: "Consent Card",
+			emailInput: "Email Input",
+			layoutRef: "Layout Reference",
+			otpInput: "OTP Input",
+			passwordInput: "Password Input",
+			scopeList: "Scope List",
+			socialButton: "Social Button",
+			submitButton: "Submit Button",
+			textInput: "Text Input",
+			textLink: "Text Link"
+		}, l = r(() => {
+			let e = n.selectedComponent?.type;
+			return e ? c[e] ?? e.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (e) => e.toUpperCase()) : "";
+		});
+		return (t, r) => (b(), o("span", ns, [s("button", {
+			type: "button",
+			class: "breadcrumb-template",
+			onClick: i
+		}, D(k(n).activeTemplateName || k(n).activeTemplateId || "Workspace"), 1), l.value ? (b(), o(e, { key: 0 }, [r[0] ||= s("span", {
+			class: "breadcrumb-separator",
+			"aria-hidden": "true"
+		}, "/", -1), s("span", rs, D(l.value), 1)], 64)) : a("", !0)]));
+	}
+}), [["__scopeId", "data-v-9943cef5"]]), as = ["data-component-id"], os = {
+	key: 0,
+	class: "component-info"
+}, ss = { class: "component-content" }, cs = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "ComponentHandler",
+	props: {
+		type: {},
+		id: {},
+		componentProps: {},
+		selected: { type: Boolean }
+	},
+	emits: ["select", "moveStart"],
+	setup(e, { emit: t }) {
+		let n = e, c = t;
+		function l(e) {
+			e.stopPropagation(), c("select");
+		}
+		let u = r(() => Ra(n.type));
+		return (t, n) => (b(), o("div", {
+			class: m(["component-handler", { selected: e.selected }]),
+			"data-component-id": e.id,
+			draggable: "true",
+			onDragstart: n[0] ||= (t) => c("moveStart", e.id ?? "", t),
+			onClickCapture: l
+		}, [e.selected ? (b(), o("span", os, [s("strong", null, D(u.value), 1)])) : a("", !0), s("div", ss, [(b(), i(T(k(za)[e.type]), h(f(e.componentProps)), null, 16))])], 42, as));
+	}
+}), [["__scopeId", "data-v-886cfbdd"]]), ls = { class: "renderer-components" }, us = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "Renderer",
+	props: {
+		components: {},
+		selectedIndex: {}
+	},
+	emits: ["select"],
+	setup(t, { emit: n }) {
+		let r = t, i = n;
+		return (t, n) => (b(), o("div", ls, [(b(!0), o(e, null, S(r.components, (e, n) => C(t.$slots, "default", {
+			type: e.type,
+			props: e.props,
+			index: n,
+			selected: r.selectedIndex === n,
+			select: () => i("select", n)
+		}, void 0, !0, `${e.type}-${n}`)), 128))]));
+	}
+}), [["__scopeId", "data-v-8730eb3d"]]), ds = {
+	key: 1,
+	class: "composer-empty"
+}, fs = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "Composer",
+	emits: ["componentDrop", "componentSelect"],
+	setup(e, { expose: t, emit: n }) {
+		let r = n, i = B(), s = x(!1), c = x(), u = x(12), d = x(), f = x(), p = () => i.components;
+		function h(e) {
+			i.addComponent(e), r("componentDrop", e);
+		}
+		function y(e) {
+			if (!i.components[e]) return;
+			let t = i.selectComponent(e);
+			t && r("componentSelect", t);
+		}
+		function S(e) {
+			e.target.closest(".component-handler") || i.deselect();
+		}
+		function C(e) {
+			e.target.closest(".component-handler") || i.deselect();
+		}
+		function w() {
+			i.deleteSelected();
+		}
+		function T(e) {
+			if (e.target?.matches("input, textarea, select, [contenteditable=\"true\"]")) return;
+			if (e.key === "Escape") {
+				i.deselect();
+				return;
+			}
+			let t = i.selectedIndex;
+			if (!(t < 0)) {
+				if (e.key === "Delete" || e.key === "Backspace") {
+					e.preventDefault(), w();
+					return;
+				}
+				if (e.key === "ArrowUp" && t > 0) {
+					e.preventDefault(), i.move(t, t - 1);
+					return;
+				}
+				e.key === "ArrowDown" && t < i.components.length - 1 && (e.preventDefault(), i.move(t, t + 1));
+			}
+		}
+		function E(e) {
+			let t = e.dataTransfer?.types;
+			if (!t?.includes("application/x-aham-designer-component") && !t?.includes("application/x-aham-designer-composed-component") || !e.dataTransfer) return;
+			e.preventDefault(), e.dataTransfer.dropEffect = f.value ? "move" : "copy", s.value = !0;
+			let n = d.value;
+			if (!n) return;
+			let r = [...n.querySelectorAll(".component-handler")].filter((e) => e.dataset.componentId !== f.value);
+			if (!r.length) {
+				c.value = i.components.length, u.value = 12;
+				return;
+			}
+			let a = n.getBoundingClientRect().top, o = e.clientY, l = r.findIndex((e) => {
+				let t = e.getBoundingClientRect();
+				return o < t.top + t.height / 2;
+			});
+			c.value = l < 0 ? r.length : l;
+			let p = r[c.value === r.length ? r.length - 1 : c.value].getBoundingClientRect();
+			u.value = (c.value === r.length ? p.bottom : p.top) - a + n.scrollTop;
+		}
+		function D(e) {
+			e.preventDefault();
+			let t = e.dataTransfer?.getData("application/x-aham-designer-component"), n = e.dataTransfer?.getData("application/x-aham-designer-composed-component");
+			s.value = !1;
+			let a = c.value;
+			if (c.value = void 0, n) {
+				let e = i.components.findIndex(({ id: e }) => e === n);
+				if (e >= 0) {
+					let [t] = i.components.splice(e, 1), r = i.components.filter(({ id: e }) => e !== n), o = Math.min(a ?? r.length, r.length);
+					i.components.splice(o, 0, t);
+				}
+				f.value = void 0;
+				return;
+			}
+			t && (i.addComponent(t, a), r("componentDrop", t));
+		}
+		function O(e, t) {
+			f.value = e, t.dataTransfer && (t.dataTransfer.setData("application/x-aham-designer-composed-component", e), t.dataTransfer.effectAllowed = "move");
+		}
+		function A(e) {
+			e.currentTarget === e.target && (s.value = !1, c.value = void 0);
+		}
+		function j() {
+			f.value = void 0, s.value = !1, c.value = void 0;
+		}
+		return t({ addComponent: h }), v(() => {
+			window.addEventListener("keydown", T);
+		}), _(() => {
+			window.removeEventListener("keydown", T);
+		}), (e, t) => (b(), o("div", {
+			ref_key: "composerElement",
+			ref: d,
+			class: m(["composer", { "drag-active": s.value }]),
+			onPointerdownCapture: C,
+			onClick: S,
+			onDragover: E,
+			onDragleave: A,
+			onDrop: D,
+			onDragend: j
+		}, [
+			s.value ? (b(), o("div", {
+				key: 0,
+				class: "drop-line",
+				style: g({ top: `${u.value}px` }),
+				"aria-hidden": "true"
+			}, null, 4)) : a("", !0),
+			k(i).components.length ? a("", !0) : (b(), o("div", ds, " Click or drag a component from the list to start building. ")),
+			l(us, {
+				components: p(),
+				"selected-index": k(i).selectedIndex,
+				onSelect: y
+			}, {
+				default: N(({ type: e, props: t, index: n, selected: r, select: a }) => [l(cs, {
+					type: e,
+					"component-props": t,
+					id: k(i).components[n].id,
+					selected: r,
+					onSelect: a,
+					onMoveStart: O
+				}, null, 8, [
+					"type",
+					"component-props",
+					"id",
+					"selected",
+					"onSelect"
+				])]),
+				_: 1
+			}, 8, ["components", "selected-index"])
+		], 34));
+	}
+}), [["__scopeId", "data-v-e3d8752d"]]), ps = {}, ms = { class: "desktop" };
+function hs(e, t) {
+	return b(), o("div", ms, [t[0] ||= s("div", { class: "browser-bar" }, [
+		s("span"),
+		s("span"),
+		s("span"),
+		s("i")
+	], -1), C(e.$slots, "default", {}, void 0, !0)]);
+}
+var gs = /*#__PURE__*/ Q(ps, [["render", hs], ["__scopeId", "data-v-6ae31803"]]), _s = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "Device",
+	props: { mode: {} },
+	setup(e) {
+		return (t, n) => (b(), o("div", { class: m(["device", `device-${e.mode}`]) }, [C(t.$slots, "default", {}, void 0, !0)], 2));
+	}
+}), [["__scopeId", "data-v-8c3e6533"]]), vs = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "Mobile",
+	setup(e) {
+		return (e, t) => (b(), i(_s, {
+			mode: "phone",
+			class: "mobile-device"
+		}, {
+			default: N(() => [C(e.$slots, "default", {}, void 0, !0)]),
+			_: 3
+		}));
+	}
+}), [["__scopeId", "data-v-c499f1db"]]), ys = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "Tablet",
+	setup(e) {
+		return (e, t) => (b(), i(_s, {
+			mode: "tablet",
+			class: "tablet-device"
+		}, {
+			default: N(() => [C(e.$slots, "default", {}, void 0, !0)]),
+			_: 3
+		}));
+	}
+}), [["__scopeId", "data-v-3cc52b8c"]]), bs = { class: "canvas-wrap" }, xs = { class: "canvas-topbar" }, Ss = { class: "breadcrumb" }, Cs = { class: "device-switch" }, ws = "aham-ui-designer-device", Ts = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "Workspace",
+	props: {
+		subject: {},
+		templateId: {},
+		templateName: {}
+	},
+	emits: ["componentDrop"],
+	setup(e, { expose: t, emit: n }) {
+		let r = e, a = n, c = x("desktop"), u = {
+			phone: vs,
+			tablet: ys,
+			desktop: gs
+		}, d = x(), p = B(), g = {
+			overflow: {
+				x: "scroll",
+				y: "scroll"
+			},
+			scrollbars: {
+				autoHide: "scroll",
+				autoHideDelay: 800
+			}
+		};
+		function _(e) {
+			a("componentDrop", e);
+		}
+		function y(e) {
+			d.value?.addComponent(e);
+		}
+		function S(e) {
+			e.target.closest(".component-handler") || p.deselect();
+		}
+		t({ addComponent: y });
+		function C(e) {
+			c.value = e;
+		}
+		return v(() => {
+			let e = localStorage.getItem(ws);
+			(e === "phone" || e === "tablet" || e === "desktop") && (c.value = e);
+		}), j(c, (e) => {
+			localStorage.setItem(ws, e);
+		}), j(() => r.templateId, (e) => {
+			p.setActiveTemplate(e, r.templateName ?? e);
+		}, { immediate: !0 }), j(() => r.templateName, (e) => {
+			e && p.activeTemplateId === r.templateId && (p.activeTemplateName = e);
+		}), (e, t) => (b(), o("main", bs, [s("div", xs, [s("span", Ss, [l(is)]), s("div", Cs, [
+			s("button", {
+				type: "button",
+				class: m(["device-button", { active: c.value === "phone" }]),
+				"aria-label": "Phone preview",
+				onClick: t[0] ||= (e) => C("phone")
+			}, [...t[3] ||= [s("span", {
+				class: "icon",
+				"aria-hidden": "true"
+			}, "smartphone", -1)]], 2),
+			s("button", {
+				type: "button",
+				class: m(["device-button", { active: c.value === "tablet" }]),
+				"aria-label": "Tablet preview",
+				onClick: t[1] ||= (e) => C("tablet")
+			}, [...t[4] ||= [s("span", {
+				class: "icon",
+				"aria-hidden": "true"
+			}, "tablet_android", -1)]], 2),
+			s("button", {
+				type: "button",
+				class: m(["device-button", { active: c.value === "desktop" }]),
+				"aria-label": "Desktop preview",
+				onClick: t[2] ||= (e) => C("desktop")
+			}, [...t[5] ||= [s("span", {
+				class: "icon",
+				"aria-hidden": "true"
+			}, "desktop_windows", -1)]], 2)
+		])]), l(k($r), {
+			class: "canvas-scroll",
+			options: g,
+			defer: "",
+			onPointerdownCapture: S
+		}, {
+			default: N(() => [s("div", {
+				class: m(["canvas-frame", `device-${c.value}`]),
+				onPointerdownCapture: S
+			}, [(b(), i(T(u[c.value]), h(f(c.value === "desktop" ? {} : void 0)), {
+				default: N(() => [l(fs, {
+					ref_key: "composer",
+					ref: d,
+					onComponentDrop: _
+				}, null, 512)]),
+				_: 1
+			}, 16))], 34)]),
+			_: 1
+		})]));
+	}
+}), [["__scopeId", "data-v-71aa67d7"]]), Es = ["data-theme", "data-theme-mode"], Ds = { class: "contents" }, Os = "aham-ui-designer-screens-height", ks = "aham-ui-designer-theme", As = /*#__PURE__*/ Q(/* @__PURE__ */ u({
+	__name: "Designer",
+	props: {
+		value: {},
+		options: {}
+	},
+	emits: [
+		"moreSelect",
+		"translationUpdate",
+		"screenSelect",
+		"screenAdd",
+		"screenRename",
+		"themeUpdate",
+		"componentDrop"
+	],
+	setup(e, { emit: t }) {
+		let n = e, i = t, a = x(), c = x([]), u = x(), d = x(50), f = x(!1), p = x(!1), m = x(), h = x(!1), y = x(n.options?.theme?.color), S = z(), C = B(), w = x(), T = !1, E = r(() => n.options?.theme?.mode ?? "default"), D = r(() => {
+			let e = {
+				alert: {
+					label: "Alert",
+					icon: "warning"
+				},
+				card: {
+					label: "Card",
+					icon: "web_asset"
+				},
+				checkbox: {
+					label: "Checkbox",
+					icon: "check_box"
+				},
+				consentCard: {
+					label: "Consent Card",
+					icon: "verified_user"
+				},
+				container: {
+					label: "Container",
+					icon: "view_agenda"
+				},
+				content: {
+					label: "Layout Content",
+					icon: "dashboard"
+				},
+				divider: {
+					label: "Divider",
+					icon: "horizontal_rule"
+				},
+				emailInput: {
+					label: "Email Input",
+					icon: "mail"
+				},
+				heading: {
+					label: "Heading",
+					icon: "title"
+				},
+				image: {
+					label: "Image",
+					icon: "image"
+				},
+				layout: {
+					label: "Layout",
+					icon: "view_column"
+				},
+				layoutRef: {
+					label: "Layout Reference",
+					icon: "view_quilt"
+				},
+				otpInput: {
+					label: "OTP Input",
+					icon: "pin"
+				},
+				passwordInput: {
+					label: "Password Input",
+					icon: "lock"
+				},
+				scopeList: {
+					label: "Scope List",
+					icon: "checklist"
+				},
+				socialButton: {
+					label: "Social Button",
+					icon: "group"
+				},
+				spacer: {
+					label: "Spacer",
+					icon: "height"
+				},
+				submitButton: {
+					label: "Submit Button",
+					icon: "send"
+				},
+				text: {
+					label: "Text",
+					icon: "subject"
+				},
+				textInput: {
+					label: "Text Input",
+					icon: "text_fields"
+				},
+				textLink: {
+					label: "Text Link",
+					icon: "link"
+				}
+			};
+			return C.components.map((t) => ({
+				...t,
+				...e[t.type] ?? {
+					label: t.type,
+					icon: "widgets"
+				}
+			}));
+		}), O = r(() => n.options?.checklist?.map((e) => ({
+			...e,
+			complete: e.check ? e.check({ templates: c.value }) : e.complete
+		})));
+		j(() => n.options?.templates, (e) => {
+			c.value = e ? [...e] : [], !u.value && c.value[0] && (u.value = c.value[0].id);
+		}, { immediate: !0 }), j(() => n.options?.translations, (e) => {
+			e && S.setItems(e);
+		}, { immediate: !0 }), j(() => n.options?.translationScreens, (e) => {
+			Object.entries(e ?? {}).forEach(([e, t]) => {
+				S.setScreenItems(e, t);
+			});
+		}), j(() => n.options?.translationComponents, (e) => {
+			Object.entries(e ?? {}).forEach(([e, t]) => {
+				S.setComponentItems(e, t);
+			});
+		});
+		function A() {
+			let e = c.value.filter((e) => e.icon === "view_column").length, t = `layout-${Date.now()}`, n = {
+				id: t,
+				name: e ? `New Layout ${e + 1}` : "New Layout",
+				version: "1",
+				channel: "ui",
+				icon: "view_column",
+				changed: !0,
+				type: "dynamic"
+			};
+			c.value.push(n), u.value = t, i("screenAdd", n), i("screenSelect", n);
+		}
+		function M(e, t) {
+			let n = c.value.find((t) => t.id === e);
+			n && (n.name = t, i("screenRename", e, t));
+		}
+		function N(e) {
+			let t = c.value.find((t) => t.id === e);
+			t && (u.value = e, i("screenSelect", t));
+		}
+		function P(e) {
+			i("moreSelect", e);
+		}
+		function F() {
+			f.value = !f.value;
+		}
+		function I() {
+			p.value = !p.value, p.value && (h.value = !1);
+		}
+		function L(e) {
+			m.value = e, p.value = !0, h.value = !1;
+		}
+		function R() {
+			h.value = !h.value, h.value && (p.value = !1);
+		}
+		function V(e) {
+			y.value = e, i("themeUpdate", e);
+		}
+		function H(e) {
+			i("componentDrop", e);
+		}
+		function U(e) {
+			w.value?.addComponent(e);
+		}
+		function ee(e, t, n) {
+			S.updateValue(e, t, n), i("translationUpdate", e, t, n);
+		}
+		function te() {
+			T && (T = !1, document.body.style.removeProperty("cursor"), document.removeEventListener("pointermove", ne), document.removeEventListener("pointerup", te));
+		}
+		function ne(e) {
+			let t = a.value?.getBoundingClientRect();
+			if (!t) return;
+			let n = (e.clientY - t.top) / t.height * 100;
+			d.value = Math.min(80, Math.max(20, n));
+		}
+		function W(e) {
+			T = !0, document.body.style.cursor = "row-resize", document.addEventListener("pointermove", ne), document.addEventListener("pointerup", te), e.currentTarget.setPointerCapture?.(e.pointerId);
+		}
+		return v(() => {
+			let e = Number(localStorage.getItem(Os));
+			Number.isFinite(e) && (d.value = Math.min(80, Math.max(20, e))), f.value = E.value === "default" && localStorage.getItem(ks) === "dark";
+		}), j(d, (e) => {
+			localStorage.setItem(Os, String(e));
+		}), j([f, E], ([e, t]) => {
+			t === "default" && localStorage.setItem(ks, e ? "dark" : "light");
+		}), _(te), (t, n) => (b(), o("section", {
+			class: "ui-designer",
+			"data-theme": f.value ? "dark" : "light",
+			"data-theme-mode": E.value,
+			style: g(y.value ? { "--designer-primary": y.value } : void 0)
+		}, [
+			l(ki, {
+				subject: e.options?.subject ?? "",
+				shared: e.options?.shared,
+				"dark-mode-changeable": e.options?.theme?.darkModeChangeable,
+				"dark-mode": f.value,
+				"translations-open": p.value,
+				"theme-open": h.value,
+				"more-items": e.options?.moreItems,
+				onMoreSelect: P,
+				onToggleTheme: F,
+				onToggleTranslations: I,
+				onToggleThemePanel: R
+			}, null, 8, [
+				"subject",
+				"shared",
+				"dark-mode-changeable",
+				"dark-mode",
+				"translations-open",
+				"theme-open",
+				"more-items"
+			]),
+			s("div", Ds, [
+				s("aside", null, [s("div", {
+					ref_key: "sidebarPanels",
+					ref: a,
+					class: "sidebar-panels",
+					style: g({ "--screens-height": `${d.value}%` })
+				}, [
+					l(wo, {
+						templates: c.value,
+						"focused-template-id": u.value,
+						onAdd: A,
+						onRename: M,
+						onSelect: N
+					}, null, 8, ["templates", "focused-template-id"]),
+					s("button", {
+						type: "button",
+						class: "panel-resizer",
+						"aria-label": "Resize screens and components panels",
+						onPointerdown: W
+					}, [...n[3] ||= [s("span", { "aria-hidden": "true" }, null, -1)]], 32),
+					l(fi, { onSelect: U })
+				], 4), l(fo, { items: O.value }, null, 8, ["items"])]),
+				l(Ts, {
+					ref_key: "workspace",
+					ref: w,
+					class: "workspace",
+					subject: e.options?.subject ?? "",
+					"template-id": u.value,
+					"template-name": c.value.find(({ id: e }) => e === u.value)?.name,
+					onComponentDrop: H
+				}, null, 8, [
+					"subject",
+					"template-id",
+					"template-name"
+				]),
+				l(so, {
+					class: "properties",
+					layers: D.value,
+					"selected-component": k(C).selectedComponent,
+					onUpdateProps: n[0] ||= (e) => k(C).selectedComponent && k(C).updateComponentProps(k(C).selectedComponent.id, e),
+					onFocusTranslation: L
+				}, null, 8, ["layers", "selected-component"])
+			]),
+			l(ts, {
+				open: p.value,
+				"focused-field-id": m.value,
+				onClose: n[1] ||= (e) => p.value = !1,
+				onUpdate: ee
+			}, null, 8, ["open", "focused-field-id"]),
+			l(Fo, {
+				open: h.value,
+				color: y.value,
+				onClose: n[2] ||= (e) => h.value = !1,
+				onUpdate: V
+			}, null, 8, ["open", "color"])
+		], 12, Es));
+	}
+}), [["__scopeId", "data-v-68f84b1d"]]), js = L("checklist", {
+	state: () => ({ items: [{
+		id: "all-screens-completed",
+		label: "All screens completed",
+		complete: !1,
+		check: ({ templates: e }) => e.length > 0 && e.every((e) => !e.changed)
+	}] }),
+	actions: {
+		setComplete(e, t = !0) {
+			let n = this.items.find((t) => t.id === e);
+			n && (n.complete = t);
+		},
+		reset() {
+			this.items.forEach((e) => {
+				e.complete = !1;
+			});
+		}
+	}
+}), Ms = L("templates", {
+	state: () => ({
+		templates: [],
+		template: null
+	}),
+	actions: {
+		setTemplates(e) {
+			this.templates = e, this.template = e[0] ?? null;
+		},
+		setActiveTemplate(e) {
+			this.template = this.templates.find((t) => t.id === e) ?? this.template;
+		},
+		addDynamicLayout(e) {
+			let t = this.templates.filter((e) => e.type === "dynamic").length, n = e ?? {
+				id: `layout-${Date.now()}`,
+				name: t ? `New Layout ${t + 1}` : "New Layout",
+				icon: "view_column",
+				channel: "ui",
+				version: "1",
+				changed: !0,
+				type: "dynamic"
+			};
+			this.templates.push(n), this.template = n;
+		},
+		rename(e, t) {
+			let n = this.templates.find((t) => t.id === e);
+			n && (n.name = t);
+		},
+		clear() {
+			this.templates = [], this.template = null;
+		}
+	}
+});
 //#endregion
-export { qa as Alert, $i as Card, ja as Checkbox, Qa as ConsentCard, Qi as Container, Xa as Content, qi as Designer, ra as Divider, pa as EmailInput, La as Heading, Ga as Image, ia as Layout, ca as LayoutRef, Oa as OtpInput, wa as PasswordInput, eo as ScopeList, Pa as SocialButton, ea as Spacer, Ma as SubmitButton, za as Text, va as TextInput, Ia as TextLink, Yr as TextScroller, Ji as useChecklistStore, Yi as useScreensStore };
+export { Oa as Alert, Pi as Card, fa as Checkbox, cs as ComponentHandler, fs as Composer, Na as ConsentCard, Ni as Container, ja as Content, As as Designer, gs as Desktop, _s as Device, Ri as Divider, Ji as EmailInput, va as Heading, Ea as Image, zi as Layout, Ui as LayoutRef, vs as Mobile, la as OtpInput, aa as PasswordInput, us as Renderer, Fa as ScopeList, ha as SocialButton, Fi as Spacer, pa as SubmitButton, ys as Tablet, ba as Text, $i as TextInput, _a as TextLink, ti as TextScroller, Fo as ThemeSidebar, js as useChecklistStore, Ms as useTemplatesStore, z as useTranslationStore, B as useWorkspaceStore, $ as withEditable };