new components

frontend/src/lib/accent.ts

@@ -66,8 +66,42 @@ function hslToRgbTriplet(h: number, s: number, l: number): string {
   return `${to(r)} ${to(g)} ${to(b)}`;
 }
 
-/** Build the 50–950 ramp from a base hex (HSL ramp, emerald-style). */
-export function shadesFor(baseHex: string): AccentShades {
+/** HSV helpers for the custom color picker (no native input involved). */
+export function hexToHsv(hex: string): { h: number; s: number; v: number } | null {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  const n = parseInt(m[1]!, 16);
+  const r = ((n >> 16) & 255) / 255, g = ((n >> 8) & 255) / 255, b = (n & 255) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
+    else if (max === g) h = ((b - r) / d + 2) * 60;
+    else h = ((r - g) / d + 4) * 60;
+  }
+  return { h, s: max === 0 ? 0 : (d / max) * 100, v: max * 100 };
+}
+
+export function hsvToHex(h: number, s: number, v: number): string {
+  const sn = Math.min(100, Math.max(0, s)) / 100;
+  const vn = Math.min(100, Math.max(0, v)) / 100;
+  const hh = ((h % 360) + 360) % 360;
+  const c = vn * sn;
+  const x = c * (1 - Math.abs(((hh / 60) % 2) - 1));
+  const m = vn - c;
+  let r = 0, g = 0, b = 0;
+  if (hh < 60) [r, g, b] = [c, x, 0];
+  else if (hh < 120) [r, g, b] = [x, c, 0];
+  else if (hh < 180) [r, g, b] = [0, c, x];
+  else if (hh < 240) [r, g, b] = [0, x, c];
+  else if (hh < 300) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const to = (zv: number) => Math.round((zv + m) * 255).toString(16).padStart(2, "0");
+  return `#${to(r)}${to(g)}${to(b)}`;
+}
+
+/** Build the 50–950 ramp from a base hex (HSL ramp, emerald-style). */export function shadesFor(baseHex: string): AccentShades {
   const { h, s } = hexToHsl(baseHex);
   const out = {} as AccentShades;
   for (const k of SHADE_KEYS) {

frontend/src/lib/i18n.ts

@@ -225,6 +225,7 @@ const en = {
   "accent.preset.orange": "Orange",
   "accent.preset.teal": "Teal",
   "accent.preset.pink": "Pink",
+  "accent.hexLabel": "Hex color",
 
   "feat.thinking.label": "Thinking",
   "feat.thinking.hint":
@@ -948,6 +949,7 @@ const es: Dict = {
   "accent.preset.orange": "Naranja",
   "accent.preset.teal": "Turquesa",
   "accent.preset.pink": "Rosa fuerte",
+  "accent.hexLabel": "Hex color",
 
   "feat.thinking.label": "Razonamiento",
   "feat.thinking.hint":
@@ -1664,6 +1666,7 @@ const fr: Dict = {
   "accent.preset.orange": "Orange",
   "accent.preset.teal": "Sarcelle",
   "accent.preset.pink": "Rose vif",
+  "accent.hexLabel": "Hex color",
 
   "feat.thinking.label": "Réflexion",
   "feat.thinking.hint": "Demande au modèle de raisonner étape par étape.",
@@ -2375,6 +2378,7 @@ const ru: Dict = {
   "accent.preset.orange": "Оранжевый",
   "accent.preset.teal": "Бирюза",
   "accent.preset.pink": "Розовый",
+  "accent.hexLabel": "Hex color",
 
   "feat.thinking.label": "Размышление",
   "feat.thinking.hint": "Просить модель рассуждать шаг за шагом.",
@@ -3078,6 +3082,7 @@ const it: Dict = {
   "accent.preset.orange": "Arancione",
   "accent.preset.teal": "Teal",
   "accent.preset.pink": "Rosa shocking",
+  "accent.hexLabel": "Hex color",
 
   "feat.thinking.label": "Ragionamento",
   "feat.thinking.hint": "Chiedi al modello di ragionare passo passo.",
@@ -3784,6 +3789,7 @@ const pt: Dict = {
   "accent.preset.orange": "Laranja",
   "accent.preset.teal": "Turquesa",
   "accent.preset.pink": "Rosa choque",
+  "accent.hexLabel": "Hex color",
 
   "feat.thinking.label": "Raciocínio",
   "feat.thinking.hint": "Pede ao modelo para raciocinar passo a passo.",