nicer

Author: peelar

apps/app/src/domain/asset/color-analysis.ts

@@ -14,11 +14,14 @@ type SampleStats = {
   avgLightness: number;
   avgSaturation: number;
   dominantHueAngle: number;
+  accentHueAngle: number;
+  accentSaturation: number;
 };
 
 const MAX_SAMPLE_SIZE = 64;
 const MIN_ALPHA = 16;
 const NEUTRAL_SATURATION = 0.12;
+const ACCENT_SATURATION = 0.18;
 
 function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
@@ -59,6 +62,11 @@ function rgbToHsl(r: number, g: number, b: number): Hsl {
   return { h, s, l };
 }
 
+function hueDistance(a: number, b: number): number {
+  const diff = Math.abs(a - b) % 360;
+  return diff > 180 ? 360 - diff : diff;
+}
+
 function hueToBucket(hue: number): HueBucket {
   if (hue >= 345 || hue < 15) return "red";
   if (hue < 45) return "orange";
@@ -155,7 +163,7 @@ async function sampleImageColors(src: string): Promise<SampleStats | null> {
       sumSaturation += hsl.s;
       count += 1;
 
-      if (hsl.s > 0.18) {
+      if (hsl.s > 0.12) {
         const bucket = Math.floor(hsl.h / 30) % bucketCount;
         const weight = hsl.s * (0.6 + 0.4 * (1 - Math.abs(hsl.l - 0.5) * 2));
         buckets[bucket].weight += weight;
@@ -215,6 +223,7 @@ async function sampleImageColors(src: string): Promise<SampleStats | null> {
 
     const accent = vibrantColor ?? dominantColor;
     const dominantHsl = rgbToHsl(dominantColor.r, dominantColor.g, dominantColor.b);
+    const accentHsl = rgbToHsl(accent.r, accent.g, accent.b);
 
     const palette: ColorPalette = {
       dominant: rgbToHex(dominantColor),
@@ -231,6 +240,8 @@ async function sampleImageColors(src: string): Promise<SampleStats | null> {
       avgLightness,
       avgSaturation,
       dominantHueAngle: dominantHsl.h,
+      accentHueAngle: accentHsl.h,
+      accentSaturation: accentHsl.s,
     };
   } catch (error) {
     console.warn("Color sampling failed:", error);
@@ -262,12 +273,26 @@ export async function extractColorSignatureFromImage(src: string): Promise<{
   const dominantHue = dominantHsl.s < NEUTRAL_SATURATION
     ? "neutral"
     : hueToBucket(dominantHsl.h);
+  const accentHue = stats.accentSaturation > ACCENT_SATURATION
+    ? hueToBucket(stats.accentHueAngle)
+    : undefined;
+
+  const accentDominant =
+    stats.accentSaturation > ACCENT_SATURATION &&
+    (dominantHue === "neutral" || hueDistance(stats.accentHueAngle, dominantHsl.h) > 35);
+
+  const primaryHue = accentDominant ? (accentHue ?? dominantHue) : dominantHue;
+  const primaryHueAngle = accentDominant ? stats.accentHueAngle : dominantHsl.h;
+
+  const strengthSample = Math.max(stats.avgSaturation, stats.accentSaturation * 0.8);
 
   const signature: ColorSignature = {
-    dominantHue,
-    dominantHueAngle: stats.dominantHueAngle,
+    dominantHue: primaryHue,
+    dominantHueAngle: primaryHueAngle,
+    accentHue,
+    accentHueAngle: stats.accentHueAngle,
     brightness: classifyBrightness(stats.avgLightness),
-    accentStrength: classifyStrength(stats.avgSaturation),
+    accentStrength: classifyStrength(strengthSample),
     dominantColor: stats.palette.dominant,
     accentColor: stats.palette.accent,
   };

apps/app/src/domain/layout/gradients/generator.ts

@@ -101,15 +101,16 @@ function buildMutedWashGradient(colors: PaletteColors, brightness: ColorSignatur
   const washAlpha = brightness === "dark" ? 0.45 : brightness === "light" ? 0.55 : 0.5;
   const layers: MeshLayer[] = [
     { color: hexToRgba(colors.neutral, washAlpha + 0.05), position: { x: 20, y: 25 }, size: 90 },
-    { color: hexToRgba(colors.primary, washAlpha), position: { x: 78, y: 18 }, size: 78 },
-    { color: hexToRgba(colors.secondary, washAlpha - 0.08), position: { x: 62, y: 80 }, size: 92 },
+    { color: hexToRgba(colors.secondary, washAlpha), position: { x: 78, y: 18 }, size: 78 },
+    { color: hexToRgba(colors.primary, washAlpha - 0.08), position: { x: 62, y: 80 }, size: 92 },
     { color: hexToRgba(colors.glow, washAlpha - 0.12), position: { x: 22, y: 72 }, size: 70 },
   ];
 
   return {
     type: "linear",
     stops: [
       { color: colors.neutral, position: 0 },
+      { color: colors.secondary, position: 55 },
       { color: colors.primary, position: 100 },
     ],
     meshLayers: layers,

apps/app/src/domain/layout/gradients/index.ts

@@ -21,7 +21,7 @@ export type {
 export { isLegacyGradient, isAdvancedGradient, isMeshGradient, isAuroraGradient } from "./types";
 
 export type { HueBucket, Brightness, AccentStrength, ColorSignature, GradientPalette } from "./palette";
-export { buildGradientPalette } from "./palette";
+export { buildGradientPalette, createComplementSignature } from "./palette";
 
 // Gradient generation (palette-matched)
 export { generateGradientOptions } from "./generator";

apps/app/src/domain/layout/gradients/palette.ts

@@ -15,6 +15,8 @@ export type AccentStrength = "vibrant" | "muted" | "grayscale";
 export type ColorSignature = {
   dominantHue: HueBucket;
   dominantHueAngle: number;
+  accentHue?: HueBucket;
+  accentHueAngle?: number;
   brightness: Brightness;
   accentStrength: AccentStrength;
   dominantColor: string;
@@ -124,6 +126,16 @@ const STEP_BY_BRIGHTNESS: Record<Brightness, StepMap> = {
 };
 
 const WARM_BUCKETS = new Set<HueBucket>(["red", "orange", "yellow", "pink"]);
+const HUE_BUCKETS: HueBucket[] = [
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "teal",
+  "blue",
+  "purple",
+  "pink",
+];
 
 export type GradientPalette = {
   id: string;
@@ -144,6 +156,40 @@ function hueDistance(a: number, b: number): number {
   return diff > 180 ? 360 - diff : diff;
 }
 
+function normalizeHue(angle: number): number {
+  if (!Number.isFinite(angle)) return 0;
+  const normalized = angle % 360;
+  return normalized < 0 ? normalized + 360 : normalized;
+}
+
+function hueToBucket(angle: number): HueBucket {
+  const hue = normalizeHue(angle);
+  if (hue >= 345 || hue < 15) return "red";
+  if (hue < 45) return "orange";
+  if (hue < 75) return "yellow";
+  if (hue < 165) return "green";
+  if (hue < 195) return "teal";
+  if (hue < 255) return "blue";
+  if (hue < 285) return "purple";
+  if (hue < 345) return "pink";
+  return "neutral";
+}
+
+function hashString(value: string): number {
+  let hash = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    hash = (hash * 31 + value.charCodeAt(i)) % 1_000_000;
+  }
+  return hash;
+}
+
+function fallbackAccentBucket(signature: ColorSignature): HueBucket {
+  const seed = `${signature.dominantColor}:${signature.brightness}:${signature.accentStrength}`;
+  const hash = hashString(seed);
+  const index = hash % HUE_BUCKETS.length;
+  return HUE_BUCKETS[index] ?? "blue";
+}
+
 function resolveVariant(signature: ColorSignature): HueVariant {
   const variants = HUE_VARIANTS[signature.dominantHue] ?? HUE_VARIANTS.neutral;
   if (!Number.isFinite(signature.dominantHueAngle)) {
@@ -166,40 +212,107 @@ function pickScale(scale: ScaleName, step: ScaleKey): string {
   return COLOR_SCALES[scale][step];
 }
 
+function resolveSecondaryHue(signature: ColorSignature): { hue: HueBucket; angle: number } {
+  const baseAngle = normalizeHue(signature.dominantHueAngle);
+  const accentAngle = signature.accentHueAngle;
+  if (
+    signature.accentHue &&
+    typeof accentAngle === "number" &&
+    (signature.dominantHue === "neutral" || hueDistance(baseAngle, accentAngle) >= 35)
+  ) {
+    return { hue: signature.accentHue, angle: accentAngle };
+  }
+
+  if (signature.dominantHue === "neutral") {
+    const fallbackHue = fallbackAccentBucket(signature);
+    const anchor = HUE_VARIANTS[fallbackHue]?.[0]?.anchor ?? 0;
+    return { hue: fallbackHue, angle: anchor };
+  }
+
+  const complementAngle = normalizeHue(baseAngle + 180);
+  return { hue: hueToBucket(complementAngle), angle: complementAngle };
+}
+
+function resolveAccentVariant(signature: ColorSignature): HueVariant | null {
+  if (signature.accentHue) {
+    return resolveVariant({
+      ...signature,
+      dominantHue: signature.accentHue,
+      dominantHueAngle:
+        signature.accentHueAngle ??
+        HUE_VARIANTS[signature.accentHue]?.[0]?.anchor ??
+        0,
+    });
+  }
+
+  const fallback = fallbackAccentBucket(signature);
+  return resolveVariant({
+    ...signature,
+    dominantHue: fallback,
+    dominantHueAngle: HUE_VARIANTS[fallback]?.[0]?.anchor ?? 0,
+  });
+}
+
+export function createComplementSignature(signature: ColorSignature): ColorSignature {
+  const baseAngle = signature.dominantHue !== "neutral" || !signature.accentHueAngle
+    ? signature.dominantHueAngle
+    : signature.accentHueAngle;
+  const complementAngle = normalizeHue(baseAngle + 180);
+  const complementHue = hueToBucket(complementAngle);
+
+  return {
+    ...signature,
+    dominantHue: complementHue,
+    dominantHueAngle: complementAngle,
+    accentHue: signature.dominantHue,
+    accentHueAngle: signature.dominantHueAngle,
+    accentStrength: signature.accentStrength === "vibrant" ? "muted" : signature.accentStrength,
+  };
+}
+
 export function buildGradientPalette(signature: ColorSignature): GradientPalette {
   const steps = STEP_BY_BRIGHTNESS[signature.brightness];
   const variant = resolveVariant(signature);
+  const secondaryHue = resolveSecondaryHue(signature);
+  const secondaryVariant = resolveVariant({
+    ...signature,
+    dominantHue: secondaryHue.hue,
+    dominantHueAngle: secondaryHue.angle,
+  });
   const neutralScale: ScaleName = WARM_BUCKETS.has(signature.dominantHue) ? "stone" : "slate";
 
   if (signature.accentStrength === "grayscale") {
+    const accentVariant = resolveAccentVariant(signature) ?? secondaryVariant;
     return {
       id: `neutral-${signature.brightness}`,
       hue: "neutral",
       brightness: signature.brightness,
       strength: signature.accentStrength,
       colors: {
         primary: pickScale("slate", steps.primary),
-        secondary: pickScale("zinc", steps.secondary),
-        tertiary: pickScale("slate", steps.tertiary),
-        glow: pickScale("slate", steps.glow),
+        secondary: pickScale(accentVariant.primary, "base"),
+        tertiary: pickScale(accentVariant.secondary, "soft"),
+        glow: pickScale(accentVariant.accent, "base"),
         neutral: pickScale("slate", steps.neutral),
       },
     };
   }
 
-  const secondaryScale = signature.accentStrength === "muted" ? neutralScale : variant.secondary;
-  const accentScale = signature.accentStrength === "muted" ? variant.primary : variant.accent;
+  const accentIsMuted = signature.accentStrength !== "vibrant";
+  const accentSecondaryStep = accentIsMuted ? "soft" : (signature.brightness === "dark" ? "rich" : steps.secondary);
+  const accentTertiaryStep = accentIsMuted ? "soft" : (signature.brightness === "dark" ? "base" : steps.tertiary);
+  const accentGlowStep = accentIsMuted ? "base" : (signature.brightness === "dark" ? "base" : steps.glow);
 
   return {
-    id: `${variant.primary}-${variant.secondary}-${signature.brightness}-${signature.accentStrength}`,
+    id: `${variant.primary}-${secondaryVariant.primary}-${signature.brightness}-${signature.accentStrength}`,
     hue: signature.dominantHue,
     brightness: signature.brightness,
     strength: signature.accentStrength,
     colors: {
       primary: pickScale(variant.primary, steps.primary),
-      secondary: pickScale(secondaryScale, steps.secondary),
-      tertiary: pickScale(accentScale, steps.tertiary),
-      glow: pickScale(accentScale, steps.glow),
+      secondary: pickScale(secondaryVariant.primary, accentSecondaryStep),
+      tertiary: pickScale(secondaryVariant.secondary, accentTertiaryStep),
+      glow: pickScale(secondaryVariant.accent, accentGlowStep),
       neutral: pickScale(neutralScale, steps.neutral),
     },
   };