### Install solid-toast

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/quick-start.md

Commands to add the package to your project using npm or yarn.

```bash
npm install solid-toast
# or
yarn add solid-toast
```

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

### Example usage of createTimers

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/store.md

A complete example showing imports and usage within an onMount lifecycle hook.

```typescript
import { createTimers } from 'solid-toast';
import { onCleanup } from 'solid-js';

onMount(() => {
  const timers = createTimers();
  onCleanup(() => {
    timers?.forEach(t => t && clearTimeout(t));
  });
});
```

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

### Toaster Rendering Example

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/internal-components.md

Reference example showing how the Toaster component renders ToastContainer instances.

```typescript
// This is how Toaster renders them
<For each={store.toasts}>
  {(toast) => <ToastContainer toast={toast as Toast} />}
</For>
```

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

### Install solid-toast with NPM

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Use this command to add the package to your project using NPM.

```sh
npm install solid-toast
```

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

### Install solid-toast with yarn

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Use this command to add the package to your project using yarn.

```sh
yarn add solid-toast
```

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

### Import Library Exports

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/module-structure.md

Examples of importing default, named, and type exports from the package.

```typescript
// Default export
import toast from 'solid-toast';

// Named exports
import { toast, Toaster } from 'solid-toast';

// Types
import {
  Toast,
  ToastType,
  ToastPosition,
  ToastOptions,
  ToasterProps,
  Renderable,
  IconTheme,
  Message,
  ValueOrFunction,
  ValueFunction,
  ToastHandler,
  ToastContainerProps,
  ToastBarProps,
  IconProps,
  ToastTimeouts,
  DefaultToastOptions,
} from 'solid-toast';

// Enum
import { ActionType } from 'solid-toast';

// Store and utilities (if imported from core submodule)
import { store, dispatch, createTimers } from 'solid-toast';
```

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

### Basic Usage in SolidJS

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/README.md

Shows the minimal setup required to display a toast notification and render the Toaster component.

```typescript
import toast, { Toaster } from 'solid-toast';

export const App = () => {
  return (
    <div>
      <button onClick={() => toast('Hello!')}>Notify</button>
      <Toaster />
    </div>
  );
};
```

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

### Error Toast Usage Examples

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Demonstrates creating basic and customized error toasts.

```typescript
import { toast } from 'solid-toast';

toast.error('Something went wrong!');

toast.error('Failed to save', {
  duration: 4000,
  position: 'bottom-center',
  iconTheme: {
    primary: '#ef4444',
    secondary: '#fef2f2',
  },
});
```

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

### Loader Icon Usage Examples

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/icon-components.md

Demonstrates standard usage and custom color configuration for the Loader icon.

```typescript
import { Loader } from 'solid-toast';

// Standard usage (rendered automatically in loading toasts)
const element = <Loader />;

// Custom colors
const customElement = (
  <Loader
    primary="#e5e7eb"
    secondary="#6b7280"
  />
);
```

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

### Loading Toast Usage Example

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Demonstrates creating a loading toast and updating it later using the returned ID.

```typescript
import { toast } from 'solid-toast';

const toastId = toast.loading('Saving file...');

// Later, update the toast
setTimeout(() => {
  toast.success('File saved!', { id: toastId });
}, 3000);
```

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

### Store Dispatch Usage Example

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/store.md

Demonstrates common store operations including adding, updating, dismissing, and removing toasts.

```typescript
import { dispatch, store, ActionType } from 'solid-toast';

// Create and add a toast
const newToast = {
  id: 'my-toast',
  type: 'success',
  message: 'Success!',
  // ... other fields
};
dispatch({ type: ActionType.ADD_TOAST, toast: newToast });

// Update it later
dispatch({
  type: ActionType.UPDATE_TOAST,
  toast: {
    id: 'my-toast',
    message: 'Updated message',
    visible: false,
  },
});

// Dismiss (animate out)
dispatch({ type: ActionType.DISMISS_TOAST, toastId: 'my-toast' });

// Remove (immediate)
dispatch({ type: ActionType.REMOVE_TOAST, toastId: 'my-toast' });
```

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

### Success Icon Usage Examples

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/icon-components.md

Demonstrates standard usage and custom color configuration for the Success icon.

```typescript
import { Success } from 'solid-toast';

// Standard usage (rendered automatically in success toasts)
const element = <Success />;

// Custom colors
const customElement = (
  <Success
    primary="#10b981"
    secondary="#ecfdf5"
  />
);
```

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

### Implement a custom toast example

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Demonstrates rendering a custom JSX component with lifecycle access via the toast object.

```typescript
import { toast } from 'solid-toast';

toast.custom((t) => (
  <div style={{ padding: '16px' }}>
    <h2>Custom Toast</h2>
    <p>This toast is {t.visible ? 'visible' : 'hidden'}</p>
    <button onClick={() => toast.dismiss(t.id)}>
      Close
    </button>
  </div>
), {
  duration: Infinity,
  unmountDelay: 300,
});
```

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

### Show Success, Error, and Loading Toasts

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/README.md

Examples of semantic toast types for different application states.

```typescript
toast.success('Saved!');
toast.error('Failed to save');
const id = toast.loading('Processing...');
```

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

### Implement promise-based toast examples

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Shows tracking a promise with dynamic success/error messages or static messages with configuration options.

```typescript
import { toast } from 'solid-toast';

const fetchData = async () => {
  const response = await fetch('/api/data');
  if (!response.ok) throw new Error('Failed to fetch');
  return response.json();
};

toast.promise(fetchData(), {
  loading: 'Loading data...',
  success: (data) => `Loaded ${data.length} items`,
  error: (err) => `Error: ${err.message}`,
});

// Or with static messages
toast.promise(
  fetch('/api/data'),
  {
    loading: 'Loading...',
    success: 'Data loaded!',
    error: 'Failed to load data',
  },
  {
    duration: 5000,
    position: 'top-right',
  }
);
```

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

### Configure Toaster with Custom Styling

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/configuration.md

Examples of configuring the Toaster component with specific positions, gutters, and custom CSS styles.

```typescript
import { Toaster } from 'solid-toast';

<Toaster
  position="top-center"
  gutter={12}
  containerStyle={{
    top: '32px',
  }}
  toastOptions={{
    duration: 5000,
    style: {
      background: '#1f2937',
      color: '#ffffff',
      borderRadius: '8px',
      padding: '16px',
      fontSize: '14px',
    },
    className: 'my-toast',
    iconTheme: {
      primary: '#60a5fa',
      secondary: '#1f2937',
    },
  }}
/>
```

```typescript
import { Toaster } from 'solid-toast';

<Toaster
  position="bottom-right"
  gutter={6}
  containerStyle={{
    bottom: '12px',
    right: '12px',
  }}
  toastOptions={{
    duration: 3000,
    style: {
      background: '#fff',
      color: '#000',
      borderRadius: '6px',
      padding: '8px 12px',
      fontSize: '13px',
      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
    },
  }}
/>
```

```typescript
import { Toaster } from 'solid-toast';
import { toast } from 'solid-toast';

<Toaster
  position="top-right"
  toastOptions={{
    style: {
      background: '#1e1e1e',
      color: '#ffffff',
      borderRadius: '8px',
      padding: '12px',
    },
    iconTheme: {
      primary: '#8b5cf6',
      secondary: '#3f3f3f',
    },
  }}
/>
```

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

### Error Icon Usage Examples

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/icon-components.md

Demonstrates standard usage and custom color configuration for the Error icon.

```typescript
import { Error } from 'solid-toast';

// Standard usage (rendered automatically in error toasts)
const element = <Error />;

// Custom colors
const customElement = (
  <Error
    primary="#dc2626"
    secondary="#fee2e2"
  />
);
```

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

### Implement basic and styled toast notifications

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Examples of triggering a simple toast and a customized toast with specific duration, position, and styles.

```typescript
import toast from 'solid-toast';

const toastId = toast('Hello, world!');

toast('Custom styled toast', {
  duration: 5000,
  position: 'top-center',
  style: {
    'background-color': '#1f2937',
    color: '#ffffff',
  },
});
```

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

### Define IconTheme and Usage

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/types.md

Interface for customizing icon colors, with an example of applying it to a success toast.

```typescript
interface IconTheme {
  primary?: string;
  secondary?: string;
}
```

```typescript
const theme: IconTheme = {
  primary: '#3b82f6',
  secondary: '#dbeafe',
};

toast.success('Done!', { iconTheme: theme });
```

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

### Internal Toast Creator Implementation

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/create-toast-function.md

Example of how createToast is used within a custom toast handler.

```typescript
// Internal implementation
const createToastCreator = (type?: ToastType): ToastHandler =>
  (message: Message, options: ToastOptions = {}) => {
    return createRoot(() => {
      const existingToast = store.toasts.find((t) => t.id === options.id) as Toast;
      const toast = createToast(message, type, { 
        ...existingToast, 
        duration: undefined,  // Don't inherit duration on update
        ...options 
      });
      dispatch({ type: ActionType.UPSERT_TOAST, toast });
      return toast.id;
    });
  };
```

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

### Implement success toast notifications

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Examples of triggering a standard success toast and one with custom icon theme settings.

```typescript
import { toast } from 'solid-toast';

toast.success('Operation completed successfully!');

toast.success('File saved', {
  duration: 3000,
  iconTheme: {
    primary: '#22c55e',
    secondary: '#f0fdf4',
  },
});
```

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

### Resolve Value Usage Example

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/types.md

Demonstrates resolving both static values and functional callbacks using resolveValue.

```typescript
import { resolveValue } from 'solid-toast';

const msg = 'Hello';
const resolved = resolveValue(msg, null); // 'Hello'

const fn = (t) => `Toast: ${t.id}`;
const resolved2 = resolveValue(fn, { id: '1' }); // 'Toast: 1'
```

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

### Manual State Inspection

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/store.md

Provides examples for querying specific toast data or aggregate metrics from the store.

```typescript
import { store } from 'solid-toast';

// Find a specific toast
const myToast = store.toasts.find(t => t.id === 'my-toast-id');

// Check if any loading toasts
const hasLoading = store.toasts.some(t => t.type === 'loading');

// Get total height of all toasts
const totalHeight = store.toasts.reduce((sum, t) => sum + (t.height || 0), 0);
```

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

### Toast Creation Flow

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/architecture.md

The creation process uses createRoot to establish a reactive scope for signal tracking.

```text
toast.success('Message', options)
  ↓
createToastCreator('success')
  ↓
createRoot(() => {
  const toast = createToast('Message', 'success', options)
  dispatch({ type: UPSERT_TOAST, toast })
  return toast.id
})
```

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

### View Project File Structure

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/README.md

Displays the directory organization of the Solid Toast repository.

```text
/api-reference
  ├── toast-function.md                    (Main API: toast() and methods)
  ├── toaster-component.md                 (Toaster component)
  ├── icon-components.md                   (Success, Error, Loader icons)
  ├── utility-functions.md                 (Helper functions & constants)
  ├── store.md                             (State management)
  ├── create-toast-function.md             (Internal toast factory)
  └── internal-components.md               (ToastContainer, ToastBar, etc.)

├── types.md                               (All type definitions)
├── configuration.md                       (Configuration reference)
├── architecture.md                        (Design & data flow)
├── module-structure.md                    (Export hierarchy)
├── quick-start.md                         (Quick examples)
└── README.md                              (This file)
```

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

### Configure Toast Options

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/README.md

Demonstrates how to customize toast behavior and appearance using the options object.

```typescript
toast('Message', {
  duration: 3000,                    // Auto-dismiss time
  position: 'top-right',             // Screen position
  style: { background: '#1f2937' },  // Custom styles
  className: 'my-toast',             // CSS class
  icon: '🎉',                        // Custom icon
  iconTheme: {                        // Icon colors
    primary: '#3b82f6',
    secondary: '#dbeafe',
  },
  unmountDelay: 500,                 // Animation exit time
});
```

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

### toast.loading(message, options)

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Creates a loading toast with a loading indicator.

```APIDOC
## toast.loading(message, options)

### Description
Shows a toast with a loading indicator icon. The content can later be updated.
```

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

### toast.loading()

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Creates a loading toast with an animated spinner icon.

```APIDOC
## toast.loading(message, options)

### Description
Creates a loading toast with an animated spinner icon. Typically updated to success or error state once an operation completes.

### Parameters
- **message** (Message) - Required - Toast content as string, JSX element, or function
- **options** (ToastOptions) - Optional - Configuration object for customizing the toast

### Return
- **Type** (string) - Unique identifier for the created toast. Use this ID to update to success or error state.

### Example
```typescript
import { toast } from 'solid-toast';

const toastId = toast.loading('Saving file...');
```
```

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

### Apply ToastOptions

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/types.md

Demonstrates passing a custom configuration object to a toast function.

```typescript
const options: ToastOptions = {
  id: 'save-toast',
  duration: 3000,
  position: 'bottom-center',
  style: { background: '#1f2937', color: '#ffffff' },
  iconTheme: { primary: '#10b981', secondary: '#d1fae5' },
};

toast.success('Saved!', options);
```

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

### Initialize Reactive Store

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/architecture.md

Defines the initial state structure for the toast manager using SolidJS createStore.

```typescript
const [store, setStore] = createStore<State>({
  toasts: [],
  pausedAt: undefined,
});
```

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

### Toast Position Resolution Logic

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/create-toast-function.md

Implements a three-level fallback mechanism to determine the toast position, starting from specific options to global defaults.

```typescript
position:
  options.position ||  // Toast-specific option
  defaultOpts().toastOptions?.position ||  // Toaster option
  defaultOpts().position ||  // Toaster position prop
  defaultToastOptions.position  // Global default ('top-right')
```

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

### Create a toast with custom options

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Configure toast behavior, styling, icons, and accessibility properties using the ToastOptions object.

```js
toast('This is a simple toast!', {
  duration: 5000,
  position: 'top-right',
  // Add a delay before the toast is removed
  // This can be used to time the toast exit animation
  unmountDelay: 500,
  // Styling - Supports CSS Objects, classes, and inline styles
  // Will be applied to the toast container
  style: {
    'background-color': '#f00',
  },
  className: 'my-custom-class',
  // Custom Icon - Supports text as well as JSX Elements
  icon: '🍩',
  // Set accent colors for default icons that ship with Solid Toast
  iconTheme: {
    primary: '#fff',
    secondary: '#000',
  },
  // Aria Props - Supports all ARIA props
  aria: {
    role: 'status',
    'aria-live': 'polite',
  },
});
```

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

### Visualize Dependency Graph

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/module-structure.md

A hierarchical representation of the project's internal module dependencies and entry points.

```text
solid-toast (entry point)
├── core
│   ├── toast.ts (exports: toast, createToast, defaultOpts, setDefaultOpts)
│   │   └── depends: types, store, defaults, util
│   ├── store.ts (exports: store, dispatch, createTimers, ActionType, Action, State)
│   │   └── depends: types
│   └── defaults.ts (exports: defaultTimeouts, defaultToastOptions, defaultToasterOptions, defaultContainerStyle)
│       └── depends: types
├── components
│   ├── Toaster.tsx (exports: Toaster)
│   │   └── depends: core, types, util
│   ├── ToastContainer.tsx
│   │   └── depends: core, types, util
│   ├── ToastBar.tsx
│   │   └── depends: types, util, icon components
│   ├── SuccessIcon.tsx (exports: Success)
│   ├── ErrorIcon.tsx (exports: Error)
│   ├── LoaderIcon.tsx (exports: Loader)
│   └── IconCircle.tsx (internal, used by icon components)
├── types
│   ├── toast.ts (exports: all toast-related types)
│   └── store.ts (exports: store action types)
└── util
    ├── util.ts (exports: utility functions)
    └── styles.ts (exports: style constants)
```

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

### Toast Lifecycle Flow

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/store.md

Demonstrates the sequence of store dispatches and state transitions during a toast's lifecycle.

```typescript
import { toast } from 'solid-toast';
import { store } from 'solid-toast';

// 1. User calls toast.success()
const toastId = toast.success('Done!', { duration: 3000 });
// Dispatches UPSERT_TOAST
// store.toasts now includes the new toast
// Toast is visible: true

// 2. After 3000ms, timer expires
// Dispatches DISMISS_TOAST
// store.toasts[0].visible becomes false
// Exit animation plays (350ms)
// Removal scheduled for 500ms later (default unmountDelay)

// 3. After 500ms more (total 3850ms from start)
// Dispatches REMOVE_TOAST
// Toast is deleted from store.toasts
// No longer rendered in DOM

// 4. Alternatively, dismiss manually
toast.dismiss(toastId); // Immediately sets visible: false
// Same removal flow as above

// 5. Or remove immediately (no animation)
toast.remove(toastId); // Immediately deleted from DOM
```

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

### toast.success(message, options)

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Creates a success toast with an animated checkmark.

```APIDOC
## toast.success(message, options)

### Description
Creates a notification with an animated checkmark. Color accents can be themed with the iconTheme option.
```

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

### Reactive Context Creation

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/create-toast-function.md

Wraps toast creation in createRoot to ensure reactive dependencies are tracked correctly during the upsert process.

```typescript
const toast = (message: Message, opts?: ToastOptions) => 
  createRoot(() => {
    const existingToast = store.toasts.find((t) => t.id === opts?.id) as Toast;
    const newToast = createToast(message, 'blank', { ...existingToast, duration: undefined, ...opts });
    dispatch({ type: ActionType.UPSERT_TOAST, toast: newToast });
    return newToast.id;
  });
```

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

### toast()

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Creates a blank toast notification.

```APIDOC
## toast(message, opts)

### Description
Create a blank toast notification.

### Signature
`function toast(message: Message, opts?: ToastOptions): string`

### Parameters
- **message** (Message) - Required - Toast content as string, JSX element, or function returning these types
- **opts** (ToastOptions) - Optional - Configuration object for customizing the toast

### Return
- **string** - Unique identifier for the created toast.

### Example
```typescript
import toast from 'solid-toast';

const toastId = toast('Hello, world!');

toast('Custom styled toast', {
  duration: 5000,
  position: 'top-center',
  style: {
    'background-color': '#1f2937',
    color: '#ffffff',
  },
});
```
```

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

### Toast with Options

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/quick-start.md

Customize notification duration, position, and CSS styles.

```typescript
toast('Notification', {
  duration: 5000,
  position: 'bottom-center',
  style: {
    background: '#1f2937',
    color: '#ffffff',
  },
});
```

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

### Using Icons in Custom Toasts

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/icon-components.md

Shows how to include icon components within custom toast layouts or use simple emoji icons.

```typescript
import { toast } from 'solid-toast';
import { Success, Error, Loader } from 'solid-toast';

// Using a default icon in a custom toast
toast.custom((t) => (
  <div style={{ display: 'flex', gap: '12px' }}>
    <Success primary="#3b82f6" secondary="#dbeafe" />
    <div>Custom content with styled icon</div>
  </div>
));

// Or use emoji/text
toast('With emoji', { icon: '🎉' });
```

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

### Create basic toast types

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Standard toast variants for different notification states.

```js
toast('This is a blank toast!');
```

```js
toast.success('Successfully saved!');
```

```js
toast.error('Something went wrong!');
```

```js
toast.loading('Loading Photos...');
```

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

### toast.custom()

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Creates a fully custom toast with arbitrary JSX content and lifecycle access.

```APIDOC
## toast.custom()

### Description
Create a fully custom toast with arbitrary JSX content and lifecycle access.

### Parameters
- **component** ((toast: Toast) => JSX.Element) - Required - Function receiving the toast object and returning JSX to render
- **options** (DefaultToastOptions) - Optional - Configuration object for customizing the toast

### Return
- **Type**: string - Unique identifier for the created toast.

### Example
```typescript
import { toast } from 'solid-toast';

toast.custom((t) => (
  <div style={{ padding: '16px' }}>
    <h2>Custom Toast</h2>
    <p>This toast is {t.visible ? 'visible' : 'hidden'}</p>
    <button onClick={() => toast.dismiss(t.id)}>
      Close
    </button>
  </div>
), {
  duration: Infinity,
  unmountDelay: 300,
});
```
```

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

### Toaster with Default Toast Options

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toaster-component.md

Configuring global toast behavior and styling via the toastOptions prop.

```typescript
import { Toaster } from 'solid-toast';

export const App = () => {
  return (
    <div>
      <Toaster
        position="top-center"
        gutter={16}
        containerClassName="my-toast-container"
        containerStyle={{
          padding: '24px',
        }}
        toastOptions={{
          duration: 5000,
          className: 'my-toast',
          style: {
            background: '#1f2937',
            color: '#ffffff',
            borderRadius: '8px',
            padding: '16px',
          },
          iconTheme: {
            primary: '#3b82f6',
            secondary: '#1f2937',
          },
        }}
      />
    </div>
  );
};
```

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

### createToast Implementation

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/create-toast-function.md

The internal logic for merging default options, Toaster props, and user-provided overrides.

```typescript
export const createToast = (message: Message, type: ToastType = 'blank', options: ToastOptions): Toast => ({
  // Merge in order of precedence
  ...defaultToastOptions,
  ...defaultOpts().toastOptions,
  ...options,
  
  // Set directly (not overridable by options)
  type,
  message,
  pauseDuration: 0,
  createdAt: Date.now(),
  visible: true,
  id: options.id || generateID(),
  paused: false,
  
  // Nested merge for styles
  style: {
    ...defaultToastOptions.style,
    ...defaultOpts().toastOptions?.style,
    ...options.style,
  },
  
  // Use provided duration or type default
  duration: options.duration || defaultOpts().toastOptions?.duration || defaultTimeouts[type],
  
  // Position precedence: option > Toaster default > global default
  position:
    options.position || defaultOpts().toastOptions?.position || defaultOpts().position || defaultToastOptions.position,
});
```

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

### Apply Icon Theme Overrides

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/configuration.md

Demonstrates using the configured icon theme and overriding it for specific toast instances.

```typescript
toast.success('Done!'); // Uses configured icon theme
toast.error('Oops!', {
  // Override for this toast
  iconTheme: {
    primary: '#ef4444',
    secondary: '#7f1d1d',
  },
});
```

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

### toast(message, options)

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Creates a new toast notification. The first argument is the message, and the second is an optional configuration object.

```APIDOC
## toast(message, options)

### Description
Creates a toast notification. Options can include duration, position, unmountDelay, style, className, icon, iconTheme, and aria properties.

### Parameters
- **message** (string/JSX) - Required - The content of the toast.
- **options** (ToastOptions) - Optional - Configuration object for the toast.
```

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

### createToast(message, type, options)

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/create-toast-function.md

Creates a complete Toast object by merging provided options with library defaults.

```APIDOC
## createToast(message, type, options)

### Description
Factory function that creates a complete Toast object by merging provided options with defaults. This function is typically used to prepare a toast object before dispatching it to the store.

### Parameters
- **message** (Message) - Required - Toast content; string, JSX, or function receiving Toast object
- **type** (ToastType) - Optional - Toast type: 'success', 'error', 'loading', 'blank', or 'custom'. Defaults to 'blank'.
- **options** (ToastOptions) - Required - Partial configuration to override defaults.

### Return
- **Toast** (Object) - A complete Toast object ready to be dispatched.

### Example
```typescript
import { createToast } from 'solid-toast';

const toast = createToast('Saved!', 'success', {
  duration: 3000,
  position: 'top-center',
  style: { background: '#22c55e', color: '#fff' },
});
```
```

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

### ToastOptions

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/configuration.md

Configuration options passed as the second parameter when calling toast functions to customize individual toast behavior.

```APIDOC
## ToastOptions

### Description
Options used to customize individual toast instances, overriding global defaults.

### Options
- **id** (string) - Optional - Unique identifier; updates existing toast if ID matches.
- **duration** (number) - Optional - Milliseconds before auto-dismiss; use Infinity to disable.
- **position** (ToastPosition) - Optional - Override global Toaster position.
- **className** (string) - Optional - CSS class(es) for the toast wrapper.
- **style** (JSX.CSSProperties) - Optional - Inline CSS styles for the toast wrapper.
- **icon** (JSX.Element | string) - Optional - Custom icon.
- **unmountDelay** (number) - Optional - Delay in ms after dismissal before DOM removal. Defaults to 500.
- **ariaProps** (AriaProps) - Optional - Accessibility attributes.
- **iconTheme** (IconTheme) - Optional - Colors for default icons.
```

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

### Manage Per-Toast Configuration

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/configuration.md

Shows how to set individual toast durations, positions, and update existing toasts using IDs.

```typescript
import { toast } from 'solid-toast';

// Quick notification
toast('Quick info', {
  duration: 2000,
  position: 'bottom-left',
});

// Long-lived notification
toast.loading('Processing...', {
  id: 'process-1',
  position: 'top-center',
  duration: Infinity,
});

// Update the loading toast
setTimeout(() => {
  toast.success('Complete!', {
    id: 'process-1', // Updates the existing toast
    duration: 3000,
  });
}, 5000);
```

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

### Create a custom toast with dynamic content

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/quick-start.md

Render custom JSX inside a toast and manage its lifecycle using SolidJS signals and effects.

```typescript
toast.custom((t) => {
  const [progress, setProgress] = createSignal(0);

  createEffect(() => {
    const timer = setInterval(() => {
      setProgress(p => {
        if (p >= 100) {
          clearInterval(timer);
          toast.dismiss(t.id);
          return p;
        }
        return p + 10;
      });
    }, 200);
  });

  return (
    <div style={{ padding: '12px' }}>
      <div>Progress: {progress()}%</div>
      <div style={{
        background: '#e5e7eb',
        height: '4px',
        borderRadius: '2px',
        marginTop: '8px',
      }}>
        <div style={{
          background: '#3b82f6',
          height: '100%',
          width: `${progress()}%`,
          borderRadius: '2px',
          transition: 'width 100ms',
        }} />
      </div>
    </div>
  );
}, { duration: Infinity });
```

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

### Define Entry Point Exports

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/module-structure.md

The primary entry point for the library, re-exporting core functionality and types.

```typescript
import { toast } from './core';
export * from './types';
import { Toaster } from './components';

export { toast, Toaster };
export default toast;
```

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

### Basic Toast Creation

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/create-toast-function.md

Creating blank and success toasts using the createToast function.

```typescript
import { createToast } from 'solid-toast';
import { dispatch, ActionType } from 'solid-toast';

// Create a blank toast with defaults
const toast1 = createToast('Hello', 'blank', {});
dispatch({ type: ActionType.ADD_TOAST, toast: toast1 });

// Create a success toast with custom options
const toast2 = createToast('Saved!', 'success', {
  duration: 3000,
  position: 'top-center',
  style: { background: '#22c55e', color: '#fff' },
});
dispatch({ type: ActionType.ADD_TOAST, toast: toast2 });
```

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

### Package Export Configuration

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/module-structure.md

The package.json exports configuration defining how the library is resolved across different environments.

```json
{
  "exports": {
    "solid": {
      "development": "./dist/source/index.jsx",
      "import": "./dist/source/index.jsx"
    },
    "import": {
      "types": "./dist/types/index.d.ts",
      "default": "./dist/esm/index.js"
    },
    "require": "./dist/cjs/index.js"
  }
}
```

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

### Basic Toaster Implementation

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toaster-component.md

Standard usage of the Toaster component within a root layout.

```typescript
import { Toaster } from 'solid-toast';

export const App = () => {
  return (
    <div>
      <header>My App</header>
      <main>
        {/* Your content */}
      </main>
      <Toaster position="bottom-right" gutter={12} />
    </div>
  );
};
```

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

### dispatch(action: Action): void

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/store.md

Processes an action to update the store state. The action parameter is a discriminated union of possible operations.

```APIDOC
## dispatch(action: Action)

### Description
Processes an action and updates the store state. This is the primary method for managing toast lifecycle and state.

### Parameters
- **action** (Action) - Required - A discriminated union object containing the type of operation and associated data.

### Supported Action Types
- **ADD_TOAST**: Adds a new toast to the front of the toasts array.
- **UPSERT_TOAST**: Adds a new toast or updates an existing one if the ID matches.
- **UPDATE_TOAST**: Merges provided fields into an existing toast by ID.
- **DISMISS_TOAST**: Sets visible to false and triggers exit animation for a specific toast or all toasts.
- **REMOVE_TOAST**: Immediately deletes a specific toast or all toasts from the array.
- **START_PAUSE**: Pauses all toast timers.
- **END_PAUSE**: Resumes all toast timers.

### Example
```typescript
import { dispatch, ActionType } from 'solid-toast';

// Add a toast
dispatch({ type: ActionType.ADD_TOAST, toast: { id: '1', message: 'Hello' } });

// Dismiss a toast
dispatch({ type: ActionType.DISMISS_TOAST, toastId: '1' });
```
```

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

### Create custom toasts

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Render custom JSX elements and optionally hook into the toast lifecycle.

```jsx
toast.custom(() => (
  <div>
    <h1>Custom Toast</h1>
    <p>This is a custom toast!</p>
  </div>
));
```

```jsx
toast.custom(
  (t) => (
    <div>
      <h1>Custom Toast</h1>
      <p>This is a custom toast!</p>
      <p>{t.visible ? 'Showing' : 'I will close in 1 second'}</p>
      <button onClick={() => toast.dismiss(t.id)}>Close Toast</button>
    </div>;
  ),
  {
    unmountDelay: 1000,
  }
);
```

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

### createTimers()

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/store.md

Sets up dismissal timers for all active toasts based on their duration and returns an array of timeout IDs.

```APIDOC
## createTimers()

### Description
Sets up dismissal timers for all active toasts based on their duration. It calculates the remaining time for each toast and schedules a dismissal if necessary.

### Signature
`function createTimers(): (ReturnType<typeof setTimeout> | undefined)[]`

### Returns
- **(number | undefined)[]**: An array of timeout IDs. Includes `undefined` for toasts with infinite duration or those that have already expired.

### Usage
```typescript
import { createTimers } from 'solid-toast';
import { onCleanup } from 'solid-js';

onMount(() => {
  const timers = createTimers();
  onCleanup(() => {
    timers?.forEach(t => t && clearTimeout(t));
  });
});
```
```

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

### Style Constants

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/utility-functions.md

Pre-defined CSS property objects for styling toast components.

```APIDOC
## Style Constants

### toastBarBase
Base styles applied to all non-custom toasts, including flex layout, shadow, and border-radius.

### messageContainer
Styles for the message text container, ensuring proper alignment and whitespace handling.

### iconContainer
Styles for the icon container, ensuring fixed dimensions and centered content.
```

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

### Default Toast Options

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/utility-functions.md

Provides the default configuration object for individual toast instances.

```typescript
const defaultToastOptions: Required<ToastOptions> = {
  id: '',
  icon: '',
  unmountDelay: 500,
  duration: 3000,
  ariaProps: {
    role: 'status',
    'aria-live': 'polite',
  },
  className: '',
  style: {},
  position: 'top-right',
  iconTheme: {},
}
```

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

### Component Tree Structure

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/module-structure.md

Visual representation of the component hierarchy when solid-toast is mounted in an application.

```text
App
└── Toaster (mounts once)
    └── <div> (container, fixed position)
        └── For (reactive list)
            ├── ToastContainer
            │   └── ToastBar (if not custom type)
            │       ├── Success/Error/Loader icon (if applicable)
            │       └── message container
            ├── ToastContainer
            │   └── custom JSX (if custom type)
            └── ...
```

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

### toast.error()

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Creates an error toast with an animated error icon.

```APIDOC
## toast.error(message, options)

### Description
Creates an error toast with an animated error icon.

### Parameters
- **message** (Message) - Required - Toast content as string, JSX element, or function
- **options** (ToastOptions) - Optional - Configuration object for customizing the toast

### Return
- **Type** (string) - Unique identifier for the created toast.

### Example
```typescript
import { toast } from 'solid-toast';

toast.error('Something went wrong!');
```
```

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

### Show Simple Toast

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/README.md

Displays a basic text notification.

```typescript
toast('Operation complete');
```

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

### Configure the Toaster component

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Set global defaults and container styles for all rendered toasts.

```jsx
<Toaster
  position="top-center"
  // Spacing between each toast in pixels
  gutter={8}
  containerClassName=""
  containerStyle={{}}
  toastOptions={{
    // Define default options that each toast will inherit. Will be overwritten by individual toast options
    className: '',
    duration: 5000,
    style: {
      background: '#363636',
      color: '#fff',
    },
  }}
/>
```

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

### toast(msg, opts?)

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/README.md

Displays a basic toast notification with an optional message and configuration options.

```APIDOC
## toast(msg, opts?)

### Description
Displays a standard toast notification. The `msg` parameter is the content to display, and `opts` is an optional configuration object for duration, position, and styling.

### Parameters
- **msg** (string|JSX.Element) - Required - The content to display in the toast.
- **opts** (object) - Optional - Configuration object including duration, position, style, className, icon, and iconTheme.
```

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

### Define Toast Bar Base Styles

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/utility-functions.md

Base CSS properties for non-custom toast containers.

```typescript
const toastBarBase: JSX.CSSProperties = {
  display: 'flex',
  'align-items': 'center',
  color: '#363636',
  background: 'white',
  'box-shadow': '0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)',
  'max-width': '350px',
  'pointer-events': 'auto',
  padding: '8px 10px',
  'border-radius': '4px',
  'line-height': '1.3',
  'will-change': 'transform',
}
```

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

### Reacting to Store Changes

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/store.md

Uses createEffect to observe changes in the toast store state.

```typescript
import { store } from 'solid-toast';
import { createEffect } from 'solid-js';

createEffect(() => {
  console.log(`Toast count: ${store.toasts.length}`);
  console.log(`Paused: ${store.pausedAt !== undefined}`);
});
```

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

### Create a custom toast with toast.custom()

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Defines the signature for the custom toast function.

```typescript
function custom(
  component: (toast: Toast) => JSX.Element,
  options?: DefaultToastOptions
): string
```

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

### Customize Toaster

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/quick-start.md

Configure global settings for the Toaster component.

```typescript
<Toaster
  position="top-center"
  gutter={12}
  toastOptions={{
    duration: 4000,
    style: {
      background: '#363636',
      color: '#fff',
    },
  }}
/>
```

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

### toast.error(message, options)

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Creates an error toast with an animated error icon.

```APIDOC
## toast.error(message, options)

### Description
Creates a notification with an animated error icon. Color accents can be themed with the iconTheme option.
```

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

### Customizing Icon Themes

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/icon-components.md

Configures icon colors globally for specific toast types using the iconTheme option.

```typescript
import { toast } from 'solid-toast';

toast.success('Success!', {
  iconTheme: {
    primary: '#06b6d4',    // cyan
    secondary: '#ecf0f1',  // light gray
  },
});

toast.error('Error!', {
  iconTheme: {
    primary: '#f97316',   // orange
    secondary: '#fed7aa', // light orange
  },
});

toast.loading('Loading...', {
  iconTheme: {
    primary: '#8b5cf6',   // purple
    secondary: '#ede9fe', // light purple
  },
});
```

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

### Configure Toast Defaults

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/README.md

Default settings for individual toast notifications, including duration and accessibility properties.

```typescript
duration: {
  success: 2000,
  error: 4000,
  loading: Infinity,
  blank: 4000,
  custom: 4000,
}
position: 'top-right'
unmountDelay: 500
ariaProps: { role: 'status', 'aria-live': 'polite' }
className: ''
style: {}
icon: ''
iconTheme: {}
```

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

### ToastBar Animation Implementation

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/internal-components.md

Uses the Web Animations API to handle toast entry and exit animations based on visibility and position.

```typescript
createEffect(() => {
  if (!el) return;
  const direction = getToastYDirection(props.toast, props.position);
  
  if (props.toast.visible) {
    // Enter animation
    el.animate(
      [
        { transform: `translate3d(0,${direction * -200}%,0) scale(.6)`, opacity: 0.5 },
        { transform: 'translate3d(0,0,0) scale(1)', opacity: 1 },
      ],
      {
        duration: 350,
        fill: 'forwards',
        easing: 'cubic-bezier(.21,1.02,.73,1)'
      }
    );
  } else {
    // Exit animation
    el.animate(
      [
        { transform: 'translate3d(0,0,-1px) scale(1)', opacity: 1 },
        { transform: `translate3d(0,${direction * -150}%,-1px) scale(.4)`, opacity: 0 },
      ],
      {
        duration: 400,
        fill: 'forwards',
        easing: 'cubic-bezier(.06,.71,.55,1)'
      }
    );
  }
});
```

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

### ToastBar Rendered Structure

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/internal-components.md

The HTML structure and styling logic for the ToastBar component.

```html
<div
  ref={el}
  class={toast.className}
  style={{
    display: 'flex',
    alignItems: 'center',
    background: 'white',
    boxShadow: '...',
    maxWidth: '350px',
    padding: '8px 10px',
    borderRadius: '4px',
    ...toastBarBase,
    ...toast.style,
  }}
>
  <!-- Icon (if present or based on type) -->
  <div style={iconContainer}>
    {toast.icon ? (
      toast.icon
    ) : toast.type === 'loading' ? (
      <Loader {...toast.iconTheme} />
    ) : toast.type === 'success' ? (
      <Success {...toast.iconTheme} />
    ) : toast.type === 'error' ? (
      <Error {...toast.iconTheme} />
    ) : null}
  </div>

  <!-- Message -->
  <div style={messageContainer} {...toast.ariaProps}>
    {resolveValue(toast.message, toast)}
  </div>
</div>
```

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

### Trigger Enter Animation for ToastBar

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/architecture.md

Executes a scale, slide, and fade-in animation when a toast becomes visible. The direction variable should be 1 for top positions and -1 for bottom.

```javascript
el.animate(
  [
    { 
      transform: `translate3d(0,${direction * -200}%,0) scale(.6)`,
      opacity: 0.5 
    },
    { 
      transform: 'translate3d(0,0,0) scale(1)',
      opacity: 1 
    },
  ],
  {
    duration: 350,
    fill: 'forwards',
    easing: 'cubic-bezier(.21,1.02,.73,1)'
  }
);
```

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

### State Interface

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/types.md

Defines the complete state structure of the toast store.

```typescript
interface State {
  toasts: Toast[];
  pausedAt: number | undefined;
}
```

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

### Default Toaster Options

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/utility-functions.md

Provides the default configuration for the Toaster component.

```typescript
const defaultToasterOptions: ToasterProps = {
  position: 'top-right',
  toastOptions: defaultToastOptions,
  gutter: 8,
  containerStyle: {},
  containerClassName: '',
}
```

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

### Top-Level API Exports

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/module-structure.md

List of primary exports and types available from the main solid-toast package.

```typescript
// Main API
toast: ToastHandler (with methods: success, error, loading, custom, promise, dismiss, remove)
Toaster: Component<ToasterProps>

// Types (re-exported from types module)
type Toast
type ToastType
type ToastPosition
type ToastOptions
type ToasterProps
type Renderable
type IconTheme
type Message
type ValueOrFunction<TValue, TArg>
type ValueFunction<TValue, TArg>
type ToastHandler
type ToastContainerProps
type ToastBarProps
type IconProps
type ToastTimeouts
type DefaultToastOptions
type Action
enum ActionType
interface Toast
interface ToasterProps
interface IconTheme
interface ToastContainerProps
interface ToastBarProps
```

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

### <Toaster />

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

The component responsible for rendering all toasts.

```APIDOC
## <Toaster />

### Description
This component renders all toasts. It accepts props like position, gutter, containerClassName, containerStyle, and toastOptions for default configurations.
```

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

### Batch Multiple Messages

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/quick-start.md

Use a single loading toast and update it upon completion to avoid flooding the UI with multiple notifications.

```typescript
// Instead of creating many toasts
async function saveMultipleFiles(files) {
  const id = toast.loading(`Saving ${files.length} files...`);
  
  for (const file of files) {
    await saveFile(file);
  }
  
  toast.success(`${files.length} files saved`, { id }); // Single final toast
}
```

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

### Custom Icons

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/quick-start.md

Add emojis or custom icon themes to notifications.

```typescript
import { toast } from 'solid-toast';

// With emoji
toast('Great job!', { icon: '🎉' });

// With custom colors
toast.success('Done', {
  iconTheme: {
    primary: '#3b82f6',
    secondary: '#dbeafe',
  },
});
```

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

### Render custom JSX with toast.custom

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/toast-function.md

Use a function to access the toast object and its state for dynamic content rendering.

```typescript
toast.custom((t) => (
  <div>
    <p>Toast ID: {t.id}</p>
    <p>{t.visible ? 'Visible' : 'Hiding'}</p>
  </div>
));
```

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

### Dispatch START_PAUSE Action

Source: https://github.com/ardeora/solid-toast/blob/main/_autodocs/api-reference/store.md

Sets pausedAt to the current timestamp and marks all toasts as paused.

```typescript
dispatch({
  type: ActionType.START_PAUSE,
  time: Date.now(),
});
```