@oneclick.dev/cms-core-modules 0.0.54 → 0.0.55

package/dist/GlobalStyling-BLQ_1W2y.mjs

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