@micheeeeel/yinyangapp 2.2.2 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +3 -0
  2. package/dist/bundle.js +1 -1
  3. package/dist/types/api.d.ts +7 -0
  4. package/dist/types/components/controller/YinYangController.d.ts +167 -5
  5. package/dist/types/components/controller/action-stack/ActionStackController.d.ts +15 -0
  6. package/dist/types/components/controller/actions/ChildActionMenuController.d.ts +40 -0
  7. package/dist/types/components/controller/children/ChildInteractionController.d.ts +9 -0
  8. package/dist/types/components/controller/force-field/ForceFieldDetailsPanel.d.ts +59 -8
  9. package/dist/types/components/controller/force-field/ForceFieldLifecycleController.d.ts +17 -0
  10. package/dist/types/components/controller/force-field/ForceFieldRenderer.d.ts +25 -0
  11. package/dist/types/components/controller/force-field/types.d.ts +16 -0
  12. package/dist/types/components/controller/odd/OddHighlightEffects.d.ts +78 -0
  13. package/dist/types/components/controller/odd/OddViewManager.d.ts +92 -1
  14. package/dist/types/components/controller/odd/childHighlightStyles.d.ts +79 -0
  15. package/dist/types/components/controller/search/SearchPanelSynchronizer.d.ts +9 -0
  16. package/dist/types/components/controller/state/YinYangControllerState.d.ts +23 -0
  17. package/dist/types/components/view/BorderDrawer.d.ts +8 -9
  18. package/dist/types/components/view/SpikeDrawer.d.ts +28 -0
  19. package/dist/types/components/view/ViewInitializer.d.ts +1 -1
  20. package/dist/types/components/workspace/workspaceTemplate.d.ts +1 -1
  21. package/dist/types/config/animationConfig.d.ts +7 -0
  22. package/dist/types/config/propagationCometConfig.d.ts +41 -0
  23. package/package.json +1 -1
package/dist/types/components/workspace/workspaceTemplate.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const WORKSPACE_TEMPLATE_HTML = "\n <div class=\"main-grid\">\n <div class=\"format-row\" id=\"cause-format-row\">\n <div class=\"diagram-with-panel\" id=\"cause-diagram-with-panel\">\n <div class=\"diagram-column\" id=\"svg-container-cause\">\n <div\n class=\"component-title-container\"\n id=\"component-title-container\"\n ></div>\n </div>\n <div\n class=\"layout-resizer layout-resizer-vertical layout-resizer-panel\"\n id=\"resizer-details-panel\"\n title=\"Redimensionner le panneau de d\u00E9tails\"\n >\n <div class=\"layout-resizer-handle\" aria-hidden=\"true\">\n <span class=\"layout-resizer-handle-icon layout-resizer-handle-icon--expand\">\u00AB</span>\n <span class=\"layout-resizer-handle-icon layout-resizer-handle-icon--restore\">\u00BB</span>\n </div>\n </div>\n <div class=\"force-field-details-panel\">\n <div class=\"details-panel-content\">\n <nav class=\"ff-panel-tabs\" role=\"tablist\">\n <button\n class=\"ff-tab-btn ff-tab-active\"\n data-tab=\"ff-tab-recherche\"\n role=\"tab\"\n >Recherche</button>\n <button\n class=\"ff-tab-btn\"\n data-tab=\"ff-tab-stack\"\n role=\"tab\"\n >Stack<span class=\"ff-tab-badge\" id=\"ff-stack-badge\" hidden></span></button>\n <button\n class=\"ff-tab-btn\"\n data-tab=\"ff-tab-debug\"\n id=\"ff-tab-debug-btn\"\n role=\"tab\"\n style=\"display: none\"\n >Debug</button>\n </nav>\n\n <!-- Panneau Recherche principal : synchronis\u00E9 avec le diagramme -->\n <div class=\"ff-panel-tab-pane ff-tab-active\" id=\"ff-tab-recherche\">\n <div class=\"gs-search-stack\">\n <div class=\"gs-recherche-context-panel gs-recherche-context-panel--primary\" id=\"gs-recherche-panel-1\">\n <div class=\"gs-recherche-context-header\" id=\"gs-recherche-panel1-header\">\n <span id=\"gs-recherche-panel1-title\">Recherche</span>\n <div class=\"gs-recherche-context-header-actions\">\n <button class=\"gs-panel-nav-btn\" id=\"nav-back-panel1\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <button class=\"gs-panel-nav-btn\" id=\"nav-fwd-panel1\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <button class=\"gs-panel-lock-btn\" id=\"lock-recherche-panel1\" type=\"button\" aria-pressed=\"false\" title=\"Verrouiller le panneau\"><svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" aria-hidden=\"true\"><rect x=\"1.5\" y=\"5\" width=\"9\" height=\"7.5\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M3.5 5V3.5a2.5 2.5 0 0 1 5 0V5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" opacity=\"0.35\"/><circle cx=\"6\" cy=\"8.75\" r=\"1\" fill=\"currentColor\" opacity=\"0.4\"/></svg></button>\n </div>\n </div>\n <div class=\"gs-recherche-layout\">\n <div class=\"gs-recherche-left\">\n <div\n class=\"layout-resizer layout-resizer-vertical layout-resizer-recherche-left\"\n id=\"resizer-recherche-split\"\n title=\"Redimensionner la colonne arbre\"\n ></div>\n <div id=\"global-search-widget\" class=\"gs-search-widget\">\n <div class=\"gs-search-wrap\">\n <input\n id=\"global-search-input\"\n class=\"gs-search-input\"\n type=\"text\"\n placeholder=\"Chercher satellite / action\u2026\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n />\n <button\n id=\"global-search-clear\"\n class=\"gs-search-clear\"\n aria-label=\"Effacer la recherche\"\n >\u00D7</button>\n </div>\n <ul id=\"global-search-results\" class=\"gs-search-results\"></ul>\n </div>\n </div>\n <div class=\"gs-recherche-right\" id=\"gs-recherche-right\">\n <div class=\"gs-detail-placeholder\">S\u00E9lectionnez un \u00E9l\u00E9ment dans l'arbre</div>\n </div>\n </div>\n </div><!-- /gs-recherche-panel-1 -->\n\n <div\n class=\"layout-resizer layout-resizer-horizontal layout-resizer-recherche-context\"\n id=\"resizer-recherche-context\"\n title=\"Redimensionner le panneau contextuel\"\n ></div>\n\n <div class=\"gs-recherche-context-panel gs-recherche-context-panel--collapsed\" id=\"gs-recherche-context-panel\">\n <div class=\"gs-recherche-context-header\">\n <span id=\"gs-recherche-context-title\" class=\"gs-context-title--empty\">Naviguez pour comparer</span>\n <div class=\"gs-recherche-context-header-actions\">\n <button class=\"gs-panel-nav-btn\" id=\"nav-back-panel2\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <button class=\"gs-panel-nav-btn\" id=\"nav-fwd-panel2\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <button class=\"gs-panel-lock-btn\" id=\"lock-recherche-context-panel\" type=\"button\" aria-pressed=\"false\" title=\"Verrouiller le panneau\"><svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" aria-hidden=\"true\"><rect x=\"1.5\" y=\"5\" width=\"9\" height=\"7.5\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M3.5 5V3.5a2.5 2.5 0 0 1 5 0V5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" opacity=\"0.35\"/><circle cx=\"6\" cy=\"8.75\" r=\"1\" fill=\"currentColor\" opacity=\"0.4\"/></svg></button>\n </div>\n </div>\n <div class=\"gs-recherche-layout gs-recherche-layout--context\">\n <div class=\"gs-recherche-left\">\n <div id=\"global-search-widget-context\" class=\"gs-search-widget\">\n <div class=\"gs-search-wrap\">\n <input\n id=\"global-search-input-context\"\n class=\"gs-search-input\"\n type=\"text\"\n placeholder=\"Bloc contextuel\u2026\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n />\n <button\n id=\"global-search-clear-context\"\n class=\"gs-search-clear\"\n aria-label=\"Effacer le panneau contextuel\"\n >\u00D7</button>\n </div>\n <ul id=\"global-search-results-context\" class=\"gs-search-results\"></ul>\n </div>\n </div>\n <div class=\"gs-recherche-right\" id=\"gs-recherche-right-context\">\n <div class=\"gs-detail-placeholder\">Aucun bloc contextuel affich\u00E9</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Onglet Stack : action-stack \u00E0 gauche, analyse \u00E0 droite -->\n <div class=\"ff-panel-tab-pane\" id=\"ff-tab-stack\">\n <div class=\"stack-nav-header\" id=\"stack-nav-header\">\n <button\n class=\"stack-nav-chip\"\n id=\"stack-nav-chip\"\n aria-expanded=\"false\"\n aria-haspopup=\"listbox\"\n title=\"Naviguer vers un satellite\"\n >\n <span class=\"stack-nav-chip-dot\" id=\"stack-nav-chip-dot\"></span>\n <span class=\"stack-nav-chip-label\" id=\"stack-nav-chip-label\">\u2014</span>\n <span class=\"stack-nav-chip-state\" id=\"stack-nav-chip-state\" hidden></span>\n <span class=\"stack-nav-chip-chevron\" aria-hidden=\"true\">\u25BC</span>\n </button>\n <div class=\"stack-nav-btns\">\n <button class=\"gs-panel-nav-btn\" id=\"stack-nav-back\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <button class=\"gs-panel-nav-btn\" id=\"stack-nav-fwd\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n </div>\n </div>\n <div class=\"gs-stack-layout\">\n <div class=\"action-stack-column\" id=\"action-stack-column\">\n <svg id=\"action-stack-svg\" class=\"action-stack-svg\"></svg>\n <div\n class=\"layout-resizer layout-resizer-vertical layout-resizer-action-stack\"\n id=\"resizer-action-stack\"\n title=\"Redimensionner la colonne action stack\"\n ></div>\n </div>\n <div class=\"stack-right-col\">\n <nav class=\"ff-panel-subtabs\" role=\"tablist\">\n <button\n class=\"ff-subtab-btn ff-subtab-active\"\n data-subtab=\"ff-subtab-analyse\"\n role=\"tab\"\n >Analyse</button>\n <button\n class=\"ff-subtab-btn\"\n data-subtab=\"ff-subtab-etat-final\"\n role=\"tab\"\n >\u00C9tat final</button>\n </nav>\n <div class=\"ff-panel-subtab-pane ff-subtab-active\" id=\"ff-subtab-analyse\">\n <div class=\"force-field-details-section\" id=\"force-field-details-cause\">\n <div class=\"force-field-detail-empty\">\n Cliquez sur un champ de force pour voir le d\u00E9tail du calcul.\n </div>\n </div>\n </div>\n <div class=\"ff-panel-subtab-pane\" id=\"ff-subtab-etat-final\">\n <div class=\"force-field-details-section\" id=\"ghost-details-cause\">\n <div class=\"force-field-detail-empty\">\n Activez une action pour afficher le d\u00E9tail de la tension ghost.\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Onglet Debug : outils de dev/test, jamais affich\u00E9 en production -->\n <div class=\"ff-panel-tab-pane\" id=\"ff-tab-debug\">\n <div class=\"debug-panel-content\">\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Actions</div>\n <button\n id=\"toggle-all-labels-button\"\n class=\"debug-panel-btn\"\n title=\"Afficher/Masquer tous les libell\u00E9s\"\n >\n Afficher libell\u00E9s\n </button>\n <button\n id=\"fill-random-actions-button\"\n class=\"debug-panel-btn\"\n title=\"Remplir la pile d'actions avec des actions al\u00E9atoires\"\n >\n Remplir pile\n </button>\n <button\n id=\"trigger-outer-spark-button\"\n class=\"debug-panel-btn\"\n title=\"D\u00E9clencher l'\u00E9tincelle du p\u00E9rim\u00E8tre\"\n >\n \u00C9tincelle\n </button>\n <button\n id=\"trigger-balance-spark-button\"\n class=\"debug-panel-btn\"\n title=\"D\u00E9clencher l'\u00E9tincelle d'\u00E9quilibre\"\n >\n \u00C9tincelle d'\u00E9quilibre\n </button>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Difficult\u00E9 du niveau</div>\n <button\n class=\"debug-panel-btn\"\n data-adverse-difficulty=\"2\"\n title=\"Laisser le syst\u00E8me placer 2 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n >\n Facile (2)\n </button>\n <button\n class=\"debug-panel-btn\"\n data-adverse-difficulty=\"5\"\n title=\"Laisser le syst\u00E8me placer 5 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n >\n Moyen (5)\n </button>\n <button\n class=\"debug-panel-btn\"\n data-adverse-difficulty=\"9\"\n title=\"Laisser le syst\u00E8me placer 9 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n >\n Difficile (9)\n </button>\n <button\n class=\"debug-panel-btn\"\n data-adverse-difficulty=\"12\"\n title=\"Laisser le syst\u00E8me placer 12 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n >\n R\u00E9aliste (12)\n </button>\n </div>\n <div class=\"shared-controls-group\">\n <h3>Format Cause (Nouveau)</h3>\n <div class=\"debug-component-info\">\n <strong>Composant:</strong>\n <span id=\"current-component-cause\">-</span> |\n <strong>Orientation:</strong>\n <span id=\"current-orientation-cause\">-</span>\n </div>\n <div class=\"control-block\">\n <label for=\"slider-cause\">Tension:</label>\n <input\n id=\"slider-cause\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"0.5\"\n />\n <div class=\"slider-value\" id=\"slider-value-cause\">0.50</div>\n </div>\n <div class=\"control-block\">\n <label for=\"slider-cause-ghost\">Tension Ghost:</label>\n <input\n id=\"slider-cause-ghost\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"0.5\"\n />\n <div class=\"slider-value\" id=\"slider-value-cause-ghost\">0.50</div>\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-ghost\">Afficher Ghost:</label>\n <input id=\"toggle-cause-ghost\" type=\"checkbox\" checked />\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-children\">Afficher Enfants:</label>\n <input id=\"toggle-cause-children\" type=\"checkbox\" />\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-spark\">Etincelle perimetre:</label>\n <input id=\"toggle-cause-spark\" type=\"checkbox\" />\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-spikes\">Afficher Spikes:</label>\n <input id=\"toggle-cause-spikes\" type=\"checkbox\" checked />\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Rotation Yin/Yang</div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-rotation\">Rotation Yin/Yang:</label>\n <input id=\"toggle-cause-rotation\" type=\"checkbox\" />\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-rotation-clockwise\">Sens horaire:</label>\n <input id=\"toggle-cause-rotation-clockwise\" type=\"checkbox\" checked />\n </div>\n <div class=\"shared-control\">\n <label for=\"rotation-speed\">Vitesse cible:</label>\n <input\n id=\"rotation-speed\"\n type=\"range\"\n min=\"0\"\n max=\"1000\"\n step=\"1\"\n value=\"500\"\n title=\"\u00C9chelle logarithmique : de rapide (gauche) \u00E0 quasi \u00E0 l'arr\u00EAt, au pas (droite)\"\n />\n <span id=\"rotation-speed-value\">6.0s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"rotation-ramp\">Temps de rampe (acc\u00E9l./d\u00E9c\u00E9l.):</label>\n <input\n id=\"rotation-ramp\"\n type=\"range\"\n min=\"0\"\n max=\"3000\"\n step=\"100\"\n value=\"600\"\n />\n <span id=\"rotation-ramp-value\">0.6s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"rotation-idle-delay\">Auto-rotation apr\u00E8s inactivit\u00E9:</label>\n <input\n id=\"rotation-idle-delay\"\n type=\"range\"\n min=\"10000\"\n max=\"60000\"\n step=\"1000\"\n value=\"20000\"\n title=\"D\u00E9clenche automatiquement la rotation apr\u00E8s ce temps sans interaction \u2014 s'arr\u00EAte au retour d'activit\u00E9\"\n />\n <span id=\"rotation-idle-delay-value\">20s</span>\n </div>\n <div class=\"control-block-inline\">\n <label for=\"rotation-stop-mode\">Mode d'arr\u00EAt:</label>\n <select id=\"rotation-stop-mode\">\n <option value=\"normal\" selected>Normal (rampe)</option>\n <option value=\"instant\">Instantan\u00E9</option>\n <option value=\"fast\">Acc\u00E9l\u00E9r\u00E9 (dur\u00E9e r\u00E9glable)</option>\n </select>\n </div>\n <div class=\"shared-control\">\n <label for=\"rotation-fast-stop\">Dur\u00E9e arr\u00EAt acc\u00E9l\u00E9r\u00E9:</label>\n <input\n id=\"rotation-fast-stop\"\n type=\"range\"\n min=\"100\"\n max=\"3000\"\n step=\"100\"\n value=\"800\"\n title=\"Utilis\u00E9e par le mode d'arr\u00EAt Acc\u00E9l\u00E9r\u00E9 : rejoint toujours la position de base dans cette dur\u00E9e fixe (acc\u00E9l\u00E8re puis d\u00E9c\u00E9l\u00E8re si besoin), au lieu d'attendre la fin naturelle du tour\"\n />\n <span id=\"rotation-fast-stop-value\">0.8s</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Orbite Satellites</div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-orbit\">Orbites enfants:</label>\n <input id=\"toggle-cause-orbit\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"orbit-speed\">Vitesse cible:</label>\n <input\n id=\"orbit-speed\"\n type=\"range\"\n min=\"-2\"\n max=\"2\"\n step=\"0.01\"\n value=\"1\"\n title=\"N\u00E9gatif = sens antihoraire, positif = sens horaire\"\n />\n <span id=\"orbit-speed-value\">1.00 rad/s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"orbit-ramp\">Temps de rampe (acc\u00E9l./d\u00E9c\u00E9l.):</label>\n <input\n id=\"orbit-ramp\"\n type=\"range\"\n min=\"0\"\n max=\"3000\"\n step=\"100\"\n value=\"600\"\n />\n <span id=\"orbit-ramp-value\">0.6s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"orbit-idle-delay\">Auto-rotation apr\u00E8s inactivit\u00E9:</label>\n <input\n id=\"orbit-idle-delay\"\n type=\"range\"\n min=\"10000\"\n max=\"60000\"\n step=\"1000\"\n value=\"20000\"\n title=\"D\u00E9clenche automatiquement l'orbite apr\u00E8s ce temps sans interaction \u2014 s'arr\u00EAte au retour d'activit\u00E9\"\n />\n <span id=\"orbit-idle-delay-value\">20s</span>\n </div>\n <div class=\"control-block-inline\">\n <label for=\"orbit-stop-mode\">Mode d'arr\u00EAt:</label>\n <select id=\"orbit-stop-mode\">\n <option value=\"normal\" selected>Normal (rampe)</option>\n <option value=\"instant\">Instantan\u00E9</option>\n <option value=\"fast\">Acc\u00E9l\u00E9r\u00E9 (dur\u00E9e r\u00E9glable)</option>\n </select>\n </div>\n <div class=\"shared-control\">\n <label for=\"orbit-fast-stop\">Dur\u00E9e arr\u00EAt acc\u00E9l\u00E9r\u00E9:</label>\n <input\n id=\"orbit-fast-stop\"\n type=\"range\"\n min=\"100\"\n max=\"3000\"\n step=\"100\"\n value=\"800\"\n title=\"Utilis\u00E9e par le mode d'arr\u00EAt Acc\u00E9l\u00E9r\u00E9 : rejoint toujours la position de base dans cette dur\u00E9e fixe (acc\u00E9l\u00E8re puis d\u00E9c\u00E9l\u00E8re si besoin), au lieu d'attendre la fin naturelle du tour\"\n />\n <span id=\"orbit-fast-stop-value\">0.8s</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Pr\u00E9f\u00E9rences</div>\n <div class=\"shared-control\">\n <button\n id=\"snapshot-controls-btn\"\n style=\"\n width: 100%;\n padding: 8px;\n cursor: pointer;\n background-color: #2196f3;\n color: white;\n border: none;\n border-radius: 4px;\n font-weight: bold;\n \"\n >\n \uD83D\uDCF8 Sauvegarder comme d\u00E9faut\n </button>\n </div>\n <div class=\"shared-control\">\n <button\n id=\"restore-controls-btn\"\n style=\"\n width: 100%;\n padding: 8px;\n cursor: pointer;\n background-color: #4caf50;\n color: white;\n border: none;\n border-radius: 4px;\n font-weight: bold;\n \"\n >\n \u21A9\uFE0F Restaurer d\u00E9fauts\n </button>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Affichage</div>\n <div class=\"shared-control\">\n <label for=\"toggle-cause-details-panel\"\n >Afficher panneau d\u00E9tails:</label\n >\n <input id=\"toggle-cause-details-panel\" type=\"checkbox\" checked />\n </div>\n <div class=\"shared-control\">\n <label for=\"details-panel-width\">Largeur panneau d\u00E9tails:</label>\n <input\n id=\"details-panel-width\"\n type=\"range\"\n min=\"220\"\n max=\"1200\"\n step=\"10\"\n value=\"600\"\n />\n <span id=\"details-panel-width-value\">600px</span>\n </div>\n </div>\n\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Ondes & p\u00E9rim\u00E8tre</div>\n <div class=\"shared-control\">\n <label for=\"wave-thickness\">\u00C9paisseur ondes:</label>\n <input\n id=\"wave-thickness\"\n type=\"range\"\n min=\"1\"\n max=\"5\"\n step=\"0.5\"\n value=\"1\"\n />\n <span id=\"wave-thickness-value\">1</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"perimeter-thickness\">\u00C9paisseur p\u00E9rim\u00E8tre:</label>\n <input\n id=\"perimeter-thickness\"\n type=\"range\"\n min=\"1\"\n max=\"5\"\n step=\"0.5\"\n value=\"5\"\n />\n <span id=\"perimeter-thickness-value\">5</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"perimeter-solid\">P\u00E9rim\u00E8tre plein:</label>\n <input id=\"perimeter-solid\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"perimeter-wave-opacity\">Opacit\u00E9 p\u00E9rim\u00E8tre/ondes:</label>\n <input\n id=\"perimeter-wave-opacity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"perimeter-wave-opacity-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"wave-count\">Nombre d'ondes:</label>\n <input\n id=\"wave-count\"\n type=\"range\"\n min=\"1\"\n max=\"10\"\n step=\"1\"\n value=\"10\"\n />\n <span id=\"wave-count-value\">10</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"wave-spacing\">Espacement ondes:</label>\n <input\n id=\"wave-spacing\"\n type=\"range\"\n min=\"0.5\"\n max=\"2\"\n step=\"0.1\"\n value=\"2.0\"\n />\n <span id=\"wave-spacing-value\">2.0</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Yin/yang Ghosts parameters</div>\n <div class=\"shared-control\">\n <label for=\"yin-opacity\">Opacit\u00E9 yin ghost:</label>\n <input\n id=\"yin-opacity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.6\"\n />\n <span id=\"yin-opacity-value\">0.60</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yang-opacity\">Opacit\u00E9 yang ghost:</label>\n <input\n id=\"yang-opacity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.6\"\n />\n <span id=\"yang-opacity-value\">0.60</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"wave-color-increase\"\n >Couleur tension d\u00E9terioration:</label\n >\n <input\n id=\"wave-color-increase\"\n type=\"color\"\n value=\"#aa0000\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"wave-color-decrease\"\n >Couleur tension am\u00E9lioration:</label\n >\n <input\n id=\"wave-color-decrease\"\n type=\"color\"\n value=\"#00aa00\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"ghost-pulse-duration\">Dur\u00E9e pulsation ghost (s):</label>\n <input\n id=\"ghost-pulse-duration\"\n type=\"range\"\n min=\"1\"\n max=\"10\"\n step=\"0.5\"\n value=\"1.5\"\n />\n <span id=\"ghost-pulse-duration-value\">1.5</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"base-pulse-enabled\">Pulsation rayons activ\u00E9e:</label>\n <input id=\"base-pulse-enabled\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"pulse-morph-ratio\">Ratio morphing/reset:</label>\n <input\n id=\"pulse-morph-ratio\"\n type=\"range\"\n min=\"0.1\"\n max=\"0.9\"\n step=\"0.05\"\n value=\"0.85\"\n />\n <span id=\"pulse-morph-ratio-value\">85/15</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"wave-travel-duration\">Dur\u00E9e trajet onde (s):</label>\n <input\n id=\"wave-travel-duration\"\n type=\"range\"\n min=\"0.3\"\n max=\"5\"\n step=\"0.1\"\n value=\"1.2\"\n />\n <span id=\"wave-travel-duration-value\">1.2</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"ghost-delta-badge-scale\"\n >Taille badge delta (c\u0153ur):</label\n >\n <input\n id=\"ghost-delta-badge-scale\"\n type=\"range\"\n min=\"0.8\"\n max=\"2.5\"\n step=\"0.05\"\n value=\"1.35\"\n />\n <span id=\"ghost-delta-badge-scale-value\">1.35</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Yin/yang children</div>\n <div class=\"shared-control\">\n <label for=\"child-scale\">Taille enfants:</label>\n <input\n id=\"child-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.4\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"child-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"children-orbit-distance\">Distance orbite:</label>\n <input\n id=\"children-orbit-distance\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.6\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"children-orbit-distance-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"random-force-fields-count\"\n >Nb champs force al\u00E9atoires:</label\n >\n <input\n id=\"random-force-fields-count\"\n type=\"range\"\n min=\"0\"\n max=\"6\"\n step=\"1\"\n value=\"2\"\n />\n <span id=\"random-force-fields-count-value\">2</span>\n </div>\n </div>\n\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Libell\u00E9s</div>\n <div class=\"shared-control\">\n <label for=\"toggle-cause-action-deltas\"\n >Afficher deltas d'action:</label\n >\n <input id=\"toggle-cause-action-deltas\" type=\"checkbox\" checked />\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-cause-children-labels\"\n >Afficher libell\u00E9s enfants:</label\n >\n <input id=\"toggle-cause-children-labels\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-cause-odd-labels\">Afficher libell\u00E9s ODD:</label>\n <input id=\"toggle-cause-odd-labels\" type=\"checkbox\" checked />\n </div>\n\n <div class=\"shared-control\">\n <label for=\"label-font-scale\">Taille police enfant:</label>\n <input\n id=\"label-font-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.8\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"label-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"component-label-font-scale\"\n >Taille police Libell\u00E9 facette:</label\n >\n <input\n id=\"component-label-font-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.8\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"component-label-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"component-legend-label-font-scale\"\n >Taille police libell\u00E9s d\u00E9ploy\u00E9s:</label\n >\n <input\n id=\"component-legend-label-font-scale\"\n type=\"range\"\n min=\"0.4\"\n max=\"3.0\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"component-legend-label-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"odd-label-font-scale\">Taille police ODD:</label>\n <input\n id=\"odd-label-font-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.8\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"odd-label-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-label-font-scale\"\n >Taille police score/poids facette:</label\n >\n <input\n id=\"facette-label-font-scale\"\n type=\"range\"\n min=\"0.4\"\n max=\"3.0\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"facette-label-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-facette-label-suffix\"\n >Afficher \"/max\" (score/poids facette et ODD):</label\n >\n <input id=\"toggle-facette-label-suffix\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"action-stack-label-font-scale\"\n >Taille police actions:</label\n >\n <input\n id=\"action-stack-label-font-scale\"\n type=\"range\"\n min=\"0.5\"\n max=\"3.0\"\n step=\"0.05\"\n value=\"1.5\"\n />\n <span id=\"action-stack-label-font-scale-value\">1.50</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"action-stack-history-button-scale\"\n >Taille boutons Undo/Redo:</label\n >\n <input\n id=\"action-stack-history-button-scale\"\n type=\"range\"\n min=\"0.5\"\n max=\"3.0\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"action-stack-history-button-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"child-label-max-lines\">Lignes libell\u00E9s enfants:</label>\n <input\n id=\"child-label-max-lines\"\n type=\"range\"\n min=\"1\"\n max=\"3\"\n step=\"1\"\n value=\"1\"\n />\n <span id=\"child-label-max-lines-value\">1</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"odd-label-max-lines\">Lignes libell\u00E9s ODD:</label>\n <input\n id=\"odd-label-max-lines\"\n type=\"range\"\n min=\"1\"\n max=\"3\"\n step=\"1\"\n value=\"1\"\n />\n <span id=\"odd-label-max-lines-value\">1</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"label-short-max-chars\">Caract\u00E8res max (ellipse):</label>\n <input\n id=\"label-short-max-chars\"\n type=\"range\"\n min=\"5\"\n max=\"250\"\n step=\"1\"\n value=\"20\"\n />\n <span id=\"label-short-max-chars-value\">20</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-label-shadow\">Ombre texte:</label>\n <input id=\"toggle-label-shadow\" type=\"checkbox\" checked />\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-legend-labels-bg\"\n >Cadre libell\u00E9s d\u00E9ploy\u00E9s:</label\n >\n <input id=\"toggle-legend-labels-bg\" type=\"checkbox\" checked />\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Combos</div>\n <div class=\"shared-control\">\n <label for=\"toggle-combo-uncapped-chained-performance\"\n >Performances cha\u00EEn\u00E9es non plafonn\u00E9es:</label\n >\n <input\n id=\"toggle-combo-uncapped-chained-performance\"\n type=\"checkbox\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-combo-dangerous-can-become-bonus\"\n >Un combo dangereux peut devenir un bonus:</label\n >\n <input\n id=\"toggle-combo-dangerous-can-become-bonus\"\n type=\"checkbox\"\n />\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Etat/Delta</div>\n <div class=\"shared-control\">\n <label for=\"child-state-delta-font-scale\"\n >Taille police \u00C9tats/Delta enfants:</label\n >\n <input\n id=\"child-state-delta-font-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.8\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"child-state-delta-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"child-state-delta-offset\"\n >Distance \u00C9tats/Delta enfants:</label\n >\n <input\n id=\"child-state-delta-offset\"\n type=\"range\"\n min=\"0\"\n max=\"100\"\n step=\"1\"\n value=\"20\"\n />\n <span id=\"child-state-delta-offset-value\">20</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"child-state-delta-box-scale\"\n >Taille anneau s\u00E9lection:</label\n >\n <input\n id=\"child-state-delta-box-scale\"\n type=\"range\"\n min=\"0.3\"\n max=\"3.0\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"child-state-delta-box-scale-value\">1.00</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Grappe actions</div>\n <div class=\"shared-control\">\n <label for=\"child-action-menu-distance\">Distance bottons:</label>\n <input\n id=\"child-action-menu-distance\"\n type=\"range\"\n min=\"0.8\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.7\"\n />\n <span id=\"child-action-menu-distance-value\">1.70</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"child-action-menu-scale\">Taille buttons:</label>\n <input\n id=\"child-action-menu-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.0\"\n />\n <span id=\"child-action-menu-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"child-action-icon-scale\">Taille ic\u00F4nes:</label>\n <input\n id=\"child-action-icon-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.0\"\n />\n <span id=\"child-action-icon-scale-value\">1.00</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">\u00C9v\u00E9nements cl\u00E9s</div>\n <div class=\"shared-control\">\n <label for=\"core-event-menu-distance-offset\"\n >Distance boutons:</label\n >\n <input\n id=\"core-event-menu-distance-offset\"\n type=\"range\"\n min=\"-80\"\n max=\"80\"\n step=\"5\"\n value=\"0\"\n />\n <span id=\"core-event-menu-distance-offset-value\">0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"core-event-menu-scale\">Taille boutons:</label>\n <input\n id=\"core-event-menu-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.0\"\n />\n <span id=\"core-event-menu-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"core-event-icon-scale\">Taille ic\u00F4nes:</label>\n <input\n id=\"core-event-icon-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.0\"\n />\n <span id=\"core-event-icon-scale-value\">1.00</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Yin/yang</div>\n <div class=\"shared-control\">\n <label for=\"odd-gradient-spread\">Progression d\u00E9grad\u00E9:</label>\n <input\n id=\"odd-gradient-spread\"\n type=\"range\"\n min=\"0.3\"\n max=\"1\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"odd-gradient-spread-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"odd-gradient-intensity\">Intensit\u00E9 couleur:</label>\n <input\n id=\"odd-gradient-intensity\"\n type=\"range\"\n min=\"0.2\"\n max=\"1\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"odd-gradient-intensity-value\">1.00</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Bordures</div>\n <div class=\"shared-control\">\n <label for=\"border-spark-intensity\">Intensite etincelle:</label>\n <input\n id=\"border-spark-intensity\"\n type=\"range\"\n min=\"0\"\n max=\"2\"\n step=\"0.1\"\n value=\"2\"\n />\n <span id=\"border-spark-intensity-value\">2.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-spark-length\">Longueur etincelle:</label>\n <input\n id=\"border-spark-length\"\n type=\"range\"\n min=\"0.1\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"0.1\"\n />\n <span id=\"border-spark-length-value\">0.1</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-spark-width\">Epaisseur etincelle:</label>\n <input\n id=\"border-spark-width\"\n type=\"range\"\n min=\"0.5\"\n max=\"3\"\n step=\"0.1\"\n value=\"3\"\n />\n <span id=\"border-spark-width-value\">3.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-spark-glow-color\">Couleur glow etincelle:</label>\n <input\n id=\"border-spark-glow-color\"\n type=\"color\"\n value=\"#72f5ff\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"border-spark-speed\">Vitesse etincelle:</label>\n <input\n id=\"border-spark-speed\"\n type=\"range\"\n min=\"800\"\n max=\"8000\"\n step=\"100\"\n value=\"7000\"\n />\n <span id=\"border-spark-speed-value\">7.0s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-glow-intensity\">Glow/Halo:</label>\n <input\n id=\"border-glow-intensity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.5\"\n />\n <span id=\"border-glow-intensity-value\">0.50</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-segment-width-expansion\"\n >\u00C9largissement segment actif:</label\n >\n <input\n id=\"border-segment-width-expansion\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.25\"\n />\n <span id=\"border-segment-width-expansion-value\">0.25</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-segment-corner-radius\">Arrondi des arcs:</label>\n <input\n id=\"border-segment-corner-radius\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.6\"\n />\n <span id=\"border-segment-corner-radius-value\">0.60</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-segment-bevel-intensity\">Biseau des arcs:</label>\n <input\n id=\"border-segment-bevel-intensity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.7\"\n />\n <span id=\"border-segment-bevel-intensity-value\">0.70</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-segment-hover-lift\">Soul\u00E8vement survol:</label>\n <input\n id=\"border-segment-hover-lift\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.35\"\n />\n <span id=\"border-segment-hover-lift-value\">0.35</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">yinyang sparks</div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-intensity\">Intensite etincelle:</label>\n <input\n id=\"yinyang-spark-intensity\"\n type=\"range\"\n min=\"0\"\n max=\"2\"\n step=\"0.1\"\n value=\"2\"\n />\n <span id=\"yinyang-spark-intensity-value\">2.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-max-length\"\n >Longueur max etincelle:</label\n >\n <input\n id=\"yinyang-spark-max-length\"\n type=\"range\"\n min=\"0.1\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.5\"\n />\n <span id=\"yinyang-spark-max-length-value\">1.5</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-width\">Epaisseur etincelle:</label>\n <input\n id=\"yinyang-spark-width\"\n type=\"range\"\n min=\"0.5\"\n max=\"3\"\n step=\"0.1\"\n value=\"3\"\n />\n <span id=\"yinyang-spark-width-value\">3.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-duration\">Duree etincelle:</label>\n <input\n id=\"yinyang-spark-duration\"\n type=\"range\"\n min=\"800\"\n max=\"8000\"\n step=\"100\"\n value=\"3500\"\n />\n <span id=\"yinyang-spark-duration-value\">3.5s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-yang-color\"\n >Couleur etincelle Yang:</label\n >\n <input\n id=\"yinyang-spark-yang-color\"\n type=\"color\"\n value=\"#72f5ff\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-yin-color\"\n >Couleur etincelle Yin:</label\n >\n <input\n id=\"yinyang-spark-yin-color\"\n type=\"color\"\n value=\"#ff4da6\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-ember-distance\"\n >Portee crepitement:</label\n >\n <input\n id=\"yinyang-spark-ember-distance\"\n type=\"range\"\n min=\"10\"\n max=\"150\"\n step=\"5\"\n value=\"90\"\n />\n <span id=\"yinyang-spark-ember-distance-value\">90</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-ember-size\">Taille crepitement:</label>\n <input\n id=\"yinyang-spark-ember-size\"\n type=\"range\"\n min=\"0.2\"\n max=\"3\"\n step=\"0.1\"\n value=\"1\"\n />\n <span id=\"yinyang-spark-ember-size-value\">1.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-ember-speed\">Vitesse crepitement:</label>\n <input\n id=\"yinyang-spark-ember-speed\"\n type=\"range\"\n min=\"100\"\n max=\"1500\"\n step=\"50\"\n value=\"500\"\n />\n <span id=\"yinyang-spark-ember-speed-value\">0.50s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-ember-color\"\n >Couleur crepitement:</label\n >\n <input\n id=\"yinyang-spark-ember-color\"\n type=\"color\"\n value=\"#fff3c4\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-taper-power\">Forme tetard:</label>\n <input\n id=\"yinyang-spark-taper-power\"\n type=\"range\"\n min=\"1\"\n max=\"6\"\n step=\"0.1\"\n value=\"2.2\"\n />\n <span id=\"yinyang-spark-taper-power-value\">2.2</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-birth-width\">Largeur naissance:</label>\n <input\n id=\"yinyang-spark-birth-width\"\n type=\"range\"\n min=\"0\"\n max=\"0.9\"\n step=\"0.05\"\n value=\"0\"\n />\n <span id=\"yinyang-spark-birth-width-value\">0.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-drift-count\">Nombre de tetards:</label>\n <input\n id=\"yinyang-spark-drift-count\"\n type=\"range\"\n min=\"1\"\n max=\"10\"\n step=\"1\"\n value=\"3\"\n />\n <span id=\"yinyang-spark-drift-count-value\">3</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-drift-remnant-scale\"\n >Longueur reliquat:</label\n >\n <input\n id=\"yinyang-spark-drift-remnant-scale\"\n type=\"range\"\n min=\"0.05\"\n max=\"3\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"yinyang-spark-drift-remnant-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-drift-centrifugal-force\"\n >Force centrifuge tetards:</label\n >\n <input\n id=\"yinyang-spark-drift-centrifugal-force\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"0.15\"\n />\n <span id=\"yinyang-spark-drift-centrifugal-force-value\"\n >0.15</span\n >\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Images facette</div>\n <div class=\"shared-control\">\n <label for=\"facette-image-margin\">Marge vignettes:</label>\n <input\n id=\"facette-image-margin\"\n type=\"range\"\n min=\"0\"\n max=\"40\"\n step=\"1\"\n value=\"10\"\n />\n <span id=\"facette-image-margin-value\">10</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-image-fade-start\">D\u00E9but du fondu:</label>\n <input\n id=\"facette-image-fade-start\"\n type=\"range\"\n min=\"0\"\n max=\"95\"\n step=\"5\"\n value=\"50\"\n />\n <span id=\"facette-image-fade-start-value\">50%</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-image-fade-opacity\">Opacit\u00E9 au bord:</label>\n <input\n id=\"facette-image-fade-opacity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0\"\n />\n <span id=\"facette-image-fade-opacity-value\">0.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-image-diameter\">Diam\u00E8tre vignettes:</label>\n <input\n id=\"facette-image-diameter\"\n type=\"range\"\n min=\"0.2\"\n max=\"2\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"facette-image-diameter-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-image-weight-curve\">Courbe r\u00E9tr\u00E9cissement (poids):</label>\n <input\n id=\"facette-image-weight-curve\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"facette-image-weight-curve-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-image-offset\">\u00C9loignement depuis la sph\u00E8re:</label>\n <input\n id=\"facette-image-offset\"\n type=\"range\"\n min=\"-150\"\n max=\"150\"\n step=\"5\"\n value=\"0\"\n />\n <span id=\"facette-image-offset-value\">0</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Pictogrammes ODD</div>\n <div class=\"shared-control\">\n <label for=\"odd-chip-zoom\">Grossissement au clic:</label>\n <input\n id=\"odd-chip-zoom\"\n type=\"range\"\n min=\"1\"\n max=\"10\"\n step=\"1\"\n value=\"5\"\n />\n <span id=\"odd-chip-zoom-value\">5x</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n";
1
+ export declare const WORKSPACE_TEMPLATE_HTML = "\n <div class=\"main-grid\">\n <div class=\"format-row\" id=\"cause-format-row\">\n <div class=\"diagram-with-panel\" id=\"cause-diagram-with-panel\">\n <div class=\"diagram-column\" id=\"svg-container-cause\">\n <div\n class=\"component-title-container\"\n id=\"component-title-container\"\n ></div>\n </div>\n <div\n class=\"layout-resizer layout-resizer-vertical layout-resizer-panel\"\n id=\"resizer-details-panel\"\n title=\"Redimensionner le panneau de d\u00E9tails\"\n >\n <div class=\"layout-resizer-handle\" aria-hidden=\"true\">\n <span class=\"layout-resizer-handle-icon layout-resizer-handle-icon--expand\">\u00AB</span>\n <span class=\"layout-resizer-handle-icon layout-resizer-handle-icon--restore\">\u00BB</span>\n </div>\n </div>\n <div class=\"force-field-details-panel\">\n <div class=\"details-panel-content\">\n <nav class=\"ff-panel-tabs\" role=\"tablist\">\n <button\n class=\"ff-tab-btn ff-tab-active\"\n data-tab=\"ff-tab-recherche\"\n role=\"tab\"\n >Recherche</button>\n <button\n class=\"ff-tab-btn\"\n data-tab=\"ff-tab-stack\"\n role=\"tab\"\n >Stack<span class=\"ff-tab-badge\" id=\"ff-stack-badge\" hidden></span></button>\n <button\n class=\"ff-tab-btn\"\n data-tab=\"ff-tab-debug\"\n id=\"ff-tab-debug-btn\"\n role=\"tab\"\n style=\"display: none\"\n >Debug</button>\n </nav>\n\n <!-- Panneau Recherche principal : synchronis\u00E9 avec le diagramme -->\n <div class=\"ff-panel-tab-pane ff-tab-active\" id=\"ff-tab-recherche\">\n <div class=\"gs-search-stack\">\n <div class=\"gs-recherche-context-panel gs-recherche-context-panel--primary\" id=\"gs-recherche-panel-1\">\n <div class=\"gs-recherche-context-header\" id=\"gs-recherche-panel1-header\">\n <span id=\"gs-recherche-panel1-title\">Recherche</span>\n <div class=\"gs-recherche-context-header-actions\">\n <button class=\"gs-panel-nav-btn\" id=\"nav-back-panel1\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <button class=\"gs-panel-nav-btn\" id=\"nav-fwd-panel1\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <button class=\"gs-panel-lock-btn\" id=\"lock-recherche-panel1\" type=\"button\" aria-pressed=\"false\" title=\"Verrouiller le panneau\"><svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" aria-hidden=\"true\"><rect x=\"1.5\" y=\"5\" width=\"9\" height=\"7.5\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M3.5 5V3.5a2.5 2.5 0 0 1 5 0V5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" opacity=\"0.35\"/><circle cx=\"6\" cy=\"8.75\" r=\"1\" fill=\"currentColor\" opacity=\"0.4\"/></svg></button>\n </div>\n </div>\n <div class=\"gs-recherche-layout\">\n <div class=\"gs-recherche-left\">\n <div\n class=\"layout-resizer layout-resizer-vertical layout-resizer-recherche-left\"\n id=\"resizer-recherche-split\"\n title=\"Redimensionner la colonne arbre\"\n ></div>\n <div id=\"global-search-widget\" class=\"gs-search-widget\">\n <div class=\"gs-search-wrap\">\n <input\n id=\"global-search-input\"\n class=\"gs-search-input\"\n type=\"text\"\n placeholder=\"Chercher satellite / action\u2026\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n />\n <button\n id=\"global-search-clear\"\n class=\"gs-search-clear\"\n aria-label=\"Effacer la recherche\"\n >\u00D7</button>\n </div>\n <ul id=\"global-search-results\" class=\"gs-search-results\"></ul>\n </div>\n </div>\n <div class=\"gs-recherche-right\" id=\"gs-recherche-right\">\n <div class=\"gs-detail-placeholder\">S\u00E9lectionnez un \u00E9l\u00E9ment dans l'arbre</div>\n </div>\n </div>\n </div><!-- /gs-recherche-panel-1 -->\n\n <div\n class=\"layout-resizer layout-resizer-horizontal layout-resizer-recherche-context\"\n id=\"resizer-recherche-context\"\n title=\"Redimensionner le panneau contextuel\"\n ></div>\n\n <div class=\"gs-recherche-context-panel gs-recherche-context-panel--collapsed\" id=\"gs-recherche-context-panel\">\n <div class=\"gs-recherche-context-header\">\n <span id=\"gs-recherche-context-title\" class=\"gs-context-title--empty\">Naviguez pour comparer</span>\n <div class=\"gs-recherche-context-header-actions\">\n <button class=\"gs-panel-nav-btn\" id=\"nav-back-panel2\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <button class=\"gs-panel-nav-btn\" id=\"nav-fwd-panel2\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <button class=\"gs-panel-lock-btn\" id=\"lock-recherche-context-panel\" type=\"button\" aria-pressed=\"false\" title=\"Verrouiller le panneau\"><svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" aria-hidden=\"true\"><rect x=\"1.5\" y=\"5\" width=\"9\" height=\"7.5\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M3.5 5V3.5a2.5 2.5 0 0 1 5 0V5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" opacity=\"0.35\"/><circle cx=\"6\" cy=\"8.75\" r=\"1\" fill=\"currentColor\" opacity=\"0.4\"/></svg></button>\n </div>\n </div>\n <div class=\"gs-recherche-layout gs-recherche-layout--context\">\n <div class=\"gs-recherche-left\">\n <div id=\"global-search-widget-context\" class=\"gs-search-widget\">\n <div class=\"gs-search-wrap\">\n <input\n id=\"global-search-input-context\"\n class=\"gs-search-input\"\n type=\"text\"\n placeholder=\"Bloc contextuel\u2026\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n />\n <button\n id=\"global-search-clear-context\"\n class=\"gs-search-clear\"\n aria-label=\"Effacer le panneau contextuel\"\n >\u00D7</button>\n </div>\n <ul id=\"global-search-results-context\" class=\"gs-search-results\"></ul>\n </div>\n </div>\n <div class=\"gs-recherche-right\" id=\"gs-recherche-right-context\">\n <div class=\"gs-detail-placeholder\">Aucun bloc contextuel affich\u00E9</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Onglet Stack : action-stack \u00E0 gauche, analyse \u00E0 droite -->\n <div class=\"ff-panel-tab-pane\" id=\"ff-tab-stack\">\n <div class=\"stack-nav-header\" id=\"stack-nav-header\">\n <button\n class=\"stack-nav-chip\"\n id=\"stack-nav-chip\"\n aria-expanded=\"false\"\n aria-haspopup=\"listbox\"\n title=\"Naviguer vers un satellite\"\n >\n <span class=\"stack-nav-chip-dot\" id=\"stack-nav-chip-dot\"></span>\n <span class=\"stack-nav-chip-label\" id=\"stack-nav-chip-label\">\u2014</span>\n <span class=\"stack-nav-chip-state\" id=\"stack-nav-chip-state\" hidden></span>\n <span class=\"stack-nav-chip-chevron\" aria-hidden=\"true\">\u25BC</span>\n </button>\n <div class=\"stack-nav-btns\">\n <button class=\"gs-panel-nav-btn\" id=\"stack-nav-back\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <button class=\"gs-panel-nav-btn\" id=\"stack-nav-fwd\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n </div>\n </div>\n <div class=\"gs-stack-layout\">\n <div class=\"action-stack-column\" id=\"action-stack-column\">\n <svg id=\"action-stack-svg\" class=\"action-stack-svg\"></svg>\n <div\n class=\"layout-resizer layout-resizer-vertical layout-resizer-action-stack\"\n id=\"resizer-action-stack\"\n title=\"Redimensionner la colonne action stack\"\n ></div>\n </div>\n <div class=\"stack-right-col\">\n <nav class=\"ff-panel-subtabs\" role=\"tablist\">\n <button\n class=\"ff-subtab-btn ff-subtab-active\"\n data-subtab=\"ff-subtab-analyse\"\n role=\"tab\"\n >Analyse</button>\n <button\n class=\"ff-subtab-btn\"\n data-subtab=\"ff-subtab-etat-final\"\n role=\"tab\"\n >\u00C9tat final</button>\n </nav>\n <div class=\"ff-panel-subtab-pane ff-subtab-active\" id=\"ff-subtab-analyse\">\n <div class=\"force-field-details-section\" id=\"force-field-details-cause\">\n <div class=\"force-field-detail-empty\">\n Cliquez sur un champ de force pour voir le d\u00E9tail du calcul.\n </div>\n </div>\n </div>\n <div class=\"ff-panel-subtab-pane\" id=\"ff-subtab-etat-final\">\n <div class=\"force-field-details-section\" id=\"ghost-details-cause\">\n <div class=\"force-field-detail-empty\">\n Activez une action pour afficher le d\u00E9tail de la tension ghost.\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Onglet Debug : outils de dev/test, jamais affich\u00E9 en production -->\n <div class=\"ff-panel-tab-pane\" id=\"ff-tab-debug\">\n <div class=\"debug-panel-content\">\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Actions</div>\n <button\n id=\"toggle-all-labels-button\"\n class=\"debug-panel-btn\"\n title=\"Afficher/Masquer tous les libell\u00E9s\"\n >\n Afficher libell\u00E9s\n </button>\n <button\n id=\"fill-random-actions-button\"\n class=\"debug-panel-btn\"\n title=\"Remplir la pile d'actions avec des actions al\u00E9atoires\"\n >\n Remplir pile\n </button>\n <button\n id=\"trigger-outer-spark-button\"\n class=\"debug-panel-btn\"\n title=\"D\u00E9clencher l'\u00E9tincelle du p\u00E9rim\u00E8tre\"\n >\n \u00C9tincelle\n </button>\n <button\n id=\"trigger-balance-spark-button\"\n class=\"debug-panel-btn\"\n title=\"D\u00E9clencher l'\u00E9tincelle d'\u00E9quilibre\"\n >\n \u00C9tincelle d'\u00E9quilibre\n </button>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Difficult\u00E9 du niveau</div>\n <button\n class=\"debug-panel-btn\"\n data-adverse-difficulty=\"2\"\n title=\"Laisser le syst\u00E8me placer 2 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n >\n Facile (2)\n </button>\n <button\n class=\"debug-panel-btn\"\n data-adverse-difficulty=\"5\"\n title=\"Laisser le syst\u00E8me placer 5 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n >\n Moyen (5)\n </button>\n <button\n class=\"debug-panel-btn\"\n data-adverse-difficulty=\"9\"\n title=\"Laisser le syst\u00E8me placer 9 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n >\n Difficile (9)\n </button>\n <button\n class=\"debug-panel-btn\"\n data-adverse-difficulty=\"12\"\n title=\"Laisser le syst\u00E8me placer 12 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n >\n R\u00E9aliste (12)\n </button>\n </div>\n <div class=\"shared-controls-group\">\n <h3>Format Cause (Nouveau)</h3>\n <div class=\"debug-component-info\">\n <strong>Composant:</strong>\n <span id=\"current-component-cause\">-</span> |\n <strong>Orientation:</strong>\n <span id=\"current-orientation-cause\">-</span>\n </div>\n <div class=\"control-block\">\n <label for=\"slider-cause\">Tension:</label>\n <input\n id=\"slider-cause\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"0.5\"\n />\n <div class=\"slider-value\" id=\"slider-value-cause\">0.50</div>\n </div>\n <div class=\"control-block\">\n <label for=\"slider-cause-ghost\">Tension Ghost:</label>\n <input\n id=\"slider-cause-ghost\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"0.5\"\n />\n <div class=\"slider-value\" id=\"slider-value-cause-ghost\">0.50</div>\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-ghost\">Afficher Ghost:</label>\n <input id=\"toggle-cause-ghost\" type=\"checkbox\" checked />\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-children\">Afficher Enfants:</label>\n <input id=\"toggle-cause-children\" type=\"checkbox\" />\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-spark\">Etincelle perimetre:</label>\n <input id=\"toggle-cause-spark\" type=\"checkbox\" />\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-spikes\">Afficher Spikes:</label>\n <input id=\"toggle-cause-spikes\" type=\"checkbox\" checked />\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Rotation Yin/Yang</div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-rotation\">Rotation Yin/Yang:</label>\n <input id=\"toggle-cause-rotation\" type=\"checkbox\" />\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-rotation-clockwise\">Sens horaire:</label>\n <input id=\"toggle-cause-rotation-clockwise\" type=\"checkbox\" checked />\n </div>\n <div class=\"shared-control\">\n <label for=\"rotation-speed\">Vitesse cible:</label>\n <input\n id=\"rotation-speed\"\n type=\"range\"\n min=\"0\"\n max=\"1000\"\n step=\"1\"\n value=\"321\"\n title=\"\u00C9chelle logarithmique : de rapide (2s/tour, \u00E0 gauche) \u00E0 quasi \u00E0 l'arr\u00EAt (5min/tour, \u00E0 droite)\"\n />\n <span id=\"rotation-speed-value\">10s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"rotation-ramp\">Temps de rampe (acc\u00E9l./d\u00E9c\u00E9l.):</label>\n <input\n id=\"rotation-ramp\"\n type=\"range\"\n min=\"0\"\n max=\"3000\"\n step=\"100\"\n value=\"600\"\n />\n <span id=\"rotation-ramp-value\">0.6s</span>\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-rotation-idle-auto\">Auto-rotation apr\u00E8s inactivit\u00E9:</label>\n <input id=\"toggle-rotation-idle-auto\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"rotation-idle-delay\">Temps d'inactivit\u00E9:</label>\n <input\n id=\"rotation-idle-delay\"\n type=\"range\"\n min=\"2000\"\n max=\"300000\"\n step=\"1000\"\n value=\"20000\"\n disabled\n title=\"D\u00E9clenche automatiquement la rotation apr\u00E8s ce temps sans interaction \u2014 s'arr\u00EAte au retour d'activit\u00E9\"\n />\n <span id=\"rotation-idle-delay-value\">20s</span>\n </div>\n <div class=\"control-block-inline\">\n <label for=\"rotation-stop-mode\">Mode d'arr\u00EAt:</label>\n <select id=\"rotation-stop-mode\">\n <option value=\"normal\" selected>Normal (rampe)</option>\n <option value=\"instant\">Instantan\u00E9</option>\n <option value=\"fast\">Acc\u00E9l\u00E9r\u00E9 (dur\u00E9e r\u00E9glable)</option>\n </select>\n </div>\n <div class=\"shared-control\">\n <label for=\"rotation-fast-stop\">Dur\u00E9e arr\u00EAt acc\u00E9l\u00E9r\u00E9:</label>\n <input\n id=\"rotation-fast-stop\"\n type=\"range\"\n min=\"100\"\n max=\"3000\"\n step=\"100\"\n value=\"800\"\n title=\"Utilis\u00E9e par le mode d'arr\u00EAt Acc\u00E9l\u00E9r\u00E9 : rejoint toujours la position de base dans cette dur\u00E9e fixe (acc\u00E9l\u00E8re puis d\u00E9c\u00E9l\u00E8re si besoin), au lieu d'attendre la fin naturelle du tour\"\n />\n <span id=\"rotation-fast-stop-value\">0.8s</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Orbite Satellites</div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-cause-orbit\">Orbites enfants:</label>\n <input id=\"toggle-cause-orbit\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"orbit-speed\">Vitesse cible:</label>\n <input\n id=\"orbit-speed\"\n type=\"range\"\n min=\"-1000\"\n max=\"1000\"\n step=\"1\"\n value=\"884\"\n title=\"\u00C9chelle logarithmique sign\u00E9e : n\u00E9gatif = sens antihoraire, positif = sens horaire, 0 = \u00E0 l'arr\u00EAt ; les vitesses lentes (jusqu'\u00E0 0.005 rad/s) se r\u00E8glent finement pr\u00E8s du centre\"\n />\n <span id=\"orbit-speed-value\">1.00 rad/s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"orbit-ramp\">Temps de rampe (acc\u00E9l./d\u00E9c\u00E9l.):</label>\n <input\n id=\"orbit-ramp\"\n type=\"range\"\n min=\"0\"\n max=\"3000\"\n step=\"100\"\n value=\"600\"\n />\n <span id=\"orbit-ramp-value\">0.6s</span>\n </div>\n <div class=\"control-block-inline\">\n <label for=\"toggle-orbit-idle-auto\">Auto-orbite apr\u00E8s inactivit\u00E9:</label>\n <input id=\"toggle-orbit-idle-auto\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"orbit-idle-delay\">Temps d'inactivit\u00E9:</label>\n <input\n id=\"orbit-idle-delay\"\n type=\"range\"\n min=\"2000\"\n max=\"300000\"\n step=\"1000\"\n value=\"20000\"\n disabled\n title=\"D\u00E9clenche automatiquement l'orbite apr\u00E8s ce temps sans interaction \u2014 s'arr\u00EAte au retour d'activit\u00E9\"\n />\n <span id=\"orbit-idle-delay-value\">20s</span>\n </div>\n <div class=\"control-block-inline\">\n <label for=\"orbit-stop-mode\">Mode d'arr\u00EAt:</label>\n <select id=\"orbit-stop-mode\">\n <option value=\"normal\" selected>Normal (rampe)</option>\n <option value=\"instant\">Instantan\u00E9</option>\n <option value=\"fast\">Acc\u00E9l\u00E9r\u00E9 (dur\u00E9e r\u00E9glable)</option>\n </select>\n </div>\n <div class=\"shared-control\">\n <label for=\"orbit-fast-stop\">Dur\u00E9e arr\u00EAt acc\u00E9l\u00E9r\u00E9:</label>\n <input\n id=\"orbit-fast-stop\"\n type=\"range\"\n min=\"100\"\n max=\"3000\"\n step=\"100\"\n value=\"800\"\n title=\"Utilis\u00E9e par le mode d'arr\u00EAt Acc\u00E9l\u00E9r\u00E9 : rejoint toujours la position de base dans cette dur\u00E9e fixe (acc\u00E9l\u00E8re puis d\u00E9c\u00E9l\u00E8re si besoin), au lieu d'attendre la fin naturelle du tour\"\n />\n <span id=\"orbit-fast-stop-value\">0.8s</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Pr\u00E9f\u00E9rences</div>\n <div class=\"shared-control\">\n <button\n id=\"snapshot-controls-btn\"\n style=\"\n width: 100%;\n padding: 8px;\n cursor: pointer;\n background-color: #2196f3;\n color: white;\n border: none;\n border-radius: 4px;\n font-weight: bold;\n \"\n >\n \uD83D\uDCF8 Sauvegarder comme d\u00E9faut\n </button>\n </div>\n <div class=\"shared-control\">\n <button\n id=\"restore-controls-btn\"\n style=\"\n width: 100%;\n padding: 8px;\n cursor: pointer;\n background-color: #4caf50;\n color: white;\n border: none;\n border-radius: 4px;\n font-weight: bold;\n \"\n >\n \u21A9\uFE0F Restaurer d\u00E9fauts\n </button>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Affichage</div>\n <div class=\"shared-control\">\n <label for=\"toggle-cause-details-panel\"\n >Afficher panneau d\u00E9tails:</label\n >\n <input id=\"toggle-cause-details-panel\" type=\"checkbox\" checked />\n </div>\n <div class=\"shared-control\">\n <label for=\"details-panel-width\">Largeur panneau d\u00E9tails:</label>\n <input\n id=\"details-panel-width\"\n type=\"range\"\n min=\"220\"\n max=\"1200\"\n step=\"10\"\n value=\"600\"\n />\n <span id=\"details-panel-width-value\">600px</span>\n </div>\n </div>\n\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Ondes & p\u00E9rim\u00E8tre</div>\n <div class=\"shared-control\">\n <label for=\"wave-thickness\">\u00C9paisseur ondes:</label>\n <input\n id=\"wave-thickness\"\n type=\"range\"\n min=\"1\"\n max=\"5\"\n step=\"0.5\"\n value=\"1\"\n />\n <span id=\"wave-thickness-value\">1</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"perimeter-thickness\">\u00C9paisseur p\u00E9rim\u00E8tre:</label>\n <input\n id=\"perimeter-thickness\"\n type=\"range\"\n min=\"1\"\n max=\"5\"\n step=\"0.5\"\n value=\"5\"\n />\n <span id=\"perimeter-thickness-value\">5</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"perimeter-solid\">P\u00E9rim\u00E8tre plein:</label>\n <input id=\"perimeter-solid\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"perimeter-wave-opacity\">Opacit\u00E9 p\u00E9rim\u00E8tre/ondes:</label>\n <input\n id=\"perimeter-wave-opacity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"perimeter-wave-opacity-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"wave-count\">Nombre d'ondes:</label>\n <input\n id=\"wave-count\"\n type=\"range\"\n min=\"1\"\n max=\"10\"\n step=\"1\"\n value=\"10\"\n />\n <span id=\"wave-count-value\">10</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"wave-spacing\">Espacement ondes:</label>\n <input\n id=\"wave-spacing\"\n type=\"range\"\n min=\"0.5\"\n max=\"2\"\n step=\"0.1\"\n value=\"2.0\"\n />\n <span id=\"wave-spacing-value\">2.0</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Yin/yang Ghosts parameters</div>\n <div class=\"shared-control\">\n <label for=\"yin-opacity\">Opacit\u00E9 yin ghost:</label>\n <input\n id=\"yin-opacity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.6\"\n />\n <span id=\"yin-opacity-value\">0.60</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yang-opacity\">Opacit\u00E9 yang ghost:</label>\n <input\n id=\"yang-opacity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.6\"\n />\n <span id=\"yang-opacity-value\">0.60</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"wave-color-increase\"\n >Couleur tension d\u00E9terioration:</label\n >\n <input\n id=\"wave-color-increase\"\n type=\"color\"\n value=\"#aa0000\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"wave-color-decrease\"\n >Couleur tension am\u00E9lioration:</label\n >\n <input\n id=\"wave-color-decrease\"\n type=\"color\"\n value=\"#00aa00\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"ghost-pulse-duration\">Dur\u00E9e pulsation ghost (s):</label>\n <input\n id=\"ghost-pulse-duration\"\n type=\"range\"\n min=\"1\"\n max=\"10\"\n step=\"0.5\"\n value=\"1.5\"\n />\n <span id=\"ghost-pulse-duration-value\">1.5</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"base-pulse-enabled\">Pulsation rayons activ\u00E9e:</label>\n <input id=\"base-pulse-enabled\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"pulse-morph-ratio\">Ratio morphing/reset:</label>\n <input\n id=\"pulse-morph-ratio\"\n type=\"range\"\n min=\"0.1\"\n max=\"0.9\"\n step=\"0.05\"\n value=\"0.85\"\n />\n <span id=\"pulse-morph-ratio-value\">85/15</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"wave-travel-duration\">Dur\u00E9e trajet onde (s):</label>\n <input\n id=\"wave-travel-duration\"\n type=\"range\"\n min=\"0.3\"\n max=\"5\"\n step=\"0.1\"\n value=\"1.2\"\n />\n <span id=\"wave-travel-duration-value\">1.2</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"ghost-delta-badge-scale\"\n >Taille badge delta (c\u0153ur):</label\n >\n <input\n id=\"ghost-delta-badge-scale\"\n type=\"range\"\n min=\"0.8\"\n max=\"2.5\"\n step=\"0.05\"\n value=\"1.35\"\n />\n <span id=\"ghost-delta-badge-scale-value\">1.35</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Yin/yang children</div>\n <div class=\"shared-control\">\n <label for=\"child-scale\">Taille enfants:</label>\n <input\n id=\"child-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.4\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"child-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"children-orbit-distance\">Distance orbite:</label>\n <input\n id=\"children-orbit-distance\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.6\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"children-orbit-distance-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"random-force-fields-count\"\n >Nb champs force al\u00E9atoires:</label\n >\n <input\n id=\"random-force-fields-count\"\n type=\"range\"\n min=\"0\"\n max=\"6\"\n step=\"1\"\n value=\"2\"\n />\n <span id=\"random-force-fields-count-value\">2</span>\n </div>\n </div>\n\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Com\u00E8te de propagation</div>\n <div class=\"shared-control\">\n <label for=\"comet-loop-gap\">Pause entre deux passes:</label>\n <input\n id=\"comet-loop-gap\"\n type=\"range\"\n min=\"0\"\n max=\"10000\"\n step=\"250\"\n value=\"3000\"\n title=\"Boucle jou\u00E9e sur les champs de force de l'action en focus (STACK) : pause entre la fin d'une passe et le d\u00E9part de la suivante\"\n />\n <span id=\"comet-loop-gap-value\">3.0s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"comet-speed\">Vitesse:</label>\n <input\n id=\"comet-speed\"\n type=\"range\"\n min=\"40\"\n max=\"600\"\n step=\"10\"\n value=\"180\"\n title=\"Vitesse de croisi\u00E8re le long du chemin (px/s) \u2014 le trajet entier est jou\u00E9 d'un seul mouvement adouci\"\n />\n <span id=\"comet-speed-value\">180 px/s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"comet-min-travel\">Dur\u00E9e minimale du trajet:</label>\n <input\n id=\"comet-min-travel\"\n type=\"range\"\n min=\"200\"\n max=\"3000\"\n step=\"50\"\n value=\"900\"\n title=\"Plancher de dur\u00E9e pour qu'un chemin tr\u00E8s court reste lisible\"\n />\n <span id=\"comet-min-travel-value\">0.90s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"comet-dot-radius\">Taille du noyau:</label>\n <input\n id=\"comet-dot-radius\"\n type=\"range\"\n min=\"1.5\"\n max=\"12\"\n step=\"0.5\"\n value=\"4.5\"\n />\n <span id=\"comet-dot-radius-value\">4.5</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"comet-opacity\">Opacit\u00E9:</label>\n <input\n id=\"comet-opacity\"\n type=\"range\"\n min=\"0.1\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.85\"\n />\n <span id=\"comet-opacity-value\">0.85</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"comet-tail-ms\">Longueur de la queue:</label>\n <input\n id=\"comet-tail-ms\"\n type=\"range\"\n min=\"0\"\n max=\"2000\"\n step=\"20\"\n value=\"520\"\n title=\"Exprim\u00E9e en temps de trajet : la queue est l'ombre des positions r\u00E9centes, elle suit les virages\"\n />\n <span id=\"comet-tail-ms-value\">520 ms</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"comet-tail-width\">\u00C9paisseur de la queue:</label>\n <input\n id=\"comet-tail-width\"\n type=\"range\"\n min=\"0.5\"\n max=\"8\"\n step=\"0.25\"\n value=\"3\"\n />\n <span id=\"comet-tail-width-value\">3.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"comet-glow\">Halo / glow:</label>\n <input\n id=\"comet-glow\"\n type=\"range\"\n min=\"0\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1\"\n />\n <span id=\"comet-glow-value\">1.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"comet-fade\">Fondu d\u00E9part / arriv\u00E9e:</label>\n <input\n id=\"comet-fade\"\n type=\"range\"\n min=\"0\"\n max=\"1200\"\n step=\"20\"\n value=\"320\"\n />\n <span id=\"comet-fade-value\">320 ms</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"comet-ring-opacity\">Anneaux d'arriv\u00E9e:</label>\n <input\n id=\"comet-ring-opacity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.55\"\n title=\"Opacit\u00E9 de d\u00E9part de l'anneau \u00E0 chaque satellite atteint (0 = aucun anneau)\"\n />\n <span id=\"comet-ring-opacity-value\">0.55</span>\n </div>\n <div class=\"control-block-inline\">\n <label for=\"comet-use-item-color\">Couleur de l'action:</label>\n <input\n id=\"comet-use-item-color\"\n type=\"checkbox\"\n checked\n title=\"Prendre la couleur de l'item de la pile ; d\u00E9coch\u00E9 : couleur fixe ci-dessous\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"comet-color\">Couleur fixe / de repli:</label>\n <input\n id=\"comet-color\"\n type=\"color\"\n value=\"#7fd8ff\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n </div>\n\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Libell\u00E9s</div>\n <div class=\"shared-control\">\n <label for=\"toggle-cause-action-deltas\"\n >Afficher deltas d'action:</label\n >\n <input id=\"toggle-cause-action-deltas\" type=\"checkbox\" checked />\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-cause-children-labels\"\n >Afficher libell\u00E9s enfants:</label\n >\n <input id=\"toggle-cause-children-labels\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-cause-odd-labels\">Afficher libell\u00E9s ODD:</label>\n <input id=\"toggle-cause-odd-labels\" type=\"checkbox\" checked />\n </div>\n\n <div class=\"shared-control\">\n <label for=\"label-font-scale\">Taille police enfant:</label>\n <input\n id=\"label-font-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.8\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"label-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"component-label-font-scale\"\n >Taille police Libell\u00E9 facette:</label\n >\n <input\n id=\"component-label-font-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.8\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"component-label-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"component-legend-label-font-scale\"\n >Taille police libell\u00E9s d\u00E9ploy\u00E9s:</label\n >\n <input\n id=\"component-legend-label-font-scale\"\n type=\"range\"\n min=\"0.4\"\n max=\"3.0\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"component-legend-label-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"odd-label-font-scale\">Taille police ODD:</label>\n <input\n id=\"odd-label-font-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.8\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"odd-label-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-label-font-scale\"\n >Taille police score/poids facette:</label\n >\n <input\n id=\"facette-label-font-scale\"\n type=\"range\"\n min=\"0.4\"\n max=\"3.0\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"facette-label-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-facette-label-suffix\"\n >Afficher \"/max\" (score/poids facette et ODD):</label\n >\n <input id=\"toggle-facette-label-suffix\" type=\"checkbox\" />\n </div>\n <div class=\"shared-control\">\n <label for=\"action-stack-label-font-scale\"\n >Taille police actions:</label\n >\n <input\n id=\"action-stack-label-font-scale\"\n type=\"range\"\n min=\"0.5\"\n max=\"3.0\"\n step=\"0.05\"\n value=\"1.5\"\n />\n <span id=\"action-stack-label-font-scale-value\">1.50</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"action-stack-history-button-scale\"\n >Taille boutons Undo/Redo:</label\n >\n <input\n id=\"action-stack-history-button-scale\"\n type=\"range\"\n min=\"0.5\"\n max=\"3.0\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"action-stack-history-button-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"child-label-max-lines\">Lignes libell\u00E9s enfants:</label>\n <input\n id=\"child-label-max-lines\"\n type=\"range\"\n min=\"1\"\n max=\"3\"\n step=\"1\"\n value=\"1\"\n />\n <span id=\"child-label-max-lines-value\">1</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"odd-label-max-lines\">Lignes libell\u00E9s ODD:</label>\n <input\n id=\"odd-label-max-lines\"\n type=\"range\"\n min=\"1\"\n max=\"3\"\n step=\"1\"\n value=\"1\"\n />\n <span id=\"odd-label-max-lines-value\">1</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"label-short-max-chars\">Caract\u00E8res max (ellipse):</label>\n <input\n id=\"label-short-max-chars\"\n type=\"range\"\n min=\"5\"\n max=\"250\"\n step=\"1\"\n value=\"20\"\n />\n <span id=\"label-short-max-chars-value\">20</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-label-shadow\">Ombre texte:</label>\n <input id=\"toggle-label-shadow\" type=\"checkbox\" checked />\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-legend-labels-bg\"\n >Cadre libell\u00E9s d\u00E9ploy\u00E9s:</label\n >\n <input id=\"toggle-legend-labels-bg\" type=\"checkbox\" checked />\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Combos</div>\n <div class=\"shared-control\">\n <label for=\"toggle-combo-uncapped-chained-performance\"\n >Performances cha\u00EEn\u00E9es non plafonn\u00E9es:</label\n >\n <input\n id=\"toggle-combo-uncapped-chained-performance\"\n type=\"checkbox\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"toggle-combo-dangerous-can-become-bonus\"\n >Un combo dangereux peut devenir un bonus:</label\n >\n <input\n id=\"toggle-combo-dangerous-can-become-bonus\"\n type=\"checkbox\"\n />\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Etat/Delta</div>\n <div class=\"shared-control\">\n <label for=\"child-state-delta-font-scale\"\n >Taille police \u00C9tats/Delta enfants:</label\n >\n <input\n id=\"child-state-delta-font-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"1.8\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"child-state-delta-font-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"child-state-delta-offset\"\n >Distance \u00C9tats/Delta enfants:</label\n >\n <input\n id=\"child-state-delta-offset\"\n type=\"range\"\n min=\"0\"\n max=\"100\"\n step=\"1\"\n value=\"20\"\n />\n <span id=\"child-state-delta-offset-value\">20</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"child-state-delta-box-scale\"\n >Taille anneau s\u00E9lection:</label\n >\n <input\n id=\"child-state-delta-box-scale\"\n type=\"range\"\n min=\"0.3\"\n max=\"3.0\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"child-state-delta-box-scale-value\">1.00</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Grappe actions</div>\n <div class=\"shared-control\">\n <label for=\"child-action-menu-distance\">Distance bottons:</label>\n <input\n id=\"child-action-menu-distance\"\n type=\"range\"\n min=\"0.8\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.7\"\n />\n <span id=\"child-action-menu-distance-value\">1.70</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"child-action-menu-scale\">Taille buttons:</label>\n <input\n id=\"child-action-menu-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.0\"\n />\n <span id=\"child-action-menu-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"child-action-icon-scale\">Taille ic\u00F4nes:</label>\n <input\n id=\"child-action-icon-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.0\"\n />\n <span id=\"child-action-icon-scale-value\">1.00</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">\u00C9v\u00E9nements cl\u00E9s</div>\n <div class=\"shared-control\">\n <label for=\"core-event-menu-distance-offset\"\n >Distance boutons:</label\n >\n <input\n id=\"core-event-menu-distance-offset\"\n type=\"range\"\n min=\"-80\"\n max=\"80\"\n step=\"5\"\n value=\"0\"\n />\n <span id=\"core-event-menu-distance-offset-value\">0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"core-event-menu-scale\">Taille boutons:</label>\n <input\n id=\"core-event-menu-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.0\"\n />\n <span id=\"core-event-menu-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"core-event-icon-scale\">Taille ic\u00F4nes:</label>\n <input\n id=\"core-event-icon-scale\"\n type=\"range\"\n min=\"0.6\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.0\"\n />\n <span id=\"core-event-icon-scale-value\">1.00</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Yin/yang</div>\n <div class=\"shared-control\">\n <label for=\"odd-gradient-spread\">Progression d\u00E9grad\u00E9:</label>\n <input\n id=\"odd-gradient-spread\"\n type=\"range\"\n min=\"0.3\"\n max=\"1\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"odd-gradient-spread-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"odd-gradient-intensity\">Intensit\u00E9 couleur:</label>\n <input\n id=\"odd-gradient-intensity\"\n type=\"range\"\n min=\"0.2\"\n max=\"1\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"odd-gradient-intensity-value\">1.00</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Bordures</div>\n <div class=\"shared-control\">\n <label for=\"border-spark-intensity\">Intensite etincelle:</label>\n <input\n id=\"border-spark-intensity\"\n type=\"range\"\n min=\"0\"\n max=\"2\"\n step=\"0.1\"\n value=\"2\"\n />\n <span id=\"border-spark-intensity-value\">2.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-spark-length\">Longueur etincelle:</label>\n <input\n id=\"border-spark-length\"\n type=\"range\"\n min=\"0.1\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"0.1\"\n />\n <span id=\"border-spark-length-value\">0.1</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-spark-width\">Epaisseur etincelle:</label>\n <input\n id=\"border-spark-width\"\n type=\"range\"\n min=\"0.5\"\n max=\"3\"\n step=\"0.1\"\n value=\"3\"\n />\n <span id=\"border-spark-width-value\">3.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-spark-glow-color\">Couleur glow etincelle:</label>\n <input\n id=\"border-spark-glow-color\"\n type=\"color\"\n value=\"#72f5ff\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"border-spark-speed\">Vitesse etincelle:</label>\n <input\n id=\"border-spark-speed\"\n type=\"range\"\n min=\"800\"\n max=\"8000\"\n step=\"100\"\n value=\"7000\"\n />\n <span id=\"border-spark-speed-value\">7.0s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-glow-intensity\">Glow/Halo:</label>\n <input\n id=\"border-glow-intensity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.5\"\n />\n <span id=\"border-glow-intensity-value\">0.50</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-segment-width-expansion\"\n >\u00C9largissement segment actif:</label\n >\n <input\n id=\"border-segment-width-expansion\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.25\"\n />\n <span id=\"border-segment-width-expansion-value\">0.25</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-segment-corner-radius\">Arrondi des arcs:</label>\n <input\n id=\"border-segment-corner-radius\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.6\"\n />\n <span id=\"border-segment-corner-radius-value\">0.60</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-segment-bevel-intensity\">Biseau des arcs:</label>\n <input\n id=\"border-segment-bevel-intensity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.7\"\n />\n <span id=\"border-segment-bevel-intensity-value\">0.70</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"border-segment-hover-lift\">Soul\u00E8vement survol:</label>\n <input\n id=\"border-segment-hover-lift\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0.35\"\n />\n <span id=\"border-segment-hover-lift-value\">0.35</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">yinyang sparks</div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-intensity\">Intensite etincelle:</label>\n <input\n id=\"yinyang-spark-intensity\"\n type=\"range\"\n min=\"0\"\n max=\"2\"\n step=\"0.1\"\n value=\"2\"\n />\n <span id=\"yinyang-spark-intensity-value\">2.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-max-length\"\n >Longueur max etincelle:</label\n >\n <input\n id=\"yinyang-spark-max-length\"\n type=\"range\"\n min=\"0.1\"\n max=\"2.5\"\n step=\"0.1\"\n value=\"1.5\"\n />\n <span id=\"yinyang-spark-max-length-value\">1.5</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-width\">Epaisseur etincelle:</label>\n <input\n id=\"yinyang-spark-width\"\n type=\"range\"\n min=\"0.5\"\n max=\"3\"\n step=\"0.1\"\n value=\"3\"\n />\n <span id=\"yinyang-spark-width-value\">3.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-duration\">Duree etincelle:</label>\n <input\n id=\"yinyang-spark-duration\"\n type=\"range\"\n min=\"800\"\n max=\"8000\"\n step=\"100\"\n value=\"3500\"\n />\n <span id=\"yinyang-spark-duration-value\">3.5s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-yang-color\"\n >Couleur etincelle Yang:</label\n >\n <input\n id=\"yinyang-spark-yang-color\"\n type=\"color\"\n value=\"#72f5ff\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-yin-color\"\n >Couleur etincelle Yin:</label\n >\n <input\n id=\"yinyang-spark-yin-color\"\n type=\"color\"\n value=\"#ff4da6\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-ember-distance\"\n >Portee crepitement:</label\n >\n <input\n id=\"yinyang-spark-ember-distance\"\n type=\"range\"\n min=\"10\"\n max=\"150\"\n step=\"5\"\n value=\"90\"\n />\n <span id=\"yinyang-spark-ember-distance-value\">90</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-ember-size\">Taille crepitement:</label>\n <input\n id=\"yinyang-spark-ember-size\"\n type=\"range\"\n min=\"0.2\"\n max=\"3\"\n step=\"0.1\"\n value=\"1\"\n />\n <span id=\"yinyang-spark-ember-size-value\">1.0</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-ember-speed\">Vitesse crepitement:</label>\n <input\n id=\"yinyang-spark-ember-speed\"\n type=\"range\"\n min=\"100\"\n max=\"1500\"\n step=\"50\"\n value=\"500\"\n />\n <span id=\"yinyang-spark-ember-speed-value\">0.50s</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-ember-color\"\n >Couleur crepitement:</label\n >\n <input\n id=\"yinyang-spark-ember-color\"\n type=\"color\"\n value=\"#fff3c4\"\n style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n />\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-taper-power\">Forme tetard:</label>\n <input\n id=\"yinyang-spark-taper-power\"\n type=\"range\"\n min=\"1\"\n max=\"6\"\n step=\"0.1\"\n value=\"2.2\"\n />\n <span id=\"yinyang-spark-taper-power-value\">2.2</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-birth-width\">Largeur naissance:</label>\n <input\n id=\"yinyang-spark-birth-width\"\n type=\"range\"\n min=\"0\"\n max=\"0.9\"\n step=\"0.05\"\n value=\"0\"\n />\n <span id=\"yinyang-spark-birth-width-value\">0.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-drift-count\">Nombre de tetards:</label>\n <input\n id=\"yinyang-spark-drift-count\"\n type=\"range\"\n min=\"1\"\n max=\"10\"\n step=\"1\"\n value=\"3\"\n />\n <span id=\"yinyang-spark-drift-count-value\">3</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-drift-remnant-scale\"\n >Longueur reliquat:</label\n >\n <input\n id=\"yinyang-spark-drift-remnant-scale\"\n type=\"range\"\n min=\"0.05\"\n max=\"3\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"yinyang-spark-drift-remnant-scale-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"yinyang-spark-drift-centrifugal-force\"\n >Force centrifuge tetards:</label\n >\n <input\n id=\"yinyang-spark-drift-centrifugal-force\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"0.15\"\n />\n <span id=\"yinyang-spark-drift-centrifugal-force-value\"\n >0.15</span\n >\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Images facette</div>\n <div class=\"shared-control\">\n <label for=\"facette-image-margin\">Marge vignettes:</label>\n <input\n id=\"facette-image-margin\"\n type=\"range\"\n min=\"0\"\n max=\"40\"\n step=\"1\"\n value=\"10\"\n />\n <span id=\"facette-image-margin-value\">10</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-image-fade-start\">D\u00E9but du fondu:</label>\n <input\n id=\"facette-image-fade-start\"\n type=\"range\"\n min=\"0\"\n max=\"95\"\n step=\"5\"\n value=\"50\"\n />\n <span id=\"facette-image-fade-start-value\">50%</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-image-fade-opacity\">Opacit\u00E9 au bord:</label>\n <input\n id=\"facette-image-fade-opacity\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"0\"\n />\n <span id=\"facette-image-fade-opacity-value\">0.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-image-diameter\">Diam\u00E8tre vignettes:</label>\n <input\n id=\"facette-image-diameter\"\n type=\"range\"\n min=\"0.2\"\n max=\"2\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"facette-image-diameter-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-image-weight-curve\">Courbe r\u00E9tr\u00E9cissement (poids):</label>\n <input\n id=\"facette-image-weight-curve\"\n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n value=\"1\"\n />\n <span id=\"facette-image-weight-curve-value\">1.00</span>\n </div>\n <div class=\"shared-control\">\n <label for=\"facette-image-offset\">\u00C9loignement depuis la sph\u00E8re:</label>\n <input\n id=\"facette-image-offset\"\n type=\"range\"\n min=\"-150\"\n max=\"150\"\n step=\"5\"\n value=\"0\"\n />\n <span id=\"facette-image-offset-value\">0</span>\n </div>\n </div>\n <div class=\"shared-controls-group\">\n <div class=\"shared-controls-title\">Pictogrammes ODD</div>\n <div class=\"shared-control\">\n <label for=\"odd-chip-zoom\">Grossissement au clic:</label>\n <input\n id=\"odd-chip-zoom\"\n type=\"range\"\n min=\"1\"\n max=\"10\"\n step=\"1\"\n value=\"5\"\n />\n <span id=\"odd-chip-zoom-value\">5x</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n";
package/dist/types/config/animationConfig.d.ts CHANGED
@@ -11,6 +11,13 @@ export declare const animationConfig: {
11
11
  orbitRampMs: number;
12
12
  forceFieldRevealDurationMs: number;
13
13
  forceFieldRevealChainStepMs: number;
14
+ /** Opacité des champs de force qui n'appartiennent pas au satellite source
15
+ * de l'action en focus (clic sur l'en-tête d'un bloc du panneau) — les
16
+ * champs de la source en focus restent à 1. Voir ForceFieldRenderer. */
17
+ forceFieldDimmedEmphasis: number;
18
+ /** Constante de temps du lissage exponentiel entre plein et atténué :
19
+ * ~95 % de convergence en 3× cette durée, sans « pop » à la (dé)sélection. */
20
+ forceFieldEmphasisSmoothingMs: number;
14
21
  /** Fondu de sortie du champ de force d'action ET du champ d'événement quand
15
22
  * ils n'ont plus rien à montrer (désélection, menu fermé, switch de
16
23
  * facette) — plus court que forceFieldRevealDurationMs : disparaître doit
package/dist/types/config/propagationCometConfig.d.ts ADDED
@@ -0,0 +1,41 @@
1
+ /**
2
+ * Réglages (mutables, panneau Debug « Comète de propagation ») de l'animation
3
+ * de propagation : une comète qui parcourt les champs de force de la source
4
+ * jusqu'aux feuilles, avec une queue fondue, un halo doux et des anneaux
5
+ * discrets à chaque satellite atteint. Jouée en boucle sur l'action en focus
6
+ * (YinYangController.flashSourcePropagationTree) et au clic sur une ligne du
7
+ * panneau (flashChildCuttings). Lue à chaque frame : un changement de valeur
8
+ * s'applique à la passe en cours.
9
+ */
10
+ export declare const propagationCometConfig: {
11
+ /** Pause entre deux passes de la boucle de l'action en focus. */
12
+ loopGapMs: number;
13
+ /** Vitesse de croisière de la comète le long du chemin (px/s). Le chemin
14
+ * entier est joué d'un seul mouvement (accélération/décélération douces
15
+ * aux deux bouts, pas d'arrêt aux étapes intermédiaires). */
16
+ speedPxPerSec: number;
17
+ /** Durée minimale d'une traversée, pour qu'un chemin très court reste
18
+ * lisible. */
19
+ minTravelMs: number;
20
+ /** Rayon du noyau de la comète (px). */
21
+ dotRadius: number;
22
+ /** Opacité maximale de l'ensemble (noyau, queue, halo). */
23
+ opacity: number;
24
+ /** Longueur de la queue, exprimée en temps de trajet (ms) : la queue est
25
+ * l'ombre des positions récentes, elle suit donc les virages aux étapes. */
26
+ tailMs: number;
27
+ /** Épaisseur de la queue à sa base (px), décroissante vers la pointe. */
28
+ tailWidth: number;
29
+ /** Intensité du halo flouté et du glow (0 = aucun, 1 = nominal). */
30
+ glow: number;
31
+ /** Fondu d'apparition au départ et d'extinction à l'arrivée (ms). */
32
+ fadeMs: number;
33
+ /** Opacité de départ des anneaux à chaque satellite atteint (0 = aucun). */
34
+ ringOpacity: number;
35
+ /** true : la comète prend la couleur de l'action (item de la pile) ; false :
36
+ * couleur fixe ci-dessous. */
37
+ useItemColor: boolean;
38
+ /** Couleur fixe (et couleur de repli quand aucune action n'est identifiable). */
39
+ color: string;
40
+ };
41
+ export type PropagationCometConfig = typeof propagationCometConfig;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micheeeeel/yinyangapp",
3
- "version": "2.2.2",
3
+ "version": "2.3.1",
4
4
  "description": "A program to visualize human activity balance to reach Sustainable Development Objectives",
5
5
  "main": "dist/bundle.js",
6
6
  "types": "dist/types/main.d.ts",