@panyam/tsappkit 0.0.3

package/src/SplashScreen.ts

@@ -0,0 +1,111 @@
+/**
+ * Utility for managing the splash screen that loads before JavaScript
+ */
+export class SplashScreen {
+  private static readonly SPLASH_ID = 'splash-screen';
+  private static dismissed = false;
+
+  /**
+   * Dismiss the splash screen with a fade-out animation
+   * Safe to call multiple times - only dismisses once
+   */
+  static dismiss(): void {
+    if (this.dismissed) {
+      return;
+    }
+
+    const splash = document.getElementById(this.SPLASH_ID);
+    if (!splash) {
+      return;
+    }
+
+    this.dismissed = true;
+
+    // Fade out
+    splash.style.opacity = '0';
+
+    // Remove from DOM after animation completes
+    setTimeout(() => {
+      splash.remove();
+    }, 300); // Match transition-opacity duration-300 from Tailwind
+  }
+
+  /**
+   * Update the splash screen message (if it hasn't been dismissed yet)
+   */
+  static updateMessage(title?: string, message?: string): void {
+    if (this.dismissed) {
+      return;
+    }
+
+    const splash = document.getElementById(this.SPLASH_ID);
+    if (!splash) {
+      return;
+    }
+
+    if (title) {
+      const titleEl = splash.querySelector('[data-splash-title]');
+      if (titleEl) {
+        titleEl.textContent = title;
+      }
+    }
+
+    if (message) {
+      const messageEl = splash.querySelector('[data-splash-message]');
+      if (messageEl) {
+        messageEl.textContent = message;
+      }
+    }
+  }
+
+  /**
+   * Update the splash screen progress bar
+   * @param percent - Progress percentage (0-100)
+   */
+  static updateProgress(percent: number): void {
+    if (this.dismissed) {
+      return;
+    }
+
+    const splash = document.getElementById(this.SPLASH_ID);
+    if (!splash) {
+      return;
+    }
+
+    // Clamp between 0-100
+    const clampedPercent = Math.max(0, Math.min(100, percent));
+
+    const progressBar = splash.querySelector('[data-splash-progress-bar]') as HTMLElement;
+    if (progressBar) {
+      progressBar.style.width = `${clampedPercent}%`;
+    }
+
+    const progressText = splash.querySelector('[data-splash-progress-text]');
+    if (progressText) {
+      progressText.textContent = `${Math.round(clampedPercent)}%`;
+    }
+  }
+
+  /**
+   * Update both message and progress at once
+   */
+  static update(options: {
+    title?: string;
+    message?: string;
+    progress?: number;
+  }): void {
+    if (options.title !== undefined || options.message !== undefined) {
+      this.updateMessage(options.title, options.message);
+    }
+    if (options.progress !== undefined) {
+      this.updateProgress(options.progress);
+    }
+  }
+
+  /**
+   * Check if splash screen is still visible
+   */
+  static isVisible(): boolean {
+    return !this.dismissed && !!document.getElementById(this.SPLASH_ID);
+  }
+}

package/src/TemplateLoader.ts

@@ -0,0 +1,101 @@
+
+// Helper to manage our templates
+export class TemplateLoader {
+  constructor(public registryName = "template-registry") {
+  }
+
+
+  /**
+   * Finds the specified template wrapper element in the registry.
+   * @param templateId The data-template-id of the wrapper element.
+   * @returns The wrapper HTMLElement or null if not found.
+   */
+  private _findTemplateWrapper(templateId: string): HTMLElement | null {
+      const templateRegistry = document.getElementById(this.registryName);
+      if (!templateRegistry) {
+          console.error(`Template registry '#${this.registryName}' not found!`);
+          return null;
+      }
+      const templateWrapper = templateRegistry.querySelector<HTMLElement>(`[data-template-id="${templateId}"]`);
+      if (!templateWrapper) {
+          console.error(`Template with ID "${templateId}" not found in registry '#${this.registryName}'.`);
+          return null;
+      }
+      return templateWrapper;
+  }
+
+  /**
+   * Loads and returns the inner HTML of a template definition.
+   * @param templateId The data-template-id of the wrapper element.
+   * @returns The innerHTML content as string if it exists otherwise null.
+   */
+  loadHtml(templateId: string): string | null {
+    const templateWrapper = this._findTemplateWrapper(templateId);
+    if (!templateWrapper) {
+        return null;
+    }
+    return templateWrapper.innerHTML
+  }
+
+  /**
+   * Loads and clones the child elements of a template definition.
+   * @param templateId The data-template-id of the wrapper element.
+   * @returns An array of cloned HTMLElement children, or an empty array if not found or has no children.
+   */
+  load(templateId: string): HTMLElement[] {
+    const templateWrapper = this._findTemplateWrapper(templateId);
+    if (!templateWrapper) {
+        return [];
+    }
+
+    // Using hidden div: Clone the first child element which is the actual template root
+    const templateRootElement = templateWrapper.cloneNode(true) as HTMLElement | null;
+    if (!templateRootElement) {
+      console.error(`Template content is empty for: ${templateId}`);
+      return [];
+    }
+    // deep clone AND return th children
+    return Array.from(templateRootElement.children) as HTMLElement[];
+
+    // clond the children instead
+    // Clone each child element individually and return as an array
+    // const childElements = Array.from(templateWrapper.children) as HTMLElement[];
+    // return childElements.map(child => child.cloneNode(true) as HTMLElement);
+  }
+
+   /**
+   * Loads a template's content, clears the target element, and appends the cloned content into it.
+   * @param templateId The data-template-id of the wrapper element to load.
+   * @param targetElement The HTMLElement where the cloned content should be placed.
+   * @returns True if the operation was successful (template found and content appended, even if content was empty), false otherwise.
+   */
+  public loadInto(templateId: string, targetElement: HTMLElement | null): boolean {
+    if (!targetElement) {
+      console.error(`Cannot load template "${templateId}": Target element is null.`);
+      return false;
+    }
+
+    const templateWrapper = this._findTemplateWrapper(templateId);
+    if (!templateWrapper) {
+       // Error logged in _findTemplateWrapper
+       targetElement.innerHTML = `<div class="p-4 text-red-500">Error loading template '${templateId}' (Not Found)</div>`; // Provide feedback in target
+       return false;
+    }
+
+    // Clear the target element first
+    targetElement.innerHTML = '';
+
+    // Clone and append children
+    const childElements = Array.from(templateWrapper.children) as HTMLElement[];
+    if (childElements.length === 0) {
+      console.warn(`Template "${templateId}" has no child elements to load.`);
+      // Still considered successful, just loaded nothing.
+    } else {
+      childElements.forEach(child => {
+        targetElement.appendChild(child.cloneNode(true) as HTMLElement);
+      });
+    }
+
+    return true; // Operation successful
+  }
+}

package/src/ThemeManager.ts

@@ -0,0 +1,100 @@
+/**
+ * Theme management for applications
+ */
+export class ThemeManager {
+    // Theme options
+    static LIGHT = 'light';
+    static DARK = 'dark';
+    static SYSTEM = 'system';
+
+    // Icons for each theme state
+    static readonly LIGHT_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /></svg>`; // Sun icon
+    static readonly DARK_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" /></svg>`; // Moon icon
+    static readonly SYSTEM_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" /></svg>`; // Computer icon
+
+    /**
+     * Initialize theme based on saved preference or system default
+     */
+    static initialize(): void {
+        const savedTheme = localStorage.getItem('theme');
+
+        if (savedTheme === ThemeManager.DARK ||
+            (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    }
+
+    /**
+     * Set theme and save preference
+     */
+    static setTheme(theme: string): void {
+        if (theme === ThemeManager.SYSTEM) {
+            localStorage.removeItem('theme');
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        } else if (theme === ThemeManager.DARK) {
+            localStorage.setItem('theme', ThemeManager.DARK);
+            document.documentElement.classList.add('dark');
+        } else { // LIGHT
+            localStorage.setItem('theme', ThemeManager.LIGHT);
+            document.documentElement.classList.remove('dark');
+        }
+    }
+
+    /**
+     * Get current theme setting (light, dark, or system)
+     */
+    static getCurrentThemeSetting(): string {
+        return localStorage.getItem('theme') || ThemeManager.SYSTEM;
+    }
+
+    /**
+     * Gets the *next* theme in the cycle: Light -> Dark -> System -> Light ...
+     */
+    static getNextTheme(currentSetting: string): string {
+        if (currentSetting === ThemeManager.LIGHT) {
+            return ThemeManager.DARK;
+        } else if (currentSetting === ThemeManager.DARK) {
+            return ThemeManager.SYSTEM;
+        } else { // SYSTEM or unknown goes to LIGHT
+            return ThemeManager.LIGHT;
+        }
+    }
+
+    /**
+     * Gets the appropriate SVG icon string for a given theme setting.
+     */
+    static getIconSVG(themeSetting: string): string {
+        switch (themeSetting) {
+            case ThemeManager.LIGHT: return ThemeManager.LIGHT_ICON_SVG;
+            case ThemeManager.DARK: return ThemeManager.DARK_ICON_SVG;
+            case ThemeManager.SYSTEM:
+            default: return ThemeManager.SYSTEM_ICON_SVG;
+        }
+    }
+
+    /**
+     * Gets a user-friendly label for the theme setting.
+     */
+    static getThemeLabel(themeSetting: string): string {
+        switch (themeSetting) {
+            case ThemeManager.LIGHT: return "Light Mode";
+            case ThemeManager.DARK: return "Dark Mode";
+            case ThemeManager.SYSTEM:
+            default: return "System Default";
+        }
+    }
+
+
+    /**
+     * Initialize the ThemeManager (no instance needed for static methods)
+     */
+    public static init(): void {
+        ThemeManager.initialize();
+    }
+}

package/src/ToastManager.ts

@@ -0,0 +1,161 @@
+/**
+ * Toast types for styling
+ */
+type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+/**
+ * Manages toast notifications
+ */
+export class ToastManager {
+    private static instance: ToastManager | null = null;
+    private container: HTMLElement | null;
+    private template: HTMLElement | null;
+    private toasts: Map<string, HTMLElement> = new Map();
+    private counter: number = 0;
+
+    /**
+     * Private constructor for singleton pattern
+     */
+    private constructor() {
+        // Select the container using its ID from index.html
+        this.container = document.getElementById('toast-container');
+        this.template = document.getElementById('toast-template');
+    }
+
+    /**
+     * Get the ToastManager instance (singleton)
+     */
+    public static getInstance(): ToastManager {
+        if (!ToastManager.instance) {
+            ToastManager.instance = new ToastManager();
+        }
+        return ToastManager.instance;
+    }
+
+    /**
+     * Show a toast notification
+     * @param title Toast title
+     * @param message Toast message
+     * @param type Toast type for styling
+     * @param duration Duration in ms (default: 4000)
+     */
+    public showToast(title: string, message: string, type: ToastType = 'info', duration: number = 4000): string {
+        if (!this.container || !this.template) return '';
+
+        // Create a unique ID for this toast
+        const id = `toast-${Date.now()}-${this.counter++}`;
+
+        // Clone the template
+        const toast = this.template.cloneNode(true) as HTMLElement;
+        toast.id = id;
+        toast.classList.remove('hidden');
+
+        // Set content
+        const titleElement = toast.querySelector('.toast-title');
+        const messageElement = toast.querySelector('.toast-message');
+        if (titleElement) titleElement.textContent = title;
+        if (messageElement) messageElement.textContent = message;
+
+        // Set style based on type
+        const iconContainer = toast.querySelector('.flex-shrink-0');
+        if (iconContainer) {
+            // Clear existing icon
+            iconContainer.innerHTML = '';
+
+            // Add appropriate icon based on type
+            let icon: string;
+            let borderColor: string;
+
+            switch (type) {
+                case 'success':
+                    icon = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>';
+                    borderColor = 'border-green-500';
+                    break;
+                case 'error':
+                    icon = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" /></svg>';
+                    borderColor = 'border-red-500';
+                    break;
+                case 'warning':
+                    icon = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>';
+                    borderColor = 'border-yellow-500';
+                    break;
+                case 'info':
+                default:
+                    icon = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" /></svg>';
+                    borderColor = 'border-blue-500';
+                    break;
+            }
+
+            // Add icon
+            iconContainer.innerHTML = icon;
+
+            // Set border color
+            const borderElement = toast.querySelector('.border-l-4');
+            if (borderElement) {
+                borderElement.className = borderElement.className.replace(/border-[a-z]+-500/g, borderColor);
+            }
+        }
+
+        // Add close button handler
+        const closeButton = toast.querySelector('.toast-close');
+        if (closeButton) {
+            closeButton.addEventListener('click', () => {
+                this.hideToast(id);
+            });
+        }
+
+        // Add to container
+        this.container.appendChild(toast);
+        this.toasts.set(id, toast);
+
+        // Show toast with animation
+        setTimeout(() => {
+            toast.classList.remove('scale-95', 'opacity-0');
+            toast.classList.add('scale-100', 'opacity-100');
+        }, 10);
+
+        // Auto-hide after duration
+        if (duration > 0) {
+            setTimeout(() => {
+                this.hideToast(id);
+            }, duration);
+        }
+
+        return id;
+    }
+
+    /**
+     * Hide a toast notification
+     * @param id Toast ID
+     */
+    public hideToast(id: string): void {
+        const toast = this.toasts.get(id);
+        if (!toast) return;
+
+        // Hide with animation
+        toast.classList.remove('scale-100', 'opacity-100');
+        toast.classList.add('scale-95', 'opacity-0');
+
+        // Remove after animation
+        setTimeout(() => {
+            toast.remove();
+            this.toasts.delete(id);
+        }, 300);
+    }
+
+    /**
+     * Hide all toast notifications
+     */
+    public hideAllToasts(): void {
+        this.toasts.forEach((_, id) => {
+            this.hideToast(id);
+        });
+    }
+
+    /**
+     * Initialize the component
+     */
+    public static init(): ToastManager {
+        return ToastManager.getInstance();
+    }
+}

package/src/events.ts

@@ -0,0 +1,5 @@
+
+export interface ComponentLifecycleEvent {
+    success: boolean;
+    error: Error | null;
+}

package/src/index.ts

@@ -0,0 +1,39 @@
+// Core component system
+export type { Component } from './Component';
+export { BaseComponent } from './Component';
+export type { LCMComponent, LCMComponentConfig, LCMComponentEvent } from './LCMComponent';
+export { LifecycleController } from './LifecycleController';
+
+// Event system
+export {
+    EventBus,
+    ComponentEventTypes,
+    LifecycleEventTypes,
+} from './EventBus';
+export type {
+    EventHandler,
+    EventSubscriber,
+    LifecycleEventType,
+    ComponentEventType
+} from './EventBus';
+export type { ComponentLifecycleEvent } from './events';
+
+// UI Components
+export { BasePage } from './BasePage';
+export { Modal } from './Modal';
+export { ToastManager } from './ToastManager';
+export { ThemeManager } from './ThemeManager';
+export { TemplateLoader } from './TemplateLoader';
+export { SplashScreen } from './SplashScreen';
+export { MobileBottomDrawer } from './MobileBottomDrawer';
+
+// Utilities
+export { isInInputContext, hasModifierKeys, shouldIgnoreShortcut } from './DOMUtils';
+export {
+    KeyboardShortcutManager,
+    KeyboardState,
+} from './KeyboardShortcutManager';
+export type {
+    ShortcutConfig,
+    ShortcutManagerConfig
+} from './KeyboardShortcutManager';