@aham.ro/ui-designer 0.1.11 → 0.1.12

package/dist/ui-designer.js

@@ -56,6 +56,15 @@ var H = B("translations", {
 		},
 		clear() {
 			this.items = [];
+		},
+		exportData() {
+			return this.items.map((e) => ({
+				...e,
+				translations: { ...e.translations }
+			}));
+		},
+		importData(e) {
+			this.items = e.map((e) => V(e));
 		}
 	}
 }), U = B("theme", {
@@ -97,70 +106,70 @@ function W(e, t) {
 function ee(e, t) {
 	return e.id === t || !!e.children?.some((e) => ee(e, t));
 }
-function te(e, t) {
+function G(e, t) {
 	if (e.some((e) => e.id === t)) return e;
 	for (let n of e) {
-		let e = n.children && te(n.children, t);
+		let e = n.children && G(n.children, t);
 		if (e) return e;
 	}
 }
-function ne(e, t, n = 1) {
+function te(e, t, n = 1) {
 	for (let r of e) {
 		if (r.id === t) return n;
-		let e = r.children && ne(r.children, t, n + 1);
+		let e = r.children && te(r.children, t, n + 1);
 		if (e !== void 0) return e;
 	}
 }
-function re(e) {
+function ne(e) {
 	return `document-${e ?? "default"}`;
 }
-function G(e) {
+function K(e) {
 	return typeof e == "object" && !!e && !Array.isArray(e);
 }
-function ie(e) {
-	return G(e) && G(e.phone) && G(e.tablet) && G(e.desktop);
+function re(e) {
+	return K(e) && K(e.phone) && K(e.tablet) && K(e.desktop);
 }
-function ae(e) {
-	if (ie(e)) return e;
-	let t = G(e) ? e : {};
+function ie(e) {
+	if (re(e)) return e;
+	let t = K(e) ? e : {};
 	return {
 		phone: { ...t },
 		tablet: { ...t },
 		desktop: { ...t }
 	};
 }
-function oe(e, t) {
+function ae(e, t) {
 	return {
 		...e.props.base,
 		...e.props[t] ?? {}
 	};
 }
-function se(e) {
-	return G(e) && G(e.base) ? {
+function oe(e) {
+	return K(e) && K(e.base) ? {
 		base: e.base,
-		...G(e.phone) ? { phone: e.phone } : {},
-		...G(e.tablet) ? { tablet: e.tablet } : {},
-		...G(e.desktop) ? { desktop: e.desktop } : {}
-	} : { base: G(e) ? e : {} };
+		...K(e.phone) ? { phone: e.phone } : {},
+		...K(e.tablet) ? { tablet: e.tablet } : {},
+		...K(e.desktop) ? { desktop: e.desktop } : {}
+	} : { base: K(e) ? e : {} };
 }
-function ce(e) {
+function se(e) {
 	let { deviceProps: t, ...n } = e;
 	return {
 		...n,
 		props: {
-			...se(e.props),
+			...oe(e.props),
 			...t ?? {}
 		},
-		...e.children ? { children: e.children.map(ce) } : {}
+		...e.children ? { children: e.children.map(se) } : {}
 	};
 }
-function le(e) {
-	return !G(e) || typeof e.id != "string" || typeof e.type != "string" || !G(e.props) ? !1 : e.children === void 0 || Array.isArray(e.children) && e.children.every(le);
+function ce(e) {
+	return !K(e) || typeof e.id != "string" || typeof e.type != "string" || !K(e.props) ? !1 : e.children === void 0 || Array.isArray(e.children) && e.children.every(ce);
 }
-function ue(e) {
-	return G(e) && Array.isArray(e.templates) && e.templates.every((e) => G(e) && e.version === 1 && typeof e.templateId == "string" && typeof e.templateName == "string" && Array.isArray(e.components) && e.components.every(le) && (ie(e.documentProps) || G(e.documentProps)));
+function le(e) {
+	return K(e) && Array.isArray(e.templates) && e.templates.every((e) => K(e) && e.version === 1 && typeof e.templateId == "string" && typeof e.templateName == "string" && Array.isArray(e.components) && e.components.every(ce) && (re(e.documentProps) || K(e.documentProps)));
 }
-var de = B("workspace", {
+var ue = B("workspace", {
 	state: () => ({
 		components: [],
 		selectedId: void 0,
@@ -178,9 +187,9 @@ var de = B("workspace", {
 			let t = W(e.components, e.selectedId);
 			if (t) return {
 				...t,
-				props: { base: oe(t, e.activeDevice) }
+				props: { base: ae(t, e.activeDevice) }
 			};
-			if (e.selectedId === re(e.activeTemplateId)) return {
+			if (e.selectedId === ne(e.activeTemplateId)) return {
 				id: e.selectedId,
 				type: "document",
 				props: { base: e.documentProps[e.activeTemplateId ?? "default"]?.[e.activeDevice] ?? {} }
@@ -198,30 +207,30 @@ var de = B("workspace", {
 			let r = {
 				id: `${e}-${Date.now()}-${this.components.length}`,
 				type: e,
-				props: se(n)
+				props: oe(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;
 		},
 		selectDocument() {
-			this.selectedId = re(this.activeTemplateId);
+			this.selectedId = ne(this.activeTemplateId);
 		},
 		addChildComponent(e, t, n = {}) {
-			let r = this.findComponent(e), i = ne(this.components, e);
+			let r = this.findComponent(e), i = te(this.components, e);
 			if (!r || i === void 0 || i >= 10) return;
 			let a = {
 				id: `${t}-${Date.now()}-${r.children?.length ?? 0}`,
 				type: t,
-				props: se(n)
+				props: oe(n)
 			};
 			return (r.children ??= []).push(a), this.selectedId = a.id, a;
 		},
 		canAddChild(e) {
-			let t = ne(this.components, e);
+			let t = te(this.components, e);
 			return t !== void 0 && t < 10;
 		},
 		updateComponentProps(e, t) {
-			if (e === re(this.activeTemplateId)) {
-				let e = this.activeTemplateId ?? "default", n = this.documentProps[e] ?? ae({});
+			if (e === ne(this.activeTemplateId)) {
+				let e = this.activeTemplateId ?? "default", n = this.documentProps[e] ?? ie({});
 				this.documentProps[e] = {
 					...n,
 					[this.activeDevice]: {
@@ -241,7 +250,7 @@ var de = B("workspace", {
 			});
 		},
 		getComponentProps(e) {
-			return oe(e, this.activeDevice);
+			return ae(e, this.activeDevice);
 		},
 		selectComponent(e) {
 			let t = this.components[e];
@@ -264,14 +273,14 @@ var de = B("workspace", {
 		},
 		moveComponentBefore(e, t) {
 			if (e === t) return;
-			let n = W(this.components, e), r = W(this.components, t), i = te(this.components, e), a = te(this.components, t);
+			let n = W(this.components, e), r = W(this.components, t), i = G(this.components, e), a = G(this.components, t);
 			if (!n || !r || !i || !a || ee(n, t)) return;
 			i.splice(i.indexOf(n), 1);
 			let o = a.indexOf(r);
 			a.splice(o < 0 ? a.length : o, 0, n);
 		},
 		moveComponentToRoot(e, t) {
-			let n = W(this.components, e), r = te(this.components, e);
+			let n = W(this.components, e), r = G(this.components, e);
 			if (!n || !r || r === this.components) return;
 			r.splice(r.indexOf(n), 1);
 			let i = Math.min(t ?? this.components.length, this.components.length);
@@ -279,7 +288,7 @@ var de = B("workspace", {
 		},
 		moveComponentInto(e, t) {
 			if (e === t) return;
-			let n = W(this.components, e), r = W(this.components, t), i = te(this.components, e);
+			let n = W(this.components, e), r = W(this.components, t), i = G(this.components, e);
 			n && r && i && !ee(n, t) && (i.splice(i.indexOf(n), 1), (r.children ??= []).push(n), this.selectedId = n.id);
 		},
 		remove(e) {
@@ -295,11 +304,11 @@ var de = B("workspace", {
 				templateId: e,
 				templateName: e === this.activeTemplateId ? this.activeTemplateName : this.templateNames[e] ?? e,
 				components: t,
-				documentProps: this.documentProps[e] ?? ae({})
+				documentProps: this.documentProps[e] ?? ie({})
 			})) };
 		},
 		importData(e) {
-			let t = Object.fromEntries(e.templates.map((e) => [e.templateId, e.components.map(ce)])), n = Object.fromEntries(e.templates.map((e) => [e.templateId, ae(e.documentProps)]));
+			let t = Object.fromEntries(e.templates.map((e) => [e.templateId, e.components.map(se)])), n = Object.fromEntries(e.templates.map((e) => [e.templateId, ie(e.documentProps)]));
 			this.templateComponents = t, this.templateNames = Object.fromEntries(e.templates.map((e) => [e.templateId, e.templateName])), this.documentProps = n;
 			let r = e.templates.find((e) => e.templateId === this.activeTemplateId) ?? e.templates[0];
 			r ? (this.activeTemplateId = r.templateId, this.activeTemplateName = r.templateName, this.components = r.components) : (this.components = [], this.selectedId = void 0), this.selectedId = void 0;
@@ -312,7 +321,7 @@ var de = B("workspace", {
 });
 //#endregion
 //#region src/composables/useTranslation.ts
-function K() {
+function de() {
 	let e = f()?.appContext.config.globalProperties, t = e?.$t, n = typeof t == "function" ? t.bind(e) : void 0;
 	return (e, t) => {
 		let r = n?.(e);
@@ -1220,17 +1229,17 @@ var ar = "os-trinsic-observer", or = "os-theme-none", sr = "os-scrollbar", cr =
 	return [
 		() => Y(Ke, J(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 } = Ur(), { 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, W] = e("scrollbars.autoHideSuspend"), [ee] = e("scrollbars.autoHideDelay"), [te, ne] = e("scrollbars.dragScroll"), [re, G] = e("scrollbars.clickScroll"), [ie, ae] = e("overflow"), oe = v && !t, se = o || s || g || _ || t, ce = m || R || ae, le = T && b.x && b.y, ue = !S && !V, de = le || ue, K = (e, t, n) => {
+			let { nn: o, sn: s, en: m, cn: g } = a || {}, { Ct: _, ft: v } = n || {}, { B: y } = r, { M: b, P: S } = Ur(), { 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, W] = e("scrollbars.autoHideSuspend"), [ee] = e("scrollbars.autoHideDelay"), [G, te] = e("scrollbars.dragScroll"), [ne, K] = e("scrollbars.clickScroll"), [re, ie] = e("overflow"), ae = v && !t, oe = o || s || g || _ || t, se = m || R || ie, ce = T && b.x && b.y, le = !S && !V, ue = ce || le, de = (e, t, n) => {
 				let r = e.includes(ot) && (L === it || L === "auto" && t === ot);
 				return A(pr, r, n), r;
 			};
-			if (p = ee, (E || ue) && A(or, de), I && (A(d), A(D, !0), d = D), (W || oe) && (z(!U), oe && U && (w.x || w.y ? (f(), x((() => {
+			if (p = ee, (E || le) && A(or, ue), I && (A(d), A(D, !0), d = D), (W || ae) && (z(!U), ae && U && (w.x || w.y ? (f(), x((() => {
 				f = Z(O, ot, h(Y(z, !0)), { A: !0 });
-			}))) : z(!0))), H && (c = B === "move", l = B === "leave", u = B === "never", F(u, !0)), ne && A(xr, te), G && A(br, !!re), ce) {
-				let e = K(ie.x, C.x, !0), t = K(ie.y, C.y, !1);
+			}))) : z(!0))), H && (c = B === "move", l = B === "leave", u = B === "never", F(u, !0)), te && A(xr, G), K && A(br, !!ne), se) {
+				let e = de(re.x, C.x, !0), t = de(re.y, C.y, !1);
 				A(mr, !(e && t));
 			}
-			se && (M(), j(), P(), g && N(), A(gr, !w.x, !0), A(gr, !w.y, !1), A(cr, y && !k));
+			oe && (M(), j(), P(), g && N(), A(gr, !w.x, !0), A(gr, !w.y, !1), A(cr, y && !k));
 		},
 		{},
 		T
@@ -1269,7 +1278,7 @@ var ar = "os-trinsic-observer", or = "os-theme-none", sr = "os-scrollbar", cr =
 		B,
 		z,
 		R
-	].find(((e) => e && !P(e)))), ee = E ? R : H || V, te = Y(Ke, U);
+	].find(((e) => e && !P(e)))), ee = E ? R : H || V, G = Y(Ke, U);
 	return [
 		L,
 		() => {
@@ -1282,9 +1291,9 @@ var ar = "os-trinsic-observer", or = "os-theme-none", sr = "os-scrollbar", cr =
 			return wt(z, Wn, T ? "" : Gn), wt(B, er, ""), wt(V, Kn, ""), wt(H, tr, ""), T || (wt(V, a, o || "-1"), m && wt(g, Un, "")), Wt(ee, W), Wt(z, B), Wt(B || z, !T && V), Wt(V, H), J(U, [s, () => {
 				let e = Vt(), t = P(V), n = t && e === V ? R : e, s = i(n);
 				Tt(B, er), Tt(H, tr), Tt(V, Kn), m && Tt(g, Un), o ? wt(V, a, o) : Tt(V, a), P(H) && r(H), t && r(V), P(B) && r(B), On(n), s();
-			}]), n && !T && (Ot(V, Kn, Qn), J(U, Y(Tt, V, Kn))), On(!T && m && t === R && e.top === e ? V : t), s(), W = 0, te;
+			}]), n && !T && (Ot(V, Kn, Qn), J(U, Y(Tt, V, Kn))), On(!T && m && t === R && e.top === e ? V : t), s(), W = 0, G;
 		},
-		te
+		G
 	];
 }, ii = ({ ht: e }) => ({ Zt: t, fn: n, It: r }) => {
 	let { $t: i } = t || {}, { Ot: a } = n;
@@ -1422,39 +1431,39 @@ var ar = "os-trinsic-observer", or = "os-theme-none", sr = "os-scrollbar", cr =
 		o: wn()
 	}), R = In(Or), z = (e, t) => `${t ? qn : Jn}${st(e)}`;
 	return ({ Dt: o, Zt: s, fn: c, It: l }, { dn: h }) => {
-		let { _t: g, Ht: _, xt: v, Ct: z, ft: B, Et: V } = s || {}, { X: H, Y: U, W } = R && R.R(e, t, c, n, o) || {}, [ee, te] = Cr(o, n), [ne, re] = o("overflow"), G = wr(ne.x), ie = wr(ne.y), ae = g || h || v || z || V || te, oe = E(l), se = O(l), ce = A(l), le = N(l);
-		if (te && f && u(Qn, !ee), ae) {
+		let { _t: g, Ht: _, xt: v, Ct: z, ft: B, Et: V } = s || {}, { X: H, Y: U, W } = R && R.R(e, t, c, n, o) || {}, [ee, G] = Cr(o, n), [te, ne] = o("overflow"), K = wr(te.x), re = wr(te.y), ie = g || h || v || z || V || G, ae = E(l), oe = O(l), se = A(l), ce = N(l);
+		if (G && f && u(Qn, !ee), ie) {
 			At(r, Wn, Hn) && y(!0);
-			let e = U && U(), [t] = oe = T(l), [n] = se = D(l), i = dn(a), o = p && ln(d()), s = {
+			let e = U && U(), [t] = ae = T(l), [n] = oe = D(l), i = dn(a), o = p && ln(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(), le = M(c), ce = k(S(s, c), l);
+			e && e(), ce = M(c), se = k(S(s, c), l);
 		}
-		let [ue, de] = le, [K, fe] = ce, [pe, me] = se, [he, ge] = oe, [_e] = j({
-			x: K.w > 0,
-			y: K.h > 0
-		}), ve = G && ie && (_e.x || _e.y) || G && _e.x && !_e.y || ie && _e.y && !_e.x, ye = h || z || V || ge || me || de || fe || re || te || ae || _ && p, [be] = o("update.flowDirectionStyles"), [xe, Se] = F(be ? be(a) || {} : b(), l), [Ce, we] = z || B || Se || l ? I(x(xe, !!be), l) : L(), Te = C(_e, ne);
+		let [le, ue] = ce, [de, fe] = se, [pe, me] = oe, [he, ge] = ae, [_e] = j({
+			x: de.w > 0,
+			y: de.h > 0
+		}), ve = K && re && (_e.x || _e.y) || K && _e.x && !_e.y || re && _e.y && !_e.x, ye = h || z || V || ge || me || ue || fe || ne || G || ie || _ && p, [be] = o("update.flowDirectionStyles"), [xe, Se] = F(be ? be(a) || {} : b(), l), [Ce, we] = z || B || Se || l ? I(x(xe, !!be), l) : L(), Te = C(_e, te);
 		y(!1), ye && (w(Te), Te = Dr(a, _e), W && H && (H(Te, pe, he), tn(a, W(Te))));
 		let [Ee, De] = P(Te);
 		return kt(r, Wn, Hn, ve), kt(i, er, Hn, ve), X(t, {
 			rn: Ee,
 			Vt: {
-				x: ue.w,
-				y: ue.h
+				x: le.w,
+				y: le.h
 			},
 			Rt: {
-				x: K.w,
-				y: K.h
+				x: de.w,
+				y: de.h
 			},
 			j: _e,
-			Tt: Tn(Ce, K)
+			Tt: Tn(Ce, de)
 		}), {
 			en: De,
-			nn: de,
+			nn: ue,
 			sn: fe,
 			cn: we || fe
 		};
@@ -1887,7 +1896,7 @@ var mi = () => {
 	__name: "ComponenList",
 	emits: ["select"],
 	setup(t, { emit: n }) {
-		let i = n, a = K(), c = C(""), d = C(), f = {
+		let i = n, a = de(), c = C(""), d = C(), f = {
 			overflow: {
 				x: "hidden",
 				y: "scroll"
@@ -2166,7 +2175,7 @@ var mi = () => {
 		let c = r, l = C(!1), u = C(), d = C(), f = C(), p = C({
 			top: 0,
 			right: 0
-		}), h = K()("tooltip-sidebar-more", "More");
+		}), h = de()("tooltip-sidebar-more", "More");
 		function g() {
 			if (!d.value) return;
 			let e = d.value.getBoundingClientRect();
@@ -2247,7 +2256,7 @@ var mi = () => {
 		}
 	},
 	setup(e) {
-		let t = K();
+		let t = de();
 		return (n, r) => (x(), o("button", {
 			class: "save-button",
 			type: "button",
@@ -2263,6 +2272,7 @@ var mi = () => {
 		darkModeChangeable: { type: Boolean },
 		moreItems: {},
 		darkMode: { type: Boolean },
+		contentDarkMode: { type: Boolean },
 		translationsOpen: { type: Boolean },
 		themeOpen: { type: Boolean },
 		previewOpen: { type: Boolean }
@@ -2270,14 +2280,18 @@ var mi = () => {
 	emits: [
 		"moreSelect",
 		"toggleTheme",
+		"toggleContentTheme",
 		"toggleTranslations",
 		"toggleThemePanel",
 		"togglePreview"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, c = K();
-		return (t, l) => (x(), o("header", null, [
-			s("div", Bi, [l[5] ||= s("span", { class: "icon" }, "design_services", -1), s("span", Vi, A(M(c)("designer", "Designer")), 1)]),
+		let n = e, r = t, c = de();
+		function l() {
+			n.previewOpen ? r("toggleContentTheme") : r("toggleTheme");
+		}
+		return (t, d) => (x(), o("header", null, [
+			s("div", Bi, [d[4] ||= s("span", { class: "icon" }, "design_services", -1), s("span", Vi, A(M(c)("designer", "Designer")), 1)]),
 			s("div", Hi, [s("span", Ui, A(e.subject), 1), e.shared ? (x(), o("span", {
 				key: 0,
 				class: "shared icon",
@@ -2289,26 +2303,26 @@ var mi = () => {
 					icon: "translate",
 					title: M(c)("translations", "Translations"),
 					active: n.translationsOpen,
-					onClick: l[0] ||= (e) => r("toggleTranslations")
+					onClick: d[0] ||= (e) => r("toggleTranslations")
 				}, null, 8, ["title", "active"])),
 				n.previewOpen ? a("", !0) : (x(), i(Mi, {
 					key: 1,
 					icon: "format_paint",
 					title: M(c)("change-theme", "Change theme"),
 					active: n.themeOpen,
-					onClick: l[1] ||= (e) => r("toggleThemePanel")
+					onClick: d[1] ||= (e) => r("toggleThemePanel")
 				}, null, 8, ["title", "active"])),
 				n.previewOpen || n.darkModeChangeable !== !1 ? (x(), i(Mi, {
 					key: 2,
-					icon: n.darkMode ? "light_mode" : "dark_mode",
+					icon: (n.previewOpen ? n.contentDarkMode : n.darkMode) ? "light_mode" : "dark_mode",
 					title: M(c)("toggle-theme", "Toggle theme"),
-					onClick: l[2] ||= (e) => r("toggleTheme")
+					onClick: l
 				}, null, 8, ["icon", "title"])) : a("", !0),
 				u(Mi, {
 					icon: n.previewOpen ? "close" : "visibility",
 					title: M(c)(n.previewOpen ? "exit-preview" : "preview", n.previewOpen ? "Exit preview" : "Preview"),
 					active: n.previewOpen,
-					onClick: l[3] ||= (e) => r("togglePreview")
+					onClick: d[2] ||= (e) => r("togglePreview")
 				}, null, 8, [
 					"icon",
 					"title",
@@ -2320,12 +2334,12 @@ var mi = () => {
 				}),
 				u(Ii, {
 					items: n.moreItems,
-					onSelect: l[4] ||= (e) => r("moreSelect", e)
+					onSelect: d[3] ||= (e) => r("moreSelect", e)
 				}, null, 8, ["items"])
 			])
 		]));
 	}
-}), [["__scopeId", "data-v-2717e695"]]), qi = ["value"], Ji = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}), [["__scopeId", "data-v-009556cc"]]), qi = ["value"], Ji = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "ColorPicker",
 	props: {
 		value: {},
@@ -3540,7 +3554,7 @@ var So = /* @__PURE__ */ new Set([
 		"moveIntoLayer"
 	],
 	setup(t, { emit: n }) {
-		let c = t, u = n, d = H(), f = U(), p = K(), m = C(), g = C(), b = C(30), S = C(), T = !1, E = {
+		let c = t, u = n, d = H(), f = U(), p = de(), m = C(), g = C(), b = C(30), S = C(), T = !1, E = {
 			overflow: {
 				x: "auto",
 				y: "auto"
@@ -3602,7 +3616,7 @@ var So = /* @__PURE__ */ new Set([
 		function ee() {
 			T && (T = !1, document.body.style.removeProperty("cursor"), document.removeEventListener("pointermove", W), document.removeEventListener("pointerup", ee));
 		}
-		function te(e) {
+		function G(e) {
 			T = !0, document.body.style.cursor = "row-resize", document.addEventListener("pointermove", W), document.addEventListener("pointerup", ee), e.currentTarget.setPointerCapture?.(e.pointerId);
 		}
 		return y(() => {
@@ -3679,7 +3693,7 @@ var So = /* @__PURE__ */ new Set([
 					type: "button",
 					class: "layers-resizer",
 					"aria-label": "Resize properties and layers panels",
-					onPointerdown: te
+					onPointerdown: G
 				}, [...r[7] ||= [s("span", { "aria-hidden": "true" }, null, -1)]], 32),
 				s("div", {
 					class: "layers",
@@ -3717,62 +3731,17 @@ var So = /* @__PURE__ */ new Set([
 			], 512);
 		};
 	}
-}), [["__scopeId", "data-v-311a38bf"]]), Wo = {
-	key: 0,
-	class: "side-info"
-}, Go = { class: "info-title" }, Ko = 102, qo = /*#__PURE__*/ Q(/* @__PURE__ */ d({
-	__name: "SideInfo",
-	props: { items: {} },
-	setup(t) {
-		let n = t, c = K(), l = C(), u = C(0), d = r(() => (n.items?.length ?? 0) > 1 && u.value > Ko), f;
-		function p() {
-			u.value = l.value?.scrollHeight ?? 0;
-		}
-		return P(() => n.items, () => void m(p), { deep: !0 }), y(() => {
-			m(() => {
-				p(), f = new ResizeObserver(p), l.value && f.observe(l.value);
-			});
-		}), v(() => f?.disconnect()), (t, r) => n.items?.length ? (x(), o("section", Wo, [s("div", Go, A(M(c)("checklist", "Checklist")), 1), d.value ? (x(), i(M(gi), {
-			key: 0,
-			class: "info-list scrollable",
-			options: {
-				overflow: {
-					x: "hidden",
-					y: "scroll"
-				},
-				scrollbars: { autoHide: "never" }
-			},
-			defer: ""
-		}, {
-			default: I(() => [s("div", {
-				ref_key: "listElement",
-				ref: l
-			}, [(x(!0), o(e, null, w(n.items, (e) => (x(), o("div", {
-				key: e.id,
-				class: "info-row"
-			}, [s("span", { class: h(["info-dot", { complete: e.complete }]) }, null, 2), s("span", null, A(e.label), 1)]))), 128))], 512)]),
-			_: 1
-		})) : (x(), o("div", {
-			key: 1,
-			ref_key: "listElement",
-			ref: l,
-			class: "info-list"
-		}, [(x(!0), o(e, null, w(n.items, (e) => (x(), o("div", {
-			key: e.id,
-			class: "info-row"
-		}, [s("span", { class: h(["info-dot", { complete: e.complete }]) }, null, 2), s("span", null, A(e.label), 1)]))), 128))], 512))])) : a("", !0);
-	}
-}), [["__scopeId", "data-v-ee9b479a"]]), Jo = { class: "template-list" }, Yo = { class: "section-head" }, Xo = ["title"], Zo = ["aria-label", "title"], Qo = ["onClick"], $o = {
+}), [["__scopeId", "data-v-311a38bf"]]), Wo = { class: "template-list" }, Go = { class: "section-head" }, Ko = ["title"], qo = ["aria-label", "title"], Jo = ["onClick"], Yo = {
 	class: "tab-icon icon",
 	"aria-hidden": "true"
-}, es = ["onKeydown", "onBlur"], ts = { class: "tab-channel" }, ns = { class: "tab-version" }, rs = {
+}, Xo = ["onKeydown", "onBlur"], Zo = { class: "tab-channel" }, Qo = { class: "tab-version" }, $o = {
 	key: 2,
 	class: "tab-changed",
 	"aria-label": "Unsaved changes"
-}, is = {
+}, es = {
 	key: 0,
 	class: "empty-list"
-}, as = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}, ts = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "TemplateList",
 	props: {
 		templates: {},
@@ -3784,7 +3753,7 @@ var So = /* @__PURE__ */ new Set([
 		"select"
 	],
 	setup(t, { emit: n }) {
-		let r = t, c = n, d = K(), f = /* @__PURE__ */ new Map(), p = C(), g = C(""), _ = C();
+		let r = t, c = n, d = de(), f = /* @__PURE__ */ new Map(), p = C(), g = C(""), _ = C();
 		function v(e, t) {
 			t instanceof HTMLElement ? f.set(e, t) : f.delete(e);
 		}
@@ -3803,12 +3772,12 @@ var So = /* @__PURE__ */ new Set([
 		}
 		return P(() => r.focusedTemplateId, (e) => {
 			e && y(e);
-		}, { immediate: !0 }), (n, r) => (x(), o("section", Jo, [s("div", Yo, [s("span", { title: M(d)("screens", "Screens") }, A(M(d)("screens", "Screens")), 9, Xo), s("button", {
+		}, { immediate: !0 }), (n, r) => (x(), o("section", Wo, [s("div", Go, [s("span", { title: M(d)("screens", "Screens") }, A(M(d)("screens", "Screens")), 9, Ko), s("button", {
 			type: "button",
 			"aria-label": M(d)("add-screen", "Add screen"),
 			title: M(d)("add-screen", "Add screen"),
 			onClick: r[0] ||= (e) => c("add")
-		}, [...r[4] ||= [s("span", { "aria-hidden": "true" }, "+", -1)]], 8, Zo)]), u(M(gi), {
+		}, [...r[4] ||= [s("span", { "aria-hidden": "true" }, "+", -1)]], 8, qo)]), u(M(gi), {
 			class: "template-tabs",
 			options: {
 				overflow: {
@@ -3827,7 +3796,7 @@ var So = /* @__PURE__ */ new Set([
 				class: h(["template-tab", { active: t.focusedTemplateId ? e.id === t.focusedTemplateId : n === 0 }]),
 				onClick: (t) => c("select", e.id)
 			}, [
-				s("span", $o, A(e.icon), 1),
+				s("span", Yo, A(e.icon), 1),
 				p.value === e.id ? L((x(), o("input", {
 					key: 0,
 					ref_for: !0,
@@ -3840,7 +3809,7 @@ var So = /* @__PURE__ */ new Set([
 					onDblclick: r[3] ||= z(() => {}, ["stop"]),
 					onKeydown: [R(z((t) => S(e), ["prevent"]), ["enter"]), R(z(T, ["prevent"]), ["esc"])],
 					onBlur: (t) => S(e)
-				}, null, 40, es)), [[N, g.value]]) : (x(), i(vi, {
+				}, null, 40, Xo)), [[N, g.value]]) : (x(), i(vi, {
 					key: 1,
 					class: "tab-label",
 					onDblclick: z((t) => e.type === "dynamic" && b(e), ["stop"])
@@ -3848,20 +3817,20 @@ var So = /* @__PURE__ */ new Set([
 					default: I(() => [l(A(e.name), 1)]),
 					_: 2
 				}, 1032, ["onDblclick"])),
-				s("span", ts, A(e.channel.charAt(0).toUpperCase()), 1),
-				s("span", ns, A(e.version), 1),
-				e.changed ? (x(), o("span", rs)) : a("", !0)
-			], 10, Qo))), 128)), t.templates?.length ? a("", !0) : (x(), o("p", is, "No screens yet."))]),
+				s("span", Zo, A(e.channel.charAt(0).toUpperCase()), 1),
+				s("span", Qo, A(e.version), 1),
+				e.changed ? (x(), o("span", $o)) : a("", !0)
+			], 10, Jo))), 128)), t.templates?.length ? a("", !0) : (x(), o("p", es, "No screens yet."))]),
 			_: 1
 		})]));
 	}
-}), [["__scopeId", "data-v-927e0835"]]), os = {
+}), [["__scopeId", "data-v-927e0835"]]), ns = {
 	class: "theme-sidebar",
 	"aria-label": "Theme"
-}, ss = { class: "theme-header" }, cs = { class: "theme-heading" }, ls = ["title"], us = { class: "theme-body" }, ds = { class: "theme-toolbar" }, fs = { class: "theme-mode" }, ps = { class: "theme-mode-label" }, ms = { class: "theme-mode-buttons" }, hs = { class: "theme-search" }, gs = ["placeholder"], _s = { class: "theme-color-row theme-variable-row" }, vs = ["value", "aria-label"], ys = ["value", "onChange"], bs = ["value"], xs = {
+}, rs = { class: "theme-header" }, is = { class: "theme-heading" }, as = ["title"], os = { class: "theme-body" }, ss = { class: "theme-toolbar" }, cs = { class: "theme-mode" }, ls = { class: "theme-mode-label" }, us = { class: "theme-mode-buttons" }, ds = { class: "theme-search" }, fs = ["placeholder"], ps = { class: "theme-color-row theme-variable-row" }, ms = ["value", "aria-label"], hs = ["value", "onChange"], gs = ["value"], _s = {
 	key: 0,
 	class: "theme-empty"
-}, Ss = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}, vs = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "ThemeSidebar",
 	props: {
 		open: { type: Boolean },
@@ -3875,7 +3844,7 @@ var So = /* @__PURE__ */ new Set([
 		"mode"
 	],
 	setup(t, { emit: c }) {
-		let d = t, f = c, p = K(), m = U(), g = C({ ...d.colors }), _ = C(""), v = [
+		let d = t, f = c, p = de(), m = U(), g = C({ ...d.colors }), _ = C(""), v = [
 			{
 				key: "background",
 				title: "Background color",
@@ -4106,19 +4075,19 @@ var So = /* @__PURE__ */ new Set([
 				key: 0,
 				class: "theme-overlay",
 				onClick: c[4] ||= z((e) => f("close"), ["self"])
-			}, [s("aside", os, [s("div", ss, [
+			}, [s("aside", ns, [s("div", rs, [
 				c[5] ||= s("span", {
 					class: "theme-icon icon",
 					"aria-hidden": "true"
 				}, "palette", -1),
-				s("div", cs, [s("strong", null, A(M(p)("theme", "Theme")), 1), s("span", null, A(M(p)("theme-subtitle", "Colors used across every screen")), 1)]),
+				s("div", is, [s("strong", null, A(M(p)("theme", "Theme")), 1), s("span", null, A(M(p)("theme-subtitle", "Colors used across every screen")), 1)]),
 				s("button", {
 					type: "button",
 					class: "theme-close icon",
 					title: M(p)("close", "Close"),
 					onClick: c[0] ||= (e) => f("close")
-				}, "close", 8, ls)
-			]), s("div", us, [s("div", ds, [s("div", fs, [s("span", ps, A(M(p)("theme-mode", "Appearance")), 1), s("div", ms, [s("button", {
+				}, "close", 8, as)
+			]), s("div", os, [s("div", ss, [s("div", cs, [s("span", ls, A(M(p)("theme-mode", "Appearance")), 1), s("div", us, [s("button", {
 				type: "button",
 				class: h(["theme-mode-button", { active: !d.darkMode }]),
 				onClick: c[1] ||= (e) => f("mode", !1)
@@ -4132,7 +4101,7 @@ var So = /* @__PURE__ */ new Set([
 			}, [c[7] ||= s("span", {
 				class: "icon",
 				"aria-hidden": "true"
-			}, "dark_mode", -1), l(" " + A(M(p)("dark", "Dark")), 1)], 2)])]), s("label", hs, [c[8] ||= s("span", {
+			}, "dark_mode", -1), l(" " + A(M(p)("dark", "Dark")), 1)], 2)])]), s("label", ds, [c[8] ||= s("span", {
 				class: "icon",
 				"aria-hidden": "true"
 			}, "search", -1), L(s("input", {
@@ -4140,18 +4109,18 @@ var So = /* @__PURE__ */ new Set([
 				type: "search",
 				placeholder: M(p)("search-theme-variables", "Search variables"),
 				"aria-label": "Search theme variables"
-			}, null, 8, gs), [[N, _.value]])])]), (x(!0), o(e, null, w(b.value, (t) => (x(), o("div", {
+			}, null, 8, fs), [[N, _.value]])])]), (x(!0), o(e, null, w(b.value, (t) => (x(), o("div", {
 				key: t.key,
 				class: "theme-field"
 			}, [
 				s("span", null, A(E(t)), 1),
-				s("div", _s, [
+				s("div", ps, [
 					s("input", {
 						class: "theme-input theme-variable-input",
 						value: t.name,
 						readonly: "",
 						"aria-label": `${t.title} variable name`
-					}, null, 8, vs),
+					}, null, 8, ms),
 					t.type === "color" ? (x(), o(e, { key: 0 }, [u(Ji, {
 						value: T(t),
 						size: 32,
@@ -4160,41 +4129,41 @@ var So = /* @__PURE__ */ new Set([
 						class: "theme-input theme-hex-input",
 						value: T(t),
 						onChange: (e) => S(t.key, e.target.value)
-					}, null, 40, ys)], 64)) : a("", !0),
+					}, null, 40, hs)], 64)) : a("", !0),
 					t.type === "size" ? (x(), o("input", {
 						key: 1,
 						class: "theme-input theme-size-input",
 						value: T(t),
 						"aria-label": "Medium spacing value"
-					}, null, 8, bs)) : a("", !0)
+					}, null, 8, gs)) : a("", !0)
 				]),
-				b.value.length ? a("", !0) : (x(), o("div", xs, A(M(p)("no-theme-variables", "No matching variables")), 1))
+				b.value.length ? a("", !0) : (x(), o("div", _s, A(M(p)("no-theme-variables", "No matching variables")), 1))
 			]))), 128))])])])) : a("", !0)]),
 			_: 1
 		}));
 	}
-}), [["__scopeId", "data-v-5f7097ad"]]), Cs = {
+}), [["__scopeId", "data-v-5f7097ad"]]), ys = {
 	class: "translation-sidebar",
 	"aria-label": "Translations"
-}, ws = { class: "translation-header" }, Ts = { class: "translation-heading" }, Es = ["title"], Ds = { class: "translation-body" }, Os = { class: "translation-controls" }, ks = { class: "language-row" }, As = { class: "language-heading" }, js = ["disabled", "title"], Ms = {
+}, bs = { class: "translation-header" }, xs = { class: "translation-heading" }, Ss = ["title"], Cs = { class: "translation-body" }, ws = { class: "translation-controls" }, Ts = { class: "language-row" }, Es = { class: "language-heading" }, Ds = ["disabled", "title"], Os = {
 	key: 0,
 	class: "translate-spinner",
 	"aria-hidden": "true"
-}, Ns = { key: 1 }, Ps = [
+}, ks = { key: 1 }, As = [
 	"aria-keyshortcuts",
 	"onClick",
 	"onKeydown"
-], Fs = { class: "translation-search" }, Is = {
+], js = { class: "translation-search" }, Ms = {
 	key: 0,
 	class: "translation-fields"
-}, Ls = { class: "translation-field-heading" }, Rs = { class: "field-language" }, zs = { class: "field-path" }, Bs = [
+}, Ns = { class: "translation-field-heading" }, Ps = { class: "field-language" }, Fs = { class: "field-path" }, Is = [
 	"value",
 	"aria-label",
 	"onInput"
-], Vs = {
+], Ls = {
 	key: 1,
 	class: "translation-empty"
-}, Hs = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}, Rs = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "TranslationSidebar",
 	props: {
 		open: { type: Boolean },
@@ -4203,7 +4172,7 @@ var So = /* @__PURE__ */ new Set([
 	},
 	emits: ["close", "update"],
 	setup(t, { emit: c }) {
-		let l = t, d = c, f = K(), p = H(), g = C(["en"]), _ = C("en"), b = C(""), S = C(!1), T = C(""), E = C(!1), D = C(), O = C(), k = C(), j = C(), F = r(() => p.fields), B = r(() => {
+		let l = t, d = c, f = de(), p = H(), g = C(["en"]), _ = C("en"), b = C(""), S = C(!1), T = C(""), E = C(!1), D = C(), O = C(), k = C(), j = C(), F = r(() => p.fields), B = r(() => {
 			let e = b.value.trim().toLowerCase();
 			return e ? F.value.filter((t) => [
 				t.id,
@@ -4232,7 +4201,7 @@ var So = /* @__PURE__ */ new Set([
 			}
 			g.value.push(e), _.value = e, W();
 		}
-		function te(e) {
+		function G(e) {
 			if (e === "en") return;
 			let t = g.value.indexOf(e);
 			if (t !== -1) {
@@ -4243,20 +4212,20 @@ var So = /* @__PURE__ */ new Set([
 				g.value.splice(t, 1), D.value = void 0, _.value === e && (_.value = g.value[Math.max(0, t - 1)] ?? "en");
 			}
 		}
-		function ne() {
+		function te() {
 			E.value = !0, m(() => k.value?.focus());
 		}
-		function re(e) {
+		function ne(e) {
 			E.value && !O.value?.contains(e.target) && W(), j.value?.contains(e.target) || (D.value = void 0);
 		}
-		function G(e) {
+		function K(e) {
 			if (e.key === "Escape") {
 				D.value = void 0, E.value && W();
 				return;
 			}
-			!l.open || E.value || e.key !== "Delete" && e.key !== "Backspace" || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || te(_.value);
+			!l.open || E.value || e.key !== "Delete" && e.key !== "Backspace" || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || G(_.value);
 		}
-		async function ie() {
+		async function re() {
 			if (_.value === "en" || S.value || !F.value.length) return;
 			S.value = !0;
 			let e = F.value, t = e.map((e) => U(e, "en")).join("\n"), n = new URL("https://translate.googleapis.com/translate_a/single");
@@ -4276,36 +4245,36 @@ var So = /* @__PURE__ */ new Set([
 			}
 		}
 		return y(() => {
-			document.addEventListener("pointerdown", re), document.addEventListener("keydown", G);
+			document.addEventListener("pointerdown", ne), document.addEventListener("keydown", K);
 		}), v(() => {
-			document.removeEventListener("pointerdown", re), document.removeEventListener("keydown", G);
+			document.removeEventListener("pointerdown", ne), document.removeEventListener("keydown", K);
 		}), (r, c) => (x(), i(n, { name: "translation" }, {
 			default: I(() => [t.open ? (x(), o("div", {
 				key: 0,
 				class: "translation-overlay",
 				onClick: c[3] ||= z((e) => d("close"), ["self"])
-			}, [s("aside", Cs, [s("div", ws, [
+			}, [s("aside", ys, [s("div", bs, [
 				c[4] ||= s("span", {
 					class: "translation-icon icon",
 					"aria-hidden": "true"
 				}, "translate", -1),
-				s("div", Ts, [s("strong", null, A(M(f)("translations", "Translations")), 1), s("span", null, A(M(f)("translations-subtitle", "Translate this screen")), 1)]),
+				s("div", xs, [s("strong", null, A(M(f)("translations", "Translations")), 1), s("span", null, A(M(f)("translations-subtitle", "Translate this screen")), 1)]),
 				s("button", {
 					type: "button",
 					class: "translation-close icon",
 					title: M(f)("close", "Close"),
 					onClick: c[0] ||= (e) => d("close")
-				}, "close", 8, Es)
-			]), s("div", Ds, [s("div", Os, [s("div", ks, [s("div", As, [s("span", null, A(M(f)("language", "Language")), 1), s("button", {
+				}, "close", 8, Ss)
+			]), s("div", Cs, [s("div", ws, [s("div", Ts, [s("div", Es, [s("span", null, A(M(f)("language", "Language")), 1), s("button", {
 				type: "button",
 				class: "translate-labels-button",
 				disabled: _.value === "en" || S.value,
 				title: M(f)("auto-translate", "Auto-translate"),
-				onClick: ie
+				onClick: re
 			}, [c[5] ||= s("span", {
 				class: "icon",
 				"aria-hidden": "true"
-			}, "translate", -1), S.value ? (x(), o("span", Ms)) : (x(), o("span", Ns, A(M(f)("auto-translate", "Auto-translate")), 1))], 8, js)]), s("div", {
+			}, "translate", -1), S.value ? (x(), o("span", Os)) : (x(), o("span", ks, A(M(f)("auto-translate", "Auto-translate")), 1))], 8, Ds)]), s("div", {
 				ref_key: "languageChips",
 				ref: j,
 				class: "language-chips"
@@ -4320,8 +4289,8 @@ var So = /* @__PURE__ */ new Set([
 				onClick: (t) => {
 					_.value = e, D.value = void 0;
 				},
-				onKeydown: [R(z((t) => te(e), ["prevent"]), ["delete"]), R(z((t) => te(e), ["prevent"]), ["backspace"])]
-			}, A(e), 43, Ps))), 128)), E.value ? (x(), o("span", {
+				onKeydown: [R(z((t) => G(e), ["prevent"]), ["delete"]), R(z((t) => G(e), ["prevent"]), ["backspace"])]
+			}, A(e), 43, As))), 128)), E.value ? (x(), o("span", {
 				key: 0,
 				ref_key: "languageAdder",
 				ref: O,
@@ -4336,8 +4305,8 @@ var So = /* @__PURE__ */ new Set([
 				type: "button",
 				class: "add-language-button",
 				"aria-label": "Add language",
-				onClick: ne
-			}, "+"))], 512)]), s("div", Fs, [c[6] ||= s("span", {
+				onClick: te
+			}, "+"))], 512)]), s("div", js, [c[6] ||= s("span", {
 				class: "icon",
 				"aria-hidden": "true"
 			}, "search", -1), L(s("input", {
@@ -4356,20 +4325,20 @@ var So = /* @__PURE__ */ new Set([
 				},
 				defer: ""
 			}, {
-				default: I(() => [B.value.length ? (x(), o("div", Is, [(x(!0), o(e, null, w(B.value, (e) => (x(), o("div", {
+				default: I(() => [B.value.length ? (x(), o("div", Ms, [(x(!0), o(e, null, w(B.value, (e) => (x(), o("div", {
 					key: e.id,
 					class: "translation-field"
-				}, [s("div", Ls, [s("span", Rs, A(U(e, "en")), 1), s("span", zs, A(e.key ?? e.path), 1)]), s("input", {
+				}, [s("div", Ns, [s("span", Ps, A(U(e, "en")), 1), s("span", Fs, A(e.key ?? e.path), 1)]), s("input", {
 					value: U(e, _.value),
 					"aria-label": e.source,
 					onInput: (t) => d("update", e.id, t.target.value, _.value)
-				}, null, 40, Bs)]))), 128))])) : (x(), o("p", Vs, A(M(f)("no-translations", "No translatable fields are available for this screen.")), 1))]),
+				}, null, 40, Is)]))), 128))])) : (x(), o("p", Ls, A(M(f)("no-translations", "No translatable fields are available for this screen.")), 1))]),
 				_: 1
 			})])])])) : a("", !0)]),
 			_: 1
 		}));
 	}
-}), [["__scopeId", "data-v-19047d8f"]]), Us = B("templates", {
+}), [["__scopeId", "data-v-19047d8f"]]), zs = B("templates", {
 	state: () => ({
 		templates: [],
 		template: null
@@ -4401,13 +4370,13 @@ var So = /* @__PURE__ */ new Set([
 			this.templates = [], this.template = null;
 		}
 	}
-}), Ws = { class: "breadcrumb-label" }, Gs = {
+}), Bs = { class: "breadcrumb-label" }, Vs = {
 	class: "breadcrumb-template-icon icon",
 	"aria-hidden": "true"
-}, Ks = { class: "breadcrumb-selection" }, qs = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}, Hs = { class: "breadcrumb-selection" }, Us = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "Breadcrumb",
 	setup(t) {
-		let n = Us(), i = de();
+		let n = zs(), i = ue();
 		function c() {
 			i.deselect();
 		}
@@ -4426,8 +4395,8 @@ var So = /* @__PURE__ */ new Set([
 			let e = i.selectedComponent?.type;
 			return e ? l[e] ?? e.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (e) => e.toUpperCase()) : "";
 		}), d = r(() => n.template?.icon || "widgets");
-		return (t, n) => (x(), o("span", Ws, [
-			s("span", Gs, A(d.value), 1),
+		return (t, n) => (x(), o("span", Bs, [
+			s("span", Vs, A(d.value), 1),
 			s("button", {
 				type: "button",
 				class: "breadcrumb-template",
@@ -4436,13 +4405,13 @@ var So = /* @__PURE__ */ new Set([
 			u.value ? (x(), o(e, { key: 0 }, [n[0] ||= s("span", {
 				class: "breadcrumb-separator",
 				"aria-hidden": "true"
-			}, "/", -1), s("span", Ks, A(u.value), 1)], 64)) : a("", !0)
+			}, "/", -1), s("span", Hs, A(u.value), 1)], 64)) : a("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-cba8ee60"]]), Js = {
+}), [["__scopeId", "data-v-cba8ee60"]]), Ws = {
 	key: 0,
 	class: "renderer-components"
-}, Ys = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}, Gs = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "Renderer",
 	props: {
 		components: {},
@@ -4451,7 +4420,7 @@ var So = /* @__PURE__ */ new Set([
 	emits: ["select"],
 	setup(t, { emit: n }) {
 		let r = t, i = n;
-		return (t, n) => r.components.length ? (x(), o("div", Js, [(x(!0), o(e, null, w(r.components, (e, n) => T(t.$slots, "default", {
+		return (t, n) => r.components.length ? (x(), o("div", Ws, [(x(!0), o(e, null, w(r.components, (e, n) => T(t.$slots, "default", {
 			type: e.type,
 			props: e.props,
 			index: n,
@@ -4459,7 +4428,7 @@ var So = /* @__PURE__ */ new Set([
 			select: () => i("select", n)
 		}, void 0, !0, `${e.type}-${n}`)), 128))])) : a("", !0);
 	}
-}), [["__scopeId", "data-v-c70747fe"]]), Xs = ["data-component-id", "draggable"], Zs = { class: "component-content" }, Qs = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}), [["__scopeId", "data-v-c70747fe"]]), Ks = ["data-component-id", "draggable"], qs = { class: "component-content" }, Js = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "ComponentHandler",
 	props: {
 		type: {},
@@ -4491,12 +4460,12 @@ var So = /* @__PURE__ */ new Set([
 			draggable: !n.preview,
 			onDragstart: r[0] ||= z((t) => a("moveStart", e.id ?? "", t), ["stop"]),
 			onClick: u
-		}, [s("div", Zs, [(x(), i(O(M(bo)[e.type]), g(p(l.value)), {
+		}, [s("div", qs, [(x(), i(O(M(bo)[e.type]), g(p(l.value)), {
 			default: I(() => [T(t.$slots, "default", {}, void 0, !0)]),
 			_: 3
-		}, 16))])], 46, Xs));
+		}, 16))])], 46, Ks));
 	}
-}), [["__scopeId", "data-v-2e9fd141"]]), $s = ["data-component-id"], ec = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}), [["__scopeId", "data-v-2e9fd141"]]), Ys = ["data-component-id"], Xs = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "WorkspaceNode",
 	props: {
 		component: {},
@@ -4543,7 +4512,7 @@ var So = /* @__PURE__ */ new Set([
 				onDragover: y,
 				onDragleave: S,
 				onDrop: b
-			}, [u(Qs, {
+			}, [u(Js, {
 				type: t.component.type,
 				"component-props": {
 					...t.component.props.base,
@@ -4583,18 +4552,18 @@ var So = /* @__PURE__ */ new Set([
 				"id",
 				"selected",
 				"preview"
-			])], 46, $s);
+			])], 46, Ys);
 		};
 	}
-}), [["__scopeId", "data-v-b3970577"]]), tc = {
+}), [["__scopeId", "data-v-b3970577"]]), Zs = {
 	key: 1,
 	class: "composer-empty"
-}, nc = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}, Qs = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "Composer",
 	props: { preview: { type: Boolean } },
 	emits: ["componentDrop", "componentSelect"],
 	setup(e, { expose: t, emit: n }) {
-		let i = n, s = e, c = r(() => s.preview === !0), l = de(), d = K(), f = C(!1), p = C(), m = C(12), g = C(), b = C(), S = () => l.components;
+		let i = n, s = e, c = r(() => s.preview === !0), l = ue(), d = de(), f = C(!1), p = C(), m = C(12), g = C(), b = C(), S = () => l.components;
 		function w(e) {
 			if (s.preview) return;
 			let t = l.selectedId, n = t ? l.findComponent(t) : void 0;
@@ -4729,13 +4698,13 @@ var So = /* @__PURE__ */ new Set([
 				style: _({ top: `${m.value}px` }),
 				"aria-hidden": "true"
 			}, null, 4)) : a("", !0),
-			M(l).components.length ? a("", !0) : (x(), o("div", tc, A(M(d)("composer-empty", "Click or drag a component from the list to start building.")), 1)),
-			u(Ys, {
+			M(l).components.length ? a("", !0) : (x(), o("div", Zs, A(M(d)("composer-empty", "Click or drag a component from the list to start building.")), 1)),
+			u(Gs, {
 				components: S(),
 				"selected-index": M(l).selectedIndex,
 				onSelect: T
 			}, {
-				default: I(({ index: e }) => [u(ec, {
+				default: I(({ index: e }) => [u(Xs, {
 					component: M(l).components[e],
 					"selected-id": M(l).selectedId,
 					device: M(l).activeDevice,
@@ -4753,25 +4722,25 @@ var So = /* @__PURE__ */ new Set([
 			}, 8, ["components", "selected-index"])
 		], 34));
 	}
-}), [["__scopeId", "data-v-734e6e1c"]]), rc = {}, ic = { class: "desktop" }, ac = { class: "desktop-content" };
-function oc(e, t) {
-	return x(), o("div", ic, [t[0] ||= s("div", { class: "browser-bar" }, [
+}), [["__scopeId", "data-v-734e6e1c"]]), $s = {}, ec = { class: "desktop" }, tc = { class: "desktop-content" };
+function nc(e, t) {
+	return x(), o("div", ec, [t[0] ||= s("div", { class: "browser-bar" }, [
 		s("span"),
 		s("span"),
 		s("span"),
 		s("i")
-	], -1), s("div", ac, [T(e.$slots, "default", {}, void 0, !0)])]);
+	], -1), s("div", tc, [T(e.$slots, "default", {}, void 0, !0)])]);
 }
-var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]]), cc = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+var rc = /*#__PURE__*/ Q($s, [["render", nc], ["__scopeId", "data-v-ddbb2283"]]), ic = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "Device",
 	props: { mode: {} },
 	setup(e) {
 		return (t, n) => (x(), o("div", { class: h(["device", `device-${e.mode}`]) }, [T(t.$slots, "default", {}, void 0, !0)], 2));
 	}
-}), [["__scopeId", "data-v-fe85293d"]]), lc = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}), [["__scopeId", "data-v-fe85293d"]]), ac = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "Mobile",
 	setup(e) {
-		return (e, t) => (x(), i(cc, {
+		return (e, t) => (x(), i(ic, {
 			mode: "phone",
 			class: "mobile-device"
 		}, {
@@ -4779,10 +4748,10 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 			_: 3
 		}));
 	}
-}), [["__scopeId", "data-v-568d04d9"]]), uc = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}), [["__scopeId", "data-v-568d04d9"]]), oc = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "Tablet",
 	setup(e) {
-		return (e, t) => (x(), i(cc, {
+		return (e, t) => (x(), i(ic, {
 			mode: "tablet",
 			class: "tablet-device"
 		}, {
@@ -4790,11 +4759,11 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 			_: 3
 		}));
 	}
-}), [["__scopeId", "data-v-3cc52b8c"]]), dc = {
+}), [["__scopeId", "data-v-3cc52b8c"]]), sc = {
 	key: 0,
 	class: "debug-actions",
 	"aria-label": "Debug data"
-}, fc = ["disabled"], pc = ["disabled"], mc = { class: "canvas-actions" }, hc = { class: "zoom-controls" }, gc = ["disabled"], _c = ["disabled"], vc = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}, cc = ["disabled"], lc = ["disabled"], uc = { class: "canvas-actions" }, dc = { class: "zoom-controls" }, fc = ["disabled"], pc = ["disabled"], mc = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "ZoomController",
 	props: {
 		modelValue: {},
@@ -4807,102 +4776,110 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 		"center"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = de(), c = U(), l = C(!1), u = C(), d;
-		function f(e, t) {
+		let n = e, r = t, i = ue(), c = U(), l = H(), u = C(!1), d = C(), f;
+		function p(e, t) {
 			let n = e instanceof Error ? `${t}: ${e.message}` : t;
 			window.alert(n);
 		}
-		function p(e) {
+		function m(e) {
 			r("update:modelValue", Math.min(1.25, Math.max(.5, Number((n.modelValue + e).toFixed(2)))));
 		}
-		function m() {
+		function g() {
 			r("update:pan", !n.pan);
 		}
-		function g() {
+		function _() {
 			r("center");
 		}
-		async function _() {
-			l.value = !0;
+		async function y() {
+			u.value = !0;
 			try {
 				await navigator.clipboard.writeText(JSON.stringify({
 					workspace: i.exportData(),
-					theme: c.exportData()
-				}, null, 2)), b("copy");
+					theme: c.exportData(),
+					translations: l.exportData()
+				}, null, 2)), S("copy");
 			} catch (e) {
-				f(e, "Copy failed");
+				p(e, "Copy failed");
 			} finally {
-				l.value = !1;
+				u.value = !1;
 			}
 		}
-		async function y() {
-			l.value = !0;
+		async function b() {
+			u.value = !0;
 			try {
 				let e = JSON.parse(await navigator.clipboard.readText()), t = e && typeof e == "object" && "workspace" in e ? e : { workspace: e };
-				if (!ue(t.workspace)) {
-					f(void 0, "Paste failed: invalid workspace data");
+				if (!le(t.workspace)) {
+					p(void 0, "Paste failed: invalid workspace data");
 					return;
 				}
-				i.importData(t.workspace), t.theme && S(t.theme) && c.importData(t.theme), b("paste");
+				i.importData(t.workspace), t.theme && w(t.theme) && c.importData(t.theme), t.translations && T(t.translations) && l.importData(t.translations), S("paste");
 			} catch (e) {
-				f(e, "Paste failed");
+				p(e, "Paste failed");
 			} finally {
-				l.value = !1;
+				u.value = !1;
 			}
 		}
-		function b(e) {
-			u.value = e, d && clearTimeout(d), d = setTimeout(() => {
-				u.value = void 0;
+		function S(e) {
+			d.value = e, f && clearTimeout(f), f = setTimeout(() => {
+				d.value = void 0;
 			}, 2e3);
 		}
-		function S(e) {
+		function w(e) {
 			if (!e || typeof e != "object") return !1;
 			let t = e;
 			return Array.isArray(t.variables) && !!t.values && typeof t.values == "object";
 		}
+		function T(e) {
+			return Array.isArray(e) && e.every((e) => {
+				if (!e || typeof e != "object") return !1;
+				let t = e;
+				return typeof t.id == "string" && typeof t.key == "string" && typeof t.path == "string" && typeof t.source == "string" && !!t.translations && typeof t.translations == "object";
+			});
+		}
 		return v(() => {
-			d && clearTimeout(d);
+			f && clearTimeout(f);
 		}), (e, t) => (x(), o("div", {
 			class: "workspace-controls",
 			onPointerdown: t[2] ||= z(() => {}, ["stop"]),
 			onClick: t[3] ||= z(() => {}, ["stop"])
 		}, [
-			n.debug ? (x(), o("div", dc, [s("button", {
+			n.debug ? (x(), o("div", sc, [s("button", {
 				type: "button",
 				class: "zoom-button icon",
 				"aria-label": "Copy data",
 				title: "Copy workspace data as JSON",
-				disabled: l.value,
-				onClick: _
-			}, A(u.value === "copy" ? "check" : "content_copy"), 9, fc), s("button", {
+				disabled: u.value,
+				onClick: y
+			}, A(d.value === "copy" ? "check" : "content_copy"), 9, cc), s("button", {
 				type: "button",
 				class: "zoom-button icon",
 				"aria-label": "Paste data",
 				title: "Paste workspace data from JSON",
-				disabled: l.value,
-				onClick: y
-			}, A(u.value === "paste" ? "check" : "content_paste"), 9, pc)])) : a("", !0),
-			s("div", mc, [s("button", {
+				disabled: u.value,
+				onClick: b
+			}, A(d.value === "paste" ? "check" : "content_paste"), 9, lc)])) : a("", !0),
+			s("div", uc, [s("button", {
 				type: "button",
 				class: "zoom-button icon",
 				"aria-label": "Center canvas",
 				title: "Center canvas",
-				onClick: g
+				onClick: _
 			}, "center_focus_strong"), s("button", {
 				type: "button",
 				class: h(["zoom-button icon", { active: n.pan }]),
 				"aria-label": "Move canvas",
 				title: "Move canvas",
-				onClick: m
+				onClick: g
 			}, "pan_tool", 2)]),
-			s("div", hc, [
+			s("div", dc, [
 				s("button", {
 					type: "button",
 					class: "zoom-button icon",
 					"aria-label": "Zoom out",
 					title: "Zoom out",
 					disabled: n.modelValue <= .5,
-					onClick: t[0] ||= (e) => p(-.1)
-				}, "remove", 8, gc),
+					onClick: t[0] ||= (e) => m(-.1)
+				}, "remove", 8, fc),
 				s("span", null, A(Math.round(n.modelValue * 100)) + "%", 1),
 				s("button", {
 					type: "button",
@@ -4910,18 +4887,18 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 					"aria-label": "Zoom in",
 					title: "Zoom in",
 					disabled: n.modelValue >= 1.25,
-					onClick: t[1] ||= (e) => p(.1)
-				}, "add", 8, _c)
+					onClick: t[1] ||= (e) => m(.1)
+				}, "add", 8, pc)
 			])
 		], 32));
 	}
-}), [["__scopeId", "data-v-90115a19"]]), yc = {
+}), [["__scopeId", "data-v-19788344"]]), hc = {
 	key: 0,
 	class: "canvas-topbar"
-}, bc = { class: "breadcrumb" }, xc = {
+}, gc = { class: "breadcrumb" }, _c = {
 	key: 1,
 	class: "theme-controls"
-}, Sc = ["aria-label", "title"], Cc = { class: "device-switch" }, wc = { class: "canvas-frame-shell" }, Tc = "aham-ui-designer-device", Ec = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}, vc = ["aria-label", "title"], yc = { class: "device-switch" }, bc = { class: "canvas-frame-shell" }, xc = "aham-ui-designer-device", Sc = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "Workspace",
 	props: {
 		subject: {},
@@ -4940,10 +4917,10 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 			scrollLeft: 0,
 			scrollTop: 0
 		}), T = C(), E = C(0), D, k = {
-			phone: lc,
-			tablet: uc,
-			desktop: sc
-		}, j = C(), N = de(), F = U(), L = {
+			phone: ac,
+			tablet: oc,
+			desktop: rc
+		}, j = C(), N = ue(), F = U(), L = {
 			phone: 393,
 			tablet: 768,
 			desktop: 1920
@@ -4955,7 +4932,7 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 			let e = N.documentProps[N.activeTemplateId ?? "default"]?.[d.value] ?? {}, t = e.padding === void 0 ? 24 : Number(e.padding);
 			return {
 				width: String(e.width ?? "100%"),
-				...e.height ? { height: String(e.height) } : {},
+				height: String(e.height ?? "100%"),
 				minHeight: `${Number(e.minHeight ?? 640)}px`,
 				padding: `${Number.isFinite(t) ? t : 0}px`,
 				background: String(e.background ?? "var(--color-background, var(--designer-panel))"),
@@ -4999,34 +4976,34 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 			let t = e.target.closest("[data-overlayscrollbars-viewport]");
 			t && (t.scrollLeft = w.value.scrollLeft - (e.clientX - w.value.x), t.scrollTop = w.value.scrollTop - (e.clientY - w.value.y));
 		}
-		function te() {
+		function G() {
 			S.value = !1;
 		}
-		function ne() {
+		function te() {
 			let e = T.value?.querySelector("[data-overlayscrollbars-viewport]");
 			e && (e.scrollLeft = Math.max(0, (e.scrollWidth - e.clientWidth) / 2), e.scrollTop = Math.max(0, (e.scrollHeight - e.clientHeight) / 2));
 		}
-		function re(e) {
+		function ne(e) {
 			let t = e.target;
 			!c.preview && !t.closest(".component-handler") && N.selectDocument();
 		}
-		function G(e) {
+		function K(e) {
 			c.preview || e.target.closest(".canvas-frame") || N.deselect();
 		}
 		t({ addComponent: H });
-		function ie(e) {
+		function re(e) {
 			d.value = e, N.setActiveDevice(e), f.value = e === "desktop" ? .75 : 1;
 		}
 		return y(() => {
 			N.setActiveDevice(d.value), D = new ResizeObserver(([e]) => {
 				E.value = e.contentRect.width;
 			}), T.value && D.observe(T.value);
-			let e = localStorage.getItem(Tc);
+			let e = localStorage.getItem(xc);
 			(e === "phone" || e === "tablet" || e === "desktop") && (d.value = e, f.value = e === "desktop" ? .75 : 1), m(() => {
-				requestAnimationFrame(() => requestAnimationFrame(ne));
+				requestAnimationFrame(() => requestAnimationFrame(te));
 			});
 		}), v(() => D?.disconnect()), P(d, (e) => {
-			N.setActiveDevice(e), localStorage.setItem(Tc, e);
+			N.setActiveDevice(e), localStorage.setItem(xc, e);
 		}), P(() => c.templateId, (e) => {
 			N.setActiveTemplate(e, c.templateName ?? e);
 		}, { immediate: !0 }), P(() => c.templateName, (e) => {
@@ -5035,34 +5012,34 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 			ref_key: "canvasWrap",
 			ref: T,
 			class: h(["canvas-wrap", { preview: c.preview }])
-		}, [c.preview ? a("", !0) : (x(), o("div", yc, [
-			s("span", bc, [u(qs)]),
-			c.preview ? a("", !0) : (x(), i(vc, {
+		}, [c.preview ? a("", !0) : (x(), o("div", hc, [
+			s("span", gc, [u(Us)]),
+			c.preview ? a("", !0) : (x(), i(mc, {
 				key: 0,
 				modelValue: f.value,
 				"onUpdate:modelValue": t[0] ||= (e) => f.value = e,
 				pan: b.value,
 				"onUpdate:pan": t[1] ||= (e) => b.value = e,
 				debug: c.debug,
-				onCenter: ne
+				onCenter: te
 			}, null, 8, [
 				"modelValue",
 				"pan",
 				"debug"
 			])),
-			c.preview ? a("", !0) : (x(), o("div", xc, [s("button", {
+			c.preview ? a("", !0) : (x(), o("div", _c, [s("button", {
 				type: "button",
 				class: "theme-toggle icon",
 				"aria-label": c.contentDarkMode ? "Use light content theme" : "Use dark content theme",
 				title: c.contentDarkMode ? "Use light content theme" : "Use dark content theme",
 				onClick: t[2] ||= (e) => l("toggleContentTheme")
-			}, A(c.contentDarkMode ? "light_mode" : "dark_mode"), 9, Sc)])),
-			s("div", Cc, [
+			}, A(c.contentDarkMode ? "light_mode" : "dark_mode"), 9, vc)])),
+			s("div", yc, [
 				s("button", {
 					type: "button",
 					class: h(["device-button", { active: d.value === "phone" }]),
 					"aria-label": "Phone preview",
-					onClick: t[3] ||= (e) => ie("phone")
+					onClick: t[3] ||= (e) => re("phone")
 				}, [...t[6] ||= [s("span", {
 					class: "icon",
 					"aria-hidden": "true"
@@ -5071,7 +5048,7 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 					type: "button",
 					class: h(["device-button", { active: d.value === "tablet" }]),
 					"aria-label": "Tablet preview",
-					onClick: t[4] ||= (e) => ie("tablet")
+					onClick: t[4] ||= (e) => re("tablet")
 				}, [...t[7] ||= [s("span", {
 					class: "icon",
 					"aria-hidden": "true"
@@ -5080,7 +5057,7 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 					type: "button",
 					class: h(["device-button", { active: d.value === "desktop" }]),
 					"aria-label": "Desktop preview",
-					onClick: t[5] ||= (e) => ie("desktop")
+					onClick: t[5] ||= (e) => re("desktop")
 				}, [...t[8] ||= [s("span", {
 					class: "icon",
 					"aria-hidden": "true"
@@ -5092,14 +5069,14 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 			defer: "",
 			onPointerdownCapture: W,
 			onPointermoveCapture: ee,
-			onPointerupCapture: te,
-			onPointercancelCapture: te
+			onPointerupCapture: G,
+			onPointercancelCapture: G
 		}, {
 			default: I(() => [s("div", {
 				class: h(["canvas-stage", `stage-${d.value}`]),
 				style: _({ "--canvas-zoom": R.value }),
-				onClick: G
-			}, [s("div", wc, [s("div", {
+				onClick: K
+			}, [s("div", bc, [s("div", {
 				class: h(["canvas-frame", [
 					`device-${d.value}`,
 					d.value,
@@ -5107,12 +5084,12 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 				]]),
 				style: _({ transform: `scale(${R.value})` }),
 				onPointerdownCapture: W,
-				onClick: re
+				onClick: ne
 			}, [(x(), i(O(k[d.value]), g(p(d.value === "desktop" ? {} : void 0)), {
 				default: I(() => [s("div", {
 					class: "document-surface",
 					style: _(z.value)
-				}, [u(nc, {
+				}, [u(Qs, {
 					ref_key: "composer",
 					ref: j,
 					preview: c.preview,
@@ -5123,7 +5100,7 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 			_: 1
 		}, 8, ["class"])], 2));
 	}
-}), [["__scopeId", "data-v-0bbf9872"]]), Dc = ["data-theme", "data-theme-mode"], Oc = { class: "contents" }, kc = "aham-ui-designer-screens-height", Ac = "aham-ui-designer-theme", jc = "aham-ui-designer-content-theme", Mc = /*#__PURE__*/ Q(/* @__PURE__ */ d({
+}), [["__scopeId", "data-v-45d81c35"]]), Cc = ["data-theme", "data-theme-mode"], wc = { class: "contents" }, Tc = "aham-ui-designer-screens-height", Ec = "aham-ui-designer-theme", Dc = "aham-ui-designer-content-theme", Oc = /*#__PURE__*/ Q(/* @__PURE__ */ d({
 	__name: "Designer",
 	props: {
 		value: {},
@@ -5146,10 +5123,10 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 			violet: "#8b6fae",
 			amber: "#c9973f",
 			red: "#b8564a"
-		}), w = C("--color-background"), T = C(!1), E = H(), D = U(), O = de(), k = C(!1), A = "", j = C(), N = !1, F = r(() => n.options?.theme?.mode ?? "default"), I = r(() => ({
+		}), w = C("--color-background"), T = C(!1), E = H(), D = U(), O = ue(), k = C(!1), A = "", j = C(), N = !1, F, I = r(() => n.options?.theme?.mode ?? "default"), L = r(() => I.value === "custom" ? {} : {
 			...Object.fromEntries(D.variables.map((e) => [e.name, D.value(e, f.value)])),
 			...S.value.primary ? { "--color-primary": S.value.primary } : {}
-		})), L = r(() => {
+		}), R = r(() => {
 			let e = {
 				alert: {
 					label: "Alert",
@@ -5248,23 +5225,10 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 				depth: r
 			}, ...t(n.children ?? [], r + 1)]);
 			return t(O.components);
-		}), R = r(() => n.options?.checklist?.map((e) => ({
-			...e,
-			complete: e.check ? e.check({ templates: c.value }) : e.complete
-		})));
+		});
 		P(() => n.options?.templates, (e) => {
 			c.value = e ? [...e] : [], !l.value && c.value[0] && (l.value = c.value[0].id);
-		}, { immediate: !0 }), P(() => n.options?.translations, (e) => {
-			e && E.setItems(e);
-		}, { immediate: !0 }), P(() => n.options?.translationScreens, (e) => {
-			Object.entries(e ?? {}).forEach(([e, t]) => {
-				E.setScreenItems(e, t);
-			});
-		}), P(() => n.options?.translationComponents, (e) => {
-			Object.entries(e ?? {}).forEach(([e, t]) => {
-				E.setComponentItems(e, t);
-			});
-		});
+		}, { immediate: !0 });
 		function z() {
 			let e = c.value.filter((e) => e.icon === "view_column").length, t = `layout-${Date.now()}`, n = {
 				id: t,
@@ -5291,74 +5255,84 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 		function ee() {
 			f.value = !f.value;
 		}
-		function te() {
+		function G() {
 			p.value = !p.value;
 		}
-		function ne() {
+		function te() {
 			m.value = !m.value, m.value && (b.value = !1);
 		}
-		function re(e) {
+		function ne(e) {
 			g.value = e, m.value = !0, b.value = !1;
 		}
-		function G() {
+		function K() {
 			b.value = !b.value, b.value && (m.value = !1);
 		}
-		function ie() {
+		function re() {
 			T.value = !T.value, T.value && (m.value = !1, b.value = !1, O.deselect());
 		}
-		function ae(e, t) {
+		function ie(e, t) {
 			S.value[e] = t, e === "primary" && i("themeUpdate", t);
 		}
-		function oe(e) {
+		function ae(e) {
 			i("componentDrop", e);
 		}
-		function se(e) {
+		function oe(e) {
 			j.value?.addComponent(e);
 		}
-		function ce(e, t, n) {
+		function se(e, t, n) {
 			E.updateValue(e, t, n), i("translationUpdate", e, t, n);
 		}
-		function le() {
-			N && (N = !1, document.body.style.removeProperty("cursor"), document.removeEventListener("pointermove", K), document.removeEventListener("pointerup", le));
+		function ce() {
+			N && (N = !1, document.body.style.removeProperty("cursor"), document.removeEventListener("pointermove", de), document.removeEventListener("pointerup", ce));
 		}
-		function K(e) {
+		function de(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 fe(e) {
-			N = !0, document.body.style.cursor = "row-resize", document.addEventListener("pointermove", K), document.addEventListener("pointerup", le), e.currentTarget.setPointerCapture?.(e.pointerId);
+			N = !0, document.body.style.cursor = "row-resize", document.addEventListener("pointermove", de), document.addEventListener("pointerup", ce), e.currentTarget.setPointerCapture?.(e.pointerId);
 		}
 		return y(() => {
 			A = `aham-ui-designer-workspace:${window.location.href}`;
-			let e = Number(localStorage.getItem(kc));
-			Number.isFinite(e) && (d.value = Math.min(80, Math.max(20, e))), f.value = F.value === "default" && localStorage.getItem(Ac) === "dark", p.value = localStorage.getItem(jc) === "dark";
-			let t = localStorage.getItem(A);
-			if (t) try {
-				let e = JSON.parse(t);
-				ue(e) && O.importData(e);
+			let e = Number(localStorage.getItem(Tc));
+			Number.isFinite(e) && (d.value = Math.min(80, Math.max(20, e)));
+			let t = document.documentElement.dataset.theme;
+			f.value = t === "dark" || t !== "light" && localStorage.getItem(Ec) === "dark", p.value = localStorage.getItem(Dc) === "dark", F = new MutationObserver(() => {
+				let e = document.documentElement.dataset.theme;
+				(e === "dark" || e === "light") && (f.value = e === "dark");
+			}), F.observe(document.documentElement, {
+				attributes: !0,
+				attributeFilter: ["data-theme"]
+			});
+			let n = localStorage.getItem(A);
+			if (n) try {
+				let e = JSON.parse(n);
+				le(e) && O.importData(e);
 			} catch {
 				localStorage.removeItem(A);
 			}
 			k.value = !0;
 		}), P(d, (e) => {
-			localStorage.setItem(kc, String(e));
-		}), P([f, F], ([e, t]) => {
-			t === "default" && localStorage.setItem(Ac, e ? "dark" : "light");
+			localStorage.setItem(Tc, String(e));
+		}), P([f, I], ([e, t]) => {
+			t === "default" && localStorage.setItem(Ec, e ? "dark" : "light");
 		}), P(p, (e) => {
-			localStorage.setItem(jc, e ? "dark" : "light");
+			localStorage.setItem(Dc, e ? "dark" : "light");
 		}), P(() => O.$state, () => {
 			k.value && localStorage.setItem(A, JSON.stringify(O.exportData()));
-		}, { deep: !0 }), v(le), (t, r) => (x(), o("section", {
+		}, { deep: !0 }), v(() => {
+			ce(), F?.disconnect();
+		}), (t, r) => (x(), o("section", {
 			class: h(["ui-designer", { "preview-mode": T.value }]),
 			"data-theme": f.value ? "dark" : "light",
-			"data-theme-mode": F.value,
+			"data-theme-mode": I.value,
 			style: _({
 				"--designer-violet": S.value.violet,
 				"--designer-amber": S.value.amber,
 				"--designer-danger": S.value.red,
-				...I.value
+				...L.value
 			})
 		}, [
 			u(Ki, {
@@ -5366,33 +5340,36 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 				shared: e.options?.shared,
 				"dark-mode-changeable": e.options?.theme?.darkModeChangeable,
 				"dark-mode": f.value,
+				"content-dark-mode": p.value,
 				"translations-open": m.value,
 				"theme-open": b.value,
 				"preview-open": T.value,
 				"more-items": e.options?.moreItems,
 				onMoreSelect: W,
 				onToggleTheme: ee,
-				onToggleTranslations: ne,
-				onToggleThemePanel: G,
-				onTogglePreview: ie
+				onToggleContentTheme: G,
+				onToggleTranslations: te,
+				onToggleThemePanel: K,
+				onTogglePreview: re
 			}, null, 8, [
 				"subject",
 				"shared",
 				"dark-mode-changeable",
 				"dark-mode",
+				"content-dark-mode",
 				"translations-open",
 				"theme-open",
 				"preview-open",
 				"more-items"
 			]),
-			s("div", Oc, [
+			s("div", wc, [
 				s("aside", null, [s("div", {
 					ref_key: "sidebarPanels",
 					ref: a,
 					class: "sidebar-panels",
 					style: _({ "--screens-height": `${d.value}%` })
 				}, [
-					u(as, {
+					u(ts, {
 						templates: c.value,
 						"focused-template-id": l.value,
 						onAdd: z,
@@ -5405,9 +5382,9 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 						"aria-label": "Resize screens and components panels",
 						onPointerdown: fe
 					}, [...r[7] ||= [s("span", { "aria-hidden": "true" }, null, -1)]], 32),
-					u(ki, { onSelect: se })
-				], 4), u(qo, { items: R.value }, null, 8, ["items"])]),
-				u(Ec, {
+					u(ki, { onSelect: oe })
+				], 4)]),
+				u(Sc, {
 					ref_key: "workspace",
 					ref: j,
 					class: "workspace",
@@ -5418,8 +5395,8 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 					"content-primary": S.value.primary,
 					"template-id": l.value,
 					"template-name": c.value.find(({ id: e }) => e === l.value)?.name,
-					onComponentDrop: oe,
-					onToggleContentTheme: te
+					onComponentDrop: ae,
+					onToggleContentTheme: G
 				}, null, 8, [
 					"subject",
 					"preview",
@@ -5431,43 +5408,43 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 				]),
 				u(Uo, {
 					class: "properties",
-					layers: L.value,
+					layers: R.value,
 					"selected-component": M(O).selectedComponent,
 					"content-dark-mode": p.value,
 					onUpdateProps: r[0] ||= (e) => M(O).selectedComponent && M(O).updateComponentProps(M(O).selectedComponent.id, e),
 					onSelectLayer: r[1] ||= (e) => M(O).selectComponentById(e),
 					onReorderLayer: r[2] ||= (e, t) => M(O).moveComponentBefore(e, t),
 					onMoveIntoLayer: r[3] ||= (e, t) => M(O).moveComponentInto(e, t),
-					onFocusTranslation: re
+					onFocusTranslation: ne
 				}, null, 8, [
 					"layers",
 					"selected-component",
 					"content-dark-mode"
 				])
 			]),
-			u(Hs, {
+			u(Rs, {
 				open: m.value,
 				"focused-field-id": g.value,
 				onClose: r[4] ||= (e) => m.value = !1,
-				onUpdate: ce
+				onUpdate: se
 			}, null, 8, ["open", "focused-field-id"]),
-			u(Ss, {
+			u(vs, {
 				open: b.value,
 				colors: S.value,
-				"dark-mode": f.value,
+				"dark-mode": p.value,
 				"background-variable": w.value,
 				onClose: r[5] ||= (e) => b.value = !1,
-				onUpdate: ae,
-				onMode: r[6] ||= (e) => f.value = e
+				onUpdate: ie,
+				onMode: r[6] ||= (e) => p.value = e
 			}, null, 8, [
 				"open",
 				"colors",
 				"dark-mode",
 				"background-variable"
 			])
-		], 14, Dc));
+		], 14, Cc));
 	}
-}), [["__scopeId", "data-v-98d723ff"]]), Nc = B("checklist", {
+}), [["__scopeId", "data-v-92f98f16"]]), kc = B("checklist", {
 	state: () => ({ items: [{
 		id: "all-screens-completed",
 		label: "All screens completed",
@@ -5487,4 +5464,4 @@ var sc = /*#__PURE__*/ Q(rc, [["render", oc], ["__scopeId", "data-v-ddbb2283"]])
 	}
 });
 //#endregion
-export { oo as Alert, ma as Card, Wa as Checkbox, sa as Color, Ji as ColorPicker, Qs as ComponentHandler, nc as Composer, uo as ConsentCard, pa as Container, co as Content, Mc as Designer, sc as Desktop, cc as Device, va as Divider, go as Document, Da as EmailInput, Xa as Heading, io as Image, ya as Layout, Ca as LayoutRef, lc as Mobile, Va as OtpInput, La as PasswordInput, Ys as Renderer, po as ScopeList, qa as SocialButton, ha as Spacer, Ga as SubmitButton, uc as Tablet, Qa as Text, Ma as TextInput, Ya as TextLink, vi as TextScroller, Ss as ThemeSidebar, Nc as useChecklistStore, Us as useTemplatesStore, U as useThemeStore, H as useTranslationStore, de as useWorkspaceStore, $ as withEditable };
+export { oo as Alert, ma as Card, Wa as Checkbox, sa as Color, Ji as ColorPicker, Js as ComponentHandler, Qs as Composer, uo as ConsentCard, pa as Container, co as Content, Oc as Designer, rc as Desktop, ic as Device, va as Divider, go as Document, Da as EmailInput, Xa as Heading, io as Image, ya as Layout, Ca as LayoutRef, ac as Mobile, Va as OtpInput, La as PasswordInput, Gs as Renderer, po as ScopeList, qa as SocialButton, ha as Spacer, Ga as SubmitButton, oc as Tablet, Qa as Text, Ma as TextInput, Ya as TextLink, vi as TextScroller, vs as ThemeSidebar, kc as useChecklistStore, zs as useTemplatesStore, U as useThemeStore, H as useTranslationStore, ue as useWorkspaceStore, $ as withEditable };