@tokentop/ttop 0.2.2 → 0.3.0

package/src/tui/components/Sparkline.tsx

@@ -1,5 +1,5 @@
-import { useColors } from '../contexts/ThemeContext.tsx';
-import type { SparklineStyle, SparklineOrientation } from '@/config/schema.ts';
+import type { SparklineOrientation, SparklineStyle } from "@/config/schema.ts";
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 export interface SparklineProps {
   data: number[];
@@ -12,29 +12,29 @@ export interface SparklineProps {
   showBaseline?: boolean;
 }
 
-const BLOCK_CHARS_UP = ['▁', '▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
-const BLOCK_CHARS_DOWN = ['▔', '▔', '🬂', '🬎', '▀', '🬩', '🬷', '🮂', '█'];
+const BLOCK_CHARS_UP = ["▁", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
+const BLOCK_CHARS_DOWN = ["▔", "▔", "🬂", "🬎", "▀", "🬩", "🬷", "🮂", "█"];
 
 function valueToBraille(
-  left: number, 
-  right: number, 
+  left: number,
+  right: number,
   orientation: SparklineOrientation,
-  includeBaseline: boolean
+  includeBaseline: boolean,
 ): string {
   const leftDots = Math.min(4, Math.max(0, Math.floor(left)));
   const rightDots = Math.min(4, Math.max(0, Math.floor(right)));
-  
+
   let code = 0x2800;
-  
-  if (orientation === 'up') {
+
+  if (orientation === "up") {
     // Fill from bottom to top: dot7, dot3, dot2, dot1 (left) / dot8, dot6, dot5, dot4 (right)
     const leftBitsUp = [0x40, 0x04, 0x02, 0x01];
     const rightBitsUp = [0x80, 0x20, 0x10, 0x08];
-    
+
     if (includeBaseline) {
       code |= 0x40 | 0x80; // Always include bottom row when baseline is on
     }
-    
+
     for (let i = 0; i < leftDots; i++) {
       code |= leftBitsUp[i]!;
     }
@@ -45,11 +45,11 @@ function valueToBraille(
     // Fill from top to bottom: dot1, dot2, dot3, dot7 (left) / dot4, dot5, dot6, dot8 (right)
     const leftBitsDown = [0x01, 0x02, 0x04, 0x40];
     const rightBitsDown = [0x08, 0x10, 0x20, 0x80];
-    
+
     if (includeBaseline) {
       code |= 0x01 | 0x08; // Always include top row when baseline is on
     }
-    
+
     for (let i = 0; i < leftDots; i++) {
       code |= leftBitsDown[i]!;
     }
@@ -57,18 +57,18 @@ function valueToBraille(
       code |= rightBitsDown[i]!;
     }
   }
-  
+
   return String.fromCharCode(code);
 }
 
 function getBaselineBraille(orientation: SparklineOrientation): string {
-  return orientation === 'up' ? '⣀' : '⠉';
+  return orientation === "up" ? "⣀" : "⠉";
 }
 
 function getValueColor(
   rawValue: number,
   thresholds: { warning: number; error: number },
-  colors: { success: string; warning: string; error: string; textSubtle: string }
+  colors: { success: string; warning: string; error: string; textSubtle: string },
 ): string {
   if (rawValue <= 0) return colors.textSubtle;
   if (rawValue >= thresholds.error) return colors.error;
@@ -76,105 +76,117 @@ function getValueColor(
   return colors.success;
 }
 
-export function Sparkline({ 
-  data, 
-  width = 60, 
-  label, 
+export function Sparkline({
+  data,
+  width = 60,
+  label,
   fixedMax = 2000,
   thresholds = { warning: 800, error: 2000 },
-  style = 'braille',
-  orientation = 'up',
+  style = "braille",
+  orientation = "up",
   showBaseline = true,
 }: SparklineProps) {
   const colors = useColors();
-  
+
   const peak = Math.max(...data, 0);
   const sqrtMax = Math.sqrt(fixedMax);
-  
+
   const normalizeValue = (v: number): number => {
     if (v <= 0) return 0;
     const sqrtValue = Math.sqrt(Math.min(v, fixedMax));
-    return (sqrtValue / sqrtMax) * (style === 'braille' ? 4 : 8);
+    return (sqrtValue / sqrtMax) * (style === "braille" ? 4 : 8);
   };
-  
-  const peakLabel = peak >= 1000 ? `${(peak/1000).toFixed(1)}k` : `${Math.round(peak)}`;
 
-  if (style === 'braille') {
+  const peakLabel = peak >= 1000 ? `${(peak / 1000).toFixed(1)}k` : `${Math.round(peak)}`;
+
+  if (style === "braille") {
     const effectiveWidth = width * 2;
     const displayData = data.slice(-effectiveWidth);
     const charCount = Math.ceil(displayData.length / 2);
     const padding = width - charCount;
-    
+
     const groups: { color: string; chars: string }[] = [];
     const baselineChar = getBaselineBraille(orientation);
-    
+
     for (let i = 0; i < displayData.length; i += 2) {
       const leftRaw = displayData[i] ?? 0;
       const rightRaw = displayData[i + 1] ?? leftRaw;
-      
+
       const leftNorm = normalizeValue(leftRaw);
       const rightNorm = normalizeValue(rightRaw);
-      
+
       const dominantRaw = Math.max(leftRaw, rightRaw);
       const color = getValueColor(dominantRaw, thresholds, colors);
-      
+
       let char: string;
       if (dominantRaw <= 0) {
-        char = showBaseline ? baselineChar : ' ';
+        char = showBaseline ? baselineChar : " ";
       } else {
         char = valueToBraille(leftNorm, rightNorm, orientation, showBaseline);
       }
-      
+
       if (groups.length > 0 && groups[groups.length - 1]!.color === color) {
         groups[groups.length - 1]!.chars += char;
       } else {
         groups.push({ color, chars: char });
       }
     }
-    
+
     return (
       <box flexDirection="column">
         <text>
-          {padding > 0 && <span>{' '.repeat(padding)}</span>}
+          {padding > 0 && <span>{" ".repeat(padding)}</span>}
           {groups.map((group, i) => (
-            <span key={i} fg={group.color}>{group.chars}</span>
+            <span key={i} fg={group.color}>
+              {group.chars}
+            </span>
           ))}
         </text>
-        {label && <text fg={colors.textMuted}>{label} peak:{peakLabel}</text>}
+        {label && (
+          <text fg={colors.textMuted}>
+            {label} peak:{peakLabel}
+          </text>
+        )}
       </box>
     );
   }
-  
-  const blockChars = orientation === 'up' ? BLOCK_CHARS_UP : BLOCK_CHARS_DOWN;
-  const baselineChar = showBaseline ? (orientation === 'up' ? '▁' : '▔') : '·';
-  
+
+  const blockChars = orientation === "up" ? BLOCK_CHARS_UP : BLOCK_CHARS_DOWN;
+  const baselineChar = showBaseline ? (orientation === "up" ? "▁" : "▔") : "·";
+
   const displayData = data.slice(-width);
   const padding = width - displayData.length;
-  
+
   const groups: { color: string; chars: string }[] = [];
   for (let i = 0; i < displayData.length; i++) {
     const rawValue = displayData[i] ?? 0;
     const v = Math.round(normalizeValue(rawValue));
-    
+
     const color = getValueColor(rawValue, thresholds, colors);
-    const char = rawValue <= 0 ? baselineChar : (blockChars[v] ?? blockChars[1] ?? '▁');
-    
+    const char = rawValue <= 0 ? baselineChar : (blockChars[v] ?? blockChars[1] ?? "▁");
+
     if (groups.length > 0 && groups[groups.length - 1]!.color === color) {
       groups[groups.length - 1]!.chars += char;
     } else {
       groups.push({ color, chars: char });
     }
   }
-  
+
   return (
     <box flexDirection="column">
       <text>
-        {padding > 0 && <span>{' '.repeat(padding)}</span>}
+        {padding > 0 && <span>{" ".repeat(padding)}</span>}
         {groups.map((group, i) => (
-          <span key={i} fg={group.color}>{group.chars}</span>
+          <span key={i} fg={group.color}>
+            {group.chars}
+          </span>
         ))}
       </text>
-      {label && <text fg={colors.textMuted}>{label} peak:{peakLabel}</text>}
+      {label && (
+        <text fg={colors.textMuted}>
+          {label} peak:{peakLabel}
+        </text>
+      )}
     </box>
   );
 }

package/src/tui/components/Spinner.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from "react";
 
-const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const FRAME_INTERVAL = 80;
 
 interface SpinnerProps {
@@ -32,5 +32,5 @@ export function useSpinner(): string {
     return () => clearInterval(interval);
   }, []);
 
-  return SPINNER_FRAMES[frameIndex] ?? '⠋';
+  return SPINNER_FRAMES[frameIndex] ?? "⠋";
 }

package/src/tui/components/StatusBar.tsx

@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
-import { useTerminalDimensions } from '@opentui/react';
-import { useColors } from '../contexts/ThemeContext.tsx';
-import { useTimeWindow } from '../contexts/TimeWindowContext.tsx';
+import { useTerminalDimensions } from "@opentui/react";
+import { useEffect, useState } from "react";
+import { useColors } from "../contexts/ThemeContext.tsx";
+import { useTimeWindow } from "../contexts/TimeWindowContext.tsx";
 
 interface StatusBarProps {
   lastRefresh?: number;
@@ -26,25 +26,25 @@ export function StatusBar({ lastRefresh, nextRefresh, demoMode = false }: Status
   const isNarrow = termWidth < 100;
 
   const lastRefreshText = lastRefresh
-    ? (isNarrow ? formatTimeShort(lastRefresh) : formatTime(lastRefresh))
-    : '';
+    ? isNarrow
+      ? formatTimeShort(lastRefresh)
+      : formatTime(lastRefresh)
+    : "";
 
-  const nextRefreshText = nextRefresh
-    ? `${formatCountdown(nextRefresh)}`
-    : '';
+  const nextRefreshText = nextRefresh ? `${formatCountdown(nextRefresh)}` : "";
 
   const timeLabel = timeWindow.toUpperCase();
 
   return (
-     <box
-       flexDirection="row"
-       justifyContent="space-between"
-       paddingX={1}
-       backgroundColor={colors.foreground}
-       flexShrink={0}
-       height={1}
-       overflow="hidden"
-     >
+    <box
+      flexDirection="row"
+      justifyContent="space-between"
+      paddingX={1}
+      backgroundColor={colors.foreground}
+      flexShrink={0}
+      height={1}
+      overflow="hidden"
+    >
       <box flexDirection="row" gap={2} overflow="hidden">
         <text fg={colors.textSubtle}>1-4 views</text>
         <text fg={colors.text}>
@@ -55,7 +55,7 @@ export function StatusBar({ lastRefresh, nextRefresh, demoMode = false }: Status
         <text fg={colors.textSubtle}>? help</text>
       </box>
       <box flexDirection="row" gap={2} overflow="hidden">
-        {demoMode && <text fg={colors.warning}>{isNarrow ? 'DEMO' : 'DEMO MODE'}</text>}
+        {demoMode && <text fg={colors.warning}>{isNarrow ? "DEMO" : "DEMO MODE"}</text>}
         {lastRefreshText && <text fg={colors.textSubtle}>{lastRefreshText}</text>}
         {nextRefreshText && <text fg={colors.textSubtle}>{nextRefreshText}</text>}
       </box>
@@ -65,19 +65,19 @@ export function StatusBar({ lastRefresh, nextRefresh, demoMode = false }: Status
 
 function formatTimeShort(timestamp: number): string {
   const date = new Date(timestamp);
-  return date.toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit',
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
     hour12: false,
   });
 }
 
 function formatTime(timestamp: number): string {
   const date = new Date(timestamp);
-  return date.toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
     hour12: false,
   });
 }
@@ -86,7 +86,7 @@ function formatCountdown(timestamp: number): string {
   const now = Date.now();
   const diff = timestamp - now;
 
-  if (diff <= 0) return 'now';
+  if (diff <= 0) return "now";
 
   const seconds = Math.floor(diff / 1000);
   if (seconds < 60) return `${seconds}s`;

package/src/tui/components/ThemePicker.tsx

@@ -1,7 +1,7 @@
-import { useState, useMemo, useEffect } from 'react';
-import { useKeyboard } from '@opentui/react';
-import { useColors } from '../contexts/ThemeContext.tsx';
-import type { ThemePlugin, ColorSchemePreference } from '@/plugins/types/theme.ts';
+import { useKeyboard } from "@opentui/react";
+import { useEffect, useMemo, useState } from "react";
+import type { ColorSchemePreference, ThemePlugin } from "@/plugins/types/theme.ts";
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 interface ThemePickerProps {
   themes: ThemePlugin[];
@@ -12,9 +12,7 @@ interface ThemePickerProps {
   onCancel: () => void;
 }
 
-type ThemeItem = 
-  | { type: 'header'; label: string }
-  | { type: 'theme'; theme: ThemePlugin };
+type ThemeItem = { type: "header"; label: string } | { type: "theme"; theme: ThemePlugin };
 
 export function ThemePicker({
   themes,
@@ -26,37 +24,39 @@ export function ThemePicker({
 }: ThemePickerProps) {
   const colors = useColors();
   const [scheme, setScheme] = useState<ColorSchemePreference>(currentScheme);
-  const [focusPane, setFocusPane] = useState<'scheme' | 'list'>('list');
+  const [focusPane, setFocusPane] = useState<"scheme" | "list">("list");
   const [focusedIndex, setFocusedIndex] = useState(0);
 
   // Filter and group themes based on selected scheme
   const listItems = useMemo<ThemeItem[]>(() => {
-    const darkThemes = themes.filter(t => t.colorScheme === 'dark');
-    const lightThemes = themes.filter(t => t.colorScheme === 'light');
+    const darkThemes = themes.filter((t) => t.colorScheme === "dark");
+    const lightThemes = themes.filter((t) => t.colorScheme === "light");
 
-    if (scheme === 'dark') {
-      return darkThemes.map(t => ({ type: 'theme', theme: t }));
+    if (scheme === "dark") {
+      return darkThemes.map((t) => ({ type: "theme", theme: t }));
     }
-    if (scheme === 'light') {
-      return lightThemes.map(t => ({ type: 'theme', theme: t }));
+    if (scheme === "light") {
+      return lightThemes.map((t) => ({ type: "theme", theme: t }));
     }
     // Auto: Show both with headers
     return [
-      { type: 'header', label: 'DARK' },
-      ...darkThemes.map(t => ({ type: 'theme', theme: t } as const)),
-      { type: 'header', label: 'LIGHT' },
-      ...lightThemes.map(t => ({ type: 'theme', theme: t } as const)),
+      { type: "header", label: "DARK" },
+      ...darkThemes.map((t) => ({ type: "theme", theme: t }) as const),
+      { type: "header", label: "LIGHT" },
+      ...lightThemes.map((t) => ({ type: "theme", theme: t }) as const),
     ];
   }, [themes, scheme]);
 
   // Find initial index for current theme
   useEffect(() => {
-    const idx = listItems.findIndex(item => item.type === 'theme' && item.theme.id === currentThemeId);
+    const idx = listItems.findIndex(
+      (item) => item.type === "theme" && item.theme.id === currentThemeId,
+    );
     if (idx >= 0) {
       setFocusedIndex(idx);
     } else {
       // If not found (e.g. switched scheme and current theme is hidden), select first theme
-      const firstThemeIdx = listItems.findIndex(item => item.type === 'theme');
+      const firstThemeIdx = listItems.findIndex((item) => item.type === "theme");
       if (firstThemeIdx >= 0) setFocusedIndex(firstThemeIdx);
     }
   }, [currentThemeId, listItems]);
@@ -75,71 +75,71 @@ export function ThemePicker({
   const hasMoreBelow = scrollOffset + visibleCount < listItems.length;
 
   useKeyboard((key) => {
-    if (key.name === 'escape') {
+    if (key.name === "escape") {
       onCancel();
       return;
     }
 
-    if (key.name === 'tab') {
-      setFocusPane(p => p === 'scheme' ? 'list' : 'scheme');
+    if (key.name === "tab") {
+      setFocusPane((p) => (p === "scheme" ? "list" : "scheme"));
       return;
     }
 
-    if (focusPane === 'scheme') {
-      if (key.name === 'left' || key.name === 'h' || key.name === 'right' || key.name === 'l') {
-        const schemes: ColorSchemePreference[] = ['auto', 'dark', 'light'];
+    if (focusPane === "scheme") {
+      if (key.name === "left" || key.name === "h" || key.name === "right" || key.name === "l") {
+        const schemes: ColorSchemePreference[] = ["auto", "dark", "light"];
         const currentIdx = schemes.indexOf(scheme);
-        const direction = (key.name === 'left' || key.name === 'h') ? -1 : 1;
+        const direction = key.name === "left" || key.name === "h" ? -1 : 1;
         const nextIdx = (currentIdx + direction + schemes.length) % schemes.length;
         const newScheme = schemes[nextIdx]!;
         setScheme(newScheme);
-        
+
         // Preview first theme of new scheme
-        const darkThemes = themes.filter(t => t.colorScheme === 'dark');
-        const lightThemes = themes.filter(t => t.colorScheme === 'light');
+        const darkThemes = themes.filter((t) => t.colorScheme === "dark");
+        const lightThemes = themes.filter((t) => t.colorScheme === "light");
         let nextTheme: ThemePlugin | undefined;
-        
-        if (newScheme === 'dark') nextTheme = darkThemes[0];
-        else if (newScheme === 'light') nextTheme = lightThemes[0];
+
+        if (newScheme === "dark") nextTheme = darkThemes[0];
+        else if (newScheme === "light") nextTheme = lightThemes[0];
         else nextTheme = darkThemes[0]; // Auto defaults to dark usually
-        
+
         if (nextTheme) {
-           onPreview(nextTheme);
+          onPreview(nextTheme);
         }
-      } else if (key.name === 'down' || key.name === 'j') {
-        setFocusPane('list');
+      } else if (key.name === "down" || key.name === "j") {
+        setFocusPane("list");
       }
       return;
     }
 
-    if (focusPane === 'list') {
-      if (key.name === 'up' || key.name === 'k') {
+    if (focusPane === "list") {
+      if (key.name === "up" || key.name === "k") {
         let nextIdx = focusedIndex - 1;
         // Skip headers going up
-        while (nextIdx >= 0 && listItems[nextIdx]?.type === 'header') {
+        while (nextIdx >= 0 && listItems[nextIdx]?.type === "header") {
           nextIdx--;
         }
         if (nextIdx >= 0) {
           setFocusedIndex(nextIdx);
           const item = listItems[nextIdx];
-          if (item?.type === 'theme') onPreview(item.theme);
+          if (item?.type === "theme") onPreview(item.theme);
         } else {
-          setFocusPane('scheme');
+          setFocusPane("scheme");
         }
-      } else if (key.name === 'down' || key.name === 'j') {
+      } else if (key.name === "down" || key.name === "j") {
         let nextIdx = focusedIndex + 1;
         // Skip headers going down
-        while (nextIdx < listItems.length && listItems[nextIdx]?.type === 'header') {
+        while (nextIdx < listItems.length && listItems[nextIdx]?.type === "header") {
           nextIdx++;
         }
         if (nextIdx < listItems.length) {
           setFocusedIndex(nextIdx);
           const item = listItems[nextIdx];
-          if (item?.type === 'theme') onPreview(item.theme);
+          if (item?.type === "theme") onPreview(item.theme);
         }
-      } else if (key.name === 'return') {
+      } else if (key.name === "return") {
         const item = listItems[focusedIndex];
-        if (item?.type === 'theme') {
+        if (item?.type === "theme") {
           onSelect(item.theme.id, scheme);
         }
       }
@@ -150,18 +150,18 @@ export function ThemePicker({
     <box flexDirection="column" flexGrow={1} padding={1}>
       {/* Section 1: Scheme Selector */}
       <box flexDirection="row" justifyContent="center" marginBottom={1} height={1}>
-        {(['auto', 'dark', 'light'] as const).map((s) => {
+        {(["auto", "dark", "light"] as const).map((s) => {
           const isActive = scheme === s;
-          const isFocused = focusPane === 'scheme';
+          const isFocused = focusPane === "scheme";
           return (
             <box key={s} marginRight={1}>
               <text
                 {...(isActive ? { bg: colors.primary } : {})}
                 fg={isActive ? colors.background : isFocused ? colors.text : colors.textMuted}
               >
-                {isFocused && isActive ? '▸ ' : '  '}
+                {isFocused && isActive ? "▸ " : "  "}
                 {s.charAt(0).toUpperCase() + s.slice(1)}
-                {isFocused && isActive ? ' ◂' : '  '}
+                {isFocused && isActive ? " ◂" : "  "}
               </text>
             </box>
           );
@@ -174,19 +174,22 @@ export function ThemePicker({
           <text fg={colors.textMuted}>THEMES</text>
           {(hasMoreAbove || hasMoreBelow) && (
             <text fg={colors.textSubtle}>
-              {hasMoreAbove ? '▲' : ' '}{hasMoreBelow ? '▼' : ' '}
+              {hasMoreAbove ? "▲" : " "}
+              {hasMoreBelow ? "▼" : " "}
             </text>
           )}
         </box>
 
         {visibleItems.map((item, idx) => {
           const realIndex = scrollOffset + idx;
-          const isFocused = realIndex === focusedIndex && focusPane === 'list';
-          
-          if (item.type === 'header') {
+          const isFocused = realIndex === focusedIndex && focusPane === "list";
+
+          if (item.type === "header") {
             return (
               <box key={`header-${realIndex}`} height={1} marginTop={1} marginBottom={0}>
-                <text fg={colors.textSubtle}><strong>{item.label}</strong></text>
+                <text fg={colors.textSubtle}>
+                  <strong>{item.label}</strong>
+                </text>
               </box>
             );
           }
@@ -203,21 +206,19 @@ export function ThemePicker({
               {...(isFocused ? { backgroundColor: colors.primary } : {})}
             >
               <text fg={isFocused ? colors.background : colors.primary}>
-                {isFocused ? '▸ ' : '  '}
+                {isFocused ? "▸ " : "  "}
               </text>
-              
+
               <box width={20}>
-                <text fg={isFocused ? colors.background : colors.text}>
-                  {theme.name}
-                </text>
+                <text fg={isFocused ? colors.background : colors.text}>{theme.name}</text>
               </box>
 
               <box flexDirection="row" gap={1}>
-                <text bg={theme.colors.background}>  </text>
-                <text bg={theme.colors.primary}>  </text>
-                <text bg={theme.colors.secondary}>  </text>
-                <text bg={theme.colors.success}>  </text>
-                <text bg={theme.colors.error}>  </text>
+                <text bg={theme.colors.background}> </text>
+                <text bg={theme.colors.primary}> </text>
+                <text bg={theme.colors.secondary}> </text>
+                <text bg={theme.colors.success}> </text>
+                <text bg={theme.colors.error}> </text>
               </box>
 
               {isActive && (

package/src/tui/components/Toast.tsx

@@ -1,14 +1,14 @@
-import { useState, useEffect } from 'react';
-import { useColors } from '../contexts/ThemeContext.tsx';
+import { useEffect, useState } from "react";
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 interface ToastProps {
   message: string;
   duration?: number;
   onDismiss: () => void;
-  type?: 'info' | 'success' | 'warning' | 'error';
+  type?: "info" | "success" | "warning" | "error";
 }
 
-export function Toast({ message, duration = 2000, onDismiss, type = 'success' }: ToastProps) {
+export function Toast({ message, duration = 2000, onDismiss, type = "success" }: ToastProps) {
   const colors = useColors();
 
   useEffect(() => {
@@ -43,13 +43,16 @@ export function Toast({ message, duration = 2000, onDismiss, type = 'success' }:
 
 interface ToastState {
   message: string;
-  type: 'info' | 'success' | 'warning' | 'error';
+  type: "info" | "success" | "warning" | "error";
 }
 
 export function useToast() {
   const [toast, setToast] = useState<ToastState | null>(null);
 
-  const showToast = (message: string, type: 'info' | 'success' | 'warning' | 'error' = 'success') => {
+  const showToast = (
+    message: string,
+    type: "info" | "success" | "warning" | "error" = "success",
+  ) => {
     setToast({ message, type });
   };