@dheme/react 2.1.0 → 2.3.0

package/dist/index.mjs

@@ -1,3 +1,5 @@
+'use client';
+
 // src/components/DhemeProvider.tsx
 import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { DhemeClient } from "@dheme/sdk";
@@ -356,33 +358,1142 @@ function DhemeScript({
   });
 }
 
-// src/hooks/useTheme.ts
+// src/components/ThemeGenerator.tsx
+import { useState as useState3, useEffect as useEffect3, useRef as useRef2, useCallback as useCallback2 } from "react";
+
+// src/hooks/useThemeActions.ts
 import { useContext } from "react";
-function useTheme() {
-  const context = useContext(ThemeDataContext);
+function useThemeActions() {
+  const context = useContext(ThemeActionsContext);
   if (!context) {
-    throw new Error("useTheme must be used within a <DhemeProvider>");
+    throw new Error("useThemeActions must be used within a <DhemeProvider>");
   }
   return context;
 }
 
-// src/hooks/useThemeActions.ts
+// src/hooks/useDebounce.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState2(value);
+  useEffect2(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/components/ThemeGenerator.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SparklesIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 3v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 17v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 5h4" }),
+        /* @__PURE__ */ jsx("path", { d: "M17 19h4" })
+      ]
+    }
+  );
+}
+function XIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function PlusIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
+      ]
+    }
+  );
+}
+function ChevronUpIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
+    }
+  );
+}
+function RotateCcwIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
+      ]
+    }
+  );
+}
+function HexColorPicker({ color, onChange }) {
+  const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : { r: 0, g: 0, b: 0 };
+  };
+  const rgbToHsv = (r, g, b) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    if (max !== min) {
+      switch (max) {
+        case r:
+          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          break;
+        case g:
+          h = ((b - r) / d + 2) / 6;
+          break;
+        case b:
+          h = ((r - g) / d + 4) / 6;
+          break;
+      }
+    }
+    return { h: h * 360, s: s * 100, v: v * 100 };
+  };
+  const hsvToHex = (h, s, v) => {
+    s /= 100;
+    v /= 100;
+    const i = Math.floor(h / 60);
+    const f = h / 60 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    let r = 0, g = 0, b = 0;
+    switch (i % 6) {
+      case 0:
+        r = v;
+        g = t;
+        b = p;
+        break;
+      case 1:
+        r = q;
+        g = v;
+        b = p;
+        break;
+      case 2:
+        r = p;
+        g = v;
+        b = t;
+        break;
+      case 3:
+        r = p;
+        g = q;
+        b = v;
+        break;
+      case 4:
+        r = t;
+        g = p;
+        b = v;
+        break;
+      case 5:
+        r = v;
+        g = p;
+        b = q;
+        break;
+    }
+    return "#" + [r, g, b].map(
+      (x) => Math.round(x * 255).toString(16).padStart(2, "0")
+    ).join("");
+  };
+  const rgb = hexToRgb(color);
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const gradientRef = useRef2(null);
+  const hueRef = useRef2(null);
+  const isDraggingGradient = useRef2(false);
+  const isDraggingHue = useRef2(false);
+  const handleGradientPointer = useCallback2(
+    (e) => {
+      const rect = gradientRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+      onChange(hsvToHex(hsv.h, x * 100, (1 - y) * 100));
+    },
+    [hsv.h, onChange]
+  );
+  const handleHuePointer = useCallback2(
+    (e) => {
+      const rect = hueRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      onChange(hsvToHex(x * 360, hsv.s, hsv.v));
+    },
+    [hsv.s, hsv.v, onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px", userSelect: "none" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: gradientRef,
+        style: {
+          position: "relative",
+          height: "120px",
+          borderRadius: "6px",
+          cursor: "crosshair",
+          background: `linear-gradient(to right, #fff, hsl(${hsv.h}, 100%, 50%))`,
+          touchAction: "none"
+        },
+        onPointerDown: (e) => {
+          isDraggingGradient.current = true;
+          e.currentTarget.setPointerCapture(e.pointerId);
+          handleGradientPointer(e);
+        },
+        onPointerMove: (e) => {
+          if (isDraggingGradient.current) handleGradientPointer(e);
+        },
+        onPointerUp: () => {
+          isDraggingGradient.current = false;
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: "6px",
+                background: "linear-gradient(to top, #000, transparent)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${hsv.s}%`,
+                top: `${100 - hsv.v}%`,
+                transform: "translate(-50%, -50%)",
+                width: "12px",
+                height: "12px",
+                borderRadius: "50%",
+                border: "2px solid white",
+                boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
+                pointerEvents: "none"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: hueRef,
+        style: {
+          position: "relative",
+          height: "12px",
+          borderRadius: "6px",
+          cursor: "pointer",
+          background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)",
+          touchAction: "none"
+        },
+        onPointerDown: (e) => {
+          isDraggingHue.current = true;
+          e.currentTarget.setPointerCapture(e.pointerId);
+          handleHuePointer(e);
+        },
+        onPointerMove: (e) => {
+          if (isDraggingHue.current) handleHuePointer(e);
+        },
+        onPointerUp: () => {
+          isDraggingHue.current = false;
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${hsv.h / 360 * 100}%`,
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "16px",
+              height: "16px",
+              borderRadius: "50%",
+              border: "2px solid white",
+              boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
+              background: `hsl(${hsv.h}, 100%, 50%)`,
+              pointerEvents: "none"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function SectionHeading({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        fontSize: "10px",
+        fontWeight: 700,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+        color: "hsl(var(--muted-foreground))",
+        marginBottom: "10px"
+      },
+      children
+    }
+  );
+}
+function ColorRow({
+  label,
+  badge,
+  color,
+  disabled,
+  onColorChange,
+  onInputChange,
+  actionButton
+}) {
+  const [pickerOpen, setPickerOpen] = useState3(false);
+  const hex = color.replace("#", "").toUpperCase();
+  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", fontWeight: 500, color: "hsl(var(--foreground))" }, children: label }),
+            badge && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "9px",
+                  fontWeight: 600,
+                  letterSpacing: "0.05em",
+                  padding: "1px 5px",
+                  borderRadius: "99px",
+                  background: "hsl(var(--muted))",
+                  color: "hsl(var(--muted-foreground))"
+                },
+                children: badge
+              }
+            )
+          ] }),
+          actionButton
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => !disabled && setPickerOpen((p) => !p),
+          style: {
+            width: "32px",
+            height: "32px",
+            borderRadius: "6px",
+            border: "1px solid hsl(var(--border))",
+            background: disabled ? "hsl(var(--muted))" : color,
+            cursor: disabled ? "not-allowed" : "pointer",
+            flexShrink: 0,
+            opacity: disabled ? 0.4 : 1,
+            transition: "opacity 0.15s"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            border: "1px solid hsl(var(--border))",
+            borderRadius: "6px",
+            overflow: "hidden",
+            background: disabled ? "hsl(var(--muted))" : "hsl(var(--background))",
+            flex: 1,
+            opacity: disabled ? 0.5 : 1
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  padding: "0 8px",
+                  fontSize: "12px",
+                  color: "hsl(var(--muted-foreground))",
+                  fontFamily: "monospace"
+                },
+                children: "#"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: hex,
+                disabled,
+                maxLength: 6,
+                onChange: (e) => {
+                  const v = e.target.value.replace(/[^0-9a-fA-F]/g, "");
+                  onInputChange(v);
+                },
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  outline: "none",
+                  fontSize: "12px",
+                  fontFamily: "monospace",
+                  fontWeight: 500,
+                  color: "hsl(var(--foreground))",
+                  width: "100%",
+                  padding: "7px 8px 7px 0",
+                  cursor: disabled ? "not-allowed" : "text"
+                }
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    pickerOpen && !disabled && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          marginTop: "8px",
+          padding: "10px",
+          background: "hsl(var(--card))",
+          border: "1px solid hsl(var(--border))",
+          borderRadius: "8px",
+          boxShadow: "0 4px 20px rgba(0,0,0,0.15)"
+        },
+        children: /* @__PURE__ */ jsx(HexColorPicker, { color, onChange: onColorChange })
+      }
+    )
+  ] });
+}
+function SliderRow({ label, value, onChange, min, max, step, display }) {
+  const pct = (value[0] - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "10px" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "hsl(var(--foreground))", minWidth: "70px" }, children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step,
+        value: value[0],
+        onChange: (e) => onChange([Number(e.target.value)]),
+        style: {
+          flex: 1,
+          height: "4px",
+          appearance: "none",
+          WebkitAppearance: "none",
+          background: `linear-gradient(to right, hsl(var(--primary)) ${pct}%, hsl(var(--muted)) ${pct}%)`,
+          borderRadius: "2px",
+          cursor: "pointer",
+          outline: "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          fontSize: "11px",
+          fontFamily: "monospace",
+          fontWeight: 500,
+          color: "hsl(var(--muted-foreground))",
+          minWidth: "48px",
+          textAlign: "right"
+        },
+        children: display(value[0])
+      }
+    )
+  ] });
+}
+function ToggleRow({ label, checked, onChange }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: "8px"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "hsl(var(--foreground))" }, children: label }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            role: "switch",
+            "aria-checked": checked,
+            onClick: () => onChange(!checked),
+            style: {
+              width: "36px",
+              height: "20px",
+              borderRadius: "10px",
+              background: checked ? "hsl(var(--primary))" : "hsl(var(--muted))",
+              border: "none",
+              cursor: "pointer",
+              position: "relative",
+              transition: "background 0.2s",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: "2px",
+                  left: checked ? "18px" : "2px",
+                  width: "16px",
+                  height: "16px",
+                  borderRadius: "50%",
+                  background: "white",
+                  transition: "left 0.2s",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function ThemeGenerator({
+  defaultTheme = "#4332f6",
+  defaultSecondaryColor = "#ab67f1",
+  defaultSaturation = 10,
+  defaultLightness = 2,
+  defaultRadius = 0,
+  position = "bottom-right",
+  open: controlledOpen,
+  onOpenChange,
+  labels: labelsProp,
+  className
+}) {
+  const { generateTheme } = useThemeActions();
+  const labels = {
+    title: "Theme Generator",
+    description: "Generate complete themes from a single color. Changes apply in real time.",
+    baseColors: "Base Colors",
+    primary: "Primary",
+    secondary: "Secondary",
+    optional: "Optional",
+    fineTuning: "Fine Tuning",
+    saturation: "Saturation",
+    lightness: "Lightness",
+    borderRadius: "Border Radius",
+    advancedOptions: "Advanced Options",
+    colorfulCard: "Colorful Card",
+    colorfulBackground: "Colorful Background",
+    colorfulBorder: "Colorful Border",
+    reset: "Reset",
+    fabPrimaryLabel: "Primary",
+    ...labelsProp
+  };
+  const [internalOpen, setInternalOpen] = useState3(controlledOpen ?? false);
+  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+  const setIsOpen = useCallback2(
+    (next) => {
+      if (controlledOpen === void 0) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  const [localPrimary, setLocalPrimary] = useState3(defaultTheme);
+  const [localSecondary, setLocalSecondary] = useState3(defaultSecondaryColor);
+  const [isSecondaryEnabled, setIsSecondaryEnabled] = useState3(false);
+  const [localSaturation, setLocalSaturation] = useState3([defaultSaturation]);
+  const [localLightness, setLocalLightness] = useState3([defaultLightness]);
+  const [localRadius, setLocalRadius] = useState3([defaultRadius]);
+  const [localCardIsColored, setLocalCardIsColored] = useState3(false);
+  const [localBackgroundIsColored, setLocalBackgroundIsColored] = useState3(false);
+  const [localBorderIsColored, setLocalBorderIsColored] = useState3(false);
+  const paramsRef = useRef2({
+    theme: localPrimary,
+    secondaryColor: isSecondaryEnabled ? localSecondary : void 0,
+    saturationAdjust: localSaturation[0],
+    lightnessAdjust: localLightness[0],
+    radius: localRadius[0],
+    cardIsColored: localCardIsColored,
+    backgroundIsColored: localBackgroundIsColored,
+    borderIsColored: localBorderIsColored
+  });
+  useEffect3(() => {
+    paramsRef.current = {
+      theme: localPrimary,
+      secondaryColor: isSecondaryEnabled ? localSecondary : void 0,
+      saturationAdjust: localSaturation[0],
+      lightnessAdjust: localLightness[0],
+      radius: localRadius[0],
+      cardIsColored: localCardIsColored,
+      backgroundIsColored: localBackgroundIsColored,
+      borderIsColored: localBorderIsColored
+    };
+  });
+  const debouncedPrimary = useDebounce(localPrimary, 150);
+  const debouncedSecondary = useDebounce(localSecondary, 150);
+  const debouncedSaturation = useDebounce(localSaturation[0], 200);
+  const debouncedLightness = useDebounce(localLightness[0], 200);
+  const debouncedRadius = useDebounce(localRadius[0], 200);
+  useEffect3(() => {
+    generateTheme(paramsRef.current);
+  }, [debouncedPrimary]);
+  useEffect3(() => {
+    if (isSecondaryEnabled) generateTheme(paramsRef.current);
+  }, [debouncedSecondary]);
+  useEffect3(() => {
+    generateTheme(paramsRef.current);
+  }, [debouncedSaturation]);
+  useEffect3(() => {
+    generateTheme(paramsRef.current);
+  }, [debouncedLightness]);
+  useEffect3(() => {
+    generateTheme(paramsRef.current);
+  }, [debouncedRadius]);
+  const handleEnableSecondary = () => {
+    setIsSecondaryEnabled(true);
+    generateTheme({ ...paramsRef.current, secondaryColor: localSecondary });
+  };
+  const handleDisableSecondary = () => {
+    setIsSecondaryEnabled(false);
+    generateTheme({ ...paramsRef.current, secondaryColor: void 0 });
+  };
+  const handleToggle = (key, value) => {
+    if (key === "cardIsColored") setLocalCardIsColored(value);
+    if (key === "backgroundIsColored") setLocalBackgroundIsColored(value);
+    if (key === "borderIsColored") setLocalBorderIsColored(value);
+    generateTheme({ ...paramsRef.current, [key]: value });
+  };
+  const handleReset = () => {
+    setLocalPrimary(defaultTheme);
+    setLocalSecondary(defaultSecondaryColor);
+    setLocalSaturation([defaultSaturation]);
+    setLocalLightness([defaultLightness]);
+    setLocalRadius([defaultRadius]);
+    setIsSecondaryEnabled(false);
+    setLocalCardIsColored(false);
+    setLocalBackgroundIsColored(false);
+    setLocalBorderIsColored(false);
+    generateTheme({
+      theme: defaultTheme,
+      saturationAdjust: defaultSaturation,
+      lightnessAdjust: defaultLightness,
+      radius: defaultRadius,
+      cardIsColored: false,
+      backgroundIsColored: false,
+      borderIsColored: false
+    });
+  };
+  const positionStyle = position === "bottom-left" ? { bottom: "24px", left: "24px", alignItems: "flex-start" } : { bottom: "24px", right: "24px", alignItems: "flex-end" };
+  const panelOrigin = position === "bottom-left" ? "bottom left" : "bottom right";
+  const panelPosition = position === "bottom-left" ? { bottom: 0, left: 0 } : { bottom: 0, right: 0 };
+  const styleId = "dheme-slider-styles";
+  if (typeof document !== "undefined" && !document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      input[type=range].dheme-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 14px; height: 14px;
+        border-radius: 50%;
+        background: hsl(var(--primary, 221.2 83.2% 53.3%));
+        border: 2px solid white;
+        box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
+        cursor: pointer;
+      }
+      input[type=range].dheme-slider::-moz-range-thumb {
+        width: 14px; height: 14px;
+        border-radius: 50%;
+        background: hsl(var(--primary, 221.2 83.2% 53.3%));
+        border: 2px solid white;
+        box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
+        cursor: pointer;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => setIsOpen(false),
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.2)",
+          backdropFilter: "blur(1px)",
+          zIndex: 40
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(className),
+        style: {
+          position: "fixed",
+          zIndex: 50,
+          display: "flex",
+          flexDirection: "column",
+          gap: "16px",
+          ...positionStyle
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                ...panelPosition,
+                width: isOpen ? "340px" : "180px",
+                height: isOpen ? "auto" : "56px",
+                opacity: isOpen ? 1 : 0,
+                transform: isOpen ? "scale(1) translateY(0)" : "scale(0.9) translateY(32px)",
+                pointerEvents: isOpen ? "auto" : "none",
+                transformOrigin: panelOrigin,
+                transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)",
+                borderRadius: "12px",
+                border: "1px solid hsl(var(--border))",
+                background: "hsl(var(--card))",
+                boxShadow: "0 25px 50px rgba(0,0,0,0.15)",
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      padding: "14px 16px",
+                      borderBottom: "1px solid hsl(var(--border))",
+                      background: "hsl(var(--muted) / 0.3)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                        /* @__PURE__ */ jsx(SparklesIcon, { className: "dheme-sparkles" }),
+                        /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => setIsOpen(false),
+                          style: {
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: "2px",
+                            color: "hsl(var(--muted-foreground))",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            borderRadius: "4px"
+                          },
+                          children: /* @__PURE__ */ jsx(XIcon, {})
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      maxHeight: "calc(100vh - 200px)",
+                      overflowY: "auto",
+                      background: "hsl(var(--background))"
+                    },
+                    children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          style: {
+                            fontSize: "11px",
+                            color: "hsl(var(--muted-foreground))",
+                            margin: 0,
+                            lineHeight: 1.5
+                          },
+                          children: labels.description
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("section", { children: [
+                        /* @__PURE__ */ jsx(SectionHeading, { children: labels.baseColors }),
+                        /* @__PURE__ */ jsx(
+                          ColorRow,
+                          {
+                            label: labels.primary,
+                            color: localPrimary,
+                            onColorChange: setLocalPrimary,
+                            onInputChange: (v) => {
+                              if (v.length === 6) setLocalPrimary(`#${v}`);
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          ColorRow,
+                          {
+                            label: labels.secondary,
+                            badge: labels.optional,
+                            color: localSecondary,
+                            disabled: !isSecondaryEnabled,
+                            onColorChange: (c) => {
+                              if (isSecondaryEnabled) setLocalSecondary(c);
+                            },
+                            onInputChange: (v) => {
+                              if (isSecondaryEnabled && v.length === 6) setLocalSecondary(`#${v}`);
+                            },
+                            actionButton: /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
+                                style: {
+                                  background: "none",
+                                  border: "none",
+                                  cursor: "pointer",
+                                  padding: "2px",
+                                  color: "hsl(var(--muted-foreground))",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  borderRadius: "4px"
+                                },
+                                children: isSecondaryEnabled ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
+                              }
+                            )
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs("section", { children: [
+                        /* @__PURE__ */ jsx(SectionHeading, { children: labels.fineTuning }),
+                        /* @__PURE__ */ jsx(
+                          SliderRow,
+                          {
+                            label: labels.saturation,
+                            value: localSaturation,
+                            onChange: setLocalSaturation,
+                            min: -100,
+                            max: 100,
+                            step: 1,
+                            display: (v) => `${v > 0 ? "+" : ""}${v}%`
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          SliderRow,
+                          {
+                            label: labels.lightness,
+                            value: localLightness,
+                            onChange: setLocalLightness,
+                            min: -100,
+                            max: 100,
+                            step: 1,
+                            display: (v) => `${v > 0 ? "+" : ""}${v}%`
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          SliderRow,
+                          {
+                            label: labels.borderRadius,
+                            value: localRadius,
+                            onChange: setLocalRadius,
+                            min: 0,
+                            max: 2,
+                            step: 0.1,
+                            display: (v) => `${v.toFixed(1)}rem`
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs("section", { children: [
+                        /* @__PURE__ */ jsx(SectionHeading, { children: labels.advancedOptions }),
+                        /* @__PURE__ */ jsx(
+                          ToggleRow,
+                          {
+                            label: labels.colorfulCard,
+                            checked: localCardIsColored,
+                            onChange: (v) => handleToggle("cardIsColored", v)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          ToggleRow,
+                          {
+                            label: labels.colorfulBackground,
+                            checked: localBackgroundIsColored,
+                            onChange: (v) => handleToggle("backgroundIsColored", v)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          ToggleRow,
+                          {
+                            label: labels.colorfulBorder,
+                            checked: localBorderIsColored,
+                            onChange: (v) => handleToggle("borderIsColored", v)
+                          }
+                        )
+                      ] })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      padding: "10px 12px",
+                      borderTop: "1px solid hsl(var(--border))",
+                      background: "hsl(var(--muted) / 0.2)"
+                    },
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: handleReset,
+                        style: {
+                          width: "100%",
+                          height: "32px",
+                          background: "none",
+                          border: "1px solid hsl(var(--border))",
+                          borderRadius: "6px",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          gap: "6px",
+                          fontSize: "12px",
+                          color: "hsl(var(--muted-foreground))",
+                          transition: "background 0.15s"
+                        },
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.background = "hsl(var(--muted))";
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.background = "none";
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(RotateCcwIcon, {}),
+                          labels.reset
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: () => setIsOpen(true),
+              style: {
+                width: isOpen ? "56px" : "180px",
+                height: "56px",
+                borderRadius: "99px",
+                border: "1px solid hsl(var(--border))",
+                background: "hsl(var(--card))",
+                boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+                cursor: isOpen ? "default" : "pointer",
+                position: "relative",
+                overflow: "hidden",
+                opacity: isOpen ? 0 : 1,
+                transform: isOpen ? "scale(0.5) translateY(16px)" : "scale(1) translateY(0)",
+                pointerEvents: isOpen ? "none" : "auto",
+                transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)"
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "0 8px 0 12px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          width: "32px",
+                          height: "32px",
+                          borderRadius: "50%",
+                          background: localPrimary,
+                          border: "1px solid hsl(var(--border))",
+                          boxShadow: "0 0 0 2px hsl(var(--background))",
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: "2px",
+                          flex: 1,
+                          padding: "0 8px"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "10px",
+                                fontWeight: 700,
+                                letterSpacing: "0.08em",
+                                textTransform: "uppercase",
+                                color: "hsl(var(--foreground))"
+                              },
+                              children: labels.fabPrimaryLabel
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                gap: "8px",
+                                fontSize: "10px",
+                                fontFamily: "monospace",
+                                color: "hsl(var(--muted-foreground))"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxs("span", { children: [
+                                  "S:",
+                                  localSaturation[0] > 0 ? "+" : "",
+                                  localSaturation[0],
+                                  "%"
+                                ] }),
+                                /* @__PURE__ */ jsxs("span", { children: [
+                                  "L:",
+                                  localLightness[0] > 0 ? "+" : "",
+                                  localLightness[0],
+                                  "%"
+                                ] })
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          width: "32px",
+                          height: "32px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: "50%",
+                          background: "hsl(var(--muted) / 0.5)",
+                          flexShrink: 0
+                        },
+                        children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/hooks/useTheme.ts
 import { useContext as useContext2 } from "react";
-function useThemeActions() {
-  const context = useContext2(ThemeActionsContext);
+function useTheme() {
+  const context = useContext2(ThemeDataContext);
   if (!context) {
-    throw new Error("useThemeActions must be used within a <DhemeProvider>");
+    throw new Error("useTheme must be used within a <DhemeProvider>");
   }
   return context;
 }
 
 // src/hooks/useGenerateTheme.ts
-import { useState as useState2, useCallback as useCallback2 } from "react";
+import { useState as useState4, useCallback as useCallback3 } from "react";
 function useGenerateTheme() {
   const { generateTheme: generate } = useThemeActions();
-  const [isGenerating, setIsGenerating] = useState2(false);
-  const [error, setError] = useState2(null);
-  const generateTheme = useCallback2(
+  const [isGenerating, setIsGenerating] = useState4(false);
+  const [error, setError] = useState4(null);
+  const generateTheme = useCallback3(
     async (params) => {
       setIsGenerating(true);
       setError(null);
@@ -411,6 +1522,7 @@ export {
   DhemeScript,
   ThemeActionsContext,
   ThemeDataContext,
+  ThemeGenerator,
   applyThemeCSSVariables,
   buildCacheKey,
   getBlockingScriptPayload,