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

package/dist/GlobalStyling-DoLHUJeV.mjs

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