@fakhrirafiki/theme-engine 0.4.2 → 0.4.4

package/dist/index.js

@@ -3870,7 +3870,15 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
             'destructive', 'destructive-foreground', 'border', 'input', 'ring',
             'chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5',
             'sidebar', 'sidebar-foreground', 'sidebar-primary', 'sidebar-primary-foreground',
-            'sidebar-accent', 'sidebar-accent-foreground', 'sidebar-border', 'sidebar-ring'
+            'sidebar-accent', 'sidebar-accent-foreground', 'sidebar-border', 'sidebar-ring',
+            // Semantic accent colors for status and feedback
+            'accent-info', 'accent-info-foreground',
+            'accent-success', 'accent-success-foreground',
+            'accent-warning', 'accent-warning-foreground',
+            'accent-danger', 'accent-danger-foreground',
+            'accent-brand', 'accent-brand-foreground',
+            'accent-feature', 'accent-feature-foreground',
+            'accent-highlight', 'accent-highlight-foreground'
           ],
           typography: ['font-sans', 'font-serif', 'font-mono'],
           layout: ['radius'],
@@ -3878,6 +3886,106 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
           spacing: ['letter-spacing', 'spacing']
         };
 
+        // Normalize hex/rgb/hsl() colors into "H S% L%" for hsl(var(--token)) usage.
+        function normalizeColorValueToHslTriplet(value) {
+          if (!value) return value;
+          const trimmed = String(value).trim();
+          if (!trimmed) return value;
+          if (trimmed.startsWith('var(')) return trimmed;
+
+          // Already a triplet: "210 40% 98%"
+          if (/^\\d+(?:\\.\\d+)?\\s+\\d+(?:\\.\\d+)?%\\s+\\d+(?:\\.\\d+)?%$/.test(trimmed)) {
+            return trimmed;
+          }
+
+          function clamp(n, min, max) {
+            return Math.min(max, Math.max(min, n));
+          }
+
+          function rgbToHsl(r, g, b) {
+            r /= 255;
+            g /= 255;
+            b /= 255;
+            const max = Math.max(r, g, b);
+            const min = Math.min(r, g, b);
+            const diff = max - min;
+            let h = 0;
+            let s = 0;
+            const l = (max + min) / 2;
+
+            if (diff !== 0) {
+              s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
+              switch (max) {
+                case r:
+                  h = (g - b) / diff + (g < b ? 6 : 0);
+                  break;
+                case g:
+                  h = (b - r) / diff + 2;
+                  break;
+                case b:
+                  h = (r - g) / diff + 4;
+                  break;
+              }
+              h /= 6;
+            }
+
+            return {
+              h: Math.round(h * 360),
+              s: Math.round(s * 100),
+              l: Math.round(l * 100),
+            };
+          }
+
+          function hexToRgb(hex) {
+            let clean = hex.replace('#', '').trim();
+            if (clean.length === 3) clean = clean.split('').map(function(c) { return c + c; }).join('');
+            if (clean.length === 8) clean = clean.substring(0, 6); // ignore alpha
+            if (clean.length !== 6) return null;
+
+            const r = parseInt(clean.substring(0, 2), 16);
+            const g = parseInt(clean.substring(2, 4), 16);
+            const b = parseInt(clean.substring(4, 6), 16);
+            if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+            return { r: r, g: g, b: b };
+          }
+
+          function toTriplet(hsl) {
+            return String(clamp(hsl.h, 0, 360)) + ' ' + String(clamp(hsl.s, 0, 100)) + '% ' + String(clamp(hsl.l, 0, 100)) + '%';
+          }
+
+          // hsl(...) or raw "H S% L%"
+          if (/^hsl\\(/i.test(trimmed)) {
+            const cleaned = trimmed.replace(/hsl\\(|\\)/gi, '').replace(/[,%]/g, ' ').trim();
+            const parts = cleaned.split(/\\s+/).filter(Boolean);
+            if (parts.length === 3) {
+              const h = parseFloat(parts[0]) || 0;
+              const s = parseFloat(parts[1]) || 0;
+              const l = parseFloat(parts[2]) || 0;
+              return toTriplet({ h: h, s: s, l: l });
+            }
+          }
+
+          // rgb(...)
+          if (/^rgb\\(/i.test(trimmed)) {
+            const cleaned = trimmed.replace(/rgb\\(|\\)/gi, '').trim();
+            const parts = cleaned.split(',').map(function(p) { return p.trim(); });
+            if (parts.length === 3) {
+              const r = clamp(parseFloat(parts[0]) || 0, 0, 255);
+              const g = clamp(parseFloat(parts[1]) || 0, 0, 255);
+              const b = clamp(parseFloat(parts[2]) || 0, 0, 255);
+              return toTriplet(rgbToHsl(r, g, b));
+            }
+          }
+
+          // hex
+          if (trimmed[0] === '#') {
+            const rgb = hexToRgb(trimmed);
+            if (rgb) return toTriplet(rgbToHsl(rgb.r, rgb.g, rgb.b));
+          }
+
+          return value;
+        }
+
         // Function to apply all preset properties - with proper clearing and defaults
         function applyPresetProperties(colors) {
           if (!colors) return;
@@ -3909,6 +4017,10 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
           
           // Apply all properties with defaults for missing ones
           let appliedCount = 0;
+          const colorProps = {};
+          CSS_CATEGORIES.colors.forEach(function(prop) { colorProps[prop] = true; });
+          colorProps['shadow-color'] = true;
+
           allProperties.forEach(function(prop) {
             let value = colors[prop];
             
@@ -3918,6 +4030,10 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
             }
             
             if (value) {
+              if (colorProps[prop]) {
+                value = normalizeColorValueToHslTriplet(value);
+              }
+
               const cssVar = '--' + prop;
               // Apply directly like TweakCN does - no conversion, no !important
               root.style.setProperty(cssVar, value);
@@ -3979,6 +4095,138 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { dangerouslySetInnerHTML: { __html: scriptContent }, suppressHydrationWarning: true });
 }
 
+// src/utils/colors.ts
+function parseHSL(hslString) {
+  try {
+    const cleaned = hslString.replace(/hsl\(|\)/g, "").replace(/[,%]/g, " ").trim();
+    const parts = cleaned.split(/\s+/).filter(Boolean);
+    if (parts.length !== 3) return null;
+    const h = parseFloat(parts[0]) || 0;
+    const s = parseFloat(parts[1]) || 0;
+    const l = parseFloat(parts[2]) || 0;
+    return {
+      h: Math.max(0, Math.min(360, h)),
+      s: Math.max(0, Math.min(100, s)),
+      l: Math.max(0, Math.min(100, l))
+    };
+  } catch {
+    return null;
+  }
+}
+function parseHex(hexString) {
+  try {
+    let hex = hexString.replace("#", "");
+    if (hex.length === 3) {
+      hex = hex.split("").map((char) => char + char).join("");
+    }
+    if (hex.length !== 6) return null;
+    const r = parseInt(hex.substring(0, 2), 16);
+    const s = parseInt(hex.substring(2, 4), 16);
+    const l = parseInt(hex.substring(4, 6), 16);
+    if (isNaN(r) || isNaN(s) || isNaN(l)) return null;
+    return { r, g: s, b: l };
+  } catch {
+    return null;
+  }
+}
+function hslToRgb(hsl) {
+  const h = hsl.h / 360;
+  const s = hsl.s / 100;
+  const l = hsl.l / 100;
+  if (s === 0) {
+    const gray = Math.round(l * 255);
+    return { r: gray, g: gray, b: gray };
+  }
+  const hue2rgb = (p2, q2, t) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+    if (t < 1 / 2) return q2;
+    if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+    return p2;
+  };
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const r = Math.round(hue2rgb(p, q, h + 1 / 3) * 255);
+  const g = Math.round(hue2rgb(p, q, h) * 255);
+  const b = Math.round(hue2rgb(p, q, h - 1 / 3) * 255);
+  return { r, g, b };
+}
+function rgbToHsl(rgb) {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (diff !== 0) {
+    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / diff + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / diff + 2;
+        break;
+      case b:
+        h = (r - g) / diff + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function formatHSL(hsl, includeHslWrapper = true) {
+  const values = `${hsl.h} ${hsl.s}% ${hsl.l}%`;
+  return includeHslWrapper ? `hsl(${values})` : values;
+}
+function formatRGB(rgb) {
+  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+}
+function formatHex(rgb) {
+  const toHex = (n) => {
+    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+function formatColor(colorInput, outputFormat = "hsl", includeFunctionWrapper = true) {
+  let hsl = parseHSL(colorInput);
+  if (!hsl) {
+    const rgb = parseHex(colorInput);
+    if (rgb) {
+      hsl = rgbToHsl(rgb);
+    }
+  }
+  if (!hsl) {
+    return colorInput;
+  }
+  switch (outputFormat) {
+    case "hsl":
+      return formatHSL(hsl, includeFunctionWrapper);
+    case "rgb":
+      return formatRGB(hslToRgb(hsl));
+    case "hex":
+      return formatHex(hslToRgb(hsl));
+    default:
+      return colorInput;
+  }
+}
+function withAlpha(colorInput, alpha) {
+  const hsl = parseHSL(colorInput);
+  if (!hsl) return colorInput;
+  const rgb = hslToRgb(hsl);
+  const clampedAlpha = Math.max(0, Math.min(1, alpha));
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clampedAlpha})`;
+}
+
 // src/providers/UnifiedThemeProvider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var UnifiedThemeContext = (0, import_react2.createContext)(void 0);
@@ -4001,6 +4249,14 @@ function setStoredMode(mode, storageKey) {
   } catch {
   }
 }
+function normalizeColorValueToHslTriplet(value) {
+  const trimmed = value.trim();
+  const parsedHsl = parseHSL(trimmed);
+  if (parsedHsl) return formatHSL(parsedHsl, false);
+  const parsedRgb = parseHex(trimmed);
+  if (parsedRgb) return formatHSL(rgbToHsl(parsedRgb), false);
+  return value;
+}
 function ThemeProvider({
   children,
   defaultMode = "system",
@@ -4176,6 +4432,9 @@ function ThemeProvider({
         value = defaultValues[prop];
       }
       if (value) {
+        if (CSS_PROPERTY_CATEGORIES.colors.includes(prop) || prop === "shadow-color") {
+          value = normalizeColorValueToHslTriplet(String(value));
+        }
         const cssVar = `--${prop}`;
         root.style.setProperty(cssVar, value);
         appliedCount++;
@@ -4461,140 +4720,6 @@ ThemeToggle.displayName = "ThemeToggle";
 // src/components/ThemePresetButtons.tsx
 var import_react4 = require("react");
 var import_clsx2 = require("clsx");
-
-// src/utils/colors.ts
-function parseHSL(hslString) {
-  try {
-    const cleaned = hslString.replace(/hsl\(|\)/g, "").replace(/[,%]/g, " ").trim();
-    const parts = cleaned.split(/\s+/).filter(Boolean);
-    if (parts.length !== 3) return null;
-    const h = parseFloat(parts[0]) || 0;
-    const s = parseFloat(parts[1]) || 0;
-    const l = parseFloat(parts[2]) || 0;
-    return {
-      h: Math.max(0, Math.min(360, h)),
-      s: Math.max(0, Math.min(100, s)),
-      l: Math.max(0, Math.min(100, l))
-    };
-  } catch {
-    return null;
-  }
-}
-function parseHex(hexString) {
-  try {
-    let hex = hexString.replace("#", "");
-    if (hex.length === 3) {
-      hex = hex.split("").map((char) => char + char).join("");
-    }
-    if (hex.length !== 6) return null;
-    const r = parseInt(hex.substring(0, 2), 16);
-    const s = parseInt(hex.substring(2, 4), 16);
-    const l = parseInt(hex.substring(4, 6), 16);
-    if (isNaN(r) || isNaN(s) || isNaN(l)) return null;
-    return { r, g: s, b: l };
-  } catch {
-    return null;
-  }
-}
-function hslToRgb(hsl) {
-  const h = hsl.h / 360;
-  const s = hsl.s / 100;
-  const l = hsl.l / 100;
-  if (s === 0) {
-    const gray = Math.round(l * 255);
-    return { r: gray, g: gray, b: gray };
-  }
-  const hue2rgb = (p2, q2, t) => {
-    if (t < 0) t += 1;
-    if (t > 1) t -= 1;
-    if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
-    if (t < 1 / 2) return q2;
-    if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
-    return p2;
-  };
-  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-  const p = 2 * l - q;
-  const r = Math.round(hue2rgb(p, q, h + 1 / 3) * 255);
-  const g = Math.round(hue2rgb(p, q, h) * 255);
-  const b = Math.round(hue2rgb(p, q, h - 1 / 3) * 255);
-  return { r, g, b };
-}
-function rgbToHsl(rgb) {
-  const r = rgb.r / 255;
-  const g = rgb.g / 255;
-  const b = rgb.b / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const diff = max - min;
-  let h = 0;
-  let s = 0;
-  const l = (max + min) / 2;
-  if (diff !== 0) {
-    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
-    switch (max) {
-      case r:
-        h = (g - b) / diff + (g < b ? 6 : 0);
-        break;
-      case g:
-        h = (b - r) / diff + 2;
-        break;
-      case b:
-        h = (r - g) / diff + 4;
-        break;
-    }
-    h /= 6;
-  }
-  return {
-    h: Math.round(h * 360),
-    s: Math.round(s * 100),
-    l: Math.round(l * 100)
-  };
-}
-function formatHSL(hsl, includeHslWrapper = true) {
-  const values = `${hsl.h} ${hsl.s}% ${hsl.l}%`;
-  return includeHslWrapper ? `hsl(${values})` : values;
-}
-function formatRGB(rgb) {
-  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
-}
-function formatHex(rgb) {
-  const toHex = (n) => {
-    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  };
-  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
-}
-function formatColor(colorInput, outputFormat = "hsl", includeFunctionWrapper = true) {
-  let hsl = parseHSL(colorInput);
-  if (!hsl) {
-    const rgb = parseHex(colorInput);
-    if (rgb) {
-      hsl = rgbToHsl(rgb);
-    }
-  }
-  if (!hsl) {
-    return colorInput;
-  }
-  switch (outputFormat) {
-    case "hsl":
-      return formatHSL(hsl, includeFunctionWrapper);
-    case "rgb":
-      return formatRGB(hslToRgb(hsl));
-    case "hex":
-      return formatHex(hslToRgb(hsl));
-    default:
-      return colorInput;
-  }
-}
-function withAlpha(colorInput, alpha) {
-  const hsl = parseHSL(colorInput);
-  if (!hsl) return colorInput;
-  const rgb = hslToRgb(hsl);
-  const clampedAlpha = Math.max(0, Math.min(1, alpha));
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clampedAlpha})`;
-}
-
-// src/components/ThemePresetButtons.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var DEFAULT_ANIMATION = {
   enabled: true,
@@ -4617,6 +4742,17 @@ var DEFAULT_LAYOUT = {
   colorBoxCount: 3,
   enableMask: true
 };
+function getPresetButtonWidthPx(label, layout) {
+  const approxCharWidthPx = 7.25;
+  const maxWidthPx = 360;
+  const dotSizePx = 12;
+  const dotGapPx = 4;
+  const dotsWidthPx = layout.showColorBoxes ? layout.colorBoxCount * dotSizePx + Math.max(0, layout.colorBoxCount - 1) * dotGapPx : 0;
+  const contentPaddingPx = 28;
+  const estimatedTextWidthPx = Math.ceil(label.length * approxCharWidthPx);
+  const estimatedWidthPx = contentPaddingPx + dotsWidthPx + estimatedTextWidthPx;
+  return Math.min(maxWidthPx, Math.max(layout.buttonWidth, estimatedWidthPx));
+}
 var ColorBox = ({ color, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
@@ -4636,6 +4772,8 @@ var PresetButton = ({
   renderColorBox
 }) => {
   const colors = preset.colors[mode];
+  const label = preset.name.replace(/-/g, " ");
+  const buttonWidth = Math.max(layout.buttonWidth, Number(preset.metadata?.buttonWidth ?? 0) || layout.buttonWidth);
   if (renderPreset) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
@@ -4647,23 +4785,23 @@ var PresetButton = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", style: { minWidth: layout.buttonWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", style: { width: buttonWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
     {
+      type: "button",
       className: (0, import_clsx2.clsx)(
         "theme-preset-button",
-        "cursor-pointer bg-card hover:bg-card/80 border border-border rounded-lg",
-        "flex w-full h-full items-center justify-center relative transition-all duration-200",
-        "hover:shadow-lg hover:border-primary/20 px-4 py-3",
-        isSelected ? "ring-2 ring-primary/50 shadow-md bg-primary/5" : ""
+        isSelected && "theme-preset-button--selected"
       ),
       onClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2.5 text-center", children: [
-        layout.showColorBoxes && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex gap-1", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
+      "aria-pressed": isSelected,
+      title: label,
+      children: [
+        layout.showColorBoxes && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "theme-preset-button__colors", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
           (color, index) => renderColorBox ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: renderColorBox(color, index) }, index) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorBox, { color }, index)
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "capitalize px-1 leading-tight text-sm font-medium text-foreground", children: preset.name.replace(/-/g, " ") })
-      ] })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "theme-preset-button__text", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "theme-preset-button__label", children: label }) })
+      ]
     }
   ) });
 };
@@ -4679,7 +4817,7 @@ var AnimatedRow = ({
 }) => {
   if (presets.length === 0) return null;
   const duplicatedPresets = Array(animation.duplicationFactor).fill(presets).flat();
-  const totalWidth = presets.length * (layout.buttonWidth + layout.buttonGap);
+  const totalWidth = presets.reduce((sum, preset) => sum + (Number(preset.metadata?.buttonWidth) || layout.buttonWidth), 0) + presets.length * layout.buttonGap;
   const effectiveScrollSpeed = Math.max(0.1, animation.scrollSpeed || 1);
   const animationDuration = presets.length * animation.duration / effectiveScrollSpeed;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -4747,41 +4885,47 @@ var ThemePresetButtons = ({
     try {
       setLoading(true);
       setError(null);
-      let allPresets = [];
+      const builtInPresetList = [];
+      const customPresetList = [];
       if (showBuiltIn) {
-        const builtInPresetList = Object.entries(builtInPresets).map(([id, preset]) => ({
-          id,
-          name: preset.label,
-          colors: {
-            light: preset.styles.light,
-            dark: preset.styles.dark
-          },
-          metadata: {
-            category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
-            tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
-            createdAt: preset.createdAt,
-            provider: "built-in"
-          }
-        }));
-        allPresets.push(...builtInPresetList);
+        builtInPresetList.push(
+          ...Object.entries(builtInPresets).map(([id, preset]) => ({
+            id,
+            name: preset.label,
+            colors: {
+              light: preset.styles.light,
+              dark: preset.styles.dark
+            },
+            metadata: {
+              buttonWidth: getPresetButtonWidthPx(preset.label, layout),
+              category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
+              tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
+              createdAt: preset.createdAt,
+              provider: "built-in"
+            }
+          }))
+        );
       }
       if (showCustom) {
-        const customPresetList = Object.entries(customPresets).map(([id, preset]) => ({
-          id,
-          name: preset.label,
-          colors: {
-            light: preset.styles.light,
-            dark: preset.styles.dark
-          },
-          metadata: {
-            category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
-            tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
-            createdAt: preset.createdAt,
-            provider: "custom"
-          }
-        }));
-        allPresets.push(...customPresetList);
+        customPresetList.push(
+          ...Object.entries(customPresets).map(([id, preset]) => ({
+            id,
+            name: preset.label,
+            colors: {
+              light: preset.styles.light,
+              dark: preset.styles.dark
+            },
+            metadata: {
+              buttonWidth: getPresetButtonWidthPx(preset.label, layout),
+              category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
+              tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
+              createdAt: preset.createdAt,
+              provider: "custom"
+            }
+          }))
+        );
       }
+      let allPresets = [...customPresetList, ...builtInPresetList];
       if (categories && categories.length > 0) {
         allPresets = allPresets.filter(
           (preset) => categories.includes(preset.metadata?.category || "unknown")
@@ -4797,7 +4941,7 @@ var ThemePresetButtons = ({
     } finally {
       setLoading(false);
     }
-  }, [availablePresets, builtInPresets, customPresets, categories, maxPresets, showBuiltIn, showCustom]);
+  }, [availablePresets, builtInPresets, customPresets, categories, maxPresets, showBuiltIn, showCustom, layout]);
   (0, import_react4.useEffect)(() => {
     loadPresets();
   }, [loadPresets]);