Implement M1.5 visual design foundation: tokens, IBM Plex, theme toggle, chart themes

src/app/stores/AppStore.test.ts

@@ -0,0 +1,20 @@
+import { beforeEach, describe, expect, test } from 'vitest';
+import { useAppStore } from './AppStore';
+
+const store = () => useAppStore.getState();
+beforeEach(() => store().setTheme('light'));
+
+describe('theme', () => {
+  test('setTheme sets the theme explicitly', () => {
+    store().setTheme('dark');
+    expect(store().uiTheme).toBe('dark');
+  });
+
+  test('toggleTheme flips light ⇄ dark', () => {
+    expect(store().uiTheme).toBe('light');
+    store().toggleTheme();
+    expect(store().uiTheme).toBe('dark');
+    store().toggleTheme();
+    expect(store().uiTheme).toBe('light');
+  });
+});

src/app/stores/AppStore.ts

@@ -23,6 +23,8 @@ export interface AppState {
   activeModal: ModalName | null;
 
   setTheme: (theme: UiTheme) => void;
+  /** Flip between light and dark — the header ThemeToggle's action. */
+  toggleTheme: () => void;
   /**
    * Low-level modal setter — the single primitive that mutates `activeModal`.
    * High-level open/close (snapshot for unsaved-change detection, URL sync,
@@ -37,5 +39,6 @@ export const useAppStore = create<AppState>((set) => ({
   activeModal: null,
 
   setTheme: (uiTheme) => set({ uiTheme }),
+  toggleTheme: () => set((s) => ({ uiTheme: s.uiTheme === 'dark' ? 'light' : 'dark' })),
   setActiveModal: (activeModal) => set({ activeModal }),
 }));