Implement fit-mode rendering contract with container sizing and pane re-fit

2026-08-08 10:12:34 +00:00 · 2026-06-05 10:45:41 +03:00
parent f4253f50ca
commit 411bfbc6c2
13 changed files with 552 additions and 73 deletions
@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import type { FitMode } from '@core/rendering';
 import type { UiTheme } from '@core/theme';

 /**
@@ -19,12 +20,16 @@ export type ModalName = 'datasets' | 'settings' | 'about' | 'donate' | 'chartBui
 export interface AppState {
  /** Active UI theme; mirrored onto <html data-theme> by a subscriber. */
  uiTheme: UiTheme;
+  /** Preview sizing mode (spec §04); persisted to Settings as `previewFitMode`. */
+  previewFitMode: FitMode;
  /** The currently open modal, or null. */
  activeModal: ModalName | null;

  setTheme: (theme: UiTheme) => void;
  /** Flip between light and dark — the header ThemeToggle's action. */
  toggleTheme: () => void;
+  /** Set the preview fit mode — the Live Preview Fit control's action. */
+  setPreviewFitMode: (mode: FitMode) => void;
  /**
   * Low-level modal setter — the single primitive that mutates `activeModal`.
   * High-level open/close (snapshot for unsaved-change detection, URL sync,
@@ -36,9 +41,11 @@ export interface AppState {

 export const useAppStore = create<AppState>((set) => ({
  uiTheme: 'light',
+  previewFitMode: 'default',
  activeModal: null,

  setTheme: (uiTheme) => set({ uiTheme }),
  toggleTheme: () => set((s) => ({ uiTheme: s.uiTheme === 'dark' ? 'light' : 'dark' })),
+  setPreviewFitMode: (previewFitMode) => set({ previewFitMode }),
  setActiveModal: (activeModal) => set({ activeModal }),
 }));