@soft-toast/vue 1.0.0

package/src/styles/variables.css

@@ -0,0 +1,83 @@
+/* Soft Toast CSS Variables - Light Theme (Default) */
+:root {
+  /* Colors */
+  --st-bg-default: #ffffff;
+  --st-bg-success: #dcfce7;
+  --st-bg-error: #fee2e2;
+  --st-bg-warning: #fef3c7;
+  --st-bg-info: #dbeafe;
+  
+  --st-text-default: #1f2937;
+  --st-text-success: #166534;
+  --st-text-error: #991b1b;
+  --st-text-warning: #92400e;
+  --st-text-info: #1e40af;
+  
+  --st-border-default: #e5e7eb;
+  --st-border-success: #86efac;
+  --st-border-error: #fca5a5;
+  --st-border-warning: #fcd34d;
+  --st-border-info: #93c5fd;
+  
+  --st-icon-success: #22c55e;
+  --st-icon-error: #ef4444;
+  --st-icon-warning: #f59e0b;
+  --st-icon-info: #3b82f6;
+  
+  /* Shadows */
+  --st-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --st-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --st-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --st-shadow-glow: 0 0 20px rgb(0 0 0 / 0.05);
+  
+  /* Dimensions */
+  --st-toast-min-width: 320px;
+  --st-toast-max-width: 420px;
+  --st-toast-padding: 16px;
+  --st-toast-gap: 12px;
+  --st-border-radius: 9999px;
+  --st-border-radius-blob: 24px;
+  
+  /* Typography */
+  --st-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --st-font-size-sm: 12px;
+  --st-font-size-base: 14px;
+  --st-font-size-lg: 16px;
+  --st-font-weight-normal: 400;
+  --st-font-weight-medium: 500;
+  --st-font-weight-semibold: 600;
+  
+  /* Transitions */
+  --st-transition-fast: 150ms;
+  --st-transition-base: 300ms;
+  --st-transition-slow: 500ms;
+  
+  /* Z-index */
+  --st-z-index: 9999;
+}
+
+/* Dark Theme */
+[data-soft-toast-theme="dark"] {
+  --st-bg-default: #1f2937;
+  --st-bg-success: #14532d;
+  --st-bg-error: #7f1d1d;
+  --st-bg-warning: #713f12;
+  --st-bg-info: #1e3a8a;
+  
+  --st-text-default: #f9fafb;
+  --st-text-success: #86efac;
+  --st-text-error: #fca5a5;
+  --st-text-warning: #fcd34d;
+  --st-text-info: #93c5fd;
+  
+  --st-border-default: #374151;
+  --st-border-success: #166534;
+  --st-border-error: #991b1b;
+  --st-border-warning: #92400e;
+  --st-border-info: #1e40af;
+  
+  --st-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --st-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --st-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  --st-shadow-glow: 0 0 30px rgb(0 0 0 / 0.3);
+}

package/src/types/index.ts

@@ -0,0 +1,115 @@
+import type { VNode, Component } from 'vue'
+
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'promise'
+export type ToastPosition = 'top' | 'bottom' | 'left' | 'right' | 'center' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+export type AnimationPreset = 'smooth' | 'bouncy' | 'subtle' | 'snappy'
+export type QueueOverflow = 'drop-oldest' | 'drop-newest'
+
+export interface ToastAction {
+  label: string
+  onClick: () => void | Promise<void>
+  successLabel?: string
+  primary?: boolean
+  class?: string
+}
+
+export interface ToastPromiseMessages {
+  loading: string
+  success: string
+  error: string
+  description?: {
+    success?: string
+    error?: string
+  }
+  action?: {
+    error?: ToastAction
+  }
+}
+
+export interface ToastOptions {
+  id?: string
+  type?: ToastType
+  title?: string
+  description?: string | VNode
+  action?: ToastAction | ToastAction[]
+  icon?: string | VNode | Component
+  duration?: number
+  position?: ToastPosition
+  classNames?: ToastClassNames
+  fillColor?: string
+  borderColor?: string
+  borderWidth?: number
+  preset?: AnimationPreset
+  bounce?: number
+  spring?: boolean
+  showTimestamp?: boolean
+  showProgress?: boolean
+  closeButton?: boolean | 'top-left' | 'top-right'
+  // Sound
+  sound?: boolean | string   // true = built-in tone, string = custom audio URL
+  soundVolume?: number       // 0–1, default 0.5
+  onDismiss?: (id: string) => void
+  onAutoClose?: (id: string) => void
+  promise?: Promise<unknown>
+  promiseMessages?: ToastPromiseMessages
+}
+
+export interface ToastClassNames {
+  wrapper?: string
+  content?: string
+  header?: string
+  title?: string
+  icon?: string
+  description?: string
+  actionWrapper?: string
+  actionButton?: string
+}
+
+export interface Toast extends Required<Pick<ToastOptions, 'id' | 'type' | 'duration' | 'position' | 'showTimestamp' | 'showProgress' | 'spring'>> {
+  title?: string
+  description?: string | VNode
+  action?: ToastAction | ToastAction[]
+  icon?: string | VNode | Component
+  classNames?: ToastClassNames
+  fillColor?: string
+  borderColor?: string
+  borderWidth?: number
+  closeButton?: boolean | 'top-left' | 'top-right'
+  preset: AnimationPreset
+  bounce: number
+  createdAt: number
+  remainingTime: number
+  isPaused: boolean
+  isExpanded: boolean
+  isLeaving: boolean
+  promise?: Promise<unknown>
+  promiseMessages?: ToastPromiseMessages
+  onDismiss?: (id: string) => void
+  onAutoClose?: (id: string) => void
+}
+
+export interface ToastContainerProps {
+  position?: ToastPosition
+  duration?: number
+  gap?: number
+  offset?: number | string
+  theme?: 'light' | 'dark'
+  toastOptions?: Partial<ToastOptions>
+  spring?: boolean
+  bounce?: number
+  preset?: AnimationPreset
+  closeOnEscape?: boolean
+  closeButton?: boolean | 'top-left' | 'top-right'
+  showProgress?: boolean
+  showTimestamp?: boolean
+  sound?: boolean           // enable built-in sounds globally
+  soundVolume?: number      // global volume 0–1
+  maxQueue?: number
+  queueOverflow?: QueueOverflow
+  dir?: 'ltr' | 'rtl'
+  swipeToDismiss?: boolean
+}
+
+export interface ToastPluginOptions extends ToastContainerProps {
+  teleportTarget?: string
+}

package/src/utils/sound.ts

@@ -0,0 +1,140 @@
+/**
+ * @soft-toast/vue — Sound Engine
+ * Uses the Web Audio API to synthesize tones — zero external file dependencies.
+ * Silently no-ops in SSR, when autoplay policy blocks, or when sound is disabled.
+ */
+
+import type { ToastType } from '../types'
+
+// Web Audio context (lazy, shared)
+let ctx: AudioContext | null = null
+
+// Browser autoplay policy: audio only plays after a user gesture
+let userHasInteracted = false
+
+const trackInteraction = () => {
+  userHasInteracted = true
+}
+
+if (typeof window !== 'undefined') {
+  ;(['click', 'keydown', 'pointerdown', 'touchstart'] as const).forEach((evt) =>
+    window.addEventListener(evt, trackInteraction, { once: true, passive: true })
+  )
+}
+
+const getCtx = (): AudioContext | null => {
+  if (typeof window === 'undefined' || typeof AudioContext === 'undefined') return null
+  if (!ctx) ctx = new AudioContext()
+  // Resume if suspended (some browsers suspend after inactivity)
+  if (ctx.state === 'suspended') ctx.resume().catch(() => {})
+  return ctx
+}
+
+/**
+ * Play a single synthesised note.
+ * @param freq       Frequency in Hz
+ * @param duration   Duration in seconds
+ * @param volume     Amplitude 0–1
+ * @param type       Oscillator wave type
+ * @param delay      Start offset in seconds (from now)
+ */
+const playNote = (
+  freq: number,
+  duration: number,
+  volume: number,
+  type: OscillatorType = 'sine',
+  delay = 0
+) => {
+  const audio = getCtx()
+  if (!audio) return
+
+  try {
+    const osc = audio.createOscillator()
+    const gain = audio.createGain()
+
+    osc.connect(gain)
+    gain.connect(audio.destination)
+
+    osc.type = type
+    osc.frequency.setValueAtTime(freq, audio.currentTime + delay)
+
+    // Soft attack + exponential decay for a natural feel
+    gain.gain.setValueAtTime(0, audio.currentTime + delay)
+    gain.gain.linearRampToValueAtTime(volume, audio.currentTime + delay + 0.01)
+    gain.gain.exponentialRampToValueAtTime(0.001, audio.currentTime + delay + duration)
+
+    osc.start(audio.currentTime + delay)
+    osc.stop(audio.currentTime + delay + duration + 0.02)
+  } catch {
+    // AudioContext can throw in certain sandboxed environments
+  }
+}
+
+/**
+ * Built-in tone profiles — tuned to feel contextually appropriate.
+ * success : rising triad  (positive, resolved)
+ * error   : falling minor (tense, alarming)
+ * warning : double pulse  (attention-grabbing but not harsh)
+ * info    : soft chime    (neutral, informational)
+ * default : single soft pop
+ */
+const profiles: Record<ToastType, (vol: number) => void> = {
+  success: (vol) => {
+    playNote(523.25, 0.12, vol * 0.45, 'sine', 0)      // C5
+    playNote(659.25, 0.14, vol * 0.50, 'sine', 0.08)   // E5
+    playNote(783.99, 0.20, vol * 0.55, 'sine', 0.16)   // G5
+  },
+  error: (vol) => {
+    playNote(329.63, 0.18, vol * 0.60, 'triangle', 0)    // E4
+    playNote(277.18, 0.28, vol * 0.55, 'triangle', 0.12) // C#4
+  },
+  warning: (vol) => {
+    playNote(440.00, 0.14, vol * 0.50, 'sine', 0)     // A4
+    playNote(440.00, 0.18, vol * 0.40, 'sine', 0.22)  // A4 (double pulse)
+  },
+  info: (vol) => {
+    playNote(659.25, 0.12, vol * 0.38, 'sine', 0)     // E5
+    playNote(880.00, 0.18, vol * 0.42, 'sine', 0.10)  // A5
+  },
+  default: (vol) => {
+    playNote(523.25, 0.15, vol * 0.35, 'sine', 0)     // C5
+  },
+  // promise → same as info while loading
+  promise: (vol) => {
+    playNote(523.25, 0.12, vol * 0.30, 'sine', 0)
+  },
+}
+
+/**
+ * Play a sound for the given toast.
+ * @param toastType  The semantic toast type
+ * @param sound      true = built-in tone, string = custom audio URL, false = silence
+ * @param volume     0–1 (clamped)
+ */
+export const playToastSound = (
+  toastType: ToastType,
+  sound: boolean | string | undefined,
+  volume = 0.5
+): void => {
+  if (!sound) return
+  if (typeof window === 'undefined') return
+  if (!userHasInteracted) return  // respect autoplay policy
+
+  const vol = Math.max(0, Math.min(1, volume))
+
+  if (typeof sound === 'string') {
+    // Custom audio URL — user supplies their own sound file
+    try {
+      const audio = new Audio(sound)
+      audio.volume = vol
+      audio.play().catch(() => {})  // silent fail if policy blocks
+    } catch {
+      /* noop */
+    }
+    return
+  }
+
+  // Built-in synthesised tone
+  const profile = profiles[toastType] ?? profiles.default
+  profile(vol)
+}