feat: add tabbed color picker widget (palette, named colors, custom HSV)

Co-authored-by: Cursor <cursoragent@cursor.com>

popup/popup.css

@@ -200,3 +200,207 @@ fieldset input[type="text"] {
   gap: 4px;
   align-items: center;
 }
+
+/* --- Color Picker Widget --- */
+.rt-color-picker {
+  margin: 8px 0;
+  font-size: 12px;
+}
+
+.rt-picker-tabs {
+  display: flex;
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 8px;
+}
+
+.rt-picker-tab {
+  flex: 1;
+  padding: 4px 8px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
+  color: #666;
+}
+
+.rt-picker-tab:hover {
+  color: #333;
+}
+
+.rt-picker-tab--active {
+  color: #1a1a1a;
+  border-bottom-color: #4a90d9;
+  font-weight: 600;
+}
+
+.rt-picker-panel {
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.rt-picker-grid--palette {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.rt-picker-grid-row {
+  display: flex;
+  gap: 2px;
+}
+
+.rt-picker-swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.rt-picker-swatch:hover {
+  border-color: rgba(0, 0, 0, 0.4);
+  transform: scale(1.2);
+  z-index: 1;
+  position: relative;
+}
+
+.rt-picker-swatch--selected {
+  border: 2px solid #1a1a1a;
+  box-shadow: 0 0 0 1px white;
+}
+
+.rt-picker-grid--named {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 2px 0;
+}
+
+.rt-picker-named-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  width: 40px;
+}
+
+.rt-picker-named-item .rt-picker-swatch {
+  width: 24px;
+  height: 18px;
+}
+
+.rt-picker-named-label {
+  font-size: 8px;
+  color: #888;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  line-height: 1.2;
+}
+
+.rt-picker-panel--custom {
+  max-height: none;
+  overflow: visible;
+}
+
+.rt-picker-sv-wrap {
+  position: relative;
+  margin-bottom: 6px;
+}
+
+.rt-picker-sv {
+  display: block;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  cursor: crosshair;
+}
+
+.rt-picker-sv-cursor {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 2px solid white;
+  border-radius: 50%;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+
+.rt-picker-hue {
+  position: relative;
+  height: 14px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
+  cursor: crosshair;
+}
+
+.rt-picker-hue-indicator {
+  position: absolute;
+  top: -1px;
+  width: 2px;
+  height: calc(100% + 2px);
+  background: white;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+/* Picker dark mode */
+.rt-dark .rt-picker-tabs,
+.rt-color-popover.rt-dark .rt-picker-tabs {
+  border-bottom-color: #555;
+}
+
+.rt-dark .rt-picker-tab,
+.rt-color-popover.rt-dark .rt-picker-tab {
+  color: #999;
+}
+
+.rt-dark .rt-picker-tab:hover,
+.rt-color-popover.rt-dark .rt-picker-tab:hover {
+  color: #ccc;
+}
+
+.rt-dark .rt-picker-tab--active,
+.rt-color-popover.rt-dark .rt-picker-tab--active {
+  color: #e0e0e0;
+  border-bottom-color: #4a90d9;
+}
+
+.rt-dark .rt-picker-swatch,
+.rt-color-popover.rt-dark .rt-picker-swatch {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.rt-dark .rt-picker-swatch:hover,
+.rt-color-popover.rt-dark .rt-picker-swatch:hover {
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.rt-dark .rt-picker-swatch--selected,
+.rt-color-popover.rt-dark .rt-picker-swatch--selected {
+  border-color: #e0e0e0;
+  box-shadow: 0 0 0 1px #333;
+}
+
+.rt-dark .rt-picker-named-label,
+.rt-color-popover.rt-dark .rt-picker-named-label {
+  color: #777;
+}
+
+.rt-dark .rt-picker-sv,
+.rt-color-popover.rt-dark .rt-picker-sv {
+  border-color: #555;
+}
+
+.rt-dark .rt-picker-hue,
+.rt-color-popover.rt-dark .rt-picker-hue {
+  border-color: #555;
+}