@micheeeeel/yinyangapp 1.0.6 → 2.0.0

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

@@ -2,15 +2,73 @@ import { ViewInitializer } from "./ViewInitializer";
 import { IYinOrYangPattern } from "../../interfaces/IYinOrYangPattern";
 export declare class YinYangDrawer {
     private ViewInitializer;
-    private viewData;
     private yinYangGroup;
-    private yinOrYangGroup;
     private graphicStrategy;
-    private positionX;
-    private positionY;
-    private categories;
+    private geometry;
     private containerId;
     private key;
+    private readonly WAVE_COLOR;
+    private readonly WAVE_MIN_RADIUS_DIFF;
+    private readonly MAX_WAVE_OPACITY;
+    private readonly ADAPTIVE_WAVE_FULL_DIFF_RATIO;
+    private readonly GHOST_MAIN_SELECTOR;
+    private readonly GHOST_WAVE_SELECTOR;
+    /** Corps des lignes du badge du ghost, et écart entre elles. Plus gros que
+     *  les deltas des satellites : le badge est seul au bord du grand cercle,
+     *  quand les leurs doivent cohabiter avec la nuée de satellites. */
+    private readonly GHOST_DELTA_BADGE_FONT_SIZE;
+    private readonly GHOST_DELTA_BADGE_ROW_GAP;
+    /** Part du diamètre du noyau que le badge occuperait à l'échelle
+     *  géométrique exacte (diagonale du bloc inscrite dans le disque) — voir
+     *  ViewInitializer.ghostDeltaBadgeSizeBoost pour l'agrandissement, réglable
+     *  en direct, appliqué au-delà de cette base. */
+    private readonly GHOST_DELTA_BADGE_NUCLEUS_FILL;
+    private categoryArcGhostEntries;
+    private categoryArcGhostFrameId;
+    private readonly CHILD_SCORE_BAND_FRACTION;
+    private readonly CHILD_WEIGHT_LABEL_BAND_FRACTION;
+    private readonly BASE_MAIN_SELECTOR;
+    private readonly IDLE_SPHERE_OVERLAY_ROLE;
+    private readonly MIN_VISIBLE_ARC_ANGLE_RAD;
+    private pulseAnimationFrameId;
+    private outerSparkTimer;
+    private outerSparkStartTimeMs;
+    private outerSparkPhaseMs;
+    private outerSparkRotationDurationMs;
+    private outerSparkCircumference;
+    private outerSparkLastAngleRad;
+    private balanceSparkOnComplete;
+    private readonly balanceSparkInstances;
+    private balanceSparkTadpoleIdSeq;
+    private readonly balanceSparkTadpoles;
+    private balanceSparkTadpoleTimer;
+    /** 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_DRIFT_INITIAL_SPEED_PX_PER_MS;
+    private readonly BALANCE_SPARK_DRIFT_SPEED_EASE_MS;
+    private readonly BALANCE_SPARK_DRIFT_TURN_RATE_RAD_PER_MS;
+    private readonly BALANCE_SPARK_DRIFT_MAX_FRAGMENTS;
+    private readonly BALANCE_SPARK_DRIFT_FAN_SPREAD_RAD;
+    private readonly BALANCE_SPARK_SWIM_WAVE_AMPLITUDE_PX;
+    private readonly BALANCE_SPARK_SWIM_WAVE_FREQUENCY;
+    private readonly BALANCE_SPARK_SWIM_WAVE_SPEED;
+    private readonly BALANCE_SPARK_SWIM_WAVE_TAPER;
+    /** How long the "consuming" phase lasts once both sparks reach their
+     *  shared meeting point — see triggerBalanceSpark / the consume branch
+     *  in startBalanceSparkAnimation's timer. */
+    private readonly BALANCE_SPARK_CONSUME_DURATION_MS;
+    private readonly BALANCE_SPARK_EMBER_COUNT;
+    private readonly BALANCE_SPARK_EMBER_ANGLE_OFFSETS;
+    private readonly BALANCE_SPARK_EMBER_DISTANCE_OFFSETS;
+    private readonly BALANCE_SPARK_EMBER_PHASE_OFFSETS;
+    private activeOddId;
+    private hoverOddId;
+    /** 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;
+    private pulseStates;
     constructor(ViewInitializer: ViewInitializer);
     /**
      * Initializes all the necessary properties from the ViewInitializer.
@@ -21,10 +79,122 @@ export declare class YinYangDrawer {
      * Creates the full Yin Yang pattern, including the main circle, semi-circles, and the Yin Yang symbols.
      */
     createYinYangPattern(): void;
+    refreshOuterSpark(): void;
+    /**
+     * Draws the ghost Yin/Yang symbols using the ghost groups and tension.
+     */
+    drawGhostYinYangSymbols(): void;
+    /**
+     * Ensures ghost rendering can work in update-only flows (without explicit initialize call).
+     */
+    private ensureGhostRenderContext;
     /**
      * Draws the main outer circle representing the Yin Yang.
      */
     drawMainCircle(): void;
+    /**
+     * Draws and animates a short dash over a full circular stroke.
+     *
+     * 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.
+     */
+    private startOuterSparkAnimation;
+    private clearOuterSpark;
+    private normalizeAngle;
+    private getOrCreateSparkLayer;
+    /**
+     * Triggers the "étincelle d'équilibre": two one-shot sparks running at
+     * once, each tied to one orientation — the requested one (primary) and
+     * its inverse (the other pole) — unlike the perimeter spark which loops
+     * forever and ignores orientation.
+     *
+     * Each spark starts on the main circle at the tangent point of the
+     * OPPOSITE lobe, sweeps half the main circle's circumference to reach its
+     * own lobe's tangent point, then switches to the sub-circle for the
+     * second half. Because internally tangent circles share the same tangent
+     * line at their contact point, and both halves are swept in the same
+     * rotational sense, the direction is continuous across the switch — no
+     * visible kink. Primary and inverse therefore sweep opposite sides of the
+     * main circle (mirrored), each stopping once it has covered half of its
+     * own sub-circle's circumference.
+     *
+     * `orientation` must be the CURRENT FACETTE'S OWN orientation, i.e. its
+     * dominant lobe. Everything downstream calibrates on the primary spark
+     * and assumes it is the longer of the two: the tail growth rate (so the
+     * primary reaches exactly balanceSparkMaxLength) and the shared shrink
+     * rate (so the primary burns out exactly at CONSUME_DURATION_MS, the
+     * lifetime cutoff). Pass the recessive lobe instead and the inverse
+     * spark outlives that cutoff, getting killed the instant its sibling
+     * dies — before it can shed a single tadpole.
+     *
+     * `onComplete`, if given, fires exactly once, the instant both the
+     * primary and inverse sparks have naturally finished (tail burnt out AND
+     * every shed tadpole drifted away) — see clearBalanceSparkInstance. Lets
+     * a caller repeat the whole animation back-to-back (e.g. the dev button,
+     * which loops it for as long as it stays toggled on) without needing to
+     * know its total duration, which varies with the current facette's own
+     * geometry.
+     */
+    triggerBalanceSpark(orientation?: "yin" | "yang", onComplete?: () => void): void;
+    /**
+     * Geometry shared by a balance spark's setup and its per-frame animation:
+     * the main-circle radius, its sub-circle's center/radius, the angle where
+     * the two are tangent, and the arc lengths of each half-lap.
+     */
+    private computeBalanceSparkPathGeometry;
+    /**
+     * Builds a single closed SVG path (absolute coordinates — no `transform`
+     * needed) for a tadpole/sperm-shaped tail: pointed at the tail end,
+     * swelling to `maxHalfWidth` at the head. `segments` must be ordered
+     * tail-to-head and can span two different circles (the sub-circle for
+     * the near part of the tail and the main circle for whatever hasn't fit
+     * there yet — see the overflow handling in the timer below); the taper
+     * is parameterized across all of them combined so the width stays
+     * continuous at the seam between circles.
+     */
+    private buildTaperedSparkPath;
+    /**
+     * Same tadpole silhouette as buildTaperedSparkPath (thin tail, swollen
+     * head), but swimming along a straight line instead of a circular arc —
+     * used for the lone-survivor drift. The head tracks `(headX, headY)`
+     * exactly; the tail whips side to side in a traveling sine wave whose
+     * amplitude fades to zero at the head, so only the tail visibly
+     * undulates while the head cuts a clean straight path, like a real
+     * tadpole swimming.
+     */
+    private buildSwimmingTadpolePath;
+    /**
+     * Ember shower at a frozen contact point: each ember flies outward
+     * along its own fixed direction and fades out, looping on its own
+     * short, staggered cycle — a simple stand-in for a welding-spark
+     * crackle. Shared by both places a balance spark sits still and
+     * "welds" against its own shrinking tail: the death-race meeting point
+     * and, once a survivor arrives there, the tangent point (see the
+     * "racing"/"shedding" branches in startBalanceSparkAnimation's timer).
+     */
+    private renderBalanceSparkEmbers;
+    private startBalanceSparkAnimation;
+    private clearBalanceSparkInstance;
+    private getOrCreateBalanceSparkLayer;
+    private getOrCreateBalanceSparkTadpoleLayer;
+    /**
+     * Detaches one shed batch of tadpoles from the instance that produced
+     * them (see the "shedding" branch in startBalanceSparkAnimation's timer)
+     * so they go on drifting under their own, independent clock — see
+     * balanceSparkTadpoles' own doc comment for why.
+     */
+    private spawnBalanceSparkTadpoles;
+    /** 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. */
+    private tickBalanceSparkTadpoles;
     /**
      * Draws a semi-circle (black half) within the main Yin Yang circle.
      */
@@ -32,10 +202,17 @@ export declare class YinYangDrawer {
     /**
      * Loops through both Yin and Yang groups and draws the respective symbols (small circles).
      */
-    drawYinYangSymbols(yinOrYangGroup: {
-        yin: IYinOrYangPattern;
-        yang: IYinOrYangPattern;
-    }): void;
+    drawYinYangSymbols(): void;
+    /**
+     * 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
+     * la composante 0 par défaut — voir ViewInitializer.currentComponentIndex
+     * — ce qui affiche une répartition arbitraire tant que rien n'a vraiment
+     * été sélectionné). On masque donc les deux lobes et on affiche à la
+     * place une illustration neutre (Homme de Vitruve), retirée dès qu'une
+     * facette est activée pour laisser réapparaître le yin/yang réel.
+     */
+    refreshIdleSphereOverlay(): void;
     /**
      * Draws either the Yin or Yang circle based on the type provided.
      * It also draws the small central circle and the arcs for categories within the symbol.
@@ -44,7 +221,115 @@ export declare class YinYangDrawer {
      * @param radius - The radius of the symbol (Yin or Yang).
      * @param type - Whether the symbol is "yin" or "yang".
      */
-    drawYinOrYang(centerY: number, radius: number, type: "yin" | "yang"): void;
+    private drawYinOrYangWithGroup;
+    /**
+     * Affiche le score d'état ("40/100") dans l'anneau extérieur de la moitié
+     * dominante du satellite — entre le petit cercle "noyau"
+     * (smallRadius) et le bord du lobe (radius) — plutôt qu'en son centre
+     * exact, pour laisser le noyau visible. La moitié orientée grandit
+     * toujours avec le score et occupe au moins 50% du disque, donc reste
+     * toujours assez grande pour accueillir le texte. Remplace l'ancienne
+     * ligne "état/100" du panneau flottant (ChildScoresDeltaRenderer), qui ne
+     * montre plus que les deltas et le poids. Même logique de contraste que
+     * le fond (texte noir sur le lobe blanc yang, blanc sur le lobe noir yin)
+     * plutôt que le contour cyan des odd-labels, puisque le fond ici est un
+     * noir/blanc pur.
+     *
+     * Décalage vertical plutôt que centroïde d'arc façon odd-labels : un
+     * satellite n'a qu'une seule catégorie couvrant tout le lobe (pas de
+     * portion à répartir), et yang/yin sont toujours dessinés respectivement
+     * au-dessus/en-dessous du centre du satellite (voir centerYang/centerYin
+     * dans ViewInitializer) — s'éloigner du centre du satellite le long de cet
+     * axe reste donc toujours dans le lobe dominant, à l'opposé de la zone
+     * d'enchevêtrement avec l'autre couleur.
+     *
+     * Taille proportionnelle au rayon RÉEL de ce lobe (et non à
+     * labelsFontAutoScale, calibré pour le cercle parent) : un satellite au
+     * milieu d'une pile dense peut être minuscule, un autre isolé beaucoup
+     * plus grand, et le texte doit suivre dans les deux cas.
+     */
+    private renderChildStateLabel;
+    /**
+     * Affiche le poids ("6/10") dans le même lobe dominant que le score, mais
+     * sur le rayon OPPOSÉ (score : vers l'extérieur du satellite ; poids :
+     * vers son centre) — même mécanique que renderChildStateLabel (taille
+     * proportionnelle au rayon réel) pour la même nature visuelle "posée sur
+     * le disque", avec deux différences volontaires : la couleur de
+     * remplissage (la teinte du poids, reprise du chip des cartes et de l'onde
+     * de prévisualisation) pour rester identifiable comme "poids" au premier
+     * coup d'œil, et un fond en dégradé radial (pas de liseret) qui calme le
+     * lobe sous les chiffres. Même technique que les libellés d'arcs du cercle
+     * central (renderOddArcLabels) : cercle rempli d'un radialGradient
+     * couleur→transparent, dimensionné sur le bbox du texte.
+     *
+     * Teinte comme voile suivent le lobe (weightColorForLobe, labelVeilColor) :
+     * doré sur fond noir, ambre profond sur fond blanc, où le doré ne tient
+     * pas — c'est la même règle que le score, qui lui s'inverse franchement.
+     */
+    private renderChildWeightLabel;
+    /**
+     * Affiche le score de la facette courante ("40/100") dans le cercle
+     * principal — même règle que renderChildStateLabel au niveau d'un
+     * satellite (bande [smallRadius, radius] du lobe dominant, même
+     * contraste), maintenant que les arcs ODD n'affichent plus systématiquement
+     * cette information (voir buildOddArcLabelLines, réservé à l'ODD
+     * sélectionné). Contrairement au satellite, le suffixe "/100" est affiché
+     * (même convention que les libellés d'arcs) : au niveau facette il n'y a
+     * pas de fratrie pour donner le contexte d'échelle par comparaison.
+     */
+    private renderFacetteStateLabel;
+    /**
+     * Affiche le poids de la facette courante ("18/40") dans le cercle
+     * principal, sur le rayon opposé au score — même règle que
+     * renderChildWeightLabel au niveau d'un satellite (fond en dégradé
+     * radial, teinte du poids). Le poids et son plafond sont la somme des
+     * poids de tous les ODD de la facette (voir
+     * ViewInitializer.getFacetteWeight/getFacetteWeightMax), la même formule
+     * que celle qui dimensionne chaque arc.
+     */
+    private renderFacetteWeightLabel;
+    private drawGhostCircle;
+    private clearGhostVisuals;
+    private getOrCreateGhostMainCircle;
+    private getAdaptiveWaveCount;
+    private reconcileGhostWaves;
+    private updateBasePulseAnimations;
+    private updateBasePulseAnimationForType;
+    private ensurePulseAnimationLoop;
+    private stopPulseAnimationLoop;
+    private hasActivePulseAnimations;
+    private applyPulseFrame;
+    private getGhostWaveColor;
+    /**
+     * Animates wave rings that continuously travel from the base circle's
+     * radius toward the ghost circle's radius, looping. The direction of
+     * travel (outward on growth, inward on shrink) matches the sign of the
+     * projected change, so motion itself communicates the trend.
+     */
+    private updateGhostWaveAnimation;
+    /**
+     * Affiche, sur le lobe qui grandit et à la pointe extérieure de son cercle
+     * ghost — là où les ondes convergent —, ce que l'action projetée changerait :
+     * le delta de score de la facette, et son delta de poids s'il y en a un.
+     * Lecture stable, qui ne dépend pas de l'écart de rayon pour être remarquée.
+     *
+     * Les deux lignes sont écrites dans le format commun des deltas (Δ signé
+     * vert/rouge, triangle doré pour le poids — voir utils/deltaLabels), le même
+     * qu'à côté des satellites : c'est la même information à un autre niveau
+     * d'agrégation, elle ne doit pas s'écrire autrement. Auparavant ce badge
+     * montrait un pourcentage de tension en valeur absolue, une unité qui
+     * n'existait nulle part ailleurs et dont le signe était perdu.
+     */
+    private updateGhostDeltaBadge;
+    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. */
+    private removeGhostDeltaBadge;
+    private getBaseMainCircle;
+    private resetBaseCircle;
+    private getCircleNumericAttribute;
+    private lerp;
+    private shouldRenderGhost;
     /**
      * Draws category-specific arcs with gradient fills and masks to represent different ODDs (Sustainable Development Goals).
      *
@@ -53,5 +338,123 @@ export declare class YinYangDrawer {
      * @param type - Whether the symbol is "yin" or "yang".
      * @param smallRadius - The radius of the small circle within the symbol.
      */
-    drawCategoryArcs(centerY: number, radius: number, type: "yin" | "yang", smallRadius: number): void;
+    drawCategoryArcs(centerY: number, radius: number, type: "yin" | "yang", smallRadius: number, pattern: IYinOrYangPattern, idSuffix: string): void;
+    /**
+     * Draws the ODD-arc ghost overlay from ViewInitializer.categoriesGhost on
+     * both yin and yang: a dashed gold wedge at each ODD's projected boundary
+     * (filled wash if it grows, outline only if it shrinks — same asymmetry as
+     * BorderDrawer's border-segment ghost / WeightPreviewRingRenderer), plus a
+     * traveling wave wedge sweeping between the real and projected boundary.
+     * Because buildGhostCategories renormalizes the whole facette, every ODD
+     * is redrawn here, not just the one whose own weightDelta actually changed.
+     * Called after every drawYinYangSymbols (so it always reflects the latest
+     * base arcs) and standalone from ViewInitializer.updateCategoryGhost for
+     * weight-only preview updates.
+     */
+    drawCategoryArcsGhost(): void;
+    private drawCategoryArcsGhostForType;
+    private drawCategoryArcGhostShapes;
+    private ensureCategoryArcGhostLoop;
+    private stopCategoryArcGhostLoop;
+    /** Traveling wave that sweeps each ODD's boundary angle between its real
+     *  position and its projected ghost position, on the same lap
+     *  duration/easing as the border-segment ghost's wave (see
+     *  BorderDrawer.updateBorderGhostWave and
+     *  ViewInitializer.waveTravelDurationSec). Re-queries the layer node each
+     *  frame instead of caching it, since a full redraw (clearGroupChildren)
+     *  can replace it between frames. */
+    private updateCategoryArcGhostWave;
+    /**
+     * Les libellés d'arcs ne s'affichent qu'une facette ouverte. Au repos
+     * (aucune facette activée), le cercle central n'est plus qu'une vue
+     * d'ensemble de la sphère : le score et le poids d'un ODD n'y répondent à
+     * aucune question posée, et n'y font qu'encombrer les arcs.
+     *
+     * L'état est lu en direct plutôt que figé au dessin : la bascule repos ↔
+     * facette ouverte ne touche pas la géométrie, donc ne relance pas
+     * forcément drawCategoryArcs — c'est YinYangController.setChildrenEnabled
+     * qui demande le rafraîchissement au bon moment.
+     */
+    private shouldShowOddArcLabels;
+    /**
+     * Le score/poids de la facette (renderFacetteStateLabel/WeightLabel)
+     * cède la place à ceux de l'ODD sélectionné (buildOddArcLabelLines) : les
+     * deux répondraient à la même question au même endroit du cercle sinon.
+     */
+    private shouldShowFacetteLabels;
+    refreshOddArcLabelsVisibility(): void;
+    refreshOddArcLabelsOrientation(): void;
+    private isArcVisibleForLabel;
+    private renderOddArcLabels;
+    private applyOddArcLabelCounterRotation;
+    private getRotationAngleFromTransform;
+    private getDisplayedArcAngles;
+    /**
+     * Ajuste la plaque sombre posée derrière un libellé d'arc à la taille
+     * réelle de son texte : un disque quand il est court, une ellipse quand il
+     * s'allonge. Appelée après chaque écriture des lignes, rendu complet comme
+     * rafraîchissement — la bascule compact ↔ nom + métriques change le nombre
+     * de lignes, et une plaque figée laisserait le texte déborder dans le vide.
+     *
+     * La forme est choisie à chaque passage, et l'ancienne retirée quelle que
+     * soit sa nature : sans cela un libellé passé une fois en ellipse ne
+     * pouvait plus jamais redevenir disque, et empilait une ellipse de plus à
+     * chaque rendu.
+     */
+    private sizeOddArcLabelBackground;
+    /**
+     * (Ré)écrit les lignes d'un libellé d'arc ODD dans son `<text>` — partagé
+     * par le rendu complet (renderOddArcLabels) et par le rafraîchissement
+     * (refreshOddArcLabelsVisibility), qui reconstruit lui aussi les tspans et
+     * passe APRÈS : deux écritures divergentes et le second effacerait
+     * silencieusement ce que le premier a posé.
+     */
+    private writeOddArcLabelText;
+    /**
+     * Lignes du libellé posé sur un arc ODD du cercle central : le score de
+     * l'ODD puis son poids, tous deux suivis de leur maximum — à la place du
+     * numéro d'ODD ("ODD16") qui occupait seul cette place. Ce numéro se lit
+     * dans le panneau de description dès qu'on désigne l'arc, alors que ces
+     * deux métriques ne se lisaient nulle part au niveau ODD ; et ce sont les
+     * mêmes que celles portées par chaque satellite
+     * (renderChildStateLabel/renderChildWeightLabel), donc le cercle central
+     * et son cortège se lisent enfin de la même façon.
+     *
+     * Le maximum du poids n'est PAS WEIGHT_MAX : un ODD pèse la somme des
+     * poids de ses satellites (même formule que ViewInitializer.getOddWeight,
+     * celle qui fixe l'angle de l'arc — le chiffre affiché explique donc la
+     * taille de l'arc sous lui), et son plafond est WEIGHT_MAX × nombre de
+     * satellites. Il est affiché tel quel plutôt que ramené à une échelle /10
+     * qui n'existe qu'au niveau satellite.
+     *
+     * En mode non compact, le nom court de l'ODD reste affiché au-dessus des
+     * deux métriques : c'est une information que le numéro ne portait pas.
+     */
+    private buildOddArcLabelLines;
+    /** Nom court de l'ODD, replié sur `oddLabelMaxLines` lignes — n'alimente
+     *  plus que le mode non compact des libellés d'arcs (voir
+     *  buildOddArcLabelLines). */
+    private wrapOddLabel;
+    private wrapTextByLines;
+    private getOrCreateInteractiveArcLayer;
+    private drawInteractiveArcZone;
+    /** 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;
+    /**
+     * Sets the active ODD id and refreshes the visual highlight on interactive arc zones.
+     */
+    getActiveOddId(): string | null;
+    setActiveOddId(oddId: string | null): void;
+    /**
+     * Applique un survol léger sur l'arc ODD depuis l'arbre Recherche.
+     * N'affecte pas activeOddId — retiré au mouseleave.
+     */
+    setHoverOddId(oddId: string | null): void;
+    private refreshHoverArcStyles;
+    /**
+     * Re-applies the highlight / dim styles on all existing interactive arc hit-zones
+     * based on the current `activeOddId`, without recreating the DOM elements.
+     */
+    private refreshInteractiveArcStyles;
 }

package/dist/types/config/animationConfig.d.ts

@@ -0,0 +1,37 @@
+export declare const animationConfig: {
+    componentSwitchDurationMs: number;
+    borderColorCycleDurationMs: number;
+    rotationDurationMs: number;
+    forceFieldRevealDurationMs: number;
+    forceFieldRevealChainStepMs: number;
+    /** Fondu de sortie du champ de force d'action ET du champ d'événement quand
+     *  ils n'ont plus rien à montrer (désélection, menu fermé, switch de
+     *  facette) — plus court que forceFieldRevealDurationMs : disparaître doit
+     *  se sentir plus vif qu'apparaître. Partagée par les deux champs pour
+     *  qu'ils se sentent comme une seule grammaire visuelle. */
+    fieldFadeOutDurationMs: number;
+    stackItemReflowDurationMs: number;
+    /** Cross-fade (fade-out old text / fade-in new text) when the top-left
+     *  active-facette label text changes on click — independent of the much
+     *  slower diagram switch animation. */
+    componentTitleCrossfadeMs: number;
+    /** Menu radial d'actions d'un satellite (déploiement/retrait des boutons) :
+     *  volontairement bien plus court que componentSwitchDurationMs — c'est un
+     *  geste local, pas un mouvement d'ensemble du diagramme. */
+    childActionMenuOpenDurationMs: number;
+    childActionMenuCloseDurationMs: number;
+    /** Délai entre le départ de chaque bouton, pour un effet d'éventail en
+     *  cascade plutôt qu'un bloc synchronisé. */
+    childActionMenuStaggerMs: number;
+    /** Fondu croisé entre l'illustration idle du cercle principal (Homme de
+     *  Vitruve) et le yin/yang réel, dans les deux sens — assez lent pour se
+     *  sentir comme une transition plutôt qu'un clignotement, sans ralentir
+     *  la sélection d'une facette. */
+    idleSphereCrossfadeMs: number;
+    /**
+     * Minimum opacity for category blend masks when a category is fully faded out.
+     * 0 = blend mask fully transparent at end of fade (recommended).
+     * Higher values leave residual blending even for disappearing arcs.
+     */
+    categoryBlendFadeMinOpacity: number;
+};

package/dist/types/config/deltaColors.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Source de vérité pour les couleurs de delta partagées entre le diagramme
+ * (satellites) et les cartes de description (ForceFieldDetailsPanel).
+ *
+ * Ces valeurs doivent rester synchronisées avec src/styles/details-panel.css :
+ * - SCORE_DELTA_POSITIVE_COLOR == .ff-delta-pos / .ff-card-delta.ff-delta-pos
+ * - SCORE_DELTA_NEGATIVE_COLOR == .ff-delta-neg / .ff-card-delta.ff-delta-neg
+ * - WEIGHT_DELTA_COLOR == .ff-card-weight-chip
+ * (le CSS ne peut pas importer ce fichier — si l'une de ces couleurs change
+ * ici, reporter le changement dans details-panel.css, et inversement).
+ */
+/** Delta de score positif (amélioration) — même vert que les cartes. */
+export declare const SCORE_DELTA_POSITIVE_COLOR = "#8ef2b4";
+export declare const SCORE_DELTA_POSITIVE_GLOW_COLOR = "rgba(142, 242, 180, 0.9)";
+/** Delta de score négatif (dégradation) — même rouge que les cartes. */
+export declare const SCORE_DELTA_NEGATIVE_COLOR = "#f28e8e";
+export declare const SCORE_DELTA_NEGATIVE_GLOW_COLOR = "rgba(242, 142, 142, 0.9)";
+/**
+ * Variantes des deux couleurs de delta pour un fond CLAIR — le noyau blanc du
+ * lobe yin, quand c'est lui qui accueille le badge du ghost. Mêmes teintes
+ * assombries jusqu'à tenir au-delà de 4:1 sur du blanc, là où les versions
+ * lumineuses y tournent autour de 1,5:1 (même principe que
+ * WEIGHT_DELTA_COLOR_ON_LIGHT). La lueur, elle, s'inverse : blanche autour
+ * d'un texte sombre, sans quoi elle le baverait au lieu de le détacher.
+ */
+export declare const SCORE_DELTA_POSITIVE_COLOR_ON_LIGHT = "#1f7a45";
+export declare const SCORE_DELTA_NEGATIVE_COLOR_ON_LIGHT = "#a83a33";
+export declare const DELTA_GLOW_ON_LIGHT = "rgba(255, 255, 255, 0.92)";
+/** Couleur (fill + glow) d'un delta de score selon son signe — seule règle
+ *  conservée : un palier "doré" existait auparavant au-delà d'un certain
+ *  gain (getForceFieldColors), volontairement abandonné ici. Un delta
+ *  positif est toujours vert, quelle que soit son ampleur. `onLight` bascule
+ *  sur les variantes sombres, pour un fond clair. */
+export declare function scoreDeltaColor(delta: number, onLight?: boolean): {
+    fill: string;
+    glow: string;
+};
+/** Delta de poids (importance d'un satellite dans sa facette) — même doré que
+ *  le chip des cartes et que le ghost/onde de prévisualisation du poids
+ *  (WeightPreviewRingRenderer). Toujours cette seule couleur, quel que soit
+ *  le signe — le sens est porté par la flèche ▲/▼, pas par la couleur : un
+ *  poids en baisse n'est pas forcément un problème pour le joueur. */
+export declare const WEIGHT_DELTA_COLOR = "#f5c860";
+export declare const WEIGHT_DELTA_GLOW_COLOR = "rgba(245, 200, 96, 0.9)";
+/**
+ * Variante du doré pour un fond CLAIR — le lobe blanc yang, seul endroit où
+ * du poids se pose sur autre chose que du sombre. Le doré lumineux n'y offre
+ * que 1,6:1 de contraste (il faut 3:1 pour du gros texte), cet ambre profond
+ * en donne 3,9 tout en restant lisible comme "la couleur du poids" : c'est
+ * la même teinte, assombrie, pas une autre couleur. Aucune couleur unique ne
+ * peut faire les deux — au-dessus d'une certaine luminance, le blanc gagne
+ * toujours.
+ *
+ * Diagramme uniquement : les chips des cartes et le ghost de prévisualisation
+ * sont toujours sur fond sombre et gardent WEIGHT_DELTA_COLOR (et donc
+ * .ff-card-weight-chip n'a pas d'équivalent à synchroniser côté CSS).
+ */
+export declare const WEIGHT_DELTA_COLOR_ON_LIGHT = "#b06f00";
+/** Couleur du poids selon le lobe qui l'accueille. */
+export declare function weightColorForLobe(orientation: "yin" | "yang"): string;
+/** Plancher appliqué à un poids projeté (weightDelta) pour éviter un ghost
+ *  de taille/angle nulle ou négative — partagé par tous les ghosts de poids
+ *  (satellites, arcs de bordure) pour rester cohérents entre eux. */
+export declare const MIN_PROJECTED_WEIGHT = 0.1;

package/dist/types/config/labelStyleConfig.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Centralized label styling configuration for hierarchy-based visual differentiation.
+ *
+ * Design principle: Styles reflect label importance and type for better visual hierarchy.
+ * All colors and effects maintain coherence with the app's cyan accent and glow aesthetic.
+ */
+export declare const LABEL_STYLE_HIERARCHY: {
+    COMPONENT_TITLE: {
+        fillColor: string;
+        glowColor: string;
+        glowIntensity: string;
+        fontWeight: number;
+        textShadow: string;
+    };
+    ODD_LABELS: {
+        fillColor: string;
+        strokeColor: string;
+        strokeWidth: string;
+        glowColor: string;
+        fontWeight: number;
+        textShadow: string;
+    };
+    CHILD_LABELS: {
+        fillColor: string;
+        strokeColor: string;
+        fontWeight: number;
+        textShadow: string;
+    };
+    COMPONENT_LEGEND: {
+        fillColorInactive: string;
+        fillColorActive: string;
+        glowColorActive: string;
+        fontWeight: number;
+        textShadowActive: string;
+    };
+    CHILD_DELTA: {
+        fillColor: string;
+        fontWeight: number;
+    };
+    ACTION_LABELS: {
+        fillColor: string;
+        strokeColor: string;
+        fontWeight: number;
+        textShadow: string;
+    };
+};
+/**
+ * Helper to get concrete text-shadow values from config keys
+ */
+export declare const getTextShadowValue: (shadowType: string, textShadowEnabled?: boolean) => string;

package/dist/types/data/OddCategoryColors.d.ts

@@ -1,3 +1,13 @@
-export declare const categoryColorNames: {
-    [key: string]: string;
+/**
+ * Cause format: ODD (Sustainable Development Goals) colors
+ * Hex values for proper RGB interpolation during animations
+ */
+export declare const causeOddColors: {
+    [oddId: string]: string;
 };
+/**
+ * Cause format: component colors (fallback palette for unknown components)
+ * Hex values for proper RGB interpolation during animations
+ */
+export declare const causeComponentColors: string[];
+export declare function getCauseNamedColor(key: string): string;