From 60b3022a231b4971e93c36b90252c56b5995f935 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Wed, 22 Apr 2026 16:37:59 -0400
Subject: [PATCH] =?UTF-8?q?feat(ui):=20expand=20color=20picker=20preset=20?=
 =?UTF-8?q?grid=20from=209=C3=972=20to=2010=C3=973=20with=20updated=20colo?=
 =?UTF-8?q?rs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/components/ColorPicker.client.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/ColorPicker.client.js b/src/shared/components/ColorPicker.client.js
index d16a6d2..ff895ce 100644
--- a/src/shared/components/ColorPicker.client.js
+++ b/src/shared/components/ColorPicker.client.js
@@ -2,9 +2,10 @@
 
 import { useState, useRef, useEffect } from 'react';
 
-const ROW1 = ['#1abc9c', '#2ecc71', '#3498db', '#9b59b6', '#e91e63', '#f1c40f', '#e67e22', '#e74c3c', '#95a5a6'];
-const ROW2 = ['#11806a', '#1f8b4c', '#206694', '#71368a', '#ad1457', '#c27c0e', '#a84300', '#992d22', '#546e7a'];
-const PRESET_COLORS = [...ROW1, ...ROW2];
+const ROW1 = ['#0d9488', '#16a34a', '#0284c7', '#2563eb', '#4f46e5', '#7c3aed', '#9333ea', '#c026d3', '#db2777', '#e11d48'];
+const ROW2 = ['#0f766e', '#15803d', '#0369a1', '#1d4ed8', '#4338ca', '#6d28d9', '#7e22ce', '#a21caf', '#be185d', '#be123c'];
+const ROW3 = ['#b45309', '#c2410c', '#b91c1c', '#92400e', '#4d7c0f', '#047857', '#155e75', '#1e3a8a', '#312e81', '#581c87'];
+const PRESET_COLORS = [...ROW1, ...ROW2, ...ROW3];
 
 const isValidHex = (hex) => /^#[0-9a-fA-F]{6}$/.test(hex);
 
@@ -108,9 +109,9 @@ const ColorPicker = ({
                     />
                 </div>
 
-                {/* Right: 9×2 preset grid */}
+                {/* Right: 10×3 preset grid */}
                 <div className="flex flex-col gap-1.5">
-                    {[ROW1, ROW2].map((row, rowIdx) => (
+                    {[ROW1, ROW2, ROW3].map((row, rowIdx) => (
                         <div key={rowIdx} className="flex gap-1.5">
                             {row.map((color) => {
                                 const isSelected = selected === color.toLowerCase();