universe-code 0.0.85 → 0.0.87

package/dist/angular/index.js

@@ -1 +1,2 @@
-export { IdbService } from './indexdb/services/idbService.js';
+export { IdbService } from './indexdb/services/idbService.js';
+export { ColorSparkService, initSpark, singleSpark } from './spark/index.js';

package/dist/angular/spark/index.js

@@ -0,0 +1,328 @@
+class ColorSparkService {
+    constructor() {
+        this.observers = new Map();
+        this.intervals = new Map();
+        this.previousValues = new Map();
+
+        this._injectStyles(); // <-- inject CSS on service creation
+    }
+
+    _injectStyles() {
+        if (document.getElementById('color-spark-style')) return;
+
+        const style = document.createElement('style');
+        style.id = 'color-spark-style';
+
+        style.textContent = `
+@-webkit-keyframes anim-opac {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes anim-opac {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* BACK highlight */
+.spark-back::before {
+  -webkit-animation: anim-opac 1s both;
+  animation: anim-opac 1s both;
+  position: absolute;
+  inset: 0;
+  background: var(--spark-back-bg, #f8e71c);
+  border: 1px solid var(--spark-back-border, #f8e71c);
+  content: "";
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* LAY highlight */
+.spark-lay::before {
+  -webkit-animation: anim-opac 1s both;
+  animation: anim-opac 1s both;
+  position: absolute;
+  inset: 0;
+  background: var(--spark-lay-bg, #ff3b30);
+  border: 1px solid var(--spark-lay-border, #ff3b30);
+  content: "";
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+`;
+
+        document.head.appendChild(style);
+    }
+
+
+
+    /**
+     * Monitor a single element for value changes and apply spark effect
+     * 
+     * @param {HTMLElement} element - Element to monitor
+     * @returns {Function} Cleanup function to stop monitoring
+     */
+    sparkElement(element) {
+        if (!element || !(element instanceof HTMLElement)) {
+            console.warn('[ColorSpark] Invalid element provided');
+            return () => { };
+        }
+
+        const elementId = this._getElementId(element);
+
+        // 1️⃣ Watch element visibility (performance optimization)
+        const visibilityObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this._startMonitoring(element, elementId);
+                } else {
+                    this._stopMonitoring(elementId);
+                }
+            });
+        });
+
+        visibilityObserver.observe(element);
+        this.observers.set(elementId, visibilityObserver);
+
+        // 2️⃣ Watch for element removal from DOM
+        const removalObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.removedNodes.forEach((node) => {
+                    if (node === element) {
+                        this.cleanup(elementId);
+                        removalObserver.disconnect();
+                    }
+                });
+            });
+        });
+
+        removalObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+
+        // Return cleanup function
+        return () => {
+            this.cleanup(elementId);
+            removalObserver.disconnect();
+        };
+    }
+
+    /**
+     * Initialize global spark monitoring for all [data-color-spark] elements
+     * 
+     * @returns {Function} Global cleanup function
+     */
+    initGlobal() {
+        if (typeof document === 'undefined') {
+            console.warn('[ColorSpark] Document not available (SSR?)');
+            return () => { };
+        }
+
+        const cleanupFunctions = [];
+
+        // 3️⃣ Find and monitor all existing elements
+        const existingElements = document.querySelectorAll('[data-color-spark]');
+
+        existingElements.forEach((el) => {
+            if (el instanceof HTMLElement) {
+                const cleanup = this.sparkElement(el);
+                cleanupFunctions.push(cleanup);
+            }
+        });
+
+        // 4️⃣ Watch for new elements added to DOM
+        const dynamicObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (!(node instanceof HTMLElement)) return;
+
+                    // Check if node itself has the attribute
+                    if (node.hasAttribute('data-color-spark')) {
+                        const cleanup = this.sparkElement(node);
+                        cleanupFunctions.push(cleanup);
+                    }
+
+                    // Check children for the attribute
+                    const children = node.querySelectorAll('[data-color-spark]');
+                    children.forEach((child) => {
+                        if (child instanceof HTMLElement) {
+                            const cleanup = this.sparkElement(child);
+                            cleanupFunctions.push(cleanup);
+                        }
+                    });
+                });
+            });
+        });
+
+        dynamicObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+
+        // 5️⃣ Return global cleanup
+        return () => {
+            dynamicObserver.disconnect();
+            cleanupFunctions.forEach((fn) => fn?.());
+            this.cleanupAll();
+        };
+    }
+
+    /* ================================
+     * INTERNAL LOGIC
+     * ================================ */
+
+    /**
+     * Start monitoring element for text changes
+     * @private
+     */
+    _startMonitoring(element, elementId) {
+        // Already monitoring
+        if (this.intervals.has(elementId)) return;
+
+        const checkInterval = setInterval(() => {
+            const currentValue = element.innerText || element.textContent || '';
+            const previousValue = this.previousValues.get(elementId);
+
+            // Value changed → Apply spark effect
+            if (
+                previousValue !== null &&
+                previousValue !== undefined &&
+                previousValue !== currentValue
+            ) {
+                const sparkClass = this._getSparkClass(element);
+
+                if (sparkClass) {
+                    element.classList.add(sparkClass);
+
+                    // Remove after animation completes
+                    setTimeout(() => {
+                        element.classList.remove(sparkClass);
+                    }, 600);
+                }
+            }
+
+            this.previousValues.set(elementId, currentValue);
+        }, 600);
+
+        this.intervals.set(elementId, checkInterval);
+    }
+
+    /**
+     * Stop monitoring element
+     * @private
+     */
+    _stopMonitoring(elementId) {
+        const interval = this.intervals.get(elementId);
+
+        if (interval) {
+            clearInterval(interval);
+            this.intervals.delete(elementId);
+        }
+    }
+
+    /**
+     * Determine which spark animation to apply based on element classes
+     * @private
+     */
+    _getSparkClass(element) {
+        // Check element itself
+        if (this._isBackElement(element)) return 'spark-back';
+        if (this._isLayElement(element)) return 'spark-lay';
+
+        // Check parent element
+        const parent = element.closest('.back, .lay, .btn-back, .btn-lay');
+
+        if (parent) {
+            if (this._isBackElement(parent)) return 'spark-back';
+            if (this._isLayElement(parent)) return 'spark-lay';
+        }
+
+        // Default to back animation
+        return 'spark-back';
+    }
+
+    /**
+     * Check if element has BACK-related classes
+     * @private
+     */
+    _isBackElement(element) {
+        return (
+            element.classList.contains('back') ||
+            element.classList.contains('btn-back')
+        );
+    }
+
+    /**
+     * Check if element has LAY-related classes
+     * @private
+     */
+    _isLayElement(element) {
+        return (
+            element.classList.contains('lay') ||
+            element.classList.contains('btn-lay')
+        );
+    }
+
+    /**
+     * Cleanup specific element's monitoring
+     * 
+     * @param {string} elementId - Unique element identifier
+     */
+    cleanup(elementId) {
+        this._stopMonitoring(elementId);
+
+        const observer = this.observers.get(elementId);
+        if (observer) {
+            observer.disconnect();
+            this.observers.delete(elementId);
+        }
+
+        this.previousValues.delete(elementId);
+    }
+
+    /**
+     * Cleanup all monitoring (called on destroy)
+     */
+    cleanupAll() {
+        this.intervals.forEach((interval) => clearInterval(interval));
+        this.observers.forEach((observer) => observer.disconnect());
+
+        this.intervals.clear();
+        this.observers.clear();
+        this.previousValues.clear();
+    }
+
+    /**
+     * Generate or retrieve unique ID for element
+     * @private
+     */
+    _getElementId(element) {
+        const idKey = '__colorSparkId';
+
+        if (!element[idKey]) {
+            element[idKey] = 'spark_' + Math.random().toString(36).slice(2, 10);
+        }
+
+        return element[idKey];
+    }
+}
+
+
+function initSpark() {
+    const service = new ColorSparkService();
+    return service.initGlobal();
+}
+
+
+function singleSpark(element) {
+    const service = new ColorSparkService();
+    return service.sparkElement(element);
+}
+
+
+export { ColorSparkService, initSpark, singleSpark };

package/dist/react/index.js

@@ -1,13 +1,15 @@
 import { getIdbStore } from './indexdb/store/idbStore.js';
 import { useIdbStore } from './indexdb/hooks/idbHook.js';
 import { configureIdb } from "./indexdb/store/config.js";
+import { useColorSpark } from "./spark/index.js";
 
 // Export everything as a unified object or individual pieces
-export { configureIdb, getIdbStore, useIdbStore };
+export { configureIdb, getIdbStore, useIdbStore, useColorSpark };
 
 // Default export for easy usage
 export default {
     configureIdb,
     getIdbStore,
     useIdbStore,
+    useColorSpark
 };

package/dist/react/spark/index.js

@@ -0,0 +1,144 @@
+import { useEffect } from "react";
+
+export function useColorSpark() {
+    useEffect(() => {
+        injectSparkStyles();
+
+        function injectSparkStyles() {
+            if (document.getElementById("spark-style")) return;
+
+            const style = document.createElement("style");
+            style.id = "spark-style";
+
+            style.textContent = `
+.spark-back::before {
+  -webkit-animation: anim-opac 1s both;
+  animation: anim-opac 1s both;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--spark-back-bg, #f8e71c);
+  border: 1px solid var(--spark-back-border, #f8e71c);
+  content: " ";
+  border-radius: inherit;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes anim-opac {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.spark-lay::before {
+  -webkit-animation: anim-opac 1s both;
+  animation: anim-opac 1s both;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--spark-lay-bg, #ff3b30);
+  border: 1px solid var(--spark-lay-border, #ff3b30);
+  content: " ";
+  border-radius: inherit;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}`;
+            document.head.appendChild(style);
+        }
+
+        function attachColorSpark(el) {
+            let previousValue = null;
+            let intervalId = null;
+            let isVisible = false;
+
+            const visibilityObserver = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    isVisible = entry.isIntersecting;
+                    if (isVisible) start();
+                    else stop();
+                });
+            });
+
+            visibilityObserver.observe(el);
+
+            function start() {
+                if (intervalId) return;
+
+                intervalId = window.setInterval(() => {
+                    const currentValue = el.innerText.trim();
+
+                    if (previousValue !== null && previousValue !== currentValue) {
+                        if (el.classList.contains("back")) {
+                            el.classList.add("spark-back");
+                        } else if (el.classList.contains("lay")) {
+                            el.classList.add("spark-lay");
+                        }
+                    } else {
+                        el.classList.remove("spark-back");
+                        el.classList.remove("spark-lay");
+                    }
+
+                    previousValue = currentValue;
+                }, 600);
+            }
+
+            function stop() {
+                if (!intervalId) return;
+                clearInterval(intervalId);
+                intervalId = null;
+            }
+
+            const domObserver = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.removedNodes.forEach((node) => {
+                        if (node === el) {
+                            stop();
+                            visibilityObserver.disconnect();
+                            domObserver.disconnect();
+                        }
+                    });
+                });
+            });
+
+            domObserver.observe(document.body, { childList: true, subtree: true });
+        }
+
+        // existing elements
+        Array.from(
+            document.querySelectorAll("[data-color-spark]")
+        ).forEach(attachColorSpark);
+
+        // future elements
+        const rootObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (!(node instanceof HTMLElement)) return;
+
+                    if (node.hasAttribute("data-color-spark")) {
+                        attachColorSpark(node);
+                    }
+
+                    Array.from(
+                        node.querySelectorAll("[data-color-spark]")
+                    ).forEach(attachColorSpark);
+                });
+            });
+        });
+
+        rootObserver.observe(document.body, { childList: true, subtree: true });
+
+        return () => {
+            rootObserver.disconnect();
+        };
+    }, []);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "universe-code",
-  "version": "0.0.85",
+  "version": "0.0.87",
   "description": "Universal utility functions for all JS frameworks",
   "license": "ISC",
   "type": "module",