@micheeeeel/yinyangapp 3.0.1 → 3.1.1

package/dist/types/utils/chainCardHeight.d.ts

@@ -1,3 +1,80 @@
+export type DetailDensity = "full" | "reduced" | "compact";
+export interface DetailDensityInput {
+    /** Hauteur visible du conteneur (clientHeight). */
+    available: number;
+    /** Hauteur de la description dépliée (0 si aucune). */
+    descFullH: number;
+    /** Hauteur de la description repliée (= descFullH si l'utilisateur l'a dépliée). */
+    descFoldedH: number;
+    /** Habillage d'un bloc hors carte (marges, en-têtes du bloc). */
+    chrome: number;
+    /** Nombre de blocs de cartes affichés. */
+    blockCount: number;
+    /** Hauteur occupée par le reste du contenu (ni description ni bloc). */
+    other?: number;
+    /** Palier précédent, pour l'hystérésis. */
+    previous?: DetailDensity | null;
+}
+export interface DetailDensityResult {
+    density: DetailDensity;
+    /** null = hauteur de carte par défaut (pas de variable posée). */
+    cardHeight: number | null;
+    foldDesc: boolean;
+}
+/**
+ * Choisit la densité d'une colonne de détail d'après la hauteur réellement
+ * libre — pas d'après le nombre de panneaux ouverts :
+ * - full    : description entière et cartes au format nominal (352px) ;
+ * - reduced : description repliée sur une ligne, cartes réduites
+ *             (≥ REDUCED_MIN_CARD_HEIGHT), haut de l'illustration visible ;
+ * - compact : description repliée, cartes au plus court, haut de
+ *             l'illustration visible.
+ * Au-delà de deux blocs, on vise deux blocs visibles et le scroll prend le
+ * relais (même règle que l'ancien comportement multi-blocs).
+ */
+export declare function computeDetailDensity(input: DetailDensityInput): DetailDensityResult;
+export interface StackCardHeightInput {
+    /** Hauteur utile du conteneur (clientHeight moins ses paddings). */
+    available: number;
+    /** Habillage (en-tête, description, marges) de chaque bloc déplié, dans
+     *  l'ordre d'affichage. */
+    expandedChromes: number[];
+    /** Hauteur de tout le reste : blocs repliés, bandeau Σ. */
+    other: number;
+    previous?: DetailDensity | null;
+}
+/**
+ * STACK : hauteur des cartes pour que les blocs dépliés remplissent la place
+ * libre. Jusqu'à deux blocs dépliés, tout le panneau (blocs repliés et
+ * bandeau Σ compris) doit tenir ; au-delà, on vise les deux premiers blocs
+ * et le scroll prend le relais. La carte ne dépasse jamais le format nominal
+ * (image entière) : au-delà, il ne resterait que du vide autour de l'image.
+ */
+export declare function computeStackCardHeight(input: StackCardHeightInput): {
+    density: DetailDensity;
+    cardHeight: number | null;
+};
+export interface ChainCardHeightOptions {
+    blockSelector?: string;
+    /**
+     * RECHERCHE : ajuste les cartes à la hauteur libre du conteneur même avec un
+     * seul bloc (description comprise) et pose data-density. Sans cette option
+     * (STACK), seul le cas « 2 blocs ou plus » réduit les cartes.
+     */
+    fitToContainer?: boolean;
+    /**
+     * STACK : ajuste les cartes à la place libre en tenant compte des blocs
+     * repliés et du bandeau Σ (voir computeStackCardHeight), et pose
+     * data-density.
+     */
+    fitBlocks?: boolean;
+}
+/**
+ * Synchro immédiate d'un conteneur surveillé (watchChainCardHeight), avec ses
+ * options : à appeler au sein d'une bascule animée, pour que la hauteur
+ * finale mesurée tienne compte des cartes recalées. Sans effet sinon.
+ */
+export declare function resyncChainCardHeightNow(container: HTMLElement): void;
 /**
  * Un seul bloc affiché : les cartes gardent leur hauteur par défaut, calée sur
  * le format des illustrations pour qu'elles s'affichent entières (cf.
@@ -6,7 +83,9 @@
  * tiennent dans la hauteur visible du conteneur sans scroll — au-delà, le
  * scroll prend le relais. L'image reste alors visible en entier mais plus
  * petite, avec une bande vide en haut et en bas (object-fit: contain, cf.
- * action-image.css) : c'est la hauteur qui cède, jamais le cadrage.
+ * action-image.css) : c'est la hauteur qui cède, jamais le cadrage — sauf
+ * avec `fitToContainer`, où la carte réduite garde le haut de l'image.
+ * Avec `fitToContainer` (RECHERCHE), voir computeDetailDensity.
  *
  * La variable CSS est posée à la fois sur le conteneur ET directement sur
  * chaque `.ff-chain-card` : quand un bloc est ajouté après coup (RECHERCHE,
@@ -15,13 +94,17 @@
  * `height` déjà calculé des cartes existantes — le poser directement sur
  * chaque carte contourne ce cas.
  */
-export declare function syncChainCardHeight(container: HTMLElement, blockSelector?: string): void;
+export declare function syncChainCardHeight(container: HTMLElement, options?: ChainCardHeightOptions): void;
 /**
  * Recalcule immédiatement puis surveille le conteneur pour garder la hauteur
  * des cartes synchronisée : redimensionnement du panneau (ResizeObserver) et
  * ajout/retrait de blocs (MutationObserver — un bloc peut être ajouté/retiré
  * sans que la taille du conteneur lui-même ne change, ex. panneau RECHERCHE
- * où le bloc secondaire propagé apparaît/disparaît). Idempotent : un seul
+ * où le bloc secondaire propagé apparaît/disparaît). Avec `fitToContainer`,
+ * le sous-arbre est aussi observé : une description remplacée ou des cartes
+ * re-rendues changent la place disponible. Seules les insertions/retraits de
+ * nœuds sont observés (pas les attributs) : les classes et styles posés par
+ * la synchro elle-même ne la redéclenchent donc pas. Idempotent : un seul
  * couple d'observers est installé par conteneur.
  */
-export declare function watchChainCardHeight(container: HTMLElement, blockSelector?: string): void;
+export declare function watchChainCardHeight(container: HTMLElement, options?: ChainCardHeightOptions): void;

package/dist/types/utils/collapseAnimation.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Animation commune des replis/déploiements : la bascule d'état reste
+ * synchrone (classe, attribut `hidden`…), seule la hauteur de l'élément est
+ * interpolée de l'ancienne valeur à la nouvelle (mesure avant/après, Web
+ * Animations). L'état logique est donc à jour dès le clic — un re-rendu ou
+ * une mesure lit la valeur finale, jamais une valeur différée.
+ *
+ * Au repli, le contenu masqué par la bascule (display:none, hidden, line-clamp)
+ * disparaîtrait d'un coup et l'élément se refermerait sur du vide : `hold`
+ * le garde visible le temps de l'animation et rend la fonction qui le relâche.
+ *
+ * Pendant l'animation, l'élément porte `data-collapse-anim` ; à la fin il
+ * émet COLLAPSE_ANIM_END (bulle), ce qui permet aux calculs de mise en page
+ * (chainCardHeight) d'ignorer les hauteurs intermédiaires et de se recaler.
+ *
+ * Les zones défilantes qui ne débordaient pas avant la bascule (panneau
+ * parent, liste interne) gardent leur barre de défilement masquée pendant
+ * l'animation : une hauteur intermédiaire peut les faire déborder un instant.
+ */
+export declare const COLLAPSE_ANIM_DURATION_MS = 240;
+export declare const COLLAPSE_ANIM_END = "collapseanimend";
+export declare const COLLAPSE_ANIM_ATTR = "data-collapse-anim";
+export interface HeightAnimationOptions {
+    /** Repli : garde visible le contenu sortant, rend la fonction qui le relâche. */
+    hold?: () => (() => void) | void;
+    /** Élément dont l'opacité suit le mouvement (contenu entrant / sortant). */
+    fade?: HTMLElement | null;
+    duration?: number;
+}
+export declare function prefersReducedMotion(): boolean;
+/**
+ * Applique `mutate` (la bascule d'état) et anime la hauteur de `el` de sa
+ * valeur courante — éventuellement en cours d'animation, un double clic
+ * repart donc d'où il en est — à sa nouvelle valeur.
+ */
+export declare function animateHeightChange(el: HTMLElement, mutate: () => void, options?: HeightAnimationOptions): void;
+/** Apparition d'un contenu révélé autrement que par la hauteur (ex. carte qui
+ *  s'élargit) : fondu seul. */
+export declare function fadeIn(el: HTMLElement | null | undefined): void;

package/dist/types/utils/d3/D3GraphicsStrategy.d.ts

@@ -10,6 +10,8 @@ export declare class D3GraphicsStrategy implements IGraphicsStrategy {
     private arcMaskCache;
     private underlyingGradientCache;
     private maskIdCurrentCacheKey;
+    private gradientIdCurrentCacheKey;
+    private liveDefNodes;
     /**
      * Initializes the SVG element and appends it to the given selector.
      * Also creates a 'defs' section for reusable graphical elements like gradients.
@@ -26,6 +28,8 @@ export declare class D3GraphicsStrategy implements IGraphicsStrategy {
     drawCircle(parent: D3Element, cx: number, cy: number, radius: number, fill: string, opacity?: number): D3Element;
     private escapeAttributeValue;
     private getDefById;
+    private getLiveDefById;
+    removeDefsByIds(ids: Iterable<string>): void;
     private defExists;
     private getCacheKey;
     /**
@@ -56,13 +60,26 @@ export declare class D3GraphicsStrategy implements IGraphicsStrategy {
      */
     createYinOrYangArcMask(maskId: string, cx: number, cy: number, innerRadius: number, outerRadius: number, startAngle: number, endAngle: number, type: "yin" | "yang", blendOpacity?: number): string;
     /**
-     * Creates a mask for the border with a radial gradient to simulate fading edges.
+     * Géométrie d'un masque d'arc (createYinOrYangArcMask) : deux bandes en
+     * dégradé aux bords de l'arc (fondu des extrémités) et l'arc plein. Partagée
+     * par la création et la mise à jour en place (updateYinOrYangArcMask), pour
+     * qu'une frame de transition écrive exactement les attributs qu'un rendu
+     * complet aurait posés.
      */
-    createBorderMask(id: string, centerX: number, centerY: number, innerRadius: number, outerRadius: number): void;
+    private computeArcMaskShape;
+    /**
+     * Met à jour EN PLACE un masque posé par createYinOrYangArcMask (mêmes
+     * paramètres) : attributs des deux bandes, de l'arc et opacité de fondu,
+     * sans rien retirer ni ajouter au <defs>. Sert aux frames de transition de
+     * facette (YinYangDrawer.updateSwitchFrame). Renvoie false si le masque
+     * n'existe pas ou n'a pas la structure attendue : l'appelant repasse alors
+     * par un rendu complet.
+     */
+    updateYinOrYangArcMask(maskId: string, cx: number, cy: number, innerRadius: number, outerRadius: number, startAngle: number, endAngle: number, type: "yin" | "yang", blendOpacity?: number): boolean;
     /**
-     * Changes the colors of a border gradient over time using an animation.
+     * Creates a mask for the border with a radial gradient to simulate fading edges.
      */
-    changeBorderColors(gradient: D3Element, duration: number, colors: string[]): void;
+    createBorderMask(id: string, centerX: number, centerY: number, innerRadius: number, outerRadius: number): void;
     /**
      * Draws a line with a gradient stroke.
      */
@@ -71,8 +88,14 @@ export declare class D3GraphicsStrategy implements IGraphicsStrategy {
      * Creates a radial gradient for an underlying circle.
      */
     createUnderlyingCircleGradient(id: string, color: string, spread?: number, intensity?: number): string;
+    /**
+     * Repeint en place un dégradé posé par createUnderlyingCircleGradient
+     * (mêmes étalement et intensité) : seule la couleur de ses arrêts change.
+     * Renvoie false s'il n'existe plus (l'appelant repasse par un rendu complet).
+     */
+    updateUnderlyingCircleGradientColor(id: string, color: string, spread?: number, intensity?: number): boolean;
     /**
      * Creates an underlying circle with a gradient and applies an arc mask.
      */
-    createUnderlyingCircleWithArcMask(maskId: string | undefined, gradientId: string, parent: D3Element, cx: number, cy: number, radius: number): void;
+    createUnderlyingCircleWithArcMask(maskId: string | undefined, gradientId: string, parent: D3Element, cx: number, cy: number, radius: number): D3Element;
 }

package/dist/types/utils/deltaChips.d.ts

@@ -1,4 +1,3 @@
-import type { KeyEventEffect } from "../data/yasuni_key_events";
 /** Ce dont une chip a besoin — sous-ensemble d'ActionDefinition. */
 export interface ChipDeltas {
     baseDelta: number;
@@ -10,6 +9,3 @@ export declare function formatDelta(value: number): string;
 export declare function formatSignedDelta(value: number): string;
 /** Deltas du catalogue, sur une ligne Action. */
 export declare function buildActionChipsHtml(action: ChipDeltas): string;
-/** Bonus d'un Événement Clé — points ajoutés aux actions amplifiées. Sert
- *  aussi au malus d'une action adverse (mêmes champs, signe négatif). */
-export declare function buildKeyEventChipsHtml(effect: KeyEventEffect): string;

package/dist/types/utils/exportControls.d.ts

@@ -0,0 +1,8 @@
+/** Utilitaire pour exporter et copier les contrôles du panneau debug */
+export interface ExportOptions {
+    selectedIds?: Set<string>;
+    showPreview?: boolean;
+}
+export declare function generateControlsCode(snapshot: Record<string, unknown>, selectedIds?: Set<string>): string;
+export declare function copyToClipboard(text: string): Promise<boolean>;
+export declare function showToast(message: string, duration?: number): void;

package/dist/types/utils/facetWeightLabel.d.ts

@@ -1,9 +1,11 @@
 /**
  * Libellé de la pastille de poids d'une facette ou d'une catégorie (ODD),
- * pour une cause comme pour un contact (POC-05A4) : C_f, moyenne des poids
- * de tous ses satellites (`meanWeight`), arrondie à un chiffre après la
- * virgule, avec une virgule décimale — « 7,2 ». `max` (WEIGHT_MAX, 10) ne
- * s'affiche qu'avec le suffixe (`facetteLabelSuffixVisible`).
+ * pour une cause comme pour un contact. Règle `mean` (défaut, POC-05A4) :
+ * moyenne des poids de tous ses satellites, arrondie à un chiffre après la
+ * virgule, avec une virgule décimale — « 7,2 », sur 10. Règle `sum`
+ * (ancienne, voir `FacetWeightRule`) : somme entière — « 61 », sur
+ * « satellites × 10 ». `max` ne s'affiche qu'avec le suffixe
+ * (`facetteLabelSuffixVisible`).
  */
 export declare function facetWeightLabel(weights: readonly number[]): {
     value: string;

package/dist/types/utils/facetteImages.d.ts

@@ -1,2 +1,8 @@
 export declare function hasFacetteImage(composanteId: string): boolean;
+/**
+ * Les originaux (1254×1254, ~6 Mo décodés) ne sont jamais affichés tels quels :
+ * on sert une miniature de 512 px et sa variante « voilée » pré-rendue (voir
+ * scripts/generate-facette-thumbs.py).
+ */
 export declare function getFacetteImageUrl(composanteId: string): string;
+export declare function getFacetteVeiledImageUrl(composanteId: string): string;

package/dist/types/utils/glowHalo.d.ts

@@ -0,0 +1,74 @@
+export type GlowStrokeLayer = {
+    /** Débord du trait de halo au-delà du bord de la forme, en px. */
+    spread: number;
+    /** Opacité propre de ce trait (les traits se superposent). */
+    opacity: number;
+};
+/**
+ * Traits superposés équivalant à `drop-shadow(0 0 ${blur}px couleur)` d'alpha
+ * `alpha` : à peindre du plus large au plus étroit, chacun de largeur
+ * `largeurDeBase + 2 × spread`, même couleur, `stroke-opacity` = `opacity`.
+ */
+export declare function glowStrokeLayers(blur: number, alpha?: number): GlowStrokeLayer[];
+/** Débord total (px) du halo de `glowStrokeLayers(blur)`. */
+export declare function glowStrokeReach(blur: number): number;
+/**
+ * Crée (ou recâble) dans `group` les traits d'un halo de chemin. `tag` est
+ * l'élément copié (`path`, `line`…) ; la géométrie est posée ensuite par
+ * l'appelant sur chaque trait (`d`, `x1`…), via `forEachStroke`.
+ */
+export declare function ensureGlowStrokes(group: SVGGElement, tag: "path" | "line" | "circle", layerCount?: number): SVGElement[];
+/**
+ * Habille les traits d'un halo : couleur, largeurs et opacités équivalant à
+ * un `drop-shadow(0 0 ${blur}px color)` posé sur une forme dont le trait fait
+ * `baseWidth` (0 pour une forme seulement remplie).
+ */
+export declare function styleGlowStrokes(strokes: readonly SVGElement[], options: {
+    color: string;
+    blur: number;
+    alpha?: number;
+    baseWidth?: number;
+}): void;
+export type SoftEdgeLayer = {
+    /** Décalage du bord de la couche (px) : > 0 vers l'extérieur. */
+    offset: number;
+    opacity: number;
+};
+/**
+ * Couches superposées équivalant à une forme pleine d'alpha `alpha` floutée
+ * par `filter: blur(${sigma}px)` (σ = l'argument de blur()) : à peindre dans
+ * l'ordre, chacune agrandie de `offset` (ou réduite si négatif), même
+ * couleur, `fill-opacity` = `opacity`.
+ */
+export declare function softEdgeLayers(sigma: number, alpha?: number): SoftEdgeLayer[];
+/** Rayon du disque de halo d'un cercle de rayon `radius`. */
+export declare function circleGlowRadius(radius: number, blur: number): number;
+/**
+ * `fill` d'un disque de rayon `circleGlowRadius(radius, blur)` centré sur un
+ * cercle de rayon `radius`, équivalant à `drop-shadow(0 0 ${blur}px color)`
+ * de ce cercle. Le dégradé (objectBoundingBox) est partagé par tous les
+ * cercles de même couleur et de même rapport rayon / flou, et recréé s'il a
+ * été purgé des defs.
+ */
+export declare function circleGlowFill(svg: SVGSVGElement, color: string, radius: number, blur: number): string;
+/** Une lueur : équivalent de `drop-shadow(0 0 ${blur}px color)` d'alpha `alpha`. */
+export type GlowSpec = {
+    color: string;
+    blur: number;
+    alpha?: number;
+};
+/**
+ * Pose (ou retire, `glows` null) un halo d'une forme : un `<g>` inséré
+ * avant elle (donc peint dessous), qui contient des copies de sa géométrie
+ * en traits de lueur (voir styleGlowStrokes). Plusieurs lueurs s'empilent,
+ * la plus large d'abord. `baseWidth` : largeur du trait de la forme. `slot`
+ * distingue plusieurs halos indépendants sur la même forme. Renvoie le
+ * groupe du halo (null s'il est retiré).
+ */
+export declare function syncShapeGlow(shape: SVGElement, glows: readonly GlowSpec[] | null, baseWidth?: number, slot?: string): SVGGElement | null;
+/** Recopie la géométrie d'une forme sur ses halos, s'il y en a — à appeler
+ *  quand la forme est modifiée en place. */
+export declare function syncShapeGlowGeometry(shape: SVGElement): void;
+/** Pose un attribut de géométrie sur les halos d'une forme (quand la forme
+ *  elle-même le reçoit plus tard, p. ex. dans un attrTween d3). */
+export declare function setShapeGlowAttribute(shape: Element, name: string, value: string): void;

package/dist/types/utils/hierBadge.d.ts

@@ -22,7 +22,7 @@ export declare function buildOddDotHtml(oddColor: string): string;
  *  couvert). `isKeyEvent` ajoute le médaillon (plaque + anneau doré +
  *  Yin/Yang en filigrane, voir `.ke-medallion` dans details-panel.css) qui
  *  distingue un Événement d'une Action à la silhouette seule. */
-export declare function buildItemIconHtml(iconUrl: string, isKeyEvent?: boolean): string;
+export declare function buildItemIconHtml(iconUrl: string, isKeyEvent?: boolean, lazy?: boolean): string;
 /** Pastille d'état (score /100) affichée après le nom, dans le champ
  *  "élément sélectionné" tout en haut du panneau — uniquement quand cet
  *  élément est un satellite. Pas de delta : jugé trop chargé visuellement à

package/dist/types/utils/keyEventImages.d.ts

@@ -6,7 +6,7 @@ export type KeyEventImageSize = "thumb" | "full";
  */
 export declare function getKeyEventImageUrl(keyEventId: string, size: KeyEventImageSize): string;
 /**
- * Icône vectorielle courte (bulle du menu radial du cercle central, badge
+ * Icône vectorielle courte (bulle du menu radial du satellite-facette, badge
  * de carte), même convention de nommage.
  */
 export declare function getKeyEventIconUrl(keyEventId: string): string;

package/dist/types/utils/menuIconSize.d.ts

@@ -0,0 +1,17 @@
+/** Utilitaire centralisé pour calculer la taille des icônes dans les menus radiaux
+ *  (actions et événements clés). Assure l'harmonie visuelle entre les deux. */
+/** Ratio de taille de l'icône quand elle est active (en focus/sélectionnée) */
+export declare const ACTIVE_ICON_SIZE_RATIO = 1.85;
+/** Ratio de taille de l'icône quand elle est inactive */
+export declare const INACTIVE_ICON_SIZE_RATIO = 1.65;
+/**
+ * Calcule la taille d'une icône dans un menu radial (bulle).
+ * Harmonise le dimensionnement entre les actions et les événements clés.
+ *
+ * @param bubbleRadius - Rayon de la bulle contenant l'icône
+ * @param isActive - L'icône est-elle en focus/active?
+ * @param iconFontScale - Facteur d'échelle du debug pour l'icône (slider utilisateur)
+ * @param applyFitScale - Appliquer le plafonnement fitScale (pour ne pas dépasser du cercle)?
+ * @returns Taille de l'icône en pixels
+ */
+export declare function calculateMenuIconSize(bubbleRadius: number, isActive: boolean, iconFontScale?: number, applyFitScale?: boolean): number;

package/dist/types/utils/spreadAngles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Écarte des angles (radians) placés sur un cercle de rayon `distance` pour
+ * que des disques de rayons `radii` centrés dessus ne se chevauchent pas,
+ * en déplaçant le moins possible chaque angle de sa position d'origine :
+ * chaque paire voisine trop serrée est écartée symétriquement, sur quelques
+ * passes. Renvoie les angles dans l'ordre d'entrée.
+ */
+export declare function spreadAngles(angles: number[], radii: number[], distance: number, gap: number): number[];
+/**
+ * Facteur (0, 1] à appliquer aux rayons `radii` pour que leurs disques
+ * tiennent, sans se chevaucher, sur le cercle de rayon `distance` (écart
+ * `gap` entre voisins, dans l'ordre des `angles`) — la condition sous
+ * laquelle `spreadAngles` peut les écarter. 1 quand tout tient déjà : un
+ * anneau n'est resserré que s'il est plein, et alors d'un bloc (les tailles
+ * relatives sont gardées).
+ */
+export declare function ringFitScale(angles: number[], radii: number[], distance: number, gap: number): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micheeeeel/yinyangapp",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "description": "A program to visualize human activity balance to reach Sustainable Development Objectives",
   "main": "dist/bundle.js",
   "types": "dist/types/main.d.ts",
@@ -14,6 +14,8 @@
     "analyze": "ANALYZE=true webpack --mode production && tsc -p tsconfig.types.json",
     "benchmark:compare": "node benchmarks/compare.js",
     "catalogue:matrix": "npx tsx scripts/catalogue-matrix.ts",
+    "events:balance": "node scripts/key-event-balance.cjs",
+    "events:adverse-balance": "node scripts/adverse-event-balance.cjs",
     "propagation:cycles-audit": "npx tsx scripts/propagation-cycles-audit.ts"
   },
   "author": "Thomas MICHEL",
@@ -47,6 +49,7 @@
   "files": [
     "dist/bundle.js",
     "dist/bundle.js.LICENSE.txt",
+    "dist/bundle.css",
     "dist/types",
     "README.md",
     "LICENSE"

package/dist/bundle.js.LICENSE.txt

@@ -1 +0,0 @@
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */