Chart theming: selectable chart theme + spec↔config merge/extract

src/app/stores/AppStore.ts

@@ -1,6 +1,7 @@
 import { create } from 'zustand';
 import type { FitMode } from '@core/rendering';
 import type { UiTheme } from '@core/theme';
+import type { ChartThemeId } from '@core/vega-themes';
 import type { ModalName } from '../modals/types';
 
 /**
@@ -23,6 +24,8 @@ export interface AppState {
   uiTheme: UiTheme;
   /** Preview sizing mode (spec §04); persisted to Settings as `previewFitMode`. */
   previewFitMode: FitMode;
+  /** Chart theme selection (spec §04); persisted to Settings as `chartTheme`. */
+  chartTheme: ChartThemeId;
   /** The currently open modal, or null. */
   activeModal: ModalName | null;
 
@@ -31,6 +34,8 @@ export interface AppState {
   toggleTheme: () => void;
   /** Set the preview fit mode — the Live Preview Fit control's action. */
   setPreviewFitMode: (mode: FitMode) => void;
+  /** Set the chart theme — the Live Preview settings cluster's action. */
+  setChartTheme: (theme: ChartThemeId) => void;
   /**
    * Low-level modal setter — the single primitive that mutates `activeModal`.
    * High-level open/close (snapshot for unsaved-change detection, URL sync,
@@ -43,10 +48,12 @@ export interface AppState {
 export const useAppStore = create<AppState>((set) => ({
   uiTheme: 'light',
   previewFitMode: 'default',
+  chartTheme: 'astrolabe',
   activeModal: null,
 
   setTheme: (uiTheme) => set({ uiTheme }),
   toggleTheme: () => set((s) => ({ uiTheme: s.uiTheme === 'dark' ? 'light' : 'dark' })),
   setPreviewFitMode: (previewFitMode) => set({ previewFitMode }),
+  setChartTheme: (chartTheme) => set({ chartTheme }),
   setActiveModal: (activeModal) => set({ activeModal }),
 }));