@dheme/react 2.0.0 → 2.2.0

package/dist/index.js

@@ -34,6 +34,7 @@ __export(index_exports, {
   DhemeScript: () => DhemeScript,
   ThemeActionsContext: () => ThemeActionsContext,
   ThemeDataContext: () => ThemeDataContext,
+  ThemeGenerator: () => ThemeGenerator,
   applyThemeCSSVariables: () => applyThemeCSSVariables,
   buildCacheKey: () => buildCacheKey,
   getBlockingScriptPayload: () => getBlockingScriptPayload,
@@ -406,33 +407,900 @@ function DhemeScript({
   });
 }
 
-// src/hooks/useTheme.ts
+// src/components/ThemeGenerator.tsx
+var import_react7 = require("react");
+
+// src/hooks/useThemeActions.ts
 var import_react5 = require("react");
-function useTheme() {
-  const context = (0, import_react5.useContext)(ThemeDataContext);
+function useThemeActions() {
+  const context = (0, import_react5.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
 var import_react6 = require("react");
-function useThemeActions() {
-  const context = (0, import_react6.useContext)(ThemeActionsContext);
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = (0, import_react6.useState)(value);
+  (0, import_react6.useEffect)(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/components/ThemeGenerator.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function SparklesIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 3v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 17v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 5h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 19h4" })
+  ] });
+}
+function XIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+  ] });
+}
+function PlusIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14" })
+  ] });
+}
+function ChevronUpIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "m18 15-6-6-6 6" }) });
+}
+function RotateCcwIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_react7.useRef)(null);
+  const hueRef = (0, import_react7.useRef)(null);
+  const isDraggingGradient = (0, import_react7.useRef)(false);
+  const isDraggingHue = (0, import_react7.useRef)(false);
+  const handleGradientPointer = (0, import_react7.useCallback)((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 = (0, import_react7.useCallback)((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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px", userSelect: "none" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+            position: "absolute",
+            inset: 0,
+            borderRadius: "6px",
+            background: "linear-gradient(to top, #000, transparent)"
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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] = (0, import_react7.useState)(false);
+  const hex = color.replace("#", "").toUpperCase();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: "10px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", fontWeight: 500, color: "hsl(var(--foreground))" }, children: label }),
+        badge && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { style: { padding: "0 8px", fontSize: "12px", color: "hsl(var(--muted-foreground))", fontFamily: "monospace" }, children: "#" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(HexColorPicker, { color, onChange: onColorChange }) })
+  ] });
+}
+function SliderRow({ label, value, onChange, min, max, step, display }) {
+  const pct = (value[0] - min) / (max - min) * 100;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "10px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", color: "hsl(var(--foreground))", minWidth: "70px" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "8px"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", color: "hsl(var(--foreground))" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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] = (0, import_react7.useState)(controlledOpen ?? false);
+  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+  const setIsOpen = (0, import_react7.useCallback)((next) => {
+    if (controlledOpen === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [controlledOpen, onOpenChange]);
+  const [localPrimary, setLocalPrimary] = (0, import_react7.useState)(defaultTheme);
+  const [localSecondary, setLocalSecondary] = (0, import_react7.useState)(defaultSecondaryColor);
+  const [isSecondaryEnabled, setIsSecondaryEnabled] = (0, import_react7.useState)(false);
+  const [localSaturation, setLocalSaturation] = (0, import_react7.useState)([defaultSaturation]);
+  const [localLightness, setLocalLightness] = (0, import_react7.useState)([defaultLightness]);
+  const [localRadius, setLocalRadius] = (0, import_react7.useState)([defaultRadius]);
+  const [localCardIsColored, setLocalCardIsColored] = (0, import_react7.useState)(false);
+  const [localBackgroundIsColored, setLocalBackgroundIsColored] = (0, import_react7.useState)(false);
+  const [localBorderIsColored, setLocalBorderIsColored] = (0, import_react7.useState)(false);
+  const paramsRef = (0, import_react7.useRef)({
+    theme: localPrimary,
+    secondaryColor: isSecondaryEnabled ? localSecondary : void 0,
+    saturationAdjust: localSaturation[0],
+    lightnessAdjust: localLightness[0],
+    radius: localRadius[0],
+    cardIsColored: localCardIsColored,
+    backgroundIsColored: localBackgroundIsColored,
+    borderIsColored: localBorderIsColored
+  });
+  (0, import_react7.useEffect)(() => {
+    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);
+  (0, import_react7.useEffect)(() => {
+    generateTheme(paramsRef.current);
+  }, [debouncedPrimary]);
+  (0, import_react7.useEffect)(() => {
+    if (isSecondaryEnabled) generateTheme(paramsRef.current);
+  }, [debouncedSecondary]);
+  (0, import_react7.useEffect)(() => {
+    generateTheme(paramsRef.current);
+  }, [debouncedSaturation]);
+  (0, import_react7.useEffect)(() => {
+    generateTheme(paramsRef.current);
+  }, [debouncedLightness]);
+  (0, import_react7.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        onClick: () => setIsOpen(false),
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.2)",
+          backdropFilter: "blur(1px)",
+          zIndex: 40
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: cn(className),
+        style: {
+          position: "fixed",
+          zIndex: 50,
+          display: "flex",
+          flexDirection: "column",
+          gap: "16px",
+          ...positionStyle
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SparklesIcon, { className: "dheme-sparkles" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(XIcon, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+                  maxHeight: "calc(100vh - 200px)",
+                  overflowY: "auto",
+                  background: "hsl(var(--background))"
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: "11px", color: "hsl(var(--muted-foreground))", margin: 0, lineHeight: 1.5 }, children: labels.description }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.baseColors }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ColorRow,
+                      {
+                        label: labels.primary,
+                        color: localPrimary,
+                        onColorChange: setLocalPrimary,
+                        onInputChange: (v) => {
+                          if (v.length === 6) setLocalPrimary(`#${v}`);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(XIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlusIcon, {})
+                          }
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.fineTuning }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      SliderRow,
+                      {
+                        label: labels.saturation,
+                        value: localSaturation,
+                        onChange: setLocalSaturation,
+                        min: -100,
+                        max: 100,
+                        step: 1,
+                        display: (v) => `${v > 0 ? "+" : ""}${v}%`
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      SliderRow,
+                      {
+                        label: labels.lightness,
+                        value: localLightness,
+                        onChange: setLocalLightness,
+                        min: -100,
+                        max: 100,
+                        step: 1,
+                        display: (v) => `${v > 0 ? "+" : ""}${v}%`
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      SliderRow,
+                      {
+                        label: labels.borderRadius,
+                        value: localRadius,
+                        onChange: setLocalRadius,
+                        min: 0,
+                        max: 2,
+                        step: 0.1,
+                        display: (v) => `${v.toFixed(1)}rem`
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.advancedOptions }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ToggleRow,
+                      {
+                        label: labels.colorfulCard,
+                        checked: localCardIsColored,
+                        onChange: (v) => handleToggle("cardIsColored", v)
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ToggleRow,
+                      {
+                        label: labels.colorfulBackground,
+                        checked: localBackgroundIsColored,
+                        onChange: (v) => handleToggle("backgroundIsColored", v)
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ToggleRow,
+                      {
+                        label: labels.colorfulBorder,
+                        checked: localBorderIsColored,
+                        onChange: (v) => handleToggle("borderIsColored", v)
+                      }
+                    )
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+                  padding: "10px 12px",
+                  borderTop: "1px solid hsl(var(--border))",
+                  background: "hsl(var(--muted) / 0.2)"
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(RotateCcwIcon, {}),
+                      labels.reset
+                    ]
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "0 8px 0 12px"
+              }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px", flex: 1, padding: "0 8px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
+                    fontSize: "10px",
+                    fontWeight: 700,
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    color: "hsl(var(--foreground))"
+                  }, children: labels.fabPrimaryLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+                    display: "flex",
+                    gap: "8px",
+                    fontSize: "10px",
+                    fontFamily: "monospace",
+                    color: "hsl(var(--muted-foreground))"
+                  }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                      "S:",
+                      localSaturation[0] > 0 ? "+" : "",
+                      localSaturation[0],
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                      "L:",
+                      localLightness[0] > 0 ? "+" : "",
+                      localLightness[0],
+                      "%"
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(ChevronUpIcon, {}) })
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/hooks/useTheme.ts
+var import_react8 = require("react");
+function useTheme() {
+  const context = (0, import_react8.useContext)(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
-var import_react7 = require("react");
+var import_react9 = require("react");
 function useGenerateTheme() {
   const { generateTheme: generate } = useThemeActions();
-  const [isGenerating, setIsGenerating] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const generateTheme = (0, import_react7.useCallback)(
+  const [isGenerating, setIsGenerating] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const generateTheme = (0, import_react9.useCallback)(
     async (params) => {
       setIsGenerating(true);
       setError(null);
@@ -462,6 +1330,7 @@ function useDhemeClient() {
   DhemeScript,
   ThemeActionsContext,
   ThemeDataContext,
+  ThemeGenerator,
   applyThemeCSSVariables,
   buildCacheKey,
   getBlockingScriptPayload,