@trops/dash-core 0.1.574 → 0.1.575

package/dist/index.esm.js

@@ -2,9 +2,9 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as DashReact from '@trops/dash-react';
-import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, isHexColor, deriveShades, colorTypes, TAILWIND_PALETTE, Toggle, normalizeHex, contrastRatio, Caption2, Caption, getColorFamilies, getCuratedColorGrid, DashPanel, themeVariants, SubHeading, Heading2, Paragraph2, Paragraph3, ButtonIcon3, Tag2, Alert, Alert2, Alert3, Toast, Toast2, Toast3, ProgressBar, ProgressBar2, ProgressBar3, MenuItem, Breadcrumbs, Breadcrumbs2, Breadcrumbs3, Caption3, Code, Code2, Code3, Divider, Divider2, Divider3, DashPanel2, DashPanel3, Tabs, Tabs2, Tabs3, Accordion, Accordion2, Accordion3, Toggle2, Toggle3, TextArea, Checkbox, Slider, RadioGroup, AlertBanner, StatusBadge, Skeleton, StatCard, DataList, EmptyState, Card, Panel2, ThemeFromUrlPane, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
+import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, isHexColor, deriveShades, colorTypes, TAILWIND_PALETTE, Toggle, normalizeHex, contrastRatio, Caption2, Caption, getColorFamilies, getCuratedColorGrid, DashPanel, themeVariants, SubHeading, Heading2, Paragraph2, Paragraph3, ButtonIcon3, Tag2, Alert, Alert2, Alert3, Toast, Toast2, Toast3, ProgressBar, ProgressBar2, ProgressBar3, MenuItem, Breadcrumbs, Breadcrumbs2, Breadcrumbs3, Caption3, Code, Code2, Code3, Divider, Divider2, Divider3, DashPanel2, DashPanel3, Tabs, Tabs2, Tabs3, Accordion, Accordion2, Accordion3, Toggle2, Toggle3, TextArea, Checkbox, Slider, RadioGroup, AlertBanner, StatusBadge, Skeleton, StatCard, DataList, EmptyState, Card, Panel2, hexToRgb, rgbToHsl, rgbToHex, hslToRgb, ThemeFromUrlPane, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
 export * from '@trops/dash-react';
-export { ThemeContext } from '@trops/dash-react';
+export { FontAwesomeIcon, ThemeContext } from '@trops/dash-react';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useEffect, useMemo, useCallback, useRef, Fragment as Fragment$1, useReducer, Component, memo, Profiler } from 'react';
@@ -34658,11 +34658,8 @@ var ThemePickerGridPane = function ThemePickerGridPane(_ref) {
   }
   return /*#__PURE__*/jsx(ThemePane, {
     children: /*#__PURE__*/jsx("div", {
-      className: "flex flex-row rounded overflow-clip justify-center items-center align-center w-full",
-      children: /*#__PURE__*/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()
     })
   });
 };
@@ -36906,12 +36903,85 @@ var PanelThemeStudio = function PanelThemeStudio(_ref) {
   });
 };
 
-/**
- * themeGenerator.js
- *
- * Utility for generating themes via presets, random generation,
- * and color-harmony-based generation from a user-selected base color.
- */
+// Color harmony helpers — inlined so dash-core can ship the new
+// "From Colors" generator without first publishing matching
+// exports from @trops/dash-react. Same math as the planned dash-react
+// counterparts; can be replaced with a re-export once both ship in
+// the same cycle.
+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 = {
@@ -37079,11 +37149,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();
@@ -37119,17 +37200,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.
  */
@@ -37150,6 +37328,12 @@ var HARMONY_STRATEGIES = [{
 }, {
   value: "split-complementary",
   label: "Split Complementary"
+}, {
+  value: "tetradic",
+  label: "Tetradic"
+}, {
+  value: "monochromatic",
+  label: "Monochromatic"
 }, {
   value: "custom",
   label: "Custom"
@@ -37248,87 +37432,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 = isHexColor(value);
   return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-col gap-2",
-    children: [/*#__PURE__*/jsx("span", {
-      className: "text-xs opacity-50",
+    className: "flex flex-col items-center gap-1 flex-1",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "h-10 w-full rounded ".concat(isHex ? "" : "bg-".concat(value, "-500")),
+      style: isHex ? {
+        backgroundColor: value
+      } : undefined
+    }), /*#__PURE__*/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 = getColorFamilies();
+  var _useState = useState(families[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeFamily = _useState2[0],
+    setActiveFamily = _useState2[1];
+  var swatches = getCuratedColorGrid(activeFamily);
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col gap-2",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "flex flex-row gap-2 flex-wrap",
+      children: families.map(function (family) {
+        var isActive = activeFamily === family;
+        return /*#__PURE__*/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__*/jsx("div", {
-      className: "grid grid-cols-6 gap-2",
-      children: AVAILABLE_COLORS.map(function (color) {
-        return /*#__PURE__*/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__*/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__*/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__*/jsx("div", {
-    className: "flex flex-row gap-2",
-    children: colors.map(function (c, i) {
-      return /*#__PURE__*/jsxs("div", {
-        className: "flex flex-col items-center gap-1 flex-1",
-        children: [/*#__PURE__*/jsx("div", {
-          className: "h-10 w-full rounded bg-".concat(c, "-500")
-        }), /*#__PURE__*/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__*/jsxs("div", {
+    className: "flex flex-col gap-1",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex flex-row items-center justify-between",
+      children: [/*#__PURE__*/jsx("span", {
+        className: "text-xs opacity-60",
+        children: label
+      }), /*#__PURE__*/jsxs("span", {
+        className: "text-xs opacity-50 font-mono",
+        children: [value > 0 ? "+".concat(value) : value, unit]
+      })]
+    }), /*#__PURE__*/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 = useState("blue"),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedColor = _useState2[0],
-    setSelectedColor = _useState2[1];
-  var _useState3 = 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 = useState("#3b82f6"),
     _useState4 = _slicedToArray(_useState3, 2),
-    secondaryColor = _useState4[0],
-    setSecondaryColor = _useState4[1];
-  var _useState5 = useState("amber"),
+    selectedColor = _useState4[0],
+    setSelectedColor = _useState4[1];
+  var _useState5 = useState("complementary"),
     _useState6 = _slicedToArray(_useState5, 2),
-    tertiaryColor = _useState6[0],
-    setTertiaryColor = _useState6[1];
-  var _useState7 = useState("complementary"),
+    strategy = _useState6[0],
+    setStrategy = _useState6[1];
+  // HSL nudge — applied to every generated channel after harmony math.
+  var _useState7 = useState(0),
     _useState8 = _slicedToArray(_useState7, 2),
-    strategy = _useState8[0],
-    setStrategy = _useState8[1];
-  var isCustom = strategy === "custom";
+    dH = _useState8[0],
+    setDH = _useState8[1];
+  var _useState9 = useState(0),
+    _useState0 = _slicedToArray(_useState9, 2),
+    dS = _useState0[0],
+    setDS = _useState0[1];
+  var _useState1 = 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
+    });
+  }
   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__*/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__*/jsx("span", {
@@ -37341,7 +37603,9 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref6) {
         children: "Harmony"
       }), /*#__PURE__*/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__*/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"),
@@ -37352,37 +37616,71 @@ var ColorHarmonyPicker = function ColorHarmonyPicker(_ref6) {
           }, s.value);
         })
       })]
-    }), isCustom ? /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(ColorSwatchGrid$1, {
-        value: selectedColor,
-        onChange: setSelectedColor,
-        label: "Primary"
-      }), /*#__PURE__*/jsx(ColorSwatchGrid$1, {
-        value: secondaryColor,
-        onChange: setSecondaryColor,
-        label: "Secondary"
-      }), /*#__PURE__*/jsx(ColorSwatchGrid$1, {
-        value: tertiaryColor,
-        onChange: setTertiaryColor,
-        label: "Tertiary"
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [/*#__PURE__*/jsx("span", {
+        className: "text-xs opacity-50",
+        children: "Base Color"
+      }), /*#__PURE__*/jsx(InlineHexPicker, {
+        selectedHex: isHexColor(selectedColor) ? selectedColor : null,
+        onPick: function onPick(hex) {
+          return setSelectedColor(hex);
+        }
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col gap-3",
+      children: [/*#__PURE__*/jsx("span", {
+        className: "text-xs opacity-50",
+        children: "Fine-tune (HSL nudge)"
+      }), /*#__PURE__*/jsx(HslSlider, {
+        label: "Hue",
+        value: dH,
+        min: -180,
+        max: 180,
+        step: 1,
+        unit: "\xB0",
+        onChange: setDH
+      }), /*#__PURE__*/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__*/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__*/jsx(ColorSwatchGrid$1, {
-      value: selectedColor,
-      onChange: setSelectedColor,
-      label: "Base Color"
     }), /*#__PURE__*/jsxs("div", {
       className: "flex flex-col gap-2",
       children: [/*#__PURE__*/jsx("span", {
         className: "text-xs opacity-50",
-        children: "Preview"
-      }), /*#__PURE__*/jsx(PreviewSwatch, {
-        color: selectedColor,
-        strategy: strategy,
-        customColors: isCustom ? {
-          primary: selectedColor,
-          secondary: secondaryColor,
-          tertiary: tertiaryColor
-        } : null
+        children: "Generated Palette"
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex flex-row gap-2",
+        children: [/*#__PURE__*/jsx(PaletteSwatch, {
+          value: previewTheme.primary,
+          label: "Primary"
+        }), /*#__PURE__*/jsx(PaletteSwatch, {
+          value: previewTheme.secondary,
+          label: "Secondary"
+        }), /*#__PURE__*/jsx(PaletteSwatch, {
+          value: previewTheme.tertiary,
+          label: "Tertiary"
+        }), /*#__PURE__*/jsx(PaletteSwatch, {
+          value: previewTheme.neutral,
+          label: "Neutral"
+        })]
       })]
     }), !inline && /*#__PURE__*/jsx(Button, {
       title: "Generate Theme",
@@ -37394,12 +37692,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__*/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,
@@ -37418,9 +37716,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__*/jsxs("div", {
     className: "flex flex-col gap-4",
@@ -37447,20 +37745,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;
   useEffect(function () {