@mks2508/better-logger 0.14.0-alpha.2 → 0.18.2-alpha.2

package/docs/STYLING.md

@@ -1,405 +0,0 @@
-# 🎨 Styling Module
-
-**Advanced visual features with themes, SVG support, and CSS animations**
-
-```typescript
-import { setTheme, logAnimated, logWithSVG } from '@mks2508/better-logger/styling'
-```
-
-**Bundle Size:** 26KB • **Gzipped:** 5KB
-
----
-
-## ✨ Features
-
-- 🌈 **5 Built-in Themes** (default, dark, neon, cyberpunk, retro)
-- 🎭 **5 Banner Types** (simple, ascii, unicode, svg, animated)
-- 🖼️ **SVG Background Support** with custom graphics
-- ✨ **CSS Animations** with keyframe injection
-- 🎨 **Style Builder API** for custom console styles
-- 🎯 **Theme-aware Components** with automatic styling
-- 🔄 **Live Theme Switching** with visual feedback
-
-## 🚀 Quick Start
-
-```typescript
-import { 
-  setTheme, showBanner, 
-  logAnimated, logWithSVG,
-  createStyle, stylePresets
-} from '@mks2508/better-logger/styling'
-
-// Apply theme with visual banner
-setTheme('cyberpunk')
-showBanner('animated')
-
-// Animated logging
-logAnimated('🚀 Application starting...', 3)
-
-// SVG backgrounds
-const logoSVG = `<svg>...</svg>`
-logWithSVG('Company Logo', logoSVG, {
-  width: 400,
-  height: 80
-})
-
-// Custom styles
-const customStyle = createStyle()
-  .bg('linear-gradient(45deg, #ff6b6b, #feca57)')
-  .color('white')
-  .padding('15px')
-  .rounded('10px')
-  .build()
-
-console.log('%cCustom Message', customStyle)
-```
-
-## 🌈 Theme System
-
-### Available Themes
-
-| Theme | Primary Colors | Best For |
-|-------|---------------|----------|
-| `default` | Blue gradients | Professional apps |
-| `dark` | Dark theme | Night mode |
-| `neon` | Bright neon colors | Gaming/Creative |
-| `cyberpunk` | Purple/Pink | Futuristic UIs |
-| `retro` | Warm vintage | Nostalgic designs |
-
-### Theme Usage
-
-```typescript
-import { setTheme, getAvailableThemes } from '@mks2508/better-logger/styling'
-
-// Apply theme
-setTheme('neon') // Shows themed banner automatically
-
-// List available themes
-console.log(getAvailableThemes())
-// ['default', 'dark', 'neon', 'cyberpunk', 'retro']
-
-// Theme switching
-const themes = ['default', 'dark', 'neon']
-themes.forEach((theme, index) => {
-  setTimeout(() => setTheme(theme), index * 2000)
-})
-```
-
-## 🎭 Banner System
-
-### Banner Types
-
-```typescript
-import { showBanner, setBannerType } from '@mks2508/better-logger/styling'
-
-// Show specific banner
-showBanner('simple')    // Text-only
-showBanner('ascii')     // ASCII art  
-showBanner('unicode')   // Unicode box drawing
-showBanner('svg')       // SVG graphics
-showBanner('animated')  // CSS animations
-
-// Set default banner type
-setBannerType('svg')
-```
-
-### Banner Examples
-
-**ASCII Banner:**
-```
-╔══════════════════════════════════╗
-║         BETTER LOGGER            ║
-║    Advanced Console Logging      ║
-╚══════════════════════════════════╝
-```
-
-**SVG Banner:**
-- Custom graphics with gradients
-- Logo integration
-- Responsive sizing
-
-**Animated Banner:**
-- Gradient animations
-- Fade transitions
-- Loading effects
-
-## 🖼️ SVG Support
-
-### Basic SVG Logging
-
-```typescript
-import { logWithSVG } from '@mks2508/better-logger/styling'
-
-// Default branded SVG
-logWithSVG('Welcome to Better Logger!')
-
-// Custom SVG content
-const customSVG = `
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'>
-  <defs>
-    <linearGradient id='brand' x1='0%' y1='0%' x2='100%' y2='0%'>
-      <stop offset='0%' style='stop-color:#667eea'/>
-      <stop offset='100%' style='stop-color:#764ba2'/>
-    </linearGradient>
-  </defs>
-  <rect width='100%' height='100%' fill='url(#brand)' rx='8'/>
-  <text x='200' y='45' text-anchor='middle' fill='white' 
-        font-family='Arial' font-size='18' font-weight='bold'>
-    My Application
-  </text>
-</svg>`
-
-logWithSVG('Custom Branding', customSVG, {
-  width: 400,
-  height: 80,
-  padding: '40px 200px'
-})
-```
-
-### Advanced SVG Options
-
-```typescript
-interface StyleOptions {
-  width?: number      // SVG width in pixels
-  height?: number     // SVG height in pixels  
-  padding?: string    // CSS padding around SVG
-}
-
-// Logo with specific dimensions
-logWithSVG('Product Launch', logoSVG, {
-  width: 600,
-  height: 120,
-  padding: '60px 300px'
-})
-
-// Compact notification
-logWithSVG('Alert', alertSVG, {
-  width: 200,
-  height: 40,
-  padding: '20px 100px'
-})
-```
-
-## ✨ CSS Animations
-
-### Animated Logging
-
-```typescript
-import { logAnimated } from '@mks2508/better-logger/styling'
-
-// Basic animation (3 seconds)
-logAnimated('Loading...')
-
-// Custom duration
-logAnimated('🌟 Feature launched!', 5) // 5 seconds
-
-// Multiple animations
-logAnimated('Phase 1 complete', 2)
-setTimeout(() => {
-  logAnimated('Phase 2 starting', 2)
-}, 2500)
-```
-
-### Animation Effects
-
-**Gradient Animation:**
-- Moving background gradients
-- Smooth color transitions
-- Infinite loop animation
-
-**Technical Implementation:**
-```css
-@keyframes loggerGradient {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
-}
-```
-
-## 🎨 Style Builder API
-
-### Building Custom Styles
-
-```typescript
-import { createStyle, StyleBuilder } from '@mks2508/better-logger/styling'
-
-// Fluent interface
-const alertStyle = createStyle()
-  .bg('linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%)')
-  .color('#ffffff')
-  .padding('12px 20px')
-  .rounded('8px')
-  .border('2px solid #ff5252')
-  .shadow('0 4px 15px rgba(255, 107, 107, 0.4)')
-  .bold()
-  .font('Monaco, Consolas, monospace')
-  .animation('pulse 1s ease-in-out infinite')
-  .build()
-
-console.log('%c🚨 Critical Alert', alertStyle)
-
-// Chaining methods
-const successStyle = new StyleBuilder()
-  .bg('#4caf50')
-  .color('white')
-  .padding('8px 16px')
-  .rounded('4px')
-  .build()
-```
-
-### Available Style Methods
-
-```typescript
-interface StyleBuilder {
-  // Background
-  bg(gradient: string): StyleBuilder
-  backgroundColor(color: string): StyleBuilder
-  
-  // Typography
-  color(color: string): StyleBuilder
-  font(family: string): StyleBuilder
-  fontSize(size: string): StyleBuilder
-  bold(): StyleBuilder
-  italic(): StyleBuilder
-  
-  // Layout
-  padding(padding: string): StyleBuilder
-  margin(margin: string): StyleBuilder
-  display(display: string): StyleBuilder
-  
-  // Visual effects
-  border(border: string): StyleBuilder
-  rounded(radius: string): StyleBuilder
-  shadow(shadow: string): StyleBuilder
-  
-  // Animations
-  animation(animation: string): StyleBuilder
-  transition(transition: string): StyleBuilder
-  
-  // Custom CSS
-  css(property: string, value: string): StyleBuilder
-  
-  // Build final style
-  build(): string
-}
-```
-
-## 🎯 Pre-built Style Presets
-
-### Using Style Presets
-
-```typescript
-import { stylePresets } from '@mks2508/better-logger/styling'
-
-// Available presets
-console.log('%c✅ Success!', stylePresets.success)
-console.log('%c❌ Error!', stylePresets.error)
-console.log('%c⚠️ Warning!', stylePresets.warning)
-console.log('%cℹ️ Info', stylePresets.info)
-console.log('%c🎯 Accent', stylePresets.accent)
-```
-
-### Preset Definitions
-
-```typescript
-const stylePresets = {
-  success: 'background: linear-gradient(135deg, #4caf50, #45a049); color: white; ...',
-  error: 'background: linear-gradient(135deg, #f44336, #d32f2f); color: white; ...',
-  warning: 'background: linear-gradient(135deg, #ff9800, #f57c00); color: white; ...',
-  info: 'background: linear-gradient(135deg, #2196f3, #1976d2); color: white; ...',
-  accent: 'background: linear-gradient(135deg, #9c27b0, #7b1fa2); color: white; ...'
-}
-```
-
-## 🔧 Advanced Usage
-
-### Theme-aware Logging
-
-```typescript
-import { setTheme } from '@mks2508/better-logger/styling'
-import { info, success, error } from '@mks2508/better-logger'
-
-// Apply theme
-setTheme('cyberpunk')
-
-// All subsequent logs use theme colors
-info('System initialized')     // Uses cyberpunk info colors
-success('Connection established') // Uses cyberpunk success colors
-error('Authentication failed')  // Uses cyberpunk error colors
-```
-
-### Dynamic Style Generation
-
-```typescript
-import { createStyle } from '@mks2508/better-logger/styling'
-
-// Generate styles based on log level
-function getLogStyle(level: string) {
-  const colors = {
-    error: ['#f44336', '#d32f2f'],
-    warn: ['#ff9800', '#f57c00'],
-    info: ['#2196f3', '#1976d2'],
-    success: ['#4caf50', '#45a049']
-  }
-  
-  const [primary, secondary] = colors[level] || colors.info
-  
-  return createStyle()
-    .bg(`linear-gradient(135deg, ${primary}, ${secondary})`)
-    .color('white')
-    .padding('8px 16px')
-    .rounded('6px')
-    .bold()
-    .build()
-}
-
-console.log('%cDynamic Error', getLogStyle('error'))
-console.log('%cDynamic Success', getLogStyle('success'))
-```
-
-### Performance Optimization
-
-```typescript
-// Pre-build styles for better performance
-const CACHED_STYLES = {
-  header: createStyle().bg('#1976d2').color('white').padding('15px').build(),
-  footer: createStyle().bg('#424242').color('#ccc').padding('10px').build(),
-  highlight: createStyle().bg('#ffeb3b').color('#333').padding('5px').build()
-}
-
-// Use cached styles
-console.log('%cApplication Header', CACHED_STYLES.header)
-console.log('%cHighlighted text', CACHED_STYLES.highlight)
-console.log('%cFooter info', CACHED_STYLES.footer)
-```
-
-## 📱 Browser Compatibility
-
-### Feature Detection
-
-```typescript
-// Automatic fallbacks for unsupported features
-if (typeof document !== 'undefined') {
-  // Browser environment - full styling support
-  logWithSVG('Rich graphics available')
-  logAnimated('Animations supported')
-} else {
-  // Node.js environment - graceful degradation
-  console.log('Text-only fallback')
-}
-```
-
-### Support Matrix
-
-| Feature | Chrome | Firefox | Safari | Node.js |
-|---------|--------|---------|--------|---------|
-| CSS Styling | ✅ | ✅ | ✅ | ❌ |
-| SVG Backgrounds | ✅ | ✅ | ✅ | ❌ |
-| Animations | ✅ | ✅ | ✅ | ❌ |
-| Unicode Banners | ✅ | ✅ | ✅ | ✅ |
-
----
-
-**Perfect for:** Frontend applications • Interactive demos • Creative projects • Brand-aware logging
-
-[← Back to main documentation](../README.md)

package/docs/_config.yml

@@ -1,36 +0,0 @@
-title: "Better Logger Documentation"
-description: "State-of-the-art console logger with advanced CSS styling, SVG support, animations, and CLI interface"
-theme: minima
-url: "https://mks2508.github.io"
-baseurl: "/advanced-logger/docs"
-
-markdown: kramdown
-highlighter: rouge
-kramdown:
-  syntax_highlighter: rouge
-
-plugins:
-  - jekyll-feed
-  - jekyll-sitemap
-  - jekyll-seo-tag
-
-exclude:
-  - Gemfile
-  - Gemfile.lock
-  - node_modules
-  - vendor/bundle/
-  - vendor/cache/
-  - vendor/gems/
-  - vendor/ruby/
-
-header_pages:
-  - API.md
-  - DEVELOPMENT.md
-
-navigation:
-  - title: API Reference
-    url: /advanced-logger/docs/API
-  - title: Development Guide
-    url: /advanced-logger/docs/DEVELOPMENT
-  - title: Live Demo
-    url: /advanced-logger/

package/docs/index.md

@@ -1,179 +0,0 @@
----
-layout: default
-title: Better Logger Documentation
----
-
-# 🚀 Better Logger
-
-**State-of-the-art console logger with advanced CSS styling, SVG support, animations, and CLI interface**
-
-[![NPM Version](https://img.shields.io/npm/v/@mks2508/better-logger)](https://www.npmjs.com/package/@mks2508/better-logger)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@mks2508/better-logger)](https://bundlephobia.com/package/@mks2508/better-logger)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)
-[![License](https://img.shields.io/npm/l/@mks2508/better-logger)](https://github.com/MKS2508/advanced-logger/blob/main/LICENSE)
-
-Transform your console logging experience with beautiful styling, professional themes, and advanced features that make debugging and monitoring a visual delight.
-
-## ✨ Features
-
-- 🎨 **Advanced CSS Styling** - Beautiful gradients, shadows, and animations
-- 🌈 **5 Professional Themes** - Default, Dark, Neon, Cyberpunk, Retro  
-- 🖼️ **SVG Background Support** - Custom graphics in console output
-- ⚡ **Performance Monitoring** - Built-in timing and benchmarking
-- 📊 **Data Export** - CSV, JSON, XML export with filtering
-- 📡 **Remote Logging** - Send logs to external services
-- 💻 **Interactive CLI** - Built-in command interface
-- 🔧 **Modular Architecture** - Import only what you need
-- 📱 **Universal Compatibility** - Browser & Node.js with graceful fallbacks
-- 🎯 **TypeScript First** - Complete type safety and IntelliSense
-
-## 📦 Installation
-
-```bash
-npm install @mks2508/better-logger
-```
-
-## 🚀 Quick Start
-
-```typescript
-import { Logger } from '@mks2508/better-logger';
-
-const logger = new Logger({ prefix: 'APP' });
-
-// Beautiful styled logging
-logger.info('Application started', { version: '1.0.0' });
-logger.success('Database connected successfully');
-logger.warn('Memory usage high', { usage: '85%' });
-logger.error('API request failed', { status: 500 });
-
-// Performance timing
-logger.time('operation');
-await performOperation();
-logger.timeEnd('operation'); // Shows duration with beautiful styling
-```
-
-## 🔧 Modular Usage
-
-Import only what you need for optimal bundle sizes:
-
-```typescript
-// Core logging only (6KB) - Essential features
-import { Logger } from '@mks2508/better-logger/core';
-
-// Styling features (26KB) - Themes, SVG, animations
-import { setTheme, logAnimated } from '@mks2508/better-logger/styling';
-
-// Export capabilities (12KB) - Data export, remote logging
-import { ExportLogger } from '@mks2508/better-logger/exports';
-```
-
-## 📊 Bundle Analysis
-
-| Module | Size | Gzipped | Best For |
-|--------|------|---------|----------|
-| **Core** | 6KB | 2KB | Essential logging, Node.js apps |
-| **Styling** | 26KB | 5KB | Frontend apps, visual debugging |
-| **Exports** | 12KB | 3KB | Production logging, analytics |
-| **Full** | 64KB | 13KB | Complete feature set |
-
-## 📚 Documentation
-
-### 🎮 Interactive Demo
-- **[🌟 Live Demo](https://mks2508.github.io/advanced-logger/)** - Try all features in your browser
-
-### 📖 Complete Documentation
-- **[📋 API Reference](API)** - Complete method documentation
-- **[🛠️ Development Guide](DEVELOPMENT)** - Use cases and development workflow
-
-### 🏃 Examples
-```bash
-# Clone and try examples
-git clone https://github.com/MKS2508/advanced-logger.git
-cd advanced-logger/examples && npm install
-
-npm run basic        # Learn fundamentals
-npm run performance  # Master timing operations
-npm run styling      # Explore visual features
-npm run export       # Data management
-```
-
-## 🎨 Visual Showcase
-
-### Professional Themes
-```typescript
-import { setTheme } from '@mks2508/better-logger/styling';
-
-setTheme('cyberpunk');  // Purple/pink futuristic
-setTheme('neon');       // Bright electric colors
-setTheme('dark');       // Dark mode optimized
-```
-
-### Custom Styling
-```typescript
-import { createStyle } from '@mks2508/better-logger/styling';
-
-const customStyle = createStyle()
-  .bg('linear-gradient(45deg, #667eea, #764ba2)')
-  .color('white')
-  .padding('12px 24px')
-  .rounded('8px')
-  .shadow('0 4px 15px rgba(102, 126, 234, 0.4)')
-  .build();
-
-console.log('%c🚀 Beautiful Custom Style!', customStyle);
-```
-
-## ⚡ Advanced Features
-
-### CLI Interface
-```typescript
-import { initializeCLI } from '@mks2508/better-logger/cli';
-initializeCLI(logger);
-
-// Available in browser console:
-// /help /theme /export /clear /status
-```
-
-### Performance Monitoring
-```typescript
-logger.time('api-request');
-const result = await fetch('/api/data');
-logger.timeEnd('api-request'); // Automatic duration display
-```
-
-### Data Export
-```typescript
-import { ExportLogger } from '@mks2508/better-logger/exports';
-
-const logger = new ExportLogger();
-const csvData = await logger.exportLogs('csv', {
-  filter: { level: 'error' },
-  limit: 100
-});
-```
-
-## 🌐 Compatibility
-
-- ✅ **All Modern Browsers** - Full feature support
-- ✅ **Node.js** - Core features with graceful fallbacks  
-- ✅ **TypeScript** - Complete type definitions
-- ✅ **ESM & CommonJS** - Both module systems supported
-
-## 🔗 Resources
-
-- 📦 **[NPM Package](https://www.npmjs.com/package/@mks2508/better-logger)**
-- 📚 **[GitHub Repository](https://github.com/MKS2508/advanced-logger)**
-- 🧩 **[Examples](https://github.com/MKS2508/advanced-logger/tree/main/examples)**
-- 🐛 **[Issues & Support](https://github.com/MKS2508/advanced-logger/issues)**
-
-## 🤝 Contributing
-
-Contributions welcome! See our [Contributing Guide](https://github.com/MKS2508/advanced-logger/blob/main/CONTRIBUTING.md) for details.
-
-## 📄 License
-
-MIT License - see [LICENSE](https://github.com/MKS2508/advanced-logger/blob/main/LICENSE) for details.
-
----
-
-**Made with ❤️ by [MKS2508](https://github.com/MKS2508)**