@oneclick.dev/cms-core-modules 0.0.105 → 0.0.107

package/dist/GlobalStyling-C9VthHWK.mjs

@@ -1,1588 +0,0 @@
-import { defineComponent as X, ref as w, reactive as h, resolveComponent as f, openBlock as a, createBlock as p, withCtx as n, createVNode as s, createTextVNode as m, toDisplayString as R, createElementVNode as t, withDirectives as I, vModelText as O, createElementBlock as F, createCommentVNode as G, 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
-};