Bug Fixes and Formatting Update

src/lib/stores/theme.ts

@@ -1,9 +1,28 @@
 import { writable, derived } from 'svelte/store';
 import { browser } from '$app/environment';
+import { type ThemeColorMap, defaultColorMap } from '$lib/components/tui/utils';
+
+// Import theme JSON files
+import archTheme from '$lib/assets/themes/arch.theme.json';
+import catppuccinTheme from '$lib/assets/themes/catppuccin.theme.json';
 
 export type ColorTheme = 'arch' | 'catppuccin';
 export type Mode = 'dark' | 'light';
 
+// Theme JSON structure
+export interface ThemeJson {
+	name: string;
+	icon: string;
+	dark: {
+		colors: Record<string, string>;
+		colorMap: ThemeColorMap;
+	};
+	light: {
+		colors: Record<string, string>;
+		colorMap: ThemeColorMap;
+	};
+}
+
 export interface ThemeColors {
 	primary: string;
 	secondary: string;
@@ -17,73 +36,50 @@ export interface ThemeColors {
 	terminalPrompt: string;
 	terminalUser: string;
 	terminalPath: string;
+	colorMap: ThemeColorMap;
 }
 
-const themeColorsMap: Record<ColorTheme, { dark: ThemeColors; light: ThemeColors }> = {
-	arch: {
-		dark: {
-			primary: '#1793d1',
-			secondary: '#333333',
-			accent: '#00ff00',
-			background: '#0d1117',
-			backgroundLight: '#161b22',
-			text: '#c9d1d9',
-			textMuted: '#8b949e',
-			border: '#30363d',
-			terminal: '#0d1117',
-			terminalPrompt: '#1793d1',
-			terminalUser: '#00ff00',
-			terminalPath: '#1793d1'
-		},
-		light: {
-			primary: '#1793d1',
-			secondary: '#e0e0e0',
-			accent: '#006600',
-			background: '#f6f8fa',
-			backgroundLight: '#ffffff',
-			text: '#1a1a1a',
-			textMuted: '#4a5568',
-			border: '#d0d7de',
-			terminal: '#ffffff',
-			terminalPrompt: '#0f6ca0',
-			terminalUser: '#006600',
-			terminalPath: '#0f6ca0'
-		}
-	},
-	catppuccin: {
-		// Catppuccin Mocha (dark)
-		dark: {
-			primary: '#89b4fa',      // Blue
-			secondary: '#313244',    // Surface 0
-			accent: '#a6e3a1',       // Green
-			background: '#1e1e2e',   // Base
-			backgroundLight: '#313244', // Surface 0
-			text: '#cdd6f4',         // Text
-			textMuted: '#a6adc8',    // Subtext 0
-			border: '#45475a',       // Surface 1
-			terminal: '#1e1e2e',     // Base
-			terminalPrompt: '#cba6f7', // Mauve
-			terminalUser: '#a6e3a1',   // Green
-			terminalPath: '#89b4fa'    // Blue
-		},
-		// Catppuccin Latte (light)
-		light: {
-			primary: '#1e66f5',      // Blue
-			secondary: '#ccd0da',    // Surface 0
-			accent: '#40a02b',       // Green
-			background: '#eff1f5',   // Base
-			backgroundLight: '#dce0e8', // Crust
-			text: '#4c4f69',         // Text
-			textMuted: '#6c6f85',    // Subtext 0
-			border: '#bcc0cc',       // Surface 1
-			terminal: '#eff1f5',     // Base
-			terminalPrompt: '#8839ef', // Mauve
-			terminalUser: '#40a02b',   // Green
-			terminalPath: '#1e66f5'    // Blue
-		}
-	}
+// Load themes from JSON files
+const themes: Record<ColorTheme, ThemeJson> = {
+	arch: archTheme as ThemeJson,
+	catppuccin: catppuccinTheme as ThemeJson
 };
 
+// Export themes for external access
+export { themes };
+
+// Build theme colors from JSON
+function buildThemeColors(theme: ThemeJson, mode: Mode): ThemeColors {
+	const modeData = theme[mode];
+	return {
+		primary: modeData.colors.primary,
+		secondary: modeData.colors.secondary,
+		accent: modeData.colors.accent,
+		background: modeData.colors.background,
+		backgroundLight: modeData.colors.backgroundLight,
+		text: modeData.colors.text,
+		textMuted: modeData.colors.textMuted,
+		border: modeData.colors.border,
+		terminal: modeData.colors.terminal,
+		terminalPrompt: modeData.colors.terminalPrompt,
+		terminalUser: modeData.colors.terminalUser,
+		terminalPath: modeData.colors.terminalPath,
+		colorMap: modeData.colorMap ?? defaultColorMap
+	};
+}
+
+// Build the theme colors map from JSON themes
+const themeColorsMap: Record<ColorTheme, { dark: ThemeColors; light: ThemeColors }> = 
+	Object.fromEntries(
+		Object.entries(themes).map(([key, theme]) => [
+			key,
+			{
+				dark: buildThemeColors(theme, 'dark'),
+				light: buildThemeColors(theme, 'light')
+			}
+		])
+	) as Record<ColorTheme, { dark: ThemeColors; light: ThemeColors }>;
+
 function getInitialMode(): Mode {
 	if (browser) {
 		const stored = localStorage.getItem('mode');
@@ -129,7 +125,10 @@ export function setColorTheme(theme: ColorTheme) {
 	colorTheme.set(theme);
 }
 
-export const themeOptions: { value: ColorTheme; label: string; icon: string }[] = [
-	{ value: 'arch', label: 'Arch Linux', icon: '🐧' },
-	{ value: 'catppuccin', label: 'Catppuccin', icon: '🐱' }
-];
+// Generate theme options from loaded themes
+export const themeOptions: { value: ColorTheme; label: string; icon: string }[] = 
+	Object.entries(themes).map(([key, theme]) => ({
+		value: key as ColorTheme,
+		label: theme.name,
+		icon: theme.icon
+	}));