From ee6ab3362d3e0e99b92d1777079c9765949f2d56 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 14 Jan 2026 21:51:45 +0000 Subject: [PATCH] feat: Add comprehensive theme editor with live preview Implements a powerful theme creator and editor with the following features: - **Live Preview**: Toggle real-time theme preview with Eye/EyeOff button - **Modern Color Pickers**: HSL color pickers for all theme properties - **Organized Sections**: Tabbed interface with Core Colors, Syntax, Scrollbar, and Gradient tabs - **Accordion Groups**: Core colors organized by purpose (Surfaces, Interactive, Forms, Status, Nostr-specific) - **Base Theme Selection**: Start from any built-in theme (Dark, Light, Plan 9) - **Import/Export**: JSON export/import for theme portability - **Metadata Editing**: Edit theme ID, name, description - **Save Functionality**: Save custom themes to localStorage - **Reset**: Reset to base theme with confirmation Technical implementation: - Added `react-colorful` for HSL color picking - Added `@radix-ui/react-select` for dropdown selects - Created `ThemeEditor` component with full color management - Created `select.tsx` UI component following Radix pattern - Added `theme-editor` command to man pages - Added `theme-editor` appId to WindowRenderer - All 838 tests passing, build successful Usage: Run `theme-editor` command to launch the editor --- package-lock.json | 96 ++++ package.json | 2 + src/components/ThemeEditor.tsx | 727 ++++++++++++++++++++++++++++++ src/components/WindowRenderer.tsx | 6 + src/components/ui/select.tsx | 158 +++++++ src/types/app.ts | 3 +- src/types/man.ts | 12 + 7 files changed, 1003 insertions(+), 1 deletion(-) create mode 100644 src/components/ThemeEditor.tsx create mode 100644 src/components/ui/select.tsx diff --git a/package-lock.json b/package-lock.json index abd2db3..c90ef62 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-progress": "^1.1.8", "@radix-ui/react-scroll-area": "^1.2.10", + "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-slider": "^1.3.6", "@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-tabs": "^1.1.13", @@ -59,6 +60,7 @@ "prismjs": "^1.30.0", "qrcode": "^1.5.4", "react": "^19.2.1", + "react-colorful": "^5.6.1", "react-dom": "^19.2.1", "react-markdown": "^10.1.0", "react-medium-image-zoom": "^5.4.0", @@ -3255,6 +3257,90 @@ } } }, + "node_modules/@radix-ui/react-select": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz", + "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/number": "1.1.1", + "@radix-ui/primitive": "1.1.3", + "@radix-ui/react-collection": "1.1.7", + "@radix-ui/react-compose-refs": "1.1.2", + "@radix-ui/react-context": "1.1.2", + "@radix-ui/react-direction": "1.1.1", + "@radix-ui/react-dismissable-layer": "1.1.11", + "@radix-ui/react-focus-guards": "1.1.3", + "@radix-ui/react-focus-scope": "1.1.7", + "@radix-ui/react-id": "1.1.1", + "@radix-ui/react-popper": "1.2.8", + "@radix-ui/react-portal": "1.1.9", + "@radix-ui/react-primitive": "2.1.3", + "@radix-ui/react-slot": "1.2.3", + "@radix-ui/react-use-callback-ref": "1.1.1", + "@radix-ui/react-use-controllable-state": "1.2.2", + "@radix-ui/react-use-layout-effect": "1.1.1", + "@radix-ui/react-use-previous": "1.1.1", + "@radix-ui/react-visually-hidden": "1.2.3", + "aria-hidden": "^1.2.4", + "react-remove-scroll": "^2.6.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-primitive": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz", + "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-slot": "1.2.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", + "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.2" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slider": { "version": "1.3.6", "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz", @@ -10224,6 +10310,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-colorful": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz", + "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-dnd": { "version": "16.0.1", "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz", diff --git a/package.json b/package.json index 494749e..086bc08 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-progress": "^1.1.8", "@radix-ui/react-scroll-area": "^1.2.10", + "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-slider": "^1.3.6", "@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-tabs": "^1.1.13", @@ -67,6 +68,7 @@ "prismjs": "^1.30.0", "qrcode": "^1.5.4", "react": "^19.2.1", + "react-colorful": "^5.6.1", "react-dom": "^19.2.1", "react-markdown": "^10.1.0", "react-medium-image-zoom": "^5.4.0", diff --git a/src/components/ThemeEditor.tsx b/src/components/ThemeEditor.tsx new file mode 100644 index 0000000..cadb19a --- /dev/null +++ b/src/components/ThemeEditor.tsx @@ -0,0 +1,727 @@ +import { useState, useEffect } from "react"; +import { HslColorPicker, HslColor } from "react-colorful"; +import { useTheme } from "@/lib/themes"; +import type { Theme, HSLValue, RGBValue } from "@/lib/themes/types"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { Download, Upload, RotateCcw, Save, Eye, EyeOff } from "lucide-react"; +import { applyTheme } from "@/lib/themes/apply"; +import { builtinThemeList } from "@/lib/themes/builtin"; + +/** + * Convert HSL string "220 70% 50%" to HslColor object + */ +function parseHSL(hsl: HSLValue): HslColor { + const parts = hsl.split(" "); + const h = parseFloat(parts[0] || "0"); + const s = parseFloat(parts[1]?.replace("%", "") || "0"); + const l = parseFloat(parts[2]?.replace("%", "") || "0"); + return { h, s, l }; +} + +/** + * Convert HslColor object to HSL string "220 70% 50%" + */ +function formatHSL(color: HslColor): HSLValue { + return `${Math.round(color.h)} ${Math.round(color.s)}% ${Math.round(color.l)}%`; +} + +/** + * Convert RGB string "250 204 21" to object + */ +function parseRGB(rgb: RGBValue): { r: number; g: number; b: number } { + const parts = rgb.split(" "); + return { + r: parseFloat(parts[0] || "0"), + g: parseFloat(parts[1] || "0"), + b: parseFloat(parts[2] || "0"), + }; +} + +/** + * Convert RGB object to string "250 204 21" + */ +function formatRGB(color: { r: number; g: number; b: number }): RGBValue { + return `${Math.round(color.r)} ${Math.round(color.g)} ${Math.round(color.b)}`; +} + +/** + * HSL Color Picker Component + */ +interface ColorPickerProps { + label: string; + value: HSLValue; + onChange: (value: HSLValue) => void; + description?: string; +} + +function ColorPicker({ + label, + value, + onChange, + description, +}: ColorPickerProps) { + const [color, setColor] = useState(parseHSL(value)); + const [inputValue, setInputValue] = useState(value); + + // Update local state when prop changes + useEffect(() => { + setColor(parseHSL(value)); + setInputValue(value); + }, [value]); + + const handleColorChange = (newColor: HslColor) => { + setColor(newColor); + const hslString = formatHSL(newColor); + setInputValue(hslString); + onChange(hslString); + }; + + const handleInputChange = (e: React.ChangeEvent) => { + const val = e.target.value; + setInputValue(val); + // Try to parse and update if valid + try { + const parsed = parseHSL(val); + setColor(parsed); + onChange(val); + } catch { + // Invalid format, don't update + } + }; + + return ( +
+ + {description && ( +

{description}

+ )} +
+
+ +
+
+ +
+
+
+
+ ); +} + +/** + * RGB Color Picker Component (for gradients) + */ +interface RGBPickerProps { + label: string; + value: RGBValue; + onChange: (value: RGBValue) => void; +} + +function RGBPicker({ label, value, onChange }: RGBPickerProps) { + const rgb = parseRGB(value); + + const handleChange = (channel: "r" | "g" | "b", val: number) => { + const newRgb = { ...rgb, [channel]: Math.max(0, Math.min(255, val)) }; + onChange(formatRGB(newRgb)); + }; + + return ( +
+ +
+
+ + handleChange("r", parseInt(e.target.value))} + className="font-mono text-sm" + /> +
+
+ + handleChange("g", parseInt(e.target.value))} + className="font-mono text-sm" + /> +
+
+ + handleChange("b", parseInt(e.target.value))} + className="font-mono text-sm" + /> +
+
+
+
+ ); +} + +/** + * Main Theme Editor Component + */ +export function ThemeEditor() { + const { theme: currentTheme, addCustomTheme, availableThemes } = useTheme(); + const [editingTheme, setEditingTheme] = useState( + JSON.parse(JSON.stringify(currentTheme)), + ); + const [previewEnabled, setPreviewEnabled] = useState(false); + const [baseThemeId, setBaseThemeId] = useState(currentTheme.id); + + // Apply preview in real-time + useEffect(() => { + if (previewEnabled) { + applyTheme(editingTheme); + } + }, [editingTheme, previewEnabled]); + + // Cleanup: restore original theme when preview is disabled or component unmounts + useEffect(() => { + return () => { + if (previewEnabled) { + applyTheme(currentTheme); + } + }; + }, [currentTheme, previewEnabled]); + + const handleBaseThemeChange = (themeId: string) => { + setBaseThemeId(themeId); + const baseTheme = availableThemes.find((t) => t.id === themeId); + if (baseTheme) { + setEditingTheme(JSON.parse(JSON.stringify(baseTheme))); + } + }; + + const handleColorChange = (path: string, value: HSLValue | RGBValue) => { + setEditingTheme((prev) => { + const updated = JSON.parse(JSON.stringify(prev)); + const keys = path.split("."); + let obj: any = updated; + for (let i = 0; i < keys.length - 1; i++) { + obj = obj[keys[i]]; + } + obj[keys[keys.length - 1]] = value; + return updated; + }); + }; + + const handleMetadataChange = ( + field: "id" | "name" | "description" | "author" | "version", + value: string, + ) => { + setEditingTheme((prev) => ({ ...prev, [field]: value })); + }; + + const handleSave = () => { + addCustomTheme(editingTheme); + alert(`Theme "${editingTheme.name}" saved successfully!`); + }; + + const handleExport = () => { + const json = JSON.stringify(editingTheme, null, 2); + const blob = new Blob([json], { type: "application/json" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = `${editingTheme.id}.json`; + a.click(); + URL.revokeObjectURL(url); + }; + + const handleImport = () => { + const input = document.createElement("input"); + input.type = "file"; + input.accept = ".json"; + input.onchange = (e) => { + const file = (e.target as HTMLInputElement).files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + try { + const imported = JSON.parse(e.target?.result as string); + setEditingTheme(imported); + alert("Theme imported successfully!"); + } catch { + alert("Failed to import theme. Invalid JSON."); + } + }; + reader.readAsText(file); + } + }; + input.click(); + }; + + const handleReset = () => { + if (confirm("Reset to base theme? Unsaved changes will be lost.")) { + const baseTheme = availableThemes.find((t) => t.id === baseThemeId); + if (baseTheme) { + setEditingTheme(JSON.parse(JSON.stringify(baseTheme))); + } + } + }; + + return ( +
+ {/* Header */} +
+
+

Theme Editor

+
+ +
+
+ + {/* Metadata */} +
+
+ + handleMetadataChange("id", e.target.value)} + className="h-8 text-sm" + placeholder="my-theme" + /> +
+
+ + handleMetadataChange("name", e.target.value)} + className="h-8 text-sm" + placeholder="My Theme" + /> +
+
+ + {/* Actions */} +
+ + + + + +
+
+ + {/* Editor Tabs */} + + + + Core Colors + Syntax + Scrollbar + Gradient + + + {/* Core Colors */} + + + + Surfaces + + handleColorChange("colors.background", v)} + description="Main app background" + /> + handleColorChange("colors.foreground", v)} + description="Main text color" + /> + handleColorChange("colors.card", v)} + description="Card/panel background" + /> + + handleColorChange("colors.cardForeground", v) + } + description="Text on cards" + /> + handleColorChange("colors.popover", v)} + description="Popover/dropdown background" + /> + + handleColorChange("colors.popoverForeground", v) + } + description="Text in popovers" + /> + + + + + Interactive Elements + + handleColorChange("colors.primary", v)} + description="Primary buttons and interactive elements" + /> + + handleColorChange("colors.primaryForeground", v) + } + description="Text on primary elements" + /> + handleColorChange("colors.secondary", v)} + description="Secondary buttons" + /> + + handleColorChange("colors.secondaryForeground", v) + } + description="Text on secondary elements" + /> + handleColorChange("colors.accent", v)} + description="Accent/highlight color" + /> + + handleColorChange("colors.accentForeground", v) + } + description="Text on accent elements" + /> + handleColorChange("colors.muted", v)} + description="Muted/subdued elements" + /> + + handleColorChange("colors.mutedForeground", v) + } + description="Text on muted elements" + /> + handleColorChange("colors.destructive", v)} + description="Destructive/error actions" + /> + + handleColorChange("colors.destructiveForeground", v) + } + description="Text on destructive elements" + /> + + + + + Form Elements + + handleColorChange("colors.border", v)} + description="Border color" + /> + handleColorChange("colors.input", v)} + description="Input background" + /> + handleColorChange("colors.ring", v)} + description="Focus ring color" + /> + + + + + Status & Feedback + + handleColorChange("colors.success", v)} + description="Success states" + /> + handleColorChange("colors.warning", v)} + description="Warning states" + /> + handleColorChange("colors.info", v)} + description="Info states" + /> + + + + + Nostr-Specific + + handleColorChange("colors.zap", v)} + description="Lightning zap color" + /> + handleColorChange("colors.live", v)} + description="Live streaming indicator" + /> + handleColorChange("colors.highlight", v)} + description="User highlight color" + /> + + + + + + {/* Syntax Highlighting */} + +
+ handleColorChange("syntax.comment", v)} + /> + handleColorChange("syntax.punctuation", v)} + /> + handleColorChange("syntax.property", v)} + /> + handleColorChange("syntax.string", v)} + /> + handleColorChange("syntax.keyword", v)} + /> + handleColorChange("syntax.function", v)} + /> + handleColorChange("syntax.variable", v)} + /> + handleColorChange("syntax.operator", v)} + /> + handleColorChange("syntax.diffInserted", v)} + /> + handleColorChange("syntax.diffInsertedBg", v)} + /> + handleColorChange("syntax.diffDeleted", v)} + /> + handleColorChange("syntax.diffDeletedBg", v)} + /> + handleColorChange("syntax.diffMeta", v)} + /> + handleColorChange("syntax.diffMetaBg", v)} + /> +
+ + + {/* Scrollbar */} + + handleColorChange("scrollbar.thumb", v)} + description="Scrollbar thumb color" + /> + handleColorChange("scrollbar.thumbHover", v)} + description="Scrollbar thumb hover color" + /> + handleColorChange("scrollbar.track", v)} + description="Scrollbar track color" + /> + + + {/* Gradient */} + + handleColorChange("gradient.color1", v)} + /> + handleColorChange("gradient.color2", v)} + /> + handleColorChange("gradient.color3", v)} + /> + handleColorChange("gradient.color4", v)} + /> +
+ +
+
+ + + +
+ ); +} diff --git a/src/components/WindowRenderer.tsx b/src/components/WindowRenderer.tsx index 84d0ffa..4e60218 100644 --- a/src/components/WindowRenderer.tsx +++ b/src/components/WindowRenderer.tsx @@ -42,6 +42,9 @@ const SpellbooksViewer = lazy(() => const BlossomViewer = lazy(() => import("./BlossomViewer").then((m) => ({ default: m.BlossomViewer })), ); +const ThemeEditor = lazy(() => + import("./ThemeEditor").then((m) => ({ default: m.ThemeEditor })), +); // Loading fallback component function ViewerLoading() { @@ -210,6 +213,9 @@ export function WindowRenderer({ window, onClose }: WindowRendererProps) { /> ); break; + case "theme-editor": + content = ; + break; default: content = (
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx new file mode 100644 index 0000000..9b769ec --- /dev/null +++ b/src/components/ui/select.tsx @@ -0,0 +1,158 @@ +import * as React from "react"; +import * as SelectPrimitive from "@radix-ui/react-select"; +import { Check, ChevronDown, ChevronUp } from "lucide-react"; + +import { cn } from "@/lib/utils"; + +const Select = SelectPrimitive.Root; + +const SelectGroup = SelectPrimitive.Group; + +const SelectValue = SelectPrimitive.Value; + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + span]:line-clamp-1", + className, + )} + {...props} + > + {children} + + + + +)); +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; + +const SelectScrollUpButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; + +const SelectScrollDownButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +SelectScrollDownButton.displayName = + SelectPrimitive.ScrollDownButton.displayName; + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + + {children} + + + + +)); +SelectContent.displayName = SelectPrimitive.Content.displayName; + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SelectLabel.displayName = SelectPrimitive.Label.displayName; + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + + {children} + +)); +SelectItem.displayName = SelectPrimitive.Item.displayName; + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SelectSeparator.displayName = SelectPrimitive.Separator.displayName; + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, +}; diff --git a/src/types/app.ts b/src/types/app.ts index ac99533..9a9ca90 100644 --- a/src/types/app.ts +++ b/src/types/app.ts @@ -20,7 +20,8 @@ export type AppId = | "spells" | "spellbooks" | "blossom" - | "win"; + | "win" + | "theme-editor"; export interface WindowInstance { id: string; diff --git a/src/types/man.ts b/src/types/man.ts index 69f47d2..5593259 100644 --- a/src/types/man.ts +++ b/src/types/man.ts @@ -575,4 +575,16 @@ export const manPages: Record = { }, defaultProps: { subcommand: "servers" }, }, + "theme-editor": { + name: "theme-editor", + section: "1", + synopsis: "theme-editor", + description: + "Open the theme editor to create and customize color themes. Features live preview, modern color pickers for all theme colors, and the ability to save, export, and import custom themes. Start from any built-in theme as a base.", + examples: ["theme-editor Open the theme editor with current theme"], + seeAlso: ["help"], + appId: "theme-editor", + category: "System", + defaultProps: {}, + }, };