<div class="grid grid-cols-2 md:grid-cols-5 gap-3">
                <button class="btn positive" onclick="hygge.toast.success('Operation completed successfully!')">
                    Success
                </button>
                <button class="btn negative" onclick="hygge.toast.error('An error occurred!')">
                    Error
                </button>
                <button class="btn info" onclick="hygge.toast.info('Here is some information')">
                    Info
                </button>
                <button class="btn warning" onclick="hygge.toast.warning('This is a warning message')">
                    Warning
                </button>
                <button class="btn primary" onclick="hygge.toast({type: 'primary', header: 'Primary notification'})">
                    Primary
                </button>
            </div>

<div class="grid grid-cols-2 md:grid-cols-5 gap-3">
                <button class="btn tiny" onclick="hygge.toast({header: 'Tiny toast', size: 'tiny', type: 'info'})">
                    Tiny
                </button>
                <button class="btn small" onclick="hygge.toast({header: 'Small toast', size: 'small', type: 'info'})">
                    Small
                </button>
                <button class="btn" onclick="hygge.toast({header: 'Default size', type: 'info'})">
                    Default
                </button>
                <button class="btn large" onclick="hygge.toast({header: 'Large toast', description: 'With more content', size: 'large', type: 'info'})">
                    Large
                </button>
                <button class="btn big" onclick="hygge.toast({header: 'Big toast', description: 'Even more space', size: 'big', type: 'info'})">
                    Big
                </button>
            </div>

<div class="grid grid-cols-3 gap-2 max-w-md mx-auto">
                <button class="btn tiny" onclick="hygge.toast({header: 'Top Left', position: 'top-left', type: 'info'})">
                    ↖ Top Left
                </button>
                <button class="btn tiny" onclick="hygge.toast({header: 'Top Center', position: 'top-center', type: 'info'})">
                    ↑ Top Center
                </button>
                <button class="btn tiny" onclick="hygge.toast({header: 'Top Right', position: 'top-right', type: 'info'})">
                    ↗ Top Right
                </button>
                
                <button class="btn tiny" onclick="hygge.toast({header: 'Middle Left', position: 'middle-left', type: 'info'})">
                    ← Mid Left
                </button>
                <button class="btn tiny" onclick="hygge.toast({header: 'Middle Center', position: 'middle-center', type: 'info'})">
                    • Mid Center
                </button>
                <button class="btn tiny" onclick="hygge.toast({header: 'Middle Right', position: 'middle-right', type: 'info'})">
                    → Mid Right
                </button>
                
                <button class="btn tiny" onclick="hygge.toast({header: 'Bottom Left', position: 'bottom-left', type: 'info'})">
                    ↙ Bot Left
                </button>
                <button class="btn tiny" onclick="hygge.toast({header: 'Bottom Center', position: 'bottom-center', type: 'info'})">
                    ↓ Bot Center
                </button>
                <button class="btn tiny" onclick="hygge.toast({header: 'Bottom Right', position: 'bottom-right', type: 'info'})">
                    ↘ Bot Right
                </button>
            </div>
            
            
            <div class="mt-4">
                <p class="text-sm text-gray-600 mb-3">Full Width Positions (Perfect for Mobile):</p>
                <div class="grid grid-cols-2 gap-3">
                    <button class="btn primary" onclick="hygge.toast.clear(); hygge.toast({header: 'Top Stretch', description: 'Full width notification at the top', position: 'topstretch', type: 'info', maxToasts: 1})">
                        ⬆️ Top Stretch
                    </button>
                    <button class="btn primary" onclick="hygge.toast.clear(); hygge.toast({header: 'Bottom Stretch', description: 'Full width notification at the bottom', position: 'bottomstretch', type: 'info', maxToasts: 1})">
                        ⬇️ Bottom Stretch
                    </button>
                </div>
            </div>

<div class="grid grid-cols-3 gap-3">
                <button class="btn" onclick="hygge.toast({header: 'Light variant', variant: 'light', type: 'success'})">
                    Light
                </button>
                <button class="btn filled positive" onclick="hygge.toast({header: 'Filled variant', variant: 'filled', type: 'success'})">
                    Filled (Default)
                </button>
                <button class="btn outline" onclick="hygge.toast({header: 'Outline variant', variant: 'outline', type: 'success'})">
                    Outline
                </button>
            </div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                <button class="btn" onclick="hygge.toast({header: 'Auto dismiss', displayTime: 3, type: 'info'})">
                    3 Seconds
                </button>
                <button class="btn" onclick="hygge.toast({header: 'Quick toast', displayTime: 1, type: 'info'})">
                    1 Second
                </button>
                <button class="btn warning" onclick="hygge.toast({header: 'Persistent toast', description: 'Won\'t auto-dismiss', displayTime: 0, type: 'warning'})">
                    No Dismiss
                </button>
                <button class="btn primary" onclick="hygge.toast({header: 'With progress bar', description: 'Watch the indicator', displayTime: 5, showProgress: true, type: 'info'})">
                    With Progress
                </button>
            </div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                <button class="btn" onclick="hygge.toast({
                    header: 'Item deleted',
                    type: 'info',
                    actions: [{
                        text: 'Undo',
                        onClick: function() {
                            hygge.toast.success('Item restored!');
                        }
                    }]
                })">
                    With Undo
                </button>
                
                <button class="btn" onclick="hygge.toast({
                    header: 'New message',
                    description: 'From John Doe',
                    type: 'info',
                    size: 'large',
                    displayTime: 0,
                    actions: [
                        {text: 'View', onClick: function() { hygge.toast.info('Opening...'); }},
                        {text: 'Reply', onClick: function() { hygge.toast.info('Replying...'); }}
                    ]
                })">
                    Multi Actions
                </button>
                
                <button class="btn" onclick="hygge.toast({
                    header: 'Click me!',
                    description: 'Toast responds to clicks',
                    type: 'info',
                    displayTime: 0,
                    onClick: function(e, toast) {
                        alert('Toast clicked!');
                        toast.find('.close').click();
                    }
                })">
                    Clickable
                </button>
                
                <button class="btn" onclick="hygge.toast({
                    header: 'Custom Icon',
                    description: 'With heart icon',
                    type: 'info',
                    icon: 'heart'
                })">
                    Custom Icon
                </button>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <button class="btn success" onclick="hygge.toast.clear(); hygge.toast({
                    header: '✅ Changes Saved',
                    description: 'Your profile has been updated successfully',
                    type: 'success',
                    position: 'topstretch',
                    displayTime: 4,
                    showProgress: true,
                    maxToasts: 1
                })">
                    Mobile Success (Top)
                </button>
                
                <button class="btn negative" onclick="hygge.toast.clear(); hygge.toast({
                    header: '⚠️ No Internet Connection',
                    description: 'Check your network settings and try again',
                    type: 'error',
                    position: 'bottomstretch',
                    displayTime: 0,
                    dismissible: true,
                    maxToasts: 1
                })">
                    Mobile Error (Bottom)
                </button>
                
                <button class="btn warning" onclick="hygge.toast.clear(); hygge.toast({
                    header: '🔄 Syncing...',
                    description: 'Your data is being synchronized',
                    type: 'info',
                    position: 'topstretch',
                    showProgress: true,
                    displayTime: 6,
                    maxToasts: 1
                })">
                    Sync Status (Top)
                </button>
                
                <button class="btn primary" onclick="hygge.toast.clear(); hygge.toast({
                    header: '📱 Update Available',
                    description: 'A new version is ready to install',
                    type: 'warning',
                    position: 'bottomstretch',
                    displayTime: 0,
                    maxToasts: 1,
                    actions: [{
                        text: 'Update Now',
                        onClick: function() { hygge.toast.clear(); hygge.toast.success('Updating...', {position: 'topstretch', maxToasts: 1}); }
                    }]
                })">
                    Update Notification
                </button>
            </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                <button class="btn positive" onclick="hygge.toast({
                    header: 'Upload Complete',
                    description: '5 files uploaded successfully (2.3 MB)',
                    type: 'success',
                    size: 'large',
                    position: 'bottom-right',
                    displayTime: 7,
                    showProgress: true,
                    variant: 'filled',
                    actions: [{
                        text: 'View Files',
                        onClick: function() { hygge.toast.info('Opening file viewer...'); }
                    }]
                })">
                    Success with Details
                </button>
                
                <button class="btn negative" onclick="hygge.toast({
                    header: 'Upload Failed',
                    description: 'Check your connection and try again.',
                    type: 'error',
                    size: 'large',
                    position: 'top-center',
                    displayTime: 0,
                    variant: 'filled',
                    actions: [
                        {
                            text: 'Retry',
                            onClick: function(e, toast) {
                                toast.find('.close').click();
                                hygge.toast.info('Retrying...');
                                setTimeout(() => hygge.toast.success('Success!'), 2000);
                            }
                        },
                        {text: 'Help', href: '#'}
                    ]
                })">
                    Error with Actions
                </button>
                
                <button class="btn warning" onclick="
                    hygge.toast.success('First toast');
                    setTimeout(() => hygge.toast.warning('Second toast'), 500);
                    setTimeout(() => hygge.toast.info('Third toast'), 1000);
                    setTimeout(() => hygge.toast.error('Fourth toast'), 1500);
                ">
                    Multiple Toasts
                </button>
            </div>
            
            <div class="mt-4">
                <button class="btn negative" onclick="hygge.toast['clear']()">
                    Clear All Toasts
                </button>
            </div>

<p class="text-sm text-gray-600 mb-4">
                The <code>hygge.say</code> function processes complex message arrays and displays them as toasts.
            </p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <button class="btn" onclick="hygge.say('S:Data saved successfully!')">
                    Success Message
                </button>
                
                <button class="btn" onclick="hygge.say('E:Validation failed. Check your input.')">
                    Error Message
                </button>
                
                <button class="btn" onclick="hygge.say([
                    'S:Profile updated!',
                    'I:Email verification sent.',
                    'A:Check your spam folder.'
                ])">
                    Multiple Messages
                </button>
                
                <button class="btn" onclick="hygge.say({
                    type: 'success',
                    header: 'Operation Complete',
                    description: 'Changes saved to database.'
                })">
                    Object Format
                </button>
            </div>

<div class="overflow-x-auto">
                <table class="table-auto w-full text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-2 text-left">Option</th>
                            <th class="px-4 py-2 text-left">Type</th>
                            <th class="px-4 py-2 text-left">Default</th>
                            <th class="px-4 py-2 text-left">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y">
                        <tr>
                            <td class="px-4 py-2 font-mono">header</td>
                            <td class="px-4 py-2">string</td>
                            <td class="px-4 py-2">''</td>
                            <td class="px-4 py-2">Toast title/header text</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">description</td>
                            <td class="px-4 py-2">string</td>
                            <td class="px-4 py-2">''</td>
                            <td class="px-4 py-2">Toast body/description text</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">type</td>
                            <td class="px-4 py-2">string</td>
                            <td class="px-4 py-2">'info'</td>
                            <td class="px-4 py-2">success, error, info, warning, primary</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">icon</td>
                            <td class="px-4 py-2">string</td>
                            <td class="px-4 py-2">auto</td>
                            <td class="px-4 py-2">Custom icon name (overrides type default)</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">displayTime</td>
                            <td class="px-4 py-2">number/null</td>
                            <td class="px-4 py-2">null</td>
                            <td class="px-4 py-2">Seconds (0=no dismiss, null=auto-calculate)</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">position</td>
                            <td class="px-4 py-2">string</td>
                            <td class="px-4 py-2">'top-right'</td>
                            <td class="px-4 py-2">9 position combinations</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">size</td>
                            <td class="px-4 py-2">string</td>
                            <td class="px-4 py-2">'small'</td>
                            <td class="px-4 py-2">tiny, small (default), '', large, big</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">showProgress</td>
                            <td class="px-4 py-2">boolean</td>
                            <td class="px-4 py-2">false</td>
                            <td class="px-4 py-2">Show countdown progress bar</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">dismissible</td>
                            <td class="px-4 py-2">boolean</td>
                            <td class="px-4 py-2">true</td>
                            <td class="px-4 py-2">Show close button</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">variant</td>
                            <td class="px-4 py-2">string</td>
                            <td class="px-4 py-2">'filled'</td>
                            <td class="px-4 py-2">light, filled, outline</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">actions</td>
                            <td class="px-4 py-2">array</td>
                            <td class="px-4 py-2">[]</td>
                            <td class="px-4 py-2">Action buttons/links</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">onClick</td>
                            <td class="px-4 py-2">function</td>
                            <td class="px-4 py-2">null</td>
                            <td class="px-4 py-2">Toast click handler</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2 font-mono">onClose</td>
                            <td class="px-4 py-2">function</td>
                            <td class="px-4 py-2">null</td>
                            <td class="px-4 py-2">Close event callback</td>
                        </tr>
                    </tbody>
                </table>
            </div>