@micheeeeel/yinyangapp 1.0.6 → 2.0.0

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

@@ -7,6 +7,9 @@ export declare class D3GraphicsStrategy implements IGraphicsStrategy {
     private currentScale;
     private currentY;
     private currentX;
+    private arcMaskCache;
+    private underlyingGradientCache;
+    private maskIdCurrentCacheKey;
     /**
      * Initializes the SVG element and appends it to the given selector.
      * Also creates a 'defs' section for reusable graphical elements like gradients.
@@ -16,11 +19,15 @@ export declare class D3GraphicsStrategy implements IGraphicsStrategy {
     /**
      * Draws an arc using D3 on the parent element.
      */
-    drawArc(parent: D3Element, cx: number, cy: number, innerRadius: number, outerRadius: number, startAngle: number, endAngle: number, fill: string): void;
+    drawArc(parent: D3Element, cx: number, cy: number, innerRadius: number, outerRadius: number, startAngle: number, endAngle: number, fill: string, cornerRadius?: number): D3Element;
     /**
      * Draws a circle on the parent element with the specified attributes.
      */
     drawCircle(parent: D3Element, cx: number, cy: number, radius: number, fill: string, opacity?: number): D3Element;
+    private escapeAttributeValue;
+    private getDefById;
+    private defExists;
+    private getCacheKey;
     /**
      * Creates a linear gradient element in the 'defs' section.
      * Stops define the gradient transitions.
@@ -30,6 +37,16 @@ export declare class D3GraphicsStrategy implements IGraphicsStrategy {
         color: string;
         opacity: number;
     }[], gradientUnits: string): D3Element;
+    /**
+     * Creates a radial gradient element in the 'defs' section.
+     * Same contract as createLinearGradient: an existing def with the same id is
+     * reused as-is, so callers that need fresh stops must drop the old def first.
+     */
+    createRadialGradient(id: string, cx: string, cy: string, r: string, stops: {
+        offset: string;
+        color: string;
+        opacity: number;
+    }[], gradientUnits: string): D3Element;
     /**
      * Helper function to create an arc path with the specified radii and angles.
      */
@@ -37,7 +54,7 @@ export declare class D3GraphicsStrategy implements IGraphicsStrategy {
     /**
      * Creates a mask for Yin or Yang arcs using a gradient for soft transitions.
      */
-    createYinOrYangArcMask(maskId: string, cx: number, cy: number, innerRadius: number, outerRadius: number, startAngle: number, endAngle: number, type: "yin" | "yang"): D3Element;
+    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.
      */
@@ -53,9 +70,9 @@ export declare class D3GraphicsStrategy implements IGraphicsStrategy {
     /**
      * Creates a radial gradient for an underlying circle.
      */
-    createUnderlyingCircleGradient(id: string, color: string): void;
+    createUnderlyingCircleGradient(id: string, color: string, spread?: number, intensity?: number): string;
     /**
      * Creates an underlying circle with a gradient and applies an arc mask.
      */
-    createUnderlyingCircleWithArcMask(maskId: string, 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): void;
 }

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

@@ -0,0 +1,15 @@
+import type { KeyEventEffect } from "../data/yasuni_key_events";
+/** Ce dont une chip a besoin — sous-ensemble d'ActionDefinition. */
+export interface ChipDeltas {
+    baseDelta: number;
+    weightDelta?: number;
+}
+/** 9.45 → "9,5" ; 9 → "9". Virgule décimale, zéro superflu retiré. */
+export declare function formatDelta(value: number): string;
+/** Toujours signé : "+2", "−3" (vrai signe moins, pas un tiret), "+0". */
+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/deltaLabels.d.ts

@@ -0,0 +1,54 @@
+import * as d3 from "d3";
+/**
+ * Forme canonique d'un delta affiché dans le diagramme — une ligne de texte,
+ * sa couleur de remplissage et sa lueur.
+ *
+ * Le pictogramme fait partie du texte : Δ creux pour un delta de score,
+ * triangle plein orienté selon le signe pour un delta de poids. C'est lui qui
+ * porte le sens du poids (un poids en baisse n'est pas forcément un problème,
+ * voir WEIGHT_DELTA_COLOR), quand le score, lui, laisse la couleur le dire.
+ *
+ * Seule source de ce format : les deltas des satellites
+ * (ChildScoresDeltaRenderer) et ceux du badge du ghost central
+ * (YinYangDrawer.updateGhostDeltaBadge) doivent se lire comme une seule et
+ * même convention.
+ */
+export type DeltaRow = {
+    text: string;
+    fill: string;
+    glow: string;
+};
+/**
+ * Ligne d'un delta de score, à la décimale près (les projections d'action
+ * produisent des valeurs fractionnaires) — vert s'il monte, rouge s'il
+ * descend. `null` si le delta est nul : rien à montrer.
+ */
+export declare function buildScoreDeltaRow(delta: number | undefined | null, onLight?: boolean): DeltaRow | null;
+/**
+ * Ligne d'un delta de poids : entier (le poids ne bouge que par pas entiers),
+ * toujours doré, le triangle disant le sens. `null` si le delta est nul.
+ */
+export declare function buildWeightDeltaRow(delta: number | undefined | null, onLight?: boolean): DeltaRow | null;
+/**
+ * Voile doux posé derrière une pile de lignes de delta : détache le texte des
+ * fonds clairs ou chargés (images de facette, lobe blanc, ondes du ghost)
+ * sans reproduire l'effet "cadre" — pas de bordure, des bords flous. Un
+ * encadré, lui, se lit comme un élément d'interface posé sur le diagramme et
+ * prend le pas sur ce qu'il annote.
+ *
+ * À appeler AVANT les lignes qu'il accompagne (ordre de peinture).
+ */
+export declare function appendDeltaScrim(group: d3.Selection<any, any, any, any>, params: {
+    centerX: number;
+    centerY: number;
+    halfWidth: number;
+    halfHeight: number;
+    cornerRadius: number;
+    blur: number;
+}): void;
+/**
+ * Pose une ligne de delta : coloré, avec un contour fin de la même teinte qui
+ * le détache de n'importe quel fond (image de facette, lobe blanc) sans
+ * l'encadrer.
+ */
+export declare function appendDeltaRow(group: d3.Selection<any, any, any, any>, x: number, y: number, fontSize: number, role: string, row: DeltaRow, shadowEnabled: boolean): void;

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

@@ -0,0 +1 @@
+export declare function getFacetteImageUrl(composanteId: string): string;

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

@@ -1,4 +1,3 @@
 export declare class GeometryUtils {
-    static calculateSpikeLength(radius: number, value: number): number;
     static calculateSmallCircleRadius(grandRadius: number, dataLength: number): number;
 }

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

@@ -0,0 +1,44 @@
+/** Badge de niveau hiérarchique (Sphère/Facette/ODD/Satellite/Action) affiché
+ *  devant un nom d'élément — utilisé aussi bien dans le header des panneaux
+ *  RECHERCHE que dans le chip de navigation du mode STACK, pour un rendu
+ *  identique. Les classes CSS `ff-hier-badge--*` sont définies dans
+ *  details-panel.css (couleurs fixées par profondeur : d0 Sphère, d1 Facette,
+ *  d2 ODD, d3 Satellite, action-direct/action-prop).
+ */
+export type HierBadge = {
+    label: string;
+    cssClass: string;
+};
+export declare function buildHierBadgeHtml(badge: HierBadge): string;
+/** Point coloré par ODD affiché devant le badge "Satellite" — même rôle que le
+ *  dot persistant du chip STACK (`.stack-nav-chip-dot`), mais recréé à chaque
+ *  rendu (pas de transition), pour les headers de panneau RECHERCHE. */
+export declare function buildOddDotHtml(oddColor: string): string;
+/** Icône propre à l'élément (action/Événement Clé), affichée entre le point
+ *  ODD et le badge de type — jamais pour composante/cutting (pas de
+ *  convention d'icône à ce niveau). onerror retire l'élément silencieusement
+ *  si l'asset n'existe pas (protection générique, plus aucune icône
+ *  manquante en pratique depuis que le catalogue des 25 Événements Clés est
+ *  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;
+/** 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 à
+ *  cet endroit (le delta reste visible dans le diagramme). */
+export declare function buildStateChipHtml(state: number): string;
+/** Pastille de poids actuel (importance du satellite dans sa facette), même
+ *  agencement que buildStateChipHtml : valeur entière en blanc + "/WEIGHT_MAX"
+ *  atténué (le poids est un entier borné, pas un décimal). Pas de delta —
+ *  voir buildStateChipHtml. */
+export declare function buildWeightChipHtml(weight: number): string;
+/** Assemble les pastilles état + poids d'un satellite (chacune omise si sa
+ *  valeur correspondante est absente) — seule source de la logique de
+ *  gluage, réutilisée par le champ "élément sélectionné" en RECHERCHE
+ *  (PanelManager) comme en STACK (StackNavOverlay) pour qu'un ajout/retrait
+ *  de pastille ne puisse pas diverger entre les deux modes. */
+export declare function buildSelectedStateWeightChipsHtml(params: {
+    stateValue?: number;
+    weightValue?: number;
+}): string;

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

@@ -0,0 +1,8 @@
+/**
+ * Illustration affichée dans le cercle principal quand aucune facette n'est
+ * sélectionnée (mode idle) — remplace le rendu yin/yang de la composante 0
+ * par défaut, qui n'a pas de sens tant que rien n'a réellement été
+ * sélectionné. Fichier fixe (pas d'id à reconstruire), voir
+ * documentation/assets-pipeline.md Pipeline 5.
+ */
+export declare function getIdleSphereImageUrl(): string;

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

@@ -0,0 +1,41 @@
+export type KeyEventImageSize = "thumb" | "full";
+/**
+ * Même convention que actionImages.ts (résolution par id, sans champ stocké),
+ * mais dans un dossier dédié : un Événement Clé affiche sa PROPRE illustration,
+ * jamais celle de l'action qu'il amplifie.
+ */
+export declare function getKeyEventImageUrl(keyEventId: string, size: KeyEventImageSize): string;
+/**
+ * Icône vectorielle courte (bulle du menu radial du cercle central, badge
+ * de carte), même convention de nommage.
+ */
+export declare function getKeyEventIconUrl(keyEventId: string): string;
+/**
+ * Événements Clés "débloqués" — POC.
+ *
+ * Le jeu final débloquera les Événements Clés au fil de l'aventure ; ce POC
+ * n'a pas encore de progression. On simule donc le verrou avec la seule
+ * donnée réellement disponible : l'illustration existe-t-elle ou non. Un
+ * événement sans illustration est présenté comme non débloqué (image
+ * remplacée par un cartouche verrouillé, libellés et boutons grisés) plutôt
+ * que comme une carte cassée à l'image manquante.
+ *
+ * Cette liste EST le contrat du pipeline 3 (voir documentation/assets-pipeline.md) :
+ * dès qu'un `{id}.webp` est produit dans public/assets/key-events/full|thumb,
+ * ajouter l'id ici — c'est la seule étape manuelle, il n'existe pas de moyen
+ * fiable de tester la présence d'un asset statique de façon synchrone au
+ * moment du rendu.
+ *
+ * Verrou PUREMENT VISUEL : un Événement Clé verrouillé reste sélectionnable,
+ * glissable dans la pile et amplifie normalement — le POC doit continuer à
+ * démontrer le moteur d'amplification sur les 25 événements.
+ */
+export declare const UNLOCKED_KEY_EVENT_IDS: ReadonlySet<string>;
+export declare function isKeyEventUnlocked(keyEventId: string): boolean;
+/**
+ * Cadenas fermé, marqueur commun à tous les rendus d'un Événement Clé
+ * verrouillé (cartouche de carte, ligne d'arbre, panneau de description).
+ * Inline plutôt qu'un asset : un seul glyphe, qui doit hériter de la couleur
+ * du contexte (`currentColor`) pour se fondre dans chacun de ces rendus.
+ */
+export declare function buildLockGlyphHtml(cssClass: string): string;

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

@@ -0,0 +1,30 @@
+import { type Composante, type ODD } from "../data/yasuni_cause";
+/** Bloc légende pour le statut sphère : tous les ODD de la sphère,
+ *  description générique. À insérer sous `.ff-sphere-intro-desc`. */
+export declare function buildOddLegendHtml(): string;
+/** Bloc légende pour le statut facette : seulement les ODD de cette
+ *  composante, description contextualisée à celle-ci. À insérer sous
+ *  la description de facette (`.ff-element-intro-desc` / `.gs-detail-desc-text`). */
+export declare function buildOddLegendHtmlForComposante(composante: Composante): string;
+/** Bloc légende pour le statut satellite (cutting) : le seul ODD parent de
+ *  ce satellite, description contextualisée à la composante. À insérer
+ *  sous la description de satellite. */
+export declare function buildOddLegendHtmlForOdd(odd: ODD, composanteId: string): string;
+/** Gère le clic délégué sur un chip `[data-odd-legend-chip]` : ouvre sa
+ *  description sous la grille (générique ou contextualisée selon la portée
+ *  du bloc — voir `data-legend-composante`), ou la referme si déjà active.
+ *  Retourne le nouvel état (`true` = ouvert, `false` = refermé) pour que
+ *  l'appelant puisse répercuter ce même état ailleurs (ex : l'arc du
+ *  diagramme correspondant à cet ODD). */
+export declare function toggleOddLegendChip(chip: HTMLElement): boolean;
+/** Attache le survol des chips `[data-odd-legend-chip]` d'un container à un
+ *  callback (id ODD survolé, ou `null` en sortie — accompagné de la composante
+ *  à cibler dans le diagramme, résolue par chip via `data-odd-legend-composante` :
+ *  la composante elle-même en légende facette, la première composante qui
+ *  contient cet ODD en légende sphère) — sens "chip → diagramme". À rappeler
+ *  à chaque re-render (les chips sont recréés à chaque innerHTML). */
+export declare function attachOddLegendHoverHandlers(container: HTMLElement, onHover: (oddId: string | null, composanteId?: string) => void): void;
+/** Reflète dans un container donné le survol venant du diagramme — sens
+ *  "arc → chip". Ne fait rien si aucun chip ne correspond (ex : légende de
+ *  la sphère, sans arc affiché à l'écran). */
+export declare function setOddLegendHoverState(container: HTMLElement, oddId: string | null): void;

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

@@ -0,0 +1,16 @@
+/**
+ * Plancher des slots réellement occupés : une densité Beta(α,β) vaut
+ * structurellement 0 pile aux bords (t=0 ou t=1) quels que soient α et β —
+ * aucun réglage de forme ne peut l'éviter. Un slot occupé au bord de la
+ * fenêtre garde donc une efficacité résiduelle plutôt que de retomber à 0
+ * comme un slot vide/jamais joué.
+ */
+export declare const MIN_OCCUPIED_POSITIONAL_EFF = 0.15;
+/** Beta(t) normalisée par son pic, sans plancher — exactement 0 aux bords. */
+export declare function rawPositionalEfficiency(t: number): number;
+/**
+ * Efficacité positionnelle d'un slot RÉELLEMENT OCCUPÉ dans une fenêtre
+ * [windowMin, windowMin + windowSize]. N'appeler que pour un slot occupé —
+ * un slot vide/hors-fenêtre doit rester à 0 sans plancher immérité.
+ */
+export declare function occupiedSlotPositionalEfficiency(slot: number, windowMin: number, windowSize: number): number;

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

@@ -0,0 +1,29 @@
+import * as d3 from "d3";
+/**
+ * Insère le filigrane (voile + courbe en S + les deux yeux) dans chaque
+ * élément d'une sélection D3. À appeler une seule fois, sur la sélection
+ * enter() : la mise à l'échelle et la teinte se règlent ensuite par
+ * `styleYinYangWatermark` à chaque rendu.
+ *
+ * L'appelant reste responsable du z-order : appeler ce helper APRÈS la
+ * plaque de fond et AVANT le pictogramme.
+ */
+export declare function appendYinYangWatermark<TDatum>(selection: d3.Selection<any, TDatum, any, any>): void;
+/**
+ * Met le filigrane d'UN élément à l'échelle du médaillon qui l'accueille et
+ * lui donne sa teinte.
+ *
+ * @param host    élément conteneur (celui qui a reçu `appendYinYangWatermark`)
+ * @param radius  rayon du médaillon, dans les unités du conteneur
+ * @param color   teinte du filigrane (l'or des Événements Clés par défaut ;
+ *                un gris froid pour un événement verrouillé, la teinte or
+ *                étant justement ce qu'on lui retire)
+ * @param intensity multiplicateur des opacités de référence — en dessous de 1
+ *                sur les grands médaillons, dont la surface fait davantage
+ *                ressortir le motif à opacité égale.
+ */
+export declare function styleYinYangWatermark(host: d3.Selection<any, any, any, any>, params: {
+    radius: number;
+    color?: string;
+    intensity?: number;
+}): void;

package/package.json

@@ -1,20 +1,23 @@
 {
   "name": "@micheeeeel/yinyangapp",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "description": "A program to visualize human activity balance to reach Sustainable Development Objectives",
   "main": "dist/bundle.js",
-  "types": "dist/types/script.d.ts",
+  "types": "dist/types/main.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc -p tsconfig.types.json && webpack --mode production",
-    "start": "webpack serve --mode development --open",
-    "deploy": "npm run build && gh-pages -d dist --no-delete"
+    "test": "vitest run",
+    "build": "webpack --mode production && tsc -p tsconfig.types.json",
+    "start": "webpack serve --mode development",
+    "deploy": "npm run build && gh-pages -d dist --no-delete",
+    "check:file-lines": "node scripts/check-file-lines.mjs",
+    "ci:guard": "npm run check:file-lines",
+    "analyze": "ANALYZE=true webpack --mode production && tsc -p tsconfig.types.json",
+    "benchmark:compare": "node benchmarks/compare.js"
   },
   "author": "Thomas MICHEL",
   "license": "ISC",
-  "dependencies": {
-    "d3": "^7.9.0",
-    "gh-pages": "^6.2.0"
+  "peerDependencies": {
+    "d3": "^7.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -22,15 +25,27 @@
     "@babel/preset-typescript": "^7.24.1",
     "@types/d3": "^7.4.3",
     "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^14.0.0",
+    "css-loader": "^7.1.4",
+    "css-minimizer-webpack-plugin": "^8.0.0",
+    "d3": "^7.9.0",
+    "gh-pages": "^6.2.0",
     "html-webpack-plugin": "^5.6.3",
+    "mini-css-extract-plugin": "^2.10.2",
+    "playwright": "^1.61.0",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.4.5",
-    "webpack": "^5.90.3",
+    "vitest": "^4.1.11",
+    "webpack": "^5.105.0",
+    "webpack-bundle-analyzer": "^5.3.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-dev-server": "^5.2.3"
   },
   "files": [
-    "dist",
+    "dist/bundle.js",
+    "dist/bundle.js.LICENSE.txt",
+    "dist/types",
     "README.md"
   ]
 }

package/dist/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>YinYangApp Visualization</title><script defer="defer" src="bundle.js"></script></head><body><h1>YinYang Visualization</h1><div id="svg-container" style="width: 100vw; height: 100vh"></div><script src="https://d3js.org/d3.v7.min.js"></script></body></html>

package/dist/types/data/coupe_rase_Orangs-outans/data_Kalimantan.d.ts

@@ -1,3 +0,0 @@
-import { IOddItem } from "../../interfaces/IOddItem";
-declare let odd: IOddItem[];
-export default odd;

package/dist/types/data/coupe_rase_Orangs-outans/data_PT_Mayawana_Persada.d.ts

@@ -1,3 +0,0 @@
-import { IOddItem } from "../../interfaces/IOddItem";
-declare let odd: IOddItem[];
-export default odd;

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

@@ -1,3 +0,0 @@
-import { IOddItem } from "../interfaces/IOddItem";
-declare let odd: IOddItem[];
-export default odd;

package/dist/types/interfaces/IOddItem.d.ts

@@ -1,6 +0,0 @@
-export interface IOddItem {
-    categorie: string;
-    composante: string;
-    score: number;
-    description: string;
-}

package/dist/types/script.d.ts

@@ -1,13 +0,0 @@
-import { IViewData } from "./interfaces/IViewData";
-import { IOddItem } from "./interfaces/IOddItem";
-export declare function initializeYinYangApp(viewData: IViewData): void;
-export interface YinYangSvgConfig {
-    data: IOddItem[];
-    viewData: Omit<IViewData, "containerId"> & {
-        containerId?: string;
-    };
-    isEnemy?: boolean;
-    includeChildren?: boolean;
-}
-export declare function createYinYangSvg(config: YinYangSvgConfig): SVGSVGElement | null;
-export declare function createYinYangSvgs(configs: YinYangSvgConfig[]): SVGSVGElement[];