@themal/editor 0.17.0 → 0.17.1

package/dist/index.js

@@ -51,7 +51,7 @@ class _o {
     }
   }
 }
-class Gr {
+class _r {
   constructor() {
     xr(this, "store", /* @__PURE__ */ new Map());
   }
@@ -72,7 +72,7 @@ class ma {
   constructor() {
     xr(this, "primary");
     xr(this, "fallback");
-    this.test("localStorage") ? (this.primary = new fa(), this.fallback = new _o()) : this.test("sessionStorage") ? (this.primary = new _o(), this.fallback = new Gr()) : (this.primary = new Gr(), this.fallback = new Gr());
+    this.test("localStorage") ? (this.primary = new fa(), this.fallback = new _o()) : this.test("sessionStorage") ? (this.primary = new _o(), this.fallback = new _r()) : (this.primary = new _r(), this.fallback = new _r());
   }
   test(n) {
     try {
@@ -103,15 +103,15 @@ class ma {
     this.primary.remove(n), this.fallback.remove(n);
   }
 }
-const _r = new ma(), O = {
-  get: (r, n) => _r.get(r, n),
-  set: (r, n) => _r.set(r, n),
-  remove: (r) => _r.remove(r)
-}, Mr = "ds-theme-colors", ue = "ds-pending-colors", Me = "ds-color-history", eo = "ds-contrast-knowledge";
+const Ur = new ma(), O = {
+  get: (r, n) => Ur.get(r, n),
+  set: (r, n) => Ur.set(r, n),
+  remove: (r) => Ur.remove(r)
+}, Mr = "ds-theme-colors", ue = "ds-pending-colors", Me = "ds-color-history", to = "ds-contrast-knowledge";
 function ba(r, n, s) {
   const c = r.trim().split(/\s+/);
   if (c.length < 3) return;
-  const l = parseFloat(c[0]), h = parseFloat(c[2]), p = 15, u = 10, m = O.get(eo) || [], b = m.find(
+  const l = parseFloat(c[0]), h = parseFloat(c[2]), p = 15, u = 10, m = O.get(to) || [], b = m.find(
     (g) => g.fgKey === n && l >= g.bgHueRange[0] && l <= g.bgHueRange[1] && h >= g.bgLightRange[0] && h <= g.bgLightRange[1]
   );
   b ? b.correctedValue = s : m.push({
@@ -125,12 +125,12 @@ function ba(r, n, s) {
     ],
     fgKey: n,
     correctedValue: s
-  }), m.length > 100 && m.splice(0, m.length - 100), O.set(eo, m);
+  }), m.length > 100 && m.splice(0, m.length - 100), O.set(to, m);
 }
 function cn(r, n) {
   const s = r.trim().split(/\s+/);
   if (s.length < 3) return {};
-  const c = parseFloat(s[0]), l = parseFloat(s[2]), h = O.get(eo) || [], p = {};
+  const c = parseFloat(s[0]), l = parseFloat(s[2]), h = O.get(to) || [], p = {};
   for (const u of h) {
     if (n.has(u.fgKey)) continue;
     const m = c >= u.bgHueRange[0] && c <= u.bgHueRange[1], b = l >= u.bgLightRange[0] && l <= u.bgLightRange[1];
@@ -161,16 +161,16 @@ function Tr(r) {
   };
   return [p(0), p(8), p(4)];
 }
-function to(r, n, s) {
+function ro(r, n, s) {
   const c = (l) => l <= 0.03928 ? l / 12.92 : Math.pow((l + 0.055) / 1.055, 2.4);
   return 0.2126 * c(r) + 0.7152 * c(n) + 0.0722 * c(s);
 }
 function M(r) {
-  const [n, s, c] = Tr(r), l = to(n, s, c), h = (1 + 0.05) / (l + 0.05), p = (l + 0.05) / (0 + 0.05);
+  const [n, s, c] = Tr(r), l = ro(n, s, c), h = (1 + 0.05) / (l + 0.05), p = (l + 0.05) / (0 + 0.05);
   return h >= p ? "0 0% 100%" : "0 0% 0%";
 }
 function ee(r, n) {
-  const [s, c, l] = Tr(r), [h, p, u] = Tr(n), m = to(s, c, l), b = to(h, p, u), g = Math.max(m, b), v = Math.min(m, b);
+  const [s, c, l] = Tr(r), [h, p, u] = Tr(n), m = ro(s, c, l), b = ro(h, p, u), g = Math.max(m, b), v = Math.min(m, b);
   return (g + 0.05) / (v + 0.05);
 }
 const Ne = [
@@ -208,7 +208,7 @@ function De(r) {
   };
   return `#${p(0)}${p(8)}${p(4)}`;
 }
-function Ct(r) {
+function Nt(r) {
   const n = parseInt(r.slice(1, 3), 16) / 255, s = parseInt(r.slice(3, 5), 16) / 255, c = parseInt(r.slice(5, 7), 16) / 255, l = Math.max(n, s, c), h = Math.min(n, s, c), p = (l + h) / 2;
   if (l === h) return `0 0% ${(p * 100).toFixed(1)}%`;
   const u = l - h, m = p > 0.5 ? u / (2 - l - h) : u / (l + h);
@@ -364,7 +364,7 @@ const Ve = (r, n, s, c) => {
     }
   }
   return s;
-}, Ur = ["Complementary", "Analogous", "Triadic", "Split-Complementary"], ya = (r, n, s, c) => {
+}, Xr = ["Complementary", "Analogous", "Triadic", "Split-Complementary"], ya = (r, n, s, c) => {
   const l = c ?? /* @__PURE__ */ new Set(), h = r.trim().split(/\s+/);
   if (h.length < 3) return {};
   const p = parseFloat(h[0]), u = parseFloat(h[1]), m = parseFloat(h[2]);
@@ -396,8 +396,8 @@ const Ve = (r, n, s, c) => {
     const fe = cn(ge, l);
     Object.assign(U, fe);
   }
-  const ce = { ...s, ...U }, dt = Ie(ce, l);
-  return Object.assign(U, dt), U;
+  const ce = { ...s, ...U }, ht = Ie(ce, l);
+  return Object.assign(U, ht), U;
 }, va = (r, n, s) => {
   const c = n ?? /* @__PURE__ */ new Set(), l = {}, h = s ?? document.documentElement.classList.contains("dark"), p = Math.random() * 360, u = 55 + Math.random() * 35, m = h ? 50 + Math.random() * 20 : 35 + Math.random() * 25, b = `${p.toFixed(1)} ${u.toFixed(1)}% ${m.toFixed(1)}%`;
   c.has("--brand") || (l["--brand"] = b);
@@ -420,8 +420,8 @@ const Ve = (r, n, s, c) => {
     l["--muted"] = `${A(T + 15).toFixed(1)} ${(15 + Math.random() * 15).toFixed(1)}% ${be.toFixed(1)}%`;
   }
   let ce = { ...r, ...l };
-  const dt = Ve("--brand", g, ce, c);
-  if (Object.assign(l, dt), ce = { ...ce, ...dt }, !c.has("--secondary")) {
+  const ht = Ve("--brand", g, ce, c);
+  if (Object.assign(l, ht), ce = { ...ce, ...ht }, !c.has("--secondary")) {
     const te = Ve("--secondary", l["--secondary"] || r["--secondary"], ce, c);
     Object.assign(l, te), ce = { ...ce, ...te };
   }
@@ -434,9 +434,9 @@ const Ve = (r, n, s, c) => {
     const te = cn(fe, c);
     Object.assign(l, te);
   }
-  const Er = { ...r, ...l }, ht = Ie(Er, c);
-  return Object.assign(l, ht), l;
-}, Ut = "ds-card-style", Xr = {
+  const Er = { ...r, ...l }, ut = Ie(Er, c);
+  return Object.assign(l, ut), l;
+}, Ut = "ds-card-style", Kr = {
   preset: "solid",
   shadowOffsetX: 0,
   shadowOffsetY: 2,
@@ -538,7 +538,7 @@ function wa(r) {
   const n = O.get(Ut);
   return n ? (yr(n, r), n) : null;
 }
-const $t = "ds-typography-v2", vr = {
+const Lt = "ds-typography-v2", vr = {
   preset: "system",
   headingFamily: "system-ui, -apple-system, sans-serif",
   bodyFamily: "system-ui, -apple-system, sans-serif",
@@ -624,7 +624,7 @@ function jr(r) {
   c.id = s, c.rel = "stylesheet", c.href = `https://fonts.googleapis.com/css2?family=${n}&display=swap`, document.head.appendChild(c);
 }
 const dn = "ds-custom-fonts";
-function ct() {
+function dt() {
   try {
     const r = localStorage.getItem(dn);
     return r ? JSON.parse(r) : [];
@@ -651,27 +651,27 @@ async function Sa(r) {
   if (!await Na(n)) throw new Error(`"${n}" not found on Google Fonts`);
   const l = `${n.replace(/\s+/g, "+")}:wght@100;200;300;400;500;600;700;800;900`, h = n.includes(" ") ? `"${n}", sans-serif` : `${n}, sans-serif`, p = { label: n, value: h, spec: l };
   Fr[h] = l, jr(h);
-  const u = ct().filter((m) => m.label !== n);
+  const u = dt().filter((m) => m.label !== n);
   return u.push(p), hn(u), p;
 }
 function $a(r) {
-  const n = ct(), s = n.find((c) => c.label === r);
+  const n = dt(), s = n.find((c) => c.label === r);
   s && delete Fr[s.value], hn(n.filter((c) => c.label !== r));
 }
 function La() {
-  const r = ct();
+  const r = dt();
   for (const n of r)
     Fr[n.value] = n.spec, jr(n.value);
 }
 function Ma() {
   document.querySelectorAll('link[id^="gf-"]').forEach((r) => r.remove());
 }
-const ro = "themal-typography";
+const oo = "themal-typography";
 function Xt(r) {
   const n = document.documentElement;
   n.style.setProperty("--font-heading", r.headingFamily), n.style.setProperty("--font-body", r.bodyFamily), n.style.setProperty("--font-size-base", `${r.baseFontSize}px`), n.style.setProperty("--font-weight-heading", String(r.headingWeight)), n.style.setProperty("--font-weight-body", String(r.bodyWeight)), n.style.setProperty("--line-height", String(r.lineHeight)), n.style.setProperty("--letter-spacing", `${r.letterSpacing}em`), n.style.setProperty("--letter-spacing-heading", `${r.headingLetterSpacing}em`);
-  let s = document.getElementById(ro);
-  s || (s = document.createElement("style"), s.id = ro, document.head.appendChild(s)), s.textContent = `
+  let s = document.getElementById(oo);
+  s || (s = document.createElement("style"), s.id = oo, document.head.appendChild(s)), s.textContent = `
     body, .ds-editor {
       font-family: ${r.bodyFamily} !important;
       font-size: ${r.baseFontSize}px !important;
@@ -699,7 +699,7 @@ function Xt(r) {
       font-weight: ${r.bodyWeight} !important;
       line-height: ${r.lineHeight} !important;
     }
-  `, jr(r.headingFamily), jr(r.bodyFamily), O.set($t, r);
+  `, jr(r.headingFamily), jr(r.bodyFamily), O.set(Lt, r);
 }
 function Ko() {
   const r = document.documentElement;
@@ -715,14 +715,14 @@ function Ko() {
   ])
     r.style.removeProperty(s);
   Ma();
-  const n = document.getElementById(ro);
+  const n = document.getElementById(oo);
   n && n.remove();
 }
 function Ta() {
-  const r = O.get($t);
+  const r = O.get(Lt);
   return r ? (Xt(r), r) : null;
 }
-const Nt = "ds-alert-style", Gt = {
+const St = "ds-alert-style", Gt = {
   preset: "filled",
   borderRadius: 8,
   borderWidth: 0,
@@ -754,15 +754,15 @@ const Nt = "ds-alert-style", Gt = {
 };
 function kr(r) {
   const n = document.documentElement;
-  n.style.setProperty("--alert-radius", `${r.borderRadius}px`), n.style.setProperty("--alert-border-width", `${r.borderWidth}px`), n.style.setProperty("--alert-padding", `${r.padding}px`), O.set(Nt, r);
+  n.style.setProperty("--alert-radius", `${r.borderRadius}px`), n.style.setProperty("--alert-border-width", `${r.borderWidth}px`), n.style.setProperty("--alert-padding", `${r.padding}px`), O.set(St, r);
 }
-function Kr() {
+function Zr() {
   const r = document.documentElement;
   for (const n of ["--alert-radius", "--alert-border-width", "--alert-padding"])
     r.style.removeProperty(n);
 }
 function ja() {
-  const r = O.get(Nt);
+  const r = O.get(St);
   return r ? (kr(r), r) : null;
 }
 const Kt = "ds-toast-style", wr = {
@@ -815,12 +815,12 @@ const Zt = "ds-interaction-style", Cr = {
     transitionDuration: 100,
     focusRingWidth: 3
   }
-}, oo = "themal-interaction";
+}, no = "themal-interaction";
 function Nr(r) {
   const n = document.documentElement;
   n.style.setProperty("--hover-opacity", String(r.hoverOpacity)), n.style.setProperty("--hover-scale", String(r.hoverScale)), n.style.setProperty("--active-scale", String(r.activeScale)), n.style.setProperty("--transition-duration", `${r.transitionDuration}ms`), n.style.setProperty("--focus-ring-width", `${r.focusRingWidth}px`), n.style.setProperty("--focus-ring-color", "hsl(var(--ring))");
-  let s = document.getElementById(oo);
-  s || (s = document.createElement("style"), s.id = oo, document.head.appendChild(s)), s.textContent = `
+  let s = document.getElementById(no);
+  s || (s = document.createElement("style"), s.id = no, document.head.appendChild(s)), s.textContent = `
     html button, html a, html [role="button"],
     html .ds-editor button, html .ds-editor a, html .ds-editor [role="button"] {
       transition: opacity var(--transition-duration) ease, transform var(--transition-duration) ease;
@@ -852,14 +852,14 @@ function Qo() {
     "--focus-ring-color"
   ])
     r.style.removeProperty(s);
-  const n = document.getElementById(oo);
+  const n = document.getElementById(no);
   n && n.remove();
 }
 function Ea() {
   const r = O.get(Zt);
   return r ? (Nr(r), r) : null;
 }
-const Or = "ds-button-style", St = {
+const Or = "ds-button-style", $t = {
   paddingX: 16,
   paddingY: 8,
   fontSize: 14,
@@ -907,7 +907,7 @@ function Wa() {
       document.documentElement.style.setProperty(h, p);
     }), _t(l);
   }
-  const c = O.get($t);
+  const c = O.get(Lt);
   c && Xt(c);
 }
 const qt = "ds-typo-interaction-style", $r = {
@@ -944,12 +944,12 @@ const qt = "ds-typo-interaction-style", $r = {
     headingHoverScale: 1.02,
     headingTransitionDuration: 100
   }
-}, no = "themal-typo-interaction";
-function ao(r) {
+}, ao = "themal-typo-interaction";
+function so(r) {
   const n = document.documentElement;
   n.style.setProperty("--link-hover-opacity", String(r.linkHoverOpacity)), n.style.setProperty("--link-hover-scale", String(r.linkHoverScale)), n.style.setProperty("--link-active-scale", String(r.linkActiveScale)), n.style.setProperty("--link-transition-duration", `${r.linkTransitionDuration}ms`), n.style.setProperty("--heading-hover-opacity", String(r.headingHoverOpacity)), n.style.setProperty("--heading-hover-scale", String(r.headingHoverScale)), n.style.setProperty("--heading-transition-duration", `${r.headingTransitionDuration}ms`);
-  let s = document.getElementById(no);
-  s || (s = document.createElement("style"), s.id = no, document.head.appendChild(s));
+  let s = document.getElementById(ao);
+  s || (s = document.createElement("style"), s.id = ao, document.head.appendChild(s));
   const c = r.linkUnderline === "always" ? "underline" : "none", l = r.linkUnderline === "none" ? "none" : "underline";
   s.textContent = `
     html a:not(button):not([role="button"]) {
@@ -985,12 +985,12 @@ function en() {
     "--heading-transition-duration"
   ])
     r.style.removeProperty(s);
-  const n = document.getElementById(no);
+  const n = document.getElementById(ao);
   n && n.remove();
 }
 function Ha() {
   const r = O.get(qt);
-  return r ? (ao(r), r) : null;
+  return r ? (so(r), r) : null;
 }
 function pn(r) {
   const [n, s, c] = Tr(r);
@@ -1018,7 +1018,7 @@ const fn = {
   "--warning-foreground": "Warning FG",
   "--border": "Border"
 };
-function Zr(r, n) {
+function qr(r, n) {
   const s = [];
   for (const [c, l] of Object.entries(fn)) {
     const h = r[c];
@@ -1058,7 +1058,7 @@ async function za(r) {
 function Vt(r, n, s, c, l, h, p) {
   switch (r) {
     case "buttons": {
-      const u = p ?? St;
+      const u = p ?? $t;
       return {
         button: {
           paddingX: { $value: `${u.paddingX}px`, $type: "dimension" },
@@ -1167,7 +1167,7 @@ function Aa(r) {
       alertStyle: s.a,
       interactionStyle: s.i,
       typoInteractionStyle: s.ti,
-      buttonStyle: s.bs || { ...St }
+      buttonStyle: s.bs || { ...$t }
     };
   } catch {
     return null;
@@ -1233,11 +1233,11 @@ function rn(r, n, s, c, l) {
     }
   };
 }
-function qr(r) {
+function Jr(r) {
   const n = r.trim().toLowerCase();
   if (n.startsWith("#")) {
     let h = n;
-    return h.length === 4 && (h = `#${h[1]}${h[1]}${h[2]}${h[2]}${h[3]}${h[3]}`), /^#[0-9a-f]{6}$/.test(h) ? Ct(h) : null;
+    return h.length === 4 && (h = `#${h[1]}${h[1]}${h[2]}${h[2]}${h[3]}${h[3]}`), /^#[0-9a-f]{6}$/.test(h) ? Nt(h) : null;
   }
   const s = n.match(/hsla?\(\s*([\d.]+)[\s,]+([\d.]+)%[\s,]+([\d.]+)%/);
   if (s) return `${parseFloat(s[1])} ${parseFloat(s[2])}% ${parseFloat(s[3])}%`;
@@ -1246,7 +1246,7 @@ function qr(r) {
   const l = n.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/);
   if (l) {
     const h = `#${[l[1], l[2], l[3]].map((p) => Math.round(parseFloat(p)).toString(16).padStart(2, "0")).join("")}`;
-    return Ct(h);
+    return Nt(h);
   }
   return null;
 }
@@ -1316,7 +1316,7 @@ function Va(r) {
     n.raw[p] = u;
     const m = Da[p] || (p.startsWith("--") ? p : null);
     if (m && Ia.has(m)) {
-      const v = qr(u);
+      const v = Jr(u);
       if (v) {
         n.colors[m] = v;
         continue;
@@ -1447,13 +1447,13 @@ function Va(r) {
         m != null && n.cardStyle.borderRadius == null && (n.cardStyle.borderRadius = m);
         break;
       case "color": {
-        const b = qr(u);
+        const b = Jr(u);
         b && !n.colors["--foreground"] && (n.colors["--foreground"] = b);
         break;
       }
       case "background":
       case "background-color": {
-        const b = qr(u);
+        const b = Jr(u);
         b && !n.colors["--background"] && (n.colors["--background"] = b);
         break;
       }
@@ -1728,7 +1728,7 @@ function Ce({
     u && /* @__PURE__ */ e(sn, { upgradeUrl: g, signInUrl: l, feature: r, onClose: () => m(!1) })
   ] });
 }
-function so(r, n) {
+function lo(r, n) {
   return Math.sqrt((r.r - n.r) ** 2 + (r.g - n.g) ** 2 + (r.b - n.b) ** 2);
 }
 function vn(r, n, s) {
@@ -1743,7 +1743,7 @@ function ln(r) {
   const { s: n } = vn(r.r, r.g, r.b);
   return n;
 }
-function Jr(r) {
+function Qr(r) {
   return 0.299 * r.r + 0.587 * r.g + 0.114 * r.b;
 }
 function Xa(r, n) {
@@ -1751,7 +1751,7 @@ function Xa(r, n) {
   s.push({ ...r[c] });
   for (let l = 1; l < n; l++) {
     const h = r.map((m) => {
-      const b = Math.min(...s.map((g) => so(m, g)));
+      const b = Math.min(...s.map((g) => lo(m, g)));
       return b * b;
     }), p = h.reduce((m, b) => m + b, 0);
     let u = Math.random() * p;
@@ -1771,7 +1771,7 @@ function Ka(r, n, s) {
     for (const p of r) {
       let u = 1 / 0, m = 0;
       for (let b = 0; b < c.length; b++) {
-        const g = so(p, c[b]);
+        const g = lo(p, c[b]);
         g < u && (u = g, m = b);
       }
       h[m].push(p);
@@ -1792,7 +1792,7 @@ function Za(r, n) {
     if (c.has(l)) continue;
     let h = { ...r[l] }, p = 1;
     for (let u = l + 1; u < r.length; u++)
-      c.has(u) || so(r[l], r[u]) < n && (h.r += r[u].r, h.g += r[u].g, h.b += r[u].b, p++, c.add(u));
+      c.has(u) || lo(r[l], r[u]) < n && (h.r += r[u].r, h.g += r[u].g, h.b += r[u].b, p++, c.add(u));
     s.push({ r: h.r / p, g: h.g / p, b: h.b / p }), c.add(l);
   }
   return s;
@@ -1826,7 +1826,7 @@ function kn(r) {
     const j = n[0];
     n.push({ r: Math.min(255, j.r + 30), g: Math.min(255, j.g + 30), b: Math.min(255, j.b + 30) });
   }
-  const s = [...n].sort((j, i) => Jr(j) - Jr(i)), c = s[0], l = s[s.length - 1], p = r.reduce((j, i) => j + Jr(i), 0) / r.length < 128, u = p ? c : l, m = p ? l : c, b = n.filter((j) => j !== c && j !== l);
+  const s = [...n].sort((j, i) => Qr(j) - Qr(i)), c = s[0], l = s[s.length - 1], p = r.reduce((j, i) => j + Qr(i), 0) / r.length < 128, u = p ? c : l, m = p ? l : c, b = n.filter((j) => j !== c && j !== l);
   b.sort((j, i) => ln(i) - ln(j));
   const g = b[0] || s[Math.floor(s.length / 2)], v = b[1] || s[Math.floor(s.length / 3)], T = b[2] || s[Math.floor(s.length * 2 / 3)];
   return {
@@ -1954,7 +1954,7 @@ const $s = [
   { name: "Bell", icon: Cs },
   { name: "Clock", icon: Ns },
   { name: "Download", icon: Ss }
-], Qr = [
+], eo = [
   { key: "--brand", label: "Primary" },
   { key: "--secondary", label: "Secondary" },
   { key: "--accent", label: "Accent" },
@@ -2042,15 +2042,15 @@ function Ls({
       );
     Ln(H);
   }, [K]);
-  const [ge, ce] = S(!1), [dt, fe] = S(!1), [Er, ht] = S(!1), [te, be] = S(!1), [Se, Lt] = S(null), [Cn, lo] = S(!1), [Qt, io] = S(
+  const [ge, ce] = S(!1), [ht, fe] = S(!1), [Er, ut] = S(!1), [te, be] = S(!1), [Se, Mt] = S(null), [Cn, io] = S(!1), [Qt, co] = S(
     /* @__PURE__ */ new Set(["colors", "card", "typography", "alerts", "interactions"])
-  ), [Nn, er] = S(!1), [Sn, Mt] = S(!1), [co, Tt] = S({}), [ho, xe] = S("idle"), Rr = It(null), uo = It(null), po = It({}), go = It(null), [$n, Ln] = S({}), [pe, ut] = S([]), [jt, $e] = S(0), [tr, Ot] = S(-1), [fo, rr] = S(!1), [x, pt] = S(() => O.get(Ut) || { ...Xr }), [Ye, Ge] = S(!1), [Mn, mo] = S(!1), [Te, or] = S(
+  ), [Nn, er] = S(!1), [Sn, Tt] = S(!1), [ho, jt] = S({}), [Rr, xe] = S("idle"), Pr = It(null), uo = It(null), po = It({}), go = It(null), [$n, Ln] = S({}), [pe, pt] = S([]), [Ot, $e] = S(0), [tr, Ft] = S(-1), [fo, rr] = S(!1), [x, gt] = S(() => O.get(Ut) || { ...Kr }), [Ye, Ge] = S(!1), [Mn, mo] = S(!1), [Te, or] = S(
     "css"
-  ), [C, gt] = S(
-    () => O.get($t) || { ...vr }
+  ), [C, ft] = S(
+    () => O.get(Lt) || { ...vr }
   ), [nr, bo] = S(
-    () => ct()
-  ), [ft, xo] = S(""), [yo, Pr] = S(""), [Wr, vo] = S(!1), ko = pa(
+    () => dt()
+  ), [mt, xo] = S(""), [yo, Wr] = S(""), [Br, vo] = S(!1), ko = pa(
     () => [
       ...Xo,
       ...nr.map((t) => ({ label: `${t.label} *`, value: t.value }))
@@ -2058,13 +2058,13 @@ function Ls({
     [nr]
   ), [_e, Ue] = S(!1), [Tn, wo] = S(!1), [je, ar] = S(
     "css"
-  ), [I, Xe] = S(() => O.get(Nt) || { ...Gt }), [ne, sr] = S(() => O.get(Kt) || { ...wr }), [Ke, Ft] = S(!1), [jn, Co] = S(!1), [Oe, No] = S(
+  ), [I, Xe] = S(() => O.get(St) || { ...Gt }), [ne, sr] = S(() => O.get(Kt) || { ...wr }), [Ke, Et] = S(!1), [jn, Co] = S(!1), [Oe, No] = S(
     "css"
-  ), [Ze, Et] = S(!1), [On, So] = S(!1), [Fe, $o] = S(
+  ), [Ze, Rt] = S(!1), [On, So] = S(!1), [Fe, $o] = S(
     "css"
-  ), [Fn, Lo] = S(!1), [$, mt] = S(() => O.get(Or) || { ...St }), [R, bt] = S(() => O.get(Zt) || { ...Cr }), [qe, Je] = S(!1), [En, Mo] = S(!1), [Ee, lr] = S("css"), [Qe, et] = S(!1), [Rn, To] = S(!1), [Re, ir] = S("css"), [Pn, cr] = S(!1), [E, Rt] = S(() => O.get(
+  ), [Fn, Lo] = S(!1), [$, bt] = S(() => O.get(Or) || { ...$t }), [R, xt] = S(() => O.get(Zt) || { ...Cr }), [qe, Je] = S(!1), [En, Mo] = S(!1), [Ee, lr] = S("css"), [Qe, et] = S(!1), [Rn, To] = S(!1), [Re, ir] = S("css"), [Pn, cr] = S(!1), [E, Pt] = S(() => O.get(
     qt
-  ) || { ...$r }), [tt, rt] = S(!1), [Wn, jo] = S(!1), [Pe, dr] = S("css"), [Bn, Pt] = S(!1), [Br, de] = S(!1), [We, ye] = S("idle"), [Hr, hr] = S(""), [zr, xt] = S(""), [Hn, Be] = S(!1), [Le, ur] = S("css"), [zn, pr] = S(!1), [An, gr] = S(!1), [Dn, fr] = S(!1), [In, Wt] = S(""), [W, yt] = S(null), [Vn, vt] = S(!1), [ot, Bt] = S(null), [Oo, Fo] = S(null), [nt, Ar] = S(null), [at, st] = S("#000000"), Ht = (t) => {
+  ) || { ...$r }), [tt, rt] = S(!1), [Wn, jo] = S(!1), [Pe, dr] = S("css"), [Bn, Wt] = S(!1), [Hr, de] = S(!1), [We, ye] = S("idle"), [zr, hr] = S(""), [Ar, yt] = S(""), [Hn, Be] = S(!1), [Le, ur] = S("css"), [zn, pr] = S(!1), [An, gr] = S(!1), [Dn, fr] = S(!1), [In, Bt] = S(""), [W, vt] = S(null), [Vn, kt] = S(!1), [ot, Ht] = S(null), [Oo, Fo] = S(null), [nt, Dr] = S(null), [at, st] = S("#000000"), zt = (t) => {
     s == null || s(t);
   };
   oe(() => {
@@ -2078,7 +2078,7 @@ function Ls({
     if (a) {
       for (const [d, f] of Object.entries(a.colors))
         document.documentElement.style.setProperty(d, f);
-      A(a.colors), pt(a.cardStyle), yr(a.cardStyle, a.colors), gt(a.typographyState), Xt(a.typographyState), Xe(a.alertStyle), kr(a.alertStyle), bt(a.interactionStyle), Nr(a.interactionStyle), Rt(a.typoInteractionStyle), ao(a.typoInteractionStyle), mt(a.buttonStyle), Sr(a.buttonStyle), window.history.replaceState(
+      A(a.colors), gt(a.cardStyle), yr(a.cardStyle, a.colors), ft(a.typographyState), Xt(a.typographyState), Xe(a.alertStyle), kr(a.alertStyle), xt(a.interactionStyle), Nr(a.interactionStyle), Pt(a.typoInteractionStyle), so(a.typoInteractionStyle), bt(a.buttonStyle), Sr(a.buttonStyle), window.history.replaceState(
         null,
         "",
         window.location.pathname + window.location.search
@@ -2086,13 +2086,13 @@ function Ls({
     }
   }, []);
   const lt = se((t) => {
-    pt((a) => {
+    gt((a) => {
       const d = { ...a, ...t };
       return t.preset === void 0 && a.preset !== "custom" && (d.preset = "custom"), d;
     });
   }, []), Yn = se((t) => {
     const a = ka[t];
-    a && pt((d) => ({ ...d, ...a }));
+    a && gt((d) => ({ ...d, ...a }));
   }, []);
   oe(() => {
     Xt(C);
@@ -2100,31 +2100,31 @@ function Ls({
     La(), Ta();
   }, []);
   const ve = se((t) => {
-    gt((a) => {
+    ft((a) => {
       const d = { ...a, ...t };
       return t.preset === void 0 && a.preset !== "custom" && (d.preset = "custom"), d;
     });
   }, []), Gn = se((t) => {
     const a = Ca[t];
-    a && gt({ ...a });
+    a && ft({ ...a });
   }, []), Eo = se(async () => {
-    const t = ft.trim();
+    const t = mt.trim();
     if (t) {
-      vo(!0), Pr("");
+      vo(!0), Wr("");
       try {
-        await Sa(t), bo(ct()), xo("");
+        await Sa(t), bo(dt()), xo("");
       } catch (a) {
-        Pr(
+        Wr(
           a instanceof Error ? a.message : "Failed to add font"
         );
       } finally {
         vo(!1);
       }
     }
-  }, [ft]), _n = se(
+  }, [mt]), _n = se(
     (t) => {
-      const d = ct().find((f) => f.label === t);
-      if ($a(t), bo(ct()), d) {
+      const d = dt().find((f) => f.label === t);
+      if ($a(t), bo(dt()), d) {
         const f = Xo[0].value, L = {};
         C.headingFamily === d.value && (L.headingFamily = f), C.bodyFamily === d.value && (L.bodyFamily = f), Object.keys(L).length && ve(L);
       }
@@ -2136,7 +2136,7 @@ function Ls({
   }, [I]), oe(() => {
     ja();
   }, []);
-  const Dr = se((t) => {
+  const Ir = se((t) => {
     Xe((a) => {
       const d = { ...a, ...t };
       return t.preset === void 0 && a.preset !== "custom" && (d.preset = "custom"), d;
@@ -2145,7 +2145,7 @@ function Ls({
     const a = Zo[t];
     a && Xe({ ...a });
   }, []), Xn = () => {
-    O.remove(Nt), Kr(), Xe({ ...Gt }), O.remove(Kt), Jo(), sr({ ...wr });
+    O.remove(St), Zr(), Xe({ ...Gt }), O.remove(Kt), Jo(), sr({ ...wr });
   };
   oe(() => {
     un(ne);
@@ -2165,7 +2165,7 @@ function Ls({
     Sr($);
   }, [$]);
   const ke = se((t) => {
-    mt((a) => ({ ...a, ...t }));
+    bt((a) => ({ ...a, ...t }));
   }, []);
   oe(() => {
     Nr(R);
@@ -2174,9 +2174,9 @@ function Ls({
   }, []), oe(() => {
     Ea();
   }, []);
-  const zt = se(
+  const At = se(
     (t) => {
-      bt((a) => {
+      xt((a) => {
         const d = { ...a, ...t };
         return t.preset === void 0 && a.preset !== "custom" && (d.preset = "custom"), d;
       });
@@ -2184,18 +2184,18 @@ function Ls({
     []
   ), Zn = se((t) => {
     const a = Fa[t];
-    a && bt({ ...a });
+    a && xt({ ...a });
   }, []), qn = () => {
-    O.remove(Zt), Qo(), bt({ ...Cr });
+    O.remove(Zt), Qo(), xt({ ...Cr });
   };
   oe(() => {
-    ao(E);
+    so(E);
   }, [E]), oe(() => {
     Ha();
   }, []);
   const He = se(
     (t) => {
-      Rt((a) => {
+      Pt((a) => {
         const d = { ...a, ...t };
         return t.preset === void 0 && a.preset !== "custom" && (d.preset = "custom"), d;
       });
@@ -2203,9 +2203,9 @@ function Ls({
     []
   ), Jn = se((t) => {
     const a = Ba[t];
-    a && Rt({ ...a });
+    a && Pt({ ...a });
   }, []), Qn = () => {
-    O.remove(qt), en(), Rt({ ...$r });
+    O.remove(qt), en(), Pt({ ...$r });
   }, Po = se(
     (t) => {
       let a = "";
@@ -2261,7 +2261,7 @@ ${a}}`;
   ), ea = se(
     async (t, a) => {
       if (!v || !r) return;
-      Tt((f) => ({
+      jt((f) => ({
         ...f,
         [a]: { status: "creating" }
       }));
@@ -2274,7 +2274,7 @@ ${a}}`;
         }), y = await F.json();
         if (!F.ok) {
           if (F.status === 429) {
-            Tt((w) => ({
+            jt((w) => ({
               ...w,
               [a]: { status: "rate-limited", error: y.error }
             })), d == null || d.close();
@@ -2282,19 +2282,19 @@ ${a}}`;
           }
           throw new Error(y.error || "Failed to create PR");
         }
-        Tt((w) => ({
+        jt((w) => ({
           ...w,
           [a]: { status: "created", url: y.url }
         })), d ? d.location.href = y.url : window.open(y.url, "_blank");
       } catch {
-        Tt((f) => ({
+        jt((f) => ({
           ...f,
           [a]: { status: "error" }
         })), d == null || d.close();
       }
     },
     [v, r, Po]
-  ), At = (t, a) => {
+  ), Dt = (t, a) => {
     const d = a.toLowerCase();
     if (t === "--brand" && (d === "#000000" || d === "#ffffff"))
       return;
@@ -2303,7 +2303,7 @@ ${a}}`;
       if ((V === "#000000" || V === "#ffffff") && d === V || (k === "#000000" || k === "#ffffff") && d === k)
         return;
     }
-    const f = Ct(a), L = O.get(
+    const f = Nt(a), L = O.get(
       Me
     ) || [];
     L.push({ key: t, previousValue: i[t] || "" }), document.documentElement.style.setProperty(t, f);
@@ -2324,7 +2324,7 @@ ${a}}`;
     const G = Ie(F, H);
     for (const [V, k] of Object.entries(G))
       L.push({ key: V, previousValue: F[V] || "" }), document.documentElement.style.setProperty(V, k), F[V] = k, y[V] = k;
-    O.set(Me, L), A(F), O.set(ue, y), _t(G), window.dispatchEvent(new Event("theme-pending-update")), Ht(F), n && (Rr.current && clearTimeout(Rr.current), Rr.current = setTimeout(() => Dt(), 800));
+    O.set(Me, L), A(F), O.set(ue, y), _t(G), window.dispatchEvent(new Event("theme-pending-update")), zt(F), n && (Pr.current && clearTimeout(Pr.current), Pr.current = setTimeout(() => it(), 800));
   }, mr = () => {
     let t = `:root {
 `;
@@ -2396,55 +2396,55 @@ colors: {
 `, d += `  ring: "hsl(var(--ring))",
 `, d += "}";
     const f = t + d;
-    c ? c(f) : Lt(f);
+    c ? c(f) : Mt(f);
   }, ta = (t) => {
     if (!v) return;
-    const a = Ur[t], d = i["--brand"];
+    const a = Xr[t], d = i["--brand"];
     if (!d) return;
     const f = ya(d, a, i, B), L = O.get(
       Me
     ) || [], F = O.get(ue) || {}, y = { ...i };
     for (const [w, H] of Object.entries(f))
       L.push({ key: w, previousValue: y[w] || "" }), document.documentElement.style.setProperty(w, H), y[w] = H, F[w] = H;
-    O.set(Me, L), A(y), O.set(ue, F), window.dispatchEvent(new Event("theme-pending-update")), Ot(t), rr(!1), Ht(y), n && Dt();
-  }, Ir = () => {
+    O.set(Me, L), A(y), O.set(ue, F), window.dispatchEvent(new Event("theme-pending-update")), Ft(t), rr(!1), zt(y), n && it();
+  }, Vr = () => {
     J({ ...i });
     const t = document.documentElement.classList.contains("dark"), a = va(i, B, t), d = O.get(
       Me
     ) || [], f = O.get(ue) || {}, L = { ...i };
     for (const [F, y] of Object.entries(a))
       d.push({ key: F, previousValue: L[F] || "" }), document.documentElement.style.setProperty(F, y), L[F] = y, f[F] = y;
-    O.set(Me, d), A(L), O.set(ue, f), window.dispatchEvent(new Event("theme-pending-update")), Ot(-1), Ht(L), n && Dt();
+    O.set(Me, d), A(L), O.set(ue, f), window.dispatchEvent(new Event("theme-pending-update")), Ft(-1), zt(L), n && it();
   }, ra = () => {
     if (!_) return;
     const t = O.get(ue) || {};
     for (const [a, d] of Object.entries(_))
       document.documentElement.style.setProperty(a, d), t[a] = d;
-    A(_), O.set(ue, t), window.dispatchEvent(new Event("theme-pending-update")), J(null), Ht(_), n && Dt();
+    A(_), O.set(ue, t), window.dispatchEvent(new Event("theme-pending-update")), J(null), zt(_), n && it();
   }, Wo = async (t) => {
     try {
       ye("extracting");
       const a = await Ja(t), d = URL.createObjectURL(t);
-      Bt({ imageUrl: d, palette: a }), ye("idle");
+      Ht({ imageUrl: d, palette: a }), ye("idle");
     } catch (a) {
       console.error("Image palette extraction failed:", a), ye("error"), setTimeout(() => ye("idle"), 3e3);
     }
   }, Bo = async () => {
-    const t = Hr.trim();
+    const t = zr.trim();
     if (t) {
       try {
         new URL(t);
       } catch {
-        xt("Please enter a valid URL");
+        yt("Please enter a valid URL");
         return;
       }
-      xt("");
+      yt("");
       try {
         ye("extracting");
         const a = await qa(t);
-        Bt({ imageUrl: t, palette: a }), ye("idle"), hr("");
+        Ht({ imageUrl: t, palette: a }), ye("idle"), hr("");
       } catch (a) {
-        console.error("Image URL palette extraction failed:", a), xt(
+        console.error("Image URL palette extraction failed:", a), yt(
           "Failed to load image. The server may block cross-origin requests."
         ), ye("error"), setTimeout(() => ye("idle"), 3e3);
       }
@@ -2485,31 +2485,31 @@ colors: {
     ) || [], F = O.get(ue) || {}, y = { ...i };
     for (const [w, H] of Object.entries(a))
       H !== i[w] && (L.push({ key: w, previousValue: y[w] || "" }), document.documentElement.style.setProperty(w, H), y[w] = H, F[w] = H);
-    O.set(Me, L), A(y), O.set(ue, F), window.dispatchEvent(new Event("theme-pending-update")), Ot(-1), Ht(y), n && Dt(), ye("done"), setTimeout(() => ye("idle"), 3e3);
+    O.set(Me, L), A(y), O.set(ue, F), window.dispatchEvent(new Event("theme-pending-update")), Ft(-1), zt(y), n && it(), ye("done"), setTimeout(() => ye("idle"), 3e3);
   }, Ho = () => {
     Ne.forEach(({ key: t }) => {
       document.documentElement.style.removeProperty(t);
-    }), O.remove(Mr), O.remove(ue), O.remove(Me), O.remove(Ut), Uo(), pt({ ...Xr }), O.remove($t), Ko(), gt({ ...vr }), O.remove(Nt), Kr(), Xe({ ...Gt }), O.remove(Or), Ra(), mt({ ...St }), O.remove(Zt), Qo(), bt({ ...Cr }), O.remove(qt), en(), Rt({ ...$r }), Q(), Lt(null), Tt({}), window.dispatchEvent(new Event("theme-pending-update"));
+    }), O.remove(Mr), O.remove(ue), O.remove(Me), O.remove(Ut), Uo(), gt({ ...Kr }), O.remove(Lt), Ko(), ft({ ...vr }), O.remove(St), Zr(), Xe({ ...Gt }), O.remove(Or), Ra(), bt({ ...$t }), O.remove(Zt), Qo(), xt({ ...Cr }), O.remove(qt), en(), Pt({ ...$r }), Q(), Mt(null), jt({}), window.dispatchEvent(new Event("theme-pending-update"));
   }, na = () => {
-    O.remove(Ut), Uo(), pt({ ...Xr });
+    O.remove(Ut), Uo(), gt({ ...Kr });
   }, aa = () => {
-    O.remove($t), Ko(), gt({ ...vr });
-  }, Vr = (t) => {
+    O.remove(Lt), Ko(), ft({ ...vr });
+  }, Yr = (t) => {
     const a = document.querySelector(t.selector);
     a && (a.scrollIntoView({ behavior: "smooth", block: "center" }), a.style.outline = "3px solid hsl(0 84% 60%)", a.style.outlineOffset = "2px", setTimeout(() => {
       a.style.outline = "", a.style.outlineOffset = "";
     }, 3e3));
-  }, Dt = async () => {
+  }, it = async () => {
     var t;
     if (n) {
-      xe("running"), ut([]), $e(0);
+      xe("running"), pt([]), $e(0);
       try {
         const a = (await import("axe-core")).default;
         if ((await a.run(
           { exclude: ["[data-axe-exclude]"] },
           { runOnly: { type: "rule", values: ["color-contrast"] } }
         )).violations.length === 0)
-          xe("idle"), ut([]), $e(0);
+          xe("idle"), pt([]), $e(0);
         else {
           const f = getComputedStyle(document.documentElement), L = {};
           Ne.forEach(({ key: w }) => {
@@ -2527,7 +2527,7 @@ colors: {
             { runOnly: { type: "rule", values: ["color-contrast"] } }
           );
           if (y.violations.length === 0)
-            xe("idle"), ut([]), $e(0);
+            xe("idle"), pt([]), $e(0);
           else {
             xe("failed");
             const w = [];
@@ -2536,7 +2536,7 @@ colors: {
                 const V = String(G.target[0] || ""), k = document.querySelector(V), N = ((t = k == null ? void 0 : k.textContent) == null ? void 0 : t.trim().slice(0, 40)) || V;
                 w.push({ selector: V, text: N });
               }
-            ut(w), $e(0);
+            pt(w), $e(0);
           }
         }
       } catch {
@@ -2598,15 +2598,15 @@ colors: {
           const Y = Math.max(P, D, Z), re = Math.min(P, D, Z), he = (Y + re) / 2;
           if (Y === re) return { h: 0, s: 0, l: he };
           const me = Y - re, Io = he > 0.5 ? me / (2 - Y - re) : me / (Y + re);
-          let wt = 0;
-          return Y === P ? wt = ((D - Z) / me + (D < Z ? 6 : 0)) / 6 : Y === D ? wt = ((Z - P) / me + 2) / 6 : wt = ((P - D) / me + 4) / 6, { h: wt, s: Io, l: he };
-        }, it = (P, D, Z) => {
+          let Ct = 0;
+          return Y === P ? Ct = ((D - Z) / me + (D < Z ? 6 : 0)) / 6 : Y === D ? Ct = ((Z - P) / me + 2) / 6 : Ct = ((P - D) / me + 4) / 6, { h: Ct, s: Io, l: he };
+        }, ct = (P, D, Z) => {
           const Y = D * Math.min(Z, 1 - Z), re = (he) => {
             const me = (he + P * 12) % 12;
             return Z - Y * Math.max(Math.min(me - 3, 9 - me, 1), -1);
           };
           return `rgb(${Math.round(re(0) * 255)}, ${Math.round(re(8) * 255)}, ${Math.round(re(4) * 255)})`;
-        }, kt = async (P) => {
+        }, wt = async (P) => {
           const D = document.querySelector(
             P.target[0]
           );
@@ -2616,22 +2616,22 @@ colors: {
           const he = ae(...re), me = ae(...Y);
           if ((Math.max(me, he) + 0.05) / (Math.min(me, he) + 0.05) >= 4.5) return;
           D.scrollIntoView({ behavior: "smooth", block: "center" }), d(D, "hsl(0 84% 60%)"), await a(300);
-          const wt = ze(...Y);
+          const Ct = ze(...Y);
           let Vo = !1;
           for (const la of [
             he > 0.5 ? -0.01 : 0.01,
             he > 0.5 ? 0.01 : -0.01
           ]) {
-            const we = { ...wt };
+            const we = { ...Ct };
             for (let Yo = 0; Yo < 100; Yo++) {
               we.l = Math.max(0, Math.min(1, we.l + la));
-              const ia = we.s * Math.min(we.l, 1 - we.l), Yr = [0, 0, 0];
+              const ia = we.s * Math.min(we.l, 1 - we.l), Gr = [0, 0, 0];
               for (let br = 0; br < 3; br++) {
                 const Go = ([0, 8, 4][br] + we.h * 12) % 12;
-                Yr[br] = we.l - ia * Math.max(Math.min(Go - 3, 9 - Go, 1), -1);
+                Gr[br] = we.l - ia * Math.max(Math.min(Go - 3, 9 - Go, 1), -1);
               }
-              if ((Math.max(ae(...Yr), he) + 0.05) / (Math.min(ae(...Yr), he) + 0.05) >= 4.5) {
-                D.style.color = it(we.h, we.s, we.l), Vo = !0;
+              if ((Math.max(ae(...Gr), he) + 0.05) / (Math.min(ae(...Gr), he) + 0.05) >= 4.5) {
+                D.style.color = ct(we.h, we.s, we.l), Vo = !0;
                 break;
               }
             }
@@ -2646,12 +2646,12 @@ colors: {
           );
           if (!Z) break;
           for (let Y = 0; Y < Z.nodes.length; Y++)
-            $e(Y), await kt(Z.nodes[Y]);
+            $e(Y), await wt(Z.nodes[Y]);
         }
         await a(400);
         const Ae = await z();
         if (Ae.violations.length === 0)
-          xe("passed"), ut([]), $e(0);
+          xe("passed"), pt([]), $e(0);
         else {
           xe("failed");
           const P = [];
@@ -2660,7 +2660,7 @@ colors: {
               const Y = String(Z.target[0] || ""), re = document.querySelector(Y), he = ((t = re == null ? void 0 : re.textContent) == null ? void 0 : t.trim().slice(0, 40)) || Y;
               P.push({ selector: Y, text: he });
             }
-          ut(P), $e(0);
+          pt(P), $e(0);
         }
       } catch (a) {
         console.error("fixContrastIssues failed:", a), xe("failed");
@@ -2877,7 +2877,7 @@ colors: {
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => de(!Br),
+                onClick: () => de(!Hr),
                 className: "p-2 rounded-lg transition-opacity hover:opacity-70 md:hidden",
                 style: { color: "hsl(var(--foreground))" },
                 "aria-label": "Toggle menu",
@@ -2889,7 +2889,7 @@ colors: {
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
                     strokeWidth: 2,
-                    children: Br ? /* @__PURE__ */ e(
+                    children: Hr ? /* @__PURE__ */ e(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -2936,8 +2936,8 @@ colors: {
             const a = t.target.value;
             if (a === "reset-all") fe(!0);
             else if (a === "default")
-              Ot(-1), Ir();
-            else if (a === "refresh") Ir();
+              Ft(-1), Vr();
+            else if (a === "refresh") Vr();
             else if (a === "upload") Be(!0);
             else if (a === "export") gr(!0);
             else if (a === "share") {
@@ -2953,7 +2953,7 @@ colors: {
               window.location.hash = d, navigator.clipboard.writeText(window.location.href).then(() => {
                 pr(!0), setTimeout(() => pr(!1), 2e3);
               });
-            } else a === "pr" && Mt(!0);
+            } else a === "pr" ? Tt(!0) : a === "audit" && it();
             t.target.value = "";
           },
           children: [
@@ -2964,7 +2964,8 @@ colors: {
             /* @__PURE__ */ e("option", { value: "upload", children: "Upload Image" }),
             /* @__PURE__ */ e("option", { value: "export", children: "Export Palette" }),
             /* @__PURE__ */ e("option", { value: "share", children: "Share" }),
-            /* @__PURE__ */ e("option", { value: "pr", children: "Open PR" })
+            /* @__PURE__ */ e("option", { value: "pr", children: "Open PR" }),
+            n && /* @__PURE__ */ e("option", { value: "audit", children: "Accessibility Check" })
           ]
         }
       ) })
@@ -3002,7 +3003,7 @@ colors: {
       /* @__PURE__ */ e("div", { className: "flex items-center", children: /* @__PURE__ */ o(
         "button",
         {
-          onClick: Ir,
+          onClick: Vr,
           className: "ds-global-btn h-12 px-3 text-[14px] font-light rounded-lg transition-colors hover:opacity-80 flex items-center justify-center gap-1",
           children: [
             /* @__PURE__ */ e(
@@ -3089,7 +3090,7 @@ colors: {
                       )
                     }
                   ),
-                  /* @__PURE__ */ e("span", { className: "whitespace-nowrap", children: tr >= 0 ? Ur[tr] : "Palette Options" }),
+                  /* @__PURE__ */ e("span", { className: "whitespace-nowrap", children: tr >= 0 ? Xr[tr] : "Palette Options" }),
                   /* @__PURE__ */ e(
                     "svg",
                     {
@@ -3141,7 +3142,7 @@ colors: {
                       "button",
                       {
                         onClick: () => {
-                          Ot(-1), rr(!1);
+                          Ft(-1), rr(!1);
                         },
                         className: "w-full text-left px-4 py-2 text-[14px] font-light transition-colors hover:opacity-80 flex items-center justify-between",
                         style: { color: "hsl(var(--foreground))" },
@@ -3151,7 +3152,7 @@ colors: {
                         ]
                       }
                     ),
-                    Ur.map((t, a) => /* @__PURE__ */ o(
+                    Xr.map((t, a) => /* @__PURE__ */ o(
                       "button",
                       {
                         onClick: () => ta(a),
@@ -3388,7 +3389,7 @@ colors: {
           children: /* @__PURE__ */ o(
             "button",
             {
-              onClick: () => Mt(!0),
+              onClick: () => Tt(!0),
               className: "ds-global-btn h-12 px-3 text-[14px] font-light rounded-lg transition-colors hover:opacity-80 flex items-center justify-center gap-1",
               children: [
                 /* @__PURE__ */ e(
@@ -3421,6 +3422,35 @@ colors: {
             }
           )
         }
+      ),
+      n && /* @__PURE__ */ o(
+        "button",
+        {
+          onClick: () => it(),
+          className: "ds-global-btn h-12 px-3 text-[14px] font-light rounded-lg transition-colors hover:opacity-80 flex items-center justify-center gap-1",
+          title: "Run accessibility audit",
+          children: [
+            /* @__PURE__ */ e(
+              "svg",
+              {
+                className: "w-4 h-4 flex-shrink-0",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "truncate", children: Rr === "running" ? "Auditing..." : "Accessibility Check" })
+          ]
+        }
       )
     ] }) }),
     /* @__PURE__ */ e("div", { className: "w-full md:pt-12" }),
@@ -3590,7 +3620,7 @@ colors: {
           className: "w-full sm:w-auto order-first sm:order-last flex-shrink-0 sm:min-h-[36px] pointer-events-none [&>*]:pointer-events-auto",
           "data-axe-exclude": !0,
           children: [
-            n && ho === "failed" && /* @__PURE__ */ o(
+            n && Rr === "failed" && /* @__PURE__ */ o(
               "span",
               {
                 "aria-live": "assertive",
@@ -3606,8 +3636,8 @@ colors: {
                     "button",
                     {
                       onClick: () => {
-                        const t = (jt - 1 + pe.length) % pe.length;
-                        $e(t), Vr(pe[t]);
+                        const t = (Ot - 1 + pe.length) % pe.length;
+                        $e(t), Yr(pe[t]);
                       },
                       className: "text-red-600 dark:text-red-400 hover:opacity-70 disabled:opacity-30",
                       disabled: pe.length <= 1,
@@ -3615,7 +3645,7 @@ colors: {
                     }
                   ),
                   /* @__PURE__ */ o("span", { className: "text-[14px] tabular-nums", children: [
-                    jt + 1,
+                    Ot + 1,
                     "/",
                     pe.length
                   ] }),
@@ -3623,8 +3653,8 @@ colors: {
                     "button",
                     {
                       onClick: () => {
-                        const t = (jt + 1) % pe.length;
-                        $e(t), Vr(pe[t]);
+                        const t = (Ot + 1) % pe.length;
+                        $e(t), Yr(pe[t]);
                       },
                       className: "text-red-600 dark:text-red-400 hover:opacity-70 disabled:opacity-30",
                       disabled: pe.length <= 1,
@@ -3635,7 +3665,7 @@ colors: {
                     "button",
                     {
                       onClick: () => {
-                        pe[jt] && Vr(pe[jt]), setTimeout(() => sa(), 500);
+                        pe[Ot] && Yr(pe[Ot]), setTimeout(() => sa(), 500);
                       },
                       className: "ml-1 px-2 py-0.5 text-[14px] font-light rounded transition-colors hover:opacity-80 whitespace-nowrap",
                       style: {
@@ -3648,7 +3678,7 @@ colors: {
                 ]
               }
             ),
-            n && ho === "passed" && /* @__PURE__ */ o(
+            n && Rr === "passed" && /* @__PURE__ */ o(
               "span",
               {
                 "aria-live": "assertive",
@@ -3735,7 +3765,7 @@ colors: {
           )
         }
       ),
-      dt && /* @__PURE__ */ e(
+      ht && /* @__PURE__ */ e(
         "div",
         {
           className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
@@ -3836,7 +3866,7 @@ colors: {
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      onClick: () => ht(!1),
+                      onClick: () => ut(!1),
                       className: "px-3 py-1.5 text-[14px] font-light rounded-lg transition-colors hover:opacity-80",
                       style: {
                         backgroundColor: "transparent",
@@ -3849,7 +3879,7 @@ colors: {
                     "button",
                     {
                       onClick: () => {
-                        na(), ht(!1);
+                        na(), ut(!1);
                       },
                       className: "px-3 py-1.5 text-[14px] font-light rounded-lg transition-colors hover:opacity-80",
                       style: {
@@ -4029,7 +4059,7 @@ colors: {
                               {
                                 onClick: () => {
                                   if (Se && Le === "css") {
-                                    Lt(null);
+                                    Mt(null);
                                     return;
                                   }
                                   ur("css"), mr();
@@ -4077,7 +4107,7 @@ colors: {
                               {
                                 onClick: () => {
                                   if (Se && Le === "tokens") {
-                                    Lt(null);
+                                    Mt(null);
                                     return;
                                   }
                                   ur("tokens"), mr();
@@ -4163,7 +4193,7 @@ colors: {
                       className: "grid grid-cols-3 sm:grid-cols-5 gap-2 sm:gap-5 rounded-lg p-4 overflow-visible",
                       "data-axe-exclude": !0,
                       style: { backgroundColor: "rgba(0,0,0,0.04)" },
-                      children: Qr.filter(
+                      children: eo.filter(
                         ({ key: t }) => [
                           "--brand",
                           "--secondary",
@@ -4206,7 +4236,7 @@ colors: {
                                         onClick: () => {
                                           var z;
                                           if (window.innerWidth < 640) {
-                                            Ar(t), st(d ? De(d) : "#000000");
+                                            Dr(t), st(d ? De(d) : "#000000");
                                             return;
                                           }
                                           (z = document.getElementById("colors")) == null || z.scrollIntoView({
@@ -4249,7 +4279,7 @@ colors: {
                                         type: "color",
                                         "aria-label": `Select ${a} color`,
                                         value: i[t] ? De(i[t]) : "#000000",
-                                        onChange: (k) => At(t, k.target.value),
+                                        onChange: (k) => Dt(t, k.target.value),
                                         className: "absolute inset-0 opacity-0 cursor-pointer",
                                         style: { width: "100%", height: "calc(100% - 24px)" }
                                       }
@@ -4492,7 +4522,7 @@ colors: {
                                         null,
                                         2
                                       ) : Se;
-                                      navigator.clipboard.writeText(t), lo(!0), setTimeout(() => lo(!1), 2e3);
+                                      navigator.clipboard.writeText(t), io(!0), setTimeout(() => io(!1), 2e3);
                                     },
                                     className: "px-2 py-0.5 text-[14px] font-light rounded-lg transition-colors hover:opacity-80",
                                     style: {
@@ -4505,7 +4535,7 @@ colors: {
                                 /* @__PURE__ */ e(
                                   "button",
                                   {
-                                    onClick: () => Lt(null),
+                                    onClick: () => Mt(null),
                                     className: "px-2 py-0.5 text-[14px] font-light rounded-lg transition-colors hover:opacity-80",
                                     style: {
                                       backgroundColor: "hsl(var(--muted))",
@@ -4549,7 +4579,7 @@ colors: {
                           children: "Palette"
                         }
                       ),
-                      /* @__PURE__ */ e("div", { className: "grid grid-cols-6 gap-2 md:grid-cols-[repeat(auto-fit,minmax(76px,1fr))] md:gap-3", children: Qr.filter(
+                      /* @__PURE__ */ e("div", { className: "grid grid-cols-6 gap-2 md:grid-cols-[repeat(auto-fit,minmax(76px,1fr))] md:gap-3", children: eo.filter(
                         ({ key: t }) => ![
                           "--brand",
                           "--secondary",
@@ -4884,7 +4914,7 @@ colors: {
                                 value: "",
                                 onChange: (t) => {
                                   const a = t.target.value;
-                                  a === "css" ? (lr("css"), Je(!0)) : a === "tokens" ? (lr("tokens"), Je(!0)) : a === "reset" && mt({ ...St }), t.target.value = "";
+                                  a === "css" ? (lr("css"), Je(!0)) : a === "tokens" ? (lr("tokens"), Je(!0)) : a === "reset" && bt({ ...$t }), t.target.value = "";
                                 },
                                 children: [
                                   /* @__PURE__ */ e("option", { value: "", disabled: !0, children: "Actions…" }),
@@ -4950,7 +4980,7 @@ colors: {
                               /* @__PURE__ */ o(
                                 "button",
                                 {
-                                  onClick: () => mt({ ...St }),
+                                  onClick: () => bt({ ...$t }),
                                   className: "h-10 px-2 sm:px-3 text-[14px] font-light rounded-lg transition-colors hover:opacity-70 flex items-center justify-center gap-1",
                                   style: { color: "hsl(var(--muted-foreground))" },
                                   children: [
@@ -5822,7 +5852,7 @@ colors: {
                                           max: 1,
                                           step: 0.01,
                                           value: R.hoverOpacity,
-                                          onChange: (t) => zt({
+                                          onChange: (t) => At({
                                             hoverOpacity: Number(t.target.value)
                                           }),
                                           className: "w-32 accent-[hsl(var(--brand))]"
@@ -5849,7 +5879,7 @@ colors: {
                                           max: 1.1,
                                           step: 5e-3,
                                           value: R.hoverScale,
-                                          onChange: (t) => zt({
+                                          onChange: (t) => At({
                                             hoverScale: Number(t.target.value)
                                           }),
                                           className: "w-32 accent-[hsl(var(--brand))]"
@@ -5886,7 +5916,7 @@ colors: {
                                           max: 1.05,
                                           step: 5e-3,
                                           value: R.activeScale,
-                                          onChange: (t) => zt({
+                                          onChange: (t) => At({
                                             activeScale: Number(t.target.value)
                                           }),
                                           className: "w-32 accent-[hsl(var(--brand))]"
@@ -5924,7 +5954,7 @@ colors: {
                                           max: 500,
                                           step: 10,
                                           value: R.transitionDuration,
-                                          onChange: (t) => zt({
+                                          onChange: (t) => At({
                                             transitionDuration: Number(t.target.value)
                                           }),
                                           className: "w-32 accent-[hsl(var(--brand))]"
@@ -5952,7 +5982,7 @@ colors: {
                                           max: 4,
                                           step: 0.5,
                                           value: R.focusRingWidth,
-                                          onChange: (t) => zt({
+                                          onChange: (t) => At({
                                             focusRingWidth: Number(t.target.value)
                                           }),
                                           className: "w-32 accent-[hsl(var(--brand))]"
@@ -6190,7 +6220,7 @@ colors: {
                         value: "",
                         onChange: (t) => {
                           const a = t.target.value;
-                          a === "css" ? (or("css"), Ge(!0)) : a === "tokens" ? (or("tokens"), Ge(!0)) : a === "reset" && ht(!0), t.target.value = "";
+                          a === "css" ? (or("css"), Ge(!0)) : a === "tokens" ? (or("tokens"), Ge(!0)) : a === "reset" && ut(!0), t.target.value = "";
                         },
                         children: [
                           /* @__PURE__ */ e("option", { value: "", disabled: !0, children: "Actions…" }),
@@ -6296,7 +6326,7 @@ colors: {
                       /* @__PURE__ */ o(
                         "button",
                         {
-                          onClick: () => ht(!0),
+                          onClick: () => ut(!0),
                           className: "h-10 px-2 sm:px-3 text-[14px] font-light rounded-lg transition-colors hover:opacity-70 flex items-center justify-center gap-1",
                           style: { color: "hsl(var(--muted-foreground))" },
                           children: [
@@ -7088,7 +7118,7 @@ colors: {
                                 min: 0,
                                 max: 24,
                                 value: I.borderRadius,
-                                onChange: (t) => Dr({
+                                onChange: (t) => Ir({
                                   borderRadius: Number(t.target.value)
                                 }),
                                 className: "w-32 accent-[hsl(var(--brand))]"
@@ -7115,7 +7145,7 @@ colors: {
                                 min: 0,
                                 max: 4,
                                 value: I.borderWidth,
-                                onChange: (t) => Dr({
+                                onChange: (t) => Ir({
                                   borderWidth: Number(t.target.value)
                                 }),
                                 className: "w-32 accent-[hsl(var(--brand))]"
@@ -7142,7 +7172,7 @@ colors: {
                                 min: 8,
                                 max: 32,
                                 value: I.padding,
-                                onChange: (t) => Dr({ padding: Number(t.target.value) }),
+                                onChange: (t) => Ir({ padding: Number(t.target.value) }),
                                 className: "w-32 accent-[hsl(var(--brand))]"
                               }
                             )
@@ -7253,10 +7283,10 @@ colors: {
                               {
                                 onClick: () => {
                                   if (Ke && Oe === "css") {
-                                    Ft(!1);
+                                    Et(!1);
                                     return;
                                   }
-                                  No("css"), Ft(!0);
+                                  No("css"), Et(!0);
                                 },
                                 className: "h-8 px-2 text-[13px] font-light transition-colors hover:opacity-70 flex items-center justify-center gap-1",
                                 style: {
@@ -7278,10 +7308,10 @@ colors: {
                               {
                                 onClick: () => {
                                   if (Ke && Oe === "tokens") {
-                                    Ft(!1);
+                                    Et(!1);
                                     return;
                                   }
-                                  No("tokens"), Ft(!0);
+                                  No("tokens"), Et(!0);
                                 },
                                 className: "h-8 px-2 text-[13px] font-light transition-colors hover:opacity-70 flex items-center justify-center gap-1",
                                 style: {
@@ -7298,7 +7328,7 @@ colors: {
                         "button",
                         {
                           onClick: () => {
-                            O.remove(Nt), Kr(), Xe({ ...Gt });
+                            O.remove(St), Zr(), Xe({ ...Gt });
                           },
                           className: "h-8 px-2 text-[13px] font-light rounded-lg transition-colors hover:opacity-70 flex items-center justify-center gap-1",
                           style: { color: "hsl(var(--muted-foreground))" },
@@ -7354,7 +7384,7 @@ colors: {
                                     /* @__PURE__ */ e(
                                       "button",
                                       {
-                                        onClick: () => Ft(!1),
+                                        onClick: () => Et(!1),
                                         className: "px-2 py-0.5 text-[13px] font-light rounded-lg transition-colors hover:opacity-80",
                                         style: {
                                           backgroundColor: "hsl(var(--muted))",
@@ -7631,10 +7661,10 @@ colors: {
                                   {
                                     onClick: () => {
                                       if (Ze && Fe === "css") {
-                                        Et(!1);
+                                        Rt(!1);
                                         return;
                                       }
-                                      $o("css"), Et(!0);
+                                      $o("css"), Rt(!0);
                                     },
                                     className: "h-8 px-2 text-[13px] font-light transition-colors hover:opacity-70 flex items-center justify-center gap-1",
                                     style: {
@@ -7656,10 +7686,10 @@ colors: {
                                   {
                                     onClick: () => {
                                       if (Ze && Fe === "tokens") {
-                                        Et(!1);
+                                        Rt(!1);
                                         return;
                                       }
-                                      $o("tokens"), Et(!0);
+                                      $o("tokens"), Rt(!0);
                                     },
                                     className: "h-8 px-2 text-[13px] font-light transition-colors hover:opacity-70 flex items-center justify-center gap-1",
                                     style: {
@@ -7732,7 +7762,7 @@ colors: {
                                         /* @__PURE__ */ e(
                                           "button",
                                           {
-                                            onClick: () => Et(!1),
+                                            onClick: () => Rt(!1),
                                             className: "px-2 py-0.5 text-[13px] font-light rounded-lg transition-colors hover:opacity-80",
                                             style: {
                                               backgroundColor: "hsl(var(--muted))",
@@ -8551,9 +8581,9 @@ colors: {
                                             "input",
                                             {
                                               type: "text",
-                                              value: ft,
+                                              value: mt,
                                               onChange: (t) => {
-                                                xo(t.target.value), Pr("");
+                                                xo(t.target.value), Wr("");
                                               },
                                               placeholder: "Google Font name…",
                                               className: "flex-1 min-w-0 h-8 px-2 text-[14px] font-light rounded-md border",
@@ -8563,23 +8593,23 @@ colors: {
                                                 borderColor: "hsl(var(--border))"
                                               },
                                               onKeyDown: (t) => {
-                                                t.key === "Enter" && ft.trim() && (t.preventDefault(), Eo());
+                                                t.key === "Enter" && mt.trim() && (t.preventDefault(), Eo());
                                               }
                                             }
                                           ),
                                           /* @__PURE__ */ e(
                                             "button",
                                             {
-                                              disabled: Wr || !ft.trim(),
+                                              disabled: Br || !mt.trim(),
                                               onClick: Eo,
                                               className: "h-8 px-2 text-[12px] font-medium rounded-md border whitespace-nowrap",
                                               style: {
                                                 backgroundColor: "hsl(var(--primary))",
                                                 color: "hsl(var(--primary-foreground))",
                                                 borderColor: "hsl(var(--border))",
-                                                opacity: Wr || !ft.trim() ? 0.5 : 1
+                                                opacity: Br || !mt.trim() ? 0.5 : 1
                                               },
-                                              children: Wr ? "…" : "+ Font"
+                                              children: Br ? "…" : "+ Font"
                                             }
                                           )
                                         ] })
@@ -8738,7 +8768,7 @@ colors: {
                                 value: "",
                                 onChange: (t) => {
                                   const a = t.target.value;
-                                  a === "css" ? (dr("css"), rt(!0)) : a === "tokens" ? (dr("tokens"), rt(!0)) : a === "reset" && Pt(!0), t.target.value = "";
+                                  a === "css" ? (dr("css"), rt(!0)) : a === "tokens" ? (dr("tokens"), rt(!0)) : a === "reset" && Wt(!0), t.target.value = "";
                                 },
                                 children: [
                                   /* @__PURE__ */ e("option", { value: "", disabled: !0, children: "Actions…" }),
@@ -8844,7 +8874,7 @@ colors: {
                               /* @__PURE__ */ o(
                                 "button",
                                 {
-                                  onClick: () => Pt(!0),
+                                  onClick: () => Wt(!0),
                                   className: "h-10 px-2 sm:px-3 text-[14px] font-light rounded-lg transition-colors hover:opacity-70 flex items-center justify-center gap-1",
                                   style: { color: "hsl(var(--muted-foreground))" },
                                   children: [
@@ -9471,7 +9501,7 @@ colors: {
               {
                 className: "fixed inset-0 z-50 flex items-center justify-center",
                 style: { backgroundColor: "rgba(0,0,0,0.5)" },
-                onClick: () => Pt(!1),
+                onClick: () => Wt(!1),
                 children: /* @__PURE__ */ o(
                   "div",
                   {
@@ -9492,7 +9522,7 @@ colors: {
                         /* @__PURE__ */ e(
                           "button",
                           {
-                            onClick: () => Pt(!1),
+                            onClick: () => Wt(!1),
                             className: "px-4 py-2 text-[14px] font-light rounded-lg",
                             style: { backgroundColor: "#e5e7eb", color: "#111" },
                             children: "Cancel"
@@ -9502,7 +9532,7 @@ colors: {
                           "button",
                           {
                             onClick: () => {
-                              Qn(), Pt(!1);
+                              Qn(), Wt(!1);
                             },
                             className: "px-4 py-2 text-[14px] font-light rounded-lg",
                             style: { backgroundColor: "#ef4444", color: "#fff" },
@@ -9524,7 +9554,7 @@ colors: {
       {
         className: "fixed inset-0 z-50 flex items-center justify-center",
         onClick: () => {
-          fr(!1), Wt(""), yt(null);
+          fr(!1), Bt(""), vt(null);
         },
         children: [
           /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/50" }),
@@ -9541,7 +9571,7 @@ colors: {
                     "button",
                     {
                       onClick: () => {
-                        fr(!1), Wt(""), yt(null);
+                        fr(!1), Bt(""), vt(null);
                       },
                       className: "p-1 rounded hover:opacity-70",
                       style: { color: "hsl(var(--muted-foreground))" },
@@ -9572,7 +9602,7 @@ $primary: #3b82f6;
 $background: #fff;`,
                     value: In,
                     onChange: (t) => {
-                      Wt(t.target.value), t.target.value.trim() ? yt(Va(t.target.value)) : yt(null);
+                      Bt(t.target.value), t.target.value.trim() ? vt(Va(t.target.value)) : vt(null);
                     }
                   }
                 ),
@@ -9642,7 +9672,7 @@ $background: #fff;`,
                     "button",
                     {
                       onClick: () => {
-                        fr(!1), Wt(""), yt(null);
+                        fr(!1), Bt(""), vt(null);
                       },
                       className: "px-4 py-2 text-[14px] font-light rounded-lg",
                       style: { backgroundColor: "#e5e7eb", color: "#111" },
@@ -9661,22 +9691,22 @@ $background: #fff;`,
                               document.documentElement.style.setProperty(a, d);
                             A(t);
                           }
-                          Object.keys(W.cardStyle).length > 0 && pt((t) => {
+                          Object.keys(W.cardStyle).length > 0 && gt((t) => {
                             const a = { ...t, ...W.cardStyle, preset: "custom" };
                             return yr(a, i), a;
-                          }), Object.keys(W.typographyState).length > 0 && gt((t) => {
+                          }), Object.keys(W.typographyState).length > 0 && ft((t) => {
                             const a = { ...t, ...W.typographyState, preset: "custom" };
                             return Xt(a), a;
-                          }), Object.keys(W.buttonStyle).length > 0 && mt((t) => {
+                          }), Object.keys(W.buttonStyle).length > 0 && bt((t) => {
                             const a = { ...t, ...W.buttonStyle };
                             return Sr(a), a;
-                          }), Object.keys(W.interactionStyle).length > 0 && bt((t) => {
+                          }), Object.keys(W.interactionStyle).length > 0 && xt((t) => {
                             const a = { ...t, ...W.interactionStyle, preset: "custom" };
                             return Nr(a), a;
                           }), Object.keys(W.alertStyle).length > 0 && Xe((t) => {
                             const a = { ...t, ...W.alertStyle, preset: "custom" };
                             return kr(a), a;
-                          }), fr(!1), Wt(""), yt(null);
+                          }), fr(!1), Bt(""), vt(null);
                         }
                       },
                       className: "px-4 py-2 text-[14px] font-light rounded-lg transition-opacity",
@@ -9701,7 +9731,7 @@ $background: #fff;`,
         className: "fixed inset-0 z-50 flex items-center justify-center",
         style: { backgroundColor: "rgba(0,0,0,0.5)" },
         onClick: () => {
-          Be(!1), hr(""), xt("");
+          Be(!1), hr(""), yt("");
         },
         onDragOver: (t) => {
           t.preventDefault(), t.stopPropagation();
@@ -9816,9 +9846,9 @@ $background: #fff;`,
                     "input",
                     {
                       type: "text",
-                      value: Hr,
+                      value: zr,
                       onChange: (t) => {
-                        hr(t.target.value), xt("");
+                        hr(t.target.value), yt("");
                       },
                       onKeyDown: (t) => {
                         t.key === "Enter" && (Bo(), Be(!1));
@@ -9826,7 +9856,7 @@ $background: #fff;`,
                       placeholder: "https://example.com/photo.jpg",
                       className: "flex-1 h-10 px-3 text-[14px] font-light rounded-lg border bg-transparent",
                       style: {
-                        borderColor: zr ? "hsl(var(--destructive))" : "hsl(var(--border))",
+                        borderColor: Ar ? "hsl(var(--destructive))" : "hsl(var(--border))",
                         color: "hsl(var(--foreground))"
                       },
                       autoFocus: !0
@@ -9838,7 +9868,7 @@ $background: #fff;`,
                       onClick: () => {
                         Bo(), Be(!1);
                       },
-                      disabled: We === "extracting" || !Hr.trim(),
+                      disabled: We === "extracting" || !zr.trim(),
                       className: "h-10 px-4 text-[14px] font-light rounded-lg transition-colors hover:opacity-80",
                       style: {
                         backgroundColor: "hsl(var(--brand))",
@@ -9848,12 +9878,12 @@ $background: #fff;`,
                     }
                   )
                 ] }),
-                zr && /* @__PURE__ */ e(
+                Ar && /* @__PURE__ */ e(
                   "p",
                   {
                     className: "text-[12px] font-light mt-1",
                     style: { color: "hsl(var(--destructive))" },
-                    children: zr
+                    children: Ar
                   }
                 )
               ] }),
@@ -9889,7 +9919,7 @@ $background: #fff;`,
                 "button",
                 {
                   onClick: () => {
-                    Be(!1), hr(""), xt("");
+                    Be(!1), hr(""), yt("");
                   },
                   className: "px-3 py-1.5 text-[14px] font-light rounded-lg transition-colors hover:opacity-80",
                   style: { color: "hsl(var(--muted-foreground))" },
@@ -9907,7 +9937,7 @@ $background: #fff;`,
         className: "fixed inset-0 z-50 flex items-center justify-center",
         style: { backgroundColor: "rgba(0,0,0,0.5)" },
         onClick: () => {
-          URL.revokeObjectURL(ot.imageUrl), Bt(null);
+          URL.revokeObjectURL(ot.imageUrl), Ht(null);
         },
         children: /* @__PURE__ */ o(
           "div",
@@ -9973,7 +10003,7 @@ $background: #fff;`,
                   "button",
                   {
                     onClick: () => {
-                      URL.revokeObjectURL(ot.imageUrl), Bt(null);
+                      URL.revokeObjectURL(ot.imageUrl), Ht(null);
                     },
                     className: "px-3 py-1.5 text-[14px] font-light rounded-lg transition-colors hover:opacity-80",
                     style: { color: "hsl(var(--card-foreground))" },
@@ -9986,7 +10016,7 @@ $background: #fff;`,
                     onClick: () => {
                       oa(ot.palette);
                       const t = ot.imageUrl;
-                      Bt(null), Fo(t), setTimeout(() => {
+                      Ht(null), Fo(t), setTimeout(() => {
                         Fo((a) => (a === t && URL.revokeObjectURL(t), a === t ? null : a));
                       }, 3e3);
                     },
@@ -10032,26 +10062,26 @@ $background: #fff;`,
       }, a = (k, N, z) => {
         k /= 255, N /= 255, z /= 255;
         const le = Math.max(k, N, z), ae = Math.min(k, N, z);
-        let ze = 0, it = 0;
-        const kt = (le + ae) / 2;
+        let ze = 0, ct = 0;
+        const wt = (le + ae) / 2;
         if (le !== ae) {
           const Ae = le - ae;
-          it = kt > 0.5 ? Ae / (2 - le - ae) : Ae / (le + ae), le === k ? ze = ((N - z) / Ae + (N < z ? 6 : 0)) / 6 : le === N ? ze = ((z - k) / Ae + 2) / 6 : ze = ((k - N) / Ae + 4) / 6;
+          ct = wt > 0.5 ? Ae / (2 - le - ae) : Ae / (le + ae), le === k ? ze = ((N - z) / Ae + (N < z ? 6 : 0)) / 6 : le === N ? ze = ((z - k) / Ae + 2) / 6 : ze = ((k - N) / Ae + 4) / 6;
         }
-        return { h: Math.round(ze * 360), s: Math.round(it * 100), l: Math.round(kt * 100) };
+        return { h: Math.round(ze * 360), s: Math.round(ct * 100), l: Math.round(wt * 100) };
       }, d = (k, N, z) => {
         N /= 100, z /= 100;
         const le = N * Math.min(z, 1 - z), ae = (ze) => {
-          const it = (ze + k / 30) % 12, kt = z - le * Math.max(Math.min(it - 3, 9 - it, 1), -1);
-          return Math.round(255 * kt).toString(16).padStart(2, "0");
+          const ct = (ze + k / 30) % 12, wt = z - le * Math.max(Math.min(ct - 3, 9 - ct, 1), -1);
+          return Math.round(255 * wt).toString(16).padStart(2, "0");
         };
         return `#${ae(0)}${ae(8)}${ae(4)}`;
-      }, { r: f, g: L, b: F } = t(at), y = a(f, L, F), w = ee("0 0% 100%", Ct(at)), H = ee("0 0% 0%", Ct(at)), G = w >= H ? "#ffffff" : "#000000", V = ["--brand", "--secondary", "--accent", "--background", "--foreground"].map((k) => {
+      }, { r: f, g: L, b: F } = t(at), y = a(f, L, F), w = ee("0 0% 100%", Nt(at)), H = ee("0 0% 0%", Nt(at)), G = w >= H ? "#ffffff" : "#000000", V = ["--brand", "--secondary", "--accent", "--background", "--foreground"].map((k) => {
         var N;
         return {
           key: k,
-          label: ((N = Qr.find((z) => z.key === k)) == null ? void 0 : N.label) || k,
-          hsl: k === nt ? Ct(at) : i[k],
+          label: ((N = eo.find((z) => z.key === k)) == null ? void 0 : N.label) || k,
+          hsl: k === nt ? Nt(at) : i[k],
           active: k === nt
         };
       });
@@ -10065,7 +10095,7 @@ $background: #fff;`,
               "button",
               {
                 onClick: () => {
-                  Ar(k.key), st(k.hsl ? De(k.hsl) : "#000000");
+                  Dr(k.key), st(k.hsl ? De(k.hsl) : "#000000");
                 },
                 className: "flex-1 flex flex-col items-center gap-0.5",
                 children: [
@@ -10115,7 +10145,7 @@ $background: #fff;`,
                     value: y.h,
                     onChange: (k) => {
                       const N = d(Number(k.target.value), y.s, y.l);
-                      st(N), At(nt, N);
+                      st(N), Dt(nt, N);
                     },
                     className: "w-full h-8 rounded-lg appearance-none cursor-pointer",
                     style: {
@@ -10139,7 +10169,7 @@ $background: #fff;`,
                     value: y.s,
                     onChange: (k) => {
                       const N = d(y.h, Number(k.target.value), y.l);
-                      st(N), At(nt, N);
+                      st(N), Dt(nt, N);
                     },
                     className: "w-full h-8 rounded-lg appearance-none cursor-pointer",
                     style: {
@@ -10163,7 +10193,7 @@ $background: #fff;`,
                     value: y.l,
                     onChange: (k) => {
                       const N = d(y.h, y.s, Number(k.target.value));
-                      st(N), At(nt, N);
+                      st(N), Dt(nt, N);
                     },
                     className: "w-full h-8 rounded-lg appearance-none cursor-pointer",
                     style: {
@@ -10181,7 +10211,7 @@ $background: #fff;`,
                     value: at,
                     onChange: (k) => {
                       const N = k.target.value;
-                      /^#[0-9a-fA-F]{6}$/.test(N) ? (st(N), At(nt, N)) : st(N);
+                      /^#[0-9a-fA-F]{6}$/.test(N) ? (st(N), Dt(nt, N)) : st(N);
                     },
                     className: "w-full h-10 px-3 text-[16px] font-mono rounded-lg border bg-transparent",
                     style: { borderColor: "hsl(var(--border))", color: "hsl(var(--foreground))" }
@@ -10192,7 +10222,7 @@ $background: #fff;`,
             /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => Ar(null),
+                onClick: () => Dr(null),
                 className: "w-full h-12 rounded-xl text-[16px] font-medium cursor-pointer",
                 style: {
                   backgroundColor: "hsl(var(--primary))",
@@ -10228,24 +10258,24 @@ $background: #fff;`,
                   label: "Copy as HEX",
                   action: () => {
                     navigator.clipboard.writeText(
-                      Zr(i, "hex")
-                    ), vt(!0), setTimeout(() => vt(!1), 2e3);
+                      qr(i, "hex")
+                    ), kt(!0), setTimeout(() => kt(!1), 2e3);
                   }
                 },
                 {
                   label: "Copy as RGB",
                   action: () => {
                     navigator.clipboard.writeText(
-                      Zr(i, "rgb")
-                    ), vt(!0), setTimeout(() => vt(!1), 2e3);
+                      qr(i, "rgb")
+                    ), kt(!0), setTimeout(() => kt(!1), 2e3);
                   }
                 },
                 {
                   label: "Copy as RGBA",
                   action: () => {
                     navigator.clipboard.writeText(
-                      Zr(i, "rgba")
-                    ), vt(!0), setTimeout(() => vt(!1), 2e3);
+                      qr(i, "rgba")
+                    ), kt(!0), setTimeout(() => kt(!1), 2e3);
                   }
                 },
                 {
@@ -10305,7 +10335,7 @@ $background: #fff;`,
       {
         className: "fixed inset-0 z-50 flex items-center justify-center",
         style: { backgroundColor: "rgba(0,0,0,0.5)" },
-        onClick: () => Mt(!1),
+        onClick: () => Tt(!1),
         children: /* @__PURE__ */ o(
           "div",
           {
@@ -10363,7 +10393,7 @@ $background: #fff;`,
               /* @__PURE__ */ e("div", { className: "flex justify-end", children: /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: () => Mt(!1),
+                  onClick: () => Tt(!1),
                   className: "px-4 py-1.5 text-[14px] font-light rounded-lg transition-colors hover:opacity-80",
                   style: {
                     backgroundColor: "#e5e7eb",
@@ -10428,7 +10458,7 @@ $background: #fff;`,
                           type: "checkbox",
                           checked: Qt.has(t),
                           onChange: () => {
-                            io((d) => {
+                            co((d) => {
                               const f = new Set(d);
                               return f.has(t) ? f.delete(t) : f.add(t), f;
                             });
@@ -10458,7 +10488,7 @@ $background: #fff;`,
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    disabled: Qt.size === 0 || ((Ao = co.main) == null ? void 0 : Ao.status) === "creating",
+                    disabled: Qt.size === 0 || ((Ao = ho.main) == null ? void 0 : Ao.status) === "creating",
                     onClick: () => {
                       ea(Qt, "main"), er(!1);
                     },
@@ -10468,7 +10498,7 @@ $background: #fff;`,
                       color: "#111",
                       boxShadow: "0 2px 4px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6)"
                     },
-                    children: ((Do = co.main) == null ? void 0 : Do.status) === "creating" ? "Preparing..." : `Submit PR (${Qt.size})`
+                    children: ((Do = ho.main) == null ? void 0 : Do.status) === "creating" ? "Preparing..." : `Submit PR (${Qt.size})`
                   }
                 )
               ] })
@@ -10477,7 +10507,7 @@ $background: #fff;`,
         )
       }
     ),
-    Br && /* @__PURE__ */ o(
+    Hr && /* @__PURE__ */ o(
       "div",
       {
         className: "lg:hidden fixed inset-0 z-40",
@@ -10628,10 +10658,10 @@ $background: #fff;`,
                           {
                             onClick: () => {
                               if (de(!1), !r) {
-                                Mt(!0);
+                                Tt(!0);
                                 return;
                               }
-                              io(/* @__PURE__ */ new Set()), er(!0);
+                              co(/* @__PURE__ */ new Set()), er(!0);
                             },
                             className: "block py-2 text-[20px] font-bold tracking-wider mb-[5px] transition-opacity hover:opacity-70 flex items-baseline gap-2",
                             style: { color: "hsl(var(--foreground))" },
@@ -10728,16 +10758,16 @@ function Rs({
   return /* @__PURE__ */ e(_a, { licenseKey: r, children: /* @__PURE__ */ e(Ls, { ...n }) });
 }
 export {
-  Nt as ALERT_STYLE_KEY,
+  St as ALERT_STYLE_KEY,
   Ut as CARD_STYLE_KEY,
   Rs as DesignSystemEditor,
   Ne as EDITABLE_VARS,
-  Ur as HARMONY_SCHEMES,
+  Xr as HARMONY_SCHEMES,
   Zt as INTERACTION_STYLE_KEY,
   _a as LicenseProvider,
   Ce as PremiumGate,
   Kt as TOAST_STYLE_KEY,
-  $t as TYPOGRAPHY_KEY,
+  Lt as TYPOGRAPHY_KEY,
   Sa as addCustomFont,
   ja as applyStoredAlertStyle,
   wa as applyStoredCardStyle,
@@ -10749,12 +10779,12 @@ export {
   Aa as deserializeThemeState,
   za as exportPaletteAsPng,
   mn as exportPaletteAsSvg,
-  Zr as exportPaletteAsText,
+  qr as exportPaletteAsText,
   M as fgForBg,
   rn as generateDesignTokens,
   Es as generateLicenseKey,
-  ct as getCustomFonts,
-  Ct as hexToHslString,
+  dt as getCustomFonts,
+  Nt as hexToHslString,
   De as hslStringToHex,
   La as initCustomFonts,
   $a as removeCustomFont,