@oneclick.dev/cms-core-modules 0.0.106 → 0.0.108

package/dist/GlobalStyling-CSQPF7o_.mjs

@@ -0,0 +1,1162 @@
+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 };