@whykusanagi/corrupted-theme 0.1.5 → 0.1.7

package/src/lib/celeste-widget.js

@@ -42,6 +42,69 @@ class CelesteAgent {
         this.messageContainer = null;
         this.inputField = null;
         this.sendButton = null;
+
+        // Lifecycle tracking (inline — this file uses IIFE-style globals, not ES imports)
+        this._trackedListeners = [];
+        this._styleElement = null;
+    }
+
+    /**
+     * Track an event listener for cleanup in destroy()
+     * @private
+     */
+    _trackListener(target, event, handler, options) {
+        target.addEventListener(event, handler, options);
+        this._trackedListeners.push({ target, event, handler, options });
+    }
+
+    /**
+     * Remove all tracked event listeners
+     * @private
+     */
+    _removeAllListeners() {
+        for (const { target, event, handler, options } of this._trackedListeners) {
+            target.removeEventListener(event, handler, options);
+        }
+        this._trackedListeners = [];
+    }
+
+    /**
+     * Tear down the widget: remove DOM, listeners, and global references.
+     * Safe to call multiple times.
+     */
+    destroy() {
+        this._removeAllListeners();
+
+        if (this.chatButton && this.chatButton.parentNode) {
+            this.chatButton.parentNode.removeChild(this.chatButton);
+        }
+        if (this.chatWindow && this.chatWindow.parentNode) {
+            this.chatWindow.parentNode.removeChild(this.chatWindow);
+        }
+        if (this._styleElement && this._styleElement.parentNode) {
+            this._styleElement.parentNode.removeChild(this._styleElement);
+        }
+
+        this.chatButton = null;
+        this.chatWindow = null;
+        this._styleElement = null;
+        this.isInitialized = false;
+        this.isOpen = false;
+        this.conversationHistory = [];
+
+        if (window.CelesteAgent === this) {
+            delete window.CelesteAgent;
+        }
+    }
+
+    /**
+     * Update page context without re-creating UI.
+     * Used on SPA navigation (popstate).
+     */
+    async updateContext() {
+        if (!this.isInitialized) return;
+        this.currentContext = await this.getPageContext();
+        this.loadContextualPrompt();
     }
 
     /**
@@ -444,44 +507,98 @@ class CelesteAgent {
      * Create UI elements
      */
     createUI() {
-        // Create chat button
+        // Create chat button (safe DOM construction — no innerHTML with interpolation)
         this.chatButton = document.createElement('div');
         this.chatButton.className = 'celeste-chat-button';
         const avatarUrl = this.getAssetUrl('https://s3.whykusanagi.xyz/Celeste_Vel_Icon.png');
-        this.chatButton.innerHTML = `
-            <div class="celeste-button-content">
-                <img src="${avatarUrl}" alt="Celeste AI" class="celeste-avatar" onerror="this.style.display='none'; this.parentElement.style.background='linear-gradient(135deg, #d94f90 0%, #b61b70 100%)';">
-                <span class="celeste-button-text">Chat with Celeste</span>
-            </div>
-        `;
-        this.chatButton.addEventListener('click', () => this.toggleChat());
 
-        // Create chat window
+        const buttonContent = document.createElement('div');
+        buttonContent.className = 'celeste-button-content';
+
+        const avatarImg = document.createElement('img');
+        avatarImg.src = avatarUrl;
+        avatarImg.alt = 'Celeste AI';
+        avatarImg.className = 'celeste-avatar';
+        avatarImg.addEventListener('error', function() {
+            this.style.display = 'none';
+            this.parentElement.style.background = 'linear-gradient(135deg, #d94f90 0%, #b61b70 100%)';
+        });
+
+        const buttonText = document.createElement('span');
+        buttonText.className = 'celeste-button-text';
+        buttonText.textContent = 'Chat with Celeste';
+
+        buttonContent.appendChild(avatarImg);
+        buttonContent.appendChild(buttonText);
+        this.chatButton.appendChild(buttonContent);
+        this._trackListener(this.chatButton, 'click', () => this.toggleChat());
+
+        // Create chat window (safe DOM construction — no innerHTML with interpolation)
         this.chatWindow = document.createElement('div');
         this.chatWindow.className = 'celeste-chat-window';
         const headerAvatarUrl = this.getAssetUrl('https://s3.whykusanagi.xyz/Celeste_Vel_Icon.png');
-        this.chatWindow.innerHTML = `
-            <div class="celeste-chat-header">
-                <div class="celeste-header-content">
-                    <img src="${headerAvatarUrl}" alt="Celeste AI" class="celeste-header-avatar" onerror="this.style.display='none';">
-                    <div class="celeste-header-info">
-                        <h3><strong>CelesteAI</strong></h3>
-                        <p><strong>Your helpful Onee-san assistant</strong></p>
-                    </div>
-                </div>
-                <button class="celeste-close-btn">&times;</button>
-            </div>
-            <div class="celeste-chat-messages"></div>
-            <div class="celeste-chat-input">
-                <input type="text" placeholder="Ask Celeste anything..." class="celeste-input-field">
-                <button class="celeste-send-btn">Send</button>
-            </div>
-        `;
 
-        // Add event listeners
-        this.chatWindow.querySelector('.celeste-close-btn').addEventListener('click', () => this.closeChat());
-        this.chatWindow.querySelector('.celeste-send-btn').addEventListener('click', () => this.sendMessage());
-        this.chatWindow.querySelector('.celeste-input-field').addEventListener('keypress', (e) => {
+        // Header
+        const chatHeader = document.createElement('div');
+        chatHeader.className = 'celeste-chat-header';
+
+        const headerContent = document.createElement('div');
+        headerContent.className = 'celeste-header-content';
+
+        const headerAvatar = document.createElement('img');
+        headerAvatar.src = headerAvatarUrl;
+        headerAvatar.alt = 'Celeste AI';
+        headerAvatar.className = 'celeste-header-avatar';
+        headerAvatar.addEventListener('error', function() { this.style.display = 'none'; });
+
+        const headerInfo = document.createElement('div');
+        headerInfo.className = 'celeste-header-info';
+        const h3 = document.createElement('h3');
+        const h3Strong = document.createElement('strong');
+        h3Strong.textContent = 'CelesteAI';
+        h3.appendChild(h3Strong);
+        const p = document.createElement('p');
+        const pStrong = document.createElement('strong');
+        pStrong.textContent = 'Your helpful Onee-san assistant';
+        p.appendChild(pStrong);
+        headerInfo.appendChild(h3);
+        headerInfo.appendChild(p);
+
+        headerContent.appendChild(headerAvatar);
+        headerContent.appendChild(headerInfo);
+
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'celeste-close-btn';
+        closeBtn.textContent = '\u00D7';
+
+        chatHeader.appendChild(headerContent);
+        chatHeader.appendChild(closeBtn);
+
+        // Messages container
+        const messagesDiv = document.createElement('div');
+        messagesDiv.className = 'celeste-chat-messages';
+
+        // Input area
+        const inputDiv = document.createElement('div');
+        inputDiv.className = 'celeste-chat-input';
+        const inputField = document.createElement('input');
+        inputField.type = 'text';
+        inputField.placeholder = 'Ask Celeste anything...';
+        inputField.className = 'celeste-input-field';
+        const sendBtn = document.createElement('button');
+        sendBtn.className = 'celeste-send-btn';
+        sendBtn.textContent = 'Send';
+        inputDiv.appendChild(inputField);
+        inputDiv.appendChild(sendBtn);
+
+        this.chatWindow.appendChild(chatHeader);
+        this.chatWindow.appendChild(messagesDiv);
+        this.chatWindow.appendChild(inputDiv);
+
+        // Add event listeners (tracked for cleanup)
+        this._trackListener(this.chatWindow.querySelector('.celeste-close-btn'), 'click', () => this.closeChat());
+        this._trackListener(this.chatWindow.querySelector('.celeste-send-btn'), 'click', () => this.sendMessage());
+        this._trackListener(this.chatWindow.querySelector('.celeste-input-field'), 'keypress', (e) => {
             if (e.key === 'Enter') this.sendMessage();
         });
 
@@ -497,7 +614,10 @@ class CelesteAgent {
      * Add CSS styles
      */
     addStyles() {
+        // Reuse existing style element if re-initializing
+        if (this._styleElement) return;
         const style = document.createElement('style');
+        this._styleElement = style;
         style.textContent = `
             .celeste-chat-button {
                 position: fixed;
@@ -792,9 +912,10 @@ class CelesteAgent {
         const messageContainer = this.chatWindow.querySelector('.celeste-chat-messages');
         const messageDiv = document.createElement('div');
         messageDiv.className = `celeste-message ${sender}`;
-        messageDiv.innerHTML = `
-            <div class="celeste-message-bubble">${text}</div>
-        `;
+        const bubble = document.createElement('div');
+        bubble.className = 'celeste-message-bubble';
+        bubble.textContent = text;
+        messageDiv.appendChild(bubble);
         messageContainer.appendChild(messageDiv);
         messageContainer.scrollTop = messageContainer.scrollHeight;
 
@@ -809,18 +930,23 @@ class CelesteAgent {
         const messageContainer = this.chatWindow.querySelector('.celeste-chat-messages');
         const typingDiv = document.createElement('div');
         typingDiv.className = 'celeste-message celeste';
-        typingDiv.innerHTML = `
-            <div class="celeste-message-bubble">
-                <div class="celeste-typing">
-                    Celeste is typing
-                    <div class="celeste-typing-dots">
-                        <div class="celeste-typing-dot"></div>
-                        <div class="celeste-typing-dot"></div>
-                        <div class="celeste-typing-dot"></div>
-                    </div>
-                </div>
-            </div>
-        `;
+
+        // Safe DOM construction — no innerHTML
+        const bubble = document.createElement('div');
+        bubble.className = 'celeste-message-bubble';
+        const typing = document.createElement('div');
+        typing.className = 'celeste-typing';
+        typing.appendChild(document.createTextNode('Celeste is typing'));
+        const dots = document.createElement('div');
+        dots.className = 'celeste-typing-dots';
+        for (let i = 0; i < 3; i++) {
+            const dot = document.createElement('div');
+            dot.className = 'celeste-typing-dot';
+            dots.appendChild(dot);
+        }
+        typing.appendChild(dots);
+        bubble.appendChild(typing);
+        typingDiv.appendChild(bubble);
         messageContainer.appendChild(typingDiv);
         messageContainer.scrollTop = messageContainer.scrollHeight;
         return typingDiv;
@@ -1074,6 +1200,11 @@ document.addEventListener('DOMContentLoaded', () => {
         return;
     }
 
+    // Destroy previous instance if it exists (SPA re-init safety)
+    if (window.CelesteAgent && typeof window.CelesteAgent.destroy === 'function') {
+        window.CelesteAgent.destroy();
+    }
+
     const celesteAgent = new CelesteAgent();
     celesteAgent.initialize();
 
@@ -1081,9 +1212,9 @@ document.addEventListener('DOMContentLoaded', () => {
     window.CelesteAgent = celesteAgent;
 });
 
-// Update context on page navigation
+// Update context on page navigation (don't re-create UI, just refresh context)
 window.addEventListener('popstate', () => {
     if (window.CelesteAgent) {
-        window.CelesteAgent.initialize();
+        window.CelesteAgent.updateContext();
     }
 });

package/src/lib/character-corruption.js

@@ -46,6 +46,14 @@ export const INTENSITY = {
   MAX_READABLE: 0.45
 };
 
+/**
+ * WeakMap for tracking corruption interval IDs per element.
+ * Using WeakMap instead of dataset avoids string coercion issues
+ * and allows GC when elements are removed from DOM.
+ * @private
+ */
+const _intervalMap = new WeakMap();
+
 /**
  * Character sets for corruption
  * Organized by usage frequency to match CLI behavior
@@ -265,13 +273,14 @@ export function initAutoCorruption() {
         // Check if element still exists in DOM
         if (!document.contains(element)) {
           clearInterval(intervalId);
+          _intervalMap.delete(element);
           return;
         }
         element.textContent = corruptTextJapanese(originalText, intensity);
       }, interval);
 
-      // Store interval ID for cleanup
-      element.dataset.corruptionIntervalId = intervalId;
+      // Store interval ID for cleanup via WeakMap
+      _intervalMap.set(element, intervalId);
     }
 
     // Mark as initialized
@@ -285,11 +294,12 @@ export function initAutoCorruption() {
  * @param {HTMLElement} element - Element to stop corrupting
  */
 export function stopAutoCorruption(element) {
-  if (element.dataset.corruptionIntervalId) {
-    clearInterval(parseInt(element.dataset.corruptionIntervalId));
-    delete element.dataset.corruptionIntervalId;
-    delete element.dataset.corruptionInitialized;
+  const intervalId = _intervalMap.get(element);
+  if (intervalId != null) {
+    clearInterval(intervalId);
+    _intervalMap.delete(element);
   }
+  delete element.dataset.corruptionInitialized;
 }
 
 /**
@@ -309,16 +319,29 @@ export function restartAutoCorruption(element) {
     const intervalId = setInterval(() => {
       if (!document.contains(element)) {
         clearInterval(intervalId);
+        _intervalMap.delete(element);
         return;
       }
       element.textContent = corruptTextJapanese(originalText, intensity);
     }, interval);
 
-    element.dataset.corruptionIntervalId = intervalId;
+    _intervalMap.set(element, intervalId);
     element.dataset.corruptionInitialized = 'true';
   }
 }
 
+/**
+ * Stop all active auto-corruption intervals
+ *
+ * Finds all initialized auto-corrupt elements and stops their intervals.
+ * Useful for cleanup on page transitions or component teardown.
+ */
+export function destroyAllAutoCorruption() {
+  document.querySelectorAll('.auto-corrupt[data-corruption-initialized="true"]').forEach(element => {
+    stopAutoCorruption(element);
+  });
+}
+
 /**
  * Utility: Create a corrupted text element
  *
@@ -361,11 +384,12 @@ export function createCorruptedElement(text, options = {}) {
     const intervalId = setInterval(() => {
       if (!document.contains(element)) {
         clearInterval(intervalId);
+        _intervalMap.delete(element);
         return;
       }
       element.textContent = corruptTextJapanese(text, intensity);
     }, interval);
-    element.dataset.corruptionIntervalId = intervalId;
+    _intervalMap.set(element, intervalId);
   }
 
   element.dataset.corruptionInitialized = 'true';
@@ -555,6 +579,7 @@ export default {
   initAutoCorruption,
   stopAutoCorruption,
   restartAutoCorruption,
+  destroyAllAutoCorruption,
   createCorruptedElement,
   getRandomPhrase,
   INTENSITY,