@panyam/tsappkit 0.0.3

package/dist/index.mjs

@@ -0,0 +1,1718 @@
+// src/EventBus.ts
+var FunctionSubscriber = class {
+  constructor(handler) {
+    this.handler = handler;
+  }
+  handleBusEvent(eventType, data, subject, emitter) {
+    this.handler(data);
+  }
+};
+var EventBus = class {
+  constructor(debugMode = false) {
+    this.subscribers = /* @__PURE__ */ new Map();
+    this.functionSubscribers = /* @__PURE__ */ new Map();
+    this.onceHandlers = /* @__PURE__ */ new Map();
+    this.debugMode = false;
+    this.debugMode = debugMode;
+  }
+  // ============== Simple Function-Based API ==============
+  /**
+   * Subscribe to an event with a simple handler function
+   */
+  on(eventType, handler) {
+    if (!this.functionSubscribers.has(eventType)) {
+      this.functionSubscribers.set(eventType, /* @__PURE__ */ new Map());
+    }
+    const handlersMap = this.functionSubscribers.get(eventType);
+    if (handlersMap.has(handler)) {
+      if (this.debugMode) {
+        console.log(`[EventBus] Handler already registered for '${eventType}'`);
+      }
+      return;
+    }
+    const subscriber = new FunctionSubscriber(handler);
+    handlersMap.set(handler, subscriber);
+    this.addSubscription(eventType, null, subscriber);
+  }
+  /**
+   * Unsubscribe a handler function from an event
+   */
+  off(eventType, handler) {
+    const handlersMap = this.functionSubscribers.get(eventType);
+    if (!handlersMap) return;
+    const subscriber = handlersMap.get(handler);
+    if (subscriber) {
+      handlersMap.delete(handler);
+      this.removeSubscription(eventType, null, subscriber);
+      if (handlersMap.size === 0) {
+        this.functionSubscribers.delete(eventType);
+      }
+    }
+  }
+  /**
+   * Subscribe to an event for one-time execution
+   */
+  once(eventType, handler) {
+    if (!this.onceHandlers.has(eventType)) {
+      this.onceHandlers.set(eventType, /* @__PURE__ */ new Set());
+    }
+    const subscriber = new FunctionSubscriber(handler);
+    this.onceHandlers.get(eventType).add(subscriber);
+    if (this.debugMode) {
+      console.log(`[EventBus] Added once handler for '${eventType}'`);
+    }
+  }
+  // ============== EventSubscriber-Based API ==============
+  /**
+   * Add a subscription using the EventSubscriber pattern
+   * Provides automatic idempotency - same subscriber object won't be added twice
+   */
+  addSubscription(eventType, subject, subscriber) {
+    if (!this.subscribers.has(eventType)) {
+      this.subscribers.set(eventType, /* @__PURE__ */ new Set());
+    }
+    const subscribers = this.subscribers.get(eventType);
+    const wasAdded = !subscribers.has(subscriber);
+    if (wasAdded) {
+      subscribers.add(subscriber);
+      if (this.debugMode) {
+        console.log(`[EventBus] Added subscription to '${eventType}' for ${subscriber.constructor.name}`);
+      }
+    } else if (this.debugMode) {
+      console.log(`[EventBus] Subscription already exists for '${eventType}' and ${subscriber.constructor.name}`);
+    }
+  }
+  /**
+   * Remove a subscription using the EventSubscriber pattern
+   */
+  removeSubscription(eventType, subject, subscriber) {
+    const subscribers = this.subscribers.get(eventType);
+    if (subscribers) {
+      const wasRemoved = subscribers.delete(subscriber);
+      if (this.debugMode && wasRemoved) {
+        console.log(`[EventBus] Removed subscription from '${eventType}' for ${subscriber.constructor.name}`);
+      }
+      if (subscribers.size === 0) {
+        this.subscribers.delete(eventType);
+      }
+    }
+  }
+  /**
+   * Emit an event to all subscribers
+   * @param eventType - The event type to emit
+   * @param data - The event data payload
+   * @param subject - The subject/subject entity that this event relates to (optional for simple API)
+   * @param emitter - The entity that emitted the event (optional for simple API)
+   */
+  emit(eventType, data, subject, emitter) {
+    const subscribers = this.subscribers.get(eventType);
+    const onceHandlers = this.onceHandlers.get(eventType);
+    const subscriberCount = (subscribers?.size || 0) + (onceHandlers?.size || 0);
+    if (subscriberCount === 0) {
+      return;
+    }
+    if (this.debugMode) {
+      console.log(`[EventBus] Emitting '${eventType}' to ${subscriberCount} subscribers`);
+    }
+    let successCount = 0;
+    let errorCount = 0;
+    if (subscribers) {
+      subscribers.forEach((subscriber) => {
+        try {
+          subscriber.handleBusEvent(eventType, data, subject, emitter);
+          successCount++;
+        } catch (error) {
+          errorCount++;
+          console.error(
+            `[EventBus] Error in EventSubscriber handler for '${eventType}' in subscriber '${subscriber.constructor.name}':`,
+            error
+          );
+        }
+      });
+    }
+    if (onceHandlers && onceHandlers.size > 0) {
+      onceHandlers.forEach((subscriber) => {
+        try {
+          subscriber.handleBusEvent(eventType, data, subject, emitter);
+          successCount++;
+        } catch (error) {
+          errorCount++;
+          console.error(
+            `[EventBus] Error in once handler for '${eventType}':`,
+            error
+          );
+        }
+      });
+      this.onceHandlers.delete(eventType);
+    }
+    if (this.debugMode) {
+      console.log(
+        `[EventBus] Event '${eventType}' completed: ${successCount} success, ${errorCount} errors`
+      );
+    }
+  }
+  /**
+   * Get all event types that have subscribers
+   */
+  getEventTypes() {
+    return Array.from(this.subscribers.keys());
+  }
+  /**
+   * Get subscriber count for an event type
+   */
+  getSubscriberCount(eventType) {
+    return this.subscribers.get(eventType)?.size || 0;
+  }
+  /**
+   * Clear all subscriptions (useful for cleanup)
+   */
+  clear() {
+    this.subscribers.clear();
+    this.functionSubscribers.clear();
+    this.onceHandlers.clear();
+    if (this.debugMode) {
+      console.log("[EventBus] All subscriptions cleared");
+    }
+  }
+  /**
+   * Enable or disable debug logging
+   */
+  setDebugMode(enabled) {
+    this.debugMode = enabled;
+  }
+};
+var ComponentEventTypes = {
+  COMPONENT_INITIALIZED: "component-initialized",
+  COMPONENT_HYDRATED: "component-hydrated",
+  COMPONENT_ERROR: "component-error"
+};
+var LifecycleEventTypes = {
+  LOCAL_INIT_STARTED: "lifecycle-local-init-started",
+  LOCAL_INIT_FINISHED: "lifecycle-local-init-finished",
+  DEPENDENCIES_INJECTED: "lifecycle-dependencies-injected",
+  ACTIVATION_STARTED: "lifecycle-activation-started",
+  ACTIVATION_FINISHED: "lifecycle-activation-finished",
+  DEACTIVATION_STARTED: "lifecycle-deactivation-started",
+  DEACTIVATION_FINISHED: "lifecycle-deactivation-finished"
+};
+
+// src/Component.ts
+var BaseComponent = class {
+  constructor(componentId, rootElement, eventBus = null, debugMode = false) {
+    this.componentId = componentId;
+    this.rootElement = rootElement;
+    this.debugMode = debugMode;
+    this._eventBus = eventBus || new EventBus();
+    this.rootElement.setAttribute("data-component", this.componentId);
+  }
+  get eventBus() {
+    return this._eventBus;
+  }
+  contentUpdated(newHTML) {
+    this.log("Content updated, re-binding to DOM");
+    this.rootElement.innerHTML = newHTML;
+  }
+  /**
+   * Subscribe to an event using the new EventSubscriber pattern
+   */
+  addSubscription(eventType, target = null) {
+    this.eventBus.addSubscription(eventType, target, this);
+  }
+  /**
+   * Unsubscribe from an event using the new EventSubscriber pattern
+   */
+  removeSubscription(eventType, target = null) {
+    this.eventBus.removeSubscription(eventType, target, this);
+  }
+  /**
+   * Emit an event from this component
+   */
+  emit(eventType, data, target, emitter = null) {
+    this.eventBus.emit(eventType, data, target, emitter || this);
+  }
+  /**
+   * Default implementation of EventSubscriber interface
+   * Components can override this to handle events
+   */
+  handleBusEvent(eventType, data, target, emitter) {
+    if (this.debugMode) {
+      console.log(`[${this.componentId}] Received unhandled event: ${eventType}`);
+    }
+  }
+  /**
+   * Find elements within this component's root element only
+   * Enforces separation of concerns - no cross-component DOM access
+   */
+  findElement(selector) {
+    return this.rootElement.querySelector(selector);
+  }
+  /**
+   * Find multiple elements within this component's root element only
+   */
+  findElements(selector) {
+    return Array.from(this.rootElement.querySelectorAll(selector));
+  }
+  /**
+   * Log messages with component identification
+   */
+  log(message, data = null) {
+    if (this.debugMode) {
+      console.log(`[${this.componentId}] ${message}`, data);
+    }
+  }
+  /**
+   * Default lifecycle method: discover and return child components
+   * Override this if your component creates child components that need lifecycle management
+   */
+  performLocalInit() {
+    return [];
+  }
+  /**
+   * Default lifecycle method: inject dependencies
+   * Override this if your component needs dependencies from other components
+   */
+  setupDependencies() {
+  }
+  /**
+   * Default lifecycle method: activate component for coordination
+   * Override this if your component needs to coordinate with other components after initialization
+   */
+  activate() {
+  }
+  /**
+   * Default lifecycle method: deactivate component
+   * Override this if your component needs cleanup during lifecycle management
+   */
+  deactivate() {
+    this.rootElement?.removeAttribute("data-component");
+    this.log("Component deactivated successfully");
+  }
+  set innerHTML(innerHTML) {
+    const [newHTML, allow] = this.shouldUpdateHtml(innerHTML);
+    if (allow) {
+      this.rootElement.innerHTML = newHTML;
+      this.htmlUpdated(newHTML);
+    }
+  }
+  // Called BEFORE the HTML is about to be updated.  This is an opportunity
+  // for subclasses to fix/tweak html being updated and also ignore an update
+  // just in case.  Default behavior is to return the html as is
+  shouldUpdateHtml(html) {
+    return [html, true];
+  }
+  // Called after the HTML for the component has been updated.
+  // This is an opportunity to rebind any event listeners etc
+  htmlUpdated(html) {
+  }
+  // LCMComponent implementation with default empty methods
+  // Components can override these when they need coordination with other components
+};
+
+// src/LifecycleController.ts
+var LifecycleController = class {
+  constructor(eventBus, config = {}) {
+    this.eventBus = eventBus;
+    this.config = {
+      phaseTimeoutMs: config.phaseTimeoutMs ?? 1e4,
+      continueOnError: config.continueOnError ?? false,
+      validateDependencies: false,
+      enableDebugLogging: config.enableDebugLogging ?? false
+    };
+    this.allComponents = [];
+    this.componentsByLevel = [];
+  }
+  /**
+   * Initialize component tree starting from root component
+   *
+   * @param rootComponent The root component to start initialization from
+   * @param rootName Optional name for the root component (for debugging)
+   * @returns Promise that resolves when all components are fully initialized
+   */
+  async initializeFromRoot(rootComponent) {
+    await this.performLocalInit(rootComponent);
+    await this.injectDependencies();
+    await this.activate();
+  }
+  /**
+   * Phase 0: Discover all components via breadth-first traversal
+   */
+  async performLocalInit(rootComponent) {
+    const visited = /* @__PURE__ */ new Set();
+    let queue = [rootComponent];
+    this.allComponents = [rootComponent];
+    if (this.componentsByLevel.length > 0) {
+      throw new Error("Already done");
+    }
+    for (let level = 0; queue.length > 0; level++) {
+      const newqueue = [];
+      const promises = new Array();
+      this.componentsByLevel.push(queue);
+      for (let i = 0; i < queue.length; i++) {
+        const component = queue[i];
+        if (visited.has(component)) {
+          throw new Error(
+            `Component hierarchy integrity violation: Component '${component.constructor.name}' discovered as child of multiple parents at level ${level}. Component hierarchies must form a tree structure where each component has exactly one parent.`
+          );
+        }
+        this.emitEvent(LifecycleEventTypes.LOCAL_INIT_STARTED, component, level);
+        const result = component.performLocalInit();
+        promises.push(Promise.resolve(result).then((children) => {
+          for (const ch of children) {
+            this.allComponents.push(ch);
+            newqueue.push(ch);
+          }
+          return children;
+        }));
+        await Promise.all(promises);
+        this.emitEvent(LifecycleEventTypes.LOCAL_INIT_FINISHED, component, level);
+      }
+      queue = newqueue;
+    }
+  }
+  /**
+   * Phase 1: Dependency injection.
+   * Here all our components are already discovered so we can call directly
+   */
+  injectDependencies() {
+    for (const comp of this.allComponents) {
+      comp.setupDependencies();
+    }
+  }
+  /**
+   * Phase 2: Activate all components
+   *
+   * Here all our components are already discovered and their dependencies setup
+   * so we can call directly
+   */
+  async activate() {
+    const visited = /* @__PURE__ */ new Set();
+    for (let level = 0; level < this.componentsByLevel.length; level++) {
+      const promises = new Array();
+      const levelComps = this.componentsByLevel[level];
+      for (const comp of levelComps) {
+        if (visited.has(comp)) {
+          throw new Error("Comp already visited");
+        }
+        visited.add(comp);
+        this.emitEvent(LifecycleEventTypes.ACTIVATION_STARTED, comp, 0);
+        const result = comp.activate();
+        promises.push(Promise.resolve(result).then(() => {
+          this.emitEvent(LifecycleEventTypes.ACTIVATION_FINISHED, comp, 0);
+        }));
+      }
+      await Promise.all(promises);
+    }
+  }
+  /**
+   * Deactivate all components in reverse order.  This is usually called when a page quits or a component is
+   * deactivated
+   */
+  async deactivateAll() {
+    for (let level = this.componentsByLevel.length - 1; level >= 0; level--) {
+      const promises = new Array();
+      const levelComps = this.componentsByLevel[level];
+      for (const comp of levelComps) {
+        this.emitEvent(LifecycleEventTypes.DEACTIVATION_STARTED, comp, level);
+        const result = comp.deactivate();
+        promises.push(Promise.resolve(result).then(() => {
+          this.emitEvent(LifecycleEventTypes.DEACTIVATION_FINISHED, comp, level);
+        }));
+      }
+      await Promise.all(promises);
+    }
+  }
+  /**
+   * Emit lifecycle event to registered callbacks
+   */
+  emitEvent(event, component, level, error = null) {
+    this.eventBus.emit(
+      event,
+      { error, success: error == null },
+      this,
+      component
+    );
+  }
+  /**
+   * Log message if debug logging is enabled
+   */
+  log(message, ...args) {
+    if (this.config.enableDebugLogging) {
+      console.log(`[LifecycleController] ${message}`, ...args);
+    }
+  }
+  /**
+   * Log error message
+   */
+  logError(message, error) {
+    console.error(`[LifecycleController] ${message}`, error);
+  }
+  /**
+   * Get current status of all components
+   */
+  /*
+  public getComponentStatus(): Array<{ name: string; phase: ComponentPhase }> {
+      return Array.from(this.allComponents).map(component => ({
+          name: this.getComponentName(component),
+          phase: this.componentPhases.get(component) || 'created'
+      }));
+  }
+  */
+};
+LifecycleController.DefaultConfig = {
+  enableDebugLogging: true,
+  phaseTimeoutMs: 15e3,
+  // Increased timeout for component loading
+  continueOnError: false
+  // Fail fast for debugging
+};
+
+// src/ThemeManager.ts
+var _ThemeManager = class _ThemeManager {
+  // Computer icon
+  /**
+   * Initialize theme based on saved preference or system default
+   */
+  static initialize() {
+    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) {
+    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 {
+      localStorage.setItem("theme", _ThemeManager.LIGHT);
+      document.documentElement.classList.remove("dark");
+    }
+  }
+  /**
+   * Get current theme setting (light, dark, or system)
+   */
+  static getCurrentThemeSetting() {
+    return localStorage.getItem("theme") || _ThemeManager.SYSTEM;
+  }
+  /**
+   * Gets the *next* theme in the cycle: Light -> Dark -> System -> Light ...
+   */
+  static getNextTheme(currentSetting) {
+    if (currentSetting === _ThemeManager.LIGHT) {
+      return _ThemeManager.DARK;
+    } else if (currentSetting === _ThemeManager.DARK) {
+      return _ThemeManager.SYSTEM;
+    } else {
+      return _ThemeManager.LIGHT;
+    }
+  }
+  /**
+   * Gets the appropriate SVG icon string for a given theme setting.
+   */
+  static getIconSVG(themeSetting) {
+    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) {
+    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)
+   */
+  static init() {
+    _ThemeManager.initialize();
+  }
+};
+// Theme options
+_ThemeManager.LIGHT = "light";
+_ThemeManager.DARK = "dark";
+_ThemeManager.SYSTEM = "system";
+// Icons for each theme state
+_ThemeManager.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
+_ThemeManager.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
+_ThemeManager.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>`;
+var ThemeManager = _ThemeManager;
+
+// src/TemplateLoader.ts
+var TemplateLoader = class {
+  constructor(registryName = "template-registry") {
+    this.registryName = registryName;
+  }
+  /**
+   * 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.
+   */
+  _findTemplateWrapper(templateId) {
+    const templateRegistry = document.getElementById(this.registryName);
+    if (!templateRegistry) {
+      console.error(`Template registry '#${this.registryName}' not found!`);
+      return null;
+    }
+    const templateWrapper = templateRegistry.querySelector(`[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) {
+    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) {
+    const templateWrapper = this._findTemplateWrapper(templateId);
+    if (!templateWrapper) {
+      return [];
+    }
+    const templateRootElement = templateWrapper.cloneNode(true);
+    if (!templateRootElement) {
+      console.error(`Template content is empty for: ${templateId}`);
+      return [];
+    }
+    return Array.from(templateRootElement.children);
+  }
+  /**
+  * 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.
+  */
+  loadInto(templateId, targetElement) {
+    if (!targetElement) {
+      console.error(`Cannot load template "${templateId}": Target element is null.`);
+      return false;
+    }
+    const templateWrapper = this._findTemplateWrapper(templateId);
+    if (!templateWrapper) {
+      targetElement.innerHTML = `<div class="p-4 text-red-500">Error loading template '${templateId}' (Not Found)</div>`;
+      return false;
+    }
+    targetElement.innerHTML = "";
+    const childElements = Array.from(templateWrapper.children);
+    if (childElements.length === 0) {
+      console.warn(`Template "${templateId}" has no child elements to load.`);
+    } else {
+      childElements.forEach((child) => {
+        targetElement.appendChild(child.cloneNode(true));
+      });
+    }
+    return true;
+  }
+};
+
+// src/Modal.ts
+var _Modal = class _Modal {
+  // Store the Apply callback
+  /**
+   * Private constructor for singleton pattern
+   */
+  constructor() {
+    // Current modal data - including optional callbacks
+    this.currentTemplateId = null;
+    this.currentData = null;
+    this.onSubmitCallback = null;
+    // Store the callback
+    this.onApplyCallback = null;
+    this.modalContainer = document.getElementById("modal-container");
+    this.modalBackdrop = document.getElementById("modal-backdrop");
+    this.modalPanel = document.getElementById("modal-panel");
+    this.modalContent = document.getElementById("modal-content");
+    this.closeButton = document.getElementById("modal-close");
+    this.templateLoader = new TemplateLoader();
+    this.bindEvents();
+  }
+  /**
+   * Get the Modal instance (singleton)
+   */
+  static getInstance() {
+    if (!_Modal.instance) {
+      _Modal.instance = new _Modal();
+    }
+    return _Modal.instance;
+  }
+  /**
+   * Bind event listeners for modal interactions
+   */
+  bindEvents() {
+    if (this.closeButton) {
+      this.closeButton.addEventListener("click", () => this.hide());
+    }
+    if (this.modalBackdrop) {
+      this.modalBackdrop.addEventListener("click", (e) => {
+        if (e.target === this.modalBackdrop) {
+          this.hide();
+        }
+      });
+    }
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && this.isVisible()) {
+        this.hide();
+      }
+    });
+    if (this.modalPanel) {
+      this.modalPanel.addEventListener("click", (e) => {
+        const target = e.target;
+        const closeButton = target.closest('button[id$="-cancel"], button[id$="-close"]');
+        if (closeButton) {
+          this.hide();
+          return;
+        }
+        const actionButton = target.closest("button[data-modal-action]");
+        if (actionButton) {
+          const action = actionButton.getAttribute("data-modal-action");
+          if (action === "submit" && this.onSubmitCallback) {
+            this.onSubmitCallback(this.currentData);
+          } else if (action === "apply" && this.onApplyCallback) {
+            this.onApplyCallback(this.currentData);
+            this.hide();
+          }
+        }
+      });
+    }
+  }
+  /**
+   * Check if the modal is currently visible
+   */
+  isVisible() {
+    return this.modalContainer ? !this.modalContainer.classList.contains("hidden") : false;
+  }
+  /**
+   * Show a modal with content from the specified template ID.
+   * Uses TemplateLoader to get the content element.
+   * @param templateId ID used in `data-template-id` attribute in TemplateRegistry.html
+   * @param data Optional data to pass to the modal. Can include callbacks like `onSubmit`.
+   * @returns The root HTMLElement of the loaded content, or null if failed.
+   */
+  show(templateId, data = null) {
+    if (!this.modalContainer || !this.modalContent) {
+      console.error("Modal container or content area not found.");
+      return null;
+    }
+    const success = this.templateLoader.loadInto(templateId, this.modalContent);
+    if (!success) {
+      this.modalContainer.classList.remove("hidden");
+      setTimeout(() => this.modalContainer.classList.add("modal-active"), 10);
+      return null;
+    }
+    this.currentTemplateId = templateId;
+    this.currentData = data || {};
+    this.onSubmitCallback = data?.onSubmit || null;
+    this.onApplyCallback = data?.onApply || null;
+    if (data) {
+      Object.entries(data).forEach(([key, value]) => {
+        if (key !== "onSubmit" && (typeof value === "string" || typeof value === "number" || typeof value === "boolean")) {
+          if (this.modalContent) this.modalContent.dataset[key] = String(value);
+        }
+      });
+    }
+    this.modalContainer.classList.remove("hidden");
+    setTimeout(() => {
+      this.modalContainer.classList.add("modal-active");
+    }, 10);
+    const firstElement = this.modalContent;
+    return firstElement;
+  }
+  /**
+   * Hide the modal
+   */
+  hide() {
+    return new Promise((resolve) => {
+      if (!this.modalContainer) return;
+      this.modalContainer.classList.remove("modal-active");
+      setTimeout(() => {
+        this.modalContainer.classList.add("hidden");
+        this.currentTemplateId = null;
+        this.currentData = null;
+        this.onSubmitCallback = null;
+        this.onApplyCallback = null;
+        if (this.modalContent) this.modalContent.innerHTML = "";
+        resolve();
+      }, 200);
+    });
+  }
+  /**
+   * Get the current modal content element
+   */
+  getContentElement() {
+    return this.modalContent;
+  }
+  /**
+   * Get the current template ID
+   */
+  getCurrentTemplate() {
+    return this.currentTemplateId;
+  }
+  /**
+   * Get the current modal data
+   */
+  getCurrentData() {
+    return this.currentData;
+  }
+  /**
+   * Update modal data (excluding callbacks for now)
+   */
+  updateData(newData) {
+    this.currentData = { ...this.currentData, ...newData };
+    if (this.modalContent && newData) {
+      Object.entries(newData).forEach(([key, value]) => {
+        if (key !== "onSubmit" && (typeof value === "string" || typeof value === "number" || typeof value === "boolean")) {
+          if (this.modalContent) this.modalContent.dataset[key] = String(value);
+        }
+      });
+    }
+  }
+  /**
+   * Initialize the modal component
+   */
+  static init() {
+    return _Modal.getInstance();
+  }
+};
+_Modal.instance = null;
+var Modal = _Modal;
+
+// src/ToastManager.ts
+var _ToastManager = class _ToastManager {
+  /**
+   * Private constructor for singleton pattern
+   */
+  constructor() {
+    this.toasts = /* @__PURE__ */ new Map();
+    this.counter = 0;
+    this.container = document.getElementById("toast-container");
+    this.template = document.getElementById("toast-template");
+  }
+  /**
+   * Get the ToastManager instance (singleton)
+   */
+  static getInstance() {
+    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)
+   */
+  showToast(title, message, type = "info", duration = 4e3) {
+    if (!this.container || !this.template) return "";
+    const id = `toast-${Date.now()}-${this.counter++}`;
+    const toast = this.template.cloneNode(true);
+    toast.id = id;
+    toast.classList.remove("hidden");
+    const titleElement = toast.querySelector(".toast-title");
+    const messageElement = toast.querySelector(".toast-message");
+    if (titleElement) titleElement.textContent = title;
+    if (messageElement) messageElement.textContent = message;
+    const iconContainer = toast.querySelector(".flex-shrink-0");
+    if (iconContainer) {
+      iconContainer.innerHTML = "";
+      let icon;
+      let borderColor;
+      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;
+      }
+      iconContainer.innerHTML = icon;
+      const borderElement = toast.querySelector(".border-l-4");
+      if (borderElement) {
+        borderElement.className = borderElement.className.replace(/border-[a-z]+-500/g, borderColor);
+      }
+    }
+    const closeButton = toast.querySelector(".toast-close");
+    if (closeButton) {
+      closeButton.addEventListener("click", () => {
+        this.hideToast(id);
+      });
+    }
+    this.container.appendChild(toast);
+    this.toasts.set(id, toast);
+    setTimeout(() => {
+      toast.classList.remove("scale-95", "opacity-0");
+      toast.classList.add("scale-100", "opacity-100");
+    }, 10);
+    if (duration > 0) {
+      setTimeout(() => {
+        this.hideToast(id);
+      }, duration);
+    }
+    return id;
+  }
+  /**
+   * Hide a toast notification
+   * @param id Toast ID
+   */
+  hideToast(id) {
+    const toast = this.toasts.get(id);
+    if (!toast) return;
+    toast.classList.remove("scale-100", "opacity-100");
+    toast.classList.add("scale-95", "opacity-0");
+    setTimeout(() => {
+      toast.remove();
+      this.toasts.delete(id);
+    }, 300);
+  }
+  /**
+   * Hide all toast notifications
+   */
+  hideAllToasts() {
+    this.toasts.forEach((_, id) => {
+      this.hideToast(id);
+    });
+  }
+  /**
+   * Initialize the component
+   */
+  static init() {
+    return _ToastManager.getInstance();
+  }
+};
+_ToastManager.instance = null;
+var ToastManager = _ToastManager;
+
+// src/SplashScreen.ts
+var SplashScreen = class {
+  /**
+   * Dismiss the splash screen with a fade-out animation
+   * Safe to call multiple times - only dismisses once
+   */
+  static dismiss() {
+    if (this.dismissed) {
+      return;
+    }
+    const splash = document.getElementById(this.SPLASH_ID);
+    if (!splash) {
+      return;
+    }
+    this.dismissed = true;
+    splash.style.opacity = "0";
+    setTimeout(() => {
+      splash.remove();
+    }, 300);
+  }
+  /**
+   * Update the splash screen message (if it hasn't been dismissed yet)
+   */
+  static updateMessage(title, message) {
+    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) {
+    if (this.dismissed) {
+      return;
+    }
+    const splash = document.getElementById(this.SPLASH_ID);
+    if (!splash) {
+      return;
+    }
+    const clampedPercent = Math.max(0, Math.min(100, percent));
+    const progressBar = splash.querySelector("[data-splash-progress-bar]");
+    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) {
+    if (options.title !== void 0 || options.message !== void 0) {
+      this.updateMessage(options.title, options.message);
+    }
+    if (options.progress !== void 0) {
+      this.updateProgress(options.progress);
+    }
+  }
+  /**
+   * Check if splash screen is still visible
+   */
+  static isVisible() {
+    return !this.dismissed && !!document.getElementById(this.SPLASH_ID);
+  }
+};
+SplashScreen.SPLASH_ID = "splash-screen";
+SplashScreen.dismissed = false;
+
+// src/BasePage.ts
+var BasePage = class extends BaseComponent {
+  // Constructor now just uses document as the rootElement
+  constructor(componentId, eventBus = null, debugMode = false) {
+    super(componentId, document.body, eventBus, debugMode);
+    this.componentId = componentId;
+    this.debugMode = debugMode;
+    this.initializeBaseComponents();
+    this.bindBaseEvents();
+  }
+  // LCMComponent Phase 1: Initialize page structure and discover child components
+  performLocalInit() {
+    this.log("BasePage: Starting local initialization");
+    return this.initializeSpecificComponents();
+  }
+  // LCMComponent Phase 3: Activate the page (bind events after all components are ready)
+  activate() {
+    this.log("BasePage: Activating page");
+    this.bindSpecificEvents();
+    this.log("BasePage: Page activation complete");
+  }
+  /**
+   * Initialize common UI components that all pages need
+   */
+  initializeBaseComponents() {
+    ThemeManager.init();
+    this.modal = Modal.init();
+    this.toastManager = ToastManager.init();
+    this.themeToggleButton = document.getElementById("theme-toggle-button");
+    this.themeToggleIcon = document.getElementById("theme-toggle-icon");
+    if (!this.themeToggleButton || !this.themeToggleIcon) {
+      console.warn("Theme toggle button or icon element not found in Header.");
+    }
+  }
+  /**
+   * Bind common event handlers that all pages need
+   */
+  bindBaseEvents() {
+    if (this.themeToggleButton) {
+      this.themeToggleButton.addEventListener("click", this.handleThemeToggleClick.bind(this));
+    }
+    this.updateThemeButtonState();
+    this.initializeHeaderActionsDropdown();
+  }
+  /**
+   * Handle theme toggle button clicks
+   */
+  handleThemeToggleClick() {
+    const currentSetting = ThemeManager.getCurrentThemeSetting();
+    const nextSetting = ThemeManager.getNextTheme(currentSetting);
+    ThemeManager.setTheme(nextSetting);
+    this.updateThemeButtonState(nextSetting);
+  }
+  /**
+   * Update the theme toggle button state and appearance
+   */
+  updateThemeButtonState(currentTheme) {
+    if (!this.themeToggleButton || !this.themeToggleIcon) return;
+    const themeToDisplay = currentTheme || ThemeManager.getCurrentThemeSetting();
+    const iconSVG = ThemeManager.getIconSVG(themeToDisplay);
+    const label = `Toggle theme (currently: ${ThemeManager.getThemeLabel(themeToDisplay)})`;
+    this.themeToggleIcon.innerHTML = iconSVG;
+    this.themeToggleButton.setAttribute("aria-label", label);
+    this.themeToggleButton.setAttribute("title", label);
+  }
+  /**
+   * Show a toast notification
+   */
+  showToast(title, message, type = "info", duration) {
+    this.toastManager?.showToast(title, message, type, duration);
+  }
+  /**
+   * Show a modal dialog
+   */
+  showModal(templateId, data) {
+    this.modal?.show(templateId, data);
+  }
+  /**
+   * Hide the modal dialog
+   */
+  hideModal() {
+    this.modal?.hide();
+  }
+  /**
+   * Get the current theme setting
+   */
+  getCurrentTheme() {
+    return ThemeManager.getCurrentThemeSetting();
+  }
+  /**
+   * Check if the current theme is dark mode
+   */
+  isDarkMode() {
+    return document.documentElement.classList.contains("dark");
+  }
+  /**
+   * Initialize responsive header actions drawer
+   * On desktop: drawer is always visible, positioned inline with header
+   * On mobile: drawer slides down from top when menu button is clicked
+   */
+  initializeHeaderActionsDropdown() {
+    const menuBtn = document.getElementById("header-actions-menu-btn");
+    const drawer = document.getElementById("header-actions-drawer");
+    if (!menuBtn || !drawer) {
+      return;
+    }
+    const drawerBackdrop = drawer.querySelector(".header-drawer-backdrop");
+    const openDrawer = () => {
+      drawer.classList.remove("hidden");
+      void drawer.offsetHeight;
+      requestAnimationFrame(() => {
+        drawer.classList.add("open");
+      });
+    };
+    const closeDrawer = () => {
+      drawer.classList.remove("open");
+      setTimeout(() => {
+        drawer.classList.add("hidden");
+      }, 300);
+    };
+    menuBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (drawer.classList.contains("open")) {
+        closeDrawer();
+      } else {
+        openDrawer();
+      }
+    });
+    if (drawerBackdrop) {
+      drawerBackdrop.addEventListener("click", closeDrawer);
+    }
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && drawer.classList.contains("open")) {
+        closeDrawer();
+      }
+    });
+  }
+  /**
+   * Abstract method that subclasses must implement to initialize their specific components
+   * Should return any child components that need lifecycle management
+   */
+  initializeSpecificComponents() {
+    return [];
+  }
+  /**
+   * Abstract method that subclasses must implement to bind their specific events
+   */
+  bindSpecificEvents() {
+  }
+  /**
+   * Component-specific cleanup logic (required by BaseComponent)
+   */
+  destroyComponent() {
+    this.log("BasePage: Cleaning up base page components");
+    this.modal = null;
+    this.toastManager = null;
+    this.themeToggleButton = null;
+    this.themeToggleIcon = null;
+  }
+  /**
+   * Ensure an element exists, create if missing
+   * This is acceptable for page-level orchestration to find component root elements
+   */
+  ensureElement(selector, fallbackId) {
+    let element = document.querySelector(selector);
+    if (!element) {
+      console.warn(`Element not found: ${selector}, creating fallback`);
+      element = document.createElement("div");
+      element.id = fallbackId;
+      element.className = "w-full h-full";
+      const mainContainer = document.querySelector("main") || document.body;
+      mainContainer.appendChild(element);
+    }
+    if (!element.id) {
+      element.id = fallbackId;
+    }
+    return element;
+  }
+  dismissSplashScreen() {
+    SplashScreen.dismiss();
+  }
+  static loadAfterPageLoaded(pageName, PageClass, PageClassName) {
+    document.addEventListener("DOMContentLoaded", async () => {
+      const page = new PageClass(PageClassName);
+      window[pageName] = page;
+      const lifecycleController = new LifecycleController(page.eventBus, LifecycleController.DefaultConfig);
+      await lifecycleController.initializeFromRoot(page);
+    });
+  }
+};
+
+// src/MobileBottomDrawer.ts
+var MobileBottomDrawer = class extends BaseComponent {
+  /**
+   * Create a MobileBottomDrawer
+   * @param rootElement - The root container element for the drawer
+   * @param eventBus - Event bus for component communication
+   * @param debugMode - Enable debug logging
+   */
+  constructor(rootElement, eventBus, debugMode = false) {
+    super("mobile-bottom-drawer", rootElement, eventBus, debugMode);
+    this.isOpen = false;
+    // Swipe gesture tracking
+    this.touchStartY = 0;
+    this.touchCurrentY = 0;
+    this.isDragging = false;
+  }
+  /**
+   * Phase 1: Initialize DOM and discover child components
+   */
+  async performLocalInit() {
+    this.backdropElement = this.rootElement.querySelector(".drawer-backdrop");
+    this.drawerElement = this.rootElement.querySelector(".drawer-container");
+    this.contentElement = this.rootElement.querySelector(".drawer-content");
+    this.closeButton = this.rootElement.querySelector(".drawer-close-btn");
+    if (!this.backdropElement || !this.drawerElement || !this.contentElement) {
+      throw new Error("MobileBottomDrawer: Required drawer elements not found");
+    }
+    this.bindEvents();
+    return [];
+  }
+  /**
+   * Bind event listeners for drawer interactions
+   */
+  bindEvents() {
+    this.backdropElement.addEventListener("click", (e) => {
+      if (e.target === this.backdropElement) {
+        this.close();
+      }
+    });
+    if (this.closeButton) {
+      this.closeButton.addEventListener("click", () => {
+        this.close();
+      });
+    }
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && this.isOpen) {
+        this.close();
+      }
+    });
+    this.drawerElement.addEventListener("touchstart", (e) => this.handleTouchStart(e), { passive: true });
+    this.drawerElement.addEventListener("touchmove", (e) => this.handleTouchMove(e), { passive: false });
+    this.drawerElement.addEventListener("touchend", (e) => this.handleTouchEnd(e), { passive: true });
+  }
+  /**
+   * Handle touch start for swipe gesture
+   */
+  handleTouchStart(e) {
+    const contentScrollTop = this.contentElement.scrollTop;
+    if (contentScrollTop > 0) {
+      return;
+    }
+    this.touchStartY = e.touches[0].clientY;
+    this.touchCurrentY = this.touchStartY;
+    this.isDragging = true;
+  }
+  /**
+   * Handle touch move for swipe gesture
+   */
+  handleTouchMove(e) {
+    if (!this.isDragging) return;
+    this.touchCurrentY = e.touches[0].clientY;
+    const deltaY = this.touchCurrentY - this.touchStartY;
+    if (deltaY > 0) {
+      e.preventDefault();
+      const dragAmount = Math.min(deltaY, 300);
+      this.drawerElement.style.transform = `translateY(${dragAmount}px)`;
+      const opacity = Math.max(0, 0.5 - dragAmount / 600);
+      this.backdropElement.style.background = `rgba(0, 0, 0, ${opacity})`;
+    }
+  }
+  /**
+   * Handle touch end for swipe gesture
+   */
+  handleTouchEnd(e) {
+    if (!this.isDragging) return;
+    const deltaY = this.touchCurrentY - this.touchStartY;
+    const velocity = deltaY / 300;
+    if (deltaY > 100 || velocity > 0.3) {
+      this.close();
+    } else {
+      this.drawerElement.style.transform = "";
+      this.backdropElement.style.background = "";
+    }
+    this.isDragging = false;
+  }
+  /**
+   * Open the drawer with slide-up animation
+   */
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.drawerElement.style.transform = "";
+    this.backdropElement.style.background = "";
+    this.rootElement.classList.add("open");
+    this.eventBus.emit("drawer-opened", { drawerId: this.componentId }, null, this);
+  }
+  /**
+   * Close the drawer with slide-down animation
+   */
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.drawerElement.style.transform = "";
+    this.backdropElement.style.background = "";
+    this.rootElement.classList.remove("open");
+    this.eventBus.emit("drawer-closed", { drawerId: this.componentId }, null, this);
+    if (this.onCloseCallback) {
+      this.onCloseCallback();
+    }
+  }
+  /**
+   * Toggle drawer open/closed
+   */
+  toggle() {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  /**
+   * Check if drawer is currently open
+   */
+  getIsOpen() {
+    return this.isOpen;
+  }
+  /**
+   * Set the content element for the drawer
+   * @param element - The element to insert into the drawer content area
+   */
+  setContent(element) {
+    this.contentElement.innerHTML = "";
+    this.contentElement.appendChild(element);
+  }
+  /**
+   * Set a callback to be called when drawer closes
+   * @param callback - Function to call on close
+   */
+  setOnClose(callback) {
+    this.onCloseCallback = callback;
+  }
+  /**
+   * Get the content container element
+   */
+  getContentContainer() {
+    return this.contentElement;
+  }
+};
+
+// src/DOMUtils.ts
+function isInInputContext(element) {
+  if (!element) return false;
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "input" || tagName === "textarea" || tagName === "select") {
+    return true;
+  }
+  if (element.contentEditable === "true" || element.isContentEditable) {
+    return true;
+  }
+  if (element.closest("input") !== null || element.closest("textarea") !== null || element.closest("select") !== null || element.closest('[contenteditable="true"]') !== null || element.closest('[contenteditable=""]') !== null) {
+    return true;
+  }
+  if (element.closest(".modal") !== null) {
+    return true;
+  }
+  const inputFieldIds = ["map-title-input"];
+  if (inputFieldIds.includes(element.id) || inputFieldIds.some((id) => element.closest(`#${id}`) !== null)) {
+    return true;
+  }
+  return false;
+}
+function hasModifierKeys(event) {
+  return event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
+}
+function shouldIgnoreShortcut(event) {
+  const target = event.target;
+  return hasModifierKeys(event) || isInInputContext(target);
+}
+
+// src/KeyboardShortcutManager.ts
+var KeyboardState = /* @__PURE__ */ ((KeyboardState2) => {
+  KeyboardState2["NORMAL"] = "normal";
+  KeyboardState2["AWAITING_ARGS"] = "awaiting_args";
+  return KeyboardState2;
+})(KeyboardState || {});
+var KeyboardShortcutManager = class {
+  constructor(config) {
+    this.shortcuts = /* @__PURE__ */ new Map();
+    this.state = "normal" /* NORMAL */;
+    this.currentCommand = "";
+    this.currentArgs = "";
+    this.helpContainer = null;
+    this.timeout = 3e3;
+    // Default 3 second timeout
+    this.timeoutId = null;
+    this.helpOverlay = null;
+    this.immediateExecution = false;
+    // Enable immediate execution mode
+    this.previewDelay = 300;
+    // Default 300ms preview delay
+    this.previewTimeoutId = null;
+    // Separate timeout for preview
+    this.isPreviewActive = false;
+    // Track if preview is currently active
+    this.onStateChange = null;
+    this.helpContainer = config.helpContainer || null;
+    this.timeout = config.timeout || 3e3;
+    this.immediateExecution = config.immediateExecution || false;
+    this.previewDelay = config.previewDelay || 300;
+    this.onStateChange = config.onStateChange || null;
+    config.shortcuts.forEach((shortcut) => {
+      this.shortcuts.set(shortcut.key, shortcut);
+    });
+    this.initialize();
+  }
+  initialize() {
+    document.addEventListener("keydown", this.handleKeydown.bind(this));
+    this.updateStateIndicator();
+  }
+  handleKeydown(event) {
+    const target = event.target;
+    if (isInInputContext(target)) {
+      return;
+    }
+    if (event.key === "?" && this.state === "normal" /* NORMAL */) {
+      event.preventDefault();
+      this.showHelp();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      if (this.immediateExecution && this.isPreviewActive) {
+        this.cancelCurrentPreview();
+      }
+      this.resetState();
+      return;
+    }
+    if (this.state === "normal" /* NORMAL */) {
+      this.handleNormalState(event);
+    } else if (this.state === "awaiting_args" /* AWAITING_ARGS */) {
+      this.handleAwaitingArgsState(event);
+    }
+  }
+  handleNormalState(event) {
+    const key = event.key.toLowerCase();
+    const shortcut = this.shortcuts.get(key);
+    if (shortcut) {
+      event.preventDefault();
+      if (shortcut.contextFilter && !shortcut.contextFilter(event)) {
+        return;
+      }
+      if (shortcut.requiresArgs) {
+        this.state = "awaiting_args" /* AWAITING_ARGS */;
+        this.currentCommand = key;
+        this.currentArgs = "";
+        this.updateStateIndicator();
+        this.startTimeout();
+        if (this.onStateChange) {
+          this.onStateChange(this.state, key);
+        }
+      } else {
+        this.executeShortcut(shortcut);
+      }
+    }
+  }
+  handleAwaitingArgsState(event) {
+    const key = event.key;
+    if (key >= "0" && key <= "9") {
+      event.preventDefault();
+      this.currentArgs += key;
+      this.updateStateIndicator();
+      this.resetTimeout();
+      if (this.immediateExecution) {
+        this.schedulePreviewExecution();
+      }
+    } else if (key === "Enter" || key === " ") {
+      event.preventDefault();
+      this.executeCurrentCommand();
+    } else if (key === "Backspace") {
+      event.preventDefault();
+      this.currentArgs = this.currentArgs.slice(0, -1);
+      this.updateStateIndicator();
+      this.resetTimeout();
+      if (this.immediateExecution) {
+        this.cancelPreviewExecution();
+        if (this.currentArgs.length > 0) {
+          this.schedulePreviewExecution();
+        }
+      }
+    }
+  }
+  executeCurrentCommand() {
+    const shortcut = this.shortcuts.get(this.currentCommand);
+    if (shortcut && this.currentArgs) {
+      this.executeShortcut(shortcut, this.currentArgs);
+    }
+    this.resetState();
+  }
+  executeShortcut(shortcut, args) {
+    try {
+      shortcut.handler(args);
+    } catch (error) {
+      console.error("Error executing shortcut:", error);
+    }
+  }
+  schedulePreviewExecution() {
+    this.cancelPreviewExecution();
+    this.previewTimeoutId = window.setTimeout(() => {
+      this.executePreview();
+    }, this.previewDelay);
+  }
+  cancelPreviewExecution() {
+    if (this.previewTimeoutId) {
+      window.clearTimeout(this.previewTimeoutId);
+      this.previewTimeoutId = null;
+    }
+    if (this.isPreviewActive) {
+      this.cancelCurrentPreview();
+    }
+  }
+  executePreview() {
+    const shortcut = this.shortcuts.get(this.currentCommand);
+    if (shortcut && this.currentArgs) {
+      try {
+        if (shortcut.previewHandler) {
+          shortcut.previewHandler(this.currentArgs);
+          this.isPreviewActive = true;
+        } else {
+          shortcut.handler(this.currentArgs);
+          this.isPreviewActive = true;
+        }
+      } catch (error) {
+        console.error("Error executing preview:", error);
+      }
+    }
+  }
+  cancelCurrentPreview() {
+    if (this.isPreviewActive) {
+      const shortcut = this.shortcuts.get(this.currentCommand);
+      if (shortcut && shortcut.cancelHandler) {
+        try {
+          shortcut.cancelHandler();
+        } catch (error) {
+          console.error("Error canceling preview:", error);
+        }
+      }
+      this.isPreviewActive = false;
+    }
+  }
+  resetState() {
+    this.state = "normal" /* NORMAL */;
+    this.currentCommand = "";
+    this.currentArgs = "";
+    this.clearTimeout();
+    this.cancelPreviewExecution();
+    this.updateStateIndicator();
+    this.hideHelp();
+    if (this.onStateChange) {
+      this.onStateChange(this.state);
+    }
+  }
+  startTimeout() {
+    this.timeoutId = window.setTimeout(() => {
+      this.resetState();
+    }, this.timeout);
+  }
+  resetTimeout() {
+    this.clearTimeout();
+    this.startTimeout();
+  }
+  clearTimeout() {
+    if (this.timeoutId) {
+      window.clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+  }
+  updateStateIndicator() {
+    const existingIndicator = document.getElementById("keyboard-state-indicator");
+    if (existingIndicator) {
+      existingIndicator.remove();
+    }
+    if (this.state === "normal" /* NORMAL */) {
+      return;
+    }
+    const indicator = document.createElement("div");
+    indicator.id = "keyboard-state-indicator";
+    indicator.className = "fixed top-4 right-4 bg-blue-600 text-white px-3 py-2 rounded-lg shadow-lg z-50 font-mono text-sm";
+    if (this.state === "awaiting_args" /* AWAITING_ARGS */) {
+      const shortcut = this.shortcuts.get(this.currentCommand);
+      const description = shortcut ? shortcut.description : "Unknown command";
+      indicator.innerHTML = `
+                <div class="flex items-center space-x-2">
+                    <span>${this.currentCommand.toUpperCase()}</span>
+                    <span class="text-blue-200">${this.currentArgs || "_"}</span>
+                </div>
+                <div class="text-xs text-blue-200 mt-1">${description}</div>
+            `;
+    }
+    document.body.appendChild(indicator);
+  }
+  showHelp() {
+    if (this.helpOverlay) {
+      this.hideHelp();
+      return;
+    }
+    this.helpOverlay = document.createElement("div");
+    this.helpOverlay.id = "keyboard-help-overlay";
+    this.helpOverlay.className = "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50";
+    const helpContent = document.createElement("div");
+    helpContent.className = "bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl max-h-[80vh] overflow-y-auto p-6";
+    helpContent.innerHTML = this.generateHelpContent();
+    this.helpOverlay.appendChild(helpContent);
+    document.body.appendChild(this.helpOverlay);
+    this.helpOverlay.addEventListener("click", (e) => {
+      if (e.target === this.helpOverlay) {
+        this.hideHelp();
+      }
+    });
+  }
+  hideHelp() {
+    if (this.helpOverlay) {
+      this.helpOverlay.remove();
+      this.helpOverlay = null;
+    }
+  }
+  generateHelpContent() {
+    const categories = /* @__PURE__ */ new Map();
+    this.shortcuts.forEach((shortcut) => {
+      const category = shortcut.category || "General";
+      if (!categories.has(category)) {
+        categories.set(category, []);
+      }
+      categories.get(category).push(shortcut);
+    });
+    let html = `
+            <div class="flex items-center justify-between mb-4">
+                <h2 class="text-xl font-bold text-gray-900 dark:text-white">Keyboard Shortcuts</h2>
+                <button class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" onclick="this.closest('#keyboard-help-overlay').remove()">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
+        `;
+    categories.forEach((shortcuts, category) => {
+      html += `
+                <div class="mb-6">
+                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">${category}</h3>
+                    <div class="space-y-2">
+            `;
+      shortcuts.forEach((shortcut) => {
+        const keyDisplay = shortcut.requiresArgs ? `${shortcut.key.toUpperCase()}<span class="text-blue-600 dark:text-blue-400">&lt;number&gt;</span>` : shortcut.key.toUpperCase();
+        html += `
+                    <div class="flex items-center justify-between py-2 px-3 bg-gray-50 dark:bg-gray-700 rounded">
+                        <span class="text-sm text-gray-700 dark:text-gray-300">${shortcut.description}</span>
+                        <kbd class="px-2 py-1 text-xs font-mono bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded">${keyDisplay}</kbd>
+                    </div>
+                `;
+      });
+      html += `
+                    </div>
+                </div>
+            `;
+    });
+    html += `
+            <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-600">
+                <p class="text-sm text-gray-600 dark:text-gray-400 text-center">
+                    Press <kbd class="px-2 py-1 text-xs font-mono bg-gray-200 dark:bg-gray-600 rounded">ESC</kbd> to cancel any command or
+                    <kbd class="px-2 py-1 text-xs font-mono bg-gray-200 dark:bg-gray-600 rounded">?</kbd> to close this help
+                </p>
+            </div>
+        `;
+    return html;
+  }
+  destroy() {
+    document.removeEventListener("keydown", this.handleKeydown.bind(this));
+    this.cancelPreviewExecution();
+    this.resetState();
+    this.hideHelp();
+  }
+  getState() {
+    return this.state;
+  }
+  getCurrentCommand() {
+    return this.currentCommand;
+  }
+  getCurrentArgs() {
+    return this.currentArgs;
+  }
+};
+
+export { BaseComponent, BasePage, ComponentEventTypes, EventBus, KeyboardShortcutManager, KeyboardState, LifecycleController, LifecycleEventTypes, MobileBottomDrawer, Modal, SplashScreen, TemplateLoader, ThemeManager, ToastManager, hasModifierKeys, isInInputContext, shouldIgnoreShortcut };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map