@capsuletech/web-style 0.1.0

package/dist/editor.mjs

@@ -0,0 +1,549 @@
+import { delegateEvents as $, insert as r, createComponent as a, template as c, effect as x, setAttribute as y, classList as p, setStyleProperty as C, memo as L, use as E } from "solid-js/web";
+import { createSignal as k, Show as S, For as v, createMemo as O, createEffect as R } from "solid-js";
+import { Check as w, Copy as M, Sun as A, Moon as N, SunMoon as I, Palette as G, Spline as H, Ruler as U, Type as D, Mail as j, Lock as K, ArrowRight as J, Sparkles as z, Plus as V, Heart as Z, Trash2 as q, Users as Q, TrendingUp as W, TrendingDown as X } from "lucide-solid";
+const Y = /^oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)$/i, P = (e) => {
+  const t = e.trim().match(Y);
+  return t ? {
+    l: Number.parseFloat(t[1]),
+    c: Number.parseFloat(t[2]),
+    h: Number.parseFloat(t[3])
+  } : { l: 0.5, c: 0, h: 0 };
+}, ee = (e) => `oklch(${e.l.toFixed(3)} ${e.c.toFixed(3)} ${e.h.toFixed(1)})`, T = (e) => {
+  const { l: t } = P(e);
+  return t < 0.5 ? "oklch(0.985 0 0)" : "oklch(0.145 0 0)";
+}, te = (e, t) => {
+  e.style.setProperty("--primary", t.primary), e.style.setProperty("--primary-foreground", T(t.primary)), e.style.setProperty("--ring", t.primary), e.style.setProperty("--radius", `${t.radius}rem`), e.style.setProperty("--spacing-base", `${t.spacingBase}rem`), e.style.setProperty("--text-base-size", `${t.fontBaseSize}rem`), e.style.setProperty("font-family", t.fontFamily), t.mode === "dark" ? e.classList.add("dark") : e.classList.remove("dark");
+}, Je = (e) => {
+  for (const t of [
+    "--primary",
+    "--primary-foreground",
+    "--ring",
+    "--radius",
+    "--spacing-base",
+    "--text-base-size"
+  ])
+    e.style.removeProperty(t);
+  e.style.removeProperty("font-family"), e.classList.remove("dark");
+}, re = (e) => `${e.mode === "dark" ? ".dark" : ":root"} {
+  --primary: ${e.primary};
+  --primary-foreground: ${T(e.primary)};
+  --ring: ${e.primary};
+  --radius: ${e.radius}rem;
+  --spacing-base: ${e.spacingBase}rem;
+  --text-base-size: ${e.fontBaseSize}rem;
+  font-family: ${e.fontFamily};
+}`, le = async (e) => {
+  await navigator.clipboard.writeText(re(e));
+};
+var ie = /* @__PURE__ */ c('<button type=button class="w-full inline-flex items-center justify-center gap-2 rounded-md bg-primary text-primary-foreground text-sm font-medium px-3 py-2 shadow-sm hover:opacity-90 transition-opacity">');
+const ne = (e) => {
+  const [t, n] = k(!1), l = async () => {
+    await le(e.theme), n(!0), setTimeout(() => n(!1), 1500);
+  };
+  return (() => {
+    var i = ie();
+    return i.$$click = l, r(i, a(S, {
+      get when() {
+        return t();
+      },
+      get fallback() {
+        return a(M, {
+          size: 14
+        });
+      },
+      get children() {
+        return a(w, {
+          size: 14
+        });
+      }
+    }), null), r(i, () => t() ? "Скопировано" : "Скопировать CSS", null), i;
+  })();
+};
+$(["click"]);
+const F = [
+  { id: "zinc", label: "Zinc", primary: "oklch(0.21 0 0)" },
+  { id: "slate", label: "Slate", primary: "oklch(0.45 0.04 264)" },
+  { id: "stone", label: "Stone", primary: "oklch(0.27 0.01 50)" },
+  { id: "red", label: "Red", primary: "oklch(0.58 0.22 27)" },
+  { id: "rose", label: "Rose", primary: "oklch(0.65 0.22 16)" },
+  { id: "orange", label: "Orange", primary: "oklch(0.7 0.18 48)" },
+  { id: "green", label: "Green", primary: "oklch(0.6 0.16 158)" },
+  { id: "blue", label: "Blue", primary: "oklch(0.55 0.18 256)" },
+  { id: "violet", label: "Violet", primary: "oklch(0.55 0.22 285)" }
+], B = [
+  {
+    id: "system",
+    label: "System UI",
+    stack: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'
+  },
+  {
+    id: "inter",
+    label: "Inter",
+    stack: '"Inter", system-ui, sans-serif'
+  },
+  {
+    id: "geist",
+    label: "Geist",
+    stack: '"Geist", "Inter", system-ui, sans-serif'
+  },
+  {
+    id: "mono",
+    label: "Mono",
+    stack: '"JetBrains Mono", ui-monospace, "Cascadia Code", monospace'
+  },
+  {
+    id: "serif",
+    label: "Serif",
+    stack: 'ui-serif, Georgia, Cambria, "Times New Roman", serif'
+  }
+], ae = {
+  mode: "dark",
+  primary: F[7].primary,
+  // Blue по дефолту
+  radius: 0.5,
+  spacingBase: 1,
+  fontBaseSize: 1,
+  fontFamily: B[0].stack
+};
+var se = /* @__PURE__ */ c('<div class="flex items-center gap-3"><input type=range class="capsule-slider flex-1 h-1.5 rounded-full bg-muted accent-primary cursor-pointer"><span class="text-xs text-muted-foreground font-mono w-14 text-right shrink-0">');
+const b = (e) => (() => {
+  var t = se(), n = t.firstChild, l = n.nextSibling;
+  return n.$$input = (i) => e.onChange(i.currentTarget.valueAsNumber), r(l, () => e.value.toFixed(e.precision ?? 2), null), r(l, () => e.unit ?? "", null), x((i) => {
+    var s = e.min, d = e.max, o = e.step;
+    return s !== i.e && y(n, "min", i.e = s), d !== i.t && y(n, "max", i.t = d), o !== i.a && y(n, "step", i.a = o), i;
+  }, {
+    e: void 0,
+    t: void 0,
+    a: void 0
+  }), x(() => n.value = e.value), t;
+})();
+$(["input"]);
+var oe = /* @__PURE__ */ c('<div class="flex flex-col gap-3"><div class="grid grid-cols-3 gap-2">'), de = /* @__PURE__ */ c('<button type=button class="rounded-md border border-border bg-card/40 px-2.5 py-2 text-left text-sm transition-all hover:bg-card/80 hover:border-foreground/30"><div class=text-sm></div><div class="text-[10px] text-muted-foreground truncate">Aa Bb Cc');
+const ce = (e) => (() => {
+  var t = oe(), n = t.firstChild;
+  return r(n, a(v, {
+    each: B,
+    children: (l) => {
+      const i = () => e.family === l.stack;
+      return (() => {
+        var s = de(), d = s.firstChild;
+        return s.$$click = () => e.onFamilyChange(l.stack), r(d, () => l.label), x((o) => {
+          var m = {
+            "ring-2 ring-ring shadow-md": i()
+          }, u = l.stack;
+          return o.e = p(s, m, o.e), u !== o.t && C(s, "font-family", o.t = u), o;
+        }, {
+          e: void 0,
+          t: void 0
+        }), s;
+      })();
+    }
+  })), r(t, a(b, {
+    get value() {
+      return e.size;
+    },
+    min: 0.75,
+    max: 1.25,
+    step: 0.0625,
+    precision: 3,
+    unit: "rem",
+    get onChange() {
+      return e.onSizeChange;
+    }
+  }), null), t;
+})();
+$(["click"]);
+var ue = /* @__PURE__ */ c('<div class="inline-flex rounded-md border border-border bg-card/40 p-1 gap-1"><button type=button class="flex items-center gap-1.5 px-3 py-1.5 rounded text-sm transition-colors">Light</button><button type=button class="flex items-center gap-1.5 px-3 py-1.5 rounded text-sm transition-colors">Dark');
+const me = (e) => (() => {
+  var t = ue(), n = t.firstChild, l = n.firstChild, i = n.nextSibling, s = i.firstChild;
+  return n.$$click = () => e.onChange("light"), r(n, a(A, {
+    size: 14
+  }), l), i.$$click = () => e.onChange("dark"), r(i, a(N, {
+    size: 14
+  }), s), x((d) => {
+    var o = {
+      "bg-primary text-primary-foreground shadow-sm": e.mode === "light",
+      "text-muted-foreground hover:text-foreground": e.mode !== "light"
+    }, m = {
+      "bg-primary text-primary-foreground shadow-sm": e.mode === "dark",
+      "text-muted-foreground hover:text-foreground": e.mode !== "dark"
+    };
+    return d.e = p(n, o, d.e), d.t = p(i, m, d.t), d;
+  }, {
+    e: void 0,
+    t: void 0
+  }), t;
+})();
+$(["click"]);
+var ge = /* @__PURE__ */ c('<div class="flex flex-col gap-2">'), fe = /* @__PURE__ */ c('<div class="flex items-center gap-3"><span class="text-xs text-muted-foreground w-20 shrink-0"></span><div class=flex-1>');
+const xe = (e) => {
+  const t = O(() => P(e.value)), n = (l) => {
+    e.onChange(ee({
+      ...t(),
+      ...l
+    }));
+  };
+  return (() => {
+    var l = ge();
+    return r(l, a(_, {
+      label: "Lightness",
+      get children() {
+        return a(b, {
+          get value() {
+            return t().l;
+          },
+          min: 0,
+          max: 1,
+          step: 0.01,
+          precision: 2,
+          onChange: (i) => n({
+            l: i
+          })
+        });
+      }
+    }), null), r(l, a(_, {
+      label: "Chroma",
+      get children() {
+        return a(b, {
+          get value() {
+            return t().c;
+          },
+          min: 0,
+          max: 0.4,
+          step: 5e-3,
+          precision: 3,
+          onChange: (i) => n({
+            c: i
+          })
+        });
+      }
+    }), null), r(l, a(_, {
+      label: "Hue",
+      get children() {
+        return a(b, {
+          get value() {
+            return t().h;
+          },
+          min: 0,
+          max: 360,
+          step: 1,
+          precision: 0,
+          unit: "°",
+          onChange: (i) => n({
+            h: i
+          })
+        });
+      }
+    }), null), l;
+  })();
+}, _ = (e) => (() => {
+  var t = fe(), n = t.firstChild, l = n.nextSibling;
+  return r(n, () => e.label), r(l, () => e.children), t;
+})();
+var be = /* @__PURE__ */ c('<div class="grid grid-cols-3 gap-2">'), pe = /* @__PURE__ */ c('<button type=button class="group flex items-center gap-2 rounded-md border border-border bg-card/40 px-2.5 py-2 text-left text-sm transition-all hover:bg-card/80 hover:border-foreground/30"><span class="h-4 w-4 rounded-full ring-1 ring-foreground/20 shrink-0"aria-hidden></span><span class=truncate>');
+const he = (e) => (() => {
+  var t = be();
+  return r(t, a(v, {
+    each: F,
+    children: (n) => {
+      const l = () => e.current === n.primary;
+      return (() => {
+        var i = pe(), s = i.firstChild, d = s.nextSibling;
+        return i.$$click = () => e.onPick(n.primary), r(d, () => n.label), x((o) => {
+          var m = {
+            "ring-2 ring-ring shadow-md scale-[1.02]": l()
+          }, u = n.primary;
+          return o.e = p(i, m, o.e), u !== o.t && C(s, "background", o.t = u), o;
+        }, {
+          e: void 0,
+          t: void 0
+        }), i;
+      })();
+    }
+  })), t;
+})();
+$(["click"]);
+const ve = (e) => a(b, {
+  get value() {
+    return e.value;
+  },
+  min: 0,
+  max: 1.5,
+  step: 0.05,
+  precision: 2,
+  unit: "rem",
+  get onChange() {
+    return e.onChange;
+  }
+});
+var $e = /* @__PURE__ */ c('<div class="text-xs text-muted-foreground mt-0.5">'), ye = /* @__PURE__ */ c('<div class="flex flex-col gap-3 py-4 first:pt-0 last:pb-0 border-b border-border last:border-0"><div class="flex items-start gap-3"><div class="h-8 w-8 rounded-md bg-muted/60 grid place-items-center text-muted-foreground shrink-0"></div><div class="flex-1 min-w-0"><div class="text-sm font-medium leading-tight"></div></div></div><div class=pl-11>');
+const h = (e) => (() => {
+  var t = ye(), n = t.firstChild, l = n.firstChild, i = l.nextSibling, s = i.firstChild, d = n.nextSibling;
+  return r(l, a(e.icon, {
+    size: 16
+  })), r(s, () => e.title), r(i, a(S, {
+    get when() {
+      return e.description;
+    },
+    get children() {
+      var o = $e();
+      return r(o, () => e.description), o;
+    }
+  }), null), r(d, () => e.children), t;
+})(), _e = (e) => a(b, {
+  get value() {
+    return e.value;
+  },
+  min: 0.5,
+  max: 1.5,
+  step: 0.05,
+  precision: 2,
+  unit: "rem",
+  get onChange() {
+    return e.onChange;
+  }
+});
+var Ce = /* @__PURE__ */ c('<div class="flex flex-col gap-3"><details class=text-xs><summary class="cursor-pointer text-muted-foreground hover:text-foreground select-none">Тонкая подстройка (OKLCH)</summary><div class=mt-3>'), ke = /* @__PURE__ */ c('<div class="flex flex-col h-full"><header class="px-6 py-5 border-b border-border"><h2 class="text-lg font-semibold tracking-tight">Theme</h2><p class="text-xs text-muted-foreground mt-1">Настройте цвет, форму и шрифт — превью обновится мгновенно.</p></header><div class="flex-1 overflow-y-auto px-6"></div><footer class="px-6 py-4 border-t border-border bg-card/40">');
+const Se = (e) => (() => {
+  var t = ke(), n = t.firstChild, l = n.nextSibling, i = l.nextSibling;
+  return r(l, a(h, {
+    icon: I,
+    title: "Режим",
+    description: "Светлая или тёмная тема для превью",
+    get children() {
+      return a(me, {
+        get mode() {
+          return e.theme.mode;
+        },
+        onChange: (s) => e.onChange({
+          mode: s
+        })
+      });
+    }
+  }), null), r(l, a(h, {
+    icon: G,
+    title: "Primary",
+    description: "Акцентный цвет — кнопки, фокус, ссылки",
+    get children() {
+      var s = Ce(), d = s.firstChild, o = d.firstChild, m = o.nextSibling;
+      return r(s, a(he, {
+        get current() {
+          return e.theme.primary;
+        },
+        onPick: (u) => e.onChange({
+          primary: u
+        })
+      }), d), r(m, a(xe, {
+        get value() {
+          return e.theme.primary;
+        },
+        onChange: (u) => e.onChange({
+          primary: u
+        })
+      })), s;
+    }
+  }), null), r(l, a(h, {
+    icon: H,
+    title: "Скругление",
+    description: "Радиус углов компонентов",
+    get children() {
+      return a(ve, {
+        get value() {
+          return e.theme.radius;
+        },
+        onChange: (s) => e.onChange({
+          radius: s
+        })
+      });
+    }
+  }), null), r(l, a(h, {
+    icon: U,
+    title: "Отступы",
+    description: "Базовый шаг spacing'а",
+    get children() {
+      return a(_e, {
+        get value() {
+          return e.theme.spacingBase;
+        },
+        onChange: (s) => e.onChange({
+          spacingBase: s
+        })
+      });
+    }
+  }), null), r(l, a(h, {
+    icon: D,
+    title: "Шрифт",
+    description: "Семейство и базовый размер",
+    get children() {
+      return a(ce, {
+        get family() {
+          return e.theme.fontFamily;
+        },
+        get size() {
+          return e.theme.fontBaseSize;
+        },
+        onFamilyChange: (s) => e.onChange({
+          fontFamily: s
+        }),
+        onSizeChange: (s) => e.onChange({
+          fontBaseSize: s
+        })
+      });
+    }
+  }), null), r(i, a(ne, {
+    get theme() {
+      return e.theme;
+    }
+  })), t;
+})();
+var we = /* @__PURE__ */ c('<div class="rounded-lg border border-border bg-card text-card-foreground p-6 shadow-sm"><div class="space-y-1.5 mb-5"><h3 class="text-base font-semibold leading-none">Войти в Capsule</h3><p class="text-xs text-muted-foreground">Войдите, чтобы продолжить редактирование</p></div><div class="flex flex-col gap-3"><label class="flex flex-col gap-1.5"><span class="text-xs font-medium">Email</span><div class=relative><input type=email placeholder=you@company.com class="w-full h-9 rounded-md border border-input bg-background pl-8 pr-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"></div></label><label class="flex flex-col gap-1.5"><span class="text-xs font-medium">Пароль</span><div class=relative><input type=password placeholder=•••••••• class="w-full h-9 rounded-md border border-input bg-background pl-8 pr-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"></div></label><button type=button class="mt-1 inline-flex items-center justify-center gap-2 h-9 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-sm hover:opacity-90 transition-opacity">Войти');
+const ze = () => (() => {
+  var e = we(), t = e.firstChild, n = t.nextSibling, l = n.firstChild, i = l.firstChild, s = i.nextSibling, d = s.firstChild, o = l.nextSibling, m = o.firstChild, u = m.nextSibling, g = u.firstChild, f = o.nextSibling;
+  return f.firstChild, r(s, a(j, {
+    size: 14,
+    class: "absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+  }), d), r(u, a(K, {
+    size: 14,
+    class: "absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+  }), g), r(f, a(J, {
+    size: 14
+  }), null), e;
+})();
+var Pe = /* @__PURE__ */ c('<div class="rounded-lg border border-border bg-card p-4"><div class="text-xs text-muted-foreground mb-3">Buttons</div><div class="flex flex-wrap gap-2"><button type=button class="inline-flex items-center gap-1.5 h-8 px-3 rounded-md bg-primary text-primary-foreground text-xs font-medium shadow-sm hover:opacity-90">Primary</button><button type=button class="inline-flex items-center gap-1.5 h-8 px-3 rounded-md bg-secondary text-secondary-foreground text-xs font-medium hover:bg-secondary/80">Secondary</button><button type=button class="inline-flex items-center gap-1.5 h-8 px-3 rounded-md border border-input bg-background text-xs font-medium hover:bg-accent hover:text-accent-foreground">Outline</button><button type=button class="inline-flex items-center gap-1.5 h-8 px-3 rounded-md text-foreground text-xs font-medium hover:bg-accent hover:text-accent-foreground">Ghost</button><button type=button class="inline-flex items-center gap-1.5 h-8 px-3 rounded-md bg-destructive text-destructive-foreground text-xs font-medium shadow-sm hover:opacity-90">Destructive');
+const Te = () => (() => {
+  var e = Pe(), t = e.firstChild, n = t.nextSibling, l = n.firstChild, i = l.firstChild, s = l.nextSibling, d = s.firstChild, o = s.nextSibling, m = o.firstChild, u = o.nextSibling, g = u.nextSibling, f = g.firstChild;
+  return r(l, a(z, {
+    size: 12
+  }), i), r(s, a(V, {
+    size: 12
+  }), d), r(o, a(Z, {
+    size: 12
+  }), m), r(g, a(q, {
+    size: 12
+  }), f), e;
+})();
+var Fe = /* @__PURE__ */ c('<div class="grid grid-cols-3 gap-3">'), Be = /* @__PURE__ */ c('<div class="rounded-lg border border-border bg-card p-3"><div class="flex items-center justify-between text-muted-foreground mb-2"><span class="text-[10px] font-mono px-1.5 py-0.5 rounded"></span></div><div class="text-xs text-muted-foreground"></div><div class="text-lg font-semibold tracking-tight mt-0.5">');
+const Le = [{
+  label: "Активные",
+  value: "12 480",
+  delta: "+12%",
+  positive: !0,
+  icon: Q
+}, {
+  label: "Сессии",
+  value: "1.2M",
+  delta: "+4.3%",
+  positive: !0,
+  icon: W
+}, {
+  label: "Ошибки",
+  value: "38",
+  delta: "-22%",
+  positive: !1,
+  icon: X
+}], Ee = () => (() => {
+  var e = Fe();
+  return r(e, a(v, {
+    each: Le,
+    children: (t) => (() => {
+      var n = Be(), l = n.firstChild, i = l.firstChild, s = l.nextSibling, d = s.nextSibling;
+      return r(l, a(t.icon, {
+        size: 14
+      }), i), r(i, () => t.delta), r(s, () => t.label), r(d, () => t.value), x((o) => p(i, {
+        "text-green-500 bg-green-500/10": t.positive,
+        "text-red-500 bg-red-500/10": !t.positive
+      }, o)), n;
+    })()
+  })), e;
+})();
+var Oe = /* @__PURE__ */ c('<div class="grid grid-cols-2 gap-3">'), Re = /* @__PURE__ */ c('<div class="relative rounded-lg border p-4 transition-colors"><div class="flex flex-col"><span class="text-xs text-muted-foreground"></span><div class="flex items-baseline gap-1 mt-1"><span class="text-xl font-semibold leading-none"></span><span class="text-[11px] text-muted-foreground"></span></div></div><ul class="mt-3 flex flex-col gap-1.5">'), Me = /* @__PURE__ */ c('<span class="absolute -top-2.5 right-4 inline-flex items-center gap-1 rounded-full bg-primary px-2 py-0.5 text-[10px] font-medium text-primary-foreground">Хит'), Ae = /* @__PURE__ */ c('<li class="flex items-center gap-1.5 text-xs"><span class=text-muted-foreground>');
+const Ne = [{
+  id: "starter",
+  name: "Starter",
+  price: "0 ₽",
+  sub: "Forever free",
+  features: ["1 проект", "3 редактора", "Базовая палитра"],
+  featured: !1
+}, {
+  id: "pro",
+  name: "Pro",
+  price: "1 290 ₽",
+  sub: "в месяц",
+  features: ["Неограниченные проекты", "Своя дизайн-система", "Экспорт CSS"],
+  featured: !0
+}], Ie = () => (() => {
+  var e = Oe();
+  return r(e, a(v, {
+    each: Ne,
+    children: (t) => (() => {
+      var n = Re(), l = n.firstChild, i = l.firstChild, s = i.nextSibling, d = s.firstChild, o = d.nextSibling, m = l.nextSibling;
+      return r(n, (() => {
+        var u = L(() => !!t.featured);
+        return () => u() ? (() => {
+          var g = Me(), f = g.firstChild;
+          return r(g, a(z, {
+            size: 10
+          }), f), g;
+        })() : null;
+      })(), l), r(i, () => t.name), r(d, () => t.price), r(o, () => t.sub), r(m, a(v, {
+        get each() {
+          return t.features;
+        },
+        children: (u) => (() => {
+          var g = Ae(), f = g.firstChild;
+          return r(g, a(w, {
+            size: 12,
+            class: "text-primary shrink-0"
+          }), f), r(f, u), g;
+        })()
+      })), x((u) => p(n, {
+        "border-primary bg-primary/5 shadow-md": t.featured,
+        "border-border bg-card": !t.featured
+      }, u)), n;
+    })()
+  })), e;
+})();
+var Ge = /* @__PURE__ */ c('<div class="h-full overflow-y-auto bg-background text-foreground p-8"><div class="max-w-3xl mx-auto flex flex-col gap-4"><div class="grid grid-cols-12 gap-4 items-start"><div class=col-span-5></div><div class="col-span-7 flex flex-col gap-4">');
+const He = () => (() => {
+  var e = Ge(), t = e.firstChild, n = t.firstChild, l = n.firstChild, i = l.nextSibling;
+  return r(l, a(ze, {})), r(i, a(Ee, {}), null), r(i, a(Ie, {}), null), r(t, a(Te, {}), null), e;
+})();
+var Ue = /* @__PURE__ */ c('<div class="grid grid-cols-[380px_1fr] h-screen overflow-hidden bg-background text-foreground"><aside class="border-r border-border bg-card/30 overflow-hidden"></aside><main class=overflow-hidden>');
+const Ve = (e) => {
+  const [t, n] = k(e.initialTheme ?? ae);
+  let l;
+  R(() => {
+    l && te(l, t()), e.onChange?.(t());
+  });
+  const i = (s) => {
+    n((d) => ({
+      ...d,
+      ...s
+    }));
+  };
+  return (() => {
+    var s = Ue(), d = s.firstChild, o = d.nextSibling;
+    r(d, a(Se, {
+      get theme() {
+        return t();
+      },
+      onChange: i
+    }));
+    var m = l;
+    return typeof m == "function" ? E(m, o) : l = o, r(o, a(He, {})), s;
+  })();
+};
+export {
+  F as COLOR_PRESETS,
+  ae as DEFAULT_THEME,
+  B as FONT_OPTIONS,
+  Ve as ThemeEditor,
+  te as applyTheme,
+  T as contrastForeground,
+  le as copyTheme,
+  re as exportTheme,
+  ee as formatOklch,
+  P as parseOklch,
+  Je as resetTheme
+};
+//# sourceMappingURL=editor.mjs.map