started working on integrating talespire rolls

package-lock.json

@@ -1996,6 +1996,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.167",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.167.tgz",
@@ -2564,6 +2576,18 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2655,6 +2679,257 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2869,9 +3144,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.5",
+      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.5.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-d/jtm+rdNT8tpXuHY5MMtcbJFBkhXE6593XVR9UoGCH8jSFGci7jGvMGH5RYd5PBJW+00NZQt6gf7CbagJCrhg==",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
       "funding": [
         {

src/components/CharacterSheet.tsx

@@ -11,7 +11,7 @@ import ThemeToggle from './ThemeToggle';
 import LanguageSelector from './LanguageSelector';
 import DSADiceRoller from "./DSADiceRoller.tsx";
 import iconUrl from '/icon.png';
-import './CharacterSheet.css';
+import '../styles/CharacterSheet.css';
 
 // Erweiterte Initial-Daten mit Astralenergie und Zaubern
 const initialCharacter: DSACharacter = {

src/components/LanguageSelector.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import './LanguageSelector.css';
+import '../styles/LanguageSelector.css';
 
 const LanguageSelector: React.FC = () => {
   const { i18n } = useTranslation();

src/components/ThemeToggle.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {FaMoon, FaSun} from "react-icons/fa";
 import {useTheme} from '../contexts/ThemeContext';
+import '../styles/ThemeToggle.css';
 
 const ThemeToggle: React.FC = () => {
     const {theme, toggleTheme} = useTheme();

src/global.d.ts

@@ -0,0 +1,14 @@
+declare global {
+    interface Window {
+        TS: {
+            dice: {
+                putDiceInTray: (rollData: any[], showInTray: boolean) => Promise<string>;
+                onRollResults: (callback: (rollEvent: any) => void) => void;
+                sendDiceResult: (resultGroups: any[], rollId: string) => Promise<void>;
+                evaluateDiceResultsGroup: (group: any) => Promise<number>;
+            };
+        };
+    }
+}
+
+export {};

src/hooks/useTaleSpireDice.ts

@@ -1,44 +1,136 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 
-interface DiceRollResult {
+interface DSAResult {
     dice: number[];
-    total: number;
+    success: boolean;
-    timestamp: number;
+    qualityLevel: number;
+    remainingPoints: number;
+    rollId?: string;
 }
 
-interface TaleSpireAPI {
+interface TrackedRoll {
-    rollDice: (diceString: string, label?: string) => Promise<DiceRollResult>;
+    type: 'dsa' | 'simple';
-    postToChat: (message: string) => void;
+    attributes?: [number, number, number];
-}
+    skillValue?: number;
-
+    modifier?: number;
-// TaleSpire API global verfügbar machen
+    label: string;
-declare global {
+    bonus?: number;
-    interface Window {
-        TS: TaleSpireAPI;
-    }
 }
 
 export const useTaleSpireDice = () => {
     const [isAvailable, setIsAvailable] = useState(false);
+    const [trackedRolls, setTrackedRolls] = useState<Record<string, TrackedRoll>>({});
+    const [rollResults, setRollResults] = useState<Record<string, any>>({});
 
     useEffect(() => {
-        // Prüfen ob TaleSpire API verfügbar ist
+        // Check if TaleSpire API is available
-        setIsAvailable(!!window.TS);
+        const available = typeof window !== 'undefined' &&
+            window.TS &&
+            window.TS.dice;
+        setIsAvailable(available);
+
+        if (available) {
+            // Set up event listener for roll results
+            window.TS.dice.onRollResults((rollEvent: any) => {
+                handleRollResult(rollEvent);
+            });
+        }
     }, []);
 
+    const handleRollResult = useCallback(async (rollEvent: any) => {
+        const rollId = rollEvent.payload.rollId;
+
+        if (!trackedRolls[rollId]) {
+            return; // Not our roll
+        }
+
+        if (rollEvent.kind === "rollResults") {
+            const roll = rollEvent.payload;
+            const rollData = trackedRolls[rollId];
+
+            let result;
+
+            if (rollData.type === 'dsa') {
+                result = await evaluateDSACheck(roll, rollData);
+            } else if (rollData.type === 'simple') {
+                result = await evaluateSimpleRoll(roll, rollData);
+            }
+
+            if (result) {
+                // Send result back to TaleSpire
+                await window.TS.dice.sendDiceResult([result.resultGroup], rollId);
+
+                // Store result locally
+                setRollResults(prev => ({
+                    ...prev,
+                    [rollId]: result
+                }));
+            }
+        } else if (rollEvent.kind === "rollRemoved") {
+            // Clean up when roll is removed
+            setTrackedRolls(prev => {
+                const updated = { ...prev };
+                delete updated[rollId];
+                return updated;
+            });
+        }
+    }, [trackedRolls]);
+
+    const evaluateDSACheck = async (roll: any, rollData: TrackedRoll) => {
+        if (!roll.resultsGroups || roll.resultsGroups.length < 1) {
+            return null;
+        }
+
+        const group = roll.resultsGroups[0];
+        const dice: number[] = [];
+
+        // Extract dice results
+        for (const result of group.results) {
+            for (const die of result.dice) {
+                dice.push(die.result);
+            }
+        }
+
+        // Calculate DSA result
+        const dsaResult = calculateDSAResult(
+            dice,
+            rollData.attributes!,
+            rollData.skillValue!,
+            rollData.modifier!
+        );
+
+        return {
+            ...dsaResult,
+            resultGroup: group,
+            type: 'dsa',
+            label: rollData.label
+        };
+    };
+
+    const evaluateSimpleRoll = async (roll: any, rollData: TrackedRoll) => {
+        if (!roll.resultsGroups || roll.resultsGroups.length < 1) {
+            return null;
+        }
+
+        const group = roll.resultsGroups[0];
+        const total = await window.TS.dice.evaluateDiceResultsGroup(group);
+
+        return {
+            resultGroup: group,
+            total: total + (rollData.bonus || 0),
+            type: 'simple',
+            label: rollData.label
+        };
+    };
+
     const rollDSACheck = async (
         attributes: [number, number, number],
         skillValue: number,
         modifier: number = 0,
         label: string = "DSA 5e Probe"
-    ): Promise<{
+    ): Promise<DSAResult> => {
-        dice: number[];
+        if (!isAvailable) {
-        success: boolean;
+            // Development fallback
-        qualityLevel: number;
-        remainingPoints: number;
-    }> => {
-        if (!window.TS) {
-            // Fallback für Development ohne TaleSpire
             const dice = [
                 Math.floor(Math.random() * 20) + 1,
                 Math.floor(Math.random() * 20) + 1,
@@ -48,40 +140,94 @@ export const useTaleSpireDice = () => {
         }
 
         try {
-            const result = await window.TS.rollDice("3d20", label);
+            const rollData = [{
-            const dsaResult = calculateDSAResult(result.dice, attributes, skillValue, modifier);
+                name: label,
+                roll: "3d20"
+            }];
 
-            // Ergebnis in TaleSpire Chat posten
+            const rollId = await window.TS.dice.putDiceInTray(rollData, true);
-            const chatMessage = formatDSAChatMessage(dsaResult, attributes, skillValue, modifier, label);
+
-            window.TS.postToChat(chatMessage);
+            // Track this roll
+            setTrackedRolls(prev => ({
+                ...prev,
+                [rollId]: {
+                    type: 'dsa',
+                    attributes,
+                    skillValue,
+                    modifier,
+                    label
+                }
+            }));
+
+            // Return a promise that resolves when we get the result
+            return new Promise((resolve) => {
+                const checkResult = () => {
+                    if (rollResults[rollId]) {
+                        resolve({ ...rollResults[rollId], rollId });
+                    } else {
+                        setTimeout(checkResult, 100);
+                    }
+                };
+                checkResult();
+            });
 
-            return dsaResult;
         } catch (error) {
-            console.error('TaleSpire Dice Roll failed:', error);
+            console.error('TaleSpire DSA roll failed:', error);
             throw error;
         }
     };
 
     const rollSimpleDice = async (diceString: string, label?: string) => {
-        if (!window.TS) {
+        if (!isAvailable) {
-            // Fallback für Development
+            // Development fallback
             const sides = parseInt(diceString.split('d')[1]) || 20;
             const count = parseInt(diceString.split('d')[0]) || 1;
             const dice = Array.from({ length: count }, () => Math.floor(Math.random() * sides) + 1);
             return { dice, total: dice.reduce((a, b) => a + b, 0), timestamp: Date.now() };
         }
 
-        return await window.TS.rollDice(diceString, label);
+        try {
+            const rollData = [{
+                name: label || 'Simple Roll',
+                roll: diceString
+            }];
+
+            const rollId = await window.TS.dice.putDiceInTray(rollData, true);
+
+            setTrackedRolls(prev => ({
+                ...prev,
+                [rollId]: {
+                    type: 'simple',
+                    label: label || 'Simple Roll'
+                }
+            }));
+
+            return new Promise((resolve) => {
+                const checkResult = () => {
+                    if (rollResults[rollId]) {
+                        resolve(rollResults[rollId]);
+                    } else {
+                        setTimeout(checkResult, 100);
+                    }
+                };
+                checkResult();
+            });
+
+        } catch (error) {
+            console.error('TaleSpire simple roll failed:', error);
+            throw error;
+        }
     };
 
     return {
         isAvailable,
         rollDSACheck,
-        rollSimpleDice
+        rollSimpleDice,
+        rollResults
     };
 };
 
-// DSA 5e Würfellogik
+// Keep your existing DSA calculation logic
 const calculateDSAResult = (
     dice: number[],
     attributes: [number, number, number],
@@ -91,7 +237,6 @@ const calculateDSAResult = (
     let remainingPoints = skillValue;
     const effectiveAttributes = attributes.map(attr => attr + modifier);
 
-    // Für jeden Würfel prüfen ob er das Attribut überschreitet
     dice.forEach((roll, index) => {
         if (roll > effectiveAttributes[index]) {
             remainingPoints -= (roll - effectiveAttributes[index]);
@@ -108,20 +253,3 @@ const calculateDSAResult = (
         remainingPoints: Math.max(0, remainingPoints)
     };
 };
-
-// Chat-Nachricht formatieren
-const formatDSAChatMessage = (
-    result: any,
-    attributes: [number, number, number],
-    skillValue: number,
-    modifier: number,
-    label: string
-) => {
-    const { dice, success, qualityLevel, remainingPoints } = result;
-    const modifierText = modifier !== 0 ? ` (${modifier > 0 ? '+' : ''}${modifier})` : '';
-
-    return `🎲 **${label}**
-📊 Würfel: ${dice.join(', ')} vs ${attributes.join('/')}${modifierText}
-⚔️ FW: ${skillValue} | Übrig: ${remainingPoints}
-${success ? `✅ **Erfolg** (QL ${qualityLevel})` : '❌ **Fehlschlag**'}`;
-};

src/styles/CharacterSheet.css

@@ -20,10 +20,10 @@
 }
 
 .character-sheet {
-    max-width: 900px;
+    max-width: 599px;
     margin: 0 auto;
     padding: 20px;
-    font-family: 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family: OptimusPrinceps;
     color: var(--ts-color-on-surface, var(--text-color));
     background-color: var(--ts-color-surface, var(--surface-color));
     line-height: 1.6;
@@ -519,39 +519,6 @@ button:active {
     --surface-variant-color: #f9f9f9;
 }
 
-/* Theme Toggle Button */
-.theme-toggle {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    width: 50px;
-    height: 50px;
-    border-radius: 25px;
-    background: var(--ts-color-primary);
-    color: white;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    transition: all 0.3s ease;
-    z-index: 1000;
-}
-
-.theme-toggle:hover {
-    transform: scale(1.1);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
-}
-
-.theme-icon {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 1.5rem;
-}
-
 body {
     background: var(--ts-background-primary, var(--background-color));
     transition: background-color 0.3s ease;

src/styles/LanguageSelector.css

@@ -8,8 +8,8 @@
 }
 
 .language-btn {
-  background-color: var(--bg-secondary);
+  background-color: var(--ts-color-primary, var(--primary-color));
-  color: var(--text-primary);
+  color: var(--ts-color-on-primary, var(--on-primary-color));
   border: 1px solid var(--border-color);
   border-radius: 4px;
   padding: 5px 10px;

src/styles/ThemeToggle.css

@@ -0,0 +1,17 @@
+.theme-toggle {
+    cursor: pointer;
+    display: flex;
+    position: fixed;
+    color: var(--ts-color-secondary);
+    background: var(--ts-background-tertiary);
+    bottom: 10px;
+    right: 10px;
+    padding: 10px;
+    border-radius: 50%;
+    z-index: 1000;
+}
+
+.theme-toggle:hover {
+    color: var(--ts-accent-hover);
+    background: var(--ts-accent-background);
+}

src/styles/talespire-variables.css

@@ -1,16 +0,0 @@
-/* src/styles/talespire-variables.css */
-:root {
-    /* TaleSpire Color Variables */
-    --ts-color-surface: #ffffff;
-    --ts-color-on-surface: #000000;
-    --ts-color-surface-variant: #f9f9f9;
-    --ts-color-primary: #7b2cbf;
-    --ts-color-secondary: #3a0ca3;
-    --ts-color-outline: #cccccc;
-    --ts-color-error: #ff4444;
-
-    /* Add other TaleSpire variables as you discover them */
-    --ts-color-background: #f5f5f5;
-    --ts-color-on-background: #222222;
-    --ts-background-primary: #1a1a1a,
-}

vite.config.ts

@@ -2,7 +2,9 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+      react(),
+  ],
   base: './',
   build: {
     minify: 'esbuild', // ← Statt terser