[Init] Initial commit - NetMesh terminal manager

application/state/fontStore.ts

@@ -0,0 +1,185 @@
+import { useSyncExternalStore } from 'react';
+import { TERMINAL_FONTS, type TerminalFont } from '../../infrastructure/config/fonts';
+import {
+  clearLocalFontsCache,
+  getAllSystemFontFamilyNames,
+  getMonospaceFonts,
+} from '../../lib/localFonts';
+import {
+  clearFontAvailabilityCache,
+  setSystemFamilies,
+} from '../../lib/fontAvailability';
+
+/**
+ * Global font store - singleton pattern using useSyncExternalStore
+ * Ensures fonts are loaded only once and shared across all components
+ */
+type Listener = () => void;
+
+interface FontStoreState {
+  availableFonts: TerminalFont[];
+  installedFontFamilies: string[] | null;
+  isLoading: boolean;
+  isLoaded: boolean;
+  error: string | null;
+}
+
+class FontStore {
+  private state: FontStoreState = {
+    availableFonts: TERMINAL_FONTS,
+    installedFontFamilies: null,
+    isLoading: false,
+    isLoaded: false,
+    error: null,
+  };
+  private listeners = new Set<Listener>();
+
+  // Getters for individual state slices
+  getAvailableFonts = (): TerminalFont[] => this.state.availableFonts;
+  getInstalledFontFamilies = (): string[] | null => this.state.installedFontFamilies;
+  getIsLoading = (): boolean => this.state.isLoading;
+  getIsLoaded = (): boolean => this.state.isLoaded;
+  getError = (): string | null => this.state.error;
+
+  private notify = () => {
+    // Defer listener notification to avoid "setState during render"
+    Promise.resolve().then(() => {
+      this.listeners.forEach(listener => listener());
+    });
+  };
+
+  private setState = (partial: Partial<FontStoreState>) => {
+    this.state = { ...this.state, ...partial };
+    this.notify();
+  };
+
+  subscribe = (listener: Listener): (() => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  /**
+   * Initialize font loading - safe to call multiple times,
+   * will only load once
+   */
+  initialize = async (): Promise<void> => {
+    // Already loaded or currently loading
+    if (this.state.isLoaded || this.state.isLoading) {
+      return;
+    }
+
+    this.setState({ isLoading: true, error: null });
+
+    try {
+      // Populate the authoritative installed-family set used by
+      // fontAvailability.isFontInstalled. Runs in parallel with the
+      // monospace-only query (both share an underlying cache).
+      const [localFonts, installedFontFamilies] = await Promise.all([
+        getMonospaceFonts(),
+        getAllSystemFontFamilyNames(),
+      ]);
+      setSystemFamilies(
+        installedFontFamilies
+          ? new Set(installedFontFamilies.map((family) => family.toLowerCase()))
+          : null,
+      );
+
+      // Combine default fonts with local fonts, deduplicate by id
+      const fontMap = new Map<string, TerminalFont>();
+
+      // Add default fonts first
+      TERMINAL_FONTS.forEach(font => fontMap.set(font.id, font));
+
+      // Build a set of built-in font family names for dedup (case-insensitive)
+      const builtinFamilyNames = new Set(
+        TERMINAL_FONTS.map(f => f.name.toLowerCase())
+      );
+
+      // Add local fonts, skipping those already covered by built-in fonts
+      localFonts.forEach(font => {
+        if (builtinFamilyNames.has(font.name.toLowerCase())) return;
+        const localId = font.id.startsWith('local-') ? font.id : `local-${font.id}`;
+        fontMap.set(localId, { ...font, id: localId });
+      });
+
+      this.setState({
+        availableFonts: Array.from(fontMap.values()),
+        installedFontFamilies,
+        isLoading: false,
+        isLoaded: true,
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to load local fonts';
+      console.warn('Failed to fetch local fonts, using defaults:', error);
+      this.setState({
+        availableFonts: TERMINAL_FONTS,
+        installedFontFamilies: null,
+        isLoading: false,
+        isLoaded: true,
+        error: errorMessage,
+      });
+    }
+  };
+
+  refresh = async (): Promise<void> => {
+    if (this.state.isLoading) return;
+    clearLocalFontsCache();
+    clearFontAvailabilityCache();
+    this.setState({ isLoaded: false });
+    await this.initialize();
+  };
+
+  /**
+   * Find a font by ID with fallback
+   */
+  getFontById = (fontId: string): TerminalFont => {
+    const fonts = this.state.availableFonts;
+    return fonts.find(f => f.id === fontId) || fonts[0] || TERMINAL_FONTS[0];
+  };
+}
+
+// Singleton instance
+export const fontStore = new FontStore();
+
+// ============== Hooks ==============
+
+/**
+ * Get available fonts - triggers initialization on first use
+ */
+export const useAvailableFonts = (): TerminalFont[] => {
+  // Trigger initialization on first use
+  if (!fontStore.getIsLoaded() && !fontStore.getIsLoading()) {
+    fontStore.initialize();
+  }
+  
+  return useSyncExternalStore(
+    fontStore.subscribe,
+    fontStore.getAvailableFonts,
+    fontStore.getAvailableFonts,
+  );
+};
+
+export const useInstalledFontFamilies = (): string[] | null => {
+  if (!fontStore.getIsLoaded() && !fontStore.getIsLoading()) {
+    fontStore.initialize();
+  }
+  return useSyncExternalStore(
+    fontStore.subscribe,
+    fontStore.getInstalledFontFamilies,
+    fontStore.getInstalledFontFamilies,
+  );
+};
+
+export const useFontsLoading = (): boolean => useSyncExternalStore(
+  fontStore.subscribe,
+  fontStore.getIsLoading,
+);
+
+export const refreshFonts = (): Promise<void> => fontStore.refresh();
+
+/**
+ * Initialize fonts eagerly (call at app startup)
+ */
+export const initializeFonts = (): void => {
+  fontStore.initialize();
+};