fix: resolve text settings not applied

src/routes/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import type { Panel } from "$lib/types/panel";
+  import type { Panel, TextItem } from "$lib/types/panel";
   import { onMount } from "svelte";
   import { exportService } from "../services/exportService";
   import { imageService } from "../services/imageService";
   import { panelService } from "../services/panelService";
+  import { textSettingsStore } from "../stores/panelStore";
 
   import AppContainer from "../components/layout/AppContainer.svelte";
 
@@ -12,6 +13,38 @@
   let texts = $state<Array<{ id: string; text: string }>>([]);
   let backgroundImage = $state<string | undefined>(undefined);
 
+  // Create a derived store for text settings to avoid cyclic dependencies
+  let textSettings = $derived($textSettingsStore);
+
+  // Listen for text settings changes and update all panels
+  let previousSettings = $state<string>("");
+
+  $effect(() => {
+    // Only depend on the derived settings value
+    const currentSettings = textSettings;
+    const settingsString = JSON.stringify(currentSettings);
+
+    // Only update if settings actually changed
+    if (settingsString !== previousSettings) {
+      console.log("[SETTINGS] Applying text settings to all panels:", currentSettings);
+
+      // Update panels with new settings
+      const updatedPanels = panels.map((panel) => ({
+        ...panel,
+        text: { ...panel.text, ...currentSettings },
+      }));
+
+      // Use a microtask to avoid synchronous update issues
+      Promise.resolve().then(() => {
+        if (panels.length > 0) {
+          panels = updatedPanels;
+        }
+      });
+
+      previousSettings = settingsString;
+    }
+  });
+
   onMount(async () => {
     // Initialize with default texts for common Twitch panels
     console.log("[INIT] Creating default texts...");
@@ -62,9 +95,9 @@
     imageService.handleCropCancel();
   }
 
-  function handleAddText(text: string) {
+  function handleAddText(text: string, settings?: Partial<TextItem>) {
     texts = panelService.addText(texts, text);
-    panels = panelService.updatePanelsFromTexts(texts, panels, backgroundImage!);
+    panels = panelService.updatePanelsFromTexts(texts, panels, backgroundImage!, settings);
   }
 
   function handleUpdateText(id: string, newText: string) {