Toaster

<script>
  import { Toaster, toast, toasts } from 'dssoca';

  // ── one call per kind ───────────────────────────────────────────
  // Auto-dismiss defaults: success/info 4s · error 7s · loading sticky.
  // Every method returns the toast's numeric id.
  toast.success('saved!');
  toast.info('3 services syncing…');
  toast.error('deploy failed', { timeout: 10_000 }); // or a bare number
  const id = toast.loading('uploading…'); // sticky until updated/dismissed

  // ── action button (action toasts default to sticky) ─────────────
  // Return false from onClick to keep the toast open after the click.
  toast.info('build queued', {
    action: { label: 'view', onClick: () => goto('/builds') },
  });

  // ── promise — sticky loading toast, flips on settle ─────────────
  async function save() {
    await toast.promise(api.save(), {
      loading: 'saving…',
      success: 'saved!',                       // or (value) => string
      error: (e) => `failed: ${e.message}`,    // or a plain string
    });
  }

  // ── the toasts store — inspect + control in flight ──────────────
  toasts.update(id, { kind: 'success', message: 'uploaded!' });
  toasts.pause(id);    // hold the auto-dismiss timer (hover does this)
  toasts.resume(id);   // let it run again
  toasts.dismiss(id);  // remove one (visible or still queued)
  toasts.clear();      // remove everything
  toasts.max = 3;      // visible-stack cap (default 3; overflow queues FIFO)
  toasts.items;        // reactive array of the visible toasts
</script>

<Toaster position="bottom-right" />
<button onclick={save}>save</button>