@mks2508/better-logger 0.0.1

package/src/main.ts

@@ -0,0 +1,126 @@
+import {
+  debug,
+  info,
+  warn,
+  error,
+  success,
+  critical,
+  table,
+  group,
+  groupEnd,
+  time,
+  timeEnd,
+  trace,
+  createScopedLogger,
+  cli,
+  setTheme,
+} from './Logger.ts';
+
+// The init banner from Logger.ts is displayed automatically on import.
+console.log("Advanced Logger script loaded. Test functions are now available.");
+
+function testDebug() {
+  debug("This is a debug message.", { user: "test", id: 123 });
+}
+
+function testInfo() {
+  info("This is an info message with an object.", { data: "payload" });
+}
+
+function testWarn() {
+  warn("This is a warning message about a deprecated API.");
+}
+
+function testError() {
+  error("This is an error message.", new Error("Failed to fetch resource."));
+}
+
+function testSuccess() {
+  success("Operation completed successfully.");
+}
+
+function testCritical() {
+  critical("This is a CRITICAL message. System integrity compromised!");
+}
+
+function testTable() {
+  table([
+    { feature: "Debug Log", status: "Implemented", priority: "Low" },
+    { feature: "Info Log", status: "Implemented", priority: "Medium" },
+    { feature: "Warning Log", status: "Implemented", priority: "High" },
+  ]);
+}
+
+function testGrouping() {
+  group("User Authentication Flow", true); // Start collapsed
+  info("User 'testuser' attempting to log in...");
+  warn("Password nearing expiration.");
+  success("Login successful.");
+  groupEnd();
+}
+
+function testTiming() {
+  time("dataProcessing");
+  setTimeout(() => {
+    timeEnd("dataProcessing");
+  }, 750); // Simulate a 750ms operation
+}
+
+function testScopedLogger() {
+  info("Demonstrating scoped loggers...");
+  const apiLogger = createScopedLogger("API");
+  apiLogger.info("Fetching user data...");
+  const uiLogger = createScopedLogger("UI");
+  uiLogger.debug("Rendering user profile component.");
+  apiLogger.success("User data fetched successfully.");
+  apiLogger.error("Failed to update settings.");
+}
+
+function testTrace() {
+  function innerFunction() {
+    function deepFunction() {
+        trace("Trace from a deeply nested function.");
+    }
+    deepFunction();
+  }
+  innerFunction();
+}
+
+function testAllFeatures() {
+  group("🌟 Demonstrating All Logger Features");
+  testDebug();
+  testInfo();
+  testWarn();
+  testError();
+  testSuccess();
+  testCritical();
+  testTable();
+  testGrouping();
+  testTiming();
+  testScopedLogger();
+  testTrace();
+  groupEnd();
+}
+
+// Expose functions to global scope for onclick attributes in index.html
+if (typeof window !== 'undefined') {
+  (window as any).testDebug = testDebug;
+  (window as any).testInfo = testInfo;
+  (window as any).testWarn = testWarn;
+  (window as any).testError = testError;
+  (window as any).testSuccess = testSuccess;
+  (window as any).testCritical = testCritical;
+  (window as any).testTable = testTable;
+  (window as any).testGrouping = testGrouping;
+  (window as any).testTiming = testTiming;
+  (window as any).testScopedLogger = testScopedLogger;
+  (window as any).testTrace = testTrace;
+  (window as any).testAllFeatures = testAllFeatures;
+  
+  // Expose CLI functions globally
+  (window as any).cli = cli;
+  (window as any).setTheme = setTheme;
+  
+  // Display CLI usage info
+  console.log('%c🚀 Logger CLI Available! Try: cli("/help")', 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 12px; border-radius: 4px; font-weight: bold;');
+}

package/src/style.css

@@ -0,0 +1,96 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/styling/StyleBuilder.ts

@@ -0,0 +1,305 @@
+/**
+ * @fileoverview StyleBuilder class for Advanced Logger
+ */
+
+/**
+ * Utility class for creating dynamic console styles with method chaining
+ */
+export class StyleBuilder {
+    private styles: string[] = [];
+
+    constructor(baseStyle = '') {
+        if (baseStyle) this.styles.push(baseStyle);
+    }
+
+    /**
+     * Add background color or gradient
+     */
+    bg(background: string): StyleBuilder {
+        this.styles.push(`background: ${background}`);
+        return this;
+    }
+
+    /**
+     * Add text color
+     */
+    color(color: string): StyleBuilder {
+        this.styles.push(`color: ${color}`);
+        return this;
+    }
+
+    /**
+     * Add border styling
+     */
+    border(border: string): StyleBuilder {
+        this.styles.push(`border: ${border}`);
+        return this;
+    }
+
+    /**
+     * Add box shadow
+     */
+    shadow(shadow: string): StyleBuilder {
+        this.styles.push(`box-shadow: ${shadow}`);
+        return this;
+    }
+
+    /**
+     * Add padding
+     */
+    padding(padding: string): StyleBuilder {
+        this.styles.push(`padding: ${padding}`);
+        return this;
+    }
+
+    /**
+     * Add margin
+     */
+    margin(margin: string): StyleBuilder {
+        this.styles.push(`margin: ${margin}`);
+        return this;
+    }
+
+    /**
+     * Add border radius
+     */
+    rounded(radius: string = '4px'): StyleBuilder {
+        this.styles.push(`border-radius: ${radius}`);
+        return this;
+    }
+
+    /**
+     * Add font weight
+     */
+    bold(): StyleBuilder {
+        this.styles.push('font-weight: bold');
+        return this;
+    }
+
+    /**
+     * Add font styling
+     */
+    font(font: string): StyleBuilder {
+        this.styles.push(`font-family: ${font}`);
+        return this;
+    }
+
+    /**
+     * Add font size
+     */
+    size(size: string): StyleBuilder {
+        this.styles.push(`font-size: ${size}`);
+        return this;
+    }
+
+    /**
+     * Add line height
+     */
+    lineHeight(height: string): StyleBuilder {
+        this.styles.push(`line-height: ${height}`);
+        return this;
+    }
+
+    /**
+     * Add text decoration
+     */
+    underline(): StyleBuilder {
+        this.styles.push('text-decoration: underline');
+        return this;
+    }
+
+    /**
+     * Add text transform
+     */
+    uppercase(): StyleBuilder {
+        this.styles.push('text-transform: uppercase');
+        return this;
+    }
+
+    /**
+     * Add opacity
+     */
+    opacity(value: number): StyleBuilder {
+        this.styles.push(`opacity: ${value}`);
+        return this;
+    }
+
+    /**
+     * Add display property
+     */
+    display(value: string): StyleBuilder {
+        this.styles.push(`display: ${value}`);
+        return this;
+    }
+
+    /**
+     * Add position property
+     */
+    position(value: string): StyleBuilder {
+        this.styles.push(`position: ${value}`);
+        return this;
+    }
+
+    /**
+     * Add transform property
+     */
+    transform(value: string): StyleBuilder {
+        this.styles.push(`transform: ${value}`);
+        return this;
+    }
+
+    /**
+     * Add animation property
+     */
+    animation(value: string): StyleBuilder {
+        this.styles.push(`animation: ${value}`);
+        return this;
+    }
+
+    /**
+     * Add transition property
+     */
+    transition(value: string): StyleBuilder {
+        this.styles.push(`transition: ${value}`);
+        return this;
+    }
+
+    /**
+     * Add cursor property
+     */
+    cursor(value: string): StyleBuilder {
+        this.styles.push(`cursor: ${value}`);
+        return this;
+    }
+
+    /**
+     * Add any custom CSS property
+     */
+    custom(property: string, value: string): StyleBuilder {
+        this.styles.push(`${property}: ${value}`);
+        return this;
+    }
+
+    /**
+     * Add any CSS property (alias for custom)
+     */
+    css(property: string, value: string): StyleBuilder {
+        return this.custom(property, value);
+    }
+
+    /**
+     * Build the final CSS string
+     */
+    build(): string {
+        return this.styles.join('; ');
+    }
+
+    /**
+     * Clear all styles and start fresh
+     */
+    clear(): StyleBuilder {
+        this.styles = [];
+        return this;
+    }
+
+    /**
+     * Clone this StyleBuilder with the same styles
+     */
+    clone(): StyleBuilder {
+        const cloned = new StyleBuilder();
+        cloned.styles = [...this.styles];
+        return cloned;
+    }
+
+    /**
+     * Merge another StyleBuilder's styles into this one
+     */
+    merge(other: StyleBuilder): StyleBuilder {
+        this.styles.push(...other.styles);
+        return this;
+    }
+}
+
+/**
+ * Proxy-based dynamic styler for chainable console styling
+ */
+function createStyler(): any {
+    const builder = new StyleBuilder();
+    return new Proxy(builder, {
+        get(target: StyleBuilder, prop: string) {
+            if (prop in target) {
+                const method = (target as any)[prop];
+                if (typeof method === 'function') {
+                    return method.bind(target);
+                }
+                return method;
+            }
+            return undefined;
+        }
+    });
+}
+
+/**
+ * Dynamic styler instance for external use
+ */
+export const $ = createStyler();
+
+/**
+ * Pre-defined style presets for common use cases
+ */
+export const StylePresets = {
+    success: () => new StyleBuilder()
+        .bg('linear-gradient(135deg, #00b894 0%, #00a085 100%)')
+        .color('#ffffff')
+        .padding('4px 8px')
+        .rounded('4px')
+        .bold(),
+
+    error: () => new StyleBuilder()
+        .bg('linear-gradient(135deg, #e84393 0%, #d63031 100%)')
+        .color('#ffffff')
+        .padding('4px 8px')
+        .rounded('4px')
+        .bold(),
+
+    warning: () => new StyleBuilder()
+        .bg('linear-gradient(135deg, #fdcb6e 0%, #e17055 100%)')
+        .color('#2d3436')
+        .padding('4px 8px')
+        .rounded('4px')
+        .bold(),
+
+    info: () => new StyleBuilder()
+        .bg('linear-gradient(135deg, #74b9ff 0%, #0984e3 100%)')
+        .color('#ffffff')
+        .padding('4px 8px')
+        .rounded('4px')
+        .bold(),
+
+    debug: () => new StyleBuilder()
+        .bg('linear-gradient(135deg, #667eea 0%, #764ba2 100%)')
+        .color('#ffffff')
+        .padding('4px 8px')
+        .rounded('4px')
+        .bold(),
+
+    muted: () => new StyleBuilder()
+        .color('#6c757d')
+        .font('Monaco, Consolas, monospace')
+        .size('12px'),
+
+    accent: () => new StyleBuilder()
+        .bg('#f8f9fa')
+        .color('#495057')
+        .padding('2px 6px')
+        .rounded('3px')
+        .border('1px solid #dee2e6'),
+
+    neon: () => new StyleBuilder()
+        .bg('linear-gradient(135deg, #0f3460 0%, #e94560 100%)')
+        .color('#00ffff')
+        .padding('4px 8px')
+        .rounded('4px')
+        .bold()
+        .shadow('0 0 10px rgba(0, 255, 255, 0.5)'),
+};

package/src/styling/banners.ts

@@ -0,0 +1,168 @@
+/**
+ * @fileoverview Banner configurations for Advanced Logger
+ */
+
+import type { BannerType, ThemeVariant } from '../types/index.js';
+
+/**
+ * Banner variants for different display capabilities
+ */
+export const BANNER_VARIANTS = {
+    simple: {
+        text: '🚀 ADVANCED LOGGER v2.0.0 - State-of-the-art Console Styling 🚀',
+        style: 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 20px; border-radius: 8px; font-weight: bold; font-size: 14px;'
+    },
+    ascii: {
+        text: `
+   ___     ____  _   __   ___     _   __  _____ _____ ____     __     ___    _____ _____ _____ ____  
+  / _ \\   / __ \\| | / /  / _ \\   | \\ | |/ ____| ____|  _ \\   |  |   / _ \\  / ____|  ___|  _  |  _ \\ 
+ / /_\\ \\ / / _\` | |/ /  / /_\\ \\  |  \\| | |   | |__  | | | |  |  |  / / \\ \\| |  __| |_  | |_| | |_) |
+ |  _  || | (_| |   <   |  _  |  | . \` | |   |  __| | | | |  |  | | |   | | | |_ |  _| |    /|  _ < 
+ | | | |\\ \\__,_|_|\\_\\  | | | |  | |\\  | |___| |____| |_| |  |  |__\\ \\_/ /| |__| | |___| |\\ \\| |_) |
+ \\_| |_/ \\____/        \\_| |_/  |_| \\_|\\_____|______|____/   |_____/\\___/  \\_____|_____|_| \\_|____/
+
+                            Advanced Logger v2.0.0 - Console Excellence`,
+        style: 'font-family: "Courier New", Consolas, Monaco, monospace; color: #667eea; font-size: 11px; line-height: 1.2;'
+    },
+    unicode: {
+        text: `
+╔══════════════════════════════════════════════════════════════════════════╗
+║                         🚀 ADVANCED LOGGER v2.0.0                       ║
+║                      State-of-the-art Console Styling                    ║  
+╚══════════════════════════════════════════════════════════════════════════╝`,
+        style: 'font-family: "Courier New", Consolas, Monaco, monospace; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border-radius: 8px; font-size: 12px; line-height: 1.3;'
+    },
+    svg: {
+        text: '                    ',
+        style: `
+            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'><defs><linearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:%23667eea'/><stop offset='100%' style='stop-color:%23764ba2'/></linearGradient></defs><rect width='100%' height='100%' fill='url(%23grad)' rx='8'/><text x='200' y='30' text-anchor='middle' fill='white' font-family='monospace' font-size='14' font-weight='bold'>🚀 ADVANCED LOGGER</text><text x='200' y='50' text-anchor='middle' fill='white' font-family='monospace' font-size='12'>State-of-the-art Console Styling</text><text x='200' y='65' text-anchor='middle' fill='white' font-family='monospace' font-size='10'>v2.0.0</text></svg>");
+            background-repeat: no-repeat;
+            background-size: 400px 80px;
+            padding: 40px 200px;
+            color: transparent;
+            display: inline-block;
+            border-radius: 8px;
+        `
+    },
+    animated: {
+        text: '         🚀 ADVANCED LOGGER v2.0.0         ',
+        style: `
+            background: linear-gradient(-45deg, #667eea, #764ba2, #667eea, #764ba2);
+            background-size: 400% 400%;
+            color: white;
+            padding: 15px 25px;
+            border-radius: 10px;
+            font-weight: bold;
+            font-size: 14px;
+            font-family: monospace;
+            animation: gradientShift 3s ease infinite;
+            display: inline-block;
+        `
+    }
+};
+
+/**
+ * Theme-specific banners for enhanced visual theming
+ */
+export const THEME_BANNERS: Record<ThemeVariant, { simple: string; style: string }> = {
+    default: {
+        simple: '🚀 ADVANCED LOGGER v2.0.0 - State-of-the-art Console Styling 🚀',
+        style: 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 20px; border-radius: 8px; font-weight: bold;'
+    },
+    dark: {
+        simple: '🌙 ADVANCED LOGGER v2.0.0 - Dark Mode Console Excellence 🌙',
+        style: 'background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); color: #e2e8f0; padding: 12px 20px; border-radius: 8px; font-weight: bold; border: 1px solid #4a5568;'
+    },
+    neon: {
+        simple: '⚡ ADVANCED LOGGER v2.0.0 - Cyberpunk Console Experience ⚡',
+        style: 'background: linear-gradient(135deg, #0f3460 0%, #e94560 100%); color: #00ffff; padding: 12px 20px; border-radius: 8px; font-weight: bold; text-shadow: 0 0 10px #00ffff;'
+    },
+    minimal: {
+        simple: 'ADVANCED LOGGER v2.0.0 - Clean Console Styling',
+        style: 'background: #f7fafc; color: #2d3748; padding: 8px 16px; border: 1px solid #e2e8f0; border-radius: 4px; font-weight: 500;'
+    },
+    light: {
+        simple: '☀️ ADVANCED LOGGER v2.0.0 - Bright Console Styling ☀️',
+        style: 'background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); color: #495057; padding: 12px 20px; border-radius: 8px; font-weight: bold; border: 1px solid #dee2e6;'
+    },
+    cyberpunk: {
+        simple: '🤖 ADVANCED LOGGER v2.0.0 - Neural Console Interface 🤖',
+        style: 'background: linear-gradient(135deg, #0d1b2a 0%, #415a77 100%); color: #00d4aa; padding: 12px 20px; border-radius: 8px; font-weight: bold; text-shadow: 0 0 10px #00d4aa; border: 1px solid #00d4aa;'
+    }
+};
+
+/**
+ * Feature detection for banner capabilities
+ */
+export function detectBannerCapabilities(): BannerType {
+    // Try to detect browser capabilities
+    const userAgent = navigator.userAgent;
+    const isChrome = /Chrome/.test(userAgent);
+    const isFirefox = /Firefox/.test(userAgent);
+    const isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
+    
+    // Check for SVG support (most modern browsers)
+    const supportsSVG = !!document.createElementNS && 
+        !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
+    
+    // Check for CSS animation support
+    const supportsAnimations = typeof document !== 'undefined' && 
+        'animationName' in document.createElement('div').style;
+    
+    // Progressive enhancement
+    if (supportsAnimations && isChrome) {
+        return 'animated';
+    } else if (supportsSVG && (isChrome || isFirefox)) {
+        return 'svg';
+    } else if (isChrome || isFirefox) {
+        return 'unicode';
+    } else if (isSafari) {
+        return 'ascii';
+    }
+    
+    return 'simple';
+}
+
+/**
+ * Display initialization banner with advanced styling
+ */
+export function displayInitBanner(bannerType?: BannerType): void {
+    const selectedType = bannerType || detectBannerCapabilities();
+    const banner = BANNER_VARIANTS[selectedType];
+    
+    // Add CSS animation keyframes if needed
+    if (selectedType === 'animated') {
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes gradientShift {
+                0% { background-position: 0% 50%; }
+                50% { background-position: 100% 50%; }
+                100% { background-position: 0% 50%; }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    
+    console.log(`%c${banner.text}`, banner.style);
+
+    // Show feature highlights
+    const features = [
+        '🎨 Advanced CSS Console Styling',
+        '📍 Automatic Stack Trace Parsing',
+        '🔧 Scoped Loggers & Prefixes',
+        '⚡ Performance Timers',
+        '🎯 Verbosity Filtering',
+        '🔌 Extensible Handlers',
+        '📱 Modern TypeScript Patterns',
+        '📤 Export & Clipboard Support'
+    ];
+
+    console.group(`%c✨ Features`, 'background: #f8f9fa; color: #495057; padding: 4px 8px; border-radius: 4px; font-weight: bold;');
+
+    features.forEach(feature => {
+        console.log(`%c${feature}`, 'color: #6c757d; font-size: 13px;');
+    });
+
+    console.groupEnd();
+    console.log(''); // Add spacing
+}

package/src/styling/index.ts

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview Styling system exports for Advanced Logger
+ */
+
+export { StyleBuilder, $, StylePresets } from './StyleBuilder.js';
+export { THEME_PRESETS } from './themes.js';
+export { 
+    BANNER_VARIANTS, 
+    THEME_BANNERS, 
+    detectBannerCapabilities, 
+    displayInitBanner 
+} from './banners.js';