Alert experimental

<script lang="ts">
  import * as Alert from '@odbd/svelte/alert'

  const items = [
    {
      variant: 'info',
      icon: 'ⓘ',
      title: '안내',
      body: '새 토큰이 추가되면 /tokens 페이지에 자동 반영돼요.',
    },
    {
      variant: 'success',
      icon: '✓',
      title: '저장 완료',
      body: '변경 내용이 모든 기기에 동기화됐어요.',
    },
    {
      variant: 'warning',
      icon: '!',
      title: '확인 필요',
      body: '이 토큰을 바꾸면 대비 비율을 다시 확인해야 해요.',
    },
    {
      variant: 'danger',
      icon: '✕',
      title: '배포 실패',
      body: '빌드 게이트가 실패해 배포가 중단됐어요.',
    },
  ] as const
</script>

<div class="preview-stack">
  {#each items as item}
    <Alert.Root variant={item.variant}>
      <Alert.Icon>{item.icon}</Alert.Icon>
      <Alert.Title>{item.title}</Alert.Title>
      <Alert.Description>{item.body}</Alert.Description>
    </Alert.Root>
  {/each}
</div>