@trops/dash-core 0.1.574 → 0.1.576

package/dist/electron/index.js

@@ -50817,7 +50817,7 @@ function parseColor(str) {
     /^hsla?\(\s*([\d.]+)\s*[,/\s]\s*([\d.]+)%\s*[,/\s]\s*([\d.]+)%/,
   );
   if (hslMatch) {
-    return hslToRgb(
+    return hslToRgb$1(
       parseFloat(hslMatch[1]),
       parseFloat(hslMatch[2]),
       parseFloat(hslMatch[3]),
@@ -50831,7 +50831,7 @@ function parseColor(str) {
 }
 
 /** HSL (h: 0-360, s: 0-100, l: 0-100) → { r, g, b } (0-255) */
-function hslToRgb(h, s, l) {
+function hslToRgb$1(h, s, l) {
   s /= 100;
   l /= 100;
   const k = (n) => (n + h / 30) % 12;
@@ -50846,7 +50846,7 @@ function hslToRgb(h, s, l) {
 }
 
 /** { r, g, b } → hex string "#rrggbb" */
-function rgbToHex({ r, g, b }) {
+function rgbToHex$1({ r, g, b }) {
   return (
     "#" +
     [r, g, b]
@@ -50856,7 +50856,7 @@ function rgbToHex({ r, g, b }) {
 }
 
 /** { r, g, b } (0-255) → { h, s, l } (h: 0-360, s/l: 0-100) */
-function rgbToHsl$1({ r, g, b }) {
+function rgbToHsl$2({ r, g, b }) {
   r /= 255;
   g /= 255;
   b /= 255;
@@ -50929,7 +50929,7 @@ function extractMetaColors(htmlContent) {
     const rgb = parseColor(themeColorMatch[1]);
     if (rgb)
       results.push({
-        hex: rgbToHex(rgb),
+        hex: rgbToHex$1(rgb),
         source: "meta",
         confidence: 1.0,
       });
@@ -50943,7 +50943,7 @@ function extractMetaColors(htmlContent) {
     const rgb = parseColor(themeColorMatch2[1]);
     if (rgb)
       results.push({
-        hex: rgbToHex(rgb),
+        hex: rgbToHex$1(rgb),
         source: "meta",
         confidence: 1.0,
       });
@@ -50957,7 +50957,7 @@ function extractMetaColors(htmlContent) {
     const rgb = parseColor(tileColorMatch[1]);
     if (rgb)
       results.push({
-        hex: rgbToHex(rgb),
+        hex: rgbToHex$1(rgb),
         source: "meta",
         confidence: 0.9,
       });
@@ -50971,7 +50971,7 @@ function extractMetaColors(htmlContent) {
     const rgb = parseColor(tileColorMatch2[1]);
     if (rgb)
       results.push({
-        hex: rgbToHex(rgb),
+        hex: rgbToHex$1(rgb),
         source: "meta",
         confidence: 0.9,
       });
@@ -50998,7 +50998,7 @@ function extractCssVarColors(cssContent) {
     const rgb = parseColor(value);
     if (rgb) {
       results.push({
-        hex: rgbToHex(rgb),
+        hex: rgbToHex$1(rgb),
         source: "cssvar",
         confidence: 0.8,
       });
@@ -51021,7 +51021,7 @@ function extractCssVarColors(cssContent) {
             const rgb = parseColor(decl.value);
             if (rgb) {
               results.push({
-                hex: rgbToHex(rgb),
+                hex: rgbToHex$1(rgb),
                 source: "cssvar",
                 confidence: 0.8,
               });
@@ -51055,7 +51055,7 @@ function extractComputedColors(computedStyles) {
       const rgb = parseColor(styles[prop]);
       if (rgb) {
         results.push({
-          hex: rgbToHex(rgb),
+          hex: rgbToHex$1(rgb),
           source: "computed",
           confidence: 0.6,
         });
@@ -51079,7 +51079,7 @@ function extractDomColors(domColors) {
     const rgb = parseColor(entry.color);
     if (!rgb) continue;
     results.push({
-      hex: rgbToHex(rgb),
+      hex: rgbToHex$1(rgb),
       source: "dom",
       confidence: 0.7,
       count: entry.count,
@@ -51243,7 +51243,7 @@ async function extractFaviconColors(htmlContent, baseUrl) {
         const swatch = palette[name];
         if (!swatch) continue;
         const [r, g, b] = swatch.rgb;
-        const hex = rgbToHex({
+        const hex = rgbToHex$1({
           r: Math.round(r),
           g: Math.round(g),
           b: Math.round(b),
@@ -51281,7 +51281,7 @@ async function extractFaviconColors(htmlContent, baseUrl) {
 function isBoringColor(hex) {
   const rgb = parseColor(hex);
   if (!rgb) return true;
-  const hsl = rgbToHsl$1(rgb);
+  const hsl = rgbToHsl$2(rgb);
 
   // Near-black or near-white
   if (hsl.l < 5 || hsl.l > 95) return true;
@@ -51352,7 +51352,7 @@ function mergeAndRank(allColors, maxColors = 6) {
 
   // Score: confidence * frequency weight * saturation bonus
   const scored = interesting.map((c) => {
-    const hsl = rgbToHsl$1(c.rgb);
+    const hsl = rgbToHsl$2(c.rgb);
     const freqWeight = Math.min(c.count / 3, 1.5); // cap frequency bonus
     const satBonus = 1 + hsl.s / 200; // slight boost for saturated colors
     return {
@@ -51382,7 +51382,7 @@ function mergeAndRank(allColors, maxColors = 6) {
   // append the top boring color as a candidate for the neutral role
   if (boring.length > 0 && palette.length < maxColors) {
     const bestBoring = boring.sort((a, b) => b.confidence - a.confidence)[0];
-    const hsl = rgbToHsl$1(bestBoring.rgb);
+    const hsl = rgbToHsl$2(bestBoring.rgb);
     palette.push({
       hex: bestBoring.hex,
       rgb: {
@@ -51572,6 +51572,138 @@ var require$$8 = /*@__PURE__*/getAugmentedNamespace(colorUtils);
  * 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.
+
+const 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;
+  let s = input.trim().toLowerCase();
+  if (!s.startsWith("#")) s = `#${s}`;
+  if (!HEX_RE.test(s)) return null;
+  if (s.length === 4) s = `#${s[1]}${s[1]}${s[2]}${s[2]}${s[3]}${s[3]}`;
+  else if (s.length === 5) s = `#${s[1]}${s[1]}${s[2]}${s[2]}${s[3]}${s[3]}`;
+  else if (s.length === 9) s = s.slice(0, 7);
+  return s;
+}
+function hexToRgb(hex) {
+  const n = normalizeHex(hex);
+  if (!n) return null;
+  const v = parseInt(n.slice(1), 16);
+  return { r: (v >> 16) & 0xff, g: (v >> 8) & 0xff, b: v & 0xff };
+}
+function rgbToHex({ r, g, b }) {
+  const c = (x) => Math.max(0, Math.min(255, Math.round(x)));
+  const h = (x) => c(x).toString(16).padStart(2, "0");
+  return `#${h(r)}${h(g)}${h(b)}`;
+}
+function rgbToHsl$1({ r, g, b }) {
+  const R = r / 255,
+    G = g / 255,
+    B = b / 255;
+  const max = Math.max(R, G, B),
+    min = Math.min(R, G, B);
+  const l = (max + min) / 2;
+  let h = 0,
+    s = 0;
+  if (max !== min) {
+    const 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, s, l };
+}
+function hslToRgb({ h, s, l }) {
+  if (s === 0) {
+    const v = l * 255;
+    return { r: v, g: v, b: v };
+  }
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  let rp, gp, bp;
+  if (h < 60) [rp, gp, bp] = [c, x, 0];
+  else if (h < 120) [rp, gp, bp] = [x, c, 0];
+  else if (h < 180) [rp, gp, bp] = [0, c, x];
+  else if (h < 240) [rp, gp, bp] = [0, x, c];
+  else if (h < 300) [rp, gp, bp] = [x, 0, c];
+  else [rp, gp, bp] = [c, 0, 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) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const { h, s, l } = rgbToHsl$1(rgb);
+  const newH = (((h + deltaH) % 360) + 360) % 360;
+  return rgbToHex(hslToRgb({ h: newH, s, l }));
+}
+function complementHex(hex) {
+  return rotateHex(hex, 180);
+}
+function analogousHexes(hex) {
+  const a = rotateHex(hex, -30);
+  const b = rotateHex(hex, 30);
+  return a && b ? [a, b] : null;
+}
+function triadicHexes(hex) {
+  const a = rotateHex(hex, 120);
+  const b = rotateHex(hex, 240);
+  return a && b ? [a, b] : null;
+}
+function splitComplementaryHexes(hex) {
+  const a = rotateHex(hex, 150);
+  const b = rotateHex(hex, 210);
+  return a && b ? [a, b] : null;
+}
+function tetradicHexes(hex) {
+  const a = rotateHex(hex, 90);
+  const b = rotateHex(hex, 180);
+  const c = rotateHex(hex, 270);
+  return a && b && c ? [a, b, c] : null;
+}
+function monochromaticHexes(hex, count = 3) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const { h, s } = rgbToHsl$1(rgb);
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    const t = count === 1 ? 0.5 : i / (count - 1);
+    const l = 0.15 + t * 0.7;
+    const sAdj = s * (1 - 0.3 * Math.abs(t - 0.5) * 2);
+    out.push(rgbToHex(hslToRgb({ h, s: sAdj, l })));
+  }
+  return out;
+}
+function adjustHsl(hex, dH = 0, dS = 0, dL = 0) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const hsl = rgbToHsl$1(rgb);
+  const h = (((hsl.h + dH) % 360) + 360) % 360;
+  const s = Math.max(0, Math.min(1, hsl.s + dS));
+  const l = Math.max(0, Math.min(1, hsl.l + dL));
+  return rgbToHex(hslToRgb({ h, s, l }));
+}
 
 // Color wheel mapping for Tailwind palettes (approximate hue angles)
 const COLOR_WHEEL = {
@@ -51772,10 +51904,25 @@ 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
- */
-function generateHarmonyTheme(baseColor, strategy = "complementary") {
+ * 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,
+  strategy = "complementary",
+  hslNudge = null,
+) {
+  if (typeof baseColor === "string" && isHexColor(baseColor)) {
+    return generateHexHarmonyTheme(baseColor, strategy, hslNudge);
+  }
+
   const baseHue = COLOR_WHEEL[baseColor];
   if (baseHue === undefined) {
     return generateRandomTheme();
@@ -51815,17 +51962,109 @@ function generateHarmonyTheme(baseColor, strategy = "complementary") {
 }
 
 /**
- * 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) {
-  const neutral = pick(NEUTRAL_COLORS);
+function generateHexHarmonyTheme(baseHex, strategy, hslNudge) {
+  const base = normalizeHex(baseHex);
+  if (!base) return generateRandomTheme();
+
+  let primary = base;
+  let secondary;
+  let tertiary;
+  let neutral;
+
+  switch (strategy) {
+    case "complementary": {
+      secondary = complementHex(base);
+      const ana = analogousHexes(base);
+      tertiary = ana ? ana[1] : base;
+      break;
+    }
+    case "analogous": {
+      const ana = analogousHexes(base);
+      if (ana) {
+        secondary = ana[0];
+        tertiary = ana[1];
+      }
+      break;
+    }
+    case "triadic": {
+      const tri = triadicHexes(base);
+      if (tri) {
+        secondary = tri[0];
+        tertiary = tri[1];
+      }
+      break;
+    }
+    case "split-complementary": {
+      const split = splitComplementaryHexes(base);
+      if (split) {
+        secondary = split[0];
+        tertiary = split[1];
+      }
+      break;
+    }
+    case "tetradic": {
+      const tet = tetradicHexes(base);
+      if (tet) {
+        secondary = tet[0];
+        tertiary = tet[1];
+        neutral = tet[2];
+      }
+      break;
+    }
+    case "monochromatic": {
+      const mono = monochromaticHexes(base, 3);
+      if (mono) {
+        primary = mono[1];
+        secondary = mono[0];
+        tertiary = mono[2];
+      }
+      break;
+    }
+    default: {
+      secondary = complementHex(base);
+      const ana = analogousHexes(base);
+      tertiary = ana ? ana[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) {
+    const { dH = 0, dS = 0, dL = 0 } = hslNudge;
+    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;
+  }
+
   const name = generateThemeName$1(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,
+  neutral = null,
+) {
+  const resolvedNeutral = neutral || pick(NEUTRAL_COLORS);
+  const name = generateThemeName$1(primary, secondary);
+  return buildRawTheme(name, primary, secondary, tertiary, resolvedNeutral);
+}
+
 /**
  * All available chromatic colors for the "From Color" picker.
  */
@@ -51839,6 +52078,8 @@ const HARMONY_STRATEGIES = [
   { value: "analogous", label: "Analogous" },
   { value: "triadic", label: "Triadic" },
   { value: "split-complementary", label: "Split Complementary" },
+  { value: "tetradic", label: "Tetradic" },
+  { value: "monochromatic", label: "Monochromatic" },
   { value: "custom", label: "Custom" },
 ];