@svadmin/ui 0.0.6 → 0.4.1

package/src/components/Sidebar.svelte

@@ -3,13 +3,17 @@
   import type { Identity } from '@svadmin/core';
   import { currentPath, navigate } from '@svadmin/core/router';
   import { t, getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
-  import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme } from '@svadmin/core';
+  import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, canAccessAsync } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import * as Tooltip from './ui/tooltip/index.js';
+  import * as DropdownMenu from './ui/dropdown-menu/index.js';
   import { Separator } from './ui/separator/index.js';
+  import { ScrollArea } from './ui/scroll-area/index.js';
+  import * as Collapsible from './ui/collapsible/index.js';
+  import { Avatar } from './ui/avatar/index.js';
   import {
     LayoutDashboard, FileText, Users, Settings, Home,
-    ChevronLeft, ChevronRight, LogOut, Sun, Moon, Languages
+    ChevronLeft, ChevronRight, ChevronDown, LogOut, Sun, Moon, Languages, Palette
   } from 'lucide-svelte';
 
   let { collapsed, identity, title, onToggle, onLogout } = $props<{
@@ -34,17 +38,43 @@
     path: string;
     label: string;
     Icon: typeof LayoutDashboard;
+    group?: string;
   }
 
-  // Use $derived so navItems rebuild when locale changes
-  const navItems: NavItem[] = $derived([
-    { path: '/', label: t('common.home'), Icon: LayoutDashboard },
-    ...resources.map(r => ({
-      path: `/${r.name}`,
-      label: r.label,
-      Icon: iconMap[r.name] ?? Settings,
-    })),
-  ]);
+  interface NavGroup {
+    name: string | null; // null = ungrouped
+    items: NavItem[];
+  }
+
+  // Use effect to build nav items, taking access control into account
+  let navItems = $state.raw<NavItem[]>([]);
+
+  $effect(() => {
+    // Re-run when locale or resources change
+    const localeVal = getLocale();
+
+    Promise.all(resources.map(async (r) => {
+      try {
+        const { can } = await canAccessAsync(r.name, 'list');
+        return { r, can };
+      } catch {
+        return { r, can: false };
+      }
+    })).then(results => {
+      const items: NavItem[] = [{ path: '/', label: t('common.home'), Icon: LayoutDashboard }];
+      for (const { r, can } of results) {
+        if (can) {
+          items.push({
+            path: `/${r.name}`,
+            label: r.label,
+            Icon: iconMap[r.name] ?? Settings,
+            group: r.group,
+          });
+        }
+      }
+      navItems = items;
+    });
+  });
 
   /** Toggle between available locales */
   function toggleLocale() {
@@ -60,19 +90,39 @@
 
   // Track current hash for active state
   let path = $state(currentPath());
-  $effect(() => {
-    function onHash() { path = currentPath(); }
-    window.addEventListener('hashchange', onHash);
-    return () => window.removeEventListener('hashchange', onHash);
-  });
+
+  function onHashChange() { path = currentPath(); }
 
   function isActive(itemPath: string): boolean {
     if (itemPath === '/') return path === '/';
     return path.startsWith(itemPath);
   }
+
+  // Group nav items by group field (null = ungrouped)
+  const navGroups = $derived.by((): NavGroup[] => {
+    const groups: NavGroup[] = [];
+    const groupMap = new Map<string | null, NavItem[]>();
+
+    for (const item of navItems) {
+      const key = item.group ?? null;
+      if (!groupMap.has(key)) {
+        groupMap.set(key, []);
+        groups.push({ name: key, items: groupMap.get(key)! });
+      }
+      groupMap.get(key)!.push(item);
+    }
+
+    return groups;
+  });
+
+  // Track which groups are open
+  let openGroups = $state<Set<string>>(new Set());
 </script>
 
+<svelte:window onhashchange={onHashChange} />
+
 <aside
+  aria-label="Sidebar navigation"
   class="fixed inset-y-0 left-0 z-30 flex flex-col bg-sidebar/80 backdrop-blur-xl border-r border-sidebar-border/50 shadow-xl transition-all duration-300"
   class:w-64={!collapsed}
   class:w-16={collapsed}
@@ -93,73 +143,133 @@
     </Button>
   </div>
 
-  <!-- Nav -->
-  <nav class="flex-1 overflow-y-auto py-4 px-2 space-y-1">
-    {#each navItems as item}
-      {@const active = isActive(item.path)}
-      {#if collapsed}
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            {#snippet child({ props })}
-              <a
-                {...props}
-                href={`#${item.path}`}
-                class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
-                class:bg-sidebar-accent={active}
-                class:text-sidebar-accent-foreground={active}
-                class:text-sidebar-foreground={!active}
-                class:hover:bg-sidebar-accent={!active}
-              >
-                <item.Icon class="h-5 w-5 flex-shrink-0" />
-              </a>
-            {/snippet}
-          </Tooltip.Trigger>
-          <Tooltip.Content side="right">
-            {item.label}
-          </Tooltip.Content>
-        </Tooltip.Root>
+  <ScrollArea class="flex-1">
+  <nav aria-label="Main menu" class="py-4 px-2 space-y-1">
+    {#each navGroups as group}
+      {#if group.name && !collapsed}
+        <!-- Grouped section with Collapsible -->
+        <Collapsible.Root open={openGroups.has(group.name)} onOpenChange={(isOpen) => {
+          const next = new Set(openGroups);
+          if (isOpen) next.add(group.name!); else next.delete(group.name!);
+          openGroups = next;
+        }}>
+          <Collapsible.Trigger
+            class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-xs font-semibold uppercase tracking-wider text-sidebar-foreground/60 hover:bg-sidebar-accent/50 transition-colors"
+          >
+            <span>{group.name}</span>
+            <ChevronDown class="h-3 w-3 transition-transform {openGroups.has(group.name) ? 'rotate-180' : ''}" />
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <div class="mt-1 space-y-0.5 pl-1">
+              {#each group.items as item}
+                {@const active = isActive(item.path)}
+                <a
+                  href={`#${item.path}`}
+                  class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
+                  class:bg-sidebar-accent={active}
+                  class:text-sidebar-accent-foreground={active}
+                  class:text-sidebar-foreground={!active}
+                  class:hover:bg-sidebar-accent={!active}
+                >
+                  <item.Icon class="h-5 w-5 flex-shrink-0" />
+                  <span>{item.label}</span>
+                </a>
+              {/each}
+            </div>
+          </Collapsible.Content>
+        </Collapsible.Root>
       {:else}
-        <a
-          href={`#${item.path}`}
-          class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
-          class:bg-sidebar-accent={active}
-          class:text-sidebar-accent-foreground={active}
-          class:text-sidebar-foreground={!active}
-          class:hover:bg-sidebar-accent={!active}
-        >
-          <item.Icon class="h-5 w-5 flex-shrink-0" />
-          <span>{item.label}</span>
-        </a>
+        <!-- Ungrouped items (flat) -->
+        {#each group.items as item}
+          {@const active = isActive(item.path)}
+          {#if collapsed}
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <a
+                    {...props}
+                    href={`#${item.path}`}
+                    class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
+                    class:bg-sidebar-accent={active}
+                    class:text-sidebar-accent-foreground={active}
+                    class:text-sidebar-foreground={!active}
+                    class:hover:bg-sidebar-accent={!active}
+                  >
+                    <item.Icon class="h-5 w-5 flex-shrink-0" />
+                  </a>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content side="right">
+                {item.label}
+              </Tooltip.Content>
+            </Tooltip.Root>
+          {:else}
+            <a
+              href={`#${item.path}`}
+              class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
+              class:bg-sidebar-accent={active}
+              class:text-sidebar-accent-foreground={active}
+              class:text-sidebar-foreground={!active}
+              class:hover:bg-sidebar-accent={!active}
+            >
+              <item.Icon class="h-5 w-5 flex-shrink-0" />
+              <span>{item.label}</span>
+            </a>
+          {/if}
+        {/each}
       {/if}
     {/each}
   </nav>
+  </ScrollArea>
 
   <!-- Footer -->
   <Separator class="bg-sidebar-border" />
   <div class="p-3 space-y-2">
-    <!-- Color theme picker -->
+    <!-- Color theme picker via DropdownMenu -->
     {#if !collapsed}
-      <div class="flex items-center justify-center gap-1.5 px-2 py-1">
-        {#each colorThemes as ct}
-          <button
-            class="h-5 w-5 rounded-full transition-all duration-200 hover:scale-110 {getColorTheme() === ct.id ? 'ring-2 ring-offset-2 ring-offset-sidebar scale-110' : 'opacity-70 hover:opacity-100'}"
-            style="background-color: {ct.color}; {getColorTheme() === ct.id ? `--tw-ring-color: ${ct.color}` : ''}"
-            title={ct.label}
-            onclick={() => setColorTheme(ct.id)}
-          ></button>
-        {/each}
-      </div>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors h-auto justify-start"
+            >
+              <Palette class="h-4 w-4" />
+              <span class="flex-1 text-left text-xs">{t('common.toggleTheme')}</span>
+              <span
+                class="h-4 w-4 rounded-full ring-1 ring-offset-1 ring-offset-sidebar"
+                style="background-color: {colorThemes.find(c => c.id === getColorTheme())?.color ?? '#3b82f6'}; --tw-ring-color: {colorThemes.find(c => c.id === getColorTheme())?.color ?? '#3b82f6'}"
+              ></span>
+            </Button>
+          {/snippet}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content side="right" align="end" class="w-40">
+          {#each colorThemes as ct}
+            <DropdownMenu.Item onclick={() => setColorTheme(ct.id)} class="gap-2">
+              <span
+                class="h-4 w-4 rounded-full {getColorTheme() === ct.id ? 'ring-2 ring-offset-2 scale-110' : 'opacity-70'}"
+                style="background-color: {ct.color}; {getColorTheme() === ct.id ? `--tw-ring-color: ${ct.color}` : ''}"
+              ></span>
+              {ct.label}
+            </DropdownMenu.Item>
+          {/each}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
     {/if}
 
     {#if !collapsed && identity}
       <div class="flex items-center gap-3 rounded-lg px-2 py-2">
-        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-accent text-sm font-medium text-sidebar-accent-foreground">
-          {identity.name?.charAt(0).toUpperCase() ?? 'U'}
-        </div>
+        <Avatar
+          src={(identity as Record<string, unknown>).avatar as string | undefined}
+          alt={identity.name ?? 'User'}
+          fallback={identity.name?.charAt(0).toUpperCase() ?? 'U'}
+          size="sm"
+        />
         <div class="flex-1 min-w-0">
           <p class="truncate text-sm font-medium text-sidebar-foreground">{identity.name}</p>
         </div>
-        <Button variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground" title="Switch language">
+        <Button variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground" title={t('common.switchLanguage')}>
           <span class="text-xs font-bold">{localeLabel}</span>
         </Button>
         <Button variant="ghost" size="icon-sm" onclick={toggleTheme} class="text-sidebar-foreground" title={t('common.toggleTheme')}>
@@ -174,22 +284,43 @@
         </Button>
       </div>
     {:else if collapsed}
-      <Button variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground" title="Switch language">
-        <span class="text-xs font-bold">{localeLabel}</span>
-      </Button>
-      <Button variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground" title={t('common.toggleTheme')}>
-        {#if getResolvedTheme() === 'dark'}
-          <Sun class="h-5 w-5" />
-        {:else}
-          <Moon class="h-5 w-5" />
-        {/if}
-      </Button>
-      <Button variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground hover:text-destructive" title={t('common.logout')}>
-        <LogOut class="h-5 w-5" />
-      </Button>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground" title={t('common.switchLanguage')}>
+              <span class="text-xs font-bold">{localeLabel}</span>
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content side="right">{t('common.switchLanguage')}</Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground" title={t('common.toggleTheme')}>
+              {#if getResolvedTheme() === 'dark'}
+                <Sun class="h-5 w-5" />
+              {:else}
+                <Moon class="h-5 w-5" />
+              {/if}
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content side="right">{t('common.toggleTheme')}</Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground hover:text-destructive" title={t('common.logout')}>
+              <LogOut class="h-5 w-5" />
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content side="right">{t('common.logout')}</Tooltip.Content>
+      </Tooltip.Root>
     {:else}
       <div class="flex gap-1">
-        <Button variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground" title="Switch language">
+        <Button variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground" title={t('common.switchLanguage')}>
           <span class="text-xs font-bold">{localeLabel}</span>
         </Button>
         <Button variant="ghost" size="icon" onclick={toggleTheme} class="flex-1 text-sidebar-foreground" title={t('common.toggleTheme')}>

package/src/components/StatsCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Loader2 } from 'lucide-svelte';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import type { Snippet } from 'svelte';
 
   type ColorVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info';
   type StyleVariant = 'default' | 'outline' | 'filled';
@@ -21,11 +22,13 @@
   interface Props {
     label: string;
     value: string | number;
-    icon?: typeof Loader2;
+    icon?: import('svelte').Component<{ class?: string }>;
     trend?: { value: number; label?: string };
     loading?: boolean;
     color?: ColorVariant;
     variant?: StyleVariant;
+    /** Optional footer snippet for additional content below the value */
+    footer?: Snippet;
     class?: string;
   }
 
@@ -37,6 +40,7 @@
     loading = false,
     color = 'primary',
     variant = 'default',
+    footer,
     class: className = '',
   }: Props = $props();
 </script>
@@ -50,7 +54,7 @@
   <div class="flex-1 min-w-0">
     <p class="text-sm text-muted-foreground">{label}</p>
     {#if loading}
-      <Loader2 class="mt-1 h-5 w-5 animate-spin text-muted-foreground" />
+      <Skeleton class="mt-1 h-7 w-20" />
     {:else}
       <div class="flex items-baseline gap-2">
         <p class="text-2xl font-bold text-foreground">{value}</p>
@@ -66,5 +70,10 @@
         {/if}
       </div>
     {/if}
+    {#if footer}
+      <div class="mt-2">
+        {@render footer()}
+      </div>
+    {/if}
   </div>
 </div>

package/src/components/StepsForm.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import { useStepsForm } from '@svadmin/core';
+  import type { FieldDefinition } from '@svadmin/core';
+  import { getResource } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import * as Card from './ui/card/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Progress } from './ui/progress/index.js';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import { Save, ArrowLeft, ArrowRight, Check, Loader2 } from 'lucide-svelte';
+  import FieldRenderer from './FieldRenderer.svelte';
+
+  interface StepDef {
+    title: string;
+    fields: string[];
+  }
+
+  interface Props {
+    resourceName: string;
+    id?: string | number;
+    mode?: 'create' | 'edit';
+    steps: StepDef[];
+  }
+
+  let { resourceName, id, mode = 'create', steps }: Props = $props();
+
+  const resource = getResource(resourceName);
+  const primaryKey = resource.primaryKey ?? 'id';
+
+  const stepsForm = useStepsForm({
+    resource: resourceName,
+    action: mode,
+    id,
+  });
+
+  const { currentStep, next, prev, gotoStep } = stepsForm;
+
+  const totalSteps = steps.length;
+  const progressValue = $derived(((currentStep + 1) / totalSteps) * 100);
+  const isLastStep = $derived(currentStep >= totalSteps - 1);
+
+  // Get fields for current step
+  const currentFields = $derived(
+    steps[currentStep]?.fields
+      .map(key => resource.fields.find(f => f.key === key))
+      .filter((f): f is FieldDefinition => f != null && f.key !== primaryKey) ?? []
+  );
+
+  function handleSubmit() {
+    if (!isLastStep) {
+      next();
+      return;
+    }
+    stepsForm.onFinish(stepsForm.formValues);
+  }
+</script>
+
+<div class="space-y-6">
+  <!-- Step indicators -->
+  <div class="space-y-3">
+    <div class="flex items-center justify-between text-sm">
+      {#each steps as step, i}
+        <Button
+          variant="ghost"
+          type="button"
+          class="flex items-center gap-2 transition-colors h-auto py-1 px-2 {i === currentStep ? 'text-primary font-semibold' : 'text-muted-foreground'}"
+          onclick={() => gotoStep(i)}
+        >
+          <span
+            class="flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium transition-colors"
+            class:bg-primary={i <= currentStep}
+            class:text-primary-foreground={i <= currentStep}
+            class:bg-muted={i > currentStep}
+            class:text-muted-foreground={i > currentStep}
+          >
+            {#if i < currentStep}
+              <Check class="h-3.5 w-3.5" />
+            {:else}
+              {i + 1}
+            {/if}
+          </span>
+          <span class="hidden sm:inline">{step.title}</span>
+        </Button>
+        {#if i < steps.length - 1}
+          <div class="flex-1 mx-2 h-px bg-border" class:bg-primary={i < currentStep}></div>
+        {/if}
+      {/each}
+    </div>
+    <Progress value={progressValue} class="h-1.5" />
+  </div>
+
+  <!-- Step content -->
+  <Card.Root>
+    <Card.CardHeader>
+      <Card.CardTitle>{steps[currentStep]?.title ?? ''}</Card.CardTitle>
+      <Badge variant="outline" class="w-fit">
+        {t('common.step')} {currentStep + 1} / {totalSteps}
+      </Badge>
+    </Card.CardHeader>
+    <Card.CardContent>
+      {#key currentStep}
+        <form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} in:fly={{ x: 30, duration: 250 }}>
+        {#each currentFields as field}
+          <FieldRenderer
+            {field}
+            value={stepsForm.formValues[field.key]}
+            onchange={(v) => stepsForm.setFieldValue(field.key, v)}
+          />
+        {/each}
+
+        <div class="flex items-center justify-between pt-4">
+          <Button
+            type="button"
+            variant="outline"
+            onclick={() => currentStep === 0 ? navigate(`/${resourceName}`) : prev()}
+          >
+            <ArrowLeft class="h-4 w-4" data-icon="inline-start" />
+            {currentStep === 0 ? t('common.cancel') : t('common.back')}
+          </Button>
+
+          <Button type="submit" disabled={stepsForm.formLoading}>
+            {#if stepsForm.formLoading}
+              <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
+            {:else if isLastStep}
+              <Save class="h-4 w-4" data-icon="inline-start" />
+            {:else}
+              <ArrowRight class="h-4 w-4" data-icon="inline-start" />
+            {/if}
+            {isLastStep ? t('common.save') : t('common.next')}
+          </Button>
+        </div>
+      </form>
+      {/key}
+    </Card.CardContent>
+  </Card.Root>
+</div>

package/src/components/ThemedTitle.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { getAdminOptions } from '@svadmin/core';
+
+  let {
+    collapsed = false,
+    icon,
+    text,
+    wrapperStyles = '',
+  } = $props<{
+    collapsed?: boolean;
+    icon?: string;
+    text?: string;
+    wrapperStyles?: string;
+  }>();
+
+  const adminOptions = getAdminOptions();
+  const titleText = $derived(text ?? adminOptions.title?.text ?? 'Admin');
+  const titleIcon = $derived(icon ?? adminOptions.title?.icon);
+</script>
+
+<div class="flex items-center gap-2 {wrapperStyles}">
+  {#if titleIcon}
+    <img src={titleIcon} alt="" class="h-6 w-6 shrink-0" />
+  {:else}
+    <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold">
+      {titleText.charAt(0).toUpperCase()}
+    </div>
+  {/if}
+  {#if !collapsed}
+    <span class="text-lg font-semibold text-foreground truncate">{titleText}</span>
+  {/if}
+</div>

package/src/components/Toast.svelte

@@ -1,48 +1,19 @@
 <script lang="ts">
-  import { getToasts, removeToast } from '@svadmin/core/toast';
-  import { Button } from './ui/button/index.js';
-  import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-svelte';
+  import { Toaster } from 'svelte-sonner';
+  import { getResolvedTheme } from '@svadmin/core';
 
-  const iconMap = {
-    success: CheckCircle,
-    error: AlertCircle,
-    info: Info,
-    warning: AlertTriangle,
-  };
-  const colorMap = {
-    success: 'bg-green-50 border-green-200 text-green-800',
-    error: 'bg-red-50 border-red-200 text-red-800',
-    info: 'bg-blue-50 border-blue-200 text-blue-800',
-    warning: 'bg-amber-50 border-amber-200 text-amber-800',
-  };
-
-  const toasts = $derived(getToasts());
+  const theme = $derived(getResolvedTheme() === 'dark' ? 'dark' : 'light');
 </script>
 
-{#if toasts.length > 0}
-  <div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
-    {#each toasts as t (t.id)}
-      {@const Icon = iconMap[t.type]}
-      <div
-        class="flex items-start gap-3 rounded-lg border px-4 py-3 shadow-lg animate-slide-in {colorMap[t.type]}"
-        role="alert"
-      >
-        <Icon class="h-5 w-5 flex-shrink-0 mt-0.5" />
-        <p class="flex-1 text-sm font-medium">{t.message}</p>
-        <Button variant="ghost" size="icon-xs" onclick={() => removeToast(t.id)} class="flex-shrink-0 -mr-2 -mt-1">
-          <X class="h-4 w-4" />
-        </Button>
-      </div>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  @keyframes slide-in {
-    from { transform: translateX(100%); opacity: 0; }
-    to { transform: translateX(0); opacity: 1; }
-  }
-  .animate-slide-in {
-    animation: slide-in 0.2s ease-out;
-  }
-</style>
+<Toaster
+  position="top-right"
+  richColors
+  closeButton
+  expand
+  {theme}
+  toastOptions={{
+    classes: {
+      toast: 'font-sans',
+    },
+  }}
+/>