@trops/dash-core 0.1.574 → 0.1.576

package/dist/index.js

@@ -34676,11 +34676,8 @@ var ThemePickerGridPane = function ThemePickerGridPane(_ref) {
   }
   return /*#__PURE__*/jsxRuntime.jsx(ThemePane, {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex flex-row rounded overflow-clip justify-center items-center align-center w-full",
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "grid grid-cols-3 gap-4 w-full h-full overflow-y-scroll scrollbar scrollbar-thumb-gray-700 scrollbar-thin scrollbar-track-transparent",
-        children: renderCurrentThemes()
-      })
+      className: "grid grid-cols-3 gap-4 w-full flex-1 min-h-0 overflow-y-auto pr-2 scrollbar scrollbar-thumb-gray-700 scrollbar-thin scrollbar-track-transparent",
+      children: renderCurrentThemes()
     })
   });
 };
@@ -36930,6 +36927,205 @@ var PanelThemeStudio = function PanelThemeStudio(_ref) {
  * Utility for generating themes via presets, random generation,
  * and color-harmony-based generation from a user-selected base color.
  */
+// All color math is inlined here (no @trops/dash-react import). This
+// file is reachable from Electron's main process via
+// `electron/controller/paletteToThemeMapper.js`. Importing dash-react
+// from a main-process reachable file pulls dash-react's renderer
+// bundle into the main bundle — that bundle has top-level browser
+// API access (`window.ResizeObserver` in CodeEditorVS) which throws
+// when required under Node. Keeping this module pure-JS / no-deps
+// breaks the chain.
+
+var HEX_RE = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+function isHexColor(value) {
+  return typeof value === "string" && HEX_RE.test(value.trim());
+}
+function normalizeHex(input) {
+  if (typeof input !== "string") return null;
+  var s = input.trim().toLowerCase();
+  if (!s.startsWith("#")) s = "#".concat(s);
+  if (!HEX_RE.test(s)) return null;
+  if (s.length === 4) s = "#".concat(s[1]).concat(s[1]).concat(s[2]).concat(s[2]).concat(s[3]).concat(s[3]);else if (s.length === 5) s = "#".concat(s[1]).concat(s[1]).concat(s[2]).concat(s[2]).concat(s[3]).concat(s[3]);else if (s.length === 9) s = s.slice(0, 7);
+  return s;
+}
+function hexToRgb(hex) {
+  var n = normalizeHex(hex);
+  if (!n) return null;
+  var v = parseInt(n.slice(1), 16);
+  return {
+    r: v >> 16 & 0xff,
+    g: v >> 8 & 0xff,
+    b: v & 0xff
+  };
+}
+function rgbToHex(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  var c = function c(x) {
+    return Math.max(0, Math.min(255, Math.round(x)));
+  };
+  var h = function h(x) {
+    return c(x).toString(16).padStart(2, "0");
+  };
+  return "#".concat(h(r)).concat(h(g)).concat(h(b));
+}
+function rgbToHsl(_ref2) {
+  var r = _ref2.r,
+    g = _ref2.g,
+    b = _ref2.b;
+  var R = r / 255,
+    G = g / 255,
+    B = b / 255;
+  var max = Math.max(R, G, B),
+    min = Math.min(R, G, B);
+  var l = (max + min) / 2;
+  var h = 0,
+    s = 0;
+  if (max !== min) {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case R:
+        h = (G - B) / d + (G < B ? 6 : 0);
+        break;
+      case G:
+        h = (B - R) / d + 2;
+        break;
+      default:
+        h = (R - G) / d + 4;
+    }
+    h *= 60;
+  }
+  return {
+    h: h,
+    s: s,
+    l: l
+  };
+}
+function hslToRgb(_ref3) {
+  var h = _ref3.h,
+    s = _ref3.s,
+    l = _ref3.l;
+  if (s === 0) {
+    var v = l * 255;
+    return {
+      r: v,
+      g: v,
+      b: v
+    };
+  }
+  var c = (1 - Math.abs(2 * l - 1)) * s;
+  var x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  var m = l - c / 2;
+  var rp, gp, bp;
+  if (h < 60) {
+    rp = c;
+    gp = x;
+    bp = 0;
+  } else if (h < 120) {
+    rp = x;
+    gp = c;
+    bp = 0;
+  } else if (h < 180) {
+    rp = 0;
+    gp = c;
+    bp = x;
+  } else if (h < 240) {
+    rp = 0;
+    gp = x;
+    bp = c;
+  } else if (h < 300) {
+    rp = x;
+    gp = 0;
+    bp = c;
+  } else {
+    rp = c;
+    gp = 0;
+    bp = x;
+  }
+  return {
+    r: (rp + m) * 255,
+    g: (gp + m) * 255,
+    b: (bp + m) * 255
+  };
+}
+
+// Color harmony helpers — pure JS, no DOM/window access.
+function rotateHex(hex, deltaH) {
+  var rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  var _rgbToHsl = rgbToHsl(rgb),
+    h = _rgbToHsl.h,
+    s = _rgbToHsl.s,
+    l = _rgbToHsl.l;
+  var newH = ((h + deltaH) % 360 + 360) % 360;
+  return rgbToHex(hslToRgb({
+    h: newH,
+    s: s,
+    l: l
+  }));
+}
+function complementHex(hex) {
+  return rotateHex(hex, 180);
+}
+function analogousHexes(hex) {
+  var a = rotateHex(hex, -30);
+  var b = rotateHex(hex, 30);
+  return a && b ? [a, b] : null;
+}
+function triadicHexes(hex) {
+  var a = rotateHex(hex, 120);
+  var b = rotateHex(hex, 240);
+  return a && b ? [a, b] : null;
+}
+function splitComplementaryHexes(hex) {
+  var a = rotateHex(hex, 150);
+  var b = rotateHex(hex, 210);
+  return a && b ? [a, b] : null;
+}
+function tetradicHexes(hex) {
+  var a = rotateHex(hex, 90);
+  var b = rotateHex(hex, 180);
+  var c = rotateHex(hex, 270);
+  return a && b && c ? [a, b, c] : null;
+}
+function monochromaticHexes(hex) {
+  var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  var rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  var _rgbToHsl2 = rgbToHsl(rgb),
+    h = _rgbToHsl2.h,
+    s = _rgbToHsl2.s;
+  var out = [];
+  for (var i = 0; i < count; i++) {
+    var t = count === 1 ? 0.5 : i / (count - 1);
+    var l = 0.15 + t * 0.7;
+    var sAdj = s * (1 - 0.3 * Math.abs(t - 0.5) * 2);
+    out.push(rgbToHex(hslToRgb({
+      h: h,
+      s: sAdj,
+      l: l
+    })));
+  }
+  return out;
+}
+function adjustHsl(hex) {
+  var dH = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var dS = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var dL = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  var hsl = rgbToHsl(rgb);
+  var h = ((hsl.h + dH) % 360 + 360) % 360;
+  var s = Math.max(0, Math.min(1, hsl.s + dS));
+  var l = Math.max(0, Math.min(1, hsl.l + dL));
+  return rgbToHex(hslToRgb({
+    h: h,
+    s: s,
+    l: l
+  }));
+}
 
 // Color wheel mapping for Tailwind palettes (approximate hue angles)
 var COLOR_WHEEL = {
@@ -37097,11 +37293,22 @@ function generateRandomTheme() {
 
 /**
  * Generate a theme using color harmony rules from a base color.
- * @param {string} baseColor - A Tailwind color name (e.g. "blue")
- * @param {"complementary"|"analogous"|"triadic"|"split-complementary"} strategy
+ * Accepts either a Tailwind color name OR a hex string. Hex bases
+ * run through dash-react's harmony math and emit hex channels for
+ * every output; named bases use the legacy COLOR_WHEEL mapping.
+ *
+ * @param {string} baseColor - Tailwind color name (e.g. "blue") OR hex
+ * @param {"complementary"|"analogous"|"triadic"|"split-complementary"|"tetradic"|"monochromatic"} strategy
+ * @param {{ dH?: number, dS?: number, dL?: number }} [hslNudge] - optional
+ *   HSL offsets applied to every generated channel after the harmony
+ *   math. dH in degrees; dS/dL as fractions in [-1..1].
  */
 function generateHarmonyTheme(baseColor) {
   var strategy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "complementary";
+  var hslNudge = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  if (typeof baseColor === "string" && isHexColor(baseColor)) {
+    return generateHexHarmonyTheme(baseColor, strategy, hslNudge);
+  }
   var baseHue = COLOR_WHEEL[baseColor];
   if (baseHue === undefined) {
     return generateRandomTheme();
@@ -37137,17 +37344,114 @@ function generateHarmonyTheme(baseColor) {
 }
 
 /**
- * Generate a theme from three independently chosen colors.
- * @param {string} primary - A Tailwind color name
- * @param {string} secondary - A Tailwind color name
- * @param {string} tertiary - A Tailwind color name
+ * Hex-mode harmony generation. Always emits hex channels; supports
+ * all the named harmony strategies plus Monochromatic and Tetradic.
+ * The neutral channel is derived from the base by desaturating
+ * almost fully, keeping the same hue family for a cohesive feel.
  */
-function generateCustomTheme(primary, secondary, tertiary) {
-  var neutral = pick(NEUTRAL_COLORS);
+function generateHexHarmonyTheme(baseHex, strategy, hslNudge) {
+  var base = normalizeHex(baseHex);
+  if (!base) return generateRandomTheme();
+  var primary = base;
+  var secondary;
+  var tertiary;
+  var neutral;
+  switch (strategy) {
+    case "complementary":
+      {
+        secondary = complementHex(base);
+        var ana = analogousHexes(base);
+        tertiary = ana ? ana[1] : base;
+        break;
+      }
+    case "analogous":
+      {
+        var _ana = analogousHexes(base);
+        if (_ana) {
+          secondary = _ana[0];
+          tertiary = _ana[1];
+        }
+        break;
+      }
+    case "triadic":
+      {
+        var tri = triadicHexes(base);
+        if (tri) {
+          secondary = tri[0];
+          tertiary = tri[1];
+        }
+        break;
+      }
+    case "split-complementary":
+      {
+        var split = splitComplementaryHexes(base);
+        if (split) {
+          secondary = split[0];
+          tertiary = split[1];
+        }
+        break;
+      }
+    case "tetradic":
+      {
+        var tet = tetradicHexes(base);
+        if (tet) {
+          secondary = tet[0];
+          tertiary = tet[1];
+          neutral = tet[2];
+        }
+        break;
+      }
+    case "monochromatic":
+      {
+        var mono = monochromaticHexes(base, 3);
+        if (mono) {
+          primary = mono[1];
+          secondary = mono[0];
+          tertiary = mono[2];
+        }
+        break;
+      }
+    default:
+      {
+        secondary = complementHex(base);
+        var _ana2 = analogousHexes(base);
+        tertiary = _ana2 ? _ana2[1] : base;
+      }
+  }
+
+  // Neutral defaults to a near-grey of the same hue (desaturated).
+  if (!neutral) {
+    neutral = adjustHsl(base, 0, -0.85, 0);
+  }
+
+  // Apply optional HSL nudge uniformly to all channels.
+  if (hslNudge) {
+    var _hslNudge$dH = hslNudge.dH,
+      dH = _hslNudge$dH === void 0 ? 0 : _hslNudge$dH,
+      _hslNudge$dS = hslNudge.dS,
+      dS = _hslNudge$dS === void 0 ? 0 : _hslNudge$dS,
+      _hslNudge$dL = hslNudge.dL,
+      dL = _hslNudge$dL === void 0 ? 0 : _hslNudge$dL;
+    primary = adjustHsl(primary, dH, dS, dL) || primary;
+    secondary = adjustHsl(secondary, dH, dS, dL) || secondary;
+    tertiary = adjustHsl(tertiary, dH, dS, dL) || tertiary;
+    neutral = adjustHsl(neutral, dH, dS, dL) || neutral;
+  }
   var name = generateThemeName(primary, secondary);
   return buildRawTheme(name, primary, secondary, tertiary, neutral);
 }
 
+/**
+ * Generate a theme from four independently chosen channel values.
+ * Each channel may be a Tailwind name or a hex string.
+ */
+function generateCustomTheme(primary, secondary, tertiary) {
+  var neutral = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var resolvedNeutral = neutral || pick(NEUTRAL_COLORS);
+  var name = generateThemeName(primary, secondary);
+  return buildRawTheme(name, primary, secondary, tertiary, resolvedNeutral);
+}
+
 /**
  * All available chromatic colors for the "From Color" picker.
  */
@@ -37168,6 +37472,12 @@ var HARMONY_STRATEGIES = [{
 }, {
   value: "split-complementary",
   label: "Split Complementary"
+}, {
+  value: "tetradic",
+  label: "Tetradic"
+}, {
+  value: "monochromatic",
+  label: "Monochromatic"
 }, {
   value: "custom",
   label: "Custom"
@@ -37266,87 +37576,165 @@ var PresetGallery = function PresetGallery(_ref3) {
 
 // ─── Color Harmony Picker ────────────────────────────────────────────────
 
-var ColorSwatchGrid$1 = function ColorSwatchGrid(_ref4) {
+/**
+ * Render a swatch for a generated palette channel. Hex values render
+ * inline; named Tailwind families fall back to `bg-{name}-500` which
+ * is in the safelist.
+ */
+var PaletteSwatch = function PaletteSwatch(_ref4) {
   var value = _ref4.value,
-    onChange = _ref4.onChange,
     label = _ref4.label;
+  var isHex = DashReact.isHexColor(value);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col gap-2",
-    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "text-xs opacity-50",
+    className: "flex flex-col items-center gap-1 flex-1",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "h-10 w-full rounded ".concat(isHex ? "" : "bg-".concat(value, "-500")),
+      style: isHex ? {
+        backgroundColor: value
+      } : undefined
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "text-xs opacity-60 truncate w-full text-center",
       children: label
+    })]
+  });
+};
+
+/**
+ * Compact hex picker reused inline by the wizard. Category chips +
+ * a curated grid of swatches + a custom-hex input below. Same
+ * primitives as ChannelEditorModal but laid out for a narrower
+ * column.
+ */
+var InlineHexPicker = function InlineHexPicker(_ref5) {
+  var selectedHex = _ref5.selectedHex,
+    onPick = _ref5.onPick;
+  var families = DashReact.getColorFamilies();
+  var _useState = React.useState(families[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeFamily = _useState2[0],
+    setActiveFamily = _useState2[1];
+  var swatches = DashReact.getCuratedColorGrid(activeFamily);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col gap-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-row gap-2 flex-wrap",
+      children: families.map(function (family) {
+        var isActive = activeFamily === family;
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setActiveFamily(family);
+          },
+          className: "px-2 py-0.5 rounded-full text-xs font-medium ".concat(isActive ? "bg-blue-600 text-white" : "bg-gray-700 text-gray-300 hover:bg-gray-600"),
+          children: family
+        }, family);
+      })
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "grid grid-cols-6 gap-2",
-      children: AVAILABLE_COLORS.map(function (color) {
-        return /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "h-8 rounded cursor-pointer transition-all bg-".concat(color, "-500 ").concat(value === color ? "ring-2 ring-white scale-110" : "opacity-70 hover:opacity-100"),
-          title: color,
+      className: "grid grid-cols-12 gap-1",
+      children: swatches.map(function (hex) {
+        var isSelected = selectedHex && hex.toLowerCase() === selectedHex.toLowerCase();
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
           onClick: function onClick() {
-            return onChange(color);
-          }
-        }, color);
+            return onPick(hex);
+          },
+          style: {
+            backgroundColor: hex
+          },
+          className: "h-6 rounded transition-transform hover:scale-110 ".concat(isSelected ? "border-2 border-yellow-400 scale-110" : ""),
+          "aria-label": "Pick ".concat(hex),
+          title: hex
+        }, hex);
       })
+    }), /*#__PURE__*/jsxRuntime.jsx(CustomHexColorPane, {
+      onApply: onPick,
+      label: "Or paste a hex value"
     })]
   });
 };
-var PreviewSwatch = function PreviewSwatch(_ref5) {
-  var color = _ref5.color,
-    strategy = _ref5.strategy,
-    customColors = _ref5.customColors;
-  var colors;
-  if (strategy === "custom" && customColors) {
-    colors = [customColors.primary, customColors.secondary, customColors.tertiary];
-  } else {
-    var theme = generateHarmonyTheme(color, strategy);
-    colors = [theme.primary, theme.secondary, theme.tertiary];
-  }
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "flex flex-row gap-2",
-    children: colors.map(function (c, i) {
-      return /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col items-center gap-1 flex-1",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "h-10 w-full rounded bg-".concat(c, "-500")
-        }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-[10px] opacity-40",
-          children: c
-        })]
-      }, i);
-    })
+
+/**
+ * HSL nudge slider — single-axis. Display label + numeric value.
+ */
+var HslSlider = function HslSlider(_ref6) {
+  var label = _ref6.label,
+    value = _ref6.value,
+    min = _ref6.min,
+    max = _ref6.max,
+    step = _ref6.step,
+    _onChange = _ref6.onChange,
+    _ref6$unit = _ref6.unit,
+    unit = _ref6$unit === void 0 ? "" : _ref6$unit;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col gap-1",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-row items-center justify-between",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs opacity-60",
+        children: label
+      }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "text-xs opacity-50 font-mono",
+        children: [value > 0 ? "+".concat(value) : value, unit]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("input", {
+      type: "range",
+      min: min,
+      max: max,
+      step: step,
+      value: value,
+      onChange: function onChange(e) {
+        return _onChange(parseFloat(e.target.value));
+      },
+      className: "w-full accent-blue-500"
+    })]
   });
 };
-var ColorHarmonyPicker = function ColorHarmonyPicker(_ref6) {
-  var onGenerate = _ref6.onGenerate,
-    _ref6$inline = _ref6.inline,
-    inline = _ref6$inline === void 0 ? false : _ref6$inline;
-  var _useState = React.useState("blue"),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedColor = _useState2[0],
-    setSelectedColor = _useState2[1];
-  var _useState3 = React.useState("rose"),
+var ColorHarmonyPicker = function ColorHarmonyPicker(_ref7) {
+  var onGenerate = _ref7.onGenerate,
+    _ref7$inline = _ref7.inline,
+    inline = _ref7$inline === void 0 ? false : _ref7$inline;
+  // Default to a brand-blue hex so the wizard opens in hex mode.
+  var _useState3 = React.useState("#3b82f6"),
     _useState4 = _slicedToArray(_useState3, 2),
-    secondaryColor = _useState4[0],
-    setSecondaryColor = _useState4[1];
-  var _useState5 = React.useState("amber"),
+    selectedColor = _useState4[0],
+    setSelectedColor = _useState4[1];
+  var _useState5 = React.useState("complementary"),
     _useState6 = _slicedToArray(_useState5, 2),
-    tertiaryColor = _useState6[0],
-    setTertiaryColor = _useState6[1];
-  var _useState7 = React.useState("complementary"),
+    strategy = _useState6[0],
+    setStrategy = _useState6[1];
+  // HSL nudge — applied to every generated channel after harmony math.
+  var _useState7 = React.useState(0),
     _useState8 = _slicedToArray(_useState7, 2),
-    strategy = _useState8[0],
-    setStrategy = _useState8[1];
-  var isCustom = strategy === "custom";
+    dH = _useState8[0],
+    setDH = _useState8[1];
+  var _useState9 = React.useState(0),
+    _useState0 = _slicedToArray(_useState9, 2),
+    dS = _useState0[0],
+    setDS = _useState0[1];
+  var _useState1 = React.useState(0),
+    _useState10 = _slicedToArray(_useState1, 2),
+    dL = _useState10[0],
+    setDL = _useState10[1];
+
+  // Generate the current theme from inputs. Memoized through useEffect
+  // for the inline-preview path; explicit handler for the button path.
+  function buildTheme() {
+    return generateHarmonyTheme(selectedColor, strategy, {
+      dH: dH,
+      dS: dS,
+      dL: dL
+    });
+  }
   React.useEffect(function () {
     if (inline) {
-      var theme = isCustom ? generateCustomTheme(selectedColor, secondaryColor, tertiaryColor) : generateHarmonyTheme(selectedColor, strategy);
-      onGenerate(theme);
+      onGenerate(buildTheme());
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedColor, secondaryColor, tertiaryColor, strategy, inline]);
+  }, [selectedColor, strategy, dH, dS, dL, inline]);
   function handleGenerate() {
-    var theme = isCustom ? generateCustomTheme(selectedColor, secondaryColor, tertiaryColor) : generateHarmonyTheme(selectedColor, strategy);
-    onGenerate(theme);
+    onGenerate(buildTheme());
   }
+  var previewTheme = buildTheme();
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: inline ? "flex flex-col gap-4" : "flex flex-col gap-4 p-6 overflow-y-auto flex-1 min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
@@ -37359,7 +37747,9 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref6) {
         children: "Harmony"
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex flex-row gap-2 flex-wrap",
-        children: HARMONY_STRATEGIES.map(function (s) {
+        children: HARMONY_STRATEGIES.filter(function (s) {
+          return s.value !== "custom";
+        }).map(function (s) {
           return /*#__PURE__*/jsxRuntime.jsx("button", {
             type: "button",
             className: "px-3 py-1.5 rounded text-xs transition-all ".concat(strategy === s.value ? "bg-blue-600 text-white" : "bg-white/10 opacity-70 hover:opacity-100"),
@@ -37370,37 +37760,71 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref6) {
           }, s.value);
         })
       })]
-    }), isCustom ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(ColorSwatchGrid$1, {
-        value: selectedColor,
-        onChange: setSelectedColor,
-        label: "Primary"
-      }), /*#__PURE__*/jsxRuntime.jsx(ColorSwatchGrid$1, {
-        value: secondaryColor,
-        onChange: setSecondaryColor,
-        label: "Secondary"
-      }), /*#__PURE__*/jsxRuntime.jsx(ColorSwatchGrid$1, {
-        value: tertiaryColor,
-        onChange: setTertiaryColor,
-        label: "Tertiary"
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs opacity-50",
+        children: "Base Color"
+      }), /*#__PURE__*/jsxRuntime.jsx(InlineHexPicker, {
+        selectedHex: DashReact.isHexColor(selectedColor) ? selectedColor : null,
+        onPick: function onPick(hex) {
+          return setSelectedColor(hex);
+        }
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-3",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs opacity-50",
+        children: "Fine-tune (HSL nudge)"
+      }), /*#__PURE__*/jsxRuntime.jsx(HslSlider, {
+        label: "Hue",
+        value: dH,
+        min: -180,
+        max: 180,
+        step: 1,
+        unit: "\xB0",
+        onChange: setDH
+      }), /*#__PURE__*/jsxRuntime.jsx(HslSlider, {
+        label: "Saturation",
+        value: Math.round(dS * 100),
+        min: -100,
+        max: 100,
+        step: 1,
+        unit: "%",
+        onChange: function onChange(v) {
+          return setDS(v / 100);
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(HslSlider, {
+        label: "Lightness",
+        value: Math.round(dL * 100),
+        min: -100,
+        max: 100,
+        step: 1,
+        unit: "%",
+        onChange: function onChange(v) {
+          return setDL(v / 100);
+        }
       })]
-    }) : /*#__PURE__*/jsxRuntime.jsx(ColorSwatchGrid$1, {
-      value: selectedColor,
-      onChange: setSelectedColor,
-      label: "Base Color"
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col gap-2",
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: "text-xs opacity-50",
-        children: "Preview"
-      }), /*#__PURE__*/jsxRuntime.jsx(PreviewSwatch, {
-        color: selectedColor,
-        strategy: strategy,
-        customColors: isCustom ? {
-          primary: selectedColor,
-          secondary: secondaryColor,
-          tertiary: tertiaryColor
-        } : null
+        children: "Generated Palette"
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.primary,
+          label: "Primary"
+        }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.secondary,
+          label: "Secondary"
+        }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.tertiary,
+          label: "Tertiary"
+        }), /*#__PURE__*/jsxRuntime.jsx(PaletteSwatch, {
+          value: previewTheme.neutral,
+          label: "Neutral"
+        })]
       })]
     }), !inline && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
       title: "Generate Theme",
@@ -37412,12 +37836,12 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref6) {
 
 // ─── Wizard Components ──────────────────────────────────────────────────
 
-var MethodCard = function MethodCard(_ref7) {
-  var icon = _ref7.icon,
-    title = _ref7.title,
-    subtitle = _ref7.subtitle,
-    selected = _ref7.selected,
-    onClick = _ref7.onClick;
+var MethodCard = function MethodCard(_ref8) {
+  var icon = _ref8.icon,
+    title = _ref8.title,
+    subtitle = _ref8.subtitle,
+    selected = _ref8.selected,
+    onClick = _ref8.onClick;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col gap-1.5 p-3 rounded-lg cursor-pointer transition-all bg-white/5 hover:bg-white/10 ".concat(selected ? "ring-2 ring-blue-500 bg-white/10" : "hover:ring-1 hover:ring-white/20"),
     onClick: onClick,
@@ -37436,9 +37860,9 @@ var MethodCard = function MethodCard(_ref7) {
     })]
   });
 };
-var RandomPreview = function RandomPreview(_ref8) {
-  var theme = _ref8.theme,
-    onRegenerate = _ref8.onRegenerate;
+var RandomPreview = function RandomPreview(_ref9) {
+  var theme = _ref9.theme,
+    onRegenerate = _ref9.onRegenerate;
   var colors = theme ? [theme.primary, theme.secondary, theme.tertiary] : [];
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col gap-4",
@@ -37465,20 +37889,20 @@ var RandomPreview = function RandomPreview(_ref8) {
     })]
   });
 };
-var ThemeQuickCreate = function ThemeQuickCreate(_ref9) {
-  var wizardName = _ref9.wizardName,
-    setWizardName = _ref9.setWizardName,
-    wizardMethod = _ref9.wizardMethod,
-    setWizardMethod = _ref9.setWizardMethod,
-    wizardTheme = _ref9.wizardTheme,
-    setWizardTheme = _ref9.setWizardTheme,
-    onComplete = _ref9.onComplete,
-    _ref9$onExtract = _ref9.onExtract,
-    onExtract = _ref9$onExtract === void 0 ? null : _ref9$onExtract,
-    _ref9$onMapToTheme = _ref9.onMapToTheme,
-    onMapToTheme = _ref9$onMapToTheme === void 0 ? null : _ref9$onMapToTheme,
-    _ref9$initialMethod = _ref9.initialMethod,
-    initialMethod = _ref9$initialMethod === void 0 ? null : _ref9$initialMethod;
+var ThemeQuickCreate = function ThemeQuickCreate(_ref0) {
+  var wizardName = _ref0.wizardName,
+    setWizardName = _ref0.setWizardName,
+    wizardMethod = _ref0.wizardMethod,
+    setWizardMethod = _ref0.setWizardMethod,
+    wizardTheme = _ref0.wizardTheme,
+    setWizardTheme = _ref0.setWizardTheme,
+    onComplete = _ref0.onComplete,
+    _ref0$onExtract = _ref0.onExtract,
+    onExtract = _ref0$onExtract === void 0 ? null : _ref0$onExtract,
+    _ref0$onMapToTheme = _ref0.onMapToTheme,
+    onMapToTheme = _ref0$onMapToTheme === void 0 ? null : _ref0$onMapToTheme,
+    _ref0$initialMethod = _ref0.initialMethod,
+    initialMethod = _ref0$initialMethod === void 0 ? null : _ref0$initialMethod;
   var canCreate = wizardName.trim().length > 0 && wizardTheme !== null;
   var showMethodPicker = initialMethod === null;
   React.useEffect(function () {
@@ -66190,6 +66614,10 @@ function computeDashboardPreflight(_ref) {
 
 ComponentManager.registerContainerTypes(LayoutContainer, LayoutGridContainer);
 
+Object.defineProperty(exports, 'FontAwesomeIcon', {
+  enumerable: true,
+  get: function () { return DashReact.FontAwesomeIcon; }
+});
 Object.defineProperty(exports, 'ThemeContext', {
   enumerable: true,
   get: function () { return DashReact.ThemeContext; }