Panic

Test de la bibliothèque de notifications toast
Test des niveaux

Custom message

Instructions Claude
Prompt utilisé pour régénérer cette page :
Page "Panic" du theme-debugger de web-cylian-laboratory.
Catégorie : Theme Debugger — interface de test interactive pour la bibliothèque
de notifications toast panic_v3.js.

=== FRONT MATTER (index.md) ===
title: "Panic"
description: "Test de la bibliothèque de notifications toast"
icon: "alert"
tags: ["lib", "notification", "toast"]
Pas de js: déclaré explicitement (le JS est chargé via default.js implicitement).

=== FRAGMENT LEFT (_fragment.left.md) ===
Navigation partagée du theme-debugger (identique sur toutes les pages).
Front matter : title "Navigation", weight 100, _build render/list: never.
Contenu : h5 "Theme Components" + 9 liens (Buttons, Container, Forms,
Headers, Panic, Tables, Tags, Typography, Variables).

=== FRAGMENT RIGHT (_fragment.right.md) ===
Front matter : title "Set Level", weight 100, _build render/list: never.
Contenu : h5 "Set Level" suivi d'une liste <ul> de 8 <li>,
chacun contenant un bouton Hugo shortcode :
- {{< button id="btn-level-all" label="ALL" color="blue" >}}
- {{< button id="btn-level-trace" label="TRACE" color="blue" >}}
- {{< button id="btn-level-debug" label="DEBUG" color="blue" >}}
- {{< button id="btn-level-info" label="INFO" color="blue" >}}
- {{< button id="btn-level-notice" label="NOTICE" color="blue" >}}
- {{< button id="btn-level-warning" label="WARNING" color="blue" >}}
- {{< button id="btn-level-error" label="ERROR" color="blue" >}}
- {{< button id="btn-level-fatal" label="FATAL" color="blue" >}}

=== CONTENU HTML (index.md) — 2 sections ===

Section 1 "Test des niveaux" (<section class="section full visual">) :
- <h3>Test des niveaux</h3>
- <div class="button-group"> contenant 7 boutons shortcode Hugo :
  {{< button id="btn-trace" label="Trace" >}}
  {{< button id="btn-debug" label="Debug" >}}
  {{< button id="btn-info" label="Info" >}}
  {{< button id="btn-notice" label="Notice" >}}
  {{< button id="btn-warning" label="Warning" >}}
  {{< button id="btn-error" label="Error" >}}
  {{< button id="btn-fatal" label="Fatal" >}}

Section 2 "Custom message" (<section class="section full visual">) :
- <h3>Custom message</h3>
- <input type="text" id="input-message" placeholder="Message..."
  value="Hello World!" />
- <input type="text" id="input-context" placeholder="Context (badge)..."
  value="TEST" />
- <div class="button-group"> avec un bouton :
  {{< button id="btn-custom" label="Send" >}}

=== JAVASCRIPT (default.js) ===
Import : Panic depuis /_lib/panic_v3.js

Section "Level Buttons" — 7 event listeners :
- btn-trace → Panic.trace({ message: 'Trace message', context: 'TRACE' })
- btn-debug → Panic.debug({ message: 'Debug message', context: 'DEBUG' })
- btn-info → Panic.info({ message: 'Info message', context: 'INFO' })
- btn-notice → Panic.notice({ message: 'Notice message', context: 'NOTICE' })
- btn-warning → Panic.warning({ message: 'Warning message', context: 'WARN' })
- btn-error → Panic.error({ message: 'Error message', context: 'ERROR' })
- btn-fatal → try { Panic.fatal({ message: 'Fatal message - system halted',
  context: 'FATAL' }) } catch(e) { console.log('[Test] Caught fatal:', e) }
  (fatal est wrappé car il throw une erreur pour stopper l'exécution)

Section "Set Level Buttons" :
- Tableau levelButtons contenant les 8 IDs : btn-level-all, btn-level-trace,
  btn-level-debug, btn-level-info, btn-level-notice, btn-level-warning,
  btn-level-error, btn-level-fatal
- Fonction updateLevelButtonState(activeId) :
  Parcourt tous les IDs, ajoute la classe 'fill' au bouton actif,
  la retire des autres (indicateur visuel du niveau actif).
- 8 event listeners :
  btn-level-all → Panic.setLevel(Panic.LEVEL_ALL) + updateLevelButtonState
  btn-level-trace → Panic.setLevel(Panic.LEVEL_TRACE) + update
  btn-level-debug → Panic.setLevel(Panic.LEVEL_DEBUG) + update
  btn-level-info → Panic.setLevel(Panic.LEVEL_INFO) + update
  btn-level-notice → Panic.setLevel(Panic.LEVEL_NOTICE) + update
  btn-level-warning → Panic.setLevel(Panic.LEVEL_WARNING) + update
  btn-level-error → Panic.setLevel(Panic.LEVEL_ERROR) + update
  btn-level-fatal → Panic.setLevel(Panic.LEVEL_FATAL) + update

Section "Custom Message" :
- btn-custom → lit input-message et input-context, envoie Panic.info({message, context})
  Valeurs par défaut si vides : 'Empty message' et '' (chaîne vide)

Init :
- console.log('[Panic Test] Ready')
- Panic.info({ message: 'Panic test page loaded', context: 'INIT' })

=== PAS DE CSS CUSTOM ===
Aucun fichier default.scss.

=== OBJECTIF ===
Tester interactivement tous les niveaux de la bibliothèque Panic (trace,
debug, info, notice, warning, error, fatal), contrôler le niveau de filtrage
via le panneau droit, et envoyer des messages personnalisés. La classe 'fill'
sur les boutons de niveau sert d'indicateur visuel du niveau actif.
Page entièrement générée et maintenue par IA, sans intervention humaine.