DEV Community: ArtyProg

A Startup Ecommerce Site with Juris

ArtyProg — Mon, 22 Dec 2025 13:53:39 +0000

You can test it here : Demo

All the articles from Resti Guay

ArtyProg — Fri, 12 Dec 2025 22:14:37 +0000

Resti Articles

Create a Modal without any framework.

ArtyProg — Wed, 10 Sep 2025 20:10:29 +0000

The following illustrates how to code a Modal without requiring any libraries or framework.

Prerequisites, create the three files :

news.html,
contact.html,
about.html

and place them at the root of your project along wit the following files.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Dynamic Content Loading with Modal</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div id="overlay"></div>

  <h1>Custom Modal in vanilla JS</h1>

<nav>
    <a href="" class="modal-trigger" data-url="news.html" data-color="#005f73">
       News
    </a> |
    <a href="" class="modal-trigger" data-url="about.html" data-color="#9b2226">
      About
    </a> |
    <a href="" class="modal-trigger" data-url="contact.html" data-color="#ff8800">
      Contact
    </a>
</nav>


  <div style="width: 400px; margin: 0px auto;">
    <p style="text-align: left;">
    Create the following files in the same directory : 
     <p>
        news.html, about.html, contact.html.</p>
     <p style="text-align: left;">Then open this file (index.html) in a web browser</p>
    <p style="text-align: left;">
        Place stylde.css and app.js in the same directory as well.
    </p>
  </div>

  <div id="modal" class="modal" role="dialog" aria-modal="true">
    <button id="modal-close-btn" class="close-btn">&times;</button>
    <div id="modal-content" class="modal-content">
      <!-- Content will be loaded here -->
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>

style.css

/* ==========================================================================
   Styles Généraux
   ========================================================================== */
body {
    height: 100%;
    font-family: sans-serif;
    margin: 0; /* Enlève les marges par défaut du navigateur */
    text-align: center;
}

/* ==========================================================================
   Overlay (Fond semi-transparent)
   ========================================================================== */
#overlay {
    /* État initial : caché */
    opacity: 0;
    visibility: hidden;

    /* Géométrie et positionnement */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;

    /* Animation de fondu */
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

#overlay.is-visible {
    /* État final : visible */
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Fenêtre Modale
   ========================================================================== */

/* --- 1. Styles de base (communs à mobile et desktop) --- */
.modal {
    /* NOUVEAU : On utilise la variable CSS. Si elle n'existe pas, la couleur par défaut est 'deeppink'. */
    background: var(--modal-background, deeppink);

    position: fixed;
    z-index: 101; /* Doit être au-dessus de l'overlay */
    box-sizing: border-box; /* Simplifie la gestion des dimensions */

    /* État initial pour l'animation : complètement transparent et non-interactif */
    opacity: 0;
    visibility: hidden;

    /* NOUVEAU : On anime aussi le changement de 'background' pour une transition de couleur fluide. */
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background 0.4s ease;
}

/* --- 2. Styles pour l'état visible (communs à mobile et desktop) --- */
.modal.is-visible {
    opacity: 1;
    visibility: visible;
}

/* --- 3. Styles spécifiques pour DESKTOP (écrans > 768px) --- */
@media screen and (min-width: 769px) {
    .modal {
        width: 500px;
        padding: 25px;
        border-radius: 8px;
        border: 1px solid black;
        box-shadow: 0 5px 20px rgba(0,0,0,0.3);

        /* Centrage parfait */
        top: 50%;
        left: 50%;

        /* Hauteur maximale pour gérer le contenu long */
        max-height: 85vh; 
        display: flex;
        flex-direction: column;

        /* Animation : départ légèrement plus petit et décalé */
        transform: translate(-50%, -50%) scale(0.95);
    }

    .modal.is-visible {
        /* Animation : arrivée à la taille et position finales */
        transform: translate(-50%, -50%) scale(1);
    }
}

/* --- 4. Styles spécifiques pour MOBILE (écrans <= 768px) --- */
@media screen and (max-width: 768px) {
    .modal {
        /* Géométrie "plein écran" */
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;

        /* Réinitialisation des styles desktop inutiles sur mobile */
        border: none;
        border-radius: 0;
        box-shadow: none;

        padding: 20px;

        /* Permet le défilement si le contenu est trop long */
        overflow-y: auto;

        /* Animation mobile : départ en dehors de l'écran, sur la gauche */
        transform: translateX(-100%);
    }

    .modal.is-visible {
        /* Animation mobile : glisse pour occuper l'écran */
        transform: translateX(0);
    }
}

/* ==========================================================================
   Contenu de la Modale (bouton de fermeture, etc.)
   ========================================================================== */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4); /* Améliore la lisibilité */
    line-height: 1;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10; /* S'assure qu'il est au-dessus du contenu qui défile */
}

.modal-content {
    margin-top: 20px;
    color: white;
}

/* Règle spécifique au contenu de la modale sur DESKTOP pour le défilement */
@media screen and (min-width: 769px) {
    .modal-content {
        flex: 1; /* Prend toute la hauteur disponible */
        overflow-y: auto; /* Active le défilement si nécessaire */
        padding-right: 15px; /* Évite que le texte ne colle à la barre de défilement */
    }
}

app.js

/**
 * Attend que le contenu de la page (le DOM) soit entièrement chargé avant d'exécuter le script.
 * C'est une bonne pratique pour s'assurer que tous les éléments HTML existent.
 */
document.addEventListener('DOMContentLoaded', () => {

  // --- 1. Sélection des éléments du DOM ---
  // On récupère tous les éléments HTML avec lesquels on va interagir une seule fois.
  const modal = document.getElementById('modal');
  const overlay = document.getElementById('overlay');
  const modalContent = document.getElementById('modal-content');
  const closeButton = document.getElementById('modal-close-btn');
  const triggerLinks = document.querySelectorAll('.modal-trigger');

  // Variable pour mémoriser l'élément qui avait le focus avant l'ouverture de la modale.
  // C'est crucial pour l'accessibilité.
  let lastActiveElement;


  // --- 2. Définition des Fonctions ---

  /**
   * Ouvre la modale, charge le contenu et applique la couleur de fond.
   * @param {HTMLElement} triggerElement - L'élément <a> qui a été cliqué.
   */
  const openModal = async (triggerElement) => {
    // On récupère l'URL et la couleur depuis les attributs 'data-*' du lien cliqué.
    const url = triggerElement.dataset.url;
    const color = triggerElement.dataset.color;

    if (!url) {
      console.error("L'attribut 'data-url' est manquant sur le lien.", triggerElement);
      return;
    }

    lastActiveElement = document.activeElement; // On sauvegarde l'élément actif.

    try {
      // On charge le contenu depuis l'URL spécifiée.
      const response = await fetch(url);
      if (!response.ok) throw new Error(`Le réseau n'a pas répondu correctement`);
      const content = await response.text();
      modalContent.innerHTML = content;

      // === LA PARTIE NOUVELLE ET IMPORTANTE ===
      // On vérifie si une couleur a été définie dans l'attribut 'data-color'.
      if (color) {
        // Si oui, on applique cette couleur à une variable CSS (--modal-background) sur la modale.
        modal.style.setProperty('--modal-background', color);
      } else {
        // Sinon, on supprime la variable pour que le CSS utilise sa couleur par défaut.
        modal.style.removeProperty('--modal-background');
      }
      // =======================================

      // On affiche la modale et l'overlay.
      modal.classList.add('is-visible');
      overlay.classList.add('is-visible');

      // On déplace le focus sur le bouton de fermeture (accessibilité).
      closeButton.focus();

      // On ajoute un écouteur pour la touche "Échap".
      document.addEventListener('keydown', handleEscKey);

    } catch (error) {
      modalContent.innerHTML = `<p>Erreur lors du chargement du contenu : ${error.message}</p>`;
      console.error('Erreur de fetch :', error);
    }
  };

  /**
   * Ferme la modale et l'overlay.
   */
  const closeModal = () => {
    modal.classList.remove('is-visible');
    overlay.classList.remove('is-visible');
    modalContent.innerHTML = ''; // On vide le contenu.

    // On redonne le focus à l'élément qui a ouvert la modale (accessibilité).
    if (lastActiveElement) {
      lastActiveElement.focus();
    }

    // On retire l'écouteur pour la touche "Échap" pour ne pas l'avoir en permanence.
    document.removeEventListener('keydown', handleEscKey);
  };

  /**
   * Fonction qui vérifie si la touche pressée est "Échap" et ferme la modale si c'est le cas.
   * @param {KeyboardEvent} event - L'événement du clavier.
   */
  const handleEscKey = (event) => {
    if (event.key === 'Escape') {
      closeModal();
    }
  };


  // --- 3. Initialisation des Écouteurs d'Événements ---

  // On attache un écouteur de clic à chaque lien qui doit ouvrir la modale.
  triggerLinks.forEach(link => {
    link.addEventListener('click', (event) => {
      event.preventDefault(); // Empêche le lien de naviguer.
      openModal(link); // On appelle openModal en lui passant le lien cliqué lui-même.
    });
  });

  // On attache un écouteur de clic au bouton de fermeture.
  closeButton.addEventListener('click', closeModal);
});

Scientific News Ticker with Juris

ArtyProg — Sun, 07 Sep 2025 19:42:42 +0000

Juris allows you to express all you creativity.
Here is an idea I had in ming a long time ago.
I finally realised it with Juris:

You can play with it here: NSTicker

Here is all the code :

// Enhanced News Ticker with Professional Features

// Configuration constants
const CONFIG = {
  API: {
    POLLINATIONS_BASE_URL: 'https://image.pollinations.ai/prompt',
    IMAGE_PARAMS: {
      nologo: true,
      enhance: true,
      width: 800,
      height: 400,
      model: 'flux'
    },
    RETRY_ATTEMPTS: 3,
    RETRY_DELAY: 1000,
    REQUEST_TIMEOUT: 10000
  },
  UI: {
    MIN_DISPLAY_TIME: 5000,
    DEFAULT_INTERVAL: 3000,
    FAST_INTERVAL: 1000,
    SLOW_INTERVAL: 5000,
    IMAGE_LOAD_TIMEOUT: 8000,
    ANIMATION_DURATION: 300
  },
  STORAGE_KEY: 'newsTickerPreferences'
};

// Enhanced error handling
class NewsTickerError extends Error {
  constructor(message, code, context = {}) {
    super(message);
    this.name = 'NewsTickerError';
    this.code = code;
    this.context = context;
    this.timestamp = new Date().toISOString();
  }
}

// Logger utility
const Logger = {
  levels: { ERROR: 0, WARN: 1, INFO: 2, DEBUG: 3 },
  currentLevel: 2, // INFO level by default

  log(level, message, data = null) {
    if (this.levels[level] <= this.currentLevel) {
      const timestamp = new Date().toISOString();
      const logEntry = { timestamp, level, message, data };
      console[level.toLowerCase()](
        `[${timestamp}] ${level}: ${message}`,
        data || ''
      );
      this.storeLog(logEntry);
    }
  },

  error(message, data) { this.log('ERROR', message, data); },
  warn(message, data) { this.log('WARN', message, data); },
  info(message, data) { this.log('INFO', message, data); },
  debug(message, data) { this.log('DEBUG', message, data); },

  storeLog(entry) {
    // Store last 100 log entries for debugging
    const logs = JSON.parse(localStorage.getItem('newsTickerLogs') || '[]');
    logs.push(entry);
    if (logs.length > 100) logs.shift();
    localStorage.setItem('newsTickerLogs', JSON.stringify(logs));
  },

  exportLogs() {
    return JSON.parse(localStorage.getItem('newsTickerLogs') || '[]');
  }
};

// Utility functions
const Utils = {
  delay: (ms) => new Promise(resolve => setTimeout(resolve, ms)),

  async withTimeout(promise, timeoutMs, errorMessage = 'Operation timed out') {
    const timeout = new Promise((_, reject) =>
      setTimeout(() => reject(new NewsTickerError(errorMessage, 'TIMEOUT')), timeoutMs)
    );
    return Promise.race([promise, timeout]);
  },

  async retry(fn, attempts = 3, delay = 1000) {
    for (let i = 0; i < attempts; i++) {
      try {
        return await fn();
      } catch (error) {
        Logger.warn(`Attempt ${i + 1} failed`, { error: error.message });
        if (i === attempts - 1) throw error;
        await this.delay(delay * Math.pow(2, i)); // Exponential backoff
      }
    }
  },

  debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  },

  sanitizeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
  },

  formatDate(dateString) {
    try {
      return new Date(dateString).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      });
    } catch {
      return dateString; // Fallback to original string
    }
  }
};

// Enhanced news data with validation
const NewsData = {
  categories: {
    PHYSICS: 'Physics & Astronomy',
    BIOLOGY: 'Biology & Medicine', 
    CHEMISTRY: 'Chemistry',
    TECHNOLOGY: 'Computing & Technology',
    ENGINEERING: 'Engineering & Energy'
  },

  items: [
    // Physics & Astronomy
    { 
      id: 'moon-landing-1969',
      title: "The man walks on the moon", 
      author: "Neil Armstrong", 
      date: "1969-07-20",
      category: 'PHYSICS',
      description: "First human lunar landing mission",
      tags: ['space', 'exploration', 'NASA'],
      importance: 10
    },
    { 
      id: 'einstein-nobel-1921',
      title: "Albert won Nobel Prize", 
      author: "Albert Einstein", 
      date: "1921-11-09",
      category: 'PHYSICS',
      description: "Awarded for photoelectric effect discovery",
      tags: ['physics', 'quantum', 'nobel'],
      importance: 9
    },
    { 
      id: 'planck-radiation-1900',
      title: "Black body radiation explained", 
      author: "Max Planck", 
      date: "1900-12-14",
      category: 'PHYSICS',
      description: "Birth of quantum theory",
      tags: ['quantum', 'theory', 'physics'],
      importance: 9
    },
    { 
      id: 'einstein-relativity-1905',
      title: "Relativity changes our view of space-time", 
      author: "Albert Einstein", 
      date: "1905-09-26",
      category: 'PHYSICS',
      description: "Revolutionary theory of space and time",
      tags: ['relativity', 'physics', 'spacetime'],
      importance: 10
    },
    { 
      id: 'quantum-entanglement-1981',
      title: "Quantum entanglement proves Einstein wrong", 
      author: "Alain Aspect", 
      date: "1981-12-01",
      category: 'PHYSICS',
      description: "Experimental proof of quantum entanglement",
      tags: ['quantum', 'entanglement', 'experiment'],
      importance: 9
    },
    { 
      id: 'higgs-boson-2012',
      title: "Higgs boson particle finally detected", 
      author: "CERN", 
      date: "2012-07-04",
      category: 'PHYSICS',
      description: "Discovery of the Higgs boson at the Large Hadron Collider",
      tags: ['particle', 'physics', 'CERN', 'higgs'],
      importance: 10
    },
    { 
      id: 'gravitational-waves-2015',
      title: "Gravitational waves confirmed Einstein's theory", 
      author: "LIGO Team", 
      date: "2015-09-14",
      category: 'PHYSICS',
      description: "First direct detection of gravitational waves",
      tags: ['gravity', 'waves', 'LIGO', 'Einstein'],
      importance: 10
    },
    { 
      id: 'sputnik-1957',
      title: "First artificial satellite launched", 
      author: "Sputnik 1", 
      date: "1957-10-04",
      category: 'PHYSICS',
      description: "Soviet Union launches first artificial satellite",
      tags: ['satellite', 'space', 'soviet', 'sputnik'],
      importance: 9
    },
    { 
      id: 'gagarin-space-1961',
      title: "First human in space", 
      author: "Yuri Gagarin", 
      date: "1961-04-12",
      category: 'PHYSICS',
      description: "First human orbital spaceflight",
      tags: ['space', 'human', 'orbit', 'soviet'],
      importance: 10
    },
    { 
      id: 'black-hole-photo-2019',
      title: "First photograph of a black hole", 
      author: "Event Horizon Telescope", 
      date: "2019-04-10",
      category: 'PHYSICS',
      description: "First direct image of a black hole's event horizon",
      tags: ['black hole', 'telescope', 'astronomy'],
      importance: 9
    },
    { 
      id: 'mars-curiosity-2012',
      title: "Mars rover Curiosity lands successfully", 
      author: "NASA JPL", 
      date: "2012-08-05",
      category: 'PHYSICS',
      description: "Successful landing of Curiosity rover on Mars",
      tags: ['mars', 'rover', 'NASA', 'exploration'],
      importance: 8
    },
    { 
      id: 'james-webb-2021',
      title: "James Webb Space Telescope launched", 
      author: "NASA & ESA", 
      date: "2021-12-25",
      category: 'PHYSICS',
      description: "Launch of the most powerful space telescope",
      tags: ['telescope', 'space', 'infrared', 'astronomy'],
      importance: 9
    },
    { 
      id: 'exoplanet-1995',
      title: "First exoplanet discovered", 
      author: "Michel Mayor & Didier Queloz", 
      date: "1995-10-06",
      category: 'PHYSICS',
      description: "Discovery of 51 Eridani b, first exoplanet around sun-like star",
      tags: ['exoplanet', 'discovery', 'astronomy'],
      importance: 9
    },
    { 
      id: 'plate-tectonics-1912',
      title: "Plate tectonics explains continental drift", 
      author: "Alfred Wegener", 
      date: "1912-01-06",
      category: 'PHYSICS',
      description: "Theory explaining continental drift through plate movement",
      tags: ['geology', 'tectonics', 'earth', 'continental drift'],
      importance: 8
    },
    { 
      id: 'big-bang-theory-1927',
      title: "Big Bang theory proposed", 
      author: "Georges Lemaître", 
      date: "1927-05-01",
      category: 'PHYSICS',
      description: "Theoretical foundation for the expansion of the universe",
      tags: ['cosmology', 'universe', 'big bang', 'theory'],
      importance: 10
    },
    { 
      id: 'pulsars-discovery-1967',
      title: "Discovery of pulsars", 
      author: "Jocelyn Bell Burnell", 
      date: "1967-11-28",
      category: 'PHYSICS',
      description: "Discovery of rapidly rotating neutron stars",
      tags: ['pulsar', 'neutron star', 'astronomy', 'radio'],
      importance: 8
    },
    { 
      id: 'cosmic-microwave-background-1964',
      title: "Discovery of cosmic microwave background radiation", 
      author: "Penzias & Wilson", 
      date: "1964-05-01",
      category: 'PHYSICS',
      description: "Discovery of relic radiation from the Big Bang",
      tags: ['CMB', 'radiation', 'big bang', 'cosmology'],
      importance: 9
    },
    { 
      id: 'space-shuttle-1981',
      title: "First reusable spacecraft launched", 
      author: "Space Shuttle Columbia", 
      date: "1981-04-12",
      category: 'PHYSICS',
      description: "First launch of NASA's Space Shuttle program",
      tags: ['shuttle', 'reusable', 'NASA', 'Columbia'],
      importance: 8
    },
    { 
      id: 'voyager-interstellar-2012',
      title: "Voyager probe enters interstellar space", 
      author: "NASA", 
      date: "2012-08-25",
      category: 'PHYSICS',
      description: "Voyager 1 becomes first human-made object to leave solar system",
      tags: ['voyager', 'interstellar', 'NASA', 'exploration'],
      importance: 8
    },

    // Biology & Medicine
    { 
      id: 'dna-double-helix-1953',
      title: "DNA double helix structure discovered", 
      author: "Watson & Crick", 
      date: "1953-04-25",
      category: 'BIOLOGY',
      description: "Discovery of the double helix structure of DNA",
      tags: ['DNA', 'genetics', 'structure', 'molecular biology'],
      importance: 10
    },
    { 
      id: 'dna-photo-1952',
      title: "First picture of DNA captured", 
      author: "Rosalind Franklin", 
      date: "1952-05-01",
      category: 'BIOLOGY',
      description: "X-ray crystallography image of DNA structure (Photo 51)",
      tags: ['DNA', 'crystallography', 'structure', 'photography'],
      importance: 9
    },
    { 
      id: 'penicillin-1928',
      title: "Penicillin saves millions of lives", 
      author: "Alexander Fleming", 
      date: "1928-09-28",
      category: 'BIOLOGY',
      description: "Discovery of the first widely used antibiotic",
      tags: ['antibiotic', 'medicine', 'bacteria', 'treatment'],
      importance: 10
    },
    { 
      id: 'vaccines-1885',
      title: "Vaccines eliminate deadly diseases", 
      author: "Louis Pasteur", 
      date: "1885-07-06",
      category: 'BIOLOGY',
      description: "Development of rabies vaccine and vaccination principles",
      tags: ['vaccine', 'immunization', 'disease', 'prevention'],
      importance: 10
    },
    { 
      id: 'evolution-1859',
      title: "Evolution explains diversity of life", 
      author: "Charles Darwin", 
      date: "1859-11-24",
      category: 'BIOLOGY',
      description: "Publication of 'On the Origin of Species'",
      tags: ['evolution', 'natural selection', 'biology', 'species'],
      importance: 10
    },
    { 
      id: 'human-genome-2003',
      title: "Human genome completely sequenced", 
      author: "Human Genome Project", 
      date: "2003-04-14",
      category: 'BIOLOGY',
      description: "Complete sequencing of human DNA",
      tags: ['genome', 'sequencing', 'genetics', 'DNA'],
      importance: 10
    },
    { 
      id: 'crispr-2012',
      title: "CRISPR gene editing revolutionizes medicine", 
      author: "Jennifer Doudna", 
      date: "2012-06-28",
      category: 'BIOLOGY',
      description: "Development of precise gene editing technology",
      tags: ['CRISPR', 'gene editing', 'biotechnology', 'medicine'],
      importance: 10
    },
    { 
      id: 'heart-transplant-1967',
      title: "First heart transplant performed", 
      author: "Christiaan Barnard", 
      date: "1967-12-03",
      category: 'BIOLOGY',
      description: "First successful human heart transplantation",
      tags: ['transplant', 'surgery', 'heart', 'medicine'],
      importance: 9
    },
    { 
      id: 'kidney-transplant-1954',
      title: "First successful kidney transplant", 
      author: "Joseph Murray", 
      date: "1954-12-23",
      category: 'BIOLOGY',
      description: "First successful organ transplant between identical twins",
      tags: ['transplant', 'kidney', 'surgery', 'organ'],
      importance: 8
    },
    { 
      id: 'insulin-discovery-1921',
      title: "Insulin discovered for diabetes treatment", 
      author: "Frederick Banting", 
      date: "1921-07-30",
      category: 'BIOLOGY',
      description: "Discovery of insulin as treatment for diabetes",
      tags: ['insulin', 'diabetes', 'hormone', 'treatment'],
      importance: 9
    },
    { 
      id: 'dolly-cloning-1996',
      title: "First cloning of a mammal (Dolly the sheep)", 
      author: "Ian Wilmut", 
      date: "1996-07-05",
      category: 'BIOLOGY',
      description: "First successful cloning of a mammal from adult cell",
      tags: ['cloning', 'genetics', 'biotechnology', 'sheep'],
      importance: 9
    },
    { 
      id: 'stem-cells-1961',
      title: "Stem cells discovered", 
      author: "James Till & Ernest McCulloch", 
      date: "1961-02-01",
      category: 'BIOLOGY',
      description: "Discovery of hematopoietic stem cells",
      tags: ['stem cells', 'regenerative medicine', 'biology', 'cells'],
      importance: 9
    },
    { 
      id: 'ivf-baby-1978',
      title: "First IVF baby born", 
      author: "Louise Brown", 
      date: "1978-07-25",
      category: 'BIOLOGY',
      description: "Birth of first baby conceived through in vitro fertilization",
      tags: ['IVF', 'fertility', 'reproduction', 'medicine'],
      importance: 8
    },
    { 
      id: 'face-transplant-2010',
      title: "First complete face transplant performed", 
      author: "Spanish surgeons", 
      date: "2010-03-20",
      category: 'BIOLOGY',
      description: "Full facial transplantation surgery breakthrough",
      tags: ['transplant', 'surgery', 'face', 'reconstructive'],
      importance: 7
    },
    { 
      id: 'mrna-vaccines-2005',
      title: "Messenger RNA vaccines pioneered", 
      author: "Katalin Karikó", 
      date: "2005-08-01",
      category: 'BIOLOGY',
      description: "Development of mRNA vaccine technology",
      tags: ['mRNA', 'vaccine', 'biotechnology', 'immunology'],
      importance: 9
    },
    { 
      id: 'covid-vaccine-2020',
      title: "First COVID-19 vaccine developed", 
      author: "Pfizer-BioNTech", 
      date: "2020-12-11",
      category: 'BIOLOGY',
      description: "First authorized COVID-19 vaccine using mRNA technology",
      tags: ['COVID-19', 'vaccine', 'pandemic', 'mRNA'],
      importance: 9
    },
    { 
      id: 'cancer-immunotherapy-2018',
      title: "Cancer immunotherapy breakthrough", 
      author: "James Allison", 
      date: "2018-10-01",
      category: 'BIOLOGY',
      description: "Nobel Prize for cancer immunotherapy research",
      tags: ['cancer', 'immunotherapy', 'treatment', 'oncology'],
      importance: 9
    },
    { 
      id: 'gene-therapy-2017',
      title: "First gene therapy approved", 
      author: "FDA", 
      date: "2017-08-30",
      category: 'BIOLOGY',
      description: "FDA approval of first gene therapy treatment",
      tags: ['gene therapy', 'treatment', 'genetics', 'medicine'],
      importance: 8
    },

    // Chemistry
    { 
      id: 'periodic-table-1869',
      title: "Periodic table created", 
      author: "Dmitri Mendeleev", 
      date: "1869-03-06",
      category: 'CHEMISTRY',
      description: "Organization of chemical elements by atomic properties",
      tags: ['periodic table', 'elements', 'chemistry', 'atomic'],
      importance: 10
    },
    { 
      id: 'radioactivity-becquerel-1896',
      title: "Radioactivity discovered", 
      author: "Henri Becquerel", 
      date: "1896-03-01",
      category: 'CHEMISTRY',
      description: "Discovery of natural radioactivity in uranium",
      tags: ['radioactivity', 'uranium', 'physics', 'nuclear'],
      importance: 9
    },
    { 
      id: 'radioactivity-curie-1898',
      title: "Radioactivity studied by Marie Curie", 
      author: "Marie Curie", 
      date: "1898-07-01",
      category: 'CHEMISTRY',
      description: "Isolation and study of radium and polonium",
      tags: ['radioactivity', 'radium', 'polonium', 'nuclear'],
      importance: 9
    },
    { 
      id: 'benzene-structure-1865',
      title: "Structure of benzene discovered", 
      author: "Kekulé", 
      date: "1865-01-01",
      category: 'CHEMISTRY',
      description: "Discovery of the ring structure of benzene",
      tags: ['benzene', 'organic chemistry', 'molecular structure'],
      importance: 8
    },
    { 
      id: 'teflon-discovery-1938',
      title: "Discovery of Teflon", 
      author: "Roy Plunkett", 
      date: "1938-04-06",
      category: 'CHEMISTRY',
      description: "Accidental discovery of polytetrafluoroethylene",
      tags: ['teflon', 'polymer', 'materials', 'chemistry'],
      importance: 7
    },
    { 
      id: 'plastic-invention-1907',
      title: "Plastic invented", 
      author: "Leo Baekeland", 
      date: "1907-01-01",
      category: 'CHEMISTRY',
      description: "Invention of Bakelite, the first synthetic plastic",
      tags: ['plastic', 'polymer', 'synthetic', 'materials'],
      importance: 8
    },
    { 
      id: 'superconductivity-1911',
      title: "Discovery of superconductivity", 
      author: "Heike Kamerlingh Onnes", 
      date: "1911-04-08",
      category: 'CHEMISTRY',
      description: "Discovery of zero electrical resistance in mercury",
      tags: ['superconductivity', 'physics', 'electrical', 'materials'],
      importance: 9
    },

    // Computing & Technology
    { 
      id: 'transistor-1947',
      title: "Transistor invention launches digital age", 
      author: "Bell Labs", 
      date: "1947-12-23",
      category: 'TECHNOLOGY',
      description: "Invention of the point-contact transistor",
      tags: ['transistor', 'electronics', 'computing', 'semiconductor'],
      importance: 10
    },
    { 
      id: 'first-computer-1941',
      title: "First programmable computer unveiled", 
      author: "Konrad Zuse", 
      date: "1941-05-12",
      category: 'TECHNOLOGY',
      description: "Z3 computer, first programmable digital computer",
      tags: ['computer', 'programming', 'digital', 'computing'],
      importance: 9
    },
    { 
      id: 'tcp-ip-1974',
      title: "Internet protocol TCP/IP standardized", 
      author: "Vint Cerf & Bob Kahn", 
      date: "1974-12-01",
      category: 'TECHNOLOGY',
      description: "Development of fundamental internet protocols",
      tags: ['internet', 'protocol', 'networking', 'TCP/IP'],
      importance: 10
    },
    { 
      id: 'world-wide-web-1989',
      title: "World Wide Web invented", 
      author: "Tim Berners-Lee", 
      date: "1989-03-12",
      category: 'TECHNOLOGY',
      description: "Creation of the World Wide Web at CERN",
      tags: ['web', 'internet', 'hypertext', 'browser'],
      importance: 10
    },
    { 
      id: 'first-email-1971',
      title: "First email sent", 
      author: "Ray Tomlinson", 
      date: "1971-10-01",
      category: 'TECHNOLOGY',
      description: "First network email using @ symbol",
      tags: ['email', 'communication', 'networking', 'ARPANET'],
      importance: 8
    },
    { 
      id: 'microprocessor-1971',
      title: "First microprocessor released", 
      author: "Intel 4004", 
      date: "1971-11-15",
      category: 'TECHNOLOGY',
      description: "Intel 4004, first commercial microprocessor",
      tags: ['microprocessor', 'Intel', 'computing', 'chip'],
      importance: 9
    },
    { 
      id: 'web-browser-1993',
      title: "First graphical web browser released", 
      author: "Mosaic", 
      date: "1993-04-22",
      category: 'TECHNOLOGY',
      description: "Mosaic browser popularizes the World Wide Web",
      tags: ['browser', 'web', 'graphical', 'internet'],
      importance: 8
    },
    { 
      id: 'smartphone-1992',
      title: "First smartphone introduced", 
      author: "IBM Simon", 
      date: "1992-08-16",
      category: 'TECHNOLOGY',
      description: "IBM Simon Personal Communicator, first smartphone",
      tags: ['smartphone', 'mobile', 'communication', 'PDA'],
      importance: 8
    },
    { 
      id: 'google-founded-1998',
      title: "Google founded", 
      author: "Larry Page & Sergey Brin", 
      date: "1998-09-04",
      category: 'TECHNOLOGY',
      description: "Founding of Google search engine company",
      tags: ['Google', 'search', 'internet', 'algorithm'],
      importance: 9
    },
    { 
      id: 'iphone-2007',
      title: "Apple introduces iPhone", 
      author: "Steve Jobs", 
      date: "2007-01-09",
      category: 'TECHNOLOGY',
      description: "Launch of revolutionary touchscreen smartphone",
      tags: ['iPhone', 'Apple', 'smartphone', 'touchscreen'],
      importance: 9
    },
    { 
      id: 'deep-blue-chess-1997',
      title: "First AI beats chess world champion", 
      author: "IBM Deep Blue", 
      date: "1997-05-11",
      category: 'TECHNOLOGY',
      description: "Deep Blue defeats Garry Kasparov in chess match",
      tags: ['AI', 'chess', 'IBM', 'artificial intelligence'],
      importance: 8
    },
    { 
      id: 'alphago-2016',
      title: "First AI beats Go world champion", 
      author: "DeepMind AlphaGo", 
      date: "2016-03-15",
      category: 'TECHNOLOGY',
      description: "AlphaGo defeats Lee Sedol in Go tournament",
      tags: ['AI', 'Go', 'DeepMind', 'machine learning'],
      importance: 9
    },
    { 
      id: 'chatgpt-2022',
      title: "ChatGPT released to public", 
      author: "OpenAI", 
      date: "2022-11-30",
      category: 'TECHNOLOGY',
      description: "Public release of conversational AI chatbot",
      tags: ['AI', 'chatbot', 'GPT', 'natural language'],
      importance: 9
    },
    { 
      id: 'bitcoin-2009',
      title: "Bitcoin blockchain launched", 
      author: "Satoshi Nakamoto", 
      date: "2009-01-03",
      category: 'TECHNOLOGY',
      description: "Launch of first decentralized cryptocurrency",
      tags: ['Bitcoin', 'blockchain', 'cryptocurrency', 'digital currency'],
      importance: 8
    },
    { 
      id: '3d-printer-1984',
      title: "First 3D printer invented", 
      author: "Chuck Hull", 
      date: "1984-03-09",
      category: 'TECHNOLOGY',
      description: "Invention of stereolithography 3D printing",
      tags: ['3D printing', 'manufacturing', 'prototyping', 'technology'],
      importance: 8
    },
    { 
      id: 'robot-surgery-2000',
      title: "First robot-assisted surgery performed", 
      author: "da Vinci System", 
      date: "2000-07-11",
      category: 'TECHNOLOGY',
      description: "First surgery using da Vinci robotic system",
      tags: ['robotics', 'surgery', 'medical technology', 'automation'],
      importance: 7
    },
    { 
      id: 'self-driving-car-2005',
      title: "First self-driving car tested", 
      author: "DARPA", 
      date: "2005-10-08",
      category: 'TECHNOLOGY',
      description: "DARPA Grand Challenge autonomous vehicle competition",
      tags: ['autonomous', 'self-driving', 'automotive', 'AI'],
      importance: 8
    },
    { 
      id: 'quantum-supremacy-2019',
      title: "Quantum computer reaches supremacy", 
      author: "Google", 
      date: "2019-10-23",
      category: 'TECHNOLOGY',
      description: "Google's quantum computer outperforms classical computers",
      tags: ['quantum computing', 'supremacy', 'computing', 'quantum'],
      importance: 9
    },

    // Engineering & Energy
    { 
      id: 'nuclear-power-1954',
      title: "First nuclear power plant opens", 
      author: "Obninsk, USSR", 
      date: "1954-06-27",
      category: 'ENGINEERING',
      description: "First commercial nuclear power plant begins operation",
      tags: ['nuclear', 'power', 'energy', 'electricity'],
      importance: 9
    },
    { 
      id: 'wright-brothers-1903',
      title: "First flight of the Wright brothers", 
      author: "Wright Brothers", 
      date: "1903-12-17",
      category: 'ENGINEERING',
      description: "First powered, controlled, sustained heavier-than-air flight",
      tags: ['flight', 'aviation', 'airplane', 'Wright brothers'],
      importance: 10
    },
    { 
      id: 'jet-airliner-1952',
      title: "First commercial jet airliner", 
      author: "de Havilland Comet", 
      date: "1952-05-02",
      category: 'ENGINEERING',
      description: "First commercial jet passenger service begins",
      tags: ['jet', 'aviation', 'commercial', 'passenger'],
      importance: 8
    },
    { 
      id: 'supersonic-flight-1969',
      title: "First supersonic passenger flight", 
      author: "Concorde", 
      date: "1969-03-02",
      category: 'ENGINEERING',
      description: "Concorde's first test flight breaks sound barrier",
      tags: ['supersonic', 'Concorde', 'aviation', 'passenger'],
      importance: 7
    },
    { 
      id: 'panama-canal-1914',
      title: "Panama Canal completed", 
      author: "US Engineers", 
      date: "1914-08-15",
      category: 'ENGINEERING',
      description: "Completion of Panama Canal connecting Atlantic and Pacific",
      tags: ['canal', 'engineering', 'transportation', 'shipping'],
      importance: 8
    },
    { 
      id: 'first-skyscraper-1885',
      title: "First skyscraper built", 
      author: "Chicago Home Insurance Building", 
      date: "1885-01-01",
      category: 'ENGINEERING',
      description: "First steel-frame skyscraper construction",
      tags: ['skyscraper', 'construction', 'architecture', 'steel'],
      importance: 7
    },
    { 
      id: 'photovoltaic-cell-1954',
      title: "First photovoltaic cell invented", 
      author: "Bell Labs", 
      date: "1954-04-25",
      category: 'ENGINEERING',
      description: "First practical silicon solar cell developed",
      tags: ['solar', 'photovoltaic', 'renewable energy', 'silicon'],
      importance: 8
    },
    { 
      id: 'electric-battery-1800',
      title: "First electric battery invented", 
      author: "Alessandro Volta", 
      date: "1800-03-20",
      category: 'ENGINEERING',
      description: "Invention of the voltaic pile, first electric battery",
      tags: ['battery', 'electricity', 'energy storage', 'volta'],
      importance: 9
    },
    { 
      id: 'electromagnetic-induction-1831',
      title: "Electricity powers the modern world", 
      author: "Michael Faraday", 
      date: "1831-08-29",
      category: 'ENGINEERING',
      description: "Discovery of electromagnetic induction principles",
      tags: ['electricity', 'electromagnetic', 'induction', 'power'],
      importance: 10
    }
  ],

  validate(item) {
    const required = ['id', 'title', 'author', 'date', 'category'];
    const missing = required.filter(field => !item[field]);
    if (missing.length > 0) {
      throw new NewsTickerError(`Missing required fields: ${missing.join(', ')}`, 'VALIDATION_ERROR');
    }
    return true;
  },

  getByCategory(category) {
    return this.items.filter(item => item.category === category);
  },

  getByImportance(minImportance = 5) {
    return this.items.filter(item => item.importance >= minImportance);
  },

  search(query) {
    const lowerQuery = query.toLowerCase();
    return this.items.filter(item => 
      item.title.toLowerCase().includes(lowerQuery) ||
      item.author.toLowerCase().includes(lowerQuery) ||
      item.tags.some(tag => tag.toLowerCase().includes(lowerQuery))
    );
  }
};

// Enhanced image service with caching and error handling
const ImageService = {
  cache: new Map(),
  loadingPromises: new Map(),

  async fetchImage(prompt, options = {}) {
    const cacheKey = `${prompt}_${JSON.stringify(options)}`;

    // Return cached image if available
    if (this.cache.has(cacheKey)) {
      Logger.debug('Image cache hit', { prompt });
      return this.cache.get(cacheKey);
    }

    // Return existing promise if already loading
    if (this.loadingPromises.has(cacheKey)) {
      Logger.debug('Image already loading', { prompt });
      return this.loadingPromises.get(cacheKey);
    }

    const loadingPromise = this._loadImage(prompt, options, cacheKey);
    this.loadingPromises.set(cacheKey, loadingPromise);

    try {
      const result = await loadingPromise;
      this.cache.set(cacheKey, result);
      return result;
    } finally {
      this.loadingPromises.delete(cacheKey);
    }
  },

  async _loadImage(prompt, options, cacheKey) {
    const params = { ...CONFIG.API.IMAGE_PARAMS, ...options };
    const queryString = new URLSearchParams(params).toString();
    const imageUrl = `${CONFIG.API.POLLINATIONS_BASE_URL}/${encodeURIComponent(prompt)}?${queryString}`;

    return Utils.withTimeout(
      this._preloadImage(imageUrl),
      CONFIG.UI.IMAGE_LOAD_TIMEOUT,
      'Image loading timeout'
    );
  },

  _preloadImage(url) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.crossOrigin = 'anonymous';

      img.onload = () => {
        Logger.debug('Image loaded successfully', { url });
        resolve({
          url,
          width: img.naturalWidth,
          height: img.naturalHeight,
          loaded: true
        });
      };

      img.onerror = (error) => {
        Logger.error('Image failed to load', { url, error });
        reject(new NewsTickerError('Failed to load image', 'IMAGE_LOAD_ERROR', { url }));
      };

      img.src = url;
    });
  },

  clearCache() {
    this.cache.clear();
    this.loadingPromises.clear();
    Logger.info('Image cache cleared');
  },

  getCacheStats() {
    return {
      cacheSize: this.cache.size,
      loadingCount: this.loadingPromises.size,
      cacheEntries: Array.from(this.cache.keys())
    };
  }
};

// User preferences management
const PreferencesManager = {
  defaults: {
    updateInterval: CONFIG.UI.DEFAULT_INTERVAL,
    autoStart: true,
    categories: Object.keys(NewsData.categories),
    theme: 'auto',
    soundEnabled: false,
    minImportance: 5
  },

  load() {
    try {
      const stored = localStorage.getItem(CONFIG.STORAGE_KEY);
      return stored ? { ...this.defaults, ...JSON.parse(stored) } : this.defaults;
    } catch (error) {
      Logger.error('Failed to load preferences', error);
      return this.defaults;
    }
  },

  save(preferences) {
    try {
      localStorage.setItem(CONFIG.STORAGE_KEY, JSON.stringify(preferences));
      Logger.info('Preferences saved', preferences);
    } catch (error) {
      Logger.error('Failed to save preferences', error);
    }
  },

  update(updates) {
    const current = this.load();
    const updated = { ...current, ...updates };
    this.save(updated);
    return updated;
  }
};

// Enhanced NewsManager with better architecture
const NewsManager = (props, ctx) => {
  let intervalId = null;
  let currentNewsIndex = 0;
  let filteredNews = [];
  let isDestroyed = false;

  const preferences = PreferencesManager.load();

  // Initialize filtered news based on preferences
  const updateFilteredNews = () => {
    filteredNews = NewsData.items.filter(item => 
      preferences.categories.includes(item.category) &&
      item.importance >= preferences.minImportance
    );

    if (filteredNews.length === 0) {
      Logger.warn('No news items match current filters');
      filteredNews = NewsData.items; // Fallback to all news
    }

    Logger.info(`Filtered news updated: ${filteredNews.length} items`);
  };

  const fetchRandomNews = async () => {
    if (filteredNews.length === 0) updateFilteredNews();

    const randomIndex = Math.floor(Math.random() * filteredNews.length);
    const newsItem = filteredNews[randomIndex];

    try {
      NewsData.validate(newsItem);
      return newsItem;
    } catch (error) {
      Logger.error('Invalid news item', { newsItem, error });
      throw error;
    }
  };

  const updateNews = async () => {
    if (isDestroyed) return;

    const startTime = Date.now();
    ctx.setState('loading', true);

    try {
      const news = await Utils.retry(fetchRandomNews, 3);
      Logger.info('Fetched news item', { title: news.title, id: news.id });

      // Generate image prompt based on news content
      const imagePrompt = `${news.title} ${news.description || ''} scientific illustration`;

      const imageResult = await Utils.retry(
        () => ImageService.fetchImage(imagePrompt),
        CONFIG.API.RETRY_ATTEMPTS
      );

      // Enforce minimum display time
      const elapsed = Date.now() - startTime;
      const remaining = CONFIG.UI.MIN_DISPLAY_TIME - elapsed;
      if (remaining > 0) {
        await Utils.delay(remaining);
      }

      if (!isDestroyed) {
        ctx.setState('currentNews', { 
          ...news, 
          imageUrl: imageResult.url,
          imageMetadata: {
            width: imageResult.width,
            height: imageResult.height,
            loadTime: Date.now() - startTime
          }
        });
        ctx.setState('lastUpdated', new Date().toLocaleTimeString());
        ctx.setState('error', null);

        Logger.info('News updated successfully', { newsId: news.id });
      }

    } catch (error) {
      Logger.error('Failed to update news', error);
      ctx.setState('error', {
        message: error.message,
        code: error.code,
        timestamp: new Date().toISOString()
      });
    } finally {
      if (!isDestroyed) {
        ctx.setState('loading', false);
      }
    }
  };

  // Cleanup function
  const cleanup = () => {
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }
    isDestroyed = true;
    Logger.info('NewsManager cleaned up');
  };

  // Initialize
  updateFilteredNews();

  return {
    api: {
      async startPeriodicUpdates(intervalMs = preferences.updateInterval) {
        if (intervalId) this.stopPeriodicUpdates();

        ctx.setState('isUpdating', true);
        ctx.setState('updateInterval', intervalMs);
        Logger.info('Starting periodic updates', { intervalMs });

        // Initial update
        await updateNews();

        if (!isDestroyed) {
          intervalId = setInterval(async () => {
            if (!ctx.getState('isUpdating') || isDestroyed) {
              this.stopPeriodicUpdates();
              return;
            }
            await updateNews();
          }, intervalMs);
        }
      },

      stopPeriodicUpdates() {
        if (intervalId) {
          clearInterval(intervalId);
          intervalId = null;
          Logger.info('Stopped periodic updates');
        }
        ctx.setState('isUpdating', false);
      },

      async fetchRandomNews() {
        Logger.info('Manual news fetch requested');
        await updateNews();
      },

      updatePreferences(newPrefs) {
        Object.assign(preferences, newPrefs);
        PreferencesManager.save(preferences);
        updateFilteredNews();
        Logger.info('Preferences updated', newPrefs);
      },

      getStats() {
        return {
          totalNews: NewsData.items.length,
          filteredNews: filteredNews.length,
          imageCache: ImageService.getCacheStats(),
          preferences,
          isRunning: !!intervalId
        };
      },

      exportData() {
        return {
          currentNews: ctx.getState('currentNews'),
          preferences,
          stats: this.getStats(),
          logs: Logger.exportLogs().slice(-20) // Last 20 logs
        };
      },

      cleanup
    }
  };
};

// Enhanced Banner component with error handling
const Banner = (props, ctx) => ({
  div: {
    className: 'news-banner gradient-border',
    children: [
      // Error display
      ...(ctx.getState('error') ? [{
        div: {
          className: 'error-banner bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4',
          children: [
            { 
              span: { 
                className: 'font-bold',
                text: 'Error: '
              }
            },
            { 
              span: { 
                text: () => ctx.getState('error')?.message || 'Unknown error occurred'
              }
            }
          ]
        }
      }] : []),

      // Loading indicator
      ...(ctx.getState('loading') ? [{
        div: {
          className: 'loading-indicator flex items-center justify-center py-4',
          children: [
            {
              div: {
                className: 'animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mr-3'
              }
            },
            { span: { text: 'Loading news...', className: 'text-gray-600' } }
          ]
        }
      }] : []),

      // Main content
      {
        h1: {
          className: 'news-title',
          children: [
            {
              span: {
                text: () => {
                  const news = ctx.getState('currentNews');
                  return news ? Utils.sanitizeHtml(news.title) : 'Loading news...';
                }
              }
            }
          ]
        }
      },

      {
        img: {
          src: () => ctx.getState('currentNews')?.imageUrl || '',
          className: 'news-image',
          alt: () => ctx.getState('currentNews')?.title || 'News image',
          loading: 'lazy',
          onError: () => {
            Logger.error('Image failed to display');
            ctx.setState('imageError', true);
          }
        }
      },

      {
        div: {
          className: 'news-meta text-sm text-gray-600 mb-4',
          children: [
            {
              span: {
                className: 'author font-medium',
                text: () => {
                  const news = ctx.getState('currentNews');
                  return news ? `By ${news.author}` : '';
                }
              }
            },
            {
              span: {
                className: 'date ml-2',
                text: () => {
                  const news = ctx.getState('currentNews');
                  return news ? `• ${Utils.formatDate(news.date)}` : '';
                }
              }
            },
            {
              span: {
                className: 'category ml-2 inline-block bg-gray-200 rounded-full px-2 py-1 text-xs',
                text: () => {
                  const news = ctx.getState('currentNews');
                  return news ? NewsData.categories[news.category] : '';
                }
              }
            }
          ]
        }
      },

      {
        div: {
          className: 'info-bar',
          children: [
            {
              div: {
                className: () => `status-indicator ${ctx.getState('isUpdating') ? 'status-live' : 'status-paused'}`
              }
            },
            { 
              span: { 
                text: () => ctx.getState('isUpdating') ? 'LIVE' : 'PAUSED',
                className: 'font-semibold'
              }
            },
            { 
              span: { 
                text: () => {
                  const lastUpdated = ctx.getState('lastUpdated');
                  const interval = ctx.getState('updateInterval');
                  return lastUpdated ? `• ${lastUpdated}${interval ? ` (${interval/1000}s)` : ''}` : '';
                }
              }
            }
          ]
        }
      }
    ]
  }
});

// Enhanced Controls with more options
const Controls = (props, ctx) => {
  const { NewsManager } = ctx;

  return {
    div: {
      className: 'controls-container',
      children: [
        // Primary controls
        {
          div: {
            className: 'primary-controls flex gap-3 mb-4',
            children: [
              {
                button: {
                  className: 'btn-primary',
                  text: () => ctx.getState('isUpdating') ? 'Stop Updates' : 'Start Updates',
                  onclick: () => {
                    if (ctx.getState('isUpdating')) {
                      NewsManager.stopPeriodicUpdates();
                    } else {
                      const preferences = PreferencesManager.load();
                      NewsManager.startPeriodicUpdates(preferences.updateInterval);
                    }
                  },
                  disabled: () => ctx.getState('loading')
                }
              },
              {
                button: {
                  className: 'btn-secondary',
                  text: 'Random News',
                  onclick: () => NewsManager.fetchRandomNews(),
                  disabled: () => ctx.getState('loading')
                }
              }
            ]
          }
        },

        // Speed controls
        {
          div: {
            className: 'speed-controls flex gap-2 mb-4',
            children: [
              {
                button: {
                  className: 'btn-tertiary text-xs',
                  text: 'Fast (1s)',
                  onclick: () => {
                    if (ctx.getState('isUpdating')) {
                      NewsManager.stopPeriodicUpdates();
                      NewsManager.startPeriodicUpdates(CONFIG.UI.FAST_INTERVAL);
                    }
                  }
                }
              },
              {
                button: {
                  className: 'btn-tertiary text-xs',
                  text: 'Normal (3s)',
                  onclick: () => {
                    if (ctx.getState('isUpdating')) {
                      NewsManager.stopPeriodicUpdates();
                      NewsManager.startPeriodicUpdates(CONFIG.UI.DEFAULT_INTERVAL);
                    }
                  }
                }
              },
              {
                button: {
                  className: 'btn-tertiary text-xs',
                  text: 'Slow (5s)',
                  onclick: () => {
                    if (ctx.getState('isUpdating')) {
                      NewsManager.stopPeriodicUpdates();
                      NewsManager.startPeriodicUpdates(CONFIG.UI.SLOW_INTERVAL);
                    }
                  }
                }
              }
            ]
          }
        },

        // Utility controls
        {
          div: {
            className: 'utility-controls flex gap-2 text-xs',
            children: [
              {
                button: {
                  className: 'btn-tertiary',
                  text: 'Clear Cache',
                  onclick: () => {
                    ImageService.clearCache();
                    Logger.info('Cache cleared by user');
                  }
                }
              },
              {
                button: {
                  className: 'btn-tertiary',
                  text: 'Export Data',
                  onclick: () => {
                    const data = NewsManager.exportData();
                    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `news-ticker-export-${Date.now()}.json`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                  }
                }
              }
            ]
          }
        }
      ]
    }
  };
};

// Enhanced App component
const App = (props, ctx) => ({
  div: {
    className: 'news-container',
    children: [
      {
        div: {
          className: 'news-wrapper',
          children: [
            { 
              h2: { 
                className: 'news-header',
                text: 'Scientific Discovery Timeline'
              }
            },
            { Banner: {} },
            { Controls: {} },

            // Stats panel (development mode)
            ...(window.location.search.includes('debug=true') ? [{
              div: {
                className: 'debug-panel mt-8 p-4 bg-gray-100 rounded-lg text-sm',
                children: [
                  { h3: { text: 'Debug Information', className: 'font-bold mb-2' } },
                  { 
                    pre: { 
                      text: () => JSON.stringify(ctx.NewsManager?.getStats?.() || {}, null, 2),
                      className: 'text-xs overflow-auto max-h-40'
                    }
                  }
                ]
              }
            }] : [])
          ]
        }
      }
    ]
  }
});

// Initialize application with enhanced error handling
try {
  const juris = new Juris({
    states: {
      currentNews: null,
      isUpdating: false,
      loading: false,
      lastUpdated: null,
      updateInterval: CONFIG.UI.DEFAULT_INTERVAL,
      error: null,
      imageError: false
    },
    components: { Banner, Controls, App },
    headlessComponents: { 
      NewsManager: { 
        fn: NewsManager, 
        options: { autoInit: true } 
      } 
    },
    layout: [{ App: {} }]
  });

  // Global error handler
  window.addEventListener('error', (event) => {
    Logger.error('Global error caught', {
      message: event.error?.message,
      stack: event.error?.stack,
      filename: event.filename,
      lineno: event.lineno
    });
  });

  window.addEventListener('unhandledrejection', (event) => {
    Logger.error('Unhandled promise rejection', {
      reason: event.reason?.message || event.reason
    });
  });

  // Cleanup on page unload
  window.addEventListener('beforeunload', () => {
    if (juris.headlessAPIs?.NewsManager?.cleanup) {
      juris.headlessAPIs.NewsManager.cleanup();
    }
  });

  juris.render();

  // Auto-start if enabled in preferences
  const preferences = PreferencesManager.load();
  if (preferences.autoStart) {
    setTimeout(() => {
      juris.headlessAPIs.NewsManager?.startPeriodicUpdates?.(preferences.updateInterval);
    }, 100);
  }

  Logger.info('News Ticker initialized successfully');

} catch (error) {
  Logger.error('Failed to initialize News Ticker', error);
  document.body.innerHTML = `
    <div class="error-container">
      <h1>Failed to Initialize News Ticker</h1>
      <p>Error: ${error.message}</p>
      <button onclick="location.reload()">Reload Page</button>
    </div>
  `; 
}

A Basic Form Order in Juris

ArtyProg — Tue, 02 Sep 2025 06:18:43 +0000

Here is a basic form in Juris.
You can play with the code here : Form

Internationalization made simple with Juris

ArtyProg — Mon, 25 Aug 2025 19:31:56 +0000

In one of his posts, Resti, the creator of Juris showed how easy it is to implement I18n in Juris.

You absolutely don't need to "wrap" all your application inside any wrapper.
Simply code an I18n component, which will be injected in all components via context parameter.

Here is the code in charge of the translation:

// --- 1. THE SERVICE (Headless Component) ---

/**
 * @name I18nManager
 * @description A headless component that provides internationalization (I18n) services.
 * It contains no UI itself; its only job is to manage translation logic and expose
 * an API (`t`) that other components can use.
 */
const I18nManager = (props, { getState, setState, subscribe }) => {
  /**
   * A safe utility to resolve a value from a nested object using a string path.
   * For example, it turns "buttons.save" into obj['buttons']['save'].
   * The optional chaining (`?.`) prevents errors if an intermediate key doesn't exist.
   */
  const resolvePath = (obj, path) =>
    path.split(".").reduce((current, key) => current?.[key], obj);

  /**
   * The core translation function. It's conventionally named `t`.
   * It finds a translation string for the current language, falls back to English if needed,
   * and replaces any dynamic parameters (like {name}).
   */
  const t = (key, params = {}) => {
    const lang = getState("ui.lang") || "en";
    const str =
      resolvePath(translations[lang], key) || // 1. Try current language
      resolvePath(translations["en"], key) || // 2. Fallback to English
      key;                                     // 3. Fallback to the key itself

    // This loop replaces placeholders like `{name}` with actual values from `params`.
    return Object.entries(params).reduce(
      (acc, [p, value]) => acc.replace(new RegExp(`\\{${p}\\}`, 'g'), value),
      str
    );
  };

  return {
    // The `api` object is the public contract of this service.
    // Only the `t` function is exposed to the rest of the application.
    api: { t },

    // `hooks` are lifecycle methods. `onRegister` runs once when JurisJS initializes this service.
    hooks: {
      onRegister: () => {
        // `subscribe` creates a reactive connection. This callback will run automatically
        // *every time* the 'ui.lang' state changes. It's highly efficient.
        subscribe("ui.lang", () => {
          document.title = t("appTitle");
        });
      },
    },
  };
};

Look at this demo :

Demo

Here is the full commented application, you copy and paste.
May I insist in the fact that this code does not necessitate any bundler, and runs directly in the browser !!!.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- The document title will be dynamically updated by our JurisJS app. -->
  <title>JurisJS I18n Demo</title>

  <!-- For this educational demo, we import JurisJS directly from a CDN. -->
  <script src="https://unpkg.com/juris@0.88"></script>

  <!-- We use a clean, modern font from Google to improve readability. -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">

  <style>
    /* 
     * --- Educational CSS Styling --- 
     * This CSS is designed to create a clean, focused presentation
     * for a code demonstration, making the output clear and intuitive.
     */

    /* 1. General Body Styling */
    body {
      font-family: 'Lato', sans-serif;
      background-color: #f4f7f9; /* A soft, neutral background reduces eye strain. */
      color: #333;
      display: flex; /* Flexbox is used to easily center the main container. */
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

    /* 2. Application Root Container */
    #app {
      background-color: #ffffff;
      border-radius: 12px; /* Soft rounded corners give a modern feel. */
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* A subtle shadow lifts the card off the page. */
      padding: 40px;
      width: 100%;
      max-width: 600px;
      text-align: center;
    }

    /* 3. Header Styling */
    .header h2 {
      color: #1a237e; /* A deep blue provides a professional, trustworthy tone. */
      font-size: 1.8rem;
    }
    .header p {
      color: #667;
      line-height: 1.6; /* Increased line-height improves readability for paragraphs. */
    }

    /* 4. Main Welcome Message Styling */
    h1 {
      font-size: 2.5rem;
      margin: 20px 0;
      /* This transition ensures the text change feels smooth when switching languages. */
      transition: all 0.3s ease-in-out;
    }

    /* 5. Button Styling & User Feedback */
    .button-group {
      margin-top: 25px;
      display: flex;
      gap: 15px; /* `gap` is a modern CSS property for spacing flex items. */
      justify-content: center;
    }
    button {
      font-family: 'Lato', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      /* Transitions on multiple properties provide smooth visual feedback on interaction. */
      transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    }
    button:hover {
      transform: translateY(-2px); /* A subtle "lift" effect on hover. */
    }
    /* Visual hierarchy: Primary action buttons are styled more prominently. */
    .action-buttons button {
      background-color: #3f51b5;
      color: white;
    }
    .action-buttons button:hover {
       background-color: #303f9f;
    }
  </style>

</head>
<body>

  <!-- This is the mounting point. The entire UI will be generated by JurisJS inside this div. -->
  <div id="app"></div>

<script>
/*
 * ===================================================================================
 * JURISJS APPLICATION LOGIC
 * Our application is cleanly structured into four main parts:
 * 1. The Service (I18nManager): A headless component that handles all translation logic.
 * 2. The Data (Translations): A simple object holding all our translation strings.
 * 3. The UI Components: Small, focused components that render parts of our view.
 * 4. The Application Instance: The main object that wires everything together.
 * ===================================================================================
 */


// --- 1. THE SERVICE (Headless Component) ---

/**
 * @name I18nManager
 * @description A headless component that provides internationalization (I18n) services.
 * It contains no UI itself; its only job is to manage translation logic and expose
 * an API (`t`) that other components can use.
 */
const I18nManager = (props, { getState, setState, subscribe }) => {
  /**
   * A safe utility to resolve a value from a nested object using a string path.
   * For example, it turns "buttons.save" into obj['buttons']['save'].
   * The optional chaining (`?.`) prevents errors if an intermediate key doesn't exist.
   */
  const resolvePath = (obj, path) =>
    path.split(".").reduce((current, key) => current?.[key], obj);

  /**
   * The core translation function. It's conventionally named `t`.
   * It finds a translation string for the current language, falls back to English if needed,
   * and replaces any dynamic parameters (like {name}).
   */
  const t = (key, params = {}) => {
    const lang = getState("ui.lang") || "en";
    const str =
      resolvePath(translations[lang], key) || // 1. Try current language
      resolvePath(translations["en"], key) || // 2. Fallback to English
      key;                                     // 3. Fallback to the key itself

    // This loop replaces placeholders like `{name}` with actual values from `params`.
    return Object.entries(params).reduce(
      (acc, [p, value]) => acc.replace(new RegExp(`\\{${p}\\}`, 'g'), value),
      str
    );
  };

  return {
    // The `api` object is the public contract of this service.
    // Only the `t` function is exposed to the rest of the application.
    api: { t },

    // `hooks` are lifecycle methods. `onRegister` runs once when JurisJS initializes this service.
    hooks: {
      onRegister: () => {
        // `subscribe` creates a reactive connection. This callback will run automatically
        // *every time* the 'ui.lang' state changes. It's highly efficient.
        subscribe("ui.lang", () => {
          document.title = t("appTitle");
        });
      },
    },
  };
};


// --- 2. THE DATA ---

/**
 * @name translations
 * @description A simple object containing all UI strings.
 * Separating text from logic makes the app easier to maintain and translate.
 * In a larger application, this data would likely come from separate JSON files.
 */
const translations = {
  en: {
    appTitle: 'JurisJS I18n Demo',
    demoTitle: 'JurisJS Internationalization (I18n) Demo',
    demoDescription: 'This is a live demonstration of a headless component managing language state. Click the buttons below to change the language and see the UI update reactively.',
    welcome: 'Welcome, {name}!',
    buttons: { save: 'Save', cancel: 'Cancel' }
  },
  fr: {
    appTitle: 'Démo I18n de JurisJS',
    demoTitle: 'Démo d\'Internationalisation (I18n) de JurisJS',
    demoDescription: 'Ceci est une démonstration en direct d\'un composant sans tête gérant l\'état de la langue. Cliquez sur les boutons ci-dessous pour changer la langue et voir l\'interface se mettre à jour réactivement.',
    welcome: 'Bienvenue, {name}!',
    buttons: { save: 'Enregistrer', cancel: 'Annuler' }
  }
};


// --- 3. THE UI COMPONENTS ---

/**
 * @name Header
 * @description A simple component responsible for rendering the main title and description.
 * Notice how `I18n` is destructured from the context parameter. JurisJS provides this automatically.
 */
const Header = (props, { I18n }) => {
  // It returns a JurisJS Virtual DOM object that describes the desired HTML.
  return {
    div: {
      class: "header",
      children: [
        { h2: { text: () => I18n.t("demoTitle") } },
        { p: { text: () => I18n.t("demoDescription") } },
      ],
    },
  };
};

/**
 * @name WelcomeMessage
 * @description Renders the main `<h1>` greeting.
 */
const WelcomeMessage = (props, { I18n }) => {
  return {
    h1: { text: () => I18n.t("welcome", { name: "Paul" }) },
  };
};

/**
 * @name LanguageSelector
 * @description Renders the buttons that allow the user to switch languages.
 * The `onclick` handlers directly update the central state.
 */
const LanguageSelector = (props, { setState }) => {
  return {
    div: {
      class: "button-group",
      children: [
        { button: { text: "Français", onclick: () => setState("ui.lang", "fr") } },
        { button: { text: "English", onclick: () => setState("ui.lang", "en") } },
      ],
    },
  }
}

/**
 * @name ActionButtons
 * @description Renders the primary action buttons (Save/Cancel).
 * This component demonstrates effortless access to the translation service.
 */
const ActionButtons = (props, { I18n }) => {
  return {
    div: {
      class: "button-group action-buttons",
      children: [
        { button: { text: () => I18n.t("buttons.save") } },
        { button: { text: () => I18n.t("buttons.cancel") } },
      ],
    },
  }
}


// --- 4. THE APPLICATION INSTANCE ---

/**
 * This is the main application instance where we assemble all the pieces.
 */
const app = new Juris({
  // Tells JurisJS where in the HTML to render the app.
  target: "#root",

  // The application's "single source of truth." All dynamic data lives here.
  states: {
    ui: {
      lang: "en", 
    },
  },

  // This is where we register our `I18nManager` service. We give it the public
  // name "I18n", which is how it will be identified on the `context` object.
  headlessComponents: {
    I18n: { fn: I18nManager, options: { autoInit: true } },
  },

  // A registry of all the UI components we've defined.
  components: {
    Header,
    WelcomeMessage,
    LanguageSelector,
    ActionButtons
  },

  // The declarative blueprint of our UI. It defines the structure and order
  // of the components to be rendered.
  layout: [
    { Header },
    { WelcomeMessage },
    { LanguageSelector },
    { ActionButtons }
  ],
});

// This final command kicks everything off, rendering the application to the DOM.
app.render();

</script>
</body>
</html>

Jurit Multi Select Demo

ArtyProg — Mon, 18 Aug 2025 12:29:45 +0000

Ever found yourself wrestling with building a custom, accessible Select component? Here is a version in Juris, created by the author himself.

MultiSelect

Here is the full code. It runs as is in browser, pure Javascript code, no bundler, that is Juris :-)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juris Multi-Select Demo</title>
    <script src="https://unpkg.com/juris@0.88.2/juris.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background: rgba(10, 110, 140, 1);

        }
        .multiselect-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .multiselect-input-container {
            min-height: 27px;
            padding: 8px;
            border: 2px solid #e2e8f0;
            border-radius: 6px;
            background: white;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            cursor: text;
            transition: border-color 0.2s;
        }
        .multiselect-input-container:focus-within {
            border-color: #3b82f6;
        }
        .multiselect-input {
            border: none;
            outline: none;
            font-size: 16px;
            flex: 1;
            min-width: 120px;
            padding: 4px;
            background: transparent;
        }
        .dropdown {
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
        }
        .dropdown-item {
            padding: 12px;
            cursor: pointer;
            border-bottom: 1px solid #f1f5f9;
            transition: background-color 0.15s;
        }
        .dropdown-item:hover,
        .dropdown-item.highlighted {
            background-color: #f8fafc;
        }
        .dropdown-item.highlighted {
            background-color: #eff6ff;
        }
        .dropdown-item:last-child {
            border-bottom: none;
        }
        .selected-item {
            background: white;
            padding: 2px 4px 4px 8px;
            border-radius: 4px;
            border:solid 1px grey;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            animation: slideIn 0.2s ease-out;
            white-space: nowrap;
        }
        .remove-btn {
            background: #fafafa;
            border: none;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #cecece;
            transition: background-color 0.15s;
        }
        .remove-btn:hover {
            background: grey;
        }
        .multiselect-wrapper {
            position: relative;
        }
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .loading {
            padding: 12px;
            text-align: center;
            color: #64748b;
        }
        .max-items-message {
            padding: 8px 12px;
            background: #fef3c7;
            border: 1px solid #f59e0b;
            border-radius: 4px;
            font-size: 12px;
            color: #92400e;
            margin-bottom: 8px;
        }
        .help-button {
            position: absolute;
            top: -30px;
            right: 0;
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #64748b;
            transition: all 0.2s;
        }
        .help-button:hover {
            background: #e2e8f0;
            color: #374151;
        }
        .help-tooltip {
            position: absolute;
            top: -120px;
            right: 0;
            background: #1f2937;
            color: white;
            padding: 12px;
            border-radius: 8px;
            font-size: 12px;
            width: 280px;
            z-index: 1001;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .help-tooltip::after {
            content: '';
            position: absolute;
            bottom: -6px;
            right: 20px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #1f2937;
        }
        .help-tooltip ul {
            margin: 0;
            padding-left: 16px;
        }
        .help-tooltip li {
            margin: 4px 0;
        }
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-4px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .no-results {
            padding: 12px;
            color: #64748b;
            font-style: italic;
            text-align: center;
        }
        h1 {
            color: #1e293b;
            text-align: center;
            margin-bottom: 30px;
        }
        .demo-info {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 6px;
            padding: 16px;
            margin-bottom: 20px;
            color: #1e40af;
        }

      h1 {
        color: white;
      }
    </style>
</head>
<body>
    <div id="app"></div>

    <script>
        // Sample data
const fruits = [
    { id: 1, name: 'Apple', category: 'Tree fruit' },
    { id: 2, name: 'Banana', category: 'Tropical' },
    { id: 3, name: 'Cherry', category: 'Stone fruit' },
    { id: 4, name: 'Dragonfruit', category: 'Exotic' },
    { id: 5, name: 'Elderberry', category: 'Berry' },
    { id: 6, name: 'Fig', category: 'Tree fruit' },
    { id: 7, name: 'Grape', category: 'Vine fruit' },
    { id: 8, name: 'Honeydew', category: 'Melon' },
    { id: 9, name: 'Kiwi', category: 'Exotic' },
    { id: 10, name: 'Lemon', category: 'Citrus' },
    { id: 11, name: 'Mango', category: 'Tropical' },
    { id: 12, name: 'Orange', category: 'Citrus' },
    { id: 13, name: 'Papaya', category: 'Tropical' },
    { id: 14, name: 'Strawberry', category: 'Berry' },
    { id: 15, name: 'Watermelon', category: 'Melon' }
];

const MultiSelectDemo = (props, { getState, setState }) => ({
    div: {
        onclick: (e) => {
            // Close help when clicking outside the help area
            if (getState('showHelp', false) && 
                !e.target.closest('.help-tooltip') && 
                !e.target.closest('.help-button')) {
                setState('showHelp', false);
            }
        },
        children: [
            {h1: { text: 'Juris Multi-Select Component Demo' }},
            {div: {class: 'demo-info',
              text: '🚀 Built with Juris.js - Object-First Reactive Framework. Try  typing to search, click to select, and use × to remove items!'
            }},
            {div: {class: 'multiselect-container',children: [
                { MultiSelectComponent: {} }
            ]}}
          ]
    }//div
  });


const MultiSelectComponent = (props, { getState, setState }) => ({
            div: {
                class: 'multiselect-wrapper',
                role: 'combobox',
                'aria-expanded': () => getState('isDropdownOpen', false),
                'aria-haspopup': 'listbox',
                'aria-label': 'Multi-select fruits',
                children: [
          // Help button
          {
            button: {
              class: 'help-button',
              style: { display: "none" },
              type: 'button',
              title: 'Show keyboard shortcuts',
              'aria-label': 'Show help and keyboard shortcuts',
              text: '?',
              onclick: () => {
                const isOpen = getState('showHelp', false);
                setState('showHelp', !isOpen);
              }
            }
          },
          // Help tooltip
          {
            div: {
              class: 'help-tooltip',
              style: () => ({
                display: getState('showHelp', false) ? 'block' : 'none'
              }),
              tabindex: '0',
              onkeydown: (e) => {
                if (e.key === 'Escape') {
                  setState('showHelp', false);
                }
              },
              children: [
                { div: { text: 'Keyboard Shortcuts:', style: { fontWeight: 'bold', marginBottom: '8px' } } },
                { ul: { children: [
                  { li: { text: '↓↑ Navigate options' } },
                  { li: { text: 'Enter: Select highlighted item' } },
                  { li: { text: 'Escape: Close dropdown' } },
                  { li: { text: 'Backspace: Remove last selected item' } },
                  { li: { text: 'Type: Search and filter items' } },
                  { li: { text: 'Click ×: Remove specific item' } }
                ]}}
              ]
            }
          },
          // Max items warning
          {
            div: {
              class: 'max-items-message',
              style: () => ({
                display: getState('selectedItems', []).length >= 10 ? 'block' : 'none'
              }),
              text: 'Maximum 10 items can be selected'
            }
          },
          { 
            div: { 
              style: { display: "flex", gap: "0.35rem", marginBottom: "0.35em", flexWrap: "wrap" },
              role: 'group',
              'aria-label': 'Selected items',
              children: () => {
                            const selectedItems = getState('selectedItems', []);
                            const children = []; 
                selectedItems.forEach((item, index) => {
                                children.push({
                                    SelectedItem: { item, index }
                                });
                            });
                return children }
            }
          },

          {div: {class: 'multiselect-input-container',
                        onclick: (e) => {
                            const input = e.currentTarget.querySelector('.multiselect-input');
                            if (input) input.focus();
                        },
                        children: () => {
                            const selectedItems = getState('selectedItems', []);
                            const children = [];

                            // Add screen reader announcement
                            children.push({
                                div: {
                                    class: 'sr-only',
                                    'aria-live': 'polite',
                                    'aria-atomic': 'true',
                                    text: () => {
                                        const count = getState('selectedItems', []).length;
                                        return count > 0 ? `${count} items selected` : 'No items selected';
                                    }
                                }
                            });

                            // Add the input field
                            children.push({
                                input: {
                                    type: 'text',
                                    class: 'multiselect-input',
                                    placeholder: selectedItems.length === 0 ? 'Search and select fruits...' : '',
                                    value: () => getState('searchTerm', ''),
                                    role: 'textbox',
                                    'aria-autocomplete': 'list',
                                    'aria-describedby': 'multiselect-help',
                                    'aria-activedescendant': () => {
                                        const highlighted = getState('highlightedIndex', -1);
                                        return highlighted >= 0 ? `item-${highlighted}` : null;
                                    },
                                    oninput: (e) => {
                                        setState('searchTerm', e.target.value);
                                        setState('isDropdownOpen', true);
                                        setState('highlightedIndex', -1);
                                    },
                                    onfocus: () => setState('isDropdownOpen', true),
                                    onblur: () => {
                                        setTimeout(() => setState('isDropdownOpen', false), 150);
                                    },
                                    onkeydown: (e) => {
                                        const currentSelected = getState('selectedItems', []);
                                        const isOpen = getState('isDropdownOpen', false);
                                        const highlighted = getState('highlightedIndex', -1);
                                        const availableItems = getState('availableItems', []);
                                        const searchTerm = getState('searchTerm', '').toLowerCase();
                                        const selectedIds = currentSelected.map(item => item.id);
                                        const filteredItems = availableItems.filter(item => 
                                            item.name.toLowerCase().includes(searchTerm) && 
                                            !selectedIds.includes(item.id)
                                        );

                                        switch(e.key) {
                                            case 'Backspace':
                                                if (e.target.value === '' && currentSelected.length > 0) {
                                                    setState('selectedItems', currentSelected.slice(0, -1));
                                                }
                                                break;
                                            case 'ArrowDown':
                                                e.preventDefault();
                                                setState('showHelp', false); // Hide help when navigating
                                                if (!isOpen) {
                                                    setState('isDropdownOpen', true);
                                                    setState('highlightedIndex', 0);
                                                } else {
                                                    const newIndex = Math.min(highlighted + 1, filteredItems.length - 1);
                                                    setState('highlightedIndex', newIndex);
                                                }
                                                break;
                                            case 'ArrowUp':
                                                e.preventDefault();
                                                setState('showHelp', false); // Hide help when navigating
                                                if (isOpen && highlighted > 0) {
                                                    setState('highlightedIndex', highlighted - 1);
                                                }
                                                break;
                                            case 'Enter':
                                                e.preventDefault();
                                                if (isOpen && highlighted >= 0 && filteredItems[highlighted]) {
                                                    const item = filteredItems[highlighted];
                                                    if (currentSelected.length < 10) {
                                                        setState('selectedItems', [...currentSelected, item]);
                                                        setState('searchTerm', '');
                                                        setState('isDropdownOpen', false);
                                                        setState('highlightedIndex', -1);
                                                    }
                                                }
                                                break;
                                            case 'Escape':
                                                e.preventDefault();
                                                setState('isDropdownOpen', false);
                                                setState('highlightedIndex', -1);
                                                setState('showHelp', false); // Also hide help on escape
                                                break;
                                            case 'F1':
                                                e.preventDefault();
                                                setState('showHelp', !getState('showHelp', false));
                                                break;
                                        }
                                    }
                                }
                            });

                            // Help text
                            children.push({
                                div: {
                                    id: 'multiselect-help',
                                    class: 'sr-only',
                                    text: 'Use arrow keys to navigate, Enter to select, Escape to close, Backspace to remove last item'
                                }
                            });

                            return children;
                        }}
                    },

                    {DropdownList: {}}
                ]
            }
        });

const DropdownList = (props, { getState, setState }) => ({
            div: {
                class: 'dropdown',
                role: 'listbox',
                'aria-label': 'Available fruits',
                style: () => ({
                    display: getState('isDropdownOpen', false) ? 'block' : 'none'
                }),
                children: () => {
                    const searchTerm = getState('searchTerm', '').toLowerCase();
                    const selectedItems = getState('selectedItems', []);
                    const availableItems = getState('availableItems', []);
                    const highlightedIndex = getState('highlightedIndex', -1);
                    const isLoading = getState('isLoading', false);

                    if (isLoading) {
                        return [{
                            div: {class: 'loading', text: 'Loading...'}
                        }];
                    }

                    // Filter items based on search and exclude already selected
                    const selectedIds = selectedItems.map(item => item.id);
                    const filteredItems = availableItems.filter(item => 
                        item.name.toLowerCase().includes(searchTerm) && 
                        !selectedIds.includes(item.id)
                    );

                    if (filteredItems.length === 0) {
                        return [{
                            div: {
                                class: 'no-results',
                                role: 'option',
                                text: searchTerm ? 'No matching fruits found' : 'All fruits selected'
                            }
                        }];
                    }

                    return filteredItems.map((item, index) => ({
                        div: {
                            class: () => `dropdown-item${highlightedIndex === index ? ' highlighted' : ''}`,
                            id: `item-${index}`,
                            role: 'option',
                            'aria-selected': 'false',
                            text: `${item.name} - ${item.category}`,
                            onclick: () => {
                                const currentSelected = getState('selectedItems', []);
                                if (currentSelected.length < 10) {
                                    setState('selectedItems', [...currentSelected, item]);
                                    setState('searchTerm', '');
                                    setState('isDropdownOpen', false);
                                    setState('highlightedIndex', -1);
                                }
                            },
                            onmouseenter: () => setState('highlightedIndex', index)
                        }
                    }));
                }
            }
        })


const SelectedItem = (props, { getState, setState }) => ({
            div: {
                class: 'selected-item',
                role: 'group',
                'aria-label': `Selected: ${props.item.name}`,
                children: [
                    {span: { text: props.item.name }},
                    {button: {
                        class: 'remove-btn',
                        text: '×',
                        type: 'button',
                        'aria-label': `Remove ${props.item.name}`,
                        title: `Remove ${props.item.name}`,
                        onclick: () => {
                            const currentSelected = getState('selectedItems', []);
                            const updatedSelected = currentSelected.filter(
                                selectedItem => selectedItem.id !== props.item.id
                            );
                            setState('selectedItems', updatedSelected);
                        }
                    }}
                ]
            }
        })
// Initialize Juris app
const app = new Juris({
    states: {
        searchTerm: '',
        isDropdownOpen: false,
        selectedItems: [],
        availableItems: fruits,
        highlightedIndex: -1,
        isLoading: false,
        showHelp: false
    },


    components: {
    MultiSelectDemo,
        MultiSelectComponent,
        DropdownList,
        SelectedItem
    },

    layout: [

    { MultiSelectDemo: {} }
  ]
});

// Render the app
app.render('#app');

// Add some initial selected items for demo
setTimeout(() => {
    app.setState('selectedItems', [
        { id: 1, name: 'Apple', category: 'Tree fruit' },
        { id: 11, name: 'Mango', category: 'Tropical' }
    ]);
}, 500);
    </script>
</body>
</html>

Forget bundlers: Here is a Full-Stack Todo App in a Single HTML File

ArtyProg — Mon, 11 Aug 2025 13:33:23 +0000

Every day, we're told we need more. More libraries, more frameworks, more complex build tools just to get started. We're sold a mountain of dependencies—Webpack, Babel, Vite, Node.js—before we've even written a single line of our app's logic.

But what if that's a story we don't have to buy into?

What if I told you that your favorite code editor and a single HTML file are all you need to build a truly complex, high-performance application? I'm not talking about a simple counter. I'm talking about this fully-featured Todo application with:

authentication,
client-side routing,
granular,
user-specific persistent storage.

This entire application, all 1,500+ lines of it, lives in one HTML file. There is no npm install, no package.json, no bundler. It just runs.

This is the story of how a different kind of framework—JurisJS—makes this possible by getting out of your way and letting you build.

You can test the demo here : TodoApp

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juris Todo App - Routeur, Auth & Stockage</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --orange: #ff6b35;
            --orange-light: #ff8c5a;
            --orange-dark: #e55a2b;
            --orange-pale: #fff4f1;
            --primary: #ff6b35;
            --primary-dark: #e55a2b;
            --primary-light: #ff8c5a;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --gray-50: #fafafa;
            --gray-100: #f5f5f5;
            --gray-200: #e5e5e5;
            --gray-300: #d4d4d4;
            --gray-400: #a3a3a3;
            --gray-500: #6b7280;
            --gray-600: #525252;
            --gray-700: #404040;
            --gray-800: #262626;
            --gray-900: #171717;
            --white: #ffffff;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --border-radius: 0.5rem;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--gray-900);
            background: var(--white);
            font-size: 16px;
        }

        /* Layout Components */
        .app-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: var(--white);
            border-bottom: 1px solid var(--gray-200);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--orange);
            text-decoration: none;
        }

        .nav {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .nav-link {
            color: var(--gray-600);
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
        }

        .nav-link:hover {
            background: var(--gray-100);
            color: var(--orange);
        }

        .nav-link.active {
            background: var(--orange);
            color: var(--white);
        }

        .main-content {
            flex: 1;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
            width: 100%;
        }

        /* Form Components */
        .form-container {
            max-width: 400px;
            margin: 2rem auto;
            background: var(--white);
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
        }

        .form-title {
            font-size: 1.5rem;
            font-weight: 600;
            text-align: center;
            margin-bottom: 2rem;
            color: var(--gray-900);
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--gray-700);
        }

        .form-input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--gray-300);
            border-radius: var(--border-radius);
            font-size: 1rem;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--orange);
            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
        }

        .form-input.error {
            border-color: var(--danger);
        }

        .form-error {
            color: var(--danger);
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            touch-action: manipulation;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .btn-primary {
            background: var(--orange);
            color: var(--white);
        }

        .btn-primary:hover {
            background: var(--orange-dark);
        }

        .btn-secondary {
            background: var(--gray-200);
            color: var(--gray-800);
        }

        .btn-secondary:hover {
            background: var(--gray-300);
        }

        .btn-danger {
            background: var(--danger);
            color: var(--white);
        }

        .btn-success {
            background: var(--success);
            color: var(--white);
        }

        .btn-full {
            width: 100%;
        }

        /* Todo Components */
        .todo-dashboard {
            display: grid;
            gap: 2rem;
        }

        .todo-lists {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow);
        }

        .section-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--gray-900);
        }

        .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border: 1px solid var(--gray-200);
            border-radius: var(--border-radius);
            margin-bottom: 0.5rem;
            cursor: pointer;
        }

        .list-item:hover {
            border-color: var(--orange);
            background: var(--gray-50);
        }

        .list-item.active {
            border-color: var(--orange);
            background: var(--orange-pale);
        }

        .list-info {
            flex: 1;
        }

        .list-name {
            font-weight: 500;
            color: var(--gray-900);
        }

        .list-count {
            color: var(--gray-500);
            font-size: 0.875rem;
        }

        .list-actions {
            display: flex;
            gap: 0.5rem;
        }

        .btn-small {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }

        .todo-form {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow);
            margin-bottom: 2rem;
        }

        .todo-input {
            display: flex;
            gap: 0.5rem;
        }

        .todo-input input {
            flex: 1;
        }

        .todo-list {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow);
        }

        .todo-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--gray-100);
        }

        .todo-item:last-child {
            border-bottom: none;
        }

        .todo-checkbox {
            width: 1.25rem;
            height: 1.25rem;
            cursor: pointer;
        }

        .todo-text {
            flex: 1;
            color: var(--gray-700);
        }

        .todo-text.completed {
            text-decoration: line-through;
            color: var(--gray-400);
        }

        .todo-actions {
            display: flex;
            gap: 0.5rem;
        }

        .filters {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 0.5rem 1rem;
            border: 1px solid var(--gray-300);
            background: var(--white);
            color: var(--gray-600);
            border-radius: var(--border-radius);
            cursor: pointer;
        }

        .filter-btn.active {
            background: var(--orange);
            color: var(--white);
            border-color: var(--orange);
        }

        /* Responsive Design */
        @media (min-width: 768px) {
            .todo-dashboard {
                grid-template-columns: 450px 1fr;
            }

            .main-content {
                padding: 3rem 2rem;
            }
        }

        /* Loading & Empty States */
        .loading {
            text-align: center;
            padding: 2rem;
            color: var(--gray-500);
        }

        .empty-state {
            text-align: center;
            padding: 3rem;
            color: var(--gray-500);
        }

        .empty-state h3 {
            margin-bottom: 1rem;
            color: var(--gray-700);
        }

        /* Utility Classes */
        .text-center {
            text-align: center;
        }

        .text-sm {
            font-size: 0.875rem;
        }

        .text-danger {
            color: var(--danger);
        }

        .text-success {
            color: var(--success);
        }

        .mt-1 {
            margin-top: 0.25rem;
        }

        .mt-2 {
            margin-top: 0.5rem;
        }

        .mb-2 {
            margin-bottom: 0.5rem;
        }

        .hidden {
            display: none;
        }

        /* Toast notifications */
        .toast {
            position: fixed;
            top: 1rem;
            right: 1rem;
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--border-radius);
            padding: 1rem;
            box-shadow: var(--shadow-lg);
            z-index: 1000;
        }

        .toast.success {
            border-left: 4px solid var(--success);
        }

        .toast.error {
            border-left: 4px solid var(--danger);
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script src="https://unpkg.com/juris"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script>
        // NOTE: The internal logic and console logs of the managers are kept in English
        // for easier debugging by developers, as is common practice. Only user-facing
        // text in UI components and alerts is translated.

        const StatePersistenceManager = (props, context) => {
            const { getState, setState, subscribe } = context;

            // Enhanced configuration with timing controls
            const config = {
                domains: props.domains || [],
                excludeDomains: props.excludeDomains || ['temp', 'cache', 'session', 'geolocation', 'persistence'],
                keyPrefix: props.keyPrefix || 'app_state_',
                debounceMs: props.debounceMs || 1000,
                debug: props.debug || false,
                autoDetectNewDomains: props.autoDetectNewDomains || true,
                watchIntervalMs: props.watchIntervalMs || 5000,

                // Timing controls for layout shift prevention
                aggressiveRestore: props.aggressiveRestore !== false, // Default: true
                restoreDelay: props.restoreDelay || 0,
                priorityDomains: props.priorityDomains || [], // Restore these first
                earlyRestoreTimeout: props.earlyRestoreTimeout || 50,

                // Granular domain timing
                domainRestoreConfig: props.domainRestoreConfig || {},

                // Save timing controls
                immediateSave: props.immediateSave || [], // Save changes immediately
                criticalSave: props.criticalSave || [], // Save with shorter debounce
                criticalDebounceMs: props.criticalDebounceMs || 200,

                // User-specific domains (requires authentication)
                userSpecificDomains: props.userSpecificDomains || [],
                userIdPath: props.userIdPath || 'auth.user.id', // Path to user ID in state
                requireAuth: props.requireAuth || false // Whether user-specific domains require auth
            };

            // Internal state
            let saveTimers = new Map();
            let isRestoring = false;
            let domainSubscriptions = new Map();
            let domainWatcher = null;
            let restoreQueue = [];
            let isProcessingRestoreQueue = false;

            return {
                hooks: {
                    onRegister: () => {
                        console.log('💾 StatePersistenceManager initializing with timing controls...');

                        // Initialize persistence state - DIRECT INJECTION
                        if (context.juris && context.juris.stateManager && context.juris.stateManager.state) {
                            context.juris.stateManager.state.persistence = {
                                isEnabled: true,
                                lastSave: null,
                                lastRestore: null,
                                errors: [],
                                stats: {
                                    domainsTracked: 0,
                                    totalSaves: 0,
                                    totalRestores: 0,
                                    priorityRestores: 0,
                                    delayedRestores: 0
                                }
                            };
                        } else {
                            // Fallback if direct access not available
                            setState('persistence.isEnabled', true);
                            setState('persistence.lastSave', null);
                            setState('persistence.lastRestore', null);
                            setState('persistence.errors', []);
                            setState('persistence.stats', {
                                domainsTracked: 0,
                                totalSaves: 0,
                                totalRestores: 0,
                                priorityRestores: 0,
                                delayedRestores: 0
                            });
                        }

                        // Restore state with timing controls
                        if (config.aggressiveRestore) {
                            restoreAllDomainsWithTiming();
                        } else {
                            setTimeout(() => restoreAllDomainsWithTiming(), config.restoreDelay);
                        }

                        // Setup monitoring after early restore
                        setTimeout(() => {
                            setupDomainMonitoring();

                            if (config.autoDetectNewDomains) {
                                setupDomainWatcher();
                            }
                        }, Math.max(config.earlyRestoreTimeout, 100));

                        // Setup cross-tab sync
                        window.addEventListener('storage', handleStorageEvent);
                        window.addEventListener('beforeunload', saveAllTrackedDomains);

                        console.log('✅ StatePersistenceManager ready with timing controls');
                    },

                    onUnregister: () => {
                        console.log('💾 StatePersistenceManager cleanup');

                        // Save all before cleanup
                        saveAllTrackedDomains();

                        // Clear all timers
                        saveTimers.forEach(timer => clearTimeout(timer));
                        saveTimers.clear();

                        if (domainWatcher) {
                            clearInterval(domainWatcher);
                            domainWatcher = null;
                        }

                        // Unsubscribe from all domains
                        domainSubscriptions.forEach(unsubscribe => unsubscribe());
                        domainSubscriptions.clear();

                        // Remove storage listener
                        window.removeEventListener('storage', handleStorageEvent);
                        window.removeEventListener('beforeunload', saveAllTrackedDomains);

                        console.log('✅ StatePersistenceManager cleaned up');
                    }
                },

                api: {
                    saveDomain: (domain, immediate = false) => saveDomain(domain, immediate),
                    saveAllDomains: () => saveAllTrackedDomains(),
                    restoreDomain: (domain) => restoreDomain(domain),
                    restoreAllDomains: () => restoreAllDomainsWithTiming(),
                    addDomain: (domain) => addDomainTracking(domain),
                    removeDomain: (domain) => removeDomainTracking(domain),
                    clearDomain: (domain) => clearDomainStorage(domain),
                    clearAllStorage: () => clearAllStorage(),
                    getStorageStats: () => getStorageStats(),
                    getTrackedDomains: () => Array.from(domainSubscriptions.keys()),
                    exportState: () => exportState(),
                    importState: (data) => importState(data),
                    refreshDomainDetection: () => setupDomainMonitoring(),
                    forceImmediateSave: (domain) => saveDomain(domain, true),
                    restorePriorityDomains: () => restorePriorityDomains(),
                    getRestoreQueue: () => [...restoreQueue],
                    updateTimingConfig: (newConfig) => Object.assign(config, newConfig),
                    getConfig: () => ({ ...config }) // Get current configuration
                }
            };

            // Enhanced restore with timing controls
            function restoreAllDomainsWithTiming() {
                log('📂 Starting timed restore sequence...');

                // Get all stored domains by scanning localStorage
                const storedDomains = [];
                const keyPrefix = config.keyPrefix;

                for (let i = 0; i < localStorage.length; i++) {
                    const key = localStorage.key(i);
                    if (key && key.startsWith(keyPrefix)) {
                        // Extract domain from key
                        let remainder = key.substring(keyPrefix.length);

                        // Split by underscore and take first part as domain
                        let domain = remainder.split('_')[0];

                        // Only include if it's a valid domain and not already included
                        if (domain && !storedDomains.includes(domain)) {
                            storedDomains.push(domain);
                        }
                    }
                }

                log(`📂 Found stored domains: [${storedDomains.join(', ')}]`);

                if (storedDomains.length === 0) {
                    log('📂 No stored domains found');
                    // DIRECT INJECTION for lastRestore
                    if (context.juris && context.juris.stateManager && context.juris.stateManager.state && context.juris.stateManager.state.persistence) {
                        context.juris.stateManager.state.persistence.lastRestore = Date.now();
                    }
                    return { restored: [], failed: [] };
                }

                // Sort domains by priority and timing configuration
                const sortedDomains = storedDomains.sort((a, b) => {
                    const configA = config.domainRestoreConfig[a] || { priority: 999, delay: 0 };
                    const configB = config.domainRestoreConfig[b] || { priority: 999, delay: 0 };

                    if (configA.priority !== configB.priority) {
                        return configA.priority - configB.priority;
                    }
                    return configA.delay - configB.delay;
                });

                log(`📂 Restore order: [${sortedDomains.join(', ')}]`);

                // Process domains with their configured timing
                let cumulativeDelay = 0;
                const results = { restored: [], failed: [], priority: [], delayed: [] };

                sortedDomains.forEach((domain, index) => {
                    const domainConfig = config.domainRestoreConfig[domain] || { priority: 999, delay: 0, aggressive: false };

                    if (domainConfig.aggressive || config.priorityDomains.includes(domain)) {
                        // Immediate restore for aggressive/priority domains
                        if (restoreDomain(domain)) {
                            results.restored.push(domain);
                            results.priority.push(domain);

                            // DIRECT INJECTION for stats
                            if (context.juris && context.juris.stateManager && context.juris.stateManager.state && context.juris.stateManager.state.persistence) {
                                context.juris.stateManager.state.persistence.stats.priorityRestores =
                                    (context.juris.stateManager.state.persistence.stats.priorityRestores || 0) + 1;
                            }
                        } else {
                            results.failed.push(domain);
                        }

                        log(`⚡ Priority restore completed for ${domain} immediately`);

                    } else {
                        // Delayed restore for non-critical domains
                        const restoreDelay = cumulativeDelay + domainConfig.delay;

                        setTimeout(() => {
                            if (restoreDomain(domain)) {
                                results.restored.push(domain);
                                results.delayed.push(domain);

                                // DIRECT INJECTION for stats
                                if (context.juris && context.juris.stateManager && context.juris.stateManager.state && context.juris.stateManager.state.persistence) {
                                    context.juris.stateManager.state.persistence.stats.delayedRestores =
                                        (context.juris.stateManager.state.persistence.stats.delayedRestores || 0) + 1;
                                }
                            } else {
                                results.failed.push(domain);
                            }
                        }, restoreDelay);

                        log(`⏳ Delayed restore scheduled for ${domain} at ${restoreDelay}ms`);
                        cumulativeDelay += domainConfig.delay;
                    }
                });

                // Update final restore timestamp
                const finalDelay = Math.max(cumulativeDelay, config.earlyRestoreTimeout);
                setTimeout(() => {
                    // DIRECT INJECTION for lastRestore
                    if (context.juris && context.juris.stateManager && context.juris.stateManager.state && context.juris.stateManager.state.persistence) {
                        context.juris.stateManager.state.persistence.lastRestore = Date.now();
                    }
                    log(`📂 Restore sequence completed. Priority: ${results.priority.length}, Delayed: ${results.delayed.length}, Failed: ${results.failed.length}`);
                }, finalDelay);

                return results;
            }

            function restorePriorityDomains() {
                log('⚡ Restoring priority domains only...');

                const priorityResults = { restored: [], failed: [] };

                config.priorityDomains.forEach(domain => {
                    if (restoreDomain(domain)) {
                        priorityResults.restored.push(domain);
                    } else {
                        priorityResults.failed.push(domain);
                    }
                });

                log(`⚡ Priority restore completed: [${priorityResults.restored.join(', ')}]`);
                return priorityResults;
            }

            function setupDomainMonitoring() {
                log('🔍 Setting up domain monitoring...');

                const allState = context.juris.stateManager.state;
                const availableDomains = Object.keys(allState);
                log(`🔍 Available domains in state:`, availableDomains);

                // Clear existing subscriptions
                domainSubscriptions.forEach(unsubscribe => unsubscribe());
                domainSubscriptions.clear();

                // Determine which domains to track
                let domainsToTrack = [];

                if (config.domains.length > 0) {
                    domainsToTrack = config.domains.filter(domain => {
                        const exists = availableDomains.includes(domain);
                        if (!exists) {
                            log(`⚠️ Configured domain '${domain}' not found in state`);
                        }
                        return exists && !config.excludeDomains.includes(domain);
                    });
                } else {
                    domainsToTrack = availableDomains.filter(domain =>
                        !config.excludeDomains.includes(domain)
                    );
                }

                log(`📊 Domains to track: [${domainsToTrack.join(', ')}]`);

                // Track each domain
                domainsToTrack.forEach(domain => {
                    addDomainTracking(domain);
                });

                // Update stats - DIRECT INJECTION
                if (context.juris && context.juris.stateManager && context.juris.stateManager.state && context.juris.stateManager.state.persistence) {
                    context.juris.stateManager.state.persistence.stats.domainsTracked = domainSubscriptions.size;
                }

                log(`✅ Now tracking ${domainSubscriptions.size} domains: [${Array.from(domainSubscriptions.keys()).join(', ')}]`);
            }

            function setupDomainWatcher() {
                domainWatcher = setInterval(() => {
                    const currentDomains = Object.keys(context.juris.stateManager.state);
                    const trackedDomains = Array.from(domainSubscriptions.keys());

                    const newDomains = currentDomains.filter(domain =>
                        !trackedDomains.includes(domain) &&
                        !config.excludeDomains.includes(domain) &&
                        (config.domains.length === 0 || config.domains.includes(domain))
                    );

                    if (newDomains.length > 0) {
                        log(`🆕 Detected new domains: [${newDomains.join(', ')}]`);
                        newDomains.forEach(domain => addDomainTracking(domain));

                        // DIRECT INJECTION for stats
                        if (context.juris && context.juris.stateManager && context.juris.stateManager.state && context.juris.stateManager.state.persistence) {
                            context.juris.stateManager.state.persistence.stats.domainsTracked = domainSubscriptions.size;
                        }
                    }
                }, config.watchIntervalMs);

                log(`👀 Domain watcher started (checking every ${config.watchIntervalMs}ms)`);
            }

            function addDomainTracking(domain) {
                if (domainSubscriptions.has(domain)) {
                    log(`⚠️ Domain ${domain} already being tracked`);
                    return false;
                }

                try {
                    const testValue = getState(domain);
                    log(`🔍 Testing domain '${domain}': ${testValue !== undefined ? 'exists' : 'undefined'}`);

                    // Use internal subscription
                    const unsubscribe = context.juris.stateManager.subscribeInternal(domain, () => {
                        if (!isRestoring) {
                            const currentValue = getState(domain);
                            log(`🔄 State change detected in domain: ${domain}`, { currentValue });
                            debouncedSave(domain, currentValue);
                        }
                    });

                    domainSubscriptions.set(domain, unsubscribe);
                    log(`➕ Added tracking for domain: ${domain}`);
                    return true;

                } catch (error) {
                    logError(`Failed to add tracking for domain ${domain}:`, error);
                    return false;
                }
            }

            function removeDomainTracking(domain) {
                const unsubscribe = domainSubscriptions.get(domain);
                if (unsubscribe) {
                    unsubscribe();
                    domainSubscriptions.delete(domain);
                    log(`➖ Removed tracking for domain: ${domain}`);
                    return true;
                }

                log(`⚠️ Domain ${domain} was not being tracked`);
                return false;
            }

            function debouncedSave(domain, value) {
                // Clear existing timer
                if (saveTimers.has(domain)) {
                    clearTimeout(saveTimers.get(domain));
                }

                // Determine save timing based on domain configuration
                let saveDelay = config.debounceMs;

                if (config.immediateSave.includes(domain)) {
                    // Immediate save for critical domains
                    saveDomain(domain, true);
                    return;
                } else if (config.criticalSave.includes(domain)) {
                    // Faster save for critical domains
                    saveDelay = config.criticalDebounceMs;
                }

                const timer = setTimeout(() => {
                    saveDomain(domain, false);
                    saveTimers.delete(domain);
                }, saveDelay);

                saveTimers.set(domain, timer);

                const saveType = config.criticalSave.includes(domain) ? 'CRITICAL' : 'NORMAL';
                log(`⏰ ${saveType} save scheduled for domain: ${domain} in ${saveDelay}ms`);
            }

            function saveDomain(domain, immediate = false) {
                try {
                    const value = getState(domain);
                    if (value === undefined || value === null) {
                        log(`⚠️ Skipping save for undefined domain: ${domain}`);
                        return false;
                    }

                    const dataPackage = {
                        value: value,
                        timestamp: Date.now(),
                        domain: domain,
                        immediate: immediate
                    };

                    // Check if domain requires user-specific storage
                    const isUserSpecific = config.userSpecificDomains.includes(domain);
                    const currentUserId = getUserId();

                    if (isUserSpecific && config.requireAuth && !currentUserId) {
                        log(`⚠️ Skipping save for user-specific domain '${domain}' - no authenticated user`);
                        return false;
                    }

                    // Build storage key
                    let storageKey = config.keyPrefix + domain;
                    if (isUserSpecific && currentUserId) {
                        storageKey = `${storageKey}_${currentUserId}`;
                    }

                    localStorage.setItem(storageKey, JSON.stringify(dataPackage));

                    // Update statistics - DIRECT INJECTION
                    if (context.juris && context.juris.stateManager && context.juris.stateManager.state && context.juris.stateManager.state.persistence) {
                        const stats = context.juris.stateManager.state.persistence.stats;
                        stats.totalSaves = (stats.totalSaves || 0) + 1;

                        context.juris.stateManager.state.persistence.lastSave = {
                            domain,
                            timestamp: Date.now(),
                            size: JSON.stringify(dataPackage).length,
                            immediate
                        };
                    }

                    const saveType = immediate ? 'IMMEDIATE' : 'DEBOUNCED';
                    log(`💾 ${saveType} saved domain: ${domain} (${JSON.stringify(dataPackage).length} bytes) key: ${storageKey}`);
                    return true;

                } catch (error) {
                    logError(`Failed to save domain ${domain}:`, error);
                    return false;
                }
            }

            function restoreDomain(domain) {
                try {
                    const isUserSpecific = config.userSpecificDomains.includes(domain);
                    const currentUserId = getUserId();

                    // Build storage key
                    let storageKey = config.keyPrefix + domain;
                    if (isUserSpecific && currentUserId) {
                        storageKey = `${storageKey}_${currentUserId}`;
                    }

                    const stored = localStorage.getItem(storageKey);

                    if (!stored) {
                        log(`📂 No stored data for domain: ${domain} (key: ${storageKey})`);
                        return false;
                    }

                    const data = JSON.parse(stored);

                    // DIRECT INJECTION - Restore directly to state without triggering subscriptions
                    isRestoring = true;

                    // Direct injection into the state manager's internal state
                    if (context.juris && context.juris.stateManager && context.juris.stateManager.state) {
                        context.juris.stateManager.state[domain] = data.value;
                        log(`📂 DIRECT INJECT: ${domain} directly injected into state`);
                    } else {
                        // Fallback to setState if direct access not available
                        setState(domain, data.value);
                        log(`📂 FALLBACK: ${domain} restored via setState`);
                    }

                    isRestoring = false;

                    // Update statistics - DIRECT INJECTION
                    if (context.juris && context.juris.stateManager && context.juris.stateManager.state && context.juris.stateManager.state.persistence) {
                        const stats = context.juris.stateManager.state.persistence.stats;
                        stats.totalRestores = (stats.totalRestores || 0) + 1;

                        context.juris.stateManager.state.persistence.lastRestore = {
                            domain,
                            timestamp: Date.now(),
                            dataTimestamp: data.timestamp
                        };
                    }

                    log(`📂 Restored domain: ${domain} (saved ${new Date(data.timestamp).toLocaleString()})`);
                    return true;

                } catch (error) {
                    logError(`Failed to restore domain ${domain}:`, error);
                    return false;
                }
            }

            function saveAllTrackedDomains() {
                log('💾 Saving all tracked domains...');

                const savedDomains = [];
                const failedDomains = [];

                domainSubscriptions.forEach((unsubscribe, domain) => {
                    if (saveDomain(domain, true)) {
                        savedDomains.push(domain);
                    } else {
                        failedDomains.push(domain);
                    }
                });

                log(`💾 Saved ${savedDomains.length} domains: [${savedDomains.join(', ')}]`);

                if (failedDomains.length > 0) {
                    logError(`❌ Failed to save ${failedDomains.length} domains: [${failedDomains.join(', ')}]`);
                }

                return { saved: savedDomains, failed: failedDomains };
            }

            function handleStorageEvent(event) {
                if (!event.key || !event.key.startsWith(config.keyPrefix)) {
                    return;
                }

                // Extract domain from key
                let remainder = event.key.substring(config.keyPrefix.length);
                let domain = remainder.split('_')[0];

                if (domainSubscriptions.has(domain)) {
                    log(`🔄 Storage changed externally for domain: ${domain}`);

                    if (event.newValue) {
                        // Parse and directly inject the new value
                        try {
                            const data = JSON.parse(event.newValue);
                            isRestoring = true;

                            // DIRECT INJECTION for cross-tab sync
                            if (context.juris && context.juris.stateManager && context.juris.stateManager.state) {
                                context.juris.stateManager.state[domain] = data.value;
                                log(`🔄 DIRECT INJECT: ${domain} synced from external tab`);
                            } else {
                                setState(domain, data.value);
                                log(`🔄 FALLBACK: ${domain} synced via setState`);
                            }

                            isRestoring = false;
                        } catch (error) {
                            logError(`Failed to parse external change for ${domain}:`, error);
                        }
                    } else {
                        // Value was deleted externally
                        isRestoring = true;
                        if (context.juris && context.juris.stateManager && context.juris.stateManager.state) {
                            delete context.juris.stateManager.state[domain];
                            log(`🔄 DIRECT DELETE: ${domain} removed from state`);
                        } else {
                            setState(domain, undefined);
                            log(`🔄 FALLBACK DELETE: ${domain} removed via setState`);
                        }
                        isRestoring = false;
                    }
                }
            }

            function clearDomainStorage(domain) {
                try {
                    const isUserSpecific = config.userSpecificDomains.includes(domain);
                    const currentUserId = getUserId();

                    let storageKey = config.keyPrefix + domain;
                    if (isUserSpecific && currentUserId) {
                        storageKey = `${storageKey}_${currentUserId}`;
                    }

                    localStorage.removeItem(storageKey);
                    log(`🗑️ Cleared storage for domain: ${domain} (key: ${storageKey})`);
                    return true;
                } catch (error) {
                    logError(`Failed to clear storage for domain ${domain}:`, error);
                    return false;
                }
            }

            function clearAllStorage() {
                try {
                    const keysToRemove = [];

                    for (let i = 0; i < localStorage.length; i++) {
                        const key = localStorage.key(i);
                        if (key && key.startsWith(config.keyPrefix)) {
                            keysToRemove.push(key);
                        }
                    }

                    keysToRemove.forEach(key => localStorage.removeItem(key));

                    log(`🗑️ Cleared ${keysToRemove.length} storage entries`);
                    return true;
                } catch (error) {
                    logError('Failed to clear all storage:', error);
                    return false;
                }
            }

            function getStorageStats() {
                let totalSize = 0;
                let entryCount = 0;
                const domains = [];

                for (let i = 0; i < localStorage.length; i++) {
                    const key = localStorage.key(i);
                    if (key && key.startsWith(config.keyPrefix)) {
                        const value = localStorage.getItem(key);
                        totalSize += key.length + (value ? value.length : 0);
                        entryCount++;

                        // Extract domain from key
                        let remainder = key.substring(config.keyPrefix.length);
                        let domain = remainder.split('_')[0];
                        domains.push(domain);
                    }
                }

                return {
                    totalSize,
                    entryCount,
                    domains: [...new Set(domains)], // Remove duplicates
                    trackedDomains: Array.from(domainSubscriptions.keys()),
                    config: {
                        aggressiveRestore: config.aggressiveRestore,
                        priorityDomains: config.priorityDomains,
                        immediateSave: config.immediateSave,
                        criticalSave: config.criticalSave,
                        keyPrefix: config.keyPrefix,
                        userSpecificDomains: config.userSpecificDomains
                    }
                };
            }

            function exportState() {
                const exportData = {
                    timestamp: Date.now(),
                    domains: {}
                };

                domainSubscriptions.forEach((unsubscribe, domain) => {
                    exportData.domains[domain] = getState(domain);
                });

                return exportData;
            }

            function importState(data) {
                try {
                    if (!data.domains) {
                        throw new Error('Invalid import data format');
                    }

                    isRestoring = true;

                    Object.entries(data.domains).forEach(([domain, value]) => {
                        // DIRECT INJECTION for import as well
                        if (context.juris && context.juris.stateManager && context.juris.stateManager.state) {
                            context.juris.stateManager.state[domain] = value;
                            log(`📥 DIRECT INJECT: ${domain} imported directly into state`);
                        } else {
                            setState(domain, value);
                            log(`📥 FALLBACK: ${domain} imported via setState`);
                        }
                        saveDomain(domain, true);
                    });

                    isRestoring = false;

                    log(`📥 Imported ${Object.keys(data.domains).length} domains`);
                    return true;
                } catch (error) {
                    isRestoring = false;
                    logError('Import failed:', error);
                    return false;
                }
            }

            // Helper function to get user ID from configurable path
            function getUserId() {
                try {
                    const pathParts = config.userIdPath.split('.');
                    let value = context.juris.stateManager.state;

                    for (const part of pathParts) {
                        if (value && typeof value === 'object') {
                            value = value[part];
                        } else {
                            return null;
                        }
                    }

                    return value;
                } catch (error) {
                    log(`⚠️ Failed to get user ID from path: ${config.userIdPath}`, error);
                    return null;
                }
            }

            function log(message, ...args) {
                if (config.debug) {
                    console.log(`💾 [StatePersistence] ${message}`, ...args);
                }
            }

            function logError(message, error = null) {
                console.error(`💾 [StatePersistence] ${message}`, error);

                // DIRECT INJECTION for errors
                if (context.juris && context.juris.stateManager && context.juris.stateManager.state && context.juris.stateManager.state.persistence) {
                    const errors = context.juris.stateManager.state.persistence.errors;
                    errors.push({
                        message,
                        error: error ? error.message : null,
                        timestamp: Date.now()
                    });

                    if (errors.length > 10) {
                        errors.splice(0, errors.length - 10);
                    }
                }
            }
        };

        // URL State Sync with Route Guards
        const UrlStateSync = (props, context) => {
            const { getState, setState } = context;

            const routeGuards = {
                '/': ['authenticated'],
                '/lists': ['authenticated'],
                '/profile': ['authenticated'],
                '/settings': ['authenticated']
            };

            return {
                hooks: {
                    onRegister: () => {
                        console.log('🧭 UrlStateSync initializing...');
                        handleUrlChange();
                        window.addEventListener('hashchange', handleUrlChange);
                        window.addEventListener('popstate', handleUrlChange);
                    }
                }
            };

            async function handleUrlChange() {
                const hash = window.location.hash.substring(1) || '/';
                const segments = parseSegments(hash);

                // Check route guards
                const guardResult = await checkRouteAccess(hash);

                if (guardResult.allowed) {
                    setState('url.path', hash);
                    setState('url.segments', segments);
                    console.log('🧭 URL updated:', hash);
                } else {
                    console.log('🚫 Route access denied, redirecting to:', guardResult.redirect);
                    window.location.hash = guardResult.redirect;
                }
            }

            async function checkRouteAccess(path) {
                const guards = getRouteGuards(path);
                const isAuthenticated = getState('auth.isLoggedIn', false);

                if (guards.includes('authenticated') && !isAuthenticated) {
                    return { allowed: false, redirect: '/login' };
                }

                return { allowed: true };
            }

            function getRouteGuards(path) {
                if (routeGuards[path]) return routeGuards[path];

                const segments = path.split('/').filter(Boolean);
                for (let i = segments.length - 1; i > 0; i--) {
                    const parentPath = '/' + segments.slice(0, i).join('/');
                    if (routeGuards[parentPath]) return routeGuards[parentPath];
                }

                return [];
            }

            function parseSegments(path) {
                const parts = path.split('/').filter(Boolean);
                return {
                    full: path,
                    parts: parts,
                    base: parts[0] || '',
                    sub: parts[1] || '',
                    id: parts[2] || ''
                };
            }
        };

        // Authentication Manager
        const AuthManager = (props, context) => {
            const { getState, setState } = context;

            return {
                hooks: {
                    onRegister: () => {
                        console.log('🔐 AuthManager initializing...');
                        checkExistingAuth();
                    }
                },

                api: {
                    login: async (email, password) => {
                        setState('auth.loading', true);
                        setState('auth.error', null);

                        try {
                            await new Promise(resolve => setTimeout(resolve, 1000));

                            const users = getState('storage.users', []);
                            const user = users.find(u => u.email === email && u.password === hashPassword(password));

                            if (!user) {
                                throw new Error('Email ou mot de passe invalide');
                            }

                            const token = generateToken();

                            setState('auth.user', user);
                            setState('auth.token', token);
                            setState('auth.isLoggedIn', true);

                            // Store in localStorage
                            localStorage.setItem('todo_auth_token', token);
                            localStorage.setItem('todo_auth_user', JSON.stringify(user));

                            console.log('✅ Login successful');

                            // Trigger user-specific data restore after login
                            setTimeout(() => {
                                context.headless.StatePersistenceManager.restoreAllDomains();
                            }, 100);

                            return { success: true };

                        } catch (error) {
                            setState('auth.error', error.message);
                            console.error('❌ Login failed:', error.message);
                            return { success: false, error: error.message };
                        } finally {
                            setState('auth.loading', false);
                        }
                    },

                    register: async (email, password, name) => {
                        setState('auth.loading', true);
                        setState('auth.error', null);

                        try {
                            await new Promise(resolve => setTimeout(resolve, 1000));

                            const users = getState('storage.users', []);

                            if (users.find(u => u.email === email)) {
                                throw new Error('Cet email existe déjà');
                            }

                            const newUser = {
                                id: Date.now().toString(),
                                email,
                                password: hashPassword(password),
                                name,
                                createdAt: new Date().toISOString()
                            };

                            const updatedUsers = [...users, newUser];
                            setState('storage.users', updatedUsers);

                            console.log('✅ Registration successful');
                            return { success: true };

                        } catch (error) {
                            setState('auth.error', error.message);
                            console.error('❌ Registration failed:', error.message);
                            return { success: false, error: error.message };
                        } finally {
                            setState('auth.loading', false);
                        }
                    },

                    logout: () => {
                        // Save current state before logout
                        context.headless.StatePersistenceManager.saveAllDomains();

                        setState('auth.user', null);
                        setState('auth.token', null);
                        setState('auth.isLoggedIn', false);

                        // Clear user-specific state
                        setState('ui.selectedListId', null);
                        setState('todos.lists', []);
                        setState('todos.items', {});
                        setState('todos.filter', 'all');

                        localStorage.removeItem('todo_auth_token');
                        localStorage.removeItem('todo_auth_user');

                        window.location.hash = '/login';
                        console.log('👋 Logged out');
                    }
                }
            };

            function checkExistingAuth() {
                const token = localStorage.getItem('todo_auth_token');
                const userStr = localStorage.getItem('todo_auth_user');

                if (token && userStr) {
                    try {
                        const user = JSON.parse(userStr);
                        setState('auth.user', user);
                        setState('auth.token', token);
                        setState('auth.isLoggedIn', true);
                        console.log('🔄 Restored authentication');

                        // Trigger user-specific data restore after auth restore
                        setTimeout(() => {
                            context.headless.StatePersistenceManager.restoreAllDomains();
                        }, 100);
                    } catch (error) {
                        console.error('❌ Failed to restore auth:', error);
                        localStorage.removeItem('todo_auth_token');
                        localStorage.removeItem('todo_auth_user');
                    }
                }
            }

            function hashPassword(password) {
                return CryptoJS.SHA256(password).toString();
            }

            function generateToken() {
                return CryptoJS.lib.WordArray.random(32).toString();
            }
        };

        // Enhanced Todo Manager
        const TodoManager = (props, context) => {
            const { getState, setState, subscribe } = context;

            return {
                hooks: {
                    onRegister: () => {
                        console.log('📝 TodoManager initializing...');
                        loadUserTodos();

                        // Subscribe to auth changes
                        subscribe('auth.user', (user) => {
                            if (user) {
                                loadUserTodos();
                            } else {
                                setState('todos', { lists: [], items: {}, filters: {} });
                                setState('ui.selectedListId', null);
                            }
                        });
                    }
                },

                api: {
                    createList: (name) => {
                        const user = getState('auth.user');
                        if (!user) return;

                        const newList = {
                            id: Date.now().toString(),
                            name,
                            userId: user.id,
                            createdAt: new Date().toISOString()
                        };

                        const lists = getState('todos.lists', []);
                        setState('todos.lists', [...lists, newList]);

                        // Auto-select the new list
                        setState('ui.selectedListId', newList.id);

                        saveTodos();
                        console.log('✅ List created:', name);
                    },

                    deleteList: (listId) => {
                        const lists = getState('todos.lists', []);
                        const items = getState('todos.items', {});

                        // Remove list
                        const updatedLists = lists.filter(list => list.id !== listId);
                        setState('todos.lists', updatedLists);

                        // Remove all items in this list
                        const updatedItems = { ...items };
                        delete updatedItems[listId];
                        setState('todos.items', updatedItems);

                        // Clear selection if this list was selected
                        const selectedId = getState('ui.selectedListId');
                        if (selectedId === listId) {
                            // Auto-select the first remaining list or null
                            const newSelectedId = updatedLists.length > 0 ? updatedLists[0].id : null;
                            setState('ui.selectedListId', newSelectedId);
                        }

                        saveTodos();
                        console.log('🗑️ List deleted:', listId);
                    },

                    createTodo: (listId, text) => {
                        const newTodo = {
                            id: Date.now().toString(),
                            text,
                            completed: false,
                            createdAt: new Date().toISOString()
                        };

                        const items = getState('todos.items', {});
                        const listItems = items[listId] || [];

                        setState(`todos.items.${listId}`, [...listItems, newTodo]);
                        saveTodos();
                        console.log('✅ Todo created:', text);
                    },

                    toggleTodo: (listId, todoId) => {
                        const items = getState(`todos.items.${listId}`, []);
                        const updatedItems = items.map(item =>
                            item.id === todoId ? { ...item, completed: !item.completed } : item
                        );

                        setState(`todos.items.${listId}`, updatedItems);
                        saveTodos();
                    },

                    deleteTodo: (listId, todoId) => {
                        const items = getState(`todos.items.${listId}`, []);
                        const updatedItems = items.filter(item => item.id !== todoId);

                        setState(`todos.items.${listId}`, updatedItems);
                        saveTodos();
                    },

                    setFilter: (filter) => {
                        setState('todos.filter', filter);
                    },

                    selectList: (listId) => {
                        setState('ui.selectedListId', listId);
                        console.log('📋 Selected list:', listId);
                    }
                }
            };

            function loadUserTodos() {
                const user = getState('auth.user');
                if (!user) return;

                const stored = localStorage.getItem(`todo_data_${user.id}`);
                if (stored) {
                    try {
                        const data = JSON.parse(stored);
                        setState('todos.lists', data.lists || []);
                        setState('todos.items', data.items || {});
                        console.log('📚 Todos loaded for user:', user.email);
                    } catch (error) {
                        console.error('❌ Failed to load todos:', error);
                    }
                }
            }

            function saveTodos() {
                const user = getState('auth.user');
                if (!user) return;

                const data = {
                    lists: getState('todos.lists', []),
                    items: getState('todos.items', {}),
                    lastSaved: new Date().toISOString()
                };

                localStorage.setItem(`todo_data_${user.id}`, JSON.stringify(data));
                console.log('💾 Todos saved');
            }
        };

        // ==================== UI COMPONENTS (with French translations) ====================

        // App Layout
        const AppLayout = (props, context) => {
            const { getState } = context;

            return {
                render: () => ({
                    div: {
                        className: 'app-container',
                        children: () => {
                            const isLoggedIn = getState('auth.isLoggedIn', false);
                            const currentPath = getState('url.path', '/');

                            if (!isLoggedIn && !['/login', '/register'].includes(currentPath)) {
                                return [{ AuthLayout: {} }];
                            }

                            if (['/login', '/register'].includes(currentPath)) {
                                return [{ AuthLayout: {} }];
                            }

                            return [
                                { AppHeader: {} },
                                { MainContent: {} }
                            ];
                        }
                    }
                })
            };
        };

        // App Header
        const AppHeader = (props, context) => {
            const { getState } = context;

            return {
                render: () => ({
                    header: {
                        className: 'header',
                        children: [{
                            div: {
                                className: 'header-content',
                                children: [
                                    {
                                        a: {
                                            className: 'logo',
                                            href: '#/',
                                            text: '📝 Todo App ',
                                            onclick: (e) => {
                                                e.preventDefault();
                                                window.location.hash = '/';
                                            }
                                        }
                                    },
                                    {
                                        nav: {
                                            className: 'nav',
                                            children: [
                                                {
                                                    a: {
                                                        className: () => {
                                                            const path = getState('url.path', '/');
                                                            return path === '/' ? 'nav-link active' : 'nav-link';
                                                        },
                                                        href: '#/',
                                                        text: 'Tableau de bord',
                                                        onclick: (e) => {
                                                            e.preventDefault();
                                                            window.location.hash = '/';
                                                        }
                                                    }
                                                },
                                                {
                                                    a: {
                                                        className: () => {
                                                            const path = getState('url.path', '/');
                                                            return path === '/profile' ? 'nav-link active' : 'nav-link';
                                                        },
                                                        href: '#/profile',
                                                        text: 'Profil',
                                                        onclick: (e) => {
                                                            e.preventDefault();
                                                            window.location.hash = '/profile';
                                                        }
                                                    }
                                                },
                                                {
                                                    button: {
                                                        className: 'btn btn-secondary btn-small',
                                                        text: 'Déconnexion',
                                                        onclick: () => context.headless.AuthManager.logout()
                                                    }
                                                }
                                            ]
                                        }
                                    }
                                ]
                            }
                        }]
                    }
                })
            };
        };

        // Auth Layout
        const AuthLayout = (props, context) => {
            const { getState } = context;

            return {
                render: () => ({
                    div: {
                        className: 'app-container',
                        children: [{
                            main: {
                                className: 'main-content',
                                children: () => {
                                    const path = getState('url.path', '/');

                                    if (path === '/register') {
                                        return [{ RegisterForm: {} }];
                                    }

                                    return [{ LoginForm: {} }];
                                }
                            }
                        }]
                    }
                })
            };
        };

        // Login Form
        const LoginForm = (props, context) => {
            const { getState, setState, headless } = context;

            return {
                render: () => ({
                    div: {
                        className: 'form-container fade-in',
                        children: [
                            {
                                h2: {
                                    className: 'form-title',
                                    text: 'Bon retour !'
                                }
                            },
                            {
                                form: {
                                    onsubmit: async (e) => {
                                        e.preventDefault();
                                        const email = getState('auth.form.email', '');
                                        const password = getState('auth.form.password', '');

                                        const result = await headless.AuthManager.login(email, password);
                                        if (result.success) {
                                            window.location.hash = '/';
                                        }
                                    },
                                    children: [
                                        {
                                            div: {
                                                className: 'form-group',
                                                children: [
                                                    {
                                                        label: {
                                                            className: 'form-label',
                                                            text: 'Email'
                                                        }
                                                    },
                                                    {
                                                        input: {
                                                            type: 'email',
                                                            className: 'form-input',
                                                            placeholder: 'Saisissez votre email',
                                                            value: () => getState('auth.form.email', ''),
                                                            oninput: (e) => setState('auth.form.email', e.target.value),
                                                            required: true
                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            div: {
                                                className: 'form-group',
                                                children: [
                                                    {
                                                        label: {
                                                            className: 'form-label',
                                                            text: 'Mot de passe'
                                                        }
                                                    },
                                                    {
                                                        input: {
                                                            type: 'password',
                                                            className: 'form-input',
                                                            placeholder: 'Saisissez votre mot de passe',
                                                            value: () => getState('auth.form.password', ''),
                                                            oninput: (e) => setState('auth.form.password', e.target.value),
                                                            required: true
                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            div: {
                                                className: () => getState('auth.error') ? 'form-error' : 'hidden',
                                                text: () => getState('auth.error', '')
                                            }
                                        },
                                        {
                                            button: {
                                                type: 'submit',
                                                className: 'btn btn-primary btn-full',
                                                disabled: () => getState('auth.loading', false),
                                                text: () => getState('auth.loading') ? 'Connexion...' : 'Se connecter'
                                            }
                                        },
                                        {
                                            div: {
                                                className: 'text-center mt-2',
                                                children: [
                                                    {
                                                        span: {
                                                            text: "Pas encore de compte ? "
                                                        }
                                                    },
                                                    {
                                                        a: {
                                                            href: '#/register',
                                                            text: 'Inscrivez-vous',
                                                            onclick: (e) => {
                                                                e.preventDefault();
                                                                window.location.hash = '/register';
                                                            }
                                                        }
                                                    }
                                                ]
                                            }
                                        }
                                    ]
                                }
                            }
                        ]
                    }
                })
            };
        };

        // Register Form
        const RegisterForm = (props, context) => {
            const { getState, setState, headless } = context;

            return {
                render: () => ({
                    div: {
                        className: 'form-container fade-in',
                        children: [
                            {
                                h2: {
                                    className: 'form-title',
                                    text: 'Créer un compte'
                                }
                            },
                            {
                                form: {
                                    onsubmit: async (e) => {
                                        e.preventDefault();
                                        const name = getState('auth.form.name', '');
                                        const email = getState('auth.form.email', '');
                                        const password = getState('auth.form.password', '');

                                        const result = await headless.AuthManager.register(email, password, name);
                                        if (result.success) {
                                            setState('auth.form', {});
                                            window.location.hash = '/login';
                                        }
                                    },
                                    children: [
                                        {
                                            div: {
                                                className: 'form-group',
                                                children: [
                                                    {
                                                        label: {
                                                            className: 'form-label',
                                                            text: 'Nom complet'
                                                        }
                                                    },
                                                    {
                                                        input: {
                                                            type: 'text',
                                                            className: 'form-input',
                                                            placeholder: 'Saisissez votre nom complet',
                                                            value: () => getState('auth.form.name', ''),
                                                            oninput: (e) => setState('auth.form.name', e.target.value),
                                                            required: true
                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            div: {
                                                className: 'form-group',
                                                children: [
                                                    {
                                                        label: {
                                                            className: 'form-label',
                                                            text: 'Email'
                                                        }
                                                    },
                                                    {
                                                        input: {
                                                            type: 'email',
                                                            className: 'form-input',
                                                            placeholder: 'Saisissez votre email',
                                                            value: () => getState('auth.form.email', ''),
                                                            oninput: (e) => setState('auth.form.email', e.target.value),
                                                            required: true
                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            div: {
                                                className: 'form-group',
                                                children: [
                                                    {
                                                        label: {
                                                            className: 'form-label',
                                                            text: 'Mot de passe'
                                                        }
                                                    },
                                                    {
                                                        input: {
                                                            type: 'password',
                                                            className: 'form-input',
                                                            placeholder: 'Créez un mot de passe',
                                                            value: () => getState('auth.form.password', ''),
                                                            oninput: (e) => setState('auth.form.password', e.target.value),
                                                            required: true
                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            div: {
                                                className: () => getState('auth.error') ? 'form-error' : 'hidden',
                                                text: () => getState('auth.error', '')
                                            }
                                        },
                                        {
                                            button: {
                                                type: 'submit',
                                                className: 'btn btn-primary btn-full',
                                                disabled: () => getState('auth.loading', false),
                                                text: () => getState('auth.loading') ? 'Création du compte...' : 'Créer un compte'
                                            }
                                        },
                                        {
                                            div: {
                                                className: 'text-center mt-2',
                                                children: [
                                                    {
                                                        span: {
                                                            text: "Vous avez déjà un compte ? "
                                                        }
                                                    },
                                                    {
                                                        a: {
                                                            href: '#/login',
                                                            text: 'Connectez-vous',
                                                            onclick: (e) => {
                                                                e.preventDefault();
                                                                window.location.hash = '/login';
                                                            }
                                                        }
                                                    }
                                                ]
                                            }
                                        }
                                    ]
                                }
                            }
                        ]
                    }
                })
            };
        };

        // Main Content
        const MainContent = (props, context) => {
            const { getState } = context;

            return {
                render: () => ({
                    main: {
                        className: 'main-content',
                        children: () => {
                            const segments = getState('url.segments', { base: '' });

                            switch (segments.base) {
                                case '':
                                    return [{ TodoDashboard: {} }];
                                case 'lists':
                                    if (segments.sub) {
                                        return [{ TodoListDetail: { listId: segments.sub } }];
                                    }
                                    return [{ TodoDashboard: {} }];
                                case 'profile':
                                    return [{ UserProfile: {} }];
                                case 'settings':
                                    return [{ AppSettings: {} }];
                                default:
                                    return [{ NotFound: {} }];
                            }
                        }
                    }
                })
            };
        };

        // Todo Dashboard
        const TodoDashboard = (props, context) => {
            const { getState, setState, headless } = context;

            return {
                render: () => ({
                    div: {
                        className: 'todo-dashboard fade-in',
                        children: [
                            {
                                div: {
                                    className: 'todo-lists',
                                    children: [
                                        {
                                            div: {
                                                className: 'section-title',
                                                text: 'Vos listes de tâches'
                                            }
                                        },
                                        {
                                            div: {
                                                className: 'todo-form',
                                                children: [{
                                                    form: {
                                                        onsubmit: (e) => {
                                                            e.preventDefault();
                                                            const name = getState('ui.newListName', '').trim();
                                                            if (name) {
                                                                headless.TodoManager.createList(name);
                                                                setState('ui.newListName', '');
                                                            }
                                                        },
                                                        children: [{
                                                            div: {
                                                                className: 'todo-input',

                                                                children: [
                                                                    {
                                                                        input: {
                                                                            type: 'text',
                                                                            style: { flex: '0.75' },
                                                                            className: 'form-input',
                                                                            placeholder: 'Saisir le nom de la liste',
                                                                            value: () => getState('ui.newListName', ''),
                                                                            oninput: (e) => setState('ui.newListName', e.target.value)
                                                                        }
                                                                    },
                                                                    {
                                                                        button: {
                                                                          style: { flex: 0.25 },
                                                                            type: 'submit',
                                                                            className: 'btn btn-primary',
                                                                            text: 'Ajouter'
                                                                        }
                                                                    }
                                                                ]
                                                            }
                                                        }]
                                                    }
                                                }]
                                            }
                                        },
                                        {
                                            div: {
                                                children: () => {
                                                    const lists = getState('todos.lists', []);

                                                    if (lists.length === 0) {
                                                        return [{
                                                            div: {
                                                                className: 'empty-state',
                                                                children: [
                                                                    {
                                                                        h3: {
                                                                            text: 'Aucune liste pour le moment'
                                                                        }
                                                                    },
                                                                    {
                                                                        p: {
                                                                            text: 'Créez votre première liste de tâches pour commencer !'
                                                                        }
                                                                    }
                                                                ]
                                                            }
                                                        }];
                                                    }

                                                    return lists.map(list => ({
                                                        TodoListItem: { list, key: list.id }
                                                    }));
                                                }
                                            }
                                        }
                                    ]
                                }
                            },
                            {
                                div: {
                                    className: 'todo-list',
                                    children: () => {
                                        const selectedListId = getState('ui.selectedListId');
                                        const lists = getState('todos.lists', []);
                                        const selectedList = lists.find(l => l.id === selectedListId);

                                        if (!selectedList) {
                                            return [{
                                                div: {
                                                    className: 'empty-state',
                                                    children: [
                                                        {
                                                            h3: {
                                                                text: 'Sélectionnez une liste'
                                                            }
                                                        },
                                                        {
                                                            p: {
                                                                text: 'Choisissez une liste dans la barre latérale pour voir et gérer vos tâches.'
                                                            }
                                                        }
                                                    ]
                                                }
                                            }];
                                        }

                                        return [{ TodoListDetail: { listId: selectedListId } }];
                                    }
                                }
                            }
                        ]
                    }
                })
            };
        };

        // Todo List Item
        const TodoListItem = (props, context) => {
            const { getState, setState, headless } = context;
            const { list } = props;

            return {
                render: () => ({
                    div: {
                        className: () => {
                            const selectedId = getState('ui.selectedListId');
                            return selectedId === list.id ? 'list-item active' : 'list-item';
                        },
                        onclick: () => headless.TodoManager.selectList(list.id),
                        children: [
                            {
                                div: {
                                    className: 'list-info',
                                    children: [
                                        {
                                            div: {
                                                className: 'list-name',
                                                text: list.name
                                            }
                                        },
                                        {
                                            div: {
                                                className: 'list-count',
                                                text: () => {
                                                    const items = getState(`todos.items.${list.id}`, []);
                                                    const completed = items.filter(item => item.completed).length;
                                                    return `${completed}/${items.length} terminées`;
                                                }
                                            }
                                        }
                                    ]
                                }
                            },
                            {
                                div: {
                                    className: 'list-actions',
                                    children: [{
                                        button: {
                                            className: 'btn btn-danger btn-small',
                                            text: '🗑️',
                                            onclick: (e) => {
                                                e.stopPropagation();
                                                if (confirm(`Supprimer "${list.name}" ?`)) {
                                                    headless.TodoManager.deleteList(list.id);
                                                }
                                            }
                                        }
                                    }]
                                }
                            }
                        ]
                    }
                })
            };
        };

        // Todo List Detail
        const TodoListDetail = (props, context) => {
            const { getState, setState, headless } = context;
            const { listId } = props;

            return {
                render: () => ({
                    div: {
                        className: 'fade-in',
                        children: [
                            {
                                div: {
                                    className: 'section-title',
                                    text: () => {
                                        const lists = getState('todos.lists', []);
                                        const list = lists.find(l => l.id === listId);
                                        return list ? list.name : 'Liste de tâches';
                                    }
                                }
                            },
                            {
                                div: {
                                    className: 'todo-form',
                                    children: [{
                                        form: {
                                            onsubmit: (e) => {
                                                e.preventDefault();
                                                const text = getState('ui.newTodoText', '').trim();
                                                if (text) {
                                                    headless.TodoManager.createTodo(listId, text);
                                                    setState('ui.newTodoText', '');
                                                }
                                            },
                                            children: [{
                                                div: {
                                                    className: 'todo-input',
                                                    children: [
                                                        {
                                                            input: {
                                                                type: 'text',
                                                                className: 'form-input',
                                                                placeholder: 'Ajouter une nouvelle tâche...',
                                                                value: () => getState('ui.newTodoText', ''),
                                                                oninput: (e) => setState('ui.newTodoText', e.target.value)
                                                            }
                                                        },
                                                        {
                                                            button: {
                                                                type: 'submit',
                                                                className: 'btn btn-primary',
                                                                text: 'Ajouter'
                                                            }
                                                        }
                                                    ]
                                                }
                                            }]
                                        }
                                    }]
                                }
                            },
                            {
                                div: {
                                    className: 'filters',
                                    children: [
                                        {
                                            button: {
                                                className: () => {
                                                    const filter = getState('todos.filter', 'all');
                                                    return filter === 'all' ? 'filter-btn active' : 'filter-btn';
                                                },
                                                text: 'Toutes',
                                                onclick: () => headless.TodoManager.setFilter('all')
                                            }
                                        },
                                        {
                                            button: {
                                                className: () => {
                                                    const filter = getState('todos.filter', 'all');
                                                    return filter === 'active' ? 'filter-btn active' : 'filter-btn';
                                                },
                                                text: 'Actives',
                                                onclick: () => headless.TodoManager.setFilter('active')
                                            }
                                        },
                                        {
                                            button: {
                                                className: () => {
                                                    const filter = getState('todos.filter', 'all');
                                                    return filter === 'completed' ? 'filter-btn active' : 'filter-btn';
                                                },
                                                text: 'Terminées',
                                                onclick: () => headless.TodoManager.setFilter('completed')
                                            }
                                        }
                                    ]
                                }
                            },
                            {
                                div: {
                                    children: () => {
                                        const items = getState(`todos.items.${listId}`, []);
                                        const filter = getState('todos.filter', 'all');

                                        let filteredItems = items;
                                        if (filter === 'active') {
                                            filteredItems = items.filter(item => !item.completed);
                                        } else if (filter === 'completed') {
                                            filteredItems = items.filter(item => item.completed);
                                        }

                                        if (filteredItems.length === 0) {
                                            return [{
                                                div: {
                                                    className: 'empty-state',
                                                    children: [
                                                        {
                                                            h3: {
                                                                text: () => {
                                                                    const filter = getState('todos.filter', 'all');
                                                                    if (filter === 'active') return 'Aucune tâche active';
                                                                    if (filter === 'completed') return 'Aucune tâche terminée';
                                                                    return 'Aucune tâche pour le moment';
                                                                }
                                                            }
                                                        },
                                                        {
                                                            p: {
                                                                text: 'Ajoutez votre première tâche ci-dessus !'
                                                            }
                                                        }
                                                    ]
                                                }
                                            }];
                                        }

                                        return filteredItems.map(item => ({
                                            TodoItem: { listId, item, key: item.id }
                                        }));
                                    }
                                }
                            }
                        ]
                    }
                })
            };
        };

        // Todo Item
        const TodoItem = (props, context) => {
            const { headless } = context;
            const { listId, item } = props;

            return {
                render: () => ({
                    div: {
                        className: 'todo-item',
                        children: [
                            {
                                input: {
                                    type: 'checkbox',
                                    className: 'todo-checkbox',
                                    checked: item.completed,
                                    onchange: () => headless.TodoManager.toggleTodo(listId, item.id)
                                }
                            },
                            {
                                span: {
                                    className: item.completed ? 'todo-text completed' : 'todo-text',
                                    text: item.text
                                }
                            },
                            {
                                div: {
                                    className: 'todo-actions',
                                    children: [{
                                        button: {
                                            className: 'btn btn-danger btn-small',
                                            text: '🗑️',
                                            onclick: () => {
                                                if (confirm('Supprimer cette tâche ?')) {
                                                    headless.TodoManager.deleteTodo(listId, item.id);
                                                }
                                            }
                                        }
                                    }]
                                }
                            }
                        ]
                    }
                })
            };
        };

        // User Profile
        const UserProfile = (props, context) => {
            const { getState } = context;

            return {
                render: () => ({
                    div: {
                        className: 'fade-in',
                        children: [{
                            div: {
                                className: 'form-container',
                                children: [
                                    {
                                        h2: {
                                            className: 'form-title',
                                            text: 'Profil'
                                        }
                                    },
                                    {
                                        div: {
                                            className: 'form-group',
                                            children: [
                                                {
                                                    label: {
                                                        className: 'form-label',
                                                        text: 'Nom'
                                                    }
                                                },
                                                {
                                                    div: {
                                                        className: 'form-input',
                                                        style: {
                                                            background: 'var(--gray-100)',
                                                            border: 'none',
                                                            color: 'var(--gray-700)'
                                                        },
                                                        text: () => getState('auth.user.name', 'Non disponible')
                                                    }
                                                }
                                            ]
                                        }
                                    },
                                    {
                                        div: {
                                            className: 'form-group',
                                            children: [
                                                {
                                                    label: {
                                                        className: 'form-label',
                                                        text: 'Membre depuis'
                                                    }
                                                },
                                                {
                                                    div: {
                                                        className: 'form-input',
                                                        style: {
                                                            background: 'var(--gray-100)',
                                                            border: 'none',
                                                            color: 'var(--gray-700)'
                                                        },
                                                        text: () => {
                                                            const createdAt = getState('auth.user.createdAt');
                                                            return createdAt ? new Date(createdAt).toLocaleDateString() : 'Non disponible';
                                                        }
                                                    }
                                                }
                                            ]
                                        }
                                    },
                                    {
                                        div: {
                                            className: 'form-group',
                                            children: [
                                                {
                                                    label: {
                                                        className: 'form-label',
                                                        text: 'Statistiques'
                                                    }
                                                },
                                                {
                                                    div: {
                                                        style: {
                                                            background: 'var(--gray-50)',
                                                            padding: '1rem',
                                                            borderRadius: 'var(--border-radius)',
                                                            border: '1px solid var(--gray-200)'
                                                        },
                                                        children: [
                                                            {
                                                                div: {
                                                                    style: { marginBottom: '0.5rem' },
                                                                    children: [
                                                                        {
                                                                            span: {
                                                                                style: { fontWeight: '500' },
                                                                                text: 'Total des listes : '
                                                                            }
                                                                        },
                                                                        {
                                                                            span: {
                                                                                text: () => getState('todos.lists', []).length.toString()
                                                                            }
                                                                        }
                                                                    ]
                                                                }
                                                            },
                                                            {
                                                                div: {
                                                                    style: { marginBottom: '0.5rem' },
                                                                    children: [
                                                                        {
                                                                            span: {
                                                                                style: { fontWeight: '500' },
                                                                                text: 'Total des tâches : '
                                                                            }
                                                                        },
                                                                        {
                                                                            span: {
                                                                                text: () => {
                                                                                    const items = getState('todos.items', {});
                                                                                    const total = Object.values(items).reduce((sum, list) => sum + list.length, 0);
                                                                                    return total.toString();
                                                                                }
                                                                            }
                                                                        }
                                                                    ]
                                                                }
                                                            },
                                                            {
                                                                div: {
                                                                    children: [
                                                                        {
                                                                            span: {
                                                                                style: { fontWeight: '500' },
                                                                                text: 'Terminées : '
                                                                            }
                                                                        },
                                                                        {
                                                                            span: {
                                                                                text: () => {
                                                                                    const items = getState('todos.items', {});
                                                                                    const completed = Object.values(items)
                                                                                        .flat()
                                                                                        .filter(item => item.completed).length;
                                                                                    return completed.toString();
                                                                                }
                                                                            }
                                                                        }
                                                                    ]
                                                                }
                                                            }
                                                        ]
                                                    }
                                                }
                                            ]
                                        }
                                    }
                                ]
                            }
                        }]
                    }
                })
            };
        };

        // App Settings
        const AppSettings = (props, context) => {
            const { getState, setState, headless } = context;

            return {
                render: () => ({
                    div: {
                        className: 'fade-in',
                        children: [{
                            div: {
                                className: 'form-container',
                                children: [
                                    {
                                        h2: {
                                            className: 'form-title',
                                            text: 'Paramètres'
                                        }
                                    },
                                    {
                                        div: {
                                            className: 'form-group',
                                            children: [
                                                {
                                                    label: {
                                                        className: 'form-label',
                                                        text: 'Filtre par défaut'
                                                    }
                                                },
                                                {
                                                    select: {
                                                        className: 'form-input',
                                                        value: () => getState('settings.defaultFilter', 'all'),
                                                        onchange: (e) => setState('settings.defaultFilter', e.target.value),
                                                        children: [
                                                            {
                                                                option: {
                                                                    value: 'all',
                                                                    text: 'Toutes les tâches'
                                                                }
                                                            },
                                                            {
                                                                option: {
                                                                    value: 'active',
                                                                    text: 'Tâches actives'
                                                                }
                                                            },
                                                            {
                                                                option: {
                                                                    value: 'completed',
                                                                    text: 'Tâches terminées'
                                                                }
                                                            }
                                                        ]
                                                    }
                                                }
                                            ]
                                        }
                                    },
                                    {
                                        div: {
                                            className: 'form-group',
                                            children: [
                                                {
                                                    label: {
                                                        className: 'form-label',
                                                        children: [
                                                            {
                                                                input: {
                                                                    type: 'checkbox',
                                                                    checked: () => getState('settings.autoSave', true),
                                                                    onchange: (e) => setState('settings.autoSave', e.target.checked),
                                                                    style: { marginRight: '0.5rem' }
                                                                }
                                                            },
                                                            {
                                                                span: {
                                                                    text: 'Sauvegarde automatique'
                                                                }
                                                            }
                                                        ]
                                                    }
                                                }
                                            ]
                                        }
                                    },
                                    {
                                        div: {
                                            className: 'form-group',
                                            children: [
                                                {
                                                    label: {
                                                        className: 'form-label',
                                                        text: 'Statistiques de Persistance'
                                                    }
                                                },
                                                {
                                                    div: {
                                                        style: {
                                                            background: 'var(--gray-50)',
                                                            padding: '1rem',
                                                            borderRadius: 'var(--border-radius)',
                                                            border: '1px solid var(--gray-200)'
                                                        },
                                                        children: () => {
                                                            const stats = getState('persistence.stats', {});
                                                            return [
                                                                {
                                                                    div: {
                                                                        style: { marginBottom: '0.5rem' },
                                                                        children: [
                                                                            {
                                                                                span: {
                                                                                    style: { fontWeight: '500' },
                                                                                    text: 'Domaines Suivis : '
                                                                                }
                                                                            },
                                                                            {
                                                                                span: {
                                                                                    text: (stats.domainsTracked || 0).toString()
                                                                                }
                                                                            }
                                                                        ]
                                                                    }
                                                                },
                                                                {
                                                                    div: {
                                                                        style: { marginBottom: '0.5rem' },
                                                                        children: [
                                                                            {
                                                                                span: {
                                                                                    style: { fontWeight: '500' },
                                                                                    text: 'Total Sauvegardes : '
                                                                                }
                                                                            },
                                                                            {
                                                                                span: {
                                                                                    text: (stats.totalSaves || 0).toString()
                                                                                }
                                                                            }
                                                                        ]
                                                                    }
                                                                },
                                                                {
                                                                    div: {
                                                                        children: [
                                                                            {
                                                                                span: {
                                                                                    style: { fontWeight: '500' },
                                                                                    text: 'Total Restaurations : '
                                                                                }
                                                                            },
                                                                            {
                                                                                span: {
                                                                                    text: (stats.totalRestores || 0).toString()
                                                                                }
                                                                            }
                                                                        ]
                                                                    }
                                                                }
                                                            ];
                                                        }
                                                    }
                                                }
                                            ]
                                        }
                                    },
                                    {
                                        div: {
                                            className: 'form-group',
                                            children: [
                                                {
                                                    button: {
                                                        className: 'btn btn-secondary btn-full',
                                                        style: { marginBottom: '0.5rem' },
                                                        text: 'Exporter toutes les données',
                                                        onclick: () => {
                                                            try {
                                                                const exportData = headless.StatePersistenceManager.exportState();
                                                                const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
                                                                const url = URL.createObjectURL(blob);
                                                                const a = document.createElement('a');
                                                                a.href = url;
                                                                a.download = `todo-app-sauvegarde-${new Date().toISOString().split('T')[0]}.json`;
                                                                document.body.appendChild(a);
                                                                a.click();
                                                                document.body.removeChild(a);
                                                                URL.revokeObjectURL(url);
                                                                alert('Données exportées avec succès !');
                                                            } catch (error) {
                                                                alert("L'exportation a échoué : " + error.message);
                                                            }
                                                        }
                                                    }
                                                }
                                            ]
                                        }
                                    },
                                    {
                                        div: {
                                            className: 'form-group',
                                            children: [
                                                {
                                                    button: {
                                                        className: 'btn btn-danger btn-full',
                                                        text: 'Effacer toutes les données',
                                                        onclick: () => {
                                                            if (confirm('Ceci supprimera toutes vos listes et données. Cette action est irréversible. Êtes-vous sûr(e) ?')) {
                                                                const user = getState('auth.user');
                                                                if (user) {
                                                                    // Clear old todo data
                                                                    localStorage.removeItem(`todo_data_${user.id}`);

                                                                    // Clear new persistence data
                                                                    headless.StatePersistenceManager.clearAllStorage();

                                                                    // Reset state
                                                                    setState('todos.lists', []);
                                                                    setState('todos.items', {});
                                                                    setState('ui.selectedListId', null);

                                                                    alert('Toutes les données ont été effacées.');
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            ]
                                        }
                                    }
                                ]
                            }
                        }]
                    }
                })
            };
        };

        // Not Found Page
        const NotFound = (props, context) => {
            return {
                render: () => ({
                    div: {
                        className: 'empty-state fade-in',
                        children: [
                            {
                                h3: {
                                    text: '404 - Page non trouvée'
                                }
                            },
                            {
                                p: {
                                    text: "La page que vous cherchez n'existe pas."
                                }
                            },
                            {
                                a: {
                                    href: '#/',
                                    className: 'btn btn-primary',
                                    text: 'Aller au Tableau de bord',
                                    onclick: (e) => {
                                        e.preventDefault();
                                        window.location.hash = '/';
                                    }
                                }
                            }
                        ]
                    }
                })
            };
        };

        // ==================== APPLICATION INITIALIZATION ====================

        const juris = new Juris({
            components: {
                AppLayout,
                AppHeader,
                AuthLayout,
                LoginForm,
                RegisterForm,
                MainContent,
                TodoDashboard,
                TodoListItem,
                TodoListDetail,
                TodoItem,
                UserProfile,
                AppSettings,
                NotFound
            },

            headlessComponents: {
                AuthManager: { fn: AuthManager, options: { autoInit: true } },
                UrlStateSync: { fn: UrlStateSync, options: { autoInit: true } },
                TodoManager: { fn: TodoManager, options: { autoInit: true } },
                StatePersistenceManager: {
                    fn: StatePersistenceManager,
                    options: {
                        autoInit: true,
                        debug: true, // Enable debug logging
                        domains: ['ui', 'todos', 'settings', 'storage'], // Specify domains to track
                        priorityDomains: ['ui'], // UI gets priority restore for selected list
                        immediateSave: ['ui'], // Save UI changes immediately (like selected list)
                        criticalSave: ['todos'], // Save todos with faster debounce
                        aggressiveRestore: true, // Restore immediately on startup
                        keyPrefix: 'todo_app_state_',
                        // User-specific domains will have user ID appended automatically
                        domainRestoreConfig: {
                            ui: { priority: 1, delay: 0, aggressive: true }, // Restore selected list first
                            todos: { priority: 2, delay: 0, aggressive: true },
                            settings: { priority: 3, delay: 100, aggressive: false },
                            storage: { priority: 4, delay: 200, aggressive: false }
                        }
                    }
                }
            },

            layout: {
                div: {
                    children: [{ AppLayout: {} }]
                }
            },

            states: {
                url: {
                    path: '/',
                    segments: { full: '/', parts: [], base: '', sub: '', id: '' }
                },
                auth: {
                    user: null,
                    token: null,
                    isLoggedIn: false,
                    loading: false,
                    error: null,
                    form: {}
                },
                todos: {
                    lists: [],
                    items: {},
                    filter: 'all'
                },
                ui: {
                    selectedListId: '', // This will now be persisted!
                    newListName: '',
                    newTodoText: ''
                },
                storage: {
                    users: [],
                    settings: {}
                },
                settings: {
                    defaultFilter: 'all',
                    autoSave: true
                }
            }
        });

        // Start the application
        juris.render('#app');

        // Auto-navigate to login if no hash
        if (!window.location.hash) {
            // Don't force login redirect, let auth check handle it
        }

        // Global access for debugging
        window.juris = juris;

        console.log('🚀 Todo App est prête !');
        console.log('📱 Routes disponibles :');
        console.log('  - #/login (public)');
        console.log('  - #/register (public)');
        console.log('  - #/ (protégé - tableau de bord)');
        console.log('  - #/profile (protégé)');
        console.log('  - #/settings (protégé)');
        console.log('💾 Les données persistent dans localStorage');
        console.log('🔐 Authentification avec gardes de route');
        console.log('🧭 Routage basé sur l\'état');
    </script>
</body>

</html>

Building a High-Performance AI Image Gallery with JurisJS

ArtyProg — Sat, 09 Aug 2025 14:30:27 +0000

What I love about this project is that it shows we can have it all: power, simplicity, beauty, and performance. The Juris framework is a refreshing choice for anyone who believes in a clean separation between logic and UI, and for those of us who are tired of the endless configuration that comes with the modern build ecosystem.

This code runs without any build, in a single HTML page.

Pay attention, on how the list behave when an image is created or removed.

Please, don't be afraid by the syntax, we have all been brainwashed by JSX.
Now, I have cleaned my brain, and I can't stand anymore JSX, for me JSX is absolutely not you Javscript friend.
All the contrary to Juris, which is just Javascript

Here is the demo GenImage

You can play with the code here : AI Studio

Juris Production App Template

ArtyProg — Fri, 08 Aug 2025 13:35:48 +0000

Project template for a production-ready Single-Page Application (SPA) built with the Juris framework.

Click the following link, and follow the instructions.

JurisSPATemplate

Preview :

For reminder, this project does not need any installation.
It runs as is in the browser, after launching a local web server

Images Generation with Pollinations.ai and Juris

ArtyProg — Wed, 06 Aug 2025 15:45:49 +0000

Juris AI Studio

All the code in contained in a single HTML page.
You can copy, paste, modify, publish it on your own site it at will :-)

Juris and AI a love story

ArtyProg — Wed, 06 Aug 2025 14:12:44 +0000

Here's what makes Juris special: since it's just JavaScript at its core, AI tools can work with it effortlessly—no learning curve, no compatibility issues. I gave AI Studio a simple prompt to create an Image Generator with Juris :

JurisJS AI Studio