### Complete Integration Example with Toaster and Promise Toast

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/13-integration-patterns.md

Demonstrates a full application setup including the GooeyToaster component and handling asynchronous operations using promise-based toasts for loading, success, and error states.

```typescript
import { GooeyToaster, gooeyToast } from 'goey-toast'
import 'goey-toast/styles.css'

export function App() {
  const [isLoading, setIsLoading] = useState(false)

  async function handleSave(data: unknown) {
    setIsLoading(true)
    
    gooeyToast.promise(
      fetch('/api/save', {
        method: 'POST',
        body: JSON.stringify(data),
      }).then(r => r.json()),
      {
        loading: 'Saving changes...', 
        success: 'Changes saved successfully',
        error: (err: Error) => `Save failed: ${err.message}`,
        action: {
          error: {
            label: 'Retry',
            onClick: () => handleSave(data),
          },
        },
      }
    )
    
    setIsLoading(false)
  }

  return (
    <>
      <GooeyToaster
        position="bottom-right"
        theme="dark"
        preset="bouncy"
        closeButton
        closeOnEscape
      />
      
      <form onSubmit={(e) => {
        e.preventDefault()
        handleSave({ /* form data */ })
      }}>
        {/* Form fields */}
        <button disabled={isLoading}>Save</button>
      </form>
    </>
  )
}
```

--------------------------------

### Main Module Import Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/10-exports.md

Example of importing the main module, including components, functions, and styles.

```typescript
// Main module
import { gooeyToast, GooeyToaster } from 'goey-toast'

// Styles
import 'goey-toast/styles.css'
```

--------------------------------

### GooeyToaster Positioning Examples

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/05-GooeyToaster-component.md

Examples showing how to configure the display position of the GooeyToaster container on the screen.

```typescript
<GooeyToaster position="bottom-right" />  // Bottom right corner
```

```typescript
<GooeyToaster position="top-center" />    // Top center
```

```typescript
<GooeyToaster position="bottom-left" />   // Bottom left corner
```

--------------------------------

### Install Goey-Toast and Agent Skill

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Install the goey-toast package and its associated agent skill for AI assistance in your project.

```bash
npm install goey-toast framer-motion
npx goey-toast add-skill --agents
```

--------------------------------

### Install via shadcn/ui

Source: https://github.com/anl331/goey-toast/blob/main/skills/goey-toast/SKILL.md

For projects using shadcn/ui, you can add goey-toast using the shadcn CLI. This command installs a wrapper component and its dependencies.

```bash
npx shadcn@latest add https://goey-toast.vercel.app/r/goey-toaster.json
```

--------------------------------

### Check Goey-Toast Package Installation

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Verify if the goey-toast package is currently installed in your project.

```bash
npm list goey-toast
```

--------------------------------

### CLI Commands for Skill Installation

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/10-exports.md

Commands to install the agent skill using the Goey Toast CLI tool.

```bash
npx goey-toast add-skill
npx goey-toast add-skill --agents
npx goey-toast add-skill --dir .cursor/skills/goey-toast
npx goey-toast print-skill
```

--------------------------------

### Install goey-toast Agent Skill

Source: https://github.com/anl331/goey-toast/blob/main/README.md

Install the goey-toast Agent Skill from the skills.sh registry to enable coding agents to use the library correctly.

```bash
npx skills add anl331/goey-toast
```

--------------------------------

### Basic goey-toast Setup

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/13-integration-patterns.md

Minimal setup required to use goey-toast in a React application. Import necessary components and styles, then render GooeyToaster and use gooeyToast for displaying notifications.

```typescript
import { GooeyToaster, gooeyToast } from 'goey-toast'
import 'goey-toast/styles.css'

export function App() {
  return (
    <div>
      <GooeyToaster position="bottom-right" />
      
      <button onClick={() => gooeyToast.success('Success!')}>
        Show Toast
      </button>
    </div>
  )
}
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/anl331/goey-toast/blob/main/README.md

Install the required peer dependencies for goey-toast: React, ReactDOM, and framer-motion.

```bash
npm install react react-dom framer-motion
```

--------------------------------

### Install goey-toast CLI Globally

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Installs the goey-toast CLI globally using npm. This allows you to use the `goey-toast` command directly from your terminal.

```bash
npm install -g goey-toast
```

--------------------------------

### GooeyToaster Theme Examples

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/05-GooeyToaster-component.md

Examples for setting the visual theme of the toasts, affecting colors and contrast.

```typescript
<GooeyToaster theme="light" />  // White background, dark text
```

```typescript
<GooeyToaster theme="dark" />   // Dark background, light text
```

--------------------------------

### Add Skill with Custom Directory

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Installs the goey-toast skill into a specified directory, creating parent directories if they don't exist.

```bash
npx goey-toast add-skill --dir ./my-skills/goey-toast
```

--------------------------------

### Install goey-toast Package

Source: https://github.com/anl331/goey-toast/blob/main/skills/goey-toast/SKILL.md

Install the goey-toast package along with its peer dependencies: react and framer-motion. Ensure your React version is 18 or higher.

```bash
npm install goey-toast react react-dom framer-motion
```

--------------------------------

### Verify Skill Installation

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Check if the goey-toast skill file exists in the expected directory.

```bash
ls .claude/skills/goey-toast/SKILL.md
```

--------------------------------

### Complete Styling Example with Custom Themes

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/11-styling-and-customization.md

Demonstrates a comprehensive styling approach by importing default styles, defining custom class names for success and error states, and configuring the GooeyToaster with specific props.

```typescript
import { gooeyToast, GooeyToaster } from 'goey-toast'
import 'goey-toast/styles.css'

const CUSTOM_CLASSES = {
  success: {
    wrapper: 'rounded-xl shadow-lg',
    title: 'text-green-600 font-bold text-lg',
    description: 'text-green-700 text-sm',
    actionButton: 'bg-green-600 text-white hover:bg-green-700 px-4 py-2 rounded-lg',
  },
  error: {
    wrapper: 'rounded-xl shadow-lg border-2 border-red-300',
    title: 'text-red-600 font-bold text-lg',
    description: 'text-red-700 text-sm',
    actionButton: 'bg-red-600 text-white hover:bg-red-700 px-4 py-2 rounded-lg',
  },
}

export function MyApp() {
  return (
    <>
      <GooeyToaster
        position="bottom-right"
        theme="dark"
        gap={16}
        bounce={0.4}
      />
      
      <button
        onClick={() =>
          gooeyToast.success('Changes saved!', {
            description: 'Your settings have been updated.',
            action: { label: 'Undo', onClick: () => {} },
            classNames: CUSTOM_CLASSES.success,
          })
        }
      >
        Save Settings
      </button>
    </>
  )
}
```

--------------------------------

### Complete GooeyToaster and Toast Configuration

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/08-configuration.md

An example demonstrating comprehensive configuration for both the global `<GooeyToaster />` component and a specific toast instance, covering positioning, theming, animation, and interaction.

```typescript
import { GooeyToaster, gooeyToast } from 'goey-toast'
import 'goey-toast/styles.css'

export function App() {
  return (
    <div>
      <GooeyToaster
        // Position
        position="bottom-right"
        
        // Theming
        theme="dark"
        
        // Spacing
        gap={16}
        offset="32px"
        
        // Display
        duration={5000}
        showTimestamp={false}
        showProgress={true}
        
        // Animation
        preset="bouncy"
        bounce={0.6}
        spring={true}
        
        // Queue
        visibleToasts={4}
        maxQueue={20}
        queueOverflow="drop-oldest"
        
        // Interaction
        closeButton="top-right"
        closeOnEscape={true}
        swipeToDismiss={true}
        
        // Layout
        dir="ltr"
      />

      <button
        onClick={() =>
          gooeyToast.success('Saved successfully!', {
            description: 'Your changes have been synced.',
            action: {
              label: 'Undo',
              onClick: () => undoChanges(),
            },
            fillColor: '#10b981',
            borderColor: '#059669',
            preset: 'smooth',
            onAutoClose: (id) => console.log(`Toast ${id} closed`),
          })
        }
      >
        Save
      </button>
    </div>
  )
}
```

--------------------------------

### Install goey-toast and Peer Dependencies

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Installs the goey-toast package along with its required peer dependencies using npm. This ensures all necessary libraries are available for goey-toast to function correctly.

```typescript
npm install goey-toast framer-motion react react-dom
```

--------------------------------

### Basic GooeyToaster Usage

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/05-GooeyToaster-component.md

Demonstrates the basic setup for the GooeyToaster component and triggering a toast. Ensure 'goey-toast/styles.css' is imported.

```typescript
import { GooeyToaster, gooeyToast } from 'goey-toast'
import 'goey-toast/styles.css'

export function App() {
  return (
    <div>
      <GooeyToaster position="bottom-right" />
      
      <button onClick={() => gooeyToast.success('Saved!')}>
        Save
      </button>
    </div>
  )
}
```

--------------------------------

### Promise Configuration Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/08-configuration.md

Configure options for `gooeyToast.promise()`, including loading, success, and error states with custom messages and actions. Supports all `GooeyToastOptions`.

```typescript
gooeyToast.promise(promise, {
  loading: 'Loading...',
  success: (result) => `Loaded: ${result.name}`,
  error: (err) => `Failed: ${err.message}`,
  description: {
    loading: 'Please wait...',
    success: (result) => <div>{result.details}</div>,
    error: (err) => `Error code: ${err.code}`,
  },
  action: {
    success: {
      label: 'View',
      onClick: () => {},
    },
    error: {
      label: 'Retry',
      onClick: () => {},
    },
  },
})
```

--------------------------------

### Accessible Toast Notification Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/12-accessibility.md

This example demonstrates how to configure a GooeyToaster component with accessibility features like closing on escape, providing a close button, and swipe-to-dismiss functionality. It also shows how to trigger a success toast with a description and an action button.

```typescript
import { gooeyToast, GooeyToaster } from 'goey-toast'
import 'goey-toast/styles.css'

export function AccessibleApp() {
  return (
    <>
      <GooeyToaster
        position="bottom-right"
        closeOnEscape={true}  // Allow Escape to dismiss
        closeButton={true}    // Provide close button
        swipeToDismiss={true} // Touch alternative
      />
      
      <button
        onClick={() => {
          gooeyToast.success('Changes saved', {
            description: 'Your profile has been updated successfully.',
            action: {
              label: 'Undo',
              onClick: () => undoChanges(),
            },
          })
        }}
      >
        Save Changes
      </button>
    </>
  )
}
```

--------------------------------

### CLI Source Code Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

This TypeScript code demonstrates the structure and basic functionality of the goey-toast CLI, including argument parsing and command handling.

```typescript
#!/usr/bin/env node
// goey-toast CLI — install the agent skill into a project

import { fileURLToPath } from 'node:url'
import { dirname, join, resolve } from 'node:path'
import { mkdirSync, copyFileSync, readFileSync, writeFileSync, existsSync } from 'node:fs'

// Read SKILL.md from package
const SKILL_SRC = resolve(__dirname, '..', 'skills', 'goey-toast', 'SKILL.md')

// Parse arguments
const argv = process.argv.slice(2)
const cmd = argv[0]

// Get flag helper
function getFlag(name) { /* ... */ }

// Main commands
function addSkill() { /* ... */ }
function help() { /* ... */ }

// Handle command
switch (cmd) {
  case 'add-skill':
    addSkill()
    break
  case 'print-skill':
    process.stdout.write(readSkill())
    break
  case undefined:
  case 'help':
  case '--help':
  case '-h':
    help()
    break
  default:
    console.error(`unknown command "${cmd}"`)
    help()
    process.exit(1)
}

```

--------------------------------

### Basic Queue with Default Settings Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/09-queue-system.md

Illustrates the default queue behavior with 3 visible toasts. Excess toasts are queued and displayed as space becomes available.

```typescript
<GooeyToaster visibleToasts={3} />

// In your app
gooeyToast('Toast 1')  // Visible
gooeyToast('Toast 2')  // Visible
gooeyToast('Toast 3')  // Visible
gooeyToast('Toast 4')  // Queued
gooeyToast('Toast 5')  // Queued

// When Toast 1 is dismissed:
// Toast 4 displays, Toast 5 remains queued
```

--------------------------------

### Using 'snappy' Preset with GooeyToaster Component

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Example of applying the 'snappy' animation preset to the GooeyToaster component.

```typescript
<GooeyToaster preset="snappy" />
```

--------------------------------

### Toast Styling with Color Examples

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/08-configuration.md

Customize the appearance of individual toasts using fillColor and borderColor. Examples show how to use hex, RGB, and named color values.

```typescript
fillColor="#2563eb"           // Hex
fillColor="rgb(37, 99, 235)"  // RGB
fillColor="blue"              // Named color
borderColor="rgba(0, 0, 0, 0.1)" // RGBA
```

--------------------------------

### Custom Color Contrast Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/12-accessibility.md

When using custom colors for toasts, it is important to verify that sufficient color contrast is maintained to meet WCAG AA standards. This example shows how to apply custom colors and ensure text has adequate contrast.

```typescript
// Check contrast before using custom colors
gooeyToast('Custom', {
  fillColor: '#2563eb',  // Blue
  borderColor: '#1e40af',
  classNames: {
    title: 'text-white',  // Ensure sufficient contrast
  },
})
```

--------------------------------

### Complete GooeyToaster Configuration

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/05-GooeyToaster-component.md

An example demonstrating a comprehensive configuration of the GooeyToaster component with various props for positioning, theming, animations, and more. Ensure 'goey-toast/styles.css' is imported.

```typescript
import { GooeyToaster, gooeyToast } from 'goey-toast'
import 'goey-toast/styles.css'

export function App() {
  return (
    <div>
      <GooeyToaster
        position="top-right"
        duration={4000}
        theme="dark"
        gap={16}
        offset="32px"
        visibleToasts={4}
        closeButton="top-right"
        closeOnEscape={true}
        swipeToDismiss={true}
        showProgress={true}
        showTimestamp={false}
        preset="bouncy"
        maxQueue={30}
        queueOverflow="drop-oldest"
        dir="ltr"
      />
      
      <main>
        {/* Your app content */}
      </main>
    </div>
  )
}
```

--------------------------------

### Toast Queue Integration Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/04-gooey-toast-dismiss.md

Demonstrates how dismissing a toast affects the queue, immediately displaying the next queued toast if available.

```typescript
// Queue example: max 1 visible toast
gooeyToast('First', { duration: 0 })  // active
gooeyToast('Second')                    // queued
gooeyToast('Third')                     // queued

gooeyToast.dismiss('First')             // removes First, displays Second immediately
```

--------------------------------

### animationPresets Usage

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/10-exports.md

Example of accessing animation presets.

```typescript
import { animationPresets } from 'goey-toast'

console.log(animationPresets.bouncy)  // { bounce: 0.6, spring: true }
```

--------------------------------

### Add Agent Skill and Create AGENTS.md Pointer

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Installs the agent skill and also creates or updates an `AGENTS.md` file. This pointer file helps AI agents discover available skills.

```bash
npx goey-toast add-skill --agents
```

--------------------------------

### Using 'smooth' Preset with GooeyToaster Component

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Example of applying the 'smooth' animation preset to the GooeyToaster component.

```typescript
<GooeyToaster preset="smooth" />
```

--------------------------------

### Add Skill for Other Agents

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Installs the goey-toast skill into a custom directory for other agent tools.

```bash
npx goey-toast add-skill --dir ./tools/agent-skills/goey-toast
```

--------------------------------

### Add Agent Skill to Project (Default Location)

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Installs the agent skill markdown file to the default location (`.claude/skills/goey-toast/SKILL.md`) in your project. This enables AI agents to understand how to use goey-toast.

```bash
npx goey-toast add-skill
```

--------------------------------

### Queue Order Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/09-queue-system.md

Demonstrates the FIFO processing of toasts. New toasts are added to the queue if the visible limit is reached, and displayed as older toasts are dismissed.

```typescript
gooeyToast('First')    // Displays immediately
gooeyToast('Second')   // Displays immediately
gooeyToast('Third')    // Displays immediately
gooeyToast('Fourth')   // Queued (assuming visibleToasts=3)
gooeyToast('Fifth')    // Queued

// When "First" is dismissed:
// "Fourth" displays immediately, "Fifth" waits in queue
```

--------------------------------

### Action Buttons with Clear Labels

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/12-accessibility.md

Shows how to label action buttons within toasts clearly. The 'Good' example uses a specific 'Undo' label, while the 'Not ideal' example uses a more generic label.

```typescript
// Good
gooeyToast('Action available', {
  action: { label: 'Undo', onClick: () => {} },
})

// Not ideal
gooeyToast('Action available', {
  action: { label: 'Do something', onClick: () => {} },
})
```

--------------------------------

### Applying Global Preset with GooeyToaster

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Example of setting a global animation preset ('bouncy') for all toasts by applying it to the root GooeyToaster component.

```typescript
<GooeyToaster preset="bouncy" />
```

--------------------------------

### Theme-Based Animation Presets

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Example of conditionally applying animation presets ('bouncy' for dark, 'smooth' for light) based on the theme of the application.

```typescript
function App({ isDark }: { isDark: boolean }) {
  return (
    <>
      <GooeyToaster
        theme={isDark ? 'dark' : 'light'}
        preset={isDark ? 'bouncy' : 'smooth'}
      />
    </>
  )
}
```

--------------------------------

### Add Skill for Claude Code Agent

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Installs the goey-toast skill into the specified directory for the Claude Code agent.

```bash
npx goey-toast add-skill --dir .claude/skills/goey-toast
```

--------------------------------

### CLI Commands

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/10-exports.md

The package includes a CLI tool that can be used to install agent skills. The commands allow for adding skills, with options to include agents or specify a directory, and printing skill information.

```APIDOC
## CLI Commands

### Description
The package includes a CLI tool for installing the agent skill:

### Usage
```bash
npx goey-toast add-skill
npx goey-toast add-skill --agents
npx goey-toast add-skill --dir .cursor/skills/goey-toast
npx goey-toast print-skill
```
```

--------------------------------

### Promise Toast with Loading, Success, and Error States

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/12-accessibility.md

This example shows how to use `gooeyToast.promise` to handle asynchronous operations, providing feedback for loading, success, and error states, including descriptions for each state.

```typescript
gooeyToast.promise(
  uploadFile(file),
  {
    loading: 'Uploading your file...',
    success: (result) => `File uploaded: ${result.filename}`,
    error: (err) => `Upload failed: ${err.message}`,
    description: {
      loading: 'This may take a minute.',
      success: (result) => `Size: ${result.size} bytes`,
      error: 'Please check your connection.',
    },
  }
)
```

--------------------------------

### Using 'bouncy' Preset for Success Toast

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Example of triggering a success toast with the 'bouncy' animation preset using the gooeyToast API.

```typescript
gooeyToast.success('Achievement unlocked!', { preset: 'bouncy' })
```

--------------------------------

### Promise Toast Example

Source: https://github.com/anl331/goey-toast/blob/main/skills/goey-toast/SKILL.md

Handle asynchronous operations with promise toasts. This allows you to show loading, success, or error states based on the promise's resolution.

```tsx
gooeyToast.promise(saveData(), {
  loading: 'Saving...', 
  success: (data) => `Saved ${data.count} items`,
  error: (e) => `Failed: ${String(e)}`,
  description: { success: 'All changes synced.', error: 'Try again later.' },
  action: { error: { label: 'Retry', onClick: () => retry() } },
})
```

--------------------------------

### Using 'subtle' Preset for Warning Toast

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Example of displaying a warning toast with the 'subtle' animation preset using the gooeyToast API.

```typescript
gooeyToast.warning('Low battery', { preset: 'subtle' })
```

--------------------------------

### Promise Toast Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/00-index.md

Track asynchronous operations with automatic state transitions for loading, success, and error states. This is useful for operations like fetching data.

```typescript
gooeyToast.promise(
  fetch('/api/data').then(r => r.json()),
  {
    loading: 'Fetching...',
    success: 'Data loaded',
    error: 'Failed to load',
  }
)
```

--------------------------------

### Toast with Contextual Descriptions

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/12-accessibility.md

Demonstrates how to add descriptive text to toasts to provide additional context, especially for error messages. The 'Better' example includes a helpful description for the error.

```typescript
// Good
gooeyToast.error('Failed')

// Better
gooeyToast.error('Save failed', {
  description: 'Your connection was lost. Please try again.',
})
```

--------------------------------

### Accessible Toast with Icon and Text

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/12-accessibility.md

This example shows a 'Good' practice for indicating toast meaning using an icon, color, and text, contrasting with a 'Bad' practice that relies solely on color.

```typescript
// Good — icon + color + text
gooeyToast.error('Payment failed', {
  icon: <AlertIcon />,
})

// Bad — color only
gooeyToast('Something went wrong', {
  fillColor: 'red',
  // No icon, no clear type indicator
})
```

--------------------------------

### Configure GooeyToaster Component

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/08-configuration.md

Set global configurations for all toasts by passing props to the GooeyToaster component. This example shows various available props for positioning, theming, animation, queue management, spacing, interaction, display, and layout.

```typescript
<GooeyToaster
  position="bottom-right"
  duration={4000}
  theme="light"
  gap={14}
  offset="24px"
  visibleToasts={3}
  closeButton={false}
  preset="snappy"
  spring={true}
  bounce={0.4}
  swipeToDismiss={true}
  closeOnEscape={true}
  maxQueue={Infinity}
  queueOverflow="drop-oldest"
  showProgress={false}
  showTimestamp={true}
  dir="ltr"
/>
```

--------------------------------

### Limiting Queue Size and Overflow Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/09-queue-system.md

Demonstrates configuring a limited queue size (5) with 'drop-oldest' overflow. When 8 toasts are created, the queue fills, the oldest queued toast is dropped, and the new toast is rejected.

```typescript
<GooeyToaster visibleToasts={2} maxQueue={5} queueOverflow="drop-oldest" />

// Creating 8 toasts
for (let i = 1; i <= 8; i++) {
  gooeyToast(`Toast ${i}`)
}

// Result:
// - Toast 1, 2 visible
// - Toast 3, 4, 5, 6, 7 queued (5 toasts)
// - Toast 8 is rejected (queue is full), Toast 3 is dropped
// - Active queue: Toast 4, 5, 6, 7, 8
```

--------------------------------

### Multi-Language Support for Toasts

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/13-integration-patterns.md

Implement multi-language support for toast content by defining messages in different languages and selecting them based on a specified language code. This example uses a key to retrieve the appropriate message.

```typescript
type Language = 'en' | 'es' | 'fr'

const messages = {
  en: {
    saved: 'Saved successfully',
    error: 'An error occurred',
    loading: 'Loading...',
  },
  es: {
    saved: 'Guardado exitosamente',
    error: 'Ocurrió un error',
    loading: 'Cargando...',
  },
  fr: {
    saved: 'Enregistré avec succès',
    error: 'Une erreur est survenue',
    loading: 'Chargement...',
  },
}

function showToast(key: keyof typeof messages.en, lang: Language = 'en') {
  return gooeyToast.success(messages[lang][key])
}
```

--------------------------------

### Promise Toast with Derived Content and Descriptions

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/02-gooey-toast-promise.md

Customize toast content and descriptions dynamically based on the promise's resolution data or error. This example shows derived filenames and sizes.

```typescript
gooeyToast.promise(
  uploadFile(file),
  {
    loading: 'Uploading...',
    success: (result) => `Uploaded: ${result.filename}`,
    error: (err) => `Upload failed: ${err.message}`,
    description: {
      loading: 'This may take a minute...',
      success: (result) => `Size: ${result.size} bytes`,
      error: 'Please check your connection.',
    },
  }
)
```

--------------------------------

### Add Agent Skill to Custom Directory

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Installs the agent skill markdown file to a custom directory path within your project. This is useful for agents that use a non-default skills directory.

```bash
npx goey-toast add-skill --dir .cursor/skills/goey-toast
```

--------------------------------

### Promise Toast with Per-Phase Action Buttons

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/02-gooey-toast-promise.md

Add custom action buttons to your promise toast for success or error states. This example includes 'View Post' and 'Retry' buttons with associated click handlers.

```typescript
gooeyToast.promise(
  publishPost(),
  {
    loading: 'Publishing...',
    success: 'Post published',
    error: 'Publish failed',
    description: {
      error: 'Try again or contact support.',
    },
    action: {
      success: {
        label: 'View Post',
        onClick: () => navigate(`/posts/${postId}`),
      },
      error: {
        label: 'Retry',
        onClick: () => publishPost(),
      },
    },
  }
)
```

--------------------------------

### Descriptive Toast Titles

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/12-accessibility.md

Illustrates the importance of providing specific titles for toast notifications to improve clarity. The 'Better' example offers more context than the 'Good' example.

```typescript
// Good
gooeyToast.success('Saved')

// Better
gooeyToast.success('Profile changes saved')
```

--------------------------------

### Basic Toast Usage

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/00-index.md

Demonstrates creating different types of toasts, including simple messages, success toasts with descriptions, and warning toasts with actions. Also shows how to update and dismiss toasts.

```typescript
// Simple toast
gooeyToast('Hello!')

// With description
gooeyToast.success('Saved', {
  description: 'Your changes have been synced.',
})

// With action button
gooeyToast.warning('Unsaved changes', {
  action: {
    label: 'Save',
    onClick: () => save(),
  },
})

// Update existing toast
const id = gooeyToast('Loading...')
// Later:
gooeyToast.update(id, { title: 'Done!', type: 'success' })

// Dismiss
gooeyToast.dismiss(id)
```

--------------------------------

### GooeyToaster Component Usage

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/10-exports.md

Example of how to use the GooeyToaster component in a React application.

```typescript
import { GooeyToaster } from 'goey-toast'

<GooeyToaster position="bottom-right" theme="dark" />
```

--------------------------------

### Display Help Message

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Shows the help message for the goey-toast CLI, listing all available commands and options. This is useful for understanding the CLI's capabilities.

```bash
npx goey-toast help
```

```bash
npx goey-toast --help
```

```bash
npx goey-toast -h
```

--------------------------------

### Project File Organization

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/MANIFEST.md

This snippet shows the directory structure of the goey-toast documentation files. It helps in understanding where each document is located within the project.

```tree
/workspace/home/output/
├── README.md                               # Documentation guide
├── MANIFEST.md                             # This file
├── 00-index.md                             # Quick reference
├── 01-gooey-toast-function.md             # API: toast creation
├── 02-gooey-toast-promise.md              # API: promise toasts
├── 03-gooey-toast-update.md               # API: toast updates
├── 04-gooey-toast-dismiss.md              # API: dismissal
├── 05-GooeyToaster-component.md           # Component props
├── 06-types.md                            # Type definitions
├── 07-animation-presets.md                # Animation config
├── 08-configuration.md                    # Complete config
├── 09-queue-system.md                     # Queue behavior
├── 10-exports.md                          # Package exports
├── 11-styling-and-customization.md        # CSS customization
├── 12-accessibility.md                    # A11y features
├── 13-integration-patterns.md             # Usage patterns
└── 14-cli-and-agent-integration.md        # CLI & agents

```

--------------------------------

### Main Module Imports

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/10-exports.md

Import the main components and functions from the 'goey-toast' package. This includes the `gooeyToast` function for displaying toasts and the `GooeyToaster` component for rendering them. You can also import `animationPresets` and various types like `GooeyToastOptions` and `GooeyToasterProps`.

```APIDOC
## Main Module (`goey-toast`)

### Description
Exports all components, functions, and types.

### Import Statement
```typescript
import { gooeyToast, GooeyToaster, animationPresets } from 'goey-toast'
import type { GooeyToastOptions, GooeyToasterProps } from 'goey-toast'
```
```

--------------------------------

### Importing Animation Presets

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Demonstrates how to import the animationPresets object from the 'goey-toast' module and access individual preset configurations.

```typescript
import { animationPresets } from 'goey-toast'

// Access presets
const smoothConfig = animationPresets.smooth
const bouncyConfig = animationPresets.bouncy
```

--------------------------------

### Per-Toast Option Override Example

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/08-configuration.md

Demonstrates how per-toast explicit options override global `<GooeyToaster />` props. Here, animation settings are overridden.

```typescript
// Global: spring: true, bounce: 0.4
<GooeyToaster spring={true} bounce={0.4} />

// Per-toast override: spring: false, bounce: 0.2
gooeyToast('Test', { spring: false, bounce: 0.2 })
// Result: spring: false, bounce: 0.2
```

--------------------------------

### Applying Custom Bounce Value with GooeyToaster

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Example of bypassing presets and applying a custom 'bounce' value of 0.2 to the GooeyToaster component.

```typescript
<GooeyToaster bounce={0.2} />  // Custom bounce
```

--------------------------------

### Check AGENTS.md for Skill Reference

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

Verify that the AGENTS.md file references the goey-toast skill.

```bash
cat AGENTS.md | grep goey-toast
```

--------------------------------

### Basic Toast Notification

Source: https://github.com/anl331/goey-toast/blob/main/skills/goey-toast/SKILL.md

Trigger a success toast with a simple message using the gooeyToast.success function. This is a basic example of how to display a success notification.

```tsx
gooeyToast.success('Saved!')
```

--------------------------------

### Silently Ignore Nonexistent Toast ID

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/03-gooey-toast-update.md

Calling `gooeyToast.update()` with an ID that does not exist is a no-op and does not throw an error. This example shows how such a call is handled.

```typescript
gooeyToast.update('nonexistent-id', { title: 'This does nothing' })
```

--------------------------------

### Configuration and Types

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/MANIFEST.md

Details on available types and configuration options for customizing toast behavior and appearance.

```APIDOC
## Configuration Reference & Types

### TypeScript Types

- **Description**: All available TypeScript type definitions for Gooey Toast.
- **Types**: Includes `GooeyToastType`, `GooeyToastTimings`, `GooeyToastClassNames`, `GooeyToastAction`, `GooeyToastOptions`, `GooeyPromiseData<T>`, `GooeyToastPhase`, `GooeyToastUpdateOptions`, `DismissFilter`, `GooeyToasterProps`, `AnimationPreset`, `AnimationPresetName`.
- **Location**: `06-types.md`

### Animation Presets

- **Description**: Predefined animation configurations for toasts.
- **Content**: Includes animation presets and spring configurations.
- **Location**: `07-animation-presets.md`

### Complete Configuration Guide

- **Description**: Comprehensive guide to all configuration options.
- **Content**: Covers all `GooeyToaster` props (18), `GooeyToastOptions` (18), `GooeyPromiseData` options (16), animation settings, queue configurations, display options, and interaction settings.
- **Location**: `08-configuration.md`

### Queue System

- **Description**: Details on how the toast queue system operates.
- **Content**: Explains toast queue behavior.
- **Location**: `09-queue-system.md`
```

--------------------------------

### Snappy Animation Preset Configuration

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Configuration for the 'snappy' preset, providing a balanced, default spring feel that is neither too subtle nor too dramatic. Recommended for most use cases.

```typescript
{
  bounce: 0.4,
  spring: true
}
```

--------------------------------

### Set Toast Border Width

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/11-styling-and-customization.md

Control the thickness of the toast border in pixels. Examples show setting a thick border, a thin border, and no border.

```typescript
gooeyToast('Thick border', {
  borderWidth: 3,  // Default is 1.5
})
```

```typescript
gooeyToast('Thin border', {
  borderWidth: 1,
})
```

```typescript
gooeyToast('No border', {
  borderWidth: 0,
})
```

--------------------------------

### Reinstall Goey-Toast Package

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/14-cli-and-agent-integration.md

If the skill source is not found, reinstalling the goey-toast package may resolve the issue.

```bash
npm install goey-toast
```

--------------------------------

### Disabling Spring Animations Globally

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Example of disabling spring animations for all toasts by setting 'spring' to false on the GooeyToaster component, resulting in linear timing.

```typescript
<GooeyToaster spring={false} />  // All linear animations
```

--------------------------------

### Import Core Exports

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/10-exports.md

Import the main components and utilities from the goey-toast package.

```typescript
import { GooeyToaster, gooeyToast, animationPresets } from 'goey-toast'
import type { /* types */ } from 'goey-toast'
```

--------------------------------

### Applying Custom Bounce Value for Specific Toast

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Example of overriding preset settings for a specific toast by providing a custom 'bounce' value of 0.7.

```typescript
gooeyToast.success('Saved!', { bounce: 0.7 })
```

--------------------------------

### Main Module Entry Point Imports

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/10-exports.md

Imports from the main module, including functions, components, and types.

```typescript
import { gooeyToast, GooeyToaster, animationPresets } from 'goey-toast'
import type { GooeyToastOptions, GooeyToasterProps } from 'goey-toast'
```

--------------------------------

### Disabling Spring Animations for Specific Toast

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/07-animation-presets.md

Example of disabling spring animations for an individual toast by setting 'spring' to false in the toast options, ensuring linear timing.

```typescript
gooeyToast.success('Saved!', { spring: false })
```

--------------------------------

### Add goey-toast Skill to Project

Source: https://github.com/anl331/goey-toast/blob/main/README.md

Copy the goey-toast Agent Skill into your project directory. You can specify a custom directory for the skill files.

```bash
npx goey-toast add-skill
```

```bash
npx goey-toast add-skill --agents
```

```bash
npx goey-toast add-skill --dir .cursor/skills/goey-toast
```

--------------------------------

### Appropriate Toast Types for Politeness

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/12-accessibility.md

This example highlights the use of different toast types (`error`, `warning`, `success`, `info`) to convey urgency and politeness, aligning with ARIA politeness levels.

```typescript
// Appropriate politeness for the situation
gooeyToast.error('Critical error', { /* ... */ })    // Assertive
gooeyToast.warning('Deprecation warning', { /* ... */ }) // Assertive
gooeyToast.success('Task complete', { /* ... */ })   // Polite
gooeyToast.info('Tip available', { /* ... */ })      // Polite
```

--------------------------------

### Configure Individual Toasts

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/08-configuration.md

Override global settings for specific toasts using the gooeyToast function. This example demonstrates how to customize content, styling, animations, and event handlers for a single toast.

```typescript
gooeyToast('Title', {
  description: 'Optional body',
  action: { label: 'Button', onClick: () => {} },
  icon: <CustomIcon />,
  duration: 3000,
  id: 'custom-id',
  classNames: { title: 'my-title' },
  fillColor: '#2563eb',
  borderColor: '#1e40af',
  borderWidth: 2,
  timing: { displayDuration: 5000 },
  preset: 'bouncy',
  spring: false,
  bounce: 0.2,
  showProgress: true,
  showTimestamp: false,
  onDismiss: (id) => {},
  onAutoClose: (id) => {},
})
```

--------------------------------

### Info Toast with Description and Action Button

Source: https://github.com/anl331/goey-toast/blob/main/skills/goey-toast/SKILL.md

Display an info toast with a description and an action button. The action button can have a success label that appears after clicking.

```tsx
gooeyToast.info('Share link ready', {
  description: 'Your link has been generated.',
  action: {
    label: 'Copy',
    onClick: () => navigator.clipboard.writeText(url),
    successLabel: 'Copied!', // morphs back to pill after click
  },
})
```

--------------------------------

### Enable RTL Support

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/05-GooeyToaster-component.md

Configure the GooeyToaster component for right-to-left layout and text direction. Positions are mirrored in RTL mode.

```typescript
<GooeyToaster dir="rtl" />  // RTL layout
<GooeyToaster dir="ltr" />  // LTR (default)
```

--------------------------------

### Export Components and Functions

Source: https://github.com/anl331/goey-toast/blob/main/README.md

Import necessary components, functions, and types from the 'goey-toast' library for use in your application.

```ts
// Components
export { GooeyToaster } from 'goey-toast'

// Toast function
export { gooeyToast } from 'goey-toast'

// Animation presets
export { animationPresets } from 'goey-toast'

// Types
export type {
  GooeyToastOptions,
  GooeyPromiseData,
  GooeyToasterProps,
  GooeyToastAction,
  GooeyToastClassNames,
  GooeyToastTimings,
  GooeyToastUpdateOptions,
  DismissFilter,
  AnimationPreset,
  AnimationPresetName,
} from 'goey-toast'
```

--------------------------------

### Package.json Exports Configuration

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/10-exports.md

Defines the public API of the package, including main module and CSS stylesheet entry points.

```json
{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    },
    "./styles.css": "./dist/index.css"
  }
}
```

--------------------------------

### gooeyToast.promise()

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/02-gooey-toast-promise.md

Displays a toast that tracks the state of a Promise, updating its UI and content as the Promise resolves or rejects. It accepts the Promise itself and a configuration object to define the appearance and behavior for each state (loading, success, error).

```APIDOC
## gooeyToast.promise()

### Description
Displays a toast that transitions through loading, success, and error states based on a Promise's resolution. Automatically updates the toast UI and content as the async operation progresses.

### Method Signature
```typescript
gooeyToast.promise<T>(
  promise: Promise<T>,
  data: GooeyPromiseData<T>
): string | number
```

### Parameters
#### `promise`
- **Type**: `Promise<T>`
- **Required**: Yes
- **Description**: The async operation to track.

#### `data`
- **Type**: `GooeyPromiseData<T>`
- **Required**: Yes
- **Description**: Configuration object defining loading, success, and error states.

##### `GooeyPromiseData<T>` Object Properties
- **loading** (`string`): Required. Title shown while promise is pending.
- **success** (`string | ((data: T) => string)`): Required. Title on promise resolution (can derive from result).
- **error** (`string | ((error: unknown) => string)`): Required. Title on promise rejection (can derive from error).
- **description** (`PromiseDescriptions<T>`): Optional. Per-phase description text or components.
- **action** (`PromiseActions`): Optional. Per-phase action buttons.
- **classNames** (`GooeyToastClassNames`): Optional. CSS class overrides.
- **fillColor** (`string`): Optional. Background color of the blob.
- **borderColor** (`string`): Optional. Border color of the blob.
- **borderWidth** (`number`): Optional. Border width in pixels (default 1.5).
- **timing** (`GooeyToastTimings`): Optional. Animation timing configuration.
- **spring** (`boolean`): Optional. Enable spring/bounce animations.
- **bounce** (`number`): Optional. Spring intensity from 0.05 to 0.8 (default 0.4).
- **showTimestamp** (`boolean`): Optional. Show/hide timestamp (default true).
- **onDismiss** (`(id: string | number) => void`): Optional. Callback invoked when toast is dismissed.
- **onAutoClose** (`(id: string | number) => void`): Optional. Callback invoked only on timer-based auto-dismiss.

##### `PromiseDescriptions<T>` Sub-object Properties
- **loading** (`ReactNode`): Description shown during loading phase.
- **success** (`ReactNode | ((data: T) => ReactNode)`): Description on success (can derive from result).
- **error** (`ReactNode | ((error: unknown) => ReactNode)`): Description on error (can derive from error).

##### `PromiseActions` Sub-object Properties
- **success** (`GooeyToastAction`): Action button to show on successful resolution.
- **error** (`GooeyToastAction`): Action button to show on rejection.

### Return Value
- **Type**: `string | number`
- **Description**: Returns a unique identifier for the promise toast. This ID can be used with `gooeyToast.update()` or `gooeyToast.dismiss()`.

### Usage Example
#### Basic Promise Toast
```typescript
import { gooeyToast } from 'goey-toast'

gooeyToast.promise(
  fetch('/api/data').then(r => r.json()),
  {
    loading: 'Fetching data...',
    success: 'Data loaded',
    error: 'Failed to load data',
  }
)
```

#### With Descriptions and Derived Content
```typescript
gooeyToast.promise(
  uploadFile(file),
  {
    loading: 'Uploading...',
    success: (result) => `Uploaded: ${result.filename}`,
    error: (err) => `Upload failed: ${err.message}`,
    description: {
      loading: 'This may take a minute...',
      success: (result) => `Size: ${result.size} bytes`,
      error: 'Please check your connection.',
    },
  }
)
```

#### With Per-Phase Action Buttons
```typescript
gooeyToast.promise(
  publishPost(),
  {
    loading: 'Publishing...',
    success: 'Post published',
    error: 'Publish failed',
    description: {
      error: 'Try again or contact support.',
    },
    action: {
      success: {
        label: 'View Post',
        onClick: () => navigate(`/posts/${postId}`),
      },
      error: {
        label: 'Retry',
        onClick: () => publishPost(),
      },
    },
  }
)
```

#### With Callbacks
```typescript
const id = gooeyToast.promise(
  saveData(),
  {
    loading: 'Saving...',
    success: 'Saved',
    error: 'Save failed',
    onDismiss: (id) => {
      console.log(`Promise toast ${id} dismissed`)
      // Clean up or track analytics
    },
    onAutoClose: (id) => {
      console.log(`Promise toast ${id} auto-closed after completion`)
    },
  }
)
```
```

--------------------------------

### Mount GooeyToaster and Import Stylesheet

Source: https://github.com/anl331/goey-toast/blob/main/skills/goey-toast/SKILL.md

Mount the GooeyToaster component once near your app's root and import the necessary stylesheet at your app's entry point. This is crucial for toasts to render correctly.

```tsx
import { GooeyToaster, gooeyToast } from 'goey-toast'
import 'goey-toast/styles.css' // REQUIRED — import once at app entry

function App() {
  return (
    <>
      <GooeyToaster position="bottom-right" />
      <button onClick={() => gooeyToast.success('Saved!')}>Save</button>
    </>
  )
}
```

--------------------------------

### Toast Styling with CSS Class Overrides

Source: https://github.com/anl331/goey-toast/blob/main/_autodocs/08-configuration.md

Apply custom CSS classes to specific toast elements for detailed styling control. This example shows how to override classes for the wrapper, content, header, title, icon, description, and action button.

```typescript
classNames: {
  wrapper: 'my-wrapper',
  content: 'my-content',
  header: 'my-header',
  title: 'my-title',
  icon: 'my-icon',
  description: 'my-desc',
  actionWrapper: 'my-action-wrapper',
  actionButton: 'my-button',
}
```