@ramme-io/ui 4.0.0 → 4.1.0

package/dist/components/theme/ThemeLab.js

@@ -1,23 +1,23 @@
-import { jsxs as a, jsx as e, Fragment as pe } from "react/jsx-runtime";
-import { useState as w, useEffect as j, useCallback as n } from "react";
-import { Button as I } from "../ui/Button.js";
-import { Icon as c } from "../ui/Icon.js";
-import { Card as D } from "../layout/Card.js";
-import { loadGoogleFont as x, applyThemeToDom as m, hexToRgbTriplet as ue, tokensToVars as V } from "../../lib/theme/themeUtils.js";
-import { AestheticProfileGrid as fe } from "./AestheticProfileGrid.js";
-import { ThemeSynthesizer as be } from "./ThemeSynthesizer.js";
-import { FineTuningControls as he } from "./FineTuningControls.js";
-import { PaletteSwatch as xe } from "./ThemeLivePreview.js";
-import { paletteToRgbVars as g, generateRandom as ge, generateFromProfile as ye, hslToCssString as i } from "../../lib/theme/ThemeGenerator.logic.js";
-function W(p) {
+import { jsxs as s, jsx as e, Fragment as ue } from "react/jsx-runtime";
+import { useState as w, useEffect as j, useCallback as c } from "react";
+import { Button as D } from "../ui/Button.js";
+import { Icon as n } from "../ui/Icon.js";
+import { Card as E } from "../layout/Card.js";
+import { loadGoogleFont as x, applyThemeToDom as m, hexToRgbTriplet as fe, tokensToVars as W } from "../../lib/theme/themeUtils.js";
+import { AestheticProfileGrid as be } from "./AestheticProfileGrid.js";
+import { ThemeSynthesizer as he } from "./ThemeSynthesizer.js";
+import { FineTuningControls as xe } from "./FineTuningControls.js";
+import { PaletteSwatch as ge } from "./ThemeLivePreview.js";
+import { paletteToRgbVars as g, generateRandom as ye, generateFromProfile as Ne, hslToCssString as i } from "../../lib/theme/ThemeGenerator.logic.js";
+function _(p) {
   const d = p.split(" ").map(Number);
   return d.length !== 3 || d.some(isNaN) ? "#000000" : "#" + d.map((y) => y.toString(16).padStart(2, "0")).join("");
 }
-const Ne = {
+const ke = {
   system: "light",
   light: "dark",
   dark: "system"
-}, E = {
+}, M = {
   light: { icon: "sun", label: "Light" },
   dark: { icon: "moon", label: "Dark" },
   system: { icon: "monitor", label: "System" }
@@ -27,67 +27,68 @@ const Ne = {
   { key: "success", label: "Success", description: "Confirmation states and positive indicators" },
   { key: "warning", label: "Warning", description: "Caution states and alert indicators" },
   { key: "destructive", label: "Destructive", description: "Error states and danger actions" }
-], Fe = ({
+], He = ({
   activeTokens: p,
   savedTokens: d,
   onTokensChange: y,
-  onSave: _,
-  onRevert: A,
+  onSave: A,
+  onRevert: Y,
+  onResetToDefault: P,
   profiles: U,
-  profileIcons: Y,
-  activeProfileId: q,
-  onProfileClick: M,
-  prompt: J,
-  isGenerating: K,
-  onPromptChange: Q,
-  onGenerate: X,
-  onRandomize: P,
-  generateError: Z,
-  aiProviderLabel: T,
-  generatedTheme: s,
+  profileIcons: q,
+  activeProfileId: J,
+  onProfileClick: R,
+  prompt: K,
+  isGenerating: Q,
+  onPromptChange: X,
+  onGenerate: Z,
+  onRandomize: F,
+  generateError: T,
+  aiProviderLabel: ee,
+  generatedTheme: a,
   headingFont: u,
-  setHeadingFont: R,
+  setHeadingFont: H,
   bodyFont: f,
-  setBodyFont: F,
-  borderRadius: ee,
-  setBorderRadius: H,
-  baseFontSize: re,
-  setBaseFontSize: L,
+  setBodyFont: L,
+  borderRadius: re,
+  setBorderRadius: $,
+  baseFontSize: se,
+  setBaseFontSize: B,
   themeMode: N,
-  onThemeModeChange: v
+  onThemeModeChange: k
 }) => {
-  const [l, $] = w(p), [C, B] = w("manual"), [o, G] = w(N ?? "system"), [S, se] = w(!1);
+  const [l, G] = w(p), [C, I] = w("manual"), [o, O] = w(N ?? "system"), [S, ae] = w(!1);
   j(() => {
-    $(p);
+    G(p);
   }, [p]), j(() => {
-    N !== void 0 && G(N);
+    N !== void 0 && O(N);
   }, [N]), j(() => {
-    if (!s) return;
+    if (!a) return;
     const r = o === "dark" || o === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches;
-    x(s.fonts.heading, s.fonts.body), m({
-      ...g(r ? s.dark : s.light),
-      "--app-border-radius-md": s.borderRadius,
-      "--app-font-size-base": s.baseFontSize
+    x(a.fonts.heading, a.fonts.body), m({
+      ...g(r ? a.dark : a.light),
+      "--app-border-radius-md": a.borderRadius,
+      "--app-font-size-base": a.baseFontSize
     });
-  }, [s, o]);
-  const ae = n((r, t) => {
-    const b = ue(t), h = { ...l, [r]: b };
-    $(h), m(V(h)), y(h);
-  }, [l, y]), te = n(() => {
-    const r = Ne[o];
-    G(r);
+  }, [a, o]);
+  const te = c((r, t) => {
+    const b = fe(t), h = { ...l, [r]: b };
+    G(h), m(W(h)), y(h);
+  }, [l, y]), oe = c(() => {
+    const r = ke[o];
+    O(r);
     const t = r === "dark" || r === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches;
-    document.documentElement.classList.toggle("dark", t), s && m(g(t ? s.dark : s.light)), v == null || v(r);
-  }, [o, v, s]), oe = n(() => {
-    const r = ge(), t = o === "dark" || o === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    document.documentElement.classList.toggle("dark", t), a && m(g(t ? a.dark : a.light)), k == null || k(r);
+  }, [o, k, a]), ie = c(() => {
+    const r = ye(), t = o === "dark" || o === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches;
     x(r.fonts.heading, r.fonts.body), m({
       ...g(t ? r.dark : r.light),
       "--app-border-radius-md": r.borderRadius,
       "--app-font-size-base": r.baseFontSize
-    }), P(r);
-  }, [P, o]), ie = n((r) => {
-    M(r);
-    const t = ye(r);
+    }), F(r);
+  }, [F, o]), le = c((r) => {
+    R(r);
+    const t = Ne(r);
     if (t) {
       const b = o === "dark" || o === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches;
       x(t.fonts.heading, t.fonts.body), m({
@@ -96,33 +97,33 @@ const Ne = {
         "--app-font-size-base": t.baseFontSize
       });
     }
-  }, [M, o]), le = n((r) => {
-    R(r), x(r, f);
-  }, [R, f]), de = n((r) => {
-    F(r), x(u, r);
-  }, [F, u]), ne = n((r) => {
-    H(r), m({
+  }, [R, o]), de = c((r) => {
+    H(r), x(r, f);
+  }, [H, f]), ne = c((r) => {
+    L(r), x(u, r);
+  }, [L, u]), ce = c((r) => {
+    $(r), m({
       "--app-border-radius-md": r,
       "--app-border-radius-sm": `calc(${r} - 0.125rem)`,
       "--app-border-radius-lg": `calc(${r} + 0.25rem)`
     });
-  }, [H]), ce = n((r) => {
-    L(r), m({ "--app-font-size-base": r });
-  }, [L]), z = l.primary === d.primary && l.neutral === d.neutral && l.success === d.success && l.warning === d.warning && l.destructive === d.destructive && l.radius === d.radius, me = o === "dark" || o === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, k = s ? me ? s.dark : s.light : null, O = Object.entries(k ? g(k) : V(l));
-  return /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ a("div", { className: "flex items-start justify-between gap-4", children: [
-      /* @__PURE__ */ a("div", { children: [
-        /* @__PURE__ */ a("h2", { className: "text-lg font-bold flex items-center gap-2", children: [
-          /* @__PURE__ */ e(c, { name: "palette", size: 16, className: "text-primary" }),
+  }, [$]), me = c((r) => {
+    B(r), m({ "--app-font-size-base": r });
+  }, [B]), z = l.primary === d.primary && l.neutral === d.neutral && l.success === d.success && l.warning === d.warning && l.destructive === d.destructive && l.radius === d.radius, pe = o === "dark" || o === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, v = a ? pe ? a.dark : a.light : null, V = Object.entries(v ? g(v) : W(l));
+  return /* @__PURE__ */ s("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ s("h2", { className: "text-lg font-bold flex items-center gap-2", children: [
+          /* @__PURE__ */ e(n, { name: "palette", size: 16, className: "text-primary" }),
           "Theme Lab"
         ] }),
         /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground mt-1", children: "Design your brand palette and apply it live across the app." })
       ] }),
-      /* @__PURE__ */ a("div", { className: "flex rounded-lg border border-border overflow-hidden shrink-0", children: [
+      /* @__PURE__ */ s("div", { className: "flex rounded-lg border border-border overflow-hidden shrink-0", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => B("manual"),
+            onClick: () => I("manual"),
             className: [
               "px-4 py-2 text-xs font-semibold transition-colors",
               C === "manual" ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:text-foreground"
@@ -130,16 +131,16 @@ const Ne = {
             children: "Manual"
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s(
           "button",
           {
-            onClick: () => B("ai"),
+            onClick: () => I("ai"),
             className: [
               "px-4 py-2 text-xs font-semibold transition-colors flex items-center gap-1.5",
               C === "ai" ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:text-foreground"
             ].join(" "),
             children: [
-              /* @__PURE__ */ e(c, { name: "sparkles", size: 12 }),
+              /* @__PURE__ */ e(n, { name: "sparkles", size: 12 }),
               "AI"
             ]
           }
@@ -147,87 +148,87 @@ const Ne = {
       ] })
     ] }),
     C === "manual" ? /* @__PURE__ */ e(
-      fe,
+      be,
       {
         profiles: U,
-        profileIcons: Y,
-        activeProfileId: q,
-        onProfileClick: ie
+        profileIcons: q,
+        activeProfileId: J,
+        onProfileClick: le
       }
     ) : /* @__PURE__ */ e(
-      be,
+      he,
       {
-        prompt: J,
-        isGenerating: K,
-        onPromptChange: Q,
-        onGenerate: X,
-        onRandomize: oe,
-        errorMessage: Z,
-        aiProviderLabel: T
+        prompt: K,
+        isGenerating: Q,
+        onPromptChange: X,
+        onGenerate: Z,
+        onRandomize: ie,
+        errorMessage: T,
+        aiProviderLabel: ee
       }
     ),
-    /* @__PURE__ */ a("div", { className: "grid grid-cols-12 gap-6", children: [
-      /* @__PURE__ */ e("div", { className: "col-span-12 @lg:col-span-8 space-y-4", children: s && k ? /* @__PURE__ */ a(pe, { children: [
-        /* @__PURE__ */ a(D, { className: "p-5 space-y-4", children: [
-          /* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ a(
+    /* @__PURE__ */ s("div", { className: "grid grid-cols-12 gap-6", children: [
+      /* @__PURE__ */ e("div", { className: "col-span-12 @lg:col-span-8 space-y-4", children: a && v ? /* @__PURE__ */ s(ue, { children: [
+        /* @__PURE__ */ s(E, { className: "p-5 space-y-4", children: [
+          /* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ s(
             "button",
             {
-              onClick: te,
+              onClick: oe,
               className: "flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border text-xs font-semibold transition-colors hover:border-primary/50",
               children: [
-                /* @__PURE__ */ e(c, { name: E[o].icon, size: 12, className: "text-primary" }),
-                E[o].label
+                /* @__PURE__ */ e(n, { name: M[o].icon, size: 12, className: "text-primary" }),
+                M[o].label
               ]
             }
           ) }),
-          /* @__PURE__ */ e(xe, { palette: k, label: E[o].label })
+          /* @__PURE__ */ e(ge, { palette: v, label: M[o].label })
         ] }),
-        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ s("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ s("div", { className: "space-y-2", children: [
             /* @__PURE__ */ e("p", { className: "text-[10px] font-bold uppercase tracking-widest opacity-50", children: "Light Preview" }),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ s(
               "div",
               {
                 className: "p-4 rounded-xl border shadow-sm transition-all duration-500",
                 style: {
-                  backgroundColor: i(s.light.background),
-                  color: i(s.light.foreground),
-                  borderColor: i(s.light.border)
+                  backgroundColor: i(a.light.background),
+                  color: i(a.light.foreground),
+                  borderColor: i(a.light.border)
                 },
                 children: [
-                  /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-3", children: [
-                    /* @__PURE__ */ e("div", { className: "h-4 w-4 rounded-full", style: { backgroundColor: i(s.light.primary) } }),
+                  /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-3", children: [
+                    /* @__PURE__ */ e("div", { className: "h-4 w-4 rounded-full", style: { backgroundColor: i(a.light.primary) } }),
                     /* @__PURE__ */ e("span", { className: "text-sm font-bold", style: { fontFamily: `'${u}', serif` }, children: "Primary Heading" })
                   ] }),
-                  /* @__PURE__ */ e("div", { className: "p-3 rounded-md mb-2 text-xs", style: { backgroundColor: i(s.light.card), borderColor: i(s.light.border), borderWidth: 1, fontFamily: `'${f}', sans-serif` }, children: "Card text body content preview" }),
-                  /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
-                    /* @__PURE__ */ e("div", { className: "h-6 flex-1 rounded", style: { backgroundColor: i(s.light.muted) } }),
-                    /* @__PURE__ */ e("div", { className: "h-6 w-16 rounded flex items-center justify-center text-[10px] font-bold", style: { backgroundColor: i(s.light.accent), color: s.light.accent.l > 55 ? "#000" : "#fff" }, children: "BTN" })
+                  /* @__PURE__ */ e("div", { className: "p-3 rounded-md mb-2 text-xs", style: { backgroundColor: i(a.light.card), borderColor: i(a.light.border), borderWidth: 1, fontFamily: `'${f}', sans-serif` }, children: "Card text body content preview" }),
+                  /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ e("div", { className: "h-6 flex-1 rounded", style: { backgroundColor: i(a.light.muted) } }),
+                    /* @__PURE__ */ e("div", { className: "h-6 w-16 rounded flex items-center justify-center text-[10px] font-bold", style: { backgroundColor: i(a.light.accent), color: a.light.accent.l > 55 ? "#000" : "#fff" }, children: "BTN" })
                   ] })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ s("div", { className: "space-y-2", children: [
             /* @__PURE__ */ e("p", { className: "text-[10px] font-bold uppercase tracking-widest opacity-50", children: "Dark Preview" }),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ s(
               "div",
               {
                 className: "p-4 rounded-xl border shadow-sm transition-all duration-500",
                 style: {
-                  backgroundColor: i(s.dark.background),
-                  color: i(s.dark.foreground),
-                  borderColor: i(s.dark.border)
+                  backgroundColor: i(a.dark.background),
+                  color: i(a.dark.foreground),
+                  borderColor: i(a.dark.border)
                 },
                 children: [
-                  /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-3", children: [
-                    /* @__PURE__ */ e("div", { className: "h-4 w-4 rounded-full", style: { backgroundColor: i(s.dark.primary) } }),
+                  /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-3", children: [
+                    /* @__PURE__ */ e("div", { className: "h-4 w-4 rounded-full", style: { backgroundColor: i(a.dark.primary) } }),
                     /* @__PURE__ */ e("span", { className: "text-sm font-bold", style: { fontFamily: `'${u}', serif` }, children: "Primary Heading" })
                   ] }),
-                  /* @__PURE__ */ e("div", { className: "p-3 rounded-md mb-2 text-xs", style: { backgroundColor: i(s.dark.card), borderColor: i(s.dark.border), borderWidth: 1, fontFamily: `'${f}', sans-serif` }, children: "Card text body content preview" }),
-                  /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
-                    /* @__PURE__ */ e("div", { className: "h-6 flex-1 rounded", style: { backgroundColor: i(s.dark.muted) } }),
-                    /* @__PURE__ */ e("div", { className: "h-6 w-16 rounded flex items-center justify-center text-[10px] font-bold", style: { backgroundColor: i(s.dark.accent), color: s.dark.accent.l > 55 ? "#000" : "#fff" }, children: "BTN" })
+                  /* @__PURE__ */ e("div", { className: "p-3 rounded-md mb-2 text-xs", style: { backgroundColor: i(a.dark.card), borderColor: i(a.dark.border), borderWidth: 1, fontFamily: `'${f}', sans-serif` }, children: "Card text body content preview" }),
+                  /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ e("div", { className: "h-6 flex-1 rounded", style: { backgroundColor: i(a.dark.muted) } }),
+                    /* @__PURE__ */ e("div", { className: "h-6 w-16 rounded flex items-center justify-center text-[10px] font-bold", style: { backgroundColor: i(a.dark.accent), color: a.dark.accent.l > 55 ? "#000" : "#fff" }, children: "BTN" })
                   ] })
                 ]
               }
@@ -236,16 +237,16 @@ const Ne = {
         ] })
       ] }) : (
         /* ── Fallback: current active theme as colour pickers ── */
-        /* @__PURE__ */ a(D, { className: "p-5 space-y-4", children: [
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ a("h3", { className: "text-sm font-semibold flex items-center gap-2", children: [
-              /* @__PURE__ */ e(c, { name: "palette", size: 14, className: "text-primary" }),
+        /* @__PURE__ */ s(E, { className: "p-5 space-y-4", children: [
+          /* @__PURE__ */ s("div", { children: [
+            /* @__PURE__ */ s("h3", { className: "text-sm font-semibold flex items-center gap-2", children: [
+              /* @__PURE__ */ e(n, { name: "palette", size: 14, className: "text-primary" }),
               "Current Theme Palette"
             ] }),
             /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground mt-1", children: "Your active CSS variable colours. Click any swatch to customise." })
           ] }),
-          /* @__PURE__ */ e("div", { className: "space-y-3", children: ve.map(({ key: r, label: t, description: b }) => /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ a("label", { className: "relative cursor-pointer group", title: t, children: [
+          /* @__PURE__ */ e("div", { className: "space-y-3", children: ve.map(({ key: r, label: t, description: b }) => /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ s("label", { className: "relative cursor-pointer group", title: t, children: [
               /* @__PURE__ */ e(
                 "div",
                 {
@@ -258,75 +259,95 @@ const Ne = {
                 {
                   type: "color",
                   className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer",
-                  value: W(l[r]),
-                  onChange: (h) => ae(r, h.target.value)
+                  value: _(l[r]),
+                  onChange: (h) => te(r, h.target.value)
                 }
               )
             ] }),
-            /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ e("div", { className: "text-sm font-medium", children: t }),
               /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground truncate", children: b })
             ] }),
-            /* @__PURE__ */ e("code", { className: "text-[10px] font-mono text-muted-foreground bg-muted px-2 py-1 rounded tabular-nums shrink-0", children: W(l[r]).toUpperCase() })
+            /* @__PURE__ */ e("code", { className: "text-[10px] font-mono text-muted-foreground bg-muted px-2 py-1 rounded tabular-nums shrink-0", children: _(l[r]).toUpperCase() })
           ] }, r)) })
         ] })
       ) }),
       /* @__PURE__ */ e("div", { className: "col-span-12 @lg:col-span-4", children: /* @__PURE__ */ e(
-        he,
+        xe,
         {
           headingFont: u,
-          setHeadingFont: le,
+          setHeadingFont: de,
           bodyFont: f,
-          setBodyFont: de,
-          borderRadius: ee,
-          setBorderRadius: ne,
-          baseFontSize: re,
-          setBaseFontSize: ce,
+          setBodyFont: ne,
+          borderRadius: re,
+          setBorderRadius: ce,
+          baseFontSize: se,
+          setBaseFontSize: me,
           vertical: !0
         }
       ) })
     ] }),
-    /* @__PURE__ */ a(D, { className: "p-0 overflow-hidden border-2 border-primary/10", children: [
-      /* @__PURE__ */ a(
+    /* @__PURE__ */ s(E, { className: "p-0 overflow-hidden border-2 border-primary/10", children: [
+      /* @__PURE__ */ s(
         "button",
         {
-          onClick: () => se(!S),
+          onClick: () => ae(!S),
           className: "w-full flex items-center justify-between p-4 bg-muted/30 border-b border-border hover:bg-muted/50 transition-colors",
           children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(c, { name: "code", size: 14, className: "text-primary" }),
+            /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(n, { name: "code", size: 14, className: "text-primary" }),
               /* @__PURE__ */ e("span", { className: "text-xs font-bold uppercase tracking-widest", children: "CSS Variables" }),
-              /* @__PURE__ */ a("span", { className: "text-[10px] text-muted-foreground", children: [
+              /* @__PURE__ */ s("span", { className: "text-[10px] text-muted-foreground", children: [
                 "(",
-                O.length,
+                V.length,
                 " vars)"
               ] })
             ] }),
-            /* @__PURE__ */ e(c, { name: S ? "chevron-up" : "chevron-down", size: 14, className: "text-muted-foreground" })
+            /* @__PURE__ */ e(n, { name: S ? "chevron-up" : "chevron-down", size: 14, className: "text-muted-foreground" })
           ]
         }
       ),
-      S && /* @__PURE__ */ e("div", { className: "p-4 bg-black/5 font-mono text-[11px] max-h-[240px] overflow-y-auto", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-x-8 gap-y-1", children: O.map(([r, t]) => /* @__PURE__ */ a("div", { className: "flex justify-between py-1 border-b border-black/5 last:border-0 group", children: [
+      S && /* @__PURE__ */ e("div", { className: "p-4 bg-black/5 font-mono text-[11px] max-h-[240px] overflow-y-auto", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-x-8 gap-y-1", children: V.map(([r, t]) => /* @__PURE__ */ s("div", { className: "flex justify-between py-1 border-b border-black/5 last:border-0 group", children: [
         /* @__PURE__ */ e("span", { className: "text-primary/70 group-hover:text-primary transition-colors", children: r }),
         /* @__PURE__ */ e("span", { className: "font-bold opacity-80", children: String(t) })
       ] }, r)) }) })
     ] }),
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3 p-4 bg-muted/30 rounded-xl border border-border", children: [
-      /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: [
+    /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-3 p-4 bg-muted/30 rounded-xl border border-border", children: [
+      /* @__PURE__ */ s("div", { className: "flex-1 min-w-[12rem]", children: [
         /* @__PURE__ */ e("p", { className: "text-xs font-semibold", children: "Master Theme Controls" }),
-        /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground mt-0.5", children: z ? "Theme matches saved master." : "Unsaved changes — save to lock in your palette." })
+        /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground mt-0.5", children: z ? "Theme matches saved master." : "Unsaved changes — save to lock in your palette." }),
+        /* @__PURE__ */ e("p", { className: "text-2xs text-muted-foreground/70 mt-1", children: "Saved in this browser only. It does not change the deployed app." })
       ] }),
-      /* @__PURE__ */ a(I, { variant: "outline", size: "sm", onClick: A, disabled: z, className: "shrink-0", children: [
-        /* @__PURE__ */ e(c, { name: "rotate-ccw", size: 13, className: "mr-1.5" }),
-        "Revert to Saved"
+      P && /* @__PURE__ */ s(
+        D,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "shrink-0",
+          onClick: () => {
+            (typeof window > "u" || window.confirm(
+              `Reset to the theme this app shipped with?
+
+Your saved palette will be discarded.`
+            )) && P();
+          },
+          children: [
+            /* @__PURE__ */ e(n, { name: "undo-2", size: 13, className: "mr-1.5" }),
+            "Reset to app default"
+          ]
+        }
+      ),
+      /* @__PURE__ */ s(D, { variant: "outline", size: "sm", onClick: Y, disabled: z, className: "shrink-0", children: [
+        /* @__PURE__ */ e(n, { name: "rotate-ccw", size: 13, className: "mr-1.5" }),
+        "Discard changes"
       ] }),
-      /* @__PURE__ */ a(I, { size: "sm", onClick: _, disabled: z, className: "shrink-0", children: [
-        /* @__PURE__ */ e(c, { name: "save", size: 13, className: "mr-1.5" }),
+      /* @__PURE__ */ s(D, { size: "sm", onClick: A, disabled: z, className: "shrink-0", children: [
+        /* @__PURE__ */ e(n, { name: "save", size: 13, className: "mr-1.5" }),
         "Save Master Theme"
       ] })
     ] })
   ] });
 };
 export {
-  Fe as ThemeLab
+  He as ThemeLab
 };