@micheeeeel/yinyangapp 3.0.1 → 3.1.0

package/dist/types/components/view/ViewInitializer.d.ts

@@ -11,6 +11,12 @@ export declare class ViewInitializer {
     graphicContainer: IGraphicElement;
     graphicStrategy: IGraphicsStrategy;
     globalGroup: IGraphicElement;
+    /** Enveloppe du globalGroup d'un satellite, sous le children-group du
+     *  parent : porte la seule translation d'orbite, jouée par le navigateur
+     *  (ChildrenOrbitManager), sans toucher aux transforms que d'autres posent
+     *  sur le globalGroup (respiration du poids). C'est le nœud à retirer pour
+     *  supprimer le satellite. Pour le parent : son globalGroup. */
+    orbitGroup: IGraphicElement;
     yinOrYangGroup: {
         yin: IYinOrYangPattern;
         yang: IYinOrYangPattern;
@@ -20,6 +26,11 @@ export declare class ViewInitializer {
         yang: IYinOrYangPattern;
     };
     yinYangGroup: IGraphicElement;
+    /** Rappelé, une fois par tâche, quand ce qui suit la rotation Yin/Yang
+     *  change : géométrie des lobes, libellés contre-tournés redessinés.
+     *  AnimationsMngr y refait ses animations pendant une rotation. */
+    onRotationTargetsChanged: (() => void) | null;
+    private rotationTargetsChangePending;
     childrenGroup: IGraphicElement;
     facetteImageBackgroundGroup: IGraphicElement;
     borderArcsGroup: IGraphicElement;
@@ -220,6 +231,8 @@ export declare class ViewInitializer {
     private currentComponentIndex;
     private animationSequence;
     private isAnimationRunning;
+    private transitionFrameId;
+    private observedRoot;
     private isDisplayingOddMode;
     /**
      * Returns whether the view is currently in ODD display mode.
@@ -285,6 +298,18 @@ export declare class ViewInitializer {
      * Keeps yinYangGroup intact while refreshing symbol groups and spikes.
      */
     private redrawYinYangGeometry;
+    /**
+     * Frame d'une transition de facette ou d'ODD : quand les nœuds du dernier
+     * rendu complet couvrent déjà les catégories de la frame, seuls leurs
+     * attributs sont réécrits (YinYangDrawer.updateSwitchFrame,
+     * SpikeDrawer.updateSpikePositions) ; sinon — typiquement la première
+     * frame, où les catégories entrantes rejoignent les sortantes — rendu
+     * complet. Bordures, poids de la facette et illustration idle ne dépendent
+     * pas de l'interpolation : ils attendent la dernière frame, toujours rendue
+     * en entier pour que l'état final soit exactement celui d'un rendu complet.
+     */
+    private renderTransitionFrame;
+    private updateGeometryInPlace;
     /**
      * Redraws the ghost Yin/Yang geometry without touching borders or spikes.
      */
@@ -306,11 +331,10 @@ export declare class ViewInitializer {
     getAverageTension(): number;
     getAverageState(): number;
     /** Poids C_f de la facette courante : moyenne des poids de tous ses
-     *  satellites (`meanWeight`, même règle que `perimeterWeight`, qui fixe la
+     *  satellites (`facetWeight`, même règle que `perimeterWeight`, qui fixe la
      *  taille de son arc de bordure). */
     getFacetteWeight(): number;
-    /** Plafond du poids C_f : WEIGHT_MAX, quel que soit le nombre de
-     *  satellites. */
+    /** Plafond du poids de la facette courante (`facetWeightMax`). */
     getFacetteWeightMax(): number;
     /** getFacetteWeight pour une facette quelconque (poids de chaque arc de
      *  bordure quand "Afficher libellés" est actif). */
@@ -321,9 +345,9 @@ export declare class ViewInitializer {
     /**
      * Centre courant (écran, repère de `globalGroup`) du sous-cercle yin ou
      * yang, en tenant compte d'une éventuelle rotation Yin/Yang en cours
-     * (AnimationsMngr écrit un `transform` orbite+spin directement sur
-     * `yinOrYangGroup[orientation].graphElementGroup` à chaque frame, sans
-     * jamais toucher `geometry`). Résolu via le CTM plutôt qu'en rejouant la
+     * (AnimationsMngr anime, par Web Animations, un `transform` orbite+spin
+     * sur `yinOrYangGroup[orientation].graphElementGroup`, sans jamais
+     * toucher `geometry` ; le CTM reflète la valeur animée courante). Résolu via le CTM plutôt qu'en rejouant la
      * formule d'orbite d'AnimationsMngr : le point transformé est le centre
      * CANONIQUE du lobe, qui est aussi le pivot de sa rotation locale — une
      * rotation autour de son propre point fixe n'a par construction aucun
@@ -406,6 +430,10 @@ export declare class ViewInitializer {
      */
     private interpolateCategoriesRGB;
     private startCategoryAnimation;
+    private requestTransitionFrame;
+    /** Fin de vie : coupe la transition de facette en cours, le suivi de
+     *  visibilité du diagramme et le rappel de rotation. */
+    destroy(): void;
     private startComponentAnimationLoop;
     private getAnimationCurrentState;
     private getComponentAnimationState;
@@ -442,7 +470,14 @@ export declare class ViewInitializer {
     private buildGhostOddSpikes;
     private buildGhostComponentSpikes;
     private areCategoriesEqual;
-    private clearGroupChildren;
+    /**
+     * Vide un lobe avant son rendu complet, sauf ses libellés (calque des
+     * libellés d'arc ODD, score de la facette) : leurs rendus les mettent à
+     * jour par jointure, ce qui les garde visibles d'un rendu à l'autre. Les
+     * recréer à chaque rendu les faisait repartir d'une opacité nulle — et les
+     * laissait invisibles pendant toute une transition de facette.
+     */
+    private clearLobeGroup;
     /**
      * Converts hex color to RGB object.
      * @param hex Hex color (e.g., "#FF0000")
@@ -473,6 +508,9 @@ export declare class ViewInitializer {
      */
     private createYinOrYangGroups;
     private updateYinOrYangGroup;
+    /** Signale (en fin de tâche, après le rendu en cours) que les cibles de
+     *  la rotation ont changé — voir onRotationTargetsChanged. */
+    notifyRotationTargetsChanged(): void;
     private applyGhostOverlapRules;
     private buildGeometry;
     private buildSpikes;

package/dist/types/components/view/YinYangDrawer.d.ts

@@ -1,5 +1,23 @@
 import { ViewInitializer } from "./ViewInitializer";
 import { IYinOrYangPattern } from "../../interfaces/IYinOrYangPattern";
+/**
+ * Exécute `draw` en différant l'ajustement des pastilles de poids
+ * (fitWeightPill) qu'il demande : toutes les mesures d'abord, toutes les
+ * écritures ensuite. Créer les satellites un à un alternait sinon écriture
+ * du DOM et getBBox, soit une mise en page complète par satellite.
+ */
+export declare function batchWeightPillFits(draw: () => void): void;
+/** Libellé qui reste droit pendant la rotation Yin/Yang (voir
+ *  YinYangDrawer.getCounterRotatedLabels). */
+export interface CounterRotatedLabel {
+    node: Element;
+    lobe: "yin" | "yang";
+    /** Pivot de la contre-rotation ; nul = origine locale du nœud. */
+    pivot: {
+        x: number;
+        y: number;
+    } | null;
+}
 export declare class YinYangDrawer {
     private ViewInitializer;
     private yinYangGroup;
@@ -23,6 +41,9 @@ export declare class YinYangDrawer {
      *  ViewInitializer.ghostDeltaBadgeSizeBoost pour l'agrandissement, réglable
      *  en direct, appliqué au-delà de cette base. */
     private readonly GHOST_DELTA_BADGE_NUCLEUS_FILL;
+    /** Arcs d'onde des ODD et leur générateur, gardés d'une frame à l'autre
+     *  tant que les entrées, le calque et la géométrie ne changent pas. */
+    private categoryArcGhostWaveCache;
     private categoryArcGhostEntries;
     private categoryArcGhostFrameId;
     private readonly CHILD_SCORE_BAND_FRACTION;
@@ -37,17 +58,24 @@ export declare class YinYangDrawer {
     private outerSparkStartTimeMs;
     private outerSparkPhaseMs;
     private outerSparkRotationDurationMs;
-    private outerSparkCircumference;
+    /** Groupe tourné de l'étincelle et centre de sa rotation — lus par le
+     *  timer, qui survit aux appels suivants de startOuterSparkAnimation. */
+    private outerSparkRotor;
+    private outerSparkCenter;
     private outerSparkLastAngleRad;
     private balanceSparkOnComplete;
     private readonly balanceSparkInstances;
     private balanceSparkTadpoleIdSeq;
     private readonly balanceSparkTadpoles;
     private balanceSparkTadpoleTimer;
+    /** Cible partagée des têtards (bas du conteneur), mesurée au plus toutes
+     *  les 500 ms — voir tickBalanceSparkTadpoles. */
+    private balanceSparkTadpoleTarget;
     /** Cruising speed (px/ms) and cutoff (as a multiple of the main circle's
      *  radius) for the lone-survivor drift — see the fragment block in
      *  startBalanceSparkAnimation's timer. */
     private readonly BALANCE_SPARK_DRIFT_SPEED_PX_PER_MS;
+    private readonly BALANCE_SPARK_TADPOLE_MAX_AGE_MS;
     private readonly BALANCE_SPARK_DRIFT_INITIAL_SPEED_PX_PER_MS;
     private readonly BALANCE_SPARK_DRIFT_SPEED_EASE_MS;
     private readonly BALANCE_SPARK_DRIFT_TURN_RATE_RAD_PER_MS;
@@ -67,6 +95,14 @@ export declare class YinYangDrawer {
     private readonly BALANCE_SPARK_EMBER_PHASE_OFFSETS;
     private activeOddId;
     private hoverOddId;
+    private lobeNodes;
+    /** Vrai pendant updateSwitchFrame : les rendus partagés avec le rendu
+     *  complet (libellés) n'y réordonnent pas leurs calques. */
+    private inSwitchFrame;
+    /** Suffixe des dégradés de fond des libellés ODD : unique par libellé, un
+     *  libellé entrant ne doit pas reprendre l'id d'un autre encore en fondu
+     *  de sortie (url(#id) désigne le premier du document). */
+    private oddLabelGradientSeq;
     /** Callback déclenché quand la souris entre/sort d'un arc ODD (lien inverse
      *  vers les chips de la légende ODD du panneau de détail). */
     private _onOddArcHoverCb;
@@ -95,13 +131,14 @@ export declare class YinYangDrawer {
      */
     drawMainCircle(): void;
     /**
-     * Draws and animates a short dash over a full circular stroke.
+     * Draws and animates the perimeter spark: a short arc (the spark itself)
+     * with its glow pre-rendered as wider translucent copies of the same arc
+     * (see glowHalo), all inside a "rotor" group turned by a single transform
+     * per frame.
      *
-     * Illusion principle:
-     * - stroke-dasharray is configured as: "visibleDash hiddenRemainder"
-     * - so only a tiny segment is visible while the rest of the circumference is hidden
-     * - changing stroke-dashoffset each frame shifts this dash around the perimeter,
-     *   creating a rotating spark without moving the circle itself.
+     * It used to be a full circle with a dash shifted by stroke-dashoffset
+     * under a double feGaussianBlur filter: every frame re-blurred a filter
+     * region five times the size of the whole circle.
      */
     private startOuterSparkAnimation;
     private clearOuterSpark;
@@ -209,10 +246,10 @@ export declare class YinYangDrawer {
     /** Ticks every still-drifting tadpole from every past shed batch — see
      *  balanceSparkTadpoles' own doc comment — independently of whichever
      *  spark instance(s) happen to be running right now, including none at
-     *  all. Tadpoles never expire — once spawned they keep swimming
-     *  (cruising speed, steering toward the shared target) indefinitely, so
-     *  in practice this timer runs for as long as any have ever been
-     *  shed. */
+     *  all. Un têtard nage vers la cible partagée (bas du conteneur) et est
+     *  retiré dès qu'il l'atteint : sans cela, il tournait indéfiniment autour
+     *  d'elle, et le timer — avec une mesure du conteneur à chaque frame —
+     *  ne s'arrêtait jamais après le premier lot lâché. */
     private tickBalanceSparkTadpoles;
     /**
      * Draws a semi-circle (black half) within the main Yin Yang circle.
@@ -222,6 +259,32 @@ export declare class YinYangDrawer {
      * Loops through both Yin and Yang groups and draws the respective symbols (small circles).
      */
     drawYinYangSymbols(): void;
+    /**
+     * Frame d'une transition de facette ou d'ODD
+     * (ViewInitializer.startComponentAnimationLoop) : réécrit EN PLACE les
+     * attributs interpolés des nœuds posés par le dernier rendu complet —
+     * rayon et centre des lobes, masques et dégradés des arcs, zones de clic,
+     * noyau, position des libellés ODD et score de la facette. Rien n'est
+     * ajouté ni retiré, le <defs> n'est pas purgé, et les libellés ne sont
+     * remesurés (getBBox) que si leur texte change.
+     *
+     * Ce qui ne dépend pas de l'interpolation (illustration idle, poids de la
+     * facette sur l'arc de bordure, bordures) reste au rendu complet, rejoué à
+     * la dernière frame.
+     *
+     * Renvoie false si les nœuds ne correspondent plus à la géométrie (autres
+     * catégories, nœuds détachés par un rendu complet extérieur, défs
+     * disparues…) ; l'appelant refait alors un rendu complet, qui repose tout.
+     */
+    updateSwitchFrame(): boolean;
+    private updateLobeAttributes;
+    /**
+     * Fond l'opacité d'un libellé vers `target`, sans relancer la transition
+     * si elle y va déjà. Relancée à chaque frame (transition de facette), une
+     * transition d'opacité ne progresse jamais : le libellé restait invisible
+     * tout le long de la bascule.
+     */
+    private fadeLabelTo;
     /**
      * Mode idle (racine, aucune facette sélectionnée) : le cercle principal
      * n'a aucune donnée pertinente à montrer (le yin/yang de base reste sur
@@ -331,6 +394,14 @@ export declare class YinYangDrawer {
     private clearGhostVisuals;
     private getOrCreateGhostMainCircle;
     private getAdaptiveWaveCount;
+    /**
+     * Cercles d'ondes d'un groupe ghost, avec les constantes qu'on leur a déjà
+     * écrites. Par frame, seuls `cy`, `r` et `stroke-opacity` varient : le reste
+     * (cx, fill, stroke, stroke-width) n'est réécrit que s'il change. Les nœuds
+     * sont gardés d'une frame à l'autre, et reconstruits depuis le DOM dès que
+     * l'un d'eux en est détaché (redessin complet du groupe).
+     */
+    private ghostWaveCache;
     private reconcileGhostWaves;
     private updateBasePulseAnimations;
     private updateBasePulseAnimationForType;
@@ -360,6 +431,9 @@ export declare class YinYangDrawer {
      * n'existait nulle part ailleurs et dont le signe était perdu.
      */
     private updateGhostDeltaBadge;
+    /** Enveloppe (repère local) des lignes du badge, avec la signature du
+     *  contenu qu'elle mesure. Liée au nœud : elle disparaît avec lui. */
+    private ghostDeltaBadgeBoxes;
     private ghostDeltaBadgeSelector;
     /** Retire le badge d'un lobe. Nécessaire explicitement depuis que le badge
      *  ne vit plus dans le groupe du ghost : il ne disparaît plus avec lui. */
@@ -369,6 +443,22 @@ export declare class YinYangDrawer {
     private getCircleNumericAttribute;
     private lerp;
     private shouldRenderGhost;
+    /** Ids des masques et dégradés posés dans le <defs> partagé par les arcs de
+     *  catégorie de ce dessinateur. Déterministes (catégorie, lobe, calque), donc
+     *  bornés ; sert à les retirer quand le satellite est détruit. */
+    private readonly ownedDefIds;
+    /** Retire du <defs> partagé ce que ce dessinateur y a posé. À appeler quand
+     *  le satellite est détruit (clearChildren) : sans cela, chaque visite d'une
+     *  facette laissait ses masques et dégradés dans le <defs>, qui ne
+     *  redescendait jamais. */
+    releaseDefs(): void;
+    /**
+     * Fin de vie : arrête toutes les boucles du dessinateur (vagues et
+     * pulsation du ghost, étincelle du pourtour, étincelles d'équilibre et
+     * leurs têtards) et libère ses defs. N'écrit pas dans le DOM du diagramme :
+     * son conteneur est vidé par l'appelant.
+     */
+    destroy(): void;
     /**
      * Draws category-specific arcs with gradient fills and masks to represent different ODDs (Sustainable Development Goals).
      *
@@ -422,27 +512,36 @@ export declare class YinYangDrawer {
      */
     private shouldShowFacetteLabels;
     refreshOddArcLabelsVisibility(): void;
-    refreshOddArcLabelsOrientation(): void;
+    /**
+     * Écrit la contre-rotation des labels des deux lobes en attribut, pour une
+     * orientation donnée de chaque lobe (en degrés) — à l'arrêt, la position
+     * de base. Pendant la rotation, ce sont des animations du navigateur
+     * (AnimationsMngr) qui contre-tournent les labels, par-dessus l'attribut.
+     */
+    refreshOddArcLabelsOrientation(lobeAngles: {
+        yin: number;
+        yang: number;
+    }): void;
+    private getLobeNode;
     private isArcVisibleForLabel;
     private renderOddArcLabels;
-    private applyOddArcLabelCounterRotation;
-    /**
-     * Contre-tourne le score et le poids affichés en permanence dans le noyau
-     * du lobe dominant — sur le cercle central (renderFacetteStateLabel/
-     * renderFacetteWeightLabel) comme sur un satellite (renderChildStateLabel/
-     * renderChildWeightLabel, un seul des deux paires existe selon isChild) —
-     * même principe que applyOddArcLabelCounterRotation, mais appliqué
-     * directement sur l'élément (pivot = sa propre position x/y) plutôt que
-     * via un groupe wrapper : contrairement aux labels d'arc ODD, ces montants
-     * sont déjà positionnés par des attributs x/y directs, donc une rotation
-     * autour de ce même point annule l'orientation héritée du spin du lobe
-     * sans déplacer le montant. Chaque satellite ayant son propre YinYangDrawer,
-     * cette méthode tourne indépendamment pour chacun (voir AnimationsMngr, qui
-     * l'appelle via component.view.yinYangDrawer pour le composant en train de
-     * tourner, parent ou enfant).
-     */
-    private applyFacetteAmountLabelsCounterRotation;
-    private getRotationAngleFromTransform;
+    /** Ce qui fixe le contenu et la taille d'un libellé d'arc ODD. */
+    private oddArcLabelKey;
+    /**
+     * Libellés qui restent droits pendant la rotation Yin/Yang, avec le pivot
+     * de leur contre-rotation. Les libellés d'arc ODD tournent autour de leur
+     * origine locale (`pivot` nul : leur groupe parent les place). Le score et
+     * le poids affichés en permanence dans le noyau du lobe dominant — sur le
+     * cercle central (renderFacetteStateLabel) comme sur un satellite
+     * (renderChildStateLabel/renderChildWeightLabel) — sont placés par des
+     * attributs x/y directs : une rotation autour de ce même point annule
+     * l'orientation héritée du spin du lobe sans déplacer le montant. Le poids
+     * de la facette n'est plus dans le lobe (voir renderFacetteWeightLabel) :
+     * il ne tourne pas, rien à compenser. AnimationsMngr anime chacun en sens
+     * inverse de son lobe ; chaque satellite a son propre YinYangDrawer.
+     */
+    getCounterRotatedLabels(): CounterRotatedLabel[];
+    private readLabelPivot;
     private getDisplayedArcAngles;
     /**
      * Ajuste la plaque sombre posée derrière un libellé d'arc à la taille
@@ -490,6 +589,9 @@ export declare class YinYangDrawer {
     private wrapTextByLines;
     private getOrCreateInteractiveArcLayer;
     private drawInteractiveArcZone;
+    /** Tracés d'une zone de clic d'arc ODD et de son liseré « actif » —
+     *  partagés par le rendu complet et la frame de transition. */
+    private computeInteractiveArcPaths;
     /** Callback appelé quand la souris entre/sort d'un arc ODD du diagramme —
      *  permet de surligner en retour le chip correspondant dans la légende ODD. */
     setOnOddArcHover(cb: (oddId: string | null) => void): void;

package/dist/types/components/view/borderColorCycle.d.ts

@@ -0,0 +1,76 @@
+/** Instant clé du cycle (0..1) et couleurs des deux arrêts animés à cet instant. */
+export type ColorCycleStep = {
+    at: number;
+    first: string;
+    last: string;
+};
+/**
+ * Valeurs parcourues par le premier et le dernier arrêt sur un cycle,
+ * à intervalles réguliers — les mêmes que l'ancienne animation SMIL : le
+ * premier arrêt parcourt les couleurs puis revient à la première ; le dernier
+ * suit la même boucle décalée d'un cran (il tient la première couleur sur le
+ * premier intervalle).
+ */
+export declare function borderColorCycleValues(colors: readonly string[]): {
+    first: string[];
+    last: string[];
+};
+/** Couleur à l'instant `at` (0..1) d'une suite de valeurs équiréparties,
+ *  interpolée en sRGB comme le faisait SMIL. */
+export declare function sampleAt(values: readonly string[], at: number): string;
+/**
+ * Instants clés du cycle (réunion de ceux des deux arrêts, 0 et 1 compris)
+ * et couleurs des deux arrêts à chacun. Le dernier pas (1) a les couleurs du
+ * premier (0) : la boucle se referme sans saut.
+ */
+export declare function borderColorCycleSteps(colors: readonly string[]): ColorCycleStep[];
+/**
+ * Opacités de la copie `k` (k ≥ 1) sur un cycle : invisible avant son fondu,
+ * de 0 à 1 entre les instants k − 1 et k, opaque tant qu'elle est le fond du
+ * fondu suivant, puis retirée quand la copie k + 1, opaque, la recouvre.
+ */
+export declare function colorCycleLayerKeyframes(times: readonly number[], k: number): Keyframe[];
+/**
+ * Cycle de couleurs d'un segment actif. Au repos : copies en fondu posées
+ * juste sous le segment dans son groupe (le segment garde contour, clics et
+ * survol, son propre remplissage est rendu transparent) ; les halos du
+ * segment restent dessous, voir `data-fill-under` dans glowHalo.syncShapeGlow.
+ * Diagramme actif (FrameScheduler.isActive) : copies retirées, arrêts du
+ * dégradé d'origine écrits à chaque image bridée.
+ */
+export declare class BorderColorCycle {
+    private readonly segment;
+    private readonly durationMs;
+    readonly key: string;
+    private readonly group;
+    private readonly paths;
+    private animations;
+    private readonly times;
+    private readonly values;
+    private readonly firstStop;
+    private readonly lastStop;
+    /** Couleurs posées sur les deux arrêts du dégradé d'origine, rendues à la fin. */
+    private readonly restingColors;
+    private readonly startedAt;
+    private mainThreadFrameId;
+    private readonly unsubscribe;
+    static keyOf(colors: readonly string[], durationMs: number): string;
+    constructor(segment: SVGPathElement, gradient: SVGGradientElement, colors: readonly string[], durationMs: number);
+    /** Le segment est toujours dans le document (les copies, elles, en sont
+     *  retirées quand le diagramme est actif). */
+    get isConnected(): boolean;
+    /** Recopie la forme du segment et réapplique le remplissage du mode courant
+     *  (à rappeler quand l'appelant a restylé le segment). */
+    refresh(): void;
+    /** Suit le segment pendant qu'il change de largeur. */
+    setPath(d: string): void;
+    destroy(): void;
+    private syncGeometry;
+    /** Phase courante du cycle, en ms depuis son départ. */
+    private phaseMs;
+    private applyMode;
+    private startComposited;
+    private stopComposited;
+    private startMainThread;
+    private stopMainThread;
+}

package/dist/types/components/workspace/facetWeightRuleSetting.d.ts

@@ -0,0 +1,10 @@
+import { type FacetWeightRule } from "../../utils/causeMetrics";
+/** Règle des poids de facette choisie dans le debug de la page standalone
+ *  (voir `FacetWeightRule`) : mémorisée dans le navigateur, appliquée au
+ *  démarrage — la lib npm, elle, reste en `mean`. */
+export declare const FACET_WEIGHT_RULE_STORAGE_KEY = "spheres.facetWeightRule";
+/** Lit la règle mémorisée (`mean` à défaut, ou si le stockage est
+ *  inaccessible), l'applique et la renvoie. */
+export declare function loadFacetWeightRule(): FacetWeightRule;
+/** Mémorise la règle ; renvoie `false` si le stockage est inaccessible. */
+export declare function saveFacetWeightRule(rule: FacetWeightRule): boolean;