@oneclick.dev/cms-core-modules 0.0.109 → 0.0.110

package/dist/GlobalStyling-CSQPF7o_.mjs

@@ -1,1162 +0,0 @@
-import { useConfirmation as e, useModuleBreadcrumbs as t, useModuleRoute as n, useModuleStorage as r } from "@oneclick.dev/cms-kit";
-import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeStyle as p, onMounted as m, openBlock as h, reactive as g, ref as _, renderList as v, resolveComponent as y, toDisplayString as b, unref as x, vModelText as S, withCtx as C, withDirectives as w } from "vue";
-import { ChevronLeft as T, Circle as E, CircleCheckBig as D, Plus as O } from "@lucide/vue";
-//#region src/contentManager/components/styling/SectionStyleDialog.vue?vue&type=script&setup=true&lang.ts
-var k = { class: "grid py-4" }, A = { class: "grid grid-cols-2 gap-2 mb-6" }, j = { class: "relative" }, M = { class: "grid grid-cols-3 gap-2 mb-6" }, N = { class: "relative" }, P = { class: "relative" }, F = { class: "relative" }, I = { class: "grid grid-cols-1 gap-2 mb-6" }, L = { class: "relative" }, R = { class: "flex items-center space-x-2" }, z = { class: "flex items-center space-x-2" }, B = { class: "grid grid-cols-2 gap-2 mb-6" }, V = { key: 0 }, H = { class: "relative" }, U = { key: 1 }, W = { class: "relative" }, G = {
-	key: 0,
-	class: "bg-muted px-4 py-2 rounded-md text-sm"
-}, K = /* @__PURE__ */ f({
-	__name: "SectionStyleDialog",
-	props: { buttons: {
-		type: Array,
-		default: () => []
-	} },
-	emits: [
-		"add",
-		"edit",
-		"delete"
-	],
-	setup(t, { expose: n, emit: r }) {
-		let { confirm: i } = e(), a = r, f = _(!1), p = _("create"), m = _(null), v = _(!1), x = g({
-			name: "",
-			rendering: "class",
-			className: "",
-			componentName: "",
-			styles: {
-				backgroundColor: "#FFFFFF",
-				titleColor: "#000000",
-				textColor: "#000000"
-			}
-		}), T = (e) => {
-			e ? (p.value = "edit", m.value = e.id, v.value = e.id === "DEFAULT", x.name = e.name || "", x.rendering = e.rendering || "class", x.className = e.className || "", x.componentName = e.componentName || "", x.styles.backgroundColor = e.styles.backgroundColor || "#FFFFFF", x.styles.titleColor = e.styles.titleColor || "#000000", x.styles.textColor = e.styles.textColor || "#000000") : (p.value = "create", m.value = null, v.value = !1, x.name = "", x.rendering = "class", x.className = "", x.componentName = "", x.styles.backgroundColor = "#FFFFFF", x.styles.titleColor = "#000000", x.styles.textColor = "#000000"), f.value = !0;
-		}, E = () => {
-			a("add", x), f.value = !1;
-		}, D = () => {
-			v.value && (x.name = "Default"), a("edit", {
-				id: m.value,
-				...x
-			}), f.value = !1;
-		}, O = async () => {
-			v.value || await i("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (a("delete", m.value), f.value = !1);
-		}, K = () => {
-			x.styles.backgroundColor = "#FFFFFF", x.styles.titleColor = "#000000", x.styles.textColor = "#000000";
-		};
-		return n({ openDialog: T }), (e, t) => {
-			let n = y("DialogTitle"), r = y("DialogDescription"), i = y("DialogHeader"), a = y("Label"), m = y("Input"), g = y("RadioGroupItem"), _ = y("RadioGroup"), T = y("Button"), q = y("DialogFooter"), J = y("DialogScrollContent"), Y = y("Dialog");
-			return h(), o(Y, {
-				open: f.value,
-				"onUpdate:open": t[10] ||= (e) => f.value = e
-			}, {
-				default: C(() => [d(J, { class: "sm:max-w-2xl" }, {
-					default: C(() => [
-						d(i, null, {
-							default: C(() => [d(n, null, {
-								default: C(() => [u(b(p.value === "create" ? "Add New Section Style" : "Edit Section Style"), 1)]),
-								_: 1
-							}), d(r, null, {
-								default: C(() => [...t[11] ||= [u(" These settings change how this section looks in the editor. To style your live site, add matching CSS or use a custom component. ", -1)]]),
-								_: 1
-							})]),
-							_: 1
-						}),
-						l("div", k, [
-							l("div", A, [l("div", null, [d(a, {
-								class: "mb-2",
-								for: "collection-theme-dialog-theme-name"
-							}, {
-								default: C(() => [...t[12] ||= [u("Display name", -1)]]),
-								_: 1
-							}), l("div", j, [d(m, {
-								modelValue: x.name,
-								"onUpdate:modelValue": t[0] ||= (e) => x.name = e,
-								id: "collection-theme-dialog-theme-name",
-								disabled: v.value
-							}, null, 8, ["modelValue", "disabled"])])])]),
-							t[21] ||= l("h2", { class: "font-semibold mb-4" }, "Style Settings", -1),
-							l("div", M, [
-								l("div", null, [d(a, {
-									class: "mb-2",
-									for: "collection-theme-dialog-background-color"
-								}, {
-									default: C(() => [...t[13] ||= [u("Background color", -1)]]),
-									_: 1
-								}), l("div", N, [w(l("input", {
-									"onUpdate:modelValue": t[1] ||= (e) => x.styles.backgroundColor = e,
-									type: "color",
-									label: "Primary Color",
-									class: "absolute top-0.5 left-1 size-8"
-								}, null, 512), [[S, x.styles.backgroundColor]]), d(m, {
-									modelValue: x.styles.backgroundColor,
-									"onUpdate:modelValue": t[2] ||= (e) => x.styles.backgroundColor = e,
-									class: "pl-12",
-									id: "collection-theme-dialog-background-color"
-								}, null, 8, ["modelValue"])])]),
-								l("div", null, [d(a, {
-									class: "mb-2",
-									for: "collection-theme-dialog-title-color"
-								}, {
-									default: C(() => [...t[14] ||= [u("Heading color", -1)]]),
-									_: 1
-								}), l("div", P, [w(l("input", {
-									"onUpdate:modelValue": t[3] ||= (e) => x.styles.titleColor = e,
-									type: "color",
-									label: "Primary Color",
-									class: "absolute top-0.5 left-1 size-8"
-								}, null, 512), [[S, x.styles.titleColor]]), d(m, {
-									modelValue: x.styles.titleColor,
-									"onUpdate:modelValue": t[4] ||= (e) => x.styles.titleColor = e,
-									class: "pl-12",
-									id: "collection-theme-dialog-title-color"
-								}, null, 8, ["modelValue"])])]),
-								l("div", null, [d(a, {
-									class: "mb-2",
-									for: "collection-theme-dialog-text-color"
-								}, {
-									default: C(() => [...t[15] ||= [u("Body text color", -1)]]),
-									_: 1
-								}), l("div", F, [w(l("input", {
-									"onUpdate:modelValue": t[5] ||= (e) => x.styles.textColor = e,
-									type: "color",
-									label: "Primary Color",
-									class: "absolute top-0.5 left-1 size-8"
-								}, null, 512), [[S, x.styles.textColor]]), d(m, {
-									modelValue: x.styles.textColor,
-									"onUpdate:modelValue": t[6] ||= (e) => x.styles.textColor = e,
-									class: "pl-12",
-									id: "collection-theme-dialog-text-color"
-								}, null, 8, ["modelValue"])])])
-							]),
-							t[22] ||= l("h2", { class: "font-semibold mb-4" }, "Rendering Method", -1),
-							l("div", I, [l("div", null, [l("div", L, [d(a, { class: "mb-4 text-muted-foreground" }, {
-								default: C(() => [...t[16] ||= [u("Choose how this section should be styled on your site:", -1)]]),
-								_: 1
-							}), d(_, {
-								modelValue: x.rendering,
-								"onUpdate:modelValue": t[7] ||= (e) => x.rendering = e,
-								"default-value": "class"
-							}, {
-								default: C(() => [l("div", R, [d(g, {
-									id: "collection-theme-dialog-render-class",
-									value: "class"
-								}), d(a, { for: "collection-theme-dialog-render-class" }, {
-									default: C(() => [...t[17] ||= [u("Use a CSS class", -1)]]),
-									_: 1
-								})]), l("div", z, [d(g, {
-									id: "collection-theme-dialog-render-component",
-									value: "component"
-								}), d(a, { for: "collection-theme-dialog-render-component" }, {
-									default: C(() => [...t[18] ||= [u("Custom component", -1)]]),
-									_: 1
-								})])]),
-								_: 1
-							}, 8, ["modelValue"])])])]),
-							l("div", B, [x.rendering === "class" ? (h(), c("div", V, [d(a, {
-								class: "mb-2",
-								for: "collection-theme-dialog-class-name"
-							}, {
-								default: C(() => [...t[19] ||= [u("Class name", -1)]]),
-								_: 1
-							}), l("div", H, [d(m, {
-								modelValue: x.className,
-								"onUpdate:modelValue": t[8] ||= (e) => x.className = e,
-								id: "collection-theme-dialog-class-name"
-							}, null, 8, ["modelValue"])])])) : (h(), c("div", U, [d(a, {
-								class: "mb-2",
-								for: "collection-theme-dialog-component-name"
-							}, {
-								default: C(() => [...t[20] ||= [u("Component name", -1)]]),
-								_: 1
-							}), l("div", W, [d(m, {
-								modelValue: x.componentName,
-								"onUpdate:modelValue": t[9] ||= (e) => x.componentName = e,
-								id: "collection-theme-dialog-component-name"
-							}, null, 8, ["modelValue"])])]))]),
-							x.rendering === "class" ? (h(), c("pre", G, "." + b(x.className) + " {\n  background-color: " + b(x.styles.backgroundColor) + ";\n  color: " + b(x.styles.textColor) + ";\n\n  h1, h2, h3, h4, h5, h6 {\n    color: " + b(x.styles.titleColor) + ";\n  }\n}\n", 1)) : s("", !0)
-						]),
-						d(q, null, {
-							default: C(() => [
-								p.value === "edit" && !v.value ? (h(), o(T, {
-									key: 0,
-									variant: "destructive",
-									class: "mr-auto",
-									onClick: O
-								}, {
-									default: C(() => [...t[23] ||= [u(" Delete Style ", -1)]]),
-									_: 1
-								})) : s("", !0),
-								p.value === "edit" && v.value ? (h(), o(T, {
-									key: 1,
-									variant: "outline",
-									class: "mr-auto",
-									onClick: K
-								}, {
-									default: C(() => [...t[24] ||= [u(" Reset to Default ", -1)]]),
-									_: 1
-								})) : s("", !0),
-								p.value === "create" ? (h(), o(T, {
-									key: 2,
-									type: "submit",
-									onClick: E
-								}, {
-									default: C(() => [...t[25] ||= [u(" Add Style ", -1)]]),
-									_: 1
-								})) : (h(), o(T, {
-									key: 3,
-									type: "submit",
-									onClick: D
-								}, {
-									default: C(() => [...t[26] ||= [u(" Save Changes ", -1)]]),
-									_: 1
-								}))
-							]),
-							_: 1
-						})
-					]),
-					_: 1
-				})]),
-				_: 1
-			}, 8, ["open"]);
-		};
-	}
-}), q = { class: "grid py-4" }, J = { class: "grid grid-cols-2 gap-2 mb-6" }, Y = { class: "relative" }, ee = { class: "grid grid-cols-3 gap-2 mb-6" }, te = { class: "relative" }, X = { class: "relative" }, Z = { class: "relative" }, Q = { class: "grid grid-cols-1 gap-2 mb-6" }, ne = { class: "relative" }, re = { class: "flex items-center space-x-2" }, ie = { class: "flex items-center space-x-2" }, ae = { class: "grid grid-cols-2 gap-2 mb-6" }, oe = { key: 0 }, se = { class: "relative" }, ce = { key: 1 }, le = { class: "relative" }, ue = {
-	key: 0,
-	class: "bg-muted px-4 py-2 rounded-md text-sm"
-}, de = /* @__PURE__ */ f({
-	__name: "ButtonStyleDialog",
-	props: { defaultBackground: {
-		type: String,
-		default: "#FFFFFF"
-	} },
-	emits: [
-		"add",
-		"edit",
-		"delete"
-	],
-	setup(t, { expose: n, emit: r }) {
-		let { confirm: i } = e(), f = r, m = _(!1), v = _("create"), T = _(null), O = _(!1), k = g({
-			name: "",
-			rendering: "class",
-			className: "",
-			componentName: "",
-			styles: {
-				backgroundColor: "#FFFFFF",
-				textColor: "#000000",
-				borderColor: "#000000",
-				buttonRoundness: "none",
-				buttonStyle: "default"
-			}
-		}), A = (e) => {
-			e ? (v.value = "edit", T.value = e.id, O.value = e.id === "DEFAULT", k.name = e.name || "", k.rendering = e.rendering || "class", k.className = e.className || "", k.componentName = e.componentName || "", k.styles.backgroundColor = e.styles.backgroundColor || "#FFFFFF", k.styles.textColor = e.styles.textColor || "#000000", k.styles.borderColor = e.styles.borderColor || "#000000", k.styles.buttonRoundness = e.styles.buttonRoundness || "none", k.styles.buttonStyle = e.styles.buttonStyle || "default") : (v.value = "create", T.value = null, O.value = !1, k.name = "", k.rendering = "class", k.className = "", k.componentName = "", k.styles.backgroundColor = "#FFFFFF", k.styles.textColor = "#000000", k.styles.borderColor = "#000000", k.styles.buttonRoundness = "none", k.styles.buttonStyle = "default"), m.value = !0;
-		}, j = () => {
-			f("add", k), m.value = !1;
-		}, M = () => {
-			O.value && (k.name = "Default"), f("edit", {
-				id: T.value,
-				...k
-			}), m.value = !1;
-		}, N = async () => {
-			O.value || await i("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (f("delete", T.value), m.value = !1);
-		}, P = () => {
-			k.styles.backgroundColor = "#FFFFFF", k.styles.textColor = "#000000", k.styles.borderColor = "#000000", k.styles.buttonRoundness = "none", k.styles.buttonStyle = "default";
-		}, F = (e) => {
-			switch (e) {
-				case "none": return 0;
-				case "small": return 8;
-				case "medium": return 12;
-				case "pill": return 99;
-				default: return 0;
-			}
-		}, I = a(() => {
-			let e = "." + k.className + " {\n";
-			return e += `  background-color: ${k.styles.backgroundColor};\n`, e += `  color: ${k.styles.textColor};\n`, k.styles.buttonStyle === "outline" ? e += `  border: 1px solid ${k.styles.borderColor};\n` : k.styles.buttonStyle === "shadow" ? e += "  box-shadow: 0 3px 6px #ccc;\n" : k.styles.buttonStyle === "retro" && (e += `  box-shadow: inset 0 0 0 2px ${k.styles.borderColor}, 2px 2px 0 ${k.styles.borderColor};\n`), k.styles.buttonRoundness !== "none" && (e += `  border-radius: ${F(k.styles.buttonRoundness)}px;\n`), e += "}\n", e;
-		});
-		return n({ openDialog: A }), (e, n) => {
-			let r = y("DialogTitle"), i = y("DialogDescription"), a = y("DialogHeader"), f = y("Label"), g = y("Input"), _ = y("RadioGroupItem"), T = y("RadioGroup"), A = y("Button"), L = y("DialogFooter"), R = y("DialogScrollContent"), z = y("Dialog");
-			return h(), o(z, {
-				open: m.value,
-				"onUpdate:open": n[18] ||= (e) => m.value = e
-			}, {
-				default: C(() => [d(R, { class: "sm:max-w-2xl" }, {
-					default: C(() => [
-						d(a, null, {
-							default: C(() => [d(r, null, {
-								default: C(() => [u(b(v.value === "create" ? "Add New Button Style" : "Edit Button Style"), 1)]),
-								_: 1
-							}), d(i, null, {
-								default: C(() => [...n[19] ||= [u(" These settings change how this section looks in the editor. To style your live site, add matching CSS or use a custom component. ", -1)]]),
-								_: 1
-							})]),
-							_: 1
-						}),
-						l("div", q, [
-							l("div", J, [l("div", null, [d(f, {
-								class: "mb-2",
-								for: "collection-theme-dialog-theme-name"
-							}, {
-								default: C(() => [...n[20] ||= [u("Display name", -1)]]),
-								_: 1
-							}), l("div", Y, [d(g, {
-								modelValue: k.name,
-								"onUpdate:modelValue": n[0] ||= (e) => k.name = e,
-								id: "collection-theme-dialog-theme-name",
-								disabled: O.value
-							}, null, 8, ["modelValue", "disabled"])])])]),
-							n[38] ||= l("h2", { class: "font-semibold mb-4" }, "Style Settings", -1),
-							l("div", ee, [
-								l("div", null, [d(f, {
-									class: "mb-2",
-									for: "collection-theme-dialog-background-color"
-								}, {
-									default: C(() => [...n[21] ||= [u("Background color", -1)]]),
-									_: 1
-								}), l("div", te, [w(l("input", {
-									"onUpdate:modelValue": n[1] ||= (e) => k.styles.backgroundColor = e,
-									type: "color",
-									label: "Primary Color",
-									class: "absolute top-0.5 left-1 size-8"
-								}, null, 512), [[S, k.styles.backgroundColor]]), d(g, {
-									modelValue: k.styles.backgroundColor,
-									"onUpdate:modelValue": n[2] ||= (e) => k.styles.backgroundColor = e,
-									class: "pl-12",
-									id: "collection-theme-dialog-background-color"
-								}, null, 8, ["modelValue"])])]),
-								l("div", null, [d(f, {
-									class: "mb-2",
-									for: "collection-theme-dialog-text-color"
-								}, {
-									default: C(() => [...n[22] ||= [u("Text color", -1)]]),
-									_: 1
-								}), l("div", X, [w(l("input", {
-									"onUpdate:modelValue": n[3] ||= (e) => k.styles.textColor = e,
-									type: "color",
-									label: "Primary Color",
-									class: "absolute top-0.5 left-1 size-8"
-								}, null, 512), [[S, k.styles.textColor]]), d(g, {
-									modelValue: k.styles.textColor,
-									"onUpdate:modelValue": n[4] ||= (e) => k.styles.textColor = e,
-									class: "pl-12",
-									id: "collection-theme-dialog-text-color"
-								}, null, 8, ["modelValue"])])]),
-								l("div", null, [d(f, {
-									class: "mb-2",
-									for: "collection-theme-dialog-border-color"
-								}, {
-									default: C(() => [...n[23] ||= [u("Border color", -1)]]),
-									_: 1
-								}), l("div", Z, [w(l("input", {
-									"onUpdate:modelValue": n[5] ||= (e) => k.styles.borderColor = e,
-									type: "color",
-									label: "Primary Color",
-									class: "absolute top-0.5 left-1 size-8"
-								}, null, 512), [[S, k.styles.borderColor]]), d(g, {
-									modelValue: k.styles.borderColor,
-									"onUpdate:modelValue": n[6] ||= (e) => k.styles.borderColor = e,
-									class: "pl-12",
-									id: "collection-theme-dialog-border-color"
-								}, null, 8, ["modelValue"])])])
-							]),
-							l("div", { style: p(`--button-background-color: ${k.styles.backgroundColor}; --button-text-color: ${k.styles.textColor}`) }, [
-								d(f, { class: "mb-4" }, {
-									default: C(() => [...n[24] ||= [u("Shape", -1)]]),
-									_: 1
-								}),
-								l("div", {
-									class: "grid grid-cols-4 gap-4 mb-6 p-2 rounded",
-									style: p({ backgroundColor: t.defaultBackground })
-								}, [
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[7] ||= (e) => k.styles.buttonRoundness = "none"
-									}, [n[25] ||= l("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)]" }, "Button", -1), k.styles.buttonRoundness === "none" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[8] ||= (e) => k.styles.buttonRoundness = "small"
-									}, [n[26] ||= l("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[8px]" }, "Button", -1), k.styles.buttonRoundness === "small" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[9] ||= (e) => k.styles.buttonRoundness = "medium"
-									}, [n[27] ||= l("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[12px]" }, "Button", -1), k.styles.buttonRoundness === "medium" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[10] ||= (e) => k.styles.buttonRoundness = "pill"
-									}, [n[28] ||= l("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[99px]" }, "Button", -1), k.styles.buttonRoundness === "pill" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))])
-								], 4),
-								d(f, { class: "mb-4" }, {
-									default: C(() => [...n[29] ||= [u("Style", -1)]]),
-									_: 1
-								}),
-								l("div", {
-									class: "grid grid-cols-4 gap-4 mb-6 p-2 rounded",
-									style: p(`--button-border-radius: ${F(k.styles.buttonRoundness)}px; --button-border-color: ${k.styles.borderColor}; background-color: ${t.defaultBackground}`)
-								}, [
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[11] ||= (e) => k.styles.buttonStyle = "default"
-									}, [n[30] ||= l("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)]" }, "Button", -1), k.styles.buttonStyle === "default" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[12] ||= (e) => k.styles.buttonStyle = "outline"
-									}, [n[31] ||= l("div", { class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)] border border-[var(--button-border-color)]" }, " Button ", -1), k.styles.buttonStyle === "outline" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[13] ||= (e) => k.styles.buttonStyle = "shadow"
-									}, [n[32] ||= l("div", {
-										class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)]",
-										style: { "box-shadow": "0 3px 6px #ccc" }
-									}, " Button ", -1), k.styles.buttonStyle === "shadow" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[14] ||= (e) => k.styles.buttonStyle = "retro"
-									}, [l("div", {
-										class: "text-center px-8 py-2 bg-[var(--button-background-color)] text-[var(--button-text-color)] rounded-[var(--button-border-radius)]",
-										style: p(`box-shadow: inset 0 0 0 2px ${k.styles.borderColor}, 2px 2px 0 ${k.styles.borderColor};`)
-									}, " Button ", 4), k.styles.buttonStyle === "retro" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))])
-								], 4)
-							], 4),
-							n[39] ||= l("h2", { class: "font-semibold mb-4" }, "Rendering Method", -1),
-							l("div", Q, [l("div", null, [l("div", ne, [d(f, { class: "mb-4 text-muted-foreground" }, {
-								default: C(() => [...n[33] ||= [u("Choose how this section should be styled on your site:", -1)]]),
-								_: 1
-							}), d(T, {
-								modelValue: k.rendering,
-								"onUpdate:modelValue": n[15] ||= (e) => k.rendering = e,
-								"default-value": "class"
-							}, {
-								default: C(() => [l("div", re, [d(_, {
-									id: "collection-theme-dialog-render-class",
-									value: "class"
-								}), d(f, { for: "collection-theme-dialog-render-class" }, {
-									default: C(() => [...n[34] ||= [u("Use a CSS class", -1)]]),
-									_: 1
-								})]), l("div", ie, [d(_, {
-									id: "collection-theme-dialog-render-component",
-									value: "component"
-								}), d(f, { for: "collection-theme-dialog-render-component" }, {
-									default: C(() => [...n[35] ||= [u("Custom component", -1)]]),
-									_: 1
-								})])]),
-								_: 1
-							}, 8, ["modelValue"])])])]),
-							l("div", ae, [k.rendering === "class" ? (h(), c("div", oe, [d(f, {
-								class: "mb-2",
-								for: "collection-theme-dialog-class-name"
-							}, {
-								default: C(() => [...n[36] ||= [u("Class name", -1)]]),
-								_: 1
-							}), l("div", se, [d(g, {
-								modelValue: k.className,
-								"onUpdate:modelValue": n[16] ||= (e) => k.className = e,
-								id: "collection-theme-dialog-class-name"
-							}, null, 8, ["modelValue"])])])) : (h(), c("div", ce, [d(f, {
-								class: "mb-2",
-								for: "collection-theme-dialog-component-name"
-							}, {
-								default: C(() => [...n[37] ||= [u("Component name", -1)]]),
-								_: 1
-							}), l("div", le, [d(g, {
-								modelValue: k.componentName,
-								"onUpdate:modelValue": n[17] ||= (e) => k.componentName = e,
-								id: "collection-theme-dialog-component-name"
-							}, null, 8, ["modelValue"])])]))]),
-							k.rendering === "class" ? (h(), c("pre", ue, b(I.value), 1)) : s("", !0)
-						]),
-						d(L, null, {
-							default: C(() => [
-								v.value === "edit" && !O.value ? (h(), o(A, {
-									key: 0,
-									variant: "destructive",
-									class: "mr-auto",
-									onClick: N
-								}, {
-									default: C(() => [...n[40] ||= [u(" Delete Style ", -1)]]),
-									_: 1
-								})) : s("", !0),
-								v.value === "edit" && O.value ? (h(), o(A, {
-									key: 1,
-									variant: "outline",
-									class: "mr-auto",
-									onClick: P
-								}, {
-									default: C(() => [...n[41] ||= [u(" Reset to Default ", -1)]]),
-									_: 1
-								})) : s("", !0),
-								v.value === "create" ? (h(), o(A, {
-									key: 2,
-									type: "submit",
-									onClick: j
-								}, {
-									default: C(() => [...n[42] ||= [u(" Add Style ", -1)]]),
-									_: 1
-								})) : (h(), o(A, {
-									key: 3,
-									type: "submit",
-									onClick: M
-								}, {
-									default: C(() => [...n[43] ||= [u(" Save Changes ", -1)]]),
-									_: 1
-								}))
-							]),
-							_: 1
-						})
-					]),
-					_: 1
-				})]),
-				_: 1
-			}, 8, ["open"]);
-		};
-	}
-}), fe = { class: "grid py-4" }, pe = { class: "grid grid-cols-2 gap-2 mb-6" }, me = { class: "relative" }, he = { class: "grid grid-cols-4 gap-2 mb-6" }, ge = { class: "relative" }, _e = { class: "relative" }, ve = { class: "relative" }, ye = { class: "relative" }, be = { class: "grid grid-cols-1 gap-2 mb-6" }, xe = { class: "relative" }, Se = { class: "flex items-center space-x-2" }, Ce = { class: "flex items-center space-x-2" }, we = { class: "grid grid-cols-2 gap-2 mb-6" }, Te = { key: 0 }, Ee = { class: "relative" }, De = { key: 1 }, Oe = { class: "relative" }, ke = {
-	key: 0,
-	class: "bg-muted px-4 py-2 rounded-md text-sm"
-}, Ae = /* @__PURE__ */ f({
-	__name: "CardStyleDialog",
-	props: { defaultBackground: {
-		type: String,
-		default: "#FFFFFF"
-	} },
-	emits: [
-		"add",
-		"edit",
-		"delete"
-	],
-	setup(t, { expose: n, emit: r }) {
-		let { confirm: i } = e(), f = r, m = _(!1), v = _("create"), T = _(null), O = _(!1), k = g({
-			name: "",
-			rendering: "class",
-			className: "",
-			componentName: "",
-			styles: {
-				backgroundColor: "#FFFFFF",
-				titleColor: "#000000",
-				textColor: "#000000",
-				borderColor: "#000000",
-				roundness: "none",
-				style: "default"
-			}
-		}), A = (e) => {
-			e ? (v.value = "edit", T.value = e.id, O.value = e.id === "DEFAULT", k.name = e.name || "", k.rendering = e.rendering || "class", k.className = e.className || "", k.componentName = e.componentName || "", k.styles.backgroundColor = e.styles.backgroundColor || "#FFFFFF", k.styles.titleColor = e.styles.titleColor || "#000000", k.styles.textColor = e.styles.textColor || "#000000", k.styles.borderColor = e.styles.borderColor || "#000000", k.styles.roundness = e.styles.roundness || "none", k.styles.style = e.styles.style || "default") : (v.value = "create", T.value = null, O.value = !1, k.name = "", k.rendering = "class", k.className = "", k.componentName = "", k.styles.backgroundColor = "#FFFFFF", k.styles.titleColor = "#000000", k.styles.textColor = "#000000", k.styles.borderColor = "#000000", k.styles.roundness = "none", k.styles.style = "default"), m.value = !0;
-		}, j = () => {
-			f("add", k), m.value = !1;
-		}, M = () => {
-			O.value && (k.name = "Default"), f("edit", {
-				id: T.value,
-				...k
-			}), m.value = !1;
-		}, N = async () => {
-			O.value || await i("Are you sure you want to delete this theme? This action cannot be undone.", "Delete Theme", "Delete") && (f("delete", T.value), m.value = !1);
-		}, P = () => {
-			k.styles.backgroundColor = "#FFFFFF", k.styles.titleColor = "#000000", k.styles.textColor = "#000000", k.styles.borderColor = "#000000", k.styles.roundness = "none", k.styles.style = "default";
-		}, F = (e) => {
-			switch (e) {
-				case "none": return 0;
-				case "small": return 8;
-				case "medium": return 12;
-				default: return 0;
-			}
-		}, I = a(() => {
-			let e = "." + k.className + " {\n";
-			return e += `  background-color: ${k.styles.backgroundColor};\n`, e += `  color: ${k.styles.textColor};\n`, k.styles.style === "outline" ? e += `  border: 1px solid ${k.styles.borderColor};\n` : k.styles.style === "shadow" ? e += "  box-shadow: 0 3px 6px #ccc;\n" : k.styles.style === "retro" && (e += `  box-shadow: inset 0 0 0 2px ${k.styles.borderColor}, 2px 2px 0 ${k.styles.borderColor};\n`), k.styles.roundness !== "none" && (e += `  border-radius: ${F(k.styles.roundness)}px;\n`), e += "}\n", e;
-		});
-		return n({ openDialog: A }), (e, n) => {
-			let r = y("DialogTitle"), i = y("DialogDescription"), a = y("DialogHeader"), f = y("Label"), g = y("Input"), _ = y("RadioGroupItem"), T = y("RadioGroup"), A = y("Button"), L = y("DialogFooter"), R = y("DialogScrollContent"), z = y("Dialog");
-			return h(), o(z, {
-				open: m.value,
-				"onUpdate:open": n[19] ||= (e) => m.value = e
-			}, {
-				default: C(() => [d(R, { class: "sm:max-w-2xl" }, {
-					default: C(() => [
-						d(a, null, {
-							default: C(() => [d(r, null, {
-								default: C(() => [u(b(v.value === "create" ? "Add New Card Style" : "Edit Card Style"), 1)]),
-								_: 1
-							}), d(i, null, {
-								default: C(() => [...n[20] ||= [u(" These settings change how this section looks in the editor. To style your live site, add matching CSS or use a custom component. ", -1)]]),
-								_: 1
-							})]),
-							_: 1
-						}),
-						l("div", fe, [
-							l("div", pe, [l("div", null, [d(f, {
-								class: "mb-2",
-								for: "collection-theme-dialog-theme-name"
-							}, {
-								default: C(() => [...n[21] ||= [u("Display name", -1)]]),
-								_: 1
-							}), l("div", me, [d(g, {
-								modelValue: k.name,
-								"onUpdate:modelValue": n[0] ||= (e) => k.name = e,
-								id: "collection-theme-dialog-theme-name",
-								disabled: O.value
-							}, null, 8, ["modelValue", "disabled"])])])]),
-							n[40] ||= l("h2", { class: "font-semibold mb-4" }, "Style Settings", -1),
-							l("div", he, [
-								l("div", null, [d(f, {
-									class: "mb-2",
-									for: "collection-theme-dialog-background-color"
-								}, {
-									default: C(() => [...n[22] ||= [u("Background color", -1)]]),
-									_: 1
-								}), l("div", ge, [w(l("input", {
-									"onUpdate:modelValue": n[1] ||= (e) => k.styles.backgroundColor = e,
-									type: "color",
-									label: "Background color",
-									class: "absolute top-0.5 left-1 size-8"
-								}, null, 512), [[S, k.styles.backgroundColor]]), d(g, {
-									modelValue: k.styles.backgroundColor,
-									"onUpdate:modelValue": n[2] ||= (e) => k.styles.backgroundColor = e,
-									class: "pl-12",
-									id: "collection-theme-dialog-background-color"
-								}, null, 8, ["modelValue"])])]),
-								l("div", null, [d(f, {
-									class: "mb-2",
-									for: "collection-theme-dialog-title-color"
-								}, {
-									default: C(() => [...n[23] ||= [u("Heading color", -1)]]),
-									_: 1
-								}), l("div", _e, [w(l("input", {
-									"onUpdate:modelValue": n[3] ||= (e) => k.styles.titleColor = e,
-									type: "color",
-									label: "Heading color",
-									class: "absolute top-0.5 left-1 size-8"
-								}, null, 512), [[S, k.styles.titleColor]]), d(g, {
-									modelValue: k.styles.titleColor,
-									"onUpdate:modelValue": n[4] ||= (e) => k.styles.titleColor = e,
-									class: "pl-12",
-									id: "collection-theme-dialog-title-color"
-								}, null, 8, ["modelValue"])])]),
-								l("div", null, [d(f, {
-									class: "mb-2",
-									for: "collection-theme-dialog-text-color"
-								}, {
-									default: C(() => [...n[24] ||= [u("Text color", -1)]]),
-									_: 1
-								}), l("div", ve, [w(l("input", {
-									"onUpdate:modelValue": n[5] ||= (e) => k.styles.textColor = e,
-									type: "color",
-									label: "Text color",
-									class: "absolute top-0.5 left-1 size-8"
-								}, null, 512), [[S, k.styles.textColor]]), d(g, {
-									modelValue: k.styles.textColor,
-									"onUpdate:modelValue": n[6] ||= (e) => k.styles.textColor = e,
-									class: "pl-12",
-									id: "collection-theme-dialog-text-color"
-								}, null, 8, ["modelValue"])])]),
-								l("div", null, [d(f, {
-									class: "mb-2",
-									for: "collection-theme-dialog-border-color"
-								}, {
-									default: C(() => [...n[25] ||= [u("Border color", -1)]]),
-									_: 1
-								}), l("div", ye, [w(l("input", {
-									"onUpdate:modelValue": n[7] ||= (e) => k.styles.borderColor = e,
-									type: "color",
-									label: "Border color",
-									class: "absolute top-0.5 left-1 size-8"
-								}, null, 512), [[S, k.styles.borderColor]]), d(g, {
-									modelValue: k.styles.borderColor,
-									"onUpdate:modelValue": n[8] ||= (e) => k.styles.borderColor = e,
-									class: "pl-12",
-									id: "collection-theme-dialog-border-color"
-								}, null, 8, ["modelValue"])])])
-							]),
-							l("div", { style: p(`--card-background-color: ${k.styles.backgroundColor}; --card-title-color: ${k.styles.titleColor}; --card-text-color: ${k.styles.textColor}`) }, [
-								d(f, { class: "mb-4" }, {
-									default: C(() => [...n[26] ||= [u("Shape", -1)]]),
-									_: 1
-								}),
-								l("div", {
-									class: "grid grid-cols-3 gap-4 mb-6 p-2 rounded",
-									style: p({ backgroundColor: t.defaultBackground })
-								}, [
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[9] ||= (e) => k.styles.roundness = "none"
-									}, [n[27] ||= l("div", { class: "text-center px-8 py-4 bg-[var(--card-background-color)]" }, [l("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"), l("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")], -1), k.styles.roundness === "none" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[10] ||= (e) => k.styles.roundness = "small"
-									}, [n[28] ||= l("div", { class: "text-center px-8 py-4 bg-[var(--card-background-color)] rounded-[8px]" }, [l("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"), l("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")], -1), k.styles.roundness === "small" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[11] ||= (e) => k.styles.roundness = "medium"
-									}, [n[29] ||= l("div", { class: "text-center px-8 py-4 bg-[var(--card-background-color)] rounded-[12px]" }, [l("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"), l("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")], -1), k.styles.roundness === "medium" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))])
-								], 4),
-								d(f, { class: "mb-4" }, {
-									default: C(() => [...n[30] ||= [u("Style", -1)]]),
-									_: 1
-								}),
-								l("div", {
-									class: "grid grid-cols-4 gap-4 mb-6 p-2 rounded",
-									style: p(`--card-border-radius: ${F(k.styles.roundness)}px; --card-border-color: ${k.styles.borderColor}; background-color: ${t.defaultBackground}`)
-								}, [
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[12] ||= (e) => k.styles.style = "default"
-									}, [n[31] ||= l("div", { class: "text-center px-8 py-4 bg-[var(--card-background-color)] rounded-[var(--card-border-radius)]" }, [l("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"), l("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")], -1), k.styles.style === "default" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[13] ||= (e) => k.styles.style = "outline"
-									}, [n[32] ||= l("div", { class: "text-center px-8 py-4 bg-[var(--card-background-color)] rounded-[var(--card-border-radius)] border border-[var(--card-border-color)]" }, [l("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"), l("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")], -1), k.styles.style === "outline" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[14] ||= (e) => k.styles.style = "shadow"
-									}, [n[33] ||= l("div", {
-										class: "text-center px-8 py-4 bg-[var(--card-background-color)] rounded-[var(--card-border-radius)]",
-										style: { "box-shadow": "0 3px 6px #ccc" }
-									}, [l("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card"), l("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.")], -1), k.styles.style === "shadow" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))]),
-									l("div", {
-										class: "flex flex-col gap-2 items-center cursor-pointer",
-										onClick: n[15] ||= (e) => k.styles.style = "retro"
-									}, [l("div", {
-										class: "text-center px-8 py-4 bg-[var(--card-background-color)] rounded-[var(--card-border-radius)]",
-										style: p(`box-shadow: inset 0 0 0 2px ${k.styles.borderColor}, 2px 2px 0 ${k.styles.borderColor};`)
-									}, [...n[34] ||= [l("strong", { class: "text-2xl text-[var(--card-title-color)]" }, "Card", -1), l("p", { class: "text-[var(--card-text-color)]" }, "Lorem ipsum dolor sit amet.", -1)]], 4), k.styles.style === "retro" ? (h(), o(x(D), {
-										key: 1,
-										class: "size-4 text-black"
-									})) : (h(), o(x(E), {
-										key: 0,
-										class: "size-4 text-black/30"
-									}))])
-								], 4)
-							], 4),
-							n[41] ||= l("h2", { class: "font-semibold mb-4" }, "Rendering Method", -1),
-							l("div", be, [l("div", null, [l("div", xe, [d(f, { class: "mb-4 text-muted-foreground" }, {
-								default: C(() => [...n[35] ||= [u("Choose how this section should be styled on your site:", -1)]]),
-								_: 1
-							}), d(T, {
-								modelValue: k.rendering,
-								"onUpdate:modelValue": n[16] ||= (e) => k.rendering = e,
-								"default-value": "class"
-							}, {
-								default: C(() => [l("div", Se, [d(_, {
-									id: "collection-theme-dialog-render-class",
-									value: "class"
-								}), d(f, { for: "collection-theme-dialog-render-class" }, {
-									default: C(() => [...n[36] ||= [u("Use a CSS class", -1)]]),
-									_: 1
-								})]), l("div", Ce, [d(_, {
-									id: "collection-theme-dialog-render-component",
-									value: "component"
-								}), d(f, { for: "collection-theme-dialog-render-component" }, {
-									default: C(() => [...n[37] ||= [u("Custom component", -1)]]),
-									_: 1
-								})])]),
-								_: 1
-							}, 8, ["modelValue"])])])]),
-							l("div", we, [k.rendering === "class" ? (h(), c("div", Te, [d(f, {
-								class: "mb-2",
-								for: "collection-theme-dialog-class-name"
-							}, {
-								default: C(() => [...n[38] ||= [u("Class name", -1)]]),
-								_: 1
-							}), l("div", Ee, [d(g, {
-								modelValue: k.className,
-								"onUpdate:modelValue": n[17] ||= (e) => k.className = e,
-								id: "collection-theme-dialog-class-name"
-							}, null, 8, ["modelValue"])])])) : (h(), c("div", De, [d(f, {
-								class: "mb-2",
-								for: "collection-theme-dialog-component-name"
-							}, {
-								default: C(() => [...n[39] ||= [u("Component name", -1)]]),
-								_: 1
-							}), l("div", Oe, [d(g, {
-								modelValue: k.componentName,
-								"onUpdate:modelValue": n[18] ||= (e) => k.componentName = e,
-								id: "collection-theme-dialog-component-name"
-							}, null, 8, ["modelValue"])])]))]),
-							k.rendering === "class" ? (h(), c("pre", ke, b(I.value), 1)) : s("", !0)
-						]),
-						d(L, null, {
-							default: C(() => [
-								v.value === "edit" && !O.value ? (h(), o(A, {
-									key: 0,
-									variant: "destructive",
-									class: "mr-auto",
-									onClick: N
-								}, {
-									default: C(() => [...n[42] ||= [u(" Delete Style ", -1)]]),
-									_: 1
-								})) : s("", !0),
-								v.value === "edit" && O.value ? (h(), o(A, {
-									key: 1,
-									variant: "outline",
-									class: "mr-auto",
-									onClick: P
-								}, {
-									default: C(() => [...n[43] ||= [u(" Reset to Default ", -1)]]),
-									_: 1
-								})) : s("", !0),
-								v.value === "create" ? (h(), o(A, {
-									key: 2,
-									type: "submit",
-									onClick: j
-								}, {
-									default: C(() => [...n[44] ||= [u(" Add Style ", -1)]]),
-									_: 1
-								})) : (h(), o(A, {
-									key: 3,
-									type: "submit",
-									onClick: M
-								}, {
-									default: C(() => [...n[45] ||= [u(" Save Changes ", -1)]]),
-									_: 1
-								}))
-							]),
-							_: 1
-						})
-					]),
-					_: 1
-				})]),
-				_: 1
-			}, 8, ["open"]);
-		};
-	}
-}), je = { class: "w-full" }, Me = { class: "flex items-center justify-between gap-4 w-full my-4" }, Ne = {
-	key: 0,
-	class: "flex gap-4 flex-wrap mb-8"
-}, Pe = ["onClick"], $ = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, Fe = {
-	key: 1,
-	class: "flex gap-4 flex-wrap mb-8"
-}, Ie = {
-	key: 2,
-	class: "flex gap-4 flex-wrap mb-8"
-}, Le = ["onClick"], Re = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, ze = {
-	key: 3,
-	class: "flex gap-4 flex-wrap mb-8"
-}, Be = {
-	key: 4,
-	class: "flex gap-4 flex-wrap mb-8"
-}, Ve = ["onClick"], He = { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, Ue = {
-	key: 5,
-	class: "flex gap-4 flex-wrap mb-8"
-}, We = /* @__PURE__ */ f({
-	__name: "GlobalStyling",
-	setup(e) {
-		let { navigateTo: o } = n(), { getModuleData: f, setModuleData: g } = r();
-		t(() => [{ text: "Global Styling" }]);
-		let S = _(""), w = _(""), E = _(""), D = _(null), k = _(null), A = _(null), j = a(() => D.value === null ? null : D.value && D.value.find((e) => e.id === "DEFAULT") ? D.value : [{
-			id: "DEFAULT",
-			name: "Default",
-			className: "",
-			styles: {
-				backgroundColor: "#FFFFFF",
-				textColor: "#000000"
-			}
-		}, ...D.value]), M = a(() => j.value?.find((e) => e.id === "DEFAULT")?.styles.backgroundColor ?? "#FFFFFF"), N = a(() => k.value === null ? null : k.value && k.value.find((e) => e.id === "DEFAULT") ? k.value : [{
-			id: "DEFAULT",
-			name: "Default",
-			className: "",
-			styles: {
-				backgroundColor: "#FFFFFF",
-				textColor: "#000000"
-			}
-		}, ...k.value]), P = a(() => A.value === null ? null : A.value && A.value.find((e) => e.id === "DEFAULT") ? A.value : [{
-			id: "DEFAULT",
-			name: "Default",
-			className: "",
-			styles: {
-				backgroundColor: "#FFFFFF",
-				textColor: "#000000"
-			}
-		}, ...A.value]);
-		async function F(e) {
-			let t = JSON.parse(JSON.stringify(e));
-			t.id = crypto.randomUUID(), D.value.push(t), D.value = await f("sectionThemes") || [], D.value.push(t), g("sectionThemes", D.value);
-		}
-		async function I(e) {
-			let t = JSON.parse(JSON.stringify(e)), n = D.value.findIndex((e) => e.id === t.id);
-			n === -1 ? t.id === "DEFAULT" && (Array.isArray(D.value) || (D.value = []), D.value = [{
-				id: "DEFAULT",
-				name: "Default",
-				styles: t.styles
-			}, ...D.value]) : D.value[n] = t, D.value = await f("sectionThemes") || [], n = D.value.findIndex((e) => e.id === t.id), n === -1 ? t.id === "DEFAULT" && (Array.isArray(D.value) || (D.value = []), D.value = [{
-				id: "DEFAULT",
-				name: "Default",
-				styles: t.styles
-			}, ...D.value], g("sectionThemes", D.value)) : (D.value[n] = t, g("sectionThemes", D.value));
-		}
-		async function L(e) {
-			D.value = D.value.filter((t) => t.id !== e), D.value = await f("sectionThemes") || [], D.value = D.value.filter((t) => t.id !== e), g("sectionThemes", D.value);
-		}
-		async function R(e) {
-			let t = JSON.parse(JSON.stringify(e));
-			t.id = crypto.randomUUID(), k.value.push(t), k.value = await f("buttonThemes") || [], k.value.push(t), g("buttonThemes", k.value);
-		}
-		async function z(e) {
-			let t = JSON.parse(JSON.stringify(e)), n = k.value.findIndex((e) => e.id === t.id);
-			n === -1 ? t.id === "DEFAULT" && (Array.isArray(k.value) || (k.value = []), k.value = [{
-				id: "DEFAULT",
-				name: "Default",
-				styles: t.styles
-			}, ...k.value]) : k.value[n] = t, k.value = await f("buttonThemes") || [], n = k.value.findIndex((e) => e.id === t.id), n === -1 ? t.id === "DEFAULT" && (Array.isArray(k.value) || (k.value = []), k.value = [{
-				id: "DEFAULT",
-				name: "Default",
-				styles: t.styles
-			}, ...k.value], g("buttonThemes", k.value)) : (k.value[n] = t, g("buttonThemes", k.value));
-		}
-		async function B(e) {
-			k.value = k.value.filter((t) => t.id !== e), k.value = await f("buttonThemes") || [], k.value = k.value.filter((t) => t.id !== e), g("buttonThemes", k.value);
-		}
-		let V = function(e) {
-			let t = {};
-			if (t.backgroundColor = e.styles.backgroundColor, t.color = e.styles.textColor, e.styles.buttonStyle === "outline" ? t.border = `1px solid ${e.styles.borderColor}` : e.styles.buttonStyle === "shadow" ? t.boxShadow = "0 3px 6px #ccc" : e.styles.buttonStyle === "retro" && (t.boxShadow = `inset 0 0 0 2px ${e.styles.borderColor}, 2px 2px 0 ${e.styles.borderColor}`), e.styles.buttonRoundness !== "none") {
-				let n = 0;
-				e.styles.buttonRoundness === "small" ? n = 4 : e.styles.buttonRoundness === "medium" ? n = 8 : e.styles.buttonRoundness === "pill" && (n = 9999), t.borderRadius = `${n}px`;
-			}
-			return t;
-		};
-		async function H(e) {
-			let t = JSON.parse(JSON.stringify(e));
-			t.id = crypto.randomUUID(), A.value.push(t), A.value = await f("cardThemes") || [], A.value.push(t), g("cardThemes", A.value);
-		}
-		async function U(e) {
-			let t = JSON.parse(JSON.stringify(e)), n = A.value.findIndex((e) => e.id === t.id);
-			n === -1 ? t.id === "DEFAULT" && (Array.isArray(A.value) || (A.value = []), A.value = [{
-				id: "DEFAULT",
-				name: "Default",
-				styles: t.styles
-			}, ...A.value]) : A.value[n] = t, A.value = await f("cardThemes") || [], n = A.value.findIndex((e) => e.id === t.id), n === -1 ? t.id === "DEFAULT" && (Array.isArray(A.value) || (A.value = []), A.value = [{
-				id: "DEFAULT",
-				name: "Default",
-				styles: t.styles
-			}, ...A.value], g("cardThemes", A.value)) : (A.value[n] = t, g("cardThemes", A.value));
-		}
-		async function W(e) {
-			A.value = A.value.filter((t) => t.id !== e), A.value = await f("cardThemes") || [], A.value = A.value.filter((t) => t.id !== e), g("cardThemes", A.value);
-		}
-		let G = function(e) {
-			let t = {};
-			if (t.backgroundColor = e.styles.backgroundColor, t.color = e.styles.textColor, e.styles.style === "outline" ? t.border = `1px solid ${e.styles.borderColor}` : e.styles.style === "shadow" ? t.boxShadow = "0 3px 6px #ccc" : e.styles.style === "retro" && (t.boxShadow = `inset 0 0 0 2px ${e.styles.borderColor}, 2px 2px 0 ${e.styles.borderColor}`), e.styles.roundness !== "none") {
-				let n = 0;
-				e.styles.roundness === "small" ? n = 4 : e.styles.roundness === "medium" && (n = 8), t.borderRadius = `${n}px`;
-			}
-			return t;
-		};
-		return m(() => {
-			f("sectionThemes").then((e) => {
-				D.value = e || [];
-			}), f("buttonThemes").then((e) => {
-				k.value = e || [];
-			}), f("cardThemes").then((e) => {
-				A.value = e || [];
-			});
-		}), (e, t) => {
-			let n = y("Button"), r = y("Skeleton");
-			return h(), c(i, null, [
-				l("div", je, [
-					l("div", Me, [d(n, {
-						onClick: t[0] ||= (e) => x(o)("/"),
-						variant: "link",
-						class: "!pl-0"
-					}, {
-						default: C(() => [d(x(T), { class: "size-4" }), t[4] ||= u(" Collections ", -1)]),
-						_: 1
-					})]),
-					t[10] ||= l("h1", { class: "text-3xl mb-8" }, "Global Styling", -1),
-					t[11] ||= l("h3", { class: "text-2xl mb-2" }, "Section Variants", -1),
-					t[12] ||= l("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Set up the default design variants for your sections. These styles will be available across all collections by default, but you can choose to disable them within individual collections if needed. ", -1),
-					j.value === null ? (h(), c("div", Fe, [d(r, { class: "size-44 rounded-md" }), d(r, { class: "size-44 rounded-md" })])) : (h(), c("div", Ne, [l("div", {
-						class: "group/item flex flex-col gap-2 items-center",
-						onClick: t[1] ||= (e) => S.value.openDialog()
-					}, [d(n, {
-						variant: "outline",
-						class: "size-44 border-dotted",
-						tabindex: "-1"
-					}, {
-						default: C(() => [d(x(O), { class: "size-14" })]),
-						_: 1
-					}), t[5] ||= l("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1)]), (h(!0), c(i, null, v(j.value, (e) => (h(), c("div", {
-						class: "group/item flex flex-col gap-2 text-black items-center cursor-pointer hover:brightness-105 transition-all duration-300",
-						key: e.id,
-						onClick: (t) => S.value.openDialog(e)
-					}, [l("div", {
-						class: "flex flex-col items-start rounded-md p-4 size-44",
-						style: p({
-							backgroundColor: e.styles.backgroundColor,
-							border: "1px solid #E5E7EB"
-						})
-					}, [
-						l("strong", {
-							class: "text-2xl",
-							style: p({ color: e.styles.titleColor })
-						}, "Title", 4),
-						l("p", {
-							class: "mb-1",
-							style: p({ color: e.styles.textColor })
-						}, [...t[6] ||= [
-							u("Lorem ipsum dolor", -1),
-							l("br", null, null, -1),
-							u("sit amet.", -1)
-						]], 4),
-						e.className ? (h(), c("p", {
-							key: 0,
-							class: "px-3 py-1.5 rounded-[99px]",
-							style: p({
-								backgroundColor: e.styles.textColor,
-								color: e.styles.backgroundColor
-							})
-						}, "." + b(e.className), 5)) : s("", !0)
-					], 4), l("p", $, b(e.name), 1)], 8, Pe))), 128))])),
-					t[13] ||= l("h3", { class: "text-2xl mb-2" }, "Button Variants", -1),
-					t[14] ||= l("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Define your standard button styles here. Collections can inherit these defaults or customize their own variants for more tailored experiences. ", -1),
-					N.value === null ? (h(), c("div", ze, [d(r, { class: "size-44 rounded-md" }), d(r, { class: "size-44 rounded-md" })])) : (h(), c("div", Ie, [l("div", {
-						class: "group/item flex flex-col gap-2 items-center",
-						onClick: t[2] ||= (e) => w.value.openDialog()
-					}, [d(n, {
-						variant: "outline",
-						class: "size-44 border-dotted",
-						tabindex: "-1"
-					}, {
-						default: C(() => [d(x(O), { class: "size-14" })]),
-						_: 1
-					}), t[7] ||= l("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1)]), (h(!0), c(i, null, v(N.value, (e) => (h(), c("div", {
-						class: "group/item flex flex-col gap-2 text-black items-center cursor-pointer hover:brightness-105 transition-all duration-300",
-						key: e.id,
-						onClick: (t) => w.value.openDialog(e)
-					}, [l("div", {
-						class: "flex flex-col items-center justify-center rounded-md p-4 size-44",
-						style: p({ backgroundColor: M.value })
-					}, [l("div", {
-						style: p(V(e)),
-						class: "px-4 py-2"
-					}, " Button ", 4)], 4), l("p", Re, b(e.name), 1)], 8, Le))), 128))])),
-					t[15] ||= l("h3", { class: "text-2xl mb-2" }, "Card Variants", -1),
-					t[16] ||= l("p", { class: "mb-6 max-w-3xl text-muted-foreground" }, " Define your standard card styles here. Collections can inherit these defaults or customize their own variants for more tailored experiences. ", -1),
-					P.value === null ? (h(), c("div", Ue, [d(r, { class: "size-44 rounded-md" }), d(r, { class: "size-44 rounded-md" })])) : (h(), c("div", Be, [l("div", {
-						class: "group/item flex flex-col gap-2 items-center",
-						onClick: t[3] ||= (e) => E.value.openDialog()
-					}, [d(n, {
-						variant: "outline",
-						class: "size-44 border-dotted",
-						tabindex: "-1"
-					}, {
-						default: C(() => [d(x(O), { class: "size-14" })]),
-						_: 1
-					}), t[8] ||= l("p", { class: "text-muted-foreground group-hover/item:text-white transition-colors duration-300" }, "New Style", -1)]), (h(!0), c(i, null, v(P.value, (e) => (h(), c("div", {
-						class: "group/item flex flex-col gap-2 text-black items-center cursor-pointer hover:brightness-105 transition-all duration-300",
-						key: e.id,
-						onClick: (t) => E.value.openDialog(e)
-					}, [l("div", {
-						class: "flex flex-col items-center justify-center rounded-md p-4 size-44",
-						style: p({ backgroundColor: M.value })
-					}, [l("div", {
-						style: p(G(e)),
-						class: "p-4"
-					}, [l("strong", {
-						class: "text-2xl",
-						style: p({ color: e.styles.titleColor })
-					}, "Card", 4), t[9] ||= l("p", null, "Lorem ipsum dolor sit amet.", -1)], 4)], 4), l("p", He, b(e.name), 1)], 8, Ve))), 128))]))
-				]),
-				d(K, {
-					ref_key: "sectionStyleDialog",
-					ref: S,
-					onAdd: F,
-					onEdit: I,
-					onDelete: L
-				}, null, 512),
-				d(de, {
-					ref_key: "buttonStyleDialog",
-					ref: w,
-					defaultBackground: M.value,
-					onAdd: R,
-					onEdit: z,
-					onDelete: B
-				}, null, 8, ["defaultBackground"]),
-				d(Ae, {
-					ref_key: "cardStyleDialog",
-					ref: E,
-					defaultBackground: M.value,
-					onAdd: H,
-					onEdit: U,
-					onDelete: W
-				}, null, 8, ["defaultBackground"])
-			], 64);
-		};
-	}
-});
-//#endregion
-export { We as default };