@micheeeeel/yinyangapp 2.1.1 → 2.2.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 (6) hide show
  1. package/dist/bundle.js +1 -1
  2. package/dist/types/api-workspace.d.ts +16 -0
  3. package/dist/types/api.d.ts +2 -0
  4. package/dist/types/components/workspace/workspaceBootstrap.d.ts +1 -0
  5. package/dist/types/components/workspace/workspaceTemplate.d.ts +1 -0
  6. package/package.json +1 -1
package/dist/types/api-workspace.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ export interface YinYangWorkspaceConfig {
2
+ /** Élément DOM (ou son id) déjà présent dans la page, dimensionné par l'hôte. */
3
+ container: HTMLElement | string;
4
+ }
5
+ export interface YinYangWorkspaceHandle {
6
+ /** Démonte le workspace : markup retiré du conteneur, overlays retirés du
7
+ * body, écouteurs propres au bootstrap détachés. Best-effort : certains
8
+ * écouteurs document posés par des sous-composants restent en place mais
9
+ * deviennent inertes (leur DOM cible n'existe plus). */
10
+ destroy(): void;
11
+ }
12
+ /**
13
+ * Monte le workspace Sphères complet dans `config.container`.
14
+ * À appeler côté client uniquement (accès au DOM).
15
+ */
16
+ export declare function mountYinYangWorkspace(config: YinYangWorkspaceConfig): YinYangWorkspaceHandle;
package/dist/types/api.d.ts CHANGED
@@ -49,3 +49,5 @@ export type { YinYangFilmConfig, YinYangFilmAsyncOptions } from "./api-film";
49
49
  export { createRandomCause } from "./api-random";
50
50
  export type { RandomCauseOptions, RandomRange } from "./api-random";
51
51
  export { getYasuniCause } from "./adapters/yasuniCauseAdapter";
52
+ export { mountYinYangWorkspace } from "./api-workspace";
53
+ export type { YinYangWorkspaceConfig, YinYangWorkspaceHandle, } from "./api-workspace";
package/dist/types/components/workspace/workspaceBootstrap.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function bootstrapWorkspace(): () => void;
package/dist/types/components/workspace/workspaceTemplate.d.ts ADDED
@@ -0,0 +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";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micheeeeel/yinyangapp",
3
- "version": "2.1.1",
3
+ "version": "2.2.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",