@ramme-io/ui 3.0.0 → 4.0.0

package/dist/components/theme/ThemeLab.js

@@ -0,0 +1,332 @@
+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) {
+  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 = {
+  system: "light",
+  light: "dark",
+  dark: "system"
+}, E = {
+  light: { icon: "sun", label: "Light" },
+  dark: { icon: "moon", label: "Dark" },
+  system: { icon: "monitor", label: "System" }
+}, ve = [
+  { key: "primary", label: "Primary", description: "Main brand colour — buttons, links, focus rings" },
+  { key: "neutral", label: "Neutral", description: "Background, surfaces, secondary text" },
+  { 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 = ({
+  activeTokens: p,
+  savedTokens: d,
+  onTokensChange: y,
+  onSave: _,
+  onRevert: A,
+  profiles: U,
+  profileIcons: Y,
+  activeProfileId: q,
+  onProfileClick: M,
+  prompt: J,
+  isGenerating: K,
+  onPromptChange: Q,
+  onGenerate: X,
+  onRandomize: P,
+  generateError: Z,
+  aiProviderLabel: T,
+  generatedTheme: s,
+  headingFont: u,
+  setHeadingFont: R,
+  bodyFont: f,
+  setBodyFont: F,
+  borderRadius: ee,
+  setBorderRadius: H,
+  baseFontSize: re,
+  setBaseFontSize: L,
+  themeMode: N,
+  onThemeModeChange: v
+}) => {
+  const [l, $] = w(p), [C, B] = w("manual"), [o, G] = w(N ?? "system"), [S, se] = w(!1);
+  j(() => {
+    $(p);
+  }, [p]), j(() => {
+    N !== void 0 && G(N);
+  }, [N]), j(() => {
+    if (!s) 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
+    });
+  }, [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);
+    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;
+    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);
+    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({
+        ...g(b ? t.dark : t.light),
+        "--app-border-radius-md": t.borderRadius,
+        "--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({
+      "--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" }),
+          "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__ */ e(
+          "button",
+          {
+            onClick: () => B("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"
+            ].join(" "),
+            children: "Manual"
+          }
+        ),
+        /* @__PURE__ */ a(
+          "button",
+          {
+            onClick: () => B("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 }),
+              "AI"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    C === "manual" ? /* @__PURE__ */ e(
+      fe,
+      {
+        profiles: U,
+        profileIcons: Y,
+        activeProfileId: q,
+        onProfileClick: ie
+      }
+    ) : /* @__PURE__ */ e(
+      be,
+      {
+        prompt: J,
+        isGenerating: K,
+        onPromptChange: Q,
+        onGenerate: X,
+        onRandomize: oe,
+        errorMessage: Z,
+        aiProviderLabel: T
+      }
+    ),
+    /* @__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(
+            "button",
+            {
+              onClick: te,
+              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(xe, { palette: k, label: E[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__ */ e("p", { className: "text-[10px] font-bold uppercase tracking-widest opacity-50", children: "Light Preview" }),
+            /* @__PURE__ */ a(
+              "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)
+                },
+                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__ */ 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__ */ a("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ e("p", { className: "text-[10px] font-bold uppercase tracking-widest opacity-50", children: "Dark Preview" }),
+            /* @__PURE__ */ a(
+              "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)
+                },
+                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__ */ 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" })
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }) : (
+        /* ── 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" }),
+              "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: "h-10 w-10 rounded-lg border-2 border-border shadow-sm transition-transform group-hover:scale-105",
+                  style: { backgroundColor: `rgb(${l[r]})` }
+                }
+              ),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  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)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a("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() })
+          ] }, r)) })
+        ] })
+      ) }),
+      /* @__PURE__ */ e("div", { className: "col-span-12 @lg:col-span-4", children: /* @__PURE__ */ e(
+        he,
+        {
+          headingFont: u,
+          setHeadingFont: le,
+          bodyFont: f,
+          setBodyFont: de,
+          borderRadius: ee,
+          setBorderRadius: ne,
+          baseFontSize: re,
+          setBaseFontSize: ce,
+          vertical: !0
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ a(D, { className: "p-0 overflow-hidden border-2 border-primary/10", children: [
+      /* @__PURE__ */ a(
+        "button",
+        {
+          onClick: () => se(!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__ */ e("span", { className: "text-xs font-bold uppercase tracking-widest", children: "CSS Variables" }),
+              /* @__PURE__ */ a("span", { className: "text-[10px] text-muted-foreground", children: [
+                "(",
+                O.length,
+                " vars)"
+              ] })
+            ] }),
+            /* @__PURE__ */ e(c, { 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: [
+        /* @__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__ */ 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__ */ 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"
+      ] }),
+      /* @__PURE__ */ a(I, { size: "sm", onClick: _, disabled: z, className: "shrink-0", children: [
+        /* @__PURE__ */ e(c, { name: "save", size: 13, className: "mr-1.5" }),
+        "Save Master Theme"
+      ] })
+    ] })
+  ] });
+};
+export {
+  Fe as ThemeLab
+};

package/dist/components/theme/ThemeLivePreview.js

@@ -0,0 +1,146 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+/* empty css              */
+import { Card as b } from "../layout/Card.js";
+import { Button as f } from "../ui/Button.js";
+import { Icon as d } from "../ui/Icon.js";
+import { hslToCssString as l, paletteToRgbVars as y } from "../../lib/theme/ThemeGenerator.logic.js";
+const x = [
+  { label: "Background", key: "background" },
+  { label: "Foreground", key: "foreground" },
+  { label: "Primary", key: "primary" },
+  { label: "Secondary", key: "secondary" },
+  { label: "Accent", key: "accent" },
+  { label: "Muted", key: "muted" },
+  { label: "Border", key: "border" },
+  { label: "Card", key: "card" }
+];
+function h({ palette: o, label: i }) {
+  return /* @__PURE__ */ e("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ e("h4", { className: "text-[10px] font-bold uppercase tracking-widest opacity-50", children: [
+      i,
+      " Palette"
+    ] }),
+    /* @__PURE__ */ r("div", { className: "grid grid-cols-4 @md:grid-cols-8 gap-2", children: x.map((t) => /* @__PURE__ */ e("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: "h-10 w-full rounded-lg border border-black/10 shadow-sm transition-all duration-500",
+          style: { backgroundColor: l(o[t.key]) }
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "text-[9px] font-mono opacity-50 truncate text-center", children: t.label })
+    ] }, t.key)) })
+  ] });
+}
+const P = ({
+  generatedTheme: o,
+  isDarkMode: i,
+  onToggleDark: t,
+  onCopyVars: n,
+  sandboxRef: p,
+  headingFont: s,
+  bodyFont: c
+}) => {
+  if (!o) return null;
+  const a = i ? o.dark : o.light;
+  return /* @__PURE__ */ e("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ e(b, { className: "p-6 overflow-hidden relative", children: [
+      /* @__PURE__ */ r("div", { ref: p, className: "absolute inset-0 z-0 transition-colors duration-500", style: { backgroundColor: l(a.background) } }),
+      /* @__PURE__ */ e("div", { className: "relative z-10", children: [
+        /* @__PURE__ */ e("div", { className: "flex flex-col @md:flex-row @md:items-center justify-between gap-4 mb-4 pb-4 border-b border-border/20", children: [
+          /* @__PURE__ */ e("div", { children: [
+            /* @__PURE__ */ e("h3", { className: "text-xl font-bold flex items-center gap-2 mb-1", style: { color: l(a.foreground), fontFamily: `'${s}', serif` }, children: [
+              /* @__PURE__ */ r(d, { name: "palette", size: 16, style: { color: l(a.primary) } }),
+              o.name
+            ] }),
+            /* @__PURE__ */ r("p", { className: "text-xs italic opacity-80", style: { color: l(a.foreground), fontFamily: `'${c}', sans-serif` }, children: o.description })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ e("button", { onClick: n, className: "text-[10px] uppercase font-bold opacity-60 hover:opacity-100 transition-opacity flex items-center gap-1", style: { color: l(a.foreground) }, children: [
+              /* @__PURE__ */ r(d, { name: "copy", size: 12 }),
+              " Copy CSS"
+            ] }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: t,
+                className: "flex items-center gap-2 px-4 py-2 rounded-full border-2 transition-all shadow-sm",
+                style: {
+                  backgroundColor: l(a.card),
+                  borderColor: l(a.border),
+                  color: l(a.foreground)
+                },
+                children: [
+                  /* @__PURE__ */ r(d, { name: i ? "moon" : "sun", size: 16, style: { color: l(a.primary) } }),
+                  /* @__PURE__ */ r("span", { className: "text-xs font-bold uppercase tracking-wider", children: i ? "Dark" : "Light" })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "bg-black/5 p-4 rounded-xl mb-6 backdrop-blur-sm border border-white/5", children: /* @__PURE__ */ r(h, { palette: a, label: i ? "Dark" : "Light" }) }),
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-6 pt-4 border-t border-border/20", children: [
+          /* @__PURE__ */ e("div", { children: [
+            /* @__PURE__ */ r("h4", { className: "text-[10px] font-bold uppercase tracking-widest opacity-60 mb-3", style: { color: l(a.foreground) }, children: "Light Preview" }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "p-4 rounded-xl border transition-all duration-500 shadow-sm",
+                style: { backgroundColor: l(o.light.background), color: l(o.light.foreground), borderColor: l(o.light.border) },
+                children: [
+                  /* @__PURE__ */ e("div", { className: "flex items-center gap-2 mb-3", children: [
+                    /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-full", style: { backgroundColor: l(o.light.primary) } }),
+                    /* @__PURE__ */ r("span", { className: "text-sm font-bold", style: { fontFamily: `'${s}', serif` }, children: "Primary Heading" })
+                  ] }),
+                  /* @__PURE__ */ r("div", { className: "p-3 rounded-md mb-2 transition-all duration-500 text-xs", style: { backgroundColor: l(o.light.card), borderColor: l(o.light.border), borderWidth: 1, fontFamily: `'${c}', sans-serif` }, children: "Card text body content preview" }),
+                  /* @__PURE__ */ e("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ r("div", { className: "h-6 flex-1 rounded transition-all duration-500", style: { backgroundColor: l(o.light.muted) } }),
+                    /* @__PURE__ */ r("div", { className: "h-6 w-16 rounded transition-all duration-500 flex items-center justify-center text-[10px] font-bold", style: { backgroundColor: l(o.light.accent), color: o.light.accent.l > 55 ? "#000" : "#fff" }, children: "BTN" })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { children: [
+            /* @__PURE__ */ r("h4", { className: "text-[10px] font-bold uppercase tracking-widest opacity-60 mb-3", style: { color: l(a.foreground) }, children: "Dark Preview" }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "p-4 rounded-xl border transition-all duration-500 shadow-sm",
+                style: { backgroundColor: l(o.dark.background), color: l(o.dark.foreground), borderColor: l(o.dark.border) },
+                children: [
+                  /* @__PURE__ */ e("div", { className: "flex items-center gap-2 mb-3", children: [
+                    /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-full", style: { backgroundColor: l(o.dark.primary) } }),
+                    /* @__PURE__ */ r("span", { className: "text-sm font-bold", style: { fontFamily: `'${s}', serif` }, children: "Primary Heading" })
+                  ] }),
+                  /* @__PURE__ */ r("div", { className: "p-3 rounded-md mb-2 transition-all duration-500 text-xs", style: { backgroundColor: l(o.dark.card), borderColor: l(o.dark.border), borderWidth: 1, fontFamily: `'${c}', sans-serif` }, children: "Card text body content preview" }),
+                  /* @__PURE__ */ e("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ r("div", { className: "h-6 flex-1 rounded transition-all duration-500", style: { backgroundColor: l(o.dark.muted) } }),
+                    /* @__PURE__ */ r("div", { className: "h-6 w-16 rounded transition-all duration-500 flex items-center justify-center text-[10px] font-bold", style: { backgroundColor: l(o.dark.accent), color: o.dark.accent.l > 55 ? "#000" : "#fff" }, children: "BTN" })
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(b, { className: "p-0 overflow-hidden border-2 border-primary/10", children: [
+      /* @__PURE__ */ e("div", { className: "bg-muted/30 p-4 border-b border-border flex justify-between items-center", children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ r(d, { name: "code", size: 16, className: "text-primary" }),
+          /* @__PURE__ */ r("h3", { className: "font-bold text-xs uppercase tracking-widest", children: "CSS Variables" })
+        ] }),
+        /* @__PURE__ */ r(f, { variant: "ghost", size: "sm", className: "h-7 text-[10px]", onClick: n, children: "Copy All" })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "p-4 bg-black/5 font-mono text-[11px] max-h-[260px] overflow-y-auto", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-x-8 gap-y-1", children: Object.entries(y(a)).map(([m, u]) => /* @__PURE__ */ e("div", { className: "flex justify-between py-1 border-b border-black/5 last:border-0 group", children: [
+        /* @__PURE__ */ r("span", { className: "text-primary/70 group-hover:text-primary transition-colors", children: m }),
+        /* @__PURE__ */ r("span", { className: "font-bold opacity-80", children: u })
+      ] }, m)) }) })
+    ] })
+  ] });
+};
+export {
+  h as PaletteSwatch,
+  P as ThemeLivePreview
+};

package/dist/components/theme/ThemeSettings.js

@@ -0,0 +1,34 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useTheme as n } from "../../contexts/ThemeContext.js";
+import { SegmentedControl as i } from "../forms/SegmentedControl.js";
+import { Card as c } from "../layout/Card.js";
+import { Icon as h } from "../ui/Icon.js";
+const g = () => {
+  const { theme: e, setTheme: a, customTheme: r, setCustomTheme: l } = n(), m = (r == null ? void 0 : r.name) === "TAY Dreamboat";
+  return /* @__PURE__ */ s(c, { className: "p-4 space-y-4", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ s("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ s("h3", { className: "font-semibold flex items-center gap-2", children: [
+        /* @__PURE__ */ t(h, { name: "monitor", size: 16 }),
+        " Theme Preference"
+      ] }),
+      /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground", children: "Select your preferred interface theme." })
+    ] }) }),
+    /* @__PURE__ */ t(
+      i,
+      {
+        options: [
+          { label: "Light", value: "light" },
+          { label: "Dark", value: "dark" },
+          { label: "System", value: "system" }
+        ],
+        value: !m && (e === "light" || e === "dark" || e === "system") ? e : "system",
+        onChange: (o) => {
+          m && l(null), a(o);
+        }
+      }
+    )
+  ] });
+};
+export {
+  g as ThemeSettings
+};

package/dist/components/theme/ThemeSynthesizer.js

@@ -0,0 +1,55 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+/* empty css              */
+import { Input as p } from "../forms/Input.js";
+import { Card as h } from "../layout/Card.js";
+import { Button as i } from "../ui/Button.js";
+import { Icon as t } from "../ui/Icon.js";
+const N = ({
+  prompt: a,
+  isGenerating: s,
+  onPromptChange: m,
+  onGenerate: c,
+  onRandomize: o,
+  errorMessage: l,
+  aiProviderLabel: n
+}) => /* @__PURE__ */ r(h, { className: "p-6 space-y-4", children: [
+  /* @__PURE__ */ r("div", { className: "flex items-start justify-between gap-2", children: [
+    /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ r("h2", { className: "text-lg font-bold flex items-center gap-2", children: [
+        /* @__PURE__ */ e(t, { name: "sparkles", className: "text-primary" }),
+        "Theme Synthesizer"
+      ] }),
+      /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground mt-1", children: "Describe a mood, setting, or brand to instantly generate a full palette." })
+    ] }),
+    n && /* @__PURE__ */ e("span", { className: "shrink-0 text-[10px] font-mono bg-primary/10 text-primary px-2 py-1 rounded-full border border-primary/20 whitespace-nowrap", children: n })
+  ] }),
+  /* @__PURE__ */ r("form", { onSubmit: c, className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ e(
+      p,
+      {
+        value: a,
+        onChange: (d) => m(d.target.value),
+        placeholder: "e.g. A neon-drenched Tokyo cyberpunk alleyway...",
+        className: "w-full"
+      }
+    ),
+    /* @__PURE__ */ e(i, { type: "submit", className: "w-full", disabled: s || !a.trim(), children: s ? /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(t, { name: "loader", size: 14, className: "animate-spin" }),
+      " Generating…"
+    ] }) : "Generate" })
+  ] }),
+  l && /* @__PURE__ */ r("div", { className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: [
+    /* @__PURE__ */ e(t, { name: "triangle-alert", size: 13, className: "mt-0.5 shrink-0" }),
+    /* @__PURE__ */ e("span", { children: l })
+  ] }),
+  /* @__PURE__ */ r("div", { className: "flex items-center gap-2 pt-2 border-t border-border", children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-semibold uppercase tracking-wider opacity-50 mr-2", children: "Randomize:" }),
+    /* @__PURE__ */ r(i, { variant: "outline", size: "sm", onClick: o, className: "flex gap-2", children: [
+      /* @__PURE__ */ e(t, { name: "shuffle", size: 14 }),
+      " Surprise Me"
+    ] })
+  ] })
+] });
+export {
+  N as ThemeSynthesizer
+};

package/dist/components/ui/Avatar.js

@@ -0,0 +1,38 @@
+import { jsx as s } from "react/jsx-runtime";
+import { cn as a } from "../../utils/cn.js";
+const f = ({ src: t, name: r, size: n = "md", className: o }) => {
+  const i = (l) => {
+    const e = l.split(" ");
+    return e.length > 1 ? `${e[0][0]}${e[e.length - 1][0]}`.toUpperCase() : l.substring(0, 2).toUpperCase();
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: a(
+        // Base styles: Flex centering, shape, and "Zero Jank" protection (shrink-0)
+        "relative inline-flex shrink-0 items-center justify-center rounded-full overflow-hidden",
+        // Theme styles: Use semantic tokens, not hardcoded colors
+        "bg-secondary text-secondary-foreground",
+        // Size and custom overrides
+        {
+          sm: "h-8 w-8 text-xs",
+          md: "h-12 w-12 text-sm",
+          // Adjusted font size for better balance
+          lg: "h-16 w-16 text-xl"
+        }[n],
+        o
+      ),
+      children: t ? /* @__PURE__ */ s(
+        "img",
+        {
+          src: t,
+          alt: r,
+          className: "h-full w-full object-cover"
+        }
+      ) : /* @__PURE__ */ s("span", { className: "font-semibold", children: i(r) })
+    }
+  );
+};
+export {
+  f as Avatar
+};

package/dist/components/ui/Badge.js

@@ -0,0 +1,38 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { cva as s } from "class-variance-authority";
+import { cn as d } from "../../utils/cn.js";
+const i = s(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        primary: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        danger: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        success: "border-transparent bg-success text-success-foreground shadow hover:bg-success/80",
+        // ✅ Fixed: Use semantic success token
+        warning: "border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80",
+        // ✅ Added: Missing variant
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+), g = a(
+  ({ className: r, variant: e, ...o }, n) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: n,
+      className: d(i({ variant: e }), r),
+      ...o
+    }
+  )
+);
+g.displayName = "Badge";
+export {
+  g as Badge,
+  i as badgeVariants
+};