Toast experimental

<script lang="ts">
  import * as Toast from '@odbd/svelte/toast'
  import { createToaster } from '@odbd/svelte/toast'

  const toaster = createToaster({
    placement: 'bottom-end',
    overlap: true,
    gap: 12,
    offsets: '1rem',
    // exit glide는 --opacity/--y 전환(--odbd-motion-gentle)이 그리므로 그보다 길게 유지
    removeDelay: 400,
  })

  function showSavedToast() {
    toaster.success({
      title: savedTitle,
      description: savedDescription,
      closable: true,
      action: {
        label: '기록 보기',
        onClick: showHistoryToast,
      },
    })
  }

  function showHistoryToast() {
    toaster.info({
      title: historyTitle,
      description: historyDescription,
      closable: true,
    })
  }

  function showErrorToast() {
    toaster.error({
      title: errorTitle,
      description: errorDescription,
      closable: true,
    })
  }
</script>

{#snippet savedTitle()}설정이 저장됐어요{/snippet}
{#snippet savedDescription()}변경 내용은 다음 새로고침부터 같은 값으로 유지돼요.{/snippet}
{#snippet historyTitle()}작업 기록을 준비했어요{/snippet}
{#snippet historyDescription()}최근 변경 사항을 확인할 수 있도록 목록에 표시해요.{/snippet}
{#snippet errorTitle()}저장하지 못했어요{/snippet}
{#snippet errorDescription()}네트워크 상태를 확인한 뒤 다시 시도하세요.{/snippet}

<div style="display: grid; max-width: 30rem; gap: var(--odbd-space-3);">
  <div style="display: flex; flex-wrap: wrap; gap: var(--odbd-space-2);">
    <button
      class="odbd-button"
      data-variant="solid"
      data-size="md"
      type="button"
      onclick={showSavedToast}
    >
      저장 알림
    </button>
    <button
      class="odbd-button"
      data-variant="outline"
      data-size="md"
      type="button"
      onclick={showErrorToast}
    >
      오류 알림
    </button>
  </div>

  <Toast.Toaster {toaster}>
    {#snippet children(toast)}
      {@const item = toast()}
      <Toast.Root>
        {#if item.title}
          <Toast.Title>{@render item.title()}</Toast.Title>
        {/if}
        {#if item.description}
          <Toast.Description>{@render item.description()}</Toast.Description>
        {/if}
        {#if item.action}
          <Toast.ActionTrigger>{item.action.label}</Toast.ActionTrigger>
        {/if}
        {#if item.closable}
          <Toast.CloseTrigger>닫기</Toast.CloseTrigger>
        {/if}
      </Toast.Root>
    {/snippet}
  </Toast.Toaster>
</div>